* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: #F7F9FB; color: #0F172A; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', sans-serif; }

.gradient-primary { background: linear-gradient(135deg, #0B2545 0%, #133B5C 100%); }
.gradient-accent { background: linear-gradient(135deg, #1FC7A1 0%, #4EE0C3 100%); }
.gradient-subtle { background: linear-gradient(135deg, rgba(11,37,69,0.03) 0%, rgba(31,199,161,0.05) 100%); }
.text-gradient { background: linear-gradient(135deg, #0B2545 0%, #1FC7A1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

.card-hover { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1); }

.btn-primary {
    background: linear-gradient(135deg, #1FC7A1 0%, #4EE0C3 100%);
    color: #0B2545; font-weight: 600; padding: 16px 36px; border-radius: 14px;
    transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; border: none; cursor: pointer; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(31,199,161,0.4); }

.btn-secondary {
    background: transparent; color: #0B2545; font-weight: 600; padding: 16px 36px; border-radius: 14px;
    border: 2px solid #E2E8F0; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { border-color: #1FC7A1; background: rgba(31,199,161,0.05); }

.chat-bubble-user {
    background: linear-gradient(135deg, #0B2545 0%, #133B5C 100%);
    color: white; padding: 16px 20px; border-radius: 20px 20px 4px 20px;
    max-width: 85%; position: relative;
}
.chat-bubble-ai {
    background: #FFFFFF; color: #0F172A; padding: 16px 20px; border-radius: 20px 20px 20px 4px;
    border: 1px solid #E2E8F0; max-width: 90%; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.phone-mockup {
    background: white; border-radius: 40px; padding: 12px;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15), 0 0 0 1px rgba(226,232,240,0.5);
    position: relative;
}
.phone-mockup::before {
    content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    width: 120px; height: 28px; background: #F7F9FB; border-radius: 20px; z-index: 10;
}
.phone-screen {
    background: #F7F9FB; border-radius: 30px; overflow: hidden; min-height: 500px;
}

.progress-bar { background: linear-gradient(90deg, #1FC7A1, #4EE0C3); height: 100%; border-radius: 999px; transition: width 1.5s ease-out; }

@media (max-width: 768px) {
    .phone-mockup { border-radius: 28px; }
    .phone-screen { border-radius: 20px; min-height: 420px; }
}

.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: #1FC7A1; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

.section-padding { padding: 120px 0; }
@media (max-width: 768px) { .section-padding { padding: 80px 0; } }

.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
.mobile-menu.open { transform: translateX(0); }

.comparison-card { transition: all 0.3s ease; }
.comparison-card:hover { transform: scale(1.02); }

.hero-bg-pattern {
    background-image: radial-gradient(circle at 20% 50%, rgba(31,199,161,0.08) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(11,37,69,0.05) 0%, transparent 50%);
}

.insight-card {
    background: white; border-radius: 16px; padding: 16px; border: 1px solid #E2E8F0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* FAQ */
.faq-item { transition: border-color 0.2s ease; }
.faq-trigger { cursor: pointer; background: none; border: none; }
.faq-trigger:hover .faq-icon { color: #1FC7A1; }
.faq-content { animation: fadeDown 0.25s ease; }
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stars fill */
.fill-warning { fill: #F59E0B; }

/* CTA dark bg secondary button */
.btn-secondary.border-white\/30 { border-color: rgba(255,255,255,0.3); color: white; }
.btn-secondary.border-white\/30:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }