/* ============================================================
   CHARGING — design system
   character: Control bench · motif: Isogrid · symmetry: n=3
   motion: Cascade · palette: HV-orange / grid-teal on graphite
   corners: Asymmetric (keyed-connector notch)
   ============================================================ */

:root{
  --u:8px; --u2:16px; --u3:24px; --u4:32px; --u6:48px; --u8:64px; --u12:96px;
  --u16:128px; --phi:1.618;

  --base:#06090D; --base-2:#0A0F15; --panel:#0D1218; --panel-2:#111821;
  --inset:#090D12; --line:#19222C; --line-2:#223040; --line-3:#2D3E51;
  --ink:#E9EEF3; --ink-2:#C3CDD7; --muted:#8593A1; --muted-2:#66727E;
  --accent:#F2731C; --accent-d:#C25A11; --accent-w:rgba(242,115,28,.12);
  --signal:#2FD4C4; --signal-d:#1FA89B; --signal-w:rgba(47,212,196,.10);
  --warn:#E8B33C; --bad:#E2574C; --good:#4FD98A;
  --hs-blue:#3B82F6;

  --sans:'Archivo Narrow','Roboto Condensed','Oswald','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono','DejaVu Sans Mono',Menlo,monospace;

  --t0:11px;
  --t1:clamp(10px,.5vw + 9px,12px);
  --t2:clamp(12px,.4vw + 11px,14px);
  --t3:clamp(14px,.35vw + 13px,16px);
  --t4:clamp(17px,.6vw + 15px,21px);
  --t5:clamp(22px,1.3vw + 18px,32px);
  --t6:clamp(30px,3.0vw + 16px,58px);
  --t7:clamp(34px,3.6vw + 14px,66px);

  --cut:12px; --hair:1px; --stroke:1.5px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --settle:cubic-bezier(.16,.84,.28,1.02);
  --pad:clamp(20px,4.2vw,72px);
  --wide:1360px; --mid:1080px; --read:74ch;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--u12); }
body{
  margin:0; background:var(--base); color:var(--ink);
  font-family:var(--sans); font-size:var(--t3); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer;
        -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
input,select,textarea{ font:inherit; }
:focus-visible{ outline:var(--stroke) solid var(--accent); outline-offset:3px; }
::selection{ background:var(--accent); color:var(--base); }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--line-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--line-3); }
::-webkit-scrollbar-track{ background:var(--base); }

/* ---- primitives -------------------------------------------------- */
.wrap{ width:min(100% - var(--pad)*2, var(--wide)); margin-inline:auto; }
.wrap-mid{ width:min(100% - var(--pad)*2, var(--mid)); margin-inline:auto; }
.mcaps{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.14em;
        text-transform:uppercase; color:var(--muted); }
.notch{ clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,0 100%); }
.notch-sm{ clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),
        calc(100% - 6px) 100%,0 100%); }
.hr{ height:var(--hair); background:var(--line); border:0; margin:0; }
.tick{ height:var(--hair);
  background:repeating-linear-gradient(to right,var(--line-2) 0 1px,transparent 1px 24px); }

/* ---- logo -------------------------------------------------------- */
.logo{ width:var(--u6); height:var(--u6); color:var(--accent); flex:0 0 auto; }
.logo .shell{ animation:lgShell 9s var(--ease) infinite; }
.logo .b1{ animation:lgFall 9s var(--ease) infinite; }
.logo .b2{ animation:lgFall 9s var(--ease) infinite .5s; }
.logo .b3{ animation:lgFall 9s var(--ease) infinite 1s; }
.logo .nodes{ animation:lgSpin 9s cubic-bezier(.7,0,.2,1) infinite;
  transform-box:fill-box; transform-origin:center; }
@keyframes lgShell{ 0%,100%{opacity:.95} 46%{opacity:.62} }
@keyframes lgFall{ 0%{opacity:0;transform:translateY(-7px)} 9%{opacity:1;transform:none}
  52%{opacity:1;transform:none} 62%{opacity:.15} 100%{opacity:0;transform:translateY(-7px)} }
@keyframes lgSpin{ 0%,30%{transform:rotate(0)} 62%,100%{transform:rotate(120deg)} }
.lockup{ display:flex; align-items:center; gap:var(--u2); }
.lockup .wm{ display:flex; flex-direction:column; line-height:1; }
.lockup .wm b{ font-size:var(--t3); font-weight:700; letter-spacing:.03em; }
.lockup .wm span{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.16em;
  color:var(--muted); margin-top:3px; }
.si-badge{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.1em;
  color:var(--accent); border:var(--hair) solid var(--line-2); padding:2px 5px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%); }

/* ---- buttons ----------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--u);
  min-height:46px; padding:0 var(--u3); font-family:var(--mono); font-size:var(--t1);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--accent); color:var(--base); transition:all .2s var(--ease);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); }
.btn:hover{ background:#FF8630; transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:none; color:var(--ink); box-shadow:inset 0 0 0 var(--hair) var(--line-3); }
.btn.ghost:hover{ background:var(--panel); box-shadow:inset 0 0 0 var(--hair) var(--accent);
  color:var(--accent); }
.btn.teal{ background:var(--signal); }
.btn.teal:hover{ background:#43E8D8; }
.btn.sm{ min-height:38px; padding:0 var(--u2); }
.btn[disabled]{ opacity:.35; pointer-events:none; }

/* ---- chips & pills ----------------------------------------------- */
.chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:var(--t1); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:var(--hair) solid var(--line-2); padding:5px var(--u); white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%); }
.chip.on{ color:var(--signal); border-color:var(--signal-d); }
.chip.hot{ color:var(--accent); border-color:var(--accent-d); }
.chip .dot{ width:6px; height:6px; background:currentColor; border-radius:50%; }

/* ---- cards ------------------------------------------------------- */
.card{ position:relative; background:linear-gradient(180deg,var(--panel),var(--inset));
  border:var(--hair) solid var(--line); padding:var(--u3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 2px 14px rgba(0,0,0,.4);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,0 100%);
  transition:border-color .22s var(--ease), transform .28s var(--settle); }
.card:hover{ border-color:var(--line-3); }
.card h3{ margin:0 0 var(--u) 0; font-size:var(--t4); font-weight:700; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--muted); font-size:var(--t2); line-height:1.62; }

/* ---- section furniture ------------------------------------------- */
.sec{ padding-block:clamp(var(--u8),9vw,var(--u16)); position:relative; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--u4); flex-wrap:wrap; margin-bottom:var(--u6); }
.sec-head .lhs{ max-width:64ch; }
.eyebrow{ display:flex; align-items:center; gap:var(--u2); font-family:var(--mono);
  font-size:var(--t1); letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--u2); }
.eyebrow::before{ content:''; width:22px; height:var(--stroke); background:var(--accent); }
.eyebrow.teal{ color:var(--signal); } .eyebrow.teal::before{ background:var(--signal); }
h2.big{ margin:0; font-size:var(--t6); font-weight:700; line-height:1.06;
  letter-spacing:-.025em; }
h3.mid{ margin:0; font-size:var(--t5); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; }
.sub{ margin:var(--u2) 0 0; color:var(--muted); font-size:var(--t3); line-height:1.62;
  max-width:60ch; }

/* ---- nav --------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:60; background:rgba(6,9,13,.86);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px);
  border-bottom:var(--hair) solid var(--line); }
.nav .inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--u3); height:var(--u8); }
.nav .logo{ width:var(--u4); height:var(--u4); }
.nav .lockup .wm b{ font-size:var(--t2); }
.nav .lockup .wm span{ font-size:9px; letter-spacing:.2em; }
.nav-links{ display:flex; align-items:center; gap:var(--u3); }
.nav-links a{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding:var(--u) 0; min-height:44px;
  display:inline-flex; align-items:center; transition:color .18s var(--ease); }
.nav-links a:hover,.nav-links a[aria-current]{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:var(--u2); }
.burger{ display:none; width:46px; height:46px; place-items:center; color:var(--muted); }

/* ---- footer ------------------------------------------------------ */
.foot{ border-top:var(--hair) solid var(--line); background:var(--base-2);
  padding-block:var(--u8) var(--u4); }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--u6) var(--u4); }
