*{margin:0;padding:0;box-sizing:border-box}
:root{
  --panel:#0c1528;
  --line:rgba(255,255,255,.10);
  --text:#ffffff;
  --muted:#c7d2e4;
  --gold-1:#fff2b8;
  --gold-2:#efc55f;
  --gold-3:#c88411;
  --green-1:#39e67d;
  --green-2:#15b457;
  --blue-btn:#203454;
  --danger:#ff7a7a;
}
html,body{min-height:100%;overflow-x:hidden}
body{
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(circle at top,#112751 0%,#05070d 42%,#020308 100%);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.hidden{display:none !important}

.hero-section{
  position:relative;
  min-height:100vh;
  background:
    linear-gradient(120deg, rgba(2,6,14,.90), rgba(4,8,18,.78)),
    url("../images/banner.png") center/cover no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 10%, rgba(52,110,255,.22), transparent 25%),
    radial-gradient(circle at 88% 85%, rgba(255,205,94,.16), transparent 25%);
  pointer-events:none;
}
.container{
  width:min(760px, calc(100% - 20px));
  margin:0 auto;
  position:relative;
  z-index:2;
}
.single-column{
  min-height:100vh;
  display:grid;
  gap:18px;
  align-content:start;
  padding:22px 0 104px;
}
.form-card{
  position:relative;
  overflow:hidden;
  padding:22px 18px 18px;
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(13,21,40,.98), rgba(7,12,22,.99));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 54px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.card-glow{
  position:absolute;
  width:220px;
  height:220px;
  right:-60px;
  top:-60px;
  background:radial-gradient(circle, rgba(255,213,103,.18) 0%, rgba(255,213,103,0) 70%);
  pointer-events:none;
}
.form-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:30px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,240,170,.55), rgba(255,255,255,.04), rgba(57,230,125,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.mini-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  position:relative;
  z-index:2;
}
.logo-pill{
  width:62px;
  height:62px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
}
.mini-logo{
  width:42px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.30));
}
.mini-title{
  font-size:18px;
  font-weight:800;
  line-height:1.1;
}
.mini-sub{
  color:#9db1cf;
  font-size:13px;
}
.form-badge{
  display:inline-flex;
  margin-bottom:20px;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#f0cf78;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
  z-index:2;
}
.form-title{
  font-size:30px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.03em;
  margin-bottom:8px;
  position:relative;
  z-index:2;
}
.form-copy{
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  margin-bottom:16px;
  position:relative;
  z-index:2;
}
.stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  position:relative;
  z-index:2;
}
.stat-chip{
  padding:9px 12px;
  border-radius:999px;
  background:#16233f;
  color:#edf4ff;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
}
.field{margin-bottom:14px;position:relative;z-index:2}
.field label{
  display:block;
  margin-bottom:7px;
  color:#edf3ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.field input{
  width:100%;
  height:54px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#101b33;
  color:#fff;
  font-size:15px;
  outline:none;
  transition:all .18s ease;
}
.field input:focus{
  border-color:#f0cf78;
  box-shadow:0 0 0 3px rgba(240,207,120,.12);
  transform:translateY(-1px);
}
.btn{
  min-height:54px;
  border:none;
  border-radius:18px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.20);
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{
  width:100%;
  background:linear-gradient(135deg,var(--green-1),var(--green-2));
  color:#fff;
}
.btn-secondary{
  background:var(--blue-btn);
  color:#fff;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2),var(--gold-3));
  color:#111;
}
.otp-section{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:2;
}
.complete-section{
  margin-top:14px;
  position:relative;
  z-index:2;
}
.divider{
  margin-bottom:14px;
  text-align:center;
}
.divider span{
  display:inline-block;
  color:#f0cf78;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.otp-inputs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.otp-box{
  width:100%;
  height:58px;
  text-align:center;
  font-size:24px;
  font-weight:800;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#101b33;
  color:#fff;
  outline:none;
  transition:all .18s ease;
}
.otp-box:focus{
  border-color:#f0cf78;
  box-shadow:0 0 0 3px rgba(240,207,120,.12);
  transform:translateY(-1px);
}
.otp-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.timer{
  min-height:18px;
  margin-top:8px;
  color:#f0cf78;
  font-size:13px;
  text-align:right;
  position:relative;
  z-index:2;
}
.msg{
  min-height:22px;
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  text-align:center;
  position:relative;
  z-index:2;
}
.ok{color:#74f0a3}
.err{color:var(--danger)}
.footer-note{
  margin-top:16px;
  color:#aebed6;
  font-size:20px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  position:relative;
  z-index:2;
}

.minimal-brand{
  display:grid;
  gap:12px;
}
.topline{
  color:#f0cf78;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-title{
  font-size:clamp(34px,7vw,56px);
  line-height:.98;
  font-weight:900;
  letter-spacing:-.03em;
}
.hero-copy{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}
.sticky-whatsapp{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:min(360px, calc(100vw - 16px));
  justify-content:center;
  padding:15px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--green-1),var(--green-2));
  color:#fff;
  font-weight:800;
  box-shadow:0 16px 28px rgba(0,0,0,.35);
}

.thank-you-wrap{
  text-align:center;
  padding:28px 12px 20px;
}
.thank-logo{
  width:90px;
  margin:0 auto 14px;
}
.thank-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#74f0a3;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:12px;
}
.thank-title{
  font-size:30px;
  font-weight:900;
  margin-bottom:8px;
}
.thank-copy{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  margin-bottom:18px;
}
.thank-btn{
  width:100%;
}

@media (max-width:640px){
  .container{width:min(100% - 16px, 760px)}
  .single-column{padding:18px 0 104px}
  .sticky-whatsapp{
    min-width:calc(100vw - 16px);
    bottom:10px;
    padding:14px 18px;
  }
}