/* =========================
   THEME / BASE (Cozy Warm)
   ========================= */
:root{
  --bg:#0D1323;      /* фон */
  --card:#131832;    /* фон карточек */
  --acc:#FFD38A;     /* тёплое золото (акцент) */
  --acc2:#6DB7FF;    /* холодный доп. акцент */
  --text:#F7F5F1;    /* мягкий белый */
  --muted:#C8C3BA;   /* тёплый серый для описаний */
  --ok:#58D27C;      /* зелёный (иконки/точки) */
  --warn:#F97316;    /* оранжевый (предупреждения) */
}

*{ box-sizing:border-box }

html,body{
  margin:0; padding:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Inter", Arial;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, #1a2455 0%, #0D1323 40%) fixed;
}

a{ color:var(--acc) }
a:hover{ opacity:.9 } /* лёгкий hover для обычных ссылок */

.container{ max-width:1120px; margin:0 auto; padding:24px }

/* =========================
   HEADER / NAV
   ========================= */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.4) 70%, rgba(11,16,32,0));
  border-bottom:1px solid #1e2a5a;
}

/* строка навигации */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px }
.brand img{ display:block } /* без лишних отступов у <img> */

/* опциональный декоративный логотом (если нужен) */
.logo{
  width:36px; height:36px; border-radius:10px;
  background:conic-gradient(from 210deg, #72e0ff, #e2f0ff, #ffd166, #ff9f1c);
  box-shadow:0 0 24px rgba(114,224,255,.55);
}

/* CTA-кнопки */
.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--acc),#ff9f1c);
  color:#1f1400; padding:12px 18px; border-radius:14px; font-weight:800;
  text-decoration:none; border:0;
  box-shadow:0 8px 30px rgba(255,209,102,.25);
}
.cta.small{ padding:10px 14px; border-radius:12px; font-size:14px }
.cta.ghost{ background:transparent; color:var(--acc); border:1px solid rgba(255,209,102,.45) }
.cta.small:hover{ filter:brightness(1.12); box-shadow:0 10px 35px rgba(255,209,102,.45) }

/* меню-кнопки (pill) */
.bar{ display:flex; gap:10px; flex-wrap:wrap }
.bar a{ text-decoration:none; transition:.25s ease } /* без подчёркивания */
.pill{
  border:1px solid #2a376f; border-radius:999px; padding:7px 12px; color:#cdd4f5;
}
.pill:hover{
  background:rgba(255,209,102,.18);
  border-color:var(--acc); color:var(--acc);
  box-shadow:0 0 12px rgba(255,209,102,.35);
}

/* гамбургер по умолчанию скрыт (покажем на мобиле) */
.menu-toggle{ display:none }

/* =========================
   HERO / SECTIONS / FORMS
   ========================= */
.hero{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:28px; align-items:center; padding:40px 0;
}

.card{
  background:linear-gradient(180deg, rgba(18,25,53,.9), rgba(18,25,53,.65));
  border:1px solid #263162; border-radius:22px;
  padding:28px; /* больше воздуха внутри карточек */
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.badge{
  display:inline-block; font-size:13px; font-weight:700; color:#091131;
  background:linear-gradient(180deg,#e2f6ff,#bde9ff);
  padding:6px 12px; border-radius:999px;
}

h1{ font-size:clamp(28px,4vw,44px); line-height:1.1; margin:10px 0 10px }
h2{ font-size:clamp(22px,3vw,32px); margin:0 0 10px }
p.lead{ color:var(--muted); font-size:18px; margin:0 0 16px }

.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0 }
.feat{ display:flex; gap:12px; align-items:flex-start }
.feat .dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 16px rgba(88,210,124,.7);
  margin-top:6px;
}

/* формы */
.col{ display:grid; gap:16px }
.form label{ font-size:14px; color:#bfc6ea }
.input, select, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #32407a; background:#0d1430; color:var(--text);
}

/* сетки */
.grid{ display:grid; gap:16px }
.grid.two{ grid-template-columns:repeat(2,1fr) }
.grid.three{ grid-template-columns:repeat(3,1fr) }

/* прочее */
.section{ padding:30px 0 }
.pricing .price{ font-size:36px; font-weight:900 }
.guarantee{
  border:1px dashed #3a4a8f; padding:14px; border-radius:16px;
  color:#dbe7ff; background:rgba(114,224,255,.05);
}

/* футер и кнопка звонка */
footer{ border-top:1px solid #1e2a5a; color:#aeb6e6; padding:30px 0; margin-top:34px }
.sticky-cta{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--acc),#ff9f1c); color:#1b1200;
  padding:10px 16px; border-radius:999px; display:flex; gap:10px; align-items:center; font-weight:900;
  box-shadow:0 16px 40px rgba(255,209,102,.35);
}

