:root{
  --space:#1A1A2E; --silver:#C0C0D0; --gold:#F7D44A; --aur:#D474A3; --meteor:#3A3A4A;
  --ink:#cfd0e6; --text:#a9accb;
  --head:"Exo 2","Orbitron","Segoe UI",sans-serif;
  --sans:"Roboto","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--space);color:var(--text);font-family:var(--sans);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 5vw}

.top{position:sticky;top:0;z-index:60;background:rgba(26,26,46,.7);backdrop-filter:blur(6px)}
.top__in{display:flex;align-items:center;justify-content:space-between;padding:16px 5vw}
.brand{font-family:var(--head);font-weight:200;letter-spacing:.2em;font-size:18px;color:var(--gold);
  text-shadow:0 0 10px rgba(247,212,74,.5)}
.top__nav{display:flex;gap:18px;font-size:18px;color:var(--silver)}
.top__nav a{position:relative;transition:.2s}
.top__nav a:hover{color:var(--gold);text-shadow:0 0 10px rgba(247,212,74,.6)}
.top__nav a:hover::after{content:attr(data-n);position:absolute;top:130%;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:11px;letter-spacing:.08em;white-space:nowrap;color:var(--silver);text-shadow:none}

.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#23234a,#13132a 70%)}
.stars{position:absolute;inset:0}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;
  animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.hero .cap{position:relative;z-index:2;text-align:center;color:var(--gold);padding:0 5vw}
.hero h1{font-family:var(--head);font-weight:200;font-size:clamp(38px,8vw,86px);margin:0;
  letter-spacing:.1em;text-shadow:0 0 18px rgba(247,212,74,.6)}
.hero p{font-family:var(--sans);color:var(--silver);letter-spacing:.06em;margin:14px 0 0}
.hero .sc{margin-top:18px;font-family:var(--head);font-size:12px;letter-spacing:.3em;color:var(--text);
  animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

.const{background:var(--space);padding:40px 5vw 46px}
.const h2{font-family:var(--head);font-weight:200;color:var(--silver);text-align:center;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 26px}
.crow{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}
.node{width:40px;height:40px;border-radius:50%;background:var(--meteor);display:grid;place-items:center;
  color:var(--gold);cursor:pointer;position:relative;box-shadow:0 0 12px rgba(247,212,74,.3);transition:.3s}
.node:nth-child(1){margin-top:0}.node:nth-child(3){margin-top:30px}.node:nth-child(5){margin-top:30px}
.node:hover{transform:scale(1.25);box-shadow:0 0 22px rgba(247,212,74,.7)}
.cline{flex:1;height:1px;min-width:30px;max-width:90px;background:linear-gradient(90deg,var(--meteor),var(--gold),var(--meteor));opacity:.5}

.streamhead{display:flex;align-items:center;gap:12px;padding:14px 5vw 0}
.streamhead .dot{width:30px;height:4px;background:var(--gold);border-radius:2px;box-shadow:0 0 8px var(--gold)}
.streamhead h2{font-family:var(--head);font-weight:200;font-size:22px;color:var(--silver);margin:0}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 5vw 0}
.pill{font-family:var(--head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;
  border:1px solid var(--meteor);border-radius:30px;background:rgba(58,58,74,.4);color:var(--silver);cursor:pointer;transition:.2s}
.pill:hover{border-color:var(--gold)}
.pill.on{background:var(--gold);color:var(--space);border-color:var(--gold)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:22px 5vw 50px}
.card{display:flex;align-items:center;gap:16px;background:rgba(58,58,74,.35);border:1px solid var(--meteor);
  border-radius:10px;padding:14px;cursor:pointer;transition:transform .3s,box-shadow .3s;animation:cardIn .5s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card:hover{transform:scale(1.03);box-shadow:0 0 20px rgba(247,212,74,.25)}
.card .cir{width:64px;height:64px;flex:0 0 64px;border-radius:50%;background-size:cover;background-position:center;
  border:1px solid var(--gold)}
.card .ti{font-family:var(--head);font-weight:200;color:var(--silver);font-size:17px;line-height:1.25}
.card .ct{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-top:4px}
.card[data-cat=trending] .cir{border-color:var(--gold)}
.card[data-cat=editors] .cir{border-color:var(--aur)}
.card[data-cat=latest] .cir{border-color:var(--silver)}
.card[data-cat=mostread] .cir{border-color:var(--gold)}

.foot{background:#13132a;color:var(--silver);position:relative;overflow:hidden}
.foot__in{max-width:1240px;margin:0 auto;padding:44px 5vw;text-align:center}
.foot__in .big{font-family:var(--head);font-weight:200;font-size:24px;color:var(--gold);text-shadow:0 0 14px rgba(247,212,74,.5)}
.foot__links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-top:12px}
.foot__links a:hover{color:var(--gold)}
.foot__sub{margin-top:12px;font-size:12px;opacity:.7}
.meteor{position:absolute;top:0;left:60%;width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:0 0 6px #fff;animation:met 5s linear infinite;opacity:0}
@keyframes met{0%{opacity:0;transform:translate(0,0)}5%{opacity:1}20%{opacity:0;transform:translate(-160px,260px)}100%{opacity:0}}

.det{display:grid;grid-template-columns:1fr 200px;gap:40px;max-width:1000px;margin:0 auto;
  padding:90px 5vw 70px;align-items:start}
.det__main{min-width:0}
.det .back{font-family:var(--head);font-weight:200;color:var(--gold);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.det h1{font-family:var(--head);font-weight:200;color:var(--gold);font-size:clamp(26px,4.4vw,48px);
  line-height:1.12;margin:8px 0 4px;text-shadow:0 0 16px rgba(247,212,74,.5)}
.det .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:16px}
.herofig{margin:0 0 22px;border-radius:10px;overflow:hidden}
.herofig img{width:100%}
.det__body{font-size:17px;line-height:1.85;color:var(--ink)}
.det__body p{margin:0 0 1.15em}
.det__body p.lead::first-letter{float:left;font-family:var(--head);font-weight:200;font-size:3.4em;
  line-height:.8;padding:4px 12px 0 0;color:var(--gold)}
.infocard{background:rgba(58,58,74,.4);border:1px solid var(--meteor);border-radius:12px;padding:14px 16px;
  margin:14px 0;display:flex;align-items:center;gap:14px}
.infocard .ic{font-size:22px}
.infocard .lab{font-family:var(--head);font-weight:200;color:var(--silver);font-size:13px;letter-spacing:.06em}
.infocard .val{font-family:var(--head);font-weight:200;color:var(--gold);font-size:18px}
.roundimg{width:120px;height:120px;border-radius:50%;float:right;margin:4px 0 14px 16px;
  background-size:cover;background-position:center;border:2px solid var(--gold)}
.cons{position:sticky;top:90px}
.cons h4{font-family:var(--head);font-weight:200;color:var(--silver);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;margin:0 0 18px}
.cons .line{position:relative;padding-left:18px}
.cons .line::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--gold),var(--aur))}
.cons .dot{position:relative;display:block;padding:8px 0;font-size:13px;color:var(--silver);cursor:pointer}
.cons .dot::before{content:"";position:absolute;left:-15px;top:14px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold)}
.cons .dot:hover{color:var(--gold)}
.rel{display:flex;gap:18px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.rel a{text-align:center}
.rel .gd{width:54px;height:54px;border-radius:50%;margin:0 auto 8px;background:var(--gold);
  box-shadow:0 0 14px rgba(247,212,74,.5);transition:.25s}
.rel a:hover .gd{box-shadow:0 0 22px rgba(247,212,74,.9);transform:scale(1.1)}
.rel .ti{font-family:var(--head);font-weight:200;font-size:13px;color:var(--silver)}

.static{max-width:760px;margin:0 auto;padding:120px 5vw 80px}
.static h1{font-family:var(--head);font-weight:200;color:var(--gold);font-size:clamp(30px,5vw,46px);margin:0 0 8px;text-shadow:0 0 14px rgba(247,212,74,.5)}
.static .sub2{color:var(--silver);font-style:italic;margin:0 0 26px}
.static p{font-size:16px;line-height:1.85}
.static a.mail{color:var(--gold)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .det{grid-template-columns:1fr}.cons{position:static}
  .grid{grid-template-columns:1fr}.roundimg{width:100px;height:100px}
}
@media(max-width:600px){
  html,body{overflow-x:hidden;width:100%}
  .top__in{flex-wrap:wrap;gap:8px}.top__nav{gap:12px;font-size:15px}
  .grid{padding:18px 6vw 36px}.det{padding:80px 6vw 60px}
  .static{padding:100px 6vw 60px}
}