/* ============================================================
   АЛГА АГРО ГРУПП — Landing CSS v2
   Premium Agricultural Design with Animations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Unbounded:wght@400;500;600;700;800&display=swap');

/* ── TOKENS ── */
:root {
  --ink:       #0b201a;
  --deep:      #0c2619;
  --forest:    #133724;
  --forest-md: #1b4931;
  --leaf:      #36b74e;
  --acid:      #36b74e;
  --accent-lt: #48d264;
  --accent-glow: rgba(54,183,78,.25);
  --gold:      #dfa837;
  --gold-lt:   #f4c35c;
  --cream:     #f3ede0;
  --paper:     #f7f3e8;
  --white:     #fdfcf8;
  --line:      rgba(11,32,26,.12);
  --line-light:rgba(255,255,255,.12);
  --shadow-sm: 0 4px 20px rgba(11,32,26,.08);
  --shadow-md: 0 16px 48px rgba(11,32,26,.14);
  --shadow-lg: 0 32px 80px rgba(11,32,26,.22);
  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  36px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: 'Manrope', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1,h2,h3 { margin: 0; }
p { margin: 0; }
button { cursor: pointer; }
ol,ul { margin: 0; padding: 0; list-style: none; }

section[id], footer[id], div[id] {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 84px);
}

/* ── NOISE OVERLAY ── */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ── SHELL ── */
.shell { width: min(1360px, calc(100% - 48px)); margin: 0 auto; }

/* ── TYPOGRAPHY ── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #6b7b72;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.kicker-light { color: rgba(255,255,255,.48); }
.kicker-light::before { background: rgba(255,255,255,.48); }

h2 {
  font: 600 clamp(36px, 4vw, 64px)/.98 'Unbounded', sans-serif;
  letter-spacing: -.055em;
}
h2 em { color: var(--leaf); font-style: normal; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-out);
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 16px;
  flex-shrink: 0;
}
.btn-arrow {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.btn-primary {
  color: #ffffff;
  background: #2ea845;
  box-shadow: 0 8px 24px rgba(46,168,69,.28);
}
.btn-primary:hover {
  background: #36b74e;
  box-shadow: 0 16px 38px rgba(46,168,69,.38);
}
.btn-ghost {
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.13); }

/* ════════════════════════════════════
   HEADER
════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(calc(100% - 40px), 1400px);
  min-height: 88px;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  background: rgba(10,35,24,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--white);
  transition: all .3s var(--ease-out);
}
.site-header.scrolled {
  top: 8px;
  min-height: 74px;
  padding: 8px 24px;
  background: rgba(10,35,24,.96);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}

.header-left-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.brand-logo {
  width: 48px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 12px;
  background: #5a9c40;
  border: 1px solid rgba(255,255,255,.28);
  transition: all .3s var(--ease-spring);
}
.brand-logo:hover { transform: scale(1.06); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: grid; }
.brand-copy strong { font: 800 16px/1.2 'Unbounded', sans-serif; letter-spacing: -.03em; color: #ffffff; transition: font-size .25s; }
.brand-copy small { margin-top: 2px; color: rgba(255,255,255,.82); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

.scrolled .brand-logo { width: 38px; height: 42px; border-radius: 9px; }
.scrolled .brand-copy strong { font-size: 14px; }
.scrolled .brand-copy small { font-size: 8.5px; }

.header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 3.5vw, 60px);
}
.header-nav a {
  position: relative;
  font: 800 17px/1 'Unbounded', sans-serif;
  color: #ffffff;
  letter-spacing: -.02em;
  transition: color .2s, font-size .25s;
}
.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0; right: 100%;
  height: 2px;
  background: var(--acid);
  transition: right .25s var(--ease-out);
}
.header-nav a:hover { color: var(--acid); }
.header-nav a:hover::after { right: 0; }
.scrolled .header-nav a { font-size: 15px; }

/* ── Inline contacts bar (always visible right side of header) ── */
.header-contacts-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.hcb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: #ffffff;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.hcb-item:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(198,232,75,.35);
}
.hcb-icon {
  color: rgba(198,232,75,.9);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hcb-text {
  font: 700 12px/1 'Manrope', sans-serif;
  color: #ffffff;
}

.header-contact-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 16px;
  width: 340px;
  padding: 9px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(13,48,33,.97), rgba(7,29,20,.97));
  box-shadow: 0 24px 64px rgba(1,18,11,.38), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: opacity .25s, visibility .25s, transform .3s var(--ease-out);
}
.header-contact-popover::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 52px;
  width: 13px;
  height: 13px;
  border-top: 1px solid rgba(255,255,255,.16);
  border-left: 1px solid rgba(255,255,255,.16);
  background: #0c2d1f;
  transform: rotate(45deg);
}
.header-contact-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: #ffffff;
  background: rgba(255,255,255,.055);
  transition: transform .22s var(--ease-out), border-color .22s, background .22s;
}
.header-contact-row:hover {
  transform: translateX(-3px);
  border-color: rgba(198,232,75,.35);
  background: rgba(255,255,255,.095);
}
.header-contact-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--acid);
  background: rgba(198,232,75,.11);
}
.header-contact-icon svg { width: 20px; height: 20px; }
.header-contact-copy { min-width: 0; display: grid; gap: 4px; }
.header-contact-copy small {
  color: rgba(255,255,255,.52);
  font: 700 8px/1 'Manrope', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.header-contact-copy strong {
  overflow: hidden;
  color: #ffffff;
  font: 700 14px/1.15 'Manrope', sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.header-contact-arrow {
  color: var(--acid);
  font-size: 17px;
  transition: transform .2s;
}
.header-contact-row:hover .header-contact-arrow { transform: translate(2px, -2px); }
.site-header.scrolled .header-contact-popover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
}
.site-header.scrolled:has(.header-nav a[href="#contacts"]:hover) .header-contact-popover,
.site-header.scrolled .header-contact-popover:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 16px;
  border-radius: 999px;
  background: #2ea845;
  color: #ffffff;
  font: 800 12px/1 'Unbounded', sans-serif;
  letter-spacing: -.01em;
  box-shadow: 0 4px 14px rgba(46,168,69,.28);
  transition: transform .25s var(--ease-spring), box-shadow .25s, background .2s, padding .25s, font-size .25s;
}
.header-cta:hover {
  transform: translateY(-1px);
  background: #36b74e;
  box-shadow: 0 8px 22px rgba(46,168,69,.45);
}
.header-cta-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}
.scrolled .header-cta {
  padding: 5px 12px 5px 14px;
  font-size: 11px;
}
.scrolled .header-cta-icon {
  width: 17px;
  height: 17px;
  font-size: 9.5px;
}

