/* ===========================
   bio.ly – Minimal Landing CSS
   Version: 1.6.0 (Hero v3 + Split Blocks + Themes Showcase + Press)
   =========================== */

/* ---------- Variables ---------- */
:root{
  --bg: #0b0e13;
  --surface: #121722;
  --elev: #171c29;
  --text: #e6ebf5;
  --text-dim: #b9c2d3;
  --muted: #1d2433;
  --border: #253046;

  --primary: #1a73e8;   /* bio.blue */
  --accent:  #00bfa5;   /* aqua */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  --card-bg: #111623;
  --card-hover: #0f1420;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --shadow-1: 0 6px 18px rgba(0,0,0,.18);
  --shadow-2: 0 10px 30px rgba(0,0,0,.25);

  --gap: 16px;
  --container: 1120px;

  --font-en: Inter, "SF Pro Text", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Tajawal", system-ui, sans-serif;
  --font: var(--font-en), var(--font-ar);
}

/* Auto light (الأساس داكن) */
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --surface:#f8fafc;
    --elev:#f3f6fb;
    --text:#0f172a;
    --text-dim:#475569;
    --muted:#eef2f7;
    --border:#e2e8f0;
    --card-bg:#ffffff;
    --card-hover:#f8fafc;
    --shadow-1: 0 8px 18px rgba(2, 6, 23, .08);
    --shadow-2: 0 16px 36px rgba(2, 6, 23, .12);
  }
}

/* ---------- Reset-ish ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* ---------- Layout ---------- */
.container{
  width:min(100%, var(--container));
  margin-inline:auto;
  /* padding: 0 18px;   اذا لاحظنا مشكلة في المحاذة قد تكون بشبب هذا */

}
.section-pad{padding:48px 18px !important;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}
.text-center{text-align:center}
.mt-2{margin-top:14px}
.mt-3{margin-top:22px}

/* ---------- Buttons ---------- */
.btn, .btn-primary, .btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-outline{
  background:transparent;color:var(--text);
  border-color:var(--border);
}
.btn-outline:hover{background:var(--muted)}
.btn-secondary{
  background:var(--muted);color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover{filter:brightness(1.05)}

/* =========================================================
   HERO v3 (النسخة الاحترافية المستخدمة)
   ========================================================= */
.hero.hero-v3{
  position:relative; overflow:hidden;
  padding: 128px 0 56px;
  background:
    radial-gradient(1200px 520px at 10% -20%, rgba(26,115,232,.14), transparent 60%),
    radial-gradient(1100px 560px at 100% 0%, rgba(0,191,165,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.hero-shell{ display:grid; gap:28px; padding:48px 18px !important; }
.hero-head{ display:grid; gap:14px; justify-items:center }
.h-title{
  text-align:center;
  font-size: clamp(32px, 5.8vw, 54px);
  line-height:1.08; font-weight:900; letter-spacing:.2px;
  max-width: 850px;
}
.h-sub{
  text-align:center; max-width: 820px;
  margin: 0 auto; color:var(--text-dim);
  font-size: clamp(14px, 2.2vw, 18px);
}

/* Claim v3 */
.claim-box{
  display:flex; gap:10px; justify-content:center; align-items:center;
  width:min(820px, 100%); margin: 6px auto 0;
  background: var(--surface);
  padding: 10px; border-radius: 999px; border:1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.claim-box .claim-field{
  position:relative; flex:1 1 auto; min-width:0;
  background: var(--surface); border:1px solid var(--border);
  border-radius:999px; display:flex; align-items:center; padding:0;
}
.claim-box .claim-prefix{
  font-weight:800; color:var(--text-dim);
  padding-inline:14px; opacity:.9;
}
.claim-box input{
  width:100%; background:transparent; color:var(--text);
  border:0; outline:none; padding: 12px 5px; font-weight:700;
}
.claim-box #reserveBtn{
  border-radius:999px; min-width:fit-content; padding:12px 18px; font-weight:800;
}
:root[dir="rtl"] .claim-box{ direction:rtl }

/* سطر الثقة */
.trust-row{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top:8px; flex-wrap:wrap;
}
.trust-pill{
  padding:6px 12px; border-radius:999px; font-size:.86rem; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text);
  backdrop-filter:saturate(140%) blur(4px);
}
.trust-dot{ width:6px; height:6px; border-radius:50%; background:var(--text-dim); opacity:.5 }

/* المسرح */
.hero-stage{
  position:relative; height: clamp(440px, 50vw, 560px); margin-top:10px;
}
.phone{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: clamp(270px, 28vw, 360px); aspect-ratio: 9 / 19.5;
  border-radius:28px; background:var(--card-bg);
  border:1px solid var(--border); box-shadow:var(--shadow-2);
  overflow:hidden; isolation:isolate;
}
.phone-screen{ width:100%; height:100%; object-fit:contain }
.pedestal{
  position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
  width: 140%; height: 90px; border-radius: 50%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.38), transparent 70%);
  filter: blur(12px); z-index:-1;
}

/* بطاقات زجاجية */
.gcard{
  position:absolute; display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border); color:var(--text);
  backdrop-filter: saturate(140%) blur(4px);
  box-shadow: var(--shadow-2); font-size: 13px; white-space:nowrap;
  animation: gfloat 8s ease-in-out infinite;
}
.gcard b{ font-size:16px; font-weight:900 }
@keyframes gfloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

