/* ==========================================================================
   Connection With Quran — "Noor" design system
   --------------------------------------------------------------------------
   Direction: warm cream canvas, deep emerald navigation, antique gold accents,
   serif display headings (Playfair Display) over Inter body text, with Noto
   Naskh Arabic for Arabic and Urdu. Structure per the approved mock: white
   brand topbar, sticky green navbar with a courses dropdown, hero with a verse
   card, trust strip, numbered course tiles, a deep-green values band, an image
   CTA band and a deep-green footer with a gold hairline.
   Tokens: semantic light/dark palette; components never hard-code colours.
   Text/surface pairs are measured at 4.5:1 (3:1 for large text, focus rings
   and input boundaries) in tests/run-tests.mjs, in both themes.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    color-scheme: light;

    /* Colour — semantic, theme-mapped */
    --c-canvas: #FBF8F0;              /* warm cream page background */
    --c-canvas-2: #F4EEDF;            /* alternate section background */
    --c-surface: #FFFDF8;             /* paper card surface */
    --c-surface-2: #F7F1E3;           /* secondary surface */
    --c-surface-sunk: #EFE7D3;        /* sunk panels, code wells */
    --c-fg: #18332D;                  /* main ink */
    --c-fg-muted: #54665E;            /* supporting copy */
    --c-fg-subtle: #57685F;           /* small labels, meta */
    --c-primary: #075B45;             /* emerald brand green */
    --c-primary-strong: #06493A;
    --c-on-primary: #FFFFFF;
    --c-on-primary-strong: #FFFFFF;
    --c-primary-soft: #E2EFE8;        /* pale green tint */
    --c-accent: #C9A24A;              /* antique gold, decorative */
    --c-accent-ink: #7A5E14;          /* gold text: 5.7–6.0:1 on light */
    --c-accent-soft: #F3E9D2;         /* pale gold tint */
    --c-on-accent: #063F33;           /* deep green text on gold buttons */
    --c-deep: #063F33;                /* footer, band, page-header */
    --c-on-deep: #FFFFFF;
    --c-on-deep-muted: #DCE9E4;
    --c-nav: #075B45;                 /* sticky navbar */
    --c-nav-deep: #06493A;
    --c-on-nav: #FFFFFF;
    --c-on-nav-muted: #D5E5DE;
    --c-gold: #C9A24A;                /* demo button, badges */
    --c-on-gold: #063F33;
    --c-cta: #063F33;                 /* CTA band background */
    --c-cta-fg: #FFFFFF;
    --c-cta-muted: #CFE0D8;
    --c-cta-tag: #E8CF8E;
    --c-border: #E9E2D5;
    --c-border-strong: #D6CDBA;
    --c-control-border: #857E6C;      /* input boundary: >= 3:1 */
    --c-ring: #075B45;
    --c-destructive: #B42318;
    --c-destructive-soft: #F9E5E2;
    --c-on-destructive: #FFFFFF;
    --c-whatsapp: #0F7A6C;            /* 5.2:1 with white text */
    --c-on-whatsapp: #FFFFFF;
    --c-light: #FFFFFF;
    --c-on-light: #18332D;
    --c-caption: #F6F1E7;             /* text over photo scrims */
    --c-required: #B42318;
    --c-scrim: rgba(6, 24, 19, 0.55);
    --c-hero-wash: radial-gradient(120% 110% at 88% -10%, #F1E8D2 0%, rgba(251, 248, 240, 0) 58%);
    --pattern-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23075B45' stroke-opacity='0.05'%3E%3Cpath d='M28 6l6.2 15.8L50 28l-15.8 6.2L28 50l-6.2-15.8L6 28l15.8-6.2z'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-star-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.07'%3E%3Cpath d='M28 6l6.2 15.8L50 28l-15.8 6.2L28 50l-6.2-15.8L6 28l15.8-6.2z'/%3E%3C/g%3E%3C/svg%3E");

    /* Elevation */
    --e-1: 0 1px 2px rgba(24, 51, 45, 0.06), 0 2px 10px rgba(24, 51, 45, 0.06);
    --e-2: 0 2px 4px rgba(24, 51, 45, 0.06), 0 16px 38px rgba(24, 51, 45, 0.12);
    --e-3: 0 8px 18px rgba(24, 51, 45, 0.10), 0 28px 64px rgba(24, 51, 45, 0.18);
    --e-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);

    /* Space — 4/8 rhythm */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
    --gutter: 20px;
    --container: 1180px;
    --section-y: clamp(56px, 7.5vw, 104px);
    --card-pad: clamp(18px, 2.4vw, 28px);

    /* Radius */
    --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
    --r-pill: 999px;

    /* Type */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic", sans-serif;
    --font-arabic: "Noto Naskh Arabic", "Amiri", "Scheherazade New", "Traditional Arabic", serif;
    --t-xs: 0.75rem;
    --t-sm: 0.875rem;
    --t-base: 1rem;
    --t-lg: 1.125rem;
    --t-xl: 1.25rem;
    --t-2xl: clamp(1.35rem, 0.9rem + 1.4vw, 1.65rem);
    --t-3xl: clamp(1.7rem, 1.1rem + 2.1vw, 2.35rem);
    --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.4rem);
    --lh-tight: 1.12;
    --lh-snug: 1.35;
    --lh-body: 1.65;
    --measure: 68ch;

    /* Motion */
    --d-fast: 140ms;
    --d-base: 240ms;
    --d-slow: 460ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Z-index scale */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 20;
    --z-fab: 40;
    --z-scrim: 50;
    --z-drawer: 60;
    --z-toast: 70;
    --z-skip: 80;

    /* Chrome metrics (updated from the real header by main.js) */
    --header-offset: 124px;
    --topbar-h: 72px;
    --focus-ring: 0 0 0 2px var(--c-canvas), 0 0 0 4px var(--c-ring);
}

[data-theme="dark"] {
    color-scheme: dark;

    --c-canvas: #071410;
    --c-canvas-2: #0B1A15;
    --c-surface: #0C1F19;
    --c-surface-2: #10261E;
    --c-surface-sunk: #091812;
    --c-fg: #EFF4F0;
    --c-fg-muted: #B9C6BF;
    --c-fg-subtle: #A5B4AB;
    /* Gold becomes the primary action colour in dark mode. */
    --c-primary: #E2C15A;
    --c-primary-strong: #F0D98C;
    --c-on-primary: #06231A;
    --c-on-primary-strong: #06231A;
    --c-primary-soft: #1B2F26;
    --c-accent: #E2C15A;
    --c-accent-ink: #E2C15A;
    --c-accent-soft: #22302A;
    --c-on-accent: #06231A;
    --c-deep: #062D24;
    --c-on-deep: #FFFFFF;
    --c-on-deep-muted: #D5E5DE;
    --c-nav: #06302A;
    --c-nav-deep: #052620;
    --c-on-nav: #FFFFFF;
    --c-on-nav-muted: #C9DAD3;
    --c-gold: #E2C15A;
    --c-on-gold: #06231A;
    --c-cta: #0E2A20;
    --c-cta-fg: #FFFFFF;
    --c-cta-muted: #C9DAD3;
    --c-cta-tag: #E2C15A;
    --c-border: #24382F;
    --c-border-strong: #355044;
    --c-control-border: #6C8177;
    --c-ring: #E2C15A;
    --c-destructive: #F28B82;
    --c-destructive-soft: #2E1714;
    --c-on-destructive: #06120E;
    --c-whatsapp: #0F7A6C;
    --c-on-whatsapp: #FFFFFF;
    --c-light: #FFFFFF;
    --c-on-light: #18332D;
    --c-caption: #F1F3EC;
    --c-required: #F28B82;
    --c-scrim: rgba(2, 10, 8, 0.62);
    --c-hero-wash: radial-gradient(120% 110% at 88% -10%, #10261E 0%, rgba(7, 20, 16, 0) 58%);
    --pattern-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E2C15A' stroke-opacity='0.05'%3E%3Cpath d='M28 6l6.2 15.8L50 28l-15.8 6.2L28 50l-6.2-15.8L6 28l15.8-6.2z'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-star-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.07'%3E%3Cpath d='M28 6l6.2 15.8L50 28l-15.8 6.2L28 50l-6.2-15.8L6 28l15.8-6.2z'/%3E%3C/g%3E%3C/svg%3E");

    --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35);
    --e-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 38px rgba(0, 0, 0, 0.45);
    --e-3: 0 8px 18px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.55);
    --e-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --focus-ring: 0 0 0 2px var(--c-canvas), 0 0 0 4px var(--c-ring);
}

