:root{
  --page:#FAFAFA; --white:#FFFFFF; --soft:#F7F7F8; --gray:#EFF1F5; --line:#E4E6EA;
  --ink:#0A0A0A; --ink2:#4B4B52; --ink3:#8A8A93;
  --blk:#000000; --red:#FA294F; --amber:#F5B74D; --brand:#FA294F; /* was the old maroon #7B1226 — retired everywhere */
  --pill:#FFFFFF; --circ:#000000; --circfg:#FFFFFF;
  --r:32px;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--page);font-family:'Tajawal',system-ui,sans-serif;color:var(--ink);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lat{font-family:'Poppins',sans-serif;direction:ltr;display:inline-block}
.frame{margin:10px;border-radius:36px;overflow:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}

/* nav */
.nav{position:fixed;top:18px;left:0;right:0;z-index:200;display:flex;justify-content:center;padding:0 20px}
.pill{position:relative;width:100%;max-width:760px;background:var(--pill);border-radius:100px;padding:8px 8px 8px 20px;
  display:flex;align-items:center;gap:14px;box-shadow:0 16px 44px -14px rgba(0,0,0,.45)}
.pill-logo{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;color:var(--ink)}
.pill-logo svg{width:100%;height:100%}
.pill-mid{flex:1;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:8px;direction:ltr}

/* Centred on the pill, not on what is left over between the button and the
   icons. Those two groups are 80px and 198px wide, so a flex:1 middle put the
   wordmark 53px left of true centre. Pinning it to 50% makes it independent of
   both, and the button's auto margin pushes the icon cluster to the far end.

   Only above 640px. True centring needs the pill to be wider than the two
   groups plus the wordmark — about 546px — and below that the wordmark lands
   on top of the icons. A narrow bar keeps the old behaviour: slightly off
   centre, but nothing overlapping. */
@media(min-width:640px){
  .pill-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    flex:0 0 auto;justify-content:flex-start}
  .contact-btn{margin-inline-end:auto}
}
.pill-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.4px;color:var(--ink)}

/* The nav lockup needs NO rule: .pill-mid already carries direction:ltr and
   flex-direction:row-reverse, which pins the mark on the left in every
   language. Adding an `order` here reversed it — measured, on the Chinese home
   page, before it went anywhere. */
.contact-btn{flex-shrink:0;background:var(--ink);color:#fff;border:0;border-radius:100px;
  padding:11px 22px;font-family:'Tajawal';font-weight:700;font-size:14px;cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s}
.contact-btn:hover{transform:translateY(-2px)}
.contact-btn:active{transform:scale(.97)}

/* ---------- contact modal ---------- */
.modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}
.modal.on{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(8,6,10,.62);backdrop-filter:blur(6px);
  animation:fadeIn .3s ease}
