/*
 * "عن البرنامج" (/about-software) — page-scoped styles.
 *
 * Plain CSS on purpose: the page works without a Tailwind/Vite rebuild and
 * leaves resources/css/marketplace.css untouched. Colors are the marketplace
 * design tokens (tailwind.config.js); everything is namespaced `as-` and uses
 * logical properties, so it is correct in RTL without overrides.
 */
.as-page {
    --as-primary: #176B5B;
    --as-primary-dark: #0D4037;
    --as-primary-soft: #E6F1EE;
    --as-canvas: #F7F8F5;
    --as-surface: #FFFFFF;
    --as-ink: #17211E;
    --as-muted: #65716C;
    --as-line: #E3E7E4;
    --as-radius: 16px;
    --as-shadow: 0 22px 44px -22px rgb(23 33 30 / 0.34);
    --as-shadow-soft: 0 10px 26px -16px rgb(23 33 30 / 0.28);

    color: var(--as-ink);
    font-family: Cairo, sans-serif;
    line-height: 1.7;
    overflow-x: clip;
}

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

.as-wrap {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 768px) { .as-wrap { padding-inline: 24px; } }

.as-section { padding-block: clamp(44px, 6.5vw, 84px); scroll-margin-top: 120px; }
.as-section--alt { background: var(--as-surface); border-block: 1px solid var(--as-line); }

.as-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--as-primary-soft);
    color: var(--as-primary-dark);
    font-size: 0.8125rem;
    font-weight: 700;
}

