@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#12385f; --navy-deep:#0a2542; --orange:#f07d22; --orange-deep:#d76a15;
  --cream:#f7f4ec; --white:#ffffff; --ink:#1c2a3a; --slate:#5c6b82; --line:#e3ddce;
  --danger:#c0392b; --danger-bg:#fdeceb;
}
*{box-sizing:border-box}
body{
  margin:0; padding:40px 16px 60px; font-family:'Inter',-apple-system,Arial,sans-serif; color:var(--ink);
  background:
    linear-gradient(180deg, rgba(8,18,32,.62), rgba(8,18,32,.72)),
    url('elevare-bg.jpg') center/cover no-repeat fixed;
  min-height:100vh;
}
.wrap{max-width:640px; margin:0 auto}
.brand{text-align:center; margin-bottom:28px}
.brand img{height:82px; margin-bottom:12px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.brand h1{
  font-family:'Fraunces',Georgia,serif; font-size:22px; letter-spacing:.05em; text-transform:uppercase;
  margin:0; color:var(--orange); font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.brand .sub{color:#e7edf5; font-size:14px; margin-top:8px; text-shadow:0 1px 6px rgba(0,0,0,.5)}

.warning-box{
  background:#fef3e2; border:1px solid #fde3b8; color:#9a6700; border-radius:10px;
  padding:12px 16px; font-size:13.5px; margin-bottom:18px; font-weight:600; text-align:center;
}

.bottom-btn-row{display:flex; gap:10px; margin-top:18px}
.btn-secondary{
  flex:1; text-align:center; background:#f4f7fb; border:1.5px solid #d7e0ea; color:var(--navy);
  font-weight:700; font-size:13px; padding:11px 14px; border-radius:8px; text-decoration:none;
}
.btn-secondary:hover{background:#eaf0f8; border-color:var(--orange)}

.card{
  background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  border:1px solid #ffffff; border-radius:20px; padding:32px;
  margin-bottom:18px; box-shadow:0 18px 50px rgba(4,14,28,.45);
}
.card h2{font-family:'Fraunces',serif; color:var(--navy); font-size:20px; margin:0 0 8px}
.card p.lead{color:var(--slate); font-size:14.5px; margin:0 0 22px}

label{display:block; font-size:12px; color:var(--navy); font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px}
select, input[type=text], input[type=email] {
  width:100%; box-sizing:border-box; background:#f4f7fb; border:1.5px solid #d7e0ea; border-radius:8px;
  padding:11px 13px; color:var(--navy); font-size:14.5px; margin-bottom:18px; font-family:inherit;
}
select:focus, input:focus{outline:none; border-color:var(--orange)}

.code-input{
  display:flex; gap:10px; justify-content:center; margin:22px 0;
}
.code-input input{
  width:48px; height:58px; text-align:center; font-size:26px; font-weight:800; margin-bottom:0;
  border-radius:10px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--orange); color:#ffffff; font-weight:800;
  padding:13px 26px; border-radius:10px; border:none; cursor:pointer; font-size:14.5px; letter-spacing:.01em;
  width:100%; font-family:inherit;
}
.btn:hover{background:var(--orange-deep)}
.btn.secondary{background:var(--navy)}
.btn.secondary:hover{background:var(--navy-deep)}
.btn-link{
  display:block; text-align:center; margin-top:16px; color:var(--slate); font-size:13px; text-decoration:none;
}
.btn-link:hover{color:var(--navy)}

.hub-btn{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:var(--navy); color:#ffffff; text-decoration:none; padding:20px 24px; border-radius:14px;
  margin-bottom:16px; font-weight:800; font-size:16px; box-shadow:0 10px 26px rgba(10,37,66,.3);
  border:none; cursor:pointer; font-family:inherit;
}
.hub-btn:hover{background:var(--navy-deep)}
.hub-btn .arrow{opacity:.7}
.hub-btn small{display:block; font-weight:500; font-size:12.5px; color:#cfe0f2; margin-top:3px}

.error-box{
  background:var(--danger-bg); border:1px solid #f6c6c1; color:var(--danger); border-radius:10px;
  padding:12px 16px; font-size:13.5px; margin-bottom:18px;
}
.hint{color:var(--slate); font-size:13px; text-align:center; margin-top:4px}