/* ============================================
   BASE - resets, body, canvas, type defaults, utilities, animations
   ============================================ */

* { box-sizing: border-box; }
/* Dark-only by design: tells the UA to render form controls, scrollbars
   and the canvas in dark mode so nothing flashes light. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }

/* Offset in-page anchors so the sticky nav doesn't cover headings */
:target, [id] { scroll-margin-top: 96px; }

/* Keyboard focus: always visible, brand-colored */
:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link: off-screen until focused */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: #fff;
  color: #0D1233;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* CANVAS */
.canvas {
  position: relative;
  --grid-x: 0px;
  --grid-y: 0px;
  --grid-glow-x: 50%;
  --grid-glow-y: 18%;
  --grid-glow-opacity: 0;
  background:
    linear-gradient(140deg, rgba(91, 124, 255, 0.10), transparent 34%),
    linear-gradient(220deg, rgba(24, 184, 166, 0.09), transparent 38%),
    linear-gradient(180deg, var(--bg-1) 0%, #101526 44%, #0B1722 100%);
  min-height: 100vh;
  isolation: isolate;
}
.canvas::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: var(--grid-x) var(--grid-y);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 72%);
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.canvas.has-grid-warp::before { opacity: 0.38; }
.canvas::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(280px 220px at var(--grid-glow-x) var(--grid-glow-y),
      rgba(169, 184, 255, 0.16),
      rgba(125, 227, 211, 0.08) 38%,
      transparent 72%);
  opacity: var(--grid-glow-opacity);
  transition: opacity 0.22s ease;
}
.canvas > * { position: relative; z-index: 1; }
.canvas > .grid-warp-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0.7;
}
.canvas.is-grid-dragging::before { opacity: 0.62; }
.canvas.is-grid-dragging::after { transition: none; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .canvas::before { background-position: 0 0; }
  .canvas::after { display: none; }
}

/* Floating orbs */
.orbs {
  display: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(82px);
  opacity: 0.32;
}
.orb.blue   { background: var(--primary);     }
.orb.purple { background: var(--secondary);   }
.orb.cyan   { background: #4ED7F2;            }
.orb.pink   { background: var(--tertiary);    }
.orb.gold   { background: var(--gold);        }

/* TYPE */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: 76px;
  line-height: 0.98;
}
h2 {
  font-size: 52px;
  line-height: 1.04;
}
h3 {
  font-size: 28px;
  line-height: 1.12;
}
h4 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.55;
}
@media (max-width: 900px) {
  h1 { font-size: 54px; }
  h2 { font-size: 40px; }
  .lead { font-size: 18px; }
}
@media (max-width: 560px) {
  h1 { font-size: 40px; line-height: 1.05; }
  h2 { font-size: 32px; line-height: 1.1; }
  h3 { font-size: 24px; }
  .lead { font-size: 16px; }
}
@media (max-width: 420px) {
  h1 { font-size: 36px; line-height: 1.08; }
  h2 { font-size: 30px; }
}
@media (max-width: 360px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
}

.grad-text {
  background: linear-gradient(120deg, #ffffff 0%, var(--primary-soft) 52%, #7DE3D3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text-gold {
  background: linear-gradient(120deg, var(--gold), #FFDF9A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* UTILITIES */
.flex { display: flex; }
.grow { flex: 1; }
.center { text-align: center; }
.muted { color: var(--ink-mute); }
.hide-sm { }
@media (max-width: 700px) { .hide-sm { display: none; } }

/* Color utilities: replace repeated inline color styles */
.text-gold        { color: var(--gold); }
.text-soft        { color: var(--ink-soft); }
.text-mute        { color: var(--ink-mute); }
.text-faint       { color: var(--ink-faint); }
.text-fff         { color: #fff; }
.text-pos-bright  { color: var(--positive-bright); }
.text-tertiary    { color: var(--tertiary); }
.text-primary-soft{ color: var(--primary-soft); }
.fw-700           { font-weight: 700; }
.fw-800           { font-weight: 800; }

/* Float anim for hero phone */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.float { animation: float 7s ease-in-out infinite; }

/* Scroll-reveal: elements fade/translate in as they enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Opt-in staggered reveal: children of a revealed grid cascade in.
   Add `reveal reveal--stagger` to a grid container (e.g. .pillars). */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal--stagger.in > * { opacity: 1; transform: none; }
.reveal--stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal--stagger.in > *:nth-child(2) { transition-delay: 0.10s; }
.reveal--stagger.in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal--stagger.in > *:nth-child(4) { transition-delay: 0.22s; }
.reveal--stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal--stagger.in > *:nth-child(6) { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .float { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal--stagger > * { opacity: 1; transform: none; transition: none; }
  .nav-links { transition: none !important; }
}