:root{--ink:#081E2A;--footer:#051520;--orange:#F97600;--teal:#0079AA;--light:#f5f8fa;--head:#0A2B39;--copy:#44535c;--dark-muted:#9db4c0;--dark-copy:#cfe2ea}
html{scroll-behavior:smooth}
body{font-family:'Sora',sans-serif;color:var(--copy);background:#fff}
h1,h2,h3,h4{color:var(--head);font-weight:700}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.kicker{font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);font-weight:600}
.kicker--teal{color:var(--teal)}
.btn-primary{display:inline-block;background:var(--orange);color:var(--ink);font-weight:700;padding:.8rem 1.6rem;border-radius:.5rem;transition:filter .2s}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{display:inline-block;border:1px solid #2a4a5c;color:var(--dark-copy);padding:.8rem 1.6rem;border-radius:.5rem}
.btn-ghost--light{border-color:var(--head);color:var(--head)}
.card-light{background:#fff;border:1px solid #e4e9ec;border-radius:.75rem}
.card-dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:.75rem}
.card-dark--hot{border-color:rgba(249,118,0,.45)}
.glow-orb{position:absolute;border-radius:9999px;pointer-events:none;background:radial-gradient(circle,rgba(249,118,0,.22),transparent 70%)}
.glow-orb--teal{background:radial-gradient(circle,rgba(0,121,170,.28),transparent 70%)}
.spine-motif rect{fill:rgba(255,255,255,.14)}
.spine-motif rect.hot{fill:var(--orange);filter:drop-shadow(0 0 8px rgba(249,118,0,.8))}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.navdrop>div{visibility:hidden;opacity:0;transition:opacity .15s}
.navdrop:hover>div,.navdrop:focus-within>div{visibility:visible;opacity:1}

/* ---- Hero ambient background (homepage only) ---- */
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.12) 1.4px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 30%,transparent 100%)}
.hero-aurora{position:absolute;width:60vw;height:60vw;max-width:900px;max-height:900px;border-radius:9999px;pointer-events:none;filter:blur(70px);opacity:.7}
.hero-aurora--1{top:-25%;left:-15%;background:radial-gradient(circle,rgba(249,118,0,.13),transparent 65%);animation:aurora-a 20s ease-in-out infinite alternate}
.hero-aurora--2{bottom:-30%;right:-15%;background:radial-gradient(circle,rgba(0,121,170,.16),transparent 65%);animation:aurora-b 26s ease-in-out infinite alternate}
@keyframes aurora-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(12vw,8vh) scale(1.15)}}
@keyframes aurora-b{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-10vw,-9vh) scale(.95)}}

/* ---- Hero motion (homepage only) ---- */
@keyframes vpulse{0%,100%{fill:rgba(255,255,255,.14);filter:none}5%{fill:var(--orange);filter:drop-shadow(0 0 10px rgba(249,118,0,.9))}12%{fill:rgba(255,255,255,.14);filter:none}}
.spine-motif--live rect{animation:vpulse 4.8s linear infinite}
.spine-motif--live rect:nth-child(12){animation-delay:0s}
.spine-motif--live rect:nth-child(11){animation-delay:.2s}
.spine-motif--live rect:nth-child(10){animation-delay:.4s}
.spine-motif--live rect:nth-child(9){animation-delay:.6s}
.spine-motif--live rect:nth-child(8){animation-delay:.8s}
.spine-motif--live rect:nth-child(7){animation-delay:1s}
.spine-motif--live rect:nth-child(6){animation-delay:1.2s}
.spine-motif--live rect:nth-child(5){animation-delay:1.4s}
.spine-motif--live rect:nth-child(4){animation-delay:1.6s}
.spine-motif--live rect:nth-child(3){animation-delay:1.8s}
.spine-motif--live rect:nth-child(2){animation-delay:2s}
.spine-motif--live rect:nth-child(1){animation-delay:2.2s}
@keyframes orb-breathe{0%,100%{opacity:.6}50%{opacity:1}}
.hero-orb{animation:orb-breathe 6s ease-in-out infinite;transition:transform .3s ease-out;will-change:transform,opacity}
.hero-orb--2{animation-duration:8s}
.hero-spine{transition:transform .3s ease-out;will-change:transform}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
span.shimmer-grad{background-image:linear-gradient(90deg,var(--orange),#ffb066,var(--orange));background-size:200% auto;animation:shimmer 5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .spine-motif--live rect,.hero-orb,span.shimmer-grad,.hero-aurora{animation:none}
  .hero-orb,.hero-spine{transition:none;transform:none!important}
}