/* our-brands.css */

:root{
  --bg-soft: #E4E0D7;
  --bg-soft-2: #ECEAE0;
  --hero-bg: #E4E0D7;
  --text: #000;
  --text-dark: #27221B;
  --muted: rgba(39,34,27,.85);
  --accent: #998D82;
  --radius: 15px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-pill: 999px;
}

/* ================= HERO ================= */
.brands-hero{
  background: var(--hero-bg);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  min-height: 740px;
}

.brands-hero .hero-text{
  width: 493px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  backdrop-filter: blur(15px);
}

.brands-hero .badge{
  display: inline-flex;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  width: fit-content;
}

.brands-hero h1{
  margin: 0;
  font-size: 38px;
  font-weight: 300;
  line-height: 1.2;
  font-family: Unbounded, Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.brands-hero .hero-desc{
  font-size: 18px;
  line-height: 1.55;
  max-width: 420px;
}

.brands-hero .hero-image{
  flex: 1;
  padding: 46px 44px 46px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brands-hero .hero-image img{
  width: 735px;
  height: 648px;
  object-fit: cover;
  border-radius: var(--radius-16);
}

/* ================= BRAND SECTIONS ================= */
.brands-sections{
  margin-top: 60px;
}

.brand-row{
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 0 40px;
  margin-bottom: 60px;
}

.brand-row.reverse{
  flex-direction: row-reverse;
}

.brand-media{
  width: 735px;
  height: 380px;
  background: var(--bg-soft-2);
  border-radius: var(--radius-16);
  overflow: hidden;
  flex-shrink: 0;
}

.brand-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-content{
  width: 479px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ëîãîòî êàòî SVG 160x83 (Figma) */
.brand-logo{
  width: 160px;
  height: 83px;
  display: block;
  margin: 0 0 12px 0;
}

.brand-logo img{
  width: 100%;
  height: 100%;
  display: block;
}

.brand-content h3{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.brand-content p{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

/* ================= PRIVATE LABEL ================= */
.private-label{
  margin-top: 80px;
}

.private-row{
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 0 40px;
}

.private-content{
  width: 479px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.private-kicker{
  font-size: 34px;
  font-weight: 300;
  font-family: Unbounded, Manrope, sans-serif;
}

.private-content h2{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.private-content p{
  font-size: 16px;
  line-height: 1.55;
}

.private-media{
  width: 735px;
  height: 380px;
  background: var(--bg-soft-2);
  border-radius: var(--radius-16);
  overflow: hidden;
  flex-shrink: 0;
}

.private-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= PROVIDE ================= */
.provide{
  margin-top: 40px;
  background: var(--bg-soft);
  border-radius: var(--radius-20);
  padding: 60px 40px 48px;
  text-align: center;
}

.provide h2{
  margin: 0;
  font-size: 38px;
  font-weight: 300;
  font-family: Unbounded, Manrope, sans-serif;
}

.provide-lead{
  max-width: 860px;
  margin: 16px auto 34px;
  font-size: 18px;
  line-height: 1.55;
}

.provide-list{
  max-width: 856px;
  margin: 0 auto 36px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 16px;
  text-align: left;
}

.provide-list li{
  position: relative;
  padding-left: 34px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.provide-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 8px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}

/* ================= PRIMARY BUTTON ================= */
a.btn.btn-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 32px;
  padding-right: 56px;
  background: #998D82;
  border-radius: 999px;
  border: none;
  color: #ffffff;
  text-decoration: none;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: opacity .15s ease;
}

/* ËßÂÀ ÈÊÎÍÀ (D logo) */
a.btn.btn-primary .btn-icon{
  width: 26px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='27' height='21' viewBox='0 0 27 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.666 0H0.336695V3.06633L10.6901 3.04228C15.2956 3.04228 19.2758 4.28083 21.3441 6.3491C22.306 7.29906 22.787 8.3813 22.787 9.5477C22.787 14.045 18.1815 17.3157 11.8324 17.3157H3.04228V10.5698C3.04228 9.60783 3.82389 8.81419 4.7979 8.81419H12.6982C13.6602 8.81419 14.4538 9.5958 14.4538 10.5698C14.4538 11.5438 13.6842 12.3014 12.7343 12.3254L5.62761 12.4337L5.67571 15.4759L12.7824 15.3677C15.3797 15.3316 17.5081 13.1792 17.5081 10.5698C17.5081 7.96043 15.3557 5.77191 12.7102 5.77191H4.7979C2.15244 5.77191 0 7.92435 0 10.5698V20.3219H11.8685C20.0935 20.3219 26.0578 15.7645 26.0578 9.49961C26.0458 3.90807 19.7207 0 10.666 0Z' fill='white'/%3E%3C/svg%3E");
}

/* ÄßÑÍÀ ÑÒÐÅËÊÀ (êàêòî SVG-òî òè) */
a.btn.btn-primary::after{
  content: "";
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2215%22%20viewBox%3D%220%200%2019%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%206.36401C0.447715%206.36401%201.08635e-08%206.81173%200%207.36401C-1.08635e-08%207.9163%200.447715%208.36401%201%208.36401L1%207.36401L1%206.36401ZM18.1217%208.07112C18.5122%207.6806%2018.5122%207.04743%2018.1217%206.65691L11.7577%200.292946C11.3672%20-0.0975785%2010.734%20-0.0975785%2010.3435%200.292946C9.95296%200.68347%209.95296%201.31664%2010.3435%201.70716L16.0003%207.36401L10.3435%2013.0209C9.95296%2013.4114%209.95296%2014.0446%2010.3435%2014.4351C10.734%2014.8256%2011.3672%2014.8256%2011.7577%2014.4351L18.1217%208.07112ZM1%207.36401L1%208.36401L17.4146%208.36401L17.4146%207.36401L17.4146%206.36401L1%206.36401L1%207.36401Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
  transition: transform .15s ease;
}

a.btn.btn-primary:hover{
  opacity: 0.95;
}

a.btn.btn-primary:hover::after{
  transform: translateY(-50%) translateX(2px);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px){
  .brands-hero{
    flex-direction: column;
    min-height: auto;
  }

  .brands-hero .hero-text,
  .brand-content,
  .private-content{
    width: 100%;
  }

  .brands-hero .hero-image{
    padding: 20px;
  }

  .brands-hero .hero-image img{
    width: 100%;
    height: 420px;
  }

  .brand-row,
  .brand-row.reverse,
  .private-row{
    flex-direction: column;
    padding: 0 16px;
  }

  .brand-media,
  .private-media{
    width: 100%;
    height: 300px;
  }

  .provide{
    padding: 50px 16px 44px;
  }

  .provide-list{
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .provide h2{
    font-size: 30px;
  }

  /* äà íå èçãëåæäà îãðîìíî íà ìîáèëíî */
  .brand-logo{
    width: 140px;
    height: auto;
  }

  .brand-logo img{
    height: auto;
  }
}

@media (max-width: 520px){
  .brands-hero h1{
    font-size: 30px;
  }

  .brands-hero .hero-desc{
    font-size: 16px;
  }
}