:root {
  --tech-accent: #b99cff;
  --tech-accent-rgb: 185, 156, 255;
  --tech-mint: #69e6c1;
  --tech-ease: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { color: #09070e; background: #c9b3ff; }

body.tech-ready { --tech-pointer-x: 50vw; --tech-pointer-y: 20vh; }
body.tech-ready::after {
  content: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .42;
  background: radial-gradient(440px circle at var(--tech-pointer-x) var(--tech-pointer-y), rgba(var(--tech-accent-rgb), .055), transparent 72%);
  mix-blend-mode: screen;
}

:where(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid rgba(var(--tech-accent-rgb), .9) !important;
  outline-offset: 3px;
}

:where(button, .primary, .nav-cta, [role="button"]) {
  --tech-button-x: 50%;
  --tech-button-y: 50%;
}
:where(button, .primary, .nav-cta, [role="button"]):not(:disabled) {
  transition: transform .22s var(--tech-ease), border-color .22s ease, background-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
:where(button, .primary, .nav-cta, [role="button"]):not(:disabled):active {
  transform: translateY(1px) scale(.985) !important;
}
.tech-magnetic { position: relative; isolation: isolate; overflow: hidden; }
.tech-magnetic::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(150px circle at var(--tech-button-x) var(--tech-button-y), rgba(255,255,255,.24), transparent 68%);
  transition: opacity .24s ease;
}
.tech-magnetic:hover::after { opacity: 1; }

.tech-reveal {
  opacity: 0;
  transform: translateY(22px) scale(.992);
  transition: opacity .72s var(--tech-ease), transform .72s var(--tech-ease);
  transition-delay: var(--tech-delay, 0ms);
}
.tech-reveal.tech-visible { opacity: 1; transform: none; }

.tech-surface {
  --tech-surface-x: 50%;
  --tech-surface-y: 50%;
  position: relative;
}
.tech-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(300px circle at var(--tech-surface-x) var(--tech-surface-y), rgba(var(--tech-accent-rgb), .105), transparent 72%);
  transition: opacity .3s ease;
}
.tech-surface:hover::before { opacity: 1; }
.tech-surface > * { position: relative; z-index: 1; }

.tech-scroll-meter {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10000;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #7458ea, #c1a8ff 58%, #72e8c5);
  box-shadow: 0 0 18px rgba(var(--tech-accent-rgb), .62);
}

@media (hover:none), (pointer:coarse) {
  .tech-magnetic::after, .tech-surface::before { display:none; }
}

* { scrollbar-width: thin; scrollbar-color: rgba(var(--tech-accent-rgb), .34) rgba(255,255,255,.03); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(255,255,255,.025); }
*::-webkit-scrollbar-thumb { background: rgba(var(--tech-accent-rgb), .28); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.tech-ready::after, .tech-scroll-meter { display: none; }
  .tech-reveal { opacity: 1; transform: none; transition: none; }
  .tech-magnetic::after, .tech-surface::before { display: none; }
}