/* ==========================================================================
   Syntax Studio — design system "control plane"
   Tokens, componentes e animações. Sem build, sem CSS externo, sem JS inline.
   Fontes auto-hospedadas em /assets/fonts. Especificação em DESIGN.md.
   ========================================================================== */

/* ---------- 0. Fontes (auto-hospedadas; zero requisição externa) ---------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/dm-sans.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:swap;
  src:url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');}

/* ---------- 1. Tokens ---------- */
:root {
  --bg:          #f6f8f7;
  --surface:     #ffffff;
  --surface-2:   #eef3f1;
  --ink:         #15252b;
  --ink-2:       #2c4048;
  --muted:       #5d6c74;
  --line:        #dfe8e7;
  --line-2:      #c9d8d6;
  --dark:        #0e1c23;
  --dark-2:      #16272e;
  --mint:        #cafa99;
  --mint-deep:   #a8e85f;
  --mint-ink:    #17251a;
  --teal:        #26a68e;
  --teal-ink:    #17715f;
  --violet:      #655be9;
  --violet-soft: #eceafd;
  --warn:        #a8571a;
  --warn-soft:   #fdf3e8;
  --on-dark:     #eaf3f1;

  --display: "Plus Jakarta Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(.78rem, .75rem + .12vw, .84rem);
  --step-0:  clamp(.97rem, .94rem + .16vw, 1.03rem);
  --step-1:  clamp(1.08rem, 1.02rem + .28vw, 1.24rem);
  --step-2:  clamp(1.3rem, 1.16rem + .55vw, 1.62rem);
  --step-3:  clamp(1.62rem, 1.32rem + 1.05vw, 2.3rem);
  --step-4:  clamp(2.05rem, 1.45rem + 2.3vw, 3.35rem);

  --gap:     clamp(.9rem, .6rem + 1vw, 1.35rem);
  --pad-x:   clamp(1.1rem, .6rem + 2.2vw, 2rem);
  --section: clamp(3.2rem, 2rem + 4.6vw, 5.6rem);
  --max:     1120px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(14,28,35,.05), 0 6px 18px -12px rgba(14,28,35,.18);
  --sh-2: 0 2px 6px rgba(14,28,35,.06), 0 24px 48px -28px rgba(14,28,35,.34);
  --ring: 0 0 0 3px rgba(38,166,142,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .3s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0b1418;
    --surface:   #101d22;
    --surface-2: #14262c;
    --ink:       #e9f2f0;
    --ink-2:     #c3d4d2;
    --muted:     #93a6a8;
    --line:      #1d2f35;
    --line-2:    #294049;
    --dark:      #071217;
    --dark-2:    #0e1c23;
    --mint:      #cafa99;
    --mint-ink:  #17251a;
    --teal:      #45c7ac;
    --teal-ink:  #7fe0c9;
    --violet:    #8d86ff;
    --violet-soft: #1d1c33;
    --warn:      #f0b27a;
    --warn-soft: #2a1d10;
    --on-dark:   #eaf3f1;
  }
}

/* ---------- 2. Base ---------- */
*,*::before,*::after { 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; background:var(--bg); color:var(--ink);
  font: var(--step-0)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg { max-width:100%; display:block; height:auto; }
a { color:var(--teal-ink); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.12; margin:0 0 .5em; }
h1 { font-size:var(--step-4); }
h2 { font-size:var(--step-3); }
h3 { font-size:var(--step-1); letter-spacing:-.015em; }
p { margin:0 0 1em; }
ul,ol { padding-left:1.2rem; }
li { margin:.35em 0; }
hr { border:0; border-top:1px dashed var(--line-2); margin:2rem 0; }
strong { font-weight:700; }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:5px; }
::selection { background:var(--mint); color:var(--mint-ink); }

.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--dark); color:var(--on-dark);
  padding:.7rem 1rem; border-radius:0 0 var(--r-sm) 0; font:500 .9rem/1 var(--mono); }
