/* ركاز · مزايا الموظفين — الألوان والخطوط والتنسيق والأنيميشن. المسرح 1920×1080 ويتكبّر حسب الشاشة. */
/* ─── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --dark: #104631;
  --dark-2: #155b3e;
  --dark-3: #052f1d;
  --cream: #f3fcf6;
  --paper: #f3f4f6;
  --paper-2: #fcfcfd;
  --card: #ffffff;
  --ink: #111927;
  --muted: #4d5761;
  --line: #d2dbd6;
  --red: #1b8354;
  --red-ink: #074d31;
  --gold: #f7d54d;
  --gold-2: #dba102;
  --gold-3: #b87b02;
  --pink: #e5f5ec;
  --sand: #fef6dc;
  --green: #1b8354;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --fit: 1;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  background: #052b1c;
  color: var(--ink);
  font-family: 'IBM Plex Arabic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
ul, ol { list-style: none; }
svg { overflow: visible; }
.defs { position: absolute; width: 0; height: 0; }

/* ─── Stage: 1920×1080, scaled to the window ───────────────────────────── */
.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--fit));
  overflow: hidden;
  box-shadow: 0 40px 120px -40px rgb(0 0 0 / 0.6);
}
.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}
.slide.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 320ms ease;
}
/* Leaving keeps its finished frame while it fades, so nothing snaps back underneath. */
.slide.is-leaving {
  visibility: visible;
  opacity: 0;
  transform: scale(0.992);
  filter: blur(3px);
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
  z-index: 0;
}
.slide.is-on { z-index: 1; }
.abs { position: absolute; }
.dark { background: radial-gradient(1200px 900px at 26% 46%, #155b3e 0%, #104631 45%, #052f1d 100%); color: var(--cream); }
.paper { background: var(--paper); }
.paper2 { background: var(--paper-2); }
.redbg { background: radial-gradient(1100px 800px at 22% 50%, #25935f 0%, #1b8354 55%, #074d31 100%); }

/* ─── Type ─────────────────────────────────────────────────────────────── */
.kicker { color: var(--red-ink); font-size: 26px; font-weight: 500; }
.dark .kicker { color: var(--gold); }
h1 { font-weight: 700; line-height: 1.18; letter-spacing: -0.5px; }
.h1 { font-size: 84px; }
.lead { color: var(--muted); font-size: 30px; line-height: 1.62; font-weight: 400; }
.dark .lead { color: rgb(243 252 246 / 0.72); }
.ruqaa { font-family: 'IBM Plex Arabic', sans-serif; font-weight: 700; line-height: 1.3; }
.num { font-feature-settings: 'tnum'; }

.head { position: absolute; right: 128px; left: 128px; top: 130px; }
.head h1 { margin-top: 14px; }
.badge-row { display: flex; align-items: center; gap: 18px; }
.badge-n { width: 70px; height: 70px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 36px; font-weight: 700; }
.badge-n.gold { background: var(--gold); color: var(--dark); }

.foot { position: absolute; left: 128px; right: 128px; bottom: 46px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: var(--muted); }
.dark .foot { color: rgb(243 252 246 / 0.6); }
.logo { display: block; color: var(--ink); }
.dark .logo, .logo.light { color: #fff; }

.sadu { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: var(--sadu) repeat-x 0 0 / 72px 36px; }

/* ─── Build animations (slide in = .is-on) ─────────────────────────────── */
.up, .pop, .write, .slam, .fade, .rise, .drop, .from-r, .from-l { opacity: 0; }
.is-on .up    { animation: up 900ms var(--ease-out) var(--d, 0ms) both; }
.is-on .fade  { animation: fade 900ms ease var(--d, 0ms) both; }
.is-on .pop   { animation: pop 700ms var(--ease-spring) var(--d, 0ms) both; }
.is-on .rise  { animation: rise 1100ms var(--ease-out) var(--d, 0ms) both; }
.is-on .drop  { animation: drop 900ms var(--ease-spring) var(--d, 0ms) both; }
.is-on .from-r{ animation: fromR 1000ms var(--ease-out) var(--d, 0ms) both; }
.is-on .from-l{ animation: fromL 1000ms var(--ease-out) var(--d, 0ms) both; }
.is-on .write { animation: write 1400ms var(--ease-soft) var(--d, 0ms) both; }
.is-on .slam  { animation: slam 520ms var(--d, 0ms) both; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-on .draw  { animation: draw var(--t, 900ms) var(--ease-soft) var(--d, 0ms) both; }

@keyframes up    { from { opacity: 0; transform: translateY(var(--y, 34px)); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop   { 0% { opacity: 0; transform: scale(0.55) rotate(var(--r0, 0deg)); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
@keyframes rise  { from { opacity: 0; transform: translateY(120px) rotate(var(--r0, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
@keyframes drop  { from { opacity: 0; transform: translateY(-90px) rotate(var(--r0, -6deg)); } 40% { opacity: 1; } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
@keyframes fromR { from { opacity: 0; transform: translateX(80px) rotate(var(--r0, 0deg)); filter: blur(6px); } to { opacity: 1; transform: translateX(0) rotate(var(--r, 0deg)); filter: blur(0); } }
@keyframes fromL { from { opacity: 0; transform: translateX(-80px) rotate(var(--r0, 0deg)); filter: blur(6px); } to { opacity: 1; transform: translateX(0) rotate(var(--r, 0deg)); filter: blur(0); } }
@keyframes write { from { opacity: 1; clip-path: inset(-30% -4% -30% 100%); } to { opacity: 1; clip-path: inset(-30% -4% -30% -4%); } }
@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes slam {
  0%   { opacity: 0; transform: scale(2.1) rotate(var(--r, -8deg)); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  62%  { opacity: 1; transform: scale(0.94) rotate(var(--r, -8deg)); animation-timing-function: var(--ease-out); }
  100% { opacity: 1; transform: scale(1) rotate(var(--r, -8deg)); }
}
@keyframes thud { 0%, 100% { transform: rotate(var(--r, 0deg)); } 30% { transform: translate(2px, 5px) rotate(var(--r, 0deg)); } 60% { transform: translate(-1px, -1px) rotate(var(--r, 0deg)); } }

/* Ambient loops once a slide has built */
@keyframes float   { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes steam   { 0% { opacity: 0; transform: translateY(10px) scaleY(0.7); } 35% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-34px) scaleY(1.15); } }
@keyframes flow    { to { stroke-dashoffset: -60; } }
@keyframes shimmer { 0% { transform: translateX(140%) skewX(-18deg); } 55%, 100% { transform: translateX(-260%) skewX(-18deg); } }
@keyframes breathe { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 0.85; transform: scale(1.04); } }
.is-on .float   { animation: float var(--t, 3.2s) ease-in-out var(--d2, 0s) infinite alternate; }
.is-on .twinkle { animation: twinkle var(--t, 2.6s) ease-in-out var(--d2, 0s) infinite; }
.spark { position: absolute; width: 22px; height: 22px; color: var(--gold); }
.spark svg { width: 100%; height: 100%; display: block; }

/* ─── Shared pieces ────────────────────────────────────────────────────── */
.av { display: inline-block; width: 64px; height: 64px; border-radius: 50%; background: var(--bg, #fde3e6); border: 3px solid #fff; overflow: hidden; flex: none; }
.av svg { width: 100%; height: 100%; display: block; }
.avs { display: inline-flex; }
.avs .av + .av { margin-right: -18px; }
.dark .av { border-color: var(--dark); }

.ic { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Bubble icons (cover + gift) */
.bub { position: absolute; width: calc(var(--s, 60px)); height: calc(var(--s, 60px)); margin: calc(var(--s, 60px) / -2) 0 0 calc(var(--s, 60px) / -2); }
.bub > i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--red); color: #fff; font-size: calc(var(--s, 60px) * 0.5); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5); }
.bub.cream > i { background: var(--cream); color: var(--red); box-shadow: 0 12px 26px -12px rgb(90 10 10 / 0.55); }

/* ─── 1 · Cover ────────────────────────────────────────────────────────── */
.s1 .brand { position: absolute; right: 128px; top: 128px; display: flex; align-items: center; gap: 26px; color: var(--gold); font-size: 24px; font-weight: 500; }
.s1 .brand .bar { width: 2px; height: 46px; background: rgb(243 252 246 / 0.25); }
.s1 h1 { position: absolute; right: 128px; top: 222px; font-size: 124px; line-height: 1.13; text-align: right; }
.s1 h1 span { display: block; }
.s1 h1 .r { color: var(--red); }
.s1 .under { position: absolute; right: 120px; top: 640px; width: 450px; height: 40px; }
.s1 .lead { position: absolute; right: 128px; top: 724px; width: 900px; font-size: 28px; }
.s1 .tag { position: absolute; right: 128px; top: 852px; font-size: 46px; color: var(--gold); }
.dallah-wrap { position: absolute; transform-origin: var(--ox) var(--oy); }
.dallah-wrap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.35)); }
.s1 .dallah-wrap { left: 345px; top: 181px; width: 270px; height: 405px; --ox: 135px; --oy: 270px; transform: rotate(-42deg); opacity: 0; }
.s1.is-on .dallah-wrap { animation: tilt1 1700ms var(--ease-in-out) 150ms both; }
@keyframes tilt1 {
  0% { opacity: 0; transform: translate(40px, 60px) rotate(0deg); }
  35% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 1; transform: rotate(-42deg); }
}
.cup { position: absolute; }
.cup svg { width: 100%; height: 100%; display: block; }
.stream { fill: none; stroke: #e3b56c; stroke-width: 7; stroke-linecap: round; }
.stream-flow { fill: none; stroke: #fff3d6; stroke-opacity: 0.55; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 22; }
.is-on .stream-flow { animation: flow 900ms linear infinite; }
.s1 .bub { --s: 62px; }
.s1 .bub.go { opacity: 0; }
.s1.is-on .bub.go { animation: spill 900ms var(--ease-spring) var(--d) both; }
@keyframes spill {
  0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.3); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.gdot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #e8c98f; }

/* ─── 2 · The chat ─────────────────────────────────────────────────────── */
.s2 .head { right: 128px; left: auto; width: 900px; }
.s2 .chat { position: absolute; left: 130px; top: 130px; width: 748px; height: 792px; background: var(--card); border-radius: 44px; box-shadow: 0 40px 80px -40px rgb(60 30 20 / 0.28), 0 2px 0 rgb(255 255 255 / 0.8) inset; padding: 40px 40px 0; }
.chat-h { display: flex; align-items: center; gap: 18px; padding-bottom: 26px; border-bottom: 2px solid var(--line); }
.chat-h b { display: block; font-size: 30px; font-weight: 700; }
.chat-h small { display: block; color: var(--muted); font-size: 21px; margin-top: 4px; }
.chat-h .av { width: 70px; height: 70px; }
.msgs { padding-top: 22px; display: flex; flex-direction: column; gap: 20px; }
.msg { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.msg .av { width: 58px; height: 58px; border-width: 0; }
.bubble { position: relative; background: #f2ebe6; border-radius: 26px; padding: 18px 26px 20px; max-width: 600px; font-size: 26px; line-height: 1.55; }
.bubble .who { display: flex; justify-content: space-between; gap: 40px; font-size: 21px; font-weight: 600; color: var(--red-ink); margin-bottom: 4px; }
.bubble .who.gold { color: #a06a1c; }
.bubble time { color: var(--muted); font-weight: 400; font-size: 19px; }
.mine { align-self: flex-end; }
.mine .bubble { background: #fbe3b8; display: flex; align-items: center; gap: 22px; padding: 20px 30px; }
.mine time { color: #8a7a62; font-size: 19px; display: flex; gap: 8px; align-items: center; }
.typing { position: absolute; top: 0; right: 74px; background: #f2ebe6; border-radius: 26px; padding: 22px 26px; display: flex; gap: 8px; opacity: 0; }
.typing i { width: 11px; height: 11px; border-radius: 50%; background: #b8aaa1; }
.is-on .typing { animation: typing 1100ms ease var(--d) both; }
.is-on .typing i { animation: dot 600ms ease-in-out infinite alternate; }
.typing i:nth-child(2) { animation-delay: 150ms !important; }
.typing i:nth-child(3) { animation-delay: 300ms !important; }
@keyframes typing { 0% { opacity: 0; transform: scale(0.85); transform-origin: right top; } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes dot { from { transform: translateY(2px); opacity: 0.4; } to { transform: translateY(-4px); opacity: 1; } }
.msg.pop, .mine.pop { transform-origin: right top; }
.mine.pop { transform-origin: left center; }
.s2 .note { position: absolute; left: 168px; top: 772px; font-size: 38px; color: var(--red-ink); transform: rotate(-4deg); }
.s2 .note-arrow { position: absolute; left: 380px; top: 765px; width: 90px; height: 60px; }
.s2 .budget { position: absolute; left: 1272px; top: 494px; width: 520px; height: 212px; --r: -2.5deg; }
.budget-card { width: 100%; height: 100%; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -30px rgb(60 30 20 / 0.3); padding: 30px 34px; }
.is-on .budget-card { animation: thud 380ms ease-out 3850ms both; }
.budget-card h3 { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 700; }
.budget-card h3 .ic { font-size: 32px; }
.budget-card p { color: var(--muted); font-size: 21px; margin-top: 8px; }
.budget-card .sk { height: 13px; border-radius: 8px; background: #ebe4df; margin-top: 18px; }
.budget-card .sk + .sk { margin-top: 12px; width: 70%; margin-inline-start: auto; }
.stamp { position: absolute; display: grid; place-items: center; font-weight: 700; color: var(--red-ink); border: 4px solid currentColor; border-radius: 12px; padding: 4px 30px 10px; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.0), inset 0 0 0 3px #fff, inset 0 0 0 6px currentColor; mix-blend-mode: multiply; }
.s2 .stamp { left: 26px; top: 108px; font-size: 34px; --r: -6deg; }
.s2 .bottom { position: absolute; right: 128px; top: 830px; width: 760px; font-size: 27px; }

/* ─── 3 · Gift ─────────────────────────────────────────────────────────── */
.s3 .tayyib { position: absolute; right: 128px; top: 386px; font-size: 64px; color: var(--dark); }
.s3 h1 { position: absolute; right: 128px; top: 492px; font-size: 100px; line-height: 1.2; }
.s3 h1 span { display: block; }
.s3 h1 .c { color: var(--cream); }
.s3 h1 .d { color: #3a1312; }
.gift-body { position: absolute; left: 262px; top: 600px; width: 336px; height: 244px; opacity: 0; }
.s3.is-on .gift-body { animation: giftIn 900ms var(--ease-spring) 100ms both, shake 520ms ease-in-out 1000ms 2; }
@keyframes giftIn { from { opacity: 0; transform: translateY(-140px) scale(0.92); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.gift-lid { position: absolute; left: 430px; top: 290px; width: 300px; height: 80px; transform: rotate(28deg); opacity: 0; transform-origin: 20% 100%; }
.s3.is-on .gift-lid { animation: lid 900ms var(--ease-spring) 2000ms both; }
@keyframes lid {
  0% { opacity: 1; transform: translate(-150px, 250px) rotate(0deg); }
  100% { opacity: 1; transform: rotate(28deg); }
}
.s3 .bub.burst { opacity: 0; }
.s3.is-on .bub.burst { animation: burst 900ms var(--ease-spring) var(--d) both; }
@keyframes burst { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.2); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.s3 .strings { position: absolute; inset: 0; pointer-events: none; }
.s3 .strings path { stroke: rgb(243 252 246 / 0.7); stroke-width: 3; fill: none; stroke-linecap: round; }
.pdot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #9e2c2c; opacity: 0.6; }

/* ─── 4 · Phone ────────────────────────────────────────────────────────── */
.s4 .head { right: 128px; left: auto; width: 960px; top: 128px; }
.s4 .head h1 { font-size: 68px; white-space: nowrap; }
.s4 .head .lead { margin-top: 14px; width: 960px; }
.feats { position: absolute; right: 128px; top: 630px; display: flex; flex-direction: column; gap: 26px; }
.feat { display: flex; align-items: center; gap: 24px; }
.feat .tile { width: 80px; height: 80px; border-radius: 22px; background: var(--pink); color: var(--red); display: grid; place-items: center; font-size: 40px; flex: none; }
.feat b { display: block; font-size: 32px; font-weight: 700; }
.feat small { display: block; color: var(--muted); font-size: 22px; margin-top: 2px; }
.phone { position: absolute; left: 128px; top: 128px; width: 600px; height: 1240px; border-radius: 92px; background: #2a201d; padding: 14px; box-shadow: 0 60px 100px -40px rgb(40 20 10 / 0.45); }
.phone .scr { position: relative; width: 572px; height: 1212px; border-radius: 80px; background: #ffffff; overflow: hidden; }
.phone .inner { position: absolute; top: 0; right: 0; width: 390px; transform-origin: top right; transform: scale(1.4667); }
.island { position: absolute; top: 16px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: 20px; background: #1b1513; z-index: 3; }
.sbar { position: relative; z-index: 2; background: #ffffff; display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 16px 28px 0; font-size: 15px; font-weight: 700; }
.sbar .sic { display: flex; gap: 6px; align-items: center; direction: ltr; }
.app { padding: 10px 16px 0; }
.search { display: flex; align-items: center; gap: 10px; height: 48px; border-radius: 24px; border: 1.5px solid #ece4de; background: #fff; padding: 0 16px; box-shadow: 0 6px 16px -10px rgb(60 30 20 / 0.25); font-size: 13.5px; }
.search b { font-weight: 700; }
.search .sep { width: 1px; height: 20px; background: #e5dbd4; }
.search span { color: #9b8f88; flex: 1; }
.search .ic { font-size: 17px; color: #4b403b; }
.chips { display: flex; gap: 8px; margin-top: 14px; white-space: nowrap; }
.chips li { border: 1.5px solid #ece4de; border-radius: 18px; padding: 6px 13px; font-size: 13px; font-weight: 600; background: #fff; }
.chips li.on { background: #f9e2b4; border-color: #f0cf8b; }
.sec { margin-top: 20px; }
.sec h4 { font-size: 17px; font-weight: 700; }
.sec p { font-size: 11.5px; color: #8b7f78; margin-top: 2px; }
.rail { position: relative; height: 210px; margin-top: 12px; }
.track { position: absolute; top: 0; right: 0; display: flex; gap: 12px; }
.is-on .track { animation: rail 9s var(--ease-in-out) 3.2s infinite; }
@keyframes rail { 0%, 38% { transform: translateX(0); } 48%, 86% { transform: translateX(212px); } 96%, 100% { transform: translateX(0); } }
.pcard { width: 200px; flex: none; }
.pcard .img { position: relative; height: 140px; border-radius: 16px; overflow: hidden; }
.pcard .img > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard .tagb { position: absolute; top: 10px; right: 10px; background: #f6dca7; border-radius: 12px; padding: 3px 9px; font-size: 11px; font-weight: 700; display: flex; gap: 4px; align-items: center; }
.pcard .tagb .ic { font-size: 12px; }
.pcard .heart { position: absolute; top: 9px; left: 9px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #3b302c; font-size: 15px; }
.pcard .heart .fill { position: absolute; color: var(--red); opacity: 0; }
.is-on .pcard .heart .fill { animation: heart 600ms var(--ease-spring) 2.4s both; }
@keyframes heart { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
.pcard .row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 700; }
.pcard .row .st { color: #3b302c; font-weight: 600; display: flex; gap: 3px; align-items: center; }
.pcard .row .st i { color: #f2b437; font-style: normal; }
.pcard .meta { font-size: 11px; color: #8b7f78; margin-top: 2px; }
.pcard .price { font-size: 12px; font-weight: 700; color: var(--red-ink); margin-top: 3px; }
.pcard .price s { color: #a2958e; font-weight: 400; margin-right: 6px; }
.phone .inner .app > * { opacity: 0; }
.s4.is-on .phone .inner .app > * { animation: up 800ms var(--ease-out) var(--d) both; --y: 18px; }
.s4.is-on .phone .inner .app { animation: scrollv 9s var(--ease-in-out) 3.2s infinite; }
@keyframes scrollv { 0%, 30% { transform: none; } 40%, 80% { transform: translateY(-120px); } 92%, 100% { transform: none; } }


/* ─── Rekaz network: the Kingdom, its cities and who is there ─────────── */
.s-net .head { right: 128px; left: auto; width: 760px; }
.s-net .head h1 { font-size: 82px; }
.figs { position: absolute; right: 128px; top: 450px; display: flex; flex-direction: column; gap: 24px; text-align: right; }
.figs dt { font-size: 112px; font-weight: 700; line-height: 1; color: var(--ink); font-feature-settings: 'tnum'; }
.figs dt.red { color: var(--red); }
.figs dd { margin-top: 6px; font-size: 28px; color: var(--muted); }
.rating { position: absolute; right: 128px; top: 878px; display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px; border-radius: 40px; background: var(--card); box-shadow: 0 18px 40px -24px rgb(60 30 20 / 0.35); font-size: 24px; color: var(--ink); }
.rating .st { color: #f2b437; font-size: 28px; }
.rating b { font-weight: 700; }
#kingdom { position: absolute; left: 70px; top: 110px; width: 1040px; height: 860px; direction: ltr; }
#kingdom svg { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 30px 50px rgb(60 30 20 / 0.12)); }
#kingdom path { fill: var(--card); stroke: #eadfd6; stroke-width: 2px; stroke-linejoin: round; }
.s-net:not(.is-on) #kingdom svg { opacity: 0; }
.is-on #kingdom svg { animation: fade 900ms ease 100ms both; }
#kingdom img { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #eadfd6; border-radius: 99px; background: #fff; object-fit: cover; opacity: 0; }
.is-on #kingdom img { animation: pop 520ms var(--ease-spring) var(--d, 0ms) both; }
#kingdom .city { position: absolute; padding: 5px 14px 7px; border-radius: 10px; background: var(--red); color: #fff; font-size: 20px; font-weight: 600; line-height: 1.3; white-space: nowrap; direction: rtl; opacity: 0; box-shadow: 0 8px 18px -10px rgb(160 40 40 / 0.6); }
.is-on #kingdom .city { animation: fade 450ms ease var(--d, 0ms) both; }
#kingdom .city b { font-weight: 700; }
#kingdom .below { transform: translate(-50%, 0); }
#kingdom .above { transform: translate(-50%, -100%); }
#kingdom .east { transform: translate(0, -50%); }
#kingdom .west { transform: translate(-100%, -50%); }

/* ─── Rekaz catalog: every kind of service, as one bar ─────────────────── */
.s-cats .head h1 { font-size: 96px; }
.s-cats .head .lead { margin-top: 10px; }
.share { position: absolute; right: 128px; left: 128px; top: 470px; height: 72px; display: flex; gap: 5px; border-radius: 14px; overflow: hidden; direction: rtl; }
.share i { background: var(--c); }
.s-cats .share { clip-path: inset(0 0 0 100% round 14px); }
.is-on .share { animation: bar 1400ms var(--ease-out) 500ms both; }
@keyframes bar { from { clip-path: inset(0 0 0 100% round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
.legend { position: absolute; right: 128px; left: 128px; top: 600px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
.legend li { display: grid; gap: 6px; align-content: start; padding-top: 22px; border-top: 2px solid var(--line); }
.legend i { width: 20px; height: 20px; border-radius: 6px; background: var(--c); }
.legend b { margin: 8px 0 8px; font-size: 26px; font-weight: 600; line-height: 1.35; min-height: 70px; }
.legend span { font-size: 64px; font-weight: 700; line-height: 1.1; font-feature-settings: 'tnum'; }
.legend small { color: var(--muted); font-size: 24px; }
.s-cats .total { position: absolute; right: 128px; top: 880px; font-size: 26px; color: var(--muted); }
.s-cats .total b { color: var(--ink); }

/* ─── 5 · Invoice ──────────────────────────────────────────────────────── */
.s5 .head h1 { font-size: 82px; }
.s5 .head .lead { font-size: 28px; margin-top: 8px; }
.checks { position: absolute; right: 128px; top: 724px; display: flex; flex-direction: column; gap: 26px; font-size: 28px; }
.checks li { display: flex; align-items: center; gap: 20px; }
.cbox { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.cbox svg { width: 26px; height: 26px; }
.cbox path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.receipt { position: absolute; left: 150px; top: 196px; width: 570px; height: 700px; --r: -2.5deg; transform: rotate(var(--r)); }
.receipt .paper-wrap { position: absolute; inset: 0; filter: drop-shadow(0 30px 40px rgb(60 30 20 / 0.22)); }
.receipt .paperx { position: absolute; inset: 0; background: #fffdfa; clip-path: polygon(0 0, 100% 0, 100% 97%, 97.5% 100%, 95% 97%, 92.5% 100%, 90% 97%, 87.5% 100%, 85% 97%, 82.5% 100%, 80% 97%, 77.5% 100%, 75% 97%, 72.5% 100%, 70% 97%, 67.5% 100%, 65% 97%, 62.5% 100%, 60% 97%, 57.5% 100%, 55% 97%, 52.5% 100%, 50% 97%, 47.5% 100%, 45% 97%, 42.5% 100%, 40% 97%, 37.5% 100%, 35% 97%, 32.5% 100%, 30% 97%, 27.5% 100%, 25% 97%, 22.5% 100%, 20% 97%, 17.5% 100%, 15% 97%, 12.5% 100%, 10% 97%, 7.5% 100%, 5% 97%, 2.5% 100%, 0 97%); }
.s5 .printout { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); }
.s5.is-on .printout { animation: printout 1500ms var(--ease-out) 200ms both; }
@keyframes printout { from { clip-path: inset(0 0 100% 0); transform: translateY(-40px); } to { clip-path: inset(-30% -30% -30% -30%); transform: none; } }
.rc { position: absolute; inset: 0; padding: 60px 50px 0; }
.rc-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 3px solid #d9cfc8; }
.rc-h b { font-size: 31px; font-weight: 700; }
.rc ul { padding: 20px 0 12px; border-bottom: 3px solid #d9cfc8; }
.rc li { display: flex; justify-content: space-between; align-items: center; font-size: 27px; padding: 10px 0; }
.rc li svg { width: 28px; height: 28px; }
.rc li path { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rc .cost { text-align: center; font-size: 27px; font-weight: 600; color: #6b5d55; margin-top: 18px; }
.zero { position: relative; height: 210px; margin-top: 4px; }
.zero .ring { position: absolute; left: -4px; top: 6px; width: 476px; height: 200px; }
.zero .ring path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
.zero .word { position: absolute; left: 150px; top: -6px; font-size: 158px; font-weight: 700; color: var(--red); line-height: 1.2; --r: -3deg; }
.zero .sar { position: absolute; left: 70px; top: 86px; font-size: 34px; font-weight: 700; }
.rc .thanks { text-align: center; font-size: 38px; color: var(--red-ink); margin-top: 4px; transform: rotate(-2deg); }
.clip { position: absolute; left: 250px; top: -62px; width: 46px; height: 120px; z-index: 2; }
.ringstain { position: absolute; left: 44px; top: 640px; width: 230px; height: 230px; border-radius: 50%; border: 8px solid rgb(178 150 130 / 0.18); box-shadow: inset 0 0 0 3px rgb(178 150 130 / 0.08); }

/* ─── 6 · Flow ─────────────────────────────────────────────────────────── */
.s6 .head h1 { font-size: 82px; }
.persona { position: absolute; right: 128px; top: 410px; display: flex; align-items: center; gap: 20px; }
.persona .av { width: 92px; height: 92px; border: 0; }
.persona b { font-size: 30px; font-weight: 700; display: block; }
.persona small { display: block; font-size: 22px; color: var(--muted); margin-top: 4px; }
.steps { position: absolute; right: 128px; left: 128px; top: 530px; height: 262px; display: flex; justify-content: space-between; }
.step { position: relative; width: 292px; height: 262px; border-radius: 30px; background: var(--card); border: 2px solid #eee4dd; padding: 30px 28px; }
.step .n { position: absolute; top: 30px; right: 28px; width: 52px; height: 52px; border-radius: 50%; background: var(--pink); color: var(--red); display: grid; place-items: center; font-size: 24px; font-weight: 700; transition: none; }
.step .si { position: absolute; top: 34px; left: 30px; font-size: 40px; color: #3b302c; }
.step h3 { margin-top: 80px; font-size: 31px; font-weight: 700; line-height: 1.3; }
.step p { margin-top: 10px; font-size: 22px; color: var(--muted); line-height: 1.45; }
.step.last { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.step.last .n { background: var(--gold); color: var(--ink); }
.step.last .si { color: var(--gold); }
.step.last p { color: rgb(243 252 246 / 0.72); }
.is-on .step .ring-on { animation: focusOn 700ms var(--ease-out) var(--f) both; }
.step .ring-on { position: absolute; inset: -2px; border-radius: 30px; border: 3px solid var(--red); opacity: 0; pointer-events: none; }
@keyframes focusOn { 0% { opacity: 0; transform: scale(1.06); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0.0; transform: scale(1); } }
.is-on .step .n.fill { animation: nfill 400ms ease var(--f) both; }
@keyframes nfill { to { background: var(--red); color: #fff; } }
.is-on .step.lift { animation: up 900ms var(--ease-out) var(--d, 0ms) both, lift 700ms var(--ease-out) var(--f) both; }
@keyframes lift { 0% { translate: 0 0; } 40% { translate: 0 -12px; box-shadow: 0 30px 40px -24px rgb(60 30 20 / 0.35); } 100% { translate: 0 0; } }
.arrow { position: absolute; top: 112px; width: 36px; height: 24px; }
.arrow path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.toast { position: absolute; left: 128px; top: 398px; width: 442px; padding: 20px 26px; background: #fff; border-radius: 22px; box-shadow: 0 26px 50px -20px rgb(60 30 20 / 0.32); display: flex; align-items: center; gap: 20px; --r: -3deg; transform: rotate(-3deg); }
.toast .cbox { border-radius: 14px; width: 58px; height: 58px; }
.toast b { display: block; font-size: 25px; font-weight: 700; }
.toast small { display: block; font-size: 20px; color: var(--muted); margin-top: 2px; }
.s6 .toast.drop { --r0: -14deg; }
.s6 .sum { position: absolute; right: 128px; top: 832px; font-size: 76px; color: var(--red-ink); }

/* ─── 7 · Compare ──────────────────────────────────────────────────────── */
.s7 .head h1 { font-size: 82px; }
.cmp-us { position: absolute; left: 128px; top: 352px; width: 856px; height: 570px; background: var(--card); border-radius: 40px; box-shadow: 0 40px 80px -40px rgb(60 30 20 / 0.3); padding: 52px 56px; }
.cmp-us h3, .cmp-them h3 { display: flex; align-items: center; gap: 20px; font-size: 40px; font-weight: 700; }
.cmp-us h3 .tile { width: 56px; height: 56px; border-radius: 14px; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 30px; }
.cmp-us ul, .cmp-them ul { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; font-size: 28px; }
.cmp-us li, .cmp-them li { display: flex; align-items: center; gap: 18px; }
.cmp-us .cbox { width: 46px; height: 46px; }
.cmp-us .cbox svg { width: 22px; height: 22px; }
.cmp-us .pill { position: absolute; left: 50px; bottom: 50px; display: inline-flex; align-items: center; gap: 14px; background: var(--pink); border-radius: 40px; padding: 12px 26px 12px 18px; font-size: 22px; font-weight: 700; }
.cmp-us .pill .cbox { width: 44px; height: 44px; background: var(--green); }
.cmp-them { position: absolute; left: 1030px; top: 352px; width: 762px; height: 570px; border-radius: 40px; padding: 52px 56px; color: #6a5d56; }
.cmp-them .dash { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp-them .dash rect { fill: none; stroke: #c5b8af; stroke-width: 3; stroke-dasharray: 10 9; }
.cmp-them h3 .ic { font-size: 40px; }
.cmp-them h3 { color: #4c403a; }
.cmp-them .minus { width: 44px; height: 44px; border-radius: 50%; background: #e7dfda; display: grid; place-items: center; flex: none; }
.cmp-them .minus i { width: 16px; height: 3px; border-radius: 2px; background: #8a7c74; }
.cmp-them .stamp { left: 48px; top: 34px; font-size: 46px; --r: -12deg; color: #d07b7b; }
.cmp-them .body { position: absolute; inset: 52px 56px; }
.cmp-them .who { position: absolute; left: 0; bottom: 0; font-size: 40px; color: var(--red-ink); transform: rotate(-3deg); }
.scissors { position: absolute; top: -22px; left: 0; width: 44px; height: 44px; color: #7a6c64; background: var(--paper); padding: 4px; opacity: 0; translate: 690px 0; }
.scissors .ic { width: 100%; height: 100%; transform: scaleX(-1); }
.s7.is-on .scissors { animation: cut 2200ms var(--ease-in-out) 500ms both; }
@keyframes cut { 0% { opacity: 0; translate: 690px 0; } 8% { opacity: 1; } 100% { opacity: 1; translate: 60px 0; } }
.s7.is-on .cmp-them .body { animation: dim 700ms ease 3300ms both; }
@keyframes dim { to { opacity: 0.62; filter: grayscale(0.4); } }
.s7.is-on .cmp-us { animation: rise 1100ms var(--ease-out) 3500ms both; }
.s7 .cmp-us { opacity: 0; }

/* ─── 8 · Self-funding ─────────────────────────────────────────────────── */
.s8 { background: radial-gradient(900px 800px at 25% 40%, #2a1f1a 0%, #1c1512 60%, #171210 100%); }
.s8 .head { right: 128px; left: auto; width: 900px; }
.s8 .head h1 { font-size: 82px; color: var(--cream); white-space: nowrap; }
.s8 .head .lead { font-size: 28px; margin-top: 10px; }
.glow { position: absolute; left: 230px; top: 160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgb(120 82 50 / 0.55), rgb(80 52 32 / 0.18) 60%, transparent); }
.is-on .glow { animation: breathe 5s ease-in-out infinite; }
.s8 .dallah-wrap { left: 384px; top: 169px; width: 260px; height: 390px; --ox: 130px; --oy: 260px; transform: rotate(-22deg); opacity: 0; }
.s8.is-on .dallah-wrap { animation: tilt8 1600ms var(--ease-in-out) 200ms both; }
@keyframes tilt8 { 0% { opacity: 0; transform: translateY(-40px) rotate(0); } 40% { opacity: 1; transform: rotate(0); } 100% { opacity: 1; transform: rotate(-22deg); } }
.loop-list { position: absolute; right: 128px; top: 660px; display: flex; flex-direction: column; gap: 20px; font-size: 29px; color: var(--cream); }
.loop-list li { display: flex; align-items: center; gap: 20px; }
.loop-list .on { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-size: 22px; font-weight: 600; flex: none; }
.loop-list .on::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--gold); opacity: 0; z-index: -1; }
.loop-list .on { isolation: isolate; }
.loop-list span { transition: none; }
.s8.is-on .loop-list .on::before { animation: hl 8s ease var(--h) infinite; }
.s8.is-on .loop-list .on { animation: hlTxt 8s ease var(--h) infinite; }
.s8.is-on .loop-list .lbl { animation: hlLbl 8s ease var(--h) infinite; }
@keyframes hl { 0%, 100% { opacity: 0; } 4%, 22% { opacity: 1; } 28% { opacity: 0; } }
@keyframes hlTxt { 0%, 100% { color: var(--gold); } 4%, 22% { color: var(--dark); } 28% { color: var(--gold); } }
@keyframes hlLbl { 0%, 100% { opacity: 0.78; } 4%, 22% { opacity: 1; } 28% { opacity: 0.78; } }
.loop-list .lbl { opacity: 0.78; }
.coin { position: absolute; left: 0; top: 0; width: 30px; height: 38px; offset-path: path('M 541 650 C 790 600, 790 330, 690 290 C 660 270, 640 236, 600 198'); offset-rotate: 0deg; opacity: 0; }
.s8.is-on .coin { animation: coin 6s var(--ease-in-out) var(--d) infinite; }
@keyframes coin { 0% { offset-distance: 0%; opacity: 0; transform: scale(0.5); } 10% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; transform: scale(0.8); } }
.fixed-drop { position: absolute; width: 30px; height: 38px; }
.s8 .label { position: absolute; left: 446px; top: 128px; font-size: 22px; color: var(--gold); }
.s8 .team { position: absolute; left: 212px; top: 708px; display: flex; align-items: center; gap: 16px; color: var(--gold); font-size: 22px; }
.s8 .team .av { width: 60px; height: 60px; }
.s8 .say { position: absolute; left: 232px; top: 790px; font-size: 44px; color: var(--gold); }
.liq { transform-box: fill-box; transform-origin: center; }
@keyframes fill { 0%, 100% { opacity: 0.35; } 10%, 70% { opacity: 1; } }

/* ─── 9 · Ideas ────────────────────────────────────────────────────────── */
.s9 .head h1 { font-size: 82px; }
.s9 .head .lead { font-size: 28px; margin-top: 6px; }
.ideas { position: absolute; left: 128px; right: 128px; top: 418px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; }
.idea { position: relative; height: 240px; border-radius: 36px; padding: 44px 48px; display: flex; gap: 30px; align-items: flex-start; }
.idea.sand { background: var(--sand); }
.idea.pink { background: var(--pink); }
.idea .tape { position: absolute; top: -16px; left: 50%; width: 140px; height: 38px; margin-left: -70px; border-radius: 3px; opacity: 0.9; transform: rotate(var(--tr, 2deg)); }
.idea.sand .tape { background: #f6c9c3; }
.idea.pink .tape { background: #f0d29c; }
.is-on .idea .tape { animation: tape 420ms var(--ease-out) var(--td) both; }
@keyframes tape { from { opacity: 0; transform: scale(1.4) rotate(var(--tr, 2deg)); } to { opacity: 0.9; transform: scale(1) rotate(var(--tr, 2deg)); } }
.idea .tape { opacity: 0; }
.idea .ico { position: relative; width: 112px; height: 112px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; font-size: 48px; color: var(--red-ink); }
.idea .ico .avs { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); }
.idea .ico .av { width: 46px; height: 46px; border-width: 2px; }
.idea .ico .avs .av + .av { margin-right: -14px; }
.idea b { display: block; font-size: 36px; font-weight: 700; margin-top: 2px; }
.idea p { font-size: 26px; color: #5d514a; margin-top: 8px; line-height: 1.55; }
.is-on .idea .ico > svg { animation: wig 700ms ease-in-out var(--wd) both; }
@keyframes wig { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }
@media (hover: hover) and (pointer: fine) {
  .idea { transition: transform 300ms var(--ease-out); }
  .idea:hover { transform: translateY(-6px) rotate(-0.4deg); }
}

/* ─── 10 · Start ───────────────────────────────────────────────────────── */
.s10 .head h1 { font-size: 82px; }
.tl { position: absolute; right: 128px; top: 532px; display: flex; flex-direction: column; gap: 40px; }
.tl li { position: relative; display: flex; align-items: flex-start; gap: 26px; }
.tl .c { width: 80px; height: 80px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 36px; font-weight: 700; flex: none; }
.tl li:last-child .c { background: var(--ink); color: var(--gold); }
.tl b { display: block; font-size: 38px; font-weight: 700; line-height: 1.3; }
.tl small { display: block; font-size: 26px; color: var(--muted); margin-top: 4px; }
.tl .con { position: absolute; right: 38px; top: 86px; width: 4px; height: 34px; }
.tl .con line { stroke: #d8a38f; stroke-width: 3; stroke-dasharray: 4 6; }
.tray-scene { position: absolute; left: 0; top: 0; width: 900px; height: 1080px; }
.tray { position: absolute; left: 140px; top: 560px; width: 600px; height: 240px; }
.on-tray { opacity: 0; }
.is-on .on-tray { animation: onTray 800ms var(--ease-spring) var(--d) both; }
@keyframes onTray { from { opacity: 0; transform: translateY(-70px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.s10 .dallah-wrap { left: 150px; top: 414px; width: 150px; height: 225px; }
.s10 .dallah-wrap svg { filter: drop-shadow(0 14px 14px rgb(80 40 10 / 0.25)); }
.wisp { position: absolute; width: 22px; height: 46px; opacity: 0; }
.wisp path { fill: none; stroke: #c9a27a; stroke-width: 2.5; stroke-linecap: round; }
.is-on .wisp { animation: steam 2.6s ease-out var(--d2) infinite; }
.s10 .coffee { position: absolute; left: 560px; top: 296px; font-size: 44px; color: var(--red-ink); transform: rotate(-8deg); }
.s10 .carrow { position: absolute; left: 0; top: 0; width: 900px; height: 1080px; pointer-events: none; }
.s10 .carrow path { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* ─── 11 · Close ───────────────────────────────────────────────────────── */
.s11 h1 { position: absolute; right: 128px; top: 158px; font-size: 124px; line-height: 1.13; text-align: right; }
.s11 h1 span { display: block; }
.s11 h1 .r { color: var(--red); }
.s11 .under { position: absolute; right: 120px; top: 568px; width: 520px; height: 40px; }
.s11 .lead { position: absolute; right: 128px; top: 640px; font-size: 30px; }
.cta { position: absolute; right: 128px; top: 728px; display: inline-flex; align-items: center; height: 84px; padding: 0 46px; border-radius: 44px; background: var(--gold); color: var(--ink); font-size: 30px; font-weight: 700; text-decoration: none; overflow: hidden; cursor: pointer; transition: transform 160ms var(--ease-out), box-shadow 200ms ease; box-shadow: 0 16px 40px -16px rgb(243 211 159 / 0.55); }
.cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta:hover { box-shadow: 0 20px 50px -14px rgb(243 211 159 / 0.75); } }
.cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent); transform: translateX(140%) skewX(-18deg); }
.s11.is-on .cta::after { animation: shimmer 3.6s ease-in-out 2.8s infinite; }
.contact { position: absolute; right: 128px; top: 862px; display: flex; gap: 40px; font-size: 28px; color: var(--gold); direction: ltr; }
.contact a { color: inherit; text-decoration: none; }
.s11 .logo-end { position: absolute; right: 128px; bottom: 84px; }
.arch { position: absolute; left: 400px; top: 222px; width: 360px; height: 540px; }
.arch path { fill: none; stroke: rgb(232 196 140 / 0.55); stroke-width: 2.5; }
.s11 .dallah-wrap { left: 418px; top: 350px; width: 264px; height: 396px; }
.heart-steam { position: absolute; width: 40px; height: 64px; }
.heart-steam path { fill: none; stroke: #e7c48d; stroke-width: 2.5; stroke-linecap: round; }
.is-on .heart-steam { animation: steam 3.2s ease-out var(--d2) infinite; }
.s11 .hayakum { position: absolute; left: 380px; top: 812px; font-size: 40px; color: var(--gold); }

/* ─── HUD ──────────────────────────────────────────────────────────────── */
.progress { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 10; }
.progress i { position: absolute; top: 0; right: 0; height: 100%; width: 100%; background: linear-gradient(270deg, var(--gold), var(--red)); transform-origin: right; transform: scaleX(var(--at, 0)); transition: transform 600ms var(--ease-out); }
.hud { position: fixed; left: 22px; bottom: 18px; z-index: 10; display: flex; gap: 8px; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 240ms var(--ease-out); font: 500 13px 'IBM Plex Arabic', sans-serif; direction: ltr; }
.hud.show { opacity: 1; transform: none; }
.hud button { all: unset; cursor: pointer; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 18px; display: grid; place-items: center; background: rgb(20 14 12 / 0.72); color: #f3fcf6; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 140ms var(--ease-out), background 160ms ease; }
.hud button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .hud button:hover { background: rgb(20 14 12 / 0.9); } }
.hud button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hud .count { padding: 0 14px; font-feature-settings: 'tnum'; letter-spacing: 0.5px; }
.hint { position: fixed; bottom: 64px; left: 50%; z-index: 10; transform: translateX(-50%); padding: 10px 20px; border-radius: 30px; background: rgb(20 14 12 / 0.75); color: #f3fcf6; font: 400 14px 'IBM Plex Arabic', sans-serif; backdrop-filter: blur(10px); opacity: 0; transition: opacity 400ms ease; pointer-events: none; white-space: nowrap; }
.hint.show { opacity: 1; }

/* ─── Print / reduced motion: every slide at its finished frame ───────── */
.still *, .still *::before, .still *::after { animation-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
.still .slide.is-on .coin { animation: none !important; }
.still .bub.go { opacity: 1 !important; animation: none !important; }
.still .s8 .coin { display: none; }
.still .wisp, .still .heart-steam { opacity: 0.7 !important; animation: none !important; }
.still .typing { display: none; }
.still .step .ring-on { display: none; }
html.print, .print body { overflow: visible; height: auto; }
.print .stage { position: relative; top: auto; left: auto; transform: none; height: auto; overflow: visible; box-shadow: none; }
.print .slide { position: relative; width: 1920px; height: 1080px; break-after: page; visibility: visible; opacity: 1; }
.print .hud, .print .progress, .print .hint { display: none; }
@page { size: 1920px 1080px; margin: 0; }

/* Authority identity: palette and IBM Plex Arabic from karrda.gov.sa. */
.authority-logo { width: 270px; height: 56px; display: block; flex: none; object-fit: contain; }
.authority-dark { display: none; }
.dark .authority-light { display: none; }
.dark .authority-dark { display: block; }
.s1 .brand { top: 74px; gap: 22px; }
.s1 .brand > span { display: none; }
.s1 .brand .logo { width: 126px; }
.s1 .brand .bar { height: 42px; }
.s1 .recipient { position: absolute; right: 128px; top: 161px; font-size: 24px; color: var(--gold); font-weight: 500; }
.s1 h1 { font-size: 114px; top: 223px; }
.s1 h1 .r, .s11 h1 .r { color: var(--gold); }
.s1 .lead { top: 690px; width: 950px; font-size: 30px; }
.s1 .under { top: 622px; }
.s1 .tag { top: 837px; font-size: 31px; }
.foot { justify-content: flex-start; gap: 24px; }
.foot .authority-logo { margin-right: auto; width: 255px; height: 53px; }
.closing-authority { position: absolute; top: 68px; right: 128px; }
.closing-authority .authority-logo { width: 320px; height: 67px; }
.s11 h1 { top: 174px; font-size: 110px; }
.s11 .under { top: 565px; }
.s11 .lead { font-size: 29px; }
.search b { font-size: 23px; }

.s3 .tayyib { color: var(--gold); }
.s3 h1 .d { color: var(--gold); }

/* KARNR Lifestyle: product-first story and a complete category showcase. */
.s1 h1 { font-size: 98px; width: 1050px; line-height: 1.22; top: 237px; }
.s1 .under { top: 650px; width: 580px; }
.s1 .lead { top: 724px; width: 990px; font-size: 28px; line-height: 1.65; }
.s1 .tag { top: 883px; font-size: 34px; }
.product-intro .head { width: 940px; }
.product-intro .head h1 { font-size: 64px; white-space: normal; line-height: 1.25; }
.latin-name { display: inline-block; font-size: .92em; }
.product-intro .head .lead { width: 940px; font-size: 30px; margin-top: 22px; }
.product-intro .feats { top: 585px; gap: 20px; }
.product-intro .feat b { font-size: 31px; }
.product-intro .feat small { font-size: 24px; }
.product-intro .search b { font-size: 14px; white-space: nowrap; }
.product-intro .search { gap: 8px; padding-inline: 12px; }
.product-free { position: absolute; right: 128px; top: 913px; padding: 8px 22px; background: var(--pink); color: var(--red-ink); font-size: 25px; border-radius: 14px; font-weight: 600; }
.s3 .tayyib { top: 335px; font-size: 44px; }
.s3 h1 { top: 426px; font-size: 98px; }
.value-note { position: absolute; right: 128px; top: 758px; width: 960px; color: white; font-size: 28px; line-height: 1.6; }
.value-free { position: absolute; right: 128px; top: 859px; padding: 10px 26px; border: 2px solid var(--gold); color: var(--gold); border-radius: 16px; font-size: 30px; font-weight: 600; }
.s6 .head h1 { font-size: 76px; }
.s6 .sum { font-size: 43px; top: 875px; }
.category-showcase .head { top: 100px; }
.category-showcase .head h1 { font-size: 78px; }
.category-showcase .head .lead { font-size: 29px; margin-top: 14px; }
.category-grid { position: absolute; right: 128px; left: 128px; top: 355px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.category-card { min-width: 0; height: 252px; padding: 24px 24px 20px; border: 1px solid #d8e6dd; border-radius: 24px; background: white; box-shadow: 0 12px 24px -22px rgb(7 77 49 / .2); }
.category-icon { width: 65px; height: 65px; display: grid; place-items: center; background: var(--pink); color: var(--red-ink); border-radius: 18px; font-size: 36px; }
.category-card:nth-child(3n) .category-icon { background: var(--sand); color: #945c01; }
.category-card b { display: block; font-size: 28px; font-weight: 600; line-height: 1.25; margin-top: 16px; min-height: 70px; }
.category-card p { font-size: 22px; line-height: 1.4; color: var(--muted); }
.category-bottom { position: absolute; right: 128px; top: 910px; font-size: 25px; color: var(--muted); }
.s-net .head { top: 128px; width: 740px; }
.s-net .head h1 { font-size: 67px; }
.s-net .figs { top: 420px; }
.s-net .figs dt { font-size: 150px; }
.network-copy { position: absolute; right: 128px; top: 675px; font-size: 30px; color: var(--muted); line-height: 1.65; }
.network-tags { position: absolute; right: 128px; top: 825px; display: flex; gap: 12px; }
.network-tags span { padding: 12px 20px; border-radius: 14px; color: var(--red-ink); background: var(--pink); font-size: 22px; }
.s8 { background: radial-gradient(1100px 900px at 26% 46%, #155b3e, #104631 45%, #052f1d); }
.s8 .head { width: 960px; }
.s8 .head h1 { font-size: 72px; white-space: normal; }
.s8 .head .lead { font-size: 30px; line-height: 1.7; }
.s8 .loop-list { top: 585px; font-size: 27px; width: 960px; }
.s8 .say { top: 901px; right: 128px; left: auto; font-size: 30px; }
.s5 .head { right: 128px; left: auto; width: 940px; }
.s5 .head h1 { font-size: 80px; }
.s5 .head .lead { width: 940px; font-size: 30px; line-height: 1.7; margin-top: 24px; }
.s5 .checks { top: 600px; gap: 30px; font-size: 29px; }
.free-clarity { position: absolute; right: 128px; top: 893px; width: 940px; font-size: 24px; line-height: 1.6; color: var(--muted); }
.s9 .head h1 { font-size: 78px; }
.s9 .head .lead { margin-top: 14px; font-size: 29px; }
.s7 .head h1 { font-size: 77px; }
.s7 .cmp-us ul, .s7 .cmp-them ul { font-size: 26px; }
.s7 .cmp-us .cbox { flex: none; }
.s7 .cmp-them .stamp { display: none; }
.s7 .cmp-them .who { font-size: 32px; }
.s10 .head h1 { font-size: 73px; }
.s10 .tl { width: 920px; }
.s10 .tl b { font-size: 35px; }
.s10 .tl small { font-size: 26px; }
.s10 .coffee { font-size: 31px; left: 449px; }
.s11 h1 { font-size: 109px; line-height: 1.2; }
.s11 .lead { font-size: 29px; }

/* Owner-selected brass illustration, extracted with a transparent background. */
.dallah-art { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .24)); }
.s1 .dallah-wrap { left: 338px; top: 145px; width: 315px; height: 405px; --ox: 158px; --oy: 270px; }
.s8 .dallah-wrap { left: 390px; top: 143px; width: 306px; height: 390px; --ox: 153px; --oy: 260px; }
.s10 .dallah-wrap { left: 144px; top: 414px; width: 176px; height: 225px; }
.s10 .dallah-art { filter: drop-shadow(0 12px 12px rgb(80 40 10 / .18)); }
.s11 .dallah-wrap { left: 396px; top: 350px; width: 307px; height: 396px; }