/*!
 * Plinkly – Main Styles (Brand Identity) – v2.2
 * File: assets/style-main.css
 * Author: Plinkly Team (2025)
 * ----------------------------------------------------
 *  Light + Dark-mode ready.  Palette:
 *  • Primary Blue  – #2560ec
 *  • Accent Orange – #ff6600
 *  • Surfaces / Text colours are now tokenised so every
 *    component auto-switches when the user (or a JS
 *    toggle) requests dark-mode.
 */
 
 @import url("fonts.css");

/* ========== 1. VARIABLES & ROOT COLORS ========== */
:root {
  /* surfaces & neutrals */
  --clr-bg:        #f7faff;
  --clr-dark:      #191919;
  --clr-dim:       #555;

  /* shadows (light) */
  --shadow-card:   0 8px 40px rgba(37, 96, 236, .11);
  
  --pl-blue: #2560ec;
  --pl-dark: #0b172a;
  --pl-light: #eef2fa;
  --pl-shadow: 0 8px 28px rgba(37,96,236,0.12);
  --pl-radius: 2.1rem;
  --pl-gap: 2.2rem;
  --pl-orange: #ffa037;
}


/* 🌙  DARK MODE OVERRIDES  (via prefers-color-scheme OR .dark class) */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  :root,
  .dark {
    --clr-primary-2: #1e48a6;
    --clr-bg:        #0d1117;
    --clr-bg-light:  #161b22;
    --surface:       #1e222b;
    --border:        #2c313c;
    --clr-dark:      #e6e9ef;
    --clr-dim:       #9ca3af;

    /* softer shadows on dark */
    --shadow:        0 4px 16px rgba(0,0,0,.4);
    --shadow-hover:  0 8px 28px rgba(0,0,0,.55);
    --shadow-card:   0 6px 32px rgba(0,0,0,.5);
  }
}

body {
    font-family: 'Rethink Sans' !important;
    display: block !important;
}

/* للنسخة العربية */
html[lang="ar"] body {
    font-family: 'Plex-Ar', sans-serif !important;
}


/* ========== 2. UTILITY CLASSES ========== */
.text-center {text-align:center!important;}
.mt-2        {margin-top:1.8rem!important;}


/* اعداد هيدر موحد */
.why-header, .cmd-header, .how-header-minimal,
.stack-header, .testimonials-header, .usecases-header,
.metrics-header
{
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;   
    
}

/* عنوان موجد */
.why-title, .cmd-title,.cmd-title, .how-title,
.stack-title, .testimonials-title, .metrics-title, .usecases-title
 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

/* اعداد وصف موحد */
.why-desc,.cmd-subtitle,.cmd-text p,.step-content p,.stack-desc{
    font-size: 1.15rem;
    color: var(--text-dim);
    max-width: 720px;
    margin: 0 auto;
    
}


/* ========== 3. HERO SECTION ========== */
.hero.hero-home{
  min-height:100vh;
  padding:7rem 1.5rem 4rem;
  background:var(--bg);
  display:flex;
  align-items:center;
}

.hero-inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.2rem);
  align-items:center;
}

/* RTL دعم */
:root[dir="rtl"] .hero.hero-home{
  text-align:right;
}
:root[dir="rtl"] .hero-inner{
  direction:rtl;
}

/* -------- نص الهيرو (العمود الأيسر) -------- */
.hero-copy{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}

/* لم نعد نستخدم البادج لكن نُبقيها تحسبًا */
.hero-badge{
  display:none;
}

.hero-title{
  font-size: 4rem;
  font-weight:800;
  color:var(--clr-dark);
  letter-spacing:.01em;
  line-height:1.05;
  margin-bottom: none !important;
}

.hero-desc{
  color:var(--clr-dim);
  font-size:1.02rem;
  max-width:32rem;
 /* margin: auto;*/
}

/* أزرار الـ CTA */
.hero-ctas{
  display:flex;
  /*flex-wrap:wrap;*/
  gap:.8rem;
  margin-top:.3rem;
}

.hero-btn-primary{
  background: var(--clr-primary-2);
    color: #fff;
    align-content: center;
    justify-content: center;
}
.hero-btn-primary:hover{
  background:#000;
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.25);
}

.hero-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.6rem;
  border-radius:999px;
  border:1px solid var(--clr-dark);
  background:transparent;
  color:var(--clr-dark);
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.hero-btn-ghost:hover{
  background:var(--clr-dark);
  color:#fff;
}

/* النص تحت الأزرار (No credit card...) */
.hero-note{
  margin-top:.45rem;
  font-size:.9rem;
  color:var(--clr-dim);
}

/* -------- كارد الفورم (العمود الأيمن) -------- */
.hero-panel{
  background:var(--surface);
  border-radius:22px;
  padding:1.7rem 1.5rem 1.5rem;
  box-shadow:0 14px 40px rgba(10,25,61,.16);
  max-width:440px;
  width:100%;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}

.hero-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom:.4rem;
}

.hero-panel-title{
  font-size:1.02rem;
  font-weight:600;
  color:var(--clr-dark);
}

/* Switcher */
.hero-panel-switcher{
  background:var(--clr-bg-light);
  padding:.18rem;
  border-radius:999px;
  display:flex;
  gap:.18rem;
}
.switcher-btn{
  border:none !important;
  background:transparent !important;
  border-radius:999px !important;
  padding:.32rem .9rem !important;
  font-size:.85rem !important;
  font-weight:600 !important;
  color:var(--clr-dim) !important;
  cursor:pointer!important;
  transition:background .18s, color .18s, box-shadow .18s !important;
}
.switcher-btn.is-active{
  background:#fff;
  color:var(--clr-primary);
  box-shadow:0 6px 18px rgba(15,23,42,.18);
}

/* الحاويات لكل تبويب */
.hero-panel-body{
  display:block;
}
.hero-form-pane{
  display:none;
}
.hero-form-pane.is-active{
  display:block;
}

/* فورم الاختصار داخل الهيرو فقط */
.hero-panel .shorten-form{
  background:transparent;
  box-shadow:none;
  padding:0;
  margin:0;
  width:100%;
  display:block;
}

.shorten-input-row{
  display:flex;
  gap:.5rem;
  align-items:stretch;
}

.hero-panel .shorten-form input[type="url"]{
  flex:1;
  width:100%;
  margin:0;
  border-radius:14px;
  border:1.5px solid var(--border);
  padding:.8rem .9rem;
  font-size:.98rem;
  background:var(--clr-bg-light);
  box-shadow:none;
  transition:border .16s, box-shadow .16s, background .16s;
}
.hero-panel .shorten-form input[type="url"]:focus{
  border-color:var(--clr-primary);
  outline:none;
  background:#fff;
  box-shadow:0 0 0 1px rgba(84,120,255,.12);
}

.hero-panel .shorten-form button {
  border-radius: 14px;
  font-size: .98rem;
  font-weight: 700;
  padding: .8rem 1.25rem;
  border: none;
  background: linear-gradient(135deg, var(--clr-accent-2) 0%, var(--clr-accent) 100%); /* تدرج برتقالي */
  color: #fff;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(243, 102, 0, 0.25); /* ظل برتقالي متناسق */
  display: inline-flex;
  gap: .4rem;
  transition: var(--trans);
}

.hero-panel .shorten-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(243, 102, 0, 0.35);
  filter: brightness(1.05);
}


/* نتيجة الرابط */
.result{
  max-width:none;
  width:100%;
  margin:.7rem 0 .4rem;
  border-radius:16px;
  background:var(--clr-bg-light);
  box-shadow:0 3px 10px rgba(15,23,42,.12);
  padding:.7rem .85rem;
}

/* ملاحظة تحت الفورم */
.hero-form-note{
  font-size:.8rem;
  color:var(--clr-dim);
  margin-top:.15rem;
}

