:root {
    --background-color: #09111f;
    --surface-color: #0f1b31;
    --text-color: #f4f7fb;
    --primary-action-color: #90f2c2;
    --secondary-action-color: #7aa6ff;
    --font-family: "Fraunces";
    --font-size: 16px;
}

body {
    --background-color: #09111f;
    --surface-color: #0f1b31;
    --text-color: #f4f7fb;
    --primary-action-color: #90f2c2;
    --secondary-action-color: #7aa6ff;
}

html, body {
    height: 100%;
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
    radial-gradient(circle at top left, rgba(122, 166, 255, 0.18), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(144, 242, 194, 0.14), transparent 22%),
    linear-gradient(135deg, #07101c 0%, #09111f 45%, #0c1730 100%);
    color: var(--text-color);
    font-family: "Manrope", sans-serif;
}

.glass-panel {
    background: rgba(15, 27, 49, 0.7);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.main-tab {
    transition: all 0.3s ease;
}

/* Estado ativo */
.tab-active {
    background: var(--primary-action-color);
    color: #09111f;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* Estado inativo */
.tab-inactive {
    background: rgba(255, 255, 255, 0.02); /* ou 0.03 */
}

/* Hover bonito */
.tab-inactive:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.hero-title {
    font-family: "Fraunces", serif;
    letter-spacing: -0.03em;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUp 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }
.delay-4 { animation-delay: 0.48s; }
.delay-5 { animation-delay: 0.6s; }

@keyframes fadeUp {
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

.grid-glow {
    position: absolute;
    inset: 0;
    background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    pointer-events: none;
}

.metric-card:hover,
.feature-card:hover,
.benefit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(144, 242, 194, 0.38);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
}

.metric-card,
.feature-card,
.benefit-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pill {
    background: rgba(144, 242, 194, 0.12);
    color: var(--primary-action-color);
    border: 1px solid rgba(144, 242, 194, 0.2);
}

.input-style {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    outline: none;
    transition: all 0.2s;
}

.input-style:focus {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
}