@import url("./tokens.generated.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;line-height:1.55;background:linear-gradient(180deg,#101828 0,var(--bg) 780px) no-repeat,var(--bg)}


a{color:inherit;text-decoration:none}
button,input{font:inherit}
.wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.narrow{width:min(780px,calc(100% - 40px));margin-inline:auto}
.skip{position:fixed;top:-70px;left:16px;z-index:100;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:var(--r-md)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.site-head{position:sticky;top:0;z-index:50;background:rgba(11,17,30,.76);backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid var(--line)}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center}
.brand-lockup{height:32px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:.86rem;font-weight:680}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-signin{margin-right:2px}
.mobile-toggle{display:none;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);width:42px;height:42px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:var(--r-md);font-weight:760;border:1px solid transparent;transition:transform .16s var(--ease),filter .16s var(--ease),border-color .16s var(--ease)}
.button:hover{transform:translateY(-1px)}
.button.primary{background:linear-gradient(180deg,var(--accent),var(--accent-strong));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(4,10,22,.5),0 12px 28px -14px rgba(61,126,199,.6)}
.button.primary:hover{filter:brightness(1.08)}
.button.ghost{background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-color:var(--glass-border);color:var(--text);box-shadow:var(--glass-edge)}
.button.ghost:hover{border-color:var(--accent-line);background:linear-gradient(165deg,rgba(24,35,58,.74),rgba(17,26,43,.64))}
.button.small{min-height:40px;padding:0 15px;font-size:.82rem}


h1,h2,h3,p{margin-top:0}
h1,h2{font-weight:800;text-wrap:balance}
h1{font-size:clamp(3.4rem,6.6vw,6.4rem);line-height:.9;letter-spacing:-.03em;margin-bottom:28px}
h2{font-size:clamp(2.2rem,4.2vw,4.2rem);line-height:.95;letter-spacing:-.025em;margin-bottom:20px}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.012em;margin-bottom:8px}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.55;color:var(--muted);max-width:680px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fine{color:var(--faint);font-size:.76rem;line-height:1.5}
.blue{color:var(--accent)}
.hero{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:72px;padding:72px 0 88px;position:relative}
.hero h1{font-size:clamp(3.9rem,5.8vw,6.15rem)}
.hero-copy{position:relative;z-index:2}
.hero-note{display:flex;align-items:center;margin-top:22px;color:var(--faint);font-size:.74rem}

