:root {
  --g1:#000000; --g2:#050608;
  --accent:#00d4ff; --accent2:#7c3aed; --accent3:#10b981;
  --text:#e2e8f0; --muted:#64748b; --border:rgba(0,212,255,0.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--g1); color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
}

/* TOP BAR */
.page-bar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
  background:rgba(10,15,30,0.88);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.page-bar-back {
  display:flex; align-items:center; gap:0.5rem;
  color:var(--text); text-decoration:none; cursor:pointer;
  font-size:0.8rem; letter-spacing:0.05em;
  border:1px solid rgba(255,255,255,0.15);
  padding:0.5rem 1rem; border-radius:8px;
  transition:all 0.25s;
  background:none;
}
.page-bar-back:hover { border-color:var(--accent); color:var(--accent); background:rgba(0,212,255,0.06); }
.page-bar-title {
  font-family:'Orbitron',sans-serif; font-size:0.7rem; letter-spacing:0.25em;
  text-transform:uppercase; color:var(--accent); text-align:center; flex:1;
}
.page-bar-spacer { width:90px; }

/* SCROLL CONTAINER */
.video-scroller {
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
.video-section {
  height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:5.5rem 1.5rem 2rem;
  box-sizing:border-box;
  gap:1rem;
  position:relative;
}
.video-section:nth-child(odd) { background:linear-gradient(180deg, var(--g1), var(--g2)); }
.video-section:nth-child(even) { background:linear-gradient(180deg, var(--g2), var(--g1)); }

.video-counter {
  font-family:'Orbitron',sans-serif;
  font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:0.7rem;
}
.video-counter::before, .video-counter::after {
  content:''; display:block; width:1.5rem; height:1px; background:var(--accent);
}

.video-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.1rem, 3vw, 1.8rem);
  font-weight:700;
  color:#fff;
  text-align:center;
  max-width:90vw;
}

/* VIDEO PLAYER WRAPPER */
.video-frame-wrap {
  width:min(900px, 92vw);
  aspect-ratio:16/9;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 25px 70px rgba(0,0,0,0.55), 0 0 60px rgba(0,212,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* HTML5 VIDEO PLAYER */
.video-frame-wrap video {
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

.video-error {
  position:absolute; inset:0;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:0.6rem; text-align:center; padding:1.5rem;
  background:rgba(0,0,0,0.85);
  font-size:0.78rem; color:var(--muted);
}
.video-error.show { display:flex; }
.video-error strong { color:#f59e0b; font-size:0.85rem; }

.video-hint {
  font-size:0.75rem; color:var(--muted); letter-spacing:0.05em;
  display:flex; align-items:center; gap:0.4rem;
}
.video-hint .arrow { animation:bounce 1.6s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }

.video-section.is-last .video-hint { display:none; }

/* DOTS */
.video-dots {
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  z-index:100; display:flex; flex-direction:column; gap:0.7rem;
}
.video-dots .dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(0,212,255,0.25); border:none; padding:0; cursor:pointer;
  transition:all 0.25s;
}
.video-dots .dot.active {
  background:var(--accent);
  box-shadow:0 0 10px rgba(0,212,255,0.7);
  transform:scale(1.3);
}

/* RESPONSIVE */
@media(max-width:1024px){
  .page-bar { padding:0.9rem 1.2rem; }
  .page-bar-title { font-size:0.65rem; }
  .page-bar-back { font-size:0.75rem; padding:0.45rem 0.85rem; }
  .page-bar-spacer { width:75px; }
  .video-section { padding:4.8rem 1.2rem 1.5rem; gap:0.9rem; }
  .video-counter { font-size:0.65rem; }
  .video-title { font-size:clamp(1rem, 2.5vw, 1.6rem); }
}

@media(max-width:768px){
  .page-bar { padding:0.8rem 1rem; }
  .page-bar-title { font-size:0.6rem; letter-spacing:0.2em; }
  .page-bar-back { font-size:0.7rem; padding:0.4rem 0.8rem; }
  .page-bar-spacer { display:none; }
  .video-section { padding:4.2rem 1rem 1.2rem; gap:0.7rem; }
  .video-counter { font-size:0.6rem; }
  .video-title { font-size:clamp(0.95rem, 2.2vw, 1.4rem); }
  .video-frame-wrap { width:96vw; }
  .video-dots {
    right:auto; left:50%; top:auto; bottom:12px;
    transform:translateX(-50%); flex-direction:row; gap:0.5rem;
  }
  .video-dots .dot { width:7px; height:7px; }
}

@media(max-width:480px){
  .page-bar { padding:0.7rem 0.8rem; }
  .page-bar-title { font-size:0.55rem; }
  .page-bar-back { font-size:0.65rem; padding:0.35rem 0.7rem; }
  .video-section { padding:3.8rem 0.8rem 1rem; gap:0.6rem; }
  .video-counter { font-size:0.55rem; }
  .video-counter::before, .video-counter::after { width:1rem; }
  .video-title { font-size:clamp(0.9rem, 2vw, 1.2rem); }
  .video-frame-wrap { width:98vw; border-radius:12px; }
  .video-hint { font-size:0.7rem; }
  .video-dots { bottom:8px; gap:0.4rem; }
  .video-dots .dot { width:6px; height:6px; }
}

@media(max-width:360px){
  .page-bar { padding:0.6rem 0.6rem; }
  .page-bar-title { font-size:0.5rem; }
  .page-bar-back { font-size:0.6rem; padding:0.3rem 0.6rem; }
  .video-section { padding:3.5rem 0.6rem 0.8rem; }
  .video-counter { font-size:0.5rem; }
  .video-title { font-size:0.85rem; }
  .video-hint { font-size:0.65rem; }
}

@media(max-height:500px) and (orientation:landscape){
  .page-bar { padding:0.6rem 1rem; }
  .video-section { padding:4rem 1rem 1rem; min-height:auto; }
  .video-counter { font-size:0.6rem; }
  .video-title { font-size:1.2rem; }
  .video-frame-wrap { width:min(85vw, 700px); aspect-ratio:16/9; }
}