/* ============================================================
   HackFlow — NOIR design system
   Cinematic dark: obsidian base, cyberpunk-purple primary,
   electric-cyan secondary. Loaded AFTER styles.css (+ site.css /
   portal.css / admin.css) so it retunes the whole token system
   and patches components for dark.
   Kinetic behavior (magnetic buttons, reactive glow, parallax)
   lives in assets/js/kinetic.js and keys off these hooks:
     .btn            → magnetic pull
     [data-glow]     → cursor-reactive border/inner glow (uses --mx/--my)
     [data-depth]    → hero parallax layers
   ============================================================ */

:root {
  /* palette — obsidian & neon */
  --cream:      #0A0A11;   /* page bg (token kept for compat) */
  --cream-2:    #0E0E17;   /* raised bg */
  --paper:      #13131E;   /* panels / cards */
  --ink:        #EDECF6;   /* primary text (light!) */
  --ink-2:      #A9A6BD;   /* secondary text */
  --muted:      #6F6C82;
  --clay:       #8B5CF6;   /* cyberpunk purple */
  --clay-deep:  #A78BFA;   /* hover = brighter, not darker, on dark UI */
  --clay-soft:  #3A3260;   /* purple-tinted border */
  --clay-wash:  #1C1830;   /* purple-tinted panel wash */
  --sage:       #22D3EE;   /* electric cyan */
  --line:       #232333;
  --line-2:     #2F2F44;

  --serif: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius:   16px;
  --radius-lg:20px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-md: 0 10px 34px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.6);
  --glow-p:   0 0 24px rgba(139,92,246,.35);
  --glow-c:   0 0 24px rgba(34,211,238,.30);
  --maxw: 1180px;
}

html { color-scheme: dark; }
body { background: var(--cream); color: var(--ink); }
::selection { background: rgba(139,92,246,.45); color: #fff; }

h1, h2, h3 { color: var(--ink); letter-spacing: -.03em; }
a { color: var(--clay-deep); }

/* ---- cinematic backdrop: aurora orbs + perspective grid + vignette ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52rem 40rem at 82% -12%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(40rem 32rem at -10% 20%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(64rem 50rem at 50% 120%, rgba(139,92,246,.10), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, rgba(139,92,246,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,92,246,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 68%);
}

/* ============================================================
   CORE COMPONENTS
   ============================================================ */

/* labels */
.eyebrow {
  font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: #B8A8F8;
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: "//"; color: var(--sage); opacity: .9; font-weight: 600; }
.eyebrow--center { justify-content: center; width: 100%; }

/* buttons — neon minimal; .btn is also the magnetic hook */
.btn { border-radius: 12px; will-change: transform; }
.btn--primary {
  background: linear-gradient(120deg, #8B5CF6, #6D3EF2);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 18px rgba(109,62,242,.35);
}
.btn--primary:hover {
  background: linear-gradient(120deg, #9B70FF, #7C4FFF);
  box-shadow: 0 8px 30px rgba(139,92,246,.5), var(--glow-p);
  transform: translateY(-1px);
}
.btn--ghost { background: rgba(255,255,255,.02); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--clay); color: #fff; background: rgba(139,92,246,.12); box-shadow: var(--glow-p); }

/* nav — obsidian glass */
.nav { background: rgba(10,10,17,.72); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
.brand { color: var(--ink); }
.brand__mark { background: linear-gradient(150deg, #8B5CF6, #5B3FD6); box-shadow: 0 0 18px rgba(139,92,246,.45); }
.brand__thin { color: var(--ink-2); }
.nav__links a { color: var(--ink-2); }
.nav__links a:hover { color: #fff; }
.nav__links .btn { color: #fff; }
.nav__toggle span { background: var(--ink); }
@media (max-width: 720px) {
  .nav__links { background: #0E0E17; border-bottom-color: var(--line); }
}

/* cards / glow surface — [data-glow] gets the cursor-reactive layer */
[data-glow] { position: relative; }
[data-glow]::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(139,92,246,.16), transparent 65%);
}
[data-glow]:hover::after { opacity: 1; }
[data-glow]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(167,139,250,.8), rgba(34,211,238,.25) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-glow]:hover::before { opacity: 1; }

/* generic panels used across marketing pages */
.offer-card, .feature, .price-card, .flow__step, .stat, .faq__item, .fitcard, .path, .quiz {
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.feature:hover { border-color: var(--clay-soft); box-shadow: var(--shadow-md), var(--glow-p); }
.feature__ico { background: var(--clay-wash); box-shadow: inset 0 0 0 1px rgba(139,92,246,.25); }
.feature h3 { color: #fff; }
.feature p, .stat p, .path p { color: var(--ink-2); }

/* stats */
.stat__num { color: #fff; }
.stat__num span { color: var(--sage); }

/* sections */
.problem { background: linear-gradient(180deg, var(--cream), var(--cream-2)); }
.band { background: linear-gradient(160deg, #0D0B1C 0%, #171233 55%, #1D1640 100%); position: relative; overflow: hidden; }
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(32rem 22rem at 86% 8%, rgba(139,92,246,.30), transparent 60%),
              radial-gradient(26rem 18rem at 4% 92%, rgba(34,211,238,.16), transparent 60%);
}
.band .wrap { position: relative; z-index: 1; }
.band .eyebrow { color: #C9BEF9; }
.band-soft { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }
.pf { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf__n { font-family: var(--mono); color: #22D3EE; }
.human-line { color: var(--ink-2); }
.human-line strong { color: #fff; }

/* flow steps */
.flow__n { background: none; box-shadow: none; color: var(--sage);
  font-family: var(--mono); font-weight: 500; font-size: 1.4rem; width: auto; height: auto; }
.flow__n::before { content: "0"; opacity: .45; }
.flow__step h3 { color: #fff; }
.flow__step p { color: var(--ink-2); }

/* pricing */
.price-card--lead { border-color: var(--clay-soft); background: linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,.03)); box-shadow: var(--shadow-md); }
.price-card__tag { background: var(--clay); color: #fff; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; }
.price-card__tag--muted { background: var(--clay-wash); color: #C9BEF9; }
.price-card__amt { color: #fff; }
.price-card--lead .price-card__amt { color: #C9BEF9; text-shadow: 0 0 30px rgba(139,92,246,.5); }
.ticks li { color: var(--ink-2); }
.ticks li::before { background: var(--clay-soft); }
.price-card--lead .ticks li::before { background: var(--clay); }

/* about / photo */
.photo-frame { border-color: var(--line-2); box-shadow: var(--shadow-md), 0 0 0 1px rgba(139,92,246,.12);
  background: repeating-linear-gradient(135deg, var(--cream-2), var(--cream-2) 12px, var(--paper) 12px, var(--paper) 24px); }
.about__copy p { color: var(--ink-2); }

/* faq — hairline list */
.faq__item { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 0; }
.faq__item summary { padding: 1.25rem 0; font-family: var(--serif); font-weight: 500; color: var(--ink); cursor: pointer; }
.faq__item[open] summary { color: #C9BEF9; }
.faq__item p { color: var(--ink-2); padding-bottom: 1.2rem; }

/* contact + footer */
.contact { background: linear-gradient(180deg, var(--cream), #14102A); }
.footer { background: #07070D; border-top: 1px solid var(--line); }
.footer__brand strong { color: #fff; }
.footer__brand p { color: var(--muted); }
.footer__links a { color: var(--ink-2); }
.footer__links a:hover { color: #C9BEF9; }
.footer__legal { color: var(--muted); border-top-color: var(--line); }

/* trust row */
.trustrow { border-top-color: var(--line); }
.trustrow > span { font-family: var(--mono); color: var(--muted); }
.trustrow li { color: var(--ink-2); }

/* forms (quiz/fields on marketing pages) */
.field input, .field select, .field textarea, .opt {
  background: var(--cream-2); border-color: var(--line-2); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--clay); box-shadow: 0 0 0 3px rgba(139,92,246,.22);
}
.opt:hover { border-color: var(--clay-soft); background: var(--clay-wash); }
.opt[aria-checked="true"] { border-color: var(--clay); background: var(--clay-wash); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }

/* skip link / toast / demo banner: neon chips */
.skip-link { background: var(--clay); color: #fff; }
.demo-banner { background: #14102A; color: #C9BEF9; border-bottom: 1px solid var(--clay-soft); }
.demo-banner b { color: #22D3EE; }
.toast { background: #191430; color: #EDECF6; border: 1px solid var(--clay-soft); box-shadow: var(--shadow-lg), var(--glow-p); }

/* ============================================================
   HERO (marketing) — statement + kinetic visual
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__title { color: #fff; }
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, #A78BFA 10%, #22D3EE 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { color: var(--ink-2); }
.hero__note { font-family: var(--mono); font-size: .78rem; color: var(--muted); }

/* kinetic hero visual: layered depth chips + core orb */
.kinetic {
  position: relative; min-height: 420px; pointer-events: none;
  display: none;
}
@media (min-width: 901px) { .kinetic { display: block; } }
.kinetic__orb {
  position: absolute; top: 50%; left: 54%; width: 300px; height: 300px; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(167,139,250,.55), rgba(109,62,242,.22) 45%, transparent 70%);
  filter: blur(2px);
  animation: orbPulse 7s ease-in-out infinite;
}
.kinetic__orb::before {
  content: ""; position: absolute; inset: -34px; border-radius: 50%;
  border: 1px solid rgba(139,92,246,.25);
  -webkit-mask-image: linear-gradient(140deg, #000 30%, transparent 70%);
  mask-image: linear-gradient(140deg, #000 30%, transparent 70%);
  animation: spin 26s linear infinite;
}
.kinetic__orb::after {
  content: ""; position: absolute; inset: -68px; border-radius: 50%;
  border: 1px dashed rgba(34,211,238,.22);
  animation: spin 44s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbPulse { 0%,100% { opacity: .9; } 50% { opacity: .65; } }
.kchip {
  position: absolute; padding: .6rem .85rem; border-radius: 12px;
  background: rgba(19,19,30,.82); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md); white-space: nowrap;
  will-change: transform;
}
.kchip .k { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kchip .v { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: #fff; }
.kchip .v em { font-style: normal; color: var(--sage); }
.kchip--1 { top: 8%;  left: 6%; }
.kchip--2 { top: 26%; right: 2%; }
.kchip--3 { bottom: 24%; left: 0; }
.kchip--4 { bottom: 6%; right: 10%; }
@media (prefers-reduced-motion: no-preference) {
  .kchip { animation: chipFloat 9s ease-in-out infinite; }
  .kchip--2 { animation-delay: -3s; } .kchip--3 { animation-delay: -5s; } .kchip--4 { animation-delay: -7s; }
}
@keyframes chipFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -10px; } }

/* investment strip (replaces the big hero offer card) */
.invest-line {
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.05rem;
  background: rgba(255,255,255,.02);
}
.invest-line b { color: #C9BEF9; font-weight: 600; }
.invest-line .sep { color: var(--line-2); }

/* the math / ROI section */
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.2rem; align-items: stretch; }
.roi-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)); position: relative; }
.roi-card h3 { font-size: 1.2rem; color: #fff; margin-bottom: .6rem; }
.roi-card p { color: var(--ink-2); }
.roi-card--cost .roi-big { color: var(--ink); }
.roi-card--return { border-color: var(--clay-soft); background: linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,.02)); }
.roi-big { font-family: var(--serif); font-weight: 600; font-size: 2.6rem; letter-spacing: -.03em; color: #C9BEF9; margin: .4rem 0 .6rem; }
.roi-big em { font-style: normal; font-size: 1.1rem; color: var(--muted); }
.roi-note { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-top: 1rem; }
@media (max-width: 800px) { .roi-grid { grid-template-columns: 1fr; } }

/* interactive payback calculator */
.roi-calc { margin-top: 1.2rem; border: 1px solid var(--clay-soft); border-radius: var(--radius-lg); padding: 1.8rem;
  background: linear-gradient(160deg, rgba(139,92,246,.08), rgba(8,145,178,.05)); position: relative; }
.roi-calc__head h3 { color: #fff; font-size: 1.2rem; margin-bottom: .3rem; }
.roi-calc__head p { color: var(--ink-2); margin-bottom: 1.2rem; }
.roi-calc__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; align-items: stretch; }
.roi-in { display: grid; gap: .4rem; align-content: start; }
.roi-in span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.roi-in input { font: 600 1.3rem var(--serif); color: #fff; background: var(--cream-2); border: 1.5px solid var(--line-2);
  border-radius: 12px; padding: .6rem .8rem; width: 100%; }
.roi-in input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.roi-out { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; display: grid; align-content: center; gap: .25rem;
  background: rgba(255,255,255,.02); }
.roi-out .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.roi-out b { font-family: var(--serif); font-size: 1.35rem; color: #fff; letter-spacing: -.02em; }
.roi-out--pay { border-color: var(--clay-soft); background: rgba(139,92,246,.12); }
.roi-out--pay b { color: #C9BEF9; text-shadow: 0 0 22px rgba(139,92,246,.5); }
@media (max-width: 900px) { .roi-calc__grid { grid-template-columns: 1fr 1fr; } .roi-out--pay { grid-column: 1 / -1; } }

/* ============================================================
   PORTAL & ADMIN dark patches
   ============================================================ */
.portal-body { background: var(--cream); }
.gate { background: radial-gradient(120% 120% at 50% 0%, #171233, var(--cream)); }
.gate__card { background: var(--paper); border-color: var(--line-2); }
.gate__mark { background: linear-gradient(150deg, #8B5CF6, #5B3FD6); box-shadow: 0 0 22px rgba(139,92,246,.5); }
.gate__form input { background: var(--cream-2); border-color: var(--line-2); color: var(--ink); }
.gate__form input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.gate__err { color: #F87171; }
.gate__hint code { background: var(--clay-wash); color: #C9BEF9; }

.side { background: #0B0A14; border-right: 1px solid var(--line); }
.side__client { background: rgba(139,92,246,.07); border-color: rgba(139,92,246,.18); }
.side__nav a.active { background: linear-gradient(120deg, #8B5CF6, #6D3EF2); box-shadow: 0 4px 18px rgba(109,62,242,.4); }
.admin-flag { background: var(--clay-wash); border-color: var(--clay-soft); color: #C9BEF9; }

.card, .tile, .acc, .step, .autorow, .doc, .block, .asec, .asum__sec, .fcard,
.assess-done, .money-stat, .quiz {
  background: var(--paper); border-color: var(--line);
}
.tile .v { color: #C9BEF9; }
.headline-card { background: linear-gradient(160deg, var(--paper), var(--clay-wash)); border-color: var(--clay-soft); }
.headline-card .k { color: #C9BEF9; }
.headline-card .big { color: #fff; }
.acc__head { color: var(--ink); }
.acc__head:hover { background: rgba(139,92,246,.06); }
.acc__head .chev { color: var(--sage); }
.stage-dot { background: var(--line); }
.stage-dot.on { background: linear-gradient(90deg, #8B5CF6, #22D3EE); box-shadow: 0 0 10px rgba(139,92,246,.4); }
.stage-card__name { color: #fff; }
.stage-card__pct { color: #C9BEF9; }
.badge--high { background: rgba(34,211,238,.12); color: #22D3EE; }
.badge--med  { background: var(--clay-wash); color: #C9BEF9; }
.dot--live { background: #22D3EE; box-shadow: 0 0 0 4px rgba(34,211,238,.15), 0 0 12px rgba(34,211,238,.6); }
.autorow .st--live { color: #22D3EE; }
.step__n { background: linear-gradient(150deg, #8B5CF6, #6D3EF2); }
.step--check.is-done .step__check { background: #22D3EE; border-color: #22D3EE; }
.step--check.is-done .step__check::after { color: #06202A; }
.doc .fi { background: var(--clay-wash); color: #C9BEF9; }

.block__head { background: linear-gradient(180deg, var(--paper), var(--cream-2)); border-bottom-color: var(--line); }
.block__title { color: var(--ink); }
.block__title:focus { background: var(--clay-wash); }
.ico-btn { background: var(--cream-2); border-color: var(--line); color: var(--ink-2); }
.ico-btn:hover { background: var(--clay-wash); border-color: var(--clay-soft); color: #C9BEF9; }
.ico-btn--del:hover { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: #F87171; }
.chip-btn { background: var(--cream-2); border-color: var(--line-2); color: var(--ink); }
.chip-btn:hover { border-color: var(--clay); background: var(--clay-wash); color: #C9BEF9; }
.addblock, .add-menu, .add-row-btn { background: transparent; border-color: var(--line-2); color: var(--muted); }
.addblock:hover, .add-row-btn:hover { border-color: var(--clay); color: #C9BEF9; }

.note-ta, .notes textarea, .msg textarea, .composer textarea,
.afield input, .afield select, .afield textarea,
.tracker td input, .tracker .th-in, .money-row select, .money-row input, .mini-row input, .check-text {
  background: var(--cream-2); border-color: var(--line-2); color: var(--ink);
}
.note-ta:focus, .notes textarea:focus, .msg textarea:focus, .composer textarea:focus,
.afield input:focus, .afield select:focus, .afield textarea:focus {
  border-color: var(--clay); box-shadow: 0 0 0 3px rgba(139,92,246,.2);
}
.check-text:focus { background: var(--clay-wash); border-color: var(--line-2); }
.tracker th { background: var(--cream-2); }
.tracker td, .tracker th { border-color: var(--line); }
.tracker td input:focus, .tracker .th-in:focus { outline-color: var(--clay-soft); background: var(--clay-wash); }
.tracker .th-add, .tracker .td-del { background: var(--cream-2); }
.prog { background: var(--line); }
.prog span { background: linear-gradient(90deg, #22D3EE, #8B5CF6); }
.check-row input[type=checkbox] { accent-color: #8B5CF6; }

.money-stat.in  { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.2); }
.money-stat.in .v { color: #22D3EE; }
.money-stat.out { background: var(--clay-wash); border-color: var(--clay-soft); }
.money-stat.out .v { color: #C9BEF9; }
.money-stat.net { background: var(--cream-2); } .money-stat.net .v { color: #fff; }
.mb-track { background: var(--line); }
.mb-fill.in { background: #22D3EE; } .mb-fill.out { background: #8B5CF6; }

.bubble.them { background: var(--paper); border-color: var(--line); }
.bubble.me { background: linear-gradient(120deg, #8B5CF6, #6D3EF2); }

.callout { background: linear-gradient(120deg, var(--clay-wash), var(--paper)); border-color: var(--clay-soft); }
.assess-tip { background: var(--clay-wash); border-color: var(--clay-soft); border-left-color: var(--clay); color: var(--ink-2); }
.assess-tip b { color: #fff; }
.asec__n { background: linear-gradient(150deg, #8B5CF6, #6D3EF2); }
.assess-done__seal { background: #22D3EE; color: #06202A; box-shadow: 0 0 24px rgba(34,211,238,.5); }
.findings__score { background: linear-gradient(160deg, var(--paper), var(--clay-wash)); border-color: var(--clay-soft); }
.dial { background: conic-gradient(#8B5CF6 calc(var(--v, 0) * 1%), var(--line) 0); box-shadow: 0 0 24px rgba(139,92,246,.25); }
.dial::after { background: var(--paper); }
.dial__num { color: #C9BEF9; }
.fcard--hot { border-color: var(--clay-soft); background: linear-gradient(180deg, var(--paper), var(--clay-wash)); }
.fcard .k { color: #C9BEF9; }
.fcard b { color: #fff; }
.fcard li { color: var(--ink); }
.asum__sec h3 { color: #C9BEF9; }
.asum__row { border-top-color: var(--line); }
.asum__a { color: var(--ink); }
.notes__saved { color: #22D3EE; }
.result__status { color: #22D3EE; }

/* preview banner (demo.html) */
.preview-banner { background: linear-gradient(90deg, #6D3EF2, #8B5CF6); }
.preview-banner .btn { background: #fff; color: #5B3FD6; }
.preview-banner .btn:hover { background: #EDE9FE; color: #5B3FD6; }

/* ============================================================
   ICONS (SVG line-icons, no emoji)
   ============================================================ */
.ico { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.18em; flex: none; }
.ico--inline { width: 1.05em; height: 1.05em; }

/* marketing feature tiles: gradient wash + white glyph */
.feature__ico { display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #8B5CF6, #6D3EF2); box-shadow: 0 6px 20px rgba(109,62,242,.32), inset 0 0 0 1px rgba(255,255,255,.08); }
.feature__ico .ico { width: 26px; height: 26px; stroke-width: 1.6; }
/* give each of the four a distinct on-brand hue so the row reads as a system */
.feature-grid .feature:nth-child(1) .feature__ico { background: linear-gradient(150deg, #8B5CF6, #6D3EF2); box-shadow: 0 6px 20px rgba(109,62,242,.32), inset 0 0 0 1px rgba(255,255,255,.08); }
.feature-grid .feature:nth-child(2) .feature__ico { background: linear-gradient(150deg, #22D3EE, #0891B2); box-shadow: 0 6px 20px rgba(8,145,178,.30), inset 0 0 0 1px rgba(255,255,255,.08); }
.feature-grid .feature:nth-child(3) .feature__ico { background: linear-gradient(150deg, #A78BFA, #7C4FF2); box-shadow: 0 6px 20px rgba(124,79,242,.30), inset 0 0 0 1px rgba(255,255,255,.08); }
.feature-grid .feature:nth-child(4) .feature__ico { background: linear-gradient(150deg, #2DD4BF, #0D9488); box-shadow: 0 6px 20px rgba(13,148,136,.30), inset 0 0 0 1px rgba(255,255,255,.08); }

/* portal sidebar nav icons */
.side__nav a { position: relative; }
.nav-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--muted); }
.nav-ico .ico { width: 19px; height: 19px; }
.side__nav a:hover .nav-ico { color: #C9BEF9; }
.side__nav a.active .nav-ico { color: #fff; }

/* admin "can access" flag + assessment privacy line icons */
.af-ico, .q__privacy-ico { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.16em; color: currentColor; }
.af-ico .ico, .q__privacy-ico .ico { width: 100%; height: 100%; }

/* company-brief section icons — color-coded per kind (organization aid) */
.brief-sec__ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--clay-wash); box-shadow: inset 0 0 0 1px rgba(139,92,246,.2); }
.brief-sec__ico .ico { width: 18px; height: 18px; }
.brief-sec__ico--market      { color: #22D3EE; background: rgba(34,211,238,.12); box-shadow: inset 0 0 0 1px rgba(34,211,238,.28); }
.brief-sec__ico--competitors { color: #A78BFA; background: rgba(167,139,250,.14); box-shadow: inset 0 0 0 1px rgba(167,139,250,.3); }
.brief-sec__ico--customers   { color: #60A5FA; background: rgba(96,165,250,.13); box-shadow: inset 0 0 0 1px rgba(96,165,250,.3); }
.brief-sec__ico--pricing     { color: #34D399; background: rgba(52,211,153,.12); box-shadow: inset 0 0 0 1px rgba(52,211,153,.28); }
.brief-sec__ico--levers      { color: #C084FC; background: rgba(192,132,252,.13); box-shadow: inset 0 0 0 1px rgba(192,132,252,.3); }
.brief-sec__ico--risks       { color: #FB923C; background: rgba(251,146,60,.12); box-shadow: inset 0 0 0 1px rgba(251,146,60,.28); }

/* brief locked / working state icon */
.brief-locked__ico { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 14px;
  background: var(--clay-wash); color: #C9BEF9; box-shadow: inset 0 0 0 1px rgba(139,92,246,.25); }
.brief-locked__ico .ico { width: 26px; height: 26px; }
.brief-locked__ico--work { color: #22D3EE; background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,.3); }

/* assessment done seal (was emoji check) */
.assess-done__seal { color: #06202A; }
.assess-done__seal .ico { width: 30px; height: 30px; stroke-width: 2; }

/* workspace add-section chip icons */
.chip-ico { color: var(--clay); }
.chip-ico.ico { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .1em; }
.chip-btn:hover .chip-ico { color: #C9BEF9; }

/* results / live proof — dark readability */
.proof-cell b { color: #fff; }
.proof-cell__good { color: #22D3EE !important; text-shadow: 0 0 20px rgba(34,211,238,.35); }
.proof-cell--ret b { color: #C9BEF9; text-shadow: 0 0 22px rgba(139,92,246,.45); }
.delta--good { background: rgba(34,211,238,.12); color: #22D3EE; }
.delta--bad { background: rgba(251,146,60,.14); color: #FB923C; }
.mtr-col__bar { background: #2F2A52; }
.mtr-col--now .mtr-col__bar { background: linear-gradient(180deg, #8B5CF6, #6D3EF2); box-shadow: 0 0 14px rgba(139,92,246,.4); }
.mtr-col__v { color: #fff; }
.mtr-target__rail { background: var(--line); }
.feed-chip--win { background: rgba(34,211,238,.12); color: #22D3EE; }
.feed-chip--tweak { background: rgba(96,165,250,.13); color: #60A5FA; }
.feed-chip--research { background: rgba(192,132,252,.14); color: #C084FC; }
.feed-val { color: #22D3EE; }
.feed-dot { box-shadow: 0 0 0 3px var(--cream); }

/* reveal (unchanged behavior, slightly deeper start) */
.reveal { transform: translateY(22px); }