*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ============================================================
  VARIÁVEIS GLOBAIS — PAINEL DE CONTROLE
  Mude aqui para refletir em todo o site.
============================================================ */
:root {
  --rosa:       #FF0066;              /* Rosa primário da logo */
  --rosa-suave: rgba(255,0,102,0.14); /* Glow rosado */
  --rosa-borda: rgba(255,0,102,0.28); /* Bordas rosadas */
  --fundo:      #080808;              /* Preto profundo */
  --fundo2:     #0e0e0e;              /* Preto levemente elevado */
  --texto:      #f4f1ee;              /* Off-white quente */
  --texto2:     #686562;              /* Cinza médio */
  --borda:      rgba(244,241,238,0.07);

  --fd: 'Barlow Condensed', sans-serif; /* font-display */
  --fb: 'DM Sans', sans-serif;          /* font-body */

  --hero-size:  clamp(70px, 11.5vw, 148px);
  --h2-size:    clamp(38px, 5.5vw, 76px);
  --body-size:  clamp(14px, 1.1vw, 17px);
  --small-size: 11px;

  --pad: clamp(80px, 10vw, 128px);
  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1380px;

  /* Aliases — seção serviços (layout premium) */
  --bg-color: var(--fundo);
  --surface-color: #121212;
  --text-muted: var(--texto2);
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Partículas do hero (espelho do JS HERO_PARTICLES_CONFIG — pode alinhar manualmente) */
  --hero-particle-color: rgba(255, 0, 102, 0.45);
  --hero-particle-soft: rgba(244, 241, 238, 0.12);
}

html { scroll-behavior: smooth; }

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fb);
  font-size: var(--body-size);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

/* ============================================================
  CURSOR — rastro “nuvem” leve (canvas) + ponto mínimo (js/main.js)
  Ajustar opacidade: .cursor-trail | intensidade no objeto CURSOR_TRAIL no JS
============================================================ */
.cursor-trail {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:9997;
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .cursor-trail{opacity:0;visibility:hidden;}
  body{cursor:auto;}
}
.cur-dot {
  position:fixed;
  width:4px;height:4px;
  margin:-2px 0 0 -2px;
  left:0;top:0;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  background:rgba(255,0,102,.75);
  box-shadow:0 0 4px rgba(255,0,102,.3);
  transition:transform .18s ease,opacity .18s ease;
  will-change:left,top;
}
.cur-dot.is-hover{
  transform:scale(1.35);
  opacity:.95;
}
@media (prefers-reduced-motion:reduce){
  .cur-dot{display:none;}
}


/* ============================================================
  circulo
============================================================ */
.cur-ring {
  position: fixed;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  left: 0; top: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  border: 1px solid rgba(255, 0, 102, 0.35);
  box-shadow: 0 0 5px rgba(255, 0, 102, 0.1);
  transition: transform .3s ease, opacity .3s ease;
  will-change: left, top;
}
.cur-ring.is-hover {
  transform: scale(1.4);
  border-color: rgba(255, 0, 102, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .cur-ring { display: none; }
}

/* ============================================================
  CONTAINER
============================================================ */
.wrap { max-width:var(--maxw);margin:0 auto;padding:0 var(--gut); }

/* ============================================================
  NAVEGAÇÃO
============================================================ */
nav {
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px var(--gut);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled {
  background:rgba(8,8,8,.95);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:15px var(--gut);
  border-bottom-color:var(--borda);
}

/* === LOGO NO NAV — imagem: assets/logo.png (também favicon e marca d’água) */
.nav-logo { display:flex;align-items:center;gap:11px;text-decoration:none; }

.logo-icon {
  width:38px;height:38px;
  flex-shrink:0;
  border-radius:7px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease;
  box-shadow:0 2px 12px rgba(255,0,102,.2);
}
.logo-icon img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nav-logo:hover .logo-icon { transform:rotate(-6deg) scale(1.06); }

.logo-text {
  font-family:var(--fd);
  font-size:21px;font-weight:700;
  letter-spacing:.06em;
  color:var(--texto);
}
.logo-text em { font-style:normal;color:var(--rosa); }

.nav-links { display:flex;align-items:center;gap:34px;list-style:none; }
.nav-links a {
  font-size:var(--small-size);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto2);text-decoration:none;
  transition:color .3s;
}
.nav-links a:hover { color:var(--texto); }

.nav-cta {
  padding:9px 20px !important;
  background:var(--rosa) !important;
  color:#fff !important;border-radius:3px !important;
  transition:opacity .3s !important;
}
.nav-cta:hover { opacity:.84 !important; }

/* ============================================================
  HERO
  Empilhamento: .hero-bg (0) → .hero-particles (1) → marca d'água (0) → .hero-content (2)
  Partículas: desenhadas em canvas (js); não recebem cliques.
============================================================ */
.hero {
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) clamp(60px,8vw,100px);
  position:relative;overflow:hidden;
}

/* Fundo: glow rosa + grade de pontos */
.hero-bg {
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 65% 55% at 78% 18%, rgba(255,0,102,.13) 0%,transparent 60%),
    radial-gradient(ellipse 45% 40% at 18% 82%, rgba(255,0,102,.06) 0%,transparent 55%);
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Partículas (canvas): movimento ambiente no topo + atração pelo rato — js/main.js */
.hero-particles {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  display:block;
  opacity:0.93;
  filter:saturate(1.06) contrast(1.02);
}
.hero-bg::before {
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(244,241,238,.055) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
}
.hero-bg::after {
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,rgba(8,8,8,.65) 65%,var(--fundo) 100%);
}

/* Marca d’água — assets/logo.png (subir .hero-watermark opacity se quiser mais visível) */
.hero-watermark {
  position:absolute;
  top:50%;right:5%;
  transform:translateY(-52%);
  z-index:0;
  width:clamp(280px,38vw,560px);
  opacity:.055;
  pointer-events:none;
}
.hero-watermark-img {
  width:100%;
  height:auto;
  display:block;
  transform:rotate(-8deg);
  filter:saturate(1.05);
}

.hero-content { position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%; }

