/* ==========================================================================
   CertLab Theme — app.css
   Design system + all component styles
   ========================================================================== */

/* ─── Google Fonts fallback (also loaded in layout) ─── */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    /* Palette — EduMall-inspired */
    --cl-blue:       #0071dc;   /* Primary — CTA, links, active */
    --cl-blue-d:     #005ab0;   /* Hover / darkened primary */
    --cl-blue-l:     #4da3ff;   /* Light / tinted */
    --cl-secondary:  #ffc221;   /* Amber accent — badges, highlight */
    --cl-coral:      #f46c5f;   /* Coral — kept for compatibility */
    --cl-coral-l:    rgba(244, 108, 95, 0.12);
    --cl-mint:       #8fe0d3;
    --cl-mint-l:     rgba(143, 224, 211, 0.18);
    --cl-gold:       #f5be6f;
    --cl-gold-l:     rgba(245, 190, 111, 0.16);

    /* Neutrals */
    --cl-ink:        #252525;
    --cl-muted:      #6c757d;
    --cl-border:     #dee2e6;
    --cl-bg:         #f5f5f5;
    --cl-bg-white:   #ffffff;
    --cl-bg-warm:    #fff7f2;
    --cl-surface:    rgba(255, 255, 255, 0.72);
    --cl-surface-s:  rgba(255, 255, 255, 0.92);
    --cl-white:      #ffffff;

    /* Dark palette — EduMall navy */
    --cl-dark:       #031f42;   /* Primary dark — footer, CTA bg */
    --cl-dark-2:     #0a2b5c;
    --cl-dark-3:     #0e3470;
    --cl-dark-navy:  #031f42;   /* Alias for topbar, footer */

    /* Shadows */
    --cl-shadow-sm:  0 4px 16px rgba(15, 23, 36, 0.08);
    --cl-shadow:     0 20px 60px rgba(15, 23, 36, 0.12);
    --cl-shadow-lg:  0 32px 90px rgba(15, 23, 36, 0.18);

    /* Radii */
    --cl-radius-xs:  8px;
    --cl-radius-sm:  14px;
    --cl-radius-md:  20px;
    --cl-radius-lg:  28px;
    --cl-radius-xl:  36px;
    --cl-radius-full: 9999px;

    /* Typography */
    --cl-font-body:  'Be Vietnam Pro', system-ui, sans-serif;
    --cl-font-head:  "Paytone One", sans-serif;
    /* --cl-font-head:  'Outfit', 'Be Vietnam Pro', system-ui, sans-serif; */
    --cl-font-logo:  "Protest Guerrilla", sans-serif;
    --cl-font-display: "Paytone One", sans-serif;
    /* Spacing scale */
    --cl-section-y:     80px;
    --cl-section-y-sm:  48px;

    /* Transitions */
    --cl-ease:       0.22s ease;

    /* Surface off-white (used in sidebar, inputs) */
    --cl-bg-off:     #eef0f3;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--cl-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cl-ink);
    background: var(--cl-bg);
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.cl-shell {
    width: min(1360px, calc(100% - 32px));
    margin: 0 auto;
}
.cl-shell--narrow { max-width: min(1360px, calc(100% - 32px))}
.cl-shell--xs     { max-width: 500px; }

/* ==========================================================================
   4. Typography helpers
   ========================================================================== */
.cl-eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-coral);
}

.cl-heading {
    font-family: var(--cl-font-head);
    font-size: clamp(1.9rem, 3.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.06;
}

.cl-subhead {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cl-muted);
    max-width: 62ch;
    margin-top: 14px;
}

.cl-gradient-text {
    background: linear-gradient(135deg, var(--cl-coral), var(--cl-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--cl-radius-full);
    font-family: var(--cl-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease),
                background var(--cl-ease), border-color var(--cl-ease);
    white-space: nowrap;
}
.cl-btn:hover, .cl-btn:focus-visible { transform: translateY(-2px); }
.cl-btn:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: 3px; }

.cl-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue) 70%, var(--cl-blue-l));
    box-shadow: 0 14px 28px rgba(0, 113, 220, 0.26);
}
.cl-btn--primary:hover { box-shadow: 0 20px 40px rgba(0, 113, 220, 0.36); }

.cl-btn--ghost {
    color: var(--cl-ink);
    background: var(--cl-surface);
    border-color: var(--cl-border);
}
.cl-btn--ghost:hover { background: var(--cl-white); }

.cl-btn--white {
    color: var(--cl-blue-d);
    background: #fff;
    border-color: transparent;
    box-shadow: var(--cl-shadow-sm);
}

.cl-btn--soft {
    color: #b6483d;
    background: var(--cl-coral-l);
    border-color: transparent;
}

.cl-btn--sm  { padding: 10px 18px; font-size: 0.88rem; }
.cl-btn--lg  { padding: 16px 28px; font-size: 1rem; }
.cl-btn--xs  { padding: 7px 14px; font-size: 0.82rem; }

/* ==========================================================================
   6. Pills / kickers
   ========================================================================== */
.cl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-coral-l);
    color: #b6483d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cl-kicker--mint  { background: var(--cl-mint-l);  color: #2a7d71; }
.cl-kicker--gold  { background: var(--cl-gold-l);  color: #8a5e0a; }
.cl-kicker--blue  { background: rgba(0,113,220,.1); color: var(--cl-blue-d); }

.cl-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--cl-radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--cl-border);
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
}
.cl-pill:hover    { background: #fff; color: var(--cl-ink); }
.cl-pill--active  { background: var(--cl-blue); color: #fff; border-color: var(--cl-blue); }

/* ==========================================================================
   7. Brand mark
   ========================================================================== */
.cl-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--cl-ink);
}
.cl-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    font-family: var(--cl-font-head);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 12px 24px rgba(0, 113, 220, 0.26);
    flex-shrink: 0;
}
.cl-brand__title {
    display: block;
    /* font-family: var(--cl-font-head); */
    font-family: var(--cl-font-logo);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cl-brand__sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cl-muted);
}
.cl-brand--sm .cl-brand__mark { width: 36px; height: 36px; font-size: 0.78rem; }
.cl-brand--lg .cl-brand__mark { width: 54px; height: 54px; font-size: 1.05rem; border-radius: 18px; }

/* ==========================================================================
   8. Navigation
   ========================================================================== */
.cl-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* padding: 16px 0 6px; */
    background: rgba(250, 249, 247, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cl-nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    /* border-radius: var(--cl-radius-full);
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.56);
    box-shadow: 0 12px 36px rgba(0, 113, 220, 0.07); */
}

.cl-nav__links {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.cl-nav__link {
    padding: 8px 14px;
    border-radius: var(--cl-radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
}
.cl-nav__link:hover           { color: var(--cl-ink); background: rgba(255,255,255,.8); }
.cl-nav__link--active         { color: var(--cl-blue); background: rgba(0,113,220,.08); }

.cl-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cl-nav__user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cl-muted);
}

.cl-nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--cl-radius-xs);
    background: transparent;
}
.cl-nav__toggle span {
    display: block;
    height: 2px;
    width: 20px;
    background: var(--cl-ink);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ==========================================================================
   9. Exam top bar (exam layout)
   ========================================================================== */
.cl-exambar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--cl-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.cl-exambar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}
.cl-exambar__timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-coral-l);
    color: #b6483d;
    font-weight: 800;
    font-size: 1rem;
}

/* ==========================================================================
   10. Sections
   ========================================================================== */
.cl-section         { padding: 80px 0; }
.cl-section--sm     { padding: 48px 0; }
.cl-section--lg     { padding: 100px 0; }
.cl-section--tinted {
    background: var(--cl-bg);
}
.cl-section--dark {
    background: var(--cl-dark);
    color: #fff;
}
.cl-section--dark .cl-eyebrow { color: var(--cl-mint); }
.cl-section--dark .cl-heading { color: #fff; }
.cl-section--dark .cl-subhead { color: rgba(255,255,255,.55); }

.cl-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cl-section__head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cl-section__head--center .cl-subhead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   11. Hero section — dark navy, professional cert-exam style
   ========================================================================== */
.cl-hero {
    padding: 72px 0 88px;
    background: linear-gradient(135deg, #031f42 0%, #0a2f60 55%, #031f42 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle dot-grid overlay */
.cl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Blue glow blob top-right */
.cl-hero::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -120px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,113,220,.22) 0%, transparent 68%);
    pointer-events: none;
}

.cl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.cl-hero__copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start;}

/* Kicker on dark bg */
.cl-hero .cl-kicker {
    background: rgba(255,194,33,.14);
    color: rgba(255,215,80,.92);
    border: 1px solid rgba(255,194,33,.28);
}

.cl-hero__headline {
    font-family: var(--cl-font-head);
    font-size: clamp(2.6rem, 5.8vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: #fff;
}



/* Gradient accent word stays amber */
.cl-hero .cl-gradient-text {
    background: linear-gradient(135deg, #ffc221 0%, #ff9a3c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cl-hero__lead {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255,255,255,.68);
    max-width: 56ch;
}

.cl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
}

/* Ghost button on dark bg */
.cl-hero .cl-btn--ghost {
    border-color: rgba(255,255,255,.28);
    color: rgba(255,255,255,.88);
}
.cl-hero .cl-btn--ghost:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.5);
    color: #fff;
}

.cl-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

/* ── Hero right: exam-question preview card ── */
.cl-hero__visual { position: relative; z-index: 1; }

.cl-hero__card {
    position: relative;
    padding: 24px 26px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    backdrop-filter: blur(20px);
    animation: clFloat 7s ease-in-out infinite;
}

.cl-hero__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cl-hero__card-qnum {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    letter-spacing: 0.04em;
}

.cl-hero__card-title {
    font-family: var(--cl-font-head);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    color: #fff;
}

.cl-hero__card-question {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,.82);
    margin: 0 0 16px;
}

/* Answer options */
.cl-hero__card-options { display: flex; flex-direction: column; gap: 8px; }

.cl-hero__card-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 0.84rem;
    color: rgba(255,255,255,.7);
    transition: background .15s;
}

.cl-hero__card-opt--correct {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.32);
    color: #86efac;
    font-weight: 600;
}

.cl-hero__card-opt-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    color: rgba(255,255,255,.8);
}

.cl-hero__card-opt--correct .cl-hero__card-opt-letter {
    background: rgba(34,197,94,.25);
    color: #86efac;
}

.cl-hero__card-opt--correct .cl-hero__card-opt-check {
    margin-left: auto;
    color: #4ade80;
    font-size: 0.95rem;
}

.cl-hero__card-meta {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    margin-bottom: 0;
}

.cl-hero__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.cl-hero__card-votes {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    gap: 5px;
}
.cl-hero__card-votes i { color: var(--cl-secondary); }

.cl-hero__card-bars { display: flex; align-items: center; gap: 12px; }
.cl-hero__card-score {
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
}

/* Floating badge */
.cl-hero__floater {
    position: absolute;
    top: -18px;
    right: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 18px;
    border-radius: var(--cl-radius-md);
    background: linear-gradient(135deg, #ffc221, #ff9a3c);
    color: #031f42;
    box-shadow: 0 16px 40px rgba(255,194,33,.35);
    font-size: 0.78rem;
    font-weight: 800;
    z-index: 9;
}
.cl-hero__floater i  { font-size: 1.3rem; margin-bottom: 2px; }
.cl-hero__floater strong { font-size: 1.5rem; font-weight: 800; line-height: 1; }

/* ==========================================================================
   12. Stats bar — dark navy, continuation of hero
   ========================================================================== */
.cl-stats-bar {
    background: #021a38;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 0;
}
.cl-stats-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 0;
}
.cl-stats-bar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 36px;
}
.cl-stats-bar__item i {
    font-size: 1.5rem;
    color: var(--cl-secondary);
    opacity: .85;
}
.cl-stats-bar__item strong {
    font-family: var(--cl-font-head);
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
}
.cl-stats-bar__item span {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cl-stats-bar__divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.08);
}

/* ==========================================================================
   13. Stat pills
   ========================================================================== */
.cl-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--cl-radius-md);
    background: rgba(255,255,255,.8);
    border: 1px solid var(--cl-border);
}
.cl-stat-pill strong {
    font-family: var(--cl-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cl-ink);
}
.cl-stat-pill span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cl-muted);
    line-height: 1.3;
}

/* ==========================================================================
   14. Features grid
   ========================================================================== */
.cl-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cl-feature-card {
    padding: 28px 26px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: var(--cl-surface);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-feature-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); }

.cl-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--cl-radius-sm);
    margin-bottom: 18px;
    font-size: 1.3rem;
}

.cl-feature-card--blue  .cl-feature-card__icon { background: rgba(0,113,220,.12); color: var(--cl-blue); }
.cl-feature-card--coral .cl-feature-card__icon { background: var(--cl-coral-l); color: var(--cl-coral); }
.cl-feature-card--mint  .cl-feature-card__icon { background: var(--cl-mint-l); color: #2a7d71; }
.cl-feature-card--gold  .cl-feature-card__icon { background: var(--cl-gold-l); color: #8a5e0a; }

.cl-feature-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.cl-feature-card__desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--cl-muted);
}

/* ==========================================================================
   15. Certification cards grid
   ========================================================================== */
.cl-certs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.cl-certs-grid--full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cl-cert-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
}
.cl-cert-card:hover { transform: translateY(-6px); box-shadow: var(--cl-shadow); }

.cl-cert-card__thumb {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #f0f6f5);
    border-top-left-radius: var(--cl-radius-xl);
    border-top-right-radius: var(--cl-radius-xl);
}
.cl-cert-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}


.cl-cert-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(0, 113, 220, 0.2);
}

.cl-cert-card__badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(0, 113, 220, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
}
.cl-cert-card:hover .cl-cert-card__badge { opacity: 1; transform: translateY(0); }

.cl-cert-card__sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--cl-radius-full);
    background: rgba(244, 108, 95, 0.94);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(244, 108, 95, 0.24);
    backdrop-filter: blur(6px);
}

/* Color accents on top border */
.cl-cert-card--blue  { border-top: 3px solid var(--cl-blue); }
.cl-cert-card--coral { border-top: 3px solid var(--cl-coral); }
.cl-cert-card--mint  { border-top: 3px solid var(--cl-mint); }
.cl-cert-card--gold  { border-top: 3px solid var(--cl-gold); }

.cl-cert-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #cccccc40;
}

.cl-cert-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.cl-cert-card__desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--cl-muted);
}

.cl-cert-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 26px;
}
.cl-cert-card__price-current {
    color: var(--cl-blue);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}
.cl-cert-card__price-original {
    color: var(--cl-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: line-through;
}
.cl-cert-card__price--free .cl-cert-card__price-current {
    color: #15803d;
    font-size: 0.92rem;
}

.cl-cert-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cl-muted);
    margin-top: auto;
    padding-top: 8px;
}
.cl-cert-card__meta i { color: var(--cl-blue); }

/* ==========================================================================
   15b. Filter bar (practice-exams)
   ========================================================================== */
.cl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.cl-filter-search {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
}
.cl-filter-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.cl-filter-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    font-size: 0.88rem;
    font-family: inherit;
    background: #fff;
    color: var(--cl-ink);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-filter-search input:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.12);
}
.cl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cl-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: var(--cl-radius-full);
    border: 1px solid var(--cl-border);
    background: #fff;
    color: var(--cl-muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--cl-ease), background var(--cl-ease), color var(--cl-ease);
}
.cl-filter-pill:hover {
    border-color: var(--cl-blue);
    color: var(--cl-blue);
}
.cl-filter-pill.is-active {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
}
.cl-cert-card--hidden { display: none; }
.cl-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 0;
    color: var(--cl-muted);
}
.cl-filter-empty i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 12px;
}
.cl-filter-empty p { font-size: 0.95rem; margin: 0; }

/* ==========================================================================
   16. How-it-works steps
   ========================================================================== */
.cl-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.cl-step {
    flex: 1;
    min-width: 200px;
    padding: 28px 24px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: var(--cl-surface);
}

.cl-step__num {
    font-family: var(--cl-font-head);
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(0, 113, 220, 0.15);
    margin-bottom: 14px;
    letter-spacing: -0.06em;
}

.cl-step h3 {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.cl-step p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--cl-muted);
}

.cl-step__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: var(--cl-muted);
    font-size: 1.2rem;
    align-self: center;
}

/* ==========================================================================
   17. CTA section
   ========================================================================== */
.cl-cta {
    padding: 80px 0;
    background: var(--cl-dark);
    position: relative;
    overflow: hidden;
}

.cl-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.cl-cta__headline {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1.05;
    max-width: 14ch;
}

.cl-cta__lead {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,.55);
    max-width: 58ch;
}

.cl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cl-cta__glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.25;
}
.cl-cta__glow--left  { left: -100px; bottom: -100px; background: var(--cl-blue); }
.cl-cta__glow--right { right: -100px; top: -100px;  background: var(--cl-coral); }

/* ==========================================================================
   18. Page heroes
   ========================================================================== */
.cl-page-hero {
    padding: 56px 0 48px;
    background:
        radial-gradient(circle at 80% 20%, rgba(143,224,211,.2), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f5f8ff 60%, var(--cl-bg) 100%);
}

.cl-page-hero--sm  { padding: 40px 0 32px; }

.cl-page-hero--dark {
    background: var(--cl-dark);
    padding: 60px 0 50px;
}

.cl-page-hero--exams {
    background:
        radial-gradient(circle at 10% 90%, rgba(0,113,220,.08), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(244,108,95,.1), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f5f8ff 100%);
}

.cl-page-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cl-page-hero__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(2.4rem, 5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.0;
    color: var(--cl-ink);
    margin: 8px 0;
}
.cl-page-hero__heading--light { color: #fff; }

.cl-page-hero__lead {
    font-size: 1rem;
    color: var(--cl-muted);
}
.cl-page-hero__lead--muted { color: rgba(255,255,255,.55); }

.cl-page-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* ==========================================================================
   19. Marquee
   ========================================================================== */
.cl-marquee {
    overflow: hidden;
    padding: 16px 0;
    background: linear-gradient(135deg, var(--cl-coral), var(--cl-blue));
}
.cl-marquee__track {
    display: flex;
    white-space: nowrap;
    animation: clMarquee 26s linear infinite;
}
.cl-marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.cl-marquee__track span::after {
    content: "·";
    color: var(--cl-coral);
    font-size: 1.2rem;
}

/* ==========================================================================
   20. Featured exam block
   ========================================================================== */
.cl-featured-exam {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 28px 32px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: rgba(255,255,255,.86);
    box-shadow: var(--cl-shadow-sm);
    position: relative;
    flex-wrap: wrap;
}

.cl-featured-exam__badge {
    position: absolute;
    top: -12px;
    left: 28px;
    padding: 5px 14px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-coral), #f08a45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cl-featured-exam__body { flex: 1; min-width: 200px; }

.cl-featured-exam__title {
    font-family: var(--cl-font-head);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin: 6px 0 8px;
}

.cl-featured-exam__desc {
    font-size: 0.9rem;
    color: var(--cl-muted);
    line-height: 1.7;
}

.cl-featured-exam__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cl-muted);
}
.cl-featured-exam__meta i { color: var(--cl-blue); }

/* ==========================================================================
   21. Exam format cards
   ========================================================================== */
.cl-formats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cl-format-card {
    position: relative;
    overflow: hidden;
    padding: 28px 24px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease), background var(--cl-ease);
}
.cl-format-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.12);
    box-shadow: 0 28px 60px rgba(0,0,0,.3);
}

.cl-format-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--cl-radius-sm);
    margin-bottom: 16px;
    font-size: 1.2rem;
}

.cl-format-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--cl-radius-full);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cl-format-card h3 {
    font-family: var(--cl-font-head);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.cl-format-card p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
}

/* body-text wrapper — transparent on desktop, used for flex layout on mobile */
.cl-format-card__body-text { display: contents; }

.cl-format-card--blue  .cl-format-card__icon { background: rgba(109,140,255,.2); color: var(--cl-blue-l); }
.cl-format-card--blue  .cl-format-card__tag  { background: rgba(0,113,220,.2); color: var(--cl-blue-l); }

.cl-format-card--coral .cl-format-card__icon { background: rgba(244,108,95,.15); color: var(--cl-coral); }
.cl-format-card--coral .cl-format-card__tag  { background: rgba(244,108,95,.15); color: var(--cl-coral); }

.cl-format-card--mint  .cl-format-card__icon { background: rgba(143,224,211,.15); color: var(--cl-mint); }
.cl-format-card--mint  .cl-format-card__tag  { background: rgba(143,224,211,.15); color: var(--cl-mint); }

/* ==========================================================================
   22. Filter bar
   ========================================================================== */
.cl-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.cl-filter-bar__label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--cl-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.cl-filter-bar__pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   23. Exam setup card
   ========================================================================== */
.cl-exam-setup-card {
    padding: 36px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    box-shadow: var(--cl-shadow-sm);
}

/* ==========================================================================
   24. Auth page
   ========================================================================== */
.cl-auth-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    padding: 60px 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,113,220,.08), transparent 26%),
        linear-gradient(180deg, #fff 0%, #f5f8ff 100%);
}

.cl-auth-page__brand {
    text-align: center;
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
}

.cl-auth-card {
    background: #fff;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    box-shadow: var(--cl-shadow);
    overflow: hidden;
}

.cl-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--cl-border);
}

.cl-auth-tab {
    flex: 1;
    padding: 16px;
    font-family: var(--cl-font-body);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--cl-muted);
    border: none;
    background: none;
    cursor: pointer;
    transition: color var(--cl-ease), border-bottom var(--cl-ease);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.cl-auth-tab:hover { color: var(--cl-ink); }
.cl-auth-tab--active { color: var(--cl-blue); border-bottom-color: var(--cl-blue); }

.cl-auth-panel { padding: 30px; }
.cl-auth-panel--hidden { display: none; }

.cl-auth-heading {
    font-family: var(--cl-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.cl-auth-sub {
    font-size: 0.9rem;
    color: var(--cl-muted);
    margin-bottom: 24px;
}

.cl-auth-page__back {
    text-align: center;
    margin-top: 20px;
    font-size: 0.88rem;
    font-weight: 700;
}
.cl-auth-page__back a {
    color: var(--cl-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--cl-ease);
}
.cl-auth-page__back a:hover { color: var(--cl-blue); }

/* ==========================================================================
   25. Error page (404)
   ========================================================================== */
.cl-error-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    text-align: center;
}

.cl-error-page__code {
    font-family: var(--cl-font-head);
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 0.85;
    color: rgba(0, 113, 220, 0.1);
    margin-bottom: 16px;
}

.cl-error-page__heading {
    font-family: var(--cl-font-head);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
}

.cl-error-page__lead {
    font-size: 1rem;
    color: var(--cl-muted);
    max-width: 50ch;
    margin: 0 auto 30px;
    line-height: 1.8;
}

.cl-error-page__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   26. Footer
   ========================================================================== */
.cl-footer {
    background: #010f22;
    color: rgba(255,255,255,.6);
    position: relative;
    overflow: hidden;
    padding-top: 40px;
}

.cl-footer::after {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,113,220,.18) 0%, rgba(0,113,220,0) 72%);
    pointer-events: none;
}
.cl-footer__inner {
    padding: 56px 0 32px;
}

.cl-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 24px;
}

.cl-footer__contact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 28px;
}

.cl-footer__contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
    transition: transform var(--cl-ease), background var(--cl-ease), border-color var(--cl-ease);
}

.cl-footer__contact-pill:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.18);
}

.cl-footer__contact-pill--amber {
    background: rgba(255,194,33,.14);
    border-color: rgba(255,194,33,.28);
    color: #ffd97d;
}

.cl-footer__clusters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-content: start;
}

.cl-footer__brand-card {
    position: relative;
    padding: 28px;
    border-radius: var(--cl-radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 48px rgba(0,0,0,.18);
}

.cl-footer__eyebrow {
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.36);
}

.cl-footer__brand .cl-brand {
    margin-bottom: 16px;
    display: inline-flex;
}
.cl-footer__brand .cl-brand__title,
.cl-footer__brand .cl-brand__sub { color: rgba(255,255,255,.7); }

.cl-footer__brand .cl-brand__title {
    font-size: 1.55rem;
    color: #fff;
}

.cl-footer__tagline {
    font-size: 0.88rem;
    line-height: 1.8;
    color: rgba(255,255,255,.4);
    max-width: 42ch;
}

.cl-footer__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.cl-footer__mini-stat {
    padding: 12px 14px;
    border-radius: var(--cl-radius-md);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
}

.cl-footer__mini-stat strong {
    display: block;
    font-family: var(--cl-font-head);
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.cl-footer__mini-stat span {
    display: block;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(255,255,255,.5);
}

.cl-footer__panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px;
    border-radius: var(--cl-radius-lg);
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}

.cl-footer__col { display: flex; flex-direction: column; }

.cl-footer__col--contact {
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.04) 100%);
}

.cl-footer__col h4,
.cl-footer__heading {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.cl-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.cl-footer__col ul li a,
.cl-footer__col a {
    font-size: 0.88rem;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--cl-ease), padding-left var(--cl-ease);
}
.cl-footer__col ul li a:hover,
.cl-footer__col a:hover {
    color: #fff;
    padding-left: 4px;
}

.cl-footer__contact-link {
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.6;
}

.cl-footer__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
}

.cl-footer__icon-wrap svg {
    width: 16px;
    height: 16px;
}

.cl-footer__icon-wrap--email {
    color: var(--cl-secondary);
}

.cl-footer__icon-wrap--fb {
    color: #78a9ff;
}

.cl-footer__bottom {
    font-size: 0.8rem;
    color: rgba(255,255,255,.22);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cl-footer__bottom p { margin: 0; }
.cl-footer__bottom-note {
    color: rgba(255,255,255,.4);
}
.cl-footer__bottom-links {
    display: flex;
    gap: 20px;
}
.cl-footer__bottom-links a {
    color: rgba(255,255,255,.22);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color var(--cl-ease);
}
.cl-footer__bottom-links a:hover { color: rgba(255,255,255,.6); }


/* ==========================================================================
   27. Progress bar
   ========================================================================== */
.cl-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.1);
    overflow: hidden;
}
.cl-progress-bar__fill {
    height: 100%;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(90deg, var(--cl-blue-d), var(--cl-blue));
    transition: width 0.4s ease;
}

/* ==========================================================================
   28. Empty state
   ========================================================================== */
.cl-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--cl-muted);
}
.cl-empty-state i {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.4;
}
.cl-empty-state h3 {
    font-family: var(--cl-font-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cl-ink);
    margin-bottom: 8px;
}
.cl-empty-state p { font-size: 0.9rem; }

/* ==========================================================================
   29. Keyframe animations
   ========================================================================== */
@keyframes clFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-12px); }
}

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

@keyframes clMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================================================
   30. Body variants
   ========================================================================== */
.cl-body { }

.cl-body--exam #cl-footer { display: none; }

/* ==========================================================================
   31. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .cl-hero__grid    { grid-template-columns: 1fr; }
    .cl-hero__visual  { display: none; }
    .cl-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-certs-grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-formats-grid  { grid-template-columns: 1fr; gap: 14px; }
    .cl-footer__top   { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .cl-section       { padding: 48px 0; }
    .cl-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-steps         { flex-direction: column; }
    .cl-step__arrow   { transform: rotate(90deg); }
    .cl-stats-bar__inner   { flex-direction: row; flex-wrap: nowrap; padding: 18px 0; }
    .cl-stats-bar__divider  { display: none; }
    .cl-stats-bar__item     { flex: 1; flex-direction: column; align-items: center;
                               text-align: center; padding: 10px 6px; gap: 3px;
                               border-right: 1px solid rgba(255,255,255,.14); }
    .cl-stats-bar__item:last-child { border-right: none; }
    .cl-stats-bar__item strong { font-size: 1.45rem; }
    .cl-stats-bar__item span   { font-size: 0.68rem; letter-spacing: 0.06em; }
    .cl-footer__col ul li a { font-size: 0.85rem; }

    .cl-nav__links    { display: none; }
    .cl-nav__toggle   { display: flex; }
    .cl-nav__actions  { margin-left: auto; }

    /* Mobile nav open state */
    .cl-nav--open .cl-nav__links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        background: #fff;
        border-radius: var(--cl-radius-lg);
        box-shadow: var(--cl-shadow);
        padding: 16px;
        border: 1px solid var(--cl-border);
    }

    /* Filter bar stacks vertically */
    .cl-filter-bar { flex-direction: column; align-items: flex-start; }

    /* Footer bottom row stacks */
    .cl-footer__bottom { flex-direction: column; align-items: center; text-align: center; }

    /* Featured exam — reduce padding for narrow screens */
    .cl-featured-exam { padding: 28px 16px 20px; }
    .cl-featured-exam__title { font-size: 1.35rem; }

    /* Cert card — compact for 2-col layout */
    .cl-cert-card__thumb   { height: 130px; }
    .cl-cert-card__body    { padding: 14px 14px 16px; gap: 6px; }
    .cl-cert-card__title   { font-size: 0.92rem; }
    .cl-cert-card__desc    { font-size: 0.8rem; line-height: 1.5; }
    .cl-cert-card__price-current { font-size: 0.92rem; }
    .cl-cert-card__price-original { font-size: 0.72rem; }
    .cl-cert-card__meta    { font-size: 0.75rem; gap: 8px; padding-top: 4px; }

    /* Feature card — compact for 2-col layout */
    .cl-feature-card        { padding: 20px 16px; }
    .cl-feature-card__icon  { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 12px; }
    .cl-feature-card__title { font-size: 0.95rem; }
    .cl-feature-card__desc  { font-size: 0.82rem; line-height: 1.6; }

    /* Section head — stack heading + action button */
    .cl-section__head:not(.cl-section__head--center) { flex-direction: column; gap: 12px; }

    /* Hero stat pills — compact */
    .cl-stat-pill         { padding: 8px 12px; }
    .cl-stat-pill strong  { font-size: 1.2rem; }
    .cl-stat-pill span    { font-size: 0.74rem; }

    /* Format cards (training mode) — horizontal row layout on mobile */
    .cl-formats-grid { gap: 10px; }
    .cl-format-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 16px 18px;
        gap: 16px;
    }
    .cl-format-card__icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        margin-bottom: 0;
        font-size: 1.1rem;
        border-radius: var(--cl-radius-xs);
        align-self: center;
    }
    .cl-format-card__body-text { display: block; flex: 1; }
    .cl-format-card__tag   { margin-bottom: 5px; font-size: 0.65rem; }
    .cl-format-card h3     { font-size: 1rem; margin-bottom: 4px; }
    .cl-format-card p      { font-size: 0.82rem; line-height: 1.55; }

}

