/*
 * Public landing page (src/api/views/pages/home.ejs).
 * Standalone like /about: its own dark palette, no Bootstrap. Every color is a
 * token below; the grid-motion canvas reads --card / --primary / --destructive
 * / --muted-foreground at runtime, so those names are kept.
 */
:root {
    color-scheme: dark;
    --background:        oklch(0.155 0.009 168);
    --background-2:      oklch(0.175 0.011 168);
    --card:              oklch(0.198 0.012 168);
    --card-2:            oklch(0.225 0.014 168);
    --border:            oklch(0.285 0.014 168);
    --border-soft:       oklch(0.245 0.012 168);
    --foreground:        oklch(0.965 0.006 160);
    --muted-foreground:  oklch(0.715 0.013 168);
    --dim:               oklch(0.560 0.013 168);
    --primary:           oklch(0.780 0.165 162);
    --primary-strong:    oklch(0.830 0.170 162);
    --primary-ink:       oklch(0.190 0.035 165);
    --primary-soft:      oklch(0.780 0.165 162 / 0.12);
    --primary-glow:      oklch(0.780 0.165 162 / 0.22);
    --destructive:       oklch(0.680 0.190 22);
    --destructive-soft:  oklch(0.680 0.190 22 / 0.12);
    --grid-line:         oklch(0.965 0.006 160 / 0.045);
    --nav-bg:            oklch(0.155 0.009 168 / 0.78);
    --shadow:            0 24px 80px oklch(0 0 0 / 0.45);
    --coin-btc:          oklch(0.760 0.160 62);
    --coin-eth:          oklch(0.680 0.110 275);
    --coin-sol:          oklch(0.700 0.180 310);
    --coin-hype:         oklch(0.800 0.130 175);
    --coin-eth-disc:     oklch(0.930 0.008 250);
    --coin-hype-disc:    oklch(0.245 0.032 179);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --wrap: 1160px;
    --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font: 400 16px/1.6 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.08; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); }
.accent { color: var(--primary); }
.muted { color: var(--muted-foreground); }

/* ── Buttons, pills ─────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; padding: 0 22px;
    border-radius: 10px; border: 1px solid transparent;
    font: 600 15px/1 var(--font-sans);
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--primary); color: var(--primary-ink);
    box-shadow: 0 0 0 1px var(--primary-glow), 0 10px 30px var(--primary-glow);
}
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { border-color: var(--border); color: var(--foreground); background: var(--card); }
.btn-ghost:hover { border-color: var(--dim); background: var(--card-2); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn:focus-visible, .nav a:focus-visible, summary:focus-visible, .lang-link:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 3px;
}

.pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card);
    font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-foreground);
}
.pill b { color: var(--foreground); font-weight: 600; }
.pill > span:not(.dot), .pill b { white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.dot.live { box-shadow: 0 0 0 0 var(--primary-glow); animation: pulse 2s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 var(--primary-glow); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.eyebrow {
    display: block; margin-bottom: 14px;
    font: 500 12px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
    color: var(--primary);
}

/* ── Nav ────────────────────────────────────────── */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border-soft);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
/* Same lockup and wave as the login header (login-redesign.css gs-hue-wave). */
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--font-mono); letter-spacing: .06em; }
.brand-mark {
    width: 30px; height: 30px; flex-shrink: 0; display: block;
    filter: drop-shadow(0 0 10px oklch(0.755 0.185 162 / 0.35));
    transition: filter .25s ease;
}
.brand:hover .brand-mark { filter: drop-shadow(0 0 18px oklch(0.8 0.19 162 / 0.55)); }
.brand-word { display: inline-flex; }
.brand-word span {
    display: inline-block;
    color: oklch(0.8 0.17 162);
    animation: home-hue-wave 3.5s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.12s);
}
@keyframes home-hue-wave {
    0%, 100% { color: oklch(0.72 0.17 160); text-shadow: 0 0 14px oklch(0.72 0.19 162 / 0.25); }
    25%      { color: oklch(0.87 0.14 168); text-shadow: 0 0 24px oklch(0.8 0.19 162 / 0.45); }
    50%      { color: oklch(0.8 0.18 176);  text-shadow: 0 0 18px oklch(0.76 0.18 168 / 0.35); }
    75%      { color: oklch(0.84 0.16 158); text-shadow: 0 0 20px oklch(0.78 0.19 160 / 0.4); }
}
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--muted-foreground); }
.nav-links a:hover { color: var(--foreground); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-login { font-size: 14px; color: var(--muted-foreground); padding: 0 8px; }
.nav-login:hover { color: var(--foreground); }
.nav-toggle {
    display: none; margin-left: auto;
    width: 40px; height: 40px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card); color: var(--foreground);
    font-size: 20px; cursor: pointer;
}
.nav-mobile { display: none; }

