/* ===========================================================================
   Bublr — "The Bubble" (Section 2 · pinned two-screen scroll reveal)
   The section pins; scrolling cross-fades phone + copy from screen 1
   ("Introducing Bublr") to screen 2 ("Bublr AI"). Driven by the-bubble.js
   (CSS-sticky + native scroll progress — no scroll library).
   =========================================================================== */

.bublr-bubble {
	position: relative;
	z-index: 2;
	height: calc(var(--steps, 2) * 100vh);   /* pin track: ~1 viewport per screen */
	/* Stacking-card reveal: this cream section slides up over the dark video with a
	   rounded top, so the white "cuts in" as you scroll (the reference's signature). */
	margin-top: -42px;
	border-radius: 42px 42px 0 0;
	box-shadow: 0 -40px 80px -44px rgba(8, 24, 17, 0.55);
	background:
		radial-gradient(120% 50% at 50% 0%, rgba(127, 229, 168, 0.26), transparent 56%),
		var(--cream, #F5F2EB);
}

.bublr-bubble__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.bublr-bubble__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
	width: 100%;
}

/* ---------- LEFT · copy steps (stacked, cross-fade) ---------- */
.bublr-bubble__copywrap { display: grid; }
.bublr-bubble__copy {
	grid-area: 1 / 1;
	opacity: 0;
	will-change: opacity, transform;   /* driven frame-by-frame by the-bubble.js */
}
.bublr-bubble__copy.is-active { opacity: 1; transform: none; } /* no-JS fallback */