/* مواضع البطاقات (LTR) */
.g-1{ left: 11%; top: 50%;  animation-delay:.1s }
.g-2{ right: 13%; top: 28%; animation-delay:.5s }
.g-3{ right: 15%; bottom: 18%; animation-delay:.9s }
.g-4{ left: 14%; bottom: 14%; animation-delay:1.3s }

/* RTL انعكاس */
:root[dir="rtl"] .g-1{ left:auto; right:6% }
:root[dir="rtl"] .g-2{ right:auto; left:6% }
:root[dir="rtl"] .g-3{ right:auto; left:8% }
:root[dir="rtl"] .g-4{ left:auto; right:8% }

/* استجابة */
@media (max-width: 980px){
  .hero.hero-v3{ padding: 112px 0 48px }
  .hero-stage{ height: 500px }
  .g-2{ top: 16% }
}
@media (max-width: 640px){
  .hero-stage{ height: 440px }
  .gcard{ font-size:12px }
  .g-1{ left: 4%; top: 58% }
  .g-2{ right: 4%; top: 12% }
  .g-3{ right: 6%; bottom: 10% }
  .g-4{ display:none } /* تبسيط للموبايل */
}

/* ---------- Section titles ---------- */
.cta-section-header{margin:40px auto 22px;text-align:center}
.cta-main-title{
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  margin:0 0 6px;
}
.cta-main-desc{color:var(--text-dim);font-size:15px}

/* =======================================================
   How-Works Split (نص يسار + معاينة يمين – النمط المعتمد)
   ======================================================= */
.how-works-split{
  display:grid;gap:28px;align-items:center;
  grid-template-columns: 1fr;
}

/* توحيد تصميم البادج عبر كل الأقسام */
.hws-badge{
  display:inline-block;
  padding:8px 14px;border-radius:999px;
  font-weight:700;font-size:.92rem;
  background:linear-gradient(135deg, rgba(26,115,232,.16), rgba(0,191,165,.16));
  border:1px solid var(--border);
  color:var(--text);
  backdrop-filter:saturate(140%) blur(3px);
  margin-bottom:8px;
}
.mts-title, .ae-title, .cmp-title{
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900; letter-spacing:.2px; margin:10px 0 10px;
  line-height: 100%;
}
.hws-copy .how-works-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900; letter-spacing:.2px; margin:10px 0 10px;
  line-height: 100%;
}
.hws-copy .how-works-desc{max-width:56ch;font-size:clamp(14px,2vw,18px)}

.hws-points{
  margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; max-width:56ch;
}
.hws-points li{
  position:relative; padding-inline-start:26px; color:var(--text);
}
.hws-points li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:2px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:.8rem; font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
}

.hws-media{display:grid;place-items:center}
.hws-bg{
  position:relative; width:min(720px,100%); aspect-ratio: 16 / 9;
  border-radius:28px;
  background:linear-gradient(135deg, #6db3ff 0%, #f3b7ff 100%);
  box-shadow: var(--shadow-2);
  overflow:hidden;
}
.hws-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.0));
}
.phone-sim{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(420px, 66%);
}

.how-works-section .how-works-cta{ text-align:start; margin-top:18px }
@media (max-width: 980px){
  .how-works-section .how-works-cta{ text-align:center }
}
@media (min-width: 980px){
  .how-works-split{ grid-template-columns: 1fr 1fr }
  :root[dir="rtl"] .how-works-split{ grid-template-columns: 1fr 1fr }
}
:root[dir="rtl"] .hws-points li{padding-inline-start:0; padding-inline-end:26px}
:root[dir="rtl"] .hws-points li::before{inset-inline-start:auto; inset-inline-end:0}

/* جهاز + توهج + لوحة صغيرة (تُستخدم في Blocks/Analytics) */
.device-img{
  width:100%;height:auto;border-radius:18px;border:1px solid var(--border);
  box-shadow: var(--shadow-2);
  animation: floaty 6s ease-in-out infinite;
  transform: translateZ(0);
}
.device-glow{
  position:absolute;inset:auto -10% -10% -10%;
  height:60%;filter:blur(40px);opacity:.7;border-radius:30px;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(26,115,232,.25), transparent 60%),
    radial-gradient(70% 90% at 20% 80%, rgba(0,191,165,.22), transparent 60%);
  z-index:-1;
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}

.micro-panel{
  position:absolute;left:12px;top:12px;
  background:var(--elev);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-2);
  padding:10px 12px;min-width:92px;backdrop-filter:saturate(140%) blur(4px);
  animation: panel-pop 8s ease-in-out infinite 1.2s;
}
@keyframes panel-pop{
  0%,100%{ transform:translateY(0); opacity:.96 }
  50%{ transform:translateY(4px); opacity:.9 }
}
.mp-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim)}
.mp-row b{font-weight:800;color:var(--text)}

/* =======================================================
   Themes Showcase (split) — نص يمين + فيديو يسار
   ======================================================= */
.themes-showcase .cta-section-header{ text-align:start; margin:0 0 10px }
@media (max-width: 980px){
  .themes-showcase .cta-section-header{ text-align:center }
}

.ts-grid{
  display:grid; align-items:center; gap:28px;
  grid-template-columns: 1fr; /* موبايل */
}
@media (min-width: 980px){
  .ts-grid{ grid-template-columns: 1.1fr 1fr } /* يسار أوسع قليلًا للفيديو */
  .ts-media{ order:1 } /* يسار */
  .ts-copy{ order:2 }  /* يمين */
  :root[dir="rtl"] .ts-media{ order:1 } /* نضمن بقاء الفيديو يسارًا في RTL */
  :root[dir="rtl"] .ts-copy{ order:2 }
}

.ts-copy .ts-points{
  margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px; max-width:56ch;
}
.ts-copy .ts-points li{
  position:relative; padding-inline-start:26px; color:var(--text);
}
.ts-copy .ts-points li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:2px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; font-size:.8rem; font-weight:900;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
}
:root[dir="rtl"] .ts-copy .ts-points li{ padding-inline-start:0; padding-inline-end:26px }
:root[dir="rtl"] .ts-copy .ts-points li::before{ inset-inline-start:auto; inset-inline-end:0 }

.ts-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
@media (max-width: 980px){
  .ts-ctas{ justify-content:center }
}

/* إطار الفيديو */
.ts-media{ position:relative }
.themes-frame{
  position:relative;
  background: radial-gradient(60% 80% at 50% 20%, rgba(26,115,232,.10), transparent 60%),
              radial-gradient(60% 80% at 20% 80%, rgba(0,191,165,.10), transparent 60%),
              var(--card-bg);
  border:1px solid var(--border);
  border-radius:24px;
  padding: clamp(10px, 1.5vw, 14px);
  box-shadow: var(--shadow-2);
  overflow:hidden;
  isolation:isolate;
}
.themes-glow{
  position:absolute; inset:auto -15% -20% -15%;
  height:70%; filter:blur(46px); opacity:.66; border-radius:30px;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(26,115,232,.22), transparent 60%),
    radial-gradient(70% 90% at 20% 80%, rgba(0,191,165,.20), transparent 60%);
  z-index:-1;
}

/* فيديو شفاف بدون خلفية */
.themes-reel{
  width:100%; height:auto; display:block;
  border-radius:16px; background:transparent;
  object-fit:contain; /* يحافظ على الشفافية والهوامش */
}

/* Chips تطفو بخفة */
.themes-badges{
  position:absolute; inset:12px auto auto 12px;
  display:flex; gap:8px; flex-wrap:wrap; max-width:70%;
}
:root[dir="rtl"] .themes-badges{ inset:12px 12px auto auto }
.themes-badges .badge{
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text);
  backdrop-filter: saturate(140%) blur(4px);
  animation: chip-bob 6s ease-in-out infinite;
}
.themes-badges .badge:nth-child(2){ animation-delay:.4s }
.themes-badges .badge:nth-child(3){ animation-delay:.8s }
.themes-badges .badge:nth-child(4){ animation-delay:1.2s }
@keyframes chip-bob{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(3px) }
}

@media (max-width: 980px){
  .themes-frame{ border-radius:20px }
  .themes-badges{ max-width:90% }
}


/* =========================================================
   Global (from <head> "Spinner + تحسين زر الحجز")
   ========================================================= */
