/* ============================================================================
   وصيني / Waseni — marketing site.

   Every colour, radius and type role below is transcribed from the app's own
   tokens so the site and the product cannot drift apart:
     app/lib/theme/brand.dart  — the blue identity
     app/lib/theme/type.dart   — Cairo display / IBM Plex Sans Arabic body

   AMBER DISCIPLINE. brand.dart says amber is "the parcel, the landing flash,
   and the rule under a headline — nothing else. It is the one warm thing in
   the product and it stops meaning anything the moment it becomes decoration."
   On this site that budget is spent in exactly two places: the parcel in the
   hero diagram, and one rule under the h1. If you are about to add a third,
   don't.

   Fonts come from Google's subsetted woff2 (~40KB) rather than the TTFs in
   app/fonts (~836KB). The audience is on cheap phones and mobile data; the
   TTFs are same-origin but twenty times the bytes. To self-host instead, drop
   the <link> in the HTML and declare @font-face against app/fonts here.
   ============================================================================ */

:root {
  /* Action */
  --blue: #0a5af9;
  --blue-deep: #0847c6;
  --blue-tint: #f1f6ff;

  /* Surfaces, light */
  --page: #f5f7fb;
  --card: #ffffff;
  --line: #e4e9f5;

  /* Text on light */
  --ink: #101a33;
  --muted: #69718c;

  /* The splash's sky */
  --sky-0: #2e9bff;
  --sky-1: #0f6bf7;
  --sky-2: #0a55e6;
  --sky-3: #0847c6;

  /* Amber — the parcel, and one rule. Nothing else. */
  --amber: #ffba28;

  /* Corners, from Round in brand.dart */
  --r-card: 20px;
  --r-btn: 16px;
  --r-chip: 12px;
  --r-pill: 999px;

  /* Type */
  --display: "Cairo", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Space, 4px base */
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;

  /* Motion, from Motion in tokens.dart — fast and decisive, no bounce */
  --fast: 120ms;
  --medium: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --shell: 1140px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Arabic needs more leading than the 1.15 in tokens.dart. That value is tuned for
   the app's short one-line labels; here a 62px Cairo headline wraps to two lines
   and the tashkeel on the upper line collides with the ascenders on the lower.
   No negative tracking either — Arabic is joined, and tightening it fights the
   letterforms instead of the gaps. Latin keeps both. */
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.3;
  margin: 0;
  font-weight: 700;
  letter-spacing: normal;
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s6);
}

/* Defensive, not a fix for an observed bug: measured overflow at 390px is 0.
   Grid and flex children default to min-width:auto, so an item's intrinsic width
   can push a 1fr track wider than the track — the hero SVG's viewBox is 560 wide.
   The page must never scroll sideways, so every track child may shrink. */
.hero__grid > *,
.trust > *,
.steps > *,
.sides > *,
.rides > *,
.footer__grid > * {
  min-width: 0;
}

/* Money and any figure that must align in a column. tokens.dart: Western
   digits everywhere, tabular figures, no exceptions. */
.num {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The skip link is the one hidden thing that has to come back — a keyboard user
   who cannot see it has no way to use it. */
.visually-hidden:focus {
  position: fixed;
  inset-block-start: var(--s3);
  inset-inline-start: var(--s3);
  z-index: 40;
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 20px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-btn);
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 247, 251, 0.86);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
}

.brand:hover {
  text-decoration: none;
}

/* The app icon: bag on the 158° tile gradient from SPEC.md. */
.brand__tile {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  background: linear-gradient(158deg, #52a9ff 0%, #1274f8 46%, #0b58ec 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(8, 71, 198, 0.32);
}

.masthead__nav {
  display: flex;
  gap: var(--s6);
  margin-inline-start: auto;
  font-size: 15px;
}

.masthead__nav a {
  color: var(--muted);
  font-weight: 500;
}

.masthead__nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.lang {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  background: var(--card);
}

.lang:hover {
  color: var(--ink);
  border-color: #c9d4ea;
  text-decoration: none;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 90, 249, 0.26);
}

