/*
 * لوين؟ — landing page, in the brand of the cover (lowein-facebook-v1): deep navy, the teal ribbon of
 * the wordmark, yellow stops with a white ring, rounded white letters, Damascus in silhouette.
 *
 * The page is one ride: it starts in Damascus at night (the hero: Qasioun and its lights, the
 * landmarks, a microbus that waits at each stop), and every section after it is a stop on the same
 * road («الموقف الأول»…), down to the destination («لوين»), under the same skyline.
 * Loaded after app.css (fonts, reset, PWA banner). No inline styles (CSP).
 */

.lp {
  --lp-night: #0E2341;
  --lp-navy: #142D4E;
  --lp-ink: #0B1C33;
  --lp-road: #0C1F3B;
  --lp-blue: #1D3E6A;
  --lp-skyline: #2B588B;
  --lp-teal: #16B8A6;
  --lp-teal-bright: #2DD4C0;
  --lp-teal-deep: #0B6F64;
  --lp-teal-50: #E3F6F4;
  --lp-yellow: #FFC857;
  --lp-yellow-50: #FFF4D6;
  --lp-paper: #F4F7FA;
  --lp-muted: #526579;
  --lp-on-dark: #C5D3E3;
  --lp-border: #DCE5ED;
  --lp-display: "Baloo Bhaijaan 2", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --lp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lp-section: clamp(72px, 9vw, 124px);

  display: block;
  background: var(--lp-night);
  color: var(--lp-navy);
  overflow-x: hidden;
}

.lp-wrap {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.lp main:focus { outline: none; }
.lp .lp-icon { flex: none; }

/* ── Buttons, chips, dots ─────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1.0625rem/1.2 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:active { transform: translateY(0); }
.lp-btn .lp-icon { transition: transform 0.25s var(--lp-ease); }
.lp-btn:hover .lp-icon { transform: translateX(-3px); }

.lp-btn--accent { background: var(--lp-teal); color: var(--lp-ink); }
.lp-btn--accent:hover { background: var(--lp-teal-bright); color: var(--lp-ink); box-shadow: 0 16px 34px -14px rgba(22, 184, 166, 0.85); }

.lp-btn--ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.3); background: rgba(14, 35, 65, 0.35); }
.lp-btn--ghost:hover { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

.lp-btn--navy { background: var(--lp-navy); color: #FFFFFF; }
.lp-btn--navy:hover { background: var(--lp-ink); color: #FFFFFF; box-shadow: 0 16px 34px -16px rgba(11, 28, 51, 0.75); }

.lp-btn--small { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.lp-btn--large { min-height: 62px; padding: 0 36px; font-size: 1.25rem; }

.lp-hero :focus-visible,
.lp-header :focus-visible,
.lp-live :focus-visible,
.lp-numbers :focus-visible,
.lp-final :focus-visible,
.lp-footer :focus-visible { outline-color: var(--lp-yellow); }

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.lp-chip--teal { background: var(--lp-teal-50); color: var(--lp-teal-deep); }
.lp-chip--seal { background: var(--lp-navy); color: #FFFFFF; }
.lp-chip--seal .lp-icon { color: var(--lp-yellow); }
.lp-chip--gps { background: var(--lp-teal-50); color: var(--lp-teal-deep); }
.lp-chip--gps .lp-icon { width: 16px; height: 16px; }
.lp-chip--soon { background: #FFFFFF; color: var(--lp-muted); border: 1px dashed #A9B8C7; padding: 6px 14px; font-size: 0.875rem; }

.lp-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.lp-dot--start { background: var(--lp-yellow); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--lp-navy); }
.lp-dot--end { background: var(--lp-teal); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--lp-navy); }

/* ── Header ───────────────────────────────────────────────────── */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(14, 35, 65, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  color: #FFFFFF;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.lp-header.is-stuck { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); }
/* At the very top the hero shows the big wordmark, so the header keeps only its links. */
.lp-header.is-top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lp-header.is-top .lp-brand { opacity: 0; visibility: hidden; transform: translateY(-6px); }

.lp-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--lp-ease);
}
.lp-brand:hover { color: #FFFFFF; }
.lp-logo { height: 44px; }

.lp-nav { display: flex; gap: 4px; margin-inline-start: auto; }
.lp-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.lp-nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

/* ── Hero («من وين»): Damascus at night ───────────────────────── */

.lp-hero {
  position: relative;
  isolation: isolate;
  margin-top: -68px; /* under the transparent header */
  padding-top: calc(68px + clamp(12px, 3vh, 36px));
  color: #FFFFFF;
  background:
    radial-gradient(42% 38% at 50% 30%, rgba(22, 184, 166, 0.16), transparent 72%),
    radial-gradient(30% 30% at 85% 8%, rgba(255, 200, 87, 0.07), transparent 70%),
    linear-gradient(180deg, var(--lp-night) 0%, var(--lp-navy) 58%, #17355E 100%);
}
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/grain.svg");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.lp-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 16px 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  font-weight: 600;
}
.lp-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-teal);
}

