/* ============ TOKENS ============ */
:root{
  --bg:#F5F7F6; --surface:#FFFFFF; --ink:#0F1C1A; --muted:#5A6A66; --line:#E2E8E5; --soft:#ECF1EE;
  --band:#0C1E1B; --band-ink:#EAF2EF; --band-muted:#9DB2AC;
  --wa:#1FAF5A; --tg:#2A9FD8;
  --brand:#0A8C69; --accent:#1F6FE6;
  --tint:color-mix(in oklab, var(--brand) 11%, var(--surface));
  --brand-text:var(--brand);
  --shadow:0 1px 2px rgb(15 28 26 / .05), 0 12px 32px -12px rgb(15 28 26 / .16);
  --r:18px;
  --f-display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  color-scheme:light;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
}


/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  padding-inline:20px;
}
h1,h2,h3{font-family:var(--f-display); line-height:1.25; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1140px; margin-inline:auto}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:10px}
svg{flex-shrink:0}

/* ============ HEADER ============ */
.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  margin-inline:-20px; padding-inline:20px;
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo .wm{display:flex; flex-direction:column; gap:6px; width:104px}
.logo .wm img{width:100%; height:auto; display:block}
.logo b{font-family:var(--f-display); font-weight:800; font-size:23px; letter-spacing:-.02em}
.logo small{display:block; font-size:10.5px; letter-spacing:.22em; color:var(--muted); line-height:1; margin-top:2px; font-family:var(--f-body); font-weight:600}
.nav{display:flex; gap:28px; font-size:15px; color:var(--muted)}
.nav a{text-decoration:none; transition:color .2s}
.nav a:hover{color:var(--ink)}
.top-cta{font-size:14px; font-weight:600; text-decoration:none; padding:9px 16px; border-radius:999px; background:var(--ink); color:var(--bg); white-space:nowrap}
@media (max-width:820px){ .nav{display:none} }

/* ============ BUTTONS ============ */
.ctas{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 14px 12px 22px; border-radius:16px;
  font-weight:600; font-size:16px; text-decoration:none;
  background:var(--ink); color:var(--bg);
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-2px)}
.btn .ic{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff}
.btn.wa .ic{background:var(--wa)}
.btn.tg .ic{background:var(--tg)}
.btn .sub{display:block; font-size:12px; font-weight:500; opacity:.62; line-height:1.2}
.btn .lbl{line-height:1.3}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:none}
.band .btn{background:var(--band-ink); color:var(--band)}
.band .btn.ghost{background:transparent; color:var(--band-ink); border-color:color-mix(in oklab, var(--band-ink) 22%, transparent)}

/* ============ HERO ============ */
.hero{padding-block:56px 72px}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--brand-text); background:var(--tint); padding:6px 14px 6px 12px; border-radius:999px}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 25%, transparent)}
.hero h1{font-size:clamp(38px, 5.6vw, 66px); font-weight:800; margin-block:22px 20px}
.hero h1 em{font-style:normal; color:var(--brand-text); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; inset-inline:0; bottom:.06em; height:.14em; background:var(--accent); opacity:.22; border-radius:4px}
.hero .lead{font-size:19px; color:var(--muted); max-width:32em; margin-bottom:32px}
.trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:28px; font-size:14px; color:var(--muted)}
.trust span{display:inline-flex; align-items:center; gap:7px}
.trust svg{color:var(--brand-text); width:17px; height:17px}

