/* ═══════════════════════════════════════════════
   OPENCLAW KL — OFFICIAL SITE
   Type: Anton (display) · Space Grotesk (body) · IBM Plex Mono (labels)
   Palette: warm near-black + brand coral #D96B3A + electric blue #3D8BFF
   ═══════════════════════════════════════════════ */

:root{
  --bg:#0B0A08;
  --bg2:#12100D;
  --bg3:#171410;
  --panel:#14110D;
  --line:rgba(217,107,58,.16);
  --line2:rgba(255,255,255,.08);
  --coral:#D96B3A;
  --coral-hi:#FF8A55;
  --blue:#3D8BFF;
  --green:#7BE0A2;
  --ink:#F4EFE6;
  --dim:#A79E90;
  --faint:#6E675C;
  --bg2-rgb:18,16,13;
  --nav-rgb:11,10,8;
  --grid-rgb:244,239,230;
  --grid-op:.028;
  --disp:'Anton',Impact,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --nav-h:80px;
}

/* ── light theme ─────────────────────────────── */
/* coral stays #D96B3A in both modes (brand anchor);
   accent/text tones deepen for contrast on paper.  */
html[data-theme="light"]{
  --bg:#F7F2E9;
  --bg2:#EEE7DA;
  --bg3:#E5DCCB;
  --panel:#FCF9F2;
  --line:rgba(201,87,31,.32);
  --line2:rgba(35,27,17,.15);
  --coral-hi:#BE4A12;
  --blue:#1B5FD6;
  --green:#158A50;
  --ink:#221A10;
  --dim:#5D5344;
  --faint:#8D8371;
  --bg2-rgb:238,231,218;
  --nav-rgb:247,242,233;
  --grid-rgb:34,26,16;
  --grid-op:.05;
}

/* brief cross-fade while switching themes (added/removed by JS) */
html.theming,html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease !important;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--coral);color:#0B0A08}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:normal;color:var(--coral-hi)}
strong{color:var(--ink);font-weight:600}

.container{width:min(1240px,92vw);margin:0 auto}
.mono{font-family:var(--mono)}
.display{font-family:var(--disp);font-weight:400;letter-spacing:.01em;line-height:.95;text-transform:uppercase}

/* ── ambient layers ─────────────────────────── */
.noise{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines{
  position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.028;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#000 2px 4px);
}
body::before{ /* warm stage glow, top */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -8%,rgba(217,107,58,.13),transparent 60%),
    radial-gradient(700px 500px at -10% 30%,rgba(61,139,255,.07),transparent 60%);
}
body::after{ /* blueprint grid, faded at edges */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(var(--grid-rgb),var(--grid-op)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--grid-rgb),var(--grid-op)) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 20%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%,#000 30%,transparent 100%);
}

/* ── nav ────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:32px;padding:0 max(24px,4vw);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.nav.scrolled{background:rgba(var(--nav-rgb),.85);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{height:50px;width:auto;display:block;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.04)}
.brand-logo-lg{width:min(320px,100%);height:auto}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--dim);
  position:relative;padding:4px 0;transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral);transition:width .3s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
  background:rgba(var(--nav-rgb),.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  display:none;flex-direction:column;padding:18px max(24px,4vw) 26px;gap:4px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--mono);font-size:14px;letter-spacing:.12em;color:var(--dim);padding:12px 0;border-bottom:1px solid var(--line2)}
/* `.mobile-menu a` sets color:var(--dim) and outranks .btn-coral, which left the
   CTA label grey on coral. Restore the button's own ink. */