/* ---------- 2. Base & reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-offset) + 12px);
    -webkit-text-size-adjust: 100%;
}
html, body { overflow-x: clip; }
body {
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    background: var(--c-canvas);
    color: var(--c-fg);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1 0 auto; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-strong); }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
p { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
strong { font-weight: 700; }
.muted { color: var(--c-fg-muted); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.container { width: min(var(--container), 92%); margin-inline: auto; }
body.nav-open { overflow: hidden; }

:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; border-radius: 2px; }

/* Inline icon system (stroke glyphs; .icon-fill for solid ones) */
.icon {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.icon-fill { fill: currentColor; stroke: none; }
.skip-link {
    position: fixed; inset-inline-start: 16px; top: -64px; z-index: var(--z-skip);
    background: var(--c-primary); color: var(--c-on-primary);
    padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700;
    text-decoration: none; transition: top var(--d-base) var(--ease-out);
}
.skip-link:focus { top: 12px; color: var(--c-on-primary); }

/* ---------- 3. Buttons ---------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 12px 22px;
    border-radius: var(--r-sm); border: 1px solid transparent;
    background: var(--c-primary); color: var(--c-on-primary);
    font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer;
    transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out),
        background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.btn:hover { background: var(--c-primary-strong); color: var(--c-on-primary); transform: translateY(-1px); box-shadow: var(--e-1); }
.btn:active { transform: translateY(0); }
.btn-large { min-height: 50px; padding: 14px 26px; font-size: var(--t-base); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: var(--t-sm); }
.btn-outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary-soft); color: var(--c-primary-strong); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--c-primary); border-color: var(--c-border-strong); }
.btn-ghost:hover { background: var(--c-canvas-2); color: var(--c-primary-strong); box-shadow: none; }
.btn-gold { background: var(--c-gold); color: var(--c-on-gold); }
.btn-gold:hover { background: var(--c-accent-ink); color: var(--c-light); box-shadow: var(--e-1); }
.btn-light { background: var(--c-light); color: var(--c-on-light); }
.btn-light:hover { background: var(--c-accent-soft); color: var(--c-on-light); }
.btn-whatsapp { background: var(--c-whatsapp); color: var(--c-on-whatsapp); }
.btn-whatsapp:hover { background: var(--c-primary-strong); color: var(--c-on-whatsapp); }
.btn-submit { width: 100%; min-height: 48px; }
.btn.is-loading { opacity: 0.75; cursor: progress; }

/* ---------- 4. Topbar & brand --------------------------------------------- */
/* The whole header is sticky with a negative top: the paper brand topbar
   scrolls away while the emerald navbar stays pinned. position: sticky is
   bounded by the parent box, so it must live on .main-header itself — a
   sticky .mainnav inside it could never leave the header's short box.
   sticky does NOT create a containing block for the fixed drawer. */
.main-header { position: sticky; top: calc(-1 * var(--topbar-h)); z-index: var(--z-sticky); }
.topbar { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.topbar-inner {
    min-height: 72px; padding-block: var(--s-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand-mark {
    width: 44px; height: 44px; flex: 0 0 auto;
    border: 2px solid var(--c-gold); border-radius: 14px 14px 9px 9px;
    background: var(--c-surface); display: grid; place-items: center; overflow: hidden;
}
.brand-mark img { width: 34px; height: 34px; object-fit: contain; }
.brand-mark .icon { width: 22px; height: 22px; color: var(--c-primary); }
.brand-text strong {
    display: block; font-family: var(--font-display);
    font-size: 1.28rem; color: var(--c-deep); line-height: 1.2;
}
[data-theme="dark"] .brand-text strong { color: var(--c-fg); }
.brand-text small {
    display: block; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--c-fg-subtle); font-size: 0.64rem; font-weight: 600; margin-top: 2px;
}
.topbar-world { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.topbar-globe {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--c-accent-soft); color: var(--c-accent-ink);
    display: grid; place-items: center;
}
.topbar-globe .icon { width: 22px; height: 22px; }
.topbar-world-text b { display: block; font-size: 0.92rem; color: var(--c-fg); }
.topbar-world-text > span { display: block; font-size: 0.77rem; color: var(--c-fg-muted); }

/* ---------- 5. Main navigation -------------------------------------------- */
.mainnav {
    background: var(--c-nav);
    box-shadow: 0 6px 18px rgba(6, 63, 51, 0.18);
}
[data-theme="dark"] .mainnav { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.mainnav-inner { display: flex; align-items: stretch; justify-content: space-between; gap: var(--s-3); }
.nav-links { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-links a, .dropbtn {
    position: relative; display: inline-flex; align-items: center; min-height: 44px;
    padding: 10px 13px; color: var(--c-on-nav);
    font-weight: 600; font-size: 0.92rem; text-decoration: none;
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    transition: background-color var(--d-fast) var(--ease-out);
}
.nav-links a:hover, .dropbtn:hover { background: rgba(255, 255, 255, 0.09); color: var(--c-on-nav); }
.nav-links a.active::after, .dropbtn.active::after {
    content: ""; position: absolute; inset-inline: 12px; bottom: 6px; height: 3px;
    border-radius: 2px; background: var(--c-gold);
}
.dropbtn .caret { width: 15px; height: 15px; margin-inline-start: 5px; transition: transform var(--d-fast) var(--ease-out); }
.nav-drop { position: relative; display: flex; }
.nav-drop.open .caret, .nav-drop:hover .caret, .nav-drop:focus-within .caret { transform: rotate(180deg); }
.dropmenu {
    position: absolute; top: 100%; left: 0; z-index: var(--z-raised);
    width: min(264px, 84vw); margin: 0; padding: 6px 0; list-style: none;
    background: var(--c-surface); color: var(--c-fg);
    border: 1px solid var(--c-border); border-radius: 0 0 14px 14px;
    box-shadow: var(--e-3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), visibility 0s var(--d-fast);
}
.nav-drop:hover .dropmenu,
.nav-drop:focus-within .dropmenu,
.nav-drop.open .dropmenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dropmenu a {
    display: flex; align-items: center; min-height: 40px;
    padding: 8px 16px; color: var(--c-fg);
    font-size: 0.9rem; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--c-border);
    transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.dropmenu li:last-child a { border-bottom: 0; }
.dropmenu a:hover { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.mainnav-actions { display: flex; align-items: center; gap: var(--s-2); }
.btn-demo {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 10px 17px; border-radius: 8px;
    background: var(--c-gold); color: var(--c-on-gold);
    font-weight: 800; font-size: 0.88rem; text-decoration: none; white-space: nowrap;
    transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.btn-demo:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201, 162, 74, 0.35); color: var(--c-on-gold); }
.btn-demo .demo-short { display: none; }
.theme-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.10); color: var(--c-on-nav);
    transition: background-color var(--d-fast) var(--ease-out);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.theme-toggle .icon { width: 19px; height: 19px; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun, .no-js .icon-sun { display: none; }
[data-theme="dark"] .icon-sun, .no-js .icon-moon { display: block; }
.mobile-nav-toggle {
    display: none; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, 0.10); color: var(--c-on-nav);
}
.mobile-nav-toggle .icon { width: 22px; height: 22px; }
.mobile-nav-toggle .icon-close { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Eight top-level items need a compact band on laptop widths: tighter
   padding, slightly smaller type and the short trial label. Measured worst
   case ≈ 850px, safely inside the 92% container from 1001px up. */
@media (max-width: 1180px) {
    .nav-links a, .dropbtn { padding: 10px 9px; font-size: 0.88rem; }
    .nav-links a.active::after, .dropbtn.active::after { inset-inline: 9px; }
    .btn-demo { padding: 10px 13px; }
    .btn-demo .demo-long { display: none; }
    .btn-demo .demo-short { display: inline; }
}

/* Mobile drawer (modal) */
.nav-drawer {
    position: fixed; inset: 0; z-index: var(--z-drawer);
    background: var(--c-deep); color: var(--c-on-deep);
    padding: var(--s-4) var(--s-5) calc(var(--s-8) + env(safe-area-inset-bottom));
    overflow-y: auto; display: none; flex-direction: column; gap: var(--s-4);
}
.nav-drawer.open { display: flex; }
.nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--c-on-deep-muted); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; font-size: var(--t-xs);
}
.drawer-close {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%;
    background: transparent; color: var(--c-on-deep); cursor: pointer;
}
.drawer-close .icon { width: 20px; height: 20px; }
.drawer-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.drawer-links a {
    display: flex; align-items: center; min-height: 44px;
    padding: 10px 4px; color: var(--c-on-deep); font-weight: 600; font-size: 1rem;
    text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.drawer-links a:hover { color: var(--c-cta-tag); }
.drawer-links li.drawer-course a { padding-inline-start: 18px; color: var(--c-on-deep-muted); font-weight: 500; font-size: 0.95rem; }
.drawer-links li.drawer-course a::before { content: "—"; margin-inline-end: 8px; color: var(--c-gold); }
.drawer-group {
    padding: 14px 4px 4px; color: var(--c-cta-tag);
    font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.nav-drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); }
.nav-drawer-foot .btn { width: 100%; }
.nav-drawer-phones { display: flex; flex-direction: column; gap: 6px; }
.nav-drawer-phones a {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    min-height: 40px; color: var(--c-on-deep); font-weight: 600; text-decoration: none; font-size: 0.95rem;
}
.nav-drawer-phones .icon { width: 17px; height: 17px; color: var(--c-cta-tag); }
.nav-drawer-phones .muted { color: var(--c-on-deep-muted); font-weight: 400; font-size: 0.82rem; }
.nav-backdrop {
    position: fixed; inset: 0; z-index: var(--z-scrim);
    background: var(--c-scrim); border: 0; padding: 0; cursor: pointer;
}
body.nav-open .mainnav { z-index: var(--z-drawer); }

/* Without JavaScript the drawer is a plain in-flow menu and every control
   that needs a click handler (hamburger, theme toggle, backdrop, drawer
   chrome) is removed; the footer carries the same links regardless. */
.no-js .mobile-nav-toggle, .no-js .theme-toggle, .no-js .nav-backdrop,
.no-js .nav-drawer-head, .no-js .nav-drawer-foot { display: none !important; }
.no-js .main-header { position: static; }
.no-js .nav-drawer {
    position: static; display: flex; flex-direction: column; gap: var(--s-4);
    padding: var(--s-4) 0 0; background: transparent; color: var(--c-fg);
    overflow: visible;
}
.no-js .drawer-links a { color: var(--c-fg); border-bottom: 1px solid var(--c-border); }
.no-js .drawer-links li.drawer-course a { color: var(--c-fg-muted); }
.no-js .drawer-group { color: var(--c-accent-ink); }

/* ---------- 6. Hero -------------------------------------------------------- */
.hero { background: var(--c-hero-wash); }
.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 4vw, 56px); align-items: center;
    padding-block: clamp(48px, 6.5vw, 96px);
}
.hero-kicker {
    display: inline-block; margin: 0 0 var(--s-3);
    color: var(--c-primary); font-weight: 800; font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.hero h1 { color: var(--c-deep); font-size: var(--t-display); line-height: 1.02; margin-bottom: var(--s-4); }
[data-theme="dark"] .hero h1 { color: var(--c-fg); }
.hero h1 .accent { color: var(--c-accent-ink); }
[data-theme="dark"] .hero h1 .accent { color: var(--c-accent); }
.hero-lede { color: var(--c-fg-muted); font-size: 1.07rem; max-width: var(--measure); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: var(--s-5) 0 var(--s-3); }
.hero-wa { color: var(--c-primary-strong); font-weight: 700; font-size: 0.92rem; }
[data-theme="dark"] .hero-wa { color: var(--c-primary); }
.hero-wa a { color: inherit; }
.hero-visual { position: relative; margin: 0; }
.hero-visual img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--r-lg); border: 1px solid var(--c-border); box-shadow: var(--e-2);
}
.hero-verse {
    position: absolute; left: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px);
    z-index: 1; isolation: isolate;
    max-width: min(360px, 88%);
    background: var(--c-surface); color: var(--c-fg);
    border: 1px solid var(--c-border); border-inline-start: 3px solid var(--c-gold);
    border-radius: var(--r-md); box-shadow: var(--e-2);
    padding: var(--s-4) var(--s-4);
}
.hero-verse blockquote { margin: 0; }
.hero-verse p {
    font-family: var(--font-display); font-style: italic;
    font-size: 0.98rem; line-height: 1.45; color: var(--c-fg);
}
.hero-verse cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--c-accent-ink); }
[data-theme="dark"] .hero-verse cite { color: var(--c-accent); }