@media (max-width: 480px) {
    .cl-hero__headline { font-size: 3rem; }
    .cl-heading        { font-size: 1.8rem; }
    .cl-page-hero__heading { font-size: 2.2rem; }
    .cl-cta__headline  { font-size: 2rem; }
    .cl-btn--lg        { padding: 14px 22px; font-size: 0.95rem; }
}

/* ==========================================================================
   32. Mobile — iPhone 12/13/14/15/16/17 (390–430 px)
   ========================================================================== */
@media (max-width: 430px) {

    /* ── Shell ─────────────────────────────────────────────────── */
    .cl-shell,
    .cl-shell--narrow { width: calc(100% - 24px); }

    /* ── Nav ───────────────────────────────────────────────────── */
    .cl-nav { padding: 10px 0 4px; }
    .cl-nav__inner { padding: 8px 12px; gap: 10px; }
    .cl-nav__actions { gap: 6px; }
    .cl-nav__actions .cl-btn--sm { padding: 8px 12px; font-size: 0.8rem; }
    .cl-nav__user { font-size: 0.8rem; max-width: 100px; overflow: hidden;
                    white-space: nowrap; text-overflow: ellipsis; }

    /* ── Page hero ─────────────────────────────────────────────── */
    .cl-page-hero        { padding: 28px 0 20px; }
    .cl-page-hero--sm    { padding: 24px 0 16px; }
    .cl-page-hero__heading { font-size: 1.7rem; margin: 4px 0; }
    .cl-page-hero__lead  { font-size: 0.88rem; }

    /* ── Sections ───────────────────────────────────────────────── */
    .cl-section    { padding: 32px 0; }
    .cl-section--sm { padding: 24px 0; }

    /* ── Cert cards ─────────────────────────────────────────────── */
    .cl-certs-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cl-features-grid { gap: 10px; }
    .cl-cert-card__thumb { height: 100px; }
    .cl-cert-card__desc  { display: none; }
    .cl-cert-card__sale-badge { top: 8px; left: 8px; padding: 5px 8px; font-size: 0.68rem; }
    .cl-cert-card__price { gap: 5px; }
    .cl-cert-card__price-current { font-size: 0.86rem; }

    /* ── Hero lead ──────────────────────────────────────────────── */
    .cl-hero__lead { font-size: 0.9rem; }

    /* ── CTA actions — stack full-width on phone ────────────────── */
    .cl-cta__actions { flex-direction: column; align-items: stretch; }

    /* ── Auth card ──────────────────────────────────────────────── */
    .cl-auth-panel { padding: 20px 16px; }
    .cl-auth-tab   { padding: 13px 8px; font-size: 0.82rem; }

    /* ── Touch targets (iOS minimum 44px) ───────────────────────── */
    .cl-btn { font-size: 0.88rem; padding: 11px 18px; min-height: 44px; }
    .cl-btn--primary { font-size: 0.9rem; }

    /* ── Hero ──────────────────────────────────────────────────── */
    .cl-hero               { padding: 28px 0 36px; }
    .cl-hero__headline     { font-size: 2.6rem; }
    .cl-hero__actions      { flex-direction: column; }
    .cl-hero__actions .cl-btn { width: 100%; }
    .cl-hero__stats        { gap: 8px; }

    /* ── Featured exam ──────────────────────────────────────────── */
    .cl-featured-exam         { padding: 28px 14px 20px; gap: 12px; }
    .cl-featured-exam__title  { font-size: 1.2rem; }
    .cl-featured-exam__meta   { gap: 10px; }

    /* ── Exam setup card ────────────────────────────────────────── */
    .cl-exam-setup-card { padding: 20px 14px; }

    /* ── CTA ────────────────────────────────────────────────────── */
    .cl-cta { padding: 48px 0; }

    /* ── Footer ─────────────────────────────────────────────────── */
    .cl-footer { padding: 36px 0 20px; }

    /* ── Stats bar ──────────────────────────────────────────────── */
    .cl-stats-bar__item strong { font-size: 1.25rem; }
    .cl-stats-bar__item span   { font-size: 0.62rem; }

    /* ── Section heads ──────────────────────────────────────────── */
    .cl-section__head { margin-bottom: 24px; }

    /* ── Dark page hero (Leaderboard) ──────────────────────────── */
    .cl-page-hero--dark { padding: 36px 0 28px; }

    /* ── Exam bar ───────────────────────────────────────────────── */
    .cl-exambar__inner  { gap: 8px; padding: 10px 0; }
    .cl-exambar__timer  { padding: 8px 14px; font-size: 0.88rem; }
    .cl-exambar .cl-brand__title { font-size: 1.3rem; }
    .cl-exambar__exit { display: none; }
}

/* ==========================================================================
   33. Exam runner — single-viewport layout (≤ 768 px)
   ========================================================================== */

/* "Nộp bài" button injected into exambar — hidden on desktop */
.er-mobile-finish {
    display: none;
    background: linear-gradient(135deg, #7f0000, #c62828);
    color: #fff;
    box-shadow: 0 4px 14px rgba(198,40,40,.22);
    border: none;
}
.er-mobile-finish:hover { opacity: .88; }

@media (max-width: 768px) {
    /* Body fills exactly the visible screen — no outer scroll */
    .cl-body--exam {
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Exambar no longer needs sticky — it's the first flex child */
    .cl-body--exam .cl-exambar { flex-shrink: 0; position: relative; top: auto; }
    /* Main fills the rest of the screen */
    .cl-body--exam #cl-main {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    /* Show Nộp bài in the exambar */
    .er-mobile-finish { display: inline-flex; }
    /* Hide Exit button on mobile */
    .cl-exambar__exit { display: none; }
}

/* ==========================================================================
   34. Safe-area insets — iPhone notch / Dynamic Island / home indicator
   Requires viewport-fit=cover in the meta viewport tag.
   ========================================================================== */
@supports (padding: env(safe-area-inset-top)) {
    /* Push nav below the status bar / notch */
    #cl-header {
        padding-top: env(safe-area-inset-top);
    }

    /* Exam layout: exambar absorbs the notch */
    .cl-body--exam .cl-exambar {
        padding-top: env(safe-area-inset-top);
    }

    /* Footer: clear the home-indicator bar at the bottom */
    .cl-footer {
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }

    /* Exam body: prevent question content hiding behind the home indicator */
    .cl-body--exam {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ==========================================================================
   35. Breadcrumb
   ========================================================================== */
.cl-breadcrumb-bar {
    border-bottom: 1px solid var(--cl-border);
    background: var(--cl-bg);
    padding: 10px 0;
}
.cl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cl-breadcrumb__item {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--cl-ease);
}
.cl-breadcrumb__item:hover { color: var(--cl-ink); }
.cl-breadcrumb__item--current { color: var(--cl-ink); pointer-events: none; }
.cl-breadcrumb__sep {
    color: rgba(22,32,46,.2);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   36. Blog — listing layout & hero
   ========================================================================== */
.cl-blog-hero {
    padding: 56px 0 48px;
    background:
        radial-gradient(circle at 80% 10%, rgba(244,108,95,.12), transparent 30%),
        radial-gradient(circle at 10% 80%, rgba(0,113,220,.08), transparent 30%),
        linear-gradient(180deg, #fff8f4 0%, #f5f8ff 60%, var(--cl-bg) 100%);
}
.cl-blog-hero__inner { display: flex; flex-direction: column; gap: 16px; }
.cl-blog-hero__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.0;
    color: var(--cl-ink);
}
.cl-blog-hero__lead {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cl-muted);
    max-width: 62ch;
}
.cl-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
   
}
.cl-blog-layout--full { grid-template-columns: 1fr; }

/* ==========================================================================
   37. Blog — post cards grid
   ========================================================================== */
.cl-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.cl-blog-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-blog-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
}
.cl-blog-card:hover { transform: translateY(-5px); box-shadow: var(--cl-shadow); }
.cl-blog-card__thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
    flex-shrink: 0;
}
.cl-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.cl-blog-card:hover .cl-blog-card__thumb img { transform: scale(1.05); }
.cl-blog-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(0,113,220,.15);
}
.cl-blog-card__category {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-decoration: none;
}
.cl-blog-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-blog-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
}
.cl-blog-card:hover .cl-blog-card__title { color: var(--cl-blue); }
.cl-blog-card__excerpt {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--cl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cl-muted);
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--cl-border);
}
.cl-blog-card__meta i { color: var(--cl-blue); font-size: 0.82rem; }
.cl-blog-card__read {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cl-blue);
    font-size: 0.82rem;
    font-weight: 800;
    margin-top: 4px;
    text-decoration: none;
    transition: gap var(--cl-ease);
}
.cl-blog-card__read:hover { gap: 8px; }

/* ==========================================================================
   38. Blog — featured post card
   ========================================================================== */
.cl-featured-post {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    box-shadow: var(--cl-shadow);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    margin-bottom: 40px;
}
.cl-featured-post:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-lg); }
.cl-featured-post__thumb {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
}
.cl-featured-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.cl-featured-post:hover .cl-featured-post__thumb img { transform: scale(1.04); }
.cl-featured-post__thumb-placeholder {
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(0,113,220,.1);
}
.cl-featured-post__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-coral), #f08a45);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cl-featured-post__body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}
.cl-featured-post__category {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.1);
    color: var(--cl-blue-d);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
    text-decoration: none;
}
.cl-featured-post__title {
    font-family: var(--cl-font-head);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.25;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
}
.cl-featured-post:hover .cl-featured-post__title { color: var(--cl-blue); }
.cl-featured-post__excerpt {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--cl-muted);
}
.cl-featured-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cl-muted);
    padding-top: 8px;
    border-top: 1px solid var(--cl-border);
}
.cl-featured-post__meta i { color: var(--cl-blue); }

/* ==========================================================================
   39. Blog — sidebar
   ========================================================================== */
.cl-blog-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cl-sidebar-widget {
    padding: 24px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
}
.cl-sidebar-widget__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 16px;
}
.cl-sidebar-search { position: relative; }
.cl-sidebar-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.cl-sidebar-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--cl-bg);
    color: var(--cl-ink);
    outline: none;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
    box-sizing: border-box;
}
.cl-sidebar-search input:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
}
.cl-sidebar-cats { display: flex; flex-direction: column; gap: 6px; }
.cl-sidebar-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: var(--cl-radius-xs);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
}
.cl-sidebar-cat:hover { background: rgba(0,113,220,.06); color: var(--cl-blue); }
.cl-sidebar-cat--active { background: rgba(0,113,220,.1); color: var(--cl-blue-d); font-weight: 700; }
.cl-sidebar-cat__count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-bg);
    color: var(--cl-muted);
}
.cl-sidebar-recent { display: flex; flex-direction: column; gap: 14px; }
.cl-sidebar-recent-item {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: var(--cl-ink);
    transition: opacity var(--cl-ease);
}
.cl-sidebar-recent-item:hover { opacity: 0.72; }
.cl-sidebar-recent-item__thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--cl-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
}
.cl-sidebar-recent-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-sidebar-recent-item__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: rgba(0,113,220,.2);
}
.cl-sidebar-recent-item__title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-sidebar-recent-item__date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cl-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   40. Blog — article hero (detail page)
   ========================================================================== */
.cl-article-hero {
    padding: 52px 0 0;
    background:
        radial-gradient(circle at 80% 10%, rgba(244,108,95,.1), transparent 30%),
        linear-gradient(180deg, #fff 0%, var(--cl-bg) 100%);
}
.cl-article-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
}
.cl-article-hero__category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: rgba(0,113,220,.1);
    color: var(--cl-blue-d);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    transition: background var(--cl-ease);
}
.cl-article-hero__category:hover { background: rgba(0,113,220,.18); }
.cl-article-hero__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--cl-ink);
}
.cl-article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cl-muted);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cl-border);
}
.cl-article-hero__meta i { color: var(--cl-blue); }
.cl-article-hero__author {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-article-hero__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.cl-article-featured-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 0 0 var(--cl-radius-xl) var(--cl-radius-xl);
    display: block;
}

/* ==========================================================================
   41. Blog — article two-column layout with TOC
   ========================================================================== */
.cl-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 56px;
    align-items: start;
    padding: 48px 0 72px;
}

/* ==========================================================================
   42. Blog — prose content (article body)
   ========================================================================== */
