@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Space Grotesk',sans-serif;
  background:#030309;
  color:#e8e8f0;
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
abbr{text-decoration:none;border-bottom:1px dashed rgba(120,180,255,.4);cursor:help}

/* ── Variables ──────────────────────────────────────────── */
:root{
  --neon-blue:#3b82f6;
  --neon-violet:#8b5cf6;
  --neon-cyan:#06b6d4;
  --neon-green:#10b981;
  --bg-deep:#030309;
  --bg-card:rgba(255,255,255,.04);
  --bg-card-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.08);
  --border-glow:rgba(59,130,246,.35);
  --text-muted:rgba(232,232,240,.5);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.87,0,.13,1);
  --max-w:1280px;
  --pad-x:clamp(1.5rem,5vw,5rem);
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#030309}
::-webkit-scrollbar-thumb{background:var(--neon-blue);border-radius:2px}

/* ── Custom Cursor ──────────────────────────────────────── */
.cursor{
  position:fixed;
  top:0;left:0;
  width:36px;height:36px;
  border:1.5px solid var(--neon-blue);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,border-color .2s,opacity .3s;
  mix-blend-mode:difference;
}
.cursor-dot{
  position:fixed;
  top:0;left:0;
  width:5px;height:5px;
  background:var(--neon-cyan);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
}
.cursor.is-hovering{
  width:56px;height:56px;
  border-color:var(--neon-violet);
  background:rgba(139,92,246,.1);
}
body:not(.cursor-ready) .cursor,
body:not(.cursor-ready) .cursor-dot{opacity:0}

/* ── Loader ─────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;
  background:var(--bg-deep);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;
  transition:opacity .6s var(--ease-out-expo),visibility .6s;
}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{text-align:center}
.loader__logo{
  font-family:'Space Mono',monospace;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:700;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:2rem;
}
.loader__bar{
  width:200px;
  height:2px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
  margin:0 auto 1rem;
  overflow:hidden;
}
.loader__bar__fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-violet),var(--neon-cyan));
  border-radius:2px;
  transition:width .1s linear;
}
.loader__pct{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  color:var(--text-muted);
  letter-spacing:.15em;
}

/* ── Progress bar ───────────────────────────────────────── */
.progress-bar{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  background:linear-gradient(90deg,var(--neon-blue),var(--neon-violet));
  z-index:9998;
  transform-origin:left;
  pointer-events:none;
}