/* ---------- 7. Trust strip -------------------------------------------------- */
.trust-strip { background: var(--c-canvas-2); background-image: var(--pattern-star); border-block: 1px solid var(--c-border); }
.trust-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5);
    padding-block: var(--s-6);
}
.trust-item { display: flex; flex-direction: column; gap: 6px; }
.trust-ico {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--c-accent-soft); color: var(--c-accent-ink);
    display: grid; place-items: center; margin-bottom: 6px;
}
.trust-ico .icon { width: 22px; height: 22px; }
.trust-item b { font-size: 0.98rem; color: var(--c-fg); }
.trust-item > span { font-size: 0.85rem; color: var(--c-fg-muted); }

/* ---------- 8. Sections ------------------------------------------------------ */
.section { padding-block: var(--section-y); }
.section-alt { background: var(--c-canvas-2); background-image: var(--pattern-star); }
.section-head { max-width: 760px; margin: 0 auto var(--s-7); text-align: center; }
.section-head.align-start, .section-head.flush { margin-inline: 0; text-align: start; }
.section-head.flush { margin-bottom: var(--s-5); }
.section-tag {
    display: inline-block; margin-bottom: var(--s-3);
    background: var(--c-accent-soft); color: var(--c-accent-ink);
    font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--r-pill);
}
.section-head h2 { color: var(--c-deep); margin-bottom: var(--s-3); }
[data-theme="dark"] .section-head h2 { color: var(--c-fg); }
.section-head > p { color: var(--c-fg-muted); }
.section-head a { font-weight: 600; }

