/* ============================================================
   Grownerd landing — static HTML/CSS so search engines and the
   first paint both get real content. Flutter boots behind this
   and takes over when the visitor taps a CTA (see landing.js).

   Palette mirrors lib/theme/app_colors.dart so the handoff to the
   Flutter app has no visual jump.
   ============================================================ */

:root {
  --bg: #0A0E0C;
  --surface: #121A16;
  --surface-el: #18231D;
  --border: #23302A;
  --green: #14513E;
  --green-lt: #1D6B52;
  --gold: #C9A227;
  --gold-lt: #E0BE4E;
  --text: #E8EDE9;
  --text-dim: #8FA398;
  --nav-h: 68px;
}

/* ── shell ───────────────────────────────────────────────── */
#landing {
  position: relative;
  z-index: 10;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#landing *, #landing *::before, #landing *::after { box-sizing: border-box; }
#landing h1, #landing h2, #landing p { margin: 0; }

html[data-mode="landing"] { scroll-behavior: smooth; }
/* الـ nav لاصق، فبلا هيدا العنوان ينختفي تحته لمّا تضغط رابط */
.lz-sec, footer.lz-foot { scroll-margin-top: 76px; }

/* ── animated background glow ────────────────────────────── */
/* محصورة بمنطقة الهيرو: لو خلّيناها inset:0 عالصفحة كلها (١٠٦٨٨px)،
   الإزاحات بالنسبة المئوية تطلع البلوبز برّا الشاشة ويروح توهّج الهيرو —
   وكمان طبقات blur بهيدا الحجم تقتل الأداء. */
.lz-blobs {
  position: absolute;
  inset: 0 0 auto;
  height: min(1000px, 120vh);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.lz-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.lz-blob.a {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
  background: radial-gradient(circle, var(--green-lt), transparent 70%);
  top: -12%; inset-inline-start: -8%;
  animation: lz-drift-a 22s ease-in-out infinite alternate;
}
.lz-blob.b {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  opacity: 0.22;
  bottom: -10%; inset-inline-end: -6%;
  animation: lz-drift-b 26s ease-in-out infinite alternate;
}
@keyframes lz-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 8vh, 0) scale(1.15); }
}
@keyframes lz-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-5vw, -6vh, 0) scale(1); }
}

/* ── nav ─────────────────────────────────────────────────── */
.lz-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(10, 14, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, height .25s;
}
.lz-nav.scrolled {
  height: 58px;
  border-bottom-color: var(--border);
}
.lz-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.2px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.lz-brand img {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #fff;
  padding: 2px;
}
.lz-links {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}
.lz-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 11px;
  border-radius: 9px;
  transition: color .18s, background .18s;
}
.lz-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }

.lz-nav-cta {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.lz-links + .lz-nav-cta { margin-inline-start: 12px; }
.lz-nav > .lz-nav-cta:nth-child(2) { margin-inline-start: auto; }

/* ── buttons ─────────────────────────────────────────────── */
.lz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s, box-shadow .22s, background .2s, border-color .2s;
}
.lz-btn:active { transform: translateY(1px) scale(.99); }

.lz-btn.gold {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  color: #1A2420;
  box-shadow: 0 6px 22px -6px rgba(201, 162, 39, .55);
}
.lz-btn.gold:hover {
  box-shadow: 0 10px 30px -6px rgba(201, 162, 39, .7);
  transform: translateY(-2px);
}
.lz-btn.solid {
  background: var(--green);
  color: #fff;
}
.lz-btn.solid:hover { background: var(--green-lt); transform: translateY(-2px); }
.lz-btn.ghost {
  background: rgba(255,255,255,.04);
  border-color: var(--border);
  color: var(--text);
}
.lz-btn.ghost:hover { background: rgba(255,255,255,.09); border-color: var(--green-lt); }
.lz-btn.sm { padding: 9px 16px; font-size: 14px; border-radius: 10px; }

/* ── hero ────────────────────────────────────────────────── */
.lz-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 84px) clamp(20px, 5vw, 48px) clamp(48px, 8vw, 110px);
}

.lz-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-lt);
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .32);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.lz-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-lt);
  box-shadow: 0 0 0 0 rgba(224, 190, 78, .7);
  animation: lz-pulse 2.2s infinite;
}
@keyframes lz-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(224, 190, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 190, 78, 0); }
}

.lz-hero h1 {
  font-size: clamp(36px, 5.8vw, 68px);
  /* العربي بحاجة line-height أوسع من اللاتيني — 1.08 كان يخلي النزلات
     تتراكب مع النصّ اللي تحته. */
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.lz-hero h1 .grad {
  background: linear-gradient(120deg, var(--gold-lt) 10%, var(--green-lt) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lz-sub {
  margin-top: 22px;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.85;
  color: var(--text-dim);
  max-width: 36ch;
}
.lz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.lz-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-dim);
}

.lz-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.lz-stat b {
  display: block;
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.lz-stat span { font-size: 13px; color: var(--text-dim); }

/* ── phone mock ──────────────────────────────────────────── */
.lz-phone-wrap {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}
.lz-phone {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 390 / 844;
  background: #050706;
  border: 9px solid #1b241f;
  border-radius: 46px;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 255, 255, .05),
    0 0 90px -30px rgba(29, 107, 82, .55);
  transform: rotateY(-9deg) rotateX(3deg) rotateZ(-1.5deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  animation: lz-float 7s ease-in-out infinite;
}
.lz-phone:hover { transform: rotateY(0) rotateX(0) rotateZ(0) scale(1.02); }
@keyframes lz-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.lz-phone img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 37px;
  display: block;
}
/* ملاحظة: ما في dynamic island مرسوم — السكرين شوت مأخوذ بلا شريط حالة،
   فأي island رح يغطّي هيدر التطبيق نفسه. */

/* ══════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════ */
.lz-sec {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 48px);
}
.lz-sec.tight { padding-top: clamp(20px, 3vw, 40px); }
.lz-sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.lz-sec-head.mid { margin-inline: auto; text-align: center; }

.lz-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--gold);
  margin-bottom: 14px;
}
.lz-sec h2 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -0.4px;
}
.lz-sec h2 .grad {
  background: linear-gradient(120deg, var(--gold-lt) 10%, var(--green-lt) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lz-lead {
  margin-top: 16px;
  font-size: clamp(15.5px, 1.7vw, 18px);
  line-height: 1.9;
  color: var(--text-dim);
}

.lz-divider {
  height: 1px;
  max-width: 1180px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── the problem ─────────────────────────────────────────── */
.lz-pains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
}
.lz-pain {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.lz-pain .em { font-size: 26px; display: block; margin-bottom: 12px; }
.lz-pain b { display: block; font-size: 17px; margin-bottom: 8px; }
.lz-pain p { font-size: 14.5px; line-height: 1.85; color: var(--text-dim); }

.lz-pain-answer {
  margin-top: 22px;
  padding: 26px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(29,107,82,.28), rgba(201,162,39,.10));
  border: 1px solid rgba(29,107,82,.5);
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.85;
}
.lz-pain-answer span { color: var(--gold-lt); }

/* ── bento features ──────────────────────────────────────── */
.lz-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.lz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  grid-column: span 2;
  transition: border-color .25s, transform .25s, background .25s;
}
.lz-card:hover {
  border-color: rgba(29,107,82,.75);
  background: var(--surface-el);
  transform: translateY(-3px);
}
.lz-card.wide { grid-column: span 3; }
.lz-card.hero-card {
  grid-column: span 6;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(29,107,82,.3), transparent 60%),
    var(--surface);
}
.lz-card .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  font-size: 23px;
  border-radius: 13px;
  background: rgba(29,107,82,.22);
  border: 1px solid rgba(29,107,82,.4);
  margin-bottom: 16px;
}
.lz-card h3 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 10px;
}
.lz-card p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-dim);
  margin: 0;
}
.lz-card .tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-lt);
  background: rgba(201,162,39,.1);
  border: 1px solid rgba(201,162,39,.3);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ── laptop mock ─────────────────────────────────────────── */
.lz-laptop-wrap { margin-top: clamp(28px, 4vw, 44px); }
.lz-laptop { max-width: 1000px; margin: 0 auto; }
.lz-laptop-lid {
  background: #1b241f;
  border: 1px solid #2c3a33;
  border-radius: 16px 16px 6px 6px;
  padding: 12px 12px 14px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), 0 0 100px -40px rgba(29,107,82,.4);
}
.lz-laptop-screen {
  aspect-ratio: 16 / 9.4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid #0c1310;
}
/* كاميرا صغيرة بأعلى الإطار */
.lz-laptop-cam {
  display: block;
  width: 5px; height: 5px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: #0c1310;
  box-shadow: inset 0 0 0 1px #38473f;
}

