/* ============================================
   GiveItPoints Index Page: "Modern SaaS" Theme
   Deep indigo + teal accents. No purple.
   Light/dark mode with semantic variables.
   All contrast ratios meet WCAG 2.1 AA.
   ============================================ */

/* --- Design Tokens --- */
:root {
    /* Primary: Deep Indigo (blue-indigos, NOT purple) */
    --ms-indigo-950: #0a0e1f;
    --ms-indigo-900: #111833;
    --ms-indigo-800: #1a2547;
    --ms-indigo-700: #243360;
    --ms-indigo-600: #2e4278;
    --ms-indigo-500: #3d5a9e;
    --ms-indigo-400: #5b7cc2;
    --ms-indigo-300: #8da4d8;
    --ms-indigo-200: #b8c9e8;
    --ms-indigo-100: #dce4f3;
    --ms-indigo-50: #f0f3fa;

    /* Accent: Vibrant Teal */
    --ms-teal-700: #0a6b6e;
    --ms-teal-600: #0d7377;
    --ms-teal-500: #14b8a6;
    --ms-teal-400: #2dd4bf;
    --ms-teal-300: #5eead4;
    --ms-teal-200: #99f6e4;
    --ms-teal-100: #ccfbf1;
    --ms-teal-50: #f0fdfa;

    /* Secondary Accent: Warm Amber */
    --ms-amber-600: #d97706;
    --ms-amber-500: #f59e0b;
    --ms-amber-400: #fbbf24;
    --ms-amber-300: #fcd34d;
    --ms-amber-200: #fde68a;

    /* Neutrals: Cool Slate */
    --ms-slate-900: #0f172a;
    --ms-slate-800: #1e293b;
    --ms-slate-700: #334155;
    --ms-slate-600: #475569;
    --ms-slate-500: #64748b;
    --ms-slate-400: #94a3b8;
    --ms-slate-300: #cbd5e1;
    --ms-slate-200: #e2e8f0;
    --ms-slate-100: #f1f5f9;
    --ms-slate-50: #f8fafc;

    /* Shadows */
    --ms-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --ms-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --ms-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --ms-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --ms-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.2);
    --ms-shadow-glow: 0 0 60px rgba(20, 184, 166, 0.15);

    /* Radii */
    --ms-radius-sm: 0.375rem;
    --ms-radius-md: 0.5rem;
    --ms-radius-lg: 0.75rem;
    --ms-radius-xl: 1rem;
    --ms-radius-2xl: 1.5rem;
    --ms-radius-full: 9999px;
}

