/* ===== 0) Анти-скачки/горизонтальный скролл ===== */
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
@media (max-width: 860px){
  body.nav-open { position: fixed; width: 100%; }
}
.wrap { overflow-x: clip; }
.hero { overflow: hidden; }
.blob { pointer-events: none; }

/* Сжатие min-content у потенциально «распирающих» узлов */
.card, .kpi, .project, .info-card, .kpi *, .card *, .project *, .info-card * { min-width: 0; }
.logo, nav, .lang-switch { min-width: 0; }

/* Безопасные гриды (minmax(0,1fr)) */
.kpis{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.projects-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.info-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.list{ grid-template-columns: repeat(2, minmax(0,1fr)); }

/* Медиа-точки с безопасными треками */
@media (max-width: 1060px){
  .info-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metrics{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .card-grid{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px){
  .info-grid, .metrics{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px){
  .list{ grid-template-columns: minmax(0,1fr); }
}

/* Медиа: никогда не шире контейнера */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* ===== 1) Токены ===== */
:root{
  --brand:#16a34a; --brand-700:#15803d; --brand-50:#ecfdf5;
  --ink:#0b0c0f; --muted:#6b7280; --line:#e5e7eb; --card:#ffffff;
  --accent:#0fb66d; --accent-2:#0aa867;
  --ink-strong:#0f172a;
  --glass:hsla(0,0%,100%,.56);
  --glass-border:rgba(255,255,255,.35);
  --bg-grad-1:#f6fff9; --bg-grad-2:#e9fbf2;
  --shadow-1:0 10px 28px rgba(16,24,40,.10);
  --shadow-2:0 14px 42px rgba(16,24,40,.14);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important }
}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,#f7fff9 100%);
}
.wrap{ max-width:1200px; margin:0 auto; padding:32px 20px }

/* ===== 2) Header / Nav ===== */
header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.logo{ font-weight:900; letter-spacing:.3px; display:flex; align-items:center; gap:10px }
.logo-badge{ width:12px; height:12px; border-radius:99px; background:var(--brand) }
nav a{ margin:0 10px; text-decoration:none; color:var(--ink); opacity:.85; position:relative }
nav a:hover{ opacity:1 }
nav a.active{ color:var(--brand) }

/* Burger — только мобилка */
.burger{
  display:none; width:38px; height:38px; border-radius:12px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; position:relative; z-index:90; cursor:pointer;
}
.burger span,.burger::before,.burger::after{
  content:""; position:absolute; width:18px; height:2px; background:var(--ink);
  transition:transform .18s ease, opacity .18s ease;
}
.burger::before{ transform:translateY(-6px) }
.burger::after{  transform:translateY( 6px) }
body.nav-open .burger span{ opacity:0 }
body.nav-open .burger::before{ transform:translateY(0) rotate(45deg) }
body.nav-open .burger::after{  transform:translateY(0) rotate(-45deg) }
@media (max-width:860px){ .burger{ display:flex } }
@media (min-width:861px){ .burger{ display:none !important } }

/* Меню: базово скрыто */
.nav-links{ display:none; }

/* Мобильный поповер-меню */
@media (max-width:860px){
  header{ position:sticky; top:0; z-index:85; }
  nav .nav-links{
    position:absolute; right:16px; top:56px; min-width:220px;
    display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:14px;
    background:#fff; border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,0,.12);
    z-index:95; opacity:0; transform:translateY(6px) scale(.98);
    transition:opacity .18s ease, transform .18s ease;
  }
  body.nav-open nav .nav-links{ display:flex !important; opacity:1; transform:translateY(0) scale(1); }
  body.nav-open::before{
    content:""; position:fixed; inset:0; background:rgba(2,6,23,.28); backdrop-filter:blur(2px); z-index:80;
  }
  nav .nav-links a{
    display:block; padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:700; color:var(--ink); white-space:nowrap;
  }
  nav .nav-links a:hover{ background:#f6fff9; color:var(--brand); }
}

/* Десктоп: меню всегда видно */
@media (min-width:861px){
  nav .nav-links{
    display:flex !important; position:static; gap:10px;
    background:transparent; border:0; padding:0; box-shadow:none; flex-direction:row;
    opacity:1; transform:none;
  }
}

/* ===== 3) Hero / CTA / KPIs ===== */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:36px 0 20px;
}
.hero h1{ font-size:clamp(30px,6vw,50px); line-height:1.06; margin:0 0 12px }
.hero p{ font-size:clamp(16px,2.5vw,18px); opacity:.95; margin:0 0 18px }
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.btn{
  padding:12px 18px; border-radius:14px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer;
  font-weight:700; text-decoration:none; display:inline-block; transition:transform .18s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(22,163,74,.25); background:var(--brand-700); border-color:var(--brand-700) }
.btn.secondary{ background:transparent; color:var(--brand); }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; background:var(--brand-50); color:var(--brand);
  font-weight:700; font-size:12px; border:1px solid #d1fae5;
}
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px }
.kpi{ border:1px solid var(--line); border-radius:16px; padding:14px; background:var(--card) }
.kpi strong{ font-size:22px }

