/* ============================================================
   SOUVERAIN 2026 — corporate site design system
   Inter + JetBrains Mono · navy / parchment / amber
   Shared across all pages.
   ============================================================ */

:root{
  /* core palette */
  --abyss:#070E1C;       /* darkest bg */
  --navy:#0A1830;        /* dark sections */
  --ink:#0F2240;         /* primary text on light */
  --panel:#0E2038;       /* dark cards */
  --panel-2:#12274A;     /* dark card hover */
  --blue:#1D4E89;
  --blue-l:#5C8AC7;
  --amber:#C17D2E;
  --amber-l:#E8B370;
  --amber-d:#7E4F12;
  --teal:#3CA574;
  --teal-l:#7FD9A4;
  --red:#C25656;

  /* light surfaces */
  --surface:#F4F1EB;     /* warm parchment */
  --paper:#FBF9F4;       /* lighter paper */
  --paper-deep:#ECE7DB;
  --line:#E2DDD1;        /* light hairline */
  --line-2:#ECE7DB;
  --body:#474C5A;        /* body text on light */
  --stone:#5C5A54;
  --stone-2:#8A8780;

  /* dark text */
  --t-hi:#F4F6FA;
  --t-mid:rgba(244,246,250,0.74);
  --t-lo:rgba(244,246,250,0.56);
  --d-line:rgba(255,255,255,0.10);
  --d-line-2:rgba(255,255,255,0.055);

  --wrap:1200px;
  --pad:48px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--surface);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"tnum"}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--ink);font-weight:600;letter-spacing:-0.022em;line-height:1.04}
h1{font-size:clamp(44px,5.6vw,76px);font-weight:650}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.06}
h3{font-size:21px;letter-spacing:-0.015em}
.display em,h1 em,h2 em{font-style:normal;color:var(--amber-d)}
p{color:var(--body)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--body)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--stone);font-weight:500}
.kicker{display:flex;align-items:center;gap:15px;margin-bottom:26px}
.kicker::after{content:"";height:1px;background:var(--line);flex:1}

/* dark inversions */
.on-dark{background:var(--abyss);color:var(--t-hi)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--t-hi)}
.on-dark p{color:var(--t-mid)}
.on-dark .lead{color:var(--t-mid)}
.on-dark .eyebrow{color:var(--t-lo)}
.on-dark .kicker::after{background:var(--d-line)}
.on-dark .display em,.on-dark h1 em,.on-dark h2 em{color:var(--amber-l)}
.on-navy{background:var(--navy)}
.on-paper{background:var(--paper)}
.on-surface{background:var(--surface)}

/* light sections must restore light text in case a dark ancestor set otherwise */
.on-paper,.on-surface{color:var(--ink)}
.on-paper p,.on-surface p{color:var(--body)}
.on-paper .lead,.on-surface .lead{color:var(--body)}
.on-paper .eyebrow,.on-surface .eyebrow{color:var(--stone)}
.on-paper .kicker::after,.on-surface .kicker::after{background:var(--line)}
.on-paper .pill,.on-surface .pill{color:var(--stone);border-color:var(--line);background:var(--paper)}

section{padding:clamp(72px,9vw,118px) 0}
.tight{padding-top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:550;
  padding:13px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all .16s ease;line-height:1;white-space:nowrap}
.btn .arr{font-family:'JetBrains Mono',monospace;font-size:13px;opacity:.85;transition:transform .16s}
.btn:hover .arr{transform:translateX(3px)}
.btn-amber{background-color:var(--amber);color:#0B1426;border-color:var(--amber);font-weight:600}
.btn-amber:hover{background-color:var(--amber-l);box-shadow:0 8px 24px -10px rgba(193,125,46,0.7)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:var(--navy)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,0.05);color:var(--t-hi);border-color:var(--d-line)}
.btn-ghost:hover{border-color:rgba(255,255,255,0.42);background:rgba(255,255,255,0.09)}
.btn-lg{padding:16px 28px;font-size:15px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(7,14,28,0.82);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--d-line)}
.nav .inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:36px;height:36px;border-radius:8px;background:var(--panel);border:1px solid var(--d-line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-name{font-size:15px;font-weight:600;color:var(--t-hi);line-height:1.1}
.brand-meta{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--t-lo);margin-top:2px}
.nav-links{display:flex;list-style:none;gap:4px;align-items:center}
.nav-links a{padding:8px 13px;border-radius:7px;font-size:13.5px;font-weight:450;color:var(--t-mid);transition:all .14s}
.nav-links a:hover{background:rgba(255,255,255,0.06);color:var(--t-hi)}
.nav-cta{display:flex;align-items:center;gap:10px}

