/* ===== AlvinFlix PREMIUM — "Royal Cinema" design system (unique) ===== */
:root {
    --royal-1: #6d28d9;
    --royal-2: #a855f7;
    --magenta: #ec4899;
    --gold-1: #fbbf24;
    --gold-2: #f59e0b;
    --ink: #07060e;
    --glass: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.12);
}

/* ---------- animated aurora background ---------- */
.afx-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.afx-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: afx-drift 16s ease-in-out infinite alternate; }
.afx-aurora i:nth-child(1) { width: 44vw; height: 44vw; left: -12vw; top: -14vw; background: radial-gradient(circle, #6d28d9, transparent 70%); }
.afx-aurora i:nth-child(2) { width: 36vw; height: 36vw; right: -10vw; top: 22vh; background: radial-gradient(circle, #ec4899, transparent 70%); animation-delay: -5s; }
.afx-aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle, #f59e0b, transparent 70%); opacity: .32; animation-delay: -10s; }
@keyframes afx-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(4vw,3vh) scale(1.15); } }

/* ---------- gradient brand text ---------- */
.afx-grad-text { background: linear-gradient(92deg, var(--gold-1), var(--magenta) 45%, var(--royal-2)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: afx-sheen 5s linear infinite; }
@keyframes afx-sheen { to { background-position: 200% center; } }

/* ---------- reveal on scroll ---------- */
.afx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.afx-reveal.in { opacity: 1; transform: none; }
.afx-reveal.d1 { transition-delay: .08s; } .afx-reveal.d2 { transition-delay: .16s; }
.afx-reveal.d3 { transition-delay: .24s; } .afx-reveal.d4 { transition-delay: .32s; }

/* ---------- shimmer premium buttons ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: afx-shine 3.2s ease-in-out infinite; }
@keyframes afx-shine { 0% { left: -80%; } 55%, 100% { left: 130%; } }
.btn-royal { background: linear-gradient(135deg, var(--royal-1), var(--magenta)); color: #fff; box-shadow: 0 8px 28px rgba(168,85,247,.35); }
.btn-royal:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(236,72,153,.45); }
.btn-gold { background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: #1a1005; box-shadow: 0 8px 28px rgba(251,191,36,.3); }
.btn-gold:hover { transform: translateY(-2px); }

/* ---------- link-style button (verify resend etc.) ---------- */
.link-btn { background: none; border: none; padding: 0; color: var(--accent, #e50914); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--magenta); }

/* ---------- landing ---------- */
.afx-landing { position: relative; z-index: 1; }
.afx-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: .9rem 3rem; background: rgba(7,6,14,.72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--glass-border); }
.afx-topbar img { display: block; }
.afx-top-actions { display: flex; gap: .7rem; align-items: center; }
.afx-announce { text-align: center; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; padding: .55rem 1rem; background: linear-gradient(90deg, var(--royal-1), var(--magenta), var(--royal-1)); background-size: 200% auto; animation: afx-sheen 6s linear infinite; color: #fff; font-weight: 700; }
.afx-hero-landing { position: relative; min-height: 88vh; display: flex; align-items: center; padding: 4rem 3rem; overflow: hidden; background: radial-gradient(60% 80% at 70% 20%, rgba(109,40,217,.35), transparent 70%), radial-gradient(50% 60% at 15% 85%, rgba(236,72,153,.22), transparent 70%); }
.afx-hero-landing::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.025) 46px 47px); pointer-events: none; }
.afx-hero-copy { max-width: 640px; animation: afx-rise .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes afx-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
.afx-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-1); border: 1px solid rgba(251,191,36,.4); padding: .4rem .9rem; border-radius: 999px; background: rgba(251,191,36,.08); margin-bottom: 1.2rem; }
.afx-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-1); animation: afx-blink 1.6s infinite; }
@keyframes afx-blink { 50% { opacity: .25; } }
.afx-mega { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 900; line-height: 1.04; margin-bottom: 1rem; }
.afx-sub { color: var(--text-secondary, #aaa); font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.8rem; max-width: 34rem; }
.afx-cta-row { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.afx-mini-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.afx-mini-stats .ms b { display: block; font-size: 1.7rem; font-weight: 800; }
.afx-mini-stats .ms span { font-size: .82rem; color: var(--text-muted, #888); letter-spacing: .06em; text-transform: uppercase; }
.afx-hero-art { position: absolute; right: -4rem; top: 50%; transform: translateY(-50%) rotate(8deg); display: flex; gap: 1rem; opacity: .9; }
.afx-poster-stack { width: 170px; height: 250px; border-radius: 14px; object-fit: cover; border: 1px solid var(--glass-border); box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: afx-floaty 6s ease-in-out infinite; background: linear-gradient(135deg, #2a1650, #4c1d95); }
.afx-poster-stack:nth-child(2) { animation-delay: -2s; margin-top: 2.4rem; }
.afx-poster-stack:nth-child(3) { animation-delay: -4s; margin-top: -.6rem; }
@keyframes afx-floaty { 50% { transform: translateY(-16px); } }

/* marquee strip */
.afx-marquee { overflow: hidden; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,.02); padding: .9rem 0; }
.afx-marquee-track { display: flex; gap: 3rem; width: max-content; animation: afx-scroll 26s linear infinite; font-weight: 700; letter-spacing: .28em; font-size: .8rem; color: var(--text-secondary, #aaa); text-transform: uppercase; }
@keyframes afx-scroll { to { transform: translateX(-50%); } }

/* feature cards */
.afx-section { padding: 4.5rem 3rem; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.afx-section h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; margin-bottom: .4rem; }
.afx-section .lede { color: var(--text-secondary, #aaa); margin-bottom: 2.2rem; }
.afx-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.afx-feat { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px; padding: 1.8rem 1.5rem; backdrop-filter: blur(12px); transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.afx-feat:hover { transform: translateY(-8px); border-color: rgba(168,85,247,.55); box-shadow: 0 20px 50px rgba(109,40,217,.3); }
.afx-feat .fic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--royal-1), var(--magenta)); margin-bottom: 1rem; box-shadow: 0 8px 22px rgba(236,72,153,.35); }
.afx-feat h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.afx-feat p { font-size: .9rem; color: var(--text-secondary, #aaa); line-height: 1.65; }

/* plan teaser */
.afx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.afx-plan { border-radius: 18px; padding: 1.8rem 1.5rem; background: var(--glass); border: 1px solid var(--glass-border); text-align: center; position: relative; transition: transform .3s; }
.afx-plan:hover { transform: translateY(-6px); }
.afx-plan.hot { background: linear-gradient(160deg, rgba(109,40,217,.35), rgba(236,72,153,.18)); border-color: rgba(251,191,36,.55); box-shadow: 0 18px 50px rgba(109,40,217,.35); }
.afx-plan .p-price { font-size: 2rem; font-weight: 900; margin: .5rem 0; }
.afx-plan ul { list-style: none; font-size: .88rem; color: var(--text-secondary, #aaa); margin: 1rem 0 1.4rem; line-height: 2; }

/* footer */
.afx-footer { border-top: 1px solid var(--glass-border); padding: 2.5rem 3rem 1.5rem; color: var(--text-muted, #888); font-size: .88rem; position: relative; z-index: 1; }
.afx-footer .frow { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto 1.2rem; }
.afx-footer a { color: var(--text-secondary, #aaa); margin-right: 1.1rem; }
.afx-footer a:hover { color: #fff; }
.afx-copy { text-align: center; border-top: 1px solid rgba(255,255,255,.07); padding-top: 1.2rem; }

/* ---------- auth split (landing side auth) ---------- */
.afx-auth-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; max-width: 1200px; margin: 0 auto; padding: 3rem; position: relative; z-index: 1; }
.afx-auth-card { background: rgba(14,12,26,.85); border: 1px solid var(--glass-border); border-radius: 22px; padding: 2.2rem; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.12), 0 0 60px rgba(109,40,217,.18); backdrop-filter: blur(18px); animation: afx-rise .7s both; }
.afx-auth-card .auth-logo { display: block; margin-bottom: .4rem; }
.afx-auth-alt { text-align: right; font-size: .85rem; margin: .6rem 0 1rem; }
.afx-auth-alt a { color: var(--gold-1); font-weight: 600; }

/* ---------- dashboard premium ---------- */
.afx-welcome { position: relative; overflow: hidden; border-radius: 22px; padding: 2.2rem; margin: 5.2rem 3rem 1.6rem; background: linear-gradient(120deg, rgba(109,40,217,.5), rgba(236,72,153,.32) 55%, rgba(245,158,11,.22)), #0d0b18; border: 1px solid rgba(168,85,247,.4); box-shadow: 0 24px 60px rgba(109,40,217,.3); animation: afx-rise .6s both; }
.afx-welcome::after { content: ""; position: absolute; width: 340px; height: 340px; right: -90px; top: -90px; background: radial-gradient(circle, rgba(251,191,36,.35), transparent 70%); pointer-events: none; }
.afx-welcome h1 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 800; }
.afx-welcome p { color: #d8ccf5; margin-top: .3rem; }
.afx-wchips { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.afx-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; padding: .45rem .95rem; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--glass-border); }
.afx-chip.gold { color: var(--gold-1); border-color: rgba(251,191,36,.5); }
.afx-chip.violet { color: #d8b4fe; border-color: rgba(168,85,247,.55); }

/* ---------- admin premium ---------- */
.afx-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.afx-admin-head h1 { font-size: 1.7rem; font-weight: 800; }
.afx-admin-head h1 i { color: var(--gold-1); margin-right: .5rem; }
.metric-card { position: relative; overflow: hidden; }
.metric-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--royal-2), var(--magenta), var(--gold-1)); }
.metric-card { animation: afx-rise .5s both; }
.metrics-grid .metric-card:nth-child(2) { animation-delay: .06s; }
.metrics-grid .metric-card:nth-child(3) { animation-delay: .12s; }
.metrics-grid .metric-card:nth-child(4) { animation-delay: .18s; }
.metrics-grid .metric-card:nth-child(5) { animation-delay: .24s; }
.metrics-grid .metric-card:nth-child(6) { animation-delay: .3s; }

/* ---------- OTP verification ---------- */
.afx-verify-card { text-align: center; }
.afx-verify-ring { animation: afx-ring 2.6s ease-in-out infinite; }
@keyframes afx-ring { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(251,191,36,0)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(251,191,36,.55)); } }
.afx-code-timer { font-size: .85rem; color: var(--text-secondary, #aaa); margin: .4rem 0 1.2rem; }
.afx-code-timer b { color: var(--gold-1); font-variant-numeric: tabular-nums; }
.afx-otp-boxes { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.4rem; }
.afx-otp-boxes input { width: 46px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 800; padding: 0; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); color: #fff; transition: border-color .2s, box-shadow .2s, transform .15s; }
.afx-otp-boxes input:focus { border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(251,191,36,.22); outline: none; transform: translateY(-2px); }
.link-btn:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }

/* ---------- password strength ---------- */
.afx-strength { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: .5rem; }
.afx-strength i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #e50914, var(--gold-1), #46d369); transition: width .3s ease; }
.afx-strength-label { font-size: .75rem; color: var(--text-muted, #888); margin-top: .25rem; display: block; }

/* ---------- landing backdrop slideshow ---------- */
.afx-slideshow { position: absolute; inset: 0; overflow: hidden; }
.afx-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 7s linear; }
.afx-slide-bg.on { opacity: .38; transform: scale(1); }
.afx-hero-landing { position: relative; }
.afx-hero-landing > *:not(.afx-slideshow) { position: relative; z-index: 1; }
.afx-hero-landing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,6,14,.92) 30%, rgba(7,6,14,.55) 60%, rgba(7,6,14,.25)); pointer-events: none; }

/* ---------- floating glass badges ---------- */
.afx-float-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; padding: .55rem 1rem; border-radius: 999px; background: rgba(14,12,26,.7); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(0,0,0,.5); animation: afx-floaty 5s ease-in-out infinite; }
.afx-float-badge.gold { color: var(--gold-1); border-color: rgba(251,191,36,.5); }
.afx-float-badge.rose { color: #f9a8d4; border-color: rgba(236,72,153,.5); }

/* ---------- showcase rails ---------- */
.afx-rail-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.afx-rail-title .tag { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-1); }
.afx-rail { display: flex; gap: 1rem; overflow-x: auto; padding: .4rem .2rem 1.2rem; scroll-snap-type: x mandatory; }
.afx-rail::-webkit-scrollbar { height: 6px; }
.afx-rail::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--royal-2), var(--magenta)); border-radius: 3px; }
.afx-show-card { position: relative; flex: 0 0 168px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); background: #141021; transition: transform .35s cubic-bezier(.2,.7,.3,1.4), box-shadow .35s, border-color .35s; animation: afx-rise .6s both; }
.afx-rail .afx-show-card:nth-child(2) { animation-delay: .05s; } .afx-rail .afx-show-card:nth-child(3) { animation-delay: .1s; }
.afx-rail .afx-show-card:nth-child(4) { animation-delay: .15s; } .afx-rail .afx-show-card:nth-child(5) { animation-delay: .2s; }
.afx-rail .afx-show-card:nth-child(n+6) { animation-delay: .25s; }
.afx-show-card:hover { transform: translateY(-10px) scale(1.04); border-color: rgba(251,191,36,.6); box-shadow: 0 22px 50px rgba(109,40,217,.45); z-index: 2; }
.afx-show-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.afx-show-rank { position: absolute; left: .45rem; bottom: 3.4rem; font-size: 2.2rem; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); text-shadow: 0 4px 18px rgba(0,0,0,.8); pointer-events: none; }
.afx-show-info { padding: .6rem .7rem .75rem; }
.afx-show-info b { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afx-show-info span { font-size: .72rem; color: var(--text-muted, #888); }
.afx-show-info .st { color: var(--gold-1); }
.afx-new-flag { position: absolute; top: .5rem; left: .5rem; font-size: .65rem; font-weight: 800; letter-spacing: .1em; padding: .25rem .6rem; border-radius: 999px; background: linear-gradient(135deg, var(--magenta), var(--royal-1)); color: #fff; box-shadow: 0 6px 16px rgba(236,72,153,.5); }
.afx-lock-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7,6,14,.45); opacity: 0; transition: opacity .3s; }
.afx-show-card:hover .afx-lock-veil { opacity: 1; }
.afx-lock-veil i { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); color: #1a1005; font-size: 1rem; }

/* ---------- Alvin AI magic link ---------- */
.afx-ai-link { border: 1px solid transparent; border-radius: 999px; background: linear-gradient(var(--bg-secondary, #141414), var(--bg-secondary, #141414)) padding-box, linear-gradient(135deg, var(--royal-2), var(--magenta), var(--gold-1)) border-box; font-weight: 700 !important; }
.afx-ai-link i { background: linear-gradient(135deg, var(--royal-2), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.afx-ai-link:hover { box-shadow: 0 0 18px rgba(168,85,247,.5); color: #fff !important; background: linear-gradient(rgba(109,40,217,.25), rgba(236,72,153,.18)) padding-box, linear-gradient(135deg, var(--royal-2), var(--magenta), var(--gold-1)) border-box; }
.afx-ai-magic { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: #d8b4fe; padding: .55rem 1.1rem; border-radius: 999px; border: 1px dashed rgba(168,85,247,.55); background: rgba(109,40,217,.12); transition: all .3s ease; animation: afx-ai-glow 3s ease-in-out infinite; }
.afx-ai-magic:hover { color: #fff; border-style: solid; box-shadow: 0 0 26px rgba(168,85,247,.55); transform: translateY(-1px); }
.afx-ai-magic b { color: var(--gold-1); }
@keyframes afx-ai-glow { 50% { box-shadow: 0 0 18px rgba(236,72,153,.35); } }

/* ---------- alert shake (unmissable errors) ---------- */
.alert-danger { animation: slideDown .3s ease, afx-shake .45s ease .1s; }
@keyframes afx-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ---------- company brand lockup (ALVIN.AI — keep on every page) ---------- */
.afx-company { display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: .82rem; color: var(--text-secondary, #aaa); padding: .4rem .8rem .4rem .5rem; border-radius: 999px; border: 1px solid rgba(168,85,247,.35); background: rgba(109,40,217,.1); transition: all .3s ease; }
.afx-company:hover { color: #fff; border-color: rgba(34,211,238,.6); box-shadow: 0 0 20px rgba(34,211,238,.3); transform: translateY(-1px); }
.afx-company b { background: linear-gradient(92deg, #22d3ee, #a855f7, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 1px; }
.afx-company img { display: block; }

/* ---------- anchor offset (sticky topbar) ---------- */
#auth, #features, #plans, #fresh { scroll-margin-top: 110px; }

/* ---------- hero warp: flock of snaps flying at the viewer ---------- */
.afx-warp-stage { perspective: 950px; width: min(48vw, 640px); right: -3rem; display: block; transform: translateY(-50%); }
.afx-warp-stage .afx-warp-core {
    position: absolute; left: 50%; top: 50%; width: 190px; height: 190px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(168,85,247,.4), rgba(236,72,153,.12) 55%, transparent 70%);
    filter: blur(6px); pointer-events: none;
    animation: afx-core-pulse 3.2s ease-in-out infinite;
}
@keyframes afx-core-pulse { 50% { transform: translate(-50%, -50%) scale(1.25); opacity: .75; } }
.afx-warp-bit {
    position: absolute; left: 50%; top: 50%;
    border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #2a1650, #6d28d9 60%, #ec4899);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 26px rgba(168,85,247,.35);
    opacity: 0; will-change: transform, opacity;
    animation: afx-fly var(--dur, 3.4s) linear forwards;
}
.afx-warp-bit img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes afx-fly {
    0% { transform: translate(-50%,-50%) translate3d(var(--sx, 0px), var(--sy, 0px), -950px) rotate(var(--rot, 0deg)) scale(.42); opacity: 0; }
    12% { opacity: 1; }
    68% { opacity: 1; }
    100% { transform: translate(-50%,-50%) translate3d(var(--ex, 0px), var(--ey, 0px), 430px) rotate(0deg) scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .afx-warp-bit { animation-duration: 7s; }
}

/* ---------- responsive: laptop / tablet / mobile ---------- */
@media (max-width: 1024px) {
    .afx-hero-art { display: none; }
    .afx-float-badge { display: none; }
    .afx-auth-wrap { grid-template-columns: 1fr; }
    .table-wrap, .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-table { min-width: 620px; }
}
@media (max-width: 640px) {
    .afx-topbar, .afx-section, .afx-hero-landing { padding-left: 1.1rem; padding-right: 1.1rem; }
    .afx-hero-landing { min-height: 78vh; padding-top: 3rem; padding-bottom: 3rem; }
    .afx-welcome { margin: 4.6rem 1rem 1.2rem; padding: 1.5rem; }
    .afx-cta-row .btn { flex: 1; justify-content: center; }
    .afx-auth-wrap { padding: 1.5rem 1.1rem; }
    .afx-auth-card { padding: 1.5rem 1.2rem; }
    .afx-top-actions .btn-outline { display: none; }
    .afx-mini-stats { gap: 1.2rem; }
    .afx-show-card { flex: 0 0 144px; }
    .afx-show-rank { font-size: 1.8rem; bottom: 3.1rem; }
    .modal-content { padding: 1.4rem 1.1rem; }
    .modal { padding: 1rem; }
    .afx-otp-boxes { gap: .4rem; }
    .afx-otp-boxes input { width: 40px; height: 50px; font-size: 1.3rem; }
    .afx-plans { grid-template-columns: 1fr; }
    .afx-grid-3 { grid-template-columns: 1fr; }
    .afx-footer .frow { flex-direction: column; }
}
@media (max-width: 400px) {
    .afx-otp-boxes input { width: 34px; height: 46px; font-size: 1.2rem; }
    .afx-mega { font-size: 2rem; }
}