/* --- Semantic Theme Variables (light mode = default) --- */
.index-page {
    /* Page */
    --idx-page-bg: var(--ms-slate-50);
    --idx-glow-opacity: 0.04;

    /* Hero */
    --idx-hero-bg: white;
    --idx-hero-heading: var(--ms-slate-900);
    --idx-hero-lead: var(--ms-slate-600);
    --idx-hero-pill-bg: var(--ms-teal-50);
    --idx-hero-pill-border: rgba(20, 184, 166, 0.2);
    --idx-hero-pill-text: var(--ms-teal-700);
    --idx-hero-subtext: var(--ms-slate-500);
    --idx-hero-subtext-icon: var(--ms-teal-600);
    --idx-gradient-start: var(--ms-teal-600);
    --idx-gradient-end: var(--ms-teal-500);
    --idx-hero-glow-teal: rgba(20, 184, 166, 0.04);
    --idx-hero-glow-indigo: rgba(61, 90, 158, 0.04);
    --idx-product-shadow: 0 25px 60px -12px rgba(10, 14, 31, 0.25);

    /* ms-btn-dark in hero (outline style for light mode) */
    --idx-btn-dark-bg: white;
    --idx-btn-dark-color: var(--ms-slate-700);
    --idx-btn-dark-border: var(--ms-slate-300);
    --idx-btn-dark-hover-bg: var(--ms-slate-50);
    --idx-btn-dark-hover-color: var(--ms-slate-900);

    /* Social proof */
    --idx-social-bg: white;
    --idx-social-border: var(--ms-slate-200);
    --idx-social-text: var(--ms-slate-600);
    --idx-social-logo: var(--ms-slate-500);
    --idx-social-logo-hover: var(--ms-slate-700);

    /* Sections */
    --idx-section-bg: var(--ms-slate-50);
    --idx-section-alt-bg: white;

    /* Section headers */
    --idx-heading-color: var(--ms-slate-900);
    --idx-subtext-color: var(--ms-slate-500);
    --idx-label-color: var(--ms-teal-600);

    /* Cards (features, pricing, testimonials) */
    --idx-card-bg: white;
    --idx-card-border: var(--ms-slate-200);
    --idx-card-hover-border: var(--ms-slate-300);
    --idx-card-hover-shadow: var(--ms-shadow-lg);
    --idx-card-heading: var(--ms-slate-900);
    --idx-card-text: var(--ms-slate-500);

    /* Feature icons */
    --idx-icon-teal-bg: var(--ms-teal-50);
    --idx-icon-teal-color: var(--ms-teal-600);
    --idx-icon-indigo-bg: var(--ms-indigo-50);
    --idx-icon-indigo-color: var(--ms-indigo-600);
    --idx-icon-amber-bg: rgba(245, 158, 11, 0.08);
    --idx-icon-amber-color: var(--ms-amber-600);

    /* How it works */
    --idx-step-heading: var(--ms-slate-900);
    --idx-step-text: var(--ms-slate-500);

    /* Stats */
    --idx-stats-bg: var(--ms-slate-50);
    --idx-stats-glow: rgba(20, 184, 166, 0.04);
    --idx-stat-card-bg: white;
    --idx-stat-card-border: var(--ms-slate-200);
    --idx-stat-card-hover-bg: var(--ms-slate-50);
    --idx-stat-number: var(--ms-slate-900);
    --idx-stat-desc: var(--ms-slate-500);
    --idx-stat-gradient-start: var(--ms-teal-600);
    --idx-stat-gradient-end: var(--ms-teal-500);

    /* Pricing */
    --idx-pricing-name: var(--ms-slate-900);
    --idx-pricing-tagline: var(--ms-slate-500);
    --idx-pricing-dollar: var(--ms-slate-900);
    --idx-pricing-interval: var(--ms-slate-500);
    --idx-pricing-savings: var(--ms-slate-600);
    --idx-pricing-divider: var(--ms-slate-200);
    --idx-pricing-feature: var(--ms-slate-600);
    --idx-pricing-outline-bg: white;
    --idx-pricing-outline-color: var(--ms-slate-700);
    --idx-pricing-outline-border: var(--ms-slate-300);

    /* Testimonials */
    --idx-testimonial-quote: var(--ms-slate-600);
    --idx-testimonial-name: var(--ms-slate-900);
    --idx-testimonial-title: var(--ms-slate-600);
    --idx-testimonial-footer-border: var(--ms-slate-100);

    /* Divider */
    --idx-divider-color: var(--ms-slate-200);
}