.mobile-menu a.btn{border:0;margin-top:12px;text-align:center;color:#120A05;justify-content:center}

/* ── buttons ────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s,box-shadow .25s,background .25s,color .25s,border-color .25s;
}
.btn-sm{padding:10px 18px;font-size:11px}
.btn-coral{background:var(--coral);color:#120A05;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.btn-coral:hover{background:var(--coral-hi);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(217,107,58,.55)}
.btn-coral .arr{transition:transform .25s}
.btn-coral:hover .arr{transform:translateX(5px)}
.btn-ghost{border-color:var(--line2);color:var(--dim)}
.btn-ghost:hover{border-color:var(--coral);color:var(--ink);transform:translateY(-2px)}

/* theme toggle */
.theme-toggle{
  display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--line2);
  cursor:pointer;padding:9px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--dim);transition:border-color .25s,color .25s,transform .2s,background .25s;
}
.theme-toggle:hover{border-color:var(--coral);color:var(--coral-hi);transform:translateY(-1px)}
.tt-ic{width:14px;height:14px;display:block;color:var(--coral-hi);flex-shrink:0}
.tt-moon{display:none}
html[data-theme="light"] .tt-sun{display:none}
html[data-theme="light"] .tt-moon{display:block}

/* ── hero ───────────────────────────────────── */
.hero{position:relative;padding:calc(var(--nav-h) + 64px) 0 0;overflow:hidden}
.hero::before{ /* coral horizon line */
  content:"";position:absolute;left:0;right:0;top:calc(var(--nav-h) + 34px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,107,58,.5) 30%,rgba(217,107,58,.5) 70%,transparent);
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  min-height:calc(100vh - var(--nav-h) - 46px);padding-bottom:56px;
}
.kicker{font-size:11.5px;letter-spacing:.18em;color:var(--coral-hi);display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-h{font-size:clamp(58px,8.4vw,124px);margin:26px 0 48px}
.hero-h em{color:var(--coral);position:relative;white-space:nowrap}
.hero-h em::after{ /* claw underline */
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.07em;
  background:linear-gradient(90deg,var(--coral),var(--coral-hi));transform:skewX(-12deg);
}
.hero-sub{font-size:clamp(17px,1.5vw,20px);color:var(--dim);max-width:52ch}
.hero-sub strong{color:var(--ink)}
.hero-sub .ev{color:var(--coral-hi);border-bottom:1px dashed var(--coral);cursor:crosshair;padding:0 2px;transition:background .2s,color .2s}
.hero-sub .ev:hover{background:rgba(217,107,58,.18);color:var(--ink)}
.hero-cta{display:flex;gap:16px;margin:34px 0 30px;flex-wrap:wrap}
.hero-meta{display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.14em;color:var(--faint);flex-wrap:wrap}
.hero-meta i{font-style:normal;color:var(--coral)}

/* terminal — intentionally stays dark in BOTH themes (it's a terminal) */
.hero-term{display:flex;flex-direction:column;gap:20px}
.term{
  background:#0E0C09;border:1px solid rgba(217,107,58,.22);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(217,107,58,.06),0 0 60px -20px rgba(217,107,58,.18);
  position:relative;
}
.term::before{content:"";position:absolute;top:-1px;left:24px;width:120px;height:2px;background:var(--coral)}
.term-bar{
  display:flex;align-items:center;gap:7px;padding:12px 16px;font-size:11px;letter-spacing:.08em;
  color:#6E675C;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);
}
.td{width:9px;height:9px;border-radius:50%}
.td-r{background:#E5534B}.td-y{background:#D4A72C}.td-g{background:#57AB5A}
.term-body{padding:20px 18px 22px;font-size:12.5px;line-height:1.9;min-height:264px;color:#A79E90}
.term-body .tl-p{color:#FF8A55}
.term-body .tl-c{color:#F4EFE6}
.term-body .tl-ok{color:#7BE0A2}
.term-body .tl-dim{color:#6E675C}
.term-body .tl-blue{color:#3D8BFF}
.term-body .tl-ev{color:#FF8A55;transition:background .25s,box-shadow .25s,color .25s}
.term-body .tl-ev.hi{background:rgba(217,107,58,.16);box-shadow:0 0 0 1px rgba(217,107,58,.45),0 0 28px -4px rgba(217,107,58,.55);color:#F4EFE6}
.term-body .tl-rotate{color:#F4EFE6}
.cursor{display:inline-block;width:8px;height:15px;background:var(--coral);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.hero-photo{position:relative;margin:0}
.hero-photo img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--line2);filter:saturate(.92) contrast(1.04);
  transition:filter .4s,transform .4s;
}
.hero-photo:hover img{filter:saturate(1.05) contrast(1.06);transform:scale(1.012)}
.hero-photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(217,107,58,.28);transform:translate(10px,10px);pointer-events:none;transition:transform .4s}
.hero-photo:hover::after{transform:translate(6px,6px)}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:13px 0}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 26s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--dim);padding:0 28px;white-space:nowrap}
.ticker-track span b{color:var(--coral);font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ───────────────────────────────── */
.section{padding:110px 0}
.section--tint{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:end;margin-bottom:64px}
.sec-no{font-size:13px;letter-spacing:.2em;color:var(--coral);border:1px solid var(--line);padding:8px 12px;align-self:start}
.sec-h{font-size:clamp(46px,6vw,88px)}
/* one-row headers: sized so the full title fits a single line on desktop */
.sec-h--line{font-size:clamp(34px,4.4vw,58px);line-height:1}
.sec-h--line.sec-h--long{font-size:clamp(27px,3.5vw,46px)}
.sec-kicker{font-size:11.5px;letter-spacing:.18em;color:var(--faint);padding-bottom:10px}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.about-copy p{color:var(--dim);margin-bottom:20px}
.about-copy .lede{font-size:clamp(19px,1.8vw,23px);color:var(--ink);line-height:1.55}
.about-copy em{color:var(--coral-hi)}
.about-cards{display:flex;flex-direction:column;gap:16px}
.fact-card{
  background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--coral);
  padding:22px 24px;transition:transform .25s,border-color .25s,box-shadow .25s;
}
.fact-card:hover{transform:translateX(6px);border-color:var(--line);box-shadow:0 16px 40px -20px rgba(0,0,0,.7)}
.fact-k{font-size:10.5px;letter-spacing:.2em;color:var(--coral-hi)}
.aspiration-k{display:block;margin-top:22px}
.aspiration{
  margin:12px 0 0;padding:6px 0 6px 18px;border-left:3px solid var(--coral);
  font-family:var(--disp);font-size:clamp(19px,1.8vw,23px);line-height:1.35;color:var(--ink);letter-spacing:.01em;
}
.fact-card p{color:var(--dim);font-size:15px;margin-top:10px}
.link{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.14em;color:var(--blue);border-bottom:1px solid rgba(61,139,255,.4);padding-bottom:2px;transition:color .25s}
.link:hover{color:#7FB2FF}

.flag{font-size:17px}

/* stats */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--bg))}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:44px 24px;border-left:1px solid var(--line2);text-align:left}
.stat:first-child{border-left:0}
.stat-n{font-size:clamp(44px,4.6vw,68px);color:var(--coral);display:block;font-variant-numeric:tabular-nums}
.stat-l{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.16em;color:var(--faint)}

/* timeline */
/* ── track record: horizontal timeline ─────── */
.tl-wrap{position:relative}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.tl-hint{font-size:10.5px;letter-spacing:.22em;color:var(--faint)}
.tl-ctrl{display:flex;align-items:center;gap:14px}
.tl-btn{
  width:42px;height:42px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s,transform .25s,background .25s;
}
.tl-btn:hover{border-color:var(--coral);color:var(--coral-hi);background:rgba(217,107,58,.08);transform:translateY(-2px)}
.tl-btn:active{transform:translateY(0) scale(.94)}
.tl-count{font-size:12px;letter-spacing:.16em;color:var(--faint);min-width:66px;text-align:center}
.tl-count b{color:var(--coral-hi);font-weight:400}
.tl-count i{font-style:normal;margin:0 5px}
.tl-scroller{
  overflow-x:auto;scroll-snap-type:x proximity;cursor:grab;user-select:none;-webkit-user-select:none;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.tl-scroller::-webkit-scrollbar{display:none}
.tl-scroller.dragging{cursor:grabbing}
.tl-track{position:relative;display:flex;gap:14px;justify-content:space-between;min-width:100%;padding:0 40px 12px}
.tl-line{
  position:absolute;left:0;right:0;top:95px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.tl-node{
  position:relative;flex:0 0 140px;height:190px;pointer-events:none;
  scroll-snap-align:center;background:none;border:0;padding:0;cursor:pointer;text-align:left;
}
.tl-dot{
  position:absolute;top:89px;left:50%;transform:translateX(-50%);z-index:2;
  width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--coral);
  box-shadow:0 0 0 4px var(--bg);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s,box-shadow .3s;
}
.tl-stem{position:absolute;left:50%;transform:translateX(-50%);width:1px;background:var(--line2);transition:background .3s}
.tl-up .tl-stem{top:74px;height:15px}
.tl-down .tl-stem{top:102px;height:14px}
.tl-ncard{
  position:absolute;left:-20px;right:-20px;height:74px;overflow:hidden;pointer-events:auto;
  background:var(--panel);border:1px solid var(--line2);padding:10px 12px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s,background .3s;
}
.tl-up .tl-ncard{top:0}
.tl-down .tl-ncard{bottom:0}
.tl-ncard::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--coral),var(--coral-hi));transition:width .4s}
.tl-ndate{display:inline-block;font-size:9px;letter-spacing:.14em;color:var(--faint);transition:color .25s}
.tl-ndate::after{content:"·";margin:0 6px;color:var(--faint)}
.tl-ntag{display:inline-block;font-size:9px;letter-spacing:.16em;color:var(--coral-hi)}
.tl-ntitle{display:block;margin-top:5px;font-family:var(--disp);font-weight:400;font-size:14px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.tl-node:hover .tl-ndate{color:var(--coral-hi)}
.tl-node:hover .tl-dot{transform:translateX(-50%) scale(1.3);background:var(--coral)}
.tl-node:hover .tl-stem{background:var(--coral)}
.tl-up:hover .tl-ncard{transform:translateY(-4px)}
.tl-down:hover .tl-ncard{transform:translateY(4px)}
.tl-node:hover .tl-ncard{border-color:var(--line);box-shadow:0 20px 44px -20px rgba(0,0,0,.85)}
.tl-node:hover .tl-ncard::before{width:100%}
.tl-node.is-active .tl-ndate{color:var(--coral-hi)}
.tl-node.is-active .tl-dot{background:var(--coral);transform:translateX(-50%);box-shadow:0 0 0 4px var(--bg),0 0 0 7px rgba(217,107,58,.22),0 0 20px rgba(217,107,58,.75)}
.tl-node.is-active .tl-stem{background:var(--coral)}
.tl-up.is-active .tl-ncard{transform:translateY(-4px)}
.tl-down.is-active .tl-ncard{transform:translateY(4px)}
.tl-node.is-active .tl-ncard{border-color:var(--coral);background:linear-gradient(135deg,rgba(217,107,58,.1),var(--panel) 62%);box-shadow:0 22px 48px -20px rgba(0,0,0,.9),0 0 30px -8px rgba(217,107,58,.28)}
.tl-node.is-active .tl-ncard::before{width:100%}
.tl-node:focus-visible .tl-ncard{outline:2px solid var(--coral-hi);outline-offset:3px}
/* detail panel */
.tl-detail{
  margin-top:30px;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--coral);
  padding:24px 30px 26px;position:relative;overflow:hidden;
}
.tl-detail::after{ /* scan sweep on change */
  content:"";position:absolute;top:0;bottom:0;left:-35%;width:35%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,138,85,.14),transparent);
}
.tl-detail.is-in::after{animation:tlScan .8s ease .05s}
@keyframes tlScan{0%{opacity:1;left:-35%}100%{opacity:0;left:105%}}
.tl-detail .d-anim{opacity:0}
.tl-detail.is-in .d-anim{animation:tlIn .55s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i)*75ms)}
@keyframes tlIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tl-detail.is-out .d-anim{animation:tlOut .18s ease forwards}
@keyframes tlOut{to{opacity:0;transform:translateY(-10px)}}
.d-top{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.d-date{font-size:12px;letter-spacing:.2em;color:var(--coral-hi)}
.d-tag{font-size:9.5px;letter-spacing:.22em;color:var(--ink);border:1px solid var(--line);padding:5px 10px}
.d-title{font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.8vw,36px);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.d-desc{color:var(--dim);font-size:15px;line-height:1.65;max-width:74ch}
.d-desc em{color:var(--coral-hi);font-style:normal}
.d-stats{display:flex;margin-top:18px;border-top:1px solid var(--line2);padding-top:16px;flex-wrap:wrap;gap:16px 0}
.d-stat{padding:0 26px 0 0;margin-right:26px;border-right:1px solid var(--line2)}
.d-stat:last-child{border-right:0;margin-right:0;padding-right:0}
.d-stat b{display:block;font-family:var(--disp);font-weight:400;font-size:32px;line-height:1;color:var(--coral-hi)}
.d-stat span{display:block;margin-top:8px;font-size:9.5px;letter-spacing:.2em;color:var(--faint)}
.d-meta{margin-top:18px;font-size:10px;letter-spacing:.18em;color:var(--faint);line-height:1.8}
.d-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;align-items:start}
.d-poster{margin:0}
.d-poster img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line2);box-shadow:0 22px 48px -20px rgba(0,0,0,.9),0 0 30px -10px rgba(217,107,58,.18);transition:border-color .25s}
.d-poster:hover img{border-color:var(--coral)}

