/* =====================================================================
   ZOON — index.html visual system (v2)
   ---------------------------------------------------------------------
   Self-contained stylesheet used ONLY by index.html. privacy.html,
   terms.html, and delete-account.html keep loading style.css directly
   and are completely untouched by this file — zero shared-file risk.

   This replaces the light/dark theme TOGGLE with one fixed, deliberately
   composed look: sections alternate dark/light on their own, the way a
   real editorial page is art-directed, rather than the whole page
   flipping between two palettes on a button click.
   ===================================================================== */

:root{
  --bg-dark:#0A0D0A; --bg-dark-2:#12160F; --bg-dark-3:#171C14;
  --bg-light:#F6F7F1; --bg-light-2:#FFFFFF;
  --ink:#0B0F0A; --ink-soft:#565F51;
  --paper:#EEF0E8; --paper-soft:#98A090; --paper-faint:#6B7365;
  --neon:#17D964; --neon-deep:#0BA34A; --neon-dim:#1B4A2C; --neon-bright:#39FF7A;
  --accent:#4D7CFE; --accent-deep:#2E5CE0; --accent-soft:rgba(77,124,254,0.12);
  --border-d:rgba(238,240,232,0.1); --border-d2:rgba(238,240,232,0.18);
  --border-l:rgba(11,15,10,0.09); --border-l2:rgba(11,15,10,0.15);
  --ease:cubic-bezier(.16,.9,.28,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --font:'Cairo',-apple-system,'Segoe UI',sans-serif;
  --danger:#C4283C;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* overflow-x:hidden must be set on BOTH html and body — on iOS Safari,
   body-only does not reliably clip a descendant that briefly overflows the
   viewport width (e.g. a nowrap heading before it's been shrunk to fit),
   leaving a visible blank strip at the edge until the next reflow. */
html{scroll-behavior:smooth; overflow-x:hidden;}
body{font-family:var(--font); background:var(--bg-light); color:var(--ink); direction:rtl; overflow-x:hidden; line-height:1.5; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit;}
.container{width:100%; max-width:1220px; margin:0 auto; padding:0 28px;}
section{position:relative;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
::selection{background:var(--neon); color:#08110B;}
.zmark{display:inline-block; line-height:0;}
.zmark svg{display:block;}

/* ---------------------------------------------------------------------
   Ripple micro-interaction
   --------------------------------------------------------------------- */
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.5); transform:scale(0); animation:ripple .65s var(--ease-soft); pointer-events:none; z-index:-1; }
.btn-ghost-d .ripple{ background:rgba(238,240,232,0.35); }
@keyframes ripple{ to{ transform:scale(3.2); opacity:0; } }

h1,h2{letter-spacing:-.01em;}
.h1,.h2{white-space:nowrap;}
.about-grid > *, .trust-panel > *, .tracking-inner > *, .audience-stage > *,
.persona-grid > *, .showcase-grid > *, .hero-grid > *{min-width:0;}
.h1{font-size:clamp(2.5rem,7vw,5.2rem); font-weight:900; line-height:1.03;}
.h2{font-size:clamp(1.8rem,3.8vw,3rem); font-weight:900; line-height:1.12;}
.lede{font-size:clamp(1rem,1.5vw,1.15rem); font-weight:500;}
p{text-wrap:pretty;}

.reveal{opacity:0; transform:translateY(24px) scale(.99); filter:blur(2px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);}
.reveal.in{opacity:1; transform:none; filter:blur(0);}
.reveal-scale{opacity:0; transform:scale(.96); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-scale.in{opacity:1; transform:none;}
.reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:none;}
.reveal-right{opacity:0; transform:translateX(50px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal-right.in{opacity:1; transform:none;}
.reveal-left{opacity:0; transform:translateX(-50px) scale(.96); transition:opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s;}
.reveal-left.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal, .reveal-scale, .reveal-stagger > *{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;} *{animation:none !important;} }

/* No letter-spacing/uppercase here — Arabic script is cursive-joining, and
   adding tracking (the usual "eyebrow label" treatment for Latin text)
   breaks the letter connections, rendering as fragmented, unclear strokes
   on real devices. */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.76rem; font-weight:800; color:var(--paper-soft);}
.eyebrow.on-light{color:var(--ink-soft);}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 4px rgba(23,217,100,0.18); flex-shrink:0;}
.eyebrow .zmark{color:var(--neon);}
.eyebrow .bar{width:20px; height:2px; border-radius:2px; background:currentColor; opacity:.5;}

/* Doc bug found in testing (Opera only): hover's transform (translateY)
   on a .btn combined with overflow:hidden + isolation:isolate — needed
   for the ripple effect to clip inside the button's own stacking context
   — made Opera visibly flicker the surrounding page on hover, worst on
   buttons sitting near the hero's other GPU-composited layers (phone
   tilt, etc.). will-change:transform pre-allocates the layer instead of
   creating/tearing it down exactly at the hover moment, same fix as the
   phone-tilt flicker. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 27px; border-radius:12px; font-weight:800; font-size:.93rem; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s; white-space:nowrap; position:relative; overflow:hidden; isolation:isolate; will-change:transform;}
.btn-neon{background:var(--neon); color:#08110B; box-shadow:0 10px 28px rgba(23,217,100,0.26);}
.btn-neon:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(23,217,100,0.36);}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(77,124,254,0.28);}
.btn-accent:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(77,124,254,0.38);}
.btn-ghost-d{border:1.5px solid var(--border-d2); color:var(--paper);}
.btn-ghost-d:hover{border-color:var(--paper-soft); background:rgba(238,240,232,0.06); transform:translateY(-2px);}
.btn-ghost-l{border:1.5px solid var(--border-l2); color:var(--ink);}
.btn-ghost-l:hover{border-color:var(--ink); background:rgba(11,15,10,0.04); transform:translateY(-2px);}
.btn-sm{padding:10px 19px; font-size:.83rem; border-radius:10px;}
.btn-block{width:100%;}

/* ================= NAV ================= */
.nav{position:fixed; top:0; right:0; left:0; z-index:500; padding:16px 0; background:rgba(10,13,10,0.92); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--border-d); transition:padding .4s var(--ease), box-shadow .4s var(--ease);}
.nav.scrolled{padding:10px 0; box-shadow:0 8px 30px rgba(0,0,0,0.25);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.1rem; color:var(--paper);}
.brand img{width:30px; height:30px; border-radius:8px;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:.89rem; font-weight:600; color:var(--paper-soft); transition:color .25s;}
.nav-links a:hover{color:var(--paper);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-burger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-d2); background:transparent; align-items:center; justify-content:center;}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{ content:''; display:block; width:18px; height:2px; background:var(--paper); position:relative; transition:.3s; }
.nav-burger span::before{ position:absolute; top:-6px; width:18px; height:2px; background:var(--paper); }
.nav-burger span::after{ position:absolute; top:6px; width:18px; height:2px; background:var(--paper); }

.mobile-menu{ position:fixed; inset:0; z-index:499; background:var(--bg-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; transform:translateY(-100%); transition:transform .5s var(--ease); }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-size:1.5rem; font-weight:800; color:var(--paper); }