.foot h4{ margin:0 0 var(--u2); font-family:var(--mono); font-size:var(--t1);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot li a{ font-size:var(--t2); color:var(--muted); transition:color .18s var(--ease); }
.foot li a:hover{ color:var(--accent); }
.foot .about p{ color:var(--muted); font-size:var(--t2); margin:var(--u2) 0 0; max-width:38ch; }
.foot-legal{ margin-top:var(--u6); padding-top:var(--u3);
  border-top:var(--hair) solid var(--line); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:var(--u2); }
.foot-legal .l,.foot-legal .r{ display:flex; align-items:center; gap:var(--u2);
  flex-wrap:wrap; font-family:var(--mono); font-size:var(--t1); color:var(--muted-2);
  letter-spacing:.04em; }
.foot-legal a{ color:var(--muted-2); } .foot-legal a:hover{ color:var(--accent); }
.hs-dot{ width:8px; height:8px; border-radius:50%; background:var(--hs-blue);
  box-shadow:0 0 8px rgba(59,130,246,.7); flex:0 0 auto; }
.disclaimer{ margin-top:var(--u3); font-family:var(--mono); font-size:10px; line-height:1.7;
  color:var(--muted-2); opacity:.85; max-width:110ch; }

/* ---- isogrid background ------------------------------------------ */
.iso{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(60deg,  rgba(242,115,28,.10) 0 1px, transparent 1px 55.4px),
    repeating-linear-gradient(-60deg, rgba(242,115,28,.10) 0 1px, transparent 1px 55.4px),
    repeating-linear-gradient(0deg,   rgba(242,115,28,.07) 0 1px, transparent 1px 48px);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 78%); }
.iso.teal{ background-image:
    repeating-linear-gradient(60deg,  rgba(47,212,196,.10) 0 1px, transparent 1px 55.4px),
    repeating-linear-gradient(-60deg, rgba(47,212,196,.10) 0 1px, transparent 1px 55.4px),
    repeating-linear-gradient(0deg,   rgba(47,212,196,.07) 0 1px, transparent 1px 48px); }
.iso.drift{ animation:isoDrift 44s linear infinite; }
@keyframes isoDrift{ from{ background-position:0 0,0 0,0 0 }
                     to{ background-position:0 -166px,0 166px,0 -144px } }

/* ---- reveal on scroll -------------------------------------------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease),
  transform .6s var(--settle); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.06s } .rv.d2{ transition-delay:.12s }
.rv.d3{ transition-delay:.18s } .rv.d4{ transition-delay:.24s }
.rv.d5{ transition-delay:.30s } .rv.d6{ transition-delay:.36s }

/* ---- data table -------------------------------------------------- */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--t2); }
.tbl th{ font-family:var(--mono); font-size:var(--t1); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:500; text-align:left;
  padding:var(--u) var(--u2); border-bottom:var(--hair) solid var(--line-2); }
.tbl td{ padding:var(--u) var(--u2); border-bottom:var(--hair) solid var(--line);
  color:var(--ink-2); }
.tbl td:first-child{ color:var(--ink); font-weight:700; }
.tbl tr:hover td{ background:rgba(255,255,255,.018); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---- responsive -------------------------------------------------- */
@media (max-width:1080px){
  .foot-grid{ grid-template-columns:1fr 1fr 1fr; }
  .foot .about{ grid-column:1/-1; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-links.open{ display:flex; position:fixed; inset:var(--u8) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0; background:var(--base-2);
    border-bottom:var(--hair) solid var(--line); padding:var(--u2) var(--pad) var(--u3);
    z-index:59; }
  .nav-links.open a{ padding:var(--u2) 0; border-bottom:var(--hair) solid var(--line); }
  .burger{ display:grid; }
  .nav .lockup .wm span{ display:none; }
}
@media (max-width:640px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .sec-head{ margin-bottom:var(--u4); }
  .nav-cta .btn.ghost{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
}