/* مضياف marketing landing — light theme, logical-properties-first.
   Self-contained: own reset + self-hosted fonts below; does not depend on
   /public/styles.css. Loaded ONLY by landing-layout.eta; class prefix ml-
   avoids app collisions. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

@font-face { font-family: 'Alexandria'; font-weight: 700; font-display: swap;
  src: url('/public/fonts/alexandria-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-weight: 700; font-display: swap;
  src: url('/public/fonts/alexandria-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Alexandria'; font-weight: 800; font-display: swap;
  src: url('/public/fonts/alexandria-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-weight: 800; font-display: swap;
  src: url('/public/fonts/alexandria-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'Alexandria'; font-weight: 900; font-display: swap;
  src: url('/public/fonts/alexandria-900-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Alexandria'; font-weight: 900; font-display: swap;
  src: url('/public/fonts/alexandria-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-display: swap;
  src: url('/public/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2'); }

:root {
  --ml-bg: #FAF9F6; --ml-tint: #F2F1EB; --ml-card: #fff; --ml-line: #E8E6DF; --ml-line2: #E4E9E3;
  --ml-ink: #14251D; --ml-body: #4A5B51; --ml-mut: #3D5247; --ml-faint: #7B8A80;
  --ml-green: #0E5A3C; --ml-green-dk: #0A4630; --ml-deep: #0C3B28; --ml-mint: #EAF6EE;
  --ml-lime: #B9E24E; --ml-lime-lt: #CBEF66; --ml-live: #4CAF6E;
  --ml-amber: #B45309; --ml-amber-bg: #FDF0E3;
  --wa-shell: #17211B; --wa-screen: #0B141A; --wa-bar: #1F2C34; --wa-in: #1F2C34;
  --wa-out: #005C4B; --wa-txt: #E9EDEF; --wa-mut: #8696A0; --wa-blue: #53BDEB;
  --wa-dark: #111B21; --wa-ok: #00A884; --wa-gold: #E8B54A;
  --ml-display: 'Alexandria', sans-serif;
}
html { scroll-behavior: smooth; overflow-x: clip; }
.ml-page { background: var(--ml-bg); color: var(--ml-ink); overflow-x: hidden;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ml-page a { color: inherit; text-decoration: none; }
.ml-page ::selection { background: #CDE8D6; }
.ml-container { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }

@keyframes ml-floaty  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes ml-floaty2 { 0%,100% { transform: translateY(0) } 50% { transform: translateY(9px) } }
@keyframes ml-livedot { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Reveal-on-scroll: hidden state only when JS is running (html.js). */
html.js .ml-page [data-reveal] { opacity: 0; translate: 0 28px;
  transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1); }
html.js .ml-page [data-reveal].revealed { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .ml-page [data-reveal] { opacity: 1; translate: none; transition: none; }
  .ml-page * { animation: none !important; }
}

/* Shared atoms */
.ml-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  color: var(--ml-green); background: var(--ml-mint); border-radius: 100px; padding: 6px 16px; }
.ml-badge--amber { color: var(--ml-amber); background: var(--ml-amber-bg); }
.ml-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ml-live);
  animation: ml-livedot 2s infinite; }
.ml-h2 { font-family: var(--ml-display); font-weight: 800; color: var(--ml-ink);
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.5; margin: 18px 0 14px; }
.ml-lead { font-size: 15.5px; line-height: 1.95; color: var(--ml-body); text-wrap: pretty; }
.ml-center { text-align: center; }
.ml-center .ml-h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 0; }
.ml-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ml-green); color: #fff; border-radius: 100px; font-weight: 600;
  padding: 9px 18px; font-size: 13.5px; box-shadow: 0 4px 14px rgba(14,90,60,.25); transition: all .2s; }
