/* Shape dividers fully hidden — they fought with the page flow */
.intl-shape,
.intl-shape--top,
.intl-shape--bottom,
.tkx-quiz__wave,
.tkx-quiz__wave--top,
.tkx-quiz__wave--bottom{ display:none !important; }
/* =========================================================================
   1. DESIGN TOKENS — same language as course_info
   ========================================================================= */
:root {
    --gold-300:   #fcd34d;
    --gold-400:   #ffd34a;
    --gold-500:   #ffc218;
    --gold-600:   #f0b400;
    --gold-700:   #c89500;
    --navy-100:   #e0e4f5;
    --navy-200:   #c1c9ea;
    --navy-300:   #8a96d1;
    --navy-400:   #5b67a6;
    --navy-500:   #4154ad;
    --navy-600:   #364782;
    --navy-700:   #2f3968;
    --navy-800:   #26315c;
    --navy-900:   #1c2447;
    --navy-950:   #131932;
    --navy-deep:  #0c1124;
    --ink-white:  #f7f9ff;
    --ink-soft:   rgba(247, 249, 255, .82);
    --ink-muted:  rgba(202, 212, 247, .68);
    --ink-faint:  rgba(202, 212, 247, .42);
    --line:        rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .14);
    --gold-line:   rgba(255, 194, 24, .32);
    --shadow-sm:   0 4px 14px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .15);
    --shadow:      0 14px 36px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .18);
    --shadow-lg:   0 30px 70px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .22);
    --shadow-gold: 0 14px 32px rgb(255 194 24 / 0%), 0 3px 10px rgb(255 194 24 / 50%);
    --t-fast: 200ms cubic-bezier(.4, 0, .2, 1);
    --t:      320ms cubic-bezier(.4, 0, .2, 1);
    --t-slow: 600ms cubic-bezier(.22, .61, .36, 1);
    --ff:         'Estedad', system-ui, sans-serif;
    --ff-display: 'Estedad', system-ui, sans-serif;
    --ff-pinar:   'Pinar', 'Estedad', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:var(--ff);
    color:var(--ink-soft);
    background:var(--navy-deep);
    -webkit-font-smoothing:antialiased;
    line-height:1.7;
    overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(255,194,24,.32); color:var(--ink-white); }

/* Pinar for public home display texts only; body text stays Estedad. */
body.tk-public {
    --ff-display: var(--ff-pinar);
}
body.tk-public .slide-title,
body.tk-public .sec-title,
body.tk-public .intl-title,
body.tk-public .lifted-title,
body.tk-public .hex-title,
body.tk-public .tkx-quiz__title,
body.tk-public .tkx-quiz__final-title,
body.tk-public .course-card__title,
body.tk-public .dom-card__title,
body.tk-public .article-card__title {
    font-family: var(--ff-display);
}
body.tk-public .slide-lead,
body.tk-public .sec-lead,
body.tk-public .section-lead,
body.tk-public .slogan {
    font-family: var(--ff-display);
    font-weight: 500;
}


/* =========================================================================
   2. ATMOSPHERIC BACKGROUND — fixed navy + gold spotlights + grid
   ========================================================================= */
.atmosphere{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
        radial-gradient(900px 600px at 88% 12%, rgba(255,194,24,.14), transparent 65%),
        radial-gradient(700px 500px at 8% 88%, rgba(65,84,173,.26), transparent 60%),
        radial-gradient(500px 400px at 50% 50%, rgba(255,211,74,.04), transparent 70%),
        linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-950) 50%, var(--navy-deep) 100%);
}
.atmosphere::before{
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(ellipse 1200px 800px at 50% 30%, black 30%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 1200px 800px at 50% 30%, black 30%, transparent 70%);
    opacity:.55;
}

.wrap{
    max-width:1280px; margin:0 auto; padding:0 28px; position:relative;
}
@media (max-width:640px){ .wrap{ padding:0 18px; } }

/* =========================================================================
   3. DECORATIVE ARCS — flowing curved lines
   ========================================================================= */
.arc{ position:absolute; pointer-events:none; z-index:0; overflow:visible; }
.arc path{
    fill:none; stroke:url(#arcGold); stroke-width:1.4;
    stroke-linecap:round; opacity:.8;
}
.arc--mirror path{ stroke:url(#arcGoldMirror); }

/* =========================================================================
   4. SITE HEADER — sticky navy with backdrop blur
   ========================================================================= */
.site-header{
    position:sticky; top:0; z-index:100;
    background:
        linear-gradient(180deg, rgba(12,17,36,.85) 0%, rgba(12,17,36,.75) 100%);
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    border-bottom:1px solid rgba(255,194,24,.10);
    box-shadow:0 1px 0 0 rgba(255,255,255,.04) inset,
               0 8px 24px rgba(0,0,0,.20);
}
.site-header::before{
    content:""; position:absolute;
    bottom:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,194,24,0) 15%,
        rgba(255,194,24,.45) 50%,
        rgba(255,194,24,0) 85%,
        transparent 100%);
    pointer-events:none;
}

.topbar{ padding:14px 0 12px; }
.topbar-inner{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.topbar-brand{ display:flex; align-items:center; gap:12px; }

.topbar-menu-btn{
    display:none; width:40px; height:40px; border-radius:12px;
    background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
    color:var(--ink-white); align-items:center; justify-content:center;
    font-size:1.2rem; cursor:pointer; transition:all var(--t-fast);
}
.topbar-menu-btn:hover{
    border-color:var(--gold-line); color:var(--gold-300);
    background:rgba(255,194,24,.06);
}

.brand{ position:relative; }
.brand .logo{
    position:relative; 
    transition:transform var(--t-fast);
}
.brand .logo:hover{ transform:translateY(-1px); }
.brand .logo::before{
    content:""; position:absolute; inset:-8px;
   
    opacity:0; transition:opacity var(--t);
    pointer-events:none; z-index:-1;
}
.brand .logo:hover::before{ opacity:1; }
.brand .logo img{
    height:40px; width:auto;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.30));
}

.topbar-actions{ display:flex; align-items:center; gap:10px; }
.topbar-actions .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 18px; border-radius:999px; font-weight:700; font-size:.88rem;
    transition:all var(--t-fast); cursor:pointer; white-space:nowrap;
}
.btn-guide{
    background:rgba(255,255,255,.04);
    border:1.5px solid var(--line-strong);
    color:var(--ink-white);
    backdrop-filter:blur(8px);
}
.btn-guide:hover{
    transform:translateY(-1px); border-color:var(--gold-line);
    color:var(--gold-300); background:rgba(255,194,24,.06);
}
.btn-account{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500) 50%, var(--gold-600));
    color: #000000;
    border:none;
    box-shadow:var(--shadow-gold);
    position:relative;
    overflow:hidden;
}
.btn-account::before{
    content:""; position:absolute; top:0; bottom:0; left:-85%; width:50%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-22deg); transition:left .85s ease; pointer-events:none;
}
.btn-account:hover{ transform:translateY(-2px); }
.btn-account:hover::before{ left:130%; }
.btn-account i{ font-size:1.05em; }

/* Bottom navigation menu */
.menubar{
    border-top:1px solid rgba(255,255,255,.04);
    padding:6px 0;
    background:rgba(255,255,255,.015);
}
.menubar-inner{ display:flex; align-items:center; }
.nav-menu{
    display:flex; align-items:center; flex-wrap:nowrap;
    gap:4px; overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.nav-menu::-webkit-scrollbar{ display:none; }
.nav-item{
    position:relative;
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 14px; border-radius:10px;
    color:var(--ink-soft); font-weight:600; font-size:.86rem;
    transition:all var(--t-fast); white-space:nowrap;
    border:1px solid transparent;
}
.nav-item::after{
    content:""; position:absolute;
    bottom:2px; left:50%; transform:translateX(-50%);
    width:0; height:2px; border-radius:1px;
    background:linear-gradient(90deg, var(--gold-300), var(--gold-500));
    transition:width var(--t);
}
.nav-item:hover{
    color:var(--gold-300);
    background:rgba(255,194,24,.04);
}
.nav-item:hover::after{ width:24px; }
.nav-item i{ font-size:1.05em; opacity:.85; }

/* Mobile drawer */
.site-drawer{ position:fixed; inset:0; z-index:200; }
.site-drawer[hidden]{ display:none; }
.drawer-backdrop{
    position:absolute; inset:0; background:rgba(7,10,22,.72);
    backdrop-filter:blur(6px);
}
.drawer-panel{
    position:absolute; top:0; right:0; bottom:0; width:min(86%, 360px);
    background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
    border-left:1px solid var(--line);
    padding:24px; overflow-y:auto;
    box-shadow:-30px 0 70px rgba(0,0,0,.55);
    animation:drawerIn .35s var(--t-slow);
}
@keyframes drawerIn{ from{ transform:translateX(20px); opacity:0; } }
.drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.drawer-title{ font-weight:800; color:var(--ink-white); font-size:1rem; }
.drawer-close{
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
    color:var(--ink-white); display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:all var(--t-fast);
}
.drawer-close:hover{ color:var(--gold-300); border-color:var(--gold-line); }
.drawer-nav{ display:flex; flex-direction:column; gap:6px; }
.drawer-link{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-radius:12px;
    background:rgba(255,255,255,.02); border:1px solid var(--line);
    color:var(--ink-soft); font-weight:600; font-size:.92rem;
    transition:all var(--t-fast);
}
.drawer-link:hover{
    color:var(--gold-300); border-color:var(--gold-line);
    background:rgba(255,194,24,.05); transform:translateX(-3px);
}
.drawer-link i{ font-size:1.05em; opacity:.85; }
.drawer-sep{
    border:none; border-top:1px solid var(--line); margin:14px 0 8px;
}

@media (max-width:880px){
    .menubar{ display:none; }
    .topbar-menu-btn{ display:inline-flex; }
    .btn-guide .btn-text,
    .btn-account .btn-text{ display:none; }
    .topbar-actions .btn{padding: 6px 12px;}
    .topbar-actions .btn i{ font-size:1.1em; }
}
@media (max-width:480px){
    .brand .logo img{ height:34px; }
    .topbar{ padding:12px 0 10px; }
}

/* =========================================================================
   5. HERO — slider with luxury layout
   ========================================================================= */
.hero{
    position:relative;
    padding: 30px 0 80px;
    overflow:hidden;
}
.hero__arc{
    top:-30px; left:50%; transform:translateX(-50%);
    width:1400px; height:600px; z-index:0;
    opacity:.30;
}
.hero__arc path{ opacity:.15; }

.hero-slider{ position:relative; z-index:2; }

.slider-viewport{ overflow:hidden; }
.slider-track{
    display:flex;
    direction:ltr;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
.slide{
    flex:0 0 100%; min-width:0;
    direction:rtl;
}

.slide-grid{
    display:grid; grid-template-columns:1.1fr 1fr;
    gap:60px; align-items:center;
}
@media (max-width:980px){
    .slide-grid{ grid-template-columns:1fr; gap:50px; }
    .slide-media{ order:2; }
}

.slide-text{ max-width:640px; }

.kicker{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 18px 8px 14px; border-radius:999px;
    background:rgba(255,194,24,.10); border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.82rem; font-weight:800;
    letter-spacing:.02em; margin-bottom:22px; backdrop-filter:blur(8px);
    animation:rise .7s var(--t-slow) .15s both;
}
.kicker::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:var(--gold-500);
    box-shadow:0 0 0 4px rgba(255,194,24,.22), 0 0 14px rgba(255,194,24,.55);
}

.slide-title{
    font-family:var(--ff-display);
    font-size:clamp(28px, 3.8vw, 52px);
    font-weight:900; line-height:1.35;
    color:var(--ink-white); letter-spacing:-.012em;
    margin:0 0 24px;
    animation:rise .9s var(--t-slow) .25s both;
}
.slide-title em{
    position:relative; font-style:normal;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip:text; background-clip:text;
    color:transparent; white-space:nowrap;
}
.slide-title em::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
    background:linear-gradient(90deg,
        rgba(255,194,24,0) 0%, rgba(255,194,24,.55) 30%,
        rgba(255,194,24,.75) 70%, rgba(255,194,24,0) 100%);
    border-radius:999px;
}

