:root {
    --od-ink: #111a35;
    --od-muted: #64718b;
    --od-primary: #4f46e5;
    --od-primary-2: #7c3aed;
    --od-cyan: #22d3ee;
    --od-gold: #fbbf24;
    --od-surface: rgba(255, 255, 255, 0.94);
    --od-line: rgba(100, 116, 139, 0.16);
    --od-shadow: 0 22px 55px rgba(23, 31, 64, 0.10);
    --od-shadow-hover: 0 28px 70px rgba(37, 45, 90, 0.16);
}

.od-page,
.od-page * {
    box-sizing: border-box;
}

.od-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--od-ink);
    background: radial-gradient(circle at 7% 4%, rgba(99, 102, 241, .10), transparent 30rem), radial-gradient(circle at 93% 16%, rgba(34, 211, 238, .09), transparent 28rem), linear-gradient(180deg, #f7f9ff 0%, #ffffff 32%, #f8fafc 100%);
}

.od-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.od-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(5px);
    opacity: .55;
}

.od-orb-one {
    width: 22rem;
    height: 22rem;
    left: -11rem;
    top: 19rem;
    background: rgba(124, 58, 237, .10);
}

.od-orb-two {
    width: 28rem;
    height: 28rem;
    right: -14rem;
    top: 53rem;
    background: rgba(34, 211, 238, .10);
}

