/* الموقع التسويقي — مظهر تحريري داكن على بنية قوالب المصممين: عنوان ضخم، شريط لقطات متحرك، صفوف بخطوط رفيعة، أسئلة شائعة بمساحات كبيرة، تذييل بشعار عملاق.
   طبقة شكل فوق site.css (تُحمَّل بعده). الوضع الداكن هو الأصل، والفاتح يعمل بنفس البنية. */
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#050913;--paper2:#070d1b;--white:#0a1222;--card:#0b1426;--tint:#0f1a30;--tint2:#13213b;--line:#1a2742;--steel:#1a2742;
  --ink:#eef3fb;--head:#f3f7ff;--muted:#8f9db8;--chip:rgba(34,211,238,.1);--blue:#5cc8ff;--usbg:#0f2036;
  --cta:#22d3ee;--cta-ink:#021018;--glow:rgba(34,211,238,.2);--topbg:rgba(5,9,19,.78);
}
:root[data-theme=light]{
  --paper:#f4f6fa;--paper2:#eaeff6;--card:#fff;--line:#d9e1ee;--ink:#0b1730;--head:#0b1730;--muted:#5a6a86;--blue:#1560bd;--chip:#e6effc;
  --cta:#0b1d3a;--cta-ink:#fff;--glow:rgba(21,96,189,.14);--topbg:rgba(244,246,250,.85);
}
body{font-size:17px;background:var(--paper);color:var(--ink)}
::selection{background:var(--cta);color:var(--cta-ink)}