/* status chip */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal-l);border:1px solid var(--d-line);background:rgba(60,165,116,0.06);padding:7px 13px;border-radius:100px}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(60,165,116,0.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(60,165,116,0.5)}70%{box-shadow:0 0 0 6px rgba(60,165,116,0)}100%{box-shadow:0 0 0 0 rgba(60,165,116,0)}}
.chip.amber{color:var(--amber-l);background:rgba(193,125,46,0.07)}
.chip.amber .d{background-color:var(--amber);box-shadow:0 0 0 0 rgba(193,125,46,0.5);animation:pulseA 2.4s infinite}
@keyframes pulseA{0%{box-shadow:0 0 0 0 rgba(193,125,46,0.5)}70%{box-shadow:0 0 0 6px rgba(193,125,46,0)}100%{box-shadow:0 0 0 0 rgba(193,125,46,0)}}
.chip-light{color:var(--amber-d);border-color:var(--line);background:#fff}
.chip-light .d{background:var(--amber)}

/* ---------- trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:0;border:1px solid var(--d-line);border-radius:var(--r);overflow:hidden}
.trust .cell{flex:1;min-width:150px;padding:16px 20px;border-right:1px solid var(--d-line)}
.trust .cell:last-child{border-right:none}
.trust .k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-lo);margin-bottom:6px}
.trust .v{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--t-hi);font-weight:500}
.trust .v.amber{color:var(--amber-l)}

/* ---------- generic data card / console ---------- */
.card{background:var(--panel);border:1px solid var(--d-line);border-radius:14px;overflow:hidden}
.card-light{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}

/* device frame */
.frame{background:var(--navy);border:1px solid var(--d-line);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,0.6)}
.frame .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(0,0,0,0.32);border-bottom:1px solid var(--d-line-2)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.16)}
.frame .bar .t{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--t-lo);letter-spacing:0.08em;text-transform:uppercase}
.frame img{width:100%;display:block}
/* self-contained SVG figures (landscape) — render full height, never crop */
.figsvg{width:100%;height:auto;max-height:none;object-fit:contain;display:block}

/* stat cells */
.statgrid{display:grid;border:1px solid var(--line)}
.statgrid .stat{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.statgrid .stat .v{font-family:'JetBrains Mono',monospace;font-size:clamp(28px,3vw,38px);font-weight:600;color:var(--ink);line-height:1;letter-spacing:-0.02em}
.statgrid .stat .v.amber{color:var(--amber-d)}
.statgrid .stat .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--stone);margin:13px 0 7px}
.statgrid .stat .d{font-size:12.5px;line-height:1.55;color:var(--body)}
.on-dark .statgrid{border-color:var(--d-line)}
.on-dark .statgrid .stat{border-color:var(--d-line);background:var(--panel)}
.on-dark .statgrid .stat .v{color:var(--t-hi)}
.on-dark .statgrid .stat .v.amber{color:var(--amber)}
.on-dark .statgrid .stat .k{color:var(--t-lo)}
.on-dark .statgrid .stat .d{color:var(--t-mid)}

/* pills / chips inline */
.pillrow{display:flex;flex-wrap:wrap;gap:9px}
.pill{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;color:var(--stone);border:1px solid var(--line);border-radius:100px;padding:7px 14px;background:var(--paper)}
.on-dark .pill{color:var(--t-mid);border-color:var(--d-line);background:rgba(255,255,255,0.03)}

/* ---------- footer ---------- */
.foot{background:var(--abyss);color:var(--t-mid);padding:64px var(--pad) 30px;border-top:1px solid var(--d-line)}
.foot .inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:48px}
.foot .name{color:#fff;font-size:16px;font-weight:600;margin-bottom:8px}
.foot .colo{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t-lo);line-height:1.9;margin-top:14px}
.foot .foot-h{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--t-lo);margin-bottom:16px;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--t-mid);font-size:13.5px;transition:color .14s}
.foot a:hover{color:#fff}
.foot .mark-row{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.foot .bottom{max-width:var(--wrap);margin:48px auto 0;padding-top:22px;border-top:1px solid var(--d-line);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t-lo)}

/* ---------- motion (never opacity-gates content visibility) ---------- */
@keyframes fadeUp{from{transform:translateY(15px)}to{transform:translateY(0)}}
@keyframes dotIn{from{transform:scale(.6)}to{transform:scale(1)}}
@keyframes draw{from{stroke-dashoffset:680}to{stroke-dashoffset:0}}
.reveal{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-delay:0s!important;scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  :root{--pad:28px}
  .nav-links{display:none}
  .foot .inner{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:620px){
  .foot .inner{grid-template-columns:1fr 1fr}
}