:root {
  --mint: #54e6d4;
  --carbon: #101516;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--mint);
  color: var(--carbon);
}

body {
  background: var(--carbon);
}

section[id],
#phone {
  scroll-margin-top: 6rem;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(84, 230, 212, 0.55);
}

.marquee {
  animation: marquee 22s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.feature-card {
  background: linear-gradient(145deg, rgba(84, 230, 212, 0.07), rgba(84, 230, 212, 0.015));
}

.price-card {
  position: relative;
  isolation: isolate;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.price-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 1.55rem;
  opacity: 0;
  background: linear-gradient(110deg, var(--mint), transparent 42%, var(--mint));
  background-size: 220% 100%;
  transition: opacity 0.35s;
  animation: shine 3s linear infinite paused;
}

.price-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
  box-shadow: 0 20px 70px rgba(84, 230, 212, 0.18);
}

.price-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.book-button {
  background: linear-gradient(100deg, var(--mint), #d9fffa, var(--mint), #2bb8a8, var(--mint));
  background-size: 300% 100%;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  to {
    background-position: 260% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee,
  .book-button,
  .price-card::before {
    animation: none;
  }
}
