/* ===========================
   Tema escuro / techno Rondi3D
   =========================== */
:root{
  --bg-deep: #0a1228;      /* fundo geral */
  --bg-panel:#0f1b3d;      /* cartões */
  --ink:#e6f0ff;           /* texto principal */
  --muted:#9db4d6;         /* texto secundário */
  --line:rgba(91,156,246,.28);
  --brand:#5b9cf6;         /* azul Rondi */
  --brand-2:#22d3ee;       /* ciano de apoio */
  --brand-3:#7c3aed;       /* roxo leve para detalhes */
}

.appcalc--dark{
  color:var(--ink);
}
.appcalc--dark .form-text{ color:var(--muted); }
.appcalc--dark a{ color:#bfe2ff; }
.appcalc--dark a:hover{ color:#fff; }

/* deixa o bloco principal "respirar" no fundo escuro */
.appcalc--dark section{ position:relative; z-index:1; }

/* Hero com grid techno (duas camadas) */
.appcalc-hero{
  background:transparent;
  border-radius:18px;
  overflow:hidden;
  position:relative;
}
.appcalc-hero__bg{
  position:absolute; inset:0;
  background:
    /* linhas verticais */
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/52px 100%,
    /* linhas horizontais */
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/52px 52px,
    /* gradiente profundo */
    radial-gradient(1200px 420px at -10% -20%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1200px 420px at 110% 120%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(180deg, #0c1636 0%, #0a1228 100%);
  filter: saturate(1.05);
}
.appcalc-hero .card-body{ color:var(--ink); }

/* Cartões escuros elegantes */
.appcalc--dark .card{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 16px;
}
.appcalc--dark .card .card-body p{ color:var(--muted); }
.appcalc--dark .card img{
  display:block; width:100%; height:auto;
  background:#060b1a;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}

/* Botões */
.appcalc--dark .btn-primary{
  background: linear-gradient(90deg, var(--brand) 0%, #3b82f6 100%);
  border:1px solid #6aa7ff;
  color:#fff;
}
.appcalc--dark .btn-primary:hover{
  filter:brightness(1.05) saturate(1.05);
}
.appcalc--dark .btn-outline-light{
  color:#e9f2ff; border-color:#c7d7ff;
}
.appcalc--dark .btn-outline-light:hover{
  background:#e9f2ff; color:#0a1228;
}
.appcalc--dark .btn-brand{
  background: linear-gradient(90deg, var(--brand-2) 0%, var(--brand) 100%);
  border:0; color:#0a1228; font-weight:700;
}

/* Inputs escuros */
.appcalc--dark .form-control{
  background:#0b1533;
  border:1px solid var(--line);
  color:var(--ink);
}
.appcalc--dark .form-control::placeholder{ color:#86a2cc; }

/* Seção final (CTA) com o mesmo grid techno invertido */
.appcalc-call{
  position:relative; border-radius:18px;
}
.appcalc-call__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/52px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/52px 52px,
    radial-gradient(1200px 380px at 110% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1200px 420px at -10% 120%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(180deg, #0b1533 0%, #091026 100%);
}

/* Ajustes tipográficos */
.appcalc--dark h1, .appcalc--dark .h1,
.appcalc--dark h2, .appcalc--dark .h2,
.appcalc--dark h3, .appcalc--dark .h3{
  letter-spacing:.2px;
}

/* Pequenos respiros em mobile */
@media (max-width: 575.98px){
  .appcalc-hero .card-body,
  .appcalc-call .card-body{ padding:22px !important; }
}

/* Evita “faixa branca” lateral por overflow de imagens */
.appcalc--dark img{ max-width:100%; height:auto; }

/* Bordas mais sutis nos cartões com imagem */
.appcalc--dark .card.shadow-sm{ box-shadow: 0 12px 32px rgba(0,0,0,.25); }