.btn-loading{pointer-events:none;opacity:.85}
.btn-spinner{display:none;width:16px;height:16px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;margin-inline-start:6px;animation:spin .6s linear infinite}
.btn-loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* تحسين بطاقات المعرض */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.gallery-card{border:1px solid var(--border-color,#e5e7eb);border-radius:14px;overflow:hidden;background:var(--card-bg,#fff)}
.gallery-card img{width:100%;height:160px;object-fit:cover;display:block}
.gallery-card .meta{padding:10px 12px;font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
.pill{font-size:.8rem;padding:4px 8px;border-radius:999px;background:var(--muted-bg,#f3f4f6)}

/* رسائل الحالة */
#reserve-status{margin-top:8px}
#reserve-status.ok{color:var(--success,#10b981)}
#reserve-status.err{color:var(--danger,#ef4444)}
#reserve-status.info{color:var(--muted,#6b7280)}

/* زر التحقق عند النجاح + شريط تقدم أنيق */
#reserveBtn{position:relative;overflow:hidden}
#reserveBtn.success{background:var(--success,#10b981);border-color:var(--success,#10b981);color:#fff}
#reserveBtn .btn-progress{position:absolute;left:0;bottom:0;height:3px;width:0%;background:rgba(255,255,255,.9);transition:width .25s linear;pointer-events:none}

/* =========================================================
   Shared utilities (merged duplicates)
   ========================================================= */
.lift-2{z-index:3}.lift-1{z-index:2}.lift-0{z-index:1}
@keyframes floaty{
  0%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-6px) rotate(var(--rot,0deg))}
  100%{transform:translateY(0) rotate(var(--rot,0deg))}
}

/* =========================================================
   More-than section (scoped to .more-than / .mts-*)
   ========================================================= */
.more-than{
  position:relative;
  background:
    radial-gradient(900px 400px at 15% -10%, rgba(26,115,232,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(0,191,165,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  overflow:hidden;
}
.mts-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(12,1fr);align-items:center}
.mts-left{grid-column:span 12}
.mts-right{grid-column:span 12;position:relative;min-height:420px}
@media (min-width:960px){
  .mts-left{grid-column:span 5}
  .mts-right{grid-column:span 7;min-height:520px}
}
.mts-desc{color:var(--text-dim);font-size:clamp(14px,2.4vw,18px);max-width:48ch;margin:0 0 14px}
.mts-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:6px 0 16px;list-style:none}
.mts-chips li{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--muted);color:var(--text);font-size:.88rem}
.mts-ctas{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 10px}
.mts-badge{color:var(--text-dim);font-size:.9rem;margin-top:6px}

/* Collage cards */
.mts-right .mtcard{position:absolute;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);transition:transform .25s ease,box-shadow .25s ease,background .25s ease;will-change:transform;overflow:hidden}
.mts-right .mtcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);background:var(--card-hover)}

/* Portfolio */
.mtcard-portfolio{width:56%;left:22%;top:10%;transform:rotate(-2deg);animation:floaty 9s ease-in-out infinite}
.mtcard-portfolio .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(26,115,232,.22),rgba(0,191,165,.18)),linear-gradient(0deg,var(--muted),var(--muted))}
.mtcard-portfolio .meta{padding:12px 14px}
.mtcard-title{margin:0 0 4px;font-size:1.02rem;font-weight:800}
.mtcard-sub{margin:0 0 8px;color:var(--text-dim);font-size:.92rem}
.tags{display:flex;gap:6px}

/* Micro-post */
.mtcard-post{width:42%;left:4%;top:48%;transform:rotate(2.5deg);padding:12px;animation:floaty 8.2s ease-in-out infinite .6s}
.post-head{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,var(--accent),var(--primary))}
.avatar.tiny{width:26px;height:26px}
.who strong{display:block;font-size:.94rem}
.who small{color:var(--text-dim)}
.post-text{margin:10px 0 8px;font-size:.95rem}
.post-actions{display:flex;gap:12px;color:var(--text-dim);font-size:.88rem}

/* Testimonial */
.mtcard-quote{width:40%;right:2%;top:4%;transform:rotate(3deg);padding:14px;animation:floaty 7.8s ease-in-out infinite 1.1s}
.mtcard-quote blockquote{margin:0 0 10px;font-size:.98rem;line-height:1.5}
.mtcard-quote figcaption{display:flex;align-items:center;gap:8px;color:var(--text-dim)}

/* Interests cluster */
.mtcard-interests{display:flex;gap:8px;flex-wrap:wrap;padding:10px;bottom:6%;left:10%;transform:rotate(-1.5deg);animation:floaty 9.4s ease-in-out infinite .2s}
.mtcard-interests .chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:.88rem}
.mtcard-interests .chip.add{background:var(--muted)}

/* Analytics pill */
.mt-analytics{position:absolute;right:10%;bottom:12%;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--text);box-shadow:var(--shadow-1);transform:rotate(-1deg);animation:floaty 8.8s ease-in-out infinite .9s}
.mt-analytics .kpi{font-weight:700;font-size:.9rem}
.mt-analytics .kpi.k2{color:var(--text-dim);font-weight:600}
.mt-analytics .spark{width:80px;height:24px;color:var(--accent)}