/* ── Hero ───────────────────────────────────────── */
/* overflow-x: clip keeps the 900px glow below from widening the page on phones
   (mobile browsers still pan into it despite body's overflow-x: hidden); unlike
   hidden it leaves the glow free to spill above the hero. */
.hero { position: relative; padding: 88px 0 56px; text-align: center; isolation: isolate; overflow-x: clip; }
.hero::before {
    content: ""; position: absolute; inset: -64px 0 -120px; z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero::after {
    content: ""; position: absolute; z-index: -1;
    left: 50%; top: -120px; width: 900px; height: 520px; transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--primary-glow), transparent);
    opacity: .55; pointer-events: none;
}
.hero h1 { margin-top: 26px; font-size: clamp(40px, 7vw, 76px); font-weight: 600; }
.hero h1 .soft { color: var(--dim); }
.hero .lead {
    max-width: 640px; margin: 22px auto 0;
    font-size: clamp(16px, 2vw, 18.5px); color: var(--muted-foreground);
}
.cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.tags {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px;
    font: 500 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.tags li { display: inline-flex; align-items: center; gap: 8px; }
.tags i { color: var(--primary); font-size: 13px; }

/* ── Product window ─────────────────────────────── */
.showcase { padding: 8px 0 40px; }
.window {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--background-2); box-shadow: var(--shadow), 0 0 0 1px var(--primary-soft);
    overflow: hidden;
}
/* Panel tags: the chart is labelled a simulation, the feed is live. */
.tag {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
    font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.tag-sim { border: 1px solid var(--border); color: var(--muted-foreground); }
.tag-sim i { font-size: 12px; }
.tag-live { background: var(--primary-soft); color: var(--primary); }
.panel-sub { margin: -2px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted-foreground); }
.panel-foot.stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.feed-foot-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.window-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.panel { padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; }
.panel + .panel { border-left: 1px solid var(--border-soft); }
.panel-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 12px;
    font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.panel-head strong { color: var(--foreground); font-weight: 600; letter-spacing: .06em; }
/* The chart stretches to match the feed panel beside it (grid-motion.js
   re-measures through a ResizeObserver). */