.stage{position:relative;padding:28px;isolation:isolate;perspective:1400px;margin-inline:-22px}
.stage::before{content:"";position:absolute;left:14%;right:4%;bottom:2px;height:64px;z-index:0;border-radius:50%;background:radial-gradient(60% 100% at 50% 0,rgba(90,155,224,.16),transparent 70%);filter:blur(14px)}
.stage::after{content:"";position:absolute;left:28px;top:12%;bottom:12%;width:1px;z-index:5;background:linear-gradient(180deg,transparent,var(--accent-line) 22%,var(--accent-line) 74%,transparent);opacity:.7}
.gifty-host{position:absolute;left:-34px;bottom:14px;width:158px;height:158px;z-index:4;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;will-change:opacity,transform}
.gifty-host[data-ready]{opacity:1;transform:none}
.window{position:relative;background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;overflow:hidden;box-shadow:0 32px 90px -42px #000,0 0 0 1px rgba(255,255,255,.02) inset}
.window-bar{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(24,35,58,.72)}
.traffic{display:flex;gap:5px}
.traffic i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.window-title{font-size:.72rem;color:var(--muted);font-weight:700}
.window-status{justify-self:end;font-size:.65rem;color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:99px;padding:5px 8px;font-weight:780}
.app-layout{display:grid;grid-template-columns:150px 1fr;min-height:430px}
.app-side{padding:18px 12px;border-right:1px solid var(--line);background:rgba(11,17,30,.35);display:flex;flex-direction:column;gap:4px}
.app-side b{font-size:.75rem;padding:8px 10px;margin-bottom:7px}
.app-nav{padding:9px 10px;border-radius:10px;color:var(--muted);font-size:.72rem}
.app-nav.active{background:var(--accent-soft);color:var(--accent);font-weight:750}
.app-main{padding:18px;display:flex;flex-direction:column;gap:12px}
.app-welcome{display:flex;align-items:center;justify-content:space-between;gap:15px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--accent-strong);display:grid;place-items:center;font-weight:850;color:#fff;flex:0 0 auto}
.identity{display:flex;align-items:center;gap:11px}
.identity b{display:block;font-size:.82rem}
.identity>span:not(.avatar) span{display:block;color:var(--muted);font-size:.66rem;margin-top:3px}
.chip{padding:7px 10px;border-radius:99px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font-size:.65rem;font-weight:740}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.metric{border:1px solid var(--line);background:var(--sheen),var(--raised);border-radius:13px;padding:13px;box-shadow:var(--elev-flat)}
.metric span{color:var(--muted);font-size:.61rem;text-transform:uppercase;letter-spacing:.06em}
.metric b{font-size:1.25rem;display:block;margin-top:8px}
.spark{height:3px;background:rgba(255,255,255,.06);border-radius:99px;margin-top:11px;overflow:hidden}
.spark i{display:block;width:70%;height:100%;background:var(--accent);border-radius:inherit}
.composer{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px}
.composer-head{display:flex;justify-content:space-between;font-size:.7rem;font-weight:750}
.composer p{color:var(--muted);font-size:.7rem;line-height:1.45;margin:12px 0}
.composer-foot{display:flex;justify-content:space-between;align-items:center}
.dots{color:var(--faint);letter-spacing:.15em}
.mini-button{padding:7px 10px;border:0;border-radius:9px;background:var(--accent-strong);color:#fff;font-size:.65rem;font-weight:750}
.app-feed{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.feed-item{background:var(--raised);border:1px solid var(--line);border-radius:13px;padding:12px}
.feed-item b{font-size:.7rem}
.feed-item p{font-size:.62rem;color:var(--muted);line-height:1.4;margin:5px 0 0}
.logo-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;color:var(--faint);background:linear-gradient(180deg,rgba(226,236,250,.028),transparent);box-shadow:inset 0 1px 0 rgba(226,236,250,.05)}
.logo-row{display:flex;justify-content:space-between;gap:30px;align-items:center}
.logo-row p{margin:0;font-size:.74rem}
.principles{display:flex;gap:26px;flex-wrap:wrap;font-size:.72rem;font-weight:750;color:var(--muted)}
.principles span::before{content:"✓";color:var(--accent);margin-right:7px}
.section{padding:112px 0;border-bottom:0;position:relative;isolation:isolate}
.section-head{display:grid;grid-template-columns:1fr .75fr;gap:70px;align-items:end;margin-bottom:54px}
.section-head p{margin:0;color:var(--muted);line-height:1.6}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;min-height:210px;display:flex;flex-direction:column;background:var(--sheen),var(--surface);box-shadow:var(--elev-raised);transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease)}
.tile.large{grid-column:span 7;min-height:360px}
.tile.medium{grid-column:span 5;min-height:360px}
.tile.third{grid-column:span 4;min-height:250px}
.tile.third h3{margin-top:18px}
.tile.third p{margin-top:auto;margin-bottom:0}
.tile .tile-label{display:flex;align-items:center;gap:12px;color:var(--accent);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.tile .tile-label::after{content:"";height:1px;width:42px;background:var(--accent-line);display:inline-block;margin:0 0 3px 10px}
.tile h3{font-size:1.5rem;margin-top:16px;max-width:none;text-wrap:balance}
.tile p{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:430px}
.tile-bottom{position:absolute;left:28px;right:28px;bottom:26px}
.mini-window{border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden;margin-top:30px;box-shadow:inset 0 2px 8px rgba(4,10,22,.6),inset 0 1px 0 rgba(4,10,22,.8)}
.mini-bar{height:34px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 11px;gap:5px}
.mini-bar i{width:6px;height:6px;background:var(--faint);border-radius:50%}
.mini-body{padding:14px;display:grid;gap:8px}
.line{height:9px;background:var(--raised);border-radius:6px}
.line.blue-line{width:62%;background:var(--accent-soft);border:1px solid rgba(90,155,224,.18)}
/* Fill widths for illustrative skeleton bars (.line) and meter/spark fills
   (.spark i). Named utility classes replace per-element inline width styles so
   markup carries no `style=` attributes. Values are the discrete steps the
   mockups use. */
.fill-48{width:48%}
.fill-58{width:58%}
.fill-76{width:76%}
.fill-81{width:81%}
.fill-82{width:82%}
.fill-88{width:88%}
.media-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}
.video-window{aspect-ratio:16/10}
.video-surface{height:calc(100% - 48px);display:grid;place-items:center;background:var(--bg);position:relative;box-shadow:inset 0 3px 16px rgba(4,10,22,.75)}
.video-surface::before{content:"";position:absolute;inset:16px;border:1px dashed var(--line-strong);border-radius:13px}
.play{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font-size:1.1rem;padding-left:3px}
.video-caption{position:absolute;left:28px;bottom:24px;right:28px}
.video-caption b{display:block;font-size:.9rem}
.video-caption span{display:block;color:var(--muted);font-size:.7rem;margin-top:5px;max-width:360px;line-height:1.4}
.photo-stack{display:grid;gap:14px}
.photo{min-height:180px;background:var(--bg);border:1px dashed var(--line-strong);border-radius:var(--r-xl);padding:18px;position:relative;overflow:hidden;box-shadow:inset 0 3px 12px rgba(4,10,22,.7)}
.photo-tag{position:absolute;left:16px;bottom:15px;background:rgba(11,17,30,.78);backdrop-filter:blur(8px);border:1px solid var(--line);padding:7px 9px;border-radius:9px;font-size:.65rem;color:#b2c1d6;border-color:var(--line-strong)}
.step-list{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--sheen),var(--surface);box-shadow:inset 0 1px 0 rgba(226,236,250,.07),6px 6px 0 -1px rgba(24,35,58,.85),7px 7px 0 0 var(--line),0 28px 64px -30px rgba(4,10,22,.85);position:relative}
.step{padding:28px;min-height:250px;border-right:1px solid var(--line);display:flex;flex-direction:column;position:relative;background:linear-gradient(180deg,rgba(226,236,250,.022),transparent 38%)}
.step:last-child{border:0}
.step-num{font-size:.68rem;color:var(--accent);font-weight:820;position:relative}
.step h3{font-size:1.45rem;margin-top:auto}
.step p{color:var(--muted);font-size:.86rem;line-height:1.5;margin-bottom:0}
.quote{padding:110px 0;position:relative}
.quote blockquote{font-size:clamp(2.3rem,4.6vw,4.8rem);line-height:1.03;letter-spacing:-.055em;margin:0;max-width:1050px}
.quote p{margin:28px 0 0;color:var(--muted)}
.page-hero{padding:120px 0 92px;border-bottom:1px solid var(--line)}
.page-hero h1{max-width:1000px}
.page-hero .lede{max-width:720px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.prose p{color:var(--muted);font-size:1rem;line-height:1.72}
.checklist{display:grid;gap:12px}
.check{background:var(--sheen),var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;gap:14px;box-shadow:var(--elev-raised);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.check:hover{border-color:var(--line-strong);box-shadow:var(--elev-float)}
.check i{font-style:normal;color:var(--accent)}
.check b{display:block}
.check span{display:block;color:var(--muted);font-size:.82rem;margin-top:5px;line-height:1.45}
.form-card{background:var(--sheen),var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-xl);padding:28px;box-shadow:inset 0 1px 0 rgba(226,236,250,.09),6px 6px 0 -1px rgba(24,35,58,.85),7px 7px 0 0 var(--line),0 30px 70px -28px rgba(4,10,22,.9)}
label{font-size:.77rem;font-weight:720;display:block;margin-bottom:8px}
.field{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;min-height:46px;margin-bottom:16px}
.field:focus{border-color:var(--accent);outline:0}
.form-note{color:var(--faint);font-size:.7rem;line-height:1.45;margin-top:14px}
.site-footer{border-top:1px solid var(--line-strong);padding:62px 0 36px;position:relative;background:linear-gradient(180deg,rgba(4,9,18,.85),rgba(4,9,18,.5));box-shadow:inset 0 1px 0 rgba(226,236,250,.05)}
.footer-top{display:grid;grid-template-columns:1.2fr 2fr;gap:80px;padding-bottom:55px}
.footer-brand p{color:var(--muted);font-size:.88rem;line-height:1.6;max-width:300px;margin-top:18px}
.footer-company{display:grid;gap:6px;margin-top:22px;color:var(--faint);font-size:.76rem;font-style:normal;line-height:1.45}
.footer-company span:first-child{color:var(--text);font-weight:700}
.footer-company a{color:var(--muted);width:max-content}
.footer-company a:hover{color:var(--accent)}
.footer-map{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.footer-col h3{font-size:.73rem;color:var(--text);margin-bottom:16px}
.footer-col a{display:block;color:var(--muted);font-size:.77rem;margin:11px 0}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:30px;color:var(--faint);font-size:.69rem}
.footer-bottom nav{display:flex;gap:18px}
.sitemap-tree{list-style:none;padding:0;margin:40px 0 0}
.sitemap-tree>li{border-top:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:220px 1fr;gap:30px}
.sitemap-tree strong{font-size:1.1rem}
.sitemap-tree ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;color:var(--muted);font-size:.86rem}
.tile:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--elev-float)}
.stage .window::before{content:"";position:absolute;inset:12px -18px -18px 12px;border-right:1px solid rgba(90,155,224,.14);border-bottom:1px solid rgba(90,155,224,.14);border-radius:0 0 22px 0;pointer-events:none}
.stage .window::after{content:"";position:absolute;right:17px;bottom:16px;width:74px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-line));pointer-events:none}
.section::after{content:"";position:absolute;left:50%;top:0;width:min(1200px,calc(100% - 40px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--line-strong) 15%,var(--line-strong) 85%,transparent);opacity:.9}
.step-num::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;border:1px solid var(--accent);background:var(--surface);margin-right:8px;box-shadow:0 0 0 4px var(--accent-soft)}
.quote::before,.quote::after{content:"";position:absolute;top:50%;width:clamp(20px,5vw,90px);height:1px;background:linear-gradient(90deg,transparent,var(--accent-line))}
.quote::before{left:0}
.quote::after{right:0;transform:scaleX(-1)}
:root{--elev-flat:inset 0 1px 0 rgba(226,236,250,.04),inset 0 -1px 0 rgba(4,10,22,.35);--elev-raised:inset 0 1px 0 rgba(226,236,250,.07),inset 0 -1px 0 rgba(4,10,22,.45),0 1px 2px rgba(4,10,22,.5),0 10px 28px -14px rgba(4,10,22,.72);--elev-float:inset 0 1px 0 rgba(226,236,250,.10),inset 0 -1px 0 rgba(4,10,22,.5),0 2px 4px rgba(4,10,22,.5),0 28px 64px -26px rgba(4,10,22,.85);--sheen:linear-gradient(180deg,rgba(226,236,250,.035),rgba(226,236,250,0) 42%);
  /* Glass: reserved for surfaces that sit OVER rich background (hero imagery,
     ambient section light) — not the bento/checklist grid, which stays opaque
     for legibility. Frost + a bright top edge reads as a pane catching light,
     not a translucency effect for its own sake. */
  --glass-fill:linear-gradient(165deg,rgba(24,35,58,.62),rgba(17,26,43,.52));
  --glass-border:rgba(226,236,250,.14);
  --glass-blur:blur(20px) saturate(140%);
  --glass-edge:inset 0 1px 0 rgba(249,251,252,.14),inset 0 -1px 0 rgba(4,10,22,.3);
}
.hero .lede{color:#afc0d8;max-width:620px}
.stage>.window{background:var(--sheen),var(--surface);box-shadow:inset 0 1px 0 rgba(226,236,250,.10),inset 0 -1px 0 rgba(4,10,22,.5),6px 6px 0 -1px rgba(24,35,58,.9),7px 7px 0 0 var(--line),0 30px 70px -28px rgba(4,10,22,.9)}
.tile.large .mini-window{transform:translateY(4px)}
.button,.nav-links a,.faq-grid summary{cursor:pointer}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.status-card{display:flex;gap:16px;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--elev-raised)}
.status-card b{font-size:1rem}
.status-card p{color:var(--muted);font-size:.84rem;line-height:1.55;margin:7px 0 0}
.status-dot{width:11px;height:11px;border-radius:50%;margin-top:4px;flex:0 0 auto}
.status-dot.built{background:var(--win);box-shadow:0 0 0 5px rgba(63,191,135,.1)}
.status-dot.planned{background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-grid details{background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:0 20px;box-shadow:var(--glass-edge);transition:border-color .3s var(--ease),background .3s var(--ease)}
.faq-grid details[open]{border-color:var(--accent-line);background:linear-gradient(165deg,rgba(24,35,58,.78),rgba(61,126,199,.1))}
.faq-grid summary{list-style:none;padding:20px 30px 20px 0;font-weight:760;position:relative}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::after{content:"+";position:absolute;right:2px;color:var(--accent);font-size:1.25rem;font-weight:500}
.faq-grid details[open] summary::after{content:"−"}
.faq-grid p{color:var(--muted);font-size:.84rem;line-height:1.6;margin:0 0 20px}
.stack-grid{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--elev-raised)}
.stack-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;padding:17px 22px;border-bottom:1px solid var(--line);font-size:.84rem}
.stack-row:last-child{border-bottom:0}
.stack-row span{color:var(--muted)}
.stack-row strong{color:var(--accent)}
.stack-head{background:var(--raised);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
.cta-band{padding:90px 0;border-top:1px solid var(--line);background:linear-gradient(135deg,var(--accent-soft),transparent 42%)}
.cta-band h2{max-width:760px;margin-top:14px}
.cta-band .button{margin-top:14px}

/* ── Under-construction / private-preview gate page ─────────────────────────
   Moved out of an inline <style> block in under-construction.html so all styles
   live in this single master sheet. The page sets <body class="construction-page">
   to opt into the centered layout (scoped, so it never affects other pages). */
.construction-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.construction{width:min(920px,100%);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:54px;padding:46px;background:rgba(17,26,43,.92);border:1px solid var(--line-strong);border-radius:32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.construction::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(90,155,224,.025) 12px 13px);pointer-events:none}
.construction-copy{position:relative;z-index:1}
.construction h1{font-size:clamp(3.1rem,7vw,5.6rem);margin:14px 0 22px}
.construction p{color:var(--muted);font-size:1.05rem;line-height:1.6}
.gifty-frame{position:relative;aspect-ratio:1;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.gifty-frame img{width:100%;height:100%;object-fit:cover;display:block}
.notice{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.notice::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
@media(max-width:720px){
.construction{grid-template-columns:1fr;padding:26px}
.gifty-frame{order:-1;max-height:300px}
.construction h1{font-size:3.3rem}
}


@media(max-width:940px){
.hero{grid-template-columns:1fr;padding-top:100px}
.hero-copy{max-width:750px}
.stage{max-width:700px;margin-inline:0}
.section-head,.split{grid-template-columns:1fr}
.tile.large,.tile.medium{grid-column:span 12}
.tile.third{grid-column:span 6}
.media-grid{grid-template-columns:1fr}
.photo-stack{grid-template-columns:1fr 1fr}
.footer-top{grid-template-columns:1fr}
.nav-links{display:none;position:absolute;left:20px;right:20px;top:59px;padding:14px;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg),var(--glass-edge);flex-direction:column;align-items:stretch}
.nav-links.open{display:flex}
.mobile-toggle{display:block}
.status-grid,.faq-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
.wrap,.narrow{width:min(100% - 44px,1200px)}
h1{font-size:3.7rem}
.hero h1{font-size:3.2rem}
.hero{min-height:0;padding:76px 0 84px;gap:48px}
.hero .lede{font-size:1.02rem}
.stage{padding:10px}
.app-layout{grid-template-columns:1fr;min-height:0}
.app-side{display:none}
.metrics{grid-template-columns:1fr 1fr}
.metrics .metric:last-child{display:none}
.app-feed{grid-template-columns:1fr}
.window-bar{grid-template-columns:1fr 1fr}
.window-title{display:none}
.logo-row{align-items:flex-start;flex-direction:column}
.principles{display:grid;gap:10px}
.section{padding:84px 0}
.section-head{gap:20px;margin-bottom:36px}
.bento{display:block}
.tile{margin-bottom:12px;min-height:0!important}
.photo-stack{grid-template-columns:1fr}
.step-list{display:block}
.step{min-height:210px;border-right:0;border-bottom:1px solid var(--line)}
.page-hero{padding:76px 0 68px}
.footer-map{grid-template-columns:1fr 1fr}
.footer-bottom{flex-direction:column}
.sitemap-tree>li{grid-template-columns:1fr}
.sitemap-tree ul{grid-template-columns:1fr}
.quote{padding:78px 0}
.hero::before,.hero::after,.quote::before,.quote::after{display:none}
.section::after{width:calc(100% - 28px)}
.status-card{padding:20px}
.faq-grid details{padding-inline:16px}
.stack-row{grid-template-columns:1fr;gap:6px;padding:18px}
.stack-head{display:none}
.stack-row span:first-child{color:var(--text);font-weight:720}
.cta-band{padding:72px 0}
.gifty-host{left:-6px;bottom:8px;width:112px;height:112px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.gifty-host{transition:none}
.tile:hover{transform:none}
}

/* Hero claim: the rotating clause lists capabilities that ACTUALLY exist
   (mirrors the "Built in the product" section). It is proof, not a slogan —
   so it must never rotate to something the product can't do. */






@media(max-width:620px){}
/* No motion: show only the first item, statically. */
@media(prefers-reduced-motion:reduce){
  
  
  
}

/* Hero title: the giant type rotates through capabilities that ACTUALLY exist
   (mirrors the "Built in the product" section). It is proof, not a slogan —
   never rotate to something the product cannot do.
   Height is reserved by an invisible sizer so rotation never reflows the page. */



.hero-word{grid-area:1/1;color:var(--accent);transform:translateY(.34em);opacity:0;
  transition:transform .55s var(--ease),opacity .4s var(--ease);will-change:transform,opacity}


@media(prefers-reduced-motion:reduce){
  
  
}

/* Hero title rotator — the giant type cycles capabilities that ACTUALLY exist
   (mirrors "Built in the product"). Proof, not a slogan: never rotate to
   something the product cannot do.
   Grid stacking puts every word in the same cell, so the H1 sizes to the
   tallest and rotation never reflows the page. */
.hero-title{display:block}.hero-lead-line{display:block;color:var(--muted);font-weight:800;line-height:.9;margin-bottom:.02em}
.hero-rotator{display:grid}
.hero-word{grid-area:1/1;color:var(--accent);opacity:0;
  transform:translateY(.4em) scale(.975);filter:blur(7px);
  
  transition:transform .6s var(--ease),opacity .4s var(--ease),
             filter .5s var(--ease);
  will-change:transform,opacity,filter}
.hero-word.is-on{opacity:1;transform:none;filter:blur(0)}
.hero-word.is-out{opacity:0;transform:translateY(-.3em) scale(.99);filter:blur(5px);
  }
@media(prefers-reduced-motion:reduce){
  .hero-word{transition:none;filter:none;transform:none}
  .hero-word:not(.is-on){display:none}
}

/* ── Per-section identity ───────────────────────────────────────────────────
   Each section gets its OWN light position and geometry, so scrolling reads as
   moving through different rooms rather than past one repeated wall. Light
   scrolls WITH the content (absolute, not fixed) — a fixed blob ignores the
   page and reads as a broken overlay. */
.section{position:relative;overflow:hidden}
.section>.wrap{position:relative;z-index:1}

/* BENTO — light from upper-right, echoing the hero's key. Continuity. */
.bento-section::before{content:"";position:absolute;z-index:0;inset:0;
  background:radial-gradient(46vw 40vh at 88% 2%,rgba(61,126,199,.15),transparent 60%)}

/* MEDIA — a spotlight from directly above: this section is a stage awaiting
   footage, so it is lit like one. */
.media-section::before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:70%;
  background:radial-gradient(52vw 46vh at 50% -8%,rgba(90,155,224,.13),transparent 64%)}
.media-section::after{content:"";position:absolute;z-index:0;left:50%;top:0;width:1px;height:88px;
  transform:translateX(-50%);background:linear-gradient(180deg,var(--accent-line),transparent)}

/* STEPS — a horizontal rail: light sweeps left-to-right, the direction of the
   process itself. */
.steps-section::before{content:"";position:absolute;z-index:0;inset:0;
  background:linear-gradient(100deg,rgba(61,126,199,.14),transparent 46%)}

/* STACK (why rory) — rose fill from the lower-left: the warm secondary, used
   once, on the section that argues for consolidation. */
.stack-section::before{content:"";position:absolute;z-index:0;inset:0;
  background:radial-gradient(44vw 42vh at 4% 92%,rgba(201,73,101,.13),transparent 62%)}

/* STATUS — the honesty section. No blob at all: flat, cool, and evenly lit,
   because this is the part of the page that refuses to flatter. */
.status-section{background:rgba(4,9,18,.4)}
.status-section::before{content:"";position:absolute;z-index:0;inset:0;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 96px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 60%)}

