:root{
  --primary:#7b3f00;
  --primary-600:#5f3100;
  --accent:#a11f1f;
  --bg:#0f1115;
  --bg-soft:#151823;
  --card:rgba(255,255,255,0.04);
  --text:#eef1f7;
  --muted:#acb3c2;
  --border:rgba(255,255,255,0.12);
}

/* === Base === */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.15;margin:0 0 12px}
p{margin:0 0 12px}
.small{font-size:13px;color:var(--muted)}
.container{width:min(1200px,92%);margin-inline:auto}

/* === Buttons === */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff;
  font-weight:700;
  transition:.2s;
}
.btn.ghost{background:transparent;border-color:var(--border)}
.btn:hover{transform:translateY(-1px);filter:saturate(1.1)}

/* === Navbar === */
.nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,12,18,.7);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex;align-items:center;gap:16px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:32px}
#mainMenu a{padding:10px 14px;border-radius:12px}
#mainMenu a:hover{background:var(--card)}
.actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* === Burger === */
.burger{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  position:relative;
  cursor:pointer;
}
.burger span{
  position:absolute;
  left:9px;right:9px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:.25s;
}
.burger span:nth-child(1){top:11px}
.burger span:nth-child(2){top:18px}
.burger span:nth-child(3){top:25px}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* === Hero === */
.hero{
  padding:72px 0 36px;
  background:
    radial-gradient(1200px 600px at 20% -20%, rgba(161,31,31,.28), transparent),
    radial-gradient(1000px 500px at 110% 10%, rgba(123,63,0,.25), transparent);
}
.hero .grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:28px;align-items:center;
}
.lead{font-size:18px;color:var(--muted);margin-bottom:18px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 10px}
.badges .tag{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  margin-right:6px;
}

/* === KPIs === */
.kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:28px;
}
.kpis .item{
  padding:16px;
  border-radius:16px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  text-align:center;
}
.kpis .num{font-size:26px;font-weight:800}

/* === Sections & Cards === */
.section{padding:56px 0}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
.shadow{box-shadow:0 10px 30px rgba(0,0,0,.25)}
.media-cover{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:14px;
}
.feature{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px;border:1px solid var(--border);
  border-radius:16px;background:var(--bg-soft);
}
.feature img{
  width:40px;height:40px;padding:8px;
  border-radius:12px;
  background:linear-gradient(#fff,#f4f6fb);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

/* === Plant image === */
.plant-cover{
  background-image:url("/images/plant-exterior.jpg");
  background-size:cover;
  background-position:center;
  aspect-ratio:16/9;
  min-height:280px;
  width:100%;
}

/* === Grids === */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card.p{padding:18px}

/* === Misc === */
.flags img{max-width:100%;border-radius:14px;border:1px solid var(--border)}
.logos img{width:100%;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.cta-bar{padding:22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.form{display:grid;gap:12px}
.input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--text);
}
textarea.input{min-height:140px;resize:vertical}

/* === Footer === */
.footer{
  padding:36px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:14px;
}
.footer .cols{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:18px;
}

/* === WhatsApp Floating Button === */
.fab-whatsapp{
  position:fixed;
  bottom:22px;right:22px;
  width:60px;height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:999;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fab-whatsapp svg{width:32px;height:32px}
.fab-whatsapp:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3)}
@media (max-width:600px){
  .fab-whatsapp{width:54px;height:54px;bottom:18px;right:18px}
  .fab-whatsapp svg{width:28px;height:28px}
}

/* === Process cards === */
.process-card h3{margin:12px 0 6px}
.process-card .media-cover{aspect-ratio:16/9;border-radius:14px}

/* === Tablet adjustments === */
@media (max-width:992px){
  .hero .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  #about .row{grid-template-columns:1fr}
  #about .card[style*="grid-column: span 7"]{grid-column:auto !important}
  #about .plant-cover{grid-column:auto !important}
  .p{padding:16px}
}

/* === Mobile Menu === */
@media (max-width:960px){
  /* меню поверх всего, на весь экран */
  #mainMenu{
    position: fixed;
    inset: 0;                 /* вместо top/left/right/bottom по отдельности */
    height: 100dvh;           /* учитывать мобильные UI-панели */
    background: rgba(10,12,18,.98);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;  /* центр по вертикали */
    align-items: center;      /* центр по горизонтали */
    gap: 18px;
    padding: 20px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .2s ease;
    z-index: 2000;            /* БОЛЬШЕ, чем у шапки */
  }

  /* открытое состояние */
  #mainMenu.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* крупнее элементы меню */
  #mainMenu a{
    font-size: 20px;
    font-weight: 600;
    padding: 14px 18px;
    border-radius: 14px;
  }

  /* когда меню открыто — прячем кнопку "Contact sales" в шапке */
  body.menu-open .nav .actions .btn{
    visibility: hidden;
  }

  /* чтобы шапка точно не перекрывала меню */
  .nav .wrap{ z-index: 1000; }
}

