/* ═══════════════════════════════════════════════════════════
   VMG · shared.css
   Tokens, reset, base elements, and chrome shared by every page.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FONTS · self-hosted variable woff2 (Space Grotesk + JetBrains Mono)
   Single file each, full 100–900 weight axis.
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/space-grotesk-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
}

:root {
  /* Brand palette · hex declared first as fallback,
     OKLCH redeclared after for browsers that support it (last valid wins). */
  --hex-violet:       #842ABF;
  --hex-violet:       oklch(46% 0.208 304);
  --hex-violet-light: #B87CE8;
  --hex-violet-light: oklch(66.7% 0.163 304);
  --obsidian:         #050426;
  --obsidian:         oklch(10.5% 0.071 276);
  --midnight:         #080A40;
  --midnight:         oklch(16% 0.111 277);
  --royal:            #18298C;
  --royal:            oklch(28.4% 0.162 275);
  --sapphire:         #215BA6;
  --sapphire:         oklch(43.7% 0.144 256);

  --ink-100:          #F4F3FA;
  --ink-100:          oklch(96.4% 0.01 286);
  --ink-70:           rgba(244, 243, 250, 0.70);
  --ink-70:           oklch(96.4% 0.01 286 / 0.7);
  --ink-50:           rgba(244, 243, 250, 0.50);
  --ink-50:           oklch(96.4% 0.01 286 / 0.5);
  --ink-30:           rgba(244, 243, 250, 0.30);
  --ink-30:           oklch(96.4% 0.01 286 / 0.3);
  --ink-15:           rgba(244, 243, 250, 0.15);
  --ink-15:           oklch(96.4% 0.01 286 / 0.15);
  --ink-08:           rgba(244, 243, 250, 0.08);
  --ink-08:           oklch(96.4% 0.01 286 / 0.08);

  --alert-red:        #E5484D;
  --alert-red:        oklch(63% 0.19 25);

  --grad-cosmos:    linear-gradient(135deg, #050426 0%, #080A40 35%, #18298C 70%, #842ABF 100%);
  --grad-eclipse:   radial-gradient(circle at 30% 40%, #842ABF 0%, #18298C 35%, #080A40 70%, #050426 100%);
  --grad-aurora:    linear-gradient(180deg, #050426 0%, #080A40 40%, #215BA6 85%, #842ABF 100%);
  --grad-violet:    linear-gradient(135deg, #842ABF 0%, #18298C 100%);
  --grad-midnight:  linear-gradient(180deg, #050426 0%, #080A40 100%);

  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --f-display-xl: clamp(3rem, 9vw, 6.5rem);
  --f-display-l:  clamp(2.25rem, 5.5vw, 4rem);
  --f-h1:         clamp(1.75rem, 4vw, 2.75rem);
  --f-h2:         clamp(1.375rem, 2.75vw, 1.875rem);
  --f-h3:         1.25rem;
  --f-body:       1rem;
  --f-small:      0.875rem;
  --f-micro:      0.75rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --border-color: var(--ink-15);
  --section-max: 1280px;

  /* Motion · custom easings + duration scale */
  --ease-out-luxe:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out-luxe: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 200ms;
  --dur-base:  400ms;
  --dur-slow:  700ms;
  --dur-luxe:  1200ms;

  /* Tell the browser this is a dark UI (form widgets, scrollbars, autofill). */
  color-scheme: dark;
  /* Native checkboxes / radios / progress / range pick up the brand color. */
  accent-color: var(--hex-violet);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Balance multi-line headings — modern wrap algorithm */
h1, h2, h3, .hero-display, .section-title { text-wrap: balance; }

/* Skip link · visible only on keyboard focus */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: var(--space-s) var(--space-m);
  background: var(--hex-violet);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transform: translateY(-100%);
  transition: transform var(--dur-quick) var(--ease-out-luxe);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--hex-violet-light);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION · global override for accessibility
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL · applied by main.js to a curated selector list
   Stagger via inline --reveal-i set per element index in its parent.
   ═══════════════════════════════════════════════════════════ */
.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--dur-slow) var(--ease-out-luxe),
    transform var(--dur-slow) var(--ease-out-luxe);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
  will-change: opacity, transform;
}
.reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
}

body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--f-body);
  line-height: 1.6;
  color: var(--ink-100);
  background: var(--obsidian);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Atmospheric grain overlay — fixed, blended above content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.wrap {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

p { margin: 0 0 var(--space-s); }

/* Hidden container for SVG <symbol> defs */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ═══════════════════════════════════════════════════════════
   EYEBROW · MONO LABEL
   ═══════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 0 0 var(--space-s);
}
.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--hex-violet);
}