/* photo strip */


/* campus */
.campus-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.campus-copy .lede{font-size:clamp(19px,1.8vw,23px);color:var(--ink);line-height:1.55;margin-bottom:20px}
.campus-copy p{color:var(--dim)}
.campus-note{margin:22px 0;font-size:11px;letter-spacing:.12em;color:var(--coral-hi);border:1px dashed rgba(217,107,58,.55);padding:12px 16px}
.campus-facts{display:flex;flex-direction:column;margin:0}
.campus-facts div{
  display:flex;align-items:center;gap:20px;background:var(--bg);
  border:1px solid var(--line2);padding:15px 20px;margin-top:-1px;
  transition:border-color .25s,background .25s;position:relative;
}
.campus-facts div:first-child{margin-top:0}
.campus-facts div:hover{border-color:var(--coral);background:rgba(217,107,58,.06);z-index:1}
.campus-facts b{font-family:var(--disp);font-weight:400;font-size:34px;line-height:1;color:var(--coral);min-width:50px}
.campus-facts span{font-size:10px;letter-spacing:.16em;color:var(--faint)}
.campus-meta p{font-size:11px;letter-spacing:.1em;color:var(--dim);padding:9px 0;border-bottom:1px solid var(--line2)}
.campus-side{display:flex;flex-direction:column;gap:16px}
.campus-card{background:var(--bg);border:1px solid var(--line2);border-top:3px solid var(--coral);padding:24px 26px;transition:transform .25s,box-shadow .25s}
.campus-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(0,0,0,.8)}
.campus-tbc{margin-top:16px;font-size:15px;letter-spacing:.32em;color:var(--faint)}
/* campus backdrop — image kept quiet under a charcoal/coral blend */
#campus{position:relative;overflow:hidden}
#campus::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('img/campus-bg.png') center/cover no-repeat;
  opacity:.14;filter:brightness(.85) saturate(.75);
}
#campus::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--bg2) 0%,rgba(var(--bg2-rgb),0) 24%,rgba(var(--bg2-rgb),0) 76%,var(--bg2) 100%),
    radial-gradient(60% 55% at 50% 42%,rgba(217,107,58,.07),transparent 72%);
}
#campus .container{position:relative;z-index:1}