.ml-btn:hover { background: var(--ml-green-dk); color: #fff; }
.ml-btn--hero { border-radius: 14px; padding: 15px 30px; font-size: 17px; font-weight: 700;
  box-shadow: 0 10px 26px -8px rgba(14,90,60,.5), 0 2px 6px rgba(14,90,60,.2); }
.ml-btn--hero:hover { transform: translateY(-2px); }
.ml-btn--lime { background: var(--ml-lime); color: var(--ml-deep); border-radius: 15px;
  padding: 17px 38px; font-size: 18px; font-weight: 800;
  box-shadow: 0 14px 34px -10px rgba(185,226,78,.45); }
.ml-btn--lime:hover { background: var(--ml-lime-lt); color: var(--ml-deep); transform: translateY(-2px); }
.ml-btn--outline { background: transparent; color: var(--ml-green); border: 1.5px solid var(--ml-green);
  border-radius: 12px; padding: 12px; font-size: 14.5px; font-weight: 700; box-shadow: none;
  display: block; text-align: center; }
.ml-btn--outline:hover { background: var(--ml-green); color: #fff; }
.ml-btn--plime { background: var(--ml-lime); color: var(--ml-deep); border-radius: 12px;
  padding: 12px; font-size: 14.5px; font-weight: 800; box-shadow: none;
  display: block; text-align: center; }
.ml-btn--plime:hover { background: var(--ml-lime-lt); color: var(--ml-deep); }
.ml-tick { color: var(--ml-green); font-weight: 800; }
.ml-money__points .ml-tick, .ml-pcard--pop .ml-tick { color: var(--ml-lime); }

/* ===== NAV (ref l.32-51) ===== */
.ml-nav { position: sticky; top: 0; z-index: 50; background: rgba(250,249,246,.85);
  backdrop-filter: blur(12px); border-block-end: 1px solid var(--ml-line); }
.ml-nav__inner { max-width: 1140px; margin-inline: auto; padding-block: 14px; padding-inline: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ml-brand { display: flex; align-items: center; gap: 10px; }
.ml-brand__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--ml-green);
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(14,90,60,.28); flex-shrink: 0; }
.ml-brand__text { display: flex; flex-direction: column; gap: 3px; }
.ml-brand__name { font-family: var(--ml-display); font-size: 20px; font-weight: 800;
  color: var(--ml-ink); line-height: 1.1; }
.ml-brand__latin { font-size: 8px; letter-spacing: 3px; color: var(--ml-faint); font-weight: 600;
  line-height: 1; direction: ltr; text-align: end; }
.ml-nav__links { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.ml-nav__links a { color: var(--ml-mut); white-space: nowrap; }
@media (max-width: 820px) { .ml-nav__links { display: none; } }
.ml-nav__lang { font-size: 13px; font-weight: 600; color: var(--ml-faint); white-space: nowrap; }
.ml-nav__lang:hover { color: var(--ml-mut); }

/* ===== HERO (ref l.53-115) ===== */
.ml-hero { position: relative; }
.ml-hero__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 480px at 78% 8%, #EAF3EC 0%, rgba(234,243,236,0) 65%); }
.ml-hero__inner { position: relative; max-width: 1140px; margin-inline: auto;
  padding-block: 72px 96px; padding-inline: 24px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 56px; }
.ml-hero__copy { flex: 1 1 420px; min-width: 300px; }
.ml-hero__h1 { font-family: var(--ml-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.35; margin-block: 22px 18px; color: var(--ml-ink); }
.ml-hero__accent { color: var(--ml-green); }
.ml-hero__sub { font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.95; color: var(--ml-body);
  margin-block: 0 30px; max-width: 520px; text-wrap: pretty; }
.ml-hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ml-hero__note { font-size: 13px; color: var(--ml-faint); }

.ml-hero__stage { flex: 1 1 360px; min-width: 300px; display: flex; justify-content: center;
  perspective: 1400px; position: relative; padding-block: 24px; }
.ml-hero__ring { position: absolute; width: 440px; height: 440px; border: 1.5px solid #DCE7DD;
  border-radius: 50%; top: 50%; inset-inline-start: 50%; translate: 50% -50%; }
[dir="ltr"] .ml-hero__ring { translate: -50% -50%; }
.ml-hero__beam { position: absolute; width: 1px; height: 480px; background: #DCE7DD; top: 50%;
  inset-inline-start: 50%; translate: 50% -50%; rotate: 24deg; }
[dir="ltr"] .ml-hero__beam { translate: -50% -50%; }

.ml-phone3d { position: relative; transform: rotateY(16deg) rotateX(5deg);
  transform-style: preserve-3d; transition: transform .18s ease-out; }
[dir="ltr"] .ml-phone3d { transform: rotateY(-16deg) rotateX(5deg); }

.ml-float { position: absolute; background: var(--ml-card); border: 1px solid var(--ml-line2);
  border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 9px;
  box-shadow: 0 16px 34px -12px rgba(16,42,32,.28); animation: ml-floaty 5.5s ease-in-out infinite;
  top: -14px; inset-inline-start: -84px; }
.ml-float__icon { width: 26px; height: 26px; border-radius: 50%; background: var(--ml-mint);
  color: var(--ml-green); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.ml-float__text { line-height: 1.4; }
.ml-float__title { font-size: 12px; display: block; }
.ml-float__sub { font-size: 10.5px; color: var(--ml-faint); }

.ml-float--paid { top: auto; bottom: 64px; inset-inline-start: auto; inset-inline-end: -66px;
  background: var(--ml-ink); color: #fff; box-shadow: 0 16px 34px -12px rgba(16,42,32,.4);
  animation: ml-floaty2 6.5s ease-in-out infinite; line-height: 1.4; align-items: flex-start; }
.ml-float--paid .ml-float__note { font-size: 10.5px; opacity: .7; display: block; }
.ml-float--paid strong { font-size: 15px; font-family: var(--ml-display); }
.ml-float--paid .ml-float__delta { font-size: 10px; color: var(--ml-lime); font-weight: 600; }

/* ===== WHATSAPP CHAT MOCKUPS (ref l.77-102 large, l.146-229 small) ===== */
/* Always direction:rtl regardless of page dir — physical values kept intentionally. */
.chat { direction: rtl; }
.chat__shell { width: 288px; background: var(--wa-shell); border-radius: 42px; padding: 11px;
  box-shadow: 0 42px 70px -24px rgba(16,42,32,.42), 0 12px 28px -10px rgba(16,42,32,.22); }
.chat__screen { background: var(--wa-screen); border-radius: 32px; overflow: hidden; }
.chat__head { background: var(--wa-bar); color: var(--wa-txt); padding: 11px 14px;
  display: flex; align-items: center; gap: 10px; }
.chat__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--wa-gold);
  color: var(--wa-bar); display: grid; place-items: center; font-family: var(--ml-display);
  font-weight: 800; font-size: 14px; flex-shrink: 0; }
.chat__headtext { display: flex; flex-direction: column; line-height: 1.3; }
.chat__name { font-size: 13px; font-weight: 700; }
.chat__status { font-size: 9.5px; color: var(--wa-mut); }
.chat__menu { margin-inline-start: auto; color: var(--wa-mut); font-size: 15px; }
.chat__body { padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 400px; }
.chat--sm .chat__body { justify-content: center; }
.chat__day { align-self: center; background: var(--wa-bar); color: var(--wa-mut); border-radius: 8px;
  padding: 3px 12px; font-size: 9.5px; font-weight: 600; }
.chat__msg { border-radius: 11px; padding: 7px 10px; font-size: 11.5px; max-width: 72%; }
.chat__msg--out { background: var(--wa-out); color: var(--wa-txt); border-radius: 11px 11px 3px 11px;
  align-self: flex-end; }
.chat__msg--in { background: var(--wa-bar); color: var(--wa-txt); border-radius: 11px 11px 11px 3px;
  padding: 8px 10px 5px; font-size: 11.5px; line-height: 1.7; max-width: 90%; align-self: flex-start; }
.chat__meta { display: flex; justify-content: flex-end; gap: 3px; font-size: 8px;
  color: rgba(233,237,239,.55); margin-top: 2px; }
.chat__meta--in { display: block; text-align: left; font-size: 8px; color: var(--wa-mut); margin-top: 2px; }
.chat__tick { color: var(--wa-blue); }
.chat__opt { display: block; border-top: 1px solid rgba(134,150,160,.25); color: var(--wa-blue);
  text-align: center; padding: 6px 0 4px; font-size: 11px; font-weight: 600; margin-top: 5px; }
.chat__opt:last-child { padding-block-end: 0; }
.chat__slot { display: flex; justify-content: space-between; background: var(--wa-dark);
  border-radius: 7px; padding: 5px 10px; font-size: 10.5px; margin-top: 6px; }
.chat__slot span:last-child { color: var(--wa-blue); }
.chat__slot.is-taken { opacity: .45; }
.chat__slot.is-taken span:last-child { color: var(--wa-mut); }
.chat__pay { display: block; border-top: 1px solid rgba(134,150,160,.25); color: var(--wa-blue);
  text-align: center; padding: 6px 0 0; font-size: 11px; font-weight: 700; margin-top: 6px; }

.chat__summaryMsg { background: var(--wa-bar); color: var(--wa-txt); border-radius: 9px 9px 9px 3px;
  padding: 8px 10px; font-size: 9.5px; line-height: 1.7; max-width: 96%; align-self: flex-start; }
.chat__summaryTitle { display: block; text-align: center; font-size: 10.5px; margin-bottom: 5px; font-weight: 700; }
.chat__summary { display: flex; justify-content: space-between; padding: 2px 0; }
.chat__summary-label { color: var(--wa-mut); }
.chat__summary-total { display: flex; justify-content: space-between; padding: 4px 0 2px;
  border-top: 1px solid rgba(134,150,160,.25); margin-top: 4px; }
.chat__summary-total span { color: var(--wa-mut); font-weight: 700; }
.chat__summary-total strong { color: var(--wa-gold); }
.chat__actions { display: flex; gap: 6px; margin-top: 7px; }
.chat__actionBtn { flex: 1; background: #2A3942; color: var(--wa-blue); text-align: center;
  border-radius: 8px; padding: 5px; font-size: 9.5px; font-weight: 600; }
.chat__actionBtn--primary { font-weight: 700; }

.chat__confirm { background: var(--wa-bar); border: 1px solid rgba(0,168,132,.35); border-radius: 12px;
  padding: 13px 10px; text-align: center; align-self: center; width: 90%; }
.chat__confirm-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,168,132,.15);
  color: var(--wa-ok); display: grid; place-items: center; font-weight: 800; font-size: 18px; margin: 0 auto 7px; }
.chat__confirm-title { font-size: 11.5px; color: var(--wa-txt); display: block; margin-bottom: 3px; font-weight: 700; }
.chat__confirm-sub { font-size: 9px; color: var(--wa-mut); line-height: 1.7; display: block; }
.chat__confirm-status { font-size: 9.5px; color: var(--wa-ok); font-weight: 700; display: block; margin-top: 5px; }
.chat__confirmNote { background: var(--wa-dark); color: var(--wa-txt); border: 1px solid rgba(134,150,160,.2);
  border-radius: 10px; padding: 8px 10px; font-size: 9.5px; align-self: center; width: 90%;
  display: flex; align-items: center; gap: 7px; line-height: 1.5; }

/* .chat--sm (ref l.146-229) */
.chat--sm .chat__shell { width: 228px; border-radius: 32px; padding: 8px;
  box-shadow: 0 24px 44px -18px rgba(16,42,32,.35); }
.chat--sm .chat__screen { border-radius: 25px; }
.chat--sm .chat__head { padding: 9px 12px; font-size: 11px; gap: 8px; }
.chat--sm .chat__avatar { width: 24px; height: 24px; font-size: 11px; }
.chat--sm .chat__status { font-size: 8px; font-weight: 400; }
.chat--sm .chat__menu { font-size: 13px; }
.chat--sm .chat__body { padding: 11px 10px 14px; gap: 7px; min-height: 252px; }
.chat--sm .chat__day { padding: 2px 10px; font-size: 8.5px; }
.chat--sm .chat__msg { font-size: 10px; padding: 6px 9px; }
.chat--sm .chat__msg--out { border-radius: 9px 9px 3px 9px; padding: 6px 9px; }
.chat--sm .chat__msg--in { border-radius: 9px 9px 9px 3px; padding: 7px 9px 4px; font-size: 10px; }
.chat--sm .chat__meta, .chat--sm .chat__meta--in { font-size: 7.5px; }
.chat--sm .chat__opt { font-size: 9.5px; padding: 5px 0 4px; }
.chat--sm .chat__opt:last-child { padding-block-end: 0; }
.chat--sm .chat__slot { border-radius: 6px; padding: 4px 9px; font-size: 9px; margin-top: 5px; }
.chat--sm .chat__pay { font-size: 9.5px; padding: 5px 0 0; }
.chat--sm .chat__summaryMsg { padding: 8px 10px; font-size: 9.5px; }

/* ===== MONEY BAND (ref l.117-135) ===== */
.ml-money { background: var(--ml-deep); position: relative; overflow: hidden; }
.ml-ring { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.ml-money .ml-ring:nth-child(1) { width: 560px; height: 560px; top: -260px; inset-inline-end: -160px; }
.ml-money .ml-ring:nth-child(2) { width: 340px; height: 340px; bottom: -180px;
  inset-inline-start: -90px; border-color: rgba(255,255,255,.07); }
.ml-money__inner { position: relative; max-width: 1140px; margin-inline: auto;
  padding-block: 76px; padding-inline: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.ml-money__pct { font-family: var(--ml-display); font-weight: 900; font-size: clamp(72px, 10vw, 128px);
  line-height: 1; color: var(--ml-lime); letter-spacing: -2px; flex: 0 0 auto; }
.ml-money__body { flex: 1 1 380px; min-width: 280px; }
.ml-money__h2 { font-family: var(--ml-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px);
  color: #fff; margin: 0 0 12px; line-height: 1.5; }
.ml-money__p { color: #B9CEC0; font-size: 15.5px; line-height: 1.95; margin: 0 0 20px;
  max-width: 640px; text-wrap: pretty; }
.ml-money__points { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ml-money__point { display: inline-flex; align-items: center; gap: 7px; color: var(--ml-mint);
  font-size: 13.5px; font-weight: 500; }

/* ===== JOURNEY (ref l.137-235) ===== */
.ml-journey { max-width: 1140px; margin-inline: auto; padding-block: 96px 80px; padding-inline: 24px; }
.ml-journey__head { text-align: center; margin-block-end: 56px; }
.ml-journey__eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: var(--ml-green);
  background: var(--ml-mint); border-radius: 100px; padding: 6px 16px; }
.ml-journey__title { font-family: var(--ml-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 40px);
  margin: 18px 0 0; color: var(--ml-ink); }
.ml-journey__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; perspective: 1800px; }
.ml-step { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ml-step .chat__shell { transition: transform .3s; }
.ml-step:nth-child(1) .chat__shell { transform: rotateY(7deg); }
.ml-step:nth-child(2) .chat__shell { transform: rotateY(3deg); }
.ml-step:nth-child(3) .chat__shell { transform: rotateY(-3deg); }
.ml-step:nth-child(4) .chat__shell { transform: rotateY(-7deg); }
.ml-step .chat__shell:hover { transform: rotateY(0deg) translateY(-6px); }
.ml-step__cap { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ml-mut);
  display: flex; align-items: center; gap: 8px; }
.ml-step__num { width: 22px; height: 22px; border-radius: 50%; background: var(--ml-green); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; font-family: var(--ml-display); }

/* ===== LIVE PRICE (ref l.237-272) ===== */
.ml-live { max-width: 1140px; margin-inline: auto; padding-block: 40px 96px; padding-inline: 24px; }
.ml-live__card { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 28px;
  padding: clamp(28px,5vw,56px); box-shadow: 0 24px 60px -30px rgba(20,37,29,.18);
  display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.ml-live__copy { flex: 1 1 380px; min-width: 280px; }
.ml-toggle { background: var(--ml-ink); color: #fff; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 9px; }
.ml-toggle:hover { background: var(--ml-green); }
.ml-live__demo { flex: 1 1 420px; min-width: 300px; display: flex; align-items: center;
  justify-content: center; gap: 14px; flex-wrap: wrap; }

.ml-panel { background: #F7F6F2; border: 1px solid var(--ml-line); border-radius: 18px;
  padding: 18px; width: 200px; }
.ml-panel__label { font-size: 11px; font-weight: 700; color: var(--ml-faint); letter-spacing: .5px; }
.ml-panel__row { background: var(--ml-card); border: 1px solid var(--ml-line2); border-radius: 12px;
  padding: 12px 14px; margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.ml-panel__row-label { font-size: 12px; color: var(--ml-mut); }
.ml-panel__price { font-family: var(--ml-display); font-size: 17px; color: var(--ml-green); }
[data-peak-badge] { display: none; margin-top: 10px; background: var(--ml-amber-bg); color: var(--ml-amber);
  border-radius: 100px; padding: 4px 12px; font-size: 10.5px; font-weight: 700; }
[data-peak-badge]:not([hidden]) { display: inline-block; }

.ml-arrow { color: var(--ml-green); font-size: 26px; font-weight: 800; transform: scaleX(-1);
  display: inline-block; }
[dir="ltr"] .ml-arrow { transform: none; }

.ml-wchat { direction: rtl; background: var(--wa-screen); border-radius: 18px; padding: 14px;
  width: 212px; box-shadow: 0 14px 30px -14px rgba(11,20,26,.5); }
.ml-wchat__label { font-size: 11px; font-weight: 700; color: var(--wa-mut); }
.ml-wchat__slot { background: var(--wa-bar); color: var(--wa-txt); border-radius: 11px 11px 11px 4px;
  padding: 9px 11px; font-size: 11px; line-height: 1.7; margin-top: 10px; }
.ml-wchat__slot-row { display: flex; justify-content: space-between; background: var(--wa-dark);
  border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 700; margin-top: 7px;
  color: var(--wa-blue); transition: all .3s; }
.ml-wchat__slot-row span:last-child { white-space: nowrap; }
.ml-wchat__pay { background: var(--wa-bar); border-radius: 11px; padding: 9px 11px; font-size: 10.5px;
  margin-top: 9px; display: flex; justify-content: space-between; align-items: center; }
.ml-wchat__pay-label { color: var(--wa-mut); }
.ml-wchat__pay-price { font-family: var(--ml-display); font-size: 13px; color: var(--wa-gold);
  transition: all .3s; white-space: nowrap; }

/* ===== SITE + DASHBOARD (ref l.274-318) ===== */
.ml-site { background: var(--ml-tint); border-block: 1px solid var(--ml-line); }
.ml-site__inner { max-width: 1140px; margin-inline: auto; padding-block: 96px; padding-inline: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.ml-site__copy { flex: 1 1 400px; min-width: 300px; }
.ml-site__title { font-family: var(--ml-display); font-weight: 800; font-size: clamp(24px, 3.2vw, 36px);
  margin: 18px 0 14px; color: var(--ml-ink); line-height: 1.5; }
.ml-site__p { font-size: 15.5px; line-height: 1.95; color: var(--ml-body); margin: 0; max-width: 500px;
  text-wrap: pretty; }
.ml-site__visual { flex: 1 1 480px; min-width: 300px; perspective: 1600px; display: flex; justify-content: center; }

.ml-laptop { transform: rotateX(6deg) rotateY(-9deg); transform-style: preserve-3d; transition: transform .4s; }
.ml-laptop:hover { transform: rotateX(2deg) rotateY(-3deg); }
[dir="ltr"] .ml-laptop { transform: rotateX(6deg) rotateY(9deg); }
[dir="ltr"] .ml-laptop:hover { transform: rotateX(2deg) rotateY(3deg); }
.ml-laptop__lid { width: min(560px,86vw); background: var(--wa-shell); border-radius: 20px 20px 4px 4px;
  padding: 12px 12px 18px; box-shadow: 0 40px 70px -26px rgba(16,42,32,.4); }
.ml-laptop__screen { background: var(--ml-bg); border-radius: 10px; overflow: hidden; display: flex; min-height: 300px; }
.ml-laptop__side { width: 132px; background: var(--ml-ink); color: #fff; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.ml-laptop__brand { font-family: var(--ml-display); font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.ml-laptop__side span { padding: 6px 10px; font-size: 10.5px; color: #9DB2A6; }
.ml-laptop__side .is-on { background: rgba(255,255,255,.12); border-radius: 8px; font-weight: 600; color: inherit; }
.ml-laptop__main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ml-stat-row { display: flex; gap: 8px; }
.ml-stat { flex: 1; background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 10px;
  padding: 9px 11px; line-height: 1.5; }
.ml-stat__label { font-size: 9px; color: var(--ml-faint); }
.ml-stat__value { font-family: var(--ml-display); font-size: 15px; }
.ml-stat__value--green { color: var(--ml-green); }
.ml-cal { flex: 1; background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 10px;
  padding: 11px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; align-content: start; }
.ml-cal__title { grid-column: 1/-1; font-size: 9.5px; font-weight: 700; color: var(--ml-faint); margin-bottom: 2px; }
.ml-cal__cell { border-radius: 6px; padding: 5px 7px; font-size: 8.5px; line-height: 1.5; }
.ml-cal__cell.is-booked { background: var(--ml-mint); border-inline-start: 3px solid var(--ml-green); }
.ml-cal__cell.is-open { background: #F7F6F2; border: 1px dashed #C9D4CC; color: var(--ml-faint); }
.ml-cal__cell.is-peak { background: var(--ml-amber-bg); border-inline-start: 3px solid var(--ml-amber); }
.ml-laptop__base { width: min(660px,96vw); height: 14px; background: linear-gradient(#2A362F,#17211B);
  border-radius: 3px 3px 14px 14px; margin: 0 auto; box-shadow: 0 18px 30px -12px rgba(16,42,32,.35); }

/* ===== FEATURES (ref l.320-352) ===== */
.ml-features { max-width: 1140px; margin-inline: auto; padding-block: 96px; padding-inline: 24px; }
.ml-features__head { text-align: center; margin-block-end: 52px; }
.ml-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.ml-fcard { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 20px;
  padding: 26px 24px; transition: transform .25s, box-shadow .25s; }
.ml-fcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(20,37,29,.2); }
.ml-fcard h3 { font-family: var(--ml-display); font-weight: 700; font-size: 17px; color: var(--ml-green);
  margin: 0 0 16px; padding-block-end: 12px; border-block-end: 2px solid var(--ml-mint); }
.ml-fcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 9px; font-size: 13.5px; color: var(--ml-mut); line-height: 1.6; }

/* ===== COMING SOON (ref l.354-380) ===== */
.ml-soon { background: var(--ml-tint); border-block: 1px solid var(--ml-line); }
.ml-soon__inner { max-width: 1140px; margin-inline: auto; padding-block: 96px; padding-inline: 24px; }
.ml-soon__head { text-align: center; margin-block-end: 52px; }
.ml-sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; }
.ml-scard { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 22px; padding: 30px 28px; }
.ml-scard--dark { background: var(--ml-deep); color: #fff; position: relative; overflow: hidden; border: none; }
.ml-scard--dark .ml-ring { width: 220px; height: 220px; top: -110px; inset-inline-end: -70px;
  border-color: rgba(255,255,255,.09); }
.ml-scard__tag { position: relative; background: var(--ml-lime); color: var(--ml-deep); border-radius: 100px;
  padding: 4px 14px; font-size: 11px; font-weight: 800; }
.ml-scard__tag--ghost { border: 1px solid var(--ml-line); color: var(--ml-faint); background: transparent;
  font-weight: 700; }
.ml-scard h3 { position: relative; font-family: var(--ml-display); font-weight: 700; font-size: 19px;
  margin: 16px 0 10px; color: var(--ml-ink); }
.ml-scard--dark h3 { color: #fff; }
.ml-scard p { position: relative; font-size: 14px; line-height: 1.9; color: var(--ml-body); margin: 0; }
.ml-scard--dark p { color: #B9CEC0; }

/* ===== PRICING (ref l.382-435) ===== */
.ml-pricing { max-width: 1140px; margin-inline: auto; padding-block: 96px; padding-inline: 24px; }
.ml-pricing__head { text-align: center; margin-block-end: 14px; }
.ml-pricing__title { font-family: var(--ml-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 40px);
  margin: 18px 0 10px; color: var(--ml-ink); }
.ml-pricing__note { font-size: 14.5px; color: var(--ml-faint); margin: 0 0 70px; }
.ml-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 20px;
  align-items: start; perspective: 1800px; }
.ml-pcard { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 24px;
  padding: 32px 28px; transition: transform .3s, box-shadow .3s; position: relative; }
.ml-pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(20,37,29,.22); }
.ml-pcard h3 { font-family: var(--ml-display); font-weight: 700; font-size: 19px; margin: 0 0 6px; color: var(--ml-ink); }
.ml-pcard--pop { background: var(--ml-deep); color: #fff; box-shadow: 0 30px 60px -24px rgba(12,59,40,.5);
  transform: translateY(-10px); }
.ml-pcard--pop:hover { transform: translateY(-16px); }
.ml-pcard--pop h3 { color: #fff; }
.ml-pcard__flag { position: absolute; top: -13px; inset-inline-start: 28px; background: var(--ml-lime);
  color: var(--ml-deep); border-radius: 100px; padding: 5px 16px; font-size: 11.5px; font-weight: 800; }
.ml-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 22px; }
.ml-price strong { font-family: var(--ml-display); font-size: 42px; font-weight: 800; color: var(--ml-ink); }
.ml-pcard--pop .ml-price strong { color: var(--ml-lime); }
.ml-price--custom strong { font-size: 28px; }
.ml-price__per { font-size: 16px; color: var(--ml-mut); font-weight: 600; }
.ml-pcard--pop .ml-price__per { color: #B9CEC0; }
.ml-pcard ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column;
  gap: 10px; font-size: 13.5px; color: var(--ml-mut); }
.ml-pcard--pop ul { color: #DCEAE0; }
.ml-pcard li { display: flex; gap: 8px; }
.ml-chips { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.ml-chip { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 100px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 600; color: var(--ml-mut); }

/* ===== FINAL CTA (ref l.437-449) ===== */
.ml-cta { max-width: 1140px; margin-inline: auto; padding-block: 20px 110px; padding-inline: 24px; }
.ml-cta__card { background: var(--ml-deep); border-radius: 32px; padding: clamp(48px,7vw,80px) 32px;
  text-align: center; position: relative; overflow: hidden; }
.ml-cta__ring { position: absolute; width: 480px; height: 480px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%; top: 50%; inset-inline-start: 50%; translate: 50% -50%; }
[dir="ltr"] .ml-cta__ring { translate: -50% -50%; }
.ml-cta__beam { position: absolute; width: 1px; height: 100%; background: rgba(255,255,255,.08);
  top: 0; inset-inline-start: 50%; }
.ml-cta__title { position: relative; font-family: var(--ml-display); font-weight: 800;
  font-size: clamp(28px,4vw,44px); color: #fff; margin: 0 0 16px; }
.ml-cta__p { position: relative; color: #B9CEC0; font-size: 16px; line-height: 1.9; margin: 0 auto 32px; max-width: 480px; }
.ml-cta .ml-btn--lime { position: relative; }

/* ===== FOOTER (ref l.451-463) ===== */
.ml-footer { border-block-start: 1px solid var(--ml-line); background: #F7F6F2; }
.ml-footer__inner { max-width: 1140px; margin-inline: auto; padding-block: 40px; padding-inline: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.ml-footer__tag { margin: 0; font-size: 13px; color: var(--ml-faint); text-align: center; }
.ml-footer__wa { font-size: 13.5px; font-weight: 700; color: var(--ml-green); }
.ml-footer__num { direction: ltr; unicode-bidi: isolate; font-weight: 600; }