*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  background:#000;
  font-family:Arial,Helvetica,sans-serif;
}

body{overflow:hidden}

.viewport{
  width:100vw;
  height:100vh;
  display:grid;
  place-items:center;
  background:#000;
  overflow:hidden;
}

.stage{
  position:relative;
  aspect-ratio:16/10;
  width:min(100vw,160vh);
  max-height:100vh;
  overflow:hidden;
  background:#000;
}

.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
}

.mobile-copy{display:none}

.form-card{
  position:absolute;
  top:3.35%;
  right:2.55%;
  width:32.3%;
  height:68.15%;
  z-index:10;
  padding:2.05% 2.05% 1.45%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:1.65vw;
  background:
    radial-gradient(circle at 50% 0%,rgba(156,255,0,.055),transparent 42%),
    linear-gradient(180deg,rgba(4,7,7,.998),rgba(4,7,7,.992));
  box-shadow:0 2vw 5vw rgba(0,0,0,.78);
  color:#fff;
  overflow:hidden;
}

.form-card h1{
  margin:0 0 3.7%;
  text-align:center;
  font-family:Impact,"Arial Black",Arial,sans-serif;
  font-size:clamp(18px,1.88vw,33px);
  line-height:1;
  letter-spacing:.07em;
}

.form-card h1 span{color:#9cff00}

.intro{
  margin:0 0 5.2%;
  text-align:center;
  font-size:clamp(8.4px,.76vw,13.6px);
  line-height:1.38;
  color:#f1f1ea;
}

.hidden{display:none}
form{display:grid;gap:.52vw}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.52vw}
.phone-row{display:grid;grid-template-columns:.82fr 1.4fr;gap:.52vw}

input,select{
  width:100%;
  height:clamp(24px,2.28vw,40px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:.43vw;
  background:rgba(0,0,0,.46);
  color:#f2f2ed;
  padding:0 .74vw;
  font-size:clamp(8.3px,.74vw,12.8px);
  outline:0;
}

input::placeholder{color:#d6d6d0}

select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#d6d6d0 50%),
    linear-gradient(135deg,#d6d6d0 50%,transparent 50%);
  background-position:calc(100% - 1.05vw) 50%,calc(100% - .68vw) 50%;
  background-size:.34vw .34vw,.34vw .34vw;
  background-repeat:no-repeat;
}

input:focus,select:focus{
  border-color:rgba(156,255,0,.75);
  box-shadow:0 0 0 2px rgba(156,255,0,.1);
}

.privacy{
  display:grid;
  grid-template-columns:clamp(13px,1.0vw,17px) 1fr;
  gap:.48vw;
  align-items:start;
  margin:.16vw 0 .30vw;
  color:#e9e9e3;
  font-size:clamp(6.3px,.55vw,10px);
  line-height:1.28;
}

.privacy input{
  width:clamp(13px,1.0vw,17px);
  height:clamp(13px,1.0vw,17px);
  padding:0;
  accent-color:#9cff00;
}

.privacy a{color:#9cff00;text-decoration:none;font-weight:700}

button{
  height:clamp(28px,2.73vw,47px);
  border:0;
  border-radius:.43vw;
  background:linear-gradient(180deg,#9cff00,#83d500);
  color:#050700;
  font-weight:900;
  letter-spacing:.055em;
  font-size:clamp(8.4px,.76vw,13.2px);
  cursor:pointer;
}

button:hover{filter:brightness(1.08)}

/* MOBILE: clean, no duplicated desktop UI, no horizontal scroll */
@media(max-width:760px){
  html,body{
    height:auto;
    min-height:100%;
  }

  body{
    overflow:auto;
    background:#020303;
  }

  .viewport{
    display:block;
    width:100%;
    height:auto;
    min-height:100svh;
    overflow:visible;
  }

  .stage{
    width:100%;
    min-height:100svh;
    height:auto;
    max-height:none;
    aspect-ratio:auto;
    overflow:hidden;
    padding:28px 18px 34px;
  }

  .hero-image{
    position:fixed;
    inset:0;
    width:100vw;
    height:100svh;
    object-fit:cover;
    object-position:62% center;
    opacity:.20;
    filter:blur(2px) brightness(.45) contrast(1.12);
    transform:scale(1.04);
  }

  .stage::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 55% 16%,rgba(156,255,0,.07),transparent 25%),
      linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.72)),
      linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.96));
    z-index:1;
  }

  .mobile-copy,
  .form-card{
    position:relative;
    z-index:2;
  }

  .mobile-copy{
    display:block;
    color:#fff;
    padding:4px 0 20px;
  }

  .mobile-logo{
    font-weight:900;
    font-size:30px;
    letter-spacing:-.04em;
    margin-bottom:42px;
    color:#9cff00;
  }

  .mobile-logo span{
    color:#fff;
  }

  .mobile-copy h1{
    margin:0;
    max-width:360px;
    font-family:Impact,"Arial Black",Arial,sans-serif;
    font-size:clamp(38px,11.5vw,52px);
    line-height:.98;
    letter-spacing:.035em;
    text-shadow:0 8px 24px rgba(0,0,0,.85);
  }

  .mobile-copy h1 span{
    color:#9cff00;
  }

  .mobile-copy p{
    max-width:340px;
    margin:22px 0 0;
    color:#f2f2ed;
    font-size:16px;
    line-height:1.45;
  }

  .form-card{
    top:auto;
    right:auto;
    width:100%;
    height:auto;
    margin:18px 0 0;
    padding:26px 18px 22px;
    border-radius:22px;
    background:
      radial-gradient(circle at 50% 0%,rgba(156,255,0,.08),transparent 38%),
      linear-gradient(180deg,rgba(4,7,7,.975),rgba(4,7,7,.955));
    box-shadow:0 22px 70px rgba(0,0,0,.70);
  }

  .form-card h1{
    font-size:31px;
    margin-bottom:16px;
  }

  .intro{
    font-size:14px;
    line-height:1.42;
    margin-bottom:18px;
  }

  form{gap:12px}

  .two,.phone-row{
    grid-template-columns:1fr;
    gap:12px;
  }

  input,select{
    height:50px;
    border-radius:10px;
    padding:0 15px;
    font-size:15px;
  }

  .privacy{
    grid-template-columns:22px 1fr;
    gap:11px;
    font-size:12px;
    margin:4px 0 8px;
  }

  .privacy input{
    width:22px;
    height:22px;
  }

  button{
    height:56px;
    border-radius:10px;
    font-size:15px;
  }
}