/* المفصل بين الشاشة والقاعدة */
.lz-laptop-hinge {
  height: clamp(5px, 0.7vw, 8px);
  max-width: 94%;
  margin: 0 auto;
  background: linear-gradient(180deg, #0e1512, #223029);
  border-radius: 0 0 4px 4px;
}

/* القاعدة: شبه منحرف — الحافة القريبة (تحت) أعرض بحكم المنظور */
.lz-laptop-base {
  display: flex;
  flex-direction: column;
  height: clamp(44px, 6.8vw, 74px);
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(5px, 0.8vw, 9px) 8% clamp(4px, 0.6vw, 7px);
  background:
    linear-gradient(180deg, #2f3d35 0%, #202b25 38%, #161e1a 100%);
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

/* الكيبورد: صفوف مفاتيح مرسومة بالـ gradient — بلا أي DOM زيادة */
.lz-kb {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5px, 0.25vw, 3px);
  flex: 1;
  min-height: 0;
}
.lz-kb-row {
  flex: 1;
  border-radius: 1.5px;
  /* كل مفتاح = شريحة فاتحة، وبينها فراغ غامق */
  background-image: repeating-linear-gradient(
    90deg,
    #3a4a41 0, #3a4a41 3.6%,
    transparent 3.6%, transparent 4.9%
  );
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45));
}
/* الصفوف السفلية مفاتيحها أعرض شوي — أقرب لشكل كيبورد حقيقي */
.lz-kb-row.r1 { opacity: .78; }
.lz-kb-row.r4 {
  background-image: repeating-linear-gradient(
    90deg, #3a4a41 0, #3a4a41 4.4%, transparent 4.4%, transparent 5.9%);
}
.lz-kb-row.r5 {
  background-image: repeating-linear-gradient(
    90deg, #3a4a41 0, #3a4a41 6%, transparent 6%, transparent 7.8%);
}
.lz-kb-space {
  flex: 0 0 auto;
  height: clamp(3px, 0.42vw, 5px);
  margin: clamp(1.5px, 0.25vw, 3px) 26% 0;
  border-radius: 2px;
  background: #3a4a41;
  opacity: .9;
}
/* التاتش باد — تحت الكيبورد بمسافة واضحة، مو متراكب معه */
.lz-trackpad {
  flex: 0 0 auto;
  width: 19%;
  height: clamp(7px, 1.1vw, 12px);
  margin: clamp(3px, 0.5vw, 6px) auto 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #384740, #232e28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
}

/* الحافة الأمامية + النتوء اللي بتفتح منه */
.lz-laptop-foot {
  height: clamp(5px, 0.8vw, 9px);
  max-width: 1010px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #1b241f, #0d1310);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 26px 40px -26px rgba(0,0,0,.9);
}
.lz-laptop-foot::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  translate: -50% 0;
  width: 13%; height: 45%;
  background: #0a0f0d;
  border-radius: 0 0 5px 5px;
}
.lz-shot-note {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

/* the three-pane app recreation; everything inside sizes in em
   off this one font-size so the whole thing scales together */
.lz-app {
  display: flex;
  height: 100%;
  font-size: clamp(5.5px, 0.83vw, 10px);
  text-align: start;
}
.lz-app-pane { display: flex; flex-direction: column; min-width: 0; }
.lz-app-chats { width: 21%; border-inline-start: 0.1em solid var(--border); }
.lz-app-main  { flex: 1; }
.lz-app-book  { width: 26%; border-inline-end: 0.1em solid var(--border); }

.lz-app-bar {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1.1em;
  background: var(--green);
  font-size: 1.35em;
  font-weight: 800;
  flex-shrink: 0;
}
.lz-app-bar.dim { background: var(--surface); color: var(--text-dim); font-weight: 700; }
.lz-app-bar .sp { margin-inline-start: auto; opacity: .8; font-weight: 400; }

.lz-app-body { flex: 1; padding: 1.2em; overflow: hidden; }

.lz-bubble {
  background: #2a2f2c;
  border-radius: 0.9em;
  padding: 1.2em 1.3em;
  font-size: 1.25em;
  line-height: 1.95;
}
.lz-bubble .hi { color: var(--gold-lt); font-weight: 800; }
.lz-bubble ul { margin: .8em 0 0; padding-inline-start: 1.4em; }
.lz-bubble li { margin-bottom: .35em; }
.lz-bubble .stamp {
  margin-top: 1em;
  font-size: .85em;
  color: var(--text-dim);
}
/* رسالة المستخدم: بالـ RTL الهامش لازم يكون على الـ end (يسار) مشان
   البابل تلزق باليمين زي أي شات عربي. */
.lz-bubble.me {
  background: var(--green);
  margin-inline-end: 24%;
  margin-bottom: 1em;
}

/* the derivative formula, plain HTML.
   direction:ltr is required — inside an RTL container the flex items
   reorder and d/dx jumps to the wrong side of the equation. */
.lz-eq {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  margin-top: 1.1em;
  font-family: 'Times New Roman', serif;
  font-size: 1.9em;
  font-style: italic;
}
.lz-frac { display: inline-flex; flex-direction: column; text-align: center; line-height: 1.15; }
.lz-frac .num { border-bottom: 1px solid currentColor; padding: 0 .18em; }

.lz-app-input {
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 1.2em 1.2em;
  padding: .8em 1em;
  background: var(--surface-el);
  border: 0.1em solid var(--border);
  border-radius: 1.4em;
  font-size: 1.2em;
  color: var(--text-dim);
  flex-shrink: 0;
}
.lz-app-input .send {
  margin-inline-start: auto;
  width: 2em; height: 2em;
  border-radius: 50%;
  background: var(--green-lt);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}

.lz-chat-item {
  margin: 0 .9em .7em;
  padding: .9em 1em;
  border-radius: .7em;
  background: var(--surface);
  border: 0.1em solid var(--border);
  font-size: 1.15em;
}
.lz-chat-item.on { background: rgba(29,107,82,.3); border-color: var(--green-lt); }
.lz-chat-item b { display: block; font-weight: 800; margin-bottom: .3em; }
.lz-chat-item span { color: var(--text-dim); font-size: .9em; }
.lz-new {
  margin: .9em;
  padding: .9em;
  text-align: center;
  border-radius: .7em;
  background: var(--green);
  font-size: 1.2em;
  font-weight: 800;
  flex-shrink: 0;
}

.lz-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text-dim);
  flex-shrink: 0;
}
.lz-page-nav .cur {
  color: var(--gold-lt);
  border: 0.1em solid rgba(201,162,39,.4);
  border-radius: 1em;
  padding: .35em .8em;
}
.lz-book-page {
  flex: 1;
  margin: 0 .9em;
  background: #fdfdfb;
  border-radius: .5em;
  padding: 1.2em;
  overflow: hidden;
  color: #1a2420;
  font-size: 1.05em;
  line-height: 1.8;
}
.lz-book-page .t { color: #b3261e; font-weight: 800; font-size: 1.3em; text-align: center; }
.lz-book-page .s { color: #14513E; font-weight: 700; margin-top: .8em; }
.lz-book-page .ln {
  height: .5em;
  margin-top: .75em;
  background: #e3e0d6;
  border-radius: .25em;
}
.lz-book-page .ln.w70 { width: 70%; }
.lz-book-page .ln.w85 { width: 85%; }
.lz-book-page .ln.w55 { width: 55%; }
.lz-book-btns { display: flex; gap: .6em; padding: .9em; flex-shrink: 0; }
.lz-book-btns span {
  flex: 1;
  text-align: center;
  padding: .9em;
  border-radius: .7em;
  font-size: 1.15em;
  font-weight: 800;
}
.lz-book-btns .a { background: var(--green); }
.lz-book-btns .b { background: var(--surface-el); border: 0.1em solid var(--border); }

/* ── grades ──────────────────────────────────────────────── */
.lz-grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.lz-grade {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  transition: border-color .25s, transform .25s;
}
.lz-grade:hover { border-color: rgba(201,162,39,.6); transform: translateY(-3px); }
.lz-grade.bac {
  background: linear-gradient(140deg, rgba(29,107,82,.3), var(--surface));
  border-color: rgba(201,162,39,.45);
}
.lz-grade-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lz-grade-num {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 900;
  background: rgba(29,107,82,.35);
  border: 1px solid rgba(29,107,82,.55);
  flex-shrink: 0;
}
.lz-grade.bac .lz-grade-num {
  background: rgba(201,162,39,.16);
  border-color: rgba(201,162,39,.55);
}
.lz-grade-top b { font-size: 17.5px; font-weight: 800; display: block; }
.lz-grade-top span { font-size: 13px; color: var(--text-dim); }
.lz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lz-chips i {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 8px;
}

/* ── steps ───────────────────────────────────────────────── */
.lz-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  counter-reset: st;
}
.lz-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px 26px;
}
.lz-step::before {
  counter-increment: st;
  content: counter(st);
  position: absolute;
  top: -18px;
  inset-inline-start: 24px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  color: #1A2420;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  border-radius: 12px;
}
.lz-step b { display: block; font-size: 18px; margin: 10px 0 10px; }
.lz-step p { font-size: 14.5px; line-height: 1.9; color: var(--text-dim); margin: 0; }

