:root {
    --bg: #06101a;
    --bg-2: #0a1724;
    --card: rgba(16, 31, 45, .76);
    --card-2: rgba(10, 23, 35, .92);
    --surface: rgba(15, 27, 39, .92);
    --surface-soft: rgba(255,255,255,.02);
    --line: rgba(255,255,255,.10);
    --text: #f7f9fb;
    --muted: #9dacbb;
    --heading: #ffffff;
    --orange: #ff9500;
    --orange-2: #ffb23e;
    --shadow: 0 18px 55px rgba(0,0,0,.24);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
}

html[data-theme="light"] {
    --bg: #fbf7ef;
    --bg-2: #f4edde;
    --card: rgba(255, 252, 246, .95);
    --card-2: rgba(255, 251, 244, .98);
    --surface: rgba(255, 252, 246, .98);
    --surface-soft: rgba(143, 108, 59, .05);
    --line: rgba(83, 61, 28, .12);
    --text: #332717;
    --muted: #7e6d59;
    --heading: #20180d;
    --shadow: 0 16px 45px rgba(72,52,20,.08);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        --bg: #fbf7ef;
        --bg-2: #f4edde;
        --card: rgba(255, 252, 246, .95);
        --card-2: rgba(255, 251, 244, .98);
        --surface: rgba(255, 252, 246, .98);
        --surface-soft: rgba(143, 108, 59, .05);
        --line: rgba(83, 61, 28, .12);
        --text: #332717;
        --muted: #7e6d59;
        --heading: #20180d;
        --shadow: 0 16px 45px rgba(72,52,20,.08);
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 10%, rgba(23,61,92,.22), transparent 36%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.narrow { width: min(940px, calc(100% - 40px)); }

.site-header {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}
.header-inner { min-height: 74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.header-controls { display:flex; align-items:center; gap:18px; }
.brand { font-size: 30px; font-weight: 850; letter-spacing: -1px; color: var(--heading); }
.brand span { color: var(--orange); }
.nav { display:flex; align-items:center; gap:28px; color:var(--text); }
.nav a { font-size: 15px; transition:.2s ease; color: var(--muted); }
.nav a:hover { color: var(--orange-2); }
.theme-cycle {
    appearance:none; border:1px solid var(--line); width:42px; height:42px; border-radius:50%; cursor:pointer;
    display:grid; place-items:center; background:color-mix(in srgb, var(--surface) 92%, transparent); color:var(--muted); transition:.18s ease;
}
.theme-cycle:hover { color: var(--heading); transform: translateY(-1px); }
.theme-icon { display:grid; place-items:center; width:18px; height:18px; }
.theme-icon svg { width:100%; height:100%; }
.btc-mark, .coin, .icon {
    display:grid; place-items:center; border-radius:50%;
    background: linear-gradient(145deg, var(--orange-2), var(--orange)); color:white; font-weight:800;
}
.btc-mark { width:42px; height:42px; font-size:25px; transform:rotate(10deg); }

.hero { padding: 82px 0 56px; text-align:center; }
.eyebrow { margin:0 0 12px; color:var(--orange-2); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; }
h1 { margin:0 auto; max-width:960px; font-size: clamp(38px, 5vw, 68px); line-height:1.05; letter-spacing:-2.4px; color: var(--heading); }
.lead { margin:20px auto 0; color:var(--muted); font-size:20px; max-width: 860px; }

.countdown { margin:46px auto 0; max-width:980px; display:grid; grid-template-columns: repeat(7, auto); justify-content:center; align-items:center; gap:18px; }
.time-card {
    width:190px; min-height:165px; padding:24px 18px; display:flex; flex-direction:column; justify-content:center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--card-2) 96%, transparent));
    border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.025);
}
.time-card strong { color:var(--orange); font-size:64px; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.time-card span { margin-top:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-size:14px; }
.separator { color:#8392a0; font-size:34px; font-weight:700; }
.estimate-note { margin:20px 0 0; color:var(--muted); font-size:14px; }
.estimate-note strong { color:var(--heading); }

.market-grid { margin-top: 32px; display: grid; grid-template-columns: 1.18fr .82fr; gap: 16px; text-align: left; }
.market-card {
    position: relative; overflow: hidden; min-height: 340px; padding: 24px 26px 20px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--card-2) 96%, transparent));
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
}
.market-card::before {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(2px); pointer-events: none;
}
.price-card::before { right: -120px; top: -145px; background: radial-gradient(circle, rgba(255,149,0,.18), transparent 68%); }
.fear-card::before { left: -140px; bottom: -170px; background: radial-gradient(circle, rgba(83,216,140,.14), transparent 68%); }
.market-card > * { position: relative; z-index: 1; }
.market-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.market-card h2 { margin:2px 0 0; font-size:24px; letter-spacing:-.5px; color: var(--heading); }
.market-kicker { margin:0 0 3px; color:var(--orange-2); font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.15em; }
.currency-switch { display:flex; padding:4px; gap:2px; background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--line); border-radius:999px; }
.currency-btn { appearance:none; border:0; border-radius:999px; padding:8px 11px; cursor:pointer; color:var(--muted); background:transparent; font:inherit; font-size:12px; font-weight:800; transition:.18s ease; }
.currency-btn:hover { color:var(--heading); }
.currency-btn.active { color:#111820; background:var(--orange); box-shadow:0 5px 18px rgba(255,149,0,.22); }
.price-main { display:flex; align-items:center; gap:18px; margin-top:33px; }
.market-btc-icon {
    flex:0 0 62px; width:62px; height:62px; display:grid; place-items:center; border-radius:16px;
    color:#fff; background:linear-gradient(145deg,var(--orange-2),var(--orange)); font-size:37px; font-weight:850;
    box-shadow:0 12px 35px rgba(255,149,0,.20); transform:rotate(4deg);
}
#btc-price { display:block; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-1.8px; font-variant-numeric:tabular-nums; color: var(--heading); }
.market-change { display:inline-flex; margin-top:10px; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.market-change.positive { color:#3dbb76; }
.market-change.negative { color:#e86f7d; }
.market-mini-stats { margin-top: 26px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.market-mini-stats div { padding: 14px 16px; border:1px solid var(--line); background: var(--surface-soft); border-radius: var(--radius-md); }
.market-mini-stats span { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.market-mini-stats strong { display:block; color:var(--heading); font-size:18px; font-variant-numeric:tabular-nums; }
.market-meta { position:absolute; left:26px; right:26px; bottom:19px; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-size:11px; }
.market-meta a, .fear-meta-row a { color:var(--muted); transition:.18s ease; }
.market-meta a:hover, .fear-meta-row a:hover { color:var(--orange-2); }
.live-pill { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(94,227,164,.22); border-radius:999px; color:#53d88c; font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; background:rgba(94,227,164,.05); }
.live-pill i { width:7px; height:7px; border-radius:50%; background:#53d88c; box-shadow:0 0 0 4px rgba(94,227,164,.09); }

.fear-card { min-height: 470px; }
.fear-now { margin-top:14px; color:var(--muted); font-size:17px; }
.fear-state { margin-left:6px; font-size:26px; font-weight:850; color:var(--heading); }
.fear-state.extreme-fear, .fear-state.fear { color:#ef815f; }
.fear-state.neutral { color:#cab94b; }
.fear-state.greed { color:#8fc94b; }
.fear-state.extreme-greed { color:#4fc76f; }
.fear-gauge-box { position:relative; width:min(100%, 420px); margin:18px auto 0; aspect-ratio:3 / 2; }
.fear-gauge-svg { display:block; width:100%; height:100%; overflow:visible; }
.fear-needle { stroke:#b1b7c1; stroke-width:10; stroke-linecap:round; filter:drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.fear-hub { fill:#aab1ba; }
.fear-hub-text { fill:#fff; font-size:28px; font-weight:850; text-anchor:middle; }
.fear-badge {
    position:absolute; min-width:52px; height:52px; padding:0 12px; border-radius:999px; display:grid; place-items:center;
    color:#fff; font-size:21px; font-weight:850; background:#8fc94b; box-shadow:0 12px 24px rgba(0,0,0,.12);
    transform: translate(-50%, -50%); z-index:2;
}
.fear-badge.extreme-fear, .fear-badge.fear { background:#ef815f; }
.fear-badge.neutral { background:#cab94b; color:#26313a; }
.fear-badge.greed { background:#8fc94b; }
.fear-badge.extreme-greed { background:#4fc76f; color:#173121; }
.fear-scale-note { margin: 2px 0 0; text-align:center; color:var(--muted); font-size:12px; }
.fear-meta-row { margin-top:26px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; flex-wrap:wrap; }

.market-grid.loading .market-card { opacity:.92; }
.market-grid.market-error .live-pill { color:#ff9aa3; border-color:rgba(255,120,133,.18); background:rgba(255,120,133,.05); }
.market-grid.market-error .live-pill i { background:#ff7885; box-shadow:0 0 0 4px rgba(255,120,133,.08); }

.stats-grid { margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; text-align:left; }
.stat-card { min-height:102px; padding:18px; display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.icon { flex:0 0 44px; width:44px; height:44px; font-size:21px; }
.stat-card span { display:block; color:var(--muted); font-size:13px; margin-bottom:4px; }
.stat-card strong { display:block; font-size:20px; font-variant-numeric:tabular-nums; color: var(--heading); }
.stat-card em { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-style:normal; }

.content-section { padding:14px 0 56px; }
.about-card { display:grid; grid-template-columns:96px 1fr; gap:26px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 32px; box-shadow:var(--shadow); }
.coin { width:78px; height:78px; font-size:47px; transform:rotate(8deg); }
h2 { margin:0 0 12px; font-size:30px; letter-spacing:-.7px; color:var(--heading); }
.about-card p, .curve-head p, .prose-card p { margin:7px 0; color:var(--muted); line-height:1.72; }
.text-link { color:var(--orange); font-weight:750; }
.text-link:hover { text-decoration:underline; }

.history-section { padding:24px 0 76px; }
.section-heading { text-align:center; margin-bottom:30px; }
.timeline { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.timeline::before { content:""; position:absolute; left:8%; right:8%; top:14px; height:2px; background:color-mix(in srgb,var(--muted) 55%,transparent); z-index:0; }
.milestone { position:relative; z-index:1; padding:40px 16px 18px; text-align:center; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-md); }
.milestone .dot { position:absolute; top:0; left:50%; translate:-50% -1px; width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:2px solid color-mix(in srgb,var(--muted) 75%,white 10%); font-size:14px; }
.milestone strong { display:block; font-size:27px; color:var(--heading); }
.milestone small { display:block; color:var(--muted); margin:6px 0 10px; }
.milestone p { margin:0; color:var(--muted); font-size:14px; }
.milestone.next { border-color:rgba(255,149,0,.70); box-shadow:0 16px 36px rgba(255,149,0,.05); }
.milestone.next strong { color:var(--orange); }
.milestone.next .dot { border-color:var(--orange); }

.curve-card { margin-top:52px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 28px 24px; box-shadow:var(--shadow); text-align:left; }
.curve-head { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; }
.curve-head > div:first-child { max-width:760px; }
.curve-head h2 { margin-bottom:8px; }
.chart-legend { display:flex; flex-direction:column; gap:10px; flex:0 0 auto; padding-top:6px; color:var(--muted); font-size:12px; }
.chart-legend span { display:flex; align-items:center; gap:8px; }
.chart-legend i { width:24px; height:3px; border-radius:999px; }
.legend-reward { background:#f16f72; }
.legend-supply { background:#92c779; }
.curve-scroll { overflow-x:auto; margin-top:16px; }
.curve-chart-area { position:relative; min-width:780px; }
.curve-chart { display:block; width:100%; height:auto; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.axis-label { fill:var(--muted); font-size:11px; }
.axis-title { fill:var(--muted); font-size:11px; font-weight:700; }
.supply-line { stroke:#92c779; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.reward-line { stroke:#f16f72; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.supply-dot { fill:#92c779; stroke:#0d1b28; stroke-width:2; }
.reward-dot { fill:#f16f72; stroke:#0d1b28; stroke-width:2; }
.chart-hit { fill:transparent; cursor:pointer; }
.chart-node { cursor:pointer; transition:transform .18s ease; }
.chart-tooltip {
    position:absolute; z-index:5; min-width:160px; max-width:220px; padding:12px 14px; border-radius:12px;
    background: color-mix(in srgb, var(--surface) 98%, transparent); border:1px solid var(--line); color:var(--heading);
    box-shadow: 0 16px 40px rgba(0,0,0,.18); pointer-events:none;
}
.chart-tooltip strong { display:block; font-size:13px; margin-bottom:6px; }
.chart-tooltip span { display:block; color:var(--muted); font-size:12px; line-height:1.5; }

.site-footer { border-top:1px solid var(--line); padding:28px 0 36px; text-align:center; color:var(--muted); font-size:13px; }
.site-footer p { margin:5px 0; }
.site-footer a { color:var(--orange-2); }

.faq-page { padding-bottom:72px; }
.faq-hero { padding:76px 0 38px; text-align:center; }
.faq-hero h1 { font-size:clamp(38px,4.5vw,62px); }
.faq-content { padding:0 0 36px; }
.prose-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 38px; box-shadow:var(--shadow); }
.prose-card h2 { margin-top:38px; font-size:27px; }
.prose-card h2:first-child { margin-top:0; }
.prose-card strong { color:var(--heading); }
.table-wrap { overflow-x:auto; margin:20px 0 30px; border:1px solid var(--line); border-radius:var(--radius-md); }
.halving-table { width:100%; min-width:720px; border-collapse:collapse; }
.halving-table th, .halving-table td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
.halving-table th { color:var(--heading); background:var(--surface-soft); }
.halving-table td { color:var(--muted); }
.halving-table tr:last-child td { border-bottom:0; }

@media (max-width:1080px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:940px) {
    .countdown { grid-template-columns:1fr 1fr; gap:12px; }
    .separator { display:none; }
    .time-card { width:auto; }
    .market-grid { grid-template-columns:1fr; }
    .timeline { grid-template-columns:1fr; }
    .timeline::before { display:none; }
    .milestone { padding-top:18px; }
    .milestone .dot { position:static; translate:none; margin:0 auto 10px; }
    .curve-head { flex-direction:column; }
    .chart-legend { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:720px) { .nav a:not([href$="faq.php"]) { display:none; } }
@media (max-width:620px) {
    .container, .narrow { width:min(100% - 26px,1180px); }
    .header-inner { min-height:64px; }
    .brand { font-size:24px; }
    .header-controls { gap:10px; }
    .btc-mark { display:none; }
    .hero { padding-top:54px; }
    h1 { font-size:40px; letter-spacing:-1.5px; }
    .lead { font-size:17px; }
    .time-card { min-height:132px; }
    .time-card strong { font-size:46px; }
    .market-card { padding:21px 18px 20px; min-height:340px; }
    .market-card h2 { font-size:20px; }
    #btc-price { font-size:35px; }
    .market-btc-icon { width:52px; height:52px; flex-basis:52px; font-size:31px; }
    .market-mini-stats { grid-template-columns:1fr; }
    .market-meta { left:18px; right:18px; flex-direction:column; gap:4px; }
    .fear-card { min-height:430px; }
    .fear-badge { min-width:48px; height:48px; font-size:20px; }
    .fear-meta-row { margin-top:18px; font-size:11px; }
    .stats-grid { grid-template-columns:1fr; }
    .about-card { grid-template-columns:1fr; text-align:center; padding:24px 20px; }
    .coin { margin:0 auto; }
    .curve-card { padding:22px 18px; }
    .prose-card { padding:25px 20px; }
}