/* NoxCore Security — shared site stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg: #fafafc;
  --surface: #ffffff;
  --panel-line: rgba(10,10,20,0.10);
  --hairline: rgba(10, 10, 20, 0.12);
  --muted-dot: rgba(10, 10, 20, 0.18);
  --cyan: #00a7c4;
  --magenta: #d81b60;
  --ink: #0a0a12;
  --muted: #6b7280;
  --muted2: #33394a;
  --tagline-c: #333947;
  --status-border: rgba(10, 10, 20, 0.16);
  --status-bg: rgba(10, 10, 20, 0.02);
  --glow1: rgba(216,27,96,0.05);
  --glow2: rgba(0,167,196,0.06);
  --alert: #b45309;
  --alert-bg: rgba(180,83,9,0.06);
  --alert-border: rgba(180,83,9,0.28);
  --grad: linear-gradient(100deg, var(--magenta), var(--cyan) 85%);
  --grid-line: rgba(10,10,20,0.05);
  --row-tint: rgba(0,167,196,0.05);
  --chip-text-on-accent: #ffffff;
  --shadow-c: rgba(20,20,30,0.10);
}
html[data-theme="dark"]{
  --bg: #06060a;
  --surface: #101018;
  --panel-line: rgba(255,255,255,0.09);
  --hairline: rgba(255, 255, 255, 0.14);
  --muted-dot: rgba(255, 255, 255, 0.22);
  --cyan: #00f0ff;
  --magenta: #ff2d75;
  --ink: #f2f8fb;
  --muted: #8891a0;
  --muted2: #c7ced6;
  --tagline-c: #c7ced6;
  --status-border: rgba(255, 255, 255, 0.16);
  --status-bg: rgba(255, 255, 255, 0.03);
  --glow1: rgba(255,45,117,0.10);
  --glow2: rgba(0,240,255,0.10);
  --alert: #fbbf24;
  --alert-bg: rgba(251,191,36,0.08);
  --alert-border: rgba(251,191,36,0.3);
  --grid-line: rgba(0,240,255,0.05);
  --row-tint: rgba(0,240,255,0.06);
  --chip-text-on-accent: #06060a;
  --shadow-c: rgba(0,0,0,0.35);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.6;
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}
a{ color: inherit; }
img{ max-width:100%; }
.container{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* fixed bg texture layers */
.bg-grid{
  position: fixed; inset: 0; z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
}
.bg-glow{
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(650px 320px at 14% 0%, var(--glow1), transparent 60%),
    radial-gradient(750px 400px at 88% 20%, var(--glow2), transparent 60%);
}

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-line);
}
.nav-inner{ max-width: 1180px; margin: 0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand svg{ width: 34px; height: auto; }
.nav-brand .word{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:18px; color:var(--ink); letter-spacing:0.01em; }
.nav-brand .word .core{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links a{
  font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--muted2); text-decoration:none; padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--cyan); border-color: var(--cyan); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: transform .15s ease, border-color .2s ease;
}
.icon-btn:hover{ transform: scale(1.06); }
.icon-btn svg{ width:18px; height:18px; }
#themeToggle .sun{ display:none; stroke: var(--magenta); }
#themeToggle .moon{ display:block; stroke: var(--cyan); }
html[data-theme="dark"] #themeToggle .sun{ display:block; }
html[data-theme="dark"] #themeToggle .moon{ display:none; }
#langToggle{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; color:var(--ink); width:auto; padding:0 12px; }
.nav-cta{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:12.5px; letter-spacing:0.03em;
  text-decoration:none; color: var(--chip-text-on-accent); background: var(--grad);
  padding: 10px 18px; border-radius: 999px; white-space:nowrap;
}
.nav-sos{
  display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:12px; letter-spacing:0.02em; text-transform:uppercase; text-decoration:none; color:#fff;
  background: linear-gradient(100deg, #ff3b3b, #b3141f); padding:9px 14px; border-radius:999px;
  white-space:nowrap; border:1px solid rgba(255,255,255,0.18); animation: sosPulse 2.4s ease-in-out infinite;
}
.nav-sos svg{ width:15px; height:15px; flex:0 0 auto; }
.nav-sos:hover{ filter:brightness(1.1); }
@keyframes sosPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(230,30,30,0.45); }
  50%{ box-shadow:0 0 0 6px rgba(230,30,30,0); }
}
.burger{
  display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--hairline);
  background: var(--surface); align-items:center; justify-content:center; cursor:pointer;
  flex-direction:column; gap:4px; padding:0;
}
.burger span{ display:block; width:18px; height:2px; background: var(--ink); border-radius:2px; }

/* ---------- Bilingual content toggle ----------
   Only the HIDDEN language is ever touched (forced off with !important).
   The visible one is never assigned a display value here, so it keeps
   whatever display its own component class needs (grid, inline-flex,
   block...) instead of fighting that class on specificity/source-order. */
html:not([data-lang="es"]) .i18n-es{ display:none !important; }
html[data-lang="es"] .i18n-en{ display:none !important; }

/* ---------- Sections / typography ---------- */
main{ position:relative; z-index:1; }
section{ padding: 72px 0; }
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13px;
  letter-spacing:0.28em; text-transform:uppercase; color: var(--cyan); margin-bottom: 14px;
}
h1{ font-family:'Chakra Petch', sans-serif; font-weight:700; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height:1.08; margin:0 0 20px; color:var(--ink); }
h1 .core{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2{ font-family:'Chakra Petch', sans-serif; font-weight:700; font-size: clamp(1.5rem, 3vw, 2.1rem); margin:0 0 14px; color:var(--ink); }
h3{ font-family:'Chakra Petch', sans-serif; font-weight:600; font-size: 1.2rem; margin:0 0 8px; color:var(--ink); }
p{ font-size: 15.5px; color: var(--muted2); margin: 0 0 18px; }
p.lead{ font-size: 18px; color: var(--ink); max-width: 760px; }
b, strong{ color: var(--ink); }

.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13.5px; letter-spacing:0.03em;
  padding: 13px 26px; border-radius: 999px; transition: transform .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ color: var(--chip-text-on-accent); background: var(--grad); }
.btn-outline{ color: var(--ink); background: transparent; border: 1px solid var(--hairline); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 28px; }

/* ---------- Cards / grids ---------- */
.card{
  background: var(--surface); border: 1px solid var(--panel-line); border-radius: 16px;
  padding: 28px 26px; box-shadow: 0 8px 24px var(--shadow-c);
}
.grid{ display:grid; gap: 20px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-5{ grid-template-columns: repeat(5, 1fr); }

.stat .num{ font-family:'Chakra Petch', sans-serif; font-weight:700; font-size: 2.4rem; }
.stat .num.c-magenta{ color: var(--magenta); }
.stat .num.c-cyan{ color: var(--cyan); }
.stat .lbl{ font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--muted); margin-top:6px; letter-spacing:0.03em; }

.diff{ display:flex; gap:18px; align-items:flex-start; }
.diff .ic{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, rgba(216,27,96,0.14), rgba(0,167,196,0.14));
  border:1px solid var(--panel-line); display:flex; align-items:center; justify-content:center;
}
html[data-theme="dark"] .diff .ic{ background:linear-gradient(135deg, rgba(255,45,117,0.16), rgba(0,240,255,0.16)); }
.diff .ic svg{ width:22px; height:22px; }
.diff h3{ font-size: 1.05rem; margin: 4px 0 4px; }
.diff p{ font-size: 14px; margin: 0; }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--muted2);
  border:1px solid var(--panel-line); background:var(--surface); padding:8px 16px; border-radius:999px;
}
.pill{
  display:inline-flex; align-items:center; font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size: 11.5px; letter-spacing:0.05em; color: var(--chip-text-on-accent); background: var(--grad);
  padding: 6px 14px; border-radius: 999px; text-transform: uppercase;
}
.pill.outline{ background:none; border:1px solid var(--cyan); color:var(--cyan); }

/* services groups */
.group{ background: var(--surface); border:1px solid var(--panel-line); border-radius:18px; padding: 30px 32px; margin-bottom: 22px; position:relative; }
.group-head{ display:flex; align-items:center; gap:18px; margin-bottom: 14px; }
.group-head .ic{
  flex:0 0 auto; width:52px; height:52px; border-radius:13px;
  background:linear-gradient(135deg, rgba(216,27,96,0.14), rgba(0,167,196,0.14));
  border:1px solid var(--panel-line); display:flex; align-items:center; justify-content:center;
}
html[data-theme="dark"] .group-head .ic{ background:linear-gradient(135deg, rgba(255,45,117,0.16), rgba(0,240,255,0.16)); }
.group-head .ic svg{ width:24px; height:24px; }
.fn-tag{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.12em; color:var(--cyan); margin-bottom:2px; }
.group h3{ font-size: 1.3rem; margin:0; }
.group .desc{ font-size:14.5px; margin: 0 0 16px; color: var(--muted2); }
.group ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap: 8px 28px; }
.group li{ font-size:14px; color:var(--muted2); padding-left:20px; position:relative; }
.group li::before{ content:'▸'; position:absolute; left:0; color:var(--cyan); }
.group .flag{ position:absolute; top:-14px; right:28px; }

