/* Digital Treasury marketing — design system */
:root {
    --bg: #05070E;
    --surface: #0C111B;
    --surface-2: #111826;
    --elevated: #131b2a;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #4F7CFF;
    --accent-2: #22D3EE;
    --text: #F2F5FA;
    --muted: #93A0B4;
    --faint: #5B6679;
    --success: #34D399;
    --radius: 16px;
    --maxw: 1140px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    /* .glow/.glow-2 deliberately bleed past their section's edge for an ambient-light effect;
       clip the bleed at the page level so it never creates page-wide horizontal scroll. */
    overflow-x: hidden;
}

/* Ambient depth */
body {
    background-image:
        radial-gradient(60% 45% at 50% -8%, rgba(79, 124, 255, 0.12), transparent 70%),
        radial-gradient(38% 28% at 92% 2%, rgba(34, 211, 238, 0.07), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1, h2, h3, .display { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.accent { color: var(--accent-2); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(3, 6, 15, 0.7); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.brand .dot { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 16px var(--accent); }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .2s; }
.btn-primary { background: linear-gradient(135deg, #3E6BFF 0%, #1E40AF 100%); color: #fff; box-shadow: 0 8px 30px rgba(37, 99, 235, .35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(37, 99, 235, .5); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }

/* Sections */
section { padding: 96px 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--accent-2); font-weight: 600; }
.section-title { font-size: 38px; margin: 12px 0 16px; }
.lead { font-size: 19px; color: var(--muted); max-width: 640px; }

/* Hero */
.hero { padding-top: 72px; padding-bottom: 64px; position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(38px, 6vw, 66px); max-width: 14ch; }
.hero p { font-size: 20px; color: var(--muted); max-width: 56ch; margin: 22px 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.22), transparent 60%); top: -200px; right: -150px; filter: blur(20px); pointer-events: none; }

/* Cards / grid */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.4); }
.card h3 { font-size: 20px; margin: 8px 0 10px; }
.card .icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: rgba(37,99,235,.12); color: var(--accent-2); margin-bottom: 4px; }

