/* Modern layer: floating glass nav, intro, cursor, grain, bento, pinned reel, stacking cards, kinetic type. */

/* Grain */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Floating glass pill nav */
.site-header { background: transparent; border-bottom: 0; backdrop-filter: none; padding-top: 12px; pointer-events: none; }
.site-header.scrolled { box-shadow: none; }
.site-header .nav { pointer-events: auto; height: 64px; padding-inline: 14px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px -14px rgba(10, 30, 15, .25); max-width: calc(var(--max) - 40px); transition: max-width .4s cubic-bezier(.2,.8,.2,1), height .3s ease, box-shadow .3s ease; }
.site-header.scrolled .nav { height: 56px; max-width: 980px; box-shadow: 0 14px 40px -12px rgba(10, 30, 15, .35); }
.progress { left: 50%; width: min(calc(var(--max) - 80px), 90%); translate: -50% 0; bottom: -6px; border-radius: 2px; }
@media (max-width: 960px) {
  .site-header { padding-inline: 12px; }
  .site-header .nav { padding-inline: 12px 8px; }
  .nav-links { top: 74px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
}

/* Rolling nav text */
.roll { display: inline-grid; overflow: hidden; height: 1.35em; line-height: 1.35em; vertical-align: top; }
.roll > span { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.roll > span + span { color: var(--green); }
a:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-100%); }

/* Intro curtain (pure CSS; hides itself even without JS) */
.intro { position: fixed; inset: 0; z-index: 200; background: #0d1410; display: grid; place-items: center; animation: introOut .7s cubic-bezier(.7,0,.2,1) 1.25s forwards; pointer-events: none; }
.intro-in { display: grid; justify-items: center; gap: 18px; }
.intro img { width: 84px; animation: introLogo 1s cubic-bezier(.2,.8,.2,1) both; }
.intro-word { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; letter-spacing: .14em; color: #e9f0e4; overflow: hidden; }
.intro-word span { display: inline-block; animation: introWord .8s cubic-bezier(.2,.8,.2,1) .25s both; }
.intro-word .e { color: #ffa200; } .intro-word .t { color: #82e645; }
.intro-bar { width: 160px; height: 2px; background: #22302a; border-radius: 2px; overflow: hidden; }
.intro-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffa200, #82e645); animation: introBar 1.1s ease both; }
@keyframes introLogo { from { transform: rotate(-180deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes introWord { from { transform: translateY(110%); } to { transform: none; } }
@keyframes introBar { from { width: 0; } to { width: 100%; } }
@keyframes introOut { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
html.seen .intro { display: none; }
html.seen main { animation-delay: 0s; }
html:not(.seen) main { animation-delay: 1.3s; }

/* Cursor ring */
.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--green); pointer-events: none; z-index: 150; transition: width .25s ease, height .25s ease, margin .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease; opacity: 0; mix-blend-mode: normal; }
.cursor.on { opacity: .9; }
.cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--green-fill) 18%, transparent); border-color: transparent; }
.cursor-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--amber-fill); pointer-events: none; z-index: 151; opacity: 0; transition: opacity .2s ease; }
.cursor-dot.on { opacity: 1; }

/* Aurora on page heroes */
.page-hero { position: relative; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: -40px -10vw auto auto; width: 70vw; max-width: 760px; height: 420px; background: radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--green-fill) 28%, transparent), transparent), radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--amber-fill) 22%, transparent), transparent); filter: blur(40px); animation: drift 16s ease-in-out infinite alternate; pointer-events: none; }
.page-hero h1 { background: linear-gradient(100deg, var(--ink) 40%, var(--green) 70%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 10s linear infinite; }

/* Scroll cue */
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.scroll-cue i { width: 22px; height: 34px; border: 1.5px solid var(--muted); border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--green); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }

/* Manifesto: scroll-lit words */
.manifesto { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 3.8vw, 3.1rem); line-height: 1.18; letter-spacing: -.02em; max-width: 24ch; text-wrap: pretty; }
.manifesto .mw { opacity: var(--o, 1); transition: opacity .2s linear, color .3s ease; }
.manifesto .mw.hot { color: var(--green); }
.manifesto .mw.hot2 { color: var(--amber); }
.manifesto-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.manifesto-wrap > * { min-width: 0; }
@media (max-width: 800px) { .manifesto-wrap { grid-template-columns: 1fr; gap: 16px; } }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.bento > * { min-width: 0; }
.tile { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.tile h3 { font-size: 1.25rem; }
.tile p { color: var(--muted); font-size: .95rem; max-width: 40ch; }
.tile .k { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.t-a { grid-column: span 2; grid-row: span 2; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--green-fill) 16%, var(--surface)), var(--surface)); }
.t-b, .t-e, .t-f { grid-column: span 2; }
.t-dark { background: #0f1813; border-color: #22302a; color: #e9f0e4; }
.t-dark p { color: #9fb3a5; }
.t-dark .k { color: #ffa200; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .t-a { grid-column: span 2; grid-row: auto; min-height: 420px; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .t-a, .t-b, .t-e, .t-f { grid-column: auto; } }

/* Orbit */
.orbit { position: relative; flex: 1; min-height: 260px; display: grid; place-items: center; }
.orbit .core { width: 76px; height: 76px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: 0 0 0 10px color-mix(in srgb, var(--green-fill) 10%, transparent), 0 0 60px color-mix(in srgb, var(--green-fill) 35%, transparent); z-index: 2; }
.orbit .core img { width: 46px; }
.ring { position: absolute; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); animation: spin linear infinite; }
.ring.r1 { width: 170px; height: 170px; animation-duration: 18s; }
.ring.r2 { width: 260px; height: 260px; animation-duration: 28s; animation-direction: reverse; }
.ring.r3 { width: 350px; height: 350px; animation-duration: 40s; }
.ring .sat { position: absolute; top: -14px; left: 50%; translate: -50% 0; white-space: nowrap; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); animation: spin linear infinite reverse; animation-duration: inherit; }
.ring.r2 .sat { animation-direction: normal; }
.ring .sat.b { top: auto; bottom: -14px; }
.sat.g { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.sat.a { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 420px) { .ring.r3 { width: 290px; height: 290px; } .ring.r2 { width: 220px; height: 220px; } .ring.r1 { width: 150px; height: 150px; } }

/* Eval chart */
.evalchart { width: 100%; height: auto; overflow: visible; }
.evalchart .grid line { stroke: var(--line); stroke-width: 1; }
.evalchart .area { fill: url(#evalg); opacity: .9; }
.evalchart .ln { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 0; }
.evalchart.draw .ln { animation: drawln 2.2s cubic-bezier(.6,.1,.2,1) both; }
.evalchart .end { fill: var(--green-fill); stroke: var(--surface); stroke-width: 3; }
.evalchart .end-pulse { fill: var(--green-fill); opacity: .35; transform-box: fill-box; transform-origin: center; animation: ping 1.8s ease-out infinite; }
.evalchart text { font-family: var(--f-mono); font-size: 10px; fill: var(--muted); }
@keyframes drawln { from { stroke-dashoffset: 600; } }
@keyframes ping { to { transform: scale(3); opacity: 0; } }
.f1 { font-family: var(--f-display); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }

/* Week dots */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week span { aspect-ratio: 1; max-width: 100%; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--f-mono); font-size: .62rem; color: var(--muted); }
.week span.demo-day { background: var(--green-fill); color: var(--on-fill); border-color: transparent; animation: dayPulse 2s ease-in-out infinite; }
@keyframes dayPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green-fill) 25%, transparent); } }