/* ---------- 9. Course tiles (home) ------------------------------------------- */
.course-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: var(--s-5);
}
.course-tile {
    position: relative; display: flex; flex-direction: column; gap: var(--s-3);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-5);
    box-shadow: var(--e-1);
    transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.course-tile:hover { transform: translateY(-4px); box-shadow: var(--e-2); }
.tile-num {
    position: absolute; top: 10px; right: 16px;
    font-family: var(--font-display); font-size: 2.1rem; font-weight: 700;
    color: var(--c-accent-ink); line-height: 1;
}
.tile-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--c-primary-soft); color: var(--c-primary);
    display: grid; place-items: center;
}
[data-theme="dark"] .tile-icon { color: var(--c-primary-strong); }
.tile-icon .icon { width: 24px; height: 24px; }
.course-tile h3 { font-size: 1.14rem; color: var(--c-fg); }
.course-tile p { color: var(--c-fg-muted); font-size: 0.92rem; flex: 1; }
.tile-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-primary); font-weight: 700; font-size: 0.9rem; text-decoration: none;
    min-height: 32px;
}
.tile-link .icon { width: 15px; height: 15px; transition: transform var(--d-fast) var(--ease-out); }
.tile-link:hover { color: var(--c-primary-strong); }
.tile-link:hover .icon { transform: translateX(3px); }

/* ---------- 10. Values band --------------------------------------------------- */
.band { background: var(--c-deep); background-image: var(--pattern-star-inverse); color: var(--c-on-deep); }
.band-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-block: var(--s-7); gap: var(--s-5);
}
.band-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.band-ico { color: var(--c-gold); margin-bottom: 6px; }
.band-ico .icon { width: 26px; height: 26px; }
.band-item b { font-size: 0.96rem; color: var(--c-on-deep); }
.band-item > span { font-size: 0.82rem; color: var(--c-on-deep-muted); }

/* ---------- 11. Steps ---------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.step {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--e-1);
}
.step-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.step-index {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    background: var(--c-gold); color: var(--c-on-gold);
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    display: grid; place-items: center;
}
.step h3 { font-size: 1.05rem; }
.step p { color: var(--c-fg-muted); font-size: 0.92rem; }

/* ---------- 12. Split / instructor ---------------------------------------------- */
.split {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 56px); align-items: center;
}
.instructor-figure { position: relative; margin: 0; }
.instructor-figure img {
    width: 100%; border-radius: var(--r-lg); border: 1px solid var(--c-border);
    box-shadow: var(--e-2); object-fit: cover;
}
.instructor-badge {
    position: absolute; left: 14px; bottom: 14px;
    background: var(--c-gold); color: var(--c-on-gold);
    font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 8px 14px; border-radius: var(--r-pill); max-width: calc(100% - 28px);
}
.instructor-info > .section-tag { margin-bottom: var(--s-3); }
.instructor-info h2 { color: var(--c-deep); margin-bottom: var(--s-3); }
[data-theme="dark"] .instructor-info h2 { color: var(--c-fg); }
.instructor-bio { color: var(--c-fg-muted); margin-bottom: var(--s-4); }
.pull-quote {
    margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5);
    background: var(--c-primary-soft); border-inline-start: 3px solid var(--c-gold);
    border-radius: var(--r-sm);
}
.pull-quote p { font-family: var(--font-display); font-style: italic; color: var(--c-fg); }
.pull-quote footer { margin-top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--c-fg-muted); }
.instructor-points { display: grid; gap: 10px; margin-bottom: var(--s-5); padding: 0; list-style: none; }
.instructor-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
.instructor-points .icon { width: 18px; height: 18px; color: var(--c-primary); flex: 0 0 auto; }
[data-theme="dark"] .instructor-points .icon { color: var(--c-primary-strong); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-media-sticky { position: sticky; top: calc(var(--header-offset) + 16px); }

/* ---------- 13. Duas teaser & feedback card (home) -------------------------------- */
.dua-cta-grid {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 48px); align-items: start;
}
.dua-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.feedback-card {
    background: var(--c-accent-soft); border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md); padding: var(--s-6) var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-3);
}
.feedback-card h3 { color: var(--c-fg); }
.feedback-card p { color: var(--c-fg-muted); font-size: 0.95rem; }
.feedback-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- 14. Duas page ----------------------------------------------------------- */
.tools-layout[hidden], .duas-layout[hidden] { display: none; }
.duas-layout { display: grid; gap: var(--s-5); }
.dua-grid-heading { font-size: var(--t-lg); color: var(--c-deep); margin-bottom: var(--s-4); }
[data-theme="dark"] .dua-grid-heading { color: var(--c-fg); }
.dua-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    padding: 9px 16px; border-radius: var(--r-pill);
    background: var(--c-surface); color: var(--c-fg);
    border: 1px solid var(--c-border-strong);
    font-weight: 700; font-size: var(--t-sm); cursor: pointer;
    transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.filter-btn:hover { background: var(--c-primary-soft); }
.filter-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.filter-count {
    background: rgba(255, 255, 255, 0.22); border-radius: var(--r-pill);
    font-size: 0.72rem; padding: 2px 8px; font-weight: 800;
}
.filter-btn:not(.active) .filter-count { background: var(--c-canvas-2); color: var(--c-fg-muted); }
.dua-search { min-width: min(280px, 100%); }
.dua-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); }
#duaList .dua-card {
    display: flex; flex-direction: column; gap: 8px; position: relative;
    overflow-wrap: break-word;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-inline-start: 3px solid var(--c-gold);
    border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--e-1);
}
#duaList .dua-cat-chip {
    align-self: flex-start;
    background: var(--c-accent-soft); color: var(--c-accent-ink);
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 2px;
}
#duaList .dua-card h3 { font-size: 1.02rem; color: var(--c-fg); }
.dua-ar, #duaList .dua-ar {
    font-family: var(--font-arabic); font-size: 1.5rem; line-height: 1.9;
    color: var(--c-fg); margin: 2px 0;
}
.dua-tr { font-style: italic; color: var(--c-fg-muted); font-size: 0.92rem; }
.dua-en, #duaList .dua-en { color: var(--c-fg); font-size: 0.95rem; }
.dua-when, #duaList .dua-when {
    margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--c-border);
    color: var(--c-fg-subtle); font-size: 0.82rem;
}
.dua-ref { font-size: 0.8rem; font-weight: 700; color: var(--c-accent-ink); }
[data-theme="dark"] .dua-ref { color: var(--c-accent); }
.dua-source-note { margin-top: var(--s-2); }
.dua-footer-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- 15. Page header (inner pages) --------------------------------------------- */
.page-header {
    background: var(--c-deep); background-image: var(--pattern-star-inverse);
    color: var(--c-on-deep);
    padding-block: clamp(36px, 5vw, 64px);
}
.crumbs { color: var(--c-on-deep-muted); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.crumbs a { color: var(--c-on-deep-muted); font-weight: 600; }
.crumbs a:hover { color: var(--c-on-deep); }
.crumbs span[aria-hidden="true"] { color: var(--c-cta-tag); margin-inline: 6px; }
.crumbs .current { color: var(--c-on-deep); font-weight: 700; }
.page-header .section-tag { background: rgba(255, 255, 255, 0.12); color: var(--c-cta-tag); }
.page-header h1 { color: var(--c-on-deep); font-size: var(--t-3xl); margin-bottom: var(--s-3); }
.page-subtitle { color: var(--c-on-deep-muted); max-width: 60ch; }
.page-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-5); }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, 0.12); color: var(--c-on-deep);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-pill); padding: 7px 14px;
    font-size: 0.82rem; font-weight: 700;
}
.chip .icon { width: 15px; height: 15px; }
.chip-accent { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-on-gold); }

