/* Fidwa site. One stylesheet, no external requests. Arabic first (RTL), English mirrored with logical properties.
   Palette from the Fidwa brand kit: turquoise #2FA8C0 / deep #1C8CA3, lavender #8E7CF0 / deep #6F5BDB, yellow #FFC53D, ink #1E3A4A, cream #FCFBFF. */
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Variable.ttf") format("truetype"); font-weight: 100 700; font-display: swap; }

:root {
  --bg: #FCFBFF; --card: #FFFFFF; --ink: #1E3A4A; --muted: #4C6676; --line: #D9E6EC;
  --teal: #2FA8C0; --teal-deep: #1C8CA3; --hero: #1A7D9B; --lav: #8E7CF0; --lav-deep: #5B47C8; --yellow: #FFC53D;
  --sh-teal: #DDF4F8; --sh-lav: #EFEAFF; --sh-yel: #FFF1D2; --link: #14708A; --btn: #1A7D9B;
  --font-ar: "Plex Arabic", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en: "Plex Sans", "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem); --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); --step-big: clamp(2.2rem, 1.5rem + 3.5vw, 4.2rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem); --max: 72rem; --radius: 1.6rem;
  --hh: 4.6rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E1B22; --card: #14272F; --ink: #EAF4F7; --muted: #A9C1CC; --line: #223A45; --sh-teal: #12303A; --sh-lav: #1C1D3F; --sh-yel: #33290F; --link: #7FD3E5; --btn: #1A7D9B; --lav-deep: #B7ABFF; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ar); font-size: var(--step-0); line-height: 1.8; min-block-size: 100vh; display: flex; flex-direction: column; }
html[lang="en"] body { font-family: var(--font-en); line-height: 1.65; }
main { flex: 1; }
img, svg { max-inline-size: 100%; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; }
.wrap { inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); }
.skip { position: absolute; inset-inline-start: -999px; background: var(--yellow); color: #1E3A4A; padding: 0.6rem 1rem; z-index: 99; }
.skip:focus { inset-inline-start: 1rem; inset-block-start: 1rem; }
.latin { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; }

/* ---------- header ---------- */
.site-header { padding-block-start: env(safe-area-inset-top); position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand .ico { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 22%; box-shadow: 0 0 0 2px var(--teal); }
.brand .nm { display: flex; flex-direction: column; line-height: 1.1; }
.brand .nm b { font-size: 1.5rem; font-weight: 700; color: var(--link); }
.brand .nm span { font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.site-nav ul { display: flex; align-items: center; gap: 0.3rem 1.3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 0.4rem 0.1rem; border-block-end: 3px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-block-end-color: var(--teal); }
.lang-switch { font-family: var(--font-en); font-size: 0.9rem; border: 2px solid var(--teal) !important; border-radius: 999px; padding: 0.15rem 0.8rem !important; }
.nav-toggle { display: none; }
@media (max-width: 47.99rem) {
  .js .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; inline-size: 2.8rem; block-size: 2.8rem; flex: none; padding: 0; background: var(--card); border: 2px solid var(--teal); border-radius: 0.9rem; cursor: pointer; }
  .js .nav-toggle span { display: block; inline-size: 1.25rem; block-size: 3px; border-radius: 3px; background: var(--ink); transition: transform 0.25s ease, opacity 0.15s ease; }
  .js .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .js .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .js .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .js .site-header .wrap { position: relative; }
  .js .site-nav { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--bg); border-block-end: 2px solid var(--teal); box-shadow: 0 14px 24px rgba(0,0,0,0.12); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s 0.25s; }
  .js .site-nav.open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.4rem var(--gutter) 1rem; }
  .js .site-nav li + li { border-block-start: 1px solid var(--line); }
  .js .site-nav a { display: block; padding: 0.9rem 0.2rem; font-size: 1.15rem; border-block-end: 0; }
  .js .site-nav a.lang-switch { display: inline-block; margin-block-start: 0.6rem; padding: 0.35rem 1rem !important; }
  .brand .nm span { display: none; }
}

/* ---------- hero (also used as the banner on inner pages) ---------- */
.app-head { position: relative; overflow: clip; background: var(--hero); color: #fff; }
.app-head .wrap { position: relative; z-index: 2; }
.app-hero { display: grid; gap: 1.4rem 2.2rem; align-items: center; padding-block: clamp(2.4rem, 6vw, 5rem); }
@media (min-width: 48rem) { .app-hero { grid-template-columns: auto 1fr; } }
.tile.big { inline-size: clamp(9rem, 20vw, 12.5rem); block-size: clamp(9rem, 20vw, 12.5rem); border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 18px 40px rgba(6,40,52,0.35); animation: pop 0.8s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes pop { from { transform: scale(0.8) rotate(-6deg); } to { transform: none; } }
.logo-h1 { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.4rem; }
.logo-h1 img.ar { block-size: clamp(3.8rem, 9vw, 6.2rem); inline-size: auto; }
.logo-h1 img.en { block-size: clamp(1.4rem, 3.4vw, 2.2rem); inline-size: auto; opacity: 0.95; }
.tag { font-size: var(--step-2); font-weight: 700; margin: 0.3rem 0 0.6rem; text-wrap: balance; }
.lead { font-size: var(--step-1); max-inline-size: 40ch; margin: 0 0 1rem; }
.pill-soon { display: inline-block; background: #fff; color: #1E3A4A; border: 2px solid #1E3A4A; border-radius: 999px; padding: 0.1rem 1rem; font-weight: 700; font-size: 0.95rem; }
.soon-note { margin: 0.6rem 0 0; font-size: 0.98rem; opacity: 0.97; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 1.1rem; }
.btn { display: inline-block; text-decoration: none; font-weight: 700; padding: 0.65rem 1.4rem; border-radius: 999px; border: 2px solid transparent; transition: transform 0.15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.light { background: #fff; color: #1E3A4A; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.85); }
.btn.solid { background: var(--btn); color: #fff; }
.btn.solid:hover { background: var(--lav-deep); }
@media (prefers-color-scheme: dark) { .btn.solid:hover { background: #2a8fb0; } }

/* ---------- sections and cards ---------- */
.sec { padding-block: clamp(2.2rem, 5vw, 4rem); }
.sec.tint { background: var(--sh-teal); }
.sec.lav { background: var(--sh-lav); }
.sec h2 { font-size: var(--step-3); }
.sec .sub { font-size: var(--step-1); color: var(--muted); max-inline-size: 48ch; margin-block-end: 1.6rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; position: relative; }
.card h3 { font-size: var(--step-1); margin-block-end: 0.35em; }
.card p { margin: 0; color: var(--muted); }
.card .ic { display: grid; place-items: center; inline-size: 3.2rem; block-size: 3.2rem; border-radius: 1rem; margin-block-end: 0.8rem; background: var(--sh-teal); }
.card:nth-child(3n+2) .ic { background: var(--sh-lav); } .card:nth-child(3n) .ic { background: var(--sh-yel); }
.card .ic svg { inline-size: 1.8rem; block-size: 1.8rem; }
.split { display: grid; gap: 1.6rem 3rem; align-items: center; }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; } }
.split .art { display: grid; place-items: center; }
.split .art img { inline-size: min(100%, 18rem); block-size: auto; animation: bobart 6s ease-in-out infinite; }
@keyframes bobart { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-0.7rem) rotate(1.5deg); } }
.ticks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.ticks li { position: relative; padding-inline-start: 2.2rem; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.35em; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.note { background: var(--sh-yel); border: 2px solid var(--yellow); border-radius: var(--radius); padding: 1rem 1.3rem; }
.note b { color: var(--ink); }
.faq { display: grid; gap: 0.7rem; max-inline-size: 52rem; }
.faq details { background: var(--card); border: 2px solid var(--line); border-radius: 1.2rem; padding: 0.2rem 1.2rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: 0.8rem 0; list-style-position: inside; }
.faq details[open] { border-color: var(--teal); }
.faq details p { color: var(--muted); }

/* ---------- inner pages ---------- */
.page-head { background: var(--hero); color: #fff; padding-block: clamp(2rem, 5vw, 3.6rem); position: relative; overflow: clip; }
.page-head h1 { font-size: var(--step-big); margin: 0; }
.page-head p { font-size: var(--step-1); margin: 0.4rem 0 0; max-inline-size: 46ch; }
.legal { max-inline-size: 50rem; padding-block: clamp(1.6rem, 4vw, 3rem); }
.legal h2 { font-size: var(--step-2); margin-block-start: 1.8em; }
.legal ul { padding-inline-start: 1.4rem; }
.legal li { margin-block-end: 0.4em; }
.legal .meta { color: var(--muted); font-size: 0.95rem; }
.legal table { border-collapse: collapse; inline-size: 100%; font-size: 0.97rem; }
.legal th, .legal td { text-align: start; padding: 0.6rem 0.7rem; border-block-end: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--muted); font-weight: 600; }

/* ---------- footer ---------- */
.site-footer { padding-block-end: calc(2rem + env(safe-area-inset-bottom)); background: var(--sh-lav); border-block-start: 1px solid var(--line); padding-block: 2rem; font-size: 0.97rem; margin-block-start: auto; }
.footer-grid { display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.footer-grid h3 { font-size: 1.05rem; margin-block-end: 0.4rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.site-footer .legal-line { margin-block-start: 1.4rem; color: var(--muted); font-size: 0.9rem; }
.studio { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 700; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Fidwa icon: the app's own icon art as layers; the leaves sway, the eyes blink ---------- */
.blinkwrap { position: relative; display: block; inline-size: 100%; block-size: 100%; }
.blinkwrap.fid { background: #2FA8C0; }
.blinkwrap.fid img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.fid .fl-l { transform-origin: 46.1% 32.2%; animation: fsway-a 5.8s ease-in-out infinite; }
.fid .fl-r { transform-origin: 53.9% 32.2%; animation: fsway-b 5.1s ease-in-out -2.1s infinite; }
@keyframes fsway-a { 0%, 100% { transform: rotate(-1.7deg); } 50% { transform: rotate(2.1deg); } }
@keyframes fsway-b { 0%, 100% { transform: rotate(1.5deg); } 50% { transform: rotate(-2.3deg); } }
.fid .fe-l { transform-origin: 38.2% 56%; animation: fblink 14.6s linear infinite; }
.fid .fe-r { transform-origin: 61.7% 56%; animation: fblink 14.6s linear infinite; }
@keyframes fblink {
  0.0% { transform: scale(1.000, 1); }
  19.856% { transform: scale(1.000, 1); }
  20.24% { transform: scale(1.037, 0.08); }
  20.342% { transform: scale(1.037, 0.08); }
  20.959% { transform: scale(1.000, 1); }
  46.568% { transform: scale(1.000, 1); }
  46.952% { transform: scale(1.037, 0.08); }
  47.055% { transform: scale(1.037, 0.08); }
  47.671% { transform: scale(1.000, 1); }
  48.966% { transform: scale(1.000, 1); }
  49.349% { transform: scale(1.037, 0.08); }
  49.452% { transform: scale(1.037, 0.08); }
  50.068% { transform: scale(1.000, 1); }
  78.075% { transform: scale(1.000, 1); }
  78.459% { transform: scale(1.037, 0.08); }
  78.562% { transform: scale(1.037, 0.08); }
  79.178% { transform: scale(1.000, 1); }
  100.0% { transform: scale(1.000, 1); }
}

/* ---------- banner art (same pieces and grid method as the Fidwa banner on satrsalfah.com) ---------- */
.theme { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.theme .pool { display: none; }
.theme[data-grid]:not(.ready) { opacity: 0; }
.gi { position: absolute; display: block; line-height: 0; rotate: var(--r, 0deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.22)); animation: gfloat 6s ease-in-out infinite alternate; will-change: translate; }
.gi img, .gi svg { inline-size: 100%; block-size: auto; display: block; }
.gi .bubble-orb { inline-size: 100%; }
.bubble-orb { display: block; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0.1)); border: 2px solid rgba(30,58,74,0.5); }
@keyframes gfloat { from { translate: 0 0; } to { translate: var(--fx, 4px) var(--fy, 4px); } }
.gi.k-heart { animation-name: gfloat, gpulse; animation-timing-function: ease-in-out; }
@keyframes gpulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }

/* ---------- offline page ---------- */
.offline { text-align: center; padding-block: 4rem; }
.offline .tile { inline-size: 9rem; block-size: 9rem; margin-inline: auto; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 3px var(--teal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile.big, .split .art img, .gi, .fid .fl, .fid .fe { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media print { .site-header, .site-nav, .theme { display: none; } body { background: #fff; color: #000; } }