.modal-card{position:relative;width:100%;max-width:392px;background:var(--white);border-radius:22px;
  padding:24px 24px 20px;box-shadow:0 40px 90px -24px rgba(0,0,0,.5);
  animation:popIn .42s cubic-bezier(.16,1,.3,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:16px;left:16px;width:28px;height:28px;border:0;background:var(--gray);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .25s}
.modal-x:hover{background:#E2E5EA}
.modal-x svg{width:13px;height:13px;stroke:var(--ink2);fill:none;stroke-width:2;stroke-linecap:round}
.modal-card h3{font-size:1.22rem;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
.modal-sub{color:var(--ink2);font-size:13px;font-weight:300;margin-bottom:15px}
.modal-card label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:10px}
.modal-card input,.modal-card textarea{width:100%;margin-top:5px;background:var(--soft);
  border:1.5px solid var(--line);border-radius:11px;padding:9px 12px;font-family:'Tajawal';
  font-size:13.5px;font-weight:400;color:var(--ink);outline:0;transition:border-color .25s,background .25s}
.modal-card input:focus,.modal-card textarea:focus{border-color:var(--ink);background:var(--white)}
.modal-card input.bad,.modal-card textarea.bad{border-color:var(--red)}
.modal-card textarea{resize:none;min-height:62px;line-height:1.6}
.modal-err{color:var(--red);font-size:12px;font-weight:500;min-height:0;margin-bottom:8px}
.modal-send{width:100%;background:var(--ink);color:#fff;border:0;border-radius:100px;padding:12px;
  font-family:'Tajawal';font-weight:700;font-size:14.5px;cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.modal-send:hover{transform:translateY(-2px)}
.modal-send:active{transform:scale(.98)}
.modal-to{text-align:center;color:var(--ink3);font-size:11.5px;margin-top:9px}
.modal-to b{color:var(--ink2);font-weight:700}
.modal-done{display:none;text-align:center;padding:14px 0 6px}
.modal-done.on{display:block;animation:popIn .4s cubic-bezier(.16,1,.3,1)}
.modal-done .tick{width:46px;height:46px;border-radius:50%;background:var(--ink);display:grid;
  place-items:center;margin:0 auto 16px}
.modal-done .tick svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.modal-done b{display:block;font-size:1.12rem;font-weight:700;margin-bottom:6px}
.modal-done span{color:var(--ink2);font-size:14px;font-weight:300}
.soc{flex-shrink:0;width:34px;height:34px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink2);text-decoration:none;transition:border-color .25s,color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.soc:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.soc svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.soc.solid svg{fill:currentColor;stroke:none;width:17px;height:17px}

/* The language picker: a button, and a small menu under it. It replaced a row
   of three pills — the nav already carries a logo, a WhatsApp link, an
   Instagram link and a menu button, and three pills grew with every language
   added. A button costs one button's width for ever. */
.lang-pick{position:relative;flex-shrink:0;display:inline-block}
.langbtn{display:inline-flex;align-items:center;gap:5px;background:none;
  border:1.5px solid var(--line);border-radius:100px;padding:6px 12px;
  font-family:'Poppins',sans-serif;font-weight:500;font-size:12.5px;color:var(--ink2);
  cursor:pointer;line-height:1.5;transition:border-color .25s,color .25s}
.langbtn:hover{border-color:var(--ink);color:var(--ink)}
.langbtn svg{width:11px;height:11px;opacity:.6;transition:transform .2s}
.langbtn[aria-expanded=true] svg{transform:rotate(180deg)}
/* Anchored by its END, not its start: the picker sits near the end of a nav
   bar, and a menu that grows outward from there runs off the screen — it
   did, by 24px at 352px wide. Growing inward it cannot. */
.langmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;
  min-width:138px;padding:5px;background:#fff;border:1.5px solid var(--line);
  border-radius:13px;box-shadow:0 16px 38px -18px rgba(0,0,0,.3);
  display:flex;flex-direction:column;gap:2px;text-align:start}
.langmenu[hidden]{display:none}
.langmenu button{appearance:none;background:none;border:0;border-radius:9px;cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:14px;font-weight:500;color:var(--ink2);
  padding:8px 11px;text-align:start;line-height:1.5}
.langmenu button:hover{background:var(--soft);color:var(--ink)}
.langmenu button.on{background:var(--ink);color:#fff;cursor:default}

/* Chinese has no glyphs in Tajawal or Poppins — not one — and a headline set
   in it does not want Tajawal's letter-spacing either. */
html[lang=zh] body,html[lang=zh] button,html[lang=zh] input,html[lang=zh] textarea,
html[lang=zh] select{font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB',
  'Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC',sans-serif}
html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3{letter-spacing:0}
body.lang-en{font-family:'Poppins',system-ui,sans-serif}
body.lang-en h1,body.lang-en h2,body.lang-en .quote,body.lang-en .modal-card h3{font-weight:700;letter-spacing:-1.6px}
body.lang-en h1{font-size:clamp(1.8rem,3.55vw,2.8rem);line-height:1.12;letter-spacing:-1.2px;max-width:none}
body.lang-en .h-sub{max-width:52ch;font-size:.95rem;line-height:1.65}
body.lang-en .lat{direction:ltr}
body.lang-en .h-sub,body.lang-en .lead,body.lang-en .scard p,body.lang-en .dcard-t p{font-weight:400}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  align-items:flex-end;padding:0 4px;background:none;border:0;cursor:pointer;flex-shrink:0}
.menu-btn i{display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:width .3s cubic-bezier(.16,1,.3,1),background-color .3s}
.menu-btn i:nth-child(1){width:22px}
.menu-btn i:nth-child(2){width:14px}
.menu-btn:hover i:nth-child(2){width:22px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 29px;border-radius:100px;
  font-family:'Tajawal';font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;border:1.6px solid transparent;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.btn:active{transform:scale(.97)}
.btn-w{background:#fff;color:var(--blk)}.btn-w:hover{transform:translateY(-3px)}
.btn-d{background:var(--ink);color:#fff}.btn-d:hover{transform:translateY(-3px)}
.btn-o{border-color:rgba(255,255,255,.42);color:#fff}.btn-o:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ============ DEVICE MOCKUPS — iPhone 17 / Galaxy S26 ============ */
.dev{position:relative;flex-shrink:0}
.dev .edge{position:relative;border-radius:54px;padding:3px;
  box-shadow:0 46px 92px -24px rgba(0,0,0,.85), 0 0 0 .5px rgba(255,255,255,.14),
             inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.12)}
.dev .bez{border-radius:51px;background:#040405;padding:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.disp{background:#000;border-radius:43px;overflow:hidden;position:relative;height:588px}
.dev .k{position:absolute;border-radius:2px;z-index:2}

/* iPhone 17 — titanium, Dynamic Island */
.dev.ip{width:300px}
.dev.ip .edge{background:#8A8A90}
.dev.ip .isl{position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:94px;height:29px;background:#000;border-radius:20px;z-index:9;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06)}
.dev.ip .isl::after{content:"";position:absolute;top:50%;right:11px;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#101018;box-shadow:inset 0 0 0 1px #22222C}
.dev.ip .k{background:#8A8A90}
.dev.ip .k1{right:-3px;top:168px;width:3.5px;height:76px}
.dev.ip .k2{left:-3px;top:126px;width:3.5px;height:36px}
.dev.ip .k3{left:-3px;top:172px;width:3.5px;height:36px}
.dev.ip .k4{left:-3px;top:88px;width:3.5px;height:26px}

/* Galaxy S26 — squarer, punch-hole */
.dev.gx{width:296px}
.dev.gx .edge{border-radius:42px;padding:2.5px;background:#3E3E46}
.dev.gx .bez{border-radius:40px;padding:5px}
.dev.gx .disp{border-radius:35px}
.dev.gx .hole{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:#05050A;z-index:9;
  box-shadow:inset 0 0 0 1px #1A1A22, 0 0 0 1px rgba(0,0,0,.6)}
.dev.gx .k{background:#3E3E46}
.dev.gx .k1{right:-2.5px;top:150px;width:3px;height:44px}
.dev.gx .k2{right:-2.5px;top:204px;width:3px;height:70px}
.dev.gx .homebar{width:126px;height:4px}
.sbar{position:absolute;top:0;left:0;right:0;height:51px;display:flex;justify-content:space-between;
  align-items:center;padding:0 13px;font-family:'Poppins';font-size:10px;font-weight:500;color:#fff;z-index:9;direction:ltr}
.sbar .rt{display:flex;gap:5px;align-items:center}
.sbar .bat{width:14px;height:7.5px;border:1.1px solid rgba(255,255,255,.85);border-radius:2.2px;position:relative}
.sbar .bat::after{content:"";position:absolute;inset:1.5px;background:#fff;border-radius:1px}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:110px;height:4.5px;background:#fff;opacity:.5;border-radius:4px;z-index:9}

/* Wallet screen */
.wal{position:absolute;inset:0;padding:44px 14px 0;overflow:hidden}
.wal-h{color:#fff;font-family:'Poppins';font-size:25px;font-weight:600;letter-spacing:-.6px;margin:0 4px 8px}
.awpass{border-radius:15px;overflow:hidden;background:var(--c,var(--brand));box-shadow:0 12px 26px -8px rgba(0,0,0,.75)}
.awpass.st{transform-origin:bottom center;margin-bottom:-24px;position:relative}
.awpass.st1{transform:scale(.87);z-index:1}
.awpass.st2{transform:scale(.91);z-index:2}
.awpass.st3{transform:scale(.955);z-index:3}
.awpass.main{position:relative;z-index:4}
.awpass.st .awp-top{padding:10px 12px}
.awp-top{padding:11px 12px;display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.2)}
.awp-lg svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.en .lg svg,.en .cd-t i svg,.wsm .t i svg,.av svg{stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.en .lg svg{width:30px;height:30px;stroke-width:1.6}
.en .cd-t i svg{width:14px;height:14px;stroke-width:2}
.wsm .t i svg{width:14px;height:14px;stroke-width:2}
.scan-card .av svg{width:21px;height:21px;stroke-width:2}
.trow .av svg{width:14px;height:14px;stroke-width:2}
.awp-lg{width:28px;height:28px;border-radius:7px;background:#fff;color:var(--c);display:grid;place-items:center;
  font-weight:700;font-size:13px;flex-shrink:0}
.awp-nm{min-width:0;flex:1}
.awp-nm b{color:#fff;font-size:12.5px;font-weight:700;display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.awp-nm small{color:rgba(255,255,255,.6);font-size:10px}
.awp-bal{text-align:right;direction:ltr;flex-shrink:0}
.awp-bal small{color:rgba(255,255,255,.55);font-size:9px;display:block;line-height:1.2}
.awp-bal b{font-family:'Poppins';font-size:14px;color:#fff}
.awp-body{padding:13px 12px 11px}
.awp-lab{font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.5);margin-bottom:8px;font-family:'Poppins'}
.sgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:11px}
.sgrid i{aspect-ratio:1;border-radius:50%;border:1.2px solid rgba(255,255,255,.26);display:block;
  transition:all .45s cubic-bezier(.16,1,.3,1)}
.sgrid i.on{background:#fff;border-color:#fff}
.sgrid i.gd{background:var(--amber);border-color:var(--amber)}
.awp-next{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  color:rgba(255,255,255,.68);padding-top:9px;border-top:1px solid rgba(255,255,255,.16)}
.awp-next b{color:var(--amber);font-weight:700;font-size:11.5px}
.awp-code{background:#fff;padding:12px;display:flex;flex-direction:column;align-items:center;gap:5px}
.awp-code .qr{width:86px;height:86px}
.awp-code span{font-family:'Poppins';font-size:9px;color:#777;letter-spacing:1px}

/* Lock screen */
.lock{position:absolute;inset:0;background:#12060A;overflow:hidden}
.lock .bgph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.48}
.lock .bgov{position:absolute;inset:0;background:rgba(8,3,5,.56)}
.lock-in{position:absolute;inset:0;padding:66px 15px 34px;display:flex;flex-direction:column}
.lk-date{text-align:center;color:rgba(255,255,255,.82);font-size:13.5px}
.lk-time{text-align:center;font-family:'Poppins';font-size:66px;font-weight:400;color:#fff;line-height:1.05;letter-spacing:-2px}
.lk-notifs{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.lk-n{background:rgba(42,38,42,.88);border:1px solid rgba(255,255,255,.11);border-radius:17px;padding:11px 12px;display:flex;gap:10px;align-items:flex-start}
.lk-n .ai{width:34px;height:34px;border-radius:9px;background:var(--red);flex-shrink:0;display:grid;place-items:center}
.lk-n .ai svg{width:20px;height:20px}
.lk-n .tx{flex:1;min-width:0}
.lk-n .r1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lk-n b{font-size:12.5px;color:#fff;font-weight:700}
.lk-n em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.5);flex-shrink:0}
.lk-n p{font-size:12px;color:rgba(255,255,255,.88);line-height:1.5;margin-top:1px}

/* Scanner */
.scan{position:absolute;inset:0;background:#0A0A0C;overflow:hidden}
.scan .cam{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.scan .camov{position:absolute;inset:0;background:rgba(6,6,8,.52)}
.scan-in{position:absolute;inset:0;padding:56px 14px 32px;display:flex;flex-direction:column}
.scan-top{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:13px;font-weight:700;gap:8px}
.scan-top .who{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:4px 12px;font-size:11px;font-weight:400;white-space:nowrap}
.reticle{margin:18px auto;width:146px;height:146px;position:relative;flex-shrink:0}
.reticle .c{position:absolute;width:32px;height:32px;border:3px solid #fff;border-radius:5px}
.reticle .c1{top:0;left:0;border-right:none;border-bottom:none}
.reticle .c2{top:0;right:0;border-left:none;border-bottom:none}
.reticle .c3{bottom:0;left:0;border-right:none;border-top:none}
.reticle .c4{bottom:0;right:0;border-left:none;border-top:none}
.reticle .qz{position:absolute;inset:22px;background:#fff;border-radius:7px;padding:6px}
.reticle .beam{position:absolute;left:8px;right:8px;height:2.5px;background:var(--red);border-radius:3px;top:50%}
.scan-card{margin-top:auto;background:rgba(18,18,22,.95);border:1px solid rgba(255,255,255,.14);
  border-radius:19px;padding:13px}
.scan-card .row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.scan-card .av{width:38px;height:38px;border-radius:11px;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;flex-shrink:0}
.scan-card .who2{min-width:0;flex:1}
.scan-card b{color:#fff;font-size:13.5px;display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-card small{color:#8E8A96;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.scan-btn{background:#fff;color:#0A0A0A;border-radius:13px;padding:12px;text-align:center;font-weight:700;font-size:14px}
.scan-rew{background:rgba(245,183,77,.16);border:1px solid rgba(245,183,77,.42);color:var(--amber);
  border-radius:11px;padding:8px;text-align:center;font-size:11.5px;font-weight:500;margin-top:8px}

/* Dashboard */
.mac{width:100%;max-width:580px;border-radius:14px;overflow:hidden;background:#121216;
  border:1px solid #2A2A32;box-shadow:0 40px 80px -24px rgba(0,0,0,.7)}
.mac-bar{background:#1B1B21;padding:10px 14px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #2A2A32;direction:ltr}
.mac-bar i{width:10px;height:10px;border-radius:50%;background:#3A3A44;display:block}
.mac-bar span{margin-left:12px;font-family:'Poppins';font-size:11px;color:#6E6E7A}
.mac-body{display:grid;grid-template-columns:120px 1fr}
.mac-side{background:#0E0E12;padding:14px 10px;border-left:1px solid #24242C}
.mac-side p{font-size:10.5px;color:#63636E;padding:5px 8px;font-family:'Poppins';letter-spacing:.6px}
.mac-side a{display:block;padding:8px 9px;border-radius:8px;color:#A9A9B4;font-size:12.5px;text-decoration:none;margin-bottom:2px}
.mac-side a.on{background:#22222A;color:#fff}
.mac-main{padding:15px;min-width:0}
.mac-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mac-h b{color:#fff;font-size:14px}
.mac-h em{font-style:normal;background:var(--red);color:#fff;font-size:10.5px;padding:4px 10px;border-radius:100px;font-weight:700}
.trow{display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:8px;padding:9px 10px;border-radius:9px;font-size:12px;align-items:center}
.trow.hd{color:#63636E;font-size:10.5px;font-family:'Poppins';letter-spacing:.5px;padding-bottom:3px}
.trow.dt{background:#17171D;margin-bottom:5px;color:#C4C4CE}
.trow .nm{display:flex;align-items:center;gap:8px;color:#fff;min-width:0}
.trow .nm span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .av{width:24px;height:24px;border-radius:7px;background:#2C2C36;display:grid;place-items:center;font-size:11px;color:#A9A9B4;flex-shrink:0}
.chipn{background:#22222A;border-radius:6px;padding:2px 8px;font-family:'Poppins';font-size:11px;color:#fff;display:inline-block}
.chipn.hot{background:var(--amber);color:#2A1A00}

/* Enrollment flow */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:660px;padding:0 20px}
.fstep{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);border-radius:20px;padding:20px 16px;text-align:center}
.fstep .n{font-family:'Poppins';font-size:11px;color:#fff;margin-bottom:14px;letter-spacing:1px}
.fstep .vz{min-height:216px;display:grid;place-items:center;margin-bottom:16px}
.fstep p{color:rgba(255,255,255,.72);font-size:12.5px;font-weight:300;line-height:1.6}
.qsm{width:134px;height:134px;background:#fff;border-radius:15px;padding:10px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.85)}
/* mini phone = full-size screen scaled down, so every proportion stays true */
.psm{width:108px;height:208px;border-radius:19px;background:#2A2A32;padding:4px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.22)}
.psm .sc{background:#0B0B0E;border-radius:16px;height:100%;position:relative;overflow:hidden}
.psm .scaler{position:absolute;top:0;left:0;width:300px;height:600px;transform:scale(.3333);transform-origin:top left}
.en{height:100%;background:#0B0B0E;padding:26px 22px 24px;display:flex;flex-direction:column;text-align:center}
.en .isl3{width:78px;height:22px;background:#000;border-radius:18px;margin:0 auto 26px}
.en .lg{width:60px;height:60px;border-radius:18px;background:var(--brand);color:#fff;margin:0 auto 14px;
  display:grid;place-items:center;font-size:28px;font-weight:700}
.en .nm{color:#fff;font-size:20px;font-weight:700;line-height:1.3}
.en .sb{color:#8A8A95;font-size:13px;margin-top:2px}
.en .cd{background:var(--brand);border-radius:14px;margin:20px 0 auto;overflow:hidden;text-align:right}
.en .cd-t{padding:10px 12px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.2)}
.en .cd-t i{width:24px;height:24px;border-radius:7px;background:#fff;color:var(--brand);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.en .cd-t b{color:#fff;font-size:12px}
.en .cd-g{padding:11px 12px;display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.en .cd-g i{aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.en .cd-g i.on{background:#fff;border-color:#fff}
.en .cd-g i.gd{background:var(--amber);border-color:var(--amber)}
.en .cd-f{padding:0 12px 11px;display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.7)}
.en .cd-f b{color:var(--amber);font-size:10px}
.en .bt{background:#fff;color:#0A0A0A;border-radius:12px;padding:13px;font-size:14px;font-weight:700}
.en .fp{color:#5E5E68;font-size:10px;margin-top:10px}
.wsm{width:152px;border-radius:14px;overflow:hidden;background:var(--brand);
  box-shadow:0 18px 36px -12px rgba(0,0,0,.88)}
.wsm .t{padding:10px 11px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22)}
.wsm .t i{width:24px;height:24px;border-radius:7px;background:#fff;color:var(--brand);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.wsm .t b{color:#fff;font-size:10.5px;display:block;line-height:1.3}
.wsm .t small{color:rgba(255,255,255,.6);font-size:8px;display:block}
.wsm .g{padding:10px 11px;display:grid;grid-template-columns:repeat(10,1fr);gap:2.5px}
.wsm .g i{aspect-ratio:1;border-radius:50%;border:.8px solid rgba(255,255,255,.32)}
.wsm .g i.on{background:#fff;border-color:#fff}
.wsm .g i.gd{background:var(--amber);border-color:var(--amber)}
.wsm .f{padding:0 11px 10px;display:flex;justify-content:space-between;align-items:center;
  font-size:8.5px;color:rgba(255,255,255,.7)}
.wsm .f b{color:var(--amber);font-size:8.5px;font-weight:700}
.wsm .qz{background:#fff;padding:8px;display:grid;place-items:center}
.wsm .qz .qr{width:46px;height:46px}

/* blocks */
.block{background:var(--soft);border-radius:var(--r);padding:96px 0;margin-bottom:14px}
.block.white{background:var(--white)}
.block.black{background:var(--blk)}
.eyebrow{text-align:center;font-family:'Poppins';font-size:11.5px;letter-spacing:3.4px;color:var(--ink3);
  margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:16px}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:52px;background:var(--line)}
.block.black .eyebrow{color:#6E6E78}.block.black .eyebrow::before,.block.black .eyebrow::after{background:#242424}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem);font-weight:800;line-height:1.24;letter-spacing:-1.2px;text-align:center;max-width:21ch;margin:0 auto}
.block.black h2{color:#fff}
.lead{margin:18px auto 0;text-align:center;color:var(--ink2);max-width:54ch;font-size:1.04rem;font-weight:300}
.block.black .lead{color:#9A9AA2}

/* hero — a wall of wallet passes drifting behind the headline.

   It replaced a photograph of a café counter with an iPhone mockup in front of
   it. The mockup was a hand-drawn phone: bezel, notch, a fake 9:41 status bar.
   That combination is the most recognisable "template" signal on the web, and
   the passes inside it were 108px wide, too small to read as the product. The
   wall shows the artefact itself, a dozen times, in a dozen trades — which is
   also the argument the page is trying to make. */
 /* 580px of hero put the partners strip below the fold on every laptop, and
    the first question a merchant asks is who else uses this. The hero keeps
    its wall and its headline and gives up its empty air. */
.hero{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:14px;
  min-height:352px;
  display:flex;align-items:center;justify-content:center;background:#0A0A0A}

/* No `gap` on the row. The loop slides exactly -50% of a track holding the
   same cards twice, but a flex gap adds one extra gap between the two halves,
   so half the track fell half a gap short of a whole set and the wall jumped
   10px every lap. Spacing carried on the card keeps the halves identical. */
.hmini{width:246px;flex-shrink:0;margin-right:22px;direction:rtl;border-radius:17px;
  background:var(--c);color:#fff;overflow:hidden;position:relative;
  box-shadow:0 22px 44px -16px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.1)}
.hmini::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(152deg,rgba(255,255,255,.2),rgba(255,255,255,0) 46%)}
.hm-top{display:flex;align-items:center;gap:10px;padding:12px 13px 10px;position:relative}
.hm-lg{width:29px;height:29px;border-radius:9px;background:rgba(255,255,255,.19);
  display:grid;place-items:center;flex-shrink:0}
.hm-lg svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}
.hm-nm{min-width:0;flex:1}
.hm-nm b{display:block;font-size:13.5px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-nm small{display:block;font-size:9.5px;color:rgba(255,255,255,.56);font-weight:300}
.hm-bal{text-align:left;direction:ltr;flex-shrink:0}
.hm-bal b{font-family:'Poppins';font-size:12.5px;font-weight:600;line-height:1.1}
.hm-bal small{display:block;font-size:8.5px;color:rgba(255,255,255,.5);font-weight:300}
.hm-strip{background:rgba(0,0,0,.26);padding:9px 13px 11px;position:relative}
.hm-d{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.hm-d i{aspect-ratio:1;border-radius:50%;border:1.4px solid rgba(255,255,255,.3)}
.hm-d i.on{background:#fff;border-color:#fff}
/* the points bar: filled from the reading side, a gift mark at each milestone */
.hm-bar{position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.26);margin:5px 0 2px}
.hm-bar u{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;background:#fff}
.hm-bar em{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;margin-inline-start:-9px;
  border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.hm-bar em.end{inset-inline-start:100%;background:transparent;border:2px dashed var(--amber);box-shadow:none}
.hm-d i.gd{border-style:dashed;border-color:var(--amber)}
.hm-d i.gd.on{background:var(--amber);border-color:var(--amber);border-style:solid}
.hm-f{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px;font-size:10px;color:rgba(255,255,255,.62);font-weight:300}
.hm-f b{font-weight:700;font-size:10.5px;color:var(--amber)}

.hero-in{position:relative;width:100%;max-width:820px;margin:0 auto;
  padding:44px 26px 40px;text-align:center}

/* On a desktop the hero is two columns: the words on the right, the buttons
   and the wallet badges on the left.

   It is not a taste decision. The nav pill is pinned across the middle of the
   top of the page, and a single centred stack ran straight underneath it —
   the lockup sat behind the pill and the headline started in its shadow. Two
   columns move the copy out from under it, and because the stack is no longer
   one tall column the hero came out SHORTER than the centred version, not
   taller. The phone keeps the centred stack: two columns of 180px are worse
   than one column of 360. */
@media(min-width:961px){
  .hero-in{max-width:1180px;padding:104px 44px 56px;text-align:start;
    display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
  .h-copy{padding-bottom:0}
  /* `margin:17px auto` centres the line inside its column, which in a
     start-aligned layout leaves it visibly offset from the headline above it.
     Aligned to the same edge, it reads as one block. */
  .hero-in .h-sub{margin-inline:0;max-width:42ch}
  .h-act{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
  .h-cta{justify-content:flex-start}
  .wallets{justify-content:flex-start}
}
.h-copy{padding-bottom:0}

/* ---------------------------------------------------------------- RED HERO
   29 Sep 2026: the owner picked the red hero (model 2 of three), then asked
   for it at the old hero's height and with different cards. So: the brand red
   at about the old height, and three WHITE passes — white reads as a card on
   red where the dark ones read as holes. */
.hero-red{background:var(--red)}
.hero-red::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(900px 420px at 50% 120%,rgba(60,0,15,.2),transparent 70%),
  radial-gradient(760px 380px at 50% -20%,rgba(255,255,255,.18),transparent 70%)}
.hero-red .h-sub{color:rgba(255,255,255,.92);font-weight:400}
.hero-red .btn-w{box-shadow:0 14px 30px -14px rgba(60,0,15,.55)}
.hero-red .btn-o{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}
.hero-red .wbadge{background:transparent;border-color:rgba(255,255,255,.45)}
.hero-red .wbadge:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero-red .wbadge small{color:rgba(255,255,255,.8)}

/* Three passes side by side, rising from the bottom edge — the arrangement
   the owner liked, made tidy, each in its own shop's colour: all three the same size, whole down to the
   next-reward line, spaced evenly and tilted by the same small angle either
   side of an upright centre card. (The first cut showed only their tops and
   read as cropped; a wallet stack in between was the wrong arrangement.) */
.hero-red .hero-in{padding-bottom:150px}
.hfan{position:absolute;left:50%;bottom:0;width:0;height:0;pointer-events:none}
/* Large and close together, overlapping a little, cut by the bottom edge just
   under the stamps — the arrangement in the owner's own screenshot. */
.hfan .hf{position:absolute;bottom:-62px;left:0;transform-origin:50% 100%}
.hfan .hf0{transform:translateX(-50%) translateX(-342px) rotate(-7deg) scale(1.3)}
.hfan .hf1{transform:translateX(-50%) translateY(-18px) scale(1.34);z-index:2}
.hfan .hf2{transform:translateX(-50%) translateX(342px) rotate(7deg) scale(1.3)}
.hfan .hmini{width:260px;margin:0;
  box-shadow:0 26px 50px -24px rgba(60,0,15,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.hfan .hm-strip{padding-bottom:16px}
/* English shop names run longer; let them use the card width rather than clip */
body.lang-en .hfan .hm-nm b{font-size:12px;letter-spacing:-.2px}
@media(max-width:960px){
  .hero-red .hero-in{padding-bottom:96px}
  .hfan .hf{bottom:-34px}
  .hfan .hf0{transform:translateX(-50%) translateX(-128px) rotate(-7deg) scale(.7)}
  .hfan .hf1{transform:translateX(-50%) translateY(-10px) scale(.75)}
  .hfan .hf2{transform:translateX(-50%) translateX(128px) rotate(7deg) scale(.7)}
}
.mark{display:inline-flex;direction:ltr;align-items:center;gap:7px;margin-bottom:13px}
.mark span{font-family:'Poppins';font-weight:600;font-size:25px;color:#fff;letter-spacing:-.6px}
h1{font-size:clamp(1.72rem,3.3vw,2.62rem);font-weight:800;line-height:1.1;letter-spacing:-1.1px;color:#fff}
.h-sub{margin:17px auto 0;font-size:1rem;color:rgba(255,255,255,.72);max-width:46ch;line-height:1.75;font-weight:300}
.h-cta{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.wallets{display:flex;gap:10px;margin-top:17px;flex-wrap:wrap;justify-content:center}
.wbadge{display:flex;align-items:center;gap:10px;padding:9px 17px 9px 15px;border-radius:15px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);transition:border-color .3s,background .3s}
.wbadge:hover{border-color:rgba(255,255,255,.62);background:rgba(0,0,0,.66)}
.wbadge .wi{width:25px;height:25px;flex-shrink:0}.wbadge .wi svg{width:100%;height:100%}
.wbadge small{display:block;font-size:11px;color:rgba(255,255,255,.62);line-height:1.25}
.wbadge b{display:block;font-family:'Poppins';font-size:14.5px;font-weight:500;color:#fff;line-height:1.3}

/* about / services / etc */
.about{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}
.about-txt{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:40px 38px}
.about-txt p{color:var(--ink2);font-weight:300;font-size:1.02rem;margin-bottom:16px}
.about-txt p:last-child{margin:0}
.about-img{border-radius:26px;overflow:hidden;min-height:330px;background-size:cover;background-position:center}

/* Wallet passes stacked the way a phone stacks them, in place of a stock
   photograph. The paragraph beside it is about paper punch cards being lost;
   showing the digital thing that replaces them argues the point better than a
   picture of someone holding a phone.

   Deliberately NOT card-shaped with a magnetic-stripe barcode — that reads as
   plastic. A pass is portrait, layered, and carries a live QR. */
.about-cards{position:relative;border-radius:26px;min-height:330px;overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;padding:34px 20px}
/* Three passes in a stack that shuffles: each takes its turn at the front,
   then slides behind the others. Every card carries its full content so any
   of them can be the one on top — position is the only thing that changes. */
/* A single card, unchanged in every visible respect from the three that used
   to shuffle here — same 16px radius, same header band, same amber next-stop
   line. Only the stacking is gone, so it sits in the normal flow instead of
   being absolutely positioned against a fixed-height .dstack. */
.dpass{width:252px;
  border-radius:16px;overflow:hidden;background:var(--c,var(--brand));color:#fff;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.42)}

.dp-top{display:flex;align-items:center;gap:9px;padding:11px 13px;background:rgba(0,0,0,.2)}
.dp-lg{width:26px;height:26px;border-radius:8px;background:#fff;color:var(--c,var(--brand));
  display:grid;place-items:center;flex-shrink:0}
.dp-lg svg{width:17px;height:17px}
.dp-nm{min-width:0;flex:1}
.dp-nm b{display:block;font-size:12.5px;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-nm small{color:rgba(255,255,255,.6);font-size:10px}
.dp-bal{text-align:left;direction:ltr;flex-shrink:0}
.dp-bal small{display:block;color:rgba(255,255,255,.55);font-size:9px;line-height:1.2}
.dp-bal b{font-family:'Poppins',sans-serif;font-size:14px;font-weight:600}

.dp-body{padding:13px 13px 11px}
.dp-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:10px}
.dp-grid i{aspect-ratio:1;border-radius:50%;border:1.2px solid rgba(255,255,255,.26);
  transition:background .28s,border-color .28s,transform .28s}
.dp-grid i.pop{transform:scale(1.3)}
.dp-grid i.on{background:#fff;border-color:#fff}
.dp-grid i.gd{background:var(--amber);border-color:var(--amber)}
.dp-next{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;
  color:rgba(255,255,255,.68);padding-top:9px;border-top:1px solid rgba(255,255,255,.16)}
.dp-next b{color:var(--amber);font-weight:700;font-size:10.5px;white-space:nowrap}

.dp-code{background:#fff;padding:11px;display:flex;justify-content:center}
.dp-code .qr{width:84px;height:84px}

@media(max-width:960px){
  .about-cards{min-height:0;padding:30px 20px}
}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:52px}
.scard{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:34px 32px;
  transition:border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.scard:hover{border-color:#C9CDD4;transform:translateY(-5px)}
.scard .ic{width:44px;height:44px;border-radius:13px;background:var(--gray);display:grid;place-items:center;margin-bottom:18px}
.scard .ic svg{width:21px;height:21px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scard h3{font-size:1.2rem;font-weight:700;letter-spacing:-.4px;margin-bottom:9px}
.scard p{color:var(--ink2);font-size:15px;font-weight:300;line-height:1.75}
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:50px}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px 24px 22px;
  display:flex;flex-direction:column;transition:border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.tcard:hover{border-color:#C9CDD4;transform:translateY(-5px)}
.stars{display:flex;gap:3px;margin-bottom:14px}
.stars svg{width:15px;height:15px;fill:var(--amber);stroke:none}
.tcard p{color:var(--ink);font-size:15.5px;font-weight:400;line-height:1.8;flex:1;margin-bottom:20px}
.twho{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid var(--line)}
.tic{width:36px;height:36px;border-radius:11px;background:var(--gray);display:grid;place-items:center;flex-shrink:0;color:var(--ink2)}
.tic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.twho b{display:block;font-size:14px;font-weight:700;letter-spacing:-.2px}
.twho small{display:block;color:var(--ink3);font-size:12.5px;font-weight:300}
.stats{margin-top:52px;display:flex;flex-direction:column;gap:13px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px 34px;display:flex;align-items:center;gap:26px}
.stat .n{font-family:'Poppins';font-size:2.6rem;font-weight:600;letter-spacing:-1.6px;min-width:120px;color:var(--red)}
.stat .t{color:var(--ink2);font-size:1.02rem;font-weight:300}
.stat .t b{font-weight:700;color:var(--ink)}
.stack{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:46px}
.chip{border:1px solid #242424;border-radius:100px;padding:12px 24px;color:#C9C9D0;font-size:14.5px}
.chip b{color:#fff;font-weight:700}

.caro-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:44px}
.caro-nav{display:flex;gap:9px;flex-shrink:0}
.caro-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);
  transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1),opacity .25s}
.caro-btn:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}
.caro-btn:disabled{opacity:.32;cursor:default}
.caro-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .caro-btn svg{transform:scaleX(-1)}
.dcards{margin-top:18px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;padding-inline:max(26px,calc((100% - 1120px)/2 + 26px));scroll-padding-inline:max(26px,calc((100% - 1120px)/2 + 26px))}
.dcards::-webkit-scrollbar{display:none}
.dcard-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.dcard-bg::after{content:"";position:absolute;inset:0;background:rgba(5,5,8,.76)}
.dcard-t,.dcard-v{position:relative;z-index:2}
.dcard{position:relative;background:var(--blk);border-radius:30px;overflow:hidden;flex:0 0 clamp(268px,42%,462px);scroll-snap-align:start}
.dcard-t{padding:26px 26px 20px}
.dcard-t .hd{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.dcard-t .hd svg{width:21px;height:21px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.dcard-t h3{font-size:1.16rem;font-weight:700;color:#fff;letter-spacing:-.6px}
.dcard-t p{color:#9A9AA2;font-size:14px;font-weight:300;line-height:1.8;max-width:64ch}
.dnum{position:absolute;top:20px;inset-inline-start:22px;z-index:6;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:5px 13px;font-family:'Poppins',sans-serif;font-size:11px;letter-spacing:1.5px;color:rgba(255,255,255,.82);direction:ltr}
.dcard-v{position:relative;background:rgba(0,0,0,.34);display:flex;justify-content:center;align-items:center;padding:0;overflow:hidden;height:268px;min-height:0}
.dcard-v > *{transform-origin:top center}
.dcard-v .dev{transform:scale(.46)!important;transform-origin:center center!important;margin:-142px 0}
.dcard-v .mac{transform:scale(.63)!important;transform-origin:center center!important;margin:-69px 0}
.dcard-v .flow{transform:scale(.67)!important;transform-origin:center center!important;margin:-58px 0;padding:0;width:660px;max-width:none}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:38px auto 0;align-items:start;max-width:720px}
.pmain{background:var(--blk);border-radius:20px;padding:24px 22px 20px;color:#fff}
.plabel{color:#9A9AA2;font-size:12.5px}
.pamount{display:flex;align-items:baseline;gap:7px;margin:6px 0 2px;direction:ltr;justify-content:flex-end}
.pamount span{font-family:'Poppins';font-size:2.5rem;font-weight:600;letter-spacing:-1.6px;line-height:1;color:var(--amber)}
.pamount small{color:#9A9AA2;font-size:12.5px}
.pnote{color:#9A9AA2;font-size:12.5px}
.pfeat{list-style:none;margin:18px 0 18px;display:grid;gap:8px}
.pfeat li{display:flex;align-items:flex-start;gap:9px;color:#D6D6DE;font-size:13px;font-weight:300;line-height:1.55}
.pfeat svg{width:14px;height:14px;stroke:var(--amber);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:4px}
.pbiz{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px 22px}
.pbiz-tag{display:inline-block;background:var(--gray);border-radius:100px;padding:4px 12px;font-family:'Poppins';font-size:10.5px;letter-spacing:1.3px;color:var(--ink2);margin-bottom:12px}
.pbiz h3{font-size:1.1rem;font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.pbiz p{color:var(--ink2);font-size:13px;font-weight:300;line-height:1.7;margin-bottom:18px}
.btn-wa{background:#25D366;color:#0A2E17;width:100%}
.pgrid .btn{padding:11px 20px;font-size:13.5px}
.btn-wa svg{width:19px;height:19px;fill:currentColor;stroke:none}
.btn-wa:hover{transform:translateY(-3px)}

.fan{display:flex;justify-content:center;align-items:flex-end;margin-top:44px;padding:78px 0 54px;overflow:visible;flex-wrap:nowrap}
/* Each card in the fan is a wallet pass, not a photograph. The section claims
   the product fits any business, so it shows the product wearing each trade's
   colours rather than a stock photo of that trade. --c is the card colour. */
.ind{position:relative;width:168px;height:268px;border-radius:17px;overflow:hidden;flex-shrink:0;
  margin-inline:-36px;transform-origin:bottom center;cursor:pointer;
  background:var(--c,var(--brand));color:#fff;
  display:flex;flex-direction:column;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}

.ind-hd{display:flex;align-items:center;gap:7px;padding:9px 10px;background:rgba(0,0,0,.2)}
.ind-lg{width:21px;height:21px;border-radius:6px;background:#fff;color:var(--c,var(--brand));
  display:grid;place-items:center;flex-shrink:0}
.ind-lg svg{width:14px;height:14px}
.ind h3{margin:0;font-size:11px;font-weight:700;line-height:1.3;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* The photo does not move. It reads as part of the printed card, and a card
   whose artwork drifts under the cursor looks like a web banner. */
.ind .ph{height:74px;flex-shrink:0;background-size:cover;background-position:center}
.ind .ov{display:none}

.ind-bd{padding:9px 11px 7px;flex:1}
.ind-bd small{display:block;font-size:8.5px;letter-spacing:.6px;color:rgba(255,255,255,.62);
  text-transform:uppercase;margin-bottom:1px}
.ind-bd b{font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.4px}
/* Stamps or points, as the product runs either (29 Sep 2026): a row of ten
   dots for a stamp card, one bar for a points card. */
.ind-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:6px}
.ind-dots i{aspect-ratio:1;border-radius:50%;border:1.2px solid rgba(255,255,255,.45)}
.ind-dots i.on{background:#fff;border-color:#fff}
.ind-bar{position:relative;height:7px;border-radius:99px;background:rgba(255,255,255,.3);margin-top:8px}
.ind-bar u{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;background:#fff}

/* A QR on a white panel, as the real pass carries — the barcode it replaced
   (29 Sep 2026, at the owner's request) was a gradient stand-in. site.js draws
   every [data-qr]. */
.ind-bc{margin:0 10px 10px;border-radius:8px;background:#fff;padding:6px;display:flex;justify-content:center}
.ind-bc .qr{width:50px;height:50px}
.ind:nth-child(1){transform:rotate(-20deg) translateY(62px);z-index:1}
.ind:nth-child(2){transform:rotate(-16deg) translateY(45px);z-index:2}
.ind:nth-child(3){transform:rotate(-12deg) translateY(31px);z-index:3}
.ind:nth-child(4){transform:rotate(-8deg) translateY(19px);z-index:4}
.ind:nth-child(5){transform:rotate(-4deg) translateY(8px);z-index:5}
.ind:nth-child(6){transform:rotate(0deg) translateY(0px);z-index:6}
.ind:nth-child(7){transform:rotate(4deg) translateY(8px);z-index:5}
.ind:nth-child(8){transform:rotate(8deg) translateY(19px);z-index:4}
.ind:nth-child(9){transform:rotate(12deg) translateY(31px);z-index:3}
.ind:nth-child(10){transform:rotate(16deg) translateY(45px);z-index:2}
.ind:nth-child(11){transform:rotate(20deg) translateY(62px);z-index:1}
.ind:hover{transform:rotate(0deg) translateY(-38px) scale(1.24)!important;z-index:30!important;
  box-shadow:0 44px 84px -20px rgba(0,0,0,.62)}
/* On a phone the fan becomes a swipeable rail. Two half-width cards to a row
   squeezed a stamp count and a barcode into 150px and read as thumbnails;
   full-size cards you push through with a thumb read as cards. Snapping keeps
   one centred instead of leaving a torn edge, and the scrollbar is already
   hidden site-wide, so the gesture is the whole interface. */
@media(max-width:900px){
  .fan{
    flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;
    gap:12px;margin-top:20px;
    /* The generous vertical padding is not decoration: overflow-x:auto clips
       overflow-y too, and each card throws a 40px shadow. With a tight
       padding the shadow gets sliced off in a hard straight line across the
       section. */
    padding:26px 26px 52px;
    margin-inline:-26px;            /* bleed past .wrap's gutter to the edge */
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .ind{
    margin-inline:0;transform:none!important;
    width:180px;height:280px;
  }
  .ind:hover{transform:none!important;box-shadow:0 20px 44px -16px rgba(0,0,0,.5)}
}

.demo{margin-top:48px;background:var(--blk);border-radius:30px;padding:52px 40px;display:grid;
  grid-template-columns:1fr auto;gap:40px;align-items:center}
.demo h3{color:#fff;font-size:1.6rem;font-weight:700;letter-spacing:-.6px;margin-bottom:12px}
.demo p{color:#9A9AA2;font-weight:300;font-size:15.5px;max-width:46ch;margin-bottom:26px}
.qrbox{width:190px;height:190px;background:#fff;border-radius:22px;padding:16px;flex-shrink:0}

.final{position:relative;border-radius:var(--r);overflow:hidden;padding:132px 0;text-align:center;margin-bottom:14px;background:#120507}
.final .ph{position:absolute;inset:0;background-size:cover;background-position:center}
/* The brand red, not the old maroon (29 Sep 2026, «اجعل الظل بنفس لون هويتنا»).
   Denser toward the bottom where the buttons sit, so white reads on it. */
.final .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,41,79,.8),rgba(250,41,79,.9))}
.final .wrap{position:relative}
.final h2{color:#fff}.final .lead{color:rgba(255,255,255,.92)}
.foot{background:var(--blk);border-radius:var(--r);padding:64px 0 34px;text-align:center}
.fbrand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px}
.fbrand span{font-family:'Poppins';font-weight:600;font-size:27px;color:#fff;letter-spacing:-.6px}
.ftag{color:#9A9AA2;font-size:15px;font-weight:300;max-width:38ch;margin:0 auto 26px;line-height:1.8}
.fcta{padding:13px 34px}
.fbot{margin-top:44px;padding-top:24px;border-top:1px solid #1E1E1E;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;color:#6E6E78;font-size:13px;text-align:start}

/* --------------------------------------------------------------------------
   Partners.

   STILL on a desktop and SWIPEABLE on a phone — the same rail the trades fan
   uses, and for the same reason: a marquee that never stops implies a list
   that never ends, and there are six of these. Six names standing still read
   as six real shops; six names sliding past read as a stock ticker.

   The logos are never recoloured and never cropped: height is fixed, width
   follows, and each mark keeps its own colours.
   -------------------------------------------------------------------------- */
.pstrip{padding:30px 0 34px;background:transparent}
.pstrip-h{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-bottom:20px;color:var(--ink2);font-size:15px;font-weight:700;letter-spacing:.2px}
.pstrip-h::before,.pstrip-h::after{content:'';height:1px;width:64px;
  background:linear-gradient(90deg,rgba(250,41,79,0),rgba(250,41,79,.45))}
.pstrip-h::after{background:linear-gradient(90deg,rgba(250,41,79,.45),rgba(250,41,79,0))}
/* ------------------------------------------------------------- the rail ----
   ELEVEN logos will not sit still in one desktop line without crowding, so the
   row drifts at every width now — the same rail, the same drift() in home.js,
   the same clones and the same seam. Only the gate changed. There is no CSS
   animation here on purpose: a keyframe running against a script that writes
   scrollLeft would fight it every frame.

   `pmask` fades both ends so a logo enters and leaves the row rather than
   being chopped off at the gutter. */
.pmask{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ptrack{display:flex;align-items:center;justify-content:flex-start;
  flex-wrap:nowrap;gap:58px;padding:0 36px;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ptrack img{height:66px;width:auto;display:block;flex-shrink:0}

/* Reduced motion: drift() already stands the rail down, so all this has to do
   is let the row breathe as a static, centred, wrapping block again. */
@media(prefers-reduced-motion:reduce){
  .ptrack{flex-wrap:wrap;justify-content:center;overflow-x:visible;gap:26px 58px}
  .ptrack img[aria-hidden="true"]{display:none}
  .pmask{-webkit-mask-image:none;mask-image:none}
}

/* On a phone six logos will not sit in one line at a readable size, so the
   row becomes a rail you push with a thumb — bled past the gutter to the
   screen edge so the last logo is visibly cut and the gesture is obvious. */
@media(max-width:900px){
  .pstrip{padding:20px 0 24px}
  /* the same rail, closer up */
  .ptrack{gap:44px;padding:6px 22px 10px}
  .ptrack img{height:52px}
}

.rv{opacity:0;transform:translateY(30px)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}}
@media(max-width:960px){
  /* Let the copy set the height instead of a 640px floor meant for a desktop
     hero. On a phone that floor left 147px of dead space under the buttons and
     165px above them, where the nav pill only reaches 53px in. */
  .hero{min-height:0}
  .hero-in{padding:52px 24px 40px}
  .pill-mid{display:none}.about{grid-template-columns:1fr}
  .stat{flex-direction:column;align-items:flex-start;gap:5px}.stat .n{min-width:0}
  .demo{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr}.mac-side{display:none}.mac-body{grid-template-columns:1fr}
  .dev{transform:scale(.88);transform-origin:bottom center}
}