:root{
  --bg:#07140c; --bg-2:#0c2115; --muted:#b7d0c0; --accent:#22c55e; --accent-2:#16a34a;
  --text:#e9f6ee; --border:#12351f; --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px;
  --header-h:120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--text);text-decoration:none}
html{scroll-behavior:smooth; scroll-padding-top: var(--header-h);} /* якоря не уезжают под шапку */

.container{width:100%;max-width:1280px;margin:0 auto;padding:0 32px}

/* ===== Header ===== */
header{
  /* было: height: var(--header-h); */
  min-height: var(--header-h);
  height: auto;                 /* <<< шапка растягивается под контент */
  display:flex; align-items: center;
  background:#091c10; border-bottom:2px solid var(--border);
  position:sticky; top:0; z-index:1000;
}
.header-bar{display:flex;align-items:center;gap:18px;width:100%}
.logo{height:100px;width:auto;flex:0 0 auto}

.brand-wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-right:auto;
}
.brand-name{ font-size:34px; font-weight:700; letter-spacing:.3px }
.brand-sub{ font-size:15px; color:var(--accent); font-weight:700; margin-top:4px }


.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-weight:600;opacity:.95;display:inline-flex;align-items:center;gap:6px}
.nav-links a:hover{color:var(--accent)}
.home-logo{display:inline-block}
.home-link svg{display:block}

/* ===== Sections ===== */
section{padding:48px 0}
h1,h2,h3{margin:0 0 10px}
h2{font-size:26px}
p.lead{color:var(--muted);font-size:18px;margin:0 0 18px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#05250f;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--accent-2)}

.card{background:linear-gradient(180deg,rgba(15,35,24,.9),rgba(12,27,19,.95));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cards .card h3{margin-bottom:8px}
.list{margin:0;padding-left:18px}

/* Contact */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;background:#0c1e15;border:1px solid var(--border);color:var(--text)}
textarea{min-height:130px;resize:vertical}

/* Footer */
footer{padding:30px 0 40px;border-top:1px solid var(--border);color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.foot .logo{height:40px}

/* ===== Hero + Philosophy (единый фон) ===== */
.hero{
  position:relative;
  background:url("/images/hero-bg.webp") no-repeat center/cover;
  min-height: 520px;
  padding: calc(var(--header-h) + 24px) 0 80px;
  display:flex; align-items:flex-start; justify-content:center; text-align:center;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(13,32,22,.6)}
.hero-overlay{position:relative;z-index:1;width:100%}
.hero-card{max-width:1000px;margin:0 auto}
.hero-subtitle{ text-transform:uppercase;color:#0eb016;font-weight:800;letter-spacing:.12em;font-size:32px;margin-bottom:16px }
.hero-text{ font-size:22px; line-height:1.6; max-width:1000px; margin:12px auto 24px; white-space:normal }
.hero-btn{ background:#0eb016; color:#011202; padding:8px 16px; font-size:14px; border-radius:6px }

.philosophy-card{ text-align:center; padding:30px; background:rgba(255,255,255,.1); border-radius:var(--radius); margin-top:48px }
.philosophy-text{ font-size:22px; text-align:justify; max-width:1200px; margin:0 auto; color:#fafcfa; line-height:1.8 }
.philosophy-quote{ font-size:22px; text-align:center; margin:24px auto 0; color:#0eb016; font-weight:600 }

/* ===== Фон внутри карточек (индивидуальные) ===== */
.card-bg{ position:relative; background:var(--bg-2); overflow:hidden }
.card-bg::before{ content:""; position:absolute; inset:0; background:var(--bg-img) no-repeat center/cover; z-index:0; opacity:.35 }
.card-bg::after{ content:""; position:absolute; inset:0; background:rgba(13,32,22,.55); z-index:1 }
.card-bg > *{ position:relative; z-index:2 }

/* ===== Общие секции с фоном ===== */
.about-section{ position:relative; background:url("/images/about-bg.webp") no-repeat center/cover; padding:80px 0 }
.about-section::before{ content:""; position:absolute; inset:0; background:rgba(13,32,22,.6) }
.about-section .container{ position:relative; z-index:1 }

.products-section{ position:relative; background:url("/images/products-bg.webp") no-repeat center/cover; padding:80px 0 }
.products-section::before{ content:""; position:absolute; inset:0; background:rgba(13,32,22,.6) }
.products-section .container{ position:relative; z-index:1 }

.card-link{ display:block; color:inherit }
.card-link .card{ transition: transform .18s ease, box-shadow .18s ease }
.card-link:hover .card{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.22) }

/* ===== H2 с маленькими иконками (флаги) ===== */
.h2-icon{ display:flex; align-items:center; gap:10px; }
.h2-icon::before{
  content:"";
  inline-size:24px; block-size:16px;
  background: var(--icon) no-repeat center/cover;
  flex:0 0 24px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Доп. оформление карточки группы внутри About */
.group-card{ margin-top:40px; text-align:center; padding:28px 24px; }

/* ===== Responsive ===== */
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:920px){ .grid-3,.contact{grid-template-columns:1fr} }

@media (max-width:680px){
  :root{ --header-h: 72px; }
  header{ height: var(--header-h); }
  .container{ padding: 0 14px; }

  .logo{ height:48px }
  .brand-name{ font-size:20px }
  .brand-sub{ display:none }            /* на телефоне убираем подпись (оставим имя) */
  .nav-links{ gap:14px }
  .nav-links a{ font-size:14px }
  .home-link span{ display:none }       /* только иконка домика для экономии места */

  .hero{ min-height:380px; padding: calc(var(--header-h) + 16px) 0 48px }
  .hero-subtitle{ font-size:20px; letter-spacing:.08em }
  .hero-text, .philosophy-text, .philosophy-quote{ font-size:16px; padding:0 6px }
  .hero-btn{ font-size:13px; padding:6px 12px }
}
.card-wide {
  grid-column: 1 / -1; /* блок растягивается на всю ширину */
}
/* Если меню в одну строку — пусть переносится аккуратно */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Чуть больше кликабельность на тач-экранах */
.nav-links a {
  padding: 8px 10px;
  white-space: nowrap;
}

/* На очень узких экранах делаем столбиком — всё видно и читаемо */
@media (max-width: 640px) {
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
/* --- Header: фикс уезжающего меню на мобильных --- */

/* 1) Шапка растягивается под фактическую высоту (если меню переносится) */
header{
  height: auto !important;                 /* ключевой фикс */
  min-height: var(--header-h, 72px);       /* базовая высота, если переменная не задана */
}

/* 2) Контейнер шапки разрешает перенос строк */
.header-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;                          /* меню может переноситься */
  /* padding оставляем ваш; можно чуть увеличить низ на мобиле (см. медиа-правило) */
}

/* 3) Навигация: гибкая, переносимая, прижатая вправо на широких экранах */
.nav-links{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;                          /* при нехватке места переносим */
  margin-left: auto;                        /* уводим вправо на десктопе */
}

.nav-links a{
  white-space: nowrap;
  padding: 8px 10px;                        /* больше тач-таргет */
}

/* 4) Мобильная адаптация */
@media (max-width: 640px){
  /* чуть больше места по высоте у хедера */
  header{ min-height: 96px; }

  .header-bar{
    align-items: flex-start;
    row-gap: 8px;
    padding-bottom: 12px;                   /* чтобы не прилипало к низу */
  }

  .nav-links{
    width: 100%;
    margin-left: 0;                         /* меню уходит под бренд */
    flex-direction: column;                 /* вертикальный список */
    align-items: flex-start;
    gap: 8px;
  }

  .nav-links a:last-child{ order: 99; }     /* 🎲 всегда последняя */
}


.logo-brand{ display:flex; align-items:center; gap:12px; }
@media (max-width:640px){
  .header-bar{ flex-direction:column; align-items:flex-start; row-gap:6px; }
  .logo-brand{ flex-direction:row; align-items:center; width:100%; }
  .brand-wrap{ margin-left:8px; }
  .nav-links{ margin-top:6px; width:100%; flex-direction:row; flex-wrap:wrap; gap:12px; justify-content:flex-start; }
}
.subnote {
  font-size: .95em;
  color: #b4d4b2;
  margin: -5px 0 15px;
  font-style: italic;
  background: linear-gradient(90deg,#193d2e,#13402e);
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
}
:root {
  /* Цвета можно править в одном месте */
  --brand-color: #e9f6ee;     /* цвет надписи "Green Croc" */
  --strapline-color: #19a974; /* цвет строки WHOLESALE… */
  --brand-shadow: rgba(0,0,0,.35);
  --strap-shadow: rgba(0,0,0,.25);

  /* Шрифты — можно заменить на любые подключённые */
  --brand-font: "Marcellus", serif;
  --strap-font: "Merienda", cursive;
}

/* Заголовок Green Croc */
.brand-name{
  font-family: "Merienda";
  color: #70ed3a;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(26px, 3.2vw, 40px);
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}


/* Строка WHOLESALE • … — курсивный «витиеватый» стиль */
.brand-sub{
  font-family: var(--strap-font);
  color: #d0e0e3;
  font-style: italic;
  font-weight: 700;          /* можно 400–700, см. как нравится */
  letter-spacing: .05em;     /* лёгкое разрежение для читабельности */
  margin-top: 6px;
  text-shadow: 0 1px 4px var(--strap-shadow);
  text-transform: none;      /* снимаем UPPERCASE, если было */
}
.logo {
  height: 80px; /* или твоя высота */
  margin-top: 6px; /* опускает немного вниз */
  vertical-align: middle;
}