/* --- Dark Mode Overrides --- */
[data-theme="dark"] .index-page {
    /* Page */
    --idx-page-bg: var(--ms-indigo-950);
    --idx-glow-opacity: 0.12;

    /* Hero */
    --idx-hero-bg: var(--ms-indigo-950);
    --idx-hero-heading: white;
    --idx-hero-lead: var(--ms-slate-400);
    --idx-hero-pill-bg: rgba(20, 184, 166, 0.1);
    --idx-hero-pill-border: rgba(20, 184, 166, 0.2);
    --idx-hero-pill-text: var(--ms-teal-400);
    --idx-hero-subtext: var(--ms-slate-400);
    --idx-hero-subtext-icon: var(--ms-teal-500);
    --idx-gradient-start: var(--ms-teal-400);
    --idx-gradient-end: var(--ms-teal-300);
    --idx-hero-glow-teal: rgba(20, 184, 166, 0.12);
    --idx-hero-glow-indigo: rgba(61, 90, 158, 0.15);
    --idx-product-shadow: var(--ms-shadow-2xl), var(--ms-shadow-glow);

    /* ms-btn-dark in hero */
    --idx-btn-dark-bg: var(--ms-slate-800);
    --idx-btn-dark-color: var(--ms-slate-200);
    --idx-btn-dark-border: var(--ms-slate-700);
    --idx-btn-dark-hover-bg: var(--ms-slate-700);
    --idx-btn-dark-hover-color: white;

    /* Social proof */
    --idx-social-bg: rgba(255, 255, 255, 0.03);
    --idx-social-border: rgba(255, 255, 255, 0.06);
    --idx-social-text: var(--ms-slate-500);
    --idx-social-logo: var(--ms-slate-400);
    --idx-social-logo-hover: var(--ms-slate-300);

    /* Sections */
    --idx-section-bg: var(--ms-indigo-950);
    --idx-section-alt-bg: rgba(255, 255, 255, 0.02);

    /* Section headers */
    --idx-heading-color: white;
    --idx-subtext-color: var(--ms-slate-400);
    --idx-label-color: var(--ms-teal-400);

    /* Cards */
    --idx-card-bg: rgba(255, 255, 255, 0.04);
    --idx-card-border: rgba(255, 255, 255, 0.08);
    --idx-card-hover-border: rgba(255, 255, 255, 0.12);
    --idx-card-hover-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
    --idx-card-heading: var(--ms-slate-100);
    --idx-card-text: var(--ms-slate-400);

    /* Feature icons */
    --idx-icon-teal-bg: rgba(20, 184, 166, 0.1);
    --idx-icon-teal-color: var(--ms-teal-400);
    --idx-icon-indigo-bg: rgba(61, 90, 158, 0.12);
    --idx-icon-indigo-color: var(--ms-indigo-400);
    --idx-icon-amber-bg: rgba(245, 158, 11, 0.1);
    --idx-icon-amber-color: var(--ms-amber-400);

    /* How it works */
    --idx-step-heading: var(--ms-slate-100);
    --idx-step-text: var(--ms-slate-400);

    /* Stats */
    --idx-stats-bg: var(--ms-indigo-950);
    --idx-stats-glow: rgba(20, 184, 166, 0.08);
    --idx-stat-card-bg: rgba(255, 255, 255, 0.04);
    --idx-stat-card-border: rgba(255, 255, 255, 0.06);
    --idx-stat-card-hover-bg: rgba(255, 255, 255, 0.07);
    --idx-stat-number: white;
    --idx-stat-desc: var(--ms-slate-400);
    --idx-stat-gradient-start: var(--ms-teal-400);
    --idx-stat-gradient-end: var(--ms-teal-300);

    /* Pricing */
    --idx-pricing-name: var(--ms-slate-100);
    --idx-pricing-tagline: var(--ms-slate-400);
    --idx-pricing-dollar: white;
    --idx-pricing-interval: var(--ms-slate-400);
    --idx-pricing-savings: var(--ms-slate-400);
    --idx-pricing-divider: rgba(255, 255, 255, 0.08);
    --idx-pricing-feature: var(--ms-slate-300);
    --idx-pricing-outline-bg: rgba(255, 255, 255, 0.04);
    --idx-pricing-outline-color: var(--ms-slate-200);
    --idx-pricing-outline-border: rgba(255, 255, 255, 0.12);

    /* Testimonials */
    --idx-testimonial-quote: var(--ms-slate-300);
    --idx-testimonial-name: var(--ms-slate-100);
    --idx-testimonial-title: var(--ms-slate-400);
    --idx-testimonial-footer-border: rgba(255, 255, 255, 0.06);

    /* Divider */
    --idx-divider-color: rgba(255, 255, 255, 0.06);
}