/* ---------- 16. Courses page ------------------------------------------------------------ */
.rail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.rail-filters { position: static; }
.rail-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--e-1);
    display: flex; flex-direction: column; gap: var(--s-3); color: var(--c-fg);
}
.rail-card h2 { font-size: 1.15rem; }
.rail-card p { color: var(--c-fg-muted); font-size: 0.92rem; }
.catalog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.catalog-status { font-weight: 700; color: var(--c-fg); margin: 0; }
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-5); }
.course-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); box-shadow: var(--e-1);
    transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--e-2); }
.course-image { position: relative; }
.course-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.course-badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--c-primary); color: var(--c-on-primary);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--r-pill);
}
.course-badge.tag-new { background: var(--c-gold); color: var(--c-on-gold); }
.course-info { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1; }
.course-info h3 { font-size: 1.12rem; color: var(--c-fg); }
.course-info > p { color: var(--c-fg-muted); font-size: 0.92rem; }
.course-features { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.course-features li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--c-fg-subtle); }
.course-features .icon { width: 14px; height: 14px; color: var(--c-primary); }
[data-theme="dark"] .course-features .icon { color: var(--c-primary-strong); }
.course-meta { margin: 0; }
.course-foot {
    margin-top: auto; padding-top: var(--s-3); border-top: 1px dashed var(--c-border);
    display: flex; flex-direction: column; gap: var(--s-3);
}
.course-audience { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--c-fg-muted); }
.course-audience .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-fg-subtle); }
.course-foot .btn { align-self: flex-start; }

/* ---------- 17. Gallery ------------------------------------------------------------------ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s-4); }
.gallery-item {
    position: relative; margin: 0; overflow: hidden;
    border-radius: var(--r-md); border: 1px solid var(--c-border); box-shadow: var(--e-1);
    background: var(--c-surface);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--d-slow) var(--ease-out); }
.gallery-item.span-tall img { aspect-ratio: 3 / 4; }
.gallery-item.span-wide { grid-column: span 2; }
.gallery-item.span-wide img { aspect-ratio: 16 / 9; }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-overlay {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(6, 24, 19, 0.95) 0 48%, rgba(6, 24, 19, 0.55) 78%, rgba(6, 24, 19, 0) 100%);
    padding: 48px var(--s-4) var(--s-3);
}
.gallery-overlay { color: var(--c-light); }
.gallery-overlay h3 { color: var(--c-light); font-size: 1rem; }
.gallery-note { color: var(--c-fg-muted); font-size: 0.9rem; }

/* ---------- 18. FAQ ------------------------------------------------------------------------ */
.faq-list { display: grid; gap: var(--s-3); }
.faq-list details {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-sm); box-shadow: var(--e-1);
}
.faq-list details[open] { border-color: var(--c-primary-soft); }
.faq-list summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 44px; padding: 14px 18px; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--c-fg);
    list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-inline-end: 4px;
    border-inline-end: 2px solid var(--c-accent-ink); border-bottom: 2px solid var(--c-accent-ink);
    transform: rotate(45deg); transition: transform var(--d-base) var(--ease-out);
}
[data-theme="dark"] .faq-list summary::after { border-color: var(--c-accent); }
.faq-list details[open] summary::after { transform: rotate(225deg); }
.faq-list details > p { padding: 0 18px 16px; color: var(--c-fg-muted); font-size: 0.95rem; }
.faq-index { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 19. Contact ---------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s-6); align-items: start; }
.contact-info { display: grid; gap: var(--s-4); }
.contact-card {
    display: flex; gap: var(--s-4);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--e-1);
    color: var(--c-fg);
}
.contact-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background: var(--c-primary-soft); color: var(--c-primary);
    display: grid; place-items: center;
}
[data-theme="dark"] .contact-icon { color: var(--c-primary-strong); }
.contact-icon .icon { width: 22px; height: 22px; }
.contact-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.contact-number { margin: 0; }
.contact-number a { font-weight: 800; font-size: 1.12rem; }
.contact-mode { color: var(--c-fg-muted); font-size: 0.85rem; margin: 2px 0 var(--s-3); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-act {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
    padding: 5px 12px; border-radius: var(--r-pill);
    font-size: 0.82rem; font-weight: 700; text-decoration: none;
    background: var(--c-canvas-2); color: var(--c-fg); border: 1px solid var(--c-border);
}
.contact-act .icon { width: 14px; height: 14px; }
.contact-act:hover { border-color: var(--c-primary); color: var(--c-primary-strong); background: var(--c-primary-soft); }
.contact-wa { background: var(--c-whatsapp); border-color: var(--c-whatsapp); color: var(--c-on-whatsapp); }
.contact-wa:hover { background: var(--c-primary-strong); border-color: var(--c-primary-strong); color: var(--c-on-whatsapp); }
.contact-form-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-6) var(--s-5); box-shadow: var(--e-2);
}
.contact-form-card .section-head { margin-bottom: var(--s-5); }
.form-description { color: var(--c-fg-muted); font-size: 0.92rem; }

