/* =====================================================
   theContt — Futurist System
   ===================================================== */
:root{
  /* Brand DNA */
  --navy:        #07081A;
  --navy-2:      #0C0E25;
  --navy-3:      #141633;
  --primary:     #1B1E3C;
  --coral:       #E8365D;
  --coral-glow:  #FF4D7E;
  --purple:      #7C3AED;
  --purple-deep: #5B2D8E;
  --cyan:        #4DE3F2;
  --mint:        #6CF2C5;

  --text:        #F4F5FB;
  --text-2:      #A8ACCD;
  --text-3:      #6B6F8F;
  --line:        rgba(255,255,255,0.08);
  --line-2:      rgba(255,255,255,0.14);
  --glass:       rgba(255,255,255,0.04);
  --glass-2:     rgba(255,255,255,0.06);

  /* Radii / shadow */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px;
  --shadow-coral: 0 14px 60px -10px rgba(232,54,93,0.55);
  --shadow-glow:  0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -20px rgba(124,58,237,0.35);

  /* Type scale */
  --fz-eye: 12px;
  --fz-body: 16px;
  --fz-lg: 18px;
  --fz-h3: clamp(22px,2.2vw,28px);
  --fz-h2: clamp(34px,4.4vw,56px);
  --fz-hero: clamp(48px,6.8vw,108px);

  --container: 1280px;
  --section-y: clamp(96px, 12vw, 160px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:'Inter', system-ui, sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ background:none; border:none; color:inherit; font:inherit; cursor:pointer }

h1,h2,h3,h4{ font-family:'Sora','Inter',sans-serif; font-weight:700; letter-spacing:-0.025em; line-height:1.05; color:var(--text) }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 clamp(20px,4vw,40px) }
.section{ padding-block: var(--section-y); position:relative }

/* =====================================================
   Global background — mesh + grid + noise
   ===================================================== */
.bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(124,58,237,0.35), transparent 60%),
    radial-gradient(700px 500px at 92% 6%, rgba(232,54,93,0.30), transparent 55%),
    radial-gradient(900px 700px at 70% 95%, rgba(77,227,242,0.18), transparent 60%),
    var(--navy);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; filter:hue-rotate(0deg) }
  100% { background-position: 4% -2%, -3% 2%, 2% -3%, 0 0; filter:hue-rotate(-12deg) }
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1100px 800px at 50% 30%, #000 30%, transparent 80%);
  opacity:0.7;
}
.bg-noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.06; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* Spotlight following cursor */
.spotlight{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(420px 420px at var(--mx,50%) var(--my,50%), rgba(232,54,93,0.18), transparent 60%);
  transition: background 0.05s linear;
}

