/* ============================================================
   Agency Login
   Prefix: al-
   Standalone page (no layout) — tokens are defined here.
============================================================ */

:root {
    --al-navy-950: #070c18;
    --al-navy-900: #0b1222;
    --al-navy-800: #111a2f;
    --al-navy-700: #18233c;
    --al-line-dark: rgb(255 255 255 / .08);
    --al-text-dark: #e8edf6;
    --al-muted-dark: #8a96ab;

    --al-orange: #e8612d;
    --al-orange-2: #f2833f;
    --al-orange-deep: #c94c1b;
    --al-orange-soft: #fff3ec;
    --al-orange-ring: rgb(232 97 45 / .18);
    --al-green: #10b981;
    --al-blue: #3b82f6;

    --al-ink: #0b1222;
    --al-ink-2: #46536a;
    --al-muted: #8692a6;
    --al-line: #e3e8ef;
    --al-field: #f6f8fb;
    --al-surface: #ffffff;
    --al-bg: #f4f6fa;

    --al-radius: 14px;
    --al-font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.al-body {
    min-height: 100vh;
    font-family: var(--al-font);
    background: var(--al-surface);
    color: var(--al-ink);
    -webkit-font-smoothing: antialiased;
}

.al-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr);
    min-height: 100vh;
}

/* ═══ Hero (left) ═══════════════════════════════════════════ */

.al-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--al-navy-900) 0%, var(--al-navy-950) 70%);
    color: var(--al-text-dark);
}

.al-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.al-glow { position: absolute; border-radius: 50%; filter: blur(10px); }
.al-glow--orange {
    width: 620px; height: 620px; top: -220px; right: -180px;
    background: radial-gradient(circle, rgb(232 97 45 / .22) 0%, transparent 65%);
}
.al-glow--green {
    width: 560px; height: 560px; bottom: -260px; left: -200px;
    background: radial-gradient(circle, rgb(16 185 129 / .16) 0%, transparent 65%);
}
.al-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 55% 45%, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 80% 70% at 55% 45%, #000 20%, transparent 80%);
}

.al-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3.2vh, 34px);
    height: 100vh;
    min-height: 640px;
    padding: clamp(28px, 4.5vh, 44px) clamp(40px, 4.5vw, 72px);
}

.al-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    width: fit-content;
}
.al-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(140deg, var(--al-orange-2), var(--al-orange-deep));
    box-shadow: 0 10px 24px -10px rgb(232 97 45 / .9), inset 0 1px 0 rgb(255 255 255 / .25);
}
.al-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.al-hero-copy { max-width: 560px; }

.al-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgb(232 97 45 / .35);
    background: rgb(232 97 45 / .1);
    color: #ffb48f;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.al-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--al-orange);
    box-shadow: 0 0 0 4px rgb(232 97 45 / .2);
}

.al-hero-title {
    margin-top: clamp(14px, 2.2vh, 22px);
    font-size: clamp(34px, 3.4vw, 50px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
    text-wrap: balance;
}
.al-hero-accent {
    display: block;
    background: linear-gradient(90deg, #ff8a4c 0%, var(--al-orange) 55%, #f9a26b 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.al-hero-sub {
    margin-top: clamp(12px, 1.8vh, 18px);
    max-width: 50ch;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--al-muted-dark);
}

/* ── Mockup ─────────────────────────────────────────────── */

.al-mock {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 40px 42px;
}

.al-mock-window {
    position: relative;
    width: 100%;
    max-width: 540px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--al-line-dark);
    background: linear-gradient(180deg, rgb(24 35 60 / .92), rgb(14 21 38 / .92));
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .02) inset;
    overflow: hidden;
    animation: al-tilt-in 1s cubic-bezier(.2, .8, .2, 1) .35s both;
}