.burger {
  display: none;
  justify-self: end;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: transparent;
}
.burger span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s, opacity .25s; }
.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); }

/* MOBILE NAV */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10,35,24,.97);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
  transition: opacity .3s, transform .3s var(--ease-out);
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}
.mobile-nav-link {
  color: rgba(255,255,255,.72);
  font: 600 28px/1 'Unbounded', sans-serif;
  letter-spacing: -.03em;
  transition: color .2s;
}
.mobile-nav-link:hover { color: var(--acid); }
.mobile-nav-cta {
  margin-top: 20px;
  padding: 16px 32px;
  border-radius: 16px;
  background: var(--acid);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.mobile-contact-details {
  width: min(360px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 2px;
}
.mobile-contact-details a {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  text-align: center;
}
.mobile-contact-details span {
  color: rgba(255,255,255,.48);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.mobile-contact-details strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.06);
  animation: hero-zoom 12s ease-out forwards;
}
@keyframes hero-zoom {
  to { transform: scale(1); }
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(8,28,18,.88) 38%, rgba(8,28,18,.6) 62%, rgba(8,28,18,.18) 85%),
    linear-gradient(0deg, rgba(8,28,18,.6) 0%, transparent 40%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: contents;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: clamp(90px, 12vh, 130px) clamp(24px, 4vw, 64px) clamp(36px, 5vh, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fade-up .9s .1s var(--ease-out) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--acid);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow-line { display: inline-block; width: 26px; height: 1.5px; background: currentColor; }
.hero-badge-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(226,170,56,.16);
  border: 1px solid rgba(226,170,56,.35);
  color: var(--acid);
  font: 700 clamp(8.5px, 0.75vw, 10px) 'Unbounded', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 18px;
  font: 700 clamp(38px, 4.4vw, 62px)/1.06 'Unbounded', sans-serif;
  letter-spacing: -.045em;
}
h1 em { color: var(--acid); font-style: normal; text-shadow: 0 0 40px rgba(226,170,56,.25); }

.hero-lead {
  max-width: 640px;
  color: rgba(255,255,255,.84);
  font-size: clamp(14.5px, 1.2vw, 17.5px);
  line-height: 1.58;
  margin-bottom: 24px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 26px;
}
.hf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12.5px, 0.95vw, 14.5px);
  font-weight: 600;
  color: rgba(255,255,255,.92);
}
.hf-check {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero-actions .btn {
  min-width: 218px;
  justify-content: space-between;
  min-height: 54px;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 14px;
}
.hero-actions .btn-primary,
.connect-btns .btn-primary { border: 1.5px solid transparent; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 4px;
  padding: 16px 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-stat {
  display: grid;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,.08);
  padding-right: 12px;
}
.hero-stat:last-child { border-right: none; padding-right: 0; }
.hero-stat strong {
  font: 700 clamp(22px, 1.9vw, 32px)/1 'Unbounded', sans-serif;
  color: var(--acid);
  letter-spacing: -.03em;
}
.hero-stat strong span { color: var(--acid); }
.hero-stat > span { color: rgba(255,255,255,.72); font-size: clamp(10.5px, 0.85vw, 12px); line-height: 1.35; font-weight: 600; }

/* Hero visual (right column) */
.hero-visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 95px 100px 85px;
}
.hero-card-wrap {
  position: relative;
  width: min(86%, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-card {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hc-main {
  position: relative;
  z-index: 3;
  width: 100%;
  background: rgba(253,252,248,.96);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  padding: 14px;
  display: flex;
  flex-direction: column;
  transform: rotate(-2deg);
  animation: card-enter .9s .3s var(--ease-out) both;
  color: var(--ink);
  min-height: auto;
  max-height: min(480px, 76vh);
}
@keyframes card-enter {
  from { opacity: 0; transform: rotate(-2deg) translateY(40px); }
  to   { opacity: 1; transform: rotate(-2deg) translateY(0); }
}
.hc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hero-card-badge {
  font: 700 8.5px 'Unbounded', sans-serif;
  color: #627468;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hc-chip {
  font-size: 9px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  padding: 3px 9px;
  border-radius: 999px;
}
.hero-card-img {
  height: 280px;
  min-height: unset;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #1e3327;
  display: grid;
  place-items: center;
}
.hero-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-card-info {
  padding: 14px 4px 4px;
  display: grid;
  gap: 6px;
}
.hc-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hc-info-top small { color: #6d8074; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hc-cat-pill {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(226,170,56,.2);
  padding: 2px 7px;
  border-radius: 6px;
}
.hero-card-info strong {
  font: 700 23px/1.2 'Unbounded', sans-serif;
  letter-spacing: -.03em;
  color: var(--ink);
}
.hc-info-bottom {
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}
.hc-spec { color: #607266; }
.hc-action { color: var(--ink); font-weight: 800; }
.hc-action i { font-style: normal; }

/* Float cards */
.hc-float {
  position: absolute;
  z-index: 4;
  padding: 14px 18px;
  background: rgba(253,252,248,.92);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  display: grid;
  gap: 4px;
  min-width: 165px;
  border-radius: 18px;
}
.hc-float-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
}
.hc-desi {
  top: -58px;
  left: -115px;
  transform: rotate(-6deg);
  animation: card-enter .9s .55s var(--ease-out) both;
}
.hc-prot {
  bottom: -88px;
  right: -60px;
  transform: rotate(4.5deg);
  animation: card-enter .9s .75s var(--ease-out) both;
}
.fc-tag { font-size: 7.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #627468; }
.hc-float strong { font: 700 17px/1.1 'Unbounded', sans-serif; letter-spacing: -.03em; }
.hc-float small { color: #6d8074; font-size: 10px; font-weight: 600; }

.hero-stamp {
  position: absolute;
  top: 110px;
  right: 28px;
  z-index: 4;
  width: 96px;
  height: 96px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px dashed rgba(226,170,56,.5);
  color: var(--acid);
  animation: spin-slow 18s linear infinite;
  transform-origin: center;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero-stamp b { font: 700 8px 'Unbounded', sans-serif; letter-spacing: .1em; text-transform: uppercase; display: block; }
.hero-stamp span { font: 700 14px 'Unbounded', sans-serif; display: block; }

/* ════════════════════════════════════
   TICKER
════════════════════════════════════ */
.ticker-wrap {
  overflow: hidden;
  background: #258c37;
  padding: 16px 0;
  position: relative;
  z-index: 10;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  animation: ticker 28s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track span {
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-track i { color: rgba(255,255,255,.6); font-style: normal; flex-shrink: 0; }

/* ════════════════════════════════════
   PRODUCTION SHOWCASE (horizontal rows with photos)
════════════════════════════════════ */
.prod-showcase-section {
  padding: 76px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.prod-showcase-head {
  margin-bottom: 40px;
}
.prod-showcase-head h2 em {
  color: #2e9e42;
}
.prod-showcase-sub {
  font-size: 15px;
  color: #55665d;
  font-weight: 500;
  margin-top: 12px;
}

/* Grid of horizontal rows */
.psc-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Each product row */
.psc-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(13,34,25,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  transition: box-shadow .3s, transform .3s var(--ease-spring);
  transition-delay: var(--delay, 0s);
}
.psc-row:hover {
  box-shadow: 0 16px 40px rgba(13,34,25,.1);
  transform: translateY(-3px);
}
.psc-row-reverse {
  grid-template-columns: 1fr 380px;
}
.psc-row-reverse .psc-row-img { order: 2; }
.psc-row-reverse .psc-row-body { order: 1; }

/* Image panel */
.psc-row-img {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: #0d2219;
}
.psc-row-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.psc-row:hover .psc-row-img img {
  transform: scale(1.05);
}
.psc-row-num {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font: 800 11px 'Unbounded', sans-serif;
  color: #ffffff;
  background: rgba(10,35,24,.75);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .06em;
  z-index: 2;
}

/* Text panel */
.psc-row-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.psc-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.psc-row-cat {
  font: 700 12px 'Unbounded', sans-serif;
  color: #2e9e42;
  letter-spacing: .04em;
}
.psc-row-badge {
  font: 700 9.5px/1 'Unbounded', sans-serif;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(54,183,78,.12);
  border: 1px solid rgba(54,183,78,.3);
  color: #1e7e34;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.psc-row-body h3 {
  font: 700 clamp(19px, 1.8vw, 24px)/1.25 'Unbounded', sans-serif;
  letter-spacing: -.03em;
  color: #0d2219;
  margin: 0 0 12px;
}
.psc-row-body p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #4a5c52;
  font-weight: 500;
  margin: 0 0 18px;
}
.psc-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.psc-row-tags span {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(13,34,25,.05);
  border: 1px solid rgba(13,34,25,.1);
  border-radius: 6px;
  color: #0d2219;
}
.psc-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 12px;
  background: #0d2219;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(13,34,25,.2);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.psc-row-btn i {
  font-style: normal;
  transition: transform .2s;
}
.psc-row-btn:hover {
  background: #36b74e;
  box-shadow: 0 6px 20px rgba(54,183,78,.35);
  transform: translateY(-2px);
}
.psc-row-btn:hover i {
  transform: translate(2px, -2px);
}

/* ════════════════════════════════════
   NOMENCLATURE SECTION
════════════════════════════════════ */
.nomen-section {
  padding: 76px 0;
  background: var(--paper);
  position: relative;
  border-top: 1px solid var(--line);
}
.nomen-head {
  max-width: 860px;
  margin-bottom: 40px;
}
.nomen-head h2 {
  color: var(--ink);
  margin-top: 8px;
  margin-bottom: 16px;
}
.nomen-head p {
  color: #4a6356;
  font-size: 16px;
  line-height: 1.65;
}
.nomen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nomen-card {
  background: #ffffff;
  border: 1px solid rgba(10,35,24,.1);
  border-radius: 20px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(10,35,24,.04);
  transition: all .3s var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.nomen-card:hover {
  transform: translateY(-6px);
  border-color: rgba(46,168,69,.4);
  box-shadow: 0 16px 48px rgba(46,168,69,.12);
}
.nomen-card-featured {
  background: linear-gradient(145deg, #0d2e20 0%, #061710 100%);
  color: #ffffff;
  border: 1.5px solid rgba(54,183,78,.5);
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
}
.nomen-card-featured:hover {
  border-color: #36b74e;
  box-shadow: 0 24px 64px rgba(46,168,69,.3);
}
.nc-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(46,168,69,.1);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 20px;
}
.nomen-card-featured .nc-icon-wrap {
  background: rgba(54,183,78,.22);
}
.nc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.nc-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nc-badge-fgis {
  background: #eef7f0;
  color: #1e7e34;
  border: 1px solid rgba(30,126,52,.25);
}
.nc-badge-flag {
  background: #2ea845;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(46,168,69,.5);
}
.nc-badge-dark {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.15);
}
.nc-title {
  font: 700 19px/1.3 'Unbounded', sans-serif;
  color: var(--ink);
  margin-bottom: 12px;
}
.nomen-card-featured .nc-title {
  color: #ffffff;
}
.nc-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #556b60;
  margin-bottom: 18px;
}
.nomen-card-featured .nc-desc {
  color: rgba(255,255,255,.78);
}
.nc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.nomen-card-featured .nc-tags {
  border-top-color: rgba(255,255,255,.12);
}
.nc-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: #f2f6f3;
  color: #2b4538;
}
.nomen-card-featured .nc-tag {
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.92);
}

/* ════════════════════════════════════
   CALCIPRILL FEATURE SECTION
════════════════════════════════════ */
.calciprill-section {
  padding: 76px 0;
  background: #061710;
  color: var(--white);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
}
.calciprill-section::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(46,168,69,.18), transparent 70%);
  pointer-events: none;
}
.calciprill-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.cp-left {
  display: flex;
  flex-direction: column;
}
.cp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(54,183,78,.15);
  border: 1px solid rgba(54,183,78,.35);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: #48d264;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 20px;
}
.cp-left h2 {
  font: 700 clamp(28px, 3.8vw, 44px)/1.15 'Unbounded', sans-serif;
  color: #ffffff;
  margin: 0 0 20px;
}
.cp-left h2 em {
  color: #48d264;
  font-style: normal;
}
.cp-lead {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin-bottom: 30px;
}
.cp-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.cp-metric-box {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
}
.cp-metric-box strong {
  display: block;
  font: 800 22px/1.1 'Unbounded', sans-serif;
  color: #36b74e;
  margin-bottom: 6px;
}
.cp-metric-box p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
}
.cp-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cp-right {
  position: relative;
}
.cp-card-preview {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
  background: #0d2218;
  max-width: 480px;
  margin: 0 auto;
}
.cp-card-preview img {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.cp-warehouse-badge {
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.cp-warehouse-badge span { font-size: 20px; }

/* ════════════════════════════════════
   PRODUCTS
════════════════════════════════════ */
.products-section {
  padding: 76px 0;
  background: var(--deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.products-section::before {
  content: '';
  position: absolute;
  width: 50vw; height: 50vw;
  right: -20vw; top: -10vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,168,61,.06), transparent 70%);
  pointer-events: none;
}
.products-section::after {
  content: '';
  position: absolute;
  width: 30vw; height: 30vw;
  left: -10vw; bottom: -8vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,67,.05), transparent 70%);
  pointer-events: none;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: end;
  margin-bottom: 40px;
}
.section-head-left h2 em { color: var(--acid); }
.section-head-right p {
  color: rgba(255,255,255,.88);
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
}
.slider-controls { display: flex; align-items: center; gap: 10px; }
.sl-btn {
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease-spring);
}
.sl-btn svg {
  display: block;
  flex-shrink: 0;
  transition: transform .2s;
}
.sl-btn:hover {
  background: #36b74e;
  border-color: #36b74e;
  color: #ffffff;
  transform: scale(1.06);
}
.sl-counter { min-width: 54px; text-align: center; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 700; }
.sl-counter b { color: var(--white); }

/* Category tabs — standalone pills */
.cat-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 36px;
  padding: 4px 2px;
  max-width: 100%;
}
.cat-tabs::-webkit-scrollbar {
  display: none;
}
.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
  font: 700 13.5px/1 'Manrope', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.cat-tab b {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255,255,255,.08);
}
.cat-tab:hover {
  color: #ffffff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.cat-tab.active {
  color: #ffffff;
  background: #36b74e;
  border-color: #36b74e;
  box-shadow: 0 4px 18px rgba(54,183,78,.35);
}
.cat-tab.active b {
  border-color: rgba(255,255,255,.4);
  background: rgba(0,0,0,.2);
  color: #ffffff;
}

/* Product slider wrapper */
.prod-slider-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
}

.prod-viewport {
  width: 100%;
  margin-left: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  outline: none;
  padding: 12px 0 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(54,183,78,.6) rgba(255,255,255,.08);
}

.prod-viewport::-webkit-scrollbar {
  height: 6px;
}
.prod-viewport::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  margin: 0 max(20px, calc((100vw - 1360px) / 2 + 20px));
}
.prod-viewport::-webkit-scrollbar-thumb {
  background: #2ea845;
  border-radius: 999px;
}
.prod-viewport::-webkit-scrollbar-thumb:hover {
  background: #36b74e;
}