/* partners */
.marquee{overflow:hidden;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--bg2);padding:30px 0;margin-bottom:60px}
.marquee-track{display:flex;align-items:center;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.lm{display:flex;align-items:center;padding:0 42px;flex-shrink:0;text-decoration:none}
.lm img{
  height:32px;width:auto;max-width:150px;object-fit:contain;
  opacity:.5;filter:grayscale(.7) brightness(.9);
  transition:opacity .3s,filter .3s,transform .3s;
}
.lm:hover img{opacity:1;filter:grayscale(0) brightness(1);transform:scale(1.12)}
.partner-grid{display:flex;flex-wrap:wrap;gap:18px 42px;align-items:center;justify-content:center}
.wm{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(22px,2.6vw,34px);color:var(--faint);opacity:.75;text-decoration:none;
  transition:color .3s,opacity .3s,transform .3s,text-shadow .3s;
}
.wm:hover{opacity:1;color:var(--wc);transform:translateY(-4px) skewX(-3deg);text-shadow:0 0 26px var(--wc)}
.partner-note{text-align:center;margin-top:40px;font-size:10.5px;letter-spacing:.16em;color:var(--faint)}

/* crew */
.crew-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.crew-card{
  flex:1 1 220px;max-width:262px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--panel);border:1px solid var(--line2);padding:30px 20px 26px;position:relative;overflow:hidden;
  text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.crew-card::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--coral),var(--coral-hi));transition:width .4s}