.skip:focus { left:0; }
.wrap { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x); }
.narrow { max-width:840px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.svg-sprite { display:none; }

/* ---------- 3. Cabeçalho ---------- */
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-header { background:var(--bg); } }
.site-header.is-scrolled { border-bottom-color:var(--line); box-shadow:var(--sh-1); }
.site-header .bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; padding-block:.6rem; }

.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); }
.brand:hover { text-decoration:none; color:var(--ink); }
.brand-mark { width:36px; height:36px; border-radius:11px; background:var(--dark); color:var(--mint);
  display:grid; place-items:center; font:700 15px/1 var(--display); letter-spacing:-.02em; flex:none; }
.brand-txt { display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b { font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; }
.brand-txt small { color:var(--muted); font-size:.7rem; font-family:var(--mono); letter-spacing:.02em; }

.nav { display:flex; align-items:center; gap:.15rem; }
.nav a { color:var(--ink-2); font-size:.92rem; font-weight:500; padding:.5rem .68rem; border-radius:var(--r-sm); }
.nav a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
.nav a[aria-current="page"] { color:var(--teal-ink); background:var(--surface-2); }
/* o botão do menu precisa vencer a especificidade de `.nav a` */
.nav .nav-cta { margin-left:.35rem; color:var(--on-dark); background:var(--dark); }
.nav .nav-cta:hover, .nav .nav-cta:focus-visible, .nav .nav-cta[aria-current] {
  color:var(--mint); background:var(--dark-2); }

.nav-toggle { display:none; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line-2);
  color:var(--ink); padding:.55rem .8rem; border-radius:var(--r-sm); font:500 .88rem var(--mono); cursor:pointer; }
.nav-toggle .bars { display:grid; gap:3px; }
.nav-toggle .bars i { width:16px; height:2px; background:currentColor; border-radius:2px;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }

@media (max-width:880px) {
  .nav-toggle { display:inline-flex; }
  .nav { position:absolute; inset:100% 0 auto; flex-direction:column; align-items:stretch; gap:.15rem;
    background:var(--bg); border-bottom:1px solid var(--line); padding:.7rem var(--pad-x) 1.1rem;
    box-shadow:var(--sh-2); display:none; }
  .nav.is-open { display:flex; animation:slideDown .26s var(--ease) both; }
  .nav a { padding:.8rem .6rem; font-size:1rem; }
  .nav .nav-cta { margin:.5rem 0 0; text-align:center; justify-content:center; }
}

/* ---------- 4. Botões, pills, rótulos ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.1rem;
  border-radius:var(--r-sm); font:500 .95rem/1.1 var(--sans); border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn-primary { background:var(--dark); color:var(--on-dark); box-shadow:var(--sh-1); }
.btn-primary:hover { color:var(--mint); text-decoration:none; transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn-mint { background:var(--mint); color:var(--mint-ink); border-color:var(--mint-deep); }
.btn-mint:hover { color:var(--mint-ink); text-decoration:none; transform:translateY(-2px); filter:brightness(1.03); box-shadow:var(--sh-2); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover { background:var(--surface); border-color:var(--ink); text-decoration:none; color:var(--ink); transform:translateY(-2px); }
/* os botões são desenhados para fundo claro: sobre os blocos escuros a tinta precisa inverter,
   senão o texto desaparece (tinta escura sobre gradiente escuro) */
.endcta .btn-ghost, .checker .btn-ghost, .section-dark .btn-ghost {
  color:var(--on-dark); border-color:rgba(234,243,241,.38); background:rgba(255,255,255,.06); }
.endcta .btn-ghost:hover, .checker .btn-ghost:hover, .section-dark .btn-ghost:hover {
  background:rgba(255,255,255,.13); border-color:var(--mint); color:var(--mint); }
.endcta .btn-primary, .checker .btn-primary, .section-dark .btn-primary {
  background:var(--mint); color:var(--mint-ink); border-color:var(--mint-deep); }
.endcta .btn-primary:hover, .checker .btn-primary:hover { color:var(--mint-ink); }
.btn-sm { padding:.5rem .8rem; font-size:.87rem; }
.btn-lg { padding:.9rem 1.35rem; font-size:1rem; }
.btn .arw { transition:transform var(--dur) var(--ease); }
.btn:hover .arw { transform:translateX(3px); }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }

.pill { display:inline-flex; align-items:center; gap:.5rem; padding:.32rem .7rem; border-radius:var(--r-pill);
  background:var(--mint); color:var(--mint-ink); border:1px solid var(--mint-deep);
  font:500 .74rem/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:var(--teal-ink); animation:pulse 2.6s var(--ease) infinite; }
.pill-soft { background:var(--surface); color:var(--muted); border-color:var(--line-2); }
.pill-soft .dot { background:var(--teal); }
.pill-on-dark { background:rgba(202,250,153,.14); color:var(--mint); border-color:rgba(202,250,153,.35); }

.eyebrow { display:block; font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-ink); margin-bottom:.85rem; }
.eyebrow.on-dark { color:var(--mint); }
.sectop { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.2rem;
  margin-bottom:clamp(1.5rem,1rem+1.8vw,2.4rem); }
.sectop .txt { max-width:62ch; }
.sectop p { color:var(--muted); font-size:var(--step-1); margin:.4rem 0 0; }

/* ---------- 5. Hero + mock de painel ---------- */
.hero { position:relative; padding-block:clamp(2.6rem,1.8rem+4.5vw,4.6rem) clamp(2rem,1.2rem+3vw,3.2rem); }
.hero-grid { display:grid; gap:clamp(1.6rem,1rem+3vw,3rem); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; }
@media (max-width:980px) { .hero-grid { grid-template-columns:1fr; } }
.hero h1 { max-width:15ch; }
.hero h1 u { text-decoration:none; position:relative; white-space:nowrap; color:var(--mint-ink); }
/* marca-texto: cobre a altura toda do texto e a tinta é sempre escura sobre a menta —
   em tema escuro o texto claro encostava na tarja e a parte de baixo das letras desaparecia */
.hero h1 u::after { content:""; position:absolute; left:-.08em; right:-.08em; top:.02em; bottom:-.02em;
  background:var(--mint); z-index:-1; border-radius:4px; }
.hero .lead { font-size:var(--step-1); color:var(--muted); max-width:52ch; margin-bottom:1.5rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.hero-note { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:1.6rem; color:var(--muted); font-size:.84rem; }
.hero-note span { display:inline-flex; align-items:center; gap:.4rem; }
.hero-note svg { width:15px; height:15px; color:var(--teal); flex:none; }

.mock { background:var(--dark); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-2);
  border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; }
.mock::after { content:""; position:absolute; inset:-30% -20% auto auto; width:60%; height:120%;
  background:radial-gradient(circle at 60% 30%, rgba(202,250,153,.16), transparent 62%); pointer-events:none; }
.mock-bar { display:flex; align-items:center; gap:.5rem; padding:0 4px 12px; border-bottom:1px solid rgba(255,255,255,.09); position:relative; }
.mock-bar i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); }
.mock-bar span { margin-left:auto; font:400 .66rem/1 var(--mono); color:var(--mint); letter-spacing:.08em; text-transform:uppercase; }
.mock-body { display:grid; grid-template-columns:74px 1fr; gap:12px; padding-top:12px; position:relative; }
.mock-side { display:grid; gap:6px; align-content:start; }
.mock-side b { width:30px; height:30px; border-radius:9px; background:var(--mint); color:var(--mint-ink);
  display:grid; place-items:center; font:700 12px/1 var(--display); margin-bottom:4px; }
.mock-side i { display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.14); }
.mock-side i.on { background:var(--mint); }
.mock-main { display:grid; gap:10px; }
.mock-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mock-kpi { background:rgba(255,255,255,.06); border-radius:10px; padding:9px 10px; }
.mock-kpi span { display:block; font:400 .6rem/1.3 var(--mono); color:rgba(234,243,241,.6); text-transform:uppercase; letter-spacing:.06em; }
.mock-kpi b { font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--mint); }
.mock-chart { display:flex; align-items:flex-end; gap:5px; height:74px; padding:10px; background:rgba(255,255,255,.05); border-radius:10px; }
.mock-chart i { flex:1; height:var(--bar,42%); border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--mint),rgba(202,250,153,.35)); transform-origin:50% 100%; }
/* alturas por posição: um gráfico precisa de alturas distintas para parecer dados.
   O padrão de 12 se repete (12n+N) para valer nas 48 barras do painel, sem repetir regra. */