/* --- Index Page Body Override --- */
.index-page {
    background-color: var(--idx-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease;
}

/* --- Skip Link --- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ms-indigo-800);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--ms-radius-md) var(--ms-radius-md);
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    color: white;
    outline: 2px solid var(--ms-teal-400);
    outline-offset: 2px;
}

/* (Navbar styles are now in style.css .ms-navbar) */

/* --- Custom Footer (index page only) — ALWAYS DARK --- */
.ms-footer {
    background: var(--ms-slate-900);
    padding: 2.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.ms-footer-copy {
    font-size: 0.8125rem;
    color: var(--ms-slate-500);
}
.ms-footer-links {
    display: flex;
    gap: 1.5rem;
}
.ms-footer-links a {
    font-size: 0.8125rem;
    color: var(--ms-slate-500);
    text-decoration: none;
    transition: color 0.15s ease;
}
.ms-footer-links a:hover { color: var(--ms-slate-300); }

/* --- HERO --- */
.ms-hero {
    background: var(--idx-hero-bg);
    padding: 6rem 0 0;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.ms-hero::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--idx-hero-glow-teal), transparent 70%);
    top: -200px;
    right: -100px;
    pointer-events: none;
    transition: background 0.3s ease;
}
.ms-hero::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--idx-hero-glow-indigo), transparent 70%);
    bottom: -150px;
    left: -100px;
    pointer-events: none;
    transition: background 0.3s ease;
}
.ms-hero .container { position: relative; z-index: 1; }
.ms-hero-center {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}
.ms-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--idx-hero-pill-bg);
    border: 1px solid var(--idx-hero-pill-border);
    color: var(--idx-hero-pill-text);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: var(--ms-radius-full);
    margin-bottom: 2rem;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ms-hero-pill-dot {
    width: 6px; height: 6px;
    background: var(--ms-teal-400);
    border-radius: 50%;
    animation: ms-pulse 2s ease-in-out infinite;
}
.ms-hero h1 {
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 900;
    color: var(--idx-hero-heading);
    line-height: 1.08;
    margin-bottom: 1.5rem;
    letter-spacing: -0.035em;
    transition: color 0.3s ease;
}
.ms-hero h1 .ms-text-gradient {
    background: linear-gradient(135deg, var(--idx-gradient-start), var(--idx-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ms-hero .lead {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    color: var(--idx-hero-lead);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    font-weight: 400;
    transition: color 0.3s ease;
}
.ms-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ms-hero-subtext {
    font-size: 0.8125rem;
    color: var(--idx-hero-subtext);
    margin-bottom: 3rem;
    transition: color 0.3s ease;
}
.ms-hero-subtext i { color: var(--idx-hero-subtext-icon); }

/* Product Visual — ALWAYS DARK (no variables) */
.ms-hero-visual {
    position: relative;
    margin: 0 auto;
    max-width: 960px;
}
.ms-product-window {
    background: var(--ms-indigo-900);
    border: 1px solid var(--ms-indigo-700);
    border-radius: var(--ms-radius-2xl) var(--ms-radius-2xl) 0 0;
    overflow: hidden;
    box-shadow: var(--idx-product-shadow);
    transition: box-shadow 0.3s ease;
}
.ms-product-chrome {
    background: var(--ms-indigo-800);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--ms-indigo-700);
}
.ms-chrome-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.ms-chrome-dot-red { background: #ef4444; }
.ms-chrome-dot-yellow { background: #eab308; }
.ms-chrome-dot-green { background: #22c55e; }
.ms-chrome-url {
    flex: 1;
    background: var(--ms-indigo-700);
    border-radius: var(--ms-radius-sm);
    padding: 0.3125rem 0.75rem;
    margin-left: 0.75rem;
    font-size: 0.75rem;
    color: var(--ms-slate-400);
}
.ms-product-content {
    padding: 1.5rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    min-height: 300px;
}
.ms-product-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.ms-product-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ms-product-team-name {
    color: white;
    font-weight: 700;
    font-size: 1rem;
}
.ms-product-session-badge {
    background: rgba(20, 184, 166, 0.15);
    color: var(--ms-teal-400);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--ms-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ms-product-story {
    background: var(--ms-indigo-800);
    border-radius: var(--ms-radius-lg);
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--ms-teal-500);
}
.ms-product-story-label {
    font-size: 0.6875rem;
    color: var(--ms-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.ms-product-story-text {
    color: var(--ms-slate-200);
    font-size: 0.875rem;
    font-weight: 500;
}
.ms-product-voting-cards {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ms-vote-card {
    width: 52px; height: 68px;
    border-radius: var(--ms-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    border: 1.5px solid var(--ms-indigo-600);
    background: var(--ms-indigo-800);
    color: var(--ms-slate-300);
    transition: all 0.15s ease;
}
.ms-vote-card.active {
    background: linear-gradient(135deg, var(--ms-teal-500), var(--ms-teal-600));
    border-color: var(--ms-teal-400);
    color: white;
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.3);
}
.ms-product-sidebar {
    border-left: 1px solid var(--ms-indigo-700);
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ms-sidebar-label {
    font-size: 0.6875rem;
    color: var(--ms-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.ms-sidebar-members {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.ms-sidebar-member {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.ms-member-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.6875rem;
    color: white;
}
.ms-avatar-1 { background: linear-gradient(135deg, var(--ms-teal-500), var(--ms-teal-600)); }
.ms-avatar-2 { background: linear-gradient(135deg, var(--ms-indigo-500), var(--ms-indigo-600)); }
.ms-avatar-3 { background: linear-gradient(135deg, var(--ms-amber-500), var(--ms-amber-600)); }
.ms-avatar-4 { background: linear-gradient(135deg, #16a34a, #15803d); }
.ms-member-info { flex: 1; }
.ms-member-name {
    font-size: 0.8125rem;
    color: var(--ms-slate-200);
    font-weight: 500;
}
.ms-member-status-text {
    font-size: 0.6875rem;
    color: var(--ms-teal-400);
    font-weight: 500;
}
.ms-member-status-text.waiting {
    color: var(--ms-amber-400);
}
.ms-sidebar-result {
    background: var(--ms-indigo-800);
    border-radius: var(--ms-radius-lg);
    padding: 0.875rem 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.ms-result-item-label {
    font-size: 0.625rem;
    color: var(--ms-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ms-result-item-value {
    font-size: 1.25rem;
    color: white;
    font-weight: 800;
}

/* --- BUTTONS --- */
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.8125rem 1.75rem;
    border-radius: var(--ms-radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1.5;
}
.ms-btn:focus-visible {
    outline: 2px solid var(--ms-teal-400);
    outline-offset: 2px;
}
/* ACCESSIBILITY FIX: Darken teal button bg for 4.5:1 contrast with white text */
.ms-btn-primary {
    background: linear-gradient(135deg, var(--ms-teal-600), var(--ms-teal-700));
    color: white;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}
.ms-btn-primary:hover {
    background: linear-gradient(135deg, var(--ms-teal-500), var(--ms-teal-600));
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
    color: white;
}
/* Hero "See How It Works" button — uses theme variables */
.ms-hero .ms-btn-dark {
    background: var(--idx-btn-dark-bg);
    color: var(--idx-btn-dark-color);
    border: 1px solid var(--idx-btn-dark-border);
    transition: all 0.15s ease;
}
.ms-hero .ms-btn-dark:hover {
    background: var(--idx-btn-dark-hover-bg);
    color: var(--idx-btn-dark-hover-color);
}
/* General ms-btn-dark (CTA section — always dark) */
.ms-btn-dark {
    background: var(--ms-slate-800);
    color: var(--ms-slate-200);
    border: 1px solid var(--ms-slate-700);
}
.ms-btn-dark:hover {
    background: var(--ms-slate-700);
    color: white;
}
.ms-btn-outline {
    background: var(--idx-pricing-outline-bg);
    color: var(--idx-pricing-outline-color);
    border: 1px solid var(--idx-pricing-outline-border);
    box-shadow: var(--ms-shadow-sm);
    transition: all 0.15s ease;
}
.ms-btn-outline:hover {
    opacity: 0.85;
    color: var(--idx-pricing-outline-color);
}
.ms-btn-lg {
    padding: 0.9375rem 2.25rem;
    font-size: 1rem;
    border-radius: var(--ms-radius-xl);
}

/* --- SOCIAL PROOF --- */
.ms-social-proof {
    background: var(--idx-social-bg);
    border-bottom: 1px solid var(--idx-social-border);
    padding: 3rem 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.ms-social-proof-text {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--idx-social-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}
.ms-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
}
.ms-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--idx-social-logo);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}
.ms-logo:hover { color: var(--idx-social-logo-hover); }
.ms-logo i { font-size: 1.375rem; }

/* --- SECTION STYLES --- */
.ms-section {
    padding: 6rem 0;
    background: var(--idx-section-bg);
    transition: background 0.3s ease;
}
.ms-section-alt {
    background: var(--idx-section-alt-bg);
    transition: background 0.3s ease;
}
.ms-section-header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 4rem;
}
.ms-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--idx-label-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}
.ms-label-dot {
    width: 8px; height: 8px;
    background: var(--ms-teal-500);
    border-radius: 50%;
}
.ms-section-header h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--idx-heading-color);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}
.ms-section-header p {
    font-size: 1.0625rem;
    color: var(--idx-subtext-color);
    line-height: 1.7;
    transition: color 0.3s ease;
}

/* --- FEATURES --- */
.ms-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.ms-feature {
    background: var(--idx-card-bg);
    border: 1px solid var(--idx-card-border);
    border-radius: var(--ms-radius-xl);
    padding: 2rem 1.75rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.ms-feature::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ms-teal-500), var(--ms-indigo-500));
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ms-feature:hover {
    border-color: var(--idx-card-hover-border);
    box-shadow: var(--idx-card-hover-shadow);
    transform: translateY(-3px);
}
.ms-feature:hover::before { opacity: 1; }
.ms-feature-icon {
    width: 44px; height: 44px;
    border-radius: var(--ms-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    transition: background 0.3s ease, color 0.3s ease;
}
.ms-icon-teal {
    background: var(--idx-icon-teal-bg);
    color: var(--idx-icon-teal-color);
}
.ms-icon-indigo {
    background: var(--idx-icon-indigo-bg);
    color: var(--idx-icon-indigo-color);
}
.ms-icon-amber {
    background: var(--idx-icon-amber-bg);
    color: var(--idx-icon-amber-color);
}
.ms-feature h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    color: var(--idx-card-heading);
    transition: color 0.3s ease;
}
.ms-feature p {
    font-size: 0.9375rem;
    color: var(--idx-card-text);
    line-height: 1.65;
    margin: 0;
    transition: color 0.3s ease;
}

/* --- HOW IT WORKS --- */
.ms-steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
}
.ms-steps-connector {
    position: absolute;
    top: 36px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, var(--ms-teal-500), var(--ms-indigo-500));
    z-index: 0;
}
.ms-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.ms-step-badge {
    width: 56px; height: 56px;
    border-radius: var(--ms-radius-xl);
    background: linear-gradient(135deg, var(--ms-teal-500), var(--ms-teal-600));
    color: white;
    font-weight: 900;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}
.ms-step h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--idx-step-heading);
    transition: color 0.3s ease;
}
.ms-step p {
    font-size: 0.9375rem;
    color: var(--idx-step-text);
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.65;
    transition: color 0.3s ease;
}

/* --- STATS --- */
.ms-stats {
    background: var(--idx-stats-bg);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}
.ms-stats::before {
    content: '';
    position: absolute;
    top: -200px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--idx-stats-glow), transparent 70%);
    pointer-events: none;
}
.ms-stats .container { position: relative; z-index: 1; }
.ms-stats-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.ms-stats-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--idx-heading-color);
    margin-bottom: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    transition: color 0.3s ease;
}
.ms-stats-header p {
    color: var(--idx-subtext-color);
    font-size: 1.0625rem;
    transition: color 0.3s ease;
}
.ms-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.ms-stat-card {
    background: var(--idx-stat-card-bg);
    border: 1px solid var(--idx-stat-card-border);
    border-radius: var(--ms-radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: background 0.2s ease, border-color 0.3s ease;
}
.ms-stat-card:hover {
    background: var(--idx-stat-card-hover-bg);
}
.ms-stat-number {
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--idx-stat-number);
    line-height: 1;
    margin-bottom: 0.375rem;
    letter-spacing: -0.03em;
    transition: color 0.3s ease;
}
.ms-stat-number .ms-stat-accent {
    background: linear-gradient(135deg, var(--idx-stat-gradient-start), var(--idx-stat-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ms-stat-desc {
    font-size: 0.875rem;
    color: var(--idx-stat-desc);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* --- PRICING --- */
.ms-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.ms-pricing-card {
    background: var(--idx-card-bg);
    border: 1px solid var(--idx-card-border);
    border-radius: var(--ms-radius-2xl);
    padding: 2.5rem 2rem;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.3s ease, border-color 0.3s ease;
}
.ms-pricing-card:hover {
    box-shadow: var(--idx-card-hover-shadow);
    transform: translateY(-3px);
}
.ms-pricing-popular {
    border: 2px solid var(--ms-teal-500);
    box-shadow: var(--ms-shadow-lg), 0 0 40px rgba(20, 184, 166, 0.08);
}
.ms-pricing-popular-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--ms-teal-500), var(--ms-teal-600));
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.375rem 1.25rem;
    border-radius: var(--ms-radius-full);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ms-pricing-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--idx-pricing-name);
    margin-bottom: 0.375rem;
    transition: color 0.3s ease;
}
.ms-pricing-tagline {
    font-size: 0.875rem;
    color: var(--idx-pricing-tagline);
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}
.ms-pricing-cost {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
.ms-pricing-dollar {
    font-size: 2.75rem;
    font-weight: 900;
    color: var(--idx-pricing-dollar);
    line-height: 1;
    letter-spacing: -0.03em;
    transition: color 0.3s ease;
}
.ms-pricing-interval {
    font-size: 0.9375rem;
    color: var(--idx-pricing-interval);
    font-weight: 500;
    transition: color 0.3s ease;
}
.ms-pricing-savings {
    font-size: 0.8125rem;
    color: var(--idx-pricing-savings);
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}
.ms-pricing-divider {
    border: none;
    height: 1px;
    background: var(--idx-pricing-divider);
    margin: 1.5rem 0;
    transition: background 0.3s ease;
}
.ms-pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.ms-pricing-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--idx-pricing-feature);
    transition: color 0.3s ease;
}
.ms-pricing-list li i {
    color: var(--ms-teal-500);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    flex-shrink: 0;
}
.ms-pricing-action {
    width: 100%;
}

/* --- TESTIMONIALS --- */
.ms-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ms-testimonial {
    background: var(--idx-card-bg);
    border: 1px solid var(--idx-card-border);
    border-radius: var(--ms-radius-xl);
    padding: 2rem;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.3s ease, border-color 0.3s ease;
}
.ms-testimonial:hover {
    box-shadow: var(--idx-card-hover-shadow);
    transform: translateY(-2px);
}
.ms-testimonial-quote-mark {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--ms-teal-400);
    font-weight: 900;
    margin-bottom: 0.75rem;
    font-family: Georgia, serif;
}
.ms-testimonial blockquote {
    font-size: 0.9375rem;
    color: var(--idx-testimonial-quote);
    line-height: 1.7;
    margin: 0 0 1.5rem;
    font-style: normal;
    transition: color 0.3s ease;
}
.ms-testimonial-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--idx-testimonial-footer-border);
    transition: border-color 0.3s ease;
}
.ms-testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
}
.ms-testimonial-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--idx-testimonial-name);
    transition: color 0.3s ease;
}
.ms-testimonial-title {
    font-size: 0.8125rem;
    color: var(--idx-testimonial-title);
    transition: color 0.3s ease;
}