/* ================= HERO ================= */
.hero{position:relative; background:linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%); color:var(--paper); padding:126px 0 0; overflow:hidden; min-height:92vh; display:flex; align-items:center;}
.hero-bg{--hero-bg-op:.45; position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.hero-bg-slide{ position:absolute; inset:-7%; background-size:cover; background-position:center; filter:grayscale(1) contrast(1.06); opacity:0; will-change:opacity, transform; animation:heroBgFade 20s linear infinite, heroBgZoom 20s ease-in-out infinite; }
.hero-bg-slide:nth-child(2){animation-delay:-10s, -10s;}
@keyframes heroBgFade{ 0%{opacity:var(--hero-bg-op);} 44%{opacity:var(--hero-bg-op);} 50%{opacity:0;} 94%{opacity:0;} 100%{opacity:var(--hero-bg-op);} }
@keyframes heroBgZoom{ 0%{transform:scale(1.04);} 50%{transform:scale(1.13);} 100%{transform:scale(1.04);} }
.hero-bg-scrim{ position:absolute; inset:0; background: linear-gradient(to right, rgba(10,13,10,0.10) 0%, rgba(10,13,10,0.32) 50%, rgba(10,13,10,0.52) 100%), linear-gradient(180deg, rgba(10,13,10,0.55) 0%, rgba(10,13,10,0.08) 38%, rgba(18,22,15,0.88) 100%); }
.hero > .container{position:relative; z-index:1; width:100%;}
@media (prefers-reduced-motion: reduce){ .hero-bg-slide{animation:none; opacity:var(--hero-bg-op); transform:none;} .hero-bg-slide:nth-child(2){opacity:0;} }
.hero-grid{display:grid; grid-template-columns:1fr; align-content:center; padding-bottom:56px;}
.hero-copy{max-width:720px;}
.hero-copy .eyebrow{margin-bottom:22px;}
.hero-copy h1{margin-bottom:20px;}
.hero-copy h1 .accent{color:var(--neon);}
.hero-copy p{color:var(--paper-soft); max-width:520px; margin-bottom:30px;}
.hero-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-trust{display:flex; flex-wrap:wrap; gap:22px;}
.hero-trust-item{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; color:var(--paper-soft);}
.trust-emphasis{font-size:1.35em; font-weight:900; color:var(--neon-bright); line-height:1;}
.hero-trust-item svg{color:var(--neon); flex-shrink:0;}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.02fr .98fr; align-items:center; gap:38px;} }

.phone-stage{position:relative; display:flex; justify-content:center; perspective:1400px; padding:34px 0 20px;}
.phone-tilt{position:relative; z-index:1; transform:rotateY(-11deg) rotateX(4deg); transition:transform .25s var(--ease-soft); transform-style:preserve-3d; will-change:transform;}
.phone{position:relative; width:280px; height:570px; border-radius:44px; background:#1C201A; padding:12px; box-shadow:0 40px 80px -20px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(238,240,232,0.14), 0 0 0 1px rgba(255,255,255,0.06) inset;}
/* Doc bug found in testing (Opera, laptop only — phones/desktop Chrome
   unaffected): the rounded overflow:hidden screen content would
   intermittently vanish and reappear, because this element sits inside
   .phone-tilt's 3D transform (rotateY/rotateX + preserve-3d, only ever
   applied on hover-capable pointers, which is exactly why touch devices
   never showed it) — a known Chromium compositing bug where clipped
   content nested under a perspective-transformed 3D ancestor can drop
   out of its compositor layer. Forcing this element onto its own stable
   layer via translateZ(0) is the standard fix. */
.phone-screen{width:100%; height:100%; border-radius:34px; overflow:hidden; background:var(--neon); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transform:translateZ(0); backface-visibility:hidden;}
.phone-map{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;}
.phone-card{position:relative; z-index:1; width:86%; background:#fff; border-radius:18px; padding:18px; box-shadow:0 20px 40px rgba(0,0,0,0.25); opacity:0; transform:translateY(24px); animation:fadeUp .7s var(--ease) 1s forwards; color:#0A0D0A;}
.phone-card-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.phone-card-row:last-child{margin-bottom:0;}
.phone-dot{width:32px; height:32px; border-radius:50%; background:var(--neon); display:grid; place-items:center; font-size:14px;}
.phone-bar{height:8px; border-radius:4px; background:var(--bg-light); overflow:hidden; margin-top:12px;}
.phone-bar-fill{height:100%; width:0%; background:var(--neon); border-radius:4px; animation:fillBar 1.6s var(--ease) 1.6s forwards;}
@keyframes fillBar{ to{width:72%;} }
@keyframes fadeUp{ to{opacity:1; transform:translateY(0);} }
.phone-edge-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.phone-edge-outline{fill:none; stroke:rgba(238,240,232,0.08); stroke-width:1.5;}
.phone-edge-dot{filter:drop-shadow(0 0 5px rgba(57,255,122,0.9)) drop-shadow(0 0 12px rgba(57,255,122,0.5));}
@media (prefers-reduced-motion: reduce){ .phone-tilt{transition:none;} }
.live-toast{position:absolute; top:6%; inset-inline-start:-14px; z-index:5; background:#0A0D0A; color:#fff; border-radius:16px; padding:13px 17px; box-shadow:0 22px 44px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08) inset; width:200px;}
.live-toast-eyebrow{display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:800; color:var(--neon-bright); margin-bottom:7px;}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--neon-bright); animation:liveDotPulse 1.6s ease-in-out infinite;}
@keyframes liveDotPulse{ 0%,100%{opacity:1;} 50%{opacity:.5;} }
.live-toast-body{display:flex; align-items:center; gap:11px;}
.live-toast-ico{flex-shrink:0; width:32px; height:32px; border-radius:50%; background:rgba(23,217,100,0.22); display:grid; place-items:center; font-size:14px;}
.live-toast-text{font-weight:800; font-size:.86rem; white-space:nowrap;}
.live-toast-ico,.live-toast-text{transition:opacity .32s var(--ease-soft), transform .32s var(--ease-soft);}
.live-toast.out .live-toast-ico, .live-toast.out .live-toast-text{opacity:0; transform:translateY(-8px) scale(.92);}
.live-toast:not(.out) .live-toast-ico, .live-toast:not(.out) .live-toast-text{opacity:1; transform:none; transition-timing-function:cubic-bezier(.34,1.56,.64,1);}
@media (max-width:640px){ .phone{width:230px; height:468px;} .live-toast{inset-inline-start:0; padding:10px 13px; max-width:170px;} .live-toast-text{font-size:.76rem;} }

/* ================= ABOUT ================= */
.about-section{background:var(--bg-light); padding:64px 0;}
.about-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
@media (min-width:880px){ .about-grid{grid-template-columns:1fr 1fr;} }
.about-copy h2{margin:16px 0 16px;}
.about-copy p{color:var(--ink-soft); font-size:1.03rem; line-height:1.75;}
@media (max-width:640px){ .about-copy p{font-size:.96rem; line-height:1.8;} .about-copy h2{font-size:1.7rem; line-height:1.3;} }
.about-card{background:var(--ink); color:var(--paper); border-radius:20px; padding:32px; box-shadow:0 30px 60px -28px rgba(11,15,10,0.3);}
.about-card h3{font-size:1.15rem; font-weight:900; margin-bottom:8px;}
.about-card p{color:var(--paper-soft); font-size:.92rem;}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px;}
.pillar{background:rgba(238,240,232,0.06); border-radius:13px; padding:16px 10px; text-align:center;}
.pillar b{display:block; font-size:.92rem; font-weight:900; color:var(--neon); margin-bottom:3px;}
.pillar span{font-size:.68rem; color:var(--paper-faint); font-weight:700;}

