:root{
  --bg:#0B0B0C;
  --text:#FFFFFF;
  --muted:#A1A1AA;
  --border:rgba(255,255,255,.10);
  --surface:rgba(255,255,255,.03);
  --surface2:rgba(255,255,255,.06);
  --accent:#00FF9C;
  color-scheme: dark;
}

/* =========================
   Base / Reset
   ========================= */
*{ box-sizing:border-box; }
html{
  font-family:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{
  color:inherit;
  text-decoration:none;
}
a:hover{ opacity:.9; }
a:focus{
  outline:2px solid rgba(0,255,156,.35);
  outline-offset:3px;
  border-radius:8px;
}

/* =========================
   Layout
   ========================= */
.container{
  width:min(960px, 100%);
  margin:0 auto;
  padding:0 24px;
}
.header{
  padding:20px 0;
}
.headerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  height:28px;
  width:auto;
  display:block;
}

/* Language switch */
.lang{
  display:flex;
  gap:10px;
  font-size:14px;
  color:var(--muted);
}
.lang a{ color:var(--muted); }
.lang a.is-active{ color:var(--text); }
.lang .sep{ color:rgba(255,255,255,.25); }

/* =========================
   Hero
   ========================= */
.hero{
  padding:72px 0 48px;
  text-align:center;
}
.spin-h1{
  margin:0;
  font-size:clamp(2.6rem, 5vw, 3.6rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.015em;
}
.spin-h2{
  margin:26px 0 0;
  font-size:clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:rgba(255,255,255,.92);
}

/* =========================
   Card / Form shell
   ========================= */
.card{
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(
    to bottom,
    var(--surface2),
    rgba(255,255,255,.02)
  );
  padding:28px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.90);
}

/* =========================
   Wizard meta
   ========================= */
.metaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  font-size:14px;
  color:rgba(255,255,255,.85);
}
.progress{
  flex:1;
  height:10px;
  background:rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
}
.progress > div{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:999px;
  transition:width 220ms ease;
}

/* =========================
   Steps
   ========================= */
.step{ margin-top:8px; }
.hidden{ display:none !important; }

.label{
  display:block;
  margin:0 0 10px;
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,.90);
  letter-spacing:-0.005em;
}

/* =========================
   Inputs
   ========================= */
.input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  background-color:var(--surface) !important;
  padding:14px 16px;
  font-size:16px;
  color:var(--text);
  outline:none;
}
.input::placeholder{
  color:#71717A;
}
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,255,156,.10);
}

/* Filled state */
.input.is-filled{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.16);
}

/* Textarea */
textarea.input{
  min-height:88px;
  resize:vertical;
}

/* =========================
   Select (dropdown)
   ========================= */
select.input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='rgba(255,255,255,0.75)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px 18px;
  color:var(--text);
}

/* Placeholder option */
select.input:invalid{
  color:rgba(255,255,255,.55);
}

select.input option{
  background:#0B0B0C;
  color:#FFFFFF;
}

select.input::-ms-expand{
  display:none;
}

/* =========================
   File upload
   ========================= */
.file{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.file input[type="file"]{
  position:absolute;
  left:-9999px;
}

.file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
}

.file-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.05);
}

.file-meta{
  font-size:14px;
  color:rgba(255,255,255,.70);
}

.file.is-filled .file-btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
}

.file.is-filled .file-meta{
  color:rgba(255,255,255,.88);
}

/* =========================
   Actions / Buttons
   ========================= */
.actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  border-radius:14px;
  padding:12px 16px;
  font-size:16px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.04);
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.btn-primary{
  background:var(--accent);
  color:#000;
  border-color:transparent;
  font-weight:600;
}

.btn-primary:hover{
  opacity:.92;
  background:var(--accent);
}

/* Status message */
.msg{
  margin-top:10px;
  font-size:14px;
  color:rgba(255,255,255,.80);
}

/* =========================
   Footer
   ========================= */
.footer{
  margin-top:80px;
  padding:28px 0 40px;
  border-top:1px solid var(--border);
  font-size:14px;
  color:rgba(255,255,255,.70);
}

.footerInner{
  width:min(960px, 100%);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.footerBlock{
  line-height:1.6;
}

.footerBlock strong{
  color:rgba(255,255,255,.90);
  font-weight:500;
}

.footer a{
  color:rgba(255,255,255,.80);
  text-decoration:none;
}

.footer a:hover{
  opacity:.9;
}

/* =========================
   Mobile
   ========================= */
@media (max-width:640px){
  .hero{
    padding:56px 0 36px;
    text-align:left;
  }
  .container{
    padding:0 18px;
  }
  .metaRow{
    flex-direction:column;
    align-items:flex-start;
  }
  .progress{
    width:100%;
  }
  .footerInner{
    flex-direction:column;
    gap:16px;
  }
}