/* ========================================================================== StepNet — site.css · design system · v20261031a -------------------------------------------------------------------------- One stylesheet for every page. Reference it with a version query (site.css?v=…) and bump the query on every change: nginx caches css/js/svg/png for a year (long-lived cache header). Phase B reuse map (all class names below are stable): LAYOUT .container .section (.section--band .section--tight .section--rule) .section-head (.section-head--center) .eyebrow > .eyebrow__num .lede .grid (.grid--2 .grid--3 .grid--4) .split (.split--center) .page-hero (inner-page header block, see bottom of file) CHROME .skip-link .site-header (.is-scrolled) .nav .nav__links .mnav (
menu — works without JS) .site-footer .foot-* TYPE .grad-text .mono .num (tabular figures) .muted .faint .asof BUTTONS .btn .btn--primary .btn--ghost .btn--sm .link-arrow [data-magnetic] = magnetic hover (site.js) CARDS .card ([data-tilt] = pointer glow + tilt) .card--feature (animated gradient border) .card__icon .card__title .card__foot STATUS .pill + .pill--done .pill--live .pill--build .pill--next .pill--y2027 .pill--vision .live-dot LISTS .checks (.checks--2col) .kv (definition list of facts) DATA .stat-strip/.stat .formula .table-wrap/.table .bar .addr (address row + [data-copy] button) DIAGRAMS .orbit .timeline (.tl-*, [data-draw]) .flow (money split) .track (governance stages) .tiers (NFT ladder) .steps (Box ladder) .months (stacked bar) .legs (two-sided team) MOTION .reveal (+ style="--d:n" to stagger) .kinetic (word reveal) cross-document @view-transition. Everything stops under prefers-reduced-motion; hidden-until-revealed styles only apply under html.js, so content is readable without JavaScript. FEEDBACK .toast (#toast, role=status) — used by [data-copy] buttons LIVE DATA site.js reads Polygon and rewrites [data-live="members|reserve| price|supply|club|rounds|nfts|nftprice|nfttier"]; the static HTML value (dated "as of") is the no-JS / failed-RPC fallback. ========================================================================== */ /* ---------- fonts (self-hosted, variable where available) ---------- */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2?v=20261031a) format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/space-grotesk-latin.woff2?v=20261031a) format("woff2")} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400.woff2?v=20261031a) format("woff2")} @font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90.5%;descent-override:22.5%;line-gap-override:0%} /* ---------- tokens ---------- */ :root{ color-scheme:dark; --bg:#070a12; --bg-2:#0a0f1b; --bg-3:#0d1424; --surface:#0f1627; --surface-2:#131c31; --surface-3:#18233b; --line:rgba(150,180,230,.10); --line-2:rgba(150,180,230,.17); --line-3:rgba(150,180,230,.28); --text:#eef3fb; --text-2:#aab8cf; --text-3:#8091ad; --emerald:#2be39b; --teal:#37cfe0; --gold:#e8c477; --violet:#9a88ff; --blue:#6aa8ff; --emerald-a:rgba(43,227,155,.13); --teal-a:rgba(55,207,224,.13); --gold-a:rgba(232,196,119,.13); --violet-a:rgba(154,136,255,.14); --blue-a:rgba(106,168,255,.14); --grad:linear-gradient(115deg,#2be39b 0%,#37cfe0 75%); --grad-gold:linear-gradient(115deg,#f5dea6,#dba94f); --font-display:"Space Grotesk","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --font-text:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-h3:clamp(1.12rem,.55vw + .95rem,1.35rem); --fs-h2:clamp(2rem,3.1vw + 1.05rem,3.45rem); --fs-h1:clamp(2.75rem,5.2vw + 1rem,5.6rem); --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; --shadow-1:inset 0 1px 0 rgba(255,255,255,.045),0 12px 32px -14px rgba(0,0,0,.6); --shadow-2:inset 0 1px 0 rgba(255,255,255,.06),0 34px 80px -24px rgba(0,0,0,.72); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --header-h:68px; --container:1200px; --gutter:clamp(16px,4vw,32px); } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);background:var(--bg)} body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--font-text);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance} p{margin:0;text-wrap:pretty} ul,ol{margin:0;padding:0} figure,blockquote,dl,dd{margin:0} a{color:inherit;text-decoration:none} p a:not([class]),li a:not([class]),dd a:not([class]){color:var(--emerald);text-decoration:underline;text-decoration-color:rgba(43,227,155,.45);text-underline-offset:3px} p a:not([class]):hover,li a:not([class]):hover,dd a:not([class]):hover{text-decoration-color:var(--emerald)} img,canvas{display:block;max-width:100%} button{font:inherit;color:inherit} code,kbd,.mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:0} b,strong{font-weight:600;color:var(--text)} :focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:6px} ::selection{background:rgba(43,227,155,.3);color:#fff} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .sprite{position:absolute;width:0;height:0;overflow:hidden} .i{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .muted{color:var(--text-2)} .faint{color:var(--text-3)} .asof{font-size:var(--fs-xs);color:var(--text-3);font-family:var(--font-mono);letter-spacing:.01em} /* background texture: a faint grid that fades out under the header */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(1200px 700px at 85% -10%,rgba(43,227,155,.07),transparent 60%),radial-gradient(900px 600px at -10% 30%,rgba(55,207,224,.05),transparent 60%)} /* ---------- layout ---------- */ .container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)} .section{position:relative;padding-block:clamp(72px,9vw,136px);overflow-x:clip} .section--tight{padding-block:clamp(28px,4vw,48px)} .section--band{background:linear-gradient(180deg,rgba(14,21,38,0),rgba(14,21,38,.72) 14%,rgba(14,21,38,.72) 86%,rgba(14,21,38,0))} .section--rule::before{content:"";position:absolute;top:0;left:50%;width:min(1200px,92%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-3),transparent)} .section-head{max-width:780px;margin-bottom:clamp(36px,4.5vw,64px)} .section-head--center{text-align:center;margin-inline:auto} .section-head h2{font-size:var(--fs-h2);margin-bottom:18px} .eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:500 .78rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)} .eyebrow__num{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:6px;border:1px solid rgba(43,227,155,.32);background:var(--emerald-a);color:var(--emerald);letter-spacing:.04em} .lede{font-size:clamp(1.04rem,.35vw + .96rem,1.2rem);line-height:1.65;color:var(--text-2);max-width:66ch} .section-head--center .lede{margin-inline:auto} .grid{display:grid;gap:clamp(14px,1.6vw,20px)} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start} .split--center{align-items:center} .stack-lg>*+*{margin-top:clamp(28px,4vw,48px)} .center{text-align:center} .mt-lg{margin-top:clamp(28px,4vw,48px)} /* ---------- skip link ---------- */ .skip-link{position:fixed;left:16px;top:-60px;z-index:200;padding:12px 16px;border-radius:12px;background:var(--emerald);color:#04140e;font-weight:600;transition:top .2s} .skip-link:focus{top:12px} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:60;height:var(--header-h);border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s,backdrop-filter .35s;view-transition-name:site-header} html:not(.js) .site-header,.site-header.is-scrolled,.site-header:has(.mnav[open]){background:rgba(7,10,18,.78);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)} .nav{height:100%;display:flex;align-items:center;gap:20px} .brand{display:inline-flex;align-items:center;gap:11px;flex:none;min-height:44px;border-radius:12px} .brand__mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(160deg,#121c33,#0b1222);border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(43,227,155,.05),0 8px 24px -8px rgba(43,227,155,.45)} .brand__mark svg{width:24px;height:24px} .brand__name{font:700 1.28rem/1 var(--font-display);letter-spacing:-.035em} .nav__links{display:flex;align-items:center;gap:2px;margin-inline:auto} .nav__links a{position:relative;padding:10px 12px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--text-2);transition:color .2s,background-color .2s} .nav__links a:hover{color:var(--text);background:rgba(255,255,255,.04)} .nav__links a[aria-current="page"]{color:var(--text)} .nav__links a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--grad)} .nav__cta{display:flex;align-items:center;gap:10px;margin-left:auto} .nav__links+.nav__cta{margin-left:0} .mnav{display:none;position:relative} .mnav>summary{list-style:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.035);display:grid;place-content:center;gap:5px;cursor:pointer} .mnav>summary::-webkit-details-marker{display:none} .mnav>summary span{display:block;width:18px;height:1.6px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease-out)} .mnav[open]>summary span:first-child{transform:translateY(3.3px) rotate(45deg)} .mnav[open]>summary span:last-child{transform:translateY(-3.3px) rotate(-45deg)} .mnav__panel{position:fixed;left:12px;right:12px;top:calc(var(--header-h) + 6px);display:grid;gap:2px;padding:10px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:#0a0f1b;box-shadow:var(--shadow-2);max-height:calc(100vh - var(--header-h) - 24px);overflow:auto} .mnav__panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:12px;color:var(--text-2);font-weight:500} .mnav__panel a:not(.btn):hover,.mnav__panel a:not(.btn)[aria-current="page"]{background:rgba(255,255,255,.045);color:var(--text)} .mnav__panel .btn{margin-top:8px;justify-content:center} /* ---------- buttons & links ---------- */ .btn{--tx:0px;--ty:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);border:1px solid transparent;font:600 1rem/1 var(--font-text);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transform:translate(var(--tx),var(--ty));transition:transform .35s var(--ease-out),box-shadow .3s,background-color .25s,border-color .25s,color .2s} .btn .i{width:1.05em;height:1.05em;transition:transform .3s var(--ease-out)} .btn:hover .i{transform:translate(2px,-2px)} .btn--primary{color:#03140d;background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 32px -10px rgba(43,227,155,.6)} .btn--primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 46px -12px rgba(43,227,155,.78)} .btn--ghost{color:var(--text);background:rgba(255,255,255,.04);border-color:var(--line-2)} .btn--ghost:hover{border-color:rgba(43,227,155,.5);background:rgba(43,227,155,.07)} .btn--sm{min-height:42px;padding:0 16px;font-size:.92rem} .link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--emerald)} .link-arrow .i{transition:transform .3s var(--ease-out)} .link-arrow:hover .i{transform:translateX(4px)} /* ---------- pills / status ---------- */ .pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--r-pill);font:600 .7rem/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border:1px solid} .pill--done{color:var(--emerald);background:var(--emerald-a);border-color:rgba(43,227,155,.34)} .pill--live{color:var(--emerald);background:var(--emerald-a);border-color:rgba(43,227,155,.34)} .pill--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--emerald);animation:blink 1.8s infinite} .pill--build{color:var(--teal);background:var(--teal-a);border-color:rgba(55,207,224,.34)} .pill--next{color:var(--gold);background:var(--gold-a);border-color:rgba(232,196,119,.34)} .pill--y2027{color:var(--violet);background:var(--violet-a);border-color:rgba(154,136,255,.34)} .pill--vision{color:var(--text-2);background:rgba(255,255,255,.04);border-color:var(--line-3);border-style:dashed} .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(43,227,155,.6);animation:ping 2s infinite;flex:none} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(43,227,155,.55)}80%,100%{box-shadow:0 0 0 9px rgba(43,227,155,0)}} @keyframes blink{50%{opacity:.35}} /* ---------- cards ---------- */ .card{--mx:50%;--my:0%;position:relative;isolation:isolate;padding:clamp(22px,2.2vw,30px);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--bg-2);box-shadow:var(--shadow-1);transition:transform .45s var(--ease-out),border-color .3s,box-shadow .3s} .card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(43,227,155,.75),rgba(55,207,224,.25) 35%,transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s} .card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(43,227,155,.07),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none} .card:hover::before,.card:hover::after{opacity:1} .card[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))} .card[data-tilt]:hover{--lift:-3px} .card__icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;color:var(--emerald);background:linear-gradient(160deg,rgba(43,227,155,.16),rgba(55,207,224,.06));border:1px solid rgba(43,227,155,.22)} .card__icon .i{width:22px;height:22px} .card__title{font-size:var(--fs-h3);margin-bottom:10px} .card :where(p){color:var(--text-2);font-size:.96rem} .card__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:400 .8rem/1.4 var(--font-mono);color:var(--text-3);letter-spacing:.01em} .card__foot b{color:var(--emerald);font-weight:400} @property --angle{syntax:"";inherits:false;initial-value:0deg} .card--feature{border-color:transparent} .card--feature>.card__ring{position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:-1;background:conic-gradient(from var(--angle),rgba(150,180,230,.16) 0 30%,var(--emerald) 45%,var(--teal) 55%,var(--gold) 62%,rgba(150,180,230,.16) 75% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:angle 7s linear infinite} @keyframes angle{to{--angle:360deg}} /* ---------- lists ---------- */ .checks{list-style:none;display:grid;gap:11px} .checks li{position:relative;padding-left:30px;color:var(--text-2);font-size:.95rem;line-height:1.55} .checks li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:50%;background:var(--emerald-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232be39b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat;border:1px solid rgba(43,227,155,.3)} .checks--2col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px} .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin:28px 0 0;border-top:1px solid var(--line)} .kv>div{display:contents} .kv dt,.kv dd{padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem} .kv dt{padding-right:22px;color:var(--text-3);font:400 .78rem/1.9 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap} .kv dd{margin:0;color:var(--text)} /* ---------- reveal & kinetic type (hidden states only under .js) ---------- */ .js .reveal{opacity:0;translate:0 26px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)} .js .reveal.in,.reveal-all .reveal{opacity:1;translate:none} .kinetic .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .kinetic .w{display:inline-block} .js .kinetic .w{opacity:0;transform:translateY(100%) rotate(2deg);filter:blur(10px);animation:word-in 1.05s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 110ms + 120ms)} @keyframes word-in{to{opacity:1;transform:none;filter:blur(0)}} /* ---------- toast ---------- */ .toast{position:fixed;left:50%;bottom:24px;z-index:300;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;border:1px solid rgba(43,227,155,.45);background:rgba(19,28,49,.96);box-shadow:var(--shadow-2);font-size:.9rem;font-weight:500;transform:translate(-50%,140%);opacity:0;transition:transform .45s var(--ease-out),opacity .3s;pointer-events:none} .toast.on{transform:translate(-50%,0);opacity:1} .toast .i{color:var(--emerald)} /* ========================================================================== HOME — hero ========================================================================== */ .hero{position:relative;isolation:isolate;overflow:hidden;margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + clamp(28px,5.5vh,84px)) 0 clamp(20px,3.5vh,40px);min-height:min(100svh,1000px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4.5vh,56px)} .hero__bg{position:absolute;inset:0;z-index:-3;background: radial-gradient(60% 55% at 82% 62%,rgba(43,227,155,.20),transparent 62%), radial-gradient(45% 45% at 96% 18%,rgba(55,207,224,.16),transparent 64%), radial-gradient(40% 40% at 55% 105%,rgba(154,136,255,.12),transparent 70%), linear-gradient(180deg,#070a12 0%,#08101c 100%)} .hero__bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(150,180,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,230,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 20%,transparent 75%)} .hero__stage{position:absolute;inset:0;z-index:-2;pointer-events:none} .hero__fallback{position:absolute;right:2%;bottom:16%;width:min(58%,820px);height:auto;opacity:.75} .hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease-out)} .hero__canvas.is-ready{opacity:1} .hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,10,18,.9) 0%,rgba(7,10,18,.66) 40%,rgba(7,10,18,0) 66%),linear-gradient(180deg,rgba(7,10,18,0) 60%,rgba(7,10,18,.85) 100%)} .hero__inner{position:relative} .hero__eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;margin-bottom:22px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(10,15,27,.6);font-size:.85rem;color:var(--text-2)} .hero__eyebrow b{font-weight:600;color:var(--text)} .hero__title{font-size:var(--fs-h1);font-weight:600;line-height:.98;letter-spacing:-.045em;max-width:12ch} .hero__title .grad-text{background-size:200% 100%;animation:sheen 9s ease-in-out infinite} @keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .js .hero__title .grad-text{animation:word-in 1.05s var(--ease-out) forwards,sheen 9s ease-in-out 1.4s infinite;animation-delay:calc(var(--i,0) * 110ms + 120ms),1.4s} .hero__lede{margin-top:22px;max-width:62ch;font-size:clamp(1.05rem,.45vw + .95rem,1.24rem);line-height:1.62;color:var(--text-2)} .hero__lede strong{color:var(--text)} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero__cta .btn{min-height:52px;padding:0 26px;font-size:1.02rem} .js .hero__fade{opacity:0;transform:translateY(16px);animation:fade-up .9s var(--ease-out) forwards;animation-delay:calc(var(--d,0) * 120ms + 700ms)} @keyframes fade-up{to{opacity:1;transform:none}} /* live stat strip */ .stat-strip{border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(15,22,39,.86),rgba(10,15,27,.9));box-shadow:var(--shadow-2);overflow:hidden} .stat-strip__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 20px;border-bottom:1px solid var(--line)} .live-badge{display:inline-flex;align-items:center;gap:10px;font:500 .74rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)} .live-badge .live-dot{animation:none;background:var(--text-3)} .live-badge.is-live .live-dot{animation:ping 2s infinite;background:var(--emerald)} .live-badge.is-live{color:var(--emerald)} .stat-strip__src{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.8rem;color:var(--text-3);transition:color .2s} .stat-strip__src:hover{color:var(--emerald)} .stat-strip__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0} .stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:18px 20px 20px;border-left:1px solid var(--line);min-width:0} .stat:first-child{border-left:0} .stat dt{font-size:.78rem;color:var(--text-3);letter-spacing:.02em} .stat dd{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:600 clamp(1.3rem,1.1vw + .85rem,1.9rem)/1.1 var(--font-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap} .stat dd .unit{font:500 .78rem/1 var(--font-text);color:var(--text-3);letter-spacing:0} .stat--accent dd{color:var(--emerald)} /* ---------- proof bar ---------- */ .proof{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--line)} .proof li{display:flex;align-items:center;gap:14px;padding:20px 22px;background:var(--bg-2);font-size:.95rem;color:var(--text-2);line-height:1.45} .proof li b{color:var(--text)} .proof__icon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--emerald);background:var(--emerald-a);border:1px solid rgba(43,227,155,.24)} .proof__icon .i{width:20px;height:20px} /* ---------- orbit (STEP at the centre) ---------- */ .orbit{position:relative;width:min(100%,540px);aspect-ratio:1;margin-inline:auto;container-type:inline-size} .orbit__halo{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(43,227,155,.22),rgba(55,207,224,.06) 45%,transparent 70%);filter:blur(6px)} @property --spin{syntax:"";inherits:true;initial-value:0deg} .orbit__ring{position:absolute;border-radius:50%;border:1px solid var(--line-2);animation:orbit-spin var(--dur) linear infinite} @keyframes orbit-spin{to{--spin:360deg}} .orbit__ring--outer{inset:3%;--dur:110s;--r:47cqw;border-style:dashed;border-color:rgba(150,180,230,.16)} .orbit__ring--inner{inset:21%;--dur:74s;--r:29cqw;--dir:-1;border-color:rgba(43,227,155,.2)} .orbit__node{--a:calc(var(--k) * 360deg / var(--n) + var(--o,0deg) + var(--spin) * var(--dir,1));position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))} .orbit__node>span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;translate:-50% -50%;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(13,20,36,.94);font:600 clamp(.66rem,2.2cqw,.84rem)/1 var(--font-text);white-space:nowrap;box-shadow:0 8px 22px -10px rgba(0,0,0,.8)} .orbit__node>span>i{display:block;width:7px;height:7px;border-radius:50%;background:var(--c,var(--emerald));box-shadow:0 0 10px var(--c,var(--emerald))} .orbit__core{position:absolute;inset:36%;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#1b2a47,#0b1222 70%);border:1px solid rgba(43,227,155,.4);box-shadow:0 0 0 10px rgba(43,227,155,.05),0 0 60px rgba(43,227,155,.35),inset 0 1px 0 rgba(255,255,255,.12)} .orbit__core strong{font:700 clamp(1.2rem,6.5cqw,2.2rem)/1 var(--font-display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .orbit__core small{display:block;margin-top:6px;font:400 clamp(.58rem,2.1cqw,.76rem)/1.2 var(--font-mono);color:var(--text-2)} .orbit__pulse{position:absolute;inset:36%;border-radius:50%;border:1px solid rgba(43,227,155,.5);animation:pulse-ring 3.6s var(--ease-out) infinite} .orbit__pulse+.orbit__pulse{animation-delay:1.8s} @keyframes pulse-ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.15);opacity:0}} .orbit:hover .orbit__ring{animation-play-state:paused} /* six layer cards */ .layers{margin-top:clamp(40px,6vw,72px)} .layer .card__title{display:flex;align-items:center;gap:10px} /* ---------- timeline (journey) ---------- */ .timeline{--spine:190px;--p:1;position:relative;list-style:none;max-width:1000px;margin-inline:auto} .timeline::before,.timeline::after{content:"";position:absolute;top:14px;bottom:30px;left:calc(var(--spine) + 24px + 11px);width:2px;border-radius:2px} .timeline::before{background:var(--line-2)} .timeline::after{background:linear-gradient(180deg,var(--emerald),var(--teal) 55%,var(--gold) 80%,var(--violet));transform-origin:top;transform:scaleY(var(--p));box-shadow:0 0 14px rgba(43,227,155,.55)} .js .timeline{--p:0} .tl-item{position:relative;display:grid;grid-template-columns:var(--spine) 24px minmax(0,1fr);grid-template-areas:"when node body";column-gap:24px;padding-bottom:26px} .tl-when{grid-area:when;text-align:right;padding-top:6px;display:flex;flex-direction:column;align-items:flex-end;gap:10px} .tl-date{font:600 1.25rem/1 var(--font-display);letter-spacing:-.02em;color:var(--text)} .tl-node{grid-area:node;position:relative;z-index:1;width:24px;height:24px;margin-top:4px;border-radius:50%;background:var(--bg-2);border:2px solid var(--line-3);transition:border-color .5s,box-shadow .5s,background-color .5s} .tl-node::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--line-3);transition:background-color .5s} .tl-body{grid-area:body;padding:20px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--bg-2);transition:border-color .5s,transform .6s var(--ease-out)} .tl-body h3{font-size:var(--fs-h3);margin-bottom:8px} .tl-body p,.tl-body li{color:var(--text-2);font-size:.95rem} .tl-body ul{list-style:none;display:grid;gap:6px;margin-top:8px} .tl-body ul li{position:relative;padding-left:18px} .tl-body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.45;rotate:45deg} .tl-body code{color:var(--text);font-size:.86em;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.06)} .tl-item.is-lit .tl-node,.tl-item.is-lit .tl-node::after{border-color:var(--c,var(--emerald))} .tl-item.is-lit .tl-node{box-shadow:0 0 0 6px color-mix(in srgb,var(--c,var(--emerald)) 14%,transparent),0 0 20px color-mix(in srgb,var(--c,var(--emerald)) 55%,transparent)} .tl-item.is-lit .tl-node::after{background:var(--c,var(--emerald))} .tl-item.is-lit .tl-body{border-color:color-mix(in srgb,var(--c,var(--emerald)) 28%,transparent)} .tl-item[data-status="build"]{--c:var(--teal)} .tl-item[data-status="next"]{--c:var(--gold)} .tl-item[data-status="y2027"]{--c:var(--violet)} .tl-item[data-status="vision"]{--c:#c3cde0} .tl-item[data-status="build"].is-lit .tl-node::after{animation:blink 1.4s infinite} .timeline-foot{display:flex;justify-content:center;margin-top:20px} /* ---------- the math ---------- */ .formula{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 22px;padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);border-radius:var(--r-xl);border:1px solid rgba(43,227,155,.24);background:radial-gradient(120% 140% at 0% 0%,rgba(43,227,155,.10),transparent 55%),var(--bg-2);box-shadow:var(--shadow-2)} .formula__term{display:flex;flex-direction:column;gap:8px;min-width:0} .formula__term>span:first-child{font:600 clamp(1.5rem,2.6vw + .6rem,3rem)/1 var(--font-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap} .formula__term>span:first-child small{font:500 .42em/1 var(--font-text);color:var(--text-3);letter-spacing:0;margin-left:6px} .formula__k{font:400 .74rem/1.2 var(--font-mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.1em} .formula__op{font:300 clamp(1.5rem,2.6vw + .6rem,3rem)/1 var(--font-display);color:var(--emerald);padding-top:0} .formula-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin:14px 4px 0} .mech{list-style:none;display:grid;gap:4px} .mech li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)} .mech li:last-child{border-bottom:0} .mech__icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--emerald);background:var(--emerald-a);border:1px solid rgba(43,227,155,.22)} .mech__icon .i{width:22px;height:22px} .mech h3{font-size:1.08rem;margin-bottom:5px} .mech p{color:var(--text-2);font-size:.95rem} .mech .effect{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:500 .8rem/1.3 var(--font-mono);color:var(--emerald)} .sim{padding:clamp(20px,2.4vw,30px)} .sim__head h3{font-size:1.15rem;margin-bottom:4px} .sim__head p{font-size:.86rem;color:var(--text-3)} .ratchet{margin:18px 0 6px;width:100%;height:auto;overflow:visible} .ratchet .grid-l{stroke:rgba(150,180,230,.08);stroke-width:1} .ratchet .curve{fill:none;stroke:url(#g-curve);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0} .ratchet .floor{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:5 6;opacity:.9} .ratchet .area{fill:url(#g-area)} .ratchet .tx circle{fill:#0b1222;stroke:var(--emerald);stroke-width:1.5} .ratchet .tx text{font:600 11px var(--font-mono);fill:var(--text);text-anchor:middle;dominant-baseline:central} .ratchet .head{fill:#eafff6;filter:drop-shadow(0 0 6px rgba(43,227,155,.9))} .js .ratchet .curve{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-in-out)} .js .ratchet .area,.js .ratchet .floor,.js .ratchet .tx{opacity:0;transition:opacity .8s var(--ease-out)} .js .ratchet .tx{transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)} .js .in .ratchet .curve{stroke-dashoffset:0} .js .in .ratchet .area{opacity:1;transition-delay:1.2s} .js .in .ratchet .floor{opacity:.9;transition-delay:.4s} .js .in .ratchet .tx{opacity:1;transform:none;transition-delay:calc(var(--d,0) * 260ms + 600ms)} .legend-inline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--text-3)} .legend-inline span{display:inline-flex;align-items:center;gap:8px} .legend-inline i{display:inline-block;width:16px;height:3px;border-radius:2px;background:var(--grad)} .legend-inline i.dash{height:0;border-top:2px dashed var(--gold);background:none} .table-wrap{width:100%;overflow-x:auto;margin-top:18px;-webkit-overflow-scrolling:touch} .table{width:100%;border-collapse:collapse;font-size:.9rem} .table caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:.82rem;color:var(--text-3)} .table th{padding:10px 10px 10px 0;text-align:left;font:500 .7rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);border-bottom:1px solid var(--line-2);white-space:nowrap} .table td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.84rem;color:var(--text);vertical-align:middle} .table td:first-child,.table th[scope="row"]{font-family:var(--font-text);font-weight:600;font-size:.9rem;letter-spacing:-.005em} .table th[scope="row"]{text-transform:none;letter-spacing:-.005em;color:var(--text);border-bottom:1px solid var(--line)} .table tr:last-child td,.table tr:last-child th{border-bottom:0} .pos{color:var(--emerald)} .bar{position:relative;display:block;width:100%;min-width:60px;height:6px;margin-top:7px;border-radius:4px;background:rgba(150,180,230,.08);overflow:hidden} .bar>i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);border-radius:inherit;background:var(--grad);box-shadow:0 0 10px rgba(43,227,155,.6)} .js .bar>i{width:0;transition:width 1.3s var(--ease-out);transition-delay:calc(var(--d,0) * 150ms + 300ms)} .js .in .bar>i{width:calc(var(--v) * 1%)} .note{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);font-size:.8rem;line-height:1.6;color:var(--text-3)} /* ---------- money flows ---------- */ .flows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)} .flow{margin:0;display:flex;flex-direction:column} .flow__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px} .flow__head h3{font-size:1.2rem;margin-bottom:4px} .flow__head p{font-size:.88rem;color:var(--text-3)} .flow__svg{width:100%;height:auto;margin:14px 0 10px;overflow:visible} .flow__svg .rib{opacity:.38;transition:opacity .3s} .flow__svg .node{rx:3} .flow__svg text{font:600 13px var(--font-mono);fill:var(--text)} .flow__svg text.k{font:500 10.5px var(--font-text);fill:var(--text-3);letter-spacing:.04em;text-transform:uppercase} .flow__svg .dot{filter:drop-shadow(0 0 4px currentColor)} .js .flow__draw{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s var(--ease-in-out)} .js .in .flow__draw{clip-path:inset(0 0 0 0)} .flow__legend{list-style:none;display:grid;gap:2px;margin-top:auto} .flow__legend li{display:grid;grid-template-columns:12px 58px minmax(0,1fr);align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line)} .flow__legend li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);box-shadow:0 0 10px var(--c);align-self:center} .flow__legend b{font:600 1.05rem/1 var(--font-display);color:var(--text);font-variant-numeric:tabular-nums} .flow__legend span{font-size:.9rem;color:var(--text-2)} .flow__legend em{font-style:normal;color:var(--text-3);font-size:.82rem} .flow__note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:.86rem;color:var(--text-2)} .flow__note .i{color:var(--emerald);margin-top:2px} /* ---------- boxes ---------- */ .steps{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end} .step{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(158px + var(--i) * 30px);padding:18px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(43,227,155,calc(.02 + var(--i) * .018)),rgba(255,255,255,.01) 70%),var(--bg-2);overflow:hidden} .step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:calc(.25 + var(--i) * .13)} .step__n{font:500 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} .step__name{margin-top:8px;font:600 1.02rem/1.2 var(--font-display);letter-spacing:-.01em} .step__price{margin-top:6px;font:700 clamp(1.4rem,1.5vw + .7rem,2rem)/1 var(--font-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums} .step__months{display:inline-flex;align-self:flex-start;margin-top:12px;padding:5px 9px;border-radius:8px;background:var(--emerald-a);color:var(--emerald);font:600 .76rem/1.2 var(--font-mono)} .step--vip{border-color:transparent;background:radial-gradient(110% 60% at 50% 0%,rgba(232,196,119,.12),transparent 72%),var(--bg-2)} .step>.card__ring{inset:0} .step::after{content:attr(data-n);position:absolute;right:14px;top:10px;z-index:-1;font:700 clamp(2.4rem,3.2vw,3.6rem)/1 var(--font-display);letter-spacing:-.05em;color:rgba(150,180,230,.07)} .step--vip::after{color:rgba(232,196,119,.14)} .step--vip .step__months{background:var(--gold-a);color:var(--gold)} .js .steps .step{opacity:0;translate:0 40px;transition:opacity .7s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--i) * 110ms)} .js .in .steps .step,.js .steps.in .step,.reveal-all .steps .step{opacity:1;translate:none} .months{margin-top:22px;padding:20px 22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2)} .months__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-bottom:14px;font-size:.92rem;color:var(--text-2)} .months__top b{color:var(--text)} .months__bar{display:flex;gap:3px;height:14px} .months__bar>i{flex:var(--m) 1 0;min-width:4px;border-radius:4px;background:var(--grad);opacity:calc(.4 + var(--k) * .12);transform-origin:left;transition:transform .9s var(--ease-out);transition-delay:calc(var(--k) * 120ms + 200ms)} .js .months__bar>i{transform:scaleX(0)} .js .in .months__bar>i{transform:none} .months__scale{display:flex;justify-content:space-between;margin-top:8px;font:400 .72rem/1 var(--font-mono);color:var(--text-3)} .boxes-cards{margin-top:clamp(20px,2.4vw,28px)} .legs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;margin:18px 0 20px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--line)} .legs__k{font:500 .74rem/1 var(--font-mono);color:var(--text-3);letter-spacing:.06em;text-transform:uppercase} .legs__bar{position:relative;height:12px;border-radius:6px;background:rgba(150,180,230,.08);overflow:hidden} .legs__bar>i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:rgba(150,180,230,.35);transition:width 1.2s var(--ease-out)} .legs__bar--weak>i{background:var(--grad);box-shadow:0 0 12px rgba(43,227,155,.7)} .js .legs__bar>i{width:0} .js .in .legs__bar>i{width:var(--w)} .legs__cap{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--emerald)} /* ---------- AI products ---------- */ .product{display:flex;flex-direction:column;gap:14px} .product__top{display:flex;align-items:center;gap:14px} .product__logo{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font:700 1.45rem/1 var(--font-display);color:#06121a;background:var(--pc);box-shadow:0 10px 28px -10px var(--pc)} .product__name{font-size:1.35rem} .product__url{font:400 .8rem/1.3 var(--font-mono);color:var(--text-3)} .product__top .pill{margin-left:auto} .product__line{font-size:1rem!important;color:var(--text)!important;font-weight:500} .product__line em{font-style:normal;color:var(--text-2);font-weight:400} .product .checks{margin-top:2px} .product .link-arrow{margin-top:auto;color:var(--pc)} .product--irona{--pc:#2be39b} .product--psyvora{--pc:#37cfe0} .product--taskora{--pc:#e8c477} .product--sonexa{--pc:#9a88ff} .product.card::before{background:radial-gradient(260px circle at var(--mx) var(--my),var(--pc),transparent 62%)} .shared{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:20px 40px;align-items:center;margin-top:clamp(18px,2vw,24px);padding:clamp(22px,2.6vw,32px);border-radius:var(--r-xl);border:1px solid var(--line-2);background:radial-gradient(90% 160% at 0% 50%,rgba(55,207,224,.09),transparent 60%),var(--bg-2)} .shared h3{font-size:1.45rem;margin-bottom:8px} .shared p{color:var(--text-2);font-size:.95rem} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:.86rem;color:var(--text)} .chip .i{color:var(--emerald);width:16px;height:16px} /* ---------- NFT tiers ---------- */ .tiers-card{padding:clamp(20px,2.4vw,28px)} .tiers-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 20px;margin-bottom:16px} .tiers-head h3{font-size:1.15rem} .tiers-head .faint{font-size:.8rem} .tiers-count{font:600 2.1rem/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .tiers-count small{font:500 .9rem/1 var(--font-text);color:var(--text-3);letter-spacing:0} .tiers{list-style:none;display:grid;gap:7px} .tier{display:grid;grid-template-columns:148px minmax(0,1fr) 92px;align-items:center;gap:14px;font-size:.88rem} .tier__name{display:flex;align-items:center;gap:8px;font-weight:600} .tier__name i{width:9px;height:9px;border-radius:3px;background:var(--tc);box-shadow:0 0 8px var(--tc);flex:none} .tier__track{position:relative;height:22px;border-radius:7px;background:rgba(150,180,230,.06);overflow:hidden;border:1px solid var(--line)} .tier__fill{position:absolute;inset:0 auto 0 0;width:calc(var(--f) * 1%);background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,transparent),var(--tc));opacity:.85;transition:width 1.2s var(--ease-out);transition-delay:calc(var(--k) * 90ms + 200ms)} .js .tier__fill{width:0} .js .in .tier__fill{width:calc(var(--f) * 1%)} .tier__ids{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:400 .7rem/1 var(--font-mono);color:rgba(238,243,251,.85);text-shadow:0 1px 2px rgba(0,0,0,.7)} .tier__price{text-align:right;font:400 .82rem/1 var(--font-mono);color:var(--text)} .tier__price small{color:var(--text-3);font-size:.7rem} .tier.is-current .tier__track{border-color:var(--tc);box-shadow:0 0 0 1px var(--tc),0 0 16px color-mix(in srgb,var(--tc) 40%,transparent)} .tier-yield{display:inline-flex;align-items:center;gap:6px;margin-left:4px;padding:2px 6px;border-radius:6px;background:var(--gold-a);color:var(--gold);font:600 .58rem/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase} .tiers-foot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:.8rem;color:var(--text-3)} .tiers-foot span{display:inline-flex;align-items:center;gap:7px} .mini-list{list-style:none;display:grid;gap:14px;margin-top:28px} .mini-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start} .mini-list .mech__icon{width:44px;height:44px;border-radius:13px} .mini-list h3{font-size:1.02rem;margin-bottom:3px} .mini-list p{font-size:.93rem;color:var(--text-2)} /* ---------- governance track ---------- */ .track{--tp:var(--tp-end,.17);list-style:none;position:relative;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:16px;margin-bottom:clamp(20px,2.4vw,28px)} .track::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;background:var(--line-2)} .track::after{content:"";position:absolute;left:24px;top:23px;height:2px;width:calc((100% - 48px) * var(--tp));background:linear-gradient(90deg,var(--emerald),var(--teal));box-shadow:0 0 12px rgba(43,227,155,.6);transition:width 1.6s var(--ease-out)} .js .track{--tp:0} .js .in .track,.js .track.in{--tp:var(--tp-end,.17)} .track li{position:relative;z-index:1} .track__dot{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;margin-bottom:14px;background:var(--bg-2);border:2px solid var(--line-3);color:var(--text-3)} .track__dot .i{width:20px;height:20px} .track li.is-done .track__dot{border-color:var(--emerald);color:var(--emerald);background:#0b1a1a;box-shadow:0 0 0 6px rgba(43,227,155,.1),0 0 24px rgba(43,227,155,.45)} .track li.is-next .track__dot{border-color:var(--gold);color:var(--gold)} .track h3{font-size:1.02rem;margin-bottom:6px} .track p{font-size:.88rem;color:var(--text-2)} .track .pill{margin-bottom:10px} .addr{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)} .addr+.addr{margin-top:8px} .addr__name{flex:none;min-width:0;font-weight:600;font-size:.88rem} .addr__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .78rem/1 var(--font-mono);color:var(--text-3);text-align:right} .icon-btn{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text-2);cursor:pointer;transition:color .2s,border-color .2s,background-color .2s} .icon-btn:hover{color:var(--emerald);border-color:rgba(43,227,155,.5);background:rgba(43,227,155,.06)} .icon-btn .i{width:17px;height:17px} .icon-btn.is-done{color:var(--emerald);border-color:var(--emerald)} /* ---------- FAQ ---------- */ .faq{max-width:860px;margin-inline:auto;display:grid;gap:10px} .faq details{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2);transition:border-color .3s,background-color .3s;interpolate-size:allow-keywords} .faq details[open]{border-color:rgba(43,227,155,.3);background:linear-gradient(180deg,rgba(43,227,155,.05),transparent),var(--bg-2)} .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 22px;cursor:pointer;font:600 1.05rem/1.35 var(--font-display);letter-spacing:-.01em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab8cf' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .35s var(--ease-out)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete} .faq details[open]::details-content{block-size:auto} .faq__a{padding:0 22px 20px;color:var(--text-2);font-size:.97rem;max-width:72ch} /* ---------- builders ---------- */ .builders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .builder{text-align:center;padding:24px 18px} .builder__av{width:60px;height:60px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:var(--emerald);background:radial-gradient(circle at 35% 30%,rgba(43,227,155,.22),rgba(55,207,224,.06));border:1px solid rgba(43,227,155,.24)} .builder__av .i{width:24px;height:24px} .builder__role{font:500 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)} .builder__alias{margin:8px 0 4px;font:600 1.12rem/1.2 var(--font-display)} .builder p{font-size:.86rem;color:var(--text-3)} /* ---------- final CTA ---------- */ .cta-panel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,6vw,84px) clamp(22px,5vw,72px);border-radius:var(--r-xl);border:1px solid rgba(43,227,155,.25);text-align:center;background:radial-gradient(70% 90% at 50% 0%,rgba(43,227,155,.16),transparent 65%),radial-gradient(60% 80% at 100% 100%,rgba(55,207,224,.10),transparent 60%),var(--bg-2);box-shadow:var(--shadow-2)} .cta-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 55px,rgba(150,180,230,.045) 55px 56px);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)} .cta-panel h2{font-size:var(--fs-h2);max-width:16ch;margin:0 auto 18px} .cta-panel .lede{margin:0 auto} .cta-panel .hero__cta{justify-content:center} .cta-steps{position:absolute;right:-20px;bottom:-10px;z-index:-1;width:min(46%,420px);opacity:.5} /* ---------- footer ---------- */ .site-footer{position:relative;margin-top:clamp(40px,6vw,80px);padding:clamp(48px,6vw,72px) 0 32px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,15,27,.4),rgba(5,8,14,.9))} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.45fr;gap:36px} .foot-brand p{margin-top:16px;color:var(--text-2);font-size:.92rem;max-width:36ch} .foot-h{margin:0 0 14px;font:600 .74rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} .foot-links{list-style:none;display:grid;gap:2px} .foot-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text-2);font-size:.93rem;transition:color .2s} .foot-links a:hover{color:var(--emerald)} .foot-contact{display:grid;gap:2px;margin-top:20px;font-size:.88rem;color:var(--text-2)} .foot-contact>*{display:inline-flex;align-items:center;min-height:44px} .foot-contact a{color:var(--text)} .foot-contact a:hover{color:var(--emerald)} .foot-contact .i{color:var(--emerald);margin-right:8px} .foot-soon{display:inline-flex;align-items:center;gap:8px} .foot-addrs .addr{padding:6px 6px 6px 12px;border-radius:12px} .foot-addrs .addr+.addr{margin-top:6px} .foot-addrs .addr__name{font-size:.82rem;font-weight:500;color:var(--text-2)} .foot-addrs .icon-btn{width:44px;height:44px} .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:.84rem;color:var(--text-3)} .disclaimer{margin-top:18px;font-size:.78rem;line-height:1.65;color:var(--text-3);max-width:110ch} /* ========================================================================== Inner pages (Phase B) — a compact page header that pairs with the home hero ========================================================================== */ .page-hero{position:relative;isolation:isolate;overflow:hidden;margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + clamp(56px,8vw,104px)) 0 clamp(40px,5vw,64px)} .page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 70% at 85% 0%,rgba(43,227,155,.16),transparent 65%),radial-gradient(40% 60% at 0% 20%,rgba(55,207,224,.08),transparent 60%)} .page-hero h1{font-size:clamp(2.5rem,4.6vw + 1rem,4.6rem);line-height:1.02;letter-spacing:-.04em;max-width:18ch} .page-hero .lede{margin-top:22px} .crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;font:400 .78rem/1 var(--font-mono);color:var(--text-3)} .crumbs a:hover{color:var(--emerald)} /* ========================================================================== Inner-page components (Phase B) PROCESS
    steps joined by arrows (DAO mechanics) CTABLE contract table; rows become cards < 768px CODEBLOCK 
    …
    DOC
    …
    PLANS