/* ═══════════════════════════════════════════════════════════════════
   wiki.css — How Digital Marketing Works — editorial page
   Version 2.0
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reading Progress Bar ──────────────────────────────────────── */
#wiki-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--db-grad);
    z-index: 9999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ── Layout ────────────────────────────────────────────────────── */
.wiki-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3.5rem;
    max-width: var(--db-wide-width);
    margin: 0 auto;
    padding: 3.5rem 2rem 7rem;
    align-items: start;
}

/* ── Sidebar / TOC ─────────────────────────────────────────────── */
.wiki-toc {
    position: sticky;
    top: calc(var(--db-nav-height) + 1.5rem);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 0;
    max-height: calc(100vh - var(--db-nav-height) - 4rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.wiki-toc__head {
    padding: 1.25rem 1.375rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.wiki-toc__title {
    font-family: var(--db-font-heading);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--db-purple-light);
    margin: 0 0 0.25rem;
}

.wiki-toc__sub {
    font-size: 0.75rem;
    color: var(--db-text-faint);
    margin: 0;
}

.wiki-toc__scroll {
    overflow-y: auto;
    padding: 0.625rem 0.75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,92,231,0.35) transparent;
}
.wiki-toc__scroll::-webkit-scrollbar { width: 3px; }
.wiki-toc__scroll::-webkit-scrollbar-thumb { background: rgba(108,92,231,0.35); border-radius: 2px; }

.wiki-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wiki-toc__list > li > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--db-text-muted);
    text-decoration: none;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    line-height: 1.35;
    margin-bottom: 1px;
}
.wiki-toc__list > li > a:hover,
.wiki-toc__list > li > a.is-active {
    color: var(--db-purple-light);
    background: rgba(108,92,231,0.1);
    border-left-color: var(--db-purple);
}
.wiki-toc__list > li > a .toc-icon {
    font-size: 0.875rem;
    flex-shrink: 0;
    opacity: 0.7;
}
.wiki-toc__list li.is-sub > a {
    padding: 0.3rem 0.625rem 0.3rem 1.75rem;
    font-size: 0.75rem;
    color: var(--db-text-faint);
    font-weight: 400;
    border-left-color: transparent;
}
.wiki-toc__list li.is-sub > a:hover,
.wiki-toc__list li.is-sub > a.is-active {
    color: var(--db-cyan-light);
    background: rgba(0,206,201,0.07);
    border-left-color: var(--db-cyan);
}

/* ── Main content column ───────────────────────────────────────── */
.wiki-content {
    min-width: 0;
    max-width: 800px;
}

/* ── Scroll offset ─────────────────────────────────────────────── */
.wiki-section,
.wiki-subsection {
    scroll-margin-top: calc(var(--db-nav-height) + 2rem);
}

/* ── Section block ─────────────────────────────────────────────── */
.wiki-section-wrap {
    margin-bottom: 1rem;
}

/* ── Section header ────────────────────────────────────────────── */
.wiki-section-header {
    display: flex;
    align-items: flex-start;
    gap: 1.125rem;
    margin: 4.5rem 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
}
.wiki-content > .wiki-section:first-child .wiki-section-header { margin-top: 0; }

.wiki-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(108,92,231,0.2) 0%, rgba(0,206,201,0.2) 100%);
    border: 1px solid rgba(108,92,231,0.3);
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(108,92,231,0.15);
}

.wiki-section-meta { flex: 1; padding-top: 0.125rem; }

.wiki-section-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--db-purple-light);
    display: block;
    margin-bottom: 0.4rem;
}