/* ---------- 20. Forms ---------------------------------------------------------------------------- */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.form-group label, fieldset legend { font-weight: 700; font-size: 0.9rem; color: var(--c-fg); }
.optional { color: var(--c-fg-muted); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea,
.calc-form input, .calc-form select {
    width: 100%; min-height: 44px; padding: 11px 14px;
    background: var(--c-surface); color: var(--c-fg);
    border: 1px solid var(--c-control-border); border-radius: var(--r-sm);
    transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible,
.calc-form input:focus-visible, .calc-form select:focus-visible {
    outline: 2px solid var(--c-ring); outline-offset: 1px;
}
.form-group select, .calc-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-fg-muted) 50%), linear-gradient(135deg, var(--c-fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 34px; }
.form-hint { color: var(--c-fg-muted); font-size: 0.8rem; }
.form-error { display: none; color: var(--c-required); font-size: 0.84rem; font-weight: 600; }
.form-error .icon { width: 14px; height: 14px; vertical-align: -2px; }
.form-group.has-error .form-error { display: block; }
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--c-destructive); }
.form-group fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.form-group fieldset label, .check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-primary); }
.check { margin-bottom: var(--s-3); }
.check.scope-check { font-weight: 500; font-size: 0.86rem; color: var(--c-fg-muted); }
.form-summary { display: none; margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--r-sm); background: var(--c-destructive-soft); border: 1px solid var(--c-destructive); }
.form-summary.show { display: block; }
.form-summary h2 { font-size: 1rem; color: var(--c-required); margin-bottom: 8px; }
[data-theme="dark"] .form-summary h2 { color: var(--c-destructive); }
.form-summary a { color: var(--c-required); font-weight: 700; }
[data-theme="dark"] .form-summary a { color: var(--c-destructive); }
.handoff-note {
    margin: var(--s-4) 0 0; padding: var(--s-4);
    background: var(--c-primary-soft); border: 1px solid var(--c-primary);
    border-radius: var(--r-sm); color: var(--c-fg); font-weight: 600; font-size: 0.92rem;
}
.form-footer { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--c-fg-muted); font-size: 0.9rem; }
.whatsapp-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 10px 18px; border-radius: var(--r-sm);
    background: var(--c-whatsapp); color: var(--c-on-whatsapp);
    font-weight: 700; text-decoration: none;
}
.whatsapp-btn:hover { background: var(--c-primary-strong); color: var(--c-on-whatsapp); }
.whatsapp-btn .icon { width: 18px; height: 18px; }
.contact-fallback, .feedback-fallback { margin-bottom: var(--s-4); }
.no-js .contact-fallback, .no-js .feedback-fallback { display: block; }
.contact-ready #contactForm, .feedback-ready #feedbackForm { display: flex; flex-direction: column; }
#feedbackForm[hidden], #contactForm[hidden] { display: none; }
.feedback-ready .feedback-fallback { display: none; }
.feedback-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.feedback-layout .section-head { margin-bottom: var(--s-4); }
.feedback-aside {
    background: var(--c-deep); background-image: var(--pattern-star-inverse);
    color: var(--c-on-deep); border-radius: var(--r-md);
    padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.feedback-illustration {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); color: var(--c-gold);
    display: grid; place-items: center;
}
.feedback-illustration .icon { width: 26px; height: 26px; }
.feedback-aside h3 { color: var(--c-on-deep); }
.feedback-aside p { color: var(--c-on-deep-muted); font-size: 0.93rem; }
.feedback-aside a { color: var(--c-cta-tag); }

/* ---------- 21. Tools ------------------------------------------------------------------------------ */
.tools-section { padding-top: var(--section-y); }
.tools-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.tool-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
.tool-tabs { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.tool-tab {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 11px 16px; border-radius: var(--r-sm);
    background: var(--c-surface); color: var(--c-fg);
    border: 1px solid var(--c-border); cursor: pointer; text-align: start;
    font-weight: 700; font-size: 0.92rem; white-space: nowrap;
    transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.tool-tab .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--c-accent-ink); }
[data-theme="dark"] .tool-tab .icon { color: var(--c-accent); }
.tool-tab:hover { background: var(--c-primary-soft); }
.tool-tab.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.tool-tab.active .icon { color: var(--c-on-primary); }
.tool-note {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--c-accent-soft); color: var(--c-fg);
    border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
    padding: var(--s-4); font-size: 0.88rem;
}
.tool-note .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--c-accent-ink); margin-top: 2px; }
[data-theme="dark"] .tool-note .icon { color: var(--c-accent); }
.tool-note a { font-weight: 700; }
.tools-unavailable { margin-bottom: var(--s-4); }
.tools-ready .tools-unavailable { display: none; }
.tool-stage { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.tool-panel {
    min-width: 0;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); box-shadow: var(--e-1); padding: var(--s-6) var(--s-5);
}
.tool-head { margin-bottom: var(--s-5); max-width: var(--measure); }
.tool-head h2 { font-size: var(--t-2xl); color: var(--c-deep); margin-bottom: var(--s-2); }
[data-theme="dark"] .tool-head h2 { color: var(--c-fg); }
.tool-head p { color: var(--c-fg-muted); font-size: 0.93rem; }
.tool-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--s-5); align-items: start; }
.tool-stack { display: grid; gap: var(--s-5); }
.tool-card {
    background: var(--c-canvas-2); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-5);
}
.calc-form h3 { font-size: 1.08rem; margin-bottom: var(--s-4); }
.calc-result { background: var(--c-canvas-2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-5); }
.calc-result h3 { font-size: 1.08rem; margin-bottom: var(--s-3); }
.calc-result p { margin-bottom: 8px; font-size: 0.94rem; }
.calc-result p:last-child { margin-bottom: 0; }
.calc-result.is-error { background: var(--c-destructive-soft); border-color: var(--c-destructive); }
.calc-result.is-error h3 { color: var(--c-required); }
[data-theme="dark"] .calc-result.is-error h3 { color: var(--c-destructive); }
.calc-result .ok { color: var(--c-primary-strong); font-weight: 800; }
[data-theme="dark"] .calc-result .ok { color: var(--c-primary-strong); }
.residue-note { color: var(--c-required); font-weight: 600; }
[data-theme="dark"] .residue-note { color: var(--c-destructive); }
.table-scroll { overflow-x: auto; margin-block: var(--s-3); }
.share-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.share-table th, .share-table td { border: 1px solid var(--c-border); padding: 9px 12px; text-align: start; }
.share-table thead th { background: var(--c-canvas-2); }
.share-each { display: block; color: var(--c-fg-muted); }
.tasbih-wrap { display: grid; place-items: center; }
.tasbih-box {
    width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    background: var(--c-canvas-2); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
}
.tasbih-cycle { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; color: var(--c-fg-muted); }
.tasbih-cycle .name-ar { font-size: 1.5rem; color: var(--c-fg); }
.tasbih-count {
    font-family: var(--font-display); font-size: 3.6rem; font-weight: 700;
    color: var(--c-primary); line-height: 1;
}
[data-theme="dark"] .tasbih-count { color: var(--c-primary-strong); }
#tasbihTap { min-width: 160px; min-height: 52px; font-size: 1rem; }
.names-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: var(--s-4); }
.name-card {
    position: relative; overflow-wrap: break-word;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--e-1);
    display: flex; flex-direction: column; gap: 6px;
}
.name-card .name-ar { font-family: var(--font-arabic); font-size: 1.42rem; line-height: 1.9; color: var(--c-fg); }
.name-card h3 { font-size: 0.98rem; color: var(--c-primary-strong); font-family: var(--font-body); }
[data-theme="dark"] .name-card h3 { color: var(--c-primary); }
.name-card p { font-size: 0.85rem; color: var(--c-fg-muted); }
.name-num {
    position: absolute; top: 10px; right: 12px;
    font-size: 0.75rem; font-weight: 800; color: var(--c-fg-subtle);
}
.search-status { min-height: 1.4em; margin: 0 0 var(--s-4); }
.empty-note { color: var(--c-fg-muted); font-style: italic; padding: var(--s-4); text-align: center; }
.prophet-timeline { display: grid; gap: var(--s-3); margin: 0; padding: 0; counter-reset: none; list-style: none; }
.timeline-item {
    display: flex; gap: var(--s-4);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--e-1);
}
.timeline-item.timeline-highlight { border-color: var(--c-gold); border-width: 2px; }
.timeline-num {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-accent-soft); color: var(--c-accent-ink);
    font-weight: 800; display: grid; place-items: center;
}
.timeline-body { min-width: 0; overflow-wrap: break-word; }
.timeline-body h3 { font-size: 1.02rem; margin-bottom: 2px; }
.timeline-saw { font-family: var(--font-arabic); }
.timeline-ar { font-family: var(--font-arabic); font-size: 1.25rem; color: var(--c-fg); }
.timeline-sig { color: var(--c-fg-muted); font-size: 0.88rem; margin-top: 4px; }
.dua-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-4); }

