/* ============================================================================
   aarti-site.css — CA Aarti Lahoti storefront skin.

   This is a 1:1 port of the approved HTML mockup (CA_Aarti_Lahoti_Final_V4).
   Every class is prefixed `al-` so it can never collide with app.css,
   client-theme.css, blocks.css or MudBlazor.

   Loaded from index.html AFTER css/client-theme.css.
   Structure mirrors the mockup section-for-section so the two stay diffable.
   ========================================================================== */

/* ═══ TOKENS (mockup :root, namespaced) ═══ */
:root {
    --al-nv: #0a1f5c;   /* navy               */
    --al-nd: #061240;   /* navy deep (footer) */
    --al-bl: #1a4fd4;   /* blue               */
    --al-bll: #3b6eea;
    --al-gr: #1aab4a;   /* green              */
    --al-grl: #22c55e;
    --al-grd: #0d8a38;
    --al-w: #fff;
    --al-of: #f5f7fb;
    --al-g50: #f8fafc;
    --al-g1: #e2e8f0;
    --al-g2: #cbd5e1;
    --al-g4: #94a3b8;
    --al-g5: #64748b;
    --al-g6: #475569;
    --al-g7: #334155;
    --al-r: 14px;
    --al-s: 0 2px 16px rgba(10, 31, 92, .06);
    --al-sl: 0 10px 32px rgba(10, 31, 92, .1);
    --al-t: all .3s ease;
    --al-f: 'Plus Jakarta Sans', system-ui, sans-serif;
    --al-nav-h: 64px;
}

/* Body font — the mockup is Plus Jakarta Sans end to end. */
body {
    font-family: var(--al-f);
}

.al-mx  { max-width: 1300px; margin: 0 auto; padding: 0 28px; }
.al-sec { padding: 72px 28px; }
.al-page { color: #1e293b; }
.al-page img { max-width: 100%; display: block; }
.al-page ul { list-style: none; margin: 0; padding: 0; }
/* Links inside page content.
   `color: inherit` used to be on the bare `.al-page a` selector — specificity
   (0,1,1) — which quietly beat every button class (`.al-btn-n`, `.al-btn-g`,
   `.al-btn-o`, all 0,1,0). Any button rendered as an <a> therefore inherited
   its parent's text colour instead of its own: white-on-navy CTAs came out
   dark-on-navy and were nearly unreadable. Scoping it to unclassed anchors
   keeps the "plain links look like text" behaviour without hijacking
   components. */
.al-page a { text-decoration: none; }
.al-page a:not([class]) { color: inherit; }

/* Belt and braces: anchors carrying a button class always win on colour. */
.al-page a.al-btn-g, a.al-btn-g { color: var(--al-w); }
.al-page a.al-btn-n, a.al-btn-n { color: var(--al-w); }
.al-page a.al-btn-o, a.al-btn-o { color: var(--al-nv); }
.al-page a.al-btn-o:hover, a.al-btn-o:hover { color: var(--al-w); }
.al-page a.al-n-btn, a.al-n-btn { color: var(--al-w); }
.al-page a.al-n-btn.ghost, a.al-n-btn.ghost { color: var(--al-nv); }
.al-page a.al-n-btn.ghost:hover, a.al-n-btn.ghost:hover { color: var(--al-w); }

/* ═══ NAV ═══ */
.al-nav {
    position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1100;
    /* Opaque, not rgba(...,.97) + backdrop blur. With a translucent bar, page
       content scrolling underneath bled through and the blur left visible
       seams at the edges. The bar sits above ALL page content (z-index 1100 >
       the WhatsApp FAB's 900) so cards can never paint over it. */
    background: var(--al-w);
    border-bottom: 1px solid var(--al-g1);
    box-shadow: 0 1px 12px rgba(10, 31, 92, .05);
}
.al-nav-i {
    max-width: 1300px; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--al-nav-h);
}
.al-nav-l { cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.al-nav-l img { height: 40px; width: auto; object-fit: contain; }
/* Links sit hard against the Login button on the right, as in the mockup —
   without margin-left:auto, space-between would centre them. */
.al-nks { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.al-na {
    padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--al-g6);
    border-radius: 8px; cursor: pointer; transition: var(--al-t); white-space: nowrap;
}
.al-na:hover, .al-na.on { color: var(--al-gr); background: var(--al-g50); }

/* Dropdown nav items — the mockup shows a ▾ caret on Courses and Demo Lectures.
   The caret is decorative there; here it opens a real hover menu, which is
   where the feature-gated sections (webinars / blog / calculators) live so the
   top-level bar stays exactly the five links the mockup specifies. */
.al-nk { position: relative; display: flex; align-items: center; }
.al-na.dd::after { content: '\25BE'; margin-left: 4px; font-size: 9px; }
.al-dd-menu {
    position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--al-w);
    border: 1px solid var(--al-g1); border-radius: 10px; box-shadow: var(--al-sl);
    padding: 6px; z-index: 1101; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.al-nk:hover .al-dd-menu, .al-nk:focus-within .al-dd-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.al-dd-menu a {
    display: block; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
    color: var(--al-g6); border-radius: 7px; white-space: nowrap;
}
.al-dd-menu a:hover { background: var(--al-g50); color: var(--al-gr); }

/* Profile menu — My Courses / Affiliate / Admin / Logout live here so the
   signed-in header keeps the mockup's shape instead of growing extra links. */
.al-pf { position: relative; }
.al-pf-menu {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px;
    background: var(--al-w); border: 1px solid var(--al-g1); border-radius: 12px;
    box-shadow: var(--al-sl); padding: 6px; z-index: 1101;
}
.al-pf-menu a, .al-pf-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px;
    font-size: 13px; font-weight: 600; color: var(--al-g6); border-radius: 8px;
    background: none; border: none; cursor: pointer; font-family: var(--al-f); text-align: left;
}
.al-pf-menu a:hover, .al-pf-menu button:hover { background: var(--al-g50); color: var(--al-gr); }
.al-pf-menu i { width: 15px; font-size: 12px; }
.al-pf-sep { height: 1px; background: var(--al-g1); margin: 5px 2px; }
.al-pf-overlay { position: fixed; inset: 0; z-index: 999; }

