/* Shared structure and motion for the light presentation. The original light palette stays intact. */

.hero-title-secondary {
  position: relative;
  padding-bottom: 23px;
}

.hero-title-secondary::after {
  animation: light-route 1.3s .45s cubic-bezier(.2,.6,.3,1) forwards;
  background: linear-gradient(var(--orange),var(--orange)) left center / calc(100% - 3px) 1px no-repeat;
  bottom: 0;
  clip-path: inset(0 100% 0 0);
  content: '';
  height: 12px;
  left: 0;
  position: absolute;
  width: 100%;
}

.hero-title-secondary::before {
  animation: light-arrow 1.3s .45s ease forwards;
  border-right: 1px solid var(--orange);
  border-top: 1px solid var(--orange);
  bottom: 2px;
  content: '';
  height: 8px;
  opacity: 0;
  position: absolute;
  right: 2px;
  transform: translateX(-28px) rotate(45deg);
  width: 8px;
}

@keyframes light-route { to { clip-path: inset(0 0 0 0); } }
@keyframes light-arrow { to { opacity: 1; transform: translateX(0) rotate(45deg); } }

.hero-actions .text-link {
  margin-left: -14px;
  padding: 12px 14px;
  transition: background .25s,color .25s,border-color .25s;
}

.hero-actions .text-link:hover,
.hero-actions .text-link:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.proof-strip > div {
  border-radius: 3px;
  transform-origin: center;
  transition: transform .3s ease,background .3s ease,box-shadow .3s ease;
}

@media (hover:hover) {
  .proof-strip > div:hover {
    background: var(--green-light);
    box-shadow: 0 12px 34px rgba(23,55,45,.08);
    transform: scale(1.055);
    z-index: 1;
  }
}

.stat {
  overflow: hidden;
  position: relative;
}

.stat b {
  position: relative;
  transform: scale(var(--stat-scale,1)) translateY(var(--stat-y,0));
  transform-origin: left center;
  transition: transform .16s linear;
  z-index: 1;
}

.stat.visible b {
  transform: scale(var(--stat-scale,1)) translateY(var(--stat-y,0));
}

.stat::after {
  background: linear-gradient(90deg,var(--green),var(--orange));
  bottom: 0;
  content: '';
  height: 3px;
  left: 0;
  opacity: .82;
  position: absolute;
  transform: scaleX(var(--stat-progress,.12));
  transform-origin: left;
  transition: transform .18s linear;
  width: 100%;
}

.stat span + span {
  margin-top: 5px;
}

.product-photo {
  aspect-ratio: 4 / 5;
}

.product-photo img {
  object-fit: cover;
}

.product-ai-note.ai-note-static {
  color: var(--muted);
  font-size: 12px;
  margin: 16px 0 0;
  position: static;
}

.client-card svg {
  height: 62px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  width: 62px;
}

.operations-visual {
  aspect-ratio: 2.6;
  border-top: 3px solid var(--orange);
  margin: 62px 0 0;
  overflow: hidden;
  position: relative;
}

.operations-visual::after {
  background: var(--green);
  content: '';
  height: 34%;
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}

.operations-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.timeline article::after {
  background: linear-gradient(90deg,var(--orange),var(--green));
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: -1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.2,.6,.3,1);
  width: 100%;
}

.timeline article.visible::after { transform: scaleX(1); }
.timeline article:nth-child(2)::after { transition-delay: .1s; }
.timeline article:nth-child(3)::after { transition-delay: .2s; }
.timeline article:nth-child(4)::after { transition-delay: .3s; }
.timeline article:nth-child(5)::after { transition-delay: .4s; }
.timeline article:nth-child(6)::after { transition-delay: .5s; }

.timeline article b {
  display: inline-block;
  transition: color .3s,transform .3s;
}

.timeline article:hover b {
  color: var(--orange);
  transform: translateY(-3px);
}