/* FAQ — light from the lower-right, opposite the bento. The page's light
   travels as you scroll. */
.faq-section::before{content:"";position:absolute;z-index:0;inset:0;
  background:radial-gradient(40vw 44vh at 94% 96%,rgba(61,126,199,.12),transparent 62%)}

/* QUOTE — the close. A single wide wash behind the statement. */
.quote{position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;z-index:0;inset:0;
  background:radial-gradient(70vw 50vh at 22% 50%,rgba(61,126,199,.11),transparent 66%)}
.quote>.wrap{position:relative;z-index:1}

/* ── Rocket scene ───────────────────────────────────────────────────────────
   Progressive-enhancement stack: CSS animation is the floor (works everywhere);
   a looping <video> fades in over it once ready; its poster/first-frame matches
   the CSS resting composition so the swap is invisible. Off by default —
   body.rocket-mode reveals it and hides the mockup, so the two can be A/B'd.  */
.rocket-stage{display:none}

/* rocket-mode: full-bleed cinematic hero. The owner's wide render sits behind
   the copy as a 100vw background layer with a navy-to-transparent wash; the
   boxed stage/mockup is hidden entirely. (The vector rocket scene markup/CSS
   below is retired but kept for a possible revert.) */
body.rocket-mode .stage{display:none}
body.rocket-mode .hero{grid-template-columns:1fr;min-height:80vh;align-items:center;
  padding:96px 0}