@media (max-width: 960px){ 
    .hero-panel-header{
        flex-direction: column;
    }
}

/* QR preview (مجرد placeholder بسيط) */
.qr-preview{
  margin-top:.6rem;
  min-height:120px;
  border-radius:14px;
  background:repeating-conic-gradient(from 45deg,#f0f0f0 0 10deg,#fafafa 10deg 20deg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:var(--clr-dim);
}

/* Footer note داخل الكارد */
.hero-panel-footer.signup-note{
  margin-top:.4rem;
  text-align:left;
}
:root[dir="rtl"] .hero-panel-footer.signup-note{
  text-align:right;
}

/* SR-only للـlabel */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* ===== Responsiveness ===== */
@media (max-width: 960px){
  .hero.hero-home{
    padding:4.2rem 1.25rem 3rem;
    margin-top: 3rem;
  }
  .hero-inner{
    grid-template-columns:1fr;
  }
  .hero-copy{
    order:1;
    text-align:center;
    align-items:center;
  }
  .hero-desc,
  .hero-note,
  .hero-panel-footer.signup-note{
    text-align:center;
    font-size: .90rem;
  }
  .hero-panel{
    order:2;
  }
  .hero-ctas{
      
    justify-content:center;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

  }
}

@media (max-width: 640px){
  .hero.hero-home{
    padding:3.4rem 1rem 2.6rem;
    margin-top: 3rem;
  }
  .shorten-input-row{
    flex-direction:column;
  }
  .hero-panel .shorten-form button{
    width:100%;
  }
}


/* -------- Trust Bar Styling -------- */
.hero-trust-bar {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.05); /* خط خفيف جداً للفصل */
    max-width: 32rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-dim);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}

.trust-item svg {
    width: 18px;
    height: 18px;
    color: #10b981; /* لون أخضر (ثقة) أو استخدم var(--clr-primary) */
}

.trust-item:hover {
    color: var(--clr-dark);
}

/* التوافق مع RTL */
:root[dir="rtl"] .hero-trust-bar {
    justify-content: flex-start;
}

/* Responsiveness */
@media (max-width: 960px) {
    .hero-trust-bar {
        justify-content: center;
        margin-inline: auto;
    }
}

@media (max-width: 480px) {
    .hero-trust-bar {
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .trust-item span {
        font-size: 0.75rem;
    }
}

metrics-section,.testimonials-section, .stack-section,
.how-scroll-section .why-section{/*
    background: var(--surface);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
     flex-direction: column; 
     justify-content: space-evenly; 
    height: 100vh;
    */
}


/* ========== 4.1. QR CODE AND SHORT========== */

.short-link-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0 auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 4px 22px rgba(37,96,236,0.08);
  padding: 14px 24px 14px 14px;
  max-width: 460px;
  min-width: 220px;
  gap: 1em;
  position: relative;
}
.short-link-box .short-url {
  font-size: 1.09em;
  font-weight: 600;
  color: #2560ec;
  word-break: break-all;
  background: #f7f9ff;
  border-radius: 9px;
  padding: 7px 16px;
  flex: 1;
  transition: background .13s;
}
.short-link-box .copy-btn {
  background: linear-gradient(90deg,#2560ec,#2e7bff 80%);
  color: #fff;
  border: none;
  border-radius: 1.7em;
  font-weight: 500;
  font-size: .98em;
  padding: 6px 22px;
  cursor: pointer;
  transition: background .14s;
  margin-left: 8px;
  outline: none;
  position: relative;
}
.short-link-box .copy-btn.copied {
  background: #1ba055;
  color: #fff;
}
.short-link-box .copied-msg {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  font-size: .92em;
  color: #1ba055;
  background: #eafbee;
  border-radius: 7px;
  padding: 2px 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .23s;
  z-index: 3;
}
.short-link-box .copied-msg.show {
  opacity: 1;
}


/* ========== AI SECTION (AGENT & SUMMARY) - ULTRA CLEAN ========== */
.plk-ai-section {
  padding: 7rem 1.5rem;
  background: var(--surface);
}

.ai-clean-layout {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.ai-content-side {
  flex: 1;
}

/* القدرات (Agent + Summary) */
.ai-capabilities {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.ai-cap-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ai-cap-icon {
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  flex-shrink: 0;
}

.ai-cap-icon.spark {
  color: var(--pl-blue);
  background: rgba(37, 96, 236, 0.05);
  border-color: rgba(37, 96, 236, 0.1);
}

.ai-cap-text h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.4rem;
}

.ai-cap-text p {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* --- الجانب البصري (Mockups) --- */
.ai-visual-side {
  flex: 1.2;
  position: relative;
  display: flex;
  justify-content: center;
}

/* 1. Floating AI Insight Card */
.ai-floating-insight {
  position: absolute;
  top: -30px;
  right: -20px; /* في العربية سيتم عكسها عبر RTL */
  width: 280px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(37, 96, 236, 0.2);
  box-shadow: 0 20px 40px -10px rgba(37, 96, 236, 0.15);
  z-index: 10;
  overflow: hidden;
  animation: float-slow 6s ease-in-out infinite;
}

.insight-header {
  background: linear-gradient(90deg, rgba(37, 96, 236, 0.05), transparent);
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pl-blue);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(37, 96, 236, 0.05);
}

.insight-body {
  padding: 1rem;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
}

.insight-action {
  margin-top: 0.8rem;
  padding: 0.6rem;
  background: #f1f5f9;
  border-radius: 6px;
  border-left: 3px solid var(--pl-blue);
  color: #0f172a;
}

/* 2. Clean Chat Mockup (الذي يستخدمه الـ JS الخاص بك) */
.clean-chat-mockup {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  height: 450px;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.chat-header-minimal {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fcfcfc;
}

.chat-dot.green {
  width: 8px; height: 8px; background: #10b981; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.chat-title-minimal {
  font-size: 0.85rem; font-weight: 600; color: #475569;
}

/* الحاوية التي يطبع فيها الـ JS */
.chat-body-minimal {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
}

/* ستايل فقاعات المحادثة (التي تولدها دالة appendBubble في JS) */
.chat-bubble {
  max-width: 85%;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  animation: popInBubble 0.3s ease forwards;
}

.bubble-user {
  background: var(--pl-blue);
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

.bubble-ai {
  background: #f8fafc;
  color: #334155;
  border: 1px solid rgba(0,0,0,0.04);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}

.ai-response-card {
  margin-top: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--pl-blue);
}

.chat-input-minimal {
  padding: 1rem;
  border-top: 1px solid rgba(0,0,0,0.04);
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fcfcfc;
}

.chat-input-box {
  flex: 1;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: #0f172a;
  min-height: 20px;
}

.ai-cursor-blink {
  color: var(--pl-blue);
  animation: blink 1s step-end infinite;
}

.chat-send-icon {
  width: 36px; height: 36px;
  background: #0f172a;
  color: #ffffff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chat-send-icon svg { width: 16px; height: 16px; }

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  .plk-ai-section { background: var(--bg); }
  .ai-cap-icon { background: var(--surface); border-color: rgba(255,255,255,0.05); color: #f8fafc; }
  .ai-cap-text h4 { color: #f8fafc; }
  .ai-cap-text p { color: #94a3b8; }
  .clean-chat-mockup, .ai-floating-insight { background: var(--surface); border-color: rgba(255,255,255,0.05); }
  .chat-header-minimal, .chat-input-minimal { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
  .chat-body-minimal { background: var(--surface); }
  .bubble-ai { background: rgba(0,0,0,0.2); color: #cbd5e1; border-color: rgba(255,255,255,0.05); }
  .ai-response-card { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.05); }
  .chat-input-box { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.1); color: #f8fafc; }
  .chat-title-minimal { color: #94a3b8; }
  .insight-body { color: #cbd5e1; }
  .insight-action { background: rgba(0,0,0,0.2); color: #f8fafc; }
}

/* Responsive & RTL */
@media (max-width: 900px) {
  .ai-clean-layout { flex-direction: column; gap: 4rem; }
}
:root[dir="rtl"] .bubble-user { border-bottom-right-radius: 12px; border-bottom-left-radius: 2px; }
:root[dir="rtl"] .bubble-ai { border-bottom-left-radius: 12px; border-bottom-right-radius: 2px; }
:root[dir="rtl"] .insight-action { border-left: none; border-right: 3px solid var(--pl-blue); }

@media (max-width: 900px) {
  .ai-floating-insight {
      display: none;

  }
}
/* للغة العربية RTL */
@media (max-width: 900px) {
  :root[dir="rtl"] .ai-floating-insight {
    right: 50%;
    left: auto;
    transform: translateX(50%);
  }
}

/* ========== BENTO GRID (STRIPE/REBRANDLY STYLE) ========== */
.plk-bento-section {
  position: relative;
  background: var(--surface);
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--border);
}

.bento-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4rem;
}

/* الشبكة */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* البطاقة الأساسية (Sleek Card) */
.bento-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.03), 0 4px 16px -4px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 8px 24px -4px rgba(0, 0, 0, 0.04);
}

.bento-card.wide {
  grid-column: span 2;
}

/* النصوص بالأعلى */
.bento-content {
  padding: 2.2rem 2.2rem 1.5rem;
}

.bento-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.bento-card-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* المنطقة السفلية للواجهة (تندمج بسلاسة) */
.bento-visual {
  padding: 0 2.2rem 2.2rem;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* --- MICRO-UI COMPONENTS (Clean & Minimal) --- */

/* 1. Routing */
.micro-ui-routing {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.route-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.04);
  background: #f8fafc;
  font-size: 0.85rem;
  color: #334155;
  font-weight: 500;
}
.route-item.active {
  background: #ffffff;
  border-color: rgba(37, 96, 236, 0.2);
  box-shadow: 0 2px 8px rgba(37, 96, 236, 0.04);
}
.route-left { display: flex; align-items: center; gap: 8px; width: 100px; }
.route-flag { font-size: 1rem; }
.route-arrow { width: 14px; height: 14px; color: #94a3b8; }
.route-item.active .route-arrow { color: var(--pl-blue); }
.route-dest { color: var(--pl-blue); font-family: monospace; font-size: 0.8rem; }

/* 2. Password */
.micro-ui-password {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}
.pwd-header { margin-bottom: 1rem; color: #64748b; }
.pwd-header svg { width: 24px; height: 24px; color: var(--pl-blue); }
.pwd-input-mock {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 0.6rem;
  color: #94a3b8;
  letter-spacing: 3px;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}
.pwd-btn-mock {
  background: #0f172a;
  color: #ffffff;
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* 3. Limits */
.micro-ui-limits {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 12px;
  background: #f8fafc;
}
.limit-top {
  display: flex; justify-content: space-between; font-size: 0.85rem; color: #475569; margin-bottom: 0.6rem; font-weight: 500;
}
.limit-count { color: #f59e0b; font-weight: 600; }
.limit-bar { height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.limit-fill { height: 100%; background: #f59e0b; border-radius: 4px; }
.limit-status { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #64748b; }
.status-dot { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; }

/* 4. CSV Bulk (New Clean UI) */
.micro-ui-csv {
  width: 100%;
  max-width: 480px; /* للتحكم بعرضها داخل المساحة الواسعة */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.csv-dropzone {
  border: 1.5px dashed rgba(37, 96, 236, 0.3);
  background: #f8fafc;
  border-radius: 12px;
  padding: 2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s;
}
.csv-icon { width: 28px; height: 28px; color: var(--pl-blue); }
.csv-upload-text { font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.csv-columns { font-size: 0.8rem; color: #64748b; font-family: monospace; }
.csv-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.csv-btn {
  flex: 1;
  text-align: center;
  padding: 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}
.csv-btn.outline { border: 1px solid rgba(0,0,0,0.1); color: #475569; background: #ffffff; }
.csv-btn.solid { background: var(--pl-blue); color: #ffffff; }

/* Dark Mode Overrides for Bento */
@media (prefers-color-scheme: dark) {
  .bento-card { background: var(--surface); border-color: rgba(255,255,255,0.05); }
  .bento-card-title { color: #f8fafc; }
  .bento-card-desc { color: #94a3b8; }
  .route-item, .micro-ui-password, .micro-ui-limits, .csv-dropzone { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
  .route-item.active { background: rgba(37, 96, 236, 0.1); }
  .pwd-input-mock { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.05); color: #64748b; }
  .csv-btn.outline { background: transparent; border-color: rgba(255,255,255,0.1); color: #cbd5e1; }
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card.wide { grid-column: span 2; }
}
@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card.wide { grid-column: span 1; }
  .bento-content, .bento-visual { padding: 1.5rem; }
}

/* RTL Support */
:root[dir="rtl"] .route-arrow { transform: scaleX(-1); }
:root[dir="rtl"] .route-left { flex-direction: row-reverse; }




/* ========== AD INJECTION SECTION (CLEAN UI) ========== */
.plk-ad-section {
  padding: 6rem 1.5rem;
  background: var(--surface);
  border-top: 1px solid rgba(0,0,0,0.04);
}

.ad-layout {
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ad-content-side {
  flex: 1;
}

.ad-content-side .why-desc {
  margin-left: 0;
  margin-right: 0;
  text-align: left; /* أو right في اللغة العربية عبر RTL */
}

.ad-features-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ad-features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: #475569;
  font-weight: 500;
}

.ad-features-list svg {
  width: 20px;
  height: 20px;
  color: var(--pl-blue);
  flex-shrink: 0;
  background: rgba(37, 96, 236, 0.08);
  border-radius: 50%;
  padding: 3px;
}

/* الجانب البصري */
.ad-visual-side {
  flex: 1;
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

/* محاكاة صفحة التوجيه */
.redirect-page-mockup {
  width: 100%;
  max-width: 420px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08);
  overflow: hidden;
  transform: rotateY(-5deg) rotateX(2deg); /* إمالة بسيطة جداً وثابتة */
  transition: transform 0.4s ease;
}

.redirect-page-mockup:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.mockup-header {
  background: #ffffff;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mockup-url {
  margin: 0 auto;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #64748b;
  font-family: monospace;
}

.mockup-body {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.mockup-site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  opacity: 0.5;
}

.brand-logo-mock {
  width: 32px; height: 32px; background: #cbd5e1; border-radius: 8px;
}

.brand-line-mock {
  height: 12px; width: 40%; background: #e2e8f0; border-radius: 6px;
}

/* مساحة الإعلان المحقون */
.injected-ad-space {
  width: 100%;
  height: 160px;
  background: rgba(37, 96, 236, 0.04);
  border: 1.5px dashed var(--pl-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}

.ad-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pl-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ad-placeholder-text {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--pl-blue);
  opacity: 0.8;
}

.ad-placeholder-text span {
  display: block;
  font-family: var(--ff);
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 8px;
}

/* زر الانتقال الوهمي */
.redirect-action-mock {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 0.8rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #475569;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.spinner-mock {
  width: 16px; height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--pl-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .plk-ad-section { background: var(--bg); border-color: rgba(255,255,255,0.05); }
  .ad-features-list li { color: #94a3b8; }
  .redirect-page-mockup { background: var(--surface); border-color: rgba(255,255,255,0.05); }
  .mockup-header { background: #1e293b; border-color: rgba(255,255,255,0.05); }
  .mockup-url { background: #0f172a; color: #94a3b8; }
  .brand-logo-mock, .brand-line-mock { background: #334155; }
  .injected-ad-space { background: rgba(37, 96, 236, 0.1); }
  .redirect-action-mock { background: #1e293b; border-color: rgba(255,255,255,0.05); color: #cbd5e1; }
  .spinner-mock { border-color: #334155; border-top-color: var(--pl-blue); }
}

/* Responsive */
@media (max-width: 900px) {
  .ad-layout { flex-direction: column; gap: 3rem; text-align: center; }
  .ad-content-side .why-desc { text-align: center; }
  .ad-features-list { align-items: center; }
  .redirect-page-mockup { transform: none; }
}

/* RTL Support */
:root[dir="rtl"] .ad-content-side .why-desc { text-align: right; }
:root[dir="rtl"] .ad-features-list li { text-align: right; }
@media (max-width: 900px) {
  :root[dir="rtl"] .ad-content-side .why-desc { text-align: center; }
}



/* ========== HOW IT WORKS (WORKFLOW PIPELINE) ========== */
.plk-workflow-section {
  padding: 6rem 1.5rem;
  background: var(--surface);
  border-top: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
}

.workflow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* الخط الواصل بين الخطوات */
.workflow-line {
  position: absolute;
  top: 24px;
  left: 50px;
  right: 50px;
  height: 1px;
  background: rgba(0,0,0,0.08);
  z-index: 0;
}

.workflow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* الهيدر ورقم الخطوة */
.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}

.step-number {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pl-blue);
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.step-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.step-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 2rem;
  min-height: 70px; /* لتوحيد ارتفاع النصوص */
}

/* --- MICRO-UI للخطوات --- */
.step-micro-ui {
  background: #f8fafc;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: auto; /* يدفع الواجهة للأسفل دائمًا ليتساوى الطول */
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Step 1: URL Box */
.mui-url-box {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
}
.mui-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mui-domain-badge {
  background: #e2e8f0;
  color: #475569;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}
.mui-btn-mock {
  background: var(--pl-blue);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Step 2: Toggles */
.mui-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.mui-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.04);
  padding: 0.6rem 1rem;
  border-radius: 8px;
}
.mui-toggle-label {
  font-size: 0.85rem;
  color: #334155;
  font-weight: 500;
}
.mui-switch {
  width: 32px; height: 18px;
  background: #cbd5e1;
  border-radius: 20px;
  position: relative;
}
.mui-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; background: #fff; border-radius: 50%;
}
.mui-switch.active { background: var(--pl-blue); }
.mui-switch.active::after { left: 16px; }

/* Step 3: Chart */
.mui-chart { width: 100%; }
.mui-chart-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
}
.mui-live-indicator {
  display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase;
}
.pulse-dot {
  width: 8px; height: 8px; background: #10b981; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.mui-chart-num { font-size: 1.4rem; font-weight: 800; color: #0f172a; }
.mui-bars {
  display: flex; align-items: flex-end; justify-content: space-between; height: 60px; gap: 4px;
}
.mui-bar {
  flex: 1; background: #e2e8f0; border-radius: 4px;
}
.mui-bar.active { background: var(--pl-blue); }

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  .plk-workflow-section { background: var(--bg); border-color: rgba(255,255,255,0.05); }
  .step-title, .mui-chart-num { color: #f8fafc; }
  .step-desc { color: #94a3b8; }
  .step-number { background: var(--surface); border-color: rgba(255,255,255,0.1); }
  .workflow-line { background: rgba(255,255,255,0.05); }
  .step-micro-ui { background: var(--surface); border-color: rgba(255,255,255,0.05); }
  .mui-url-box, .mui-toggle-row { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); color: #94a3b8; }
  .mui-domain-badge { background: rgba(255,255,255,0.1); color: #cbd5e1; }
  .mui-toggle-label { color: #cbd5e1; }
  .mui-switch { background: #475569; }
  .mui-bar { background: #334155; }
}

/* Responsive & RTL */
@media (max-width: 900px) {
  .workflow-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .workflow-line { display: none; }
  .step-desc { min-height: auto; }
}
:root[dir="rtl"] .mui-switch::after { left: auto; right: 2px; }
:root[dir="rtl"] .mui-switch.active::after { right: 16px; }

.workflow-step, 
.step-micro-ui {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mui-url-box {
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis; /* يضع (...) بدلاً من تمدد الرابط خارج الصندوق */
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .step-micro-ui {
    padding: 1.2rem 1rem; /* تقليل المسافات الداخلية للجوال */
    height: auto; /* السماح للمحتوى بأخذ مساحته الطبيعية */
    min-height: 160px;
  }
  
  .mui-action-row {
    flex-wrap: wrap; /* السماح للعناصر بالنزول لسطر جديد إذا ضاقت الشاشة */
    gap: 8px;
  }
  
  /* جعل الأزرار تأخذ العرض الكامل في الشاشات الصغيرة جداً لتجنب القطع */
  .mui-domain-badge, 
  .mui-btn-mock {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}


/* ========== CORE STACK SECTION (VERTICAL TABS) ========== */
.plk-core-section {
  padding: 6rem 1.5rem;
  background:var(--surface);
  border-top: 1px solid rgba(0,0,0,0.04);
}

.core-layout {
  display: flex;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

/* القائمة الجانبية */
.core-sidebar {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  text-align: left; /* سيتم عكسه للـ RTL لاحقاً */
  padding: 1rem 1.2rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #475569;
  transition: color 0.3s;
}

.nav-item-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.4;
}

.nav-item:hover {
  background: rgba(0,0,0,0.02);
}

/* حالة الزر النشط */
.nav-item.active {
  background: var(--clr-bg-light);
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.nav-item.active .nav-item-title {
  color: var(--pl-blue);
}

/* مسرح العرض (استغنينا عن الـ 3D) */
.core-stage {
  flex: 1;
  position: relative;
  min-height: 400px;
  background: var(--border);
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
  overflow: hidden;
}

.content-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--clr-bg-light);
}

.content-card.active {
  opacity: 1;
  pointer-events: all;
  z-index: 10;
}

/* (يتم تجاهل كلاسات .next و .last التي يضيفها الـ JS القديم لتجنب الـ 3D) */
.content-card.next, .content-card.last {
  opacity: 0;
  pointer-events: none;
  transform: none;
  filter: none;
}

/* --- MICRO-UI للبطاقات داخل المسرح --- */
.core-card-inner {
  width: 100%;
  max-width: 400px;
}

/* 1. Analytics */
.mui-chart-complex { display: flex; flex-direction: column; gap: 1.5rem; }
.mui-chart-row { display: flex; align-items: center; gap: 2rem; }
.mui-donut-mock { width: 100px; height: 100px; border-radius: 50%; border: 15px solid #f1f5f9; border-top-color: var(--pl-blue); border-right-color: #f59e0b; }
.mui-stat-line { font-size: 0.85rem; color: #475569; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mui-stat-line span { width: 10px; height: 10px; border-radius: 50%; }
.c-blue { background: var(--pl-blue); } .c-orange { background: #f59e0b; } .c-gray { background: #cbd5e1; }
.mui-graph-mock { height: 80px; background: linear-gradient(180deg, rgba(37,96,236,0.1) 0%, transparent 100%); border-top: 2px solid var(--pl-blue); border-radius: 4px; }

/* 2. Audience (Map) */
.mui-map-mock { position: relative; height: 200px; background: var(--clr-bg); border-radius: 12px; border: 1px solid rgba(0,0,0,0.04); overflow: hidden; }
.mui-map-bg { position: absolute; inset: 0; opacity: 0.1; background-image: radial-gradient(var(--clr-dark) 1px, transparent 1px); background-size: 10px 10px; }
.mui-pin { position: absolute; width: 12px; height: 12px; background: var(--pl-blue); border-radius: 50%; box-shadow: 0 0 0 4px rgba(37,96,236,0.2); }
.p1 { top: 40%; left: 20%; } .p2 { top: 30%; left: 50%; } .p3 { top: 60%; left: 70%; }
.mui-map-card { position: absolute; bottom: 10px; right: 10px; background: var(--clr-bg); padding: 0.8rem; border-radius: 8px; font-size: 0.8rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* 3. Management (Folders) */
.mui-folder-mock { background: var(--bg); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; padding: 1.5rem; }
.mui-folder-header { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
.mui-folder-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text); margin-bottom: 1rem; }
.mui-folder-item strong { color: var(--text-dim); }
.mui-folder-item svg { color: var(--pl-blue); fill: rgba(37,96,236,0.1); }

/* 4. Team Roles */
.mui-team-mock { background: #f8fafc; border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.mui-team-row { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 0.8rem 1rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.04); }
.team-user { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: #0f172a; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; }
.avatar.admin { background: var(--pl-blue); }
.avatar.editor { background: #f59e0b; }
.avatar.viewer { background: #94a3b8; }
.team-role { font-size: 0.75rem; color: #64748b; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.team-role.admin-role { color: var(--pl-blue); background: rgba(37,96,236,0.1); }

/* 5. API Terminal */
.mui-terminal-mock { background: #0f172a; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 440px; }
.terminal-head { background: #1e293b; padding: 0.6rem 1rem; font-family: monospace; font-size: 0.8rem; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.terminal-body { padding: 1.5rem; font-family: monospace; font-size: 0.8rem; line-height: 1.6; color: #f8fafc; overflow-x: auto; }
.c-pink { color: #f472b6; } .c-green { color: #34d399; } .c-blue { color: #38bdf8; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.red { background: #ef4444; } .dot.yellow { background: #f59e0b; } .dot.green { background: #10b981; }

/* 6. Domains */
.mui-domain-mock { background: var(--clr-bg); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; padding: 1.5rem; }
.domain-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 1rem; margin-bottom: 1rem; }
.d-info { display: flex; flex-direction: column; gap: 4px; }
.d-info strong { font-size: 0.95rem; color: var(--text); }
.d-info span { font-size: 0.75rem; color: var(--clr-accent); }
.domain-dns { background: var(--clr-bg-light); border: 1px solid rgba(0,0,0,0.05); padding: 1rem; border-radius: 8px; font-family: monospace; font-size: 0.85rem; color: #64748b; display: flex; flex-direction: column; gap: 8px; }

/* تحديثات الدارك مود للطبقات الجديدة */
@media (prefers-color-scheme: dark) {
  .mui-team-mock { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
  .mui-team-row { background: var(--surface); border-color: rgba(255,255,255,0.05); }
  .team-user { color: #f8fafc; }
  .team-role { background: rgba(255,255,255,0.05); color: #cbd5e1; }
  .mui-folder-item strong { color: #f8fafc; }
}


/* Responsive & RTL */
@media (max-width: 900px) {
  .core-layout { flex-direction: column; }
  .core-sidebar { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .nav-item { padding: 0.8rem; }
  .core-stage { min-height: 350px; }
}
@media (max-width: 600px) {
  .core-sidebar { display: flex; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
  .core-sidebar::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; min-width: 200px; }
}
:root[dir="rtl"] .nav-item { text-align: right; }
:root[dir="rtl"] .mui-map-card { right: auto; left: 10px; }



/* ========== Custom Ads – Interactive & Simple ========== */
.ads-custom-section{
  padding:3.4rem 0 3.7rem;
}

.ads-custom-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 1.5rem;
}

/* Header */
.ads-custom-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 2.3rem;
}
.ads-custom-eyebrow{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--clr-primary-2,#4f46e5);
  font-weight:600;
  margin-bottom:.4rem;
}
.ads-custom-title{
  font-size:2.05rem;
  font-weight:800;
  color:var(--clr-primary);
  margin:0 0 .4rem;
  letter-spacing:.02em;
}
.ads-custom-desc{
  font-size:1.02rem;
  color:var(--text-dim,var(--clr-dim));
  line-height:1.7;
  margin:0;
}

/* ===== Simulator card ===== */
.ads-sim-card{
  margin:0 auto 2.3rem;
  max-width:880px;
  background:var(--surface,#fff);
  border-radius:20px;
  border:1px solid var(--border,#e2e4f0);
  box-shadow:0 16px 46px rgba(15,23,42,.08);
  padding:1.4rem 1.4rem 1.5rem;
}

.ads-sim-top{
  margin-bottom:1rem;
}

.ads-mode-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  justify-content:center;
  margin-bottom:.6rem;
}
.ads-mode-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(248,250,252,.9);
  padding:.38rem .85rem;
  font-size:.8rem;
  cursor:pointer;
  font-weight:500;
  color:#4b5563;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.ads-mode-btn.is-active{
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-primary));
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
}
.ads-mode-text{
  margin:0;
  font-size:.9rem;
  text-align:center;
  color:#4b5563;
}

.ads-sim-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.3rem;
  margin-top:1rem;
}
.ads-sim-block{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.ads-sim-label{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#6b7280;
}
.ads-range-row{
  padding:.35rem .1rem 0;
}
.ads-range-row input[type="range"]{
  width:100%;
}
.ads-range-meta{
  display:flex;
  justify-content:space-between;
  font-size:.78rem;
  color:#6b7280;
  margin-top:.15rem;
}
.ads-sim-hint{
  margin:.2rem 0 0;
  font-size:.82rem;
  color:#6b7280;
}

/* select + estimate */
.ads-select{
  width:100%;
  border-radius:999px;
  border:1px solid var(--border,#e2e4f0);
  padding:.5rem .7rem;
  font-size:.9rem;
  background:var(--clr-bg-light,#f9fafb);
  color:#111827;
}

.ads-estimate-box{
  margin-top:.45rem;
  border-radius:16px;
  background:rgba(248,250,252,.95);
  border:1px dashed rgba(148,163,184,.8);
  padding:.6rem .75rem;
}
.ads-est-label{
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:.1rem;
}
.ads-est-value{
  font-size:1.35rem;
  font-weight:800;
  color:#111827;
}
.ads-est-caption{
  font-size:.78rem;
  color:#6b7280;
  margin-top:.1rem;
}

/* ===== Feature list ===== */
.ads-feature-list{
  list-style:none;
  margin:0 0 1.8rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.3rem;
}
.ads-feature-item{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
}
.ads-feature-icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--clr-bg-light);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(37,96,236,.12);
}
.ads-feature-icon img{
  width:26px;
  height:26px;
  object-fit:contain;
}
.ads-feature-text h3{
  margin:0 0 .1rem;
  font-size:1.03rem;
  font-weight:700;
  color:var(--text,#0f172a);
}
.ads-feature-text p{
  margin:0;
  font-size:.94rem;
  color:var(--text-dim,#6b7280);
  line-height:1.6;
}

/* CTA */
.ads-custom-cta{
  text-align:center;
}
.ads-custom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.78rem 1.5rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-primary));
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 16px 40px rgba(59,130,246,.6);
}
.ads-custom-btn:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

/* Responsive */
@media (max-width: 960px){
  .ads-custom-inner{padding:0 1.25rem;}
  .ads-sim-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .ads-custom-inner{padding:0 1rem;}
  .ads-custom-section{
    padding:3.1rem 0 3.3rem;
  }
}

/* RTL */
:root[dir="rtl"] .ads-custom-inner{
  direction:rtl;
}
:root[dir="rtl"] .ads-custom-header{
  text-align:center;
}
:root[dir="rtl"] .ads-feature-item{
  flex-direction:row-reverse;
}
:root[dir="rtl"] .ads-feature-text{
  text-align:right;
}

/* الخلفية: نستخدم تدرج لوني خفي جداً لتركيز العين في الوسط */
.cmd-features {
  /*padding: 8rem 1.5rem;*/
  background: radial-gradient(circle at center top, rgba(37,96,236,0.05) 0%, var(--bg) 60%);
  overflow: hidden;
}
.cmd-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 1rem;
}

.cmd-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* Header */
/* --- THE FLOATING DECK (NAVIGATION) --- */
.cmd-deck {
  display: flex;
  padding: 0.5rem;
  border-radius: 100px; /* شكل كبسولة */
  position: relative;
  z-index: 10;
  margin-bottom: 1rem;
  /* تأثير الزجاج */
  backdrop-filter: blur(10px); 
  justify-content: center;
}

.cmd-text{
    text-align: center;
}

.cmd-nav {
  display: flex;
  position: relative;
}

.cmd-btn {
  background: transparent;
  border: none;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  position: relative;
  z-index: 2;
  border-radius: 100px;
  transition: color 0.3s ease;
  color: var(--text-dim);
}

.cmd-icon img {
  width: 20px;
  height: 20px;
  opacity: 0.7;
  transition: transform 0.3s;
}

.cmd-label {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Active State Styles */
.cmd-btn.active {
  color: var(--pl-blue);
}

.cmd-btn.active .cmd-icon img {
  opacity: 1;
  transform: scale(1.1);
}

/* الوهج الخلفي للزر النشط */
.cmd-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(37,96,236,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 100px;
}

/* المؤشر المتحرك (Background Pill) */
/* سنقوم بتحريكه بالجافاسكريبت ليكون خلف الزر النشط */
.cmd-indicator {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: rgba(37, 96, 236, 0.08);
  border-radius: 100px;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0; /* يظهر بالجافاسكريبت */
}

/* --- THE STAGE (CONTENT) --- */
.cmd-stage {
  position: relative;
  min-height: 500px; /* احفظ مساحة */
}

.cmd-content {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.cmd-content.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
  z-index: 5;
}

.cmd-text h3 {
  font-size: 1.8rem;
  color: var(--clr-accent);
  margin-bottom: 0.5rem;
}

/* الإطار "المتصفح" للصورة */
.cmd-visual {
  width: 100%;
  perspective: 1000px;
}

.browser-mockup {
  background: var(--surface);
  border-radius: 12px; /* أقل انحناء للشاشات */
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0,0,0,0.05); /* حدود دقيقة */
  overflow: hidden;
  max-width: 850px;
  margin: 0 auto;
  transform: rotateX(2deg); /* إمالة بسيطة جداً 3D */
  transition: transform 0.5s ease;
}

.cmd-content.active .browser-mockup {
  transform: rotateX(0deg); /* تعود للطبيعة عند التفعيل */
  animation: float 6s ease-in-out infinite;
}

.browser-header {
  background: #f1f3f6; /* لون شريط المتصفح */
  padding: 0.8rem 1rem;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d1d5db;
}
.dot:nth-child(1) { background: #ef4444; }
.dot:nth-child(2) { background: #f59e0b; }
.dot:nth-child(3) { background: #10b981; }

.browser-mockup img {
  display: block;
  width: 100%;
  height: auto;
}

/* حركة الطفو الخفيفة */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Mobile */
@media (max-width: 768px) {
  .cmd-deck { 
    flex-direction: column; 
    border-radius: 20px;
    width: 100%;
  }
  .cmd-nav { flex-direction: column; width: 100%; }
  .cmd-btn { justify-content: center; width: 100%; }
  .cmd-indicator { display: none; } /* صعب تطبيقه عموديا بسهولة */
}

/* ========== TESTIMONIALS SECTION (MODERNIZED) ========== */
.testimonials-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* خلفية هادئة بدلاً من اللون الصارخ */
  background:linear-gradient(30deg, var(--bg) 30%, var(--clr-bg-light) 70%);
  padding: 6rem 1.5rem;
  text-align: center;
  color: var(--clr-dark);
  overflow: hidden;
}

.testimonials-header{
    margin: 0 auto 3rem;
}


.testimonials-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 1200px; /* توسيع العرض الأقصى */
}

/* الحاوية الرئيسية للبطاقات */
.testimonials-cards {
  position: relative;
  width: 100%;
  height: 380px; /* زيادة الارتفاع ليتناسب مع المحتوى */
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

/* تصميم البطاقة */
.testimonial-card {
  position: absolute;
  left: 50%;
  top: 50%; /* توسيط عمودي */
  /* الحالة الافتراضية (مخفية في الخلف) */
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  /* ظل ناعم وعميق */
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.08);
  
  /* العرض أصبح مرناً وأوسع */
  width: 90%; 
  max-width: 750px; 
  padding: 3rem;
  text-align: left;
  
  z-index: 0;
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* --- حالات البطاقة (States) --- */

/* 1. البطاقة النشطة (الواضحة أمام العميل) */
.testimonial-card.active {
  opacity: 1;
  z-index: 10;
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 25px 60px -15px rgba(37, 96, 236, 0.15); /* ظل أزرق خفيف */
  pointer-events: auto;
  border-color: rgba(37, 96, 236, 0.1);
}

/* 2. البطاقة السابقة (على اليسار - ضبابية) */
.testimonial-card.prev {
  opacity: 0.4;
  z-index: 5;
  transform: translate(-90%, -50%) scale(0.85); /* إزاحة لليسار */
  filter: blur(4px); /* تأثير الضباب */
  background: #f8fafc; /* لون أغمق قليلاً */
  cursor: pointer;
  pointer-events: auto; /* قابلة للنقر للعودة */
}

/* 3. البطاقة التالية (على اليمين - ضبابية) */
.testimonial-card.next {
  opacity: 0.4;
  z-index: 5;
  transform: translate(-10%, -50%) scale(0.85); /* إزاحة لليمين */
  filter: blur(4px);
  background: #f8fafc;
  cursor: pointer;
  pointer-events: auto;
}

/* المحتوى الداخلي للبطاقة */
.testimonial-content {
  position: relative;
  z-index: 2;
}

.testimonial-quote-icon {
  font-size: 4rem;
  color: rgba(37, 96, 236, 0.1); /* علامة اقتباس كبيرة وشفافة */
  position: absolute;
  top: -20px;
  left: -10px;
  font-family: serif;
  line-height: 1;
}

.testimonial-text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 2rem;
  position: relative;
}

/* المستخدم */
.testimonial-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.testimonial-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--clr-bg-light);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.user-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pl-dark);
  margin: 0;
}

.testimonial-role {
  font-size: 0.9rem;
  color: var(--text-dim);
  display: block;
}

/* الأسهم (تحديث التصميم) */
.testimonial-arrows {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
  z-index: 20;
}

.testimonials-arrow {
  width: 65px; height: 65px;
  border-radius: 35%;
  background: var(--clr-primary);
  border: 1px solid var(--border);
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.testimonials-arrow:hover {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-primary-1);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
  .testimonial-card { width: 95%; padding: 2rem; }
  .testimonial-text { font-size: .9rem; }
  /* في الموبايل نخفي البطاقات الجانبية لتجنب الزحام */
  .testimonial-card.prev, .testimonial-card.next { opacity: 0; pointer-events: none; }
  .testimonials-arrow {
      width: 40px;
    height: 40px;
    border-radius: 20%;
    font-size: .9rem;
  }
}



/* --- إعداد الشبكة --- */
.usecases-section {
  padding: 6rem 1.5rem;
  background: var(--bg);
}

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- تصميم البطاقة (نظيف واحترافي) --- */
.usecase-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

/* التفاعل عند التحويم: ارتفاع بسيط + ظل حقيقي */
.usecase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); /* ظل ناعم جداً */
  border-color: var(--clr-primary-1); /* تلميح لوني في الإطار فقط */
}

/* --- الجزء العلوي (النصوص) --- */
.card-content {
  padding: 2.5rem 2.2rem 1.5rem;
  z-index: 2;
  background: var(--surface);
}

.usecase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--clr-accent);
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.usecase-headline {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.8rem;
  line-height: 1.25;
}

.usecase-desc {
  font-size: 1.05rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* --- الجزء السفلي (مسرح الصورة) --- */
.card-visual-stage {
  background: #f8fafc; /* خلفية رمادية فاتحة جداً لتمييز منطقة الصورة */
  padding: 2rem 2rem 0; /* حاشية من الجوانب والأعلى فقط */
  margin-top: auto; /* دفع المنطقة للأسفل */
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  height: 240px; /* ارتفاع ثابت للمنطقة */
  display: flex;
  align-items: flex-end; /* تثبيت الصورة في الأسفل */
  justify-content: center;
}

/* --- إطار المتصفح الوهمي (The Creative Part) --- */
.browser-mockup {
  width: 100%;
  background: #fff;
  border-radius: 12px 12px 0 0; /* زوايا علوية دائرية فقط */
  box-shadow: 0 -10px 40px rgba(0,0,0,0.06); /* ظل يرفع الصورة عن الخلفية */
  border: 1px solid rgba(0,0,0,0.06);
  border-bottom: none;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(10px); /* الصورة نازلة قليلاً للأسفل */
}

/* نقاط المتصفح (Mac Style Dots) */
.browser-header {
  height: 24px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  padding-left: 12px;
  gap: 6px;
}

.dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

/* الصورة نفسها */
.browser-mockup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 0 0; /* الصورة تتبع الإطار */
  opacity: 0.9;
  transition: opacity 0.3s;
}

/* --- التفاعل النهائي --- */
.usecase-card:hover .browser-mockup {
  transform: translateY(0); /* الصورة تصعد للأعلى عند التحويم */
}

.usecase-card:hover .browser-mockup img {
  opacity: 1; /* تصبح أوضح */
}

/* Responsive */
@media (max-width: 900px) {
  .usecases-grid { grid-template-columns: 1fr; }
  .usecase-card { min-height: auto; }
}


/* ========== 10. RESPONSIVE MEDIA QUERIES ========== */
@media (max-width:800px){
  .testimonial-card,.testimonials-cards{width:100%;max-width:98vw;}
  .testimonial-card{padding:1.2rem .5rem;}
}
@media (max-width:700px){
  .cta-main-title{font-size:1.2rem;}
  .cta-section-header{margin:0.7rem 0 1.1rem;}
  .cta-cards-row{grid-template-columns:1fr;gap:1.1rem;}
  .signup-features{gap:.5rem;font-size:.97rem;}
  .signup-features span{margin-bottom:.25em;}
  .use-cases-row{flex-direction:column;gap:1rem;}
}
@media (max-width:600px){
  .hero-title{font-size:2.7rem !important;}
  .shorten-form{flex-direction:column;padding:.7rem;}
  .shorten-form button{width:100%;}
  .chat-usecases-section{padding:1.1rem .3rem;max-width:99vw;}
  .chat-title{font-size:1.09rem;}
  .chat-conversation{min-height:120px;}
  .chat-bubble{font-size:.99rem;max-width:97vw;}
  .chat-msg{max-width:97vw;}
}













/* --- إعداد القسم --- */
.metrics-section {
  padding: 7rem 1.5rem;
  background: var(--surface); /* خلفية بيضاء لكسر التباين مع الأقسام الرمادية */
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* --- الشبكة (Grid) بدلاً من Flex لضبط التوزيع --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 أعمدة متساوية */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- تصميم البطاقة --- */
.metric-card {
  background: var(--bg); /* خلفية رمادية فاتحة جداً */
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.05);
  border-color: var(--clr-primary-1);
}

/* --- الأيقونة الخلفية (Watermark) --- */
.metric-bg-icon {
  position: absolute;
  top: -10px;
  right: -10px;
  opacity: 0.04; /* شفافة جداً */
  color: var(--pl-dark);
  transform: rotate(-10deg) scale(1.5);
  pointer-events: none;
  z-index: 0;
}

.metric-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- الرقم (Hero Number) --- */
.metric-number-wrapper {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.counter {
  font-size: 3.5rem;
  font-weight: 800;
  /* التدرج اللوني للنص */
  background: linear-gradient(135deg, var(--clr-accent) 30%, var(--clr-primary-1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.symbol {
  font-size: 2rem;
  font-weight: 700;
  color: var(--clr-accent); /* البرتقالي */
  margin-left: 2px;
}

/* --- الوصف --- */
.metric-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr); /* عمودين في التابلت */
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .metrics-grid {
    grid-template-columns: 1fr; /* عمود واحد في الموبايل */
  }
  .counter { font-size: 2.5rem; }
  .metric-card { padding: 2rem 1rem; min-height: 160px; }
}



/* === QR Modal – Modern Layout === */

/* Overlay */
#qrModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(8, 15, 28, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none; /* JS سيحولها flex عند الفتح */
  justify-content: center;
  align-items: center;
}

/* Box */
#qrModalBox.qr-modal {
  background: var(--surface, #fff);
  padding: 22px 22px 20px;
  border-radius: 18px;
  box-shadow: 0 20px 65px rgba(15, 23, 42, .26);
  border: 1px solid var(--border, #e5e7eb);
  max-width: 760px;
  width: min(94vw, 760px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Close button */
#qrModalClose {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--clr-muted, #64748b);
  cursor: pointer;
  padding: 3px;
  border-radius: 999px;
  transition: background .15s, color .15s, transform .12s;
}
#qrModalClose:hover {
  background: rgba(148, 163, 184, .16);
  color: var(--clr-dark, #020617);
  transform: translateY(-1px);
}

/* Header */
.qr-header {
  margin-bottom: 14px;
}
.qr-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qr-eyebrow {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--clr-muted, #64748b);
  font-weight: 600;
}
.qr-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--clr-dark, #020617);
}
.qr-sub {
  margin: 2px 0 0;
  font-size: .9rem;
  color: var(--clr-soft, #6b7280);
}

/* Main layout */
.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1.4fr);
  gap: 20px;
  align-items: flex-start;
}

/* Preview column */
.qr-preview-col {
  display: flex;
  justify-content: center;
}
.qr-preview-card {
  background: linear-gradient(150deg, #f9fafb, #eef3ff);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .16);
  min-width: 230px;
  text-align: center;
}
#qr-preview {
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
}
.qr-box {
     position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 12px 12px 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
}
.qr-box .qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 3px;
  background: #ffffff;
  border: 3px solid #ffffff; /* 👈 البوردر الأبيض حول اللوجو */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
  z-index: 2;
  object-fit: contain;
  max-width: 20%;
  max-height: 20%;
}


.qr-box img {
  width: 164px !important;
  height: 164px !important;
  border-radius: 10px;
  display: block;
}

/* Download button + hint */
.qr-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 6px;
  padding-inline: 18px;
  font-size: .92rem;
  border-radius: 999px;
}
.qr-hint {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--clr-muted, #6b7280);
}

/* Protect badge (نفس القديمة تقريبا) */
.plinkly-protect-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  margin: .7em auto 0;
  font-size: .8rem;
  color: var(--clr-primary-1,#2560ec);
  background: #f4f8ff;
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  box-shadow: 0 2px 10px #eaf1ff66;
  font-weight: 500;
  letter-spacing: .01em;
  user-select: none;
}

/* Controls column */
.qr-controls-col {
  display: flex;
  flex-direction: column;
}
.qr-options {
  background: var(--clr-bg-soft, #f8fafc);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.04);
  position: relative;
}

/* Groups */
.qr-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 12px;
  margin-bottom: 12px;
}
.qr-group-label {
  grid-column: 1 / -1;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--clr-muted, #6b7280);
  font-weight: 600;
}

/* Fields */
.qr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .87rem;
  color: var(--clr-dark, #111827);
  font-weight: 500;
}
.qr-field span {
  font-size: .8rem;
  color: var(--clr-soft, #4b5563);
}
#qr-options input[type="file"] {
  background: #fff;
  border-radius: 9px;
  border: 1px dashed rgba(148, 163, 184, .7);
  padding: 6px 8px;
  font-size: .82rem;
  cursor: pointer;
}
#qr-options input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .8);
  background: #fff;
  font-size: .85rem;
  color: var(--clr-dark, #111827);
}
#qr-options input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, .6);
  background: #fff;
  cursor: pointer;
}

/* Generate button */
.qr-generate-btn {
  width: 100%;
  margin-top: 4px;
  padding-block: 9px;
  font-size: .95rem;
  border-radius: 999px;
}

/* Overlay (non logged-in) */
.qr-options-overlay {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  text-align: center;
  color: var(--clr-dark, #0f172a);
  padding: 14px;
}
.qr-options-overlay .btn-primary,
.qr-options-overlay a.btn-primary {
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 768px) {
  #qrModalBox.qr-modal {
    width: 96vw;
    padding: 18px 14px 14px;
  }
  .qr-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qr-preview-col {
    order: -1;
  }
}

@media (max-width: 480px) {
  .qr-header {
    margin-bottom: 10px;
  }
  .qr-title {
    font-size: 1.05rem;
  }
  .qr-sub {
    font-size: .82rem;
  }
}

/* ========== FAQ SECTION ========== */
.plk-faq-section {
  /*padding: 6rem 1.5rem;*/
  background: var(--bg);
}

.faq-accordion-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.faq-item:hover {
  border-color: rgba(37, 96, 236, 0.2);
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  text-align: left; /* سيتم عكسها للـ RTL */
}

.faq-question svg {
  width: 20px;
  height: 20px;
  color: var(--pl-blue);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

/* حالة السؤال المفتوح */
.faq-question.is-open svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- أضف هذا الكود هنا --- */
.faq-answer.is-open {
  max-height: 800px; /* رقم كبير كفاية لاستيعاب أي نص براحة */
}
/* ----------------------- */

.faq-answer p {
  padding: 0 1.5rem 1.5rem;
  margin: 0;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
}

/* Micro-CTA تحت الأسئلة (فكرتك) */
.faq-micro-cta {
  max-width: 800px;
  margin: 3rem auto 0;
  padding-top: 3rem;
  border-top: 1px dashed rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.micro-cta-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
}

.micro-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  padding: 0.8rem 1.8rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform 0.2s, background 0.2s;
}

.micro-cta-btn:hover {
  background: var(--pl-blue);
  transform: translateY(-2px);
  color: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .faq-item { background: var(--surface); border-color: rgba(255,255,255,0.05); }
  .faq-question { color: #f8fafc; }
  .faq-answer p { color: #cbd5e1; }
  .faq-micro-cta { border-color: rgba(255,255,255,0.05); }
  .micro-cta-text { color: #f8fafc; }
  .micro-cta-btn { background: #f8fafc; color: #0f172a; }
}

/* Responsive & RTL */
@media (max-width: 600px) {
  .faq-micro-cta { flex-direction: column; text-align: center; }
  .faq-question { font-size: 0.95rem; padding: 1.2rem; }
}
:root[dir="rtl"] .faq-question { text-align: right; }
:root[dir="rtl"] .faq-question svg { margin-left: 0; margin-right: 1rem; }

/* أيقونات SVG موحّدة للهوم (Why / Advanced / Stats badges) */
.icon-svg{
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}

/* تأكد إن الحاويات ما تضغط الأيقونة */
.why-icon,
.adv-item-icon,
.adv-preview-icon,
.stats-badge-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* لو حاب تمنع تمددها أو تصغر في الفليكس */
.why-icon .icon-svg,
.adv-item-icon .icon-svg,
.adv-preview-icon .icon-svg,
.stats-badge-icon .icon-svg{
  flex-shrink: 0;
}



@media (max-width: 960px) {
    .why-header, .cmd-header, .how-header-minimal,
.stack-header, .testimonials-header, .usecases-header,
.metrics-header
{
    margin: 0 auto 2rem;   
    
}

.why-title, .cmd-title,.cmd-title, .how-title,
.stack-title, .testimonials-title, .metrics-title, .usecases-title, .section-title
 {
    font-size: 1.9rem;
        line-height: 1.05;
       
}

.why-desc,.cmd-subtitle,.cmd-text p,.step-content p,.stack-desc{
    font-size: 1rem;
    
}

.testimonials-cards{
    height: 310px;
    margin-bottom: 0;

}

.metrics-section{
    padding: 1.5rem 1.5rem;
}

.step-content h3, .cmd-text h3 {
    font-size: 1.5rem;
}

    
}

/* --- تنسيق الحاوية --- */
.cmd-pills-wrapper {
    display: flex;
    justify-content: center; /* في الكمبيوتر: توسيط */
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 5px;
}

/* --- تنسيق الأزرار (Pills) --- */
.cmd-pill {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1); /* إطار خفيف جداً */
    border-radius: 50px; /* حواف دائرية كاملة */
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    white-space: nowrap; /* يمنع النص من الانقسام */
    transition: all 0.25s ease; /* نعومة الحركة */
    
    /* إلغاء ستايلات المتصفح الافتراضية */
    outline: none;
    font-family: inherit;
}

/* --- حالة الهوفر --- */
.cmd-pill:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* --- الحالة النشطة (Active) --- */
.cmd-pill.active {
    background: #000; /* خلفية سوداء مثل Nav Pills الشائعة، أو غيرها للأزرق #2560ec */
    color: #fff;
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- تخصيص الجوال (Horizontal Scroll) --- */
@media (max-width: 768px) {
    .cmd-pills-wrapper {
        justify-content: flex-start; /* تبدأ من البداية للسحب */
        overflow-x: auto; /* تفعيل السحب الأفقي */
        flex-wrap: nowrap; /* منع العناصر من النزول لسطر جديد */
        padding-bottom: 10px; /* مساحة للظل */
        padding-left: 20px; /* هامش جانبي جمالي */
        padding-right: 20px;
        
        /* إخفاء شريط التمرير */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
    }
    
    .cmd-pills-wrapper::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .cmd-pill {
        flex: 0 0 auto; /* منع الأزرار من الانكماش */
        padding: 8px 20px;
        font-size: 14px;
    }
}

/* 1. الوضع الافتراضي: إخفاء جميع الشرائح */
.cmd-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 2. الوضع النشط: إظهار الشريحة المختارة فقط */
.cmd-content.active {
    display: flex; /* استخدام Flexbox لترتيب النص والصورة بجانب بعض */
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    opacity: 1;
    animation: fadeInUp 0.5s ease-out; /* حركة ظهور ناعمة */
}

/* حركة الظهور */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. تنسيق خاص للجوال لضمان عدم تداخل النص والصورة */
@media (max-width: 900px) {
    .cmd-content.active {
        flex-direction: column-reverse; /* الصورة في الأعلى والنص في الأسفل أو العكس حسب تفضيلك */
        text-align: center;
        gap: 20px;
    }
    
    .cmd-visual, .cmd-text {
        width: 100%; /* استغلال كامل العرض */
    }
    
    .cmd-visual img {
        max-width: 100%;
        height: auto;
    }
}



@media (max-width: 768px) {
  .stack-nav-wrapper {
    display: none !important; /* إخفاء القائمة والأسهم تماماً */
  }
}

/* بادينج موحد لاقسام الموقع موبايل */
@media (max-width: 960px) {
    
    .plk-bento-section,.plk-core-section,.plk-ad-section,.plk-ai-section,.plk-workflow-section,.metrics-section,.usecases-section {
        padding: 1.5rem .9rem;
    }
}