/* framework / roadmap */
.fn-card{ background:var(--surface); border:1px solid var(--panel-line); border-radius:14px; padding:24px 18px; text-align:center; }
.fn-card .ic{ width:52px; height:52px; border-radius:13px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(216,27,96,0.14), rgba(0,167,196,0.14)); border:1px solid var(--panel-line); }
html[data-theme="dark"] .fn-card .ic{ background:linear-gradient(135deg, rgba(255,45,117,0.16), rgba(0,240,255,0.16)); }
.fn-card .ic svg{ width:24px; height:24px; }
.fn-card .n{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--cyan); margin-bottom:6px; }
.fn-card h3{ font-size:1.05rem; }
.fn-card p{ font-size:13px; margin:0; }
.cycle-note{ text-align:center; font-family:'JetBrains Mono', monospace; font-style:italic; color:var(--muted); font-size:14px; margin: 8px 0 36px; }

.phase{ display:flex; align-items:flex-start; gap:22px; background:var(--surface); border:1px solid var(--panel-line); border-radius:14px; padding:22px 26px; margin-bottom:14px; }
.phase .badge{ flex:0 0 auto; width:64px; height:64px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Chakra Petch',sans-serif; font-weight:700; }
.phase .badge .f{ font-size:11px; letter-spacing:0.06em; opacity:0.85; }
.phase .badge .n{ font-size:24px; line-height:1; }
.phase h3{ font-size:1.1rem; margin:0 0 8px; }
.phase .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.phase .chip{ font-size:12px; padding:6px 12px; }
.p0 .badge{ background:rgba(216,27,96,0.14); color:#d81b60; border:1px solid rgba(216,27,96,0.35); }
.p1 .badge{ background:rgba(216,27,96,0.09); color:#c23a72; border:1px solid rgba(216,27,96,0.25); }
.p2 .badge{ background:rgba(140,90,150,0.10); color:#8f5aa0; border:1px solid rgba(140,90,150,0.28); }
.p3 .badge{ background:rgba(0,167,196,0.10); color:#0b8fa8; border:1px solid rgba(0,167,196,0.28); }
.p4 .badge{ background:rgba(0,167,196,0.16); color:#00a7c4; border:1px solid rgba(0,167,196,0.4); }
html[data-theme="dark"] .p0 .badge{ background:rgba(255,45,117,0.16); color:#ff2d75; border:1px solid rgba(255,45,117,0.4); }
html[data-theme="dark"] .p1 .badge{ background:rgba(255,45,117,0.10); color:#ff6f9e; border:1px solid rgba(255,45,117,0.28); }
html[data-theme="dark"] .p2 .badge{ background:rgba(180,120,180,0.10); color:#c98fd6; border:1px solid rgba(180,120,180,0.28); }
html[data-theme="dark"] .p3 .badge{ background:rgba(0,240,255,0.10); color:#5fe3ee; border:1px solid rgba(0,240,255,0.28); }
html[data-theme="dark"] .p4 .badge{ background:rgba(0,240,255,0.16); color:#00f0ff; border:1px solid rgba(0,240,255,0.4); }

/* kickoff card */
.kickoff{ display:flex; gap:22px; align-items:flex-start; background:var(--surface); border:1px solid var(--panel-line); border-radius:16px; padding:28px 30px; position:relative; margin: 30px 0; }
.kickoff .ic{ flex:0 0 auto; width:52px; height:52px; border-radius:13px; background:linear-gradient(135deg, rgba(216,27,96,0.14), rgba(0,167,196,0.14)); border:1px solid var(--panel-line); display:flex; align-items:center; justify-content:center; }
html[data-theme="dark"] .kickoff .ic{ background:linear-gradient(135deg, rgba(255,45,117,0.16), rgba(0,240,255,0.16)); }
.kickoff .ic svg{ width:24px; height:24px; }
.kickoff .free{ position:absolute; top:-13px; right:26px; }
.kickoff h3{ font-size:1.15rem; }
.kickoff p{ font-size:14.5px; margin:0; }

/* step flow */
.flow{ display:flex; gap: 20px; margin: 40px 0; }
.step{ flex:1; position:relative; }
.step .circle{ width:52px; height:52px; border-radius:50%; background:var(--surface); border:2px solid var(--cyan); display:flex; align-items:center; justify-content:center; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:20px; color:var(--cyan); }
.step:nth-child(2n) .circle{ border-color: var(--magenta); color: var(--magenta); }
.step h3{ font-size: 1rem; margin: 16px 0 6px; }
.step p{ font-size:13px; margin:0; }

.checklist{ display:flex; flex-direction:column; gap:16px; }
.checklist .row{ display:flex; gap:14px; align-items:flex-start; }
.checklist .check{ flex:0 0 auto; width:26px; height:26px; border-radius:7px; background:var(--grad); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.checklist .check svg{ width:14px; height:14px; }
.checklist p{ margin:0; font-size:14.5px; }

/* comparison table */
.compare{ width:100%; border-collapse: collapse; border-radius:14px; overflow:hidden; border:1px solid var(--panel-line); }
.compare-hint{ display:none; }
.compare th, .compare td{ padding: 16px 20px; text-align:left; font-size:14px; border-top:1px solid var(--panel-line); }
.compare thead th{ border-top:none; background:var(--surface); font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:15px; }
.compare thead th:first-child{ background:transparent; }
.compare thead th.col-us{ color:var(--cyan); }
.compare tbody th{ font-family:'JetBrains Mono',monospace; font-weight:400; font-size:12.5px; color:var(--muted); background:transparent; }
.compare tbody td.col-them{ color:var(--muted2); }
.compare tbody td.col-us{ background: var(--row-tint); color:var(--ink); font-weight:600; }
/* Positional selectors (:nth-child/:last-child) don't work here — each
   column carries two DOM cells (.i18n-en/.i18n-es) and CSS only hides the
   inactive one, so sibling indices don't line up with visible columns. */

.model{ background:var(--surface); border:1px solid var(--panel-line); border-radius:16px; padding:26px 24px; }
.model .tag{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.08em; color:var(--cyan); text-transform:uppercase; margin-bottom:10px; }
.model h3{ font-size:1.15rem; }
.model p{ font-size:14px; margin:0; }

/* contact / SOS */
.contact-grid{ display:flex; flex-wrap:wrap; gap: 36px; }
.contact-item .lbl{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.contact-item .val{ font-family:'JetBrains Mono', monospace; font-size:18px; color:var(--ink); font-weight:600; text-decoration:none; }
.contact-item .val.accent{ color: var(--cyan); }

.sos-card{ margin: 40px 0 0; border:1px solid var(--alert-border); background: var(--alert-bg); border-radius:16px; padding:26px 30px; }
.sos-title{ font-family:'Chakra Petch', sans-serif; font-weight:700; font-size:17px; color:var(--alert); margin:0 0 8px; }
.sos-body{ font-size:14px; color:var(--tagline-c); margin:0 0 16px; }
.sos-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.sos-actions a{ font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:none; border:1px solid var(--alert-border); background:var(--surface); padding:9px 16px; border-radius:999px; transition: border-color .2s ease, transform .15s ease; white-space:nowrap; }
.sos-actions a:hover{ border-color: var(--alert); transform: translateY(-1px); }
.sos-phone{ margin:14px 0 0; font-size:12px; color:var(--muted); }
.sos-card{ scroll-margin-top: 96px; }
.scope-note{ margin-top:18px; padding-top:16px; border-top:1px solid var(--alert-border); font-size:12px; line-height:1.6; color:var(--muted); }

/* footer */
footer.site-footer{ border-top:1px solid var(--panel-line); padding: 36px 0; margin-top: 60px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted2); }
.footer-brand svg{ width:26px; height:auto; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ font-size:12.5px; color:var(--muted); text-decoration:none; }
.footer-links a:hover{ color:var(--cyan); }
.footer-social{ display:flex; gap:14px; align-items:center; }
.footer-social a{ color:var(--muted); display:flex; transition: color .2s ease, transform .15s ease; }
.footer-social a:hover{ color:var(--cyan); transform:translateY(-2px); }
.footer-social svg{ width:19px; height:19px; }
.footer-copy{ font-size:11.5px; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase; }

.quote{ font-family:'JetBrains Mono', monospace; font-style:italic; font-size:16px; color:var(--muted2); border-left:3px solid; border-image: var(--grad) 1; padding-left:20px; margin: 30px 0; }

/* Content icons are inline SVGs with hardcoded dark-theme neon hex
   (stroke/fill="#00f0ff"/"#ff2d75") rather than currentColor, so in light
   mode we recolor them to the light-theme accents via attribute selectors.
   The fixed dark ~#nc logo-mark chip keeps its own gradient defs and is
   deliberately untouched — it stays a dark badge in both themes. */
html:not([data-theme="dark"]) svg [stroke="#00f0ff"]{ stroke: var(--cyan); }
html:not([data-theme="dark"]) svg [fill="#00f0ff"]{ fill: var(--cyan); }
html:not([data-theme="dark"]) svg [stroke="#ff2d75"]{ stroke: var(--magenta); }
html:not([data-theme="dark"]) svg [fill="#ff2d75"]{ fill: var(--magenta); }

/* utility */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.center{ text-align:center; }
.hero{ padding: 96px 0 72px; text-align:center; }
.hero .mark{ width:96px; margin:0 auto 30px; display:block; }
.hero .tagline{ max-width: 620px; margin: 0 auto 30px; font-size:15.5px; color:var(--tagline-c); }
.section-sub{ max-width: 720px; margin: 0 auto 20px; }
.page-header{ padding: 56px 0 20px; text-align:left; }

/* ==========================================================================
   Motion system — ambient background drift, scroll-reveal, marquee, radar
   rings, hover micro-interactions. Everything here is vanilla CSS/JS (no
   external animation library — keeps the site framework-free and inside
   the existing script-src 'self' CSP). All of it is neutralized under
   prefers-reduced-motion at the bottom of this block. */

/* No-JS safety net: reveal targets default to hidden only once init.js
   (which runs synchronously in <head>) confirms JS is active by removing
   this class. If JS is blocked, content simply stays visible. */
.no-js .reveal{ opacity:1 !important; transform:none !important; }

/* ambient background drift */
.bg-grid{ animation: gridDrift 44s linear infinite; }
@keyframes gridDrift{ from{ background-position: 0 0, 0 0; } to{ background-position: 84px 84px, 84px 84px; } }
.bg-glow{ animation: glowPulse 13s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

/* blinking terminal cursor on the ~#nc logo mark, everywhere it appears */
.mark-cursor{ animation: cursorBlink 1.1s steps(1, jump-none) infinite; transform-origin: center; }
@keyframes cursorBlink{ 50%{ opacity:0.15; } }

/* radar/ping rings behind the hero mark — echoes "active monitoring" */
.mark-radar{ position:relative; width:96px; margin:0 auto 30px; }
.mark-radar .mark{ width:100%; margin:0; display:block; position:relative; z-index:1; }
.mark-radar::before, .mark-radar::after{
  content:''; position:absolute; inset:-16px; border-radius:26px;
  border:1px solid var(--cyan); opacity:0; animation: radarPing 3.6s ease-out infinite;
}
.mark-radar::after{ animation-delay: 1.8s; }
@keyframes radarPing{ 0%{ transform:scale(0.82); opacity:0.55; } 100%{ transform:scale(1.55); opacity:0; } }

/* live-status pulse badge (hero / SOS card) */
.status-pulse{
  display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--cyan);
  border:1px solid var(--panel-line); background: var(--surface); padding:9px 18px;
  border-radius:999px; margin-bottom:22px;
}
.status-pulse.alert{ color: var(--alert); border-color: var(--alert-border); background: var(--alert-bg); }
.status-pulse .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; flex:0 0 auto; animation: dotPulse 2s ease-out infinite; }
@keyframes dotPulse{
  0%{ box-shadow: 0 0 0 0 currentColor; opacity:1; }
  70%{ box-shadow: 0 0 0 9px transparent; opacity:0.85; }
  100%{ box-shadow: 0 0 0 0 transparent; opacity:1; }
}

/* scroll-reveal: fade + rise, staggered within a .reveal-group by site.js */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* animated count-up numbers (site.js drives the digits; this is just the caret) */
.stat .num[data-count-to]::after{ content:''; }

/* marquee — one authored .marquee-track, site.js clones it once for a
   seamless loop; without JS it simply renders as a single static row. */
.marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-inner{ display:flex; width:max-content; }
.marquee.is-ready .marquee-inner{ animation: marqueeScroll 26s linear infinite; }
.marquee:hover .marquee-inner{ animation-play-state: paused; }
.marquee-track{ display:flex; flex:0 0 auto; gap:10px; padding-right:10px; }
@keyframes marqueeScroll{ to{ transform:translateX(-50%); } }

/* hover micro-interactions */
.card, .group, .fn-card, .model, .phase, .kickoff{ transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card:hover, .group:hover, .fn-card:hover, .model:hover, .phase:hover, .kickoff:hover{
  transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 16px 34px var(--shadow-c);
}
.group-head .ic, .fn-card .ic, .kickoff .ic, .diff .ic{ transition: transform .3s ease; }
.group:hover .group-head .ic, .fn-card:hover .ic, .kickoff:hover .ic, .diff:hover .ic{ transform: scale(1.08) rotate(-4deg); }

.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.btn-primary:hover::after{ left:120%; }

/* nav gains a shadow once the page has scrolled */
.nav{ transition: box-shadow .3s ease; }
.nav.scrolled{ box-shadow: 0 8px 24px var(--shadow-c); }

/* mouse-follow spotlight glow, hero sections only */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,15%), rgba(0,167,196,0.10), transparent 70%);
}
html[data-theme="dark"] .hero::before{ background: radial-gradient(420px circle at var(--mx,50%) var(--my,15%), rgba(0,240,255,0.10), transparent 70%); }
.hero .container{ position:relative; z-index:1; }

/* respect the user's motion preference: everything above still WORKS
   (elements still end up visible/placed correctly) but stops animating */
@media (prefers-reduced-motion: reduce){
  .bg-grid, .bg-glow, .mark-cursor, .mark-radar::before, .mark-radar::after,
  .status-pulse .dot, .marquee-inner, .btn-primary::after, .nav-sos{ animation: none !important; }
  .reveal{ transition-duration: .01ms !important; }
  .card, .group, .fn-card, .model, .phase, .kickoff,
  .group-head .ic, .fn-card .ic, .kickoff .ic, .diff .ic, .nav{ transition: none !important; }
  .hero::before{ display:none; }
}

/* responsive */
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-5{ grid-template-columns: repeat(2, 1fr); }
  .flow{ flex-direction: column; }
  .group ul{ grid-template-columns: 1fr; }
  .compare{ font-size: 13px; }
  .contact-grid{ gap: 24px; }
  .nav-links{ display:none; }
  .burger{ display:flex; }
}
@media (max-width: 900px){
  .nav-links.mobile-open{
    display:flex; position:absolute; top: 64px; left:0; right:0;
    flex-direction:column; background: var(--bg); border-bottom:1px solid var(--panel-line);
    padding: 18px 24px; gap: 16px; z-index: 60;
  }
}
/* On narrow phones there isn't room for both the "Get in Touch" pill and
   the SOS button in the top bar. Below 640px we hide the top-bar SOS
   button and surface an equally bold one as the first item of the mobile
   dropdown menu instead, so it stays one tap away rather than crowding
   out the primary CTA. */
.mobile-sos-link{ display:none; }
@media (max-width: 640px){
  .nav-sos{ display:none; }
  .nav-links.mobile-open .mobile-sos-link{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13px; letter-spacing:0.02em;
    text-transform:uppercase; color:#fff; background: linear-gradient(100deg, #ff3b3b, #b3141f);
    padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.18);
  }
  .nav-links.mobile-open .mobile-sos-link svg{ width:16px; height:16px; }
}
@media (max-width: 640px){
  .grid-5{ grid-template-columns: 1fr; }
  .hero{ padding: 72px 0 48px; }
  section{ padding: 52px 0; }
  .btn-row{ flex-direction:column; }
  .compare{ white-space:nowrap; }
  .compare-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .compare-hint{ display:block; text-align:center; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
  /* The nav's logo + icon buttons + "Get in Touch" pill + burger don't
     all fit at once on narrow phones (this was already tight before the
     SOS button existed) — tighten spacing/sizing so nothing gets pushed
     past the viewport edge and the burger stays tappable. */
  .nav{ padding: 14px 16px; }
  .nav-brand{ gap:7px; }
  .nav-brand svg{ width:29px; }
  .nav-brand .word{ font-size:15.5px; }
  .nav-actions{ gap:6px; }
  .icon-btn{ width:34px; height:34px; }
  #langToggle{ padding:0 9px; font-size:11px; }
  .nav-cta{ padding:8px 12px; font-size:11px; }
}