.mock-chart i:nth-child(12n+1) { --bar:34%; }
.mock-chart i:nth-child(12n+2) { --bar:52%; }
.mock-chart i:nth-child(12n+3) { --bar:41%; }
.mock-chart i:nth-child(12n+4) { --bar:68%; }
.mock-chart i:nth-child(12n+5) { --bar:57%; }
.mock-chart i:nth-child(12n+6) { --bar:80%; }
.mock-chart i:nth-child(12n+7) { --bar:63%; }
.mock-chart i:nth-child(12n+8) { --bar:92%; }
.mock-chart i:nth-child(12n+9) { --bar:74%; }
.mock-chart i:nth-child(12n+10) { --bar:100%; }
.mock-chart i:nth-child(12n+11) { --bar:86%; }
.mock-chart i:nth-child(12n+12) { --bar:96%; }
@media (prefers-reduced-motion: no-preference) {
  .mock-chart i { animation:barGrow .8s cubic-bezier(.22,1,.36,1) both; }
  .mock-chart i:nth-child(2n) { animation-delay:.06s; }
  .mock-chart i:nth-child(3n) { animation-delay:.12s; }
  @keyframes barGrow { from { transform:scaleY(.18); } to { transform:scaleY(1); } }
}
.mock-rows { display:grid; gap:6px; }
.mock-row { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px;
  background:rgba(255,255,255,.05); font:400 .72rem/1.2 var(--mono); color:rgba(234,243,241,.82); }
.mock-row em { font-style:normal; margin-left:auto; color:var(--mint); }
.mock-row .st { width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; }
.mock-cap { text-align:center; font:400 .66rem/1 var(--mono); color:var(--muted); margin-top:.7rem; letter-spacing:.04em; }

/* ---------- 6. Faixa rolante ---------- */
.ticker { border-block:1px solid var(--line); background:var(--surface); overflow:hidden; }
.ticker .track { display:flex; align-items:center; gap:2.2rem; padding:.85rem 0; width:max-content;
  animation:marquee 38s linear infinite; }