.slide-desc{
    color:var(--ink-muted); font-size:1.02rem; line-height:2;
    max-width:560px; margin:0 0 32px;
    animation:rise 1s var(--t-slow) .35s both;
}
.slide-desc p{ margin:0; }

.slide-actions{
    display:flex; flex-wrap:wrap; gap:14px;
    animation:rise 1s var(--t-slow) .45s both;
}

.hp-btn--primary{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 30px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 50%, var(--gold-600) 100%);
    color: #000000;
    font-weight:800;
    font-size:1rem;
    border:none;
    cursor:pointer;
    box-shadow:var(--shadow-gold);
    transition:transform var(--t), box-shadow var(--t);
}
.hp-btn--primary::before{
    content:""; position:absolute; top:0; bottom:0; left:-85%; width:50%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-22deg); transition:left .85s ease; pointer-events:none;
}
.hp-btn--primary:hover{
    transform:translateY(-3px);
    box-shadow: 0 22px 46px rgb(255 194 24 / 0%), 0 4px 14px rgb(255 194 24 / 44%);
}
.hp-btn--primary:hover::before{ left:130%; }

.hp-btn--ghost,
.hp-btn--secondary{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 28px; border-radius:999px;
    background:rgba(255,255,255,.04); color:var(--ink-white);
    font-weight:700; font-size:1rem;
    border:1.5px solid var(--line-strong);
    backdrop-filter:blur(8px); transition:all var(--t-fast);
}
.hp-btn--ghost:hover,
.hp-btn--secondary:hover{
    transform:translateY(-2px); background:rgba(255,255,255,.08);
    border-color:var(--gold-line); color:var(--gold-300);
}

.hp-btn--navy{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 28px; border-radius:999px;
    background:linear-gradient(135deg, var(--navy-500), var(--navy-700));
    color:var(--ink-white); font-weight:700; font-size:1rem;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 32px rgba(65,84,173,.40);
    transition:all var(--t-fast);
}
.hp-btn--navy:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(65,84,173,.55);
}

/* Hero visuals — slide 1 (showcase) */
.slide-media{ position:relative; }
.hp-visual{
    position:relative; height:520px;
    animation:heroVisualIn 1.2s var(--t-slow) .35s both;
}
@media (max-width:980px){ .hp-visual{ height:440px; } }
@keyframes heroVisualIn{
    from{ opacity:0; transform:translateY(40px); }
    to  { opacity:1; transform:translateY(0); }
}

.hp-visual__orbit{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:460px; height:460px; border-radius:50%;
    border:1px dashed rgba(255,194,24,.18);
    animation:orbit 80s linear infinite;
}
.hp-visual__orbit::before{
    content:""; position:absolute; top:-5px; left:50%;
    transform:translateX(-50%);
    width:10px; height:10px; border-radius:50%;
    background:var(--gold-400);
    box-shadow:0 0 18px rgba(255,194,24,.85);
}
@keyframes orbit{ to{ transform:translate(-50%, -50%) rotate(360deg); } }
@media (max-width:980px){ .hp-visual__orbit{ width:360px; height:360px; } }

/* Centerpiece — certificate seal */
.hp-seal{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%) rotate(-3deg);
    width:min(300px, 80%);
    aspect-ratio:1.05/1; padding:28px 24px;
    border-radius:24px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,211,74,.22), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(65,84,173,.30), transparent 50%),
        linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,194,24,.16),
        inset 0 1px 0 rgba(255,255,255,.08);
    z-index:3;
    animation:sealFloat 8s ease-in-out infinite;
}
@keyframes sealFloat{
    0%,100%{ transform:translate(-50%, -50%) rotate(-3deg); }
    50%    { transform:translate(-50%, -54%) rotate(-3deg); }
}
.hp-seal__inner{
    height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
    text-align:center; position:relative;
}
.hp-seal__star{
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:2rem; box-shadow:var(--shadow-gold);
    margin-bottom:4px;
}
.hp-seal__title{
    font-size:1.3rem; font-weight:900; color:var(--ink-white);
    letter-spacing:.02em;
}
.hp-seal__sub{
    font-size:.85rem; font-weight:600; color:var(--gold-300);
}
.hp-seal__ribbon{
    position:absolute; bottom:-8px; left:50%;
    transform:translateX(-50%);
    width:60%; height:8px; border-radius:4px;
    background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity:.6;
}

/* Floating exam cards */
.hp-exam-card{
    position:absolute; padding:11px 16px; border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line-strong);
    backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    z-index:4;
    display:flex; flex-direction:column; gap:2px;
    min-width:120px;
}
.hp-exam-card__tag{
    font-size:.66rem;
    font-weight:600;
    color:var(--gold-300);
    text-transform:uppercase;
    letter-spacing:.08em;
    text-align: center;
}
.hp-exam-card__name{
    font-size:.95rem;
    font-weight:800;
    color:var(--ink-white);
    font-family:var(--ff-display);
    text-align: center;
}
.hp-exam-card--cissp{ top:14%; right:6%; animation:floatA 6s ease-in-out infinite; }
.hp-exam-card--aws  { top:18%; left:8%;  animation:floatB 7s ease-in-out infinite; }
.hp-exam-card--ccna { bottom:16%; right:10%; animation:floatC 8s ease-in-out infinite; }
.hp-exam-card--cisa { bottom:20%; left:6%;  animation:floatD 7.5s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes floatB{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes floatC{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes floatD{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* Slide 2 visual — quiz preview */
.hp-visual--quiz{
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.hp-visual__arc{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:0; opacity:.18;
}
.hp-quiz{
    position:relative; z-index:2;
    width:min(380px, 92%); padding:22px 22px 18px;
    border-radius:22px;
    background:linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,194,24,.10);
    animation:quizFloat 8s ease-in-out infinite;
}
@keyframes quizFloat{
    0%, 100% { transform:translateY(0); }
    50%      { transform:translateY(-10px); }
}
.hp-quiz__head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
}
.hp-quiz__num{
    font-size:.78rem; font-weight:700; color:var(--ink-muted);
}
.hp-quiz__timer{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:999px;
    background:rgba(255,194,24,.10);
    border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.78rem; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.hp-quiz__progress{
    height:5px; border-radius:3px; overflow:hidden;
    background:rgba(255,255,255,.06); margin-bottom:18px;
}
.hp-quiz__progress-fill{
    width:64%; height:100%;
    background:linear-gradient(90deg, var(--gold-300), var(--gold-500));
    border-radius:3px;
}
.hp-quiz__options{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:8px;
}
.hp-quiz__option{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; border-radius:12px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    color:var(--ink-soft); font-size:.86rem; font-weight:600;
    transition:all var(--t-fast);
    position:relative;
}
.hp-quiz__option-letter{
    width:26px; height:26px; border-radius:8px;
    background:rgba(255,255,255,.06);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:800; color:var(--ink-white);
    flex-shrink:0;
}
.hp-quiz__option-text{ flex:1; }
.hp-quiz__option--selected{
    background:rgba(255,194,24,.08);
    border-color:rgba(255,194,24,.40);
    color:var(--gold-300);
}
.hp-quiz__option--selected .hp-quiz__option-letter{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    box-shadow:0 4px 10px rgba(255,194,24,.30);
}
.hp-quiz__option-check{
    color:var(--gold-300); font-size:1.2rem;
    margin-inline-start:auto;
}

.hp-accent-badge{
    position:absolute; top:-18px; left:-18px;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.2rem;
    box-shadow:var(--shadow-gold);
    animation:badgePulse 3s ease-in-out infinite;
    z-index:3;
}
@keyframes badgePulse{
    0%,100%{ transform:scale(1); box-shadow:0 14px 32px rgba(255,194,24,.30); }
    50%    { transform:scale(1.06); box-shadow:0 18px 40px rgba(255,194,24,.50); }
}

/* Slider dots */
.hero-dots{
    display:flex; justify-content:center; gap:8px;
    margin-top:40px;
}
.hero-dots button,
.hero-dot{
    width:30px; height:5px; border-radius:3px;
    background:rgba(255,255,255,.12); border:none; padding:0;
    cursor:pointer; transition:all var(--t-fast);
}
.hero-dots button.is-active,
.hero-dot.is-active{
    width:46px;
    background:linear-gradient(90deg, var(--gold-300), var(--gold-500));
}

/* Hero feature row */
.hero-features{
    margin-top:50px; padding:24px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.feature-row{
    list-style:none; padding:0; margin:0;
    display:grid; grid-template-columns:repeat(6, 1fr); gap:14px;
}
@media (max-width:1024px){ .feature-row{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .feature-row{ grid-template-columns:repeat(2, 1fr); } }
.feature{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-size:.84rem;
    font-weight:600;
    transition:all var(--t-fast);
}
.feature:hover{
    border-color:var(--gold-line);
    background:rgba(255,194,24,.04);
    color:var(--gold-300);
    transform:translateY(-2px);
}
.feature i{ color:var(--gold-400); }

@keyframes rise{
    from{ opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:translateY(0); }
}

/* =========================================================================
   6. SEARCH CARD — lifted up
   ========================================================================= */
.lifted{ padding:50px 0; position:relative; z-index:5; }
.lifted-card{
    position:relative;
    padding:32px 30px;
    border-radius:24px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong);
    backdrop-filter:blur(14px) saturate(1.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
}
.lifted-card::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(circle at 80% 0%, rgba(255,194,24,.08), transparent 60%),
        radial-gradient(circle at 20% 100%, rgba(65,84,173,.10), transparent 60%);
}
.lifted-head{ position:relative; margin-bottom:22px; text-align:center; }
.lifted-title{
    font-size:clamp(20px, 2.4vw, 28px); font-weight:900;
    color:var(--ink-white); margin:0 0 8px;
    font-family:var(--ff-display);
}
.lifted-sub{
    color:var(--ink-muted); font-size:.92rem; margin:0;
}

.exam-search-form{
    position:relative; display:flex; gap:10px;
    max-width:720px; margin:0 auto;
}
.exam-search-input-wrap{
    flex:1; position:relative;
}
.exam-search-icon{
    position:absolute; right:18px; top:50%;
    transform:translateY(-50%); color:var(--gold-400);
    font-size:1.05rem; pointer-events:none;
}
#examSearchInput{
    width:100%; padding:16px 50px 16px 50px;
    border-radius:14px;
    background:rgba(12,17,36,.55);
    border:1.5px solid var(--line-strong);
    color:var(--ink-white); font-family:inherit;
    font-size:.95rem;
    transition:all var(--t-fast); outline:none;
    direction:ltr; text-align:right;
}
#examSearchInput::placeholder{ color:var(--ink-faint); }
#examSearchInput:focus{
    border-color:var(--gold-line);
    background:rgba(12,17,36,.75);
    box-shadow:0 0 0 4px rgba(255,194,24,.10);
}
.exam-search-clear{
    position:absolute; left:14px; top:50%;
    transform:translateY(-50%);
    width:26px; height:26px; border-radius:50%;
    background:rgba(255,255,255,.08); border:none;
    color:var(--ink-soft); font-size:1rem;
    cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center;
    transition:all var(--t-fast);
}
.exam-search-clear:hover{ background:rgba(255,255,255,.14); }

#examSearchBtn{
    padding:16px 32px; border-radius:14px;
	 font-family:var(--ff);
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500) 50%, var(--gold-600));
    color:var(--navy-900); font-weight:800; font-size:.95rem;
    border:none; cursor:pointer; box-shadow:var(--shadow-gold);
    transition:all var(--t); white-space:nowrap;
}
#examSearchBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 46px rgba(255,194,24,.42);
}
.exam-search-meta,
.exam-search-results{
    margin-top:14px; color:var(--ink-muted);
    font-size:.86rem; text-align:center;
}

