*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --navy:    #080B14;
  --deep:    #111827;
  --cyan:    #39D9FF;
  --cyan2:   #7CEBFF;
  --purple:  #8B5CF6;
  --magenta: #E95CFF;
  --white:   #F5F7FA;
  --muted:   #A9B4C6;
  --border:  rgba(57,217,255,0.15);
  --success: #00E5A0;
}

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:var(--navy);
  font-family:'Inter', sans-serif;
  color:var(--white);
}

/* ── VIDEO BG ── */
.video-bg {
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:0;
  opacity:1;
}

/* ── ATMOSPHERIC LAYERS ── */
.layer-gradient {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to left, rgba(8,11,20,0.92) 0%, rgba(8,11,20,0.55) 45%, rgba(8,11,20,0.15) 100%),
    linear-gradient(to bottom, rgba(8,11,20,0.75) 0%, transparent 30%, transparent 65%, rgba(8,11,20,0.92) 100%);
}
.layer-vignette {
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(ellipse 80% 80% at 28% 40%, transparent 30%, rgba(8,11,20,0.6) 100%);
}
.layer-scanlines {
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
}

/* ── LOGO ── */
.nte-logo {
  position:fixed;
  top:28px; left:28px;
  height:52px; max-width:220px;
  z-index:25;
  object-fit:contain; object-position:left top;
  filter: drop-shadow(0 0 16px rgba(57,217,255,0.4));
  animation: logoGlow 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 0 12px rgba(57,217,255,0.3)); }
  50% { filter: drop-shadow(0 0 24px rgba(57,217,255,0.6)) drop-shadow(0 0 50px rgba(233,92,255,0.15)); }
}

/* ── CHARACTER — RIGHT SIDE ── */
.character-wrap {
  position:fixed;
  right:-4vw; bottom:0; top:0;
  width:58vw;
  z-index:6;
  pointer-events:none;
}
.character-img {
  position:absolute; bottom:0; right:0;
  width:100%; height:100%;
  object-fit:contain; object-position:bottom right;
  -webkit-mask: linear-gradient(to left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.95) 32%, rgba(0,0,0,1) 52%, rgba(0,0,0,0.85) 72%, transparent 100%),
                linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: charFloat 6s ease-in-out infinite, charEntrance 1.1s 0.3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes charEntrance {
  from { opacity:0; transform:translateX(30px) scale(0.96); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes charFloat {
  0%,100% { transform:translateY(0px) translateX(0px); }
  33%     { transform:translateY(-8px) translateX(-3px); }
  66%     { transform:translateY(-3px) translateX(2px); }
}
.character-glow {
  position:fixed;
  right:-6vw; bottom:-12vh;
  width:62vw; height:90vh;
  z-index:5; pointer-events:none;
  background: radial-gradient(ellipse 55% 60% at 60% 70%,
    rgba(139,92,246,0.07) 0%,
    rgba(57,217,255,0.05) 40%,
    transparent 75%);
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity:0.5; }
  50%     { opacity:1; }
}

/* ── STAGE — LEFT SIDE ── */
.stage {
  position:fixed; inset:0; z-index:10;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding-left:clamp(48px,7vw,120px);
  padding-right:48vw;
}

.header-block {
  display:flex; flex-direction:column;
  align-items:flex-start;
  animation: fadeLeft 1s 0.4s ease both;
}
@keyframes fadeLeft {
  from { opacity:0; transform:translateX(-22px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── STATUS PILL — SUCCESS ── */
.status-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,229,160,0.08); border:1px solid rgba(0,229,160,0.3);
  padding:6px 16px; margin-bottom:20px;
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:2.5px; color:var(--success);
  text-transform:uppercase; border-radius:2px;
  box-shadow: 0 0 15px rgba(0,229,160,0.1);
  animation: pillPulse 2s ease-in-out infinite;
}
.status-pill::before {
  content:'✓'; font-size:11px; font-weight:700;
  color:var(--success); text-shadow:0 0 8px var(--success);
  animation: checkPop 1.5s ease-in-out infinite;
}
@keyframes checkPop {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.2); text-shadow:0 0 12px var(--success); }
}
@keyframes pillPulse {
  0%,100% { box-shadow: 0 0 10px rgba(0,229,160,0.08); border-color:rgba(0,229,160,0.25); }
  50% { box-shadow: 0 0 20px rgba(0,229,160,0.2), 0 0 40px rgba(0,229,160,0.05); border-color:rgba(0,229,160,0.45); }
}

/* ── HEADLINE ── */
.headline {
  font-family:'Cinzel', serif;
  font-size: clamp(34px, 4.2vw, 62px);
  font-weight:700; line-height:1.05; letter-spacing:4px;
  color:var(--white); text-align:left; margin-bottom:8px;
  text-shadow: 0 0 60px rgba(57,217,255,0.15), 0 2px 0 rgba(0,0,0,0.5);
  animation: fadeLeft 1s 0.55s ease both;
}
.headline-accent {
  display:block; color: transparent;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan2) 40%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:none;
  filter: drop-shadow(0 0 20px rgba(57,217,255,0.5));
  animation: hglow 3s ease-in-out infinite;
}
@keyframes hglow {
  0%,100% { filter:drop-shadow(0 0 12px rgba(57,217,255,0.3)); }
  50%     { filter:drop-shadow(0 0 32px rgba(57,217,255,0.8)) drop-shadow(0 0 60px rgba(233,92,255,0.25)); }
}

