/* ========== Reset & Base ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --accent-a:#00ff7f; --accent-b:#00bfff; --text:#ffffff; --muted:#a0a0a0; --muted-2:#808080; }
html, body { height: 100%; }
body {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  background:#000; color:var(--text); min-height:100vh; overflow-x:hidden; font-weight:400; letter-spacing:-0.01em;
}

/* ========== Background FX ========== */
.premium-bg{ position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,255,127,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,191,255,.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(147,51,234,.02) 0%, transparent 50%),
    linear-gradient(135deg, #000 0%, #0a0a0a 50%, #000 100%);
}
.energy-grid{ position:absolute; inset:0; opacity:.03;
  background-image:
    linear-gradient(rgba(0,255,127,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,127,.1) 1px, transparent 1px);
  background-size:100px 100px; animation:gridMove 20s linear infinite;
}
@keyframes gridMove { 0%{transform:translate(0,0)} 100%{transform:translate(100px,100px)} }
.floating-orbs{ position:absolute; inset:0; }
.orb{ position:absolute; border-radius:50%; filter:blur(1px); animation:float 8s ease-in-out infinite; }
.orb:nth-child(1){ width:4px; height:4px; background:rgba(0,255,127,.6); top:20%; left:10%; animation-delay:0s; }
.orb:nth-child(2){ width:6px; height:6px; background:rgba(0,191,255,.4); top:70%; left:80%; animation-delay:2s; }
.orb:nth-child(3){ width:3px; height:3px; background:rgba(147,51,234,.5); top:50%; left:60%; animation-delay:4s; }
@keyframes float {
  0%,100% { transform: translateY(0) translateX(0); opacity:.3; }
  33% { transform: translateY(-30px) translateX(20px); opacity:.8; }
  66% { transform: translateY(10px) translateX(-20px); opacity:.5; }
}

