/* ==========================================================================
   Billing Saathi 3D — styles
   Everything is scoped to .bs3d-section and prefixed bs3d-.
   Colours come from the custom properties below (set inline by the plugin
   from the same config the 3D scene uses, so there is one place to change them).
   ========================================================================== */

.bs3d-section {
	--bs3d-primary: #9FE870;
	--bs3d-dark: #050806;
	--bs3d-dark2: #0B120D;
	--bs3d-soft: rgba(159, 232, 112, 0.15);
	--bs3d-white: #FFFFFF;
	--bs3d-muted: #AAB5AC;
	--bs3d-pad: clamp(20px, 4.5vw, 72px);

	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--bs3d-dark);
	color: var(--bs3d-white);
	line-height: 1.5;
	text-align: left;
	overflow: hidden;
	isolation: isolate;
}
/* break out of a boxed theme / Elementor column to the full viewport width */
.bs3d-section.bs3d-full {
	width: var(--bs3d-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--bs3d-vw, 100vw) / 2);
}
.bs3d-section *,
.bs3d-section *::before,
.bs3d-section *::after { box-sizing: border-box; }

/* ---------- stage (the pinned 3D viewport) ---------- */
.bs3d-section .bs3d-stage {
	position: relative;
	width: 100%;
	/* Fill the whole screen on phones, including the strip the browser's address bar leaves when it hides.
	   (100vh / 100lvh = the tall viewport; the bottom-anchored text uses the visible viewport, see .bs3d-overlay.) */
	height: 100vh;
	height: 100lvh;
	min-height: 300px;
	overflow: hidden;
	background: var(--bs3d-dark);
}
.bs3d-section.bs3d-is-sticky { overflow: visible; }
.bs3d-section.bs3d-is-sticky .bs3d-stage { position: sticky; top: 0; }

.bs3d-section .bs3d-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.bs3d-section.bs3d-is-live .bs3d-canvas { opacity: 1; }

.bs3d-section .bs3d-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
		linear-gradient(to top, rgba(5, 8, 6, 0.72) 0%, rgba(5, 8, 6, 0) 34%);
}

.bs3d-section .bs3d-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	height: 100dvh;          /* captions stay above the browser toolbar when it is showing */
	max-height: 100%;
	pointer-events: none;
}

/* ---------- 01 intro ---------- */
.bs3d-section .bs3d-intro {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: var(--bs3d-pad);
	text-align: center;
}
/* the one autoplaying moment: the name surfacing out of the dark */
.bs3d-section .bs3d-intro > * { animation: bs3d-emerge 2.4s ease 0.2s both; }
@keyframes bs3d-emerge { from { opacity: 0; } to { opacity: 1; } }

.bs3d-section .bs3d-wordmark {
	margin: 0;
	padding: 0;
	font-size: clamp(2.6rem, 8.2vw, 7rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--bs3d-white);
	text-shadow: 0 0 80px rgba(159, 232, 112, 0.28);
}
.bs3d-section .bs3d-wordmark span { color: var(--bs3d-primary); }
.bs3d-section .bs3d-logo { display: block; max-width: min(72vw, 520px); height: auto; }
.bs3d-section .bs3d-tagline {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	color: var(--bs3d-muted);
}
.bs3d-section .bs3d-hint {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 5vh, 48px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--bs3d-muted);
}
.bs3d-section .bs3d-hint::after {
	content: "";
	width: 1px;
	height: 44px;
	background: linear-gradient(var(--bs3d-primary), transparent);
	transform-origin: top;
	animation: bs3d-hint 2.2s ease-in-out infinite;
}
@keyframes bs3d-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 02–07 captions ---------- */
.bs3d-section .bs3d-caption {
	position: absolute;
	left: var(--bs3d-pad);
	bottom: clamp(28px, 8vh, 84px);
	width: min(30rem, calc(100% - var(--bs3d-pad) * 2 - 40px));
	visibility: hidden;
	opacity: 0;
}
.bs3d-section .bs3d-caption-title,
.bs3d-section .bs3d-final-title {
	margin: 0 0 0.4em;
	padding: 0;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--bs3d-white);
	text-wrap: balance;
}
.bs3d-section .bs3d-caption-title { font-size: clamp(1.75rem, 3.5vw, 3.1rem); }
.bs3d-section .bs3d-caption-text,
.bs3d-section .bs3d-final-text {
	margin: 0;
	padding: 0;
	font-size: clamp(0.9375rem, 1.15vw, 1.125rem);
	line-height: 1.5;
	color: var(--bs3d-muted);
	text-wrap: pretty;
}

