/* WARP / COSMOS — luminous surfaces, continuous motion and native vector details. */
:root {
  --bg: #030207;
  --text: #fff;
  --accent: #ad73ff;
  --glow: #8426ff;
  --muted: #beb8cd;
  --line: #c6a7ff26;
}
body {
  color: #fff;
}
h1,
h2,
h3,
.product-brand,
.pixel-title,
.plan-price,
.usage-number {
  color: #fff;
}
.hero-copy .pixel-title {
  color: #fff;
}
.product-brand .warp-mark {
  object-fit: contain;
  flex: none;
  width: 44px;
  height: 44px;
}
.button-white {
  background: #fff;
  color: #08040f;
  box-shadow: 0 0 32px #9a4dff12;
}
.button-white:hover {
  background: #fff;
  box-shadow:
    0 0 12px #cba8ff70,
    0 0 55px #8c28ff50;
}
.button-line:hover {
  background: #9b4cff17;
  border-color: #b780ffb0;
  box-shadow: 0 0 35px #8626ff22;
}
.terminal-square {
  background: #a758ff;
  box-shadow:
    0 0 8px #ae66ff,
    0 0 28px #8536ff;
}
.space-grid {
  background-image:
    linear-gradient(#b887ff17 1px, transparent 1px),
    linear-gradient(90deg, #b887ff17 1px, transparent 1px);
  background-size: 100px 100px;
  mask-image: radial-gradient(ellipse at 60% 30%, #0008, transparent 78%);
  transform: perspective(650px) rotateX(18deg) scale(1.1);
}
.nebula {
  filter: blur(55px);
  opacity: 0.8;
  will-change: transform;
  animation: nebula-drift 28s ease-in-out infinite alternate;
}
.nebula-one {
  width: 1000px;
  height: 850px;
  right: -330px;
  top: -180px;
  background:
    radial-gradient(ellipse at 35% 50%, #7712dc65, transparent 52%),
    radial-gradient(ellipse at 65% 30%, #4820df5c, transparent 65%);
}
.nebula-two {
  width: 920px;
  height: 800px;
  left: -500px;
  bottom: -260px;
  background:
    radial-gradient(ellipse at 60% 40%, #850cff77, transparent 56%),
    radial-gradient(ellipse at 40% 60%, #2020b555, transparent 65%);
  animation-delay: -12s;
}
.nebula-three {
  width: 680px;
  height: 1200px;
  top: 5%;
  left: 34%;
  transform: rotate(35deg);
  background: radial-gradient(ellipse, #5610a825, transparent 64%);
  animation-delay: -20s;
}
.galactic-dust {
  position: absolute;
  width: 170%;
  height: 260px;
  top: 48%;
  left: -30%;
  transform: rotate(-29deg);
  background:
    radial-gradient(ellipse at 15% 48%, #6d31f330, transparent 38%),
    radial-gradient(ellipse at 64% 50%, #8240ff23, transparent 55%),
    radial-gradient(ellipse at 85% 45%, #e0b8ff13, transparent 35%);
  filter: blur(28px);
}
.product-header {
  background: #08050e9c;
  border-color: #cba9ff24;
}
.product-header.is-scrolled {
  background: linear-gradient(105deg, #4e286c66, #10091cbf);
  box-shadow:
    inset 0 1px #fff2,
    0 0 55px #8426ff16,
    0 18px 60px #0008;
  border-color: #c999ff54;
}
.warp-scene {
  margin-right: -60px;
  overflow: clip;
}
.warp-scene:before {
  content: '';
  position: absolute;
  inset: 15% -3%;
  background: radial-gradient(ellipse, #8b20ed1f, transparent 68%);
  filter: blur(25px);
  pointer-events: none;
}
.blackhole-button {
  overflow: visible;
  touch-action: pan-y;
  appearance: none;
  -webkit-appearance: none;
}
.blackhole-button canvas {
  position: absolute;
  inset: 0;
}
.gravity-field {
  position: absolute;
  inset: 14% 6%;
  opacity: 0.2;
  transform: rotate(-12deg);
  pointer-events: none;
}
.is-jumping .gravity-field i {
  animation: gravity-shock 2.2s ease-out both;
}
@keyframes gravity-shock {
  from {
    opacity: 0.7;
    transform: rotateX(50deg) scale(0.8);
  }
  to {
    opacity: 0;
    transform: rotateX(50deg) scale(1.18);
  }
}
.gravity-field i {
  position: absolute;
  inset: 5% 2%;
  border: 1px solid #b066ff40;
  border-radius: 50%;
  transform: rotateX(50deg);
}
.gravity-field i:nth-child(2) {
  inset: 12% 10%;
  border-style: dashed;
  animation: gravity-turn 80s linear infinite;
}
.gravity-field i:nth-child(3) {
  inset: 20% 18%;
  border-color: #cbbaff1c;
}
.scene-cross {
  color: #ad78ff;
}
.scene-topline,
.scene-bottomline {
  color: #b7a5cf;
}
.scene-number {
  color: #fff;
}
.scene-brackets {
  color: #ba94ef;
}
.signal-strip {
  display: block;
  padding: 26px 0;
  background: linear-gradient(90deg, #2c0f4930, #07030ed9, #2b0b4c4d);
  border-color: #b163ff40;
  box-shadow: 0 0 60px #8417ff12;
  color: #fff;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.signal-track {
  display: flex;
  width: max-content;
  animation: signal-travel 34s linear infinite;
}
.signal-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 50px;
  padding-right: 50px;
}
.signal-group .space-icon {
  width: 28px;
  height: 28px;
  flex: none;
  color: #a559ff;
  filter: drop-shadow(0 0 9px #9d40ff);
  animation: rotate-star 14s linear infinite;
}
.signal-strip:hover .signal-track {
  animation-play-state: paused;
}
.space-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}
.step-glyph {
  color: #c794ff;
}
.step-card,
.plan-card,
.mission-console {
  background: linear-gradient(130deg, #1a0e2de8, #08060fef 72%);
  border-color: #b783ff30;
}
.step-card:hover,
.plan-card:hover,
.mission-console:hover {
  border-color: #bb7bff8c;
  box-shadow:
    0 15px 50px #05000870,
    0 0 38px #851aff1b;
}
.step-card:before,
.plan-card:before,
.mission-console:before {
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    #903cff30,
    transparent 72%
  );
}
.step-visual:before {
  content: '';
  position: absolute;
  width: 160px;
  height: 120px;
  background: radial-gradient(ellipse, #8e27ff32, transparent 70%);
  filter: blur(14px);
  animation: cosmic-breathe 5s ease-in-out infinite alternate;
  pointer-events: none;
}
.visual-order span {
  border-color: #bb82ff80;
  background: linear-gradient(100deg, #9228ff24, #ffffff09);
  box-shadow: 0 0 15px #8227ff17;
  animation: data-packet 3.4s ease-in-out infinite;
}
.visual-order span:nth-child(2) {
  animation-delay: -2.25s;
}
.visual-order span:nth-child(3) {
  animation-delay: -1.1s;
}
.visual-order span:after {
  background: #e0c8ff;
  box-shadow: 0 0 10px #ae55ff;
}
.visual-link i {
  border-color: #dec0ff;
  box-shadow:
    0 0 22px #992fff40,
    inset 0 0 15px #872cff18;
  animation: link-float 5s ease-in-out infinite alternate;
}
.visual-link i + i {
  animation-delay: -2.5s;
  opacity: 0.75;
}
.visual-power span {
  color: #fff;
  border-color: #bb78ff;
  background: radial-gradient(#8429dd5c, #0a0513);
  box-shadow: 0 0 25px #9334ff40;
  animation: power-beacon 3s ease-in-out infinite;
}
.visual-power span svg {
  position: relative;
  z-index: 1;
}
.mission-panel {
  border-color: #a35bff42;
  background:
    radial-gradient(ellipse at 90% 10%, #6811bf25, transparent 55%),
    linear-gradient(135deg, #130920d9, #080510ed);
  box-shadow: 0 0 95px #7320c50b;
}
.mission-panel:after {
  content: '';
  position: absolute;
  top: -60%;
  left: -90%;
  width: 70%;
  height: 220%;
  background: linear-gradient(90deg, transparent, #c786ff07, transparent);
  transform: rotate(25deg);
  animation: console-scan 13s ease-in-out infinite;
  pointer-events: none;
}
.mission-copy h2 span {
  color: #d8d0e5;
}
.console-orbit {
  animation: cosmic-float 6s ease-in-out infinite;
}
.console-orbit span {
  border-color: #b473ff65;
  box-shadow: 0 0 12px #8833f318;
}
.console-orbit span:after {
  content: '';
  position: absolute;
  left: 16%;
  top: 4%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px 3px #b84cff;
}
.console-orbit i {
  box-shadow:
    0 0 25px #ac40ff77,
    0 0 60px #820bff45;
  background: radial-gradient(circle at 30% 30%, #fff, #bc80ff 28%, #40126c 70%);
}
.plan-card.featured {
  border-color: #bb72ff80;
  background: radial-gradient(ellipse at 0 0, #842bd72c, transparent 70%), #0d0816f2;
  box-shadow: 0 0 45px #7f22ff12;
}
.plan-tag {
  color: #eee1ff;
  border-color: #a666ff66;
  background: #862be11f;
}
.plan-divider {
  position: relative;
  overflow: visible;
}
.plan-divider:after {
  content: '';
  position: absolute;
  height: 2px;
  top: 0;
  left: 0;
  width: 45px;
  background: linear-gradient(90deg, transparent, #bb74ff, #fff, transparent);
  box-shadow: 0 0 13px #a04eff;
  animation: signal-packet 4.8s ease-in-out infinite;
}
.plan-card:nth-child(2) .plan-divider:after {
  animation-delay: -1.6s;
}
.plan-card:nth-child(3) .plan-divider:after {
  animation-delay: -3.2s;
}
.faq-beacon {
  width: 190px;
  height: 160px;
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 36px;
  color: #fff;
}
.faq-beacon:before {
  content: '';
  position: absolute;
  inset: 5%;
  background: radial-gradient(ellipse, #9034ff35, transparent 68%);
  filter: blur(12px);
}
.faq-beacon i {
  position: absolute;
  inset: 12px 30px;
  border: 1px solid #a156ed60;
  border-radius: 50%;
  animation: beacon-orbit 12s linear infinite;
}
.faq-beacon i:nth-child(2) {
  animation-delay: -4s;
}
.faq-beacon i:nth-child(3) {
  animation-delay: -8s;
}
.faq-beacon .space-icon {
  filter: drop-shadow(0 0 14px #a344ff);
  animation: rotate-star 28s linear infinite;
}
.faq-beacon span {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 17px;
  left: 90px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 14px #bd80ff;
}
.final-orbit {
  min-height: 475px;
  overflow: visible;
  isolation: isolate;
}
.final-orbit > div:first-child {
  width: fit-content;
  max-width: 100%;
}
.final-orbit:before {
  content: '';
  position: absolute;
  inset: 0 -5%;
  z-index: -1;
  background: radial-gradient(ellipse at 80% 55%, #7108e630, transparent 62%);
  pointer-events: none;
}
.final-portal {
  top: 5%;
  right: 0;
  width: 460px;
  height: 370px;
  opacity: 1;
  transform: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: crosshair;
  perspective: 750px;
}
.portal-aura {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #910aff55, transparent 68%);
  filter: blur(20px);
  animation: cosmic-breathe 4s ease-in-out infinite alternate;
}
.portal-well {
  position: absolute;
  inset: 20% 15%;
  border-radius: 50%;
  transform: rotate(-32deg) rotateY(40deg);
  background: radial-gradient(ellipse, #010004 55%, #7d17d644 75%, transparent 77%);
}
.final-portal .portal-ring {
  inset: 15% 12%;
  border: 1px solid #b177ff99;
  border-radius: 50%;
  background: none;
  box-shadow:
    0 0 22px #8e23ff33,
    inset 0 0 18px #8e23ff22;
  animation: portal-precess 14s ease-in-out infinite;
}
.final-portal .portal-ring:nth-of-type(2) {
  inset: 22% 19%;
  border-width: 2px;
  border-color: #f2e6ff;
  box-shadow:
    0 0 10px #9b55ff,
    0 0 25px #8123ff7a;
  animation-delay: -4.7s;
}
.final-portal .portal-ring:nth-of-type(3) {
  inset: 29% 26%;
  border-color: #d19fffbb;
  animation-delay: -9.4s;
}
.portal-star {
  position: absolute;
  left: calc(50% - 55px);
  top: calc(50% - 55px);
  color: #fff;
  filter: drop-shadow(0 0 12px #ac53ff);
  animation: cosmic-breathe 3s ease-in-out infinite alternate;
}
.portal-flight {
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
  transform-origin: center;
  animation: flight-orbit 10s linear infinite;
  pointer-events: none;
}
.portal-flight svg {
  position: absolute;
  left: 7%;
  top: 52%;
  color: #fff;
  filter: drop-shadow(0 0 10px #ab59ff);
}
.portal-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: Onest, sans-serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: #c6a7e7;
}
.final-portal:hover .portal-aura {
  filter: blur(14px);
  background: radial-gradient(ellipse, #b339ff77, transparent 68%);
}
.final-portal.is-jumping .portal-ring {
  animation: portal-launch 1.7s ease-out both;
}
.final-portal.is-jumping .portal-ring:nth-of-type(2) {
  animation-delay: 0.12s;
}
.final-portal.is-jumping .portal-ring:nth-of-type(3) {
  animation-delay: 0.24s;
}
.final-portal.is-jumping .portal-star {
  animation: star-launch 1.8s ease-in-out both;
}
.scroll-progress span {
  background: linear-gradient(90deg, #7621ff, #b375ff, #fff);
  box-shadow: 0 0 14px #9c33ff;
}
.owner-shell .owner-chart-panel,
.subscription-card,
.info-panel {
  border-color: #b179ff33;
}
.owner-shell .chart-series-0 {
  stroke: #b56aff;
}
.owner-shell .owner-chart-legend span:before {
  background: #b56aff;
}
@keyframes signal-travel {
  to {
    transform: translateX(-50%);
  }
}
@keyframes nebula-drift {
  to {
    transform: translate(65px, -45px) rotate(14deg) scale(1.14);
  }
}
@keyframes cosmic-breathe {
  from {
    opacity: 0.55;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes cosmic-float {
  50% {
    transform: translateY(-9px);
  }
}
@keyframes data-packet {
  0%,
  100% {
    transform: translateX(-7px);
    opacity: 0.55;
  }
  50% {
    transform: translateX(13px);
    opacity: 1;
  }
}
@keyframes link-float {
  to {
    transform: translateY(-9px) rotate(-24deg);
  }
}
@keyframes power-beacon {
  50% {
    box-shadow:
      0 0 24px #a535ff55,
      0 0 0 18px #8226e911,
      0 0 0 36px #9339ff07;
  }
}
@keyframes console-scan {
  65%,
  100% {
    left: 140%;
  }
}
@keyframes signal-packet {
  0% {
    left: 0;
    opacity: 0;
  }
  15%,
  70% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 45px);
    opacity: 0;
  }
}
@keyframes beacon-orbit {
  from {
    transform: rotateZ(0deg) rotateY(55deg);
  }
  to {
    transform: rotateZ(360deg) rotateY(55deg);
  }
}
@keyframes portal-precess {
  0%,
  100% {
    transform: rotateZ(-32deg) rotateY(40deg) rotateX(15deg);
  }
  50% {
    transform: rotateZ(28deg) rotateY(-35deg) rotateX(30deg);
  }
}
@keyframes gravity-turn {
  to {
    transform: rotateX(50deg) rotateZ(360deg);
  }
}
@keyframes flight-orbit {
  from {
    transform: rotate(-20deg) rotateY(35deg);
  }
  to {
    transform: rotate(340deg) rotateY(35deg);
  }
}
@keyframes portal-launch {
  0% {
    transform: rotate(-32deg) rotateY(40deg) scale(0.85);
    opacity: 1;
  }
  100% {
    transform: rotate(100deg) rotateY(15deg) scale(1.7);
    opacity: 0;
  }
}
@keyframes star-launch {
  50% {
    transform: scale(2.5) rotate(180deg);
    filter: drop-shadow(0 0 25px #9a29ff);
  }
}
@media (max-width: 1100px) {
  .warp-scene {
    margin-right: -15px;
  }
  .final-portal {
    width: 390px;
    right: -35px;
  }
}
@media (max-width: 760px) {
  .product-brand .warp-mark {
    width: 36px;
    height: 36px;
  }
  .nebula {
    filter: blur(40px);
  }
  .nebula-one {
    width: 700px;
    height: 950px;
    right: -380px;
    top: 70px;
    opacity: 0.8;
  }
  .nebula-two {
    left: -500px;
    opacity: 0.6;
  }
  .warp-scene {
    margin-right: 0;
  }
  .signal-strip {
    padding: 20px 0;
    font-size: 28px;
  }
  .signal-group {
    gap: 32px;
    padding-right: 32px;
  }
  .signal-group .space-icon {
    width: 22px;
    height: 22px;
  }
  .scene-bottomline {
    font-size: 9px;
  }
  .scene-topline {
    font-size: 7px;
  }
  .faq-beacon {
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 110px;
    opacity: 0.6;
    margin-top: 10px;
    pointer-events: none;
  }
  .faq-section > div:first-child {
    position: relative;
  }
  .faq-section > div:first-child h2 {
    position: relative;
    z-index: 1;
  }
  .final-orbit {
    padding-bottom: 340px;
    min-height: 620px;
    overflow: hidden;
  }
  .final-portal {
    top: auto;
    bottom: 12px;
    right: calc(50% - 170px);
    width: 340px;
    height: 280px;
    opacity: 1;
  }
  .final-orbit:before {
    inset: 15% -20% -5%;
    background: radial-gradient(ellipse at 50% 75%, #790fed40, transparent 60%);
  }
  .final-portal .portal-caption {
    bottom: 6px;
    font-size: 7px;
  }
}
@media (max-width: 360px) {
  .product-brand .warp-mark {
    width: 29px;
    height: 29px;
  }
}
.motion-off *,
.motion-off *:before,
.motion-off *:after {
  animation-play-state: paused !important;
}
.page-hidden *,
.page-hidden *:before,
.page-hidden *:after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}