/* ==========================================================================
   DigiAsh — "Spectrum" design system
   Black ground, magenta→red signal gradient, Sora display type (Audiowide for the wordmark only),
   Manrope for reading, Space Mono for indicators and data.
   Every page links this file; page-level <style> blocks only add layout.
   ========================================================================== */
:root {
  /* Surfaces */
  --bg: #0a090c; --bg-panel: #121116; --bg-panel-alt: #19171e;
  --border: #26232d; --border-bright: #36323f;
  /* Brightness: text, brand and risk colours sit about 15% below full
     intensity (×0.85), so the page is easier on the eyes. --accent and
     --critical are dimmed less (8–9%) to keep small text at WCAG AA 4.5:1
     on the lightest panel. Button text stays white. */
  /* Text */
  --text: #cac8cf; --text-strong: #d9d9d9; --text-dim: #918d9b;
  /* Brand signal gradient */
  --grad-from: #d9267f; --grad-to: #d93229;
  --grad: linear-gradient(100deg, var(--grad-from), var(--grad-to));
  --accent: #eb3875; --accent-dim: #eb387533; --on-accent: #ffffff;
  --cyan: #d985a8; /* legacy name — now the link colour */
  /* Risk scale (kept distinct from the brand gradient). The flat colours are for
     borders and small text; scores use a gradient within each level's own colour
     family (.lvl-grad), so the scale still reads red, orange, amber, green. */
  --low: #34bb80; --medium: #d9a734; --high: #d97534; --critical: #e74647;
  --low-a: #5fd38a; --low-b: #22ad9a; --medium-a: #ecc94b; --medium-b: #d39a2c;
  --high-a: #f0a04a; --high-b: #d8612a; --critical-a: #f2685c; --critical-b: #cf2f3d;
  /* Type */
  --font-display: 'Sora', 'Manrope', system-ui, sans-serif;
  --font-brand: 'Audiowide', 'Sora', system-ui, sans-serif; /* the DigiAsh wordmark only */
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius: 12px;
  color-scheme: dark;
}
/* Light theme — dashboard toggle sets data-theme="light" (localStorage). */
:root[data-theme="light"] {
  --bg: #f7f6f9; --bg-panel: #ffffff; --bg-panel-alt: #f1eff5;
  --border: #e2dfe8; --border-bright: #cfcad8;
  --text: #1d1a24; --text-strong: #0e0c12; --text-dim: #5e5968;
  --accent: #d61f68; --accent-dim: #d61f6826; --cyan: #b8185a;
  --grad-from: #e0197f; --grad-to: #e02a20;
  --low-a: #2bab61; --low-b: #12897f; --medium-a: #c99b12; --medium-b: #a8700a;
  --high-a: #dc7a22; --high-b: #b84d17; --critical-a: #de4a3e; --critical-b: #a8232e;
  color-scheme: light;
}

/* Cross-page transitions (Chrome/Edge 126+, Safari 18.2+; ignored elsewhere) */
@view-transition { navigation: auto; }
/* Page changes: the nav bar (identical on every page) and the logo hold
   still. The old page fades out quickly and the new one appears at once, then
   plays its own .load-in entrance, exactly like a fresh landing-page load.
   (A slow crossfade into the new page looked like a hang: its first frame is
   mostly empty because the .load-in content hasn't risen in yet.) */
