/* DH · reference reconstruction · styles
   Arabic-first RTL. Self-hosted IBM Plex Sans Arabic (SIL OFL 1.1), system stack as fallback. */

@font-face{font-family:"DH Plex";src:url(../assets/fonts/IBMPlexSansArabic-Light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"DH Plex";src:url(../assets/fonts/IBMPlexSansArabic-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DH Plex";src:url(../assets/fonts/IBMPlexSansArabic-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"DH Plex";src:url(../assets/fonts/IBMPlexSansArabic-SemiBold.woff) format("woff");font-weight:600;font-display:swap}

:root{
  --bg:#111214; --bg-deep:#070808; --panel:#17181a; --panel-2:#1c1e1f;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.24);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --ink:#f1f3f2; --mute:#a9afab; --dim:#7a817c;
  --g:#4ade6e; --g-2:#2fbf5f; --g-soft:#a9efbb; --mint:#cff7da; --em:#0b3a27; --lime:#c6e86f;
  --warm:rgba(120,118,60,.22);
  --font:"DH Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  --m:clamp(16px,4.4vw,64px); --wrap:1180px; --head:72px;
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 8px);background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
/* page-wide ambient light, fixed to the viewport: a low emerald pool below and a faint warm lift above.
   Because it travels with the reader, no section starts or ends its own lighting. */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:radial-gradient(90% 55% at 50% 112%,rgba(47,191,95,.055),transparent 72%),radial-gradient(70% 45% at 82% -12%,rgba(120,118,60,.05),transparent 70%)}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ul,ol{padding:0;list-style:none}
.dt{white-space:nowrap;unicode-bidi:isolate}
.nw{white-space:nowrap}
.n{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:tabular-nums}
[lang="en"]{unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:200;background:var(--ink);color:#000;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:6px}
svg use{pointer-events:none}
.g{color:var(--g-soft)}
.g2{color:#b7efc4}
.gy{background:linear-gradient(90deg,#e9f29a,#7ee39a);-webkit-background-clip:text;background-clip:text;color:transparent}
.soft{color:#c9d0cc}
.glow-h{text-shadow:0 0 18px rgba(255,255,255,.28),0 0 54px rgba(140,240,170,.16)}
.glow-h .g,.glow-h .g2{text-shadow:0 0 18px rgba(130,235,160,.45),0 0 60px rgba(74,222,110,.25)}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{--h:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:999px;font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;background:none;white-space:nowrap;transition:transform .5s var(--out),background-color .3s,border-color .3s,box-shadow .4s}
.btn.sm{--h:40px;font-size:13.5px;padding:0 18px}
.btn-main{background:#f1f4f2;color:#0c0e0d;padding-inline-end:6px;box-shadow:0 8px 30px -10px rgba(255,255,255,.35)}
.btn-main .chip{order:2;display:grid;place-items:center;width:calc(var(--h) - 12px);height:calc(var(--h) - 12px);border-radius:999px;background:var(--g);color:#06210f;transition:transform .5s var(--out)}
.btn-main .chip svg{width:15px;height:15px}
.btn-main:hover .chip{transform:translateX(-3px)}
.btn-line{border-color:rgba(255,255,255,.22);color:var(--ink);background:rgba(17,18,20,.35)}
.btn-line:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.btn .ic{width:16px;height:16px}
.btn:active{transform:scale(.98)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 7px 5px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:12.5px;color:var(--mute);line-height:1.4}
.tag .tg{padding:2px 9px;border-radius:999px;background:rgba(74,222,110,.12);color:var(--g-soft)}
.h-sec{font-size:clamp(2rem,4.1vw,3.65rem);font-weight:400;line-height:1.22;letter-spacing:0}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity 1s var(--out),transform 1.2s var(--out),filter 1s var(--out)}
.js .rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- header ---------- */
.site-header{position:fixed;inset-inline:0;top:0;z-index:60;transition:transform .6s var(--out),background-color .4s}
.site-header.hide{transform:translateY(-110%)}
.site-header.solid{background:rgba(13,14,15,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--line)}
.bar{height:var(--head);display:flex;align-items:center;gap:22px;padding-inline:var(--m);max-width:1520px;margin:auto}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none;--lh:17px}
.logo-mark{display:block;height:var(--lh);width:calc(var(--lh) * 1.815);flex:none;overflow:visible}
.logo-desc{font-size:10px;font-weight:500;letter-spacing:.22em;line-height:1;color:var(--mute);padding-inline-start:12px;border-inline-start:1px solid var(--line-2);direction:ltr;white-space:nowrap;padding-block:3px}
.logo--footer{--lh:15px;color:#cfd5d1}
.logo--footer .logo-desc{color:var(--dim)}
.nav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(20,21,23,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav a{padding:6px 13px;border-radius:999px;font-size:13.5px;color:var(--mute);text-decoration:none;transition:color .25s,background-color .25s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="true"]{color:var(--ink);background:rgba(74,222,110,.12)}
.nav a[aria-current="true"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--g);margin-inline-end:7px;vertical-align:1px}
.nav .nav-cta{display:none}
.head-actions{margin-inline-start:auto;display:flex;gap:8px}
.menu-btn{display:none;margin-inline-start:auto;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(20,21,23,.6);cursor:pointer;font-size:14px}
.menu-btn .lines{width:16px;height:10px;position:relative}
.menu-btn .lines::before,.menu-btn .lines::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:currentColor;transition:transform .35s var(--out)}
.menu-btn .lines::before{top:1px}.menu-btn .lines::after{bottom:1px}
.menu-btn[aria-expanded="true"] .lines::before{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .lines::after{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- 1 · hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow-x:clip;overflow-y:visible;padding:calc(var(--head) + 36px) var(--m) 130px;background:radial-gradient(70% 55% at 50% -8%,rgba(74,222,110,.13),transparent 62%)}
/* hero → numbers: one environment. The hero no longer paints an opaque base or a bottom glow that stops at its edge;
   its lower haze is a feathered ellipse straddling the boundary, drawn behind the numbers content. */
.hero-light{position:absolute;inset:0;pointer-events:none}
.hero-light i{position:absolute;display:block}
.hero-light .beam{left:50%;top:-8%;width:300px;height:78%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(150,240,160,.34),rgba(120,220,140,.12) 45%,transparent 80%);filter:blur(34px);border-radius:50%;opacity:0;animation:beamIn 1.6s .1s var(--out) forwards,beamBreath 9s 2s ease-in-out infinite}
.hero-light .b2{-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 92%);mask-image:linear-gradient(180deg,#000 35%,transparent 92%);left:50%;width:620px;height:95%;background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(110,220,140,.10) 172deg,rgba(150,240,170,.16) 180deg,rgba(110,220,140,.10) 188deg,transparent 200deg);filter:blur(22px);border-radius:0;animation-delay:.25s,2.6s}
.hero-light .haze{left:50%;bottom:-48%;width:min(1400px,110%);height:90%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(40,92,56,.30),rgba(30,70,44,.14) 55%,transparent);filter:blur(24px)}
.hero-light .lens{left:50%;top:50%;width:min(1150px,140vw);aspect-ratio:1;transform:translate(-50%,-46%);border-radius:50%;border:1px solid rgba(255,255,255,.035);box-shadow:inset 0 0 120px rgba(74,222,110,.03);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 74%);mask-image:linear-gradient(180deg,#000 30%,transparent 74%)}
@keyframes beamIn{to{opacity:1}}
@keyframes beamBreath{50%{opacity:.72}}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.marks{position:absolute;top:0;bottom:0;left:50%;width:min(100%,1680px);transform:translateX(-50%);pointer-events:none}
.marks span{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1));font-size:clamp(15px,1.75vw,27px);font-weight:300;color:rgba(230,236,232,.17);white-space:nowrap;line-height:1.2;direction:ltr;animation:mark 16s ease-in-out infinite;animation-delay:calc(var(--y) * -.2s)}
.marks span.rt{direction:rtl;font-size:clamp(13px,1.3vw,19px);text-align:center}
.marks .bx{border:1px solid rgba(230,236,232,.13);border-radius:4px;padding:2px 10px}
@keyframes mark{50%{translate:0 -12px}}
.hero-in{position:relative;z-index:2;max-width:980px;width:100%}
.hero-tag{opacity:0;animation:fadeUp 1s .55s var(--out) forwards}
.hero h1{font-size:clamp(2.7rem,6.6vw,6.25rem);font-weight:400;line-height:1.12;margin-top:20px}
.hero h1 .ln{display:block}
.hero h1 .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.25em);animation:wordIn 1.25s var(--out) forwards;animation-delay:calc(var(--i) * 120ms + 300ms)}
@keyframes wordIn{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .lead{max-width:36em;margin:22px auto 0;color:#c2c8c4;font-size:clamp(1rem,1.35vw,1.14rem);opacity:0;animation:fadeUp 1s .95s var(--out) forwards}
.hero .actions{justify-content:center;margin-top:26px;opacity:0;animation:fadeUp 1s 1.15s var(--out) forwards}
.hero-foot{position:absolute;inset-inline:max(var(--m),calc((100% - 1520px) / 2 + var(--m)));bottom:26px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mute);z-index:3}
.follow{display:flex;align-items:center;gap:8px}
.follow span{margin-inline-end:4px}
.follow a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);color:#0d0f0e;transition:transform .4s var(--out)}
.follow a:hover{transform:translateY(-2px)}
.follow svg{width:15px;height:15px}
.scroll-cue{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--mute)}
.scroll-cue b{color:var(--ink);font-weight:500}
.scroll-cue svg{width:14px;height:14px;color:var(--g);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(4px)}}

/* ---------- 2 · numbers ---------- */
.numbers{position:relative;z-index:1;padding:clamp(80px,11vw,140px) var(--m) clamp(70px,9vw,120px);overflow:hidden}
.num-head{text-align:center;max-width:760px;margin:auto}
.num-head h2{font-size:clamp(1.9rem,3.5vw,3rem)}
.num-head p{max-width:34em;margin:18px auto 0;font-size:14px;color:var(--mute)}
.num-field{position:relative;max-width:680px;height:600px;margin:56px auto 0}
.cells{position:absolute;inset:0}
.cell{position:absolute;width:50%;height:190px;padding:34px 30px}
.cell.c1{inset-inline-start:0;top:0}
.cell.c2{inset-inline-start:50%;top:110px}
.cell.c3{inset-inline-start:0;top:300px}
.cell.c4{inset-inline-start:50%;top:410px}
.cell::before,.cell::after{content:"";position:absolute;pointer-events:none}
.cell::before{top:0;inset-inline:-30%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 75%,transparent)}
.cell::after{inset-inline-start:0;top:-25%;bottom:-25%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08) 25%,rgba(255,255,255,.08) 75%,transparent)}
.cell dt{font-size:clamp(2.2rem,3.6vw,3.1rem);font-weight:400;line-height:1.1;display:flex;align-items:baseline;gap:8px}
.cell dt .u{font-size:.5em;color:var(--g);font-weight:400}
.cell dt [data-count]{display:inline-block;text-align:right}
.cell dd{margin-top:10px;font-size:14px;color:#c8cfcb;max-width:18em;line-height:1.6}
.cell dd small{display:block;margin-top:6px;font-size:12px;color:var(--dim);text-align:start}
.guides{position:absolute;inset:0;pointer-events:none}
.guides i{display:none}
.guides .cross{display:block;position:absolute;left:var(--cx,50%);top:var(--cy,300px);width:0;height:0;opacity:0;transition:opacity .6s var(--out)}
.guides .cross.on{opacity:1}
.guides .cross b,.guides .cross s{position:absolute;display:block;background:linear-gradient(var(--dir,180deg),transparent,rgba(110,240,140,.95),transparent);filter:drop-shadow(0 0 6px rgba(74,222,110,.9))}
.guides .cross b{left:-1px;top:-60px;width:2px;height:260px;background:linear-gradient(180deg,transparent,rgba(110,240,140,.8) 17%,rgba(200,255,210,1) 23%,rgba(110,240,140,.8) 32%,transparent)}
.guides .cross s{top:-1px;left:-240px;height:2px;width:290px;background:linear-gradient(90deg,transparent,rgba(110,240,140,.8) 68%,rgba(200,255,210,1) 83%,rgba(110,240,140,.8) 90%,transparent)}
.guides .cross::after{content:"";position:absolute;left:-160px;top:-160px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,222,110,.16),transparent)}