.cl-prose {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--cl-ink);
}
.cl-prose h1, .cl-prose h2, .cl-prose h3,
.cl-prose h4, .cl-prose h5, .cl-prose h6 {
    font-family: var(--cl-font-head);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--cl-ink);
    margin-top: 2em;
    margin-bottom: 0.6em;
    scroll-margin-top: 90px;
}
.cl-prose h1 { font-size: 2rem; }
.cl-prose h2 { font-size: 1.55rem; border-bottom: 1px solid var(--cl-border); padding-bottom: 0.4em; }
.cl-prose h3 { font-size: 1.25rem; }
.cl-prose h4 { font-size: 1.05rem; }
.cl-prose p  { margin-bottom: 1.4em; }
.cl-prose a  {
    color: var(--cl-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--cl-ease);
}
.cl-prose a:hover { color: var(--cl-blue-d); }
.cl-prose strong, .cl-prose b { font-weight: 700; }
.cl-prose em, .cl-prose i { font-style: italic; }
.cl-prose ul, .cl-prose ol { margin: 0 0 1.4em 1.5em; }
.cl-prose ul { list-style: disc; }
.cl-prose ol { list-style: decimal; }
.cl-prose li { margin-bottom: 0.4em; }
.cl-prose li > ul, .cl-prose li > ol { margin-top: 0.4em; margin-bottom: 0; }
.cl-prose blockquote {
    border-left: 4px solid var(--cl-blue);
    background: rgba(0,113,220,.04);
    padding: 16px 20px;
    border-radius: 0 var(--cl-radius-xs) var(--cl-radius-xs) 0;
    margin: 1.6em 0;
    font-style: italic;
    color: var(--cl-muted);
}
.cl-prose blockquote p { margin-bottom: 0; }
.cl-prose code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.88em;
    background: rgba(0,113,220,.07);
    color: var(--cl-blue-d);
    padding: 2px 6px;
    border-radius: 5px;
}
.cl-prose pre {
    background: var(--cl-dark);
    color: #e8eaf0;
    padding: 20px 24px;
    border-radius: var(--cl-radius-md);
    overflow-x: auto;
    margin: 1.6em 0;
    font-size: 0.88rem;
    line-height: 1.65;
}
.cl-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; border-radius: 0; }
.cl-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.92rem; }
.cl-prose thead tr { background: rgba(0,113,220,.06); }
.cl-prose th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 700;
    border-bottom: 2px solid var(--cl-border);
    color: var(--cl-ink);
}
.cl-prose td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cl-border);
    color: var(--cl-muted);
}
.cl-prose tr:last-child td { border-bottom: none; }
.cl-prose img {
    border-radius: var(--cl-radius-md);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.6em auto;
}
.cl-prose hr { border: none; border-top: 1px solid var(--cl-border); margin: 2.4em 0; }
.cl-prose iframe { border-radius: var(--cl-radius-md); max-width: 100%; display: block; margin: 1.6em auto; }

/* ==========================================================================
   43. Blog — TOC (Table of Contents)
   ========================================================================== */
.cl-toc {
    position: sticky;
    top: 80px;
    padding: 22px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.cl-toc::-webkit-scrollbar { width: 4px; }
.cl-toc::-webkit-scrollbar-track { background: transparent; }
.cl-toc::-webkit-scrollbar-thumb { background: var(--cl-border); border-radius: 2px; }
.cl-toc__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cl-toc__list { display: flex; flex-direction: column; gap: 2px; }
.cl-toc__item { font-size: 0.84rem; font-weight: 600; line-height: 1.4; }
.cl-toc__link {
    display: block;
    padding: 5px 10px;
    border-radius: var(--cl-radius-xs);
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
    border-left: 2px solid transparent;
}
.cl-toc__link:hover { background: rgba(0,113,220,.06); color: var(--cl-ink); }
.cl-toc__link--active { background: rgba(0,113,220,.08); color: var(--cl-blue); border-left-color: var(--cl-blue); }
.cl-toc__link--h3 { padding-left: 22px; font-size: 0.8rem; }
.cl-toc__link--h4 { padding-left: 34px; font-size: 0.76rem; }

/* ==========================================================================
   44. Blog — social share buttons
   ========================================================================== */
.cl-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
    margin: 32px 0;
}
.cl-share__label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--cl-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 6px;
}
.cl-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--cl-radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--cl-ease), opacity var(--cl-ease);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.cl-share__btn:hover { transform: translateY(-2px); opacity: 0.88; }
.cl-share__btn--fb       { background: #1877f2; }
.cl-share__btn--x        { background: #000; }
.cl-share__btn--linkedin { background: #0a66c2; }
.cl-share__btn--copy     { background: var(--cl-bg); color: var(--cl-ink); border-color: var(--cl-border); }
.cl-share__btn--copy:hover { background: #fff; opacity: 1; }
.cl-share__btn--copy.is-copied { color: #2a7d71; border-color: var(--cl-mint); background: var(--cl-mint-l); }

/* ==========================================================================
   45. Blog — author box
   ========================================================================== */
.cl-author-box {
    display: flex;
    gap: 20px;
    padding: 28px;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
    margin: 32px 0;
}
.cl-author-box__avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cl-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
}
.cl-author-box__body { flex: 1; }
.cl-author-box__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 4px;
}
.cl-author-box__name {
    font-family: var(--cl-font-head);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--cl-ink);
}
.cl-author-box__bio { font-size: 0.9rem; line-height: 1.7; color: var(--cl-muted); }

/* ==========================================================================
   46. Blog — related posts
   ========================================================================== */
.cl-related { padding: 48px 0 60px; border-top: 1px solid var(--cl-border); }
.cl-related__head { margin-bottom: 28px; }
.cl-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* ==========================================================================
   47. Blog — pagination
   ========================================================================== */
.cl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0;
    flex-wrap: wrap;
}
.cl-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--cl-radius-xs);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--cl-muted);
    background: #fff;
    border: 1px solid var(--cl-border);
    transition: background var(--cl-ease), color var(--cl-ease), border-color var(--cl-ease);
}
.cl-pagination__btn:hover { background: rgba(0,113,220,.06); color: var(--cl-blue); border-color: rgba(0,113,220,.3); }
.cl-pagination__btn--active { background: var(--cl-blue); color: #fff; border-color: var(--cl-blue); }
.cl-pagination__btn--disabled { opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   48. Blog — empty state
   ========================================================================== */
.cl-blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--cl-muted);
    grid-column: 1 / -1;
}
.cl-blog-empty__icon { font-size: 3rem; display: block; margin-bottom: 16px; opacity: 0.3; }
.cl-blog-empty h3 {
    font-family: var(--cl-font-head);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cl-ink);
    margin-bottom: 8px;
}
.cl-blog-empty p { font-size: 0.9rem; max-width: 40ch; margin: 0 auto; }

/* ==========================================================================
   48B. Blog v2 — Hero banner
   ========================================================================== */
.cl-blog-hero-v2 {
    padding: 64px 0 56px;
    background: linear-gradient(135deg, var(--cl-dark) 0%, var(--cl-dark-3) 60%, #1a3a6c 100%);
    position: relative;
    overflow: hidden;
}
.cl-blog-hero-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(77,163,255,.18), transparent 40%),
        radial-gradient(circle at 8% 80%, rgba(244,108,95,.12), transparent 35%);
    pointer-events: none;
}
.cl-blog-hero-v2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cl-secondary), transparent);
}
.cl-blog-hero-v2__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cl-blog-hero-v2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cl-secondary);
    margin-bottom: 12px;
}
.cl-blog-hero-v2__heading {
    font-family: var(--cl-font-head);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 16px;
}
.cl-blog-hero-v2__lead {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,.62);
    max-width: 52ch;
    margin-bottom: 28px;
}
.cl-blog-hero-v2__stats {
    display: flex;
    gap: 32px;
}
.cl-blog-stat { display: flex; flex-direction: column; }
.cl-blog-stat__num {
    font-family: var(--cl-font-head);
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.cl-blog-stat__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 4px;
}
.cl-blog-hero-v2__cats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 220px;
}
.cl-blog-hero-v2__cats-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.cl-blog-hero-v2__cat-chips { display: flex; flex-direction: column; gap: 8px; }
.cl-blog-cat-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--cl-radius-xs);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.78);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--cl-ease), border-color var(--cl-ease), color var(--cl-ease);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cl-blog-cat-chip:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.22);
    color: #fff;
}
.cl-blog-cat-chip span {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
}
.cl-blog-cat-chip--all {
    gap: 8px;
    justify-content: flex-start;
    border-color: rgba(77,163,255,.28);
    color: var(--cl-blue-l);
    margin-top: 4px;
}
.cl-blog-cat-chip--all:hover { background: rgba(0,113,220,.22); color: #fff; }

/* Blog body section */
.cl-blog-body { padding: 48px 0 80px; background: var(--cl-bg); }

/* ==========================================================================
   48C. Blog v2 — Spotlight (featured post)
   ========================================================================== */
.cl-spotlight {
    display: block;
    position: relative;
    border-radius: var(--cl-radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    min-height: 440px;
    margin-bottom: 36px;
    box-shadow: var(--cl-shadow);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    will-change: transform;
}
.cl-spotlight:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow-lg); }
.cl-spotlight__bg {
    position: absolute;
    inset: 0;
}
.cl-spotlight__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.cl-spotlight:hover .cl-spotlight__bg img { transform: scale(1.04); }
.cl-spotlight__bg-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--cl-dark-3) 0%, var(--cl-dark) 100%);
}
.cl-spotlight__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(3,31,66,.96) 0%,
        rgba(3,31,66,.62) 48%,
        rgba(3,31,66,.18) 100%
    );
}
.cl-spotlight__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 440px;
    padding: 40px;
}
.cl-spotlight__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.cl-spotlight__badge-featured {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: linear-gradient(135deg, var(--cl-coral), #f08a45);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cl-spotlight__badge-cat {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cl-spotlight__title {
    font-family: var(--cl-font-head);
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 12px;
    transition: color var(--cl-ease);
}
.cl-spotlight:hover .cl-spotlight__title { color: var(--cl-secondary); }
.cl-spotlight__excerpt {
    font-size: 0.93rem;
    line-height: 1.72;
    color: rgba(255,255,255,.68);
    max-width: 68ch;
    margin-bottom: 22px;
}
.cl-spotlight__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
    flex-wrap: wrap;
}
.cl-spotlight__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,.58);
}
.cl-spotlight__meta i { color: var(--cl-secondary); }
.cl-spotlight__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-secondary);
    color: var(--cl-dark);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background var(--cl-ease);
    flex-shrink: 0;
}
.cl-spotlight:hover .cl-spotlight__cta { background: #fff; }

/* ==========================================================================
   37B. Blog v2 — Article cards
   ========================================================================== */
.cl-article-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
    height: 100%;
}
.cl-article-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); }
.cl-article-card__thumb {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff 0%, #fff8f4 100%);
    flex-shrink: 0;
}
.cl-article-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.cl-article-card:hover .cl-article-card__thumb img { transform: scale(1.06); }
.cl-article-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(0,113,220,.12);
}
.cl-article-card__cat {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--cl-radius-full);
    background: var(--cl-secondary);
    color: var(--cl-dark);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.cl-article-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-article-card__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-article-card:hover .cl-article-card__title { color: var(--cl-blue); }
.cl-article-card__excerpt {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--cl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.cl-article-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cl-border);
}
.cl-article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--cl-muted);
}
.cl-article-card__meta i { color: var(--cl-blue); font-size: 0.8rem; }
.cl-article-card__arrow {
    font-size: 1.2rem;
    color: var(--cl-blue);
    opacity: 0.35;
    transition: opacity var(--cl-ease), transform var(--cl-ease);
}
.cl-article-card:hover .cl-article-card__arrow { opacity: 1; transform: translateX(3px); }

/* ==========================================================================
   49. Static page layout
   ========================================================================== */
.cl-static-page { padding: 56px 0 80px; }
.cl-static-page__hero {
    padding: 56px 0 48px;
    background:
        radial-gradient(circle at 80% 20%, rgba(143,224,211,.18), transparent 30%),
        linear-gradient(180deg, #fff 0%, var(--cl-bg) 100%);
}
.cl-static-page__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
    color: var(--cl-ink);
    margin-bottom: 12px;
}
.cl-static-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 56px;
    align-items: start;
    padding: 48px 0 80px;
}
.cl-static-page__layout--full {
    display: block;
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 0 80px;
}
.cl-static-page__toc {
    position: sticky;
    top: 80px;
}

/* ==========================================================================
   50. Responsive — Blog & Pages additions
   ========================================================================== */
@media (max-width: 1024px) {
    .cl-blog-layout      { grid-template-columns: 1fr; }
    .cl-blog-sidebar     { position: static; }
    .cl-article-layout   { grid-template-columns: 1fr; }
    .cl-toc              { position: static; max-height: none; }
    .cl-related__grid    { grid-template-columns: repeat(2, 1fr); }
    .cl-featured-post    { grid-template-columns: 1fr; }
    .cl-featured-post__thumb { min-height: 240px; }
    .cl-static-page__layout { grid-template-columns: 1fr; }
    .cl-static-page__toc { position: static; }
    /* Blog v2 hero */
    .cl-blog-hero-v2__inner { grid-template-columns: 1fr; gap: 32px; }
    .cl-blog-hero-v2__cats  { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .cl-blog-hero-v2__cat-chips { flex-direction: row; flex-wrap: wrap; }
    .cl-blog-cat-chip { flex: 0 0 auto; }
}
@media (max-width: 768px) {
    .cl-blog-grid        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-related__grid    { grid-template-columns: 1fr; }
    .cl-author-box       { flex-direction: column; }
    .cl-blog-grid--2col  { grid-template-columns: 1fr; }
    /* Blog v2 */
    .cl-blog-hero-v2 { padding: 48px 0 40px; }
    .cl-spotlight__content { min-height: 360px; padding: 28px; }
    .cl-spotlight__excerpt { display: none; }
    .cl-spotlight__footer  { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .cl-blog-grid        { grid-template-columns: 1fr; }
    .cl-blog-hero__heading { font-size: 2.2rem; }
    .cl-related__grid    { grid-template-columns: 1fr; }
    /* Blog v2 */
    .cl-blog-hero-v2__heading { font-size: 2.2rem; }
    .cl-blog-hero-v2__stats   { gap: 20px; }
    .cl-spotlight { min-height: 300px; }
    .cl-spotlight__content { min-height: 300px; padding: 24px; }
}
/* ==========================================================================
   49. Blog — Post list (category page)
   ========================================================================== */
.cl-blog-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cl-post-row {
    display: grid;
    grid-template-columns: 4px 200px 1fr;
    gap: 0;
    border-radius: var(--cl-radius-xl);
    border: 1px solid var(--cl-border);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    color: var(--cl-ink);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    box-shadow: var(--cl-shadow-sm);
    will-change: transform;
    margin-bottom: 16px;
}
.cl-post-row:last-child { margin-bottom: 0; }
.cl-post-row:hover { transform: translateY(-3px); box-shadow: var(--cl-shadow); }

/* Left accent bar */
.cl-post-row__accent {
    width: 4px;
    background: linear-gradient(180deg, var(--cl-blue) 0%, #f46c5f 100%);
    flex-shrink: 0;
}

.cl-post-row__thumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eef1ff, #fff8f4);
    flex-shrink: 0;
    min-height: 160px;
}
.cl-post-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cl-post-row:hover .cl-post-row__thumb img { transform: scale(1.05); }
.cl-post-row__thumb-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(0,113,220,.15);
}
.cl-post-row__content {
    padding: 20px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid var(--cl-border);
}
.cl-post-row__author {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cl-muted);
    margin: 0;
}
.cl-post-row__author strong { color: var(--cl-ink); font-weight: 700; }
.cl-post-row__cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cl-blue, #2553ff);
}
.cl-post-row__cat i { font-size: 0.68rem; }
.cl-post-row__title {
    font-family: var(--cl-font-head);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--cl-ink);
    transition: color var(--cl-ease);
    margin: 0;
}
.cl-post-row:hover .cl-post-row__title { color: var(--cl-blue); }
.cl-post-row__excerpt {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--cl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.cl-post-row__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cl-border);
    flex-wrap: wrap;
}
.cl-post-row__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cl-post-row__hashtag {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cl-blue);
    letter-spacing: 0.02em;
}
.cl-post-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cl-muted);
    flex-shrink: 0;
}
.cl-post-row__meta i { color: var(--cl-blue); font-size: 0.8rem; margin-right: 3px; }
/* remove old .cl-post-row__read — replaced by hashtag/meta footer */
@media (max-width: 640px) {
    .cl-post-row { grid-template-columns: 0px 1fr; }
    .cl-post-row__accent { width: 0; }
    .cl-post-row__thumb { display: none; }
    .cl-post-row__content { border-left: none; padding: 16px; }
    .cl-post-row__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   50A. Blog/category hero + body shell
   ========================================================================== */
.cl-cat-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 40px;
    background:
        radial-gradient(circle at 12% 18%, rgba(0,113,220,.14), transparent 26%),
        radial-gradient(circle at 88% 22%, rgba(244,108,95,.18), transparent 24%),
        linear-gradient(180deg, #f7fbff 0%, #eef5ff 48%, #f7f9fc 100%);
}

.cl-cat-hero__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 40px;
    align-items: center;
}