/* ---------- 08 final headline (sits just above the 3D button; JS sets `bottom`) ---------- */
.bs3d-section .bs3d-final {
	position: absolute;
	left: 50%;
	bottom: 30%;
	width: min(46rem, calc(100% - var(--bs3d-pad) * 2));
	margin-left: calc(min(46rem, 100% - var(--bs3d-pad) * 2) / -2);
	text-align: center;
	visibility: hidden;
	opacity: 0;
}
.bs3d-section .bs3d-final::before { /* soft scrim so the type stays readable over the scene */
	content: "";
	position: absolute;
	inset: -40% -12% -30%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(5, 8, 6, 0.86), rgba(5, 8, 6, 0));
}
.bs3d-section .bs3d-final-title { font-size: clamp(2rem, 5vw, 4.4rem); margin-bottom: 0.28em; }
.bs3d-section .bs3d-final-text { max-width: 44ch; margin: 0 auto; color: #D4DCD6; }

/* the real link: invisible, laid exactly over the 3D button by JS */
.bs3d-section .bs3d-cta-hit {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 44px;
	border-radius: 999px;
	color: transparent;
	font-size: 0;
	text-decoration: none;
	pointer-events: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bs3d-section .bs3d-cta-hit:focus-visible { outline: 3px solid var(--bs3d-white); outline-offset: 5px; }

/* ---------- progress rail + skip ---------- */
.bs3d-section .bs3d-progress {
	position: absolute;
	right: clamp(10px, 2vw, 28px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.bs3d-section.bs3d-is-live .bs3d-progress { opacity: 1; }
.bs3d-section .bs3d-progress li { margin: 0; padding: 0; list-style: none; }
.bs3d-section .bs3d-dot {
	display: block;
	width: 14px;
	height: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	cursor: pointer;
	position: relative;
}
.bs3d-section .bs3d-dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.bs3d-section .bs3d-dot:hover::before { background: var(--bs3d-white); }
.bs3d-section .bs3d-dot.bs3d-is-active::before {
	background: var(--bs3d-primary);
	transform: scale(1.7);
	box-shadow: 0 0 14px var(--bs3d-primary);
}
.bs3d-section .bs3d-dot:focus-visible { outline: 2px solid var(--bs3d-primary); outline-offset: -2px; }

/* sound toggle: bottom-left, directly above the caption heading (JS keeps it just above whichever caption is showing) */
.bs3d-section .bs3d-sound {
	position: absolute;
	left: var(--bs3d-pad);
	bottom: clamp(28px, 8vh, 84px);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(5, 8, 6, 0.6);
	box-shadow: none;
	color: var(--bs3d-muted);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.6s ease, color 0.2s ease, border-color 0.2s ease;
}
.bs3d-section.bs3d-is-live .bs3d-sound { opacity: 1; }
.bs3d-section .bs3d-sound:hover,
.bs3d-section .bs3d-sound:focus-visible { color: var(--bs3d-white); border-color: var(--bs3d-primary); background: rgba(5, 8, 6, 0.6); outline: none; }

/* still bars with a slash = muted, moving bars = playing */
.bs3d-section .bs3d-sound-icon { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 14px; }
/* muted: still bars with a slash through them */
.bs3d-section .bs3d-sound-icon::after {
	content: "";
	position: absolute;
	left: -3px;
	right: -3px;
	top: 50%;
	height: 1.5px;
	background: var(--bs3d-white);
	transform: rotate(-38deg);
	transition: opacity 0.2s ease;
}
.bs3d-section .bs3d-sound.bs3d-is-on .bs3d-sound-icon::after { opacity: 0; }
.bs3d-section .bs3d-sound-icon i:nth-child(1) { transform: scaleY(0.4); }
.bs3d-section .bs3d-sound-icon i:nth-child(2) { transform: scaleY(0.8); }
.bs3d-section .bs3d-sound-icon i:nth-child(3) { transform: scaleY(0.55); }
.bs3d-section .bs3d-sound-icon i:nth-child(4) { transform: scaleY(1); }
.bs3d-section .bs3d-sound-icon i {
	display: block;
	width: 2px;
	height: 14px;
	border-radius: 1px;
	background: var(--bs3d-muted);
	transition: background-color 0.2s ease;
}
.bs3d-section .bs3d-sound.bs3d-is-on { color: var(--bs3d-primary); border-color: var(--bs3d-primary); }
.bs3d-section .bs3d-sound.bs3d-is-on .bs3d-sound-icon i { background: var(--bs3d-primary); animation: bs3d-eq 0.9s ease-in-out infinite alternate; }
.bs3d-section .bs3d-sound.bs3d-is-on .bs3d-sound-icon i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.7s; }
.bs3d-section .bs3d-sound.bs3d-is-on .bs3d-sound-icon i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.1s; }
.bs3d-section .bs3d-sound.bs3d-is-on .bs3d-sound-icon i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.8s; }
/* sound is on but the browser is still waiting for a first tap: the button breathes to invite one */
.bs3d-section.bs3d-is-live .bs3d-sound.bs3d-is-waiting { animation: bs3d-invite 2.6s ease-in-out infinite; }
.bs3d-section .bs3d-sound.bs3d-is-waiting .bs3d-sound-icon i { animation-play-state: paused; }
@keyframes bs3d-invite { 0%, 100% { box-shadow: 0 0 0 0 rgba(159, 232, 112, 0); } 50% { box-shadow: 0 0 0 7px rgba(159, 232, 112, 0.16); } }
@keyframes bs3d-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* ==========================================================================
   Fallback: static hero + 2.5D screen (no WebGL / reduced motion / slow GPU / no JS)
   ========================================================================== */
.bs3d-section .bs3d-fallback { display: none; }
.bs3d-section.bs3d-is-fallback { overflow: hidden; }
.bs3d-section.bs3d-is-fallback .bs3d-stage { display: none; }
.bs3d-section.bs3d-is-fallback .bs3d-fallback {
	display: block;
	padding: clamp(56px, 9vw, 128px) var(--bs3d-pad);
	background:
		radial-gradient(60% 50% at 72% 30%, var(--bs3d-soft), transparent 70%),
		var(--bs3d-dark);
}
.bs3d-section .bs3d-fb-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
}
.bs3d-section .bs3d-fb-title {
	margin: 0 0 0.35em;
	font-size: clamp(2.2rem, 5vw, 4.4rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--bs3d-white);
	text-wrap: balance;
}
.bs3d-section .bs3d-fb-text { margin: 0 0 1.8em; max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--bs3d-muted); }
.bs3d-section .bs3d-fb-cta {
	display: inline-block;
	padding: 16px 30px;
	border-radius: 999px;
	background: var(--bs3d-primary);
	color: var(--bs3d-dark);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 10px 40px rgba(159, 232, 112, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bs3d-section .bs3d-fb-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 48px rgba(159, 232, 112, 0.38); color: var(--bs3d-dark); }
.bs3d-section .bs3d-fb-cta:focus-visible { outline: 3px solid var(--bs3d-white); outline-offset: 4px; }

.bs3d-section .bs3d-fb-visual { perspective: 1600px; }
.bs3d-section .bs3d-fb-screen {
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bs3d-dark2);
	border: 1px solid rgba(159, 232, 112, 0.28);
	transform: rotateY(-16deg) rotateX(7deg) rotateZ(1deg);
	transform-origin: 60% 50%;
	box-shadow:
		0 60px 120px rgba(0, 0, 0, 0.7),
		0 0 120px rgba(159, 232, 112, 0.16),
		-18px 18px 0 -6px rgba(159, 232, 112, 0.06);
}
.bs3d-section .bs3d-fb-screen img,
.bs3d-section .bs3d-fb-screen canvas { display: block; width: 100%; height: 100%; object-fit: cover; }