.prod-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-left: max(20px, calc((100vw - 1360px) / 2 + 20px));
  padding-right: max(60px, calc((100vw - 1360px) / 2 + 100px));
}

/* Floating Navigation Arrows */
.slider-nav-arrow {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  z-index: 20;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.24);
  background: rgba(10,35,24,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  transition: all .25s var(--ease-spring);
}
.slider-nav-arrow svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  transition: transform .2s;
}
.sna-prev {
  left: max(16px, calc((100vw - 1360px) / 2 - 24px));
}
.sna-next {
  right: max(16px, calc((100vw - 1360px) / 2 - 24px));
}
.slider-nav-arrow:hover {
  background: #2ea845;
  border-color: #36b74e;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 16px 40px rgba(46,168,69,.45);
}
.sna-prev:hover svg { transform: translateX(-2px); }
.sna-next:hover svg { transform: translateX(2px); }

/* Progress bar under slider */
.slider-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 32px;
}
.slider-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.slider-progress-thumb {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #2ea845, #48d264);
  border-radius: 999px;
  transition: width .15s, transform .1s;
  box-shadow: 0 0 14px rgba(54,183,78,.6);
}
.slider-progress-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,.6);
  font-size: 13.5px;
  font-weight: 500;
}
.sph-counter {
  font-family: 'Unbounded', sans-serif;
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
}
.sph-counter b {
  color: #ffffff;
  font-weight: 700;
}

