/* ============ HERO ============ */
.hero{text-align:center;padding:48px 20px 20px;max-width:720px;margin:0 auto}
.hero-tag{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--teal) 12%,white);border:1px solid color-mix(in srgb,var(--teal) 30%,white);
  border-radius:99px;padding:5px 14px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-bottom:16px}
[dir="rtl"] .hero-tag{letter-spacing:.03em}
.hero h1{font-size:clamp(28px, 4vw, 42px);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin-bottom:12px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p{font-size:14px;color:var(--slate);max-width:540px;margin:0 auto;line-height:1.7}

/* ============ CAROUSEL CONTAINER ============ */
.carousel-section{width:min(1100px, calc(100% - 40px));margin:30px auto 50px;position:relative}
.carousel-viewport{overflow:hidden;border-radius:20px;box-shadow:var(--sh-lg);background:var(--card);border:1px solid var(--line)}
.carousel-track{display:flex;transition:transform .55s cubic-bezier(.25,.8,.25,1);will-change:transform}
/* In RTL, flex naturally flows right-to-left, but we use transform percentages.
   The JS handles direction-aware translation. */

.slide{min-width:100%;display:grid;grid-template-columns:1fr 1fr;min-height:420px}

/* Slide Visual Side */
.slide-vis{position:relative;overflow:hidden;display:grid;place-items:center;padding:40px;
  background:linear-gradient(135deg,var(--sv-bg-1),var(--sv-bg-2))}
.slide-vis::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.05) 0 10px,transparent 10px 26px);pointer-events:none}
.slide-vis svg{width:180px;height:180px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.15));animation:floatVis 5s ease-in-out infinite}
@keyframes floatVis{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.slide-badge{position:absolute;top:24px;inset-inline-start:24px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:5px 14px;font-size:10px;font-weight:800;color:#fff;letter-spacing:.1em;text-transform:uppercase}
[dir="rtl"] .slide-badge{letter-spacing:.02em}

/* Slide Content Side */
.slide-content{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.slide-num{font:900 64px/1 var(--f-disp);color:color-mix(in srgb,var(--sc-accent) 15%,white);margin-bottom:8px;user-select:none}
.slide-content h2{font-size:24px;font-weight:800;line-height:1.25;margin-bottom:12px;color:var(--ink)}
.slide-content p{font-size:13px;color:var(--slate);line-height:1.75;margin-bottom:20px}
.slide-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.slide-features li{display:flex;align-items:flex-start;gap:10px;font-size:12px;font-weight:600;color:var(--ink2)}
.slide-features li .check{flex:none;width:20px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--sc-accent) 14%,white);
  color:var(--sc-accent);display:grid;place-items:center;font-size:11px;margin-top:1px}
.slide-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;font-weight:800;font-size:12.5px;
  background:var(--sc-accent);color:#fff;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--sc-accent) 60%,transparent);transition:.22s;align-self:flex-start;width:fit-content}
.slide-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.slide-cta svg{width:14px;height:14px}
/* Flip arrow in RTL */
[dir="rtl"] .slide-cta svg{transform:scaleX(-1)}

/* Carousel Controls */
.car-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.car-dots{display:flex;gap:8px}
.car-dot{width:10px;height:10px;border-radius:50%;background:var(--line);border:2px solid transparent;transition:.3s;cursor:pointer}
.car-dot.active{background:var(--teal);transform:scale(1.25)}
.car-dot:hover:not(.active){background:var(--mist)}
.car-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;
  color:var(--slate);transition:.2s;box-shadow:var(--sh)}
.car-arrow:hover{border-color:var(--teal);color:var(--teal);transform:scale(1.08)}
.car-arrow svg{width:16px;height:16px}
/* Mirror arrows in RTL */
[dir="rtl"] .car-arrow svg{transform:scaleX(-1)}

/* Progress bar (auto-play indicator) */
.car-progress{width:100%;height:3px;background:var(--line-soft);border-radius:3px;margin-top:14px;overflow:hidden}
.car-progress-bar{height:100%;background:var(--teal);border-radius:3px;width:0%;transition:width .1s linear}

/* ============ RESPONSIVE ============ */
@media(max-width:820px){
  .slide{grid-template-columns:1fr;min-height:auto}
  .slide-vis{padding:30px;min-height:220px}
  .slide-vis svg{width:120px;height:120px}
  .slide-content{padding:28px 24px}
  .slide-num{font-size:48px}
  .slide-content h2{font-size:20px}
}
@media(max-width:520px){
  .hero h1{font-size:26px}
  .hero p{font-size:12.5px}
  .slide-vis{min-height:180px;padding:24px}
  .slide-content{padding:22px 18px}
  .top-right .btn-login span,.top-right .btn-reg span{display:none}
  .top-right .btn-login::after{content:"→"}
  .top-right .btn-reg::after{content:"+"}
}