/* ---------- 3 · approach: giant type + split ---------- */
.approach{position:relative;padding:clamp(30px,5vw,60px) 0 0;overflow:hidden}
.giant-wrap{overflow:hidden;padding-block:clamp(10px,2vw,24px)}
.giant-row{display:flex;align-items:baseline;gap:.3em;white-space:nowrap;font-size:clamp(2.6rem,8.2vw,8rem);font-weight:500;line-height:1.3;width:max-content;margin-inline:auto;will-change:transform}
.gw{display:inline-block;padding-block:.05em;background:linear-gradient(270deg,var(--c1,#4ade6e),var(--c2,#8de8a3));-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(calc((1 - var(--wp,1)) * .28em));opacity:calc(.15 + var(--wp,1) * .85);filter:blur(calc((1 - var(--wp,1)) * 4px))}
.giant-row .gw:nth-child(1){--c1:#4ade6e;--c2:#6be38a}
.giant-row .gw:nth-child(3){--c1:#7fe69a;--c2:#b4efc4}
.giant-row .gw:nth-child(5){--c1:#c5ead0;--c2:#e9f2ec}
.giant-row .gw.dot{--c1:#5c6a62;--c2:#5c6a62;font-weight:400}
.split{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(24px,4vw,60px);max-width:1240px;margin:clamp(-40px,-2vw,0px) auto 0;padding-inline:var(--m)}
.focal{position:relative;height:clamp(380px,40vw,540px);display:grid;place-items:center}
.focal canvas{position:absolute;inset:0;width:100%;height:100%}
.focal-h{position:relative;font-size:clamp(1.7rem,2.9vw,2.9rem);font-weight:400;line-height:1.35;text-align:center}
.focal-h::before{content:"";position:absolute;inset:-28% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(17,18,20,.92),rgba(17,18,20,.6) 60%,transparent);pointer-events:none}
.focal-h > span{display:block}
.focal-h > span{white-space:nowrap}
.explain{max-width:470px}
.explain h2{margin-top:18px;font-size:clamp(1.5rem,2.3vw,2.05rem);font-weight:400;line-height:1.38}
.explain p{margin-top:16px;font-size:14.5px;color:#c4cbc7}
@keyframes tick{to{transform:translateX(50%)}}

/* ---------- 4 · language: repeated type composition ---------- */
.language{position:relative;padding:clamp(70px,9vw,130px) var(--m) clamp(70px,9vw,120px);overflow:hidden;display:flex;flex-direction:column;align-items:center}
.language::before{content:"";position:absolute;left:50%;top:20%;width:min(1100px,110vw);height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(110,110,50,.18),rgba(60,80,40,.08) 55%,transparent);filter:blur(30px);pointer-events:none}
.rep-type{position:relative;display:flex;flex-direction:column;align-items:center;font-size:clamp(3rem,8.4vw,8rem);font-weight:600;line-height:1.06;white-space:nowrap}
.rep-type .rr{display:block;color:transparent;-webkit-text-stroke:1px rgba(74,222,110,.32);will-change:transform}
.rep-type .r1{-webkit-text-stroke-color:rgba(74,222,110,.16)}
.rep-type .r4{-webkit-text-stroke-color:rgba(74,222,110,.2)}
/* the gradient fill only paints inside the row's box: extend the box past the descender of «ى» (and a hair either side),
   then pull the following row back so the rhythm is unchanged; the solid row sits above the outlined rows */
.rep-type .lit{position:relative;z-index:1;padding:0 .12em .34em;margin:0 -.12em -.34em;-webkit-text-stroke:0;background:linear-gradient(270deg,#4ade6e,#46d26a 55%,#2f8e4f);-webkit-background-clip:text;background-clip:text;color:transparent}
.lang-q{position:relative;z-index:2;max-width:34em;margin:clamp(30px,4vw,52px) auto 0;padding-inline-start:20px;border-inline-start:1px solid rgba(74,222,110,.45)}
.lang-q p{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:300;line-height:1.6;color:#e6ece8}
.bracket{position:absolute;width:56px;height:30px;border:1px solid rgba(255,255,255,.18);pointer-events:none}

/* ---------- 5 · how ---------- */
.how{position:relative;overflow-x:clip}
.how-track{position:relative}
.how-pin{position:relative;padding:clamp(70px,8vw,110px) var(--m) 60px;display:flex;flex-direction:column;align-items:center}
.pin-on .how-track{height:250vh}
.pin-on .how-pin{position:sticky;top:0;height:100svh;justify-content:center;padding-block:clamp(20px,4vh,46px)}
.how-head{position:relative;text-align:center;padding:0 40px}
.how-head h2{font-size:clamp(2rem,3.9vw,3.5rem)}
.how-head p{margin-top:4px;font-size:14px;color:var(--mute)}
.how-head p::after{content:"";display:block;width:70px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--g),transparent)}
.br-tr{top:-14px;inset-inline-end:-50px;border-bottom:0;border-inline-start:0;border-color:rgba(74,222,110,.35)}
.br-tl{bottom:20px;inset-inline-start:-60px;border-top:0;border-inline-end:0;width:30px;height:60px}
.stage{position:relative;width:min(1120px,100%);min-height:clamp(300px,44vh,420px);display:grid;margin-top:clamp(18px,3vh,34px);border-radius:16px;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line-2);z-index:3;pointer-events:none}
.stage::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(225deg,transparent 45%,rgba(74,222,110,.45) 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:3;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:1;pointer-events:none;-webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,transparent 98%);mask-image:radial-gradient(120% 100% at 50% 50%,#000 55%,transparent 98%)}
.stage-light{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 80% at 30% 100%,rgba(74,222,110,.08),transparent 70%);z-index:0}
.panel-set{position:relative;grid-area:1/1;z-index:4;display:grid;place-items:center;padding:clamp(28px,4vw,48px) clamp(18px,4vw,56px);opacity:0;visibility:hidden;transform:translateY(24px) scale(.97);filter:blur(10px);transition:opacity .7s var(--out),transform .9s var(--out),filter .7s var(--out),visibility 0s .7s}
.panel-set.on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:.12s,.12s,.12s,0s}
.stack{position:relative;width:min(340px,78%);transform:translateX(-4%);perspective:1100px}
.scard{position:absolute;inset:0;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(160deg,rgba(38,41,42,.94),rgba(16,17,18,.96));box-shadow:0 24px 50px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);padding:14px 16px;transform-origin:50% 50%;transition:transform 1s var(--out)}
.scard b{display:block;font-size:12px;color:var(--mute);font-weight:400}
.scard span{font-size:13px;color:#cfd5d1}
.scard.k4{transform:translate(calc(var(--sp,1) * 96px),calc(var(--sp,1) * -40px)) rotateY(-14deg)}
.scard.k3{transform:translate(calc(var(--sp,1) * 64px),calc(var(--sp,1) * -27px)) rotateY(-14deg)}
.scard.k2{transform:translate(calc(var(--sp,1) * 32px),calc(var(--sp,1) * -13px)) rotateY(-14deg)}
.scard.k1{position:relative;inset:auto;transform:rotateY(-14deg);display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,rgba(44,47,48,.97),rgba(18,19,20,.98))}
.sc-top{display:flex;justify-content:space-between;align-items:center}
.sc-thumb{border-radius:10px;margin-bottom:2px}
.sc-thumb .d-play{width:44px;height:44px;margin:-22px}
.sc-thumb .d-play svg{width:16px;height:16px}
.sc-top .dots{font-size:10px;letter-spacing:.2em;color:#e9efe9}
.sc-k{font-size:11.5px;color:var(--mute)}
.sc-t{font-size:15px;line-height:1.5;font-weight:500;color:var(--ink)}
.sc-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);font-size:13px;text-decoration:none;cursor:pointer;transition:border-color .3s,background-color .3s}
.sc-btn:hover{border-color:rgba(74,222,110,.6);background:rgba(74,222,110,.08)}
.sc-btn svg{width:12px;height:12px;color:var(--g)}
.pill{font-size:11.5px;padding:3px 10px;border-radius:999px;color:var(--mute);border:1px solid transparent}
.pill.on{background:rgba(74,222,110,.85);color:#062312}
.prev-label{display:inline-block;margin-top:8px;font-size:10.5px;color:#e9cf98;border:1px solid rgba(233,196,120,.28);border-radius:999px;padding:1px 9px}
.comp{position:relative;width:min(560px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.comp::before{content:"";position:absolute;inset:-18% -12%;z-index:-1;background:radial-gradient(closest-side,rgba(15,16,17,.82),rgba(15,16,17,.45) 60%,transparent);pointer-events:none}
.comp-line{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:400;line-height:1.3}
.comp-facts{display:flex;flex-wrap:wrap;justify-content:center;margin-top:clamp(18px,3vh,28px);font-size:14px;color:#cdd4d0}
.comp-facts li{padding:4px clamp(12px,2vw,22px)}
.comp-facts li+li{border-inline-start:1px solid var(--line-3)}
.comp-btn{margin-top:clamp(20px,3.4vh,32px);padding:0 22px;min-height:42px}
.comp-seq{display:flex;align-items:baseline;justify-content:center;gap:.4em;font-size:clamp(1.9rem,3.8vw,3rem);font-weight:400;line-height:1.3}
.comp-seq .dot{color:var(--dim);font-size:.7em}
.comp-seq .sq{position:relative;padding-bottom:.08em}
.comp-seq .sq::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(74,222,110,.2),var(--g));transform:scaleX(0);transform-origin:right;transition:transform .7s var(--out);transition-delay:calc(.25s + var(--k) * .22s)}
.panel-set.on .comp-seq .sq::after{transform:scaleX(1)}
.comp-qs{margin-top:clamp(18px,3vh,28px);display:grid;gap:10px;text-align:start}
.comp-qs li{font-size:clamp(1rem,1.5vw,1.15rem);color:#d6ddd9;padding-inline-start:14px;border-inline-start:1px solid rgba(74,222,110,.5);opacity:.35;transition:opacity .6s var(--out);transition-delay:calc(.5s + var(--k) * .22s)}
.panel-set.on .comp-qs li{opacity:1}
.steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);width:min(1120px,100%);margin-top:clamp(16px,3vh,30px)}
.step{position:relative;text-align:start;background:none;border:0;padding:16px 0 4px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:clamp(110px,16vh,150px)}
.step .ln{position:absolute;top:0;inset-inline:0;height:1px;background:var(--line-2);overflow:hidden}
.step .ln i{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--f,0) * 100%);background:var(--g);box-shadow:0 0 8px var(--g)}
.step .lab{font-size:11.5px;color:var(--mute);letter-spacing:.02em}
.step[aria-selected="true"] .lab{color:var(--mute)}
.step[aria-selected="true"] .lab::before{content:"[ "}.step[aria-selected="true"] .lab::after{content:" ]"}
.step b{font-size:17px;font-weight:500;line-height:1.45;opacity:.55;transition:opacity .5s;overflow-wrap:anywhere}
.step .tx{font-size:13px;line-height:1.75;color:var(--mute);opacity:0;transform:translateY(8px);transition:opacity .6s var(--out),transform .7s var(--out)}
.step[aria-selected="true"] b{opacity:1}
.step[aria-selected="true"] .tx{opacity:1;transform:none}
.step::after{content:"";position:absolute;inset:-10% -20% -40%;background:radial-gradient(50% 50% at 50% 30%,var(--warm),transparent 70%);opacity:0;transition:opacity .8s;pointer-events:none;z-index:-1}
.step[aria-selected="true"]::after{opacity:1}
.step-detail{display:none;margin-top:14px;font-size:14px;color:#c4cbc7;line-height:1.85;min-height:5.6em;text-align:start;width:100%}

/* ---------- 6 · record ---------- */
.record{position:relative;padding:clamp(64px,10vw,140px) var(--m) clamp(64px,9vw,120px)}
.rec-head{max-width:40em;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.rec-head .g{color:var(--g-soft)}
.rec-head p{margin-top:12px;font-size:clamp(.98rem,1.3vw,1.08rem);color:#c2c8c4}
/* the record card: one panel, typeset like a statement; no boxes inside it */
.rec-card{--rc-pad:clamp(22px,4.6vw,44px);max-width:680px;margin:0 auto;padding:var(--rc-pad);border-radius:var(--r-lg);border:1px solid rgba(169,239,187,.11);background:linear-gradient(172deg,#151a18 0%,#111413 46%,#0f1211 100%);box-shadow:0 30px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.035)}
.rc-label{font-size:11.5px;font-weight:500;letter-spacing:.2em;color:#9aa49e;text-align:right;unicode-bidi:isolate}
.rc-kind{margin-top:6px;font-size:13.5px;color:var(--mute)}
.rc-period{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:clamp(28px,4vw,40px);padding-bottom:22px}
.rc-date{display:flex;flex-direction:column;gap:4px}
.rc-date:last-of-type{align-items:flex-end;text-align:left}
.rc-date span{font-size:13px;color:var(--mute);line-height:1.5}
.rc-date time{font-size:clamp(1rem,1.7vw,1.12rem);font-weight:500;color:var(--ink);line-height:1.5}
/* the displayed period: a hairline between two quiet markers (start hollow, snapshot filled) */
.rc-line{position:absolute;inset-inline:5px;bottom:4px;height:1px;background:rgba(169,239,187,.3)}
.rc-line::before,.rc-line::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%)}
.rc-line::before{inset-inline-start:-5px;border:1.5px solid rgba(169,239,187,.7);background:#121615}
.rc-line::after{inset-inline-end:-5px;background:var(--g-soft)}
.rc-net{margin-top:clamp(30px,4.4vw,44px)}
.rc-k{font-size:14px;color:var(--mute)}
.rc-v{margin-top:4px;font-size:clamp(2.45rem,11.2vw,3.9rem);font-weight:500;line-height:1.2;color:var(--g-soft);letter-spacing:-.01em}
.rc-v .n{display:inline-block}
.rc-meta{margin-top:6px;font-size:14px;color:var(--mute);line-height:1.6}
.rc-meta+.rc-meta{margin-top:2px}
.rc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:clamp(18px,5vw,48px);margin-top:clamp(30px,4.4vw,42px)}
.rc-stats div{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.rc-stats dt{font-size:13.5px;color:var(--mute);line-height:1.55;align-self:end}
.rc-sv{margin:6px 0 0;font-size:clamp(1.75rem,6.2vw,2.3rem);font-weight:400;line-height:1.25;color:var(--ink)}
.rc-sub{margin:6px 0 0;font-size:13px;color:#8d958f;line-height:1.55}
.rc-src{margin-top:clamp(28px,4vw,38px);padding-top:clamp(18px,2.6vw,22px);border-top:1px solid var(--line-2)}
.rc-src>p:first-child{font-size:13px;color:#8d958f;line-height:1.8}
.rc-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px}
.rc-links a{display:inline-flex;align-items:center;gap:7px;min-height:32px;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-3);transition:color .3s,border-color .3s}
.rc-links a:hover{color:var(--g-soft);border-color:rgba(169,239,187,.6)}
.rc-links a:focus-visible{outline:2px solid var(--g-soft);outline-offset:4px;border-radius:2px}
.rc-links svg{width:13px;height:13px;flex:none;opacity:.7}
.rec-note{max-width:34em;margin:clamp(18px,2.6vw,24px) auto 0;font-size:13px;color:var(--mute);text-align:center;line-height:1.8}

/* ---------- 7 · pricing ---------- */
.pricing{position:relative;padding:clamp(80px,10vw,130px) var(--m) clamp(60px,8vw,100px)}
.pr-head{position:relative;max-width:1060px;margin:auto;padding:clamp(34px,5vw,64px) 20px;text-align:center;border:1px solid rgba(255,255,255,.035)}
.frame-dots{position:absolute;inset:0;pointer-events:none}
.frame-dots b{position:absolute;width:5px;height:5px;border-radius:50%;background:#dfe6e1;box-shadow:0 0 8px rgba(255,255,255,.6)}
.frame-dots b:nth-child(1){top:-3px;left:-3px}.frame-dots b:nth-child(2){top:-3px;right:-3px}.frame-dots b:nth-child(3){bottom:-3px;left:-3px}.frame-dots b:nth-child(4){bottom:-3px;right:-3px}
.meteor{position:absolute;top:22%;inset-inline-end:30%;width:2px;height:70px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85));transform:rotate(-28deg);border-radius:2px;opacity:0;animation:meteor 7s 1s ease-in infinite}
@keyframes meteor{0%{opacity:0;translate:0 -30px}6%{opacity:1}16%{opacity:0;translate:-60px 90px}100%{opacity:0}}
.pr-head p{margin-top:10px;font-size:14px;color:var(--mute)}
.pr-head .pr-notice{margin-top:8px;font-size:12.5px;color:var(--dim)}
.seg{display:inline-flex;gap:4px;margin:0;padding:4px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label>span{display:block;padding:7px 18px;border-radius:999px;font-size:13px;color:var(--mute);transition:background-color .3s,color .3s}
.seg input:checked+span{background:#f1f4f2;color:#0c0e0d;box-shadow:0 4px 14px -4px rgba(255,255,255,.4)}
.seg input:focus-visible+span{outline:2px solid var(--g);outline-offset:2px}
.ptable{position:relative;display:grid;grid-template-columns:1.05fr 1fr 1.08fr 1fr;grid-template-rows:auto auto repeat(6,auto);max-width:1100px;margin:clamp(26px,4vw,40px) auto 0;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005))}
.pt-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;border-inline-start:1px solid var(--line);position:relative;min-width:0}
.pt-col:first-child{border-inline-start:0}
.pt-cell{padding:12px 18px;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;color:#cdd3cf;text-align:center;border-top:1px solid rgba(255,255,255,.035)}
.pt-labels .pt-cell{justify-content:flex-start;text-align:start;color:#c5ccc8}
.pt-cell.head{flex-direction:column;gap:4px;min-height:190px;border-top:0;padding-top:24px}
.pt-labels .pt-cell.head{justify-content:flex-start;font-size:14px;color:var(--ink)}
.pt-cell.head small{font-size:11.5px;color:var(--mute)}
.pt-cell.head h3{font-size:16px;font-weight:500}
.pp{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.pp b{font-size:clamp(1.9rem,3vw,2.4rem);font-weight:400;line-height:1.1}
.pp .per{font-size:13px;color:var(--mute)}
.billed{font-size:12.5px;color:#dfe5e1}
.saving{font-size:12px;color:var(--g)}
.saving:empty{display:none}
.pnote{font-size:11.5px;color:var(--dim)}
.badge-closed{font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid rgba(233,196,120,.35);color:#e9cf98;background:rgba(233,196,120,.06)}
.act-row{flex-direction:column;justify-content:flex-start;gap:6px;border-top:0;min-height:92px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:220px;min-height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(10,11,12,.5);font-size:13.5px;text-decoration:none;cursor:pointer;transition:border-color .3s,background-color .3s,box-shadow .3s}
.pbtn:hover{border-color:rgba(255,255,255,.4)}
.pbtn.on{border-color:rgba(160,245,180,.5);background:linear-gradient(90deg,rgba(74,222,110,.14),rgba(74,222,110,.04));box-shadow:0 0 24px -8px rgba(74,222,110,.6)}
.pbtn[aria-disabled="true"],.pbtn:disabled{cursor:not-allowed;opacity:.62}
.phint{font-size:11px;color:var(--dim);line-height:1.5;max-width:220px}
.pt-cell svg{width:16px;height:16px;flex:none}
.pt-cell svg.yes{color:var(--g)}
.pt-cell svg.no{color:var(--dim)}
.pt-col.main{border-radius:16px;margin:-10px 0;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(74,222,110,.10) 85%,rgba(74,222,110,.16));border:1px solid rgba(255,255,255,.34);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 30px 80px -30px rgba(74,222,110,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.pt-col.main .pt-cell{border-top-color:rgba(255,255,255,.05)}
.pt-col.main .pt-cell.head{padding-top:34px}
.pt-col.main::before{content:"";position:absolute;inset-inline:18%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.8}
.price-swap{animation:swap .5s var(--out)}
@keyframes swap{from{opacity:.2;transform:translateY(6px);filter:blur(4px)}}
.pt-cell.more{display:none}
.ptable.open .pt-cell.more{display:flex}
.ptable:not(.open)::after{content:"";position:absolute;inset-inline:0;bottom:0;height:60px;background:linear-gradient(180deg,transparent,rgba(17,18,20,.6));pointer-events:none;border-radius:0 0 16px 16px}
.pr-more{display:flex;justify-content:center;margin-top:26px;position:relative}
.pr-more::before{content:"";position:absolute;left:50%;top:50%;width:420px;height:160px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(74,222,110,.12),transparent);pointer-events:none}
.pr-more svg{width:14px;height:14px;transition:transform .4s}
.pr-more [aria-expanded="true"] svg{transform:rotate(180deg)}

.prog-cards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1060px;margin:clamp(30px,4vw,48px) auto clamp(60px,7vw,90px)}
.seg-wrap{display:flex;justify-content:center}
.pcard{position:relative;overflow:hidden;min-height:clamp(210px,20vw,250px);padding:26px 28px;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#1a1b1c,#121314);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px}
.pcard.pc2{transform:translateY(clamp(28px,4vw,56px))}
.pcard canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pcard>*:not(canvas){position:relative}
.pc-k{font-size:12px;color:var(--mute);letter-spacing:.02em}
.pc2 .pc-k{color:#e9cf98}
.pcard h3{font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:400}
.pcard p{font-size:13.5px;color:#bfc6c2;max-width:22em;line-height:1.7}

/* ---------- 8 · horizon ---------- */
.horizon{position:relative;overflow:hidden;padding:clamp(100px,15vh,160px) var(--m) clamp(60px,8vw,100px);display:flex;flex-direction:column;align-items:center}
.horizon canvas{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.hz-in{position:relative;z-index:2;text-align:center}
.hz-in h2{margin-top:22px;font-size:clamp(2.4rem,5vw,4.7rem);font-weight:400;line-height:1.18}
.ls-wrap{position:relative;z-index:2;width:min(1160px,100%);margin-top:clamp(170px,26vh,280px)}
.ls-channel{display:block;width:max-content;margin:22px auto 0;font-size:13px;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.ls-channel:hover{color:var(--ink)}

.bgrid{position:relative;display:grid;grid-template-columns:repeat(24,1fr);gap:14px;max-width:1060px;margin:clamp(44px,6vw,72px) auto 0}
.bp{position:relative;overflow:hidden;min-height:250px;padding:24px 22px 22px;border-radius:12px;background:linear-gradient(180deg,#1b1c1e,#161718);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;justify-content:flex-end}
.bp.b1{grid-column:span 10}.bp.b2{grid-column:span 14}.bp.b3{grid-column:span 12}.bp.b4{grid-column:span 12}
.bp h4{margin:0;font-size:16px;font-weight:600}
.bp p{margin-top:6px;font-size:12.5px;color:var(--mute);line-height:1.75;max-width:30em}
.obj{position:absolute;inset:0 0 auto;height:62%;display:grid;place-items:center;pointer-events:none}
.o-clock::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,222,110,.22),transparent);filter:blur(10px)}
.o-clock .disc{position:relative;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),transparent 34%),radial-gradient(circle at 50% 60%,#18301f,#0d1510 70%);border:1px solid rgba(160,245,180,.45);box-shadow:inset 0 0 18px rgba(74,222,110,.35),inset 0 -6px 14px rgba(0,0,0,.6),0 0 30px rgba(74,222,110,.25)}
.o-clock .disc::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(74,222,110,.18);border-top-color:rgba(160,245,180,.7);animation:spin 14s linear infinite}
.o-clock .hand{position:absolute;left:50%;top:50%;width:2px;background:#d8f7e0;transform-origin:50% 100%;border-radius:2px;box-shadow:0 0 6px rgba(160,245,180,.8)}
.o-clock .h1{height:30px;margin:-30px 0 0 -1px;transform:rotate(-40deg)}
.o-clock .h2{height:38px;margin:-38px 0 0 -1px;transform:rotate(70deg);animation:spin 30s linear infinite}
.o-clock .dot{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g)}
@keyframes spin{to{rotate:360deg}}
.o-path svg{width:86%;height:70%;overflow:visible;filter:drop-shadow(0 0 6px rgba(74,222,110,.7))}
.o-path circle{fill:#d7f8df}
.o-path::before{content:"";position:absolute;width:60%;height:60%;background:radial-gradient(closest-side,rgba(74,222,110,.12),transparent)}
.o-orb .orb{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.35),transparent 30%),radial-gradient(circle at 50% 55%,#1e5a35,#0b2416 72%);box-shadow:inset 0 0 0 1px rgba(160,245,180,.35),inset 0 -10px 22px rgba(0,0,0,.55),0 14px 30px -6px rgba(74,222,110,.45);color:#7ff29c;animation:bob 6s ease-in-out infinite}
.o-orb .orb svg{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(74,222,110,.9))}
.o-orb .pool{position:absolute;bottom:14%;width:130px;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(74,222,110,.4),transparent);filter:blur(4px)}
@keyframes bob{50%{transform:translateY(-6px)}}
.o-slab{perspective:600px}
.o-slab .slab{position:relative;width:210px;height:120px;border-radius:14px;transform:rotateX(52deg) rotateZ(-28deg);background:linear-gradient(135deg,rgba(74,222,110,.22),rgba(20,40,28,.85) 45%,rgba(8,14,10,.95));border:1px solid rgba(160,245,180,.35);box-shadow:0 30px 40px -10px rgba(0,0,0,.7),0 0 40px rgba(74,222,110,.2),inset 0 1px 0 rgba(255,255,255,.2);color:#8ff3aa;display:grid;place-items:center}
.o-slab .slab svg{width:78%;height:56%;filter:drop-shadow(0 0 4px rgba(74,222,110,.9))}
.o-slab .slab b{position:absolute;left:12px;top:12px;width:30px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.o-slab .slab b+b{left:auto;right:12px;width:10px}

/* ---------- 10 · idea ---------- */
.idea{position:relative;overflow-x:clip}
/* the scene darkens toward its centre and returns to the page colour at both edges, so it never ends on a hard line */
.idea-pin{position:relative;height:100svh;overflow:hidden;background:linear-gradient(180deg,rgba(6,7,7,0) 0%,rgba(6,7,7,.28) 12%,rgba(6,7,7,.56) 26%,rgba(6,7,7,.66) 50%,rgba(6,7,7,.56) 74%,rgba(6,7,7,.28) 88%,rgba(6,7,7,0) 100%);display:grid;place-items:center}
.idea-pin canvas{-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.pin-on .idea-track,.pin-idea .idea-track{height:170vh}
.pin-on .idea-pin,.pin-idea .idea-pin{position:sticky;top:0}
.idea-pin canvas{position:absolute;inset:0;width:100%;height:100%}
.idea-grid{position:absolute;inset:0;opacity:calc(var(--ip,0) * 1.4 - .4);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 85%);mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 85%);pointer-events:none}
.idea-h{position:relative;display:grid;font-size:clamp(2.3rem,5vw,4.4rem);font-weight:400;text-align:center;line-height:1.2}
.idea-h span{grid-area:1/1;transition:opacity .8s var(--out),filter .8s var(--out),transform .9s var(--out)}
.idea-h .ih2{opacity:0;filter:blur(10px);transform:translateY(16px)}
.idea.swap .idea-h .ih1{opacity:0;filter:blur(10px);transform:translateY(-16px)}
.idea.swap .idea-h .ih2{opacity:1;filter:none;transform:none}

/* ---------- 10b · about ---------- */
.about{position:relative;padding:clamp(80px,10vw,130px) var(--m) clamp(48px,7vw,100px)}
.about-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center;max-width:1240px;margin:auto}
.ab-h{font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.3}
.ab-p{margin-top:18px;font-size:clamp(1.02rem,1.3vw,1.14rem);color:#c9d0cc;max-width:31em;line-height:1.95}
.ab-close{margin-top:26px;padding-inline-start:16px;border-inline-start:1px solid rgba(74,222,110,.5);font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.7;color:var(--ink);max-width:28em}
.ab-diagram{position:relative;height:clamp(280px,40vh,400px)}
.ab-diagram canvas{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.axis{position:absolute;inset-inline:6% 4%;bottom:0;display:flex;justify-content:space-around;font-size:13px;color:#dfe5e1}

@keyframes vrun{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:calc(100% - 80px);opacity:0}}

/* ---------- 11 · faq ---------- */
.faq{position:relative;padding:clamp(80px,10vw,130px) var(--m);overflow:hidden}
.faq::after{content:"";position:absolute;inset-inline-start:-12%;bottom:6%;width:40%;height:70%;background:radial-gradient(closest-side,rgba(110,120,60,.22),transparent);filter:blur(30px);pointer-events:none}
.faq>h2{text-align:center;font-size:clamp(2rem,3.7vw,3.3rem)}
.faq-list{position:relative;z-index:2;max-width:760px;margin:clamp(30px,4vw,50px) auto 0;display:grid;gap:10px}
.faq details{border-radius:10px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.04);transition:background-color .3s,border-color .3s}
.faq details[open]{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 24px;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{margin-inline-start:auto;position:relative;width:14px;height:14px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:#e3e9e5;transition:transform .4s var(--out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 24px 22px;font-size:14px;color:var(--mute);line-height:1.85;max-width:44em}
.drift{position:absolute;width:26px;height:80px;border:2px solid #4ade6e;border-inline-start:0;border-bottom:0;filter:drop-shadow(0 0 6px rgba(74,222,110,.9));opacity:.85;pointer-events:none;animation:drift 12s ease-in-out infinite}
.drift.d-a{top:12%;inset-inline-end:12%}
.drift.d-b{top:56%;inset-inline-end:8%;width:40px;height:2px;border-inline-start:0;border-top:0;border-bottom:2px solid #4ade6e;border-inline-end:0;animation-delay:-4s}
.drift.d-c{bottom:12%;inset-inline-end:16%;width:22px;height:46px;border-top:0;border-bottom:2px solid #4ade6e;animation-delay:-8s}
@keyframes drift{50%{translate:0 40px;opacity:.4}}

/* ---------- 12 · all in one ---------- */
.allin{position:relative;padding:clamp(90px,11vw,140px) var(--m) clamp(70px,8vw,110px);overflow:hidden}
/* overhead light starts below the section edge and fades in, so there is no line where the section begins */
.beams{position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 50% at 50% 0%,rgba(80,150,70,.2),transparent 75%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.beams i{position:absolute;top:-10%;left:var(--x);width:calc(var(--w) * 1.8);height:80%;background:radial-gradient(45% 100% at 50% 0%,rgba(170,230,150,.2),rgba(150,220,140,.07) 55%,transparent 85%);transform:rotate(var(--r));transform-origin:top center}
.beams i:nth-child(1){--x:34%;--w:140px;--r:12deg}
.beams i:nth-child(2){--x:44%;--w:180px;--r:3deg;animation-delay:-2s}
.beams i:nth-child(3){--x:54%;--w:150px;--r:-6deg;animation-delay:-4s}
.beams i:nth-child(4){--x:62%;--w:110px;--r:-14deg;animation-delay:-6s}
.allin>.frame-dots{inset:clamp(50px,7vw,90px) clamp(30px,14vw,260px) auto;height:clamp(150px,16vw,210px)}
.all-head{position:relative;text-align:center;max-width:620px;margin:auto}
.all-head h2{margin-top:14px;font-size:clamp(2rem,3.9vw,3.5rem)}
.d-play{position:absolute;left:50%;top:44%;z-index:2;display:grid;place-items:center;width:58px;height:58px;margin:-29px;border-radius:50%;background:rgba(241,244,242,.92);color:#0a0c0b;box-shadow:0 0 0 8px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.5);transition:transform .4s var(--out)}
.d-play svg{width:20px;height:20px;margin-inline-end:-3px}

/* ---------- 12 · lessons ---------- */
.ls-row{max-width:1160px;margin:28px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lcard{border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(26,27,29,.92),rgba(18,19,20,.95));border:1px solid var(--line);padding:8px 8px 16px;display:flex;flex-direction:column;gap:12px}
.lthumb{display:block;position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:0;padding:0;cursor:pointer;background:radial-gradient(120% 90% at 80% 0%,#173a26,#0c100e 60%)}
.lthumb .d-play{top:50%;width:50px;height:50px;margin:-25px}
.lthumb img{z-index:1}
.lthumb img.failed{display:none}
.lt-fallback{position:absolute;inset-inline-start:14px;bottom:12px;font-size:11.5px;color:var(--g-soft);opacity:.85}
.lthumb:hover .d-play,.lthumb:focus-visible .d-play{transform:scale(1.07);box-shadow:0 0 0 8px rgba(255,255,255,.08),0 0 0 1px rgba(74,222,110,.65),0 10px 30px rgba(0,0,0,.5)}
.lcard h3{font-size:15px;font-weight:500;line-height:1.55;padding-inline:10px}
.ls-nav{display:none;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.ls-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer}
.ls-btn svg{width:16px;height:16px;transform:scaleX(-1)}
.ls-btn.nx svg{transform:none}
.ls-dots{display:flex;gap:6px}
.ls-dots i{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.ls-dots i.on{background:var(--ink)}

/* ---------- 14 · finale + footer ---------- */
.finale{position:relative;text-align:center;padding:clamp(64px,8vw,110px) var(--m) clamp(48px,6vw,80px)}
.finale::before{content:"";position:absolute;left:50%;top:0;width:min(780px,100%);height:100%;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 40%,rgba(74,222,110,.07),transparent 75%);pointer-events:none}
.finale h2{position:relative;font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:400}
.finale .actions{position:relative;justify-content:center;margin-top:22px}
.socials{position:relative;padding:clamp(40px,5vw,64px) var(--m) clamp(56px,7vw,90px);max-width:1100px;margin:auto}
.socials::before{content:"";position:absolute;top:0;left:50%;width:min(420px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-3),transparent)}
.socials h2{text-align:center;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400}
.so-list{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(22px,3vw,34px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.so-list li+li{border-inline-start:1px solid var(--line)}
.so-list a{display:flex;justify-content:center;align-items:center;gap:14px;padding:20px clamp(16px,2.4vw,28px);text-decoration:none;color:var(--ink);transition:background-color .3s}
.so-list a:hover,.so-list a:focus-visible{background:rgba(74,222,110,.05)}
.so-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);transition:border-color .3s,color .3s}
.so-ic svg{width:17px;height:17px}
.so-list a:hover .so-ic,.so-list a:focus-visible .so-ic{border-color:rgba(74,222,110,.55);color:var(--g-soft)}
.so-t{display:grid;line-height:1.35}
.so-t b{font-size:15px;font-weight:500}
.so-h{font-size:13px;color:var(--mute);direction:ltr;text-align:right}
.so-go{width:15px;height:15px;color:var(--dim);transition:transform .4s var(--out),color .3s}
.so-list a:hover .so-go,.so-list a:focus-visible .so-go{color:var(--g);transform:translateX(-3px)}
.site-footer{position:relative;padding:clamp(40px,6vw,70px) var(--m) 30px}
.site-footer::before{content:"";position:absolute;top:0;left:50%;width:min(1300px,100%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.f-cols{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.f-brand p{margin-top:12px;font-size:13px;color:var(--mute)}
.f-cols h2{font-size:clamp(1.25rem,1.8vw,1.7rem);font-weight:400;margin-bottom:12px}
.f-cols nav a{display:block;font-size:13px;color:var(--mute);text-decoration:none;padding:4px 0;width:max-content;max-width:100%}
.f-cols nav a:hover{color:var(--ink)}
.disclaimer{max-width:1300px;margin:40px auto 0;font-size:12px;color:var(--dim);line-height:1.9}
.copy{max-width:1300px;margin:12px auto 0;font-size:12px;color:var(--dim)}

/* ---------- dialogs ---------- */
.vdlg{width:min(980px,94vw);max-height:92vh;padding:0;border:1px solid var(--line-2);border-radius:16px;background:#0d0e0f;color:var(--ink)}
.vdlg::backdrop{background:rgba(3,4,4,.82);backdrop-filter:blur(6px)}
.vd-in{display:flex;flex-direction:column}
.vd-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.vd-top h2{font-size:14px;font-weight:500;line-height:1.5}
.vd-ext{margin-inline-start:auto;font-size:12.5px;color:var(--mute)}
.vd-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:none;font-size:22px;line-height:1;cursor:pointer;flex:none}
.rdlg .vd-x{margin-inline-start:auto}
.vd-frame{aspect-ratio:16/9;background:#000}
.vd-frame iframe{width:100%;height:100%;border:0;display:block}
.rd-body{padding:16px;overflow:auto}
.rd-body img{width:100%;height:auto;border-radius:8px}
.rd-body p{margin-top:10px;font-size:12.5px;color:var(--mute)}
.rd-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--mute)}
.rd-full{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-3)}
.rd-full:hover{color:var(--g-soft)}
.rd-full svg{width:13px;height:13px;opacity:.7}

/* =================== responsive =================== */
@media (max-width:1100px){
  .head-actions .btn-line{display:none}
  .nav a{padding:6px 10px}
}
@media (max-width:900px){
  :root{--head:64px}
  .head-actions{display:none}
  .menu-btn{display:inline-flex}
  .nav{position:absolute;top:calc(var(--head) - 4px);inset-inline:12px;flex-direction:column;align-items:stretch;gap:0;padding:8px;border-radius:18px;background:rgba(14,15,16,.97);border-color:var(--line-2);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--out),visibility 0s .3s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav a{padding:13px 12px;font-size:16px;border-radius:12px;color:var(--ink)}
  .nav a[aria-current="true"]{background:rgba(74,222,110,.1)}
  .nav .nav-cta{display:block;margin-top:6px;text-align:center;background:#f1f4f2;color:#0c0e0d;font-weight:500}
  .site-header.solid,.site-header.menu-open{background:rgba(13,14,15,.9)}
  .split{grid-template-columns:1fr}
  .focal{height:clamp(380px,104vw,480px)}
  .explain{max-width:none}
  /* the last line of this section sat flush on its clipped edge, so its reveal never fired on phones/tablets */
  .approach{padding-bottom:clamp(36px,8vw,56px)}
  .pin-idea .idea-track{height:135vh}
  .rep-type{font-size:clamp(2.6rem,12.5vw,5.4rem)}
  .stage{min-height:0}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .step{min-height:0}
  .step b{font-size:14.5px}
  .step .tx{display:none}
  .step-detail{display:block}
  .about-in{grid-template-columns:1fr;align-items:start;gap:28px}
  .ab-diagram{height:clamp(200px,52vw,290px)}
  .prog-cards{grid-template-columns:1fr;gap:14px}
  .pcard.pc2{transform:none}
  .ls-wrap{margin-top:clamp(120px,30vw,220px)}
  .lang-q{padding-inline-start:16px}
  .ptable{display:flex;flex-direction:column;gap:14px;border:0;background:none}
  .pt-col.pt-labels{display:none}
  .pt-col{border:1px solid var(--line);border-radius:16px;grid-template-rows:none;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))}
  .pt-col.main{order:-1;margin:0}
  .pt-cell{justify-content:space-between;text-align:start;min-height:46px}
  .pt-cell[data-l]::before{content:attr(data-l);color:var(--mute);font-size:13px;margin-inline-end:auto}
  .pt-cell.head{min-height:0;align-items:flex-start;padding:22px 20px 10px}
  .pt-cell.act-row{order:9;align-items:stretch;padding:14px 20px 20px}
  .pbtn{max-width:none}
  .phint{max-width:none;text-align:center}
  .pt-cell.more{display:flex}
  .ptable:not(.open)::after,.pr-more{display:none}
  .bgrid{grid-template-columns:1fr}
  .bp.b1,.bp.b2,.bp.b3,.bp.b4{grid-column:auto}
  .f-cols{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}
  .ls-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--m) * -1);padding-inline:var(--m);scrollbar-width:none}
  .ls-row::-webkit-scrollbar{display:none}
  .lcard{flex:0 0 min(82vw,360px);scroll-snap-align:center}
  .ls-nav{display:flex}
  .so-list{grid-template-columns:1fr}
  .comp-facts{flex-direction:column;align-items:center;gap:4px}
  .comp-facts li+li{border-inline-start:0}
  .comp-facts li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--g);opacity:.7;margin-inline-end:9px;vertical-align:middle}
  .so-list li+li{border-inline-start:0;border-top:1px solid var(--line)}
  .so-list a{justify-content:flex-start}
  .so-list .so-go{margin-inline-start:auto}
}
@media (max-width:600px){
  .marks span:nth-child(n+3){display:none}
  .hero{padding-bottom:110px}
  .hero h1{font-size:clamp(2.5rem,12vw,3.6rem)}
  .hero .actions .btn{flex:1 1 auto}
  .hero-foot{font-size:11.5px}
  .follow span{display:none}
  .num-field{height:auto;margin-top:40px}
  .cells{position:relative;display:grid;gap:0}
  .cell{position:relative;inset:auto!important;width:82%;height:auto;padding:26px 20px}
  .cell.c2,.cell.c4{margin-inline-start:18%}
  .guides .cross{display:none}
  .giant-row{font-size:clamp(2rem,10.4vw,3.6rem)}
  .focal-h{font-size:clamp(1.45rem,6.6vw,2.1rem)}
  .how-head{padding:0}
  .bracket{display:none}
  .stack{width:min(260px,74%)}
  .scard.k4,.scard.k3{display:none}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step .lab{font-size:10.5px}
  .horizon{min-height:100svh}
  .bp{min-height:250px}
  .faq summary{padding:18px 18px;font-size:14.5px}
  .faq details p{padding:0 18px 20px}
  .drift{display:none}
  .f-cols{grid-template-columns:1fr}
}


/* 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;transition-delay:0s!important}
  .hero h1 .w,.hero-tag,.hero .lead,.hero .actions,.hero-light .beam{opacity:1!important;filter:none!important;transform:none!important}
  .js .rv{opacity:1;transform:none;filter:none}
}
/* no JS */
.no-js .rv{opacity:1}
.no-js canvas{display:none}
.no-js .panel-set.ps1{opacity:1;visibility:visible;transform:none;filter:none}
.no-js .step .tx,.no-js .step b{opacity:1;transform:none}
.no-js .pt-cell.more{display:flex}
.no-js .pr-more{display:none}
.no-js .ptable::after{display:none}