body.rocket-mode .hero::before,body.rocket-mode .hero::after{display:none}
body.rocket-mode .hero-copy{max-width:640px}
main{overflow-x:clip}

.hero-bg{display:none}
body.rocket-mode .hero-bg{display:block;position:absolute;top:0;bottom:0;left:50%;
  width:100vw;transform:translateX(-50%);z-index:0;overflow:hidden;background:var(--bg)}
/* canvas extension: the same file, mirrored and heavily blurred, fills the
   whole band — wherever the sharp image runs out, this continues its light,
   so there are no hard edges at any viewport */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url(rocket-hero-wide.webp) center/cover no-repeat;
  transform:scaleX(-1) scale(1.16);filter:blur(38px) brightness(.55) saturate(1.1);
  animation:hero-drift-far 34s ease-in-out infinite alternate}
/* NB z-index:-1 is load-bearing: the transform+filter promote this pseudo to
   its own layer and at z:0 Chrome paints it over the sibling img on mobile.
   Negative z keeps it under everything while hero-bg's transform-induced
   stacking context stops it escaping below the section. */
/* the blurred base counter-drifts slower — cheap parallax depth */
@keyframes hero-drift-far{from{transform:scaleX(-1) scale(1.16)}
  to{transform:scaleX(-1) scale(1.1) translate(1.6%,1.2%)}}