@media (max-width:680px){
    .exam-search-form{ flex-direction:column; }
    #examSearchBtn{ padding:14px; }
}

/* =========================================================================
   6.5  EXAM SEARCH RESULTS — premium dark cards
   ========================================================================= */
.exam-search-meta{
    display:flex; align-items:center; justify-content:center;
    gap:6px; min-height:1.4em;
    transition:color var(--t-fast);
}
.exam-search-meta.loading{ color:var(--ink-soft); }
.exam-search-meta.loading::before{
    content:''; width:14px; height:14px; border-radius:50%;
    border:2px solid var(--gold-line); border-top-color:var(--gold-400);
    animation:examSearchSpin .7s linear infinite;
}
.exam-search-meta.ok{ color:var(--gold-400); font-weight:600; }
.exam-search-meta.ok::before{
    content:'✓';
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:rgba(255,194,24,.15);
    color:var(--gold-300);
    font-size:.7rem; font-weight:700; line-height:1;
}
.exam-search-meta.error{ color:#ffb4a8; }
.exam-search-meta.error::before{
    content:'!';
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:rgba(255,180,168,.12);
    color:#ffb4a8;
    font-size:.78rem; font-weight:700; line-height:1;
}
@keyframes examSearchSpin{ to{ transform:rotate(360deg); } }

.exam-search-results{
    margin-top:18px; text-align:right;
}
.exam-search-grid{
    display:flex; flex-direction:column; gap:10px;
    max-width:720px; margin:0 auto;
    animation:examSearchFadeIn .3s ease-out;
}
@keyframes examSearchFadeIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

.exam-search-item{
    position:relative; display:grid;
    grid-template-columns:1fr auto;
    gap:18px; align-items:center;
    padding:16px 18px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    text-decoration:none; color:inherit;
    overflow:hidden;
    transition:transform var(--t-fast), background-color var(--t-fast),
               border-color var(--t-fast);
}
.exam-search-item::before{
    content:''; position:absolute;
    top:0; right:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--gold-300), var(--gold-600));
    transform:scaleY(0); transform-origin:center;
    transition:transform var(--t) cubic-bezier(.4,0,.2,1);
}
.exam-search-item:hover,
.exam-search-item.active,
.exam-search-item:focus-visible{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,194,24,.22);
    transform:translateY(-2px);
    outline:none;
}
.exam-search-item:hover::before,
.exam-search-item.active::before,
.exam-search-item:focus-visible::before{
    transform:scaleY(1);
}

.exam-search-item-mid{ min-width:0; }

.exam-search-title{
    font-size:1rem; font-weight:700;
    color:var(--ink-white);
    margin-bottom:8px; line-height:1.5;
    transition:color var(--t-fast);
}
.exam-search-item:hover .exam-search-title{
    color:var(--gold-300);
}

.exam-search-lines{
    display:flex; flex-direction:column; gap:5px;
    margin-bottom:10px;
}
.exam-search-lines .line{
    display:flex; align-items:center; gap:6px;
    font-size:.78rem; line-height:1.5;
    color:var(--ink-soft);
}
.exam-search-lines .line i{
    font-size:.9rem; color:var(--ink-faint);
    flex-shrink:0;
}
.exam-search-lines .k{ color:var(--ink-faint); }
.exam-search-lines .v{ color:var(--ink-soft); }
.exam-search-lines .v.ltr{
    direction:ltr; font-family:'SF Mono', Menlo, Consolas, monospace;
    font-size:.74rem;
}

.exam-search-pills{
    display:flex; flex-wrap:wrap; gap:6px;
}
.exam-search-pills .pill{
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    color:var(--ink-soft);
    font-size:.72rem; font-weight:500; line-height:1.4;
    white-space:nowrap;
}
.exam-search-pills .pill i{ font-size:.85rem; line-height:1; }
.exam-search-pills .pill-primary{
    background:rgba(255,194,24,.10);
    border-color:rgba(255,194,24,.20);
    color:var(--gold-300);
}

.exam-search-item-right{ flex-shrink:0; }
.exam-search-cta{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    color:var(--ink-soft);
    font-size:.78rem; font-weight:500;
    white-space:nowrap;
    transition:all var(--t-fast);
}
.exam-search-cta i{
    font-size:.9rem; line-height:1;
    transition:transform var(--t-fast);
}
.exam-search-item:hover .exam-search-cta,
.exam-search-item.active .exam-search-cta,
.exam-search-item:focus-visible .exam-search-cta{
    background:rgba(255,194,24,.10);
    border-color:rgba(255,194,24,.32);
    color:var(--gold-300);
    font-weight:600;
}
.exam-search-item:hover .exam-search-cta i{
    transform:translateX(-3px);
}

/* Empty state */
.exam-search-empty{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; padding:32px 20px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    max-width:720px; margin:0 auto;
}
.exam-search-empty .empty-icon{
    width:48px; height:48px; border-radius:50%;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-faint);
    font-size:1.2rem;
    margin-bottom:14px;
}
.exam-search-empty .title{
    font-size:1rem; font-weight:700;
    color:var(--ink-white);
    margin-bottom:6px;
}
.exam-search-empty .sub{
    font-size:.82rem; color:var(--ink-soft);
    line-height:1.6; max-width:420px;
}

/* Responsive: stack CTA below on narrow screens */
@media (max-width:560px){
    .exam-search-item{
        grid-template-columns:1fr;
        gap:12px;
    }
    .exam-search-item-right{
        justify-self:flex-start;
    }
    .exam-search-title{ font-size:.95rem; }
}

/* =========================================================================
   7. SECTION HEAD (shared)
   ========================================================================= */
.sec{
    position:relative; padding:80px 0;
}
.sec-head{
    text-align:center; max-width:760px; margin:0 auto 50px;
}
.sec-kicker{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    background:rgba(255,194,24,.08);
    border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.74rem;
    font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; margin-bottom:16px;
}
.sec-title{
    font-family:var(--ff-display);
    font-size:clamp(24px, 3vw, 38px);
    font-weight:900; line-height:1.4;
    color:var(--ink-white);
    margin:0 0 14px;
}
.sec-title strong,
.sec-title em,
.sec-title span.hl{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip:text; background-clip:text;
    color:transparent; font-style:normal; font-weight:inherit;
}
.sec-desc{
    color:var(--ink-muted); font-size:1rem; line-height:1.95;
    margin:0;
}


/* =========================================================================
   8. SERVICES (4 cards)
   ========================================================================= */
.svc-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-card{
    position:relative;
    padding:28px 24px;
    border-radius:20px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    transition:all var(--t);
    overflow:hidden;
}
.svc-card::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(135deg, rgba(255,194,24,.06), transparent 50%);
    opacity:0; transition:opacity var(--t);
}
.svc-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-line);
    box-shadow:var(--shadow);
}
.svc-card:hover::before{ opacity:1; }
.svc-card__icon{
    width:54px; height:54px; border-radius:14px;
    background:linear-gradient(135deg, var(--navy-500), var(--navy-700));
    color:var(--gold-400);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.5rem;
    border:1px solid rgba(255,194,24,.20);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    margin-bottom:18px;
    transition:all var(--t);
}
.svc-card:hover .svc-card__icon{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    box-shadow:var(--shadow-gold);
}
.svc-card__title{
    font-size:1.1rem; font-weight:800; color:var(--ink-white);
    margin:0 0 10px;
}
.svc-card__desc{
    color:var(--ink-muted); font-size:.88rem;
    line-height:1.85; margin:0 0 18px;
}
.svc-card__link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--gold-300); font-weight:700; font-size:.86rem;
    transition:gap var(--t-fast);
}
.svc-card__link::after{
    content: "←";
    transition:transform var(--t-fast);
}
.svc-card:hover .svc-card__link{ gap:10px; }

/* =========================================================================
   9. INTL SPOTLIGHT — with curved shape dividers
   ========================================================================= */
.intl-spotlight{
    position:relative; padding:60px 0 80px;
}
.intl-shape{
    position:absolute; left:0; right:0; height:50px;
    overflow:hidden; pointer-events:none; line-height:0;
    opacity:.4;
}
.intl-shape svg{ width:100%; height:100%; display:block; }
.intl-shape path{ fill:rgba(255,194,24,.04); }
.intl-shape--top{ top:0; }
.intl-shape--bottom{ bottom:0; transform:rotate(180deg); }

