@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");

:root {
  --blue: #2563eb;
  --blue-dark: #1745b8;
  --black: #080b12;
  --text: #111827;
  --muted: #687386;
  --light: #f7f9fc;
  --border: #e6eaf0;
  --white: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Outfit", sans-serif;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.background-grid {
  position: fixed; inset: 0; z-index: -5; pointer-events: none;
  background-image:
    linear-gradient(rgba(37,99,235,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.035) 1px, transparent 1px);
  background-size: 60px 60px;
}
.glow {
  position: fixed; width: 500px; height: 500px; border-radius: 50%;
  filter: blur(100px); opacity: .08; pointer-events: none; z-index: -3;
}
.glow-one { top: -250px; right: -150px; background: #2563eb; }
.glow-two { bottom: -300px; left: -200px; background: #60a5fa; }

.header {
  position: sticky; top: 0; z-index: 1000; width: 100%; height: 78px;
  padding: 0 5.5%; display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.88); backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px); border-bottom: 1px solid rgba(17,24,39,.07);
  box-shadow: 0 4px 25px rgba(15,23,42,.035);
}
.logo-container { display:flex; align-items:center; gap:13px; }
.logo-container img { width:46px; height:46px; object-fit:contain; transition:transform .3s ease; }
.logo-container:hover img { transform:scale(1.05); }
.logo-divider { width:1px; height:34px; background:#dfe4eb; }
.ecell-brand { display:flex; flex-direction:column; justify-content:center; line-height:1; }
.ecell-brand strong { color:#111827; font-size:15px; font-weight:700; letter-spacing:1.8px; white-space:nowrap; }
.ecell-brand span { margin-top:5px; color:var(--blue); font-size:9px; font-weight:700; letter-spacing:2.8px; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:34px; margin-left:auto; margin-right:35px; }
.nav a { position:relative; display:inline-flex; align-items:center; padding:8px 0; color:#596273; font-size:13px; font-weight:500; transition:color .25s ease; }
.nav a:hover { color:var(--blue); }
.nav-actions { display:flex; align-items:center; }
.btn-nav-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:8px; color:#fff; background:var(--black); font-size:12px; font-weight:600; transition:transform .25s ease, background .25s ease; }
.btn-nav-cta:hover { background:var(--blue); transform:translateY(-2px); }
.btn-nav-cta span, .mobile-cta span { font-size:16px; }
.menu-btn { display:none; border:0; background:transparent; color:var(--black); }
.mobile-menu { display:none; }
.status-dot {
  width:6px; height:6px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 5px rgba(37,99,235,.1);
}

.registration-hero {
  min-height: calc(100vh - 78px); padding: 78px 8%;
  display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:80px;
}
.hero-copy { max-width:650px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; padding:8px 13px;
  background:#f1f5ff; border:1px solid #dce6ff; border-radius:50px;
  color:#3156a7; font-size:11px; font-weight:600; letter-spacing:1.2px;
}
.hero-copy h1 {
  margin-top:28px; font-size:clamp(4.8rem,8vw,8.5rem); line-height:.8;
  letter-spacing:-6px; font-weight:800; color:var(--black);
}
.hero-copy h1 span {
  display:block; margin-top:12px; color:transparent;
  background:linear-gradient(110deg,#111827,#2563eb,#60a5fa);
  -webkit-background-clip:text; background-clip:text;
}
.hero-line { width:70px; height:4px; margin-top:36px; background:var(--blue); border-radius:20px; }
.hero-copy h2 { margin-top:22px; font-size:clamp(1.6rem,2.7vw,2.5rem); line-height:1.1; font-weight:400; }
.hero-copy h2 strong { font-weight:700; }
.hero-copy > p { max-width:550px; margin-top:20px; color:var(--muted); font-size:15px; line-height:1.7; }
.hero-meta { display:flex; gap:35px; margin-top:42px; }
.hero-meta div { display:flex; flex-direction:column; }
.hero-meta strong { font-size:19px; }
.hero-meta span { margin-top:3px; color:#8992a2; font-size:11px; text-transform:uppercase; letter-spacing:1px; }

.form-shell {
  padding:38px; background:rgba(255,255,255,.9); border:1px solid var(--border);
  border-radius:22px; box-shadow:0 25px 80px rgba(15,23,42,.08);
  backdrop-filter:blur(15px);
}
.section-tag { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:2px; }
.form-heading {
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:18px;
}
.form-heading h3 { font-size:32px; letter-spacing:-1px; }
.form-heading p { margin-top:5px; color:var(--muted); font-size:13px; }
.amount-pill {
  min-width:90px; padding:10px 13px; text-align:right; background:#f1f5ff;
  border:1px solid #dce6ff; border-radius:10px;
}
.amount-pill small { display:block; color:#6d7a91; font-size:9px; letter-spacing:1.5px; }
.amount-pill strong { display:block; margin-top:2px; color:var(--blue); font-size:18px; }

.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; }
.field > span { font-size:12px; font-weight:600; color:#333b48; }
.field input, .field select {
  width:100%; height:50px; padding:0 14px; outline:none; color:#172033;
  background:#fbfcfe; border:1px solid #dfe4ec; border-radius:9px;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field select { appearance:auto; }
.field input::placeholder { color:#a0a8b5; }
.field input:focus, .field select:focus {
  background:#fff; border-color:#8fb0ff; box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
.field.invalid input, .field.invalid select { border-color:#f3a1a1; }
.error { min-height:14px; color:var(--danger); font-size:10px; }

.payment-summary {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:25px; padding:16px; border:1px solid #e5e9f0; border-radius:12px; background:#f8fafc;
}
.payment-summary div { display:flex; flex-direction:column; gap:3px; }
.payment-summary span { color:#7a8494; font-size:11px; }
.payment-summary strong { font-size:19px; }
.payment-note { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.payment-note .material-symbols-rounded { font-size:16px; color:var(--blue); }

.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 20px; border:1px solid var(--blue); border-radius:9px;
  color:#fff; background:var(--blue); font-size:13px; font-weight:600;
  transition:.3s ease; box-shadow:0 10px 25px rgba(37,99,235,.18);
}
.btn-primary:hover { background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 15px 30px rgba(37,99,235,.24); }
.submit-btn { width:100%; margin-top:16px; }
.form-footnote { margin-top:13px; color:#8b94a2; text-align:center; font-size:10px; line-height:1.5; }

.info-section { padding:120px 9%; background:#f8fafc; border-top:1px solid var(--border); }
.info-heading { margin-top:35px; display:flex; justify-content:space-between; align-items:flex-end; gap:60px; }
.info-heading h2 { font-size:clamp(3rem,6vw,5.5rem); line-height:.95; letter-spacing:-3px; }
.info-heading h2 span { color:var(--blue); }
.info-heading p { max-width:420px; color:var(--muted); font-size:14px; line-height:1.7; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:60px; }
.process-card {
  min-height:270px; padding:30px; position:relative; background:#fff;
  border:1px solid var(--border); border-radius:18px; transition:.4s ease;
}
.process-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(19,37,70,.08); }
.process-card.dark { color:#fff; background:var(--black); }
.process-card.dark p { color:#aeb7c6; }
.process-number { position:absolute; top:28px; right:28px; color:#9ba5b5; font-size:11px; }
.process-card > .material-symbols-rounded {
  width:45px; height:45px; display:flex; align-items:center; justify-content:center;
  color:var(--blue); background:#eaf1ff; border-radius:10px; font-size:22px;
}
.process-card h3 { margin-top:35px; font-size:24px; }
.process-card p { margin-top:12px; color:var(--muted); font-size:13px; line-height:1.6; }

footer {
  padding:55px 8% 25px; display:flex; justify-content:space-between; gap:30px;
  background:#06080d; color:#fff;
}
footer strong { letter-spacing:2px; font-size:13px; }
footer p { margin-top:10px; color:#7e8796; font-size:12px; }
footer > span { color:#616a78; font-size:10px; align-self:flex-end; }

.modal-backdrop {
  position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,8,15,.58); backdrop-filter:blur(10px);
}
.modal-backdrop.active { display:flex; animation:fadeIn .2s ease; }
.modal {
  width:min(500px,100%); max-height:92vh; overflow:auto; position:relative;
  padding:34px; background:#fff; border:1px solid #e4e8ef; border-radius:22px;
  box-shadow:0 30px 100px rgba(0,0,0,.2); animation:modalUp .25s ease;
}
.modal-close {
  position:absolute; top:15px; right:15px; width:38px; height:38px; border:1px solid #e1e5ec;
  border-radius:9px; background:#f7f9fc; color:#596273; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { color:var(--blue); background:#eef4ff; }
.modal-tag { color:var(--blue); font-size:10px; font-weight:700; letter-spacing:2px; }
.modal h2 { margin-top:16px; font-size:clamp(2.4rem,6vw,3.8rem); line-height:.92; letter-spacing:-2px; }
.modal h2 span { color:var(--blue); }
.modal-subtitle { margin-top:12px; color:var(--muted); font-size:13px; line-height:1.5; }

.qr-wrap {
  width:230px; height:230px; margin:25px auto 20px; padding:13px; display:flex;
  align-items:center; justify-content:center; background:#fff; border:1px solid #e3e7ee;
  border-radius:14px; box-shadow:0 15px 40px rgba(15,23,42,.08);
}
#qrcode { display:flex; align-items:center; justify-content:center; }
#qrcode img { width:200px; height:200px; display:block; }

.payment-details {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;
}
.payment-details > div {
  padding:12px 14px; border:1px solid #e4e8ef; border-radius:10px; background:#f8fafc;
}
.payment-details span { display:block; color:#8a93a2; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.payment-details strong { display:block; margin-top:4px; font-size:13px; word-break:break-all; }

.transaction-form { padding-top:4px; border-top:1px solid #eef1f5; }
.transaction-form .btn-primary { width:100%; margin-top:8px; }

.secure-note {
  display:flex; justify-content:center; align-items:center; gap:6px; margin-top:15px;
  color:#8b94a2; font-size:10px;
}
.secure-note .material-symbols-rounded { font-size:15px; }

.success-modal { text-align:center; padding:45px 35px 35px; }
.success-icon {
  width:78px; height:78px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; background:var(--success);
  box-shadow:0 0 0 12px rgba(22,163,74,.08), 0 15px 40px rgba(22,163,74,.2);
  animation:pop .45s ease;
}
.success-icon span { font-size:42px; font-weight:700; }
.success-modal h2 { margin-top:15px; }
.success-message { max-width:390px; margin:18px auto 0; color:var(--muted); font-size:14px; line-height:1.7; }
.success-modal .btn-primary { margin-top:28px; min-width:130px; }

.toast {
  position:fixed; left:50%; bottom:25px; z-index:5000; transform:translate(-50%,20px);
  max-width:min(90vw,520px); padding:12px 16px; color:#fff; background:#111827;
  border-radius:10px; box-shadow:0 15px 40px rgba(0,0,0,.18); opacity:0; pointer-events:none;
  font-size:12px; transition:.25s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#b91c1c; }

body.modal-open { overflow:hidden; }

@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes modalUp { from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none} }
@keyframes pop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

@media (max-width: 1000px) {
  .registration-hero { grid-template-columns:1fr; gap:50px; padding:70px 6%; }
  .hero-copy { max-width:800px; }
  .form-shell { max-width:760px; width:100%; margin:auto; }
}
@media (max-width: 750px) {
  .header { height:70px; padding:0 5%; }
  .logo-mark { width:42px; height:42px; }
  .nav, .nav-actions { display:none; }
  .menu-btn { display:flex; align-items:center; justify-content:center; width:42px; height:42px; }
  .mobile-menu { position:fixed; top:70px; left:0; right:0; z-index:999; padding:18px 6%; flex-direction:column; gap:4px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--border); box-shadow:0 15px 30px rgba(15,23,42,.08); }
  .mobile-menu.active { display:flex; }
  .mobile-menu a { padding:13px 0; color:#596273; font-size:14px; font-weight:500; }
  .mobile-cta { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; color:#fff !important; background:var(--black); border-radius:8px; }
  .registration-hero { min-height:auto; padding:65px 6% 70px; }
  .hero-copy h1 { font-size:clamp(4rem,20vw,7rem); letter-spacing:-4px; }
  .hero-copy h2 { font-size:1.7rem; }
  .hero-meta { margin-top:32px; }
  .form-shell { padding:25px 20px; border-radius:18px; }
  .form-heading { align-items:flex-start; }
  .form-heading h3 { font-size:26px; }
  .field-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .payment-summary { align-items:flex-start; flex-direction:column; }
  .payment-note { white-space:normal; }
  .info-section { padding:90px 6%; }
  .info-heading { flex-direction:column; align-items:flex-start; gap:25px; }
  .info-heading h2 { font-size:3.5rem; letter-spacing:-2px; }
  .process-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; }
  footer > span { align-self:auto; }
  .modal { padding:30px 20px; }
  .modal h2 { font-size:2.8rem; }
}
.submit-spinner {
  width: 17px;
  height: 17px;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: submitSpin 0.7s linear infinite;
}

@keyframes submitSpin {
  to {
    transform: rotate(360deg);
  }
}

#submitPaymentBtn[aria-busy="true"] {
  cursor: wait;
  opacity: 0.8;
}

#submitPaymentBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}