:root {
    --sn-bg: #f6f7fb;
    --sn-ink: #111827;
    --sn-muted: #6b7280;
    --sn-primary: #635bff;
    --sn-primary-2: #00d4ff;
    --sn-pink: #ff5c8a;
    --sn-card: #ffffff;
    --sn-border: rgba(17,24,39,.08);
    --sn-shadow: 0 24px 70px rgba(17,24,39,.10);
    --sn-radius: 26px;
}

* {
    letter-spacing: -.01em
}

html {
    scroll-behavior: smooth
}

body {
    min-height: 100vh;
    background: radial-gradient(circle at top right, rgba(99,91,255,.18), transparent 34rem), radial-gradient(circle at 15% 20%, rgba(0,212,255,.14), transparent 28rem), linear-gradient(180deg,#fbfcff 0%,var(--sn-bg) 100%);
    color: var(--sn-ink);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

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

.text-muted {
    color: var(--sn-muted) !important
}

.sn-shell {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.sn-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--sn-border);
}

.sn-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 900;
    color: var(--sn-ink) !important;
}

.sn-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg,var(--sn-primary-2),var(--sn-primary) 55%,var(--sn-pink));
    box-shadow: 0 16px 34px rgba(99,91,255,.28);
}

.sn-brand-text {
    font-size: 1.15rem;
    line-height: 1
}

.navbar .nav-link {
    font-weight: 700;
    color: #4b5563;
    border-radius: 999px;
    padding: .55rem .9rem !important;
}

    .navbar .nav-link:hover {
        background: rgba(99,91,255,.08);
        color: var(--sn-primary)
    }

.btn {
    border-radius: 999px;
    font-weight: 800;
    padding: .72rem 1.15rem;
    border-width: 1px;
}

.btn-dark, .btn-sn {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(135deg,#111827,var(--sn-primary));
    box-shadow: 0 15px 28px rgba(99,91,255,.22);
}

    .btn-dark:hover, .btn-sn:hover {
        transform: translateY(-1px);
        filter: brightness(1.06)
    }

.btn-outline-dark, .btn-outline-sn {
    border-color: rgba(17,24,39,.14);
    background: rgba(255,255,255,.72);
    color: var(--sn-ink)
}

    .btn-outline-dark:hover, .btn-outline-sn:hover {
        background: #111827;
        color: #fff
    }

.btn-light {
    box-shadow: 0 14px 30px rgba(255,255,255,.24)
}

.card, .sn-card {
    border: 1px solid var(--sn-border) !important;
    border-radius: var(--sn-radius) !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}

.card-body {
    position: relative;
    z-index: 1
}

.form-control, .form-select {
    border-radius: 18px;
    border: 1px solid rgba(17,24,39,.12);
    padding: .85rem 1rem;
    background: rgba(255,255,255,.86);
}

    .form-control:focus, .form-select:focus {
        box-shadow: 0 0 0 .25rem rgba(99,91,255,.14);
        border-color: rgba(99,91,255,.55)
    }

.form-label {
    font-weight: 800;
    color: #374151
}

.sn-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 34px;
    padding: 4.5rem 2rem;
    background: radial-gradient(circle at 82% 18%, rgba(0,212,255,.42), transparent 18rem), radial-gradient(circle at 20% 20%, rgba(255,92,138,.28), transparent 18rem), linear-gradient(135deg,#0b1020 0%,#1f1b4e 50%,#5b21b6 100%);
    color: white;
    box-shadow: 0 28px 90px rgba(31,27,78,.32);
}

    .sn-hero:before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        opacity: .55;
        background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(to bottom,black,transparent 85%);
    }

.sn-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    font-weight: 800;
    margin-bottom: 1rem;
}

.sn-hero h1 {
    font-size: clamp(2.4rem,5vw,5rem);
    line-height: 1.05;
    font-weight: 950;
    margin-bottom: 1rem;
}

.sn-hero p {
    max-width: 720px;
    color: rgba(255,255,255,.78);
    font-size: 1.15rem;
}

.sn-gradient-text {
    background: linear-gradient(135deg,#fff,#a5f3fc,#ffd1dc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sn-hero-visual {
    min-height: 330px;
    position: relative;
    border-radius: 32px;
    background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.sn-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(.2px)
}

    .sn-orb.one {
        width: 125px;
        height: 125px;
        right: 12%;
        top: 12%;
        background: linear-gradient(135deg,#00d4ff,#635bff)
    }

    .sn-orb.two {
        width: 86px;
        height: 86px;
        left: 15%;
        bottom: 14%;
        background: linear-gradient(135deg,#ff5c8a,#ffd166)
    }

.sn-float-card {
    position: absolute;
    background: rgba(255,255,255,.9);
    color: #111827;
    border-radius: 22px;
    padding: 1rem;
    box-shadow: 0 24px 50px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.6);
}

    .sn-float-card.top {
        top: 17%;
        left: 8%;
        width: 190px
    }

    .sn-float-card.bottom {
        bottom: 13%;
        right: 10%;
        width: 230px
    }

.sn-progress {
    height: 10px;
    background: #eef2ff;
    border-radius: 999px;
    overflow: hidden
}

    .sn-progress span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#00d4ff,#635bff,#ff5c8a);
        border-radius: 999px
    }

.sn-section-title {
    font-weight: 950;
    font-size: clamp(1.7rem,3vw,2.5rem)
}

.sn-kpi {
    padding: 1.3rem;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--sn-border);
    box-shadow: 0 18px 42px rgba(17,24,39,.07)
}

    .sn-kpi .num {
        font-weight: 950;
        font-size: 2rem;
        color: var(--sn-primary)
    }

