﻿:root{
  --bg:#0c0a15; --bg-2:#100d1f; --glass:#141029; --elev:#191235;
  --text:#f6f2ff; --muted:#c9bfde; --silver:#eae1ff;
  --violet:#7e22ce; --violet-2:#a855f7; --magenta:#e879f9;
  --neon:#bb86fc; --neon2:#ff7de9;
  --border:#2a1f42; --ok:#34d399; --danger:#ff4d6d;
  --r-lg:18px; --r-sm:12px; --shadow:0 16px 40px rgba(0,0,0,.36);
  --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:
    radial-gradient(700px 380px at 110% -10%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(500px 280px at -10% -10%, rgba(232,121,249,.10), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--neon)} a:hover{color:#ffe1ff}
.container{max-width:1260px; margin:0 auto; padding:0 16px}

/* Header — фиолетовый хребет, неон-линия */
.crp-header{
  position:sticky; top:0; z-index:90;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), 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(90deg, transparent 0 8%, var(--violet-2) 35%, var(--magenta) 65%, transparent 92%);
}
.crp-header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:92px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo img{height:56px; width:auto}
.brand-title{
  font-weight:1000; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(1.5rem, 3.6vw, 2.6rem);
  background:linear-gradient(90deg,#fff 0%, var(--silver) 40%, var(--neon) 80%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* Меню — подчёркивание неон-лайном */
.nav-primary{display:flex; align-items:center; gap:24px}
.nav-primary a{
  color:var(--text); text-decoration:none; font-weight:900; letter-spacing:.22px; padding:10px 0;
  background:linear-gradient(currentColor,currentColor) center bottom/0 2px no-repeat;
  transition:background-size .18s ease,color .18s ease;
}
.nav-primary a:hover{color:var(--neon); background-size:100% 2px}

/* Бургер — анимированная иконка */
.menu-toggle{display:none; width:52px; height:52px; border-radius:12px; 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:12px; right:12px; 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); background:var(--magenta)}
.menu-toggle[aria-expanded="true"] .bar{opacity:0}
.menu-toggle[aria-expanded="true"] .bars::after{top:26px; transform:rotate(-45deg); background:var(--magenta)}

/* Offcanvas — тёмно-фиолетовый вуаль */
.offcanvas{position:fixed; inset:0; background:rgba(11,7,19,.60); backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:95}
.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,.012)), var(--bg-2);
  border-left:1px solid var(--border); padding:18px; 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}

/* Карточки/контент — фиолетовое стекло */
.post-card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--glass);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow);
  transition:border-color .18s ease, box-shadow .18s ease; content-visibility:auto; contain:content; contain-intrinsic-size: 320px;
}
.post-card:hover{border-color:rgba(255,255,255,.16); box-shadow:0 18px 44px rgba(0,0,0,.4)}
.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)}
.entry-content img, figure{border-radius:14px; overflow:hidden}

/* Кнопки — фиолет -> магента */
.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(--violet-2) 0%, var(--neon) 50%, var(--magenta) 100%); color:#160b1e; font-weight:1000; text-decoration:none;
  box-shadow:0 12px 24px rgba(187,134,252,.18), 0 10px 20px rgba(232,121,249,.16);
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--border)}

/* Footer — мощный 3 колонки */
.crp-footer{
  margin-top:52px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--bg-2);
  border-top:1px solid var(--border);
}
.footer-grid{display:grid; gap:20px; padding:20px 0 28px; grid-template-columns:2fr 1fr 1.2fr}
@media (max-width:980px){ .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)}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-brand .brand-title{
  font-weight:1000; font-size:clamp(1.2rem, 3vw, 1.6rem);
  background:linear-gradient(90deg,#fff, var(--silver) 40%, var(--neon) 80%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.badge-18{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; background:#1c1431; color:#fff; border:1px solid var(--border); font-weight:1000; margin-left:8px
}
.footer-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.footer-actions .btn{padding:10px 14px; border-radius:12px}
.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,.035), rgba(255,255,255,.01)), 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:99;
}
#crp-to-top.show{opacity:1; visibility:visible; transform: translateY(0)}
#crp-to-top:hover{color:var(--neon)}

/* Доступность */
:focus-visible{outline:2px solid var(--magenta); outline-offset:2px; border-radius:6px}

/* Адаптив навигации */
@media (max-width:1024px){ .nav-primary{display:none} .menu-toggle{display:block} }
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto} .btn,.post-card,.menu-toggle *{transition:none !important} }
