/* ==========================================================================
   Forni Web — sistema visual, terceira geração
   Direção: "a presença ganhando forma".
   Assinatura: o cursor azul. Ele é o ponteiro de quem visita, desenha o
   sublinhado do título, monta as janelas e inclina o campo de fundo.
   Tudo que se move anima só transform e opacity. Movimento reduzido desliga
   tudo o que não responde a uma ação da pessoa.
   ========================================================================== */

/* ---------- Tipografia local ---------- */
@font-face{font-family:'Sora';src:url('../fonts/sora-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;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:'Sora';src:url('../fonts/sora-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;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:'Manrope';src:url('../fonts/manrope-latin-ext.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  --navy-950:#010927;
  --navy-900:#071236;
  --navy-800:#0c1b45;
  --blue-deep:#0030B8;
  --blue-electric:#004CFF;
  --blue-hover:#2F6BFF;
  --blue-soft:#7FA5FF;
  --ice:#C9D8FF;
  --white:#FDFEFD;
  --mist:#EFF4FF;
  --mist-deep:#DCE6FB;
  --slate:#7C8AA5;
  --slate-ink:#54627E;          /* texto secundário sobre claro: 4.7:1 no mist */
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(1,9,39,.12);
  --line-strong:rgba(1,9,39,.28);

  --ink:var(--navy-950);
  --ink-soft:#3B4A69;

  --font-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,72px);
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --shadow-soft:0 1px 2px rgba(1,9,39,.06),0 14px 36px rgba(1,9,39,.09);
  --shadow-lift:0 2px 6px rgba(1,9,39,.08),0 28px 70px rgba(1,9,39,.16);
  --tshadow:0 1px 2px rgba(1,9,39,.6),0 3px 12px rgba(1,9,39,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--navy-950)}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:clamp(16px,.35vw + 15px,17.5px);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.025em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--blue-electric);color:var(--white)}

/* ---------- Campo de fundo (canvas) ----------
   Fica ENTRE o fundo das seções e o conteúdo: por isso o conteúdo de cada
   seção sobe para z-index 2 e a própria seção nunca cria contexto de
   empilhamento. O JS desenha traços que se inclinam para o ponteiro. */
.bgfield{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.wrap,.wrap-narrow,.ticker__track,.hero__in{position:relative;z-index:2}

/* ---------- Cursor personalizado ---------- */
.cur{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
html.has-cur .cur{opacity:1}
html.has-cur,html.has-cur a,html.has-cur button,html.has-cur label,html.has-cur summary{cursor:none}
html.has-cur input,html.has-cur textarea,html.has-cur select{cursor:auto}
.cur__dot{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--blue-electric);box-shadow:0 0 0 2px rgba(253,254,253,.9),0 0 18px rgba(0,76,255,.55)}
.cur__ring{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);mix-blend-mode:difference;display:grid;place-items:center;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),
    border-color .3s var(--ease),background-color .3s var(--ease)}
.cur__label{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.01em;color:#fff;
  opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .35s var(--ease-out);white-space:nowrap}
.cur[data-state="link"] .cur__ring{width:48px;height:48px;margin:-24px 0 0 -24px;background:rgba(255,255,255,.18)}
.cur[data-state="btn"] .cur__ring{width:14px;height:14px;margin:-7px 0 0 -7px;border-width:0;background:rgba(255,255,255,.95)}
.cur[data-state="btn"] .cur__dot{opacity:0}
.cur[data-state="view"] .cur__ring{width:92px;height:92px;margin:-46px 0 0 -46px;border-width:0;background:var(--blue-electric);
  mix-blend-mode:normal;box-shadow:0 10px 30px rgba(0,76,255,.35)}
.cur[data-state="view"] .cur__label{opacity:1;transform:none}
.cur[data-state="view"] .cur__dot{opacity:0}
.cur[data-state="text"] .cur__ring,.cur[data-state="text"] .cur__dot{opacity:0}
.cur[data-state="hidden"]{opacity:0}
.cur.is-down .cur__ring{transform:scale(.82)}

/* ---------- Utilidades ---------- */
.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gutter)*2,880px);margin-inline:auto}
.section{padding-block:clamp(72px,8vw,128px);position:relative}
.section--tight{padding-block:clamp(52px,5.6vw,84px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:200;background:var(--blue-electric);color:var(--white);
  padding:12px 18px;border-radius:0 0 12px 12px;font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--blue-electric);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--blue-soft)}

/* fundos de seção */
.bg-navy{background:var(--navy-950);color:var(--white)}
.bg-navy-900{background:var(--navy-900);color:var(--white)}
.bg-mist{background:var(--mist)}
.bg-white{background:var(--white)}
.dark{color:var(--white)}
.dark p,.dark li{color:rgba(253,254,253,.8)}

/* rótulo de capítulo: caixa normal, com o glifo do cursor */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:700;
  letter-spacing:-.005em;color:var(--blue-electric);margin:0 0 18px}
.dark .eyebrow{color:var(--blue-soft)}
.eyebrow::before{content:"";width:12px;height:15px;flex:none;background:currentColor;
  -webkit-mask:var(--cursor-mask) center/contain no-repeat;mask:var(--cursor-mask) center/contain no-repeat}
:root{--cursor-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M0 0l13 8.2-5.6.8L11 16l-2.6 1.1-3.4-6.6L0 14z'/%3E%3C/svg%3E")}

.h-display{font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.04em;max-width:16ch;font-weight:700}
.h-section{font-size:clamp(1.85rem,3.6vw,3.1rem);letter-spacing:-.035em;max-width:19ch;font-weight:700}
.h-sub{font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.02em}
.lede{font-size:clamp(1.04rem,.5vw + .94rem,1.24rem);color:var(--ink-soft);max-width:60ch;line-height:1.55}
.dark .lede{color:rgba(253,254,253,.78)}
.muted{color:var(--slate-ink)}
.dark .muted{color:rgba(253,254,253,.62)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.98rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),
    transform .5s var(--ease-out),box-shadow .35s var(--ease)}
.arw{width:18px;height:18px;flex:none;transition:transform .4s var(--ease-out)}
.btn:hover .arw,.link-u:hover .arw,.link-u:focus-visible .arw{transform:translateX(5px)}
.btn--primary{background:var(--blue-electric);color:var(--white);box-shadow:0 10px 26px rgba(0,76,255,.28)}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue-hover);
  transform:translateY(101%);transition:transform .5s var(--ease-out);border-radius:inherit}
