:root{
  --bg:#0a0a0a;
  --card:#141414;
  --card2:#161616;
  --blue:#3d7bf5;
  --blue2:#1a56db;
  --line:rgba(255,255,255,.09);
  --muted:#8b9fb6;
  --ok:#3dff9a;
  --text:#eef3fb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);
  background:
    radial-gradient(900px 420px at 80% -8%,rgba(61,123,245,.16),transparent 55%),
    radial-gradient(700px 360px at 10% 30%,rgba(26,86,219,.08),transparent 50%),
    var(--bg);
  font-family:"IBM Plex Sans Arabic",Tajawal,sans-serif;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(1120px,calc(100% - 36px));margin:0 auto}
.mp-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0 8px;
}
.mp-brand{display:flex;align-items:center;gap:10px;font:900 18px Tajawal;color:#fff}
.mp-brand img{height:42px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(61,123,245,.35))}
.mp-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  border:1px solid rgba(61,123,245,.45);color:#9cc7ff;font:800 13px Tajawal;
  background:rgba(61,123,245,.06);transition:background .15s,border-color .15s;
}
.mp-back:hover{background:rgba(61,123,245,.14);border-color:rgba(61,123,245,.7)}
.mp-back i{font-size:12px}

.mp-hero{text-align:center;padding:42px 0 28px}
.mp-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;margin-bottom:16px;
  background:rgba(61,123,245,.1);border:1px solid rgba(61,123,245,.28);
  color:#9cc7ff;font:800 12px Tajawal;
}
.mp-hero h1{
  margin:0 0 14px;font:900 clamp(28px,4.5vw,42px)/1.25 Tajawal;
  color:#fff;
}
.mp-hero h1 em{font-style:normal;color:#5b9cff}
.mp-hero > p{
  margin:0 auto;max-width:640px;color:var(--muted);font-size:15px;line-height:1.85;font-weight:600;
}
.mp-trust-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  color:#b7c7da;font-size:13px;font-weight:700;
}
.mp-trust-note i{color:var(--blue)}

/* Pricing toggle */
.bill-toggle{
  display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;
  margin:10px 0 34px;
}
.bill-seg{
  display:inline-flex;padding:5px;border-radius:999px;
  background:#0a1018;border:1px solid var(--line);gap:4px;
}
.bill-seg button{
  appearance:none;border:0;background:transparent;color:#cfe0ff;
  font:800 13px Tajawal;padding:10px 18px;border-radius:999px;cursor:pointer;
  transition:background .15s,color .15s;
}
.bill-seg button.on{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.save-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;font:800 11.5px Tajawal;
  color:#9dffc8;background:rgba(61,255,154,.08);border:1px solid rgba(61,255,154,.28);
}

/* Pricing cards */
.price-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  align-items:stretch;margin-bottom:36px;
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(165deg,rgba(18,26,40,.96),rgba(8,12,20,.96));
  border:1px solid var(--line);border-radius:22px;padding:24px 22px 20px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.price-card:hover{border-color:rgba(61,123,245,.4);transform:translateY(-3px)}