.ticker:hover .track { animation-play-state:paused; }
.ticker span { display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  font:500 .74rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ticker svg { width:14px; height:14px; color:var(--teal); flex:none; }

/* ---------- 7. Seções e cards ---------- */
.section { padding-block:var(--section); }
.section + .section { border-top:1px solid var(--line); }
.section-alt { background:var(--surface); }
.section-dark { background:var(--dark); color:var(--on-dark); }
.section-dark h2, .section-dark h3 { color:var(--on-dark); }
.section-dark p { color:rgba(234,243,241,.78); }
.section-dark a { color:var(--mint); }

.grid { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }

.card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.3rem; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.card h3 { margin-bottom:.3rem; }
.card p { color:var(--muted); font-size:.94rem; margin:0; }
.card .icon { width:38px; height:38px; border-radius:10px; margin-bottom:.85rem; display:grid; place-items:center;
  background:var(--mint); color:var(--mint-ink); }
.card .icon svg { width:20px; height:20px; }
.card-list { list-style:none; padding:0; margin:.85rem 0 0; }
.card-list li { display:flex; gap:.5rem; align-items:flex-start; color:var(--muted); font-size:.89rem; margin:.28rem 0; }
.card-list svg { width:14px; height:14px; color:var(--teal); flex:none; margin-top:.36em; }

.feat { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.feat article { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.25rem;
  display:flex; flex-direction:column; gap:.5rem; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.feat article:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.feat h3 { margin:0; display:flex; align-items:center; gap:.6rem; }
.feat h3 .ficon { width:32px; height:32px; border-radius:9px; background:var(--surface-2); color:var(--teal-ink);
  display:grid; place-items:center; flex:none; }
.feat h3 .ficon svg { width:17px; height:17px; }
.feat p { color:var(--muted); font-size:.92rem; margin:0; }
.feat .forw { margin-top:auto; padding-top:.7rem; font:500 .76rem/1 var(--mono); color:var(--teal-ink);
  display:inline-flex; align-items:center; gap:.4rem; }
.feat .forw svg { width:13px; height:13px; transition:transform var(--dur) var(--ease); }
.feat article:hover .forw svg { transform:translateX(3px); }

.steps { counter-reset:step; display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)); }
.step { position:relative; padding-top:2.5rem; }
.step::before { counter-increment:step; content:"0" counter(step); position:absolute; top:0; left:0;
  font:500 .72rem/1 var(--mono); color:var(--teal-ink); background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.35rem .6rem; }
.step h3 { font-size:1rem; margin-bottom:.2rem; }
.step p { color:var(--muted); font-size:.91rem; margin:0; }

.stats { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.15rem; }
.stat b { display:block; font-family:var(--display); font-weight:700; font-size:var(--step-2); letter-spacing:-.02em; }
.stat span { color:var(--muted); font-size:.85rem; }

.svc { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.svc article { border:1px solid var(--line); border-radius:var(--r-md); padding:1.25rem; background:var(--surface); }
.svc .n { font:500 .72rem/1 var(--mono); color:var(--teal-ink); letter-spacing:.12em; }
.svc h3 { margin:.6rem 0 .3rem; font-size:1.05rem; }
.svc p { color:var(--muted); font-size:.91rem; margin:0; }

/* ---------- 8. Consulta de CNPJ (integração real) ---------- */
.checker { background:var(--dark); color:var(--on-dark); border-radius:var(--r-lg); padding:clamp(1.3rem,1rem+2vw,2.2rem); position:relative; overflow:hidden; }
.checker::after { content:""; position:absolute; inset:auto -10% -40% auto; width:50%; height:120%;
  background:radial-gradient(circle at 40% 60%, rgba(38,166,142,.28), transparent 62%); pointer-events:none; }
.checker h2, .checker h3 { color:var(--on-dark); }
.checker p { color:rgba(234,243,241,.78); }
.checker-form { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin:1.1rem 0 .6rem; position:relative; }
.checker-form .field { flex:1 1 240px; }
/* especificidade: `.field label` (mais abaixo na folha) tem o mesmo peso de `.checker label`,
   então o rótulo dentro do painel escuro precisa de um seletor mais forte para continuar menta */
.checker label, .checker .field label { display:block; font:500 .72rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--mint); margin-bottom:.45rem; }
.checker input { font:500 1.05rem/1 var(--mono); letter-spacing:.04em; width:100%; padding:.75rem .85rem;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:var(--on-dark); }
.checker input::placeholder { color:rgba(234,243,241,.45); }
.checker input:focus { outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgba(202,250,153,.22); }
.checker .hint { font:400 .74rem/1.5 var(--mono); color:rgba(234,243,241,.6); position:relative; }
/* o campo dentro do painel escuro herda o estilo claro de `.field input` (regra posterior, mesmo peso):
   mantemos o campo claro — melhor contraste — e ajustamos o que depende dele */
.checker .field input::placeholder { color:#78888f; }
.checker .field .hint { color:rgba(234,243,241,.72); }
.checker .examples { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; position:relative; }
.checker .examples button { font:400 .74rem/1 var(--mono); color:var(--mint); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-pill); padding:.35rem .7rem; cursor:pointer; }
.checker .examples button:hover { background:rgba(202,250,153,.14); }
.result { display:none; margin-top:1.2rem; position:relative; }
.result.on { display:block; animation:fadeUp .45s var(--ease) both; }
.result-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:1.1rem; }
.result-head { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin-bottom:.9rem; }
.result-head b { font-family:var(--display); font-weight:700; font-size:1.08rem; color:var(--on-dark); }
.status-tag { font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:.32rem .6rem;
  border-radius:var(--r-pill); background:rgba(202,250,153,.16); color:var(--mint); border:1px solid rgba(202,250,153,.4); }
