:root {
  --color-primary: #2c6e49;
  --color-secondary: #f4f1de;
  --color-bg: #0f132a;
  --color-bg-soft: #141935;
  --color-accent: #8f72ff;
  --color-panel: rgba(255, 255, 255, 0.1);
  --font-primary: 'Manrope', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.3rem;
  --transition-fast: 0.3s ease;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden}
body {
  font-family: var(--font-primary);
  background: radial-gradient(circle at 20% 0%, #2a2f5f 0%, #12162d 45%, #090b18 100%);
  color: #f7f8ff;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.main-centered-shell { width: min(92%, 76rem); margin: 0 auto; }

.site-header-shell {
  width: min(94%, 82rem);
  margin: 1rem auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 0.06rem solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.7rem);
}
.brand-mark-text { font-family: var(--font-heading); font-weight: 700; }
.desktop-nav-row { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.desktop-nav-row a, .mobile-menu-panel a { padding: 0.3rem 0.45rem; border-radius: 0.5rem; }
.desktop-nav-row a:hover, .mobile-menu-panel a:hover { background: rgba(255, 255, 255, 0.12); }
.menu-trigger-button {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999rem;
  border: 0.06rem solid rgba(255, 255, 255, 0.36);
  background: rgba(143, 114, 255, 0.22);
  color: #fff;
  cursor: pointer;
}
.mobile-menu-panel {
  width: min(94%, 82rem);
  margin: 0 auto 1rem;
  background: rgba(16, 20, 42, 0.92);
  border: 0.06rem solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 0.8rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition-fast), opacity var(--transition-fast);
}
.mobile-menu-panel.menu-opened-state { max-height: 18rem; opacity: 1; }
.mobile-menu-panel a { text-align: center; background: rgba(255, 255, 255, 0.06); }

.hero-banner-zone {
  width: 100vw;
  margin: 1.2rem calc(50% - 50vw);
  min-height: 22rem;
  position: relative;
  overflow: hidden;
}
.hero-banner-zone > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-content-layer {
  position: relative;
  z-index: 1;
  min-height: 22rem;
  width: min(92%, 72rem);
  margin: 0 auto;
  padding: var(--space-xl) 0;
  display: grid;
  align-content: center;
  gap: 0.7rem;
}
.hero-content-layer h1 {
  margin: 0;
  width: min(100%, 40rem);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.7vw, 2.6rem);
}
.hero-content-layer p, .hero-content-layer .solid-cta-link, .hero-content-layer .eyebrow-note {
  width: min(100%, 38rem);
}
.hero-content-layer p, .hero-content-layer h1, .hero-content-layer .solid-cta-link, .hero-content-layer .eyebrow-note {
  padding: 0.35rem 0.7rem;
  background: rgba(9, 11, 26, 0.65);
  border-radius: 0.65rem;
}

.section-card-center, .switch-panel-frame, .timeline-grid-center article, .image-grid-showcase article,
.product-grid-listing article, .contact-layout-grid article {
  background: var(--color-panel);
  border: 0.06rem solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 1rem;
  backdrop-filter: blur(0.6rem);
}
.section-card-center, .switch-panel-frame { text-align: center; margin: 1rem auto; max-width: 60rem; }

.image-grid-showcase, .timeline-grid-center, .product-grid-listing, .contact-layout-grid {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}
.image-grid-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-grid-showcase img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.8rem; margin-bottom: 0.5rem; }
.timeline-grid-center { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid-listing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-layout-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }

.contact-form-panel { display: grid; gap: 0.45rem; }
.contact-form-panel input, .contact-form-panel textarea {
  width: 100%;
  padding: 0.55rem;
  border-radius: 0.6rem;
  border: 0.06rem solid rgba(255, 255, 255, 0.25);
  background: rgba(7, 10, 24, 0.7);
  color: #fff;
}
.checkbox-line { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.9rem; }
iframe { width: 100%; min-height: 14rem; border: 0; border-radius: 0.7rem; }

.price-tag-line { font-weight: 700; color: #dacfff; }
.solid-cta-link, .ghost-cta-link, .state-switch-toggle, .popup-accept-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.95rem;
  border-radius: 999rem;
  border: 0.06rem solid transparent;
  font: inherit;
  cursor: pointer;
}
.solid-cta-link { background: linear-gradient(120deg, #8f72ff, #468fcc); color: #fff; }
.ghost-cta-link { border-color: rgba(255,255,255,0.35); }
.hour-slider-control { width: min(100%, 32rem); }

.site-footer-wrap { margin-top: 1.5rem; padding: 1rem 0 2rem; }
.footer-mini-grid {
  width: min(94%, 82rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: center;
  font-size: 0.9rem;
}
.footer-mini-grid nav { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.policy-popup-window {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(22rem, 90%);
  border-radius: 0.9rem;
  border: 0.06rem solid rgba(255,255,255,0.22);
  background: rgba(8, 11, 24, 0.96);
  padding: 0.9rem;
  display: none;
  z-index: 50;
}
.policy-popup-window.visible-popup { display: block; }
.mode-be-theme { background: radial-gradient(circle at 20% 0%, #3b345c 0%, #1a1730 45%, #0f0c1a 100%); }

@media (max-width: 1023px) {
  .desktop-nav-row { display: none; }
  .menu-trigger-button { display: inline-flex; }
  .mobile-menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .main-centered-shell { width: min(94%, 76rem); }
  .image-grid-showcase, .timeline-grid-center, .product-grid-listing, .contact-layout-grid, .footer-mini-grid {
    grid-template-columns: 1fr;
  }
  .hero-banner-zone, .hero-content-layer { min-height: 18rem; }
  .menu-label-text { display: none; }
}

.legal-top-block { margin-top: 1.3rem; }