/* ==========================================================
   Rafael Longo — light / Inter Tight / motion
   HTML+CSS+JS puro, sem build
   ========================================================== */

/* ---------- TOKENS ---------- */
:root{
  --bg:#FAFAF8;
  --tint:#F1F1EC;
  --dark:#0B0B0C;
  --card:#FFFFFF;

  --ink:#0B0B0C;
  --ink2:#56575D;
  --ink3:#8C8D94;

  --ac:#2B5BE8;
  --ac2:#1B40B4;
  --ac-soft:rgba(43,91,232,.09);
  --warn:#E0562F;
  --ok:#12A66B;

  --line:rgba(11,11,12,.10);
  --line2:rgba(11,11,12,.18);

  --fd:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',monospace;

  --wrap:1240px;
  --nar:760px;
  --gut:clamp(1.15rem,4vw,3rem);
  --sec:clamp(5rem,11vw,9rem);

  --r:14px;
  --r2:22px;
  --e:cubic-bezier(.22,.61,.36,1);
  --eo:cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--fb);font-size:1.0625rem;line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--ac);color:#fff}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem;font-size:.875rem}
.skip:focus{left:1rem;top:1rem}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--nar{max-width:var(--nar)}
.sec{padding-block:var(--sec);position:relative}
.sec--tint{background:var(--tint)}
.sec--dark{background:var(--dark);color:#F4F4F2}

/* ---------- TIPOGRAFIA ---------- */
.h2{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(2.3rem,5.6vw,4.6rem);
  line-height:.98;letter-spacing:-.042em;
  margin-bottom:1.1rem;
}
.lead{
  font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink2);
  max-width:46ch;margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.sec--dark .lead{color:rgba(244,244,242,.62)}

.tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--fm);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:1.25rem;
}
/* pulso feito com transform/opacity (composited) em vez de box-shadow, que repinta */
.tag i{width:6px;height:6px;border-radius:50%;background:var(--ac);flex:none;position:relative}
.tag i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ac);
  animation:pulse 2.6s ease-out infinite}
.sec--dark .tag{color:rgba(244,244,242,.6)}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:100px;
  font-family:var(--fd);font-weight:600;font-size:.9375rem;letter-spacing:-.015em;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),box-shadow .35s var(--e);
}
.btn--accent{background:var(--ac);color:#fff;box-shadow:0 6px 22px -8px rgba(43,91,232,.7)}
.btn--accent:hover{background:var(--ac2);box-shadow:0 12px 30px -8px rgba(43,91,232,.75)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ac)}
.btn--line{border-color:var(--line2);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--sm{padding:.6rem 1.15rem;font-size:.85rem}
.btn--full{width:100%;padding-block:1.05rem}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- SPOTLIGHT + PROGRESSO ---------- */
.spotlight{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,91,232,.13),transparent 62%);
  pointer-events:none;z-index:1;opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .5s var(--e);
  will-change:transform;
}
.spotlight.on{opacity:1}
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:var(--ac);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s var(--e),border-color .4s var(--e),box-shadow .4s var(--e);border-bottom:1px solid transparent}
.nav.stuck{background:rgba(250,250,248,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding:.95rem var(--gut);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.logo{display:inline-flex;align-items:center;gap:.55rem}
.logo__dot{width:11px;height:11px;border-radius:3px;background:var(--ac);flex:none;transition:transform .4s var(--eo),border-radius .4s var(--eo)}
.logo:hover .logo__dot{transform:rotate(45deg) scale(1.15);border-radius:50%}
.logo__txt{font-family:var(--fd);font-weight:700;font-size:1.02rem;letter-spacing:-.035em}

.nav__links{display:flex;align-items:center;gap:1.9rem}
.nav__links>a:not(.btn){font-size:.9rem;color:var(--ink2);position:relative;transition:color .3s var(--e)}
.nav__links>a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--ac);transition:width .35s var(--e)}
.nav__links>a:not(.btn):hover{color:var(--ink)}
.nav__links>a:not(.btn):hover::after{width:100%}

.burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);border-radius:100px}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .3s var(--e)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

@media(max-width:960px){
  .burger{display:flex}
  .nav__links{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(250,250,248,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);padding:.5rem var(--gut) 1.4rem;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .45s var(--e),opacity .3s,visibility .3s;
  }
  .nav__links.open{max-height:78vh;opacity:1;visibility:visible}
  .nav__links>a:not(.btn){padding:.95rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav__links>a:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:1.1rem}
}

/* ---------- MESH ----------
   Gradientes radiais estáticos, pintados uma vez.
   (Antes eram divs com filter:blur(70px) animando — bonito, mas repintava
   a tela inteira a cada frame e travava notebook sem GPU dedicada.) */
.mesh{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background:
    radial-gradient(46vw 46vw at 6% 2%,  rgba(43,91,232,.17), transparent 62%),
    radial-gradient(40vw 40vw at 98% 26%, rgba(46,211,183,.15), transparent 62%),
    radial-gradient(34vw 34vw at 60% 104%, rgba(255,178,66,.14), transparent 62%);
}
.mesh--cta{opacity:.62}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:7.5rem 4rem;overflow:hidden}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:1000px){.hero__in{grid-template-columns:1fr}.hero{min-height:auto;padding-block:7rem 4rem}}

.hero__h1{
  font-family:var(--fd);font-weight:700;
  font-size:clamp(2.55rem,6.2vw,5.1rem);
  line-height:.96;letter-spacing:-.045em;
  max-width:15ch;
}
.hero__rot{
  font-family:var(--fd);font-weight:700;color:var(--ac);
  font-size:clamp(1.25rem,2.7vw,2.15rem);line-height:1.1;letter-spacing:-.035em;
  margin-top:.35rem;
}
.hero__sub{margin-top:1.6rem;max-width:46ch;font-size:clamp(1rem,1.45vw,1.16rem);color:var(--ink2)}
.hero__cta{margin-top:2.35rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* rotativo */
.rot{display:block;position:relative;height:1.2em;overflow:hidden}
.rot__i{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(100%);
  transition:opacity .55s var(--eo),transform .55s var(--eo);white-space:nowrap}
.rot__i.is-on{opacity:1;transform:none}
.rot__i.is-out{opacity:0;transform:translateY(-100%)}
@media(max-width:420px){.rot{height:2.4em}.rot__i{white-space:normal}}

/* split de palavras */
.wrp{display:inline-block;overflow:hidden;vertical-align:bottom}
.wd{display:inline-block;transform:translateY(105%);transition:transform .82s var(--eo);transition-delay:calc(var(--i)*42ms)}
.in .wd{transform:none}

/* ---------- MOCKUP PAINEL (hero) ---------- */
.hero__art{position:relative;perspective:1200px}
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:0 30px 70px -30px rgba(11,11,12,.28),0 2px 8px rgba(11,11,12,.04);
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .45s var(--eo);
}
.panel__bar{display:flex;align-items:center;gap:.4rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:#FCFCFB}
.panel__bar span{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.panel__bar b{margin-left:.6rem;font-family:var(--fm);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:400}

.panel__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.kpi{background:var(--card);padding:1.15rem 1.1rem}
.kpi small{display:block;font-size:.6875rem;color:var(--ink3);letter-spacing:.02em;margin-bottom:.25rem}
.kpi strong{font-family:var(--fd);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.kpi--warn{color:var(--warn)}

.panel__chart{display:flex;align-items:flex-end;gap:.45rem;height:96px;padding:1.1rem 1.1rem 0;border-top:1px solid var(--line)}
.panel__chart i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--ac),rgba(43,91,232,.32));border-radius:4px 4px 0 0;
  transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--eo)}
.panel__chart i:nth-child(1){transition-delay:.05s}.panel__chart i:nth-child(2){transition-delay:.12s}
.panel__chart i:nth-child(3){transition-delay:.19s}.panel__chart i:nth-child(4){transition-delay:.26s}
.panel__chart i:nth-child(5){transition-delay:.33s}.panel__chart i:nth-child(6){transition-delay:.4s}
.panel__chart i:nth-child(7){transition-delay:.47s}
.in .panel__chart i{transform:scaleY(1)}

.panel__feed{padding:.85rem 1.1rem 1.15rem;display:grid;gap:.4rem}
.feed__row{font-size:.8125rem;color:var(--ink2);opacity:0;transform:translateX(-10px);transition:opacity .6s var(--eo),transform .6s var(--eo)}
.feed__row b{color:var(--ink);font-weight:600}
.feed__row::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ok);margin-right:.5rem;vertical-align:middle}
.in .feed__row{opacity:1;transform:none}
.in .feed__row:nth-child(1){transition-delay:.55s}
.in .feed__row:nth-child(2){transition-delay:.75s}
.in .feed__row:nth-child(3){transition-delay:.95s}

.art__note{margin-top:.85rem;text-align:center;font-family:var(--fm);font-size:.6875rem;color:var(--ink3);letter-spacing:.04em}

/* ---------- STRIP ---------- */
.strip{border-block:1px solid var(--line);background:var(--card);overflow:hidden;padding-block:1rem}
.strip__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.strip span{padding-inline:1.6rem;font-family:var(--fd);font-weight:600;font-size:.95rem;letter-spacing:-.02em;color:var(--ink3);white-space:nowrap;display:flex;align-items:center;gap:1.6rem}
.strip span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ac);opacity:.45}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- O QUE MUDA ---------- */
.swap{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2.25rem);align-items:center;margin-top:2.5rem}
@media(max-width:820px){.swap{grid-template-columns:1fr}.swap__arrow{justify-self:center}.swap__arrow svg{transform:rotate(90deg)}}
.swap__col{border:1px solid var(--line);border-radius:var(--r2);padding:clamp(1.5rem,3vw,2.25rem);background:var(--card)}
.swap__col--bad{background:var(--tint);border-style:dashed}
.swap__col--good{box-shadow:0 24px 50px -28px rgba(43,91,232,.45);border-color:rgba(43,91,232,.28)}
.swap__label{font-family:var(--fm);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-bottom:1.25rem}
.swap__col--good .swap__label{color:var(--ac)}
.swap__col li{
  font-family:var(--fd);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.02rem,1.8vw,1.28rem);
  padding-block:.72rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.65rem;
}
.swap__col li:last-child{border-bottom:0}
.swap__col--bad li{color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--line2)}
.swap__col--bad li::before{content:"✕";font-size:.7em;color:var(--ink3);flex:none}
.swap__col--good li::before{content:"✓";font-size:.75em;color:var(--ac);flex:none;font-weight:700}
.swap__arrow{color:var(--ac);width:40px;flex:none}

/* ---------- SCROLL HORIZONTAL ---------- */
/* altura recalculada por JS para casar 1:1 com a distância horizontal */
.hs{position:relative;height:300vh;background:var(--dark);color:#F4F4F2}
.hs__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.5rem,4vh,3rem);padding-block:5rem 2rem}
.hs__head{flex:none}
.hs .tag{color:rgba(244,244,242,.6)}
.hs .h2{margin-bottom:0}
.hs__hint{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:var(--fm);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,244,242,.4)}
.hs__hint svg{width:24px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.hs__track{display:flex;gap:clamp(1rem,2vw,1.5rem);padding-inline:var(--gut);will-change:transform}
.step{
  flex:none;width:clamp(300px,38vw,520px);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r2);padding:clamp(1.4rem,2.4vw,2rem);
  display:flex;flex-direction:column;
}
.step__l{font-family:var(--fd);font-weight:800;font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:.85;letter-spacing:-.05em;
  background:linear-gradient(135deg,#6D8DFF,#2ED3B7);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.9rem}
.step h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.03em}
.step__d{color:rgba(244,244,242,.55);font-size:.9375rem;margin-top:.3rem}
.mini{margin-top:1.1rem;display:grid;gap:.5rem}
.mini li{font-size:.875rem;color:rgba(244,244,242,.75);padding-left:1.1rem;position:relative}
.mini li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:#2ED3B7}
.mini--lg li{font-size:1rem;color:var(--ink2)}
.mini--lg li::before{background:var(--ac)}

@media(max-width:900px){
  .hs{height:auto}
  .hs__stick{position:static;height:auto;padding-block:var(--sec)}
  .hs__track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;transform:none!important;-webkit-overflow-scrolling:touch}
  .hs__track::-webkit-scrollbar{height:3px}
  .hs__track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}
  .step{scroll-snap-align:center;width:min(82vw,340px)}
}

/* ---------- MOCKUPS DAS ETAPAS ---------- */
.mk{margin-top:auto;padding-top:1.5rem}
.mk__bar{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:.55rem .85rem;font-size:.75rem;color:rgba(244,244,242,.85);min-height:34px}
.mk__bar em{font-style:normal;font-family:var(--fm);font-size:.7rem}
.mk__cursor{width:1px;height:13px;background:#2ED3B7;animation:blink 1s steps(2) infinite;flex:none}
@keyframes blink{50%{opacity:0}}
.mk__res{margin-top:.5rem;padding:.55rem .7rem;border-radius:8px;background:rgba(255,255,255,.05);display:grid;gap:.32rem;opacity:0;transform:translateY(8px);transition:opacity .6s var(--eo),transform .6s var(--eo)}
.in .mk__res{opacity:1;transform:none}
.in .mk__res:nth-child(2){transition-delay:.6s}
.in .mk__res:nth-child(3){transition-delay:.75s}
.in .mk__res:nth-child(4){transition-delay:.9s}
.mk__res i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.22);width:100%}
.mk__res i.w80{width:80%}.mk__res i.w70{width:70%}.mk__res i.w60{width:60%}.mk__res i.w50{width:50%}.mk__res i.w40{width:40%}
.mk__res--ad{background:rgba(46,211,183,.11);border:1px solid rgba(46,211,183,.28)}
.mk__res--ad b{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#2ED3B7}

.mkf{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .8rem;border-radius:9px;background:rgba(255,255,255,.05);margin-bottom:.45rem;font-size:.78rem;color:rgba(244,244,242,.6)}
.mkf .fill{height:7px;border-radius:4px;background:linear-gradient(90deg,#6D8DFF,#2ED3B7);width:0;transition:width 1s var(--eo)}
.in .mkf .fill{width:52%}
.in .mkf .fill.d1{transition-delay:.25s;width:38%}
.in .mkf .fill.d2{transition-delay:.5s;width:64%}
.mk__btn{margin-top:.7rem;text-align:center;padding:.6rem;border-radius:100px;background:#2B5BE8;color:#fff;font-family:var(--fd);font-weight:600;font-size:.8rem;position:relative;overflow:hidden}
.mk__ok{position:absolute;inset:0;display:grid;place-items:center;background:var(--ok);opacity:0;transition:opacity .4s var(--e)}
.in .mk__ok{opacity:1;transition-delay:1.5s}

.mk--board{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mk--board .col{background:rgba(255,255,255,.05);border-radius:10px;padding:.5rem;display:grid;gap:.35rem;align-content:start;min-height:96px}
.mk--board p{font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,244,242,.45);margin-bottom:.2rem}
.mk--board .c{display:block;height:22px;border-radius:6px;background:rgba(255,255,255,.14)}
.mk--board .c2{background:rgba(109,141,255,.4)}
.mk--board .c3{background:rgba(46,211,183,.4)}
.mk--board.in .c1{animation:slot .7s var(--eo) .5s both}
.mk--board.in .c2{animation:slot .7s var(--eo) .8s both}
.mk--board.in .c3{animation:slot .7s var(--eo) 1.1s both}
@keyframes slot{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}

.mk--chat{display:grid;gap:.4rem}
.bub{padding:.55rem .8rem;border-radius:14px;font-size:.78rem;max-width:88%;opacity:0;transform:translateY(8px);transition:opacity .55s var(--eo),transform .55s var(--eo)}
.bub--in{background:rgba(255,255,255,.09);justify-self:start;border-bottom-left-radius:4px}
.bub--out{background:rgba(43,91,232,.35);justify-self:end;border-bottom-right-radius:4px}
.bub--auto{background:rgba(46,211,183,.16);border:1px solid rgba(46,211,183,.3);font-size:.72rem}
.bub--auto b{font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#2ED3B7}
.in .bub{opacity:1;transform:none}
.in .bub:nth-child(1){transition-delay:.5s}
.in .bub:nth-child(2){transition-delay:.85s}
.in .bub:nth-child(3){transition-delay:1.25s}

/* ---------- SOLUÇÕES ---------- */
.grid5{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(.8rem,1.6vw,1.15rem)}
.cd{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:clamp(1.4rem,2.4vw,1.9rem);min-height:190px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:box-shadow .4s var(--e),border-color .4s var(--e);
  transform-style:preserve-3d;
}
.cd::after{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--ac-soft),transparent 65%);opacity:0;transition:opacity .4s var(--e);pointer-events:none}
.cd:hover{border-color:rgba(43,91,232,.35);box-shadow:0 22px 45px -26px rgba(11,11,12,.32)}
.cd:hover::after{opacity:1}
.cd__n{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;color:var(--ac);margin-bottom:auto}
.cd h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.032em;margin-top:1.5rem}
.cd p{margin-top:.4rem;font-size:.9375rem;color:var(--ink2)}
.cd--go{background:var(--ink);color:#fff;border-color:var(--ink);justify-content:flex-end}
.cd--go h3{margin-top:0;font-size:clamp(1.25rem,2.1vw,1.55rem)}
.cd--go .cd__arrow{position:absolute;top:1.6rem;right:1.6rem;font-size:1.5rem;transition:transform .4s var(--eo)}
.cd--go:hover .cd__arrow{transform:translate(5px,-5px)}
.cd--go:hover{background:var(--ac);border-color:var(--ac)}

/* ---------- PROJETOS ---------- */
.prj{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(.8rem,1.6vw,1.15rem)}
.prj__i{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:clamp(1.4rem,2.4vw,1.9rem);transition:border-color .4s var(--e),transform .4s var(--eo)}
.prj__i:hover{border-color:var(--line2);transform:translateY(-4px)}
.prj__t{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.prj__i h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.35rem);letter-spacing:-.032em}
.prj__i>p{font-size:.9375rem;color:var(--ink2)}
.pill{flex:none;font-family:var(--fm);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .6rem;border-radius:100px;border:1px solid var(--line2);color:var(--ink3)}
.pill--live{color:var(--ac);border-color:rgba(43,91,232,.35);background:var(--ac-soft)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.1rem}
.tags li{font-family:var(--fm);font-size:.65rem;padding:.28rem .55rem;border-radius:6px;background:var(--tint);color:var(--ink2)}

/* ---------- DEPOIMENTOS (usado só quando a seção for ativada) ---------- */
.dep{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(.8rem,1.6vw,1.15rem)}
.dep__i{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1.5rem}
.dep__i blockquote{font-family:var(--fd);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.28rem);letter-spacing:-.028em;line-height:1.4}
.dep__i figcaption{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.dep__i img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.dep__i figcaption span{display:grid;font-size:.8125rem;color:var(--ink3);line-height:1.4}
.dep__i figcaption b{color:var(--ink);font-size:.9rem}

/* ---------- SOBRE ---------- */
.about{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:880px){.about{grid-template-columns:1fr}.about__ph{max-width:300px;width:100%}}
.ph{aspect-ratio:4/5;border-radius:var(--r2);border:1px solid rgba(255,255,255,.13);
  display:grid;place-content:center;gap:.7rem;justify-items:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(43,91,232,.28),transparent 62%),rgba(255,255,255,.03)}
.ph span{font-family:var(--fd);font-weight:800;font-size:3.2rem;letter-spacing:-.05em;color:rgba(244,244,242,.35)}
.ph em{font-style:normal;font-family:var(--fm);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,244,242,.32)}
.about__ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.13);filter:saturate(.9) contrast(1.03)}
.about__p{color:rgba(244,244,242,.68);max-width:52ch;margin-top:1rem}
.about__p strong{color:#F4F4F2}
.about__p--big{font-family:var(--fd);font-weight:700;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.15;letter-spacing:-.035em;color:#F4F4F2;margin-top:1.75rem}

/* ---------- COMO FUNCIONA ---------- */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(.8rem,1.6vw,1.15rem);margin-top:2.5rem}
.how__i{border:1px solid var(--line);border-radius:var(--r2);padding:clamp(1.4rem,2.4vw,1.9rem);background:var(--card);transition:transform .4s var(--eo),border-color .4s var(--e)}
.how__i:hover{transform:translateY(-4px);border-color:var(--line2)}
.how__n{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;color:var(--ink3);margin-bottom:1.4rem}
.how__i h3{font-family:var(--fd);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.55rem);letter-spacing:-.035em}
.how__p{color:var(--ac);font-weight:600;font-size:.9375rem;margin-top:.2rem}
.how__i>p:last-child{margin-top:.75rem;font-size:.9rem;color:var(--ink2)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:2rem}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;cursor:pointer;padding-block:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  font-family:var(--fd);font-weight:600;font-size:clamp(1rem,1.7vw,1.18rem);letter-spacing:-.028em;transition:color .3s var(--e)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--ac)}
.faq__i summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.6px solid var(--ac);border-bottom:1.6px solid var(--ac);transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--e)}
.faq__i[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq__i>p{padding-bottom:1.35rem;color:var(--ink2);font-size:.95rem;max-width:64ch}
.faq__i[open]>p{animation:fd .4s var(--e)}
@keyframes fd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- CTA / FORM ---------- */
.cta{position:relative;overflow:hidden;background:var(--tint)}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:940px){.cta__in{grid-template-columns:1fr}}
.cta__wa{display:inline-block;margin-top:2rem;font-size:.9375rem;border-bottom:1.5px solid var(--ac);padding-bottom:2px;transition:color .3s var(--e)}
.cta__wa:hover{color:var(--ac)}