/* --- CTA — ALWAYS DARK (no variables, hard-coded) --- */
.ms-cta {
    background: var(--ms-indigo-950);
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ms-cta::before {
    content: '';
    position: absolute;
    width: 800px; height: 400px;
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.1), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.ms-cta .container { position: relative; z-index: 1; }
.ms-cta h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    color: white;
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.ms-cta h2 .ms-text-gradient {
    background: linear-gradient(135deg, var(--ms-teal-400), var(--ms-teal-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ms-cta p {
    font-size: 1.0625rem;
    color: var(--ms-slate-400);
    max-width: 540px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}
.ms-cta-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.ms-cta-note {
    font-size: 0.8125rem;
    color: var(--ms-slate-400);
}
.ms-cta-note i { color: var(--ms-teal-500); }

/* --- ANIMATIONS --- */
@keyframes ms-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ms-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.ms-animate {
    animation: ms-fadeUp 0.6s ease-out both;
}
.ms-delay-1 { animation-delay: 0.1s; }
.ms-delay-2 { animation-delay: 0.2s; }
.ms-delay-3 { animation-delay: 0.3s; }
.ms-delay-4 { animation-delay: 0.4s; }

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .ms-hero { padding: 4rem 0 0; }
    .ms-section { padding: 4rem 0; }
    .ms-features-grid { grid-template-columns: repeat(2, 1fr); }
    .ms-pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .ms-testimonials-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
}
@media (max-width: 767px) {
    .ms-hero h1 { font-size: 2.25rem; }
    .ms-hero-actions { flex-direction: column; align-items: center; }
    .ms-hero-actions .ms-btn { width: 100%; max-width: 320px; }
    .ms-cta-actions { flex-direction: column; align-items: center; }
    .ms-cta-actions .ms-btn { width: 100%; max-width: 320px; }
    .ms-stats { padding: 3.5rem 0; }
    .ms-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ms-logos { gap: 1.5rem; }
    .ms-product-content { grid-template-columns: 1fr; min-height: 200px; }
    .ms-product-sidebar { border-left: none; border-top: 1px solid var(--ms-indigo-700); padding-left: 0; padding-top: 1rem; }
    .ms-steps-container { grid-template-columns: 1fr; gap: 0; }
    .ms-steps-connector { display: none; }
    .ms-step {
        display: grid;
        grid-template-columns: 60px 1fr;
        text-align: left;
        gap: 1rem;
        padding: 1.5rem 0;
        align-items: start;
    }
    .ms-step-badge { margin-bottom: 0; width: 48px; height: 48px; font-size: 1.125rem; }
    .ms-step p { max-width: none; margin: 0; }
}
@media (max-width: 575px) {
    .ms-features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .ms-stats-grid { grid-template-columns: 1fr; }
}

/* --- Disable hover transforms on touch devices --- */
@media (hover: none) {
    .ms-pricing-card:hover,
    .ms-feature:hover,
    .ms-testimonial:hover,
    .ms-stat-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* --- Scroll margin for sticky navbar --- */
[id] {
    scroll-margin-top: 60px;
}