/* SkySeo Prime — Direction C — واجهة Frontend للدمج مع الباك إند */

:root{
  --navy:#0f1e3d;
  --navy-2:#16294f;
  --ink:#0f1e3d;
  --ink-soft:#4a5b7c;
  --muted:#65758f;
  --line:#e3e9f3;
  --line-2:#eef2f8;
  --bg:#ffffff;
  --bg-soft:#f6f8fc;
  --blue:#2563eb;
  --blue-2:#1d4ed8;
  --blue-soft:#e8efff;
  --gold:#c8942b;
  --gold-soft:#fbf1dd;
  --teal:#0f9d8f;
  --wa:#25D366;
  --wa-hover:#1EBE5D;
  --r:20px;
  --max:1180px;
  --sh-1:0 1px 2px rgba(15,30,61,.04), 0 8px 24px -16px rgba(15,30,61,.18);
  --sh-2:0 2px 4px rgba(15,30,61,.04), 0 24px 48px -28px rgba(15,30,61,.30);
  --sh-3:0 40px 80px -40px rgba(15,30,61,.45);
  --f-head:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Cairo",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.75;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
section{scroll-margin-top:96px}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}

.skip{
  position:fixed;top:10px;right:16px;z-index:300;background:var(--navy);color:#fff;
  padding:10px 18px;border-radius:10px;font-weight:600;
  transform:translateY(-250%);transition:transform .2s ease;
}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-head);font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn.lg{padding:15px 30px;font-size:16.5px}
.btn.sm{padding:9px 18px;font-size:14px}
.btn.primary{background:linear-gradient(180deg,var(--blue),var(--blue-2));color:#fff;box-shadow:0 12px 24px -12px rgba(37,99,235,.65)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(37,99,235,.7)}
.btn.outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.outline:hover{border-color:var(--blue);color:var(--blue-2);transform:translateY(-2px)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue-2)}
.btn.wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn.wa svg{fill:#fff}
.btn.wa:hover{background:var(--wa-hover);border-color:var(--wa-hover);color:#fff;transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(37,211,102,.55)}

.eyebrow{
  display:inline-block;font-family:var(--f-head);font-weight:700;font-size:13px;
  letter-spacing:.06em;color:var(--blue-2);background:var(--blue-soft);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.eyebrow.gold{color:#8a6212;background:var(--gold-soft)}

/* ---------- إطار لقطة الشاشة ---------- */
.br-bar{
  display:flex;align-items:center;gap:6px;padding:9px 13px;
  background:#f2f6fc;border-bottom:1px solid var(--line);
}
.br-bar i{width:9px;height:9px;border-radius:50%;background:#dbe3ef;flex:none}
.br-bar i:first-child{background:#f2b3ab}
.br-bar i:nth-child(2){background:#f4d79a}
.br-bar i:nth-child(3){background:#b6dfc0}
.br-url{
  margin-inline-start:8px;font-size:10.5px;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:2px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;
}

/* ---------- هيدر ---------- */
.head{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:box-shadow .25s ease,border-color .25s ease}
.head.stuck{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(15,30,61,.5)}
.head-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:44px;height:44px;border-radius:50%}
.foot .brand img{box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.brand-tx{display:flex;flex-direction:column;line-height:1.2}
.brand-tx b{font-family:var(--f-head);font-weight:800;font-size:17px;color:var(--navy)}
.brand-tx i{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin-top:3px}

.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--ink-soft);
  padding:9px 13px;border-radius:10px;transition:color .18s,background .18s;
}
.nav a:hover{color:var(--blue-2);background:var(--blue-soft)}
.head-cta{display:flex;gap:9px;flex:none}
.burger{display:none;background:none;border:1.5px solid var(--line);border-radius:11px;width:44px;height:44px;padding:0;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--navy);margin:4px auto;border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbfcff 0%,#f2f6fd 55%,#ffffff 100%);padding:64px 0 90px}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;border-radius:50%;filter:blur(70px)}
.g1{width:520px;height:520px;background:rgba(37,99,235,.16);top:-160px;left:-120px}
.g2{width:420px;height:420px;background:rgba(200,148,43,.13);bottom:-140px;right:-100px}
.skyline{position:absolute;bottom:0;left:0;width:100%;height:190px;fill:rgba(15,30,61,.038)}

.hero-in{position:relative;display:grid;grid-template-columns:1.02fr 1.18fr;gap:44px;align-items:center}
.hero-tx{max-width:600px}
.hero h1{font-size:clamp(33px,3.9vw,52px);font-weight:900;color:var(--navy);line-height:1.22}
.mark{
  display:inline;color:var(--blue-2);padding-bottom:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(90deg,rgba(200,148,43,.45),rgba(200,148,43,.10));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 9px;
}
.lede{margin-top:20px;font-size:18px;line-height:1.85;color:var(--ink-soft);max-width:520px}
.hero-btns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px}
.hero-facts li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.hero-facts svg{width:17px;height:17px;fill:var(--teal);flex:none}

/* --- تركيبة اللقطات الحقيقية --- */
.hero-art{position:relative;height:472px}
.art{position:absolute;border-radius:16px;background:#fff;overflow:hidden}
.art img{width:100%;height:auto}

.browser{
  right:0;top:26px;width:80%;border:1px solid var(--line);box-shadow:var(--sh-3);
  animation:float 9s ease-in-out infinite;
}
.browser img{aspect-ratio:16/10;object-fit:cover;object-position:top center}

.panel{
  left:-10px;top:0;width:46%;border:1px solid var(--line);box-shadow:var(--sh-2);
  animation:float 11s ease-in-out infinite reverse;
}
.pn-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--navy);border-bottom:0}
.pn-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.pn-bar b{margin-inline-start:8px;font-family:var(--f-head);font-weight:700;font-size:10.5px;color:#cfdcf4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel img{aspect-ratio:16/9;object-fit:cover;object-position:top center}

.phone{
  left:5%;bottom:0;width:23%;padding:6px;border-radius:26px;
  background:linear-gradient(160deg,#1b2c52,#0f1e3d);box-shadow:var(--sh-3);
  animation:float 10s ease-in-out .6s infinite;
}
.phone img{border-radius:21px;aspect-ratio:9/17;object-fit:cover;object-position:top center}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- شريط الثقة ---------- */
.trust{border-block:1px solid var(--line);background:var(--bg-soft)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr)}
.tr{padding:26px 24px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.tr:first-child{border-inline-start:0}
.tr svg{width:22px;height:22px;fill:var(--blue);margin-bottom:4px}
.tr b{font-family:var(--f-head);font-weight:700;font-size:16px;color:var(--navy)}
.tr span{font-size:13.5px;color:var(--ink-soft);line-height:1.65}

/* ---------- أقسام عامة ---------- */
.sec{padding:96px 0}
.sec-head{max-width:660px;margin-inline:auto;text-align:center;margin-bottom:52px}
.sec-head h2{font-size:clamp(26px,3.1vw,38px);font-weight:800;color:var(--navy)}
.sec-head p{margin-top:14px;font-size:17px;color:var(--ink-soft);line-height:1.85}
.sec-head.light h2{color:#fff}
.sec-head.light p{color:#b9c8e4}
.sec-head.right{text-align:start;margin-inline:0}

/* ---------- الخدمات: شبكة 4 / 2 / 1 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;position:relative;overflow:hidden;
  height:100%;
}
.card::before{content:"";position:absolute;inset-inline-start:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),#6f9bf7);transition:width .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#d5e0f2}
.card:hover::before{width:100%}
.card.accent{border-color:#f0dfba;background:linear-gradient(180deg,#fffdf8,#fff)}
.card.accent::before{background:linear-gradient(90deg,var(--gold),#e5be74)}
.ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:16px}
.ic svg{width:23px;height:23px;fill:currentColor}
.ic.blue,.gi.blue{background:#e6efff;color:#2159d0}
.ic.indigo,.gi.indigo{background:#eae9ff;color:#4a46c9}
.ic.gold,.gi.gold{background:var(--gold-soft);color:#a9791d}
.ic.teal{background:#e0f5f2;color:#0c8377}
.ic.violet,.gi.violet{background:#f3e9fd;color:#7b3fc4}
.ic.green{background:#e4f6e9;color:#1f8a45}
.ic.sky{background:#e2f2fd;color:#1a7bb0}
.ic.slate{background:#eaeef5;color:#41527a}
.card h3{font-size:18px;font-weight:800;color:var(--navy)}
.card p{margin-top:9px;font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.card ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.card li{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px}

/* ---------- الأنظمة الإدارية ---------- */
.systems{background:var(--bg-soft);border-block:1px solid var(--line)}
.sys-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.sys-tx h2{font-size:clamp(25px,2.9vw,35px);font-weight:800;color:var(--navy)}
.sys-tx>p{margin-top:16px;font-size:16.5px;color:var(--ink-soft);line-height:1.9}
.ticks{margin:22px 0 28px;display:grid;gap:11px}
.ticks li{position:relative;padding-inline-start:30px;font-size:15.5px;color:var(--ink)}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;width:19px;height:19px;border-radius:50%;
  background:var(--blue-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4Z'/></svg>") center/12px no-repeat;
}
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh-3)}
.shot img{width:100%;height:auto}
.shot-note{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.7}

/* ---------- الأعمال ---------- */
.works{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.work{
  position:relative;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.work:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#d5e0f2}
.work:focus-within{border-color:var(--blue);box-shadow:var(--sh-2)}

.w-shot{
  position:relative;aspect-ratio:16/9;padding:26px 26px 0;overflow:hidden;
  background:linear-gradient(140deg,#eaf0fa 0%,#f7fafe 60%,#fdf7ea 100%);
  border-bottom:1px solid var(--line);
}
.s-web{
  height:100%;border-radius:12px 12px 0 0;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-bottom:0;box-shadow:0 20px 40px -26px rgba(15,30,61,.55);
}
.s-web img{width:100%;height:auto}
.s-app{
  position:absolute;inset-inline-start:26px;bottom:0;width:18%;
  padding:5px 5px 0;border-radius:16px 16px 0 0;
  background:linear-gradient(160deg,#1b2c52,#0f1e3d);box-shadow:var(--sh-3);
}
.s-app img{width:100%;height:auto;border-radius:12px 12px 0 0}
.w-shot.one .s-web{margin-inline:auto;width:92%}

.w-body{padding:22px 24px 24px}
.w-kicker{display:block;font-size:12px;font-weight:600;color:var(--blue-2);letter-spacing:.02em}
.w-body h3{margin-top:5px;font-size:20px;font-weight:800;color:var(--navy)}
.w-body h3 a{transition:color .18s}
.work:hover h3 a{color:var(--blue-2)}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.w-body p{margin-top:9px;font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px}
.w-links{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.w-links a{
  font-size:12.5px;font-weight:700;color:var(--blue-2);background:var(--blue-soft);
  border-radius:999px;padding:7px 14px;transition:background .18s,color .18s;
}
.w-links a:hover{background:var(--blue);color:#fff}

.work-note{text-align:center;margin-top:34px;font-size:16px;color:var(--ink-soft)}
.work-note a{color:var(--blue-2);font-weight:700;border-bottom:2px solid var(--blue-soft)}
.work-note a:hover{border-color:var(--blue)}

/* ---------- طريقة العمل ---------- */
.process{background:linear-gradient(160deg,var(--navy) 0%,#132a55 60%,#1b3565 100%);position:relative;overflow:hidden}
.process::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 0%,rgba(37,99,235,.28),transparent 60%)}
.process .wrap{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:26px 22px;transition:background .22s,transform .22s;
}
.steps li:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.st-n{font-family:var(--f-head);font-weight:900;font-size:30px;color:var(--gold);opacity:.85;direction:ltr;display:block}
.steps h3{margin-top:8px;font-size:18px;font-weight:800;color:#fff}
.steps p{margin-top:9px;font-size:14.5px;color:#b9c8e4;line-height:1.8}

/* ---------- لماذا نحن ---------- */
.why-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.why-in .sec-head{margin-bottom:0;position:sticky;top:110px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wy{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;transition:border-color .2s,box-shadow .2s}
.wy::before{content:"";position:absolute;inset-inline-start:22px;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--blue)}
.wy:nth-child(3)::before,.wy:nth-child(4)::before{background:var(--gold)}
.wy:hover{border-color:#d5e0f2;box-shadow:var(--sh-1)}
.wy b{display:block;font-family:var(--f-head);font-weight:800;font-size:16.5px;color:var(--navy)}
.wy p{margin-top:7px;font-size:14.5px;color:var(--ink-soft);line-height:1.8}

/* ---------- الأسئلة ---------- */
.faq{background:var(--bg-soft);border-block:1px solid var(--line)}
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
.faq-in .sec-head{margin-bottom:0}
.faq-in .sec-head .btn{margin-top:20px}
.acc{display:grid;gap:10px}
.acc details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px;transition:border-color .2s,box-shadow .2s}
.acc details[open]{border-color:#cddcf5;box-shadow:var(--sh-1)}
.acc summary{
  list-style:none;cursor:pointer;padding:17px 0;font-family:var(--f-head);font-weight:700;
  font-size:16px;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";width:22px;height:22px;flex:none;border-radius:50%;background:var(--blue-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><path d='M11 5h2v14h-2Z'/><path d='M5 11h14v2H5Z'/></svg>");
  background-size:14px;background-position:center;background-repeat:no-repeat;transition:transform .25s;
}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{padding:0 0 18px;font-size:15px;color:var(--ink-soft);line-height:1.85;border-top:1px solid var(--line-2);padding-top:14px}

/* ---------- الدعوة النهائية ---------- */
.cta{padding:92px 0;background:linear-gradient(140deg,var(--navy) 0%,#16294f 50%,#1e3a70 100%);position:relative;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(200,148,43,.14);filter:blur(90px);top:-260px;inset-inline-end:-160px;pointer-events:none}
.cta::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(37,99,235,.28);filter:blur(90px);bottom:-260px;inset-inline-start:-140px;pointer-events:none}
.cta-in{position:relative;z-index:2;max-width:720px;margin-inline:auto}
.cta h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;color:#fff}
.cta p{margin-top:14px;font-size:17.5px;color:#bccbe6}
.cta-btns{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap;position:relative;z-index:3;scroll-margin-bottom:120px}
.cta-btns a{position:relative;z-index:3;pointer-events:auto}
.cta-fine{display:block;margin-top:24px;font-size:14px;color:#8fa4c8}

/* ---------- الفوتر ---------- */
.foot{background:#0b1730;color:#a9b9d6;padding:60px 0 0}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:44px}
.foot a.brand{display:flex;align-items:center;gap:11px;padding:0}
.foot .brand-tx b{color:#fff}
.foot .brand-tx i{color:#7b8db0}
.fcol.about p{margin-top:16px;font-size:14.5px;line-height:1.85;max-width:330px}
.fcol a.ig{display:inline-flex;align-items:center;gap:8px;width:auto;margin-top:16px;font-size:14px;font-weight:600;color:#cdd9ee;background:rgba(255,255,255,.06);border-radius:999px;padding:8px 16px;direction:ltr}
.ig svg{width:17px;height:17px;fill:#cdd9ee}
.ig:hover{background:rgba(255,255,255,.12);color:#fff}
.fcol h4{font-size:15px;font-weight:800;color:#fff;margin-bottom:16px}
.fcol a{display:block;font-size:14.5px;padding:5px 0;transition:color .18s}
.fcol a:hover{color:#fff}
.fcol a.f-ico{display:flex;align-items:center;gap:8px}
.fcol a.f-ico svg{width:16px;height:16px;fill:currentColor;flex:none}
.addr{display:block;margin-top:10px;font-size:14px;line-height:1.8;color:#8fa1c1}
.foot-b{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.09);font-size:13px;color:#7b8db0}
.badge{background:rgba(200,148,43,.16);color:#e0b25c;border-radius:999px;padding:4px 12px;font-weight:600}

/* ---------- شريط الجوال ---------- */
.mbar{display:none}

/* ---------- حركة الظهور ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 1080 ---------- */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:9px 10px;font-size:14px}
  .head-cta .btn.ghost{display:none}
}
@media (min-width:1081px){
  .cards{grid-template-columns:repeat(4,1fr)}
}

/* ---------- تابلت 900 ---------- */
@media (max-width:900px){
  .sec{padding:72px 0}
  .head-in{height:66px}
  .nav{
    position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 20px 16px;box-shadow:var(--sh-2);display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 6px;font-size:16px;border-bottom:1px solid var(--line-2)}
  .head-cta{display:none}
  .burger{display:block;margin-inline-start:auto}

  .hero{padding:44px 0 72px}
  .hero-in{grid-template-columns:1fr;gap:36px}
  .hero-tx{max-width:none}
  .hero-art{height:420px;max-width:600px;margin-inline:auto;width:100%}

  .trust-in{grid-template-columns:1fr 1fr}
  .tr{border-top:1px solid var(--line)}
  .tr:nth-child(-n+2){border-top:0}
  .tr:nth-child(odd){border-inline-start:0}

  .sys-in,.why-in,.faq-in{grid-template-columns:1fr;gap:36px}
  .why-in .sec-head{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .works{grid-template-columns:1fr}
  .w-shot{aspect-ratio:16/8}
  .s-app{width:14%}
  .foot-in{grid-template-columns:1fr 1fr;gap:32px}
  .fcol.about{grid-column:1/-1}
}

/* ---------- جوال 640 ---------- */
@media (max-width:640px){
  body{font-size:15.5px}
  .wrap{width:min(100% - 32px,var(--max))}
  .sec{padding:58px 0}
  .sec-head{margin-bottom:34px}
  .brand img{width:38px;height:38px}
  .brand-tx b{font-size:15.5px}
  .brand-tx i{font-size:10.5px;margin-top:3px}

  .hero{padding:34px 0 56px}
  .hero h1{font-size:31px}
  .lede{font-size:16px;margin-top:16px}
  .hero-btns{gap:10px}
  .hero-btns .btn{flex:1 1 100%}
  .hero-facts{gap:8px 16px;margin-top:22px}
  .hero-facts li{font-size:13.5px}
  .hero-art{height:300px}
  .browser{width:84%;top:22px}
  .panel{width:52%;left:-12px}
  .phone{width:29%;left:2%}

  .trust-in{grid-template-columns:1fr}
  .tr{border-inline-start:0;padding:20px 4px}
  .tr:first-child{border-top:0}

  .cards{grid-template-columns:1fr}
  .card{padding:18px 16px}
  .ic{width:40px;height:40px;border-radius:12px;margin-bottom:12px}

  .shot-note{font-size:12.5px}
  .w-shot{aspect-ratio:16/10;padding:16px 16px 0}
  .s-web{border-radius:9px 9px 0 0}
  .s-app{inset-inline-start:16px;width:19%;padding:3px 3px 0;border-radius:11px 11px 0 0}
  .s-app img{border-radius:8px 8px 0 0}
  .w-body{padding:18px}
  .w-body h3{font-size:18px}

  .steps,.why-grid{grid-template-columns:1fr}
  .acc summary{font-size:15px}
  .cta{padding:64px 16px calc(130px + env(safe-area-inset-bottom))}
  .cta-btns{margin-bottom:20px}
  .cta-btns .btn{flex:1 1 100%}
  .foot{padding-top:46px}
  .foot-in{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .foot-b{justify-content:center;text-align:center;padding-bottom:calc(88px + env(safe-area-inset-bottom))}

  .mbar{
    display:flex;gap:10px;position:fixed;inset-inline:0;bottom:0;z-index:120;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  }
  .mbar .btn{flex:1;padding:13px 10px}
}

a.card{display:flex;flex-direction:column;color:inherit;height:100%}
a.card .more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;
  font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--blue-2);
}
a.card:hover .more{color:var(--blue)}

/* ---------- صفحات داخلية ---------- */
.page-hero{padding:56px 0 48px;background:linear-gradient(180deg,#fbfcff 0%,#f4f7fd 100%);border-bottom:1px solid var(--line)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--ink-soft);font-weight:600}
.crumbs a:hover{color:var(--blue-2)}
.crumbs span{opacity:.5}
.page-hero h1{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--navy);max-width:760px}
.page-hero .lede{margin-top:16px;font-size:18px;color:var(--ink-soft);max-width:680px;line-height:1.85}
.page-hero .hero-btns{margin-top:26px}
.page-visual{margin-top:36px;max-width:860px;width:100%;box-shadow:var(--sh-2)}
.include .card{padding:22px}
.include{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.include .card{margin:0}
.cross{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;
  background:var(--gold-soft);border:1px solid #f0dfba;border-radius:var(--r);padding:22px 26px;
}
.cross p{font-size:15.5px;color:var(--ink);max-width:640px;line-height:1.8}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel{
  display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.rel:hover{transform:translateY(-4px);box-shadow:var(--sh-1);border-color:#d5e0f2}
.rel b{display:block;font-family:var(--f-head);font-weight:800;font-size:16px;color:var(--navy)}
.rel span{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft);line-height:1.7}
.legal{max-width:760px}
.legal h2{font-size:22px;font-weight:800;color:var(--navy);margin:32px 0 10px}
.legal p,.legal li{font-size:16px;color:var(--ink-soft);line-height:1.9}
.legal ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.legal li{padding-inline-start:18px;position:relative}
.legal li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue-2);background:var(--blue-soft)}

@media (max-width:900px){
  .include,.related{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .page-hero{padding:36px 0 40px}
  .include,.related{grid-template-columns:1fr}
  .cross{padding:18px}
}