/* ===== K22 Safety — Homepage Styles ===== */
:root {
  --hp-primary: #1e2d4d;
  --hp-primary-light: #2a3f6d;
  --hp-text: #1a1a1a;
  --hp-text-light: #6b7280;
  --hp-bg-light: #f3f4f6;
  --hp-bg-lighter: #f9fafb;
  --hp-border: #e5e7eb;
  --hp-max: 1200px;
}
.hp-wrap { max-width: var(--hp-max); margin: 0 auto; padding: 0 24px; }

/* === Marketing pages content wrapper === */
.k22-page-main { background: #fff; min-height: 60vh; }
.k22-page-outer { max-width: 1200px; margin: 0 auto; padding: 40px 24px 64px; display: flex; gap: 32px; align-items: flex-start; }
.k22-page-outer .sidebar-menu { flex-shrink: 0; width: 220px; position: sticky; top: 80px; }
.k22-page-wrap { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .k22-page-outer { flex-direction: column; gap: 0; padding: 24px 16px 48px; }
  .k22-page-outer .sidebar-menu { width: 100%; position: static; margin-bottom: 24px; }
}

/* === Topbar === */
.hp-topbar { background: #1a1a1a; color: rgba(255,255,255,.65); font-size: 13px; padding: 9px 0; }
.hp-topbar__inner { display:flex; align-items:center; justify-content:space-between; }
.hp-topbar__left, .hp-topbar__right { display:flex; align-items:center; gap:20px; }
.hp-topbar__right a { color:#fff; text-decoration:none; font-weight:500; }

/* === Header === */
.hp-header { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.1); position:sticky; top:0; z-index:200; }
.hp-header__inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:24px; }
.hp-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.hp-logo__img { height:48px; width:auto; display:block; object-fit:contain; }
.hp-logo__img--footer { height:52px; filter:brightness(0) invert(1); }
.hp-logo__icon { width:44px; height:44px; background:var(--hp-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp-logo__text strong { display:block; font-size:20px; font-weight:700; color:var(--hp-primary); letter-spacing:.5px; line-height:1.1; }
.hp-logo__text span { font-size:10px; color:var(--hp-text-light); letter-spacing:2.5px; text-transform:uppercase; }
.hp-nav { display:flex; list-style:none; margin:0; padding:0; gap:2px; }
.hp-nav a { display:block; padding:8px 13px; font-size:15px; font-weight:500; color:var(--hp-text); text-decoration:none; border-radius:6px; transition:background .15s; }
.hp-nav a:hover { background:var(--hp-bg-light); color:var(--hp-primary); }
.hp-header__right { display:flex; align-items:center; gap:10px; }
.hp-search { display:flex; align-items:center; gap:8px; background:var(--hp-bg-light); border:1px solid var(--hp-border); border-radius:8px; padding:8px 14px; width:210px; }
.hp-search input { border:none; background:transparent; outline:none; font-size:14px; color:var(--hp-text); width:100%; font-family:inherit; }
.hp-search input::placeholder { color:var(--hp-text-light); }
.hp-icon-btn { width:38px; height:38px; border-radius:8px; color:var(--hp-text); text-decoration:none; display:flex; align-items:center; justify-content:center; transition:background .15s; background:transparent; border:none; cursor:pointer; }
.hp-icon-btn:hover { background:var(--hp-bg-light); }
.hp-callback { display:flex; align-items:center; gap:8px; background:var(--hp-primary); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s; white-space:nowrap; }
.hp-callback:hover { background:var(--hp-primary-light); color:#fff; }

/* === Hero === */
.hp-hero { position:relative; min-height:460px; display:flex; align-items:center; background:#0f1e3a; overflow:hidden; }
.hp-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.38; }
.hp-hero__overlay { display:none; }
.hp-hero__body { position:relative; z-index:2; max-width:600px; padding:70px 0; }
.hp-hero__title { font-size:42px; font-weight:700; color:#fff; line-height:1.15; margin:0 0 18px; }
.hp-hero__desc { font-size:16px; color:rgba(255,255,255,.8); line-height:1.65; margin:0 0 34px; max-width:480px; }
.hp-hero__btns { display:flex; gap:12px; flex-wrap:wrap; }
.hp-btn-prim { display:inline-flex; align-items:center; gap:8px; background:var(--hp-primary); color:#fff; padding:13px 26px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; border:2px solid var(--hp-primary); transition:all .15s; }
.hp-btn-prim:hover { background:var(--hp-primary-light); border-color:var(--hp-primary-light); color:#fff; }
.hp-btn-out { display:inline-flex; align-items:center; padding:13px 26px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; border:2px solid rgba(255,255,255,.55); color:#fff; transition:all .15s; }
.hp-btn-out:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.hp-btn-out--dealer { border-color:rgba(255,210,80,.7); color:#ffd250; }
.hp-btn-out--dealer:hover { border-color:#ffd250; background:rgba(255,210,80,.12); color:#ffd250; }

/* === Features === */
.hp-features { padding:52px 0; background:var(--hp-bg-lighter); }
.hp-features__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hp-feat { background:#fff; border-radius:12px; padding:28px 24px; display:flex; align-items:center; gap:20px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.hp-feat__icon { width:52px; height:52px; background:var(--hp-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hp-feat__title { font-size:16px; font-weight:700; color:var(--hp-text); margin:0 0 4px; }
.hp-feat__desc { font-size:13px; color:var(--hp-text-light); margin:0; }

/* === Section header === */
.hp-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.hp-sec-title { font-size:26px; font-weight:700; color:var(--hp-text); margin:0; }
.hp-sec-link { font-size:14px; color:#2563eb; text-decoration:none; font-weight:500; display:flex; align-items:center; gap:4px; }
.hp-sec-link:hover { text-decoration:underline; }

/* === Catalog grid === */
.hp-catalog { padding:60px 0; background:#fff; }
.hp-cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; grid-template-rows:320px; }
.hp-cat-item { position:relative; border-radius:12px; overflow:hidden; display:block; text-decoration:none; background:#1a2540; }
.hp-cat-item--main { min-height:320px; }
.hp-cat-item--sm { min-height:0; }
.hp-cat-row2 { margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; grid-template-rows:160px; } .hp-cat-row2:empty { display:none; margin:0; }
.hp-cat-row2 .hp-cat-item { height:160px; }
.hp-cat__bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .4s; }
.hp-cat-item:hover .hp-cat__bg { transform:scale(1.05); }
.hp-cat__bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .4s; z-index:0; }
.hp-cat__ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.15) 100%); z-index:1; }
.hp-cat__icon { position:absolute; top:14px; left:14px; width:48px; height:48px; background:#1e2d4d; border:2px solid rgba(255,255,255,.35); border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.5); z-index:2; }
.hp-cat-item--sm .hp-cat__icon { width:40px; height:40px; border-radius:10px; top:10px; left:10px; }
.hp-cat-row2 .hp-cat__icon { width:38px; height:38px; border-radius:10px; top:10px; left:10px; }
.hp-cat__title { position:absolute; bottom:16px; left:16px; right:16px; color:#fff; font-size:15px; font-weight:600; line-height:1.3; text-shadow:0 1px 4px rgba(0,0,0,.6); z-index:2; }
.hp-cat__sub { display:block; font-size:12px; font-weight:400; opacity:.85; margin-top:3px; }

/* === Products === */
.hp-products { padding:60px 0; background:var(--hp-bg-lighter); }
.hp-tabs { display:flex; gap:8px; }
.hp-tab { padding:7px 16px; border-radius:6px; font-size:14px; font-weight:500; border:none; cursor:pointer; transition:all .15s; background:var(--hp-bg-light); color:var(--hp-text-light); font-family:inherit; }
.hp-tab.active,.hp-tab:hover { background:var(--hp-primary); color:#fff; }
.hp-prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; }
.hp-prod { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); transition:box-shadow .2s; }
.hp-prod:hover { box-shadow:0 4px 16px rgba(0,0,0,.12); }
.hp-prod__img { aspect-ratio:1; background:var(--hp-bg-light); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hp-prod__img img { width:100%; height:100%; object-fit:contain; padding:16px; }
.hp-prod__body { padding:14px; }
.hp-prod__name { font-size:14px; font-weight:600; color:var(--hp-text); margin:0 0 4px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.8em; }
.hp-prod__art { font-size:12px; color:var(--hp-text-light); margin:0 0 12px; }
.hp-prod__foot { display:flex; align-items:center; justify-content:space-between; }
.hp-prod__price { font-size:16px; font-weight:700; color:var(--hp-text); }
.hp-cart-btn { width:36px; height:36px; background:var(--hp-primary); color:#fff; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; text-decoration:none; }
.hp-cart-btn:hover { background:var(--hp-primary-light); }

/* === About === */
.hp-about { background:#0f2042; padding:80px 0; }
.hp-about__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hp-about__label { font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 16px; }
.hp-about__title { font-size:34px; font-weight:700; color:#fff; line-height:1.2; margin:0 0 18px; }
.hp-about__desc { font-size:15px; color:rgba(255,255,255,.7); line-height:1.7; margin:0 0 36px; }
.hp-about__stats { display:flex; gap:40px; margin-bottom:36px; }
.hp-stat__num { font-size:30px; font-weight:700; color:#fff; line-height:1; }
.hp-stat__lbl { font-size:13px; color:rgba(255,255,255,.55); margin-top:5px; }
.hp-btn-out-light { display:inline-flex; align-items:center; gap:8px; border:2px solid rgba(255,255,255,.3); color:#fff; padding:12px 24px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; transition:all .15s; }
.hp-btn-out-light:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.hp-about__img { border-radius:12px; overflow:hidden; }
.hp-about__img img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }

/* === Partners === */
.hp-partners { padding:60px 0; background:var(--hp-bg-lighter); }
.hp-brands-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:32px; }
.hp-brand { background:#fff; border-radius:10px; padding:26px 12px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.06); min-height:78px; }
.hp-brand__name { font-size:18px; font-weight:700; text-align:center; }

/* === CTA === */
.hp-cta { background:#1e3a6e; padding:52px 0; }
.hp-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.hp-cta__title { font-size:26px; font-weight:700; color:#fff; margin:0 0 10px; }
.hp-cta__desc { font-size:15px; color:rgba(255,255,255,.7); margin:0; max-width:420px; line-height:1.6; }
.hp-cta__btns { display:flex; gap:12px; flex-shrink:0; }
.hp-phone-btn { display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--hp-primary); padding:14px 22px; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; transition:background .15s; white-space:nowrap; }
.hp-phone-btn:hover { background:var(--hp-bg-light); color:var(--hp-primary); }
.hp-callback-o { display:inline-flex; align-items:center; padding:14px 22px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; border:2px solid rgba(255,255,255,.4); color:#fff; transition:all .15s; white-space:nowrap; cursor:pointer; background:transparent; font-family:inherit; }
.hp-callback-o:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

/* === Footer === */
.hp-footer { background:#111; padding:60px 0 0; color:rgba(255,255,255,.65); }
.hp-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; padding-bottom:48px; }
.hp-footer__logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; text-decoration:none; }
.hp-footer__logo-icon { width:40px; height:40px; background:var(--hp-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hp-footer__logo strong { display:block; font-size:18px; font-weight:700; color:#fff; }
.hp-footer__logo span { font-size:10px; color:rgba(255,255,255,.4); letter-spacing:2px; text-transform:uppercase; }
.hp-footer__desc { font-size:13px; line-height:1.7; margin:0 0 20px; max-width:240px; }
.hp-socials { display:flex; gap:8px; }
.hp-social { width:36px; height:36px; background:rgba(255,255,255,.1); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.65); text-decoration:none; transition:background .15s; }
.hp-social:hover { background:var(--hp-primary); color:#fff; }
.hp-footer__col-title { font-size:12px; font-weight:700; color:#fff; margin:0 0 16px; text-transform:uppercase; letter-spacing:1px; }
.hp-footer__links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.hp-footer__links a { color:rgba(255,255,255,.55); text-decoration:none; font-size:14px; transition:color .15s; }
.hp-footer__links a:hover { color:#fff; }
.hp-footer__phone { font-size:16px; font-weight:700; color:#fff; margin-bottom:12px; }
.hp-footer__contacts { font-size:14px; display:flex; flex-direction:column; gap:10px; }
.hp-footer__contacts a { color:rgba(100,170,255,.85); text-decoration:none; }
.hp-footer__contacts a:hover { color:#fff; }
.hp-footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.hp-footer__bottom a { color:rgba(255,255,255,.4); text-decoration:none; }
.hp-footer__bottom a:hover { color:#fff; }

/* === Burger button === */
.hp-burger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; background:transparent; border:none; cursor:pointer; padding:0; border-radius:8px; transition:background .15s; flex-shrink:0; }
.hp-burger:hover { background:var(--hp-bg-light); }
.hp-burger span { display:block; width:22px; height:2px; background:var(--hp-text); border-radius:2px; transition:all .25s; transform-origin:center; }
.hp-burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hp-burger.is-open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hp-burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* === Mobile menu === */
.hp-mobile-menu { display:none; background:#fff; border-top:1px solid var(--hp-border); overflow:hidden; max-height:0; transition:max-height .3s ease; }
.hp-mobile-menu.is-open { max-height:600px; }
.hp-mobile-nav { list-style:none; margin:0; padding:8px 0; }
.hp-mobile-nav li a { display:block; padding:14px 24px; font-size:16px; font-weight:500; color:var(--hp-text); text-decoration:none; border-bottom:1px solid var(--hp-border); transition:background .15s; }
.hp-mobile-nav li:last-child a { border-bottom:none; }
.hp-mobile-nav li a:hover { background:var(--hp-bg-light); color:var(--hp-primary); }
.hp-mobile-menu__actions { padding:16px 24px 20px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--hp-border); }
.hp-mobile-menu__cb { justify-content:center; }

/* === Responsive 1024px === */
@media(max-width:1024px) {
  .hp-prod-grid { grid-template-columns:repeat(2,1fr); }
  .hp-brands-grid { grid-template-columns:repeat(3,1fr); }
  .hp-footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
  .hp-about__grid { gap:40px; }
  .hp-search { width:180px; }
}

/* === Responsive 768px === */
@media(max-width:768px) {
  /* Topbar */
  .hp-topbar__left { display:none; }
  .hp-topbar__email { display:none; }
  .hp-topbar__inner { justify-content:flex-end; }

  /* Header */
  .hp-nav-wrap { display:none; }
  .hp-search { display:none; }
  .hp-callback--desktop { display:none; }
  .hp-burger { display:flex; }
  .hp-mobile-menu { display:block; }

  /* Hero */
  .hp-hero { min-height:360px; }
  .hp-hero__body { padding:50px 0; }
  .hp-hero__title { font-size:30px; }
  .hp-hero__desc { font-size:15px; }

  /* Features */
  .hp-features { padding:36px 0; }
  .hp-features__grid { grid-template-columns:1fr; gap:14px; }

  /* Catalog */
  .hp-catalog { padding:44px 0; }
  .hp-cat-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .hp-cat-item--main { min-height:220px; }
  .hp-cat-row2 { grid-template-columns:repeat(2,1fr); }

  /* Products */
  .hp-products { padding:44px 0; }
  .hp-prod-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .hp-tabs { flex-wrap:wrap; gap:6px; }

  /* About */
  .hp-about { padding:52px 0; }
  .hp-about__grid { grid-template-columns:1fr; gap:0; }
  .hp-about__img { display:none; }
  .hp-about__stats { gap:24px; }
  .hp-stat__num { font-size:24px; }

  /* Partners */
  .hp-partners { padding:44px 0; }
  .hp-brands-grid { grid-template-columns:repeat(2,1fr); }

  /* CTA */
  .hp-cta { padding:40px 0; }
  .hp-cta__inner { flex-direction:column; align-items:stretch; gap:24px; }
  .hp-cta__btns { flex-direction:column; }
  .hp-cta__title { font-size:22px; }

  /* Footer */
  .hp-footer { padding:44px 0 0; }
  .hp-footer__grid { grid-template-columns:1fr; gap:28px; }

  /* Section headers */
  .hp-sec-title { font-size:22px; }
}

/* === Responsive 480px === */
@media(max-width:480px) {
  .hp-wrap { padding:0 16px; }

  /* Header */
  .hp-logo__img { height:38px; }
  .hp-header__inner { padding:10px 0; gap:8px; }
  .hp-header__right { gap:4px; }
  .hp-icon-btn { width:34px; height:34px; }

  /* Hero */
  .hp-hero { min-height:300px; }
  .hp-hero__body { padding:40px 0; }
  .hp-hero__title { font-size:24px; }
  .hp-hero__desc { font-size:14px; margin-bottom:24px; }
  .hp-hero__btns { flex-direction:column; gap:10px; }
  .hp-btn-prim, .hp-btn-out { justify-content:center; text-align:center; }

  /* Catalog */
  .hp-cat-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .hp-cat-item--main { min-height:180px; }
  .hp-cat-item--sm { aspect-ratio:16/7; }
  .hp-cat-row2 { grid-template-columns:1fr 1fr; }

  /* Products */
  .hp-prod-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .hp-prod__name { font-size:13px; }
  .hp-prod__price { font-size:14px; }

  /* About */
  .hp-about__stats { flex-direction:column; gap:16px; }

  /* Brands */
  .hp-brands-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .hp-brand { padding:18px 10px; min-height:60px; }
  .hp-brand__name { font-size:15px; }

  /* CTA */
  .hp-phone-btn, .hp-callback-o { width:100%; justify-content:center; box-sizing:border-box; }

  /* Footer */
  .hp-footer__bottom { flex-direction:column; gap:10px; text-align:center; }

  /* Section */
  .hp-sec-head { flex-direction:column; align-items:flex-start; gap:10px; }
}