/* =====================================================================
   ZOON — download.html
   A single, self-contained "get the app" page. Loads style-v2.css first
   for shared tokens/reset/.btn/.reveal, this file only adds page-specific
   layout. One fixed dark look (no light sections) — deliberately distinct
   from index.html so it reads as its own destination when shared as a link.
   ===================================================================== */

/* style-v2.css hardcodes body{direction:rtl} for index.html's RTL-only
   design — this page toggles languages at runtime, so the html[dir]
   attribute (set by download.js) must be able to override it. */
body{background:var(--bg-dark); min-height:100vh; position:relative;}
html[dir="ltr"] body{direction:ltr;}

/* ---------- Ambient background ---------- */
.dl-glow{position:fixed; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;}
.dl-glow-a{width:560px; height:560px; background:radial-gradient(circle, var(--neon) 0%, transparent 70%); opacity:.16; top:-180px; inset-inline-end:-160px;}
.dl-glow-b{width:480px; height:480px; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity:.1; bottom:-160px; inset-inline-start:-140px;}
.dl-grid-texture{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(238,240,232,0.06) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}

/* ---------- Header ---------- */
.dl-header{position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; max-width:640px; margin:0 auto; padding:26px 24px 0;}
.dl-back{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; color:var(--paper-soft); transition:color .25s var(--ease); justify-self:start;}
html[dir="rtl"] .dl-back svg{transform:rotate(180deg);}
.dl-back:hover{color:var(--paper);}
.dl-logo-mark{height:26px; width:auto; justify-self:center;}
.dl-lang-toggle{justify-self:end; font-size:.78rem; font-weight:800; color:var(--paper-soft); border:1px solid var(--border-d); padding:7px 14px; border-radius:99px; transition:color .25s var(--ease), border-color .25s var(--ease);}
.dl-lang-toggle:hover{color:var(--paper); border-color:var(--border-d2);}

/* ---------- Main ---------- */
.dl-main{position:relative; z-index:2; max-width:640px; margin:0 auto; padding:44px 24px 8px;}

.dl-hero{text-align:center;}
.dl-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; color:var(--paper-soft); background:rgba(238,240,232,0.06); border:1px solid var(--border-d); padding:7px 16px; border-radius:99px;}
.dl-eyebrow b{color:var(--neon-bright); font-weight:800;}
.dl-hero h1{margin-top:22px; font-size:clamp(1.9rem,6vw,2.6rem); font-weight:900; line-height:1.18; color:var(--paper);}
.dl-hero h1 .accent{color:var(--neon);}
.dl-sub{margin-top:14px; color:var(--paper-soft); font-size:1rem; line-height:1.7; max-width:440px; margin-inline:auto;}

.dl-chips{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px;}
.dl-chip{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; color:var(--paper-soft); border:1px solid var(--border-d); padding:7px 13px; border-radius:99px;}
.dl-chip svg{color:var(--neon); flex-shrink:0;}

