/* Type system */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

/* Root palette — generated cohesive neon-on-charcoal */
:root{
  --bg:#0b0d10;
  --panel:#12161c;
  --panel-alt:#0f141a;
  --ink:#e9eef6;
  --muted:#a7b0bd;
  --line:rgba(255,255,255,0.08);
  --rail:rgba(255,255,255,0.16);
  --magenta:#ff2bd6;
  --red:#ff3347;
  --cyan:#00e5ff;
  --white:#f5f7fa;
  --chev:#7af2ff;
  --success:#3cff7d;
  --warning:#ffcc33;

  --shadow-deep: 0 10px 30px rgba(0,0,0,0.6);
  --glow-mag: 0 0 18px rgba(255,43,214,0.35);
  --glow-cyan: 0 0 18px rgba(0,229,255,0.35);
  --glow-red: 0 0 18px rgba(255,51,71,0.35);
  --radius: 14px;
  --radius-pill: 999px;

  --speed: .45s;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 15% 0%, #0c1016 0%, var(--bg) 60%) fixed,
              radial-gradient(900px 900px at 95% 10%, #0c1220 0%, var(--bg) 70%) fixed,
              linear-gradient(#0b0d10, #0b0d10);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.5;
  letter-spacing:.1px;
  overflow-x:hidden;
}

/* Subtle grain + scanlines */
body::before, body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
body::before{
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: soft-light; opacity:.35;
}
body::after{
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(255,43,214,0.05), transparent 60%),
    radial-gradient(1000px 900px at 5% 20%, rgba(0,229,255,0.05), transparent 60%);
  filter: blur(8px); opacity:.6;
}

/* Utilities */
.container{width: min(1220px, 92vw); margin: 0 auto; position:relative; z-index:1;}
.grid{display:grid; gap:18px}
a{color:var(--cyan); text-decoration-color: rgba(0,229,255,0.55); text-decoration-style: dotted; text-underline-offset:2px; transition:color var(--speed), text-decoration-color var(--speed)}
a:hover{color:var(--magenta); text-decoration-color: rgba(255,43,214,0.6)}
img{max-width:100%; height:auto; display:block; border-radius: 10px;}

/* Headings */
h1,h2,h3,h4{
  font-family: Oswald, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  letter-spacing:.6px;
  margin:0 0 10px 0;
}
h1{font-size: clamp(28px, 4vw, 52px); line-height:1.05}
h2{font-size: clamp(20px, 2.6vw, 30px); color:var(--white)}
h3{font-size: clamp(16px, 2.2vw, 22px)}
p{margin:0 0 10px 0; color:var(--muted)}
small, time{color:#8e97a6}

/* Focus visible for accessibility */
:focus-visible{outline:2px dashed var(--cyan); outline-offset:2px; border-radius:8px}

/* Header and nav */
header{
  position:sticky; top:0; z-index:10;
  background: linear-gradient(180deg, rgba(12,16,22,0.95), rgba(12,16,22,0.8));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand-logo{
  width:42px; height:42px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,229,255,0.45), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,43,214,0.35), transparent 50%),
    linear-gradient(135deg, #151a22, #0b0d10);
  border:1px solid var(--rail);
  box-shadow: var(--glow-cyan), var(--glow-mag), inset 0 0 12px rgba(255,255,255,0.04);
  position:relative;
}
.brand-logo::after{
  content:""; position:absolute; inset:12px; border-radius:50%;
  background: conic-gradient(from 45deg, rgba(0,229,255,0.6), rgba(255,43,214,0.6), rgba(255,51,71,0.7), rgba(0,229,255,0.6));
  filter: blur(10px); opacity:.28;
}
.brand-title{
  font-weight:700; font-size:18px; letter-spacing:1px;
}
.brand-title strong{color:var(--magenta)}
.brand-badge{
  margin-left:8px; font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--bg);
  background: linear-gradient(90deg, var(--red), var(--magenta));
  padding:4px 8px; border-radius: var(--radius-pill); box-shadow: var(--glow-red);
}

