/* ═══════════════════════════════════════════════════════════
   CHIVAART — style.css
   Versão: 2.0 | Futurista · Gold Gradient · Mobile-First
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --bg-base:    #080808;
  --bg-panel:   #0f0f0d;
  --bg-card:    #131310;
  --bg-raised:  #1a1a15;

  --g1: #fbde22;
  --g2: #f8a800;
  --g3: #c46a00;
  --g4: #7a3800;

  --grad:       linear-gradient(135deg, var(--g1) 0%, var(--g2) 60%, var(--g3) 100%);
  --grad-text:  linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  --grad-soft:  linear-gradient(135deg, rgba(251,222,34,.15) 0%, rgba(196,106,0,.08) 100%);
  --grad-glow:  radial-gradient(ellipse at center, rgba(248,168,0,.18) 0%, transparent 70%);

  --b-gold:  rgba(248,168,0,.25);
  --b-gold2: rgba(251,222,34,.5);

  --white:  #ffffff;
  --muted:  rgba(255,255,255,.52);
  --muted2: rgba(255,255,255,.28);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --max-w: 1000px;
  --sp: clamp(80px,12vw,140px) clamp(22px,5vw,52px);
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg-base);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
img { max-width:100%; display:block; object-fit:cover; }
a   { color:inherit; text-decoration:none; }

h1, h2 {
  font-family:'Orbitron', sans-serif;
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
h1 { font-size:clamp(32px, 6.5vw, 72px); font-weight:900; }
h2 { font-size:clamp(24px, 4.5vw, 52px); font-weight:800; }

h3 { font-family:'Sora', sans-serif; font-weight:700; line-height:1.15; }
h3 { font-size:clamp(16px,2.8vw,21px); }
p  { font-size:clamp(14px,1.8vw,16px); }

/* ─────────────────────────────────────────────
   UTILITIES
───────────────────────────────────────────── */
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 clamp(22px,5vw,52px); }

.gtext {
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.pill {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Sora', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--g2); border:1px solid var(--b-gold);
  background:rgba(248,168,0,.06);
  padding:6px 16px; border-radius:10px 0px 10px 0px; margin-bottom:22px;
}
.pill::before {
  content:''; width:6px; height:6px; border-radius:100%;
  background:var(--g1); flex-shrink:0;
  animation:pill-blink 2s infinite;
}
@keyframes pill-blink {
  0%,100%{ opacity:1; } 50%{ opacity:.3; }
}

.divider {
  border:none; height:1px;
  background:linear-gradient(90deg,transparent,var(--b-gold2),transparent);
}

/* ─────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────── */
.r {
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.r.on { opacity:1; transform:none; }
.d1{transition-delay:.07s}
.d2{transition-delay:.14s}
.d3{transition-delay:.21s}
.d4{transition-delay:.28s}

/* ─────────────────────────────────────────────
   CTA BUTTONS
───────────────────────────────────────────── */
.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--grad);
  color:#000;
  font-family:'Sora', sans-serif; font-weight:800;
  font-size:clamp(11px,1.5vw,13px); letter-spacing:.16em; text-transform:uppercase;
  padding:clamp(8px,2.5vw,16px) clamp(20px,5vw,52px);
  border-radius:15px; border:none; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 4px 28px rgba(248,168,0,.3);
}
.cta::before {
  content:'';
  position:absolute; inset:0; border-radius:100px;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform:translateX(-110%);
  transition:transform .65s ease;
}
.cta:hover::before { transform:translateX(110%); }
.cta:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 52px rgba(248,168,0,.5);
}
.cta svg { flex-shrink:0; }

.cta--pulse {
  animation:ctapulse 3s infinite;
}
@keyframes ctapulse {
  0%,100%{ box-shadow:0 4px 28px rgba(248,168,0,.3); }
  50%    { box-shadow:0 4px 56px rgba(251,222,34,.65), 0 0 0 12px rgba(248,168,0,0); }
}

.cta-ghost {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--white);
  font-family:'Sora', sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 28px; border-radius:15px;
  border:1px solid rgba(255,255,255,.18);
  transition:border-color .3s, color .3s;
}
.cta-ghost:hover { border-color:var(--g2); color:var(--g1); }

/* ─────────────────────────────────────────────
   CANVAS DE PARTÍCULAS (fundo)
───────────────────────────────────────────── */
#particles-canvas {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
  opacity:.55;
}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  padding:14px clamp(22px,5vw,52px);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(248,168,0,.1);
  transition:background .3s;
}
nav.scrolled { background:rgba(8,8,8,.96); }

.nav-logo {
  font-family:'Sora', sans-serif; font-weight:800; font-size:20px;
  display:flex; align-items:center; gap:10px; letter-spacing:.04em;
}
/* ── SUBSTITUIR NAV LOGO ────────────────────────────────
   No VS Code, substitui o bloco .nav-logo inteiro por:

   <a href="#" class="nav-logo">
     <img src="images/logo-horizontal.png"
          alt="ChivaArt"
          style="height:38px;width:auto;" />
   </a>

   Ficheiro a usar: logotipo_versão_horizontal.png
   Pasta: coloca em  chivaart-site/images/logo-horizontal.png
──────────────────────────────────────────────────────── */
.nav-logo-mark {
  width:34px; height:34px; border-radius:7px;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:19px; color:#000; flex-shrink:0;
}
.nav-logo-text { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.nav-cta {
  background:var(--grad); color:#000;
  font-family:'Sora', sans-serif; font-weight:800;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 22px; border-radius:100px;
  box-shadow:0 3px 18px rgba(248,168,0,.28);
  transition:transform .25s, box-shadow .25s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(248,168,0,.46); }

/* ─────────────────────────────────────────────
   ① HERO
───────────────────────────────────────────── */
#hero {
  min-height:100svh;
  display:grid; grid-template-columns:1.15fr .85fr;
  align-items:center; padding-top:72px;
  position:relative; overflow:hidden;
  z-index:1;
}
@media(max-width:740px){ #hero { grid-template-columns:1fr; } }

/* Orb de fundo */
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(90px);
}
.hero-orb-1 {
  width:700px; height:700px; top:-15%; left:-20%;
  background:radial-gradient(circle, rgba(248,168,0,.14), transparent 70%);
  animation:orb-float 8s ease-in-out infinite;
}
.hero-orb-2 {
  width:450px; height:450px; bottom:0; right:-10%;
  background:radial-gradient(circle, rgba(196,106,0,.1), transparent 70%);
  animation:orb-float 11s ease-in-out infinite reverse;
}
@keyframes orb-float {
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-30px) scale(1.05); }
}

/* Linha vertical decorativa */
#hero::after {
  content:'';
  position:absolute; top:0; right:34%; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(248,168,0,.35), transparent);
  pointer-events:none;
}
@media(max-width:740px){ #hero::after { display:none; } }

.hero-text {
  padding:clamp(48px,8vw,100px) clamp(22px,5vw,64px);
  position:relative; z-index:2;
}
.hero-h1 { margin-bottom:22px; }
.hero-h1 .line-gold {
  display:block;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-sub {
  font-size:clamp(15px,2vw,18px); color:rgba(255,255,255,.68);
  max-width:460px; margin-bottom:12px; font-weight:300;
}
.hero-sub strong { color:var(--white); font-weight:600; }

.hero-hook {
  font-size:clamp(13px,1.7vw,15px); color:var(--g2);
  font-weight:600; margin-bottom:38px; max-width:460px;
  display:flex; align-items:flex-start; gap:10px;
}
.hero-hook::before { content:'→'; flex-shrink:0; }

.hero-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Social proof */
.hero-proof { margin-top:30px; display:flex; align-items:center; gap:14px; }
.proof-avatars { display:flex; }
.proof-avatars img {
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--bg-base); object-fit:cover; margin-left:-8px;
}
.proof-avatars img:first-child { margin-left:0; }
.proof-text { font-size:12.5px; color:var(--muted); }
.proof-text strong { color:var(--g1); font-weight:700; }

/* Stats */
.hero-stats { display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; align-items:center; }
.hstat { display:flex; flex-direction:column; gap:2px; }
.hstat-num {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:clamp(28px,4vw,42px); line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hstat-lbl { font-size:11px; color:var(--muted); letter-spacing:.06em; }
.hstat-sep { width:1px; height:40px; background:rgba(248,168,0,.22); }

/* Hero image column */
.hero-img-col { height:100svh; position:relative; overflow:hidden; }
.hero-img-col img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  filter:brightness(.5) contrast(1.08);
  /* PARALLAX — controlado por JS */
  will-change:transform;
}
.hero-img-col::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, var(--bg-base) 0%, transparent 28%, transparent 72%, var(--bg-base) 100%),
    linear-gradient(to top, var(--bg-base) 0%, transparent 22%);
}
.hero-img-col::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px; z-index:2;
  background:var(--grad);
}
@media(max-width:740px){ .hero-img-col { display:none; } }