.btn--primary:hover::before,.btn--primary:focus-visible::before{transform:none}
.btn--primary:hover{box-shadow:0 16px 38px rgba(0,76,255,.36)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--blue-electric);color:var(--blue-electric)}
.dark .btn--ghost{border-color:rgba(253,254,253,.34);color:var(--white)}
.dark .btn--ghost:hover{border-color:var(--white);background:rgba(253,254,253,.08);color:var(--white)}
.btn--wa{background:#25D366;color:#052E16;box-shadow:0 10px 26px rgba(37,211,102,.26)}
.btn--wa:hover{background:#20BC5B}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;align-items:center}
@media (pointer:coarse){.btn{min-height:48px}}

.link-u{position:relative;text-decoration:none;font-weight:700;color:var(--blue-electric);
  display:inline-flex;align-items:center;gap:8px;padding-bottom:2px}
.link-u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;
  transform:scaleX(.28);transform-origin:left;transition:transform .45s var(--ease-out)}
.link-u:hover::after,.link-u:focus-visible::after{transform:scaleX(1)}
.dark .link-u{color:var(--blue-soft)}

/* ---------- Janela: elemento de apoio ---------- */
.win{border-radius:var(--r-lg);border:1px solid var(--line-light);background:var(--white);
  overflow:hidden;box-shadow:var(--shadow-soft)}
.dark .win,.win--dark{border-color:var(--line-dark);background:var(--navy-900);box-shadow:0 24px 60px rgba(1,9,39,.45)}
.win__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line-light);
  background:var(--mist)}
.dark .win__bar,.win--dark .win__bar{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.win__dot{width:9px;height:9px;border-radius:50%;background:var(--blue-electric);opacity:.9;flex:none}
.win__dot:nth-child(2){opacity:.55}.win__dot:nth-child(3){opacity:.32}
.win__url{margin-left:10px;height:9px;flex:1;max-width:220px;border-radius:99px;background:var(--line-light)}
.dark .win__url,.win--dark .win__url{background:rgba(255,255,255,.12)}
.win__body{padding:clamp(18px,2.4vw,28px)}

/* ---------- Cabeçalho: vira uma cápsula flutuante ao rolar ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding-block:14px;pointer-events:none}
.hdr__in{display:flex;align-items:center;gap:24px;pointer-events:auto;padding:8px 8px 8px 12px;border-radius:999px;
  border:1px solid transparent;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),
    padding .45s var(--ease),transform .45s var(--ease)}
.hdr.is-stuck .hdr__in{background:rgba(1,9,39,.72);backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(1,9,39,.35)}
.hdr--light.is-stuck .hdr__in{background:rgba(253,254,253,.82);border-color:var(--line-light);
  box-shadow:0 10px 34px rgba(1,9,39,.1)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand picture{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy-900);
  border:1px solid rgba(255,255,255,.12);flex:none;overflow:hidden}
.hdr--light .brand picture{background:var(--navy-950);border-color:transparent}
.brand img{width:40px;height:40px}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;
  color:var(--white);white-space:nowrap}
.hdr--light .brand__name{color:var(--navy-950)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;font-size:.95rem;font-weight:600;color:rgba(253,254,253,.82);position:relative;
  padding:9px 14px;border-radius:999px;transition:color .3s var(--ease),background-color .3s var(--ease)}
.hdr--light .nav a{color:var(--ink-soft)}
.nav a:hover,.nav a:focus-visible{color:var(--white);background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;border-radius:50%;
  background:var(--blue-soft);transform:translateX(-50%)}
.hdr--light .nav a[aria-current="page"]{color:var(--navy-950)}
.hdr .btn--primary{padding:12px 20px;font-size:.92rem}
.burger{display:none;margin-left:auto;width:48px;height:48px;align-items:center;justify-content:center;
  background:rgba(1,9,39,.4);border:1px solid var(--line-dark);border-radius:50%;cursor:pointer}
.hdr--light .burger{border-color:var(--line-light);background:rgba(253,254,253,.5)}
.burger span{display:block;width:20px;height:2px;background:currentColor;position:relative;color:var(--white)}
.hdr--light .burger span{color:var(--navy-950)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
  transition:transform .35s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:900px){
  .nav,.hdr .btn--primary{display:none}
  .burger{display:inline-flex}
  .hdr__in{padding:6px 6px 6px 10px}
}
/* menu mobile */
.mnav{position:fixed;inset:0;z-index:120;background:var(--navy-950);display:flex;flex-direction:column;
  padding:22px var(--gutter) 40px;opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.mnav.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
.mnav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.mnav__close{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;
  color:var(--white);font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mnav a.mnav__link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;
  border-bottom:1px solid var(--line-dark);color:var(--white);text-decoration:none;
  font-family:var(--font-display);font-size:clamp(1.6rem,7vw,2.2rem);font-weight:700;letter-spacing:-.03em;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.mnav.is-open a.mnav__link{opacity:1;transform:none}
.mnav.is-open a.mnav__link:nth-child(1){transition-delay:.08s}.mnav.is-open a.mnav__link:nth-child(2){transition-delay:.14s}
.mnav.is-open a.mnav__link:nth-child(3){transition-delay:.2s}.mnav.is-open a.mnav__link:nth-child(4){transition-delay:.26s}
.mnav.is-open a.mnav__link:nth-child(5){transition-delay:.32s}
.mnav a.mnav__link span{font-size:.8rem;font-weight:600;color:var(--slate)}
.mnav .btn{margin-top:28px;width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy-950);color:var(--white);overflow:hidden;
  padding-top:clamp(128px,16vh,196px);padding-bottom:clamp(64px,8vw,120px)}
.hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 76% 30%,rgba(0,76,255,.34),transparent 66%),
             radial-gradient(40% 36% at 6% 96%,rgba(0,76,255,.18),transparent 70%)}
.hero__grid{display:none}
.hero__in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:980px){.hero__in{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.35rem,4.7vw,4.3rem);letter-spacing:-.045em;font-weight:700;text-shadow:var(--tshadow);
  max-width:15ch;line-height:1.02}
.hero .lede{margin-top:26px;color:rgba(253,254,253,.8);max-width:46ch}
.hero__proof{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.88rem;font-weight:600;
  color:var(--slate)}
