:root{
  --cyan:#3ff2ff;
  --cyan-dim:#0891a8;
  --magenta:#c04dff;
  --bg:#04050a;
  --panel:#0a0e18;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;
  background:var(--bg);
  color:#e6f7ff;
  font-family:'Noto Sans KR',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:#000;}

/* ---------- Background layers ---------- */
#stars{
  position:fixed;
  inset:0;
  z-index:0;
  background:radial-gradient(ellipse at 50% 20%, #0c1830 0%, #04050a 65%);
}
.scanlines{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  box-shadow:inset 0 0 18vw 2vw rgba(0,0,0,0.85);
}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
#loader.hide{
  opacity:0;
  transform:scale(1.06);
  pointer-events:none;
}

.hud-corner{
  position:absolute;
  width:34px;
  height:34px;
  border:2px solid var(--cyan);
  opacity:.6;
  filter:drop-shadow(0 0 4px var(--cyan));
}
.hud-corner.tl{top:5%;left:5%;border-right:none;border-bottom:none;}
.hud-corner.tr{top:5%;right:5%;border-left:none;border-bottom:none;}
.hud-corner.bl{bottom:5%;left:5%;border-right:none;border-top:none;}
.hud-corner.br{bottom:5%;right:5%;border-left:none;border-top:none;}

.loader-status{
  font-family:'Orbitron',sans-serif;
  letter-spacing:.4em;
  font-size:11px;
  color:var(--cyan-dim);
  margin-bottom:22px;
  text-transform:uppercase;
  opacity:0;
  animation:fadeIn .6s ease forwards .2s;
}

.ring-wrap{
  position:relative;
  width:180px;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:34px;
  opacity:0;
  animation:fadeIn .6s ease forwards .4s;
}
.ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(63,242,255,0.25);
}
.ring.r1{width:180px;height:180px;border-top-color:var(--cyan);animation:spin 3.2s linear infinite;}
.ring.r2{width:140px;height:140px;border-bottom-color:var(--magenta);border-color:rgba(192,77,255,0.2);animation:spin 2.1s linear infinite reverse;}
.ring.r3{width:104px;height:104px;border-left-color:var(--cyan);animation:spin 1.6s linear infinite;}
.percent{
  font-family:'Orbitron',sans-serif;
  font-size:26px;
  font-weight:700;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(63,242,255,0.7);
}

.progress-track{
  width:min(70vw,360px);
  height:2px;
  background:rgba(63,242,255,0.12);
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:fadeIn .6s ease forwards .5s;
}
.progress-fill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));
  box-shadow:0 0 10px var(--cyan);
  transition:width .18s linear;
}

.welcome-wrap{
  position:relative;
  margin-top:46px;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.welcome-text{
  position:relative;
  font-family:'Noto Sans KR',sans-serif;
  font-weight:800;
  font-size:clamp(32px,6vw,58px);
  letter-spacing:.12em;
  color:#fff;
  opacity:0;
  text-shadow:0 0 18px rgba(63,242,255,0.9),0 0 40px rgba(192,77,255,0.4);
}
.welcome-text.show{
  animation:welcomeIn 1.1s cubic-bezier(.2,.9,.25,1) forwards;
}
.welcome-text.glitching::before,
.welcome-text.glitching::after{
  content:attr(data-text);
  position:absolute;
  left:0;top:0;
  width:100%;
  opacity:.8;
}
.welcome-text.glitching::before{
  color:var(--cyan);
  animation:glitchTop 1.6s infinite linear;
  clip-path:inset(0 0 55% 0);
}
.welcome-text.glitching::after{
  color:var(--magenta);
  animation:glitchBottom 1.6s infinite linear;
  clip-path:inset(55% 0 0 0);
}

@keyframes fadeIn{to{opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes welcomeIn{
  0%{opacity:0;letter-spacing:.5em;filter:blur(8px);}
  60%{opacity:1;letter-spacing:.14em;filter:blur(0);}
  100%{opacity:1;letter-spacing:.12em;}
}
@keyframes glitchTop{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-3px,-1px);}
  40%{transform:translate(3px,1px);}
  60%{transform:translate(-2px,1px);}
  80%{transform:translate(2px,-1px);}
}
@keyframes glitchBottom{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(2px,1px);}
  50%{transform:translate(-3px,-1px);}
  75%{transform:translate(3px,1px);}
}

/* ---------- MAIN CONTENT ---------- */
#main{
  position:relative;
  z-index:10;
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1.3s ease, transform 1.3s ease;
}
#main.reveal{
  opacity:1;
  transform:translateY(0);
}

nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 6vw;
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(4,5,10,0.75), transparent);
}
.logo{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:20px;
  letter-spacing:.15em;
  color:#fff;
}
.logo span{color:var(--cyan);text-shadow:0 0 10px var(--cyan);}
.nav-links{
  display:flex;
  gap:36px;
  list-style:none;
}
.nav-links li{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.15em;
  color:#8fb6c9;
  cursor:pointer;
  transition:color .25s, text-shadow .25s;
}
.nav-links li:hover{color:var(--cyan);text-shadow:0 0 8px var(--cyan);}
.nav-links a{
  color:inherit;
  text-decoration:none;
}

.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 6vw;
  position:relative;
}
.hero-tag{
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.5em;
  color:var(--cyan);
  text-shadow:0 0 10px rgba(63,242,255,0.8);
  margin-bottom:22px;
}
.hero-title{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  font-size:clamp(48px,10vw,120px);
  letter-spacing:.05em;
  line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#b9f3ff 55%,var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 26px rgba(63,242,255,0.35));
}
.hero-sub{
  margin-top:22px;
  max-width:560px;
  font-size:15px;
  line-height:1.9;
  color:#9fc4d6;
  font-weight:300;
}
.hero-cta{
  margin-top:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 36px;
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  letter-spacing:.25em;
  color:#04141a;
  background:var(--cyan);
  border:none;
  border-radius:2px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 0 24px rgba(63,242,255,0.55);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(63,242,255,0.85);
}

.grid-floor{
  position:absolute;
  left:0;right:0;bottom:0;
  height:40vh;
  background-image:
    linear-gradient(rgba(63,242,255,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,242,255,0.35) 1px, transparent 1px);
  background-size:60px 60px;
  transform:perspective(320px) rotateX(70deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  animation:floorMove 3.5s linear infinite;
  opacity:.5;
}
@keyframes floorMove{
  from{background-position:0 0;}
  to{background-position:0 60px;}
}

.features{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
  max-width:1100px;
  margin:0 auto;
  padding:0 6vw 140px;
}
.feature-card{
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.18);
  border-radius:4px;
  padding:30px 26px;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.feature-num{
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  color:var(--cyan-dim);
  letter-spacing:.2em;
}
.feature-title{
  font-family:'Orbitron',sans-serif;
  font-size:17px;
  margin:14px 0 10px;
  color:#fff;
}
.feature-desc{
  font-size:13px;
  line-height:1.7;
  color:#8fb6c9;
  font-weight:300;
}

footer{
  text-align:center;
  padding:30px 20px 40px;
  font-size:11px;
  letter-spacing:.2em;
  color:#4a6a78;
  font-family:'Orbitron',sans-serif;
}