:root {
  --primary-color: #D4882A;
  --secondary-color: #5A9F77;
  --accent-color: #F0A55A;
  --light-color: #E8F5EE;
  --dark-color: #1C3828;
  --gradient-primary: linear-gradient(135deg, #F0BD78 0%, #D4882A 100%);
  --hover-color: #B06A15;
  --background-color: #FDFBF8;
  --text-color: #2C3A30;
  --border-color: rgba(212, 136, 42, 0.2);
  --divider-color: rgba(90, 159, 119, 0.15);
  --shadow-color: rgba(28, 56, 40, 0.08);
  --highlight-color: #9C1C66;
  --highlight-bg: #FEF4E8;
  --main-font: 'Montserrat', sans-serif;
  --alt-font: 'Open Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--alt-font);
  font-size: clamp(14px, 4vw, 16px);
  color: var(--text-color);
  background: var(--background-color);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* PATTERN — organic circles */
.pattern-bg {
  background-color: var(--background-color);
  background-image:
    radial-gradient(circle at 18% 28%, rgba(212,136,42,0.07) 0%, transparent 35%),
    radial-gradient(circle at 82% 72%, rgba(90,159,119,0.07) 0%, transparent 32%),
    radial-gradient(circle at 55% 12%, rgba(212,136,42,0.04) 0%, transparent 22%);
}

/* ════ HEADER ════ */
.site-header {
  padding: 1.2rem 0;
  background: var(--dark-color);
  position: relative; overflow: hidden;
}
.header-deco { display: none; position: absolute; inset: 0; pointer-events: none; }
.header-deco span { position: absolute; border-radius: 50%; }
.header-deco span:nth-child(1) { width: 200px; height: 200px; right: 5%; top: -100px; border: 1.5px solid rgba(240,165,90,0.15); }
.header-deco span:nth-child(2) { width: 80px; height: 80px; right: 20%; top: -10px; background: rgba(90,159,119,0.12); }
@media (min-width: 768px) { .header-deco { display: block; } }

.header-inner { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; position: relative; z-index: 1; }
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.logo-text { font-family: var(--main-font); font-weight: 700; font-size: clamp(17px,4vw,21px); color: #fff; letter-spacing: .04em; }
.logo-text em { font-style: normal; color: var(--accent-color); }

/* ════ MAIN ════ */
main { flex: 1; }
.container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }

/* ════ PRODUCT SECTION ════ */
.product-section { padding: 2.5rem 0; }
.product-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: 340px 1fr; gap: 3rem; align-items: start; } }

/* LEFT */
.left-col { display: flex; flex-direction: column; gap: 1rem; }

.image-wrap {
  background: #fff; border-radius: 28px; padding: 1.75rem 1.25rem; text-align: center;
  box-shadow: 0 4px 24px var(--shadow-color); border: 1px solid var(--border-color);
}
.image-wrap picture, .image-wrap img { display: block; max-width: 100%; height: auto; max-height: 255px; object-fit: contain; margin: 0 auto; }

.guarantee-block {
  background: var(--highlight-bg); border: 1.5px solid var(--border-color);
  border-radius: 24px; padding: 1rem 1.1rem;
  display: flex; align-items: flex-start; gap: .65rem;
}
.guarantee-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--primary-color); margin-top: 2px; }
.guarantee-block p { font-family: var(--main-font); font-weight: 700; font-size: 13px; color: var(--dark-color); line-height: 1.4; }
.guarantee-block span { display: block; font-family: var(--alt-font); font-weight: 400; font-size: 11.5px; color: var(--text-color); margin-top: 3px; }

