:root{
  --background:#05070F;
  --bg:var(--background); --bg2:#0D1117; --card:#141A22;
  --text:#FFFFFF; --muted:#B4BCC8;
  --blue:#29A8FF; --green:#62F04E;
  --grad:linear-gradient(120deg,var(--blue),var(--green));
  --radius:28px; --radius-sm:18px;
  --border:rgba(180,188,200,.12);
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1400px;
  --gap:clamp(3.25rem,7vw,6.5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--background);color:var(--text);
  font-family:var(--font);font-size:1.0625rem;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:rgba(41,168,255,.35)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
section{padding:var(--gap) 0;position:relative}

/* ===== BACKGROUND GLOBAL (base + grid + glow + noise) ===== */
.site-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  /* disfarça a costura onde o fundo (grid + brilho) aparece de repente
     assim que uma seção nova toma o topo da tela (ex.: logo após o hero) */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 260px);
  mask-image:linear-gradient(180deg,transparent,#000 260px)}
.site-bg__grid{position:absolute;inset:0;color:var(--muted);opacity:.04;
  background-image:linear-gradient(to right,currentColor 1px,transparent 1px),linear-gradient(to bottom,currentColor 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 100% 70% at 50% 0%,#000 35%,transparent 85%)}
.site-bg__glow{position:absolute;top:-14%;left:50%;transform:translateX(-50%);width:min(46vw,720px);aspect-ratio:1;border-radius:50%;
  background:rgba(41,168,255,.10);filter:blur(120px);will-change:transform}
.site-bg__noise{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")}
@media(max-width:768px){.site-bg__glow{width:64vw;top:-8%;filter:blur(90px)}}
@media(max-width:430px){.site-bg__glow{width:78vw;filter:blur(70px);background:rgba(41,168,255,.08)}}


main{position:relative;z-index:2}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  background:rgba(5,7,15,.6);border-bottom:1px solid var(--border);}
.nav-inner{max-width:var(--max);margin:0 auto;padding:.85rem clamp(1.25rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.14em;font-size:1rem}
.brand img{height:38px;width:auto}
.nav-links{display:flex;gap:2rem;font-size:.92rem;color:var(--muted)}
.nav-links a{transition:color .25s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}
.nav-cta{position:relative;overflow:hidden;padding:.6rem 1.25rem;border-radius:999px;background:var(--grad);color:#05070F;font-weight:700;font-size:.9rem;border:none;transition:transform .3s cubic-bezier(.3,1.4,.4,1),box-shadow .3s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(41,168,255,.22)}
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:12px;padding:.5rem .7rem;color:var(--text)}
@media(max-width:860px){.nav-links{display:none}.menu-btn{display:flex;align-items:center;justify-content:center}}
@media(max-width:480px){
  .nav-cta{display:none}
  .btns{flex-direction:column}
  .btns .btn{width:100%;justify-content:center}
  .why-metrics{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  h1{font-size:clamp(2.2rem,10vw,2.8rem)}
  .contact{border-radius:26px}
}
.mobile-menu{display:none;flex-direction:column;gap:1rem;padding:1.25rem clamp(1.25rem,4vw,3rem) 1.75rem;border-top:1px solid var(--border)}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--muted);font-size:1.05rem}

/* type */
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad)}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.12;font-weight:800;letter-spacing:-.03em;max-width:20ch}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.015em}
.lead{color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);max-width:56ch;margin-top:1rem}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* reveal */
.rv{opacity:0;transform:translateY(34px);filter:blur(8px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:blur(0)}

/* buttons */
.btns{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:1rem;border:none;transition:transform .35s cubic-bezier(.3,1.5,.4,1),box-shadow .25s ease,border-color .25s ease;will-change:transform}
.btn-primary{background:var(--grad);color:#05070F}
.btn-primary:hover{box-shadow:0 6px 22px rgba(41,168,255,.22);transform:translateY(-1px)}
.btn-ghost{background:rgba(20,26,34,.7);color:var(--text);border:1px solid var(--border);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(41,168,255,.5);box-shadow:0 4px 18px rgba(0,0,0,.25)}
/* cursor-follow light reflection (position set by JS via --bx/--by; static center fallback for touch/reduced-motion) */
.btn::before,.nav-cta::before,.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.22),transparent 65%);
  opacity:0;transition:opacity .25s ease}
