/* ====== Base ====== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0d12;
  --bg-2:#0e131c;
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:#e8edf6;
  --muted:#aab5c6;
  --accent:#ffd24a;
  --accent-2:#44cfff;
  --radius:22px;
  --shadow: 0 24px 80px rgba(0,0,0,.55);
}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(68,207,255,.08), transparent 60%),
    radial-gradient(1200px 600px at 90% -20%, rgba(255,210,74,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  overflow-x:hidden;
}

/* ====== Split Hero ====== */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
}

.left{
  position:relative; overflow:hidden;
  border-right:1px solid var(--line);
}
.bg{
  position:absolute; inset:-2%;
  background:url('banner.jpg') center/cover no-repeat;
  transform:scale(1.02);
  will-change:transform;
}
/* vignette + color burn */
.left:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,210,74,.16), transparent 60%),
    radial-gradient(1000px 500px at 70% -10%, rgba(68,207,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,10,16,.35), rgba(6,10,16,.7) 70%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

.headline{
  position:absolute; left:6vw; bottom:14vh; z-index:2;
  display:flex; flex-direction:column; gap:10px;
}
.logo{
  font-weight:900; letter-spacing:.4px; text-transform:uppercase;
  font-size:clamp(28px, 5vw, 56px);
  background:linear-gradient(90deg,#fff,#e7eefb); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 16px 60px rgba(0,0,0,.45);
}
.countdown{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  color:var(--muted); font-weight:700;
}
.c-box{
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  padding:10px 12px; border-radius:12px;
  display:flex; align-items:baseline; gap:6px;
}
.c-box strong{color:#fff; font-size:20px}

/* CTA floating */
.fab{
  position:absolute; right:6vw; bottom:10vh; z-index:2;
  background:linear-gradient(180deg, #ffe07a, var(--accent));
  color:#111623; font-weight:900; letter-spacing:.3px;
  padding:16px 26px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:0 18px 50px rgba(255,210,74,.4);
  transition:transform .15s ease;
}
.fab:hover{ transform:translateY(-2px) }

/* ====== Form Panel ====== */
.right{
  display:flex; align-items:center; padding:40px 24px; position:relative;
}
.panel{
  width:min(560px, 100%);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(14px);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel header{
  padding:18px 20px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-bottom:1px solid var(--line);
}
.panel header .tag{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px;
  background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:999px; color:#dfe6f2; font-weight:700
}
.panel header .tag .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

.panel .content{ padding:18px 20px 20px }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.form .full{ grid-column:1/-1 }
.input, .select{
  width:100%;
  background:rgba(10,14,22,.75);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
}
.input::placeholder{color:#9fb0c7}

.btn{
  appearance:none; border:none; cursor:pointer; font-weight:900; letter-spacing:.3px;
  background:linear-gradient(180deg, #ffe07a, var(--accent)); color:#11161f;
  padding:14px 22px; border-radius:999px;
  box-shadow:0 12px 36px rgba(255,210,74,.35);
}

.helper{font-size:12px; color:var(--muted); margin-top:8px}
.subline{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px
}
.pill{
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  padding:8px 10px; border-radius:999px; color:#dfe6f4; font-weight:700; font-size:12px
}

.footer{
  text-align:center; color:var(--muted); font-size:13px; padding:24px 0 36px
}

/* Parallax */
.parallax { transform: translateY(calc(var(--scroll,0) * -0.12px)); }

/* ====== Ajustes mobile ====== */
@media (max-width: 980px){
  /* some com o banner */
  .left { display: none; }

  /* form ocupa 100% */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .right {
    padding: 32px 16px;
  }

  .panel {
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 768px){
  /* form em 1 coluna */
  .form{ grid-template-columns: 1fr; }

  .input, .select{
    font-size: 14px;
    padding: 10px 12px;
  }
  .btn{
    font-size: 14px;
    padding: 12px 18px;
  }
  .helper{ font-size: 11px; }
  .pill{ font-size: 11px; padding: 6px 8px; }
  .panel header{ padding: 14px 16px; }
  .panel header .tag{ font-size: 12px; padding: 5px 8px; }
}

@media (max-width: 480px){
  .input, .select{
    font-size: 13px;
    padding: 9px 11px;
  }
  .btn{
    font-size: 13px;
    padding: 10px 16px;
  }
  .helper{ font-size: 10.5px; }
  .pill{ font-size: 10.5px; padding: 5px 7px; }
  .right{ padding: 24px 12px; }
  .panel .content{ padding: 14px 16px 16px; }
  .fab{ bottom: 8vh; right: 5vw; padding: 14px 20px; font-size: 14px; }
}

/* dica pro iOS/Android não aumentarem fonte automaticamente */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }