/* variant: grid. Drifting masked grid, pointer-lit lines, cursor glow cards, floating logo emblem, shimmer buttons. */
.hero-fx::before,.hero-fx::after{content:"";position:absolute;inset:0;will-change:transform;background-image:linear-gradient(rgb(var(--hero-fg-rgb) / .075) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--hero-fg-rgb) / .075) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 60% 35%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 65% at 60% 35%,#000 15%,transparent 72%)}
.hero-fx::after{background-image:linear-gradient(rgb(var(--accent-rgb) / .55) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--accent-rgb) / .55) 1px,transparent 1px);-webkit-mask-image:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),#000,transparent 75%);mask-image:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),#000,transparent 75%);opacity:0;transition:opacity .4s}
.hero-fx.lit::after{opacity:1}
.hero .eyebrow::before,.contact-panel .eyebrow::before{width:.55rem;height:.55rem;border-radius:50%;opacity:1;background:var(--hero-accent);box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .25)}

/* buttons: brand gradient + light sweep */
.btn-accent,.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-accent::after,.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .5) 50%,transparent 70%);transform:translateX(-120%)}
.btn-accent{box-shadow:0 12px 30px -12px rgb(var(--accent-rgb) / .8),inset 0 1px 0 rgb(255 255 255 / .35)}

/* cards: glow that follows the cursor + lit border */
.card,.step,.ccard{position:relative;isolation:isolate}
.card::before,.step::before,.ccard::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0),rgb(var(--brand-rgb) / .12),transparent 50%);pointer-events:none}
.card::after,.step::after{content:"";position:absolute;inset:0;height:auto;transform:none;border-radius:inherit;padding:1.5px;opacity:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0),var(--accent),rgb(var(--brand-rgb) / .5) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .35s}
.ccard::before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0),rgb(var(--accent-rgb) / .14),transparent 55%)}
.card:hover::before,.card:hover::after,.step:hover::before,.step:hover::after,.ccard:hover::before{opacity:1}
.card:hover{transform:none}
.chip{border-radius:calc(var(--radius) * .7);box-shadow:inset 0 0 0 1px rgb(var(--brand-rgb) / .15)}
.step-num{border-radius:calc(var(--radius) * .7);box-shadow:0 8px 18px -8px var(--primary)}

/* stats: glass strip with gradient edge */
.stats{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,rgb(var(--brand-rgb) / .45),var(--border) 40%,rgb(var(--accent-rgb) / .55)) border-box;border:1.5px solid transparent}

/* section dividers: glowing hairline + dot field */
.section--alt{position:relative;isolation:isolate;border:0}
.section--alt::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgb(var(--brand-rgb) / .16) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(100deg,#000,transparent 55%);mask-image:linear-gradient(100deg,#000,transparent 55%)}
.section--alt::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--brand-rgb) / .5),var(--accent),rgb(var(--brand-rgb) / .5),transparent)}
.eyebrow::before{background:linear-gradient(90deg,var(--accent),currentColor)}

/* emblem: glowing disc with a turning dashed ring */
.emblem{box-shadow:0 30px 60px -30px rgb(0 0 0 / .7),0 0 0 1px rgb(var(--accent-rgb) / .2),0 0 90px -10px rgb(var(--accent-rgb) / .5)}
.emblem-ring{border-style:dashed;border-width:1.5px}

@media (prefers-reduced-motion:no-preference){
  .hero-fx{animation:none}
  .hero-fx::before{animation:grid-drift 12s ease-in-out infinite alternate}
  .hero .eyebrow::before,.contact-panel .eyebrow::before{animation:pulse 1.6s ease-in-out infinite alternate}
  .btn-accent::after,.btn-primary::after{animation:sweep 6s var(--ease) infinite}
  .emblem:not(.emblem--wide) .emblem-ring{animation:spin 40s linear infinite}
  @media (hover:hover){
    .btn-accent:hover::after,.btn-primary:hover::after{animation:sweep .8s var(--ease)}
    .card:hover,.step:hover{transform:translateY(-4px)}
    .card:hover .chip{transform:rotate(-6deg) scale(1.06)}
    .chip{transition:transform .35s var(--ease)}
  }
}
@keyframes grid-drift{to{transform:translate3d(28px,28px,0)}}
@keyframes pulse{to{opacity:.3;transform:scale(.7)}}
@keyframes sweep{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
@keyframes spin{to{transform:rotate(1turn)}}

/* ghost buttons: solid, readable fill (no see-through grid behind the label) */
.btn-ghost{background:rgb(var(--hero-fg-rgb) / .2);background:color-mix(in srgb,var(--hero-fg) 16%,var(--hero-bg));border-color:rgb(var(--hero-fg-rgb) / .55)}
.btn-ghost:hover{background:rgb(var(--hero-fg-rgb) / .3);background:color-mix(in srgb,var(--hero-fg) 26%,var(--hero-bg));border-color:var(--hero-fg)}
/* grid only where the hero has no picture of its own */
.hero.has-image .hero-fx{display:none}