/* ---- الأزرار والشريط العلوي ---- */
.btn{border-radius:999px;padding:14px 28px;font-weight:700;letter-spacing:0}
.btn:hover{transform:none}
.btn.red,.btn{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}
.btn.red:hover,.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost,.btn.outl{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover,.btn.outl:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.light{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.sm{padding:9px 20px}
.top{background:var(--topbg);border-bottom:1px solid var(--line)}
.top .wrap{min-height:74px}
.nav a{font-weight:600;color:var(--muted);border-radius:999px;padding:8px 16px}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:transparent}
.top-cta .login{color:var(--muted);font-weight:600}.top-cta .login:hover{color:var(--ink)}
.theme-toggle{border-radius:999px}

/* ---- البطل ---- */
.hero{background:var(--paper);color:var(--ink);position:relative;isolation:isolate;padding:clamp(44px,7vw,100px) 0 clamp(36px,5vw,64px)}
.hero::before{content:"";position:absolute;z-index:-2;inset-block-start:-25%;inset-inline-end:-12%;width:min(80vw,980px);aspect-ratio:1;background:radial-gradient(closest-side,var(--glow),rgba(43,123,224,.08) 58%,transparent 74%)}
.hero .wave{position:absolute;z-index:-1;inset-inline:0;top:36%;height:230px;width:200%;opacity:.55;pointer-events:none;animation:flow 38s linear infinite}
.hero .wave path{fill:none;stroke:var(--cta);stroke-width:1.4;vector-effect:non-scaling-stroke}
.hero .wave path+path{stroke:var(--blue);opacity:.55;stroke-width:1}
@keyframes flow{to{transform:translateX(50%)}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"h h" "lead ph" "act ph" "chips ph";grid-template-rows:auto max-content max-content 1fr;column-gap:56px;row-gap:0;align-items:start}
.hero .wrap>div:first-child{display:contents}
.hero .wrap>div:last-child{grid-area:ph;grid-row:2 / span 3;align-self:start}
.hero h1{grid-area:h;font-size:clamp(2.5rem,6vw,5.3rem);line-height:1.16;font-weight:800;max-width:12.5em;margin:0 0 .42em;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{grid-area:lead;align-self:start;margin-bottom:26px;color:var(--muted);font-size:1.2rem;max-width:30em;animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both}
.hero .actions{grid-area:act;animation:rise .9s .22s cubic-bezier(.2,.7,.2,1) both}
.hero .chips{grid-area:chips;color:var(--muted);animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .chips li::before{color:var(--cta)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.phone,.hero .tag-float{--ink:#0F1E3A;--muted:#5B6B85;--line:#DCE5F1;--card:#fff;--paper:#F5F8FC;--paper2:#EAF0F8;--head:#0B1D3A;--blue:#1560BD}
.phone{box-shadow:0 50px 90px -40px rgba(0,0,0,.8),0 0 0 1px var(--line)}
.hero .tag-float{border-radius:999px}

/* ---- شريط اللقطات والكلمات ---- */
.strip{padding:clamp(20px,3vw,40px) 0 clamp(50px,7vw,90px);overflow:hidden}
.strip .track{display:flex;gap:20px;width:max-content;animation:slide 70s linear infinite}
.strip:hover .track{animation-play-state:paused}
.strip figure{margin:0;width:clamp(270px,34vw,470px);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card)}
.strip img{width:100%;height:auto;display:block;aspect-ratio:8/5;object-fit:cover;object-position:top}
.strip figcaption{padding:12px 16px;font-size:.88rem;color:var(--muted);display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line)}
.strip .note{margin:18px 0 0;text-align:center;font-size:.84rem;color:var(--muted)}
@keyframes slide{to{transform:translateX(50%)}}
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:var(--paper)}
.ticker .track{display:flex;gap:44px;width:max-content;animation:slide 46s linear infinite;font:700 clamp(1.5rem,3.4vw,2.8rem)/1.3 var(--f);white-space:nowrap;color:var(--ink)}
.ticker span{display:inline-flex;align-items:center;gap:44px}
.ticker span::after{content:"✦";color:var(--cta);font-size:.6em}
.ticker .o{color:transparent;-webkit-text-stroke:1px var(--muted)}

/* ---- العناوين والأقسام ---- */
section{padding:clamp(56px,8vw,104px) 0}
.sec-head{max-width:46em;margin-bottom:clamp(30px,4vw,56px)}
.sec-head h2{font-size:clamp(2rem,4.8vw,3.9rem);line-height:1.22;font-weight:800}
.sec-head p{color:var(--muted);font-size:1.12rem}
.kicker{background:none;padding:0;border-radius:0;color:var(--cta);font-weight:600;font-size:.95rem;margin-bottom:16px;display:inline-flex;align-items:center;gap:12px}
.kicker::before{content:"";width:34px;height:1px;background:currentColor}
:root[data-theme=light] .kicker{color:var(--blue)}
.alt,.white{background:var(--paper)}
.band{background:var(--paper2);color:var(--ink);border-block:1px solid var(--line)}
.band .sec-head p,.band .muted{color:var(--muted)}
.band .kicker{background:none;color:var(--cta)}

/* ---- صفوف: الطرق / الخطوات / القطاعات ---- */
.ways{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.ways .way{display:grid;grid-template-columns:72px minmax(0,.9fr) minmax(0,1.4fr);align-items:center;gap:28px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:30px 6px;transition:background .3s,padding .3s}
.ways .way:hover{background:linear-gradient(270deg,transparent,var(--glow));padding-inline-start:18px}
.ways .way .ic{width:56px;height:56px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--cta)}
.ways .way h3{font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:700}
.ways .way p{font-size:1rem}
.steps{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:110px minmax(0,.9fr) minmax(0,1.4fr);gap:28px;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:32px 6px}
.steps li::before{position:static;width:auto;height:auto;background:none;color:var(--cta);font:800 clamp(2.6rem,5vw,4.4rem)/1 var(--f);border-radius:0;display:block}
.steps h3{font-size:clamp(1.35rem,2.6vw,2.1rem);margin:0}
.steps p{margin:0}
.sectors{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.sector{display:grid;grid-template-columns:60px minmax(0,1.1fr) minmax(0,1.3fr);align-items:center;gap:26px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:30px 4px;transition:padding .3s,background .3s}
.sector>div{display:contents}
.sector i{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--cta)}
.sector i svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sector h3{font-size:clamp(1.6rem,3.4vw,3rem);font-weight:800;line-height:1.2;transition:color .25s}
.sector p{font-size:1rem}
.sector:hover{padding-inline-start:20px;background:linear-gradient(270deg,transparent,var(--glow))}
.sector:hover h3{color:var(--cta)}
:root[data-theme=light] .sector:hover h3{color:var(--blue)}
@media(max-width:860px){
  .ways .way,.steps li,.sector{grid-template-columns:48px 1fr;gap:6px 16px;padding:22px 2px}
  .ways .way p,.steps p,.sector p{grid-column:2}
  .steps li{grid-template-columns:64px 1fr}.steps p{grid-column:2}
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"h" "lead" "act" "chips" "ph"}
  .hero .wrap>div:last-child{grid-row:auto;margin-top:36px}
}

/* ---- بنتو، جداول، لوحة ---- */
.cell{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px}
.cell.dark{background:linear-gradient(145deg,#0d2240,#071226);border-color:#16365f}
.cell h3 i{border-radius:50%;background:var(--chip);color:var(--cta)}
.cell h3 i svg{stroke:currentColor}
.sheet-t,.mock{border-radius:22px;border:1px solid var(--line)}
.plan{background:var(--card);border-radius:24px;border-color:var(--line);padding:34px 28px}
.plan.hl{border:1px solid var(--cta);box-shadow:0 0 0 1px var(--cta),0 40px 90px -50px var(--glow)}
.plan .flag{background:var(--cta);color:var(--cta-ink);border-radius:999px}
.toggle{border-radius:999px;border:1px solid var(--line);background:none;padding:4px}
.toggle button{border-radius:999px}
.toggle button[aria-pressed=true]{background:var(--cta);color:var(--cta-ink)}
.cmp{border-radius:22px}
.cmp thead th.us{background:var(--cta);color:var(--cta-ink)}
.formcard,.feat-item{border-radius:24px}
.field input,.field select,.field textarea{border-radius:14px}

/* ---- الأسئلة الشائعة ---- */
.faq details{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:0;margin:0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{padding:26px 4px;font-size:clamp(1.15rem,2.2vw,1.65rem);font-weight:700}
.faq summary::after{content:"+";font-size:2.2rem;color:var(--cta);transition:transform .3s;line-height:.8}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details p{padding:0 4px 28px;font-size:1.05rem}
.faq .sec-head{margin-bottom:24px}

/* ---- الدعوة الختامية والتذييل ---- */
.cta-band{background:var(--paper);text-align:start;position:relative;overflow:hidden;padding:clamp(80px,12vw,170px) 0;border-top:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;inset-inline-start:-10%;bottom:-40%;width:min(90vw,1000px);aspect-ratio:1;background:radial-gradient(closest-side,var(--glow),transparent 70%);z-index:0}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{margin:0 0 .35em;max-width:11em;font-size:clamp(2.5rem,7vw,6rem);line-height:1.15;font-weight:800}
.cta-band p{color:var(--muted);font-size:1.2rem;margin-bottom:34px}
.cta-band .btn{padding:18px 40px;font-size:1.1rem}
.foot{background:var(--paper2);color:var(--muted);position:relative;overflow:hidden;border-top:1px solid var(--line);padding:76px 0 30px}
.foot .wrap{position:relative;z-index:1}
.foot::after{content:"OpexCall";position:absolute;inset-inline:0;bottom:-.2em;text-align:center;direction:ltr;font:800 clamp(5rem,23vw,21rem)/1 var(--f);color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none}
.foot h4{color:var(--ink)}
.foot a:hover{color:var(--ink)}
.foot .legal{border-top-color:var(--line);color:var(--muted);margin-bottom:clamp(60px,10vw,150px)}

/* ---- ظهور عند التمرير (للقوائم والعناوين فقط) ---- */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .hero .wave,.strip .track,.ticker .track,.hero h1,.hero .lead,.hero .actions,.hero .chips{animation:none!important}
  html.js .rv{opacity:1;transform:none;transition:none}
  .strip{overflow-x:auto}
}

/* ===== خلفية الأنابيب النيون (tubes.js) ===== */
.tubes-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.tubes-bg.page{position:fixed}
.hero.tubes-on,.cta-band.tubes-on{--paper:#04070f;--paper2:#070d1b;--ink:#eef3fb;--head:#fff;--muted:#a9b8d3;--line:rgba(255,255,255,.16);--chip:rgba(34,211,238,.12);--card:#0c1426;background:#04070f;color:var(--ink);isolation:isolate}
.hero.tubes-on::before{opacity:0}
.hero.tubes-on .wave{display:none}
.hero.tubes-on h1,.cta-band.tubes-on h2{text-shadow:0 2px 40px rgba(4,7,15,.9)}
.hero.tubes-on::after,.cta-band.tubes-on::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 32% 44%,rgba(4,7,15,.78),rgba(4,7,15,.35) 55%,rgba(4,7,15,0) 78%)}
.cta-band.tubes-on::before{display:none}
.hero.tubes-on .wrap,.cta-band.tubes-on .wrap{pointer-events:none}
.hero.tubes-on .wrap a,.hero.tubes-on .wrap button,.hero.tubes-on .phone,.cta-band.tubes-on .wrap a,.cta-band.tubes-on .wrap button{pointer-events:auto}
@media(max-width:700px){.hero.tubes-on::after,.cta-band.tubes-on::after{background:radial-gradient(ellipse 120% 60% at 50% 40%,rgba(4,7,15,.7),rgba(4,7,15,0) 80%)}}