:root {
  --canvas: #0e0e0e;
  --raise: #161616;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --fg: #fafafa;
  --muted: #a49e95;
  --action: #e85002;
  --sand: #d9c3ab;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--fg); scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { width: min(var(--maxw), calc(100% - 48px)); margin: 0 auto; }
.header { min-height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.bar, .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { color: var(--fg); text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -.03em; }
.brand b { color: var(--action); }
.nav { display: flex; flex-wrap: wrap; gap: 20px; }
.nav a, .footer-nav a { color: var(--muted); font: 500 12px/1.2 var(--mono); letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.nav a:hover, .footer-nav a:hover { color: var(--fg); }
.hero { min-height: 74vh; display: grid; place-items: center; padding: 96px 0 72px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 680px; height: 680px; right: -220px; top: -260px; background: radial-gradient(circle, rgba(232,80,2,.28), transparent 68%); pointer-events: none; }
.hero-content { position: relative; }
.eye { color: var(--muted); font: 500 12px/1.2 var(--mono); letter-spacing: .15em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin: 0 0 28px; }
.eye::before { content: ""; width: 30px; height: 1px; background: var(--action); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.04em; line-height: .98; margin: 0; }
h1 { font-size: clamp(50px, 10vw, 94px); max-width: 10ch; text-transform: uppercase; }
h1 span, .accent { color: var(--action); }
.lead { max-width: 55ch; color: #e6e1db; font-size: clamp(17px, 2.2vw, 21px); margin: 28px 0 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; background: var(--action); color: #fff; border-radius: 4px; font: 700 15px var(--display); text-decoration: none; transition: transform .15s, background .15s; }
.button:hover { background: #ff5a09; transform: translateY(-2px); }
.quiet-link { color: var(--sand); font: 600 14px var(--display); text-underline-offset: 5px; }
.section { border-top: 1px solid var(--line); padding: 88px 0; }
.section h2 { font-size: clamp(34px, 6vw, 58px); max-width: 14ch; text-transform: uppercase; }
.section-copy { max-width: 58ch; color: var(--muted); font-size: 17px; margin: 22px 0 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 44px; }
.card { padding: 28px 26px 34px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.card:last-child { border-right: 0; }
.card .number { color: var(--action); font: 700 12px var(--mono); letter-spacing: .12em; }
.card h3 { font-size: 23px; margin: 16px 0 10px; }
.card p { color: var(--muted); margin: 0; }
.trust { background: var(--raise); border: 1px solid var(--line-strong); border-radius: 8px; padding: clamp(32px, 6vw, 62px); margin-top: 48px; }
.trust h2 { font-size: clamp(30px, 5vw, 48px); }
.trust p { color: var(--muted); max-width: 60ch; margin: 18px 0 0; }
.legal { padding: 96px 0; }
.legal h1 { font-size: clamp(42px, 7vw, 70px); max-width: 14ch; }
.legal h2 { margin-top: 46px; font-size: clamp(25px, 4vw, 36px); }
.legal p, .legal li { color: var(--muted); max-width: 72ch; }
.legal a { color: var(--sand); }
.legal ul { padding-left: 22px; }
.footer { border-top: 1px solid var(--line); padding: 42px 0 74px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer small { display: block; color: #6d675f; font: 11px/1.7 var(--mono); letter-spacing: .05em; margin-top: 28px; }
@media (max-width: 760px) {
  .wrap { width: min(100% - 36px, var(--maxw)); }
  .bar, .footer-row { align-items: flex-start; flex-direction: column; }
  .header { padding: 19px 0; }
  .hero { min-height: 68svh; padding: 76px 0 62px; }
  .section, .legal { padding: 64px 0; }
  .grid { grid-template-columns: 1fr; }
  .card { border-right: 0; }
}