.canvas-wrap {
    position: relative; flex: 1; min-height: 300px;
    border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden;
    background: var(--card);
}
#grid-anim { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel-foot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px;
    margin-top: 12px; font: 500 12px/1.3 var(--font-mono); color: var(--dim);
}
.step { color: var(--primary); font-weight: 600; min-height: 1.3em; }
.legend { display: inline-flex; gap: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend .buy { background: var(--destructive); }
.legend .sell { background: var(--primary); }

.feed { display: flex; flex-direction: column; }
.feed li { border-bottom: 1px solid var(--border-soft); }
.feed li:last-child { border-bottom: 0; }
.feed-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14px; align-items: center; gap: 14px;
    margin: 0 -8px; padding: 11px 8px; border-radius: var(--radius-sm);
    font: 500 13.5px/1.2 var(--font-mono); color: inherit;
}
a.feed-row { transition: background .15s ease; }
a.feed-row:hover, a.feed-row:focus-visible { background: var(--primary-soft); }
.feed-go { color: var(--dim); font-size: 12px; text-align: right; }
a.feed-row:hover .feed-go { color: var(--primary); }
.feed li.is-new { animation: feed-in .6s ease; }
@keyframes feed-in { from { background: var(--primary-soft); } to { background: transparent; } }
.feed-pair { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.feed-val { color: var(--primary); font-weight: 600; text-align: right; }
.feed-ago { color: var(--dim); font-size: 12px; text-align: right; min-width: 64px; }
.feed-empty { padding: 28px 0; text-align: center; color: var(--dim); font-size: 14px; }
/* A cycle opens (details/summary, no JS needed) to show its buy and its sell,
   each linking to its trade, then the sum that makes the profit. Leg colours
   match the chart legend: buy = destructive, sell = primary. */
/* Open, the row and its legs are one panel: the row is the panel's header,
   the legs its body. The 1px border is always there (transparent when
   closed) so opening doesn't shift the row; -9px = the row's 8px + border. */
.feed-item {
    margin: 0 -9px; border: 1px solid transparent; border-radius: var(--radius-md);
    transition: background .15s ease, border-color .15s ease;
}
.feed-item[open] { background: var(--card-2); border-color: var(--border-soft); }
.feed li:has(> .feed-item[open]) { padding: 6px 0; border-bottom-color: transparent; }
.feed-item > summary.feed-row { margin: 0; border-radius: var(--radius-md); }
.feed-item[open] > summary.feed-row { border-radius: var(--radius-md) var(--radius-md) 0 0; }
summary.feed-row { list-style: none; cursor: pointer; transition: background .15s ease; }
summary.feed-row::-webkit-details-marker { display: none; }
summary.feed-row:hover, summary.feed-row:focus-visible { background: var(--primary-soft); }
summary.feed-row:hover .feed-go, .feed-item[open] .feed-go { color: var(--primary); }
.feed-go .bi-chevron-down { display: inline-block; transition: transform .15s ease; }
.feed-item[open] .feed-go .bi-chevron-down { transform: rotate(180deg); }
.legs {
    margin: 0 8px; padding: 4px 0 10px; border-top: 1px solid var(--border-soft);
    font: 500 12.5px/1.35 var(--font-mono);
}
.feed-item[open] .legs { animation: legs-in .18s ease; }
@keyframes legs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.leg {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto 14px; align-items: center; gap: 12px;
    margin: 0 -6px; padding: 8px 6px; border-radius: var(--radius-sm); color: inherit;
}
.leg + .leg { border-top: 1px solid var(--border-soft); }
a.leg { transition: background .15s ease; }
a.leg:hover, a.leg:focus-visible { background: var(--primary-soft); }
.leg-side { display: inline-flex; align-items: center; gap: 7px; min-width: 64px; font-weight: 600; color: var(--foreground); }
.leg-side i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.leg-buy .leg-side i { background: var(--destructive); }
.leg-sell .leg-side i { background: var(--primary); }
.leg-what { min-width: 0; color: var(--muted-foreground); overflow-wrap: anywhere; }
.leg-ago { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; }
.leg-usd { text-align: right; color: var(--foreground); white-space: nowrap; }
.leg-go { color: var(--dim); font-size: 11px; text-align: right; }
a.leg:hover .leg-go { color: var(--primary); }
.legs-math { margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed var(--border); }
.legs-math div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--muted-foreground); }
.legs-math dt, .legs-math dd { margin: 0; }
.legs-math dd { white-space: nowrap; }
.legs-math .legs-net { color: var(--foreground); font-weight: 600; }
.legs-math .legs-net dd { color: var(--primary); }
.coin {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    font: 700 10px/1 var(--font-mono); color: var(--primary-ink);
    background: var(--coin, var(--primary));
}
.coin-btc { --coin: var(--coin-btc); }
.coin-eth { --coin: var(--coin-eth); }
.coin-sol { --coin: var(--coin-sol); }
.coin-hype { --coin: var(--coin-hype); }
/* Official icons (public/img/coins, Hyperliquid's own). BTC and SOL are full
   coins; ETH and HYPE are bare marks, so they sit inset on a disc to read as
   coins too: ETH's grey mark needs a light one, HYPE gets Hyperliquid's teal. */
.coin.has-logo { background: transparent; overflow: hidden; }
.coin.has-logo img { width: 100%; height: 100%; display: block; }
/* The inset is the img's size, not padding: a % padding resolves against the
   parent's width, which blew the badge up inside the wide market cards. */
.coin-eth.has-logo { background: var(--coin-eth-disc); }
.coin-hype.has-logo { background: var(--coin-hype-disc); }
.coin-eth.has-logo img { width: 66%; height: 66%; }
.coin-hype.has-logo img { width: 64%; height: 64%; }

/* ── Sections ───────────────────────────────────── */
.section { padding: 104px 0; border-top: 1px solid var(--border-soft); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); }
.section-head p { margin-top: 16px; color: var(--muted-foreground); font-size: 17px; }

