@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
    --vsk-navy: #0D2137;
    --vsk-navy2: #0F2D4F;
    --vsk-navy3: #163A62;
    --vsk-saffron: #FF8C00;
    --vsk-green: #138808;
    --vsk-blue: #0078D4;
    --vsk-surface: #F6F8FA;
    --vsk-border: #E4E8F0;
    --vsk-text: #1A1F36;
    --vsk-sub: #606880;
    --vsk-r: 12px;
    --vsk-r-lg: 20px;
    --vsk-shadow: 0 4px 24px rgba(13,33,55,.10);
    --vsk-shadow-lg: 0 12px 48px rgba(13,33,55,.15);
    --vsk-t: 220ms cubic-bezier(.4,0,.2,1);
}

html, body {
    font-family: 'Sora', 'Segoe UI', system-ui, sans-serif;
}

/* MudAppBar with Fixed=false still injects body padding in some versions — reset it */
body {
    padding-top: 0 !important;
}

/* ── Navbar ─────────────────────────────────────────────────────── */
.vsk-nav {
    background: transparent !important;
    transition: background var(--vsk-t), box-shadow var(--vsk-t);
}

.vsk-nav--scrolled {
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--vsk-border), var(--vsk-shadow) !important;
}

.vsk-nav .mud-appbar-inner {
    height: 68px;
}

.vsk-navlink {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.8) !important;
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 6px 14px !important;
    transition: color var(--vsk-t), background var(--vsk-t) !important;
}

    .vsk-navlink:hover {
        color: white !important;
        background: rgba(255,255,255,.12) !important;
    }

.vsk-navlink--active {
    color: var(--vsk-saffron) !important;
    font-weight: 600 !important;
}

.vsk-nav--scrolled .vsk-navlink {
    color: var(--vsk-sub) !important;
}

    .vsk-nav--scrolled .vsk-navlink:hover {
        color: var(--vsk-navy) !important;
        background: rgba(13,33,55,.05) !important;
    }

.vsk-nav--scrolled .vsk-navlink--active {
    color: var(--vsk-blue) !important;
}

.vsk-login-btn {
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: 50px !important;
    letter-spacing: 0 !important;
    padding: 8px 22px !important;
}

.vsk-mobile-drawer .mud-drawer-content {
    background: var(--vsk-navy) !important;
}

.vsk-mobile-drawer .mud-nav-link {
    color: rgba(255,255,255,.75) !important;
}

    .vsk-mobile-drawer .mud-nav-link:hover {
        color: white !important;
        background: rgba(255,255,255,.08) !important;
    }

/* ── Mobile dropdown (replaces MudDrawer) ────────────────────────── */
.vsk-mobile-menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 1299;
    background: var(--vsk-navy);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 280ms cubic-bezier(.4,0,.2,1), opacity 280ms cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

.vsk-mobile-menu--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.vsk-mobile-menu-inner {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 20px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
}

.vsk-mobile-link {
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    font-family: 'Sora', 'Segoe UI', sans-serif;
    text-align: left;
    width: 100%;
    transition: background 180ms ease, color 180ms ease;
}

    .vsk-mobile-link:hover {
        background: rgba(255,255,255,.08);
        color: white;
    }

.vsk-mobile-divider {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 8px 0;
}

.vsk-mobile-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 10px;
    margin-top: 4px;
    background: var(--vsk-saffron);
    font-size: 15px;
    font-weight: 700;
    color: white;
    text-decoration: none;
    transition: background 180ms ease;
}

    .vsk-mobile-cta:hover {
        background: #FFAD40;
    }

.vsk-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1298;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    animation: vsk-fade-in 200ms ease both;
}

@keyframes vsk-fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* ── Hero ───────────────────────────────────────────────────────── */
.vsk-hero {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--vsk-navy) 0%, var(--vsk-navy2) 50%, var(--vsk-navy3) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 100px 24px 100px;
    margin-top: -68px; /* pull under fixed nav */
}

.vsk-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 56px 56px;
}

.vsk-hero-glow {
    position: absolute;
    right: -10%;
    top: 10%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,120,212,.18) 0%, transparent 65%);
    pointer-events: none;
}

.vsk-hero-inner {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 860px;
    width: 100%;
}

.vsk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;
    padding: 7px 20px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    letter-spacing: .04em;
    margin-bottom: 32px;
}