.cl-cat-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.75;
    pointer-events: none;
}

.cl-cat-hero__blob--blue {
    top: -120px;
    left: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0,113,220,.24) 0%, rgba(0,113,220,0) 70%);
}

.cl-cat-hero__blob--coral {
    right: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(244,108,95,.22) 0%, rgba(244,108,95,0) 70%);
}

.cl-cat-hero__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.cl-cat-hero__heading {
    margin: 0;
    font-family: var(--cl-font-head);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: var(--cl-ink);
}

.cl-cat-hash {
    color: var(--cl-coral);
    margin-right: 4px;
}

.cl-cat-hero__desc {
    margin: 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cl-muted);
}

.cl-cat-hero__stats {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

.cl-cat-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 132px;
    padding: 14px 18px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid rgba(0,113,220,.1);
    background: rgba(255,255,255,.82);
    box-shadow: var(--cl-shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cl-cat-stat__num {
    font-family: var(--cl-font-head);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--cl-ink);
}

.cl-cat-stat__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cl-muted);
}

.cl-cat-stat__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(22,32,46,.12);
}

.cl-cat-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--cl-blue-d);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.cl-cat-hero__deco {
    display: flex;
    justify-content: flex-end;
}

.cl-cat-hero__deco-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    width: min(100%, 360px);
    padding: 32px;
    border-radius: 28px;
    background: linear-gradient(145deg, #06254d 0%, #0a3970 100%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(3,31,66,.24);
    overflow: hidden;
}

.cl-cat-hero__deco-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
}

.cl-cat-hero__deco-ring--1 {
    width: 220px;
    height: 220px;
}

.cl-cat-hero__deco-ring--2 {
    width: 300px;
    height: 300px;
}

.cl-cat-hero__deco-icon {
    position: relative;
    z-index: 1;
    font-size: 3.4rem;
    color: var(--cl-secondary);
}

.cl-cat-hero__deco-label {
    position: relative;
    z-index: 1;
    font-family: var(--cl-font-head);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: center;
}

.cl-blog-cat-body {
    padding: 28px 0 72px;
    background: linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%);
}

.cl-blog-cat-body .cl-shell {
    position: relative;
}

.cl-cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding: 16px 20px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    background: rgba(255,255,255,.86);
    box-shadow: var(--cl-shadow-sm);
}

.cl-cat-toolbar__count {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--cl-muted);
}

.cl-cat-toolbar__count i {
    color: var(--cl-blue);
}

.cl-blog-main {
    min-width: 0;
}

.cl-blog-main__section-head {
    align-items: flex-end;
    margin: 0 0 28px;
    padding-top: 4px;
}

.cl-blog-main__section-head .cl-heading {
    margin-bottom: 8px;
}

.cl-blog-main__section-head .cl-subhead {
    max-width: 56ch;
}

.cl-blog-tech-hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(37,83,255,.18), transparent 26%),
        radial-gradient(circle at 84% 18%, rgba(245,190,111,.14), transparent 24%),
        linear-gradient(135deg, #031f42 0%, #082c5d 55%, #031a37 100%);
}

.cl-blog-tech-hero__inner {
    max-width: 900px;
}

.cl-blog-tech-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 32px;
    align-items: stretch;
}

.cl-blog-tech-hero__lead {
    max-width: 64ch;
    line-height: 1.85;
}

.cl-blog-tech-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.cl-blog-tech-stat,
.cl-blog-tech-back {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    padding: 14px 18px;
    border-radius: var(--cl-radius-md);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,.86);
    text-decoration: none;
}

.cl-blog-tech-stat strong,
.cl-blog-tech-back {
    font-family: var(--cl-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.cl-blog-tech-stat span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}

.cl-blog-tech-back {
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    color: var(--cl-secondary);
}

.cl-blog-tech-back i {
    font-size: 0.95rem;
}

.cl-blog-tech-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--cl-radius-xl);
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 44px rgba(3,31,66,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cl-blog-tech-panel__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}

.cl-blog-tech-panel__metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cl-blog-tech-panel__metric:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.cl-blog-tech-panel__metric strong {
    font-family: var(--cl-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.cl-blog-tech-panel__metric span {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
}

.cl-blog-tech-panel__chips,
.cl-blog-tech-strip__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cl-blog-tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.cl-blog-tech-chip small {
    font-size: 0.7rem;
    color: rgba(255,255,255,.5);
}

.cl-blog-tech-chip--light {
    background: #fff;
    border-color: var(--cl-border);
    color: var(--cl-blue-d);
    box-shadow: var(--cl-shadow-sm);
}

.cl-blog-tech-chip--light small {
    color: var(--cl-muted);
}

.cl-blog-tech-strip {
    padding: 0 0 22px;
    margin-top: -18px;
    position: relative;
    z-index: 2;
}

.cl-blog-tech-strip__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-radius: var(--cl-radius-xl);
    background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, #f7fbff 100%);
    border: 1px solid rgba(0,113,220,.08);
    box-shadow: 0 20px 40px rgba(3,31,66,.08);
}

.cl-blog-tech-strip__label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cl-muted);
}

.cl-blog-tech-stream {
    background:
        linear-gradient(180deg, #f3f6fb 0%, #eef3fa 100%);
}

.cl-blog-tech-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--cl-radius-full);
    background: #fff;
    border: 1px solid var(--cl-border);
    color: var(--cl-muted);
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: var(--cl-shadow-sm);
}

.cl-blog-tech-toolbar i {
    color: var(--cl-blue);
}

.cl-blog-layout--tech {
    align-items: start;
    gap: 36px;
}

.cl-blog-layout--tech .cl-featured-post {
    border-top: 4px solid var(--cl-blue);
    box-shadow: 0 18px 40px rgba(3, 31, 66, .08);
}

.cl-blog-layout--tech .cl-blog-card {
    border-top: 3px solid rgba(37,83,255,.16);
}

.cl-blog-layout--tech .cl-sidebar-widget {
    border-top: 3px solid rgba(245,190,111,.55);
}

.cl-blog-cat-body .cl-blog-card,
.cl-blog-cat-body .cl-sidebar-widget {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

@media (max-width: 1024px) {
    .cl-cat-hero__shell {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cl-cat-hero__deco {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .cl-cat-hero {
        padding: 40px 0 28px;
    }
    .cl-cat-hero__left {
        gap: 14px;
    }
    .cl-cat-hero__stats {
        gap: 10px;
    }
    .cl-cat-stat {
        flex: 1 1 140px;
        min-width: 0;
    }
    .cl-cat-stat__divider {
        display: none;
    }
    .cl-cat-hero__deco-card {
        min-height: 220px;
        width: 100%;
    }
    .cl-blog-cat-body {
        padding: 20px 0 56px;
    }
    .cl-cat-toolbar {
        padding: 14px 16px;
        margin-bottom: 20px;
    }
    .cl-blog-main__section-head {
        margin-bottom: 20px;
        padding-top: 0;
    }
    .cl-blog-tech-hero__stats {
        gap: 10px;
    }
    .cl-blog-tech-stat,
    .cl-blog-tech-back {
        min-width: 0;
        flex: 1 1 180px;
    }
    .cl-blog-tech-hero__grid {
        grid-template-columns: 1fr;
    }
    .cl-blog-tech-strip {
        margin-top: -8px;
        padding-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .cl-cat-hero__heading {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }
    .cl-cat-hero__desc {
        font-size: 0.92rem;
        line-height: 1.7;
    }
    .cl-cat-stat {
        padding: 12px 14px;
    }
    .cl-cat-stat__num {
        font-size: 1.45rem;
    }
    .cl-cat-toolbar__count {
        font-size: 0.86rem;
        line-height: 1.6;
    }
    .cl-blog-tech-toolbar {
        width: 100%;
        justify-content: center;
    }
    .cl-blog-tech-stat,
    .cl-blog-tech-back {
        width: 100%;
    }
    .cl-blog-tech-panel {
        padding: 18px;
    }
    .cl-blog-tech-strip__inner {
        padding: 16px;
    }
}

/* ==========================================================================
   50. Blog — Category page (card hero + gray bg)
   ========================================================================== */

/* Full-page gray wrapper */
.cl-cat-page {
    background: #eef0f5;
    padding: 44px 0 80px;
    min-height: 60vh;
}

/* Hero card */
.cl-cat-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 20px rgba(16,24,40,.06);
    text-align: center;
    padding: 52px 40px 44px;
    margin-bottom: 32px;
}
.cl-cat-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin-bottom: 12px;
}
.cl-cat-card__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--cl-ink);
    margin-bottom: 16px;
}
.cl-cat-card__hash {
    color: #f46c5f;
    margin-right: 4px;
}
.cl-cat-card__desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cl-muted);
    max-width: 56ch;
    margin: 0 auto 20px;
}
.cl-cat-card__count {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    background: rgba(22,32,46,.06);
    padding: 6px 16px;
    border-radius: 999px;
}

/* Override blog-layout padding when inside category page */
.cl-cat-page .cl-blog-layout {
    padding-top: 0;
    padding-bottom: 0;
}

/* Sidebar cards on gray bg */
.cl-cat-page .cl-sidebar-widget {
    background: #fff;
}

@media (max-width: 768px) {
    .cl-cat-page { padding: 28px 0 56px; }
    .cl-cat-card { padding: 36px 24px 32px; border-radius: 14px; margin-bottom: 24px; }
    .cl-cat-card__title { font-size: 2rem; }
}
@media (max-width: 480px) {
    .cl-cat-card { padding: 28px 16px 24px; }
    .cl-cat-card__title { font-size: 1.7rem; }
}

@media (max-width: 430px) {
    .cl-blog-hero        { padding: 28px 0 20px; }
    .cl-blog-layout      { padding: 24px 0; gap: 24px; }
    .cl-article-hero     { padding: 28px 0 0; }
    .cl-article-hero__title { font-size: 1.7rem; }
    .cl-article-layout   { padding: 24px 0 48px; gap: 24px; }
    .cl-related          { padding: 28px 0 40px; }
    .cl-share            { gap: 8px; }
    .cl-share__btn       { padding: 8px 12px; font-size: 0.78rem; }
    .cl-static-page__layout { padding: 24px 0 48px; }
    .cl-static-page__hero { padding: 28px 0 20px; }
    .cl-prose            { font-size: 0.95rem; }
    .cl-prose h2         { font-size: 1.35rem; }
    .cl-prose h3         { font-size: 1.1rem; }
    .cl-blog-card__thumb { height: 160px; }
}

/* ==========================================================================
   36. Mobile fixes — Home page
   ========================================================================== */

/* ── Task 1: Hide "Everything you need to pass" feature grid on mobile ───── */
@media (max-width: 768px) {
    .cl-features-section { display: none; }
}

/* ── Task 2: Full-width search input on mobile (filter bar stacks) ───────── */
@media (max-width: 768px) {
    .cl-filter-search {
        max-width: 100%;
        width: 100%;
    }
}

/* ── Task 3: Hero action buttons stay on one row on mobile ───────────────── */
@media (max-width: 430px) {
    .cl-hero__actions {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .cl-hero__actions .cl-btn {
        flex: 1;
        min-width: 0;
        width: auto;
        justify-content: center;
        padding: 11px 12px;
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   37. Account Dashboard
   ========================================================================== */

/* ── Account hero — dark navy (chien-luoc style) ────────────────────────── */
.cl-account-hero {
    background: var(--cl-dark-2);
    padding: 40px 0 32px;
    position: relative;
    overflow: hidden;
}
.cl-account-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 50%, rgba(0,113,220,.14) 0%, transparent 65%);
    pointer-events: none;
}
.cl-account-hero__inner { position: relative; }
.cl-account-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--cl-radius-full);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: 14px;
}
.cl-account-hero__title {
    font-family: var(--cl-font-head);
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
}
.cl-account-hero__title i { color: var(--cl-blue-l); }
.cl-account-hero__sub {
    font-size: .88rem;
    color: rgba(255,255,255,.48);
    font-weight: 500;
    margin: 0;
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.cl-account__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Sidebar card ────────────────────────────────────────────────────────── */
.cl-account__sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    overflow: hidden;
    box-shadow: var(--cl-shadow-sm);
}

/* User header — dark strip */
.cl-account__user {
    background: linear-gradient(135deg, var(--cl-dark-2), var(--cl-dark-3));
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-account__user-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.cl-account__user-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.cl-account__user-info { min-width: 0; }
.cl-account__user-name {
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-account__user-role {
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,.48);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 2px;
}

/* Navigation */
.cl-account__nav {
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.cl-account__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--cl-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    color: var(--cl-muted);
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease);
    white-space: nowrap;
}
.cl-account__nav-link:hover {
    background: rgba(0,113,220,.06);
    color: var(--cl-blue);
}
.cl-account__nav-link--active {
    background: rgba(0,113,220,.1);
    color: var(--cl-blue);
    font-weight: 700;
}
.cl-account__nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.cl-account__nav-divider {
    height: 1px;
    background: var(--cl-border);
    margin: 6px 2px;
}
.cl-account__nav-link--danger { color: var(--cl-coral); }
.cl-account__nav-link--danger:hover {
    background: rgba(244,108,95,.08);
    color: #c94030;
}

/* Content area */
.cl-account__content { min-width: 0; }

