:root{
    --brand:#0f9f57;
    --brand-dark:#08763f;
    --brand-deep:#064f2d;
    --brand-soft:#eaf8f0;
    --lime:#d7f36b;
    --yellow:#ffc928;
    --yellow-soft:#fff5c8;
    --navy:#0d2135;
    --navy-2:#173651;
    --ink:#132238;
    --muted:#66768a;
    --line:#e3eaf0;
    --soft:#f6faf8;
    --soft-blue:#eef6fb;
    --white:#fff;
    --shadow-xs:0 6px 18px rgba(13,33,53,.06);
    --shadow-sm:0 14px 36px rgba(13,33,53,.08);
    --shadow:0 24px 70px rgba(13,33,53,.12);
    --radius-sm:14px;
    --radius:22px;
    --radius-lg:32px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
body.admin-body{background:#f3f6f8}
h1,h2,h3,h4,h5,h6,.section-title,.display-title{font-family:"Manrope",sans-serif;letter-spacing:-.035em}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.text-muted{color:var(--muted)!important}
.container{max-width:1200px}

/* -------------------- global UI -------------------- */
.section{padding:88px 0}
.section-sm{padding:58px 0}
.section-soft{background:linear-gradient(180deg,#f7fbf9 0%,#fff 100%)}
.section-deep{background:var(--navy);color:#fff}
.section-kicker,.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--brand-dark);
}
.section-kicker:before,.eyebrow:before{
    content:"";
    width:24px;
    height:2px;
    border-radius:99px;
    background:var(--yellow);
}
.section-title{
    margin:0;
    font-size:clamp(2rem,4vw,3.45rem);
    line-height:1.04;
    font-weight:800;
}
.section-subtitle{
    max-width:720px;
    margin-top:14px;
    color:var(--muted);
    font-size:1.04rem;
}
.section-heading-row{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:34px;
}
.section-heading-row .section-subtitle{margin-bottom:0}

.btn{
    border-radius:14px;
    font-weight:700;
    transition:.22s ease;
}
.btn-lg{padding:.9rem 1.25rem}
.btn-brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border:1px solid var(--brand);
    background:linear-gradient(135deg,var(--brand),#0a894a);
    box-shadow:0 11px 28px rgba(15,159,87,.20);
    padding:.76rem 1.12rem;
}
.btn-brand:hover,.btn-brand:focus{
    color:#fff;
    transform:translateY(-2px);
    background:linear-gradient(135deg,#0a894a,var(--brand-dark));
    box-shadow:0 15px 34px rgba(15,159,87,.26);
}
.btn-outline-brand{
    color:var(--brand-dark);
    border:1.5px solid #b8dfca;
    background:#fff;
    padding:.75rem 1.1rem;
}
.btn-outline-brand:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-ghost{
    color:var(--ink);
    border:1px solid var(--line);
    background:#fff;
    padding:.75rem 1rem;
}
.btn-ghost:hover{background:var(--soft);border-color:#cdd8e1;color:var(--brand-dark)}
.btn-yellow{
    background:var(--yellow);
    color:var(--navy);
    border:1px solid var(--yellow);
    box-shadow:0 10px 28px rgba(255,201,40,.23);
}
.btn-yellow:hover{background:#f4bd12;border-color:#f4bd12;color:var(--navy);transform:translateY(-2px)}

.badge-soft{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.45rem .68rem;
    border-radius:999px;
    font-size:.76rem;
    font-weight:800;
    background:var(--brand-soft);
    color:var(--brand-dark);
    border:1px solid #d8eee2;
}
.badge-yellow{background:var(--yellow-soft);color:#775b00;border-color:#f9e69f}
.price{font-family:"Manrope",sans-serif;font-size:1.25rem;font-weight:800;color:var(--navy)}
.old-price{text-decoration:line-through;color:#91a0b0;font-size:.92rem}

.form-control,.form-select{
    border:1px solid #d9e2e9;
    border-radius:14px;
    padding:.82rem .95rem;
    background:#fff;
}
.form-control:focus,.form-select:focus{
    border-color:#6cc493;
    box-shadow:0 0 0 .24rem rgba(15,159,87,.10);
}
.form-label{font-weight:700;color:#27374a}

/* -------------------- announcement + navigation -------------------- */
.announcement-bar{
    background:var(--navy);
    color:#dfe9f1;
    padding:8px 0;
    font-size:.82rem;
}
.announcement-copy{display:flex;align-items:center;gap:8px;font-weight:600}
.announcement-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,201,40,.12)}
.announcement-links{gap:22px}
.announcement-links a{color:#dfe9f1;display:inline-flex;align-items:center;gap:6px}
.announcement-links a:hover{color:#fff}

.premium-navbar{
    padding:9px 0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(224,232,238,.84);
    box-shadow:0 4px 22px rgba(13,33,53,.045);
}
.brand-wrap{display:flex;align-items:center;padding:0;margin-right:24px}
.brand-wrap img{width:180px;height:58px;object-fit:contain;object-position:left center}
.nav-link{
    color:#304155!important;
    font-weight:700;
    padding:.68rem .74rem!important;
    border-radius:10px;
    font-size:.95rem;
}
.nav-link:hover,.nav-link.active{color:var(--brand-dark)!important;background:#f3faf6}
.premium-dropdown{padding:10px;width:315px;border-radius:18px;margin-top:10px!important}
.premium-dropdown .dropdown-item{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:normal;
    padding:10px;
    border-radius:12px;
}
.premium-dropdown .dropdown-item:hover{background:#f7faf8}
.premium-dropdown strong,.premium-dropdown small{display:block}
.premium-dropdown small{color:var(--muted);margin-top:2px}
.menu-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--brand-dark);font-size:1.1rem;flex:0 0 auto}
.bg-soft-green{background:#e9f8ef}.bg-soft-blue{background:#eaf3fb}

/* -------------------- hero -------------------- */
.hero-pro{
    position:relative;
    overflow:hidden;
    padding:78px 0 72px;
    background:
      radial-gradient(circle at 12% 10%,rgba(215,243,107,.32),transparent 25%),
      radial-gradient(circle at 82% 17%,rgba(15,159,87,.13),transparent 26%),
      linear-gradient(135deg,#fbfdfb 0%,#f5fbf7 50%,#fffdf3 100%);
}
.hero-pro:after{
    content:"";
    position:absolute;
    width:420px;height:420px;
    border:1px solid rgba(15,159,87,.10);
    border-radius:50%;
    right:-170px;top:-170px;
    box-shadow:0 0 0 70px rgba(15,159,87,.025),0 0 0 140px rgba(255,201,40,.025);
}
.hero-content{position:relative;z-index:2}
.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 12px;
    border:1px solid #dbece3;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    box-shadow:var(--shadow-xs);
    color:var(--brand-dark);
    font-weight:800;
    font-size:.8rem;
}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.hero-pro h1{
    margin:18px 0 18px;
    font-family:"Manrope",sans-serif;
    font-weight:800;
    font-size:clamp(3rem,5.8vw,5.7rem);
    line-height:.98;
    letter-spacing:-.065em;
    max-width:780px;
}
.hero-pro h1 .green{color:var(--brand-dark)}
.hero-pro h1 .highlight{
    position:relative;
    display:inline-block;
    z-index:1;
}
.hero-pro h1 .highlight:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:4px;
    height:18px;
    background:var(--yellow);
    border-radius:20px 8px 20px 8px;
    transform:rotate(-1.5deg);
    z-index:-1;
    opacity:.92;
}
.hero-copy{font-size:1.12rem;color:#5e6f81;max-width:650px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px}
.hero-trust span{display:flex;align-items:center;gap:8px;font-size:.89rem;font-weight:700;color:#415466}
.hero-trust i{color:var(--brand);font-size:1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.hero-showcase{position:relative;min-height:560px;padding:28px 8px 36px 34px}
.hero-panel{
    position:absolute;
    overflow:hidden;
    border-radius:28px;
    border:8px solid #fff;
    background:#fff;
    box-shadow:var(--shadow);
}
.hero-panel img{display:block;width:100%;height:100%;object-fit:cover}
.hero-panel-main{width:78%;aspect-ratio:4/3;right:0;top:32px;transform:rotate(1.3deg)}
.hero-panel-small-one{width:48%;aspect-ratio:4/3;left:0;bottom:22px;transform:rotate(-5deg);z-index:3}
.hero-panel-small-two{width:34%;aspect-ratio:4/3;right:6%;bottom:-2px;transform:rotate(5deg);z-index:4}
.hero-floating-note{
    position:absolute;
    z-index:7;
    background:#fff;
    border:1px solid #e5ecef;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
    padding:13px 15px;
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:800;
}
.hero-floating-note i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--yellow-soft);color:#8a6800}
.hero-floating-note.one{left:15px;top:34px}.hero-floating-note.two{right:0;bottom:100px}

.stats-ribbon{position:relative;margin-top:-32px;z-index:10}
.stats-shell{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--navy);
    color:#fff;
    border-radius:24px;
    padding:18px;
    box-shadow:0 18px 45px rgba(13,33,53,.18);
}
.stat-item{padding:7px 22px;border-right:1px solid rgba(255,255,255,.12)}
.stat-item:last-child{border-right:0}
.stat-item strong{font-family:"Manrope",sans-serif;display:block;color:var(--yellow);font-size:1.55rem;line-height:1.15}
.stat-item span{font-size:.82rem;color:#c8d4de}

/* -------------------- journey cards -------------------- */
.journey-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:1.45rem;flex:0 0 auto}
.journey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.journey-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:30px;
    min-height:300px;
    border:1px solid var(--line);
    box-shadow:var(--shadow-xs);
    transition:.25s ease;
}
.journey-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.journey-card h3{font-size:1.55rem;font-weight:800;margin:18px 0 8px}
.journey-card p{max-width:310px;color:#647486}
.journey-card .journey-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:1.45rem}
.journey-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-75px;bottom:-70px}
.journey-card.compete{background:linear-gradient(145deg,#f0fbf5,#fff)}
.journey-card.compete .journey-icon{background:#dcf4e7;color:var(--brand-dark)}
.journey-card.compete:after{background:rgba(15,159,87,.09)}
.journey-card.skill{background:linear-gradient(145deg,#fffaf0,#fff)}
.journey-card.skill .journey-icon{background:#fff0b9;color:#7c5b00}
.journey-card.skill:after{background:rgba(255,201,40,.12)}
.journey-card.school{background:linear-gradient(145deg,#f1f7fb,#fff)}
.journey-card.school .journey-icon{background:#e2eef7;color:#244b69}
.journey-card.school:after{background:rgba(43,102,145,.08)}
.journey-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);margin-top:10px;position:relative;z-index:2}
.journey-link:hover{color:var(--brand-dark);gap:11px}

/* -------------------- competition cards -------------------- */
.competition-card,.course-card,.review-card,.surface-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow-xs);
    overflow:hidden;
    height:100%;
    transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.competition-card:hover,.course-card:hover,.review-card:hover,.surface-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:#d3e3db}
.competition-media,.course-media{position:relative;overflow:hidden;background:#edf5f0}
.competition-media{aspect-ratio:4/3}
.course-media{aspect-ratio:16/10}
.competition-media img,.course-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.competition-card:hover .competition-media img,.course-card:hover .course-media img{transform:scale(1.025)}
.card-overlay-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:start;gap:10px}
.overlay-pill{background:rgba(255,255,255,.91);backdrop-filter:blur(8px);padding:7px 10px;border-radius:999px;font-size:.73rem;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.card-body-pro{padding:21px}
.card-body-pro h4{font-size:1.12rem;font-weight:800;margin-bottom:8px;line-height:1.35}
.card-body-pro p{font-size:.92rem;color:var(--muted);margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:10px;color:#6a7989;font-size:.82rem;margin-bottom:16px}
.card-meta span{display:flex;align-items:center;gap:6px}
.card-footer-pro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:15px;border-top:1px solid #edf1f4}
.card-footer-pro .btn{white-space:nowrap}

/* -------------------- learning / feature cards -------------------- */
.learning-split{
    border-radius:32px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:var(--shadow-sm);
}
.learning-copy{padding:44px}
.learning-copy h3{font-size:2rem;font-weight:800}
.learning-points{display:grid;gap:12px;margin:24px 0 28px}
.learning-points div{display:flex;align-items:flex-start;gap:10px;color:#536476}
.learning-points i{color:var(--brand);margin-top:2px}
.learning-visual{
    height:100%;
    min-height:420px;
    background:linear-gradient(145deg,var(--brand-dark),#123c2a);
    padding:25px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.learning-visual.school{background:linear-gradient(145deg,var(--navy),#244f70)}
.mini-course{
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    align-self:center;
    box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.mini-course:nth-child(even){transform:translateY(25px)}
.mini-course img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mini-course span{display:block;padding:10px 12px;font-weight:800;font-size:.82rem;color:var(--ink)}

/* -------------------- review / trust -------------------- */
.review-card{padding:18px}
.review-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#eef3f6}
.review-top{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.review-top h5{font-size:1rem;font-weight:800;margin:0}
.stars{color:#f2b600;letter-spacing:1px;white-space:nowrap}
.review-quote{color:#536476;margin:14px 0 0;font-size:.94rem}
.quote-icon{font-size:1.5rem;color:#c6dfd1}

/* -------------------- CTA -------------------- */
.cta-shell{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#0c2539 0%,#0b5336 58%,#0d7544 100%);
    border-radius:34px;
    padding:48px;
    color:#fff;
    box-shadow:var(--shadow);
}
.cta-shell:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-120px;background:rgba(255,201,40,.15)}
.cta-shell:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:120px;bottom:-130px;background:rgba(255,255,255,.06)}
.cta-shell h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;max-width:720px}
.cta-shell p{color:#d2e1e7;max-width:670px}
.cta-shell>*{position:relative;z-index:2}

/* -------------------- page hero -------------------- */
.page-hero{
    padding:68px 0 62px;
    background:
      radial-gradient(circle at 15% 0%,rgba(215,243,107,.25),transparent 27%),
      linear-gradient(135deg,#f7fbf9,#fbfcff 55%,#fffaf0);
    border-bottom:1px solid #edf1f3;
}
.page-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:1.03;margin:13px 0 12px}
.page-hero .section-subtitle{font-size:1.08rem}
.page-breadcrumb{display:flex;align-items:center;gap:7px;color:#748394;font-size:.86rem;font-weight:700;margin-bottom:12px}
.page-breadcrumb a{color:var(--brand-dark)}

.filter-shell{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:13px;
    box-shadow:var(--shadow-xs);
    margin-bottom:32px;
}
.filter-shell .form-control,.filter-shell .form-select{border-color:transparent;background:#f7f9fa}
.filter-shell .form-control:focus,.filter-shell .form-select:focus{background:#fff;border-color:#8ccda8}

/* -------------------- detail pages -------------------- */
.detail-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:28px;box-shadow:var(--shadow-sm)}
.detail-panel{
    border:1px solid var(--line);
    border-radius:24px;
    padding:26px;
    background:#fff;
    box-shadow:var(--shadow-xs);
}
.detail-title{font-size:2rem;font-weight:800}
.detail-price-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info-box{padding:14px;border:1px solid #e7edf1;background:#fafcfc;border-radius:15px}
.info-box small{display:block;color:var(--muted);margin-bottom:3px}.info-box strong{font-size:.92rem}
.rule-list{padding:0;margin:0;counter-reset:rule;list-style:none;display:grid;gap:11px}
.rule-list li{position:relative;padding:14px 16px 14px 48px;background:#f8faf9;border:1px solid #e7eeea;border-radius:15px;color:#546576}
.rule-list li:before{counter-increment:rule;content:counter(rule);position:absolute;left:13px;top:11px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);font-weight:800;font-size:.78rem}
.class-pill input{display:none}
.class-pill label{display:block;padding:.78rem .9rem;border:1.5px solid #dbe5e1;border-radius:13px;text-align:center;font-weight:700;font-size:.88rem;cursor:pointer;transition:.18s ease;background:#fff}
.class-pill label:hover{border-color:#9fceb3;background:#fbfefc}
.class-pill input:checked+label{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark);box-shadow:0 0 0 3px rgba(15,159,87,.08)}
.security-note{display:flex;align-items:flex-start;gap:10px;padding:13px;border-radius:14px;background:#f8fbf9;color:#66768a;font-size:.82rem}
.security-note i{color:var(--brand);font-size:1.05rem;margin-top:1px}

/* -------------------- about / services -------------------- */
.about-visual{
    position:relative;
    min-height:520px;
}
.about-visual .about-main{
    width:78%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:28px;
    box-shadow:var(--shadow);
}
.about-visual .about-float{
    position:absolute;
    right:0;
    bottom:5%;
    width:46%;
    aspect-ratio:1/1;
    border-radius:24px;
    border:8px solid #fff;
    object-fit:cover;
    box-shadow:var(--shadow-sm);
}
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:25px}
.value-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.value-card i{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);margin-bottom:12px}
.value-card strong{display:block;font-family:"Manrope",sans-serif}.value-card span{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}
.service-card{padding:28px;border:1px solid var(--line);border-radius:24px;background:#fff;height:100%;box-shadow:var(--shadow-xs)}
.service-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.35rem;margin-bottom:22px}
.service-card h3{font-size:1.35rem;font-weight:800}.service-card p{color:var(--muted)}

.team-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-xs);height:100%}
.team-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f1f6f3}.team-card-body{padding:20px}.team-card h4{font-size:1.12rem;font-weight:800;margin:0}.team-role{color:var(--brand-dark);font-size:.85rem;font-weight:700;margin-top:3px}.team-bio{color:var(--muted);font-size:.9rem;margin-top:12px;margin-bottom:0}

.policy-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow-xs)}
.policy-card h2{font-size:1.35rem;font-weight:800;margin-top:28px}.policy-card h2:first-child{margin-top:0}.policy-card p,.policy-card li{color:#607083}

.contact-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-xs)}
.contact-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #edf1f3}.contact-item:last-child{border-bottom:0}.contact-item i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);flex:0 0 auto}.contact-item strong{display:block}.contact-item span,.contact-item a{color:var(--muted);font-size:.9rem}

/* -------------------- registration / payment -------------------- */
.form-shell{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow-xs)}
.order-summary{position:sticky;top:110px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow-xs)}
.order-summary img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:17px}
.summary-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;color:#637386}.summary-row strong{color:var(--ink)}
.summary-total{font-size:1.1rem;padding-top:15px;margin-top:7px;border-top:1px solid var(--line)}
.payment-shell{max-width:760px;margin:auto}
.payment-heading{text-align:center;margin-bottom:26px}.payment-heading h1{font-size:2rem;font-weight:800}
.checkout-summary{background:#f8faf9;border:1px solid #e5ece8;border-radius:18px;padding:18px;margin:22px 0}
.success-box{max-width:720px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:30px;padding:44px;text-align:center;box-shadow:var(--shadow)}
.success-icon{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-size:2.6rem;margin:0 auto 20px}

/* -------------------- footer -------------------- */
.site-footer{position:relative;overflow:hidden;background:#0a1d2f;color:#cbd7e0;padding:64px 0 24px;margin-top:0}
.footer-glow{position:absolute;border-radius:50%;filter:blur(2px)}
.footer-glow-one{width:420px;height:420px;right:-220px;top:-230px;background:rgba(15,159,87,.14)}
.footer-glow-two{width:320px;height:320px;left:-200px;bottom:-180px;background:rgba(255,201,40,.08)}
.footer-newsletter{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 30px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);border-radius:24px;backdrop-filter:blur(8px)}
.footer-newsletter h3{font-size:1.5rem;color:#fff;font-weight:800}.footer-newsletter p{color:#aebdca}
.footer-brand img{width:205px;height:78px;object-fit:contain;object-position:left center;filter:drop-shadow(0 7px 18px rgba(0,0,0,.18))}
.footer-intro{max-width:380px;color:#aebdca}
.footer-contact a{color:#d2dde6}.footer-contact a:hover{color:#fff}.footer-contact i{color:var(--yellow);margin-right:7px}
.site-footer h6{color:#fff;font-size:.95rem;font-weight:800;margin-bottom:17px}
.footer-links{display:grid;gap:10px}.footer-links a{color:#aebdca}.footer-links a:hover{color:#fff;transform:translateX(2px)}
.footer-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.footer-feature-grid div{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#c7d3dc;font-size:.82rem}.footer-feature-grid i{color:var(--yellow)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:20px;font-size:.82rem;color:#91a4b3}.footer-bottom a{color:#aebdca}.footer-bottom a:hover{color:#fff}

.back-to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:0;border-radius:14px;background:var(--navy);color:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;z-index:1000}.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* -------------------- admin -------------------- */
.admin-sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    width:270px;
    padding:22px 18px;
    overflow-y:auto;
    background:linear-gradient(180deg,#0b2033 0%,#102b3d 100%);
    color:#fff;
    z-index:1040;
    box-shadow:12px 0 34px rgba(13,33,53,.10);
}
.admin-sidebar .admin-brand{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:18px;padding:7px 10px;margin-bottom:26px}
.admin-sidebar .admin-brand img{height:54px;width:190px;object-fit:contain}
.admin-sidebar .nav-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#6f8799;padding:12px 12px 7px;font-weight:800}
.admin-sidebar a{display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;color:#cbd8e1;border-radius:12px;font-weight:700;font-size:.9rem}
.admin-sidebar a i{font-size:1.04rem;width:22px}.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.09);color:#fff}.admin-sidebar a.active{box-shadow:inset 3px 0 0 var(--yellow)}
.admin-main{margin-left:270px;min-height:100vh}
.admin-top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #e3e9ee;padding:15px 24px}
.admin-content{padding:28px}
.metric-card{background:#fff;border:1px solid #e4eaee;border-radius:20px;padding:22px;box-shadow:var(--shadow-xs)}
.metric-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);font-size:1.2rem}
.table-card{background:#fff;border:1px solid #e4eaee;border-radius:20px;box-shadow:var(--shadow-xs);overflow:hidden}
.table-card .card-header{background:#fff;border-bottom:1px solid #edf1f4;padding:18px 20px}.table>thead th{background:#f7f9fa;color:#657588;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #e7ecef;padding:13px 14px}.table>tbody td{padding:13px 14px;vertical-align:middle}.thumb-sm{width:62px;height:48px;object-fit:cover;border-radius:10px}

/* -------------------- legacy class compatibility -------------------- */
.card-modern{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-xs);overflow:hidden;height:100%;transition:.24s ease}.card-modern:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}.card-modern .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#edf5f0}.card-modern .media img{width:100%;height:100%;object-fit:cover}.how-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:23px;height:100%;box-shadow:var(--shadow-xs)}.how-num{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--yellow);color:var(--navy);font-weight:800}.icon-box{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:1.35rem}

/* -------------------- responsive -------------------- */
@media(max-width:1199px){
    .premium-navbar .navbar-collapse{padding:14px 0 6px}.premium-dropdown{width:100%}.navbar-actions{padding:8px 0 4px}
    .hero-showcase{min-height:500px}
}
@media(max-width:991px){
    .hero-pro{padding:60px 0 45px}.hero-showcase{min-height:490px;margin-top:28px}.hero-pro h1{max-width:800px}
    .stats-shell{grid-template-columns:1fr 1fr}.stat-item:nth-child(2){border-right:0}.stat-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px;margin-bottom:7px}
    .journey-grid{grid-template-columns:1fr}.journey-card{min-height:auto}
    .learning-copy{padding:34px}.learning-visual{min-height:360px}
    .footer-newsletter{align-items:flex-start;flex-direction:column}
    .admin-sidebar{transform:translateX(-100%);transition:.25s}.admin-sidebar.show{transform:translateX(0)}.admin-main{margin-left:0}
    .order-summary{position:static}.section{padding:72px 0}
}
@media(max-width:767px){
    .announcement-copy{font-size:.76rem}.brand-wrap img{width:156px;height:50px}.premium-navbar{padding:7px 0}
    .hero-pro{padding:50px 0 36px}.hero-pro h1{font-size:clamp(2.6rem,13vw,4rem)}.hero-copy{font-size:1rem}.hero-showcase{min-height:420px;padding:12px 0}.hero-panel-main{width:82%}.hero-panel-small-one{width:50%;bottom:5px}.hero-panel-small-two{display:none}.hero-floating-note.one{left:0;top:5px}.hero-floating-note.two{right:0;bottom:54px}.hero-floating-note{font-size:.78rem;padding:9px 10px}.hero-floating-note i{width:32px;height:32px}
    .stats-ribbon{margin-top:-15px}.stats-shell{padding:12px;border-radius:20px}.stat-item{padding:9px 12px}.stat-item strong{font-size:1.25rem}.stat-item span{font-size:.75rem}
    .section{padding:62px 0}.section-heading-row{align-items:flex-start;flex-direction:column;margin-bottom:26px}.section-title{font-size:2.2rem}.journey-card{padding:24px}
    .learning-copy{padding:26px}.learning-visual{min-height:300px;padding:14px}.mini-course span{font-size:.72rem}.cta-shell{padding:32px 24px;border-radius:26px}
    .page-hero{padding:52px 0 45px}.page-hero h1{font-size:2.7rem}.filter-shell{padding:10px}
    .detail-panel,.form-shell,.policy-card,.contact-card{padding:20px}.info-grid{grid-template-columns:1fr}.footer-feature-grid{grid-template-columns:1fr}.site-footer{padding-top:50px}.footer-newsletter{padding:22px}.admin-content{padding:18px}.admin-top{padding:12px 16px}
}
@media(max-width:575px){
    .hero-actions .btn{width:100%}.hero-trust{gap:10px 15px}.hero-showcase{min-height:360px}.hero-floating-note.two{display:none}.hero-panel-main{width:88%;right:0;top:30px}.hero-panel-small-one{width:54%;left:0;bottom:8px}.stats-shell{grid-template-columns:1fr 1fr}.stat-item{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.1);margin:0!important;padding:11px!important}.stat-item:nth-child(odd){border-right:1px solid rgba(255,255,255,.1)!important}.stat-item:nth-last-child(-n+2){border-bottom:0}.value-grid{grid-template-columns:1fr}.footer-bottom{align-items:flex-start!important}.footer-brand img{width:180px}
}

/* ================================================================
   21SKILLADDA V3 — GATEWAY + DUAL-HUB EXPERIENCE
   ================================================================ */
:root{
    --purple-950:#160d2e;
    --purple-900:#21123f;
    --purple-800:#30185d;
    --purple-700:#4b2a83;
    --amber-700:#b97700;
    --amber-600:#d99100;
    --amber-500:#f1aa16;
    --amber-300:#ffd169;
    --cream:#fffaf0;
}
.premium-announcement{background:#120b26!important;color:#f4efff!important}
.v2-navbar{border-bottom:1px solid rgba(20,15,35,.07);background:rgba(255,255,255,.96)!important}
.v2-navbar .brand-wrap img{height:56px;max-width:190px;object-fit:contain}
.v2-navbar .nav-link{font-weight:700;color:#2b2636!important;border-radius:999px;padding:.62rem .86rem!important}
.v2-navbar .nav-link.active,.v2-navbar .nav-link:hover{color:var(--purple-800)!important;background:#f4effb}
.v2-footer{background:#100a20!important}

/* Gateway home */
.gateway-hero{position:relative;overflow:hidden;min-height:calc(100vh - 112px);padding:74px 0 58px;background:radial-gradient(circle at 50% -10%,#fff 0,#faf8ff 35%,#f4f1f7 100%)}
.gateway-orb{position:absolute;border-radius:50%;filter:blur(10px);opacity:.5}.orb-one{width:360px;height:360px;background:#f1bd35;right:-180px;top:80px}.orb-two{width:390px;height:390px;background:#6540a4;left:-210px;bottom:-120px;opacity:.2}
.gateway-intro{max-width:780px;margin-bottom:44px}.gateway-eyebrow{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #e8e1f2;background:#fff;border-radius:999px;padding:.5rem .85rem;font-size:.82rem;font-weight:800;color:var(--purple-800);box-shadow:0 8px 30px rgba(32,17,62,.06)}
.gateway-intro h1{font-size:clamp(2.7rem,5vw,5.1rem);font-weight:800;line-height:.98;margin:18px 0;letter-spacing:-.06em;color:#17131e}.gateway-intro h1 span{color:var(--purple-700)}.gateway-intro p{font-size:1.12rem;color:#70687a}
.gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1120px;margin:auto}.gateway-card{position:relative;min-height:500px;border-radius:34px;padding:32px;overflow:hidden;display:flex;flex-direction:column;transition:.35s cubic-bezier(.2,.8,.2,1);box-shadow:0 24px 65px rgba(25,15,38,.12)}.gateway-card:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.15);border-radius:50%;right:-110px;bottom:-110px;box-shadow:0 0 0 45px rgba(255,255,255,.04),0 0 0 90px rgba(255,255,255,.025)}.gateway-card:hover{transform:translateY(-8px);box-shadow:0 32px 80px rgba(25,15,38,.2)}
.gateway-school{background:linear-gradient(145deg,var(--purple-950),#382064);color:#fff}.gateway-skill{background:linear-gradient(145deg,#d28d00,#f0b52e);color:#201508}
.gateway-top{display:flex;justify-content:space-between;align-items:center}.gateway-number{font-family:Manrope;font-weight:800;opacity:.55;letter-spacing:.08em}.gateway-arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:1.2rem;transition:.25s}.gateway-skill .gateway-arrow{background:rgba(255,255,255,.34)}.gateway-card:hover .gateway-arrow{transform:rotate(45deg)}
.gateway-icon{width:78px;height:78px;border-radius:24px;margin:38px 0 28px;display:grid;place-items:center;font-size:2.1rem;background:rgba(255,255,255,.13);backdrop-filter:blur(10px)}.gateway-skill .gateway-icon{background:#24152f;color:#ffd15a}
.gateway-copy{position:relative;z-index:2}.gateway-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;opacity:.7}.gateway-copy h2{font-size:clamp(2rem,3vw,3rem);font-weight:800;line-height:1.03;margin:8px 0 14px}.gateway-copy h2 small{font-size:.55em;font-weight:700}.gateway-copy p{max-width:470px;opacity:.78;font-size:1rem}.gateway-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.gateway-tags span{padding:.45rem .72rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.78rem;font-weight:700}.gateway-skill .gateway-tags span{border-color:rgba(39,24,10,.18);background:rgba(255,255,255,.18)}
.gateway-stat{margin-top:auto;position:relative;z-index:2;display:flex;align-items:baseline;gap:9px}.gateway-stat strong{font-size:2rem;font-family:Manrope}.gateway-stat span{opacity:.68;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.gateway-proof{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:34px;color:#625b69;font-size:.86rem;font-weight:700}.gateway-proof i{color:var(--purple-700);margin-right:5px}

/* Skill & competition hub */
.skillhub-hero{padding:78px 0 70px;background:linear-gradient(120deg,#f6a900 0%,#f9bd3a 58%,#ffe095 100%);overflow:hidden;position:relative}.skillhub-hero:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;border:1px solid rgba(60,38,2,.1);right:-120px;top:-220px;box-shadow:0 0 0 80px rgba(255,255,255,.08),0 0 0 160px rgba(255,255,255,.05)}
.hub-kicker,.school-kicker{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:.5rem .8rem;font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.hub-kicker{background:#21142f;color:#ffd057}.skillhub-hero h1{font-size:clamp(3rem,5.4vw,5.6rem);font-weight:800;line-height:.92;letter-spacing:-.065em;color:#211520;margin:18px 0}.skillhub-hero h1 span{color:#fff;text-shadow:0 2px 0 rgba(33,21,32,.08)}.skillhub-hero p{font-size:1.08rem;max-width:650px;color:#5c451a}.btn-dark-pill,.btn-light-pill{border-radius:999px;padding:.9rem 1.3rem;font-weight:800}.btn-dark-pill{background:#20142e;color:#fff}.btn-dark-pill:hover{background:#120b1b;color:#fff}.btn-light-pill{background:rgba(255,255,255,.68);border:1px solid rgba(50,31,5,.1);color:#2b1d12}.btn-light-pill:hover{background:#fff}.hub-mini-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:36px}.hub-mini-stats div{display:grid}.hub-mini-stats strong{font:800 1.55rem Manrope}.hub-mini-stats span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#705523}
.hub-collage{position:relative;min-height:510px}.hub-shot{position:absolute;display:block;border:8px solid #fff;border-radius:22px;overflow:hidden;box-shadow:0 22px 55px rgba(66,45,12,.2);transition:.25s}.hub-shot img{width:100%;height:100%;object-fit:cover}.shot-1{width:58%;aspect-ratio:4/3;right:2%;top:4%;transform:rotate(3deg)}.shot-2{width:49%;aspect-ratio:4/3;left:2%;top:16%;transform:rotate(-5deg)}.shot-3{width:43%;aspect-ratio:4/3;right:12%;bottom:1%;transform:rotate(5deg)}.shot-4{width:37%;aspect-ratio:4/3;left:14%;bottom:3%;transform:rotate(-3deg)}.hub-shot:hover{z-index:5;transform:rotate(0) scale(1.04)}.hub-sticker{position:absolute;z-index:6;right:0;bottom:33%;background:#21142f;color:#fff;border-radius:999px;padding:.72rem 1rem;font-weight:800;box-shadow:0 12px 30px rgba(33,20,47,.22)}
.winner-run{display:flex;align-items:stretch;background:#171020;color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}.winner-run-label{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:15px 24px;background:#f0a812;color:#21130b;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;z-index:2}.winner-track-wrap{overflow:hidden;flex:1}.winner-track{display:flex;width:max-content;animation:winnerMarquee 32s linear infinite}.winner-track:hover{animation-play-state:paused}.winner-run-item{display:flex;align-items:center;gap:10px;padding:10px 25px;border-right:1px solid rgba(255,255,255,.1);min-width:310px}.winner-run-item img{width:42px;height:42px;border-radius:50%;object-fit:cover}.winner-run-item div{display:grid}.winner-run-item strong{font-size:.88rem}.winner-run-item span{font-size:.72rem;color:#bfb5cc}.winner-run-item>i{margin-left:auto;color:#f3b82d}@keyframes winnerMarquee{to{transform:translateX(-50%)}}
.section-kicker.amber{color:#a46b00}.section-kicker.amber:before{background:#24172f}.skillhub-section{background:#fffdf8}.v2-competition-card{border-color:#eee7dc}.offer-ribbon{position:absolute;left:14px;top:14px;background:#21142f;color:#fff;border-radius:999px;padding:.42rem .7rem;font-size:.72rem;font-weight:900;box-shadow:0 8px 22px rgba(20,12,30,.18);z-index:3}.old-price{text-decoration:line-through;color:#9a909d;margin-right:5px}
.skill-strip-section{background:#21142f;color:#fff}.skill-strip-head{max-width:770px}.skill-strip-head h2{font-size:clamp(2.2rem,4vw,3.8rem);font-weight:800;line-height:1;margin:9px 0 15px}.skill-strip-head p{color:#bdb3c8}.skill-course-card{display:block;background:#2c1b3d;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;color:#fff;height:100%;transition:.25s}.skill-course-card:hover{transform:translateY(-5px);color:#fff;border-color:rgba(255,199,56,.45)}.skill-course-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.skill-course-card div{padding:18px}.skill-course-card div>span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#f4b728;font-weight:800}.skill-course-card h5{margin:5px 0 7px;font-weight:800}.skill-course-card small{color:#b6acbf}
.process-dark{background:#120c1a;color:#fff}.process-card{position:relative;min-height:235px;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:25px;background:rgba(255,255,255,.035)}.process-card>span{position:absolute;right:20px;top:18px;font:800 2.2rem Manrope;color:rgba(255,255,255,.08)}.process-card>i{font-size:1.8rem;color:#f4b728}.process-card h5{margin:22px 0 8px;font-size:1.2rem}.process-card p{color:#aaa0b3;margin:0}.about-band{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;padding:48px;border-radius:32px;background:#fff8e7;border:1px solid #f0dfb9}.about-band h2{font-size:clamp(2rem,3.5vw,3.3rem);font-weight:800;margin:9px 0 15px}.about-band p{color:#75684e}.about-points{display:grid;gap:12px;align-content:center}.about-points div{display:flex;gap:10px;align-items:center;background:#fff;padding:13px 15px;border-radius:14px;font-weight:700}.about-points i{color:#b77900}

/* School hub */
.schoolhub-hero{padding:80px 0;background:linear-gradient(125deg,var(--purple-950),#3b226b 70%,#593994);color:#fff;overflow:hidden}.school-kicker{background:rgba(255,255,255,.1);color:#d9c9ff;border:1px solid rgba(255,255,255,.1)}.schoolhub-hero h1{font-size:clamp(3.1rem,5.7vw,5.8rem);line-height:.92;font-weight:800;letter-spacing:-.065em;margin:20px 0}.schoolhub-hero h1 span{color:#f8c238}.schoolhub-hero p{max-width:680px;color:#c8bdd8;font-size:1.08rem}.btn-school-primary,.btn-school-outline{border-radius:999px;padding:.9rem 1.3rem;font-weight:800}.btn-school-primary{background:#f1b92e;color:#21132e;border:0}.btn-school-primary:hover{background:#ffc943;color:#21132e}.btn-school-outline{border:1px solid rgba(255,255,255,.25);color:#fff}.btn-school-outline:hover{background:#fff;color:#241539}.school-visual{position:relative;min-height:430px}.school-board{position:absolute;inset:30px 5px 30px 35px;border-radius:30px;background:#fff;color:#25153a;padding:30px;box-shadow:0 30px 70px rgba(9,5,19,.35);transform:rotate(2deg)}.board-badge{display:inline-flex;background:#f2eafe;color:#4c287f;border-radius:999px;padding:.42rem .7rem;font-size:.75rem;font-weight:900}.board-row{display:flex;justify-content:space-between;align-items:center;padding:20px 4px;border-bottom:1px solid #eee8f4}.board-row span{font-weight:800}.board-row b{font-size:.8rem;color:#766987}.school-float{position:absolute;background:#f5bd31;color:#26163a;border-radius:999px;padding:.68rem .9rem;font-weight:800;box-shadow:0 16px 35px rgba(0,0,0,.2)}.school-float.one{left:0;top:7px}.school-float.two{right:0;bottom:10px;background:#fff}
.class-picker-section{background:#fff;border-bottom:1px solid #eee9f2;padding:22px 0}.class-picker-label{text-align:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#6d617a;margin-bottom:12px}.class-picker{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.class-picker a{width:76px;text-align:center;padding:.55rem .4rem;border:1px solid #e6dfec;border-radius:999px;font-size:.78rem;font-weight:800;color:#4c3d5f;background:#faf8fc}.class-picker a:hover{background:var(--purple-800);color:#fff;border-color:var(--purple-800)}
.section-kicker.purple{color:var(--purple-700)}.section-kicker.purple:before{background:#f0b52e}.school-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.school-category-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border:1px solid #e8e0ef;border-radius:24px;padding:24px;background:#fff;color:#28183b;box-shadow:0 12px 35px rgba(38,22,56,.06);transition:.25s}.school-category-card:hover{transform:translateY(-5px);color:#28183b;box-shadow:0 20px 45px rgba(38,22,56,.12)}.school-category-card>i{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:#f2e9fd;color:#5a2f91;font-size:1.4rem}.school-category-card div>span{font-size:.7rem;color:#9a8ca8;font-weight:900}.school-category-card h3{margin:2px 0 3px;font-size:1.3rem}.school-category-card p{margin:0;font-size:.82rem;color:#7a6f84}.school-category-card>strong{font-size:2rem;color:#c78b0b}.school-soft{background:#f8f5fb}.btn-school-outline-dark{border:1px solid #4c2b76;color:#4c2b76;border-radius:999px;padding:.72rem 1rem;font-weight:800}.btn-school-outline-dark:hover{background:#4c2b76;color:#fff}
.school-product-card{display:block;height:100%;background:#fff;border:1px solid #e9e1ef;border-radius:23px;overflow:hidden;color:#241633;box-shadow:0 10px 30px rgba(31,18,46,.05);transition:.25s}.school-product-card:hover{transform:translateY(-5px);color:#241633;box-shadow:0 20px 45px rgba(31,18,46,.1)}.school-product-media{position:relative;aspect-ratio:16/10;background:#efe8f5;overflow:hidden}.school-product-media img{width:100%;height:100%;object-fit:cover}.school-product-media span{position:absolute;top:13px;left:13px;background:#f2b932;color:#241633;border-radius:999px;padding:.4rem .65rem;font-size:.72rem;font-weight:900}.school-product-body{padding:21px}.school-product-meta{display:flex;justify-content:space-between;gap:10px;color:#785e8c;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.school-product-body h4{font-size:1.2rem;margin:9px 0}.school-product-body p{color:#786f7f;font-size:.88rem;min-height:46px}.school-product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:17px;border-top:1px solid #eee8f2;padding-top:16px}.school-product-footer strong{font-size:1.2rem}.school-product-footer>span{font-size:.82rem;font-weight:800;color:#5a2f91}.empty-pro{padding:32px;border:1px dashed #d9cede;border-radius:20px;text-align:center;color:#81748c;background:rgba(255,255,255,.55)}.school-cta{background:#f3b72a}.school-cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px;background:#241439;color:#fff;border-radius:30px;padding:42px}.school-cta-box>div>span{color:#f1bd36;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.school-cta-box h2{font-size:clamp(2rem,3.4vw,3.2rem);margin:7px 0 10px}.school-cta-box p{color:#bdb2c7;margin:0}

@media(max-width:991px){.gateway-grid{grid-template-columns:1fr}.gateway-card{min-height:440px}.hub-collage{min-height:460px}.about-band{grid-template-columns:1fr}.school-category-grid{grid-template-columns:1fr}.school-visual{min-height:390px}.school-cta-box{align-items:flex-start;flex-direction:column}.winner-run-label{display:none}}
@media(max-width:767px){.gateway-hero{padding:52px 0 38px}.gateway-intro{margin-bottom:30px}.gateway-card{min-height:400px;padding:24px;border-radius:26px}.gateway-icon{margin:26px 0 20px}.gateway-proof{gap:12px 18px;justify-content:flex-start}.skillhub-hero,.schoolhub-hero{padding:56px 0}.hub-collage{min-height:390px}.hub-mini-stats{gap:18px}.winner-run-item{min-width:285px}.about-band{padding:28px}.school-board{inset:20px 5px 25px 10px;padding:22px}.school-visual{min-height:350px}.board-row{padding:16px 2px}.board-row b{font-size:.7rem}.class-picker{justify-content:flex-start}.school-cta-box{padding:28px}.v2-navbar .brand-wrap img{height:48px}}
@media(max-width:575px){.gateway-intro h1{font-size:2.8rem}.gateway-card{min-height:430px}.gateway-copy h2{font-size:2.25rem}.hub-collage{min-height:330px}.shot-4{display:none}.shot-3{width:48%}.hub-sticker{bottom:27%;font-size:.75rem}.schoolhub-hero h1,.skillhub-hero h1{font-size:3.05rem}.school-product-meta{flex-direction:column;gap:2px}.school-float.two{right:3px}.winner-track{animation-duration:24s}}
/* =========================================================
   21SKILLADDA - PROFESSIONAL TEAM PAGE
========================================================= */

.team-page-hero {
    position: relative;
    padding: 75px 0 85px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 20%, rgba(244, 190, 32, .20), transparent 28%),
        radial-gradient(circle at 10% 80%, rgba(45, 126, 247, .08), transparent 28%),
        linear-gradient(135deg, #f8f9ff 0%, #ffffff 48%, #fffaf0 100%);
    border-bottom: 1px solid #eceef5;
}

.team-page-hero::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(71, 39, 128, .05);
    right: -120px;
    top: -150px;
}

.team-page-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(242, 183, 5, .08);
    left: -90px;
    bottom: -120px;
}

.team-page-hero .container {
    position: relative;
    z-index: 2;
}

.team-page-hero .page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #7b8190;
}

.team-page-hero .page-breadcrumb a {
    color: #51378f;
    font-weight: 700;
}

.team-page-hero .page-breadcrumb i {
    font-size: 11px;
}

.team-hero-content {
    max-width: 760px;
}

.team-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff4cc;
    color: #8e6600;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 18px;
    border: 1px solid #f6e2a1;
}

.team-hero-content h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -2.2px;
    font-weight: 900;
    color: #17152b;
    margin-bottom: 20px;
}

.team-hero-content h1 span {
    color: #543596;
}

.team-hero-content p {
    max-width: 680px;
    font-size: 18px;
    line-height: 1.8;
    color: #6f7382;
    margin: 0;
}


/* =========================================================
   TEAM SECTION
========================================================= */

.team-section {
    padding: 90px 0 100px;
    background: #ffffff;
}

.team-section-head {
    max-width: 690px;
    margin: 0 auto 52px;
}

.team-section-head > span {
    color: #b37d00;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.team-section-head h2 {
    color: #17152b;
    font-size: clamp(32px, 4vw, 45px);
    font-weight: 900;
    letter-spacing: -1.4px;
    margin: 8px 0 13px;
}

.team-section-head p {
    color: #7b7f8d;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   TEAM MEMBER CARD
========================================================= */

.member-card {
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #ececf2;
    border-radius: 24px;
    overflow: hidden;
    transition: all .35s ease;
    box-shadow:
        0 5px 15px rgba(20, 24, 45, .03),
        0 18px 40px rgba(20, 24, 45, .05);
}

.member-card:hover {
    transform: translateY(-9px);
    border-color: rgba(82, 53, 151, .18);
    box-shadow:
        0 12px 25px rgba(20, 24, 45, .08),
        0 25px 55px rgba(82, 53, 151, .10);
}


/* PHOTO */

.member-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    background: #f1f2f7;
}

.member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .5s ease;
}

.member-card:hover .member-photo {
    transform: scale(1.045);
}

.member-photo-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgba(20, 18, 38, .25),
            transparent
        );
}


/* PROFILE ICON */

.member-social {
    position: absolute;
    right: 16px;
    bottom: 16px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;
    background: #51388f;

    border: 3px solid rgba(255, 255, 255, .85);

    box-shadow: 0 8px 18px rgba(22, 18, 45, .20);

    transform: translateY(4px);

    transition: all .3s ease;
}

.member-social:hover {
    color: #1b1733;
    background: #f4bf27;
    transform: translateY(0);
}


/* MEMBER INFORMATION */

.member-content {
    padding: 24px 22px 27px;
    text-align: center;
}

.member-content h3 {
    font-size: 20px;
    font-weight: 900;
    color: #1c1930;
    margin: 0 0 6px;
    letter-spacing: -.35px;
}

.member-designation {
    display: inline-block;

    color: #543596;

    font-size: 13px;
    font-weight: 800;

    background: #f3effd;

    padding: 6px 12px;
    border-radius: 50px;

    margin-bottom: 13px;
}

.member-content p {
    color: #777c89;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}


/* =========================================================
   EMPTY TEAM
========================================================= */

.team-empty-state {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;

    padding: 60px 30px;

    background: #fafafe;
    border: 1px dashed #d9d7e5;
    border-radius: 24px;
}

.team-empty-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #efeafb;
    color: #543596;

    font-size: 28px;
}

.team-empty-state h3 {
    color: #1c1930;
    font-weight: 900;
}

.team-empty-state p {
    color: #767b89;
    margin: 0;
}


/* =========================================================
   TEAM CTA
========================================================= */

.team-cta-section {
    padding: 0 0 90px;
    background: #ffffff;
}

.team-cta {
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding: 45px 50px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #211842 0%,
            #4d318b 60%,
            #6544aa 100%
        );

    color: #ffffff;
}

.team-cta::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    right: -80px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(244, 190, 32, .16);
}

.team-cta > * {
    position: relative;
    z-index: 2;
}

.team-cta span {
    color: #f4c229;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.team-cta h2 {
    max-width: 680px;

    margin: 9px 0 0;

    color: #ffffff;

    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: -.8px;
}

.team-cta-btn {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    background: #f4bf27;
    color: #211842;

    padding: 15px 22px;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 900;

    transition: .3s;
}

.team-cta-btn:hover {
    background: #ffffff;
    color: #4c3187;
    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .team-page-hero {
        padding: 60px 0;
    }

    .team-section {
        padding: 70px 0;
    }

    .team-cta {
        padding: 35px;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {

    .team-page-hero {
        padding: 50px 0;
    }

    .team-hero-content h1 {
        letter-spacing: -1.4px;
    }

    .team-section {
        padding: 60px 0;
    }

    .member-card {
        max-width: 360px;
        margin: 0 auto;
    }

    .team-cta {
        padding: 30px 24px;
        border-radius: 22px;
    }

    .team-cta-btn {
        width: 100%;
        justify-content: center;
    }
}