/* ═══════════════════════════════════════════════════════════
   HEADER · transparent, sits over hero
   ═══════════════════════════════════════════════════════════ */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m) var(--space-l);
  max-width: var(--section-max);
  margin: 0 auto;
  gap: var(--space-l);
}
.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: var(--ink-100);
}
.header-brand svg { width: 32px; height: 32px; }
.header-brand span {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.header-nav a { color: var(--ink-70); transition: color 0.2s; }
.header-nav a:hover, .header-nav a.is-active { color: var(--ink-100); }
.header-nav a.is-active { position: relative; }
.header-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--hex-violet);
}
.header-cta {
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 10px 16px;
  border: 1px solid var(--ink-30);
  border-radius: 2px;
  color: var(--ink-100);
  transition: all 0.2s;
}
.header-cta:hover { background: var(--hex-violet); border-color: var(--hex-violet); }

@media (max-width: 700px) {
  .header-nav { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   HERO · shared scaffold (page CSS supplies bg + min-height)
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3xl) 0 var(--space-xl);
  overflow: hidden;
  background-color: var(--obsidian);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-glyph-float {
  position: absolute;
  width: 50%;
  max-width: 600px;
  pointer-events: none;
  animation: glyph-drift 45s var(--ease-in-out-luxe) infinite;
  will-change: transform;
}

/* Ambient drift — slow but visible at higher opacities */
@keyframes glyph-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-2.5%, 1.5%) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.hero-content {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: end;
  padding: var(--space-2xl) 0;
  flex: 1;
}

.hero-display {
  font-size: var(--f-display-xl);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 var(--space-l);
}
.hero-display em {
  font-style: normal;
  background: linear-gradient(120deg, #B87CE8 0%, #842ABF 25%, #5E8FD9 50%, #842ABF 75%, #B87CE8 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-em-shimmer 7s var(--ease-in-out-luxe) infinite;
}

@keyframes hero-em-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-sub {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 540px;
  margin-bottom: var(--space-xl);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  border: 1px solid var(--ink-15);
  border-radius: 2px;
  background: rgba(5, 4, 38, 0.4);
  backdrop-filter: blur(10px);
}
.hero-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--ink-08);
  font-family: var(--font-mono);
  font-size: var(--f-micro);
}
.hero-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.hero-meta-key { color: var(--ink-50); text-transform: uppercase; letter-spacing: 0.12em; }
.hero-meta-val { color: var(--ink-100); text-align: right; }

.hero-foot {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--f-small);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 14px 24px;
  border-radius: 2px;
  transition: all 0.25s;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--hex-violet); color: #fff; }
.btn-primary:hover { background: var(--hex-violet-light); }
.btn-ghost { border-color: var(--ink-30); color: var(--ink-100); }
.btn-ghost:hover { border-color: var(--hex-violet); color: var(--hex-violet-light); }

/* ═══════════════════════════════════════════════════════════
   SECTION SHELL · used by every page
   ═══════════════════════════════════════════════════════════ */
section { padding: var(--space-3xl) 0; position: relative; }

.section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 800px) {
  .section-header { grid-template-columns: 1fr 2fr; gap: var(--space-xl); }
}
.section-num {
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  letter-spacing: 0.2em;
  color: var(--hex-violet);
  text-transform: uppercase;
  margin-bottom: var(--space-s);
}
.section-title { font-size: var(--f-display-l); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.section-title em { font-style: normal; color: var(--ink-50); }
.section-lead { font-size: 1.125rem; color: var(--ink-70); line-height: 1.6; max-width: 540px; }

/* ═══════════════════════════════════════════════════════════
   FINAL CTA · shared across all three pages
   ═══════════════════════════════════════════════════════════ */
.final-cta {
  background: var(--grad-cosmos);
  padding: var(--space-3xl) 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(132, 42, 191, 0.4) 0%, transparent 60%);
  pointer-events: none;
}
.final-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: end;
}
@media (min-width: 800px) {
  .final-cta-inner { grid-template-columns: 1.6fr 1fr; }
}
.final-cta h2 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.final-cta h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #B87CE8 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.final-cta-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1px solid var(--ink-15);
  border-radius: 2px;
  background: rgba(5, 4, 38, 0.4);
  backdrop-filter: blur(10px);
}
.final-cta-side p {
  font-size: var(--f-small);
  color: var(--ink-70);
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border-color);
  padding: var(--space-2xl) 0 var(--space-l);
  background: var(--grad-midnight);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-brand-mark { display: flex; align-items: center; gap: var(--space-s); margin-bottom: var(--space-m); }
.footer-brand-mark svg { width: 32px; height: 32px; }
.footer-brand-mark span { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.footer-tagline { color: var(--ink-70); font-size: var(--f-small); line-height: 1.6; max-width: 320px; }

.footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-50);
  margin-bottom: var(--space-m);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a, .footer-col li { color: var(--ink-70); font-size: var(--f-small); transition: color 0.2s; }
.footer-col a:hover { color: var(--ink-100); }

.footer-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  justify-content: space-between;
  align-items: flex-start;
  padding-top: var(--space-l);
  border-top: 1px solid var(--ink-08);
  font-family: var(--font-mono);
  font-size: var(--f-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-50);
}
@media (min-width: 700px) { .footer-row { flex-direction: row; align-items: center; } }