/* ============================================================
   WalletLess — bespoke design system
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
	/* Brand — sampled from the app icon */
	--violet: #A45BD6;
	--violet-hi: #C084FC;
	--indigo: #4E5288;
	--teal: #4B93AE;
	--teal-hi: #6FC1D8;

	--brand-grad: linear-gradient(120deg, var(--violet-hi) 0%, var(--violet) 22%, var(--indigo) 58%, var(--teal) 100%);
	/* brighter variant — stays legible when used as text on near-black */
	--brand-grad-text: linear-gradient(100deg, #D8B4FE 0%, #B77BE4 28%, #8C93E0 62%, #7FD1E6 100%);

	/* Surfaces */
	--ink: #08080B;
	--ink-2: #0E0E14;
	--ink-3: #15151E;
	--paper: #F5F5F7;
	--paper-2: #FFFFFF;

	/* Text */
	--on-dark: #F5F5F7;
	--on-dark-dim: rgba(245, 245, 247, .62);
	--on-light: #111114;
	--on-light-dim: rgba(17, 17, 20, .58);

	--hair-dark: rgba(255, 255, 255, .10);
	--hair-light: rgba(0, 0, 0, .09);

	/* Rhythm */
	--shell: 1180px;
	--gut: clamp(20px, 5vw, 40px);
	--sec-y: clamp(88px, 12vw, 170px);
	--r-sm: 12px;
	--r-md: 20px;
	--r-lg: 28px;
	--r-xl: 40px;

	/* Motion */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-soft: cubic-bezier(.32, .72, 0, 1);
	--spring: cubic-bezier(.34, 1.56, .64, 1);

	--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--on-dark);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.55;
	letter-spacing: -0.011em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--violet); color: #fff; }

:focus-visible {
	outline: 2px solid var(--violet-hi);
	outline-offset: 3px;
	border-radius: 6px;
}

.skip-link {
	position: fixed; top: 10px; left: 10px; z-index: 200;
	padding: 10px 16px; border-radius: 999px;
	background: #fff; color: #000; font-weight: 600; font-size: 14px;
	transform: translateY(-200%);
	transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gut);
}

/* ---------- Texture + progress ---------- */
.grain {
	position: fixed; inset: 0; z-index: 90; pointer-events: none;
	opacity: .035; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
	pointer-events: none;
}
.progress__bar {
	display: block; height: 100%; width: 100%;
	transform: scaleX(0); transform-origin: 0 50%;
	background: var(--brand-grad);
	will-change: transform;
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 110;
	transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
	border-bottom: 1px solid transparent;
}
.nav.is-stuck {
	background: rgba(10, 10, 14, .62);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	border-bottom-color: var(--hair-dark);
}

.nav__inner {
	max-width: var(--shell);
	margin-inline: auto;
	padding: 14px var(--gut);
	display: flex; align-items: center; gap: 24px;
	transition: padding .5s var(--ease);
}
.nav.is-stuck .nav__inner { padding-block: 9px; }

.nav__brand {
	display: inline-flex; align-items: center; gap: 10px;
	font-weight: 600; font-size: 16.5px; letter-spacing: -0.02em;
	margin-right: auto;
}
.nav__brand img {
	width: 28px; height: 28px; border-radius: 8px;
	box-shadow: 0 2px 10px rgba(164, 91, 214, .35);
	transition: transform .5s var(--spring);
}
.nav__brand:hover img { transform: rotate(-6deg) scale(1.08); }

