/* ==========================================================================
   GRAUMANN · MASTER BENTO REDESIGN (g5-index.css)
   Bento Grid Architecture · Clear Block Boundaries · Empty Image Placeholders
   High Customer Readability & German Engineering Precision
   ========================================================================== */

:root {
  /* Surface Rhythm */
  --bento-bg-white: #FFFFFF;
  --bento-bg-canvas: #F4F7FB;
  --bento-bg-navy: #01244C;
  --bento-bg-navy-deep: #011936;
  --bento-bg-dark-card: rgba(255, 255, 255, 0.06);
  --bento-bg-dark-hover: rgba(255, 255, 255, 0.10);

  /* Borders & Lines */
  --bento-border: #DCE5F0;
  --bento-border-subtle: #E8EFF7;
  --bento-border-dark: rgba(255, 255, 255, 0.12);
  --bento-border-dark-hover: rgba(58, 151, 224, 0.5);
  --bento-hover-blue: #3A97E0;

  /* Spacing & Geometry */
  --bento-r: 16px;
  --bento-r-sm: 10px;
  --bento-gap: 20px;
  --bento-pad: clamp(20px, 2.5vw, 32px);
  --bento-sec-pad: clamp(60px, 7vw, 92px);
}

/* --------------------------------------------------------------------------
   §1 · SECTION CONTAINERS & SEPARATION
   -------------------------------------------------------------------------- */
main > section.bolim:not(.hs),
main > .bolim:not(.hs) {
  padding-block: var(--bento-sec-pad) !important;
  position: relative !important;
  border-bottom: 1px solid var(--bento-border) !important;
  background: var(--bento-bg-white) !important;
  overflow: hidden !important;
}

main > section.bolim--yuza:not(.hs),
main > .bolim--yuza:not(.hs) {
  background: var(--bento-bg-canvas) !important;
}

main > section.bolim--quyuq:not(.hs),
main > .bolim--quyuq:not(.hs) {
  background: var(--bento-bg-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* Reset .ich layout for MAIN sections only (header/footer .ich flex boʻlib qoladi —
   aks holda header ustma-ust yigʻilib qoladi) */
main > section .ich,
main > .bolim .ich,
main .ich {
  max-width: none !important;                       /* yagona chet: g5.css §H */
  margin-inline: auto !important;
  padding-inline: var(--chet) !important;
  display: block !important;
  width: 100% !important;
}
/* Header · footer — yagona chet (g5.css §H), flex saqlanadi */
.header .ich,
footer .ich {
  max-width: none !important;
  width: 100% !important;
  padding-inline: var(--chet) !important;
}

/* --------------------------------------------------------------------------
   §2 · BENTO GRID FOUNDATION
   -------------------------------------------------------------------------- */
.bento {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--bento-gap) !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* Spans */
.s12 { grid-column: span 12 !important; }
.s8  { grid-column: span 8 !important; }
.s7  { grid-column: span 7 !important; }
.s6  { grid-column: span 6 !important; }
.s5  { grid-column: span 5 !important; }
.s4  { grid-column: span 4 !important; }
.s3  { grid-column: span 3 !important; }

/* Bento Card Primary Component */
.bp-bento {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: var(--bento-pad) !important;
  border-radius: var(--bento-r) !important;
  background: var(--bento-bg-white) !important;
  border: 1px solid var(--bento-border) !important;
  box-shadow: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease !important;
  position: relative !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.bp-bento:hover {
  border-color: var(--bento-hover-blue) !important;
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}

/* Dark Bento Cards */
.bp-bento--navy {
  background: var(--bento-bg-navy-deep) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

.bp-bento--quyuq-ich {
  background: var(--bento-bg-dark-card) !important;
  border-color: var(--bento-border-dark) !important;
  color: #FFFFFF !important;
}

.bp-bento--quyuq-ich:hover {
  background: var(--bento-bg-dark-hover) !important;
  border-color: var(--bento-border-dark-hover) !important;
  box-shadow: none !important;
}

.bp-bento--oq {
  background: #FFFFFF !important;
  border-color: var(--bento-border) !important;
  color: var(--navy) !important;
  box-shadow: none !important;
}

.bp-bento--oq:hover {
  border-color: var(--bento-hover-blue) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   §3 · BENTO MEDIA & REAL PHOTOGRAPHY INTEGRATION
   -------------------------------------------------------------------------- */
.bento-media {
  width: 100% !important;
  border-radius: var(--bento-r-sm, 12px) !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
  background: var(--canvas) !important;
  position: relative !important;
  border: 1px solid rgba(1, 36, 76, 0.08) !important;
  box-sizing: border-box !important;
}

.bento-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bp-bento:hover .bento-media img {
  transform: scale(1.04) !important;
}

.bento-media--16x10 { aspect-ratio: 16 / 10 !important; }
.bento-media--16x9  { aspect-ratio: 16 / 9 !important; }
.bento-media--4x3   { aspect-ratio: 4 / 3 !important; }
.bento-media--1x1   { aspect-ratio: 1 / 1 !important; }

.bento-media--product {
  aspect-ratio: 1 / 1 !important;
  max-height: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
}

.bento-media--product img {
  object-fit: contain !important;
  padding: 10px !important;
}

.bento-media-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin-bottom: 18px !important;
}

.bento-media-grid-2 .bento-media {
  margin-bottom: 0 !important;
}

.bp-bento--navy .bento-media,
.bp-bento--quyuq-ich .bento-media {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* --------------------------------------------------------------------------
   §4 · TYPOGRAPHY & HEADER ARCHITECTURE
   -------------------------------------------------------------------------- */
.bento-bosh-qator {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 24px !important;
  margin-bottom: clamp(28px, 3.5vw, 44px) !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.bento-bosh {
  max-width: 680px !important;
}

.bento-bosh-markaz {
  text-align: center !important;
  max-width: 680px !important;
  margin-inline: auto !important;
  margin-bottom: clamp(28px, 3.5vw, 44px) !important;
}

.bento-bosh-markaz .lid {
  margin-inline: auto !important;
}

.yorliq {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'JetBrains Mono', monospace, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0B63A8 !important;
  margin-bottom: 12px !important;
  padding: 4px 10px !important;
  background: var(--blue-50) !important;
  border: 1px solid rgba(11, 99, 168, 0.25) !important;
  border-radius: 4px !important;
}

.yorliq--oq {
  background: rgba(58, 151, 224, 0.15) !important;
  border-color: rgba(58, 151, 224, 0.35) !important;
  color: #76BFF8 !important;
}

.bolim h2 {
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: var(--navy) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.bolim--quyuq h2 {
  color: #FFFFFF !important;
}

.urgu {
  color: #10609C !important;
  font-weight: inherit !important;
}

.bolim--quyuq .urgu,
.hs .urgu {
  color: #55ADF6 !important;
}

.lid {
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.55 !important;
  color: var(--slate) !important;
  margin: 0 !important;
}

.bolim--quyuq .lid {
  color: rgba(255, 255, 255, 0.78) !important;
}

.bento-n {
  font-family: 'JetBrains Mono', monospace, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0B63A8 !important;
  padding: 2px 8px !important;
  background: var(--blue-50) !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

.bp-bento--quyuq-ich .bento-n {
  background: rgba(58, 151, 224, 0.15) !important;
  color: #76BFF8 !important;
}

.bento-karta__yorliq {
  font-family: 'JetBrains Mono', monospace, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0B63A8 !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.bento-karta__yorliq--oq {
  color: #8FC4EE !important;
}

.bento-karta__h {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.bp-bento--navy .bento-karta__h,
.bp-bento--quyuq-ich .bento-karta__h {
  color: #FFFFFF !important;
}

.bento-karta__p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--slate) !important;
  margin: 0 0 16px 0 !important;
}

.bp-bento--navy .bento-karta__p,
.bp-bento--quyuq-ich .bento-karta__p {
  color: rgba(255, 255, 255, 0.74) !important;
}

.bento-karta__past {
  margin-top: auto !important;
  padding-top: 8px !important;
}

.bento-check {
  color: #0B63A8 !important;
  font-weight: 700 !important;
  margin-right: 8px !important;
}

/* --------------------------------------------------------------------------
   §5 · BOSH-01 · HERO BENTO
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   §5 · MASTER FULL-WIDTH CINEMATIC HERO (Rules 03, 04, 05, 06, 07)
   Matches https://graumann-manufact.vercel.app concept
   -------------------------------------------------------------------------- */
main > section.bolim.hs,
main > .bolim.hs,
.hs {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  min-height: clamp(620px, 82vh, 940px) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--navy) !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.hs--bosh {
  min-height: clamp(660px, 85vh, 960px) !important;
}

.hs--sahifa {
  min-height: clamp(560px, 78vh, 840px) !important;
}

.hs--mahsulot {
  min-height: clamp(560px, 75vh, 800px) !important;
}

.hs__kadr {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hs__kadr img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  display: block !important;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hs:hover .hs__kadr img {
  transform: scale(1.04);
}

.hs__parda {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to top, rgba(0, 19, 40, 0.96) 0%, rgba(0, 19, 40, 0.72) 42%, rgba(0, 19, 40, 0.32) 75%, rgba(0, 19, 40, 0.12) 100%),
    linear-gradient(to right, rgba(0, 19, 40, 0.94) 0%, rgba(0, 19, 40, 0.72) 48%, rgba(0, 19, 40, 0.2) 85%) !important;
}

.hs__ich {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-top: clamp(150px, 18vh, 190px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
  padding-inline: clamp(20px, 4vw, 44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.hs__matn {
  max-width: 760px !important;
}

.bento-badge,
.hs__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'JetBrains Mono', monospace, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #76BFF8 !important;
  background: rgba(58, 151, 224, 0.16) !important;
  border: 1px solid rgba(58, 151, 224, 0.4) !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(8px);
}

.bento-badge__flag {
  display: inline-flex !important;
  width: 16px !important;
  height: 11px !important;
  border-radius: 1px !important;
  overflow: hidden !important;
}

.bento-badge__flag span { flex: 1; height: 100%; }
.flag-b { background: #000000; }
.flag-r { background: #DD0000; }
.flag-g { background: #FFCE00; }

.hs h1,
.hs__h1 {
  font-size: clamp(36px, 4.6vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  color: #FFFFFF !important;
  margin: 0 0 18px 0 !important;
  max-width: 15ch !important;
}

.hs .lid,
.hs__lid {
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.62 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  max-width: 620px !important;
  margin-bottom: 26px !important;
}

.hs__amal {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.btn--chegara-oq {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
}

.btn--chegara-oq:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.hs__izoh,
.bento-hero__izoh {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  margin: 0 !important;
}

.hs__meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: clamp(28px, 3.5vw, 44px) !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.20) !important;
  list-style: none !important;
  padding-left: 0 !important;
  width: 100% !important;
}

.hs__meta li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.hs__meta li span,
.hs__meta li strong {
  color: #76BFF8 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.hs__krosh {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.hs__krosh a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.hs__krosh a:hover {
  color: #FFFFFF !important;
}

.hs__krosh [aria-current="page"] {
  color: #76BFF8 !important;
  font-weight: 600 !important;
}

.hs__ort {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #76BFF8 !important;
}

.hs__ort:hover {
  color: #FFFFFF !important;
}

.hs__plita {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 14px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.04em !important;
  margin-top: 14px !important;
}

/* --------------------------------------------------------------------------
   §6 · BOSH-02 · MOY TANLASH CONSOLE BENTO
   -------------------------------------------------------------------------- */
[data-blok="BOSH-02"] .ich {
  display: block !important;
  width: 100% !important;
}

[data-blok="BOSH-02"] .tanlash__bosh,
[data-blok="BOSH-02"] .bento-bosh-qator {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  grid-column: unset !important;
}

[data-blok="BOSH-02"] .panel,
[data-blok="BOSH-02"] .bp-bento--panel,
.bp-bento--panel {
  width: 100% !important;
  max-width: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid var(--bento-border) !important;
  display: flex !important;
  flex-direction: column !important;
  grid-column: unset !important;
  box-sizing: border-box !important;
}

.tablar {
  display: flex !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--bento-border-subtle) !important;
  width: 100% !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
}

.tab {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  background: #F0F5FA !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tab[aria-selected="true"] {
  background: var(--navy) !important;
  color: #FFFFFF !important;
}

.tab-ich {
  width: 100% !important;
}

.plitalar {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  border: none !important;
}

.plita {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 10px !important;
  background: #FFFFFF !important;
  border: 1.5px solid var(--bento-border) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.plita svg {
  width: 30px !important;
  height: 30px !important;
  color: var(--slate) !important;
  transition: color 0.2s ease !important;
}

.plita:hover {
  border-color: var(--blue-400) !important;
  transform: translateY(-2px) !important;
  background: #F9FCFF !important;
}

.plita.tanlangan {
  border-color: var(--blue-400) !important;
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
}

.plita.tanlangan svg {
  color: var(--blue-500) !important;
}

.plita::after {
  display: none !important;
}

.maydonlar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  margin-bottom: 24px !important;
}

.maydon {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.maydon span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}

.maydon select,
.maydon input,
.maydon textarea {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--navy) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.maydon textarea {
  height: 90px !important;
  padding: 12px 14px !important;
}

.maydon select:focus,
.maydon input:focus,
.maydon textarea:focus {
  border-color: var(--blue-400) !important;
  box-shadow: 0 0 0 3px rgba(58, 151, 224, 0.15) !important;
}

.panel__ost {
  border-top: 1px solid var(--bento-border-subtle) !important;
  padding-top: 16px !important;
  margin-top: 20px !important;
  width: 100% !important;
}

.javobgarlik {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--slate) !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   §7 · BOSH-03 · ASSORTIMENT BENTO
   -------------------------------------------------------------------------- */
.bento-karta__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}

.nishon {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  background: #EAF3DC !important;
  color: #386E18 !important;
}

/* --------------------------------------------------------------------------
   §8 · BOSH-04 · DUAL FLAGSHIPS BENTO
   -------------------------------------------------------------------------- */
.bento-flagman-karta {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  gap: clamp(18px, 2.5vw, 28px) !important;
  align-items: center !important;
  padding: clamp(24px, 3vw, 32px) !important;
}

.bento-flagman-karta .bento-media,
.bento-flagman-karta .bento-media--product {
  margin: 0 !important;
  width: 100% !important;
  max-width: 190px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 16px !important;
  background: #F8FAFD !important;
  border: 1px solid #E6EEF6 !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.bento-flagman-karta .bento-media img,
.bento-flagman-karta .bento-media--product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-flagman__tana {
  display: flex !important;
  flex-direction: column !important;
}

.bento-flagman__nom {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 6px 0 14px 0 !important;
}

.bento-flagman__qator {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.bento-flagman__qator li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--slate) !important;
}

.bento-flagman__n {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0B63A8 !important;
  background: var(--blue-50) !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.bento-flagman__ost {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid var(--bento-border-subtle) !important;
  padding-top: 14px !important;
  margin-top: 4px !important;
}

.bento-flagman__info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* --------------------------------------------------------------------------
   §9 · BOSH-05 · 5W-30 YOKI 10W-40 BENTO
   -------------------------------------------------------------------------- */
.bento-jadval {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
}

.bento-jadval th,
.bento-jadval td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--bento-border-subtle) !important;
  text-align: left !important;
  vertical-align: top !important;
}

.bento-jadval thead th {
  font-weight: 700 !important;
  font-size: 14px !important;
  border-bottom: 2px solid var(--bento-border) !important;
  background: #F9FBFD !important;
}

.bento-j-nom--a { color: #0B63A8 !important; }
.bento-j-nom--b { color: var(--navy) !important; }

.bento-bars {
  width: 100% !important;
  margin: 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.bento-bar-header {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: #FFFFFF !important;
}

.bento-bar-track {
  width: 100% !important;
  height: 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

.bento-bar-fill--a {
  height: 100% !important;
  background: var(--blue-400) !important;
  border-radius: 5px !important;
}

.bento-bar-fill--b {
  height: 100% !important;
  background: #FFFFFF !important;
  border-radius: 5px !important;
}

.bento-chizma__izoh {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
}

.bento-akk {
  width: 100% !important;
}

.bento-akk__sum {
  cursor: pointer !important;
  font-size: 14.5px !important;
  color: var(--navy) !important;
  padding: 4px 0 !important;
}

.bento-akk__m {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--slate) !important;
  margin-top: 8px !important;
}

.bento-cta-karta {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background: #F9FBFD !important;
}

.bento-cta-karta__m {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 12px !important;
}

/* --------------------------------------------------------------------------
   §10 · BOSH-06 · 5 FUNCTIONS BENTO
   -------------------------------------------------------------------------- */
.bento-ish-karta__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

.bento-ish-karta__ik {
  width: 32px !important;
  height: 32px !important;
  color: var(--blue-500) !important;
}

.bento-ish-karta__h {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 8px 0 !important;
}

.bento-ish-karta__p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--slate) !important;
  margin: 0 !important;
}

/* Fix CTA card in 5-functions section */
.bento-ish-karta--cta {
  background: var(--navy) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.bento-ish-karta--cta h3,
.bento-ish-karta--cta .bento-ish-karta__h {
  color: #FFFFFF !important;
}

.bento-ish-karta--cta p,
.bento-ish-karta--cta .bento-ish-karta__p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* --------------------------------------------------------------------------
   §11 · BOSH-07 · ZAMONAVIY DVIGATEL & 550°C
   -------------------------------------------------------------------------- */
.bento-dvigatel__top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}

.bento-dvigatel__top h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.bento-550__ich {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 28px !important;
  align-items: center !important;
  width: 100% !important;
}

.bento-550__raqam {
  font-size: clamp(48px, 6vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: var(--navy) !important;
  margin: 8px 0 16px 0 !important;
}

.bento-550__birlik {
  font-size: 0.45em !important;
  color: var(--blue-400) !important;
}

.bento-550__shkala {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 18px !important;
}

.bento-550__chiziq {
  position: absolute !important;
  bottom: 8px !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--bento-border) !important;
  border-radius: 2px !important;
}

.bento-550__nuqta {
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.bento-550__t {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.bento-550__nuqta--urgu .bento-550__t {
  color: #0B63A8 !important;
}

/* --------------------------------------------------------------------------
   §12 · BOSH-08 · XIZMAT MUDDATI
   -------------------------------------------------------------------------- */
.bento-muddat-chap {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--bento-gap) !important;
}

.bento-km-raqam {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.1 !important;
  margin: 10px 0 14px 0 !important;
}

.bento-km-birlik {
  color: var(--blue-400) !important;
  font-size: 0.5em !important;
}

.bento-holatlar-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

.bento-holat-element {
  display: flex !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--slate) !important;
}

.bento-holat-element .bento-n {
  flex-shrink: 0 !important;
  height: fit-content !important;
}

.bento-holat__h {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.bento-ogoh-bar__ich {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* --------------------------------------------------------------------------
   §13 · BOSH-09 · ORIGINALLIK
   -------------------------------------------------------------------------- */
.bento-himoya__punktlar {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
}

.bento-himoya__punkt-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.bento-himoya__punkt-top h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.bento-tekshiruv__h {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 18px 0 !important;
}

.bento-tekshiruv__roy {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.bento-tekshiruv__q {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--slate) !important;
}

/* --------------------------------------------------------------------------
   §14 · BOSH-10 · QADOQ
   -------------------------------------------------------------------------- */
.bento-qadoq-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

.bento-qadoq-karta {
  align-items: flex-start !important;
}

.bento-qadoq__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.bento-qadoq__hajm {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  letter-spacing: -0.02em !important;
}

.bento-qadoq__ik {
  width: 30px !important;
  height: 30px !important;
  color: var(--blue-500) !important;
}

.bento-qadoq__kim {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 6px 0 !important;
}

.bento-qadoq__izoh {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--slate) !important;
  margin: 0 !important;
}

.bento-qadoq__nishon {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: var(--blue-50) !important;
  color: var(--blue-700) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   §15 · BOSH-11 · HAMKORLIK B2B
   -------------------------------------------------------------------------- */
.bento-hamkorlik-langar {
  padding: clamp(28px, 3.5vw, 44px) !important;
}

.bento-hamkorlik-langar p,
.bento-hamkorlik-langar .mayda,
.bento-hamkorlik__eslatma,
.bp-bento--oq p,
.bp-bento--oq .mayda {
  color: var(--slate) !important;
}

.bento-hamkorlik__lid {
  font-size: 18px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  margin-bottom: 20px !important;
}

.bento-hamkorlik__kim {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.bento-kim-tag {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--navy) !important;
  background: #EDF3F9 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
}

.bento-hamkorlik__amal {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

.bento-hamkorlik-ustun {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.bento-hamkorlik-plita {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.bento-hamkorlik-plita__h {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px 0 !important;
}

/* --------------------------------------------------------------------------
   §16 · BOSH-12 · UCH QADAM
   -------------------------------------------------------------------------- */
.bento-qadam-karta {
  padding: clamp(22px, 2.5vw, 32px) !important;
}

.bento-qadam__h {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 12px 0 8px 0 !important;
}

.bento-qadam-yakun {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--bento-border) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* --------------------------------------------------------------------------
   §17 · BOSH-13 · SOʻROV FORM
   -------------------------------------------------------------------------- */
.bento-aloqa {
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.bento-aloqa li {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.bento-aloqa svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--blue-500) !important;
}

.bento-aloqa .aloqa__nom {
  font-size: 12px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--slate) !important;
  display: block !important;
}

.chiplar {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.chip {
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  background: #F0F5FA !important;
  border: 1px solid var(--bento-border) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.chip[aria-pressed="true"] {
  background: var(--navy) !important;
  color: #FFFFFF !important;
  border-color: var(--navy) !important;
}

.sorov__forma {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

.sorov__forma .keng {
  grid-column: 1 / -1 !important;
}

/* --------------------------------------------------------------------------
   §18 · RESPONSIVE ADAPTATION (Tablet & Mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .bento-qadoq-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .s8, .s7, .s6, .s5, .s4, .s3 {
    grid-column: span 12 !important;
  }
  .bento-hero .s8,
  .bento-hero .s4 {
    grid-column: span 12 !important;
  }
  .plitalar {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .maydonlar {
    grid-template-columns: 1fr !important;
  }
  .bento-550__ich {
    grid-template-columns: 1fr !important;
  }
  .bento-holatlar-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-qadoq-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sorov__forma {
    grid-template-columns: 1fr !important;
  }
  .bento-faktlar-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .bento-flagman-karta {
    grid-template-columns: 1fr !important;
  }
  .bento-flagman-karta .bento-media,
  .bento-flagman-karta .bento-media--product {
    max-width: 200px !important;
    margin: 0 auto 18px auto !important;
  }
}

@media (max-width: 640px) {
  :root {
    --bento-gap: 14px;
    --bento-pad: 18px;
    --bento-sec-pad: 48px;
  }
  .plitalar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bento-qadoq-grid {
    grid-template-columns: 1fr !important;
  }
  .bento-bosh-qator {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   §5b · HERO — SOLVEX KOMPOZITSIYASI (13.09 kech, Otabekning referensi
   solveex.framer.website). Oʻzgarmaydi: matn · rang · shrift.
   Oʻzgaradi: kompozitsiya — markazlashgan ustun (nishon → H1 → lid → ikki tugma
   → izoh), pastda uch fakt relsi; fon = toʻliq ekran RASM OʻRNI (hozir boʻsh,
   `<picture class="hs__kadr">` qaytarilganda oʻzi toʻladi); header ustida CTA.
   Ortga qaytarish: shu §5b ni oʻchirish.
   ========================================================================== */
main > section.bolim.hs--bosh,
main > .bolim.hs--bosh,
.hs--bosh {
  align-items: stretch !important;                 /* .hs__ich toʻliq balandlikni oladi */
  min-height: clamp(720px, 100vh, 1000px) !important;
  background: var(--g5-navy, #01244C) !important;
}

/* Fon: rasm yoʻqligida ham «osmon → yer» chuqurligi — faqat ikkita mavjud rang */
.hs--bosh .hs__parda {
  background:
    linear-gradient(to bottom,
      rgba(2, 48, 106, 0.55) 0%,                    /* --navy-800 */
      rgba(1, 36, 76, 0) 42%,
      rgba(0, 19, 40, 0.72) 100%) !important;      /* --g5-tun */
}
/* Rasm qaytganda — matn ustidagi parda kuchliroq (oq yozuv oʻqilishi uchun) */
.hs--bosh:has(.hs__kadr img) .hs__parda {
  background:
    linear-gradient(to bottom,
      rgba(0, 19, 40, 0.62) 0%,
      rgba(0, 19, 40, 0.34) 48%,
      rgba(0, 19, 40, 0.78) 100%) !important;
}

main > .bolim.hs--bosh .hs__ich,   /* (0,3,1) — `main > .bolim .ich` resetidan (0,2,1) kuchli */
.hs--bosh .hs__ich {
  display: flex !important;                        /* `main .ich{display:block}` dan kuchli */
  flex-direction: column !important;
  justify-content: flex-start !important;          /* matn YUQORIDA (Otabek qoidasi) */
  align-items: flex-start !important;              /* Otabek 13.09: CHAPGA tekislanadi */
  text-align: left !important;
  max-width: none !important;                      /* yon masofa: --hero-chet = sahifa chetining 60 % */
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: var(--chet) !important;
  padding-top: calc(var(--sarlavha-h, 112px) + clamp(190px, 27vh, 290px)) !important;   /* Otabek 14.09: yana biroz pastroq */
  padding-bottom: clamp(28px, 4vh, 44px) !important;
}

.hs--bosh .hs__matn {
  max-width: 900px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.hs--bosh .hs__badge { margin-bottom: 26px !important; }

.hs--bosh .hs__h1 {
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  max-width: 21ch !important;                       /* referensdagi kabi 2 qator */
  margin: 0 0 22px !important;
  text-wrap: balance;
}

.hs--bosh .lid {
  max-width: 640px !important;
  margin: 0 0 30px !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
}

.hs--bosh .hs__amal {
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

/* Ikkilamchi tugma — referensdagi kabi OQ toʻldirilgan (rang tizimidagi oq + navy) */
.hs--bosh .btn--chegara-oq {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--navy, #01244C) !important;
  min-height: 54px !important;
  padding-inline: 26px !important;
}
.hs--bosh .btn--chegara-oq:hover {
  background: #EAF0F7 !important;
  border-color: #EAF0F7 !important;
  color: var(--navy, #01244C) !important;
}
.hs--bosh .btn--asos { min-height: 54px !important; }

.hs--bosh .hs__izoh { text-align: left !important; margin-bottom: 40px !important; }

/* Uch fakt relsi — hero pastki chetida, chapdan */
.hs--bosh .hs__meta {
  margin-top: auto !important;
  padding-top: 18px !important;
  gap: 0 !important;
  grid-template-columns: 1.25fr 1fr 1fr !important;   /* 1-fakt uzunroq — bir qatorda sigʻsin */
}
.hs--bosh .hs__meta li {
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 18px 20px 0 !important;
  border-left: 0 !important;
  font-size: 12.5px !important;
}
.hs--bosh .hs__meta li:first-child { padding-left: 0 !important; }
.hs--bosh .hs__meta li + li { border-left: 1px solid rgba(255, 255, 255, 0.18) !important; }

/* Header ustidagi CTA (referensdagi «Get Free Quote») — bosh sahifada koʻrinadi */
body.hero-toliq .header__cta { display: inline-flex !important; }

@media (max-width: 760px) {
  .hs--bosh { min-height: clamp(620px, 92vh, 820px) !important; }
  main > .bolim.hs--bosh .hs__ich,
  .hs--bosh .hs__ich {
    padding-top: calc(var(--sarlavha-h, 64px) + 28px) !important;
  }
  .hs--bosh .hs__h1 { font-size: clamp(34px, 10vw, 44px) !important; max-width: 100% !important; }
  .hs--bosh .hs__amal { flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 360px !important; }
  .hs--bosh .hs__amal .btn { justify-content: center !important; }
  .hs--bosh .hs__meta { grid-template-columns: 1fr !important; }
  .hs--bosh .hs__meta li { border-left: 0 !important; padding: 10px 0 0 !important; justify-content: flex-start !important; text-align: left !important; }
  .hs--bosh .hs__meta li + li { border-left: 0 !important; }
  body.hero-toliq .header__cta { display: none !important; }
}