:root {
  --ux-cursor: rgba(0, 245, 213, 0.28);
  --ux-cursor-core: rgba(18, 179, 255, 0.45);
  --ux-ease: 280ms cubic-bezier(.2,.8,.2,1);
}

body {
  --pointer-x: 50vw;
  --pointer-y: 50vh;
}

body::selection {
  background: color-mix(in srgb, var(--accent, #00f5d5) 45%, transparent);
}

.ai-upgrade-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(180px, 25vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, var(--ux-cursor-core), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(18px);
  transform: translate3d(calc(var(--pointer-x) - 50%), calc(var(--pointer-y) - 50%), 0);
  opacity: .42;
  transition: opacity var(--ux-ease);
}

.ai-upgrade-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, var(--accent, #00f5d5), var(--accent-2, #12b3ff), #7b61ff);
  z-index: 120;
  box-shadow: 0 0 28px color-mix(in srgb, var(--accent, #00f5d5) 60%, transparent);
}

.ai-interactive,
.card,
.price-card,
.info-card,
.intro-card,
.flow-node,
.faq-item,
.roadmap-card,
.feature-card,
.tile,
.panel,
.widget,
section article {
  transition: transform var(--ux-ease), box-shadow var(--ux-ease), border-color var(--ux-ease);
  will-change: transform;
}

.ai-interactive:hover,
.card:hover,
.price-card:hover,
.info-card:hover,
.intro-card:hover,
.flow-node:hover,
.faq-item:hover,
.roadmap-card:hover,
.feature-card:hover,
.tile:hover,
.panel:hover,
.widget:hover,
section article:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 28px rgba(0, 245, 213, 0.16);
  border-color: color-mix(in srgb, var(--accent, #00f5d5) 45%, rgba(255,255,255,.2));
}

button,
.btn,
a.btn,
[role='button'] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

button::after,
.btn::after,
a.btn::after,
[role='button']::after {
  content: '';
  position: absolute;
  inset: -120% auto auto -20%;
  width: 44%;
  aspect-ratio: 1 / 2.8;
  background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.28), rgba(255,255,255,0.0));
  transform: translateX(-220%) rotate(28deg);
  transition: transform .8s ease;
  pointer-events: none;
}

button:hover::after,
.btn:hover::after,
a.btn:hover::after,
[role='button']:hover::after {
  transform: translateX(440%) rotate(28deg);
}

[data-reveal-upgrade] {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

[data-reveal-upgrade].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ai-upgrade-cursor,
  .ai-upgrade-progress,
  [data-reveal-upgrade],
  .ai-interactive,
  .card,
  .price-card,
  .info-card,
  .intro-card,
  .flow-node,
  .faq-item,
  .roadmap-card,
  .feature-card,
  .tile,
  .panel,
  .widget,
  section article {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}