/* Dandana marketing site — golden-hour palette from the app (app_colors.dart).
   One stylesheet serves / (ar, RTL) and /en/ (LTR): all spacing uses logical
   properties. Calm, not hyper: transform/opacity animations only, nothing
   faster than a gentle 2s bob, full prefers-reduced-motion fallback. */

:root {
  --sand: #FBF3E6;
  --cream: #FFFDF8;
  --ink: #2A3742;
  --muted: #7A6D50;
  --line: #EADFCB;
  --teal: #178A93;
  --teal-dark: #0C5F67;
  --terra: #DB8F55;
  --terra-dark: #C0703A;
  --plum: #8574A6;
  --rose: #E38AA0;
  --sun: #F6CE6B;
  --olive: #6B8E4E;
  --teal-wash: #E7F3EF;
  --lavender: #EFE9F7;
  --rose-wash: #FDE8EE;
  --peach: #FBE3CF;
  --gold-wash: #FEF0D6;
  --hero-gold-1: #F7DB95;
  --hero-gold-2: #E9B65E;
  --hero-gold-3: #D89A3E;
  --gold-edge: #FBE9B8;
  --ink-brown: #3A2606;
  --subline: #7A5E2E; /* ≥5:1 on sand and hero creams (AA) */
  --teal-night: #0F2D2C;
  --on-teal-body: #BCD9D3;
  --on-teal-bright: #BDEEE0;
  --radius: 24px;
  --shadow: 0 6px 24px rgba(42, 55, 66, .06);
  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--sand);
  color: var(--ink);
  font-family: Tajawal, "Segoe UI", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.8;
  overflow-x: clip;
}
:lang(en) body, body:lang(en) { line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--teal-dark); }

h1, h2, h3 { font-weight: 800; line-height: 1.35; }
html[lang="en"] h1, html[lang="en"] h2 { font-family: "Baloo 2", Tajawal, sans-serif; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom: .5em; }
h3 { font-size: 1.25rem; font-weight: 700; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(56px, 9vw, 104px); }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: .9rem; color: var(--teal-dark);
  background: var(--teal-wash); border-radius: 999px; padding: 6px 16px; margin-bottom: 18px;
}
html[lang="en"] .eyebrow { letter-spacing: .06em; font-size: .8125rem; }
.lead { color: var(--subline); font-size: 1.125rem; max-width: 34em; }

.skip {
  position: absolute; inset-inline-start: -999px; top: 0; background: var(--teal);
  color: #fff; padding: 10px 18px; border-radius: 0 0 12px 12px; z-index: 99;
}
.skip:focus { inset-inline-start: 12px; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
.band-dark :focus-visible { outline-color: var(--on-teal-bright); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50; height: 72px;
  background: rgba(255, 253, 248, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px rgba(42, 55, 66, .18); }
html[lang="en"] .brand { font-family: "Baloo 2", Tajawal, sans-serif; }
.nav-links { display: flex; gap: 26px; margin-inline-start: auto; }
.nav-links a { color: var(--ink); font-weight: 700; text-decoration: none; }
.nav-links a:hover { color: var(--teal-dark); text-decoration: underline; text-decoration-color: var(--terra); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--cream); }
.toggle a, .toggle span {
  display: grid; place-items: center; min-width: 48px; min-height: 40px;
  font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--teal-dark);
}
.toggle .active { background: var(--teal); color: #fff; }

.btn {
  display: inline-block; background: var(--teal); color: #fff; text-decoration: none;
  white-space: nowrap;
  font-weight: 800; font-size: 1.1875rem; padding: 14px 28px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(23, 138, 147, .28);
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background .2s;
}
.btn:hover { background: var(--teal-dark); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { font-size: 1rem; padding: 10px 22px; }
.btn-ghost { background: var(--cream); color: var(--teal-dark); border: 1.5px solid var(--teal); box-shadow: none; }
.btn-ghost:hover { background: var(--teal-wash); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, #FCE8CE 0%, #FBF2E4 60%, #FBF3E6 100%);
  position: relative; overflow: clip; padding-block: clamp(48px, 7vw, 88px);
}
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; position: relative; }
.hero h1 { margin-bottom: .4em; }
.hero .sub { font-size: 1.15rem; max-width: 30em; margin-bottom: 26px; }
.trustline { margin-top: 14px; color: var(--subline); font-weight: 700; font-size: .95rem; }

.badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Official store badge artwork (Apple SVG / Google Play PNG). The Play badge
   ships with built-in padding, so it renders taller to visually match. */
.store-badge {
  position: relative; display: inline-flex; align-items: center; text-decoration: none;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1);
}
.store-badge:hover { transform: translateY(-3px); }
.store-badge .badge-apple { height: 54px; width: auto; }
.store-badge .badge-gplay { height: 81px; width: auto; margin-block: -13px; }
.store-badge .soon {
  position: absolute; top: -8px; inset-inline-end: -8px; z-index: 1;
  background: var(--sun); color: var(--ink-brown); font-weight: 800; font-size: .7rem;
  border-radius: 999px; padding: 3px 10px; box-shadow: 0 2px 8px rgba(42, 55, 66, .25);
}

