/* =========================
   Bobcat-TSK UI (Dark, modern, airy)
   ========================= */

:root{
  --bg:#070a0f;
  --bg2:#0b1018;
  --card:#0f1724;
  --card2:#0c1320;
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.74);
  --muted2:rgba(234,240,255,.58);
  --line:rgba(234,240,255,.12);
  --line2:rgba(234,240,255,.08);
  --accent:#ffb400;           /* bobcat yellow */
  --accent2:#4da3ff;          /* blue */
  --good:#47e6a1;

  --shadow: 0 22px 70px rgba(0,0,0,.58);
  --shadow2: 0 14px 34px rgba(0,0,0,.38);
  --shadow3: 0 10px 22px rgba(0,0,0,.28);

  --r:16px;
  --r2:22px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(1200px 800px at 15% -15%, rgba(255,180,0,.18), transparent 60%),
    radial-gradient(900px 650px at 90% 0%, rgba(77,163,255,.16), transparent 55%),
    radial-gradient(900px 650px at 40% 110%, rgba(71,230,161,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--text) !important;
  line-height:1.42;
}

/* If some old css forces light theme */
html{ background: var(--bg) !important; }
body, main, header, footer, section, div{ color: inherit; }

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.98; }
img{ max-width:100%; display:block; }
button{ font:inherit; }
input,textarea{ font:inherit; }

.container{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}

.section{ padding:58px 0; }
@media (max-width:720px){
  .section{ padding:44px 0; }
}

.section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
@media (max-width:720px){
  .section__head{ flex-direction:column; align-items:stretch; }
}

.h1{ font-size:50px; line-height:1.02; letter-spacing:-0.03em; margin:0; }
.h2{ font-size:30px; margin:0; letter-spacing:-0.02em; }
.h3{ font-size:18px; margin:0; letter-spacing:-0.01em; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }
.link{
  color: rgba(255,180,0,.95);
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.link:hover{ text-decoration: underline; }

.pill{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--line2);
  font-size:12px;
  color:var(--muted);
}

/* =========================
   Header / Navigation
   ========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background: linear-gradient(to bottom, rgba(7,10,15,.92), rgba(7,10,15,.70));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}

/* Был градиентный квадрат — теперь контейнер под реальный логотип */
/* ===== Логотип в шапке (исправленный) ===== */

.brand__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:14px;

  /* Подложка, чтобы белый JPG не резал глаз */
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);

  width:auto;
  height:auto;
}

.brand__logoImg{
  height:34px;
  width:auto;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}


@media (max-width:520px){
  .brand__logo{ width:76px; }
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.nav a{
  color:var(--muted);
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: var(--text);
}

/* =========================
   Buttons
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,180,0,.96), rgba(255,180,0,.55));
  color:#111 !important;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(255,180,0,.14);
  transition: transform .12s var(--ease), filter .18s var(--ease), opacity .18s var(--ease), box-shadow .18s var(--ease);
  will-change: transform;
}
.btn:hover{ filter:saturate(1.06) contrast(1.02); box-shadow: 0 22px 55px rgba(255,180,0,.16); }
.btn:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,180,0,.16), 0 18px 40px rgba(255,180,0,.14);
}

.btn--ghost{
  background: rgba(255,255,255,.05);
  color: var(--text) !important;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.btn--ghost:hover{
  background: rgba(255,255,255,.08);
}
.btn--wide{ width:100%; }

/* =========================
   Cards / Grid
   ========================= */

.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width:980px){ .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px){ .cards-grid{ grid-template-columns: 1fr; } }

.card{
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line2);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  will-change: transform;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,180,0,.22);
  box-shadow: var(--shadow);
}

.card:focus-within{
  border-color: rgba(255,180,0,.26);
  box-shadow: 0 0 0 4px rgba(255,180,0,.10), var(--shadow2);
}

.card__img{
  width:100%;
  height:200px;
  object-fit:cover;
  background: rgba(255,255,255,.03);
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.45));
}

.card__img--placeholder{
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.03);
  border-bottom:1px solid var(--line2);
}

.card .h3{ padding:14px 14px 2px; }
.card .muted.small{ padding:0 14px; }

.card__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 16px;
  gap:12px;
}

.price{
  font-weight:900;
  letter-spacing:-0.01em;
  color: rgba(234,240,255,.96);
}

.tag{
  font-size:12px;
  font-weight:900;
  color: var(--text);
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line2);
}

/* =========================
   Badge / Lead
   ========================= */

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(234,240,255,.92);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120px 60px at 10% 50%, rgba(255,180,0,.25), transparent 60%),
    rgba(255,255,255,.05);
}