/* =====================================================
   NAV
   ===================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  background: linear-gradient(90deg, var(--coral), var(--purple), var(--cyan));
  transform: scaleX(0); transform-origin:0 50%;
  box-shadow: 0 0 12px var(--coral-glow);
}
.nav{
  position:sticky; top:14px; z-index:50;
  margin: 14px auto 0;
  width: min(calc(100% - 24px), var(--container));
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px 10px 18px;
  background: rgba(12,14,37,0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border:1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
}
.nav-logo{ display:flex; align-items:center; gap:10px }
.nav-logo-img{ height: 36px; width: auto; display:block; filter: drop-shadow(0 2px 12px rgba(232,54,93,0.3)) }
@media (max-width: 600px){ .nav-logo-img{ height: 30px } }
.footer .nav-logo img{ filter: drop-shadow(0 2px 12px rgba(232,54,93,0.25)) }
.nav-links{ display:flex; align-items:center; gap:6px }
.nav-links a:not(.cta){
  padding:8px 14px; font-size:14px; color:var(--text-2);
  border-radius:999px; transition: color .2s, background .2s;
}
.nav-links a:not(.cta):hover{ color:var(--text); background: var(--glass) }
.nav-cta{
  padding:10px 18px; font-size:14px; font-weight:600;
  background: var(--coral); color:#fff; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: 0 8px 24px -8px rgba(232,54,93,0.7);
  transition: transform .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.nav-cta::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-110%);
  transition: transform .6s;
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(232,54,93,0.85) }
.nav-cta:hover::after{ transform: translateX(110%) }
.nav-burger{ display:none }

.nav-burger{
  display:none; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line-2); background: var(--glass);
  align-items:center; justify-content:center; color: var(--text);
  cursor:pointer; padding:0;
}
.nav-burger svg{ display:block }
.nav-burger .x{ display:none }
.nav-burger.open .b{ display:none }
.nav-burger.open .x{ display:block }

@media (max-width: 900px){
  .nav-burger{ display:inline-flex }
  .nav-links{
    position: fixed; top: 76px; left: 16px; right: 16px;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px; border-radius: 16px;
    background: rgba(15, 16, 36, 0.96); backdrop-filter: blur(20px);
    border: 1px solid var(--line-2);
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.7);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    z-index: 99;
  }
  .nav-links.open{ transform: translateY(0); opacity: 1; pointer-events: auto }
  .nav-links li{ width: 100% }
  .nav-links a:not(.nav-cta){ display:block; padding: 14px 16px; font-size: 16px; border-radius: 10px }
  .nav-links a.nav-cta{ justify-content: center; margin-top: 4px }
}

/* =====================================================
   Reusable
   ===================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:var(--fz-eye); text-transform:uppercase; letter-spacing:0.18em;
  color: var(--coral);
  padding: 6px 12px;
  border:1px solid rgba(232,54,93,0.35);
  background: rgba(232,54,93,0.08);
  border-radius:999px;
}
.eyebrow .pulse{
  width:6px; height:6px; border-radius:50%; background: var(--coral);
  box-shadow: 0 0 0 0 var(--coral);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(232,54,93,0.7) }
  70%  { box-shadow: 0 0 0 10px rgba(232,54,93,0) }
  100% { box-shadow: 0 0 0 0 rgba(232,54,93,0) }
}
.section-title{
  font-size: var(--fz-h2); margin-bottom: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #B7BAD9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-title em{
  font-style:normal;
  background: linear-gradient(90deg, var(--coral) 0%, var(--purple) 50%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-lead{ font-size: var(--fz-lg); color: var(--text-2); max-width: 640px }
.section-head{ max-width: 760px; margin: 0 auto 64px; text-align:center }
.section-head .section-lead{ margin: 0 auto }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px; font-weight:600; font-size:15px;
  border-radius: 999px; transition: transform .2s, box-shadow .2s, background .2s;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn-primary{
  background: var(--coral); color:#fff;
  box-shadow: 0 12px 36px -10px rgba(232,54,93,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 50px -10px rgba(232,54,93,0.9), inset 0 1px 0 rgba(255,255,255,0.35) }
.btn-ghost{
  background: var(--glass); color: var(--text); border:1px solid var(--line-2); backdrop-filter: blur(8px);
}
.btn-ghost:hover{ background: var(--glass-2); border-color: rgba(255,255,255,0.25); transform: translateY(-2px) }
.btn-arrow{
  width:22px; height:22px; border-radius:50%; background: rgba(255,255,255,0.18);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px;
  transition: transform .25s;
}
.btn:hover .btn-arrow{ transform: translateX(3px) }

/* Reveal on scroll */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal][data-delay="1"]{ transition-delay: 80ms }
[data-reveal][data-delay="2"]{ transition-delay: 160ms }
[data-reveal][data-delay="3"]{ transition-delay: 240ms }
[data-reveal][data-delay="4"]{ transition-delay: 320ms }
[data-reveal][data-delay="5"]{ transition-delay: 400ms }

/* =====================================================
   HERO
   ===================================================== */
.hero{ padding-block: clamp(60px, 9vw, 110px) clamp(80px, 11vw, 140px); position:relative; overflow:hidden }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 100px); align-items:center }
@media (max-width: 1000px){ .hero-grid{ grid-template-columns: 1fr } }

.hero-eyebrow-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 32px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.15em;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-2); background: var(--glass); color:var(--text-2);
}
.chip .ledger{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint) }

