:root{
  --bg:#07080A; --surface:#0D0F12; --surface-2:#121417;
  --line: rgba(243,245,244,0.09); --line-strong: rgba(243,245,244,0.16);
  --ink:#F3F5F4; --ink-mute:#9AA3A8; --ink-faint:#767D82;
  --accent: oklch(80% 0.19 152); --accent-soft: oklch(80% 0.19 152 / 0.12);
  --accent-2: oklch(78% 0.18 230); --accent-2-soft: oklch(78% 0.18 230 / 0.12);
  --red: #CE1126;
  --display: 'Unbounded', 'Arial Black', sans-serif;
  --sans: 'Sora', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --pad-x: 72px;
  --cols-2: 1fr 1fr;
  --cols-3: repeat(3,1fr);
  --cols-4: repeat(4,1fr);
  --cols-footer: 1.6fr 1fr 1fr 1fr;
  --cols-side: 1.5fr 1fr;
  --cols-hero: 1.05fr 0.75fr;
  --hero-h1-maxw: 11ch;
}

:root[data-theme="light"]{
  --bg:#F7F8F6; --surface:#FFFFFF; --surface-2:#F0F2EF;
  --line: rgba(10,15,12,0.10); --line-strong: rgba(10,15,12,0.18);
  --ink:#0E1210; --ink-mute:#4B534E; --ink-faint:#6B726D;
  --accent: oklch(52% 0.16 152); --accent-soft: oklch(52% 0.16 152 / 0.10);
  --accent-2: oklch(48% 0.15 230); --accent-2-soft: oklch(48% 0.15 230 / 0.10);
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); overflow-x:hidden; transition: background .25s ease, color .25s ease; }
a{ color: var(--accent); text-decoration:none; }
a:hover{ color: var(--accent-2); }
img{ max-width:100%; }

.mono-tag{
  font-family: var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--accent); display:inline-flex; align-items:center; gap:8px;
}
.mono-tag::before{ content:""; width:6px; height:6px; background:var(--accent); box-shadow:0 0 12px var(--accent); flex-shrink:0; }

.btn{
  font-family: var(--sans); font-weight:600; font-size:14px; letter-spacing:0.01em;
  padding:15px 26px; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid transparent; transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--accent); color:#04140C; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.btn--primary:hover{ background: oklch(86% 0.19 152); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); }

.card{
  background: var(--surface); border:1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.card:hover{ transform: translateY(-4px); background: var(--surface-2); }

.chip{
  font-family: var(--mono); font-size:11.5px; color: var(--ink-mute);
  border:1px solid var(--line-strong); padding:8px 14px; letter-spacing:0.02em;
}
.tag-pill{
  display:inline-block; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:#04141F; background: var(--accent-2);
  padding:5px 10px; border-radius:100px; margin-bottom:20px; font-weight:600;
}

.field label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; background:transparent; border:1px solid var(--line-strong);
  color:var(--ink); font-family:var(--sans); font-size:14.5px; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }

@keyframes floatGlow{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-34px,24px) scale(1.09); } }
@keyframes gridBreathe{ 0%,100%{ opacity:0.5; } 50%{ opacity:0.26; } }
@keyframes radarSpin{ to{ transform:rotate(360deg); } }
@keyframes dashFlow{ to{ stroke-dashoffset:-24; } }
@keyframes nodePulseA{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
@keyframes nodePulseB{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes drift{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:0.7; } 88%{ opacity:0.7; } 100%{ transform:translateY(-160px); opacity:0; } }
.reveal{ animation: riseIn 0.9s cubic-bezier(.16,1,.3,1) both; }
.pulse-a{ transform-box: fill-box; transform-origin: center; animation: nodePulseA 2.6s ease-in-out infinite; }
.pulse-b{ transform-box: fill-box; transform-origin: center; animation: nodePulseB 2.6s ease-in-out infinite 0.4s; }
.particle{ position:absolute; border-radius:50%; background:var(--accent); animation: drift linear infinite; }

/* ---- shared nav ---- */
.nav{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad-x); border-bottom:1px solid var(--line);
  max-width:1440px; margin:0 auto; flex-wrap:wrap; gap:14px;
}
.nav-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.nav-brand img{ height:26px; width:auto; }
:root[data-theme="light"] .nav-brand img{ filter: invert(1); }
.nav-brand span{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:0.02em; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ padding:10px 18px; font-size:13.5px; color:var(--ink-mute); border-radius:2px; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; padding:0; background:transparent; border:1px solid var(--line-strong); cursor:pointer;
}
.nav-toggle span{ display:block; height:1.5px; width:18px; margin:0 auto; background:var(--ink); }

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; background:transparent; border:1px solid var(--line-strong);
  color:var(--ink-mute); cursor:pointer; flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.theme-toggle svg{ display:block; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.lang-switch{
  display:flex; align-items:center; justify-content:center;
  height:38px; padding:0 12px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  border:1px solid var(--line-strong); color:var(--ink-mute); flex-shrink:0;
}
.lang-switch:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- shared footer (always dark, regardless of site theme) ---- */
.site-footer{
  --ink:#F3F5F4; --ink-mute:#9AA3A8; --ink-faint:#767D82;
  --line: rgba(243,245,244,0.09); --line-strong: rgba(243,245,244,0.16);
  --accent: oklch(80% 0.19 152);
  position:relative; padding:76px var(--pad-x) 40px; border-top:1px solid var(--line); background:#050506;
}
.footer-grid{
  max-width:1440px; margin:0 auto; display:grid; grid-template-columns:var(--cols-footer); gap:40px;
  padding-bottom:52px; margin-bottom:28px; border-bottom:1px solid var(--line);
}
.footer-bottom{
  max-width:1440px; margin:0 auto; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-faint);
}

main{ display:block; }

/* ---- responsive ---- */
/* large tablets / small laptops: stack the hero, let its heading wrap naturally */
@media (max-width:1100px){
  :root{ --cols-hero:1fr; --hero-h1-maxw:none; }
  /* hero video is 16:9 (1920x1080) — match the box to it so object-fit:cover
     never has to zoom in and crop the baked-in captions off the sides */
  .hero-media{ height:auto !important; aspect-ratio:16/9; }
}

/* tablets (iPad portrait and similar, ~768-900px): looser grids, menu becomes a dropdown */
@media (max-width:900px){
  :root{
    --pad-x:32px;
    --cols-3: repeat(2,1fr); --cols-4: repeat(2,1fr);
    --cols-footer: 1fr 1fr; --cols-side: 1fr;
  }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:20;
    flex-direction:column; align-items:stretch; background:var(--surface);
    border-bottom:1px solid var(--line); padding:6px var(--pad-x) 14px; gap:0;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:13px 4px; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; }
}

/* phones (portrait) */
@media (max-width:760px){
  :root{
    --pad-x:20px;
    --cols-2:1fr; --cols-3:1fr; --cols-4:1fr; --cols-footer:1fr; --cols-side:1fr; --cols-hero:1fr;
  }
  h1{ font-size:clamp(30px, 8vw, 42px) !important; }
}

@media (max-width:480px){
  .btn{ padding:13px 20px; font-size:13px; }
  .lang-switch{ padding:0 9px; font-size:11px; }
  .theme-toggle{ width:34px; height:34px; }
}

/* small phones (iPhone SE / older Android, <=380px): trim the nav so it never wraps */
@media (max-width:380px){
  .nav{ padding:16px var(--pad-x); }
  .nav-brand span{ font-size:16px; }
  .nav-cta{ padding:10px 14px !important; font-size:12.5px !important; }
}