.al-n-btn {
    padding: 8px 20px; background: var(--al-nv); color: var(--al-w);
    font-size: 12px; font-weight: 700; border-radius: 8px; border: none;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: var(--al-t); font-family: var(--al-f); white-space: nowrap;
}
.al-n-btn:hover { background: var(--al-bl); color: var(--al-w); }
.al-n-btn svg { width: 14px; height: 14px; }
.al-n-btn.ghost { background: transparent; color: var(--al-nv); border: 1.5px solid var(--al-g1); }
.al-n-btn.ghost:hover { background: var(--al-nv); color: var(--al-w); border-color: var(--al-nv); }

/* header icon actions (cart / bell / profile) */
.al-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 14px; }
.al-ic-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--al-g1);
    background: var(--al-w); color: var(--al-nv); display: flex; align-items: center;
    justify-content: center; font-size: 14px; position: relative; transition: var(--al-t);
    flex-shrink: 0;
}
.al-ic-btn:hover { background: var(--al-nv); color: var(--al-w); border-color: var(--al-nv); }
.al-ic-badge {
    position: absolute; top: -6px; right: -6px; background: var(--al-gr); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.al-ham {
    display: none; flex-direction: column; gap: 5px; cursor: pointer;
    background: none; border: none; padding: 6px;
}
.al-ham span { width: 22px; height: 2px; background: var(--al-nv); border-radius: 2px; }

/* ═══ BUTTONS ═══ */
.al-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 26px; border-radius: 10px; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: var(--al-t); border: none; font-family: var(--al-f);
}
.al-btn-g { background: var(--al-gr); color: var(--al-w); }
.al-btn-g:hover { background: var(--al-grd); color: var(--al-w); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26, 171, 74, .2); }
.al-btn-n { background: var(--al-nv); color: var(--al-w); }
.al-btn-n:hover { background: var(--al-bl); color: var(--al-w); transform: translateY(-2px); }
.al-btn-o { background: transparent; color: var(--al-nv); border: 2px solid var(--al-nv); }
.al-btn-o:hover { background: var(--al-nv); color: var(--al-w); }
.al-btn svg { width: 16px; height: 16px; }
.al-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ═══ BANNER SLIDER ═══ */
.al-bw { position: relative; overflow: hidden; width: 100%; line-height: 0; }
.al-bt {
    display: flex; flex-wrap: nowrap; width: 100%;
    transition: transform .6s ease; will-change: transform;
}
.al-bs { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 100%; }
.al-bs img { width: 100%; height: auto; display: block; }
.al-bd {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 10;
}
.al-dot {
    width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .5);
    border: none; cursor: pointer; padding: 0; transition: var(--al-t);
}
.al-dot.on { background: var(--al-w); width: 28px; border-radius: 5px; }

