:root{
  --bg:#F2F6F5;
  --surface:#FFFFFF;
  --ink:#0E2421;
  --muted:#4B6762;
  --line:#D3E1DD;
  --teal:#00574B;
  --teal-soft:#E0EEEB;
  --gold:#94650F;
  --band:#00241F;
  --band-2:#00574B;
  --band-ink:#F2F7F5;
  --band-muted:#A9C8C1;
  --band-gold:#FFD27A;
  --fast:#C62828;
  --fast-2:#FF5252;
  --global:#4527A0;
  --global-2:#7E57C2;
  --on-color:#FFFFFF;
  --phone-frame:#0A1110;
  --app-bg:#F1F3F2;
  --app-card:#FFFFFF;
  --app-ink:#14211F;
  --app-muted:#7A8A87;
  --app-soft:#E8F3F1;
  --app-light:#D3E8E4;
  --app-dark:#00241F;
  --app-teal:#00574B;
  --app-gold:#FFD27A;
  --app-price:#E53935;
  --app-badge:#263238;
  --display:"Lalezar","Readex Pro",Tahoma,sans-serif;
  --body:"Readex Pro","Segoe UI",Tahoma,system-ui,sans-serif;
  --radius:16px;
  --logo-img:url("/logo.png");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081A17;
    --surface:#0F2925;
    --ink:#E3EEEB;
    --muted:#94B3AD;
    --line:#1F3D38;
    --teal:#56C7B1;
    --teal-soft:#13332E;
    --gold:#FFD27A;
    --band:#000F0C;
    --band-2:#003D35;
    --band-muted:#8DB2AA;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#081A17;
  --surface:#0F2925;
  --ink:#E3EEEB;
  --muted:#94B3AD;
  --line:#1F3D38;
  --teal:#56C7B1;
  --teal-soft:#13332E;
  --gold:#FFD27A;
  --band:#000F0C;
  --band-2:#003D35;
  --band-muted:#8DB2AA;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  direction:rtl;
}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{
  max-width:1100px;
  margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}

/* ===== Brand band (header + hero) ===== */
.band{
  background:linear-gradient(160deg, var(--band) 0%, var(--band) 45%, var(--band-2) 100%);
  color:var(--band-ink);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  padding-block:18px;
}
.logo{
  display:block;
  width:150px;
  aspect-ratio:560/175;
  background:var(--logo-img) no-repeat center/contain;
  border-radius:4px;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px}
.links a{color:var(--band-muted);text-decoration:none;padding-block:4px}
.links a:hover,.links a:focus-visible{color:var(--band-gold)}

.hero{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:center;
  gap:40px;
  padding-block:28px 64px;
}
.hero-text{min-width:0;display:flex;flex-direction:column;gap:20px}
.eyebrow{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--band-muted);
  font-weight:500;
}
h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(44px, 7vw, 76px);
  line-height:1.15;
}
h1 .hl{color:var(--band-gold)}
.lede{font-size:18px;color:var(--band-ink);max-width:34em;opacity:.92}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.play{
  display:inline-flex;
  flex-direction:column;
  line-height:1.2;
  background:var(--band-gold);
  color:var(--band);
  border-radius:12px;
  padding:10px 20px;
  font-weight:700;
  font-size:17px;
}
.play small{font-weight:500;font-size:12px;opacity:.75}
.ghost{
  display:inline-flex;
  align-items:center;
  border:1.5px solid var(--band-muted);
  color:var(--band-ink);
  border-radius:12px;
  padding:14px 20px;
  font-weight:500;
  text-decoration:none;
}
.ghost:hover,.ghost:focus-visible{border-color:var(--band-gold);color:var(--band-gold)}
.stores{font-size:14px;color:var(--band-muted)}
.stores b{color:var(--band-ink);font-weight:500}

/* ===== Phone mock of the app ===== */
.mock{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.phone{
  width:min(300px, 100%);
  background:var(--phone-frame);
  border-radius:40px;
  padding:10px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
}
.screen{
  background:var(--app-bg);
  color:var(--app-ink);
  border-radius:31px;
  overflow:hidden;
  height:590px;
  display:flex;
  flex-direction:column;
  font-size:11px;
  line-height:1.4;
}
.m-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:24px 10px 10px;
  background:linear-gradient(90deg, var(--app-dark), var(--app-teal));
}
.m-logo{width:92px;aspect-ratio:560/175;flex-shrink:0;background:var(--logo-img) no-repeat center/contain}
.m-search{
  flex:1;
  background:var(--app-card);
  border-radius:20px;
  padding:7px 10px;
  color:var(--app-muted);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
}
.m-banners{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 8px 4px}
.m-ban{
  border-radius:12px;
  padding:8px 4px;
  color:var(--on-color);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}
