:root{
  --blue:#275181; --orange:#f47e26; --graphite:#353535;
  --bg:#0a0f16; --bg-2:#0f1822; --panel:#141e2a; --line:#22303e;
  --text:#eef2f7; --muted:#96a7bb;
  /* Grafite do manual (#353535) nao le sobre o fundo escuro: 1.4:1.
     No tema escuro usamos o mesmo grafite clareado ate passar em contraste. */
  --eyebrow:#9aa0a6;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
:root[data-theme="light"]{
  --bg:#f5f7fa; --bg-2:#ffffff; --panel:#ffffff; --line:#dae2ea;
  --text:#161b22; --muted:#57636f;
  --eyebrow:#353535;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; min-height:100dvh; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,sans-serif; font-size:17px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background-color .6s var(--ease)}
h1,h2,h3,.dsp{font-family:"Sofia Sans Semi Condensed",Inter,sans-serif; line-height:1; margin:0; text-transform:uppercase}
.wrap{max-width:1140px; margin:0 auto; padding:0 16px; position:relative}
@media(min-width:768px){.wrap{padding:0 32px}}

#prog{position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--blue),var(--orange)); box-shadow:0 0 18px rgba(244,126,38,.6)}
#ember{position:fixed; width:24px; height:24px; border-radius:50%; pointer-events:none; z-index:55;
  border:1.5px solid rgba(244,126,38,.75); transform:translate(-50%,-50%); opacity:0;
  transition:opacity .3s, width .25s var(--ease), height .25s var(--ease), background-color .25s}
@media(hover:none){#ember{display:none}}

#dots{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:45; display:none; gap:14px; flex-direction:column}
@media(min-width:1100px){#dots{display:flex}}
#dots a{width:8px; height:8px; border:1px solid var(--muted); transform:rotate(45deg); opacity:.5;
  transition:.3s var(--ease); display:block}
#dots a.on{background:var(--orange); border-color:var(--orange); opacity:1; transform:rotate(45deg) scale(1.5)}

header{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom:1px solid transparent;
  transition:transform .45s var(--ease), border-color .4s, background-color .4s}
header.solid{border-bottom-color:var(--line)}
header.hide{transform:translateY(-105%)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:70px}
.brandmark{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brandmark img{height:32px; width:auto; transition:transform .5s var(--ease)}

/* O simbolo da marca e um PNG negativo: moldura e raio em branco, faisca laranja.
   Ele foi desenhado para fundo #141414. No tema claro o branco some no fundo e
   sobram so as pontas laranja -- o icone parece ter sumido.

   Nao da para resolver com filter: inverter o branco inverteria o laranja junto,
   e o laranja e a unica cor da marca. Sao dois arquivos, e o tema escolhe qual
   aparece. O de tema claro e o simbolo positivo (grafite + laranja), o mesmo
   arquivo de origem em assets/brand/logo/. */
.sym-light{display:none}
:root[data-theme="light"] .sym-dark{display:none}
:root[data-theme="light"] .sym-light{display:block}
.brandmark:hover img{transform:rotate(-14deg) scale(1.08)}
.brandmark span{font-family:"Sofia Sans Semi Condensed",sans-serif; font-weight:700; font-size:23px;
  letter-spacing:.06em; text-transform:uppercase}
.nav-links{display:none; gap:30px}
@media(min-width:760px){.nav-links{display:flex}}
.nav-links a{color:var(--muted); text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; position:relative; padding:10px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:6px; height:1px; width:0; background:var(--orange); transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--text)} .nav-links a:hover::after{width:100%}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
  padding:14px 28px; border-radius:2px; border:1px solid transparent; font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  font-family:Inter,sans-serif;
  transition:transform .2s var(--ease), background-color .2s, color .2s, border-color .2s}
.btn-primary{background:var(--orange); color:#150d03}
.btn-primary::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .25s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 55%)}
.btn-primary:hover::before{opacity:1}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.theme-tgl{background:none; border:1px solid var(--line); color:var(--muted); width:44px; height:44px;
  border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:.3s var(--ease)}
