:root {
  --ink: #151515;
  --paper: #f7f5f0;
  --orange: #ff633e;
  --lime: #d5f36b;
  --blue: #3459f5;
  --line: #d8d4ca;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; }
.nav { display:flex; justify-content:space-between; align-items:center; padding: 20px clamp(20px, 5vw, 76px); }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; font-weight:900; font-size:22px; }
.brand img { width:46px; height:46px; border-radius:14px; border:2px solid var(--ink); }
.nav-links { display:flex; gap:22px; align-items:center; font-size:14px; font-weight:700; }
.button { display:inline-flex; gap:8px; align-items:center; justify-content:center; border:2px solid var(--ink); border-radius:12px; padding:12px 17px; font-weight:900; text-decoration:none; background:var(--orange); color:#fff; cursor:pointer; }
.button.light { background:transparent; color:var(--ink); }
.button.lime { background:var(--lime); color:var(--ink); }
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; padding: clamp(40px, 9vw, 130px) clamp(20px, 8vw, 120px) 90px; align-items:center; }
.hero h1 { max-width:760px; font-size: clamp(48px, 8vw, 104px); line-height:.94; margin:0 0 24px; letter-spacing:-.04em; }
.hero p { max-width:620px; font-size:clamp(18px, 2vw, 25px); line-height:1.5; color:#5f5c57; margin:0 0 30px; }
.hero-art { background:var(--ink); min-height:420px; border-radius:32px 72px 28px 58px; transform:rotate(2deg); padding:34px; color:white; display:flex; flex-direction:column; justify-content:space-between; }
.hero-art strong { color:var(--lime); font-size:72px; line-height:.9; }
.hero-art .scribble { align-self:flex-end; color:var(--orange); font-size:64px; }
.section { padding:60px clamp(20px, 8vw, 120px); }
.section h2 { font-size:clamp(30px, 5vw, 58px); margin:0 0 14px; letter-spacing:-.03em; }
.section-lede { color:#69655d; margin:0 0 28px; font-size:17px; }
.task-strip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.task { background:#fffefa; border:1.5px solid var(--ink); border-radius:18px; padding:20px; min-height:210px; display:flex; flex-direction:column; }
.task h3 { margin:0 0 10px; font-size:21px; line-height:1.08; }
.task p { color:#69655d; line-height:1.45; margin:0; }
.task-state { grid-column:1/-1; color:#69655d; padding:28px 0; }
.loading-state { display:flex; align-items:center; gap:10px; }
.mini-spinner { display:inline-block; width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--orange); border-radius:50%; animation:mazi-spin .8s linear infinite; }
@keyframes mazi-spin { to { transform:rotate(360deg); } }
.meta { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:18px; font-size:13px; font-weight:900; }
.meta b { color:var(--orange); }
.feature-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { border-top:4px solid var(--ink); padding-top:16px; }
.feature span { font-size:32px; }
.feature h3 { margin:14px 0 6px; }
.feature p { color:#69655d; line-height:1.5; }
.download { background:var(--blue); color:white; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; border-radius:28px; padding:42px; }
.download h2 { margin:0 0 12px; }
.download p { color:rgba(255,255,255,.78); line-height:1.5; }
.qr { width:210px; height:210px; background:white; padding:10px; border-radius:14px; }
footer { display:flex; justify-content:space-between; gap:18px; padding:30px clamp(20px, 8vw, 120px) 44px; color:#6d6961; font-size:13px; }
.legal { max-width:900px; margin:auto; padding:70px 22px 100px; }
.legal h1 { font-size:52px; margin:0 0 12px; }
.legal h2 { margin-top:34px; }
.legal p { color:#5e5b55; line-height:1.75; }
@media (max-width: 760px) {
  .nav-links a:not(.button) { display:none; }
  .hero { grid-template-columns:1fr; padding-top:46px; }
  .hero-art { min-height:260px; }
  .hero-art strong { font-size:52px; }
  .task-strip, .feature-row { grid-template-columns:1fr; }
  .download { grid-template-columns:1fr; padding:26px; }
  .qr { width:180px; height:180px; }
  footer { flex-direction:column; }
}