.sn-course-card {
    transition: .22s ease;
    min-height: 100%
}

    .sn-course-card:hover {
        transform: translateY(-6px)
    }

.sn-course-thumb {
    height: 150px;
    background: linear-gradient(135deg,rgba(0,212,255,.24),rgba(99,91,255,.24),rgba(255,92,138,.20));
    position: relative;
}

    .sn-course-thumb:after {
        content: "▶";
        position: absolute;
        inset: auto 1.2rem 1.1rem auto;
        width: 48px;
        height: 48px;
        border-radius: 18px;
        background: white;
        display: grid;
        place-items: center;
        color: var(--sn-primary);
        box-shadow: 0 15px 35px rgba(0,0,0,.12)
    }

.sn-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(99,91,255,.10);
    color: var(--sn-primary);
    font-weight: 900;
    font-size: .82rem
}

.sn-auth-wrap {
    min-height: calc(100vh - 190px);
    display: grid;
    align-items: center;
    padding-block: 2rem;
}

.sn-auth-card {
    max-width: 560px;
    margin-inline: auto;
}

.sn-auth-side {
    border-radius: 32px;
    min-height: 100%;
    padding: 2rem;
    color: white;
    background: linear-gradient(135deg,#111827,#312e81 55%,#7c3aed);
    position: relative;
    overflow: hidden;
}

    .sn-auth-side:after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 999px;
        background: rgba(0,212,255,.26);
        left: -80px;
        bottom: -90px;
        filter: blur(4px)
    }

.sn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 1px solid rgba(17,24,39,.12);
    background: white;
    border-radius: 18px;
    padding: .8rem 1rem;
    font-weight: 900;
    width: 100%;
    color: #111827
}

    .sn-social:disabled {
        opacity: .75;
        background: #f9fafb;
        color: #4b5563
    }

.sn-apple {
    background: #111827 !important;
    color: white !important
}

.sn-google-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0)
}

.sn-dashboard-hero {
    border-radius: 32px;
    padding: 2rem;
    background: linear-gradient(135deg,#111827,#312e81);
    color: white;
    box-shadow: 0 24px 70px rgba(49,46,129,.26)
}

    .sn-dashboard-hero p {
        color: rgba(255,255,255,.72);
        margin: 0
    }

.sn-stat {
    position: relative;
    overflow: hidden
}

    .sn-stat:before {
        content: "";
        position: absolute;
        inset: auto -35px -55px auto;
        width: 120px;
        height: 120px;
        border-radius: 999px;
        background: rgba(99,91,255,.12)
    }

    .sn-stat h3 {
        font-weight: 950;
        margin: 0
    }

    .sn-stat .label {
        font-weight: 800;
        color: var(--sn-muted)
    }

.sn-footer {
    border-top: 1px solid var(--sn-border);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px)
}

    .sn-footer a {
        color: #4b5563;
        font-weight: 700
    }

        .sn-footer a:hover {
            color: var(--sn-primary)
        }

@media (max-width: 991.98px) {
    .sn-hero {
        padding: 3rem 1.25rem
    }

    .sn-hero-visual {
        min-height: 260px
    }

    .sn-float-card.top {
        left: 6%;
        width: 170px
    }

    .sn-float-card.bottom {
        right: 5%;
        width: 205px
    }
}
/* ================================
   Public Course Landing / Checkout
   ================================ */

.landing-hero {
    background: linear-gradient(135deg, #111827, #1f2937);
    color: #fff;
    border-radius: 32px;
    padding: 44px;
}

.soft-card {
    border: 1px solid #eef0f3;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}

.buy-card {
    position: sticky;
    top: 20px;
}

.course-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    margin: 3px;
}

.hero-pill {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
}

.lesson-item {
    border-bottom: 1px solid #eef0f3;
    padding: 14px 0;
}

    .lesson-item:last-child {
        border-bottom: 0;
    }

.main-cta {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 18px;
    padding: 15px 20px;
    font-weight: 800;
    text-decoration: none;
    background: #111827;
    color: #fff;
}

    .main-cta:hover {
        background: #000;
        color: #fff;
    }

.preview-badge {
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.locked-badge {
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.benefit-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    color: #4b5563;
}

/* Public checkout / start page */

.start-card {
    border: 1px solid #eef0f3;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #4b5563;
}

    .summary-row strong {
        color: #111827;
    }

.pay-button {
    border-radius: 18px;
    padding: 14px 20px;
    font-weight: 800;
}

.course-cover-lg {
    max-height: 320px;
    object-fit: cover;
}

.course-cover-sm {
    max-height: 220px;
    object-fit: cover;
}

.instructor-avatar {
    width: 76px;
    height: 76px;
    object-fit: cover;
}

.video-fit {
    width: 100%;
    height: 100%;
}

/* Mobile fixes for public course landing page */
.public-course-page {
    padding-bottom: 40px;
}

@media (max-width: 991.98px) {
    .public-course-page {
        padding-bottom: calc(140px + env(safe-area-inset-bottom));
    }

    .buy-card {
        position: static !important;
        top: auto !important;
        margin-bottom: 80px;
    }

    .landing-hero {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .soft-card {
        border-radius: 22px;
    }

    .course-pill {
        font-size: 12px;
        padding: 6px 11px;
    }

    .main-cta {
        padding: 14px 18px;
    }
}