.lead{
  font-size:16px;
  line-height:1.6;
  margin:0;
  max-width: 62ch;
}

/* =========================
   Hero (new airy layout)
   ========================= */

.hero{ padding:46px 0 18px; }

.hero__grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:22px;
  align-items:stretch;
}
@media (max-width:920px){
  .hero{ padding:34px 0 12px; }
  .hero__grid{ grid-template-columns:1fr; }
  .h1{ font-size:40px; }
}

.hero__left{
  padding:28px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 320px at 18% 10%, rgba(255,180,0,.18), transparent 60%),
    radial-gradient(520px 320px at 86% 0%, rgba(77,163,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.hero__left:before{
  content:"";
  position:absolute;
  inset:-140px -140px auto auto;
  width:520px; height:520px;
  background: radial-gradient(circle at 30% 30%, rgba(255,180,0,.18), transparent 62%);
  transform: rotate(10deg);
  pointer-events:none;
  filter: blur(.2px);
}

.hero__left:after{
  content:"";
  position:absolute;
  inset:auto -220px -260px auto;
  width:560px; height:560px;
  background: radial-gradient(circle at 30% 30%, rgba(77,163,255,.16), transparent 60%);
  pointer-events:none;
}

/* Логотип на главной */
/* Логотип на главной (улучшенный) */
.hero__logo{
  margin-bottom: 14px;
  display:flex;
  align-items:center;
}

.hero__logoImg{
  height:60px;
  width:auto;
  object-fit:contain;
  display:block;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:10px 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.hero__title{
  margin-top:14px;
  margin-bottom:12px;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
  margin-bottom:14px;
}

.hero__pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.hero__right{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.card--glass{
  padding:18px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(220px 160px at 20% 0%, rgba(255,180,0,.14), transparent 65%),
    rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
}

.card--glass .h3{ padding:0; }
.card--glass .muted.small{ padding:0; }

.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
}
@media (max-width:520px){
  .hero__stats{ grid-template-columns: 1fr; }
}

.stat{
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.stat__k{ font-size:12px; color: rgba(234,240,255,.66); }
.stat__v{ margin-top:6px; font-weight:900; letter-spacing:-0.01em; }

/* =========================
   CTA block
   ========================= */

.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(260px 160px at 18% 50%, rgba(71,230,161,.12), transparent 62%),
    radial-gradient(260px 160px at 92% 20%, rgba(255,180,0,.14), transparent 65%),
    rgba(255,255,255,.04);
  box-shadow: var(--shadow3);
}
@media (max-width:720px){
  .cta{ flex-direction:column; align-items:stretch; }
}

/* =========================
   Category card specs (3 rows)
   ========================= */

.card__specs{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px 0;
}

.card__spec{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border-radius:14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.07);
}

.card__spec-k{
  font-size:12px;
  color: rgba(234,240,255,0.66);
}

.card__spec-v{
  font-size:12px;
  font-weight:900;
  color: rgba(234,240,255,0.95);
  text-align:right;
}

/* =========================
   Product page
   ========================= */

.product{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
  margin-top:14px;
}
@media (max-width:920px){ .product{ grid-template-columns:1fr; } }

.product__left{
  padding:18px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

.product__right{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.product__img{
  width:100%;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(255,255,255,.03);
}

.row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Specs table */
.spec-table{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  background: rgba(0,0,0,.16);
}
.spec-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:14px;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.spec-row:first-child{ border-top:none; }
.spec-key{
  color: rgba(234,240,255,.78);
  font-size: 14px;
  line-height: 1.4;
}
.spec-val{
  color: rgba(234,240,255,.96);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.4;
  text-align: right;
}
@media (max-width:700px){
  .spec-row{ grid-template-columns:1fr; }
  .spec-val{ text-align:left; }
}

/* =========================
   Forms / Modal
   ========================= */

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.62);
  z-index:50;
}
.modal.is-open{ display:flex; }
.modal__box{
  width:min(540px, 100%);
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(15,23,36,.98), rgba(12,19,32,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.65);
  padding:16px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px 0;
}

.input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text) !important;
  outline:none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.input:focus, textarea:focus{
  border-color: rgba(255,180,0,.35);
  box-shadow: 0 0 0 4px rgba(255,180,0,.12);
  background: rgba(255,255,255,.06);
}

/* =========================
   Footer
   ========================= */

.site-footer{
  padding:38px 0 52px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:44px;
  color:var(--muted);
}

.footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* =========================
   Misc
   ========================= */

hr{
  border:none;
  border-top:1px solid rgba(255,255,255,.08);
  margin:14px 0;
}