.theme-tgl:hover{color:var(--orange); border-color:var(--orange); transform:rotate(45deg)}

/* ===== HERO ===== */
.hero{position:relative; min-height:100dvh; display:grid; align-items:center; overflow:hidden}
#sparks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero-glow{position:absolute; left:50%; top:46%; width:min(120vw,1100px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(244,126,38,.16), rgba(39,81,129,.11) 42%, transparent 66%);
  pointer-events:none; animation:breathe 8s ease-in-out infinite; will-change:transform}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
.hero-inner{position:relative; z-index:2; text-align:center; padding:130px 0 100px; will-change:transform, opacity}
/* metade do corpo do h1: clamp(62px,16vw,200px) */
.eyebrow{display:inline-flex; align-items:center; gap:24px; margin-bottom:6px;
  font-family:"Sofia Sans Semi Condensed",Inter,sans-serif; font-size:clamp(31px,8vw,100px);
  font-weight:600; letter-spacing:.02em; line-height:1.05; text-transform:uppercase; color:var(--eyebrow);
  opacity:0; animation:fadeUp .8s var(--ease-out) .15s forwards}
.eyebrow i{width:clamp(28px,4vw,54px); height:3px; background:var(--eyebrow); display:block}
h1{font-size:clamp(62px,16vw,200px); font-weight:700; letter-spacing:.005em}
.h-mask{overflow:hidden; display:block}
.h-mask > span{display:inline-block; transform:translateY(105%) rotate(4deg); animation:riseIn 1.1s var(--ease-out) forwards}
@keyframes riseIn{to{transform:none}}
.claims{margin:38px auto 0; max-width:60ch; display:grid; gap:16px}
.claims p{margin:0; font-family:"Sofia Sans Semi Condensed",sans-serif; font-size:clamp(20px,3.3vw,31px);
  font-weight:600; letter-spacing:.02em; text-transform:uppercase; opacity:0; animation:fadeUp .8s var(--ease-out) forwards}
.claims p:nth-child(1){animation-delay:.7s} .claims p:nth-child(2){animation-delay:.88s}
.claims em{font-style:normal; color:var(--muted); font-weight:300}
@keyframes fadeUp{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
.scroll-dot{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:22px; height:36px;
  border:1.5px solid var(--line); border-radius:12px; z-index:2}
.scroll-dot::after{content:""; position:absolute; left:50%; top:7px; width:4px; height:7px; border-radius:2px;
  background:var(--orange); transform:translateX(-50%); animation:dot 1.9s infinite var(--ease)}
@keyframes dot{0%{opacity:0; transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0; transform:translate(-50%,14px)}}

section{padding:110px 0; position:relative}
@media(min-width:900px){section{padding:160px 0}}
.alt{background:var(--bg-2)}
.kick{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--orange); font-weight:600; margin-bottom:18px}
.sec-head{max-width:60ch; margin-bottom:60px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(34px,6.6vw,74px); font-weight:600; letter-spacing:-.005em; line-height:1.05}
.sec-head p{color:var(--muted); margin:22px 0 0; font-size:18px}

/* A mascara corta a palavra enquanto ela sobe. Sem folga em cima e embaixo,
   ela come acento, cedilha e a perna do Q. */
.sw{display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.14;
  padding:.1em 0 .14em; margin:-.1em 0 -.14em}
