:root { --bg:#f3f6f9; --card:#fff; --ink:#15222e; --mute:#5d6b79; --line:#d7e0e8; --brand:#0f5c8a; --brand2:#0b4468;
        --ok:#12805c; --okbg:#e6f6ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.land { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
.land-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 8vw; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.land-brand { font-weight:800; font-size:18px; color:var(--brand); text-decoration:none; }
.land-cta { display:inline-block; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; padding:10px 16px; border-radius:10px; white-space:nowrap; }
.land-cta:hover { background:var(--brand2); }
.land-cta.big { padding:14px 22px; font-size:16px; }
.land-ghost { display:inline-block; margin-left:12px; color:var(--brand); font-weight:700; text-decoration:none; padding:14px 8px; }
.hero { max-width:880px; margin:0 auto; padding:56px 24px 28px; text-align:center; }
.eyebrow { letter-spacing:.08em; text-transform:uppercase; font-size:12px; font-weight:700; color:var(--brand); margin:0 0 10px; }
.hero h1 { font-size:clamp(28px,4.4vw,44px); line-height:1.15; margin:0 0 14px; }
.lead { font-size:18px; color:var(--mute); margin:0 auto 24px; max-width:640px; }
.lead b { color:var(--ink); }
.hero-actions { margin:0; }
.demo-sec { max-width:1080px; margin:0 auto; padding:20px 24px 56px; }
.demo-copy { text-align:center; margin-bottom:28px; }
.demo-copy h2 { font-size:26px; margin:0 0 8px; }
.demo-copy p { margin:0; color:var(--mute); }
.demo-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:40px; align-items:center; }
.phone { width:320px; margin:0 auto; background:#1b2834; border-radius:36px; padding:12px 10px 16px; box-shadow:0 28px 70px rgba(16,40,64,.28); }
.notch { width:108px; height:18px; background:#111a22; border-radius:0 0 14px 14px; margin:0 auto 8px; }
.screen { background:#f4f6f8; border-radius:24px; min-height:560px; overflow:hidden; position:relative; }
.scene { padding:16px 14px 20px; min-height:560px; }
.scene.scan { display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(#0d3a58,#16324a); color:#fff; position:relative; }
.box { width:168px; height:200px; background:#e8eef3; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.box span { color:#0f5c8a; font-weight:800; font-size:13px; letter-spacing:.12em; }
.qr { width:92px; height:92px; background:
  linear-gradient(#111 50%, transparent 50%) 0 0/12px 12px,
  linear-gradient(90deg,#111 50%, transparent 50%) 0 0/12px 12px,
  #fff; border:6px solid #111; box-shadow:inset 0 0 0 14px #fff; }
.beam { position:absolute; left:18%; right:18%; height:3px; background:#5ad0ff; box-shadow:0 0 16px #5ad0ff; animation:beam 1.6s ease-in-out infinite; }
.scan-cap { margin:22px 0 0; font-weight:700; }
.vhead { text-align:center; padding:6px 0 12px; }
.vco { font-weight:800; color:var(--brand); font-size:18px; }
.vsub { color:var(--mute); font-size:13px; }
.vcard, .vok { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.vcard h3, .vok h3 { margin:0 0 4px; font-size:17px; }
.vp, .vhint { color:var(--mute); font-size:13px; margin:0 0 8px; }
.vhint { margin:4px 0 0; }
.vcard label { display:block; font-weight:700; font-size:13px; margin:12px 0 4px; }
.vcard input { width:100%; padding:11px 10px; font-size:16px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.vcard input.on { border-color:var(--brand); box-shadow:0 0 0 3px rgba(15,92,138,.16); }
.vcard button { width:100%; margin-top:16px; padding:12px; font-size:16px; font-weight:700; border:0; border-radius:10px; background:var(--brand); color:#fff; }
.vcard button.pulse { transform:scale(.98); filter:brightness(1.08); }
.vok { background:var(--okbg); border-color:#a8dcc6; color:#0c5a41; }
.vok dl { margin:12px 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; }
.vok dt { opacity:.75; } .vok dd { margin:0; font-weight:700; }
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.steps li { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px 14px 18px; color:var(--mute); border-left:4px solid var(--line); transition:border-color .2s ease, background .2s ease, color .2s ease; }
.steps li b { display:block; color:var(--ink); font-size:15px; margin-bottom:2px; }
.steps li.on { border-left-color:var(--brand); background:#eef6fb; color:var(--ink); }
.feats { max-width:1080px; margin:0 auto; padding:0 24px 48px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feats article { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.feats h3 { margin:0 0 8px; font-size:16px; }
.feats p { margin:0; color:var(--mute); font-size:14.5px; }
.bottom { text-align:center; padding:10px 24px 48px; }
.bottom h2 { margin:0 0 8px; }
.bottom p { color:var(--mute); margin:0 0 16px; }
.land-foot { display:flex; justify-content:space-between; gap:12px; padding:18px 8vw; border-top:1px solid var(--line); color:var(--mute); font-size:14px; }
.land-foot a { color:var(--brand); font-weight:700; text-decoration:none; }
@keyframes beam { 0% { top:22%; } 100% { top:62%; } }
@media (max-width:860px) {
  .demo-grid, .feats { grid-template-columns:1fr; }
  .hero { padding-top:32px; }
  .land-top { padding:14px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .beam { animation:none; top:42%; }
}