/*
Theme Name: X Zero Trader
Theme URI: https://x0trader.com
Author: X Zero Trader (X0T)
Author URI: https://x0trader.com
Description: هوية "نبض / Pulse" — ثيم ووردبريس عربي (RTL) لشركة X Zero Trader للذكاء الاصطناعي والأتمتة. تصميم فاتح حيوي وتفاعلي بألوان لوجو الأسد الإلكتروني (بنفسجي → سماوي). يتضمّن أنواع محتوى للخدمات والأعمال والآراء والأسئلة، صفحة رئيسية جاهزة، ولوحة تخصيص كاملة.
Version: 2.7.7
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: x-zero-trader
Tags: rtl-language-support, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, blog, portfolio
*/

/* ===================================================================
   X0T — "Pulse" identity  |  Arabic RTL  |  light, lively, professional
   =================================================================== */
:root{
  --ink:#101322; --ink-soft:#333849; --muted:#686e7c;
  --paper:#f3f4f9; --surface:#ffffff; --surface-2:#eceef6; --line:#e2e4ee;
  --magenta:#6d3fe0; --coral:#3b5bf5; --lime:#5f7cff;
  --forest:#0e1230; --forest-2:#171c3e;
  --grad:linear-gradient(115deg,#6d3fe0,#3b5bf5);
  --grad-3:linear-gradient(120deg,#8b3fe8,#4d51ee 50%,#3b5bf5);
  --shadow-sm:0 2px 10px rgba(16,19,34,.06);
  --shadow:0 18px 50px -18px rgba(16,19,34,.22);
  --shadow-lg:0 40px 90px -30px rgba(109,63,224,.35);
  --r:22px; --r-sm:14px; --r-lg:32px;
  --wrap:1180px; --pad:clamp(20px,5vw,64px);
  --fdisp:'Cairo',system-ui,sans-serif;
  --fbody:'Cairo',system-ui,sans-serif;
  --fnum:'Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--fbody);color:var(--ink);background:var(--paper);
  line-height:1.85;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--fdisp);line-height:1.18;margin:0;font-weight:700;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--fdisp);font-weight:700;
  font-size:.95rem;color:var(--magenta);background:#6d3fe014;padding:7px 16px;border-radius:100px;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad)}
.section{padding-block:clamp(34px,4.5vw,64px)}
.section-head{max-width:640px;margin-bottom:32px}
.section-head.center{margin-inline:auto;text-align:center}
h2.title{font-size:clamp(1.8rem,4.2vw,2.8rem)}
.lead{font-size:1.12rem;color:var(--muted)}
.section-head .lead{margin-top:16px;font-size:1.2rem}
.skip-link{position:absolute;right:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip-link:focus{right:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fdisp);font-weight:700;
  font-size:1rem;padding:14px 26px;border-radius:100px;border:0;cursor:pointer;transition:.25s;position:relative}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -8px rgba(109,63,224,.55)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(109,63,224,.6)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn-lime{background:var(--lime);color:var(--forest)}
.btn-lime:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(110,139,255,.7)}

/* ---------- top bar ---------- */
.topbar{background:var(--forest);color:#c9d2f5;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:9px;flex-wrap:wrap}
.topbar a{color:#c9d2f5;transition:.2s}.topbar a:hover{color:var(--lime)}
.topbar .tb-contact{display:flex;gap:20px;flex-wrap:wrap}
.topbar .tb-social{display:flex;gap:8px}
.topbar .tb-social a{width:26px;height:26px;display:grid;place-items:center;border:1px solid #ffffff22;border-radius:8px;font-size:.72rem;font-family:var(--fdisp)}
.topbar .tb-social a:hover{background:var(--lime);color:var(--forest);border-color:var(--lime)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#f3f4f9d9;backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
.site-header.scrolled{background:#ffffffe6;border-color:var(--line);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;transition:.3s}
.scrolled .header-inner{padding-block:10px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--fdisp);font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.brand .mark{width:40px;height:40px;flex:0 0 auto;border-radius:11px;object-fit:cover;box-shadow:0 4px 14px -4px rgba(109,63,224,.5);background:#fff}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--fdisp);font-weight:600;font-size:.98rem;color:var(--ink-soft);padding:9px 15px;border-radius:100px;transition:.2s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a.active{color:var(--magenta);background:#6d3fe012}
.header-actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(16px,3vw,40px);padding-bottom:clamp(10px,2vw,28px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(1.5rem,5vw,3rem);line-height:1.34;font-weight:800;letter-spacing:-.02em}
.hero h1 .hl{position:relative;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:22px 0 30px;max-width:520px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-trust .t{display:flex;flex-direction:column}
.hero-trust .t b{font-family:var(--fnum);font-size:1.75rem;color:var(--ink)}
.hero-trust .t span{font-size:1.08rem;color:var(--ink-soft);font-weight:600}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;animation:float 14s ease-in-out infinite}
.blob.b1{width:420px;height:420px;background:var(--magenta);top:-80px;left:-60px}
.blob.b2{width:360px;height:360px;background:var(--coral);bottom:-100px;right:10%;animation-delay:-4s}
.blob.b3{width:260px;height:260px;background:var(--lime);top:30%;left:40%;opacity:.35;animation-delay:-8s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-24px) scale(1.06)}66%{transform:translate(-22px,18px) scale(.96)}}
.hero-visual{position:relative}
.hero-card{background:transparent;border:0;border-radius:var(--r-lg);overflow:hidden}
.hero .hero-card{animation:x0tHeroFloat 6s ease-in-out infinite;will-change:transform}
@keyframes x0tHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;font-weight:700;font-family:var(--fdisp);font-size:.9rem}
.hero-float .dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff}
.hero-float.f1{top:8%;right:-18px;animation:float 9s ease-in-out infinite}
.hero-float.f2{bottom:10%;left:-22px;animation:float 11s ease-in-out infinite -3s}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--surface);padding-block:22px;overflow:hidden}
.marquee-track{display:flex;gap:60px;width:max-content;animation:scroll 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .cl{font-family:var(--fdisp);font-weight:700;font-size:1.25rem;color:#aab0c0;white-space:nowrap;display:flex;align-items:center;gap:9px}
.marquee .cl::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 2px #c7ccda}
@keyframes scroll{to{transform:translateX(50%)}}

/* ---------- feature/value cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:.3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;background:#6d3fe012;color:var(--magenta)}
.card .ic svg{width:28px;height:28px}
.card h3{font-size:1.24rem;margin-bottom:10px}
.card p{color:var(--muted);margin:0;font-size:.98rem}
.card .more{margin-top:16px;display:inline-flex;gap:6px;color:var(--magenta);font-family:var(--fdisp);font-weight:700;font-size:.92rem}
.card:nth-child(3n+2) .ic{background:#3b5bf514;color:var(--coral)}
.card:nth-child(3n) .ic{background:#0e123012;color:var(--forest)}

/* ---------- stats band ---------- */
.band{background:var(--forest);color:#eef1ff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#6d3fe033,transparent 45%),radial-gradient(circle at 10% 90%,#3b5bf52e,transparent 45%)}
.band .wrap{position:relative}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;text-align:center}
.stat .n{font-family:var(--fnum);font-weight:700;font-size:clamp(2.6rem,6vw,3.8rem);background:var(--grad-3);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat .l{color:#aab5e8;margin-top:8px;font-size:.98rem}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;counter-reset:s}
.step{position:relative;padding-top:14px}
.step .num{font-family:var(--fnum);font-weight:700;font-size:1.05rem;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--magenta);margin-bottom:18px}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{color:var(--muted);margin:0;font-size:.96rem}

/* ---------- services detail rows ---------- */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.srow:nth-child(even) .srow-media{order:2}
.srow-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/11;background:var(--grad)}
.srow h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:14px}
.srow ul{list-style:none;padding:0;margin:18px 0 0}
.srow li{display:flex;gap:10px;margin-bottom:10px;color:var(--ink-soft)}
.srow li svg{width:20px;height:20px;color:var(--magenta);flex:0 0 auto;margin-top:5px}

/* ---------- portfolio ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filters button{font-family:var(--fdisp);font-weight:600;padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--ink)}
.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.work{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);background:#fff;transition:.35s}
.work:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.work img{aspect-ratio:9/6.4;object-fit:cover;width:100%;transition:.5s}
.work:hover img{transform:scale(1.05)}
.work-body{padding:20px 22px}
.work .tag{font-family:var(--fdisp);font-weight:700;font-size:.76rem;color:var(--coral);background:#3b5bf514;padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:10px}
.work h3{font-size:1.2rem;margin-bottom:6px}
.work .metric{color:var(--magenta);font-family:var(--fnum);font-weight:600;font-size:.95rem}

/* ---------- testimonials ---------- */
.tms{position:relative;max-width:760px;margin-inline:auto}
.tm{display:none;text-align:center;animation:fade .5s}
.tm.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tm .quote{font-family:var(--fdisp);font-weight:600;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.6;margin-bottom:26px}
.tm .quote span{color:var(--magenta)}
.tm .who{display:flex;align-items:center;justify-content:center;gap:14px}
.tm .who img{width:56px;height:56px;border-radius:50%}
.tm .who b{font-family:var(--fdisp);display:block}
.tm .who small{color:var(--muted)}
.tm-nav{display:flex;gap:10px;justify-content:center;margin-top:34px}
.tm-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.2s;display:grid;place-items:center}
.tm-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.tm-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.tm-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.tm-dots i.active{background:var(--magenta);width:26px;border-radius:100px}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin-inline:auto}
.q{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;margin-bottom:14px;overflow:hidden}
.q-head{width:100%;text-align:right;background:none;border:0;cursor:pointer;padding:20px 24px;font-family:var(--fdisp);font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.q-head .pm{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:#6d3fe012;color:var(--magenta);display:grid;place-items:center;transition:.3s;font-size:1.2rem;line-height:1}
.q.open .q-head .pm{transform:rotate(45deg);background:var(--grad);color:#fff}
.q-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q-body p{padding:0 24px 20px;margin:0;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--forest);color:#fff;padding:clamp(32px,5vw,60px);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,#6d3fe044,transparent 50%),radial-gradient(circle at 85% 80%,#3b5bf544,transparent 50%)}
.cta>*{position:relative}
.cta h2{font-size:clamp(1.8rem,4.4vw,2.8rem);margin-bottom:14px}
.cta p{color:#c9d2f5;max-width:560px;margin:0 auto 28px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- page hero ---------- */
.phero{background:var(--forest);color:#fff;position:relative;overflow:hidden;padding-block:clamp(38px,5.5vw,66px)}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,#6d3fe03a,transparent 45%),radial-gradient(circle at 12% 95%,#3b5bf533,transparent 45%)}
.phero .wrap{position:relative}
.phero .eyebrow{background:#ffffff1a;color:#ded0ff}
.phero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800}
.phero p{color:#c9d2f5;max-width:600px;margin-top:14px}
.crumbs{font-size:.86rem;color:#8b96cf;margin-bottom:16px}
.crumbs a:hover{color:var(--lime)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.info-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.info-list{list-style:none;padding:0;margin:22px 0}
.info-list li{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.info-list .ic{width:44px;height:44px;border-radius:12px;background:#6d3fe012;color:var(--magenta);display:grid;place-items:center;flex:0 0 auto}
.info-list .ic svg{width:20px;height:20px}
.info-list b{font-family:var(--fdisp);display:block;font-size:.98rem}
.info-list span{color:var(--muted);font-size:.94rem}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,40px)}
.f-row{margin-bottom:18px}
.f-row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{font-family:var(--fdisp);font-weight:600;font-size:.92rem;display:block;margin-bottom:7px}
.form input,.form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--fbody);font-size:1rem;background:#fbfcfe;transition:.2s;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--magenta);background:#fff;box-shadow:0 0 0 4px #6d3fe018}
.form textarea{resize:vertical;min-height:130px}
.notice{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-weight:600;font-family:var(--fdisp);font-size:.95rem}
.notice.ok{background:#e9f9ef;color:#0f7a3d;border:1px solid #b8ebca}
.notice.err{background:#fdecec;color:#c0392b;border:1px solid #f6c9c4}
.map{margin-top:22px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post-body{padding:24px}
.post .meta{font-size:.82rem;color:var(--muted);margin-bottom:10px;display:flex;gap:10px}
.post .meta .cat{color:var(--coral);font-family:var(--fdisp);font-weight:700}
.post h3{font-size:1.22rem;margin-bottom:10px;line-height:1.4}
.post p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- article ---------- */
.article{max-width:760px;margin-inline:auto}
.article .hero-img{border-radius:var(--r-lg);overflow:hidden;margin:26px 0 34px;box-shadow:var(--shadow);aspect-ratio:16/8;background:var(--grad)}
.article h2{font-size:1.5rem;margin:34px 0 12px}
.article p{color:var(--ink-soft)}
.article blockquote{border-inline-start:4px solid var(--magenta);background:var(--surface);margin:26px 0;padding:18px 24px;border-radius:0 12px 12px 0;font-family:var(--fdisp);font-weight:600;font-size:1.15rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:28px}
.gallery img{border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------- footer ---------- */
.footer{background:var(--forest);color:#aab5e8;padding-block:60px 26px;margin-top:auto}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:44px;border-bottom:1px solid #ffffff1a}
.footer .brand{color:#fff;margin-bottom:16px}
.footer p{color:#96a1d8;font-size:.95rem}
.footer h3{font-family:var(--fdisp);color:#fff;margin-bottom:18px;font-size:1.02rem}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{margin-bottom:11px}
.footer ul a:hover{color:var(--lime)}
.footer .news{display:flex;gap:8px;margin-top:14px}
.footer .news input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid #ffffff26;background:#ffffff0f;color:#fff;font-family:var(--fbody)}
.footer .news input::placeholder{color:#8a93c8}
.footer .news button{border:0;border-radius:12px;padding:0 16px;background:var(--lime);color:var(--forest);font-family:var(--fdisp);font-weight:700;cursor:pointer}
.footer .fsoc{display:flex;gap:10px;margin-top:18px}
.footer .fsoc a{width:38px;height:38px;border-radius:11px;border:1px solid #ffffff22;display:grid;place-items:center;font-family:var(--fdisp);font-size:.8rem;transition:.2s}
.footer .fsoc a:hover{background:var(--lime);color:var(--forest);border-color:var(--lime)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.88rem}

/* ---------- back to top ---------- */
.totop{position:fixed;bottom:26px;left:26px;width:50px;height:50px;border-radius:50%;background:var(--grad);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(14px);transition:.3s;z-index:90}
.totop.show{opacity:1;pointer-events:auto;transform:none}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:460px;margin-inline:auto;width:100%}
  .srow{grid-template-columns:1fr;gap:26px}
  .srow:nth-child(even) .srow-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav,.header-actions .btn{display:none}
  .menu-toggle{display:flex}
  .nav.open{display:flex;position:absolute;top:100%;right:0;left:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:14px var(--pad);gap:4px;box-shadow:var(--shadow)}
  .nav.open a{width:100%}
  .topbar .tb-contact{display:none}
  .f-row.two{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ============ WordPress core helpers ============ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:var(--ink);display:block;font-size:1rem;height:auto;right:8px;line-height:normal;padding:14px 20px;text-decoration:none;top:8px;width:auto;z-index:100000;border-radius:10px}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
.alignwide{margin-inline:calc(50% - 50vw);max-width:100vw}
.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}
.alignleft{float:right;margin:0 0 1em 1.5em}
.alignright{float:left;margin:0 1.5em 1em 0}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.9rem;color:var(--muted);text-align:center;margin-top:6px}
.sticky{display:block}
.gallery{display:grid;gap:12px}
.bypostauthor{display:block}
.article img,.post-body img,.page-content img{border-radius:12px;height:auto}
/* pagination */
.x0t-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.x0t-pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:var(--fdisp);font-weight:600;color:var(--ink-soft);transition:.2s}
.x0t-pagination .page-numbers:hover{border-color:var(--ink)}
.x0t-pagination .page-numbers.current{background:var(--grad);color:#fff;border-color:transparent}
/* comments */
.comments-area{max-width:760px;margin:48px auto 0}
.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{margin-bottom:20px}
.comment-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.comment-author{font-family:var(--fdisp);font-weight:700}
.comment-meta{font-size:.82rem;color:var(--muted);margin-bottom:8px}
.comment-respond{margin-top:32px}
.comment-form input,.comment-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--fbody);margin-top:6px;background:#fbfcfe}
.comment-form p{margin-bottom:14px}
.form-submit .submit{display:inline-flex;background:var(--grad);color:#fff;border:0;padding:13px 26px;border-radius:100px;font-family:var(--fdisp);font-weight:700;cursor:pointer}
/* widgets (footer/sidebar) */
.widget{margin-bottom:28px}
.widget-title{font-family:var(--fdisp);font-size:1.05rem;margin-bottom:14px}
.widget ul{list-style:none;padding:0;margin:0}
.widget ul li{margin-bottom:9px}

/* ============ Nav menu (wp_nav_menu) ============ */
.nav{list-style:none;padding:0;margin:0}
.nav li{list-style:none;position:relative}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-parent>a{color:var(--magenta);background:#6d3fe012}
.nav .sub-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:296px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:none;z-index:50}
.nav li.open>.sub-menu{display:block;animation:x0tSubIn .18s ease}
@keyframes x0tSubIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav .sub-menu a{display:flex;align-items:center;gap:11px;white-space:nowrap;padding:9px 12px;border-radius:11px;font-size:.92rem;font-weight:600;color:var(--ink-soft);transition:.16s}
.nav .sub-menu a:hover{background:#6d3fe010;color:var(--magenta)}
.nav .sub-menu .svc-mi-ic{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:#6d3fe012;color:var(--magenta);transition:.16s}
.nav .sub-menu .svc-mi-ic svg{width:18px;height:18px}
.nav .sub-menu a:hover .svc-mi-ic{background:var(--magenta);color:#fff}
.nav .sub-menu .svc-mi-tx{flex:1 1 auto}
.nav .menu-item-has-children>a{display:inline-flex;align-items:center;gap:6px}
.nav .menu-item-has-children>a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:.2s}
.nav .menu-item-has-children.open>a::after{opacity:.9;transform:rotate(225deg) translateY(1px)}
.nav .menu-item-has-children.open>a{color:var(--magenta)}
.mnav{display:none}
@media(max-width:720px){
  /* Full-screen mobile menu overlay */
  .mnav{display:block;position:fixed;inset:0;z-index:200;background:var(--surface);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mnav.open{opacity:1;visibility:visible;transform:none}
  .mnav-top{display:flex;align-items:center;justify-content:space-between;padding-block:14px;border-bottom:1px solid var(--line)}
  .mnav-top .brand .mark{width:38px;height:38px}
  .mnav-top .brand .brand-name{font-size:1.14rem}
  .mnav-close{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
  .mnav-body{padding-block:8px 40px}
  .mnav-list{list-style:none;margin:0;padding:0}
  .mnav-list>li{border-bottom:1px solid var(--line)}
  .mnav-list>li>a{display:flex;align-items:center;gap:12px;padding:16px 2px;font-family:var(--fdisp);font-weight:700;font-size:1.08rem;color:var(--ink);text-decoration:none}
  .mnav-list>li>a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--magenta);flex:0 0 auto}
  .mnav-list .menu-item-has-children>a::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5;transition:transform .25s,opacity .2s;margin-inline-start:auto;flex:0 0 auto}
  .mnav-list .menu-item-has-children.open>a{color:var(--magenta)}
  .mnav-list .menu-item-has-children.open>a::after{transform:rotate(225deg);opacity:.9}
  .mnav-list .sub-menu{list-style:none;margin:0;padding:0 20px 8px;display:none}
  .mnav-list .menu-item-has-children.open>.sub-menu{display:block;animation:x0tSubIn .2s ease}
  .mnav-list .sub-menu a{display:flex;align-items:center;gap:10px;padding:11px 0;font-size:.96rem;font-weight:600;color:var(--ink-soft);text-decoration:none;white-space:normal}
  .mnav-list .sub-menu .svc-mi-ic{width:30px;height:30px;flex:0 0 auto}
  .mnav-list .sub-menu .svc-mi-ic svg{width:16px;height:16px}
  .mnav-cta{display:flex;flex-direction:column;gap:12px;margin-top:26px}
  .mnav-cta .btn{width:100%;justify-content:center;gap:9px;padding:15px;font-size:1.02rem;border-radius:14px}
  .mnav-wa{background:#25d366;color:#fff;border:0}
  .mnav-contact{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:4px}
  .mnav-contact a{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.95rem;text-decoration:none;padding:7px 0}
  .mnav-contact a span{direction:ltr}
  .mnav-contact a svg{color:var(--magenta);flex:0 0 auto}
  body.x0t-noscroll{overflow:hidden}
}

/* ============ Official social icons ============ */
.topbar .tb-social a svg{width:14px;height:14px}
.footer .fsoc a svg{width:17px;height:17px}
.topbar .tb-social a,.footer .fsoc a{color:inherit}

/* ============ Floating WhatsApp ============ */
.wa-float{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -6px rgba(37,211,102,.55);z-index:95;transition:transform .25s,box-shadow .25s}
.wa-float svg{width:30px;height:30px}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;animation:wa-pulse 2.4s ease-out infinite}
.wa-float:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 40px -8px rgba(37,211,102,.7)}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:520px){.wa-float{width:52px;height:52px;bottom:20px;right:20px}.wa-float svg{width:27px;height:27px}.totop{bottom:20px;left:20px}}

/* ============ Service card image (image instead of icon) ============ */
.card .card-media{margin:-30px -30px 20px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--surface-2)}
.card .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-media img{transform:scale(1.05)}

/* ===================================================================
   1.8.0 — Header control + Light/Dark mode
   =================================================================== */

/* ---------- header: widths ---------- */
.site-header.hdrw-wide .wrap{max-width:1440px}
.site-header.hdrw-full .wrap{max-width:none}
.site-header:not(.is-sticky){position:relative;top:auto}

/* ---------- header: tidy layout ---------- */
.header-inner{gap:18px}
.site-header .brand{flex:0 0 auto;min-width:0}
.brand .brand-name{
  font-size:clamp(1rem,1.35vw,1.28rem);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(38vw,320px);
}
.brand .mark{width:var(--x0t-logo-h,44px);height:var(--x0t-logo-h,44px)}
.brand.brand-logo-only .mark{box-shadow:0 6px 18px -6px rgba(109,63,224,.55)}
.header-actions{flex:0 0 auto;gap:10px}
.btn-cta{white-space:nowrap;padding:12px 22px;font-size:.95rem}
.btn-cta span{white-space:nowrap}
.nav a{white-space:nowrap;padding:9px 13px}

/* layout: compact — brand + nav grouped at the start, actions at the end */
.site-header.hdr-compact .header-inner{justify-content:flex-start}
.site-header.hdr-compact .nav{margin-inline-start:14px;margin-inline-end:auto}
.site-header.hdr-compact .header-actions{margin-inline-start:auto}

/* layout: spread — nav centred between brand and actions */
.site-header.hdr-spread .nav{margin-inline:auto}

/* layout: stacked — brand centred above the nav */
.site-header.hdr-stacked .header-inner{flex-wrap:wrap;justify-content:center;row-gap:6px}
.site-header.hdr-stacked .brand{order:1}
.site-header.hdr-stacked .header-actions{order:2;margin-inline-start:auto}
.site-header.hdr-stacked .nav{order:3;flex-basis:100%;justify-content:center}

@media(max-width:1100px){
  .brand .brand-name{max-width:190px}
  .nav a{padding:9px 10px;font-size:.94rem}
}
@media(max-width:720px){
  .site-header.hdr-stacked .nav{flex-basis:auto}
  .brand .brand-name{max-width:150px}
}

/* ---------- mode toggle button ---------- */
.mode-toggle{
  width:42px;height:42px;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);border-radius:12px;cursor:pointer;display:grid;place-items:center;transition:.25s
}
.mode-toggle:hover{border-color:var(--magenta);color:var(--magenta);transform:translateY(-2px)}
.mode-toggle svg{width:20px;height:20px}
.mode-toggle .i-moon{display:none}
[data-theme="dark"] .mode-toggle .i-moon{display:block}
[data-theme="dark"] .mode-toggle .i-sun{display:none}

/* ===================================================================
   Dark mode
   =================================================================== */
html{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
[data-theme="dark"]{
  --ink:#eaeeff; --ink-soft:#c2c9e2; --muted:#8f97b0;
  --paper:#0a0d1b; --surface:#141931; --surface-2:#1c2240; --line:#282f52;
  --forest:#080b18; --forest-2:#10142c;
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --shadow-lg:0 40px 90px -30px rgba(109,63,224,.45);
}
[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
[data-theme="dark"] .site-header{background:#0a0d1bd9}
[data-theme="dark"] .site-header.scrolled{background:#141931ee;border-color:var(--line)}
[data-theme="dark"] .topbar{background:#05070f}
[data-theme="dark"] .menu-toggle{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .menu-toggle span{background:var(--ink)}
[data-theme="dark"] .nav.open{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .nav .sub-menu{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .nav .sub-menu a{color:var(--ink-soft)}
[data-theme="dark"] .nav .sub-menu a:hover{background:#6d3fe022;color:#b9a3fb}
[data-theme="dark"] .nav .sub-menu .svc-mi-ic{background:#6d3fe022;color:#b9a3fb}
[data-theme="dark"] .nav .sub-menu a:hover .svc-mi-ic{background:var(--magenta);color:#fff}
[data-theme="dark"] .nav a:hover{background:var(--surface-2);color:#fff}
[data-theme="dark"] .nav a.active,
[data-theme="dark"] .nav .current-menu-item>a,
[data-theme="dark"] .nav .current_page_item>a{background:#6d3fe026;color:#b9a3fb}
[data-theme="dark"] .brand .mark{background:#fff}
[data-theme="dark"] .hero-float,
[data-theme="dark"] .work,
[data-theme="dark"] .q,
[data-theme="dark"] .filters button,
[data-theme="dark"] .tm-nav button,
[data-theme="dark"] .x0t-pagination .page-numbers,
[data-theme="dark"] .marquee{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .btn-ghost{color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .btn-ghost:hover{border-color:var(--magenta);color:#fff}
[data-theme="dark"] .btn-light{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .filters button.active{background:var(--grad);color:#fff;border-color:transparent}
[data-theme="dark"] .tm-nav button:hover{background:var(--grad);color:#fff;border-color:transparent}
[data-theme="dark"] .form input,
[data-theme="dark"] .form textarea,
[data-theme="dark"] .comment-form input,
[data-theme="dark"] .comment-form textarea{background:#0f142b;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .form input:focus,
[data-theme="dark"] .form textarea:focus{background:#0b0f22;border-color:var(--magenta)}
[data-theme="dark"] .form input::placeholder,
[data-theme="dark"] .form textarea::placeholder{color:#727a93}
[data-theme="dark"] .notice.ok{background:#0f2a1c;color:#7ee2a8;border-color:#1e5236}
[data-theme="dark"] .notice.err{background:#2b1416;color:#f2a5a0;border-color:#5c2a2a}
[data-theme="dark"] .card .ic{background:#6d3fe01f}
[data-theme="dark"] .card:nth-child(3n+2) .ic{background:#3b5bf522}
[data-theme="dark"] .card:nth-child(3n) .ic{background:#ffffff10;color:#b9a3fb}
[data-theme="dark"] .step .num{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .marquee .cl{color:#69719a}
[data-theme="dark"] .marquee .cl::before{background:var(--surface-2);box-shadow:inset 0 0 0 2px #343c66}
[data-theme="dark"] .blob{opacity:.3}
[data-theme="dark"] .footer{background:#05070f}
[data-theme="dark"] .screen-reader-text:focus{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .article blockquote{background:var(--surface)}
[data-theme="dark"] .comment-body,
[data-theme="dark"] .info-card,
[data-theme="dark"] .form{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .hero-card{background:transparent;border-color:transparent}
[data-theme="dark"] .srow li{color:var(--ink-soft)}
[data-theme="dark"] .eyebrow{background:#6d3fe020}
[data-theme="dark"] .q-head .pm{background:#6d3fe022}
[data-theme="dark"] .map{border-color:var(--line)}
[data-theme="dark"] .mode-toggle{background:var(--surface-2)}
body,.site-header,.card,.work,.q,.form input,.form textarea{transition:background-color .25s ease,color .25s ease,border-color .25s ease}

/* ---------- 1.8.1 — top bar slots + dual logo ---------- */
.topbar.tbw-wide .wrap{max-width:1440px}
.topbar.tbw-full .wrap{max-width:none}
.topbar .wrap{justify-content:space-between}
.topbar .tb-empty{flex:0 0 auto}
.topbar .tb-text{font-weight:600;font-family:var(--fdisp);font-size:.85rem}
.topbar,.topbar a,.topbar .tb-text{color:var(--tb-fg,#c9d2f5)}
.topbar .tb-social a{border-color:currentColor;opacity:.9}
.topbar .tb-social a:hover{opacity:1}

/* dual logo (light / dark) */
.brand .mark-dark{display:none}
[data-theme="dark"] .brand:has(.mark-dark) .mark-light{display:none}
[data-theme="dark"] .brand .mark-dark{display:block}

/* ---------- 1.8.2 — four-up card grid ---------- */
.cards.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.cards.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards.cards-4{grid-template-columns:1fr}}
.cards.cards-4 .card{padding:26px}
.cards.cards-4 .card h3{font-size:1.12rem}

/* ---------- 1.9.1 — partners ticker (شريط متحرك مستمر) ---------- */
.partners .section-head{margin-bottom:26px}
.pmarquee{
  position:relative;overflow:hidden;padding-block:6px 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.pm-track{display:flex;gap:26px;width:max-content;animation:pmscroll var(--pspeed,30s) linear infinite}
.pmarquee:hover .pm-track{animation-play-state:paused}
@keyframes pmscroll{from{transform:translateX(0)}to{transform:translateX(50%)}}
.ps-item{
  flex:0 0 190px;width:190px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.ps-logo{
  width:100%;min-height:140px;display:flex;align-items:center;justify-content:center;padding:10px;
  background:transparent;border:0;border-radius:var(--r-sm);
  box-shadow:none;transition:.3s
}
.ps-item:hover .ps-logo{transform:translateY(-5px)}
.ps-logo img{max-width:100%;max-height:120px;width:auto;height:auto;object-fit:contain;filter:none;opacity:1;transition:.3s}
.ps-item:hover .ps-logo img{transform:scale(1.05)}
.ps-ph{font-family:var(--fdisp);font-weight:800;font-size:1.6rem;color:var(--magenta)}
.ps-name{font-family:var(--fdisp);font-weight:700;font-size:.95rem;color:var(--ink-soft);white-space:nowrap}
@media(max-width:620px){.ps-item{flex-basis:150px;width:150px}.ps-logo{min-height:104px;padding:8px}.ps-logo img{max-height:88px}}
[data-theme="dark"] .ps-logo{background:transparent;border-color:transparent}
[data-theme="dark"] .ps-logo img{filter:none;opacity:1}
[data-theme="dark"] .ps-item:hover .ps-logo img{filter:none}
@media(prefers-reduced-motion:reduce){.pm-track{animation:none}.pmarquee{overflow-x:auto}}

/* ---------- 2.0.0 — per-section backgrounds & column counts ---------- */
.sec-bg-surface{background:var(--surface);border-block:1px solid var(--line)}
.sec-bg-dark{color:#eef1ff}
.sec-bg-dark .title,.sec-bg-dark h2,.sec-bg-dark h3{color:#fff}
.sec-bg-dark .lead,.sec-bg-dark p{color:#c9d2f5}
.sec-bg-dark .eyebrow{background:#ffffff1a;color:#ded0ff}
.sec-bg-dark .card,.sec-bg-dark .q,.sec-bg-dark .work,.sec-bg-dark .ps-logo{background:#ffffff0f;border-color:#ffffff1f;color:#eef1ff}
.sec-bg-dark .card p,.sec-bg-dark .q-body p,.sec-bg-dark .ps-name{color:#c9d2f5}
.sec-bg-dark .step .num{background:#ffffff12;border-color:#ffffff24;color:#ded0ff}
.sec-bg-dark .q-head{color:#fff}
.cards.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1180px){.cards.cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards.cards-2,.cards.cards-3{grid-template-columns:1fr}}

/* ---------- 2.2.0 — process steps: connected icon circles ---------- */
.steps.steps-flow{
  display:grid;grid-template-columns:repeat(var(--stepcols,4),minmax(0,1fr));gap:0 18px;
  counter-reset:none;margin-top:10px
}
.steps-flow .step{position:relative;padding:0 8px;text-align:center}
.steps-flow .step:not(:last-child)::before{
  content:"";position:absolute;top:34px;inset-inline-start:50%;width:100%;height:2px;
  background:var(--line);z-index:0
}
.steps-flow .step-ic{
  position:relative;z-index:1;width:68px;height:68px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);color:#fff;
  box-shadow:0 10px 24px -10px rgba(109,63,224,.65);border:5px solid var(--paper)
}
.steps-flow .step-ic svg{width:26px;height:26px}
.steps-flow .step h3{font-size:1.1rem;margin-bottom:8px}
.steps-flow .step p{color:var(--muted);font-size:.94rem;margin:0;max-width:260px;margin-inline:auto}
.sec-bg-surface .steps-flow .step-ic{border-color:var(--surface)}
.sec-bg-dark .steps-flow .step-ic{border-color:transparent;background:#ffffff14;color:#fff}
.sec-bg-dark .steps-flow .step:not(:last-child)::before{background:#ffffff2b}
[data-theme="dark"] .steps-flow .step-ic{border-color:var(--paper)}
@media(max-width:900px){
  .steps.steps-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
  .steps-flow .step:not(:last-child)::before{display:none}
}
@media(max-width:560px){
  .steps.steps-flow{grid-template-columns:1fr}
}

/* ---------- 2.3.0 — service cards (image + tag + features + button) ---------- */
.cards-service .card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.cards-service .card .card-media{margin:0;aspect-ratio:16/10;position:relative;border-radius:0}
.cards-service .card .card-media img{width:100%;height:100%;object-fit:cover}
.cards-service .card .card-tag{
  position:absolute;top:14px;inset-inline-end:14px;z-index:2;
  background:var(--grad);color:#fff;font-family:var(--fdisp);font-weight:700;font-size:.78rem;
  padding:5px 14px;border-radius:100px;box-shadow:0 6px 16px -6px rgba(16,19,34,.45)
}
.cards-service .card .ic{margin:26px 26px 0}
.cards-service .card-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px;text-align:center}
.cards-service .card-body h3{font-size:1.16rem;margin-bottom:10px}
.cards-service .card-body>p{color:var(--muted);font-size:.96rem;margin:0}
.card-feats{
  list-style:none;padding:16px 0 0;margin:16px 0 22px;text-align:start;
  border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:10px
}
.card-feats li{display:flex;align-items:flex-start;gap:9px;font-size:.93rem;color:var(--ink-soft);line-height:1.7}
.card-feats li svg{width:17px;height:17px;flex:0 0 auto;margin-top:5px;color:var(--magenta)}
.card-btn{margin-top:auto;width:100%;justify-content:center;padding:13px 20px;font-size:.97rem}
.cards-service .card:hover{transform:translateY(-6px)}
[data-theme="dark"] .card-feats{border-top-color:var(--line)}
[data-theme="dark"] .card-feats li{color:var(--ink-soft)}
.sec-bg-dark .card-feats{border-top-color:#ffffff26}
.sec-bg-dark .card-feats li{color:#c9d2f5}

/* ---------- 2.4.0 — testimonials carousel ---------- */
.tms-carousel{position:relative}
.tms-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 2px 8px;scrollbar-width:none;-ms-overflow-style:none
}
.tms-track::-webkit-scrollbar{display:none}
.tm-card{
  flex:0 0 calc((100% - (var(--tmsper,3) - 1) * 24px) / var(--tmsper,3));
  scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm);transition:.3s
}
.tm-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.tm-stars{display:flex;gap:3px;margin-bottom:14px}
.tm-stars i{width:16px;height:16px;color:#e3e5ee;display:block}
.tm-stars i.on{color:#f5b301}
.tm-stars svg{width:16px;height:16px}
.tm-quote{color:var(--ink-soft);font-size:.97rem;line-height:1.9;margin:0 0 20px;flex:1}
.tm-who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.tm-av{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-family:var(--fdisp);font-weight:800;font-size:1.05rem
}
.tm-av img{width:100%;height:100%;object-fit:cover}
.tm-who b{font-family:var(--fdisp);display:block;font-size:.98rem}
.tm-who small{color:var(--muted);font-size:.84rem}
.tms-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.tms-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:.25s}
.tms-dots i.active{background:var(--magenta);width:26px;border-radius:100px}
@media(max-width:900px){.tm-card{flex-basis:calc((100% - 24px) / 2)}}
@media(max-width:620px){.tm-card{flex-basis:100%}}
[data-theme="dark"] .tm-card{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .tm-stars i{color:#3a4166}
.sec-bg-dark .tm-card{background:#ffffff0f;border-color:#ffffff1f}
.sec-bg-dark .tm-quote{color:#c9d2f5}
.sec-bg-dark .tm-who{border-top-color:#ffffff26}

/* ---------- 2.4.1 — mobile header: no empty middle ---------- */
@media(max-width:720px){
  /* bring the CTA back on phones (compact) so the header isn't half empty */
  .header-actions .btn.btn-cta{
    display:inline-flex;padding:10px 16px;font-size:.86rem;gap:6px;
    max-width:46vw;overflow:hidden
  }
  .header-actions .btn.btn-cta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-actions .btn.btn-cta svg{display:none}
  .header-inner{gap:10px;padding-block:10px}
  .site-header.hdr-compact .header-actions,
  .header-actions{gap:8px}
  .mode-toggle{width:38px;height:38px;border-radius:10px}
  .mode-toggle svg{width:18px;height:18px}
  .menu-toggle{width:38px;height:38px;border-radius:10px}
  .brand{gap:8px}
  .brand .brand-name{max-width:34vw;font-size:1rem}
  .brand .mark{width:min(var(--x0t-logo-h,44px),38px);height:min(var(--x0t-logo-h,44px),38px)}
  /* top bar: keep the phone visible instead of a blank half */
  .topbar .tb-contact{display:flex;gap:12px;font-size:.8rem}
  .topbar .tb-contact a:nth-child(n+2){display:none}
  .topbar .wrap{gap:10px;padding-block:7px}
  .topbar .tb-social a{width:24px;height:24px}
}
@media(max-width:430px){
  .header-actions .btn.btn-cta{padding:9px 12px;font-size:.8rem;max-width:38vw}
  .brand .brand-name{max-width:34vw;font-size:.94rem}
  .header-inner{gap:6px}
}
@media(max-width:340px){
  .header-actions .btn.btn-cta{display:none}
  .brand .brand-name{max-width:50vw}
}

/* ---------- Demo-request popup modal ---------- */
.x0t-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.x0t-modal.open{display:flex}
.x0t-modal-overlay{position:absolute;inset:0;background:rgba(11,16,34,.6);backdrop-filter:blur(3px)}
.x0t-modal-box{position:relative;z-index:1;background:var(--surface);color:var(--ink);width:100%;max-width:460px;max-height:90vh;overflow:auto;border-radius:var(--r);padding:30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:x0tModalIn .25s ease}
@keyframes x0tModalIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.x0t-modal-close{position:absolute;inset-inline-start:16px;top:12px;background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--muted)}
.x0t-modal-box h3{font-family:var(--fdisp);font-weight:800;font-size:1.5rem;margin-bottom:6px;color:var(--ink)}
.x0t-modal-sub{color:var(--muted);margin-bottom:18px;font-size:.95rem}
.x0t-fg{margin-bottom:14px}
.x0t-fg label{display:block;font-family:var(--fdisp);font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ink)}
.x0t-fg input,.x0t-fg select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--fbody);font-size:1rem;background:#fbfcfe;color:var(--ink)}
.x0t-fg input:focus,.x0t-fg select:focus{outline:0;border-color:var(--magenta);background:#fff;box-shadow:0 0 0 4px #6d3fe018}
.x0t-hp{position:absolute;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
body.x0t-modal-open{overflow:hidden}
.x0t-toast{position:fixed;inset-block-start:20px;inset-inline:0;margin-inline:auto;z-index:1100;width:max-content;max-width:90vw;background:#e9f9ef;color:#0f7a3d;border:1px solid #b8ebca;padding:14px 20px;border-radius:12px;font-family:var(--fdisp);font-weight:700;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.15)}
[data-theme="dark"] .x0t-fg input,[data-theme="dark"] .x0t-fg select{background:#0b0f22;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .x0t-fg input:focus,[data-theme="dark"] .x0t-fg select:focus{background:#0b0f22}

/* About story: vertically center text with the tall image beside it */
.hero-grid.vcenter{align-items:center}

.story-img{display:block;max-height:420px;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}

/* Contact honeypot: cap width + pin left so the absolutely-positioned clipped field can never cause horizontal overflow (a .form input width rule was stretching it to full width). */
.hp{left:0 !important;max-width:1px !important}

/* ============================================================
 * Ninja Forms — restyle to match the theme (popup demo form + contact page).
 * Overrides NF default front-end.css; uses theme CSS vars for light/dark.
 * ============================================================ */
.nf-form-cont{max-width:100%;margin:0}
.nf-form-cont .nf-form-content{padding:0;max-width:100%}
.nf-form-cont .nf-form-fields-required{color:var(--muted);font-size:.8rem;margin:0 0 14px;opacity:.85}
.nf-form-cont .nf-field-container{margin-bottom:16px}
.nf-form-cont .nf-field-label{margin-bottom:6px}
.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .nf-label-span{font-family:var(--fdisp);font-weight:600;font-size:.92rem;line-height:1.4;color:var(--ink);margin:0}
.nf-form-cont .ninja-forms-req-symbol{color:#e5484d;font-weight:700}

/* text inputs, textarea, select */
.nf-form-cont .nf-field-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),
.nf-form-cont .nf-field-element textarea,
.nf-form-cont .nf-field-element select{
	width:100% !important;box-sizing:border-box;height:auto !important;line-height:1.5 !important;
	padding:13px 16px !important;margin:0 !important;border:1.5px solid var(--line) !important;border-radius:12px !important;
	font-family:var(--fbody) !important;font-size:1rem !important;background:#fbfcfe !important;color:var(--ink) !important;
	box-shadow:none !important;transition:border-color .2s,box-shadow .2s,background .2s;direction:rtl;text-align:right;
}
.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element textarea:focus,
.nf-form-cont .nf-field-element select:focus{
	outline:0;border-color:var(--magenta) !important;background:#fff !important;box-shadow:0 0 0 4px #6d3fe018 !important;
}
.nf-form-cont .nf-field-element textarea{min-height:120px !important;resize:vertical}
.nf-form-cont .nf-field-element select{cursor:pointer}

/* submit button -> theme gradient button */
.nf-form-cont .submit-container{margin-top:6px}
.nf-form-cont .nf-field-element input[type=button],
.nf-form-cont .nf-field-element input[type=submit],
.nf-form-cont .submit-container input{
	display:inline-flex;align-items:center;justify-content:center;width:100% !important;height:auto !important;
	padding:14px 24px !important;border:0 !important;border-radius:14px !important;cursor:pointer;
	background:var(--grad) !important;color:#fff !important;
	font-family:var(--fdisp) !important;font-weight:800 !important;font-size:1.05rem !important;
	box-shadow:0 12px 30px -8px rgba(109,63,224,.55) !important;transition:transform .2s,box-shadow .2s;margin:0 !important;
}
.nf-form-cont .nf-field-element input[type=submit]:hover,
.nf-form-cont .submit-container input:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(109,63,224,.6) !important}

/* errors */
.nf-form-cont .nf-error-msg{color:#e5484d !important;font-size:.85rem;margin-top:5px}
.nf-form-cont .nf-error .nf-field-element input,
.nf-form-cont .nf-error .nf-field-element textarea,
.nf-form-cont .nf-error .nf-field-element select{border-color:#e5484d !important}

/* success / response message */
.nf-form-cont .nf-response-msg{color:var(--ink);font-size:1rem}

/* dark mode */
[data-theme="dark"] .nf-form-cont .nf-field-element input:not([type=button]):not([type=submit]),
[data-theme="dark"] .nf-form-cont .nf-field-element textarea,
[data-theme="dark"] .nf-form-cont .nf-field-element select{background:#0f142b !important;border-color:var(--line) !important;color:var(--ink) !important}
[data-theme="dark"] .nf-form-cont .nf-field-element input:focus,
[data-theme="dark"] .nf-form-cont .nf-field-element textarea:focus,
[data-theme="dark"] .nf-form-cont .nf-field-element select:focus{background:#0b0f22 !important}

/* ============================================================
 * Single article: 2-column layout + rich content typography + sidebar.
 * ============================================================ */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start}
.post-layout .post-main{min-width:0}
.post-layout .article{max-width:none;margin:0}

/* --- article content typography --- */
.article .page-content{font-size:1.06rem;line-height:1.95;color:var(--ink-soft)}
.article .page-content>*:first-child{margin-top:0}
.article .page-content h1{font-family:var(--fdisp);font-weight:800;font-size:1.9rem;line-height:1.4;margin:38px 0 16px;color:var(--ink)}
.article .page-content h2{font-family:var(--fdisp);font-weight:800;font-size:1.55rem;line-height:1.45;margin:34px 0 14px;color:var(--ink)}
.article .page-content h3{font-family:var(--fdisp);font-weight:700;font-size:1.25rem;margin:28px 0 10px;color:var(--ink)}
.article .page-content h4{font-family:var(--fdisp);font-weight:700;font-size:1.08rem;margin:22px 0 8px;color:var(--ink)}
.article .page-content p{margin:0 0 18px;color:var(--ink-soft)}
.article .page-content a{color:var(--magenta);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.article .page-content a:hover{opacity:.82}
.article .page-content strong,.article .page-content b{color:var(--ink);font-weight:700}
.article .page-content ul,.article .page-content ol{margin:0 0 20px;padding-inline-start:1.4em}
.article .page-content li{margin-bottom:10px;line-height:1.85;color:var(--ink-soft)}
.article .page-content ul li::marker{color:var(--magenta)}
.article .page-content ol li::marker{color:var(--magenta);font-weight:700}
.article .page-content img{margin:22px 0}
.article .page-content hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.article .page-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.98rem}
.article .page-content th,.article .page-content td{border:1px solid var(--line);padding:11px 14px;text-align:start}
.article .page-content th{background:var(--surface);font-family:var(--fdisp);font-weight:700;color:var(--ink)}
.article .page-content code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:.9em}
.article .page-content pre{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;overflow:auto;margin:24px 0}
.article .page-content pre code{border:0;padding:0;background:none}

/* --- sidebar --- */
.post-sidebar{position:sticky;top:100px;display:flex;flex-direction:column;gap:24px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.side-title{font-family:var(--fdisp);font-weight:800;font-size:1.1rem;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--line);color:var(--ink)}
.side-card.side-cta{background:var(--grad);border:0;color:#fff;text-align:center}
.side-cta h3{font-family:var(--fdisp);font-weight:800;font-size:1.3rem;margin:0 0 8px;color:#fff}
.side-cta p{color:#ffffffe6;margin:0 0 18px;font-size:.95rem;line-height:1.75}
.side-cta .btn{width:100%;justify-content:center;background:#fff;color:var(--magenta);box-shadow:0 10px 26px -10px rgba(0,0,0,.4)}
.side-cta .btn:hover{transform:translateY(-2px)}

.side-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.side-posts li{margin:0}
.side-posts a{display:flex;gap:12px;align-items:center;text-decoration:none}
.side-posts .sp-thumb img{width:62px;height:62px;object-fit:cover;border-radius:10px;display:block}
.side-posts .sp-meta{min-width:0}
.side-posts .sp-title{display:block;font-family:var(--fdisp);font-weight:700;font-size:.94rem;color:var(--ink);line-height:1.5}
.side-posts a:hover .sp-title{color:var(--magenta)}
.side-posts .sp-date{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}

.side-cats{list-style:none;margin:0;padding:0}
.side-cats li{border-bottom:1px solid var(--line)}
.side-cats li:last-child{border-bottom:0}
.side-cats a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.96rem}
.side-cats a:hover{color:var(--magenta)}
.side-cats a span{background:#6d3fe018;color:var(--magenta);border-radius:20px;padding:2px 11px;font-size:.8rem;font-weight:700;flex:0 0 auto}

.side-widgets .widget-title{font-family:var(--fdisp);font-weight:800;font-size:1.1rem;margin:0 0 14px;color:var(--ink)}
.side-widgets .widget{margin-bottom:18px}
.side-widgets .widget:last-child{margin-bottom:0}

@media(max-width:900px){
	.post-layout{grid-template-columns:1fr;gap:32px}
	.post-sidebar{position:static}
}

/* Article polish: lead first paragraph + gradient accent bar on headings */
.article .page-content>p:first-of-type{font-size:1.16rem;line-height:1.9;color:var(--ink);font-weight:500}
.article .page-content h2{position:relative;padding-inline-start:16px}
.article .page-content h2::before{content:"";position:absolute;inset-inline-start:0;top:.18em;bottom:.18em;width:5px;border-radius:4px;background:var(--grad)}
.article .page-content h3{color:var(--magenta)}
.article .page-content>p:empty{display:none}

/* Blog redesign: article as padded card + framed images + search box */
.post-layout .article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,38px);max-width:none;margin:0}
.post-layout .article>*:first-child{margin-top:0}
.post-layout .article .hero-img{margin-top:0}
.article .page-content img{max-width:100%;height:auto;display:block;margin:24px auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.side-searchform{display:flex;gap:10px}
.side-searchform input[type=search]{flex:1;min-width:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fbfcfe;color:var(--ink);font-family:var(--fbody);font-size:.95rem}
.side-searchform input[type=search]:focus{outline:0;border-color:var(--magenta);background:#fff;box-shadow:0 0 0 4px #6d3fe018}
.side-searchform button{flex:0 0 46px;height:46px;border:0;border-radius:12px;background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.side-searchform button:hover{transform:translateY(-1px)}
[data-theme="dark"] .side-searchform input[type=search]{background:#0f142b}

/* Embed / flipbook section wrapper */
.x0t-embed{max-width:960px;margin:0 auto}
.x0t-embed>*{max-width:100%}
.x0t-embed iframe,.x0t-embed embed,.x0t-embed object,.x0t-embed video{max-width:100%}

/* Hide the homepage hero image on mobile/stacked layout */
@media(max-width:900px){.hero .hero-card{display:none}}

/* intl-tel-input (phone country-code picker) */
.iti{width:100%;display:block}
.iti input,.iti input[type=tel]{direction:ltr;text-align:left}
.iti__country-list{text-align:left;direction:ltr;max-height:230px;z-index:120}
.iti--separate-dial-code .iti__selected-dial-code{font-weight:600}

/* Dark-mode NF input + intl-tel fixes (full :not chain beats the light rule) */
[data-theme="dark"] .nf-form-cont .nf-field-element input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]),[data-theme="dark"] .nf-form-cont .nf-field-element textarea,[data-theme="dark"] .nf-form-cont .nf-field-element select{background:#0f142b !important;color:var(--ink) !important;border-color:#2a3350 !important}
[data-theme="dark"] .nf-form-cont .nf-field-element input:focus,[data-theme="dark"] .nf-form-cont .nf-field-element textarea:focus,[data-theme="dark"] .nf-form-cont .nf-field-element select:focus{background:#0b0f22 !important;color:var(--ink) !important;border-color:var(--magenta) !important}
[data-theme="dark"] .nf-form-cont input::placeholder,[data-theme="dark"] .nf-form-cont textarea::placeholder{color:#8b93b5 !important}
[data-theme="dark"] .iti__selected-dial-code{color:var(--ink)}
[data-theme="dark"] .iti__country-list{background:#141a30;border:1px solid #2a3350;color:var(--ink)}
[data-theme="dark"] .iti__country.iti__highlight{background:#1f2745}
[data-theme="dark"] .iti__dial-code{color:#9aa3c4}

/* Phone field in NF forms (popup/contact): LTR like the service form so the flag/dial-code do not overlap the number */
.nf-form-cont .iti input,.nf-form-cont .iti input[type=tel]{direction:ltr !important;text-align:left !important}
.nf-form-cont .iti--separate-dial-code input{padding-left:52px !important;padding-right:14px !important}

/* NF phone padding = service-form look: dial code on the RIGHT (RTL container), input LTR. High specificity to beat the generic NF input padding. */
.nf-form-cont .nf-field-element .iti--separate-dial-code input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]){direction:ltr !important;text-align:left !important;padding:13px 54px 13px 6px !important}

/* ================================================================
   2026-08-16 — (1) tighter hero bottom gap  (2) boxless header logo
   ================================================================ */

/* (1) The hero PNG carries ~15% transparent padding along its bottom
   edge, which reads as dead space above the next section. Pull the
   visual up (only transparent pixels get clipped by .hero's
   overflow:hidden) and trim the first section's top padding. */
.hero .hero-visual{margin-bottom:-56px}
.hero + .section{padding-top:clamp(16px,2.2vw,30px)}
@media(max-width:900px){
  .hero .hero-visual{margin-bottom:-38px}
}

/* (2) Header logo sits free — no white tile, rounded box or glow — and
   keeps its own aspect ratio, so a wide logo can be swapped in later
   without being cropped to a square. */
.brand .mark,
.brand.brand-logo-only .mark{
  width:auto;
  height:var(--x0t-logo-h,44px);
  max-width:min(240px,44vw);
  background:transparent;
  border-radius:0;
  box-shadow:none;
  object-fit:contain;
}
[data-theme="dark"] .brand .mark{
  background:transparent;
  filter:brightness(1.28) saturate(1.05) drop-shadow(0 2px 10px rgba(109,63,224,.45));
}
@media(max-width:720px){
  .mnav-top .brand .mark,
  .brand .mark{height:min(var(--x0t-logo-h,44px),38px);width:auto}
}

/* ================================================================
   2026-08-16 — hero carousel (slides stack in one grid cell and
   cross-fade, so there is no RTL scroll maths and the section keeps
   the height of its tallest slide).
   ================================================================ */
.hero-slider{position:relative}
.hero-slides{display:grid}
.hero-slide{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transform:translateX(34px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility .55s}
.hero-slider[data-dir="prev"] .hero-slide{transform:translateX(-34px)}
.hero-slide.is-active{opacity:1;visibility:visible;transform:none;transition-delay:.05s}

.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:background .25s,color .25s,border-color .25s}
.hero-nav:hover,.hero-nav:focus-visible{background:var(--grad);color:#fff;border-color:transparent}
.hero-nav.prev{inset-inline-start:clamp(6px,2vw,26px)}
.hero-nav.next{inset-inline-end:clamp(6px,2vw,26px)}
.hero-nav.prev svg{transform:scaleX(-1)}
.hero-slider:has(.hero-dots) .hero-nav{top:calc(50% - 16px)}

.hero-dots{position:relative;z-index:3;display:flex;justify-content:center;gap:9px;margin-top:16px}
.hero-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer;transition:width .25s,background .25s,border-radius .25s}
.hero-dot:hover{background:var(--ink-soft)}
.hero-dot.is-active{width:30px;border-radius:6px;background:var(--grad)}

@media(max-width:720px){
  .hero-nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .2s;transform:none}
  .hero-slider[data-dir="prev"] .hero-slide{transform:none}
}

/* ---- per-slide background image ---------------------------------------- */
/* The image lives on .hero-slide itself, so it fades in and out with the
   slide. When ANY slide has one, the section's own vertical padding moves
   into the slides so the artwork runs edge to edge instead of leaving a
   strip of section background above it. */
.hero-slide.has-bg{background-repeat:no-repeat}
.hero-slide.has-bg>.wrap{position:relative;z-index:1}
.hero-slide.has-overlay::before{content:"";position:absolute;inset:0;z-index:0;background:var(--x0t-slide-ov,#0b1020);opacity:var(--x0t-slide-ov-a,.45);pointer-events:none}
.hero:has(.hero-slide.has-bg){padding-top:0;padding-bottom:0}
.hero:has(.hero-slide.has-bg) .hero-slide{padding-block:clamp(28px,4vw,64px) clamp(10px,1.2vw,18px)}
.hero:has(.hero-slide.has-bg) .hero-dots{margin-bottom:10px}

/* A slide with no foreground image gets the full width for its text. */
.hero-grid.no-visual{grid-template-columns:1fr}
.hero-grid.no-visual .lead{max-width:680px}

/* Text colours for a slide sitting on its own background image. Without this
   the theme's near-black heading lands on a dark overlay and disappears. */
.hero-slide.text-light h1,
.hero-slide.text-light .btn-ghost,
.hero-slide.text-light .hero-trust .t b{color:#fff}
.hero-slide.text-light .lead,
.hero-slide.text-light .hero-trust .t span{color:rgba(255,255,255,.86)}
.hero-slide.text-light .eyebrow{color:#fff;background:rgba(255,255,255,.15)}
.hero-slide.text-light .btn-ghost{border-color:rgba(255,255,255,.45)}
.hero-slide.text-dark h1,
.hero-slide.text-dark .btn-ghost,
.hero-slide.text-dark .hero-trust .t b{color:#101322}
.hero-slide.text-dark .lead,
.hero-slide.text-dark .hero-trust .t span{color:#4a5064}
.hero-slide.text-dark .eyebrow{color:#6d3fe0;background:rgba(109,63,224,.1)}
.hero-slide.text-dark .btn-ghost{border-color:rgba(0,0,0,.16)}

/* Track height follows the active slide (JS adds .is-measured). Inactive
   slides leave the flow so a short slide no longer inherits the tallest
   slide's height and the empty band under it disappears. */
.hero-slides.is-measured{position:relative;transition:height .45s cubic-bezier(.2,.7,.2,1)}
.hero-slides.is-measured .hero-slide{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%}
/* With "equal height" on, every slide fills the (fixed) track instead of
   sitting at its top, so the copy stays vertically centred and the hero keeps
   exactly one height from the first slide to the last. */
.hero-slides.is-measured.is-equal .hero-slide{height:100%;display:flex;flex-direction:column;justify-content:center}
@media(prefers-reduced-motion:reduce){
  .hero-slides.is-measured{transition:none}
}

/* Services dropdown opens on hover / keyboard focus instead of on click, so
   the parent item behaves like a real link again: "خدماتنا" navigates to the
   services page and the panel still drops down. */
.nav .menu-item-has-children:hover>.sub-menu,
.nav .menu-item-has-children:focus-within>.sub-menu{display:block;animation:x0tSubIn .18s ease}
/* invisible bridge over the 6px gap so the pointer can reach the panel */
.nav .menu-item-has-children>.sub-menu::before{content:"";position:absolute;inset-block-start:-10px;inset-inline:0;height:10px}
.nav .menu-item-has-children:hover>a,
.nav .menu-item-has-children:focus-within>a{color:var(--magenta)}
.nav .menu-item-has-children:hover>a::after,
.nav .menu-item-has-children:focus-within>a::after{opacity:.9;transform:rotate(225deg) translateY(1px)}

/* Services archive cards: photo header instead of the icon badge, and every
   card the same height (grid-auto-rows:1fr) with its link pinned to the
   bottom so the ragged text lengths do not make the row look broken. */
.cards.cards-media{grid-auto-rows:1fr}
.cards.cards-media .card{display:flex;flex-direction:column}
.cards.cards-media .card .card-media{margin:-30px -30px 20px;aspect-ratio:16/10;border-radius:var(--r) var(--r) 0 0}
.cards.cards-4.cards-media .card .card-media{margin:-26px -26px 18px}

/* "اعرف المزيد": x0t_icon('arrow') is a bare <svg viewBox="0 0 24 24"> with no
   width/height, so with no CSS it was drawing ~54px tall next to 15px text.
   Size it like every other button icon and make the link a real card footer —
   a divider above it, and the arrow nudging along the reading direction on
   hover — instead of a stray line floating under the whitespace. */
.card .more svg{width:17px;height:17px;flex:0 0 auto;transition:transform .25s ease}
.cards.cards-media .card .more{
  margin-top:auto;align-self:stretch;align-items:center;gap:8px;
  padding-top:15px;border-top:1px solid var(--line);font-size:.95rem;
}
.cards.cards-media .card:hover .more svg{transform:translateX(-5px)}

/* The whole card is the link. Rather than wrapping everything in an <a> (which
   nests the heading inside a link and reads badly to screen readers) the real
   "اعرف المزيد" anchor grows an overlay over the card — one link, whole
   surface clickable, keyboard focus still lands on it. Any future link inside
   a card needs position:relative;z-index:2 to sit above this overlay. */
.cards.cards-media .card{cursor:pointer}
.cards.cards-media .card .more::after{content:"";position:absolute;inset:0;z-index:1}
.cards.cards-media .card:has(.more:focus-visible){outline:2px solid var(--magenta);outline-offset:3px}