.m-ban .ico{font-size:17px;line-height:1.2}
.m-ban b{font-size:13px}
.m-ban small{font-size:8.5px;font-weight:700}
.m-fast{background:linear-gradient(90deg, var(--fast), var(--fast-2))}
.m-global{background:linear-gradient(90deg, var(--global), var(--global-2))}
.bolt{display:inline-block;animation:pulse .6s ease-in-out infinite alternate}
.scoot{display:inline-block;animation:ride .45s ease-in-out infinite alternate}
.globe{display:inline-block;animation:swing .9s ease-in-out infinite alternate}
@keyframes pulse{from{transform:scale(.85)}to{transform:scale(1.2)}}
@keyframes ride{from{transform:translateX(-5px)}to{transform:translateX(5px)}}
@keyframes swing{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}

.m-body{flex:1;display:flex;min-height:0;margin-top:4px}
.m-rail{
  list-style:none;
  margin:0;
  padding:4px 0;
  width:62px;
  background:var(--app-card);
  flex-shrink:0;
}
.m-rail li{text-align:center;padding:7px 2px;font-size:16px;line-height:1.2}
.m-rail li span{display:block;font-size:8.5px;margin-top:2px;color:var(--app-ink)}
.m-rail li.on{background:var(--app-light)}
.m-rail li.on span{color:var(--app-teal);font-weight:700}
.m-list{flex:1;min-width:0;padding:8px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.m-chips{display:flex;gap:5px}
.m-chips span{background:var(--app-card);border-radius:12px;padding:2px 8px;font-size:8.5px;font-weight:700}
.m-chips span.on{background:var(--app-teal);color:var(--on-color)}
.m-card{
  background:var(--app-card);
  border-radius:12px;
  padding:7px;
  display:flex;
  align-items:center;
  gap:7px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.m-ic{
  width:40px;height:40px;flex-shrink:0;
  border-radius:9px;
  background:var(--app-soft);
  display:grid;place-items:center;
  font-size:20px;
}
.m-info{flex:1;min-width:0}
.m-info b{display:block;font-size:10px}
.m-info .st{color:var(--app-muted);font-size:8.5px}
.m-price{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.m-price .now{color:var(--app-price);font-weight:700;font-size:11px}
.m-price s{color:var(--app-muted);font-size:8.5px}
.m-badge{
  background:var(--app-badge);
  color:var(--on-color);
  font-weight:700;
  font-size:9px;
  border-radius:6px;
  padding:3px 5px;
  font-variant-numeric:tabular-nums;
  direction:ltr;
}
.m-ad{
  background:var(--app-dark);
  color:var(--app-gold);
  font-weight:700;
  text-align:center;
  font-size:10px;
  padding:7px 0 14px;
}
.mock-note{font-size:12px;color:var(--band-muted)}

/* ===== Content sections ===== */
.sec{padding-block:72px}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:36px;max-width:40em}
h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(32px, 4.5vw, 44px);
  line-height:1.2;
  color:var(--ink);
}
.sec-head p{color:var(--muted);font-size:17px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}
.steps li{display:flex;flex-direction:column;gap:8px;min-width:0}
.steps .n{
  font-family:var(--display);
  font-size:56px;
  line-height:1;
  color:var(--gold);
}
.steps h3{font-size:19px;font-weight:700}
.steps p{color:var(--muted)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tile{
  border-radius:var(--radius);
  padding:28px;
  color:var(--on-color);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.tile h3{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1}
.tile p{opacity:.92}
.tile.fast{background:linear-gradient(135deg, var(--fast), var(--fast-2))}
.tile.global{background:linear-gradient(135deg, var(--global), var(--global-2))}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tile .tags li{background:rgba(255,255,255,.18);border-radius:999px;padding:3px 14px;font-size:14px;font-weight:500}

.cats{margin-top:40px;display:flex;flex-direction:column;gap:14px}
.cats h3{font-size:19px;font-weight:700}
.cats .tags li{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 16px;
  font-size:15px;
}
.cats .note{color:var(--muted);font-size:15px}

/* Advertise */
.ad-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.ad-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.ad-copy p{color:var(--muted);font-size:17px;max-width:34em}
.offers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.offers li{display:flex;gap:12px;align-items:baseline}
.offers li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--gold);flex-shrink:0;transform:translateY(-2px)}
.contact{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.contact h3{font-size:18px;font-weight:700}
.row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--teal-soft);
  border-radius:12px;
  padding:12px 14px;
}
.row .lbl{font-size:13px;color:var(--muted);width:56px;flex-shrink:0}
.row .val{
  flex:1;
  min-width:0;
  font-weight:700;
  color:var(--teal);
  direction:ltr;
  text-align:right;
  overflow-wrap:anywhere;
  user-select:all;
  font-variant-numeric:tabular-nums;
}
.copy{
  font:inherit;
  font-size:13px;
  font-weight:500;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 12px;
  cursor:pointer;
  flex-shrink:0;
}
.copy:hover{border-color:var(--teal)}
.copy:focus-visible,.ghost:focus-visible,.links a:focus-visible,.logo:focus-visible{outline:2px solid var(--band-gold);outline-offset:3px}
.copy:focus-visible{outline-color:var(--teal)}
.contact .fine{font-size:13px;color:var(--muted)}