/* ---------- 22. Legal pages ------------------------------------------------------------------------- */
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-toc a {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 8px 14px; border-radius: var(--r-pill);
    background: var(--c-surface); border: 1px solid var(--c-border-strong);
    font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--c-fg);
}
.legal-toc a:hover { border-color: var(--c-primary); color: var(--c-primary-strong); }
.legal-prose, .legal-body { display: grid; gap: var(--s-5); max-width: var(--measure); }
.legal-prose h2, .legal-body h2 { font-size: var(--t-2xl); color: var(--c-deep); margin-top: var(--s-2); }
[data-theme="dark"] .legal-prose h2, [data-theme="dark"] .legal-body h2 { color: var(--c-fg); }
.legal-prose p, .legal-prose li, .legal-body p, .legal-body li { color: var(--c-fg-muted); font-size: 0.96rem; }
.legal-prose ul, .legal-prose ol, .legal-body ul, .legal-body ol { padding-inline-start: 22px; display: grid; gap: 6px; }
.legal-meta { color: var(--c-fg-subtle); font-size: 0.88rem; }
.legal-updated { color: var(--c-fg-subtle); font-size: 0.85rem; }

/* ---------- 22b. Shared card & feature blocks ---------------------------------------------------------- */
.card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--card-pad); box-shadow: var(--e-1);
    overflow-wrap: break-word; color: var(--c-fg);
}
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-strong); color: var(--c-on-primary); }
.feature-card { display: flex; flex-direction: column; gap: var(--s-3); }
.feature-card h3 { font-size: 1.02rem; }
.feature-card p { color: var(--c-fg-muted); font-size: 0.92rem; }
.feature-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--c-primary-soft); color: var(--c-primary);
    display: grid; place-items: center;
}
[data-theme="dark"] .feature-icon { color: var(--c-primary-strong); }
.feature-icon .icon { width: 22px; height: 22px; }
.rail { display: grid; gap: var(--s-4); align-content: start; }
.stat-item { display: grid; gap: 2px; }
.chip-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.contact-sms:hover { border-color: var(--c-accent-ink); background: var(--c-accent-soft); color: var(--c-accent-ink); }
[data-theme="dark"] .contact-sms:hover { color: var(--c-accent); border-color: var(--c-accent); }
.course-badge.kids { background: var(--c-gold); color: var(--c-on-gold); }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.instructor-image { position: relative; margin: 0; }
.instructor-image img {
    width: 100%; border-radius: var(--r-lg); border: 1px solid var(--c-border);
    box-shadow: var(--e-2); object-fit: cover;
}
.instructor-qualifications { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: var(--s-4); }
.instructor-qualifications span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--c-fg-muted); }
.instructor-qualifications .icon { width: 17px; height: 17px; color: var(--c-primary); }
[data-theme="dark"] .instructor-qualifications .icon { color: var(--c-primary-strong); }
.tool-search { max-width: 460px; }

.course-badge.adults { letter-spacing: 0.08em; }
.catalog-main { display: grid; gap: var(--s-5); }
.contact-tel:hover { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.dua-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.js-year { font-variant-numeric: tabular-nums; }

/* ---------- 23. 404 ------------------------------------------------------------------------------------ */
.error-section { padding-block: clamp(64px, 10vw, 128px); text-align: center; }
.error-inner { max-width: 620px; margin-inline: auto; display: grid; gap: var(--s-4); justify-items: center; }
.error-code {
    font-family: var(--font-display); font-size: clamp(4.5rem, 12vw, 7rem);
    font-weight: 700; color: var(--c-accent-ink); line-height: 1;
}
[data-theme="dark"] .error-code { color: var(--c-accent); }
.error-inner h1 { font-size: var(--t-3xl); }
.error-inner > p { color: var(--c-fg-muted); }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.error-links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: var(--s-2); }
.error-links a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; text-decoration: none; }
.error-links .icon { width: 15px; height: 15px; }

/* ---------- 24. CTA band --------------------------------------------------------------------------------- */
.cta-section { background: var(--c-cta); background-image: var(--pattern-star-inverse); color: var(--c-cta-fg); padding-block: clamp(48px, 6vw, 88px); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.cta-tag { display: inline-block; margin-bottom: var(--s-3); background: rgba(255, 255, 255, 0.12); color: var(--c-cta-tag); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); }
.cta-inner h2 { color: var(--c-on-deep); margin-bottom: var(--s-2); }
.cta-inner p { color: var(--c-cta-muted); max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr) minmax(0, 0.65fr); gap: var(--s-6); align-items: center; }
.cta-image { margin: 0; }
.cta-image img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--e-3); }
.cta-center { text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.cta-center h2 { color: var(--c-on-deep); }
.cta-center p { color: var(--c-cta-muted); max-width: 52ch; }
.cta-badge { text-align: center; font-family: var(--font-display); color: var(--c-gold); }
.cta-badge-word { display: block; font-size: 1.9rem; font-weight: 700; }
.cta-badge-sub { display: block; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--c-cta-muted); margin-top: 6px; }

/* ---------- 25. Footer -------------------------------------------------------------------------------------- */
.main-footer { background: var(--c-deep); background-image: var(--pattern-star-inverse); color: var(--c-on-deep); padding: var(--s-7) 0 var(--s-5); margin-top: auto; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-6); }
.brand-footer { text-decoration: none; margin-bottom: var(--s-3); }
.brand-footer .brand-mark { background: transparent; }
.brand-footer .brand-text strong { color: var(--c-on-deep); }
.brand-footer .brand-text small { color: var(--c-on-deep-muted); }
.footer-brand > p { color: var(--c-on-deep-muted); font-size: 0.9rem; margin-bottom: var(--s-4); max-width: 34ch; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.10); color: var(--c-on-deep);
    transition: background-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--c-gold); color: var(--c-on-gold); transform: translateY(-2px); }
.footer-social .icon { width: 18px; height: 18px; }
.footer-col h2 {
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cta-tag);
    margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.footer-col a {
    display: inline-flex; align-items: center; min-height: 32px;
    color: var(--c-on-deep-muted); font-size: 0.88rem; text-decoration: none;
}
.footer-col a:hover { color: var(--c-on-deep); text-decoration: underline; }
.footer-phone { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--s-3); color: var(--c-cta-tag); }
.footer-phone .icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 4px; }
.footer-num { display: flex; flex-direction: column; }
.footer-tel { color: var(--c-on-deep); font-weight: 800; font-size: 0.98rem; text-decoration: none; }
.footer-tel:hover { color: var(--c-cta-tag); }
.footer-mode { color: var(--c-on-deep-muted); font-size: 0.78rem; }
.footer-wa {
    align-self: center; margin-inline-start: 4px;
    color: var(--c-cta-tag); font-weight: 700; font-size: 0.82rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.footer-wa:hover { color: var(--c-on-deep); }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
    border-top: 1px solid rgba(201, 162, 74, 0.35);
    margin-top: var(--s-6); padding-top: var(--s-4);
    color: var(--c-on-deep-muted); font-size: 0.82rem;
}
.footer-tagline { color: var(--c-cta-tag); font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-on-deep-muted); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--c-on-deep); text-decoration: underline; }
.footer-credit-row { display: flex; justify-content: center; margin-top: var(--s-5); }
.footer-credit {
    display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
    color: var(--c-on-deep-muted); font-size: 0.85rem; text-decoration: none;
}
.footer-credit:hover { color: var(--c-on-deep); }
.footer-credit-logo { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); padding: 2px; }

