:root{
  --bg:#05060a;
  --bg2:#0a0d16;
  --panel:#0d1119;
  --panel2:#11162200;
  --line:rgba(0,255,157,.14);
  --neon:#00ff9d;
  --neon2:#12b8ff;
  --magenta:#ff2bd6;
  --text:#d6f7e6;
  --muted:#5c6b73;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 70% -10%,#0b1c1a 0%,var(--bg) 55%),var(--bg);
  color:var(--text);line-height:1.6;overflow-x:hidden;
}
a{color:var(--neon);text-decoration:none}
a:hover{color:#fff;text-shadow:0 0 8px var(--neon)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* subtle scanline / noise overlay */
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;
  background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;
}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(5,6,10,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font-weight:800;letter-spacing:3px;font-size:1.1rem}
.nav nav a{margin-left:20px;font-size:.85rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.nav nav a:hover{color:var(--neon)}

/* hero */
.hero{position:relative;padding:110px 0 90px;overflow:hidden;border-bottom:1px solid var(--line)}
.grid-bg{
  position:absolute;inset:-40% 0 0 0;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  transform:perspective(400px) rotateX(58deg);
  transform-origin:top;opacity:.5;
  mask-image:linear-gradient(to bottom,#000,transparent 75%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);
}
.hero-inner{position:relative;z-index:1;text-align:center}
.kicker{color:var(--neon);letter-spacing:3px;text-transform:uppercase;font-size:.8rem;margin-bottom:16px;opacity:.8}
.hero h1{font-size:clamp(2.4rem,8vw,5rem);letter-spacing:4px;font-weight:900;line-height:1}
.hero-sub{color:var(--muted);margin:18px auto 30px;max-width:560px;font-size:1.05rem}
.btn{
  display:inline-block;padding:12px 30px;border:1px solid var(--neon);border-radius:2px;
  color:var(--neon);letter-spacing:2px;text-transform:uppercase;font-size:.85rem;
  background:linear-gradient(90deg,rgba(0,255,157,.08),rgba(18,184,255,.06));
  transition:.2s;
}
.btn:hover{background:var(--neon);color:#04120c;box-shadow:0 0 24px rgba(0,255,157,.5);text-shadow:none}

/* glitch */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
}
.glitch::before{color:var(--magenta);clip-path:inset(0 0 55% 0);animation:g1 2.6s infinite linear alternate}
.glitch::after{color:var(--neon2);clip-path:inset(55% 0 0 0);animation:g2 3.1s infinite linear alternate}
@keyframes g1{0%{transform:translate(0)}20%{transform:translate(-2px,-1px)}40%{transform:translate(1px,1px)}100%{transform:translate(0)}}
@keyframes g2{0%{transform:translate(0)}25%{transform:translate(2px,1px)}55%{transform:translate(-1px,-1px)}100%{transform:translate(0)}}

/* feed */
.feed{padding:60px 20px 40px;display:flex;flex-direction:column;gap:34px}
.empty{text-align:center;padding:70px 0;border:1px dashed var(--line);border-radius:6px}
.block{
  background:linear-gradient(180deg,var(--panel),rgba(13,17,25,.6));
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 20px 50px rgba(0,0,0,.5);
}
.block .video{background:#000}
.block video{width:100%;display:block;max-height:560px;background:#000}
.video-embed{position:relative;padding-top:56.25%}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%}
.block-text{padding:24px 26px 28px}
.block-text h2{font-size:1.5rem;letter-spacing:1px;margin-bottom:12px;color:#fff}
.block-text h2::before{content:"> ";color:var(--neon)}
.block-text p{margin-bottom:12px;color:#c2d6cc}
.learn-more{margin-top:8px;padding:9px 22px;font-size:.8rem}

/* footer */
.footer{border-top:1px solid var(--line);padding:26px 0;margin-top:40px;text-align:center;font-size:.85rem;letter-spacing:1px}

/* ===== admin ===== */
.admin-body{max-width:820px}
.admin-head{display:flex;justify-content:space-between;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px 24px;margin-bottom:24px}
.card h2{font-size:1.05rem;letter-spacing:1px;margin-bottom:16px;color:#fff}
label{display:block;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
input[type=text],input[type=password],input[type=url],textarea,select{
  width:100%;background:#05070c;border:1px solid var(--line);border-radius:4px;
  color:var(--text);padding:11px 12px;font-size:.95rem;font-family:inherit;
}
input:focus,textarea:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 2px rgba(0,255,157,.15)}
textarea{min-height:120px;resize:vertical}
.btn-solid{cursor:pointer;background:var(--neon);color:#04120c;border:none;padding:11px 22px;border-radius:4px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.85rem}
.btn-solid:hover{box-shadow:0 0 20px rgba(0,255,157,.5)}
.btn-ghost{cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 14px;border-radius:4px;font-size:.8rem}
.btn-danger{border-color:rgba(255,43,43,.4);color:#ff6b6b}
.btn-danger:hover{background:rgba(255,43,43,.12)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.flash{padding:12px 16px;border-radius:4px;margin-bottom:20px;border:1px solid var(--neon);background:rgba(0,255,157,.08);color:var(--neon)}
.flash.err{border-color:#ff6b6b;background:rgba(255,43,43,.1);color:#ff6b6b}
.item{border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin-bottom:12px;background:#070a10}
.item h3{font-size:1rem;margin-bottom:4px}
.item .meta{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.item .tag{display:inline-block;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line);border-radius:99px;color:var(--neon2);margin-right:6px}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.login-wrap{max-width:380px;margin:12vh auto 0}

/* tablet */
@media(max-width:820px){
  .feed{padding:48px 18px 30px;gap:26px}
  .hero{padding:90px 0 70px}
}

/* mobile */
@media(max-width:600px){
  .nav-inner{padding:12px 16px}
  .brand{font-size:.98rem;letter-spacing:2px}
  .nav nav a{margin-left:14px}
  .hero{padding:70px 0 54px}
  .hero h1{font-size:clamp(1.6rem,9vw,2.4rem);letter-spacing:1px;word-break:break-word}
  .kicker{font-size:.7rem;letter-spacing:2px}
  .hero-sub{font-size:.95rem;padding:0 6px}
  .grid-bg{background-size:32px 32px}
  .feed{padding:36px 14px 24px;gap:22px}
  .block video{max-height:64vh}
  .block-text{padding:16px 16px 20px}
  .block-text h2{font-size:1.2rem}
  .block-text p{font-size:.95rem}
  .btn{padding:11px 24px}
  .learn-more{width:100%;text-align:center}
}

/* very small phones */
@media(max-width:380px){
  .hero h1{font-size:clamp(1.35rem,8.5vw,1.9rem)}
}