@import url('../colors.css');

:root{
  --surface: #ffffff;
  --surface-subtle: #f6f9fb;
  --surface-line: #e6edf2;
  --text: #111827;
  --text-muted: #4b5563;
  --border: #dbe7ee;
  --focus: #7da7b2;
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0; height:100%;
  scroll-padding-top: 90px; scroll-behavior: smooth;
  background: var(--surface); color: var(--text);
  font-family: 'Kumbh Sans', sans-serif;
}
a{ color: var(--text); text-decoration: none; }
a:hover{ text-decoration: underline; }
.longbar{ width:100%; height:1px; background: var(--surface-line); display:block; }

/* Navbar */
.navbar{ background: var(--surface); height:90px; position:sticky; top:0; z-index:999; border-bottom:1px solid var(--surface-line); display:flex; align-items:center; justify-content:center; }
.navbar-container{ width:min(1200px,92%); height:90px; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-size:1.9rem; font-weight:800; background-image:var(--grad-txt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.navbar-menu-center,.navbar-menu-right{ display:flex; align-items:center; gap:.5rem; list-style:none; padding:0; margin:0; }
.navbar-links{ color:var(--text); padding:.5rem .75rem; border-radius:8px; }
.navbar-links:hover{ background:var(--surface-subtle); }
.navbar-btn{ background-image:var(--grad-btn); color:#fff; padding:10px 16px; border-radius:10px; font-weight:700; }
.navbar-toggle{ display:none; background:transparent; border:0; }
.navbar-toggle .bar{ width:25px; height:3px; margin:5px; background:var(--text); }

@media (max-width:960px){
  .navbar-toggle{ display:block; }
  .navbar-menu-center{ position:absolute; left:0; right:0; top:-1000px; transition:top .35s ease; background:var(--surface); border-bottom:1px solid var(--surface-line); flex-direction:column; padding:.5rem 0; z-index:99; }
  .navbar-menu-center.active{ top:90px; }
  #mobile-menu.is-active .bar:nth-child(2){ opacity:0; }
  #mobile-menu.is-active .bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  #mobile-menu.is-active .bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* Title */
.title{ background: var(--surface); }
.title-container{ width:min(900px,92%); margin:0 auto; text-align:center; padding:28px 0 8px; }
.title-container h1{ font-size:clamp(28px,4vw,40px); background-image:var(--grad-txt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.title-container p{ color:var(--text-muted); font-size:clamp(16px,2.2vw,20px); }

/* Signup */
.signup{ width:100%; }
.signup-container{ display:flex; justify-content:center; padding:28px 16px 48px; }
.signup-info{
  width:100%; max-width:920px; background:var(--surface);
  border:1px solid var(--surface-line); border-radius:14px; box-shadow:0 10px 30px rgba(17,24,39,.07);
  padding:28px 18px 34px; text-align:center;
}
.signup-text h2{ font-size:clamp(24px,3.5vw,34px); background-image:var(--grad-txt); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.signup-text p{ color:var(--text-muted); font-size:18px; }

.signup-info form{
  width:min(680px,95%); margin:0 auto; text-align:left;
  background:var(--surface-subtle); border:1px solid var(--surface-line);
  border-radius:12px; padding:20px 16px 22px; box-shadow:0 6px 20px rgba(17,24,39,.06);
}

.form-header{ display:flex; justify-content:center; }
.card{ width:100%; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--surface-line); border-radius:12px; padding:12px 14px; }
.title2{ font-weight:700; }
.radio-buttons{ display:flex; gap:16px; flex-wrap:wrap; }
.radio-buttons label{ display:inline-flex; gap:8px; align-items:center; font-weight:600; }
.input-radio{ width:18px; height:18px; accent-color:var(--focus); border-radius:50%; }

.formLabel{ display:block; margin:16px 6px 8px; font-weight:700; }
.formInput{
  width:100%; height:48px; border:1px solid var(--border); border-radius:10px; padding:0 12px; font-size:15px; color:var(--text); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.formInput:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(125,167,178,.3); }
.formBtn{ display:flex; justify-content:center; margin-top:8px; }
.signup-btn{ background-image:var(--grad-btn); color:#fff; padding:12px 26px; border-radius:12px; font-weight:700; }

.form-txt1{ display:flex; justify-content:center; align-items:center; gap:6px; margin:18px 0 26px; }
.form-txt1 p{ color:var(--text-muted); margin:0; }
.form-txt2{ color:var(--text-muted); text-align:center; }

.signup-social-media{ display:flex; justify-content:center; gap:14px; margin-top:8px; }
.signup-social-media a{ width:46px; height:46px; border-radius:50%; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; }
.signup-social-media a:hover{ background:var(--surface-subtle); }