.blob {
  position: absolute; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  animation: drift 12s ease-in-out infinite alternate; will-change: transform;
  pointer-events: none;
}
.blob-a { width: 340px; height: 340px; background: var(--teal-wash); top: -80px; inset-inline-end: 8%; }
.blob-b { width: 220px; height: 220px; background: var(--peach); bottom: -60px; inset-inline-start: -40px; animation-duration: 15s; }
.blob-c { width: 150px; height: 150px; background: var(--rose-wash); top: 30%; inset-inline-start: 38%; animation-duration: 18s; }
@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  to { transform: translate(24px, -18px) rotate(6deg); border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; }
}

.hero-visual { position: relative; display: grid; place-items: center; }

/* Raw app screenshots shown in a slim, modern device frame: thin ink bezel,
   soft screen radius, a notch pill — light enough to keep the screenshot the
   hero of the composition. */
.device {
  position: relative; border-radius: 44px; overflow: hidden;
  border: 7px solid var(--ink); background: var(--ink);
  box-shadow: 0 24px 56px rgba(42, 55, 66, .22);
  rotate: var(--r, 0deg);
}
/* No CSS notch: the raw screenshots already show the device's own status bar
   and Dynamic Island — drawing another one doubled it. */
.device img { width: 100%; height: auto; display: block; border-radius: 36px; }
.device:hover { animation: wiggle .6s ease-in-out; }
@keyframes wiggle {
  0%, 100% { rotate: var(--r, 0deg); }
  25% { rotate: calc(var(--r, 0deg) + 2deg); }
  75% { rotate: calc(var(--r, 0deg) - 2deg); }
}