.crew-card::after{content:"";position:absolute;right:-34px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(217,107,58,.16),transparent 70%);opacity:0;transition:opacity .35s}
.crew-card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:0 26px 52px -24px rgba(0,0,0,.9)}
.crew-card:hover::before{width:100%}
.crew-card:hover::after{opacity:1}
.crew-photo{
  width:104px;height:104px;border-radius:50%;overflow:hidden;margin-bottom:18px;flex-shrink:0;
  border:2px solid var(--line2);display:grid;place-items:center;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.crew-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.crew-card:hover .crew-photo{border-color:var(--coral);box-shadow:0 0 0 4px rgba(217,107,58,.14),0 0 26px rgba(217,107,58,.4);transform:scale(1.05)}
.crew-card:hover .crew-photo img{transform:scale(1.1)}
.crew-photo--init{background:linear-gradient(135deg,rgba(217,107,58,.24),var(--bg3) 62%)}
.crew-photo--init span{font-family:var(--disp);font-size:42px;color:var(--coral-hi)}
.crew-name{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:7px}
.crew-role{font-size:10px;letter-spacing:.24em;color:var(--coral-hi);margin-bottom:18px}
.crew-li{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);padding:7px 14px;
  font-size:10px;letter-spacing:.18em;color:var(--faint);
  transition:border-color .3s,color .3s,box-shadow .3s,background .3s;
}
.crew-li-ic{width:15px;height:15px;filter:grayscale(1) brightness(.75);transition:filter .3s}
.crew-card:hover .crew-li{border-color:rgba(10,102,194,.75);color:var(--ink);background:rgba(10,102,194,.12);box-shadow:0 0 22px -4px rgba(10,102,194,.7)}
.crew-card:hover .crew-li-ic{filter:grayscale(0) drop-shadow(0 0 7px rgba(10,102,194,.95))}
/* AI crew members' action buttons + join card */
.crew-li svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;transition:filter .3s}
.crew-card:hover .crew-li--claw{border-color:var(--coral);color:var(--coral-hi);background:rgba(217,107,58,.1);box-shadow:0 0 20px -4px rgba(217,107,58,.6)}
.crew-card:hover .crew-li--claw svg{filter:drop-shadow(0 0 7px rgba(217,107,58,.95))}
.crew-card:hover .crew-li--hermes{border-color:#7BE0A2;color:#7BE0A2;background:rgba(123,224,162,.1);box-shadow:0 0 20px -4px rgba(123,224,162,.6)}
.crew-card:hover .crew-li--hermes svg{filter:drop-shadow(0 0 7px rgba(123,224,162,.95))}
@keyframes aiPulse{0%{transform:scale(.92);opacity:.65}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
.crew-card--join{border-style:dashed;border-color:rgba(217,107,58,.5);cursor:default}
.crew-card--join:hover{border-color:var(--coral)}
.crew-photo--join{background:linear-gradient(135deg,rgba(217,107,58,.2),var(--bg3) 62%);position:relative}
.crew-photo--join span{font-family:var(--disp);font-size:44px;color:var(--coral-hi)}
.crew-photo--join::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--coral);opacity:0;animation:aiPulse 2.6s ease-out infinite}
.crew-cta{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.2em;color:var(--faint);border:1px solid var(--line2);padding:7px 14px}
.crew-cta-dot{width:7px;height:7px;border-radius:50%;background:var(--coral-hi);box-shadow:0 0 10px var(--coral-hi);animation:pulse 1.6s infinite}

