/* ============================================================
   coming-soon.css - Reusable "Coming Soon" section
   ------------------------------------------------------------
   Design language: matches custom.css tokens (Inter Tight font,
   --primary-color green, --accent-color navy, --secondary-color
   soft bg, --ease cubic-bezier). Section is self-contained, so
   it can be dropped into ANY page as a reusable block:

     <div class="coming-soon-section">
       <div class="container">
         <div class="row align-items-center"> ... </div>
       </div>
     </div>

   Works as a standalone page section too (see coming-soon.html).
   Fully responsive: desktop / tablet / mobile.
   ============================================================ */

/* ---------- Section shell ---------- */
.coming-soon-section {
	position: relative;
	padding: 130px 0;
	background-color: var(--secondary-color);
	background-image: url('../images/section-bg-image-1.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.coming-soon-section .cs-content {
	position: relative;
	z-index: 1;
}

/* ---------- Heading ---------- */
.coming-soon-section .cs-title {
	font-size: 68px;
	font-weight: 600;
	line-height: 1.08;
	text-transform: capitalize;
	color: var(--accent-color);
	margin-bottom: 22px;
}

.coming-soon-section .cs-title .cs-title-highlight {
	position: relative;
	display: inline-block;
	color: var(--primary-color);
	white-space: nowrap;
}

.coming-soon-section .cs-title .cs-title-highlight::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 10px;
	background: var(--primary-color);
	opacity: 0.18;
	border-radius: 100px;
	transform-origin: left center;
	animation: cs-underline 1s var(--ease) 0.9s both;
}

/* ---------- Message ---------- */
.coming-soon-section .cs-message {
	font-size: 18px;
	line-height: 1.75;
	color: var(--text-color);
	max-width: 480px;
	margin-bottom: 38px;
}

/* ---------- Action row ---------- */
.coming-soon-section .cs-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
}

.coming-soon-section .cs-contact-note {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--accent-color);
}

.coming-soon-section .cs-contact-note i {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 15px;
	box-shadow: 0 5px 15px rgba(2, 42, 72, 0.07);
}

.coming-soon-section .cs-contact-note a {
	color: var(--primary-color);
	font-weight: 600;
	transition: all 0.3s ease-in-out;
}

.coming-soon-section .cs-contact-note a:hover {
	color: var(--accent-color);
}

/* ---------- Visual composition ---------- */
.coming-soon-section .cs-visual-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
}

/* soft gradient disc behind the card */
.coming-soon-section .cs-disc {
	position: absolute;
	width: 390px;
	height: 390px;
	border-radius: 100%;
	background: linear-gradient(145deg, rgba(72, 162, 100, 0.16), rgba(2, 42, 72, 0.08));
	animation: cs-float 6s ease-in-out infinite;
}

/* pulsing rings */
.coming-soon-section .cs-ring {
	position: absolute;
	border: 1.5px dashed rgba(72, 162, 100, 0.45);
	border-radius: 100%;
	animation: cs-ring-pulse 3.2s var(--ease) infinite;
}

.coming-soon-section .cs-ring-1 {
	width: 430px;
	height: 430px;
}

.coming-soon-section .cs-ring-2 {
	width: 500px;
	height: 500px;
	border-color: rgba(2, 42, 72, 0.14);
	animation-delay: 1.1s;
	animation-duration: 4s;
}

/* orbiting dot */
.coming-soon-section .cs-orbit {
	position: absolute;
	width: 465px;
	height: 465px;
	border-radius: 100%;
	animation: cs-orbit 14s linear infinite;
}

.coming-soon-section .cs-orbit-dot {
	position: absolute;
	top: -7px;
	left: 50%;
	margin-left: -7px;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: var(--primary-color);
	box-shadow: 0 0 0 6px rgba(72, 162, 100, 0.2);
}

/* central glass card */
.coming-soon-section .cs-card {
	position: relative;
	width: 300px;
	padding: 44px 34px 38px;
	text-align: center;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 30px 60px rgba(2, 42, 72, 0.12);
	animation: cs-float 5.5s ease-in-out infinite;
	z-index: 2;
}

.coming-soon-section .cs-card-icon {
	width: 86px;
	height: 86px;
	margin: 0 auto 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background: linear-gradient(145deg, var(--primary-color), #3a8a53);
	color: var(--white-color);
	font-size: 34px;
	box-shadow: 0 15px 30px rgba(72, 162, 100, 0.35);
	animation: cs-icon-sway 4s ease-in-out infinite;
}

.coming-soon-section .cs-card-title {
	font-size: 21px;
	font-weight: 600;
	color: var(--accent-color);
	margin-bottom: 10px;
}

.coming-soon-section .cs-card-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-color);
	margin-bottom: 26px;
}

/* animated progress bar */
.coming-soon-section .cs-progress {
	position: relative;
	height: 8px;
	border-radius: 100px;
	background: var(--secondary-color);
	overflow: hidden;
	margin-bottom: 12px;
}

.coming-soon-section .cs-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 72%;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--primary-color), #7cc493);
	overflow: hidden;
}

.coming-soon-section .cs-progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	animation: cs-shimmer 2.2s linear infinite;
}

.coming-soon-section .cs-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-color);
}

.coming-soon-section .cs-progress-label span:last-child {
	color: var(--primary-color);
}

