:root{
  --bg:#F4F2EC; --bg-2:#EAE7DE; --surface:#FFFFFF;
  --ink:#15170F; --ink-2:#43473A; --muted:#6E7263;
  --line:#D9D5C8; --line-2:#C2BDAC;
  --red:#DA3526; --red-deep:#A8281C; --yellow:#E7C70E; --yellow-ink:#3A3300;
  --court:#1F6E63;
  --shadow:0 18px 50px -28px rgba(21,23,15,.4);
  --rb:18px;
  --e-out:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"]{
  --bg:#272820; --bg-2:#2F3127; --surface:#35372C;
  --ink:#F2F0E7; --ink-2:#C2C4B6; --muted:#949686;
  --line:#3F4334; --line-2:#515643;
  --red:#F0473A; --red-deep:#C7392D; --yellow:#F2DD12; --yellow-ink:#15170F;
  --court:#48B0A1;
  --shadow:0 22px 60px -30px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;padding:0}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:clamp(15px,1.05vw,16.5px); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .5s var(--e-out), color .5s var(--e-out);
}
::selection{background:var(--red); color:#fff}
.wrap{width:min(1240px,90vw); margin:0 auto}
.mono{font-family:"Martian Mono",ui-monospace,monospace; font-size:.72em; letter-spacing:.02em}
h1,h2,h3{margin:0; text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}

/* z-index scale */
:root{--z-nav:100; --z-cta:90; --z-overlay:200}

/* ---------- Display type ---------- */
.display{font-family:"Anton",sans-serif; font-weight:400; line-height:.92; letter-spacing:-.01em; text-transform:uppercase}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,5vw,52px);
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .4s, background .4s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-l{display:flex; align-items:center; gap:12px}
.nav-logo{width:38px; height:38px; display:block; flex-shrink:0; border-radius:50%; object-fit:cover; background:#fff; border:1px solid var(--line)}
.nav-mark{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:.02em; line-height:1}
.nav-mark span{color:var(--red)}
.nav-links{display:flex; gap:4px; align-items:center}
.nav-links a{
  text-decoration:none; font-weight:600; font-size:13px; color:var(--muted);
  padding:9px 13px; border-radius:999px; position:relative; transition:color .25s, background .25s;
}
.nav-links a:hover{color:var(--ink); background:var(--bg-2)}
.nav-links a.active{color:var(--ink)}
.nav-r{display:flex; align-items:center; gap:10px}
.theme-btn{
  width:38px; height:38px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; position:relative; overflow:hidden; flex-shrink:0;
  transition:border-color .25s, transform .25s var(--e-out);
}
.theme-btn:hover{transform:rotate(-18deg)}
.theme-btn svg{position:absolute; transition:transform .45s var(--e-out), opacity .35s}
.theme-btn .moon{opacity:0; transform:scale(.4) rotate(90deg)}
html[data-theme="dark"] .theme-btn .sun{opacity:0; transform:scale(.4) rotate(-90deg)}
html[data-theme="dark"] .theme-btn .moon{opacity:1; transform:none}
.cta-pill{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--red); color:#fff; font-weight:700; font-size:13px;
  padding:11px 18px; border-radius:999px; white-space:nowrap;
  transition:transform .25s var(--e-out), background .25s, box-shadow .3s;
  box-shadow:0 8px 24px -12px var(--red);
}
.cta-pill:hover{background:var(--red-deep); transform:translateY(-2px)}
.cta-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow)}
@media(max-width:860px){.nav-links{display:none} .nav-mark{display:none}}

/* ---------- progress ---------- */
.scrollbar{position:fixed; top:0; left:0; height:3px; background:var(--red); z-index:var(--z-nav); width:0}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 60px; overflow:hidden}
.hero-trace{position:absolute; inset:0; pointer-events:none; z-index:0}
.hero-trace svg{width:100%; height:100%}
.hero-trace path{fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:8 9; opacity:.7}
.hero-ball{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff6, transparent 50%), var(--yellow);
  box-shadow:0 0 0 6px color-mix(in oklab,var(--yellow) 30%, transparent), 0 8px 18px -6px var(--yellow);
  z-index:1; offset-rotate:0deg; will-change:transform; top:0; left:0;
}
.hero-inner{position:relative; z-index:2}
.kicker{
  display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:13px;
  color:var(--ink-2); margin-bottom:26px;
}
.kicker .live{display:inline-flex; align-items:center; gap:7px; color:var(--red)}
.kicker .pulse{width:8px;height:8px;border-radius:50%;background:var(--red); box-shadow:0 0 0 0 color-mix(in oklab,var(--red) 50%,transparent); animation:pulse 2.2s var(--e-out) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-family:"Anton",sans-serif; text-transform:uppercase; line-height:.86; letter-spacing:-.015em; font-size:clamp(58px,13vw,168px); margin:0}
.hero h1 .l2{color:var(--red); display:block; padding-left:.06em}
.hero h1 .l2 .it{font-style:normal; position:relative; display:inline-block}
.hero-foot{display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:end; margin-top:48px}
.hero-lede{font-size:clamp(16px,1.4vw,19px); max-width:62ch; color:var(--ink-2); line-height:1.55}
.hero-lede b{color:var(--ink); font-weight:700}
.hero-lede .hl{color:var(--red); font-weight:700}
.scroll-hint{display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:600; font-size:12px; justify-self:end}
.scroll-hint .arrow{width:1px; height:34px; background:linear-gradient(var(--muted),transparent); position:relative; overflow:hidden}
.scroll-hint .arrow::after{content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--red); animation:drop 1.8s var(--e-out) infinite}
@keyframes drop{0%{top:-50%}60%,100%{top:100%}}
@media(max-width:760px){.hero-foot{grid-template-columns:1fr; gap:28px} .scroll-hint{justify-self:start}}

/* meta strip */
.meta-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:64px; padding-top:22px; border-top:2px solid var(--ink)}
.meta-cell .k{display:block; font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.meta-cell .v{font-weight:700; font-size:15px}
.meta-cell .v em{font-style:normal; color:var(--red)}
@media(max-width:680px){.meta-strip{grid-template-columns:1fr 1fr; row-gap:22px}}

/* ---------- generic section ---------- */
.section{padding:clamp(80px,11vw,150px) 0; position:relative}
.section + .section{border-top:1px solid var(--line)}
.sec-tag{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:13px; color:var(--red); text-transform:uppercase; letter-spacing:.04em; margin-bottom:22px}
.sec-tag .num{font-family:"Martian Mono",monospace; color:var(--muted); font-size:11px}
.h2{font-family:"Anton",sans-serif; text-transform:uppercase; line-height:.9; letter-spacing:-.01em; font-size:clamp(38px,6.2vw,86px)}
.h2 .ac{color:var(--red)}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.split .text{display:flex; flex-direction:column; gap:18px}
.split-label{font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--court)}
.split-pull{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(26px,3.4vw,42px); line-height:.96; letter-spacing:-.01em}
.split-pull .ac{color:var(--red)}
.split p{color:var(--ink-2); max-width:46ch}
.split p .ac{color:var(--red); font-weight:700}
.figure{position:relative; border-radius:var(--rb); overflow:hidden; background:var(--bg-2); box-shadow:var(--shadow)}
.figure img{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-out)}
.figure:hover img{transform:scale(1.05)}
.figure .cap{position:absolute; left:0; right:0; bottom:0; padding:30px 18px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:linear-gradient(transparent, rgba(8,10,6,.82))}
@media(max-width:800px){.split{grid-template-columns:1fr; gap:28px}}

