/* _content/SynapseSTEPAI.Web/Components/Layout/AppShell.razor.rz.scp.css */
.app-shell[b-qd6iqk1kqd] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-shell-main[b-qd6iqk1kqd] {
    flex: 1;
}
/* _content/SynapseSTEPAI.Web/Components/Layout/Footer.razor.rz.scp.css */
.footer[b-y3e3yho0p2] {
    background: var(--navy);
    color: var(--white);
    padding: var(--section-padding) 0;
    margin-top: auto;
}
/* _content/SynapseSTEPAI.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.layout-wrapper[b-mwqslc4858] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-nav[b-mwqslc4858] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
    box-shadow: 0 1px 3px rgba(11, 31, 58, 0.04);
}

main[b-mwqslc4858] {
    flex: 1;
}
/* _content/SynapseSTEPAI.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.nav-bar[b-5yp01yqlt6] {
    padding: 0 1.5rem;
    background: var(--white);
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner[b-5yp01yqlt6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    height: 64px;
}

.nav-logo[b-5yp01yqlt6] {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--navy) !important;
    text-decoration: none;
}

.nav-links[b-5yp01yqlt6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link[b-5yp01yqlt6] {
    padding: 0.5rem 0.75rem;
    color: var(--charcoal) !important;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    transition: background 0.15s, color 0.15s;
}

.nav-link:hover[b-5yp01yqlt6] {
    background: rgba(11, 31, 58, 0.06);
    color: var(--navy) !important;
}

.nav-link.active[b-5yp01yqlt6] {
    color: var(--electric-blue) !important;
    font-weight: 600;
}

/* DLK AI-Portal link — brand AI purple */
.nav-link-ai[b-5yp01yqlt6] {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--color-brand-ai) !important;
    border: 1px solid rgba(106, 13, 173, 0.25);
    border-radius: var(--radius-btn);
}

.nav-link-ai:hover[b-5yp01yqlt6] {
    background: rgba(106, 13, 173, 0.06) !important;
    color: var(--color-brand-ai) !important;
    border-color: var(--color-brand-ai);
}

.nav-link-cta[b-5yp01yqlt6] {
    background: var(--electric-blue) !important;
    color: var(--white) !important;
    padding: 8px 18px;
    border-radius: 8px;
}

.nav-link-cta:hover[b-5yp01yqlt6] {
    background: var(--electric-blue-hover) !important;
    color: var(--white) !important;
}

/* Dark/light mode toggle */
.theme-toggle[b-5yp01yqlt6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid rgba(11, 31, 58, 0.15);
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--charcoal);
    transition: background 0.15s, border-color 0.15s;
    margin-left: 0.25rem;
    padding: 0;
}

.theme-toggle:hover[b-5yp01yqlt6] {
    background: rgba(11, 31, 58, 0.06);
    border-color: rgba(11, 31, 58, 0.3);
}

/* Sun shown in dark mode (click to go light), moon in light mode (click to go dark) */
.theme-toggle .icon-sun[b-5yp01yqlt6] { display: none; }
.theme-toggle .icon-moon[b-5yp01yqlt6] { display: inline; }

[data-theme="dark"] .theme-toggle .icon-sun[b-5yp01yqlt6] { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon[b-5yp01yqlt6] { display: none; }

/* Dark mode nav overrides */
[data-theme="dark"] .nav-bar[b-5yp01yqlt6] {
    background: var(--white);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-logo[b-5yp01yqlt6] { color: #bdd3ea !important; }

[data-theme="dark"] .nav-link[b-5yp01yqlt6] {
    color: var(--charcoal) !important;
}

[data-theme="dark"] .nav-link:hover[b-5yp01yqlt6] {
    background: rgba(255, 255, 255, 0.08);
    color: #e8f2ff !important;
}

[data-theme="dark"] .nav-link.active[b-5yp01yqlt6] { color: var(--electric-blue) !important; }

[data-theme="dark"] .theme-toggle[b-5yp01yqlt6] {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--charcoal);
}

[data-theme="dark"] .theme-toggle:hover[b-5yp01yqlt6] {
    background: rgba(255, 255, 255, 0.08);
}

.nav-toggle[b-5yp01yqlt6] { display: none; }

.nav-toggle-label[b-5yp01yqlt6] {
    display: none;
    order: 10;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle-label span[b-5yp01yqlt6] {
    width: 24px;
    height: 2px;
    background: var(--navy);
}

@media (max-width: 768px) {
    .nav-toggle-label[b-5yp01yqlt6] {
        display: flex;
    }

    .nav-links[b-5yp01yqlt6] {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        border-bottom: 1px solid rgba(11, 31, 58, 0.08);
        box-shadow: 0 4px 12px rgba(11, 31, 58, 0.08);
        display: none;
    }

    .nav-toggle:checked ~ .nav-links[b-5yp01yqlt6] {
        display: flex;
    }

    .nav-link[b-5yp01yqlt6] {
        padding: 0.75rem 1rem;
        width: 100%;
        text-align: left;
    }

    .theme-toggle[b-5yp01yqlt6] {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        border-radius: var(--radius-btn);
        border: none;
        gap: 0.5rem;
    }

    .theme-toggle[b-5yp01yqlt6]::after { content: " Toggle theme"; font-size: 0.9375rem; }
}

@media (min-width: 769px) {
    .nav-links[b-5yp01yqlt6] {
        display: flex !important;
    }
}
/* _content/SynapseSTEPAI.Web/Components/Layout/TopNav.razor.rz.scp.css */
.topnav[b-ab6lr55qql] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 22px -20px var(--shadow);
}

.topnav-inner[b-ab6lr55qql] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    gap: 0.5rem;
}

.topnav-logo[b-ab6lr55qql] {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.topnav-logo .logo-teal[b-ab6lr55qql] {
    color: var(--teal-accent);
}

.topnav-logo .logo-blue[b-ab6lr55qql] {
    color: var(--electric-blue);
}

.topnav-links[b-ab6lr55qql] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topnav-link[b-ab6lr55qql] {
    padding: 0.5rem 0.75rem;
    color: var(--charcoal);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
}

.topnav-link:hover[b-ab6lr55qql] {
    background: var(--surface2);
    color: var(--navy);
}

.topnav-cta[b-ab6lr55qql] {
    padding: 8px 18px;
    background: var(--electric-blue);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 8px;
    box-shadow: 0 10px 20px -18px color-mix(in srgb, var(--electric-blue) 40%, transparent);
    transition: background 0.2s;
}

.topnav-cta:hover[b-ab6lr55qql] {
    background: var(--electric-blue-hover);
    color: var(--white);
}

.topnav-cta-gold[b-ab6lr55qql] {
    padding: 8px 24px;
    background: #fbbf24;
    color: #111827;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}

.topnav-cta-gold:hover[b-ab6lr55qql] {
    background: #f59e0b;
    color: #111827;
}

/* ── Dark mode nav overrides ──────────────────────────────────────────── */
[data-theme="dark"] .topnav[b-ab6lr55qql] {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .topnav-logo[b-ab6lr55qql] {
    color: var(--text);
}

[data-theme="dark"] .topnav-link[b-ab6lr55qql] {
    color: var(--text);
}

[data-theme="dark"] .topnav-link:hover[b-ab6lr55qql] {
    background: var(--surface2);
    color: var(--text);
}

.topnav-toggle[b-ab6lr55qql] {
    display: none;
}

.topnav-toggle-label[b-ab6lr55qql] {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.topnav-toggle-label span[b-ab6lr55qql] {
    width: 24px;
    height: 2px;
    background: var(--text);
}

@media (max-width: 768px) {
    .topnav-toggle-label[b-ab6lr55qql] {
        display: flex;
    }

    .topnav-links[b-ab6lr55qql] {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--surface);
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 22px -18px var(--shadow);
        display: none;
    }

    .topnav-toggle:checked~.topnav-links[b-ab6lr55qql] {
        display: flex;
    }

    .topnav-link[b-ab6lr55qql],
    .topnav-cta[b-ab6lr55qql] {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 769px) {
    .topnav-links[b-ab6lr55qql] {
        display: flex !important;
    }
}
/* _content/SynapseSTEPAI.Web/Components/Pages/Home-Modern.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Home-Modern.razor.css — Scoped styles for /modern page
   All classes prefixed hm- to avoid collision with global styles.
   Design: Glassmorphism · Electric Academy brand tokens · Light default

   LAYOUT NOTE: MainLayout wraps content in:
     article.content.layout-max.px-4
       → padding-top: 2rem
       → padding-inline: 1.5rem  (Bootstrap px-4 !important wins)
       → max-width: 1200px; margin: auto
   Sections with colored backgrounds use:
     margin-inline: -1.5rem  (break out of article side padding)
     padding-inline: 1.5rem  (restore for content)
   Hero also uses:
     margin-top: -2rem       (cancel article top padding)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Inner content container (no extra padding — article already has 1.5rem) */
.hm-container[b-g0h72jq516] {
    max-width: var(--layout-max, 1200px);
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
.hm-label[b-g0h72jq516] {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal, #00C2A8);
    margin-bottom: 0.5rem;
    display: block;
}
.hm-label-center[b-g0h72jq516] { text-align: center; }
.hm-label-gold[b-g0h72jq516]   { color: var(--gold-cta, #FFD426); }

.hm-section-title[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--navy, #0B1F3A);
    line-height: 1.1;
    margin-bottom: 1rem;
}
.hm-title-center[b-g0h72jq516] { text-align: center; }
.hm-title-dark[b-g0h72jq516]   { color: var(--navy, #0B1F3A); }

[data-theme="dark"] .hm-section-title[b-g0h72jq516] { color: #e8f0ff; }

.hm-subtitle-center[b-g0h72jq516] {
    text-align: center;
    color: var(--text-dim, #5c6b7a);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.hm-body-lg[b-g0h72jq516] {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text, #1A1A1A);
    margin-bottom: 1rem;
    max-width: 65ch;
}
.hm-body[b-g0h72jq516] {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-dim, #5c6b7a);
    max-width: 65ch;
    margin-bottom: 1rem;
}
.hm-body-dark[b-g0h72jq516] { color: var(--navy, #0B1F3A); }

/* ═══════════════════════════════════════════════════════════════════
   SHARED BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.hm-btn[b-g0h72jq516] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.625rem 1.5rem;
    border-radius: var(--btn-radius, 8px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}
.hm-btn:focus-visible[b-g0h72jq516] {
    outline: 2px solid var(--color-brand-primary, #0057FF);
    outline-offset: 3px;
}
.hm-btn-gold[b-g0h72jq516] {
    background: var(--gold-cta, #FFD426);
    color: var(--navy, #0B1F3A);
    border-color: var(--gold-cta, #FFD426);
}
.hm-btn-gold:hover[b-g0h72jq516] {
    background: var(--gold-cta-hover, #E8C000);
    border-color: var(--gold-cta-hover, #E8C000);
    color: var(--navy, #0B1F3A);
    text-decoration: none;
}
.hm-btn-primary[b-g0h72jq516] {
    background: var(--color-brand-primary, #0057FF);
    color: #fff;
    border-color: var(--color-brand-primary, #0057FF);
}
.hm-btn-primary:hover[b-g0h72jq516] {
    background: var(--electric-blue-hover, #0044cc);
    border-color: var(--electric-blue-hover, #0044cc);
    color: #fff;
    text-decoration: none;
}
.hm-btn-outline[b-g0h72jq516] {
    background: transparent;
    color: var(--color-brand-primary, #0057FF);
    border-color: var(--color-brand-primary, #0057FF);
}
.hm-btn-outline:hover[b-g0h72jq516] {
    background: var(--color-brand-primary, #0057FF);
    color: #fff;
    text-decoration: none;
}
.hm-btn-outline-light[b-g0h72jq516] {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}
.hm-btn-outline-light:hover[b-g0h72jq516] {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.8);
    color: #fff;
    text-decoration: none;
}
.hm-btn-block[b-g0h72jq516] { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   SECTION WRAPPERS
   ═══════════════════════════════════════════════════════════════════ */
.hm-section[b-g0h72jq516] {
    padding-block: var(--section-padding, 80px);
}

/* Alternate bg sections break out of article side padding so the
   colored background spans the full article width */
.hm-section-alt[b-g0h72jq516] {
    background: var(--bg, #F5F7FA);
    padding-block: var(--section-padding, 80px);
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
}
[data-theme="dark"] .hm-section-alt[b-g0h72jq516] { background: var(--surface2, #1C2333); }

/* ── Split Layout ──────────────────────────────────────────────── */
.hm-split[b-g0h72jq516] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
/* Use CSS order instead of direction:rtl to reverse column order */
.hm-split-reverse .hm-split-image[b-g0h72jq516] { order: -1; }

.hm-split-image[b-g0h72jq516] {
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
}
.hm-split-img[b-g0h72jq516] {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: var(--card-radius, 12px);
    display: block;
    box-shadow: 0 8px 32px rgba(11,31,58,0.10);
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
   Break out of article's top padding (2rem) and side padding (1.5rem)
   ═══════════════════════════════════════════════════════════════════ */
.hm-hero[b-g0h72jq516] {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f5f3 50%, #fff9f0 100%);
    padding-block: 5rem 4rem;
    margin-top: -2rem;          /* cancel article padding-top: 2rem */
    margin-inline: -1.5rem;     /* break out of article padding-inline: 1.5rem */
    padding-inline: 1.5rem;     /* restore side padding for content */
    overflow: hidden;
    position: relative;
}
[data-theme="dark"] .hm-hero[b-g0h72jq516] {
    background: linear-gradient(135deg, #0d1224 0%, #0a1a1f 50%, #110d1a 100%);
}

.hm-hero-grid[b-g0h72jq516] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hm-eyebrow[b-g0h72jq516] {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal, #00C2A8);
    margin-bottom: 1rem;
    display: block;
}

.hm-hero-title[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.0;
    color: var(--navy, #0B1F3A);
    margin-bottom: 1.25rem;
}
[data-theme="dark"] .hm-hero-title[b-g0h72jq516] { color: #e8f0ff; }

.hm-hero-subtitle[b-g0h72jq516] {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text-dim, #5c6b7a);
    max-width: 50ch;
    margin-bottom: 2rem;
}

.hm-hero-ctas[b-g0h72jq516] {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.hm-trust-line[b-g0h72jq516] {
    font-size: 0.8rem;
    color: var(--text-dim, #5c6b7a);
    margin: 0;
    line-height: 1.5;
}

/* Hero Image */
.hm-hero-image-wrap[b-g0h72jq516] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.hm-hero-image-glow[b-g0h72jq516] {
    position: absolute;
    inset: -15%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,194,168,0.18) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .hm-hero-image-glow[b-g0h72jq516] {
    background: radial-gradient(ellipse, rgba(0,212,232,0.14) 0%, transparent 68%);
}
.hm-hero-img[b-g0h72jq516] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(11,31,58,0.18);
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS STRIP — break out of article side padding
   ═══════════════════════════════════════════════════════════════════ */
.hm-stats-strip[b-g0h72jq516] {
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #d0d7de);
    border-bottom: 1px solid var(--border, #d0d7de);
    padding-block: 1.75rem;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
}
[data-theme="dark"] .hm-stats-strip[b-g0h72jq516] { background: var(--surface, #111827); }

.hm-stats-grid[b-g0h72jq516] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}

.hm-stat[b-g0h72jq516] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 2.5rem;
}
.hm-stat-number[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--navy, #0B1F3A);
    line-height: 1;
}
[data-theme="dark"] .hm-stat-number[b-g0h72jq516] { color: #e8f0ff; }
.hm-stat-plus[b-g0h72jq516] { font-size: 1.4rem; color: var(--teal, #00C2A8); }
.hm-stat-label[b-g0h72jq516] {
    font-size: 0.78rem;
    color: var(--text-dim, #5c6b7a);
    text-align: center;
    margin-top: 0.3rem;
}
.hm-stat-divider[b-g0h72jq516] {
    width: 1px;
    height: 2.5rem;
    background: var(--border, #d0d7de);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — STEPS
   ═══════════════════════════════════════════════════════════════════ */
.hm-steps[b-g0h72jq516] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.hm-step[b-g0h72jq516] {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--surface, #fff);
    border-radius: var(--card-radius, 12px);
    border: 1px solid var(--border, #d0d7de);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .hm-step[b-g0h72jq516] {
    background: rgba(17,24,39,0.7);
    border-color: rgba(255,255,255,0.07);
}

.hm-step-num[b-g0h72jq516] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-brand-primary, #0057FF);
    color: #fff;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 1rem;
}
.hm-step-num-teal[b-g0h72jq516]   { background: var(--teal, #00C2A8); }
.hm-step-num-orange[b-g0h72jq516] { background: var(--accent-orange, #FF6B2B); }

.hm-step-title[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--navy, #0B1F3A);
    margin-bottom: 0.5rem;
}
[data-theme="dark"] .hm-step-title[b-g0h72jq516] { color: #e8f0ff; }

.hm-step-body[b-g0h72jq516] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dim, #5c6b7a);
    margin: 0;
}

.hm-step-arrow[b-g0h72jq516] {
    width: 24px;
    color: var(--border, #d0d7de);
    margin-top: 3.75rem;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hm-step-arrow svg[b-g0h72jq516] { width: 24px; height: 24px; display: block; }

/* ═══════════════════════════════════════════════════════════════════
   TRACK CARDS — Glassmorphism Pricing
   ═══════════════════════════════════════════════════════════════════ */
.hm-tracks[b-g0h72jq516] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.hm-track-card[b-g0h72jq516] {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--border, #d0d7de);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(11,31,58,0.07);
    transition: box-shadow 250ms ease, transform 250ms ease;
}
.hm-track-card:hover[b-g0h72jq516] {
    box-shadow: 0 10px 48px rgba(11,31,58,0.13);
    transform: translateY(-3px);
    cursor: default;
}
.hm-track-card-featured[b-g0h72jq516] {
    border-color: var(--teal, #00C2A8);
    border-width: 2px;
    box-shadow: 0 4px 24px rgba(0,194,168,0.15);
}
.hm-track-card-featured:hover[b-g0h72jq516] {
    box-shadow: 0 10px 48px rgba(0,194,168,0.28);
}
[data-theme="dark"] .hm-track-card[b-g0h72jq516] {
    background: rgba(17,24,39,0.8);
    border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .hm-track-card-featured[b-g0h72jq516] {
    border-color: var(--teal, #00D4E8);
    border-width: 2px;
}

.hm-popular-badge[b-g0h72jq516] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent-orange, #FF6B2B);
    color: #fff;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    z-index: 1;
}

.hm-track-header[b-g0h72jq516] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}
.hm-track-header-blue[b-g0h72jq516] { background: var(--color-brand-primary, #0057FF); }
.hm-track-header-teal[b-g0h72jq516] { background: var(--teal, #00C2A8); }

.hm-track-label[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}
.hm-track-age[b-g0h72jq516] {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.68rem;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.06em;
}

.hm-track-body[b-g0h72jq516] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hm-track-hardware[b-g0h72jq516] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-dim, #5c6b7a);
    font-family: var(--font-mono, 'Space Mono', monospace);
}
.hm-hw-icon[b-g0h72jq516] { width: 16px; height: 16px; flex-shrink: 0; }

.hm-track-features[b-g0h72jq516] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.hm-track-features li[b-g0h72jq516] {
    font-size: 0.9rem;
    color: var(--text, #1A1A1A);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}
.hm-track-features li[b-g0h72jq516]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal, #00C2A8);
}
[data-theme="dark"] .hm-track-features li[b-g0h72jq516] { color: var(--text, #F0F4FF); }

.hm-track-pricing[b-g0h72jq516] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--bg, #F5F7FA);
    border-radius: 8px;
    flex-wrap: wrap;
}
[data-theme="dark"] .hm-track-pricing[b-g0h72jq516] { background: rgba(255,255,255,0.04); }

.hm-track-starter[b-g0h72jq516],
.hm-track-monthly[b-g0h72jq516] { display: flex; flex-direction: column; }

.hm-price-amount[b-g0h72jq516] {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy, #0B1F3A);
    line-height: 1;
}
[data-theme="dark"] .hm-price-amount[b-g0h72jq516] { color: #e8f0ff; }

.hm-price-note[b-g0h72jq516] {
    font-size: 0.7rem;
    color: var(--text-dim, #5c6b7a);
}
.hm-price-plus[b-g0h72jq516] {
    font-size: 1.2rem;
    color: var(--text-dim, #5c6b7a);
    font-weight: 300;
}

.hm-risk-note[b-g0h72jq516] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-dim, #5c6b7a);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.hm-risk-note[b-g0h72jq516]::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green, #22D07A);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CURRICULUM PILLARS
   ═══════════════════════════════════════════════════════════════════ */
.hm-pillars[b-g0h72jq516] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
    margin-top: 2rem;
}

.hm-pillar[b-g0h72jq516] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface, #fff);
    border-radius: var(--card-radius, 12px);
    border: 1px solid var(--border, #d0d7de);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hm-pillar:hover[b-g0h72jq516] {
    border-color: var(--teal, #00C2A8);
    box-shadow: 0 2px 12px rgba(0,194,168,0.12);
}
[data-theme="dark"] .hm-pillar[b-g0h72jq516] {
    background: rgba(17,24,39,0.6);
    border-color: rgba(255,255,255,0.06);
}

.hm-pillar-dot[b-g0h72jq516] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hm-dot-blue[b-g0h72jq516]   { background: var(--accent-blue,   #3B9EFF); }
.hm-dot-teal[b-g0h72jq516]   { background: var(--accent-teal,   #00D4E8); }
.hm-dot-orange[b-g0h72jq516] { background: var(--accent-orange, #FF6B2B); }
.hm-dot-purple[b-g0h72jq516] { background: var(--color-brand-ai, #6A0DAD); }
.hm-dot-green[b-g0h72jq516]  { background: var(--accent-green,  #22D07A); }
.hm-dot-yellow[b-g0h72jq516] { background: var(--accent-yellow, #FFD426); }

.hm-pillar-text[b-g0h72jq516] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text, #1A1A1A);
    line-height: 1.4;
}
[data-theme="dark"] .hm-pillar-text[b-g0h72jq516] { color: var(--text, #F0F4FF); }

/* ═══════════════════════════════════════════════════════════════════
   BADGE JOURNEY
   ═══════════════════════════════════════════════════════════════════ */
.hm-quote[b-g0h72jq516] {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--navy, #0B1F3A);
    border-left: 3px solid var(--teal, #00C2A8);
    margin: 1.25rem 0;
    padding-left: 1rem;
    line-height: 1.55;
}
[data-theme="dark"] .hm-quote[b-g0h72jq516] { color: #e8f0ff; }

.hm-badge-descriptions[b-g0h72jq516] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.hm-badge-desc[b-g0h72jq516] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.hm-badge-dot[b-g0h72jq516] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hm-badge-desc strong[b-g0h72jq516] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text, #1A1A1A);
    line-height: 1.2;
}
[data-theme="dark"] .hm-badge-desc strong[b-g0h72jq516] { color: var(--text, #F0F4FF); }
.hm-badge-sub[b-g0h72jq516] {
    font-size: 0.8rem;
    color: var(--text-dim, #5c6b7a);
    margin: 0;
}

.hm-badge-image-wrap[b-g0h72jq516] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: var(--surface, #fff);
    border-radius: 16px;
    border: 1px solid var(--border, #d0d7de);
    box-shadow: 0 4px 20px rgba(11,31,58,0.06);
}
[data-theme="dark"] .hm-badge-image-wrap[b-g0h72jq516] {
    background: rgba(17,24,39,0.6);
    border-color: rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   FOUNDING 50 — break out of article side padding
   ═══════════════════════════════════════════════════════════════════ */
.hm-founding-section[b-g0h72jq516] {
    background: linear-gradient(135deg, #fffbea 0%, #fff3c4 100%);
    padding-block: var(--section-padding, 80px);
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
}
[data-theme="dark"] .hm-founding-section[b-g0h72jq516] {
    background: linear-gradient(135deg, #1a1600 0%, #201a00 100%);
}

.hm-founding-grid[b-g0h72jq516] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}

.hm-founding-list[b-g0h72jq516] {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hm-founding-list li[b-g0h72jq516] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.95rem;
    color: var(--navy, #0B1F3A);
    font-weight: 500;
}
.hm-founding-list li svg[b-g0h72jq516] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--teal, #00C2A8);
}
[data-theme="dark"] .hm-founding-list li[b-g0h72jq516] { color: #e8e0a0; }

.hm-founding-card[b-g0h72jq516] {
    background: var(--navy, #0B1F3A);
    border-radius: 16px;
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    min-width: 220px;
    box-shadow: 0 8px 40px rgba(11,31,58,0.25);
}
.hm-founding-card-title[b-g0h72jq516] {
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.25rem;
}
.hm-founding-spots[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 5rem;
    font-weight: 700;
    color: var(--gold-cta, #FFD426);
    line-height: 1;
    margin-bottom: 1.25rem;
}
.hm-founding-note[b-g0h72jq516] {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    margin: 0.75rem 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════════════════════ */
.hm-carousel[b-g0h72jq516] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.hm-carousel-focus[b-g0h72jq516] {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(11,31,58,0.12);
}
.hm-carousel-img[b-g0h72jq516] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-carousel-thumbs[b-g0h72jq516] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.hm-thumb[b-g0h72jq516] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border, #d0d7de);
    background: none;
    padding: 0;
    cursor: pointer;
    transition: border-color 200ms ease;
    min-width: 44px;
    min-height: 44px;
}
.hm-thumb:hover[b-g0h72jq516]        { border-color: var(--teal, #00C2A8); }
.hm-thumb-active[b-g0h72jq516]       { border-color: var(--teal, #00C2A8); }
.hm-thumb:focus-visible[b-g0h72jq516] {
    outline: 2px solid var(--color-brand-primary, #0057FF);
    outline-offset: 2px;
}
.hm-thumb img[b-g0h72jq516] { width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-carousel-dots[b-g0h72jq516] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.hm-dot-btn[b-g0h72jq516] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-dot-btn[b-g0h72jq516]::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border, #d0d7de);
    transition: background-color 200ms ease, transform 200ms ease;
}
.hm-dot-btn-active[b-g0h72jq516]::after {
    background: var(--teal, #00C2A8);
    transform: scale(1.3);
}
.hm-dot-btn:focus-visible[b-g0h72jq516] {
    outline: 2px solid var(--color-brand-primary, #0057FF);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL CTA — break out of article side padding
   ═══════════════════════════════════════════════════════════════════ */
.hm-cta-section[b-g0h72jq516] {
    background: var(--navy, #0B1F3A);
    padding-block: 5rem;
    text-align: center;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    /* Also break out of article bottom padding */
    margin-bottom: calc(-1 * var(--section-padding, 80px));
    padding-bottom: calc(5rem + var(--section-padding, 80px));
}

.hm-cta-inner[b-g0h72jq516] { max-width: 680px; }

.hm-cta-title[b-g0h72jq516] {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.1;
}
.hm-cta-body[b-g0h72jq516] {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    max-width: 58ch;
    margin-inline: auto;
    margin-bottom: 2rem;
}
.hm-cta-buttons[b-g0h72jq516] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hm-track-card[b-g0h72jq516],
    .hm-pillar[b-g0h72jq516],
    .hm-thumb[b-g0h72jq516],
    .hm-dot-btn[b-g0h72jq516]::after,
    .hm-btn[b-g0h72jq516] {
        transition: none !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — 960px
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .hm-hero-grid[b-g0h72jq516]       { grid-template-columns: 1fr; }
    .hm-hero-image-wrap[b-g0h72jq516] { display: none; }
    .hm-split[b-g0h72jq516]           { grid-template-columns: 1fr; gap: 2rem; }
    .hm-split-reverse .hm-split-image[b-g0h72jq516] { order: 0; } /* reset on mobile */
    .hm-steps[b-g0h72jq516]           { grid-template-columns: 1fr; grid-template-rows: auto; }
    .hm-step-arrow[b-g0h72jq516]      { display: none; }
    .hm-tracks[b-g0h72jq516]          { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
    .hm-pillars[b-g0h72jq516]         { grid-template-columns: 1fr 1fr; }
    .hm-founding-grid[b-g0h72jq516]   { grid-template-columns: 1fr; }
    .hm-founding-card[b-g0h72jq516]   { min-width: unset; }
    .hm-stat[b-g0h72jq516]            { padding-inline: 1.25rem; }
    .hm-stat-divider[b-g0h72jq516]    { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — 480px mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .hm-hero[b-g0h72jq516]            { padding-block: 2.5rem 2rem; }
    .hm-section[b-g0h72jq516],
    .hm-section-alt[b-g0h72jq516],
    .hm-founding-section[b-g0h72jq516] { padding-block: 3rem; }
    .hm-hero-ctas[b-g0h72jq516]       { flex-direction: column; }
    .hm-hero-ctas .hm-btn[b-g0h72jq516] { width: 100%; }
    .hm-pillars[b-g0h72jq516]         { grid-template-columns: 1fr; }
    .hm-stats-grid[b-g0h72jq516]      { flex-wrap: wrap; gap: 1rem; }
    .hm-stat[b-g0h72jq516]            { flex: 1 1 40%; }
    .hm-founding-spots[b-g0h72jq516]  { font-size: 3.5rem; }
    .hm-cta-buttons[b-g0h72jq516]     { flex-direction: column; }
    .hm-cta-buttons .hm-btn[b-g0h72jq516] { width: 100%; max-width: 320px; }
}
/* _content/SynapseSTEPAI.Web/Components/Sections/BadgeRow.razor.rz.scp.css */
.badge-row-title[b-8g0xb4ncgi] {
    margin-bottom: 1.5rem;
}

.badge-row-items[b-8g0xb4ncgi] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.badge-item .badge-circle[b-8g0xb4ncgi] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    padding: 4px;
    box-shadow: 0 0 0 3px var(--accent, #C0C0C0);
}

.badge-item .badge-circle.badge-completed[b-8g0xb4ncgi] {
    box-shadow: 0 0 0 3px var(--accent, var(--teal-accent)), 0 0 12px rgba(0,179,164,0.3);
}

/* PNG badge image display */
.badge-img-wrap[b-8g0xb4ncgi] {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-png[b-8g0xb4ncgi] {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
    transition: transform 200ms ease, filter 200ms ease;
}

.badge-item:hover .badge-png[b-8g0xb4ncgi] {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.30));
}

.badge-img-wrap.badge-completed .badge-png[b-8g0xb4ncgi] {
    filter: drop-shadow(0 4px 16px rgba(0,194,168,0.45));
}
/* _content/SynapseSTEPAI.Web/Components/Sections/CTASection.razor.rz.scp.css */
.cta-section[b-gla8py1p2p] {
    background: var(--navy);
    color: var(--white);
    padding: var(--section-padding) 0;
    text-align: center;
}

.cta-title[b-gla8py1p2p] {
    color: var(--white);
    margin-bottom: 1rem;
}

.cta-body[b-gla8py1p2p] {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-section .cta-button[b-gla8py1p2p] {
    background: var(--electric-blue);
    color: var(--white);
}

.cta-section .cta-button:hover[b-gla8py1p2p] {
    background: var(--electric-blue-hover);
    color: var(--white);
}
/* _content/SynapseSTEPAI.Web/Components/Sections/HeroSection.razor.rz.scp.css */
.hero-section[b-cyyqgi7o3d] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: var(--section-padding) 0;
    background:
        radial-gradient(ellipse 68% 52% at 10% 12%, color-mix(in srgb, var(--accent-blue) 18%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 56% 44% at 88% 86%, color-mix(in srgb, var(--accent-orange) 18%, transparent) 0%, transparent 58%),
        linear-gradient(165deg, color-mix(in srgb, var(--surface) 92%, var(--bg)) 0%, color-mix(in srgb, var(--surface2) 88%, var(--bg)) 100%);
}

.hero-section-inner[b-cyyqgi7o3d] {
    width: 100%;
}

.hero-section-grid[b-cyyqgi7o3d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-eyebrow[b-cyyqgi7o3d] {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.hero-title[b-cyyqgi7o3d] {
    margin-bottom: 1rem;
}

.hero-subtitle[b-cyyqgi7o3d] {
    font-size: 18px;
    color: var(--muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-buttons[b-cyyqgi7o3d] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-section-image[b-cyyqgi7o3d] {
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.hero-section-image img[b-cyyqgi7o3d] {
    width: 100%;
    height: auto;
    display: block;
}

.hero-section-image.is-square[b-cyyqgi7o3d] {
    aspect-ratio: 1 / 1;
}

.hero-section-image.is-square img[b-cyyqgi7o3d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-placeholder[b-cyyqgi7o3d] {
    aspect-ratio: 4/3;
    min-height: 320px;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent-blue) 16%, transparent) 0%,
            color-mix(in srgb, var(--teal) 14%, transparent) 100%);
}

@media (max-width: 768px) {
    .hero-section-grid[b-cyyqgi7o3d] {
        grid-template-columns: 1fr;
    }

    .hero-section-image[b-cyyqgi7o3d] {
        order: -1;
        min-height: 240px;
    }

    .hero-buttons .btn[b-cyyqgi7o3d] {
        width: 100%;
    }
}
/* _content/SynapseSTEPAI.Web/Components/Sections/ProductCard.razor.rz.scp.css */
.product-card[b-0f0202idi6] {
    background: linear-gradient(165deg, var(--white) 0%, color-mix(in srgb, var(--surface2) 86%, var(--white)) 100%);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 14px 30px -24px var(--shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.product-card-title[b-0f0202idi6] {
    margin-bottom: 0.25rem;
}

.product-card-age[b-0f0202idi6],
.product-card-hardware[b-0f0202idi6] {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.product-card-prices[b-0f0202idi6] {
    margin-bottom: 1.5rem;
}

.product-card-starter[b-0f0202idi6] {
    font-size: 28px;
    font-weight: 700;
    color: var(--electric-blue);
    display: block;
}

.product-card-monthly[b-0f0202idi6] {
    font-size: 14px;
}

@media (max-width: 768px) {
    .btn-block-mobile[b-0f0202idi6] {
        width: 100%;
    }
}
/* _content/SynapseSTEPAI.Web/Components/Sections/SplitSection.razor.rz.scp.css */
.split-section[b-3x0xcj7fal] {
    padding: var(--section-padding) 0;
}

.split-section-white[b-3x0xcj7fal] { background: var(--white); }
.split-section-light[b-3x0xcj7fal] { background: var(--light-bg); }
.split-section-navy[b-3x0xcj7fal] {
    background: var(--navy);
    color: var(--white);
}

.split-section-navy .split-section-title[b-3x0xcj7fal] { color: var(--white); }
.split-section-navy .split-section-body[b-3x0xcj7fal] { color: rgba(255,255,255,0.9); }

.split-section-grid[b-3x0xcj7fal] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.split-section-reverse[b-3x0xcj7fal] { direction: rtl; }
.split-section-reverse > *[b-3x0xcj7fal] { direction: ltr; }

.split-section-title[b-3x0xcj7fal] { margin-bottom: 1rem; }

.split-section-body[b-3x0xcj7fal] {
    font-size: 18px;
    line-height: 1.6;
}

.split-section-quote[b-3x0xcj7fal] {
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    border-left: 4px solid var(--teal-accent);
    font-style: italic;
}

.split-section-image img[b-3x0xcj7fal] {
    width: 100%;
    height: auto;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
    .split-section-grid[b-3x0xcj7fal] { grid-template-columns: 1fr; direction: ltr; }
    .split-section-reverse[b-3x0xcj7fal] { direction: ltr; }
}