/* ===== 4) Cards / Lists ===== */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px }
.card{
  border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08) }
.list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:8px 0 0; padding:0; list-style:none }
.list li{ padding:8px 10px; border:1px dashed #cce3d6; border-radius:10px; background:#f6fff9 }
.section-title{ margin:26px 0 6px }

/* ===== 5) Footer / ribbons ===== */
footer{ border-top:1px solid var(--line); padding:18px 0; margin-top:40px; opacity:.8; font-size:14px }
.ribbon{
  background:linear-gradient(135deg, var(--brand) 0%, #22c55e 50%, var(--accent) 100%);
  color:#fff; border-radius:16px; padding:18px; margin:18px 0; box-shadow:0 12px 28px rgba(34,197,94,.25);
}
.link-underline{ position:relative }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:currentColor; transition:width .25s ease }
.link-underline:hover::after{ width:100% }

/* ===== 6) About company (fancy) ===== */
.about-company.fancy{
  position:relative; padding:48px 0 52px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(15,182,109,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(15,182,109,.10), transparent 60%),
    linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2));
  border-radius:24px;
}
.about-company .about-wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.about-company .section-title{ display:inline-block; position:relative; font-weight:900; letter-spacing:.2px; color:var(--ink-strong); }
.about-company .title-accent{
  display:block; height:6px; border-radius:999px; margin-top:10px; width:120px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 6px 18px rgba(15,182,109,.35);
}
.about-company .lead{ margin:14px 0 24px; font-size:1.05rem; line-height:1.7; opacity:.95; max-width:900px; }

.metrics{ display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:16px; margin:8px 0 26px; }
.metric{
  background:rgba(255,255,255,.65); border:1px solid var(--glass-border); backdrop-filter:saturate(160%) blur(8px);
  border-radius:18px; padding:16px 18px; box-shadow:var(--shadow-1); transition:transform .25s ease, box-shadow .25s ease;
}
.metric:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.metric .num{ font-weight:900; font-size:1.8rem; line-height:1; color:var(--ink-strong); }
.metric .cap{ font-size:.9rem; opacity:.72; }