.hero-eyebrow {
  font-size:var(--small-size);font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--rosa);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
  opacity:0;animation:fu .8s ease .2s forwards;
}
.hero-eyebrow::before { content:'';width:26px;height:1.5px;background:var(--rosa);display:block; }

.hero-title {
  font-family:var(--fd);
  font-size:var(--hero-size);
  font-weight:800;line-height:.9;
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--texto);
  margin-bottom:32px;
  opacity:0;animation:fu .8s ease .35s forwards;
}
/* Rosa itálico */
.hero-title em { font-style:italic;color:var(--rosa); }
/* Texto só contorno (outline) */
.hero-title .ol { -webkit-text-stroke:2px rgba(244,241,238,.22);color:transparent; }

.hero-sub {
  max-width:500px;
  font-size:clamp(14px,1.3vw,19px);font-weight:300;
  color:var(--texto2);line-height:1.78;
  opacity:0;animation:fu .8s ease .5s forwards;
}
.hero-sub strong { color:var(--texto);font-weight:400; }

.hero-foot {
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:44px;
  opacity:0;animation:fu .8s ease .65s forwards;
}

.btn-hero {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  background:var(--rosa);color:#fff;
  font-family:var(--fb);font-size:var(--small-size);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;cursor:none;
  transition:opacity .3s,transform .2s;
}
.btn-hero:hover { opacity:.86;transform:translateY(-2px); }

.scroll-hint {
  font-size:var(--small-size);letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto2);writing-mode:vertical-rl;
  display:flex;align-items:center;gap:8px;
}
.scroll-hint::before {
  content:'';width:1px;height:44px;
  background:linear-gradient(to bottom,var(--rosa),transparent);display:block;
}

/* ============================================================
  MARQUEE
============================================================ */
.mq-wrap {
  border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  padding:17px 0;overflow:hidden;white-space:nowrap;
  background:var(--fundo2);
}
.mq-track { display:inline-flex;animation:mq 28s linear infinite; }
.mq-wrap:hover .mq-track { animation-play-state:paused; }
.mq-item {
  display:inline-flex;align-items:center;gap:18px;padding:0 18px;
  font-family:var(--fd);font-size:clamp(12px,1.1vw,15px);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto2);
}
.mq-item::before { content:'◆';color:var(--rosa);font-size:7px; }

/* ============================================================
  PROPOSTA DE VALOR
============================================================ */
.val-sec { padding:var(--pad) var(--gut); }
.val-in {
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:220px 1fr;gap:80px;align-items:start;
}
.sec-tag {
  font-size:var(--small-size);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa);display:block;margin-bottom:10px;
}
.sec-lbl { font-size:var(--small-size);letter-spacing:.12em;text-transform:uppercase;color:var(--texto2); }
.val-txt {
  font-family:var(--fd);font-size:var(--h2-size);
  font-weight:700;line-height:1.05;text-transform:uppercase;color:var(--texto);
}
.val-txt em { font-style:italic;color:var(--rosa); }

/* Text shatter effect */
.val-txt .shatter-char {
  display:inline-block;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  will-change:transform,opacity;
}
.val-txt .shatter-char.is-space {
  width:.3em;
}

/* Flutuação contínua quando espalhadas */
@keyframes shatterFloat {
  0%   { translate: 0 0; rotate: 0deg; }
  25%  { translate: var(--float-x) calc(var(--float-y) * -1); rotate: var(--float-r); }
  50%  { translate: calc(var(--float-x) * -0.6) var(--float-y); rotate: calc(var(--float-r) * -0.5); }
  75%  { translate: calc(var(--float-x) * 0.8) calc(var(--float-y) * -0.4); rotate: calc(var(--float-r) * 0.7); }
  100% { translate: 0 0; rotate: 0deg; }
}

.val-txt.is-shattered .shatter-char {
  transform: translate(var(--sx,0), var(--sy,0)) rotate(var(--sr,0deg)) scale(var(--ss,1));
  opacity: var(--so,.3);
  animation: shatterFloat var(--float-dur, 3s) ease-in-out var(--float-delay, 0s) infinite;
}

/* ============================================================
  SERVIÇOS — grid premium + revelação máscara + visuais animados
  PERSONALIZAR:
  - Espaçamento vertical: padding em .services
  - Largura mínima dos cards: minmax(…px, 1fr) em .services-grid
  - Altura do bloco visual: .service-visual { height: … }
  - Vidro / brilho: border, box-shadow, .service-visual::before
============================================================ */
.services {
  padding:15vh 0;
  background-color:var(--bg-color);
  border-top:1px solid var(--borda);
}
.services .container {
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
}
.services-header {
  margin-bottom:8rem;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
}
.services-header-cta {
  font-size:var(--small-size);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--texto2);
  text-decoration:none;
  white-space:nowrap;
  transition:color .3s;
}
.services-header-cta:hover { color:var(--rosa); }

.section-title {
  font-family:var(--fd);
  font-size:clamp(3rem,7vw,9rem);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.04em;
  margin-bottom:0;
  color:var(--texto);
  text-align:left;
}
.section-subtitle {
  font-size:clamp(1.1rem,2vw,2rem);
  color:var(--text-muted);
  max-width:800px;
  line-height:1.4;
  font-weight:300;
  text-align:left;
  margin-top:2rem;
}

.section-reveal { opacity:0; transform:translateY(36px); transition:opacity .75s ease, transform .75s var(--reveal-ease); }
.section-reveal.visible { opacity:1; transform:translateY(0); }

.mask-wrap { overflow:hidden; display:block; }
.section-reveal .mask-inner {
  display:block;
  transform:translateY(108%);
  transition:transform .85s var(--reveal-ease);
}
.section-reveal.visible .mask-inner { transform:translateY(0); }
.section-reveal.visible .mask-inner.d-1 { transition-delay:.12s; }
.section-reveal.visible .mask-inner.d-2 { transition-delay:.22s; }

.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:clamp(2.5rem,4vw,4rem);
}

.service-card {
  background-color:transparent;
  border-radius:0;
  overflow:visible;
}
.service-card.tech-card .service-visual {
  border-color:rgba(255,0,102,.18);
  box-shadow:
    inset 0 0 24px rgba(255,0,102,.06),
    inset 0 0 20px rgba(0,0,0,.5),
    0 12px 40px rgba(0,0,0,.55);
}

