@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --text:#f7f3fa;
  --muted:#c0b7c7;
  --purple:#b066ff;
  --purple-soft:#d7a7ff;
  --deep:#5d1fa8;
  --panel:rgba(11,9,16,.78);
  --border:rgba(197,129,255,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Roboto,Arial,sans-serif;
  line-height:1.6;
  background:#08070b;
  min-height:100vh;
  overflow-x:hidden;
}

.page-bg{
  position:fixed;
  inset:0;
  z-index:-5;
  background:
    linear-gradient(rgba(5,4,9,.30),rgba(7,5,10,.50)),
    url("background.png") center/cover no-repeat;
}

.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 10%,rgba(126,53,191,.13),transparent 35%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34));
  backdrop-filter:blur(1.4px);
}

a{color:inherit;text-decoration:none}

.hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:360px;
  max-height:100vh;
  background:url("hero.jpg") center/cover no-repeat;
  overflow:hidden;
  border-bottom:1px solid rgba(177,99,255,.22);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.18) 45%,rgba(5,4,8,.5)),
    linear-gradient(90deg,rgba(13,7,19,.2),transparent 35%,transparent 65%,rgba(13,7,19,.18));
}

.hero-logo{
  position:absolute;
  top:4.5%;
  left:4.2%;
  z-index:2;
}

.hero-logo img{
  display:block;
  width:clamp(190px,18vw,320px);
  height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.7));
}

.hero-tagline{
  position:absolute;
  left:50%;
  top:12.5%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:92%;
  text-align:right;
  font-family:Oswald,Impact,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(1.5rem,3.5vw,3.2rem);
  text-shadow:0 4px 20px rgba(0,0,0,.95);
}

.dot{
  color:var(--purple-soft);
  padding:0 .25em;
}

.section{
  max-width:1120px;
  margin:auto;
  padding:95px 5vw;
}

.intro{
  text-align:center;
}

h1,h2{
  font-family:Oswald,Impact,sans-serif;
  text-transform:uppercase;
  line-height:1.05;
  margin-top:0;
}

h1{
  font-size:clamp(2.4rem,5.2vw,4.7rem);
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

.intro p{
  color:var(--muted);
  font-size:1.18rem;
  max-width:850px;
  margin:auto;
  background:rgba(8,7,11,.34);
  padding:0 10px;
}

.connect{
  padding-top:30px;
  padding-bottom:110px;
}

.connect-panel{
  max-width:1180px;
  margin:auto;
  padding:42px 36px 38px;
  border:1px solid var(--border);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008)),
    var(--panel);
  box-shadow:
    0 0 34px rgba(129,49,194,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  text-align:center;
}

.connect h2{
  margin:0;
  font-size:clamp(2.8rem,5vw,4.6rem);
  letter-spacing:.03em;
}

.subbrand{
  margin:8px 0 30px;
  color:var(--purple-soft);
  font-family:Oswald,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(.95rem,1.6vw,1.25rem);
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.social-button{
  min-height:84px;
  padding:18px 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  background:rgba(21,17,29,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  text-align:center;
  font-weight:700;
  font-size:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.social-button:hover{
  transform:translateY(-3px);
  border-color:rgba(201,141,255,.8);
  background:rgba(31,22,42,.96);
  box-shadow:0 10px 28px rgba(96,30,150,.18);
}

.icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  background:linear-gradient(145deg,var(--purple),var(--deep));
  box-shadow:0 0 18px rgba(167,93,255,.16);
  font-weight:700;
  font-size:1.05rem;
}

footer{
  border-top:1px solid rgba(166,92,255,.16);
  padding:30px 5vw 36px;
  text-align:center;
  color:#8d8594;
  font-size:.82rem;
  background:rgba(5,4,8,.42);
}

@media(max-width:900px){
  .social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .hero{
    min-height:300px;
  }

  .hero-logo{
    top:4%;
    left:4%;
  }

  .hero-logo img{
    width:170px;
  }

  .hero-tagline{
    font-size:clamp(1.25rem,5.5vw,2rem);
    letter-spacing:.08em;
  }

  .section{
    padding:72px 6vw;
  }

  .connect-panel{
    padding:32px 18px 26px;
  }

  .social-grid{
    grid-template-columns:1fr;
  }

  .social-button{
    justify-content:flex-start;
    padding-left:22px;
  }
}