/* ---------- blueprint placeholder ---------- */
.blueprint-ph{
  position:relative; margin-top:50px; border-radius:var(--rb); overflow:hidden;
  aspect-ratio:16/8; display:grid; place-items:center; text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/36px 36px,
    radial-gradient(120% 130% at 18% 8%, #1C4E8A 0%, #123254 58%, #0C2440 100%);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.14);
}
.blueprint-ph::after{content:""; position:absolute; inset:14px; border:1.5px dashed rgba(255,255,255,.34); border-radius:calc(var(--rb) - 8px); pointer-events:none}
.bp-inner{position:relative; z-index:1; color:#EAF2FF; padding:28px; max-width:56ch}
.bp-tag{display:inline-block; font-family:"Martian Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#0C2440; background:var(--yellow); padding:6px 13px; border-radius:999px; font-weight:700}
.bp-title{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(28px,4vw,52px); line-height:.95; margin:16px 0 10px}
.bp-inner p{color:rgba(234,242,255,.78); margin:0; font-size:15px}
@media(max-width:640px){.blueprint-ph{aspect-ratio:auto; padding:42px 0}}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(34px,5vw,76px); margin-top:50px; align-items:start}
.about-body p{color:var(--ink-2); max-width:54ch; margin:0 0 16px}
.about-body p .ac{color:var(--red); font-weight:700}
.about-body .sub{display:block; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--red); margin:26px 0 8px}
.spec-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--rb); padding:8px 22px; box-shadow:var(--shadow)}
.spec-card dl{margin:0}
.spec-row{display:grid; grid-template-columns:118px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline}
.spec-row:last-child{border-bottom:0}
.spec-row dt{font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.spec-row dd{margin:0; font-weight:600}
.spec-row dd em{font-style:normal; color:var(--red)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr; gap:34px}}
.photo-duo{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px}
.photo-duo .figure{aspect-ratio:4/3}
@media(max-width:640px){.photo-duo{grid-template-columns:1fr}}

/* ---------- timeline ---------- */
.tl-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(34px,5vw,76px); margin-top:50px; align-items:start}
.tl-lede{font-size:clamp(16px,1.4vw,19px); color:var(--ink-2); margin:0 0 18px; max-width:48ch}
.tl-lede .ac{color:var(--red); font-weight:700}
.tl-lede.mute{color:var(--muted); font-size:15px}
.tl{position:relative; margin:0; padding:0; list-style:none}
.tl::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line-2)}
.tl li{position:relative; padding:0 0 26px 38px}
.tl li:last-child{padding-bottom:0}
.tl .node{position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--red)}
.tl li:nth-child(odd) .node{background:var(--red)}
.tl .when{font-family:"Martian Mono",monospace; font-size:11px; color:var(--court); text-transform:uppercase; letter-spacing:.03em}
.tl .what{margin-top:4px; font-weight:500}
.tl .what em{font-style:normal; color:var(--red); font-weight:700}
@media(max-width:820px){.tl-grid{grid-template-columns:1fr; gap:30px}}

/* ---------- gift ---------- */
#gift{--gink:var(--bg); --gmut:color-mix(in oklab,var(--bg) 72%, transparent); background:var(--ink); color:var(--gink); border-top:0}
html[data-theme="dark"] #gift{--gink:var(--ink); --gmut:color-mix(in oklab,var(--ink) 72%, transparent); background:#121409}
#gift .sec-tag{color:var(--yellow)}
#gift .sec-tag .num{color:var(--gmut)}
.gift-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(34px,5vw,76px); align-items:start}
.gift-pull{font-family:"Anton",sans-serif; text-transform:uppercase; line-height:.94; letter-spacing:-.01em; font-size:clamp(34px,5.2vw,72px); color:var(--gink)}
.gift-pull .strike{position:relative; display:inline-block; color:var(--gmut)}
.gift-pull .strike::after{content:""; position:absolute; left:-3%; right:-3%; top:52%; height:5px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--e-out)}
.gift-pull.show .strike::after{transform:scaleX(1)}
.gift-pull em{font-style:normal; color:var(--yellow)}
.gift-aside p{color:var(--gmut); max-width:44ch; margin:0 0 16px}
@media(max-width:820px){.gift-grid{grid-template-columns:1fr; gap:30px}}

/* ---------- status ---------- */
.status-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,68px); margin-top:50px; align-items:start}
.status-fig .figure{aspect-ratio:4/3}
.status-note{margin-top:14px; font-size:13px; color:var(--muted)}
.status-list{list-style:none; margin:0; padding:0}
.status-list li{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:17px 0; border-bottom:1px solid var(--line)}
.status-list li:first-child{padding-top:0}
.status-list .ix{font-family:"Martian Mono",monospace; font-size:12px; color:var(--muted)}
.status-list .nm{font-weight:600}
.tag{font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); white-space:nowrap}
.tag.done{background:var(--court); border-color:var(--court); color:#fff}
.tag.ongoing{background:var(--red); border-color:var(--red); color:#fff; animation:tagpulse 2.4s var(--e-out) infinite}
@keyframes tagpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--red) 45%,transparent)}55%{box-shadow:0 0 0 6px transparent}}
@media(max-width:820px){.status-grid{grid-template-columns:1fr; gap:30px}}