/* Burger nav (CSS only) */
#toggle-menu{display:none}
nav ul{display:flex; gap:18px; margin:0; padding:0; list-style:none}
nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius: var(--radius-pill);
  color:var(--ink); text-decoration:none; background:rgba(255,255,255,0.02);
  transition: background var(--speed), border-color var(--speed), box-shadow var(--speed), color var(--speed);
}
nav a::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(0,229,255,0.5); transition: box-shadow .9s ease;
}
nav a:hover{border-color:rgba(0,229,255,0.35); box-shadow: var(--glow-cyan)}
nav a:hover::before{box-shadow:0 0 0 6px rgba(0,229,255,0.1)}
.nav-cta{
  border-color: rgba(255,43,214,0.4); color:var(--white); background:rgba(255,43,214,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,43,214,0.2), var(--glow-mag);
}
.nav-cta:hover{background:rgba(255,43,214,0.15)}
.burger{
  display:none; width:46px; height:40px; border:1px solid var(--rail); border-radius:10px;
  align-items:center; justify-content:center; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.burger span, .burger span::before, .burger span::after{
  display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:transform var(--speed), opacity var(--speed);
}
.burger span::before, .burger span::after{content:""; position:absolute; left:0}
.burger span::before{top:-7px}
.burger span::after{top:7px}

/* Responsive nav behavior */
@media (max-width:1199.98px){
  nav ul{display:none; flex-direction:column; gap:10px; background:rgba(10,12,16,0.98); padding:14px; border:1px solid var(--line); border-radius:12px; position:absolute; right:0; top:64px; width:min(320px, 92vw); box-shadow: var(--shadow-deep)}
  #toggle-menu:checked ~ nav ul{display:flex}
  .burger{display:inline-flex}
  #toggle-menu:checked + label.burger span{transform:rotate(45deg)}
  #toggle-menu:checked + label.burger span::before{transform:rotate(90deg); top:0}
  #toggle-menu:checked + label.burger span::after{opacity:0}
}

/* HERO */
.hero{
  position:relative; overflow:hidden; border-top:1px dotted var(--rail); border-bottom:1px dotted var(--rail);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.hero .container{padding:18px 0 0 0}

/* Simple CSS Slider */
.slider{
  position:relative;
  height: clamp(300px, 60vh, 600px);
  overflow:hidden; border-radius: 16px;
  border:1px solid var(--rail);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), var(--glow-cyan);
}
.slides{display:flex; width:300%; height:100%; transition: transform var(--speed) ease}
.slide{
  width:100%; flex:0 0 100%; position:relative; display:grid; place-items:center; color:var(--white);
  background: #0b0d10;
}
.slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: contrast(1.1) saturate(1.05) grayscale(.15);
}
.slide::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 80% 0%, rgba(0,229,255,0.25), transparent 55%),
              radial-gradient(900px 500px at 0% 100%, rgba(255,43,214,0.25), transparent 60%),
              linear-gradient(180deg, rgba(11,13,16,.15), rgba(11,13,16,.75));
  pointer-events:none;
}
.slide .overlay{
  position:relative; z-index:1; padding: min(5vw, 40px);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:min(820px, 88%);
  text-shadow:0 4px 18px rgba(0,0,0,.45);
}
.live-badge{
  display:inline-flex; align-items:center; gap:8px; font-family: "IBM Plex Mono", monospace; font-weight:600; font-size:12px;
  padding:6px 10px; border-radius: var(--radius-pill);
  background: rgba(255,51,71,0.12); border:1px solid rgba(255,51,71,0.45); box-shadow: var(--glow-red)
}
.live-badge::before{
  content:""; width:8px; height:8px; border-radius:50%; background: var(--red); box-shadow:0 0 8px rgba(255,51,71,.8);
  animation: pulse 1.2s infinite ease-in-out;
}
@keyframes pulse{0%{transform:scale(1)} 50%{transform:scale(.6)} 100%{transform:scale(1)}}
.hero h1{letter-spacing:1px; margin:4px 0}
.hero-sub{
  color:var(--ink); background: rgba(0,0,0,0.35);
  padding:8px 12px; border:1px solid var(--rail); border-radius: 10px; max-width: 700px
}

/* Slider controls */
input[name="slide"]{position:absolute; left:-9999px}
.controls{
  position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:2;
}
.controls label{
  width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); cursor:pointer;
  background:rgba(255,255,255,0.12); box-shadow: inset 0 0 0 2px rgba(11,13,16,.6), 0 0 0 4px rgba(0,229,255,0);
  transition: box-shadow var(--speed), background var(--speed), transform var(--speed);
}
.controls label:hover{transform:scale(1.05); box-shadow:0 0 0 4px rgba(0,229,255,.15)}
#s1:checked ~ .slides{transform:translateX(0%)}
#s2:checked ~ .slides{transform:translateX(-100%)}
#s3:checked ~ .slides{transform:translateX(-200%)}
#s1:checked ~ .controls label[for="s1"],
#s2:checked ~ .controls label[for="s2"],
#s3:checked ~ .controls label[for="s3"]{
  background: radial-gradient(circle at 50% 40%, var(--cyan), var(--magenta));
  box-shadow:0 0 0 6px rgba(0,229,255,.12), 0 0 14px rgba(0,229,255,.35), 0 0 22px rgba(255,43,214,.25);
  border-color:transparent;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius: var(--radius-pill); border:1px solid var(--rail);
  color:var(--ink); text-decoration:none; background: rgba(255,255,255,0.03);
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed), color var(--speed);
}
.btn:hover{transform: translateY(-2px); border-color: rgba(0,229,255,0.4); box-shadow: var(--glow-cyan)}
.btn-primary{
  color:#0b0d10; background: linear-gradient(90deg, var(--cyan), var(--magenta)); border-color: transparent;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.18), var(--glow-cyan), var(--glow-mag);
}
.btn-primary:hover{box-shadow: 0 0 0 5px rgba(0,229,255,0.15), 0 0 24px rgba(255,43,214,0.35)}
.btn .chev{
  width:10px; height:10px; border-right:2px solid var(--chev); border-top:2px solid var(--chev); transform: rotate(45deg);
}

