:root {
  color-scheme: dark;
  --ink: #f7fbff;
  --muted: #a8b6c7;
  --line: rgba(255, 255, 255, .12);
  --accent: #4ee0b5;
  --accent-soft: rgba(78, 224, 181, .13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(48, 115, 123, .36), transparent 34rem),
    radial-gradient(circle at 88% 82%, rgba(37, 88, 137, .26), transparent 30rem),
    #07131d;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
}
.shell { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: clamp(32px, 8vh, 88px) 0 28px; }
.card {
  position: relative;
  min-height: min(650px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 7vw, 88px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(13, 31, 44, .95), rgba(8, 19, 29, .88));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .36);
}
.card::after { content: "+"; position: absolute; right: clamp(24px, 7vw, 90px); top: 42px; color: var(--accent); font: 300 clamp(74px, 12vw, 150px)/1 Georgia, serif; opacity: .23; }
.card.compact { min-height: min(530px, calc(100vh - 120px)); }
.brand { position: absolute; top: clamp(26px, 5vw, 52px); left: clamp(28px, 7vw, 88px); display: flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(78,224,181,.45); border-radius: 12px; color: var(--accent); background: var(--accent-soft); font-size: 13px; letter-spacing: .02em; }
.eyebrow { margin: 60px 0 18px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .18em; }
h1 { max-width: 800px; margin: 0; font: 650 clamp(40px, 7vw, 82px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.045em; text-wrap: balance; }
.lead { max-width: 690px; margin: 28px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.7; }
.status { display: flex; align-items: center; gap: 10px; width: fit-content; margin-top: 34px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: #c9d4df; background: rgba(255,255,255,.035); font-size: 14px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.button { width: fit-content; margin-top: 30px; padding: 13px 18px; border-radius: 12px; color: #06140f; background: var(--accent); font-weight: 750; text-decoration: none; }
footer { padding: 22px 4px 0; color: #75869a; font-size: 13px; }
@media (max-width: 640px) {
  .shell { width: min(100% - 24px, 1100px); padding-top: 12px; }
  .card { min-height: calc(100vh - 74px); border-radius: 22px; }
  .card::after { top: 76px; right: 20px; }
  h1 { font-size: clamp(38px, 12vw, 54px); }
}