.hero-visual .device {
  width: min(74vw, 330px); --r: 3deg;
  animation: arrive .9s cubic-bezier(.34, 1.56, .64, 1) both,
             floaty 7s 1s ease-in-out infinite alternate;
}
html[lang="en"] .hero-visual .device { --r: -3deg; }
@keyframes arrive { from { transform: translateY(46px) scale(.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ── The journey — the app's map path, reimagined for the page ─────────────
   A winding sandy road (the app's home-map road colours) runs down the middle
   of the showcase; each screen is a STOP on the road with a world-tinted node
   medal. A little star travels the road, like the child's finger on the map. */
.journey { position: relative; padding-block: 20px; }
.journey-path {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.journey-path .under { stroke: #ECD9AE; stroke-width: 10; fill: none; }
.journey-path .over { stroke: #F5E8C9; stroke-width: 4; fill: none; stroke-dasharray: 1 14; stroke-linecap: round; }
.traveler {
  position: absolute; inset-inline-start: 50%; top: 0; z-index: 3;
  font-size: 1.5rem; translate: -50% 0;
  animation: travel 26s linear infinite;
  pointer-events: none;
}
@keyframes travel {
  0% { top: 2%; transform: translateX(0); }
  25% { transform: translateX(min(9vw, 110px)); }
  50% { top: 48%; transform: translateX(0); }
  75% { transform: translateX(max(-9vw, -110px)); }
  100% { top: 96%; transform: translateX(0); }
}

.stop {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 72px); align-items: center;
  padding-block: clamp(32px, 4.5vw, 52px);
}
.stop .shot { position: relative; display: grid; place-items: center; }
.stop .shot::before {
  content: ""; position: absolute; width: 82%; height: 86%;
  background: var(--wash, var(--teal-wash));
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  inset-inline-end: -10px; bottom: -10px;
  animation: drift 14s ease-in-out infinite alternate;
}
.stop .shot .device { width: min(70vw, 300px); }
.stop:nth-child(odd) .shot .device { --r: -2.5deg; }
.stop:nth-child(even) .shot .device { --r: 2.5deg; }

/* World-medal node pinned to the road at each stop. */
.node {
  display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid var(--cream); box-shadow: 0 6px 18px rgba(42, 55, 66, .2);
  font-size: 1.5rem; margin-bottom: 14px;
}
.stop .tag { display: inline-block; background: var(--gold-wash); color: #8A5510; font-weight: 700; border-radius: 999px; padding: 4px 14px; font-size: .85rem; margin-bottom: 12px; margin-inline-start: 10px; }

.float-letter {
  position: absolute; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem);
  opacity: .13; pointer-events: none; user-select: none;
  animation: rise 12s ease-in-out infinite alternate;
}
@keyframes rise { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-26px) rotate(3deg); } }

/* Waveform art */
.wave-art { margin-top: 20px; }
.wave-art path {
  stroke: var(--teal); stroke-width: 3; fill: none; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2.8s ease-out forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Soundwave bars */
.bars { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.bars i {
  width: 3px; border-radius: 2px; background: var(--teal); display: block; height: 100%;
  transform-origin: center; animation: wave 1.8s ease-in-out infinite alternate;
}
.bars i:nth-child(1) { height: 40%; }
.bars i:nth-child(2) { height: 70%; animation-delay: .15s; }
.bars i:nth-child(3) { height: 100%; animation-delay: .3s; }
.bars i:nth-child(4) { height: 70%; animation-delay: .45s; }
.bars i:nth-child(5) { height: 40%; animation-delay: .6s; }
@keyframes wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; }
.step {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); text-align: center;
}
.step .ico {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.8rem;
}
.step:nth-child(1) .ico { background: var(--teal-wash); }
.step:nth-child(2) .ico { background: var(--peach); }
.step:nth-child(3) .ico { background: var(--rose-wash); }
.step:hover .ico { animation: bob .7s ease-in-out 2 alternate; }
.step p { margin-top: 8px; }

/* ── Letters & numbers ticker — a slow playful marquee (أ…ي · A…Z · ١…٢٠) ── */
.ticker {
  overflow: hidden; background: var(--cream); border-block: 1px solid var(--line);
  padding-block: 14px;
}
.ticker-track {
  display: flex; gap: 38px; width: max-content;
  font-weight: 800; font-size: 1.7rem; line-height: 1;
  animation: ticker 40s linear infinite;
}
.ticker-track span:nth-child(6n+1) { color: var(--teal); }
.ticker-track span:nth-child(6n+2) { color: var(--terra); }
.ticker-track span:nth-child(6n+3) { color: var(--plum); }
.ticker-track span:nth-child(6n+4) { color: var(--rose); }
.ticker-track span:nth-child(6n+5) { color: var(--olive); }
.ticker-track span:nth-child(6n+6) { color: var(--gold, #CE8B34); }
@keyframes ticker { to { transform: translateX(-50%); } }
[dir="rtl"] .ticker-track { animation-name: ticker-rtl; }
@keyframes ticker-rtl { to { transform: translateX(50%); } }

/* ── Voice cast ──────────────────────────────────────────────────────────── */
.cast-band { background: var(--teal-wash); }
.cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-block: 26px 14px; }
.chip {
  display: flex; align-items: center; gap: 12px; background: var(--cream);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 22px 10px 12px;
  font-weight: 800; font-size: 1.15rem; box-shadow: var(--shadow);
}
[dir="rtl"] .chip { padding: 10px 12px 10px 22px; }
.chip .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; }
.cast-line { text-align: center; font-weight: 700; color: var(--teal-dark); font-size: 1.15rem; }

/* ── Worlds ──────────────────────────────────────────────────────────────── */
.worlds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 34px; }
.world {
  border-radius: var(--radius); padding: 26px 20px; color: var(--ink); text-align: center;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s;
}
.world:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(42, 55, 66, .14); }
.world .glyph {
  font-size: 2.2rem; display: inline-block; margin-bottom: 10px;
  animation: bob 3s ease-in-out infinite alternate;
}
.world:nth-child(2) .glyph { animation-delay: .5s; }
.world:nth-child(3) .glyph { animation-delay: 1s; }
.world:nth-child(4) .glyph { animation-delay: 1.5s; }
.world:nth-child(5) .glyph { animation-delay: 2s; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.w-school { background: linear-gradient(160deg, #DDD3EE, #BBA9DC); }
.w-home { background: linear-gradient(160deg, #CFEAEC, #A6D6DB); }
.w-garden { background: linear-gradient(160deg, #F6D0DA, #EDA7BD); }
.w-market { background: linear-gradient(160deg, #FBE3A6, #F3CB72); }
.w-farm { background: linear-gradient(160deg, #D0E1AC, #AECA80); }
.worlds-caption { text-align: center; margin-top: 22px; color: var(--subline); font-weight: 700; }

/* ── Trust ───────────────────────────────────────────────────────────────── */
.trust-band { background: var(--cream); border-block: 1px solid var(--line); }
.trust { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 34px; }
.trust article {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 18px; text-align: center;
}
.trust .ico {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal-dark); display: grid; place-items: center; font-size: 1.5rem;
}
.trust h3 { font-size: 1.05rem; margin-bottom: 6px; }
.trust p { font-size: .92rem; line-height: 1.65; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.price-card {
  max-width: 560px; margin: 34px auto 0; text-align: center;
  background: linear-gradient(180deg, var(--hero-gold-1), var(--hero-gold-2), var(--hero-gold-3));
  border: 1px solid var(--gold-edge); border-radius: var(--radius); padding: 40px 32px;
  color: var(--ink-brown); box-shadow: 0 14px 40px rgba(206, 139, 52, .25);
}
.price-card h3 { font-size: 1.6rem; margin-bottom: 10px; }
.price-card p { font-weight: 700; }
.price-card .fine { font-size: .85rem; font-weight: 500; margin-top: 14px; }
.price-card .fine a { color: var(--ink-brown); }

/* ── Notify (pre-launch intent capture) ──────────────────────────────────── */
.notify-band { background: var(--teal-wash); text-align: center; }
.notify-band .lead { margin-inline: auto; }
.notify-cta { margin-top: 26px; }
.notify-note { margin-top: 14px; font-size: .9rem; color: var(--subline); font-weight: 700; }
.journey-cta { text-align: center; padding-block: 10px 26px; position: relative; z-index: 1; }
.journey-cta p { font-weight: 700; color: var(--subline); margin-bottom: 14px; }

/* ── Facts strip — verifiable numbers instead of testimonials ────────────── */
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 26px; }
.facts span {
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px; font-weight: 700; font-size: .92rem; color: var(--teal-dark);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 6px; }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.1rem; padding: 16px 8px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; color: var(--teal-dark); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .a { padding: 0 8px 18px; }

/* ── Final band + footer ─────────────────────────────────────────────────── */
.band-dark {
  background: linear-gradient(180deg, var(--teal-dark), var(--teal-night));
  color: var(--on-teal-body); position: relative; overflow: clip;
}
.band-dark h2 { color: #fff; }
.band-dark .float-letter { color: var(--on-teal-bright); opacity: .08; }
.cta-final { text-align: center; }
.cta-final .badges { justify-content: center; margin-top: 26px; }
.cta-final .badge { background: var(--cream); color: var(--ink); }

footer { background: var(--teal-night); color: var(--on-teal-body); padding-block: 44px 34px; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
footer a { color: var(--on-teal-bright); }
footer .legal { border-top: 1px solid rgba(188, 217, 211, .25); margin-top: 30px; padding-top: 18px; font-size: .8125rem; }
footer h3 { color: #fff; font-size: 1rem; margin-bottom: 10px; }
footer ul { list-style: none; }
footer li { margin-bottom: 8px; }

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .worlds { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav .wrap { gap: 10px; flex-wrap: nowrap; }
  .brand { font-size: 1.1rem; }
  .brand img { width: 34px; height: 34px; }
  .nav .btn-sm { padding: 8px 14px; font-size: .9rem; }
  .store-badge .badge-apple { height: 48px; }
  .store-badge .badge-gplay { height: 72px; margin-block: -12px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr; }
  .worlds { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .world { min-width: 70vw; scroll-snap-align: center; }
  .stop { grid-template-columns: 1fr; }
  .stop .shot { order: 2; }
  .journey-path, .traveler { display: none; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust article:last-child { grid-column: 1 / -1; }
  footer .cols { grid-template-columns: 1fr; }
  .blob-c { display: none; }
  .badge { min-height: 48px; }
}

@media (max-width: 480px) {
  /* Icon-only brand on tiny screens — the medallion carries the identity. */
  .brand { font-size: 0; gap: 0; }
  .deck { height: clamp(300px, 96vw, 380px); }
  .deck .card-shot { width: 48%; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
  .wave-art path { stroke-dashoffset: 0; }
}