/* Sections — News grids */
section{padding: 28px 0; position:relative}
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px;
  border-bottom:1px dotted var(--rail); padding-bottom:10px;
}
.section-head .ticker{
  flex:1; height:8px; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 18px, transparent 18px 36px);
  border-radius:10px; position:relative; overflow:hidden;
}
.section-head .ticker::after{
  content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(0,229,255,0.22), transparent);
  animation: sweep 2.6s linear infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.cards{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:768px){.cards{grid-template-columns: repeat(2, 1fr)}}
@media (min-width:1200px){.cards{grid-template-columns: repeat(3, 1fr)}}

article.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), background var(--speed);
  min-height: 100%;
}
.card .media{position:relative; aspect-ratio: 16 / 9; overflow:hidden}
.card .media img{width:100%; height:100%; object-fit:cover; filter: grayscale(.2) contrast(1.05) saturate(1.05)}
.badge{
  position:absolute; left:10px; top:10px; z-index:1;
  padding:6px 10px; border-radius: var(--radius-pill); font-size:11px; font-family:"IBM Plex Mono", monospace;
  border:1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.45); color:var(--white)
}
.card .body{padding:12px}
.card h3{margin-bottom:6px}
.meta{
  display:flex; align-items:center; gap:10px; font-size:12px; color:#8e97a6; margin:6px 0 10px 0;
}
.meta .dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 10px rgba(60,255,125,.6)}
.card .foot{margin-top:auto; padding:0 12px 12px 12px; display:flex; align-items:center; justify-content:space-between}
.card .read{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none;
}
.card .read .chev{border-color:var(--chev)}
/* Section variations */
.sec-1 article.card:hover{transform: translateY(-4px); border-color: rgba(0,229,255,0.35); box-shadow: var(--glow-cyan)}
.sec-1 .badge{border-color: rgba(0,229,255,0.45); background: rgba(0,229,255,0.08); color:var(--cyan)}
.sec-1 .card .media::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,229,255,0.0), rgba(0,229,255,0.18));}

.sec-2 article.card{background: linear-gradient(180deg, rgba(255,43,214,0.06), rgba(255,255,255,0.01))}
.sec-2 article.card:hover{transform: translateY(-4px) scale(1.01); border-color: rgba(255,43,214,0.35); box-shadow: var(--glow-mag)}
.sec-2 .badge{border-color: rgba(255,43,214,0.5); background: rgba(255,43,214,0.12); color:var(--magenta)}
.sec-2 .card .media::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,43,214,0.0), rgba(255,43,214,0.18));}

.sec-3 article.card{background: linear-gradient(180deg, rgba(255,51,71,0.06), rgba(255,255,255,0.01))}
.sec-3 article.card:hover{transform: translateY(-4px); border-color: rgba(255,51,71,0.35); box-shadow: var(--glow-red)}
.sec-3 .badge{border-color: rgba(255,51,71,0.5); background: rgba(255,51,71,0.12); color:var(--red)}
.sec-3 .card .media::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,51,71,0.0), rgba(255,51,71,0.18));}

/* Blog list */
.bloglist{
  margin: 22px 0; padding:16px; border:1px dashed var(--rail); border-radius: 14px; background: rgba(255,255,255,0.02);
}
.bloglist h2{margin-bottom:12px}
.bloglist ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.bloglist li{
  display:grid; grid-template-columns: 92px 1fr; gap:12px; align-items:center;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); border:1px solid var(--line); border-radius:12px; padding:10px;
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}
.bloglist li:hover{transform: translateX(4px); border-color: rgba(0,229,255,0.35); box-shadow: var(--glow-cyan)}
.bloglist a{display:block; color:var(--white); font-weight:600; text-decoration:none}
.bloglist small{display:block}

/* Center content article */
.center-wrap{
  width: min(900px, 92vw); margin: 30px auto; text-align:left;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--line); border-radius: 14px; padding:16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.center-wrap .featured{
  width:100%; aspect-ratio: 16/9; overflow:hidden; border-radius:12px; border:1px solid var(--rail);
}
.rating{
  margin:12px auto 10px auto; display:inline-block; font-family:"IBM Plex Mono", monospace;
  padding:8px 12px; border-radius: var(--radius-pill);
  background: rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.4); color:var(--cyan); box-shadow: var(--glow-cyan)
}
.hr{
  height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); margin:12px 0
}
.article-body p{margin: 8px 0 0 0}

/* Prev/Next */
.pager{display:flex; justify-content:space-between; gap:10px; margin-top:12px}
.pager a{padding:8px 12px; border-radius: var(--radius-pill); border:1px solid var(--rail); background: rgba(255,255,255,0.02); text-decoration:none}
.pager a:hover{border-color: rgba(255,43,214,0.35); box-shadow: var(--glow-mag)}

/* Comments */
.comments{margin-top:16px; padding-top:12px; border-top:1px dotted var(--rail)}
.comments h3{margin-bottom:10px}
.form fieldset{border:1px solid var(--line); padding:12px; border-radius:12px}
.form label{display:block; font-size:13px; margin:8px 0 4px 0; color:#aeb6c4}
.form input[type="text"], .form input[type="email"], .form textarea{
  width:100%; background:#0e1217; border:1px solid var(--rail); border-radius:10px; padding:10px; color:var(--ink);
  transition: border-color var(--speed), box-shadow var(--speed)
}
.form textarea{min-height:120px; resize:vertical}
.form input:focus, .form textarea:focus{border-color: rgba(0,229,255,0.45); box-shadow: var(--glow-cyan)}
.form .actions{margin-top:10px; display:flex; gap:10px}

/* Related */
.related{margin-top:18px}
.related-grid{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (min-width:768px){.related-grid{grid-template-columns:repeat(4, 1fr)}}
.related a{display:block; background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.related a:hover{border-color:rgba(0,229,255,0.35); box-shadow: var(--glow-cyan)}
.related figure{margin:0}
.related figcaption{padding:8px; font-size:13px}

/* Contacts */
.contacts{
  width:min(1220px, 96vw); margin: 26px auto; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--line); border-radius: 14px; padding:16px;
}
.contact-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:768px){.contact-grid{grid-template-columns: 1.2fr 1fr}}
.map{
  height:260px; border:1px solid var(--rail); border-radius:12px; overflow:hidden; background:#0e1217;
}

/* Aside promo */
aside{
  margin: 20px auto; width:min(1220px, 96vw); display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:768px){aside{grid-template-columns: repeat(4,1fr)}}
.promo{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.promo a{display:inline-flex; margin-top:8px}

/* Modal (pure CSS :target) */
#modal-subscribe{
  position:fixed; inset:0; background: rgba(4,6,9,0.7); display:none; align-items:center; justify-content:center; z-index:50;
}
#modal-subscribe:target{display:flex}
.modal-card{
  width:min(520px, 92vw); background:#0e1217; border:1px solid var(--rail); border-radius:14px; padding:16px;
  box-shadow: var(--shadow-deep), var(--glow-cyan);
}
.modal-card h3{margin-bottom:8px}
.modal-card .close{
  position:absolute; top:14px; right:16px; text-decoration:none; font-size:18px; color:var(--ink); border:1px solid var(--rail);
  width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,0.03)
}
.modal-card .close:hover{border-color:rgba(255,43,214,0.4); box-shadow: var(--glow-mag)}

/* Footer ticker style */
footer{
  margin-top:26px; background: linear-gradient(180deg, #0a0c11, #0a0c11);
  border-top:1px solid var(--line);
}
.footer-inner{width:min(1220px, 96vw); margin:0 auto; padding:16px 0}
.strap{
  display:flex; align-items:center; gap:10px; padding:10px; border:1px dashed var(--rail); border-radius:12px; background: rgba(255,255,255,0.02)
}
.strap .dot{width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 10px rgba(60,255,125,.8)}
.strap .tickerbar{
  flex:1; height:6px; border-radius:8px; background:
    repeating-linear-gradient(90deg, rgba(0,229,255,0.3) 0 24px, rgba(255,43,214,0.28) 24px 48px, rgba(255,51,71,0.28) 48px 72px);
  position:relative; overflow:hidden;
}
.strap .tickerbar::after{
  content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: sweep 3.2s linear infinite;
}
.footer-grid{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:768px){.footer-grid{grid-template-columns: 1.4fr 1fr 1fr}}
.footer-about p{color:#b7c0cf}
.social{display:flex; gap:10px}
.social a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius: var(--radius-pill); border:1px solid var(--rail);
  background: rgba(255,255,255,0.02); text-decoration:none
}
.copy{margin-top:10px; color:#8e97a6; font-size:13px; text-align:center}

/* Final responsive fine-tuning */
@media (min-width:1200px){
  .header-bar{padding:16px 0}
  .center-wrap{padding:18px}
}