/* ============================================================
   Fontes auto-hospedadas (woff2 variaveis, subset latin).
   Origem: Google Fonts — Public Sans (OFL), Source Serif 4 (OFL),
   JetBrains Mono (OFL). Servidas do proprio dominio (performance
   e privacidade; sem requests a fonts.gstatic.com).
   ============================================================ */
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(fonts/public-sans.woff2) format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:italic; font-weight:400;
  font-display:swap; src:url(fonts/public-sans-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Source Serif 4'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(fonts/source-serif-4.woff2) format('woff2');
}
@font-face{
  font-family:'Source Serif 4'; font-style:italic; font-weight:400;
  font-display:swap; src:url(fonts/source-serif-4-italic.woff2) format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(fonts/jetbrains-mono.woff2) format('woff2');
}

/* ============================================================
   Nexo Agent — Landing  ·  White · Editorial
   Tokens herdados do design system (oklch, hue 255 = navy #2E4056)
   ============================================================ */
:root{
  /* foreground */
  --fg:          oklch(0.220 0.018 255);
  --muted-fg:    oklch(0.470 0.016 255);
  --faint-fg:    oklch(0.600 0.012 255);

  /* surfaces */
  --paper:       oklch(1 0 0);
  --bg:          oklch(0.986 0.002 255);
  --canvas:      oklch(0.962 0.004 255);
  --chrome:      oklch(0.975 0.003 255);
  --shell:       oklch(0.970 0.004 255);

  /* brand */
  --navy:        #2E4056;
  --primary:     oklch(0.375 0.052 255);
  --primary-fg:  oklch(0.990 0.002 255);
  --primary-hover: oklch(0.320 0.050 255);
  --accent:      oklch(0.945 0.018 255);
  --accent-fg:   oklch(0.370 0.055 255);
  --grad:        linear-gradient(90deg,#22AEFD 0%,#146897 46%,#22FDA5 100%);
  --grad-48:     linear-gradient(48deg,#22AEFD 0%,#146897 38%,#22FDA5 100%);

  /* lines & focus */
  --border:      oklch(0.910 0.006 255);
  --border-soft: oklch(0.935 0.005 255);
  --border-strong: oklch(0.840 0.010 255);
  --ring:        oklch(0.375 0.052 255);

  /* feedback */
  --ok:          oklch(0.560 0.110 158);
  --ok-bg:       oklch(0.960 0.030 158);
  --warn-fg:     oklch(0.525 0.110 70);
  --del-bg:      oklch(0.958 0.035 28);
  --del-fg:      oklch(0.505 0.150 28);

  /* shadows */
  --shadow-sm:  0 1px 2px oklch(0.20 0.02 255 / 0.05);
  --shadow-md:  0 1px 3px oklch(0.20 0.02 255 / 0.07), 0 2px 8px oklch(0.20 0.02 255 / 0.05);
  --shadow-lg:  0 4px 16px oklch(0.20 0.02 255 / 0.10), 0 1px 3px oklch(0.20 0.02 255 / 0.08);
  --shadow-doc: 0 1px 3px oklch(0.18 0.02 255 / 0.10), 0 12px 32px oklch(0.18 0.02 255 / 0.10), 0 32px 80px oklch(0.18 0.02 255 / 0.07);

  --radius: 10px;
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 48px);

  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  color-scheme: light;
}

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

body{
  margin:0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--fg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: oklch(0.375 0.052 255 / 0.16); }

/* ---------- shared layout ---------- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }
.section{ padding-block: clamp(64px, 9vw, 120px); }
.section--canvas{ background: var(--canvas); border-block: 1px solid var(--border); }

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint-fg);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before{
  content:""; width: 22px; height: 1.5px; background: var(--grad); display:inline-block;
}
.eyebrow.center{ justify-content:center; }

h1,h2,h3,h4{ margin:0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.display{ font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; }

.section-head{ max-width: 680px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; }
.section-head p{ margin: 18px 0 0; font-size: clamp(17px,2.1vw,19px); color: var(--muted-fg); line-height:1.55; text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing:-0.005em;
  padding: 12px 20px; border-radius: 8px; border: 1px solid transparent;
  cursor:pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn svg{ width: 17px; height: 17px; flex-shrink:0; }
.btn--primary{ background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--primary-hover); }
.btn--outline{ background: var(--paper); color: var(--fg); border-color: var(--border-strong); }
.btn--outline:hover{ background: var(--bg); border-color: var(--fg); }
.btn--ghost{ background: transparent; color: var(--fg); }
.btn--ghost:hover{ background: var(--accent); }
.btn--lg{ padding: 15px 26px; font-size: 16px; }
.btn--onnavy{ background: #fff; color: var(--navy); }
.btn--onnavy:hover{ background: oklch(0.94 0.01 255); }
.btn--onnavy-outline{ background: transparent; color: #fff; border-color: oklch(1 0 0 / 0.34); }
.btn--onnavy-outline:hover{ border-color:#fff; background: oklch(1 0 0 / 0.08); }
:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: oklch(1 0 0 / 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-scrolled{ border-bottom-color: var(--border); }
.nav{ display:flex; align-items:center; gap: 28px; height: 66px; }
.nav__brand{ display:flex; align-items:center; gap: 11px; flex-shrink:0; }
.nav__brand img.mono{ height: 26px; width:auto; }
.nav__brand .name{ font-weight:700; font-size: 17px; letter-spacing:-0.01em; }
.nav__brand .tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint-fg); border:1px solid var(--border); border-radius:5px; padding:2px 6px; margin-left:2px; }
.nav__links{ display:flex; align-items:center; gap: 26px; margin-left: 10px; }
.nav__links a{ font-size: 14.5px; font-weight: 500; color: var(--muted-fg); transition: color .15s; }
.nav__links a:hover{ color: var(--fg); }
.nav__cta{ margin-left:auto; display:flex; align-items:center; gap: 12px; }
.nav__menu-btn{ display:none; }

/* ---------- hero ---------- */
.hero{ padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(56px, 7vw, 90px); }
.hero__inner{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); align-items:center; }
.hero__copy{ max-width: 560px; }
.hero h1{ font-family: var(--serif); font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -0.025em; }
.hero h1 em{ font-style: normal; color: var(--primary); }
.hero__sub{ margin: 26px 0 0; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--muted-fg); text-wrap: pretty; }
.hero__cta{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 34px; }
.hero__note{ margin-top: 22px; display:flex; align-items:flex-start; gap: 9px; font-size: 13px; color: var(--faint-fg); line-height: 1.45; }
.hero__note svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; }
.hero__plat{ display:flex; gap: 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.hero__plat span{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--muted-fg); font-weight:500; }
.hero__plat svg{ width:17px; height:17px; opacity:.7; }