/* ── ACCESS GRANTED BAR ── */
.access-bar {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(57,217,255,0.05); border:1px solid rgba(57,217,255,0.15);
  padding:5px 14px; margin-bottom:16px;
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:3px; color:var(--cyan);
  text-transform:uppercase; border-radius:2px;
  animation: fadeLeft 1s 0.65s ease both;
}
.access-bar::before {
  content:''; width:28px; height:2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.access-bar::after {
  content:''; width:28px; height:2px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

/* ── SUPPORTING ── */
.supporting {
  font-size:clamp(13px,1.2vw,15px);
  font-weight:300; color:var(--muted);
  letter-spacing:3px; text-transform:uppercase;
  margin-bottom:28px; font-family:'Share Tech Mono', monospace;
  animation: fadeLeft 1s 0.75s ease both;
  line-height:1.5;
}

/* ── CTA ── */
.cta-block {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  animation: fadeLeft 1s 0.9s ease both;
}
.cta-outer {
  position:relative;
}
.cta-outer::before {
  content:''; position:absolute; inset:-8px;
  border:1.5px solid rgba(57,217,255,0.25);
  animation:ringfade 2s ease infinite;
  pointer-events:none;
}
.cta-outer::after {
  content:''; position:absolute; inset:-18px;
  border:1px solid rgba(57,217,255,0.08);
  animation:ringfade 2s 0.5s ease infinite;
  pointer-events:none;
}
@keyframes ringfade {
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.2;transform:scale(1.03)}
}

.cta-btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:20px;
  padding:0 64px; height:72px;
  background: linear-gradient(135deg, rgba(57,217,255,0.2) 0%, rgba(139,92,246,0.22) 50%, rgba(233,92,255,0.15) 100%);
  border:2px solid var(--cyan);
  font-family:'Cinzel', serif;
  font-size:clamp(17px,2vw,24px);
  font-weight:700; letter-spacing:5px;
  color:var(--white); text-decoration:none;
  text-transform:uppercase;
  clip-path:polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  box-shadow:
    0 0 40px rgba(57,217,255,0.3),
    0 0 80px rgba(57,217,255,0.1),
    0 0 140px rgba(233,92,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.12);
  animation:ctapulse 2.5s ease-in-out infinite;
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap; cursor:pointer;
}
.cta-btn::before {
  content:''; position:absolute;
  top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--magenta), rgba(233,92,255,0.7), var(--magenta), transparent);
  box-shadow:0 0 20px var(--magenta), 0 0 50px rgba(233,92,255,0.3);
  animation:edgepulse 2.5s ease-in-out infinite;
}
.cta-btn::after {
  content:''; position:absolute;
  top:0; bottom:0; width:120px;
  background:linear-gradient(90deg, transparent, rgba(57,217,255,0.25), rgba(255,255,255,0.12), rgba(57,217,255,0.25), transparent);
  animation:sweep 2s ease-in-out infinite; left:-120px;
}
@keyframes sweep { 0%{left:-120px} 100%{left:calc(100% + 120px)} }
@keyframes ctapulse {
  0%,100% { box-shadow:0 0 35px rgba(57,217,255,0.25),0 0 70px rgba(57,217,255,0.08),0 0 120px rgba(233,92,255,0.04),inset 0 1px 0 rgba(255,255,255,0.1); }
  50%     { box-shadow:0 0 60px rgba(57,217,255,0.55),0 0 110px rgba(57,217,255,0.18),0 0 180px rgba(233,92,255,0.1),inset 0 1px 0 rgba(255,255,255,0.15); }
}
@keyframes edgepulse { 0%,100%{opacity:0.5} 50%{opacity:1;filter:brightness(2.2)} }
.cta-btn:hover { transform:scale(1.04) translateY(-2px); box-shadow:0 0 70px rgba(57,217,255,0.5),0 0 140px rgba(57,217,255,0.2); }
.cta-arrow {
  font-size:clamp(20px,2.2vw,28px);
  animation:arrowb 1s ease-in-out infinite;
  opacity:0.8;
}
@keyframes arrowb { 0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)} }

.cta-sub {
  display:flex; align-items:center; gap:18px;
  font-family:'Share Tech Mono', monospace;
  font-size:9px; letter-spacing:1.5px;
  color:rgba(169,180,198,0.4); text-transform:uppercase;
}
.cta-sub-item { display:flex; align-items:center; gap:5px; }
.cta-sub-item::before { content:'◆'; color:var(--cyan); font-size:6px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .stage { padding-left:24px; padding-right:24px; align-items:center; }
  .header-block { align-items:center; text-align:center; }
  .headline { text-align:center; }
  .access-bar { margin:0 auto 16px; }
  .character-wrap { width:90vw; right:-15vw; opacity:0.3; }
  .character-glow { opacity:0.25; }
  .supporting { text-align:center; }
  .cta-block { align-items:center; }
  .cta-btn { padding:0 40px; height:64px; font-size:15px; }
  .nte-logo { height:40px; max-width:180px; top:20px; left:20px; }
}