/* faq */
.faq-wrap{max-width:920px}
.faq-pos{
  margin:0 0 36px;padding:20px 24px;border-left:3px solid var(--coral);
  background:linear-gradient(135deg,rgba(217,107,58,.07),var(--panel) 60%);
  color:var(--dim);font-size:15.5px;line-height:1.7;max-width:76ch;
}
.faq-pos strong{color:var(--coral-hi);font-weight:500}
.faq-tabs{
  position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line2);
}
.faq-tabs::-webkit-scrollbar{display:none}
.faq-tab{
  background:none;border:0;cursor:pointer;padding:14px 18px 16px;white-space:nowrap;flex-shrink:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);transition:color .25s;
}
.faq-tab:hover{color:var(--ink)}
.faq-tab.is-on{color:var(--coral-hi)}
.faq-tab .n{margin-left:7px;font-size:9.5px;color:var(--faint);transition:color .25s}
.faq-tab.is-on .n{color:var(--coral)}
.faq-ind{
  position:absolute;bottom:-1px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--coral),var(--coral-hi));
  transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1);
}
.faq-panel{padding-top:6px}
.fq{border-bottom:1px solid var(--line2);opacity:0}
.fq.in{animation:fqIn .45s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i)*55ms)}
@keyframes fqIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fq-q{
  display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;
  background:none;border:0;cursor:pointer;padding:21px 8px;text-align:left;
  font-family:var(--disp);font-weight:400;font-size:clamp(16px,1.7vw,21px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);transition:color .25s;
}
.fq-q:hover{color:var(--coral-hi)}
.fq-x{font-size:20px;color:var(--coral);transition:transform .35s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.fq.open .fq-x{transform:rotate(45deg)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-ai{overflow:hidden;min-height:0}
.fq-body{padding:0 8px 26px;max-width:70ch}
.fq-body p{color:var(--dim);font-size:15px;line-height:1.7;margin:0 0 10px}
.fq-body p:last-child{margin-bottom:0}
.fq-body ul{margin:8px 0 10px;padding:0;list-style:none}
.fq-body li{color:var(--dim);font-size:14.5px;line-height:1.6;padding:3px 0 3px 20px;position:relative}
.fq-body li::before{content:"▸";position:absolute;left:0;top:5px;color:var(--coral);font-size:11px}
.fq-body strong{color:var(--coral-hi);font-weight:500}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* join */
.join{padding:130px 0;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.join::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 600px at 50% 110%,rgba(217,107,58,.16),transparent 65%);
}
.join .container{position:relative}
.join-h{font-size:clamp(56px,8vw,116px);margin:26px 0 56px}
.join-h.join-h--line{font-size:clamp(34px,5.8vw,76px);line-height:1}
.join-h em{color:var(--coral)}
.join-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.join-card{
  background:var(--panel);border:1px solid var(--line2);padding:30px 30px 26px;display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;
}
.join-card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:0 26px 54px -24px rgba(0,0,0,.85)}
.join-card--primary{grid-row:span 2;background:linear-gradient(150deg,rgba(217,107,58,.14),var(--panel) 60%);border-color:var(--line)}
.join-k{font-size:10px;letter-spacing:.2em;color:var(--faint)}
.join-card h3{font-family:var(--disp);font-weight:400;font-size:26px;text-transform:uppercase;margin:14px 0 10px}
.join-card p{color:var(--dim);font-size:15px;flex:1}
.join-go{margin-top:22px;font-size:11px;letter-spacing:.16em;color:var(--coral-hi);transition:letter-spacing .3s}
.join-card:hover .join-go{letter-spacing:.24em}

