/* variant: spotlight. Dark stage (render.py builds a dark palette from the brand colour), cursor spotlight,
   magnetic buttons, 3D tilt cards, glowing borders, light-beam hero. */
body{background:radial-gradient(1200px 600px at 50% -200px,rgb(var(--brand-rgb) / .22),transparent 70%) no-repeat,var(--bg)}
.section--alt{background:transparent;border:0}
.section{position:relative}
.section+.section::before,.stats-wrap+.section::before{content:"";position:absolute;left:50%;top:0;width:min(40rem,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .7),transparent);box-shadow:0 0 24px 2px rgb(var(--accent-rgb) / .35)}

/* hero: centred stage with a sweeping light beam */
.hero{padding-block:clamp(5rem,2rem + 10vw,10rem)}
.hero.has-stats{padding-bottom:calc(clamp(5rem,2rem + 10vw,10rem) + 3.5rem)}
.hero-media img{opacity:.5}
.hero--overlay-left .hero-copy{margin-inline:auto;text-align:center}
.hero--overlay-left .hero-sub{margin-inline:auto}
.hero--overlay-left .hero-actions,.hero--overlay-left .hero-area{justify-content:center}
.hero--overlay-left.has-image::before{background:radial-gradient(ellipse 70% 80% at 50% 45%,rgb(var(--hero-bg-rgb) / .78),rgb(var(--hero-bg-rgb) / .96))}
.hero--overlay-left .emblem{order:-1;width:7.5rem;margin-bottom:-1rem}
.hero--overlay-left .emblem--wide{width:16rem;padding:1rem 1.25rem}
@media (min-width:60em){.hero--overlay-left.has-emblem .hero-inner{grid-template-columns:none}}
.hero .emblem{display:grid}
.hero-fx{inset:0;background:conic-gradient(from 180deg at 50% -10%,transparent 160deg,rgb(var(--accent-rgb) / .2) 172deg,rgb(var(--brand-rgb) / .42) 180deg,rgb(var(--accent-rgb) / .2) 188deg,transparent 200deg);-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);transform-origin:50% 0}
.hero h1 .hl{text-shadow:0 0 42px rgb(var(--accent-rgb) / .55)}
.eyebrow::before{background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* buttons: glowing, magnetic (script) */
.btn-accent{box-shadow:0 0 0 1px rgb(255 255 255 / .12) inset,0 10px 40px -8px rgb(var(--accent-rgb) / .75)}
.btn-accent:hover{box-shadow:0 0 0 1px rgb(255 255 255 / .2) inset,0 14px 50px -6px rgb(var(--accent-rgb) / .95)}
.btn-ghost{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* glow-border cards that tilt toward the cursor */
.card,.step,.ccard,.stats,.contact-panel{position:relative;isolation:isolate}
.section--alt .card,.section--alt .step,.card,.step{background:linear-gradient(180deg,rgb(255 255 255 / .04),transparent 40%),var(--card);border-color:rgb(255 255 255 / .09);box-shadow:0 1px 0 rgb(255 255 255 / .06) inset,0 30px 60px -30px rgb(0 0 0 / .8)}
.card::after,.step::after,.ccard::after,.shot-frame::after{content:"";position:absolute;inset:0;z-index:2;height:auto;transform:none;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%),rgb(var(--accent-rgb) / .55),rgb(var(--brand-rgb) / .3) 45%,transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .3s}
.card::before,.step::before{content:none}
.card:hover::after,.step:hover::after,.ccard:hover::after,.shot-frame:hover::after,.card:hover::before,.step:hover::before{opacity:1}
.shot-frame{position:relative}
.chip{background:rgb(var(--accent-rgb) / .12);color:var(--hero-accent);box-shadow:0 0 0 1px rgb(var(--accent-rgb) / .3) inset,0 0 24px -6px rgb(var(--accent-rgb) / .6)}
.step-num{background:transparent;color:var(--hero-accent);border:1px solid rgb(var(--accent-rgb) / .6);box-shadow:0 0 22px -4px rgb(var(--accent-rgb) / .7),inset 0 0 12px rgb(var(--accent-rgb) / .25)}
.stats{background:var(--card);border-color:rgb(255 255 255 / .1)}
.stat-lead{color:var(--hero-fg)}
.about-media::before{background:radial-gradient(closest-side,rgb(var(--accent-rgb) / .4),transparent);inset:-8% 0}
.shot-ph{background-color:var(--card)}
.ph-label{background:var(--card)}

/* contact + emblem: slowly orbiting conic glow border */
.contact-panel::after,.emblem::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from 200deg,transparent 0 70%,var(--accent) 85%,rgb(var(--brand-rgb)) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.contact-panel{border:1px solid rgb(255 255 255 / .08)}
.emblem-ring{display:none}

/* the cursor spotlight (element added by the script) */
.spot{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .35s;background-image:linear-gradient(rgb(var(--accent-rgb) / .16) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--accent-rgb) / .16) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(200px circle at var(--mx,-500px) var(--my,-500px),#000,transparent 100%);mask-image:radial-gradient(200px circle at var(--mx,-500px) var(--my,-500px),#000,transparent 100%)}
.spot.on{opacity:1}

@media (prefers-reduced-motion:no-preference){
  :root{--enter:blur-in}
  .io .reveal{transform:perspective(800px) translateZ(-60px) translateY(1rem);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
  .hero-fx{animation:beam 9s ease-in-out infinite alternate}
  .contact-panel::after{animation:breathe 3.5s ease-in-out infinite alternate}
  .emblem:not(.emblem--wide)::after{animation:orbit 8s linear infinite}
  .emblem--wide::after{animation:breathe 3.5s ease-in-out infinite alternate}
  @media (hover:hover) and (pointer:fine){
    .card,.step,.ccard{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease),box-shadow .3s}
    .card:hover,.step:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(10px)}
    .btn{transition:transform .2s var(--ease),box-shadow .25s}
  }
}
@keyframes blur-in{from{opacity:0;transform:perspective(800px) translateZ(-80px)}}
@keyframes beam{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes orbit{to{transform:rotate(1turn)}}
@keyframes breathe{from{opacity:.25}}