/* ===== صفحة التعريف — تستخدم نفس متغيّرات الألوان من styles.css ===== */

/* التبديل بين صفحة القطفة وصفحة التعريف */
html.is-batch .landing{ display:none; }
html:not(.is-batch) #page{ display:none; }

.landing{ width:100%; }
.landing .wrap{ max-width: 1040px; margin:0 auto; padding: 0 20px; }
.landing h2{
  font-family:'Zain','Cairo',sans-serif; font-weight:800;
  font-size: clamp(25px, 4.4vw, 34px); line-height:1.3;
  text-align:center; margin-bottom: 10px;
}
.landing .section-sub{
  text-align:center; color:var(--bark-soft); font-size:15px;
  max-width:560px; margin: 0 auto 26px;
}
.landing section{ padding: 54px 0; }
.landing .band{ background:#fff; border-block:1px solid var(--line); }

/* ---- شريط علوي ---- */
.landing .nav{
  max-width:1040px; margin:0 auto; padding: 18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.landing .brand-mark{
  display:flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--bark);
  font-family:'Zain','Cairo',sans-serif; font-weight:800; font-size:24px;
}
.landing .brand-mark svg{ width:30px; height:30px; }
.landing .nav nav{ display:flex; gap:18px; align-items:center; }
.landing .nav nav a{
  color:var(--bark-soft); text-decoration:none;
  font-size:14.5px; font-weight:600;
}
.landing .nav nav a:hover{ color:var(--amber-dark); }

/* ---- Hero ---- */
.landing .hero{
  max-width:1040px; margin:0 auto; padding: 26px 20px 60px;
  display:grid; grid-template-columns: 1fr 340px; gap: 48px; align-items:center;
}
.landing .pill{
  display:inline-block; background:var(--comb); color:var(--amber-dark);
  font-size:12.5px; font-weight:700; border-radius:999px; padding:5px 14px;
  margin-bottom:16px;
}
.landing .hero h1{
  font-family:'Zain','Cairo',sans-serif; font-weight:800;
  font-size: clamp(34px, 6.2vw, 52px); line-height:1.18; margin-bottom:16px;
}
.landing .lede{ font-size: 17px; color:var(--bark-soft); line-height:1.75; max-width:560px; }
.landing .lede strong{ color:var(--bark); font-weight:600; }
.landing .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.landing .btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; padding: 14px 26px;
  font-family:'Cairo',sans-serif; font-size:15.5px; font-weight:700;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
}
.landing .btn-primary{ background:var(--leaf); color:#fff; }
.landing .btn-primary:hover{ background:#406b43; }
.landing .btn-ghost-line{ background:transparent; border-color:var(--line); color:var(--bark); }
.landing .btn-ghost-line:hover{ border-color:var(--amber); color:var(--amber-dark); }
.landing .btn.big{ padding:16px 38px; font-size:17px; }
.landing .micro{ font-size:13px; color:var(--bark-soft); margin-top:14px; }
.landing .micro.center{ text-align:center; margin-top:22px; }

/* موبايل بمعاينة حيّة */
.landing .hero-demo{ justify-self:center; }
.landing .phone{
  position:relative; width:320px; height:640px;
  background:#2B1A0C; border-radius:40px; padding:11px;
  box-shadow: 0 22px 50px rgba(58,36,17,.28);
}
.landing .phone-notch{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:92px; height:18px; border-radius:11px; background:#2B1A0C; z-index:2;
}
.landing .phone iframe{
  width:100%; height:100%; border:0; border-radius:30px;
  background:var(--cream); display:block;
}
.landing .demo-cap{ text-align:center; font-size:12.5px; color:var(--bark-soft); margin-top:12px; }

/* ---- كروت ---- */
.landing .cards{ display:grid; gap:16px; margin-top:26px; }
.landing .cards.three{ grid-template-columns: repeat(3, 1fr); }
.landing .cards.two{ grid-template-columns: repeat(3, 1fr); }
.landing .card{
  background:var(--cream); border:1px solid var(--line);
  border-radius:15px; padding: 22px 20px;
}
.landing .band .card{ background:var(--cream); }
.landing .card h3{
  font-family:'Zain','Cairo',sans-serif; font-weight:700;
  font-size:19px; margin-bottom:7px;
}
.landing .card p{ font-size:14.5px; color:var(--bark-soft); line-height:1.7; }

/* ---- الخطوات ---- */
.landing .steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; }
.landing .steps li{ text-align:center; padding:0 8px; }
.landing .steps .num{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:0 auto 14px;
  border-radius:50%; background:var(--amber); color:#fff;
  font-family:'Zain','Cairo',sans-serif; font-weight:800; font-size:24px;
}
.landing .steps h3{ font-family:'Zain','Cairo',sans-serif; font-weight:700; font-size:20px; margin-bottom:6px; }
.landing .steps p{ font-size:14.5px; color:var(--bark-soft); line-height:1.7; }

/* ---- الأسعار ---- */
/* باقة واحدة في النص */
.landing .plans.single{ display:flex; justify-content:center; margin-top:26px; }
.landing .plans.single .plan{
  width:100%; max-width: 440px;
  background:#fff; border-color:var(--amber);
  box-shadow:0 8px 26px rgba(201,124,12,.13);
  padding: 30px 28px;
  text-align:center;
}
.landing .plans.single .plan ul{ text-align:start; margin-bottom:24px; }
.landing .plans.single .plan .btn{ width:100%; }
.landing .plan-note{ font-size:14px; color:var(--bark-soft); margin-bottom:20px; }
.landing .plan{ display:flex; flex-direction:column; position:relative; }
.landing .plan .price{
  font-size:15px; color:var(--bark-soft); margin:10px 0 16px;
}
.landing .plan .price b{
  font-family:'Zain','Cairo',sans-serif; font-weight:800;
  font-size:40px; color:var(--bark); letter-spacing:.5px;
}
.landing .plan .price span{ font-size:14px; }
.landing .plan ul{ list-style:none; display:grid; gap:9px; }
.landing .plan li{ font-size:14.5px; color:var(--bark-soft); padding-inline-start:22px; position:relative; }
.landing .plan li::before{
  content:"✓"; position:absolute; inset-inline-start:0;
  color:var(--leaf); font-weight:700;
}
.landing .plan.featured{
  border-color:var(--amber); background:#fff;
  box-shadow:0 8px 26px rgba(201,124,12,.13);
}
.landing .plan .tag{
  position:absolute; inset-block-start:-12px; inset-inline-start:50%;
  transform:translateX(50%);
  background:var(--amber); color:#fff;
  font-size:11.5px; font-weight:700; border-radius:999px; padding:4px 13px;
  white-space:nowrap;
}

/* ---- الأسئلة ---- */
.landing .faq{ max-width:720px; margin:26px auto 0; display:grid; gap:10px; }
.landing .faq details{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding: 15px 18px;
}
.landing .faq summary{
  cursor:pointer; font-weight:600; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.landing .faq summary::-webkit-details-marker{ display:none; }
.landing .faq summary::after{ content:"+"; color:var(--amber); font-size:20px; font-weight:700; }
.landing .faq details[open] summary::after{ content:"−"; }
.landing .faq details p{ font-size:14.5px; color:var(--bark-soft); line-height:1.75; margin-top:10px; }

/* ---- خاتمة ---- */
.landing .final{ background:var(--comb); text-align:center; }
.landing .final h2{ margin-bottom:8px; }
.landing .final p{ color:var(--bark-soft); font-size:16px; margin-bottom:24px; }

.landing .foot{
  text-align:center; padding: 30px 20px 44px;
  font-size:14px; color:var(--bark-soft);
  border-top:1px solid var(--line);
}
.landing .foot .micro{ margin-top:7px; }
.landing .foot a{ color:var(--amber-dark); }

/* ---- تابلت وموبايل ---- */
@media (max-width: 900px){
  .landing .hero{ grid-template-columns:1fr; gap:34px; text-align:center; padding-bottom:40px; }
  .landing .lede{ margin-inline:auto; }
  .landing .cta-row{ justify-content:center; }
  .landing .cards.three, .landing .cards.two{ grid-template-columns:repeat(2,1fr); }
  .landing .steps{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width: 620px){
  .landing section{ padding:40px 0; }
  .landing .cards.three, .landing .cards.two{ grid-template-columns:1fr; }
  .landing .phone{ width:280px; height:560px; }
  .landing .nav nav a[href="#pricing"]{ display:none; }
  .landing .plan.featured{ order:-1; }
}

/* ---- عرض الستيكرات ---- */
.landing .sticker-show{
  display:flex; flex-wrap:wrap; gap:26px;
  align-items:flex-start; justify-content:center; margin-top:30px;
}
.landing .sticker-show figure{ margin:0; text-align:center; }
.landing .sticker-stage{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(58,36,17,.07);
  overflow:auto;
}
.landing .sticker-show figcaption{
  font-size:13.5px; color:var(--bark-soft); margin-top:11px;
}
.landing .sticker-show figcaption b{ color:var(--bark); font-weight:700; }
/* الشريط أعرض من الشاشة على الموبايل — نصغّره بـzoom (بيغيّر المساحة فعليًا
   مش بس الشكل) عشان ما يعملش تمرير أفقي للصفحة */
.landing .sticker-show figure{ max-width:100%; }
.landing .sticker-stage{ max-width:100%; }
@media (max-width: 980px){
  .landing .sticker-show .wide .sticker-stage{ padding:16px 12px; }
  .landing .sticker-show .wide .label-wrap{ zoom: .62; }
}
@media (max-width: 720px){
  .landing .sticker-show .wide .label-wrap{ zoom: .40; }
}
@media (max-width: 480px){
  .landing .sticker-show .wide .label-wrap{ zoom: .32; }
}