.status-tag.bad { background:rgba(240,178,122,.16); color:#f0b27a; border-color:rgba(240,178,122,.4); }
.result-grid { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.result-grid div { border-top:1px solid rgba(255,255,255,.12); padding-top:.55rem; }
.result-grid span { display:block; font:400 .66rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.08em;
  color:rgba(234,243,241,.55); }
.result-grid b { font-weight:500; font-size:.94rem; color:var(--on-dark); }
.result .msg { font:400 .78rem/1.5 var(--mono); margin-top:.9rem; color:rgba(234,243,241,.65); }

/* ---------- 9. Central de controle (demonstração) ---------- */
.demo { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); }
.demo-top { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); background:var(--surface-2); }
.demo-top .name { font:500 .74rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.tabs { display:flex; gap:.2rem; margin-left:auto; flex-wrap:wrap; }
.tabs button { font:500 .82rem var(--sans); color:var(--muted); background:transparent; border:1px solid transparent;
  border-radius:var(--r-sm); padding:.42rem .7rem; cursor:pointer; }
.tabs button:hover { color:var(--ink); background:var(--surface); }
.tabs button[aria-selected="true"] { color:var(--ink); background:var(--surface); border-color:var(--line-2); }
.demo-body { padding:1.1rem; }
.demo-kpis { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); margin-bottom:1rem; }
.demo-kpi { border:1px dashed var(--line-2); border-radius:var(--r-md); padding:.85rem .95rem; }
.demo-kpi span { display:block; font:400 .68rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.demo-kpi b { font-family:var(--display); font-weight:700; font-size:1.3rem; }
.demo-tools { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:.9rem; }
.demo-tools input { flex:1 1 200px; font:400 .9rem var(--sans); padding:.55rem .7rem; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink); }
.demo-tools input:focus { outline:none; border-color:var(--teal); box-shadow:var(--ring); }
.rows { display:grid; gap:.4rem; }
.row { display:grid; grid-template-columns:auto 1fr auto auto; gap:.8rem; align-items:center;
  padding:.62rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); font-size:.9rem; }
.row .dotst { width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none; }
.row .dotst.off { background:var(--line-2); }
.row .dotst.warn { background:#e0a03c; }
.row b { font-weight:500; }
.row .meta { font:400 .74rem/1.3 var(--mono); color:var(--muted); }
.row .val { font:500 .78rem/1 var(--mono); color:var(--teal-ink); }
.row.hidden { display:none; }
.demo-foot { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1rem; padding-top:.9rem; border-top:1px dashed var(--line-2); }
.demo-log { font:400 .76rem/1.5 var(--mono); color:var(--muted); margin:0; min-height:1.5em; flex:1 1 240px; }
.demo-log.ok { color:var(--teal-ink); }
@media (max-width:620px) { .row { grid-template-columns:auto 1fr; } .row .meta, .row .val { grid-column:2; } }

/* ---------- 10. FAQ ---------- */
.faq { display:grid; gap:.5rem; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:0 1.1rem;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq details[open] { border-color:var(--line-2); box-shadow:var(--sh-1); }
.faq summary { cursor:pointer; list-style:none; padding:1rem 0; font-weight:500; font-family:var(--display);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; width:9px; height:9px; flex:none; border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal); transform:rotate(45deg); transition:transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform:rotate(-135deg); }
.faq .answer { color:var(--muted); padding-bottom:1.05rem; font-size:.94rem; }
.faq .answer > :last-child { margin-bottom:0; }

/* ---------- 11. Faixa final ---------- */
.endcta { background:linear-gradient(120deg,var(--dark),var(--dark-2) 55%,#1d3a35); color:var(--on-dark);
  border-radius:var(--r-lg); padding:clamp(1.5rem,1rem+2.6vw,2.6rem); position:relative; overflow:hidden; box-shadow:var(--sh-2); }
.endcta::before { content:""; position:absolute; inset:-30% -10% auto; height:150%;
  background:radial-gradient(circle at 18% 22%, rgba(202,250,153,.2), transparent 45%),
             radial-gradient(circle at 82% 74%, rgba(101,91,233,.22), transparent 42%);
  animation:drift 26s ease-in-out infinite alternate; }
.endcta > * { position:relative; }
.endcta h2 { color:var(--on-dark); }
.endcta p { color:rgba(234,243,241,.82); max-width:54ch; }
.endcta .actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.2rem; }

/* ---------- 12. Formulário ---------- */
.form-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.15rem,.8rem+1.8vw,1.9rem); box-shadow:var(--sh-2); }
.form-grid { display:grid; gap:.95rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }
.field { display:flex; flex-direction:column; gap:.32rem; }
.field.full { grid-column:1/-1; }
.field label { font:500 .82rem/1.3 var(--sans); color:var(--ink-2); }
.field .hint { font:400 .74rem/1.4 var(--mono); color:var(--muted); }
.field input, .field select, .field textarea { font:400 .95rem var(--sans); color:var(--ink); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.68rem .78rem; width:100%;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.field textarea { min-height:118px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--teal);
  box-shadow:var(--ring); background:var(--surface); }
.field input:user-invalid, .field textarea:user-invalid { border-color:var(--warn); }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size:.87rem; color:var(--muted); }
.check input { width:1.05rem; height:1.05rem; margin-top:.15rem; accent-color:var(--teal); flex:none; }
.form-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:1.1rem; }
.form-status { font:400 .82rem/1.5 var(--mono); margin:.8rem 0 0; }
.form-status.ok { color:var(--teal-ink); }
.form-status.err { color:var(--warn); }

/* ---------- 13. Prosa (páginas legais) ---------- */
.page-head { padding-block:clamp(2.2rem,1.5rem+3.6vw,3.6rem) clamp(.9rem,.6rem+1.2vw,1.5rem); border-bottom:1px solid var(--line); }
.page-head .pill { margin-bottom:1rem; }
.page-head h1 { max-width:22ch; }
.page-head .meta { color:var(--muted); font:400 .82rem/1.6 var(--mono); margin:0; }
.prose { max-width:790px; padding-block:clamp(1.8rem,1.2rem+2.6vw,3rem); }
.prose h2 { font-size:var(--step-2); margin-top:2.4rem; scroll-margin-top:96px; }
.prose h3 { font-size:1.03rem; margin-top:1.5rem; }
.prose p, .prose li { color:var(--ink-2); }
.prose ul, .prose ol { padding-left:1.25rem; }
.prose table { width:100%; border-collapse:collapse; margin:1.1rem 0; font-size:.92rem; }
.prose th, .prose td { border:1px solid var(--line); padding:.6rem .72rem; text-align:left; vertical-align:top; }
.prose th { background:var(--surface-2); font-weight:500; color:var(--ink); }
.prose tbody tr:hover { background:color-mix(in srgb, var(--surface-2) 55%, transparent); }
.prose > :first-child { margin-top:0; }
.prose .meta { color:var(--muted); font-size:.86rem; }

.toc { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--mint);
  border-radius:var(--r-md); padding:1rem 1.15rem; margin-bottom:1.5rem; }
.toc strong { display:block; margin-bottom:.35rem; font:500 .78rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.toc ol { margin:0; padding-left:1.15rem; font-size:.89rem; }
@media (min-width:720px) { .toc ol { columns:2; column-gap:2rem; } }

.note { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--mint);
  border-radius:var(--r-md); padding:.95rem 1.1rem; color:var(--ink-2); font-size:.94rem; }
.note > :last-child { margin-bottom:0; }
.note-warn { border-left-color:var(--warn); background:var(--warn-soft); }

