/* ──────────────────────────────────────────────────────────────────
 * Meeto — marketing landing page
 * Brand leads (gradient, rounded Nunito), Fluent gives structure:
 * neutral ramp, soft dual-layer shadows, crisp short motion, sentence case.
 * ────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Inter+Tight:wght@400;500;600;700&display=swap");

:root {
  /* brand */
  --pink:#D6249F; --mid:#8A35D4; --purple:#7B36D2; --blue:#2F5BEA;
  --grad:linear-gradient(135deg,#D6249F 0%,#8A35D4 50%,#2F5BEA 100%);
  --grad-rev:linear-gradient(135deg,#2F5BEA 0%,#8A35D4 50%,#D6249F 100%);
  --grad-text:linear-gradient(120deg,#D6249F 0%,#2F5BEA 100%);
  --grad-soft:linear-gradient(150deg,#FBE7F6 0%,#ECE6FB 50%,#E1E9FD 100%);

  /* Fluent neutrals */
  --ink:#242424; --ink-2:#424242; --ink-3:#616161; --ink-4:#8A8A94;
  --bg:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F5F5F5; --canvas:#F0F2F6;
  --line:#E6E7EC; --line-2:#D8DAE2;

  /* map palette */
  --map-land:#EBF1F4; --map-block:#F4F8FA; --map-water:#C3DCED;
  --map-park:#CFE8D6; --map-road:#FFFFFF; --map-road-min:#EAF1F4;

  --serif:"Inter Tight",system-ui,sans-serif;
  --brand:"Nunito","Inter Tight",system-ui,sans-serif;
  --ease:cubic-bezier(.33,0,.67,1);
  --shadow-card:0 0 2px rgba(28,26,46,.08),0 2px 4px rgba(28,26,46,.10);
  --shadow-lg:0 1px 2px rgba(28,26,46,.06),0 24px 60px -22px rgba(28,26,46,.30);
  --shadow-phone:0 2px 6px rgba(28,26,46,.12),0 50px 90px -30px rgba(40,24,80,.42);
  --maxw:1180px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--serif); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5; overflow-x:hidden;
}
h1,h2,h3 { font-family:var(--brand); margin:0; letter-spacing:-.02em; line-height:1.06; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { display:block; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.grad-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--brand); font-weight:800; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--purple); background:var(--grad-soft); border:1px solid rgba(123,54,210,.16); border-radius:999px; padding:7px 14px 7px 11px; }
.eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--grad); }