.od-grid {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(rgba(79,70,229,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 36%);
}

.od-shell {
    position: relative;
    z-index: 1;
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.od-loading {
    min-height: 68vh;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

    .od-loading h1 {
        margin: 1.25rem 0 .35rem;
        font-size: clamp(1.45rem, 3vw, 2rem);
        font-weight: 800;
    }

    .od-loading p {
        margin: 0;
        color: var(--od-muted);
    }

.od-loader {
    width: 3.25rem;
    height: 3.25rem;
    border: 4px solid rgba(79,70,229,.15);
    border-top-color: var(--od-primary);
    border-radius: 50%;
    animation: od-spin .8s linear infinite;
}

@keyframes od-spin {
    to {
        transform: rotate(360deg);
    }
}

.od-back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: .55rem .7rem;
    border: 0;
    border-radius: .7rem;
    color: #536078;
    background: transparent;
    font-weight: 700;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

    .od-back svg {
        width: 1.15rem;
        height: 1.15rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .od-back:hover {
        color: var(--od-primary);
        background: rgba(79,70,229,.07);
        transform: translateX(-3px);
    }

    .od-back:focus-visible, .od-button:focus-visible {
        outline: 3px solid rgba(79,70,229,.25);
        outline-offset: 3px;
    }

.od-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 1.75rem;
    color: white;
    background: linear-gradient(128deg, #111936 0%, #292258 48%, #4f46e5 100%);
    box-shadow: 0 30px 80px rgba(31, 38, 82, .25);
}

    .od-hero::before {
        content: "";
        position: absolute;
        width: 25rem;
        height: 25rem;
        left: 34%;
        top: -17rem;
        border-radius: 50%;
        background: rgba(255,255,255,.09);
    }

.od-hero-copy {
    position: relative;
    padding: clamp(2rem, 5vw, 4.25rem);
}

.od-hero h1 {
    max-width: 850px;
    margin: 1rem 0 1.15rem;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 850;
}

.od-hero-lead {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.72;
}

.od-hero-title {
    margin: 1rem 0;
    font-size: clamp(3rem,6vw,5rem);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -.06em;
    max-width: 900px;
}

.od-hero-stats {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.od-hero-stat {
    position: relative;
    overflow: hidden;
    min-width: 185px;
    padding: 1.2rem 1.35rem;
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

    .od-hero-stat::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient( 90deg, #22d3ee, #60a5fa, #818cf8 );
        opacity: .85;
    }

    .od-hero-stat:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.24);
        box-shadow: 0 18px 40px rgba(0,0,0,.20);
    }

.od-hero-stat-label {
    display: block;
    color: rgba(255,255,255,.65);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .35rem;
    font-weight: 700;
}

.od-hero-stat strong {
    font-size: 1.45rem;
    color: #fff;
    font-weight: 800;
}
.od-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--od-primary);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.od-kicker-light {
    color: #c4b5fd;
}

.od-kicker-dot {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--od-cyan);
    box-shadow: 0 0 0 .35rem rgba(34,211,238,.13);
}

.od-hero-tags {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.od-feature-pill {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    transition: .25s;
}

    .od-feature-pill:hover {
        transform: translateY(-5px);
        background: rgba(255,255,255,.12);
    }

.od-feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    background: linear-gradient(135deg,#4f46e5,#2563eb);
    flex-shrink: 0;
}

.od-feature-pill strong {
    display: block;
    color: white;
    font-size: .95rem;
    margin-bottom: 3px;
}

.od-feature-pill small {
    color: rgba(255,255,255,.70);
    font-size: .82rem;
}

@media (max-width:992px) {

    .od-hero-tags {
        grid-template-columns: 1fr;
    }
}

    .od-hero-tags span {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .62rem .85rem;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 999px;
        color: rgba(255,255,255,.88);
        background: rgba(255,255,255,.07);
        backdrop-filter: blur(10px);
        font-size: .86rem;
        font-weight: 700;
    }

    .od-hero-tags svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: #67e8f9;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.od-hero-pro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 4vw, 3.35rem);
    border-left: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
    backdrop-filter: blur(14px);
}

.od-pro-glow {
    position: absolute;
    width: 14rem;
    height: 14rem;
    right: -4rem;
    top: -5rem;
    border-radius: 50%;
    background: rgba(251,191,36,.16);
    filter: blur(18px);
}

.od-pro-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    margin-bottom: 1.35rem;
    border: 1px solid rgba(251,191,36,.25);
    border-radius: 1rem;
    color: #fde68a;
    background: rgba(251,191,36,.13);
}

    .od-pro-icon svg {
        width: 1.55rem;
        height: 1.55rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.od-pro-label {
    position: relative;
    color: #fde68a;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.od-hero-pro h2 {
    position: relative;
    margin: .8rem 0 .8rem;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 800;
}

.od-hero-pro p {
    position: relative;
    margin: 0 0 1.55rem;
    color: rgba(255,255,255,.65);
    line-height: 1.65;
}

.od-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3rem;
    padding: .78rem 1.05rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

    .od-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 65%;
        height: 100%;
        background: linear-gradient( 110deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-20deg);
        transition: left .7s ease;
    }

    .od-button:hover::before {
        left: 150%;
    }

    .od-button:hover {
        transform: translateY(-3px);
    }

    .od-button:active {
        transform: translateY(-1px);
    }

    .od-button span {
        position: relative;
        z-index: 1;
    }

    .od-button svg {
        position: relative;
        z-index: 1;
        width: 1.1rem;
        height: 1.1rem;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.1;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .2s ease;
    }

    .od-button:hover {
        transform: translateY(-2px);
    }

        .od-button:hover svg {
            transform: translateX(3px);
        }

.od-button-gold {
    color: #312407;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 12px 30px rgba(251,191,36,.2);
}

    .od-button-gold:hover {
        color: #312407;
        box-shadow: 0 16px 35px rgba(251,191,36,.3);
    }

.od-button-outline {
    color: var(--od-primary);
    border-color: rgba(79,70,229,.23);
    background: #fff;
}

    .od-button-outline:hover {
        color: #3730a3;
        border-color: rgba(79,70,229,.4);
        background: #f8f7ff;
        box-shadow: 0 12px 25px rgba(79,70,229,.10);
    }

.od-button-large {
    min-height: 3.5rem;
    padding: .95rem 1.35rem;
    white-space: nowrap;
}

.od-section {
    margin-top: clamp(4rem, 8vw, 6.5rem);
}

.od-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.8rem;
}

    .od-section-heading h2, .od-skills h2, .od-final-cta h2 {
        margin: .45rem 0 0;
        font-size: clamp(2rem, 4vw, 3.1rem);
        line-height: 1.08;
        letter-spacing: -.045em;
        font-weight: 850;
    }

    .od-section-heading > p {
        max-width: 540px;
        margin: 0;
        color: var(--od-muted);
        line-height: 1.7;
    }

.od-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}

