/* =============================================================
   تنسيق صفحات الموقع العامة (resources/views/site)، يقدّمه SiteAssetController من resources/site-assets
   الألوان من شعار التطبيق ومن lib/core/theme/app_colors.dart في Flutter.
   الوضع الداكن يتبع إعداد الجهاز، والحركات تتوقف لمن طلب تقليلها.
   ============================================================= */

:root {
    --teal: #00a6a0;
    --teal-deep: #007f7a;
    --cyan: #3dd9d0;
    --pink: #f57da8;
    --grass: #89c23d;
    --sun: #ffc23d;
    --coin: #ffa726;
    --purple: #7e8cff;
    --sky: #4fc3f7;

    --bg: #fffbef;
    --surface: #ffffff;
    --tint: #f3f9f2;
    --text: #2b1f1d;
    --muted: #6b5f5a;
    --border: #eadfca;
    --link: #007f7a;
    --shadow: 0 10px 30px rgba(92, 27, 31, .08);
    --shadow-lg: 0 24px 60px rgba(92, 27, 31, .14);

    --sky-top: #8fd8ff;
    --sky-bottom: #fff3cf;
    --hill-back: #b6e07a;
    --hill-front: #89c23d;

    --radius: 22px;
    --font-head: "Baloo Bhaijaan 2", "Tajawal", system-ui, sans-serif;
    --font-body: "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b1716;
        --surface: #2a2321;
        --tint: #221d1b;
        --text: #f4ece6;
        --muted: #bcaea6;
        --border: #3b322f;
        --link: #3dd9d0;
        --shadow: 0 10px 30px rgba(0, 0, 0, .35);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);

        --sky-top: #0e1a3a;
        --sky-bottom: #3b2a4a;
        --hill-back: #2f5a2a;
        --hill-front: #3f7a2c;
    }
}

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.8 var(--font-body);
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted); }

.skip-link {
    position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
    background: var(--teal); color: #fff; padding: 8px 14px; border-radius: 10px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ---------- شريط تقدّم القراءة ---------- */
.scroll-progress {
    position: fixed; top: 0; inset-inline: 0; height: 4px; z-index: 60;
    background: linear-gradient(90deg, var(--teal), var(--cyan), var(--grass), var(--sun), var(--pink));
    transform-origin: right; transform: scaleX(var(--progress, 0));
}

/* ---------- الأزرار ---------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 999px; border: 0;
    background: linear-gradient(135deg, var(--teal), var(--teal-deep));
    color: #fff; font: 700 1rem var(--font-body); text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 166, 160, .35);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 28px rgba(0, 166, 160, .45); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-small { padding: 8px 18px; font-size: .95rem; }
.btn-ghost {
    background: var(--surface); color: var(--text);
    border: 2px solid var(--border); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.btn-shine::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
    inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { inset-inline-start: -60%; } 100% { inset-inline-start: 130%; } }

.pill {
    display: inline-block; padding: 4px 14px; border-radius: 999px;
    background: color-mix(in srgb, var(--teal) 14%, transparent);
    color: var(--link); font-weight: 700; font-size: .9rem; margin-bottom: 12px;
}

/* ---------- الترويسة ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, .06); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; transition: height .3s; }
.is-scrolled .header-row { height: 60px; }
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text); text-decoration: none;
    font: 800 1.35rem var(--font-head);
}
.brand img { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover img { transform: rotate(-8deg) scale(1.1); }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a:not(.btn) {
    position: relative; padding: 8px 14px; color: var(--text); text-decoration: none; font-weight: 500;
}
.site-nav a:not(.btn)::after {
    content: ""; position: absolute; bottom: 2px; inset-inline: 14px; height: 3px; border-radius: 3px;
    background: var(--teal); transform: scaleX(0); transition: transform .3s;
}
.site-nav a:not(.btn):hover::after, .site-nav a.active::after { transform: scaleX(1); }
.menu-toggle { display: none; }

@media (max-width: 760px) {
    .menu-toggle {
        display: grid; gap: 5px; place-content: center;
        width: 44px; height: 44px; border: 0; border-radius: 12px;
        background: var(--surface); cursor: pointer;
    }
    .menu-toggle span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--text); transition: transform .3s, opacity .3s; }
    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    .site-nav {
        position: absolute; top: 100%; inset-inline: 12px;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
        background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg);
        opacity: 0; transform: translateY(-10px) scale(.98); pointer-events: none;
        transition: opacity .25s, transform .25s;
    }
    .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .site-nav .btn { margin-top: 6px; }
}

/* ---------- البطل ---------- */
.hero {
    position: relative; overflow: hidden;
    padding: 70px 0 150px;
    background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
    margin-top: -72px; padding-top: 140px;
}
.sky { position: absolute; inset: 0; pointer-events: none; }
.sun {
    position: absolute; top: 90px; inset-inline-start: 8%;
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, #fff6c7 0%, var(--sun) 55%, transparent 72%);
    box-shadow: 0 0 80px 30px rgba(255, 194, 61, .45);
    animation: pulse 5s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) {
    .sun {
        width: 80px; height: 80px;
        background: radial-gradient(circle at 35% 35%, #fffbe6, #e8e2c4 60%, transparent 72%);
        box-shadow: 0 0 60px 16px rgba(255, 251, 230, .25);
    }
}
@keyframes pulse { 50% { transform: scale(1.08); } }
.stars i {
    position: absolute; left: var(--x); top: var(--y);
    width: 3px; height: 3px; border-radius: 50%; background: #fff;
    opacity: 0; animation: twinkle 3s ease-in-out var(--d) infinite;
}
@media (prefers-color-scheme: dark) { .stars i { opacity: 1; } }
@keyframes twinkle { 50% { transform: scale(1.8); opacity: .2; } }
.cloud {
    position: absolute; height: 40px; border-radius: 40px;
    background: rgba(255, 255, 255, .85);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .05));
    animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 50%; height: 140%; top: -60%; left: 15%; }
