/* =========================================================
   علامة اللوغو الخلفية + تصميم الجوال (سحب أفقي، صفحة أقصر)
   ========================================================= */

/* ---------- جزء من اللوغو كخلفية بدل المربعات ---------- */
.deal,.cc,.cta-band{position:relative;overflow:hidden;isolation:isolate}
.wm-mark{position:absolute;z-index:-1;pointer-events:none;fill:#fff;opacity:.07;width:300px;height:270px;inset-inline-start:24%;top:50%;transform:translateY(-50%) rotate(-14deg)}
.cc .wm-mark{width:360px;height:323px;inset-inline-start:auto;inset-inline-end:-90px;top:auto;bottom:-120px;transform:rotate(-14deg)}
.cta-band .wm-mark{inset-inline-start:auto;inset-inline-end:-60px;width:320px;height:287px}
.deal > *:not(.wm-mark),.cc > *:not(.wm-mark),.cta-band > *:not(.wm-mark){position:relative}

/* ---------- ظهور الأقسام: بدون ضبابية وبدون انتظار ---------- */
.js .rv{filter:none!important;transform:translateY(18px)!important;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)!important}
.js .rv.in{transform:none!important}
.js .hero-in{filter:none!important}

/* =========================================================
   الجوال
   ========================================================= */
@media (max-width:640px){
  section{padding-top:44px}
  .sec-head{margin-bottom:16px;align-items:center}
  .sec-head p{display:none}
  .sec-head .link-more{padding:8px 12px;font-size:13px}

  /* الهيرو أقصر: البحث موجود في الأعلى */
  .hero{padding-top:12px}
  .hero-card{border-radius:26px}
  .hero-search{display:none!important}
  .hero-content{padding:34px 20px 22px!important}
  .hero .eyebrow{font-size:11.5px;padding:6px 12px}
  .hero h1{margin:16px 0 10px}
  .hero p.lead{font-size:14px;line-height:1.7}
  .hero-ctas{margin-top:20px;gap:8px}
  .hero-ctas .btn{height:46px;font-size:14px}
  .hero-stats{position:relative!important;inset:auto!important;width:auto!important;margin:0 14px 14px;padding:14px 16px!important;display:flex;align-items:center;gap:12px}
  .hero-stats h4,.hero-stats p{display:none}
  .hero-stats .row{margin:0;flex:1}
  .hero-stats .big{font-size:28px!important}

  /* ---------- السحب الأفقي ---------- */
  .swipe{display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px!important;margin-inline:-16px;padding:6px 16px 10px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{flex:0 0 var(--sw,82%);scroll-snap-align:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;animation:none!important}
  .swipe > .far{transform:scale(.93)!important;opacity:.6}
  .swipe.cats > *{--sw:64%}
  .swipe.why > *{--sw:70%}
  .swipe.shows > *{--sw:86%}
  .swipe.bank-list > *{--sw:88%}
  .swipe.perf > *{--sw:44%}
  .swipe.steps-row > *{--sw:78%}
  .swipe.bento > *{--sw:46%;min-height:150px}
  .swipe.bento > .big{--sw:86%;grid-column:auto!important}

  /* مؤشر السحب */
  .sw-ui{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
  .sw-bar{position:relative;width:96px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
  .sw-bar i{position:absolute;top:0;bottom:0;inset-inline-start:0;border-radius:4px;background:var(--primary);width:var(--w,30%);transform:translateX(calc(var(--x,0) * -1))}
  .sw-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px;text-align:center}
  .sw-hint{position:absolute;z-index:5;top:50%;inset-inline-end:22px;transform:translateY(-50%);display:flex;align-items:center;gap:6px;background:rgba(14,17,38,.86);color:#fff;font-size:12.5px;font-weight:500;padding:8px 12px;border-radius:12px;pointer-events:none;opacity:0;animation:swHint 3.2s .4s ease forwards;backdrop-filter:blur(6px)}
  .sw-hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;animation:swHand 1s ease-in-out 3}
  @keyframes swHint{10%,75%{opacity:1}100%{opacity:0}}
  @keyframes swHand{50%{transform:translateX(-8px)}}
  .sw-wrap{position:relative}

  /* كروت السيارات أنظف في السحب */
  .swipe .car{padding:8px}
  .swipe .car-desc{display:none}
  .swipe .car-specs{font-size:12px;padding:10px 0}

  /* الخطوات والرأي */
  .steps-grid{gap:12px}
  .steps{padding:22px 18px}
  .step{padding:14px 0}
  .quote{min-height:300px;padding:24px}
  .quote blockquote{font-size:17px}

  /* لماذا القاسم: كروت أصغر */
  .why-item{padding:20px 18px}
  .why-item .ic{width:46px;height:46px;margin-bottom:14px}

  /* الحاسبة: أكثر اختصاراً */
  .calc-wrap{padding:10px;gap:10px}
  .calc-form > p{display:none}
  .ctl{margin-top:18px}

  /* مركز التواصل */
  .cc-main,.cc-depts{padding:22px 18px}
  .cc-meta{gap:10px;font-size:12px}

  /* صفحة السيارة */
  .feat-list li.extra{display:none}
  .banks{padding:16px}
  .bank{padding:14px 14px 16px;grid-template-columns:auto 1fr auto!important}
}
@media (max-width:380px){
  .swipe > *{--sw:86%}
  .swipe.cats > *{--sw:72%}
  .swipe.perf > *{--sw:50%}
}
@media (prefers-reduced-motion:reduce){.sw-hint{display:none}.swipe > *{transition:none}}
@media (max-width:380px){.swipe{margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}}
.deal-img{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06))!important}
@media (max-width:640px){
  .swipe.offer-cards > *{--sw:86%}
  .swipe.steps-h > *{--sw:72%}
  .swipe.blog-grid > *{--sw:80%}
  .swipe#finBanks > *{--sw:88%}
}