/* ── NAV ────────────────────────────────────────────────── */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem var(--pad-x);
  z-index:900;
  transition:background .4s,backdrop-filter .4s,border-bottom .4s;
}
.nav.is-scrolled{
  background:rgba(3,3,9,.8);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav__logo{
  font-family:'Space Mono',monospace;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.05em;
  color:#fff;
  display:flex;align-items:baseline;gap:.3rem;
}
.nav__logo span{
  font-size:.7rem;
  font-family:'Space Grotesk',sans-serif;
  font-weight:400;
  color:var(--text-muted);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav__links{
  display:flex;gap:2rem;
}
.nav__link{
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  position:relative;
  transition:color .2s;
}
.nav__link::after{
  content:'';
  position:absolute;
  bottom:-3px;left:0;right:0;
  height:1px;
  background:var(--neon-blue);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease-out-expo);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}

/* burger */
.nav__burger{
  display:none;
  flex-direction:column;gap:5px;
  background:none;border:none;cursor:none;
  padding:.5rem;
}
.nav__burger span{
  display:block;width:24px;height:1.5px;
  background:#fff;
  transition:transform .3s,opacity .3s;
}
.nav__burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile nav */
.mob-nav{
  position:fixed;inset:0;
  background:rgba(3,3,9,.97);
  backdrop-filter:blur(20px);
  z-index:850;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease-out-expo),visibility .4s;
}
.mob-nav.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mob-nav__close{
  position:absolute;top:1.5rem;right:var(--pad-x);
  font-size:1.5rem;background:none;border:none;
  color:var(--text-muted);cursor:none;
  transition:color .2s;
}
.mob-nav__close:hover{color:#fff}
.mob-nav__list{text-align:center}
.mob-nav__list li{margin-bottom:2rem}
.mob-nav__link{
  font-size:clamp(2rem,6vw,3.5rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-muted);
  transition:color .2s;
}
.mob-nav__link:hover{color:#fff}

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero__canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:0;
}
/* neon glow blobs */
.hero__glow{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:1;
}
.hero__glow--1{
  width:60vw;height:60vw;
  top:-20vw;left:-15vw;
  background:radial-gradient(circle,rgba(59,130,246,.18) 0%,transparent 70%);
}
.hero__glow--2{
  width:50vw;height:50vw;
  bottom:-10vw;right:-10vw;
  background:radial-gradient(circle,rgba(139,92,246,.15) 0%,transparent 70%);
}
.hero__glow--3{
  width:40vw;height:40vw;
  top:30%;left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(6,182,212,.1) 0%,transparent 70%);
}
.hero__content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 var(--pad-x);
  max-width:900px;
}
.hero__eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--neon-cyan);
  margin-bottom:1.5rem;
  opacity:0;
  transform:translateY(10px);
}
.hero__title{
  font-size:clamp(4.5rem,12vw,10rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.04em;
  margin-bottom:2rem;
}
.hero__title__line{
  display:block;
  opacity:0;
  transform:translateY(40px);
}
.hero__title__line--accent{
  background:linear-gradient(135deg,var(--neon-blue) 0%,var(--neon-violet) 50%,var(--neon-cyan) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__sub{
  font-size:clamp(.85rem,2vw,1.1rem);
  color:var(--text-muted);
  letter-spacing:.06em;
  margin-bottom:3rem;
  opacity:0;
  transform:translateY(10px);
}
.hero__cta{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  opacity:0;
  transform:translateY(10px);
}
.hero__scroll-hint{
  position:absolute;
  bottom:2.5rem;left:50%;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:0;
  animation:scrollFade 2s 2s ease forwards;
}
.hero__scroll-hint__line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,var(--neon-blue),transparent);
  animation:scrollLine 1.5s 2s infinite;
}
.hero__scroll-hint span{
  font-family:'Space Mono',monospace;
  font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-muted);
}
@keyframes scrollFade{to{opacity:1}}
@keyframes scrollLine{
  0%,100%{transform:scaleY(1);opacity:1}
  50%{transform:scaleY(.5);opacity:.4}
}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 2rem;
  border-radius:3px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:none;
  transition:transform .2s var(--ease-out-expo),box-shadow .2s,background .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;inset:0;
  background:rgba(255,255,255,.06);
  transform:translateX(-100%);
  transition:transform .3s var(--ease-out-expo);
}
.btn:hover::before{transform:translateX(0)}
.btn:hover{transform:translateY(-2px)}
.btn--primary{
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-violet));
  color:#fff;
  box-shadow:0 0 24px rgba(59,130,246,.3);
}
.btn--primary:hover{box-shadow:0 0 40px rgba(59,130,246,.5)}
.btn--ghost{
  border:1px solid var(--border-glow);
  color:var(--neon-blue);
  background:transparent;
}
.btn--ghost:hover{border-color:var(--neon-blue);background:rgba(59,130,246,.06)}
.btn--neon{
  border:1px solid var(--border-glow);
  color:#fff;
  background:var(--bg-card);
  backdrop-filter:blur(8px);
}
.btn--neon:hover{
  border-color:var(--neon-violet);
  box-shadow:0 0 24px rgba(139,92,246,.3);
}
.btn__arrow{font-size:1rem;transition:transform .2s}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}