/* ========== Header & Nav ========== */
.header{ position:fixed; top:0; left:0; right:0; height:80px; z-index:1000;
  background:rgba(0,0,0,.8); backdrop-filter: blur(40px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:space-between; padding:0 60px;
}
.logo{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.logo-image{ display:block; }
.logo-text{ font-size:24px; font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.header-nav{ display:flex; gap:40px; align-items:center; }
.nav-link{ color:#a0a0a0; text-decoration:none; font-weight:500; font-size:15px; position:relative; transition: all .3s cubic-bezier(.4,0,.2,1); }
.nav-link:hover{ color:#fff; }
.nav-link::after{ content:''; position:absolute; bottom:-8px; left:0; right:0; height:2px;
  background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  transform:scaleX(0); transition:transform .3s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }

.header-cta{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:#fff; padding:12px 24px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none;
  transition:all .3s ease; backdrop-filter: blur(20px);
}
.header-cta:hover{ background:rgba(255,255,255,.1); border-color:rgba(0,255,127,.3); box-shadow:0 0 20px rgba(0,255,127,.1); }
.dapp-btn{
  background:#13493f; border:1px solid rgba(0,255,127,.25);
  color:#fff; padding:12px 20px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none;
  transition: all .3s ease; text-transform:uppercase; letter-spacing:.5px;
}
.dapp-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,255,127,.3); }

/* Mobile menu */
.menu-toggle{ display:none; background:transparent; border:0; width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; cursor:pointer; }
.menu-toggle .bar{ display:block; width:22px; height:2px; background:#fff; margin:3px 0; transition:transform .25s ease, opacity .25s ease; }
.mobile-nav{ position:fixed; top:80px; right:0; left:0; background:rgba(10,10,10,.98); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.06); transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; display:flex; flex-direction:column; padding:16px 24px 24px; z-index:999;
}
.mobile-link,.mobile-cta,.mobile-dapp{ padding:14px 8px; text-decoration:none; color:#e5e5e5; font-weight:600; border-bottom:1px solid rgba(255,255,255,.06); }
.mobile-cta{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; margin-top:10px; text-align:center; }
.mobile-dapp{ background:#13493f; border:1px solid rgba(0,255,127,.25); border-radius:10px; margin-top:10px; text-align:center; }
.mobile-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.menu-toggle.open .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2){ opacity:0; }
.menu-toggle.open .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Tooltip */
.tooltip{ position:relative; display:inline-block; }
.tooltip .tooltiptext{
  visibility:hidden; width:120px; background:#111827; color:#fff; text-align:center; border-radius:6px; padding:5px;
  position:absolute; z-index:1; bottom:125%; left:50%; transform:translateX(-50%); opacity:0; transition:opacity .3s;
}
.tooltip:hover .tooltiptext{ visibility:visible; opacity:1; }

/* ========== Layout & Hero ========== */
.main-container{ margin-top:80px; min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center; padding:60px; position:relative; }
.signup-wrapper{ width:100%; max-width:1400px; display:grid; grid-template-columns: 1fr 600px; gap:80px; align-items:center; }

.hero-content{ max-width:700px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background: rgba(0,255,127,.1); border:1px solid rgba(0,255,127,.2);
  color:var(--accent-a); padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:32px;
  letter-spacing:.5px; text-transform:uppercase;
}
.hero-badge-icon{ width:6px; height:6px; background:var(--accent-a); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }

.hero-title{
  font-size:clamp(48px, 6vw, 72px); font-weight:800; line-height:.95; margin-bottom:32px; letter-spacing:-.04em;
  background:linear-gradient(135deg, #fff 0%, var(--accent-a) 50%, var(--accent-b) 100%); background-size:300% 300%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientShift 8s ease infinite;
}
@keyframes gradientShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.hero-subtitle{ font-size:20px; color:#a0a0a0; line-height:1.5; margin-bottom:48px; font-weight:400; }

.value-props{ display:grid; gap:24px; margin-bottom:48px; }
.value-prop{ display:flex; align-items:flex-start; gap:16px; }
.prop-icon{
  width:24px; height:24px; background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.prop-icon::before{ content:''; width:8px; height:8px; background:#000; border-radius:2px; }
.prop-title{ font-size:16px; font-weight:600; color:#fff; margin-bottom:4px; }
.prop-description{ font-size:14px; color:#808080; line-height:1.4; }

.elite-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; margin-top:48px; padding:32px 0; border-top:1px solid rgba(255,255,255,.05); }
.stat{ text-align:center; }
.stat-number{
  font-size:32px; font-weight:800; background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px;
}
.stat-label{ font-size:12px; color:#808080; text-transform:uppercase; letter-spacing:1px; }

/* ========== Card ========== */
.signup-card{
  background:rgba(10,10,10,.8); backdrop-filter: blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:48px; position:relative; overflow:hidden;
}
.signup-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,255,127,.03) 0%, rgba(0,191,255,.02) 100%); opacity:0; transition:opacity .5s ease; pointer-events:none; }
.signup-card:hover::before{ opacity:1; }
.form-header{ text-align:center; margin-bottom:40px; }
.form-title{ font-size:32px; font-weight:700; color:#fff; margin-bottom:12px; letter-spacing:-.02em; }
.form-subtitle{ color:#808080; font-size:16px; font-weight:400; }

/* Role cards (used on index) */
.role-section{ margin-bottom:40px; }
.section-title{ font-size:16px; font-weight:600; color:#fff; margin-bottom:20px; }
.role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.role-card{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:24px 20px; cursor:pointer; transition: all .4s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
}
.role-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,255,127,.05) 0%, rgba(0,191,255,.03) 100%); opacity:0; transition:opacity .3s ease; }
.role-card:hover::before{ opacity:1; }
.role-card:hover{ transform: translateY(-4px); border-color: rgba(0,255,127,.3); box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 40px rgba(0,255,127,.1); }
.role-card.selected{ border-color: rgba(0,255,127,.5); background: rgba(0,255,127,.05); box-shadow:0 0 40px rgba(0,255,127,.15); }
.role-card input{ display:none; }
.role-icon{ width:44px; height:44px; background: rgba(255,255,255,.05); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px; position:relative; z-index:1; }
.role-card.selected .role-icon{ background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%); }
.role-name{ font-size:16px; font-weight:600; color:#fff; margin-bottom:8px; position:relative; z-index:1; }
.role-desc{ font-size:13px; color:#808080; line-height:1.4; position:relative; z-index:1; }

/* ========== Form Styles (shared) ========== */
.form-section{ margin-bottom:32px; }
.input-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.input-group{ position:relative; }
.input-group.full-width{ grid-column:1 / -1; }

.form-label{
  font-size:13px; font-weight:600; color:#a0a0a0; margin-bottom:8px; display:block;
  text-transform:uppercase; letter-spacing:.5px;
}

.form-input{
  width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:16px 18px; font-size:16px; color:#fff; transition:all .3s ease; font-weight:400;
}
.form-input:focus{
  outline:none; border-color:rgba(0,255,127,.4); background:rgba(255,255,255,.05); box-shadow:0 0 0 4px rgba(0,255,127,.1);
}
.form-input::placeholder{ color:#606060; }

.form-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position:right 16px center; background-repeat:no-repeat; background-size:16px; cursor:pointer;
}

/* Terms */
.terms-section{ margin-bottom:32px; }
.checkbox-wrapper{ display:flex; align-items:flex-start; gap:16px; cursor:pointer; }
.custom-checkbox{
  width:20px; height:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; display:flex; align-items:center; justify-content:center; transition:all .3s ease; flex-shrink:0; margin-top:2px;
}
.custom-checkbox.checked{ background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%); border-color:transparent; box-shadow:0 0 12px rgba(0,255,127,.3); }
.custom-checkbox input{ display:none; }
.checkbox-mark{ color:#000; font-size:12px; font-weight:700; display:none; }
.custom-checkbox.checked .checkbox-mark{ display:block; }
.terms-text{ font-size:14px; color:#a0a0a0; line-height:1.5; }
.terms-link{ color:var(--accent-a); text-decoration:none; font-weight:500; }
.terms-link:hover{ text-decoration:underline; }

/* Submit */
.submit-container{ position:relative; }
.submit-btn{
  width:100%; background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);
  border:none; border-radius:12px; padding:18px 24px; font-size:16px; font-weight:700; color:#000;
  cursor:pointer; transition: all .4s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; text-transform:uppercase; letter-spacing:.5px; text-align:center; display:inline-block;
}
.submit-btn::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition:left .6s;
}
.submit-btn:hover::before{ left:100%; }
.submit-btn:hover{ transform:translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 40px rgba(0,255,127,.4); }
.submit-btn.is-disabled, .submit-btn:disabled{ opacity:.5; pointer-events:none; }

.btn-content{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; }
.loading-spinner{ width:16px; height:16px; border:2px solid rgba(0,0,0,.3); border-top:2px solid #000; border-radius:50%; animation:spin 1s linear infinite; display:none; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.login-prompt{ text-align:center; margin-top:24px; font-size:14px; color:#808080; }
.login-link{ color:var(--accent-a); text-decoration:none; font-weight:500; }
.login-link:hover{ text-decoration:underline; }

.success-message{
  background: rgba(0,255,127,.1); border:1px solid rgba(0,255,127,.3); border-radius:12px; padding:16px; margin-top:20px;
  color:var(--accent-a); font-size:14px; display:none; align-items:center; gap:12px;
}

/* Validation */
.error-message{ color:#ff4444; font-size:12px; margin-top:6px; display:none; }
.form-input.error{ border-color: rgba(255,68,68,.5); box-shadow: 0 0 0 4px rgba(255,68,68,.1); }
.form-input.success{ border-color: rgba(0,255,127,.5); }

/* ========== Responsive ========== */
@media (max-width:1200px){
  .main-container{ padding:40px; }
  .signup-wrapper{ gap:60px; grid-template-columns: 1fr 550px; }
}
@media (max-width:1024px){
  .signup-wrapper{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .hero-content{ max-width:none; }
  .elite-stats{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:768px){
  .header{ padding:0 24px; }
  .header-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .main-container{ padding:24px; }
  .signup-card{ padding:32px 24px; }
  .role-grid{ grid-template-columns:1fr; }
  .input-grid{ grid-template-columns:1fr; }
  .elite-stats{ grid-template-columns:1fr; gap:24px; }
}