@media (max-width:760px) {
  .hero-title-secondary { padding-bottom: 20px; }
  .operations-visual { aspect-ratio: 1.3; margin-top: 35px; }
  .operations-visual img { object-position: 60% center; }
  .client-card svg { height: 56px; width: 56px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-title-secondary::after { clip-path: none; }
  .hero-title-secondary::before { opacity: 1; transform: rotate(45deg); }
  .proof-strip > div:hover,
  .timeline article:hover b,
  .stat b,
  .stat.visible b { transform: none; }
  .stat::after,
  .timeline article::after { transform: scaleX(1); }
}

/* Motion pass 2: active, still readable and reduced-motion aware. */
.product-photo { aspect-ratio: 4 / 3; }

.motion-enhanced .motion-item {
  opacity: 0;
  transform: translate3d(0,24px,0) scale(.975);
  transition: opacity .7s ease,transform .8s cubic-bezier(.2,.75,.25,1);
  transition-delay: var(--motion-delay,0ms);
}

.motion-enhanced .motion-item.motion-in {
  opacity: 1;
  transform: none;
}

.product-photo img,
.operations-visual img,
.infra-photo > img,
.coop-visual img {
  --media-scale: 1.035;
  --media-y: 0px;
  transform: translate3d(0,var(--media-y),0) scale(var(--media-scale));
  transition: transform .28s linear,filter .65s ease;
  will-change: transform;
}

.product-card:hover .product-photo img,
.product-card:focus-visible .product-photo img {
  transform: translate3d(0,var(--media-y),0) scale(calc(var(--media-scale) + .035));
}

.stat b {
  text-shadow: 0 0 calc(18px * var(--stat-glow,0)) rgba(53,123,96,.3);
}

.section-heading .kicker::after {
  background: linear-gradient(90deg,var(--orange),var(--green));
  content: '';
  display: block;
  height: 2px;
  margin-top: 10px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.2,.75,.25,1) .2s;
  width: 42px;
}

.section-heading.visible .kicker::after { transform: scaleX(1); }

@keyframes motion-route {
  0% { transform: translate(-7px,7px) rotate(-10deg); opacity: .25; }
  65% { transform: translate(3px,-3px) rotate(7deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes motion-link-drift {
  0%,70%,100% { transform: translate(0,0); }
  82% { transform: translate(5px,5px); }
  90% { transform: translate(2px,2px); }
}

@keyframes motion-icon-settle {
  0% { transform: translateY(13px) rotate(-9deg) scale(.85); opacity: .25; }
  60% { transform: translateY(-4px) rotate(4deg) scale(1.08); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes motion-icon-hover {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-6px) rotate(3deg); }
}

@keyframes motion-number-pop {
  0% { transform: scale(.82); }
  65% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.motion-in .route-icon,
.infra-content li.motion-in .route-arrow {
  animation: motion-route .75s cubic-bezier(.2,.75,.25,1) var(--motion-delay,0ms) both;
}

.text-link span { animation: motion-link-drift 3.4s ease-in-out 1.5s infinite; }
.client-card.motion-in svg { animation: motion-icon-settle .85s cubic-bezier(.2,.75,.25,1) var(--motion-delay,0ms) both; }
.big-number.motion-in b { animation: motion-number-pop .85s cubic-bezier(.2,.75,.25,1) .12s both; }

@media (hover:hover) {
  .client-card:hover svg { animation: motion-icon-hover .65s ease-in-out infinite alternate; }
  .infra-content li:hover .route-arrow { transform: translate(5px,-5px) rotate(8deg); }
}

@media (max-width:760px) {
  .product-photo { aspect-ratio: 4 / 3; }
  .motion-enhanced .motion-item { transform: translate3d(0,15px,0) scale(.985); }
}

@media (prefers-reduced-motion:reduce) {
  .motion-enhanced .motion-item,
  .motion-enhanced .motion-item.motion-in { opacity: 1; transform: none; transition: none; }
  .product-photo img,
  .operations-visual img,
  .infra-photo > img,
  .coop-visual img,
  .product-card:hover .product-photo img { transform: none; transition: none; }
  .motion-in .route-icon,
  .infra-content li.motion-in .route-arrow,
  .text-link span,
  .client-card.motion-in svg,
  .client-card:hover svg,
  .big-number.motion-in b { animation: none; }
  .section-heading .kicker::after { transform: scaleX(1); transition: none; }
}