/* ── accuracy list ──────────────────────────────────────── */
.lz-checks { display: grid; gap: 14px; }
.lz-check {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 20px 22px;
}
.lz-check .tick {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: rgba(46,158,107,.2);
  border: 1px solid rgba(46,158,107,.5);
  color: #4ecb92;
}
.lz-check b { display: block; font-size: 16.5px; margin-bottom: 7px; }
.lz-check p { font-size: 14.5px; line-height: 1.9; color: var(--text-dim); margin: 0; }

.lz-honest {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 15px;
  background: rgba(201,162,39,.07);
  border: 1px solid rgba(201,162,39,.3);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--text);
}

/* ── platforms ───────────────────────────────────────────── */
.lz-plats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.lz-plat {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
}
.lz-plat .em { font-size: 30px; flex-shrink: 0; }
.lz-plat b { display: block; font-size: 17px; margin-bottom: 5px; }
.lz-plat p { font-size: 13.5px; line-height: 1.8; color: var(--text-dim); margin: 0; }

/* ── pricing ─────────────────────────────────────────────── */
.lz-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 18px;
  align-items: start;
}
.lz-plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 26px;
}
.lz-plan.best {
  background: linear-gradient(150deg, rgba(29,107,82,.3), var(--surface));
  border-color: rgba(201,162,39,.55);
  box-shadow: 0 20px 60px -30px rgba(201,162,39,.4);
}
.lz-plan-badge {
  position: absolute;
  top: -12px;
  inset-inline-end: 22px;
  font-size: 12px;
  font-weight: 800;
  color: #1A2420;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold));
  padding: 5px 13px;
  border-radius: 999px;
}
.lz-plan h3 { font-size: 22px; font-weight: 900; margin: 0 0 6px; }
.lz-plan .who { font-size: 13.5px; color: var(--text-dim); }
.lz-plan ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.lz-plan li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-dim);
}
.lz-plan li::before { content: '✓'; color: var(--gold-lt); font-weight: 900; flex-shrink: 0; }
.lz-plan .lz-btn { width: 100%; margin-top: 24px; }