@media (max-width:960px){
  .mts-right{min-height:540px}
  .mtcard-portfolio{width:70%;left:15%;top:8%}
  .mtcard-post{width:56%;left:6%;top:56%}
  .mtcard-quote{width:54%;right:4%;top:6%}
  .mtcard-interests{left:8%;bottom:8%}
  .mt-analytics{right:8%;bottom:16%}
}
@media (max-width:600px){
  .mts-title{text-align:center}
  .mts-desc{text-align:center;margin-inline:auto}
  .mts-ctas{justify-content:center}
  .mts-badge{text-align:center}
  .mts-right{min-height:520px}
  .mtcard-portfolio{width:86%;left:7%;top:6%}
  .mtcard-post{width:74%;left:6%;top:58%}
  .mtcard-quote{width:76%;right:6%;top:6%}
  .mtcard-interests{left:6%;bottom:10%}
  .mt-analytics{right:6%;bottom:16%}
}
/* RTL awareness */
:root[dir="rtl"] .mts-chips{direction:rtl}
:root[dir="rtl"] .mts-right .mtcard-quote{right:auto;left:2%;transform:rotate(-3deg)}
:root[dir="rtl"] .mt-analytics{right:auto;left:10%;transform:rotate(1deg)}

/* =========================================================
   Action Engine section (scoped to .action-engine / .ae-*)
   ========================================================= */
.action-engine{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.ae-grid{display:grid;align-items:center;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.action-engine.ae-flip .ae-grid{gap:clamp(24px,4vw,56px)}
.ae-left{grid-column:span 12}
.ae-right{grid-column:span 12;position:relative;min-height:520px}
@media (min-width:980px){
  .ae-right{grid-column:1 / span 7;min-height:560px;padding-inline-end:clamp(16px,3vw,40px);isolation:isolate}
  .ae-left{grid-column:8 / -1;padding-inline-start:clamp(16px,3vw,40px)}
}
.ae-desc{color:var(--text-dim);max-width:50ch;font-size:clamp(14px,2.2vw,18px);margin:0 0 14px}
.ae-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 16px;list-style:none}
.ae-chips li{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--muted);color:var(--text);font-size:.88rem}
.ae-ctas{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 12px}
.ae-note{color:var(--text-dim);font-size:.9rem}

/* Cards */
.ae-right .aecard{position:absolute;width:46%;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);transition:transform .25s ease,box-shadow .25s ease,background .25s ease;will-change:transform}
.ae-right .aecard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);background:var(--card-hover)}
@media (min-width:980px){
  .ae-right .aecard{width:44%}
  .aecard-email{left:8%;top:6%;transform:rotate(-2deg)}
  .aecard-cta{right:8%;top:28%;transform:rotate(2deg)}
  .aecard-book{left:14%;bottom:9%;transform:rotate(-1.5deg)}
}
.aecard .head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.aecard .icon{width:40px;height:40px;border-radius:12px;background:var(--muted)}
.aecard .icon.mail{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-mask:radial-gradient(circle at 30% 30%,#000 55%,transparent 56%);mask:radial-gradient(circle at 30% 30%,#000 55%,transparent 56%)}
.aecard .icon.bolt{background:linear-gradient(135deg,var(--accent),var(--primary))}
.aecard .icon.calendar{background:linear-gradient(135deg,var(--primary),var(--accent))}

/* Email capture */
.aecard-email .subscribe{display:flex;gap:10px;padding:12px 14px}
.aecard-email input[type="email"]{flex:1;min-width:0;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none}
.aecard-email input[type="email"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,115,232,.15)}
.aecard-email .foot{padding:0 14px 12px;color:var(--text-dim);font-size:.86rem}

/* Smart CTA */
.aecard-cta .cta-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px 4px}
.aecard-cta .mini-points{list-style:none;margin:0;padding:0 14px 14px;color:var(--text-dim);font-size:.9rem;display:grid;gap:6px}
.aecard-cta .mini-points li::before{content:"• ";color:var(--accent);font-weight:900}

/* Booking */
.aecard-book .slot-grid{display:grid;gap:8px;grid-template-columns:repeat(4,1fr);padding:12px 14px 6px}
.aecard-book .slot{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;transition:.2s ease;font-weight:600}
.aecard-book .slot:hover{filter:brightness(1.05)}
.aecard-book .book-cta{padding:8px 14px 14px}

/* Result ribbon */
.ae-ribbon{position:absolute;right:10%;bottom:8%;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 12px;color:var(--text);box-shadow:var(--shadow-1);transform:rotate(-1deg)}
.ae-ribbon .kpi{font-weight:800}
.ae-ribbon .kpi.dim{color:var(--text-dim);font-weight:600}
.ae-ribbon .spark{width:120px;height:28px;color:var(--accent)}