/* floating badge chips */
.coming-soon-section .cs-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	border-radius: 100px;
	background: var(--white-color);
	box-shadow: 0 18px 38px rgba(2, 42, 72, 0.13);
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-color);
	z-index: 3;
	white-space: nowrap;
}

.coming-soon-section .cs-chip i {
	font-size: 15px;
	color: var(--primary-color);
}

.coming-soon-section .cs-chip-1 {
	top: 16%;
	left: 2%;
	animation: cs-float 4.8s ease-in-out 0.4s infinite;
}

.coming-soon-section .cs-chip-2 {
	bottom: 15%;
	right: 1%;
	animation: cs-float 5.6s ease-in-out 1s infinite;
}

/* scattered decorative dots */
.coming-soon-section .cs-dot {
	position: absolute;
	border-radius: 100%;
	z-index: 0;
}

.coming-soon-section .cs-dot-1 {
	width: 12px;
	height: 12px;
	top: 10%;
	right: 18%;
	background: var(--primary-color);
	opacity: 0.55;
	animation: cs-float 5s ease-in-out infinite;
}

.coming-soon-section .cs-dot-2 {
	width: 8px;
	height: 8px;
	bottom: 22%;
	left: 14%;
	background: var(--accent-color);
	opacity: 0.3;
	animation: cs-float 6.5s ease-in-out 0.8s infinite;
}

.coming-soon-section .cs-dot-3 {
	width: 20px;
	height: 20px;
	top: 30%;
	left: 6%;
	border: 2px solid rgba(72, 162, 100, 0.5);
	background: transparent;
	animation: cs-float 7s ease-in-out 0.3s infinite;
}

/* ---------- Keyframes ---------- */
@keyframes cs-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-16px); }
}

@keyframes cs-ring-pulse {
	0% { transform: scale(0.94); opacity: 0.9; }
	70% { transform: scale(1.05); opacity: 0.25; }
	100% { transform: scale(1.08); opacity: 0; }
}

@keyframes cs-orbit {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes cs-icon-sway {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(6deg); }
}

@keyframes cs-shimmer {
	from { left: -60%; }
	to { left: 130%; }
}

@keyframes cs-underline {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ============================================================
   Responsive - Tablet
   ============================================================ */
@media (max-width: 1199px) {
	.coming-soon-section {
		padding: 110px 0;
	}

	.coming-soon-section .cs-title {
		font-size: 56px;
	}

	.coming-soon-section .cs-visual-wrap {
		min-height: 430px;
	}

	.coming-soon-section .cs-disc {
		width: 340px;
		height: 340px;
	}

	.coming-soon-section .cs-ring-1 {
		width: 380px;
		height: 380px;
	}

	.coming-soon-section .cs-ring-2 {
		width: 440px;
		height: 440px;
	}

	.coming-soon-section .cs-orbit {
		width: 410px;
		height: 410px;
	}
}

/* ============================================================
   Responsive - Mobile
   ============================================================ */
@media (max-width: 991px) {
	.coming-soon-section {
		padding: 90px 0;
	}

	.coming-soon-section .cs-title {
		font-size: 44px;
		margin-bottom: 16px;
	}

	.coming-soon-section .cs-message {
		font-size: 16px;
		max-width: 100%;
		margin-bottom: 30px;
	}

	.coming-soon-section .cs-visual-wrap {
		min-height: 400px;
		margin-top: 25px;
	}

	.coming-soon-section .cs-card {
		width: 270px;
		padding: 36px 26px 32px;
	}

	.coming-soon-section .cs-chip {
		padding: 11px 16px;
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.coming-soon-section {
		padding: 70px 0;
	}

	.coming-soon-section .cs-title {
		font-size: 34px;
	}

	.coming-soon-section .cs-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.coming-soon-section .btn-default {
		padding: 15px 44px 15px 20px;
		font-size: 15px;
	}

	.coming-soon-section .cs-visual-wrap {
		min-height: 350px;
	}

	.coming-soon-section .cs-disc {
		width: 270px;
		height: 270px;
	}

	.coming-soon-section .cs-ring-1 {
		width: 300px;
		height: 300px;
	}

	.coming-soon-section .cs-ring-2 {
		width: 345px;
		height: 345px;
	}

	.coming-soon-section .cs-orbit {
		width: 322px;
		height: 322px;
	}

	.coming-soon-section .cs-chip-1 {
		top: 6%;
		left: 0;
	}

	.coming-soon-section .cs-chip-2 {
		bottom: 5%;
		right: 0;
	}
}

@media (max-width: 575px) {
	.coming-soon-section .cs-title {
		font-size: 29px;
	}

	.coming-soon-section .cs-card {
		width: 240px;
		padding: 30px 20px 26px;
	}

	.coming-soon-section .cs-card-icon {
		width: 72px;
		height: 72px;
		font-size: 28px;
		margin-bottom: 20px;
	}

	.coming-soon-section .cs-ring-2,
	.coming-soon-section .cs-orbit,
	.coming-soon-section .cs-dot-3 {
		display: none;
	}
}

/* ---------- Respect reduced motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
	.coming-soon-section .cs-card,
	.coming-soon-section .cs-disc,
	.coming-soon-section .cs-ring,
	.coming-soon-section .cs-orbit,
	.coming-soon-section .cs-chip,
	.coming-soon-section .cs-dot,
	.coming-soon-section .cs-card-icon,
	.coming-soon-section .cs-progress-bar::after,
	.coming-soon-section .cs-title .cs-title-highlight::after {
		animation: none;
	}
}