/* Vidro escuro + brilho interno (alinhado ao snippet React / ServicesSection.css) */
.service-visual {
  height:clamp(320px,42vw,400px);
  width:100%;
  background-color:var(--surface-color);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,0,102,.08) 0%, transparent 55%);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 20px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
  transition:transform .6s var(--reveal-ease), filter .6s ease, border-color .6s ease, box-shadow .6s ease;
  will-change:transform;
  cursor:none;
}
.service-visual::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.04) 0%, transparent 42%, transparent 100%);
  opacity:.9;
  z-index:2;
}
.service-card:hover .service-visual {
  transform:scale(.98);
  filter:brightness(1.15);
  border-color:rgba(255,0,128,.35);
  box-shadow:
    inset 0 0 28px rgba(255,0,102,.05),
    inset 0 0 20px rgba(0,0,0,.45),
    0 14px 36px rgba(0,0,0,.55);
}
.service-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  transition:transform 0.8s var(--reveal-ease);
  will-change:transform;
}
.service-card:hover .service-img {
  transform:scale(1.08);
}

/* Entrada suave (classe do teu código React: scale-blur) */
.section-reveal:not(.visible) .scale-blur {
  opacity:.92;
  filter:saturate(.95) blur(1px);
  transform:scale(.985);
}
.section-reveal.visible .scale-blur {
  opacity:1;
  filter:none;
  transform:scale(1);
  transition:opacity .7s ease, filter .7s ease, transform .7s var(--reveal-ease);
}

.service-content { padding:2rem 0; }
.service-content h3 {
  font-family:var(--fd);
  font-size:2.2rem;
  font-weight:600;
  letter-spacing:-.02em;
  margin-bottom:1rem;
  color:var(--texto);
}
.service-content p {
  color:var(--text-muted);
  font-size:1.1rem;
  line-height:1.6;
  max-width:90%;
}

