/* =====================================================================
 * ArabAI Academy — design system (v4.0)
 * RTL-first. Logical properties throughout (inline-start = right in Arabic).
 * Dark navy for the moments that matter; clean light sections for reading.
 * ===================================================================== */

:root {
  --aa-ink: #0A0F1E;
  --aa-ink-2: #0D1426;
  --aa-surface-dark: #111A2E;
  --aa-line-dark: #24304A;
  --aa-text-on-dark: #FFFFFF;
  --aa-muted-on-dark: #B8C3D6;
  --aa-faint-on-dark: #8D9AB2;

  --aa-bg: #F7F8FA;
  --aa-surface: #FFFFFF;
  --aa-line: #E4E7EC;
  --aa-line-2: #EEF0F3;
  --aa-text: #0B1220;
  --aa-text-2: #2D3748;
  --aa-muted: #4A5568;

  --aa-accent: #34D3B4;          /* the one action colour */
  --aa-accent-ink: #0A7D69;      /* links / text on light */
  --aa-accent-soft: #E7F6F2;
  --aa-glow: #6E7BFF;            /* gradients only */

  --aa-cat-ai: #6E7BFF;
  --aa-cat-py: #3B82F6;
  --aa-cat-ml: #34D3B4;
  --aa-cat-dl: #A78BFA;
  --aa-cat-cyber: #FF7A6B;
  --aa-cat-research: #4FC3F7;

  --aa-font-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --aa-font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --aa-r-sm: 10px;
  --aa-r: 14px;
  --aa-r-lg: 20px;
  --aa-r-xl: 28px;
  --aa-shadow: 0 14px 34px rgba(11, 18, 32, 0.10);
  --aa-container: 1240px;
  --aa-gutter: clamp(16px, 4vw, 24px);
  --aa-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
.aa-body { margin: 0; background: var(--aa-bg); color: var(--aa-text); font-family: var(--aa-font-body); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.aa-body *, .aa-body *::before, .aa-body *::after { box-sizing: border-box; }
.aa-body img, .aa-body svg, .aa-body iframe { max-width: 100%; }
.aa-body img { height: auto; display: block; }
.aa-body a { color: var(--aa-accent-ink); }
.aa-body a:hover { color: #075E4F; }
.aa-body :focus-visible { outline: 3px solid var(--aa-accent); outline-offset: 2px; border-radius: 6px; }
.aa-body h1, .aa-body h2, .aa-body h3, .aa-body h4 { font-family: var(--aa-font-display); color: inherit; margin: 0; line-height: 1.3; }
.aa-body p { margin: 0; }
.aa-body ul, .aa-body ol { margin: 0; padding: 0; }
.aa-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aa-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 1000; background: var(--aa-accent); color: var(--aa-ink) !important; padding: 10px 16px; border-radius: var(--aa-r-sm); font-weight: 600; text-decoration: none; }
.aa-skip:focus { top: 12px; }
.aa-container { max-width: var(--aa-container); margin-inline: auto; padding-inline: var(--aa-gutter); }
.aa-icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- type ---------- */
.aa-eyebrow { display: block; font-size: 14px; font-weight: 600; color: var(--aa-accent-ink); margin-bottom: 8px; }
.aa-dark .aa-eyebrow { color: var(--aa-accent); }
.aa-h1 { font-weight: 700; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.25; }
.aa-h2 { font-weight: 700; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.35; }
.aa-h3 { font-weight: 600; font-size: 20px; line-height: 1.45; }
.aa-lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--aa-muted); }
.aa-dark .aa-lead { color: var(--aa-muted-on-dark); }
.aa-section-head { max-width: 700px; margin-bottom: 36px; }
.aa-section-head .aa-lead { margin-top: 12px; }
.aa-section-head--row { max-width: none; display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: flex-end; }

/* ---------- surfaces ---------- */
.aa-section { padding-block: clamp(56px, 8vw, 96px); }
.aa-section--white { background: var(--aa-surface); border-block: 1px solid var(--aa-line); }
.aa-dark { background: var(--aa-ink); color: var(--aa-text-on-dark); }
.aa-dark--glow {
  background:
    radial-gradient(55% 60% at 88% 0%, rgba(52, 211, 180, .14), transparent 62%),
    radial-gradient(45% 55% at 8% 30%, rgba(110, 123, 255, .16), transparent 60%),
    var(--aa-ink);
}