/* the sharp image: sized by height and anchored right so the rocket (the
   image's center) lands in the empty right half regardless of viewport aspect;
   the left edge feathers into the blurred base via mask. Slow Ken Burns drift. */
.hero-bg img{position:absolute;top:-8%;height:126%;
  width:auto;max-width:none;left:auto;right:-22%;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  transform-origin:62% 40%;animation:hero-drift 22s ease-in-out infinite alternate}
@keyframes hero-drift{from{transform:none}
  to{transform:translate(-2.2%,-1.4%) scale(1.08)}}
/* porthole glow: warm cabin light spilling from the window onto the hull
   around it. Sits BEHIND the photo (z-index:0 vs img's z-index:1) — Gifty and
   the glass are part of the flat photo with no separate layer to mask against,
   so the glow can't sit in front without painting over his face. Instead it's
   a wide, soft wash that bleeds past the photo's edges/mask feather and reads
   as ambient light escaping the porthole, not a spotlight on top of him. Same
   box/transform-origin/drift animation as .hero-bg>img so it stays pixel-
   locked through the Ken Burns move; the pulse is a second, independent
   animation layered on top via a nested span. */
.hero-bg>.porthole-glow{position:absolute;top:-8%;height:126%;
  width:auto;max-width:none;left:auto;right:-22%;z-index:0;pointer-events:none;
  aspect-ratio:2000/1116;
  transform-origin:62% 40%;animation:hero-drift 22s ease-in-out infinite alternate}