.btn--primary:hover {
  background: var(--blue-deep);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.btn--quiet:hover {
  border-color: #c9d4ea;
  background: var(--blue-tint);
}

.btn--sm {
  padding: 10px 16px;
  font-size: 14px;
}

/* -------------------------------------------------------------------- hero */

.hero {
  padding-block: var(--s16) var(--s24);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid #dce8ff;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin-block-end: var(--s6);
}

.hero h1 {
  font-size: clamp(40px, 6vw, 62px);
  font-weight: 800;
  margin-block-end: var(--s6);
}

/* The one amber rule. See the header of this file before adding another. */
.rule-amber {
  width: 62px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--amber);
  margin-block-end: var(--s6);
}

.hero__lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 46ch;
  margin-block-end: var(--s8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-block-end: var(--s4);
}

.hero__note {
  font-size: 14px;
  color: var(--muted);
}

/* The convergence panel — the signature. */
.route {
  position: relative;
  border-radius: var(--r-card);
  padding: var(--s6);
  background: radial-gradient(
    circle at 50% 46%,
    var(--sky-0) 0%,
    var(--sky-1) 42%,
    var(--sky-2) 72%,
    var(--sky-3) 100%
  );
  box-shadow: 0 30px 70px rgba(4, 38, 110, 0.34);
}

.route svg {
  display: block;
  width: 100%;
  height: auto;
}

.route__caption {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin-block-start: var(--s3);
}

/* ---------------------------------------------------------------- sections */

.band {
  padding-block: var(--s24);
}

.band--tint {
  background: var(--card);
  border-block: 1px solid var(--line);
}

.band__head {
  max-width: 60ch;
  margin-block-end: var(--s16);
}

.band__head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-block-end: var(--s4);
}

.band__head p {
  color: var(--muted);
  font-size: 17px;
}

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-block-end: var(--s3);
}

/* --------------------------------------------------------------- the steps */

/* Numbered because the run genuinely is a sequence — the driver cannot deliver
   before collecting. Nowhere else on this page is numbered. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  counter-reset: step;
  position: relative;
}

.step {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s8) var(--s6) var(--s6);
}

.band--tint .step {
  background: var(--page);
}

.step__n {
  counter-increment: step;
  position: absolute;
  inset-block-start: calc(var(--s6) * -1);
  inset-inline-start: var(--s6);
  width: 44px;
  height: 44px;
  border-radius: var(--r-chip);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(10, 90, 249, 0.3);
}

.step__n::after {
  content: counter(step);
}

.step h3 {
  font-size: 20px;
  margin-block-end: var(--s3);
}

.step p {
  color: var(--muted);
  font-size: 15px;
}

/* --------------------------------------------------------------- the sides */

.sides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

.side {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  transition: border-color var(--medium) var(--ease), transform var(--medium) var(--ease);
}

.side:hover {
  border-color: #c9d4ea;
  transform: translateY(-3px);
}

.side__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-chip);
  background: var(--blue-tint);
  display: grid;
  place-items: center;
  color: var(--blue);
}

.side h3 {
  font-size: 21px;
}

.side p {
  color: var(--muted);
  font-size: 15px;
}

.side ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
  font-size: 15px;
}

.side li {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  color: var(--ink);
}

.side li svg {
  flex: none;
  margin-block-start: 5px;
  color: var(--blue);
}

/* --------------------------------------------------------------- the trust */

.trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
  align-items: center;
}

.proofs {
  display: grid;
  gap: var(--s4);
}

.proof {
  display: flex;
  gap: var(--s4);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6);
}

.proof__frame {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: var(--r-chip);
  background: var(--blue-tint);
  border: 1px dashed #b9cdf5;
  display: grid;
  place-items: center;
  color: var(--blue);
}

.proof h3 {
  font-size: 17px;
  margin-block-end: 4px;
}

.proof p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.strike {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-block-start: var(--s6);
}

.strike svg {
  color: #d9614c;
  flex: none;
}

/* ------------------------------------------------------------- the vehicles */

.rides {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.ride {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6);
  text-align: center;
  color: var(--blue);
}

.band--tint .ride {
  background: var(--page);
}

.ride span {
  display: block;
  margin-block-start: var(--s3);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

/* ------------------------------------------------------------------ the cta */

.cta {
  background: linear-gradient(158deg, #52a9ff 0%, #1274f8 46%, #0b58ec 100%);
  border-radius: var(--r-card);
  padding: var(--s16);
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 70px rgba(4, 38, 110, 0.3);
}

.cta h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-block-end: var(--s4);
}

.cta p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  max-width: 48ch;
  margin-inline: auto;
  margin-block-end: var(--s8);
}

.cta__actions {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  flex-wrap: wrap;
}

.cta .btn--primary {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: 0 8px 24px rgba(4, 38, 110, 0.28);
}

.cta .btn--primary:hover {
  background: #eaf1ff;
}

.cta .btn--quiet {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.cta .btn--quiet:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* --------------------------------------------------------------- the footer */

.footer {
  border-block-start: 1px solid var(--line);
  padding-block: var(--s12);
  margin-block-start: var(--s24);
  font-size: 14px;
  color: var(--muted);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
  justify-content: space-between;
  align-items: flex-start;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}

.footer nav a {
  color: var(--muted);
}

.footer nav a:hover {
  color: var(--ink);
}

.footer__legal {
  margin-block-start: var(--s6);
  font-size: 13px;
}

/* ------------------------------------------------------------- legal pages */

.doc {
  max-width: 74ch;
  margin-inline: auto;
  padding-block: var(--s16);
}

.doc h1 {
  font-size: clamp(32px, 5vw, 46px);
  margin-block-end: var(--s4);
}

.doc__meta {
  color: var(--muted);
  font-size: 14px;
  margin-block-end: var(--s12);
  padding-block-end: var(--s6);
  border-block-end: 1px solid var(--line);
}

.doc h2 {
  font-size: 24px;
  margin-block: var(--s12) var(--s4);
}

.doc h3 {
  font-size: 18px;
  margin-block: var(--s8) var(--s3);
}

.doc p,
.doc li {
  color: #2c3654;
  margin-block-end: var(--s4);
}

.doc ul,
.doc ol {
  padding-inline-start: var(--s6);
  margin-block-end: var(--s4);
}

.doc li {
  margin-block-end: var(--s2);
}

.doc__note {
  background: var(--blue-tint);
  border: 1px solid #dce8ff;
  border-radius: var(--r-card);
  padding: var(--s6);
  margin-block-end: var(--s8);
}

.doc__note p {
  margin: 0;
  font-size: 15px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--s6);
  font-size: 15px;
}

.doc th,
.doc td {
  text-align: start;
  padding: var(--s3);
  border-block-end: 1px solid var(--line);
  vertical-align: top;
}

.doc th {
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
}

.doc td {
  color: #2c3654;
}

/* ------------------------------------------------------------------ motion */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Hero diagram: the paths draw, then the parcel lands and the flash fires —
   the same order as the splash timeline in the Flutter handoff. */
.route__path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 900ms var(--ease) forwards;
}

.route__shop,
.route__door {
  opacity: 0;
  animation: fade 420ms var(--ease) forwards;
}

.route__parcel {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 85%;
  animation: land 480ms var(--ease) 900ms forwards;
}

.route__flash {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: flash 620ms var(--ease) 1180ms forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

@keyframes land {
  from {
    opacity: 0;
    transform: translate(26px, -22px) scale(0.72);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes flash {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }
  35% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .route__path,
  .route__shop,
  .route__door,
  .route__parcel,
  .route__flash {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }

  .route__flash {
    opacity: 0.5;
  }

  .btn,
  .side {
    transition: none;
  }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .hero__grid,
  .trust {
    grid-template-columns: 1fr;
    gap: var(--s12);
  }

  .steps,
  .sides {
    grid-template-columns: 1fr;
    gap: var(--s12);
  }

  .rides {
    grid-template-columns: repeat(2, 1fr);
  }

  .masthead__nav {
    display: none;
  }

  .masthead__end {
    margin-inline-start: auto;
  }

  .band,
  .hero {
    padding-block: var(--s16);
  }

  .cta {
    padding: var(--s12) var(--s6);
  }
}

@media (max-width: 480px) {
  .shell {
    padding-inline: var(--s4);
  }

  .hero__actions .btn,
  .cta__actions .btn {
    flex: 1 1 100%;
  }

  .proof {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }
}