.hero__proof li{display:flex;align-items:center;gap:9px}
.hero__proof li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-electric);flex:none}

/* sublinhado desenhado pelo cursor */
.hero h1 .u{position:relative;display:inline-block;white-space:nowrap}
.hero h1 .u svg{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.28em;overflow:visible}
.hero h1 .u svg.uline path{fill:none;stroke:var(--blue-electric);stroke-width:.09em;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--ease-out) 1.15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero h1 .u i{position:absolute;right:-.5em;bottom:-.34em;width:.3em;height:.38em;color:var(--blue-soft);
  filter:drop-shadow(0 3px 10px rgba(0,76,255,.6));opacity:0;
  animation:cursorArrive 1.1s var(--ease-out) 1.15s forwards}
.hero h1 .u i svg{position:static;width:100%;height:100%;fill:currentColor}
@keyframes cursorArrive{0%{opacity:0;transform:translate(-120%,-140%)}30%{opacity:1}100%{opacity:1;transform:none}}

/* palco do hero: vídeo/poster + composição CSS de reserva, com inclinação que segue o ponteiro */
.hero__stage-wrap{position:relative;perspective:1400px}
.stage{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:var(--navy-900);box-shadow:0 40px 100px rgba(0,0,0,.5);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  transition:transform .9s var(--ease-out)}
.stage.is-tilting{transition:transform .18s linear}
.stage__poster{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity .7s var(--ease)}
.stage.has-poster .stage__poster{opacity:1}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:translateZ(0);transition:opacity .8s var(--ease)}
.stage.video-ready video{opacity:1}
.stage__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%);
  transform:translateX(var(--sx,-30%));transition:transform .6s var(--ease-out)}
/* o botão só existe quando o vídeo realmente está tocando; sem isto o "display:grid"
   abaixo vence o "display:none" nativo do atributo hidden, e o botão aparecia cedo
   demais, antes de haver qualquer vídeo para pausar */
.stage__toggle[hidden]{display:none}
.stage__toggle{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(1,9,39,.55);backdrop-filter:blur(8px);
  display:grid;place-items:center;cursor:pointer;opacity:.55;
  transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .3s var(--ease)}
.stage__toggle:hover,.stage__toggle:focus-visible{opacity:1;transform:translateY(-1px);background:rgba(1,9,39,.8)}
.stage__icon{width:12px;height:13px;background:var(--white);
  -webkit-mask:var(--pause-mask) center/contain no-repeat;mask:var(--pause-mask) center/contain no-repeat}
.stage__toggle[data-state="paused"] .stage__icon{-webkit-mask:var(--play-mask) center/contain no-repeat;
  mask:var(--play-mask) center/contain no-repeat}
:root{--pause-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M0 0h4v13H0zM8 0h4v13H8z'/%3E%3C/svg%3E");
  --play-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M1 0l11 6.5L1 13z'/%3E%3C/svg%3E")}
@media (pointer:coarse){.stage__toggle{width:44px;height:44px;opacity:.9}}
@media (max-width:720px){.stage{aspect-ratio:4/5}}
.stage__scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(1,9,39,0) 38%,rgba(1,9,39,.6) 100%)}

/* composição CSS: a janela sendo montada (roda enquanto não há vídeo) */
.build{position:absolute;inset:0;display:grid;place-items:center;padding:6% 6% 8%}
/* O mock de blocos é só para o instante antes de existir QUALQUER imagem real.
   Assim que o poster chega (bem mais rápido que o vídeo), ele já cede o lugar —
   antes disso o mock ficava por cima do próprio poster sempre que o autoplay do
   vídeo demorava ou era bloqueado pelo navegador, e às vezes sobrava visível por
   mais tempo do que deveria, com o bloco azul de destaque do mock por cima. */
.stage.has-poster .build,.stage.video-ready .build{opacity:0;transition:opacity .6s var(--ease)}
.build__win{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(7,18,54,.9);
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.build__bar{display:flex;gap:6px;align-items:center;padding:10px 12px;background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.1)}
.build__bar i{width:8px;height:8px;border-radius:50%;background:var(--blue-electric);display:block}
.build__bar i:nth-child(2){opacity:.6}.build__bar i:nth-child(3){opacity:.35}
.build__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;padding:16px}
.build__grid b{display:block;height:14px;border-radius:5px;background:rgba(255,255,255,.16);
  animation:blockIn 9s var(--ease) infinite}
.build__grid b.tall{height:74px;grid-column:span 3}
.build__grid b.wide{grid-column:span 4}
.build__grid b.full{grid-column:span 6}
.build__grid b.half{grid-column:span 3}
.build__grid b.third{grid-column:span 2;height:42px}
.build__grid b.accent{background:rgba(0,76,255,.55)}
@keyframes blockIn{0%,6%{opacity:.25;transform:translateY(8px) scaleX(.94);transform-origin:left}
  18%,92%{opacity:1;transform:none}100%{opacity:.25;transform:translateY(8px) scaleX(.94);transform-origin:left}}
.build__grid b:nth-child(1){animation-delay:-8.6s}.build__grid b:nth-child(2){animation-delay:-8.2s}
.build__grid b:nth-child(3){animation-delay:-7.8s}.build__grid b:nth-child(4){animation-delay:-7.4s}
.build__grid b:nth-child(5){animation-delay:-7s}.build__grid b:nth-child(6){animation-delay:-6.6s}
.build__grid b:nth-child(7){animation-delay:-6.2s}.build__grid b:nth-child(8){animation-delay:-5.8s}
.build__cursor{position:absolute;width:22px;height:27px;color:var(--blue-electric);
  filter:drop-shadow(0 3px 10px rgba(0,76,255,.6));animation:cursorPath 9s var(--ease) -2s infinite}
.build__cursor svg{width:100%;height:100%;fill:currentColor}
@keyframes cursorPath{
  0%{transform:translate(6vw,16vh) scale(.9);opacity:0}
  8%{opacity:1}
  26%{transform:translate(11vw,7vh) scale(1)}
  48%{transform:translate(4vw,12vh) scale(.96)}
  70%{transform:translate(13vw,14vh) scale(1)}
  92%{transform:translate(9vw,9vh) scale(.94);opacity:1}
  100%{transform:translate(6vw,16vh) scale(.9);opacity:0}}