/* Stats */
.stat-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    background: var(--card);
}
.stat { padding: 30px 26px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--border-soft); }
.stat-value {
    font: 600 clamp(28px, 3.6vw, 40px)/1.05 var(--font-mono); letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-value.accent { color: var(--primary); }
.stat-label {
    margin-top: 12px; font: 500 12px/1.3 var(--font-mono);
    letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.stat-strip {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px;
    font: 500 13px/1.3 var(--font-mono); color: var(--muted-foreground);
}
.stat-strip span { display: inline-flex; align-items: center; gap: 8px; }
.stat-strip i { color: var(--primary); }
.fine { max-width: 680px; margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--dim); }

/* Grid results, last month (mirrors the login's results card) */
.results-panel {
    max-width: 920px; margin: 0 auto; padding: 22px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
}
.results-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px;
    font: 600 12px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.results-title { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); }
.results-month {
    padding: 6px 12px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); letter-spacing: .1em;
}
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.result-card {
    padding: 26px 24px; min-width: 0;
    border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--card-2);
    transition: border-color .2s ease, transform .2s ease;
}
.result-card:hover { border-color: var(--primary-glow); transform: translateY(-1px); }
.result-pair { display: flex; align-items: center; gap: 10px; font: 700 14px/1 var(--font-mono); letter-spacing: .04em; }
.result-quote { color: var(--dim); font-weight: 500; }
.result-val {
    margin-top: 16px; font: 700 clamp(30px, 3.8vw, 40px)/1 var(--font-mono); letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; color: var(--primary);
}
.result-val.neg { color: var(--destructive); }
.result-meta {
    margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px;
    font: 500 12.5px/1.3 var(--font-mono); color: var(--muted-foreground);
}
.result-meta .sep { opacity: .5; }

/* The headline's range, and the tooltip explaining it. home.js toggles
   .tip-open: while a mouse is over the card, or on a tap on touch screens.
   Not :hover, which sticks after a tap and can't be closed again. */
.result-card.has-tip { position: relative; cursor: help; }
.result-card.has-tip:has(.result-range:focus-visible),
.result-card.has-tip.tip-open { z-index: 5; }
.result-range {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
    border: 1px solid var(--border); border-radius: 999px; background: transparent;
    font: 500 12px/1.3 var(--font-mono); color: var(--muted-foreground); cursor: help;
    font-variant-numeric: tabular-nums; transition: border-color .2s ease, color .2s ease;
}
.result-range i { color: var(--primary); font-size: 12px; }
.result-range:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.result-card.tip-open .result-range,
.result-card.has-tip:has(.result-range:focus-visible) .result-range { border-color: var(--primary-glow); color: var(--foreground); }
.result-card.tip-open { border-color: var(--primary-glow); }
.result-tip {
    position: absolute; z-index: 5; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background-2);
    box-shadow: var(--shadow); text-align: left;
    font: 400 13px/1.5 var(--font-sans); color: var(--muted-foreground);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.result-card.has-tip:has(.result-range:focus-visible) .result-tip,
.result-card.tip-open .result-tip {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
/* Beside the card rather than under it, because it is taller than a card:
   the left column opens to the right and the right column to the left, the
   top row hangs down from the card's top edge and the bottom row grows up
   from its bottom edge, so it stays over the panel instead of running off
   the bottom of the screen. Phones get it full width below the card. */
@media (min-width: 761px) {
    .result-tip { top: 0; left: calc(100% + 12px); width: min(380px, calc(50vw - 40px)); }
    .result-card.has-tip:nth-child(even) .result-tip { left: auto; right: calc(100% + 12px); }
    .result-card.has-tip:nth-child(n + 3) .result-tip { top: auto; bottom: 0; }
    /* It sits over the neighbouring card, so let the pointer through: moving
       onto that card should open its tooltip, not keep this one alive. */
    .result-card.has-tip .result-tip { pointer-events: none; }
}
.tip-title {
    margin-bottom: 8px; font: 600 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary);
}
.tip-lead { color: var(--foreground); }
.tip-case {
    margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
    padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--card);
}
.tip-dir { color: var(--primary); font-size: 14px; line-height: 1.35; }
.tip-case-text b { display: block; color: var(--foreground); font-weight: 600; }
.tip-case-text span { display: block; margin-top: 2px; font-size: 12.5px; }
.tip-case-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.tip-case-num b { display: block; font-size: 15px; color: var(--foreground); font-variant-numeric: tabular-nums; }
.tip-case-num span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dim); }
.tip-mid { margin-top: 12px; color: var(--foreground); font-weight: 500; }
.tip-foot { margin-top: 6px; font-size: 12px; color: var(--dim); }

.results-foot { margin-top: 18px; text-align: center; font: 500 13px/1.5 var(--font-mono); color: var(--muted-foreground); }
.results-fine { max-width: 62ch; margin: 6px auto 0; font-size: 11.5px; color: var(--dim); }