/* ─────────────────────────────────────────────
   ② DOR
───────────────────────────────────────────── */
#dor { padding:var(--sp); background:var(--bg-panel); position:relative; overflow:hidden; z-index:1; }

.dor-intro { max-width:620px; margin-bottom:52px; }
.dor-intro h2 { margin-bottom:16px; }
.dor-intro p  { color:var(--muted); font-size:16px; }

.dor-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:rgba(248,168,0,.08);
  border:1px solid rgba(248,168,0,.08); border-radius:var(--r-md); overflow:hidden;
}
.dor-card {
  background:var(--bg-card);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:background .3s var(--ease);
}
.dor-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:0; transition:opacity .3s;
}
.dor-card:hover { background:var(--bg-raised); }
.dor-card:hover::before { opacity:1; }

/* ── IMAGENS DOR ─────────────────────────────────────────
   No VS Code, substitui cada src por ficheiro local.
   Exemplos:
     Card 01 → src="images/dor-01.jpg"  (foto de loja vazia / negócio sem movimento)
     Card 02 → src="images/dor-02.jpg"  (pessoa a olhar para o telemóvel sem likes)
     Card 03 → src="images/dor-03.jpg"  (concorrente com clientes)
     Card 04 → src="images/dor-04.jpg"  (dinheiro perdido / frustração)
   Tamanho recomendado: 600 × 400 px, JPG, qualidade 80%
──────────────────────────────────────────────────────── */
.dor-card-img { height:190px; overflow:hidden; }
.dor-card-img img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.42) saturate(.7);
  transition:transform .6s var(--ease), filter .5s;
}
.dor-card:hover .dor-card-img img { transform:scale(1.07); filter:brightness(.6) saturate(.9); }
.dor-card-body { padding:24px 22px; flex:1; }
.dor-card-body h3 { font-size:15px; margin-bottom:8px; }
.dor-card-body p  { font-size:13px; color:var(--muted); line-height:1.65; }
.dor-card-num {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:64px; color:rgba(248,168,0,.06);
  padding:0 22px 12px; line-height:1; text-align:right;
}

/* ─────────────────────────────────────────────
   ③ QUEBRA DE CRENÇA
───────────────────────────────────────────── */
#crenca { padding:var(--sp); background:var(--bg-base); position:relative; overflow:hidden; z-index:1; }

.crenca-wrap { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media(max-width:680px){ .crenca-wrap { grid-template-columns:1fr; gap:36px; } }

.crenca-img-block { position:relative; }
/* ── IMAGEM CRENÇA ───────────────────────────────────────
   Sugestão: foto de duas montras lado a lado, ou dois
   telemóveis com perfis diferentes. Tamanho: 800×600px
   No VS Code: src="images/crenca-main.jpg"
──────────────────────────────────────────────────────── */
.crenca-img-block img {
  width:100%; height:420px; object-fit:cover;
  border-radius:var(--r-md); filter:brightness(.6) contrast(1.1);
}
.crenca-img-block::before {
  content:''; position:absolute; inset:-1px;
  border-radius:calc(var(--r-md) + 1px);
  background:var(--grad); z-index:-1; opacity:.35;
}
.crenca-img-overlay {
  position:absolute; bottom:0; left:0; right:0; padding:24px 22px 20px;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, transparent 65%);
  border-radius:0 0 var(--r-md) var(--r-md);
}
.crenca-img-overlay p { font-size:13px; color:rgba(255,255,255,.65); font-style:italic; }
.crenca-img-overlay strong { color:var(--g1); font-style:normal; }