.nav__links { display: flex; gap: 4px; }
.nav__links a {
	position: relative;
	padding: 8px 14px; border-radius: 999px;
	font-size: 14.5px; font-weight: 500;
	color: var(--on-dark-dim);
	transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__links a:hover { color: var(--on-dark); background: rgba(255, 255, 255, .06); }
.nav__links a.is-active { color: var(--on-dark); }
.nav__links a.is-active::after {
	content: ""; position: absolute; left: 50%; bottom: 1px;
	width: 16px; height: 2px; border-radius: 2px;
	transform: translateX(-50%);
	background: var(--brand-grad);
	animation: navDot .45s var(--ease);
}
@keyframes navDot { from { width: 0; opacity: 0; } }

/* Language segmented control */
.langsw {
	position: relative;
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--hair-dark);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.langsw__thumb {
	position: absolute; top: 3px; left: 3px;
	width: calc((100% - 6px) / 3); height: calc(100% - 6px);
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 4px 12px -6px rgba(0, 0, 0, .9);
	transform: translateX(calc(var(--i, 0) * 100%));
	transition: transform .55s var(--spring);
}
.langsw button {
	position: relative; z-index: 1;
	appearance: none; border: 0; background: none;
	min-width: 40px; padding: 6px 4px;
	font: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: .03em;
	color: var(--on-dark-dim);
	cursor: pointer; border-radius: 999px;
	transition: color .35s var(--ease);
}
.langsw button:hover { color: var(--on-dark); }
.langsw button.is-on { color: #fff; }

.nav__burger {
	display: none;
	width: 40px; height: 40px; padding: 0;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--hair-dark);
	border-radius: 12px;
	cursor: pointer;
	position: relative;
}
.nav__burger span {
	position: absolute; left: 11px; width: 18px; height: 1.6px; border-radius: 2px;
	background: var(--on-dark);
	transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav__mobile {
	display: none;
	flex-direction: column;
	padding: 8px var(--gut) 22px;
	border-top: 1px solid var(--hair-dark);
	background: rgba(10, 10, 14, .82);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}
.nav__mobile a {
	padding: 14px 2px;
	font-size: 19px; font-weight: 500; letter-spacing: -0.02em;
	border-bottom: 1px solid var(--hair-dark);
	opacity: 0; transform: translateY(-8px);
	animation: menuIn .45s var(--ease) forwards;
}
.nav__mobile a:nth-child(1) { animation-delay: .04s; }
.nav__mobile a:nth-child(2) { animation-delay: .09s; }
.nav__mobile a:nth-child(3) { animation-delay: .14s; }
.nav__mobile a:nth-child(4) { animation-delay: .19s; }
@keyframes menuIn { to { opacity: 1; transform: none; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
	white-space: nowrap;
	position: relative; overflow: hidden;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease),
		background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
	will-change: transform;
}
.btn .ico { width: 17px; height: 17px; fill: currentColor; }

.btn--light {
	background: #fff; color: #000;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(255, 255, 255, .45);
}
.btn--light:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 42px -14px rgba(255,255,255,.6); }
.btn--light:active { transform: translateY(0) scale(.985); }

.btn--ghost {
	background: rgba(255, 255, 255, .06);
	color: var(--on-dark);
	border: 1px solid rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
	transform: translateY(-2px) scale(1.02);
}
.btn--ghost:active { transform: translateY(0) scale(.985); }

.btn--sm { padding: 9px 18px; font-size: 14px; }

/* sheen sweep */
.btn::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform .85s var(--ease);
}
.btn--light::after { background: linear-gradient(105deg, transparent 35%, rgba(0, 0, 0, .12) 50%, transparent 65%); }
.btn:hover::after { transform: translateX(120%); }

/* ============================================================
   Typography helpers
   ============================================================ */
.display {
	font-size: clamp(38px, 5.4vw, 68px);
	line-height: 1.04;
	letter-spacing: -0.038em;
	font-weight: 700;
	text-wrap: balance;
}
.title {
	font-size: clamp(30px, 3.9vw, 50px);
	line-height: 1.08;
	letter-spacing: -0.032em;
	font-weight: 700;
	text-wrap: balance;
}
.title--xl { font-size: clamp(34px, 4.8vw, 60px); }

.gradient-text {
	background: var(--brand-grad-text);
	background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	animation: shift 9s var(--ease-soft) infinite alternate;
}
@keyframes shift { to { background-position: 100% 0; } }

.muted { color: var(--on-light-dim); }

.lede {
	margin-top: 22px;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.55;
	color: var(--on-dark-dim);
	max-width: 30em;
}
.lede--center { margin-inline: auto; text-align: center; }