/* chat demo */
.demo{position:relative}
.demo::before{
  content:""; position:absolute; inset:-8% -6% -10% -6%; z-index:0; border-radius:40px;
  background:
    radial-gradient(60% 50% at 30% 20%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 70%),
    radial-gradient(50% 50% at 80% 90%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  filter:blur(8px);
}
.chat{
  position:relative; z-index:1; background:var(--surface); border:1px solid var(--line);
  border-radius:26px; box-shadow:var(--shadow); overflow:hidden; max-width:440px; margin-inline:auto;
}
.chat-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.chat-head .av{width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:#fff}
.chat-head b{font-size:15px; display:block; line-height:1.3}
.chat-head small{font-size:12px; color:var(--brand-text); display:flex; align-items:center; gap:6px}
.chat-head small::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chat-head .plat{margin-inline-start:auto; display:flex; gap:6px}
.chat-head .plat span{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff}
.chat-body{padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--soft)}
.msg{max-width:86%; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.65}
.msg.me{align-self:flex-start; background:var(--brand); color:#fff; border-end-start-radius:5px}
.msg.me .meta{opacity:.7}
.msg.bot{align-self:flex-end; background:var(--surface); border:1px solid var(--line); border-end-end-radius:5px}
.msg .meta{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.fan{display:flex; align-items:center; gap:10px; margin-top:6px}
.fan .stack{display:flex}
.fan .stack i{width:22px; height:22px; border-radius:50%; border:2px solid var(--surface); margin-inline-start:-7px; background:var(--c)}
.fan .stack i:first-child{margin-inline-start:0}
.fan b{font-size:13px}
.offers{display:flex; flex-direction:column; gap:8px; align-self:stretch}
.offer{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 12px;
}
.offer .yard{width:34px; height:34px; border-radius:10px; background:var(--soft); display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--muted); font-family:var(--f-display)}
.offer b{font-size:14px; display:block; line-height:1.35}
.offer small{font-size:12px; color:var(--muted)}
.offer .price{font-family:var(--f-display); font-weight:700; font-size:17px; text-align:end; line-height:1.2}
.offer .price small{display:block; font-family:var(--f-body); font-weight:500}
.offer.best{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent)}
.offer.best .yard{background:var(--brand); color:#fff}
.tag{display:inline-block; font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; background:var(--tint); color:var(--brand-text); margin-inline-start:6px; vertical-align:1px}
.typing{align-self:flex-end; display:flex; gap:4px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:14px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr; gap:48px}
  .hero{padding-block:36px 56px}
}

/* ============ SECTIONS ============ */
section{padding-block:88px}
.sec-head{max-width:640px; margin-bottom:44px}
.sec-head .k{font-size:14px; font-weight:600; color:var(--brand-text); margin-bottom:10px; display:block}
.sec-head h2{font-size:clamp(28px, 3.6vw, 42px); font-weight:800}
.sec-head p{color:var(--muted); margin-top:12px; font-size:18px}

/* switcher + steps */
.switch{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px; gap:4px; margin-bottom:36px}
.switch button{
  font:inherit; font-size:15px; font-weight:600; border:0; cursor:pointer;
  padding:10px 22px; border-radius:999px; background:transparent; color:var(--muted);
  display:inline-flex; align-items:center; gap:8px; transition:background .25s, color .25s;
}
.switch button svg{width:18px; height:18px}
.switch button[aria-selected="true"]{background:var(--ink); color:var(--bg)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:s; position:relative}
.step{padding:6px 0 6px 32px; position:relative}
.step + .step{padding-inline-start:32px; border-inline-start:1px solid var(--line)}
.step .n{
  font-family:var(--f-display); font-weight:800; font-size:15px;
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--tint); color:var(--brand-text); margin-bottom:18px;
}
.step h3{font-size:21px; font-weight:700; margin-bottom:8px}
.step p{color:var(--muted); font-size:16px; max-width:22em}
.panel[hidden]{display:none}
@media (max-width:820px){
  .steps{grid-template-columns:1fr; gap:28px}
  .step, .step + .step{padding:0; border:0}
  .switch{display:flex; width:100%}
  .switch button{flex:1; justify-content:center; padding-inline:10px}
}