/* ---------- buttons ---------- */
.aa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--aa-r); border: 1.5px solid transparent; font-family: var(--aa-font-body); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none !important; cursor: pointer; transition: transform .15s var(--aa-ease), background-color .15s, border-color .15s, color .15s; white-space: nowrap; }
.aa-btn:active { transform: translateY(1px); }
.aa-btn--lg { min-height: 54px; padding: 14px 28px; font-size: 17px; }
.aa-btn--block { width: 100%; }
.aa-btn--accent { background: var(--aa-accent); color: var(--aa-ink) !important; }
.aa-btn--accent:hover { background: #4BE0C3; }
.aa-btn--dark { background: var(--aa-text); color: #fff !important; }
.aa-btn--dark:hover { background: #1C2638; }
.aa-btn--outline { background: var(--aa-surface); border-color: #CBD2DA; color: var(--aa-text) !important; }
.aa-btn--outline:hover { border-color: var(--aa-text); }
.aa-btn--ghost-dark { background: rgba(255, 255, 255, .04); border-color: #3A4766; color: #fff !important; }
.aa-btn--ghost-dark:hover { background: rgba(255, 255, 255, .09); }
.aa-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none !important; min-height: 44px; }
.aa-link-arrow svg { width: 16px; height: 16px; }

/* ---------- chips ---------- */
.aa-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--aa-line-2); color: var(--aa-text-2); line-height: 1.6; }
.aa-chip--accent { background: var(--aa-accent); color: var(--aa-ink); }
.aa-chip--glass { background: rgba(255, 255, 255, .06); border: 1px solid var(--aa-line-dark); color: #D9E0EC; }
.aa-level { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.aa-level--مبتدئ { background: #E7F6F2; color: #0A6B5A; }
.aa-level--متوسط { background: #EEF0FF; color: #3A44B0; }
.aa-level--متقدم { background: #F6ECFF; color: #6B3FA0; }

/* ---------- header ---------- */
.aa-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 15, 30, .92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); color: #fff; }
.admin-bar .aa-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .aa-header { top: 46px; } }
.aa-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; }
.aa-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none !important; font-family: var(--aa-font-display); font-weight: 700; font-size: 19px; white-space: nowrap; }
.aa-logo__mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, var(--aa-accent), var(--aa-glow)); display: grid; place-items: center; flex: 0 0 auto; }
.aa-logo__mark svg { width: 22px; height: 22px; }
.aa-nav { display: flex; align-items: center; gap: 4px; }
.aa-nav a { color: #D9E0EC !important; text-decoration: none !important; font-size: 15px; font-weight: 500; padding: 10px 12px; border-radius: var(--aa-r-sm); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.aa-nav a:hover, .aa-nav a[aria-current="page"] { color: #fff !important; background: rgba(255, 255, 255, .06); }
.aa-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF6B5E; box-shadow: 0 0 0 0 rgba(255, 107, 94, .6); }
.aa-live-dot.is-on { animation: aaPulse 1.6s ease-in-out infinite; }
@keyframes aaPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 107, 94, 0); } }
.aa-header__actions { display: flex; align-items: center; gap: 8px; }
.aa-icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--aa-line-dark); background: transparent; color: #D9E0EC !important; display: inline-grid; place-items: center; cursor: pointer; text-decoration: none !important; }
.aa-icon-btn:hover { background: rgba(255, 255, 255, .06); }
.aa-header__login { color: #fff !important; text-decoration: none !important; font-weight: 500; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.aa-menu-btn { display: none; }
.aa-mobile-nav { display: none; }
@media (max-width: 1020px) {
  .aa-nav, .aa-header__login, .aa-header__search { display: none; }
  .aa-menu-btn { display: inline-grid; }
  .aa-mobile-nav { border-top: 1px solid var(--aa-line-dark); padding: 12px var(--aa-gutter) 20px; }
  .aa-mobile-nav[data-open="true"] { display: block; }
  .aa-mobile-nav a { display: flex; align-items: center; gap: 10px; color: #E6EBF3 !important; text-decoration: none !important; padding: 12px 8px; min-height: 48px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-weight: 500; }
  .aa-mobile-nav .aa-btn { margin-top: 14px; }
}
@media (max-width: 420px) { .aa-header__cta { display: none; } }

/* ---------- hero ---------- */
.aa-hero { padding-block: clamp(40px, 7vw, 72px) clamp(32px, 6vw, 56px); }
.aa-hero__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.aa-hero__copy { flex: 1 1 520px; min-width: 0; }
.aa-hero__visual { flex: 1 1 420px; min-width: 0; position: relative; }
.aa-hero__badge { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #BFEFE4; border: 1px solid rgba(52, 211, 180, .35); background: rgba(52, 211, 180, .08); padding: 6px 14px; border-radius: 999px; }
.aa-hero .aa-h1 { margin: 22px 0 18px; }
.aa-hero .aa-lead { max-width: 600px; margin-bottom: 32px; }
.aa-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.aa-hero__note { margin-top: 16px; font-size: 14px; color: var(--aa-faint-on-dark); }
.aa-preview { background: var(--aa-surface-dark); border: 1px solid var(--aa-line-dark); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.aa-preview__screen { aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; background: radial-gradient(80% 80% at 80% 20%, rgba(79, 195, 247, .35), transparent 60%), linear-gradient(160deg, #0F2E44, var(--aa-ink)); }
.aa-preview__body { padding: 18px 20px 20px; }
.aa-play { width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; }
.aa-progress { height: 8px; border-radius: 99px; background: #1E2942; overflow: hidden; }
.aa-progress > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--aa-glow), var(--aa-accent)); }
.aa-float-card { position: absolute; top: -22px; inset-inline-end: -14px; max-width: 290px; background: #fff; color: var(--aa-text); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .30); display: flex; gap: 12px; align-items: flex-start; }
@media (max-width: 600px) { .aa-float-card { position: static; margin-top: 16px; max-width: none; } }

/* ---------- stats ---------- */
.aa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: #1E2942; border: 1px solid #1E2942; border-radius: 18px; overflow: hidden; margin-top: 48px; }
.aa-stat { background: var(--aa-ink-2); padding: 20px 24px; display: flex; flex-direction: column-reverse; }
.aa-stat__num { margin: 0; }
.aa-stat__num { font-family: var(--aa-font-display); font-weight: 700; font-size: 28px; color: #fff; line-height: 1.3; }
.aa-stat__label { font-size: 14px; color: var(--aa-faint-on-dark); }

/* ---------- pills / segmented ---------- */
.aa-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.aa-pill { font-family: inherit; font-size: 15px; font-weight: 500; padding: 9px 16px; min-height: 44px; border-radius: 999px; border: 1px solid #D5DAE1; background: var(--aa-surface); color: var(--aa-text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .15s, color .15s; }
.aa-pill:hover { border-color: var(--aa-text); }
.aa-pill[aria-pressed="true"] { background: var(--aa-text); border-color: var(--aa-text); color: #fff; }
.aa-pill__count { font-size: 12px; font-weight: 600; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--aa-line-2); color: var(--aa-muted); text-align: center; }
.aa-pill[aria-pressed="true"] .aa-pill__count { background: rgba(255, 255, 255, .18); color: #fff; }
.aa-seg { display: inline-flex; background: #EEF0F3; border-radius: 12px; padding: 4px; }
.aa-seg button { border: 0; background: transparent; color: var(--aa-muted); font-family: inherit; font-size: 15px; font-weight: 600; padding: 9px 18px; min-height: 44px; border-radius: 9px; cursor: pointer; }
.aa-seg button[aria-pressed="true"] { background: #fff; color: var(--aa-text); box-shadow: 0 1px 3px rgba(11, 18, 32, .12); }

/* ---------- course card ---------- */
.aa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.aa-card { display: flex; flex-direction: column; height: 100%; background: var(--aa-surface); border: 1px solid var(--aa-line); border-radius: 18px; overflow: hidden; color: var(--aa-text) !important; text-decoration: none !important; transition: transform .2s var(--aa-ease), box-shadow .2s var(--aa-ease); }
.aa-card:hover { transform: translateY(-3px); box-shadow: var(--aa-shadow); }
.aa-card[hidden] { display: none; }
.aa-thumb { --c: var(--aa-cat-ai); position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #1B2550, var(--aa-ink)); background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--c) 45%, transparent), transparent 60%), radial-gradient(90% 90% at 10% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 55%), linear-gradient(160deg, #141C33, var(--aa-ink)); }
.aa-thumb::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 32px 32px; }
.aa-thumb--ai { --c: var(--aa-cat-ai); } .aa-thumb--py { --c: var(--aa-cat-py); } .aa-thumb--ml { --c: var(--aa-cat-ml); }
.aa-thumb--dl { --c: var(--aa-cat-dl); } .aa-thumb--cyber { --c: var(--aa-cat-cyber); } .aa-thumb--research { --c: var(--aa-cat-research); }
.aa-thumb__glyph { position: relative; font-family: var(--aa-font-display); font-weight: 700; font-size: 52px; letter-spacing: 1px; color: #fff; direction: ltr; }
.aa-thumb__cat { position: absolute; top: 14px; inset-inline-start: 14px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(11, 18, 32, .55); border: 1px solid rgba(255, 255, 255, .18); padding: 4px 10px; border-radius: 999px; }
.aa-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.aa-card__title { font-family: var(--aa-font-display); font-weight: 600; font-size: 18px; line-height: 1.5; }
.aa-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--aa-muted); margin-top: auto; }
.aa-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.aa-card__meta svg { width: 16px; height: 16px; }
.aa-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--aa-line-2); font-size: 13px; color: var(--aa-muted); }
.aa-card__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--aa-accent-ink); }
.aa-card__cta svg { width: 16px; height: 16px; }
.aa-card__progress { font-size: 13px; color: var(--aa-accent-ink); font-weight: 600; }

/* ---------- paths ---------- */
.aa-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.aa-path { position: relative; overflow: hidden; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 18px; background: var(--aa-surface); border: 1px solid var(--aa-line); }
.aa-path--dark { background: var(--aa-ink); border-color: var(--aa-ink); color: #fff; }
.aa-path--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 0% 0%, rgba(79, 195, 247, .22), transparent 60%); pointer-events: none; }
.aa-path > * { position: relative; }
.aa-path__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--aa-muted); }
.aa-path--dark .aa-path__top { color: var(--aa-faint-on-dark); }
.aa-path__desc { color: var(--aa-muted); font-size: 16px; margin-top: 6px; }
.aa-path--dark .aa-path__desc { color: var(--aa-muted-on-dark); }
.aa-path__steps { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.aa-path__step { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; background: var(--aa-bg); border: 1px solid var(--aa-line-2); }
.aa-path--dark .aa-path__step { background: rgba(255, 255, 255, .03); border-color: var(--aa-line-dark); }
.aa-path__step a { color: inherit !important; text-decoration: none !important; font-size: 15px; }
.aa-path__step a:hover { text-decoration: underline !important; }
.aa-path__lvl { font-family: var(--aa-font-display); font-weight: 600; font-size: 13px; min-width: 18px; color: var(--aa-accent-ink); }
.aa-path--dark .aa-path__lvl { color: var(--aa-cat-research); }
.aa-path .aa-link-arrow { margin-top: auto; }
.aa-path--dark .aa-link-arrow { color: var(--aa-accent) !important; }

/* ---------- steps (how it works) ---------- */
.aa-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.aa-split > * { flex: 1 1 380px; min-width: 0; }
.aa-steps { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.aa-step { display: flex; gap: 16px; align-items: flex-start; }
.aa-step__n { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--aa-ink); color: var(--aa-accent); font-family: var(--aa-font-display); font-weight: 600; display: grid; place-items: center; }
.aa-step__t { display: block; font-weight: 600; }
.aa-step__d { color: var(--aa-muted); font-size: 15px; }
.aa-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.aa-feature { background: var(--aa-bg); border: 1px solid var(--aa-line); border-radius: 16px; padding: 20px; }
.aa-feature svg { width: 26px; height: 26px; color: var(--aa-accent-ink); margin-bottom: 10px; }
.aa-feature__t { font-weight: 600; margin-bottom: 4px; }
.aa-feature__d { color: var(--aa-muted); font-size: 15px; }

/* ---------- tools ---------- */
.aa-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.aa-tool { background: var(--aa-surface-dark); border: 1px solid var(--aa-line-dark); border-radius: 18px; padding: 24px; color: #fff !important; text-decoration: none !important; display: block; transition: border-color .15s; }
.aa-tool:hover { border-color: #3A4766; }
.aa-tool__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; background: rgba(52, 211, 180, .12); color: var(--aa-accent); }
.aa-tool__t { font-family: var(--aa-font-display); font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.aa-tool__d { color: var(--aa-muted-on-dark); font-size: 15px; }
.aa-tool--hero { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; background: linear-gradient(135deg, rgba(52, 211, 180, .10), rgba(110, 123, 255, .10)); border-color: #2A3756; padding: 30px; }
.aa-tool--hero > div { flex: 1 1 320px; min-width: 0; }
.aa-tool__shot { flex: 1.2 1 420px !important; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid #2A3756; background: var(--aa-ink-2); overflow: hidden; display: grid; place-items: center; }
.aa-tool__shot img { width: 100%; height: 100%; object-fit: cover; }
.aa-tool__shot-ph { color: var(--aa-faint-on-dark); padding: 20px; text-align: center; font-size: 15px; }

/* ---------- authority ---------- */
.aa-authority { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.aa-authority__photo { flex: 0 1 360px; min-width: 240px; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #E9EDF3, #DCE2EA); display: grid; place-items: center; }
.aa-authority__photo img { width: 100%; height: 100%; object-fit: cover; }
.aa-authority__initial { font-family: var(--aa-font-display); font-weight: 700; font-size: 96px; color: #B8C1CE; }
.aa-authority__copy { flex: 1 1 440px; min-width: 0; }
.aa-authority__name { font-family: var(--aa-font-display); font-weight: 600; font-size: 22px; margin-top: 18px; }
.aa-authority__title { color: var(--aa-muted); margin-bottom: 14px; }
.aa-authority__bio { color: var(--aa-text-2); max-width: 640px; }
.aa-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; max-width: 640px; margin-top: 24px; }
.aa-fact { border: 1px solid var(--aa-line); background: var(--aa-surface); border-radius: 14px; padding: 14px 16px; }
.aa-fact__n { font-family: var(--aa-font-display); font-weight: 700; font-size: 22px; }
.aa-fact__l { font-size: 14px; color: var(--aa-muted); }
.aa-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.aa-links a { font-size: 14px; padding: 6px 14px; border: 1px solid #D5DAE1; border-radius: 999px; text-decoration: none !important; color: var(--aa-text-2) !important; }

/* ---------- testimonials ---------- */
.aa-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.aa-quote { margin: 0; background: var(--aa-surface); border: 1px solid var(--aa-line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.aa-quote blockquote { margin: 0; color: var(--aa-text-2); }
.aa-quote figcaption { margin-top: auto; font-size: 14px; color: var(--aa-muted); }
.aa-quote figcaption strong { display: block; color: var(--aa-text); font-size: 16px; }

/* ---------- pricing ---------- */
.aa-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; align-items: stretch; }
.aa-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--aa-surface); border: 1px solid var(--aa-line); }
.aa-plan--free { background: var(--aa-bg); }
.aa-plan--pop { background: var(--aa-ink); color: #fff; border-color: var(--aa-ink); box-shadow: 0 20px 50px rgba(10, 15, 30, .25); }
.aa-plan__badge { position: absolute; top: -13px; inset-inline-start: 22px; font-size: 12px; font-weight: 600; color: var(--aa-ink); background: var(--aa-accent); padding: 4px 12px; border-radius: 999px; }
.aa-plan__name { font-family: var(--aa-font-display); font-weight: 600; font-size: 19px; }
.aa-plan__price { font-family: var(--aa-font-display); font-weight: 700; font-size: 38px; line-height: 1.2; }
.aa-plan__per { font-family: var(--aa-font-body); font-weight: 400; font-size: 15px; color: var(--aa-muted); }
.aa-plan--pop .aa-plan__per, .aa-plan--pop .aa-plan__note { color: var(--aa-muted-on-dark); }
.aa-plan__note { color: var(--aa-muted); font-size: 15px; }
.aa-plan .aa-btn { margin-top: auto; }
.aa-price-dzd { display: none; }
.aa-cur-dzd .aa-price-usd { display: none; }
.aa-cur-dzd .aa-price-dzd { display: inline; }
.aa-includes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; color: var(--aa-text-2); font-size: 15px; list-style: none; }
.aa-includes li { display: inline-flex; gap: 8px; align-items: center; }
.aa-includes svg { width: 18px; height: 18px; color: var(--aa-accent-ink); }

/* ---------- FAQ (native details: works without JS) ---------- */
.aa-faq { display: flex; flex-direction: column; gap: 12px; }
.aa-faq details { background: var(--aa-surface); border: 1px solid var(--aa-line); border-radius: 16px; }
.aa-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 17px; }
.aa-faq summary::-webkit-details-marker { display: none; }
.aa-faq summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--aa-muted); transition: transform .2s var(--aa-ease); }
.aa-faq details[open] summary svg { transform: rotate(180deg); }
.aa-faq__a { padding: 0 22px 20px; color: var(--aa-muted); }

/* ---------- CTA / footer ---------- */
.aa-cta { border-radius: var(--aa-r-xl); padding: clamp(40px, 6vw, 72px) 28px; text-align: center; color: #fff; background: radial-gradient(60% 90% at 50% 0%, rgba(52, 211, 180, .22), transparent 65%), radial-gradient(50% 80% at 0% 100%, rgba(110, 123, 255, .22), transparent 60%), var(--aa-ink); }
.aa-cta .aa-lead { margin: 14px auto 30px; max-width: 560px; }
.aa-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.aa-footer { background: #070B16; color: #9AA6BC; font-size: 15px; }
.aa-footer a { color: #9AA6BC !important; text-decoration: none !important; }
.aa-footer a:hover { color: #fff !important; }
.aa-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; padding-block: 64px 36px; }
.aa-footer__brand { grid-column: span 2; }
@media (max-width: 420px) { .aa-footer__brand { grid-column: auto; } }
.aa-footer__title { color: #fff; font-weight: 600; margin-bottom: 12px; display: block; }
.aa-footer__links { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.aa-footer__bottom { border-top: 1px solid #1A2338; padding-block: 20px 32px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 14px; }

/* ---------- catalogue ---------- */
.aa-page-hero { padding-block: 40px 48px; }
.aa-crumbs { font-size: 14px; color: var(--aa-faint-on-dark); margin-bottom: 14px; }
.aa-crumbs a { color: var(--aa-faint-on-dark) !important; text-decoration: none !important; }
.aa-crumbs [aria-current] { color: #D9E0EC; }
.aa-search { position: relative; max-width: 680px; margin-top: 28px; }
.aa-search svg { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--aa-faint-on-dark); pointer-events: none; }
.aa-search input { width: 100%; height: 58px; border-radius: 16px; border: 1px solid #2A3756; background: var(--aa-surface-dark); color: #fff; font-family: inherit; font-size: 17px; padding-inline: 54px 18px; }
.aa-search input::placeholder { color: var(--aa-faint-on-dark); }
.aa-catalog { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding-block: 36px 96px; }
.aa-filters { flex: 1 1 250px; max-width: 300px; position: sticky; top: 96px; }
.aa-results { flex: 999 1 600px; min-width: 0; }
.aa-filter { border-bottom: 1px solid var(--aa-line); padding-block: 16px; }
.aa-filter:first-child { padding-top: 0; }
.aa-filter legend, .aa-filter__title { font-family: var(--aa-font-display); font-weight: 600; font-size: 16px; margin-bottom: 10px; padding: 0; }
.aa-filter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.aa-check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 15px; color: var(--aa-text-2); }
.aa-check input { width: 18px; height: 18px; accent-color: var(--aa-text); margin: 0; }
.aa-check__count { margin-inline-start: auto; font-size: 13px; color: var(--aa-muted); }
.aa-results__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.aa-results__count { color: var(--aa-muted); font-size: 15px; }
.aa-results__count strong { color: var(--aa-text); }
.aa-select { font-family: inherit; font-size: 15px; height: 44px; border-radius: 12px; border: 1px solid #D5DAE1; padding-inline: 12px 32px; background: #fff; color: var(--aa-text); }
.aa-filter-toggle { display: none; }
.aa-empty { text-align: center; padding: 64px 24px; background: #fff; border: 1px dashed #D5DAE1; border-radius: 20px; }
@media (max-width: 900px) {
  .aa-filters { position: static; max-width: none; flex-basis: 100%; display: none; background: #fff; border: 1px solid var(--aa-line); border-radius: 16px; padding: 18px; }
  .aa-filters[data-open="true"] { display: block; }
  .aa-filter-toggle { display: inline-flex; }
}
.aa-member-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; list-style: none; }
.aa-member-list a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--aa-line); border-radius: 14px; color: var(--aa-text) !important; text-decoration: none !important; }
.aa-member-list span { color: var(--aa-muted); font-size: 14px; white-space: nowrap; }

/* ---------- course page ---------- */
.aa-course-hero { padding-block: 32px 64px; }
.aa-course-hero__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.aa-course-hero__copy { flex: 1 1 560px; min-width: 0; }
.aa-course-hero__media { flex: 1 1 420px; min-width: 0; }
.aa-course-hero .aa-h1 { font-size: clamp(30px, 3.6vw, 50px); margin: 16px 0 14px; }
.aa-meta { display: flex; flex-wrap: wrap; margin: 26px 0 28px; border: 1px solid var(--aa-line-dark); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.aa-meta > div { flex: 1 1 120px; padding: 13px 18px; border-inline-end: 1px solid var(--aa-line-dark); }
.aa-meta > div:last-child { border-inline-end: 0; }
.aa-meta dt { font-size: 13px; color: var(--aa-faint-on-dark); }
.aa-meta dd { margin: 0; font-weight: 600; }
.aa-lite { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--aa-line-dark); background: radial-gradient(80% 80% at 80% 15%, rgba(79, 195, 247, .4), transparent 60%), linear-gradient(160deg, #0F2E44, var(--aa-ink)); cursor: pointer; color: #fff; padding: 0; font: inherit; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.aa-lite .aa-play { position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; }
.aa-lite__label { position: absolute; inset-block-end: 14px; inset-inline-start: 16px; font-size: 13px; background: rgba(0, 0, 0, .45); padding: 4px 10px; border-radius: 8px; }
.aa-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aa-course-body { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-block: 48px 120px; }
.aa-course-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 60px; }
.aa-course-aside { flex: 1 1 320px; max-width: 400px; position: sticky; top: 96px; }
@media (max-width: 1000px) { .aa-course-aside { position: static; max-width: none; } }
.aa-anchors { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--aa-line); }
.aa-anchors a { color: var(--aa-text-2) !important; text-decoration: none !important; font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--aa-line); min-height: 44px; display: inline-flex; align-items: center; }
.aa-block-title { font-family: var(--aa-font-display); font-weight: 700; font-size: 28px; margin-bottom: 18px; }
.aa-outline { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; list-style: none; }
.aa-outline li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--aa-line); border-radius: 14px; padding: 14px 16px; }
.aa-outline svg { width: 22px; height: 22px; color: var(--aa-accent-ink); flex: 0 0 auto; margin-top: 3px; }
.aa-outline small { display: block; color: var(--aa-muted); font-size: 13px; }
.aa-skills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.aa-skills li { font-size: 15px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #D5DAE1; }
.aa-curriculum { display: flex; flex-direction: column; gap: 10px; }
.aa-curriculum details { background: #fff; border: 1px solid var(--aa-line); border-radius: 16px; overflow: hidden; }
.aa-curriculum summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; gap: 14px; align-items: center; min-height: 64px; }
.aa-curriculum summary::-webkit-details-marker { display: none; }
.aa-curriculum__n { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--aa-ink); color: var(--aa-accent); font-family: var(--aa-font-display); font-weight: 600; display: grid; place-items: center; }
.aa-curriculum__t { flex: 1; min-width: 0; }
.aa-curriculum__t strong { display: block; font-weight: 600; }
.aa-curriculum__t small { color: var(--aa-muted); font-size: 14px; }
.aa-curriculum summary > svg { width: 20px; height: 20px; color: var(--aa-muted); transition: transform .2s var(--aa-ease); flex: 0 0 auto; }
.aa-curriculum details[open] > summary > svg { transform: rotate(180deg); }
.aa-curriculum ol { list-style: none; padding: 0 20px 12px; }
.aa-curriculum ol li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--aa-line-2); font-size: 15px; }
.aa-curriculum ol li span:first-child { display: flex; gap: 10px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.aa-curriculum ol svg { width: 18px; height: 18px; color: #8D9AB2; flex: 0 0 auto; margin-top: 4px; }
.aa-curriculum__module { font-size: 13px; font-weight: 600; color: var(--aa-muted); padding: 12px 0 2px; border-top: 1px solid var(--aa-line-2); }
.aa-tag-free { font-size: 12px; font-weight: 600; color: #0A6B5A; background: #E7F6F2; padding: 2px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none !important; }
.aa-expand { background: none; border: 0; color: var(--aa-accent-ink); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.aa-enroll { background: #fff; border: 1px solid var(--aa-line); border-radius: 22px; padding: 26px; box-shadow: 0 18px 44px rgba(11, 18, 32, .08); }
.aa-enroll__price { font-family: var(--aa-font-display); font-weight: 700; font-size: 32px; line-height: 1.3; margin: 2px 0 4px; }
.aa-enroll__sub { font-size: 14px; color: var(--aa-muted); margin-bottom: 18px; }
.aa-enroll .aa-btn + .aa-btn { margin-top: 10px; }
.aa-enroll__fine { text-align: center; font-size: 13px; color: var(--aa-muted); margin: 12px 0 16px; }
.aa-enroll__list { list-style: none; border-top: 1px solid var(--aa-line-2); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.aa-enroll__list li { display: flex; gap: 10px; align-items: center; }
.aa-enroll__list svg { width: 18px; height: 18px; color: var(--aa-accent-ink); }
.aa-mine { background: var(--aa-accent-soft); border: 1px solid #BFE9DF; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; font-size: 15px; }
.aa-mine .aa-progress { background: #CDEEE6; margin-top: 8px; }
.aa-stickybar { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; background: rgba(10, 15, 30, .96); border-top: 1px solid var(--aa-line-dark); backdrop-filter: blur(8px); color: #fff; transform: translateY(110%); transition: transform .25s var(--aa-ease); }
.aa-stickybar[data-show="true"] { transform: none; }
.aa-stickybar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.aa-stickybar__t { font-family: var(--aa-font-display); font-weight: 600; font-size: 16px; }
.aa-stickybar__s { font-size: 13px; color: var(--aa-faint-on-dark); }
@media (max-width: 560px) { .aa-stickybar__s { display: none; } .aa-stickybar__t { font-size: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .aa-body *, .aa-body *::before, .aa-body *::after { transition: none !important; animation: none !important; }
  .aa-card:hover { transform: none; }
}

/* =====================================================================
 * v4.1 — simpler, image-led
 * ===================================================================== */
.aa-section { padding-block: clamp(44px, 6vw, 80px); }
.aa-section-head { margin-bottom: 26px; }

/* course card: the image first, then title and one line of facts */
.aa-card { border: 1px solid var(--aa-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 18, 32, .04); }
.aa-card__img { position: relative; display: block; aspect-ratio: 16 / 9; background: #E9EDF3; overflow: hidden; }
.aa-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--aa-ease); }
.aa-card:hover .aa-card__img img { transform: scale(1.04); }
.aa-card__img .aa-thumb { height: 100%; aspect-ratio: auto; }
.aa-card__cat { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .94); color: var(--aa-text); padding: 3px 10px; border-radius: 999px; }
.aa-card__body { padding: 14px 16px 16px; gap: 6px; }
.aa-card__title { font-size: 16.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1em; }
.aa-card__facts { font-size: 13.5px; color: var(--aa-muted); }
.aa-card__bar { display: block; height: 4px; background: var(--aa-line-2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.aa-card__bar span { display: block; height: 100%; background: var(--aa-accent); }
.aa-cards { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* home hero */
.aa-hero2 { padding-block: clamp(40px, 6vw, 72px); }
.aa-hero2__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.aa-hero2__copy { flex: 1 1 460px; min-width: 0; }
.aa-hero2__copy .aa-h1 { font-size: clamp(32px, 4vw, 54px); margin-bottom: 14px; }
.aa-hero2__copy .aa-lead { margin-bottom: 26px; max-width: 520px; }
.aa-hero-search { display: flex; gap: 8px; max-width: 560px; background: #fff; border-radius: 16px; padding: 6px; margin-bottom: 18px; }
.aa-hero-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 0 14px; color: var(--aa-text); background: transparent; }
.aa-hero-search .aa-btn { min-height: 46px; }
.aa-hero2 .aa-hero__ctas { margin-bottom: 26px; }
.aa-inline-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--aa-faint-on-dark); font-size: 15px; list-style: none; }
.aa-inline-stats strong { color: #fff; font-family: var(--aa-font-display); font-weight: 600; }
.aa-mosaic { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 24px; }
.aa-mosaic a { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--aa-surface-dark); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.aa-mosaic a:nth-child(even) { transform: translateY(24px); }
.aa-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--aa-ease); }
.aa-mosaic a:hover img { transform: scale(1.05); }
.aa-mosaic span { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(10, 15, 30, .88), transparent); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; }
@media (max-width: 560px) { .aa-mosaic a:nth-child(even) { transform: none; } .aa-mosaic { padding-bottom: 0; } }

/* category tiles */
.aa-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.aa-cat { --c: var(--aa-cat-ai); display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--aa-line); border-radius: 14px; color: var(--aa-text) !important; text-decoration: none !important; font-weight: 600; transition: border-color .15s, transform .15s; }
.aa-cat:hover { border-color: var(--c); transform: translateY(-2px); }
.aa-cat__ic { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: #F2F4F7; background: color-mix(in srgb, var(--c) 13%, #fff); }
.aa-cat small { display: block; font-weight: 400; font-size: 13px; color: var(--aa-muted); }
.aa-cat--ai { --c: #4F5BEA; } .aa-cat--py { --c: #2F6FD6; } .aa-cat--ml { --c: #0A8F78; } .aa-cat--dl { --c: #7C4DDB; } .aa-cat--cyber { --c: #D9503F; } .aa-cat--research { --c: #0B87BF; }

/* paths, compact */
.aa-paths2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.aa-path2 { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--aa-line); color: var(--aa-text) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.aa-path2:hover { border-color: #C9D0D9; box-shadow: var(--aa-shadow); }
.aa-path2--main { background: var(--aa-ink); border-color: var(--aa-ink); color: #fff !important; }
.aa-path2__t { font-family: var(--aa-font-display); font-weight: 700; font-size: 20px; }
.aa-path2__d { font-size: 15px; color: var(--aa-muted); }
.aa-path2--main .aa-path2__d { color: var(--aa-muted-on-dark); }
.aa-stack { display: flex; }
.aa-stack img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 2px solid #fff; background: #E9EDF3; }
.aa-path2--main .aa-stack img { border-color: var(--aa-ink); }
.aa-stack img + img { margin-inline-start: -12px; }
.aa-path2__foot { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--aa-muted); margin-top: auto; }
.aa-path2--main .aa-path2__foot { color: var(--aa-faint-on-dark); }
.aa-path2__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--aa-accent-ink); }
.aa-path2--main .aa-path2__go { color: var(--aa-accent); }
.aa-path2__go svg { width: 16px; height: 16px; }

/* tools, compact */
.aa-tools .aa-tool { padding: 20px; }
.aa-tool__t { font-size: 17px; }
.aa-tool__d { font-size: 14px; }

/* course page, compact hero with the course image */
.aa-course-hero { padding-block: 28px 56px; }
.aa-course-hero .aa-h1 { font-size: clamp(28px, 3.2vw, 44px); margin: 14px 0 10px; }
.aa-facts-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 26px; color: var(--aa-muted-on-dark); font-size: 15px; list-style: none; }
.aa-facts-row li { display: inline-flex; align-items: center; gap: 8px; }
.aa-facts-row svg { width: 18px; height: 18px; color: var(--aa-accent); }
.aa-lite--img { background-size: cover; background-position: center; }
.aa-lite--img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 15, 30, .55), rgba(10, 15, 30, .05) 60%); }
.aa-lite--img .aa-play { background: rgba(10, 15, 30, .55); border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(4px); }
.aa-course-body { padding-block: 40px 110px; }
.aa-course-main { gap: 48px; }
.aa-enroll { padding: 22px; }

/* v4.1 fixes: list resets in .aa-body must not cancel component spacing */
.aa-body .aa-facts-row { margin: 18px 0 28px; }
.aa-body .aa-includes { margin-top: 24px; }
.aa-phone { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* mobile: swipeable course rows instead of a long column of cards */
@media (max-width: 640px) {
  .aa-cards--scroll { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--aa-gutter) * -1); padding-inline: var(--aa-gutter); scrollbar-width: none; }
  .aa-cards--scroll::-webkit-scrollbar { display: none; }
  .aa-cards--scroll > * { scroll-snap-align: start; }
  .aa-cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aa-cat { padding: 12px; gap: 10px; font-size: 15px; }
  .aa-cat__ic { flex-basis: 36px; height: 36px; }
}
@media (max-width: 640px) {
  .aa-tools { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aa-tools .aa-tool { padding: 14px; }
  .aa-tools .aa-tool__icon { width: 38px; height: 38px; margin-bottom: 10px; }
  .aa-tools .aa-tool__d { display: none; }
}

/* =====================================================================
 * v4.2 — the remaining pages: auth, account, about, contact, tools
 * ===================================================================== */

/* ---------- forms ---------- */
.aa-field { display: block; margin-bottom: 16px; }
.aa-field__l { display: block; font-size: 14px; font-weight: 600; color: var(--aa-text-2); margin-bottom: 6px; }
.aa-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aa-field__row a { font-size: 14px; font-weight: 500; }
.aa-input { width: 100%; height: 50px; border: 1px solid #CBD2DA; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 16px; background: #fff; color: var(--aa-text); transition: border-color .15s, box-shadow .15s; }
.aa-input::placeholder { color: #8A94A6; }
.aa-input:focus { outline: none; border-color: var(--aa-text); box-shadow: 0 0 0 3px rgba(52, 211, 180, .35); }
textarea.aa-input { height: auto; min-height: 150px; padding: 12px 14px; resize: vertical; line-height: 1.7; }
select.aa-input { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: left 14px center; }
.aa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .aa-row2 { grid-template-columns: 1fr; } }
.aa-check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--aa-text-2); cursor: pointer; min-height: 44px; }
.aa-check-inline input { width: 18px; height: 18px; accent-color: var(--aa-text); margin: 0; }
.aa-alert { padding: 12px 14px; border-radius: 12px; font-size: 15px; margin-bottom: 18px; line-height: 1.7; }
.aa-alert--error { background: #FEF1F0; color: #A3271B; border: 1px solid #F7C8C2; }
.aa-alert--ok { background: var(--aa-accent-soft); color: #0A5C4E; border: 1px solid #BFE9DF; }
.aa-body .aa-alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.aa-choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.aa-choice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid #D5DAE1; border-radius: 14px; cursor: pointer; background: #fff; transition: border-color .15s, background-color .15s; }
.aa-choice input { width: 18px; height: 18px; accent-color: var(--aa-text); margin: 0; flex: 0 0 auto; }
.aa-choice:hover { border-color: #9AA5B4; }
.aa-choice:has(input:checked) { border-color: var(--aa-text); background: var(--aa-bg); }
.aa-choice__t { display: block; font-weight: 600; font-size: 15.5px; }
.aa-choice__d { display: block; font-size: 13.5px; color: var(--aa-muted); }
.aa-btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- auth (login / signup) ---------- */
.aa-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: #fff; }
.aa-auth__side { display: flex; flex-direction: column; padding: 22px clamp(20px, 5vw, 56px) 32px; min-width: 0; }
.aa-auth__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.aa-auth__top .aa-logo { color: var(--aa-text) !important; }
.aa-auth__top .aa-link-arrow { font-size: 15px; color: var(--aa-muted) !important; }
.aa-auth__box { width: 100%; max-width: 420px; margin: auto; padding-block: 40px; }
.aa-auth__box .aa-h2 { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 6px; }
.aa-auth__sub { color: var(--aa-muted); margin-bottom: 26px; }
.aa-auth__alt { text-align: center; margin-top: 22px; color: var(--aa-muted); font-size: 15px; }
.aa-auth__alt a { font-weight: 600; }
.aa-auth__fine { text-align: center; font-size: 13px; color: var(--aa-muted); margin-top: 12px; }
.aa-auth__foot { font-size: 13px; color: var(--aa-muted); display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.aa-auth__foot a { color: var(--aa-muted) !important; text-decoration: none !important; }
.aa-auth__visual { position: relative; overflow: hidden; background: var(--aa-ink); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(32px, 4vw, 56px); }
.aa-auth__wall { position: absolute; inset: -8% -12%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; transform: rotate(-8deg); opacity: .62; }
.aa-auth__wall img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.aa-auth__wall img:nth-child(3n+2) { transform: translateY(40px); }
.aa-auth__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--aa-ink) 18%, rgba(10, 15, 30, .55) 55%, rgba(10, 15, 30, .15)); }
.aa-auth__pitch { position: relative; z-index: 1; max-width: 460px; }
.aa-auth__pitch .aa-h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 18px; }
.aa-ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.aa-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.aa-ticks svg { width: 20px; height: 20px; color: var(--aa-accent); margin-top: 4px; flex: 0 0 auto; }
.aa-ticks--light svg { color: var(--aa-accent-ink); }
.aa-auth__plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--aa-ink); color: #fff; margin-bottom: 22px; }
.aa-auth__plan strong { font-family: var(--aa-font-display); font-weight: 600; }
.aa-auth__plan small { display: block; color: var(--aa-muted-on-dark); font-size: 13px; }
.aa-auth__plan a { color: var(--aa-accent) !important; font-size: 14px; font-weight: 600; white-space: nowrap; }
.aa-auth__plan--free { background: var(--aa-accent-soft); color: var(--aa-text); border: 1px solid #BFE9DF; }
.aa-auth__plan--free small { color: var(--aa-muted); }
.aa-auth__plan--free a { color: var(--aa-accent-ink) !important; }
@media (max-width: 900px) {
  .aa-auth { grid-template-columns: 1fr; }
  .aa-auth__visual { display: none; }
  .aa-auth__box { padding-block: 28px; }
}

/* ---------- page hero (short, dark) ---------- */
.aa-hero3 { padding-block: clamp(40px, 6vw, 72px); }
.aa-hero3 .aa-h1 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 12px; }
.aa-hero3 .aa-lead { max-width: 620px; }
.aa-hero3__grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.aa-hero3__grid > :first-child { flex: 1 1 440px; min-width: 0; }

/* ---------- account ---------- */
.aa-acc-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.aa-avatar { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(140deg, var(--aa-accent), var(--aa-glow)); color: var(--aa-ink); font-family: var(--aa-font-display); font-weight: 700; font-size: 28px; }
.aa-acc-hero .aa-h1 { font-size: clamp(26px, 3vw, 38px); margin: 0; }
.aa-acc-hero p { color: var(--aa-muted-on-dark); font-size: 15px; }
.aa-acc-hero__actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.aa-acc { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.aa-acc__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.aa-acc__aside { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 960px) { .aa-acc__aside { max-width: none; } }
.aa-panel { background: #fff; border: 1px solid var(--aa-line); border-radius: 18px; padding: 22px; }
.aa-panel__t { font-family: var(--aa-font-display); font-weight: 600; font-size: 18px; margin-bottom: 14px; }
.aa-member { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-block: 12px; border-top: 1px solid var(--aa-line-2); }
.aa-member:first-of-type { border-top: 0; padding-top: 0; }
.aa-member strong { display: block; font-weight: 600; }
.aa-member small { color: var(--aa-muted); font-size: 14px; }
.aa-badge { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.aa-badge--ok { background: var(--aa-accent-soft); color: #0A6B5A; }
.aa-badge--off { background: #FEF1F0; color: #A3271B; }
.aa-panel .aa-btn { margin-top: 14px; }
.aa-panel__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: 15px; text-decoration: none !important; min-height: 40px; }
.aa-panel__link svg { width: 18px; height: 18px; }
.aa-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.aa-empty-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; background: #fff; border: 1px dashed #CBD2DA; border-radius: 16px; color: var(--aa-muted); }
.aa-block-title--sm { font-size: 22px; margin-bottom: 16px; }

/* ---------- about ---------- */
.aa-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; list-style: none; counter-reset: none; }
.aa-timeline li { position: relative; background: #fff; border: 1px solid var(--aa-line); border-radius: 16px; padding: 18px; }
.aa-timeline__y { font-family: var(--aa-font-display); font-weight: 700; font-size: 15px; color: var(--aa-accent-ink); }
.aa-timeline__t { display: block; font-weight: 600; margin: 4px 0 2px; }
.aa-timeline__d { font-size: 14px; color: var(--aa-muted); line-height: 1.6; }
.aa-story { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.aa-story__copy { flex: 1 1 440px; min-width: 0; }
.aa-story__copy p { color: var(--aa-text-2); margin-top: 14px; max-width: 620px; }
.aa-story .aa-facts { flex: 1 1 340px; margin-top: 0; }

/* ---------- contact ---------- */
.aa-contact { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.aa-contact__side { flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.aa-contact__form { flex: 999 1 520px; min-width: 0; }
@media (max-width: 900px) { .aa-contact__side { max-width: none; } }
.aa-channel { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--aa-line); border-radius: 16px; color: var(--aa-text) !important; text-decoration: none !important; transition: border-color .15s; }
a.aa-channel:hover { border-color: #9AA5B4; }
.aa-channel__ic { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--aa-bg); color: var(--aa-text-2); }
.aa-channel--wa .aa-channel__ic { background: #DFF7EE; color: #0A7D52; }
.aa-channel strong { display: block; font-weight: 600; }
.aa-channel small { display: block; color: var(--aa-muted); font-size: 14px; overflow-wrap: anywhere; }
.aa-channel__go { margin-inline-start: auto; color: var(--aa-muted); }
.aa-channel__go svg { width: 18px; height: 18px; }
.aa-social { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.aa-social a { font-size: 14px; padding: 6px 14px; border: 1px solid #D5DAE1; border-radius: 999px; text-decoration: none !important; color: var(--aa-text-2) !important; background: #fff; }
.aa-form-card { background: #fff; border: 1px solid var(--aa-line); border-radius: 20px; padding: clamp(20px, 3vw, 32px); }
.aa-form-card .aa-block-title { font-size: 24px; margin-bottom: 4px; }
.aa-form-card__sub { color: var(--aa-muted); margin-bottom: 22px; font-size: 15px; }
.aa-sent { text-align: center; padding: 28px 8px; }
.aa-sent__ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--aa-accent-soft); color: var(--aa-accent-ink); }
.aa-sent__ic svg { width: 30px; height: 30px; }
.aa-sent p { color: var(--aa-muted); margin-top: 6px; }

/* ---------- tools ---------- */
.aa-feature-tool { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.aa-feature-tool__copy { flex: 1 1 380px; min-width: 0; }
.aa-feature-tool__copy .aa-h2 { margin: 12px 0 10px; }
.aa-feature-tool__copy .aa-lead { margin-bottom: 20px; }
.aa-feature-tool__copy .aa-ticks { margin-bottom: 26px; }
.aa-feature-tool__visual { flex: 1.15 1 440px; min-width: 0; }
.aa-browser { border-radius: 18px; overflow: hidden; background: var(--aa-ink); border: 1px solid var(--aa-line-dark); box-shadow: 0 30px 70px rgba(10, 15, 30, .25); }
.aa-browser__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #141C31; border-bottom: 1px solid var(--aa-line-dark); }
.aa-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2C3752; }
.aa-browser__url { margin-inline-start: 10px; flex: 1; font-size: 12.5px; color: var(--aa-faint-on-dark); background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 4px 12px; direction: ltr; text-align: left; }
.aa-browser__screen { aspect-ratio: 16 / 10; position: relative; }
.aa-browser__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.aa-browser__mock { position: absolute; inset: 0; padding: clamp(18px, 3vw, 30px); display: flex; flex-direction: column; justify-content: center; gap: 12px; background: radial-gradient(70% 70% at 85% 10%, rgba(52, 211, 180, .16), transparent 60%), radial-gradient(60% 60% at 10% 90%, rgba(110, 123, 255, .18), transparent 60%); }
.aa-mock-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--aa-line-dark); color: #fff; }
.aa-mock-step b { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(52, 211, 180, .14); color: var(--aa-accent); font-family: var(--aa-font-display); font-weight: 600; }
.aa-mock-step span { font-weight: 600; font-size: 15.5px; }
.aa-mock-step small { display: block; color: var(--aa-faint-on-dark); font-size: 13px; font-weight: 400; }
.aa-mock-step--on { border-color: rgba(52, 211, 180, .5); background: rgba(52, 211, 180, .08); }
.aa-tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.aa-tool-card { --c: var(--aa-cat-ai); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--aa-line); border-radius: 18px; overflow: hidden; }
.aa-tool-card__top { position: relative; aspect-ratio: 16 / 7; display: grid; place-items: center; color: #fff; background: radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--c) 60%, transparent), transparent 65%), linear-gradient(160deg, #141C33, var(--aa-ink)); }
.aa-tool-card__top::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; }
.aa-tool-card__top svg { position: relative; width: 46px; height: 46px; stroke-width: 1.5; }
.aa-tool-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.aa-tool-card__t { font-family: var(--aa-font-display); font-weight: 600; font-size: 19px; }
.aa-tool-card__d { color: var(--aa-muted); font-size: 15px; }
.aa-tool-card .aa-ticks { font-size: 15px; gap: 6px; margin-bottom: 6px; }
.aa-tool-card .aa-ticks svg { width: 18px; height: 18px; margin-top: 4px; }
.aa-tool-card .aa-link-arrow { margin-top: auto; }
.aa-tool-card--rh { --c: var(--aa-cat-research); } .aa-tool-card--rpa { --c: var(--aa-cat-ai); } .aa-tool-card--lab { --c: var(--aa-cat-dl); } .aa-tool-card--lib { --c: var(--aa-cat-ml); }
.aa-body .aa-auth__sub { margin-bottom: 26px; }
.aa-body .aa-auth__alt { margin-top: 22px; }
.aa-body .aa-auth__fine { margin-top: 12px; }
.aa-body .aa-form-card__sub { margin-bottom: 22px; }
/* headings: `.aa-body h2 { margin: 0 }` outranks single-class margins */
.aa-body .aa-block-title { margin-bottom: 18px; }
.aa-body .aa-block-title--sm { margin-bottom: 16px; }
.aa-body .aa-form-card .aa-block-title { margin-bottom: 4px; }
.aa-body .aa-panel__t { margin-bottom: 14px; }
.aa-cta .aa-lead { color: var(--aa-muted-on-dark); }
.aa-contact__side { flex-basis: 340px; }
.aa-channel small[dir="ltr"] { overflow-wrap: normal; word-break: normal; text-align: end; }
@media (max-width: 640px) {
  .aa-browser__screen { aspect-ratio: auto; }
  .aa-browser__mock { position: static; }
  .aa-tool-card__top { aspect-ratio: 16 / 5; }
  .aa-tool-card__top svg { width: 38px; height: 38px; }
  .aa-acc-hero__actions { margin-inline-start: 0; width: 100%; }
}

/* =====================================================================
 * v4.4 — the shared header and footer on pages outside the new design
 * (tools, help, library, plain pages). Those pages keep their own CSS,
 * so the header and footer carry everything they need themselves.
 * ===================================================================== */
.aa-header, .aa-footer { font-family: var(--aa-font-body); line-height: 1.6; direction: rtl; text-align: right; -webkit-font-smoothing: antialiased; }
.aa-header *, .aa-header *::before, .aa-header *::after,
.aa-footer *, .aa-footer *::before, .aa-footer *::after { box-sizing: border-box; }
.aa-header ul, .aa-footer ul { margin: 0; padding: 0; list-style: none; }
.aa-header svg, .aa-footer svg { display: inline-block; max-width: none; }
.aa-footer { font-size: 15px; }
.aa-footer p { margin: 14px 0 16px; max-width: 380px; }
body:not(.aa-body) .aa-skip { position: absolute; }
/* the old inner pages left room for a fixed bar; the new header sits in the flow */
body:not(.aa-body) .page-hero { padding-top: 64px; }
.aa-story .aa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }