* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-lime) #050505;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-lime), var(--brand-blue));
  border: 2px solid #050505;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-lime));
}


body {
  font-family: var(--font-body);
  color: var(--text-main);
  background:
    radial-gradient(900px 520px at 82% 8%, rgba(80, 111, 253, 0.05), transparent 62%),
    radial-gradient(720px 460px at 18% 4%, rgba(206, 240, 10, 0.06), transparent 58%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.section {
  padding: 9rem 0;
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 600;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem 1.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  isolation: isolate;
  overflow: hidden;
  font-size: 0.95rem;
  color: var(--cta-base-color, inherit);
  background: transparent;
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  will-change: transform;
}

.btn::before,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.btn::before {
  z-index: -2;
  background: var(--cta-base-bg, transparent);
}

.btn::after {
  z-index: -1;
  background: var(--cta-hover-bg, var(--brand-blue));
  transform: translateX(-101%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn.is-cta-hovering {
  color: var(--cta-hover-color, #fff);
}

.btn.is-cta-hovering::after {
  transform: translateX(0);
}

.btn.is-cta-leaving {
  color: var(--cta-base-color, inherit);
}

.btn.is-cta-leaving::after {
  transform: translateX(-101%);
}

.btn-primary {
  --cta-base-bg: linear-gradient(110deg, var(--brand-lime), #d8ff4a);
  --cta-base-color: var(--brand-black);
  --cta-hover-color: #fff;
  box-shadow: 0 12px 28px rgba(206, 240, 10, 0.24);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(206, 240, 10, 0.32);
}

.btn-ghost {
  --cta-base-bg: rgba(255, 255, 255, 0.9);
  --cta-base-color: var(--text-main);
  --cta-hover-color: #fff;
  border-color: var(--line);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2);
}

.magnetic {
  transform-style: preserve-3d;
}

.scramble-word,
.subtitle-word {
  display: inline-block;
}

.scramble-word {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-particle {
    display: none;
  }
}