/* ============================================================
   Exam Blueprint DETAIL page (per-cert standalone page)
   - polished, animated, colorful
   - inherits accent colors from .bp-accent-{name} on the article
   ============================================================ */

.bp-detail {
    /* Defaults — overridden by .bp-accent-* */
    --c-a: #2563eb;
    --c-b: #06b6d4;
    --ink: #0f172a;
    --muted: #475569;
    --line: #e2e8f0;
    --soft: #f8fafc;
    color: var(--ink);
}
.bp-accent-cloud      { --c-a: #2563eb; --c-b: #06b6d4; }
.bp-accent-ai         { --c-a: #7c3aed; --c-b: #ec4899; }
.bp-accent-security   { --c-a: #dc2626; --c-b: #f97316; }
.bp-accent-it         { --c-a: #059669; --c-b: #84cc16; }
.bp-accent-governance { --c-a: #b45309; --c-b: #fbbf24; }

/* ============================================================
   HERO
   ============================================================ */
.bp-hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 3.5rem;
    background:
        radial-gradient(900px 500px at 80% -10%, color-mix(in oklab, var(--c-a) 38%, transparent), transparent 60%),
        radial-gradient(700px 400px at 0% 110%, color-mix(in oklab, var(--c-b) 32%, transparent), transparent 60%),
        linear-gradient(180deg, #0b1024 0%, #131a3a 70%, #0e1430 100%);
    color: #f8fafc;
    isolation: isolate;
}
.bp-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.bp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: bp-float 18s ease-in-out infinite;
}
.bp-orb-1 { width: 360px; height: 360px; background: var(--c-a); top: -120px; left: -60px; }
.bp-orb-2 { width: 300px; height: 300px; background: var(--c-b); top: 40%; right: -100px; animation-delay: -6s; }
.bp-orb-3 { width: 240px; height: 240px; background: #ec4899; bottom: -80px; left: 30%; animation-delay: -12s; opacity: 0.4; }
@keyframes bp-float {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(40px, -20px) scale(1.08); }
    66% { transform: translate(-30px, 30px) scale(0.95); }
}
.bp-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, transparent 80%);
}

.bp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    color: rgba(248,250,252,0.7);
    flex-wrap: wrap;
}
.bp-breadcrumb a {
    color: rgba(248,250,252,0.85);
    text-decoration: none;
    transition: color 0.15s ease;
}
.bp-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.bp-breadcrumb span { color: rgba(248,250,252,0.95); font-weight: 600; }
.bp-breadcrumb svg { opacity: 0.5; flex-shrink: 0; }

.bp-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
}

.bp-code-chip {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    color: #fff;
    margin-bottom: 1.25rem;
}
.bp-title {
    font-family: var(--glq-serif, "Playfair Display", serif);
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
    background: linear-gradient(135deg, #ffffff 0%, color-mix(in oklab, var(--c-a) 25%, #ffffff) 50%, color-mix(in oklab, var(--c-b) 25%, #ffffff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bp-subtitle {
    font-size: 1.18rem;
    color: rgba(248,250,252,0.82);
    max-width: 640px;
    line-height: 1.55;
    margin: 0 0 1.5rem;
}
.bp-issuer {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(248,250,252,0.75);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}
.bp-issuer strong { color: #fff; font-weight: 600; }
.bp-official-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.65rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--c-a) 60%, transparent), color-mix(in oklab, var(--c-b) 60%, transparent));
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bp-official-link:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--c-a) 60%, transparent);
}

/* Badge with rotating ring */
.bp-badge-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}
.bp-badge-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            color-mix(in oklab, var(--c-a) 60%, transparent) 60deg,
            color-mix(in oklab, var(--c-b) 60%, transparent) 180deg,
            transparent 300deg);
    animation: bp-ring-spin 9s linear infinite;
    filter: blur(1px);
}
.bp-badge-ring::after {
    content: "";
    position: absolute; inset: 12px;
    border-radius: 50%;
    background: rgba(11,16,36,0.9);
}
@keyframes bp-ring-spin { to { transform: rotate(360deg); } }
.bp-badge {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 22px;
    background: #fff;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
    z-index: 1;
    animation: bp-badge-bob 5s ease-in-out infinite;
}
@keyframes bp-badge-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.bp-status-banner {
    margin-top: 2rem;
    padding: 0.95rem 1.2rem;
    background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.18));
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 12px;
    color: #fef3c7;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-weight: 500;
    line-height: 1.45;
}
.bp-status-banner svg { color: #fbbf24; flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   HEADLINE CHIPS
   ============================================================ */
.bp-chips-section {
    background: #fff;
    padding: 1.6rem 0 0.4rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 2;
}
.bp-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
    margin-top: -2.8rem;
    background: #fff;
    padding: 1.1rem;
    border-radius: 18px;
    box-shadow: 0 24px 50px -24px rgba(15,23,42,0.18);
    border: 1px solid var(--line);
}
.bp-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: var(--soft);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.18s ease;
    transition-delay: var(--bp-delay, 0ms);
}
.bp-chip.bp-in { opacity: 1; transform: none; }
.bp-chip:hover { background: color-mix(in oklab, var(--c-a) 6%, var(--soft)); }
.bp-chip-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-a), var(--c-b));
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--c-a) 60%, transparent);
}
.bp-chip-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.bp-chip-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.bp-body { padding: 3rem 0 4rem; }
.bp-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 992px) {
    .bp-layout { grid-template-columns: 1fr; }
    .bp-toc { display: none; }
}

/* TOC */
.bp-toc {
    position: sticky;
    top: 20px;
    align-self: start;
}
.bp-toc-inner {
    padding: 1.1rem 1.2rem;
    background: var(--soft);
    border-radius: 14px;
    border: 1px solid var(--line);
}
.bp-toc-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 0.7rem;
}
.bp-toc ul { list-style: none; padding: 0; margin: 0; }
.bp-toc li { margin: 0; }
.bp-toc a {
    display: block;
    padding: 0.45rem 0.65rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.18s ease;
}
.bp-toc a:hover {
    background: #fff;
    border-left-color: var(--c-b);
    color: var(--ink);
}
.bp-toc a.is-active {
    background: #fff;
    border-left-color: var(--c-a);
    color: color-mix(in oklab, var(--c-a) 70%, var(--ink));
    font-weight: 600;
}
.bp-toc-quizzes {
    background: linear-gradient(135deg, color-mix(in oklab, var(--c-a) 14%, white), color-mix(in oklab, var(--c-b) 14%, white));
    font-weight: 600;
}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.bp-section {
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.bp-section.bp-in { opacity: 1; transform: none; }

.bp-h2 {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--glq-serif, "Playfair Display", serif);
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 1.4rem;
    color: var(--ink);
}
.bp-h2-bar {
    display: inline-block;
    width: 5px;
    align-self: stretch;
    min-height: 28px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--c-a), var(--c-b));
    box-shadow: 0 0 12px var(--c-a);
}

/* Quick facts grid */
.bp-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
}
.bp-fact {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--c-a), var(--c-b)) 1;
    border-image-slice: 1;
    border-radius: 0 10px 10px 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bp-fact:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 18px -10px rgba(15,23,42,0.18);
}
.bp-fact-key {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.bp-fact-val {
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.35;
}

/* Skills */
.bp-skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.65rem;
}
.bp-skill {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    opacity: 0;
    transform: translateY(8px);
    transition-delay: var(--bp-delay, 0ms);
}
.bp-skill.bp-in { opacity: 1; transform: none; }
.bp-skill:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 22px -14px color-mix(in oklab, var(--c-a) 50%, transparent);
    border-color: color-mix(in oklab, var(--c-a) 30%, var(--line));
}
.bp-skill-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--c-a), var(--c-b));
    border-radius: 50%;
    padding: 3px;
    margin-top: 1px;
}
.bp-skill span { font-size: 0.94rem; line-height: 1.5; color: var(--ink); }

/* Bullet lists */
.bp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bp-list li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.8rem;
    line-height: 1.55;
    color: var(--ink);
}
.bp-list li::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.92rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-a), var(--c-b));
}

/* Domains with weight bars */
.bp-domains { display: grid; gap: 0.7rem; }
.bp-domain {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.18s ease;
    opacity: 0;
    transform: translateY(8px);
    transition-property: opacity, transform, box-shadow;
    transition-duration: 0.5s, 0.5s, 0.18s;
    transition-delay: var(--bp-delay, 0ms), var(--bp-delay, 0ms), 0ms;
}
.bp-domain.bp-in { opacity: 1; transform: none; }
.bp-domain:hover { box-shadow: 0 12px 26px -16px color-mix(in oklab, var(--c-a) 50%, transparent); }
.bp-domain summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.2rem;
    user-select: none;
    position: relative;
}
.bp-domain summary::-webkit-details-marker { display: none; }
.bp-domain summary::after {
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 1.15rem;
    width: 10px; height: 10px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}