/* Product card */
.prod-card {
  position: relative;
  width: clamp(280px, 24vw, 360px);
  min-height: 520px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  color: var(--white);
  scroll-snap-align: start;
  transition: transform .35s var(--ease-out), border-color .35s, background .35s, box-shadow .35s;
  overflow: hidden;
}
.prod-card:hover {
  transform: translateY(-8px);
  border-color: rgba(54,183,78,.5);
  background: rgba(255,255,255,.07);
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.prod-card.is-hidden { display: none; }

.pc-dark {
  background: rgba(255,255,255,.035);
}

.pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pc-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pc-badge-wheat  { background: rgba(200,230,58,.15); color: var(--acid); }
.pc-badge-barley { background: rgba(212,168,67,.15); color: var(--gold-lt); }
.pc-badge-sunflower { background: rgba(255,193,7,.18); color: #ffca28; border: 1px solid rgba(255,193,7,.3); }
.pc-badge-micro { background: rgba(38,198,218,.18); color: #4dd0e1; border: 1px solid rgba(38,198,218,.3); }
.pc-badge-desi   { background: rgba(255,100,80,.12); color: #ff9980; }
.pc-badge-prot   { background: rgba(91,122,255,.15); color: #8ca6ff; }
.pc-badge-meliorant { background: rgba(46,168,69,.2); color: #48d264; border: 1px solid rgba(46,168,69,.35); }
.pc-brand { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .06em; }

.pc-img {
  flex: 0 0 auto;
  height: 260px;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}
.pc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
  filter: saturate(.9) brightness(.92);
}
.prod-card:hover .pc-img img { transform: scale(1.06); }
.pc-img-chem img { object-position: center; }

/* Real product photos — contain so full label is visible */
.pc-img-product {
  background: #f4f6f2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-img-product img {
  object-fit: contain !important;
  filter: none !important;
  padding: 12px;
  transform-origin: center;
}
.prod-card.pc-dark .pc-img-product { background: #1a2e22; }
.prod-card:hover .pc-img-product img { transform: scale(1.05); }
.pc-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,230,58,.22) 0%, transparent 70%);
  z-index: 1;
}
.pc-glow-blue { background: radial-gradient(ellipse at center, rgba(91,122,255,.22) 0%, transparent 70%); }

.pc-body { flex: 1; display: flex; flex-direction: column; }
.pc-body small { color: rgba(255,255,255,.4); font-size: 9.5px; letter-spacing: .04em; }
.pc-body h3 {
  margin: 8px 0 10px;
  font: 600 clamp(18px, 1.6vw, 22px)/1.2 'Unbounded', sans-serif;
  letter-spacing: -.04em;
}
.pc-desc {
  color: rgba(255,255,255,.5);
  font-size: 12px;
  line-height: 1.65;
  flex: 1;
}
.pc-action {
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 11px;
  font-weight: 800;
}
.pc-action i {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  font-style: normal;
  transition: transform .25s var(--ease-spring);
}
.prod-card:hover .pc-action i { transform: scale(1.12) rotate(-5deg); }

.prod-footer { display: flex; justify-content: flex-end; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255,255,255,.24);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  transition: gap .3s var(--ease-out), border-color .2s;
}
.text-link:hover { gap: 50px; border-color: var(--acid); }
.text-link span { transition: transform .25s var(--ease-spring); }
.text-link:hover span { transform: translateX(4px); }

/* ════════════════════════════════════
   ADVANTAGES
════════════════════════════════════ */
.adv-section {
  position: relative;
  padding: 76px 0;
  overflow: hidden;
  color: var(--white);
  background: radial-gradient(120% 100% at 50% 0%, #2e1e16 0%, #1c120c 55%, #100a06 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.adv-head {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-bottom: 40px;
}
.adv-head h2 em { color: #36b74e; }
.adv-lead {
  max-width: 580px;
  margin-top: 20px;
  color: rgba(255,255,255,.6);
  font-size: 15px;
  line-height: 1.7;
}

.adv-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.adv-card {
  position: relative;
  min-height: 290px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .25s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.adv-card:hover {
  background: rgba(54,183,78,.08);
  border-color: rgba(54,183,78,.3);
  transform: translateY(-4px);
}
.adv-num {
  position: absolute;
  top: 24px; left: 24px;
  font: 800 10px 'Unbounded', sans-serif;
  color: rgba(255,255,255,.25);
  letter-spacing: .08em;
}
.adv-card:hover .adv-num {
  color: #36b74e;
}

.adv-big-icon {
  margin: 0 0 auto auto;
  width: 56px; height: 56px;
  opacity: .9;
}
.adv-big-icon svg { width: 56px; height: 56px; }
.adv-big-icon-fgis {
  width: 44px;
  height: 44px;
  margin-right: 6px;
}
.adv-big-icon-fgis svg { width: 44px; height: 44px; }

.adv-stat-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.adv-big-num {
  font: 700 clamp(30px, 2.5vw, 40px)/1 'Unbounded', sans-serif;
  color: #36b74e;
  letter-spacing: -.04em;
}
.adv-big-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.adv-card h3 {
  margin: 0 0 10px;
  font: 600 clamp(16px, 1.3vw, 20px)/1.25 'Unbounded', sans-serif;
  letter-spacing: -.03em;
  color: #ffffff;
}
.adv-card p {
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

/* ════════════════════════════════════
   PROCESS (От задачи до поставки)
════════════════════════════════════ */
.process-section {
  padding: 76px 0;
  background: var(--paper);
}

.proc-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: end;
  margin-bottom: 40px;
}
.proc-desc {
  align-self: end;
  color: #55665d;
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 0;
}

.proc-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.proc-item {
  position: relative;
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid rgba(13,34,25,.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
  transition-delay: var(--delay, 0s);
}
.proc-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(13,34,25,.08);
  border-color: rgba(54,183,78,.35);
}

.proc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.proc-num {
  font: 800 11px 'Unbounded', sans-serif;
  color: #36b74e;
  letter-spacing: .08em;
  line-height: 1;
}

.proc-arrow-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(54,183,78,.08);
  border: 1.5px solid rgba(54,183,78,.22);
  color: #2e9e42;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.proc-arrow-circle svg {
  width: 16px;
  height: 16px;
  display: block;
}
.proc-item:hover .proc-arrow-circle {
  background: #36b74e;
  border-color: #36b74e;
  color: #ffffff;
  transform: scale(1.08);
}

.proc-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(54,183,78,.1);
  border: 1px solid rgba(54,183,78,.2);
  color: #2e9e42;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  align-self: flex-start;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.proc-icon-box svg {
  width: 24px;
  height: 24px;
  display: block;
}
.proc-item:hover .proc-icon-box {
  background: rgba(54,183,78,.18);
  transform: translateY(-2px);
}

.proc-title {
  margin: 0 0 10px;
  font: 700 clamp(16px, 1.25vw, 19px)/1.25 'Unbounded', sans-serif;
  letter-spacing: -.03em;
  color: #0d2219;
  text-align: left;
}

.proc-text {
  color: #55665d;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
  text-align: left;
}

/* ════════════════════════════════════
   CONNECT (MAX section)
════════════════════════════════════ */
.connect-section {
  position: relative;
  overflow: hidden;
  background: var(--deep);
}
.connect-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  min-height: 900px;
}

/* Left side */
.connect-left {
  position: relative;
  padding: 100px clamp(24px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 60px;
  background: var(--forest-md);
  background-image:
    radial-gradient(circle at 20% 80%, rgba(200,230,58,.08), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(79,168,61,.06), transparent 35%);
}
.connect-copy { color: var(--white); }
.connect-copy h2 { max-width: 480px; color: var(--white); margin: 0 0 24px; }
.connect-copy h2 em { color: var(--acid); }
.connect-copy > p { color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.72; max-width: 520px; margin-bottom: 36px; }
.connect-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.connect-btns .btn { min-width: 218px; justify-content: space-between; }

/* Phone stage */
.phone-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
}
.phone-orbit-1 { width: 500px; height: 500px; }
.phone-orbit-2 { width: 340px; height: 340px; border-style: dashed; border-color: rgba(54,183,78,.15); }
.phone-mockup {
  position: relative;
  z-index: 2;
  width: min(100%, 320px);
  filter: drop-shadow(40px 50px 60px rgba(0,0,0,.36));
  transform: rotate(3deg);
  transition: transform .4s var(--ease-spring), filter .4s;
  animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50%       { transform: rotate(2deg) translateY(-12px); }
}

/* Right side */
.connect-right {
  padding: 80px clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: rgba(0,0,0,.18);
  justify-content: center;
  color: var(--white);
}
.connect-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Phone stage */
.phone-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
}
.phone-orbit-1 { width: 500px; height: 500px; }
.phone-orbit-2 { width: 340px; height: 340px; border-style: dashed; border-color: rgba(200,230,58,.12); }
.phone-mockup {
  position: relative;
  z-index: 2;
  width: min(100%, 320px);
  filter: drop-shadow(40px 50px 60px rgba(0,0,0,.36));
  transform: rotate(3deg);
  transition: transform .4s var(--ease-spring), filter .4s;
  animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50%       { transform: rotate(2deg) translateY(-12px); }
}

/* Right side */
.connect-right {
  padding: 80px clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: rgba(0,0,0,.18);
  justify-content: center;
  color: var(--white);
}

/* QR Card */
.qr-card {
  padding: 30px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color .25s, background .25s;
}
.qr-card:hover { border-color: rgba(200,230,58,.3); background: rgba(255,255,255,.08); }
.qr-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(200,230,58,.12);
  color: var(--acid);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.qr-label h3 { font: 600 20px/1.2 'Unbounded', sans-serif; letter-spacing: -.04em; margin-bottom: 10px; }
.qr-label p { color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.6; }
.qr-img-wrap {
  display: block;
  align-self: center;
  border-radius: var(--r-md);
  overflow: hidden;
  background: white;
  padding: 12px;
  transition: transform .3s var(--ease-spring);
}
.qr-img-wrap.qr-img-full {
  background: transparent;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.qr-img-wrap:hover { transform: scale(1.04); }
.qr-img-wrap img { width: 200px; height: 200px; object-fit: contain; display: block; }
.qr-img-full img { width: 100% !important; height: auto !important; object-fit: unset !important; }

/* MAX logo in contact card */
.cc-icon-max { background: transparent !important; padding: 0 !important; }
.qr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  align-self: stretch;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.qr-link:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); }
.qr-link span { transition: transform .25s var(--ease-spring); }
.qr-link:hover span { transform: translateX(4px); }