.intl-spotlight-card{
    position:relative; padding:50px 40px;
    border-radius:28px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,194,24,.08), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(65,84,173,.18), transparent 50%),
        linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
}
.intl-spotlight-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.intl-spotlight-grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:50px;
    align-items:center;
}
@media (max-width:980px){
    .intl-spotlight-grid{ grid-template-columns:1fr; gap:40px; }
    .intl-spotlight-card{ padding:36px 26px; }
}

.intl-title{
    font-family:var(--ff-display);
    font-size:clamp(22px, 2.8vw, 34px);
    font-weight:900; color:var(--ink-white);
    line-height:1.5; margin:0 0 18px;
}
.intl-highlight{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.intl-desc{
    color:var(--ink-muted); font-size:1rem; line-height:2;
    margin:0 0 26px;
}
.intl-bullets{
    list-style:none; padding:0; margin:0 0 30px;
    display:flex; flex-direction:column; gap:12px;
}
.intl-bullets li{
    display:flex; align-items:flex-start; gap:10px;
    color:var(--ink-soft); font-size:.92rem; line-height:1.85;
}
.intl-bullets i{
    color:var(--gold-400); font-size:1.15rem; flex-shrink:0;
    margin-top:3px;
}
.intl-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.intl-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:999px;
    font-weight:700; font-size:.92rem;
    transition:all var(--t-fast);
}
.intl-btn--primary{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900); box-shadow:var(--shadow-gold);
}
.intl-btn--primary:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(255,194,24,.40);
}
.intl-btn--ghost{
    background:rgba(255,255,255,.04);
    border:1.5px solid var(--line-strong);
    color:var(--ink-white);
}
.intl-btn--ghost:hover{
    border-color:var(--gold-line);
    color:var(--gold-300);
    background:rgba(255,194,24,.06);
}

.intl-media-frame{
    position:relative;
    border-radius:20px; overflow:hidden;
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow);
    background:rgba(255,255,255,.02);
    aspect-ratio:1.2/1;
}
.intl-media-frame::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,194,24,.08), transparent 50%);
    z-index:1; pointer-events:none;
}
.intl-media-frame img{
    width:100%; height:100%; object-fit:cover;
}

/* =========================================================================
   10. COURSES — two-card layout (gold + navy)
   ========================================================================= */
.hp-courses-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
    margin-bottom:40px;
}
@media (max-width:880px){ .hp-courses-grid{ grid-template-columns:1fr; } }

.course-card{
    position:relative; padding:32px 28px;
    border-radius:24px; overflow:hidden;
    transition:all var(--t);
}
.course-card--gold{
    background:
        radial-gradient(circle at 80% 0%, rgba(255,194,24,.18), transparent 50%),
        linear-gradient(135deg, var(--navy-800), var(--navy-900));
    border:1px solid rgba(255,194,24,.30);
}
.course-card--navy{
    background:
        radial-gradient(circle at 80% 0%, rgba(65,84,173,.30), transparent 50%),
        linear-gradient(135deg, var(--navy-700), var(--navy-900));
    border:1px solid rgba(91,103,166,.40);
}
.course-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, currentColor, transparent);
    color:var(--gold-500);
    opacity:.6;
}
.course-card--navy::before{ color:var(--navy-300); opacity:.5; }
.course-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.course-card__head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px;
}
.course-card__icon{
    width:52px; height:52px; border-radius:14px;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.4rem; box-shadow:var(--shadow-gold);
}
.course-card--navy .course-card__icon{
    background:linear-gradient(135deg, var(--navy-300), var(--navy-500));
    color:var(--ink-white);
    box-shadow:0 12px 28px rgba(65,84,173,.40);
}
.course-card__pill{
    padding:5px 12px; border-radius:999px;
    background:rgba(255,194,24,.10);
    border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.74rem; font-weight:700;
}
.course-card--navy .course-card__pill{
    background:rgba(91,103,166,.18);
    border-color:rgba(91,103,166,.45);
    color:var(--navy-200);
}
.course-card__title{
    font-size:1.2rem; font-weight:800; color:var(--ink-white);
    line-height:1.55; margin:0 0 12px;
    font-family:var(--ff-display);
}
.course-card__desc{
    color:var(--ink-muted); font-size:.92rem;
    line-height:1.95; margin:0 0 20px;
}
.course-card__list{
    list-style:none; padding:0; margin:0 0 26px;
    display:flex; flex-direction:column; gap:10px;
}
.course-card__list li{
    display:flex; align-items:flex-start; gap:9px;
    color:var(--ink-soft); font-size:.88rem; line-height:1.75;
}
.course-card__list i{
    color:var(--gold-400); font-size:1.05rem; flex-shrink:0;
    margin-top:2px;
}
.course-card--navy .course-card__list i{ color:var(--navy-200); }
.course-card__foot{ display:flex; flex-wrap:wrap; gap:10px; }
.course-card__foot .hp-btn--primary,
.course-card__foot .hp-btn--navy,
.course-card__foot .hp-btn--secondary{
    padding:13px 22px; font-size:.88rem;
}

/* Feature pills */
.hp-courses-features{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.hp-feature-pill{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px; border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong);
    color:var(--ink-soft); font-size:.84rem; font-weight:600;
    transition:all var(--t-fast);
}
.hp-feature-pill:hover{
    border-color:var(--gold-line); color:var(--gold-300);
    background:rgba(255,194,24,.05);
}
.hp-feature-pill i{ color:var(--gold-400); }

/* =========================================================================
   11. DOMAIN CARDS (6 grid)
   ========================================================================= */
.dom-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
@media (max-width:980px){ .dom-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .dom-grid{ grid-template-columns:1fr; } }

.dom-card{
    position:relative;
    padding:28px 22px;
    border-radius:20px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    transition:all var(--t);
    overflow:hidden;
}
.dom-card::after{
    content:""; position:absolute; top:0; right:0; bottom:0;
    width:3px;
    background:linear-gradient(180deg, var(--gold-500), transparent);
    transform:scaleY(0); transform-origin:top;
    transition:transform var(--t);
}
.dom-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold-line);
    background:rgba(255,194,24,.04);
    box-shadow:var(--shadow);
}
.dom-card:hover::after{ transform:scaleY(1); }

.dom-card__icon{
    width:54px; height:54px; border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong);
    color:var(--gold-400);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin-bottom:16px;
    transition:all var(--t);
}
.dom-card:hover .dom-card__icon{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    border-color:transparent;
    box-shadow:var(--shadow-gold);
}
.dom-card__label{
    font-size:.74rem; font-weight:700; color:var(--gold-300);
    text-transform:uppercase; letter-spacing:.08em;
    margin-bottom:6px;
}
.dom-card__title{
    font-size:1.05rem; font-weight:800; color:var(--ink-white);
    line-height:1.5; margin:0 0 10px;
    font-family:var(--ff-display);
}
.dom-card__text{
    color:var(--ink-muted); font-size:.86rem;
    line-height:1.85; margin:0 0 16px;
}
.dom-card__link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--gold-300); font-weight:700; font-size:.84rem;
}
.dom-card__link::after{content: "←";transition:transform var(--t-fast);}
.dom-card:hover .dom-card__link::after{ transform:translateX(-3px); }

/* =========================================================================
   12. FEATURED EXAMS — horizontal carousel
   ========================================================================= */
.hex-card{ position:relative; }
.hex-viewport{ overflow:hidden; }
.hex-track{
    display:flex; gap:18px;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    padding:6px 0;
}
.hex-item{
    flex:0 0 calc(25% - 14px); min-width:0;
    padding:22px 20px; border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    transition:all var(--t);
    display:flex; flex-direction:column; gap:12px;
    position:relative;
    text-align:center;
}
@media (max-width:1024px){ .hex-item{ flex:0 0 calc(33.333% - 12px); } }
@media (max-width:760px){ .hex-item{ flex:0 0 calc(50% - 9px); } }
@media (max-width:480px){ .hex-item{ flex:0 0 80%; } }

.hex-item:hover{
    transform:translateY(-4px); border-color:var(--gold-line);
    background:rgba(255,194,24,.04); box-shadow:var(--shadow);
}
.hex-thumb{
    width:80px; height:80px; border-radius:18px;
    margin:0 auto;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line-strong);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.hex-thumb img{
    width:100%; height:100%; object-fit:contain; padding:8px;
}
.hex-thumb-ph{ color:var(--ink-faint); font-size:1.6rem; }
.hex-top{ display:flex; justify-content:center; }
.hex-badge{
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:999px;
    background:rgba(34,197,94,.10);
    border:1px solid rgba(34,197,94,.32);
    color:#86efac; font-size:.74rem; font-weight:700;
}
.hex-name{
    font-size:.98rem; font-weight:800; color:var(--ink-white);
    line-height:1.4; min-height:2.8em;
    display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.hex-lines{ font-size:.78rem; color:var(--ink-muted); }
.hex-line .v.ltr{ direction:ltr; display:inline-block; }
.hex-cta{
    margin-top:auto;
    padding:9px 16px; border-radius:10px;
    background:rgba(255,194,24,.10);
    border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.82rem; font-weight:700;
    transition:all var(--t-fast);
}
.hex-item:hover .hex-cta{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900); border-color:transparent;
}

.hex-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:rgba(12,17,36,.78); backdrop-filter:blur(10px);
    border:1px solid var(--line-strong);
    color:var(--ink-white); font-size:1.2rem;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:5;
    transition:all var(--t-fast);
    box-shadow:var(--shadow);
}
.hex-arrow:hover{
    border-color:var(--gold-line); color:var(--gold-300);
    background:rgba(255,194,24,.10);
}
.hex-prev{ left:-12px; }
.hex-next{ right:-12px; }
@media (max-width:680px){
    .hex-prev{ left:-4px; }
    .hex-next{ right:-4px; }
}

.hex-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    margin-bottom:30px;
}
.hex-title{
    font-family:var(--ff-display); font-size:clamp(22px, 2.6vw, 32px);
    font-weight:900; color:var(--ink-white); margin:0 0 8px;
}
.hex-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; border-radius:999px;
    background:rgba(255,194,24,.08);
    border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.82rem; font-weight:700;
}

/* =========================================================================
   13. INTL PROOF — 4 reasons grid
   ========================================================================= */
.proof-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
@media (max-width:980px){ .proof-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .proof-grid{ grid-template-columns:1fr; } }