.as-h2 {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.as-lead { margin: 0; color: var(--as-muted); font-size: 1.0625rem; max-width: 62ch; }

/* No one-word last lines in headings or short paragraphs (ignored where unsupported). */
.as-page h1, .as-page h2, .as-page h3 { text-wrap: balance; }
.as-page p { text-wrap: pretty; }

.as-head { margin-block-end: clamp(24px, 4vw, 40px); }
.as-head--center { text-align: center; }
.as-head--center .as-lead { margin-inline: auto; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.as-btn:focus-visible { outline: 3px solid var(--as-primary); outline-offset: 3px; }
.as-btn--primary { background: var(--as-primary); color: #fff; box-shadow: 0 8px 20px -10px rgb(23 107 91 / 0.8); }
.as-btn--primary:hover { background: var(--as-primary-dark); transform: translateY(-1px); }
.as-btn--ghost { background: transparent; border-color: var(--as-primary); color: var(--as-primary-dark); }
.as-btn--ghost:hover { background: var(--as-primary-soft); }
.as-btn--light { background: #fff; color: var(--as-primary-dark); }
.as-btn--light:hover { background: var(--as-primary-soft); transform: translateY(-1px); }
.as-btn--outline-light { background: transparent; border-color: rgb(255 255 255 / 0.6); color: #fff; }
.as-btn--outline-light:hover { background: rgb(255 255 255 / 0.12); }
.as-btn--outline-light:focus-visible, .as-btn--light:focus-visible { outline-color: #fff; }

.as-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .as-actions .as-btn { width: 100%; } }

/* Store download buttons: icon + action label + store name (Google Play / Microsoft Store). */
.as-btn--store { position: relative; gap: 10px; padding-block: 8px; text-align: start; }
.as-btn__icon { flex: none; width: 24px; height: 24px; }
.as-btn__text { display: grid; line-height: 1.3; }
.as-btn__text small { font-size: 0.8125rem; font-weight: 600; }
/* Read by screen readers only: the store opens in a new tab. */
.as-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.as-hero {
    background:
        radial-gradient(900px 420px at 88% -8%, #D9EAE3 0%, rgb(217 234 227 / 0) 62%),
        linear-gradient(180deg, #F1F6F3 0%, var(--as-canvas) 100%);
    padding-block: clamp(32px, 5vw, 72px);
}
.as-hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .as-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; } }

.as-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 4.2vw, 2.875rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--as-ink);
}
.as-hero h1 span { color: var(--as-primary); }
.as-hero__tagline { margin: 0 0 14px; font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 800; color: var(--as-primary-dark); }
.as-hero__lead { margin: 0 0 24px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--as-muted); max-width: 54ch; }
.as-hero__note { margin: 14px 0 0; font-size: 0.875rem; color: var(--as-muted); }

.as-ticks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.as-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; }

.as-tick-icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--as-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176B5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.as-shot { display: block; width: 100%; height: auto; border-radius: 20px; }
.as-hero__shot { justify-self: center; width: min(100%, 340px); }
@media (min-width: 900px) { .as-hero__shot { width: min(100%, 380px); } }
.as-hero__shot .as-shot { box-shadow: var(--as-shadow); }

/* ── benefits ────────────────────────────────────────────────────────── */
.as-benefits { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.as-benefit {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.as-benefit:hover { border-color: rgb(23 107 91 / 0.45); box-shadow: var(--as-shadow-soft); transform: translateY(-2px); }
.as-benefit__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--as-primary-soft);
    color: var(--as-primary);
}
.as-benefit__icon svg { width: 22px; height: 22px; }
.as-benefit h3 { margin: 0 0 2px; font-size: 1.0625rem; font-weight: 700; }
.as-benefit p { margin: 0; color: var(--as-muted); font-size: 0.9375rem; }

/* ── feature rows (image as supplied + copy) ─────────────────────────── */
.as-features { display: grid; gap: clamp(36px, 6vw, 64px); }
.as-feature { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) {
    .as-feature { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(32px, 6vw, 72px); }
    .as-feature--flip { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
    .as-feature--flip .as-feature__media { order: -1; }
}
.as-feature__media { justify-self: center; width: min(100%, 300px); }
@media (min-width: 860px) { .as-feature__media { width: 100%; } }
.as-feature__media .as-shot { box-shadow: var(--as-shadow); }

.as-feature__num { display: block; margin-block-end: 4px; color: var(--as-primary); font-size: 0.875rem; font-weight: 800; letter-spacing: 0.04em; }
.as-feature .as-h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.as-feature p { margin: 0 0 16px; color: var(--as-muted); font-size: 1.0625rem; }
.as-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.as-points li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.as-points .as-tick-icon { margin-block-start: 3px; }

/* ── gallery + lightbox ──────────────────────────────────────────────── */
.as-gallery {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 4px 4px 14px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
    .as-gallery { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; padding-block-end: 4px; }
}
.as-gallery li { flex: 0 0 150px; scroll-snap-align: start; }
@media (min-width: 900px) { .as-gallery li { flex: none; } }

.as-thumb {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.as-thumb:hover { transform: translateY(-4px); box-shadow: var(--as-shadow-soft); border-color: rgb(23 107 91 / 0.5); }
.as-thumb:focus-visible { outline: 3px solid var(--as-primary); outline-offset: 3px; }
.as-thumb img { display: block; width: 100%; height: auto; }
.as-thumb__label { display: block; padding: 8px 6px 10px; text-align: center; font-size: 0.8125rem; font-weight: 700; }

.as-lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}
.as-lightbox::backdrop { background: rgb(9 20 17 / 0.86); }
.as-lightbox__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    padding: 56px 16px 16px;
}
.as-lightbox__figure { margin: 0; text-align: center; max-width: 100%; }
.as-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 560px);
    /* 56px top padding + caption (~60px) + nav (48px) + gaps/padding (~46px) must still fit. */
    max-height: max(160px, calc(100vh - 215px));
    max-height: max(160px, calc(100dvh - 215px));
    margin-inline: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6);
}
.as-lightbox__cap { margin-block-start: 10px; font-weight: 700; }
.as-lightbox__count { display: block; font-size: 0.8125rem; font-weight: 500; opacity: 0.8; }
.as-lightbox__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    cursor: pointer;
    transition: background-color .18s ease;
}
.as-lightbox__btn:hover { background: rgb(255 255 255 / 0.3); }
.as-lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.as-lightbox__btn svg { width: 22px; height: 22px; }
.as-lightbox__close { position: absolute; inset-block-start: 8px; inset-inline-start: 12px; }
.as-lightbox__nav { display: flex; gap: 16px; }

/* Short landscape screens: arrows move to the sides so the picture keeps the height. */
@media (max-height: 480px) {
    .as-lightbox__inner { padding-block: 12px; }
    .as-lightbox__img { max-height: max(160px, calc(100vh - 100px)); max-height: max(160px, calc(100dvh - 100px)); }
    .as-lightbox__nav {
        position: absolute;
        inset-inline: 12px;
        inset-block-start: 50%;
        transform: translateY(-50%);
        justify-content: space-between;
        pointer-events: none;
    }
    .as-lightbox__nav .as-lightbox__btn { pointer-events: auto; }
}