.hero-bg>.porthole-glow>i{position:absolute;left:50%;top:48%;width:22%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(249,214,150,.85) 0%,rgba(233,189,104,.4) 30%,rgba(233,189,104,0) 68%);
  filter:blur(10px);mix-blend-mode:screen;
  animation:porthole-breathe 5.5s ease-in-out infinite}
@keyframes porthole-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
/* the wash: darkens the copy side, then blends top/bottom into the page ground
   so the render reads as part of the page at any viewport, not a pasted photo */
.hero-bg::after{content:"";position:absolute;inset:0;z-index:3;background:
  linear-gradient(90deg,var(--bg) 6%,rgba(11,17,30,.68) 30%,rgba(11,17,30,0) 56%),
  linear-gradient(180deg,var(--bg),rgba(11,17,30,0) 20%,rgba(11,17,30,0) 78%,var(--bg))}
/* These overrides MUST live after the base rules above — the site's shared
   responsive blocks sit earlier in the file and would lose the cascade. */
@media(max-width:1200px){
  /* mid widths: pull the anchor further out so the rocket stays right of copy */
  .hero-bg img,.hero-bg>.porthole-glow{right:-32%}
}
@media(max-width:940px){
  /* single column: copy sits over the image — cover it and dim the frame.
     NB object-position inverts once the image overflows horizontally: with a
     landscape image in a portrait viewport, values BELOW 50% push the image's
     center (the rocket) toward the RIGHT of the frame. 35% ≈ rocket at
     ~two-thirds across on phones, ~60% on portrait tablets. */
  .hero-bg img{top:0;height:100%;width:100%;left:0;right:auto;object-fit:cover;
    object-position:35% 50%;-webkit-mask-image:none;mask-image:none}
  /* the glow tracks via the same cover box (no mask, matches img exactly).
     object-fit:cover at this orientation is height-bound, so Y is untouched;
     X shifts with viewport aspect under object-position — 66% is a middle
     estimate across common phone/tablet widths, close enough for a soft glow. */
  .hero-bg>.porthole-glow{top:0;height:100%;width:100%;left:0;right:auto}
  .hero-bg>.porthole-glow>i{left:66%}
  .hero-bg::after{background:
    linear-gradient(rgba(11,17,30,.42),rgba(11,17,30,.42)),
    linear-gradient(180deg,var(--bg),rgba(11,17,30,0) 26%,rgba(11,17,30,.18) 62%,var(--bg))}
  body.rocket-mode .hero{min-height:70vh}
}


