/* Aether marketing site.
   Design tokens are lifted from the app's own frontend/style.css so the site
   and the product read as one thing — same surfaces, same accent, same
   dark-first posture with a real light theme rather than an inversion. */

:root {
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-raised: #202020;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: #2c2c2a;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;

  --accent: #3987e5;
  --accent-ink: #ffffff;

  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --wrap: 1120px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Background pattern. Kept as tokens so the light theme can re-pitch the
     whole treatment rather than inherit a dark one at lower opacity. */
  --grid-line: rgba(255, 255, 255, 0.038);
  --grid-size: 56px;
  --star: rgba(255, 255, 255, 0.8);
  --glow-a: rgba(57, 135, 229, 0.30);
  --glow-b: rgba(120, 90, 220, 0.22);
  --veil: 88%;

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-raised: #ffffff;
  --border: rgba(11, 11, 11, 0.1);
  --border-strong: #e1e0d9;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #6f6e69;

  --accent: #2a78d6;

  /* No starfield in light mode — dots on white read as dust, not space.
     The grid carries the geometry instead, and the glows drop to a tint. */
  --grid-line: rgba(11, 11, 11, 0.05);
  --star: transparent;
  --glow-a: rgba(42, 120, 214, 0.14);
  --glow-b: rgba(120, 90, 220, 0.10);
  --veil: 82%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- background ----------
   One fixed layer behind everything: a fine graph-paper grid, which reads as
   structure rather than decoration and suits infrastructure tooling. Fixed
   rather than scrolling so it behaves like a backdrop the content moves
   across, which is most of the "space" of it.

   pointer-events:none matters — a full-viewport fixed layer would otherwise
   swallow every click on the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* The bands that used to be flat `--surface` now let the grid through, so
   the pattern is continuous down the page instead of appearing only in the
   gaps between sections. Cards stay fully opaque, so body text never sits
   on a patterned surface. */
.band,
.section-alt,
.footer {
  background: color-mix(in srgb, var(--surface) var(--veil), transparent);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 62px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); }
.brand:hover { text-decoration: none; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; }
.brand-mark {
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--accent); display: inline-block; flex: none;
}

.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--text-secondary); font-size: 14px; }
.nav-links a:hover { color: var(--text-primary); text-decoration: none; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-secondary); cursor: pointer; font-size: 14px;
}
.icon-btn:hover { color: var(--text-primary); }

.btn {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost {
  background: var(--surface); color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--accent); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 96px 0 72px;
  text-align: center;
  /* Own stacking context, so the z-index:-1 layers below sit above the
     page-wide grid but still behind this section's own text. */
  isolation: isolate;
  overflow: hidden;
}

/* Two offset radial blooms. Large radii and low alpha so they read as depth
   behind the headline rather than a coloured panel. */
.hero::before {
  content: "";
  position: absolute;
  inset: -25% -10% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 58% at 22% 12%, var(--glow-a), transparent 68%),
    radial-gradient(48% 54% at 80% 4%, var(--glow-b), transparent 70%),
    radial-gradient(60% 40% at 50% 0%, var(--glow-a), transparent 75%);
  animation: drift 34s ease-in-out infinite alternate;
}

/* Sparse starfield. Fixed positions rather than a repeating tile, so there
   is no visible seam, and masked away toward the bottom so the stars never
   compete with the buttons. Light theme sets --star: transparent, which
   removes it entirely — dots on white read as dust, not space. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 17% 62%, var(--star), transparent 100%),
    radial-gradient(1.5px 1.5px at 23% 31%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 31% 9%, var(--star), transparent 100%),
    radial-gradient(2px 2px at 37% 47%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 44% 24%, var(--star), transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 71%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 58% 13%, var(--star), transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 39%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 71% 57%, var(--star), transparent 100%),
    radial-gradient(2px 2px at 77% 21%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 83% 44%, var(--star), transparent 100%),
    radial-gradient(1.5px 1.5px at 89% 12%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 94% 66%, var(--star), transparent 100%),
    radial-gradient(1px 1px at 3% 44%, var(--star), transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 4%, var(--star), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 88%);
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

.eyebrow { display: flex; gap: 8px; justify-content: center; margin: 0 0 28px; }
.pill {
  font-size: 12px; font-family: var(--mono);
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.pill-quiet {
  background: var(--surface); color: var(--text-muted); border-color: var(--border-strong);
}

h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.1; letter-spacing: -0.03em;
  margin: 0 0 22px; font-weight: 650;
}

.lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--text-secondary);
  max-width: 640px; margin: 0 auto 34px;
}
.lede strong { color: var(--text-primary); font-weight: 600; }

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-size: 14px; color: var(--text-muted); }

/* ---------- band ---------- */

.band { border-block: 1px solid var(--border); background: var(--surface); }
.logos {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; padding: 20px 24px; flex-wrap: wrap;
}
.logo-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.logo-list {
  display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.logo-list li {
  font-family: var(--mono); font-size: 14px; color: var(--text-secondary);
}

/* ---------- sections ---------- */

.section { padding: 84px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 650;
}
.section-title { text-align: center; margin-bottom: 16px; }

.body { color: var(--text-secondary); font-size: 17px; margin: 0 0 18px; }
.body.center { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.body strong { color: var(--text-primary); }

.muted { color: var(--text-muted); }
.small { font-size: 14px; }

/* ---------- feature grid ---------- */

/* min() on the track floor, and min-width:0 on the items. Without both, a
   grid child refuses to shrink below its content (min-width defaults to
   auto) and a track floor wider than a phone viewport overflows the page —
   which silently clips every section, not just the grid. */
.grid {
  display: grid; gap: 16px; margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid > *, .install > *, .split > * { min-width: 0; }

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; margin: 0 0 10px; font-weight: 600;
}
.card p { margin: 0; color: var(--text-secondary); font-size: 15px; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-accent { background: var(--accent); }
.dot-good { background: var(--status-good); }
.dot-warn { background: var(--status-warning); }
.dot-quiet { background: var(--text-muted); }

/* ---------- security split ---------- */

.split {
  display: grid; gap: 40px; margin-top: 40px;
  grid-template-columns: 1.15fr 0.85fr; align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.checklist {
  list-style: none; margin: 0; padding: 24px;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.checklist li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  color: var(--text-secondary); font-size: 15px;
}
.checklist li:last-child { margin-bottom: 0; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--status-good); font-weight: 700;
}

/* ---------- figure ---------- */

.figure { margin: 0; }
.figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
figcaption { margin-top: 14px; text-align: center; font-size: 14px; }

/* ---------- install ---------- */

.install {
  display: grid; gap: 20px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}
.install-block h3 { font-size: 17px; margin: 0 0 6px; }
.install-block .muted { font-size: 14px; margin: 0 0 14px; }

pre {
  position: relative; margin: 0; max-width: 100%;
  background: var(--page); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 18px;
  overflow-x: auto;
}
pre code {
  background: none; border: none; padding: 0;
  font-size: 13px; line-height: 1.7; color: var(--text-secondary);
  white-space: pre;
}

.copy {
  position: absolute; top: 10px; right: 10px;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  color: var(--text-muted); border-radius: var(--radius-sm);
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.copy:hover { color: var(--text-primary); }
.copy[data-copied] { color: var(--status-good); border-color: var(--status-good); }

.reqs {
  margin-top: 44px; padding: 26px;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.reqs h3 { margin: 0 0 14px; font-size: 17px; }
.reqs ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-secondary); }
.reqs li { margin-bottom: 8px; font-size: 15px; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--border); padding: 40px 0; background: var(--surface); }
.footer-inner {
  display: flex; justify-content: space-between; gap: 24px;
  align-items: flex-start; flex-wrap: wrap;
}
.footer-inner p { margin: 8px 0 0; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer nav a { color: var(--text-secondary); font-size: 14px; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .hero { padding: 64px 0 52px; }
  .section { padding: 60px 0; }
}