/* ===== A2ZWorks — Auth Pages Brand New Design ===== */
:root{
  --a2z-1:#7c3aed; --a2z-2:#06b6d4; --a2z-3:#f59e0b; --a2z-4:#ec4899;
  --a2z-ink:#0f172a; --a2z-glass:rgba(255,255,255,.14);
  --a2z-border:rgba(255,255,255,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:'Poppins','Mukta',system-ui,sans-serif;color:#fff}
body.a2z{
  background:#0b1020;
  background-image:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(6,182,212,.45), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(236,72,153,.45), transparent 60%),
    linear-gradient(135deg,#0b1020,#1a103d 50%,#06243d);
  background-attachment:fixed;
  overflow-x:hidden;
}
/* Animated aurora layer */
.a2z-aurora{position:fixed;inset:-20%;z-index:0;filter:blur(80px);opacity:.7;pointer-events:none}
.a2z-aurora::before,.a2z-aurora::after{
  content:"";position:absolute;width:55vmax;height:55vmax;border-radius:50%;
  background:conic-gradient(from 0deg,#7c3aed,#06b6d4,#f59e0b,#ec4899,#7c3aed);
  animation:a2zSpin 22s linear infinite;
}
.a2z-aurora::after{animation-direction:reverse;animation-duration:32s;top:30%;left:40%;opacity:.6}
@keyframes a2zSpin{to{transform:rotate(360deg)}}

/* Floating emojis wallpaper */
.a2z-emoji-bg{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.a2z-emoji-bg span{
  position:absolute;font-size:34px;opacity:.18;
  animation:a2zFloat 18s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
@keyframes a2zFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-40px) rotate(12deg)}
}

/* Top brand bar */
.a2z-nav{
  position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;backdrop-filter:blur(14px);
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.a2z-brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.5px}
.a2z-logo{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;
  background:conic-gradient(from 200deg,#7c3aed,#06b6d4,#f59e0b,#ec4899,#7c3aed);
  box-shadow:0 10px 30px rgba(124,58,237,.5), inset 0 0 0 2px rgba(255,255,255,.4);
  animation:a2zPulse 3s ease-in-out infinite;
}
@keyframes a2zPulse{50%{transform:scale(1.06);filter:hue-rotate(40deg)}}
.a2z-brand h2{margin:0;font-size:22px;background:linear-gradient(90deg,#fff,#c4b5fd,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.a2z-brand small{display:block;font-size:11px;font-weight:600;color:#cbd5e1;letter-spacing:1.4px;text-transform:uppercase}
.a2z-nav-cta{display:flex;gap:10px}
.a2z-chip{
  padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;
  background:var(--a2z-glass);border:1px solid var(--a2z-border);color:#fff;text-decoration:none;
  transition:.25s;backdrop-filter:blur(10px)
}
.a2z-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.22)}

/* Page shell */
.a2z-shell{
  position:relative;z-index:2;min-height:calc(100vh - 82px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;
  padding:40px 6vw;align-items:center;
}
@media(max-width:960px){.a2z-shell{grid-template-columns:1fr;padding:24px 18px;gap:18px}}

/* Hero */
.a2z-hero h1{
  font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0 0 14px;font-weight:900;
  background:linear-gradient(120deg,#fff 10%,#c4b5fd 40%,#7dd3fc 70%,#fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.a2z-hero p.lead{font-size:18px;color:#e2e8f0;max-width:560px;line-height:1.6}
.a2z-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.a2z-badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-size:13px;font-weight:600;backdrop-filter:blur(8px)
}
.a2z-features{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px;max-width:560px
}
.a2z-feat{
  display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);transition:.3s
}
.a2z-feat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.35);box-shadow:0 16px 40px rgba(124,58,237,.3)}
.a2z-feat .ic{font-size:26px;line-height:1}
.a2z-feat b{display:block;font-size:14px;margin-bottom:2px}
.a2z-feat span{font-size:12px;color:#cbd5e1}

/* Auth card */
.a2z-card{
  position:relative;padding:32px 28px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  animation:a2zPop .6s cubic-bezier(.2,1.4,.4,1);
}
@keyframes a2zPop{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.a2z-card::before{
  content:"";position:absolute;inset:-2px;border-radius:28px;z-index:-1;
  background:linear-gradient(120deg,#7c3aed,#06b6d4,#f59e0b,#ec4899);
  background-size:300% 300%;animation:a2zShift 8s ease infinite;filter:blur(14px);opacity:.55;
}
@keyframes a2zShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.a2z-card h3{margin:0 0 4px;font-size:26px;font-weight:900}
.a2z-card .sub{margin:0 0 22px;color:#e2e8f0;font-size:14px}
.a2z-card .emoji-head{font-size:46px;text-align:center;margin-bottom:6px;animation:a2zBounce 2.4s ease-in-out infinite}
@keyframes a2zBounce{50%{transform:translateY(-10px) rotate(-6deg)}}

.a2z-fg{margin-bottom:14px}
.a2z-fg label{display:block;font-size:12px;font-weight:700;color:#e2e8f0;margin-bottom:6px;letter-spacing:.4px;text-transform:uppercase}
.a2z-ig{position:relative}
.a2z-ig .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;opacity:.9}
.a2z-ig input,.a2z-ig textarea{
  width:100%;padding:14px 14px 14px 44px;border-radius:14px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);color:#fff;font-size:15px;font-weight:600;
  outline:none;transition:.25s;font-family:inherit
}
.a2z-ig textarea{min-height:80px;padding-top:12px}
.a2z-ig input::placeholder,.a2z-ig textarea::placeholder{color:#cbd5e1;font-weight:500}
.a2z-ig input:focus,.a2z-ig textarea:focus{
  border-color:#a78bfa;background:rgba(255,255,255,.18);
  box-shadow:0 0 0 4px rgba(167,139,250,.25)
}

.a2z-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 18px;border-radius:14px;border:0;cursor:pointer;
  font-size:16px;font-weight:800;letter-spacing:.4px;color:#fff;
  background:linear-gradient(120deg,#7c3aed,#ec4899 50%,#06b6d4);
  background-size:220% 220%;box-shadow:0 14px 30px rgba(124,58,237,.5);
  transition:.3s;animation:a2zShift 6s ease infinite
}
.a2z-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(236,72,153,.55)}
.a2z-btn.ghost{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.3);
  box-shadow:none;animation:none;color:#fff
}
.a2z-btn.ghost:hover{background:rgba(255,255,255,.2)}

.a2z-link{color:#a5f3fc;font-weight:700;text-decoration:none}
.a2z-link:hover{color:#fbbf24}

.a2z-alert{padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;margin-bottom:14px;border:1px solid;backdrop-filter:blur(6px)}
.a2z-alert.err{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.55);color:#fecaca}
.a2z-alert.ok{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.55);color:#bbf7d0}
.a2z-alert.warn{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.55);color:#fde68a}

.a2z-row{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 10px}
.a2z-foot{text-align:center;margin-top:18px;color:#cbd5e1;font-size:12px}
.a2z-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#cbd5e1;font-size:12px}
.a2z-divider::before,.a2z-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.2)}

.a2z-marquee{
  position:relative;z-index:3;overflow:hidden;white-space:nowrap;
  background:linear-gradient(90deg,rgba(124,58,237,.35),rgba(6,182,212,.35));
  border-top:1px solid rgba(255,255,255,.15);padding:10px 0;font-weight:700;letter-spacing:.5px
}
.a2z-marquee span{display:inline-block;padding-left:100%;animation:a2zMarq 28s linear infinite}
@keyframes a2zMarq{to{transform:translateX(-100%)}}