.hero-title{
  font-size: var(--fz-hero); font-weight:800; letter-spacing:-0.04em; line-height:0.96;
  margin-bottom: 28px;
}
.hero-title .line{ display:block; overflow:hidden }
.hero-title .word{
  display:inline-block;
  background: linear-gradient(180deg, #FFFFFF 0%, #B7BAD9 100%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.hero-title .accent{
  display:inline-block; position:relative;
  background: linear-gradient(90deg, var(--coral) 0%, var(--purple) 60%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip:text; color:transparent;
  background-size: 200% 100%; animation: shine 6s linear infinite;
}
@keyframes shine{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.hero-title .accent::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--coral), var(--purple), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: drawLine 1.4s 1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes drawLine{ to { transform: scaleX(1) } }

.hero-rotor{
  display:inline-flex; align-items:center;
  height: 1em; overflow:hidden; vertical-align: -0.02em;
  border-bottom: 2px dashed rgba(255,255,255,0.15);
}
.hero-rotor ul{ animation: rotor 9s steps(3) infinite }
.hero-rotor li{
  height: 1em; line-height:1em;
  background: linear-gradient(90deg, var(--coral), var(--purple), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes rotor{
  0%,28%   { transform: translateY(0) }
  33%,61%  { transform: translateY(-1em) }
  66%,94%  { transform: translateY(-2em) }
  100%     { transform: translateY(-3em) }
}

.hero-sub{ font-size: clamp(16px, 1.3vw, 19px); color: var(--text-2); max-width:580px; margin-bottom:36px }
.hero-sub b{ color: var(--text); font-weight:600 }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 40px }

.hero-trust{ display:flex; flex-wrap:wrap; gap:24px; padding-top:26px; border-top:1px solid var(--line) }
.hero-trust span{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); font-family:'JetBrains Mono',monospace }
.hero-trust .dot{ width:5px; height:5px; border-radius:50%; background: var(--mint); box-shadow: 0 0 6px var(--mint) }

/* HUD card */
.hud{
  position:relative; padding: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-glow);
}
.hud::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(232,54,93,0.4), transparent 35%, transparent 65%, rgba(124,58,237,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.hud-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom: 18px }
.hud-head .label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-3) }
.hud-head .live{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--mint); letter-spacing:0.15em }
.hud-head .live span{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation: blink 1.4s infinite }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0.35} }

