/* ===============================================================
   Ajeer — Providers page styles
   IBM Plex + #035DFC + cream paper, matches the rest of the site.
   Supports ar / en / ur (Urdu RTL).
   =============================================================== */

:root{
  --blue:#035DFC; --blue-700:#0046C7; --blue-soft:#EEF4FF; --blue-100:#DCE6FF;
  --ink:#0A1230; --ink-2:#1F2A4E; --ink-3:#2F3D6B;
  --muted:#5C6480; --muted-2:#8B92A9;
  --line:#D8D2C2; --line-soft:#E6E0D0;
  --paper:#F4F1EA; --paper-2:#EFEBE0; --paper-3:#FBFAF6;
  --green:#1F8A5B; --green-soft:#E6F4EC;
  --gold:#C8961D; --gold-soft:#FBF3DF;
  --radius:18px; --radius-lg:24px; --radius-pill:999px;
  --font:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font); background:var(--paper); color:var(--ink-2);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body[data-lang="ur"]{ font-family:"Noto Naskh Arabic","IBM Plex Sans Arabic",system-ui,sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.section{ padding:84px 0; position:relative; }
@media(max-width:768px){ .section{ padding:52px 0; } }

/* section heads */
.p-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--blue); background:var(--blue-soft); border:1px solid var(--blue-100);
  padding:6px 14px; border-radius:var(--radius-pill); letter-spacing:.08em; margin-bottom:16px;
}
.p-eyebrow::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); }
.p-eyebrow.green{ color:var(--green); background:var(--green-soft); border-color:#BfE6D2; }
.p-eyebrow.green::before{ background:var(--green); }
.p-head{ max-width:680px; margin-bottom:40px; }
.p-head.center{ margin-inline:auto; text-align:center; }
.p-h2{ font-size:clamp(26px,3.4vw,38px); font-weight:700; line-height:1.25; color:var(--ink); letter-spacing:-.012em; }
.p-sub{ font-size:15.5px; line-height:1.7; color:var(--ink-3); margin-top:12px; }

/* buttons */
.p-btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:transform .18s, background .18s, box-shadow .18s; }
.p-btn svg{ flex-shrink:0; }
.p-btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 28px -10px rgba(3,93,252,.45); }
.p-btn-primary:hover{ background:var(--blue-700); transform:translateY(-1px); }
.p-btn-ghost{ background:var(--paper-3); color:var(--ink); border-color:var(--line); }
.p-btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); }
body[dir="rtl"] .p-btn-arrow svg{ transform:scaleX(-1); }

/* ============================ HERO ============================ */
.p-hero{
  position:relative; overflow:hidden;
  padding:120px 0 80px;
  background:
    radial-gradient(circle at 85% 0%, rgba(3,93,252,.07), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(31,138,91,.05), transparent 45%),
    var(--paper);
}
.p-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media(max-width:920px){ .p-hero-grid{ grid-template-columns:1fr; gap:40px; } }

.p-hero-zero{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:var(--radius-pill);
  padding:9px 18px; font-weight:700; font-size:15px; margin-bottom:20px;
}
.p-hero-zero .z-pct{ color:#5BE0A0; font-family:var(--font-mono); }
.p-hero-h1{ font-size:clamp(34px,5vw,56px); font-weight:700; line-height:1.12; color:var(--ink); letter-spacing:-.02em; white-space:pre-line; }
.p-hero-sub{ font-size:16.5px; line-height:1.75; color:var(--ink-3); margin-top:18px; max-width:540px; }
.p-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.p-hero-trial{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; color:var(--muted); font-family:var(--font-mono); }
.p-hero-trial svg{ color:var(--green); }

/* hero phone */
.p-phone-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:560px; }
.p-phone-glow{ position:absolute; inset:10% 14%; background:radial-gradient(circle,rgba(3,93,252,.18),transparent 65%); filter:blur(45px); z-index:0; }
.p-phone{
  position:relative; z-index:2; width:300px; aspect-ratio:1080/2160;
  background:#0A1230; border-radius:46px; padding:11px;
  box-shadow:0 0 0 1.5px #1F2A4E inset, 0 40px 80px -24px rgba(10,18,48,.45);
  animation:pFloat 6s ease-in-out infinite;
}
@keyframes pFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.p-phone-screen{
  width:100%; height:100%; border-radius:36px; overflow:hidden; position:relative;
  background:#E8F0F3; display:flex; flex-direction:column;
}
.p-phone-notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:34%; height:20px; background:#0A1230; border-radius:0 0 14px 14px; z-index:6; }

/* real-screenshot slideshow inside the phone */
.p-phone-shots{ position:relative; background:#0A1230; }
.p-phone-shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; transform:scale(1.04);
  transition:opacity .9s cubic-bezier(.4,0,.2,1), transform 2.8s ease-out;
}
.p-phone-shot.in{ opacity:1; transform:scale(1); z-index:1; }
.p-phone-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:3;
  background:rgba(10,18,48,.5); padding:5px 10px; border-radius:999px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.p-phone-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); transition:width .4s, background .4s; }
.p-phone-dot.on{ width:18px; border-radius:4px; background:#fff; }

/* in-phone UI */
.pp-top{ padding:30px 16px 12px; text-align:center; }
.pp-title{ font-size:16px; font-weight:700; color:var(--ink); }
.pp-avail{
  margin:8px 14px 0; background:#fff; border-radius:14px; padding:11px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  box-shadow:0 4px 12px -6px rgba(10,18,48,.12);
}
.pp-avail-label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.pp-toggle{ width:46px; height:26px; border-radius:999px; background:#CBD3DE; position:relative; transition:background .3s; flex-shrink:0; }
.pp-toggle.on{ background:var(--green); }
.pp-toggle::after{ content:''; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:inset-inline-start .3s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.pp-toggle.on::after{ inset-inline-start:23px; }
.pp-feed{ flex:1; overflow:hidden; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.pp-card{
  background:#fff; border-radius:14px; padding:12px; box-shadow:0 4px 14px -8px rgba(10,18,48,.14);
  opacity:0; transform:translateY(14px);
}
.pp-card.in{ animation:ppIn .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ppIn{ to{ opacity:1; transform:translateY(0) } }
.pp-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.pp-card-svc{ font-size:13.5px; font-weight:700; color:var(--ink); }
.pp-card-id{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); }
.pp-tag{ font-family:var(--font-mono); font-size:8.5px; font-weight:600; padding:3px 8px; border-radius:999px; }
.pp-tag.search{ background:var(--blue-soft); color:var(--blue); }
.pp-tag.new{ background:var(--green-soft); color:var(--green); }
.pp-card-row{ display:flex; align-items:center; gap:6px; border-top:1px solid var(--line-soft); padding-top:9px; }
.pp-chip{ flex:1; text-align:center; }
.pp-chip + .pp-chip{ border-inline-start:1px solid var(--line-soft); }
.pp-chip-v{ font-size:12px; font-weight:700; color:var(--ink); }
.pp-chip-l{ font-size:8.5px; color:var(--muted); font-family:var(--font-mono); margin-top:2px; }
.pp-card-src{ margin-top:8px; font-size:9.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.pp-card-src .dot{ width:5px; height:5px; border-radius:50%; background:var(--blue); }

/* ===================== STATS BAR ===================== */
.p-stats{ background:var(--ink); }
.p-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:34px 0; }
@media(max-width:600px){ .p-stats-grid{ grid-template-columns:1fr 1fr; gap:24px 12px; } }
.p-stat{ text-align:center; position:relative; }
.p-stat + .p-stat::before{ content:''; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%); height:42px; width:1px; background:rgba(255,255,255,.12); }
@media(max-width:600px){ .p-stat + .p-stat::before{ display:none; } }
.p-stat-n{ font-size:clamp(28px,4vw,40px); font-weight:700; color:#fff; line-height:1; letter-spacing:-.01em; }
.p-stat-n.green{ color:#5BE0A0; }
.p-stat-l{ font-size:12.5px; color:rgba(255,255,255,.6); margin-top:8px; }

/* ===================== PROBLEM ===================== */
.p-prob-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(max-width:768px){ .p-prob-grid{ grid-template-columns:1fr; } }
.p-prob{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px; display:flex; gap:14px; }
.p-prob-ic{ width:42px; height:42px; flex-shrink:0; border-radius:11px; background:#FCEBEA; color:#D14343; display:flex; align-items:center; justify-content:center; }
.p-prob-t{ font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.p-prob-d{ font-size:13.5px; line-height:1.65; color:var(--ink-3); }

/* ===================== ZERO COMMISSION ===================== */
.p-zero{ background:var(--paper-2); }
.p-zero-compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; margin-top:8px; }
@media(max-width:768px){ .p-zero-compare{ grid-template-columns:1fr; } }
.p-zero-card{ border-radius:var(--radius-lg); padding:28px 26px; position:relative; overflow:hidden; }
.p-zero-card.them{ background:#fff; border:1px solid var(--line); }
.p-zero-card.us{ background:linear-gradient(160deg,var(--ink) 0%,#16203f 100%); color:#fff; box-shadow:0 30px 60px -24px rgba(10,18,48,.4); }
.p-zero-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.p-zero-card.them .p-zero-label{ color:var(--muted); }
.p-zero-card.us .p-zero-label{ color:rgba(255,255,255,.6); }
.p-zero-pct{ font-size:54px; font-weight:700; line-height:1; letter-spacing:-.02em; }
.p-zero-card.them .p-zero-pct{ color:#D14343; }
.p-zero-card.us .p-zero-pct{ color:#5BE0A0; }
.p-zero-cut{ font-family:var(--font-mono); font-size:15px; margin-top:10px; }
.p-zero-card.them .p-zero-cut{ color:#D14343; }
.p-zero-card.us .p-zero-cut{ color:#5BE0A0; }
.p-zero-net{ font-size:18px; font-weight:700; margin-top:18px; padding-top:16px; border-top:1px solid; }
.p-zero-card.them .p-zero-net{ border-color:var(--line-soft); color:var(--ink); }
.p-zero-card.us .p-zero-net{ border-color:rgba(255,255,255,.15); color:#fff; }
.p-zero-csub{ font-size:12px; margin-top:4px; }
.p-zero-card.them .p-zero-csub{ color:var(--muted); }
.p-zero-card.us .p-zero-csub{ color:rgba(255,255,255,.55); }
.p-zero-vs{ display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--muted); }
@media(max-width:768px){ .p-zero-vs{ padding:4px 0; } }
.p-zero-example{ text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:18px; }
.p-zero-plans{ margin-top:28px; background:var(--blue-soft); border:1px solid var(--blue-100); border-radius:var(--radius); padding:20px 24px; display:flex; gap:16px; align-items:center; }
.p-zero-plans-ic{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; }
.p-zero-plans-label{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.p-zero-plans-d{ font-size:13px; color:var(--ink-3); line-height:1.6; }

/* ===================== FEATURES ===================== */
.p-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:920px){ .p-feat-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.p-feat{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.p-feat:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -22px rgba(10,18,48,.22); }
.p-feat-shot{ background:linear-gradient(160deg,var(--blue-soft),var(--paper-2)); padding:22px 22px 0; display:flex; justify-content:center; }
.p-feat-shot img{ width:78%; border-radius:18px 18px 0 0; box-shadow:0 -2px 20px -6px rgba(10,18,48,.18); cursor:zoom-in; transition:transform .2s; }
.p-feat-shot img:hover{ transform:translateY(-4px); }
.p-feat-body{ padding:22px 24px 26px; }
.p-feat-t{ font-size:17px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.p-feat-d{ font-size:13.5px; line-height:1.7; color:var(--ink-3); }
.p-feat-more{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
@media(max-width:920px){ .p-feat-more{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .p-feat-more{ grid-template-columns:1fr; } }
.p-feat-mini{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; }
.p-feat-mini-ic{ width:38px; height:38px; border-radius:10px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.p-feat-mini-t{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:5px; line-height:1.35; }
.p-feat-mini-d{ font-size:12.5px; line-height:1.6; color:var(--ink-3); }

/* ===================== SOURCES ===================== */
.p-src{ background:var(--paper-2); }
.p-src-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:920px){ .p-src-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .p-src-grid{ grid-template-columns:1fr; } }
.p-src-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:24px; transition:transform .2s, border-color .2s, box-shadow .2s; display:flex; flex-direction:column; }
.p-src-card:hover{ transform:translateY(-3px); border-color:var(--blue-100); box-shadow:0 18px 40px -20px rgba(3,93,252,.22); }
.p-src-ic{ width:46px; height:46px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.p-src-name{ font-size:18px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.p-src-d{ font-size:13px; line-height:1.65; color:var(--ink-3); flex:1; }
.p-src-link{ margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--blue); }
body[dir="rtl"] .p-src-link svg{ transform:scaleX(-1); }

/* ===================== HOW / STEPS ===================== */
.p-how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:920px){ .p-how-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .p-how-grid{ grid-template-columns:1fr; } }
.p-step{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px; position:relative; }
.p-step-n{ width:38px; height:38px; border-radius:11px; background:var(--blue); color:#fff; font-family:var(--font-mono); font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.p-step-t{ font-size:16px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.p-step-d{ font-size:13px; line-height:1.65; color:var(--ink-3); }
.p-reqs{ margin-top:22px; background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px 24px; }
.p-reqs-label{ font-size:12px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.p-reqs-list{ display:flex; flex-wrap:wrap; gap:10px; }
.p-req{ display:inline-flex; align-items:center; gap:8px; background:var(--blue-soft); border:1px solid var(--blue-100); border-radius:var(--radius-pill); padding:8px 16px; font-size:13px; font-weight:600; color:var(--ink); }
.p-req svg{ color:var(--blue); }

/* ===================== INCENTIVES ===================== */
.p-inc{ background:linear-gradient(160deg,var(--gold-soft),var(--paper-3)); }
.p-inc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:768px){ .p-inc-grid{ grid-template-columns:1fr; } }
.p-inc-card{ background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:26px; }
.p-inc-ic{ width:48px; height:48px; border-radius:13px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.p-inc-t{ font-size:17px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.p-inc-d{ font-size:13.5px; line-height:1.7; color:var(--ink-3); }

/* ===================== FAQ ===================== */
.p-faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.p-faq-item{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.p-faq-q{ all:unset; display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; box-sizing:border-box; padding:20px 24px; cursor:pointer; font-size:15.5px; font-weight:700; color:var(--ink); }
.p-faq-q svg{ flex-shrink:0; color:var(--blue); transition:transform .3s; }
.p-faq-item.open .p-faq-q svg{ transform:rotate(45deg); }
.p-faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; padding:0 24px; }
.p-faq-item.open .p-faq-a{ max-height:340px; padding:0 24px 20px; }
.p-faq-a p{ font-size:14px; line-height:1.8; color:var(--ink-3); }

/* ===================== FINAL CTA ===================== */
.p-cta{ background:linear-gradient(160deg,var(--ink) 0%,#16203f 60%,var(--blue) 220%); color:#fff; position:relative; overflow:hidden; }
.p-cta .wrap{ position:relative; z-index:1; text-align:center; }
.p-cta-dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.4px); background-size:20px 20px; mask-image:radial-gradient(circle at 50% 40%, #000, transparent 70%); -webkit-mask-image:radial-gradient(circle at 50% 40%, #000, transparent 70%); }
.p-cta-h2{ font-size:clamp(26px,3.6vw,40px); font-weight:700; line-height:1.25; letter-spacing:-.012em; color:#fff; max-width:680px; margin:0 auto; }
.p-cta-sub{ font-size:16px; color:rgba(255,255,255,.72); margin-top:14px; max-width:560px; margin-inline:auto; }
.p-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.p-cta .p-btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25); }
.p-cta .p-btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } .p-phone{ animation:none; } }

/* lightbox */
.p-lb{ position:fixed; inset:0; z-index:9999; background:rgba(10,18,48,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:32px; opacity:0; pointer-events:none; transition:opacity .25s; cursor:zoom-out; }
.p-lb.open{ opacity:1; pointer-events:auto; }
.p-lb img{ max-width:min(92vw,420px); max-height:92vh; border-radius:18px; box-shadow:0 40px 80px -20px rgba(0,0,0,.5); transform:scale(.96); transition:transform .3s; }
.p-lb.open img{ transform:scale(1); }
.p-lb-x{ position:absolute; top:18px; inset-inline-end:18px; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
