:root{
  /* Core Background */
  --bg:#060912;

  /* Refined Accent (less neon, more authority) */
  --accent:#00C8E6;

  /* Secondary Accent – cooler and restrained */
  --accent2:#12B8A6;

  /* True Glass Layer */
  --glass:rgba(255,255,255,0.04);

  /* Primary Text */
  --text:rgba(255,255,255,0.92);

  /* Secondary Text */
  --text-soft:rgba(255,255,255,0.65);

  /* Depth Shadows */
  --shadow-deep:0 30px 80px rgba(0,0,0,0.65);
  --shadow-soft:0 10px 30px rgba(0,0,0,0.45);

  /* Subtle Glow (only for interaction) */
  --glow:0 0 18px rgba(0,200,230,0.25);

  /* Border Tone */
  --border:rgba(0,200,230,0.28);

  --nav-height:68px;
  --section-padding:120px 8%;
}

/* ================= RESET ================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  margin: 0;
  color:var(--text);
  overflow-x:hidden;
  scroll-snap-type:y mandatory;



 
  background: radial-gradient(
      circle at bottom,
      #000000,
      #19192f 60%
  );

}
main{
  position:relative;
  z-index:1;
  margin:0;
}

/* ================= SNAP SYSTEM ================= */






/* ================================ !!!FORM CSS STARTS HERE!!! ================================ */
/* ================= JOIN CONSOLE – V2 ENGINEERED ================= */

.join-console{
  padding:5px 8% 0px;/* reduce bottom padding */
  min-height:50vh;
}

.console-container{
  display:grid;
  grid-template-columns:300px 640px 1fr;
  max-width:1400px;
  margin:0 auto;
  align-items:start;
}

/* ===== LEFT PROGRESSION RAIL ===== */
/* ================= PERFECTLY ALIGNED PROGRESS ================= */

.console-progress{
  position:relative;
  padding-left:50px;
}

/* vertical track */
.console-progress-track{
  position:absolute;
  left:40px;           
  top:-25px;
  bottom:20px;
  width:2px;
  background:rgba(255,255,255,0.12);
}

/* fill line */
.console-progress-fill{
  position:absolute;
  left:0px;         
  top:0px;
  width:2px;
  height:0%;
  background:var(--accent2);
  transition:height 0.6s cubic-bezier(0.22,1,0.36,1);
}

/* phase rows */
.console-phase{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:60px;
  font-size:0.9rem;
  letter-spacing:1px;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
}

.console-progress{
  margin-top:120px;   /* move section downward */
}
/* dot */
.phase-dot{
  position:absolute;
  left:-14px;          
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:all 0.3s ease;
}

/* shift text away from dot */
.phase-label{
  margin-left:30px;
}

.console-phase.active{
  color:#ffffff;
}

.console-phase.active .phase-dot{
  background:var(--accent2);
  box-shadow:0 0 12px rgba(20,224,196,0.4);
}

.console-phase.completed .phase-dot{
  background:var(--accent2);
  box-shadow:0 0 12px rgba(20,224,196,0.4);
}

/* ===== RIGHT PANEL ===== */


.console-panel h2{
  font-size: 2rem;
  font-weight: 600;

  margin-bottom: 16px; /* was ~20px */
}

.console-content{
  min-height:280px;
  transition:0.4s ease;
}
.console-panel{
  background: linear-gradient(
    180deg,
    rgba(18, 28, 38, 0.95),
    rgba(10, 18, 26, 0.95)
  );

  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;

  padding: 48px 40px;  
  min-height: 520px;

  backdrop-filter: blur(14px);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);

  margin-top: 60px;

  position:relative;
}



/* ===== INPUTS – ENGINEERING STYLE ===== */

.console-panel input,
.console-panel textarea{

  width:100%;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;

  padding: 14px 16px;
  margin-bottom: 18px;  /* was 22px */

  color: white;
  font-size: 0.95rem;

  outline: none;

  transition: all 0.25s ease;
}

.console-panel textarea{
  resize:vertical;
  min-height:100px;
}

.console-panel input::placeholder,
.console-panel textarea::placeholder{
  color:rgba(255,255,255,0.45);
}

.console-panel input:focus,
.console-panel textarea:focus{

  border-color: rgba(20,224,196,0.5);

  box-shadow:
    0 0 0 2px rgba(20,224,196,0.15),
    0 8px 24px rgba(0,0,0,0.6);

  background: rgba(255,255,255,0.04);
}




/*Labels */
.console-panel label{
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: rgba(255,255,255,0.5);

  display: block;
  margin-bottom: 4px; /* tighter */
}
/* ===== CONTROLS ===== */

.console-controls{
  display:flex;
  justify-content:space-between;
  margin-top: 30px; /* was 50px */
}

.console-controls button{
  padding:14px 34px;
    background: linear-gradient(
    180deg,
    rgba(20,224,196,0.2),
    rgba(20,224,196,0.08)
  );
  border: 1px solid rgba(20,224,196,0.4);
  border-radius: 8px;
  color: white;
  cursor:pointer;
  font-size:0.9rem;
  letter-spacing:1px;
  text-transform:uppercase;
  transition: all 0.25s ease;
}

.console-controls button:hover{
    transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  background:var(--accent2);
  color:#000;
}

