:root{
  --bg:#04070c;

  --glass: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.14);

  --accent: rgba(120,255,255,.6);
  --warm: rgba(255,186,110,.5);

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;

  background: radial-gradient(circle at top, #09121f, #04070c 60%);
  color:#fff;
  overflow-x:hidden;
}


/* ================= TOP ================= */

.topbar{
  position:sticky;
  top:0;
  z-index:30;

  display:flex;
  align-items:center;
  gap:20px;

  padding:18px 26px;

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);

  border-bottom:1px solid var(--border);
}

.back{
  text-decoration:none;
  color:#fff;
  opacity:.8;
}
.back:hover{opacity:1}

.title{
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.85;
}


/* ================= BACKGROUND ORBS ================= */

.bg-orb{
  position:absolute;
  border-radius:50%;
  filter: blur(120px);
  opacity:.45;
  pointer-events:none;
}

.orb-1{
  width:380px;
  height:380px;
  background: var(--accent);
  top:10%;
  left:-120px;
  animation: float1 18s infinite alternate ease-in-out;
}

.orb-2{
  width:460px;
  height:460px;
  background: var(--warm);
  bottom:-120px;
  right:-120px;
  animation: float2 22s infinite alternate ease-in-out;
}

.orb-3{
  width:260px;
  height:260px;
  background: rgba(180,120,255,.45);
  top:60%;
  left:55%;
  animation: float3 16s infinite alternate ease-in-out;
}

@keyframes float1{
  from{ transform:translate(0,0); }
  to{ transform:translate(80px,40px); }
}

@keyframes float2{
  from{ transform:translate(0,0); }
  to{ transform:translate(-60px,-40px); }
}

@keyframes float3{
  from{ transform:translate(0,0); }
  to{ transform:translate(40px,-60px); }
}


/* ================= LAYOUT ================= */

.connect{
  position:relative;

  max-width:1300px;
  margin:80px auto;
  padding:0 26px;

  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:70px;
}


/* ================= INFO ================= */

.info{
  z-index:5;
}

.info h1{
  font-size:42px;
  line-height:1.2;
  margin:0 0 20px;

  background: linear-gradient(
    120deg,
    #fff,
    #b9ffff,
    #fff
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.info p{
  font-size:15px;
  opacity:.75;
  line-height:1.7;
  max-width:480px;
}

.links{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.links a{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:#fff;
  text-decoration:none;
  font-size:15px;

  opacity:.85;
  transition:.25s var(--ease);
}

.links a:hover{
  opacity:1;
  color:var(--accent);
  transform:translateX(4px);
}


/* ================= FORM ================= */

.form{
  z-index:5;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.02)
  );

  border:1px solid var(--border);
  border-radius:26px;

  padding:34px 34px 38px;

  backdrop-filter: blur(18px);

  box-shadow:
    0 40px 80px rgba(0,0,0,.65);
}


.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:20px;
}

label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.7;
}

input, textarea{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;

  padding:13px 15px;

  color:#fff;
  font-size:14px;

  outline:none;

  transition:.25s var(--ease);
}

input:focus,
textarea:focus{
  border-color:var(--accent);

  box-shadow:
    0 0 0 2px rgba(120,255,255,.15),
    0 0 18px rgba(120,255,255,.25);
}


/* ================= BUTTON ================= */

button{
  width:100%;
  margin-top:10px;

  background: linear-gradient(
    120deg,
    rgba(120,255,255,.2),
    rgba(120,255,255,.05)
  );

  border:1px solid var(--accent);
  color:#fff;

  padding:15px;

  border-radius:999px;

  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;

  cursor:pointer;

  transition:.3s var(--ease);
}

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

  box-shadow:
    0 15px 40px rgba(120,255,255,.35),
    0 0 30px rgba(120,255,255,.25);
}


/* ================= MOBILE ================= */

@media(max-width:950px){

  .connect{
    grid-template-columns:1fr;
    gap:50px;
  }

  .info h1{
    font-size:34px;
  }
}