/* Zustack placeholder. Tokens and components follow the Zustack design system; the whole page is
   one hero, so it sits on the navy stage (the system's dark theme) for every visitor. */

@font-face {
  font-family: "Ubuntu Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/ubuntu-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ubuntu Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/ubuntu-sans-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(/fonts/unbounded-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dark-theme values from tokens.json */
:root {
  --surface: #1a204c;
  --ink: #f2f4ff;
  --ink-muted: #b9bfe3;
  --accent-text: #5fd3be;
  --focus: var(--ink);

  --navy-deep: #12163a;
  --navy-raised: #2c3675;
  --on-navy: #f2f4ff;
  --teal: #4fc3af;
  --teal-deep: #1f6f78;
  --volt: #c8f56e;

  --font-display: "Unbounded", "Ubuntu Sans", system-ui, sans-serif;
  --font-sans: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Ubuntu Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 4px;
  --size-container: 1200px;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: var(--size-container);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Header: the Logo lockup (mark on dark, wordmark in Unbounded Light) */
.header { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-navy); text-decoration: none; }
.brand svg { flex: none; }
.brand__word { font: 300 32px/1 var(--font-display); letter-spacing: -0.03em; }
.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Hero */
.hero {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.hero__eyebrow {
  margin: 0 0 var(--space-4);
  font: 500 12px/16px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.hero__title {
  margin: 0;
  font: 600 56px/60px var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__lead {
  margin: var(--space-5) 0 var(--space-4);
  max-width: 34em;
  font: 400 18px/28px var(--font-sans);
  color: var(--ink-muted);
}
.hero__note { margin: 0; max-width: 34em; color: var(--ink-muted); }

.hero__art { margin: 0; }
.hero__art svg { display: block; width: 100%; height: auto; max-height: 420px; }

/* Isometric stack art: Sites (volt), Apps (teal), Mail (teal-deep), Domains (navy-raised) */
.iso-top-volt { fill: var(--volt); }
.iso-top-teal { fill: var(--teal); }
.iso-top-deep { fill: var(--teal-deep); }
.iso-top-navy { fill: var(--navy-raised); }
.iso-shade-l { fill: var(--navy-deep); opacity: 0.42; }
.iso-shade-r { fill: var(--navy-deep); opacity: 0.22; }
.iso-spot { fill: var(--on-navy); }
.iso-beam-stop-a { stop-color: var(--volt); stop-opacity: 0.38; }
.iso-beam-stop-b { stop-color: var(--volt); stop-opacity: 0; }
.iso-line { stroke: var(--volt); fill: none; stroke-width: 2; stroke-linecap: round; }
.iso-dot { fill: var(--volt); }

/* Footer */
.footer { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.footer p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

@media (max-width: 720px) {
  .wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
  .brand__word { font-size: 28px; }
  .hero { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .hero__title { font-size: 40px; line-height: 44px; }
  .hero__art svg { max-width: 360px; margin: 0 auto; }
}