:root {
    --ink: #0d1118;
    --ink-soft: #101720;
    --panel: #18212c;
    --panel-light: #202b37;
    --line: #303c4c;
    --text: #f4f6f8;
    --muted: #aeb8c5;
    --yellow: #f3c316;
    --yellow-soft: #ffe889;
    --blue: #55a5ef;
}

html { scroll-behavior: smooth; }

body {
    background: var(--ink);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65;
}

a { color: var(--yellow-soft); }
a:hover { color: var(--yellow); }

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: .65rem 1rem;
    color: #111;
    background: var(--yellow);
    border-radius: 0 0 .5rem .5rem;
}

.skip-link:focus { top: 0; }

.site-header {
    color: var(--text);
    background: rgba(24, 33, 44, .98);
    border-bottom: 3px solid var(--yellow);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--text);
    line-height: 1.2;
}

.brand:hover { color: var(--text); }
.brand-mark { color: var(--yellow); font-size: 1.6rem; }
.brand small { display: inline-block; margin-left: .55rem; color: var(--muted); font: .72rem/1.2 Consolas, monospace; }

.navbar { padding: .55rem 0; background: #0b1017; border-top: 1px solid rgba(255,255,255,.06); }
.navbar-brand { color: var(--yellow); font: 700 .95rem/1 Consolas, monospace; letter-spacing: .03em; }
.navbar-brand:hover, .navbar-brand:focus { color: var(--yellow-soft); }
.navbar-nav { gap: .35rem; }
.nav-link { color: #d5dbe2; padding: .45rem .8rem !important; border: 1px solid transparent; border-radius: 2rem; font: .8rem/1.2 Consolas, monospace; }
.nav-link:hover, .nav-link:focus { color: #fff; border-color: var(--line); background: var(--panel); }
.navbar-toggler { border-color: var(--line); filter: invert(1); }

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 35%, rgba(85, 165, 239, .18), transparent 28rem),
        linear-gradient(115deg, #161f2b 0%, #0d131b 60%, #17140b 100%);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .18;
    background: linear-gradient(105deg, transparent 0 64%, var(--yellow) 64% 65%, transparent 65% 100%);
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .07;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.py-lg-6 { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; }
.breadcrumb, .breadcrumb a { color: var(--muted); font: .78rem/1.2 Consolas, monospace; text-decoration: none; }
.breadcrumb-item.active { color: var(--yellow-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: #667282; }
.eyebrow, .section-index, .panel-label { color: var(--yellow); font: 700 .76rem/1.2 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 900px; font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.hero h1 span { color: var(--yellow-soft); }
.hero .lead { max-width: 770px; color: #d2d8df; }
.btn { border-radius: 2rem; font-weight: 700; }
.btn-warning { color: #111; background: var(--yellow); border-color: var(--yellow); }
.btn-warning:hover { color: #111; background: #ffd83b; border-color: #ffd83b; transform: translateY(-1px); }
.btn-outline-light { border-color: #617085; }

.hero-panel {
    padding: 1.75rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(24, 33, 44, .88);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .28);
}

.hero-panel strong { display: block; margin-top: .55rem; font-size: 1.5rem; }
.hero-panel li { padding: .34rem 0; color: #c9d1da; font-size: .94rem; }
.hero-panel li::first-letter { color: var(--blue); }

.intro-strip { background: var(--panel); border-block: 1px solid var(--line); }
.intro-strip p { font: .78rem/1.7 Consolas, monospace; text-transform: uppercase; letter-spacing: .025em; }
.intro-strip p span { color: var(--muted); }
.intro-strip a { font-weight: 700; text-decoration: none; }

.section-space { padding: 6rem 0; }
.section-alt { background: var(--ink-soft); border-block: 1px solid rgba(255,255,255,.06); }
.section-heading { max-width: 760px; }
.section-heading h2, .section-alt h2, .safety-section h2 { margin: .65rem 0 1rem; font-weight: 800; letter-spacing: -.025em; }
.section-heading p, .text-muted-light { color: var(--muted); }

.chapter-card {
    display: flex;
    flex-direction: column;
    padding: 1.55rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--panel);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.chapter-card:hover { transform: translateY(-4px); border-color: #526075; box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.chapter-number { color: var(--yellow); font: 700 .72rem/1.2 Consolas, monospace; letter-spacing: .08em; }
.status { padding: .22rem .55rem; border: 1px solid #445165; border-radius: 2rem; color: var(--muted); font: .66rem/1.2 Consolas, monospace; text-transform: uppercase; }
.status-live { color: #9be4b3; border-color: #327449; background: rgba(50,116,73,.15); }
.chapter-card h3 { margin: 1.25rem 0 .7rem; font-size: 1.28rem; font-weight: 750; }
.chapter-card p { color: var(--muted); font-size: .94rem; }
.chapter-keywords { color: #8290a0; font: .72rem/1.2 Consolas, monospace; text-transform: uppercase; }
.card-link { flex-shrink: 0; font-size: .88rem; font-weight: 700; text-decoration: none; }
.card-link.is-pending { color: #9ba5b1; }

.process-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.process-list li { display: flex; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.process-list > li > span { color: var(--yellow); font: 700 1rem/1.4 Consolas, monospace; }
.process-list strong, .process-list small { display: block; }
.process-list small { margin-top: .25rem; color: var(--muted); }

.formula-card { padding: 1.6rem; border-top: 3px solid var(--yellow); border-radius: 0 0 .8rem .8rem; background: var(--panel); }
.formula-card > span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.formula-card strong { display: block; margin: 1rem 0; color: #fff; font: 700 1.45rem/1.3 Consolas, monospace; }
.formula-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.source-note { color: #8e9aa9; font-size: .82rem; }

.safety-section { background: #201d12; border-block: 1px solid #5d501b; }
.safety-section p { color: #d4cfbb; }

.site-footer { background: #19212b; color: #99a3af; border-top: 1px solid var(--line); }
.footer-home { color: var(--yellow-soft); font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.footer-links a, .site-footer p a { color: var(--yellow-soft); text-decoration: none; }
.site-footer p { margin-bottom: .55rem; font: .78rem/1.5 Consolas, monospace; }

@media (max-width: 991.98px) {
    .py-lg-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
    .navbar-collapse { padding-top: .8rem; }
    .nav-link { border-radius: .4rem; }
}

@media (max-width: 575.98px) {
    .brand small { display: block; margin: .25rem 0 0; }
    .brand strong { font-size: .85rem; }
    .hero h1 { font-size: clamp(2.45rem, 13vw, 3.7rem); }
    .section-space { padding: 4.25rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}