/* ---------- БАЗА (светлая тема) ---------- */
:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --muted:#64748b;
  --text:#0f172a;
  --brand:#0ea5e9;
  --brand-2:#10b981;
  --border:#e5e7eb;
  --shadow:0 12px 40px rgba(15,23,42,.06);

  /* Типографика */
  --fs-body: clamp(15px, 1.7vw, 16.5px);
  --fs-h1: clamp(28px, 6vw, 48px);
  --fs-h2: clamp(22px, 4.2vw, 34px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, Segoe UI, Inter, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 540px at -20% 10%, rgba(16,185,129,.08), transparent 55%),
    radial-gradient(900px 540px at 120% -10%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg,#fbfcff 0%, var(--bg) 100%);
  font-size: var(--fs-body);
  -webkit-text-size-adjust: 100%;
}
img{max-width:100%;display:block}
.container{width: min(1320px, 96%); margin: 0 auto}

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-grid{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px; padding:10px 0;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.logo img{height:34px;width:auto}

/* desktop nav */
.nav{display:flex;gap:16px}
.nav a{
  color:#334155; text-decoration:none; padding:8px 10px; border-radius:10px;
}
.nav a:hover{background:#eef2f7}

.actions{display:flex;align-items:center;gap:8px}
.lang{
  padding:8px 10px; border:1px solid var(--border); border-radius:10px;
  text-decoration:none; color:#334155; line-height:1; font-weight:600;
}
.btn-wa,.btn-call{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  color:#0b1322; background:#ecfeff; border:1px solid #c7f9ff;
  padding:10px 12px; border-radius:12px; font-weight:700
}
.btn-call{background:#ecfdf5;border-color:#b7f5dc}
.icon{width:18px;height:18px;fill:currentColor;display:inline-block;vertical-align:-3px}

/* Burger + drawer (мобилка) */
.burger{display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#0f172a;border-radius:2px}
.nav-drawer{
  display:none; position:fixed; left:12px; right:12px; top:64px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow: var(--shadow); padding:8px; z-index:60;
}
.nav-drawer a{
  display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:#0f172a;
}
.nav-drawer a:active{background:#f1f5f9}

/* ---------- HERO ---------- */
.hero{
  position:relative; background-size:cover; background-position:center;
  /* если inline-стиль не задан, секция останется светлой */
}
.hero:before{
  /* лёгкая белая вуаль поверх фоновой картинки — оставь, чтобы текст читался */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.52));
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
  min-height: clamp(420px, 60svh, 640px);
  padding: clamp(28px, 6vw, 56px) 0;
}
.hero .hero-text h1{
  margin:0 0 10px; line-height:1.12; font-size: var(--fs-h1);
  background:linear-gradient(135deg,#0f172a 0%, #334155 70%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .hero-text p{color:#475569;max-width:680px}

/* Кнопки */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#00111a; text-decoration:none; font-weight:800; border:0;
  box-shadow:0 10px 24px rgba(14,165,233,.22)
}
.btn:hover{filter:brightness(1.05)}
.btn-outline{
  display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  color:#0f172a; text-decoration:none; background:#fff
}
.hero-video video{max-width:100%;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow)}

/* ---------- СЕКЦИИ ---------- */
.section{padding:56px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.about .text h2,.products h2,.contacts h2{font-size: var(--fs-h2); margin:0 0 10px}
.about .text p{color:#475569}
.image img{border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow)}

/* ---------- ПРОДУКЦИЯ ---------- */
.products{padding:64px 0}
.tabs{
  display:flex; gap:10px; margin-bottom:16px;
  overflow:auto; padding:4px 0 8px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.tab{
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:#0f172a; cursor:pointer; white-space:nowrap; scroll-snap-align:start;
  flex:0 0 auto;
}
.tab.active{background:#e6f4ff;border-color:#bfddff}
.tab:active{transform:translateY(1px)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* карточки */
.cards{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow:var(--shadow); overflow:hidden;
  transform: translateY(8px); opacity:0; transition:.45s ease;
}
.card.appear{transform:translateY(0);opacity:1}
.card img{width:100%; height: clamp(160px, 32vw, 220px); object-fit: cover; border-radius:12px; border:1px solid var(--border)}
.card h3{margin:10px 0 6px; font-size: clamp(16px, 3.8vw, 18px)}
.card p{color:#475569}
.card-actions{display:flex;gap:10px;margin-top:10px; flex-wrap: wrap}

/* ---------- КОНТАКТЫ ---------- */
.contacts{padding:64px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin-bottom:12px; display:flex; align-items:center; gap:10px}
.contact-list svg{width:18px;height:18px;color:#64748b}
.map-placeholder{border-radius:16px;overflow:hidden;border:1px solid var(--border);height: clamp(260px, 40svh, 360px)}
.map-placeholder iframe{width:100%;height:100%;border:0}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--border);padding:20px 0;background:#fff}
.foot-grid{display:grid;grid-template-columns:1fr auto;align-items:center}
.contacts a{color:#0f172a;text-decoration:none}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:.6s ease}
.reveal.appear{opacity:1; transform:translateY(0)}

/* ---------- МОБИЛКА/ПЛАНШЕТ ---------- */
@media (max-width: 1024px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 900px){
  .nav{display:none}
  .burger{display:flex}
  .actions{gap:6px}
  .lang{padding:8px 9px}
  .hero-inner{grid-template-columns:1fr; min-height: clamp(360px, 52svh, 520px)}
  .two-col{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .container{width:min(600px, 94%)}
  .header-grid{grid-template-columns:auto 1fr auto}
  .btn-wa,.btn-call{padding:9px 10px; font-size: .98rem}
  .tabs{gap:8px}
  .tab{padding:9px 12px; font-size:.97rem}
  .cards{grid-template-columns: 1fr}
  .card img{height: clamp(160px, 46vw, 220px)}
  .contact-grid{grid-template-columns:1fr}
  .map-placeholder{height: clamp(220px, 42svh, 300px)}
}

/* ======== MOBILE-ONLY TWEAKS (≤560px) ======== */
@media (max-width: 560px){

  /* Drawer по умолчанию скрыт, показывается только JS-ом */
  .nav-drawer{ display: none; }

  /* В хедере оставляем только иконки WhatsApp/Телефон */
  .actions .btn-wa .label,
  .actions .btn-call .label { display: none; }
  .actions .btn-wa,
  .actions .btn-call { padding: 10px; }

  /* Чуть крупнее иконки для удобного тапа */
  .actions .btn-wa .icon,
  .actions .btn-call .icon { width:22px; height:22px; }

  /* Красивый мобильный футер */
  .site-footer .foot-grid{
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .site-footer .contacts{
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* Быстрые кнопки в футере (иконки + подпись) */
  .site-footer .quick{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }
  .site-footer .quick .quick-btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--border); background: #fff; text-decoration: none; color: #0f172a;
    box-shadow: var(--shadow);
  }
  .site-footer .quick .quick-btn .icon{ width:20px; height:20px; }
}

/* ---------- ШИРОКИЕ ЭКРАНЫ ---------- */
@media (min-width: 1280px){
  .cards{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}