.od-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    padding: 1.5rem;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .od-stat-card::before {
        content: "";
        position: absolute;
        width: 12rem;
        height: 12rem;
        right: -7rem;
        bottom: -7rem;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(79, 70, 229, .10), transparent 70% );
    }

    .od-stat-card:hover {
        transform: translateY(-7px);
        border-color: rgba(79, 70, 229, .24);
        box-shadow: 0 25px 55px rgba(15, 23, 42, .13);
    }

.od-stat-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.od-stat-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .95rem;
    color: #4f46e5;
    background: linear-gradient( 145deg, rgba(79, 70, 229, .13), rgba(124, 58, 237, .07) );
    font-size: 1.2rem;
}

.od-stat-badge {
    padding: .4rem .7rem;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.od-stat-content {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
}

.od-stat-label {
    display: block;
    margin-bottom: .55rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.od-stat-card strong {
    display: block;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 900;
    color: #111827;
}

.od-stat-card p {
    margin: .85rem 0 0;
    color: #64748b;
    font-size: .9rem;
    line-height: 1.55;
}

.od-stat-primary {
    color: white;
    border-color: transparent;
    background: radial-gradient( circle at 85% 10%, rgba(255,255,255,.16), transparent 14rem ), linear-gradient( 145deg, #4338ca, #6d28d9 65%, #312e81 );
    box-shadow: 0 22px 50px rgba(79, 70, 229, .22);
}

    .od-stat-primary::before {
        background: radial-gradient( circle, rgba(255, 255, 255, .13), transparent 70% );
    }

    .od-stat-primary .od-stat-icon {
        color: white;
        background: rgba(255,255,255,.15);
    }

    .od-stat-primary .od-stat-badge {
        color: #ede9fe;
        background: rgba(255,255,255,.12);
    }

    .od-stat-primary .od-stat-label,
    .od-stat-primary p {
        color: rgba(255,255,255,.72);
    }

    .od-stat-primary strong {
        color: white;
    }

    .od-stat-primary:hover {
        border-color: transparent;
        box-shadow: 0 30px 65px rgba(79, 70, 229, .30);
    }

@media (max-width: 1199.98px) {
    .od-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .od-stat-grid {
        grid-template-columns: 1fr;
    }

    .od-stat-card {
        min-height: 220px;
    }
}

.od-prep-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.35rem;
}

.od-prep-card {
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    border: 1px solid #e8edf7;
    box-shadow: 0 15px 35px rgba(15,23,42,.06);
    transition: .30s;
    position: relative;
    overflow: hidden;
}

    .od-prep-card::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 5px;
        background: linear-gradient(90deg,#4f46e5,#2563eb);
    }

    .od-prep-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 55px rgba(15,23,42,.12);
    }

.od-prep-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.od-prep-step {
    padding: .4rem .75rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.od-prep-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#4f46e5,#2563eb);
    color: white;
    font-size: 1.5rem;
}

.od-prep-card h3 {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.od-prep-card p {
    color: #64748b;
    line-height: 1.8;
    margin: 0;
}

@media(max-width:992px) {

    .od-prep-grid {
        grid-template-columns: 1fr;
    }
}

.od-skills {
    display: grid;
    grid-template-columns: minmax(260px,.72fr) minmax(0,1.45fr);
    gap: clamp(2rem, 6vw, 5rem);
    margin-top: clamp(4rem, 8vw, 6.5rem);
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 1.75rem;
    color: white;
    background: linear-gradient(135deg, #10172f 0%, #1d2250 60%, #312e81 100%);
    box-shadow: 0 30px 70px rgba(17,24,56,.20);
}

.od-skills-intro p {
    margin: 1rem 0 1.5rem;
    color: rgba(255,255,255,.64);
    line-height: 1.72;
}

.od-skills-note {
    display: flex;
    gap: .65rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: .9rem;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.05);
    font-size: .88rem;
    line-height: 1.5;
}

    .od-skills-note svg {
        width: 1.1rem;
        height: 1.1rem;
        flex: 0 0 auto;
        margin-top: .1rem;
        fill: none;
        stroke: #67e8f9;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.od-skills-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.od-skill-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 1rem 1.25rem;
    transition: .25s;
    backdrop-filter: blur(12px);
}

    .od-skill-card:hover {
        transform: translateX(6px);
        background: rgba(255,255,255,.10);
    }

.od-skill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .9rem;
}

.od-skill-title {
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.od-skill-score {
    margin-top: 4px;
    font-size: .78rem;
    color: rgba(255,255,255,.60);
}

.od-skill-percent {
    font-size: 1.1rem;
    font-weight: 800;
    color: #67e8f9;
}

.od-skill-track {
    height: 10px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}

.od-skill-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient( 90deg, #22d3ee, #60a5fa, #818cf8, #a855f7);
    box-shadow: 0 0 20px rgba(96,165,250,.45);
}

.od-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    border: 2px dashed rgba(255,255,255,.12);
    border-radius: 22px;
    color: white;
}

    .od-empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #60a5fa;
    }

    .od-empty-state h4 {
        margin-bottom: .75rem;
        font-weight: 800;
    }

    .od-empty-state p {
        color: rgba(255,255,255,.65);
        max-width: 420px;
        margin: 0;
    }
    .od-empty-state svg {
        width: 2rem;
        height: 2rem;
        fill: none;
        stroke: #a5b4fc;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.od-market-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1.25rem;
}

.od-market-card {
    overflow: hidden;
    border: 1px solid var(--od-line);
    border-radius: 1.45rem;
    background: #fff;
    box-shadow: var(--od-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .od-market-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--od-shadow-hover);
    }

.od-market-visual {
    position: relative;
    min-height: 245px;
    padding: 1.4rem;
    overflow: hidden;
}

.od-states-visual {
    background: linear-gradient(145deg, #eef2ff, #f5f3ff);
}

.od-metro-visual {
    background: linear-gradient(145deg, #ecfeff, #eef2ff);
}

.od-pro-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    padding: .45rem .65rem;
    border-radius: 999px;
    color: white;
    background: #111936;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.od-state-chart {
    position: absolute;
    inset: 3.9rem 2rem 3rem;
    display: flex;
    align-items: end;
    gap: clamp(.5rem, 2vw, 1rem);
}

    .od-state-chart span {
        flex: 1;
        min-width: 0;
        border-radius: .65rem .65rem .2rem .2rem;
        background: linear-gradient(180deg,#818cf8,#4f46e5);
        box-shadow: 0 12px 25px rgba(79,70,229,.15);
    }

        .od-state-chart span:nth-child(2n) {
            background: linear-gradient(180deg,#c084fc,#7c3aed);
        }

.od-chart-labels {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 1rem;
    display: flex;
    justify-content: space-around;
    color: #7b86a1;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.od-map-art {
    position: absolute;
    width: 90%;
    left: 5%;
    bottom: .4rem;
}

    .od-map-art path {
        fill: rgba(79,70,229,.08);
        stroke: rgba(79,70,229,.3);
        stroke-width: 2;
    }

    .od-map-art circle {
        fill: #4f46e5;
        stroke: rgba(255,255,255,.85);
        stroke-width: 4;
        filter: drop-shadow(0 5px 8px rgba(79,70,229,.24));
    }

.od-market-copy {
    position: relative;
    padding: 2rem;
}

.od-market-icon {
    position: absolute;
    right: 2rem;
    top: 2rem;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .85rem;
    color: var(--od-primary);
    background: rgba(79,70,229,.08);
}

    .od-market-icon svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.od-market-copy h3 {
    margin: 0 4rem .75rem 0;
    font-size: 1.65rem;
    letter-spacing: -.03em;
    font-weight: 850;
}

.od-market-copy p {
    margin: 0 0 1.5rem;
    color: var(--od-muted);
    line-height: 1.68;
}

.od-final-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    margin-top: clamp(4rem,8vw,6.5rem);
    padding: clamp(2rem,5vw,4rem);
    border-radius: 1.65rem;
    color: white;
    background: linear-gradient(125deg,#4f46e5,#6d28d9 65%,#312e81);
    box-shadow: 0 28px 65px rgba(79,70,229,.25);
}

    .od-final-cta::before, .od-final-cta::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
    }

    .od-final-cta::before {
        width: 16rem;
        height: 16rem;
        right: 13%;
        top: -12rem;
    }

    .od-final-cta::after {
        width: 10rem;
        height: 10rem;
        left: -4rem;
        bottom: -7rem;
    }

.od-final-copy {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

    .od-final-copy p {
        margin: 1rem 0 0;
        color: rgba(255,255,255,.7);
        font-size: 1.08rem;
        line-height: 1.65;
    }

.od-final-cta .od-button {
    position: relative;
    z-index: 1;
}

@media (max-width: 1199.98px) {
    .od-stat-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .od-hero {
        grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr);
    }
}

@media (max-width: 991.98px) {
    .od-shell {
        padding-top: 1.35rem;
    }

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

    .od-hero-pro {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .od-skills {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767.98px) {
    .od-section {
        margin-top: 4rem;
    }

    .od-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .8rem;
    }

    .od-prep-grid, .od-market-grid {
        grid-template-columns: 1fr;
    }

    .od-prep-card {
        min-height: 230px;
    }

    .od-hero-copy, .od-hero-pro, .od-skills, .od-final-cta {
        padding: 1.6rem;
    }

    .od-market-visual {
        min-height: 220px;
    }
}

@media (max-width: 575.98px) {
    .od-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .od-hero {
        border-radius: 1.25rem;
    }

        .od-hero h1 {
            font-size: 2.25rem;
        }

    .od-hero-tags {
        gap: .5rem;
    }

        .od-hero-tags span {
            width: 100%;
            justify-content: flex-start;
        }

    .od-stat-grid {
        grid-template-columns: 1fr;
    }

    .od-stat-card {
        min-height: 185px;
    }

    .od-skills {
        border-radius: 1.25rem;
    }

    .od-market-copy {
        padding: 1.5rem;
    }

    .od-market-icon {
        right: 1.5rem;
        top: 1.5rem;
    }

    .od-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .od-page *, .od-page *::before, .od-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
    .career-match-card {
        border: none;
        border-radius: 18px;
        transition: .25s;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }

        .career-match-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(0,0,0,.15);
        }
    .career-match-card {
        border: 0;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        transition: all .25s ease;
    }

        .career-match-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(0,0,0,.16);
        }
    /* ---------- Similar Careers ---------- */

    .career-match-card {
        background: #fff;
        border-radius: 20px;
        padding: 28px;
        height: 100%;
        border: 1px solid #e9eef7;
        box-shadow: 0 10px 30px rgba(18,38,63,.08);
        transition: .25s ease;
        display: flex;
        flex-direction: column;
    }

        .career-match-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 50px rgba(37,99,235,.18);
        }

    .career-match-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px;
    }

    .career-match-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .9rem;
        border-radius: 999px;
        background: linear-gradient(135deg,#2563eb,#3b82f6);
        color: #fff;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .03em;
        box-shadow: 0 8px 22px rgba(37,99,235,.25);
    }

    .career-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 24px;
        color: #0f172a;
        min-height: 64px;
    }

    .career-stat {
        margin-bottom: 22px;
    }

    .career-label {
        font-size: .78rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: 6px;
    }

    .career-salary {
        font-size: 1.45rem;
        font-weight: 800;
        color: #0f172a;
    }

    .career-growth {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: 6px 12px;
        border-radius: 999px;
        background: #ecfdf5;
        color: #16a34a;
        font-weight: 700;
    }

    .career-button {
        margin-top: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5rem;
        padding: 14px;
        border-radius: 12px;
        background: #2563eb;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        transition: .25s;
    }

    .career-difference {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        font-weight: 700;
    }

        .career-button:hover {
            background: #1d4ed8;
            color: #fff;
            text-decoration: none;
        }

        .career-button svg {
            transition: .25s;
        }

        .career-button:hover svg {
            transform: translateX(4px);
        }
    /* ---------- Similar Careers Header ---------- */

    .career-match-subtitle {
        max-width: 720px;
        color: #64748b;
        margin-top: .75rem;
        margin-bottom: 0;
        font-size: 1rem;
        line-height: 1.7;
    }

    .career-match-count {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 140px;
        background: #fff;
        border-radius: 18px;
        padding: 20px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 10px 30px rgba(15,23,42,.06);
    }

        .career-match-count span {
            font-size: 2rem;
            font-weight: 800;
            color: #2563eb;
            line-height: 1;
        }

    .career-match-count {
        font-size: .85rem;
        color: #64748b;
        font-weight: 600;
    }
    .career-match-card {
        position: relative;
        overflow: hidden;
    }

        .career-match-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg,#2563eb,#60a5fa);
        }
    .career-gold::before {
        background: linear-gradient(90deg,#fbbf24,#f59e0b);
    }

    .career-silver::before {
        background: linear-gradient(90deg,#cbd5e1,#94a3b8);
    }

    .career-bronze::before {
        background: linear-gradient(90deg,#b45309,#92400e);
    }
    .market-features {
        margin: 1.25rem 0;
        padding: 0;
        list-style: none;
    }

        .market-features li {
            padding: .45rem 0;
            color: #475569;
            font-weight: 500;
        }

            .market-features li::before {
                content: "✓";
                color: #2563eb;
                font-weight: 700;
                margin-right: .6rem;
            }
    .od-pro-badge {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        width: max-content;
        padding: .45rem .9rem;
        border-radius: 999px;
        background: rgba(251,191,36,.15);
        color: #fde68a;
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .08em;
        margin-bottom: 1.25rem;
    }

    .od-pro-benefits {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        margin: 2rem 0;
    }

    .od-benefit {
        display: flex;
        align-items: center;
        gap: .8rem;
        color: white;
        font-weight: 600;
    }

        .od-benefit i {
            color: #34d399;
            font-size: 1.1rem;
        }
    .career-top {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 2rem;
    }

    .career-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg,#2563eb,#4f46e5);
        color: white;
        font-size: 1.4rem;
        flex-shrink: 0;
    }

    .career-heading {
        flex: 1;
    }

    .career-match-text {
        margin-top: 6px;
        font-size: .78rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #64748b;
        font-weight: 700;
    }

    .career-metrics {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
        margin: 2rem 0;
    }

    .career-metric {
        padding: 1rem;
        background: #f8fafc;
        border-radius: 14px;
        text-align: center;
    }

        .career-metric span {
            display: block;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #64748b;
            margin-bottom: 6px;
            font-weight: 700;
        }

        .career-metric strong {
            font-size: 1.15rem;
            font-weight: 800;
            color: #0f172a;
        }

    @media(max-width:768px) {

        .career-metrics {
            grid-template-columns: 1fr;
        }
    }
    .od-market-banner {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: white;
    }

    .od-banner-blue {
        background: linear-gradient(135deg,#2563eb,#4f46e5);
    }

    .od-banner-purple {
        background: linear-gradient(135deg,#7c3aed,#4f46e5);
    }

    .od-market-kicker {
        display: inline-block;
        margin-bottom: .75rem;
        font-size: .70rem;
        letter-spacing: .10em;
        font-weight: 800;
        opacity: .85;
    }

    .od-market-banner h3 {
        margin: .25rem 0 .75rem;
        font-size: 2rem;
        font-weight: 800;
    }

    .od-market-banner p {
        margin: 0;
        color: rgba(255,255,255,.82);
        line-height: 1.7;
    }

    .od-market-circle {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        background: rgba(255,255,255,.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }

    .od-market-body {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .od-market-feature {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border-radius: 14px;
        background: #f8fafc;
        font-weight: 600;
        color: #334155;
    }

        .od-market-feature i {
            color: #2563eb;
            font-size: 1.2rem;
        }
    .od-skills {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
    .od-section-title-group {
        display: flex;
        flex-direction: column;
    }

    .od-section-divider {
        margin-top: 1rem;
        width: 72px;
        height: 4px;
        border-radius: 999px;
        background: linear-gradient( 90deg, #4f46e5, #60a5fa );
    }
    /* ==========================================================
   Premium Section Surface
   ========================================================== */

    .od-section-surface {
        position: relative;
        padding: 3rem;
        margin-top: 5rem;
        border: 1px solid rgba(148,163,184,.14);
        border-radius: 30px;
        background: rgba(255,255,255,.72);
        backdrop-filter: blur(22px);
        box-shadow: 0 20px 60px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.65);
    }

        .od-section-surface::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: radial-gradient(circle at top right, rgba(96,165,250,.07), transparent 35%);
        }

    @media (max-width:768px) {

        .od-section-surface {
            padding: 2rem 1.4rem;
            border-radius: 22px;
        }
        /* ==========================================================
   Premium Interactive Glow
   ========================================================== */

        .od-stat-card,
        .od-prep-card,
        .od-market-card,
        .career-match-card,
        .od-skill-card {
            position: relative;
            isolation: isolate;
        }

            .od-stat-card::after,
            .od-prep-card::after,
            .od-market-card::after,
            .career-match-card::after,
            .od-skill-card::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                pointer-events: none;
                opacity: 0;
                transition: opacity .30s ease;
                background: radial-gradient( circle at top right, rgba(96,165,250,.16), transparent 45% );
                z-index: -1;
            }

            .od-stat-card:hover::after,
            .od-prep-card:hover::after,
            .od-market-card:hover::after,
            .career-match-card:hover::after,
            .od-skill-card:hover::after {
                opacity: 1;
            }
    }
    /* ==========================================================
   Premium Section Separators
   ========================================================== */

    .od-section {
        position: relative;
    }

        .od-section:not(:first-of-type)::before {
            content: "";
            position: absolute;
            top: -2.6rem;
            left: 50%;
            transform: translateX(-50%);
            width: min(220px,30%);
            height: 1px;
            background: linear-gradient( 90deg, transparent, rgba(79,70,229,.18), rgba(96,165,250,.35), rgba(79,70,229,.18), transparent );
        }

        .od-section:not(:first-of-type)::after {
            content: "";
            position: absolute;
            top: -2.82rem;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4f46e5;
            box-shadow: 0 0 0 6px rgba(79,70,229,.08), 0 0 18px rgba(79,70,229,.18);
        }
    /* ==========================================================
   Executive Summary Ribbon
   ========================================================== */

    .od-report-summary {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 1rem;
        margin: 2rem 0 4rem;
    }

    .od-summary-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem;
        border-radius: 18px;
        background: white;
        border: 1px solid rgba(148,163,184,.15);
        box-shadow: 0 12px 32px rgba(15,23,42,.05);
    }

        .od-summary-item i {
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: linear-gradient(135deg,#4f46e5,#2563eb);
            color: white;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .od-summary-item span {
            display: block;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #64748b;
            font-weight: 700;
        }

        .od-summary-item strong {
            display: block;
            margin-top: .2rem;
            font-size: 1.1rem;
            color: #0f172a;
            font-weight: 800;
        }

    @media (max-width:992px) {

        .od-report-summary {
            grid-template-columns: repeat(2,1fr);
        }
    }

    @media (max-width:576px) {

        .od-report-summary {
            grid-template-columns: 1fr;
        }
    }
    /* ==========================================================
   Metric Status Badges
   ========================================================== */

    .od-trend-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .38rem .7rem;
        border-radius: 999px;
        background: #eef4ff;
        color: #2563eb;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
    }

    .od-trend-up {
        background: #ecfdf5;
        color: #16a34a;
    }

    .od-trend-badge i {
        font-size: .75rem;
    }
    /* ==========================================================
   Career Intelligence Footer
   ========================================================== */

    .od-report-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        margin: 5rem 0 3rem;
        padding: 1.5rem 2rem;
        border-top: 1px solid rgba(148,163,184,.18);
    }

    .od-report-brand {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

        .od-report-brand i {
            font-size: 2rem;
            color: #4f46e5;
        }

        .od-report-brand strong {
            display: block;
            margin-bottom: .4rem;
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
        }

        .od-report-brand span {
            color: #64748b;
            line-height: 1.6;
            max-width: 620px;
        }

    .od-report-meta {
        display: flex;
        gap: 2rem;
        text-align: right;
    }

        .od-report-meta label {
            display: block;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #94a3b8;
            margin-bottom: .35rem;
            font-weight: 700;
        }

        .od-report-meta strong {
            color: #0f172a;
            font-weight: 800;
        }

    @media(max-width:768px) {

        .od-report-footer {
            flex-direction: column;
            align-items: flex-start;
        }

        .od-report-meta {
            width: 100%;
            justify-content: space-between;
            text-align: left;
        }
    }


/* Hero Action Buttons */

.od-hero-actions {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
    flex-wrap: wrap;
}

    .od-hero-actions .od-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
    }

@media (max-width:768px) {
    .od-hero-actions {
        flex-direction: column;
    }

        .od-hero-actions .od-button {
            width: 100%;
        }
}
    /*==================================================
COMPARE TRAY
==================================================*/

    .compare-tray {
        position: fixed;
        left: 50%;
        bottom: 24px;
        transform: translateX(-50%);
        width: min(900px,calc(100% - 2rem));
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        background: #0f172a;
        color: white;
        padding: 18px 24px;
        border-radius: 18px;
        box-shadow: 0 25px 60px rgba(0,0,0,.35);
        z-index: 9999;
    }

    .compare-tray-left {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    .compare-count {
        font-weight: 700;
        font-size: .95rem;
    }

    .compare-list {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .compare-pill {
        background: #1e40af;
        border-radius: 999px;
        padding: .45rem .85rem;
        font-size: .85rem;
        font-weight: 600;
    }

    /* ============================================================
   CAREERGPS SEO / CAREER INSIGHTS
   ============================================================ */

    .od-seo-section {
        margin-top: 48px;
        padding: 48px;
        background: #ffffff;
        border: 1px solid rgba(36, 45, 92, 0.10);
        border-radius: 28px;
        box-shadow: 0 18px 50px rgba(31, 38, 89, 0.08);
    }

    .od-seo-header {
        max-width: 820px;
        margin-bottom: 38px;
    }

        .od-seo-header .od-section-eyebrow {
            display: inline-block;
            margin-bottom: 12px;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #6046e8;
        }

        .od-seo-header h2 {
            margin: 0 0 14px;
            font-size: clamp(2rem, 3vw, 2.75rem);
            line-height: 1.08;
            font-weight: 800;
            color: #151b3b;
        }

    .od-seo-intro {
        margin: 0;
        max-width: 760px;
        font-size: 1.05rem;
        line-height: 1.75;
        color: #626a86;
    }

    .od-seo-content {
        padding: 28px 0;
        border-top: 1px solid rgba(36, 45, 92, 0.10);
    }

        .od-seo-content:last-child {
            padding-bottom: 0;
        }

        .od-seo-content h3 {
            position: relative;
            margin: 0 0 14px;
            padding-left: 16px;
            font-size: 1.3rem;
            line-height: 1.35;
            font-weight: 750;
            color: #20274d;
        }

            .od-seo-content h3::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0.15em;
                width: 4px;
                height: 1.15em;
                border-radius: 999px;
                background: linear-gradient( 180deg, var(--od-primary), var(--od-primary-2) );
            }

        .od-seo-content p {
            margin: 0;
            max-width: 940px;
            font-size: 1rem;
            line-height: 1.8;
            color: #525b78;
        }


    /* ============================================================
   CAREER INSIGHTS - MOBILE
   ============================================================ */

    @media (max-width: 768px) {

        .od-seo-section {
            margin-top: 32px;
            padding: 28px 22px;
            border-radius: 22px;
        }

        .od-seo-header {
            margin-bottom: 26px;
        }

            .od-seo-header h2 {
                font-size: 1.8rem;
            }

        .od-seo-content {
            padding: 22px 0;
        }

            .od-seo-content h3 {
                font-size: 1.15rem;
            }

            .od-seo-content p,
            .od-seo-intro {
                font-size: 0.96rem;
                line-height: 1.7;
            }
    }
}


.od-context-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
    margin-bottom: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.od-context-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: 3px;
}

.od-context-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.od-context-model {
    margin-top: 3px;
    font-size: 14px;
    color: #64748b;
}

.od-context-back {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 700px) {
    .od-context-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

.od-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.od-context-main {
    flex: 1;
}

.od-context-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.od-context-stat {
    min-width: 105px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

    .od-context-stat span {
        display: block;
        margin-bottom: 3px;
        font-size: 0.67rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }

    .od-context-stat strong {
        display: block;
        font-size: 0.95rem;
        font-weight: 800;
        color: #0f172a;
    }

@media (max-width: 900px) {
    .od-context-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .od-context-stats {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .od-context-stat {
        min-width: 0;
    }
}