/* Privacy */
.legal{max-width:44em;display:flex;flex-direction:column;gap:26px}
.legal .upd{color:var(--muted);font-size:14px}
.legal h3{font-size:18px;font-weight:700;margin-bottom:6px}
.legal p{color:var(--muted)}
.disclosure{
  background:var(--teal-soft);
  border-radius:var(--radius);
  padding:20px 22px;
}
.disclosure h3{color:var(--teal)}
.disclosure p{color:var(--ink)}

/* Footer */
.foot{background:var(--band);color:var(--band-muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:28px}
.foot .logo{width:120px}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr;padding-block:12px 48px}
  .steps{grid-template-columns:1fr;gap:28px}
  .tiles{grid-template-columns:1fr}
  .ad-grid{grid-template-columns:1fr}
  .sec{padding-block:56px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bolt,.scoot,.globe{animation:none}
}

/* ===== Rewards ===== */
.rw-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.rw-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.rw-copy > p{color:var(--muted);font-size:17px;max-width:34em}
.rw-card{
  background:linear-gradient(160deg, var(--band), var(--band-2));
  color:var(--band-ink);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.rw-card .lbl{color:var(--band-muted);font-size:14px}
.rw-card .big{font-family:var(--display);font-size:64px;line-height:1;color:var(--band-gold);font-variant-numeric:tabular-nums}
.rw-card .big small{font-family:var(--body);font-size:16px;color:var(--band-ink);margin-inline-start:6px}
.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.bar span{display:block;height:100%;width:60%;background:var(--band-gold);border-radius:inherit}
.rw-card .hint{font-size:14px;color:var(--band-muted)}
.rules{
  margin-top:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  font-size:15px;
  color:var(--muted);
}
.rules b{color:var(--ink)}

/* Contact actions */
.mail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--teal);
  color:var(--on-color);
  border-radius:12px;
  padding:12px 18px;
  font-weight:700;
  text-decoration:none;
}
.mail-btn:hover{filter:brightness(1.08)}
.mail-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mail-btn{color:#00241F}
}
:root[data-theme="dark"] .mail-btn{color:#00241F}

/* Email row: keep the address on one line */
.row .lbl{width:auto}
.row .val{white-space:nowrap;overflow-wrap:normal;font-size:15px}

/* Footer links */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--band-muted);text-decoration:none}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--band-gold)}
.foot .copy-line{flex-basis:100%;font-size:13px;opacity:.85}

/* ===== Legal pages ===== */
.band.slim .nav{padding-block:16px}
.page-title{padding-block:8px 44px;display:flex;flex-direction:column;gap:8px}
.page-title h1{font-size:clamp(36px, 6vw, 56px)}
.page-title p{color:var(--band-muted)}
.legal ul,.legal ol{margin:6px 0 0;padding-inline-start:1.3em;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.legal a{color:var(--teal);font-weight:500}
.legal .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.legal .box p,.legal .box li{color:var(--ink)}
.en{direction:ltr;text-align:left;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;line-height:1.65}
.en h2{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-weight:700;font-size:28px}
.en ul,.en ol{padding-inline-start:1.3em}
.lang-switch{font-size:14px;color:var(--muted)}

@media (max-width: 860px){
  .rw-grid{grid-template-columns:1fr}
}