.console-controls button:disabled{
  opacity:0.3;
  cursor:not-allowed;
}

.console-status{
  margin-top:24px;
  font-size:0.8rem;
  letter-spacing:1px;
  color:var(--accent2);
  height:18px;
}

/* ===== MODE BUTTONS ===== */

.mode-btn{
  display:block;
  width:100%;
  padding:18px 0;
  margin-bottom:30px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  color:white;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:0.3s ease;
}

.mode-btn:hover{
  border-color:var(--accent2);
  background:rgba(20,224,196,0.06);
}



/* Validation States */
.input-error{
  border-bottom:1px solid #ff3b3b !important;
}

.input-valid{
  border-bottom:1px solid var(--accent2) !important;
}


.console-wrapper{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:80px;
  align-items:start;
}

/* ================= MOBILE JOIN CONSOLE FIX ================= */



/* ================================ !!!new update!!! ================================ */
/* ================= Console Transitions ================= */

.console-animating {
  pointer-events: none;
}

.console-exit {
  opacity: 1;
  transform: translateY(0);
}

.console-exit-active {
  opacity: 0;
  transform: translateY(-12px);
  transition: all 0.25s ease;
}

.console-enter {
  opacity: 0;
  transform: translateY(12px);
}

.console-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.35s ease;
}

/* ================= Character Counter ================= */

.char-counter {
  font-size: 0.8rem;
  margin-top: 6px;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s ease;
}

.char-counter.low {
  color: #ff4d4d;
}

.char-counter.ok {
  color: var(--accent2);
}

/* ================= Error State ================= */

.input-error {
  border-bottom: 1px solid #ff4d4d !important;
}

.input-valid {
  border-bottom: 1px solid var(--accent2) !important;
}

/* Review wrapping fix */

#consoleContent p {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

#consoleContent strong {
  display: inline-block;
  min-width: 160px;
  color: var(--accent2);
  text-transform: capitalize;
}

/* ================= Commitment Styling ================= */

.commitment-group {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  text-align: left;
}

.commitment-group h4 {
  margin-bottom: 18px;
  color: var(--accent2);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.commit-item {
  /* display: flex; */
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
}

.commit-item input[type="checkbox"] {
  margin-top: 3px;
  transform: scale(1.15);
  accent-color: var(--accent2);
  cursor: pointer;
}

.commit-item span {
  flex: 1;
}

.phase-subtitle{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(20,224,196,0.65);
  margin-bottom:28px;
}

.role-options{
  display:flex;
  gap: 14px; /* was 20px */
  margin-top:30px;
}

.role-card{
  flex:1;
  padding:24px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  cursor:pointer;
  transition:all 0.2s ease;
}

.role-card:hover{
  border-color:var(--accent2);
}

.role-card.selected{
  border-color:var(--accent2);
  background:rgba(20,224,196,0.08);
}


/* ================= MOBILE JOIN CONSOLE ================= */

@media (max-width: 768px){

  /* Remove strict snapping */
  body{
    scroll-snap-type: none;
  }

  .join-console{
    padding:120px 20px 0px;
  }

  /* Stack layout vertically */
  .console-container{
    display:flex;
    flex-direction:column;
    gap:40px;
    margin: 0 auto;
    
  }

  /* PROGRESS → TOP HORIZONTAL */
  .console-progress{
    display: none;
  }

  /* Remove vertical track */
  .console-progress-track{
    display:none;
  }

  /* Horizontal phase alignment */
  .console-phase{
   display: none;
  }

  .phase-dot{
  display: none;
  }

  .phase-label{
    font-size:0.65rem;
    letter-spacing:0.5px;
  }

  /* MAIN CONTENT FULL WIDTH */
  .console-panel{
    width:100%;
  }

  .console-content{
    width:100%;
  }

  /* INPUTS FULL WIDTH */
  .console-content input,
  .console-content textarea,
  .console-content select{
    width:100%;
    font-size:0.95rem;
  }

  textarea{
    min-height:110px;
  }

  /* Buttons stacked */
  .console-controls{
    flex-direction:column;
    gap:14px;
  }

  .console-controls button{
    width:100%;
  }

  /* Reduce heading sizes */
  .console-content h2{
    font-size:1.4rem;
  }

  .phase-subtitle{
    font-size:0.85rem;
  }

  .console-wrapper{
    display:block;
    margin:120px auto;
    padding:0 6%;
  }

  /* Convert progress to horizontal */
  .console-progress{
    display:none;
  }

  .console-progress-track{
    display:none;
  }

  .console-progress-fill{
    display:none;
  }

  .console-phase{
    display:none;
  }

  .phase-dot{
    display: none;
  }
  

  .console-panel{
    padding:calc(var(--nav-height) + 40px) 20px 80px;
    min-height:auto;
  }
   .console-panel{
    width:100%;
    max-width:600px;
    margin:0 auto;
  }

    .console-controls{
    flex-direction:column;
    gap:14px;
  }

  .console-controls button{
    width:100%;
  }

    .role-options{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .role-card{
    width:100%;
  }
  /* .form-footer{
 
  } */

}


.form-footer {
  height: 325px;
  background:
    url('/images/grass.png') bottom center / cover no-repeat;
}