.lp-title { margin: clamp(14px, 2.4vh, 26px) 0 0; font-weight: 400; line-height: 1; }
.lp-title__mark { position: relative; display: block; width: fit-content; margin-inline: auto; }
.lp-title__logo { display: block; }
.lp-beta {
  position: absolute;
  bottom: -7%;
  inset-inline-end: -13%;
  padding: 0.12em 0.7em 0.2em;
  border-radius: 999px;
  background: var(--lp-yellow);
  color: var(--lp-navy);
  box-shadow: 0 0 0 3px var(--lp-navy), 0 0 0 5px rgba(255, 255, 255, 0.9), 0 10px 22px -8px rgba(5, 14, 30, 0.6);
  font: 800 clamp(0.875rem, 1.3vw, 1.125rem)/1.3 var(--lp-display);
  rotate: -8deg;
}
.lp-title__logo img {
  display: block;
  width: clamp(250px, min(34vw, 52vh), 460px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 18px 34px rgba(5, 14, 30, 0.45));
}

/* «من وين لوين» as on the cover: teal dashes on both sides, «لوين» in yellow */
.lp-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  margin-top: clamp(4px, 1vh, 12px);
  font: 800 clamp(1.625rem, 3.4vw, 2.625rem)/1.2 var(--lp-display);
  color: #FFFFFF;
}
.lp-tagline::before,
.lp-tagline::after {
  content: "";
  flex: none;
  width: clamp(28px, 4vw, 54px);
  height: 5px;
  margin-inline: 0.35em;
  border-radius: 3px;
  background: var(--lp-teal);
}
.lp-tagline__to { color: var(--lp-yellow); }

.lp-hero__lead {
  max-width: 36rem;
  margin: clamp(14px, 2.2vh, 22px) 0 0;
  color: var(--lp-on-dark);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.8;
}

.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.lp-hero__actions { justify-content: center; }
.lp-hero .lp-btn--ghost { padding: 0 20px; }

.lp-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
}
.lp-trust .lp-icon { color: var(--lp-teal); }

