/* ===================================================================
   AURUM — marketing-site skin for volta.quest
   ===================================================================
   Reuses the EXACT color/gradient/motion values from the Sarion
   chat-app's production Aurum skin (web3devworld/uhnwi-assistant,
   frontend-reskin/skins/aurum.css + tokens/contract.md) so
   volta.quest and sarion.volta.quest share one visual language.

   This is NOT that file ported verbatim — the chat-app contract has
   no concept of pricing tiers, FAQ blocks, or lifestyle photography.
   Instead: the marketing site's EXISTING custom properties (defined
   in style.css's :root — --black, --gold, --cream, etc.) are
   remapped onto Aurum's values below, so the ~95% of style.css that
   already reads through var(--black)/var(--gold)/etc. reskins for
   free. New tokens and components style.css has no equivalent for
   (glass cards, photo treatment, aurora, gradient text) are added
   fresh, using only the approved palette.

   Load this AFTER style.css on every page. It is additive/override
   only — no layout, spacing, or structural rule lives here, and this
   is the ONLY file in the repo allowed to contain literal hex/rgba
   color values. Every component file must reference a custom
   property instead (grep-checked before commit).
   =================================================================== */

:root {
  /* ── Remap existing style.css tokens onto Aurum's exact values ──
     (old value -> new, all four verified near-1:1 conceptual matches
     with the chat-app contract's --bg-base/-surface-1/-surface-2,
     --text-primary/-secondary/-tertiary, --accent, --border-subtle) */
  --black: #08070a;        /* was #0A0A0B — Aurum --bg-base */
  --black-2: #121016;      /* was #141416 — Aurum --bg-surface-1 */
  --black-3: #1b1720;      /* was #1C1C1F — Aurum --bg-surface-2 */
  --cream: #eae7e0;        /* was #E8E6E1 — Aurum --text-primary */
  /* --cream-dim and --gray: the chat-app contract's literal
     --text-secondary (#9b968e) and --text-tertiary (#6e6a63) values
     were adopted first, but real-user feedback on the deployed site
     was that body copy and nav links read as illegibly dark/charcoal
     on the near-black background — confirmed by the earlier contrast
     audit, where --gray/--text-tertiary measured 3.3-3.7:1 against
     these backgrounds, below the 4.5:1 AA threshold at the normal
     text sizes it's actually used at (not just decorative captions —
     .lede-small, nav links, .pricing-deliverable, footer copy).
     Brightened both, deliberately diverging from the literal chat-app
     values here specifically because a person who has to read this
     site said the literal values don't work as body/nav text at
     marketing-site sizes and line-lengths — the same class of
     judgment call the chat-app contract itself made when it needed
     --text-2xs/--neutral tokens the original brief didn't anticipate.
     New values keep the same hue (desaturated warm gray) and the same
     three-step hierarchy (--cream > --cream-dim > --gray), just
     lighter across the board:
       --cream-dim: 6.4-6.8:1 -> 12.2-13.9:1 against bg-base/card bg
       --gray:       3.3-3.7:1 -> 6.6-7.5:1  against bg-base/card bg */
  --cream-dim: #d9d6cf;
  --gray: #a39e94;
  --gold: #d4af37;         /* was #C9A961 — Aurum --accent */
  --line: rgba(234, 231, 224, 0.08); /* was rgba(232,230,225,0.08) — Aurum --border-subtle, near-identical, now exact */
  --border-subtle: var(--line); /* alias, so component rules below can use the contract's own name */

  /* --gold-dim (subtle-gold text/border/bullet color — has no direct
     equivalent in the chat-app contract, which only ever pairs solid
     --accent with a semi-transparent --accent-muted wash unsuitable
     for legible text/border use at this opacity) is derived by
     mixing the two GIVEN, approved tokens — --accent and --bg-base —
     rather than introducing an arbitrary new hex value. */
  --gold-dim: color-mix(in srgb, var(--gold) 62%, var(--black) 38%);

  /* ── New tokens, verbatim from the chat-app contract ── */
  --accent-hover: #e4c568;
  --accent-muted: rgba(212, 175, 55, 0.14);
  --accent-gradient: linear-gradient(135deg, #d4af37 0%, #9b7bb8 52%, #6b4fa0 100%);
  --border-strong: rgba(234, 231, 224, 0.18);
  --success: #6b9080;
  --warning: #b08d57;
  --danger: #9c5b56;

  --blur-glass: 18px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  --motion-ambient-duration: 420s;
  --motion-fade-duration: 220ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --gradient-ambient:
    radial-gradient(ellipse 60% 45% at 20% 15%, rgba(212, 175, 55, 0.10), transparent 60%),
    radial-gradient(ellipse 55% 40% at 82% 78%, rgba(107, 79, 160, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(155, 123, 184, 0.06), transparent 65%);

  /* Aurum's --font-display value is adopted as given. --font-ui
     (Inter) and --font-mono (already "JetBrains Mono", identical to
     the chat-app contract's value) are the site's own established
     fonts and are kept unchanged per the brief's typography note. */
  --font-display: "Newsreader", Georgia, serif;

  /* ── New tokens this site needs, built from the palette above ──
     (no equivalent in the chat-app contract, which has no concept
     of a marketing "content card") */
  --card-glass-bg: linear-gradient(160deg, var(--black-2) 0%, var(--black-3) 100%);
  /* Accent gradient at reduced opacity for the 1px top hairline —
     same three RGB stops as --accent-gradient, alpha added, no new
     hue introduced. */
  --card-glass-border-top: linear-gradient(90deg,
    rgba(212, 175, 55, 0.55) 0%,
    rgba(155, 123, 184, 0.55) 52%,
    rgba(107, 79, 160, 0.55) 100%);
}

/* ===================================================================
   Legacy hardcoded-color fixes — same visual slots, exact new values
   =================================================================== */
.nav { background: linear-gradient(to bottom, rgba(8, 7, 10, 0.9), transparent); }
.nav.scrolled { background: rgba(8, 7, 10, 0.92); }
.mobile-menu { background: rgba(8, 7, 10, 0.97); }
.btn-ghost { border-color: var(--border-strong); }
.component-card:hover,
.pricing-card:hover { background: var(--black-3); }

/* ===================================================================
   Photo treatment — replaces flat-opacity dark overlays site-wide
   ===================================================================
   .photo-aurum: applied directly to the <img> — desaturates toward
   the surrounding dark palette via a luminosity blend, at reduced
   opacity, instead of a flat black scrim.
   .hero-media::after: the hero's overlay (the one existing flat
   gradient scrim in the previous theme) is replaced with the same
   mechanism — a gradient TINT (not a flat scrim) over the blended
   photo, heavier at the bottom where headline text sits. */
.photo-aurum {
  opacity: 0.55;
  mix-blend-mode: luminosity;
}
/* A flat 0.55 was measured (average per-pixel luminance of the source
   PNG, 0-255 scale) to crush already-dark hardware photography to
   near-total black — luminosity blend maps backdrop hue onto source
   luminance, so a source that's mostly near-zero luminance stays
   near-zero regardless of the backdrop. Confirmed by rendering the
   live page in a real headless-Chrome and inspecting the actual
   pixels, not assumed from the stylesheet:
     18.6  volta-product-front-panel.png   -> crushed, confirmed
     19.4  volta-product-rear-io.png        (same figure/#showcase)
     30.0  volta-component-ram-32gb-ecc.png
     32.0  volta-component-ssd-intel-enterprise.png
     32.6  volta-component-psu-1600w-titanium.png
     33.1  volta-component-network-card-intel.png
     38.3  volta-component-cpu-waterblock.png
     43.5  volta-component-liquid-cooling.png
     49.5  volta-component-motherboard-pcb.png
   volta-trust-vault-door.png (52.1) and volta-trust-encryption-aes256
   (101.7) were both left at 0.55/luminosity based on this luminance
   number alone — wrong for a different reason than the crushed set
   above: real user feedback was that the vault door read dark and the
   AES-256 plate (an engraved silver/steel block, meant to look bright
   and premium) read dull rather than genuinely bright metal.
   "readable at some opacity" and "looks like bright polished metal"
   are different bars — luminosity blend recolors toward the backdrop
   regardless, so it can't produce a true bright-silver look no matter
   the opacity. Fixed the same way as the crushed set: dropped the
   blend mode and lifted exposure with filter:brightness(), confirmed
   via live A/B screenshots — see the two rules below. */
/* These two specifically (7.3%/7.6% average source luminance — the
   darkest images on the site by a wide margin) were re-tested after
   the opacity-only fix above (0.90) turned out to make almost no
   visible difference in a real render: confirmed via a live A/B
   screenshot that mix-blend-mode:luminosity fundamentally caps a
   blended pixel's luminance at the SOURCE's own (near-zero) luminance
   — no opacity value can brighten that, since opacity only controls
   how much of an already-dark blended result shows over an
   already-dark backdrop. The actual fix is a real exposure lever:
   dropping the blend mode (which was also picking up a blue-ish cast
   from the nearby aurora's hue) and using filter:brightness() instead
   — confirmed via a second live A/B screenshot to recover visible
   grille texture, the power button, and the studio floor reflection,
   in a neutral (non-tinted) gray rather than the blend's blue cast. */
img[src*="volta-product-front-panel"],
img[src*="volta-product-rear-io"] {
  opacity: 0.85;
  mix-blend-mode: normal;
  filter: brightness(2.1) contrast(1.05) saturate(0.6);
}
img[src*="volta-component-"] {
  opacity: 0.82;
}
img[src*="volta-trust-vault-door"] {
  opacity: 0.95;
  mix-blend-mode: normal;
  filter: brightness(1.7) contrast(1.05);
}
img[src*="volta-trust-encryption-aes256"] {
  opacity: 1;
  mix-blend-mode: normal;
  filter: brightness(1.5) contrast(1.05);
}
/* Human/lifestyle photography — founder portraits, both office desk
   photos, the Geneva boardroom, and hero backgrounds — was left on
   the same luminosity-blend treatment as the hardware shots above,
   based on source-luminance measurements alone (75-105 average, well
   above the "crushed" threshold) without actually rendering and
   looking at them. That was wrong: real user feedback on the live
   site was that these specifically read as filtered/dark, described
   as "a dark filter overlay." Confirmed by an A/B screenshot (live
   page, blend swapped to normal at higher opacity vs. the deployed
   luminosity version): the founder portrait goes from a
   desaturated, artificially tinted image to natural skin tones and
   suit color, and the hero workstation photo goes from barely
   visible to fully legible, in both cases with headline text still
   fully readable against it.

   mix-blend-mode:luminosity is a deliberate stylistic choice for the
   abstract hardware photography above (recoloring copper/steel/black
   plastic toward the palette costs nothing real and buys visual
   cohesion) — it is not appropriate for a photo of an actual person
   or a real office, where the point is to show what's actually there,
   not restyle it. Normal blend + a higher opacity restores that for
   every human/lifestyle photo on the site; --gradient tint below is
   also softened to match, so hero headline text keeps enough contrast
   without crushing the photo behind it. */
.hero-img,
.founder-img,
.lifestyle-block img,
.boardroom-visual img {
  opacity: 0.88;
  mix-blend-mode: normal;
}
.hero-media::after {
  background: linear-gradient(180deg,
    rgba(8, 7, 10, 0.15) 0%,
    rgba(8, 7, 10, 0.30) 55%,
    rgba(8, 7, 10, 0.65) 100%
  );
}

/* ===================================================================
   Ambient aurora — one per section, behind all content
   ===================================================================
   Implemented as a ::before pseudo-element (no markup changes needed
   across five HTML files) rather than an inserted <div>. `isolation:
   isolate` gives each .section/.hero its own stacking context so a
   negative z-index pseudo-element reliably paints ABOVE that
   section's own background-color but BELOW every actual content
   child, without needing to touch every content wrapper's z-index
   individually.

   prefers-reduced-motion: style.css's global `* { animation: none
   !important; }` rule does NOT cover this — confirmed by testing it
   in a real browser with the media feature emulated, not assumed:
   the universal selector `*` alone never matches a ::before/::after
   pseudo-element (it would need `*, *::before, *::after`), so the
   aurora kept animating under prefers-reduced-motion: reduce despite
   that existing rule. Handled explicitly below instead.

   .section has no overflow:hidden in style.css (only .hero does) —
   without it, the aurora's inset:-15% box would bleed past the
   section's own border box into its neighbors. Added here so the
   effect stays contained per-section, matching .hero's existing
   containment. */
.section,
.hero {
  isolation: isolate;
  overflow: hidden;
}

.section::before,
.hero::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background: var(--gradient-ambient);
  animation: aurum-drift var(--motion-ambient-duration) var(--motion-ease) infinite alternate;
  pointer-events: none;
  will-change: transform;
}
.hero-media { z-index: -2; }

@media (prefers-reduced-motion: reduce) {
  .section::before,
  .hero::before {
    animation: none;
  }
}

@keyframes aurum-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2.5%, -2%) scale(1.03); }
}