/* Code blocks */
.code { background: #060a15; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: #c8d3e8; overflow-x: auto; white-space: pre; line-height: 1.6; }
.code .k { color: #7dd3fc; }
.code .s { color: #86efac; }
.code .c { color: #64748b; }

/* Trust bar */
.trust { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; margin-top: 44px; opacity: .8; }
.trust span { font-family: 'Sora', sans-serif; font-weight: 600; color: var(--muted); font-size: 17px; }

/* Pricing */
.price-card { text-align: left; }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 60px rgba(37,99,235,.25); }
.price { font-family: 'Sora'; font-size: 40px; font-weight: 700; }
.price small { font-size: 15px; color: var(--muted); font-weight: 400; }
.feature-list { list-style: none; padding: 0; margin: 18px 0 0; }
.feature-list li { padding: 7px 0; color: var(--muted); display: flex; gap: 10px; }
.feature-list li::before { content: "✓"; color: var(--success); font-weight: 700; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 14px; color: var(--muted); }
.field input, .field select, .field textarea { background: #060a15; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 15px; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.alert-success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.4); color: #6ee7b7; padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; }
.alert-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #F87171; padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 48px 0; color: var(--muted); font-size: 14px; }
.footer .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }

/* Animated payment flow — responsive: horizontal rail on desktop, vertical stack on mobile.
   Replaces the old fixed 1100x200 SVG, which squashed to an illegible ~60px on phones. */
.flow { display: flex; align-items: center; margin-top: 44px; }
.flow-node {
    flex: 1 1 0; min-width: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 18px 14px; text-align: center;
}
.flow-node .step {
    display: block; font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 700;
    color: var(--accent-2); letter-spacing: .16em; margin-bottom: 6px;
}
.flow-node .label { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--text); }
.flow-node.is-core {
    border-color: rgba(79, 124, 255, .5);
    box-shadow: 0 0 0 1px rgba(79, 124, 255, .25), 0 12px 40px rgba(79, 124, 255, .18);
}
.flow-node.is-core .label {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.flow-conn { flex: 0 0 46px; height: 2px; position: relative; align-self: center; background: var(--border); }
.flow-conn::before {
    content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-2); box-shadow: 0 0 10px 2px rgba(6, 182, 212, .7);
    transform: translate(-50%, -50%); animation: flowX 2.4s linear infinite;
}
.flow-conn::after {
    content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%) rotate(45deg);
    width: 6px; height: 6px; border-top: 2px solid var(--faint); border-right: 2px solid var(--faint);
}
.flow > .flow-conn:nth-child(2)::before { animation-delay: 0s; }
.flow > .flow-conn:nth-child(4)::before { animation-delay: .8s; }
.flow > .flow-conn:nth-child(6)::before { animation-delay: 1.6s; }
@keyframes flowX { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes flowY { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

@media (max-width: 720px) {
    .flow { flex-direction: column; align-items: stretch; }
    .flow-node { width: 100%; padding: 16px; }
    .flow-conn { flex: 0 0 30px; width: 2px; height: 30px; align-self: center; }
    .flow-conn::before { animation-name: flowY; }
    .flow-conn::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) {
    .flow-conn::before { animation: none; left: 50%; top: 50%; opacity: .9; }
}

@media (max-width: 860px) {
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .nav-links a:not(.btn) { display: none; }
    section { padding: 64px 0; }
}

/* ---------- Polish pass ---------- */
.hero h1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #BFCBE6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.card { transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(79, 124, 255, .45); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.price-card.featured { box-shadow: 0 0 0 1px var(--accent), 0 24px 64px rgba(79, 124, 255, .22); }
.btn-primary { box-shadow: 0 8px 30px rgba(79, 124, 255, .35); }
.btn-primary:hover { box-shadow: 0 12px 38px rgba(79, 124, 255, .5); }
.code { background: #070b14; border: 1px solid rgba(255, 255, 255, .06); }
.eyebrow { color: var(--accent-2); }
.trust span { transition: color .2s; }
.trust span:hover { color: var(--text); }
.field input, .field select, .field textarea { background: var(--elevated); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(79, 124, 255, .15); }

/* ---------- Product-site pass (design handoff: DigitalTreasuryLanding + MarketingPages) ---------- */

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.stats .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }
.stats .stat .n { font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats .stat .l { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* Status pills — a claim about what exists is a claim, so it is visible */
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.pill-live { background: rgba(52, 211, 153, .13); color: var(--success); }
.pill-dev { background: rgba(245, 158, 11, .13); color: #FBBF24; }
.pill-designed { background: rgba(147, 160, 180, .14); color: var(--muted); }
.pill-partial { background: rgba(249, 115, 22, .14); color: #FB923C; }
.pill-major { background: rgba(239, 68, 68, .14); color: #F87171; }

/* Status page (/Status) */
.status-banner { display: flex; align-items: center; gap: 14px; border-radius: var(--radius); padding: 20px 24px; margin: 8px 0 40px; border: 1px solid; }
.status-banner .dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.status-banner h2 { margin: 0; font-size: 19px; }
.status-ok { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.3); }
.status-ok .dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
.status-degraded { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
.status-degraded .dot { background: #FBBF24; box-shadow: 0 0 10px #FBBF24; }
.status-partial { background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.3); }
.status-partial .dot { background: #FB923C; box-shadow: 0 0 10px #FB923C; }
.status-major { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
.status-major .dot { background: #F87171; box-shadow: 0 0 10px #F87171; }

.status-list { list-style: none; padding: 0; margin: 0 0 40px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.status-list li { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.status-list li:last-child { border-bottom: none; }

.incident-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.incident-card h3 { margin: 0 0 4px; font-size: 18px; }
.incident-card .meta { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.incident-timeline { border-left: 2px solid var(--border); margin: 0; padding-left: 18px; }
.incident-timeline .entry { position: relative; padding-bottom: 16px; }
.incident-timeline .entry:last-child { padding-bottom: 0; }
.incident-timeline .entry::before { content: ""; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px var(--bg); }
.incident-timeline .entry .ts { font-size: 12px; color: var(--faint); font-family: 'JetBrains Mono', monospace; }
.incident-timeline .entry .st { font-weight: 600; margin-right: 6px; }

/* Platform layers */
.layer { display: grid; grid-template-columns: 120px 1fr; gap: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px; margin-top: 18px; }
.layer .no { font-family: 'Sora', sans-serif; font-size: 15px; color: var(--accent-2); font-weight: 600; }
.layer h3 { margin: 4px 0 8px; font-size: 22px; }
.layer ul { list-style: none; padding: 0; margin: 12px 0 0; color: var(--muted); }
.layer ul li { padding: 4px 0 4px 18px; position: relative; }
.layer ul li::before { content: "▪"; position: absolute; left: 0; color: var(--accent-2); }

/* Vertical tiles */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.vtile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; border-top: 3px solid var(--vaccent, var(--accent)); transition: transform .2s, box-shadow .25s; }
.vtile:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.vtile h3 { font-size: 18px; margin: 0 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vtile p { color: var(--muted); font-size: 14px; margin: 0; }

/* Featured tile — spans the full grid width as a focal point (e.g. DT Capital under the 9 tenant
   tiles) rather than sitting in the 3-column flow like a regular vertical. */
.vtile.vtile-feature {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 30px 34px;
    display: flex;
    background-image: linear-gradient(120deg, color-mix(in srgb, var(--vaccent, var(--accent)) 12%, transparent), transparent 65%), linear-gradient(165deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%);
    border-color: color-mix(in srgb, var(--vaccent, var(--accent)) 30%, var(--border));
}
.vtile.vtile-feature:hover { border-color: color-mix(in srgb, var(--vaccent, var(--accent)) 55%, var(--border)); }
.vtile-feature-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; }
.vtile-feature h3 { font-size: 21px; }
.vtile-feature p { font-size: 15px; max-width: 66ch; }
.vtile-feature-cta { flex: 0 0 auto; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; color: var(--vaccent, var(--accent)); white-space: nowrap; }
@media (max-width: 720px) {
    .vtile-feature-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Compliance grid */
.cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.cgrid .ctile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.cgrid .ctile .big { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: var(--accent-2); }
.cgrid .ctile .l { color: var(--muted); font-size: 13.5px; margin-top: 6px; }

/* Honesty box — what is simulated stays labelled */
.phase-note { background: rgba(245, 158, 11, .07); border: 1px solid rgba(245, 158, 11, .3); border-radius: 12px; padding: 18px 22px; color: #FCD34D; font-size: 14.5px; margin-top: 36px; }
.phase-note strong { color: #FDE68A; }

/* Footer columns */
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.footer-cols h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); opacity: .8; margin: 0 0 12px; }
.footer-cols a { display: block; color: var(--muted); font-size: 14px; padding: 3px 0; }
.footer-cols a:hover { color: var(--accent-2); }
.footer-legal { border-top: 1px solid var(--border); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--faint); font-size: 13px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal-links a { color: var(--muted); }
.footer-legal-links a:hover { color: var(--accent-2); }

/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); padding: 18px 4px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--accent-2); font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 12px 0 0; max-width: 70ch; }

/* Page hero (interior pages) */
.page-hero { padding: 84px 0 48px; }
.page-hero h1 { font-size: clamp(32px, 5vw, 52px); max-width: 20ch; }

/* Article prose (Learn / SEO pages) */
.prose { font-size: 17px; color: var(--text); }
.prose h2 { font-family: 'Sora', sans-serif; font-size: 24px; margin: 36px 0 12px; letter-spacing: -0.01em; }
.prose p { color: #c9d3e4; margin: 0 0 16px; }
.prose a { color: var(--accent-2); }
.prose a:hover { text-decoration: underline; }
.prose ul { color: #c9d3e4; margin: 0 0 16px; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding: 5px 0 5px 22px; }
.prose ul li::before { content: "▪"; position: absolute; left: 2px; color: var(--accent-2); }
.prose strong { color: var(--text); }
.prose em { color: var(--text); font-style: italic; }
.prose code { font-family: 'JetBrains Mono', monospace; font-size: 14px; background: var(--elevated); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: #c8d3e8; }

@media (max-width: 860px) {
    .stats, .cgrid { grid-template-columns: 1fr 1fr; }
    .vgrid { grid-template-columns: 1fr; }
    .layer { grid-template-columns: 1fr; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ── Developer portal ───────────────────────────────────────────────── */
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-4 { grid-template-columns: 1fr 1fr; } }

/* Sub-navigation strip shared across the developer pages */
.devnav { position: sticky; top: 68px; z-index: 40; background: rgba(3,6,15,.72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.devnav-inner { display: flex; gap: 4px; overflow-x: auto; padding: 0 24px; max-width: var(--maxw); margin: 0 auto; }
.devnav a { flex: 0 0 auto; padding: 13px 14px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.devnav a:hover { color: var(--text); }
.devnav a.on { color: var(--text); border-bottom-color: var(--accent-2); }

/* Access-status banner — the staged-access posture */
.devbanner { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(79,124,255,.06)); border: 1px solid rgba(34,211,238,.22); border-radius: var(--radius); padding: 20px 22px; }
.devbanner .ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(34,211,238,.14); color: var(--accent-2); }
.devbanner h3 { margin: 0 0 4px; font-size: 17px; }
.devbanner p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Portal link cards */
.portal-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; transition: transform .2s, border-color .2s; }
.portal-card:hover { transform: translateY(-3px); border-color: rgba(34,211,238,.45); }
.portal-card h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; margin: 0 0 6px; }
.portal-card p { margin: 0; color: var(--muted); font-size: 14px; }
.portal-card .arw { color: var(--accent-2); }

/* Reference / event tables */
.vtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.vtable th { text-align: left; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.vtable td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: #c9d3e4; vertical-align: top; }
.vtable tr:last-child td { border-bottom: none; }
.vtable td .mono { color: var(--accent-2); }
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* HTTP method + version chips */
.verb { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.verb-get { background: rgba(52,211,153,.14); color: var(--success); }
.verb-post { background: rgba(79,124,255,.16); color: #93b4ff; }
.verb-put { background: rgba(245,158,11,.14); color: #FBBF24; }

/* Changelog timeline */
.log-entry { border-left: 2px solid var(--border); padding: 0 0 30px 24px; position: relative; }
.log-entry::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px var(--bg); }
.log-entry:last-child { padding-bottom: 0; }
.log-entry .date { font-size: 12.5px; color: var(--faint); font-family: 'JetBrains Mono', monospace; }
.log-entry h3 { margin: 4px 0 8px; font-size: 18px; }
.log-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.log-added { background: rgba(52,211,153,.13); color: var(--success); }
.log-changed { background: rgba(79,124,255,.14); color: #93b4ff; }
.log-fixed { background: rgba(147,160,180,.14); color: var(--muted); }

/* ---------- Sophistication pass: deeper gradients + light contrast on the existing blue/cyan
   identity. No new hues — every addition below reuses --accent/--accent-2/--success. ---------- */

/* Ambient depth: a third, lower radial so the gradient reads as you scroll, not just at the top. */
body {
    background-image:
        radial-gradient(60% 45% at 50% -8%, rgba(79, 124, 255, 0.12), transparent 70%),
        radial-gradient(38% 28% at 92% 2%, rgba(34, 211, 238, 0.07), transparent 60%),
        radial-gradient(46% 34% at 8% 62%, rgba(79, 124, 255, 0.05), transparent 65%);
}

/* Surfaces get a whisper of directional gradient instead of a flat fill, plus a hairline top
   highlight — the "light hits the top edge" cue that reads as depth rather than a painted panel. */
.card, .vtile, .cgrid .ctile, .stats .stat, .layer, .portal-card, .incident-card, .tbl-wrap,
.status-list, .devbanner {
    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 40%);
    background-color: var(--surface);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}
.card:hover, .vtile:hover, .portal-card:hover {
    background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 18px 44px rgba(0, 0, 0, .4);
}

/* A second, subtler glow so interior pages (not just the homepage hero) get the same ambient
   accent — placed low/left to counterbalance .glow's top-right position. */
.glow-2 {
    position: absolute; width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, .14), transparent 62%);
    filter: blur(24px); pointer-events: none;
}

/* Nav + footer: a faint gradient hairline instead of a flat 1px border — reads as an edge with
   light on it rather than a ruled line. */
.nav { border-bottom: 1px solid transparent; background-image: linear-gradient(rgba(3,6,15,.7), rgba(3,6,15,.7)), linear-gradient(90deg, transparent, rgba(79,124,255,.35) 20%, rgba(34,211,238,.35) 50%, rgba(79,124,255,.35) 80%, transparent); background-origin: border-box; background-clip: padding-box, border-box; }
.footer { border-top: 1px solid transparent; background-image: linear-gradient(rgba(5,7,14,0), rgba(5,7,14,0)), linear-gradient(90deg, transparent, rgba(79,124,255,.12) 20%, rgba(34,211,238,.12) 50%, rgba(79,124,255,.12) 80%, transparent); background-origin: border-box; background-clip: padding-box, border-box; }

/* Section headings get the same treatment as the hero — used sparingly (section-title only, not
   every heading) so it stays a signature, not a mannerism. */
.section-title {
    background: linear-gradient(180deg, #FFFFFF 0%, #C6D1EA 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* Pill/eyebrow accents: a soft gradient underline on the active devnav tab instead of a flat cyan
   line, and a gradient glow behind the brand dot to match the header's new hairline. */
.devnav a.on { border-image: linear-gradient(90deg, var(--accent), var(--accent-2)) 1; }
.brand .dot { box-shadow: 0 0 20px rgba(79, 124, 255, .55), 0 0 8px rgba(34, 211, 238, .4); }

/* Table containers pick up the same directional sheen as cards for visual consistency. */
.vtable th { background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }

/* ---------- Scroll reveal (site.js) — content below the fold fades + slides up into view as it
   enters the viewport, in the style of moderntreasury.com. The hero itself is never targeted (it's
   visible on load, not something you "reveal" by scrolling to it). ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}