/* نوكس سمارت — أقسام الصفحة بسمتين، مع مراسٍ ليلية ثابتة في الوضع الفاتح */

/* قسم المتاجر */
.grid2{display:grid;gap:52px;grid-template-columns:1.05fr .95fr;align-items:center}
.spot{background:var(--bg-soft)}
.shopart{width:100%;max-width:440px;justify-self:center;color:var(--head);filter:drop-shadow(0 24px 50px rgba(7,9,38,.3))}
.st2{fill:none;stroke:currentColor;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}

/* الخطط التفصيلية */
.plans{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);margin-top:36px}
.plan{border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:.25s}
.plan:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.6)}
.plan h3{color:var(--head);font-size:20px;font-weight:900}
.fit{color:var(--muted);font-size:13.5px;margin:2px 0 14px}
.plan ul{list-style:none;flex:1;border-top:1px dashed var(--line);padding-top:14px}
.plan li{padding:6px 20px 6px 0;position:relative;font-size:14.5px;color:var(--ink)}
.plan li::before{content:"";position:absolute;top:14px;inset-inline-start:0;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);border-radius:2px}
.price{color:var(--head);font-weight:900;font-size:34px;margin:16px 0 14px;direction:ltr;text-align:right}
.price i{font-style:normal;font-weight:400;font-size:14px;color:var(--muted);margin-inline-start:8px}
.plan .btn{text-align:center}
.note{margin-top:28px;color:var(--muted);font-size:15px}
/* خطة «الأكثر طلبًا» — مرساة ليلية بألوان ثابتة في السمتين */
.plan.hot{background:linear-gradient(165deg,var(--grad-a),var(--grad-b));border-color:rgba(34,211,238,.5);box-shadow:0 24px 60px rgba(42,47,143,.4)}
.hot h3,.hot .price{color:#fff}
.hot .fit,.hot .price i{color:#B9C0E6}
.hot li{color:#EAECF8}
.hot ul{border-top-color:rgba(255,255,255,.18)}
.badge{position:absolute;top:-14px;inset-inline-start:22px;background:var(--accent);color:#06202A;font-weight:700;font-size:13px;padding:4px 14px;border-radius:99px}

/* قائمة نقاط القسم البارز */
.dlist{list-style:none;display:grid;gap:9px;margin:0 0 28px}
.dlist li{position:relative;padding-inline-start:20px;color:var(--ink);font-size:15.5px}
.dlist li::before{content:"";position:absolute;top:11px;inset-inline-start:0;width:9px;height:9px;background:var(--accent);transform:rotate(45deg);border-radius:2px}

/* الحلول */
.sol .soll{margin-top:36px}
.scard{border-radius:18px;padding:26px 22px;display:flex;flex-direction:column;transition:.25s}
.scard:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.6)}
.scard h3{color:var(--head);font-size:18.5px;font-weight:700;margin-bottom:6px}
.scard p{color:var(--muted);font-size:14.5px;line-height:1.75;flex:1}
.more{color:var(--accent-text);font-weight:700;font-size:14px;margin-top:14px;transition:.2s}
.scard:hover .more{transform:translateX(-5px)}

/* لماذا نحن */
.why{background:var(--bg-soft)}
.wlist{list-style:none;display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:34px}
.wlist li{display:flex;gap:18px;border-radius:18px;padding:24px 22px}
.wlist b{color:var(--accent-text);font-weight:900;font-size:22px;line-height:1;direction:ltr}
.wlist h3{color:var(--head);font-size:18px;font-weight:700;margin-bottom:4px}
.wlist p{color:var(--muted);font-size:14.5px;line-height:1.75}

/* معرض الأعمال — بلاطات ليلية ثابتة */
.works{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.wk{border-radius:18px;border:1px solid var(--line);min-height:170px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:0}
.wk img{width:64px;opacity:.5}
.wk figcaption{position:absolute;bottom:0;inset-inline:0;padding:10px 16px;background:rgba(9,11,32,.72);color:#fff;font-weight:700;font-size:14.5px}
.g1{background:linear-gradient(150deg,#2A2F8F,#0E1030)}
.g2{background:linear-gradient(150deg,#173059,#0B0D26)}
.g3{background:linear-gradient(150deg,#123A46,#0B0D26)}

/* آراء العملاء */
.grid3{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.quotes{margin-top:36px}
.q{border-radius:18px;padding:26px 24px;position:relative}
.q::before{content:"";position:absolute;top:-6px;inset-inline-start:26px;width:12px;height:12px;background:var(--accent);transform:rotate(45deg);border-radius:2px}
.q p{color:var(--ink);font-size:15.5px;line-height:1.9}
.q footer{color:var(--muted);font-size:13.5px;margin-top:14px;font-weight:700}

/* النشرة ونطاق التواصل — مرساة ليلية ثابتة */
.band{background:linear-gradient(150deg,var(--grad-a),var(--grad-b));border:1px solid rgba(36,42,94,.7);border-radius:26px;padding:56px 40px;text-align:center}
.band h2{color:#fff}
.band .sub{color:#B9C0E6}
.news{display:flex;gap:10px;max-width:520px;margin:0 auto 22px;background:rgba(9,11,32,.55);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:9px}
.news input{flex:1;background:transparent;border:0;outline:0;color:#fff;font:inherit;font-size:15.5px;padding:0 14px;min-width:0}
.news input::placeholder{color:#8B93C4}
.news input:focus{outline:2px solid rgba(34,211,238,.5);outline-offset:5px;border-radius:9px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.cta.center{justify-content:center}
.band .btn.ghost{color:#EAECF8;border-color:rgba(255,255,255,.3)}
.band .btn.ghost:hover{border-color:var(--accent)}



/* الظهور عند التمرير (مشروط بالجافاسكربت) */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
.grid4>*:nth-child(2),.plans>*:nth-child(2),.grid3>*:nth-child(2),.works>*:nth-child(2){transition-delay:.07s}
.grid4>*:nth-child(3),.plans>*:nth-child(3),.grid3>*:nth-child(3),.works>*:nth-child(3){transition-delay:.14s}
.grid4>*:nth-child(4),.plans>*:nth-child(4){transition-delay:.21s}

/* التجاوب */
@media (max-width:1060px){.plans{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .wlist{grid-template-columns:1fr}
  .works,.grid3{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .bar nav{display:none}
  .hero{padding:70px 0 76px}
  .grid4,.plans,.works,.grid3{grid-template-columns:1fr}
  .dsearch{flex-direction:column}
  .dsearch .btn{width:100%}
  .news{flex-direction:column}
  .news .btn{width:100%}
  .foot{grid-template-columns:1fr}
  .band{padding:44px 22px}
}

/* تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker i{animation:none}
  .orb,.tw{animation:none}
  .tw{opacity:.4}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.fcard:hover,.plan:hover,.scard:hover{transform:none}
}

/* إيقاع خلفيات الأقسام وحدودها */
.feats,.sol,.talk{background:var(--bg-deep)}
#plans{background-color:var(--bg);background-image:radial-gradient(var(--dots) 1px,transparent 1.6px);background-size:26px 26px}
#contact{background:var(--bg-soft)}
body>footer{position:relative}
body>footer::before{content:"";position:absolute;top:-5.5px;left:50%;width:10px;height:10px;background:var(--accent);transform:translateX(-50%) rotate(45deg);border-radius:2px}
/* رفع البطاقات بظل هامس في السمة الفاتحة (فوق الأقسام البيضاء) */
[data-theme="light"] .fcard,[data-theme="light"] .scard,[data-theme="light"] .plan:not(.hot),
[data-theme="light"] .q,[data-theme="light"] .wlist li{box-shadow:0 4px 16px rgba(16,20,70,.06)}

/* وميض يدور حول حدّ الخطة المميزة */
@property --ha{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan.hot::after{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1.5px;background:conic-gradient(from var(--ha),transparent 0 38%,rgba(34,211,238,.9) 50%,transparent 62% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hotspin 5.5s linear infinite;pointer-events:none}
@keyframes hotspin{to{--ha:360deg}}
/* أرورا بطيئة داخل نطاق التواصل */
.band{background:linear-gradient(150deg,var(--grad-a),var(--grad-b),#123A46,var(--grad-a));background-size:280% 280%;animation:aurora 16s ease-in-out infinite}
@keyframes aurora{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
/* بلاطات المعرض تتنفس عند التحويم */
.wk{transition:.35s}
.wk img{transition:transform .5s ease}
.wk:hover{transform:translateY(-5px)}
.wk:hover img{transform:scale(1.14)}
/* أيقونات البطاقات تنبض عند التحويم */
.fcard:hover .ic,.scard:hover .ic{transform:translateY(-3px) scale(1.06)}
.ic{transition:transform .35s ease}
@media (prefers-reduced-motion:reduce){
  .plan.hot::after,.band{animation:none}
  .wk,.wk img,.ic{transition:none}
}
/* شريط التقنيات المتحرك */
.marq{border-block:1px solid var(--line);background:var(--bg-deep);padding:14px 0;overflow:hidden;display:grid;gap:10px}
.mrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mrow.ltr{direction:ltr}
.mtrack{display:inline-block;white-space:nowrap;font-weight:700;font-size:14px;color:var(--muted);animation:slide 38s linear infinite}
.mtrack.rev{animation-direction:reverse;animation-duration:46s}
.mtrack i{color:var(--accent);font-style:normal;margin:0 14px;font-size:11px}
.marq:hover .mtrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* شريط الأرقام */
.statw{align-items:stretch}
.stat{text-align:center;position:relative;padding:10px 0}
.stat+.stat{border-inline-start:1px solid var(--line)}
.stat b{display:block;font-weight:900;font-size:clamp(34px,4vw,48px);color:var(--head);direction:ltr}
.stat>span{color:var(--muted);font-size:14.5px;font-weight:700}
.stat b .cnt{font-size:inherit;color:inherit}
.stat::after{content:"";position:absolute;bottom:-4px;right:50%;width:9px;height:9px;background:var(--accent);transform:translateX(50%) rotate(45deg);border-radius:2px;opacity:.85}

/* كيف نبدأ: مسار يُرسم بين الخطوات */
.process .prowrap{position:relative;margin-top:44px}
.track{position:absolute;top:21px;inset-inline:11%;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),rgba(34,211,238,.25));transform:scaleX(0);transform-origin:100% 50%;transition:transform 1.4s cubic-bezier(.4,0,.2,1) .25s}
.prowrap.in .track i{transform:scaleX(1)}
.psteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.psteps b{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 16px;border-radius:14px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:var(--accent-text);font-weight:900;direction:ltr}
.psteps li{text-align:center}
.psteps h3{color:var(--head);font-size:17.5px;font-weight:900;margin-bottom:5px}
.psteps p{color:var(--muted);font-size:14px;line-height:1.75;max-width:220px;margin:0 auto}

/* الأسئلة الشائعة */
.faq{max-width:760px;margin:36px auto 0;display:grid;gap:12px}
.faq details{border-radius:16px;padding:0 22px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:17px 0;color:var(--head);font-weight:900;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.fx{margin-inline-start:auto;width:12px;height:12px;position:relative;flex-shrink:0}
.fx::before,.fx::after{content:"";position:absolute;background:var(--accent);border-radius:2px;inset:5px 0;transition:transform .3s}
.fx::after{inset:0 5px}
.faq details[open] .fx::after{transform:rotate(90deg);opacity:0}
.faq details[open] .fx::before{transform:rotate(180deg)}
.faq p{color:var(--muted);font-size:15px;padding:0 0 18px;line-height:1.9;animation:faqin .35s ease both}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* FAQ two-column layout — accordion + support artifacts aside */
.faqgrid{max-width:1080px;margin:40px auto 0;display:grid;grid-template-columns:1.12fr .88fr;gap:26px;align-items:start}
.faqgrid .faq{max-width:none;margin:0}
.faqside{position:sticky;top:104px;border-radius:20px;padding:30px 28px;overflow:hidden}
.fs-orb{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.22),transparent 70%);inset-block-start:-46px;inset-inline-start:-40px;pointer-events:none;filter:blur(2px)}
.fs-orb2{inset-block-start:auto;inset-inline-start:auto;inset-block-end:-56px;inset-inline-end:-46px;width:170px;height:170px;background:radial-gradient(circle,rgba(42,47,143,.4),transparent 70%)}
.faqside .eyebrow{margin-bottom:12px}
.fs-h{color:var(--head);font-size:23px;font-weight:900;line-height:1.35;margin:0 0 10px;position:relative}
.fs-sub{color:var(--muted);font-size:14.5px;line-height:1.85;margin:0 0 22px;position:relative}
.fs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:22px;position:relative}
.fs-stat{text-align:center;background:rgba(34,211,238,.06);border:1px solid var(--line);border-radius:14px;padding:14px 6px}
.fs-stat b{display:block;font-size:21px;font-weight:900;color:var(--accent-text);direction:ltr;line-height:1}
.fs-stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.3}
.fs-chans{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px;position:relative}
.fs-chan{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:8px 14px}
.fs-chan svg{width:15px;height:15px;fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.faqside .btn{display:block;width:100%;text-align:center;position:relative}
@media(max-width:880px){.faqgrid{grid-template-columns:1fr;max-width:760px;gap:20px}.faqside{position:static;order:2}}

/* التذييل — أفق الليل */
body>footer{position:relative;background:#07091E;border-top:0;overflow:hidden;padding:74px 0 0;color:#A9B1D6}
.fshine{position:absolute;top:0;inset-inline:0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.9),transparent);background-size:220% 100%;animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.fmark{position:absolute;bottom:-70px;inset-inline-start:-46px;width:430px;color:rgba(169,177,214,.06);pointer-events:none}
.fspark{fill:var(--accent);opacity:.35;transform-box:fill-box;transform-origin:center;animation:spk 4s ease-in-out infinite}
.fgrid{position:relative;display:grid;gap:44px;grid-template-columns:1.5fr 1fr 1fr 1.1fr;padding-bottom:48px}
.fbrand p{font-size:14px;line-height:1.9;max-width:340px;margin:14px 0 20px}
.flogo{height:34px}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:12px;border:1px solid #242A5E;display:grid;place-items:center;color:#A9B1D6;transition:.3s}
.socials a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 22px rgba(34,211,238,.22)}
.socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcol h4{color:#fff;font-size:16px;font-weight:900;margin-bottom:16px}
nav.fcol{display:grid;gap:11px;align-content:start;font-weight:700;font-size:14.5px}
nav.fcol a{position:relative;width:fit-content;padding-inline-start:0;transition:.3s}
nav.fcol a::before{content:"";position:absolute;top:50%;inset-inline-start:-14px;width:8px;height:8px;background:var(--accent);transform:translateY(-50%) rotate(45deg) scale(0);border-radius:2px;transition:.3s}
nav.fcol a:hover{color:var(--accent);padding-inline-start:16px}
nav.fcol a:hover::before{inset-inline-start:0;transform:translateY(-50%) rotate(45deg) scale(1)}
.contacts{list-style:none;display:grid;gap:10px}
.contacts li{position:relative;padding-inline-start:18px}
.contacts li::before{content:"";position:absolute;top:12px;inset-inline-start:0;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);border-radius:2px}
.contacts a:hover{color:var(--accent)}
.fpulse{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:7px 16px;border:1px dashed #242A5E;border-radius:99px;font-size:13px;font-weight:700;color:#A9B1D6}
.fpulse i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.6s ease-in-out infinite}
.fbottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid #1B2050;padding-top:18px;padding-bottom:18px;font-size:13.5px;color:#6A70A0}
.made span{color:var(--accent);display:inline-block;animation:spk 3s ease-in-out infinite}
.totop{position:fixed;bottom:24px;inset-inline-start:24px;z-index:45;width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-bd);background:linear-gradient(135deg,var(--glass-a),var(--glass-b));backdrop-filter:blur(16px);color:var(--accent);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:.35s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{box-shadow:0 10px 26px rgba(34,211,238,.3)}
.totop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-1.5px)}}

/* خلفيات الأقسام الجديدة وتجاوبها */
.process{background:var(--bg-deep)}
.faqs{background:var(--bg)}
@media (max-width:900px){.psteps{grid-template-columns:1fr 1fr}.track{display:none}.statw{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-inline-start:0}.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.psteps,.statw{grid-template-columns:1fr}.stat+.stat{border-inline-start:0;border-top:1px solid var(--line);padding-top:18px}.fgrid{grid-template-columns:1fr}.fbottom{justify-content:center;text-align:center}}
@media (prefers-reduced-motion:reduce){.mtrack,.fshine,.fspark,.fpulse i,.made span,.totop svg{animation:none}.track i{transition:none;transform:scaleX(1)}.faq p{animation:none}}