:root{
  --bg:#0A0A09;
  --bg2:#121210;
  --line:#26261F;
  --fg:#EDEBE4;
  --dim:#8A887F;
  --acc:#D4FF00;
  --pad:clamp(16px,4vw,56px);
  --sans:'Onest',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:var(--bg)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.dim{color:var(--dim)}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);background:linear-gradient(var(--bg) 40%,transparent);}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--fg);font-weight:700;font-size:16px;letter-spacing:-.02em}
.logo-text{font-size:12px;line-height:1.15;font-weight:500;color:var(--dim)}
.nav{display:flex;gap:28px;font-size:14px;color:var(--dim)}
.nav a:hover{color:var(--fg)}
.hdr-right{display:flex;align-items:center;gap:14px}
.lang{background:none;border:0;color:var(--dim);font:500 12px var(--mono);cursor:pointer;display:flex;gap:4px;padding:8px 2px}
.lang i{font-style:normal;opacity:.4}
.lang [data-l].on{color:var(--fg)}
.btn-in{display:inline-flex;align-items:center;height:40px;padding:0 20px;background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;border-radius:999px;transition:background .25s}
.btn-in:hover{background:var(--acc)}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) 0;position:relative}
.hero-meta{display:flex;justify-content:space-between;gap:16px;color:var(--dim);margin-bottom:auto;padding-top:24px;flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:8px}
.live b{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.25}}
.hero-title{font-weight:700;font-size:clamp(48px,11.5vw,184px);line-height:.9;letter-spacing:-.045em;margin:48px 0 40px}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:inline-block}
.hero-title .accent{color:var(--acc)}
.hero-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;padding-bottom:48px}
.hero-lead{font-size:clamp(18px,1.7vw,22px);color:var(--dim);max-width:34ch}
.log{border:1px solid var(--line);background:var(--bg2);font-size:11px;text-transform:none;height:150px;overflow:hidden;display:flex;flex-direction:column}
.log-head{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--dim)}
.log ul{list-style:none;padding:8px 12px;display:flex;flex-direction:column;justify-content:flex-end;flex:1;gap:3px;overflow:hidden}
.log li{flex-shrink:0;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
.log li b{color:var(--acc);font-weight:500}
.log li em{font-style:normal;color:var(--fg)}
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;margin:0 calc(var(--pad)*-1);padding:18px 0;color:var(--dim)}
.marquee-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.marquee-track span{padding:0 28px;font-size:13px}
.marquee-track span::after{content:"✦";margin-left:56px;color:var(--line)}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(96px,14vw,180px) var(--pad) 0}
.sec-head{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin-bottom:clamp(40px,6vw,80px)}
.idx{color:var(--acc)}
.sec-head h2{font-size:clamp(14px,1.2vw,16px);font-weight:500;color:var(--dim)}
.statement,.closing{font-size:clamp(30px,4.6vw,68px);line-height:1.06;letter-spacing:-.03em;font-weight:500;max-width:20ch}
.statement .w,.closing .w{opacity:.15;transition:opacity .3s}

