:root {
  color-scheme: light;
  --page: #fff;
  --panel: #fff;
  --text: #111114;
  --muted: #5f5f66;
  --line: #d8d8dc;
  --red: #e31b23;
  --bright: #c8121a;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: Arial, Helvetica, sans-serif; background: var(--page); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 0, rgba(227, 27, 35, .10), transparent 38%), linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
.landing { display: grid; place-items: center; min-height: 100vh; padding: 48px 20px; }
.welcome { width: min(780px, 100%); text-align: center; }
.brand { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 30px; border: 2px solid var(--red); color: #fff; background: var(--red); font-weight: 900; letter-spacing: -.06em; transform: rotate(-3deg); box-shadow: 9px 9px 0 rgba(227, 27, 35, .16); }
.eyebrow { margin: 0; color: var(--bright); font-size: .72rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 12px 0 18px; font-size: 35px; font-weight: 900; letter-spacing: -.065em; line-height: .96; text-transform: uppercase; }
h1 span { color: var(--bright); }
.intro { margin: 0; color: var(--muted); font-size: 1.05rem; }
.actions { display: grid; gap: 12px; margin: 42px auto 0; }
.action { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 16px; padding: 21px 22px; border: 1px solid var(--line); color: var(--text); background: var(--panel); box-shadow: 0 12px 32px rgba(0, 0, 0, .06); text-align: left; text-decoration: none; transition: border-color .15s, transform .15s, background .15s; }
.action:hover, .action:focus-visible { border-color: var(--red); background: #fff7f7; transform: translateY(-2px); outline: none; }
.action--primary { border-color: var(--red); background: #fff7f7; }
.action-number { color: var(--bright); font: 700 .75rem Consolas, monospace; }
.action strong { display: block; font-size: 1.05rem; text-transform: uppercase; }
.action small { display: block; margin-top: 5px; color: var(--muted); font-size: .8rem; }
.arrow { color: var(--bright); font-size: 1.5rem; }
.notice { margin: 28px auto 0; padding: 16px 18px; border-left: 3px solid var(--red); color: var(--muted); background: #fff4f4; font-size: .78rem; line-height: 1.55; text-align: left; }
.notice strong, .notice a { color: var(--bright); }
.notice strong { text-transform: uppercase; }
@media (max-width: 560px) { .landing { padding: 36px 16px; } .action { grid-template-columns: 32px 1fr auto; padding: 18px 15px; gap: 10px; } .action small { line-height: 1.4; } h1 { font-size: clamp(2.25rem, 12vw, 3.5rem); } }