/* Lisan — Rawi design system, web.
   Same tokens as the app (theme/colors.js). The design doc is a fixed 1400px
   desktop layout; this is rebuilt responsive because most traffic will arrive
   from TikTok/Instagram on a phone. */

:root {
  --cream:#FAF2E4; --sunk:#EFE3CB; --band:#F6EDDA; --card:#FFFFFF; --card2:#FBF6EA;
  --line:#E8DCC4; --ink:#1D1633; --muted:#6B5E44; --warm:#3B2A1E; --faint:#B8A98C;
  --blue:#2492EA; --blue-deep:#1668B4; --blue-light:#4FB0F5; --blue-soft:#7FBDF2;
  --blue-pale:#BFDDF7; --blue-tint:#DCEDFC; --blue-ink:#0B3358;
  --green:#12B87E; --green-deep:#0A8A5C; --green-ink:#0A3D2A; --green-tint:#DCF5EA;
  --purple:#8F7BF2; --purple-tint:#E4DDFB; --amber:#F0A32B; --danger:#C43D3D;
  --royal:#1D3FA8; --royal-light:#2E5BD0; --royal-deep:#122A73;
  --display:'Baloo 2',system-ui,sans-serif; --serif:'Lora',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --ar:'IBM Plex Sans Arabic',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:64px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
img,svg { max-width:100%; }
a { color:var(--blue-deep); text-decoration:none; }
a:hover { color:var(--blue); }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }

.wrap { max-width:1400px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.eyebrow { font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:1.2px; color:var(--muted); text-transform:uppercase; }
h1,h2,h3 { font-family:var(--display); font-weight:800; margin:0; letter-spacing:-1.6px; line-height:1.02; }
h1 { font-size:clamp(40px,7vw,76px); line-height:0.99; letter-spacing:-2.4px; }
h2 { font-size:clamp(32px,5vw,56px); }
.lead { font-family:var(--serif); font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--warm); text-wrap:pretty; }
.ar { font-family:var(--ar); direction:rtl; text-align:right; font-weight:600; }
.card { background:var(--card); border:2px solid var(--line); border-radius:30px; padding:30px; }