/* ── Marquee Strip ──────────────────────────────────────── */
.strip{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:.75rem 0;
  background:rgba(255,255,255,.02);
}
.strip__track{
  display:flex;align-items:center;gap:2rem;
  white-space:nowrap;
  animation:marquee 20s linear infinite;
}
.strip__track span{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.strip__dot{color:var(--neon-blue)!important;font-size:.5rem}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ── Service Sections ───────────────────────────────────── */
.service{
  position:relative;
  padding:clamp(5rem,10vh,9rem) var(--pad-x);
  /* SEM overflow:hidden — deixa decos transbordarem */
  border-bottom:1px solid var(--border);
}
.service__bg-layer{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
}
/* alternating accent glow */
.service:not(.service--alt) .service__bg-layer{
  background:
    radial-gradient(ellipse 60% 50% at 10% 50%,rgba(59,130,246,.07) 0%,transparent 70%);
}
.service--alt .service__bg-layer{
  background:
    radial-gradient(ellipse 60% 50% at 90% 50%,rgba(139,92,246,.07) 0%,transparent 70%);
}
.service__container{
  position:relative;
  z-index:3;
  max-width:var(--max-w);
  margin:0 auto;
}
.service__header{
  display:flex;align-items:center;gap:1.5rem;
  margin-bottom:4rem;
}
.service__num{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--neon-blue);
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.2);
  padding:.3rem .7rem;
  border-radius:2px;
}
.service--alt .service__num{
  color:var(--neon-violet);
  background:rgba(139,92,246,.08);
  border-color:rgba(139,92,246,.2);
}
.service__tag{
  font-family:'Space Mono',monospace;
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.service__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,6vw,7rem);
  align-items:start;
}
.service__title{
  font-size:clamp(3.5rem,7vw,7rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.04em;
  margin-bottom:1.5rem;
  color:#fff;
}
.service__title span{
  background:linear-gradient(135deg,var(--neon-blue),var(--neon-violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.service--alt .service__title span{
  background:linear-gradient(135deg,var(--neon-violet),var(--neon-cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.service__tagline{
  font-size:clamp(.85rem,1.5vw,1rem);
  color:var(--text-muted);
  line-height:1.6;
  max-width:28ch;
}
.service__desc{
  font-size:clamp(.9rem,1.5vw,1.05rem);
  line-height:1.8;
  color:rgba(232,232,240,.75);
  margin-bottom:2.5rem;
}

/* feature cards */
.features{
  display:flex;flex-direction:column;gap:1rem;
  margin-bottom:2.5rem;
}
.feature{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1rem 1.25rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:6px;
  backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .3s var(--ease-out-expo);
  opacity:0;
  transform:translateY(20px);
}
.feature.is-visible{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .6s calc(var(--d,0s)) var(--ease-out-expo),
    transform .6s calc(var(--d,0s)) var(--ease-out-expo),
    background .2s,
    border-color .2s;
}
.feature:hover{
  background:var(--bg-card-hover);
  border-color:var(--border-glow);
  transform:translateX(4px);
}
.feature__icon{
  flex-shrink:0;
  width:2.4rem;height:2.4rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(59,130,246,.3);
  border-radius:6px;
  background:rgba(59,130,246,.08);
  color:var(--neon-blue);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.feature:hover .feature__icon{
  border-color:var(--neon-blue);
  background:rgba(59,130,246,.15);
  box-shadow:0 0 12px rgba(59,130,246,.25);
}
.service--alt .feature__icon{
  border-color:rgba(139,92,246,.3);
  background:rgba(139,92,246,.08);
  color:var(--neon-violet);
}
.service--alt .feature:hover .feature__icon{
  border-color:var(--neon-violet);
  background:rgba(139,92,246,.15);
  box-shadow:0 0 12px rgba(139,92,246,.25);
}
.feature__icon svg{width:1.1rem;height:1.1rem;stroke-width:1.75}
.feature h4{
  font-size:.9rem;font-weight:600;
  margin-bottom:.25rem;color:#fff;
}
.feature p{
  font-size:.8rem;color:var(--text-muted);line-height:1.5;
}

/* reveal animations (non-feature) */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s var(--ease-out-expo),transform .7s var(--ease-out-expo);
}
.reveal.is-visible{opacity:1;transform:translateY(0)}
/* scroll horizontal: ativa por is-active na seção pai */
.service.is-active .reveal{opacity:1;transform:translateY(0)}

.reveal-left{
  opacity:0;
  transform:translateX(-50px);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo);
}
.reveal-left.is-visible{opacity:1;transform:translateX(0)}
.service.is-active .reveal-left{opacity:1;transform:translateX(0)}

.reveal-right{
  opacity:0;
  transform:translateX(50px);
  transition:opacity .8s .15s var(--ease-out-expo),transform .8s .15s var(--ease-out-expo);
}
.reveal-right.is-visible{opacity:1;transform:translateX(0)}
.service.is-active .reveal-right{opacity:1;transform:translateX(0)}

.reveal-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease var(--d,0s),transform .6s ease var(--d,0s);
}
.reveal-up.is-visible{opacity:1;transform:translateY(0)}
.service.is-active .reveal-up{opacity:1;transform:translateY(0)}

/* ── Footer ─────────────────────────────────────────────── */
.footer{
  position:relative;
  padding:clamp(4rem,8vh,6rem) var(--pad-x) 3rem;
  overflow:hidden;
  border-top:1px solid var(--border);
}
.footer__glow{
  position:absolute;
  top:-100px;left:50%;
  transform:translateX(-50%);
  width:600px;height:400px;
  background:radial-gradient(ellipse,rgba(59,130,246,.12) 0%,transparent 70%);
  pointer-events:none;
  filter:blur(40px);
}
.footer__inner{
  position:relative;z-index:1;
  max-width:var(--max-w);margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:3rem;
}
.footer__logo{
  font-family:'Space Mono',monospace;
  font-size:1.4rem;font-weight:700;
  display:flex;align-items:baseline;gap:.4rem;
}
.footer__logo span{
  font-size:.7rem;
  font-family:'Space Grotesk',sans-serif;
  color:var(--text-muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:400;
}
.footer__sub{
  font-size:.8rem;color:var(--text-muted);
  margin-top:.4rem;line-height:1.5;
}
.footer__nav{
  display:flex;flex-direction:column;gap:.75rem;
  text-align:center;
}
.footer__nav a{
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--text-muted);
  transition:color .2s;
  text-transform:uppercase;
}
.footer__nav a:hover{color:var(--neon-blue)}
.footer__copy{
  font-size:.7rem;color:var(--text-muted);
  text-align:right;font-family:'Space Mono',monospace;
}

/* ── Service decorations (parallax SVGs) ───────────────── */
.service__deco{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;          /* acima do bg-layer, abaixo do container */
}

/* base para todos os .deco */
.deco{
  position:absolute;
  opacity:.13;
  color:var(--neon-blue);
  transition:opacity .3s;
}
.service--alt .deco{ color:var(--neon-violet) }

/* envelope — canto direito superior */
.deco--envelope{
  width:clamp(160px,22vw,280px);
  right:-2%;
  top:8%;
  opacity:.13;
}

/* ondas de sinal — canto inferior esquerdo */
.deco--signal{
  width:clamp(80px,10vw,130px);
  left:4%;
  bottom:14%;
  opacity:.15;
}

/* @ flutuante — centro-direita baixo */
.deco--at{
  font-family:'Space Mono',monospace;
  font-size:clamp(6rem,14vw,16rem);
  font-weight:700;
  line-height:1;
  right:6%;
  bottom:6%;
  opacity:.08;
  letter-spacing:-.04em;
}

/* servidor rack — esquerda */
.deco--server{
  width:clamp(80px,10vw,130px);
  left:3%;
  top:15%;
  opacity:.13;
}

/* cadeado — direita inferior */
.deco--lock{
  width:clamp(50px,6vw,80px);
  right:6%;
  bottom:18%;
  opacity:.15;
}

/* texto domínio */
.deco--domain{
  font-family:'Space Mono',monospace;
  font-size:clamp(.7rem,1.2vw,1rem);
  letter-spacing:.2em;
  text-transform:lowercase;
  right:5%;
  top:10%;
  opacity:.18;
  white-space:nowrap;
}

/* @ grande — seção 03 */
.deco--at-big{
  font-family:'Space Mono',monospace;
  font-size:clamp(10rem,22vw,26rem);
  font-weight:700;
  line-height:1;
  left:-1%;
  top:50%;
  transform:translateY(-50%);
  opacity:.06;
  letter-spacing:-.04em;
}

/* certificado/doc */
.deco--cert{
  width:clamp(70px,9vw,110px);
  right:5%;
  top:12%;
  opacity:.13;
}

/* shield-check */
.deco--shield-check{
  width:clamp(55px,7vw,90px);
  right:12%;
  bottom:15%;
  opacity:.13;
}

/* lista de email */
.deco--list{
  width:clamp(80px,10vw,130px);
  left:3%;
  top:12%;
  opacity:.13;
}

/* lupa */
.deco--magnify{
  width:clamp(70px,9vw,110px);
  right:5%;
  bottom:14%;
  opacity:.14;
}

/* percentual */
.deco--percent{
  font-family:'Space Mono',monospace;
  font-size:clamp(5rem,11vw,13rem);
  font-weight:700;
  line-height:1;
  right:4%;
  top:8%;
  opacity:.07;
}

/* ── Stats ──────────────────────────────────────────────── */
.service__stats{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-top:2rem;
  padding:1.25rem 1.5rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:6px;
  backdrop-filter:blur(6px);
}
.stat{
  display:flex;flex-direction:column;gap:.2rem;
  text-align:center;
}
.stat__val{
  font-family:'Space Mono',monospace;
  font-size:1.3rem;
  font-weight:700;
  color:#fff;
  line-height:1;
}
.stat__val em{
  font-style:normal;
  font-size:.75rem;
  color:var(--neon-blue);
  margin-left:.1rem;
}
.service--alt .stat__val em{ color:var(--neon-violet) }
.stat__label{
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.stat__divider{
  width:1px;height:2rem;
  background:var(--border);
  flex-shrink:0;
}

/* ── Email Mockup ────────────────────────────────────────── */
.email-mockup{
  background:rgba(10,10,20,.7);
  border:1px solid var(--border-glow);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:2rem;
  backdrop-filter:blur(10px);
  font-family:'Space Mono',monospace;
  font-size:.72rem;
}
.email-mockup__header{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;
  background:rgba(59,130,246,.06);
  border-bottom:1px solid var(--border);
}
.email-mockup__dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.15);
  flex-shrink:0;
}
.email-mockup__addr{
  font-size:.65rem;
  color:var(--text-muted);
  letter-spacing:.06em;
  margin-left:.25rem;
}
.email-mockup__body{ padding:1rem 1.1rem }
.email-mockup__line{
  padding:.25rem 0;
  color:var(--text-muted);
  line-height:1.5;
}
.email-mockup__line--label{ color:rgba(232,232,240,.45) }
.email-mockup__line--label span{ color:var(--neon-cyan) }
.email-mockup__badge{
  display:inline-block;
  font-size:.6rem;
  padding:.1rem .4rem;
  border-radius:3px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.3);
  color:#10b981;
  margin-right:.2rem;
  letter-spacing:.05em;
}
.email-mockup__separator{
  height:1px;
  background:var(--border);
  margin:.4rem 0;
}
.email-mockup__line--subject{
  color:#fff;
  font-size:.8rem;
  padding-top:.4rem;
}
.email-mockup__status{
  display:flex;align-items:center;gap:.5rem;
  margin-top:.6rem;
  font-size:.65rem;
  color:#10b981;
  letter-spacing:.08em;
}
.email-mockup__pulse{
  width:7px;height:7px;border-radius:50%;
  background:#10b981;
  box-shadow:0 0 6px #10b981;
  animation:pulse-dot 1.5s ease infinite;
  flex-shrink:0;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.7)}
}

/* ── Contador ao vivo ───────────────────────────────────── */
.livecounter{
  position:relative;
  padding:clamp(5rem,10vh,8rem) var(--pad-x);
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.livecounter__bg{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,
    rgba(59,130,246,.07) 0%,
    rgba(139,92,246,.04) 50%,
    transparent 100%);
  pointer-events:none;
}
/* linhas de grade sutis ao fundo */
.livecounter::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.35;
  pointer-events:none;
}
.livecounter__inner{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
}
.livecounter__label{
  font-family:'Space Mono',monospace;
  font-size:clamp(.65rem,.9vw,.8rem);
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:1.5rem;
}
.livecounter__display{
  line-height:1;
  margin-bottom:2.5rem;
  /* máscara de brilho nas bordas */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.livecounter__num{
  font-family:'Space Mono',monospace;
  font-size:clamp(2rem,5.5vw,5.5rem);
  font-weight:700;
  letter-spacing:-.02em;
  /* gradiente animado */
  background:linear-gradient(135deg,
    var(--neon-blue) 0%,
    var(--neon-cyan) 40%,
    var(--neon-violet) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation:counter-gradient 3s ease infinite alternate;
  /* glow via text-shadow não funciona com text-fill, usamos filter */
  filter:drop-shadow(0 0 28px rgba(59,130,246,.35));
  display:inline-block;
  min-width:14ch;   /* evita layout shift */
  font-variant-numeric:tabular-nums;
}
@keyframes counter-gradient{
  0%  { background-position:0% 50% }
  100%{ background-position:100% 50% }
}
/* pulso sutil no número a cada "tick" */
.livecounter__num.tick{
  animation:counter-gradient 3s ease infinite alternate,
            counter-tick .12s ease;
}
@keyframes counter-tick{
  0%  { filter:drop-shadow(0 0 28px rgba(59,130,246,.35)) }
  50% { filter:drop-shadow(0 0 54px rgba(6,182,212,.7)) }
  100%{ filter:drop-shadow(0 0 28px rgba(59,130,246,.35)) }
}
.livecounter__meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
}
.livecounter__stat{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.livecounter__stat-val{
  font-family:'Space Mono',monospace;
  font-size:clamp(1rem,2vw,1.4rem);
  font-weight:700;
  color:#fff;
  letter-spacing:-.02em;
}
.livecounter__stat-label{
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
.livecounter__divider{
  width:1px;
  height:2rem;
  background:var(--border);
}

/* ── Divisor de categoria (entre track e hospedagem) ────── */
.category-divider{
  padding:clamp(2.5rem,5vh,4rem) var(--pad-x) clamp(1.5rem,3vh,2.5rem);
  background:var(--bg-deep);
}
.category-divider__inner{
  max-width:var(--max-w);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:1.2rem;
}
.category-divider__line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.category-divider__label{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:'Space Mono',monospace;
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--neon-violet);
  opacity:.7;
  white-space:nowrap;
}
.category-divider__label svg{
  stroke:var(--neon-violet);
  opacity:.8;
}

/* ── Seção standalone (hospedagem — fora do track) ─────── */
.service--standalone{
  /* herda .service mas sem min-height forçado pelo track */
  border-bottom:1px solid var(--border);
}
/* no desktop, ocupar a tela toda como as demais */
@media(min-width:901px){
  .service--standalone{
    min-height:100vh;
  }
}

/* ── Scroll horizontal — wrapper + track ────────────────── */
#services-wrapper{
  position:relative;
  overflow:hidden;
}
#services-track{
  display:flex;
  will-change:transform;
}
#services-track .service{
  flex:0 0 100vw;
  width:100vw;
  min-height:100vh;
  border-bottom:none;
  border-right:1px solid var(--border);
}