.placeholder-visual {
  background:linear-gradient(135deg,#0a0a0a,#1a1a1a);
}
.placeholder-design { background:linear-gradient(135deg,#0d0a0c,#151012 40%,#0a0a0a); }
.placeholder-web { background:linear-gradient(135deg,#0a0c0f,#101418 45%,#080a0c); }
.placeholder-ai { background:linear-gradient(135deg,#0a0c0a,#0f1410 40%,#080a08); }

.placeholder-text {
  color:var(--text-muted);
  font-family:ui-monospace,monospace;
  opacity:.35;
  font-size:clamp(.85rem,2vw,1.35rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}

/* Ícones ilustrados nos placeholders (substituível por <img>) */
.ph-viz {
  position:relative;
  z-index:1;
  width:min(72%,220px);
  max-height:200px;
  margin:auto;
}
.ph-viz svg {
  width:100%;
  height:auto;
  display:block;
  opacity:.95;
}

/* ─── IDE animado — card “Criação de Sites”
   PERSONALIZAR: textos em index.html dentro de .ide-mock;
   cores das “keywords”: .ide-kw, .ide-attr, .ide-str; velocidade: animation-duration
─── */
.ph-viz-web {
  width:min(92%,300px);
  max-height:none;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:clamp(7px,1.45vw,9px);
}
.ide-mock {
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,0,102,.24);
  background:linear-gradient(168deg,#0e1218 0%,#080b0f 48%,#0a0e14 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 14px 44px rgba(0,0,0,.5),
    0 0 40px rgba(255,0,102,.06);
  animation:ide-frame-glow 6s ease-in-out infinite;
}
@keyframes ide-frame-glow {
  0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),0 14px 44px rgba(0,0,0,.5),0 0 32px rgba(255,0,102,.05);}
  50%{box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08),0 16px 48px rgba(0,0,0,.55),0 0 48px rgba(255,0,102,.1);}
}
.ide-titlebar {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  background:linear-gradient(180deg,rgba(255,0,102,.1),rgba(255,0,102,.03));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ide-traffic{display:flex;gap:5px;flex-shrink:0;}
.ide-traffic span{width:7px;height:7px;border-radius:50%;}
.ide-traffic-r{background:#ff5f57;}
.ide-traffic-y{background:#febc2e;}
.ide-traffic-g{background:#28c840;}
.ide-filename{
  flex:1;
  text-align:center;
  color:rgba(244,241,238,.42);
  letter-spacing:.04em;
  font-size:1em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ide-spark{
  width:5px;height:5px;border-radius:50%;
  background:var(--rosa);
  flex-shrink:0;
  animation:ide-spark 2.2s ease-in-out infinite;
}
@keyframes ide-spark{
  0%,100%{opacity:.35;transform:scale(1);}
  50%{opacity:1;transform:scale(1.35);}
}
.ide-body{display:flex;min-height:clamp(104px,28vw,128px);}
.ide-sidebar{
  width:44px;flex-shrink:0;
  padding:8px 7px;
  border-right:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.32);
}
.ide-sb-label{
  font-size:.85em;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(244,241,238,.22);
  margin-bottom:7px;
}
.ide-file{
  height:5px;border-radius:2px;
  background:rgba(244,241,238,.07);
  margin-bottom:5px;
}
.ide-file-on{
  background:linear-gradient(90deg,var(--rosa),rgba(255,0,102,.25));
  animation:ide-file-pulse 2.6s ease-in-out infinite;
}
@keyframes ide-file-pulse{0%,100%{opacity:.72;}50%{opacity:1;}}
.ide-editor{
  flex:1;
  padding:8px 10px 10px 5px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ide-row{
  display:flex;
  align-items:flex-start;
  gap:7px;
  line-height:1.4;
}
.ide-n{
  width:11px;flex-shrink:0;
  text-align:right;
  color:rgba(244,241,238,.18);
  font-variant-numeric:tabular-nums;
}
.ide-row-focus{
  margin:0 -4px;
  padding:4px 5px 4px 4px;
  border-radius:5px;
  background:rgba(255,0,102,.07);
  border:1px solid rgba(255,0,102,.12);
  animation:ide-row-glow 3.2s ease-in-out infinite;
}
.ide-row-focus .ide-n{color:var(--rosa);opacity:.85;}
@keyframes ide-row-glow{
  0%,100%{background:rgba(255,0,102,.06);border-color:rgba(255,0,102,.1);}
  50%{background:rgba(255,0,102,.1);border-color:rgba(255,0,102,.18);}
}
.ide-code-line{
  flex:1;
  min-width:0;
  color:rgba(244,241,238,.52);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ide-kw{color:rgba(255,0,102,.78);}
.ide-attr{color:#8ec8ff;}
.ide-str{color:#b8e986;}
.ide-plain{color:rgba(244,241,238,.38);}
.ide-caret{
  display:inline-block;
  width:2px;height:10px;
  margin-left:2px;
  vertical-align:-1px;
  background:var(--rosa);
  border-radius:1px;
  animation:ide-caret-blink 1.05s steps(1,end) infinite;
}
@keyframes ide-caret-blink{0%,45%{opacity:1;}50%,100%{opacity:0;}}
.ide-status{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  font-size:.85em;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(244,241,238,.26);
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.35);
}
.ide-status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--rosa);
  animation:ide-dot 1.5s ease-in-out infinite;
}
@keyframes ide-dot{
  0%,100%{opacity:.45;box-shadow:none;}
  50%{opacity:1;box-shadow:0 0 8px var(--rosa);}
}
.ide-status-sep{opacity:.3;}

.placeholder-hint {
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  opacity:.28;
  white-space:nowrap;
  pointer-events:none;
}

/* ——— Visuais animados (Marketing / Tráfego / Tech) ——— */
.viz { position:absolute; inset:0; pointer-events:none; }
.viz-marketing .bars {
  display:flex; align-items:flex-end; justify-content:center;
  gap:10px; height:140px; position:relative; z-index:1;
}
.viz-marketing .bar {
  width:14px; border-radius:4px;
  background:linear-gradient(180deg,var(--rosa),rgba(255,0,102,.25));
  transform-origin:bottom;
  animation:vizBar 2.4s ease-in-out infinite;
}
.viz-marketing .bar:nth-child(1){height:38%;animation-delay:0s}
.viz-marketing .bar:nth-child(2){height:72%;animation-delay:.15s}
.viz-marketing .bar:nth-child(3){height:52%;animation-delay:.3s}
.viz-marketing .bar:nth-child(4){height:88%;animation-delay:.08s}
.viz-marketing .bar:nth-child(5){height:45%;animation-delay:.22s}
.viz-marketing .ring {
  position:absolute; left:50%; top:50%;
  width:280px; height:280px; margin:-140px 0 0 -140px;
  border:1px solid rgba(255,0,102,.15); border-radius:50%;
  animation:vizRing 5s linear infinite;
}
.viz-marketing .ring.r2 { width:200px; height:200px; margin:-100px 0 0 -100px; animation-duration:3.5s; opacity:.5; }

.viz-traffic .lane {
  position:absolute; bottom:0; left:0; right:0; height:100%;
  background:repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(255,255,255,.03) 48px,rgba(255,255,255,.03) 49px);
}
.viz-traffic .orb {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--rosa);
  box-shadow:0 0 14px var(--rosa);
  animation:vizOrb 3.2s ease-in-out infinite;
}
.viz-traffic .orb:nth-child(2){left:18%;animation-delay:.4s;animation-duration:2.8s}
.viz-traffic .orb:nth-child(3){left:42%;animation-delay:.9s;width:8px;height:8px}
.viz-traffic .orb:nth-child(4){left:62%;animation-delay:.2s;animation-duration:3.6s}
.viz-traffic .orb:nth-child(5){left:82%;animation-delay:.65s}
.viz-traffic .curve {
  position:absolute; left:8%; right:8%; bottom:18%;
  height:120px;
  border:2px solid transparent;
  border-top-color:rgba(255,0,102,.35);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  opacity:.85;
}

.viz-tech .grid-bg {
  position:absolute; inset:-40%;
  background-image:
    linear-gradient(rgba(255,0,102,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,0,102,.07) 1px,transparent 1px);
  background-size:36px 36px;
  animation:vizGrid 18s linear infinite;
}
.viz-tech .node {
  position:absolute; width:8px; height:8px; border-radius:2px;
  background:var(--rosa);
  box-shadow:0 0 16px rgba(255,0,102,.45);
  animation:vizNode 2.5s ease-in-out infinite;
}
.viz-tech .node:nth-child(2){left:22%;top:38%;animation-delay:.3s}
.viz-tech .node:nth-child(3){left:50%;top:28%;animation-delay:.6s}
.viz-tech .node:nth-child(4){left:72%;top:48%;animation-delay:.15s}
.viz-tech .node:nth-child(5){left:38%;top:62%;animation-delay:.45s}
.viz-tech svg.hud {
  position:relative; z-index:2; width:min(88%,320px); height:auto;
  opacity:.9;
}

@keyframes vizBar {
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(1.18)}
}
@keyframes vizRing {
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes vizOrb {
  0%{transform:translateY(120%) scale(.6);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateY(-140%) scale(1);opacity:0}
}
@keyframes vizGrid {
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes vizNode {
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.25)}
}

/* ============================================================
  CASES / PROJETOS
============================================================ */
.cs-sec { padding:var(--pad) var(--gut);border-top:1px solid var(--borda); }
.cs-hd {
  max-width:var(--maxw);margin:0 auto 56px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
}
.cs-ttl { font-family:var(--fd);font-size:var(--h2-size);font-weight:800;text-transform:uppercase;color:var(--texto);line-height:1; }
.cs-sub { font-size:var(--small-size);color:var(--texto2);letter-spacing:.08em;max-width:300px;text-align:right;line-height:1.75; }
.cs-list { max-width:var(--maxw);margin:0 auto; }

.cs-item {
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:40px;
  padding:30px 0;border-bottom:1px solid var(--borda);
  text-decoration:none;color:inherit;
  position:relative;transition:padding-left .4s;cursor:none;
}
.cs-item::after {
  content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:3px;height:0;
  background:var(--rosa);transition:height .35s;border-radius:2px;
}
.cs-item:hover { padding-left:18px; }
.cs-item:hover::after { height:55%; }

.cs-name {
  font-family:var(--fd);font-size:clamp(24px,3.5vw,50px);
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--texto);transition:color .3s;
}
.cs-item:hover .cs-name { color:var(--rosa); }

.cs-tag {
  display:inline-block;padding:5px 13px;
  background:var(--rosa-suave);border:1px solid var(--rosa-borda);
  border-radius:2px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rosa);white-space:nowrap;
  transition:background .3s;
}
.cs-item:hover .cs-tag { background:rgba(255,0,102,.2); }

.cs-yr { font-size:var(--small-size);color:var(--texto2);letter-spacing:.1em; }

/* Preview de imagem ao hover */
.cs-prev {
  position:fixed;width:276px;height:183px;border-radius:4px;overflow:hidden;
  pointer-events:none;z-index:50;opacity:0;
  transform:scale(.9) rotate(-1deg);
  transition:opacity .3s,transform .3s;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px var(--rosa-borda);
}
.cs-prev.on { opacity:1;transform:scale(1) rotate(0); }
.cs-prev img { width:100%;height:100%;object-fit:cover; }

/* ============================================================
  RESULTADOS / MÉTRICAS
============================================================ */
.st-sec {
  padding:var(--pad) var(--gut);border-top:1px solid var(--borda);
  position:relative;overflow:hidden;
}
.st-sec::before {
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse,rgba(255,0,102,.08) 0%,transparent 70%);
  pointer-events:none;
}
.st-grid {
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--borda);border:1px solid var(--borda);position:relative;
}
.st-item { padding:46px 34px;background:var(--fundo);transition:background .3s; }
.st-item:hover { background:rgba(255,0,102,.04); }
.st-num {
  font-family:var(--fd);font-size:clamp(42px,5.5vw,70px);
  font-weight:800;line-height:1;color:var(--rosa);
  display:block;margin-bottom:12px;
}
.st-lbl { font-size:13px;font-weight:300;color:var(--texto2);line-height:1.65; }

/* ============================================================
  DEPOIMENTOS
============================================================ */
.dp-sec { padding:var(--pad) var(--gut);border-top:1px solid var(--borda); }
.dp-in { max-width:var(--maxw);margin:0 auto; }
.dp-ttl {
  font-family:var(--fd);font-size:var(--h2-size);font-weight:800;
  text-transform:uppercase;color:var(--texto);margin-bottom:56px;line-height:1;
}
.dp-ttl em { font-style:italic;color:var(--rosa); }
.dp-grid {
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--borda);border:1px solid var(--borda);
}
.dp-item { padding:50px 42px;background:var(--fundo);position:relative; }
.dp-item::before {
  content:'"';position:absolute;top:28px;right:36px;
  font-family:var(--fd);font-size:76px;font-weight:800;
  color:var(--rosa);opacity:.1;line-height:1;
}
.dp-q { font-size:clamp(15px,1.6vw,20px);font-weight:300;color:var(--texto);line-height:1.65;margin-bottom:32px; }
.dp-q strong { color:var(--rosa);font-weight:400; }
.dp-div { width:30px;height:1px;background:var(--rosa-borda);margin-bottom:20px; }
.dp-au { font-size:var(--small-size);letter-spacing:.1em;text-transform:uppercase;color:var(--texto2); }
.dp-au strong { color:var(--texto);display:block;font-weight:500;margin-bottom:3px;font-size:12px; }

/* ============================================================
  SEÇÃO PARTÍCULAS — NEXULEADS BRAND
============================================================ */
.brand-particles-sec {
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--fundo);
  border-top:1px solid var(--borda);
  border-bottom:1px solid var(--borda);
  cursor:none; /* Ensure we use custom cursor here too if needed, or default canvas pointer */
}
.brand-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:auto;
}
.brand-text-wrap {
  display:none !important;
}

/* ============================================================
  CTA FINAL
============================================================ */
.cta-sec {
  padding:var(--pad) var(--gut);border-top:1px solid var(--borda);
  position:relative;overflow:hidden;
}
.cta-sec::before {
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:480px;height:480px;
  background:radial-gradient(circle,rgba(255,0,102,.1) 0%,transparent 70%);
  pointer-events:none;
}
.cta-in {
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:center;position:relative;
}
.cta-txt {
  font-family:var(--fd);font-size:var(--h2-size);font-weight:800;
  text-transform:uppercase;line-height:1.0;color:var(--texto);
}
.cta-txt em { font-style:italic;color:var(--rosa); }
.cta-fa { display:flex;flex-direction:column;gap:26px; }
.cta-desc { font-size:var(--body-size);font-weight:300;color:var(--texto2);line-height:1.78; }
.cta-btns { display:flex;flex-wrap:wrap;gap:13px; }

.btn-p {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;background:var(--rosa);color:#fff;
  font-family:var(--fb);font-size:var(--small-size);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;cursor:none;
  transition:opacity .3s,transform .2s;
}
.btn-p:hover { opacity:.86;transform:translateY(-1px); }

.btn-s {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;background:transparent;color:var(--texto);
  font-family:var(--fb);font-size:var(--small-size);
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--borda);border-radius:3px;cursor:none;
  transition:border-color .3s,background .3s;
}
.btn-s:hover { border-color:var(--rosa);background:var(--rosa-suave); }

/* ============================================================
  FOOTER
============================================================ */
footer { padding:42px var(--gut);border-top:1px solid var(--borda); }
.ft-in {
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.ft-logo { display:flex;align-items:center;gap:10px;text-decoration:none; }
.ft-logo-ico {
  width:28px;height:28px;
  border-radius:5px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 8px rgba(255,0,102,.15);
}
.ft-logo-ico img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ft-logo-txt {
  font-family:var(--fd);font-size:17px;font-weight:700;
  letter-spacing:.06em;color:var(--texto2);
}
.ft-links { display:flex;gap:26px;list-style:none; }
.ft-links a {
  font-size:var(--small-size);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto2);text-decoration:none;transition:color .3s;
}
.ft-links a:hover { color:var(--rosa); }
.ft-copy { font-size:var(--small-size);color:var(--texto2);opacity:.4; }