/* Header */
.nav { position:sticky; top:0; z-index:50; background:rgba(250,242,228,0.92); backdrop-filter:blur(12px); border-bottom:2px solid var(--sunk); }
.nav-in { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px var(--pad); max-width:1400px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:38px; height:38px; border-radius:13px; background:linear-gradient(150deg,#4AADF4,#2391E9 52%,#176DBB); display:grid; place-items:center; flex:none; }
.brand-name { font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-0.4px; color:var(--ink); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a:not(.btn) { font-size:15px; font-weight:500; color:var(--warm); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--display); font-weight:700; border-radius:18px; border:0; cursor:pointer; text-decoration:none; }
.btn-ink { background:var(--ink); color:var(--cream); box-shadow:0 12px 18px rgba(29,22,51,0.3); }
.btn-ink:hover { color:var(--cream); }
.btn-sm { height:44px; padding:0 20px; font-size:15px; border-radius:15px; box-shadow:0 8px 16px rgba(29,22,51,0.22); }
.btn-lg { height:62px; padding:0 26px; font-size:18px; border-radius:19px; box-shadow:0 14px 26px rgba(29,22,51,0.26); }
.appstore { display:inline-flex; align-items:center; gap:11px; }
.appstore small { display:block; font-family:var(--sans); font-weight:400; font-size:10.5px; color:var(--blue-pale); line-height:1.2; }
.appstore strong { display:block; font-family:var(--display); font-weight:700; font-size:18px; color:var(--cream); line-height:1.2; }

/* Hero */
.hero { position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:-180px; right:-120px; width:720px; height:720px; border-radius:50%; background:radial-gradient(circle,rgba(191,221,247,0.7) 0%,rgba(191,221,247,0) 70%); pointer-events:none; }
.hero-in { display:flex; align-items:center; gap:72px; padding-top:72px; padding-bottom:90px; position:relative; }
.hero-copy { flex:1; min-width:0; }
.pill { display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px; background:var(--blue-tint); }
.pill span:last-child { font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:0.6px; color:var(--blue-deep); }
.dot { width:7px; height:7px; border-radius:4px; background:var(--blue-deep); }
.hero-ar { font-family:var(--ar); font-weight:600; font-size:clamp(20px,2.6vw,27px); line-height:1.8; color:var(--blue-deep); margin-top:14px; direction:rtl; max-width:520px; }
.hero-cta { display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-note strong { display:block; font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); }
.hero-note span { font-size:13.5px; color:var(--muted); }

/* Phone mock */
.phone-shell { flex:none; position:relative; }
.phone { width:392px; height:800px; border-radius:52px; background:var(--ink); padding:11px; box-shadow:0 40px 80px rgba(29,22,51,0.28); }
.phone-screen { width:370px; height:778px; border-radius:42px; background:var(--card2); overflow:hidden; }
.phone-scale { width:390px; height:844px; transform:scale(0.94872); transform-origin:top left; display:flex; flex-direction:column; background:var(--card2); }

/* Stat strip */
.stats { display:flex; gap:20px; padding-bottom:80px; }
.stat { flex:1; padding:26px 28px; border-radius:26px; background:var(--card); border:2px solid var(--line); }
.stat b { display:block; font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-0.6px; color:var(--ink); }
.stat span { display:block; font-size:15px; color:var(--muted); margin-top:5px; }

/* Dark problem section */
.dark { background:var(--ink); position:relative; overflow:hidden; color:var(--cream); }
.dark h2 { color:var(--cream); }
.dark .eyebrow { color:var(--blue-soft); }
.dark .lead { color:var(--faint); }
.dark-glow { position:absolute; bottom:-200px; left:-140px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle,rgba(36,146,234,0.4) 0%,rgba(36,146,234,0) 70%); pointer-events:none; }
.dark-in { display:flex; align-items:center; gap:72px; padding-top:96px; padding-bottom:96px; position:relative; }
.compare { flex:none; width:440px; display:flex; flex-direction:column; gap:16px; }
.cmp { padding:24px 26px; border-radius:26px; }
.cmp-bad { background:rgba(250,242,228,0.07); border:2px solid rgba(250,242,228,0.14); }
.cmp-good { background:rgba(18,184,126,0.12); border:2px solid rgba(18,184,126,0.3); }
.cmp-label { display:flex; align-items:center; gap:11px; margin-bottom:11px; font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:0.7px; }
.cmp-bad .cmp-label { color:#E88A8A; }
.cmp-good .cmp-label { color:var(--green); }
.cmp p { font-family:var(--serif); font-size:19px; line-height:1.5; margin:0; }
.cmp-bad p { color:var(--faint); }
.cmp-good p { color:var(--cream); }

/* Steps + features */
.section { padding-top:96px; padding-bottom:96px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.step { padding:32px; border-radius:32px; background:var(--card); border:2px solid var(--line); }
.step-num { width:56px; height:56px; border-radius:19px; background:var(--blue-tint); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:24px; color:var(--blue-deep); }
.step h3 { font-size:26px; letter-spacing:-0.5px; margin-top:20px; }
.step p, .feat p { font-size:16.5px; line-height:1.6; color:var(--warm); margin:9px 0 0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chip { padding:8px 14px; border-radius:999px; background:var(--band); font-size:13.5px; font-weight:600; color:var(--muted); }
.bars { display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.bar { display:flex; align-items:center; gap:12px; }
.bar span { font-size:13.5px; font-weight:600; color:var(--warm); width:96px; flex:none; }
.track { flex:1; height:8px; border-radius:999px; background:var(--sunk); overflow:hidden; }
.track i { display:block; height:100%; border-radius:999px; }
.features { background:var(--band); }
.feat-icon { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; }
.feat h3 { font-size:23px; letter-spacing:-0.4px; margin-top:18px; }

/* Quote */
.quote-in { display:flex; gap:64px; align-items:center; }
.quote-mark { flex:none; width:112px; height:112px; border-radius:36px; background:linear-gradient(150deg,#4AADF4,#2391E9 52%,#176DBB); display:grid; place-items:center; box-shadow:0 18px 34px rgba(36,146,234,0.3); }
blockquote { font-family:var(--serif); font-size:clamp(22px,3.2vw,34px); line-height:1.42; color:var(--ink); margin:0; }
.quote-by { display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }

/* Pricing */
.pricing { background:var(--royal); position:relative; overflow:hidden; color:#fff; }
.pricing::before { content:''; position:absolute; inset:0; background:linear-gradient(165deg,var(--royal-light) 0%,var(--royal) 52%,var(--royal-deep) 100%); }
.pricing-glow { position:absolute; top:80px; left:-160px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle,rgba(36,146,234,0.5) 0%,rgba(36,146,234,0) 70%); pointer-events:none; }
.pricing-in { position:relative; padding-top:96px; padding-bottom:96px; }
.pricing h2 { color:#fff; }
.pricing .eyebrow { color:var(--blue-pale); }
.pricing .lead { color:var(--blue-pale); }
.plans { display:flex; gap:22px; justify-content:center; margin:48px auto 0; max-width:840px; }
.plan { flex:1; padding:34px; border-radius:32px; position:relative; }
.plan-best { background:var(--cream); color:var(--ink); }
.plan-alt { background:rgba(250,242,228,0.09); border:2px solid rgba(250,242,228,0.22); }
.badge { position:absolute; top:-13px; left:34px; padding:6px 14px; border-radius:999px; background:var(--green); font-family:var(--display); font-weight:800; font-size:12px; letter-spacing:0.7px; color:#043A27; }
.plan-name { font-family:var(--display); font-weight:800; font-size:22px; margin-top:8px; }
.price { display:flex; align-items:baseline; gap:6px; margin-top:12px; }
.price b { font-family:var(--display); font-weight:800; font-size:52px; letter-spacing:-1.6px; line-height:1; }
.price span { font-size:17px; }
.plan-meta { font-family:var(--mono); font-size:14px; margin-top:7px; }
.plan-best .price span, .plan-best .plan-meta { color:var(--muted); }
.plan-alt .price span, .plan-alt .plan-meta { color:var(--blue-pale); }
.plan .btn { width:100%; height:56px; font-size:17px; margin-top:24px; }
.plan-alt .btn { background:rgba(250,242,228,0.16); border:2px solid rgba(250,242,228,0.3); color:#fff; box-shadow:none; }
.disclaimer { font-size:13px; color:var(--blue-pale); text-align:center; margin:26px auto 0; max-width:620px; line-height:1.6; }

/* FAQ */
.faq-in { display:flex; gap:72px; }
.faq-head { flex:none; width:340px; }
.faq-head h2 { font-size:clamp(32px,4vw,46px); letter-spacing:-1.3px; margin-top:16px; }
.faq-list { flex:1; display:flex; flex-direction:column; gap:14px; }
details.qa { padding:26px 28px; border-radius:26px; background:var(--card); border:2px solid var(--line); }
details.qa summary { font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:'+'; font-size:24px; line-height:1; color:var(--muted); flex:none; }
details.qa[open] summary::after { content:'–'; }
details.qa p { font-size:16.5px; line-height:1.6; color:var(--warm); margin:9px 0 0; }

/* Final CTA */
.final { background:var(--blue-pale); position:relative; overflow:hidden; text-align:center; }
.final-glow { position:absolute; top:-140px; right:-100px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 70%); pointer-events:none; }
.final-in { padding-top:104px; padding-bottom:104px; position:relative; }
.final h2 { font-size:clamp(36px,6vw,64px); letter-spacing:-1.9px; }
.final-ar { font-family:var(--ar); font-weight:600; font-size:clamp(20px,3vw,26px); line-height:1.8; color:var(--blue-ink); margin-top:14px; direction:rtl; }

/* Footer */
footer { background:var(--ink); color:var(--faint); }
.foot-in { padding:56px var(--pad) 44px; max-width:1400px; margin:0 auto; }
.foot-top { display:flex; justify-content:space-between; align-items:flex-start; gap:64px; flex-wrap:wrap; }
.foot-cols { display:flex; gap:64px; flex-wrap:wrap; }
.foot-col { display:flex; flex-direction:column; gap:11px; }
.foot-col b { font-family:var(--display); font-weight:800; font-size:12px; letter-spacing:0.9px; color:var(--muted); }
.foot-col a { font-size:15px; color:var(--faint); }
.foot-col a:hover { color:var(--cream); }
.foot-bot { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:44px; padding-top:24px; border-top:2px solid rgba(250,242,228,0.12); font-family:var(--mono); font-size:12px; color:var(--muted); flex-wrap:wrap; }

/* Legal pages */
.legal { max-width:820px; margin:0 auto; padding:56px var(--pad) 96px; }
.legal h1 { font-size:clamp(34px,5vw,52px); letter-spacing:-1.4px; }
.legal h2 { font-size:clamp(22px,2.6vw,28px); letter-spacing:-0.6px; margin:44px 0 0; }
.legal h3 { font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-0.3px; margin:28px 0 0; }
.legal p, .legal li { font-size:17px; line-height:1.72; color:var(--warm); }
.legal ul { padding-left:22px; }
.legal li { margin-top:8px; }
.legal .updated { font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:10px; }
.legal .note { background:var(--band); border:2px solid var(--line); border-radius:20px; padding:20px 22px; margin-top:28px; }
.legal .note p { margin:0; }

@media (max-width:1080px) {
  :root { --pad:40px; }
  .hero-in, .dark-in, .quote-in, .faq-in { flex-direction:column; align-items:flex-start; gap:48px; }
  .phone-shell { align-self:center; }
  .compare, .faq-head { width:100%; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .stats { flex-wrap:wrap; }
  .stat { flex:1 1 240px; }
}
@media (max-width:720px) {
  :root { --pad:22px; }
  .nav-links a:not(.btn) { display:none; }
  .grid-3 { grid-template-columns:1fr; }
  .plans { flex-direction:column; }
  .section, .dark-in, .pricing-in { padding-top:64px; padding-bottom:64px; }
  .final-in { padding-top:72px; padding-bottom:72px; }
  .hero-in { padding-top:44px; padding-bottom:56px; }
  /* The phone mock is a fixed 392x800 lift from the design; scale it down
     rather than letting it force a horizontal scrollbar. */
  .phone { transform:scale(0.78); transform-origin:top center; margin-bottom:-176px; }
  .quote-mark { width:80px; height:80px; border-radius:26px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }