/* ==========================================================================
   SORZIA — base.css  (v5 — premium dual-tone system)
   Design tokens, reset, typography, layout primitives, cosmic environment.

   Every colour, space, radius, shadow and timing value in the whole site
   resolves back to this file. Change it here, it changes everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Base: near-black, barely blue ----------------------------------- */
  --ink:       #02050B;  /* deepest - page extremes                          */
  --base:      #040811;
  --space:     #07101B;
  --space-2:   #091425;  /* the lightest ground we ever use                  */
  --space-3:   #091425;
  --slate:     #0E1625;
  --slate-2:   #0B1220;

  /* ---- Surfaces: dark translucent glass, warm-rimmed -------------------
     Lighter and slightly more opaque than the v12 values so panels read as
     raised surfaces against the near-black ground rather than darker holes
     in it — same navy family, no hue shift toward blue or grey. */
  --glass-1:   rgba(16, 25, 43, 0.78);
  --glass-2:   rgba(20, 30, 49, 0.74);

  /* ---- Champagne gold: antique, never yellow -------------------------- */
  --gold-deep:   #9C7428;
  --gold:        #BC913B;
  --gold-mid:    #D4AD59;
  --gold-soft:   #D4AD59;  /* alias, used widely                            */
  --gold-bright: #E7C97D;
  --gold-lift:   #F2DEAC;

  /* ---- Text ------------------------------------------------------------ */
  --ivory:     #F4EFE5;
  --muted:     #BEB8AD;
  --text:      var(--ivory);
  --text-muted: var(--muted);
  --text-dim:  #8F8A80;

  /* ---- Energy: used sparingly, inside the lens mostly ------------------ */
  --violet:  #6255C7;
  --indigo:  #6255C7;
  --optical: #93BDE8;   /* cool refracted light                             */
  --sky:     #93BDE8;   /* alias kept: :focus-visible resolves this   */
  --sky-blue: #93BDE8;
  --blue:    #93BDE8;   /* alias - focus rings                              */

  /* ---- Surfaces -------------------------------------------------------- */
  /* Warm-tinted glass. A neutral white overlay on navy reads cold; a trace
     of gold in the highlight is what makes the panels feel expensive.       */
  --surface-1: linear-gradient(168deg, rgba(231, 201, 125, 0.05) 0%, rgba(255, 255, 255, 0.022) 32%, rgba(255, 255, 255, 0.008) 100%);
  --surface-2: linear-gradient(168deg, rgba(231, 201, 125, 0.085) 0%, rgba(255, 255, 255, 0.036) 34%, rgba(255, 255, 255, 0.014) 100%);
  --surface-solid: rgba(10, 19, 36, 0.78);

  --line:        rgba(212, 173, 89, 0.14);
  --line-strong: rgba(231, 201, 125, 0.34);
  --line-cool:   rgba(147, 189, 232, 0.10);
  --hairline:    rgba(255, 255, 255, 0.05);

  /* ---- Typography -------------------------------------------------------
     System-first. On macOS/iOS this resolves to SF Pro, on Windows to Segoe
     UI Variable, on Android to Roboto — each platform's own premium UI face.
     Nothing is downloaded, so there is no render-blocking font request and
     no third-party dependency. Display and UI share the family; the
     hierarchy comes from weight, size and tracking, not from a second font. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", "Segoe UI Mono", Menlo, monospace;

  /* Apple-style ramp: one confident display size, then a tight, quiet scale. */
  --step--2: 0.6875rem;
  --step--1: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --step-0:  clamp(0.9rem, 0.88rem + 0.10vw, 0.9375rem);
  --step-1:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-2:  clamp(1.18rem, 1.10rem + 0.36vw, 1.375rem);
  --step-3:  clamp(1.5rem, 1.32rem + 0.82vw, 2rem);
  --step-4:  clamp(2rem, 1.62rem + 1.62vw, 3.05rem);

  /* Tracking tightens as type grows — optical sizing done by hand. */
  --track-display: -0.032em;
  --track-title:   -0.021em;
  --track-body:    -0.006em;
  --track-label:    0.06em;

  /* ---- Space ----------------------------------------------------------- */
  --sp-1: 0.4rem;
  --sp-2: 0.7rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.25rem;
  --sp-6: 3.25rem;
  --sp-7: 4.75rem;
  --sp-8: 6.5rem;

  /* ---- Shape ----------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  /* Three parts: a tight contact shadow, a wide ambient one, and a warm
     bounce. The bounce is what stops dark panels reading as flat holes.     */
  --shadow-1:
    0 1px 1px rgba(0, 0, 0, 0.40),
    0 8px 22px -14px rgba(0, 0, 0, 0.88);
  --shadow-2:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 22px 46px -26px rgba(0, 0, 0, 0.92),
    0 4px 30px -22px rgba(212, 173, 89, 0.26);
  --shadow-3:
    0 2px 4px rgba(0, 0, 0, 0.50),
    0 42px 80px -38px rgba(0, 0, 0, 0.95),
    0 8px 46px -28px rgba(212, 173, 89, 0.30);

  --edge: inset 0 1px 0 rgba(255, 245, 224, 0.085);
  --edge-strong: inset 0 1px 0 rgba(255, 245, 224, 0.16);
  --glow-gold: 0 0 34px -8px rgba(212, 173, 89, 0.46);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* The polished reveal curve: fast departure, long settle. */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-micro: 160ms;   /* hover, press, icon nudge      */
  --dur-1: 200ms;
  --dur-state: 320ms;   /* UI state change               */
  --dur-2: 340ms;
  --dur-reveal: 560ms;  /* content entrance              */
  --dur-3: 640ms;

  /* ---- Layout ---------------------------------------------------------- */
  --shell: 1280px;
  --shell-wide: 1460px;
  --header-h: 74px;
  --rail-w: 96px;
}

