/* ================================
   FitCheck AI - Default Theme
   "Mono"
   Light grey base / charcoal UI / electric blue accent (scroll thread + highlights)
   Loaded after style.css via ?theme=mono (default)
   ================================ */

:root {
    --dark-navy: #F7F7F8;
    --deep-navy: #EFEFF1;
    --electric-blue: #0A84FF;
    --electric-blue-bright: #4CC9FF;
    --electric-blue-dim: rgba(10, 132, 255, 0.28);
    --cool-white: #141416;

    --bg-primary: #F7F7F8;
    --bg-secondary: #EFEFF1;

    --glass-light: rgba(20, 20, 22, 0.04);
    --glass-medium: rgba(20, 20, 22, 0.06);
    --glass-strong: rgba(20, 20, 22, 0.10);
    --glass-border: rgba(20, 20, 22, 0.10);

    --text-primary: #141416;
    --text-secondary: rgba(20, 20, 22, 0.62);
    --text-disabled: rgba(20, 20, 22, 0.38);

    --mono-ink: #141416;
    --mono-ink-soft: #3A3A3C;
    --mono-surface: #FFFFFF;
    --mono-surface-muted: #F2F2F4;
}

/* ================================
   Base
   ================================ */
body {
    background-color: #F7F7F8;
    background-image:
        linear-gradient(165deg, #FAFAFB 0%, #F3F3F5 42%, #F5F5F7 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 45% at 88% 0%, rgba(20, 20, 22, 0.04) 0%, transparent 58%),
        radial-gradient(ellipse 55% 40% at 8% 40%, rgba(20, 20, 22, 0.03) 0%, transparent 52%),
        radial-gradient(ellipse 50% 38% at 72% 92%, rgba(20, 20, 22, 0.03) 0%, transparent 55%);
}

::selection {
    background: rgba(10, 132, 255, 0.18);
    color: #141416;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(120deg, #4CC9FF 10%, #0A84FF 55%, #0667CB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================
   Navigation
   ================================ */
.navbar::before {
    background: rgba(247, 247, 248, 0.88);
    border-bottom: 1px solid rgba(20, 20, 22, 0.08);
}

.nav-links a::after {
    background: linear-gradient(90deg, #4CC9FF, #0A84FF);
}

.nav-cta {
    background: linear-gradient(120deg, #1C1C1E, #141416);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.nav-cta:hover {
    box-shadow: 0 10px 30px rgba(20, 20, 22, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

.mobile-menu {
    background: rgba(247, 247, 248, 0.97);
    border-bottom: 1px solid var(--glass-border);
}

.mobile-menu a {
    border-bottom: 1px solid rgba(20, 20, 22, 0.07);
}

.mobile-menu .mobile-cta {
    background: linear-gradient(120deg, #1C1C1E, #141416);
}

/* ================================
   Hero
   ================================ */
.hero-glow-1 {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.10) 0%, transparent 65%);
}

.hero-glow-2 {
    background: radial-gradient(circle, rgba(20, 20, 22, 0.06) 0%, transparent 65%);
}

.hero-grid {
    background-image:
        linear-gradient(rgba(20, 20, 22, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 20, 22, 0.045) 1px, transparent 1px);
}

.hero-graphic img {
    filter: none;
}

.hero-graphic::before {
    display: none;
}

.store-btn {
    background: var(--mono-surface);
    border-color: rgba(20, 20, 22, 0.12);
}

.store-btn:hover {
    border-color: rgba(10, 132, 255, 0.35);
    box-shadow: 0 12px 32px rgba(20, 20, 22, 0.10);
}

.social-proof {
    background: var(--mono-surface);
    border-color: rgba(20, 20, 22, 0.10);
}

.avatar {
    border-color: var(--mono-surface);
}

/* ================================
   Page thread (stitch line) — electric blue accent
   ================================ */
.page-thread-glow {
    stroke: rgba(10, 132, 255, 0.34);
    stroke-width: 11;
}

.page-thread-path {
    stroke-width: 3.5;
    filter: drop-shadow(0 0 5px rgba(10, 132, 255, 0.45));
}

#pageThreadGradient stop:nth-child(1) { stop-color: #4CC9FF; }
#pageThreadGradient stop:nth-child(2) { stop-color: #0A84FF; }
#pageThreadGradient stop:nth-child(3) { stop-color: #0667CB; }

.page-thread-tip {
    fill: #0A84FF;
    filter: drop-shadow(0 0 6px rgba(10, 132, 255, 0.85)) drop-shadow(0 0 14px rgba(76, 201, 255, 0.55));
}

#pageThreadTipGlow stop:nth-child(1) { stop-color: #4CC9FF; stop-opacity: 0.85; }
#pageThreadTipGlow stop:nth-child(2) { stop-color: #0A84FF; stop-opacity: 0.4; }
#pageThreadTipGlow stop:nth-child(3) { stop-color: #0A84FF; stop-opacity: 0; }

/* ================================
   Marquee
   ================================ */
.marquee {
    border-top: 1px solid rgba(20, 20, 22, 0.08);
    border-bottom: 1px solid rgba(20, 20, 22, 0.08);
    background: rgba(20, 20, 22, 0.025);
}

.marquee-group i {
    color: rgba(20, 20, 22, 0.28);
}

/* ================================
   Sections
   ================================ */
.section-tag {
    background: rgba(20, 20, 22, 0.04);
    border: 1px solid rgba(20, 20, 22, 0.14);
    color: var(--mono-ink-soft);
}

/* ================================
   Features
   ================================ */
.feature-index {
    -webkit-text-stroke: 1px rgba(20, 20, 22, 0.14);
}

.feature-icon {
    background: linear-gradient(135deg, #2C2C2E, #141416);
    box-shadow: 0 8px 28px rgba(20, 20, 22, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

.feature-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"), linear-gradient(135deg, #2C2C2E, #141416);
}

.feature-screenshot::before {
    display: none;
}

.feature-screenshot img {
    filter: drop-shadow(0 20px 40px rgba(20, 20, 22, 0.10));
}

.screenshot-fallback {
    background: linear-gradient(160deg, rgba(20, 20, 22, 0.04), rgba(20, 20, 22, 0.02));
    box-shadow: 0 24px 48px rgba(20, 20, 22, 0.10);
}

.screenshot-fallback .fallback-icon {
    background: linear-gradient(135deg, #2C2C2E, #141416);
    box-shadow: 0 8px 28px rgba(20, 20, 22, 0.20);
}

/* ================================
   Toolkit
   ================================ */
.toolkit-card {
    background: var(--mono-surface);
}

.toolkit-card::before {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.08) 0%, transparent 70%);
}

.toolkit-icon {
    background: rgba(20, 20, 22, 0.05);
    border: 1px solid rgba(20, 20, 22, 0.12);
}

.toolkit-icon svg {
    color: var(--mono-ink);
}

/* ================================
   How It Works
   ================================ */
.step-card {
    background: var(--mono-surface);
}

.step.lit .step-card {
    border-color: rgba(10, 132, 255, 0.38);
    box-shadow: 0 0 40px rgba(10, 132, 255, 0.08), 0 0 0 1px rgba(10, 132, 255, 0.06) inset;
}

.step-number {
    -webkit-text-stroke: 1px rgba(20, 20, 22, 0.22);
}

.step-icon {
    background: linear-gradient(135deg, #2C2C2E, #141416);
    box-shadow: 0 8px 24px rgba(20, 20, 22, 0.18);
}

@media (max-width: 768px) {
    .timeline::before {
        background: linear-gradient(180deg, rgba(20, 20, 22, 0.22), rgba(20, 20, 22, 0.08));
    }
}

/* ================================
   Pricing
   ================================ */
.pricing-card {
    background: var(--mono-surface);
}

.pricing-card.featured {
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(135deg, #4CC9FF, #0A84FF 55%, #0667CB) border-box;
    border: 1px solid transparent;
    box-shadow: 0 24px 60px rgba(10, 132, 255, 0.10);
}

.plan-badge.trial {
    background: rgba(20, 20, 22, 0.05);
    border: 1px solid rgba(20, 20, 22, 0.14);
    color: var(--mono-ink-soft);
}

.plan-badge.best {
    background: linear-gradient(120deg, #2C2C2E, #141416);
    color: #FFFFFF;
}

.plan-features li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"), linear-gradient(135deg, #2C2C2E, #141416);
}

.plan-cta.primary {
    background: linear-gradient(120deg, #1C1C1E, #141416);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

.plan-cta.primary:hover {
    box-shadow: 0 12px 32px rgba(20, 20, 22, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.plan-cta.secondary {
    background: var(--mono-surface);
    border: 1px solid rgba(20, 20, 22, 0.14);
    color: var(--mono-ink);
}

.plan-cta.secondary:hover {
    border-color: rgba(10, 132, 255, 0.35);
}

/* ================================
   FAQ
   ================================ */
.faq-item {
    background: var(--mono-surface);
}

.faq-answer a {
    color: #0A84FF;
}

/* ================================
   Download CTA & Footer
   ================================ */
.cta-glow {
    background: radial-gradient(ellipse at center, rgba(10, 132, 255, 0.08) 0%, transparent 60%);
}

.footer {
    border-top: 1px solid rgba(20, 20, 22, 0.08);
    background: rgba(20, 20, 22, 0.02);
}

.footer-bottom {
    border-top: 1px solid rgba(20, 20, 22, 0.07);
}

.footer-bottom a {
    color: var(--mono-ink-soft);
}

.footer-bottom a:hover {
    color: var(--mono-ink);
}