/* ==========================================================================
   RoxOps — Folha de Esquema (Tema Deep Blue)
   Direção: Prancha técnica em Azul Escuro e Ciano. Régua fina, marcações mono,
   um único elemento vivo (a esteira). Tudo o mais em silêncio.
   ========================================================================== */

:root{
  --paper:      #020813;
  --paper-2:    #081026;
  --tint:       #040a18;
  --ink:        #f3f4f6;
  --ink-2:      #94a3b8;
  --ink-deep:   #020610;
  --rox:        #0062ff;
  --rox-soft:   #38bdf8;
  --rox-line:   rgba(56, 189, 248, 0.16);
  --rox-glow:   #00e5ff;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --disp: "Bricolage Grotesque", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --gut: clamp(1.25rem, 5vw, 4rem);
  --max: 1180px;
  --rule: 1px solid var(--rox-line);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* malha de prancha: quase invisível, só dá textura de papel técnico */
  background-image:
    linear-gradient(to right, rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.035) 1px, transparent 1px);
  background-size:88px 88px;
}

p{ margin:0 0 1rem; }
h1,h2,h3{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

.mono{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--rox); color:#fff; padding:.75rem 1rem; z-index:99;
}
.skip:focus{ left:0; }

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

.sheet{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.sheet--narrow{ max-width:760px; }

/* ── barra superior ─────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--gut);
  background:rgba(2, 8, 19, 0.86);
  backdrop-filter:blur(10px);
  border-bottom:var(--rule);
}
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; margin-right:auto; }
.brand__mark{ color:var(--rox); display:flex; }
.brand__word{ font-family:var(--disp); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }

.topnav{ display:flex; gap:1.6rem; }
.topnav a{
  font-size:.875rem; text-decoration:none; color:var(--ink-2);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.topnav a:hover{ color:var(--rox); border-bottom-color:var(--rox); }

@media (max-width:880px){ .topnav{ display:none; } }

/* ── botões ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:.85rem 1.5rem;
  background:var(--rox); color:#fff;
  text-decoration:none; border:1px solid var(--rox); border-radius:2px;
  transition:transform .16s ease, background .16s ease;
}
.btn:hover{ background:#004ecc; transform:translateY(-1px); }
.btn--sm{ padding:.55rem 1rem; font-size:.85rem; }
.btn--ghost{ background:transparent; color:var(--rox-soft); border-color:var(--rox-soft); }
.btn--ghost:hover{ background:rgba(56, 189, 248, 0.08); }
.btn--light{ background:#fff; color:var(--ink-deep); border-color:#fff; }
.btn--light:hover{ background:#e0f2fe; }
.btn--ghost-inv{ color:#fff; border-color:rgba(255,255,255,.35); }
.btn--ghost-inv:hover{ background:rgba(255,255,255,.1); }

/* ── marcações de seção ─────────────────────────────────────────── */
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rox);
  margin:0 0 1.4rem;
}
.eyebrow--inv{ color:var(--rox-soft); }
.tick{ width:22px; height:1px; background:currentColor; display:inline-block; }
.tick::after{ content:""; display:block; width:1px; height:7px; background:currentColor; transform:translate(21px,-3px); }

/* ── tipografia de título ───────────────────────────────────────── */
.display{
  font-family:var(--disp);
  font-weight:800;
  font-size:clamp(2.6rem, 6.4vw, 5.1rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 1.6rem;
  max-width:16ch;
}
.display__hi{ position:relative; color:var(--rox); white-space:nowrap; }
.underscore{
  position:absolute; left:0; bottom:-.12em; width:100%; height:.14em;
  color:var(--rox-soft); overflow:visible;
}

.h2{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.8rem, 3.6vw, 3rem);
  line-height:1.1; letter-spacing:-.028em;
  margin:0 0 1.2rem; max-width:22ch;
}
.h2--inv{ color:#fff; }
.h2--big{ max-width:14ch; }

.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  line-height:1.55; color:var(--ink-2); max-width:54ch; margin:0 0 2.2rem;
}
.section__lede{ font-size:1.08rem; color:var(--ink-2); max-width:56ch; margin:0 0 3rem; }
.section__lede--inv{ color:rgba(255,255,255,.72); }

/* ── hero ───────────────────────────────────────────────────────── */
.hero{ padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ── ASSINATURA: a esteira ──────────────────────────────────────── */
.flow{
  margin:clamp(3.5rem, 8vw, 6rem) 0 0;
  background:var(--paper-2);
  border:var(--rule);
  border-radius:3px;
  box-shadow:0 1px 0 rgba(56, 189, 248, 0.05), 0 18px 40px -30px rgba(0,0,0,.75);
}
.flow__cap{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem 1.1rem;
  border-bottom:var(--rule);
  color:var(--ink-2);
}
.flow__status{ color:var(--rox-soft); }
.flow__status::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; margin-right:.5rem; vertical-align:middle;
}

/* Alturas fixas para que o fio caia exatamente no centro dos nós,
   sem depender do line-height herdado. */
.flow__track{
  --pad-top:2.4rem;
  --id-h:14px;
  --node-gap:.55rem;
  --dot-h:15px;
  --wire-h:12px;
  position:relative;
  padding:var(--pad-top) 1.1rem 1.9rem;
}

.flow__wire{
  position:absolute; inset:auto 1.1rem auto 1.1rem;
  top:calc(var(--pad-top) + var(--id-h) + var(--node-gap) + (var(--dot-h) / 2) - (var(--wire-h) / 2));
  height:var(--wire-h); width:calc(100% - 2.2rem);
  color:var(--rox-soft); overflow:visible;
}
.flow__pulse{ color:var(--rox-soft); filter:drop-shadow(0 0 6px var(--rox-glow)); }

.flow__nodes{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem;
}
.node{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--node-gap,.55rem); }
.node__id{
  display:block; height:var(--id-h,14px); line-height:var(--id-h,14px);
  color:var(--ink-2); transition:color .3s ease;
}
.node__dot{
  width:var(--dot-h,15px); height:var(--dot-h,15px); border-radius:50%;
  background:var(--paper-2); border:2px solid var(--rox-soft);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.node__label{ font-size:.82rem; line-height:1.3; color:var(--ink-2); transition:color .3s ease; }

.node.is-on .node__id{ color:var(--rox-soft); }
.node.is-on .node__dot{
  background:var(--rox-soft); border-color:var(--rox-soft);
  box-shadow:0 0 12px var(--rox-glow), 0 0 0 5px rgba(56, 189, 248, 0.2);
  transform:scale(1.15);
}
.node.is-on .node__label{ color:var(--ink); font-weight:500; }

@media (max-width:640px){
  .flow__wire{ display:none; }
  .flow__nodes{ grid-template-columns:1fr; gap:0; }
  .node{
    flex-direction:row; align-items:center; text-align:left; gap:.85rem;
    padding:.7rem 0; border-bottom:var(--rule);
  }
  .node:last-child{ border-bottom:0; }
  .node__label br{ display:none; }
  .flow__track{ padding:.6rem 1.1rem 1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .flow__pulse{ display:none; }
  .node .node__dot{ background:var(--rox-soft); border-color:var(--rox-soft); }
  .node .node__id{ color:var(--rox-soft); }
  .btn:hover{ transform:none; }
}

/* ── seções ─────────────────────────────────────────────────────── */
.section{ padding:clamp(3.5rem, 8vw, 6.5rem) 0; border-top:var(--rule); }
.section--tint{ background:var(--tint); }
.section--dark{
  background:var(--ink-deep);
  border-top:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:88px 88px;
}
.section--dark p{ color:rgba(255,255,255,.72); }

/* ── cartões do gargalo ─────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); margin-top:2.6rem; }
.card{ padding:1.9rem 1.6rem; background:var(--paper-2); }
.card__title{ font-family:var(--disp); font-weight:600; font-size:1.12rem; letter-spacing:-.015em; color:#fff; margin-bottom:.7rem; }
.card p{ font-size:.95rem; margin:0; }

/* ── os 4 fluxos ────────────────────────────────────────────────── */
.fluxos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:0; border-top:var(--rule); }
.fluxo{ padding:2rem 1.6rem 2rem 0; border-bottom:var(--rule); }
.fluxo__n{ display:block; color:var(--rox); margin-bottom:.9rem; }
.fluxo__t{ font-family:var(--disp); font-weight:600; font-size:1.28rem; letter-spacing:-.02em; margin-bottom:.6rem; }
.fluxo p{ color:var(--ink-2); font-size:.97rem; margin:0; max-width:44ch; }

@media (min-width:900px){
  .fluxo{ padding-right:2.6rem; }
}

.rail{
  margin-top:2.8rem; padding:1.7rem 1.8rem;
  background:var(--paper-2); border:var(--rule); border-left:3px solid var(--rox);
  border-radius:2px;
}
.rail__t{ font-family:var(--disp); font-weight:600; font-size:1.15rem; margin-bottom:.5rem; }
.rail p{ color:var(--ink-2); margin:0; max-width:66ch; }
.rail__t strong{ color:var(--rox); }

/* ── etapas ─────────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:2.2rem; margin-top:2.8rem; }
.step{ padding-top:1.3rem; border-top:2px solid var(--rox); }
.step__n{ display:block; color:var(--rox); margin-bottom:.8rem; }
.step__t{ font-family:var(--disp); font-weight:600; font-size:1.28rem; letter-spacing:-.02em; margin-bottom:.6rem; }
.step p{ color:var(--ink-2); font-size:.97rem; margin:0; }

/* ── case ───────────────────────────────────────────────────────── */
.case{ margin:0; padding:2.4rem 0 0; border-top:2px solid var(--rox); }
.case__q{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(1.25rem, 2.5vw, 1.8rem);
  line-height:1.34; letter-spacing:-.02em; color:var(--ink);
  margin:0 0 1.4rem;
}
.case__f{ color:var(--ink-2); }

/* ── adequação ──────────────────────────────────────────────────── */
.fit{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:2.6rem; margin-top:2.6rem; }
.fit__t{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:1.1rem; padding-bottom:.6rem; border-bottom:var(--rule); }
.fit__t--yes{ color:var(--rox); }
.fit__t--no{ color:var(--ink-2); }
.list li{ position:relative; padding-left:1.4rem; margin-bottom:.85rem; color:var(--ink); font-size:.97rem; }
.list li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--rox); }
.list--muted li{ color:var(--ink-2); }
.list--muted li::before{ background:var(--ink-2); opacity:.5; }

/* ── rodapé ─────────────────────────────────────────────────────── */
.foot{ padding:1.6rem 0; background:var(--ink-deep); }
.foot__in{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; color:rgba(255,255,255,.6); }
.foot__dim{ color:rgba(255,255,255,.38); }

/* ── revelação em rolagem ───────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}