/* contador de presença (número simulado, ver config.js > presence) */
/* mesmo motivo do .proj logo acima: sem isto, presence.enabled:false em config.js
   não escondia nada de verdade. */
.presence[hidden]{display:none}
.presence{margin-top:26px;display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(7,18,54,.6);font-size:.88rem;color:rgba(253,254,253,.82);
  opacity:0;animation:fadeUp .8s var(--ease-out) .5s forwards}
.presence{flex-wrap:wrap}
@media (max-width:480px){.presence span{flex-basis:100%;padding-left:19px;border-left:0;margin-top:-4px}}
.presence i{width:9px;height:9px;border-radius:50%;background:#2BD673;box-shadow:0 0 0 0 rgba(43,214,115,.6);
  animation:presencePing 2.2s var(--ease) infinite}
.presence b{font-weight:800;color:var(--white);font-variant-numeric:tabular-nums}
.presence span{color:var(--slate);font-size:.8rem;padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
@keyframes presencePing{0%{box-shadow:0 0 0 0 rgba(43,214,115,.55)}70%{box-shadow:0 0 0 8px rgba(43,214,115,0)}100%{box-shadow:0 0 0 0 rgba(43,214,115,0)}}
.presence.is-tick b{animation:presenceTick .45s var(--ease-out)}
@keyframes presenceTick{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Prova, não promessa: fatos deste site ---------- */
.proof{background:var(--white);border-bottom:1px solid var(--line-light)}
.proof__in{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));align-items:stretch}
.proof__lead{padding:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,32px) clamp(22px,2.6vw,34px) 0;border-right:1px solid var(--line-light)}
.proof__lead h2{font-size:1.06rem;letter-spacing:-.02em;line-height:1.3}
.proof__lead p{margin-top:8px;font-size:.9rem;color:var(--slate-ink)}
.proof__item{padding:clamp(22px,2.6vw,34px) clamp(16px,2.2vw,28px);border-right:1px solid var(--line-light)}
.proof__item:last-child{border-right:0;padding-right:0}
.proof__item b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.2vw,2rem);
  letter-spacing:-.04em;line-height:1;color:var(--ink)}
.proof__item b small{font-size:.5em;font-weight:600;letter-spacing:0;color:var(--slate-ink);margin-left:.15em}
.proof__item span{display:block;margin-top:8px;font-size:.9rem;color:var(--slate-ink);line-height:1.4}
@media (max-width:1040px){.proof__in{grid-template-columns:repeat(2,1fr)}
  .proof__lead{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line-light);padding-right:0}
  .proof__item:nth-child(odd){border-right:0}.proof__item:nth-child(2n+1){padding-left:0}
  .proof__item:nth-child(2),.proof__item:nth-child(3){border-bottom:1px solid var(--line-light)}
  .proof__item:nth-child(3){border-right:0}.proof__item:nth-child(2){border-right:1px solid var(--line-light)}
  .proof__item:nth-child(4){border-right:1px solid var(--line-light);padding-left:0}
  .proof__item:nth-child(5){padding-left:clamp(16px,2.2vw,28px)}}
@media (max-width:520px){.proof__in{grid-template-columns:1fr}
  .proof__item{border-right:0!important;padding-inline:0!important;border-bottom:1px solid var(--line-light)}
  .proof__item:last-child{border-bottom:0}}

/* ---------- Faixa de posicionamento ---------- */
.ticker{background:var(--navy-950);color:var(--white);border-block:1px solid var(--line-dark);overflow:hidden;
  padding-block:22px;position:relative;
  -webkit-mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;animation:tickerRun 40s linear infinite}
.ticker__track span{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.4vw,2rem);
  letter-spacing:-.03em;padding-inline:22px;display:inline-flex;align-items:center;gap:22px;white-space:nowrap;
  color:var(--white)}
.ticker__track span:nth-child(even){color:var(--navy-950);-webkit-text-stroke:2.2px rgba(253,254,253,.9);paint-order:stroke fill}
.ticker__track span::after{content:"";width:9px;height:11px;background:var(--blue-electric);
  -webkit-mask:var(--cursor-mask) center/contain no-repeat;mask:var(--cursor-mask) center/contain no-repeat}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Grades editoriais ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.split--center{align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split--even{grid-template-columns:1fr 1fr}
@media (max-width:900px){.split--even{grid-template-columns:1fr}}
.sticky{position:sticky;top:110px}
@media (max-width:900px){.sticky{position:static}}

/* problema: fragmentado -> organizado, guiado pela rolagem */
.frag{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.frag{grid-template-columns:1fr}}
.frag__side{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:22px;background:rgba(255,255,255,.5);
  position:relative;min-height:220px}
.frag__side h3{font-size:.9rem;font-weight:700;color:var(--slate-ink);margin-bottom:16px}
.frag__chip{display:inline-block;padding:9px 14px;border-radius:10px;background:var(--white);
  border:1px solid var(--line-light);font-size:.86rem;margin:0 8px 8px 0;color:var(--ink-soft);
  transform:translate(calc(var(--dx,0px) * (1 - var(--fp,0))),calc(var(--dy,0px) * (1 - var(--fp,0))))
    rotate(calc(var(--r,0deg) * (1 - var(--fp,0))));
  transition:transform .2s linear}
.frag__side--after{border-style:solid;border-color:var(--blue-electric);background:var(--white);
  box-shadow:var(--shadow-soft)}
.frag__rows{display:grid;gap:10px}
.frag__row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:var(--mist);
  font-size:.9rem;color:var(--ink);opacity:calc(.25 + .75 * var(--fp,0));
  transform:translateX(calc(12px * (1 - var(--fp,0))));transition:opacity .2s linear,transform .2s linear}
.frag__row b{font-weight:600}
.frag__row::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-electric);flex:none}

/* ---------- Benefícios: a prancheta ---------- */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;padding:14px;border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);position:relative}
.board::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);
  mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.ben{grid-column:span 4;border-radius:var(--r-md);padding:26px;border:1px solid var(--line-dark);
  background:rgba(1,9,39,.6);position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out),border-color .4s var(--ease),background-color .4s var(--ease)}
.ben:hover{transform:translateY(-3px);border-color:rgba(127,165,255,.45);background:rgba(7,18,54,.85)}
.ben--lead{grid-column:span 6;background:linear-gradient(150deg,rgba(0,76,255,.28),rgba(0,76,255,.05)),rgba(1,9,39,.6);
  border-color:rgba(0,76,255,.45)}