/* ---------- hero app simulation · 01 Workspace (Marenco) ---------- */
.appsim{ border-radius:12px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow-doc); border:1px solid var(--border); font-family:var(--sans); container-type:inline-size; }
.appsim__bar{ display:flex; align-items:center; gap:9px; height:34px; padding:0 12px; background:var(--navy); color:oklch(0.95 0.012 255); white-space:nowrap; overflow:hidden; }
.appsim__bar img{ height:13px; width:auto; }
.appsim__bar .t{ font-weight:600; font-size:12px; }
.appsim__bar .ws{ font-size:11.5px; opacity:.6; }
.appsim__bar .sec{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:10.5px; opacity:.72; }
.appsim__bar .sec svg{ width:12px; height:12px; }
.appsim__addr{ display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; background:var(--bg); border-bottom:1px solid var(--border); }
.appsim__addr .crumbs{ display:flex; align-items:center; gap:6px; flex:1; min-width:0; border:1px solid var(--border); background:var(--paper); border-radius:5px; height:24px; padding:0 9px; font-size:11.5px; color:var(--muted-fg); }
.appsim__addr svg{ width:12px; height:12px; flex-shrink:0; }
.appsim__addr .fold{ color:var(--primary); }
.appsim__addr .sep{ color:var(--faint-fg); opacity:.7; }
.appsim__addr .on{ color:var(--fg); font-weight:500; }
.appsim__addr .find{ display:flex; align-items:center; gap:6px; height:24px; border:1px solid var(--border); background:var(--paper); border-radius:5px; padding:0 9px; font-size:11px; color:var(--faint-fg); }
.appsim__body{ display:grid; grid-template-columns:158px minmax(0,1fr) 174px; height:440px; }
/* explorer */
.appsim__exp{ background:var(--shell); border-right:1px solid var(--border); overflow:hidden; min-height:0; }
.appsim__exp .ehead{ font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint-fg); padding:9px 12px 8px; border-bottom:1px solid var(--border); background:var(--chrome); }
.appsim__tree{ padding:5px 0; }
.trow{ display:flex; align-items:center; gap:5px; height:21px; padding-right:6px; font-size:11.5px; color:var(--fg); white-space:nowrap; border-left:2px solid transparent; }
.trow svg{ width:12px; height:12px; flex-shrink:0; }
.trow .fold{ color:var(--primary); }
.trow .chev{ color:var(--faint-fg); }
.trow .doc{ color:var(--muted-fg); }
.trow .sp{ width:12px; flex-shrink:0; }
.trow.sel{ background:var(--accent); color:var(--accent-fg); border-left-color:var(--primary); font-weight:600; }
.trow.sel .doc{ color:var(--primary); }
.trow .nm{ overflow:hidden; text-overflow:ellipsis; }
/* document */
.appsim__doc{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--canvas); }
.appsim__dochead{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--chrome); border-bottom:1px solid var(--border); }
.appsim__dochead .fi{ width:14px; height:14px; color:var(--primary); flex-shrink:0; }
.appsim__dochead .nm{ font-size:12px; font-weight:600; color:var(--fg); }
.appsim__dochead .badge{ font-family:var(--mono); font-size:9px; padding:1px 5px; background:var(--canvas); color:var(--muted-fg); border:1px solid var(--border); border-radius:2px; text-transform:uppercase; }
.appsim__dochead .gen{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:9.5px; font-weight:600; color:var(--primary); background:var(--accent); padding:2px 8px; border-radius:99px; white-space:nowrap; }
.appsim__dochead .gen svg{ width:10px; height:10px; }
.appsim__zoom{ display:flex; align-items:center; gap:8px; padding:5px 12px; background:var(--chrome); border-bottom:1px solid var(--border); }
.appsim__zoom .zc{ display:flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--paper); border-radius:5px; padding:2px 6px; font-family:var(--mono); font-size:10.5px; color:var(--fg); }
.appsim__zoom .zc svg{ width:12px; height:12px; }
.appsim__zoom .upd{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint-fg); }
.appsim__docbody{ flex:1; overflow:hidden; padding:18px 16px; }
.appsim__page{ background:var(--paper); border:1px solid var(--border); border-radius:2px; box-shadow:var(--shadow-doc); padding:22px 24px; height:100%; overflow:hidden; }
.appsim__page h1{ font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:-0.02em; line-height:1.18; margin:0 0 12px; color:var(--fg); text-wrap:balance; }
.appsim__page .meta{ border-left:3px solid var(--primary); background:var(--accent); color:var(--accent-fg); font-size:10.5px; padding:8px 12px; border-radius:0 4px 4px 0; margin:0 0 18px; line-height:1.5; }
.appsim__page h2{ font-family:var(--sans); font-size:13.5px; font-weight:700; margin:0 0 8px; color:var(--fg); }
.appsim__page p{ font-family:var(--serif); font-size:13px; line-height:1.65; color:var(--fg); margin:0; text-wrap:pretty; }
.appsim__page strong{ font-weight:700; }
/* chat */
.appsim__chat{ background:var(--shell); border-left:1px solid var(--border); display:flex; flex-direction:column; min-width:0; min-height:0; }
.appsim__chathead{ display:flex; align-items:center; gap:6px; padding:8px 11px; background:var(--chrome); border-bottom:1px solid var(--border); font-size:11.5px; font-weight:600; color:var(--fg); }
.appsim__chathead .st{ margin-left:auto; display:flex; align-items:center; gap:5px; font-size:9px; font-weight:600; color:var(--primary); background:var(--accent); padding:2px 7px; border-radius:99px; }
.appsim__chathead .st i{ width:5px; height:5px; border-radius:99px; background:var(--primary); }
.appsim__msgs{ flex:1; overflow:hidden; padding:11px; display:flex; flex-direction:column; gap:9px; }
.cmsg .who{ display:flex; align-items:center; gap:5px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint-fg); margin-bottom:4px; }
.cbub{ border:1px solid var(--border); border-radius:5px; padding:7px 9px; color:var(--fg); background:var(--bg); font-size:10.5px; line-height:1.5; }
.cbub.u{ border-left:2px solid var(--border-strong); }
.cbub.a{ border-left:2px solid var(--primary); background:var(--accent); }
.cwrite{ display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--paper); border:1px solid var(--border); border-radius:5px; font-family:var(--mono); font-size:9.5px; color:var(--fg); }
.cwrite .ck{ width:14px; height:14px; border-radius:3px; background:oklch(0.92 0.06 150); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cwrite .ck svg{ width:10px; height:10px; color:oklch(0.45 0.12 150); }
.cwrite .pp{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appsim__composer{ border-top:1px solid var(--border); padding:8px 10px; background:var(--chrome); }
.appsim__composer .f{ display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--paper); border-radius:6px; padding:6px 9px; }
.appsim__composer .f span{ flex:1; font-size:11px; color:var(--faint-fg); }
.appsim__composer .f .snd{ width:22px; height:22px; border-radius:5px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.appsim__composer .f .snd svg{ width:12px; height:12px; }
/* status bar */
.appsim__status{ display:flex; align-items:center; gap:12px; height:24px; padding:0 12px; background:var(--navy); color:oklch(0.92 0.012 255); font-size:10px; }
.appsim__status .g{ width:1px; height:11px; background:oklch(1 0 0 / 0.2); }
.appsim__status .dot{ width:6px; height:6px; border-radius:99px; background:oklch(0.72 0.16 150); }
.appsim__status .rt{ margin-left:auto; display:flex; align-items:center; gap:6px; opacity:.85; }
.appsim__status svg{ width:11px; height:11px; }
/* balões de conversa flutuantes (aparecem no desktop, onde o chat interno fica oculto) */
.hero__mock{ position:relative; }
.hero__bubbles{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.hbub{ position:absolute; width:max-content; max-width:228px; background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:9px 12px; box-shadow:var(--shadow-lg); font-size:12.5px; line-height:1.45; color:var(--fg); text-wrap:pretty; }
.hbub .who{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint-fg); margin-bottom:5px; }
.hbub .who .av{ width:15px; height:15px; border-radius:4px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hbub .who .av svg{ width:10px; height:10px; }
.hbub .who .uav{ width:15px; height:15px; border-radius:99px; background:var(--accent); color:var(--accent-fg); font-size:7.5px; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.hbub strong{ font-weight:700; }
.hbub .ckline{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--fg); }
.hbub .ckline .ck{ width:15px; height:15px; border-radius:3px; background:oklch(0.92 0.06 150); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hbub .ckline .ck svg{ width:10px; height:10px; color:oklch(0.45 0.12 150); }
.hbub--1{ top:-18px; right:38px; }
.hbub--2{ top:92px; right:-26px; }
.hbub--3{ top:206px; right:44px; }
@media (prefers-reduced-motion: no-preference){
  .hbub{ animation: hbob 5.2s ease-in-out infinite; }
  .hbub--2{ animation-delay:-1.7s; }
  .hbub--3{ animation-delay:-3.2s; }
}
@keyframes hbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (max-width: 920px){ .hero__bubbles{ display:none; } }

/* tabela dentro do documento renderizado */
.appsim__page table{ width:100%; border-collapse:collapse; margin:14px 0 0; font-family:var(--sans); font-size:12px; }
.appsim__page th{ text-align:left; font-weight:600; background:var(--canvas); border:1px solid var(--border); padding:6px 9px; color:var(--fg); }
.appsim__page td{ border:1px solid var(--border); padding:6px 9px; vertical-align:top; color:var(--muted-fg); line-height:1.4; }
.appsim__page td strong{ color:var(--fg); }

/* variante grande · vitrine de UI completa na seção Recursos */
.feature-showcase{ margin:0 0 clamp(40px, 6vw, 60px); }
.feature-showcase .appsim{ box-shadow:0 2px 6px oklch(0.18 0.02 255 / 0.08), 0 24px 64px oklch(0.18 0.02 255 / 0.14); }
.feature-showcase figcaption{ margin-top:18px; text-align:center; font-size:13.5px; color:var(--faint-fg); text-wrap:pretty; }
.appsim--lg .appsim__body{ height:auto; }
.appsim--lg .appsim__page{ padding:30px 40px; }
.appsim--lg .appsim__page h1{ font-size:25px; line-height:1.18; margin:0 0 14px; }
.appsim--lg .appsim__page .meta{ font-size:12px; padding:10px 14px; margin:0 0 20px; }
.appsim--lg .appsim__page h2{ font-size:16px; margin:0 0 9px; }
.appsim--lg .appsim__page h2:not(:first-of-type){ margin-top:22px; }
.appsim--lg .appsim__page p{ font-size:14.5px; line-height:1.7; }
.appsim--lg .appsim__page table{ font-size:12.5px; }
.appsim--lg .appsim__page th,.appsim--lg .appsim__page td{ padding:7px 11px; }
@container (max-width: 560px){
  .appsim--lg .appsim__page h2:nth-of-type(2),
  .appsim--lg .appsim__page table{ display:none; }
}
/* o tamanho responde à LARGURA DA PRÓPRIA JANELA simulada (container query),
   não ao viewport: solta o chat quando o mock fica estreito (ex.: hero 2-col no
   desktop) e mantém os 3 painéis quando há espaço (hero empilhado em tela cheia). */
@container (max-width: 720px){
  .appsim__body{ grid-template-columns:150px minmax(0,1fr); height:428px; }
  .appsim__chat{ display:none; }
}
@container (max-width: 440px){
  .appsim__body{ grid-template-columns:128px minmax(0,1fr); height:412px; }
}

/* trust strip under hero */
.trust-strip{ border-top:1px solid var(--border); }
.trust-strip .wrap{ display:flex; flex-wrap:wrap; gap: 14px 40px; align-items:center; justify-content:center; padding-block: 22px; }
.trust-strip .ti{ display:flex; align-items:center; gap:9px; font-size:13.5px; color: var(--muted-fg); font-weight:500; }
.trust-strip .ti svg{ width:17px; height:17px; color: var(--primary); opacity:.8; }
.trust-strip .ti b{ color: var(--fg); font-weight:600; }

/* ---------- features ---------- */
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow:hidden; }
.feature{ background: var(--paper); padding: 30px 28px; display:flex; flex-direction:column; gap: 14px; transition: background .18s ease; }
.feature:hover{ background: var(--bg); }
.feature__ic{ width: 40px; height: 40px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); display:flex; align-items:center; justify-content:center; }
.feature__ic svg{ width: 21px; height:21px; }
.feature h3{ font-size: 19px; font-weight:600; letter-spacing:-0.01em; }
.feature p{ margin:0; font-size: 15px; line-height: 1.55; color: var(--muted-fg); text-wrap:pretty; }
.feature .num{ font-family:var(--mono); font-size:11px; color: var(--faint-fg); letter-spacing:0.08em; }
.feature--wide{ grid-column: span 3; flex-direction:row; align-items:center; gap: 24px; }
.feature--wide .feature__ic{ width:48px; height:48px; }
.feature--wide .ftxt{ display:flex; flex-direction:column; gap:6px; }

/* ---------- sovereignty (navy reverse) ---------- */
.sov{ background: var(--navy); color: oklch(0.94 0.01 255); position:relative; overflow:hidden; }
.sov::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background: var(--grad); }
.sov .eyebrow{ color: oklch(0.78 0.02 255); }
.sov .eyebrow::before{ background: var(--grad); }
.sov .section-head h2{ color:#fff; }
.sov .section-head p{ color: oklch(0.82 0.014 255); }
.sov__grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.12); border-radius: 14px; overflow:hidden; }
.sov__card{ background: var(--navy); padding: 26px 26px; display:flex; gap: 16px; }
.sov__card .sic{ width:34px; height:34px; flex-shrink:0; border-radius:8px; background: oklch(1 0 0 / 0.08); display:flex; align-items:center; justify-content:center; color: oklch(0.86 0.05 200); }
.sov__card .sic svg{ width:18px; height:18px; }
.sov__card h3{ font-size: 16.5px; font-weight:600; color:#fff; margin-bottom:6px; letter-spacing:-0.01em; }
.sov__card p{ margin:0; font-size: 14px; line-height:1.55; color: oklch(0.80 0.015 255); text-wrap:pretty; }
.sov__card code{ font-family:var(--mono); font-size:0.86em; background: oklch(1 0 0 / 0.10); padding: 1px 5px; border-radius:4px; color: oklch(0.90 0.03 200); }
.sov__summary{ margin-top: 36px; display:flex; align-items:center; gap: 16px; padding: 22px 26px; border: 1px solid oklch(1 0 0 / 0.16); border-radius: 12px; background: oklch(1 0 0 / 0.04); }
.sov__summary svg{ width: 26px; height:26px; flex-shrink:0; color: oklch(0.86 0.06 200); }
.sov__summary p{ margin:0; font-family: var(--serif); font-size: clamp(17px, 2.4vw, 21px); line-height:1.4; color:#fff; }
.sov__honest{ margin-top:18px; font-size:13px; color: oklch(0.74 0.015 255); line-height:1.55; max-width: 760px; }

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.step{ position:relative; padding: 0 26px 0 0; }
.step + .step{ padding-left: 26px; border-left: 1px solid var(--border); }
.step__n{ font-family: var(--mono); font-size: 13px; color: var(--primary); font-weight:600; letter-spacing:0.06em; margin-bottom: 16px; display:flex; align-items:center; gap:10px; }
.step__n::before{ counter-increment: step; content: "0" counter(step); font-size: 30px; font-family: var(--serif); color: var(--fg); font-weight:600; }
.step h3{ font-size: 18px; font-weight:600; margin-bottom: 8px; letter-spacing:-0.01em; }
.step p{ margin:0; font-size: 14.5px; line-height:1.55; color: var(--muted-fg); }

/* ---------- pricing ---------- */
.price-wrap{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items:stretch; }
.price-card{ border: 1px solid var(--border); border-radius: 16px; background: var(--paper); padding: 36px; box-shadow: var(--shadow-md); display:flex; flex-direction:column; }
.price-card .plan{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--primary); }
.price-card .amount{ display:flex; align-items:baseline; gap:8px; margin: 16px 0 4px; }
.price-card .amount .cur{ font-size: 22px; font-weight:600; color:var(--muted-fg); }
.price-card .amount .val{ font-family: var(--serif); font-size: 52px; font-weight:600; letter-spacing:-0.02em; line-height:1; }
.price-card .amount .per{ font-size: 15px; color: var(--muted-fg); }
.ph{ background: oklch(0.945 0.018 255); color: var(--accent-fg); font-family:var(--mono); font-weight:600; font-size: 0.7em; padding: 2px 8px; border-radius: 6px; letter-spacing:0.02em; border:1px dashed oklch(0.78 0.04 255); }
.price-card .desc{ font-size: 14.5px; color: var(--muted-fg); margin: 4px 0 22px; line-height:1.5; }
.price-list{ list-style:none; margin: 0 0 26px; padding: 22px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap: 14px; }
.price-list li{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; font-size: 14.5px; }
.price-list .k{ color: var(--muted-fg); display:flex; align-items:center; gap:9px; }
.price-list .k svg{ width:16px; height:16px; color: var(--primary); flex-shrink:0; }
.price-list .v{ font-weight:600; text-align:right; }
.price-card .btn{ margin-top:auto; width:100%; }
.price-aside{ display:flex; flex-direction:column; gap: 16px; }
.price-aside .pa-card{ border:1px solid var(--border); border-radius:14px; padding: 24px; background: var(--canvas); }
.price-aside .pa-card h4{ font-size: 15px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:9px; }
.price-aside .pa-card h4 svg{ width:18px; height:18px; color:var(--primary); }
.price-aside .pa-card p{ margin:0; font-size: 14px; line-height:1.55; color: var(--muted-fg); }
.price-aside .pa-card code{ font-family:var(--mono); font-size:0.88em; color:var(--fg); }

/* ---------- FAQ ---------- */
.faq{ max-width: 800px; margin-inline:auto; border-top:1px solid var(--border); }
.faq details{ border-bottom: 1px solid var(--border); }
.faq summary{ list-style:none; cursor:pointer; padding: 22px 4px; display:flex; align-items:center; gap:16px; font-size: 17px; font-weight:600; letter-spacing:-0.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ margin-left:auto; width:18px; height:18px; color: var(--faint-fg); transition: transform .2s ease; flex-shrink:0; }
.faq details[open] summary .chev{ transform: rotate(180deg); }
.faq .ans{ padding: 0 4px 24px 0; font-size: 15.5px; line-height:1.6; color: var(--muted-fg); max-width: 70ch; text-wrap:pretty; }
.faq .ans code{ font-family:var(--mono); font-size:0.88em; background: var(--accent); padding:1px 5px; border-radius:4px; color:var(--accent-fg); }

/* ---------- final CTA ---------- */
.final{ text-align:center; }
.final h2{ font-family: var(--serif); font-size: clamp(32px, 4.6vw, 52px); line-height:1.06; max-width: 16ch; margin-inline:auto; }
.final p{ margin: 20px auto 0; max-width: 52ch; font-size: 18px; color: var(--muted-fg); }
.final__cta{ display:flex; flex-wrap:wrap; gap: 14px; justify-content:center; margin-top: 34px; }
.final__note{ margin-top:20px; font-size:13px; color: var(--faint-fg); }

/* ---------- footer ---------- */
.site-footer{ background: var(--navy); color: oklch(0.82 0.014 255); padding-block: 56px 36px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand img{ height: 30px; margin-bottom: 16px; }
.footer-brand p{ margin:0; font-size: 13.5px; line-height:1.6; color: oklch(0.74 0.015 255); max-width: 30ch; }
.footer-col h5{ font-family:var(--mono); font-size: 11px; letter-spacing:0.14em; text-transform:uppercase; color: oklch(0.66 0.02 255); margin:0 0 16px; font-weight:500; }
.footer-col a{ display:block; font-size: 14px; color: oklch(0.84 0.014 255); padding: 6px 0; transition: color .15s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ margin-top: 44px; padding-top: 24px; border-top: 1px solid oklch(1 0 0 / 0.12); display:flex; flex-wrap:wrap; gap: 14px 24px; align-items:center; justify-content:space-between; font-size: 12.5px; color: oklch(0.66 0.018 255); }
.footer-bottom .legal{ display:flex; gap: 20px; flex-wrap:wrap; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .hero__inner{ grid-template-columns: 1fr; gap: 44px; }
  .hero__copy{ max-width:none; }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature--wide{ grid-column: span 2; }
  .sov__grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .step + .step{ }
  .step:nth-child(odd){ padding-left:0; padding-right:20px; }
  .step:nth-child(even){ padding-left:24px; border-left:1px solid var(--border); }
  .price-wrap{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 680px){
  body{ font-size: 16px; }
  .nav__links{ display:none; }
  .nav__menu-btn{ display:inline-flex; }
  .nav__cta .btn--ghost{ display:none; }
  .feature-grid{ grid-template-columns: 1fr; }
  .feature--wide{ grid-column: span 1; flex-direction:column; align-items:flex-start; }
  .steps{ grid-template-columns: 1fr; gap: 0; }
  .step, .step + .step, .step:nth-child(odd), .step:nth-child(even){ padding: 22px 0; border-left:none; border-top:1px solid var(--border); }
  .step:first-child{ border-top:none; padding-top:0; }
  .footer-top{ grid-template-columns: 1fr; gap: 28px; }
  .hero__plat{ flex-direction:column; gap:10px; }
}

/* mobile nav drawer */
.mnav{ position: fixed; inset:0; z-index: 100; background: oklch(1 0 0 / 0.98); backdrop-filter: blur(8px); display:none; flex-direction:column; padding: 20px var(--gutter); }
.mnav.open{ display:flex; }
.mnav__top{ display:flex; align-items:center; height: 46px; }
.mnav__top .close{ margin-left:auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--paper); }
.mnav a{ font-size: 22px; font-family: var(--serif); font-weight:600; padding: 16px 0; border-bottom: 1px solid var(--border); letter-spacing:-0.01em; }
.mnav .btn{ margin-top: 24px; }