/* indicadores de progresso do scroll horizontal */
.hscroll-dots{
  position:fixed;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.6rem;
  z-index:200;
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.hscroll-dots.is-active{ opacity:1 }
.hscroll-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.3);
  transition:background .3s, transform .3s;
}
.hscroll-dot.is-current{
  background:var(--neon-blue);
  transform:scale(1.5);
  box-shadow:0 0 8px var(--neon-blue);
}

/* transições dramáticas — clip-path + scale */
.service__title{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease-out-expo);
}
.service.is-active .service__title{
  clip-path:inset(0 0% 0 0);
}
.service__eyebrow{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.service.is-active .service__eyebrow{
  opacity:1;
  transform:translateY(0);
}
.service__sub,
.service__tagline{
  opacity:0;
  transform:translateY(16px) scale(.97);
  transition:opacity .7s ease .3s, transform .7s ease .3s;
  transform-origin:left center;
}
.service.is-active .service__sub,
.service.is-active .service__tagline{
  opacity:1;
  transform:translateY(0) scale(1);
}
.feature{
  opacity:0;
  transform:translateY(24px) scale(.96);
  filter:blur(4px);
  transition:opacity .5s ease var(--d,.1s),
             transform .5s var(--ease-out-expo) var(--d,.1s),
             filter .5s ease var(--d,.1s);
}
.feature.is-visible, .service.is-active .feature{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  /* no mobile o scroll horizontal vira vertical */
  #services-track{ flex-direction:column }
  #services-track .service{ flex:none; width:100%; min-height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .nav__links{display:none}
  .nav__burger{display:flex}
  .service__deco{display:none}
  .service__stats{gap:1rem;padding:1rem}
  .email-mockup{font-size:.65rem}
  .service__body{grid-template-columns:1fr}
  .footer__inner{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer__copy{text-align:center}
  .footer__nav{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .hscroll-dots{display:none}
  .livecounter__num{font-size:clamp(1.6rem,8vw,3rem);min-width:auto}
  .livecounter__meta{gap:1.2rem}
  .livecounter__divider{display:none}
}
@media(max-width:600px){
  .service__title{font-size:clamp(2.8rem,10vw,4rem);clip-path:none;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  .service.is-active .service__title{opacity:1;transform:translateY(0)}
  .hero__cta{flex-direction:column;align-items:center}
}