/* ─── Global ─────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Navbar ─────────────────────────────────────── */
#navbar { background: transparent; }

/* Logo: trắng trên hero (transparent), màu gốc khi scrolled */
.logo-img {
    height: 36px; width: auto;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}
#navbar.scrolled .logo-img { filter: none; }

#navbar.scrolled {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.07);
}

/* Nav links: white on hero, dark when scrolled */
.nav-link { color: rgba(255,255,255,0.85); transition: color 0.2s, background 0.2s; }
.nav-link:hover { color: #fff; }
#navbar.scrolled .nav-link { color: #4B5563; }
#navbar.scrolled .nav-link:hover { color: #7C3AED; background: #F5F3FF; }

/* Home link */
.nav-home { font-weight: 600; }
#navbar.scrolled .nav-home { color: #111827; }

/* Divider */
.nav-divider { background: currentColor; }

/* Pill group container — transparent on hero, gray on scroll */
.nav-pill-group {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s, border-color 0.3s;
}
#navbar.scrolled .nav-pill-group {
    background: #ffffff;
    border-color: #D1D5DB;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), inset 0 0 0 1px rgba(0,0,0,0.03);
}

/* Segment links inside pill group */
.nav-seg {
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    transition: color 0.15s, background 0.15s;
}
.nav-seg:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}
#navbar.scrolled .nav-seg { color: #374151; font-weight: 500; }
#navbar.scrolled .nav-seg:hover { color: #7C3AED; background: #EDE9FE; }

/* Dropdown */
.dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 0.875rem; color: #374151;
    transition: background 0.15s;
}
.dropdown-item:hover { background: #F5F3FF; color: #7C3AED; }

/* ─── Hero ──────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg, #4C1D95 0%, #3730A3 40%, #1E40AF 100%);
}
.hero-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Animated background blobs */
.blob {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.4;
    animation: drift 12s ease-in-out infinite alternate;
}
.blob-1 { width: 600px; height: 600px; top: -100px; left: -150px; background: radial-gradient(circle, #7C3AED, transparent); animation-duration: 14s; }
.blob-2 { width: 500px; height: 500px; bottom: -80px; right: -100px; background: radial-gradient(circle, #2563EB, transparent); animation-duration: 10s; animation-delay: -4s; }
.blob-cta-1 { width: 400px; height: 400px; top: -80px; left: 0; background: radial-gradient(circle, #7C3AED, transparent); }
.blob-cta-2 { width: 400px; height: 400px; bottom: -80px; right: 0; background: radial-gradient(circle, #1D4ED8, transparent); animation-delay: -6s; }

@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, 30px) scale(1.08); }
}

/* Progress bar animation */
@keyframes progress-fill {
    0%   { width: 20%; }
    50%  { width: 80%; }
    100% { width: 60%; }
}
.animate-progress { animation: progress-fill 3s ease-in-out infinite alternate; }

/* Fade in animations */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-down { animation: fadeInDown 0.6s ease both; }
.animate-fade-in-up   { animation: fadeInUp  0.6s ease both; }
.animate-fade-in-left { animation: fadeInLeft 0.7s ease both; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* ─── Section badges ─────────────────────────────── */
.section-badge {
    display: inline-block;
    background: #F3E8FF; color: #7C3AED;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
}
.section-badge-dark {
    display: inline-block;
    background: rgba(124,58,237,0.2); color: #C4B5FD;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
}

/* ─── Pain cards ─────────────────────────────────── */
.pain-card {
    background: #F9FAFB; border: 1px solid #F3F4F6;
    border-radius: 20px; padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pain-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.pain-icon { font-size: 2.5rem; margin-bottom: 16px; }

/* ─── How it works ───────────────────────────────── */
.how-step { text-align: center; position: relative; }
.step-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; position: relative; z-index: 1;
}
.step-number {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
    color: #9CA3AF; text-transform: uppercase; margin-bottom: 8px;
}

/* ─── Feature cards ──────────────────────────────── */
.feature-card {
    padding: 32px; border: 1px solid #F3F4F6; border-radius: 24px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(124,58,237,0.1);
    border-color: #E9D5FF;
}
.feature-icon { font-size: 2.5rem; margin-bottom: 20px; }

/* ─── Comparison table ───────────────────────────── */
table tbody tr td:last-child { background: #FAF5FF; }
table tbody tr:last-child td:first-child { border-radius: 0 0 0 16px; }
table tbody tr:last-child td:last-child  { border-radius: 0 0 16px 0; }

/* ─── Integration badges ─────────────────────────── */
.integration-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 12px;
    color: white; font-size: 0.875rem; font-weight: 600;
    transition: transform 0.15s, opacity 0.15s;
}
.integration-badge:hover { transform: translateY(-2px); opacity: 0.85; }

/* ─── Use case cards ─────────────────────────────── */
.usecase-card {
    display: block; padding: 28px; background: white;
    border: 2px solid #F3F4F6; border-radius: 24px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
}
.usecase-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(124,58,237,0.12);
    border-color: #DDD6FE;
}
.usecase-emoji { font-size: 2.5rem; margin-bottom: 14px; }
.usecase-cta { font-size: 0.875rem; font-weight: 600; color: #7C3AED; }

/* ─── FAQ ────────────────────────────────────────── */
.faq-item { background: white; border-radius: 16px; overflow: hidden; border: 1px solid #F3F4F6; }
.faq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 24px; text-align: left;
    font-weight: 600; font-size: 0.95rem; color: #111827;
    background: white; cursor: pointer; transition: background 0.15s;
}
.faq-question:hover { background: #FAFAFA; }
.faq-icon { transition: transform 0.25s ease; }
.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease, padding 0.25s ease;
    padding: 0 24px;
}
.faq-answer.open { max-height: 400px; padding: 4px 24px 20px; }
.faq-answer p { font-size: 0.9rem; color: #6B7280; line-height: 1.7; }
.faq-icon.rotated { transform: rotate(180deg); }

/* ─── Pricing ────────────────────────────────────── */
.pricing-card {
    position: relative; padding: 32px;
    border: 2px solid #F3F4F6; border-radius: 24px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.pricing-card-featured {
    background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
    border-color: transparent;
    padding-top: 44px;
    box-shadow: 0 20px 60px rgba(124,58,237,0.3);
}
/* Billing toggle */
.billing-btn { color: #6B7280; background: transparent; }
.billing-btn.active { background: white; color: #111827; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

.pricing-card-agency {
    border: 2px solid #1F2937;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
}
.pricing-card-agency:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }

.pricing-feature { display: flex; align-items: center; gap: 10px; }
.pricing-check { color: #7C3AED; font-weight: 700; }

/* ─── Testimonials ───────────────────────────────── */
.testimonial-card {
    background: white; border: 1px solid #F3F4F6;
    border-radius: 24px; padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.testimonial-featured {
    background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(124,58,237,0.25);
}

/* ─── Mobile sticky CTA ──────────────────────────── */
.mobile-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    padding: 12px 16px 20px;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 70%, transparent);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.mobile-cta-bar.visible { transform: translateY(0); }

/* ─── FAQ fix ────────────────────────────────────── */
.faq-answer.open { max-height: 600px; padding: 4px 24px 20px; }