*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#00020a;
  --cyan:#00f5ff;
  --cyan-glow:rgba(0,245,255,0.35);
  --violet:#7c3aed;
  --rose:#ff2d78;
  --border:rgba(0,245,255,0.12);
  --border-bright:rgba(0,245,255,0.32);
}
html,body{width:100%;min-height:100vh;overflow-x:hidden;background:var(--bg);}
body{
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
}

/* CANVAS */
#bgCanvas{position:fixed;inset:0;z-index:0;}

/* NOISE */
.noise{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* AMBIENT ORBS */
.orb{position:fixed;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:1;}
.orb-1{width:900px;height:900px;top:-320px;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(0,90,255,0.16) 0%,transparent 65%);
  animation:orbFloat 11s ease-in-out infinite;}
.orb-2{width:550px;height:550px;bottom:-160px;left:-180px;
  background:radial-gradient(circle,rgba(124,58,237,0.13) 0%,transparent 65%);
  animation:orbFloat 14s ease-in-out infinite 3s reverse;}
.orb-3{width:480px;height:480px;bottom:-120px;right:-140px;
  background:radial-gradient(circle,rgba(255,45,120,0.1) 0%,transparent 65%);
  animation:orbFloat 10s ease-in-out infinite 1s;}

/* GRID FLOOR */
.grid-floor{
  position:fixed;bottom:0;left:0;right:0;height:48vh;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,245,255,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,245,255,0.05) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(700px) rotateX(65deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top,rgba(0,0,0,0.45) 0%,transparent 65%);
}

/* SCANLINE */
.scanline{
  position:fixed;top:-3px;left:0;width:100%;height:2px;z-index:25;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 18px var(--cyan-glow),0 0 50px rgba(0,245,255,0.15);
  animation:scan 8s linear infinite;
}

/* CORNER BRACKETS */
.bracket{position:fixed;z-index:20;pointer-events:none;}
.bracket::before,.bracket::after{content:'';position:absolute;}
.b-tl{top:22px;left:22px;}
.b-tl::before{width:32px;height:1px;top:0;left:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-tl::after{width:1px;height:32px;top:0;left:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-tr{top:22px;right:22px;}
.b-tr::before{width:32px;height:1px;top:0;right:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-tr::after{width:1px;height:32px;top:0;right:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-bl{bottom:22px;left:22px;}
.b-bl::before{width:32px;height:1px;bottom:0;left:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-bl::after{width:1px;height:32px;bottom:0;left:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-br{bottom:22px;right:22px;}
.b-br::before{width:32px;height:1px;bottom:0;right:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}
.b-br::after{width:1px;height:32px;bottom:0;right:0;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);}

/* MAIN */
main{
  position:relative;z-index:10;
  flex:1;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 28px;
  text-align:center;
  min-height:100vh;
}

/* LOGO */
.logo-wrap{
  position:relative;margin-bottom:48px;
  animation:fadeDown 1.2s ease both;
}
.logo-halo{
  position:absolute;inset:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,100,255,0.2) 0%,transparent 65%);
  animation:haloBreath 4.5s ease-in-out infinite;
  pointer-events:none;
}
.logo-wrap img{
  width:min(600px,88vw);position:relative;z-index:1;
  filter:drop-shadow(0 0 22px rgba(0,245,255,0.5)) drop-shadow(0 0 55px rgba(0,102,255,0.3));
}

/* HEADLINE */
.headline-wrap{
  margin-bottom:22px;
  animation:fadeUp 1.1s 0.2s ease both;
}
h1{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(26px,5.2vw,70px);
  font-weight:900;line-height:1.07;
  letter-spacing:-0.01em;text-transform:uppercase;
}
h1 .l1{
  display:block;
  background:linear-gradient(160deg,#fff 25%,rgba(255,255,255,0.5) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
h1 .l2{
  display:block;margin-top:6px;
  background:linear-gradient(90deg,var(--cyan),#8be8ff,var(--violet),var(--rose),var(--cyan));
  background-size:280%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradShift 5s linear infinite;
  filter:drop-shadow(0 0 22px rgba(0,245,255,0.38));
}

/* SUBTEXT */
.subtext{
  font-size:clamp(13px,1.8vw,16px);font-weight:300;
  color:rgba(255,255,255,0.48);
  letter-spacing:0.05em;line-height:1.8;
  max-width:480px;
  animation:fadeUp 1.1s 0.35s ease both;
}
.subtext strong{
  font-weight:500;
  background:linear-gradient(90deg,var(--cyan),#a5f3fc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* FOOTER */
footer{
  position:relative;z-index:10;width:100%;text-align:center;
  padding:20px 28px;
  border-top:1px solid rgba(0,245,255,0.06);
}
footer p{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  color:rgba(255,255,255,0.15);letter-spacing:0.18em;text-transform:uppercase;
}
footer span{color:rgba(0,245,255,0.4);}

/* KEYFRAMES */
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes gradShift{0%{background-position:0%;}100%{background-position:280%;}}
@keyframes orbFloat{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.07) translateY(-12px);}}
@keyframes haloBreath{0%,100%{opacity:0.55;transform:scale(1);}50%{opacity:1;transform:scale(1.14);}}
@keyframes scan{0%{top:-3px;opacity:0;}4%{opacity:1;}96%{opacity:0.7;}100%{top:100%;opacity:0;}}

@media(max-width:480px){.b-tl,.b-tr,.b-bl,.b-br{display:none;}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;}}
/* ── TYPEWRITER ─────────────────────────────────────────── */
.typewriter-wrap {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: fadeUp 1.1s 0.5s ease both;
}
.typewriter {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(15px, 2.2vw, 24px);
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: center;
  min-height: 1.6em;
}
.tw-cursor {
  display: inline-block;
  color: #00f5ff;
  font-weight: 300;
  text-shadow: 0 0 8px rgba(0,245,255,0.5);
  animation: blink 0.75s step-end infinite;
  margin-left: 2px;
}
.stay-tune {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(9px, 1.1vw, 12px);
  color: rgba(0,245,255,0.5);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,245,255,0.2);
}
@keyframes blink {
  0%,100% { opacity:1; } 50% { opacity:0; }
}
@media (max-width: 480px) {
  .b-tl,.b-tr,.b-bl,.b-br { display:none; }
  main { padding: 40px 16px 32px; }
  .logo-wrap img { width: min(340px, 88vw); }
  .typewriter-wrap { margin-top: 20px; gap: 10px; padding: 0 8px; }
  footer p { font-size: 8px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }