/* =========================
   NAVIGATION
   ========================= */

/* You can apply .site-nav and .site-nav-link
   in HTML later if you want, but not required */

.site-nav {
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-slate-200);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.site-nav-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--color-navy);
}

.site-nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-slate-600);
}

.site-nav-link:hover {
    color: var(--color-sage);
}

/* =========================
   HERO SECTION (platform)
   ========================= */

#platform {
    color: #ffffff;
}

#platform h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
}

@media (min-width: 768px) {
    #platform h1 {
        font-size: var(--font-size-5xl);
    }
}

@media (min-width: 1024px) {
    #platform h1 {
        font-size: var(--font-size-6xl);
    }
}

#platform p {
    color: var(--color-slate-300);
}

#platform .hero-tag {
    font-size: var(--font-size-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* =========================
   TRUST BAR / CASES SECTION
   ========================= */

#cases {
    background-color: #ffffff;
}

#cases p {
    color: var(--color-slate-500);
}

#cases .logo-marquee {
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

#cases .logo-marquee:hover {
    opacity: 1;
}

/* =========================
   METRICS STRIP
   ========================= */

.metrics-section {
    background-color: #ffffff;
}

.metrics-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-slate-900);
}

.metrics-label {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
}

/* =========================
   BUTTONS
   ========================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-lg {
    font-size: var(--font-size-base);
    padding: 0.75rem 1.75rem;
}

/* Primary orange CTA */

.btn-primary {
    background-color: var(--color-orange);
    color: #ffffff;
    box-shadow: var(--shadow-orange);
}

.btn-primary:hover {
    background-color: #d97706;
}

/* Dark secondary button (hero secondary CTA) */

.btn-secondary {
    background-color: rgba(15, 23, 42, 0.7);
    color: #ffffff;
    border-color: #1f2937;
}

.btn-secondary:hover {
    background-color: #1f2937;
}

/* Outline variants (offers) */

.btn-outline-orange {
    background-color: transparent;
    color: var(--color-orange);
    border-width: 2px;
    border-color: var(--color-orange);
    box-shadow: none;
}

.btn-outline-orange:hover {
    background-color: var(--color-orange);
    color: #ffffff;
}

.btn-outline-navy {
    background-color: transparent;
    color: var(--color-navy);
    border-width: 2px;
    border-color: var(--color-navy);
    box-shadow: none;
}

.btn-outline-navy:hover {
    background-color: var(--color-navy);
    color: #ffffff;
}

/* Simple helper you used in original CSS */

.hover-bg-orange:hover {
    background-color: #d97706;
}

/* =========================
   CARDS
   ========================= */

.card {
    background-color: #ffffff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-slate-200);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.card-compact {
    padding: 1.25rem;
}

/* Hover variants */

.card-hover-sage {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-hover-sage:hover {
    border-color: var(--color-sage);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.card-hover-orange {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-hover-orange:hover {
    border-color: var(--color-orange);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.3);
    transform: translateY(-2px);
}

.card-hover-navy {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-hover-navy:hover {
    border-color: var(--color-navy);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
    transform: translateY(-2px);
}

/* =========================
   CUSTOMER RESULTS SECTION
   ========================= */

#customer-results h2 {
    color: var(--color-navy);
}

#customer-results p {
    color: var(--color-slate-600);
}

/* =========================
   GUIDED PATHS (Where do you want to improve first)
   ========================= */

section.bg-vapor {
    background-color: var(--color-vapor);
}

/* Could be used if you give this section an id later */
.guided-paths-title {
    font-size: var(--font-size-2xl);
    color: var(--color-navy);
}

/* =========================
   ASK TITAN SECTION
   ========================= */

#ask-titan {
    background-color: #ffffff;
}

#ask-titan h2 {
    font-size: var(--font-size-3xl);
    color: var(--color-navy);
}

#ask-titan p {
    color: var(--color-slate-600);
}

/* Chat bubble styling if needed */

#titan-chat .user-bubble {
    background-color: #eff6ff;
    color: #1d4ed8;
}

#titan-chat .titan-bubble {
    background-color: var(--color-slate-50);
    color: var(--color-slate-800);
}

/* =========================
   TECH STEPS (WHY US)
   ========================= */

.tech-step {
    opacity: 0.5;
    transform: translateY(4px);
    border: 1px solid #1f2937;
    border-radius: 0.5rem;
    background-color: #020617;
}

.tech-step-active {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(16, 185, 129, 0.9);
    box-shadow: var(--shadow-strong);
}

.tech-step-icon {
    color: #9ca3af;
}

.tech-step-active .tech-step-icon {
    color: var(--color-sage);
    transform: translateY(-1px);
}

/* Arrows between steps */

.tech-arrow {
    color: var(--color-slate-500);
}

.tech-arrow-active {
    color: var(--color-sage);
    transform: translateY(4px);
}

/* =========================
   WHY US SECTION BASE
   ========================= */

#why-us {
    background-color: var(--color-slate-900);
    color: #ffffff;
}

#why-us h2 {
    color: #ffffff;
}

#why-us p {
    color: var(--color-slate-400);
}

/* =========================
   OFFERS / DEMO SECTION
   ========================= */

#demo {
    background-color: #ffffff;
}

#demo h2 {
    text-align: center;
    color: var(--color-navy);
}

#demo p {
    color: var(--color-slate-600);
}

/* =========================
   EBOOK / FORM SECTION
   ========================= */

#ebook {
    background-color: #ffffff;
}

#ebook h2 {
    color: var(--color-navy);
}

#ebook p {
    color: var(--color-slate-600);
}

/* Form controls */

#ebook input[type="text"],
#ebook input[type="email"],
#ebook select {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-300);
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    background-color: #ffffff;
    color: var(--color-slate-800);
}

#ebook input[type="text"]:focus,
#ebook input[type="email"]:focus,
#ebook select:focus {
    outline: none;
    border-color: var(--color-sage);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
}

/* Consent checkbox */

#ebook input[type="checkbox"] {
    accent-color: var(--color-sage);
}

/* =========================
   FAQ SECTION
   ========================= */

.faq-section {
    background-color: var(--color-vapor);
}

.faq-question {
    font-weight: 600;
    color: var(--color-navy);
}

.faq-answer {
    font-size: var(--font-size-sm);
    color: var(--color-slate-700);
}

/* =========================
   FOOTER
   ========================= */

footer {
    background-color: var(--color-navy);
    color: var(--color-slate-400);
}

footer h4,
footer .footer-title {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 1rem;
}

footer p {
    color: var(--color-slate-400);
}

footer a {
    color: var(--color-slate-400);
}

footer a:hover {
    color: #ffffff;
}

.footer-cert-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}