/* ============================================================
   Login LEFT PANEL — premium, brand-aligned (navy + gold)
   Matches the dashboard design language. Mobile-first.
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 5vh, 56px) clamp(32px, 4.5vw, 64px);
    color: #fff;
    background:
        radial-gradient(at 16% 12%, rgba(254,202,22,.16) 0, transparent 44%),
        radial-gradient(at 86% 86%, rgba(83,164,255,.18) 0, transparent 46%),
        linear-gradient(158deg, #06203f 0%, #0e244e 56%, #0a3a6b 100%);
}
/* soft, slow gold glow for life */
.hero::before {
    content: ""; position: absolute; width: 380px; height: 380px; top: -12%; right: -14%; z-index: 0;
    background: radial-gradient(circle, rgba(254,202,22,.22), transparent 70%); filter: blur(60px);
    animation: heroGlow 16s ease-in-out infinite;
}
@keyframes heroGlow { 50% { transform: translate(-30px, 26px) scale(1.12); } }

.hero__inner { position: relative; z-index: 2; max-width: 30rem; }
/* each block fades/slides up in sequence for a polished one-by-one entrance */
@keyframes heroReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.hero__logo { width: clamp(140px, 12vw, 160px); margin-bottom: clamp(16px, 3.4vh, 34px); filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
    animation: heroReveal .6s var(--ease) .10s both; }

.hero h1 { font-size: clamp(1.9rem, 3.2vw, var(--fs-3xl)); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; margin-bottom: var(--sp-3);
    animation: heroReveal .6s var(--ease) .22s both; }
.hero h1 .accent { color: var(--gold); }
.hero__sub { color: rgba(255,255,255,.76); font-size: clamp(var(--fs-base), 1.4vw, var(--fs-lg)); line-height: 1.55; max-width: 26rem; margin-bottom: clamp(16px, 3.4vh, 34px);
    animation: heroReveal .6s var(--ease) .36s both; }

.hero__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.9vh, 18px); }
.hero__features li { display: flex; align-items: center; gap: 14px; font-size: var(--fs-base); font-weight: 500; color: rgba(255,255,255,.92);
    opacity: 0; transform: translateX(-8px); animation: featIn .5s var(--ease) forwards; }
.hero__features li:nth-child(1){animation-delay:.50s}.hero__features li:nth-child(2){animation-delay:.60s}
.hero__features li:nth-child(3){animation-delay:.70s}.hero__features li:nth-child(4){animation-delay:.80s}
@keyframes featIn { to { opacity: 1; transform: translateX(0); } }
.hero__features .fi { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    font-size: 1.15rem; color: var(--gold);
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.16); box-shadow: 0 4px 12px rgba(0,0,0,.14); }

.hero__badge { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(16px, 3vh, 30px);
    font-size: var(--fs-sm); font-weight: 500; color: var(--gold);
    background: rgba(254,202,22,.10); border: 1px solid rgba(254,202,22,.30);
    padding: 8px 14px; border-radius: 99px;
    animation: heroReveal .6s var(--ease) .92s both; }
.hero__badge i { font-size: 1.05rem; }

/* ---- logo swap: Amity (desktop) / Amizone+ (mobile) ---- */
.hero__logo--m { display: none; }
/* ---- mobile caption (under the logo) ---- */
.hero__caption { display: none; }

/* ============================================================
   RESPONSIVE — app-style branded header on mobile/tablet
   ============================================================ */
@media (max-width: 1023px) {
    .hero {
        flex: 0 0 auto; min-height: 33vh; justify-content: center;
        padding: var(--sp-10) var(--sp-5) calc(var(--sp-8) + 48px);   /* extra room for the curve lifting over the navy */
        text-align: center; align-items: center;
    }
    /* translucent rounded echo peeking behind the white sheet — parallax 3D depth,
       same rounded curve as the sheet. Sits behind the form panel (lower z-index). */
    .hero::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 56px; z-index: 1; pointer-events: none;
        background: rgba(255,255,255,.13);
        border-radius: 30px 30px 0 0;
    }
    .hero__inner { margin: 0 auto; }
    .hero__logo--d { display: none; }
    .hero__logo--m { display: block; margin: 0 auto var(--sp-3); width: 200px; }
    .hero__caption { display: block; font-size: var(--fs-base); font-weight: 500;
        letter-spacing: .03em; color: rgba(255,255,255,.85); }
    /* keep the top clean & app-like */
    .hero h1, .hero__sub, .hero__features, .hero__badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero__logo, .hero h1, .hero__sub, .hero__features li, .hero__badge {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
}