/* =========================================
   PRISMA LABS — DESIGN SYSTEM COMPARTILHADO
   Usado por index.html e projeto-ideiateam.html
   ========================================= */

:root {
    --bg-dark: #021029;
    --bg-card: rgba(3, 16, 32, 0.5);
    --gold: #3B82F6; /* primary accent (kept name for minimal edits) */
    --gold-glow: rgba(59, 130, 246, 0.12);
    --blue-glow: rgba(96, 165, 250, 0.06);
    --text-main: #F8FAFC;
    --text-muted: #9FB8DA;
    --border-glass: rgba(59, 130, 246, 0.08);
    --surface: rgba(3, 16, 32, 0.78);
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    background-image:
        radial-gradient(circle at 10% 20%, var(--gold-glow) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, var(--blue-glow) 0%, transparent 40%);
    overflow-x: hidden;
    line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }

/* Acessibilidade: respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Foco visível para navegação por teclado */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* --- BOTÃO GRANDE (hero / links secundários) --- */
.btn-large {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-glass);
    color: var(--text-main); font-size: 1.1rem; font-weight: 600; padding: 18px 40px;
    border-radius: 50px; text-decoration: none; transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}
.btn-large:hover { background: var(--gold); color: #000; border-color: var(--gold); box-shadow: 0 0 30px var(--gold-glow); }

/* Variante sólida (dourada), usada nas seções de CTA final */
.btn-large.btn-gold {
    background: linear-gradient(135deg, #60A5FA 0%, var(--gold) 100%);
    color: #020617; border: none; box-shadow: 0 18px 45px rgba(59, 130, 246, 0.16);
}
.btn-large.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(59, 130, 246, 0.22); color: #020617; }

/* --- CTA FINAL (idêntica nas duas páginas) --- */
.cta-section {
    text-align: center; padding: 100px 5%; max-width: 980px; margin: 0 auto;
}
.cta-section h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 20px; line-height: 1.1; }
.cta-section p { color: var(--text-muted); margin-bottom: 40px; font-size: 1.05rem; max-width: 640px; margin-inline: auto; line-height: 1.7; }

/* --- FOOTER --- */
footer {
    border-top: 1px solid var(--border-glass); padding: 40px 5%; text-align: center;
    color: var(--text-muted); font-size: 0.85rem;
}

/* --- ANIMAÇÃO DE REVEAL --- */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 480px) {
    .cta-section { padding: 64px 6%; }
}