.al-mock-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--al-line-dark);
}
.al-dots { display: inline-flex; gap: 6px; }
.al-dots i { width: 9px; height: 9px; border-radius: 50%; }
.al-dots i:nth-child(1) { background: #f05252; }
.al-dots i:nth-child(2) { background: #f5b83d; }
.al-dots i:nth-child(3) { background: #22c55e; }
.al-mock-title { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: #b9c3d4; }
.al-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: #6ee7b7;
    letter-spacing: .04em; text-transform: uppercase;
}
.al-live i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--al-green);
    box-shadow: 0 0 0 0 rgb(16 185 129 / .6);
    animation: al-ping 2s infinite;
}

.al-mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.al-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--al-line-dark);
    background: rgb(255 255 255 / .03);
}
.al-kpi-icon, .al-float-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; margin-bottom: 6px;
}
.al-kpi-icon--orange { color: #ff9a66; background: rgb(232 97 45 / .16); }
.al-kpi-icon--green  { color: #5eead4; background: rgb(16 185 129 / .16); }
.al-kpi-icon--blue   { color: #93b4fd; background: rgb(59 130 246 / .18); }
.al-kpi-value { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.al-kpi-label { font-size: 11.5px; color: var(--al-muted-dark); }

.al-mock-chart {
    margin-top: 12px;
    padding: 12px 14px 14px;
    border-radius: 12px;
    border: 1px solid var(--al-line-dark);
    background: rgb(255 255 255 / .025);
}
.al-chart-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px; color: var(--al-muted-dark);
}
.al-chart-delta {
    padding: 2px 8px; border-radius: 999px;
    color: #6ee7b7; background: rgb(16 185 129 / .14); font-weight: 600;
}
.al-bars {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    height: clamp(70px, 11vh, 110px);
    margin-top: 12px;
}
.al-bar {
    display: block;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #ff8a4c, #c94c1b);
    transform-origin: bottom;
    animation: al-grow .8s cubic-bezier(.2, .8, .2, 1) both;
    transition: height .7s cubic-bezier(.2, .8, .2, 1);
}
.al-bar--green { background: linear-gradient(180deg, #34d399, #0f8a64); }
.al-bar:nth-child(1)  { animation-delay: .80s; }
.al-bar:nth-child(2)  { animation-delay: .86s; }
.al-bar:nth-child(3)  { animation-delay: .92s; }
.al-bar:nth-child(4)  { animation-delay: .98s; }
.al-bar:nth-child(5)  { animation-delay: 1.04s; }
.al-bar:nth-child(6)  { animation-delay: 1.10s; }
.al-bar:nth-child(7)  { animation-delay: 1.16s; }
.al-bar:nth-child(8)  { animation-delay: 1.22s; }
.al-bar:nth-child(9)  { animation-delay: 1.28s; }
.al-bar:nth-child(10) { animation-delay: 1.34s; }
.al-h38 { height: 38%; } .al-h45 { height: 45%; } .al-h55 { height: 55%; } .al-h60 { height: 60%; }
.al-h62 { height: 62%; } .al-h70 { height: 70%; } .al-h74 { height: 74%; } .al-h78 { height: 78%; }
.al-h88 { height: 88%; } .al-h96 { height: 96%; }

.al-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    border-radius: 14px;
    border: 1px solid rgb(255 255 255 / .1);
    background: rgb(17 26 47 / .94);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px -18px rgb(0 0 0 / .8);
    white-space: nowrap;
}
.al-float .al-float-icon { margin: 0; width: 34px; height: 34px; border-radius: 10px; }
.al-float-title { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.al-float-sub { display: block; font-size: 11.5px; color: var(--al-muted-dark); }

.al-float--audit    { top: 0;    right: 0; animation: al-slide-l .7s cubic-bezier(.2, .8, .2, 1) 1.1s both, al-float 7s ease-in-out 1.8s infinite; }
.al-float--approval { bottom: 0; left: 0;  animation: al-slide-r .7s cubic-bezier(.2, .8, .2, 1) 1.3s both, al-float 8s ease-in-out 2s infinite; }

.al-feed-text, .al-float-icon { transition: opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease; }
.al-float.is-swapping .al-feed-text { opacity: 0; transform: translateY(6px); }
.al-float.is-swapping .al-float-icon { transform: scale(.7); opacity: .4; }

/* ── Metrics + footer ───────────────────────────────────── */

.al-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: clamp(16px, 2.4vh, 24px);
    border-top: 1px solid var(--al-line-dark);
}
.al-metric { display: flex; flex-direction: column-reverse; gap: 2px; }
.al-metric dd {
    font-size: clamp(26px, 2.3vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.al-metric dd .al-suffix { color: var(--al-orange-2); }
.al-metric dt { font-size: 13px; color: var(--al-muted-dark); }

.al-hero-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #5f6b80;
}
.al-hero-secure { display: inline-flex; align-items: center; gap: 6px; }

/* ═══ Sign-in panel (right) ═════════════════════════════════ */

.al-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 28px clamp(24px, 4vw, 56px);
    background:
        radial-gradient(600px 300px at 100% 0%, rgb(232 97 45 / .06), transparent 70%),
        var(--al-surface);
}

.al-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.al-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin-left: -12px;
    border-radius: 10px;
    font-size: 14px; font-weight: 500;
    color: var(--al-ink-2);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.al-back:hover { background: var(--al-bg); color: var(--al-ink); }
.al-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--al-orange-soft);
    border: 1px solid #ffd9c4;
    color: var(--al-orange-deep);
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.al-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--al-orange); }

.al-form-wrap {
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: 40px 0 32px;
}

.al-brand--compact { display: none; color: var(--al-ink); margin-bottom: 28px; }
.al-brand--compact .al-brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.al-brand--compact .al-brand-name { font-size: 18px; }

.al-title {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--al-ink);
}
.al-subtitle {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--al-ink-2);
}