/* The scene: the sky part slides under the buttons */
.lp-scene {
  position: relative;
  z-index: 1;
  margin: clamp(-170px, -10.5vw, -36px) 0 0;
  overflow: hidden;
  pointer-events: none;
}
.lp-scene__svg {
  display: block;
  overflow: hidden;
  width: 100%;
  height: clamp(300px, min(35vw, 54vh), 520px);
}
.lp-scene__stars path { fill: #FFFFFF; opacity: 0.32; }
.lp-scene__mountain { fill: url(#lp-scene-mountain); }
.lp-scene__ridge { fill: none; stroke: rgba(45, 212, 192, 0.3); stroke-width: 1.6; }
.lp-tw { fill: var(--lp-yellow); opacity: 0.5; }
.lp-tw--2 { fill: #FFE7A8; opacity: 0.35; }
.lp-tw--3 { fill: #FFFFFF; opacity: 0.3; }
.lp-scene__far { fill: #1F4370; }
.lp-scene__near { fill: var(--lp-skyline); }
.lp-scene__lit { fill: #FFD98A; opacity: 0.72; }
.lp-scene__ground { fill: url(#lp-scene-ground); }
.lp-scene__glow { fill: url(#lp-scene-glow); }
.lp-scene__bridge { fill: #24507F; }

.lp-scene__road-glow,
.lp-scene__road-edge,
.lp-scene__road,
.lp-scene__road-line { fill: none; }
.lp-scene__road-glow { stroke: rgba(22, 184, 166, 0.2); stroke-width: 118; }
.lp-scene__road-edge { stroke: var(--lp-teal); stroke-width: 88; }
.lp-scene__road { stroke: var(--lp-road); stroke-width: 64; }
.lp-scene__road-line { stroke: var(--lp-yellow); stroke-width: 4; stroke-dasharray: 22 16; }

.lp-scene__stop circle:nth-child(1) { fill: var(--lp-road); }
.lp-scene__stop circle:nth-child(2) { fill: #FFFFFF; }
.lp-scene__stop circle:nth-child(3) { fill: var(--lp-yellow); }
.lp-scene__stop--end circle:nth-child(2) { fill: var(--lp-yellow); }
.lp-scene__stop--end circle:nth-child(3) { fill: #FFFFFF; }
.lp-scene__pulse { fill: none; stroke: var(--lp-yellow); stroke-width: 3; opacity: 0; }

.lp-scene__label {
  font: 800 24px/1 var(--lp-display);
  fill: #FFFFFF;
  paint-order: stroke;
  stroke: var(--lp-road);
  stroke-width: 7px;
  stroke-linejoin: round;
}

.lp-bus__beam { fill: url(#lp-scene-beam); }
.lp-bus__shadow { fill: rgba(0, 0, 0, 0.35); }
.lp-bus__body { fill: #F2F5F9; }
.lp-bus__glass { fill: #FFD98A; }
.lp-bus__window { fill: #FFE3A3; }
.lp-bus__stripe { fill: var(--lp-teal); }
.lp-bus__light { fill: var(--lp-yellow); }
.lp-bus__tail { fill: #FF7A66; }
.lp-bus__wheel { fill: var(--lp-ink); }
.lp-bus__hub { fill: #9FB2C8; }
.lp-bus-still { display: none; }

/* ── Sections: each one a stop ────────────────────────────────── */

.lp-section { position: relative; padding-block: var(--lp-section); }

.lp-head { max-width: 40rem; }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-head--center .lp-kicker { justify-content: center; }

.lp-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--lp-teal-deep);
  font-weight: 700;
  font-size: 1rem;
}
/* A stop: yellow, a white ring, a navy edge */
.lp-kicker__stop {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-yellow);
  box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6.5px var(--lp-navy);
}
.lp-kicker__stop--end { background: #FFFFFF; box-shadow: 0 0 0 6px var(--lp-yellow), 0 0 0 9px var(--lp-navy); }

.lp-h2 {
  margin: 0;
  font: 800 clamp(2rem, 4.4vw, 3.25rem)/1.15 var(--lp-display);
  color: var(--lp-navy);
}
.lp-lead { margin: 16px 0 0; color: var(--lp-muted); font-size: 1.125rem; line-height: 1.85; max-width: 38rem; }
.lp-hint { margin: 16px 0 0; color: var(--lp-muted); font-size: 0.9375rem; max-width: 46ch; }
.lp-link { color: var(--lp-navy); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.lp-link:hover { color: var(--lp-ink); }

/* Light stops */
.lp-how,
.lp-community,
.lp-install { background: var(--lp-paper); }
.lp-community { background: #FFFFFF; }

/* Dark stops */
.lp-live,
.lp-numbers { background: var(--lp-navy); color: #FFFFFF; }
.lp-live .lp-h2,
.lp-numbers .lp-h2 { color: #FFFFFF; }
.lp-live .lp-kicker,
.lp-numbers .lp-kicker,
.lp-final .lp-kicker { color: var(--lp-teal-bright); }
.lp-live .lp-kicker__stop,
.lp-numbers .lp-kicker__stop,
.lp-final .lp-kicker__stop { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6.5px var(--lp-teal); }
.lp-final .lp-kicker__stop--end { box-shadow: 0 0 0 6px var(--lp-yellow), 0 0 0 9px var(--lp-teal); }
.lp-live .lp-lead { color: var(--lp-on-dark); }

/* The road between stops: a dark lane with teal edges and a yellow line, as in the hero */
.lp-road {
  --lp-lane: 22px;
  background:
    repeating-linear-gradient(90deg, var(--lp-yellow) 0 18px, transparent 18px 32px) center / 100% 3px no-repeat,
    var(--lp-road);
  border-block: 5px solid var(--lp-teal);
  border-radius: 999px;
}

/* ── The first stop: how it works ─────────────────────────────── */

.lp-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 32px 56px;
}

.lp-demo { position: relative; min-height: 240px; }
.lp-demo__search,
.lp-demo__result {
  margin: 0;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 30px 60px -34px rgba(20, 45, 78, 0.45), 0 0 0 1px rgba(20, 45, 78, 0.06);
}
.lp-demo__search { width: min(300px, 82%); padding: 12px 18px; rotate: 2deg; }
.lp-demo__search p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 0; font-weight: 700; }
.lp-demo__search p + p { border-top: 1px solid var(--lp-border); }
.lp-demo__q { color: var(--lp-muted); font-weight: 500; }
.lp-demo__result {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: min(340px, 88%);
  padding: 16px 20px 16px 18px;
  border-inline-start: 6px solid var(--lp-teal);
  rotate: -2deg;
}
.lp-demo__result p { margin: 0; }
.lp-demo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px !important; }
.lp-demo__ride { display: flex; align-items: center; gap: 8px; font: 800 1.125rem/1.4 var(--lp-display); color: var(--lp-navy); }
.lp-demo__ride .lp-icon { color: var(--lp-teal-deep); }
.lp-demo__walk { display: flex; align-items: center; gap: 8px; margin-top: 4px !important; color: var(--lp-muted); font-size: 0.9375rem; }

.lp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
/* The road under the three stops */
.lp-steps::before {
  content: "";
  position: absolute;
  top: 17px;
  inset-inline: 0;
  height: 32px;
  background:
    repeating-linear-gradient(90deg, var(--lp-yellow) 0 18px, transparent 18px 32px) center / 100% 3px no-repeat,
    var(--lp-road);
  border-block: 6px solid var(--lp-teal);
  border-radius: 999px;
}
.lp-step { position: relative; display: grid; justify-items: start; gap: 22px; }
.lp-step__stop {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-inline-start: 18px;
  border-radius: 50%;
  background: var(--lp-yellow);
  box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 10px var(--lp-navy), 0 18px 30px -12px rgba(20, 45, 78, 0.6);
  color: var(--lp-navy);
  font: 800 1.75rem/1 var(--lp-display);
}
.lp-step__card {
  width: 100%;
  padding: 22px 24px 24px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 24px 50px -36px rgba(20, 45, 78, 0.5), 0 0 0 1px rgba(20, 45, 78, 0.06);
}
.lp-step__title { margin: 0 0 6px; font: 800 1.5rem/1.3 var(--lp-display); color: var(--lp-navy); }
.lp-step__text { margin: 0; color: var(--lp-muted); line-height: 1.8; }

/* ── The second stop: «معك حتى تنزل» ─────────────────────────── */

.lp-live { overflow: hidden; isolation: isolate; }
.lp-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 12% 55%, rgba(22, 184, 166, 0.22), transparent 70%),
    radial-gradient(30% 40% at 95% 0%, rgba(255, 200, 87, 0.08), transparent 70%);
}
.lp-live__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 48px 64px;
}

/* Route boards, like the sign behind a microbus windshield: white, a coloured band on top */
.lp-placards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 36px 0 32px;
  padding: 0;
  list-style: none;
}
.lp-placard {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--lp-navy);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  transition: transform 0.3s var(--lp-ease);
}
.lp-placard:hover { transform: translateY(-4px) rotate(-0.6deg); }
.lp-placard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--lp-teal);
}
.lp-placard:nth-child(even)::before { background: var(--lp-yellow); }
.lp-placard__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--lp-navy);
  color: var(--lp-teal-bright);
}
.lp-placard:nth-child(even) .lp-placard__icon { color: var(--lp-yellow); }
.lp-placard__title { margin: 0 0 6px; font: 800 1.3125rem/1.3 var(--lp-display); }
.lp-placard__text { margin: 0; color: var(--lp-muted); font-size: 0.9688rem; line-height: 1.75; }

/* Phones */
.lp-phone {
  position: relative;
  justify-self: center;
  width: min(290px, 74vw);
  aspect-ratio: 9 / 18.5;
  padding: 11px;
  border-radius: 48px;
  background: var(--lp-ink);
  box-shadow: 0 60px 90px -44px rgba(0, 0, 0, 0.75), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.lp-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
}
.lp-phone--live { rotate: 4deg; }
.lp-phone__screen--map { background: #EAF0F4; }
.lp-phone__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-phone__streets path { fill: none; stroke: #FFFFFF; stroke-width: 14; }
.lp-phone__line { fill: none; stroke: var(--lp-teal); stroke-width: 9; stroke-linecap: round; }
.lp-phone__line--done { stroke: #9FB2C8; stroke-dasharray: 2 12; stroke-width: 6; }
.lp-phone__stop { fill: var(--lp-yellow); stroke: #FFFFFF; stroke-width: 4; }
.lp-phone__end circle:nth-child(1) { fill: var(--lp-navy); }
.lp-phone__end circle:nth-child(2) { fill: #FFFFFF; }
.lp-phone__me circle:nth-child(1) { fill: rgba(22, 184, 166, 0.25); }
.lp-phone__me circle:nth-child(2) { fill: var(--lp-teal); stroke: #FFFFFF; stroke-width: 3.5; }

.lp-phone__toast {
  position: absolute;
  top: 16px;
  inset-inline: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 30px -16px rgba(20, 45, 78, 0.55);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.lp-phone__toast strong { display: block; font-size: 0.875rem; color: var(--lp-navy); }
.lp-phone__toast span span { color: var(--lp-muted); }
.lp-phone__toast-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--lp-yellow);
  color: var(--lp-navy);
}
.lp-phone__toast-icon .lp-icon { width: 20px; height: 20px; }

.lp-phone__sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 16px 18px 22px;
  border-radius: 24px 24px 0 0;
  background: #FFFFFF;
  box-shadow: 0 -12px 30px -18px rgba(20, 45, 78, 0.5);
}
.lp-phone__sheet p { margin: 0; }
.lp-phone__sheet-title { color: var(--lp-teal-deep); font-size: 0.8125rem; font-weight: 700; }
.lp-phone__sheet-big { margin-top: 4px !important; font: 800 1.125rem/1.35 var(--lp-display); color: var(--lp-navy); }
.lp-phone__progress { display: block; height: 8px; margin-top: 12px; border-radius: 999px; background: var(--lp-teal-50); overflow: hidden; }
.lp-phone__progress span { display: block; width: 78%; height: 100%; border-radius: inherit; background: var(--lp-teal); }

/* Home screen (install) */
.lp-phone--home { rotate: -5deg; }
.lp-phone__screen--home {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 18px 14px;
  padding: 18px;
  background:
    radial-gradient(90% 50% at 80% 100%, rgba(22, 184, 166, 0.45), transparent 70%),
    linear-gradient(165deg, var(--lp-navy), var(--lp-night) 70%);
}
.lp-phone__time {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  text-align: center;
  font: 700 2.25rem/1 var(--lp-display);
  color: #FFFFFF;
}
.lp-phone__app { display: block; aspect-ratio: 1; border-radius: 13px; background: rgba(255, 255, 255, 0.12); }
.lp-phone__app--lowein { position: relative; background: none; }
.lp-phone__app--lowein img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--lp-yellow);
}
.lp-phone__app--lowein span {
  position: absolute;
  top: calc(100% + 5px);
  inset-inline: -10px;
  text-align: center;
  font: 700 0.75rem/1.2 var(--font);
  color: #FFFFFF;
}
.lp-phone__dock {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 12px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.14);
}

/* ── The third stop: a map the riders draw ────────────────────── */

.lp-community__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 48px 72px;
}
.lp-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
  margin: 36px 0 34px;
  padding: 0;
  list-style: none;
}
.lp-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; }
.lp-feature__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lp-teal-50);
  color: var(--lp-teal-deep);
  box-shadow: inset 0 0 0 2px rgba(22, 184, 166, 0.35);
}
.lp-feature__title { margin: 2px 0 4px; font: 800 1.25rem/1.35 var(--lp-display); color: var(--lp-navy); }
.lp-feature__text { margin: 0; color: var(--lp-muted); line-height: 1.75; }

.lp-boards { position: relative; display: grid; gap: 18px; justify-items: center; }
.lp-board {
  position: relative;
  width: min(360px, calc(100% - 44px));
  padding: 30px 22px 18px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 30px 60px -34px rgba(20, 45, 78, 0.55), 0 0 0 1px rgba(20, 45, 78, 0.07);
  overflow: hidden;
}
.lp-board::before { content: ""; position: absolute; inset: 0 0 auto; height: 12px; }
.lp-board--teal { rotate: -3deg; }
.lp-board--teal::before { background: var(--lp-teal); }
.lp-board--yellow { rotate: 2deg; margin-inline-start: 40px; }
.lp-board--yellow::before { background: var(--lp-yellow); }
.lp-board--navy { rotate: -1deg; margin-inline-end: 30px; }
.lp-board--navy::before { background: var(--lp-navy); }
.lp-board p { margin: 0; }
.lp-board__name { font: 800 1.5rem/1.3 var(--lp-display); color: var(--lp-navy); }
.lp-board__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px !important; }
.lp-votes { color: var(--lp-muted); font-weight: 700; font-size: 0.875rem; }

/* ── The fourth stop: the numbers, on one road ────────────────── */

.lp-numbers { overflow: hidden; }
.lp-stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 56px;
  margin: 48px 0 0;
}
.lp-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 200px;
  padding-top: 34px;
  text-align: center;
}
/* Each number is a stop: the dot above it */
.lp-stat::before {
  content: "";
  position: absolute;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lp-yellow);
  box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6.5px var(--lp-teal);
}
.lp-stat dt { order: 2; color: var(--lp-on-dark); font-weight: 600; }
.lp-stat dd { order: 1; margin: 0; }
.lp-stat dd.lp-stat__note { order: 3; }
.lp-stat__value { font: 800 clamp(3rem, 6vw, 4.5rem)/1.1 var(--lp-display); }
.lp-stat--lines .lp-stat__value { color: var(--lp-yellow); }
.lp-stat--confirmations .lp-stat__value { color: var(--lp-teal-bright); }
.lp-stat--verified .lp-stat__value { color: #FFFFFF; }
.lp-stat--coverage { flex-basis: 300px; }
.lp-places { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 8px; }
.lp-place {
  padding: 6px 16px;
  border: 2px solid var(--lp-teal);
  border-radius: 999px;
  color: #FFFFFF;
  font: 800 1.25rem/1.3 var(--lp-display);
}
.lp-stat__note { margin-top: 6px !important; color: rgba(255, 255, 255, 0.62); font-size: 0.9375rem; }
/* The road the stops sit on */
.lp-numbers .lp-stats::before {
  content: "";
  position: absolute;
  top: -7px;
  inset-inline: -50vw;
  height: 32px;
  background:
    repeating-linear-gradient(90deg, var(--lp-yellow) 0 18px, transparent 18px 32px) center / 100% 3px no-repeat,
    var(--lp-road);
  border-block: 6px solid var(--lp-teal);
}

/* ── The fifth stop: on the phone ─────────────────────────────── */

.lp-install__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 48px;
}
.lp-install .lp-actions { margin-top: 26px; }

/* ── Arrival («لوين»): the same skyline ───────────────────────── */

.lp-final {
  position: relative;
  padding-top: var(--lp-section);
  background:
    radial-gradient(46% 50% at 50% 30%, rgba(22, 184, 166, 0.18), transparent 72%),
    linear-gradient(180deg, var(--lp-navy), var(--lp-night));
  color: #FFFFFF;
  overflow: hidden;
}
.lp-final__inner { position: relative; z-index: 1; }
.lp-final__title { margin: 0; font: 800 clamp(2.5rem, 6.4vw, 4.75rem)/1.1 var(--lp-display); color: #FFFFFF; }
.lp-final .lp-actions { justify-content: center; margin-top: 30px; gap: 14px 26px; }
.lp-final .lp-link { color: #FFFFFF; }
.lp-final .lp-link:hover { color: var(--lp-yellow); }
.lp-final__skyline {
  display: block;
  width: 100%;
  height: clamp(140px, 17vw, 260px);
  margin-top: clamp(24px, 4vw, 48px);
}
/* …and the road arrives under it */
.lp-final__road {
  display: block;
  height: 30px;
  background:
    repeating-linear-gradient(90deg, var(--lp-yellow) 0 18px, transparent 18px 32px) center / 100% 3px no-repeat,
    var(--lp-road);
  border-block: 6px solid var(--lp-teal);
}

/* ── Footer ───────────────────────────────────────────────────── */

.lp-footer {
  padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px));
  background: var(--lp-ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
}
.lp-footer__inner { display: grid; gap: 10px; }
.lp-footer p { margin: 0; }
.lp-footer__brand { display: flex; align-items: center; gap: 12px; color: #FFFFFF; font-size: 1.0625rem; }
.lp-footer__logo { height: 38px; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 8px !important; }
.lp-footer a { color: #FFFFFF; font-weight: 600; }
.lp-footer a:hover { color: var(--lp-teal); }

/* ── Motion ───────────────────────────────────────────────────── */

@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lp-fade { from { opacity: 0; } }
@keyframes lp-logo-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@keyframes lp-twinkle { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.7; } }
@keyframes lp-toast {
  0%, 8% { opacity: 0; transform: translateY(-14px); }
  14%, 78% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes lp-me {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-14px, -42px); }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-hero__copy > * { animation: lp-rise 0.9s var(--lp-ease) backwards; }
  .lp-hero__copy > :nth-child(2) { animation: none; }
  .lp-title__logo { animation: lp-logo-in 1s 0.1s var(--lp-ease) backwards; }
  .lp-tagline { animation: lp-rise 0.9s 0.35s var(--lp-ease) backwards; }
  .lp-hero__copy > :nth-child(3) { animation-delay: 0.45s; }
  .lp-hero__copy > :nth-child(4) { animation-delay: 0.55s; }
  .lp-hero__copy > :nth-child(5) { animation-delay: 0.65s; }
  .lp-scene { animation: lp-fade 1.4s 0.2s ease-out backwards; }

  .lp-tw--1 { animation: lp-twinkle 4.6s ease-in-out infinite; }
  .lp-tw--2 { animation: lp-twinkle 6.2s -2s ease-in-out infinite; }
  .lp-tw--3 { animation: lp-twinkle 5.4s -3.6s ease-in-out infinite; }
  .lp-scene.is-paused .lp-tw { animation-play-state: paused; }

  .lp-phone__toast { animation: lp-toast 7s 0.6s ease-in-out infinite both; }
  .lp-phone__me { transform-box: view-box; animation: lp-me 7s 0.6s ease-in-out infinite; }

  .lp-phone__app--lowein img { animation: lp-rise 0.8s 0.3s var(--lp-ease) backwards; }

  /* Sections fade up as they come into view (js/landing.js marks them). */
  [data-reveal].lp-pre { opacity: 0; transform: translateY(26px); }
  [data-reveal].lp-in { opacity: 1; transform: none; transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease); }
  .lp-steps > .lp-in:nth-child(2), .lp-features > .lp-in:nth-child(2), .lp-placards > .lp-in:nth-child(2), .lp-stats > .lp-in:nth-child(2) { transition-delay: 0.1s; }
  .lp-steps > .lp-in:nth-child(3), .lp-features > .lp-in:nth-child(3), .lp-placards > .lp-in:nth-child(3), .lp-stats > .lp-in:nth-child(3) { transition-delay: 0.2s; }
  .lp-features > .lp-in:nth-child(4), .lp-placards > .lp-in:nth-child(4), .lp-stats > .lp-in:nth-child(4) { transition-delay: 0.3s; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-bus--live,
  .lp-scene__pulse { display: none; }
  .lp-bus-still { display: inline; }
  .lp-btn, .lp-placard { transition: none; }
}

/* ── Smaller screens ──────────────────────────────────────────── */

@media (max-width: 1020px) {
  .lp-how__grid,
  .lp-live__grid,
  .lp-community__grid,
  .lp-install__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-demo { max-width: 460px; width: 100%; }
  .lp-boards { max-width: 420px; width: 100%; justify-self: center; }
}

@media (max-width: 760px) {
  .lp-nav { display: none; }
  .lp-header__inner { justify-content: space-between; min-height: 60px; }
  .lp-hero { margin-top: -60px; padding-top: calc(60px + 18px); }
  .lp-logo { height: 38px; }

  .lp-tagline::before,
  .lp-tagline::after { width: 22px; height: 4px; margin-inline: 0.15em; }
  .lp-hero .lp-actions { width: 100%; }
  .lp-actions .lp-btn { flex: 1 1 100%; }
  .lp-hero .lp-actions .lp-btn--ghost { flex: 1 1 40%; padding: 0 12px; }
  .lp-install .lp-actions .lp-btn { flex: 0 1 auto; }
  .lp-scene { margin-top: -96px; }
  .lp-scene__svg { height: 360px; }
  .lp-scene__label { font-size: 30px; stroke-width: 8px; }

  .lp-demo { min-height: 230px; }

  /* The road turns vertical beside the steps */
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lp-steps::before {
    top: 10px;
    bottom: 10px;
    inset-inline: 17px auto;
    width: 26px;
    height: auto;
    background:
      repeating-linear-gradient(180deg, var(--lp-yellow) 0 16px, transparent 16px 28px) center / 3px 100% no-repeat,
      var(--lp-road);
    border-block: 0;
    border-inline: 5px solid var(--lp-teal);
  }
  .lp-step { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
  .lp-step__stop { width: 52px; height: 52px; margin-inline-start: 4px; margin-top: 8px; font-size: 1.375rem; box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 8px var(--lp-navy); }
  .lp-step__title { font-size: 1.375rem; }

  .lp-placards,
  .lp-features { grid-template-columns: minmax(0, 1fr); }
  .lp-board--yellow { margin-inline-start: 18px; }
  .lp-board--navy { margin-inline-end: 12px; }

  .lp-stats { gap: 40px 24px; }
  .lp-stat { flex-basis: 140px; }
  .lp-numbers .lp-stats::before { display: none; }
}