/* ==========================================================================
   NEXVANTA — Deep Field design system
   core.css : tokens, reset, typography, layout primitives, utilities
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Surfaces — deep field */
  --bg:            #04070e;
  --bg-raise:      #070c17;
  --bg-panel:      #0a1120;
  --bg-inset:      #060a13;

  --panel:         color-mix(in oklab, #0a1120 82%, transparent);
  --panel-soft:    color-mix(in oklab, #0c1424 60%, transparent);

  /* Hairlines */
  --line:          rgba(130, 170, 230, 0.13);
  --line-soft:     rgba(130, 170, 230, 0.08);
  --line-strong:   rgba(140, 190, 255, 0.26);

  /* Ink */
  --ink:           #e8eefb;
  --ink-2:         #b9c6de;
  --ink-3:         #8394b1;
  --ink-4:         #5b6a85;

  /* Brand spectrum */
  --cyan:          #22d3ee;
  --cyan-hi:       #67e8f9;
  --blue:          #3b82f6;
  --violet:        #a855f7;
  --magenta:       #e040fb;

  /* Semantic (mirrors the product UI) */
  --rose:          #fb3b6c;
  --amber:         #f5a524;
  --emerald:       #10e0a0;

  /* Gradients */
  --grad-brand:    linear-gradient(100deg, #22d3ee 0%, #3b82f6 42%, #a855f7 76%, #e040fb 100%);
  --grad-brand-soft: linear-gradient(100deg, rgba(34,211,238,.9), rgba(59,130,246,.9) 45%, rgba(168,85,247,.9) 78%, rgba(224,64,251,.9));
  --grad-edge:     linear-gradient(140deg, rgba(34,211,238,.55), rgba(59,130,246,.16) 38%, rgba(168,85,247,.34) 74%, rgba(224,64,251,.5));
  --grad-ink:      linear-gradient(180deg, #ffffff 0%, #d5e1f6 52%, #90a3c4 100%);

  /* Glows */
  --glow-cyan:     0 0 0 1px rgba(34,211,238,.28), 0 18px 60px -22px rgba(34,211,238,.55);
  --glow-violet:   0 0 0 1px rgba(168,85,247,.26), 0 18px 60px -22px rgba(168,85,247,.5);

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.5);
  --shadow-md:     0 12px 34px -12px rgba(0,0,0,.85);
  --shadow-lg:     0 40px 110px -42px rgba(0,0,0,.95), 0 2px 0 rgba(255,255,255,.03) inset;
  --shadow-screen: 0 60px 160px -50px rgba(3,10,26,.98), 0 0 0 1px rgba(140,190,255,.12), 0 0 90px -30px rgba(34,211,238,.28);

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm */
  --maxw:        1280px;
  --maxw-narrow: 940px;
  --gutter:      clamp(1.15rem, 4vw, 2.75rem);
  --section-y:   clamp(5.5rem, 11vh, 9.5rem);

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

  /* Motion */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-mid:  340ms;
  --t-slow: 720ms;

  /* Video geometry (all demo captures are 1920x948) */
  --demo-ratio: 1920 / 948;

  --nav-h: 68px;
  --scrollbar: 0px;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 22px);

  /* Hard stop on sideways drag. The decorative glows and off-canvas bleed are
     positioned past the right edge on purpose; without this the page becomes
     horizontally scrollable and can be dragged away from the viewport, leaving
     a dead strip beside it. `clip` rather than `hidden` because clip does not
     turn the root into a scroll container, so `position: sticky` keeps working. */
  overflow-x: clip;
}

body {
  background-color: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

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

img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

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

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

hr {
  border: 0;
  height: 1px;
  background: var(--line);
}

:target { scroll-margin-top: calc(var(--nav-h) + 26px); }

::selection {
  background: rgba(34, 211, 238, 0.26);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: #05080f; }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1d3455, #16233c);
    border-radius: 99px;
    border: 2px solid #05080f;
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2a4f80, #1d3153); }
}
html { scrollbar-color: #1d3455 #05080f; scrollbar-width: thin; }

/* ----------------------------------------------------- 3. PAGE ATMOSPHERE */
/* Base deep-field wash: fixed so it never scrolls out of alignment. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% -14%, rgba(34,211,238,.13), transparent 62%),
    radial-gradient(80% 58% at 92% 6%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(90% 60% at 4% 34%, rgba(59,130,246,.10), transparent 62%),
    linear-gradient(180deg, #05080f 0%, #04070e 46%, #03060c 100%);
}

/* Film grain — kills banding on the big gradients, adds texture. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, 2%); }
  33%  { transform: translate(2%, -3%); }
  50%  { transform: translate(-2%, -2%); }
  66%  { transform: translate(3%, 1%); }
  83%  { transform: translate(-1%, 3%); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------- 4. LAYOUT */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--maxw-narrow); }
.shell--wide   { max-width: 1520px; }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }

/* Section top hairline that fades at both ends */
.section--ruled::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,190,255,.2) 22%, rgba(140,190,255,.2) 78%, transparent);
}