.bp-domain[open] summary::after { transform: rotate(-135deg); }
.bp-domain-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.55rem;
    padding-right: 2rem;
}
.bp-domain-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
}
.bp-domain-weight {
    font-size: 0.92rem;
    font-weight: 700;
    color: color-mix(in oklab, var(--c-a) 70%, var(--ink));
    white-space: nowrap;
}
.bp-domain-bar {
    height: 8px;
    background: var(--soft);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.bp-domain-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--c-a), var(--c-b));
    border-radius: 99px;
    box-shadow: 0 0 10px color-mix(in oklab, var(--c-a) 60%, transparent);
    transition: width 1.1s cubic-bezier(.4,.0,.2,1);
}
.bp-domain-bar-fill.bp-bar-animate { /* width set inline via style attribute */ }
.bp-domain-topics {
    padding: 0.4rem 1.2rem 1.2rem;
    border-top: 1px dashed var(--line);
    background: linear-gradient(180deg, color-mix(in oklab, var(--c-a) 4%, white), white);
}

/* Prep resources grid */
.bp-resources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.65rem;
}
.bp-resource {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    opacity: 0;
    transform: translateY(8px);
    transition-delay: var(--bp-delay, 0ms);
}
.bp-resource.bp-in { opacity: 1; transform: none; }
.bp-resource:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--c-a) 40%, var(--line));
    box-shadow: 0 12px 24px -14px color-mix(in oklab, var(--c-a) 55%, transparent);
}
.bp-resource-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in oklab, var(--c-a) 14%, white), color-mix(in oklab, var(--c-b) 14%, white));
    color: color-mix(in oklab, var(--c-a) 70%, var(--ink));
}
.bp-resource-label { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }

/* Quizzes section — big colorful CTA */
.bp-section-quizzes { margin-top: 2.5rem; }
.bp-quiz-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1024 0%, #1e1b4b 60%, color-mix(in oklab, var(--c-a) 60%, #4c1d95) 100%);
    color: #fff;
    padding: 2.8rem 2rem;
    border-radius: 22px;
    box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--c-a) 70%, transparent);
    text-align: center;
}
.bp-quiz-panel::before,
.bp-quiz-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
}
.bp-quiz-panel::before { width: 250px; height: 250px; background: var(--c-b); top: -80px; right: -50px; }
.bp-quiz-panel::after  { width: 220px; height: 220px; background: var(--c-a); bottom: -60px; left: -40px; }
.bp-quiz-panel > * { position: relative; z-index: 1; }
.bp-quiz-spark {
    display: inline-flex;
    color: var(--c-b);
    margin-bottom: 0.85rem;
    animation: bp-spark 3.6s ease-in-out infinite;
}
@keyframes bp-spark {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50%      { transform: rotate(20deg) scale(1.15); }
}
.bp-quiz-title {
    font-family: var(--glq-serif, "Playfair Display", serif);
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 0.7rem;
    color: #fff;
}
.bp-quiz-sub {
    color: rgba(255,255,255,0.82);
    max-width: 540px;
    margin: 0 auto 1.8rem;
    line-height: 1.55;
}
.bp-quiz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    max-width: 720px;
    margin: 0 auto;
}
.bp-quiz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1.1rem 1.15rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    text-align: left;
    color: #fff;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.bp-quiz-card:hover {
    color: #fff;
    transform: translateY(-3px);
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.32);
}
.bp-quiz-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--dot, #94a3b8);
    box-shadow: 0 0 8px var(--dot, #94a3b8);
    margin-bottom: 0.45rem;
}
.bp-quiz-card-title {
    font-size: 1.05rem;
    font-weight: 700;
}
.bp-quiz-card-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.55rem;
}
.bp-quiz-card-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-b);
    transition: transform 0.2s ease;
}
.bp-quiz-card:hover .bp-quiz-card-go { transform: translateX(3px); }