.body { margin-top: 18px; color: var(--on-dark-dim); font-size: 17.5px; line-height: 1.62; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--on-dark-dim);
	padding: 7px 14px 7px 12px;
	border: 1px solid var(--hair-dark);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
}
.eyebrow--dark {
	color: var(--on-light-dim);
	border-color: var(--hair-light);
	background: rgba(0, 0, 0, .03);
}
.eyebrow__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: #4ADE80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
	animation: ping 2.4s var(--ease-soft) infinite;
}
@keyframes ping {
	0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); }
	70%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity .9s var(--ease) var(--d, 0ms),
		transform .9s var(--ease) var(--d, 0ms),
		filter .9s var(--ease) var(--d, 0ms);
	filter: blur(6px);
	will-change: opacity, transform;
}
.reveal--scale { transform: translateY(34px) scale(.955); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
	padding: 140px 0 90px;
	overflow: hidden;
	isolation: isolate;
}
.hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
	background: linear-gradient(to bottom, transparent, var(--ink));
	pointer-events: none; z-index: -1;
}

.hero__aura { position: absolute; inset: -20% -10%; z-index: -2; filter: blur(90px); opacity: .55; }
.aura { position: absolute; border-radius: 50%; will-change: transform; }
.aura--violet {
	width: 46vw; height: 46vw; left: -6vw; top: 2vw;
	background: radial-gradient(circle, rgba(164, 91, 214, .85), transparent 65%);
	animation: drift1 22s var(--ease-soft) infinite alternate;
}
.aura--teal {
	width: 40vw; height: 40vw; right: -4vw; top: 18vw;
	background: radial-gradient(circle, rgba(75, 147, 174, .8), transparent 65%);
	animation: drift2 26s var(--ease-soft) infinite alternate;
}
.aura--indigo {
	width: 34vw; height: 34vw; left: 32vw; top: -8vw;
	background: radial-gradient(circle, rgba(78, 82, 136, .9), transparent 68%);
	animation: drift3 30s var(--ease-soft) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(9vw, 5vw, 0) scale(1.18); } }
@keyframes drift2 { to { transform: translate3d(-8vw, -6vw, 0) scale(1.12); } }
@keyframes drift3 { to { transform: translate3d(4vw, 9vw, 0) scale(.88); } }

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.hero__copy { max-width: 620px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__actions--center { justify-content: center; margin-top: 38px; }

.hero__meta {
	display: flex; flex-wrap: wrap; gap: 10px 22px;
	margin-top: 28px;
	font-size: 14px; color: var(--on-dark-dim);
}
.hero__meta li { display: flex; align-items: center; gap: 8px; }
.hero__meta li::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--teal-hi); opacity: .9;
}

.hero__scroll {
	position: absolute; left: 50%; bottom: 26px; translate: -50% 0;
	width: 24px; height: 38px; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 14px;
}
.hero__scroll span {
	position: absolute; left: 50%; top: 8px; translate: -50% 0;
	width: 3px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .6);
	animation: wheel 2.1s var(--ease-soft) infinite;
}
@keyframes wheel {
	0% { opacity: 0; transform: translateY(0); }
	25% { opacity: 1; }
	75% { opacity: 0; transform: translateY(13px); }
	100% { opacity: 0; }
}

/* ---------- Device mockup ---------- */
.hero__device { position: relative; display: flex; justify-content: center; }

.device { position: relative; width: min(300px, 78vw); }
.device__halo {
	position: absolute; inset: -14% -22%;
	background: radial-gradient(ellipse at 50% 45%, rgba(164, 91, 214, .45), transparent 62%);
	filter: blur(46px);
	animation: halo 7s var(--ease-soft) infinite alternate;
}
@keyframes halo { to { opacity: .55; transform: scale(1.08); } }

.device__frame {
	position: relative;
	aspect-ratio: 300 / 612;
	border-radius: 50px;
	padding: 11px;
	background: linear-gradient(150deg, #4a4a55, #17171d 32%, #0c0c11 62%, #3a3a44);
	box-shadow:
		0 2px 3px rgba(255, 255, 255, .16) inset,
		0 40px 90px -30px rgba(0, 0, 0, .95),
		0 0 0 1px rgba(255, 255, 255, .07);
	transform: perspective(1400px) rotateY(-11deg) rotateX(4deg) translateZ(0);
	transition: transform 1.1s var(--ease);
}
.hero__device:hover .device__frame { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); }