/* ───────── buttons ───────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--brand); font-weight:800; font-size:15px; border-radius:14px; padding:13px 22px; cursor:pointer; border:none; transition:transform .14s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); white-space:nowrap; }
.btn-grad { background:var(--grad); color:#fff; box-shadow:0 6px 18px -6px rgba(123,54,210,.5); }
.btn-grad:hover { transform:translateY(-1px); box-shadow:0 10px 24px -6px rgba(123,54,210,.55); }
.btn-ghost { background:#fff; color:var(--ink); border:1.5px solid var(--line-2); }
.btn-ghost:hover { background:var(--bg-3); }

/* ───────── nav ───────── */
.nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.78); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; }
.nav.scrolled { border-color:var(--line); box-shadow:0 1px 0 rgba(28,26,46,.02); }
.nav-in { height:72px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { height:34px; width:auto; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font-family:var(--brand); font-weight:700; font-size:15px; color:var(--ink-2); transition:color .15s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { display:flex; align-items:center; gap:14px; }

/* ───────── hero ───────── */
.hero { position:relative; padding:clamp(48px,8vw,96px) 0 clamp(60px,9vw,120px); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-weight:900; font-size:clamp(40px,6vw,68px); }
.hero-sub { margin-top:22px; font-size:clamp(16px,1.5vw,19px); color:var(--ink-2); max-width:30em; line-height:1.55; }
.hero-cta { margin-top:34px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-trust { margin-top:22px; display:flex; align-items:center; gap:16px; color:var(--ink-3); font-size:13.5px; font-weight:600; flex-wrap:wrap; }
.hero-trust .sep { width:4px; height:4px; border-radius:50%; background:var(--line-2); }

/* decorative gradient blobs */
.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0; }
.blob-1 { width:520px; height:520px; right:-120px; top:-120px; background:radial-gradient(circle,#F7C9EC,transparent 70%); }
.blob-2 { width:460px; height:460px; left:-160px; bottom:-160px; background:radial-gradient(circle,#CBD8FB,transparent 70%); }

/* QR card */
.qr-card { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px; box-shadow:var(--shadow-card); }
.qr-box { width:104px; height:104px; border-radius:12px; overflow:hidden; flex:0 0 auto; display:grid; place-items:center; background:#fff; }
.qr-box img, .qr-box canvas { width:100% !important; height:100% !important; display:block; border-radius:10px; }
.qr-meta .qr-k { font-family:var(--brand); font-weight:800; font-size:15px; color:var(--ink); }
.qr-meta .qr-d { font-size:13px; color:var(--ink-3); margin-top:3px; max-width:15em; line-height:1.4; }
.qr-badges { margin-top:11px; display:flex; gap:8px; }

/* store badges */
.store { display:inline-flex; align-items:center; gap:9px; background:#1A1A22; color:#fff; border-radius:11px; padding:8px 14px; transition:transform .14s var(--ease),background .2s; }
.store:hover { transform:translateY(-1px); background:#000; }
.store svg { width:21px; height:21px; flex:0 0 auto; }
.store .st { display:flex; flex-direction:column; line-height:1.1; }
.store .st small { font-size:9.5px; opacity:.8; font-weight:500; letter-spacing:.02em; }
.store .st b { font-family:var(--brand); font-size:14px; font-weight:800; }
.store.sm { padding:6px 10px; border-radius:9px; }
.store.sm svg { width:17px; height:17px; }
.store.sm .st b { font-size:11.5px; }
.store.sm .st small { font-size:8px; }

/* ───────── phone mockup ───────── */
.phone-stage { position:relative; display:flex; justify-content:center; align-items:center; }
.phone { position:relative; width:300px; flex:0 0 auto; aspect-ratio:300/618; background:#1B1A22; border-radius:46px; padding:10px; box-shadow:var(--shadow-phone); z-index:2; }
.phone.tilt { transform:rotate(-3deg); }
.phone-screen { position:relative; width:100%; height:100%; border-radius:37px; overflow:hidden; background:var(--canvas); }
.island { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:84px; height:24px; background:#1B1A22; border-radius:14px; z-index:40; }
.float-anim { animation:floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.phone.tilt.float-anim { animation:floatytilt 6s ease-in-out infinite; }
@keyframes floatytilt { 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-12px)} }

/* screen status bar */
.scr-status { position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center; justify-content:space-between; padding:14px 22px 0; font-family:var(--brand); font-weight:800; font-size:13px; z-index:30; }
.scr-status.on-dark { color:#fff; }
.scr-status .bars { display:flex; gap:4px; align-items:center; }
.scr-status .bars span { width:3px; border-radius:2px; background:currentColor; }

/* map screen */
.scr-map { position:absolute; inset:0; }
.map-canvas { position:absolute; inset:0; }
.map-canvas svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.scr-map svg.mapbg { position:absolute; inset:0; width:100%; height:100%; }

/* blurred privacy avatars */
.blur-av { display:block; width:100%; height:100%; border-radius:inherit;
  background:conic-gradient(from 140deg, hsl(var(--h,270) 70% 72%), hsl(calc(var(--h,270) + 80) 72% 70%), hsl(calc(var(--h,270) + 160) 70% 74%), hsl(var(--h,270) 70% 72%));
  filter:blur(5px) saturate(1.1); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.spott .av .blur-av { filter:blur(7px) saturate(1.1); }
.pin { position:absolute; transform:translate(-50%,-50%); z-index:10; }
.pin .dot { width:30px; height:30px; border-radius:50% 50% 50% 2px; background:var(--grad); transform:rotate(45deg); box-shadow:0 4px 10px -2px rgba(123,54,210,.5); display:grid; place-items:center; }
.pin .dot::after { content:""; width:11px; height:11px; border-radius:50%; background:#fff; }
.pin.you .core { width:18px; height:18px; border-radius:50%; background:var(--blue); border:3px solid #fff; box-shadow:0 2px 6px rgba(47,91,234,.5); position:relative; z-index:2; }
.pin.you .halo { position:absolute; top:50%; left:50%; width:18px; height:18px; border-radius:50%; background:var(--blue); transform:translate(-50%,-50%); animation:halo 2.6s var(--ease) infinite; }
@keyframes halo { 0%{transform:translate(-50%,-50%) scale(.6);opacity:.5} 70%{opacity:0} 100%{transform:translate(-50%,-50%) scale(4.5);opacity:0} }

.map-pill { position:absolute; top:54px; left:16px; display:flex; align-items:center; gap:7px; background:rgba(27,26,34,.84); backdrop-filter:blur(8px); border-radius:999px; padding:7px 13px 7px 8px; z-index:20; }
.map-pill .ic { width:20px; height:20px; border-radius:50%; background:var(--grad); display:grid; place-items:center; }
.map-pill b { color:#fff; font-family:var(--brand); font-weight:800; font-size:11px; }

/* bottom action sheet */
.sheet { position:absolute; left:0; right:0; bottom:0; background:#FAFBFC; border-radius:24px 24px 37px 37px; border-top:1px solid var(--line); padding:9px 14px 16px; z-index:25; box-shadow:0 -8px 24px -16px rgba(28,26,46,.2); }
.sheet .handle { width:38px; height:5px; border-radius:3px; background:#D6D8E0; margin:0 auto 11px; }
.dock { display:grid; grid-template-columns:1fr 1.16fr 1fr; gap:9px; }
.dock button { border:none; border-radius:17px; padding:13px 6px 11px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:default; }
.dock .side { background:#fff; border:1px solid var(--line); }
.dock .side .icw { width:38px; height:38px; border-radius:12px; background:var(--grad-soft); display:grid; place-items:center; }
.dock .center { background:var(--grad); box-shadow:0 8px 18px -6px rgba(123,54,210,.5); }
.dock .center .icw { width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.2); display:grid; place-items:center; }
.dock .lbl { font-family:var(--brand); font-weight:800; font-size:10.5px; line-height:1.15; color:var(--ink); text-align:center; }
.dock .center .lbl { color:#fff; }
.dock .sub { font-size:8.5px; color:var(--ink-3); font-weight:600; text-align:center; margin-top:1px; }
.dock .center .sub { color:rgba(255,255,255,.85); }

/* feed / list screen */
.scr-list { position:absolute; inset:0; background:var(--canvas); padding-top:44px; }
.scr-list .lhd { padding:6px 18px 12px; }
.scr-list .lhd .t { font-family:var(--brand); font-weight:900; font-size:21px; color:var(--ink); }
.scr-list .lhd .s { font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.scr-list .feed { padding:0 14px; display:flex; flex-direction:column; gap:10px; }
.spott { background:#fff; border:1px solid var(--line); border-radius:18px; padding:13px; display:flex; gap:11px; align-items:flex-start; }
.spott .av { width:44px; height:44px; border-radius:14px; flex:0 0 auto; position:relative; overflow:hidden; }
.spott .av .blur { position:absolute; inset:0; filter:blur(7px); }
.spott .av .lk { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.92); }
.spott .meta .n { font-family:var(--brand); font-weight:800; font-size:13px; color:var(--ink); }
.spott .meta .d { font-size:11px; color:var(--ink-3); margin-top:2px; line-height:1.4; }
.spott .meta .when { font-size:10px; color:var(--ink-4); margin-top:5px; font-weight:600; display:flex; align-items:center; gap:5px; }
.spott .cn { margin-left:auto; align-self:center; }
.cn-btn { background:var(--grad); color:#fff; border:none; border-radius:10px; font-family:var(--brand); font-weight:800; font-size:10.5px; padding:8px 12px; white-space:nowrap; }

/* chat screen */
.scr-chat { position:absolute; inset:0; background:var(--bg); display:flex; flex-direction:column; }
.scr-chat .chd { padding:50px 16px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.scr-chat .chd .av { width:34px; height:34px; border-radius:50%; background:var(--grad); }
.scr-chat .chd .n { font-family:var(--brand); font-weight:800; font-size:14px; }
.scr-chat .chd .o { font-size:10.5px; color:#107C10; font-weight:700; }
.scr-chat .msgs { flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:9px; background:var(--bg-2); }
.bub { max-width:74%; padding:10px 13px; border-radius:16px; font-size:12.5px; line-height:1.4; }
.bub.me { align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; }
.bub.them { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; }
.scr-chat .inp { padding:10px 14px 16px; border-top:1px solid var(--line); display:flex; gap:9px; align-items:center; background:#fff; }
.scr-chat .inp .box { flex:1; height:36px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line); }
.scr-chat .inp .snd { width:36px; height:36px; border-radius:50%; background:var(--grad); flex:0 0 auto; display:grid; place-items:center; }

/* floating side cards */
.floatcard { position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:12px 14px; z-index:6; display:flex; align-items:center; gap:11px; }
.floatcard .fa { width:38px; height:38px; border-radius:12px; flex:0 0 auto; overflow:hidden; position:relative; }
.floatcard .ft { font-family:var(--brand); font-weight:800; font-size:12.5px; color:var(--ink); }
.floatcard .fs { font-size:10.5px; color:var(--ink-3); margin-top:1px; }

/* ───────── section scaffold ───────── */
section { position:relative; }
.sec-pad { padding:clamp(64px,9vw,118px) 0; }
.sec-head { text-align:center; max-width:680px; margin:0 auto clamp(40px,6vw,64px); }
.sec-head h2 { font-weight:900; font-size:clamp(30px,4vw,46px); margin-top:14px; }
.sec-head p { margin-top:18px; font-size:clamp(15px,1.5vw,18px); color:var(--ink-2); line-height:1.55; }

/* 3 gestures */
.gestures { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gcard { background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px 26px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.gcard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.gcard .gic { width:58px; height:58px; border-radius:18px; background:var(--grad-soft); display:grid; place-items:center; margin-bottom:20px; }
.gcard.feat .gic { background:var(--grad); box-shadow:0 10px 22px -8px rgba(123,54,210,.5); }
.gcard h3 { font-size:21px; font-weight:800; }
.gcard p { margin-top:11px; font-size:14.5px; color:var(--ink-2); line-height:1.55; }

/* feature showcase rows */
.showcase { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:flex-start; }
.showcase + .showcase { margin-top:clamp(72px,9vw,120px); }
.showcase.rev .sc-text { order:2; }
.sc-text h2 { font-weight:900; font-size:clamp(28px,3.4vw,40px); margin-top:14px; }
.sc-text p { margin-top:20px; font-size:16.5px; color:var(--ink-2); line-height:1.6; max-width:30em; }
.sc-list { margin-top:48px; display:flex; flex-direction:column; gap:20px; }
.sc-list li { display:flex; gap:13px; align-items:flex-start; list-style:none; }
.sc-list li > div { display:flex; flex-direction:column; gap:3px; }
.sc-list .ck { width:26px; height:26px; border-radius:8px; background:var(--grad-soft); display:grid; place-items:center; flex:0 0 auto; margin-top:2px; }
.sc-list .ck svg { color:var(--purple); }
.sc-list b { font-family:var(--brand); font-weight:800; font-size:15px; line-height:1.3; }
.sc-list li > div > span { color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.sc-text ul { padding:0; margin:0; }

/* privacy panel */
.privacy { background:linear-gradient(155deg,#221A33 0%,#2C1D44 55%,#1C2550 100%); color:#fff; border-radius:36px; padding:clamp(44px,6vw,72px); position:relative; overflow:hidden; }
.privacy::before { content:""; position:absolute; right:-80px; top:-80px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(214,36,159,.4),transparent 70%); filter:blur(40px); }
.privacy::after { content:""; position:absolute; left:-100px; bottom:-100px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(47,91,234,.4),transparent 70%); filter:blur(40px); }
.privacy .pv-in { position:relative; z-index:2; }
.privacy .eyebrow { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
.privacy h2 { font-weight:900; font-size:clamp(28px,3.6vw,42px); margin-top:20px; max-width:16em; }
.privacy .pv-sub { margin-top:18px; font-size:17px; color:rgba(255,255,255,.78); max-width:34em; line-height:1.55; }
.pv-grid { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pv-item .pic { width:50px; height:50px; border-radius:15px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; margin-bottom:16px; }
.pv-item h3 { font-size:17px; font-weight:800; color:#fff; }
.pv-item p { margin-top:9px; font-size:13.5px; color:rgba(255,255,255,.68); line-height:1.5; }

/* how it works */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.step { position:relative; padding-top:8px; }
.step .num { font-family:var(--brand); font-weight:900; font-size:54px; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.step h3 { font-size:20px; font-weight:800; margin-top:14px; }
.step p { margin-top:10px; font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.steps .step:not(:last-child)::after { content:""; position:absolute; top:30px; right:-12px; width:24px; height:2px; background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px); }

/* download CTA */
.download { background:var(--grad); border-radius:40px; padding:clamp(48px,6vw,72px); color:#fff; position:relative; overflow:hidden; }
.download::before { content:""; position:absolute; inset:0; background:radial-gradient(700px 400px at 80% -10%,rgba(255,255,255,.18),transparent 60%); }
.dl-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.download h2 { font-weight:900; font-size:clamp(30px,4vw,48px); max-width:11em; }
.download .dl-sub { margin-top:18px; font-size:17px; color:rgba(255,255,255,.85); max-width:26em; line-height:1.55; }
.dl-qrs { margin-top:34px; display:flex; gap:18px; flex-wrap:wrap; }
.dl-qr { background:#fff; border-radius:20px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:10px; width:168px; }
.dl-qr .qbox { width:140px; height:140px; display:grid; place-items:center; }
.dl-qr .qbox img, .dl-qr .qbox canvas { width:100% !important; height:100% !important; border-radius:6px; }
.dl-phone { display:flex; justify-content:center; }

/* footer */
.footer { background:var(--bg-2); border-top:1px solid var(--line); padding:64px 0 36px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot-brand .fb-logo { height:34px; width:auto; object-fit:contain; margin-bottom:16px; }
.foot-brand p { font-size:14px; color:var(--ink-3); max-width:24em; line-height:1.55; }
.foot-col h4 { font-family:var(--brand); font-weight:800; font-size:13px; color:var(--ink); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.foot-col a { display:block; font-size:14px; color:var(--ink-3); margin-bottom:11px; transition:color .15s; }
.foot-col a:hover { color:var(--purple); }
.foot-bottom { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot-bottom p { font-size:13px; color:var(--ink-4); }
.foot-bottom .priv { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink-3); }

/* ───────── reveal ───────── */
/* opacity is set by a plain declaration (survives animation throttling in
   offscreen iframes); only the transform is animated for the entrance. */
@keyframes revealIn { from { transform:translateY(26px); } to { transform:none; } }
.js .reveal { opacity:0; }
.js .reveal.in { opacity:1; animation:revealIn .7s var(--ease) both; }
.js .reveal.in.d1 { animation-delay:.08s; }
.js .reveal.in.d2 { animation-delay:.16s; }
.js .reveal.in.d3 { animation-delay:.24s; }

@media (prefers-reduced-motion:reduce) {
  .js .reveal { opacity:1 !important; animation:none !important; transform:none !important; }
  .float-anim, .phone.tilt.float-anim { animation:none !important; }
  .pin.you .halo { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ───────── responsive ───────── */
@media (max-width:980px) {
  .nav-links { display:none; }
  .hero-grid { grid-template-columns:1fr; gap:8px; }
  .hero-stage { margin-top:40px; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-text { text-align:center; }
  .hero-cta, .hero-trust { justify-content:center; }
  .showcase, .showcase.rev { grid-template-columns:1fr; gap:40px; }
  .showcase.rev .sc-text { order:0; }
  .sc-text { text-align:center; }
  .sc-text p { margin-left:auto; margin-right:auto; }
  .sc-list { align-items:flex-start; max-width:30em; margin-left:auto; margin-right:auto; text-align:left; }
  .pv-grid { grid-template-columns:repeat(2,1fr); }
  .gestures { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .steps { grid-template-columns:1fr; gap:36px; max-width:440px; margin:0 auto; }
  .steps .step:not(:last-child)::after { display:none; }
  .dl-grid { grid-template-columns:1fr; gap:44px; text-align:center; }
  .download h2, .download .dl-sub { margin-left:auto; margin-right:auto; }
  .dl-qrs { justify-content:center; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:560px) {
  .wrap { padding:0 20px; }
  .hero-cta { flex-direction:column; align-items:stretch; }
  .qr-card { display:none; }
  .pv-grid { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; }
  .privacy, .download { border-radius:28px; }
  .floatcard { display:none; }
}