/* ═══ TRUST BAR ═══ */
.al-tbar { background: var(--al-nv); }
.al-tbar-i { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.al-ti {
    padding: 14px 20px; display: flex; align-items: center; gap: 12px;
    border-right: 1px solid rgba(255, 255, 255, .08); color: var(--al-w);
}
.al-ti:last-child { border-right: none; }
.al-ti-c {
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.al-ti-c svg { width: 16px; height: 16px; }
.al-ti strong { font-size: 12px; display: block; line-height: 1.3; }
.al-ti .al-sub { font-size: 10px; color: var(--al-grl); }

/* ═══ FEATURES ═══ */
.al-feat {
    display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--al-g1);
    border-radius: var(--al-r); overflow: hidden; box-shadow: var(--al-s); background: var(--al-w);
}
.al-feat-i { padding: 24px 18px; text-align: center; border-right: 1px solid var(--al-g1); }
.al-feat-i:last-child { border-right: none; }
.al-feat-ic {
    width: 44px; height: 44px; background: var(--al-of); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
}
.al-feat-ic svg { width: 20px; height: 20px; color: var(--al-nv); }
.al-feat-i h4 { font-size: 13px; font-weight: 700; color: var(--al-nv); margin: 0 0 4px; }
.al-feat-i p { font-size: 11px; color: var(--al-g5); line-height: 1.4; margin: 0; }

/* ═══ SECTION HEADINGS ═══ */
.al-h2 { font-size: 28px; font-weight: 800; color: var(--al-nv); text-align: center; margin: 0 0 4px; }
.al-h2-sm { font-size: 20px; font-weight: 800; color: var(--al-nv); text-align: center; margin: 0; }
.al-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--al-gr); margin: 0 0 5px;
}