.ben--wide{grid-column:span 6}
.ben--full{grid-column:span 12;display:grid;grid-template-columns:auto 1fr;gap:8px 34px;align-items:center}
.ben--full h3{grid-column:2}
.ben--full p{grid-column:2;max-width:64ch}
.ben--full .glyph{grid-row:1/3}
.ben h3{font-size:1.16rem;margin:18px 0 10px;letter-spacing:-.02em}
.ben--full h3{margin-top:0}
.ben p{font-size:.96rem;line-height:1.58}
.glyph{width:64px;height:48px;display:block;color:var(--blue-soft)}
.glyph .fr{fill:none;stroke:rgba(253,254,253,.35);stroke-width:1.2}
.glyph .bk{fill:rgba(253,254,253,.16)}
.glyph .hi{fill:var(--blue-electric)}
.glyph .ln{fill:none;stroke:var(--blue-electric);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.glyph .ds{fill:none;stroke:rgba(253,254,253,.4);stroke-width:1.2;stroke-dasharray:3 3}
.light .glyph .ds{stroke:rgba(1,9,39,.35)}
.light .glyph .fr{stroke:rgba(1,9,39,.32)}
.light .glyph .bk{fill:rgba(1,9,39,.1)}
@media (pointer:fine){
  .ben::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
    background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(0,76,255,.26),transparent 70%)}
  .ben:hover::before{opacity:1}
}
@media (max-width:900px){.ben,.ben--lead,.ben--wide,.ben--full{grid-column:span 12}}
@media (max-width:600px){.ben--full{grid-template-columns:1fr}.ben--full h3,.ben--full p{grid-column:1}.ben--full .glyph{grid-row:auto}
  .ben--full h3{margin-top:18px}}

/* ---------- Serviços: linhas, não cartões ---------- */
.svcs{display:grid;border-top:1px solid var(--line-light)}
.svc{border-bottom:1px solid var(--line-light);position:relative;background:transparent;
  transition:background-color .4s var(--ease)}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue-electric);
  transform:scaleY(0);transform-origin:center;transition:transform .45s var(--ease-out)}
.svc:hover::before,.svc:focus-within::before{transform:scaleY(1)}
.svc:hover{background:rgba(0,76,255,.03)}
.svc__head{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2.4vw,34px);
  padding:clamp(20px,2.4vw,30px) clamp(14px,2vw,26px);background:transparent;border:0;cursor:pointer;text-align:left}
.svc__mini{width:74px;height:52px;flex:none;display:block;color:var(--ink);
  transition:transform .6s var(--ease-out)}
.svc:hover .svc__mini,.svc__head[aria-expanded="true"] .svc__mini{transform:translateY(-2px) scale(1.04)}
.svc__mini .fr{fill:none;stroke:rgba(1,9,39,.3);stroke-width:1.2}
.svc__mini .bk{fill:rgba(1,9,39,.12);transition:fill .4s var(--ease)}
.svc__mini .hi{fill:var(--blue-electric)}
.svc__mini .ln{fill:none;stroke:var(--blue-electric);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc__mini .ds{fill:none;stroke:rgba(1,9,39,.35);stroke-width:1.2;stroke-dasharray:3 3}
.svc__head[aria-expanded="true"] .svc__mini .bk{fill:rgba(0,76,255,.28)}
.svc__t{font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.03em;display:block}
.svc__for{display:block;margin-top:6px;font-size:.92rem;color:var(--slate-ink);font-weight:500}
.svc__i{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;
  transition:transform .45s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease);flex:none}
.svc__i::before,.svc__i::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.svc__i::before{width:14px;height:2px}
.svc__i::after{width:2px;height:14px;transition:transform .45s var(--ease)}
.svc__head[aria-expanded="true"] .svc__i{background:var(--blue-electric);border-color:var(--blue-electric);color:var(--white);
  transform:rotate(180deg)}
.svc__head[aria-expanded="true"] .svc__i::after{transform:scaleY(0)}
.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.svc__panel.is-open{grid-template-rows:1fr}
.svc__panel>div{overflow:hidden}
.svc__inner{padding:0 clamp(14px,2vw,26px) clamp(24px,2.6vw,34px) calc(clamp(14px,2vw,26px) + 74px + clamp(16px,2.4vw,34px));
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
@media (max-width:760px){.svc__inner{grid-template-columns:1fr;padding-left:clamp(14px,2vw,26px)}}
.svc__list li{position:relative;padding-left:20px;font-size:.95rem;margin-bottom:8px;color:var(--ink-soft)}
.svc__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--blue-electric)}
.dark .svc__list li{color:rgba(253,254,253,.78)}
.tag{display:inline-block;font-size:.82rem;font-weight:600;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line-light);color:var(--slate-ink);margin:0 6px 6px 0}
.dark .tag{border-color:var(--line-dark);color:rgba(253,254,253,.7)}
.tag--blue{border-color:rgba(0,76,255,.45);color:var(--blue-electric)}
@media (max-width:640px){.svc__head{grid-template-columns:1fr auto}.svc__mini{display:none}}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--navy-950);color:var(--white);position:relative;overflow:hidden;
  padding-block:clamp(100px,14vw,200px)}