.al-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}
.al-alert svg { flex-shrink: 0; margin-top: 1px; }
.al-alert ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.al-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.al-alert--success { background: #effdf5; border: 1px solid #b7efd0; color: #166534; }
.al-alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.al-form { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }

.al-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--al-ink);
}
.al-input-wrap { position: relative; }
.al-input {
    display: block;
    width: 100%;
    height: 54px;
    padding: 0 16px 0 48px;
    font-family: inherit;
    font-size: 15.5px;
    color: var(--al-ink);
    background: var(--al-field);
    border: 1.5px solid var(--al-line);
    border-radius: var(--al-radius);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.al-input--with-toggle { padding-right: 52px; }
.al-input::placeholder { color: #a2acbd; }
.al-input:hover { border-color: #cfd7e3; }
.al-input:focus {
    background: #fff;
    border-color: var(--al-orange);
    box-shadow: 0 0 0 4px var(--al-orange-ring);
}
.al-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #9aa5b8;
    pointer-events: none;
    transition: color .15s ease;
}
.al-input:focus ~ .al-input-icon { color: var(--al-orange); }

.al-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #8a96aa;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.al-pw-toggle:hover { background: #eceff5; color: var(--al-ink-2); }
.al-pw-toggle .al-eye-off { display: none; }
.al-pw-toggle.is-visible .al-eye-on { display: none; }
.al-pw-toggle.is-visible .al-eye-off { display: block; }

.al-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-size: 14px;
    color: var(--al-ink-2);
    cursor: pointer;
    user-select: none;
}
.al-checkbox { width: 18px; height: 18px; accent-color: var(--al-orange); cursor: pointer; }

.al-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    margin-top: 4px;
    border: 0;
    border-radius: var(--al-radius);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(135deg, var(--al-orange-2) 0%, var(--al-orange) 45%, var(--al-orange-deep) 100%);
    box-shadow: 0 16px 30px -14px rgb(232 97 45 / .85), inset 0 1px 0 rgb(255 255 255 / .22);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.al-submit svg { transition: transform .2s ease; }
.al-submit:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 20px 36px -14px rgb(232 97 45 / .9), inset 0 1px 0 rgb(255 255 255 / .22); }
.al-submit:hover svg { transform: translateX(3px); }
.al-submit:active { transform: translateY(0); }

.al-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 16px;
    font-size: 13px;
    color: var(--al-muted);
}
.al-divider::before, .al-divider::after { content: ''; flex: 1; height: 1px; background: var(--al-line); }