.dirs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(56px,8vw,112px);border-top:1px solid var(--line)}
.dir{padding:28px 24px 32px 0;border-right:1px solid var(--line)}
.dir+.dir{padding-left:24px}
.dir:last-child{border-right:0}
.dir h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:40px 0 10px}
.dir p{color:var(--dim);font-size:15px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:var(--bg2);border:1px solid var(--line);padding:24px;min-height:240px;display:flex;flex-direction:column;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover{border-color:#3d3d33;transform:translateY(-4px)}
.card-xl{grid-column:span 2;grid-row:span 2}
.card-l{grid-column:span 2}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto}
.card h3{font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;margin:48px 0 8px}
.card-xl h3{font-size:clamp(44px,6vw,96px);letter-spacing:-.05em}
.card-xl p{font-size:clamp(17px,1.4vw,20px);max-width:30ch}
.card p{color:var(--dim);font-size:15px}
.card-xl{background:radial-gradient(120% 90% at 100% 0%,#1a1c0d 0%,var(--bg2) 55%)}
.tag{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);padding:5px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.tag.live{color:var(--acc);border-color:#3a4410}
.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.pipeline{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;margin-top:28px;padding:20px 0;border-bottom:1px solid var(--line)}
.pipeline ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:18px;font-weight:500}

/* infra */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{border-top:1px solid var(--fg);padding-top:18px}
.num{font-size:clamp(56px,7vw,112px);font-weight:700;letter-spacing:-.05em;line-height:1;margin-bottom:16px;font-variant-numeric:tabular-nums}
.stat p{color:var(--dim);font-size:15px;max-width:26ch}
.infra-list{margin-top:clamp(64px,9vw,120px)}
.row{display:grid;grid-template-columns:200px 1fr 1.2fr;gap:24px;padding:28px 0;border-top:1px solid var(--line);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--line)}
.row h3{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.02em}
.row p{color:var(--dim)}

/* people */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.person{border:1px solid var(--line);padding:28px 24px;min-height:300px;display:flex;flex-direction:column}
.person h3{font-size:clamp(28px,2.8vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:auto;margin-bottom:14px}
.person p{color:var(--dim);font-size:15px}

/* vision */
.principles{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.principles li{display:flex;gap:24px;padding:32px 0;border-top:1px solid var(--line)}
.principles li .mono{color:var(--acc);padding-top:8px}
.principles h3{font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
.principles p{color:var(--dim)}
.closing{margin-top:clamp(96px,12vw,160px);max-width:16ch}

/* footer */
.ftr{padding:clamp(96px,12vw,160px) var(--pad) 40px}
.ftr-top{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:32px 0 48px;flex-wrap:wrap}
.ftr-brand{display:flex;align-items:center;gap:16px;font-weight:500}
.ftr-legal{font-size:12px;line-height:1.7;color:#5f5e57}
.ftr-legal a:hover{color:var(--fg)}
.ftr-links{display:flex;gap:20px;margin:10px 0}
.ftr-links a{text-decoration:underline;text-underline-offset:3px}
.pay{margin-top:10px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pay img{height:20px;width:auto;opacity:.6;transition:opacity .2s}
.pay img{filter:grayscale(1) brightness(0) invert(.78) contrast(85%)}
@media(max-width:640px){.pay{gap:10px}.pay img{height:16px}}
.pay img:hover{opacity:1}

/* reveal initial state only when JS is ready */
.js .reveal{opacity:0;transform:translateY(32px)}

/* responsive */
@media (max-width:1024px){
  .nav{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card-xl{grid-row:auto}
  .dirs{grid-template-columns:repeat(2,1fr)}
  .dir:nth-child(2){border-right:0}
  .dir:nth-child(3){padding-left:0}
  .dir:nth-child(n+3){border-top:1px solid var(--line)}
  .stats{grid-template-columns:repeat(2,1fr);gap:40px 12px}
  .row{grid-template-columns:140px 1fr}
  .row p{grid-column:2}
}
@media (max-width:680px){
  body{font-size:16px}
  .logo-text{display:none}
  .btn-in{height:36px;padding:0 16px}
  .hero{padding-top:96px}
  .hero-bottom{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .log{height:120px}
  .dirs,.bento,.people,.principles{grid-template-columns:1fr}
  .dir,.dir+.dir{padding:24px 0;border-right:0;border-top:1px solid var(--line)}
  .dirs{border-top:0}
  .dir h3{margin-top:16px}
  .card-xl,.card-l{grid-column:auto}
  .card{min-height:200px}
  .stats{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr;gap:6px}
  .row p{grid-column:auto}
  .person{min-height:220px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track,.live b{animation:none}
  .js .reveal{opacity:1;transform:none}
  .statement .w,.closing .w{opacity:1}
}