.btn:hover::before,.nav-cta:hover::before,.wa:hover::before{opacity:1}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn svg{transition:transform .3s}
.btn:hover svg{transform:translateX(3px)}

/* hero */
.hero{min-height:100dvh;display:flex;align-items:center;padding-top:7.5rem;padding-bottom:4rem;overflow:hidden}
@media(max-width:980px){.hero{min-height:auto;padding-top:6.5rem}}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--border);background:rgba(20,26,34,.6);font-size:.85rem;color:var(--muted);backdrop-filter:blur(8px);margin-bottom:1.1rem}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(98,240,78,.5)}50%{box-shadow:0 0 0 7px rgba(98,240,78,0)}}

/* floating dashboard */
.dash-wrap{position:relative;perspective:1200px}
.dash{background:linear-gradient(160deg,rgba(20,26,34,.92),rgba(13,17,23,.92));
  border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px);will-change:transform;transform-style:preserve-3d;
  animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotateX(2deg) rotateY(-3deg)}50%{transform:translateY(-14px) rotateX(2deg) rotateY(-3deg)}}
.dash-head{display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.dash-head span{width:10px;height:10px;border-radius:50%;background:#2a3340}
.dash-head span:first-child{background:rgba(41,168,255,.6)}
.dash-head em{margin-left:auto;font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--muted)}
.dash-body{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;padding-top:1rem}
.dash-card{background:rgba(5,7,15,.55);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem}
.dash-card small{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.dash-card strong{display:block;font-size:1.5rem;font-weight:900;margin-top:.3rem}
.spark{margin-top:.6rem;height:40px}
.spark path{fill:none;stroke:url(#sg);stroke-width:2;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:draw 3s 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dash-code{grid-column:1/-1;font-family:var(--mono);font-size:.74rem;line-height:1.8;color:var(--muted);background:rgba(5,7,15,.55);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.1rem;overflow:hidden}
.dash-code .k{color:var(--blue)}.dash-code .s{color:var(--green)}.dash-code .c{opacity:.45}
.type-caret{display:inline-block;width:7px;height:.95em;background:var(--green);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chip-float{position:absolute;padding:.55rem .9rem;border-radius:14px;background:rgba(20,26,34,.85);border:1px solid var(--border);backdrop-filter:blur(12px);font-family:var(--mono);font-size:.72rem;display:flex;align-items:center;gap:.5rem;box-shadow:0 18px 40px rgba(0,0,0,.4);animation:float 6s ease-in-out infinite}
.chip-float b{color:var(--green);font-weight:500}
.chip-a{top:-22px;right:6%;animation-delay:.8s}
.chip-b{bottom:-18px;left:-4%;animation-delay:1.6s}
@media(max-width:980px){.chip-b{left:2%}.chip-a{right:2%}}
@media(max-width:560px){.chip-float{display:none}.dash-body{grid-template-columns:1fr}.dash{padding:1.1rem;border-radius:22px}}

/* section header layout — asymmetric */
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:2rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head p{color:var(--muted);max-width:46ch;justify-self:end;align-self:end;font-size:1.05rem}
@media(max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head p{justify-self:start}}

/* services: list + hover detail panel */
.services-panel{display:grid;grid-template-columns:minmax(240px,1fr) 1.3fr;gap:clamp(2rem,4vw,4rem);align-items:stretch}
.service-list{display:flex;flex-direction:column}
.service-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:1.1rem;padding:1.3rem .2rem;border-bottom:1px solid var(--border);cursor:pointer;width:100%}
.service-list .service-item:first-child{border-top:1px solid var(--border)}
.service-num{font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.1em;flex-shrink:0;transition:color .3s}
.service-item h3{font-size:1.15rem;font-weight:700;color:var(--muted);transition:color .3s}
.service-arrow{margin-left:auto;display:flex;color:var(--green);opacity:0;transform:translate(-6px,6px);transition:opacity .3s,transform .3s}
.service-item.active .service-num{color:var(--green)}
.service-item.active h3{color:var(--text)}
.service-item.active .service-arrow{opacity:1;transform:translate(0,0)}
.service-detail{position:relative;overflow:hidden;background:linear-gradient(170deg,rgba(20,26,34,.9),rgba(13,17,23,.85));border:1px solid var(--border);border-radius:var(--radius);padding:2.4rem;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;transition:opacity .25s}
.service-detail .top-row{display:flex;align-items:center;gap:.8rem;margin-bottom:auto}
.service-icon{width:44px;height:44px;border-radius:14px;background:rgba(98,240,78,.1);border:1px solid rgba(98,240,78,.3);display:grid;place-items:center;flex-shrink:0}
.service-icon svg{width:22px;height:22px;stroke:var(--green)}
.service-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--border);padding:.4rem .8rem;border-radius:999px}
.service-ghost{position:absolute;top:-.6rem;right:1.2rem;font-family:var(--mono);font-size:9rem;font-weight:700;color:rgba(255,255,255,.035);line-height:1;pointer-events:none;user-select:none}
.service-detail h3{font-size:1.5rem;margin-top:1.4rem}
.service-detail p{color:var(--muted);font-size:.98rem;line-height:1.6;max-width:40ch;margin-top:.6rem}
@media(max-width:860px){
  .services-panel{grid-template-columns:1fr}
  .service-ghost{font-size:6rem}
  .service-detail{min-height:240px}
}

/* why — zig-zag, counters from real page content */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:900px){.why{grid-template-columns:1fr}}
.why-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem;position:relative;overflow:hidden}
.metric::after{content:"";position:absolute;top:0;left:1.6rem;right:1.6rem;height:1px;background:var(--grad);opacity:.5}
.metric strong{font-size:clamp(2rem,3.5vw,2.8rem);display:block;font-family:var(--mono);font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric span{color:var(--muted);font-size:.88rem}
.why-list{display:flex;flex-direction:column;gap:1.4rem;margin-top:2rem}
.why-item{display:flex;gap:1rem;align-items:flex-start}
.why-item .mark{flex:none;width:34px;height:34px;border-radius:11px;background:rgba(98,240,78,.1);border:1px solid rgba(98,240,78,.3);display:grid;place-items:center}
.why-item .mark svg{width:16px;height:16px;stroke:var(--green)}
.why-item p{color:var(--muted);font-size:.95rem;margin-top:.2rem}

/* process timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:1rem;margin-top:1rem}
.timeline::before{content:"";position:absolute;top:21px;left:3%;right:3%;height:2px;background:rgba(180,188,200,.14);border-radius:2px}
.timeline .progress{position:absolute;top:21px;left:3%;height:2px;background:var(--grad);border-radius:2px;width:0;transition:width 2.4s cubic-bezier(.4,0,.2,1)}
.step{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;padding-top:0}
.step .node{width:44px;height:44px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;color:var(--muted);position:relative;z-index:1;transition:border-color .5s,color .5s,box-shadow .5s}
.step.on .node{border-color:var(--green);color:var(--green);box-shadow:0 0 0 4px rgba(98,240,78,.06)}
.step h3{font-size:1rem}
.step p{color:var(--muted);font-size:.83rem;line-height:1.5}
@media(max-width:960px){.timeline{grid-template-columns:1fr;gap:1.6rem}.timeline::before,.timeline .progress{top:0;bottom:0;left:21px;right:auto;width:2px!important;height:auto}.timeline .progress{height:0;transition:height 2.4s cubic-bezier(.4,0,.2,1)}.timeline.done .progress{height:100%}.step{flex-direction:row;align-items:flex-start}.step .node{flex:none}}


/* portfolio */
.portfolio{display:grid;grid-template-columns:1.25fr 1fr;gap:1.1rem;align-items:start}
.folio{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.2,.9,.3,1.1)}
.folio:hover{transform:translateY(-4px);border-color:rgba(180,188,200,.22)}
.folio .shot{aspect-ratio:16/10;background:linear-gradient(150deg,#0D1117,#141A22);display:grid;place-items:center;position:relative;overflow:hidden}
.folio .shot::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(41,168,255,.12),transparent 55%)}
.folio .device{width:78%;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.folio:hover .device{transform:translateY(-8px) scale(1.02)}
.folio .info{padding:1.3rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.folio .info small{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.folio .arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;transition:background .4s,transform .4s}
.folio:hover .arrow{background:var(--grad);transform:rotate(-45deg)}
.folio:hover .arrow svg{stroke:#05070F}
.folio-col{display:flex;flex-direction:column;gap:1.1rem}
@media(max-width:880px){.portfolio{grid-template-columns:1fr}}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem;align-items:stretch}
.quote{background:rgba(20,26,34,.6);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;position:relative;display:flex;flex-direction:column;gap:1.2rem}
.quote::before{content:"“";position:absolute;top:.4rem;right:1.4rem;font-size:5rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.4;line-height:1}
.quote p{color:var(--muted);font-size:.98rem}
.quote .who{display:flex;align-items:center;gap:.9rem;margin-top:auto}
.quote .who .av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:900;color:#05070F;font-size:.9rem}
.quote .who small{display:block;color:var(--muted);font-size:.78rem}

/* faq */
.faq{max-width:820px}
.q{border-bottom:1px solid var(--border)}
.q button{width:100%;background:none;border:none;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem .2rem;font-size:1.08rem;font-weight:700;text-align:left}
.q .plus{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;transition:transform .45s cubic-bezier(.3,1.4,.4,1),background .4s}
.q.open .plus{transform:rotate(135deg);background:rgba(41,168,255,.15)}
.q .a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1)}
.q .a p{color:var(--muted);padding:0 .2rem 1.4rem;font-size:.98rem;max-width:60ch}

/* contact */
.contact{position:relative;overflow:hidden;border-radius:36px;background:linear-gradient(160deg,rgba(20,26,34,.85),rgba(13,17,23,.9));border:1px solid var(--border);padding:clamp(2rem,5vw,4.5rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.contact::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(41,168,255,.18),transparent 65%);top:-260px;right:-160px;pointer-events:none}
.contact::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(98,240,78,.12),transparent 65%);bottom:-220px;left:-120px;pointer-events:none}
@media(max-width:880px){.contact{grid-template-columns:1fr}}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.45rem;font-weight:500}
.field input,.field textarea{width:100%;background:rgba(5,7,15,.6);border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem;color:var(--text);font-family:inherit;font-size:.98rem;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,168,255,.15)}
.field textarea{min-height:120px;resize:vertical}
.wa{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.7rem;padding:.9rem 1.5rem;border-radius:999px;background:rgba(98,240,78,.1);border:1px solid rgba(98,240,78,.35);color:var(--green);font-weight:700;margin-top:1.4rem;transition:background .3s,transform .3s,border-color .25s ease,box-shadow .25s ease}
.wa:hover{background:rgba(98,240,78,.15);transform:translateY(-1px);border-color:rgba(98,240,78,.6);box-shadow:0 4px 18px rgba(98,240,78,.12)}
.contact-info a.mail{font-family:var(--mono);font-size:.95rem;color:var(--blue);border-bottom:1px dashed rgba(41,168,255,.4)}
.form-ok{display:none;padding:1rem 1.2rem;border-radius:14px;background:rgba(98,240,78,.1);border:1px solid rgba(98,240,78,.35);color:var(--green);font-size:.95rem;margin-top:.5rem}

/* footer */
footer{position:relative;z-index:2;padding:3.5rem 0 2.5rem;margin-top:var(--gap)}
.foot-divider{height:1px;background:var(--grad);opacity:.35;margin-bottom:3rem}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot-grid .brand img{height:34px}
.foot-links{display:flex;gap:1.8rem;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.copy{margin-top:2.5rem;font-size:.82rem;color:var(--muted);font-family:var(--mono);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none;filter:none}
}

/* ===== HERO SCROLL-SCRUB ===== */
.hero-scrub{height:320vh;position:relative}
.hero-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;padding-top:6rem;padding-bottom:2rem}
.hero-sticky video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(5,7,15,.88) 0%,rgba(5,7,15,.55) 45%,rgba(5,7,15,.15) 75%),
             linear-gradient(180deg,rgba(5,7,15,.75),transparent 22%,transparent 45%,rgba(5,7,15,.4) 68%,rgba(5,7,15,.75) 86%,rgba(5,7,15,.95) 100%);}
.hero-content{position:relative;z-index:2;max-width:640px;margin-left:clamp(1.25rem,6vw,6rem);
  opacity:calc(1 - var(--p,0)*1.3);
  transform:translateY(calc(var(--p,0)*-60px));
  will-change:opacity,transform}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  opacity:calc(1 - var(--p,0)*4)}
