:root {
  color-scheme: dark;
  --void: #020306;
  --surface: #070b13;
  --surface-hot: #0b1220;
  --line: rgba(91, 139, 191, .22);
  --line-hot: rgba(94, 189, 255, .66);
  --cyan: #72d9ff;
  --ice: #eefaff;
  --muted: #7891a8;
  --blue: #173f6a;
  --red: #a72d43;
  --mono: "SFMono-Regular", "Roboto Mono", "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--void); }

body {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 82% 10%, rgba(17, 100, 179, .18), transparent 26%),
    radial-gradient(circle at 10% 72%, rgba(143, 26, 51, .12), transparent 31%),
    var(--void);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  color: var(--ice);
  font-family: var(--sans);
  margin: 0;
  min-height: 100%;
}

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

.observatory {
  margin: 0 auto;
  max-width: 1580px;
  padding: 34px clamp(18px, 4vw, 64px) 20px;
}

.masthead {
  align-items: end;
  border-bottom: 1px solid var(--line-hot);
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr auto;
  min-height: 300px;
  padding: 36px 0 30px;
}

.kicker,
.scope,
nav,
.metric-card span,
.signal-panel h3,
.rank-row,
.plan-meta,
.plan-status,
.credit-legend,
footer {
  font-family: var(--mono);
}

.kicker {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .18em;
  margin: 0 0 18px;
}

h1 {
  font-size: clamp(54px, 7.5vw, 128px);
  font-weight: 540;
  letter-spacing: -.075em;
  line-height: .82;
  margin: 0;
}

nav {
  display: grid;
  font-size: 9px;
  gap: 12px;
  letter-spacing: .1em;
  text-align: right;
}

nav a { color: var(--muted); }
nav a:hover { color: var(--cyan); }

.section-block { border-bottom: 1px solid var(--line); padding: 54px 0; }
.section-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; }
.section-heading h2 { font-size: clamp(28px, 3vw, 52px); font-weight: 520; letter-spacing: -.045em; margin: 0; }
.scope { color: var(--muted); font-size: 9px; letter-spacing: .1em; margin: 0; text-align: right; }

.metric-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
}

.metric-card {
  background: linear-gradient(145deg, rgba(19, 55, 91, .78), rgba(6, 12, 22, .96));
  border: 1px solid var(--line);
  min-height: 170px;
  padding: 20px;
}
.metric-card:nth-child(2n) { background: linear-gradient(145deg, rgba(89, 18, 36, .62), rgba(8, 10, 17, .96)); }
.metric-card span { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.metric-card strong { display: block; font-size: clamp(44px, 5vw, 82px); font-weight: 520; letter-spacing: -.06em; margin-top: 28px; }

.signal-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.signal-panel { background: rgba(5, 9, 16, .9); border: 1px solid var(--line); min-height: 260px; padding: 20px; }
.signal-panel h3 { color: var(--cyan); font-size: 9px; letter-spacing: .14em; margin: 0 0 24px; }
.rank-list { display: grid; gap: 10px; }
.rank-list > p { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.rank-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; font-size: 10px; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
.rank-row span:first-child { color: var(--muted); overflow-wrap: anywhere; }
.rank-row b { color: var(--ice); font-weight: 500; }
.privacy-note { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 18px 0 0; max-width: 900px; }

.pricing-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; }
.plan-card { background: rgba(5, 9, 16, .94); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 390px; padding: 22px; }
.plan-card[data-plan="query-100"] { border-color: rgba(94, 189, 255, .56); }
.plan-card[data-plan="query-500"] { background: linear-gradient(150deg, rgba(19, 55, 91, .5), rgba(5, 9, 16, .96)); }
.plan-card h3 { font-size: 22px; font-weight: 520; margin: 0; }
.plan-description { color: var(--muted); font-size: 11px; line-height: 1.5; min-height: 3.2em; }
.plan-price { font-size: clamp(42px, 4vw, 70px); font-weight: 520; letter-spacing: -.065em; margin: 34px 0 4px; }
.plan-price small { color: var(--muted); font-size: 10px; letter-spacing: 0; }
.plan-meta { color: var(--cyan); font-size: 9px; line-height: 1.6; }
.plan-features { color: var(--muted); display: grid; font-size: 11px; gap: 10px; line-height: 1.45; list-style: none; margin: 26px 0; padding: 0; }
.plan-features li::before { color: var(--cyan); content: "→ "; }
.plan-status { border: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .1em; margin-top: auto; padding: 12px; text-align: center; }

.credit-legend { align-items: start; color: var(--muted); display: grid; font-size: 9px; gap: 20px; grid-template-columns: 1fr 2fr; line-height: 1.6; margin-top: 26px; }
#credit-schedule { display: flex; flex-wrap: wrap; gap: 7px; }
.credit-chip { border: 1px solid var(--line); color: var(--cyan); padding: 7px 9px; }

footer { color: var(--muted); display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .1em; padding: 20px 0 0; }

@media (max-width: 980px) {
  .metric-grid,
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .observatory {
    padding: calc(18px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .masthead { align-items: start; grid-template-columns: 1fr; min-height: 90dvh; }
  h1 { font-size: clamp(52px, 17vw, 76px); }
  nav { grid-template-columns: repeat(2, 1fr); text-align: left; }
  nav a { border: 1px solid var(--line); min-height: 44px; padding: 14px 10px; }
  .section-heading { align-items: start; flex-direction: column; }
  .scope { text-align: left; }
  .metric-grid,
  .pricing-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 140px; }
  .credit-legend { grid-template-columns: 1fr; }
  footer { align-items: start; flex-direction: column; gap: 8px; }
}