/* декоративное фото в hero */
.hero-photo{
  width:100%; margin:18px 0; border-radius:18px;
  border:1px solid #263162;
  box-shadow:0 8px 40px rgba(255,209,102,.15);
}

/* =========================
   GALLERY
   ========================= */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px }
.g{
  position:relative; overflow:hidden; /* фото не выходит за рамку */
  aspect-ratio:1; border-radius:12px;
  background:linear-gradient(135deg,#22306b,#0d1430);
  border:1px solid #2b3a79;
}
.g img{
  width:100%; height:100%;
  object-fit:cover;     /* заполняем квадрат без искажений */
  display:block; border-radius:inherit;
}

/* =========================
   MOBILE (<= 680px)
   ========================= */
@media (max-width:680px){
  /* строка с брендом и кнопкой — всегда в одну линию */
  header .nav{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:10px; padding-inline:16px;
  }

  .brand{
    flex:1 1 auto; min-width:0; gap:10px;
  }
  .brand span{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:16px;
  }

  /* показать кнопку меню справа */
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; cursor:pointer;
    border:1px solid #2a376f; border-radius:12px;
    background:#0d1430; color:var(--text);
  }

  /* выпадающее меню — ниже строки бренд+гамбургер */
  #navMenu{ display:none; width:100% }
  #navMenu.open{
    display:flex; flex-direction:column; gap:10px; margin-top:14px;
  }

  /* верхнюю кнопку Call прячем (есть фиксированная снизу) */
  .cta.small{ display:none }

  /* сетки */
  .hero{ grid-template-columns:1fr }
  .features{ grid-template-columns:1fr }
  .grid.two, .grid.three{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:repeat(3,1fr) }

  /* очень узкие экраны — компактнее бренд */
  @media (max-width:360px){
    .brand img{ height:36px !important }
    .brand span{ font-size:15px }
  }
}

/* =========================
   DESKTOP (>= 681px)
   ========================= */
@media (min-width:681px){
  header .nav{ padding:14px 0; gap:24px }
  .brand{ gap:18px }
  .bar{ gap:18px }
  .pill{ padding:9px 16px; border-radius:999px; font-size:15px }
  .cta.small{ padding:12px 18px; font-size:15px }
}

/* =========================
   HAMBURGER: ☰ → ✕ (lines)
   ========================= */
.menu-toggle{
  position:relative; /* контейнер для полосок */
}
.menu-toggle .line{
  position:absolute; left:10px; right:10px; height:2px; border-radius:2px;
  background:var(--text);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-toggle .line:nth-child(1){ top:13px }
.menu-toggle .line:nth-child(2){ top:20px }
.menu-toggle .line:nth-child(3){ top:27px }

/* открытое состояние → крестик */
.menu-toggle.is-open .line:nth-child(1){ top:20px; transform:rotate(45deg) }
.menu-toggle.is-open .line:nth-child(2){ opacity:0 }
.menu-toggle.is-open .line:nth-child(3){ top:20px; transform:rotate(-45deg) }

/* =========================
   BULBS GLOW (CSS only)
   ========================= */
.brand img.bulbs{
  filter: drop-shadow(0 0 6px rgba(255,211,138,.20)) drop-shadow(0 0 14px rgba(255,211,138,.12));
  animation: glowPulse 3.2s ease-in-out infinite;
}
.brand img.bulbs:hover{ animation-duration:1.8s }
@keyframes glowPulse{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(255,211,138,.20)) drop-shadow(0 0 14px rgba(255,211,138,.12)) }
  50%    { filter: drop-shadow(0 0 12px rgba(255,211,138,.38)) drop-shadow(0 0 22px rgba(255,211,138,.24)) }
}

/* =========================
   SPACING: Service Areas & FAQ
   ========================= */
/* если секциям добавлен id, применим точечно */
#areas.section.card{ padding:34px 28px }
#areas.section.card h2{ margin-bottom:12px }
#areas.section.card .bar{ margin-top:6px; row-gap:10px }

#faq.section.card{ padding:34px 28px }
#faq.section.card h2{ margin-bottom:12px }
#faq details{ margin:8px 0; padding:8px 0; border-top:1px solid #22306b }
#faq details:first-of-type{ border-top:0 }

/* универсальная альтернатива без id (современные браузеры поддерживают :has) */
/*
.section.card:has(> h2){ padding:34px 28px }
.section.card:has(> h2) h2{ margin-bottom:12px }
.section.card:has(> h2) .bar{ margin-top:6px }
*/
.section.card {
  padding: 34px 32px; /* как в FAQ и Service Areas */
}

.section.card .bar {
  gap: 12px;
  justify-content: center; /* выравниваем элементы красиво */
  flex-wrap: wrap;
}