/* ---------- 26. FABs & toast ---------------------------------------------------------------------------------- */
.fab-stack {
    position: fixed; inset: auto 16px calc(16px + env(safe-area-inset-bottom)) auto;
    z-index: var(--z-fab); display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.to-top {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--c-surface); color: var(--c-fg);
    border: 1px solid var(--c-border-strong); box-shadow: var(--e-2); cursor: pointer;
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top .icon { width: 19px; height: 19px; }
.whatsapp-fab {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--c-whatsapp); color: var(--c-on-whatsapp); box-shadow: var(--e-2);
    transition: transform var(--d-fast) var(--ease-out);
}
.whatsapp-fab:hover { transform: translateY(-2px); color: var(--c-on-whatsapp); }
.whatsapp-fab .icon { width: 24px; height: 24px; }
.toast {
    position: fixed; inset: auto 16px calc(84px + env(safe-area-inset-bottom)) 16px; z-index: var(--z-toast);
    max-width: 480px; margin-inline: auto;
    background: var(--c-deep); color: var(--c-on-deep);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-sm);
    box-shadow: var(--e-3); padding: 14px 18px;
    font-weight: 600; font-size: 0.9rem; text-align: center;
    animation: toast-in var(--d-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 27. Scroll reveal ----------------------------------------------------------------------------------- */
.reveal { opacity: 0; translate: 0 16px; transition: opacity var(--d-slow) var(--ease-out), translate var(--d-slow) var(--ease-out); }
.reveal.visible { opacity: 1; translate: 0 0; }
.is-hidden { display: none !important; }
.stat-number { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--c-primary); display: block; }
[data-theme="dark"] .stat-number { color: var(--c-primary-strong); }
.stat-label { color: var(--c-fg-muted); font-size: 0.85rem; }

/* ---------- 28. Mission / values (about) -------------------------------------------------------------------------- */
.tutor-card, .instructor-card {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 56px); align-items: center;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--e-1);
}
.instructor-role { color: var(--c-fg-muted); font-weight: 600; margin-bottom: var(--s-3); }
.mission-container {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: center;
    background: var(--c-deep); background-image: var(--pattern-star-inverse);
    color: var(--c-on-deep); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5);
}
.mission-content { display: flex; gap: var(--s-4); align-items: flex-start; }
.mission-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--c-gold); display: grid; place-items: center; }
.mission-icon .icon { width: 24px; height: 24px; }
.mission-text h2 { color: var(--c-on-deep); margin-bottom: var(--s-2); font-size: var(--t-2xl); }
.mission-text p { color: var(--c-on-deep-muted); }
.mission-stats { display: grid; gap: var(--s-4); text-align: center; }
.mission-stats .stat-number { color: var(--c-gold); font-size: 1.6rem; }
.mission-stats .stat-label { color: var(--c-on-deep-muted); }
.values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.value-card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--e-1);
    display: flex; flex-direction: column; gap: var(--s-3);
    overflow-wrap: break-word;
}
.value-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; }
[data-theme="dark"] .value-icon { color: var(--c-primary-strong); }
.value-icon .icon { width: 22px; height: 22px; }
.value-card h3 { font-size: 1.05rem; }
.value-card p { color: var(--c-fg-muted); font-size: 0.92rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }

/* ---------- 29. FAQ page ---------------------------------------------------------------------------------------------- */
.faq-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.faq-groups { display: grid; gap: var(--s-7); }
.faq-group > .section-head { margin-bottom: var(--s-4); }

/* ---------- 30. Responsive ---------------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    :root { --topbar-h: 64px; }
    .topbar-world { display: none; }
    .topbar-inner { min-height: 64px; }
    .nav-links, .btn-demo { display: none; }
    .mobile-nav-toggle { display: grid; }
    .mainnav-inner { justify-content: flex-end; }
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--s-6); }
    .band-item { align-items: flex-start; text-align: start; border-bottom: 1px solid rgba(255, 255, 255, 0.16); padding-bottom: var(--s-4); }
    .band-grid .band-item:nth-last-child(-n+2) { border-bottom: 0; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .values-grid, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dua-cards { grid-template-columns: minmax(0, 1fr); }
    .dua-cta-grid { grid-template-columns: minmax(0, 1fr); }
    .cta-grid { grid-template-columns: minmax(0, 1fr); }
    .cta-image img { min-height: 0; aspect-ratio: 16 / 8; }
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tutor-card, .mission-container { grid-template-columns: minmax(0, 1fr); }
    .profile-media-sticky { position: relative; top: auto; }
}

@media (min-width: 993px) {
    .rail-layout, .tools-layout { grid-template-columns: 276px minmax(0, 1fr); }
    .tool-tabs { flex-direction: column; }
    .legal-layout, .faq-page-grid { grid-template-columns: 300px minmax(0, 1fr); }
    .rail-sticky, .legal-toc { position: sticky; top: calc(var(--header-offset) + 20px); }
    .legal-toc { display: grid; gap: 8px; }
    .rail-filters { flex-direction: column; align-items: stretch; }
    .rail-filters .filter-btn { justify-content: space-between; }
}

@media (max-width: 992px) {
    .tool-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: thin; }
    .rail-filters { display: flex; flex-wrap: wrap; }
}

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: clamp(36px, 6vw, 64px); }
    /* position: relative, not static: replaced-element paint order would
       drop the card's background behind the photo while its text stays on
       top. Relative keeps the overlap AND the card painted as one unit. */
    .hero-verse { position: relative; inset: auto; margin-top: -40px; margin-inline: var(--s-4); max-width: none; }
    .split, .contact-layout, .feedback-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .trust-grid { grid-template-columns: minmax(0, 1fr); }
    .course-tiles { grid-template-columns: minmax(0, 1fr); }
    .band-grid { grid-template-columns: minmax(0, 1fr); }
    .band-item { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
    .band-grid .band-item:last-child { border-bottom: 0; }
    .steps, .values-grid, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .gallery-item.span-wide { grid-column: auto; }
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    .cta-inner { flex-direction: column; align-items: flex-start; }
    .dua-controls { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .brand-text strong { font-size: 1.08rem; }
    .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
    .hero-actions .btn { flex: 1 1 100%; }
    .course-foot .btn { align-self: stretch; }
    .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
    .container { width: 94%; }
    .brand-text small { display: none; }
    .btn-demo { font-size: 0.82rem; padding: 8px 12px; }
}

/* ---------- 31. Motion & accessibility preferences -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; translate: none; }
}

@media (prefers-contrast: more) {
    .btn-outline, .btn-ghost { border-width: 2px; }
    .form-group input, .form-group select, .form-group textarea, .calc-form input { border-width: 2px; }
    .chip { border-width: 2px; }
}

@media (forced-colors: active) {
    .btn, .btn-demo, .filter-btn, .tool-tab, .contact-act, .whatsapp-btn { border: 1px solid ButtonText; }
    .skip-link, .to-top, .whatsapp-fab, .theme-toggle, .mobile-nav-toggle { border: 1px solid ButtonText; }
    .nav-drawer { border-inline-end: 1px solid CanvasText; }
    .icon { forced-color-adjust: none; }
}

/* ---------- 32. Print ---------------------------------------------------------------------------------------------------- */
@media print {
    .main-header, .fab-stack, .to-top, .whatsapp-fab, .toast, .nav-backdrop, .cta-section .btn { display: none !important; }
    body { background: #FFFFFF; color: #000000; }
    .section, .hero { padding-block: 24px; }
    a { color: #000000; text-decoration: underline; }
}