.lz-pay {
  margin-top: 26px;
  padding: 24px 26px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.lz-pay b { display: block; font-size: 16.5px; margin-bottom: 6px; }
.lz-pay p { font-size: 14px; color: var(--text-dim); line-height: 1.8; margin: 0 0 16px; }
.lz-pay-row { display: flex; flex-wrap: wrap; gap: 9px; }
.lz-pay-row i {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 700;
  background: rgba(29,107,82,.2);
  border: 1px solid rgba(29,107,82,.45);
  padding: 8px 14px;
  border-radius: 10px;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.lz-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.lz-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
  overflow: hidden;
  transition: border-color .2s;
}
.lz-faq details[open] { border-color: rgba(29,107,82,.65); }
.lz-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 22px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lz-faq summary::-webkit-details-marker { display: none; }
.lz-faq summary::after {
  content: '+';
  margin-inline-start: auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--gold-lt);
  transition: rotate .22s;
  flex-shrink: 0;
}
.lz-faq details[open] summary::after { content: '−'; }
.lz-faq p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-dim);
}

/* ── final CTA ───────────────────────────────────────────── */
.lz-final {
  max-width: 1180px;
  margin: 0 auto clamp(40px, 6vw, 80px);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px);
  border-radius: 26px;
  text-align: center;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(29,107,82,.42), transparent 62%),
    var(--surface);
  border: 1px solid rgba(29,107,82,.5);
}
.lz-final h2 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 900; line-height: 1.4; }
.lz-final p {
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.95;
  color: var(--text-dim);
}
.lz-final .lz-actions { justify-content: center; }

