﻿:root{
  --bg:#141926; --bg-2:#192032; --glass:#1e263a; --elev:#242e45;
  --border:#2f3b55; --text:#f4f7ff; --muted:#b8c0d4; --silver:#e2e9f9;
  --neon:#67f3ff; --neon2:#4be3b7; --danger:#ff4d6d;
  --carbon1:#1a2132; --carbon2:#151c2c;
  --r-lg:18px; --r-sm:12px;
  --shadow:0 12px 28px rgba(0,0,0,.28);
  --font: system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font:400 16px/1.65 var(--font);
  background:
    repeating-linear-gradient(135deg, var(--carbon1) 0 14px, var(--carbon2) 14px 28px),
    radial-gradient(70% 50% at 110% -10%, rgba(103,243,255,.15), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto}
a{color:var(--neon)} a:hover{color:#bffaff}
.container{max-width:1280px; margin:0 auto; padding:0 16px}

/* HEADER — «болид»: крупный бренд, скорость-линия, без тяжёлых эффектов */
.crp-header{
  position:sticky; top:0; z-index:80;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    var(--bg-2);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px) saturate(120%);
}
.crp-header::after{
  content:""; display:block; height:3px;
  background:
    linear-gradient(110deg, transparent 0 10%, var(--neon) 30%, var(--neon2) 60%, transparent 90%);
}
.crp-header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:92px}
.brand{display:flex; align-items:center; gap:16px; min-width:0}
.brand-logo img{height:58px; width:auto; display:block}
.brand-title{
  font-weight:1000; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(1.6rem, 4vw, 2.8rem);
  background:linear-gradient(90deg,#fff 0%, var(--silver) 40%, var(--neon) 80%, var(--neon2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-primary{display:flex; align-items:center; gap:26px}
.nav-primary a{color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.22px; padding:10px 0}
.nav-primary a:hover{color:var(--neon)}

/* BURGER — лёгкая анимация, без лагов */
.menu-toggle{display:none; width:52px; height:52px; border-radius:14px; border:1px solid var(--border); background:var(--glass); position:relative}
.menu-toggle .bars{position:absolute; inset:0; display:block}
.menu-toggle .bars::before,.menu-toggle .bars::after,.menu-toggle .bar{
  content:""; position:absolute; left:13px; right:13px; height:2px; background:var(--silver);
  transition:transform .2s ease, opacity .2s ease, top .2s ease, background-color .2s ease;
}
.menu-toggle .bar{top:26px}
.menu-toggle .bars::before{top:18px}
.menu-toggle .bars::after{top:34px}
.menu-toggle[aria-expanded="true"] .bars::before{top:26px; transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar{opacity:0}
.menu-toggle[aria-expanded="true"] .bars::after{top:26px; transform:rotate(-45deg)}

/* OFFCANVAS — быстрый, без тяжёлого blur */
.offcanvas{position:fixed; inset:0; background:rgba(16,21,34,.62); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:85}
.offcanvas.open{opacity:1; pointer-events:auto}
.offcanvas-panel{
  position:absolute; right:0; top:0; height:100%; width:min(86vw, 400px);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--bg-2);
  border-left:1px solid var(--border); padding:20px; overflow:auto;
}
.offcanvas-nav a{display:block; padding:12px 6px; color:var(--text); text-decoration:none; font-weight:900; border-bottom:1px dashed var(--border)}
.offcanvas-nav a:hover{color:var(--neon)}
body.offcanvas-open{overflow:hidden}

/* CONTENT — карточки «трек» */
.post-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    var(--glass);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; box-shadow: var(--shadow);
}
.post-card h1,.post-card h2{margin:.2em 0 .6em}
.post-card h2 a{color:var(--text); text-decoration:none}
.post-card h2 a:hover{color:var(--neon)}
.wp-block-button__link, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px;
  background:linear-gradient(135deg, var(--neon) 0%, var(--neon2) 100%); color:#08131a; font-weight:1000; text-decoration:none;
  box-shadow:0 10px 22px rgba(103,243,255,.18), 0 8px 18px rgba(75,227,183,.16)
}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--border)}
.entry-content img, figure{border-radius:14px; overflow:hidden}

/* FOOTER — «пит-лейн»: многосекционный, 1 контакт (TG поддержка) */
.crp-footer{
  margin-top:54px; background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    var(--bg-2);
  border-top:1px solid var(--border);
}
.footer-top{padding:26px 0 12px; border-bottom:1px solid var(--border)}
.footer-brand-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-brand .brand-title{
  font-weight:1000; font-size:clamp(1.3rem, 3.2vw, 1.9rem);
  background:linear-gradient(90deg,#fff 0%, var(--silver) 40%, var(--neon) 80%, var(--neon2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.footer-actions{display:flex; gap:10px; flex-wrap:wrap}
.footer-actions .btn{padding:10px 14px; border-radius:12px}
.footer-actions .btn.support{background:linear-gradient(135deg,var(--neon) 0%, var(--neon2) 100%); color:#061017}

.footer-grid{
  display:grid; gap:22px; padding:20px 0 30px;
  grid-template-columns:2fr 1fr 1fr 1fr;
}
@media (max-width:1080px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr} }

.footer-col h4{margin:.2em 0 .6em; font-size:1.06rem; color:var(--silver)}
.footer-col p, .footer-col li, .footer-col a{color:var(--muted); font-size:.98rem; text-decoration:none}
.footer-col ul{list-style:none; margin:0; padding:0}
.footer-col li+li{margin-top:6px}
.footer-col a:hover{color:var(--neon)}
.badge-18{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; background:#232b3e; color:#fff; font-weight:1000; border:1px solid var(--border); margin-left:8px
}

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  padding:14px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem
}

/* Scroll-to-top */
#crp-to-top{
  position:fixed; right:16px; bottom:16px; width:46px; height:46px; border-radius:999px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--glass);
  color:var(--silver); display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform: translateY(8px); transition: all .18s ease; z-index:90;
}
#crp-to-top.show{opacity:1; visibility:visible; transform: translateY(0)}
#crp-to-top:hover{color:var(--neon)}

/* Responsive nav */
@media (max-width:1024px){ .nav-primary{display:none} .menu-toggle{display:block} }