.proof-card{
    position:relative;
    padding:30px 24px;
    border-radius:20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border:1px solid var(--line);
    transition:all var(--t);
    text-align:center;
}
.proof-card:hover{
    transform:translateY(-4px); border-color:var(--gold-line);
    box-shadow:var(--shadow);
}
.proof-card__icon{
    width:64px; height:64px; border-radius:50%;
    margin:0 auto 18px;
    background:linear-gradient(135deg, var(--navy-500), var(--navy-700));
    color:var(--gold-400);
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem;
    border:1px solid var(--gold-line);
    box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.proof-card__title{
    font-size:1rem; font-weight:800; color:var(--ink-white);
    margin:0 0 10px;
}
.proof-card__text{
    color:var(--ink-muted); font-size:.86rem;
    line-height:1.85; margin:0;
}


/* =========================================================================
   14. CAREER SECTION — featured rich layout
   ========================================================================= */
.career{
    position:relative; padding:80px 0;
    overflow:hidden;
}
.career__decor{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
/* Single, subtle gold spotlight — no fat blurs, no hard circles */
.career__glow{
    position:absolute; border-radius:50%;
    filter:blur(120px); opacity:.18;
    pointer-events:none;
}
.career__glow--1{
    width:520px; height:520px; top:-10%; right:-8%;
    background:rgba(255,194,24,.32);
}
.career__glow--2{
    width:600px; height:600px; bottom:-20%; left:-10%;
    background:rgba(65,84,173,.30);
}
/* Removed the curves entirely — they fought with the flow */
.career__curve{ display:none; }

.career__head{ position:relative; z-index:1; text-align:center;
    max-width:760px; margin:0 auto 50px;
}
.career__grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.4fr 1fr; gap:24px;
}
@media (max-width:980px){ .career__grid{ grid-template-columns:1fr; } }

.career-card{
    position:relative; padding:32px 28px;
    border-radius:24px; overflow:hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--line-strong);
    transition:all var(--t);
}
.career-card--big{
    background:
        radial-gradient(circle at 80% 0%, rgba(255,194,24,.12), transparent 50%),
        linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%);
    border-color:var(--gold-line);
}
.career-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.career-card__top{
    display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.career-card__icon{
    width:50px; height:50px; border-radius:14px;
    background:linear-gradient(135deg, var(--navy-500), var(--navy-700));
    color:var(--gold-400);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.4rem; flex-shrink:0;
    border:1px solid var(--gold-line);
}
.career-card__icon--gold{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900); border-color:transparent;
    box-shadow:var(--shadow-gold);
}
.career-card__icon--green{
    background:linear-gradient(135deg, #4ade80, #22c55e);
    color:#fff; border-color:transparent;
    box-shadow:0 12px 28px rgba(34,197,94,.30);
}
.career-card__h{
    font-size:1.1rem; font-weight:800; color:var(--ink-white);
    margin:0; line-height:1.4;
}
.career-card__p{
    color:var(--ink-muted); font-size:.92rem; line-height:1.95;
    margin:0 0 16px;
}
.career-card__img{
    margin-top:20px; border-radius:16px; overflow:hidden;
    border:1px solid var(--line);
    max-width:340px; margin-inline:auto;
    background:rgba(255,255,255,.02);
}
.career-card__img img{
    width:100%;
    height:auto;
    max-height: 256px;
    object-fit:contain;
    display:block;
    padding:12px;
}
.career-mini{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:10px;
}
.career-mini li{
    display:flex; align-items:flex-start; gap:9px;
    color:var(--ink-soft); font-size:.88rem; line-height:1.75;
}
.career-mini i{ color:var(--gold-400); flex-shrink:0; margin-top:3px; }

.career-side{
    display:flex; flex-direction:column; gap:20px;
}

/* =========================================================================
   15. ROADMAP — vertical timeline
   ========================================================================= */
.roadmap-timeline{
    position:relative; max-width:780px; margin:0 auto;
    padding:0 0 0 0;
}
.roadmap-timeline::before{
    content:""; position:absolute;
    top:0; bottom:0; right:30px; width:2px;
    background:linear-gradient(180deg,
        rgba(255,194,24,.0), rgba(255,194,24,.4), rgba(255,194,24,.0));
}
@media (max-width:560px){
    .roadmap-timeline::before{ right:20px; }
}

.step{
    position:relative; display:flex; align-items:flex-start; gap:20px;
    padding-bottom:30px; padding-right:80px;
}
@media (max-width:560px){ .step{ padding-right:60px; } }
.step:last-child{ padding-bottom:0; }

.step-dot{
    position:absolute; right:8px; top:0;
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.15rem; font-weight:800;
    box-shadow:var(--shadow-gold), 0 0 0 6px rgba(12,17,36,.95);
    z-index:1;
}
@media (max-width:560px){
    .step-dot{ right:-2px; width:42px; height:42px; font-size:1rem; }
}

.step-card{
    flex:1;
    padding:20px 22px; border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    transition:all var(--t);
}
.step-card:hover{
    transform:translateX(-4px);
    border-color:var(--gold-line);
    background:rgba(255,194,24,.04);
    box-shadow:var(--shadow);
}
.step-card .h{
    font-size:1.02rem; font-weight:800; color:var(--ink-white);
    margin:0 0 8px;
}
.step-card .p{
    color:var(--ink-muted); font-size:.9rem; line-height:1.95;
    margin:0;
}

/* =========================================================================
   16. ARTICLES GRID
   ========================================================================= */
.article-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
    margin-bottom:40px;
}
@media (max-width:980px){ .article-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .article-grid{ grid-template-columns:1fr; } }

.article-card{
    position:relative;
    border-radius:18px; overflow:hidden;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    transition:all var(--t);
    display:flex; flex-direction:column;
}
.article-card:hover{
    transform:translateY(-4px); border-color:var(--gold-line);
    box-shadow:var(--shadow);
}
.article-card__cover{
    position:relative; aspect-ratio:16/10;
    background:linear-gradient(135deg, var(--navy-800), var(--navy-900));
    overflow:hidden;
}
.article-card__cover img{
    width:100%; height:100%; object-fit:cover;
    transition:transform var(--t-slow);
}
.article-card:hover .article-card__cover img{ transform:scale(1.06); }
.article-card__cover-placeholder{
    width:100%; height:100%; display:flex;
    align-items:center; justify-content:center;
    color:rgba(255,255,255,.20); font-size:3rem;
}
.article-card__category{
    position:absolute; top:14px; right:14px;
    padding:5px 12px; border-radius:999px;
    background:rgba(12,17,36,.78); backdrop-filter:blur(10px);
    border:1px solid var(--gold-line);
    color:var(--gold-300); font-size:.74rem; font-weight:700;
    z-index:2;
}
.article-card__body{
    padding:22px 20px; display:flex; flex-direction:column;
    flex:1; gap:12px;
}
.article-card__title{
    font-size:1rem; font-weight:800; color:var(--ink-white);
    line-height:1.55; margin:0;
    font-family:var(--ff-display);
    display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.article-card__excerpt{
    color:var(--ink-muted); font-size:.86rem;
    line-height:1.85; margin:0; flex:1;
    display:-webkit-box; -webkit-line-clamp:3;
    -webkit-box-orient:vertical; overflow:hidden;
}
.article-card__meta{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding-top:12px;
    border-top:1px solid var(--line);
    color:var(--ink-faint); font-size:.78rem; font-weight:600;
}
.article-card__cta{
    display:inline-flex; align-items:center; gap:5px;
    color:var(--gold-300);
}

.articles__more{
    text-align:center; margin-top:30px;
}
.articles__more .hp-btn--secondary{ display:inline-flex; }

/* =========================================================================
   17. QUICK QUIZ DEMO SECTION
   ========================================================================= */
.tkx-quiz{
    position:relative; padding:80px 0;
    overflow:hidden;
}
.tkx-quiz__wave{
    position:absolute; left:0; right:0; height:60px;
    overflow:hidden; pointer-events:none; line-height:0;
    opacity:.45;
}
.tkx-quiz__wave svg{ width:100%; height:100%; display:block; }
.tkx-quiz__wave path{ fill:rgba(255,194,24,.05); }
.tkx-quiz__wave--top{ top:0; }
.tkx-quiz__wave--bottom{ bottom:0; transform:rotate(180deg); }

.tkx-quiz__grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:50px;
    align-items:center;
}
@media (max-width:980px){
    .tkx-quiz__grid{ grid-template-columns:1fr; gap:40px; }
    .tkx-quiz__art{ order:2; }
}

.tkx-quiz__title{
    font-family:var(--ff-display);
    font-size:clamp(22px, 2.8vw, 34px);
    font-weight:900; color:var(--ink-white);
    line-height:1.4; margin:0 0 12px;
}
.tkx-quiz__desc{
    color:var(--ink-muted); font-size:.96rem; line-height:1.95;
    margin:0 0 30px;
}

.tkx-quiz__card{
    position:relative;
    padding:26px;
    border-radius:22px;
    background:linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
}
.tkx-quiz__cardGlow{
    position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(circle at 80% 0%, rgba(255,194,24,.08), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(65,84,173,.18), transparent 50%);
}

.tkx-quiz__meta{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px; position:relative;
}
.tkx-quiz__metaLeft{ display:flex; gap:14px; }
.tkx-mini{
    display:flex; flex-direction:column; gap:2px;
}
.tkx-mini__label{
    font-size:.7rem; color:var(--ink-faint); font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
}
.tkx-mini__value{
    font-size:1.05rem; font-weight:800; color:var(--gold-300);
    font-variant-numeric:tabular-nums;
}

.tkx-quiz__progress{
    position:relative;
    height:6px; border-radius:3px; overflow:hidden;
    background:rgba(255,255,255,.06); margin-bottom:18px;
}
.tkx-quiz__progressBar{
    display:block; width:20%; height:100%;
    background:linear-gradient(90deg, var(--gold-300), var(--gold-500));
    transition:width .4s ease;
}

.tkx-quiz__qwrap{ position:relative; margin-bottom:18px; }
.tkx-quiz__qrow{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
}
.tkx-quiz__qnum{
    font-size:.78rem; font-weight:700; color:var(--gold-300);
}
.tkx-quiz__chips{ display:flex; gap:6px; }
.tkx-quiz__q{
    font-size:.95rem; color:var(--ink-white); font-weight:600;
    line-height:1.7; padding:14px 0;
    direction:ltr; text-align:left;
}

.tkx-quiz__opts{
    list-style:none; padding:0; margin:0 0 18px;
    display:flex; flex-direction:column; gap:8px;
    position:relative;
}
.tkx-quiz__opts > * {
    padding:11px 14px; border-radius:12px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    color:var(--ink-soft); font-size:.86rem;
    cursor:pointer; transition:all var(--t-fast);
    direction:ltr; text-align:left;
}
.tkx-quiz__opts > *:hover{
    border-color:var(--gold-line);
    background:rgba(255,194,24,.04);
    color:var(--gold-300);
}