.info-table { width:100%; border-collapse:collapse; margin:1.1rem 0; font-size:.93rem; }
.info-table th, .info-table td { border:1px solid var(--line); padding:.62rem .72rem; text-align:left; vertical-align:top; }
.info-table th { background:var(--surface-2); font-weight:500; width:38%; color:var(--ink-2); }
.info-table tbody tr:hover { background:color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* ---------- 14. Rodapé ---------- */
.site-footer { background:var(--dark); color:rgba(234,243,241,.72); padding-block:clamp(2rem,1.4rem+2.6vw,3rem) 1.5rem; margin-top:var(--section); }
.site-footer .cols { display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr)); }
.site-footer strong { display:block; margin-bottom:.55rem; color:var(--on-dark); font-family:var(--display); font-size:.95rem; }
.site-footer p, .site-footer li { font-size:.86rem; margin:.3rem 0; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer a { color:rgba(234,243,241,.72); }
.site-footer a:hover { color:var(--mint); }
.site-footer .brand-mark { background:var(--mint); color:var(--mint-ink); }
.site-footer .legal { margin-top:1.8rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.1);
  font:400 .74rem/1.6 var(--mono); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  color:rgba(234,243,241,.55); }

/* ---------- 15. Animações ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-3%,4%,0) scale(1.1); } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes blink { 0%,100% { opacity:.35; } 50% { opacity:1; } }

.enter > * { animation:fadeUp .55s var(--ease) both; }
.enter > *:nth-child(2) { animation-delay:.06s; }
.enter > *:nth-child(3) { animation-delay:.12s; }
.enter > *:nth-child(4) { animation-delay:.18s; }

/* revelação no scroll: o JS só esconde depois de confirmar que o observer funciona */
@media (prefers-reduced-motion: no-preference) {
  .reveal-hidden { opacity:0; transform:translateY(16px); }
  .reveal.is-visible { opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
}
.io-probe { position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--mint); animation:blink 1.8s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .ticker .track { animation:none; }
  .card:hover, .btn:hover, .feat article:hover { transform:none; }
}

/* ---------- 16. Styleguide (/estilo) ---------- */
.swatches { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr)); }
.swatch { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; font:400 .74rem/1.4 var(--mono); }
.swatch i { display:block; height:58px; }
.swatch span { display:block; padding:.45rem .55rem; color:var(--muted); }
.type-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--line-2); }
.type-row code { font:400 .74rem/1 var(--mono); color:var(--muted); }
.stack { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.sw-bg { background:var(--bg); } .sw-surface { background:var(--surface); } .sw-surface2 { background:var(--surface-2); }
.sw-ink { background:var(--ink); } .sw-muted { background:var(--muted); } .sw-line { background:var(--line-2); }
.sw-dark { background:var(--dark); } .sw-mint { background:var(--mint); } .sw-teal { background:var(--teal); }
.sw-violet { background:var(--violet); }
.ts-4 { font-family:var(--display); font-weight:700; font-size:var(--step-4); }
.ts-3 { font-family:var(--display); font-weight:700; font-size:var(--step-3); }
.ts-2 { font-family:var(--display); font-weight:700; font-size:var(--step-2); }
.ts-1 { font-size:var(--step-1); }
.ts-0 { font-size:var(--step-0); }
.ts-m1 { font:400 var(--step--1)/1 var(--mono); }

/* ---------- 16b. Figuras, painéis ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin:0; }
.panel img { width:100%; height:auto; display:block; background:var(--surface-2); }
.panel figcaption { padding:.75rem .9rem; font:400 .76rem/1.55 var(--mono); color:var(--muted); border-top:1px solid var(--line); }
.page-head .lead { font-size:var(--step-1); color:var(--muted); max-width:62ch; margin:.6rem 0 0; }

/* ---------- 17. Utilidades ---------- */
.mt-0 { margin-top:0; } .mb-0 { margin-bottom:0; }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.6rem; }
.muted { color:var(--muted); } .small { font-size:.86rem; }
.row-flex { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.hero-note svg, .card-list svg, .ticker svg, .feat svg { fill:none; }

@media print {
  .site-header, .site-footer, .endcta, .ticker, .form-card, .checker, .demo { display:none; }
  body { color:#000; background:#fff; }
  .prose { max-width:none; }
}