/* CSS scene */
.rocket-scene{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.rocket-sky{position:absolute;inset:-64px;
  background:radial-gradient(2px 2px at 20% 30%,rgba(241,245,251,.5),transparent),
             radial-gradient(1px 1px at 70% 18%,rgba(241,245,251,.4),transparent),
             radial-gradient(1.5px 1.5px at 45% 62%,rgba(241,245,251,.35),transparent),
             radial-gradient(1px 1px at 85% 72%,rgba(241,245,251,.3),transparent),
             radial-gradient(1.5px 1.5px at 12% 78%,rgba(241,245,251,.32),transparent),
             radial-gradient(1px 1px at 34% 10%,rgba(241,245,251,.38),transparent),
             radial-gradient(2px 2px at 92% 40%,rgba(241,245,251,.28),transparent),
             radial-gradient(1px 1px at 58% 86%,rgba(241,245,251,.3),transparent);
  animation:sky-drift 26s linear infinite}
/* stars fall down-left: the craft reads as flying up-right */
@keyframes sky-drift{to{transform:translate(-36px,48px)}}

/* the whole craft hovers: bob + sway around a flight tilt, seamless loop.
   Base transform = the reduced-motion resting frame (animation:none falls back to it). */
.rocket-craft{position:relative;width:46%;aspect-ratio:220/340;transform:rotate(-12deg);
  animation:rocket-hover 5.2s ease-in-out infinite}
@keyframes rocket-hover{
  0%,100%{transform:translateY(1.5%) rotate(-14deg)}
  50%{transform:translateY(-3.5%) rotate(-9deg)}}

/* earth + moon-on-orbit + sun for Gifty to look at; drifts slower than the
   stars so the scene reads in gentle parallax */
.rocket-cosmos{position:absolute;inset:0;width:100%;height:100%;
  animation:cosmos-drift 18s ease-in-out infinite alternate}
@keyframes cosmos-drift{to{transform:translate(-8px,10px)}}

/* hand-authored flat-vector rocket; tonal shading + hairline edges, light
   from the upper-right — same material rules as the panels */
.rocket-svg{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 24px 32px rgba(4,10,22,.45))}