/* Lock */
.lock { width: 64px; height: 64px; }
.lock path, .lock rect { fill: none; stroke: var(--amber-fill); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lock .shackle { animation: shackle 3.2s ease-in-out infinite; transform-origin: 44px 28px; }
@keyframes shackle { 0%, 55%, 100% { transform: none; } 70%, 85% { transform: translateY(-6px) rotate(18deg); } }

/* Waveform */
.wave { display: flex; align-items: center; gap: 4px; height: 70px; }
.wave i { flex: 1; min-width: 3px; max-width: 8px; border-radius: 4px; background: linear-gradient(#82e645, #ffa200); height: 20%; animation: wv 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -70ms); }
@keyframes wv { 50% { height: var(--h, 90%); } }
.urdu { font-size: 2.2rem; font-weight: 700; color: #82e645; line-height: 1; }

/* Gauge ring */
.gring { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gring svg { width: 110px; height: 110px; rotate: -90deg; flex: none; }
.gring circle { fill: none; stroke-width: 10; }
.gring .bg { stroke: var(--surface-2); }
.gring .fg { stroke: url(#gg); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 72; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }
.gring .val { font-family: var(--f-display); font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* Pinned horizontal reel */
.hreel { position: relative; }
.hreel-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 28px; }
.hreel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.hreel-count { font-family: var(--f-mono); font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hreel-count b { color: var(--ink); font-size: 1.4rem; }
.hreel-track { display: flex; gap: 20px; will-change: transform; padding-inline: max(20px, calc((100vw - var(--max)) / 2 + 20px)); }
.panel { flex: none; width: min(460px, 80vw); min-height: 400px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); padding: 30px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; text-decoration: none; transition: border-color .25s ease; }
.panel:hover { border-color: var(--green); }
.panel .pn { font-family: var(--f-mono); font-size: .8rem; color: var(--amber); }
.panel h3 { font-size: 1.75rem; }
.panel p { color: var(--muted); }
.panel .glyph { position: absolute; right: -10px; bottom: -30px; font-family: var(--f-mono); font-weight: 700; font-size: 9rem; line-height: 1; color: var(--green-fill); opacity: .12; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease; pointer-events: none; }
.panel:hover .glyph { transform: translate(-16px, -12px) rotate(-8deg); opacity: .22; }
.panel .chips { margin-top: auto; position: relative; }
.panel.last { background: var(--ink); color: var(--bg); justify-content: center; }
.panel.last h3 { color: var(--bg); font-size: 2.2rem; }
.panel.last p { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
.hreel-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hreel-progress i { display: block; height: 100%; width: calc(var(--hp, 0) * 100%); background: linear-gradient(90deg, var(--amber-fill), var(--green-fill)); }
.hreel.static .hreel-sticky { position: static; height: auto; padding-block: clamp(56px, 8vw, 104px); }
.hreel.static .hreel-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; transform: none !important; }
.hreel.static .panel { scroll-snap-align: start; }
.hreel.static .hreel-progress { display: none; }

/* Kinetic outlined marquee */
.kinetic { overflow: hidden; padding-block: clamp(24px, 4vw, 48px); border-block: 1px solid var(--line); }
.kinetic-row { display: flex; gap: 40px; width: max-content; white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -.03em; will-change: transform; }
.kinetic-row span { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 55%, transparent); }
.kinetic-row span.fill { -webkit-text-stroke: 0; background: linear-gradient(90deg, var(--amber-fill), var(--green-fill)); -webkit-background-clip: text; background-clip: text; }
.kinetic-row + .kinetic-row { margin-top: 10px; }
.kinetic-row em { font-style: normal; color: var(--green); -webkit-text-stroke: 0; font-family: var(--f-mono); font-size: .5em; align-self: center; }

/* Stacking case cards */
.stack { display: grid; gap: 28px; }
.stack-item { position: sticky; top: calc(96px + var(--si, 0) * 22px); transform-origin: 50% 0; transition: transform .1s linear, filter .1s linear; }
.stack-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 -10px 40px -20px rgba(0,0,0,.25); min-height: 380px; }
.stack-card > * { min-width: 0; }
.stack-body { padding: clamp(24px, 3.5vw, 40px); display: grid; gap: 16px; align-content: start; }
.stack-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.stack-body p { color: var(--muted); }
.stack-vis { position: relative; background: #0f1813; color: #dfe9d9; padding: clamp(24px, 3vw, 36px); display: grid; align-content: space-between; gap: 18px; font-family: var(--f-mono); overflow: hidden; }
.stack-vis::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(130,230,69,.22), transparent 70%), radial-gradient(50% 50% at 10% 90%, rgba(255,162,0,.18), transparent 70%); }
.stack-vis > * { position: relative; }
.stack-vis .big { font-family: var(--f-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700; line-height: .9; color: #82e645; letter-spacing: -.03em; }
.stack-vis .cap { color: #9fb3a5; font-size: .85rem; }
.stack-vis .row { display: flex; gap: 22px; flex-wrap: wrap; }
.stack-vis .row b { display: block; color: #fff; font-family: var(--f-display); font-size: 1.4rem; }
.stack-vis .row span { color: #9fb3a5; font-size: .75rem; }
.stack-vis .sv-ind { border: 0; background: rgba(255,255,255,.08); color: #ffa200; padding: 6px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; justify-self: start; }
@media (max-width: 820px) { .stack-card { grid-template-columns: 1fr; } .stack-item { top: calc(84px + var(--si, 0) * 14px); } .stack-vis { order: -1; } }

/* Giant footer wordmark */
.wordmark { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.4rem, 15vw, 13rem); line-height: .82; letter-spacing: -.045em; margin-top: 48px; display: flex; flex-wrap: wrap; gap: 0 .2em; user-select: none; }
.wordmark .wl { display: inline-block; transition: transform .8s cubic-bezier(.2,.8,.2,1), color .3s ease; transition-delay: calc(var(--i) * 35ms); }
.wordmark .e .wl { color: var(--amber-fill); }
.wordmark .t .wl { color: var(--green-fill); }
.wordmark.pre .wl { transform: translateY(40%) rotate(4deg); }
.wordmark .wl:hover { transform: translateY(-12%) rotate(-4deg); transition-delay: 0s; }
.foot-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.foot-cta h2 { font-size: clamp(1.8rem, 4vw, 3rem); max-width: 16ch; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .ring, .ring .sat, .wave i, .week span.demo-day, .lock .shackle { animation: none; }
  .manifesto .mw { opacity: 1 !important; }
  .wordmark.pre .wl { transform: none; }
}
.sb-dl dl { margin: 0; display: grid; gap: 12px; }
.sb-dl dt { font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sb-dl dd { margin: 0; }
.site-header { padding-inline: 16px; }