/* ═══ COURSE CARDS ═══ */
.al-cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.al-cc-card {
    border-radius: var(--al-r); overflow: hidden; box-shadow: var(--al-s);
    border: 1px solid var(--al-g1); transition: var(--al-t); cursor: pointer; background: var(--al-w);
}
.al-cc-card:hover { transform: translateY(-5px); box-shadow: var(--al-sl); }
.al-cc-card img { width: 100%; height: auto; display: block; }
.al-cc-ph {
    aspect-ratio: 408 / 242; background: linear-gradient(135deg, var(--al-nv), var(--al-bl));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px; color: #fff;
}
.al-cc-ph h4 { font-size: 22px; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.al-cc-ph span { font-size: 12px; color: rgba(255, 255, 255, .7); }
.al-cc-meta { padding: 14px 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.al-cc-meta h4 { font-size: 15px; font-weight: 700; color: var(--al-nv); margin: 0 0 2px; }
.al-cc-meta p { font-size: 11px; color: var(--al-g5); margin: 0; }
.al-cc-price { font-size: 17px; font-weight: 800; color: var(--al-gr); white-space: nowrap; }
.al-cc-price s { font-size: 12px; color: var(--al-g4); font-weight: 500; margin-left: 5px; }

/* ═══ WHY SECTION ═══ */
.al-why { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 32px; text-align: center; }
.al-why-i {
    padding: 22px 14px; background: var(--al-w); border-radius: var(--al-r);
    box-shadow: var(--al-s); border: 1px solid var(--al-g1); transition: var(--al-t);
}
.al-why-i:hover { transform: translateY(-4px); box-shadow: var(--al-sl); }
.al-why-ic {
    width: 42px; height: 42px; background: var(--al-of); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
}
.al-why-ic svg { width: 20px; height: 20px; color: var(--al-nv); }
.al-why-i h4 { font-size: 12px; font-weight: 700; color: var(--al-nv); margin: 0 0 3px; }
.al-why-i p { font-size: 10px; color: var(--al-g5); line-height: 1.3; margin: 0; }

/* ═══ TESTIMONIALS ═══ */
.al-tst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.al-tst-c {
    background: var(--al-w); padding: 24px; border-radius: var(--al-r);
    box-shadow: var(--al-s); border: 1px solid var(--al-g1); transition: var(--al-t);
}
.al-tst-c:hover { box-shadow: var(--al-sl); }
.al-tst-q { font-size: 24px; color: var(--al-nv); font-weight: 800; margin-bottom: 6px; line-height: 1; }
.al-tst-t { font-size: 13px; color: var(--al-g5); line-height: 1.6; font-style: italic; margin: 0 0 14px; }
.al-tst-a { display: flex; align-items: center; gap: 10px; }
.al-tst-av {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 14px; color: var(--al-w);
    flex-shrink: 0; overflow: hidden;
}
.al-tst-av img { width: 100%; height: 100%; object-fit: cover; }
.al-tst-n { font-weight: 700; font-size: 13px; color: var(--al-nv); }
.al-tst-r { font-size: 10px; color: var(--al-g4); }

/* ═══ ABOUT STATS STRIP ═══ */
.al-stats { background: var(--al-nv); padding: 26px 28px; }
.al-stats-i {
    max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px; text-align: center; color: var(--al-w);
}
.al-stats-n { font-size: 30px; font-weight: 800; color: var(--al-grl); }
.al-stats-l { font-size: 10px; opacity: .7; margin-top: 2px; }

/* ═══ COURSE DETAIL PAGE ═══ */
.al-cpg-bc { padding: 12px 28px; background: var(--al-g50); font-size: 12px; color: var(--al-g5); }
.al-cpg-bc a { color: var(--al-bl); font-weight: 600; }
.al-cpg-bc span.sep { margin: 0 5px; opacity: .4; }
.al-cpg-hero { background: var(--al-of); padding: 40px 28px 48px; }
.al-cpg-hero .al-mx { display: grid; grid-template-columns: 1.4fr .6fr; gap: 44px; align-items: start; }
.al-cpg-hero h1 {
    font-size: 52px; font-weight: 900; color: var(--al-nv); line-height: .95;
    letter-spacing: -1.5px; margin: 0 0 4px;
}
.al-cpg-tag {
    display: inline-block; background: var(--al-gr); color: var(--al-w); padding: 4px 12px;
    border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 10px;
}
.al-cpg-bat { font-size: 20px; font-weight: 700; color: var(--al-nv); }
.al-cpg-by {
    font-size: 15px; color: var(--al-bl); font-weight: 600; margin: 8px 0;
    background: rgba(26, 79, 212, .07); display: inline-block; padding: 4px 12px; border-radius: 6px;
}
.al-cpg-tgl { font-size: 14px; font-weight: 600; color: var(--al-nv); font-style: italic; margin: 10px 0; }
.al-cpg-dsc { font-size: 14px; color: var(--al-g5); line-height: 1.7; margin-bottom: 24px; max-width: 520px; }
.al-cpg-stats { display: flex; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.al-cpg-stat {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--al-w);
    border-radius: 10px; border: 1px solid var(--al-g1);
}
.al-cpg-stat svg { width: 18px; height: 18px; min-width: 18px; color: var(--al-nv); }
.al-cpg-stat strong { font-size: 15px; color: var(--al-nv); }
.al-cpg-stat span { font-size: 10px; color: var(--al-g5); }

/* Product (buy) card */
.al-prd {
    border-radius: var(--al-r); overflow: hidden; box-shadow: var(--al-sl);
    max-width: 340px; margin-left: auto; position: sticky; top: 80px; background: var(--al-w);
}
.al-prd-img { background: var(--al-nv); max-height: 200px; overflow: hidden; }
.al-prd-img img { width: 100%; height: auto; display: block; }
.al-prd-img-ph {
    height: 180px; display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .85); font-weight: 800; font-size: 17px; text-align: center; padding: 20px;
}
.al-prd-body { padding: 18px; background: var(--al-w); }
.al-prd-price { font-size: 24px; font-weight: 900; color: var(--al-nv); }
.al-prd-price s { font-size: 14px; font-weight: 500; color: var(--al-g4); margin-left: 8px; }
.al-prd-gst { font-size: 10px; color: var(--al-g5); margin-bottom: 10px; }
.al-prd-off {
    display: inline-block; background: #fef3c7; color: #92400e; font-size: 10px;
    font-weight: 800; padding: 3px 8px; border-radius: 5px; margin-left: 8px; vertical-align: middle;
}
.al-prd-buy, .al-prd-cart {
    width: 100%; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--al-f); transition: var(--al-t);
}
.al-prd-buy { background: var(--al-gr); color: var(--al-w); border: none; margin-bottom: 6px; }
.al-prd-buy:hover { background: var(--al-grd); }
.al-prd-cart { background: var(--al-w); color: var(--al-nv); border: 2px solid var(--al-nv); margin-bottom: 10px; }
.al-prd-cart:hover { background: var(--al-nv); color: var(--al-w); }
.al-prd-buy[disabled], .al-prd-cart[disabled] { opacity: .6; cursor: not-allowed; }
.al-prd-feat { margin: 0; padding: 0; list-style: none; }
.al-prd-feat li { padding: 4px 0; font-size: 12px; color: var(--al-g6); display: flex; align-items: center; gap: 6px; }
.al-prd-feat li svg, .al-prd-feat li i { width: 14px; min-width: 14px; font-size: 12px; color: var(--al-nv); }

/* Highlights */
.al-hl {
    display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--al-g1);
    border-radius: var(--al-r); overflow: hidden; box-shadow: var(--al-s); background: var(--al-w);
}
.al-hl-i { padding: 20px 14px; text-align: center; border-right: 1px solid var(--al-g1); }
.al-hl-i:last-child { border-right: none; }
.al-hl-ic {
    width: 40px; height: 40px; background: var(--al-of); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
}
.al-hl-ic svg { width: 18px; height: 18px; color: var(--al-gr); }
.al-hl-i h4 { font-size: 12px; font-weight: 700; color: var(--al-nv); margin: 0 0 2px; }
.al-hl-i p { font-size: 10px; color: var(--al-g5); margin: 0; }

