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

    :root {
        --maroon: #6B1E35;
        --maroon-dk: #4a1224;
        --yellow: #FFD60A;
        --cyan: #00C9B7;
        --orange: #FF7B35;
        --purple: #7B2FBE;
        --blue: #3A86FF;
        --green: #2DC653;
        --bg: #F5F6FF;
        --text: #1a1a2e;
        --muted: #667;
        --white: #fff;
        --darkblue: #0d1b4a;
    }

    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        font-size: 100%;
        color: var(--text);
        background: var(--bg);
        line-height: 1.6;
    }

    a {
        color: var(--maroon);
    }

    nav {
        background: var(--maroon);
        padding: .6rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 3px 16px rgba(0, 0, 0, .3);
    }

    .nav-l {
        display: flex;
        align-items: center;
        gap: .9rem;
    }

    .nav-logo {
        height: 32px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    .nav-title {
        color: white;
        font-size: 1.3rem;
        font-weight: 900;
        letter-spacing: .01em;
    }

    .nav-title em {
        color: var(--yellow);
        font-style: normal;
    }

    .nav-links {
        display: flex;
        gap: 1.4rem;
    }

    .nav-links a {
        color: rgba(255, 255, 255, .85);
        font-size: .88rem;
        font-weight: 700;
        text-decoration: none;
        transition: color .2s;
    }

    .nav-links a:hover {
        color: var(--yellow);
    }

    /* ── HERO ── */
    .hero {
        background: #0d1b4a;
        padding: 4rem 2rem 5.5rem;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .hero-small {
        background: #0d1b4a;
        padding: 0.5rem 0rem 0.5rem;
        position: relative;
        overflow: hidden;
        text-align: center;
    }


    .floats {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .f {
        position: absolute;
        color: rgba(255, 255, 255, .16);
        font-family: monospace;
        font-size: 1.3rem;
        animation: bob 5s ease-in-out infinite;
    }

    .f:nth-child(1) {
        top: 8%;
        left: 5%
    }

    .f:nth-child(2) {
        top: 15%;
        left: 18%;
        color: rgba(255, 214, 10, .07);
        animation-delay: 1s
    }

    .f:nth-child(3) {
        top: 5%;
        left: 33%;
        animation-delay: 2s
    }

    .f:nth-child(4) {
        top: 20%;
        left: 50%;
        animation-delay: .5s
    }

    .f:nth-child(5) {
        top: 10%;
        left: 65%;
        color: rgba(0, 201, 183, .07);
        animation-delay: 1.5s
    }

    .f:nth-child(6) {
        top: 25%;
        left: 80%;
        animation-delay: 3s
    }

    .f:nth-child(7) {
        top: 60%;
        left: 3%;
        animation-delay: 2.5s
    }

    .f:nth-child(8) {
        top: 55%;
        left: 90%;
        animation-delay: 1s;
        color: rgba(255, 123, 53, .07)
    }

    .f:nth-child(9) {
        top: 75%;
        left: 15%;
        animation-delay: .8s
    }

    .f:nth-child(10) {
        top: 70%;
        left: 70%;
        animation-delay: 2s
    }

    .f:nth-child(11) {
        top: 40%;
        left: 8%;
        animation-delay: 1.8s
    }

    .f:nth-child(12) {
        top: 45%;
        left: 92%;
        animation-delay: .3s
    }

    @keyframes bob {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-10px)
        }
    }

    .hero-inner {
        position: relative;
        z-index: 2;
        max-width: 900px;
        margin: 0 auto;
    }

    .hero-logo {
        width: 196px;
        height: 196px;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 1.4rem;
        font-weight: 700;
        color: white;
        line-height: 1.25;
        margin-top: 6px;
    }

    .hero h1 mark {
        color: var(--yellow);
        background: none;
    }

    .hero-btns {
        display: flex;
        gap: .9rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 25px;
    }

    .btn-y {
        background: var(--yellow);
        color: var(--maroon-dk);
        font-weight: 900;
        padding: .8rem 2rem;
        border-radius: 50px;
        font-size: 1rem;
        text-decoration: none;
        box-shadow: 0 4px 18px rgba(255, 214, 10, .4);
        transition: transform .15s, box-shadow .15s;
    }

    .btn-y:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 26px rgba(255, 214, 10, .55);
    }

    .btn-ghost {
        background: rgba(255, 255, 255, .1);
        color: white;
        font-weight: 700;
        padding: .8rem 2rem;
        border-radius: 50px;
        font-size: 1rem;
        text-decoration: none;
        border: 2px solid rgba(255, 255, 255, .35);
        transition: background .2s;
    }

    .btn-ghost:hover {
        background: rgba(255, 255, 255, .2);
    }

    /* ── WAVE ── */
    .wave {
        line-height: 0;
        margin-top: -1px;
    }

    .wave svg {
        display: block;
        width: 100%;
    }

    /* ── STATS ── */
    .stats {
        background: white;
        display: flex;
        justify-content: center;
        gap: 2.5rem;
        flex-wrap: wrap;
        padding: 1.1rem 2rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
        border-bottom: 3px solid var(--bg);
    }

    .stat {
        text-align: center;
    }

    .stat-n {
        font-size: 1.6rem;
        font-weight: 900;
        color: var(--maroon);
        display: block;
    }

    .stat-l {
        font-size: .75rem;
        color: var(--muted);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    /* ── SECTIONS ── */
    .sec {
        padding: 3.2rem 2rem;
    }

    .sec-in {
        max-width: 880px;
        margin: 0 auto;
    }

    h2.stitle {
        font-size: 1.7rem;
        font-weight: 900;
        display: inline-block;
        margin-bottom: 1.3rem;
        position: relative;
    }

    h2.stitle::after {
        content: '';
        display: block;
        height: 4px;
        border-radius: 2px;
        margin-top: 5px;
        background: linear-gradient(90deg, var(--yellow), var(--orange));
    }

    /* ── MENTOR BANNER ── */
    .mentor-banner {
        background: linear-gradient(90deg, var(--purple), var(--blue));
        color: white;
        padding: .85rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        flex-wrap: wrap;
        text-align: center;
        font-size: .95rem;
        font-weight: 600;
    }

    .mentor-btn {
        background: white;
        color: var(--purple);
        font-weight: 800;
        font-size: .88rem;
        padding: .45rem 1.2rem;
        border-radius: 50px;
        text-decoration: none;
        white-space: nowrap;
        transition: background .2s, transform .15s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    }

    .mentor-btn:hover {
        background: var(--yellow);
        color: var(--maroon-dk);
        transform: translateY(-1px);
        text-decoration: none;
    }

    /* ── ABOUT ── */
    .about {
        background: white;
    }

    .about-lead {
        color: var(--muted);
        margin-bottom: 1.5rem;
        max-width: 880px;
    }

    .about-lead a {
        color: var(--maroon);
        font-weight: 700;
    }

    .a-grid {
        display: grid;
        /*grid-template-columns: 1fr 1fr 1fr;*/
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.1rem;
    }

    .a-card {
        border-radius: 14px;
        padding: 1.3rem 1.3rem 1.2rem;
        border-left: 5px solid transparent;
    }

    .a-card:nth-child(1) {
        background: #fff5f7;
        border-color: var(--maroon)
    }

    .a-card:nth-child(2) {
        background: #fffbea;
        border-color: var(--yellow)
    }

    .a-card:nth-child(3) {
        background: #e8fff9;
        border-color: var(--cyan)
    }

    .a-icon {
        font-size: 1.7rem;
        margin-bottom: .5rem;
    }

    .a-card h3 {
        font-size: .96rem;
        font-weight: 800;
        margin-bottom: .5rem;
    }

    .a-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .a-card ul li {
        font-size: .96rem;
        color: var(--muted);
        padding: .2rem 0;
        display: flex;
        gap: .5rem;
    }

    .a-card ul li::before {
        content: "→";
        color: var(--maroon);
        font-weight: 700;
        flex-shrink: 0;
    }

    /* ── TOPICS ── */
    .topics {
        background: var(--bg);
    }

    .t-sub {
        color: var(--muted);
        margin-bottom: 1.3rem;
    }

    .t-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
        gap: 1rem;
    }

    .t-card {
        border-radius: 18px;
        padding: 1.6rem 1rem 1.2rem;
        text-align: center;
        color: white;
        position: relative;
        overflow: hidden;
        transition: transform .2s, box-shadow .2s;
        cursor: default;
    }

    .t-card::before {
        content: '';
        position: absolute;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .1);
        top: -20px;
        right: -20px;
    }

    .t-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    }

    .tc1 {
        background: linear-gradient(135deg, #00C9B7, #007060)
    }

    .tc2 {
        background: linear-gradient(135deg, #FF9800, #e53935)
    }

    .tc3 {
        background: linear-gradient(135deg, #3A86FF, #0043c8)
    }

    .tc4 {
        background: linear-gradient(135deg, #2DC653, #1a7a35)
    }

    .tc5 {
        background: linear-gradient(135deg, #9C27B0, #5c0080)
    }

    .t-icon {
        height: 64px;
        margin: 0 auto 10px;
        display: block;
    }

    .t-card h3 {
        font-size: 1rem;
        font-weight: 800;
        margin-bottom: .25rem;
    }

    .t-card p {
        font-size: .78rem;
        opacity: .88;
    }

    .t-badge {
        display: inline-block;
        background: rgba(255, 255, 255, .25);
        border-radius: 20px;
        padding: .15rem .6rem;
        font-size: .7rem;
        font-weight: 700;
        margin-top: .5rem;
    }

    /* ── CALENDAR ── */
    .cal-box {
        margin-top: 1.4rem;
        border: 2px solid #ebebeb;
        border-radius: 16px;
        overflow: hidden;
    }

    .cal-head {
        background: linear-gradient(90deg, var(--maroon), var(--purple));
        color: white;
        padding: .8rem 1.2rem;
        display: flex;
        align-items: center;
        gap: .6rem;
        font-weight: 800;
        font-size: .95rem;
    }

    .cal-dates {
        display: flex;
        flex-wrap: wrap;
        gap: .7rem;
        padding: 1.1rem 1.2rem;
        background: white;
    }

    .cal-date {
        background: var(--bg);
        border-radius: 10px;
        padding: .55rem .9rem;
        text-align: center;
        min-width: 80px;
        border: 1.5px solid #e0e0e0;
    }

    .cal-date.next {
        border-color: var(--maroon);
        background: #fff5f7;
    }

    .cal-date .cd-day {
        font-size: .72rem;
        color: var(--muted);
        font-weight: 700;
        text-transform: uppercase;
    }

    .cal-date .cd-num {
        font-size: 1.3rem;
        font-weight: 900;
        color: var(--text);
        line-height: 1.1;
    }

    .cal-date.next .cd-num {
        color: var(--maroon);
    }

    .cal-date .cd-mon {
        font-size: .75rem;
        color: var(--muted);
        font-weight: 600;
    }

    .cal-next-label {
        font-size: .68rem;
        color: var(--maroon);
        font-weight: 800;
        text-transform: uppercase;
        margin-top: .15rem;
    }


    .when {
        background: white;
    }

    .w-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem;
    }

    .w-card {
        border-radius: 16px;
        border: 2px solid #ebebeb;
        padding: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .w-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
    }

    .w-card:first-child::before {
        background: linear-gradient(90deg, var(--maroon), var(--purple));
    }

    .w-card:last-child::before {
        background: linear-gradient(90deg, var(--cyan), var(--blue));
    }

    .w-card h3 {
        font-size: 1rem;
        font-weight: 800;
        margin: .3rem 0 .9rem;
    }

    .w-row {
        display: flex;
        gap: .75rem;
        align-items: flex-start;
        margin-bottom: .65rem;
        font-size: .91rem;
    }

    .w-row .wi {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* ── CONTACT ── */
    .contact {
        background: var(--bg);
    }

    .contact2 {
        background: white;
    }

    .c-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }

    .c-lead {
        color: var(--muted);
        margin-bottom: 1.3rem;
        font-size: .97rem;
    }

    .email-btn {
        display: inline-flex;
        align-items: center;
        gap: .8rem;
        background: var(--maroon);
        color: white;
        border-radius: 12px;
        padding: 1rem 1.4rem;
        font-size: .95rem;
        font-weight: 700;
        text-decoration: none;
        transition: background .2s, transform .15s;
        box-shadow: 0 4px 16px rgba(107, 30, 53, .3);
    }

    .email-btn:hover {
        background: var(--maroon-dk);
        transform: translateY(-2px);
        text-decoration: none;
        color: white;
    }

    .xlinks {
        margin-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
    }

    .xl {
        border: 2px solid var(--maroon);
        color: var(--maroon);
        border-radius: 8px;
        padding: .38rem .85rem;
        font-size: .83rem;
        font-weight: 700;
        text-decoration: none;
        transition: all .2s;
    }

    .xl:hover {
        background: var(--maroon);
        color: white;
        text-decoration: none;
    }

    .c-visual {
        background: #0D1B4A;
        border-radius: 22px;
        padding: 2rem 1.5rem;
        text-align: center;
        color: white;
    }

    .c-logo {
        width: 136px;
        height: 136px;
        margin: 0 auto 1rem;
        /*filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5));*/
    }

    .c-visual p {
        font-size: .9rem;
        opacity: .85;
        margin: .6rem 0 .8rem;
    }

    .cv-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        justify-content: center;
    }

    .cv-tag {
        background: rgba(255, 255, 255, .15);
        color: white;
        border-radius: 20px;
        padding: .25rem .8rem;
        font-size: .8rem;
        font-weight: 700;
    }

    .cv-tag.yt {
        background: var(--yellow);
        color: var(--maroon-dk);
    }

    /* ── FOOTER ── */
    footer {
        background: var(--maroon-dk);
        color: rgba(255, 255, 255, .65);
        text-align: center;
        padding: 1.4rem 2rem;
        font-size: .8rem;
    }

    footer a {
        color: var(--yellow);
    }

    footer a:hover {
        color: white;
    }

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

        .a-grid,
        .w-grid,
        .c-grid {
            grid-template-columns: 1fr
        }

        .stats {
            gap: 1.4rem
        }
    }

    .countdown-banner {
        background: linear-gradient(90deg, var(--blue), var(--purple));
        color: white;
        padding: .85rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        font-size: .95rem;
        font-weight: 600;
    }

    .countdown-timer {
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    .countdown-unit {
        background: rgba(255, 255, 255, .1);
        border-radius: 8px;
        padding: .3rem .7rem;
        text-align: center;
        min-width: 52px;
    }

    .countdown-unit span {
        display: block;
        font-size: 1.1rem;
        font-weight: 900;
        color: var(--yellow);
        line-height: 1.1;
    }

    .countdown-unit small {
        font-size: .65rem;
        opacity: .75;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .countdown-sep {
        font-size: 1.1rem;
        font-weight: 900;
        color: var(--yellow);
        margin-bottom: .8rem;
    }

    /*PAGE TITLE*/
    .page-title {
        background: #0d1b4a;
        padding: 1rem 2rem 1rem;
        /*        position: relative;
        overflow: hidden;*/
        display: flex;
        text-align: left;
        align-items: center;
        gap: .9rem;
    }

    /*MENTOREN*/
    .mentoren {
        background: white;
    }

    /*ONBOARDING*/
    .onboarding {
        background: var(--bg);
    }