/* compare */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.col{border-radius:24px; padding:30px; border:1px solid var(--line); background:var(--surface)}
.col.old{background:transparent; border-style:dashed}
.col h3{font-size:19px; display:flex; align-items:center; gap:10px; margin-bottom:20px}
.col h3 svg{width:22px; height:22px}
.col.old h3{color:var(--muted)}
.col.new h3 svg{color:var(--brand-text)}
.col ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.col li{display:flex; gap:12px; align-items:flex-start; font-size:16px}
.col li svg{width:19px; height:19px; margin-top:5px}
.col.old li{color:var(--muted)}
.col.old li svg{opacity:.55}
.col.new li svg{color:var(--brand-text)}
.big{font-family:var(--f-display); font-weight:800; font-size:44px; line-height:1; margin-bottom:6px}
.col.old .big{color:var(--muted); text-decoration:line-through; text-decoration-thickness:3px; text-decoration-color:color-mix(in oklab, var(--accent) 60%, transparent)}
.col.new .big{color:var(--brand-text)}
.big-cap{font-size:14px; color:var(--muted); margin-bottom:24px; display:block}
@media (max-width:820px){ .compare{grid-template-columns:1fr} }

/* provider band */
.band{
  background:var(--band); color:var(--band-ink);
  margin-inline:-20px; padding-inline:20px; position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 60% at 90% 0%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 70%),
    radial-gradient(35% 50% at 5% 100%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%);
}
.band .wrap{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.band .sec-head .k{color:color-mix(in oklab, var(--brand) 45%, white)}
.band .sec-head p{color:var(--band-muted)}
.perks{list-style:none; padding:0; margin:0 0 36px; display:grid; gap:14px}
.perks li{display:flex; gap:12px; align-items:flex-start}
.perks svg{width:20px; height:20px; margin-top:5px; color:color-mix(in oklab, var(--brand) 45%, white)}
.perks span{color:var(--band-muted); display:block; font-size:15px}
.inbox{
  background:color-mix(in oklab, var(--band-ink) 6%, transparent);
  border:1px solid color-mix(in oklab, var(--band-ink) 12%, transparent);
  border-radius:24px; padding:20px; display:grid; gap:10px;
}
.inbox-h{display:flex; justify-content:space-between; font-size:13px; color:var(--band-muted); padding-inline:4px; margin-bottom:4px}
.req{
  background:color-mix(in oklab, var(--band-ink) 7%, transparent); border-radius:16px; padding:14px 16px;
  display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:center;
}
.req b{font-size:15px}
.req small{grid-column:1; font-size:13px; color:var(--band-muted)}
.req .reply{grid-row:1 / span 2; grid-column:2; font-size:13px; font-weight:600; padding:7px 14px; border-radius:10px; background:var(--band-ink); color:var(--band)}
.req.new{box-shadow:inset 3px 0 0 color-mix(in oklab, var(--brand) 55%, white)}
@media (max-width:920px){ .band .wrap{grid-template-columns:1fr; gap:40px} }

/* cities */
.cities{display:flex; flex-wrap:wrap; gap:10px}
.cities span{padding:9px 18px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:15px; font-weight:500}

/* faq */
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:22px 0; font-weight:600; font-size:18px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px; height:28px; border-radius:50%; background:var(--soft); display:grid; place-items:center; transition:transform .25s, background .25s}
.faq details[open] summary .pm{transform:rotate(45deg); background:var(--tint); color:var(--brand-text)}
.faq details p{color:var(--muted); padding-bottom:22px; max-width:36em}
@media (max-width:820px){ .faq{grid-template-columns:1fr; gap:8px} }

/* final cta */
.final{
  text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:32px;
  padding:64px 24px; position:relative; overflow:hidden;
}
.final h2{font-size:clamp(28px, 4vw, 46px); font-weight:800; margin-bottom:14px}
.final p{color:var(--muted); margin-bottom:30px; font-size:18px}
.final .ctas{justify-content:center}

/* footer */
footer{padding-block:48px 40px; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:32px}
.contact{display:flex; flex-wrap:wrap; gap:10px 28px}
.contact a{display:inline-flex; gap:8px; align-items:center; text-decoration:none; color:var(--ink)}
.contact svg{width:18px; height:18px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}