.device__screen {
	position: relative; height: 100%; border-radius: 40px; overflow: hidden;
	background:
		radial-gradient(120% 80% at 20% 0%, #2A2140 0%, transparent 55%),
		radial-gradient(110% 70% at 90% 100%, #17323C 0%, transparent 55%),
		#0B0B11;
}
.device__island {
	position: absolute; top: 22px; left: 50%; translate: -50% 0;
	width: 78px; height: 22px; border-radius: 999px; background: #05050a;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}

.ui { padding: 54px 16px 18px; height: 100%; display: flex; flex-direction: column; }
.ui__status {
	display: flex; justify-content: space-between; align-items: center;
	position: absolute; top: 26px; left: 22px; right: 22px;
	font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .85);
}
.ui__bars { display: flex; gap: 2px; align-items: flex-end; }
.ui__bars i { display: block; width: 3px; background: rgba(255, 255, 255, .7); border-radius: 1px; }
.ui__bars i:nth-child(1) { height: 5px; }
.ui__bars i:nth-child(2) { height: 8px; }
.ui__bars i:nth-child(3) { height: 11px; }

.ui__head { margin-bottom: 16px; }
.ui__head h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.ui__head p {
	display: flex; align-items: center; gap: 6px;
	margin-top: 4px; font-size: 11.5px; color: rgba(255, 255, 255, .5);
}
.pulse-dot {
	width: 6px; height: 6px; border-radius: 50%; background: var(--teal-hi);
	animation: ping2 2s var(--ease-soft) infinite;
}
@keyframes ping2 {
	0% { box-shadow: 0 0 0 0 rgba(111, 193, 216, .6); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(111, 193, 216, 0); }
}

.ui__cards { position: relative; display: flex; flex-direction: column; gap: 10px; }

.ucard {
	position: relative;
	height: 62px;
	border-radius: 14px;
	padding: 11px 13px;
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08) inset;
	will-change: transform;
	animation: sortCycle 9s var(--ease) infinite;
}
.ucard__name { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; color: #fff; padding-right: 76px; }
.ucard__code {
	height: 15px; border-radius: 3px;
	background: repeating-linear-gradient(90deg,
		rgba(255,255,255,.92) 0 2px, transparent 2px 4px,
		rgba(255,255,255,.92) 4px 5px, transparent 5px 8px,
		rgba(255,255,255,.92) 8px 11px, transparent 11px 13px);
	opacity: .85;
}
.ucard__badge {
	position: absolute; top: 10px; right: 11px;
	font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); color: #111;
	opacity: 0;
	animation: badgeIn 9s var(--ease) infinite;
}

.ucard--1 { background: linear-gradient(135deg, #B45BD6, #6D3FA8); }
.ucard--2 { background: linear-gradient(135deg, #4E6BC0, #33407A); }
.ucard--3 { background: linear-gradient(135deg, #4B93AE, #2A5C72); }
.ucard--4 { background: linear-gradient(135deg, #C0605B, #7A3536); }

/* the "sorted by location" shuffle: card 3 rises to the top */
.ucard--1 { animation-name: slotDown; }
.ucard--2 { animation-name: slotDown; }
.ucard--3 {
	animation-name: slotUp2;
	z-index: 3;
	box-shadow: 0 16px 34px -8px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .14) inset;
}
.ucard--4 { animation-name: slotHold; }
.ucard--1 .ucard__badge { animation-name: badgeOut; }
.ucard--3 .ucard__badge { animation-name: badgeIn; }

/* The two displaced cards dim and slide down a slot. */
@keyframes slotDown {
	0%, 30% { transform: translateY(0); filter: none; }
	38% { filter: brightness(.62); }
	42%, 82% { transform: translateY(72px); filter: brightness(.62); }
	90% { filter: none; }
	100% { transform: translateY(0); filter: none; }
}
/* The nearest card lifts clear of the stack, flies to slot 1, then settles. */
@keyframes slotUp2 {
	0%, 30% { transform: translateY(0) scale(1); }
	36% { transform: translateY(-10px) scale(1.07); }
	44%, 82% { transform: translateY(-144px) scale(1); }
	88% { transform: translateY(-152px) scale(1.04); }
	100% { transform: translateY(0) scale(1); }
}
@keyframes slotHold { 0%, 100% { transform: translateY(0); } }
@keyframes badgeIn {
	0%, 34% { opacity: 0; transform: scale(.8); }
	48%, 80% { opacity: 1; transform: scale(1); }
	88%, 100% { opacity: 0; transform: scale(.8); }
}
@keyframes badgeOut {
	0%, 26% { opacity: 1; }
	32%, 86% { opacity: 0; }
	100% { opacity: 1; }
}

/* ---------- Floating chips ---------- */
.float-chip {
	position: absolute;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 15px;
	border-radius: 999px;
	font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
	white-space: nowrap;
	will-change: transform;
}
.float-chip .ico { width: 15px; height: 15px; }
.float-chip--a { left: -6%; top: 24%; animation: bob 6s var(--ease-soft) infinite alternate; }
.float-chip--b { right: -4%; bottom: 20%; animation: bob 7.5s var(--ease-soft) .6s infinite alternate-reverse; }
@keyframes bob { to { transform: translateY(-13px); } }

/* ============================================================
   Stats strip
   ============================================================ */
.strip {
	border-block: 1px solid var(--hair-dark);
	background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
	padding-block: clamp(40px, 6vw, 66px);
}
.strip__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}
.stat b {
	display: block;
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 700; letter-spacing: -0.04em; line-height: 1;
	background: var(--brand-grad-text);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
}
.stat span {
	display: block; margin-top: 9px;
	font-size: 13.5px; color: var(--on-dark-dim); letter-spacing: -0.005em;
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: var(--sec-y); position: relative; }

.section--light {
	background: var(--paper);
	color: var(--on-light);
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	margin-top: -1px;
}
.section--light + .section--dark { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -40px; background: var(--ink); }

.section__head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head .title { margin-top: 20px; }

/* ---------- Bento grid ---------- */
.bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 20px);
}

.tile {
	position: relative;
	grid-column: span 2;
	min-height: 260px;
	padding: clamp(24px, 2.6vw, 34px);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	border: 1px solid var(--hair-light);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -34px rgba(0, 0, 0, .5);
	overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
	transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
	will-change: transform;
}
.tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 34px 60px -34px rgba(0, 0, 0, .38);
	border-color: rgba(0, 0, 0, .14);
}
/* cursor spotlight */
.tile::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(164, 91, 214, .10), transparent 62%);
	opacity: 0; transition: opacity .5s var(--ease);
}
.tile:hover::before { opacity: 1; }

.tile--wide { grid-column: span 4; min-height: 200px; flex-direction: row; align-items: center; gap: 32px; }
.tile--wide .tile__body { flex: 1 1 380px; }

.tile__body h3 {
	font-size: clamp(19px, 2vw, 25px);
	font-weight: 650; letter-spacing: -0.028em; line-height: 1.18;
}
.tile__body p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--on-light-dim); }

