/* ---------- Motion & premium touches ---------- */
html, body { overflow-x: clip; }
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Scroll reveal: only hidden while JavaScript runs (motion.js adds .js-reveal), so content never disappears. */
.js-reveal [data-reveal] { opacity: 0; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.js-reveal [data-reveal="up"] { transform: translate3d(0, 46px, 0); }
.js-reveal [data-reveal="down"] { transform: translate3d(0, -46px, 0); }
.js-reveal [data-reveal="left"] { transform: translate3d(-70px, 0, 0); }
.js-reveal [data-reveal="right"] { transform: translate3d(70px, 0, 0); }
.js-reveal [data-reveal="zoom"] { transform: translate3d(0, 24px, 0) scale(.92); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* Section labels get a small brand-coloured accent line */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); flex: none; }

/* Home hero: slowly drifting light orbs over a fading grid */
.hero-home { min-height: min(94vh, 920px); display: flex; align-items: center; padding-top: clamp(96px, 12vw, 140px); }
.hero-home .hero-inner { max-width: 940px; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 65% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 65% 35%, #000 25%, transparent 75%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: orb-float 18s ease-in-out infinite alternate; }
.orb-1 { width: 560px; height: 560px; top: -160px; right: -100px; background: radial-gradient(circle, rgba(240, 20, 30, .55), transparent 65%); }
.orb-2 { width: 460px; height: 460px; bottom: -200px; right: 24%; background: radial-gradient(circle, rgba(83, 208, 255, .32), transparent 65%); animation-duration: 23s; }
.orb-3 { width: 320px; height: 320px; top: 34%; left: -140px; background: radial-gradient(circle, rgba(255, 110, 60, .22), transparent 65%); animation-duration: 27s; }
@keyframes orb-float { to { transform: translate3d(-70px, 50px, 0) scale(1.15); } }

.hero-stats { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 56px); margin: 44px 0 0; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .1); }
.hero-stats div { display: flex; flex-direction: column-reverse; }
.hero-stats dd {
  margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1;
  background: linear-gradient(120deg, #fff, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats dt { color: var(--muted); font-size: .88rem; margin-top: 4px; }

/* Scrolling band of services under the hero */
.marquee {
  overflow: hidden; padding: 20px 0; border-block: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(240, 20, 30, .08), rgba(83, 208, 255, .06)), #0d0d13;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: flex; align-items: center; white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: rgba(255, 255, 255, .88); }
.marquee i { font-style: normal; color: var(--accent); margin: 0 30px; font-size: .75em; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Pointer-following light on cards */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 20, 30, .14), rgba(83, 208, 255, .05) 40%, transparent 65%);
}
.spot:hover::after { opacity: 1; }

/* Balanced headline wrapping */
.section-head h2, .hero h1 { text-wrap: balance; }
.lead { text-wrap: pretty; }

@media (max-width: 560px) {
  .hero-home { min-height: auto; }
  .hero-stats { gap: 18px 28px; }
  .hero-stats div { flex: 1 1 40%; }
  .js-reveal [data-reveal="left"] { transform: translate3d(-36px, 0, 0); }
  .js-reveal [data-reveal="right"] { transform: translate3d(36px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .marquee-track { animation: none !important; }
}