.hud-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
.hud-stat{
  position:relative; padding:18px;
  border:1px solid var(--line); border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  overflow:hidden;
}
.hud-stat::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}
.hud-stat .num{
  font-family:'Sora'; font-size: clamp(30px, 2.6vw, 42px); font-weight:700; letter-spacing:-0.04em;
  background: linear-gradient(180deg, #fff, #cfd1ec);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:baseline; gap:4px;
}
.hud-stat .num small{ font-size: 0.55em; color: var(--coral); -webkit-text-fill-color: var(--coral) }
.hud-stat--coral .num{ background: linear-gradient(180deg, #fff, #FF9DB5); -webkit-background-clip:text; color:transparent }
.hud-stat .lbl{ margin-top:6px; font-size:12px; color: var(--text-3); font-family:'JetBrains Mono',monospace; letter-spacing:0.06em; text-transform:uppercase }

.hud-spark{ margin-top:18px; padding:14px 16px; background: rgba(0,0,0,0.25); border-radius:14px; border:1px solid var(--line) }
.hud-spark .row{ display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); margin-bottom:8px }
.hud-spark svg{ width:100%; height:54px; display:block }
.hud-spark path.line{
  stroke: url(#sparkGrad); stroke-width:2; fill:none;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: drawSpark 3s ease-out forwards 0.8s;
}
.hud-spark path.area{
  fill: url(#sparkArea); opacity:0;
  animation: fadeArea 1.2s ease-out forwards 2.2s;
}
@keyframes drawSpark{ to { stroke-dashoffset: 0 } }
@keyframes fadeArea{ to { opacity: 1 } }

/* Floating geometric shapes */
.float-shape{ position:absolute; pointer-events:none; }
.shape-1{
  top:8%; right:-6%; width:240px; height:240px;
  background: conic-gradient(from 120deg, var(--coral) 0%, var(--purple) 40%, transparent 60%);
  filter: blur(60px); opacity:0.55;
  animation: orbit 18s ease-in-out infinite alternate;
}
.shape-2{
  bottom:-10%; left:-4%; width:300px; height:300px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 60%);
  filter: blur(70px); opacity:0.35;
  animation: orbit 22s ease-in-out infinite alternate-reverse;
}
@keyframes orbit{
  0%   { transform: translate(0,0) scale(1) }
  100% { transform: translate(40px,-30px) scale(1.1) }
}

/* Kinetic strip */
.kinetic{
  margin-top: 64px; padding-block: 28px;
  border-block: 1px solid var(--line);
  overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.kinetic-track{
  display:flex; gap: 60px; white-space:nowrap;
  animation: marquee 40s linear infinite;
  font-family:'Sora'; font-weight:700; font-size: clamp(28px, 3vw, 44px);
  letter-spacing:-0.02em;
}
.kinetic-track span{ color: rgba(255,255,255,0.18); -webkit-text-stroke: 1px rgba(255,255,255,0.25); }
.kinetic-track span.hot{ color: transparent; -webkit-text-stroke: 1px var(--coral) }
.kinetic-track .dot{ display:inline-flex; align-items:center; color: var(--coral); -webkit-text-stroke:0 }
@keyframes marquee{ to { transform: translateX(-50%) } }

/* =====================================================
   PROBLEMAS
   ===================================================== */
.problems-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width:900px){ .problems-grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:600px){ .problems-grid{ grid-template-columns: 1fr } }

.prob{
  position:relative; padding: 28px 24px 24px;
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  overflow:hidden; transition: transform .3s, border-color .3s, background .3s;
}
.prob::before{
  content: attr(data-num);
  position:absolute; top:-22px; right:-8px;
  font-family:'Sora'; font-weight:800; font-size: 140px; line-height:1;
  color: rgba(255,255,255,0.025); pointer-events:none;
  transition: color .3s, transform .3s;
}
.prob:hover{ transform: translateY(-4px); border-color: rgba(232,54,93,0.35); background: linear-gradient(180deg, rgba(232,54,93,0.06), rgba(255,255,255,0.01)) }
.prob:hover::before{ color: rgba(232,54,93,0.18); transform: rotate(-4deg) translateY(-6px) }
.prob-icon{
  width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(232,54,93,0.2), rgba(124,58,237,0.2));
  color: var(--coral); margin-bottom: 18px;
  border:1px solid rgba(232,54,93,0.25);
}
.prob h3{ font-size: 18px; margin-bottom: 8px; color: var(--text) }
.prob p{ font-size: 14.5px; color: var(--text-2) }

/* =====================================================
   WHY
   ===================================================== */
.why{ position:relative }
.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items:center }
@media (max-width:900px){ .why-grid{ grid-template-columns: 1fr } }

.why-list{ margin-top: 36px; display:grid; gap: 4px }
.why-item{
  display:grid; grid-template-columns: 60px 1fr; gap: 18px;
  padding: 22px 0; border-bottom:1px solid var(--line);
  transition: padding-left .35s;
}
.why-item:hover{ padding-left: 12px }
.why-item .idx{
  font-family:'JetBrains Mono', monospace; font-size:12px; color: var(--text-3);
  letter-spacing:0.2em; padding-top:4px;
}
.why-item h4{ font-size: 19px; margin-bottom:6px; color: var(--text) }
.why-item p{ color: var(--text-2); font-size: 15px }
.why-item:hover .idx{ color: var(--coral) }

/* Radar visual */
.radar{
  position:relative; aspect-ratio: 1; max-width: 480px; margin: 0 auto;
  display:grid; place-items:center;
}
.radar-svg{ width:100%; height:100%; overflow:visible }
.radar-rings circle{ fill:none; stroke: var(--line-2); stroke-dasharray:2 6 }
.radar-sweep{ transform-origin:50% 50%; animation: sweep 4s linear infinite }
@keyframes sweep{ to { transform: rotate(360deg) } }
.radar-blip{ animation: blip 2s ease-out infinite }
@keyframes blip{ 0%{r:2; opacity:1} 100%{r:30; opacity:0} }
.radar-core{ filter: drop-shadow(0 0 18px var(--coral-glow)) }
.radar-text{
  position:absolute; bottom: 8%; left:50%; transform: translateX(-50%);
  font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--text-3);
  letter-spacing: 0.2em; text-transform: uppercase;
  display:flex; align-items:center; gap:8px;
}
.radar-text .dot{ width:6px;height:6px;border-radius:50%; background:var(--mint); box-shadow:0 0 6px var(--mint); animation: blink 1.6s infinite }

/* =====================================================
   IA BLOCK
   ===================================================== */
.ia{ background: linear-gradient(180deg, transparent, rgba(124,58,237,0.06), transparent); position:relative; overflow:hidden }
.ia::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
  pointer-events:none;
}
.ia-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items:center; position:relative }
@media (max-width:1000px){ .ia-grid{ grid-template-columns: 1fr } }
.ia-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 36px }
@media (max-width:600px){ .ia-stats{ grid-template-columns: 1fr } }
.ia-stat{
  padding: 22px 20px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(124,58,237,0.08), rgba(0,0,0,0.2));
  border-radius: var(--r-md); position:relative; overflow:hidden;
}
.ia-stat .num{
  font-family:'Sora'; font-weight:700; font-size: clamp(34px, 4vw, 52px); letter-spacing:-0.04em;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.ia-stat .lbl{ font-size:13px; color: var(--text-2); margin-top:8px; font-family:'JetBrains Mono',monospace }

/* Terminal */
.terminal{
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(0,0,0,0.55); overflow:hidden;
  font-family:'JetBrains Mono', monospace; font-size:13px;
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(8px);
}
.terminal-head{
  display:flex; align-items:center; gap:8px;
  padding: 12px 14px; border-bottom:1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.terminal-head .dot{ width:10px; height:10px; border-radius:50% }
.terminal-head .r{ background:#ff5f56 } .terminal-head .y{ background:#ffbd2e } .terminal-head .g{ background:#27c93f }
.terminal-head .name{ margin-left:8px; color: var(--text-3); font-size:11px; letter-spacing:0.1em }
.terminal-body{ padding: 18px 18px 22px; min-height: 280px; color: var(--text-2) }
.terminal-line{ opacity:0; animation: termLine .4s forwards }
.terminal-line .pr{ color: var(--mint); margin-right:8px }
.terminal-line .ok{ color: var(--mint) }
.terminal-line .warn{ color: var(--coral) }
.terminal-line .info{ color: var(--cyan) }
.terminal-line .label{ color: var(--text-3) }
@keyframes termLine{ to { opacity:1 } }
.terminal-line:nth-child(1){ animation-delay: .2s }
.terminal-line:nth-child(2){ animation-delay: .8s }
.terminal-line:nth-child(3){ animation-delay: 1.4s }
.terminal-line:nth-child(4){ animation-delay: 2.0s }
.terminal-line:nth-child(5){ animation-delay: 2.6s }
.terminal-line:nth-child(6){ animation-delay: 3.2s }
.terminal-line:nth-child(7){ animation-delay: 3.8s }
.cursor{ display:inline-block; width:8px; height:14px; background: var(--coral); vertical-align:-2px; margin-left:4px; animation: blink 1s infinite }

/* =====================================================
   ONBOARDING TIMELINE
   ===================================================== */
.timeline{ position:relative; display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px }
@media (max-width:900px){ .timeline{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:520px){ .timeline{ grid-template-columns: 1fr } }
.timeline::before{
  content:''; position:absolute; left:5%; right:5%; top: 38px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--coral) 20%, var(--purple) 50%, var(--cyan) 80%, transparent);
  opacity: 0.4;
}
@media (max-width:900px){ .timeline::before{ display:none } }
.t-step{ position:relative; padding: 0 6px; text-align:left }
.t-step .nodewrap{ position:relative; z-index:2; margin-bottom: 22px }
.t-step .node{
  width: 76px; height: 76px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:700; font-size: 28px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), rgba(0,0,0,0.4));
  border:1px solid var(--line-2); position:relative;
  background-clip: padding-box;
}
.t-step .node::before{
  content:''; position:absolute; inset:-3px; border-radius:50%; padding:3px;
  background: conic-gradient(from 0deg, var(--coral), var(--purple), var(--cyan), var(--coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 8s linear infinite; opacity: 0.7;
}
@keyframes spin{ to { transform: rotate(360deg) } }
.t-step .node span{
  background: linear-gradient(180deg, #fff, #B7BAD9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.t-step h3{ font-size: 19px; margin-bottom: 6px; color: var(--text) }
.t-step p{ font-size: 14.5px; color: var(--text-2) }

/* =====================================================
   AUDIENCE / CALCS
   ===================================================== */
.cards-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px }
@media (max-width:900px){ .cards-3{ grid-template-columns: 1fr } }

.aud{
  position:relative; padding: 32px 28px;
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  overflow:hidden; transition: transform .3s;
}
.aud:hover{ transform: translateY(-4px) }
.aud::after{
  content:''; position:absolute; top:-60%; right:-30%; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,54,93,0.18), transparent 70%);
  pointer-events:none; transition: transform .6s;
}
.aud:nth-child(2)::after{ background: radial-gradient(circle, rgba(124,58,237,0.20), transparent 70%) }
.aud:nth-child(3)::after{ background: radial-gradient(circle, rgba(77,227,242,0.18), transparent 70%) }
.aud:hover::after{ transform: scale(1.2) }
.aud-icon{
  width:54px; height:54px; border-radius:14px;
  background: linear-gradient(135deg, var(--coral), var(--purple));
  display:flex; align-items:center; justify-content:center; color:#fff;
  margin-bottom:22px; position:relative; z-index:1;
}
.aud:nth-child(2) .aud-icon{ background: linear-gradient(135deg, var(--purple), var(--cyan)) }
.aud:nth-child(3) .aud-icon{ background: linear-gradient(135deg, var(--cyan), var(--mint)) }
.aud h3{ font-size: 22px; margin-bottom: 10px; position:relative; z-index:1 }
.aud p{ color: var(--text-2); font-size: 15px; position:relative; z-index:1 }

/* Calc cards */
.calc{
  position:relative; padding: 28px;
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  display:flex; flex-direction:column; transition: transform .3s, border-color .3s;
  overflow:hidden;
}
.calc:hover{ transform: translateY(-4px); border-color: rgba(232,54,93,0.4) }
.calc-glyph{
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(232,54,93,0.1); border:1px solid rgba(232,54,93,0.3);
  color: var(--coral);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.calc h3{ font-size: 19px; margin-bottom: 8px }
.calc p{ color: var(--text-2); font-size: 14.5px; margin-bottom: 22px; flex:1 }
.calc .go{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  color: var(--coral); padding: 10px 14px; border:1px solid rgba(232,54,93,0.4);
  border-radius: 999px; align-self:flex-start;
  transition: background .2s, color .2s;
}
.calc:hover .go{ background: var(--coral); color:#fff }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.tcards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px }
@media (max-width:900px){ .tcards{ grid-template-columns:1fr } }
.tcard{
  padding: 28px;
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  display:flex; flex-direction:column; gap: 18px;
  position:relative; overflow:hidden;
}
.tcard::before{
  content:'"'; position:absolute; top:-40px; right:14px;
  font-family:'Sora'; font-weight:800; font-size: 200px; line-height:1;
  color: rgba(232,54,93,0.10);
}
.tcard .stars{ color: var(--coral); letter-spacing:2px }
.tcard p{ color: var(--text); font-size: 15.5px; line-height:1.6 }
.tcard .who{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top: 14px; border-top:1px solid var(--line) }
.tcard .av{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:700; color:#fff; font-size: 14px;
  background: linear-gradient(135deg, var(--coral), var(--purple));
}
.tcard .who div div:first-child{ font-weight:600; font-size: 14px; color: var(--text) }
.tcard .who div div:last-child{ font-size: 12px; color: var(--text-3) }

/* =====================================================
   BUSINESS CLUB
   ===================================================== */
.bclub{
  position:relative; padding: 96px 64px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(600px 400px at 90% 0%, rgba(232,54,93,0.45), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(124,58,237,0.45), transparent 60%),
    linear-gradient(135deg, #0E0F2A, #1B1B3F);
  border:1px solid var(--line-2);
  overflow:hidden; text-align:left;
}
@media (max-width:700px){ .bclub{ padding: 56px 28px } }
.bclub::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 30% 50%, #000, transparent 70%);
}
.bclub h2{ font-size: clamp(40px, 5vw, 64px); margin: 18px 0; max-width: 800px; position:relative }
.bclub h2 em{
  font-style:normal;
  background: linear-gradient(90deg, var(--coral), #FF8AA8);
  -webkit-background-clip:text; color:transparent;
}
.bclub p{ color: var(--text-2); font-size: var(--fz-lg); max-width: 580px; position:relative }
.bclub-pills{ display:flex; flex-wrap:wrap; gap:10px; margin: 28px 0 36px; position:relative }
.bclub-pills li{
  padding: 8px 16px; border:1px solid var(--line-2); border-radius:999px;
  font-size:13px; color: var(--text-2); backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.04);
}
.bclub-actions{ display:flex; flex-wrap:wrap; gap:14px; position:relative }

/* =====================================================
   CTA + FOOTER
   ===================================================== */
.cta-final{
  position:relative; padding: 80px 56px; border-radius: var(--r-xl); text-align:center;
  background: linear-gradient(135deg, rgba(232,54,93,0.12), rgba(124,58,237,0.12));
  border:1px solid var(--line-2); overflow:hidden;
}
.cta-final::before{
  content:''; position:absolute; inset:-2px;
  background: conic-gradient(from 0deg, var(--coral), var(--purple), var(--cyan), var(--coral));
  z-index:-1; filter:blur(40px); opacity:0.4;
  animation: spin 12s linear infinite;
}
.cta-final h2{ font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 18px; max-width: 800px; margin-inline:auto }
.cta-final p{ color: var(--text-2); font-size: var(--fz-lg); max-width: 580px; margin: 0 auto 32px }
.cta-final .actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

.footer{ padding: 80px 0 40px; border-top:1px solid var(--line); margin-top: 80px }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 60px }
@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr } }
.footer h4{ font-size: 13px; text-transform:uppercase; letter-spacing:0.16em; color: var(--text-3); margin-bottom: 16px; font-family:'JetBrains Mono', monospace }
.footer-links{ display:grid; gap: 10px }
.footer-links a{ color: var(--text-2); font-size: 14.5px; transition: color .2s }
.footer-links a:hover{ color: var(--coral) }
.footer-tag{ color: var(--text-2); font-size: 14.5px; margin: 14px 0 22px; max-width: 320px }
.footer-social{ display:flex; gap: 10px }
.footer-social a{
  width: 40px; height: 40px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); color: var(--text-2); transition: all .2s;
}
.footer-social a:hover{ border-color: var(--coral); color: var(--coral); transform: translateY(-2px) }
.footer-bot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); font-family:'JetBrains Mono', monospace }

/* WhatsApp float */
.fab{
  position:fixed; bottom: 24px; right: 24px; z-index: 60;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: #25D366; color:#fff;
  box-shadow: 0 12px 30px -6px rgba(37,211,102,0.6);
  animation: pulse 2.4s infinite;
}

/* =====================================================
   AUDITORIA 2026-05-18 — Mobile fixes (M6, M7, M8)
   ===================================================== */

/* M7 — Tipografia mobile: espaçamentos e line-height ajustados */
@media (max-width: 768px){
  .hero h1{ line-height: 1.08; letter-spacing: -0.025em; }
  .hero p, .hero-sub{ margin-top: 16px; line-height: 1.55; }
  .section-head h2{ line-height: 1.15; margin-bottom: 12px; }
  .section-head p, .section-lead{ margin-top: 8px; }
  .container{ padding-inline: 20px; }
  .section{ padding-block: 64px; }
  h1, h2{ word-break: break-word; hyphens: auto; }
}

/* M8 — FAB WhatsApp não cobre CTAs em mobile pequeno */
@media (max-width: 600px){
  .wpp-float{ bottom: 80px !important; right: 16px !important; }
}
@media (max-width: 380px){
  .wpp-float{ bottom: 72px !important; width: 52px; height: 52px; }
}

/* ──────────────────────────────────────────────────
   AUDITORIA 2026-05-18 — Patch 2 — Fix nav mobile
   (CTA "Diagnóstico" cobria o logo em viewport pequeno)
   ────────────────────────────────────────────────── */
@media (max-width: 900px){
  /* Garantir que TODO o ul.nav-links some no mobile (incluindo o nav-cta) */
  .nav-links{
    display: flex !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .nav-links.open{
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  /* Garantir que o burger é visível e clicável */
  .nav-burger{
    display: inline-flex !important;
    flex-shrink: 0;
    margin-left: auto;
  }
  /* Logo não pode encolher demais */
  .nav-logo{ flex-shrink: 0; }
  .nav-logo-img{ height: 28px !important; }
}

/* Hero title menor em mobile pra não ficar gigante (5 linhas) */
@media (max-width: 600px){
  .hero h1{
    font-size: clamp(36px, 9vw, 56px) !important;
    line-height: 1.05 !important;
  }
}
@media (max-width: 380px){
  .hero h1{ font-size: 32px !important; }
}

/* Container padding mais apertado em telas muito pequenas */
@media (max-width: 380px){
  .container{ padding-inline: 16px; }
  .nav{ padding: 8px 10px 8px 12px; }
}