.tkx-quiz__actions{
    display:flex; flex-wrap:wrap; gap:8px;
    position:relative; padding-top:14px;
    border-top:1px solid var(--line);
}
.tkx-btn{
    padding:10px 18px;
    border-radius:10px;
    font-size:.84rem;
    font-weight:700;
    border:1px solid var(--line-strong);
    background:rgba(255,255,255,.04);
    color:var(--ink-white);
    cursor:pointer;
    transition:all var(--t-fast);
    font-family: var(--ff);
}
.tkx-btn:hover:not(:disabled){
    border-color:var(--gold-line);
    color:var(--gold-300);
}
.tkx-btn:disabled{ opacity:.4; cursor:not-allowed; }
.tkx-btn--primary{
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900); border-color:transparent;
}
.tkx-btn--primary:hover:not(:disabled){
    transform:translateY(-1px); color:var(--navy-900);
    box-shadow:var(--shadow-gold);
}
.tkx-btn--accent{
    background:linear-gradient(135deg, var(--navy-400), var(--navy-600));
    color:var(--ink-white); border-color:transparent;
}

.tkx-quiz__feedback{
    margin-top:14px; padding:12px 14px; border-radius:10px;
    background:rgba(255,194,24,.08);
    border:1px solid var(--gold-line);
    color:var(--ink-soft); font-size:.86rem;
    direction:ltr;
}

.tkx-quiz__art{ position:relative; }
.tkx-quiz__artFrame{
    position:relative; padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow);
    animation:heroVisualIn 1.2s var(--t-slow) .35s both;
}
.tkx-ill{ width:100%; height:auto; display:block; }

/* =========================================================================
   18. SITE FOOTER
   ========================================================================= */
.site-footer{
    position:relative;
    padding:60px 0 30px;
    background:linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-950) 50%, #07091a 100%);
    border-top:1px solid var(--line);
    overflow:hidden;
}
.site-footer::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity:.5;
}

.footer-grid{
    display:grid; grid-template-columns:2fr 1fr; gap:50px;
    margin-bottom:40px;
}
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr; gap:30px; } }

.footer-cols{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:30px;
}
@media (max-width:560px){ .footer-cols{ grid-template-columns:1fr; } }

.footer-col{ }
.footer-title{
    font-size:.92rem; font-weight:800; color:var(--ink-white);
    margin:0 0 16px;
    padding-bottom:10px; border-bottom:1px solid var(--line);
    position:relative;
}
.footer-title::after{
    content:""; position:absolute; bottom:-1px; right:0;
    width:30px; height:2px;
    background:linear-gradient(90deg, var(--gold-500), transparent);
}

.footer-links{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:8px;
}
.footer-links li a{
    color:var(--ink-soft); font-size:.86rem; font-weight:500;
    transition:all var(--t-fast);
    display:inline-block;
}
.footer-links li a:hover{
    color:var(--gold-300); transform:translateX(-3px);
}

.footer-links-social{
    flex-direction:row; flex-wrap:wrap; gap:8px;
}
.footer-links-social li a{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-strong);
    transition:all var(--t-fast);
}
.footer-links-social li a:hover{
    transform:translateY(-2px);
    border-color:var(--gold-line);
    background:rgba(255,194,24,.06);
}
.footer-links-social img{ width:18px; height:18px; }

.footer-aside{
    display:flex; flex-direction:column; gap:14px;
}
.footer-card{
    position:relative;
    padding:18px 20px; border-radius:14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    color:var(--ink-soft);
    transition:all var(--t-fast);
    display:flex; align-items:center; gap:14px;
}
.footer-card:hover{
    border-color:var(--gold-line);
    background:rgba(255,194,24,.04);
    transform:translateX(-3px);
}
.footer-card-arrow{
    position:absolute; top:14px; left:14px;
    color:var(--gold-300);
    opacity:0; transition:all var(--t-fast);
}
.footer-card:hover .footer-card-arrow{ opacity:1; }
.footer-card-text{ flex:1; }
.footer-card-title{
    font-size:.92rem; font-weight:800; color:var(--ink-white);
    margin-bottom:4px;
}
.footer-card-sub{
    font-size:.78rem; color:var(--ink-muted);
}
.footer-card i{
    font-size:1.5rem; color:var(--gold-400);
    flex-shrink:0;
}

.footer-support{
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 0; gap:18px; flex-wrap:wrap;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-bottom:24px;
}
.support-phone{
    font-size:1.6rem;
    font-weight:900;
    color:var(--gold-300);
    /* font-variant-numeric:tabular-nums; */
    letter-spacing:.04em;
}
.support-sub{
    font-size:.82rem; color:var(--ink-muted); font-weight:500;
}
.footer-ticket{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:999px;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color:var(--navy-900) !important; font-weight:800;
    box-shadow:var(--shadow-gold); transition:all var(--t-fast);
    border:none;
}
.footer-ticket:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(255,194,24,.40);
    color:var(--navy-900) !important;
}

.footer-bottom{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    padding-top:18px; border-top:1px solid var(--line);
}
.footer-brand-name{
    font-weight:900; color:var(--ink-white); font-size:.95rem;
    font-family:var(--ff-display);
}
.footer-meta{ display:flex; align-items:center; gap:8px; }
.footer-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--gold-500);
    box-shadow:0 0 10px rgba(255,194,24,.50);
}
.footer-meta .muted{
    color:var(--ink-faint); font-size:.78rem;
}

/* =========================================================================
   19. SCROLL REVEAL HELPER
   ========================================================================= */
.reveal{
    opacity:0; transform:translateY(30px);
    transition:opacity .8s var(--t-slow), transform .8s var(--t-slow);
}
.reveal.is-in{ opacity:1; transform:translateY(0); }



/* =========================================================================
   LUX-LAYER — premium motion + glassmorphism + ornamental SVGs
   These rules layer ON TOP of base styles to elevate perceived quality.
   ========================================================================= */

/* Smoother, more cinematic entrance ease */
:root{
    --t-cinema: 900ms cubic-bezier(.16, 1, .3, 1);
    --t-spring: 700ms cubic-bezier(.34, 1.56, .64, 1);
}

/* Better global typography — slightly tighter, more refined */
.slide-title,
.sec-title,
.intl-title,
.hex-title,
.tkx-quiz__title,
.career-card__h{
    text-wrap:balance;
}

/* ---- Stagger reveal for grids ---- */
.svc-grid > .reveal,
.dom-grid > .reveal,
.proof-grid > .reveal,
.article-grid > .reveal,
.career__grid .reveal,
.hp-courses-grid > .reveal{
    transition-delay:0ms;
}
.svc-grid > .reveal.is-in:nth-child(1),
.dom-grid > .reveal.is-in:nth-child(1),
.proof-grid > .reveal.is-in:nth-child(1),
.article-grid > .reveal.is-in:nth-child(1),
.hp-courses-grid > .reveal.is-in:nth-child(1){ transition-delay:60ms; }

.svc-grid > .reveal.is-in:nth-child(2),
.dom-grid > .reveal.is-in:nth-child(2),
.proof-grid > .reveal.is-in:nth-child(2),
.article-grid > .reveal.is-in:nth-child(2),
.hp-courses-grid > .reveal.is-in:nth-child(2){ transition-delay:140ms; }

.svc-grid > .reveal.is-in:nth-child(3),
.dom-grid > .reveal.is-in:nth-child(3),
.proof-grid > .reveal.is-in:nth-child(3),
.article-grid > .reveal.is-in:nth-child(3){ transition-delay:220ms; }

.svc-grid > .reveal.is-in:nth-child(4),
.dom-grid > .reveal.is-in:nth-child(4),
.proof-grid > .reveal.is-in:nth-child(4){ transition-delay:300ms; }

.dom-grid > .reveal.is-in:nth-child(5){ transition-delay:380ms; }
.dom-grid > .reveal.is-in:nth-child(6){ transition-delay:460ms; }

.step.reveal{ transition-delay:0ms; }
.step.reveal.is-in:nth-child(1){ transition-delay:80ms; }
.step.reveal.is-in:nth-child(2){ transition-delay:200ms; }
.step.reveal.is-in:nth-child(3){ transition-delay:320ms; }
.step.reveal.is-in:nth-child(4){ transition-delay:440ms; }
.step.reveal.is-in:nth-child(5){ transition-delay:560ms; }