.crenca-text h2 { margin-bottom:18px; }
.crenca-text p  { color:var(--muted); margin-bottom:16px; font-size:15.5px; }
.crenca-text p strong { color:var(--white); }

.crenca-stat {
  margin-top:28px; background:var(--grad-soft);
  border:1px solid var(--b-gold); border-radius:var(--r-md);
  padding:22px 26px; display:flex; align-items:center; gap:20px;
}
.crenca-stat .big {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:clamp(52px,7vw,72px); line-height:1; flex-shrink:0;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.crenca-stat p { font-size:14px; color:rgba(255,255,255,.62); margin:0; }

/* ─────────────────────────────────────────────
   ④ SOLUÇÃO
───────────────────────────────────────────── */
#solucao { padding:var(--sp); background:var(--bg-panel); position:relative; overflow:hidden; z-index:1; }
#solucao::after {
  content:'CA'; position:absolute; right:-3%; top:50%; transform:translateY(-50%);
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:clamp(200px,28vw,340px); letter-spacing:-.05em;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:.03; pointer-events:none; user-select:none;
}

.solucao-top { max-width:640px; margin-bottom:52px; }
.solucao-top h2 { margin-bottom:16px; }
.solucao-top p  { color:var(--muted); font-size:16px; }
.solucao-top p strong { color:var(--white); }

.solucao-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.solucao-card {
  background:var(--bg-card); border:1px solid rgba(248,168,0,.1);
  border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .3s, transform .35s var(--ease), box-shadow .35s;
}
.solucao-card:hover { border-color:var(--b-gold2); transform:translateY(-6px); box-shadow:0 24px 64px rgba(248,168,0,.1); }

/* ── IMAGENS SOLUÇÃO ─────────────────────────────────────
   Card 01 → src="images/solucao-identidade.jpg"  (logo, mockup de identidade visual)
   Card 02 → src="images/solucao-conteudo.jpg"    (telemóvel com feed do Instagram)
   Card 03 → src="images/solucao-estrategia.jpg"  (gráfico de crescimento, dashboard)
   Tamanho recomendado: 600 × 300 px, JPG, qualidade 80%
──────────────────────────────────────────────────────── */
.sc-img { height:148px; overflow:hidden; }
.sc-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.6) saturate(.8); transition:filter .4s; }
.solucao-card:hover .sc-img img { filter:brightness(.85) saturate(1); }

.sc-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--grad); color:#000;
  font-family:'Sora', sans-serif; font-weight:800; font-size:11px;
}
.sc-body { padding:24px 24px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sc-header { display:flex; align-items:center; gap:10px; }
.sc-title { font-family:'Sora', sans-serif; font-weight:700; font-size:16px; }
.sc-desc  { font-size:13.5px; color:var(--muted); line-height:1.65; }

/* ─────────────────────────────────────────────
   ⑤ COMO FUNCIONA
───────────────────────────────────────────── */
#como { padding:var(--sp); background:var(--bg-base); position:relative; z-index:1; }

.como-head { text-align:center; max-width:580px; margin:0 auto 64px; }
.como-head h2 { margin-bottom:16px; }
.como-head p  { color:var(--muted); }

.steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(248,168,0,.08); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(248,168,0,.08);
}
@media(max-width:640px){ .steps { grid-template-columns:1fr; } }

.step { background:var(--bg-card); display:flex; flex-direction:column; }