/* Details grid */
.al-det { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.al-det-box {
    background: var(--al-w); border: 1px solid var(--al-g1); border-radius: var(--al-r);
    padding: 26px; box-shadow: var(--al-s);
}
.al-det-box h2 {
    font-size: 16px; font-weight: 800; color: var(--al-nv); text-transform: uppercase;
    letter-spacing: .5px; margin: 0 0 4px;
}
.al-det-ln { width: 32px; height: 3px; background: var(--al-gr); border-radius: 2px; margin-bottom: 16px; }
.al-det-box ul { margin: 0; padding: 0; list-style: none; }
.al-det-box ul li {
    padding: 8px 0; font-size: 13px; color: var(--al-g6); display: flex; align-items: center;
    gap: 8px; border-bottom: 1px solid var(--al-g50);
}
.al-det-box ul li:last-child { border-bottom: none; }
.al-det-box ul li svg { width: 16px; height: 16px; min-width: 16px; flex-shrink: 0; }
/* Admin-authored HTML description rendered inside the box */
.al-det-html { font-size: 13px; color: var(--al-g6); line-height: 1.75; }
.al-det-html p { margin: 0 0 .9em; }
.al-det-html ul, .al-det-html ol { margin: 0 0 1em 1.1em; list-style: initial; }
.al-det-html li { margin-bottom: .35em; }
.al-det-html h1, .al-det-html h2, .al-det-html h3, .al-det-html h4 {
    color: var(--al-nv); font-weight: 800; margin: 1.2em 0 .4em; font-size: 14px;
    text-transform: none; letter-spacing: 0;
}
.al-det-html a { color: var(--al-bl); text-decoration: underline; }
.al-det-html img { max-width: 100%; height: auto; border-radius: 8px; }

.al-inf { background: var(--al-g50); border-radius: var(--al-r); padding: 24px; border: 1px solid var(--al-g1); }
.al-inf h2 { font-size: 15px; font-weight: 800; color: var(--al-nv); margin: 0 0 16px; text-transform: uppercase; }
.al-inf-r { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--al-g1); font-size: 13px; }
.al-inf-r:last-child { border-bottom: none; }
.al-inf-r svg { width: 16px; height: 16px; min-width: 16px; color: var(--al-nv); margin-right: 8px; flex-shrink: 0; }
.al-inf-l { font-weight: 600; color: var(--al-g7); width: 110px; flex-shrink: 0; }
.al-inf-s { margin: 0 8px; color: var(--al-g2); }
.al-inf-v { color: var(--al-g5); }

/* Curriculum */
.al-cur { border: 1px solid var(--al-g1); border-radius: var(--al-r); overflow: hidden; margin-top: 16px; background: var(--al-w); }
.al-cur-r {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 12px 20px; border-bottom: 1px solid var(--al-g1); font-size: 13px;
    transition: var(--al-t); cursor: pointer;
}
.al-cur-r:last-of-type { border-bottom: none; }
.al-cur-r:hover { background: var(--al-g50); }
.al-cur-m { font-weight: 700; color: var(--al-nv); }
.al-cur-t { color: var(--al-g6); }
.al-cur-l { color: var(--al-gr); font-weight: 600; font-size: 11px; white-space: nowrap; }
.al-cur-body { border-bottom: 1px solid var(--al-g1); background: var(--al-g50); padding: 4px 20px 10px; }
.al-cur-li {
    display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12px;
    color: var(--al-g6); border-bottom: 1px dashed var(--al-g1);
}
.al-cur-li:last-child { border-bottom: none; }
.al-cur-li i { width: 16px; text-align: center; color: var(--al-bl); font-size: 11px; }
.al-cur-li .dur { margin-left: auto; color: var(--al-g4); font-size: 11px; }
.al-cur-li .free {
    background: var(--al-gr); color: #fff; font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px; letter-spacing: .5px;
}