.features-label { font-family: var(--main-font); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--primary-color); margin-bottom: .65rem; }
.features-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.feature-item { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--border-color); border-radius: 50px; padding: .7rem 1rem; box-shadow: 0 2px 10px var(--shadow-color); transition: box-shadow .2s, transform .15s; }
.feature-item:hover { box-shadow: 0 6px 20px rgba(212,136,42,.18); transform: translateX(4px); }
.fi-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fi-icon svg { width: 18px; height: 18px; color: #fff; }
.fi-text p { font-family: var(--main-font); font-weight: 700; font-size: 12.5px; color: var(--dark-color); line-height: 1.3; }
.fi-text small { font-family: var(--alt-font); font-size: 11px; color: var(--text-color); }

.price-block {
  background: var(--gradient-primary); border-radius: 24px; padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  box-shadow: 0 8px 28px rgba(212,136,42,.3);
}
.price-row { display: flex; align-items: baseline; gap: .35rem; }
.price-amount { font-family: var(--main-font); font-weight: 700; font-size: clamp(26px,5vw,32px); color: #fff; line-height: 1; }
.price-unit { font-family: var(--main-font); font-weight: 500; font-size: 15px; color: rgba(255,255,255,.8); }
.btn-cart {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.75rem; min-height: 48px;
  background: var(--dark-color); color: var(--accent-color);
  font-family: var(--main-font); font-weight: 700; font-size: 15px;
  text-decoration: none; border-radius: 50px;
  transition: background .2s, color .2s;
}
.btn-cart:hover { background: #fff; color: var(--dark-color); }
.btn-cart svg { width: 18px; height: 18px; }

/* RIGHT */
.info-col { display: flex; flex-direction: column; gap: 1.25rem; }
.product-eyebrow { font-family: var(--main-font); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--secondary-color); }
.info-col h1 { font-family: var(--main-font); font-weight: 700; font-size: clamp(22px,5vw,36px); color: var(--dark-color); line-height: 1.2; }
.info-col h1 span { color: var(--primary-color); }
.product-description { font-family: var(--alt-font); font-size: clamp(14px,4vw,15px); line-height: 1.85; color: var(--text-color); }
.product-description + .product-description { margin-top: -.3rem; }

.adv-label { font-family: var(--main-font); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--secondary-color); margin-bottom: .55rem; }
.adv-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.adv-list li { display: flex; align-items: flex-start; gap: .6rem; font-family: var(--alt-font); font-size: 14px; color: var(--text-color); line-height: 1.5; padding: .55rem .85rem; background: var(--light-color); border-radius: 50px; }
.adv-list li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--secondary-color); }

.cta-highlight {
  background: var(--dark-color); border-radius: 24px; padding: 1.25rem 1.5rem; text-align: center;
  box-shadow: 0 8px 28px var(--shadow-color);
}
.cta-highlight strong { display: block; font-family: var(--main-font); font-weight: 700; font-size: clamp(14px,4vw,18px); color: #fff; line-height: 1.45; }
.cta-highlight strong em { font-style: normal; color: var(--accent-color); }

/* FULL-WIDTH BAND */
.benefits-band { background: var(--secondary-color); padding: 2.5rem 0; }
.band-inner { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.band-inner h2 { font-family: var(--main-font); font-weight: 700; font-size: clamp(20px,4.5vw,28px); color: #fff; margin-bottom: 1.5rem; }
.band-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 580px) { .band-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .band-grid { grid-template-columns: repeat(4,1fr); } }
.band-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 24px; padding: 1.1rem; text-align: center; }
.band-card-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; margin: 0 auto .65rem; }
.band-card-icon svg { width: 22px; height: 22px; color: #fff; }
.band-card p { font-family: var(--main-font); font-weight: 700; font-size: 13px; color: #fff; line-height: 1.4; }
.band-card small { font-family: var(--alt-font); font-size: 11px; color: rgba(255,255,255,.8); display: block; margin-top: 4px; }

/* TESTIMONIALS */
.testimonials-section { background: var(--dark-color); padding: 2.75rem 0; }
.section-title { text-align: center; margin-bottom: 1.75rem; }
.section-title h2 { font-family: var(--main-font); font-weight: 700; font-size: clamp(18px,4vw,26px); color: #fff; }
.section-title h2 em { font-style: normal; color: var(--accent-color); }
.section-title-bar { width: 40px; height: 3px; background: var(--gradient-primary); border-radius: 50px; margin: .55rem auto 0; }
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(2,1fr); } }
.testimonial-card { background: rgba(255,255,255,.08); border: 1px solid rgba(240,165,90,.2); border-radius: 24px; padding: 1.35rem; }
.t-header { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; }
.t-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--main-font); font-weight: 700; font-size: 14px; color: var(--dark-color); }
.t-name { font-family: var(--main-font); font-weight: 700; font-size: 13.5px; color: #fff; }
.t-loc { font-family: var(--alt-font); font-size: 11px; color: rgba(255,255,255,.55); }
.t-stars { display: flex; gap: 2px; margin-bottom: .5rem; }
.t-stars svg { width: 14px; height: 14px; fill: var(--accent-color); }
.t-text { font-family: var(--alt-font); font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.65; }

/* FOOTER */
.site-footer { background: var(--dark-color); border-top: 2px solid var(--primary-color); }
.footer-inner { max-width: 1000px; margin: 0 auto; padding: 1.15rem 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
@media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.footer-logo-icon { width: 26px; height: 26px; }
.footer-logo-text { font-family: var(--main-font); font-weight: 700; font-size: 16px; color: #fff; letter-spacing: .04em; }
.footer-logo-text em { font-style: normal; color: var(--accent-color); }
.footer-nav { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
@media (min-width: 768px) { .footer-nav { flex-direction: row; gap: 1.5rem; } }
.footer-nav a { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.footer-nav a:hover { color: var(--accent-color); }
.footer-copyright { border-top: 1px solid rgba(255,255,255,.07); padding: .6rem 1.5rem; text-align: center; font-size: 11px; color: rgba(255,255,255,.3); max-width: 1000px; margin: 0 auto; width: 100%; }