/* Animations on AE */
.aecard-email{animation:floaty 9s ease-in-out infinite}
.aecard-cta{animation:floaty 8s ease-in-out infinite .5s}
.aecard-book{animation:floaty 9.6s ease-in-out infinite .2s}
.ae-ribbon{animation:floaty 8.6s ease-in-out infinite .8s}

@media (max-width:980px){
  .ae-right{min-height:640px}
  .aecard{width:60% !important}
  .aecard-email{left:8%;top:6%}
  .aecard-cta{right:6%;top:34%}
  .aecard-book{left:10%;bottom:10%}
  .ae-ribbon{right:8%;bottom:8%}
}
@media (max-width:620px){
  .ae-title,.ae-desc,.ae-ctas,.ae-note{text-align:center}
  .ae-ctas{justify-content:center}
  .ae-right{min-height:620px}
  .aecard{width:86% !important}
  .aecard-email{left:7%;top:6%}
  .aecard-cta{right:7%;top:40%}
  .aecard-book{left:7%;bottom:12%}
  .ae-ribbon{right:7%;bottom:10%}
  .action-engine.ae-flip .ae-grid{row-gap:28px}
}
/* RTL */
:root[dir="rtl"] .ae-chips{direction:rtl}
:root[dir="rtl"] .ae-left{text-align:right}
:root[dir="rtl"] .aecard-cta{right:auto;left:6%}
:root[dir="rtl"] .ae-ribbon{right:auto;left:7%;transform:rotate(1deg)}

/* =========================================================
   Compare-slim section (scoped to .compare-slim / .cmp-*)
   ========================================================= */
.compare-slim{
  background:
    radial-gradient(880px 380px at 12% -12%, rgba(26,115,232,.14), transparent 60%),
    radial-gradient(900px 420px at 100% 10%, rgba(0,191,165,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.cmp-toggle{display:none}

/* Grid layout & spacing */
.cmp-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3vw,36px);row-gap:clamp(16px,2.4vw,28px);align-items:start}
.cmp-head{grid-column:span 12}
.cmp-panels{grid-column:span 12}
.cmp-visual{grid-column:span 12}
@media (min-width:1020px){
  .cmp-head{grid-column:1 / span 6}
  .cmp-panels{grid-column:1 / span 6}
  .cmp-visual{grid-column:8 / -1;grid-row:1 / span 2;position:sticky;top:84px;align-self:start}
}

/* Typo & spacing */
.kicker{color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin:0 0 8px}
.cmp-title{line-height:1.15;margin:0 0 10px}
.cmp-desc{color:var(--text-dim);max-width:60ch;margin:0 0 18px;font-size:clamp(14px,2.2vw,18px)}

/* Tabs */
.cmp-tabs{display:inline-flex;gap:10px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;margin-top:10px;margin-bottom:6px}
.cmp-tab{cursor:pointer;padding:10px 16px;border-radius:999px;color:var(--text-dim);border:1px solid transparent;transition:.2s ease;user-select:none;line-height:1}
#cmpLink:checked ~ .container .cmp-tabs label[for="cmpLink"],
#cmpBio:checked  ~ .container .cmp-tabs label[for="cmpBio"]{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:transparent;box-shadow:var(--shadow-1)}
#cmpLink:not(:checked) ~ .container .cmp-tabs label[for="cmpLink"]:hover,
#cmpBio:not(:checked)  ~ .container .cmp-tabs label[for="cmpBio"]:hover{background:var(--muted);color:var(--text);border-color:var(--border)}

/* Panels toggle */
.cmp-panel{display:none}
#cmpLink:checked ~ .container .cmp-panels #panelLink{display:block}
#cmpBio:checked  ~ .container .cmp-panels #panelBio{display:block}

/* Panels spacing */
.cmp-panels{margin-top:6px}
.list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}
.list .bullet{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--muted);color:var(--text-dim);font-weight:800;font-size:.9rem;margin-top:2px}
.list.good .check{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:900;font-size:.86rem;margin-top:2px}
.cmp-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* Visual frames & device */
.cmp-visual{margin-top:6px}
.cmp-visual .frame{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);box-shadow:var(--shadow-1);padding:20px;place-items:start;min-height:420px;overflow:hidden}
.cmp-visual .frame.frame-link,
.cmp-visual .frame.frame-bio{display:none}
#cmpLink:checked ~ .container .cmp-visual .frame-link{display:grid}
#cmpBio:checked  ~ .container .cmp-visual .frame-bio{display:grid}
.device{width:100%;aspect-ratio:3/6;border-radius:28px;padding:10px;background:radial-gradient(120% 120% at 20% -10%, rgba(26,115,232,.10), transparent 60%),radial-gradient(120% 120% at 120% 10%, rgba(0,191,165,.08), transparent 60%),var(--bg);border:1px solid var(--border);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.bezel{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);display:grid;place-items:stretch}

