/* * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      body {
        font-size: var(--base-font-size);
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
        color: var(--color-text);
        background-color: var(--color-bg);
        line-height: 1.5;
      }
  
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
  
      a {
        text-decoration: none;
        color: inherit;
      }
  
      ul {
        list-style: none;
      }
  
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--base-container-offset);
      }
  
      :root {
        --base-font-size: 16px;
        --base-container-offset: 15px;
        --color-text: #000000;
        --color-text-smooth: #7b7b7b;
        --color-text-light: #fcfcfc;
        --color-bg: #f9fff0;
        --color-bg-light: #fcfcfc;
        --color-green: #82c742;
        --color-green-hover: #45ae45;
        --color-accent: #71cb4c;
        --color-accent-light: #a5de58;
        --color-accent-smooth: #4a7d07;
        --color-accent-dark: #87a067;
        --theme-gradient: linear-gradient(180deg, #b6db85, #71cb4c);
        --base-gap: .66em;
        --border-radius-sm: calc(var(--border-radius) / 2);
        --border-radius: .5em;
        --border-radius-lg: calc(var(--border-radius) * 2);
        --box-shadow: 0 4px 8px #00000020;
      }
  
      .theme-btn {
        display: inline-block;
        padding: 0.75em 2em;
        background-color: var(--color-accent);
        color: var(--color-text-light);
        font-weight: 600;
        border-radius: var(--border-radius);
        border: none;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
        text-align: center;
      }
      .theme-btn:hover {
        background-color: var(--color-green-hover);
        transform: scale(1.02);
      }
      .theme-btn--outline {
        background: transparent;
        border: 2px solid var(--color-accent);
        color: var(--color-text);
      }
      .theme-btn--outline:hover {
        background: var(--color-accent);
        color: #fff;
      }
  
      .theme-gradient {
        background: var(--theme-gradient);
      } */
  


      /* ===== Общие компоненты ===== */
      .section-title {
        font-size: 2rem;
        margin-bottom: 0.5em;
        letter-spacing: -0.02em;
      }
      .section-sub {
        color: var(--color-text-smooth);
        max-width: 700px;
        margin-bottom: 1.5em;
      }
  
  
      /* ===== Герой (первый экран) ===== */
      .hero {
        position: relative;
        padding: 6rem 0 8rem;
        background: var(--color-bg-light);
      }
      .hero-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        z-index: 2;
        color: var(--color-bg-light);
      }
      .hero h1 {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
      }
      .hero h1 span {
        color: var(--color-accent-light);
      }
      .hero p {
        font-size: 1.2rem;
        color: var(--color-text-light);
        max-width: 500px;
        margin: 1rem 0 1.5rem;
      }
      .hero-btns {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }

      .hero-img-overlay {
        position: absolute;
        inset: 0;
        background-color: #00000070;
        z-index: 1;
      }

      .hero-image {
        position: absolute;
        inset: 0;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-light);
        font-weight: 600;
        font-size: 1.2rem;
        background-size: 60px;
        z-index: 0;
      }
      .hero-image p {
        margin-top: 4.5rem;
        color: #fff;
        font-weight: 500;
        text-shadow: 0 1px 4px rgba(0,0,0,0.2);
      }

      .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
      }
  
      /* ===== Блок преимуществ ===== */
      .advantages {
        padding: 4rem 0;
      }
      .advantages-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 2rem;
      }
      .adv-card {
        background: var(--color-bg-light);
        padding: 2rem 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        border-left: 4px solid var(--color-accent);
      }
      .adv-card h3 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
      }
      .adv-card .number {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-accent-smooth);
      }
  
      /* ===== Лаборатория / Теплица ===== */
      .science {
        padding: 4rem 0;
        background: var(--color-bg-light);
      }
      .science-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
      }
      .science-item {
        background: var(--color-bg);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--box-shadow);
      }
      .science-item h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .science-item h3::before {
        content: "🧪";
        font-size: 1.8rem;
      }
      .science-item:last-child h3::before {
        content: "🌱";
      }
  
      /* ===== Каталог-витрина ===== */
      .catalog {
        padding: 4rem 0;
      }
      .catalog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin: 2rem 0;
      }
      .cat-card {
        background: var(--color-bg-light);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        transition: 0.2s;
      }
      .cat-card:hover {
        transform: translateY(-4px);
      }
      .cat-card h4 {
        font-size: 1.2rem;
        color: var(--color-accent-smooth);
        margin-bottom: 0.3rem;
      }
      .cat-card p {
        color: var(--color-text-smooth);
        font-size: 0.95rem;
      }
  
      /* ===== B2B ===== */
      .b2b {
        padding: 4rem 0;
        background: var(--theme-gradient);
        color: var(--color-text-light);
        text-align: center;
      }
      .b2b .container {
        max-width: 700px;
      }
      .b2b h2 {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
      }
      .b2b p {
        margin-bottom: 1.5rem;
        opacity: 0.9;
      }
      .b2b .theme-btn {
        background: #fff;
        color: var(--color-accent-smooth) !important;
      }
      .b2b .theme-btn:hover {
        scale: 1.02;
      }
  
      /* ===== Новости / Блог ===== */
      .blog {
        padding: 4rem 0;
      }
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-top: 2rem;
      }
      .blog-card {
        background: var(--color-bg-light);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
      }

      .blog-card p{
        color: var(--color-text);
      }

      .blog-card .date {
        color: var(--color-text-smooth);
        font-size: 0.85rem;
      }
  
      /* ===== Контакты ===== */
      .contacts {
        padding: 4rem 0;
      }
      .contacts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
      }
      .contacts-info p {
        margin: 0.5rem 0;
      }
      .contacts-info strong {
        color: var(--color-accent-smooth);
      }
      .map-placeholder {
        background: #e0e7d9;
        border-radius: var(--border-radius);
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-smooth);
        font-weight: 500;
      }
  
      /* ===== Футер ===== */
      .footer {
        background: #1e2a1a;
        color: #ccc;
        padding: 2rem 0;
        text-align: center;
        font-size: 0.9rem;
      }
      .footer a {
        color: var(--color-accent-light);
      }
  
      /* ===== Адаптивность ===== */
      @media (max-width: 992px) {
        .hero-grid {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .hero p {
          margin-left: auto;
          margin-right: auto;
        }
        .hero-btns {
          justify-content: center;
        }
        .science-grid,
        .contacts-grid {
          grid-template-columns: 1fr;
        }
      }
  
      @media (max-width: 768px) {
        .header-inner {
          flex-direction: column;
          align-items: stretch;
          text-align: center;
        }
        .nav {
          justify-content: center;
          gap: 1rem;
        }
        .advantages-grid,
        .catalog-grid {
          grid-template-columns: 1fr 1fr;
        }
        .blog-grid {
          grid-template-columns: 1fr;
        }
        .hero h1 {
          font-size: 2.2rem;
        }
      }
  
      @media (max-width: 480px) {
        .advantages-grid,
        .catalog-grid {
          grid-template-columns: 1fr;
        }
        .hero h1 {
          font-size: 1.8rem;
        }
        .section-title {
          font-size: 1.6rem;
        }
      }

      @media (max-width: 390px) {
        .b2b .theme-btn {
          font-size: .8em;
          max-width: 100%;
          text-wrap-mode: wrap;
        }
      }