.info-grid{ display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:18px; }
@media (max-width:1060px){ .info-grid{grid-template-columns:repeat(2,1fr);} .metrics{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .info-grid{grid-template-columns:1fr;} .metrics{grid-template-columns:1fr;} }

.info-card{
  position:relative; background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:saturate(180%) blur(10px); border-radius:20px; padding:18px 18px 16px;
  box-shadow:var(--shadow-1); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:rgba(15,182,109,.45); }
.info-card h3{ margin:6px 0 8px; font-size:1.02rem; font-weight:800; color:var(--ink-strong); }
.info-card p{ margin:0 0 8px; line-height:1.6; }
.info-card .muted{ opacity:.85; }
.info-card .icn{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg, rgba(15,182,109,.22), rgba(15,182,109,.06));
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(15,182,109,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  margin-bottom:8px;
}
.info-card .icn svg{ width:22px; height:22px; fill:var(--accent); }

.pretty{ margin:8px 0 0; padding:0; list-style:none; }
.pretty li{ position:relative; padding-left:22px; margin:8px 0; }
.pretty li:before{
  content:""; position:absolute; left:0; top:10px; width:10px; height:10px; border-radius:50%;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 3px rgba(15,182,109,.12);
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  font-size:.85rem; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(15,182,109,.15), rgba(15,182,109,.08));
  border:1px solid rgba(15,182,109,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* ===== 7) Projects / Tables ===== */
.projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.project{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden }
.project .thumb{ height:160px; background:linear-gradient(45deg, var(--brand-50), #e0f2fe) }
.project .body{ padding:14px }
.project .tag{ font-size:12px; color:#065f46; background:#d1fae5; border-radius:999px; padding:4px 8px; display:inline-block }

.table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--line) }
.table th,.table td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left }
.table th{ background:#f3f4f6; font-weight:800 }

/* ===== 8) Responsive misc ===== */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr }
  .card-grid{ grid-template-columns:1fr }
  .list{ grid-template-columns:1fr }
  .team-grid{ grid-template-columns:repeat(2,1fr) }
  .projects-grid{ grid-template-columns:1fr }
}
@media (max-width:560px){
  nav a{ margin:0 6px }
  .team-grid{ grid-template-columns:1fr }
}

/* Reveal */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease }
.reveal.show{ opacity:1; transform:translateY(0) }

/* Decorative animated blob */
.hero{ position:relative; overflow:hidden }
.blob{
  position:absolute; right:-120px; top:-120px; width:380px; height:380px;
  background:radial-gradient(circle at 30% 30%, rgba(34,197,94,.25), rgba(14,165,233,.18) 40%, transparent 60%);
  filter: blur(40px); transform: translate3d(0,0,0);
  animation: blobFloat 12s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes blobFloat{ from{ transform: translate(10px, -10px) scale(1.0) } to{ transform: translate(-30px, 20px) scale(1.08) } }
@media (max-width:860px){ .blob{ right:-160px; top:-160px; width:460px; height:460px } }

/* Mobile sticky CTA bar */
.mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--line); padding:10px 12px; gap:10px; justify-content:center;
}
.mobile-cta .btn{ flex:1; text-align:center }
@media (min-width:861px){ .mobile-cta{ display:none !important } }
@media (max-width:860px){ .mobile-cta{ display:flex } }

/* Team card image ratio */
.team-card img{ height:240px; object-fit:cover }
@media (max-width:560px){ .team-card img{ height:220px } }

/* Counters */
.counter{ font-variant-numeric: tabular-nums; }

/* Learn more pill */
.learn-cta{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background:linear-gradient(90deg, var(--brand) 0%, #22c55e 50%, var(--brand-700) 100%);
  color:#fff; font-weight:800; letter-spacing:.2px; text-decoration:none;
  box-shadow:0 10px 28px rgba(22,163,74,.35); transform:translateZ(0);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; will-change: transform; overflow:hidden;
}
.learn-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(22,163,74,.45); filter:saturate(1.08) }
.learn-cta::after{ content:"→"; transition:transform .2s ease }
.learn-cta:hover::after{ transform:translateX(3px) }
.learn-cta .shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%);
}
.learn-cta:hover .shine{ animation: shineSweep 900ms ease }
@keyframes shineSweep{ from{ transform:translateX(-120%) } to{ transform:translateX(120%) } }

/* ===== 9) Языки (видимость контента) ===== */
.ru{display:inline} .uz,.en{display:none}
body[data-lang="uz"] .ru{display:none}
body[data-lang="uz"] .uz{display:inline}
body[data-lang="uz"] .en{display:none}
body[data-lang="en"] .ru{display:none}
body[data-lang="en"] .uz{display:none}
body[data-lang="en"] .en{display:inline}