/* A phone toolbar, not a shrunken desktop one. */
@media (max-width: 899px) {
  :root { --header-h: 60px; }   /* trust rail width — see components.css for the gate    */
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  /* body's own overflow-x:hidden only clips body's children. Fixed-position
     elements (the aurora backdrop, the ask dock, the mobile nav overlay)
     are positioned against the viewport itself, so an oversized inset on
     any of them was still able to make html — the real scrolling element —
     horizontally scrollable, regardless of body's setting. */
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--text);
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { padding: 0; list-style: none; }

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

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

::selection {
  background: rgba(212, 173, 89, 0.26);
  color: var(--gold-lift);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--track-title);
  color: var(--ivory);
  text-wrap: balance;
}

/* One confident display size. Heavier optical weight, tighter tracking. */
h1 {
  font-size: var(--step-4);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: var(--track-display);
}

h2 { font-size: var(--step-3); line-height: 1.14; }
h3 { font-size: var(--step-2); line-height: 1.24; letter-spacing: -0.014em; }
h4 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--text-muted);
  max-width: 52ch;
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

/* Numeric UI (status, counters) aligns in columns. */
.tnum { font-variant-numeric: tabular-nums; }

/* Gold text keeps the approved champagne ramp. */
.gold-text {
  background: linear-gradient(96deg, var(--gold-mid) 4%, var(--gold-lift) 40%, var(--gold-bright) 64%, var(--gold) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 590;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* Ornamental section heading: ——— ◆ Title ◆ ——— */
.rule-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
}

.rule-heading::before,
.rule-heading::after {
  content: "";
  flex: 1 1 auto;
  max-width: 190px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 169, 74, 0.42));
}

.rule-heading::after { background: linear-gradient(90deg, rgba(208, 169, 74, 0.42), transparent); }

.rule-heading > .diamond {
  flex: none;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(208, 169, 74, 0.8);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.shell-wide { width: min(100% - 2.5rem, var(--shell-wide)); margin-inline: auto; }
.shell-narrow { width: min(100% - 2.5rem, 800px); margin-inline: auto; }

.section { padding-block: clamp(2.5rem, 4.4vw, 4rem); position: relative; }
.section-tight { padding-block: clamp(2rem, 3.4vw, 3rem); }
.section-lg { padding-block: clamp(3rem, 5.5vw, 5rem); }

.section-head {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.section-head.center { justify-items: center; text-align: center; }
.section-head.center p { max-width: 62ch; }

.stack > * + * { margin-top: var(--sp-3); }
.grid { display: grid; gap: var(--sp-4); }

.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.flow-center { display: grid; justify-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   5. Cosmic environment - four depth layers
   --------------------------------------------------------------------------
   far ground     : near-black, barely blue
   atmosphere     : soft cosmic haze, slowly drifting
   intelligence   : faint constellation geometry, the "system underneath"
   foreground     : optical dust (hero only, see .lens-dust)
   plus a heavy vignette so the eye is pulled to the lens.
   -------------------------------------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    /* atmosphere */
    radial-gradient(64% 44% at 62% 34%, rgba(98, 85, 199, 0.10), transparent 62%),
    radial-gradient(52% 38% at 30% 24%, rgba(156, 116, 40, 0.075), transparent 64%),
    radial-gradient(58% 42% at 18% 84%, rgba(98, 85, 199, 0.055), transparent 66%),
    /* far ground */
    linear-gradient(180deg,
      #02050B 0%,
      #040811 24%,
      #07101B 50%,
      #050A14 76%,
      #02050B 100%);
}

/* Intelligence layer: faint geometry and nodes, not obvious stars. */
.sky::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg stroke='%23BEB8AD' stroke-opacity='.13' stroke-width='.6' fill='none'%3E%3Cpath d='M34 62 L142 28 L228 96 L142 28 M228 96 L338 54 M34 62 L88 168 M88 168 L228 96 M88 168 L46 286 M338 54 L392 152 M392 152 L286 214 M286 214 L228 96 M286 214 L322 330 M46 286 L168 322 M168 322 L286 214 M168 322 L206 402 M322 330 L392 152 M322 330 L268 396'/%3E%3C/g%3E%3Cg fill='%23E7C97D' fill-opacity='.30'%3E%3Ccircle cx='34' cy='62' r='1.5'/%3E%3Ccircle cx='142' cy='28' r='1.2'/%3E%3Ccircle cx='228' cy='96' r='1.8'/%3E%3Ccircle cx='338' cy='54' r='1.2'/%3E%3Ccircle cx='88' cy='168' r='1.5'/%3E%3Ccircle cx='392' cy='152' r='1.3'/%3E%3Ccircle cx='286' cy='214' r='1.7'/%3E%3Ccircle cx='46' cy='286' r='1.3'/%3E%3Ccircle cx='168' cy='322' r='1.5'/%3E%3Ccircle cx='322' cy='330' r='1.4'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.22'%3E%3Ccircle cx='196' cy='186' r='.7'/%3E%3Ccircle cx='372' cy='262' r='.6'/%3E%3Ccircle cx='112' cy='398' r='.7'/%3E%3Ccircle cx='258' cy='36' r='.6'/%3E%3C/g%3E%3C/svg%3E");
  animation: skyDrift 320s linear infinite;
}

/* Vignette only. The grain is a separate layer below, because combining
   them here is what let the noise render at full strength in v7. */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(126% 92% at 50% 44%,
    transparent 38%, rgba(2, 5, 11, 0.5) 78%, rgba(2, 5, 11, 0.85) 100%);
}

/* Film grain, deliberately near-imperceptible.
   v6 carried opacity .032; the v7 rewrite folded the noise into the vignette
   layer and lost that clamp, so it rendered at the tile's own 50% alpha and
   the whole page read as gritty. It is now ~1.6% and blended, which reads as
   depth rather than texture. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.016;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* On high-density screens the tile is already sub-pixel; drop it further. */
@media (min-resolution: 2dppx) {
  .grain { opacity: 0.010; }
}

@keyframes skyDrift {
  from { background-position: 0 0; }
  to   { background-position: 420px 840px; }
}

/* --------------------------------------------------------------------------
   6. Accessibility helpers
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--gold-bright);
  color: #14100A;
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--dur-2) var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* Sprite host — icons live in the document, never a second request. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Scroll reveal (progressive enhancement)
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-premium),
    transform var(--dur-reveal) var(--ease-premium);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* A short content settle on every page load, so navigation between static
   pages feels like one product rather than separate documents. */
.js main { animation: pageIn 460ms var(--ease-premium) both; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .js main { animation: none; }
}