/* ---- Shimmer on gradient text ---- */
.slide-title em,
.intl-highlight,
.sec-title strong,
.sec-title em,
.sec-title span.hl{
    background:linear-gradient(115deg,
        var(--gold-300) 0%,
        var(--gold-500) 25%,
        #fff7d3 40%,
        var(--gold-500) 55%,
        var(--gold-300) 100%);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    animation:shimmerText 5s linear infinite;
}
@keyframes shimmerText{
    0%  { background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}

/* ---- Animated gold border ring around the hero seal ---- */
.hp-seal{
    isolation:isolate;
}
.hp-seal::after{
    content:"";
    position:absolute; inset:-3px;
    border-radius:26px;
    background:conic-gradient(from 0deg,
        rgba(255,194,24,0) 0deg,
        rgba(255,194,24,.7) 60deg,
        rgba(255,255,255,.95) 90deg,
        rgba(255,194,24,.7) 120deg,
        rgba(255,194,24,0) 180deg,
        rgba(255,194,24,0) 360deg);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    padding:1.5px;
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:rotateRing 8s linear infinite;
    pointer-events:none;
    z-index:-1;
    opacity:.85;
}
@keyframes rotateRing{
    to{ transform:rotate(360deg); }
}

/* ---- Tilt-on-hover for big cards ---- */
.svc-card,
.dom-card,
.proof-card,
.career-card,
.article-card,
.course-card,
.hex-item{
    transform-style:preserve-3d;
    will-change:transform;
}

/* ---- Cursor spotlight on cards ---- */
.svc-card,
.dom-card,
.proof-card,
.career-card,
.article-card,
.course-card,
.step-card,
.hex-item{
    --mx:50%;
    --my:50%;
    position:relative;
}
.svc-card::after,
.dom-card::before,
.proof-card::after,
.career-card::after,
.article-card::after,
.step-card::after,
.hex-item::after{
    content:""; position:absolute; inset:0;
    border-radius:inherit; pointer-events:none;
    background:radial-gradient(360px circle at var(--mx) var(--my),
        rgba(255,194,24,.12), transparent 40%);
    opacity:0;
    transition:opacity .35s ease;
    z-index:1;
}
.svc-card:hover::after,
.dom-card:hover::before,
.proof-card:hover::after,
.career-card:hover::after,
.article-card:hover::after,
.step-card:hover::after,
.hex-item:hover::after{ opacity:1; }
.svc-card > *,
.dom-card > *,
.proof-card > *,
.career-card > *,
.article-card > *,
.step-card > *,
.hex-item > *{ position:relative; z-index:2; }

/* ---- Magnetic feel — primary CTA glows when hovered ---- */
.hp-btn--primary,
.intl-btn--primary,
.btn-account,
#examSearchBtn,
.footer-ticket{
    position:relative;
}
.hp-btn--primary::after,
.intl-btn--primary::after,
.btn-account::after,
#examSearchBtn::after,
.footer-ticket::after{
    content:""; position:absolute; inset:-6px;
    border-radius:inherit;
    background:radial-gradient(circle at center,
        rgba(255,194,24,.45), transparent 70%);
    opacity:0; pointer-events:none;
    transition:opacity .4s ease;
    z-index:-1; filter:blur(14px);
}
.hp-btn--primary:hover::after,
.intl-btn--primary:hover::after,
.btn-account:hover::after,
#examSearchBtn:hover::after,
.footer-ticket:hover::after{ opacity:1; }

/* ---- Section ornament (gold flourish divider) ---- */
.sec-ornament{
    display:flex; justify-content:center;
    margin:0 auto 30px;
    width:160px; opacity:.85;
}
.sec-ornament svg{ width:100%; height:auto; overflow:visible; }
.sec-ornament .om-line{
    stroke:url(#omGold); stroke-width:1.4; fill:none;
    stroke-linecap:round;
    stroke-dasharray:200; stroke-dashoffset:200;
}
.sec-ornament.is-in .om-line{
    animation:drawLine 1.4s var(--t-cinema) forwards;
}
.sec-ornament .om-dot{
    fill:var(--gold-500);
    transform-origin:center; transform-box:fill-box;
    opacity:0;
}
.sec-ornament.is-in .om-dot{
    animation:dotPop .5s var(--t-spring) .8s forwards;
}
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
@keyframes dotPop{
    0%  { opacity:0; transform:scale(0); }
    100%{ opacity:1; transform:scale(1); }
}

/* ---- Refined hero typography (smaller, more elegant) ---- */
.slide-title{
    font-size: clamp(34px, 3.8vw, 48px) !important;
    line-height:1.4 !important;
    letter-spacing:-.01em !important;
    margin-bottom:20px !important;
}
.slide-desc{
    font-size:.94rem;
    line-height:1.95;
}

/* ---- Hero stats row (3 mini stats) ---- */
.hero-stats{
    display:flex; gap:30px; flex-wrap:wrap;
    margin-top:36px; padding-top:30px;
    border-top:1px solid var(--line);
    animation:rise 1s var(--t-cinema) .65s both;
}
.hero-stat{
    display:flex; flex-direction:column; gap:4px;
}
.hero-stat__num{
    font-family:var(--ff-display);
    font-size:clamp(22px, 2.4vw, 32px);
    font-weight:900;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    line-height: 1.2;
}
.hero-stat__label{
    font-size:.78rem; color:var(--ink-muted); font-weight:600;
}
.hero-stat__num::after{ content:"+"; color:var(--gold-300); }
.hero-stat--no-plus .hero-stat__num::after{ content:""; }

/* ---- Refined section padding ---- */
.sec{ padding:90px 0; }
@media (max-width:768px){
    .sec{ padding:60px 0; }
    .hero{ padding:40px 0 60px; }
}

/* ---- Premium card backgrounds (multi-layer depth) ---- */
.svc-card,
.dom-card,
.proof-card,
.article-card{
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
        rgba(12,17,36,.30);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* ---- Animated scroll indicator dot at bottom of hero ---- */
.hero-scroll-cue{
    position:absolute;
    left:50%;
    bottom: 31px;
    transform:translateX(-50%);
    width:24px;
    height:38px;
    border:1.5px solid var(--gold-line);
    border-radius:14px;
    z-index:3;
    pointer-events:none;
    opacity:.6;
    display: none;
}
.hero-scroll-cue::before{
    content:""; position:absolute;
    top:6px; left:50%; transform:translateX(-50%);
    width:3px; height:8px; border-radius:2px;
    background:var(--gold-400);
    animation:scrollCue 1.6s ease-in-out infinite;
}
@keyframes scrollCue{
    0%   { transform:translate(-50%, 0);    opacity:1; }
    100% { transform:translate(-50%, 14px); opacity:0; }
}

/* ---- Slight 3D tilt for hero-seal cards ---- */
.hp-seal{ perspective:1000px; }
.hp-seal__inner{
    transition:transform var(--t-cinema);
}
.hp-seal:hover .hp-seal__inner{
    transform:translateZ(20px);
}

/* ---- Refined exam cards (background depth) ---- */
.hp-exam-card{
    background:linear-gradient(135deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.04) 100%);
    transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.hp-exam-card:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 16px 36px rgba(0,0,0,.45),
               0 0 0 1px rgba(255,194,24,.30);
}

/* ---- Voucher card subtle pattern overlay ---- */
.hp-seal::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:
        repeating-linear-gradient(45deg,
            rgba(255,194,24,.05) 0,
            rgba(255,194,24,.05) 1px,
            transparent 1px,
            transparent 16px),
        radial-gradient(ellipse at top right,
            rgba(255,211,74,.10),
            transparent 70%);
    pointer-events:none;
    opacity:.7;
}

/* ---- Lifted card: extra elegance ---- */
.lifted-card{
    background:
        radial-gradient(circle at 80% 0%, rgba(255,194,24,.10), transparent 50%),
        radial-gradient(circle at 20% 100%, rgba(65,84,173,.18), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--gold-line);
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px rgba(255,194,24,.10),
        inset 0 1px 0 rgba(255,255,255,.10);
}
.lifted-card::after{
    content:""; position:absolute; top:0; left:50%;
    transform:translateX(-50%);
    width:140px; height:2px;
    background:linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

/* ---- Section bridge (gold dot+line between major sections) ---- */
.sec-bridge{
    display:flex; align-items:center; justify-content:center;
    gap:14px; padding:30px 0;
    color:var(--gold-line);
    pointer-events:none;
}
.sec-bridge__line{
    flex:1; height:1px; max-width:200px;
    background:linear-gradient(90deg, transparent, currentColor, transparent);
}
.sec-bridge__dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--gold-500);
    box-shadow:0 0 12px rgba(255,194,24,.55), 0 0 0 4px rgba(255,194,24,.10);
}

/* ---- Better quiz styling — make it feel premium ---- */
.tkx-quiz__opts > * {
    position:relative;
    padding:13px 16px !important;
    transition:all var(--t) !important;
    overflow:hidden;
}
.tkx-quiz__opts > *::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg,
        rgba(255,194,24,.10) 0%,
        rgba(255,194,24,0) 50%);
    opacity:0; transition:opacity var(--t);
    pointer-events:none;
}
.tkx-quiz__opts > *:hover::before{ opacity:1; }
.tkx-quiz__opts > *.is-selected{
    border-color:var(--gold-line) !important;
    background:rgba(255,194,24,.10) !important;
    color:var(--gold-300) !important;
    box-shadow:0 6px 16px rgba(255,194,24,.20),
               inset 0 0 0 1px rgba(255,194,24,.30) !important;
}
.tkx-quiz__opts > *.is-correct{
    border-color:rgba(34,197,94,.45) !important;
    background:rgba(34,197,94,.10) !important;
    color:#86efac !important;
    box-shadow:0 6px 16px rgba(34,197,94,.20) !important;
}
.tkx-quiz__opts > *.is-wrong{
    border-color:rgba(239,68,68,.45) !important;
    background:rgba(239,68,68,.10) !important;
    color:#fca5a5 !important;
    box-shadow:0 6px 16px rgba(239,68,68,.20) !important;
}
.tkx-quiz__opts > *.is-disabled{
    pointer-events:none;
    opacity:.55;
}
.tkx-quiz__feedback{
    margin-top:14px;
    display:flex; align-items:flex-start; gap:10px;
    padding:14px 16px; border-radius:12px;
    font-size:.88rem; line-height:1.85;
    background:rgba(255,194,24,.08);
    border:1px solid var(--gold-line);
    color:var(--ink-soft);
    direction:rtl; text-align:right;
    animation:rise .4s var(--t) both;
}
.tkx-quiz__feedback--correct{
    background:rgba(34,197,94,.10);
    border-color:rgba(34,197,94,.32);
    color:#a7f3d0;
}
.tkx-quiz__feedback--wrong{
    background:rgba(239,68,68,.08);
    border-color:rgba(239,68,68,.30);
    color:#fda4af;
}
.tkx-quiz__feedback i{
    font-size:1.2rem; flex-shrink:0; margin-top:2px;
}
.tkx-quiz__feedback strong{
    display:block; margin-bottom:4px;
    font-size:.92rem; font-weight:800;
}
.tkx-quiz__feedback p{ margin:0; opacity:.9; }
.tkx-quiz__feedback code{
    background:rgba(255,255,255,.08);
    padding:1px 8px; border-radius:6px;
    font-family:ui-monospace, monospace;
    font-size:.86em;
}
.tkx-quiz__chips{
    display:flex; gap:6px;
}
.tkx-quiz__tag{
    padding:3px 9px; border-radius:999px;
    background:rgba(91,103,166,.18);
    border:1px solid rgba(91,103,166,.32);
    color:var(--navy-200);
    font-size:.7rem; font-weight:700;
}
.tkx-quiz__final{
    text-align:center; padding:28px 20px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(255,194,24,.10), rgba(255,194,24,.04));
    border:1px solid var(--gold-line);
    color:var(--ink-white);
}
.tkx-quiz__final-emoji{
    font-size:2.6rem; margin-bottom:10px;
}
.tkx-quiz__final-title{
    font-size:1.15rem; font-weight:800; margin-bottom:6px;
    color:var(--ink-white);
}
.tkx-quiz__final-stat{
    font-size:.92rem; color:var(--ink-muted);
    margin-bottom:16px;
}
.tkx-quiz__final-stat strong{
    color:var(--gold-300); font-weight:800;
    font-variant-numeric:tabular-nums;
}

/* ---- Reduced motion guard ---- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}

/* sr-only */
.sr-only{
    position:absolute !important; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
}

/* =========================================================================
   MOBILE OVERFLOW FIXES — keep hero visuals + search card inside the frame
   on narrow phones. Targets ≤600px and ≤400px breakpoints so nothing
   bleeds past the viewport on iPhone 14 Pro / Pixel 7 / similar widths.
   ========================================================================= */

