/* ============================================================================
   TAKKA STORE — Shared site.css
   Extracted VERBATIM from the live site (Landing/site/index.html) so every
   marketing page is visually identical to the live homepage. Do not diverge.
   Design system source of truth: Takka Store Design System/colors_and_type.css
   ============================================================================ */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --brand-500:#5D58FA; --brand-400:#7E7AFB; --brand-300:#A09DFC;
  --brand-200:#C2C0FD; --brand-100:#E0DFFF; --brand-50:#F0EFFF;
  --brand-600:#4B46D8; --brand-700:#3A36B0;
  --n-0:#FFFFFF; --n-50:#F8F8FC; --n-100:#F2F2F8; --n-200:#E8E8F0;
  --n-300:#D4D4E4; --n-400:#A0A0B8; --n-500:#6E6E8A; --n-600:#4A4A5E;
  --n-700:#2E2E42; --n-800:#1A1A2E; --n-900:#0F0F1A;
  --success:#10B981;
  --font-ar:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  --font-en:'Inter',sans-serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
}
/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-ar);background:#fff;color:var(--n-900);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;}
[dir="ltr"],[dir="ltr"] body,[dir="ltr"] button,[dir="ltr"] input{font-family:var(--font-en);}
a{text-decoration:none;color:inherit;}
button{border:none;background:none;cursor:pointer;font-family:inherit;}
/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeUp    {from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes floatA    {0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes floatB    {0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-10px) rotate(1deg);}}
@keyframes floatC    {0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}
@keyframes gradMove  {0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes marquee   {0%{transform:translateX(0);}100%{transform:translateX(-33.3333%);}}
@keyframes blob1     {0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;}}
@keyframes blob2     {0%,100%{border-radius:40% 60% 60% 40%/60% 30% 70% 40%;}50%{border-radius:70% 30% 40% 60%/40% 70% 30% 60%;}}
@keyframes pulseBrand{0%,100%{box-shadow:0 8px 32px rgba(93,88,250,.32);}50%{box-shadow:0 8px 48px rgba(93,88,250,.55),0 0 0 8px rgba(93,88,250,.08);}}
@keyframes countPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes modalIn   {from{opacity:0;transform:scale(.93) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes backdropIn{from{opacity:0;}to{opacity:1;}}
/* ── UTILITIES ───────────────────────────────────────────────── */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.reveal.visible{opacity:1;transform:none;}
/* ── GRADIENT TEXT ───────────────────────────────────────────── */
.grad-text{
  background:linear-gradient(135deg,#5D58FA 0%,#A09DFC 45%,#5D58FA 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradMove 4s ease infinite;
}
/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:700;cursor:pointer;border-radius:12px;transition:all .22s var(--ease-out);white-space:nowrap;}
.btn-primary{background:var(--brand-500);color:#fff;padding:14px 28px;font-size:1rem;box-shadow:0 8px 24px rgba(93,88,250,.35);animation:pulseBrand 3s ease-in-out infinite;}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(93,88,250,.50);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-secondary{background:#fff;color:var(--n-900);border:1.5px solid var(--n-200);padding:14px 28px;font-size:1rem;}
.btn-secondary:hover{border-color:var(--brand-500);color:var(--brand-500);transform:translateY(-2px);box-shadow:0 8px 24px rgba(93,88,250,.12);}
.btn-sm{padding:10px 20px;font-size:.875rem;border-radius:10px;}
/* ── NAVBAR ──────────────────────────────────────────────────── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .3s var(--ease-out);}
#navbar.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(93,88,250,.10);box-shadow:0 4px 24px rgba(15,15,26,.06);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1200px;margin:0 auto;padding:0 24px;}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-logo-text{font-size:1.2rem;font-weight:800;color:var(--n-900);white-space:nowrap;}
.nav-logo-text span{color:var(--brand-500);}
.nav-links{display:flex;align-items:center;gap:26px;}
html[lang="fr"] .nav-links{gap:20px;}
html[lang="fr"] .nav-links a,html[lang="fr"] .nav-dd__btn{font-size:.86rem;}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--n-600);transition:color .2s;}
.nav-links a:hover{color:var(--brand-500);}
.nav-actions{display:flex;align-items:center;gap:12px;}
/* Lang */
.lang-wrap{position:relative;}
.lang-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:.85rem;font-weight:600;border:1.5px solid var(--n-200);color:var(--n-600);background:#fff;transition:all .2s;cursor:pointer;}
.lang-btn:hover{border-color:var(--brand-500);color:var(--brand-500);}
.lang-drop{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--n-200);border-radius:12px;box-shadow:0 12px 40px rgba(15,15,26,.12);min-width:140px;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .2s var(--ease-out);}
[dir="rtl"] .lang-drop{left:auto;right:0;}
.lang-drop.open{opacity:1;pointer-events:all;transform:translateY(0);}
.lang-opt{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.875rem;cursor:pointer;transition:background .15s;color:var(--n-700);}
.lang-opt:hover{background:var(--brand-50);color:var(--brand-500);}
.lang-opt.active{color:var(--brand-500);font-weight:600;}
/* Hamburger */
.ham{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:8px;transition:background .2s;}
.ham:hover{background:var(--n-100);}
.ham span{width:22px;height:2px;background:var(--n-700);border-radius:2px;transition:all .3s;}
/* Mobile menu */
/* القائمة تبدأ تحت الهيدر مباشرة — السكرول داخلها لا يتراكب مع الهيدر أبدًا */
.mob-menu{position:fixed;top:68px;left:0;right:0;bottom:0;z-index:999;display:flex;flex-direction:column;background:rgba(255,255,255,.99);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:14px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateX(100%);transition:transform .35s var(--ease-out);border-top:1px solid var(--n-100);}
.has-blognotice .mob-menu{top:calc(68px + var(--notice-h,46px));}
[dir="rtl"] .mob-menu{transform:translateX(-100%);}
.mob-menu.open{transform:translateX(0);}
.mob-menu a{font-size:1.2rem;font-weight:700;color:var(--n-800);padding:13px 0;border-bottom:1px solid var(--n-100);transition:color .2s;}
.mob-menu a:hover{color:var(--brand-500);}
.mob-actions{margin-top:24px;display:flex;flex-direction:column;gap:12px;flex-shrink:0;}
.mob-lang{display:flex;gap:8px;padding:2px 0 10px;border-bottom:1px solid var(--n-100);margin-bottom:2px;flex-shrink:0;}
.mob-lang-btn{flex:1;padding:10px 0;border-radius:10px;font-size:.875rem;font-weight:600;color:var(--n-500);border:1.5px solid var(--n-200);background:#fff;cursor:pointer;transition:all .2s;text-align:center;}
.mob-lang-btn.active,.mob-lang-btn:hover{background:var(--brand-50);border-color:var(--brand-300);color:var(--brand-600);}
/* ── HERO ────────────────────────────────────────────────────── */
#hero{position:relative;overflow:hidden;padding:148px 0 100px;background:linear-gradient(160deg,#fff 52%,#F0EFFF 100%);}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;opacity:.5;background:linear-gradient(135deg,rgba(93,88,250,.28),rgba(160,157,252,.15));filter:blur(64px);}
.b1{width:580px;height:580px;top:-140px;right:-80px;animation:blob1 12s ease-in-out infinite;}
.b2{width:480px;height:480px;bottom:-90px;left:-60px;animation:blob2 14s ease-in-out infinite;}
.b3{width:340px;height:340px;top:35%;right:38%;animation:blob1 10s ease-in-out infinite reverse;}
[dir="ltr"] .b1{right:auto;left:-80px;}
[dir="ltr"] .b2{left:auto;right:-60px;}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(93,88,250,.08);color:var(--brand-600);border:1px solid rgba(93,88,250,.20);border-radius:999px;padding:8px 18px;font-size:.875rem;font-weight:600;margin-bottom:28px;animation:fadeUp .6s var(--ease-out) .05s both;}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-500);animation:pulseBrand 2s ease-in-out infinite;}
.hero-badge-flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);object-fit:cover;}
.hero-h1{font-size:clamp(2.5rem,5vw,3.9rem);font-weight:900;line-height:1.15;letter-spacing:-.025em;color:var(--n-900);margin-bottom:22px;animation:fadeUp .6s var(--ease-out) .15s both;}
.hero-sub{font-size:1.08rem;color:var(--n-500);line-height:1.78;max-width:500px;margin-bottom:36px;animation:fadeUp .6s var(--ease-out) .25s both;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .6s var(--ease-out) .35s both;}
.hero-trust{margin-top:32px;display:flex;align-items:center;gap:12px;animation:fadeUp .6s var(--ease-out) .45s both;}
.avatars{display:flex;}
.av{width:33px;height:33px;border-radius:50%;border:2.5px solid #fff;background:linear-gradient(135deg,var(--brand-400),var(--brand-700));display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff;}
.av+.av{margin-inline-start:-10px;}
.trust-text{font-size:.875rem;color:var(--n-500);font-weight:500;}
.trust-text strong{color:var(--n-800);}
/* Hero visual */
.hero-vis{position:relative;animation:fadeUp .7s var(--ease-out) .2s both;}
.dash-card{background:#fff;border:1px solid var(--n-200);border-radius:20px;box-shadow:0 24px 80px rgba(15,15,26,.12),0 4px 16px rgba(93,88,250,.08);overflow:hidden;animation:floatA 6s ease-in-out infinite;}
.dash-top{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));padding:14px 20px;display:flex;align-items:center;gap:8px;}
.dash-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.38);}
.dash-title{color:rgba(255,255,255,.9);font-size:.8rem;font-weight:600;margin-inline-start:6px;}
.dash-body{padding:20px;}
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.dash-stat{background:var(--n-50);border-radius:12px;padding:14px;border:1px solid var(--n-100);}
.ds-label{font-size:.7rem;color:var(--n-500);font-weight:500;margin-bottom:5px;}
.ds-val{font-size:1.22rem;font-weight:800;color:var(--n-900);}
.ds-trend{font-size:.7rem;color:#0B7C57;font-weight:600;margin-top:2px;}
.dash-orders-title{font-size:.75rem;font-weight:700;color:var(--n-700);margin-bottom:10px;}
.order-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--n-100);}
.order-row:last-child{border-bottom:none;}
.or-name{font-size:.75rem;font-weight:600;color:var(--n-800);}
.or-amt{font-size:.75rem;font-weight:700;color:var(--brand-500);}
.badge{font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:999px;}
.bg-green{background:#D1FAE5;color:#065F46;}
.bg-blue{background:#DBEAFE;color:#1E40AF;}
.bg-amber{background:#FEF3C7;color:#92400E;}
/* Floating cards */
.fc{position:absolute;border-radius:16px;padding:13px 17px;box-shadow:0 12px 36px rgba(93,88,250,.18);font-size:.82rem;font-weight:600;white-space:nowrap;z-index:10;}
.dash-card{position:relative;z-index:1;}
.fc1{top:-22px;right:-52px;background:#fff;border:1px solid var(--n-200);color:var(--n-800);animation:floatB 5s ease-in-out infinite;display:flex;align-items:center;gap:8px;}
.fc2{bottom:28px;right:-60px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;animation:floatC 7s ease-in-out infinite;display:flex;align-items:center;gap:8px;}
[dir="ltr"] .fc1{right:auto;left:-52px;}
[dir="ltr"] .fc2{right:auto;left:-60px;}
/* ── MARQUEE ─────────────────────────────────────────────────── */
#marquee{padding:34px 0;background:var(--n-50);border-top:1px solid var(--n-200);border-bottom:1px solid var(--n-200);overflow:hidden;direction:ltr;}
.mq-track{display:flex;gap:56px;align-items:center;animation:marquee 22s linear infinite;width:max-content;}
.mq-item{font-size:.95rem;font-weight:700;color:var(--n-400);white-space:nowrap;transition:color .2s;}
.mq-item:hover{color:var(--brand-500);}
.mq-sep{color:var(--n-200);font-size:1.2rem;}
/* ── STATS ───────────────────────────────────────────────────── */
#stats{padding:72px 0;background:linear-gradient(135deg,var(--n-900) 0%,#1a1a35 100%);position:relative;overflow:hidden;}
#stats::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(93,88,250,.22) 0%,transparent 65%);}
.stats-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;}
.stat-num{font-size:2.7rem;font-weight:900;background:linear-gradient(135deg,#fff 30%,var(--brand-300));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px;}
.stat-lbl{font-size:.88rem;color:rgba(255,255,255,.48);font-weight:500;}
/* ── SECTION COMMONS ─────────────────────────────────────────── */
.sec-label{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-500);background:var(--brand-50);padding:6px 16px;border-radius:999px;margin-bottom:16px;}
.sec-title{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;color:var(--n-900);margin-bottom:14px;letter-spacing:-.02em;line-height:1.2;}
.sec-sub{font-size:1.02rem;color:var(--n-500);max-width:560px;line-height:1.72;}
.sec-head{margin-bottom:54px;}
/* ── FEATURES ────────────────────────────────────────────────── */
#features{padding:100px 0;background:#fff;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feat-card{background:#fff;border:1px solid var(--n-200);border-radius:20px;padding:32px 28px;position:relative;overflow:hidden;transition:all .28s var(--ease-out);}
.feat-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:linear-gradient(135deg,rgba(93,88,250,.06),transparent 60%);opacity:0;transition:opacity .28s;}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(93,88,250,.14);border-color:rgba(93,88,250,.25);}
.feat-card:hover::before{opacity:1;}
.feat-icon{width:52px;height:52px;border-radius:14px;background:var(--brand-50);border:1px solid var(--brand-100);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--brand-500);transition:all .28s var(--ease-out);}
.feat-card:hover .feat-icon{background:var(--brand-500);color:#fff;box-shadow:0 8px 24px rgba(93,88,250,.35);}
.feat-title{font-size:1.02rem;font-weight:700;color:var(--n-900);margin-bottom:10px;}
.feat-desc{font-size:.9rem;color:var(--n-500);line-height:1.72;}
/* ── HOW ─────────────────────────────────────────────────────── */
#how{padding:100px 0;background:var(--n-50);}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;}
.steps-grid::before{content:'';position:absolute;top:40px;left:18%;right:18%;height:2px;background:linear-gradient(90deg,var(--brand-100),var(--brand-300),var(--brand-100));}
.step-card{text-align:center;position:relative;z-index:1;}
.step-num{width:80px;height:80px;border-radius:50%;background:#fff;border:2px solid var(--brand-200);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:1.5rem;font-weight:900;color:var(--brand-500);box-shadow:0 8px 24px rgba(93,88,250,.12);transition:all .3s var(--ease-out);}
.step-card:hover .step-num{background:var(--brand-500);color:#fff;border-color:var(--brand-500);box-shadow:0 12px 32px rgba(93,88,250,.35);transform:scale(1.1);}
.step-title{font-size:1.08rem;font-weight:700;color:var(--n-900);margin-bottom:10px;}
.step-desc{font-size:.9rem;color:var(--n-500);line-height:1.72;}
/* ── TESTIMONIALS ────────────────────────────────────────────── */
#testimonials{padding:100px 0;background:#fff;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.testi-card{background:#fff;border:1px solid var(--n-200);border-radius:20px;padding:32px 28px;position:relative;overflow:hidden;transition:all .28s var(--ease-out);}
.testi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-400),var(--brand-600));opacity:0;transition:opacity .28s;}
.testi-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(15,15,26,.10);}
.testi-card:hover::before{opacity:1;}
.stars{display:flex;gap:4px;margin-bottom:18px;color:#FBBF24;}
.testi-quote{font-size:.93rem;color:var(--n-600);line-height:1.82;margin-bottom:24px;font-style:italic;}
.testi-author{display:flex;align-items:center;gap:12px;}
.testi-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand-400),var(--brand-700));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0;}
.testi-name{font-size:.9rem;font-weight:700;color:var(--n-900);}
.testi-role{font-size:.8rem;color:var(--n-400);margin-top:2px;}
/* ── CTA SECTION ─────────────────────────────────────────────── */
#cta-sec{padding:100px 0;background:linear-gradient(135deg,var(--n-900) 0%,#1a1a35 100%);position:relative;overflow:hidden;text-align:center;}
#cta-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(93,88,250,.32) 0%,transparent 65%);}
.cta-in{position:relative;z-index:1;}
.cta-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(93,88,250,.18);color:var(--brand-300);border:1px solid rgba(93,88,250,.30);border-radius:999px;padding:8px 20px;font-size:.875rem;font-weight:600;margin-bottom:24px;}
.cta-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#fff;margin-bottom:16px;letter-spacing:-.025em;}
.cta-sub{font-size:1.02rem;color:rgba(255,255,255,.52);margin-bottom:40px;}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn-white{background:#fff;color:var(--brand-600);padding:16px 36px;font-size:1rem;font-weight:700;border-radius:12px;box-shadow:0 8px 32px rgba(93,88,250,.25);transition:all .22s var(--ease-out);display:inline-flex;align-items:center;gap:8px;}
.btn-white:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 48px rgba(93,88,250,.42);}
.btn-outline-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28);padding:16px 36px;font-size:1rem;font-weight:600;border-radius:12px;display:inline-flex;align-items:center;gap:8px;transition:all .22s var(--ease-out);}
.btn-outline-w:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6);}
/* ── FOOTER ──────────────────────────────────────────────────── */
footer{background:var(--n-900);padding:72px 0 32px;border-top:1px solid rgba(255,255,255,.06);}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px;}
.foot-desc{font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.82;margin-top:14px;max-width:280px;}
.foot-col-t{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:20px;}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:12px;}
.foot-links a{font-size:.88rem;color:rgba(255,255,255,.48);transition:color .2s;}
.foot-links a:hover{color:#fff;}
.foot-bottom{padding-top:28px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.foot-copy{font-size:.8rem;color:rgba(255,255,255,.62);}
.socials{display:flex;gap:10px;}
.soc-link{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.42);transition:all .2s;}
.soc-link:hover{background:var(--brand-500);border-color:var(--brand-500);color:#fff;transform:translateY(-2px);}
/* ── MODAL ───────────────────────────────────────────────────── */
#backdrop{position:fixed;inset:0;z-index:2000;background:rgba(10,10,20,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;}
#backdrop.open{opacity:1;pointer-events:all;animation:backdropIn .3s ease;}
.modal{width:100%;max-width:480px;background:rgba(255,255,255,.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.72);border-radius:28px;box-shadow:0 32px 80px rgba(93,88,250,.25),0 8px 24px rgba(15,15,26,.15);padding:44px 40px;position:relative;text-align:center;animation:modalIn .4s var(--ease-spring) both;}
.modal-x{position:absolute;top:18px;left:18px;width:36px;height:36px;border-radius:10px;background:var(--n-100);color:var(--n-600);display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer;}
[dir="rtl"] .modal-x{left:auto;right:18px;}
.modal-x:hover{background:var(--n-200);color:var(--n-900);}
.modal-logo{display:flex;justify-content:center;margin-bottom:20px;}
.modal-title{font-size:1.45rem;font-weight:900;color:var(--n-900);margin-bottom:8px;letter-spacing:-.02em;}
.modal-sub{font-size:.9rem;color:var(--n-500);margin-bottom:30px;line-height:1.65;}
/* Countdown */
.cd-wrap{display:flex;gap:10px;justify-content:center;margin-bottom:32px;flex-wrap:wrap;}
.cd-blk{background:var(--n-900);border-radius:14px;padding:14px 16px;min-width:68px;text-align:center;box-shadow:0 8px 24px rgba(15,15,26,.28);}
.cd-blk:nth-child(2){animation:countPulse 2s ease-in-out infinite;}
.cd-blk:nth-child(4){animation:countPulse 2s ease-in-out .5s infinite;}
.cd-blk:nth-child(6){animation:countPulse 2s ease-in-out 1s infinite;}
.cd-blk:nth-child(8){animation:countPulse 2s ease-in-out 1.5s infinite;}
.cd-num{font-size:1.85rem;font-weight:900;line-height:1;background:linear-gradient(135deg,#fff 30%,var(--brand-300));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variant-numeric:tabular-nums;}
.cd-lbl{font-size:.68rem;font-weight:600;color:rgba(255,255,255,.38);margin-top:5px;letter-spacing:.04em;}
.cd-sep{font-size:1.85rem;font-weight:700;color:var(--brand-300);align-self:center;margin-top:-10px;opacity:.7;}
.modal-soc-t{font-size:.8rem;font-weight:600;color:var(--n-400);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.modal-socs{display:flex;gap:12px;justify-content:center;}
.msoc{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--n-200);color:var(--n-600);transition:all .22s var(--ease-out);background:#fff;}
.msoc:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.msoc.fb:hover{background:#1877F2;border-color:#1877F2;color:#fff;}
.msoc.ig:hover{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:#dc2743;color:#fff;}
.msoc.tw:hover{background:#000;border-color:#000;color:#fff;}
.msoc.tt:hover{background:#010101;border-color:#010101;color:#fff;}
.msoc.li:hover{background:#0A66C2;border-color:#0A66C2;color:#fff;}
/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px){
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .hero-grid{gap:40px;}
}
@media(max-width:768px){
  .nav-links,.nav-actions>button,.nav-actions .lang-wrap{display:none;}
  .ham{display:flex;}
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .hero-vis{order:-1;}
  .fc1,.fc2{display:none;}
  .hero-h1{font-size:2.2rem;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px;}
  .feat-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;gap:32px;}
  .steps-grid::before{display:none;}
  .testi-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .foot-bottom{flex-direction:column;text-align:center;}
  .modal{padding:36px 22px;}
  .cd-wrap{gap:7px;}
  .cd-blk{min-width:58px;padding:12px 12px;}
  .cd-num{font-size:1.5rem;}
}
/* Stack hero/CTA buttons full-width on mobile (768) — early enough for long
   French labels — and let the button text WRAP instead of overflowing the
   screen (base .btn is white-space:nowrap, which pushes long labels off-screen). */
@media(max-width:768px){
  .hero-ctas,.cta-btns{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn,.cta-btns .btn-white,.cta-btns .btn-outline-w{justify-content:center;width:100%;max-width:100%;}
  .hero-ctas .btn{white-space:normal;text-align:center;line-height:1.35;padding-block:14px;}
  /* On mobile ALL buttons wrap their label instead of forcing horizontal
     overflow — long FR labels ("Commencez le marketing…", etc.). Buttons
     almost never need nowrap on a phone. */
  .btn{white-space:normal;text-align:center;line-height:1.35;}
}
/* Defensive: long unbreakable FR words never force a horizontal scrollbar. */
.hero-sub,.sec-sub,.page-hero-sub,.prose p,.prose li,.feat-desc,.blog-card__desc,.price-card p,.gw-desc{overflow-wrap:break-word;}

/* ============================================================================
   CONTENT-PAGE ADDITIONS — same tokens/radii as the live site.
   Used by sub-pages (features, pricing, shipping…) which need layouts the
   single-page homepage does not. Kept in the live design language.
   ============================================================================ */

/* Page hero (secondary pages) */
.page-hero{position:relative;overflow:hidden;padding:132px 0 68px;background:linear-gradient(160deg,#fff 50%,#F0EFFF 100%);text-align:center;}
.page-hero .container{position:relative;z-index:1;}
.page-hero .hero-badge{margin-bottom:22px;}
.page-hero-title{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:900;line-height:1.16;letter-spacing:-.025em;color:var(--n-900);margin-bottom:18px;max-width:20ch;margin-inline:auto;}
.page-hero-sub{font-size:1.08rem;color:var(--n-500);line-height:1.78;max-width:60ch;margin:0 auto 32px;}
.page-hero .hero-ctas{justify-content:center;}

/* Section head start-aligned variant */
.sec-head.center{text-align:center;max-width:640px;margin-inline:auto;}

/* Media row — text + visual, alternating */
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.media-row+.media-row{margin-top:96px;}
.media-row.reverse .media-visual{order:-1;}
.media-frame{border-radius:20px;background:linear-gradient(160deg,#fff,#F0EFFF);border:1px solid var(--n-200);box-shadow:0 24px 80px rgba(15,15,26,.10),0 4px 16px rgba(93,88,250,.08);padding:22px;overflow:hidden;}
.media-frame img{width:100%;height:auto;display:block;border-radius:10px;}

/* Check-list (feature bullets) */
.check-list{list-style:none;display:grid;gap:16px;margin-top:8px;}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--n-600);line-height:1.7;}
.check-list li svg{flex-shrink:0;width:22px;height:22px;color:var(--brand-500);margin-top:2px;}
.check-list li strong{color:var(--n-900);font-weight:700;}

/* Tabs (country/tool switch) */
.tabs-list{display:inline-flex;gap:4px;padding:5px;background:var(--n-100);border-radius:999px;margin-bottom:28px;}
.tab-btn{padding:9px 20px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--n-500);transition:all .2s var(--ease-out);}
.tab-btn[aria-selected="true"]{background:#fff;color:var(--brand-600);box-shadow:0 2px 8px rgba(15,15,26,.06);}
.tab-panel[hidden]{display:none;}

/* App-store badges row */
.store-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.store-badges img{height:44px;width:auto;}

/* Inline note under CTA */
.cta-note{font-size:.88rem;color:var(--n-400);margin-top:14px;}

/* Numbers stay LTR inside RTL */
.num{unicode-bidi:plaintext;font-variant-numeric:tabular-nums;}

/* Skip link (a11y) */
.skip-link{position:absolute;inset-inline-start:16px;top:-100px;z-index:3000;background:var(--brand-500);color:#fff;padding:12px 20px;border-radius:10px;font-weight:700;transition:top .2s;}
.skip-link:focus{top:16px;}

/* Responsive for content additions */
@media(max-width:1024px){ .media-row{gap:40px;} }
@media(max-width:768px){
  .media-row{grid-template-columns:1fr;gap:36px;}
  .media-row.reverse .media-visual{order:0;}
  .media-row .media-visual{order:-1;}
  .media-row+.media-row{margin-top:64px;}
}

/* ── FLAGS (real SVG flags, not emoji — Windows can't render flag emoji) ── */
.lang-btn .flag,
.lang-opt img,
.mob-lang-btn img{width:21px;height:14px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(15,15,26,.10);flex-shrink:0;vertical-align:middle;}
.lang-opt{display:flex;align-items:center;gap:9px;}
.mob-lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;}

/* ── MOBILE HEADER DECLUTTER — show only logo + hamburger (login/lang go in drawer) ── */
@media(max-width:768px){
  .nav-actions{display:none;}
  .ham{display:flex;}
}

/* ============================================================================
   POLISH PASS — coded product mockups, depth, new sections, sticky CTA
   All token-based, same design language. RTL-first.
   ============================================================================ */

/* ── Depth utilities ── */
.glow-wrap{position:relative;}
.glow-wrap::before{content:'';position:absolute;inset:-8% -6%;background:radial-gradient(60% 60% at 50% 40%,rgba(93,88,250,.16),transparent 70%);filter:blur(10px);z-index:0;pointer-events:none;}
.glow-wrap>*{position:relative;z-index:1;}
.sec-label.grad{background:linear-gradient(135deg,var(--brand-50),#EDE9FF);color:var(--brand-600);border:1px solid var(--brand-100);}

/* ── Coded mockup: window frame (browser/app) ── */
.mk{background:#fff;border:1px solid var(--n-200);border-radius:18px;box-shadow:0 24px 70px rgba(15,15,26,.10),0 4px 14px rgba(93,88,250,.08);overflow:hidden;}
.mk__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--n-50);border-bottom:1px solid var(--n-100);}
.mk__dot{width:9px;height:9px;border-radius:50%;background:var(--n-300);}
.mk__title{margin-inline-start:8px;font-size:.72rem;font-weight:600;color:var(--n-500);}
.mk__body{padding:18px;}

/* ── Builder mockup ── */
.mk-builder{display:grid;grid-template-columns:76px 1fr;gap:14px;}
.mk-palette{display:flex;flex-direction:column;gap:8px;}
.mk-block{height:34px;border-radius:9px;background:var(--n-50);border:1px solid var(--n-200);display:flex;align-items:center;justify-content:center;color:var(--n-400);}
.mk-block svg{width:16px;height:16px;}
.mk-canvas{display:grid;gap:10px;}
.mk-hero-row{height:52px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));}
.mk-grid-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.mk-prod{height:70px;border-radius:10px;background:var(--n-50);border:1px solid var(--n-200);}
.mk-drop{border:2px dashed var(--brand-400);background:rgba(93,88,250,.06);display:flex;align-items:center;justify-content:center;color:var(--brand-500);font-size:.7rem;font-weight:700;position:relative;}
.mk-cursor{position:absolute;inset-block-end:-8px;inset-inline-start:24px;width:16px;height:16px;}

/* ── Payments diagram mockup ── */
.mk-pay{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 18px;}
.mk-pay__hub{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;font-weight:800;font-size:.9rem;box-shadow:var(--shadow-brand-sm);}
.mk-pay__chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.mk-pay__chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--n-200);font-size:.82rem;font-weight:700;color:var(--n-800);}
.mk-pay__chip .ok{width:18px;height:18px;border-radius:50%;background:var(--success);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.mk-pay__chip .ok svg{width:11px;height:11px;}

/* ── Analytics chart mockup ── */
.mk-chart__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;}
.mk-chart__val{font-size:1.5rem;font-weight:900;color:var(--n-900);}
.mk-chart__val span{font-size:.72rem;font-weight:700;color:var(--success);margin-inline-start:6px;}
.mk-bars{display:flex;align-items:flex-end;gap:10px;height:120px;}
.mk-bars .bar{flex:1;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--brand-400),var(--brand-600));opacity:.35;transition:height .8s var(--ease-out);}
.mk-bars .bar.on{opacity:1;}

/* ── Phone mockup ── */
.mk-phone{width:270px;max-width:100%;margin:0 auto;border:9px solid #0F0F1A;border-radius:38px;background:#0F0F1A;box-shadow:0 30px 80px rgba(15,15,26,.22);overflow:hidden;}
.mk-phone__screen{background:linear-gradient(160deg,#fff,#F0EFFF);padding:16px 14px 22px;}
.mk-phone__top{height:22px;display:flex;align-items:center;justify-content:center;}
.mk-phone__notch{width:96px;height:6px;border-radius:999px;background:rgba(255,255,255,.25);}

/* ── Templates mini storefronts ── */
.mk-tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mk-tpl{border-radius:12px;overflow:hidden;border:1px solid var(--n-200);background:#fff;box-shadow:var(--shadow-sm);}
.mk-tpl__top{height:34px;background:linear-gradient(135deg,var(--brand-400),var(--brand-600));}
.mk-tpl:nth-child(2) .mk-tpl__top{background:linear-gradient(135deg,#F59E0B,#EF4444);}
.mk-tpl:nth-child(3) .mk-tpl__top{background:linear-gradient(135deg,#10B981,#0EA5E9);}
.mk-tpl__body{padding:10px;display:grid;gap:7px;}
.mk-tpl__line{height:8px;border-radius:4px;background:var(--n-100);}
.mk-tpl__line.sm{width:60%;}
.mk-tpl__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;}
.mk-tpl__cell{height:26px;border-radius:6px;background:var(--n-50);border:1px solid var(--n-100);}

/* ── Segments "who is Takka for" ── */
.seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.seg-card{background:#fff;border:1px solid var(--n-200);border-radius:20px;padding:28px 24px;transition:all .28s var(--ease-out);}
.seg-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(93,88,250,.14);border-color:rgba(93,88,250,.25);}
.seg-ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:#fff;}
.seg-card:nth-child(1) .seg-ic{background:linear-gradient(135deg,var(--brand-400),var(--brand-600));}
.seg-card:nth-child(2) .seg-ic{background:linear-gradient(135deg,#F59E0B,#F97316);}
.seg-card:nth-child(3) .seg-ic{background:linear-gradient(135deg,#10B981,#059669);}
.seg-card:nth-child(4) .seg-ic{background:linear-gradient(135deg,#0EA5E9,#6366F1);}
.seg-ic svg{width:26px;height:26px;}
.seg-title{font-size:1.05rem;font-weight:800;color:var(--n-900);margin-bottom:8px;}
.seg-desc{font-size:.88rem;color:var(--n-500);line-height:1.7;}

/* ── Integrations grid ── */
.intg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.intg-chip{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 10px;border-radius:16px;background:#fff;border:1px solid var(--n-200);transition:all .24s var(--ease-out);}
.intg-chip:hover{transform:translateY(-4px);border-color:var(--brand-300);box-shadow:0 12px 32px rgba(93,88,250,.12);}
.intg-chip__ic{width:40px;height:40px;border-radius:11px;background:var(--brand-50);display:flex;align-items:center;justify-content:center;color:var(--brand-500);}
.intg-chip__ic svg{width:22px;height:22px;}
.intg-chip__name{font-size:.78rem;font-weight:700;color:var(--n-700);}

/* ── Mobile grid reflow for polish sections ── */
@media(max-width:768px){
  .seg-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .intg-grid{grid-template-columns:repeat(3,1fr);}
  .mk-phone{width:230px;}
}
@media(max-width:1024px){ .seg-grid{grid-template-columns:1fr 1fr;} .intg-grid{grid-template-columns:repeat(4,1fr);} }
@media(max-width:480px){ .mk-tpls .mk-tpl:nth-child(3){display:none;} }

/* Cascade fix — ensure mobile columns win over the 1024 breakpoint */
@media(max-width:768px){
  .seg-grid{grid-template-columns:1fr 1fr;}
  .intg-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:420px){
  .intg-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── UNIFIED BUTTON SCALE (2 sizes only: sm in nav, lg on pages) ── */
.btn-lg{padding:15px 32px;font-size:1.05rem;}
/* Keep every button on the same 12px radius + weight from the live system.
   btn-white / btn-outline-w (dark CTA) aligned to the same footprint. */
.btn-white,.btn-outline-w{padding:15px 32px;font-size:1.05rem;border-radius:12px;font-weight:700;}

/* ============================================================================
   PRICING — plan cards (same design language: 12px buttons, brand tokens)
   ============================================================================ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;}
.price-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--n-200);border-radius:22px;padding:34px 30px;transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out);}
.price-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(15,15,26,.10);border-color:var(--brand-200);}
.price-card.featured{border:2px solid var(--brand-500);box-shadow:0 20px 56px rgba(93,88,250,.22);}
@media(min-width:1024px){.price-card.featured{transform:scale(1.04);}.price-card.featured:hover{transform:scale(1.04) translateY(-6px);}}
/* Centered with PHYSICAL props (left + translateX) so it is direction-agnostic —
   the earlier inset-inline-start + wrong-signed translate pushed the badge off
   the card's right edge in LTR (FR/EN), causing horizontal overflow. */
.price-badge{position:absolute;inset-block-start:-14px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);text-align:center;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;padding:7px 20px;border-radius:999px;font-size:.76rem;font-weight:800;box-shadow:var(--shadow-brand-sm);white-space:nowrap;}
.price-ribbon{display:inline-flex;align-items:center;gap:6px;background:#FEF3C7;color:#92400E;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:800;margin-bottom:14px;width:fit-content;}
.price-name{font-size:1.15rem;font-weight:800;color:var(--n-900);margin-bottom:6px;}
.price-desc{font-size:.86rem;color:var(--n-500);line-height:1.6;min-height:42px;margin-bottom:20px;}
.price-tag{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.price-amount{font-size:2.9rem;font-weight:900;color:var(--n-900);line-height:1;unicode-bidi:plaintext;}
.price-old{font-size:1.1rem;font-weight:700;color:var(--n-400);text-decoration:line-through;unicode-bidi:plaintext;}
.price-per{font-size:.9rem;color:var(--n-500);font-weight:600;}
.price-save{font-size:.8rem;font-weight:700;color:var(--success);margin-bottom:22px;}
.price-card .btn{width:100%;justify-content:center;margin-bottom:26px;}
.price-feats{list-style:none;display:grid;gap:13px;margin:0;padding-top:24px;border-top:1px solid var(--n-100);}
.price-feats li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--n-600);line-height:1.55;}
.price-feats li svg{flex-shrink:0;width:19px;height:19px;color:var(--brand-500);margin-top:1px;}
.price-feats li.head{font-weight:800;color:var(--n-900);border:none;padding:0;}
.price-note{text-align:center;color:var(--n-400);font-size:.82rem;margin-top:26px;}
@media(max-width:900px){.pricing-grid{grid-template-columns:minmax(0,1fr);max-width:440px;}.price-card.featured{transform:none;}}

/* ── FAQ accordion (native <details>) ── */
.faq{max-width:760px;margin:0 auto;}
.faq-item{border:1px solid var(--n-200);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.faq-item[open]{border-color:var(--brand-200);box-shadow:0 8px 24px rgba(93,88,250,.08);}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:1rem;font-weight:700;color:var(--n-900);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'';width:22px;height:22px;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D58FA' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform .3s var(--ease-out);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item__body{padding:0 22px 20px;color:var(--n-600);font-size:.92rem;line-height:1.75;}

/* ============================================================================
   IMAGE-DRIVEN SECTIONS (photos/screenshots replace coded mockups)
   ============================================================================ */
/* Screenshot/photo frame for media-row visuals */
.media-shot{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--n-200);box-shadow:0 24px 70px rgba(15,15,26,.12),0 4px 16px rgba(93,88,250,.08);background:#fff;}

/* Mobile app portrait image (dark section) */
.app-shot{width:auto;max-width:100%;max-height:560px;display:inline-block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));}

/* Google Play badge */
.app-badge{display:inline-flex;align-items:center;gap:12px;padding:11px 22px;border-radius:14px;background:#fff;color:var(--n-900);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);}
.app-badge:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.25);}
.app-badge span{display:flex;flex-direction:column;line-height:1.15;text-align:start;}
.app-badge small{font-size:.68rem;color:var(--n-500);}
.app-badge strong{font-size:1.05rem;font-weight:800;}

/* Dark-section check list uses lighter check */
.app-check li svg{color:var(--brand-300);}

/* Country pills under the map */
.country-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px;}
.c-pill{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:999px;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-700);font-weight:700;font-size:.92rem;transition:all .22s var(--ease-out);}
.c-pill:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500);transform:translateY(-2px);}

/* ── Marquee logos (images instead of text) ── */
.mq-logo{height:38px;width:auto;flex-shrink:0;opacity:.9;transition:opacity .2s;}
.mq-logo:hover{opacity:1;}
#marquee .mq-track{gap:44px;}

/* ── Payment gateway chips (per-country tabs) ── */
.gw-desc{color:var(--n-600);font-size:.95rem;line-height:1.65;margin-bottom:16px;}
.gw-chips{display:flex;flex-wrap:wrap;gap:9px;}
.gw-chip{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--n-200);font-size:.85rem;font-weight:700;color:var(--n-700);transition:all .2s var(--ease-out);}
.gw-chip:hover{border-color:var(--brand-300);color:var(--brand-600);background:var(--brand-50);}

/* ── Language button wider label ── */
.lang-btn{white-space:nowrap;}

/* ── Mobile app section responsive fix + global overflow guard ── */
.app-shot{max-height:600px;}
@media(max-width:768px){
  .app-shot{max-height:440px;width:auto;}
  #marquee .mq-track{gap:32px;}
  .mq-logo{height:33px;}
  .gw-chips{gap:8px;}
}
@media(max-width:520px){
  .app-shot{max-height:380px;}
}
/* Prevent any horizontal overflow site-wide (safety for animated/floating bits) */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip;}

/* ── Footer: "أحد مشاريع جذور سوفت" — its own centered line, separated ── */
.foot-jozoor{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:.85rem;color:rgba(255,255,255,.4);}
.foot-jozoor a{color:var(--brand-300);font-weight:700;}
.foot-jozoor a:hover{color:#fff;}

/* ── Tabs: horizontal scroll on narrow screens (fixes 6-tab overflow on mobile) ── */
.tabs-list{max-width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.tabs-list::-webkit-scrollbar{display:none;}
.tab-btn{flex-shrink:0;}

/* Tabs must fill + scroll (not shrink-to-fit) on narrow screens */
@media(max-width:768px){
  .tabs-list{display:flex;width:100%;}
}

/* Allow grid/flex children to shrink below content size so inner scroll works
   (fixes tabs bar forcing the whole column wider than the phone screen) */
.media-row > *{min-width:0;}
.tabs-list{min-width:0;scroll-behavior:smooth;}
/* Edge fade cues: shown by JS (has-start/has-end) only when more tabs exist to
   scroll to — signals the strip is scrollable instead of looking cut off. */
.tabs-list.has-end{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 82%,transparent 100%);}
.tabs-list.has-start{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%);}
.tabs-list.has-start.has-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);}
/* RTL: the scroll-forward ("end") direction is the left edge — mirror the fades. */
[dir="rtl"] .tabs-list.has-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%);}
[dir="rtl"] .tabs-list.has-start{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,#000 82%,transparent 100%);}
[dir="rtl"] .tabs-list.has-start.has-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);}

/* ── Hero dashboard: right-align the numbers (plaintext was left-aligning them) ── */
.dash-stat{text-align:right;}
.dash-stat .ds-label,.dash-stat .ds-val,.dash-stat .ds-trend{text-align:right;display:block;}

/* ── Shipping carriers logo strip (grouped by region) ── */
.carriers{margin-top:36px;}
.carriers__group{margin-bottom:20px;}
.carriers__label{font-size:.78rem;font-weight:700;color:var(--n-400);margin-bottom:12px;letter-spacing:.02em;}
.carriers__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.carriers__row img{height:38px;width:auto;opacity:.9;}

/* ── Highlights: 5 cards laid out 3-on-top / 2-centered-below ── */
.hl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.hl-grid .feat-card{flex:0 1 320px;max-width:360px;}
@media(max-width:768px){ .hl-grid .feat-card{flex:1 1 100%;max-width:none;} }

/* ── Gateway logos inside payment tabs — full rules further down (fixed-slot .gw-logo) ── */
.gw-cod{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:var(--brand-50);border:1px solid var(--brand-100);font-size:.82rem;font-weight:700;color:var(--brand-700);}

/* ── Carriers: cleaner grouped cards ── */
.carriers{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.carriers__group{background:#fff;border:1px solid var(--n-200);border-radius:16px;padding:20px 22px;}
.carriers__label{font-size:.8rem;font-weight:800;color:var(--n-700);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--n-100);}
.carriers__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;}
.carriers__row img{height:35px;width:auto;}
@media(max-width:768px){ .carriers{grid-template-columns:1fr;} }

/* ── Steps: 3-step layout (connector line spans the 3 centered circles) ── */
.steps-grid{grid-template-columns:repeat(3,1fr);}
.steps-grid::before{left:17%;right:17%;}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr;gap:32px;}.steps-grid::before{display:none;}}

/* ── Marquee: perfectly seamless infinite loop (desktop + mobile) ──
   Using per-logo margin (not flex gap) so the repeat unit is uniform and
   translateX(-50%) lands exactly on the duplicate → no jump.
   Each logo sits in a FIXED-SIZE slot (not its native width) so real logos
   with wildly different aspect ratios (e.g. Aramex 5.7:1 vs Mastercard 1.6:1)
   all read as one even, continuous rhythm instead of a visible size-gradient. ── */
#marquee .mq-track{gap:0;width:max-content;animation:marquee 30s linear infinite;direction:ltr;}
.mq-slot{display:inline-flex;align-items:center;justify-content:center;width:96px;height:40px;flex-shrink:0;margin-inline-end:44px;}
.mq-slot .mq-logo{max-width:100%;max-height:100%;width:auto;height:auto;margin:0;}
#marquee:hover .mq-track{animation-play-state:paused;}
@media(max-width:768px){ .mq-slot{width:78px;margin-inline-end:30px;} #marquee .mq-track{animation-duration:20s;} }
@media (prefers-reduced-motion: reduce){ #marquee .mq-track{animation:none;} }

/* ── Gateway logos inside country payment tabs: same fixed-slot technique
   so rows wrap evenly (not ragged) and switching tabs doesn't jump height. ── */
/* 3-per-row grid with larger tiles — fills the row cleanly (no ragged gaps)
   and shows the logos noticeably bigger than the old fixed 104×44 slots. */
.gw-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:140px;align-content:start;}
.gw-logos img{height:auto;width:auto;}
.gw-logo{display:inline-flex;align-items:center;justify-content:center;width:100%;height:62px;background:#fff;border:1px solid var(--n-100);border-radius:12px;padding:11px 16px;}
.gw-logo img{max-width:100%;max-height:100%;object-fit:contain;}
/* "+N more" tile — signals the shown logos are a subset of a larger network. */
.gw-more{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:62px;border-radius:12px;background:linear-gradient(135deg,var(--brand-50),#fff);border:1px dashed var(--brand-300);color:var(--brand-600);text-align:center;gap:1px;line-height:1.1;}
a.gw-more{cursor:pointer;text-decoration:none;transition:all .2s var(--ease-out);}
a.gw-more:hover{border-color:var(--brand-500);border-style:solid;background:var(--brand-100);transform:translateY(-2px);box-shadow:0 8px 20px rgba(93,88,250,.14);}
.gw-more b{font-size:1.05rem;font-weight:900;letter-spacing:-.01em;}
.gw-more span{font-size:.62rem;font-weight:700;color:var(--n-500);}
@media(max-width:640px){ .gw-logo{height:54px;padding:9px 12px;} .gw-logos{gap:10px;min-height:122px;} .gw-more{height:54px;} }

/* ── Header: switch to hamburger below 1024 (6 nav items need more room) ── */
@media(max-width:1024px){
  .nav-links{display:none;}
  .nav-actions{display:none;}
  .ham{display:flex;}
}
/* French labels are much longer → collapse to hamburger earlier so the desktop
   bar never overflows/wraps on mid-size laptops (1025–1200px). */
@media(max-width:1200px){
  html[lang="fr"] .nav-links{display:none;}
  html[lang="fr"] .nav-actions{display:none;}
  html[lang="fr"] .ham{display:flex;}
}

/* ============================================================================
   FORMS (contact etc.) — design-system aligned (12px radius, brand focus)
   ============================================================================ */
.form-card{background:#fff;border:1px solid var(--n-200);border-radius:20px;padding:36px;box-shadow:0 8px 32px rgba(15,15,26,.06);}
.form-field{margin-bottom:18px;}
.form-label{display:block;font-size:.9rem;font-weight:700;color:var(--n-800);margin-bottom:8px;}
.form-input,.form-select,.form-textarea{width:100%;padding:13px 16px;border:1.5px solid var(--n-200);border-radius:12px;font-family:inherit;font-size:1rem;color:var(--n-900);background:#fff;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--n-400);}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100);}
.form-textarea{min-height:140px;resize:vertical;}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.form-note{font-size:.85rem;color:var(--n-500);margin-top:14px;text-align:center;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}

/* Contact channel cards */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.contact-card{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--n-200);border-radius:16px;padding:22px;transition:all .24s var(--ease-out);}
.contact-card:hover{transform:translateY(-3px);border-color:var(--brand-300);box-shadow:0 12px 32px rgba(93,88,250,.10);}
.contact-card__ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:var(--brand-50);color:var(--brand-500);display:flex;align-items:center;justify-content:center;}
.contact-card__ic svg{width:22px;height:22px;}
.contact-card > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.contact-card__t{display:block;order:2;font-size:.78rem;font-weight:600;color:var(--n-500);letter-spacing:.01em;}
.contact-card__v{display:block;order:1;font-size:1.02rem;font-weight:700;color:var(--n-900);unicode-bidi:plaintext;line-height:1.4;}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start;}
@media(max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr);}.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
@media(max-width:520px){.contact-grid{grid-template-columns:minmax(0,1fr);}}

/* ============================================================================
   LEGAL / PROSE PAGES — readable long-form content
   ============================================================================ */
.legal-hero{padding:120px 0 40px;background:linear-gradient(160deg,#fff 55%,#F0EFFF 100%);}
.legal-hero .legal-title{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:900;color:var(--n-900);letter-spacing:-.02em;margin-bottom:12px;}
.legal-updated{font-size:.85rem;color:var(--n-500);font-weight:600;}
.prose{max-width:820px;margin:0 auto;padding:56px 0 100px;}
.prose h2{font-size:1.5rem;font-weight:800;color:var(--n-900);margin:40px 0 14px;letter-spacing:-.01em;}
.prose h3{font-size:1.15rem;font-weight:700;color:var(--n-900);margin:26px 0 10px;}
.prose p{font-size:1rem;color:var(--n-600);line-height:1.9;margin-bottom:16px;}
.prose ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;}
.prose ul li{position:relative;padding-inline-start:26px;color:var(--n-600);line-height:1.85;}
.prose ul li::before{content:'';position:absolute;inset-inline-start:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--brand-400);}
.prose ol{list-style:none;counter-reset:steps;margin:0 0 18px;padding:0;display:grid;gap:12px;}
.prose ol li{position:relative;padding-inline-start:40px;color:var(--n-600);line-height:1.85;counter-increment:steps;}
.prose ol li::before{content:counter(steps);position:absolute;inset-inline-start:0;top:3px;width:26px;height:26px;border-radius:50%;background:var(--brand-500);color:#fff;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.prose a{color:var(--brand-500);font-weight:600;}
.prose a:hover{text-decoration:underline;}
.prose strong{color:var(--n-900);font-weight:700;}
.prose .lead{font-size:1.1rem;color:var(--n-700);line-height:1.85;padding:18px 22px;background:var(--brand-50);border-radius:14px;border:1px solid var(--brand-100);margin-bottom:28px;}
.prose hr{border:none;border-top:1px solid var(--n-200);margin:36px 0;}
.legal-toc{background:var(--n-50);border:1px solid var(--n-200);border-radius:14px;padding:22px 26px;margin-bottom:36px;}
.legal-toc h2{font-size:1rem;margin:0 0 12px;}
.legal-toc ul{display:grid;gap:8px;}
.legal-toc a{font-size:.92rem;}

/* ── Header "المنتج" dropdown ── */
.nav-dd{position:relative;display:inline-flex;align-items:center;}
.nav-dd__btn{display:inline-flex;align-items:center;gap:5px;font-size:.9rem;font-weight:500;color:var(--n-600);cursor:pointer;background:none;border:none;font-family:inherit;padding:0;transition:color .2s;}
.nav-dd__btn:hover,.nav-dd[data-open="true"] .nav-dd__btn{color:var(--brand-500);}
.nav-dd__btn svg{transition:transform .25s var(--ease-out);}
.nav-dd[data-open="true"] .nav-dd__btn svg{transform:rotate(180deg);}
.nav-dd__menu{position:absolute;top:calc(100% + 14px);inset-inline-start:50%;transform:translate(50%,-8px);min-width:210px;background:#fff;border:1px solid var(--n-200);border-radius:14px;box-shadow:0 14px 44px rgba(15,15,26,.14);padding:8px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);z-index:120;}
[dir="ltr"] .nav-dd__menu{transform:translate(-50%,-8px);}
.nav-dd[data-open="true"] .nav-dd__menu{opacity:1;pointer-events:all;transform:translate(50%,0);}
[dir="ltr"] .nav-dd[data-open="true"] .nav-dd__menu{transform:translate(-50%,0);}
.nav-dd__menu a{display:block;padding:10px 14px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--n-700);white-space:nowrap;transition:background .15s,color .15s;}
.nav-dd__menu a:hover,.nav-dd__menu a[aria-current="page"]{background:var(--brand-50);color:var(--brand-600);}

/* ── Mobile menu group labels + sub-items ── */
.mob-group{display:block;font-size:.78rem;font-weight:800;color:var(--n-400);padding:12px 0 2px;letter-spacing:.04em;}
.mob-menu a.mob-sub{font-size:1.05rem;padding-block:11px;padding-inline-start:14px;color:var(--n-700);}
/* Action buttons keep their design-system styling (generic .mob-menu a must NOT recolor them) */
.mob-menu .mob-actions .btn{border-bottom:none;padding:15px 24px;font-size:1rem;}
.mob-menu .mob-actions .btn-primary,.mob-menu .mob-actions .btn-primary:hover{color:#fff;}
.mob-menu .mob-actions .btn-secondary{color:var(--n-900);}
.mob-menu .mob-actions .btn-secondary:hover{color:var(--brand-500);}

/* Desktop: open the countries dropdown on hover (pure CSS, no JS conflict) */
@media(min-width:1025px){
  .nav-dd:hover .nav-dd__menu{opacity:1;pointer-events:all;transform:none;}
  .nav-dd:hover .nav-dd__btn{color:var(--brand-500);}
  .nav-dd:hover .nav-dd__btn svg{transform:rotate(180deg);}
}

/* Force open-state (robust across renderers) — start-anchored, no centering transform */
.nav-dd[data-open="true"] > .nav-dd__menu{opacity:1 !important;transform:none !important;pointer-events:all !important;}

/* ── Dropdown: display-based (bulletproof, no opacity dependency) ── */
.nav-dd__menu{opacity:1;transform:none;transition:none;display:none;top:calc(100% + 12px);inset-inline-start:0;inset-inline-end:auto;}
.nav-dd[data-open="true"] > .nav-dd__menu,
.nav-dd:hover > .nav-dd__menu{display:block;}

/* ── Footer grid: brand + 4 link columns (5 cols) ── */
footer .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px;}
footer .foot-col-t{color:rgba(255,255,255,.62);}
footer .foot-links a{color:rgba(255,255,255,.62);}
footer .foot-links a:hover{color:#fff;}
footer .foot-desc{max-width:260px;}
@media(max-width:1024px){ footer .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px;} }
@media(max-width:680px){ footer .foot-grid{grid-template-columns:1fr 1fr;gap:28px;} footer .foot-grid > div:first-child{grid-column:1 / -1;} }
@media(max-width:420px){ footer .foot-grid{grid-template-columns:1fr;} }

/* ── Dropdown: CLICK-to-open only (hover closed too early when moving to items) ── */
.nav-dd > .nav-dd__menu{display:none !important;}
.nav-dd[data-open="true"] > .nav-dd__menu{display:block !important;}

/* ── Floating WhatsApp (right side) + region picker popup ── */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:950;}
.wa-fab__btn{width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(37,211,102,.45);cursor:pointer;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);}
.wa-fab__btn:hover{transform:scale(1.08);box-shadow:0 12px 36px rgba(37,211,102,.55);}
/* popup opens to the LEFT of the fixed button (button never moves) */
.wa-fab__pop{display:none;position:absolute;bottom:0;right:calc(100% + 16px);width:288px;background:#fff;border:1px solid var(--n-200);border-radius:18px;box-shadow:0 20px 50px rgba(15,15,26,.20);padding:16px;}
.wa-fab[data-open="true"] .wa-fab__pop{display:block;animation:fadeUp .25s var(--ease-out);}
.wa-fab__head{font-weight:800;color:var(--n-900);font-size:1rem;margin-bottom:3px;}
.wa-fab__sub{font-size:.82rem;color:var(--n-500);margin-bottom:14px;}
.wa-fab__opt{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--n-200);margin-bottom:8px;transition:border-color .18s,background .18s;}
.wa-fab__opt:last-child{margin-bottom:0;}
.wa-fab__opt:hover{border-color:#25D366;background:#F0FDF4;}
.wa-fab__opt-ic{width:38px;height:38px;border-radius:10px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-fab__opt-t{display:block;font-weight:700;color:var(--n-900);font-size:.9rem;}
.wa-fab__opt-s{display:block;font-size:.76rem;color:var(--n-500);}
@media(max-width:768px){ .wa-fab{right:16px;bottom:16px;} .wa-fab__btn{width:52px;height:52px;} .wa-fab__pop{right:0;bottom:calc(100% + 14px);width:min(280px,calc(100vw - 32px));} }

/* ── Contact cards: single column; long values (email / WhatsApp text) wrap
   instead of forcing the grid track wider than the viewport ── */
.contact-grid{grid-template-columns:minmax(0,1fr);}
.contact-card{align-items:center;}
.contact-card__v{white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.contact-card > span:last-child{min-width:0;flex:1;}
/* RTL: values are LTR content (phone/email) so unicode-bidi:plaintext left-aligns
   them; force them (and their labels) back to the start/right edge next to the icon. */
[dir="rtl"] .contact-card__v,[dir="rtl"] .contact-card__t{text-align:right;}
@media(max-width:520px){ .contact-grid{grid-template-columns:minmax(0,1fr);} }

/* ── Legal hero aligned with the 820px prose column below it ── */
.legal-hero .container{max-width:868px;}

/* ── Contact socials: encouraging line + pill row ── */
.contact-social{margin-top:26px;padding-top:22px;border-top:1px solid var(--n-200);}
.contact-social__t{font-size:.95rem;font-weight:700;color:var(--n-800);margin:0 0 14px;}
.contact-social__row{display:flex;flex-wrap:wrap;gap:10px;}
.soc-pill{width:44px;height:44px;border-radius:12px;background:var(--n-50);border:1px solid var(--n-200);color:var(--n-600);display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-out);}
.soc-pill:hover{background:var(--brand-500);border-color:var(--brand-500);color:#fff;transform:translateY(-3px);box-shadow:0 10px 22px rgba(93,88,250,.28);}

/* ── Custom select (matches site style, not the native classic list) ── */
.c-select{position:relative;}
.c-select__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1.5px solid var(--n-200);border-radius:12px;background:#fff;font-family:inherit;font-size:1rem;color:var(--n-900);cursor:pointer;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);text-align:start;}
.c-select__btn:hover{border-color:var(--brand-300);}
.c-select[data-open="true"] .c-select__btn{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100);}
.c-select__chev{flex-shrink:0;color:var(--n-400);transition:transform .2s var(--ease-out);}
.c-select[data-open="true"] .c-select__chev{transform:rotate(180deg);color:var(--brand-500);}
.c-select__menu{display:none;position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:60;background:#fff;border:1px solid var(--n-200);border-radius:14px;box-shadow:0 16px 40px rgba(17,17,26,.12);padding:6px;list-style:none;margin:0;max-height:min(300px,52vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.c-select__menu::-webkit-scrollbar{width:8px;}
.c-select__menu::-webkit-scrollbar-thumb{background:var(--n-200);border-radius:8px;border:2px solid #fff;}
.c-select[data-open="true"] .c-select__menu{display:block;animation:fadeUp .2s var(--ease-out);}
.c-select__opt{padding:11px 14px;border-radius:9px;font-size:.95rem;color:var(--n-700);cursor:pointer;transition:background .15s,color .15s;}
.c-select__opt:hover{background:var(--brand-50);color:var(--brand-500);}
.c-select__opt[aria-selected="true"]{background:var(--brand-50);color:var(--brand-500);font-weight:700;}

/* ============================================================================
   PROMO MODALS — launch gift code + annual subscription offer
   ============================================================================ */
.promo-ov{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,15,26,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.promo-ov[data-open="true"]{display:flex;animation:promoFade .25s var(--ease-out);}
@keyframes promoFade{from{opacity:0}to{opacity:1}}
.promo-card{position:relative;width:100%;max-width:430px;background:#fff;border-radius:22px;padding:34px 30px 30px;box-shadow:0 30px 80px rgba(15,15,26,.35);text-align:center;animation:fadeUp .3s var(--ease-out);}
.promo-card--annual{max-width:460px;background:linear-gradient(180deg,#fff 60%,#F0EFFF 100%);}
.promo-close{position:absolute;top:14px;inset-inline-start:14px;width:34px;height:34px;border:none;border-radius:10px;background:var(--n-50);color:var(--n-500);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,color .18s;}
.promo-close:hover{background:var(--n-100);color:var(--n-900);}
.promo-emoji{font-size:2.6rem;line-height:1;margin-bottom:6px;}
.promo-badge{display:inline-block;background:var(--brand-50);color:var(--brand-600,#4B47D6);font-size:.78rem;font-weight:800;padding:5px 14px;border-radius:999px;margin-bottom:14px;letter-spacing:.01em;}
.promo-title{font-size:1.5rem;font-weight:900;color:var(--n-900);letter-spacing:-.02em;margin:0 0 10px;line-height:1.3;}
.promo-text{font-size:.98rem;color:var(--n-600);line-height:1.75;margin:0 0 22px;}
.promo-code-row{display:flex;gap:8px;margin-bottom:16px;}
.promo-code{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--brand-300);background:var(--brand-50);border-radius:12px;padding:13px 12px;font-family:Inter,monospace;font-size:1.25rem;font-weight:800;letter-spacing:.14em;color:var(--brand-600,#4B47D6);}
.promo-copy{flex-shrink:0;padding:0 16px;border:none;border-radius:12px;background:var(--n-900);color:#fff;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .18s,transform .1s;display:flex;align-items:center;gap:6px;}
.promo-copy:hover{background:#000;}
.promo-copy:active{transform:scale(.96);}
.promo-copy.copied{background:var(--success,#10B981);}
.promo-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:12px;background:var(--brand-500);color:#fff;font-family:inherit;font-size:1rem;font-weight:800;text-decoration:none;transition:background .2s,transform .1s,box-shadow .2s;box-shadow:0 10px 26px rgba(93,88,250,.32);}
.promo-cta:hover{background:var(--brand-600,#4B47D6);transform:translateY(-2px);}
.promo-note{font-size:.82rem;color:var(--n-500);margin:14px 0 0;}
.promo-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px;text-align:start;}
.promo-list li{display:flex;align-items:flex-start;gap:10px;font-size:.96rem;color:var(--n-700);line-height:1.5;}
.promo-list li svg{flex-shrink:0;width:20px;height:20px;color:var(--success,#10B981);margin-top:2px;}
.promo-price{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:4px 0 20px;}
.promo-price__now{font-size:2.3rem;font-weight:900;color:var(--brand-500);}
.promo-price__old{font-size:1.2rem;font-weight:600;color:var(--n-400);text-decoration:line-through;}
.promo-price__per{font-size:.9rem;color:var(--n-500);}
.promo-urgency{display:inline-flex;align-items:center;gap:6px;background:#FEF2F2;color:#DC2626;font-size:.82rem;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:8px;}
@media(max-width:420px){ .promo-card{padding:30px 20px 24px;} .promo-code{font-size:1.05rem;letter-spacing:.1em;} .promo-title{font-size:1.3rem;} }

/* ══════════════════════════════════════════════════════════════
   BLOG — مدونة تكة ستور (مُولَّدة من _gen/blog.js)
   ══════════════════════════════════════════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{background:#fff;border:1px solid var(--n-200);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .25s var(--ease-out);}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(93,88,250,.10);border-color:var(--brand-200);}
.blog-card__imgwrap{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--brand-50);}
/* ── ترقيم صفحات المدونة ── */
.blog-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:44px;flex-wrap:wrap;}
.pager__nums{display:inline-flex;gap:6px;}
.pager__n{min-width:40px;height:40px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--n-200);color:var(--n-700);font-weight:700;font-size:.95rem;transition:all .2s var(--ease-out);}
.pager__n:hover{border-color:var(--brand-300);color:var(--brand-600);}
.pager__n.is-active{background:var(--brand-500);border-color:var(--brand-500);color:#fff;box-shadow:0 4px 14px rgba(93,88,250,.28);}
.pager__x{padding:0 16px;height:40px;display:inline-flex;align-items:center;border-radius:10px;border:1px solid var(--n-200);color:var(--n-700);font-weight:700;font-size:.9rem;transition:all .2s var(--ease-out);}
.pager__x:hover{border-color:var(--brand-300);color:var(--brand-600);}
.pager__x.is-off{opacity:.38;pointer-events:none;}
@media(max-width:520px){ .blog-pager{gap:8px;} .pager__x{padding:0 12px;} }
.blog-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease-out);}
.blog-card:hover .blog-card__img{transform:scale(1.04);}
.blog-card__body{padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-card__meta{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--n-500);flex-wrap:wrap;}
.blog-card__title{font-size:1.08rem;font-weight:800;line-height:1.5;color:var(--n-900);}
.blog-card__title a{color:inherit;}
.blog-card__title a:hover{color:var(--brand-500);}
.blog-card__desc{font-size:.9rem;color:var(--n-500);line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--n-100);}
.blog-chip{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;color:var(--brand-600);background:var(--brand-50);border:1px solid var(--brand-100);padding:4px 12px;border-radius:999px;transition:all .2s var(--ease-out);}
.blog-chip:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500);}
.blog-chip--lg{font-size:.88rem;padding:8px 18px;}
.blog-dot{color:var(--n-300);}
.blog-read{font-size:.78rem;color:var(--n-400);white-space:nowrap;}
.blog-ava{border-radius:50%;object-fit:cover;background:var(--brand-50);flex-shrink:0;}
.blog-author-mini{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--n-700);}
.blog-author-mini:hover span{color:var(--brand-500);}
/* المقال المميز */
.blog-featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;border:1px solid var(--n-200);border-radius:22px;overflow:hidden;margin-bottom:34px;transition:all .25s var(--ease-out);}
.blog-featured:hover{box-shadow:0 20px 50px rgba(93,88,250,.12);border-color:var(--brand-200);}
.blog-featured__imgwrap{display:block;min-height:280px;background:var(--brand-50);}
.blog-featured__img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-featured__body{padding:34px 32px;display:flex;flex-direction:column;gap:12px;justify-content:center;}
.blog-featured__title{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:900;line-height:1.45;color:var(--n-900);}
.blog-featured__title a{color:inherit;}
.blog-featured__title a:hover{color:var(--brand-500);}
@media(max-width:860px){.blog-featured{grid-template-columns:1fr;}.blog-featured__imgwrap{aspect-ratio:16/9;min-height:0;}.blog-featured__body{padding:24px 22px;}}
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;}
/* صفحة المقال */
.blog-crumbs{font-size:.84rem;color:var(--n-400);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.blog-crumbs a{color:var(--n-500);font-weight:600;}
.blog-crumbs a:hover{color:var(--brand-500);}
.blog-crumbs--hero{justify-content:center;}
.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88rem;color:var(--n-500);margin-top:14px;}
.blog-fig{margin:0 0 28px;border-radius:18px;overflow:hidden;border:1px solid var(--n-200);}
.blog-fig img{width:100%;height:auto;display:block;}
.blog-fig--hero{margin-bottom:30px;}
.blog-toc{background:var(--n-50);border:1px solid var(--n-200);border-radius:16px;padding:20px 24px;margin-bottom:32px;}
.blog-toc__t{font-size:.95rem;font-weight:800;color:var(--n-900);margin-bottom:10px;}
.blog-toc ol{margin:0;padding-inline-start:20px;display:grid;gap:7px;}
.blog-toc li{color:var(--n-500);font-size:.92rem;line-height:1.6;}
.blog-toc a{color:var(--n-600);font-weight:600;}
.blog-toc a:hover{color:var(--brand-500);}
.blog-sources{background:var(--n-50);border:1px solid var(--n-200);border-radius:16px;padding:20px 24px;margin:36px 0;}
.blog-sources__t{font-size:.95rem;font-weight:800;color:var(--n-900);margin-bottom:10px;}
.blog-sources ul{margin:0;display:grid;gap:6px;}
.blog-sources li{font-size:.88rem;}
.blog-cta{background:linear-gradient(135deg,var(--brand-50),#fff);border:1px solid var(--brand-100);border-radius:20px;padding:32px 30px;text-align:center;margin:40px 0;}
.blog-cta__t{font-size:1.35rem;font-weight:900;color:var(--n-900);margin-bottom:8px;}
.blog-cta p{font-size:.95rem;color:var(--n-500);margin-bottom:18px;}
.blog-authorbox{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--n-200);border-radius:18px;padding:24px;margin:36px 0 0;}
.blog-authorbox__name{font-size:1.05rem;font-weight:800;color:var(--n-900);}
.blog-authorbox__name a{color:inherit;}
.blog-authorbox__name a:hover{color:var(--brand-500);}
.blog-authorbox__title{font-size:.84rem;color:var(--brand-600);font-weight:600;margin:2px 0 8px;}
.blog-authorbox__bio{font-size:.9rem;color:var(--n-500);line-height:1.75;margin-bottom:8px;}
.blog-authorbox__soc{font-size:.84rem;}
.blog-authorbox__soc a{color:var(--brand-500);font-weight:700;}
@media(max-width:520px){.blog-authorbox{flex-direction:column;}}
.blog-author-hero{display:flex;gap:24px;align-items:center;text-align:start;max-width:720px;margin:0 auto;}
@media(max-width:640px){.blog-author-hero{flex-direction:column;text-align:center;}}
.blog-related{max-width:1152px;margin:56px auto 100px;}
.prose h4{font-size:1.02rem;font-weight:700;color:var(--n-800);margin:20px 0 8px;}
.blog-tablewrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--n-200);border-radius:14px;}
.blog-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px;}
.blog-table th{background:var(--brand-50);color:var(--n-900);font-weight:800;padding:12px 16px;text-align:start;border-bottom:1px solid var(--n-200);}
.blog-table td{padding:12px 16px;color:var(--n-600);line-height:1.75;border-bottom:1px solid var(--n-100);vertical-align:top;}
.blog-table tr:last-child td{border-bottom:none;}
/* ── تخطيط المدونة بقائمة جانبية ── */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start;}
@media(max-width:1024px){.blog-layout{grid-template-columns:1fr;}}
.blog-main{min-width:0;}
.blog-layout .blog-grid{grid-template-columns:repeat(2,1fr);}
@media(max-width:640px){.blog-layout .blog-grid{grid-template-columns:1fr;}}
.blog-grid--related{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.blog-grid--related{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:640px){.blog-grid--related{grid-template-columns:1fr!important;}}
.prose--inlayout{max-width:none;margin:0;padding:0;}
/* القائمة الجانبية */
.blog-side{position:sticky;top:96px;display:grid;gap:20px;}
@media(max-width:1024px){.blog-side{position:static;}}
.side-box{background:#fff;border:1px solid var(--n-200);border-radius:16px;padding:20px 20px 18px;}
.side-title{font-size:.95rem;font-weight:800;color:var(--n-900);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--n-100);}
.side-cats{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.side-cats a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;font-size:.9rem;font-weight:600;color:var(--n-600);transition:all .2s var(--ease-out);}
.side-cats a:hover{background:var(--brand-50);color:var(--brand-600);}
.side-cats a.active{background:var(--brand-50);color:var(--brand-600);}
.side-count{font-size:.75rem;font-weight:700;color:var(--brand-500);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;padding:1px 9px;}
.side-cats a.active .side-count,.side-cats a:hover .side-count{background:#fff;}
.side-posts{display:grid;gap:12px;}
.side-post{display:flex;gap:12px;align-items:flex-start;}
.side-post img{width:72px;height:54px;object-fit:cover;border-radius:10px;border:1px solid var(--n-200);background:var(--brand-50);flex-shrink:0;}
.side-post__t{display:block;font-size:.84rem;font-weight:700;color:var(--n-800);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s;}
.side-post:hover .side-post__t{color:var(--brand-500);}
.side-post time{font-size:.72rem;color:var(--n-400);}
.side-cta{background:linear-gradient(150deg,var(--brand-50),#fff);border-color:var(--brand-100);text-align:center;}
.side-cta__t{font-size:1.02rem;font-weight:900;color:var(--n-900);margin-bottom:6px;}
.side-cta p{font-size:.84rem;color:var(--n-500);line-height:1.7;margin-bottom:14px;}
/* بطاقة بروفايل الكاتب */
.author-hero{position:relative;overflow:hidden;padding:130px 0 0;background:linear-gradient(160deg,#fff 40%,#F0EFFF 100%);}
.author-card{position:relative;z-index:1;max-width:640px;margin:18px auto -56px;background:#fff;border:1px solid var(--n-200);border-radius:24px;padding:38px 34px 30px;text-align:center;box-shadow:0 24px 60px rgba(93,88,250,.10);}
.author-card__avawrap img{width:128px;height:128px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 0 0 3px var(--brand-100),0 12px 30px rgba(93,88,250,.18);margin-top:-100px;background:var(--brand-50);}
.author-card__name{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:900;color:var(--n-900);margin:16px 0 8px;}
.author-card__chip{display:inline-flex;font-size:.82rem;font-weight:700;color:var(--brand-600);background:var(--brand-50);border:1px solid var(--brand-100);padding:6px 16px;border-radius:999px;margin-bottom:14px;}
.author-card__bio{font-size:.95rem;color:var(--n-500);line-height:1.85;max-width:52ch;margin:0 auto 18px;}
.author-card__stats{display:flex;justify-content:center;gap:26px;margin-bottom:18px;}
.author-card__stat{font-size:.85rem;color:var(--n-500);}
.author-card__stat strong{color:var(--brand-500);font-size:1.15rem;font-weight:900;margin-inline-end:4px;}
.author-card__soc{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.author-card__socbtn{font-size:.84rem;font-weight:700;color:var(--n-700);background:var(--n-50);border:1px solid var(--n-200);padding:7px 18px;border-radius:12px;transition:all .2s var(--ease-out);}
.author-card__socbtn:hover{background:var(--brand-500);color:#fff;border-color:var(--brand-500);}
.author-hero + section{padding-top:110px!important;}
/* ── تحسينات المدونة (ملاحظات أيمن 2026-07-02) ── */
/* 1) رأس المقال: كل العناصر في المنتصف بتناسق */
.legal-hero .blog-crumbs{justify-content:center;}
.legal-hero .blog-meta{justify-content:center;}
/* 2) القائمة الجانبية مثبتة فعليًا أثناء التمرير (سكرول داخلي لو طالت) */
/* القائمة الجانبية: تتحرك مع السكرول حتى يظهر آخرها ثم تثبت
   (top يُضبط ديناميكيًا في components.js عندما تكون أطول من الشاشة) */
.blog-side{position:sticky;top:88px;}
@media(max-width:1024px){.blog-side{position:static;max-height:none;overflow:visible;}}
/* 3) زر CTA داخل المقال كان يرث لون روابط .prose الأزرق → أبيض واضح */
.prose a.btn-primary,.prose a.btn-primary:hover{color:#fff;}
/* 4) بطاقة الكاتب — عرض أفقي أنيق بدل التراكب */
.author-hero{padding:118px 0 56px;}
.author-card{display:flex;gap:30px;align-items:center;text-align:start;max-width:780px;margin:22px auto 0;padding:32px 36px;}
.author-card__avawrap{flex-shrink:0;}
.author-card__avawrap img{margin-top:0;width:126px;height:126px;}
.author-card__info{min-width:0;flex:1;}
.author-card__name{margin:0 0 8px;font-size:clamp(1.35rem,2.6vw,1.7rem);}
.author-card__bio{margin:0 0 14px;max-width:none;}
.author-card__stats{justify-content:flex-start;gap:22px;margin-bottom:14px;}
.author-card__soc{justify-content:flex-start;}
@media(max-width:640px){
  .author-card{flex-direction:column;text-align:center;gap:16px;padding:28px 22px;}
  .author-card__stats,.author-card__soc{justify-content:center;}
}
.author-hero + section{padding-top:56px!important;}
.blog-hero .legal-title{text-align:center;}
/* بانر تنبيه لغة المدونة (لغير الناطقين بالعربية) — شريط علوي بعرض كامل */
.blog-langnotice{position:fixed;top:0;left:0;right:0;z-index:1002;background:linear-gradient(90deg,var(--brand-600),var(--brand-500));color:#fff;box-shadow:0 2px 14px rgba(93,88,250,.28);}
.blog-langnotice__in{max-width:1152px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px 16px;flex-wrap:wrap;padding:11px 46px 11px 18px;position:relative;font-family:var(--font-en);font-size:.9rem;line-height:1.5;text-align:center;}
.blog-langnotice__in > span{opacity:.96;}
.blog-langnotice a{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.blog-langnotice a:hover{opacity:.85;}
.blog-langnotice__x{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:rgba(255,255,255,.18);border:0;color:#fff;width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.blog-langnotice__x:hover{background:rgba(255,255,255,.34);}
.has-blognotice #navbar{top:var(--notice-h,46px);}
.has-blognotice #main{padding-top:var(--notice-h,46px);}
@media(max-width:600px){.blog-langnotice__in{padding:10px 42px 10px 14px;font-size:.83rem;}}
/* أكورديون «الدول» في قائمة الموبايل — مطوي افتراضيًا */
.mob-acc__btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;border-bottom:1px solid var(--n-100);cursor:pointer;font-family:inherit;text-align:start;font-size:1.2rem;font-weight:700;color:var(--n-800);padding:13px 0;transition:color .2s;}
.mob-acc__btn svg{transition:transform .3s var(--ease-out);flex-shrink:0;color:var(--n-400);}
.mob-acc__btn.open{color:var(--brand-500);}
.mob-acc__btn.open svg{transform:rotate(180deg);}
.mob-acc{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);flex-shrink:0;display:flex;flex-direction:column;}
.mob-acc.open{max-height:640px;}
.mob-acc a.mob-sub{display:block;width:100%;font-size:1.08rem;color:var(--n-600);border-bottom:1px solid var(--n-100);}
.mob-acc a.mob-sub:last-child{border-bottom:0;}

/* ── شرائح الشعارات العائمة فوق صور الأقسام (دفع/شحن/تحليلات) ──
   حركة transform فقط (مركّبة على الـ GPU — لا تمس التخطيط ولا CLS) */
.media-visual{position:relative;}
.float-chip{position:absolute;width:14.1%;aspect-ratio:150/96;background:#fff;border:1px solid var(--n-200);border-radius:14px;box-shadow:0 8px 22px rgba(15,15,26,.14);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;animation:chipFloat 5.5s ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform;}
.float-chip img{max-width:74%;max-height:62%;width:auto;height:auto;object-fit:contain;}
.float-chip--lg{width:16%;aspect-ratio:170/100;}
@keyframes chipFloat{0%,100%{transform:rotate(var(--r,0deg)) translateY(0);}50%{transform:rotate(var(--r,0deg)) translateY(-9px);}}
@media(max-width:768px){.float-chip{width:16.9%;border-radius:10px;box-shadow:0 5px 14px rgba(15,15,26,.14);}.float-chip--lg{width:18.9%;}}
@media (prefers-reduced-motion: reduce){.float-chip{animation:none;}}