.bublr-bubble__eyebrow {
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.26em;
	color: var(--mint-deep, #1B9E66);
	margin: 0 0 20px;
}
.bublr-bubble__title {
	font-family: var(--font-head, "Poppins", sans-serif);
	font-weight: 600;
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--black, #0A0A0A);
	margin: 0 0 22px;
	max-width: 13ch;
}
.bublr-bubble__lead {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: var(--grey-4, #667085);
	max-width: 46ch;
	margin: 0 0 30px;
}
.bublr-bubble__cta .btn-mint { padding: 15px 28px; font-size: 15px; }

.bublr-bubble__dots { display: flex; gap: 8px; margin-top: 30px; }
.bublr-bubble__dots i {
	width: 22px; height: 5px; border-radius: 999px;
	background: rgba(10, 10, 10, 0.14);
	transition: background 0.3s ease, width 0.3s ease;
}
.bublr-bubble__dots i.on { width: 30px; background: var(--mint, #2BC47E); }

/* ---------- RIGHT · device ---------- */
.bublr-bubble__device { position: relative; display: flex; justify-content: center; }
.bublr-bubble__halo {
	position: absolute;
	width: 116%;
	aspect-ratio: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(127, 229, 168, 0.5), transparent 62%);
	filter: blur(48px);
	z-index: 0;
}

.bublr-phone {
	position: relative;
	z-index: 1;
	width: min(384px, 84vw);   /* larger — feature the product */
	background: #0A0A0A;
	border-radius: 46px;
	padding: 11px;
	box-shadow:
		0 44px 96px -32px rgba(8, 24, 17, 0.5),
		0 6px 18px rgba(8, 24, 17, 0.16),
		inset 0 0 0 1.5px rgba(255, 255, 255, 0.10);
}
.bublr-phone__island {
	position: absolute;
	top: 22px; left: 50%; transform: translateX(-50%);
	width: 92px; height: 26px;
	background: #000; border-radius: 999px; z-index: 5;
}
.bublr-phone__screen {
	position: relative;
	display: grid;                 /* stack the two screens in one cell */
	aspect-ratio: 440 / 956;       /* exact Figma frame ratio */
	border-radius: 36px;
	overflow: hidden;
	container-type: inline-size;   /* lets the screen scale by cqw, Figma-accurate */
}

/* ---------- Screens — absolute layout matched 1:1 to the Figma frames
   (440 × 956). All elements positioned by their exact Figma %; text + radii
   sized in cqw so the whole screen scales with the phone. ---------- */
.scr {
	grid-area: 1 / 1;
	position: relative;
	color: #fff;
	opacity: 0;
	transition: opacity 0.12s linear;
	will-change: opacity, transform;
	overflow: hidden;
	background: linear-gradient(148deg, #07302A 0%, #1FB07E 58%, #6FE0A6 100%); /* on-brand AI gradient */
}
.scr.is-active { opacity: 1; } /* no-JS fallback */
/* Figma top/bottom overlay rects — a touch more depth at the edges. */
.scr::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(1, 50, 60, 0.45), transparent 15%),
		linear-gradient(0deg, rgba(8, 40, 28, 0.34), transparent 16%);
}
.scr > * { position: absolute; z-index: 1; }      /* every element placed by Figma coords */
.scr__shot { inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.scr.has-shot::after { display: none; }

/* Status bar */
.scr__status {
	top: 2.1%; left: 7%; right: 7%;
	display: flex; align-items: center; justify-content: space-between;
	font-size: 3.6cqw; font-weight: 600;
}
.scr__sys { position: static; display: inline-flex; align-items: center; gap: 1.4cqw; }
.scr__sys svg { height: 2.7cqw; width: auto; fill: #fff; }

/* Glassy bubble orb */
.scr__orb {
	left: 50%; transform: translateX(-50%);
	width: 73%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.09));
	border: 0.4cqw solid rgba(255, 255, 255, 0.45);
	box-shadow: inset 0 0 7cqw rgba(255, 255, 255, 0.14), 0 4cqw 9cqw rgba(18, 8, 30, 0.3);
	overflow: hidden;
}
.scr__orb::before {
	content: ""; position: absolute; left: -12%; right: -12%; top: 45%; height: 22%;
	background: linear-gradient(90deg, transparent, rgba(127, 229, 168, 0.6) 35%, rgba(182, 233, 74, 0.45) 65%, transparent);
	filter: blur(3cqw);
}
.scr__orb::after {
	content: ""; position: absolute; top: 13%; left: 21%; width: 40%; height: 23%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 72%);
}

/* ---------- Screen 1 · Intro (Figma: wordmark 17.3%, orb 33.2%, tagline 71.5%, button 90.6%) ---------- */
.scr--intro .scr__orb { top: 33.2%; }
.scr__logo {
	top: 17.3%; left: 50%; transform: translateX(-50%);
	width: 42%; height: auto;
	filter: drop-shadow(0 0.5cqw 2.5cqw rgba(0, 0, 0, 0.18));
}
.scr__tagline {
	top: 71.3%; left: 5.5%; right: 5.5%;
	text-align: center;
	font-family: var(--font-head, "Poppins", sans-serif);
	font-weight: 600; font-size: 7cqw; line-height: 1.16;
}
.scr__getstarted {
	top: 90.6%; left: 5.5%; right: 5.5%; height: 5.9%;
	border-radius: 3.4cqw; background: #0E3438;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 5.2cqw;
}

/* ---------- Screen 2 · AI (Figma: progress 6.5%, back 10.3%, orb 20%, heading 55.9%, rows 65/73/80%, dots 88%) ---------- */
.scr--ai .scr__orb { top: 20%; }
.scr__progress {
	top: 6.5%; left: 5.5%; right: 5.5%; height: 0.62%;
	border-radius: 999px; background: rgba(255, 255, 255, 0.3); overflow: hidden;
}
.scr__progress span { position: static; display: block; width: 51%; height: 100%; border-radius: 999px; background: #7FE5A8; }
.scr__back {
	top: 10.3%; left: 5.5%; width: 11.4%; aspect-ratio: 1;
	border-radius: 50%; background: #0E3438;
	display: flex; align-items: center; justify-content: center;
}
.scr__back svg { position: static; width: 46%; height: 46%; }
.scr__heading {
	top: 55.9%; left: 5.5%; right: 5.5%;
	text-align: center;
	font-family: var(--font-head, "Poppins", sans-serif);
	font-weight: 600; font-size: 6.4cqw;
}
.scr__feats { top: 65.3%; left: 5.7%; right: 5.7%; display: grid; gap: 3.7cqw; }
.scr__feats li { position: static; display: flex; align-items: center; gap: 3.2cqw; }
.scr__ficon {
	position: static; flex-shrink: 0;
	width: 10.5%; aspect-ratio: 1; border-radius: 3cqw;
	display: flex; align-items: center; justify-content: center; color: #0E3438;
}
.scr__ficon svg { position: static; width: 54%; height: 54%; }
.scr__ficon--green { background: #B7F0C8; }
.scr__ficon--pink  { background: #E4F6BC; }
.scr__ficon--blue  { background: #BFE3F3; }
.scr__ftext { position: static; display: flex; flex-direction: column; min-width: 0; }
.scr__ftext b { font-weight: 600; font-size: 3.9cqw; }
.scr__ftext span { font-size: 3cqw; line-height: 1.3; color: rgba(255, 255, 255, 0.82); }
.scr__pagedots { top: 88.2%; left: 0; right: 0; display: flex; justify-content: center; gap: 1.6cqw; }
.scr__pagedots i { position: static; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.scr__pagedots i.on { width: 5cqw; border-radius: 999px; background: #0E3438; }

/* ---------- Screen 3 · Bubble Manager (light app feed) ---------- */
.scr--manager { background: #E7ECEA; color: #0E1116; }
.scr--manager::after { display: none; }
.scr--manager .scr__status { color: #0A0A0A; }
.scr--manager .scr__sys svg { fill: #0A0A0A; }

.mgr { top: 6.4%; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }

.mgr__top { display: flex; align-items: center; justify-content: space-between; padding: 2.5cqw 5.5% 2.5cqw; }
.mgr__profile { position: static; display: inline-flex; align-items: center; gap: 1.2cqw; background: #fff; border-radius: 999px; padding: 1cqw 2.4cqw 1cqw 1cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,0.08); }
.mgr__profile img { width: 8.5cqw; height: 8.5cqw; border-radius: 50%; object-fit: cover; }
.mgr__profile svg { width: 3.4cqw; height: 3.4cqw; }
.mgr__brand { position: static; display: inline-flex; align-items: center; gap: 1.6cqw; font-family: var(--font-round, "Fredoka", sans-serif); font-weight: 600; font-size: 6cqw; }
.mgr__brand img { width: 7cqw; height: 7cqw; }
.mgr__actions { position: static; display: inline-flex; gap: 2cqw; }
.mgr__btn { width: 10.5cqw; height: 10.5cqw; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1cqw 3cqw rgba(0,0,0,0.08); }
.mgr__btn svg { width: 4.6cqw; height: 4.6cqw; }

.mgr__sheet { flex: 1; background: #FAFAF8; border-radius: 7cqw 7cqw 0 0; margin-top: 2cqw; padding: 0 5.5% 5.5%; overflow: hidden; box-shadow: 0 -1.5cqw 8cqw rgba(0,0,0,0.05); }
.mgr__handle { width: 13cqw; height: 1.2cqw; border-radius: 999px; background: #D6D9D4; margin: 3cqw auto 0; }
.mgr__title { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: 8.2cqw; letter-spacing: -0.03em; margin-top: 3cqw; }
.mgr__tabs { display: flex; gap: 4.5cqw; margin-top: 4cqw; font-size: 3.4cqw; color: #8A8F8C; border-bottom: 1px solid #ECECE8; padding-bottom: 2.8cqw; white-space: nowrap; }
.mgr__tabs b { color: #0E1116; font-weight: 600; position: relative; }
.mgr__tabs b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2.9cqw; height: 2px; background: #0E1116; }
.mgr__search { display: flex; align-items: center; gap: 2cqw; margin-top: 4cqw; background: #fff; border: 1px solid #E7E7E2; border-radius: 3.4cqw; padding: 3cqw 3.4cqw; color: #9A9F9C; font-size: 3.3cqw; }
.mgr__search svg { width: 4.2cqw; height: 4.2cqw; flex-shrink: 0; }
.mgr__sec { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: 5cqw; margin-top: 5cqw; }
.mgr__row { display: flex; gap: 3.4cqw; margin-top: 3cqw; }
.mgr__card { flex: 0 0 47%; }
.mgr__cover { aspect-ratio: 1.25; border-radius: 3.4cqw; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c, #7FE5A8) 40%, #fff), color-mix(in srgb, var(--c, #7FE5A8) 20%, #fff)); }
.mgr__cover img { width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 1.6cqw 1.6cqw rgba(0,0,0,0.2)); }
.mgr__name { font-weight: 600; font-size: 4cqw; margin-top: 2.6cqw; }
.mgr__stats { display: flex; gap: 1.6cqw; margin-top: 1.8cqw; }
.mgr__stats span { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 2.7cqw; color: #6B706D; background: #F0F0EC; border-radius: 999px; padding: 0.9cqw 1.8cqw; }
.mgr__stats svg { width: 3cqw; height: 3cqw; }
.mgr__desc { font-size: 2.8cqw; line-height: 1.32; color: #92968F; margin-top: 2cqw; }
.mgr__joinrow { display: flex; align-items: center; gap: 2cqw; margin-top: 2.6cqw; }
.mgr__join { flex: 1; text-align: center; border: 1.5px solid #14324A; border-radius: 999px; padding: 2.2cqw; font-size: 3.2cqw; font-weight: 600; color: #14324A; }
.mgr__go { width: 9cqw; height: 9cqw; border-radius: 50%; background: #0E1116; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mgr__go svg { width: 4cqw; height: 4cqw; }

.mgr__nav { left: 4.5%; right: 4.5%; bottom: 1.1%; top: auto; height: 6.8%; background: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 1.4cqw 6cqw rgba(0,0,0,0.14); }
.mgr__nav span { position: static; color: #3A3F3C; display: inline-flex; }
.mgr__nav svg { width: 5.4cqw; height: 5.4cqw; }
.mgr__cam { width: 12.5cqw; height: 12.5cqw; border-radius: 50%; background: var(--mint, #2BC47E); color: #fff; align-items: center; justify-content: center; box-shadow: 0 2cqw 7cqw rgba(43,196,126,0.5); margin-top: -3.4cqw; }
.mgr__cam svg { width: 6cqw; height: 6cqw; }

/* ---------- Screen 4 · Inside a bubble (detail) ---------- */
.scr--detail { background: #FAFAF8; color: #0E1116; }
.scr--detail::after { display: none; }

.det__hero { top: 0; left: 0; right: 0; height: 33%; overflow: hidden; background: linear-gradient(158deg, #1FB07E, #7FE5A8 58%, #BFE6EE); }
.det__hero .scr__status { position: absolute; top: 6%; left: 7%; right: 7%; display: flex; align-items: center; justify-content: space-between; font-size: 3.6cqw; font-weight: 600; color: #fff; z-index: 2; }
.det__hero .scr__sys { position: static; display: inline-flex; align-items: center; gap: 1.4cqw; }
.det__hero .scr__sys svg { height: 2.7cqw; width: auto; fill: #fff; }
.det__top { position: absolute; top: 24%; left: 4.5%; right: 4.5%; display: flex; align-items: center; justify-content: space-between; }
.det__top .mgr__profile { background: rgba(255, 255, 255, 0.92); }
.det__top .mgr__brand { color: #fff; }
.det__top .mgr__brand img { filter: brightness(0) invert(1); }
.det__top .mgr__btn { background: rgba(255, 255, 255, 0.92); }
.det__heroitem { position: absolute; bottom: -7%; left: 50%; transform: translateX(-50%) rotate(-7deg); width: 38%; filter: drop-shadow(0 4cqw 5cqw rgba(0, 0, 0, 0.35)); }

.det__sheet { top: 29%; left: 0; right: 0; bottom: 0; background: #FAFAF8; border-radius: 7cqw 7cqw 0 0; padding: 5cqw 5.5% 0; overflow: hidden; }
.det__title { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: 8cqw; letter-spacing: -0.03em; }
.det__desc { font-size: 3.4cqw; line-height: 1.35; color: #4A4F4C; margin-top: 2cqw; }
.det__members { display: flex; align-items: center; gap: 3cqw; margin-top: 4cqw; padding-bottom: 4cqw; border-bottom: 1px solid #ECECE8; }
.det__avas { display: flex; }
.det__avas img, .det__ai { width: 9.5cqw; height: 9.5cqw; border-radius: 50%; margin-left: -2.4cqw; border: 2px solid #FAFAF8; box-sizing: border-box; }
.det__avas > :first-child { margin-left: 0; }
.det__ai { display: flex; align-items: center; justify-content: center; font-size: 3cqw; font-weight: 700; color: #fff; }
.det__ai--g { background: #2BC47E; } .det__ai--r { background: #FF6B7A; } .det__ai--d { background: #14324A; }
.det__shared { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.det__shared b { font-size: 3.4cqw; font-weight: 600; }
.det__shared em { font-style: normal; font-size: 2.9cqw; color: #1B9E66; display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 0.4cqw; }
.det__shared em::before { content: ""; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #1B9E66; }
.det__manage { background: #14324A; color: #fff; border-radius: 999px; padding: 2.2cqw 4.4cqw; font-size: 3.2cqw; font-weight: 600; white-space: nowrap; }
.det__sec { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: 5cqw; margin-top: 4.5cqw; }
.det__row { display: flex; gap: 3cqw; margin-top: 3cqw; }
.det__card { flex: 0 0 38%; }
.det__cover { aspect-ratio: 1; border-radius: 3.4cqw; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c, #7FE5A8) 40%, #fff), color-mix(in srgb, var(--c, #7FE5A8) 20%, #fff)); }
.det__cover img { width: 66%; height: 66%; object-fit: contain; filter: drop-shadow(0 1.6cqw 1.6cqw rgba(0, 0, 0, 0.2)); }
.det__cname { font-weight: 600; font-size: 3.4cqw; margin-top: 2cqw; }
.det__cdesc { font-size: 2.7cqw; color: #92968F; line-height: 1.3; margin-top: 1cqw; }
.det__topic { background: #fff; border: 1px solid #EDEDE8; border-radius: 4cqw; padding: 4cqw; margin-top: 3cqw; box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, 0.04); }
.det__topic b { font-size: 3.6cqw; font-weight: 600; line-height: 1.3; }
.det__tstats { display: flex; gap: 4cqw; margin-top: 3cqw; }
.det__tstats span { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3cqw; color: #6B706D; }
.det__tstats svg { width: 4cqw; height: 4cqw; }
.det__tstats span:first-child svg { color: #FF6B7A; }
.mgr__nav span.is-on { color: #1B9E66; }

/* ---------- Reduced motion ---------- */
.bublr-reduce-motion .bublr-bubble { height: auto; }
.bublr-reduce-motion .bublr-bubble__pin { position: static; height: auto; padding: 96px 0; }
.bublr-reduce-motion .bublr-bubble__copy,
.bublr-reduce-motion .scr { opacity: 1; }

/* ---------- Mobile: unpin, show the two steps stacked ---------- */
@media (max-width: 900px) {
	.bublr-bubble { height: auto; }
	.bublr-bubble__pin { position: static; height: auto; padding: 52px 0 70px; overflow: visible; }
	.bublr-bubble__grid { display: flex; flex-direction: column; gap: 26px; }

	/* Phone on top, showing the active screen (cross-fades as you swipe). */
	.bublr-bubble__device { order: -1; }
	.bublr-phone { width: min(286px, 76vw); margin: 0 auto; }
	.scr { transition: opacity 0.45s ease; }

	/* Copy becomes a horizontal swipe carousel that drives the phone screen. */
	.bublr-bubble__copywrap {
		display: flex;
		width: 100%;
		min-width: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.bublr-bubble__copywrap::-webkit-scrollbar { display: none; }
	.bublr-bubble__copy {
		flex: 0 0 100%;
		min-width: 0;
		box-sizing: border-box;
		scroll-snap-align: center;
		opacity: 1 !important;
		transform: none !important;
		text-align: center;
		padding: 0 16px;
	}
	.bublr-bubble__copy, .bublr-bubble__title, .bublr-bubble__lead { max-width: none; margin-left: auto; margin-right: auto; }
	.bublr-bubble__cta { display: flex; justify-content: center; }
	.bublr-bubble__dots { justify-content: center; margin-top: 22px; }
}