.tile__icon {
	width: 50px; height: 50px; border-radius: 15px;
	display: grid; place-items: center;
	margin-bottom: auto;
	color: #fff;
	background: var(--brand-grad);
	box-shadow: 0 10px 24px -12px rgba(120, 70, 190, .8);
	transition: transform .6s var(--spring);
}
.tile__icon .ico { width: 25px; height: 25px; }
.tile:hover .tile__icon { transform: translateY(-3px) rotate(-5deg) scale(1.06); }

/* radar visual */
.radar {
	position: relative;
	flex: 0 0 220px; width: 220px; height: 220px;
	display: grid; place-items: center;
}
.radar__ring {
	position: absolute; inset: 0; border-radius: 50%;
	border: 1px solid rgba(78, 82, 136, .35);
	animation: radar 3.6s var(--ease-soft) infinite;
}
.radar__ring:nth-child(2) { animation-delay: 1.2s; }
.radar__ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes radar {
	0% { transform: scale(.25); opacity: 0; }
	25% { opacity: .9; }
	100% { transform: scale(1); opacity: 0; }
}
.radar__me {
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--brand-grad);
	box-shadow: 0 0 0 5px rgba(164, 91, 214, .16);
	z-index: 1;
}
.radar__pin {
	position: absolute; width: 9px; height: 9px; border-radius: 50%;
	background: #fff; border: 2px solid var(--indigo);
	animation: pinBob 4s var(--ease-soft) infinite alternate;
}
.radar__pin--1 { top: 22%; left: 24%; }
.radar__pin--2 { top: 30%; right: 18%; animation-delay: .7s; border-color: var(--teal); }
.radar__pin--3 { bottom: 20%; left: 38%; animation-delay: 1.4s; border-color: var(--violet); }
@keyframes pinBob { to { transform: translateY(-6px); } }

