:root {
  color-scheme: light;
  --ink: #071b22;
  --paper: #f5f7f7;
  --white: #ffffff;
  --muted: #5e6c70;
  --line: #cad4d5;
  --teal: #10a8ad;
  --mint: #6de7cf;
  --lime: #c8ee51;
  --danger: #b9404d;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
}

a { color: inherit; }

.site-header {
  min-height: 76px;
  padding: 12px clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
}

.brand img { border-radius: 10px; }

.site-header nav,
footer nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
}

.site-header nav a,
footer a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}

.site-header nav a:hover,
footer a:hover,
.text-link:hover { color: #087a80; }

.hero {
  position: relative;
  min-height: min(720px, calc(100vh - 76px));
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  color: var(--white);
  background: var(--ink);
}

.hero-brand-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(48px, 8vw, 120px);
  z-index: -3;
}

.hero-brand-art img {
  width: min(52vw, 620px);
  height: auto;
  border-radius: 22%;
  opacity: 0.52;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: rgba(3, 18, 24, 0.62);
  z-index: -2;
}

.hero-content {
  width: min(780px, 100%);
  padding: clamp(72px, 10vw, 140px) clamp(22px, 7vw, 96px);
}

.eyebrow,
.section-label {
  margin: 0 0 16px;
  color: var(--mint);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 720px;
  margin-bottom: 20px;
  font-size: clamp(3rem, 8vw, 6.7rem);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: 0;
}

h3 {
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 620px;
  margin-bottom: 30px;
  color: #d7e8e8;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 48px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 850;
}

.button.primary { background: var(--lime); color: var(--ink); }
.button.primary:hover { background: #ddff70; }
.button.quiet { border-color: rgba(255,255,255,0.6); color: var(--white); }
.button.quiet:hover { background: rgba(255,255,255,0.1); }

.availability {
  margin: 18px 0 0;
  color: #b8c9ca;
  font-size: 0.83rem;
}

.status-band {
  padding: 14px clamp(20px, 7vw, 96px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--lime);
  font-size: 0.88rem;
}

.status-band > div { display: flex; align-items: center; gap: 10px; }
.status-band a { font-weight: 850; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #7b8a47; }
.status-dot.ok { background: #097446; }
.status-dot.fail { background: var(--danger); }

.intro,
.support-band,
.legal-page {
  padding: clamp(76px, 12vw, 160px) clamp(22px, 9vw, 140px);
}

.intro { max-width: 1200px; }
.intro .section-label { color: #087a80; }
.intro h2 { max-width: 940px; margin-bottom: 28px; }
.intro > p:last-child { max-width: 760px; color: var(--muted); font-size: 1.16rem; }

.feature-band {
  min-height: 520px;
  padding: clamp(70px, 9vw, 130px) clamp(22px, 9vw, 140px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
}

.feature-dark { background: var(--ink); color: var(--white); }
.feature-copy p { max-width: 600px; color: #b9cacc; }
.feature-number { display: block; margin-bottom: 24px; color: var(--mint); font-weight: 900; }

.waveform {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 14px);
}

.waveform i {
  width: clamp(8px, 1.2vw, 15px);
  height: 22%;
  display: block;
  background: var(--mint);
  border-radius: 3px;
}

.waveform i:nth-child(2), .waveform i:nth-child(11) { height: 38%; }
.waveform i:nth-child(3), .waveform i:nth-child(10) { height: 58%; }
.waveform i:nth-child(4), .waveform i:nth-child(9) { height: 82%; }
.waveform i:nth-child(5), .waveform i:nth-child(8) { height: 52%; }
.waveform i:nth-child(6), .waveform i:nth-child(7) { height: 100%; background: var(--lime); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--white);
}

.feature-grid article {
  min-height: 390px;
  padding: clamp(48px, 7vw, 96px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.feature-grid p { max-width: 560px; color: var(--muted); }

.privacy-band {
  padding: clamp(72px, 10vw, 130px) clamp(22px, 9vw, 140px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(45px, 8vw, 120px);
  background: #dce6e5;
}

.privacy-band .section-label { color: #087a80; }
.privacy-band h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.privacy-band p { color: #33474b; }
.text-link { font-weight: 900; text-underline-offset: 4px; }

.support-band { text-align: center; background: var(--white); }
.support-band p { color: var(--muted); }

footer {
  padding: 28px clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #c1d0d1;
  background: var(--ink);
  font-size: 0.84rem;
}

.legal-page {
  max-width: 1040px;
  min-height: calc(100vh - 160px);
  background: var(--paper);
}

.legal-page h1 { font-size: clamp(2.5rem, 6vw, 5rem); color: var(--ink); }
.legal-page h2 { margin-top: 50px; font-size: clamp(1.5rem, 3vw, 2.35rem); }
.legal-page p, .legal-page li { max-width: 820px; color: #405257; }
.legal-page .updated { color: #738286; font-size: 0.9rem; }

@media (max-width: 760px) {
  .site-header { align-items: flex-start; }
  .site-header nav { display: none; }
  .hero { min-height: 640px; }
  .hero-brand-art { align-items: flex-start; padding: 48px 22px; }
  .hero-brand-art img { width: min(78vw, 390px); opacity: 0.34; }
  .hero-content { padding-bottom: 74px; }
  .status-band { align-items: flex-start; }
  .feature-band,
  .privacy-band { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: auto; border-right: 0; }
  .waveform { height: 180px; }
  footer { align-items: flex-start; flex-direction: column; }
}

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