.vsk-badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vsk-saffron);
    box-shadow: 0 0 0 3px rgba(255,140,0,.3);
    animation: vsk-pulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes vsk-pulse {
    0%,100% {
        box-shadow: 0 0 0 3px rgba(255,140,0,.3);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(255,140,0,.08);
    }
}

.vsk-hero-h1 {
    font-size: clamp(38px, 7vw, 72px) !important;
    font-weight: 800 !important;
    color: white !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 12px !important;
    font-family: 'Sora', sans-serif !important;
}

.vsk-hero-h2 {
    font-size: clamp(20px, 3.5vw, 36px) !important;
    font-weight: 400 !important;
    color: var(--vsk-saffron) !important;
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
    letter-spacing: .01em !important;
}

.vsk-hero-body {
    font-size: clamp(15px, 2vw, 18px) !important;
    color: rgba(255,255,255,.65) !important;
    max-width: 620px;
    margin: 0 auto !important;
    line-height: 1.75 !important;
}

.vsk-hero-ctas {
    flex-wrap: wrap;
}

.vsk-btn-cta {
    font-weight: 700 !important;
    text-transform: none !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 20px rgba(255,140,0,.4) !important;
    transition: transform var(--vsk-t), box-shadow var(--vsk-t) !important;
}

    .vsk-btn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(255,140,0,.45) !important;
    }

.vsk-btn-ghost {
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    letter-spacing: 0 !important;
    color: white !important;
    border-color: rgba(255,255,255,.3) !important;
    transition: border-color var(--vsk-t), background var(--vsk-t) !important;
}

    .vsk-btn-ghost:hover {
        border-color: rgba(255,255,255,.65) !important;
        background: rgba(255,255,255,.07) !important;
    }

/* Stats strip */
.vsk-stats-strip {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: var(--vsk-r-lg) !important;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.vsk-stat {
    padding: 22px 24px;
    text-align: center;
}

.vsk-stat--bordered {
    border-right: 1px solid rgba(255,255,255,.1);
}

.vsk-stat-icon {
    font-size: 22px !important;
    color: var(--vsk-saffron) !important;
    margin-bottom: 6px;
    display: block;
}

.vsk-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: white;
    line-height: 1.1;
}

.vsk-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Scroll cue */
.vsk-scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.vsk-scroll-icon {
    color: rgba(255,255,255,.3) !important;
    font-size: 36px !important;
    animation: vsk-bounce 2s ease-in-out infinite;
}

@keyframes vsk-bounce {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(7px)
    }
}

/* ── Tricolor divider ────────────────────────────────────────────── */
.vsk-tricolor {
    display: flex;
    height: 4px;
}

    .vsk-tricolor > div {
        flex: 1;
    }

/* ── Sections ────────────────────────────────────────────────────── */
.vsk-section {
    padding: 96px 0;
}

.vsk-section--alt {
    background: var(--vsk-surface);
}

.vsk-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.vsk-section-title {
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 800 !important;
    color: var(--vsk-navy) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 16px !important;
}

    .vsk-section-title.left {
        text-align: left !important;
    }

.vsk-section-sub {
    font-size: 17px !important;
    color: var(--vsk-sub) !important;
    line-height: 1.65 !important;
}

/* ── Portal cards ────────────────────────────────────────────────── */
.vsk-portal-card {
    border: 1px solid var(--vsk-border) !important;
    border-radius: var(--vsk-r-lg) !important;
    background: white !important;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform var(--vsk-t), box-shadow var(--vsk-t), border-color var(--vsk-t) !important;
    cursor: pointer;
}

    .vsk-portal-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--vsk-t);
    }