/* footer */
.footer{border-top:1px solid var(--line);background:var(--bg2);padding:70px 0 46px}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;gap:56px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:18px}
.footer-tag{font-size:clamp(26px,2.6vw,36px);color:var(--dim)}
.footer-nav{display:flex;flex-direction:column;gap:12px}
.footer-nav a{font-size:11.5px;letter-spacing:.16em;color:var(--faint);transition:color .25s,transform .25s;width:max-content}
.footer-nav a:hover{color:var(--coral-hi);transform:translateX(6px)}
.footer-meta{text-align:right;display:flex;flex-direction:column;gap:8px}
.footer-meta p{font-size:10.5px;letter-spacing:.14em;color:var(--faint)}

/* ── reveal ─────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────── */
@media (max-width:1080px){
  :root{--nav-h:72px}
  .brand-logo{height:40px}
  .nav-links{display:none}
  .burger{display:flex}
  /* .nav-links carried the margin-left:auto that right-aligned the bar; with it
     hidden, hand that job to .nav-right or the burger drifts off-screen */
  .nav-right{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:10px}
  .about-grid,.campus-grid{grid-template-columns:1fr;gap:44px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat{border-top:1px solid var(--line2)}
  .stat:nth-child(-n+2){border-top:0}
  .join-grid{grid-template-columns:1fr 1fr}
  .join-card--primary{grid-row:auto;grid-column:span 2}
  .d-body{grid-template-columns:140px minmax(0,1fr);gap:20px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-meta{text-align:left}
}
@media (max-width:640px){
  /* brand + toggle + CTA + burger are wider than a phone nav, and body has
     overflow-x:hidden, so the burger was clipped away entirely and the menu
     could not be opened. The CTA is already the last item inside the menu,
     so drop it from the bar here and let the toggle go icon-only. */
  .nav{gap:14px}
  .nav-right{gap:10px}
  .nav-right .btn{display:none}
  .nav .tt-lb{display:none}
  /* 44px tap targets for the two controls left in the bar */
  .theme-toggle{padding:0;width:44px;height:44px;justify-content:center}
  .burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center}
  :root{--nav-h:64px}
  .brand-logo{height:31px}
  .brand-logo-lg{width:min(210px,100%)}
  body{font-size:16px}
  .section{padding:76px 0}
  .sec-head{grid-template-columns:auto 1fr;gap:16px}
  .sec-kicker{grid-column:1/-1;padding-bottom:0}
  .hero{padding-top:calc(var(--nav-h) + 40px)}
  .hero-h{font-size:clamp(52px,15vw,72px)}
  .tl-hint{display:none}
  .tl-track{padding:0 20px 10px}
  .tl-node{flex-basis:150px}
  .tl-detail{padding:24px 20px 26px;margin-top:32px}
  .d-body{grid-template-columns:1fr;gap:18px}
  .d-poster{max-width:170px}
  .d-stat{padding-right:20px;margin-right:20px}
  .d-stat b{font-size:30px}
  .campus-facts b{font-size:28px}
  .join-grid{grid-template-columns:1fr}
  .join-card--primary{grid-column:auto}
  .join{padding:90px 0}
  .term-body{min-height:230px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}