/* ============================================================
   SWIT — base: reset, document, typography, atmosphere
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Keep raster images in aspect ratio even when width/height attrs are set.
   Without this, the HTML height="…" attribute stretches an img whose CSS
   only sets width (e.g. the phone mockups). */
img { height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

::selection {
  background: var(--accent);
  color: oklch(15% 0.03 245);
}

/* ---- Atmospheric background: drifting warm light + grid + grain ---- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

.atmosphere::before {
  /* faint blueprint grid */
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.022) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.orb--1 {
  width: 52vw; height: 52vw;
  top: -16vw; left: -8vw;
  background: radial-gradient(circle, oklch(62% 0.17 235 / 0.5), transparent 65%);
  animation: drift-1 26s var(--ease-inout) infinite alternate;
}
.orb--2 {
  width: 44vw; height: 44vw;
  top: 30vh; right: -14vw;
  background: radial-gradient(circle, oklch(50% 0.14 250 / 0.46), transparent 62%);
  animation: drift-2 32s var(--ease-inout) infinite alternate;
}
.orb--3 {
  width: 36vw; height: 36vw;
  bottom: -10vw; left: 28vw;
  background: radial-gradient(circle, oklch(44% 0.1 228 / 0.42), transparent 60%);
  animation: drift-3 38s var(--ease-inout) infinite alternate;
}

@keyframes drift-1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.12); } }
@keyframes drift-2 { to { transform: translate3d(-7vw, -5vh, 0) scale(1.1); } }
@keyframes drift-3 { to { transform: translate3d(5vw, -7vh, 0) scale(1.15); } }

.atmosphere::after {
  /* fine film grain */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}

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

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

/* ---- Typography helpers ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: 0.8;
}
.eyebrow--center::before { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); letter-spacing: -0.015em; }

.lead {
  font-size: var(--text-lead);
  color: var(--muted);
  line-height: 1.55;
  max-width: 56ch;
}

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

.section-head {
  max-width: 64ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head .h2 { margin-top: 0.9rem; }
.section-head .lead { margin-top: 1.1rem; }
.section-head--center .lead { margin-inline: auto; }

.u-mono {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}