/* ===================================================================
   Glass cards — FAQ items, guarantee/grid items, pricing tiers
   =================================================================== */
.faq-item,
.guarantee-item,
.pricing-card {
  position: relative;
  background: var(--card-glass-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-sm);
  padding: 28px;
}
.faq-item::before,
.guarantee-item::before,
.pricing-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--card-glass-border-top);
}
/* .faq-item/.guarantee-item previously relied on a bottom rule / grid
   gap for separation — the glass-card treatment replaces that with
   its own card border on all sides, so the old top/bottom-border
   rules in style.css (faq-item border-bottom, faq-item:first-child
   border-top) are superseded here rather than left double-drawn. */
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item:first-child { border-top: 1px solid var(--border-subtle); }
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.pricing-card:hover,
.component-card:hover { background: var(--card-glass-bg); }

/* Featured tier: the middle of /it/'s three pricing cards (Advisor),
   using --border-strong + a touch of --accent-muted wash instead of
   a heavier visual device (badge, scale-up, etc.), per brief. */
.pricing-grid .pricing-card:nth-child(2) {
  border-color: var(--border-strong);
  background:
    linear-gradient(var(--accent-muted), var(--accent-muted)),
    var(--card-glass-bg);
}

/* ===================================================================
   Gradient text — eyebrows/headline emphasis/key numbers ONLY
   =================================================================== */
.text-gradient-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The one flat-gold price display on the homepage's acquisition
   section, and the /it/ tier + hourly prices — "key numbers", not
   body copy, per brief. */
#acquisition .section-title,
.pricing-amount,
.pricing-hourly-rate {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================================================================
   Forms — legible, low-decoration inputs on the new surface tokens
   =================================================================== */
/* Real user feedback: fields were unreadable as fields — --border-subtle
   is an 8%-opacity near-white line on a --black-2 fill, sitting inside a
   .section-contact whose own background is the SAME --black-2 — border
   and surroundings were, in practice, black on black. Fixed with a fill
   one step darker than its container (so the field reads as its own
   "well," not just a color match to the page) and a border bright enough
   to actually see the field boundary at a glance, not just enough to
   pass a contrast-ratio calculation. */
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--black);
  border: 1px solid rgba(234, 231, 224, 0.4);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--cream);
  box-shadow: 0 0 0 1px var(--cream);
}