@media (max-width: 600px) {

    /* ----- HERO — tighter padding + contained slide media -------------- */
    .hero {
        padding: 30px 0 40px;
    }

    /* The visual stage was 440px tall with absolutely-positioned children.
       On narrow phones that forced the orbit (360px) and floating cards
       (≥120px each, anchored 6–10% from edges) to spill past the viewport.
       Collapse the stage to a contained, auto-height block. */
    .hp-visual,
    .hp-visual--showcase,
    .hp-visual--quiz {
        height: auto;
        min-height: 300px;
        max-width: 100%;
        padding: 30px 8px;
        margin: 0 auto;
        overflow: visible;
    }

    /* Orbit: smaller circle that fits comfortably inside narrow viewports */
    .hp-visual__orbit {
        width: 240px;
        height: 240px;
    }

    /* Seal: scale down so it fits with cards around it */
    .hp-seal {
        width: min(210px, 78%);
        padding: 18px 16px;
    }
    .hp-seal__star {
        width: 46px;
        height: 46px;
        font-size: 1.4rem;
    }
    .hp-seal__title {
        font-size: 1rem;
    }
    .hp-seal__sub {
        font-size: .72rem;
    }

    /* Floating exam cards: smaller, narrower, pulled in from edges so
       they stay inside the visual stage. */
    .hp-exam-card {
        padding: 7px 11px;
        border-radius: 10px;
        min-width: 0;
    }
    .hp-exam-card__tag {
        font-size: .58rem;
    }
    .hp-exam-card__name {
        font-size: .82rem;
    }
    .hp-exam-card--cissp { top: 4%;     right: 3%; }
    .hp-exam-card--aws   { top: 10%;    left: 3%;  }
    .hp-exam-card--ccna  { bottom: 6%;  right: 5%; }
    .hp-exam-card--cisa  { bottom: 12%; left: 3%;  }

    /* Slide 2 quiz preview: keep card inside the stage */
    .hp-quiz {
        width: min(320px, 92%);
        padding: 18px 16px;
    }
    .hp-quiz__q {
        font-size: .85rem;
    }
    .hp-quiz__option {
        padding: 9px 12px;
        font-size: .8rem;
    }
    .hp-accent-badge {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        top: -14px;
        left: -14px;
    }

    /* ----- HERO STATS: predictable 3-col grid (was flex-wrap, squished) */
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 24px;
        padding-top: 20px;
    }
    .hero-stat {
        min-width: 0;
        gap: 2px;
    }
    .hero-stat__num {
        font-size: 1.3rem;
    }
    .hero-stat__label {
        font-size: .68rem;
        line-height: 1.5;
    }

    /* ----- LIFTED SEARCH CARD: keep input + clear button readable ----- */
    .lifted {
        padding: 24px 0;
    }
    .lifted-card {
        width: 100%;
        max-width: 100%;
        padding: 22px 16px;
        border-radius: 18px;
        margin: 0;
    }
    .lifted-title {
        font-size: 1.05rem;
    }
    .lifted-sub {
        font-size: .82rem;
        line-height: 1.7;
    }

    /* Tighter input padding (was 50px each side — too wide on a 280–340px
       input). Now the placeholder + clear button + search icon all fit
       without overlap. */
    #examSearchInput {
        padding: 14px 40px;
        font-size: .88rem;
    }
    #examSearchInput::placeholder {
        font-size: .82rem;
    }
    .exam-search-icon {
        right: 12px;
        font-size: .95rem;
    }
    .exam-search-clear {
        left: 8px;
        width: 22px;
        height: 22px;
        font-size: .9rem;
    }

    #examSearchBtn {
        font-size: .9rem;
        padding: 13px;
    }
}

/* Very narrow phones (≤400px) — extra-compact tweaks */
@media (max-width: 400px) {
    .hp-visual__orbit {
        width: 210px;
        height: 210px;
    }
    .hp-seal {
        width: min(190px, 75%);
    }
    .hp-exam-card {
        padding: 6px 9px;
    }
    .hp-exam-card__name {
        font-size: .76rem;
    }
    .hp-exam-card__tag {
        font-size: .54rem;
    }
    .hero-stat__num {
        font-size: 1.15rem;
    }
    .hero-stat__label {
        font-size: .62rem;
    }
    /* Even tighter input on tiny screens */
    #examSearchInput {
        padding: 13px 36px;
        font-size: .82rem;
    }
}


.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 340px));
    gap: 24px;

    max-width: 1120px;
    margin: 0 auto 40px;
    padding: 0 24px;

    justify-content: center;
    align-items: start;
}

.article-card {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;

    overflow: hidden;
    border-radius: 24px;

    background: rgba(18, 22, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.article-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0f1328;
}

.article-card__cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    filter:
        brightness(0.72)
        contrast(1.08)
        saturate(0.72)
        sepia(0.12);

    transition: filter 0.25s ease, transform 0.25s ease;
}

/* لایه رنگی هماهنگ با تم سرمه‌ای/طلایی سایت */
.article-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(10, 14, 31, 0.10) 0%,
            rgba(10, 14, 31, 0.38) 100%
        ),
        radial-gradient(
            circle at 80% 15%,
            rgba(255, 211, 77, 0.22),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(15, 19, 40, 0.35),
            rgba(255, 211, 77, 0.08)
        );

    mix-blend-mode: multiply;
}

.article-card:hover .article-card__cover img {
    transform: scale(1.035);
    filter:
        brightness(0.82)
        contrast(1.12)
        saturate(0.85)
        sepia(0.10);
}

.article-card__body {
    padding: 22px 24px 20px;
}

.article-card__title {
    font-size: 1.15rem;
    line-height: 1.8;
}

.article-card__excerpt {
    font-size: 0.92rem;
    line-height: 2;
}
.article-grid {
    grid-template-columns: repeat(3, minmax(0, 310px));
    max-width: 1010px;
}
.article-card {
    max-width: 310px;
}
@media (max-width: 1100px) {
    .article-grid {
        grid-template-columns: repeat(2, minmax(0, 340px));
        max-width: 760px;
    }
}

@media (max-width: 680px) {
    .article-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 390px;
        padding: 0 18px;
    }

    .article-card {
        max-width: 100%;
    }
}

/* =========================================================================
   FEATURED EXAMS — compact poster cards matching exams-list style
   No old logo thumbnail in top-left; top area is code-based only.
   ========================================================================= */
.hex-track{
    align-items:stretch;
}

.hex-item.hex-item--exam-poster{
    flex:0 0 calc(25% - 14px);
    min-width:0;
    padding:0;
    gap:0;
    overflow:hidden;
    min-height:330px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(25,28,48,.96) 0%, rgba(18,20,36,.98) 100%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
    text-align:center;
}

.hex-item.hex-item--exam-poster:hover{
    transform:translateY(-5px);
    border-color:rgba(255,194,24,.48);
    background:linear-gradient(180deg, rgba(31,35,62,.98) 0%, rgba(18,20,36,.98) 100%);
    box-shadow:0 24px 56px rgba(0,0,0,.38), 0 0 0 1px rgba(255,194,24,.14), inset 0 1px 0 rgba(255,255,255,.06);
}

.hex-item--exam-poster .hex-poster{
    position:relative;
    min-height:142px;
    padding:22px 22px 18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:
        linear-gradient(180deg, rgba(43,51,101,.74) 0%, rgba(35,42,84,.70) 100%),
        repeating-linear-gradient(45deg,
            rgba(255,255,255,.040) 0,
            rgba(255,255,255,.040) 1px,
            transparent 1px,
            transparent 22px);
    border-bottom:1px solid rgba(255,194,24,.22);
}

.hex-item--exam-poster .hex-poster::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(260px 140px at 50% -35%, rgba(255,194,24,.12), transparent 70%),
        linear-gradient(90deg, transparent, rgba(255,194,24,.075), transparent);
    opacity:.8;
    pointer-events:none;
}

.hex-item--exam-poster .hex-poster::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg, transparent 0%, rgba(255,194,24,.18) 18%, rgba(255,194,24,.55) 50%, rgba(255,194,24,.18) 82%, transparent 100%);
    pointer-events:none;
}

.hex-item--exam-poster .hex-poster__issuer{
    position:absolute;
    top:18px;
    inset-inline-end:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    min-height:32px;
    padding:6px 12px;
    border-radius:9px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,194,24,.28);
    color:var(--gold-300);
    font-family:var(--ff-display);
    font-weight:900;
    font-size:.78rem;
    letter-spacing:.01em;
    z-index:2;
}

.hex-item--exam-poster .hex-poster__code{
    position:relative;
    z-index:2;
    width:100%;
    color:var(--gold-300);
    font-family:var(--ff-display);
    font-size: clamp(1.65rem, 1.3vw, 2.25rem);
    font-weight:900;
    line-height: 1.35;
    letter-spacing:.01em;
    text-transform:uppercase;
    text-shadow:0 8px 22px rgba(0,0,0,.34);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hex-item--exam-poster .hex-poster__body{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:11px;
    flex:1;
    padding:20px 20px 18px;
    background:linear-gradient(180deg, rgba(21,23,39,.98) 0%, rgba(17,20,35,.98) 100%);
}

.hex-item--exam-poster .hex-name{
    min-height:3em;
    color:var(--ink-white);
    font-family:var(--ff-display);
    font-size:.98rem;
    font-weight:900;
    line-height:1.48;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.hex-item--exam-poster .hex-lines{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    margin-top:0;
}

.hex-item--exam-poster .hex-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:100%;
    padding:5px 11px;
    border-radius:999px;
    background:rgba(255,194,24,.075);
    border:1px solid rgba(255,194,24,.24);
    color:var(--gold-300);
    font-size:.74rem;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hex-item--exam-poster .hex-top{
    justify-content:center;
    margin-top:auto;
}

.hex-item--exam-poster .hex-badge{
    padding:6px 13px;
    border-radius:999px;
    background:rgba(34,197,94,.10);
    border:1px solid rgba(34,197,94,.34);
    color:#a7f3d0;
    font-size:.76rem;
    font-weight:900;
}

.hex-item--exam-poster .hex-cta{
    margin-top:2px;
    padding:11px 16px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600));
    border:0;
    color:#10121f;
    font-size:.86rem;
    font-weight:900;
    box-shadow:0 10px 24px rgba(255,194,24,.22);
}

.hex-item--exam-poster:hover .hex-cta{
    transform:translateY(-1px);
    box-shadow:0 15px 32px rgba(255,194,24,.34);
}

/* Hard-disable the old thumbnail if browser cache or old markup still exists. */
.hex-item--exam-poster .hex-thumb,
.hex-item--exam-poster .hex-thumb img,
.hex-item--exam-poster .hex-thumb-ph,
.hex-item--exam-poster .hex-poster__icon{
    display:none !important;
}

@media (max-width:1024px){
    .hex-item.hex-item--exam-poster{ flex-basis:calc(33.333% - 12px); }
}
@media (max-width:760px){
    .hex-item.hex-item--exam-poster{ flex-basis:calc(50% - 9px); min-height:315px; }
    .hex-item--exam-poster .hex-poster{ min-height:130px; }
    .hex-item--exam-poster .hex-poster__code{ font-size:clamp(1.45rem, 6vw, 2rem); }
}
@media (max-width:480px){
    .hex-item.hex-item--exam-poster{ flex-basis:82%; }
}