.bs3d-section .bs3d-fb-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px) clamp(24px, 4vw, 64px);
	max-width: 1280px;
	margin: clamp(56px, 8vw, 120px) auto 0;
	padding: 0;
	list-style: none;
}
.bs3d-section .bs3d-fb-features li {
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(159, 232, 112, 0.3);
	list-style: none;
}
.bs3d-section .bs3d-fb-features h3 { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--bs3d-white); }
.bs3d-section .bs3d-fb-features p { margin: 0; font-size: 0.9688rem; line-height: 1.55; color: var(--bs3d-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
	.bs3d-section .bs3d-caption { left: var(--bs3d-pad); right: var(--bs3d-pad); width: auto; bottom: clamp(20px, 5vh, 44px); padding-right: 30px; }
	.bs3d-section .bs3d-progress { right: 2px; }
	.bs3d-section .bs3d-dot { width: 11px; height: 11px; }
	.bs3d-section .bs3d-sound { bottom: clamp(20px, 5vh, 44px); }
	/* phones: the sound toggle becomes an icon-only button with a full-size tap target */
	.bs3d-section .bs3d-sound { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.bs3d-section .bs3d-sound-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.bs3d-section .bs3d-sound-icon { height: 16px; gap: 3px; }
	.bs3d-section .bs3d-sound-icon i { height: 16px; }
	.bs3d-section .bs3d-final { width: calc(100% - 32px); margin-left: calc((100% - 32px) / -2); }
	.bs3d-section .bs3d-fb-hero { grid-template-columns: 1fr; }
	.bs3d-section .bs3d-fb-screen { transform: rotateY(-9deg) rotateX(6deg); }
	.bs3d-section .bs3d-fb-features { grid-template-columns: 1fr; }
}
/* small phones */
@media (max-width: 400px) {
	.bs3d-section .bs3d-caption-title { font-size: 1.55rem; }
	.bs3d-section .bs3d-caption-text { font-size: 0.875rem; }
	.bs3d-section .bs3d-final-title { font-size: 1.8rem; }
	.bs3d-section .bs3d-final-text { font-size: 0.875rem; }
}
/* phones held sideways: very little height, so keep the type compact and out of the picture's way */
@media (max-height: 520px) and (orientation: landscape) {
	.bs3d-section .bs3d-caption { bottom: 14px; width: min(19rem, 42%); padding-right: 0; right: auto; }
	.bs3d-section .bs3d-caption-title { font-size: 1.3rem; margin-bottom: 0.3em; }
	.bs3d-section .bs3d-caption-text { font-size: 0.8125rem; line-height: 1.4; }
	.bs3d-section .bs3d-final-title { font-size: 1.6rem; }
	.bs3d-section .bs3d-final-title { font-size: 1.4rem; margin-bottom: 0; }
	.bs3d-section .bs3d-final-text { display: none; }
	.bs3d-section .bs3d-wordmark { font-size: 2.6rem; }
	.bs3d-section .bs3d-hint { bottom: 8px; }
	.bs3d-section .bs3d-hint::after { height: 22px; }
	.bs3d-section .bs3d-sound { bottom: 14px; height: 32px; }
	.bs3d-section .bs3d-dot { width: 8px; height: 8px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
	.bs3d-section .bs3d-fb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.bs3d-section .bs3d-intro > *,
	.bs3d-section .bs3d-sound,
	.bs3d-section .bs3d-sound-icon i,
	.bs3d-section .bs3d-hint::after { animation: none !important; }
	.bs3d-section .bs3d-fb-screen { transform: none; }
	.bs3d-section .bs3d-fb-cta,
	.bs3d-section .bs3d-canvas { transition: none; }
}