.fm{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:clamp(1.35rem,3vw,2.1rem);display:grid;gap:.95rem;
  box-shadow:0 30px 70px -40px rgba(11,11,12,.3)}
.fm__row{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
@media(max-width:540px){.fm__row{grid-template-columns:1fr}}
.f{display:grid;gap:.4rem;border:0;min-width:0}
.f>span,.f legend{font-family:var(--fm);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.f>span i,.f legend i{color:var(--ac);font-style:normal}
.f input,.f select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.78rem .85rem;font-size:.9375rem;transition:border-color .3s var(--e),box-shadow .3s var(--e)}
.f input::placeholder{color:var(--ink3)}
.f input:focus,.f select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ac) 50%),linear-gradient(135deg,var(--ac) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.f.bad input,.f.bad select{border-color:var(--warn)}
.f em{font-style:normal;font-size:.7rem;color:var(--warn)}
.f em:empty{display:none}

.f--chips{gap:.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ch{cursor:pointer}
.ch input{position:absolute;opacity:0;pointer-events:none}
.ch span{display:inline-block;padding:.48rem .85rem;border-radius:100px;border:1px solid var(--line);background:var(--bg);font-size:.8125rem;color:var(--ink2);transition:all .28s var(--e)}
.ch:hover span{border-color:var(--line2)}
.ch input:checked+span{border-color:var(--ac);background:var(--ac);color:#fff}
.ch input:focus-visible+span{outline:2px solid var(--ac);outline-offset:2px}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.fm__st{font-size:.9rem;padding:.85rem 1rem;border-radius:10px;border:1px solid var(--line2)}
.fm__st:empty{display:none}
.fm__st.ok{border-color:rgba(18,166,107,.4);background:rgba(18,166,107,.08);color:#0B7A4E}
.fm__st.err{border-color:rgba(224,86,47,.4);background:rgba(224,86,47,.07);color:#B23A18}
.fm__st a{text-decoration:underline}

/* ---------- FOOTER ---------- */
.ft{background:var(--dark);color:#F4F4F2;padding-top:clamp(3rem,6vw,4.5rem)}
.ft .logo__txt{color:#F4F4F2}
.ft__in{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:760px){.ft__in{grid-template-columns:1fr 1fr}.ft__in>:first-child{grid-column:1/-1}}
@media(max-width:480px){.ft__in{grid-template-columns:1fr}}
.ft__tag{margin-top:1rem;font-size:.85rem;color:rgba(244,244,242,.45);line-height:1.7}
.ft__nav,.ft__ct{display:grid;gap:.6rem;align-content:start}
.ft__nav a,.ft__ct a{font-size:.9rem;color:rgba(244,244,242,.55);justify-self:start;transition:color .3s var(--e)}
.ft__nav a:hover,.ft__ct a:hover{color:#F4F4F2}
.ft__b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:rgba(244,244,242,.4)}

/* ==========================================================
   AJUSTE MOBILE — o hero ocupava altura demais no celular
   ========================================================== */
@media(max-width:640px){
  :root{--sec:clamp(3.75rem,10vw,5rem)}

  .hero{padding-block:5.25rem 2.75rem}
  .hero__in{gap:2.25rem}

  .tag{font-size:.6rem;letter-spacing:.06em;margin-bottom:.9rem;line-height:1.5;align-items:flex-start}
  .tag i{margin-top:.45em}

  .hero__h1{font-size:clamp(2.05rem,9vw,2.9rem);line-height:1.02;letter-spacing:-.04em;max-width:none}
  .hero__rot{font-size:clamp(1.1rem,5.2vw,1.6rem);margin-top:.5rem}
  .rot{height:1.35em}

  .hero__sub{margin-top:1.15rem;font-size:.97rem;line-height:1.6}
  .hero__cta{margin-top:1.7rem;gap:.55rem}
  .hero__cta .btn{flex:1 1 auto;padding-inline:1rem}

  /* mockup do painel mais compacto */
  .hero__art{margin-top:.5rem}
  .panel__bar{padding:.6rem .8rem}
  .panel__bar span{width:7px;height:7px}
  .kpi{padding:.8rem .65rem}
  .kpi small{font-size:.62rem;margin-bottom:.15rem}
  .kpi strong{font-size:1.4rem}
  .panel__chart{height:62px;padding:.8rem .8rem 0;gap:.32rem}
  .panel__feed{padding:.7rem .8rem .9rem;gap:.3rem}
  .feed__row{font-size:.74rem}
  .art__note{font-size:.6rem;margin-top:.65rem}

  /* títulos de seção e espaçamentos */
  .h2{font-size:clamp(2.05rem,8.6vw,2.9rem)}
  .lead{margin-bottom:2rem;font-size:.98rem}
  .shead__lead,.about__p{font-size:.97rem}
  .swap{margin-top:1.75rem;gap:.9rem}
  .swap__col{padding:1.35rem}
  .swap__col li{font-size:1rem;padding-block:.62rem}
  .cd{min-height:0;padding:1.35rem}
  .cd h3{margin-top:1.1rem}
  .how{margin-top:1.75rem}
  .faq{margin-top:1.5rem}
  .fm{padding:1.25rem}
  .about__p--big{font-size:1.45rem;margin-top:1.35rem}
}

/* telas bem estreitas (≤360px) */
@media(max-width:360px){
  .hero__h1{font-size:1.95rem}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .kpi strong{font-size:1.25rem}
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--eo),transform .85s var(--eo);transition-delay:calc(var(--d,0)*95ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- MOTION OFF ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.wd,.mk__res,.feed__row,.bub{opacity:1!important;transform:none!important}
  .panel__chart i{transform:scaleY(1)!important}
  .spotlight{display:none}
  .hs{height:auto}
  .hs__stick{position:static;height:auto;padding-block:var(--sec)}
  .hs__track{overflow-x:auto;transform:none!important}
}