/* Bot card */
.bot-card {
  padding: 30px;
  background: rgba(200,230,58,.06);
  border: 1px solid rgba(200,230,58,.16);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition-delay: var(--delay, 0s);
  transition: border-color .25s, background .25s;
}
.bot-card:hover { border-color: rgba(200,230,58,.38); background: rgba(200,230,58,.1); }
.bot-icon { width: 48px; }
.bot-icon svg { display: block; }
.bot-card h3 { font: 600 18px/1.2 'Unbounded', sans-serif; letter-spacing: -.04em; }
.bot-card p { color: rgba(255,255,255,.52); font-size: 12.5px; line-height: 1.65; flex: 1; }
.bot-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--acid);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.bot-link-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,230,58,.28); }
.bot-link-btn span { transition: transform .25s var(--ease-spring); }
.bot-link-btn:hover span { transform: translateX(4px); }

/* ════════════════════════════════════
   CONTACTS
════════════════════════════════════ */
.contacts-section { padding: 76px 0; background: var(--paper); }
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5vw;
  align-items: start;
}
.contacts-copy h2 { margin: 0 0 20px; }
.contacts-copy > p { color: #627069; font-size: 14px; line-height: 1.72; }
/* Dark contact cards (primary, above the grid) */
.contacts-right { display: flex; flex-direction: column; gap: 24px; }
.contact-dark-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-dark-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: #182820;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.contact-dark-card:hover {
  background: #1f3328;
  transform: translateY(-2px);
}
.cdc-icon {
  color: rgba(255,255,255,.65);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.cdc-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cdc-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cdc-value {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  word-break: break-all;
}

.contacts-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card {
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255,253,248,.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .2s;
  transition-delay: var(--delay, 0s);
}
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(79,168,61,.3); }
.cc-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--cream);
  font-size: 22px;
  border: 1px solid var(--line);
}
.cc-icon-mail { color: #236f3b; }
.cc-icon-mail svg { width: 22px; height: 22px; display: block; }
.cc-body { display: grid; gap: 5px; }
.cc-body small { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a9a8e; }
.cc-body strong { font-size: 14px; font-weight: 700; color: var(--ink); word-break: break-all; }
.cc-body span { font-size: 11px; color: #7a8a7e; }

/* ════════════════════════════════════
   FOOTER (REDESIGNED)
════════════════════════════════════ */
.site-footer {
  background: #06140e;
  color: #ffffff;
  padding-top: 64px;
  border-top: 1px solid rgba(54,183,78,.15);
  position: relative;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr 1.15fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col h4 {
  font: 700 12px/1.2 'Unbounded', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 20px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col h4::after {
  content: '';
  width: 16px;
  height: 2px;
  background: #36b74e;
  border-radius: 2px;
}

/* Brand col */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
}
.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-brand-text strong {
  display: block;
  font: 700 14.5px/1.25 'Unbounded', sans-serif;
  letter-spacing: -.03em;
  color: #ffffff;
}
.footer-brand-text small {
  display: block;
  font: 700 8.5px 'Unbounded', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #36b74e;
  margin-top: 2px;
}

.footer-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin: 0 0 20px;
  font-weight: 400;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(54,183,78,.1);
  border: 1px solid rgba(54,183,78,.25);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #48d264;
  width: fit-content;
}
.fsp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #36b74e;
  box-shadow: 0 0 8px #36b74e;
  animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: .6; }
}

/* Nav links */
.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.fnb-icon { font-size: 14px; flex-shrink: 0; }
.fnb-arr {
  margin-left: auto;
  color: rgba(255,255,255,.25);
  font-size: 13px;
  transition: transform .2s, color .2s;
}
.footer-nav-btn:hover {
  background: rgba(54,183,78,.08);
  border-color: rgba(54,183,78,.2);
  color: #ffffff;
  transform: translateX(3px);
}
.footer-nav-btn:hover .fnb-arr {
  color: #36b74e;
  transform: translateX(3px);
}

/* Contacts */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-contact-item,
.footer-schedule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: inherit;
  transition: background .2s, border-color .2s, transform .2s;
}
.footer-contact-item:hover {
  background: rgba(54,183,78,.08);
  border-color: rgba(54,183,78,.25);
  transform: translateY(-2px);
}
.fci-icon { font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.fci-icon-mail { width: 18px; height: 18px; color: rgba(198,232,75,.9); }
.fci-icon-mail svg { width: 18px; height: 18px; display: block; }
.fci-info small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 2px;
}
.fci-info strong {
  display: block;
  font: 700 13.5px 'Unbounded', sans-serif;
  color: #ffffff;
  letter-spacing: -.02em;
}
.fci-info span {
  display: block;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  font-weight: 500;
}

/* MAX buttons */
.footer-subtext {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
  margin: 0 0 16px;
}
.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.footer-action-btn img {
  border-radius: 6px;
  flex-shrink: 0;
}
.footer-action-btn i {
  margin-left: auto;
  font-style: normal;
  transition: transform .2s;
}
.fab-primary {
  background: #36b74e;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(54,183,78,.3);
}
.fab-primary:hover {
  background: #2ea644;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(54,183,78,.45);
}
.fab-primary:hover i {
  transform: translate(2px, -2px);
}
.fab-secondary {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff;
}
.fab-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
}
.fab-secondary:hover i {
  transform: translateX(3px);
}