/* Sources */
.bp-sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.4rem;
}
.bp-sources-list li {
    padding: 0.5rem 0;
}
.bp-sources-list a {
    color: color-mix(in oklab, var(--c-a) 70%, var(--ink));
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in oklab, var(--c-a) 40%, transparent);
    transition: color 0.15s ease;
}
.bp-sources-list a:hover { color: var(--c-a); border-bottom-style: solid; }

/* Back link */
.bp-back {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}
.bp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    background: var(--soft);
    color: var(--ink);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--line);
    transition: transform 0.15s ease, background 0.18s ease;
}
.bp-back-btn:hover {
    background: color-mix(in oklab, var(--c-a) 8%, var(--soft));
    color: var(--ink);
    transform: translateX(-3px);
}

/* ============================================================
   HERO STATS STRIP
   ============================================================ */
.bp-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in oklab, var(--c-a) 20%, transparent);
    animation: bp-fade-up 0.6s ease 0.3s both;
}
.bp-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}
.bp-hero-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--c-a), var(--c-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}
.bp-hero-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in oklab, var(--ink) 55%, transparent);
}
@keyframes bp-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SKILLS — COLORFUL CHIP GRID
   ============================================================ */
.bp-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.bp-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    opacity: 0;
    transform: translateY(6px);
    cursor: default;
}
.bp-skill-chip.bp-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease var(--bp-delay, 0ms), transform 0.35s ease var(--bp-delay, 0ms),
                box-shadow 0.18s ease, scale 0.18s ease;
}
.bp-skill-chip:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px -6px currentColor; }

/* Six rotating accent colours */
.bp-skill-chip-0 {
    background: color-mix(in oklab, #2563eb 12%, transparent);
    border-color: color-mix(in oklab, #2563eb 30%, transparent);
    color: #1d4ed8;
}
.bp-skill-chip-1 {
    background: color-mix(in oklab, #7c3aed 12%, transparent);
    border-color: color-mix(in oklab, #7c3aed 30%, transparent);
    color: #6d28d9;
}
.bp-skill-chip-2 {
    background: color-mix(in oklab, #059669 12%, transparent);
    border-color: color-mix(in oklab, #059669 30%, transparent);
    color: #047857;
}
.bp-skill-chip-3 {
    background: color-mix(in oklab, #ec4899 12%, transparent);
    border-color: color-mix(in oklab, #ec4899 30%, transparent);
    color: #db2777;
}
.bp-skill-chip-4 {
    background: color-mix(in oklab, #f59e0b 12%, transparent);
    border-color: color-mix(in oklab, #f59e0b 30%, transparent);
    color: #b45309;
}
.bp-skill-chip-5 {
    background: color-mix(in oklab, #06b6d4 12%, transparent);
    border-color: color-mix(in oklab, #06b6d4 30%, transparent);
    color: #0e7490;
}

/* ============================================================
   QUIZ PANEL — SINGLE-QUIZ SOLO CARD
   ============================================================ */
.bp-quiz-grid-solo {
    display: flex;
    flex-direction: column;
}
.bp-quiz-card-solo {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
    min-height: unset;
}
.bp-quiz-solo-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}
.bp-quiz-card-solo .bp-quiz-card-title {
    font-size: 1.15rem;
}
.bp-quiz-card-go-solo {
    flex-shrink: 0;
    padding: 0.6rem 1.4rem;
    background: linear-gradient(135deg, var(--c-a), var(--c-b));
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 0.5rem;
    opacity: 1;
    transform: none;
}
.bp-quiz-card-solo:hover .bp-quiz-card-go-solo {
    box-shadow: 0 8px 20px -8px var(--c-a);
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
    .bp-hero { padding: 3rem 0 2.5rem; }
    .bp-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .bp-badge-wrap { width: 140px; height: 140px; margin-top: 0.5rem; }
    .bp-chips { margin-top: -1.5rem; }
    .bp-hero-stats { gap: 0.4rem 1rem; }
    .bp-hero-stat-num { font-size: 1.2rem; }
    .bp-quiz-card-solo { flex-direction: column; padding: 1.25rem; }
    .bp-quiz-card-go-solo { align-self: stretch; justify-content: center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bp-orb, .bp-badge, .bp-badge-ring, .bp-quiz-spark { animation: none !important; }
    .bp-section, .bp-chip, .bp-skill, .bp-domain, .bp-resource { opacity: 1 !important; transform: none !important; }
    .bp-skill-chip { opacity: 1 !important; transform: none !important; }
    .bp-domain-bar-fill { transition: none !important; }
}