/* صفحة الهبوط — دوام. الألوان: teal #0E7C7B · deep #0B3B3A · amber #F2A93B */
:root{--brand:#0E7C7B;--brand-d:#0A5E5D;--deep:#0B3B3A;--amber:#F2A93B;--bg:#F6F8F7;--ink:#0F2524;--muted:#4E6463;--line:#E2EAE9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.site{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 Tajawal,"Segoe UI",Tahoma,Arial,sans-serif;overflow-x:hidden}
a{color:var(--brand)}a:hover{color:var(--brand-d)}
h1,h2,h3{margin:0;line-height:1.25}
[hidden]{display:none!important}
.dots{background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px}
.kicker{display:inline-block;color:var(--brand);font-weight:800;font-size:15px;letter-spacing:.3px;margin-bottom:10px}
.kicker.light{color:#8FD3CF}.kicker.amber{color:var(--amber)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- الواجهة ---------- */
.hero{background-color:var(--deep);color:#fff;padding:0 max(16px,calc((100% - 1200px)/2)) 70px}
.nav-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:24px}
.brand:hover{color:#fff}
.links{display:flex;gap:26px}
.links a{color:#CFE2E1;text-decoration:none;font-weight:500}.links a:hover{color:#fff}
.acts{display:flex;gap:10px}
.acts a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:11px;text-decoration:none;font-weight:700}
.acts .ghost{color:#fff;border:1px solid rgba(255,255,255,.3)}
.acts .solid{background:#fff;color:var(--deep)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:40px}
.pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:999px;font-size:15px;color:#DCEBEA}
.pill span{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.hero h1{font-size:clamp(34px,5vw,58px);font-weight:800;margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero-txt p{font-size:19px;color:#CFE2E1;margin:0 0 28px;max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn-amber,.btn-line{min-height:52px;display:inline-flex;align-items:center;gap:10px;padding:0 24px;border-radius:13px;font-weight:800;font-size:17px;text-decoration:none}
.btn-amber{background:var(--amber);color:#2B1A00}.btn-amber:hover{background:#F5B95C;color:#2B1A00}
.btn-line{color:#fff;border:1px solid rgba(255,255,255,.35)}.btn-line:hover{color:#fff;background:rgba(255,255,255,.06)}
[dir=ltr] .arr{transform:scaleX(-1)}
.scene{position:relative;min-height:440px}
.tv{position:absolute;inset-inline-start:0;top:10px;width:min(360px,74%);background:#fff;color:var(--ink);border-radius:22px;padding:20px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.tv-h{display:flex;justify-content:space-between;font-size:15px;margin-bottom:12px}.tv-h span{color:var(--muted)}
.qr{display:grid;grid-template-columns:repeat(21,1fr);gap:1px;aspect-ratio:1;padding:10px;border:1px solid var(--line);border-radius:14px}
.qr i{display:block;border-radius:1px}.qr i.on{background:var(--deep)}
.bar{height:6px;background:var(--line);border-radius:6px;margin-top:14px;overflow:hidden}.bar div{width:62%;height:100%;background:var(--brand)}
.tv-n{font-size:13.5px;color:var(--muted);margin-top:8px;text-align:center}
.phone{position:absolute;inset-inline-end:0;bottom:0;width:min(230px,48%);background:#0F1513;border-radius:34px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.ph-in{background:#fff;color:var(--ink);border-radius:26px;padding:28px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.ok{width:60px;height:60px;border-radius:50%;background:#E3F4EA;display:grid;place-items:center;margin-bottom:6px}
.ph-k{color:var(--muted);font-size:14px}.ph-n{font-weight:800;font-size:20px}.ph-d{color:var(--muted);font-size:14px;direction:ltr}
[dir=rtl] .ph-d{direction:rtl}
.ph-t{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px;color:#14532D}
.ph-t span{background:#EEF8F2;border-radius:8px;padding:4px 8px}

/* ---------- الحقائق ---------- */
.facts{background:#fff;border-bottom:1px solid var(--line)}
.facts-in{max-width:1200px;margin:0 auto;padding:22px 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fact{display:flex;gap:12px;align-items:flex-start}
.fact>span{flex:none;width:30px;height:30px;border-radius:50%;background:#E6F2F1;color:var(--brand);display:grid;place-items:center;font-weight:800}
.fact b{display:block}.fact small{color:var(--muted);font-size:14.5px}

/* ---------- الأقسام ---------- */
.sec{max-width:1200px;margin:0 auto;padding:90px 16px 0}
.head{text-align:center;max-width:720px;margin:0 auto 40px}
.head h2,.faq h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;margin-bottom:12px}
.head p{color:var(--muted);margin:0;font-size:18px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px}
.step .n{font-size:15px;font-weight:800;color:var(--brand);background:#E6F2F1;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-size:21px;margin-bottom:8px}.step p{color:var(--muted);margin:0}

.video-sec{margin-top:90px;background:var(--deep);color:#fff}
.video-in{max-width:1200px;margin:0 auto;padding:70px 16px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.video-in h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}.video-in p{color:#CFE2E1}
.video-in a{color:var(--amber);font-weight:700;text-decoration:none}
.player{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#0E7C7B,#0B3B3A 70%);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player button{width:84px;height:84px;border-radius:50%;border:0;background:var(--amber);color:#2B1A00;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.35)}

.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.feat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;transition:border-color .2s}
.feat:hover{border-color:var(--brand)}
.feat .ic{width:46px;height:46px;border-radius:13px;background:#E6F2F1;color:var(--brand);display:grid;place-items:center;margin-bottom:14px}
.feat h3{font-size:18px;margin-bottom:6px}.feat p{color:var(--muted);margin:0;font-size:15.5px}

.shield-sec{margin-top:90px;background:#0F2524;color:#fff}
.shield-in{max-width:1200px;margin:0 auto;padding:70px 16px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
.shield-in h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}.shield-in p{color:#B9CFCD;margin:0}
.shields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.shields div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.shields b{display:block;font-size:18px;color:var(--amber)}.shields span{color:#CFE2E1;font-size:15.5px}

/* ---------- الأسعار ---------- */
.toggles{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.seg{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{min-height:44px;padding:0 16px;border-radius:9px;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
.seg button.on{background:var(--deep);color:#fff;font-weight:700}
.founders{max-width:820px;margin:0 auto 26px;text-align:center;background:#FFF4DF;color:#5B3B00;border:1px solid #F5D9A3;border-radius:14px;padding:12px 18px}
.plans{display:grid;grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr));gap:22px;align-items:stretch}
.plan{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column}
.plan.hi{background:var(--deep);color:#fff;border-color:var(--deep);box-shadow:0 24px 50px rgba(11,59,58,.25)}
.plan-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan h3{font-size:24px}
.pop{background:var(--amber);color:#2B1A00;font-weight:800;font-size:13px;padding:3px 12px;border-radius:999px}
.for{color:var(--muted);margin:4px 0 16px}.hi .for{color:#B9CFCD}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price .v{font-size:46px;font-weight:800;line-height:1}.price .c{font-weight:700}.price .p{color:var(--muted)}.hi .price .p{color:#B9CFCD}
.limit{margin-top:12px;font-weight:700;color:var(--brand)}.hi .limit{color:#7FD6D3}
.plan ul{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{display:flex;gap:10px}.plan li::before{content:"✓";color:var(--brand);font-weight:800}.hi li::before{color:#7FD6D3}
.buy{margin-top:24px;text-align:center;text-decoration:none;font-weight:700;padding:13px;border-radius:12px;border:1px solid var(--brand);color:var(--brand);min-height:50px}
.hi .buy{background:#fff;color:var(--deep);border-color:#fff}
.try{margin-top:10px;text-align:center;text-decoration:none;font-weight:500;padding:10px;border-radius:12px;min-height:46px}
.hi .try{color:#CFE2E1}
.notes{text-align:center;color:var(--muted);font-size:15px;margin-top:20px}
.perp{margin-top:26px;background:#fff;border:1px dashed #B9CFCD;border-radius:20px;padding:22px 26px;display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:22px;align-items:center}
.perp>div:first-child b{display:block;font-size:19px}.perp>div:first-child span{color:var(--muted)}
.perp-items{display:flex;gap:10px}
.perp-items div{background:var(--bg);border-radius:12px;padding:8px 16px;text-align:center}
.perp-items small{display:block;color:var(--muted)}.perp-items b{font-size:22px}
.perp-note{color:var(--muted);font-size:14.5px}

/* ---------- الدفع ---------- */
.pay-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-bottom:28px}
.pay-steps div{display:flex;align-items:center;gap:10px}
.pay-steps span{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800}
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.pay-box,.receipt{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px}
.lbl{font-weight:700;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #CFDAD9;background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.chips button.on{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:700}
.methods{display:flex;flex-direction:column;gap:10px}
.method{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.method b{display:block}.method small{color:var(--muted)}
.val{display:flex;align-items:center;gap:8px;min-width:0}
.val code{font-family:ui-monospace,Consolas,monospace;font-size:15px;background:var(--bg);padding:6px 10px;border-radius:8px;overflow-wrap:anywhere}
.copy{min-height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--brand);background:#fff;color:var(--brand);font:inherit;font-weight:700;cursor:pointer}
.other{color:var(--muted);font-size:15px;margin:16px 0 0}
.receipt h3{font-size:21px;margin-bottom:4px}
.receipt label{display:block;font-weight:700;margin:12px 0 5px;font-size:15px}
.receipt input,.receipt select{width:100%;padding:10px 12px;border:1px solid #C9D6D5;border-radius:11px;font:inherit;background:#fff;color:var(--ink);min-height:46px}
.receipt input[type=file]{padding:9px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.receipt button{margin-top:18px;width:100%;min-height:50px;border:0;border-radius:12px;background:var(--brand);color:#fff;font:inherit;font-weight:800;font-size:17px;cursor:pointer}
.receipt button:hover{background:var(--brand-d)}
.wa{text-align:center;color:var(--muted);font-size:15px;margin-top:10px}

/* ---------- الأسئلة والختام ---------- */
.faq{max-width:860px}.faq h2{text-align:center;margin-bottom:26px}
.faq-list{display:flex;flex-direction:column;gap:10px}
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 20px}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;min-height:60px}
summary::-webkit-details-marker{display:none}
.plus{font-size:24px;color:var(--brand);transition:transform .2s}
details[open] .plus{transform:rotate(45deg)}
details p{color:var(--muted);margin:0 0 18px}
.cta{padding:90px 16px 0}
.cta-in{max-width:1200px;margin:0 auto;background:var(--brand);color:#fff;border-radius:26px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(24px,3vw,34px)}.cta p{margin:8px 0 0;color:#DCEFEE}
.cta-b{display:flex;gap:10px;flex-wrap:wrap}
.site-foot{padding:40px 16px}
.site-foot>div{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.fb{display:flex;align-items:center;gap:8px}.fb b{color:var(--ink)}

/* ---------- الشاشات الصغيرة ---------- */
@media (max-width:1000px){
  .links{display:none}
  .hero-in,.video-in,.shield-in,.pay-grid{grid-template-columns:minmax(0,1fr)}
  .scene{min-height:400px;max-width:520px;width:100%;margin:0 auto}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
  .perp{grid-template-columns:minmax(0,1fr)}
  .facts-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body.site{font-size:16px}
  .steps,.feats,.shields,.two,.three,.facts-in{grid-template-columns:minmax(0,1fr)}
  .sec{padding-top:64px}
  .scene{min-height:360px}
  .acts .solid{display:none}
  .perp-items{flex-wrap:wrap}
  .cta-in{padding:28px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}