/* Mocked links-only screen */
.screen.mock{width:100%;height:100%;background:#fff;color:#0f172a;display:grid;grid-template-rows:auto auto 1fr auto;padding:14px;gap:10px}
.mock-header .row{height:12px;background:#e5eaf0;border-radius:6px;margin-bottom:8px}
.rule{border:0;border-top:1px solid #e6eaf2;margin:4px 0 0}

.mock-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{height:22px;border-radius:999px;background:#f0f4f9;display:inline-block}
.mock-links{display:grid;gap:8px;margin-top:6px}
.link-row{height:46px;border-radius:12px;background:#f6f9fc;border:1px solid #e6edf6;box-shadow:0 1px 0 rgba(15,23,42,.04)}
.mock-footer{display:flex;gap:8px;margin-top:8px}
.tiny{height:10px;border-radius:999px;background:#eef3f9;display:inline-block}

/* Real profile image screen */
.screen-img{width:100%;height:100%;object-fit:cover;display:block;border:0;background:#fff}

/* Width helpers */
.w92{width:92%}.w90{width:90%}.w88{width:88%}.w86{width:86%}.w84{width:84%}
.w70{width:70%}.w50{width:50%}.w36{width:36%}.w28{width:28%}.w22{width:22%}.w24{width:24%}.w20{width:20%}

@media (max-width:680px){
  .cmp-tabs{width:100%;justify-content:center}
  .cmp-visual .frame{min-height:380px}
}

/* RTL */
:root[dir="rtl"] .cmp-head,
:root[dir="rtl"] .cmp-panels{text-align:right}
:root[dir="rtl"] .kicker{letter-spacing:.06em}



 /* =======================================================
       PRESS – As seen in (logo slider + quotes)
       مهيّأ ليعمل مباشرة، مع بدائل لقيم الـCSS variables
       ======================================================= */

    .press-section.section-pad { padding: 28px 0 }
    .press-section .container{ max-width:1100px; margin:0 auto; padding:0 16px }

    .press-head{ text-align:center; margin-bottom:12px }
    .press-badge{
      display:inline-block; padding:8px 14px; border-radius:999px;
      font-weight:800; font-size:.9rem;
      background:rgba(255,255,255,.06);
      border:1px solid var(--border, rgba(255,255,255,.12));
      color:var(--text, #e7e7ea);
      -webkit-backdrop-filter:saturate(140%) blur(4px);
      backdrop-filter:saturate(140%) blur(4px);
    }
    .press-title{ font-size: clamp(22px, 3.2vw, 32px); font-weight:900; margin:10px 0 6px; color:var(--text, #fff) }
    .press-desc{ color:var(--text-dim, #a8aab3); max-width:60ch; margin:0 auto }

    .press-slider{
      position:relative; overflow:hidden; margin-top:16px;
      border:1px solid var(--border, rgba(255,255,255,.12)); border-radius:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: var(--shadow-1, 0 4px 18px rgba(0,0,0,.25));
      isolation:isolate;
    }
    /* حواف متلاشية */
    .press-slider::before,
    .press-slider::after{
      content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
      background:linear-gradient(to right, var(--bg, #0b0d10), transparent);
    }
    .press-slider::after{ right:0; transform:rotate(180deg) }
    .press-slider::before{ left:0 }

    /* المسار: لا نثبّت min-width، ونحرك حسب متغيرات نحسبها بالـJS */
    .press-track{
      display:flex; align-items:center; gap:28px;
      padding:14px 22px;
      width:max-content;
      will-change: transform;
      animation: var(--press-anim, press-marquee-ltr) var(--press-dur, 30s) linear infinite;
    }
    .press-slider:hover .press-track{ animation-play-state: paused }

    /* الحركة بمقدار عرض المجموعة الحقيقي */
    @keyframes press-marquee-ltr{
      from{ transform: translateX(0) }
      to  { transform: translateX(calc(-1 * var(--press-group-w, 0px))) }
    }
    @keyframes press-marquee-rtl{
      from{ transform: translateX(calc(-1 * var(--press-group-w, 0px))) }
      to  { transform: translateX(0) }
    }

    .press-item{
      display:grid; place-items:center;
      height:54px; min-width:140px; padding:8px 14px;
      border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--border, rgba(255,255,255,.12));
      -webkit-backdrop-filter:saturate(140%) blur(3px);
      backdrop-filter:saturate(140%) blur(3px);
      transition:.2s ease;
    }
    .press-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2, 0 6px 24px rgba(0,0,0,.3)) }
    .press-item img{
      max-height:30px; max-width:140px;
      height:auto; width:auto; object-fit:contain;
      filter: grayscale(1) contrast(1.05) opacity(.85);
      transition:.2s ease;
      display:block;
    }
    .press-item:hover img{ filter: grayscale(0) opacity(1) }

    /* اقتباسات */
    .press-quotes{
      display:grid; gap:12px; margin-top:14px;
      grid-template-columns: 1fr;
    }
    @media (min-width:900px){ .press-quotes{ grid-template-columns: repeat(3, 1fr) } }
    .press-quote{
      background: rgba(255,255,255,.06);
      border:1px solid var(--border, rgba(255,255,255,.12));
      border-radius:14px; padding:16px;
      box-shadow: var(--shadow-1, 0 4px 18px rgba(0,0,0,.25));
    }
    .press-quote p{ margin:0 0 8px; color:var(--text, #fff) }
    .press-quote span{ color:var(--text-dim, #a8aab3); font-weight:700 }

    /* احترام تقليل الحركة */
    @media (prefers-reduced-motion: reduce){
      .press-track{ animation: none }
    }
/* =======================================================
   METRICS PRO (موجود للاستخدام لاحقًا إن لزم)
   ======================================================= */
.metrics-pro{ position:relative }
.metrics-head{ text-align:center; margin:0 0 8px }
.metrics-title{ font-size: clamp(24px, 3.6vw, 36px); font-weight:900; letter-spacing:.2px; margin:0 0 6px }
.metrics-desc{ color:var(--text-dim); max-width:70ch; margin:0 auto }

.metrics-grid{
  display:grid; gap:16px; margin-top:16px;
  grid-template-columns:repeat(12,1fr);
}
.mcard{
  grid-column:span 12;
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow-1);
  transition:.2s ease;
}
.mcard:hover{ transform:translateY(-2px); box-shadow: var(--shadow-2); background:var(--card-hover) }
@media (min-width:780px){ .mcard{ grid-column:span 6 } }
@media (min-width:1024px){ .mcard{ grid-column:span 3 } }

.m-top{ display:grid; gap:6px }
.m-kpi{ display:flex; align-items:baseline; gap:10px; justify-content:space-between }
.m-num{
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing:.3px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.m-delta{
  font-size:.9rem; font-weight:800;
  padding:4px 8px; border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.m-delta.up{ color:#10b981; border-color:#064e3b; background: rgba(16,185,129,.08) }
.m-delta.down{ color:#ef4444; border-color:#7f1d1d; background: rgba(239,68,68,.08) }
.m-delta.stable{ color:var(--text-dim) }

.m-label{ color:var(--text-dim); font-weight:700 }
.m-spark{ margin-top:8px }
.m-bar{ margin-top:10px; height:10px; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:999px; overflow:hidden }
.m-bar span{ display:block; height:100%; width:var(--w,60%); background:linear-gradient(90deg,var(--primary),var(--accent)) }

.m-badges{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap }
.chip{
  font-size:.82rem; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text);
}

/* ---------- Cookie Banner ---------- */
.cookie-banner{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--elev);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-2);
  display:flex;gap:12px;align-items:center;z-index:70
}
.cookie-banner p{margin:0;color:var(--text-dim)}
#cookie-accept{padding:8px 12px;border-radius:10px;background:var(--primary);color:#fff;border:0;cursor:pointer}

/* ---------- Footer ---------- */
footer{
  margin-top:40px;border-top:1px solid var(--border);
  color:var(--text-dim);text-align:center
}

/* ---------- RTL helpers ---------- */
[dir="rtl"] .modal-btns-row{flex-direction:row-reverse}
[dir="rtl"] .cookie-banner{direction:rtl}

/* ---------- Small helpers ---------- */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--muted);color:var(--text-dim);font-size:.78rem}
.hidden{display:none !important}

/* =======================================================
   Reserve/Handle — زر التحميل + سبينر + حالة الرسالة
   (منقول من النمط المضمّن إلى CSS الرئيسي)
   ======================================================= */
.btn-loading{pointer-events:none;opacity:.85}
.btn-spinner{
  display:none;width:16px;height:16px;border:2px solid #fff;
  border-right-color:transparent;border-radius:50%;
  margin-inline-start:6px;animation:spin .6s linear infinite
}
.btn-loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

#reserve-status{margin-top:8px}
#reserve-status.ok{color:var(--success)}
#reserve-status.err{color:var(--danger)}
#reserve-status.info{color:var(--text-dim)}

#reserveBtn{ position:relative; overflow:hidden }
#reserveBtn.success{
  background: var(--success);
  border-color: var(--success);
  color:#fff;
}
#reserveBtn .btn-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0%;
  background: rgba(255,255,255,.9); transition: width .25s linear;
  pointer-events:none;
}