.sw > i{display:inline-block; font-style:normal; transform:translateY(102%); transition:transform .85s var(--ease-out)}
.sw.in > i{transform:none}
.reveal{opacity:0; transform:translateY(34px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.stagger > *{opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.stagger.in > *{opacity:1; transform:none}
.stagger.in > *:nth-child(2){transition-delay:.12s}
.stagger.in > *:nth-child(3){transition-delay:.24s}

/* ===== MARQUEE ===== */
.marq{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; background:var(--bg); user-select:none}
.marq-row{display:flex; gap:48px; white-space:nowrap; will-change:transform;
  font-family:"Sofia Sans Semi Condensed",sans-serif; text-transform:uppercase; font-weight:600;
  font-size:clamp(22px,3.4vw,40px); letter-spacing:.06em; color:var(--muted)}
.marq-row b{color:var(--orange); font-weight:600}
.marq-row span{opacity:.5}

/* ===== WORK ===== */
.grid3{display:grid; gap:20px}
@media(min-width:820px){.grid3{grid-template-columns:repeat(3,1fr)}}
.tilt{background:var(--panel); border:1px solid var(--line); padding:38px; transform-style:preserve-3d;
  transition:transform .35s var(--ease-out), border-color .3s, box-shadow .35s; position:relative; overflow:hidden}
.tilt::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(244,126,38,.14), transparent 60%)}
.tilt:hover{border-color:rgba(244,126,38,.5); box-shadow:0 26px 60px rgba(0,0,0,.32)}
.tilt:hover::before{opacity:1}
.tilt > *{position:relative; transform:translateZ(26px)}
.tilt .ic{width:48px; height:48px; display:grid; place-items:center; color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 40%,transparent); margin-bottom:24px;
  transition:transform .4s var(--ease-out)}
.tilt:hover .ic{transform:translateZ(26px) rotate(-10deg) scale(1.06)}
.tilt h3{font-size:27px; font-weight:600; margin-bottom:12px}
.tilt h3.asis{text-transform:none; letter-spacing:.01em}
.tilt .strike{display:block; color:var(--muted); font-size:14px; letter-spacing:.05em; margin-bottom:14px}
.tilt .strike s{opacity:.5}
.tilt p{margin:0; color:var(--muted); font-size:16px}

/* ===== CONTACT FORM ===== */
.cta{position:relative; overflow:hidden; background:var(--bg-2)}
.cta::after{content:""; position:absolute; left:50%; top:0; width:min(140vw,1200px); aspect-ratio:2/1;
  transform:translate(-50%,-55%); background:radial-gradient(ellipse, rgba(244,126,38,.18), transparent 62%); pointer-events:none}
.cta .wrap{z-index:1}
.cta h2{font-size:clamp(36px,7vw,84px); font-weight:700; text-align:center; line-height:1.05}
.cta .sub{color:var(--muted); max-width:52ch; margin:22px auto 48px; text-align:center}
form{max-width:720px; margin:0 auto}
.f-row{display:grid; gap:20px; align-items:end}
@media(min-width:720px){.f-row{grid-template-columns:1fr 1fr auto; gap:24px}}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600}
input{font:inherit; color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:12px 2px; min-height:48px; border-radius:0; width:100%;
  transition:border-color .3s var(--ease), background-color .3s}
input::placeholder{color:var(--muted); opacity:.5}
input:hover{border-bottom-color:var(--muted)}
input:focus{outline:none; border-bottom-color:var(--orange); background:color-mix(in srgb,var(--orange) 5%,transparent)}
.f-row .btn{align-self:end}
.err{color:#ff8b6b; font-size:13px; margin:18px 0 0; min-height:1.2em; text-align:center}
.field.bad input{border-bottom-color:#ff8b6b}
.form-done{display:none; text-align:center; padding:8px 0}
.form-done.on{display:block; animation:fadeUp .6s var(--ease-out)}
.form-done h3{font-size:clamp(26px,4vw,40px); font-weight:600; color:var(--orange); margin-bottom:14px}
.form-done p{color:var(--muted); margin:0 auto; max-width:44ch}
form.sent .f-row, form.sent .err{display:none}

footer{border-top:1px solid var(--line); padding:44px 0; color:var(--muted); font-size:13px; letter-spacing:.04em}
.foot{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between}
.foot img{height:26px; width:auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .reveal,.stagger > *,.claims p,.eyebrow{opacity:1; transform:none}
  .h-mask > span,.sw > i{transform:none}
  html{scroll-behavior:auto}
  #sparks,#ember,.marq{display:none}
}