/* ===================== Base ===================== */
:root{
  --bg: #05070a;
  --blue: #3fa9f5;
  --blue-light: #6fc2ff;
  --blue-dark: #1c6fb0;
  --white: #ffffff;
}

*{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  overflow-x: hidden;
}

body{
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  color: var(--white);
  position: relative;
  min-height: 100vh;
}

/* ===================== Background decorative icons ===================== */
.bg-icons{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-icon{
  position: absolute;
  width: 90px;
  height: 90px;
  opacity: 0.10;
  filter: drop-shadow(0 0 10px rgba(63,169,245,0.35));
}

.i1  { top: 6%;  left: 8%;   width: 70px;  transform: rotate(-18deg); }
.i2  { top: 14%; left: 78%;  width: 100px; transform: rotate(25deg); }
.i3  { top: 32%; left: 4%;   width: 85px;  transform: rotate(12deg); }
.i4  { top: 46%; left: 85%;  width: 75px;  transform: rotate(-30deg); }
.i5  { top: 62%; left: 10%;  width: 95px;  transform: rotate(20deg); }
.i6  { top: 74%; left: 70%;  width: 80px;  transform: rotate(-12deg); }
.i7  { top: 86%; left: 20%;  width: 70px;  transform: rotate(35deg); }
.i8  { top: 4%;  left: 45%;  width: 65px;  transform: rotate(-40deg); }
.i9  { top: 22%; left: 60%;  width: 60px;  transform: rotate(15deg); }
.i10 { top: 55%; left: 45%;  width: 70px;  transform: rotate(-22deg); }
.i11 { top: 90%; left: 55%;  width: 85px;  transform: rotate(8deg); }
.i12 { top: 38%; left: 30%;  width: 60px;  transform: rotate(-15deg); }
.i13 { top: 8%;  left: 92%;  width: 70px;  transform: rotate(28deg); }
.i14 { top: 68%; left: 92%;  width: 65px;  transform: rotate(-25deg); }

/* ===================== Page layout ===================== */
.page{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.content{
  max-width: 720px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo{
  width: 260px;
  max-width: 70vw;
  height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 25px rgba(63,169,245,0.35));
}

/* ===================== Headline styled like the logo font ===================== */
.headline{
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 4vw, 34px);
  line-height: 1.35;
  letter-spacing: 0.5px;
  margin: 0 0 28px 0;
  color: var(--white);
  text-shadow: 0 0 18px rgba(63,169,245,0.55), 0 0 4px rgba(255,255,255,0.4);
}

.headline .dash{
  color: var(--blue-light);
}

/* ===================== Feature list ===================== */
.features{
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.features li{
  color: var(--white);
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ===================== Buttons ===================== */
.buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 240px;
  padding: 16px 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue) 60%, var(--blue-dark) 100%);
  color: #06121c;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(63,169,245,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  border: 1px solid rgba(255,255,255,0.25);
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(63,169,245,0.65), inset 0 1px 0 rgba(255,255,255,0.5);
  filter: brightness(1.08);
}

.btn:active{
  transform: translateY(0px) scale(0.98);
}

/* ===================== Responsive ===================== */
@media (max-width: 640px){
  .page{
    padding: 28px 16px;
  }
  .logo{
    width: 190px;
  }
  .headline{
    font-size: clamp(17px, 5vw, 24px);
    margin-bottom: 20px;
  }
  .features{
    margin-bottom: 28px;
  }
  .buttons{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .btn{
    min-width: unset;
    width: 100%;
    padding: 15px 20px;
  }
  .bg-icon{
    width: 50px !important;
  }
}

@media (max-width: 400px){
  .logo{
    width: 160px;
  }
  .headline{
    font-size: 16px;
  }
}

@media (min-width: 1600px){
  .content{
    max-width: 860px;
  }
  .logo{
    width: 320px;
  }
}