:root {
  --bg: #020204;
  --panel: rgba(7, 7, 10, 0.82);
  --panel-strong: rgba(12, 12, 17, 0.94);
  --line: rgba(255, 255, 255, 0.14);
  --line-hot: rgba(255, 26, 48, 0.74);
  --text: #ffffff;
  --muted: #b7bccb;
  --red: #f30620;
  --red-hot: #ff334c;
  --red-deep: #78000c;
  --green: #73ffb3;
  --shadow: rgba(0, 0, 0, 0.82);
  color-scheme: dark;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.075), transparent 18rem),
    radial-gradient(circle at 18% 18%, rgba(243, 6, 32, 0.28), transparent 32rem),
    radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.075), transparent 24rem),
    linear-gradient(145deg, #080811 0%, #020204 58%, #080106 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -24%;
  z-index: 0;
  pointer-events: none;
}

body::before {
  opacity: 0.72;
  background:
    conic-gradient(from 220deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.10) 24deg, rgba(243, 6, 32, 0.31) 74deg, transparent 132deg),
    radial-gradient(ellipse at 48% 50%, rgba(255, 255, 255, 0.12), transparent 18%),
    radial-gradient(ellipse at 52% 57%, rgba(243, 6, 32, 0.40), transparent 31%);
  filter: blur(36px);
  animation: atmosphereShift 14s ease-in-out infinite;
}

body::after {
  opacity: 0.18;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.36), transparent 1px),
    radial-gradient(circle at 70% 30%, rgba(243, 6, 32, 0.52), transparent 1px);
  background-size: 128px 128px, 188px 188px;
  mask-image: radial-gradient(circle at 50% 50%, black 0 56%, transparent 78%);
  animation: particleSheet 36s linear infinite;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.scene-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shader-scene {
  opacity: 1;
  mix-blend-mode: screen;
}

.fx-layer {
  opacity: 0.92;
}

.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.conversion-stage {
  position: relative;
  width: min(900px, 100%);
  min-height: min(720px, calc(100vh - 44px));
  display: grid;
  place-items: center;
  isolation: isolate;
}

.eclipse-disc,
.floor-haze,
.light-rail {
  position: absolute;
  pointer-events: none;
}

.eclipse-disc {
  z-index: 1;
  left: 50%;
  top: 45%;
  width: min(760px, 92vw);
  height: min(760px, 92vw);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 46%, rgba(255, 255, 255, 0.08), transparent 19%),
    radial-gradient(circle, rgba(243, 6, 32, 0.14) 0 26%, rgba(4, 4, 8, 0.92) 37%, transparent 64%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.94),
    0 0 120px rgba(243, 6, 32, 0.25);
  filter: blur(0.2px);
  opacity: 0.88;
  transform: translate(-50%, -50%);
  animation: eclipseBreathe 7s ease-in-out infinite;
}

.floor-haze {
  z-index: 1;
  left: 50%;
  top: 72%;
  width: min(820px, 96vw);
  height: 230px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 20%),
    radial-gradient(circle at 45% 52%, rgba(243, 6, 32, 0.52), transparent 48%);
  filter: blur(25px);
  opacity: 0.82;
  transform: translate(-50%, -50%) scaleY(0.72);
  animation: floorBreath 5.8s ease-in-out infinite;
}

.light-rail {
  z-index: 2;
  width: 1px;
  height: min(720px, 92vh);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.34), rgba(243, 6, 32, 0.40), transparent);
  box-shadow: 0 0 34px rgba(243, 6, 32, 0.32);
  opacity: 0.54;
  transform-origin: center;
}

.rail-a {
  left: 18%;
  top: -4%;
  transform: rotate(25deg);
  animation: railSlide 8s ease-in-out infinite;
}

.rail-b {
  right: 18%;
  top: -8%;
  opacity: 0.42;
  transform: rotate(22deg);
  animation: railSlide 9.5s ease-in-out infinite -2s;
}

.rail-c {
  right: 31%;
  top: 2%;
  opacity: 0.30;
  transform: rotate(20deg);
  animation: railSlide 10.5s ease-in-out infinite -4s;
}

.hero-card {
  --glow-x: 50%;
  --glow-y: 16%;
  position: relative;
  z-index: 4;
  width: min(378px, calc(100vw - 34px));
  overflow: hidden;
  display: grid;
  justify-items: center;
  padding: 27px;
  border: 1px solid transparent;
  border-radius: 34px;
  text-align: center;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.18), transparent 24%) padding-box,
    radial-gradient(circle at 50% 112%, rgba(243, 6, 32, 0.42), transparent 48%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.020) 42%, rgba(255, 255, 255, 0.055)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 36, 58, 0.96) 32%, rgba(255, 255, 255, 0.08) 58%, rgba(243, 6, 32, 0.76)) border-box;
  box-shadow:
    0 54px 150px var(--shadow),
    0 0 132px rgba(243, 6, 32, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(30px) saturate(1.28);
  -webkit-backdrop-filter: blur(30px) saturate(1.28);
  transition: border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  animation: cardPulse 6s ease-in-out infinite;
}

