/* =========================================================================
   SYSTMS — systms.ai
   Design system stylesheet. Tokens + chrome + brand fingerprint motifs.
   Binding reference: DESIGN-BRIEF.md
   ========================================================================= */

:root{
  --bg:        #0A0A0A;
  --panel:     #101010;
  --panel-2:   #141414;
  --line:      #1F1F1F;
  --line-2:    #2A2A2A;
  --text:      #F2F0EB;
  --muted:     #8A8A88;
  --muted-2:   #5A5A58;
  --accent:    #FF2D1E;
  --accent-ink:#FFFFFF;

  --gutter: 28px;
  --maxw: 1440px;

  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --display: 'Archivo Black', 'Archivo', 'Helvetica Neue', 'Arial Black', Arial, sans-serif;
  --sans: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--accent-ink); }
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

/* ---- Display headline base ---------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:900;
  font-variation-settings:'wght' 900, 'wdth' 100;
  letter-spacing:-0.02em;
  line-height:0.86;
  text-transform:none;
}

/* ---- Mono chrome -------------------------------------------------------- */
.mono{ font-family:var(--mono); }
.up{ text-transform:uppercase; }

/* ---- Dot suffix (.u-dot) ------------------------------------------------ */
.u-dot::after{
  content:"";
  display:inline-block;
  width:0.20em;height:0.20em;
  border-radius:50%;
  background:var(--accent);
  margin-left:0.06em;
  vertical-align:baseline;
  transform:translateY(-0.02em);
}

/* ---- Eyebrow (red hairline prefix) -------------------------------------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11px; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .line{
  display:block; width:60px; height:1px; background:var(--accent);
  flex:none;
}
.eyebrow.center{ justify-content:center; }

/* ---- Pills / chips ------------------------------------------------------ */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border:1px solid var(--line-2); border-radius:999px;
  font-size:10.5px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text); background:transparent;
  transition:border-color .2s ease, color .2s ease;
}
.pill .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;
}
.pill.action:hover{ border-color:#4a4a48; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  border:1px solid transparent; transition:filter .2s ease, border-color .2s ease, transform .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:#4a4a48; }

/* ---- Corner crops (viewfinder brackets) --------------------------------- */
.crop{ position:absolute; width:22px; height:22px; border:2px solid var(--accent); z-index:3; pointer-events:none; }
.crop.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.crop.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.crop.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.crop.br{ bottom:0; right:0; border-left:0; border-top:0; }

/* ---- Plinth glow -------------------------------------------------------- */
.plinth{
  position:absolute; bottom:5%; left:8%; right:8%; height:130px;
  background:radial-gradient(ellipse at center, rgba(255,45,30,0.20) 0%, rgba(255,45,30,0) 70%);
  filter:blur(22px); z-index:0; pointer-events:none;
}

/* ---- Grain overlay ------------------------------------------------------ */
.grain{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  /* normal blend (was mix-blend-mode:overlay) — overlay forces a full re-blend
     over the live hero video every frame, which jitters playback. Plain noise
     at this opacity looks all but identical and composites cheaply. */
  opacity:0.05;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* ---- Technical grid backdrop -------------------------------------------- */
.gridbg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 52% 64% at 78% 46%, #000 24%, transparent 72%);
          mask-image:radial-gradient(ellipse 52% 64% at 78% 46%, #000 24%, transparent 72%);
  opacity:0.5;
}

/* ---- Layout helpers ----------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ position:relative; border-top:1px solid var(--line); }
.section-pad{ padding:88px 0; }
.hrule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---- Section heads ------------------------------------------------------ */
.sec-h{
  font-family:var(--display); font-weight:900;
  letter-spacing:-0.025em; line-height:0.92;
  font-size:clamp(40px, 5.2vw, 80px);
  margin:18px 0 0;
}
.sub-h{
  font-family:var(--display); font-weight:900;
  letter-spacing:-0.02em; line-height:0.95;
  font-size:clamp(28px, 3.4vw, 46px);
  margin:0;
}
.mono-lead{
  font-family:var(--mono); text-transform:uppercase;
  font-size:13px; letter-spacing:0.04em; line-height:1.75; color:var(--muted);
  max-width:62ch;
}

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes scan{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(100%); } }
@keyframes ringspin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* ---- Wide black grotesque on all display headlines (matches brand) ------ */
.display, .sec-h, .sub-h, .hero-h1, .stat .num, .proc-num, .proc-title,
.founder .fname, .founder .port .ini, .hww-cols .col h4, .fstep h3,
.form-done .big{
  font-variation-settings:'wght' 900, 'wdth' 100;
}

/* ---- Fallback when the Archivo webfont is unavailable (offline / sandbox)
   Arial Black / Helvetica heavy is already a wide black grotesque, so the
   fallback needs no transform — just normalise variation settings.       */
html.no-archivo{ --display:'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif; }
html.no-archivo .display, html.no-archivo .sec-h, html.no-archivo .sub-h,
html.no-archivo .hero-h1, html.no-archivo .stat .num, html.no-archivo .proc-num,
html.no-archivo .proc-title, html.no-archivo .founder .fname,
html.no-archivo .founder .port .ini, html.no-archivo .hww-cols .col h4,
html.no-archivo .fstep h3, html.no-archivo .form-done .big, html.no-archivo .smark{
  font-variation-settings:normal;
  font-weight:900;
  letter-spacing:-0.02em;
}