/* ============ ENHANCED ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 4px rgba(46,173,85,.2)}50%{box-shadow:0 0 0 8px rgba(46,173,85,.1)}}
.badge .dot{animation:pulse-dot 2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 20px rgba(46,173,85,.2)}50%{box-shadow:0 0 40px rgba(46,173,85,.4)}}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
@keyframes slide-up-fade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes draw-line{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}

/* Hero title letter-by-letter */
.hero h1{animation:slide-up-fade .8s cubic-bezier(.4,0,.2,1) both}
.hero h1 .accent{display:inline-block;animation:glow-pulse 3s ease-in-out infinite}
.hero__sub{animation:slide-up-fade .8s cubic-bezier(.4,0,.2,1) .2s both}
.hero__cta{animation:slide-up-fade .8s cubic-bezier(.4,0,.2,1) .4s both}
.hero__trust{animation:slide-up-fade .8s cubic-bezier(.4,0,.2,1) .6s both}

/* Floating decoration */
.float-anim{animation:float 4s ease-in-out infinite}
.float-anim-slow{animation:float-slow 6s ease-in-out infinite}

/* CTA section animated gradient */
.cta{background:linear-gradient(120deg,var(--green) 0%,#28a34a 50%,var(--green) 100%);background-size:200% 200%;animation:gradient-shift 8s ease infinite}

/* Button shine effect */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}
.btn--primary:hover::after{left:100%}

/* Card hover lift with shadow */
.card:hover,.system-card:hover,.hw-card:hover,.value-card:hover,.feature-item:hover,.case-card:hover,.team-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(15,31,24,.12)}

/* Pipeline highlight glow */
.pipeline__card--highlight{box-shadow:0 0 24px rgba(46,173,85,.25)}

/* Stat number pop */
.stat__num.visible{animation:bounce-in .8s cubic-bezier(.4,0,.2,1) both}

/* Section heading underline draw */
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:3px;border-radius:3px;background:var(--green);transition:width .8s cubic-bezier(.4,0,.2,1) .3s}
.section--green .section-head h2::after,.section--ink .section-head h2::after{background:var(--white)}
.section-head.visible h2::after,.section-head.reveal.visible h2::after{width:60px}

/* Nav link underline */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--green);border-radius:2px;transition:width var(--transition)}
.nav a:hover::after,.nav a.active::after{width:100%}

/* Smooth icon scale on hover */
.system-card__icon,.hw-card__icon,.value-card__icon,.feature-item__icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.system-card:hover .system-card__icon,.hw-card:hover .hw-card__icon,.value-card:hover .value-card__icon,.feature-item:hover .feature-item__icon{transform:scale(1.15) rotate(-6deg)}

/* Image placeholder shimmer */
.about-story__visual,.two-col__visual{position:relative;overflow:hidden}
.about-story__visual::before,.two-col__visual::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);background-size:200% 100%;animation:shimmer 3s infinite}

/* Timeline dot pulse */
.timeline__dot{animation:pulse-dot 2.5s infinite}

/* FAQ icon rotation */
.faq-item__q::after{display:inline-flex;align-items:center;justify-content:center;transition:transform var(--transition)}

/* Scroll indicator */
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:24px;height:40px;border:2px solid var(--gray-light);border-radius:12px;display:flex;justify-content:center;padding-top:6px}
.scroll-hint__dot{width:4px;height:8px;border-radius:2px;background:var(--gray-light);animation:scroll-dot 1.5s infinite}
@keyframes scroll-dot{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .stats__grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .stat:nth-child(4),.stat:nth-child(5){padding-top:24px}
  .pipeline{grid-template-columns:1fr}
  .systems-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .sys-tabs__card-inner{grid-template-columns:1fr;gap:32px;padding:32px}
  .system-card--featured{grid-row:auto;grid-column:1/-1;min-height:320px}
  .system-card--wide{grid-column:auto}
  .hw-grid{grid-template-columns:repeat(2,1fr)}
  .hw-card--wide{grid-column:1/-1}
  .section--species-bg .container{padding-left:24px;padding-right:24px}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
  .about-story{grid-template-columns:1fr;gap:32px}
  .about-values{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .solution-detail{grid-template-columns:1fr;gap:32px}
  .solution-detail--reverse .solution-detail__text{order:0}
  .solution-detail__text{position:static}
  .case-grid{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr;gap:32px}
  .feature-list{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr;gap:32px}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .story-spread{grid-template-columns:1fr}
  .story-spread--reverse .story-spread__media{order:0}
  .story-spread--reverse .story-spread__text{order:0}
  .story-spread__text{padding:32px 28px}
}
@media (max-width:768px){
  .section{padding:72px 0}
  .container{padding:0 24px}
  .nav,.header .btn--primary{display:none}
  .menu-toggle{display:flex}
  .nav.mobile-open{
    display:flex;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
    background:var(--white);flex-direction:column;gap:0;padding:24px;
    border-top:1px solid var(--gray-faint);z-index:99;overflow-y:auto;
  }
  .nav.mobile-open a{padding:14px 0;border-bottom:1px solid var(--gray-faint);font-size:16px;width:100%}
  .nav.mobile-open a.active::after{display:none}
  .ai-numbers{gap:32px}
  .ai-num__divider{display:none}
  .sys-tabs__nav{gap:6px}
  .sys-tabs__btn{padding:10px 16px;font-size:14px}
  .sys-tabs__card-inner{padding:24px}
  .hero{padding:80px 0 60px}
  .hero__cta{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
  .hero__cta .btn{width:100%}
  .panorama-cta{min-height:400px}
  .panorama-cta__content{min-height:400px;padding:60px 24px}
  .cta__btns{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}
  .cta__btns .btn{width:100%}
  .page-hero{padding:100px 0 60px}
  .form-row{grid-template-columns:1fr}
  .systems-grid{grid-template-columns:1fr}
  .system-card--featured{grid-column:auto;min-height:280px}
  .hw-card--wide{flex-direction:column;align-items:stretch}
  .hw-card--wide .hw-card__photo{width:100%;aspect-ratio:16/10;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
  .hw-card--wide .hw-card__body{padding:24px 26px}
}
@media (max-width:560px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .hw-grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
  .team-grid{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .contact-form{padding:28px 20px}
  .solution-detail__stat-row{grid-template-columns:1fr}
}

/* ============ PRINT ============ */
@media print{
  .header,.footer,.cta,.menu-toggle{display:none}
  .section{padding:32px 0}
  .reveal{opacity:1;transform:none}
}