/* ================= FEATURES ================= */
.features-section{background:var(--bg-light-2); padding:64px 0;}
.features-head{max-width:620px; margin:0 auto 48px; text-align:center;}
.features-head h2{margin:16px 0 14px;}
.features-head p{color:var(--ink-soft);}
.features-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media (min-width:700px){ .features-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .features-grid{grid-template-columns:repeat(3,1fr);} }
.feature-card{ position:relative; background:var(--bg-light); border:1px solid var(--border-l); border-radius:18px; padding:28px; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.feature-card:before{ content:''; position:absolute; top:0; right:0; left:0; height:3px; background:var(--neon); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.feature-card:hover{transform:translateY(-6px); box-shadow:0 28px 50px -24px rgba(11,15,10,0.22); border-color:transparent;}
.feature-card:hover:before{transform:scaleX(1);}
.feature-icon{width:64px; height:64px; border-radius:16px; background:linear-gradient(150deg, #1A2016 0%, var(--ink) 65%); color:var(--neon); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 8px 20px -10px rgba(11,15,10,0.4), inset 0 1px 0 rgba(255,255,255,0.06); transition:transform .45s var(--ease), box-shadow .45s var(--ease);}
.feature-icon svg{width:27px; height:27px;}
.feature-card:hover .feature-icon{transform:scale(1.08) rotate(-4deg); box-shadow:0 10px 22px -6px rgba(23,217,100,0.45);}
.feature-card h3{font-size:1rem; font-weight:900; margin-bottom:8px;}
.feature-card p{color:var(--ink-soft); font-size:1.02rem; line-height:1.7;}

/* ================= SHOWCASE (real zpm-* phone-mockup system) ================= */
.showcase{background:var(--bg-light); padding:64px 0;}
.showcase-head{max-width:620px; margin:0 auto 16px; text-align:center;}
.showcase-head h2{margin:16px 0 14px;}
.showcase-head p{color:var(--ink-soft);}
.showcase-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 32px; align-items:start; margin-top:56px;}
@media (max-width:760px){ .showcase-grid{grid-template-columns:1fr; max-width:340px; margin-inline:auto; margin-top:40px;} }
.showcase-item{text-align:center;}
.showcase-item h3{font-size:1.05rem; font-weight:900; margin-top:16px;}
.showcase-item p{font-size:.86rem; color:var(--ink-soft); margin-top:4px;}
.zpm-device{width:min(300px,100%); margin-inline:auto;}
.zpm-frame{position:relative; background:#0b0b0b; border-radius:44px; padding:12px; box-shadow:0 24px 50px -18px rgba(11,15,10,0.35), inset 0 0 0 1px rgba(255,255,255,0.05); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.showcase-item:hover .zpm-frame{transform:translateY(-6px); box-shadow:0 34px 70px -18px rgba(11,15,10,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);}
.zpm-camera{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:#000; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.08); z-index:8;}
.zpm-screen{position:relative; background:#FAFBF8; border-radius:32px; overflow:hidden; aspect-ratio:390/844; display:flex; flex-direction:column; font-family:var(--font); direction:rtl;}
.zpm-statusbar{position:relative; z-index:3; display:flex; justify-content:space-between; padding:10px 18px 2px; font-size:11px; font-weight:700; color:#15190F;}
.zpm-statusbar-icons{display:flex; gap:5px; align-items:center; font-size:10px;}
.zpm-scroll{flex:1 1 auto; overflow:hidden; padding:12px 14px; display:flex; flex-direction:column;}
.zpm-center-fill{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;}
.zpm-hero{position:relative; min-height:190px; border-radius:16px; overflow:hidden; flex:0 0 auto;}
.zpm-hero-bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.zpm-hero-bg.zpm-hero-fallback{background:#0B0F0A;}
.zpm-hero-tint{position:absolute; inset:0; background:rgba(0,0,0,0.1);}
.zpm-hero-scrim{position:absolute; inset:0; background:linear-gradient(to bottom, transparent 0%, rgba(6,9,5,0.2) 32%, rgba(6,9,5,0.8) 70%, #10150F 100%);}
.zpm-hero-bell{ position:absolute; top:12px; inset-inline-end:12px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; z-index:3; }
.zpm-hero-bell svg{width:18px; height:18px;}
.zpm-hero-fg{position:absolute; inset:0; z-index:2; padding:12px; display:flex; flex-direction:column; justify-content:flex-end;}
.zpm-hero-top{display:flex; align-items:flex-end; gap:10px;}
.zpm-avatar{position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--neon) center/cover; border:2.5px solid rgba(255,255,255,0.9); box-shadow:0 6px 18px rgba(0,0,0,0.38); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#fff;}
.zpm-avatar-badge{position:absolute; bottom:-2px; left:-2px; width:18px; height:18px; border-radius:50%; background:#39FF7A; display:flex; align-items:center; justify-content:center; border:2px solid #fff;}
.zpm-avatar-badge svg{width:9px; height:9px;}
.zpm-hero-name{flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:800; color:#fff;}
/* Real app renders this row inside a FittedBox — it scales as a unit to
   always fit on one line and never wraps. flex-wrap:wrap here was the bug:
   the long phone chip would drop to its own line and get clipped by
   .zpm-hero's overflow:hidden, silently hiding the role/rating chips above
   it. nowrap + shrinkable children is the closest CSS equivalent. */
.zpm-hero-chips{margin-top:9px; display:flex; align-items:center; gap:4px; flex-wrap:nowrap; max-width:100%; overflow:hidden;}
.zpm-chip{display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); font-size:8.5px; font-weight:700; color:#CFD6CC; white-space:nowrap; flex:0 1 auto; min-width:0;}
.zpm-chip-role{flex-shrink:0;}
.zpm-chip-phone{flex-shrink:1; overflow:hidden; text-overflow:ellipsis;}
.zpm-chip-role{background:rgba(57,255,122,0.18); border-color:rgba(57,255,122,0.4); color:#39FF7A;}
.zpm-chip-rating svg{width:11px; height:11px; color:#E0921F;}
.zpm-chip-rating b{font-size:10px; font-weight:700; color:#fff;}
.zpm-chip-rating span{font-size:9px; font-weight:500; color:#CBB086;}
.zpm-chip-phone{direction:ltr;}
.zpm-chip-phone svg{width:9px; height:9px; flex-shrink:0;}
.zpm-stats-row{flex:0 0 auto; margin-top:9px; display:flex; gap:8px;}
.zpm-stat-chip{flex:1; display:flex; align-items:center; gap:8px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:11px; padding:8px;}
.zpm-stat-chip-icon{flex:0 0 auto; width:26px; height:26px; border-radius:7px; background:rgba(23,217,100,0.12); display:flex; align-items:center; justify-content:center;}
.zpm-stat-chip-icon svg{width:13px; height:13px; color:var(--neon);}
.zpm-stat-chip-text{min-width:0;}
.zpm-stat-chip-text b{display:block; font-size:12.5px; font-weight:800; color:#15190F;}
.zpm-stat-chip-text span{display:block; font-size:8.5px; font-weight:600; color:#5B6459; white-space:nowrap;}
.zpm-cta{flex:0 0 auto; margin-top:14px; height:38px; border-radius:10px; background:var(--neon); color:#0A0D0A; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:800;}
.zpm-cta svg{width:15px; height:15px;}
.zpm-stats2{flex:0 0 auto; margin-top:14px; display:flex; gap:8px;}
.zpm-stat2{flex:1; min-width:0; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:10px; padding:10px;}
.zpm-stat2 b{display:block; font-size:18px; font-weight:800; color:#15190F; line-height:1.2;}
.zpm-stat2 span{display:block; margin-top:1px; font-size:9.5px; color:#5B6459;}
.zpm-list-title{flex:0 0 auto; margin-top:14px; margin-bottom:6px; font-size:12.5px; font-weight:700; color:#15190F;}
.zpm-order-card{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:10px; padding:11px;}
.zpm-order-card-title b{display:block; font-size:12.5px; font-weight:700; color:#15190F;}
.zpm-order-card-title span{display:block; margin-top:1px; font-size:9.5px; color:#5B6459;}
.zpm-status-pill{flex:0 0 auto; padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:700; white-space:nowrap;}
.zpm-status-warning{background:rgba(181,105,10,0.14); color:#B5690A;}
.zpm-map-status{flex:0 0 auto; margin-bottom:9px; align-self:center; padding:5px 12px; border-radius:999px; background:#FFFFFF; border:1px solid #E1E6DC; font-size:10px; font-weight:700; display:flex; align-items:center; gap:6px;}
.zpm-map-status .dot{width:6px; height:6px; border-radius:50%; background:#17D964;}
.zpm-map-wrap{flex:1 1 auto; position:relative; border-radius:14px; overflow:hidden; min-height:200px;}
.zpm-map-bg{position:absolute; inset:0; background:#EBE6D6;}
.zpm-map-block{position:absolute; background:rgba(180,195,165,0.55); border-radius:5px;}
.zpm-map-pin{position:absolute; width:19px; height:19px; color:#2B2F27; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.25)); z-index:2;}
.zpm-map-marker{position:absolute; width:16px; height:16px; border-radius:50%; background:#17D964; border:2.5px solid #fff; z-index:3;}
.zpm-map-marker:after{content:''; position:absolute; inset:-9px; border-radius:50%; background:rgba(23,217,100,0.28);}
.zpm-driver-card{flex:0 0 auto; margin-top:9px; display:flex; align-items:center; gap:9px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:13px; padding:9px 11px;}
.zpm-driver-card img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.zpm-driver-card .info{flex:1 1 auto; min-width:0;}
.zpm-driver-card .info b{display:block; font-size:11.5px; font-weight:700; color:#15190F;}
.zpm-driver-card .info span{display:block; margin-top:1px; font-size:9.5px; color:#5B6459;}
.zpm-driver-card .call-btn{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--neon); display:flex; align-items:center; justify-content:center;}
.zpm-driver-card .call-btn svg{width:14px; height:14px; color:#0A0D0A;}
.zpm-toggle{flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:rgba(23,217,100,0.1); font-size:11px; font-weight:700; color:#0BA34A; width:max-content;}
.zpm-toggle svg{width:10px; height:10px; color:var(--neon);}
.zpm-cancelled-label{flex:0 0 auto; margin-top:8px; text-align:center; font-size:9.5px; color:#5B6459;}
.zpm-navbar{flex:0 0 auto; background:#FFFFFF; box-shadow:0 -1px 0 #E1E6DC; padding-top:8px;}
.zpm-navrow{display:flex; justify-content:space-around;}
.zpm-navitem{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;}
.zpm-navitem-icon{width:40px; height:24px; border-radius:12px; display:flex; align-items:center; justify-content:center;}
.zpm-navitem-icon svg{width:16px; height:16px; color:#5B6459;}
.zpm-navitem.active .zpm-navitem-icon{background:rgba(23,217,100,0.18);}
.zpm-navitem.active .zpm-navitem-icon svg{color:var(--neon);}
.zpm-navitem span{font-size:8px; font-weight:500; color:#5B6459;}
.zpm-navitem.active span{font-size:9px; font-weight:700; color:#15190F;}
.zpm-navitem.bell .zpm-navitem-icon svg{color:#39FF7A;}
.zpm-navbadge{position:absolute; top:2px; inset-inline-end:10px; background:#C4283C; color:#fff; font-size:7px; font-weight:700; border-radius:999px; padding:0 3px; min-width:11px; height:11px; line-height:11px; text-align:center;}
.zpm-homebar{width:100px; height:4px; border-radius:2px; background:#15190F; opacity:.35; margin:6px auto;}
.zpm-topbar{flex:0 0 auto; text-align:center; font-size:13px; font-weight:700; color:#15190F; padding:2px 0 12px;}
.zpm-search-card{flex:0 0 auto; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:14px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-bottom:12px;}
.zpm-spinner{width:30px; height:30px; border-radius:50%; border:3px solid #E1E6DC; border-top-color:var(--neon); animation:zpmspin 1s linear infinite;}
@keyframes zpmspin{to{transform:rotate(360deg);}}
.zpm-search-title{font-size:11.5px; font-weight:700; color:#15190F;}
.zpm-search-sub{font-size:9.5px; color:#5B6459;}
.zpm-info-card{flex:0 0 auto; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:7px;}
.zpm-info-row{display:flex; justify-content:space-between; align-items:center; font-size:10.5px;}
.zpm-info-row span{color:#5B6459;}
.zpm-info-row b{color:#15190F; font-weight:700;}
.zpm-fee-hero{flex:0 0 auto; background:linear-gradient(135deg,var(--neon),#0BA34A); border-radius:16px; padding:16px 12px; text-align:center; box-shadow:0 10px 22px rgba(23,217,100,.28);}
.zpm-fee-hero span{display:block; font-size:10.5px; font-weight:700; color:#0A0D0A;}
.zpm-fee-hero b{display:block; margin-top:2px; font-size:28px; font-weight:900; color:#0A0D0A; line-height:1.1;}
.zpm-merchant-card{flex:0 0 auto; margin-top:12px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:10px; padding:12px;}
.zpm-merchant-head{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.zpm-merchant-head img{width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.zpm-merchant-head b{font-size:12.5px; font-weight:700; color:#15190F;}
.zpm-detail-row{display:flex; justify-content:space-between; gap:8px; font-size:10.5px; padding:4px 0;}
.zpm-detail-row span{flex:0 0 auto; width:74px; font-size:9px; font-weight:600; color:#5B6459;}
.zpm-detail-row b{font-weight:400; color:#15190F; text-align:end;}
.zpm-dropoff-card{flex:0 0 auto; margin-top:9px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:10px; padding:12px;}
.zpm-dropoff-title{font-size:11px; font-weight:700; color:#15190F; margin-bottom:6px;}
.zpm-dropoff-row{display:flex; align-items:center; gap:6px; font-size:10.5px; color:#15190F;}
.zpm-dropoff-row svg{width:13px; height:13px; color:#5B6459; flex:0 0 auto;}
.zpm-nav-btn{flex:0 0 auto; margin-top:9px; height:38px; border-radius:10px; border:1px solid #E1E6DC; display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:700; color:#15190F;}
.zpm-nav-btn svg{width:14px; height:14px;}
.zpm-accept-row{flex:1 1 auto; display:flex; align-items:flex-end; gap:9px; margin-top:12px; padding-bottom:3px;}
.zpm-btn-reject, .zpm-btn-accept{flex:1; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;}
.zpm-btn-reject{border:1px solid #E1E6DC; color:#15190F;}
.zpm-btn-accept{background:var(--neon); color:#0A0D0A;}
.zpm-role-card{display:flex; align-items:center; gap:11px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:14px; padding:12px 13px; margin-bottom:9px; text-align:right;}
.zpm-role-card svg{flex:0 0 auto; width:20px; height:20px; color:var(--neon);}
.zpm-role-card div{flex:1 1 auto; min-width:0; text-align:right;}
.zpm-role-card b{display:block; font-size:12px; font-weight:800; color:#15190F; line-height:1.3;}
.zpm-role-card span{display:block; margin-top:3px; font-size:9.5px; color:#5B6459; line-height:1.45;}
.zpm-skip{align-self:flex-start; display:flex; align-items:center; gap:2px; font-size:10.5px; font-weight:700; color:#5B6459; margin-bottom:6px;}
.zpm-illustration{flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:8px 0 12px;}
.zpm-illustration img{height:92px; width:auto;}
.zpm-auth-title{font-size:16px; font-weight:900; color:#15190F; text-align:center;}
.zpm-auth-sub{font-size:10.5px; color:#5B6459; text-align:center; margin:3px 0 16px;}
.zpm-security-note{display:flex; align-items:center; justify-content:center; gap:5px; font-size:9px; color:#5B6459; margin-top:8px;}
.zpm-security-note svg{width:11px; height:11px; color:#98A392;}
.zpm-continue-btn{flex:0 0 auto; margin-top:10px; height:42px; border-radius:11px; background:var(--neon); color:#0A0D0A; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; font-weight:800;}
.zpm-continue-btn svg{width:14px; height:14px;}

/* ---- Login screen (ported from login_page.dart) ---- */
.zpm-login-hero{flex:0 0 auto; display:flex; justify-content:center; padding:8px 0 2px;}
.zpm-login-hero img{height:118px; width:auto;}
.zpm-login-tagline{flex:0 0 auto; text-align:center; font-size:10px; font-weight:600; color:#5B6459;}
.zpm-login-title{flex:0 0 auto; text-align:center; font-size:17px; font-weight:800; color:#15190F; margin-top:16px;}
.zpm-method-toggle{flex:0 0 auto; display:flex; gap:2px; background:#F1F4EF; border:1px solid #E1E6DC; border-radius:999px; padding:3px; margin-top:12px;}
.zpm-method-btn{flex:1; text-align:center; padding:7px 0; border-radius:999px; font-size:10.5px; font-weight:700; color:#5B6459;}
.zpm-method-btn.active{background:var(--neon); color:#06170D;}
.zpm-login-card{flex:0 0 auto; margin-top:12px; background:#FFFFFF; border:1px solid #E1E6DC; border-radius:16px; padding:14px;}
.zpm-field-label{font-size:9.5px; font-weight:700; color:#5B6459; margin-bottom:5px; display:block;}
.zpm-field-input{display:flex; align-items:center; gap:6px; background:#F1F4EF; border:1px solid #E1E6DC; border-radius:10px; padding:10px 12px; direction:ltr;}
.zpm-field-prefix{font-size:11.5px; font-weight:700; color:#5B6459;}
.zpm-field-value{font-size:11.5px; font-weight:600; color:#9AA392;}
.zpm-login-btn{margin-top:14px; height:40px; border-radius:11px; background:linear-gradient(135deg,var(--neon),#0BA34A); color:#0A0D0A; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; box-shadow:0 8px 18px rgba(23,217,100,.28);}
.zpm-login-signup-row{flex:0 0 auto; text-align:center; margin-top:14px; font-size:10px; color:#5B6459;}
.zpm-login-signup-row b{color:#15190F; text-decoration:underline; font-weight:800;}
.zpm-trust-strip{flex:0 0 auto; display:flex; align-items:stretch; justify-content:center; margin-top:18px; padding-top:14px; border-top:1px solid #E1E6DC;}
.zpm-trust-item{flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;}
.zpm-trust-item + .zpm-trust-item{border-inline-start:1px solid #E1E6DC;}
.zpm-trust-num{font-size:14px; font-weight:800; color:#39FF7A; font-variant-numeric:tabular-nums;}
.zpm-trust-lbl{font-size:8px; font-weight:700; color:#5B6459;}
.zpm-trust-bolt{width:16px; height:16px; color:#39FF7A; animation:zpmBoltPulse 1.4s ease-in-out infinite;}
@keyframes zpmBoltPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.2);}}

/* ---- Merchant home: secondary square action + icon-badge stat tiles + accent order card ---- */
.zpm-cta-row{flex:0 0 auto; display:flex; gap:8px; margin-top:14px;}
.zpm-cta-row .zpm-cta{flex:1; margin-top:0;}
.zpm-cta-square{flex:0 0 auto; width:38px; height:38px; border-radius:10px; border:1.5px solid var(--neon); color:var(--neon); display:flex; align-items:center; justify-content:center;}
.zpm-cta-square svg{width:17px; height:17px;}
.zpm-stat2-icon{width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.zpm-stat2-icon svg{width:13px; height:13px;}
.zpm-stat2.accent-green .zpm-stat2-icon{background:rgba(23,217,100,.14); color:var(--neon);}
.zpm-stat2.accent-amber .zpm-stat2-icon{background:rgba(224,146,31,.16); color:#E0921F;}
.zpm-order-avatar{flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:rgba(23,217,100,.12); display:flex; align-items:center; justify-content:center; color:var(--neon);}
.zpm-order-avatar svg{width:16px; height:16px;}
.zpm-order-card{position:relative; overflow:hidden;}
.zpm-order-card .accent-bar{position:absolute; inset-inline-end:0; top:0; bottom:0; width:3px; background:#B5690A;}

/* ---- Searching for driver: status badge + pulsing rings (PulsingSearchIndicator) ---- */
.zpm-status-badge-top{flex:0 0 auto; align-self:center; padding:6px 14px; border-radius:999px; font-size:10.5px; font-weight:800; background:rgba(181,105,10,.14); color:#B5690A; margin-bottom:12px;}
.zpm-pulse-wrap{flex:0 0 auto; position:relative; width:96px; height:96px; margin:2px auto 12px; display:flex; align-items:center; justify-content:center;}
.zpm-pulse-ring{position:absolute; width:46px; height:46px; border:2px solid var(--neon); border-radius:50%; opacity:.5; animation:zpmPulseRing 1.8s ease-out infinite;}
.zpm-pulse-ring:nth-child(2){animation-delay:.6s;}
.zpm-pulse-ring:nth-child(3){animation-delay:1.2s;}
@keyframes zpmPulseRing{0%{width:46px; height:46px; opacity:.55;} 100%{width:96px; height:96px; opacity:0;}}
.zpm-pulse-core{position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:rgba(23,217,100,.12); display:flex; align-items:center; justify-content:center;}
.zpm-pulse-core svg{width:19px; height:19px; color:var(--neon);}

/* ================= TRACKING (new section) ================= */
.tracking{background:var(--bg-dark); color:var(--paper); padding:64px 0;}
.tracking-inner{display:grid; grid-template-columns:1fr; gap:40px;}
@media (min-width:900px){ .tracking-inner{grid-template-columns:.85fr 1.15fr; align-items:center;} }
.tracking-copy h2{margin:16px 0 14px;}
.tracking-copy p{color:var(--paper-soft); margin-bottom:24px;}
.tracking-feats{list-style:none; display:flex; flex-direction:column; gap:11px;}
.tracking-feats li{display:flex; gap:10px; align-items:center; font-size:.88rem; font-weight:700; color:var(--paper-soft);}
.tracking-feats li:before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.map-card{position:relative; border-radius:20px; overflow:hidden; height:400px; background:var(--bg-dark-3); border:1px solid var(--border-d);}
.map-card .map-bg{position:absolute; inset:0; background:linear-gradient(160deg, #182018 0%, #10140F 100%);}
.map-card .map-bg .rd{position:absolute; background:rgba(238,240,232,0.06);}
.map-card .map-block{position:absolute; background:rgba(238,240,232,0.05); border:1px solid rgba(238,240,232,0.07); border-radius:8px;}
.map-card svg{position:absolute; inset:0; width:100%; height:100%;}
.route-path{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-dasharray:6 8; opacity:.75;}
.map-dot{position:absolute; width:14px; height:14px; margin:-7px; border-radius:50%; z-index:2;}
.map-dot-start{background:var(--accent);}
.map-dot-end{background:var(--paper); opacity:.8;}
.map-dot-driver{width:18px; height:18px; margin:-9px; background:var(--neon); z-index:3; filter:drop-shadow(0 4px 10px rgba(23,217,100,0.45));}
.eta-card{position:absolute; bottom:20px; right:20px; left:20px; max-width:280px; background:rgba(15,20,14,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--border-d2); border-radius:15px; padding:15px; display:flex; align-items:center; gap:12px; box-shadow:0 22px 46px rgba(0,0,0,0.36);}
.eta-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--neon),#0BA34A); flex-shrink:0;}
.eta-name{font-size:.84rem; font-weight:800;}
.eta-sub{font-size:.72rem; color:var(--paper-soft); font-weight:600;}
.eta-meta{display:flex; gap:14px; margin-top:14px;}
.eta-meta-item{font-size:.68rem; color:var(--paper-faint); font-weight:700;}
.eta-meta-item b{display:block; color:var(--paper); font-size:.86rem; margin-bottom:1px;}

/* ================= HOW IT WORKS ================= */
.how{background:var(--bg-light); padding:64px 0;}
.how-head{max-width:620px; margin-bottom:56px;}
.how-head h2{margin:16px 0 6px;}
.how-track{position:relative;}
.how-track:before{content:''; position:absolute; top:34px; right:8%; left:8%; height:2px; background:linear-gradient(to left, var(--border-l2), var(--neon), var(--border-l2)); display:none;}
@media (min-width:900px){ .how-track:before{display:block;} }
.how-steps-grid{display:grid; grid-template-columns:1fr; gap:36px; position:relative;}
@media (min-width:900px){ .how-steps-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;} }
.how-step{text-align:center;}
.how-step .hs-dot{width:68px; height:68px; border-radius:50%; background:var(--bg-light-2); border:2px solid var(--border-l2); display:grid; place-items:center; margin:0 auto 16px; font-weight:900; font-size:1.3rem; position:relative; z-index:2; transition:border-color .4s, background .4s, color .4s, transform .4s var(--ease); color:var(--ink);}
.how-step.in .hs-dot{border-color:var(--neon); background:var(--neon); color:var(--ink); transform:scale(1.08);}
.how-step h4{font-size:1.05rem; font-weight:900; margin-bottom:6px;}
.how-step p{color:var(--ink-soft); font-size:.86rem;}

/* ================= AUDIENCE ================= */
.audience{background:var(--bg-dark-2); color:var(--paper); padding:64px 0;}
.audience-head{max-width:600px; margin:0 auto 48px; text-align:center;}
.audience-head h2{margin:16px 0;}
.audience-tabs{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
.audience-tab{padding:11px 22px; border-radius:100px; font-weight:800; font-size:.88rem; border:1.5px solid var(--border-d2); color:var(--paper-soft); transition:all .35s var(--ease); background:transparent;}
.audience-tab.active{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.audience-stage{position:relative; border-radius:20px; border:1px solid var(--border-d); padding:40px; min-height:340px; overflow:hidden; background:linear-gradient(150deg, rgba(77,124,254,0.07), var(--bg-dark-3));}
.audience-panel{display:none; animation:aIn .55s var(--ease);}
.audience-panel.active{display:grid; grid-template-columns:1fr; gap:32px; align-items:center;}
@media (min-width:860px){ .audience-panel.active{grid-template-columns:1.1fr .9fr;} }
@keyframes aIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.audience-panel h3{font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:900; margin-bottom:12px;}
.audience-panel > div > p{color:var(--paper-soft); margin-bottom:22px; font-size:.95rem;}
.audience-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:26px;}
.audience-list li{display:flex; align-items:flex-start; gap:11px; font-size:.88rem; font-weight:600; color:var(--paper-soft);}
.audience-list .chk{color:var(--neon); font-weight:900; flex-shrink:0;}
.audience-visual{border-radius:18px; overflow:hidden; background:rgba(238,240,232,0.04); border:1px solid var(--border-d); display:flex; align-items:center; justify-content:center; padding:20px; min-height:220px;}
.audience-visual img{max-height:220px; width:auto; margin:0 auto;}

/* ================= WHY (BENTO) ================= */
.why{background:var(--bg-light-2); padding:64px 0;}
.why-head{max-width:760px; margin:0 auto 48px; text-align:center;}
.why-head h2{margin:16px 0;}
.bento{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:760px){ .bento{grid-template-columns:repeat(3,1fr);} }
.bento-item{background:var(--bg-light); border:1px solid var(--border-l); border-radius:18px; padding:26px; display:flex; align-items:flex-start; gap:16px; position:relative; overflow:hidden;}
.bento-item.wide{grid-column:span 1;}
@media (min-width:760px){ .bento-item.wide{grid-column:span 2;} }
.bento-item.accent{background:var(--ink); color:var(--paper); border-color:transparent;}
.bento-item.accent p{color:var(--paper-soft);}
.bi-icon{width:44px; height:44px; border-radius:12px; background:var(--ink); color:var(--neon); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.bento-item.accent .bi-icon{width:auto; height:auto; background:none; color:var(--neon);}
.bento-item.flag .bi-icon{width:auto; height:auto; background:none;}
.bento-item h3{font-size:.98rem; font-weight:900; margin-bottom:6px;}
.bento-item p{color:var(--ink-soft); font-size:.85rem;}

/* ================= STATS ================= */
.stats-section{background:var(--bg-light); padding:0 0 64px;}
.stats-band{ background:#0A0D0A; border-radius:28px; padding:48px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; position:relative; overflow:hidden; }
.stats-band::before{ content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, #17D964, transparent 70%); opacity:.2; top:-220px; inset-inline-start:-120px; }
.stat{text-align:center; position:relative; z-index:1;}
.stat .num{font-size:clamp(2.2rem,4vw,3.2rem); font-weight:900; color:#17D964; font-variant-numeric:tabular-nums;}
.stat .lbl{color:rgba(233,239,230,0.7); font-weight:700; font-size:.9rem; margin-top:6px;}
@media (max-width:980px){ .stats-band{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px;} }
@media (max-width:620px){ .stats-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:32px 16px;} }

/* ================= TRUST ================= */
.trust{background:var(--bg-light); padding:64px 0;}
.trust-panel{background:var(--ink); color:var(--paper); border-radius:28px; padding:34px 22px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr; gap:28px;}
@media (min-width:900px){ .trust-panel{grid-template-columns:1fr 1.15fr; padding:64px; gap:56px;} }
.trust-panel:before{content:''; position:absolute; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, var(--accent), transparent 70%); opacity:.14; bottom:-220px; inset-inline-end:-140px;}
.trust-panel-head{position:relative; z-index:1;}
.trust-panel-head h2{margin:14px 0 12px; line-height:1.35; font-size:clamp(1.05rem,4.4vw,1.7rem);}
.trust-panel-head p{color:var(--paper-soft); font-size:.88rem; line-height:1.7;}
.trust-list{position:relative; z-index:1; display:flex; flex-direction:column;}
.trust-row{display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-top:1px solid var(--border-d);}
.trust-row:first-child{border-top:none; padding-top:0;}
.trust-row .ic{flex-shrink:0; width:38px; height:38px; border-radius:11px; background:rgba(238,240,232,0.07); color:var(--neon); display:flex; align-items:center; justify-content:center;}
.trust-row > div{min-width:0;}
.trust-row h4{font-size:.95rem; font-weight:900; margin-bottom:5px;}
.trust-row p{color:var(--paper-soft); font-size:.82rem; line-height:1.65;}
@media (min-width:900px){ .trust-panel-head p{font-size:.95rem;} .trust-row{gap:18px; padding:22px 0;} .trust-row .ic{width:44px; height:44px; border-radius:12px;} .trust-row h4{font-size:1rem;} .trust-row p{font-size:.86rem;} }

/* ================= FAQ ================= */
.faq{background:var(--bg-light-2); padding:64px 0;}
.faq-head{max-width:600px; margin:0 auto 44px; text-align:center;}
.faq-head h2{margin:16px 0 14px;}
.faq-list{max-width:800px; margin:0 auto; border-top:1px solid var(--border-l2);}
.faq-item{border-bottom:1px solid var(--border-l2);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 4px; font-size:.96rem; font-weight:800; text-align:right;}
.faq-q .plus{font-size:1.25rem; font-weight:300; color:var(--ink-soft); transition:transform .35s var(--ease); flex-shrink:0; margin-left:16px;}
.faq-item.open .plus{transform:rotate(45deg); color:var(--accent-deep);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.faq-item.open .faq-a{max-height:260px;}
.faq-a-inner{padding:0 4px 22px; color:var(--ink-soft); font-size:.88rem; max-width:640px;}

/* ================= CTA / DOWNLOAD ================= */
.final-cta{background:var(--bg-dark); color:var(--paper); padding:80px 0; position:relative; overflow:hidden;}
.final-cta:before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 55% at 50% 0%, rgba(23,217,100,0.1), transparent 60%);}
.fc-inner{position:relative; text-align:center; max-width:680px; margin:0 auto;}
.fc-inner h2{font-size:clamp(2rem,5.2vw,3.4rem); font-weight:900; line-height:1.14; margin:18px 0 14px; white-space:normal;}
.fc-inner p{color:var(--paper-soft); font-size:1.02rem; margin-bottom:36px;}
.fc-actions{display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin-bottom:14px;}
.fc-actions .btn{height:48px; padding:0 26px;}
.fc-stores{display:flex; align-items:center; gap:12px;}
.fc-stores img, .fc-stores svg{height:48px; width:auto; display:block; border-radius:8px;}
.fc-stores .store-badge-link{display:block; transition:transform .3s var(--ease);}
.fc-stores .store-badge-link:hover{transform:translateY(-3px);}
.fc-stores .soon-wrap{position:relative; display:flex; opacity:.55; pointer-events:none;}
.fc-stores .soon-pill{position:absolute; inset:0; margin:auto; width:max-content; height:max-content; background:var(--ink); color:var(--paper); font-size:.62rem; font-weight:800; padding:4px 12px; border-radius:100px;}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; bottom:28px; left:28px; z-index:520;
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(145deg, var(--neon-bright) 0%, var(--neon) 45%, var(--neon-deep) 100%);
  color:#06170D; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(23,217,100,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), box-shadow .3s var(--ease);
  will-change:transform;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.back-to-top:hover{transform:translateY(-2px) scale(1.06); box-shadow:0 12px 28px rgba(23,217,100,0.55), 0 0 0 1px rgba(255,255,255,0.2) inset;}
@media (max-width:640px){ .back-to-top{width:38px; height:38px; bottom:22px; left:22px;} }

/* ---------- WhatsApp FAB + modal ---------- */
.wa-fab{ position:fixed; bottom:28px; right:28px; z-index:520; width:62px; height:62px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,0.45); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.wa-fab::before{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,0.55); animation:waPulse 2.6s ease-out infinite; }
.wa-fab:hover{transform:scale(1.08) translateY(-2px); box-shadow:0 16px 40px rgba(37,211,102,0.55);}
@keyframes waPulse{ to{box-shadow:0 0 0 18px rgba(37,211,102,0);} }
@media (prefers-reduced-motion: reduce){ .wa-fab::before{animation:none;} }
.wa-modal-overlay{ position:fixed; inset:0; z-index:560; background:rgba(10,13,10,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease-soft); }
.wa-modal-overlay.open{opacity:1; pointer-events:auto;}
.wa-modal{ background:var(--bg-dark-2); color:var(--paper); border:1px solid var(--border-d); border-radius:28px; padding:40px 32px; max-width:380px; width:100%; text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,0.5); transform:scale(.85) translateY(20px); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease); }
.wa-modal-overlay.open .wa-modal{transform:none; opacity:1;}
.wa-modal h3{font-size:1.15rem; font-weight:900;}
.wa-modal p{color:var(--paper-soft); font-size:.9rem;}
.wa-modal-icon{width:64px; height:64px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; margin:0 auto 18px;}
.wa-close{ position:absolute; top:14px; inset-inline-start:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--border-d2); color:var(--paper-soft); display:grid; place-items:center; transition:all .3s var(--ease); }
.wa-close:hover{background:var(--danger); color:#fff; border-color:var(--danger); transform:rotate(90deg);}
.wa-number{display:block; margin-top:14px; font-size:.82rem; color:var(--paper-soft); direction:ltr; font-variant-numeric:tabular-nums;}

/* ---------- Footer social ---------- */
.footer-social{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.footer-social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--border-d); display:grid; place-items:center; color:var(--paper-soft); transition:all .3s var(--ease);}
.footer-social a:hover{background:var(--neon); border-color:var(--neon); color:#0A0D0A; transform:translateY(-3px);}

/* ================= FOOTER ================= */
.footer{background:var(--bg-dark); color:var(--paper-soft); padding:60px 0 26px; border-top:1px solid var(--border-d);}
.footer-grid{display:grid; grid-template-columns:1fr; gap:32px 20px; margin-bottom:44px;}
@media (max-width:799px){ .footer-grid{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1 / -1;} }
@media (min-width:800px){ .footer-grid{grid-template-columns:1.3fr .8fr .8fr .8fr;} }
.footer-brand{max-width:270px;}
.footer-logo{display:flex; align-items:center; gap:8px; font-weight:900; font-size:1.1rem; color:var(--paper); margin-bottom:13px;}
.footer-logo img{width:28px; height:28px; border-radius:7px;}
.footer-brand p{font-size:.84rem; line-height:1.7;}
.footer-col h5{font-size:.78rem; font-weight:800; color:var(--paper); margin-bottom:15px;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:.84rem; transition:color .25s;}
.footer-col a:hover{color:var(--paper);}
.footer-credit{display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center; padding-top:16px; border-top:1px solid var(--border-d); font-size:.86rem; color:var(--paper-soft); line-height:1.3;}
.footer-credit a{color:var(--neon-bright); font-weight:800; transition:color .25s;}
.footer-credit a:hover{color:var(--neon);}
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding-top:6px; border-top:none; font-size:.78rem;}
.footer-bottom-center{flex-direction:column; align-items:center; justify-content:center; text-align:center;}

/* ---------- CR (commercial registration) trust badge ----------
   Reused verbatim (same class name/markup) across index.html,
   download.html and the legal pages so it reads as one consistent
   trust mark site-wide rather than a one-off addition. */
.cr-badge{display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:700; color:var(--paper-soft); background:rgba(23,217,100,0.08); border:1px solid rgba(23,217,100,0.22); padding:6px 14px; border-radius:999px; margin:8px 0 12px;}
.cr-badge svg{color:var(--neon-bright); flex-shrink:0;}
.cr-badge b{color:var(--paper); font-weight:800;}
.footer-bottom-center .cr-badge{margin:4px 0 0; color:var(--paper-faint);}

/* ---------- Coming Soon gate (temporary — remove with its HTML block and
   the initComingSoon IIFE in script-v2.js when asked to re-enable the site) ---------- */
.zn-soon-overlay{
  position:fixed; inset:0; z-index:850; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(120% 100% at 50% 15%, rgba(23,217,100,0.14), transparent 60%), rgba(6,10,7,0.94);
  backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease-soft), visibility .4s var(--ease-soft);
}
.zn-soon-overlay.show{opacity:1; visibility:visible;}
.zn-soon-card{
  max-width:420px; width:100%; text-align:center;
  background:var(--bg-dark-2); border:1px solid var(--border-d2); border-radius:24px;
  padding:34px 32px; box-shadow:0 40px 90px -30px rgba(0,0,0,0.6);
}
.zn-soon-logo{margin:0 auto 12px; display:block; width:64px; height:64px; object-fit:contain; border-radius:16px;}
.zn-soon-title{font-size:1.7rem; font-weight:900; color:var(--paper); margin-bottom:4px;}
.zn-soon-sub{font-size:.95rem; color:var(--paper-soft); margin-bottom:10px;}
.zn-soon-cr{margin:0 auto 16px;}
.zn-soon-card .btn{width:100%; border-radius:999px;}
.zn-soon-en{opacity:.85; margin-inline-start:6px;}

/* ---------- Temporarily locked CTAs (app download / merchant-driver signup) ----------
   Reversible: hrefs stay untouched, only the click is blocked (script-v2.js
   initLockedCtas). To re-enable, remove the .zn-locked class from index.html. */
.zn-locked{opacity:.45; cursor:not-allowed; filter:grayscale(.3);}
.zn-locked:hover{transform:none !important; box-shadow:none !important;}

/* ================= SPLASH (ported verbatim from style.css — DO NOT modify) ================= */
:root { --zi-s1: 150ms; --zi-s2: 250ms; --zi-s3: 350ms; --zi-s4: 200ms; --zi-s5: 150ms; --zi-s6: 150ms; }
.zoon-intro{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; background: radial-gradient(120% 90% at 50% 38%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%), radial-gradient(85% 65% at 50% 46%, var(--neon-bright) 0%, var(--neon) 46%, #0B7A3C 100%); transition:opacity .5s var(--ease-soft), visibility .5s var(--ease-soft); }
.zoon-intro.zi-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.zi-glow{ position:absolute; inset:0; margin:auto; width:55vmin; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 65%); filter:blur(20px); opacity:0; animation:zi-glow-breathe 1.4s ease-out forwards; }
@keyframes zi-glow-breathe{ 0%{opacity:0; transform:scale(.85);} 45%{opacity:1; transform:scale(1.04);} 100%{opacity:.75; transform:scale(1);} }
.zi-streak{ position:absolute; top:50%; left:-40%; width:56%; height:5px; border-radius:3px; transform:translateY(-50%); background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 55%, #fff 100%); box-shadow:0 0 18px 4px rgba(255,255,255,.85), 0 0 40px 10px rgba(255,255,255,.35); opacity:0; animation:zi-streak-in var(--zi-s2) cubic-bezier(.16,.9,.28,1) var(--zi-s1) forwards; }
@keyframes zi-streak-in{ 0%{opacity:0; transform:translateY(-50%) scaleX(.4); filter:blur(6px);} 12%{opacity:1;} 70%{opacity:1; transform:translateY(-50%) translateX(230%) scaleX(1); filter:blur(2px);} 100%{opacity:0; transform:translateY(-50%) translateX(300%) scaleX(.7); filter:blur(0);} }
.zi-logo{width:min(48vw,260px); overflow:visible; position:relative; z-index:1;}
.zi-arabic{ fill:#fff; opacity:0; filter:blur(10px); transform:translateY(14px); animation:zi-ar-reveal var(--zi-s5) cubic-bezier(.2,.85,.32,1) calc(var(--zi-s1) + var(--zi-s2) + var(--zi-s3) + var(--zi-s4)) forwards; }
@keyframes zi-ar-reveal{ to{opacity:1; filter:blur(0); transform:translateY(0);} }
.zi-z, .zi-n{fill:#fff; opacity:0;}
.zi-z{ transform:translateX(46px); animation:zi-letter-in var(--zi-s4) cubic-bezier(.22,.9,.3,1) calc(var(--zi-s1) + var(--zi-s2) + var(--zi-s3)) forwards; }
.zi-n{ transform:translateX(-46px); animation:zi-letter-in var(--zi-s4) cubic-bezier(.22,.9,.3,1) calc(var(--zi-s1) + var(--zi-s2) + var(--zi-s3) + 60ms) forwards; }
@keyframes zi-letter-in{ to{opacity:1; transform:translateX(0);} }
.zi-infinity{ fill:#fff; fill-opacity:0; stroke:#fff; stroke-width:5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 26px rgba(255,255,255,.5)); stroke-dasharray:var(--zi-inf-len); stroke-dashoffset:var(--zi-inf-len); animation:zi-draw-inf var(--zi-s3) cubic-bezier(.3,.85,.25,1) var(--zi-s1) forwards, zi-solidify-inf 180ms ease-out calc(var(--zi-s1) + var(--zi-s3) - 130ms) forwards; }
@keyframes zi-draw-inf{ to{stroke-dashoffset:0;} }
@keyframes zi-solidify-inf{ to{fill-opacity:1; stroke-opacity:.4;} }
.zi-infinity-head{ fill:#fff; opacity:0; filter:drop-shadow(0 0 8px rgba(255,255,255,1)); animation:zi-head-travel var(--zi-s3) cubic-bezier(.3,.85,.25,1) var(--zi-s1) forwards, zi-head-fade var(--zi-s3) linear var(--zi-s1) forwards; }
@keyframes zi-head-travel{ from{offset-distance:0%;} to{offset-distance:100%;} }
@keyframes zi-head-fade{ 0%{opacity:1;} 92%{opacity:1;} 100%{opacity:0;} }
.zi-sweep{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(48vw,260px); height:min(48vw,260px); max-height:34vh; overflow:hidden; pointer-events:none; }
.zi-sweep::after{ content:''; position:absolute; top:-20%; bottom:-20%; width:38%; left:-45%; background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 66%); mix-blend-mode:screen; animation:zi-sweep-across var(--zi-s6) ease-in-out calc(var(--zi-s1) + var(--zi-s2) + var(--zi-s3) + var(--zi-s4) + var(--zi-s5)) forwards; }
@keyframes zi-sweep-across{ from{transform:translateX(0); opacity:0;} 15%{opacity:1;} 85%{opacity:1;} to{transform:translateX(330%); opacity:0;} }
@media (prefers-reduced-motion: reduce){ .zi-glow, .zi-streak, .zi-arabic, .zi-z, .zi-n, .zi-infinity, .zi-infinity-head, .zi-sweep::after{ animation-duration:1ms !important; animation-delay:0ms !important; } }

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  .nav-links{display:none;} .nav-burger{display:flex;}
  .hero{padding-top:100px;}
  .about-section,.features-section,.showcase,.tracking,.how,.audience,.why,.trust,.faq{padding:56px 0;}
  .final-cta{padding:76px 0;}
}