*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: var(--bg-deepest);
  color: var(--text-primary);
  font-family: var(--font-jp);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
a {
  font: inherit;
}

button {
  border: 0;
}

.lp {
  position: relative;
  width: 100%;
  max-width: var(--lp-max);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent-blue) 22%, var(--transparent)), var(--transparent) 58%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent-magenta) 18%, var(--transparent)), var(--transparent) 60%),
    var(--bg-base);
  isolation: isolate;
}

.lp__grid,
.lp__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lp__grid {
  z-index: -2;
  background-image:
    linear-gradient(to right, var(--grid-soft) var(--line), var(--transparent) var(--line)),
    linear-gradient(to bottom, var(--grid-soft) var(--line), var(--transparent) var(--line));
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, var(--bg-deepest), color-mix(in srgb, var(--bg-deepest) 28%, var(--transparent)) 62%, var(--transparent));
}

.lp__glow {
  z-index: -1;
  background:
    radial-gradient(circle at 24% 12%, color-mix(in srgb, var(--accent-cyan) 20%, var(--transparent)), var(--transparent) 26%),
    radial-gradient(circle at 82% 38%, color-mix(in srgb, var(--accent-magenta) 18%, var(--transparent)), var(--transparent) 28%),
    radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--accent-blue) 14%, var(--transparent)), var(--transparent) 34%);
  filter: blur(2px);
}

.section {
  position: relative;
  padding: 64px 20px;
  overflow: hidden;
}

.section > * {
  position: relative;
  z-index: 1;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.section-title {
  margin: 0 0 28px;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.1;
  text-align: center;
}

.holo-text,
.section-title,
.hero-line--holo,
.pricing-price__amount {
  background: linear-gradient(110deg, var(--accent-cyan), var(--accent-blue), var(--accent-magenta), var(--accent-pink), var(--accent-gold), var(--accent-cyan));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--transparent);
  filter: drop-shadow(0 0 8px var(--glow-cyan));
}

@media (min-width: 900px) {
  body {
    background:
      radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--accent-blue) 16%, var(--transparent)), var(--transparent) 30%),
      var(--bg-deepest);
  }
}

@media (min-width: 1024px) {
  body {
    position: relative;
    background:
      radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--accent-blue) 16%, var(--transparent)), var(--transparent) 30%),
      linear-gradient(to right, color-mix(in srgb, var(--accent-cyan) 7%, var(--transparent)) var(--line), var(--transparent) var(--line)),
      linear-gradient(to bottom, color-mix(in srgb, var(--accent-cyan) 5%, var(--transparent)) var(--line), var(--transparent) var(--line)),
      var(--bg-deepest);
    background-size: auto, 42px 42px, 42px 42px, auto;
  }

  body::before,
  body::after {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: max(190px, calc((100vw - var(--lp-max)) / 2 - 34px));
    padding: 36px 22px;
    color: color-mix(in srgb, var(--accent-cyan) 56%, var(--transparent));
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    line-height: 1.8;
    pointer-events: none;
    text-orientation: mixed;
    text-shadow: 0 0 12px var(--glow-cyan);
    writing-mode: vertical-rl;
    background:
      radial-gradient(circle at 28px 34px, var(--accent-cyan) 0 4px, var(--transparent) 5px),
      radial-gradient(circle at 28px 34px, var(--glow-cyan) 0 12px, var(--transparent) 24px),
      linear-gradient(to right, color-mix(in srgb, var(--accent-cyan) 14%, var(--transparent)) var(--line), var(--transparent) var(--line)),
      linear-gradient(to bottom, color-mix(in srgb, var(--accent-cyan) 10%, var(--transparent)) var(--line), var(--transparent) var(--line)),
      linear-gradient(135deg, var(--transparent) 0 18px, color-mix(in srgb, var(--accent-cyan) 34%, var(--transparent)) 18px 19px, var(--transparent) 19px 100%),
      linear-gradient(225deg, var(--transparent) 0 18px, color-mix(in srgb, var(--accent-magenta) 28%, var(--transparent)) 18px 19px, var(--transparent) 19px 100%);
    background-position: 0 0, 0 0, 0 0, 0 0, 24px 118px, calc(100% - 24px) 62%;
    background-size: auto, auto, 32px 32px, 32px 32px, 142px 94px, 158px 110px;
    border-inline: var(--line) solid color-mix(in srgb, var(--accent-cyan) 18%, var(--transparent));
    box-shadow:
      inset 0 0 32px color-mix(in srgb, var(--glow-cyan) 20%, var(--transparent)),
      0 0 34px color-mix(in srgb, var(--glow-magenta) 14%, var(--transparent));
    opacity: 0.64;
    animation: sideStatusPulse 3s ease-in-out infinite;
  }

  body::before {
    left: 0;
    content: "MONITORING SYSTEM ACTIVE :: SCANNING AMAZON :: 24/7";
  }

  body::after {
    right: 0;
    content: "TREND SIGNAL LOCKED :: SELLER DELTA :: PRICE SURGE";
    transform: scaleX(-1);
  }

  .lp {
    z-index: 1;
    border-inline: var(--line) solid color-mix(in srgb, var(--accent-cyan) 16%, var(--transparent));
    box-shadow:
      0 0 58px color-mix(in srgb, var(--glow-cyan) 18%, var(--transparent)),
      0 0 120px color-mix(in srgb, var(--glow-magenta) 12%, var(--transparent));
  }
}