.vsk-portal-card--0::before {
    background: linear-gradient(90deg, #0078D4, #2B88D8);
}

.vsk-portal-card--1::before {
    background: linear-gradient(90deg, #FF8C00, #FFAD40);
}

.vsk-portal-card--2::before {
    background: linear-gradient(90deg, #107C10, #2DB22D);
}

.vsk-portal-card--3::before {
    background: linear-gradient(90deg, #E91E63, #F06292);
}

.vsk-portal-card--4::before {
    background: linear-gradient(90deg, #7B1FA2, #AB47BC);
}

.vsk-portal-card--5::before {
    background: linear-gradient(90deg, #00796B, #26A69A);
}

.vsk-portal-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--vsk-shadow-lg) !important;
    border-color: transparent !important;
}

    .vsk-portal-card:hover::before {
        transform: scaleX(1);
    }

.vsk-portal-card--featured {
    border-color: var(--vsk-blue) !important;
    background: linear-gradient(160deg, #EBF4FF 0%, #F8FBFF 100%) !important;
}

    .vsk-portal-card--featured::before {
        transform: scaleX(1);
    }

.vsk-featured-banner {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--vsk-blue);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vsk-portal-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: transform var(--vsk-t);
}

.vsk-portal-card:hover .vsk-portal-icon-wrap {
    transform: scale(1.08);
}

.vsk-portal-icon-wrap--0 {
    background: #EBF4FF;
    color: #0078D4;
}

.vsk-portal-icon-wrap--1 {
    background: #FFF3E0;
    color: #FF8C00;
}

.vsk-portal-icon-wrap--2 {
    background: #E8F5E9;
    color: #107C10;
}

.vsk-portal-icon-wrap--3 {
    background: #FCE4EC;
    color: #E91E63;
}

.vsk-portal-icon-wrap--4 {
    background: #EDE7F6;
    color: #7B1FA2;
}

.vsk-portal-icon-wrap--5 {
    background: #E0F2F1;
    color: #00796B;
}

.vsk-portal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--vsk-navy) !important;
}

.vsk-portal-desc {
    font-size: 13.5px !important;
    color: var(--vsk-sub) !important;
    line-height: 1.65 !important;
}

.vsk-portal-tag .mud-chip-label {
    font-size: 11px !important;
    font-weight: 600 !important;
}

.vsk-portal-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── About section ───────────────────────────────────────────────── */
.vsk-about-para {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--vsk-sub) !important;
}

    .vsk-about-para strong {
        color: var(--vsk-text) !important;
        font-weight: 600 !important;
    }

.vsk-metrics-card {
    background: var(--vsk-navy) !important;
    border-radius: var(--vsk-r-lg) !important;
}

    .vsk-metrics-card .mud-typography {
        color: rgba(255,255,255,.85) !important;
    }

    .vsk-metrics-card .font-weight-bold {
        color: white !important;
    }

    .vsk-metrics-card .font-weight-black {
        color: var(--vsk-saffron) !important;
    }

.vsk-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

    .vsk-dot.green {
        background: #30D158;
    }

    .vsk-dot.amber {
        background: #FFD60A;
    }

    .vsk-dot.red {
        background: #FF453A;
    }

.vsk-live-chip {
    font-weight: 700 !important;
    font-size: 11px !important;
}

.vsk-about-stat-box {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

    .vsk-about-stat-box .mud-typography {
        color: rgba(255,255,255,.7) !important;
    }

/* ── Banner ──────────────────────────────────────────────────────── */
.vsk-banner {
    background: var(--vsk-navy);
    padding: 28px 24px;
}

.vsk-banner-chip {
    border-color: rgba(255,255,255,.2) !important;
    color: rgba(255,255,255,.7) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    transition: border-color var(--vsk-t), color var(--vsk-t) !important;
}

    .vsk-banner-chip:hover {
        border-color: rgba(255,255,255,.5) !important;
        color: white !important;
    }

/* ── Contact ─────────────────────────────────────────────────────── */
.vsk-contact-item {
    border: 1px solid var(--vsk-border) !important;
    background: white !important;
    transition: box-shadow var(--vsk-t) !important;
}

    .vsk-contact-item:hover {
        box-shadow: var(--vsk-shadow) !important;
    }

.vsk-submit-btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    padding: 12px !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.vsk-footer {
    background: var(--vsk-navy);
    padding: 64px 0 0;
}

.vsk-footer-link {
    font-size: 14px !important;
    color: rgba(255,255,255,.5) !important;
    text-decoration: none !important;
    display: block;
    transition: color var(--vsk-t) !important;
    cursor: pointer;
}

    .vsk-footer-link:hover {
        color: white !important;
    }

.vsk-footer-link-sm {
    font-size: 12px !important;
    color: rgba(255,255,255,.25) !important;
    text-decoration: none !important;
    transition: color var(--vsk-t) !important;
}

    .vsk-footer-link-sm:hover {
        color: rgba(255,255,255,.6) !important;
    }

.vsk-footer-login-btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.vsk-txt-heading{
    color:white;
}
.vsk-txt-heading-dark{
    color: black
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .vsk-section {
        padding: 64px 0;
    }

    .vsk-stat {
        padding: 16px 12px;
    }

    .vsk-stat-value {
        font-size: 22px;
    }

    .vsk-hero-badge {
        font-size: 10px;
    }
}