/* CTA band */
.al-cta-b { background: var(--al-nv); color: var(--al-w); padding: 18px 28px; border-radius: var(--al-r); }
.al-cta-b .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.al-cta-b h3 { font-size: 16px; font-weight: 700; margin: 0; }
.al-cta-b p { font-size: 11px; opacity: .7; margin: 0; }
.al-cta-ic {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.al-cta-ic svg { width: 18px; height: 18px; }

/* Reviews (kept from the platform, restyled to the mockup) */
.al-rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
.al-rv-c { background: var(--al-w); border: 1px solid var(--al-g1); border-radius: var(--al-r); padding: 20px; box-shadow: var(--al-s); }
.al-rv-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.al-rv-av {
    width: 34px; height: 34px; border-radius: 50%; background: var(--al-nv); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.al-rv-n { font-size: 13px; font-weight: 700; color: var(--al-nv); }
.al-rv-d { font-size: 10px; color: var(--al-g4); }
.al-rv-s { color: #f59e0b; font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; }
.al-rv-t { font-size: 12.5px; color: var(--al-g5); line-height: 1.6; margin: 0; }

/* ═══ DEMO ═══ */
.al-dm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.al-dm-c {
    background: var(--al-w); border-radius: var(--al-r); overflow: hidden; box-shadow: var(--al-s);
    border: 1px solid var(--al-g1); transition: var(--al-t); cursor: pointer;
}
.al-dm-c:hover { transform: translateY(-4px); box-shadow: var(--al-sl); }
.al-dm-th {
    /* 16:9 rather than a fixed 150px — YouTube stills are 16:9, and the fixed
       height was cropping titles out of the frame. */
    background: var(--al-nv); aspect-ratio: 16 / 9; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
    position: relative; overflow: hidden;
}
.al-dm-th img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.al-dm-pl {
    width: 52px; height: 52px; background: rgba(255, 255, 255, .12); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: var(--al-t);
    position: relative; z-index: 2; backdrop-filter: blur(2px);
}
.al-dm-c:hover .al-dm-pl { background: var(--al-gr); transform: scale(1.1); }
.al-dm-pl svg { width: 22px; height: 22px; color: var(--al-w); margin-left: 2px; }
.al-dm-free {
    position: absolute; top: 10px; left: 10px; z-index: 3; background: var(--al-gr); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 3px 8px; border-radius: 5px;
}
.al-dm-bd { padding: 14px 16px; }
.al-dm-bd h4 { font-size: 14px; font-weight: 700; color: var(--al-nv); margin: 0 0 3px; }
.al-dm-bd p { font-size: 12px; color: var(--al-g5); line-height: 1.4; margin: 0; }

/* ═══ CONTACT ═══ */
.al-ct-hero { background: linear-gradient(90deg, #f7f9fc 0%, #eef2f9 100%); overflow: hidden; }
.al-ct-hero-i {
    max-width: 1300px; margin: 0 auto; padding: 0 0 0 28px;
    display: grid; grid-template-columns: 1fr .8fr; gap: 20px; align-items: center; min-height: 316px;
}
.al-ct-hero h1 { font-size: 54px; font-weight: 900; color: var(--al-nv); letter-spacing: -1.5px; margin: 0; line-height: 1; }
.al-ct-hero h1 em { color: var(--al-gr); font-style: normal; }
.al-ct-rule { width: 64px; height: 4px; background: var(--al-gr); border-radius: 2px; margin: 14px 0 18px; }
.al-ct-hero h2 { font-size: 22px; font-weight: 800; color: var(--al-nv); margin: 0 0 10px; }
.al-ct-hero p { font-size: 14px; color: var(--al-g5); line-height: 1.7; margin: 0; max-width: 420px; }
.al-ct-hero-img { align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.al-ct-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.al-ct-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); background: var(--al-w);
    border-radius: var(--al-r); box-shadow: var(--al-sl); border: 1px solid var(--al-g1);
    margin-top: -40px; position: relative; z-index: 5;
}
.al-ct-card { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid var(--al-g1); }
.al-ct-card:last-child { border-right: none; }
.al-ct-ic {
    width: 46px; height: 46px; border-radius: 50%; background: var(--al-nv); color: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.al-ct-ic svg { width: 20px; height: 20px; }
.al-ct-card h4 { font-size: 15px; font-weight: 800; color: var(--al-nv); margin: 0 0 3px; }
.al-ct-card p, .al-ct-card a { font-size: 13px; color: var(--al-g5); margin: 0; display: block; line-height: 1.5; }
.al-ct-card a:hover { color: var(--al-gr); }

.al-ct-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; margin-top: 32px; }
.al-ct-form {
    background: var(--al-w); border: 1px solid var(--al-g1); border-radius: var(--al-r);
    padding: 28px; box-shadow: var(--al-s);
}
.al-ct-form h3 { font-size: 20px; font-weight: 800; color: var(--al-nv); margin: 0; }
.al-ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.al-inp {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--al-g1); border-radius: 9px;
    font-size: 13px; font-family: var(--al-f); color: var(--al-g7); background: var(--al-w);
    outline: none; transition: var(--al-t);
}
.al-inp:focus { border-color: var(--al-gr); box-shadow: 0 0 0 3px rgba(26, 171, 74, .1); }
.al-inp.err { border-color: #dc2626; }
textarea.al-inp { min-height: 118px; resize: vertical; }
.al-ct-side { background: var(--al-g50); border: 1px solid var(--al-g1); border-radius: var(--al-r); padding: 28px; }
.al-ct-side-ic {
    width: 48px; height: 48px; border-radius: 50%; background: var(--al-w); border: 1px solid var(--al-g1);
    display: flex; align-items: center; justify-content: center; color: var(--al-gr); margin-bottom: 12px;
}
.al-ct-side-ic svg { width: 22px; height: 22px; }
.al-ct-side h3 { font-size: 20px; font-weight: 800; color: var(--al-nv); margin: 0; }
.al-ct-side p { font-size: 13px; color: var(--al-g5); line-height: 1.7; margin: 14px 0 0; }
.al-ct-side hr { border: none; border-top: 1px solid var(--al-g1); margin: 18px 0; }
.al-ct-side ul { margin: 0; padding: 0; list-style: none; }
.al-ct-side ul li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--al-g6); padding: 6px 0; }
.al-ct-side ul li svg { width: 16px; height: 16px; min-width: 16px; color: var(--al-gr); }
.al-ct-ok {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 10px;
    padding: 14px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}

/* ═══ FOOTER ═══ */
.al-footer { background: var(--al-nd); color: rgba(255, 255, 255, .65); }
.al-ft-m {
    max-width: 1300px; margin: 0 auto; padding: 44px 28px 24px;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px;
}
.al-ft-b h3 { font-size: 17px; font-weight: 800; color: var(--al-w); margin: 0 0 6px; }
.al-ft-b p { font-size: 12px; line-height: 1.6; margin: 0; }
.al-ft-logo { margin-bottom: 10px; }
.al-ft-logo img { height: 42px; width: auto; object-fit: contain; }
.al-ft-ci { display: flex; align-items: center; gap: 7px; font-size: 11px; margin-top: 5px; color: rgba(255, 255, 255, .65); }
.al-ft-ci svg { width: 13px; height: 13px; min-width: 13px; color: var(--al-grl); }
.al-ft-ci:hover { color: #fff; }
.al-ft-so { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.al-ft-so a {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; transition: var(--al-t); color: var(--al-w);
}
.al-ft-so a.ig { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.al-ft-so a.fb { background: #1877f2; }
.al-ft-so a.li { background: #0a66c2; }
.al-ft-so a.yt { background: #f00; }
.al-ft-so a.wa { background: #25d366; }
.al-ft-so a.tw { background: #000; }
.al-ft-so a.tg { background: #229ed9; }
.al-ft-so a:hover { transform: scale(1.1); }
.al-ft-so a svg { width: 16px; height: 16px; }
.al-ft-c h4 {
    font-size: 10px; font-weight: 700; color: var(--al-w); text-transform: uppercase;
    letter-spacing: 1.5px; margin: 0 0 12px;
}
.al-ft-c ul { margin: 0; padding: 0; list-style: none; }
.al-ft-c ul li { margin-bottom: 6px; }
.al-ft-c ul a { font-size: 12px; transition: var(--al-t); color: rgba(255, 255, 255, .65); }
.al-ft-c ul a:hover { color: var(--al-grl); }
.al-ft-bt { border-top: 1px solid rgba(255, 255, 255, .06); padding: 14px 28px; text-align: center; }
.al-ft-bt p { font-size: 10px; opacity: .45; margin: 0; }
.al-ft-bt a { color: var(--al-grl); font-weight: 600; }
.al-ft-links { display: flex; gap: 18px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.al-ft-links a { font-size: 10px; opacity: .45; }
.al-ft-links a:hover { opacity: 1; color: var(--al-grl); }

/* Broker strip inside the footer (platform feature — kept) */
.al-ft-brokers {
    max-width: 1300px; margin: 0 auto; padding: 0 28px 24px; display: flex;
    gap: 16px; flex-wrap: wrap; justify-content: center;
}
.al-ft-broker {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px; padding: 14px 18px; text-align: center; min-width: 180px;
}
.al-ft-broker .cap { font-size: 10px; opacity: .6; margin-bottom: 6px; }
.al-ft-broker img { height: 24px; width: auto; margin: 0 auto 8px; object-fit: contain; }
.al-ft-broker .name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.al-ft-broker button {
    background: var(--al-gr); color: #fff; border: none; border-radius: 8px; padding: 7px 16px;
    font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--al-f);
}
.al-ft-broker button:hover { background: var(--al-grd); }

/* ═══ APP DOWNLOAD BAR (platform feature — restyled to the mockup) ═══ */
.al-app { background: var(--al-of); border-top: 1px solid var(--al-g1); padding: 26px 28px; }
.al-app-i {
    max-width: 1300px; margin: 0 auto; display: flex; align-items: center;
    justify-content: center; gap: 22px; flex-wrap: wrap;
}
.al-app h2 { font-size: 16px; font-weight: 800; color: var(--al-nv); margin: 0; }
.al-app-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.al-app-btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 10px;
    background: var(--al-nv); color: var(--al-w); border: none; cursor: pointer;
    font-family: var(--al-f); transition: var(--al-t);
}
.al-app-btn:hover { background: var(--al-bl); }
.al-app-btn.play { background: var(--al-gr); }
.al-app-btn.play:hover { background: var(--al-grd); }
.al-app-pre { font-size: 9px; opacity: .7; display: block; line-height: 1.2; }
.al-app-name { font-size: 13px; font-weight: 700; display: block; line-height: 1.2; }

/* ═══ WhatsApp FAB ═══ */
.al-waf {
    position: fixed; bottom: 20px; right: 20px; width: 54px; height: 54px; background: #25d366;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .35); z-index: 900; transition: var(--al-t);
}
.al-waf:hover { transform: scale(1.1); }
.al-waf svg { width: 26px; height: 26px; color: var(--al-w); }

/* ═══ MISC ═══ */
.al-empty { text-align: center; padding: 60px 20px; color: var(--al-g5); }
.al-empty h3 { font-size: 18px; font-weight: 800; color: var(--al-nv); margin: 12px 0 6px; }
.al-empty p { font-size: 13px; margin: 0 0 18px; }
.al-spin { text-align: center; padding: 70px 20px; }

/* ═══ RESPONSIVE (mockup breakpoints) ═══ */
@media (max-width: 1024px) {
    .al-tbar-i, .al-why { grid-template-columns: repeat(2, 1fr); }
    .al-ti { border-bottom: 1px solid rgba(255, 255, 255, .06); }
    .al-cc-grid, .al-tst, .al-dm-grid, .al-rv-grid { grid-template-columns: 1fr 1fr; }
    .al-feat, .al-hl { grid-template-columns: repeat(2, 1fr); }
    .al-feat-i, .al-hl-i { border-bottom: 1px solid var(--al-g1); }
    .al-ft-m { grid-template-columns: 1fr 1fr; }
    .al-cpg-hero .al-mx, .al-det, .al-ct-grid { grid-template-columns: 1fr; }
    .al-ct-hero-i { grid-template-columns: 1fr; padding: 32px 28px 0; }
    .al-ct-hero-img { justify-content: center; }
    .al-prd { position: static; margin-left: 0; max-width: 100%; }
}

@media (max-width: 768px) {
    .al-nks {
        display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--al-w);
        flex-direction: column; align-items: stretch; padding: 14px; box-shadow: var(--al-sl);
        gap: 3px; border-top: 1px solid var(--al-g1);
    }
    .al-nks.show { display: flex; }
    .al-nk { display: block; width: 100%; }
    .al-dd-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-left: 2px solid var(--al-g1);
        border-radius: 0; padding: 0 0 0 10px; margin: 2px 0 6px 14px; min-width: 0;
    }
    .al-ham { display: flex; }
    .al-nav-actions { margin-left: auto; }
    .al-tbar-i, .al-feat, .al-cc-grid, .al-why, .al-tst, .al-dm-grid, .al-hl,
    .al-ct-cards, .al-stats-i, .al-rv-grid { grid-template-columns: 1fr; }
    .al-ti, .al-feat-i, .al-hl-i, .al-ct-card { border-right: none; border-bottom: 1px solid rgba(128, 128, 128, .12); }
    .al-ct-cards { margin-top: 0; border-radius: 0; }
    .al-cpg-hero h1 { font-size: 34px; }
    .al-ct-hero h1 { font-size: 38px; }
    .al-ft-m { grid-template-columns: 1fr; }
    .al-cta-b .inner { flex-direction: column; text-align: center; }
    .al-sec { padding: 44px 20px; }
    .al-mx { padding: 0 20px; }
    .al-h2 { font-size: 22px; }
    .al-ct-row { grid-template-columns: 1fr; }
    .al-prd-img { max-height: 220px; }
}

/* Image thumbnails sit behind the play button */
.al-dm-th img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.al-dm-th::after {
    content: ''; position: absolute; inset: 0; transition: var(--al-t);
    background: linear-gradient(180deg, rgba(10,31,92,.05) 0%, rgba(10,31,92,.34) 100%);
}
.al-dm-c:hover .al-dm-th::after { background: linear-gradient(180deg, rgba(10,31,92,0) 0%, rgba(10,31,92,.20) 100%); }