/**
 * AAEF 2035 Premium Template
 * File: hero.v0.0.60.css
 * Version: 0.0.60 | Build Date: 2026-09-29
 * Author: AAEF project / existing contributors
 * License: As supplied by the project owner; see third-party notices.
 */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--topbar-height) - var(--mainbar-height));
  overflow: hidden;
  background: var(--color-green-975);
  color: var(--color-white);
}

.hero__media {
  position: absolute;
  z-index: -5;
  inset: 0;
  overflow: hidden;
  background: #0b382d;
}

.hero__media picture,
.hero__media img {
  width: 100%;
  height: 100%;
}

.hero__media img {
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.035);
  animation: hero-landscape-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

.hero__shade {
  position: absolute;
  z-index: -4;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 33, 24, .91) 0%, rgba(2, 39, 27, .74) 31%, rgba(3, 42, 29, .28) 58%, rgba(2, 28, 21, .12) 76%, rgba(2, 25, 18, .24) 100%),
    linear-gradient(180deg, rgba(2, 27, 20, .14) 0%, rgba(2, 35, 25, .04) 35%, rgba(2, 32, 23, .8) 100%);
}

.hero__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 79% 20%, rgba(255, 203, 116, .16), transparent 28%),
    radial-gradient(circle at 19% 72%, rgba(103, 184, 98, .15), transparent 33%);
  mix-blend-mode: screen;
  opacity: .72;
  animation: hero-light-breathe 7s ease-in-out infinite alternate;
}

.hero__ambient {
  position: absolute;
  z-index: -3;
  border-radius: 50%;
  pointer-events: none;
  opacity: .38;
}

.hero__ambient--one {
  width: 28rem;
  height: 28rem;
  left: -15rem;
  top: 20%;
  background: radial-gradient(circle, rgba(98, 194, 95, .18), rgba(98, 194, 95, 0) 67%);
  animation: hero-ambient-float 12s ease-in-out infinite alternate;
}

.hero__ambient--two {
  width: 22rem;
  height: 22rem;
  right: 6%;
  top: 3%;
  background: radial-gradient(circle, rgba(249, 192, 99, .15), rgba(249, 192, 99, 0) 68%);
  animation: hero-ambient-float 15s ease-in-out 1.7s infinite alternate-reverse;
}

.hero__inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  padding-top: clamp(3.3rem, 7vh, 5.8rem);
  padding-bottom: 1.55rem;
}

.hero__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
}

.hero__copy {
  max-width: 47rem;
  animation: hero-copy-enter .85s cubic-bezier(.2, .8, .2, 1) both;
}

.hero__eyebrow {
  margin-bottom: 1rem;
  font-size: .83rem;
  font-weight: 650;
  letter-spacing: .31em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.hero__title {
  font-size: clamp(4.25rem, 6.7vw, 6.45rem);
  line-height: .84;
  font-weight: 800;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .18);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  margin-top: .08em;
  color: #aee33d;
  text-shadow: 0 0 24px rgba(160, 226, 57, .13);
}

.hero__tagline {
  margin-top: 1.2rem;
  font-size: 1.18rem;
  line-height: 1.55;
  font-weight: 550;
  letter-spacing: -.014em;
  color: rgba(255, 255, 255, .97);
}

.hero__tagline-separator {
  padding-inline: .38em;
  color: var(--color-lime-300);
}

.hero__description {
  max-width: 44rem;
  margin-top: .83rem;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
}

.hero__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-height: 3.35rem;
  margin-top: 1.55rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: linear-gradient(105deg, #b8ec38 0%, #9bd83d 48%, #b9ef45 100%);
  color: #113523;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(220, 255, 148, .28), 0 9px 27px rgba(119, 191, 44, .2);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}

.hero__cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35% -15%;
  background: linear-gradient(105deg, transparent 31%, rgba(255, 255, 255, .34) 46%, transparent 62%);
  transform: translateX(-110%);
  animation: hero-cta-shine 5.4s ease-in-out 1.4s infinite;
}

.hero__cta::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -5px;
  border: 1px solid rgba(183, 236, 56, .28);
  border-radius: inherit;
  animation: hero-cta-pulse 2.9s ease-out infinite;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 0 0 1px rgba(226, 255, 169, .38), 0 13px 34px rgba(119, 191, 44, .3), 0 0 30px rgba(164, 225, 62, .15);
}

