/* AVORA motion system. All content remains readable without JavaScript. */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --read-progress: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: #4f7d58;
  transform: scaleX(var(--read-progress));
  transform-origin: left;
  z-index: 90;
  pointer-events: none;
}
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 100px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  transition: box-shadow 0.3s ease;
}
.header.is-scrolled {
  box-shadow: 0 6px 30px #07100d0d;
}
.header .brand-logo {
  height: 94px;
}
.mobile-nav {
  position: sticky;
  top: 100px;
  z-index: 49;
}
.hero {
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  width: min(64vw, 860px);
  aspect-ratio: 1;
  right: -12%;
  top: 2%;
  border-radius: 50%;
  background: radial-gradient(circle, #4f7d582e 0%, #07100d00 66%);
  transform: translate3d(var(--glow-x, 0px), var(--glow-y, 0px), 0);
  z-index: -1;
  pointer-events: none;
}
.hero h1 .hero-line {
  display: block;
  overflow: hidden;
  color: #f5f5f0;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero h1 .hero-line > span {
  display: block;
  color: inherit;
}
.hero h1 .accent-line {
  color: #8fb996;
}
.hero-grid {
  perspective: 1100px;
}
.hero-copy {
  translate: 0 var(--copy-y, 0px);
}
.hero-art {
  transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) rotateX(var(--art-rx, 0deg))
    rotateY(var(--art-ry, 0deg)) scale(var(--art-scale, 1));
  transform-style: preserve-3d;
}
.hero-art::before,
.hero-art::after {
  content: "";
  position: absolute;
  inset: 6% -1%;
  border: 1px solid #8fb99630;
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-26deg) scaleY(0.67);
  z-index: -1;
}
.hero-art::after {
  inset: 0 9%;
  border-style: dashed;
  border-color: #8fb99620;
  transform: rotate(30deg) scaleX(0.8);
}
.hero-art .label-one {
  translate: var(--label-x, 0px) var(--label-y, 0px);
}
.hero-art .label-two {
  translate: calc(var(--label-x, 0px) * -0.7) calc(var(--label-y, 0px) * -0.7);
}
.hero-art .label-three {
  translate: calc(var(--label-x, 0px) * 0.5) calc(var(--label-y, 0px) * -0.5);
}
[data-motion="on"] .hero-line > span {
  animation: avora-title 1.3s var(--motion-ease) both;
  animation-delay: var(--intro-delay, 0s);
}
[data-motion="on"] .hero-line:nth-child(2) > span {
  animation-delay: calc(var(--intro-delay, 0s) + 0.14s);
}
[data-motion="on"] .hero-line:nth-child(3) > span {
  animation-delay: calc(var(--intro-delay, 0s) + 0.28s);
}
.ticker {
  position: relative;
  z-index: 2;
  padding: 21px 0;
}
.ticker > .ticker-track {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  width: max-content;
  animation: avora-marquee 32s linear infinite;
}
.ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 44px;
  padding-right: 44px;
}
.ticker-group i {
  animation: avora-spin 16s linear infinite;
}
.reveal {
  opacity: 1;
  transform: none;
}
[data-motion="on"] .reveal {
  transition:
    opacity 0.8s var(--motion-ease),
    transform 0.9s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-motion="on"] .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
}
[data-motion="on"] .reveal:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}
.guide,
.channel-map,
.flow-visual,
.crm-visual {
  position: relative;
  transform-style: preserve-3d;
}
[data-motion="on"] .tilt-surface.is-visible,
[data-motion="on"] .tilt-surface:not(.reveal) {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.45s var(--motion-ease),
    border-color 0.25s ease;
}
.guide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--shine-x, 50%) var(--shine-y, 0%),
    #8fb99618,
    transparent 72%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
[data-motion="on"] .guide:hover::after {
  opacity: 1;
}
.button,
.nav-cta {
  translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
  transition:
    translate 0.3s var(--motion-ease),
    transform 0.3s var(--motion-ease),
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.primary:hover {
  box-shadow: 0 8px 30px #8fb99629;
}
.button > span,
.nav-cta > span,
.text-link > span {
  display: inline-block;
  transition: transform 0.3s var(--motion-ease);
}
[data-motion="on"] .button:hover > span,
[data-motion="on"] .nav-cta:hover > span {
  transform: translate(3px, -3px);
}
.header nav a {
  position: relative;
  padding: 5px 0;
}
.header nav a::after {
  content: "";
  position: absolute;
  height: 1px;
  background: #4f7d58;
  inset: auto 0 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--motion-ease);
}
.header nav a:hover::after,
.header nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
[data-motion="on"] .service-panel:not([hidden]) {
  animation: avora-panel 0.55s var(--motion-ease) both;
}
.steps {
  position: relative;
  padding-top: 35px;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: #c4d6c8;
}
.steps::after {
  background: #4f7d58;
  transform: scaleX(var(--method-progress, 0));
  transform-origin: left;
}
.contact h2 em {
  display: inline-block;
  position: relative;
}
.contact h2 em::after {
  content: "";
  position: absolute;
  height: 3px;
  inset: auto 0 0;
  background: #285634;
  transform: scaleX(var(--contact-progress, 0));
  transform-origin: left;
}
@keyframes avora-title {
  from {
    transform: translate3d(0, 105%, 0) rotate(3deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes avora-marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes avora-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes avora-panel {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 1000px) {
  .header {
    gap: 16px;
  }
}
@media (max-width: 760px) {
  .header {
    height: 82px;
  }
  .header .brand-logo {
    height: 79px;
  }
  .mobile-nav {
    top: 82px;
  }
  .hero h1 {
    line-height: 1.16;
  }
  .hero-art::before {
    inset: 14% 2%;
  }
  .hero-art::after {
    inset: 6% 10%;
  }
  .ticker-group {
    gap: 28px;
    padding-right: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) {
    scroll-behavior: auto;
  }
  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    animation: none !important;
    transition: none !important;
  }
  html:not([data-motion="on"]) :is(.hero-copy, .hero-art, .art-label, .button, .nav-cta) {
    translate: none !important;
  }
  html:not([data-motion="on"]) :is(.hero-art, .reveal, .tilt-surface),
  html:not([data-motion="on"]) .hero::before {
    transform: none !important;
  }
  html:not([data-motion="on"]) .reveal {
    opacity: 1 !important;
  }
}