:root {
  color-scheme: light;
  --bg: #f7f3ea;
  --ink: #161412;
  --muted: #69615a;
  --card: rgba(255,255,255,.78);
  --line: rgba(22,20,18,.12);
  --accent: #2f6f73;
  --accent-2: #c47a47;
  --shadow: 0 24px 80px rgba(27, 24, 20, .12);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 20% 0%, rgba(47,111,115,.18), transparent 34rem), radial-gradient(circle at 90% 10%, rgba(196,122,71,.16), transparent 30rem), var(--bg); color: var(--ink); }
a { color: inherit; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.nav { display:flex; align-items:center; justify-content:space-between; padding: 28px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.03em; }
.logo { width:38px; height:38px; border-radius:14px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.navlinks { display:flex; gap:18px; color:var(--muted); font-size:14px; }
.hero { padding: 84px 0 62px; display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 54px; align-items:center; }
.kicker { display:inline-flex; border:1px solid var(--line); background: rgba(255,255,255,.55); border-radius:999px; padding:8px 12px; color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
h1 { font-size: clamp(46px, 8vw, 86px); line-height:.92; letter-spacing:-.075em; margin:20px 0; }
.lede { color:var(--muted); font-size:20px; line-height:1.55; max-width: 650px; }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; align-items:center; }
.button { text-decoration:none; border-radius:999px; padding:14px 20px; background:var(--ink); color:#fff; font-weight:800; box-shadow: var(--shadow); }
.button.secondary { background:rgba(255,255,255,.7); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.phone { background: linear-gradient(180deg, #211f1b, #45413a); border-radius:44px; padding:14px; box-shadow: var(--shadow); transform: rotate(2deg); }
.screen { min-height:540px; border-radius:34px; background: linear-gradient(180deg,#fffdf8,#efe8dc); padding:24px; overflow:hidden; }
.metric { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:20px; margin:14px 0; }
.metric small { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.metric strong { display:block; margin-top:8px; font-size:30px; letter-spacing:-.04em; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; padding:40px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:24px; box-shadow: 0 14px 40px rgba(27,24,20,.06); }
.card h3 { margin:0 0 10px; letter-spacing:-.03em; }
.card p, .legal p { color:var(--muted); line-height:1.6; }
.legal { max-width:820px; padding:54px 0 80px; }
.legal h1 { font-size: clamp(38px, 5vw, 64px); }
.footer { border-top:1px solid var(--line); padding:28px 0 38px; color:var(--muted); font-size:14px; }
.footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:rgba(255,255,255,.6); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:inline-block; }
@media (max-width: 860px) { .hero { grid-template-columns:1fr; padding-top:44px; } .grid { grid-template-columns:1fr; } .nav { align-items:flex-start; gap:18px; flex-direction:column; } .screen { min-height:420px; } }