/* ---------- Base ---------- */
:root{
  --bg-1:#070b12;
  --bg-2:#0b0f1a;
  --neon:#2bd8ff;
  --neon-2:#4e6bff;
  --text:#eaf3ff;
  --muted:#94a3b8;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Outfit','Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, #0b1a2a 0%, transparent 60%),
              radial-gradient(1000px 700px at 80% 20%, #090f1f 0%, transparent 60%),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  overflow-x:hidden;
}

/* Canvas sits behind everything */
#bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;
  filter:contrast(120%) saturate(120%);
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  padding:8rem 1.25rem 4rem;
  isolation:isolate;
}

.brand{
  display:flex; gap:1rem;
  align-items:center; justify-content:center;
  margin-bottom:1rem;
  filter: drop-shadow(0 0 20px rgba(43,216,255,.25));
}
.logo{
  width:min(16vw,84px);
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 40px rgba(43,216,255,.2);
  transform: translateZ(0);
}

.title{
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:.95;
  letter-spacing:.4px;
  margin:0;
  font-weight:800;
  text-shadow:0 2px 30px rgba(78,107,255,.35), 0 0 2px rgba(78,107,255,.7);
}
.accent{
  background:linear-gradient(90deg, var(--neon), var(--neon-2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.coming{
  margin:.25rem 0 0;
  font-weight:700;
  font-size:clamp(1.25rem, 2.8vw, 2rem);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  opacity:.95;
}
.prefix{color:var(--neon); margin-right:.5rem}
.cursor{
  display:inline-block; width:1ch; translate:0 .1ch;
  border-right:2px solid var(--neon);
  animation:blink 1.2s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:0}}

.tagline{
  margin:.85rem auto 1.25rem;
  color:var(--muted);
  max-width:60ch;
  font-weight:400;
}

/* Glow ring behind */
.glow-ring{
  position:absolute; inset:0;
  margin:auto;
  width:min(68vw,780px);
  aspect-ratio:1;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(43,216,255,.18), transparent 60%);
  filter: blur(20px);
  z-index:-1;
  animation:float 6s ease-in-out infinite alternate;
}
@keyframes float{
  to{ transform: translateY(10px) scale(1.02); }
}

/* Social icons */
.social{
  display:flex; gap:.9rem; justify-content:center;
  margin:1.25rem 0 2.5rem;
}
.icon{
  --size:46px;
  display:grid; place-items:center;
  width:var(--size); height:var(--size);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 0 0 0 rgba(43,216,255,.6);
}
.icon:hover{
  transform: translateY(-3px);
  border-color:rgba(43,216,255,.5);
  box-shadow:0 18px 60px rgba(43,216,255,.15);
}
.icon:active{ transform: translateY(0) scale(.98) }

/* Scroll hint */
.scroll-hint{
  position:absolute; left:50%; bottom:1.5rem; translate:-50% 0;
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  opacity:.8;
}
.scroll-hint .chev{ animation:bob 1.8s ease-in-out infinite }
@keyframes bob{ 50%{ transform: translateY(6px) } }

/* ---------- About ---------- */
.about{
  position:relative;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  padding:10rem 1rem 8rem;
}
.container{ max-width:1000px; margin-inline:auto }
.about h3{
  font-family:'Space Grotesk', system-ui;
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(1.6rem, 3.2vw, 2.2rem);
  margin:0 0 .5rem;
}
.about p{
  color:var(--muted);
  font-size:clamp(1rem, 1.6vw, 1.05rem);
  line-height:1.75;
  margin:0;
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.01), transparent);
  padding:2rem 1rem 3rem;
  color:var(--muted);
  text-align:center;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:560px){
  .icon{ --size:42px }
  .tagline{ padding:0 .5rem }
}



/* Watermark logo */
body::after {
  content: "";
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 200px;
  height: 200px;
  background: url('assets/logo.jpg') no-repeat center/contain;
  opacity: 0.10; /* slightly stronger so it's visible */
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(43,216,255,0.25));
  mix-blend-mode: screen;
  z-index: 0;
}