.al-register {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--al-radius);
    border: 1px solid var(--al-line);
    color: var(--al-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.al-register svg { color: var(--al-orange); flex-shrink: 0; transition: transform .2s ease; }
.al-register:hover { border-color: #ffc9ab; box-shadow: 0 12px 24px -16px rgb(232 97 45 / .5); transform: translateY(-1px); }
.al-register:hover svg { transform: translateX(3px); }
.al-register-title { display: block; font-size: 15px; font-weight: 600; }
.al-register-sub { display: block; font-size: 13px; color: var(--al-muted); }

.al-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 26px;
    list-style: none;
    font-size: 12.5px;
    color: var(--al-muted);
}
.al-trust li { display: inline-flex; align-items: center; gap: 6px; }
.al-trust svg { color: #9aa5b8; }

.al-panel-foot { text-align: center; font-size: 13px; color: var(--al-muted); }

.al-body a:focus-visible,
.al-body button:focus-visible,
.al-checkbox:focus-visible {
    outline: 3px solid var(--al-orange-ring);
    outline-offset: 2px;
}

/* ═══ Motion ═══════════════════════════════════════════════ */

/* Staggered entrance */
.al-in { animation: al-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.al-d1 { animation-delay: .05s; }
.al-d2 { animation-delay: .15s; }
.al-d3 { animation-delay: .25s; }
.al-d4 { animation-delay: .35s; }
.al-d5 { animation-delay: .45s; }
.al-d6 { animation-delay: .55s; }
.al-d7 { animation-delay: .65s; }
.al-d8 { animation-delay: .75s; }

/* Ambient background */
.al-glow--orange { animation: al-drift-a 18s ease-in-out infinite alternate; }
.al-glow--green  { animation: al-drift-b 22s ease-in-out infinite alternate; }
.al-grid { animation: al-grid-pan 40s linear infinite; }

/* Headline shimmer */
.al-hero-accent {
    background-size: 220% 100%;
    animation: al-shimmer 7s ease-in-out infinite;
}

/* Mockup: pointer tilt + sheen + KPI pop */
.al-mock {
    transform: perspective(1400px) rotateX(var(--al-rx, 0deg)) rotateY(var(--al-ry, 0deg));
    transition: transform .45s ease-out;
    will-change: transform;
}
.al-sheen {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .07) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: al-sheen 7s ease-in-out 2.2s infinite;
}
.al-kpi { animation: al-pop .6s cubic-bezier(.2, .8, .2, 1) both; }
.al-kpi--1 { animation-delay: .6s; }
.al-kpi--2 { animation-delay: .7s; }
.al-kpi--3 { animation-delay: .8s; }

/* Inputs */
.al-label { transition: color .15s ease; }
.al-field:focus-within .al-label { color: var(--al-orange-deep); }

/* Submit: hover sweep + loading */
.al-submit { position: relative; overflow: hidden; }
.al-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s ease;
}
.al-submit:hover::after { transform: translateX(120%); }
.al-spinner {
    display: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgb(255 255 255 / .35);
    border-top-color: #fff;
    animation: al-spin .7s linear infinite;
}
.al-submit.is-loading { pointer-events: none; filter: saturate(.9); }
.al-submit.is-loading .al-spinner { display: inline-block; }
.al-submit.is-loading .al-submit-arrow { display: none; }

/* Alerts */
.al-alert--anim { animation: al-rise .5s cubic-bezier(.2, .8, .2, 1) .2s both; }
.al-alert--shake { animation: al-rise .5s cubic-bezier(.2, .8, .2, 1) .2s both, al-shake .45s ease-in-out .7s; }

@keyframes al-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes al-tilt-in {
    from { opacity: 0; transform: perspective(1200px) rotateX(14deg) translateY(30px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes al-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes al-slide-l { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes al-slide-r { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes al-sheen { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@keyframes al-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes al-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-80px, 60px) scale(1.12); } }
@keyframes al-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, -50px) scale(1.08); } }
@keyframes al-grid-pan { from { background-position: 0 0, 0 0; } to { background-position: 48px 48px, 48px 48px; } }
@keyframes al-spin { to { transform: rotate(360deg); } }
@keyframes al-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}
@keyframes al-grow { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes al-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes al-ping {
    0% { box-shadow: 0 0 0 0 rgb(16 185 129 / .55); }
    70% { box-shadow: 0 0 0 7px rgb(16 185 129 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0); }
}

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

/* ═══ Responsive ═══════════════════════════════════════════ */

@media (max-height: 820px) and (min-width: 1025px) {
    .al-hero-sub { display: none; }
}

@media (max-height: 700px) and (min-width: 1025px) {
    .al-mock-chart { display: none; }
    .al-hero-inner { min-height: 560px; }
}

@media (max-width: 1280px) {
    .al-shell { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); }
    .al-mock { padding: 34px 20px 42px; }
}

@media (max-width: 1024px) {
    .al-shell { grid-template-columns: 1fr; }
    .al-hero { display: none; }
    .al-brand--compact { display: inline-flex; }
    .al-panel { background: linear-gradient(180deg, var(--al-bg) 0%, var(--al-surface) 320px); }
    .al-form-wrap {
        padding: 36px;
        margin: 32px auto;
        border-radius: 20px;
        background: var(--al-surface);
        border: 1px solid var(--al-line);
        box-shadow: 0 30px 60px -36px rgb(11 18 34 / .35);
    }
}

@media (max-width: 640px) {
    .al-panel { padding: 20px 16px; }
    .al-tag { display: none; }
    .al-form-wrap {
        padding: 24px 0 8px;
        margin: 8px auto 24px;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .al-title { font-size: 30px; }
    .al-subtitle { font-size: 15px; }
    .al-form { margin-top: 26px; }
}