.scroll-hint span{width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--green));display:block;animation:hint 2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scaleY(.6);transform-origin:top}50%{transform:scaleY(1)}}
@media(max-width:980px){.hero-scrub{height:260vh}.hero-sticky{padding-top:5.5rem}.hero-content{margin-left:clamp(1.25rem,4vw,3rem);margin-right:1.25rem}}

/* ===== PORTFOLIO MEDIA (vídeos + carrossel) ===== */
.shot .media,.shot .carousel{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.shot .media{object-fit:cover}
.shot .media.in,.shot .carousel.in{opacity:1}
.folio:hover .shot .media,.folio:hover .shot .carousel{transform:scale(1.02)}
.carousel{overflow:hidden}
.carousel-track{display:flex;height:100%;will-change:transform;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.carousel-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover}

/* ===== CURSOR AMBIENT FX ===== */
/* Not a custom cursor — an ambient light layer (glow + spotlight) that trails the
   pointer, plus proximity-aware lift on nearby cards and a reflection sheen on
   buttons. Built entirely in JS-created elements so nothing exists in the DOM
   (and nothing costs a frame) unless a fine pointer + full motion are present. */
.cursor-fx{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .5s ease}
.cursor-fx.active{opacity:1}
.cursor-fx__spotlight,.cursor-fx__glow{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor-fx__spotlight{width:620px;height:620px;margin:-310px 0 0 -310px;
  background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,.02) 45%,transparent 72%);
  transform:translate3d(var(--sx,-9999px),var(--sy,-9999px),0);
  mix-blend-mode:soft-light}
.cursor-fx__glow{width:220px;height:220px;margin:-110px 0 0 -110px;
  background:radial-gradient(circle,rgba(41,168,255,.9),rgba(41,168,255,0) 70%);
  filter:blur(46px);opacity:.1;
  transform:translate3d(var(--gx,-9999px),var(--gy,-9999px),0);
  mix-blend-mode:screen}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-fx{display:none}}

/* interactive cards: JS sets --lift/--rx/--ry/--prox while the pointer is within ~180px.
   The transform lives on the .card-active compound selector (not the bare class) so its
   specificity ties with — and, by source order, beats — .rv.in{transform:none} from the
   scroll-reveal system further up the file; otherwise revealed cards would silently lose
   the tilt. */
.metric,.quote,.folio,.service-detail{
  transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .4s ease,filter .4s ease}
.metric.card-active,.quote.card-active,.folio.card-active,.service-detail.card-active{
  will-change:transform,filter;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0);
  border-color:rgba(41,168,255,calc(.14 + var(--prox,0) * .4));
  filter:drop-shadow(0 calc(14px + var(--prox,0) * 10px) calc(24px + var(--prox,0) * 20px) rgba(0,0,0,calc(.28 + var(--prox,0) * .14)))}
@media(pointer:coarse),(prefers-reduced-motion:reduce){
  .metric,.quote,.folio,.service-detail{transition:none}
}