.hero-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 60px 178px rgba(0, 0, 0, 0.88),
    0 0 190px rgba(243, 6, 32, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: saturate(1.06);
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 33px;
  pointer-events: none;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 36px;
  background: radial-gradient(circle at 50% 50%, rgba(243, 6, 32, 0.42), transparent 68%);
  filter: blur(22px);
  opacity: 0.92;
}

.card-noise,
.card-glare {
  position: absolute;
  pointer-events: none;
}

.card-noise {
  inset: 0;
  opacity: 0.06;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(255, 255, 255, 0.38) 3px, transparent 4px),
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, 0.18) 15px, transparent 16px);
  mix-blend-mode: screen;
}

.card-glare {
  inset: -10% -50%;
  opacity: 0;
  background: linear-gradient(112deg, transparent 0 32%, rgba(255, 255, 255, 0.26) 47%, transparent 62%);
  transform: translateX(-42%) skewX(-14deg);
  mix-blend-mode: screen;
  animation: glareSweep 5.4s ease-in-out infinite;
}

.logo-box {
  position: relative;
  z-index: 1;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 58%),
    linear-gradient(180deg, #050506, #000);
  box-shadow:
    0 28px 88px rgba(243, 6, 32, 0.42),
    0 0 42px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.logo-pulse {
  position: absolute;
  inset: -16px;
  border-radius: 36px;
  background: radial-gradient(circle, rgba(243, 6, 32, 0.30), transparent 66%);
  filter: blur(12px);
  animation: logoPulse 3.8s ease-in-out infinite;
}

.logo {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 62px;
  object-fit: contain;
}

.eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 0 0 13px;
  padding: 0 12px;
  color: #ffe8eb;
  border: 1px solid rgba(243, 6, 32, 0.56);
  border-radius: 999px;
  background: rgba(243, 6, 32, 0.13);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(115, 255, 179, 0.78);
}

h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(35px, 7vw, 50px);
  line-height: 0.94;
  letter-spacing: -0.088em;
  text-shadow: 0 18px 60px rgba(255, 255, 255, 0.20);
}

.primary-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 60px;
  margin-top: 22px;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 20px;
  background:
    radial-gradient(circle at var(--glow-x) -80%, rgba(255, 255, 255, 0.33), transparent 64%),
    linear-gradient(135deg, #ff102a, #d60018 50%, #ff455c);
  box-shadow:
    0 26px 88px rgba(243, 6, 32, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.018em;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.primary-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 34px 118px rgba(243, 6, 32, 0.68),
    0 0 52px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: saturate(1.09) brightness(1.04);
}

.primary-cta:active {
  transform: translateY(0) scale(0.99);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  padding: 12px 15px;
  color: var(--text);
  border: 1px solid rgba(243, 6, 32, 0.46);
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.94);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes atmosphereShift {
  0%, 100% {
    transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.06);
  }
}

@keyframes particleSheet {
  to {
    transform: translate3d(128px, -128px, 0);
  }
}

@keyframes eclipseBreathe {
  0%, 100% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes floorBreath {
  0%, 100% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scaleY(0.66) scaleX(0.92);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(0.78) scaleX(1.08);
  }
}

@keyframes railSlide {
  0%, 100% {
    opacity: 0.26;
    translate: 0 -24px;
  }

  50% {
    opacity: 0.66;
    translate: 0 34px;
  }
}

@keyframes cardPulse {
  0%, 100% {
    box-shadow:
      0 54px 150px var(--shadow),
      0 0 132px rgba(243, 6, 32, 0.40),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }

  50% {
    box-shadow:
      0 60px 174px rgba(0, 0, 0, 0.86),
      0 0 184px rgba(243, 6, 32, 0.52),
      inset 0 1px 0 rgba(255, 255, 255, 0.23),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }
}

@keyframes glareSweep {
  0%, 35%, 100% {
    opacity: 0;
    transform: translateX(-44%) skewX(-14deg);
  }

  50% {
    opacity: 0.58;
  }

  64% {
    opacity: 0;
    transform: translateX(44%) skewX(-14deg);
  }
}

@keyframes logoPulse {
  0%, 100% {
    opacity: 0.58;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.98;
    transform: scale(1.12);
  }
}

@media (max-width: 560px) {
  .page-shell {
    padding: 16px;
  }

  .conversion-stage {
    min-height: min(620px, calc(100vh - 32px));
  }

  .hero-card {
    width: min(360px, calc(100vw - 32px));
    padding: 24px;
    border-radius: 30px;
  }

  .logo-box {
    width: 96px;
    height: 96px;
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .primary-cta:hover {
    transform: none;
  }
}