.manifesto::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,76,255,.2),transparent 70%)}
.manifesto blockquote{position:relative;margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.045em;max-width:18ch}
.manifesto blockquote em{font-style:normal}
.manifesto blockquote .w{display:inline-block;opacity:.16;transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.manifesto blockquote .w.on{opacity:1;transform:none}
.manifesto__sig{margin-top:34px;display:flex;align-items:center;gap:14px;color:var(--slate);font-weight:600;font-size:.92rem}
.manifesto__sig::before{content:"";width:44px;height:2px;background:var(--blue-electric)}

/* ---------- Portfólio ---------- */
.projs{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
/* o atributo hidden (usado pelos filtros) tem a mesma especificidade de .proj por
   causa do display:flex abaixo, e perdia a disputa: o cartão "escondido" continuava
   ocupando o lugar dele na grade, só que em branco. */
.proj[hidden]{display:none}
.proj{grid-column:span 6;position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-light);
  background:var(--white);display:flex;flex-direction:column;will-change:transform;
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s var(--ease)}
.proj:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(0,76,255,.4)}
.proj>a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
@media (max-width:820px){.proj{grid-column:span 12}}
.proj__cover{position:relative;aspect-ratio:16/10;background:var(--navy-900);overflow:hidden}
.proj__shot{display:block;width:100%;height:100%}
.proj__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease-out)}
.proj:hover .proj__shot img{transform:scale(1.035)}
.proj__body{padding:26px clamp(18px,2.4vw,28px) 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.proj__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.86rem;font-weight:600;color:var(--slate-ink)}
.proj h3{font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.03em;font-weight:700}
.status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font-size:.8rem;font-weight:700;border:1px solid var(--line-strong);color:var(--ink-soft)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status--live{color:#0a7a3d;border-color:rgba(10,122,61,.4)}
.status--dev{color:#8a5a00;border-color:rgba(138,90,0,.4)}
.status--concept{color:var(--blue-electric);border-color:rgba(0,76,255,.4)}
.dark .status{border-color:var(--line-dark);color:rgba(253,254,253,.75)}

/* capas desenhadas em código */
.mock{position:absolute;inset:0;display:grid;place-items:center;padding:9% 8%;
  background:radial-gradient(75% 65% at 50% 34%,#0c1f4d 0%,#050e2a 62%,#02071b 100%);overflow:hidden}
.mock::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask:radial-gradient(70% 70% at 50% 45%,#000 20%,transparent 85%);
  mask:radial-gradient(70% 70% at 50% 45%,#000 20%,transparent 85%)}
.mock__win{position:relative;width:100%;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:rgba(8,20,58,.92);
  box-shadow:0 22px 54px rgba(0,0,0,.5);transition:transform .8s var(--ease-out)}
.proj:hover .mock__win{transform:translateY(-6px) scale(1.015)}
.mock__bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.1)}
.mock__bar i{width:6px;height:6px;border-radius:50%;background:var(--blue-electric);display:block}
.mock__bar i:nth-child(2){opacity:.55}.mock__bar i:nth-child(3){opacity:.32}
.mock__bar span{margin-left:8px;height:6px;flex:1;max-width:120px;border-radius:99px;background:rgba(255,255,255,.14)}
.mock__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:12px}
.mock__grid b{display:block;height:10px;border-radius:3px;background:rgba(255,255,255,.14)}
.mock__grid b.w6{grid-column:span 6}.mock__grid b.w4{grid-column:span 4}.mock__grid b.w3{grid-column:span 3}
.mock__grid b.w2{grid-column:span 2;height:30px}.mock__grid b.hi{background:rgba(0,76,255,.62)}
.mock__grid b.tall{height:38px}
.mock__tag{position:absolute;left:12px;bottom:12px;font-size:.78rem;font-weight:600;color:rgba(253,254,253,.7);
  background:rgba(1,9,39,.72);border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:5px 9px}
.mock__cursor{position:absolute;right:16%;bottom:22%;width:17px;height:21px;color:var(--blue-electric);
  filter:drop-shadow(0 3px 9px rgba(0,76,255,.65));transition:transform .7s var(--ease-out)}
.mock__cursor svg{width:100%;height:100%;fill:currentColor}
.proj:hover .mock__cursor{transform:translate(-8px,-10px)}

/* ---------- Processo: régua que acompanha a leitura ---------- */
.steps{display:grid;position:relative}
.steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line-light);opacity:.5}
.dark .steps::before{background:var(--line-dark)}
.steps__progress{position:absolute;left:0;top:0;width:2px;background:var(--blue-electric);
  height:var(--sp,0%);border-radius:2px;transition:height .25s linear;box-shadow:0 0 12px rgba(0,76,255,.6)}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,52px);padding-block:clamp(28px,3.6vw,44px);
  padding-left:clamp(18px,3vw,34px);border-top:1px solid var(--line-light);position:relative}
.dark .step{border-color:var(--line-dark)}
.step:last-child{border-bottom:1px solid var(--line-light)}
.dark .step:last-child{border-color:var(--line-dark)}
.step__n{position:relative;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:700;
  letter-spacing:-.04em;color:var(--blue-electric);line-height:1;padding-top:2px;min-width:2ch}
.dark .step__n{color:var(--blue-soft)}
.step.in .step__n::before{content:"";position:absolute;left:calc(-1 * clamp(18px,3vw,34px) - 3.5px);top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--blue-electric);box-shadow:0 0 0 4px rgba(0,76,255,.16);animation:dotIn .6s var(--ease-out) both}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(1)}}
.step__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:start}
@media (max-width:820px){.step__body{grid-template-columns:1fr}}
.step h3,.step h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:10px;letter-spacing:-.03em;font-weight:700}
.step__stage{width:100%;max-width:220px;height:auto;margin-top:16px;display:block;color:var(--ink)}
.dark .step__stage{color:var(--white)}
.step__stage .fr{fill:none;stroke:rgba(253,254,253,.32);stroke-width:1.2}
.step__stage .bk{fill:rgba(253,254,253,.14)}
.step__stage .hi{fill:var(--blue-electric)}
.step__stage .ln{fill:none;stroke:var(--blue-electric);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step__stage .ds{fill:none;stroke:rgba(253,254,253,.4);stroke-width:1.2;stroke-dasharray:3 3}
.step__stage .ph{fill:var(--navy-900)}
.light .step__stage .ph{fill:var(--white)}
.light .step__stage .fr{stroke:rgba(1,9,39,.3)}
.light .step__stage .bk{fill:rgba(1,9,39,.1)}
.light .step__stage .ds{stroke:rgba(1,9,39,.35)}
.step__bar{display:none}
@media (max-width:640px){.steps::before,.steps__progress,.step.in .step__n::before{display:none}.step{padding-left:0}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-light)}
.faq__item{border-bottom:1px solid var(--line-light)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;
  background:transparent;border:0;text-align:left;cursor:pointer;font-family:var(--font-display);
  font-size:clamp(1.05rem,1.6vw,1.22rem);font-weight:600;letter-spacing:-.02em;color:var(--ink);
  transition:color .3s var(--ease)}
.faq__q:hover{color:var(--blue-electric)}
.faq__q .svc__i{width:36px;height:36px}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__a.is-open{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:26px;max-width:72ch;color:var(--ink-soft);font-size:.99rem}
/* sem JavaScript, as respostas ficam visíveis */
html:not(.js) .faq__a,html:not(.js) .svc__panel{grid-template-rows:1fr}