/* exhaust flame — flickers on its own faster cycle; inside the SVG so it tilts
   with the craft (transform-box is unsupported pre-2018: flame goes static, fine) */
.rocket-svg .flame{transform-box:fill-box;transform-origin:50% 0;
  animation:flame-flicker .18s ease-in-out infinite alternate}
@keyframes flame-flicker{from{transform:scaleY(.84) scaleX(1.06)}
  to{transform:scaleY(1.1) scaleX(.94)}}

/* Gifty waves from inside the porthole; the circle clips the sprite.
   Geometry mirrors the SVG window: center 110,158 r32 in a 220x340 viewBox. */
.porthole{position:absolute;left:50%;top:46.5%;width:29.5%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:#0F1830}
.gifty-rider{position:absolute;left:47%;top:6%;width:132%;aspect-ratio:1;transform:translateX(-50%)}
.porthole::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(249,251,252,.22),transparent 42%);pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .rocket-craft,.rocket-sky,.rocket-cosmos,.rocket-svg .flame{animation:none}
  .hero-bg img,.hero-bg::before,.hero-bg>.porthole-glow,.hero-bg>.porthole-glow>i{animation:none}
  .hero-bg>.porthole-glow>i{opacity:.75}
}

/* Creator preview section on landing */
.creator-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.creator-tile{display:block;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-md);transition:border-color .16s var(--ease),transform .16s var(--ease)}
.creator-tile:hover{border-color:var(--accent-line);transform:translateY(-2px);color:inherit}
.tile-cover{display:block;height:128px;overflow:hidden;background:var(--raised)}
.tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tile-meta .avatar,
.tile-meta .avatar.photo{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;max-width:56px!important;max-height:56px!important;flex:0 0 56px!important;border-radius:50%!important;margin-top:-28px;border:3px solid var(--surface)!important;box-shadow:var(--shadow-md)!important;background:var(--raised)!important;object-fit:cover!important;padding:0!important;display:block!important}
.creator-tile .rail-copy{display:flex;flex-direction:column;padding-top:12px;gap:4px;overflow:hidden}
.name-line{display:flex;align-items:center;gap:6px;font-size:1.05rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name-text{overflow:hidden;text-overflow:ellipsis}
.id-check{display:inline-flex;align-items:center;color:var(--accent)}
.id-check svg{width:16px;height:16px}
.creator-tile em{font-style:normal;font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.league-chip{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:var(--r-pill);background:var(--raised);border:1px solid var(--line);color:var(--muted);text-transform:uppercase}
.league-chip.league-prime{border-color:rgba(233,189,104,0.45);color:#E9BD68;background:rgba(233,189,104,0.16)}
.league-chip.league-open{border-color:rgba(155,125,255,0.45);color:#C4B5FD;background:rgba(155,125,255,0.14)}
.league-chip.league-club{border-color:rgba(90,155,224,0.45);color:#7CB3EC;background:rgba(90,155,224,0.14)}
.league-chip.league-rising{border-color:var(--line-strong);color:var(--muted);background:transparent}
.league-chip.league-apex{border-color:var(--gold);color:var(--gold)}
.league-chip.league-champion{border-color:var(--accent);color:var(--accent)}
.league-chip.league-contender{border-color:var(--rose);color:var(--rose)}
.league-chip.league-demo{border-color:rgba(167,139,250,0.45);color:#A78BFA;background:rgba(167,139,250,0.16)}