/* Shared visual accents. Effects never hide content or change layout. */
.home-page .hero, .refresh-hero { position: relative; isolation: isolate; }
.home-page .hero::before, .refresh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 25% 30%, #9d7cf228, transparent 50%), radial-gradient(ellipse at 78% 60%, #507ae51c, transparent 48%);
  background-size: 130% 130%; mask-image: radial-gradient(ellipse, #000 30%, transparent 75%);
  animation: studio-aurora 14s ease-in-out infinite alternate;
}
.refresh-hero::before { background: radial-gradient(ellipse at 20% 40%, #52d5b11c, transparent 50%), radial-gradient(ellipse at 82% 20%, #4b8ad522, transparent 48%); }
.home-page .hero h1 span, .refresh-hero h1 span {
  background: linear-gradient(110deg, #a78ff2 10%, #ddc5ff 45%, #7ea7ef 75%, #a78ff2);
  background-size: 230% 100%; color: transparent; background-clip: text; -webkit-background-clip: text;
  animation: studio-spectrum 10s ease-in-out infinite alternate;
}
.refresh-hero h1 span { background-image: linear-gradient(110deg, #a0e5d4 10%, #d3fff0 45%, #74b7d8 75%, #a0e5d4); }
.home-page .app-card, .home-page .small-app, .refresh-feature, .refresh-hero-screen { position: relative; isolation: isolate; }
.home-page .app-card::after, .home-page .small-app::after, .refresh-feature::after, .refresh-hero-screen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(380px circle at var(--glow-x, 50%) var(--glow-y, 50%), #ad97ef16, transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.refresh-feature::after, .refresh-hero-screen::after { background: radial-gradient(380px circle at var(--glow-x, 50%) var(--glow-y, 50%), #9be2cf18, transparent 65%); }
.home-page .app-card:hover::after, .home-page .small-app:hover::after, .refresh-feature:hover::after, .refresh-hero-screen:hover::after { opacity: 1; }
.refresh-feature { transition: border-color .3s, box-shadow .3s; }
.refresh-feature:hover { border-color: #a0e5d455; box-shadow: 0 14px 36px #0003; }
.refresh-hero-screen { box-shadow: 0 20px 80px #53b89d0d, 0 20px 60px #0003; }
.refresh-hero-copy .button, .home-page .contact .button { transition: transform .25s, box-shadow .25s; }
.refresh-hero-copy .button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px #a0e5d42a; }
.home-page .contact .button:hover { transform: translateY(-2px); box-shadow: 0 8px 30px #a78ff22a; }
.refresh-tabs button { transition: background .25s, color .25s, box-shadow .25s; }
.refresh-tabs button.is-active { box-shadow: 0 0 22px #a0e5d419; }
@keyframes studio-aurora { from { opacity: .45; background-position: 0% 0%; } to { opacity: 1; background-position: 100% 80%; } }
@keyframes studio-spectrum { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .home-page .hero::before, .refresh-hero::before, .home-page .hero h1 span, .refresh-hero h1 span { animation: none; }
  .refresh-feature, .refresh-tabs button, .refresh-hero-copy .button, .home-page .contact .button { transition: none; }
  .refresh-hero-copy .button:hover, .home-page .contact .button:hover { transform: none; }
  .home-page .app-card::after, .home-page .small-app::after, .refresh-feature::after, .refresh-hero-screen::after { display: none; }
}