/* ============================================================
   Vectoresque Oy — landing page
   Design language: navy instrument panel + editorial serif.
   Mono = machine/label, Serif = statement, Sans = body/UI.
   ============================================================ */

:root{
  /* Ink & ground */
  --ink:        #060A2E;   /* deepest navy, from the logo wordmark */
  --ink-2:      #0E144A;   /* raised dark surface */
  --navy:       #070B55;   /* brand navy, straight from the logo */
  --body:       #37475F;   /* body copy on light */
  --muted:      #64748B;
  --faint:      #94A3B8;
  --hairline:   #E2E7EE;
  --hairline-d: rgba(255,255,255,.13);

  --paper:      #FFFFFF;
  --paper-2:    #F6F8FB;   /* light band */

  /* Signal */
  --accent:     #2149E8;   /* logo blue, darkened for contrast on white */
  --accent-lt:  #55C8F5;   /* logo cyan, for dark backgrounds */
  --amber:      #D99A3C;   /* metric numerals, sparingly */

  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --wrap: 1140px;
  --r: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }
a{ color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 18px; z-index:100;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------------- Type primitives ---------------- */

.label{
  font-family:var(--mono); font-weight:500; font-size:12.5px; line-height:1.4;
  letter-spacing:.01em; color:var(--muted); margin:0 0 14px;
}
.label::before{
  content:""; display:inline-block; width:14px; height:1px; background:var(--accent);
  vertical-align:middle; margin-right:9px;
}
.label-on-dark{ color:var(--accent-lt); }


.statement{
  font-family:var(--serif); font-size:clamp(22px,2.6vw,29px); line-height:1.36;
  color:var(--navy); font-weight:500; letter-spacing:-.01em;
  margin:0 0 22px; text-wrap:pretty;
}
.statement-on-dark{ color:#fff; }

.band-title{
  font-family:var(--serif); font-size:clamp(26px,3.4vw,38px); line-height:1.22;
  letter-spacing:-.015em; font-weight:500; color:var(--navy); margin:0; text-wrap:balance;
}
.band-dark .band-title, .band-accent .band-title{ color:#fff; }
.band-sub{ margin:16px 0 0; max-width:62ch; color:var(--muted); font-size:16px; }
.band-dark .band-sub{ color:rgba(255,255,255,.62); }

.micro{ font-size:13.5px; color:var(--muted); }
.band-dark .micro, .band-accent .micro{ color:rgba(255,255,255,.55); }

/* ---------------- Buttons ---------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:0;
  text-decoration:none;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  padding:13px 22px; border-radius:var(--r); cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ background:#1638C4; border-color:#1638C4; color:#fff; transform:translateY(-1px); }
.btn-lg{ padding:15px 28px; font-size:16px; }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.32); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); color:#fff; transform:translateY(-1px); }
.btn-on-dark{ background:var(--accent-lt); border-color:var(--accent-lt); color:var(--ink); }
.btn-on-dark:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* ---------------- Header ---------------- */

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(6,10,46,.88);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; }

.brand{ display:inline-flex; align-items:center; gap:11px; color:#fff; text-decoration:none; }
.brand:hover{ color:#fff; }
.brand .mark{ width:34px; height:26px; flex:none; }
.wordmark{
  display:inline-flex; align-items:baseline;
  font-family:'Montserrat', 'Avenir Next', var(--sans);
  font-weight:500; font-size:17px; letter-spacing:.155em; color:#fff;
  white-space:nowrap;
}
.wordmark .wm-e{
  width:.62em; height:.72em; fill:currentColor; flex:none;
  margin:0 .155em 0 0; align-self:center; position:relative; top:.03em;
}
.wordmark-sm{ font-size:14px; letter-spacing:.14em; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.site-nav{ display:flex; align-items:center; gap:26px; }
.site-nav a{
  font-family:var(--sans); font-size:15px; color:rgba(255,255,255,.72); text-decoration:none;
}
.site-nav a:hover{ color:#fff; }
.site-nav .btn{ color:#fff; }

/* ---------------- Hero ---------------- */

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 12% -5%, rgba(33,73,232,.28), transparent 62%),
    radial-gradient(900px 520px at 88% 8%, rgba(124,44,244,.16), transparent 60%),
    var(--ink);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero .field{ position:absolute; inset:0; pointer-events:none; opacity:.85; }
.hero-inner{ position:relative; padding:104px 28px 84px; max-width:1000px; }

.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px,6.1vw,68px); line-height:1.05; letter-spacing:-.025em;
  margin:0 0 26px; color:#fff; text-wrap:balance; max-width:17ch;
}
.lede{
  font-size:clamp(17px,1.55vw,20px); line-height:1.62; max-width:66ch;
  color:rgba(255,255,255,.80); margin:0 0 36px;
}
.lede strong{ color:#fff; font-weight:600; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:64px; }

.hero-hook{
  margin:0 0 30px; padding:16px 18px; max-width:70ch;
  border-left:2px solid var(--accent-lt); background:rgba(255,255,255,.045);
  font-size:15.5px; line-height:1.62; color:rgba(255,255,255,.78);
}
.hero-hook b{ color:#fff; font-weight:600; }
.hero-hook a{
  display:inline-block; margin-left:4px; color:var(--accent-lt);
  text-decoration-thickness:1px; text-underline-offset:3px; white-space:nowrap;
}

.cred-line{
  margin:0; padding:26px 0 0; max-width:74ch;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:15px; line-height:1.72; color:rgba(255,255,255,.58);
}

/* ---------------- Bands ---------------- */

.band{ padding:96px 0; border-bottom:1px solid var(--hairline); }
.band-light{ background:var(--paper-2); }
.band-dark{
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(33,73,232,.16), transparent 60%),
    var(--ink);
  color:rgba(255,255,255,.76); border-bottom-color:transparent;
}
.band-accent{
  background:var(--ink-2);
  color:rgba(255,255,255,.76); border-bottom-color:transparent;
}
.band-dark a, .band-accent a{ color:var(--accent-lt); }

.band-head{ max-width:76ch; margin-bottom:52px; }

.two-col{ display:grid; grid-template-columns:230px 1fr; gap:52px; align-items:start; }
.two-col-tight{ margin-top:64px; padding-top:44px; border-top:1px solid var(--hairline); }
.band-dark .two-col-tight{ border-top-color:var(--hairline-d); }
.col-body > p{ margin:0 0 18px; max-width:70ch; text-wrap:pretty; }
.col-body > p:last-child{ margin-bottom:0; }

/* ---------------- Services ---------------- */

.svc-list{ border-top:1px solid var(--hairline); }
.svc{
  display:grid; grid-template-columns:270px 1fr; gap:44px;
  padding:32px 0; border-bottom:1px solid var(--hairline);
}
.svc h3{
  font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.2;
  color:var(--navy); margin:0; letter-spacing:-.018em; text-wrap:balance;
}
.svc-body p{ margin:0 0 18px; font-size:16.5px; text-wrap:pretty; max-width:68ch; }

.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.tags li{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--muted); background:var(--paper-2);
  border:1px solid var(--hairline); border-radius:var(--r); padding:5px 9px;
}
.tags-on-dark li{
  color:rgba(255,255,255,.72); background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
}
.tags-on-dark{ margin-bottom:24px; }

/* ---------------- Steps ---------------- */

.steps{ list-style:none; margin:0 0 72px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.steps li{ padding-top:18px; border-top:1px solid rgba(255,255,255,.22); }
.step-n{
  display:block; font-family:var(--mono); font-size:12.5px; color:var(--accent-lt);
  margin-bottom:12px;
}
.steps h3{ font-size:19px; font-weight:600; color:#fff; margin:0 0 6px; letter-spacing:-.01em; }
.step-meta{
  font-family:var(--mono); font-size:12.5px; color:var(--accent-lt); margin:0 0 14px;
}
.steps p{ margin:0; font-size:15px; line-height:1.6; color:rgba(255,255,255,.68); }

.principles{ padding-top:44px; border-top:1px solid var(--hairline-d); }
.principle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 40px; margin-top:8px; }
.principle-grid div{ font-size:15.5px; line-height:1.62; color:rgba(255,255,255,.70); max-width:56ch; }
.principle-grid b{ color:#fff; font-weight:600; }

/* ---------------- Under the hood ---------------- */

.hood{ background:var(--paper); border:1px solid var(--hairline); padding:38px 36px 34px; }
.hood + .hood{ margin-top:28px; }
.hood-head{ max-width:74ch; margin-bottom:32px; }
.hood-kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--accent);
  display:block; margin-bottom:12px;
}
.hood-head h3{
  font-family:var(--sans); font-weight:600; font-size:23px; line-height:1.28;
  color:var(--navy); margin:0 0 14px; letter-spacing:-.012em; text-wrap:balance;
}
.hood-head p{ margin:0; font-size:16px; text-wrap:pretty; }
.hood-foot{ margin:26px 0 0; padding-top:20px; border-top:1px solid var(--hairline); max-width:80ch; }

.inline-cta{
  margin-top:24px; padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.inline-cta p{
  margin:0; font-family:var(--serif); font-size:19px; line-height:1.4;
  color:var(--navy); max-width:52ch; text-wrap:pretty;
}

/* Folded "Before Vectoresque" block */
.prior{ margin-top:56px; padding-top:44px; border-top:1px solid var(--hairline); }
.prior .col-label .micro{ margin-top:10px; max-width:34ch; }
.prior .metrics{ margin-bottom:36px; }
.prior .record > div:first-child{ padding-top:22px; border-top:1px solid var(--hairline); }

/* Calculator */
.calc{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start; }

.lyr{ padding:14px 0; border-top:1px solid var(--hairline); }
.lyr:first-child{ border-top:0; padding-top:0; }
.lyr-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.lyr label{ display:block; cursor:pointer; }
.lyr label b{
  display:block; font-size:14.5px; font-weight:600; color:var(--navy);
  letter-spacing:-.005em; margin-bottom:3px;
}
.lyr label span{ display:block; font-size:13.5px; line-height:1.55; color:var(--muted); max-width:56ch; }
.lyr output{
  font-family:var(--mono); font-weight:600; font-size:15px; color:var(--accent);
  flex:none; font-variant-numeric:tabular-nums;
}

.lyr input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; margin-top:10px; cursor:pointer;
}
.lyr input[type=range]::-webkit-slider-runnable-track{
  height:3px; background:var(--hairline); border-radius:2px;
}
.lyr input[type=range]::-moz-range-track{ height:3px; background:var(--hairline); border-radius:2px; }
.lyr input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:15px; height:15px; margin-top:-6px;
  border-radius:50%; background:var(--navy); border:3px solid var(--paper);
  box-shadow:0 0 0 1px var(--navy);
}
.lyr input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--navy);
  border:3px solid var(--paper); box-shadow:0 0 0 1px var(--navy);
}

.calc-out{ background:var(--ink); color:rgba(255,255,255,.72); padding:28px 26px 24px; border-radius:var(--r); position:sticky; top:88px; }
.calc-big{ padding-bottom:22px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.14); }
.calc-num{
  display:block; font-family:var(--mono); font-weight:600; font-size:44px; line-height:1;
  color:var(--accent-lt); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.calc-cap{
  display:block; margin-top:9px; font-family:var(--mono); font-size:12.5px;
  color:rgba(255,255,255,.45);
}

.viz-row{ display:grid; grid-template-columns:92px 1fr 46px; align-items:center; gap:10px; margin-bottom:9px; }
.viz-lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.5); }
.viz-bar{ height:7px; background:rgba(255,255,255,.09); border-radius:2px; overflow:hidden; }
.viz-bar i{ display:block; height:100%; background:var(--accent); border-radius:2px; transition:width .22s ease; }
.viz-final .viz-bar i{ background:var(--accent-lt); }
.viz-val{
  font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.72);
  text-align:right; font-variant-numeric:tabular-nums;
}

.calc-note{
  margin:20px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6);
}
.calc-note b{ color:#fff; font-weight:600; font-family:var(--mono); }
.calc-warn{ display:block; margin-top:10px; color:#E8B87A; }

/* Code tabs */
.tablist{ display:flex; gap:2px; flex-wrap:wrap; }
.tablist button{
  font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  background:var(--paper-2); color:var(--muted); border:1px solid var(--hairline);
  border-bottom:0; border-radius:var(--r) var(--r) 0 0; padding:11px 16px; cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.tablist button:hover{ color:var(--navy); }
.tablist button[aria-selected="true"]{ background:var(--ink); color:var(--accent-lt); border-color:var(--ink); }

.tabpanel{ background:var(--ink); border-radius:0 var(--r) var(--r) var(--r); }
.tabpanel pre{
  margin:0; padding:26px 24px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.72; color:#D7E1EE;
  -webkit-overflow-scrolling:touch;
}
.tabpanel code{ font-family:inherit; }
.tabpanel .c{ color:#6E8AA8; font-style:italic; }   /* comment */
.tabpanel .k{ color:#55C8F5; }                       /* key */
.tabpanel .s{ color:#E3C88B; }                       /* string */
.tabpanel .n{ color:#9CC2FF; }                       /* number / null */
.tabpanel .h{ color:#fff; font-weight:600; }         /* heading */
.tabpanel .e{ color:#55C8F5; font-weight:600; }      /* emphasis */

/* ---------------- Case studies ---------------- */

.cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.case{ background:var(--paper); padding:36px 34px 32px; }
.case-kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--accent);
  display:block; margin-bottom:14px;
}
.case h3{
  font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.24;
  color:var(--navy); margin:0 0 16px; letter-spacing:-.015em; text-wrap:balance;
}
.case-lede{ margin:0 0 26px; font-size:16.5px; line-height:1.6; color:var(--body); text-wrap:pretty; }

.case-spec{ margin:0 0 28px; }
.case-spec > div{ padding:18px 0; border-top:1px solid var(--hairline); }
.case-spec dt{
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-.005em;
  color:var(--navy); margin-bottom:7px;
}
.case-spec dd{ margin:0; font-size:15px; line-height:1.62; color:var(--body); text-wrap:pretty; }
.case-spec dd b{ color:var(--navy); font-weight:600; }

.case-nums{
  list-style:none; margin:0; padding:20px 0 0; border-top:1px solid var(--navy);
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 20px;
}
.case-nums b{
  display:block; font-family:var(--mono); font-weight:600; font-size:22px; line-height:1;
  color:var(--navy); letter-spacing:-.02em; margin-bottom:6px; font-variant-numeric:tabular-nums;
}
.case-nums span{ display:block; font-size:13px; line-height:1.45; color:var(--muted); }

.gates{ margin-top:48px; padding-top:36px; border-top:1px solid var(--hairline); }
.gate-list{ list-style:none; margin:0; padding:0; counter-reset:g; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.gate-list li{ counter-increment:g; position:relative; padding-top:34px; }
.gate-list li::before{
  content:counter(g) "."; position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:12.5px; color:var(--accent);
}
.gate-list b{ display:block; font-size:15px; font-weight:600; color:var(--navy); margin-bottom:6px; letter-spacing:-.005em; }
.gate-list span{ display:block; font-size:13.5px; line-height:1.55; color:var(--muted); text-wrap:pretty; }

/* ---------------- Metrics ---------------- */

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.metric{ border-top:1px solid var(--navy); padding-top:16px; }
.metric .num{
  display:block; font-family:var(--mono); font-weight:600;
  font-size:clamp(26px,3vw,34px); line-height:1; color:var(--navy);
  letter-spacing:-.02em; margin-bottom:12px;
}
.metric p{ margin:0; font-size:14.5px; line-height:1.58; color:var(--body); text-wrap:pretty; }

/* ---------------- Record list ---------------- */

.record{ margin:0; }
.record > div{ padding:22px 0; border-top:1px solid var(--hairline); }
.record > div:first-child{ padding-top:0; border-top:0; }
.record dt{
  font-family:var(--sans); font-weight:600; font-size:17px; color:var(--navy);
  margin-bottom:7px; letter-spacing:-.005em;
}
.record dd{ margin:0; font-size:15.5px; line-height:1.65; max-width:74ch; text-wrap:pretty; }

.stack-line{
  margin:28px 0 0; padding-top:22px; border-top:1px solid var(--hairline);
  font-family:var(--mono); font-size:12.5px; line-height:1.9; color:var(--muted);
  max-width:none !important;
}
.stack-line b{ color:var(--navy); font-weight:600; }

/* ---------------- Product ---------------- */

.pill{
  display:inline-block; font-family:var(--mono); font-size:12px; color:var(--amber);
  border:1px solid rgba(217,154,60,.45); border-radius:100px; padding:5px 12px; margin:0;
}
.product-name{
  font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,40px);
  line-height:1.1; letter-spacing:-.02em; color:#fff; margin:0 0 18px;
}

/* ---------------- Fit ---------------- */

.fit-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.fit{ background:var(--paper); padding:34px 32px; }
.fit h3{ font-size:19px; font-weight:600; color:var(--navy); margin:0 0 18px; letter-spacing:-.01em; }
.fit ul{ margin:0; padding:0; list-style:none; }
.fit li{ position:relative; padding-left:26px; margin-bottom:13px; font-size:15.5px; line-height:1.6; text-wrap:pretty; }
.fit li:last-child{ margin-bottom:0; }
.fit-yes li::before{
  content:""; position:absolute; left:2px; top:.62em; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.fit-no{ background:var(--paper-2); }
.fit-no li::before{
  content:""; position:absolute; left:3px; top:.78em; width:11px; height:2px;
  background:var(--faint);
}
.fit-no li{ color:var(--muted); }

/* ---------------- FAQ ---------------- */

.faq details{ border-top:1px solid var(--hairline); }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
  font-weight:600; font-size:17.5px; color:var(--navy); letter-spacing:-.005em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq summary:hover{ color:var(--accent); }
.faq details p{ margin:0 0 22px; max-width:74ch; font-size:16px; text-wrap:pretty; }

/* ---------------- Contact form ---------------- */

.contact-aside{ font-size:15.5px; line-height:1.62; color:rgba(255,255,255,.66); margin:0 0 18px; }
.contact-direct{ font-family:var(--mono); font-size:13px; margin:0; color:rgba(255,255,255,.6); }

.form{ max-width:640px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-wrap{ margin-bottom:18px; }
.field-wrap label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:8px;
}
.req{ color:var(--accent-lt); }

.form input[type=text], .form input[type=email], .form select, .form textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.17);
  border-radius:var(--r); padding:13px 14px; transition:border-color .15s ease, background .15s ease;
}
.form textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.form select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.form select option{ color:#0B1729; background:#fff; }
.form ::placeholder{ color:rgba(255,255,255,.34); }
.form input:focus, .form select:focus, .form textarea:focus{
  border-color:var(--accent-lt); background:rgba(255,255,255,.08); outline:none;
}
.form .invalid{ border-color:#E08B7A !important; }

.consent{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 26px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.62); }
.consent input{ margin-top:4px; accent-color:var(--accent-lt); width:16px; height:16px; flex:none; }

.hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }

.form-status{ font-family:var(--mono); font-size:13px; margin:18px 0 0; min-height:1.2em; }
.form-status.ok{ color:var(--accent-lt); }
.form-status.err{ color:#F0A392; }

/* ---------------- Footer ---------------- */

.site-foot{ background:var(--ink); color:rgba(255,255,255,.6); padding:64px 0 30px; }
.foot-inner{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.foot-brand{ display:flex; gap:12px; align-items:flex-start; }
.foot-brand .mark{ width:36px; height:28px; flex:none; }
.foot-brand b{ display:block; color:#fff; font-weight:500; }
.foot-brand span{ display:block; font-size:13px; margin-top:5px; color:rgba(255,255,255,.5); }
.foot-h{
  font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.42);
  margin:0 0 12px; font-weight:500;
}
.foot-col p{ margin:0; font-size:14px; line-height:1.85; }
.foot-col a{ color:rgba(255,255,255,.72); text-decoration:none; }
.foot-col a:hover{ color:var(--accent-lt); text-decoration:underline; }

.foot-fine{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; }
.fi-note{ font-size:13px; line-height:1.65; color:rgba(255,255,255,.38); max-width:88ch; margin:0 0 16px; }
.fine{ font-size:13px; margin:0; color:rgba(255,255,255,.45); font-family:var(--mono); }
.fine a{ color:rgba(255,255,255,.62); text-decoration:none; }
.fine a:hover{ color:var(--accent-lt); }

/* ---------------- Responsive ---------------- */

@media (max-width:1000px){
  .site-nav a:not(.btn){ display:none; }
  .steps, .metrics, .fit-grid, .principle-grid{ grid-template-columns:repeat(2,1fr); }
  .cases{ grid-template-columns:1fr; }
  .inline-cta{ flex-direction:column; align-items:flex-start; gap:16px; }
  .svc{ grid-template-columns:1fr; gap:14px; }
  .gate-list{ grid-template-columns:repeat(2,1fr); gap:22px 26px; }
  .calc{ grid-template-columns:1fr; gap:28px; }
  .calc-out{ position:static; }
  .hood{ padding:30px 24px; }
  .cred-strip{ grid-template-columns:repeat(2,1fr); gap:20px 24px; }
  .two-col{ grid-template-columns:1fr; gap:22px; }
  .foot-inner{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .band{ padding:76px 0; }
  .hero-inner{ padding:80px 28px 66px; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .steps, .metrics, .fit-grid, .principle-grid, .row2, .foot-inner{ grid-template-columns:1fr; }
  .cred-strip{ grid-template-columns:1fr; }
  .band{ padding:60px 0; }
  .band-head{ margin-bottom:36px; }
  .hero-inner{ padding:60px 20px 52px; }
  .hero-cta .btn{ width:100%; }
  .svc{ padding:26px 0; }
  .steps{ margin-bottom:52px; }
  .metrics{ gap:26px; }
  .site-head{ position:static; }
  .hood{ padding:26px 18px; }
  .case{ padding:28px 22px; }
  .case-nums{ grid-template-columns:1fr; gap:14px; }
  .gate-list{ grid-template-columns:1fr; }
  .calc-num{ font-size:36px; }
  .viz-row{ grid-template-columns:76px 1fr 42px; }
  .tabpanel pre{ font-size:11.5px; padding:20px 16px; }
  .tablist{ gap:1px; }
  .tablist button{ font-size:11px; padding:9px 11px; flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .btn:hover{ transform:none; }
}

/* ---------------- Print ---------------- */

@media print{
  .site-head, .hero .field, .hero-cta, .form, .skip{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .hero, .band-dark, .band-accent, .site-foot{ background:#fff !important; color:#000 !important; }
  .hero h1, .lede, .band-dark *, .band-accent *, .site-foot *{ color:#000 !important; }
}