:root{
      --nav-pill-bg:#d9f2f9;
      --brand:#0e2a66;
      --primary:#16256F;        /* CTA الأزرق الغامق */
      --hero-grad-start:#ff5ec9;/* وردي */
      --hero-grad-end:#8a3cfb;  /* بنفسجي */
       --chip-bg:#e9f0ff;
  --chip-txt:#0b284f;
  --chip-gap: .9rem;
  --marquee-speed: 48s;   /* زوّد/قلّل للسرعة */
  
  /* Dynamic Variables */
  --hero-bg-image: url('../images/product-bg.png');
  --preview-frame-1: #4c0d83;
  --preview-frame-2: #d931b3;
  --preview-frame-3: #55c8ff;
  --preview-frame-4: #3b6cff;
  --preview-frame-5: #41e0c1;
    }

 
    /* ---- Hero ---- */
.hero {
    padding-top: 7.5rem;
    background-color: #f5f5f5;
    background-image: var(--hero-bg-image);
    background-size: contain;
    color: #fff;
    position: relative;
    overflow: hidden; /* مهم عشان القص */
}

/* أو بطريقة القص الحر */
.hero .container{ overflow: visible; }
.hero .lead{ opacity:.9; }
.hero-cta{
    background: var(--primary);
    color:#fff; border:0; border-radius:999px;
    padding:.7rem 1.4rem; font-weight:700;
    box-shadow:0 10px 26px rgba(22,37,111,.25);
    text-decoration: none;
    display: inline-block;
}
.hero-cta:hover{ filter:brightness(.95); }

/* صورة اليمين */
.hero-figure{
    position:relative;
    min-height: 340px;
}
.hero-figure img{
    width:100%; height:auto; object-fit:cover;
    max-width: 540px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

@media (min-width:992px){
    .hero{ padding-top: 9rem; padding-bottom: 4rem; }
}
@media (max-width: 991.98px){
    .nav-pill{ border-radius: 20px; }
    .hero-figure{ min-height: 260px; margin-top: 1.25rem; }
    .hero .display-4{ font-size: 2.1rem; }
}

/*** build-with-care ***/
.feature-section{
    background:#f5f5f5;                 /* خلفية الصفحة العادية */
}
.feature-card{
    background:#f5f5f5;
    border-radius: 24px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    padding: 1.5rem;
}
.feature-card .app-logo{
    width:96px; height:96px; object-fit:contain;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.feature-card h5{
    color:#0b1f44; font-weight:800;
}
.feature-card p{
    color:#4b5563; font-size:.95rem; line-height:1.55;
}
.btn-deep{
    background: var(--primary);
    color:#fff; border:0; border-radius:999px; font-weight:700;
}
.btn-deep:hover{ filter:brightness(.95); }
.btn-soft{
    background:#eef3ff; color:#0b1f44; border:0; border-radius:999px; font-weight:600;
}

@media (max-width: 775px) {
    .build-with-care img
    {
        width: 80px !important
    }
    .hero
    {
        background-size: cover;
        height: 70vh !important;
    }
}

.chips-marquee{
  display: grid;
  gap: .75rem;
  overflow: hidden;
}

.chips-track{
  display: inline-flex;
  gap: var(--chip-gap);
  white-space: nowrap;
  will-change: transform;
  padding-block: .25rem;
}

.chips-track--left{
  animation: scroll-left var(--marquee-speed) linear infinite;
}
.chips-track--right{
  animation: scroll-right var(--marquee-speed) linear infinite;
  opacity: .96;
}

/* Pause on hover (على التراك كله أو على شريحة واحدة) */
.chips-marquee:hover .chips-track,
.chips-track:hover{
  animation-play-state: paused;
}
.chip:hover{
  transform: translateY(-2px);
}
.build-with-care
{
       background: #f5f5f5;
}

/* Chip look */
.chip{
    background: #f5f5f5;
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-txt);
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
  user-select: none;
  cursor: default;
}

/* ألوان لطيفة اختيارية */
.chip--pink   { background: #f7d1f3; color:#43284d; }
.chip--sky    { background: #cfefff; color:#08304a; }
.chip--purple { background: #e0d0ff; color:#2f1b55; }
.chip--blue   { background: #cfe0ff; color:#0b254f; }

/* Keyframes */
@keyframes scroll-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* لأننا مكررين المحتوى */
}
@keyframes scroll-right{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* تقليل الحركة لمن يفضّل ذلك */
@media (prefers-reduced-motion: reduce){
  .chips-track{ animation: none; }
}


 /* ===== Rotor styles (similar to products) ===== */
 #preview
 {
    overflow: hidden;
 }
  #preview .preview-stage{
    min-height: 260px;
    display:flex;
    flex-wrap:nowrap;
    gap:2rem;
    justify-content:center;
    align-items:flex-end;
    user-select:none;
    touch-action: pan-y; /* نسمح بالسحب الأفقي */
  }

  /* كارت/تابلت */
  #preview .preview-card{
    position:relative;
    flex:0 0 clamp(240px, 30vw, 360px);
    height: clamp(180px, 22vw, 240px);
    border-radius: 24px;
    background:#fff;
    overflow:hidden;
    transition: transform .35s ease, box-shadow .35s ease, opacity .25s ease;
    will-change:transform;
    border: 12px solid var(--frame, var(--preview-frame-1));
    box-shadow: 0 12px 30px rgba(0,0,0,.14), inset 0 0 0 2px rgba(0,0,0,.04);
  }
  #preview .preview-card img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* تموضع/إحساس الدوران */
  #preview .is-center{
    z-index:3; transform: translateY(0) scale(1.04);
    box-shadow: 0 18px 46px rgba(0,0,0,.18), inset 0 0 0 2px rgba(0,0,0,.04);
  }
  #preview .is-left{
    z-index:2; transform: translateY(16px) translateX(-18px) rotate(-6deg) scale(.94);
  }
  #preview .is-right{
    z-index:2; transform: translateY(16px) translateX(18px) rotate(6deg) scale(.94);
  }

  /* أزرار */
  #preview .preview-controls .btn{
    width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  }
  #preview .preview-controls .btn-light-subtle{
    background:#eef2f7; border-color:transparent;
  }

  /* Mobile tweaks */
  @media (max-width: 575.98px){
    #preview .preview-stage{ gap: 1rem; }
    #preview .preview-card{
      flex: 0 0 86vw;
      width: 86vw;
      height: min(56vw, 280px);
      border-width: 10px; border-radius: 20px;
    }
    #preview .is-left, #preview .is-right{
      transform: translateY(10px) scale(.96);  /* نقلل الميل للحفاظ داخل الشاشة */
    }
  }

  /* حركات أكثر نعومة + شفافية للجوانب */