.price-card.featured{
  border-color:rgba(61,123,245,.55);
  box-shadow:0 24px 55px -22px rgba(61,123,245,.45);
  background:linear-gradient(165deg,rgba(28,48,82,.45),rgba(8,12,20,.98));
}
.price-card.on-focus{
  border-color:rgba(61,123,245,.75);
  box-shadow:0 0 0 1px rgba(61,123,245,.35),0 22px 50px -20px rgba(61,123,245,.5);
}
.pc-top{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  color:#9cc7ff;font:800 12px Tajawal;
}
.pc-top i{color:var(--blue)}
.price-card h2{margin:0 0 6px;font:900 22px/1.25 Tajawal;color:#fff}
.price-card .pc-sub{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.7;font-weight:600;min-height:42px}
.pc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.pc-price b{font:900 34px/1 Tajawal;color:#fff}
.pc-price span{color:var(--muted);font:700 13px Tajawal}
.pc-save{margin:0 0 16px;color:#9dffc8;font:800 12.5px Tajawal;min-height:20px}
.pc-feats{list-style:none;padding:0;margin:0 0 16px;flex:1}
.pc-feats li{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 11px;color:#c5d0e0;font-size:13.5px;line-height:1.55;font-weight:600;
}
.pc-feats li i{color:var(--blue);margin-top:3px;flex:0 0 auto}
.pc-note{margin:0 0 14px;color:var(--muted);font-size:12.5px;font-weight:700}
.btn-solid,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 16px;border-radius:14px;font:800 14px Tajawal;cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s;
}
.btn-solid{
  border:0;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow:0 10px 24px rgba(61,123,245,.28);
}
.btn-solid:hover{transform:translateY(-1px)}
.btn-outline{
  border:1px solid rgba(61,123,245,.5);color:#9cc7ff;background:rgba(61,123,245,.06);
}
.btn-outline:hover{background:rgba(61,123,245,.12);border-color:rgba(61,123,245,.75)}

.trust-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 48px;
}
.trust-box{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 16px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
}
.trust-box i{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:rgba(61,123,245,.12);color:#7eb6ff;flex:0 0 auto;
}
.trust-box b{display:block;margin:0 0 4px;font:800 14px Tajawal;color:#fff}
.trust-box span{display:block;color:var(--muted);font-size:12.5px;line-height:1.7;font-weight:600}

.faq-head{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 22px;font:900 24px Tajawal;color:#fff;
}
.faq-head i{color:var(--blue)}
.faq-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-bottom:56px;
}
.faq-card{
  padding:18px 18px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
}
.faq-card h3{margin:0 0 10px;font:800 15px/1.45 Tajawal;color:#fff}
.faq-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.8;font-weight:600}

/* Features page */
.stat-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin:8px 0 42px;
}
.stat-box{
  text-align:center;padding:22px 12px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(61,123,245,.28);
}
.stat-box b{display:block;font:900 28px/1 Tajawal;color:#5b9cff;margin-bottom:8px}
.stat-box span{color:var(--muted);font:700 13px Tajawal}

.sec-label{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font:900 20px Tajawal;color:#fff;
}
.sec-label::before{
  content:"";width:4px;height:22px;border-radius:4px;
  background:linear-gradient(180deg,var(--blue),var(--blue2));
}
.feat-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:0 0 40px;
}
.feat-card{
  padding:22px 20px;border-radius:18px;
  background:linear-gradient(165deg,rgba(18,26,40,.96),rgba(8,12,20,.96));
  border:1px solid var(--line);transition:border-color .2s,transform .2s;
}
.feat-card:hover{border-color:rgba(61,123,245,.4);transform:translateY(-2px)}
.feat-ico{
  width:48px;height:48px;border-radius:14px;margin-bottom:14px;
  display:grid;place-items:center;font-size:20px;color:#9cc7ff;
  background:rgba(61,123,245,.12);border:1px solid rgba(61,123,245,.28);
  box-shadow:0 0 20px rgba(61,123,245,.15);
}
.feat-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tag{
  display:inline-flex;padding:4px 9px;border-radius:999px;font:800 11px Tajawal;
  color:#9cc7ff;background:rgba(61,123,245,.12);border:1px solid rgba(61,123,245,.25);
}
.tag.warn{color:#ffd48a;background:rgba(255,180,60,.1);border-color:rgba(255,180,60,.28)}
.tag.hot{color:#9dffc8;background:rgba(61,255,154,.08);border-color:rgba(61,255,154,.28)}
.feat-card h3{margin:0 0 8px;font:900 17px/1.35 Tajawal;color:#fff}
.feat-card > p{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.7;font-weight:600}
.feat-card ul{list-style:none;padding:0;margin:0}
.feat-card li{
  position:relative;padding-inline-start:16px;margin:0 0 8px;
  color:#c5d0e0;font-size:13px;line-height:1.55;font-weight:600;
}
.feat-card li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--blue);
}

.mp-foot{
  text-align:center;padding:10px 0 40px;color:#6d7d92;font-size:12.5px;font-weight:700;
}
.mp-site-footer{
  margin:28px 0 8px;padding:28px 0 8px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.mp-site-footer h4{margin:0 0 12px;font:800 13px/1 Tajawal;color:#fff}
.mp-site-footer a{
  display:flex;align-items:center;gap:8px;color:#8b9fb6;font-size:13px;font-weight:700;
  text-decoration:none;margin-bottom:9px;
}
.mp-site-footer a:hover{color:#fff}
.mp-site-footer a[hidden]{display:none!important}
@media(max-width:720px){
  .mp-site-footer{grid-template-columns:1fr;gap:22px}
}

/* ===== Guides ===== */
.guides-hub{display:block}
.guides-hub.hide{display:none}
.guide-detail{display:none;margin-bottom:40px}
.guide-detail.show{display:block}
.guides-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:8px 0 36px;
}
.guide-card{
  display:flex;flex-direction:column;gap:10px;
  padding:20px 18px;border-radius:18px;text-align:right;
  background:linear-gradient(165deg,rgba(18,26,40,.96),rgba(8,12,20,.96));
  border:1px solid var(--line);transition:border-color .2s,transform .2s;
  cursor:pointer;color:inherit;
}
.guide-card:hover{border-color:rgba(61,123,245,.45);transform:translateY(-2px)}
.guide-card .g-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(61,123,245,.12);border:1px solid rgba(61,123,245,.3);color:#8ebfff;font-size:18px;
}
.guide-card h3{margin:0;font:900 16px/1.35 Tajawal;color:#fff}
.guide-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7;font-weight:600;flex:1}
.guide-card .g-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  color:#7eb6ff;font:800 13px Tajawal;
}
.guide-panel{
  border:1px solid rgba(61,123,245,.35);border-radius:22px;padding:28px 26px;
  background:linear-gradient(165deg,rgba(14,21,34,.98),rgba(8,12,20,.98));
  box-shadow:0 24px 60px -30px rgba(61,123,245,.35);
}
.guide-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  color:#9cc7ff;font:800 13px Tajawal;cursor:pointer;border:0;background:transparent;padding:0;
}
.guide-back:hover{color:#fff}
.guide-panel-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:8px}
.guide-panel-head .g-ico{
  width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(61,123,245,.14);border:1px solid rgba(61,123,245,.35);color:#8ebfff;font-size:20px;
}
.guide-panel-head h2{margin:0 0 6px;font:900 clamp(22px,3vw,28px)/1.3 Tajawal;color:#5b9cff}
.guide-panel-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.75;font-weight:600}
.guide-hr{height:1px;background:var(--line);margin:18px 0 22px;border:0}
.g-step{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px}
.g-num{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font:900 13px Tajawal;
}
.g-step h3{margin:0 0 6px;font:800 15px/1.4 Tajawal;color:#fff}
.g-step p{margin:0;color:#b7c7da;font-size:13.5px;line-height:1.8;font-weight:600}
.g-tip,.g-info{
  display:flex;gap:12px;align-items:flex-start;margin-top:8px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(61,123,245,.35);background:rgba(61,123,245,.07);
  color:#d7e7ff;font-size:13.5px;line-height:1.75;font-weight:600;
}
.g-tip i,.g-info i{color:#7eb6ff;margin-top:3px;flex:0 0 auto}
.g-list{display:grid;gap:10px;margin:4px 0 18px}
.g-item{
  display:flex;gap:12px;align-items:flex-start;padding:14px 14px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);
}
.g-item i{color:#7eb6ff;margin-top:2px;flex:0 0 auto;width:20px;text-align:center}
.g-item b{display:block;margin:0 0 4px;font:800 14px Tajawal;color:#fff}
.g-item span{display:block;color:var(--muted);font-size:13px;line-height:1.7;font-weight:600}
.g-table{width:100%;border-collapse:separate;border-spacing:0 8px;margin:8px 0 16px}
.g-table th{
  text-align:right;padding:8px 10px;color:#9cc7ff;font:800 12px Tajawal;
  border-bottom:1px solid var(--line);
}
.g-table td{
  padding:10px;background:rgba(255,255,255,.025);color:#d7e3f3;font-size:13px;font-weight:600;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.g-table td:first-child{border-inline-start:1px solid var(--line);border-radius:10px 0 0 10px}
.g-table td:last-child{border-inline-end:1px solid var(--line);border-radius:0 10px 10px 0}
.g-cmd{
  display:inline-block;padding:4px 9px;border-radius:8px;direction:ltr;unicode-bidi:plaintext;
  background:rgba(61,123,245,.12);border:1px solid rgba(61,123,245,.28);color:#cfe6ff;
  font:800 12px ui-monospace,Consolas,monospace;margin:2px;
}
.guides-help{
  text-align:center;padding:28px 20px;border-radius:18px;margin:10px 0 40px;
  border:1px solid rgba(61,123,245,.35);background:rgba(61,123,245,.06);
}
.guides-help p{margin:0 0 16px;color:#c5d0e0;font-size:15px;font-weight:700}
.guides-help .row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.guides-help a{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;
  font:800 13px Tajawal;border:1px solid rgba(61,123,245,.45);color:#9cc7ff;
  background:rgba(61,123,245,.08);
}
.guides-help a.solid{background:linear-gradient(135deg,var(--blue),var(--blue2));border:0;color:#fff}

/* ===== FAQ page ===== */
.faq-cat{margin:0 0 28px}
.faq-cat-title{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;
  font:900 18px Tajawal;color:#fff;
}
.faq-cat-title i{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(61,123,245,.14);border:1px solid rgba(61,123,245,.4);color:#7eb6ff;font-size:13px;
}
.faq-acc{display:grid;gap:12px}
.faq-item{
  border:1px solid rgba(61,123,245,.32);border-radius:16px;overflow:hidden;
  background:linear-gradient(165deg,rgba(14,21,34,.98),rgba(8,12,20,.98));
}
.faq-item.open{border-color:rgba(61,123,245,.55);box-shadow:0 12px 32px -18px rgba(61,123,245,.45)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:transparent;border:0;color:#fff;cursor:pointer;text-align:right;
  font:800 15px/1.4 Tajawal;
}
.faq-q:hover{background:rgba(61,123,245,.06)}
.faq-q .fq-ico{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(61,123,245,.16);border:1px solid rgba(61,123,245,.4);color:#9cc7ff;font-size:14px;
}
.faq-q .fq-text{flex:1;min-width:0}
.faq-q .fq-chev{
  color:#7eb6ff;font-size:13px;transition:transform .2s ease;flex:0 0 auto;
}
.faq-item.open .fq-chev{transform:rotate(180deg)}
.faq-a{
  display:none;padding:4px 18px 18px;color:#c5d0e0;font-size:14px;line-height:1.85;font-weight:600;
  border-top:1px solid rgba(255,255,255,.06);
}
.faq-item.open .faq-a{display:block}
.faq-a p{margin:12px 0}
.faq-a ul{list-style:none;padding:0;margin:10px 0}
.faq-a li{
  position:relative;padding-inline-start:18px;margin:0 0 10px;
}
.faq-a li::before{
  content:"";position:absolute;inset-inline-start:0;top:.7em;
  border:solid transparent;border-width:5px 7px;
  border-inline-start-color:var(--blue);
}
.faq-a .hl{color:#7eb6ff;font-weight:800}
.faq-a a{color:#7eb6ff;font-weight:800;text-decoration:underline}

@media(max-width:980px){
  .price-grid,.faq-grid,.feat-grid,.guides-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wrap{width:min(100% - 24px,1120px)}
  .price-grid,.faq-grid,.feat-grid,.stat-row,.guides-grid{grid-template-columns:1fr}
  .mp-hero{padding-top:28px}
  .price-card.featured{transform:none}
  .guide-panel{padding:20px 16px}
  .faq-q{font-size:14px;padding:14px}
}