/* ── HERO LOGO ANIMATION (reused unchanged from the live aiflo.co.uk) ── */
.hero-logo-combined{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:2rem;position:relative;z-index:2}
.hero-logo-text{font-size:clamp(72px,14vw,120px);font-weight:800;letter-spacing:-0.04em;line-height:1;color:#f1f2f4;animation:logoFloat 4s ease-in-out infinite;position:relative}
.hero-logo-text .white-part{color:#f1f2f4;display:inline-block;animation:whiteFade 4s ease-in-out infinite}
.hero-logo-text .green-part{background:linear-gradient(90deg,#4ade80,#22d3ee,#a3e635,#4ade80,#22d3ee);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 4s ease-in-out infinite}
.hero-logo-halo{width:220px;height:16px;background:radial-gradient(ellipse at center,rgba(74,222,128,0.55) 0%,transparent 70%);border-radius:50%;animation:haloAnim 4s ease-in-out infinite}
.hero-logo-particles{position:absolute;inset:0;pointer-events:none;overflow:visible}
.hero-logo-particles span{position:absolute;border-radius:50%;background:#4ade80;opacity:0;animation:particleRise 2.6s ease-in infinite}
.hero-logo-particles span:nth-child(1){width:3px;height:3px;left:54%;animation-delay:0.0s}
.hero-logo-particles span:nth-child(2){width:2px;height:2px;left:60%;animation-delay:0.4s}
.hero-logo-particles span:nth-child(3){width:3px;height:3px;left:70%;animation-delay:0.8s}
.hero-logo-particles span:nth-child(4){width:2px;height:2px;left:79%;animation-delay:1.2s}
.hero-logo-particles span:nth-child(5){width:3px;height:3px;left:65%;animation-delay:1.6s}
.hero-logo-particles span:nth-child(6){width:2px;height:2px;left:75%;animation-delay:2.0s}
.hero-logo-particles span:nth-child(7){width:3px;height:3px;left:57%;animation-delay:2.4s}
@keyframes logoFloat{0%,100%{transform:translateY(0px)}50%{transform:translateY(-12px)}}
@keyframes whiteFade{0%,100%{opacity:1}50%{opacity:0.75}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes haloAnim{0%,100%{transform:scaleX(1);opacity:0.7}50%{transform:scaleX(0.55);opacity:0.25}}
@keyframes particleRise{0%{opacity:0;transform:translateY(0)}20%{opacity:0.9}80%{opacity:0.3}100%{opacity:0;transform:translateY(-90px)}}
/* added: calmer on phones, and no motion for people who ask for less */
@media (max-width:640px){.hero-logo-combined{margin-bottom:1.75rem;gap:14px}.hero-logo-halo{width:160px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-logo-text,.hero-logo-text .white-part,.hero-logo-text .green-part,.hero-logo-halo{animation:none}
  .hero-logo-particles{display:none}
}