:root{
  --bg:#050810;
  --panel:rgba(8,12,22,0.72);
  --line:rgba(255,255,255,0.09);
  --text:#eef2fa;
  --muted:#8d97ab;

  /* pulled from the logo mark */
  --cyan:#2fe6e0;
  --blue:#4a7dff;
  --purple:#9b4dff;
  --magenta:#f04ee0;

  --gradient: linear-gradient(90deg, var(--cyan) 0%, var(--blue) 38%, var(--purple) 68%, var(--magenta) 100%);
  --green:#33d17a;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',sans-serif;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}

.scene{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.scene::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('assets/background.png');
  background-size:cover;
  background-position:75% center;
  z-index:0;
}
.scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,5,10,0.97) 0%, rgba(3,5,10,0.88) 30%, rgba(3,5,10,0.55) 55%, rgba(3,5,10,0.15) 78%, rgba(3,5,10,0.35) 100%),
    linear-gradient(180deg, rgba(3,5,10,0.85) 0%, rgba(3,5,10,0.1) 22%, rgba(3,5,10,0.1) 70%, rgba(3,5,10,0.9) 100%);
  z-index:0;
}
@media (max-width:640px){
  .scene::before{background-position:68% center;}
  .scene::after{
    background:
      linear-gradient(180deg, rgba(3,5,10,0.97) 0%, rgba(3,5,10,0.9) 38%, rgba(3,5,10,0.55) 62%, rgba(3,5,10,0.25) 80%, rgba(3,5,10,0.7) 100%);
  }
}

/* header */
header{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:clamp(10px,2vw,14px);
  padding:clamp(14px,2.5vw,18px) clamp(16px,5vw,48px);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand img{
  width:clamp(28px,4vw,36px);
  height:clamp(28px,4vw,36px);
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(155,77,255,0.55));
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}
.brand-text .name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(14px,2.2vw,17px);
  letter-spacing:0.5px;
  white-space:nowrap;
}
.brand-text .tag{
  font-size:clamp(8px,1.4vw,10px);
  letter-spacing:2px;
  color:var(--muted);
  font-weight:600;
  margin-top:2px;
  white-space:nowrap;
}

nav{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,34px);
}
nav a{
  color:#c7cede;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  position:relative;
  padding-bottom:6px;
  transition:color .2s ease;
  white-space:nowrap;
}
nav a:hover{color:#fff;}
nav a.active{color:#fff;}
nav a.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--gradient);
  border-radius:2px;
}

/* hero */
main{
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  align-items:center;
  padding:clamp(24px,5vw,0px) clamp(16px,5vw,48px);
}
.hero{
  max-width:min(640px, 100%);
  width:100%;
  padding:clamp(32px,8vh,60px) 0;
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:clamp(10px,1.6vw,12px);
  font-weight:700;
  letter-spacing:3px;
  color:var(--cyan);
  margin-bottom:clamp(14px,3vw,22px);
}
.eyebrow .rule{
  width:28px;height:1px;
  background:var(--cyan);
  flex-shrink:0;
}
h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(32px,7vw,64px);
  line-height:1.06;
  letter-spacing:-0.5px;
  word-break:break-word;
}
h1 .accent{
  display:block;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sub{
  margin-top:clamp(14px,3vw,22px);
  color:#b9c1d4;
  font-size:clamp(14px,2vw,16px);
  line-height:1.65;
  max-width:520px;
}

.ctas{
  display:flex;
  gap:clamp(10px,2vw,14px);
  margin-top:clamp(22px,4vw,34px);
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:clamp(12px,2vw,14px) clamp(16px,3vw,22px);
  border-radius:9px;
  font-weight:700;
  font-size:clamp(13px,1.8vw,14.5px);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  border:1px solid transparent;
  flex:0 0 auto;
  white-space:nowrap;
}
.btn-primary{
  background:var(--gradient);
  color:#04070f;
  box-shadow:0 10px 28px -8px rgba(155,77,255,0.55);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px -8px rgba(240,78,224,0.6);
}
.btn-secondary{
  background:rgba(255,255,255,0.04);
  color:#eef2fa;
  border-color:var(--cyan);
}
.btn-secondary:hover{
  transform:translateY(-1px);
  background:rgba(47,230,224,0.1);
  box-shadow:0 10px 26px -10px rgba(47,230,224,0.5);
}

.btn-ghost{
  background:rgba(255,255,255,0.03);
  color:#eef2fa;
  border-color:var(--line);
}
.btn-ghost:hover{
  border-color:var(--purple);
  transform:translateY(-1px);
  background:rgba(155,77,255,0.08);
}
.btn svg{width:17px;height:17px;flex-shrink:0;}

/* connect panel */
.connect-panel{
  margin-top:clamp(20px,4vw,30px);
  display:inline-flex;
  flex-direction:column;
  gap:10px;
  max-width:100%;
  padding:clamp(13px,2.5vw,16px) clamp(15px,3vw,18px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:blur(6px);
}
.connect-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--muted);
  text-transform:uppercase;
}
.connect-label .dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  flex-shrink:0;
}
.connect-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
#server-ip{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:clamp(14px,2.4vw,16px);
  letter-spacing:0.5px;
  color:#fff;
  word-break:break-all;
}
#copy-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:12px;
  padding:7px 14px;
  border-radius:7px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
  flex-shrink:0;
}
#copy-btn:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}
#copy-btn.copied{
  border-color:var(--green);
  color:var(--green);
}

footer{
  position:relative;
  z-index:5;
  padding:clamp(12px,2vw,16px) clamp(16px,5vw,48px);
  font-size:11.5px;
  color:var(--muted);
  border-top:1px solid var(--line);
  text-align:center;
}

/* ---- breakpoints ---- */

/* large desktop / ultra-wide: cap hero drift and keep it from hugging center */
@media (min-width:1600px){
  header, main, footer{padding-left:clamp(48px,6vw,120px);padding-right:clamp(48px,6vw,120px);}
  .hero{max-width:720px;}
}

/* tablets and small laptops */
@media (max-width:900px){
  nav{gap:22px;}
  .ctas{gap:10px;}
}

/* phones, portrait and landscape */
@media (max-width:640px){
  header{
    justify-content:center;
    text-align:center;
    padding-top:16px;
    padding-bottom:16px;
  }
  .brand{width:100%;justify-content:center;}
  nav{width:100%;justify-content:center;gap:24px;}
  main{align-items:flex-start;}
  .hero{padding-top:36px;text-align:left;}
  .eyebrow{justify-content:flex-start;}
  .ctas{gap:10px;}
  .btn{
    flex:0 1 auto;
    width:auto;
    padding:11px 16px;
    font-size:13px;
  }
  .connect-panel{width:100%;}
  .connect-row{justify-content:space-between;}
}

/* very small phones */
@media (max-width:360px){
  .brand-text .tag{letter-spacing:1.2px;}
  h1{font-size:28px;}
  .sub{font-size:13px;}
}

/* short / landscape phones: avoid clipping under the viewport */
@media (max-height:480px) and (orientation:landscape){
  .scene{min-height:auto;}
  main{padding-top:20px;padding-bottom:20px;}
  .hero{padding:20px 0;}
  h1{font-size:clamp(26px,5vw,38px);}
  .ctas{flex-direction:row;}
  .btn{flex:1 1 auto;width:auto;}
  .connect-panel{margin-top:16px;}
}

/* respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:0.001ms !important;}
}