/* ---------- CTA final ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy-950);color:var(--white);
  padding-block:clamp(80px,11vw,150px)}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(55% 65% at 78% 22%,rgba(0,76,255,.3),transparent 68%)}
.cta__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.cta__in{grid-template-columns:1fr;align-items:start}}
.cta .h-section{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:15ch}
.next{margin-top:34px;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.next li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--line-dark);font-size:.98rem}
.next li b{font-family:var(--font-display);font-weight:700;color:var(--blue-soft);font-size:1.1rem;letter-spacing:-.03em}
.cta .btn-row{margin-top:0}

/* ---------- Rodapé ---------- */
.ftr{background:var(--navy-950);color:var(--white);border-top:1px solid var(--line-dark);
  padding-block:clamp(56px,7vw,88px) 28px;position:relative;overflow:hidden}
.ftr__mark{position:absolute;right:-2%;bottom:-16%;font-family:var(--font-display);font-weight:700;
  font-size:clamp(90px,17vw,240px);line-height:1;letter-spacing:-.05em;color:rgba(253,254,253,.03);
  pointer-events:none;user-select:none;white-space:nowrap}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,48px)}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr__grid{grid-template-columns:1fr}}
.ftr h2{font-size:.92rem;font-weight:700;color:var(--slate);margin-bottom:16px}
.ftr a{color:rgba(253,254,253,.78);text-decoration:none;font-size:.95rem;display:inline-block;padding-block:5px;
  transition:color .3s var(--ease)}
.ftr a:hover{color:var(--white)}
.ftr__bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;
  flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  font-size:.86rem;color:rgba(253,254,253,.6)}
.ftr__brand img{width:160px;height:auto}

/* ---------- WhatsApp flutuante ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(1,9,39,.3);
  transition:transform .5s var(--ease-out),box-shadow .35s var(--ease)}
.wa:hover{box-shadow:0 16px 40px rgba(1,9,39,.36)}
.wa svg{width:29px;height:29px;fill:#052E16}
@media (max-width:520px){.wa{width:54px;height:54px;right:14px;bottom:14px}}

/* ---------- Formulário e prévia da mensagem ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.9rem;font-weight:700;color:var(--ink)}
.field .req{color:var(--blue-electric)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--white);color:var(--ink);font:inherit;font-size:.97rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-electric);
  box-shadow:0 0 0 4px rgba(0,76,255,.14);outline:none}
.field .hint{font-size:.82rem;color:var(--slate-ink)}
.field .err{font-size:.84rem;color:#B3261E;font-weight:600;display:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B3261E;background:#FFF6F5}
.field.has-error .err{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft)}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--blue-electric)}
.form__note{font-size:.86rem;color:var(--slate-ink);display:flex;gap:9px;align-items:flex-start}
.form__note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-electric);margin-top:.5em;flex:none}
/* prévia: a mensagem exatamente como vai abrir no WhatsApp */
.preview{margin-top:26px;border-radius:var(--r-lg);border:1px solid var(--line-light);background:var(--mist);padding:18px;
  position:relative}
.preview h3{font-size:.9rem;font-weight:700;color:var(--slate-ink);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.preview h3::before{content:"";width:8px;height:8px;border-radius:50%;background:#25D366}
.preview pre{margin:0;font:inherit;font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  background:#E7FFDB;color:#0B2E13;border-radius:14px 14px 14px 4px;padding:14px 16px;min-height:74px;
  box-shadow:0 1px 1px rgba(1,9,39,.08)}
.preview pre:empty::before{content:"Conforme você preenche, a mensagem aparece aqui.";color:#4E6B57}

/* ---------- Orientador ---------- */
.quiz{border:1px solid var(--line-light);border-radius:var(--r-lg);background:var(--white);
  box-shadow:var(--shadow-soft);overflow:hidden}
.quiz__body{padding:clamp(22px,3vw,34px)}
.quiz__opts{display:grid;gap:12px;margin-top:22px}
.quiz__opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line-light);background:var(--white);cursor:pointer;text-align:left;font-size:.98rem;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .4s var(--ease-out)}
.quiz__opt:hover{border-color:var(--blue-electric);transform:translateX(4px)}
.quiz__opt[aria-pressed="true"]{border-color:var(--blue-electric);background:rgba(0,76,255,.06)}
.quiz__opt i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none;
  display:grid;place-items:center;transition:border-color .3s var(--ease)}
.quiz__opt[aria-pressed="true"] i{border-color:var(--blue-electric);background:var(--blue-electric);
  box-shadow:inset 0 0 0 3px var(--white)}
.quiz__out{margin-top:24px;padding:22px;border-radius:14px;background:var(--mist);border:1px solid var(--line-light)}

/* ---------- Imagens editoriais ---------- */
.fig{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-light);
  background:var(--navy-900);box-shadow:var(--shadow-soft)}
.dark .fig{border-color:var(--line-dark)}
.fig img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease-out)}
.fig:hover img{transform:scale(1.025)}
.fig figcaption{padding:12px 16px;font-size:.82rem;font-weight:600;color:var(--slate-ink);background:var(--white);
  border-top:1px solid var(--line-light)}
.dark .fig figcaption{background:rgba(255,255,255,.04);color:rgba(253,254,253,.6);border-color:var(--line-dark)}
.band-img{display:grid;gap:clamp(20px,3vw,44px);align-items:center}
@media (min-width:900px){.band-img{grid-template-columns:1.15fr .85fr}}

/* ---------- Galeria de projeto ---------- */
.gal{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
@media (max-width:820px){.gal{grid-template-columns:1fr}}
.shot{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-light);background:var(--navy-900)}
.shot img{width:100%;height:auto}
.shot--desk{aspect-ratio:16/10}
.shot--phone{aspect-ratio:3/4}
.shot .mock{padding:7%}
.shot .mock__win{display:flex;flex-direction:column;height:100%}
.shot .mock__grid{flex:1;align-content:space-between}
.shot .mock__grid b{height:14px}
.shot .mock__grid b.w2{height:auto;min-height:44px}
.shot .mock__grid b.tall{height:auto;min-height:54px}
.mock--phone{padding:8% 6%}
.mock--phone .mock__win{width:min(52%,210px);margin-inline:auto;border-radius:20px;height:100%;
  border-width:2px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.mock--phone .mock__bar{justify-content:center;padding:9px 10px;position:relative}
.mock--phone .mock__bar i{display:none}
.mock--phone .mock__bar span{max-width:52px;height:5px;margin:0}
.mock--phone .mock__grid{grid-template-columns:repeat(6,1fr);padding:9px;gap:6px}
.mock--phone .mock__grid b{grid-column:span 6!important;height:16px;min-height:0}
.mock--phone .mock__grid b.tall{min-height:42px}
.mock--phone .mock__grid b.w2{min-height:30px}

/* ---------- Trilha e filtros ---------- */
.crumbs{font-size:.86rem;font-weight:600;color:var(--slate);display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.crumbs a{color:inherit;text-decoration:none;display:inline-block;padding-block:6px}
.crumbs a:hover{color:var(--blue-soft)}
.crumbs li{display:flex;gap:10px;align-items:center}
.crumbs li+li::before{content:"/";opacity:.5}
.crumbs ol{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;padding:0;list-style:none}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter{padding:10px 18px;border-radius:999px;border:1px solid var(--line-light);background:var(--white);
  font-size:.92rem;font-weight:600;cursor:pointer;color:var(--ink-soft);
  transition:border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
.filter[aria-pressed="true"]{border-color:var(--blue-electric);color:var(--white);background:var(--blue-electric)}
.filter:hover{border-color:var(--blue-electric)}

/* notas de conteúdo pendente (visíveis só em desenvolvimento) */
.pending{display:none}
body.dev .pending{display:block;margin-top:12px;font-size:.8rem;font-weight:600;
  color:#8a5a00;border:1px dashed rgba(138,90,0,.5);border-radius:8px;padding:8px 10px;background:#FFFBF2}

/* ---------- Entradas ---------- */
/* títulos sobem por trás de uma máscara; blocos aparecem sem deslizar */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(1){transition-delay:.04s}
.js .stagger.in>*:nth-child(2){transition-delay:.1s}
.js .stagger.in>*:nth-child(3){transition-delay:.16s}
.js .stagger.in>*:nth-child(4){transition-delay:.22s}
.js .stagger.in>*:nth-child(5){transition-delay:.28s}
.js .stagger.in>*:nth-child(6){transition-delay:.34s}
.js .stagger.done>*{transition-delay:0s!important}

/* pausa global */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Transição entre páginas ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .22s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .36s var(--ease-out) both}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- Entrada do hero: a única coreografia de carregamento ---------- */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
/* a última linha carrega o sublinhado e o cursor abaixo da base: a máscara precisa de folga */
.hero h1 .ln:last-child{padding-bottom:.55em;margin-bottom:-.55em;padding-right:.7em;margin-right:-.7em}
.hero h1 .ln>span{display:block;transform:translateY(105%);animation:lineUp 1s var(--ease-out) forwards}
.hero h1 .ln:nth-child(1)>span{animation-delay:.05s}
.hero h1 .ln:nth-child(2)>span{animation-delay:.15s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.25s}
@keyframes lineUp{to{transform:none}}
.hero .eyebrow,.hero .lede,.hero .btn-row,.hero__proof,.crumbs{opacity:0;animation:fadeUp .8s var(--ease-out) forwards}
.hero .eyebrow,.crumbs{animation-delay:.02s}
.hero .lede{animation-delay:.36s}
.hero .btn-row{animation-delay:.46s}
.hero__proof{animation-delay:.56s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero__stage-wrap{opacity:0;animation:stageIn 1.2s var(--ease-out) .25s forwards}
@keyframes stageIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.hero__stage-wrap::before{content:"";position:absolute;inset:6% 4% -8%;border-radius:40px;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,76,255,.36),transparent 72%);filter:blur(44px);
  opacity:.75;animation:glowPulse 9s var(--ease) -2s infinite alternate;z-index:-1}
@keyframes glowPulse{from{opacity:.5;transform:scale(.97)}to{opacity:.85;transform:scale(1.03)}}
/* páginas internas: o título também sobe */
.h-display .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.h-display .ln>span{display:block;transform:translateY(105%);animation:lineUp 1s var(--ease-out) .1s forwards}

/* pista de rolagem */
.cue{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-size:.84rem;font-weight:600;color:var(--slate);
  background:none;border:0;padding:0;cursor:pointer;opacity:0;animation:fadeUp .8s var(--ease-out) .8s forwards}
.cue:hover{color:var(--blue-soft)}
.cue i{width:20px;height:32px;border:1px solid var(--line-dark);border-radius:12px;position:relative;flex:none}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
  background:var(--blue-electric);transform:translateX(-50%);animation:cueDrop 2.6s var(--ease) infinite}
@keyframes cueDrop{0%,100%{transform:translate(-50%,0);opacity:0}22%{opacity:1}64%{transform:translate(-50%,12px);opacity:0}}

/* ---------- Impressão e captura de página inteira ---------- */
@media print{
  .rv,.stagger>*,.hero h1 .ln>span,.h-display .ln>span,.hero .eyebrow,.hero .lede,.hero .btn-row,.hero__proof,.hero__stage-wrap,.cue,.crumbs{
    opacity:1!important;transform:none!important;animation:none!important}
  .hdr,.wa,.mnav,.stage__toggle,.cue,.bgfield,.cur{display:none!important}
  .manifesto blockquote .w{opacity:1!important}
  .frag__chip,.frag__row{--fp:1}
  .bg-navy,.bg-navy-900,.hero,.cta,.manifesto,.ftr,.ticker{background:#fff!important;color:#000!important}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv,.stagger>*{opacity:1!important;transform:none!important}
  .build__cursor{transform:translate(9vw,10vh)}
  .hero h1 .ln>span,.h-display .ln>span{transform:none!important}
  .hero h1 .u svg.uline path{stroke-dashoffset:0!important}
  .hero h1 .u i{opacity:1!important;transform:none!important}
  .hero .eyebrow,.hero .lede,.hero .btn-row,.hero__proof,.hero__stage-wrap,.cue,.crumbs{opacity:1!important;transform:none!important}
  .manifesto blockquote .w{opacity:1!important;transform:none!important}
  .steps__progress{height:100%!important}
  .stage{transform:none!important}
  .frag__chip,.frag__row{--fp:1}
  .cur,.bgfield{display:none!important}
  html.has-cur,html.has-cur a,html.has-cur button{cursor:auto}
}