/* ---------- technology ---------- */
.tech-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:18px}
.tech-lede{color:var(--ink-2); max-width:54ch; font-size:clamp(15px,1.2vw,17px)}
.group-label{display:flex; align-items:center; gap:16px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--court); margin:54px 0 6px}
.group-label::after{content:""; flex:1; height:1px; background:var(--line)}
.spec{display:grid; grid-template-columns:230px 1fr; gap:clamp(24px,4vw,56px); padding:30px 0; border-bottom:1px solid var(--line); align-items:start}
.spec .head .pn{font-family:"Martian Mono",monospace; font-size:11px; color:var(--muted); text-transform:uppercase}
.spec .head .name{font-weight:700; font-size:18px; line-height:1.15; margin:8px 0 2px}
.spec .head .name em{font-style:normal; color:var(--red)}
.spec .head .hw{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.6}
.spec .head .badge{display:inline-block; margin-top:14px; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted)}
.spec .head .badge.done{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.spec .head .badge.ongoing{background:var(--red); color:#fff; border-color:var(--red)}
.spec .body p{color:var(--ink-2); margin:0 0 13px; max-width:62ch}
.spec .body p:last-child{margin-bottom:0}
.spec .body p em{font-style:normal; color:var(--red); font-weight:700}
.warn{margin-top:16px; padding:16px 18px; border-radius:12px; background:color-mix(in oklab,var(--red) 9%, var(--bg)); border:1px solid color-mix(in oklab,var(--red) 24%, var(--line))}
.warn b{color:var(--red)}
.warn{font-size:14px; color:var(--ink-2)}
@media(max-width:760px){.spec{grid-template-columns:1fr; gap:14px} .tech-head{grid-template-columns:1fr}}
.tech-figure{margin:46px 0; border-radius:var(--rb); overflow:hidden; box-shadow:var(--shadow); position:relative; background:var(--bg-2)}
.tech-figure img{display:block; width:100%}
.tech-figure .cap{padding:12px 16px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-top:1px solid var(--line)}
.tech-figure.portrait{max-width:480px}
.tech-close{margin-top:42px; font-size:clamp(16px,1.4vw,20px); color:var(--ink-2); max-width:64ch}
.tech-close em{font-style:normal; color:var(--red); font-weight:700}

/* pipeline numbered */
.pipe{counter-reset:step; margin-top:14px}
.pipe .spec .head .pn::before{counter-increment:step}

/* ---------- fundraising ---------- */
#fund{background:var(--bg-2)}
.fund-top{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(34px,5vw,72px); align-items:start}
.fund-lede{font-size:clamp(16px,1.3vw,18px); color:var(--ink-2); margin:0 0 16px; max-width:54ch}
.fund-lede .ac{color:var(--red); font-weight:700}
.fund-lede.mute{color:var(--muted); font-size:15px}
.fund-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--rb); padding:28px; box-shadow:var(--shadow)}
.fund-amounts{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap}
.fund-raised{font-family:"Anton",sans-serif; font-size:clamp(40px,5vw,62px); line-height:1; color:var(--red)}
.fund-goal{font-weight:700; font-size:18px; color:var(--muted)}
.fund-bar{height:10px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); overflow:hidden; margin:18px 0 10px}
.fund-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--yellow)); border-radius:999px; transition:width 1.6s var(--e-out)}
.fund-meta{display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:var(--muted)}
.fund-status{margin-top:18px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px}
.fund-status .pulse{width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.ks-btn{display:inline-flex; align-items:center; gap:14px; margin-top:20px; width:100%; justify-content:center; background:var(--red); color:#fff; text-decoration:none; font-weight:700; padding:16px 24px; border-radius:14px; transition:background .25s, transform .25s var(--e-out); box-shadow:0 12px 30px -14px var(--red)}
.ks-btn:hover{background:var(--red-deep); transform:translateY(-2px)}
.ks-btn .note{opacity:.7; font-weight:600; font-size:12px}
.fund-list{margin:54px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.fund-list li{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); transition:padding-left .25s var(--e-out)}
.fund-list li:hover{padding-left:10px}
.fund-list .nm{font-weight:600}
.fund-list .ft{font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 10px; border-radius:999px; border:1px solid var(--line-2)}
.fund-list .ft.hw{color:var(--red); border-color:color-mix(in oklab,var(--red) 35%,var(--line-2))}
.fund-list .ft.sw{color:var(--court); border-color:color-mix(in oklab,var(--court) 40%,var(--line-2))}
.fund-note{margin-top:22px; color:var(--muted); max-width:62ch}
.fund-head{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:42px}
@media(max-width:820px){.fund-top{grid-template-columns:1fr; gap:30px} .fund-head{grid-template-columns:1fr}}

/* ---------- team ---------- */
.team-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:10px}
.team-sub{color:var(--ink-2); max-width:48ch}
.team-group{margin-top:48px}
.team-label{display:flex; align-items:center; gap:16px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:20px}
.team-label::after{content:""; flex:1; height:1px; background:var(--line)}
.team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.member{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 20px; text-align:center; transition:transform .3s var(--e-out), border-color .3s, box-shadow .3s}
.member:hover{transform:translateY(-4px); border-color:var(--red); box-shadow:var(--shadow)}
.member .nm{font-weight:700; font-size:16px}
.member.lead .nm{color:var(--red)}
.member .role{font-size:12px; color:var(--muted); margin-top:5px; font-weight:500}
.avatar{width:76px; height:76px; border-radius:50%; margin:0 auto 14px; position:relative; overflow:hidden; display:grid; place-items:center; background:linear-gradient(140deg,var(--surface),var(--line)); border:1px solid var(--line)}
.avatar::before{content:attr(data-ini); font-weight:700; font-size:22px; letter-spacing:.5px; color:var(--muted)}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top}
.member.lead .avatar{border-color:var(--red)}
@media(max-width:760px){.team-head{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding:40px 0; border-top:2px solid var(--ink)}
footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot-l{display:flex; align-items:center; gap:12px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em}
.foot-r{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-weight:600}
.foot-r .pulse{width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- image lightbox ---------- */
.figure,.tech-figure{cursor:zoom-in}
.lightbox{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:4vmin; background:color-mix(in oklab, var(--bg) 24%, rgba(0,0,0,.86)); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; transition:opacity .3s var(--e-out); pointer-events:none}
.lightbox.open{pointer-events:auto}
[hidden]{display:none !important}
.lightbox.open{opacity:1}
.lightbox img{max-width:96vw; max-height:92vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 50px 130px -30px rgba(0,0,0,.85); transform:scale(.96); transition:transform .38s var(--e-out)}
.lightbox.open img{transform:scale(1)}
.lb-close{position:absolute; top:18px; right:20px}
.lb-close,.modal-close{width:46px; height:46px; border-radius:50%; border:1px solid color-mix(in oklab,#fff 28%, transparent); background:rgba(0,0,0,.4); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s, transform .3s var(--e-out)}
.lb-close:hover,.modal-close:hover{background:rgba(0,0,0,.7); transform:rotate(90deg)}

/* ---------- member contact modal ---------- */
.member{cursor:pointer; position:relative}
.member::after{content:"↗"; position:absolute; top:14px; right:16px; opacity:0; color:var(--red); font-weight:700; font-size:14px; transition:opacity .25s var(--e-out)}
.member:hover::after,.member:focus-visible::after{opacity:1}
.member:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.modal-overlay{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:5vmin; background:color-mix(in oklab, var(--bg) 24%, rgba(0,0,0,.78)); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; transition:opacity .3s var(--e-out); pointer-events:none}
.modal-overlay.open{opacity:1; pointer-events:auto}
.modal{position:relative; width:min(440px,92vw); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--rb); padding:38px 34px 30px; box-shadow:var(--shadow); transform:translateY(16px) scale(.98); transition:transform .38s var(--e-out)}
.modal-overlay.open .modal{transform:none}
.modal .modal-close{position:absolute; top:14px; right:14px; width:38px; height:38px; border-color:var(--line-2); background:var(--bg-2); color:var(--ink)}
.modal .modal-close:hover{background:var(--red); color:#fff; border-color:var(--red)}
.mm-eyebrow{font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.mm-name{font-family:"Anton",sans-serif; text-transform:uppercase; font-weight:400; font-size:36px; line-height:.92; letter-spacing:-.01em; color:var(--ink)}
.mm-role{color:var(--red); font-weight:700; font-size:13px; margin-top:9px; text-transform:uppercase; letter-spacing:.03em}
.mm-links{margin-top:26px}
.mm-link{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); transition:color .2s, padding-left .25s var(--e-out)}
.mm-link:last-child{border-bottom:1px solid var(--line)}
.mm-link:hover{color:var(--red); padding-left:6px}
.mm-link .l-k{font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.mm-link:hover .l-k{color:var(--red)}
.mm-link .l-v{font-weight:700; font-size:15px}
.mm-empty{color:var(--muted); font-size:14px; margin:22px 0 4px; padding-top:18px; border-top:1px solid var(--line)}

/* ---------- reveal (IntersectionObserver + CSS transitions; progress in background tabs) ---------- */
.r,.stagger>*{opacity:1}
html.motion .r{opacity:0; transform:translateY(24px)}
html.motion .r.show{opacity:1; transform:none; transition:opacity .85s var(--e-out), transform .85s var(--e-out)}
html.motion .stagger>*{opacity:0; transform:translateY(16px)}
html.motion .stagger.show>*{opacity:1; transform:none; transition:opacity .6s var(--e-out), transform .6s var(--e-out)}
html.motion .stagger.show>*:nth-child(1){transition-delay:.03s}
html.motion .stagger.show>*:nth-child(2){transition-delay:.09s}
html.motion .stagger.show>*:nth-child(3){transition-delay:.15s}
html.motion .stagger.show>*:nth-child(4){transition-delay:.21s}
html.motion .stagger.show>*:nth-child(5){transition-delay:.27s}
html.motion .stagger.show>*:nth-child(6){transition-delay:.33s}
html.motion .stagger.show>*:nth-child(7){transition-delay:.39s}
html.motion .stagger.show>*:nth-child(8){transition-delay:.45s}

/* hero entrance — CSS keyframes (time-based, never strands) */
@keyframes heroRise{from{opacity:0; transform:translateY(42px)} to{opacity:1; transform:none}}
html.motion .hero h1 .l1,html.motion .hero h1 .l2{display:block}
html.motion .kicker{opacity:0; animation:heroRise .8s var(--e-out) .1s both}
html.motion .hero h1 .l1{opacity:0; animation:heroRise 1s var(--e-out) .3s both}
html.motion .hero h1 .l2{opacity:0; animation:heroRise 1s var(--e-out) .46s both}
html.motion .hero-lede{opacity:0; animation:heroRise .85s var(--e-out) .64s both}
html.motion .scroll-hint{opacity:0; animation:heroRise .7s var(--e-out) .82s both}
html.motion .meta-strip .meta-cell{opacity:0; animation:heroRise .7s var(--e-out) both}
html.motion .meta-strip .meta-cell:nth-child(1){animation-delay:.72s}
html.motion .meta-strip .meta-cell:nth-child(2){animation-delay:.8s}
html.motion .meta-strip .meta-cell:nth-child(3){animation-delay:.88s}
html.motion .meta-strip .meta-cell:nth-child(4){animation-delay:.96s}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .gift-pull .strike::after{transform:scaleX(1)}
  .hero-ball,.scroll-hint .arrow::after{display:none}
}

/* ---------- sub-page first-section nav clearance ---------- */
.page-top{padding-top:clamp(116px,14vh,168px)}
.page-head .h2{margin-top:6px}

/* ---------- active nav link by page (data-page on body) ---------- */
body[data-page="home"] .nav-links a[data-nav="home"],
body[data-page="technology"] .nav-links a[data-nav="technology"],
body[data-page="team"] .nav-links a[data-nav="team"],
body[data-page="support"] .nav-links a[data-nav="support"]{color:var(--ink); background:var(--bg-2)}