/* ═══════════════════════════════════════════════════════════════════
   SignalStrike Design System v2.0
   Glacial Minimal + Navy-to-Electric Blue Gradient Layer
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Google Fonts (loaded via <link> in HTML head) ─── */
/* Libre Baskerville Bold (headlines, stats) + DM Sans 300-700 (UI, body) */

/* ─── CSS Custom Properties ─── */
:root {
    /* Backgrounds */
    --ss-bg:              #f7f5f2;
    --ss-surface:         #ffffff;
    --ss-surface-alt:     #f0ede8;

    /* Borders */
    --ss-border:          rgba(10, 36, 99, 0.09);
    --ss-border-strong:   rgba(10, 36, 99, 0.18);

    /* Text */
    --ss-text:            #0f1923;
    --ss-muted:           #6b7280;
    --ss-sub:             #a8aab8;

    /* Brand */
    --ss-accent:          #0A2463;
    --ss-accent-soft:     rgba(10, 36, 99, 0.07);

    /* Gradient */
    --ss-gradient:        linear-gradient(135deg, #0A2463 0%, #1565C0 60%, #1E88E5 100%);
    --ss-gradient-subtle: linear-gradient(135deg, rgba(10,36,99,0.07) 0%, rgba(30,136,229,0.07) 100%);

    /* Gold */
    --ss-gold:            #F5C518;
    --ss-gold-mid:        #C8960A;
    --ss-gold-shadow:     #8B5E04;

    /* Semantic */
    --ss-green:           #15803d;
    --ss-green-soft:      rgba(22, 163, 74, 0.09);
    --ss-red:             #b91c1c;
    --ss-red-soft:        rgba(220, 38, 38, 0.09);
    --ss-caution:         #92400e;
    --ss-caution-soft:    rgba(180, 83, 9, 0.08);

    /* Glow */
    --ss-glow:            0 4px 24px rgba(30,136,229,0.32);
    --ss-glow-sm:         0 2px 12px rgba(30,136,229,0.22);

    /* Radius */
    --ss-radius-btn:      5px;
    --ss-radius-card:     6px;

    /* Fonts */
    --ss-font-headline:   'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --ss-font-body:       'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
    --ss-bg:              #080d18;
    --ss-surface:         #0f1829;
    --ss-surface-alt:     #1c2537;
    --ss-border:          rgba(255, 255, 255, 0.07);
    --ss-border-strong:   rgba(255, 255, 255, 0.14);
    --ss-text:            #e5ded5;
    --ss-muted:           #8a8fa0;
    --ss-sub:             #5c6070;
    --ss-accent:          #60a5fa;
    --ss-accent-soft:     rgba(96, 165, 250, 0.10);
    --ss-green:           #22c55e;
    --ss-red:             #f87171;
    --ss-caution:         #fbbf24;
}

/* ─── Base Overrides ─── */
.ss-v2 {
    background: var(--ss-bg) !important;
    color: var(--ss-text);
    font-family: var(--ss-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ss-v2 ::selection {
    background: rgba(10, 36, 99, 0.15);
}

/* ─── Typography ─── */
.ss-headline {
    font-family: var(--ss-font-headline);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ss-text);
}

.ss-body {
    font-family: var(--ss-font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ss-muted);
}

.ss-label {
    font-family: var(--ss-font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--ss-muted);
}

.ss-stat-value {
    font-family: var(--ss-font-headline);
    font-weight: 700;
    color: var(--ss-text);
}

/* ─── Gradient Utilities ─── */
.ss-gradient-bg {
    background: var(--ss-gradient);
}

.ss-gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ss-gradient-text-gold {
    background: linear-gradient(135deg, #F5C518 0%, #C8960A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Hero Section ─── */
.ss-hero {
    background: var(--ss-gradient);
    position: relative;
    overflow: hidden;
    color: white;
}

.ss-hero .ss-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.ss-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.ss-orb-1 {
    width: 500px;
    height: 500px;
    background: rgba(30, 136, 229, 0.18);
    top: -100px;
    right: -80px;
}

.ss-orb-2 {
    width: 400px;
    height: 400px;
    background: rgba(10, 36, 99, 0.25);
    bottom: -120px;
    left: -60px;
}

.ss-orb-3 {
    width: 300px;
    height: 300px;
    background: rgba(96, 165, 250, 0.12);
    top: 40%;
    left: 30%;
}

.ss-hero-eyebrow {
    display: inline-block;
    font-family: var(--ss-font-body);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #93c5fd;
    margin-bottom: 24px;
}

.ss-hero h1,
.ss-hero .ss-hero-title {
    font-family: var(--ss-font-headline);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: white;
}

.ss-hero-accent {
    color: var(--ss-gold);
}

/* ─── Buttons ─── */
.ss-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ss-gradient);
    color: #ffffff !important;
    border: none;
    border-radius: var(--ss-radius-btn);
    padding: 12px 28px;
    font-family: var(--ss-font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: var(--ss-glow-sm);
    transition: box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ss-btn-primary:hover {
    box-shadow: var(--ss-glow);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none !important;
}

.ss-btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--ss-glow-sm);
}

.ss-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--ss-accent) !important;
    border: 1.5px solid var(--ss-border-strong);
    border-radius: var(--ss-radius-btn);
    padding: 11px 28px;
    font-family: var(--ss-font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ss-btn-ghost:hover {
    border-color: var(--ss-accent);
    background: var(--ss-accent-soft);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Hero ghost button variant (white) */
.ss-btn-ghost-light {
    color: white !important;
    border-color: rgba(255,255,255,0.2);
}
.ss-btn-ghost-light:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
    color: white !important;
}

/* White solid button (for gradient sections) */
.ss-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--ss-accent) !important;
    border: none;
    border-radius: var(--ss-radius-btn);
    padding: 12px 28px;
    font-family: var(--ss-font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

.ss-btn-white:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    color: var(--ss-accent) !important;
    text-decoration: none !important;
}

/* ─── Cards ─── */
.ss-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-card);
    transition: border-color 0.2s ease, box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ss-card:hover {
    border-color: var(--ss-border-strong);
    box-shadow: 0 8px 32px rgba(10, 36, 99, 0.06);
    transform: translateY(-2px);
}