/* ===== 10) Иконки-плейсхолдеры в проектах ===== */
.thumb-icon{
  height:160px; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line); position:relative; overflow:hidden;
  background:linear-gradient(180deg,#f7fff9, #effdf5);
}
.thumb-icon svg{
  width:64px; height:64px; stroke: var(--brand); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; opacity:.95;
}
.thumb-icon::after{
  content:""; position:absolute; inset:auto -20% -40% -20%; height:120%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(22,163,74,.10), transparent 70%);
}
.thumb-icon[data-theme="packaging"]{ background:linear-gradient(180deg,#f6fff9,#ecfdf5); }
.thumb-icon[data-theme="beverage"]{ background:linear-gradient(180deg,#f0fbff,#e6f7fe); }
.thumb-icon[data-theme="industrial"]{ background:linear-gradient(180deg,#f8fafc,#eef2f7); }
.thumb-icon[data-theme="dairy"]{ background:linear-gradient(180deg,#f5fbff,#eef7ff); }
.thumb-icon[data-theme="confectionery"]{ background:linear-gradient(180deg,#fff7fa,#fff0f6); }
.thumb-icon[data-theme="frozen"]{ background:linear-gradient(180deg,#f3fbff,#eaf6ff); }
.thumb-icon[data-theme="pet"]{ background:linear-gradient(180deg,#f8fff6,#f1ffe9); }
.thumb-icon[data-theme="home"]{ background:linear-gradient(180deg,#f7fff9,#effef4); }
.thumb-icon[data-theme="personal"]{ background:linear-gradient(180deg,#fef9ff,#f7f0ff); }
.thumb-icon[data-theme="agriculture"]{ background:linear-gradient(180deg,#f3fff5,#e8ffe9); }
.thumb-icon[data-theme="chemicals"]{ background:linear-gradient(180deg,#f7fbff,#edf3ff); }
.thumb-icon[data-theme="water"]{ background:linear-gradient(180deg,#f0fbff,#e6f7ff); }
.thumb-icon[data-theme="energy"]{ background:linear-gradient(180deg,#fffaf2,#fff3df); }
.thumb-icon[data-theme="printing"]{ background:linear-gradient(180deg,#f7f7ff,#efefff); }
.thumb-icon[data-theme="coex"]{ background:linear-gradient(180deg,#f6fffb,#ecfff6); }
.thumb-icon[data-theme="sauces"]{ background:linear-gradient(180deg,#fff8f0,#ffefe0); }
.thumb-icon[data-theme="retort"]{ background:linear-gradient(180deg,#f7fbff,#edf4ff); }
.thumb-icon[data-theme="bakery"]{ background:linear-gradient(180deg,#fffaf1,#fff2dc); }
.thumb-icon[data-theme="rnd"]{ background:linear-gradient(180deg,#f6faff,#edf3ff); }
.thumb-icon[data-theme="logistics"]{ background:linear-gradient(180deg,#f8fffa,#eefff3); }
.thumb-icon[data-theme="equipment"]{ background:linear-gradient(180deg,#f6fbff,#edf5ff); }
.thumb-icon[data-theme="textile"]{ background:linear-gradient(180deg,#fff8fb,#ffeef6); }
@media (max-width:420px){ .thumb-icon svg{ width:72px; height:72px; } }

/* ===== 11) Красивые пилюли для EN / UZ / RU ===== */
.lang-switch{
  display:flex; align-items:center; gap:8px; margin-left:12px;
  padding:4px; border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(6px);
  box-shadow:0 6px 18px rgba(16,24,40,.06) inset, 0 4px 16px rgba(16,24,40,.06);
}
.lang-switch button{
  appearance:none; border:0; cursor:pointer;
  height:34px; min-width:46px; padding:0 14px;
  border-radius:999px; font-weight:800; letter-spacing:.2px;
  background:transparent; color:var(--ink); opacity:.9;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
}
.lang-switch button:hover{ opacity:1; transform:translateY(-1px); }
.lang-switch button:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(34,197,94,.25); }
.lang-switch button.active{
  color:#fff; opacity:1;
  background:linear-gradient(90deg, var(--brand) 0%, #22c55e 50%, var(--brand-700) 100%);
  box-shadow:0 10px 22px rgba(22,163,74,.28);
}
.lang-switch button:active{ transform:translateY(0); box-shadow:none; }