.hero__cta-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-base);
}

.hero__cta:hover .hero__cta-icon {
  transform: translateY(3px);
}

.hero__origin-note {
  position: relative;
  max-width: 11rem;
  margin-top: .9rem;
  padding-top: .95rem;
  font-size: .75rem;
  line-height: 1.62;
  font-weight: 650;
  letter-spacing: .27em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .77);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  animation: hero-note-enter 1s .2s cubic-bezier(.2, .8, .2, 1) both;
}

.hero__origin-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--color-lime-300), rgba(167, 220, 96, 0));
}

.hero__journey {
  margin-top: auto;
  padding-top: 2.4rem;
}

.hero-chain__viewport {
  position: relative;
  padding: 1.15rem .15rem .25rem;
}

.hero-chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  min-height: 7.4rem;
}

.hero-chain__rail {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-chain__rail--tablet,
.hero-chain__rail--mobile {
  display: none;
}

.hero-chain__rail-path,
.hero-chain__rail-glow,
.hero-chain__trail-glow,
.hero-chain__trail-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero-chain__rail-path {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1.6;
  opacity: .72;
}

.hero-chain__rail-glow {
  stroke: rgba(0, 0, 0, .2);
  stroke-width: 5.8;
  opacity: .24;
}

.hero-chain__trail-glow,
.hero-chain__trail-path {
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
}

.hero-chain__trail-glow {
  stroke: var(--rail-gradient);
  stroke-width: 9;
  opacity: .18;
}

.hero-chain__trail-path {
  stroke: var(--rail-gradient);
  stroke-width: 3.9;
  opacity: 1;
}

.hero-chain__traveller {
  color: var(--traveller-color, #dfff69);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(220, 255, 103, .62)) drop-shadow(0 1px 1px rgba(2, 35, 24, .5));
}

.hero-chain__traveller-arrow {
  fill: currentColor;
  stroke: rgba(6, 58, 40, .7);
  stroke-width: 1.15;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero-chain__item {
  --stage-color: #a7dc60;
  --stage-glow: rgba(167, 220, 96, .28);
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .72rem;
  min-width: 0;
  transform: translateY(var(--chain-y, 0));
}

 .hero-chain__item:nth-of-type(2),
.hero-chain__item:nth-of-type(3),
.hero-chain__item:nth-of-type(4),
.hero-chain__item:nth-of-type(5),
.hero-chain__item:nth-of-type(6) { --chain-y: 0px; }

.hero-chain__item--production { --stage-color: #7fd04c; --stage-glow: rgba(96, 212, 82, .34); --route-delay: 0s; }
.hero-chain__item--processing { --stage-color: #f4a13b; --stage-glow: rgba(244, 161, 59, .32); --route-delay: 1.4s; }
.hero-chain__item--innovation { --stage-color: #c1df39; --stage-glow: rgba(193, 223, 57, .31); --route-delay: 2.8s; }
.hero-chain__item--brand { --stage-color: #f04e32; --stage-glow: rgba(240, 78, 50, .3); --route-delay: 4.2s; }
.hero-chain__item--market { --stage-color: #ef504f; --stage-glow: rgba(239, 80, 79, .31); --route-delay: 5.6s; }
.hero-chain__item--investment { --stage-color: #f3cc61; --stage-glow: rgba(243, 204, 97, .3); --route-delay: 7s; }
.hero-chain__item--europe { --stage-color: #4b9ee8; --stage-glow: rgba(75, 158, 232, .34); --route-delay: 8.25s; }

.hero-chain__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--stage-color);
  border-radius: 50%;
  background: rgba(4, 45, 32, .84);
  color: var(--stage-color);
  box-shadow:
    0 0 0 5px rgba(2, 34, 24, .46),
    0 0 0 6px color-mix(in srgb, var(--stage-color) 22%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: transform var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.hero-chain__node::before,
.hero-chain__node::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-chain__node::before {
  inset: -8px;
  border: 1px solid color-mix(in srgb, var(--stage-color) 46%, transparent);
  opacity: .38;
}

.hero-chain__node::after {
  inset: -10px;
  border: 2px solid color-mix(in srgb, var(--stage-color) 68%, transparent);
  opacity: 0;
  animation: hero-node-route-pulse 8.4s ease-out var(--route-delay, 0s) infinite;
}

.hero-chain__icon {
  display: block;
  width: 69%;
  height: 69%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  color: var(--stage-color);
  transform: translateZ(0);
  transform-origin: center;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.hero-chain__icon--europe {
  width: 86%;
  height: 86%;
  color: #ffd84f;
}

.hero-chain__item:hover .hero-chain__node {
  transform: translateY(-4px);
  background: rgba(5, 60, 40, .96);
  box-shadow:
    0 0 0 5px rgba(2, 34, 24, .52),
    0 0 0 8px color-mix(in srgb, var(--stage-color) 28%, transparent),
    0 0 22px color-mix(in srgb, var(--stage-color) 36%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.hero-chain__item:hover .hero-chain__node::before {
  opacity: .76;
}

.hero-chain__item:hover .hero-chain__node::after {
  animation: hero-node-hover-pulse 1.1s cubic-bezier(.2, .7, .2, 1) infinite;
}

.hero-chain__item:hover .hero-chain__icon {
  transform: scale(1.07);
}

.hero-chain__label {
  font-size: .75rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .91);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.hero-chain__item--production .hero-chain__label { color: #a5e77b; }
.hero-chain__item--processing .hero-chain__label { color: #ffc06e; }
.hero-chain__item--innovation .hero-chain__label { color: #e1ec95; }
.hero-chain__item--brand .hero-chain__label { color: #ff8f7b; }
.hero-chain__item--market .hero-chain__label { color: #ff9291; }
.hero-chain__item--investment .hero-chain__label { color: #ffe49c; }
.hero-chain__item--europe .hero-chain__label { color: #88c8ff; }

.hero__footer {
  display: flex;
  align-items: end;
  justify-content: center;
  margin-top: 1.15rem;
  min-height: 2.2rem;
}

.hero__scroll {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

.hero__scroll-mouse {
  position: relative;
  width: 1.05rem;
  height: 1.6rem;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: var(--radius-pill);
}

.hero__scroll-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .32rem;
  width: 2px;
  height: .34rem;
  border-radius: 2px;
  background: var(--color-lime-300);
  transform: translateX(-50%);
  animation: hero-scroll-dot 1.8s ease-in-out infinite;
}


.anchor-target {
  scroll-margin-top: calc(var(--topbar-height) + var(--mainbar-height) + 18px);
}

@keyframes hero-landscape-drift {
  0% { transform: scale(1.035) translate3d(0, 0, 0); }
  100% { transform: scale(1.075) translate3d(-.7%, .45%, 0); }
}

@keyframes hero-light-breathe {
  0% { opacity: .45; }
  100% { opacity: .82; }
}

@keyframes hero-ambient-float {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2rem, -1.2rem, 0) scale(1.08); }
}

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-note-enter {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-cta-shine {
  0%, 62% { transform: translateX(-110%); }
  84%, 100% { transform: translateX(115%); }
}

@keyframes hero-cta-pulse {
  0% { opacity: .72; transform: scale(.98); }
  70%, 100% { opacity: 0; transform: scale(1.09); }
}

@keyframes hero-node-route-pulse {
  0%, 100% { opacity: 0; transform: scale(.88); }
  1.5% { opacity: 1; transform: scale(.96); }
  4.5% { opacity: .68; transform: scale(1.16); }
  8.5% { opacity: .22; transform: scale(1.34); }
  11% { opacity: 0; transform: scale(1.45); }
}

@keyframes hero-node-hover-pulse {
  0% { opacity: .88; transform: scale(.9); }
  75%, 100% { opacity: 0; transform: scale(1.36); }
}

@keyframes hero-scroll-dot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  75%, 100% { opacity: 0; transform: translate(-50%, .55rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__shade::after,
  .hero__ambient,
  .hero__cta::before,
  .hero__cta::after,
  .hero__scroll-mouse::after,
  .hero__copy,
  .hero__origin-note,
  .hero-chain__node::after {
    animation: none !important;
  }

  .hero-chain__traveller,
  .hero-chain__trail-glow,
  .hero-chain__trail-path {
    display: none;
  }

  .hero__media img {
    transform: scale(1.035);
  }

  .hero__copy,
  .hero__origin-note {
    opacity: 1;
    transform: none;
  }
}