/* Markets */
.markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.market {
    position: relative; padding: 26px 24px; border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--card); overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
}
.market:hover { border-color: var(--dim); transform: translateY(-2px); }
.market::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--coin), transparent); opacity: .16; pointer-events: none;
}
.market .coin { width: 34px; height: 34px; font-size: 13px; }
.market-ticker { margin-top: 18px; font: 700 34px/1 var(--font-sans); letter-spacing: -.03em; }
.market-pair { margin-top: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; color: var(--dim); }
.market-meta { margin-top: 20px; display: grid; gap: 6px; font: 500 13px/1.3 var(--font-mono); color: var(--muted-foreground); }
.market-meta b { color: var(--foreground); font-weight: 600; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.step-card { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.step-num {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
    background: var(--primary-soft); color: var(--primary); font: 700 13px/1 var(--font-mono);
}
.step-card h3 { margin-top: 18px; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.step-card p { margin-top: 10px; color: var(--muted-foreground); font-size: 14.5px; }

/* Features */
.features {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card);
}
.feature { padding: 28px 24px; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.feature:nth-child(4n) { border-right: 0; }
.feature:nth-last-child(-n+4) { border-bottom: 0; }
.feature-icon {
    width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--background-2); color: var(--primary); font-size: 17px;
}
.feature h3 { margin-top: 18px; font-size: 16px; letter-spacing: -.01em; line-height: 1.3; }
.feature p { margin-top: 8px; color: var(--muted-foreground); font-size: 14px; line-height: 1.55; }

/* Security */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split h2 { font-size: clamp(30px, 4.2vw, 44px); }
.split .sub { margin-top: 18px; color: var(--muted-foreground); font-size: 17px; }
.checks { margin-top: 26px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.checks i { color: var(--primary); font-size: 18px; line-height: 1.4; }
.text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; color: var(--primary); font-weight: 600; font-size: 15px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.perm-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.perm-head {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
    font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground);
}
.perm-head i { color: var(--primary); font-size: 15px; }
.perm-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 15px 20px; border-bottom: 1px solid var(--border-soft); font: 500 14px/1.3 var(--font-mono);
}
.perm-row:last-child { border-bottom: 0; }
.perm-flag { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; font-size: 15px; }
.perm-row.allow .perm-flag { background: var(--primary-soft); color: var(--primary); }
.perm-row.deny { color: var(--dim); }
.perm-row.deny .perm-flag { background: var(--destructive-soft); color: var(--destructive); }

/* Pricing */
.price-card {
    max-width: 560px; margin: 0 auto; padding: 44px 40px; text-align: center;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: radial-gradient(120% 80% at 50% 0%, var(--primary-soft), transparent 60%), var(--card);
}
.price-value { font: 700 clamp(64px, 10vw, 96px)/1 var(--font-sans); letter-spacing: -.05em; color: var(--primary); }
.price-label { margin-top: 10px; font: 500 13px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.price-points { margin: 30px auto 0; display: grid; gap: 12px; text-align: left; max-width: 340px; }
.price-points li { display: flex; gap: 10px; font-size: 15.5px; }
.price-points i { color: var(--primary); }
/* One worked cycle under the points: 5% of the profit, not of the order. */
.price-example {
    max-width: 340px; margin: 26px auto 0; padding: 16px 18px; text-align: left;
    border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--card-2);
}
.price-example-title {
    margin-bottom: 10px; font: 600 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-foreground);
}
.price-example dl { margin: 0; display: grid; gap: 7px; }
.price-example dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.price-example dt { color: var(--muted-foreground); }
.price-example dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--foreground); }
.price-example .price-example-keep { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-weight: 600; }
.price-example .price-example-keep dt { color: var(--foreground); }
.price-example .price-example-profit dd,
.price-example .price-example-keep dd { color: var(--primary); }
.price-note { margin-top: 22px; font-size: 13px; color: var(--dim); }
.price-card .btn { margin-top: 28px; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--border-soft); }
.faq details { border-bottom: 1px solid var(--border-soft); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 4px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--dim); font-size: 18px; transition: transform .2s ease; flex: none; }
.faq details[open] summary i { transform: rotate(45deg); color: var(--primary); }
.faq-answer { padding: 0 4px 22px; color: var(--muted-foreground); font-size: 15px; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.faq-answer strong { color: var(--foreground); font-weight: 600; }
.faq-answer code { font-family: var(--font-mono); font-size: .9em; padding: 1px 6px; border-radius: 5px; background: var(--card-2); }
.faq-more { text-align: center; margin-top: 28px; }

/* Final CTA */
.final { position: relative; text-align: center; padding: 120px 0; border-top: 1px solid var(--border-soft); isolation: isolate; overflow: hidden; }
.final::before {
    content: ""; position: absolute; z-index: -1; left: 50%; bottom: -260px; width: 1000px; height: 520px;
    transform: translateX(-50%); background: radial-gradient(closest-side, var(--primary-glow), transparent);
}
.final h2 { font-size: clamp(32px, 5vw, 54px); }
.final p { margin-top: 16px; color: var(--muted-foreground); font-size: 17px; }

/* Footer */
.footer { border-top: 1px solid var(--border-soft); padding: 56px 0 40px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-tagline { margin-top: 12px; color: var(--muted-foreground); max-width: 300px; }
.footer h4 {
    margin: 0 0 14px; font: 600 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.footer-links { display: grid; gap: 10px; color: var(--muted-foreground); }
.footer-links a:hover { color: var(--foreground); }
.lang-link { color: var(--muted-foreground); }
.lang-link[aria-current="true"] { color: var(--primary); font-weight: 600; }
.footer-bottom {
    display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
    margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border-soft); color: var(--dim); font-size: 13px;
}
.footer-bottom p { max-width: 640px; }
.footer-credit { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.footer-credit:hover { color: var(--foreground); text-decoration-color: currentColor; }

/* Reveal on scroll (home.js adds .in). Without JS everything stays visible. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .dot.live, .feed li.is-new, .brand-word span, .feed-item[open] .legs { animation: none; }
    .brand-word span { color: oklch(0.84 0.16 164); text-shadow: 0 0 16px oklch(0.755 0.185 162 / 0.35); }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1000px) {
    .nav-links { display: none; }
    .markets, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature:nth-child(4n) { border-right: 1px solid var(--border-soft); }
    .feature:nth-child(2n) { border-right: 0; }
    .feature:nth-last-child(-n+4) { border-bottom: 1px solid var(--border-soft); }
    .feature:nth-last-child(-n+2) { border-bottom: 0; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
    .split { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    :root { --gutter: 16px; }
    .nav-actions { display: none; }
    .nav-toggle { display: grid; place-items: center; }
    .nav-mobile.open {
        display: grid; gap: 4px; padding: 10px var(--gutter) 18px; border-top: 1px solid var(--border-soft);
    }
    .nav-mobile a { padding: 10px 2px; color: var(--muted-foreground); font-size: 15px; }
    .nav-mobile .btn { margin-top: 8px; color: var(--primary-ink); }
    .hero { padding: 56px 0 40px; }
    .window-body { grid-template-columns: 1fr; }
    .panel + .panel { border-left: 0; border-top: 1px solid var(--border-soft); }
    .canvas-wrap { min-height: 280px; }
    .section { padding: 72px 0; }
    .section-head { margin-bottom: 36px; }
    .stat { padding: 22px 18px; }
    .results-panel { padding: 14px; }
    .result-card { padding: 18px 16px; }
    /* No room beside a card here, so the tooltip spans the whole grid under
       the card it belongs to. The card has to stop being the tooltip's
       containing block for that: static, and no hover transform. */
    .results-grid { position: relative; }
    .result-card.has-tip { position: static; transform: none; }
    .result-tip { top: auto; left: 0; right: 0; margin-top: 10px; }
    .final { padding: 88px 0; }
    .price-card { padding: 36px 22px; }
}
@media (max-width: 520px) {
    .hero .pill { flex-wrap: wrap; justify-content: center; row-gap: 4px; border-radius: 14px; }
    .hero .pill .pill-sep { display: none; }
    .stat-grid { grid-template-columns: 1fr; }
    .stat + .stat { border-left: 0; border-top: 1px solid var(--border-soft); }
    .results-grid { gap: 8px; }
    .result-card { padding: 14px 12px; }
    .result-val { font-size: 24px; }
    .result-range { padding: 3px 7px; gap: 5px; font-size: 10.5px; }
    .result-range i { font-size: 10px; }
    .results-head { flex-wrap: wrap; }
    .markets, .steps, .features { grid-template-columns: 1fr; }
    .feature { border-right: 0 !important; border-bottom: 1px solid var(--border-soft) !important; }
    .feature:last-child { border-bottom: 0 !important; }
    .cta-row .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}