.stack   { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.stack-s { display: grid; gap: .6rem; }
.row     { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asymmetric two-column splits (architecture, deploy). These used to be inline
   `style="grid-template-columns:…"` attributes, which no media query can beat —
   so they stayed two-up on phones and squeezed both columns to ~150px. */
.grid--split { align-items: start; }
.grid--split-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.grid--split-even { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--split-wide,
  .grid--split-even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  /* grid-4 carries compact stat cards. Two-up keeps them scannable; one-up made
     four short cards occupy four phone screens. Falls to one column below ~340px. */
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --------------------------------------------------------- 5. TYPOGRAPHY */
.display-1,
.display-2,
.display-3,
.display-4,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(2.7rem, 1.35rem + 5.9vw, 6.1rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.display-2 {
  font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3.35rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.display-3 {
  font-size: clamp(1.55rem, 1.12rem + 1.55vw, 2.5rem);
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.display-4 {
  font-size: clamp(1.14rem, 1.04rem + 0.42vw, 1.42rem);
  letter-spacing: -0.024em;
  line-height: 1.24;
  font-weight: 600;
}

.lead {
  font-size: clamp(1.03rem, 0.96rem + 0.55vw, 1.31rem);
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.body-lg { font-size: 1.03rem; line-height: 1.68; }
.body-sm { font-size: 0.905rem; line-height: 1.62; color: var(--ink-3); }
.body-xs { font-size: 0.815rem; line-height: 1.55; color: var(--ink-3); }

.muted  { color: var(--ink-3); }
.dim    { color: var(--ink-4); }
.strong-ink { color: var(--ink); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.735rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.mono-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Gradient headline treatment */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Guard against invisible text if background-clip fails */
  -webkit-text-fill-color: transparent;
}

.ink-text {
  background: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Deliberately de-emphasised clause inside a headline */
.hush { color: var(--ink-4); }

.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }
.nowrap  { white-space: nowrap; }

/* -------------------------------------------------- 6. SECTION FURNITURE */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-hi);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px 2px rgba(34, 211, 238, .75);
  flex: none;
  animation: pulse-dot 2.6s var(--ease-in-out) infinite;
}

.eyebrow--violet { color: #d8b4fe; }
.eyebrow--violet::before { background: var(--violet); box-shadow: 0 0 12px 2px rgba(168,85,247,.75); }
.eyebrow--rose { color: #ffa3ba; }
.eyebrow--rose::before { background: var(--rose); box-shadow: 0 0 12px 2px rgba(251,59,108,.7); }
.eyebrow--amber { color: #ffd08a; }
.eyebrow--amber::before { background: var(--amber); box-shadow: 0 0 12px 2px rgba(245,165,36,.7); }
.eyebrow--emerald { color: #8ff0cd; }
.eyebrow--emerald::before { background: var(--emerald); box-shadow: 0 0 12px 2px rgba(16,224,160,.7); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.72); }
}

.section-head {
  display: grid;
  gap: 1.1rem;
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}

.section-head--center {
  max-width: 68ch;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: clamp(1.25rem, 3vw, 3.5rem);
}

@media (max-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ------------------------------------------------------- 7. SCROLL REVEAL */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(6px);
  transition:
    opacity 780ms var(--ease-out),
    transform 780ms var(--ease-out),
    filter 780ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
[data-reveal="right"] { transform: translate3d(26px, 0, 0); }
[data-reveal="scale"] { transform: scale(.965) translate3d(0, 16px, 0); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  will-change: auto;
}

/* Clients without scripting — including crawlers that do not execute JS — never
   run the intersection observer, so reveal state must not hide content from them. */
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

/* --------------------------------------------------------- 8. UTILITIES */
.sr-only {
  position: absolute !important;
  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: fixed;
  top: .75rem;
  left: 50%;
  translate: -50% -220%;
  z-index: 200;
  padding: .7rem 1.2rem;
  border-radius: var(--r-pill);
  background: #0a1120;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: translate var(--t-mid) var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
  border: 0;
}

.center { text-align: center; }
.relative { position: relative; }
.full { width: 100%; }

.hide-sm { }
@media (max-width: 720px) { .hide-sm { display: none !important; } }
@media (max-width: 1080px) { .hide-md { display: none !important; } }
@media (min-width: 721px) { .only-sm { display: none !important; } }

/* Decorative glow blobs, cheap (no filter: blur) */
.aura {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  opacity: .5;
}
/* Auras sit at negative insets (e.g. `right: -14%`) so the glow bleeds past the
   edge. Clip that bleed at the section box or it becomes a real scrollable
   region — the root cause of the page drifting sideways on phones. overflow-x
   alone leaves overflow-y visible, so vertical glow bleed and sticky rails inside
   the section are untouched. */
.section:has(> .aura),
.hero,
.wall,
.cta { overflow-x: clip; }

.aura--cyan    { background: radial-gradient(circle, rgba(34,211,238,.28), transparent 68%); }
.aura--violet  { background: radial-gradient(circle, rgba(168,85,247,.26), transparent 68%); }
.aura--blue    { background: radial-gradient(circle, rgba(59,130,246,.24), transparent 68%); }
.aura--rose    { background: radial-gradient(circle, rgba(251,59,108,.2), transparent 68%); }

/* Perspective grid floor */
.gridfloor {
  position: absolute;
  inset-inline: -20%;
  bottom: 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(120,180,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,180,255,.14) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 72%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent 72%);
  opacity: .55;
}

/* ----------------------------------------------- 9. 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;
  }

  [data-reveal] { opacity: 1; transform: none; filter: none; }
  body::after { animation: none; }
}