/* ─── Disclaimer ─── */
.ss-disclaimer {
    border-left: 4px solid var(--ss-caution);
    background: var(--ss-caution-soft);
    padding: 16px 20px;
    border-radius: 0 var(--ss-radius-card) var(--ss-radius-card) 0;
    font-size: 13px;
    color: var(--ss-muted);
    line-height: 1.6;
    font-family: var(--ss-font-body);
}

/* ─── Section Styling ─── */
.ss-section {
    padding: 96px 0;
}

.ss-section-alt {
    background: var(--ss-surface-alt);
}

.ss-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 640px) {
    .ss-container {
        padding: 0 40px;
    }
}

/* ─── Stats Strip ─── */
.ss-stats-strip {
    display: grid;
    gap: 32px;
    padding-top: 40px;
    margin-top: 48px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.ss-stats-strip .ss-stat-value {
    color: white;
}

.ss-stats-strip .ss-label {
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* ─── Feature Bento Grid ─── */
.ss-bento {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .ss-bento {
        grid-template-columns: repeat(3, 1fr);
    }
    .ss-bento-wide {
        grid-column: span 2;
    }
}

.ss-bento .ss-card {
    padding: 28px;
    position: relative;
    overflow: hidden;
}

.ss-bento .ss-card .ss-accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ss-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ss-bento .ss-card:hover .ss-accent-bar {
    opacity: 1;
}

.ss-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 3px;
    background: var(--ss-accent-soft);
    color: var(--ss-accent);
    font-family: var(--ss-font-body);
}

/* ─── Scroll Reveal Animations ─── */
@keyframes ss-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ss-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ss-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ss-reveal.ss-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.ss-stagger > .ss-reveal:nth-child(1) { transition-delay: 0.0s; }
.ss-stagger > .ss-reveal:nth-child(2) { transition-delay: 0.12s; }
.ss-stagger > .ss-reveal:nth-child(3) { transition-delay: 0.24s; }
.ss-stagger > .ss-reveal:nth-child(4) { transition-delay: 0.36s; }
.ss-stagger > .ss-reveal:nth-child(5) { transition-delay: 0.48s; }
.ss-stagger > .ss-reveal:nth-child(6) { transition-delay: 0.60s; }
.ss-stagger > .ss-reveal:nth-child(7) { transition-delay: 0.72s; }

/* ─── FAQ Accordion ─── */
.ss-faq-item {
    border-bottom: 1px solid var(--ss-border);
}

.ss-faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--ss-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ss-text);
    transition: color 0.2s ease;
}

.ss-faq-btn:hover {
    color: var(--ss-accent);
}

.ss-faq-btn .ss-faq-icon {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--ss-muted);
    flex-shrink: 0;
}

.ss-faq-item.open .ss-faq-icon {
    transform: rotate(45deg);
}

.ss-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s ease;
    padding: 0 48px 0 0;
}

.ss-faq-item.open .ss-faq-answer {
    max-height: 300px;
    padding-bottom: 20px;
}

.ss-faq-answer p {
    font-size: 14px;
    color: var(--ss-muted);
    line-height: 1.6;
    margin: 0;
}

/* ─── Pricing Cards ─── */
.ss-pricing-highlight {
    border: 2px solid var(--ss-accent) !important;
}

.ss-pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 12px;
    border-radius: 3px;
    background: var(--ss-gradient);
    color: white;
    box-shadow: var(--ss-glow-sm);
    white-space: nowrap;
}

/* ─── Check List ─── */
.ss-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-check-list li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: var(--ss-muted);
    margin-bottom: 12px;
    font-family: var(--ss-font-body);
}

.ss-check-list li svg {
    flex-shrink: 0;
    margin-top: 3px;
}

/* ─── Dark Mode Toggle ─── */
.ss-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    color: var(--ss-muted);
}

.ss-theme-toggle:hover {
    background: var(--ss-accent-soft);
    color: var(--ss-text);
}

/* ─── Faux Window Chrome (taste-skill pattern) ─── */
.ss-window {
    background: rgba(15, 24, 41, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.ss-window-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ss-window-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ss-window-dot-red { background: #ff5f57; }
.ss-window-dot-yellow { background: #ffbd2e; }
.ss-window-dot-green { background: #28c840; }

.ss-window-title {
    margin-left: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}

/* ─── Responsive Helpers ─── */
@media (max-width: 767px) {
    .ss-section {
        padding: 64px 0;
    }

    .ss-hero {
        padding: 100px 0 60px 0;
    }

    .ss-stats-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .ss-stats-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .ss-stats-strip {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ─── Scroll Reveal JS Helper ─── */
/* Add this to your page's <script>:
   document.addEventListener('DOMContentLoaded', function() {
     var observer = new IntersectionObserver(function(entries) {
       entries.forEach(function(entry) {
         if (entry.isIntersecting) {
           entry.target.classList.add('ss-visible');
           observer.unobserve(entry.target);
         }
       });
     }, { threshold: 0.1, rootMargin: '-40px' });
     document.querySelectorAll('.ss-reveal').forEach(function(el) { observer.observe(el); });
   });
*/