/* ---------- Store cards ---------- */
.dl-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
.dl-card{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  background:linear-gradient(180deg, rgba(238,240,232,0.05) 0%, rgba(238,240,232,0.02) 100%);
  border:1px solid var(--border-d); border-radius:22px; padding:26px 18px 22px;
  text-align:center; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.dl-card:hover{transform:translateY(-4px); border-color:var(--border-d2); background:linear-gradient(180deg, rgba(238,240,232,0.08) 0%, rgba(238,240,232,0.03) 100%);}
.dl-card-top{display:flex; flex-direction:column; align-items:center; gap:10px;}
.dl-card-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; box-shadow:0 8px 20px -8px rgba(0,0,0,0.5);}
.dl-card-icon-android{background:linear-gradient(135deg,#0FE87A,#17D964); color:#08110B;}
.dl-card-icon-ios{background:var(--paper); color:var(--ink);}
.dl-card-titles{display:flex; flex-direction:column; gap:2px;}
.dl-card-kicker{font-size:.7rem; font-weight:700; color:var(--paper-faint);}
.dl-card-name{font-size:1.05rem; font-weight:800; color:var(--paper);}

.dl-qr-wrap{padding:10px; background:var(--paper); border-radius:16px; box-shadow:0 10px 26px -12px rgba(0,0,0,0.6);}
.dl-qr-wrap img{width:100px; height:100px; display:block; border-radius:4px;}

.dl-card-cta{width:100%; padding:12px 10px; font-size:.8rem; gap:6px;}
html[dir="rtl"] .dl-card-cta svg{transform:scaleX(-1);}

/* ---------- Role panels (merchant / driver) ----------
   Shared layout, colored per-role via custom properties so the two
   sections read as distinct invitations rather than duplicated blocks. */
.dl-role{margin-top:16px;}
.dl-hero + .dl-role{margin-top:40px;}

.dl-role[data-role="merchant"]{
  --role-color:var(--accent); --role-bg:rgba(77,124,254,0.1); --role-border:rgba(77,124,254,0.22);
  --role-eyebrow-bg:rgba(77,124,254,0.12); --role-eyebrow-border:rgba(77,124,254,0.28); --role-ink:#fff;
}
.dl-role[data-role="driver"]{
  --role-color:#FFB020; --role-bg:rgba(255,176,32,0.1); --role-border:rgba(255,176,32,0.24);
  --role-eyebrow-bg:rgba(255,176,32,0.13); --role-eyebrow-border:rgba(255,176,32,0.3); --role-ink:#221600;
}

.dl-role-card{
  background:linear-gradient(155deg, var(--role-bg) 0%, transparent 60%);
  border:1px solid var(--role-border); border-radius:22px; padding:28px 24px;
  text-align:center; position:relative; overflow:hidden;
}
.dl-role-eyebrow{display:inline-flex; align-items:center; font-size:.78rem; font-weight:800; padding:7px 16px; border-radius:99px; background:var(--role-eyebrow-bg); border:1px solid var(--role-eyebrow-border); color:var(--role-color);}
.dl-role-card h2{margin-top:16px; font-size:clamp(1.3rem,4.4vw,1.7rem); font-weight:900; line-height:1.3; color:var(--paper);}
.dl-role-card h2 .accent-role{color:var(--role-color); display:inline;}
.dl-role-list{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:11px; text-align:start; max-width:400px; margin-inline:auto;}
.dl-role-list li{display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--paper-soft); line-height:1.55;}
.dl-role-list svg{flex:0 0 auto; color:var(--role-color); margin-top:2px;}
.dl-role-cta{margin-top:22px; padding:13px 26px; font-size:.86rem; gap:7px; background:var(--role-color); color:var(--role-ink); box-shadow:0 10px 24px -8px rgba(0,0,0,0.5);}
.dl-role-cta:hover{transform:translateY(-3px);}

/* ---------- WhatsApp card ---------- */
.dl-wa{margin-top:16px;}
.dl-wa-card{
  display:flex; align-items:center; gap:14px;
  background:rgba(37,211,102,0.08); border:1px solid rgba(37,211,102,0.22);
  border-radius:18px; padding:18px 20px; position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.dl-wa-card:hover{transform:translateY(-3px); background:rgba(37,211,102,0.13);}
.dl-wa-icon{flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:#25D366; color:#08110B; display:grid; place-items:center;}
.dl-wa-text{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.dl-wa-text .dl-card-name{font-size:.95rem; color:var(--paper);}
.dl-wa-number{font-size:.8rem; color:var(--paper-soft); direction:ltr; font-weight:600;}
html[dir="rtl"] .dl-wa-number{text-align:right;}
html[dir="ltr"] .dl-wa-number{text-align:left;}
.dl-wa-arrow{flex:0 0 auto; color:var(--paper-soft);}
html[dir="rtl"] .dl-wa-arrow{transform:scaleX(-1);}

/* ---------- Footer ---------- */
.dl-footer{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:56px 24px 36px; color:var(--paper-faint); font-size:.78rem;}
.dl-footer .cr-badge{margin:0;}
.dl-hero .cr-badge{margin:10px 0 0;}
.dl-footer-mark{opacity:.6;}
.dl-footer a{color:var(--paper-soft); font-weight:700;}
.dl-footer a:hover{color:var(--neon);}

@media (max-width:520px){
  .dl-cards{grid-template-columns:1fr; max-width:280px; margin-inline:auto;}
}