/* =========================================================
   ASTROFIN shared stylesheet
   Home page + Training pages
   ========================================================= */

:root {
    --navy: #07132f;
    --navy2: #0b1d42;
    --purple: #7256ff;
    --blue: #2b8cff;
    --text: #10203d;
    --muted: #63708a;
    --light: #f6f8fc;
    --white: #fff;
    --border: #e3e9f3;
    --shadow: 0 16px 45px rgba(19,42,85,.10);
    --purple2: #5740db;
    --blue-soft: #eef4ff;
    --blue2: #f7f9fd;
    --cyan: #38a8ff;
    --font-sans: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --heading-color: #07132f;
    --body-size: 16px;
    --body-line: 1.6;
    --h2-size: 38px;
    --h2-line: 1.15;
    --h3-size: 20px;
    --h4-size: 16px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: #fff;
    line-height: 1.6
}

a {
    text-decoration: none;
    color: inherit
}

.container {
    width: min(1180px,92%);
    margin: auto
}

/* NAV */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(5,15,37,.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.nav-inner {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: white;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 22px
}

.logo-mark {
    width: 35px;
    height: 35px;
    position: relative;
    display: inline-block
}

    .logo-mark:before, .logo-mark:after {
        content: "";
        position: absolute;
        transform: skew(-25deg)
    }

    .logo-mark:before {
        width: 13px;
        height: 34px;
        left: 7px;
        top: 0;
        background: linear-gradient(145deg,#9b72ff,#4b38dc);
        clip-path: polygon(55% 0,100% 0,54% 100%,0 100%)
    }

    .logo-mark:after {
        width: 27px;
        height: 11px;
        left: 5px;
        top: 14px;
        background: linear-gradient(90deg,#5c47ef,#a97cff);
        clip-path: polygon(0 50%,100% 0,72% 100%)
    }

.nav-links {
    display: flex;
    gap: 34px;
    color: #dce5fa;
    font-size: 14px
}

    .nav-links a {
        transition: .2s
    }

        .nav-links a:hover {
            color: #9f8cff
        }

.nav-cta {
    padding: 12px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg,#7256ff,#5740db);
    color: #fff;
    font-size: 14px;
    font-weight: 700
}


/* =========================================================
   TRAINING NAVIGATION DROPDOWN
   ========================================================= */

.training-menu {
    position: relative;
}

.training-trigger {
    border: 0;
    background: none;
    color: #dce5fa;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

    .training-trigger:hover {
        color: #9f8cff;
    }

.training-arrow {
    font-size: 10px;
    margin-left: 5px;
}

.training-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    left: -15px;
    min-width: 180px;
    background: #0b1d42;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
    padding: 8px;
}

.training-menu.open .training-dropdown {
    display: block;
}

.training-item {
    position: relative;
}

    .training-item > button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 0;
        background: none;
        color: #dce5fa;
        padding: 10px 12px;
        border-radius: 6px;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: left;
    }

        .training-item > button:hover {
            background: rgba(255,255,255,.08);
            color: white;
        }

.erla-arrow {
    font-size: 10px;
}

.erla-dropdown {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    min-width: 140px;
    background: #0b1d42;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    box-shadow: 0 15px 35px rgba(0,0,0,.25);
    padding: 8px;
}

.training-item.open .erla-dropdown {
    display: block;
}

.erla-dropdown a {
    display: block;
    color: #dce5fa;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
}

    .erla-dropdown a:hover {
        background: rgba(255,255,255,.08);
        color: white;
    }





/* HERO */
.hero {
    min-height: 760px;
    padding-top: 78px;
    background: radial-gradient(circle at 78% 43%,rgba(58,131,255,.22),transparent 26%), radial-gradient(circle at 90% 20%,rgba(116,73,255,.22),transparent 25%), linear-gradient(135deg,#050e24 0%,#091a3b 55%,#07132f 100%);
    color: white;
    overflow: hidden;
    position: relative
}

    .hero:after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .16;
        background-image: linear-gradient(rgba(90,150,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,255,.25) 1px,transparent 1px);
        background-size: 55px 55px;
        mask-image: linear-gradient(to bottom,transparent 0%,black 55%,transparent 100%)
    }

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 682px
}

.eyebrow {
    color: #9b87ff;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 800;
    margin-bottom: 20px
}

.hero h1 {
    font-size: clamp(44px,5.4vw,72px);
    line-height: 1.02;
    letter-spacing: -2.5px;
    max-width: 650px
}

.gradient-text {
    background: linear-gradient(90deg,#8b73ff,#4aa4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero p {
    color: #c7d2e8;
    max-width: 590px;
    font-size: 17px;
    margin: 27px 0 34px
}

.buttons {
    display: flex;
    gap: 15px;
    align-items: center
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px
}

.btn-primary {
    background: linear-gradient(135deg,#795cff,#5840dc);
    color: white;
    box-shadow: 0 10px 30px rgba(93,65,230,.3)
}

.btn-outline {
    border: 1px solid rgba(255,255,255,.65);
    color: white
}

.hero-art {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.cloud {
    width: 360px;
    height: 210px;
    border: 2px solid #5ea5ff;
    border-radius: 120px 120px 85px 85px;
    position: relative;
    box-shadow: 0 0 45px #286dff, inset 0 0 45px rgba(75,150,255,.18);
    background: rgba(23,75,150,.10)
}

    .cloud:before, .cloud:after {
        content: "";
        position: absolute;
        border: 2px solid #6eaeff;
        border-bottom: 0;
        background: #0a2048
    }

    .cloud:before {
        width: 145px;
        height: 115px;
        border-radius: 100px 100px 0 0;
        left: 65px;
        top: -76px
    }

    .cloud:after {
        width: 100px;
        height: 88px;
        border-radius: 90px 90px 0 0;
        right: 55px;
        top: -48px
    }

.ai-letter {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 86px;
    font-weight: 900;
    color: #5c8fff;
    text-shadow: 0 0 30px #267cff;
    z-index: 3
}

.city {
    position: absolute;
    bottom: 42px;
    width: 470px;
    height: 150px;
    background: linear-gradient(to top,rgba(32,110,240,.38),transparent);
    clip-path: polygon(0 100%,0 65%,7% 65%,7% 42%,13% 42%,13% 72%,19% 72%,19% 28%,25% 28%,25% 58%,31% 58%,31% 12%,37% 12%,37% 67%,45% 67%,45% 35%,52% 35%,52% 76%,60% 76%,60% 24%,66% 24%,66% 62%,73% 62%,73% 42%,79% 42%,79% 70%,87% 70%,87% 20%,94% 20%,94% 60%,100% 60%,100% 100%)
}

/* SECTIONS */
section {
    padding: 95px 0
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 52px
}

.kicker {
    color: #644cff;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800
}

.section-head h2 {
    font-size: 38px;
    line-height: 1.15;
    margin: 11px 0 14px;
    letter-spacing: -1px
}

.section-head p {
    color: var(--muted)
}

.services {
    background: #fff
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 16px
}

.card {
    padding: 28px 22px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: white;
    box-shadow: 0 8px 28px rgba(20,44,90,.06);
    transition: .25s
}

    .card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
        border-color: #cfd7eb
    }

.icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f0f4ff;
    color: #5e4df0;
    font-size: 25px;
    margin-bottom: 22px
}

.card h3 {
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 12px
}

.card p {
    font-size: 13px;
    color: var(--muted);
    min-height: 96px
}

.learn {
    display: inline-block;
    color: #5542e6;
    font-size: 13px;
    font-weight: 700;
    margin-top: 16px
}

.about {
    background: linear-gradient(180deg,#f7f9fd,#eef2f9)
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.about h2 {
    font-size: 42px;
    line-height: 1.15;
    margin: 10px 0 18px
}

.about p {
    color: var(--muted);
    max-width: 540px
}

.checks {
    list-style: none;
    margin-top: 25px;
    display: grid;
    gap: 11px
}

    .checks li:before {
        content: "✓";
        display: inline-grid;
        place-items: center;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background: #6752ee;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        margin-right: 10px
    }

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 30px;
    box-shadow: 0 8px 28px rgba(20,44,90,.05)
}

    .stat strong {
        display: block;
        font-size: 36px;
        color: #14244a
    }

    .stat span {
        color: var(--muted);
        font-size: 14px
    }

.industries {
    background: white
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.industry {
    border: 1px solid var(--border);
    padding: 25px;
    border-radius: 12px
}

    .industry b {
        font-size: 16px
    }

    .industry p {
        font-size: 13px;
        color: var(--muted);
        margin-top: 7px
    }

.cta {
    padding: 78px 0;
    background: linear-gradient(120deg,#101f44,#142e62);
    color: white
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.cta h2 {
    font-size: 40px;
    line-height: 1.15
}

.cta p {
    color: #c4d0e6;
    margin-top: 10px
}

footer {
    background: #06122d;
    color: #b8c4da;
    padding: 60px 0 25px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 45px
}

footer .logo {
    margin-bottom: 18px
}

footer h4 {
    color: #fff;
    margin-bottom: 17px;
    font-size: 14px
}

footer ul {
    list-style: none;
    display: grid;
    gap: 9px;
    font-size: 13px
}

footer a:hover {
    color: white
}

.tagline {
    color: #fff;
    font-size: 13px
}

.copyright {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 45px;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #7f8ca5
}

@media(max-width:950px) {
    .nav-links {
        display: none
    }

    .hero-inner {
        grid-template-columns: 1fr
    }

    .hero-art {
        display: none
    }

    .hero {
        min-height: auto;
        padding-bottom: 90px
    }

    .service-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .about-grid {
        grid-template-columns: 1fr
    }

    .industry-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(max-width:580px) {
    section {
        padding: 70px 0
    }

    .hero h1 {
        font-size: 43px
    }

    .hero p {
        font-size: 15px
    }

    .service-grid, .industry-grid, .stats, .footer-grid {
        grid-template-columns: 1fr
    }

    .section-head h2, .about h2, .cta h2 {
        font-size: 31px
    }

    .nav-cta {
        padding: 10px 14px
    }
}

/* ===== APPROVED BLENDED ASTROFIN HERO ===== */
.hero-banner {
    padding-top: 78px;
    width: 100%;
    background: #050e24;
    overflow: hidden;
}

.hero-banner-wrap {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    line-height: 0;
    overflow: hidden;
}

.hero-banner-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
}

.hero-hotspot {
    position: absolute;
    display: block;
    z-index: 5;
    background: transparent;
}

.hero-services {
    left: 4.2%;
    top: 71%;
    width: 17%;
    height: 10%
}

.hero-talk {
    left: 22%;
    top: 71%;
    width: 13%;
    height: 10%
}

.hero-info {
    left: 4%;
    top: 85.5%;
    width: 14%;
    height: 8%
}

.hero-contact {
    left: 19%;
    top: 85.5%;
    width: 17%;
    height: 8%
}

@media(max-width:900px) {
    .hero-banner {
        padding-top: 70px
    }
}



/* =========================================================
   TRAINING PAGE
   The training styles are scoped to .training-page so that
   they do not interfere with the corporate home page.
   ========================================================= */
/* =========================================================
   TRAINING PAGE NAVIGATION
   Shared by all training pages
   ========================================================= */

.training-nav {
    background: var(--navy);
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,.10);
    position: relative;
    z-index: 50;
}

.training-nav-inner {
    width: min(1200px, 100%);
    min-height: 58px;
    margin: auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.training-home {
    display: inline-flex;
    align-items: center;
    color: #dce5fa;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: .2s;
}

    .training-home:hover {
        color: #ffffff;
    }

.training-nav-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}

.training-days {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .training-days a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 62px;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 7px;
        color: #dce5fa;
        font-size: 12px;
        font-weight: 700;
        transition: .2s;
    }

        .training-days a:hover {
            background: rgba(255,255,255,.08);
            color: #ffffff;
        }

        .training-days a.active {
            background: linear-gradient(135deg,var(--purple),var(--purple2));
            border-color: transparent;
            color: #ffffff;
        }




.training-page {
    margin: 0;
    color: var(--text);
    background: #f6f8fc;
    font-family: var(--font-sans);
    line-height: 1.65;
    font-size: 16px;
}

    .training-page .hero {
        background: radial-gradient(circle at 82% 38%,rgba(43,140,255,.20),transparent 28%), radial-gradient(circle at 92% 8%,rgba(114,86,255,.25),transparent 30%), linear-gradient(135deg,#050e24 0%,#091a3b 58%,#07132f 100%);
        color: white;
        padding: 48px 28px 40px;
        position: relative;
        overflow: hidden;
        min-height: auto;
    }

        .training-page .hero:after {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .13;
            background-image: linear-gradient(rgba(90,150,255,.25) 1px,transparent 1px), linear-gradient(90deg,rgba(90,150,255,.25) 1px,transparent 1px);
            background-size: 55px 55px;
            mask-image: linear-gradient(to bottom,transparent 0%,black 50%,transparent 100%);
        }

    .training-page .hero-inner {
        max-width: 1200px;
        margin: auto;
        position: relative;
        z-index: 1;
        display: block;
        min-height: auto;
    }

    .training-page .eyebrow {
        text-transform: uppercase;
        letter-spacing: .16em;
        font-size: 12px;
        font-weight: 800;
        color: #9b87ff;
        margin-bottom: 11px
    }

    .training-page h1 {
        font-size: 42px;
        line-height: 1.12;
        margin: 0 0 13px;
        font-weight: 800;
        letter-spacing: -1.2px;
        color: var(--white);
        max-width: 850px;
    }

    .training-page .subtitle {
        font-size: 17px;
        color: #cbd7ec;
        max-width: 900px
    }

    .training-page .meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 23px
    }

    .training-page .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.07);
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 13px;
        color: #e7edfb
    }

    .training-page .wrap {
        width: min(1200px, 100%);
        max-width: 1200px;
        margin: auto;
        padding: 22px 22px 60px;
    }

    .training-page .overview {
        background: white;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 20px;
        box-shadow: var(--shadow);
        margin-bottom: 18px
    }

    .training-page .overview-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .training-page .metric {
        width: 100%;
        min-width: 0;
    }

    .training-page .metric {
        background: var(--blue2);
        border: 1px solid var(--border);
        padding: 13px;
        border-radius: 10px;
        position: relative;
        overflow: hidden
    }

        .training-page .metric:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg,var(--purple),var(--blue))
        }

        .training-page .metric b {
            display: block;
            color: var(--navy);
            font-size: 18px
        }

        .training-page .metric span {
            font-size: 12px;
            color: var(--muted)
        }

    .training-page .tabs {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(246,248,252,.96);
        backdrop-filter: blur(10px);
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        margin: 0 0 20px;
    }

    .training-page .tabbar {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
    }

    .training-page .tab {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        border: 1px solid var(--border);
        background: white;
        color: var(--navy);
        padding: 9px 8px;
        border-radius: 9px;
        cursor: pointer;
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: 12px;
        line-height: 1.25;
        transition: .18s;
        white-space: normal;
        text-align: center;
    }

        .training-page .tab:hover {
            border-color: #9f8cff;
            color: #5740db
        }

        .training-page .tab.active {
            background: linear-gradient(135deg,var(--purple),var(--purple2));
            color: white;
            border-color: transparent;
            box-shadow: 0 7px 18px rgba(93,65,230,.18)
        }

    .training-page .section {
        display: none
    }

        .training-page .section.active {
            display: block
        }

    .training-page .section-head {
        width: 100%;
        max-width: none;
        background: white;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 24px;
        box-shadow: var(--shadow);
        margin: 0 0 16px;
    }

    /* Override the corporate homepage section spacing.
       Training sections are content panels, not full-width homepage sections. */
    .training-page section,
    .training-page .section {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .training-page .block,
    .training-page .quiz,
    .training-page .sources,
    .training-page .callout {
        width: 100%;
    }

    .training-page .section-kicker {
        color: #654cff;
        font-weight: 800;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .09em
    }

    .training-page h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
        color: var(--heading-color);
        margin: 5px 0 12px;
        letter-spacing: -1px;
        font-weight: 800;
    }

    .training-page h3 {
        font-size: var(--h3-size);
        line-height: 1.25;
        color: var(--heading-color);
        margin: 24px 0 9px;
        font-weight: 800;
    }

    .training-page h4 {
        font-size: var(--h4-size);
        line-height: 1.3;
        color: var(--heading-color);
        margin: 18px 0 7px;
        font-weight: 700;
    }

    .training-page p {
        margin: 8px 0 13px
    }

    .training-page .time {
        display: inline-block;
        background: #edf3ff;
        color: #4e3fd5;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 800;
        border: 1px solid #dfe5ff
    }

    .training-page .block {
        background: white;
        border: 1px solid var(--border);
        border-radius: 13px;
        margin: 12px 0;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(20,44,90,.04)
    }

    .training-page .block-head {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        align-items: center;
        padding: 15px 18px;
        background: linear-gradient(90deg,#f7f9fd,#f2f6ff);
        border-bottom: 1px solid var(--border)
    }

        .training-page .block-head strong {
            color: var(--navy)
        }

    .training-page .block-body {
        padding: 18px 20px
    }

    .training-page .say {
        border-left: 4px solid var(--purple);
        background: #f8f9ff;
        padding: 14px 16px;
        margin: 12px 0;
        border-radius: 0 9px 9px 0
    }

        .training-page .say:before {
            content: "TRAINER";
            display: block;
            font-size: 10px;
            letter-spacing: .1em;
            font-weight: 800;
            color: #6249e8;
            margin-bottom: 5px
        }

    .training-page .prompt {
        border-left: 4px solid var(--blue);
        background: #f1f7ff;
        padding: 13px 15px;
        margin: 12px 0;
        border-radius: 0 9px 9px 0
    }

        .training-page .prompt:before {
            content: "ASK / INTERACTION";
            display: block;
            font-size: 10px;
            letter-spacing: .1em;
            font-weight: 800;
            color: #2475c9;
            margin-bottom: 5px
        }

    .training-page .note {
        background: #f4f7fb;
        border: 1px solid var(--border);
        padding: 12px 14px;
        border-radius: 9px;
        color: #42536b;
        margin: 12px 0
    }

    .training-page .quiz {
        background: linear-gradient(135deg,#f3f1ff,#eef6ff);
        border: 1px solid #dcdcff;
        border-radius: 13px;
        padding: 18px;
        margin-top: 20px
    }

        .training-page .quiz h3 {
            margin-top: 0;
            color: #4e3fd5
        }

    .training-page .q {
        margin: 16px 0;
        padding-bottom: 14px;
        border-bottom: 1px dashed #cfd7e8
    }

        .training-page .q:last-child {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0
        }

    .training-page .answer {
        margin-top: 7px;
        color: #345ec5;
        font-weight: 700
    }

    .training-page .table-wrap {
        overflow: auto;
        margin: 12px 0
    }

    .training-page table {
        width: 100%;
        border-collapse: collapse;
        background: white
    }

    .training-page th,
    .training-page td {
        border: 1px solid var(--border);
        padding: 10px 12px;
        text-align: left;
        vertical-align: top
    }

    .training-page th {
        background: #eef4ff;
        color: var(--navy)
    }

    .training-page ul,
    .training-page ol {
        padding-left: 23px
    }

    .training-page li {
        margin: 5px 0
    }

    .training-page .callout {
        border: 1px solid #dbe3f1;
        background: linear-gradient(135deg,#f7f9fd,#fff);
        border-radius: 13px;
        padding: 17px;
        margin: 14px 0
    }

    .training-page .sources {
        margin-top: 25px;
        background: white;
        border: 1px solid var(--border);
        border-radius: 13px;
        padding: 20px
    }

        .training-page .sources a {
            color: #4e3fd5;
            text-decoration: none;
            font-weight: 600
        }

            .training-page .sources a:hover {
                text-decoration: underline
            }

    .training-page .footer {
        color: var(--muted);
        font-size: 12px;
        margin-top: 25px;
        text-align: center
    }

@media(max-width:850px) {

    .training-page .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-page .tabbar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .training-page .tab {
        font-size: 11.5px;
        padding: 9px 6px;
    }

    .training-page h1 {
        font-size: 34px;
    }

    .training-nav-inner {
        min-height: 54px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .training-nav-title {
        display: none;
    }
}

@media(max-width:520px) {
    .training-page {
        font-size: 15px;
    }

        .training-page .overview-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .training-page .tabbar {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .training-page .wrap {
            padding-left: 12px;
            padding-right: 12px;
        }

        .training-page .hero {
            padding-left: 18px;
            padding-right: 18px;
        }

        .training-page h1 {
            font-size: 30px;
        }

        .training-page h2 {
            font-size: 30px;
        }

        .training-page h3 {
            font-size: 19px;
        }

    .training-nav-inner {
        padding-left: 12px;
        padding-right: 12px;
        gap: 10px;
    }

    .training-days {
        gap: 4px;
    }

        .training-days a {
            min-width: 48px;
            padding: 6px 7px;
            font-size: 11px;
        }

    .training-home {
        font-size: 13px;
    }
}

@media print {
    .training-page .tabs {
        position: static
    }

    .training-page .tabbar {
        display: none
    }

    .training-page .section {
        display: block !important
    }

    .training-page {
        background: white
    }

        .training-page .hero {
            print-color-adjust: exact
        }

        .training-page .section {
            page-break-before: always
        }

            .training-page .section:first-of-type {
                page-break-before: auto
            }
}


/* =========================================================
   ASTROFIN 404 PAGE
   Abstract AI / Digital Error Page
   ========================================================= */

.status-page {
    min-height: 100vh;
    background: #ffffff;
    color: var(--text);
}


    /* ---------------------------------------------------------
   MAIN
   --------------------------------------------------------- */

    .status-page .status-main {
        width: 100%;
        padding: 48px 0 0;
    }

    .status-page .status-shell {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }


    /* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

    .status-page .status-hero {
        width: 100%;
        min-height: 470px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
        background: #ffffff;
    }


    /* ---------------------------------------------------------
   LEFT CONTENT
   --------------------------------------------------------- */

    .status-page .status-copy {
        position: relative;
        z-index: 2;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 7.5%;
        /*
       Very subtle purple atmospheric glow.
       Keeps the 404 area part of the same page canvas.
    */
        background: radial-gradient( circle at 18% 48%, rgba(114, 86, 255, .055), transparent 38% );
    }

    .status-page .status-kicker {
        margin: 0 0 15px;
        color: #4938d7;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .08em;
    }

    .status-page .status-code {
        margin: 0 0 18px;
        font-size: clamp(78px, 9vw, 128px);
        line-height: .82;
        font-weight: 900;
        letter-spacing: -6px;
        background: linear-gradient( 90deg, #7256ff, #3d28d4 );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .status-page .status-copy h1 {
        max-width: 650px;
        margin: 0 0 21px;
        color: var(--heading-color);
        font-size: clamp(40px, 4.4vw, 60px);
        line-height: 1.02;
        font-weight: 800;
        letter-spacing: -2px;
    }

    .status-page .status-copy p {
        max-width: 500px;
        margin: 0 0 29px;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.65;
    }


    /* ---------------------------------------------------------
   ACTION BUTTONS
   --------------------------------------------------------- */

    .status-page .status-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

        .status-page .status-actions .btn {
            min-height: 50px;
            padding: 13px 22px;
            border: 1px solid #bfc9df;
            border-radius: 9px;
        }

            .status-page .status-actions .btn span {
                font-size: 20px;
                line-height: 1;
            }

        .status-page .status-actions .btn-primary {
            border-color: transparent;
        }

    .status-page .status-talk-btn {
        color: #17284a;
        background: #ffffff;
    }

        .status-page .status-talk-btn:hover {
            border-color: #7256ff;
            color: #4938d7;
            background: #f8f7ff;
        }


    /* ---------------------------------------------------------
   DIGITAL ARTWORK
   --------------------------------------------------------- */

    .status-page .status-visual {
        position: relative;
        min-width: 0;
        min-height: 470px;
        overflow: hidden;
        /*
       Transparent so the artwork becomes part of the
       overall white page rather than a separate card.
    */
        background: transparent;
    }


        /*
   Artwork image.

   The PNG contains its own pale background, therefore
   we use contain rather than cover so no part of the
   illustration gets cropped.
*/

        .status-page .status-visual img {
            display: block;
            width: 108%;
            height: 108%;
            max-width: none;
            margin-left: -4%;
            margin-top: -4%;
            object-fit: contain;
            object-position: center;
        }


        /*
   Soft white fade around the artwork.

   This visually blends the PNG into the surrounding
   white page and removes the hard rectangular edge.
*/

        .status-page .status-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient( to right, #ffffff 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 88%, #ffffff 100% ), linear-gradient( to bottom, #ffffff 0%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 91%, #ffffff 100% );
        }


    /* ---------------------------------------------------------
   RECOVERY / HIGHLIGHT OPTIONS
   --------------------------------------------------------- */

    .status-page .status-highlights {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: #ffffff;
        border-top: 1px solid #eef2f8;
    }

    .status-page .highlight {
        min-height: 175px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 20px;
        text-align: center;
        border-right: 1px solid #dfe6f1;
        text-decoration: none;
        transition: background .2s ease, transform .2s ease;
    }

        .status-page .highlight:last-child {
            border-right: 0;
        }

        .status-page .highlight:hover {
            background: #fafbff;
        }

    .status-page .highlight-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 13px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #f1f3ff;
        color: #2937bb;
        font-size: 30px;
        transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .status-page .highlight:hover .highlight-icon {
        background: #e9e6ff;
        color: #4938d7;
        transform: translateY(-2px);
    }

    .status-page .highlight strong {
        margin-bottom: 6px;
        color: var(--heading-color);
        font-size: 16px;
        font-weight: 800;
        transition: color .2s ease;
    }

    .status-page .highlight:hover strong {
        color: #4e3fd5;
    }

    .status-page .highlight span:not(.highlight-icon) {
        max-width: 280px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
    }


    /* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

    .status-page .status-footer {
        min-height: 155px;
        padding: 34px 6.5%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        background: #f4f6fb;
        color: var(--text);
    }

        .status-page .status-footer .logo {
            color: var(--text);
        }

    .status-page .status-footer-right {
        text-align: right;
    }

    .status-page .status-footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12px;
        margin-bottom: 17px;
        color: #53617a;
        font-size: 13px;
    }

        .status-page .status-footer-links a {
            color: inherit;
            text-decoration: none;
        }

            .status-page .status-footer-links a:hover {
                color: #4938d7;
            }

    .status-page .status-copyright {
        color: var(--muted);
        font-size: 12px;
    }


    /* ---------------------------------------------------------
   HEADER SEARCH
   --------------------------------------------------------- */

    .status-page .nav-search {
        width: 40px;
        height: 40px;
        margin-left: auto;
        margin-right: 3px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #f2f4fb;
        color: #26385b;
        font-size: 23px;
        text-decoration: none;
        transition: background .2s ease, color .2s ease;
    }

        .status-page .nav-search:hover {
            background: #e9e6ff;
            color: #4938d7;
        }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

    .status-page .status-main {
        padding-top: 80px;
    }

    .status-page .status-hero {
        grid-template-columns: 1fr;
    }

    .status-page .status-visual {
        min-height: 430px;
        max-height: 500px;
        order: -1;
    }

    .status-page .status-copy {
        padding: 52px 8%;
    }

    .status-page .status-highlights {
        grid-template-columns: 1fr;
    }

    .status-page .highlight {
        min-height: 175px;
        border-right: 0;
        border-bottom: 1px solid #dfe6f1;
    }

        .status-page .highlight:last-child {
            border-bottom: 0;
        }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 580px) {

    .status-page .status-main {
        padding-top: 70px;
    }

    .status-page .status-visual {
        min-height: 340px;
        max-height: none;
    }

        .status-page .status-visual img {
            width: 112%;
            height: 112%;
            margin-left: -6%;
            margin-top: -6%;
        }

    .status-page .status-copy {
        padding: 38px 24px 42px;
    }

    .status-page .status-code {
        font-size: 76px;
        letter-spacing: -4px;
    }

    .status-page .status-copy h1 {
        font-size: 39px;
        letter-spacing: -1.5px;
    }

    .status-page .status-copy p {
        font-size: 15px;
    }

    .status-page .status-actions {
        flex-direction: column;
    }

        .status-page .status-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .status-page .status-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .status-page .status-footer-right {
        text-align: left;
    }

    .status-page .status-footer-links {
        justify-content: flex-start;
    }
}