/* ── Profile page ────────────────────────────────────────────────────────── */
.cl-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.cl-profile-card {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 28px 24px;
    box-shadow: var(--cl-shadow-sm);
}
.cl-profile-card__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--cl-ink);
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid var(--cl-border);
    display: flex;
    align-items: center;
    gap: 9px;
}
.cl-profile-card__title i { color: var(--cl-blue); font-size: 1.1rem; }

/* Avatar picker */
.cl-avatar-picker {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.cl-avatar-preview {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cl-border);
    background: var(--cl-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--cl-blue);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: var(--cl-shadow-sm);
}
.cl-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.cl-avatar-pick__actions { display: flex; flex-direction: column; gap: 8px; }
.cl-avatar-pick__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    color: var(--cl-ink);
    cursor: pointer;
    transition: background var(--cl-ease), border-color var(--cl-ease);
}
.cl-avatar-pick__label:hover {
    background: rgba(0,113,220,.06);
    border-color: var(--cl-blue);
    color: var(--cl-blue);
}
.cl-avatar-pick__hint { font-size: .76rem; color: var(--cl-muted); }

/* Form fields */
.cl-profile-field { margin-bottom: 18px; }
.cl-profile-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cl-ink);
    margin-bottom: 6px;
}
.cl-profile-label span { font-weight: 500; color: var(--cl-muted); }
.cl-profile-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--cl-radius-sm);
    border: 1.5px solid var(--cl-border);
    background: var(--cl-white);
    font-family: var(--cl-font-body);
    font-size: .92rem;
    color: var(--cl-ink);
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
    box-sizing: border-box;
}
.cl-profile-input:focus {
    outline: none;
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
}
.cl-profile-input[readonly] {
    background: var(--cl-surface);
    color: var(--cl-muted);
    cursor: default;
}

/* Flash messages */
.cl-profile-flash {
    padding: 12px 16px;
    border-radius: var(--cl-radius-sm);
    font-size: .87rem;
    font-weight: 600;
    margin-bottom: 18px;
}
.cl-profile-flash--ok {
    background: rgba(22,163,74,.08);
    border: 1px solid rgba(22,163,74,.25);
    color: #166534;
}
.cl-profile-flash--err {
    background: var(--cl-coral-l);
    border: 1px solid rgba(244,108,95,.3);
    color: #b14037;
}

/* ── My Results ──────────────────────────────────────────────────────────── */
.cl-myresults-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.cl-stat-card {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--cl-shadow-sm);
}
.cl-stat-card__value {
    font-family: var(--cl-font-head);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--cl-blue);
    line-height: 1.1;
}
.cl-stat-card__value--pass  { color: #16a34a; }
.cl-stat-card__value--fail  { color: var(--cl-coral); }
.cl-stat-card__value--rate  { color: var(--cl-gold); filter: brightness(.8); }
.cl-stat-card__value--best  { color: var(--cl-blue-l); }
.cl-stat-card__label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cl-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 4px;
}

/* Filter bar */
.mr-filter {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--cl-shadow-sm);
}
.mr-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.mr-filter__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 120px;
}
.mr-filter__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cl-muted);
}
.mr-filter__select {
    height: 38px;
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 0 12px;
    font-size: .88rem;
    color: var(--cl-ink);
    background: var(--cl-white);
    outline: none;
    transition: border-color var(--cl-ease);
    width: 100%;
    font-family: var(--cl-font-body);
}
.mr-filter__select:focus { border-color: var(--cl-blue); }
.mr-filter__actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    align-items: flex-end;
}
.mr-filter__btn {
    height: 38px;
    padding: 0 18px;
    border-radius: var(--cl-radius-sm);
    border: none;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background var(--cl-ease), transform var(--cl-ease);
    font-family: var(--cl-font-body);
}
.mr-filter__btn--primary {
    background: var(--cl-blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,113,220,.25);
}
.mr-filter__btn--primary:hover { background: var(--cl-blue-d); transform: translateY(-1px); }
.mr-filter__btn--reset {
    background: rgba(22,32,46,.06);
    color: var(--cl-ink);
    border: 1px solid var(--cl-border);
}
.mr-filter__btn--reset:hover { background: rgba(22,32,46,.1); }

/* Results table */
.cl-results-table-wrap {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    overflow: hidden;
    box-shadow: var(--cl-shadow-sm);
}
.cl-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.cl-results-table thead th {
    background: var(--cl-dark-2);
    color: rgba(255,255,255,.75);
    padding: 12px 16px;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: none;
    white-space: nowrap;
}
.cl-results-table tbody tr {
    border-bottom: 1px solid var(--cl-border);
    transition: background var(--cl-ease);
}
.cl-results-table tbody tr:last-child { border-bottom: none; }
.cl-results-table tbody tr:hover { background: rgba(0,113,220,.03); }
.cl-results-table td {
    padding: 13px 16px;
    vertical-align: middle;
    color: var(--cl-ink);
}

/* Score and status badges */
.cl-score-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--cl-radius-full);
    font-size: .77rem;
    font-weight: 700;
    border: 1.5px solid;
    white-space: nowrap;
}
.cl-status-pass {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 700; color: #16a34a;
}
.cl-status-fail {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 700; color: var(--cl-coral);
}

/* Pagination */
.cl-myresults-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.cl-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--cl-radius-xs);
    font-size: .85rem;
    font-weight: 600;
    color: var(--cl-ink);
    background: var(--cl-white);
    border: 1.5px solid var(--cl-border);
    text-decoration: none;
    transition: all var(--cl-ease);
}
.cl-pager-btn:hover { border-color: var(--cl-blue); color: var(--cl-blue); }
.cl-pager-btn--active {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
    pointer-events: none;
}
.cl-pager-btn--disabled { opacity: .4; pointer-events: none; }

/* Empty state */
.cl-myresults-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--cl-muted);
}
.cl-myresults-empty i { font-size: 2.5rem; display: block; margin-bottom: 16px; opacity: .4; }

/* ── Messages / Inbox ────────────────────────────────────────────────────── */
.mi-wrap { font-family: var(--cl-font-body); }

.mi-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.mi-topbar__left { display: flex; align-items: center; gap: 10px; }
.mi-topbar__title {
    font-size: 1.05rem; font-weight: 800; color: var(--cl-ink);
    display: flex; align-items: center; gap: 8px;
}
.mi-topbar__title i { color: var(--cl-blue); }

.mi-unread-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    background: var(--cl-blue); color: #fff;
    font-size: .7rem; font-weight: 800; border-radius: var(--cl-radius-full);
}
.mi-mark-all { color: var(--cl-blue) !important; }
.mi-unread-pill:empty { display: none; }

.mi-card {
    display: flex; min-height: 520px;
    background: #fff;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-md);
    box-shadow: var(--cl-shadow-sm);
    overflow: hidden;
}
.mi-sidebar {
    flex: 0 0 290px; min-width: 0;
    display: flex; flex-direction: column;
    overflow-y: auto; max-height: 620px;
}
.mi-divider { width: 1px; background: var(--cl-border); flex-shrink: 0; }
.mi-detail {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding: 28px 24px;
    overflow-y: auto; max-height: 620px;
}
.mi-detail-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.mi-detail-empty__icon {
    width: 60px; height: 60px; border-radius: var(--cl-radius-md);
    background: rgba(0,113,220,.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--cl-blue); opacity: .4;
}
.mi-detail-empty__text { font-size: .87rem; color: var(--cl-muted); font-weight: 600; }

.mi-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cl-border);
    cursor: pointer; transition: background var(--cl-ease);
    text-align: left; width: 100%; background: transparent;
    font-family: var(--cl-font-body);
}
.mi-item:last-child { border-bottom: none; }
.mi-item:hover { background: rgba(0,113,220,.03); }
.mi-item--unread { background: rgba(0,113,220,.05); }
.mi-item--active { background: rgba(0,113,220,.08); }

.mi-item__icon {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: var(--cl-radius-xs); font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.mi-item__body { flex: 1; min-width: 0; }
.mi-item__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 6px; margin-bottom: 3px;
}
.mi-item__title {
    font-size: .85rem; font-weight: 700; color: var(--cl-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.mi-item--unread .mi-item__title { font-weight: 800; }
.mi-item__dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cl-blue); margin-top: 4px;
}
.mi-item__preview {
    font-size: .76rem; color: var(--cl-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin: 0 0 5px; font-weight: 500;
}
.mi-item__time { font-size: .7rem; color: #94a3b8; font-weight: 600; }

.mi-detail-header { margin-bottom: 22px; }
.mi-type-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: var(--cl-radius-full);
    font-size: .7rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; margin-bottom: 12px;
}
.mi-detail-title {
    font-size: 1.1rem; font-weight: 800; color: var(--cl-ink);
    line-height: 1.35; margin: 0 0 8px;
}
.mi-detail-meta { font-size: .76rem; color: #94a3b8; font-weight: 600; }
.mi-detail-body { border-top: 1px solid var(--cl-border); padding-top: 18px; }
.mi-detail-content {
    font-size: .92rem; line-height: 1.75; color: #334155; white-space: pre-wrap;
}

.mi-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--cl-border);
}
.mi-page-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: var(--cl-radius-xs);
    border: 1.5px solid var(--cl-border); background: #fff;
    color: var(--cl-blue); font-size: .78rem; font-weight: 700;
    cursor: pointer; transition: background var(--cl-ease);
    font-family: var(--cl-font-body);
}
.mi-page-btn:hover { background: rgba(0,113,220,.05); border-color: rgba(0,113,220,.3); }
.mi-page-info { font-size: .78rem; color: var(--cl-muted); font-weight: 600; padding: 0 4px; }

/* ── Mobile responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cl-account__layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cl-account__sidebar { position: static; }
    .cl-account__user { display: none; }
    .cl-account__nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        gap: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cl-account__nav::-webkit-scrollbar { display: none; }
    .cl-account__nav-link {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: .82rem;
        border-radius: var(--cl-radius-full);
    }
    .cl-account__nav-divider { display: none; }
    .cl-profile-grid { grid-template-columns: 1fr; }
    .mr-filter__group { flex: 1 1 100%; }
    .mr-filter__actions { width: 100%; }
    .mr-filter__btn { flex: 1; justify-content: center; }
    .cl-results-table thead th:nth-child(4),
    .cl-results-table td:nth-child(4),
    .cl-results-table thead th:nth-child(7),
    .cl-results-table td:nth-child(7) { display: none; }
    .mi-card { flex-direction: column; }
    .mi-sidebar { flex: none; max-height: 280px; border-bottom: 1px solid var(--cl-border); }
    .mi-divider { display: none; }
    .mi-detail { max-height: none; padding: 18px 16px; }
    .cl-account-hero { padding: 28px 0 22px; }
    .cl-account-hero__title { font-size: 1.4rem; }
}

/* ==========================================================================
   Post Detail Page — Card layout (Syron-inspired redesign)
   ========================================================================== */

/* Page wrapper */
.cl-post-page {
    background: #eef0f5;
    padding: 44px 0 88px;
    min-height: 60vh;
}

/* Two-column grid: article | sidebar */
.cl-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}

/* ── Article card ── */
.cl-post-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 24px rgba(16,24,40,.07);
    overflow: hidden;
}

/* Cover image */
.cl-post-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--cl-border);
}
.cl-post-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.cl-post-card:hover .cl-post-card__cover img {
    transform: scale(1.02);
}

/* Card body */
.cl-post-card__body {
    padding: 36px 44px 44px;
}

/* Category tags */
.cl-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.cl-post-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cl-blue);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color var(--cl-ease);
}
.cl-post-tag:hover { color: var(--cl-blue-d); text-decoration: underline; }

/* Post title */
.cl-post-title {
    font-family: var(--cl-font-head);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--cl-ink);
    margin-bottom: 22px;
}

/* Meta row */
.cl-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cl-muted);
    padding-bottom: 26px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--cl-border);
}
.cl-post-meta__author {
    display: flex;
    align-items: center;
    gap: 9px;
}
.cl-post-meta__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue-d), var(--cl-blue));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.cl-post-meta__name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cl-ink);
}
.cl-post-meta__sep {
    color: rgba(22,32,46,.22);
    font-size: 1.1rem;
    line-height: 1;
}
.cl-post-meta i { color: var(--cl-blue); margin-right: 3px; }
.cl-post-meta__cat-link {
    color: var(--cl-blue);
    text-decoration: none;
}
.cl-post-meta__cat-link:hover { text-decoration: underline; }

/* ── Post sidebar ── */
.cl-post-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.cl-post-sidebar::-webkit-scrollbar { display: none; }

/* TOC inside post sidebar — reset its own sticky (parent handles it) */
.cl-post-sidebar .cl-toc {
    position: static;
    max-height: 280px;
    border-radius: 14px;
    background: #fff;
}

/* Sidebar widgets */
.cl-post-sidebar .cl-sidebar-widget {
    border-radius: 14px;
    background: #fff;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .cl-post-layout {
        grid-template-columns: 1fr;
    }
    .cl-post-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .cl-post-card__body {
        padding: 28px 24px 32px;
    }
}
@media (max-width: 600px) {
    .cl-post-page { padding: 20px 0 56px; }
    .cl-post-layout { gap: 20px; }
    .cl-post-title { font-size: 1.55rem; }
    .cl-post-card__body { padding: 22px 18px 28px; }
}

/* ==========================================================================
   N1. Topbar — Announcement strip
   ========================================================================== */
.cl-topbar {
    background: var(--cl-dark-navy);
    color: rgba(255,255,255,.85);
    padding: 10px 0;
    position: relative;
    z-index: 200;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.cl-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 40px;
}
.cl-topbar a {
    color: var(--cl-secondary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    font-weight: 700;
    transition: text-decoration-color var(--cl-ease);
}
.cl-topbar a:hover { text-decoration-color: var(--cl-secondary); }
.cl-topbar__close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
    line-height: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--cl-ease), background var(--cl-ease);
}
.cl-topbar__close:hover { color: #fff; background: rgba(255,255,255,.1); }

@media (max-width: 640px) {
    .cl-topbar {
        padding: 12px 0;
        font-size: 0.8rem;
    }
    .cl-topbar__inner {
        flex-direction: column;
        gap: 4px;
        padding: 0 44px 0 12px;
        line-height: 1.45;
    }
    .cl-topbar__inner span {
        display: block;
    }
    .cl-topbar a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .cl-topbar__close {
        right: 8px;
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   N2. Secondary button (amber)
   ========================================================================== */
.cl-btn--secondary {
    color: #7a4a00;
    background: var(--cl-secondary);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(255, 194, 33, 0.30);
}
.cl-btn--secondary:hover { box-shadow: 0 14px 30px rgba(255, 194, 33, 0.40); }

/* ==========================================================================
   N3. Hero decorative shapes
   ========================================================================== */
.cl-hero__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    z-index: 0;
}
.cl-hero__dot-grid {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, rgba(0,113,220,.18) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: 0.7;
}
.cl-hero__ring {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 2px solid rgba(0,113,220,.12);
}
.cl-hero__ring--2 {
    top: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    border-color: rgba(0,113,220,.06);
}
.cl-hero__card { position: relative; z-index: 1; }

/* Hero stat pills row */
.cl-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
}
.cl-hero__stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--cl-radius-full);
    background: rgba(255,255,255,.72);
    border: 1px solid var(--cl-border);
    backdrop-filter: blur(8px);
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--cl-ink);
}
.cl-hero__stat-item i { color: var(--cl-blue); font-size: 0.95rem; }

/* ==========================================================================
   N4. Testimonials section
   ========================================================================== */
.cl-testimonials-section {
    background: var(--cl-bg);
}

.cl-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cl-testi-card {
    padding: 28px;
    border-radius: var(--cl-radius-lg);
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    box-shadow: var(--cl-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-testi-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); }

.cl-testi-card__stars {
    display: flex;
    gap: 3px;
    color: var(--cl-secondary);
    font-size: 0.9rem;
}

.cl-testi-card__quote {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--cl-ink);
    flex: 1;
}
.cl-testi-card__quote::before { content: '\201C'; }
.cl-testi-card__quote::after  { content: '\201D'; }

.cl-testi-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-testi-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-l));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.cl-testi-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.cl-testi-card__name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cl-ink);
    line-height: 1.2;
}
.cl-testi-card__role {
    font-size: 0.8rem;
    color: var(--cl-muted);
}

/* ==========================================================================
   N5. Counting animation
   ========================================================================== */
@keyframes clCountUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cl-stats-bar__item[data-counted] strong {
    animation: clCountUp 0.5s ease both;
}

/* ==========================================================================
   N6. Footer social icons
   ========================================================================== */
.cl-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.cl-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.45);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background var(--cl-ease), color var(--cl-ease), border-color var(--cl-ease), transform var(--cl-ease);
}
.cl-footer__social-link:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .cl-footer__top { grid-template-columns: 1fr; gap: 28px; }
    .cl-testimonials-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .cl-footer__contact-strip { padding-bottom: 22px; }
    .cl-footer__clusters { grid-template-columns: 1fr; gap: 16px; }
    .cl-testimonials-grid  { grid-template-columns: 1fr; }
    .cl-footer__brand-card,
    .cl-footer__panel {
        padding: 20px;
    }
    .cl-footer__stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   E1. EduMall-inspired section heading amber underline
   ========================================================================== */
.cl-section__head .cl-heading::after,
.cl-testi-layout__left .cl-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--cl-secondary);
    border-radius: 2px;
    margin-top: 14px;
}
.cl-section__head--center .cl-heading::after {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   E2. Stats bar — dark navy (continuation of dark hero)
   ========================================================================== */
.cl-stats-bar { background: #012149 !important; border-top: 1px solid rgba(255,255,255,.06); }

.cl-stats-bar__item { gap: 18px; }
.cl-stats-bar__item i {
    font-size: 2rem;
    color: rgba(255,255,255,.75);
    flex-shrink: 0;
}
.cl-stats-bar__item__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ==========================================================================
   E3. EduMall features strip (4-item blue bar with icons)
   ========================================================================== */
.cl-features-strip {
    background: var(--cl-blue);
    padding: 0;
}
.cl-features-strip__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.cl-features-strip__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255,255,255,.1);
    transition: background var(--cl-ease);
}
.cl-features-strip__item:last-child { border-right: none; }
.cl-features-strip__item:hover { background: rgba(255,255,255,.06); }
.cl-features-strip__item i {
    font-size: 2rem;
    color: rgba(255,255,255,.85);
    flex-shrink: 0;
}
.cl-features-strip__text strong {
    display: block;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}
.cl-features-strip__text span {
    color: rgba(255,255,255,.6);
    font-size: 0.8rem;
}

/* ==========================================================================
   E4. Testimonials — EduMall split layout
   ========================================================================== */
.cl-testimonials-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 56px;
    align-items: start;
}
.cl-testi-layout__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}
.cl-testi-layout__left .cl-heading {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    line-height: 1.25;
}
.cl-testi-layout__left p {
    color: var(--cl-muted);
    font-size: 0.92rem;
    line-height: 1.75;
}
.cl-testi-layout__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
}

/* ==========================================================================
   E5. Dual CTA banners (EduMall style)
   ========================================================================== */
.cl-dual-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.cl-dual-cta__card {
    position: relative;
    overflow: hidden;
    padding: 44px 44px 44px 44px;
    border-radius: var(--cl-radius-lg);
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 200px;
}
.cl-dual-cta__card--primary {
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%);
}
.cl-dual-cta__card--secondary {
    background: linear-gradient(135deg, var(--cl-secondary) 0%, #e0a800 100%);
}
.cl-dual-cta__bg-circle {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    right: -60px;
    top: -60px;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.cl-dual-cta__bg-circle-2 {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    right: 40px;
    bottom: -50px;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}
.cl-dual-cta__content {
    flex: 1;
    position: relative;
    z-index: 1;
}
.cl-dual-cta__content h3 {
    font-family: var(--cl-font-head);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}
.cl-dual-cta__card--secondary .cl-dual-cta__content h3 { color: #3a2000; }
.cl-dual-cta__content p {
    color: rgba(255,255,255,.82);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 22px;
}
.cl-dual-cta__card--secondary .cl-dual-cta__content p { color: rgba(0,0,0,.55); }
.cl-dual-cta__icon {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    font-size: 5rem;
    color: rgba(255,255,255,.18);
    line-height: 1;
}
.cl-dual-cta__card--secondary .cl-dual-cta__icon { color: rgba(0,0,0,.1); }

/* Help CTA (single wide banner) */
.cl-help-cta {
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%);
    border-radius: var(--cl-radius-lg);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.cl-help-cta::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}
.cl-help-cta__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
}
.cl-help-cta__text {
    flex: 1;
}
.cl-help-cta__text span {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.65);
    margin-bottom: 4px;
}
.cl-help-cta__text strong {
    display: block;
    font-family: var(--cl-font-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

/* ==========================================================================
   E6. Responsive overrides
   ========================================================================== */
@media (max-width: 1024px) {
    .cl-testimonials-split { grid-template-columns: 1fr; }
    .cl-testi-layout__left { position: static; }
    .cl-testi-layout__left .cl-heading::after { margin-left: 0; }
    .cl-features-strip__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .cl-dual-cta { grid-template-columns: 1fr; }
    .cl-testi-layout__cards { grid-template-columns: 1fr; }
    .cl-features-strip__inner { grid-template-columns: 1fr; }
    .cl-help-cta { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   E7. Testimonial card extras (EduMall style — quote icon + title)
   ========================================================================== */
.cl-testi-card__quote-icon {
    font-size: 1.8rem;
    color: var(--cl-blue);
    opacity: 0.25;
    line-height: 1;
    margin-bottom: -4px;
}
.cl-testi-card__title {
    font-family: var(--cl-font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cl-blue);
    margin-bottom: 6px;
}
/* Remove quote marks from quote text (EduMall style shows title separately) */
.cl-testi-layout__cards .cl-testi-card__quote::before,
.cl-testi-layout__cards .cl-testi-card__quote::after { content: ''; }

/* ==========================================================================
   E8. FIX: Footer social link transition (broken by line-wrap in heredoc)
   ========================================================================== */
.cl-footer__social-link {
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* ==========================================================================
   E9. Hero visual position fix (for shapes to work)
   ========================================================================== */
.cl-hero__visual { position: relative; }

/* ==========================================================================
   E10. Eyebrow — use blue instead of coral for cleaner EduMall look
   ========================================================================== */
.cl-eyebrow { color: var(--cl-blue); }

/* Override section dark eyebrow to remain mint */
.cl-section--dark .cl-eyebrow { color: var(--cl-mint); }

/* ==========================================================================
   F1. Top Categories — dark tech-themed provider tiles
   ========================================================================== */
.cl-providers-section {
    background: #060e1e;
    border-top: none;
    position: relative;
    overflow: hidden;
}
/* Dot-grid tech texture */
.cl-providers-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0,113,220,.2) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    z-index: 0;
}
/* Gradient glow vignette */
.cl-providers-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,113,220,.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.cl-providers-section .cl-shell { position: relative; z-index: 1; }

/* Section heading overrides for dark context */
.cl-providers-section .cl-eyebrow {
    color: var(--cl-mint);
    border-color: rgba(143,224,211,.2);
}
.cl-providers-section .cl-heading { color: #fff; }
.cl-providers-section .cl-subhead { color: rgba(255,255,255,.4); }

/* Top accent scan-line */
.cl-providers-section .cl-section__head {
    padding-bottom: 8px;
}
.cl-providers-section .cl-section__head::after {
    display: none !important;
}

.cl-top-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.cl-top-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px 15px 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.09);
    border-top: 2px solid var(--cl-blue);
    border-radius: var(--cl-radius-sm);
    text-decoration: none;
    color: #ccd6f6;
    min-width: 174px;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease, border-color 0.22s ease;
}
/* Shimmer sweep on hover */
.cl-top-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.06) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.cl-top-cat:hover::before { transform: translateX(120%); }

.cl-top-cat:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.16);
}

/* Icon */
.cl-top-cat__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0,113,220,.14);
    border: 1px solid rgba(0,113,220,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #5bb8ff;
    flex-shrink: 0;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cl-top-cat:hover .cl-top-cat__icon {
    transform: scale(1.12);
    box-shadow: 0 0 14px currentColor;
}

.cl-top-cat__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.cl-top-cat__label {
    font-family: 'Outfit', var(--cl-font-head), monospace;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    color: #e2e8f0;
    text-transform: uppercase;
}
.cl-top-cat__count {
    font-size: 0.7rem;
    color: rgba(255,255,255,.3);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.cl-top-cat__arrow {
    font-size: 0.75rem;
    color: var(--cl-mint);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cl-top-cat:hover .cl-top-cat__arrow { opacity: 1; transform: translateX(4px); }

/* ── Per-vendor brand colours ─────────────────────────────────────── */
/* AWS */
.cl-top-cat[data-tag="aws"]           { border-top-color: #ff9900; }
.cl-top-cat[data-tag="aws"]:hover     { box-shadow: 0 16px 36px rgba(255,153,0,.2), 0 0 0 1px rgba(255,153,0,.15); }
.cl-top-cat[data-tag="aws"]           .cl-top-cat__icon { background: rgba(255,153,0,.1); border-color: rgba(255,153,0,.32); color: #ffad33; }

/* Google */
.cl-top-cat[data-tag="google"]        { border-top-color: #4285f4; }
.cl-top-cat[data-tag="google"]:hover  { box-shadow: 0 16px 36px rgba(66,133,244,.2), 0 0 0 1px rgba(66,133,244,.15); }
.cl-top-cat[data-tag="google"]        .cl-top-cat__icon { background: rgba(66,133,244,.1); border-color: rgba(66,133,244,.32); color: #6ea6f8; }

/* Azure */
.cl-top-cat[data-tag="azure"]         { border-top-color: #0078d4; }
.cl-top-cat[data-tag="azure"]:hover   { box-shadow: 0 16px 36px rgba(0,120,212,.22), 0 0 0 1px rgba(0,120,212,.2); }
.cl-top-cat[data-tag="azure"]         .cl-top-cat__icon { background: rgba(0,120,212,.1); border-color: rgba(0,120,212,.35); color: #29a9ff; }

/* Microsoft */
.cl-top-cat[data-tag="microsoft"]     { border-top-color: #888; }
.cl-top-cat[data-tag="microsoft"]:hover { box-shadow: 0 16px 36px rgba(150,150,150,.15), 0 0 0 1px rgba(150,150,150,.12); }
.cl-top-cat[data-tag="microsoft"]     .cl-top-cat__icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #b0b8c8; }

/* PMI / PMP */
.cl-top-cat[data-tag="pmi"],
.cl-top-cat[data-tag="pmp"]           { border-top-color: #8b5cf6; }
.cl-top-cat[data-tag="pmi"]:hover,
.cl-top-cat[data-tag="pmp"]:hover     { box-shadow: 0 16px 36px rgba(139,92,246,.22), 0 0 0 1px rgba(139,92,246,.18); }
.cl-top-cat[data-tag="pmi"]           .cl-top-cat__icon,
.cl-top-cat[data-tag="pmp"]           .cl-top-cat__icon { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); color: #a78bfa; }

/* CompTIA */
.cl-top-cat[data-tag="comptia"]       { border-top-color: #ef4444; }
.cl-top-cat[data-tag="comptia"]:hover { box-shadow: 0 16px 36px rgba(239,68,68,.2), 0 0 0 1px rgba(239,68,68,.16); }
.cl-top-cat[data-tag="comptia"]       .cl-top-cat__icon { background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.28); color: #f87171; }

/* ISC2 / CISSP */
.cl-top-cat[data-tag="isc2"],
.cl-top-cat[data-tag="cissp"]         { border-top-color: #22c55e; }
.cl-top-cat[data-tag="isc2"]:hover,
.cl-top-cat[data-tag="cissp"]:hover   { box-shadow: 0 16px 36px rgba(34,197,94,.2), 0 0 0 1px rgba(34,197,94,.16); }
.cl-top-cat[data-tag="isc2"]          .cl-top-cat__icon,
.cl-top-cat[data-tag="cissp"]         .cl-top-cat__icon { background: rgba(34,197,94,.09); border-color: rgba(34,197,94,.28); color: #4ade80; }

/* Cisco */
.cl-top-cat[data-tag="cisco"]         { border-top-color: #00adef; }
.cl-top-cat[data-tag="cisco"]:hover   { box-shadow: 0 16px 36px rgba(0,173,239,.2), 0 0 0 1px rgba(0,173,239,.16); }
.cl-top-cat[data-tag="cisco"]         .cl-top-cat__icon { background: rgba(0,173,239,.09); border-color: rgba(0,173,239,.28); color: #38d1f8; }


/* ==========================================================================
   F2. Practice Exams — sidebar layout
   ========================================================================== */
.cl-exams-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}
.cl-exams-sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 24px;
}
.cl-exams-sidebar__title {
    font-family: var(--cl-font-head);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cl-muted);
    margin: 0 0 12px;
}
.cl-sidebar-search {
    position: relative;
    margin-bottom: 24px;
}
.cl-sidebar-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    pointer-events: none;
    font-size: 0.9rem;
}
.cl-sidebar-search input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-xs);
    font-size: 0.875rem;
    color: var(--cl-ink);
    background: var(--cl-bg-off);
    outline: none;
    transition: border-color var(--cl-ease);
}
.cl-sidebar-search input:focus { border-color: var(--cl-blue); }
.cl-sidebar-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-sidebar-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--cl-radius-xs);
    cursor: pointer;
    font-size: 0.875rem;
    border: none;
    background: transparent;
    color: var(--cl-ink);
    text-align: left;
    transition: background var(--cl-ease), color var(--cl-ease);
    width: 100%;
}
.cl-sidebar-tag:hover  { background: var(--cl-bg-off); }
.cl-sidebar-tag.is-active {
    background: color-mix(in srgb, var(--cl-blue) 10%, transparent);
    color: var(--cl-blue);
    font-weight: 600;
}
.cl-sidebar-tag__badge {
    background: var(--cl-bg-off);
    border-radius: var(--cl-radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    color: var(--cl-muted);
}
.cl-sidebar-tag.is-active .cl-sidebar-tag__badge {
    background: var(--cl-blue);
    color: #fff;
}

/* ==========================================================================
   F3. Cert card — reduced border-radius (req #6)
   ========================================================================== */
.cl-cert-card {
    border-radius: var(--cl-radius-sm) !important;
}
.cl-cert-card__thumb {
    border-top-left-radius: var(--cl-radius-sm) !important;
    border-top-right-radius: var(--cl-radius-sm) !important;
}

/* ==========================================================================
   F4. PMI Mindset page — responsive (moved from pmp-mindset.htm)
   ========================================================================== */
@media (max-width: 768px) {
    .pm-grid2 { grid-template-columns: 1fr !important; gap: 16px !important; }
    .pm-pad   { padding: 20px !important; }
}
@media (max-width: 430px) {
    .pm-pad   { padding: 16px !important; }
}

/* ==========================================================================
   F5. Chiến Lược page — responsive (moved from chien-luoc.htm)
   ========================================================================== */
@media (max-width: 768px) {
    .cs-grid2 { grid-template-columns: 1fr !important; gap: 16px !important; }
    .cs-pad   { padding: 20px !important; }
}
@media (max-width: 480px) {
    .cs-grid3 { grid-template-columns: 1fr !important; gap: 12px !important; }
}
@media (max-width: 430px) {
    .cs-pad   { padding: 16px !important; }
}

/* ==========================================================================
   F6. Responsive overrides
   ========================================================================== */
@media (max-width: 900px) {
    .cl-exams-layout { grid-template-columns: 1fr; }
    .cl-exams-sidebar { position: static; }
}
@media (max-width: 600px) {
    .cl-top-cats { gap: 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .cl-top-cat { min-width: 150px; }
}

/* ==========================================================================
   G1. Practice Exams — compact dark header
   ========================================================================== */
.cl-exams-head {
    background: linear-gradient(135deg, var(--cl-dark) 0%, var(--cl-dark-2) 60%, #0a3b80 100%);
    padding: 56px 0 52px;
    position: relative;
    overflow: hidden;
}
.cl-exams-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0,113,220,.18), transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(143,224,211,.12), transparent 30%);
    pointer-events: none;
}
.cl-exams-head .cl-shell { position: relative; }
.cl-exams-head__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}
.cl-exams-head .cl-kicker {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.15);
    width: fit-content;
}
.cl-exams-head__title {
    font-family: var(--cl-font-head);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.08;
}
.cl-exams-head__title .cl-gradient-text {
    background: linear-gradient(135deg, var(--cl-secondary), #ff9a4a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cl-exams-head__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 4px;
}
.cl-exams-head__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
}
.cl-exams-head__stat strong {
    color: var(--cl-secondary);
    font-weight: 800;
}

/* ==========================================================================
   G2. Practice Exams — sticky controls bar (search + filter pills)
   ========================================================================== */
.cl-exams-controls {
    background: #fff;
    border-bottom: 1px solid var(--cl-border);
    padding: 12px 0;
    position: sticky;
    top: 64px;
    z-index: 90;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cl-exams-controls__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-exams-controls__search {
    position: relative;
    flex-shrink: 0;
    width: 220px;
}
.cl-exams-controls__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    pointer-events: none;
    font-size: 0.85rem;
}
.cl-exams-controls__search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1.5px solid var(--cl-border);
    border-radius: var(--cl-radius-full);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--cl-ink);
    background: var(--cl-bg);
    outline: none;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease), background var(--cl-ease);
}
.cl-exams-controls__search input:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
    background: #fff;
}
.cl-exams-controls__divider {
    width: 1px;
    height: 28px;
    background: var(--cl-border);
    flex-shrink: 0;
}
.cl-exams-controls__pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cl-exams-controls__pills::-webkit-scrollbar { display: none; }
.cl-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--cl-radius-full);
    border: 1.5px solid var(--cl-border);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--cl-muted);
    background: #fff;
    white-space: nowrap;
    transition: border-color var(--cl-ease), color var(--cl-ease), background var(--cl-ease), box-shadow var(--cl-ease);
    flex-shrink: 0;
}
.cl-filter-pill:hover {
    border-color: var(--cl-blue);
    color: var(--cl-blue);
    background: rgba(0,113,220,.04);
}
.cl-filter-pill.is-active {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,113,220,.25);
}
.cl-filter-pill__count {
    font-size: 0.72rem;
    font-weight: 800;
    opacity: .75;
}
.cl-filter-pill.is-active .cl-filter-pill__count { opacity: .9; }
.cl-exams-controls__count {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 8px;
}