::view-transition-old(root) { animation: vtFadeOut .12s ease-out both; }
::view-transition-new(root) { animation: none; }
@keyframes vtFadeOut { to { opacity: 0; } }
nav.topnav { view-transition-name: site-nav; }
.brand { view-transition-name: site-brand; }
::view-transition-group(site-nav), ::view-transition-group(site-brand) { animation-duration: .25s; animation-timing-function: var(--ease-out); }
::view-transition-old(site-nav) { animation: none; opacity: 0; }
::view-transition-new(site-nav) { animation: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
code, pre, kbd, .mono { font-family: var(--font-mono); }
a { color: var(--cyan); text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
.wrap { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; }

/* Headline cipher effect (site.js): each character change fades out and back in. */
.scr-l { transition: opacity .12s ease; }
.scr-l.scr-dip { opacity: .12; }

.grad-text {
  background-image: linear-gradient(100deg, var(--grad-from), var(--grad-to), var(--grad-from));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* One smooth sweep on arrival, then still. Animating background-position repaints
     the text every frame (it can't run on the compositor), and stepping it to save
     work made large headings visibly tick, so headings don't keep moving. */
  animation: gradShift 2.4s cubic-bezier(.16, 1, .3, 1) .3s 1 both;
}
@keyframes gradShift { to { background-position: 200% 0; } }

/* Risk scores: a gradient within the level's own colour family. */
.lvl-grad {
  background-image: linear-gradient(100deg, var(--ga), var(--gb), var(--ga)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.lvl-low { --ga: var(--low-a); --gb: var(--low-b); }
.lvl-medium { --ga: var(--medium-a); --gb: var(--medium-b); }
.lvl-high { --ga: var(--high-a); --gb: var(--high-b); }
.lvl-critical { --ga: var(--critical-a); --gb: var(--critical-b); }

/* Gentle movement for risk scores: the gradient slides slowly back and forth.
   It repaints the element every frame, so it's kept to small text (scores, not
   headings or lists) and runs only while on screen: site.js adds .in-view. */
.drift { animation: gentleDrift 6s ease-in-out infinite alternate; animation-play-state: paused; }
.drift.in-view { animation-play-state: running; }
@keyframes gentleDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .drift, .grad-text { animation: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Scroll reveal — site.js adds .is-visible. Content stays visible without JS. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Orchestrated page load: add .load-in plus d1–d4 to stagger hero elements. */
.js .load-in { opacity: 0; transform: translateY(16px); animation: loadIn .9s var(--ease-out) forwards; }
.load-in.d1 { animation-delay: .05s; } .load-in.d2 { animation-delay: .18s; } .load-in.d3 { animation-delay: .3s; } .load-in.d4 { animation-delay: .45s; }
@keyframes loadIn { to { opacity: 1; transform: none; } }

/* ---------- Page hero (content pages) ---------- */
.page-hero { position: relative; isolation: isolate; padding: 72px 0 48px; }
.page-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 340px; pointer-events: none;
  background: radial-gradient(ellipse 40% 42% at 40% 52%, color-mix(in srgb, var(--grad-from) 20%, transparent), transparent 100%);
  animation: glowDrift 12s ease-in-out infinite alternate;
}
@keyframes glowDrift { from { opacity: .55; transform: translateY(0); } to { opacity: 1; transform: translateY(18px); } }
.page-hero .eyebrow { display: inline-block; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.page-hero h1 { margin: 0 0 20px; font-size: clamp(38px, 6vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; word-spacing: .05em; color: var(--text-strong); }
.page-hero .lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 36em; }
.section-title { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; color: var(--text-strong); }
.section-lede { margin: 0 0 32px; font-size: 16.5px; color: var(--text-dim); max-width: 38em; }

/* Card hover lift, matching the landing-page tiles */
.card-lift { transition: border-color .3s ease, transform .4s var(--ease-out), box-shadow .4s ease; }
.card-lift:hover { border-color: var(--border-bright); transform: translateY(-3px); box-shadow: 0 18px 40px -28px var(--grad-from); }

/* Feature cards with a product screenshot (About + How it works). The image
   links to the full-size file so the detail can be read. */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feature { display: flex; flex-direction: column; border-radius: 18px; background: var(--bg-panel); border: 1px solid var(--border); overflow: hidden; }
.feature-shot { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a090c; border-bottom: 1px solid var(--border); }
.feature-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.feature-shot::after { content: "View full size ↗"; position: absolute; right: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(10, 9, 12, .78); color: #eeebf3; font-family: var(--font-mono); font-size: 11px; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.feature-shot:hover img { transform: scale(1.035); }
.feature-shot:hover::after, .feature-shot:focus-visible::after { opacity: 1; transform: none; }
.feature-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feature-body { padding: 20px 22px 22px; }
.feature-body h3 { margin: 0 0 6px; font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--text-strong); }
.feature-body p { margin: 0; font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.feature-body code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-strong); }
@media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .feature-shot img, .feature-shot::after { transition: none; } .feature-shot:hover img { transform: none; } }

/* ---------- Demo terminal (landing + how it works) ---------- */
.terminal-frame { padding: 1.5px; border-radius: 18px; background: linear-gradient(135deg, var(--grad-from), var(--grad-to) 45%, var(--border) 75%); box-shadow: 0 40px 90px -40px var(--grad-from); }
.terminal { border-radius: 17px; background: var(--bg-panel); overflow: hidden; font-family: var(--font-mono); font-size: 14px; }
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 12px; }
.terminal-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-bright); }
.terminal-bar span { margin-left: 8px; }
.terminal-body { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 11px; }
.terminal .prompt-sign { color: var(--grad-to); }
.terminal .caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -0.15em; background: var(--text); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.terminal [data-line] { color: var(--text-dim); opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.terminal [data-line].is-in { opacity: 1; transform: none; }
.terminal [data-line] b { color: var(--text); font-weight: 400; }
.terminal [data-line] .ok { color: var(--low); }
.terminal [data-line] .muted { color: var(--text-dim); }
.terminal-caption { margin: 12px 4px 0; font-size: 12.5px; color: var(--text-dim); }

/* ---------- Top navigation (landing + content pages) ---------- */
nav.topnav {
  position: sticky; top: 0; z-index: 30;
  max-width: none; margin: 0; padding: 16px max(20px, calc((100vw - 1200px) / 2));
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
nav.topnav.is-scrolled { border-bottom-color: var(--border); }
nav.topnav .brand, .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-brand); font-size: 18px; font-weight: 400; letter-spacing: 0;
  color: var(--text-strong); text-decoration: none;
}
.brand .dot, nav.topnav .brand .dot {
  position: relative; overflow: hidden; width: 22px; height: 22px; border-radius: 7px; background: var(--grad);
  box-shadow: 0 0 24px -4px var(--grad-from); flex-shrink: 0;
}
/* The logo's gentle drift: a double-width gradient slides inside the square.
   It moves with transform, which the compositor handles, so it costs no repaints. */
.brand .dot::before {
  content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 100%;
  background: linear-gradient(100deg, var(--grad-from), var(--grad-to), var(--grad-from));
  animation: logoDrift 10s ease-in-out infinite alternate; will-change: transform;
}
@keyframes logoDrift { to { transform: translateX(-50%); } }
/* After the rule above, so it wins: no drift for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) { .brand .dot::before { animation: none; } }
nav.topnav .links { display: flex; gap: 26px; font-size: 14.5px; font-weight: 500; align-items: center; }
nav.topnav .links a { color: var(--text-dim); text-decoration: none; transition: color .2s ease; }
nav.topnav .links a:hover, nav.topnav .links a.active { color: var(--text-strong); }
nav.topnav .links a.btn-solid-sm, nav.topnav .links a.btn-solid-sm:hover { color: var(--on-accent); }
@media (max-width: 820px) {
  nav.topnav .links { gap: 14px; }
  nav.topnav .links a:not(.btn-solid-sm):not([href*="login"]) { display: none; }
}

/* ---------- Buttons ---------- */
.btn-solid-sm, button.primary, a.primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad); color: var(--on-accent); border: none; border-radius: 10px;
  font-family: var(--font-body); font-weight: 700; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1;
  transition: transform .2s var(--ease-out), box-shadow .3s ease, filter .2s ease;
}
.btn-solid-sm { padding: 11px 18px; font-size: 14px; }
button.primary { padding: 0 24px; height: 46px; font-size: 14.5px; }
.btn-solid-sm::after, button.primary::after, a.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, #ffffff40 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.btn-solid-sm:hover, button.primary:hover, a.primary:hover { box-shadow: 0 8px 30px -8px var(--grad-from); transform: translateY(-1px); }
.btn-solid-sm:hover::after, button.primary:hover::after, a.primary:hover::after { transform: translateX(120%); }
.btn-solid-sm:active, button.primary:active { transform: translateY(0) scale(.98); }
button.primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: transparent; border: 1px solid var(--border-bright); color: var(--text);
  border-radius: 10px; padding: 9px 14px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; line-height: 1;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text-strong); background: var(--accent-dim); }