/* ── footer ──────────────────────────────────────────────── */
.lz-foot {
  border-top: 1px solid var(--border);
  padding: 40px clamp(20px, 5vw, 48px) 46px;
}
.lz-foot-in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  align-items: flex-start;
}
.lz-foot-brand { max-width: 300px; }
.lz-foot-brand p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-dim);
}
.lz-foot-col { display: grid; gap: 10px; align-content: start; }
.lz-foot-col b { font-size: 14px; margin-bottom: 2px; }
.lz-foot-col a, .lz-foot-col span {
  font-size: 13.5px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .18s;
}
.lz-foot-col a:hover { color: var(--gold-lt); }
.lz-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  font-size: 14.5px;
  font-weight: 700;
  color: #4ecb92;
  background: rgba(46,158,107,.12);
  border: 1px solid rgba(46,158,107,.42);
  padding: 11px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: background .2s;
}
.lz-wa:hover { background: rgba(46,158,107,.22); }
.lz-copy {
  max-width: 1180px;
  margin: 32px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

/* ── reveal on scroll ────────────────────────────────────── */
.lz-reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.2,.8,.2,1);
}
.lz-reveal.in { opacity: 1; translate: 0 0; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .lz-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 28px;
  }
  .lz-sub, .lz-hero h1 { max-width: none; }
  .lz-sub { margin-inline: auto; }
  .lz-actions, .lz-stats { justify-content: center; }
  .lz-stats { border-top: none; }
  /* بالموبايل العنوان أول شي — لو حطّينا الموك فوق، الرسالة تنزل تحت
     حدود الشاشة والزائر يشوف صورة بلا سياق. */
  .lz-phone-wrap { margin-top: 40px; }
  .lz-phone { width: min(250px, 66vw); transform: none; }

  /* لمّا ننفي روابط الـ nav، بدها الأزرار تاخد الـ auto margin بدالها */
  .lz-links { display: none; }
  .lz-nav-cta { margin-inline-start: auto; }
  /* البنتو ينزل لعمود واحد */
  .lz-bento { grid-template-columns: 1fr; }
  .lz-card, .lz-card.wide, .lz-card.hero-card { grid-column: span 1; }
  .lz-wa { margin-inline-start: 0; }
  .lz-foot-in { flex-direction: column; }
}

/* اللابتوب: الفكرة كلها إنك تشوف التلات لوحات مع بعض، فما منخفّي ولا وحدة —
   منصغّر الخط ومنعدّل النسب بس. الكل بيتقاس بالـ em من .lz-app فبيتمدّد سوا. */
@media (max-width: 1024px) {
  .lz-app { font-size: clamp(5px, 1.02vw, 10px); }
  .lz-app-chats { width: 19%; }
  .lz-app-book { width: 28%; }
}
@media (max-width: 700px) {
  .lz-app { font-size: clamp(4.2px, 1.32vw, 8px); }
  .lz-app-chats { width: 17%; }
  .lz-app-book { width: 30%; }
  /* شاشة أطول حتى يضل المحتوى كامل بلا ما ينقصّ */
  .lz-laptop-screen { aspect-ratio: 16 / 11.5; }
  .lz-laptop-lid { padding: 8px 8px 10px; border-radius: 12px 12px 5px 5px; }
  .lz-bubble.me { margin-inline-start: 8%; }
  /* تفاصيل الكيبورد الدقيقة ما بتبيّن بهالحجم — منخفّف الضجيج */
  .lz-kb-row.r1 { display: none; }
}
/* تحت ٥٦٠px التلات لوحات بتصير ضيقة كتير — منشيل المحادثات بس
   ومنخلّي القصة الأساسية: الكتاب + المساعد جنب بعض.
   والشاشة منخلّيها شبه مربّعة حتى يوصل كل المحتوى بلا قصّ. */
@media (max-width: 560px) {
  .lz-app-chats { display: none; }
  .lz-app-book { width: 40%; }
  .lz-app { font-size: clamp(4.4px, 1.62vw, 8px); }
  .lz-laptop-screen { aspect-ratio: 4 / 3.9; }
  .lz-kb-row.r2 { display: none; }
}
@media (max-width: 420px) {
  .lz-nav { gap: 10px; }
  .lz-brand span { display: none; }
}

/* ── respect reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lz-blob, .lz-phone, .lz-badge .dot { animation: none; }
  .lz-reveal { transition: none; opacity: 1; translate: 0 0; }
}