#preview .preview-card{
  transition:
    transform .45s cubic-bezier(.22,.9,.22,1),
    box-shadow .45s cubic-bezier(.22,.9,.22,1),
    opacity .35s ease;
  opacity:.88;
}
#preview .is-center{ opacity:1; }

/* نبضة بسيطة لما الكارت يوصل للوسط */
@keyframes popIn {
  0%   { transform: translateY(0) scale(.98); }
  60%  { transform: translateY(-2px) scale(1.06); }
  100% { transform: translateY(0) scale(1.04); }
}
#preview .preview-card.pop { animation: popIn .28s ease-out; }

/* المنصة نفسها كما لديك … */

/* التابلت (الفريم متغير بالمتغير --frame) */
#preview .preview-card{
  position:relative;
  flex:0 0 clamp(240px, 30vw, 360px);
  height: clamp(180px, 22vw, 240px);
  border-radius: 24px;
  /* الفريم الملون */
  border: 12px solid var(--frame, var(--preview-frame-1));
  background: #fff;
  overflow:hidden;
  transition: transform .45s cubic-bezier(.22,.9,.22,1),
              box-shadow .45s cubic-bezier(.22,.9,.22,1),
              opacity .35s ease,
              border-color .25s ease;       /* مهم لتغيّر اللون */
  box-shadow: 0 12px 30px rgba(0,0,0,.14), inset 0 0 0 2px rgba(0,0,0,.04);
  opacity:.88;
}
#preview .is-center{ z-index:3; transform: translateY(0) scale(1.04); opacity:1;
  box-shadow: 0 18px 46px rgba(0,0,0,.18), inset 0 0 0 2px rgba(0,0,0,.04);
}
#preview .is-left{  z-index:2; transform: translateY(16px) translateX(-18px) rotate(-6deg) scale(.94); }
#preview .is-right{ z-index:2; transform: translateY(16px) translateX(18px)  rotate(6deg)  scale(.94); }

/* الشاشة الداخلية (إطار أسود خفيف + ظل) */
#preview .preview-card .screen{
  position:absolute; inset:12px;           /* حواف داخلية */
  border-radius: 16px;
  background:#fafafa;                       /* محتوى الشاشة (مكان الصورة لو عايز) */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}

/* نقاط/مربعات الألوان */
#preview .preview-dots{
  display:flex; justify-content:center; gap:.5rem; margin-top:1rem;
}
#preview .preview-dot{
  width:16px; height:16px; border-radius:4px; cursor:pointer;
  transition: transform .2s ease, outline-color .2s ease, box-shadow .2s ease;
  outline: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
#preview .preview-dot.active{
  transform: scale(1.15);
  outline-color: currentColor;  /* يديها تحديد بنفس اللون */
}
#preview .preview-dot:hover{ transform: scale(1.08); }

@media (max-width:575.98px){
  #preview .preview-card{
    flex: 0 0 86vw; width:86vw; height:min(56vw, 280px);
    border-width:10px; border-radius:20px;
  }
  #preview .preview-card .screen{ inset:10px; border-radius:14px; }
}

/* ========== Book ========== */
#sawti-story
{
    background-color: #F5F5F5;
}
.story-book{
  max-width: 920px;
  margin-inline: auto;
  user-select: none;
}
.book-stage{
  position: relative;
  margin-inline: auto;
  width: min(92vw, 920px);
  aspect-ratio: 16/10;               /* يناسب صورك الطويلة؛ عدّل لو حبيت */
  border-radius: 16px;
  overflow: hidden;
  perspective: 1600px;               /* مهم لانيميشن 3D */
}

/* الصفحات الثابتة يمين ويسار */
/* قبل: inset:0; */
.page{
  position:absolute;
  top:0; bottom:0;          /* ثبّت الرأس والقدم فقط */
  width:50%;
  height:100%;
  object-fit: contain;
  backface-visibility: hidden;
}

/* ضروري جداً: الغي الطرف المقابل */
.page-left{  left:0;  right:auto; border-right:1px solid rgba(0,0,0,.08); }
.page-right{ right:0; left:auto;  border-left: 1px solid rgba(0,0,0,.08); }


/* ورقة القلب */
.leaf{
  position:absolute;
  inset:0;
  width:50%;
  height:100%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* الوجه الأمامي والخلفي للورقة */
.leaf .side{
  position:absolute; inset:0;
  width:100%; height:100%;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  border-left: 1px solid rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* انيميشن القلب يمين←يسار (Next) */
.turn-from-right{
  right:0;                            /* الورقة تبدأ من اليمين */
  transform-origin: left center;
  animation: flipRight 800ms ease both;
}

/* انيميشن القلب يسار→يمين (Prev) */
.turn-from-left{
  left:0;                             /* الورقة تبدأ من الشمال */
  transform-origin: right center;
  animation: flipLeft 800ms ease both;
}

@keyframes flipRight{
  0%   { transform: rotateY(0deg);      }
  45%  { transform: rotateY(-90deg);    }
  100% { transform: rotateY(-180deg);   }
}
@keyframes flipLeft{
  0%   { transform: rotateY(0deg);      }
  45%  { transform: rotateY(90deg);     }
  100% { transform: rotateY(180deg);    }
}

/* أزرار */
.book-controls{
  display:flex; gap:.75rem; justify-content:center; margin-top:1rem;
}
.book-controls .btn{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
}
.book-controls .btn-light-subtle{ background:#eef2f7; border-color:transparent; }

/* موبايل: صفحة واحدة تظهر (يمين) والقلب يبدلها */
@media (max-width: 575.98px){
  
  .leaf{ width:100%; }
  .turn-from-right{ transform-origin: left center; }
  .turn-from-left { transform-origin: right center; }
}

/* مساعد للوصولية */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* زر أيقونة عام */
.btn-icon{
  width:56px; height:56px;
  border:none; background:transparent no-repeat center / contain;
  display:inline-block; cursor:pointer; user-select:none;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

/* اربط صور الأسهم */
.book-prev{ background-image:url('../img/book-l.png'); }
.book-next{ background-image:url('../img/book-r.png'); }

/* تأثيرات بسيطة */
.btn-icon:hover{ transform: translateY(-1px); }
.btn-icon:active{ transform: translateY(0); }
.btn-icon:disabled{
  opacity:.35; cursor:not-allowed; filter:grayscale(1);
}

/* (اختياري) موضع الأزرار */
.book-controls{
  display:flex; gap:.75rem; justify-content:center; margin-top:1rem;
}