.wiki-section-title {
    font-family: var(--db-font-heading);
    font-size: clamp(1.5rem, 2.8vw, 2.125rem);
    font-weight: 800;
    color: var(--db-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.wiki-section-reading {
    font-size: 0.6875rem;
    color: var(--db-text-faint);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Subsection heading ────────────────────────────────────────── */
.wiki-h3 {
    font-family: var(--db-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--db-text);
    margin: 2.75rem 0 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    scroll-margin-top: calc(var(--db-nav-height) + 2rem);
}
.wiki-h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: var(--db-grad);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Body text ─────────────────────────────────────────────────── */
.wiki-content p {
    color: var(--db-text-muted);
    line-height: 1.85;
    margin: 0 0 1.125rem;
    font-size: 1rem;
}

.wiki-lead {
    font-size: 1.0625rem !important;
    color: rgba(232,232,240,0.9) !important;
    line-height: 1.75 !important;
    margin-bottom: 1.75rem !important;
    padding: 1.5rem;
    background: rgba(255,255,255,0.025);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--db-purple);
}

/* ── Inline highlights ─────────────────────────────────────────── */
.wiki-hl { color: var(--db-purple-light); font-weight: 600; }
.wiki-hl--cyan { color: var(--db-cyan-light); font-weight: 600; }
.wiki-hl--yellow { color: var(--db-yellow); font-weight: 600; }

/* ── Key stat callouts ─────────────────────────────────────────── */
.wiki-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.wiki-stat-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.wiki-stat-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--db-grad-subtle);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wiki-stat-box:hover::before { opacity: 1; }
.wiki-stat-box__num {
    font-family: var(--db-font-heading);
    font-size: 2rem;
    font-weight: 800;
    background: var(--db-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    margin-bottom: 0.375rem;
    position: relative;
}
.wiki-stat-box__label {
    font-size: 0.8rem;
    color: var(--db-text-muted);
    line-height: 1.4;
    position: relative;
}

/* ── Callout boxes ─────────────────────────────────────────────── */
.wiki-callout {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    border: 1px solid;
    margin: 1.75rem 0;
}
.wiki-callout__icon {
    font-size: 1.375rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
    line-height: 1;
}
.wiki-callout__body { flex: 1; }
.wiki-callout__title {
    font-family: var(--db-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem;
}
.wiki-callout__body p {
    font-size: 0.9375rem !important;
    margin: 0 !important;
    line-height: 1.65 !important;
}

.wiki-callout--info {
    background: rgba(108,92,231,0.07);
    border-color: rgba(108,92,231,0.25);
}
.wiki-callout--info .wiki-callout__title { color: var(--db-purple-light); }
.wiki-callout--info .wiki-callout__body p { color: rgba(162,155,254,0.8) !important; }

.wiki-callout--tip {
    background: rgba(0,206,201,0.06);
    border-color: rgba(0,206,201,0.25);
}
.wiki-callout--tip .wiki-callout__title { color: var(--db-cyan-light); }
.wiki-callout--tip .wiki-callout__body p { color: rgba(129,236,236,0.8) !important; }

.wiki-callout--insight {
    background: rgba(255,196,0,0.06);
    border-color: rgba(255,196,0,0.25);
}
.wiki-callout--insight .wiki-callout__title { color: var(--db-yellow); }
.wiki-callout--insight .wiki-callout__body p { color: rgba(255,230,100,0.8) !important; }

.wiki-callout--warning {
    background: rgba(255,100,100,0.06);
    border-color: rgba(255,100,100,0.25);
}
.wiki-callout--warning .wiki-callout__title { color: #ff9898; }
.wiki-callout--warning .wiki-callout__body p { color: rgba(255,180,180,0.8) !important; }

/* ── Key takeaway (pull quote style) ──────────────────────────── */
.wiki-takeaway {
    margin: 2rem 0;
    padding: 1.75rem 2rem;
    background: var(--db-grad-subtle);
    border-radius: 16px;
    border: 1px solid rgba(108,92,231,0.2);
    position: relative;
    overflow: hidden;
}
.wiki-takeaway::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 1.25rem;
    font-family: Georgia, serif;
    font-size: 6rem;
    line-height: 1;
    background: var(--db-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    pointer-events: none;
}
.wiki-takeaway__text {
    font-family: var(--db-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--db-text) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    position: relative;
}
.wiki-takeaway__source {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--db-text-faint);
    font-style: normal;
}

/* ── Definition boxes ──────────────────────────────────────────── */
.wiki-definition {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid var(--db-cyan);
    border-radius: 0 12px 12px 0;
    padding: 1.125rem 1.375rem;
    margin: 1.5rem 0;
}
.wiki-definition__term {
    font-family: var(--db-font-heading);
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--db-cyan-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.4rem;
}
.wiki-definition p {
    font-size: 0.9375rem !important;
    margin: 0 !important;
    line-height: 1.65 !important;
    color: var(--db-text-muted) !important;
}

/* ── Numbered steps — BUG FIX + redesign ──────────────────────── */
.wiki-steps {
    counter-reset: wiki-step;
    list-style: none;
    margin: 1.5rem 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.wiki-steps li {
    counter-increment: wiki-step;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.125rem;
    padding: 1.375rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.wiki-steps li:last-child { border-bottom: none; }
.wiki-steps li::before {
    content: counter(wiki-step);
    grid-column: 1;
    grid-row: 1 / 3;          /* span both text rows */
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--db-grad);
    color: #fff;
    font-family: var(--db-font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(108,92,231,0.35);
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.wiki-steps li strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    font-family: var(--db-font-heading);
    font-weight: 700;
    color: var(--db-text);
    font-size: 1rem;
    margin-bottom: 0.375rem;
    line-height: 1.3;
}
.wiki-steps li span {
    grid-column: 2;
    grid-row: 2;
    display: block;
    font-size: 0.9125rem;
    color: var(--db-text-muted);
    line-height: 1.7;
}

/* ── Bullet list ───────────────────────────────────────────────── */
.wiki-list {
    list-style: none;
    margin: 0.875rem 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.wiki-list li {
    padding: 0.625rem 0.875rem 0.625rem 2.25rem;
    position: relative;
    font-size: 0.9375rem;
    color: var(--db-text-muted);
    line-height: 1.65;
    background: rgba(255,255,255,0.015);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s ease;
}
.wiki-list li:hover { background: rgba(255,255,255,0.03); }
.wiki-list li::before {
    content: '→';
    position: absolute;
    left: 0.75rem;
    top: 0.6rem;
    color: var(--db-purple-light);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ── Two-col compare ───────────────────────────────────────────── */
.wiki-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.wiki-compare__card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 1.375rem 1.25rem;
}
.wiki-compare__card--a { border-top: 2px solid var(--db-purple); }
.wiki-compare__card--b { border-top: 2px solid var(--db-cyan); }
.wiki-compare__label {
    font-family: var(--db-font-heading);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wiki-compare__card--a .wiki-compare__label { color: var(--db-purple-light); }
.wiki-compare__card--b .wiki-compare__label { color: var(--db-cyan-light); }
.wiki-compare__card p {
    font-size: 0.9rem !important;
    color: var(--db-text-muted) !important;
    margin: 0 0 0.625rem !important;
    line-height: 1.65 !important;
}
.wiki-compare__card p:last-child { margin-bottom: 0 !important; }

/* ── Best approach panel ───────────────────────────────────────── */
.wiki-best {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: 16px;
    padding: 2rem 2.25rem;
    margin: 2.5rem 0;
    position: relative;
    overflow: hidden;
}
.wiki-best::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--db-grad);
}
.wiki-best::after {
    content: '✦';
    position: absolute;
    bottom: -0.5rem;
    right: 1.5rem;
    font-size: 6rem;
    line-height: 1;
    background: var(--db-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.04;
    pointer-events: none;
}
.wiki-best__label {
    font-family: var(--db-font-heading);
    font-weight: 800;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--db-yellow);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wiki-best__title {
    font-family: var(--db-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--db-text);
    margin: 0 0 1.25rem;
    line-height: 1.3;
}
.wiki-best p {
    font-size: 0.9375rem !important;
    color: var(--db-text-muted) !important;
    margin: 0 0 0.875rem !important;
    line-height: 1.75 !important;
}
.wiki-best p:last-child { margin-bottom: 0 !important; }
.wiki-best ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.wiki-best ul li {
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    position: relative;
    font-size: 0.9125rem;
    color: var(--db-text-muted);
    line-height: 1.6;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.wiki-best ul li::before {
    content: '✓';
    position: absolute;
    left: 0.875rem;
    top: 0.625rem;
    color: var(--db-cyan);
    font-weight: 800;
    font-size: 0.8125rem;
}
.wiki-best ul li strong { color: var(--db-text); font-weight: 600; }

/* ── Mistake panel ─────────────────────────────────────────────── */
.wiki-mistakes {
    background: rgba(255,80,80,0.04);
    border: 1px solid rgba(255,80,80,0.15);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin: 2rem 0;
}
.wiki-mistakes__label {
    font-family: var(--db-font-heading);
    font-weight: 800;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff9898;
    margin: 0 0 0.5rem;
}
.wiki-mistakes__title {
    font-family: var(--db-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--db-text);
    margin: 0 0 1rem;
}
.wiki-mistakes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.wiki-mistakes ul li {
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--db-text-muted);
    line-height: 1.6;
}
.wiki-mistakes ul li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #ff7878;
    font-weight: 800;
    font-size: 0.75rem;
}

/* ── Metric chips ──────────────────────────────────────────────── */
.wiki-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}
.wiki-metric {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    color: var(--db-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.wiki-metric__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--db-grad);
    flex-shrink: 0;
}

/* ── Funnel diagram ────────────────────────────────────────────── */
.wiki-funnel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 1.5rem 0 2rem;
    max-width: 580px;
}
.wiki-funnel__stage {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 6px;
    transition: opacity 0.2s;
}
.wiki-funnel__stage:hover { opacity: 0.9; }
.wiki-funnel__stage:nth-child(1) { background: rgba(108,92,231,0.2); margin: 0; }
.wiki-funnel__stage:nth-child(2) { background: rgba(108,92,231,0.16); margin: 0 4%; }
.wiki-funnel__stage:nth-child(3) { background: rgba(76,160,210,0.14); margin: 0 8%; }
.wiki-funnel__stage:nth-child(4) { background: rgba(0,206,201,0.16); margin: 0 12%; }
.wiki-funnel__stage:nth-child(5) { background: rgba(0,206,201,0.22); margin: 0 16%; }
.wiki-funnel__num {
    font-family: var(--db-font-heading);
    font-weight: 800;
    font-size: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.wiki-funnel__text { flex: 1; }
.wiki-funnel__name {
    font-family: var(--db-font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--db-text);
    margin-bottom: 0.125rem;
}
.wiki-funnel__desc {
    font-size: 0.8125rem;
    color: var(--db-text-muted);
    line-height: 1.4;
}

/* ── Tables ────────────────────────────────────────────────────── */
.wiki-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
}
.wiki-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 480px;
}
.wiki-table thead tr {
    background: rgba(108,92,231,0.12);
}
.wiki-table th {
    color: var(--db-purple-light);
    font-family: var(--db-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.875rem 1.125rem;
    text-align: left;
    white-space: nowrap;
}
.wiki-table td {
    padding: 0.8125rem 1.125rem;
    color: var(--db-text-muted);
    border-top: 1px solid rgba(255,255,255,0.05);
    line-height: 1.55;
    vertical-align: top;
}
.wiki-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.wiki-table td strong { color: var(--db-text); font-weight: 600; }

/* ── Divider ───────────────────────────────────────────────────── */
.wiki-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 4rem 0;
    position: relative;
}
.wiki-divider::after {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0.5rem;
    color: var(--db-text-faint);
    background: var(--db-bg);
    padding: 0 0.75rem;
}

/* ── Back to top ───────────────────────────────────────────────── */
.wiki-back-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--db-text-faint);
    text-decoration: none;
    margin-top: 2rem;
    padding: 0.4rem 0.875rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 100px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.wiki-back-top:hover {
    color: var(--db-purple-light);
    border-color: rgba(108,92,231,0.3);
}

/* ── Glossary grid ─────────────────────────────────────────────── */
.wiki-glossary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.wiki-glossary__item {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}
.wiki-glossary__term {
    font-family: var(--db-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--db-purple-light);
    margin-bottom: 0.3rem;
}
.wiki-glossary__def {
    font-size: 0.8375rem;
    color: var(--db-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.wiki-hero {
    position: relative;
    overflow: hidden;
    background: var(--db-bg-2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 5.5rem 2rem 4.5rem;
    text-align: center;
}
.wiki-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.wiki-hero__orb--1 {
    width: 500px; height: 500px;
    background: rgba(108,92,231,0.12);
    top: -150px; left: -100px;
}
.wiki-hero__orb--2 {
    width: 400px; height: 400px;
    background: rgba(0,206,201,0.09);
    top: -80px; right: -100px;
}
.wiki-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--db-cyan-light);
    margin-bottom: 1.25rem;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(0,206,201,0.25);
    border-radius: 100px;
    background: rgba(0,206,201,0.06);
    position: relative;
}
.wiki-hero__title {
    font-family: var(--db-font-heading);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 800;
    color: var(--db-text);
    margin: 0 auto 1.25rem;
    max-width: 860px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    position: relative;
}
.wiki-hero__subtitle {
    max-width: 620px;
    margin: 0 auto 2.5rem;
    font-size: 1.0625rem;
    color: var(--db-text-muted);
    line-height: 1.75;
    position: relative;
}
.wiki-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.wiki-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--db-text-faint);
}
.wiki-hero__jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 840px;
    margin: 0 auto;
    position: relative;
}
.wiki-hero__jump a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    font-size: 0.8125rem;
    color: var(--db-text-muted);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wiki-hero__jump a:hover {
    color: var(--db-purple-light);
    background: rgba(108,92,231,0.1);
    border-color: rgba(108,92,231,0.3);
    transform: translateY(-1px);
}