/* Footer bottom */
.footer-bottom {
  padding: 24px 0;
  background: rgba(0,0,0,.25);
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  flex-wrap: wrap;
}
.fbi-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  font-size: 11px;
  font-weight: 600;
}
.footer-top-btn {
  color: #36b74e;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .2s, transform .2s;
}
.footer-top-btn:hover {
  color: #48d264;
  transform: translateY(-2px);
}

/* ════════════════════════════════════
   BACK TO TOP
════════════════════════════════════ */
.back-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(10,35,24,.85);
  backdrop-filter: blur(12px);
  color: var(--white);
  font-size: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s var(--ease-out), background .2s;
  pointer-events: none;
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.back-top:hover { background: #36b74e; color: #ffffff; border-color: transparent; }

/* ════════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════════ */
.reveal, .reveal-card, .reveal-card-2, .reveal-card-3,
.reveal-phone, .reveal-qr {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.reveal-card  { transition-delay: .1s; }
.reveal-card-2{ transition-delay: .3s; }
.reveal-card-3{ transition-delay: .5s; }
.reveal-phone { transition-delay: .15s; }
.reveal-qr    { transition-delay: var(--delay, 0s); }

.reveal.visible, .reveal-card.visible, .reveal-card-2.visible,
.reveal-card-3.visible, .reveal-phone.visible, .reveal-qr.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero product demo — live MAX catalogue in a premium device frame */
.hero-demo-shell { position:relative; width:min(100%,440px); display:flex; flex-direction:column; align-items:center; isolation:isolate; }
.hero-demo-label { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin:0 0 12px 32px; color:rgba(255,255,255,.78); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero-demo-label span { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 6px rgba(54,183,78,.13),0 0 24px rgba(54,183,78,.8); }
.hero-video-glow { position:absolute; z-index:-1; top:14%; left:50%; width:92%; aspect-ratio:1; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(54,183,78,.35),rgba(54,183,78,.07) 48%,transparent 70%); filter:blur(18px); }
.hero-phone { position:relative; height:min(61vh,610px); aspect-ratio:1170/2532; padding:10px; border:1px solid rgba(255,255,255,.58); border-radius:42px; background:linear-gradient(145deg,#39413e 0%,#080b0a 38%,#1a201d 72%,#59625e 100%); box-shadow:0 42px 90px rgba(0,0,0,.52),0 0 0 4px rgba(7,16,12,.9),inset 0 0 0 1px rgba(255,255,255,.22); overflow:visible; transform:perspective(1100px) rotateY(-5deg) rotateZ(2.2deg); transform-origin:center; transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out); animation:phone-enter 1s .28s var(--ease-out) both; }
.hero-phone:hover { transform:perspective(1100px) rotateY(0) rotateZ(.5deg) translateY(-5px); box-shadow:0 52px 110px rgba(0,0,0,.58),0 0 0 4px rgba(7,16,12,.9),inset 0 0 0 1px rgba(255,255,255,.22); }
@keyframes phone-enter { from { opacity:0; transform:perspective(1100px) rotateY(-9deg) rotateZ(4deg) translateY(42px) scale(.94); } }
.hero-phone-screen { position:absolute; inset:10px; overflow:hidden; border-radius:33px; background:#eef5ef; transform:translateZ(0); -webkit-mask-image:-webkit-radial-gradient(white,black); }
.hero-phone-video { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; background:#eef5ef; }
.hero-phone-speaker { position:absolute; z-index:3; top:17px; left:50%; width:29%; height:18px; transform:translateX(-50%); border-radius:999px; background:#050706; box-shadow:inset 0 -1px rgba(255,255,255,.08); pointer-events:none; }
.hero-phone-buttons { position:absolute; top:105px; left:-7px; display:grid; gap:14px; }
.hero-phone-buttons i { width:5px; height:42px; border-radius:4px 0 0 4px; background:linear-gradient(90deg,#1b211e,#6a746f); }
.hero-phone-buttons i:first-child { height:25px; margin-bottom:2px; }
.hero-phone-shine { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(118deg,rgba(255,255,255,.13),transparent 24%,transparent 72%,rgba(255,255,255,.05)); pointer-events:none; }
.hero-demo-caption { display:grid; gap:3px; margin-top:17px; text-align:center; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.hero-demo-caption strong { font:600 13px/1.25 'Unbounded',sans-serif; }
.hero-demo-caption span { color:rgba(255,255,255,.68); font-size:11px; }
.hero-quick-links { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:13px; }
.hero-quick-links a { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:8px 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(8,31,20,.6); color:rgba(255,255,255,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:10.5px; font-weight:700; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.hero-quick-links a:hover { transform:translateY(-2px); background:rgba(22,74,42,.78); border-color:rgba(72,210,100,.55); }
.hero-quick-links i { color:var(--accent-lt); font-style:normal; }
.hql-dot { width:7px; height:7px; border-radius:50%; background:var(--gold-lt); }
.hql-sun { background:#f5bf30; }
.hql-calci { background:#cddc79; }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 1320px) and (min-width: 1101px) {
  .hero-visual { padding: 90px 60px 95px; }
  .hc-desi { top: -50px; left: -75px; }
  .hc-prot { bottom: -75px; right: -45px; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: 100vh; min-height: 100svh; }
  .hero-visual { display:flex; height:auto; padding:12px 24px 72px; }
  .hero-copy {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(90px, 12vh, 130px) 24px clamp(36px, 5vh, 60px);
    min-height: auto;
    justify-content: center;
  }
  .hero-demo-shell { width:min(100%,410px); }
  .hero-phone { height:min(62vh,560px); }
  .section-head { grid-template-columns: 1fr; }
  .psc-row, .psc-row-reverse { grid-template-columns: 320px 1fr; }
  .nomen-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .calciprill-grid { grid-template-columns: 1fr; gap: 40px; }
  .adv-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .proc-list { grid-template-columns: 1fr 1fr; gap: 16px; }
  .connect-inner { grid-template-columns: 1fr; }
  .connect-right { padding: 60px clamp(24px, 5vw, 80px) 80px; }
  .contacts-grid { grid-template-columns: 1fr; gap: 48px; }
  .contacts-cards { grid-template-columns: 1fr 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
}

@media (max-width: 860px) {
  .nomen-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 720px) {
  .site-header {
    top: 10px;
    width: calc(100% - 24px);
    height: 64px;
    min-height: 64px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--r-md);
  }
  .header-left-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }
  .brand { gap: 10px; min-width: 0; }
  .brand-logo { width: 38px; height: 44px; padding: 3px; border-radius: 8px; flex-shrink: 0; }
  .brand-copy { min-width: 0; }
  .brand-copy strong { font: 800 clamp(11.5px, 3.4vw, 13.5px)/1.2 'Unbounded', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-copy small { font-size: 8px; letter-spacing: .12em; }
  .header-nav { display: none; }
  .header-contact-popover { display: none; }
  .header-contacts-bar { display: none; }
  .header-cta { display: none; }
  .burger { display: flex; width: 38px; height: 38px; padding: 8px; flex-shrink: 0; }

  /* Hero section on mobile */
  .hero-copy {
    padding-top: calc(env(safe-area-inset-top, 0px) + 84px);
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 32px;
    min-height: auto;
    justify-content: center;
  }
  .hero-visual { padding:4px 16px 54px; }
  .hero-demo-label { margin-left:18px; }
  .hero-phone { height:min(64vh,520px); border-radius:36px; padding:8px; }
  .hero-phone-screen { inset:8px; border-radius:29px; }
  .hero-phone-video, .hero-phone-shine { border-radius:inherit; }
  .hero-phone-shine { inset:0; }
  .hero-phone-speaker { top:14px; height:15px; }
  .hero-demo-caption { margin-top:14px; }
  .hero-eyebrow-row { gap: 8px; margin-bottom: 12px; margin-top: 4px; }
  .eyebrow { font-size: 9px; letter-spacing: .14em; }
  .hero-badge-pill { font-size: 8.5px; padding: 3px 9px; }
  h1 { font: 700 clamp(30px, 8.4vw, 42px)/1.06 'Unbounded', sans-serif; margin: 0 0 14px; }
  h2 { font: 600 clamp(26px, 7.5vw, 36px)/1.08 'Unbounded', sans-serif; }
  .hero-lead { font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; }
  .hero-features { gap: 8px; margin-bottom: 20px; }
  .hf-item { font-size: 12px; gap: 8px; }
  .hf-check { width: 18px; height: 18px; font-size: 10px; }

  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px; }
  .hero-actions .btn { width: 100%; max-width: 100%; min-height: 48px; font-size: 14px; padding: 12px 18px; justify-content: center; border-radius: 12px; }
  .connect-btns { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .connect-btns .btn { width: 100%; max-width: 100%; min-height: 48px; padding: 12px 18px; border-radius: 12px; }
  .hero-actions .btn,
  .connect-btns .btn { justify-content: space-between; }

  .hero-stats { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; margin-top: 0; }
  .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 8px; padding-right: 0; }
  .hero-stat:last-child { border-bottom: none; padding-bottom: 0; }
  .hero-stat strong { font-size: 22px; }
  .hero-stat > span { font-size: 10.5px; }

  /* Product showcase rows on mobile */
  .psc-grid { gap: 16px; }
  .psc-row, .psc-row-reverse {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }
  .psc-row-reverse .psc-row-img { order: 1; }
  .psc-row-reverse .psc-row-body { order: 2; }
  .psc-row-img { min-height: 220px; height: 220px; }
  .psc-row-body { padding: 24px 20px; }
  .psc-row-btn { width: 100%; justify-content: center; }

  /* Equal compact padding across ALL sections on mobile */
  .prod-showcase-section,
  .nomen-section,
  .calciprill-section,
  .products-section,
  .adv-section,
  .process-section,
  .contacts-section {
    padding: 44px 0 !important;
  }

  .prod-showcase-head,
  .nomen-head,
  .section-head,
  .adv-head,
  .proc-head,
  .contacts-head {
    margin-bottom: 22px !important;
  }
  .proc-head { align-items: end; }
  .proc-desc { align-self: end; margin-bottom: 0; }

  /* Nomenclature section on mobile */
  .nomen-grid { grid-template-columns: 1fr; gap: 14px; }
  .nomen-card { padding: 22px 18px; border-radius: 16px; }

  /* Calciprill section on mobile */
  .calciprill-grid { grid-template-columns: 1fr; gap: 28px; }
  .cp-left h2 { font-size: clamp(24px, 6.8vw, 34px); margin-bottom: 14px; }
  .cp-lead { font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
  .cp-metrics-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
  .cp-metric-box { padding: 14px 16px; border-radius: 14px; }
  .cp-metric-box strong { font-size: 19px; line-height: 1.15; margin-bottom: 4px; }
  .cp-metric-box p { font-size: 12px; line-height: 1.45; }
  .cp-actions { flex-direction: column; width: 100%; gap: 10px; }
  .cp-actions .btn { width: 100%; justify-content: center; }
  .cp-card-preview { max-width: 100%; border-radius: 18px; }

  /* Slider on mobile */
  .slider-controls { gap: 8px; }
  .sl-btn { width: 44px; height: 44px; }
  .sl-btn svg { width: 20px; height: 20px; }
  .cat-tabs {
    width: calc(100vw - 32px);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 20px;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { padding: 9px 15px; font-size: 13px; }
  .cat-tab b { min-width: 22px; height: 22px; font-size: 10px; }
  .prod-card { width: min(85vw, 320px); }
  
  /* Advantages & Process on mobile */
  .adv-grid { grid-template-columns: 1fr; gap: 12px; }
  .adv-card { min-height: auto; padding: 24px 20px; }
  .adv-big-icon-fgis { width: 34px; height: 34px; margin-right: 4px; }
  .adv-big-icon-fgis svg { width: 34px; height: 34px; }
  
  .proc-list { grid-template-columns: 1fr; gap: 12px; }
  .proc-item { min-height: auto; padding: 24px 20px; border-radius: 16px; }
  
  .connect-inner { min-height: auto; }
  .connect-left { padding: 44px 16px 36px !important; gap: 32px; }
  .connect-right { padding: 32px 16px 44px !important; gap: 20px; }
  .connect-copy > p { margin-bottom: 20px; }
  .phone-orbit-1 { width: 260px; height: 260px; }
  .phone-orbit-2 { width: 180px; height: 180px; }

  .contacts-cards { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; padding-bottom: 36px; gap: 28px; }
  .footer-brand { grid-column: auto; }
  .site-footer { padding-top: 48px; }
  .qr-img-wrap img { width: 100% !important; max-width: 240px; }
  .shell { width: min(100% - 32px, 1360px); }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(28px, 8.2vw, 36px); }
  h2 { font-size: clamp(24px, 7vw, 32px); }
  .hero-copy {
    padding-top: calc(env(safe-area-inset-top, 0px) + 78px);
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 24px;
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
  }
  .hero-actions .btn { font-size: 13.5px; min-height: 48px; padding: 12px 18px; border-radius: 12px; }
  .connect-left { padding: 40px 14px 30px !important; }
  .connect-right { padding: 28px 14px 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}