.cloud::after { width: 35%; height: 110%; top: -40%; right: 15%; }
.c1 { width: 160px; top: 18%; animation-duration: 55s; animation-delay: -10s; }
.c2 { width: 110px; top: 34%; animation-duration: 42s; animation-delay: -30s; opacity: .8; }
.c3 { width: 200px; top: 8%; animation-duration: 70s; animation-delay: -45s; opacity: .7; }
@media (prefers-color-scheme: dark) { .cloud { background: rgba(255, 255, 255, .08); } }
@keyframes drift { from { transform: translateX(-120vw); } to { transform: translateX(120vw); } }

.hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.hero-title { color: #1f2a3a; }
@media (prefers-color-scheme: dark) { .hero-title { color: var(--text); } }
.gradient-text {
    background: linear-gradient(90deg, var(--teal), var(--grass), var(--coin), var(--pink), var(--teal));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: flow 8s linear infinite;
}
@keyframes flow { to { background-position: 300% 0; } }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 560px; }
.hero .lead { color: #4a4440; }
@media (prefers-color-scheme: dark) { .hero .lead { color: var(--muted); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-art { position: relative; }
.hero-art .kids {
    position: relative; z-index: 2; width: 100%; height: auto;
    filter: drop-shadow(0 20px 30px rgba(92, 27, 31, .2));
    animation: bob 4.5s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-14px) rotate(-1deg); } }
.halo-ring {
    position: absolute; inset: 6% 8%; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--cyan), var(--grass), var(--sun), var(--pink), var(--cyan));
    filter: blur(40px); opacity: .45;
    animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bubble {
    position: absolute; z-index: 3;
    padding: 8px 14px; border-radius: 16px;
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
    font-weight: 700; white-space: nowrap;
    animation: float 5s ease-in-out infinite;
}
.b1 { top: 4%; inset-inline-end: 4%; }
.b2 { bottom: 14%; inset-inline-start: -2%; animation-delay: -1.6s; }
.b3 { top: 40%; inset-inline-end: -4%; animation-delay: -3.2s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }

.hills { position: absolute; bottom: -1px; left: 0; width: 100%; height: 140px; z-index: 1; }
.hill-back { fill: var(--hill-back); animation: sway 9s ease-in-out infinite; transform-origin: bottom; }
.hill-front { fill: var(--bg); }
@keyframes sway { 50% { transform: translateY(6px); } }

@media (max-width: 860px) {
    .hero { padding-bottom: 120px; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-text .lead { margin-inline: auto; }
    .hero-actions { justify-content: center; }
    .hero-art { max-width: 440px; margin: 10px auto 0; }
    .b3 { inset-inline-end: 0; }
    .b2 { inset-inline-start: 0; }
}

/* ---------- الأقسام ---------- */
.section { padding: 90px 0; position: relative; }
.section-tint { background: var(--tint); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 46px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) {
    .section { padding: 64px 0; }
    .split { grid-template-columns: 1fr; gap: 36px; }
    .split-reverse > :first-child { order: 0; }
}

/* ---------- يوم الصلوات ---------- */
/* الشمس تتحرك على قوس من الصبح (يمين) إلى العشاء (يسار): حركة أفقية وأخرى عمودية معاً تصنعان القوس */
.day-arc { position: relative; height: 110px; max-width: 900px; margin: 0 auto 10px; overflow: hidden; }
.arc-path {
    position: absolute; top: 12px; left: 5%; right: 5%; height: 200%;
    border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--coin) 55%, transparent);
}
.arc-sun {
    position: absolute; top: 12px; left: 95%; width: 0; height: 0;
    animation: arc-x 10s ease-in-out infinite;
}
.arc-sun::before {
    content: ""; position: absolute; top: -13px; left: -13px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--sun); box-shadow: 0 0 20px 6px rgba(255, 194, 61, .6);
    animation: arc-y 10s infinite;
}
@keyframes arc-x { from { left: 95%; } to { left: 5%; } }
@keyframes arc-y {
    0% { transform: translateY(110px); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    100% { transform: translateY(110px); }
}

.prayer-row {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; z-index: 1;
}
.prayer-card {
    --c: var(--teal);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 24px 12px; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
    border-top: 5px solid var(--c);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
}
.prayer-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.prayer-card:hover .prayer-icon { animation: wiggle .6s ease; }
.prayer-icon { font-size: 2.4rem; line-height: 1; }
.prayer-card strong { font: 800 1.3rem var(--font-head); }
.prayer-points { color: var(--c); font-weight: 700; }
.prayer-points b { font: 800 1.7rem var(--font-head); }
.prayer-card small { color: var(--muted); }
.prayer-fajr { --c: #7e8cff; }
.prayer-dhuhr { --c: #e89a1c; }
.prayer-asr { --c: #ff8a5b; }
.prayer-maghrib { --c: #e85d9a; }
.prayer-isha { --c: #5a4fcf; }
@media (prefers-color-scheme: dark) { .prayer-isha { --c: #9d95ff; } }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.15); } 75% { transform: rotate(12deg) scale(1.15); } }
@media (max-width: 860px) {
    .prayer-row { grid-template-columns: repeat(2, 1fr); }
    .prayer-row li:last-child { grid-column: span 2; }
    .day-arc { display: none; }
}

/* ---------- بطاقات المزايا ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
    --c: var(--teal);
    position: relative; overflow: hidden;
    padding: 28px; border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
    transform-style: preserve-3d;
    transition: transform .2s ease-out, box-shadow .3s;
}
.feature-card::before {
    content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%;
    inset-inline-end: -50px; top: -50px;
    background: color-mix(in srgb, var(--c) 16%, transparent);
    transition: transform .5s;
}
.feature-card:hover { box-shadow: var(--shadow-lg); }
.feature-card:hover::before { transform: scale(1.6); }
.feature-card > * { position: relative; }
.feature-card p { color: var(--muted); margin: 0; }
.feature-icon {
    display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 14px;
    border-radius: 18px; font-size: 1.9rem;
    background: color-mix(in srgb, var(--c) 20%, var(--surface));
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.feature-card:hover .feature-icon { transform: rotate(-10deg) scale(1.12); }
.tone-teal { --c: var(--teal); }
.tone-grass { --c: var(--grass); }
.tone-pink { --c: var(--pink); }
.tone-sky { --c: var(--sky); }
.tone-sun { --c: var(--coin); }
.tone-purple { --c: var(--purple); }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding-inline-start: 28px; position: relative; margin-bottom: 6px; color: var(--muted); }
.check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--teal); font-weight: 800; }

/* ---------- الجنة الصغيرة ---------- */
.garden-scene {
    position: relative; height: 380px; border-radius: 30px; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.garden-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #bfe9ff, #fff6d8); }
@media (prefers-color-scheme: dark) { .garden-sky { background: linear-gradient(180deg, #1c2a4a, #3a3150); } }
.garden-ground {
    position: absolute; left: -10%; right: -10%; bottom: -40px; height: 140px;
    border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #8fd16a, #6aa84a);
}
.garden-ground::after {
    content: ""; position: absolute; left: 10%; right: 10%; bottom: 40px; height: 34px;
    background: repeating-linear-gradient(90deg, #a9774e 0 46px, #94663f 46px 52px); border-radius: 12px; opacity: .85;
}
.plant { position: absolute; bottom: 92px; width: 40px; height: 120px; }
.plant .stem {
    position: absolute; bottom: 0; left: 50%; width: 6px; height: 100%; margin-left: -3px;
    background: #4f9a2d; border-radius: 3px; transform-origin: bottom; transform: scaleY(0);
}
.plant .leaf {
    position: absolute; bottom: 40%; left: 50%; width: 26px; height: 14px;
    background: #6cc04a; border-radius: 0 100% 0 100%; transform-origin: left center; transform: scale(0);
}
.plant .flower {
    position: absolute; top: -14px; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%;
    background: radial-gradient(circle, var(--sun) 28%, var(--pink) 30%);
    transform: scale(0);
}
.p1 { left: 14%; height: 90px; }
.p2 { left: 30%; height: 130px; }
.p3 { right: 12%; height: 100px; }
.p2 .flower { background: radial-gradient(circle, var(--sun) 28%, #b58cff 30%); }
.p3 .flower { background: radial-gradient(circle, #fff 28%, var(--coin) 30%); }
.tree { position: absolute; bottom: 88px; right: 30%; width: 150px; height: 220px; }
.tree .trunk {
    position: absolute; bottom: 0; left: 50%; width: 22px; height: 110px; margin-left: -11px;
    background: #8a5a36; border-radius: 8px; transform-origin: bottom; transform: scaleY(0);
}
.tree .crown {
    position: absolute; top: 0; left: 0; width: 150px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #9be070, #4f9a2d);
    box-shadow: -30px 30px 0 -10px #5fae3a, 34px 26px 0 -14px #5fae3a;
    transform: scale(0);
}
.fruit {
    position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff8a8a, #e23d3d); transform: scale(0);
}
.f1 { top: 40px; left: 36px; } .f2 { top: 70px; left: 90px; } .f3 { top: 24px; left: 96px; }
.coin { position: absolute; font-size: 1.8rem; opacity: 0; }
.k1 { left: 18%; bottom: 220px; } .k2 { left: 50%; bottom: 260px; } .k3 { right: 16%; bottom: 210px; }
.butterfly { position: absolute; top: 30%; left: 10%; font-size: 1.6rem; opacity: 0; }

/* تبدأ حركة النمو عندما تظهر الحديقة على الشاشة */
.garden-scene.is-visible .stem,
.garden-scene.is-visible .trunk { animation: grow-y 1.2s cubic-bezier(.2, .8, .2, 1) forwards; }
.garden-scene.is-visible .leaf { animation: pop .6s 1s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.garden-scene.is-visible .flower { animation: pop .7s 1.3s cubic-bezier(.34, 1.56, .64, 1) forwards, sway-flower 3s 2s ease-in-out infinite; }
.garden-scene.is-visible .crown { animation: pop .9s .9s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.garden-scene.is-visible .fruit { animation: pop .5s 1.8s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.garden-scene.is-visible .f2 { animation-delay: 2s; }
.garden-scene.is-visible .f3 { animation-delay: 2.2s; }
.garden-scene.is-visible .p2 * { animation-delay: .3s, 2.3s; }
.garden-scene.is-visible .p2 .leaf { animation-delay: 1.3s; }
.garden-scene.is-visible .p2 .flower { animation-delay: 1.6s, 2.6s; }
.garden-scene.is-visible .coin { animation: coin-up 3s ease-in infinite; }
.garden-scene.is-visible .k2 { animation-delay: 1s; }
.garden-scene.is-visible .k3 { animation-delay: 2s; }
.garden-scene.is-visible .butterfly { animation: flutter 12s 2s ease-in-out infinite; }
@keyframes grow-y { to { transform: scaleY(1); } }
@keyframes pop { to { transform: scale(1); } }
@keyframes sway-flower { 50% { transform: rotate(10deg) scale(1); } }
@keyframes coin-up {
    0% { opacity: 0; transform: translateY(40px) scale(.6) rotateY(0); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-60px) scale(1) rotateY(720deg); }
}
@keyframes flutter {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    25% { transform: translate(140px, -40px) rotate(10deg); }
    50% { transform: translate(300px, 20px) rotate(-8deg); }
    75% { transform: translate(160px, 60px) rotate(6deg); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}

.steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.steps li {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 16px; background: var(--tint);
    transition: transform .3s;
}
.steps li:hover { transform: translateX(-8px); }
.steps b {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--grass); color: #fff; font-family: var(--font-head);
}

/* ---------- الإخوة ولوحة الأبطال ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chips span { padding: 8px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
.race-card { padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); }
.race-row { display: grid; grid-template-columns: 30px 64px 1fr 38px; align-items: center; gap: 10px; margin-top: 16px; }
.race-rank {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--tint); font-weight: 800;
}
.race-row:first-of-type .race-rank { background: var(--sun); color: #3a2a00; }
.race-name { font-weight: 700; }
.race-bar { height: 14px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.race-bar i {
    display: block; height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
    transition: width 1.6s cubic-bezier(.2, .8, .2, 1);
}
.race-card.is-visible .race-bar i { width: var(--w); }
.race-card.is-visible .race-row:nth-of-type(2) i { transition-delay: .15s; }
.race-card.is-visible .race-row:nth-of-type(3) i { transition-delay: .3s; }
.race-card.is-visible .race-row:nth-of-type(4) i { transition-delay: .45s; }
.race-card.is-visible .race-row:nth-of-type(5) i { transition-delay: .6s; }
.race-score { font-weight: 800; color: var(--muted); }

/* ---------- الأرقام ---------- */
.stats-band {
    background: linear-gradient(135deg, var(--teal-deep), var(--teal) 50%, #26b8a0);
    color: #fff; padding: 64px 0;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats b { display: block; font: 800 clamp(2.4rem, 6vw, 3.6rem)/1.1 var(--font-head); }
.stats span { opacity: .9; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- الثقة والخصوصية ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-item { display: flex; gap: 14px; padding: 22px; border-radius: var(--radius); background: var(--tint); }
.trust-item span { font-size: 1.8rem; }
.trust-item p { margin: 0; }

/* ---------- التحميل ---------- */
.download-band {
    overflow: hidden; text-align: center; color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255, 194, 61, .3), transparent 45%),
        linear-gradient(135deg, #00857f, #00a6a0 55%, #3dd9d0);
}
.download-band::before {
    content: ""; position: absolute; inset: -50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .05) 0 10deg, transparent 10deg 20deg);
    animation: spin 60s linear infinite;
}
.download-inner { position: relative; }
.download-band p { opacity: .92; }
.download-logo {
    margin: 0 auto 18px; width: 120px; height: 120px; padding: 14px; border-radius: 32px;
    background: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
    animation: bob 4s ease-in-out infinite;
}
.download-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.store-btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 24px; border-radius: 16px; min-width: 190px;
    background: #1b1716; color: #fff; text-decoration: none; text-align: start;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.store-btn svg { width: 30px; height: 30px; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.3; font-weight: 700; font-size: 1.15rem; }
.store-btn small { font-weight: 400; font-size: .8rem; opacity: .8; }
a.store-btn:hover { transform: translateY(-4px) scale(1.04); }
.store-btn.is-soon { opacity: .75; cursor: default; }
.section:not(.download-band) .store-btn { background: var(--text); color: var(--bg); }

/* ---------- الأسئلة الشائعة ---------- */
.faq details {
    margin-bottom: 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow);
    overflow: hidden;
}
.faq summary {
    list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--tint); color: var(--teal); font-size: 1.3rem; transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--muted); animation: fade-down .35s ease; }
@keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- الصفحات الداخلية ---------- */
.page-hero {
    position: relative; overflow: hidden; text-align: center;
    margin-top: -72px; padding: 150px 0 70px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 22%, var(--bg)), var(--bg));
}
.page-hero .lead { margin: 0 auto; }
.page-hero-icon { display: inline-block; font-size: 3rem; margin-bottom: 8px; animation: bob 3.5s ease-in-out infinite; }
.page-hero-shapes i {
    position: absolute; border-radius: 50%; opacity: .35; filter: blur(2px);
    animation: float 8s ease-in-out infinite;
}
.page-hero-shapes i:nth-child(1) { width: 140px; height: 140px; background: var(--sun); top: 70px; inset-inline-start: 6%; }
.page-hero-shapes i:nth-child(2) { width: 90px; height: 90px; background: var(--pink); bottom: 20px; inset-inline-end: 10%; animation-delay: -2s; }
.page-hero-shapes i:nth-child(3) { width: 60px; height: 60px; background: var(--grass); top: 110px; inset-inline-end: 24%; animation-delay: -4s; }
.page-hero-shapes i:nth-child(4) { width: 40px; height: 40px; background: var(--teal); bottom: 40px; inset-inline-start: 24%; animation-delay: -6s; }

.prose h2 { margin-top: 1.6em; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.prose ul, .prose ol { padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; }
.box { padding: 22px 24px; border-radius: var(--radius); background: var(--tint); margin: 20px 0; }
.box h3 { margin-top: 0; }
.box ul { margin: 0; }
.box p:last-child { margin: 0; }
.box-good { background: color-mix(in srgb, var(--grass) 16%, var(--surface)); }
.box-danger { background: color-mix(in srgb, #ff5c5c 12%, var(--surface)); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two-cols .box { margin: 0; }
@media (max-width: 700px) { .two-cols { grid-template-columns: 1fr; } }

.timeline { list-style: none; counter-reset: step; padding: 0 !important; position: relative; }
.timeline::before {
    content: ""; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 19px; width: 3px;
    background: linear-gradient(var(--teal), var(--cyan)); border-radius: 3px;
}
.timeline li { position: relative; counter-increment: step; padding: 8px 56px 8px 0; margin-bottom: 14px; }
[dir="ltr"] .timeline li { padding: 8px 0 8px 56px; }
.timeline li::before {
    content: counter(step, arabic-indic); position: absolute; inset-inline-start: 0; top: 4px;
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--teal); color: #fff; font: 800 1.1rem var(--font-head);
    box-shadow: 0 0 0 6px var(--bg);
}

.about-art { display: grid; place-items: center; }
.about-art img {
    width: min(260px, 70%); height: auto; padding: 30px; border-radius: 40px;
    background: var(--surface); box-shadow: var(--shadow-lg);
    animation: bob 5s ease-in-out infinite;
}
.values { display: grid; gap: 16px; }
.values > div { padding: 20px 24px; border-radius: var(--radius); background: var(--tint); border-inline-start: 5px solid var(--teal); }
.values b { font: 800 1.2rem var(--font-head); }
.values p { margin: 4px 0 0; color: var(--muted); }

.mail-card {
    display: flex; align-items: center; gap: 18px; justify-content: center;
    padding: 28px; border-radius: 28px; margin-bottom: 28px;
    background: linear-gradient(135deg, var(--teal), var(--cyan)); color: #fff; text-decoration: none;
    box-shadow: 0 18px 40px rgba(0, 166, 160, .35);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.mail-card:hover { transform: translateY(-4px) scale(1.02); }
.mail-card:hover .mail-icon { animation: wiggle .6s ease; }
.mail-icon { font-size: 2.6rem; }
.mail-card small { display: block; opacity: .9; }
.mail-card b { font-size: clamp(1.1rem, 3.5vw, 1.5rem); word-break: break-all; }
.topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 600px) { .topic-grid { grid-template-columns: 1fr; } }
.topic {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
    padding: 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
    color: var(--text); text-decoration: none; transition: transform .3s, box-shadow .3s;
}
.topic:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.topic span { grid-row: span 2; font-size: 2rem; }
.topic small { color: var(--muted); }

.not-found { padding-top: 140px; min-height: 70vh; }
.lost-moon { font-size: 5rem; animation: bob 3s ease-in-out infinite; }

/* ---------- التذييل ---------- */
.site-footer { position: relative; background: #1b1716; color: #e8ddd5; padding: 70px 0 24px; margin-top: 40px; }
.footer-wave { position: absolute; top: -79px; left: 0; width: 100%; height: 80px; }
.footer-wave svg { width: 100%; height: 100%; }
.footer-wave path { fill: #1b1716; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.site-footer .brand { color: #fff; margin-bottom: 10px; }
.site-footer .brand img { background: #fff; border-radius: 12px; padding: 4px; }
.site-footer h3 { color: #fff; font-size: 1.05rem; }
.site-footer a:not(.brand) { display: block; color: #c9bcb4; text-decoration: none; padding: 3px 0; transition: color .2s, transform .2s; }
.site-footer a:not(.brand):hover { color: var(--cyan); transform: translateX(-4px); }
.site-footer .muted { color: #a99a92; }
.footer-bottom { border-top: 1px solid #3b322f; margin-top: 30px; padding-top: 18px; font-size: .9rem; text-align: center; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: span 2; } }

/* ---------- الظهور عند التمرير ---------- */
/* بدون JavaScript تبقى العناصر ظاهرة؛ site.js يضيف .js لـ html فتبدأ مخفية */
.js [data-reveal] {
    opacity: 0; transform: translateY(34px) scale(.98);
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .feature-card[data-reveal].is-visible { transition: opacity .8s, transform .2s ease-out; transition-delay: var(--delay, 0s), 0s; }

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
    .plant .stem, .tree .trunk { transform: none; }
    .plant .leaf, .plant .flower, .tree .crown, .fruit { transform: none; }
    .race-bar i { width: var(--w); }
    .cloud { display: none; }
}

/* ---------- لوحة الأبطال: حالات إضافية ---------- */
.race-row { grid-template-columns: 34px minmax(56px, auto) 1fr 48px; }
.race-rank { font-size: 1.05rem; }
.race-row:first-of-type .race-rank { background: transparent; font-size: 1.4rem; }
.race-row:nth-of-type(2) .race-rank, .race-row:nth-of-type(3) .race-rank { background: transparent; font-size: 1.4rem; }
.race-empty { margin: 14px 0 0; color: var(--muted); text-align: center; padding: 20px 0; }
.race-note { margin: 16px 0 0; color: var(--muted); font-size: .85rem; }

/* ---------- نموذج التواصل ---------- */
.contact-form {
    padding: 30px; border-radius: 28px; margin-bottom: 28px;
    background: var(--surface); box-shadow: var(--shadow-lg);
    scroll-margin-top: 90px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .contact-form { padding: 22px 18px; } }
.contact-form .field { margin-bottom: 16px; }
.contact-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form select, .contact-form textarea {
    width: 100%; padding: 12px 14px; border-radius: 14px;
    border: 2px solid var(--border); background: var(--bg); color: var(--text);
    font: inherit; transition: border-color .2s, box-shadow .2s;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent);
}
.contact-form .invalid { border-color: #e04848; }
.form-alert { padding: 14px 18px; border-radius: 14px; margin-bottom: 18px; animation: fade-down .4s ease; }
.form-alert.ok { background: color-mix(in srgb, var(--grass) 20%, var(--surface)); }
.form-alert.err { background: color-mix(in srgb, #ff5c5c 14%, var(--surface)); }
.sponsor-check {
    display: flex !important; align-items: center; gap: 14px; cursor: pointer;
    padding: 16px; border-radius: 18px; margin-bottom: 20px;
    border: 2px dashed color-mix(in srgb, var(--coin) 60%, transparent);
    background: color-mix(in srgb, var(--sun) 10%, var(--surface));
    font-weight: 400 !important; transition: background .3s, border-color .3s, transform .3s;
}
.sponsor-check:hover { transform: translateY(-2px); }
.sponsor-check input { width: 22px; height: 22px; flex: none; accent-color: var(--coin); }
.sponsor-check small { display: block; color: var(--muted); }
.sponsor-box { font-size: 1.8rem; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.sponsor-check:has(input:checked) { border-style: solid; border-color: var(--coin); background: color-mix(in srgb, var(--sun) 22%, var(--surface)); }
.sponsor-check:has(input:checked) .sponsor-box { transform: scale(1.25) rotate(-10deg); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-submit { width: 100%; padding: 15px; font-size: 1.1rem; }
.topic.is-selected { outline: 3px solid var(--teal); }