/* ── marketplace / knowledge / people ────────────────────────────────── */
.as-split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) { .as-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
/* Nothing to list beside the text: one centred column instead of a half-empty row. */
@media (min-width: 860px) { .as-split--single { grid-template-columns: minmax(0, 720px); justify-content: center; } }

.as-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.as-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid var(--as-line);
    border-radius: 999px;
    background: var(--as-surface);
    color: var(--as-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
a.as-chip:hover { border-color: var(--as-primary); color: var(--as-primary-dark); background: var(--as-primary-soft); }
a.as-chip:focus-visible { outline: 3px solid var(--as-primary); outline-offset: 2px; }
.as-chip--static { background: var(--as-primary-soft); border-color: transparent; color: var(--as-primary-dark); }

.as-subtle { margin: 0 0 8px; font-size: 0.875rem; font-weight: 700; color: var(--as-muted); }
.as-stack { display: grid; gap: 18px; }

.as-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .as-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--as-surface);
    border: 1px solid var(--as-line);
    border-radius: var(--as-radius);
}
.as-card h3 { margin: 0; font-size: 1.1875rem; font-weight: 800; }
.as-card p { margin: 0; color: var(--as-muted); }
.as-card .as-actions { margin-block-start: auto; padding-block-start: 8px; }

/* ── app vs website ──────────────────────────────────────────────────── */
.as-compare { display: grid; gap: 16px; }
@media (min-width: 860px) { .as-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.as-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--as-line);
    border-radius: 20px;
    background: var(--as-surface);
}
.as-panel--app { background: linear-gradient(180deg, #EAF3EF 0%, #F5FAF7 100%); border-color: rgb(23 107 91 / 0.25); }
.as-panel__tag { margin: 0; font-size: 0.8125rem; font-weight: 800; color: var(--as-primary); }
.as-panel h3 { margin: 0; font-size: 1.375rem; font-weight: 800; }
.as-panel__body { display: grid; gap: 16px; align-items: center; }
@media (min-width: 520px) { .as-panel--app .as-panel__body { grid-template-columns: minmax(0, 1fr) 150px; } }
.as-panel__shot { justify-self: center; width: min(100%, 150px); }
.as-panel__shot .as-shot { border-radius: 14px; box-shadow: var(--as-shadow-soft); }
.as-panel .as-actions { margin-block-start: auto; }
.as-compare__note { margin: 16px 0 0; text-align: center; color: var(--as-muted); font-size: 0.9375rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.as-faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.as-faq details { background: var(--as-surface); border: 1px solid var(--as-line); border-radius: 12px; transition: border-color .18s ease, box-shadow .18s ease; }
.as-faq details[open] { border-color: rgb(23 107 91 / 0.5); box-shadow: var(--as-shadow-soft); }
.as-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 18px;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    border-radius: 12px;
}
.as-faq summary::-webkit-details-marker { display: none; }
.as-faq summary:focus-visible { outline: 3px solid var(--as-primary); outline-offset: 2px; }
.as-faq summary::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-inline-end: 2.5px solid var(--as-primary);
    border-block-end: 2.5px solid var(--as-primary);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.as-faq details[open] summary::after { transform: rotate(-135deg); }
.as-faq__body { padding: 0 18px 18px; color: var(--as-muted); }
.as-faq__body p { margin: 0 0 10px; }
.as-faq__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* ── closing CTA ─────────────────────────────────────────────────────── */
.as-final {
    background:
        radial-gradient(700px 300px at 10% 0%, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 70%),
        var(--as-primary-dark);
    color: #fff;
    text-align: center;
}
.as-final .as-h2 { color: #fff; }
.as-final .as-lead { color: rgb(255 255 255 / 0.82); margin-inline: auto; }
.as-final .as-actions { justify-content: center; margin-block-start: 24px; }

/* ── motion (progressive: only when JS added .as-js) ─────────────────── */
.as-js .as-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.as-js .as-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .as-page *, .as-page *::before, .as-page *::after { transition: none !important; animation: none !important; }
    .as-js .as-reveal { opacity: 1; transform: none; }
}