/* ===============================
   THEME VARS
=================================*/
:root {
  --bg: #0b0b12;
  --card: #121223;
  --muted: #8c8da6;
  --text: #f3f4ff;
  --accent: #8a7bff;
  --accent-2: #56e0ff;
  --ok: #27cc7c;
  --warn: #ffcc66;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);

  --hdr-h: 64px;                        /* фиксированная высота хедера */
  --hdr-bg: rgba(12,12,20,0.75);
  --hdr-bd: rgba(255,255,255,0.08);
}

@media (max-width: 920px){
  :root{ --hdr-h: 56px; }
}

/* ===============================
   BASE / RESETS
=================================*/
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, #0a0a12, #0b0b12);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  padding-top: var(--hdr-h);            /* отступ под фиксированный хедер */
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 14px; }
h3 { font-size: clamp(18px, 2.2vw, 24px); margin: 0 0 10px; }
p  { margin: 0 0 12px; color: var(--muted); }

.subtitle, .muted { color: var(--muted); }

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: .2s;
}
.btn:hover { transform: translateY(-1px); opacity: .95; }
.btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .18); }

/* ===============================
   GRID / LAYOUT
=================================*/
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1 1 280px; }

/* ===============================
   CARD / HERO / MEDIA
=================================*/
.card {
  background: linear-gradient(180deg, #ffffff05, #ffffff03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  min-width: 0; /* чтобы в гриде не выпирали */
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(138, 123, 255, .25), transparent 60%),
    radial-gradient(800px 300px at 90% 10%, rgba(86, 224, 255, .25), transparent 60%),
    var(--card);
  padding: 28px;
}
.hero h1 { font-size: clamp(26px, 4vw, 44px); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px; color: #fff; background: #ffffff0a; font-size: 13px;
}