/* language chips */
.tile--langs { align-items: center; }
.langs { display: flex; gap: 12px; }
.lang {
	display: grid; place-items: center;
	width: 62px; height: 62px; border-radius: 19px;
	font-size: 15px; font-weight: 700; letter-spacing: .02em;
	color: #fff;
	background: var(--brand-grad);
	background-size: 260% 100%;
	box-shadow: 0 12px 26px -14px rgba(90, 60, 160, .9);
	animation: langFloat 5s var(--ease-soft) infinite alternate;
}
.lang:nth-child(1) { background-position: 0 0; }
.lang:nth-child(2) { background-position: 50% 0; animation-delay: .35s; }
.lang:nth-child(3) { background-position: 100% 0; animation-delay: .7s; }
@keyframes langFloat { to { transform: translateY(-9px) rotate(-3deg); } }

/* ============================================================
   Story
   ============================================================ */
.section--dark { background: var(--ink); color: var(--on-dark); }
.story__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(36px, 6vw, 84px);
	align-items: center;
}
.story__copy .title { margin-top: 20px; }

.pile { position: relative; height: 400px; display: grid; place-items: center; }
.pile__card {
	position: absolute;
	width: 196px; height: 122px; border-radius: 14px;
	box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .09) inset;
	transition: transform 1.15s var(--ease) var(--pd, 0ms), box-shadow 1.15s var(--ease) var(--pd, 0ms);
	will-change: transform;
}
.pile__card::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 16px; height: 16px; border-radius: 3px;
	background: repeating-linear-gradient(90deg,
		rgba(255,255,255,.85) 0 2px, transparent 2px 4px,
		rgba(255,255,255,.85) 4px 5px, transparent 5px 9px);
	opacity: .7;
}
/* scattered — a wallet spilling open */
.pile__card--1 { background: linear-gradient(135deg, #B45BD6, #6D3FA8); --pd: 0ms;   transform: translate(-116px, -128px) rotate(-17deg); z-index: 5; }
.pile__card--2 { background: linear-gradient(135deg, #4E6BC0, #33407A); --pd: 70ms;  transform: translate(122px, -92px) rotate(14deg);  z-index: 4; }
.pile__card--3 { background: linear-gradient(135deg, #4B93AE, #2A5C72); --pd: 140ms; transform: translate(-142px, 34px) rotate(9deg);   z-index: 3; }
.pile__card--4 { background: linear-gradient(135deg, #C0605B, #7A3536); --pd: 210ms; transform: translate(126px, 78px) rotate(-12deg);  z-index: 2; }
.pile__card--5 { background: linear-gradient(135deg, #55B08A, #276D54); --pd: 280ms; transform: translate(-14px, 146px) rotate(5deg);   z-index: 1; }

/* collected — one tidy deck */
.pile.is-stacked .pile__card { box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1) inset; }
.pile.is-stacked .pile__card--1 { transform: translate(0, -68px) scale(.86) rotate(-4deg); z-index: 1; }
.pile.is-stacked .pile__card--2 { transform: translate(0, -34px) scale(.91) rotate(-2deg); z-index: 2; }
.pile.is-stacked .pile__card--3 { transform: translate(0, 0) scale(.96) rotate(0deg);      z-index: 3; }
.pile.is-stacked .pile__card--4 { transform: translate(0, 34px) scale(1) rotate(2deg);     z-index: 4; }
.pile.is-stacked .pile__card--5 { transform: translate(0, 68px) scale(1.04) rotate(4deg);  z-index: 5; }

.quote {
	margin-top: 34px;
	padding-left: 22px;
	border-left: 2px solid transparent;
	border-image: var(--brand-grad) 1;
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: 600; letter-spacing: -0.028em; line-height: 1.3;
	color: var(--on-dark);
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
	position: relative;
	padding-block: clamp(90px, 13vw, 170px);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--hair-dark);
}
.cta__aura {
	position: absolute; inset: -40% -10% auto; height: 130%; z-index: -1;
	background:
		radial-gradient(50% 50% at 30% 40%, rgba(164, 91, 214, .40), transparent 70%),
		radial-gradient(45% 45% at 72% 60%, rgba(75, 147, 174, .34), transparent 70%);
	filter: blur(70px);
	animation: drift1 24s var(--ease-soft) infinite alternate;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta__logo {
	width: 88px; height: 88px; border-radius: 24px; margin-bottom: 30px;
	box-shadow: 0 26px 55px -22px rgba(164, 91, 214, .85), 0 0 0 1px rgba(255, 255, 255, .1);
	animation: logoFloat 6s var(--ease-soft) infinite alternate;
}
@keyframes logoFloat { to { transform: translateY(-10px) rotate(3deg); } }

.cta .title { max-width: 16ch; }
.cta__mail { margin-top: 30px; font-size: 15px; color: var(--on-dark-dim); }
.cta__mail a {
	color: var(--on-dark); font-weight: 600;
	background-image: linear-gradient(var(--violet-hi), var(--violet-hi));
	background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size .4s var(--ease);
	padding-bottom: 2px;
}
.cta__mail a:hover { background-size: 100% 2px; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--hair-dark); padding-block: 34px; }
.footer__inner {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
	font-size: 13.5px; color: var(--on-dark-dim);
}
.footer__brand {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 600; color: var(--on-dark); letter-spacing: -0.02em;
}
.footer__brand img { width: 26px; height: 26px; border-radius: 8px; }
.footer__links { display: flex; gap: 22px; margin-inline: auto; }
.footer__links a { transition: color .3s var(--ease); }
.footer__links a:hover { color: var(--on-dark); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
	.hero { padding-top: 118px; }
	.hero__grid { grid-template-columns: 1fr; text-align: center; }
	/* max-width still applies in the 1-col layout — re-center the block itself */
	.hero__copy { display: flex; flex-direction: column; align-items: center; margin-inline: auto; }
	.lede { margin-inline: auto; }
	.hero__actions, .hero__meta { justify-content: center; }
	/* shrink-wrap the column so the floating chips anchor to the phone, not the viewport */
	.hero__device { display: block; width: max-content; margin: 28px auto 0; }
	.device { width: min(258px, 62vw); }
	.device__frame { transform: none; }
	.hero__device:hover .device__frame { transform: none; }
	/* park the chips fully outside the phone so they never cover the UI */
	.float-chip--a { left: auto; right: calc(100% + 14px); top: 30%; }
	.float-chip--b { right: auto; left: calc(100% + 14px); bottom: 24%; }
	.hero__scroll { display: none; }

	.strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }

	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile--wide { grid-column: span 2; flex-direction: column; align-items: flex-start; }
	.tile--wide .tile__body { flex: initial; }
	.radar { align-self: center; }

	.story__grid { grid-template-columns: 1fr; }
	.story__visual { order: -1; }
	.section__head { max-width: none; }
}

@media (max-width: 720px) {
	.nav__links { display: none; }
	.nav__burger { display: block; }
	.langsw button { min-width: 34px; font-size: 12px; }
	.nav.is-open { background: rgba(10, 10, 14, .9); }
	.nav.is-open .nav__mobile { display: flex; }

	.bento { grid-template-columns: 1fr; }
	.tile, .tile--wide { grid-column: span 1; min-height: 0; }
	.pile { height: 330px; transform: scale(.8); }
	/* not enough room beside a phone this size — the copy already says it */
	.float-chip { display: none; }
	.footer__inner { flex-direction: column; align-items: flex-start; }
	.footer__links { margin-inline: 0; flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.reveal { opacity: 1; transform: none; filter: none; }
	.progress { display: none; }
}