/* ── IMAGENS STEPS ───────────────────────────────────────
   Step 01 → src="images/step-01.jpg"  (pessoa a falar no telemóvel / WhatsApp)
   Step 02 → src="images/step-02.jpg"  (designer a trabalhar / reunião de estratégia)
   Step 03 → src="images/step-03.jpg"  (empresário feliz / negócio cheio de clientes)
   Tamanho recomendado: 600 × 400 px, JPG, qualidade 80%
──────────────────────────────────────────────────────── */
.step-img { height:210px; overflow:hidden; }
.step-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.38) saturate(.5); transition:filter .5s; will-change:transform; }
.step:hover .step-img img { filter:brightness(.58) saturate(.9); }

.step-body { padding:28px 26px 32px; flex:1; display:flex; flex-direction:column; gap:12px; }
.step-num-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--grad); color:#000;
  font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:18px;
}
.step-body h3 { font-size:17px; }
.step-body p  { font-size:13.5px; color:var(--muted); line-height:1.65; }

/* ─────────────────────────────────────────────
   ⑥ RESULTADOS
───────────────────────────────────────────── */
#resultados { padding:var(--sp); background:var(--bg-panel); z-index:1; position:relative; }

.res-head { margin-bottom:52px; }
.res-head h2 { margin-bottom:14px; }
.res-head p  { color:var(--muted); max-width:520px; font-size:16px; }

.results-layout { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
@media(max-width:640px){ .results-layout { grid-template-columns:1fr; } }

.result-big { grid-row:span 2; position:relative; overflow:hidden; background:var(--bg-card); }
@media(max-width:640px){ .result-big { grid-row:span 1; } }

/* ── IMAGEM RESULTADO PRINCIPAL ──────────────────────────
   Sugestão: foto de vitrine movimentada, ou pessoa feliz
   a receber clientes / notificações no telemóvel.
   No VS Code: src="images/resultado-main.jpg"  (900×700px)
──────────────────────────────────────────────────────── */
.result-big img { width:100%; height:100%; min-height:380px; object-fit:cover; filter:brightness(.42) contrast(1.1); transition:filter .5s; }
.result-big:hover img { filter:brightness(.58); }
.result-big-text {
  position:absolute; bottom:0; left:0; right:0; padding:32px 28px;
  background:linear-gradient(to top, rgba(0,0,0,.95) 0%, transparent 70%);
}
.result-big-text .num {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:clamp(56px,8vw,88px); line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.result-big-text h3 { font-size:17px; margin-bottom:6px; }
.result-big-text p  { font-size:13.5px; color:rgba(255,255,255,.6); }

.result-small {
  background:var(--bg-card); padding:28px 26px;
  display:flex; flex-direction:column; gap:10px;
  border-left:2px solid transparent; transition:border-color .3s, background .3s;
}
.result-small:hover { border-color:var(--g2); background:var(--bg-raised); }
.result-small h3 { font-size:15.5px; }
.result-small p  { font-size:13px; color:var(--muted); line-height:1.6; }

/* ─────────────────────────────────────────────
   ⑦ PROVA SOCIAL
───────────────────────────────────────────── */
#prova { padding:var(--sp); background:var(--bg-base); position:relative; z-index:1; }

.prova-head { text-align:center; margin-bottom:52px; }
.prova-head h2 { margin-bottom:14px; }
.prova-head p  { color:var(--muted); max-width:480px; margin:0 auto; }

.testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.tcard {
  background:var(--bg-card); border:1px solid rgba(248,168,0,.1);
  border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.tcard:hover { transform:translateY(-6px); border-color:var(--b-gold); box-shadow:0 24px 64px rgba(248,168,0,.08); }

/* ── IMAGENS TESTEMUNHOS ──────────────────────────────────
   Sugestão: usar as fotos reais dos clientes (com permissão)
   ou fotos neutrais de empresários angolanos.
   tcard-01 → src="images/cliente-mario.jpg"   (homem, salão)
   tcard-02 → src="images/cliente-ana.jpg"     (mulher, restaurante)
   tcard-03 → src="images/cliente-joao.jpg"    (homem, loja)
   Tamanho recomendado: 500 × 300px, JPG, object-position: center top
──────────────────────────────────────────────────────── */
.tcard-img { height:150px; overflow:hidden; }
.tcard-img img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:brightness(.5) saturate(.6); }

.tcard-body { padding:26px; flex:1; }
.tcard-quote {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:56px; line-height:.8; margin-bottom:6px;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:.28;
}
.tcard-body p { font-size:14.5px; color:rgba(255,255,255,.72); font-style:italic; line-height:1.7; margin-bottom:20px; }
.tcard-author { display:flex; align-items:center; gap:12px; }
.tcard-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--grad); color:#000;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora', sans-serif; font-weight:800; font-size:14px; flex-shrink:0;
}
.tcard-name  { font-weight:700; font-size:13.5px; font-family:'Sora', sans-serif; }
.tcard-role  { font-size:11.5px; color:var(--muted); }
.tcard-stars {
  font-size:11px; margin-top:2px;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ─────────────────────────────────────────────
   ⑧ GARANTIA
───────────────────────────────────────────── */
#garantia {
  padding:clamp(60px,9vw,100px) clamp(22px,5vw,52px);
  background:var(--bg-panel);
  border-top:1px solid var(--b-gold); border-bottom:1px solid var(--b-gold);
  position:relative; overflow:hidden; z-index:1;
}
#garantia::before {
  content:''; position:absolute; inset:0;
  background:var(--grad-glow); opacity:.5; pointer-events:none;
}
.garantia-wrap {
  max-width:820px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:center;
  position:relative; z-index:1;
}
@media(max-width:600px){ .garantia-wrap { grid-template-columns:1fr; gap:28px; text-align:center; } }