/* ============================================================
  ANIMAÇÕES
============================================================ */
@keyframes fu { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.fade-up { opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease; }
.fade-up.visible { opacity:1;transform:translateY(0); }
.fade-up:nth-child(2){transition-delay:.1s}
.fade-up:nth-child(3){transition-delay:.2s}
.fade-up:nth-child(4){transition-delay:.3s}

/* Grain de fundo */
.grain {
  position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
  HAMBURGER MENU
============================================================ */
.nav-hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;height:36px;
  background:none;border:none;cursor:pointer;
  padding:6px;z-index:110;
}
.hamburger-line {
  display:block;
  width:100%;height:2px;
  background:var(--texto);
  border-radius:2px;
  transition:transform .35s ease, opacity .25s ease;
  transform-origin:center;
}
/* Animação X quando aberto */
.nav-hamburger.open .hamburger-line:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}
.nav-hamburger.open .hamburger-line:nth-child(2) {
  opacity:0;
}
.nav-hamburger.open .hamburger-line:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}

/* ============================================================
  RESPONSIVIDADE
============================================================ */

/* ──── Touch devices: restaura cursor normal ──── */
@media (hover:none) and (pointer:coarse) {
  body { cursor:auto; }
  .cursor-trail, .cur-dot, .cur-ring, .cs-prev { display:none !important; }
  .btn-hero, .btn-p, .btn-s, .service-visual, .cs-item { cursor:pointer; }
}

/* ──── Tablet landscape ──── */
@media(max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .st-grid{grid-template-columns:repeat(2,1fr)}
  .dp-grid{grid-template-columns:1fr}
}

/* ──── Tablet / Pequenos laptops ──── */
@media(max-width:900px){
  .nav-hamburger{display:flex}

  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    position:fixed;
    inset:0;
    background:rgba(8,8,8,.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    z-index:105;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;
  }
  .nav-links.open{
    opacity:1;
    pointer-events:auto;
  }
  .nav-links a{
    font-size:16px !important;
    letter-spacing:.18em;
    color:var(--texto) !important;
  }
  .nav-links .nav-cta{
    margin-top:12px;
    padding:14px 32px !important;
    font-size:13px !important;
  }

  .val-in{grid-template-columns:1fr;gap:28px}
  .cta-in{grid-template-columns:1fr;gap:44px}
  .cs-hd{flex-direction:column;align-items:flex-start}
  .cs-sub{text-align:left}
  .cs-item{grid-template-columns:1fr auto;gap:14px}
  .cs-yr{display:none}
  .ft-in{flex-wrap:wrap;gap:24px}
  .ft-links{flex-wrap:wrap}

  .services-header{margin-bottom:5rem}
  .dp-item{padding:36px 28px}
}

/* ──── Mobile grande ──── */
@media(max-width:768px){
  .services-grid{grid-template-columns:1fr}
  .service-visual{height:clamp(260px,65vw,360px)}

  .cta-txt{font-size:clamp(32px,8vw,52px)}
  .cta-in{gap:32px}

  .dp-ttl{margin-bottom:36px}

  .st-item{padding:32px 22px}

  .services-header{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:4rem;
    gap:1.2rem;
  }
  .section-title{font-size:clamp(2.4rem,9vw,5rem)}
  .section-subtitle{font-size:clamp(1rem,3vw,1.4rem);margin-top:1rem}
}

/* ──── Mobile ──── */
@media(max-width:600px){
  :root{
    --pad:clamp(48px,10vw,80px);
    --gut:clamp(16px,5vw,28px);
  }

  .st-grid{grid-template-columns:1fr 1fr}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  .scroll-hint{display:none}

  .hero-title{margin-bottom:22px}
  .hero-sub{font-size:clamp(13px,3.8vw,16px)}

  .cs-name{font-size:clamp(20px,5.5vw,32px)}
  .cs-item{gap:10px;padding:22px 0}
  .cs-tag{font-size:9px;padding:4px 10px}

  .dp-q{font-size:clamp(14px,3.8vw,17px)}
  .dp-item{padding:28px 20px}
  .dp-item::before{font-size:52px;top:16px;right:18px}

  .cta-desc{font-size:clamp(13px,3.5vw,15px)}
  .cta-btns{flex-direction:column;width:100%}
  .btn-p,.btn-s{width:100%;justify-content:center;text-align:center}

  .ft-in{flex-direction:column;align-items:flex-start;gap:20px}

  .mq-item{padding:0 12px;font-size:clamp(10px,2.8vw,13px)}
}

/* ──── Mobile muito pequeno (320-400px) ──── */
@media(max-width:420px){
  .hero{padding-bottom:clamp(36px,8vw,60px)}
  .hero-eyebrow{font-size:9px;letter-spacing:.16em}

  .st-grid{grid-template-columns:1fr}
  .st-num{font-size:clamp(34px,10vw,48px)}
  .st-item{padding:28px 18px}

  .service-visual{height:clamp(220px,60vw,300px)}
  .service-content h3{font-size:1.6rem}
  .service-content p{font-size:.95rem;max-width:100%}

  .cs-item{grid-template-columns:1fr;gap:8px}
  .cs-tag{align-self:flex-start}

  .dp-grid{border:none;gap:12px;background:transparent}
  .dp-item{border:1px solid var(--borda);border-radius:8px}

  .btn-hero{padding:12px 22px;font-size:10px;width:100%;justify-content:center}
}



/* ============================================================ */
/* CSS IMPORTADO DO PROBLEMA-CALCULADORA */
/* ============================================================ */
/* Variaveis da Calculadora */
:root {
            --bg-vault: #080808;
            --text-white: #f4f1ee;
            --text-white-70: rgba(244, 241, 238, 0.7);
            --text-white-60: rgba(244, 241, 238, 0.6);
            --text-white-55: rgba(244, 241, 238, 0.55);
            --text-white-50: rgba(244, 241, 238, 0.5);
            --text-white-45: rgba(244, 241, 238, 0.45);
            --text-white-40: rgba(244, 241, 238, 0.4);
            --danger: #FF0066;
            --danger-light: rgba(255, 0, 102, 0.7);
            --neon: #FF0066;
            --cyan: #ff4488;
            --border-light: rgba(244, 241, 238, 0.07);
        }

/* ===== SEÇÃO PROBLEMA ===== */
        .section-problem {
            position: relative;
            padding: 6rem 0;
            overflow: hidden;
        }

        .section-problem::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--bg-vault);
            z-index: -2;
        }

        .section-problem::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 50% 40% at 80% 20%, rgba(255, 0, 102, 0.18), transparent 70%), 
                        radial-gradient(ellipse 60% 40% at 10% 80%, rgba(255, 0, 102, 0.12), transparent 70%);
            opacity: 0.3;
            pointer-events: none;
            z-index: -1;
        }

        .problem-header {
            max-width: 48rem;
            margin-bottom: 3.5rem;
        }

        .problem-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border-radius: 9999px;
            border: 1px solid rgba(255, 0, 102, 0.4);
            background: rgba(255, 0, 102, 0.1);
            padding: 0.375rem 0.75rem;
            margin-bottom: 1.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--danger-light);
            animation: fadeInUp 0.5s ease-out;
        }

        .problem-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: clamp(2.2rem, 5.5vw, 4.2rem);
            font-weight: 800;
            line-height: 0.95;
            text-transform: uppercase;
            margin-bottom: 1.25rem;
            animation: fadeInUp 0.7s ease-out 0.1s both;
        }

        .problem-title .danger {
            color: var(--danger);
        }

        .problem-desc {
            color: var(--text-white-70);
            font-size: 1.125rem;
            max-width: 42rem;
            animation: fadeInUp 0.6s ease-out 0.2s both;
        }

        .problem-desc .danger {
            color: var(--danger);
            font-weight: 600;
        }

        .pain-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.25rem;
            margin-bottom: 4rem;
        }

        .pain-card {
            position: relative;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-light);
            border-radius: 1rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
            animation: fadeInUp 0.55s ease-out both;
        }

        .pain-card:nth-child(1) { animation-delay: 0.3s; }
        .pain-card:nth-child(2) { animation-delay: 0.38s; }
        .pain-card:nth-child(3) { animation-delay: 0.46s; }
        .pain-card:nth-child(4) { animation-delay: 0.54s; }

        .pain-card:hover {
            border-color: rgba(255, 0, 102, 0.4);
        }

        .pain-card::after {
            content: attr(data-tag);
            position: absolute;
            top: -0.75rem;
            right: 1rem;
            font-size: 0.625rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--danger);
            background: var(--bg-vault);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
        }

        .pain-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            border-radius: 0.75rem;
            background: rgba(255, 0, 102, 0.1);
            border: 1px solid rgba(255, 0, 102, 0.3);
            color: var(--danger);
            font-size: 1.5rem;
        }

        .pain-title {
            margin-top: 1.25rem;
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-white);
        }

        .pain-desc {
            margin-top: 0.5rem;
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.65);
            line-height: 1.5;
        }

        .stat-band {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            border: 1px solid rgba(255, 0, 102, 0.2);
            background: rgba(255, 255, 255, 0.05);
            padding: 2rem 3rem;
            animation: fadeInUp 0.7s ease-out 0.4s both;
        }

        .stat-band::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 50%, rgba(255, 0, 102, 0.2), transparent 60%);
            opacity: 0.3;
            pointer-events: none;
        }

        .stat-band-content {
            position: relative;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2.5rem;
            align-items: center;
        }

        .stat-item {
            flex: 1;
        }

        .stat-label {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--text-white-50);
            margin-bottom: 0.75rem;
        }

        .stat-value {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: clamp(3rem, 8vw, 6rem);
            line-height: 1;
            color: var(--danger);
            font-weight: 800;
        }

        .stat-subtext {
            margin-top: 0.5rem;
            color: var(--text-white-60);
            font-size: 0.875rem;
        }

        .stat-details {
            display: grid;
            gap: 1.5rem;
        }

        .stat-detail-row {
            display: flex;
            flex-direction: column;
        }

        .stat-detail-label {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-white-45);
            margin-bottom: 0.25rem;
        }

        .stat-detail-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.875rem;
            font-weight: 600;
            color: var(--text-white);
        }

        .stat-detail-value.red {
            color: var(--danger);
        }

        .stat-message {
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-light);
        }

        .stat-message p {
            color: var(--text-white-80);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .stat-message p strong {
            color: var(--neon);
            font-weight: 600;
        }

        .stat-message p.small {
            color: var(--text-white-55);
            font-size: 0.875rem;
        }

        /* ===== SEÇÃO CALCULADORA ===== */
        .section-calculator {
            position: relative;
            padding: 6rem 0;
            overflow: hidden;
        }

        .section-calculator::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--bg-vault);
            z-index: -2;
        }

        .section-calculator::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255, 0, 102, 0.18), transparent 70%),
                        radial-gradient(ellipse 50% 40% at 90% 80%, rgba(255, 0, 102, 0.14), transparent 70%);
            opacity: 0.4;
            pointer-events: none;
            z-index: -1;
        }

        .calc-header {
            max-width: 48rem;
            margin-bottom: 3rem;
        }

        .calc-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border-radius: 9999px;
            background: rgba(255, 0, 102, 0.1);
            border: 1px solid rgba(255, 0, 102, 0.3);
            padding: 0.375rem 0.75rem;
            margin-bottom: 1.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-white-85);
            animation: fadeInUp 0.5s ease-out;
        }

        .calc-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: clamp(2rem, 5vw, 3.8rem);
            line-height: 0.95;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 1rem;
            animation: fadeInUp 0.7s ease-out 0.1s both;
        }

        .calc-title .danger {
            color: var(--danger);
        }

        .calc-desc {
            color: var(--text-white-70);
            font-size: 1.125rem;
            max-width: 42rem;
            animation: fadeInUp 0.6s ease-out 0.2s both;
        }

        .calc-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-top: 3rem;
        }

        @media (min-width: 1024px) {
            .calc-grid {
                grid-template-columns: 1fr 1.4fr;
            }
        }

        .calc-inputs {
            position: relative;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-light);
            border-radius: 1.5rem;
            padding: 2rem;
            animation: fadeInUp 0.7s ease-out 0.3s both;
        }

        .calc-inputs::before {
            content: '';
            position: absolute;
            top: -3rem;
            right: -3rem;
            width: 10rem;
            height: 10rem;
            border-radius: 50%;
            background: rgba(255, 0, 102, 0.15);
            filter: blur(3rem);
        }

        .calc-input-group {
            position: relative;
            margin-bottom: 2.5rem;
        }

        .calc-input-group:last-child {
            margin-bottom: 0;
        }

        .calc-input-label {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-white-55);
        }

        .calc-input-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.5rem;
            color: var(--text-white);
        }

        .slider-container {
            margin: 1rem 0;
        }

        .slider {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.1);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            cursor: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--neon);
            cursor: none;
            box-shadow: 0 0 15px rgba(255, 0, 102, 0.8);
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--neon);
            cursor: none;
            border: none;
            box-shadow: 0 0 15px rgba(255, 0, 102, 0.8);
        }

        .slider-range {
            display: flex;
            justify-content: space-between;
            font-size: 0.625rem;
            color: var(--text-white-40);
            margin-top: 0.375rem;
            font-family: 'JetBrains Mono', monospace;
        }

        .calc-sales {
            border-radius: 0.75rem;
            border: 1px solid var(--border-light);
            background: rgba(255, 255, 255, 0.02);
            padding: 1rem;
        }

        .calc-sales-label {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-white-40);
        }

        .calc-sales-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 2rem;
            color: var(--text-white);
            margin-top: 0.25rem;
        }

        .calc-sales-unit {
            color: var(--text-white-40);
            font-size: 0.875rem;
            margin-left: 0.5rem;
        }

        .calc-result {
            position: relative;
            background: rgba(255, 0, 102, 0.08);
            border: 1px solid rgba(255, 0, 102, 0.3);
            border-radius: 1.5rem;
            padding: 2rem 2.5rem;
            animation: fadeInUp 0.7s ease-out 0.3s both;
        }

        .calc-result::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 20%, rgba(255, 0, 102, 0.4), transparent 60%);
            opacity: 0.4;
            pointer-events: none;
            border-radius: 1.5rem;
        }

        .calc-result-content {
            position: relative;
        }

        .calc-result-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--text-white-55);
            margin-bottom: 0.75rem;
        }

        .calc-result-value {
            font-family: 'Barlow Condensed', sans-serif;
            font-size: clamp(3rem, 9vw, 6.5rem);
            font-weight: 800;
            line-height: 1;
            background: linear-gradient(135deg, var(--neon), var(--cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.25rem;
            filter: drop-shadow(0 0 15px rgba(255, 0, 102, 0.5));
        }

        .calc-result-subtext {
            color: var(--text-white-60);
            margin-bottom: 2rem;
        }

        .result-rows {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .result-row {
            border-radius: 0.75rem;
            border: 1px solid var(--border-light);
            background: rgba(255, 255, 255, 0.03);
            padding: 1rem;
        }

        .result-row.big {
            border-color: rgba(255, 0, 102, 0.3);
        }

        .result-row-label {
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-white-45);
            margin-bottom: 0.25rem;
        }

        .result-row-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.25rem;
            font-weight: 600;
        }

        .result-row-value.negative {
            color: var(--danger);
        }

        .result-row-value.positive {
            color: var(--cyan);
        }

        .result-row.big .result-row-value {
            font-size: 1.875rem;
        }

        .calc-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            justify-content: center;
            padding: 1rem 1.5rem;
            background: var(--neon);
            color: #fff;
            border: none;
            border-radius: 3px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(255, 0, 102, 0.4);
        }

        .calc-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 30px rgba(255, 0, 102, 0.6);
            opacity: 0.9;
        }

        .calc-disclaimer {
            margin-top: 0.75rem;
            font-size: 0.75rem;
            color: var(--text-white-45);
        }

        /* ===== ANIMAÇÕES ===== */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(1.5rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== RESPONSIVO ===== */
        @media (max-width: 768px) {
            .section-problem,
            .section-calculator {
                padding: 3rem 0;
            }

            .pain-cards {
                grid-template-columns: 1fr;
            }

            .stat-band-content {
                grid-template-columns: 1fr;
            }

            .calc-grid {
                grid-template-columns: 1fr;
            }
        }

/* Mobile Calculadora Fixes & Typewriter Cursor */
@media (max-width: 500px) {
    .result-rows {
        grid-template-columns: 1fr;
    }
    .calc-result {
        padding: 1.5rem 1rem;
    }
    .stat-band {
        padding: 1.5rem 1rem;
    }
    .calc-inputs {
        padding: 1.5rem 1rem;
    }
    .calc-inputs::before {
        display: none; /* remove background blur that causes horizontal overflow sometimes */
    }
}

.tw-cursor {
    display: inline-block;
    color: var(--rosa);
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    margin-left: 2px;
    animation: tw-blink 0.8s step-end infinite;
    -webkit-text-stroke: 0;
}
@keyframes tw-blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Animated selection for the word 'Design' */
.hero-title em {
    position: relative;
    display: inline-block;
    transition: color 0.1s ease-in 0.25s;
    padding: 0 4px; /* Slight padding so the box encapsulates the word nicely */
}

.text-selected {
    color: var(--bg-vault) !important;
}

.text-selected::before {
    content: '';
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 110%;
    background-color: var(--rosa);
    z-index: -1;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    animation: sweepSelect 0.4s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

@keyframes sweepSelect {
    0% { transform: translateY(-50%) scaleX(0); }
    100% { transform: translateY(-50%) scaleX(1); }
}

/* Fix case study images not showing on mobile since custom cursor logic is disabled */
.mobile-case-img {
    display: none;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 12px;
    border: 1px solid var(--borda);
}

@media (max-width: 768px) {
    .mobile-case-img {
        display: block;
    }
}