*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{display:flex;flex-direction:column;align-items:center;background:radial-gradient(1200px 700px at 15% 10%,rgba(220,38,38,.18),transparent 55%),radial-gradient(900px 600px at 95% 20%,rgba(245,158,11,.16),transparent 55%),linear-gradient(180deg,#fff7f7 0%,#ffffff 55%,#fff8f1 100%)}
.app-wrapper{width:100%;max-width:550px;margin:0 auto}
.app-wrapper--otp{max-width:550px}
.app-wrapper--pass{max-width:550px}
.hero-top{position:relative;overflow:hidden;border-top-left-radius:1rem;border-top-right-radius:1rem;background:linear-gradient(135deg,#d90429 0%,#ef4444 52%,#f59e0b 120%)}
.hero-top .hero-overlay{position:absolute;inset:0;background:radial-gradient(700px 280px at 20% 20%,rgba(255,255,255,.35),transparent 60%),radial-gradient(400px 220px at 90% 30%,rgba(255,255,255,.18),transparent 60%)}
.hero-top .hero-content{position:relative;padding:18px 18px 14px 18px;color:#fff}
.brand-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);font-weight:800;font-size:12px;letter-spacing:.3px}
.hero-title{margin-top:10px;font-size:22px;font-weight:900;line-height:1.15;text-shadow:0 10px 25px rgba(0,0,0,.15)}
.hero-sub{margin-top:6px;font-size:13px;opacity:.95}
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.trust-badge{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:12px;font-weight:700}
.trust-badge i{opacity:.95}
.card-shell{background:#fff;border-radius:1rem;box-shadow:0 14px 40px rgba(16,24,40,.12);border:1px solid rgba(15,23,42,.06);overflow:hidden}
.header-wrap{background:#fff}
.header-img{width:100%;display:block}
.footer-wrap{background:#fff}
.footer-img{width:100%;display:block}
.section-title{font-weight:900;color:#0f172a;margin:0}
.section-sub{margin-top:6px;color:#475569;font-size:13px}
.btn-primary-premium{min-width:120px;padding:12px 14px;background:linear-gradient(135deg,#d90429 0%,#ef4444 55%,#d90429 100%);color:#fff;font-weight:900;border:none;border-radius:12px;cursor:pointer;text-align:center;white-space:nowrap;box-shadow:0 12px 22px rgba(217,4,41,.22)}
.btn-primary-premium:hover{filter:brightness(.98)}
.btn-primary-premium:active{transform:translateY(1px)}
.hint{font-size:12px;color:#64748b;margin-top:6px}
.input-group-text{background:#f8fafc}
.form-label{font-size:13px}
.iti{display:block;width:100%}
.iti .form-control{width:100%}
.premium-stepper{display:flex;align-items:center;justify-content:center;margin:6px auto 12px auto;width:100%;max-width:280px;position:relative}
.p-step{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:#64748b;background:rgba(100,116,139,.08);border:1px solid rgba(100,116,139,.2);transition:all .4s ease;position:relative;z-index:2;backdrop-filter:blur(4px)}
.p-line{flex:1;height:3px;background:rgba(100,116,139,.16);transition:all .4s ease;z-index:1;margin:0 -2px}
.p-step.active{background:linear-gradient(135deg,#d90429,#ef4444);color:#fff;border:3px solid transparent;background-clip:padding-box;transform:scale(1.12);box-shadow:0 0 18px rgba(217,4,41,.28)}
.p-step.active::before{content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;z-index:-1;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ffe7d6,#ef4444)}
.p-step.dimmed{background:#d90429;color:#fff;border:1px solid rgba(217,4,41,.55);transform:scale(1);box-shadow:none}
.p-line.active{background:linear-gradient(90deg,#d90429,#f59e0b);box-shadow:0 0 6px rgba(217,4,41,.22)}
@keyframes premiumPulse{0%{box-shadow:0 0 0 0 rgba(217,4,41,.35)}70%{box-shadow:0 0 0 12px rgba(217,4,41,0)}100%{box-shadow:0 0 0 0 rgba(217,4,41,0)}}
.p-step.pulse{animation:premiumPulse 1.5s infinite}
.otp-container{display:flex;justify-content:center;gap:10px;margin-bottom:18px;direction:ltr}
.otp-box{width:50px;height:60px;border:2px solid #e2e8f0;border-radius:14px;font-size:28px;font-weight:900;text-align:center;background:#f8fafc;color:#0f172a;transition:all .25s;padding:0}
.otp-box:focus{border-color:#d90429;box-shadow:0 0 0 3px rgba(217,4,41,.16);background:#fff;outline:none}
#loader{height:100vh;width:100vw;position:fixed;top:0;left:0;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;z-index:9999}
.loader{width:45px;aspect-ratio:1;--c:no-repeat linear-gradient(#0f172a 0 0);background:var(--c) 0% 50%,var(--c) 50% 50%,var(--c) 100% 50%;background-size:20% 100%;animation:l1 .6s infinite linear}
@keyframes l1{0%{background-size:20% 100%,20% 100%,20% 100%}33%{background-size:20% 10%,20% 100%,20% 100%}50%{background-size:20% 100%,20% 10%,20% 100%}66%{background-size:20% 100%,20% 100%,20% 10%}100%{background-size:20% 100%,20% 100%,20% 100%}}
@media (max-width:767.98px){
  .app-wrapper,.app-wrapper--otp,.app-wrapper--pass{max-width:100%}
}