.garantia-badge {
  width:120px; height:120px; border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(var(--bg-panel),var(--bg-panel)) padding-box, var(--grad) border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  animation:badge-spin-glow 4s ease-in-out infinite;
}
@keyframes badge-spin-glow {
  0%,100%{ box-shadow:0 0 0 0 rgba(248,168,0,.2); }
  50%    { box-shadow:0 0 32px 4px rgba(248,168,0,.35); }
}
.garantia-badge .icon { font-size:32px; }
.garantia-badge .text {
  font-family:'Sora', sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-align:center; line-height:1.3;
}
.garantia-text h2 { font-size:clamp(32px,5vw,56px); margin-bottom:14px; }
.garantia-text p  { color:var(--muted); font-size:15.5px; line-height:1.75; }
.garantia-text p strong { color:var(--white); }

/* ─────────────────────────────────────────────
   ⑨ PLANOS
───────────────────────────────────────────── */
#planos { padding:var(--sp); background:var(--bg-base); position:relative; z-index:1; }

.planos-head { text-align:center; max-width:600px; margin:0 auto 52px; }
.planos-head h2 { margin-bottom:14px; }
.planos-head p  { color:var(--muted); }

.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.plan {
  background:var(--bg-card); border:1px solid rgba(248,168,0,.12);
  border-radius:var(--r-lg); padding:40px 30px;
  display:flex; flex-direction:column; gap:20px; position:relative;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.plan:hover { transform:translateY(-6px); border-color:var(--b-gold); box-shadow:0 28px 80px rgba(248,168,0,.1); }
.plan.star {
  border-color:transparent;
  background:linear-gradient(var(--bg-raised),var(--bg-raised)) padding-box, var(--grad) border-box;
}
.plan-badge {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#000;
  font-family:'Sora', sans-serif; font-size:10px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 20px; border-radius:100px; white-space:nowrap;
}
.plan-name {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  font-size:30px; letter-spacing:.04em; text-transform:uppercase;
}
.plan-tagline { font-size:13px; color:var(--muted); margin-top:-14px; }
.plan-price   { display:flex; align-items:baseline; gap:4px; }
.plan-price .cur {
  font-family:'Sora', sans-serif; font-size:16px; font-weight:700;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.plan-price .amt {
  font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:54px; line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.plan-price .per { font-size:13px; color:var(--muted); }
.plan-line { height:1px; background:rgba(248,168,0,.12); }
.plan-feats { list-style:none; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-feats li {
  font-size:13.5px; color:rgba(255,255,255,.76);
  display:flex; gap:10px; align-items:flex-start; line-height:1.5;
}
.plan-feats li::before {
  content:''; display:block; width:16px; height:16px; border-radius:50%;
  background:var(--grad); flex-shrink:0; margin-top:2px;
}
.plan-feats li.no { color:rgba(255,255,255,.25); }
.plan-feats li.no::before { background:rgba(255,255,255,.1); }

/* ─────────────────────────────────────────────
   ⑩ ESCASSEZ
───────────────────────────────────────────── */
#escassez {
  padding:36px clamp(22px,5vw,52px);
  background:var(--bg-panel);
  border-top:1px solid rgba(248,168,0,.2); border-bottom:1px solid rgba(248,168,0,.2);
  position:relative; z-index:1;
}
#escassez::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(248,168,0,.05) 0%, transparent 50%, rgba(248,168,0,.05) 100%);
}
.esc-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap; text-align:center; position:relative; z-index:1;
}
.esc-msg { font-size:clamp(13.5px,2vw,15.5px); }
.esc-msg strong {
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-weight:800;
}
#countdown { display:flex; gap:4px; align-items:center; }
.cdb {
  background:var(--grad); color:#000;
  font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:32px;
  padding:4px 14px; border-radius:8px; min-width:48px; text-align:center; line-height:1.2;
}
.cds {
  font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:28px;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ─────────────────────────────────────────────
   ⑪ CTA FINAL
───────────────────────────────────────────── */
#cta-final { padding:var(--sp); position:relative; overflow:hidden; z-index:1; }

.cta-final-bg { position:absolute; inset:0; z-index:0; }
/* ── IMAGEM CTA FINAL ────────────────────────────────────
   Sugestão: foto de cidade de Luanda à noite, ou equipa
   profissional em reunião. Tamanho: 1400×800px
   No VS Code: src="images/cta-final-bg.jpg"
──────────────────────────────────────────────────────── */
.cta-final-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(.14) contrast(1.2); }
.cta-final-bg::after {
  content:''; position:absolute; inset:0;
  background:var(--grad-glow),
    linear-gradient(to bottom, var(--bg-base) 0%, transparent 25%, transparent 75%, var(--bg-base) 100%);
}
.cta-final-inner { max-width:720px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.cta-final-inner h2 { margin-bottom:18px; }
.lead {
  font-size:clamp(15px,2.2vw,18px); color:rgba(255,255,255,.65);
  margin-bottom:44px; font-weight:300;
}
.lead strong { color:var(--white); font-weight:600; }
.cta-sub { margin-top:18px; font-size:12.5px; color:rgba(255,255,255,.28); }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
footer {
  padding:26px clamp(22px,5vw,52px);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  position:relative; z-index:1;
}
.f-logo { font-family:'Sora', sans-serif; font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px; }
.f-logo-mark {
  width:28px; height:28px; border-radius:5px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed', sans-serif; font-weight:900; font-size:16px; color:#000;
}
.f-logo-text { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.f-copy   { font-size:11.5px; color:rgba(255,255,255,.25); }
.f-links  { display:flex; gap:20px; }
.f-links a { font-size:11.5px; color:rgba(255,255,255,.32); letter-spacing:.08em; text-transform:uppercase; transition:color .25s; }
.f-links a:hover { color:var(--g1); }

/* ─────────────────────────────────────────────
   WA FLOAT
───────────────────────────────────────────── */
.wa-float {
  position:fixed; bottom:26px; right:26px; z-index:400;
  background:#25D366; color:white;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(37,211,102,.45);
  transition:transform .3s var(--ease);
  animation:wa-pop 3.2s infinite;
}
.wa-float:hover { transform:scale(1.12); }
@keyframes wa-pop {
  0%,100%{ box-shadow:0 6px 28px rgba(37,211,102,.45); }
  50%    { box-shadow:0 6px 44px rgba(37,211,102,.7); }
}