/* ==========================================================================
   G3. Practice Exams — 3-column grid & responsive
   ========================================================================== */
.cl-certs-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 901px) {
    /* Restore normal layout when exams-layout is not used */
    .cl-exams-controls { top: 64px; }
}
@media (max-width: 1024px) {
    .cl-certs-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cl-exams-controls__inner { flex-wrap: wrap; }
    .cl-exams-controls__search { width: 100%; }
    .cl-exams-controls__divider { display: none; }
    .cl-exams-controls__count  { display: none; }
    .cl-exams-head { padding: 36px 0 32px; }
    .cl-exams-head__stats { gap: 14px; }
}
@media (max-width: 580px) {
    .cl-certs-grid--3col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   H1. Practice Exams — search bar inside dark header
   ========================================================================== */
.cl-exams-head__searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: var(--cl-radius-full);
    padding: 7px 7px 7px 20px;
    max-width: 580px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--cl-ease), border-color var(--cl-ease);
}
.cl-exams-head__searchbar:focus-within {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.38);
}
.cl-exams-head__sb-icon {
    color: rgba(255,255,255,.55);
    font-size: 1rem;
    flex-shrink: 0;
}
.cl-exams-head__searchbar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    min-width: 0;
    caret-color: var(--cl-secondary);
}
.cl-exams-head__searchbar input::placeholder {
    color: rgba(255,255,255,.42);
}
.cl-exams-head__sb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--cl-secondary);
    color: var(--cl-dark);
    border-radius: var(--cl-radius-full);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.88rem;
    border: none;
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform var(--cl-ease), box-shadow var(--cl-ease);
    pointer-events: none; /* decorative — JS handles realtime filter */
}

/* ==========================================================================
   H2. Practice Exams — sticky tag pills bar (search removed from here)
   ========================================================================== */
.cl-exams-tags-bar {
    background: var(--cl-bg-white);
    border-bottom: 1px solid var(--cl-border);
    padding: 10px 0;
    
    top: 64px;
    z-index: 90;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.cl-exams-tags-bar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-exams-tags-bar__pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cl-exams-tags-bar__pills::-webkit-scrollbar { display: none; }
.cl-exams-tags-bar__count {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cl-muted);
    padding-left: 14px;
    border-left: 1px solid var(--cl-border);
    white-space: nowrap;
}

/* ==========================================================================
   H3. Cert grid — 4 columns
   ========================================================================== */
.cl-certs-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
    .cl-certs-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .cl-certs-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .cl-certs-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cl-exams-tags-bar { top: 56px; }
    .cl-exams-head__searchbar { max-width: 100%; }
    .cl-exams-tags-bar__count { display: none; }
}

@media (max-width: 640px) {
    .cl-section__head {
        gap: 10px;
        margin-bottom: 20px;
    }
    .cl-section__head:not(.cl-section__head--center) > :first-child {
        width: 100%;
    }
    .cl-section__head--center {
        padding-inline: 6px;
    }
    .cl-section__head .cl-heading {
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.15;
    }
    .cl-section__head .cl-subhead {
        max-width: 34ch;
        font-size: 0.92rem;
        line-height: 1.7;
    }
    .cl-exams-section .cl-section__head .cl-btn {
        display: none;
    }
}

/* ==========================================================================
   HOME. Hero trust row
   ========================================================================== */
.cl-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding-top: 4px;
}
.cl-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
}
.cl-hero__trust-item i { color: #4ade80; font-size: 0.9rem; }

/* ==========================================================================
   HOME. How it works — 3-step section
   ========================================================================== */
.cl-how-section { background: var(--cl-bg); }

.cl-how-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 48px;
    position: relative;
}

.cl-how-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 28px;
    position: relative;
}

.cl-how-step__num {
    font-family: var(--cl-font-head);
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(0,113,220,.08);
    line-height: 1;
    margin-bottom: -6px;
    letter-spacing: -0.04em;
}

.cl-how-step__icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-d) 100%);
    color: #fff;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 36px rgba(0,113,220,.28);
    margin-bottom: 22px;
    flex-shrink: 0;
}

.cl-how-step__title {
    font-family: var(--cl-font-head);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--cl-ink);
}

.cl-how-step__desc {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--cl-muted);
    max-width: 24ch;
    margin: 0 auto;
}

/* Arrow connector between steps */
.cl-how-connector {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 42px;   /* align with icon center */
    color: var(--cl-blue-l);
    font-size: 1.4rem;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .cl-how-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 24px;
    }
    .cl-how-connector {
        display: none;
    }
    .cl-how-step {
        display: grid;
        grid-template-columns: 42px 48px minmax(0, 1fr);
        grid-template-areas:
            "num icon title"
            "num icon desc";
        align-items: start;
        column-gap: 12px;
        row-gap: 4px;
        width: min(100%, 420px);
        margin: 0 auto;
        padding: 14px 14px 13px;
        border: 1px solid var(--cl-border);
        border-radius: var(--cl-radius-md);
        background: #fff;
        box-shadow: var(--cl-shadow-sm);
        text-align: left;
    }
    .cl-how-step__num {
        grid-area: num;
        align-self: center;
        font-size: 1.9rem;
        margin-bottom: 0;
        line-height: 0.95;
    }
    .cl-how-step__icon {
        grid-area: icon;
        width: 42px;
        height: 42px;
        margin-bottom: 0;
        font-size: 1rem;
        box-shadow: 0 8px 18px rgba(0,113,220,.18);
    }
    .cl-how-step__title {
        grid-area: title;
        align-self: end;
        font-size: 0.92rem;
        line-height: 1.35;
        margin-bottom: 0;
    }
    .cl-how-step__desc {
        grid-area: desc;
        max-width: none;
        font-size: 0.78rem;
        line-height: 1.5;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .cl-how-step {
        grid-template-columns: 34px 40px minmax(0, 1fr);
        column-gap: 10px;
        padding: 12px;
    }
    .cl-how-step__num {
        font-size: 1.55rem;
    }
    .cl-how-step__icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    .cl-how-step__title {
        font-size: 0.88rem;
    }
    .cl-how-step__desc {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
    }
}

/* ==========================================================================
   HOME. Features section — improved card
   ========================================================================== */
.cl-features-section {
    background: var(--cl-surface);
}

.cl-feature-card {
    padding: 30px 26px;
    border-radius: var(--cl-radius-lg);
    border: 1px solid var(--cl-border);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: transform var(--cl-ease), box-shadow var(--cl-ease), border-color var(--cl-ease);
}
.cl-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: rgba(0,113,220,.2);
}

.cl-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 1.35rem;
}

.cl-feature-card__title {
    font-family: var(--cl-font-head);
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--cl-ink);
}

/* ==========================================================================
   HOME. Responsive tweaks for hero + stats on mobile
   ========================================================================== */
@media (max-width: 900px) {
    .cl-hero__grid    { grid-template-columns: 1fr; gap: 32px; }
    .cl-hero__visual  { display: none; }
    .cl-hero          { padding: 56px 0 64px; }
    .cl-hero__headline { font-size: clamp(2.2rem, 7vw, 3.2rem); }
}
@media (max-width: 640px) {
    .cl-hero          { padding: 40px 0 52px; }
    .cl-hero__actions { flex-direction: column; }
    .cl-hero__actions .cl-btn { width: 100%; justify-content: center; }
    .cl-hero__trust   { gap: 10px; display:none;}
    .cl-stats-bar__inner { flex-direction: row; flex-wrap: nowrap; padding: 12px 0; }
    .cl-stats-bar__item  { flex: 1 1 0; min-width: 0; padding: 10px 8px; gap: 5px; }
    .cl-stats-bar__divider { display: none; }
    .cl-stats-bar__item i { font-size: 1.15rem; }
    .cl-stats-bar__item strong { font-size: 1.18rem; }
    .cl-stats-bar__item span {
        font-size: 0.6rem;
        line-height: 1.35;
        letter-spacing: 0.04em;
        white-space: normal;
        text-align: center;
    }
}

/* ==========================================================================
   HOME. Choose Your Exam section
   ========================================================================== */
.cl-exams-section {
    background: var(--cl-bg-off);
    border-top: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
}

.cl-exams-section .cl-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.cl-exams-section .cl-section__head--center {
    align-items: center;
    text-align: left;
}

/* Filter bar */
.cl-filter-bar {
    background: #fff;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    box-shadow: var(--cl-shadow-sm);
}

.cl-filter-search {
    position: relative;
    flex: 1 1 220px;
}
.cl-filter-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--cl-muted);
    pointer-events: none;
}
.cl-filter-search input[type="search"] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--cl-border);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--cl-ink);
    background: var(--cl-bg-off);
    outline: none;
    transition: border-color var(--cl-ease), box-shadow var(--cl-ease);
}
.cl-filter-search input[type="search"]:focus {
    border-color: var(--cl-blue);
    box-shadow: 0 0 0 3px rgba(0,113,220,.1);
    background: #fff;
}

/* Filter pills */
.cl-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cl-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--cl-border);
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: #fff;
    color: var(--cl-muted);
    transition: background var(--cl-ease), color var(--cl-ease), border-color var(--cl-ease);
}
.cl-filter-pill:hover {
    background: var(--cl-bg-off);
    color: var(--cl-ink);
    border-color: var(--cl-ink);
}
.cl-filter-pill.is-active {
    background: var(--cl-dark);
    color: #fff;
    border-color: var(--cl-dark);
}

.er-qcard__text ul{ padding-inline-start: 20px; list-style: disc; }

@media (max-width: 640px) {
    .cl-filter-bar { flex-direction: column; align-items: stretch; }
    .cl-filter-search { flex: 1 1 auto; }
}