:root{
  --bg:#0b0d10; --panel:#121418; --text:#e8e8e8; --muted:#a6afba;
  --accent:#00ffc8; --accent2:#3de1ff; --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(700px 420px at 10% -10%, rgba(0,255,200,.05), transparent 60%),
    radial-gradient(620px 360px at 110% 10%, rgba(61,225,255,.05), transparent 60%),
    #0b0d10;
  color:var(--text);
}
/* Landing */
body.landing .hero.center{min-height:100vh; display:grid; place-items:center; text-align:center; padding:40px 20px}
.logo{font-size:clamp(2.8rem,7vw,4.6rem); margin:0; letter-spacing:.06em}
.tag{color:var(--muted); margin-top:8px}
.cta{display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap}
.btn{border:1px solid rgba(255,255,255,.08); padding:12px 18px; border-radius:14px; font-weight:700; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)); transition:opacity .15s ease, transform .15s ease}
.btn.primary{border:none; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0b0d10}
.btn:hover{opacity:.95; transform:translateY(-1px)}

/* Inner pages */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; position:sticky; top:0; background:rgba(11,13,16,.55); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand{font-weight:800; letter-spacing:.4px; display:flex; align-items:center; gap:10px}
.brand .dot{width:12px; height:12px; border-radius:4px; background:linear-gradient(135deg,var(--accent),var(--accent2))}
.links{display:flex; gap:12px}
.links a{padding:8px 12px; border-radius:12px; color:#cfd6dd; transition:background .15s ease}
.links a:hover{background:rgba(255,255,255,.06); color:#fff}

.page{max-width:1100px; margin:0 auto; padding:48px 20px}
.page.narrow{max-width:800px}
.bullets{line-height:1.7; padding-left:18px}
.bullets li{margin:.35rem 0}

.grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 6; display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; transition:transform .15s ease, opacity .15s ease}
.card:hover{transform:translateY(-2px)}
.card .thumb{height:160px; background:#0f1114; display:grid; place-items:center}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .thumb .ph{width:56px; height:56px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); filter:saturate(1.05); opacity:.85}
.card-body{padding:14px}
.card-body h3{margin:6px 0}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tags span{font-size:.75rem; background:rgba(255,255,255,.05); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08)}

.player{margin:14px 0; background:#0f1114; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.player video, .player img{width:100%; display:block}

.block{margin:18px 0}
.block h2{margin:0 0 8px}
.chip-list{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:6px 10px; border-radius:999px; font-size:.8rem}
.back{margin-top:18px}

.foot{padding:16px; text-align:center; color:#9aa3ad; border-top:1px solid rgba(255,255,255,.05)}

/* Contacts list + subtle hover */
.contacts{list-style:none; padding:0; margin-top:10px}
.contacts li{margin:10px 0; display:flex; align-items:center; gap:10px}
.contacts i{color:var(--accent); font-size:1.05rem; width:22px; text-align:center; transition:opacity .15s ease, transform .15s ease}
.contacts a{color:var(--accent2); font-weight:600; transition:opacity .15s ease}
.contacts li:hover i{opacity:.9; transform:translateY(-1px)}
.contacts a:hover{text-decoration:underline; opacity:.9}

@media (max-width: 860px){
  .card{grid-column:span 12}
}