@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width:960px){
    #mainMenu{ padding-top: calc(env(safe-area-inset-top) + 20px); }
  }
}

/* === Responsive grids for small screens === */
@media (max-width:900px){.grid4.process-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .grid4.process-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
}
/* === FIX: full-screen mobile menu === */
@media (max-width:960px){

  /* старые правила .nav.show #mainMenu переезжаем под капот */
  #mainMenu,
  .nav.show #mainMenu{
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100dvh;
    margin: 0;
    background: rgba(10,12,18,.98);
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 18px; padding: 24px;

    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .2s ease;

    z-index: 9999; /* выше шапки и hero */
  }

  /* открытое состояние */
  #mainMenu.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* крупные кликабельные пункты */
  #mainMenu a{
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 14px 18px;
    border-radius: 14px;
  }

  /* чтобы ничего из шапки не «просвечивало» поверх */
  .nav .wrap{ z-index: 1000; }
  .nav .actions .btn{ visibility: hidden; }     /* прячем кнопку, когда меню раскрыто */
  body.menu-open .nav .actions .btn{ visibility: hidden; }
}

/* === FINAL FIX: full-screen mobile menu (iOS-safe) === */
@media (max-width:960px){
  /* скрытое состояние по умолчанию */
  #mainMenu{
    position: fixed !important;
    top:0;left:0;right:0;bottom:0;
    width:100vw;height:100dvh;
    background: rgba(10,12,18,.98);
    backdrop-filter: blur(10px);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    gap:18px;padding:24px;
    transform: translateY(-100%);
    opacity:0; pointer-events:none;
    transition: transform .3s ease, opacity .2s ease;
    z-index: 9999; /* поверх всего */
  }

  /* ОТКРЫТО: сработает и для нового, и для старого триггера */
  #mainMenu.open,
  .nav.show #mainMenu{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display:flex !important;
  }

  /* пункты меню крупнее */
  #mainMenu a{
    color:#fff;font-size:20px;font-weight:600;
    padding:14px 18px;border-radius:14px;
  }

  /* шапка не перекрывает меню */
  .nav .wrap{ z-index: 1000; }
  body.menu-open { overflow:hidden; position:fixed; width:100%; }
}

/* --- iOS burger click fix & full-screen menu --- */
@media (max-width:960px){
  /* гарантируем, что бургер СВЕРХУ и кликабелен */
  .nav .wrap{ position:relative; z-index:1002; }
  .actions{ position:relative; z-index:1002; display:flex; gap:10px; }
  #burger{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    width:44px; height:44px; cursor:pointer;
    position:relative; z-index:1003;           /* выше кнопки Contact и меню */
    -webkit-tap-highlight-color: transparent;  /* iOS tap */
  }
  /* кнопка Contact точно не накрывает бургер */
  .actions .btn{ position:relative; z-index:1001; }

/* language switch in header */
.lang{display:flex;align-items:center;gap:6px;margin-right:10px;white-space:nowrap}
.lang a{opacity:.8}
.lang a:hover{opacity:1}
@media (max-width:960px){ .lang{display:none} }  /* прячем в шапке на мобиле */


  /* скрытое состояние меню — не перехватывает тапов */
  #mainMenu{
    position:fixed !important;
    top:0; left:0; right:0; bottom:0;
    width:100vw; height:100dvh;
    background:rgba(10,12,18,.98);
    backdrop-filter:blur(10px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; padding:24px;
    transform:translateY(-100%);
    opacity:0; pointer-events:none;            /* ключ к клику по бургеру */
    transition:transform .3s ease, opacity .2s ease;
    z-index:1001;
  }
  #mainMenu a{ color:#fff; font-size:20px; padding:14px 18px; border-radius:14px; }

  /* открытое меню (поддерживаем обе схемы: .open и .nav.show) */
  #mainMenu.open, .nav.show #mainMenu{
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
    display:flex !important;
  }

  /* запрет прокрутки подложки */
  body.menu-open{ overflow:hidden; position:fixed; inset:0; width:100%; }
}