/* Carousel slide template — 1080×1350, black + gold #f8b604, white text. */
.slide {
  --gold: #f8b604;
  --gold-soft: rgba(248, 182, 4, .14);
  --ink: #fff;
  --muted: rgba(255, 255, 255, .62);
  --card: #121212;
  --line: rgba(255, 255, 255, .09);
  --font-display: 'Alexandria', 'Plex Arabic', system-ui, sans-serif;
  --font-body: 'Plex Arabic', 'Alexandria', system-ui, sans-serif;
  position: relative;
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  direction: rtl;
  font-family: var(--font-body);
  box-sizing: border-box;
  flex: none;
}
.slide *, .slide *::before, .slide *::after { box-sizing: border-box; }
.slide .glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 700px at 85% -10%, rgba(248, 182, 4, .20), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, rgba(248, 182, 4, .10), transparent 60%);
}
.slide .candles { position: absolute; inset: auto 0 0 0; height: 46%; opacity: .16; pointer-events: none; }

/* top bar */
.slide .top {
  position: absolute; top: 64px; right: 80px; left: 80px; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  font: 500 30px/1 var(--font-body); color: var(--muted); direction: ltr;
}
.slide .top .handle { color: var(--ink); letter-spacing: .3px; display: flex; align-items: center; gap: 14px; }
.slide .top .handle i { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); display: inline-block; }
.slide .top .count { font-variant-numeric: tabular-nums; }

/* bottom progress */
.slide .bottom {
  position: absolute; bottom: 64px; right: 80px; left: 80px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font: 500 28px/1 var(--font-body); color: var(--muted);
}
.slide .dots { display: flex; gap: 10px; }
.slide .dots b { width: 14px; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .22); }
.slide .dots b.on { width: 44px; background: var(--gold); }
.slide .swipe { color: var(--gold); font-weight: 700; }

.slide .body { position: absolute; inset: 170px 80px 150px 80px; z-index: 2; display: flex; flex-direction: column; }
.slide .kicker {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px; border-radius: 999px;
  background: var(--gold); color: #000; font: 800 30px/1 var(--font-display);
}
.slide h1, .slide h2 { font-family: var(--font-display); margin: 0; letter-spacing: -.5px; }
.slide h2 { font-weight: 800; font-size: 66px; line-height: 1.25; }
.slide .hl { color: var(--gold); }
.slide p { margin: 0; }

/* cover */
.s-cover .photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.s-cover .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-cover .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.92) 72%, #000 100%);
}
.s-cover .body { justify-content: flex-end; gap: 34px; }
.s-cover h1 { font-weight: 900; font-size: 100px; line-height: 1.32; text-wrap: balance; }
.s-cover .sub { font: 500 40px/1.5 var(--font-body); color: rgba(255,255,255,.82); max-width: 860px; }
.s-cover.no-photo .body { justify-content: center; }
.s-cover.no-photo h1 { font-size: 112px; }
.slide .credit {
  position: absolute; z-index: 3; left: 80px; bottom: 112px;
  font: 400 20px/1 var(--font-body); color: rgba(255,255,255,.5); direction: ltr;
}

/* points */
.s-points .body { gap: 56px; justify-content: center; }
.s-points ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.s-points li {
  display: flex; gap: 30px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 40px; padding: 34px 40px;
  font: 500 40px/1.45 var(--font-body);
}
.s-points li .n {
  flex: none; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold); font: 800 38px/1 var(--font-display);
}

/* compare */
.s-compare .body { gap: 56px; justify-content: center; }
.s-compare .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.s-compare .col { background: var(--card); border: 1px solid var(--line); border-radius: 44px; padding: 52px 40px; display: flex; flex-direction: column; gap: 34px; }
.s-compare .col.win { border: 2px solid var(--gold); background: linear-gradient(180deg, rgba(248,182,4,.10), rgba(248,182,4,.02)); }
.s-compare .col h3 { margin: 0; font: 800 44px/1.2 var(--font-display); }
.s-compare .col.win h3 { color: var(--gold); }
.s-compare .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.s-compare .col li { font: 500 38px/1.45 var(--font-body); display: flex; gap: 16px; }
.s-compare .col li::before { content: '✕'; color: rgba(255,255,255,.4); font-weight: 700; }
.s-compare .col.win li::before { content: '✓'; color: var(--gold); }

/* image */
.s-image .body { gap: 40px; }
.s-image .frame { flex: 1; border-radius: 44px; overflow: hidden; background: #111; border: 1px solid var(--line); position: relative; }
.s-image .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-image .txt { font: 500 40px/1.5 var(--font-body); color: rgba(255,255,255,.88); }

/* text / statement */
.s-text .body { justify-content: center; gap: 44px; }
.s-text .quote { font: 900 140px/1 var(--font-display); color: var(--gold); height: 80px; }
.s-text .big { font: 700 64px/1.45 var(--font-display); text-wrap: pretty; }

/* cta */
.s-cta .body { justify-content: center; gap: 46px; }
.s-cta h2 { font-size: 80px; font-weight: 900; }
.s-cta .q { font: 500 42px/1.5 var(--font-body); color: rgba(255,255,255,.85); }
.s-cta .kw {
  display: flex; align-items: center; gap: 28px; padding: 40px 44px; border-radius: 44px;
  background: var(--gold); color: #000;
}
.s-cta .kw .ic { width: 92px; height: 92px; border-radius: 28px; background: #000; display: grid; place-items: center; flex: none; }
.s-cta .kw .ic svg { width: 48px; height: 48px; }
.s-cta .kw .t1 { font: 500 32px/1.3 var(--font-body); }
.s-cta .kw .t2 { font: 900 50px/1.25 var(--font-display); }
.s-cta .row { display: flex; gap: 22px; }
.s-cta .pill { flex: 1; display: flex; align-items: center; gap: 16px; padding: 28px 32px; border-radius: 32px; background: var(--card); border: 1px solid var(--line); font: 500 30px/1.3 var(--font-body); }
.s-cta .pill span { color: var(--gold); font-size: 38px; }
.s-cta .risk { font: 400 24px/1.5 var(--font-body); color: rgba(255,255,255,.45); }