/* ── Section CTA footer ────────────────────────────────────────── */
.wiki-cta-box {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(108,92,231,0.1) 0%, rgba(0,206,201,0.08) 100%);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius: 20px;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}
.wiki-cta-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--db-grad);
}
.wiki-cta-box h2 {
    font-family: var(--db-font-heading);
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--db-text);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.wiki-cta-box p {
    font-size: 1rem !important;
    color: var(--db-text-muted) !important;
    margin: 0 0 1.75rem !important;
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.wiki-cta-box__btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .wiki-wrap {
        grid-template-columns: 240px 1fr;
        gap: 2.5rem;
    }
}
@media (max-width: 860px) {
    .wiki-wrap {
        grid-template-columns: 1fr;
        padding: 2rem 1.25rem 4rem;
    }
    .wiki-toc {
        position: static;
        max-height: none;
        border-radius: 12px;
    }
    .wiki-toc__scroll {
        max-height: 240px;
    }
    .wiki-stat-row { grid-template-columns: 1fr 1fr; }
    .wiki-stat-row .wiki-stat-box:last-child { grid-column: span 2; }
    .wiki-compare { grid-template-columns: 1fr; }
    .wiki-glossary { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .wiki-hero { padding: 4rem 1.25rem 3rem; }
    .wiki-hero__meta { flex-wrap: wrap; gap: 0.75rem; }
    .wiki-best { padding: 1.375rem 1.25rem; }
    .wiki-stat-row { grid-template-columns: 1fr; }
    .wiki-stat-row .wiki-stat-box:last-child { grid-column: auto; }
    .wiki-table-wrap { border-radius: 10px; }
    .wiki-section-header { gap: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}