:root{
  --bg1:#07112a;
  --bg2:#0f3a8a;
  --accent:#f6b21a;
  --muted:#dfe9f7;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background: linear-gradient(145deg,var(--bg1),var(--bg2));
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  padding:18px;
}
.container{max-width:420px;margin:36px auto}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding:18px;border-radius:16px;box-shadow: 0 12px 30px rgba(2,6,23,0.6);
  backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.04);
}
.logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:6px}
.logo img{width:88px;height:auto}
h2{color:white;margin:6px 0 8px;font-size:20px;text-align:center}
.lead{color:rgba(255,255,255,0.85);font-size:13px;margin-bottom:6px;text-align:center}
.btn{display:block;width:100%;padding:14px;font-weight:700;font-size:15px;border-radius:12px;border:none;cursor:pointer;margin-top:12px;position:relative;overflow:hidden}
.btn-primary{background:linear-gradient(135deg,var(--bg2),#07204a);color:white;box-shadow:4px 8px 24px rgba(7,14,40,0.6)}
.btn-secondary{background:linear-gradient(135deg,#0b2a66,#07203a);color:white}
.btn-link{background:transparent;color:var(--accent);border:none;padding:10px 0;font-weight:700;opacity:0.95}
.call-btn{display:block;text-align:center;text-decoration:none;padding:12px;border-radius:12px;font-weight:800;background:linear-gradient(135deg,var(--accent),#ffb84d);color:#07204a;margin-top:10px}
.form .floating-label, .floating-label{position:relative;margin-top:12px}
input[type="text"], input[type="password"], input[type="tel"], input[type="month"]{
  width:100%;padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.02);color:white;font-size:15px
}
.floating-label label{position:absolute;left:12px;top:12px;color:rgba(255,255,255,0.75);pointer-events:none;transition:0.25s}
.floating-label input:focus + label, .floating-label input:not(:placeholder-shown) + label{top:-8px;left:10px;font-size:12px;color:var(--accent)}
input:focus{outline:none;box-shadow:0 0 12px rgba(246,178,26,0.12);border-color:var(--accent);background:rgba(255,255,255,0.03)}
.info-text{text-align:center;color:rgba(255,255,255,0.75);margin-top:8px;font-size:13px}
.otp-box-wrapper{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
.otp-box{width:48px;height:56px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.02);color:white;font-size:22px;text-align:center}
.otp-box:focus{transform:scale(1.08);box-shadow:0 6px 20px rgba(246,178,26,0.12);border-color:var(--accent);outline:none}
.actions{display:flex;gap:10px;margin-top:12px}
.actions .btn-link{flex:1}
.center-note{text-align:center;margin-top:12px;color:rgba(255,255,255,0.7);font-size:13px}

/* Realistic card styles */
.real-card{
  width:100%;
  max-width:360px;
  height:220px;
  border-radius:18px;
  padding:18px;
  color:white;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg,#0d2a59,#1e3a8a);
  box-shadow: 0 18px 40px rgba(2,6,23,0.7);
  margin:12px auto;
  border:1px solid rgba(255,255,255,0.06);
}
.real-card .chip{
  width:56px;height:40px;border-radius:6px;background:linear-gradient(180deg,#d4c28a,#b89e5a);box-shadow:inset 0 2px 0 rgba(255,255,255,0.2);
}
.real-card .brand{
  position:absolute;right:18px;top:18px;font-weight:700;color:#ffd873;
}
.real-card .card-number{
  margin-top:28px;font-size:20px;letter-spacing:4px;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,0.4);
}
.real-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.real-card .label{font-size:10px;color:rgba(255,255,255,0.7);letter-spacing:1px}
.real-card .valid{font-weight:700;letter-spacing:1px}
.real-card .cardholder{opacity:0.0;height:1px} /* hidden per request */

.small {font-size:13px;color:rgba(255,255,255,0.75)}

@keyframes floatIn {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.real-card{animation:floatIn .6s ease}
@media (max-width:420px){ .container{margin:20px auto} .real-card{height:200px} }