.hero-media {
  aspect-ratio: 16 / 9;
  background: #0e0e18;
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px;
  width: 100%; max-width: 100%; overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit;
}
.hero-media--video { border: none; background: #000; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.media-fit { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; background:#0b0b0f; }
.media-fit .card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.no-lazyload { content-visibility: auto; }

/* ===============================
   TABS
=================================*/
.tabs { margin-top: 8px; }
.tablist { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tab {
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14); background:#ffffff0a; cursor: pointer; color:#fff;
}
.tab[aria-selected="true"] { background: var(--accent); color:#fff; }
.tab[aria-selected="false"] { color:#fff; opacity:.95; }
.tab:hover { opacity: 1; }
.tabpanel { display: none; }
.tabpanel.active { display: block; }

.kicker { font-weight: 700; color:#fff; }

/* ===============================
   FAQ
=================================*/
.faq details {
  background: #ffffff05; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding:14px;
}
.faq summary { cursor: pointer; font-weight: 600; }

/* ===============================
   FORMS
=================================*/
.form { display: grid; gap: 12px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14); background:#ffffff0a; color:#fff;
}
label { font-size: 14px; color: #cfd3ff; }
.note { font-size: 12px; color: var(--muted); }
.ok { color: var(--ok); }
.err { color: #ff6b6b; }
.sr-only { position: absolute !important; height:1px; width:1px; overflow:hidden; clip: rect(1px,1px,1px,1px); }

/* ===============================
   CF7 SKIN (под твой стиль)
=================================*/
.cf7-skin {
  background: linear-gradient(180deg, #ffffff05, #ffffff03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.cf7-skin .wpcf7-form { display: grid; gap: 12px; }
.cf7-skin .row { display:flex; gap:16px; flex-wrap:wrap; }
.cf7-skin .row > * { flex: 1 1 280px; }
.cf7-skin label { font-size:14px; color:#cfd3ff; }
.cf7-skin input, .cf7-skin select, .cf7-skin textarea {
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:#ffffff0a; color:#fff;
}
.cf7-skin input[type="submit"] {
  display:inline-block; padding:12px 18px; border-radius:14px; background:var(--accent); color:#fff; font-weight:600;
  box-shadow: var(--shadow); transition:.2s; border:0; cursor:pointer;
}
.cf7-skin input[type="submit"]:hover { transform: translateY(-1px); opacity:.95; }
.cf7-skin .note { font-size:12px; color:var(--muted); }
.cf7-skin .ok { color:var(--ok); }
.cf7-skin .err { color:#ff6b6b; }
.cf7-skin .wpcf7-response-output { display:none !important; }
.cf7-skin .wpcf7-not-valid { border-color:#ff6b6b !important; }
.cf7-skin .wpcf7 { margin:0; }
.cf7-skin .wpcf7-form p { margin:0; }
.cf7-skin fieldset.hidden-fields-container { display: contents; }

.cf7-skin, .cf7-skin *, .cf7-skin *::before, .cf7-skin *::after { box-sizing: border-box; }
.cf7-skin .wpcf7, .cf7-skin .wpcf7-form { max-width:100%; }
.cf7-skin .wpcf7-form-control-wrap { display:block; width:100%; min-width:0; }
.cf7-skin input, .cf7-skin select, .cf7-skin textarea { display:block; width:100%; max-width:100%; }

@supports(selector(:has(*))) {
  .cf7-skin .wpcf7-form p:has(.wpcf7-form-control-wrap + .wpcf7-form-control-wrap) {
    display:flex; gap:16px; flex-wrap:wrap;
  }
  .cf7-skin .wpcf7-form p:has(.wpcf7-form-control-wrap + .wpcf7-form-control-wrap) .wpcf7-form-control-wrap {
    flex:1 1 280px; min-width:0;
  }
}
@media (max-width: 640px) {
  .cf7-skin .wpcf7-form p { display:block; }
}

/* Невидимый для людей, но видимый для ботов инпут */
.cf7-hp{
  position:absolute !important;
  left:-10000px !important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;opacity:0;
}

/* ===============================
   HEADER — FULL WIDTH CONTENT
=================================*/
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  z-index: 1000;
  backdrop-filter: saturate(160%) blur(10px);
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-bd);
}

/* контент в хедере тянем на всю ширину экрана */
.site-header .wrap{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 32px); /* «умные» поля по краям */
}

.header__inner{
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto; /* логотип | меню | телефон */
  align-items: center;
  gap: 16px;
}

/* логотип */
.header__logo{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.header__logo .logo-text{ font-weight:600; color:#fff; letter-spacing:.2px; white-space:nowrap; }

/* телефон */
.header__phone{
  justify-self: end; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;
}
.phone-link{ color:#fff; text-decoration:none; font-weight:700; }
.phone-link:hover{ text-decoration:underline; }
.hours{ font-size:12px; opacity:.8; }

/* навигация */
.nav{ justify-self: center; }
.nav__list{ display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0; }
.nav__list a{ color:#fff; text-decoration:none; font-weight:500; line-height:1.2; }
.nav__list a:hover{ text-decoration:underline; }
.nav__cta .btn{ padding:8px 14px; }

/* бургер */
.burger{
  display:none; width:42px; height:42px;
  border:1px solid var(--hdr-bd); border-radius:10px;
  background:transparent; cursor:pointer;
}
.burger span{ display:block; height:2px; margin:6px 10px; background:#fff; transition:.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* десктоп: меню в одну строку, не переносить */
@media (min-width: 1120px){
  .nav__list{ flex-wrap: nowrap; white-space: nowrap; }
  .nav__list li{ flex: 0 0 auto; }
}

/* мобильный: бургер и выпадающее меню */
@media (max-width: 920px){
  .header__inner{ grid-template-columns: auto 1fr auto; }

  .burger{ display:block; }
  .header__phone{ order: 3; grid-column: 1 / -1; display:none; } /* чтобы не дублировался */

  .nav{
    position: fixed; top: var(--hdr-h); left:0; right:0;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
    background: rgba(12,12,20,0.96); border-bottom: 1px solid var(--hdr-bd);
  }
  .nav.open{ max-height: 80vh; }
  .nav__list{
    flex-direction: column; align-items: stretch;
    padding: 12px 16px 16px; gap: 8px;
  }
  .nav__list a{ padding:10px 6px; display:block; }
  .nav__cta .btn{ width:100%; text-align:center; }
}

/* якоря под фикс. хедер */
section[id], [id^="panel-"]{ scroll-margin-top: calc(var(--hdr-h) + 12px); }

/* тень при скролле */
.site-header.header--scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ===============================
   UTILS
=================================*/
.card img{ max-width: 100%; height: auto; }
.media-fit img{ position: absolute !important; z-index: 0 !important; }
.hero-media { border-radius: 12px; }
.no-scroll{ overflow:hidden; }