.btn-ghost svg { width: 16px; height: 16px; flex-shrink: 0; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border: 1px solid currentColor; text-transform: capitalize; }
.status-pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

.theme-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 1px solid var(--border-bright); border-radius: 999px; padding: 7px 12px; font-size: 13px; color: var(--text-dim); font-family: var(--font-body); }
.theme-toggle:hover { border-color: var(--accent); color: var(--text); }
.theme-toggle svg { width: 15px; height: 15px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; background: var(--bg-panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 15px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.field textarea { resize: vertical; min-height: 120px; }

/* Live password checklist — filled in by password-rules.js */
.password-rules { list-style: none; margin: -6px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-dim); }
.password-rules li { display: flex; align-items: center; gap: 8px; transition: color .25s ease; }
.password-rules li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border-bright); transition: background-color .25s ease, border-color .25s ease, transform .3s var(--ease-out); }
.password-rules li.is-met { color: var(--text); }
.password-rules li.is-met::before { background: var(--low); border-color: var(--low); transform: scale(1.15); }


/* ---------- Footer ---------- */
footer.site-footer { max-width: 1200px; margin: 72px auto 0; text-align: center; font-size: 13.5px; color: var(--text-dim); border-top: 1px solid var(--border); padding: 28px 20px 32px; }
footer.site-footer .handle { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
footer.site-footer .footer-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
footer.site-footer .footer-links a { color: var(--text-dim); text-decoration: none; }
footer.site-footer .footer-links a:hover { color: var(--text-strong); }
footer.site-footer .footer-socials { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
footer.site-footer .footer-socials a { color: var(--text-dim); text-decoration: none; font-size: 13px; border: 1px solid var(--border-bright); border-radius: 999px; padding: 6px 14px; }
footer.site-footer .footer-socials a:hover { border-color: var(--accent); color: var(--text-strong); }
footer.site-footer .footer-disclaimer { max-width: 640px; margin: 14px auto 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); opacity: .85; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}