/* PolarZero hero module
   Scoped overrides for the mascot + dashboard composition.
   The rest of the landing page continues using index.css. */

#hero {
  --hero-ice: #f6fbff;
  --hero-frost: rgba(255, 255, 255, 0.78);
  --hero-line: rgba(47, 111, 196, 0.14);
  --hero-blue: #168cf2;
  --hero-navy: #081321;
  --hero-cyan: #65d8ff;
  background:
    radial-gradient(circle at 80% 26%, rgba(155, 213, 255, 0.46), transparent 34%),
    radial-gradient(circle at 68% 72%, rgba(205, 235, 255, 0.74), transparent 42%),
    linear-gradient(112deg, #ffffff 0 42%, #eef8ff 66%, #dff2ff 100%);
  overflow: hidden;
  isolation: isolate;
}

#pageLoader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #071426;
  background:
    radial-gradient(circle at 72% 28%, rgba(121, 199, 255, 0.44), transparent 36%),
    radial-gradient(circle at 26% 68%, rgba(255, 255, 255, 0.9), transparent 38%),
    linear-gradient(115deg, #ffffff 0 34%, #eef8ff 64%, #dcefff 100%);
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1), visibility 0.55s;
}

#pageLoader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-snow,
.loader-snow::before,
.loader-snow::after {
  content: "";
  position: absolute;
  inset: -80px;
  pointer-events: none;
}

.loader-snow {
  opacity: 0.58;
  background:
    radial-gradient(circle, rgba(47, 143, 244, 0.28) 0 1.2px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1.4px, transparent 2px);
  background-size: 86px 82px, 132px 128px;
  animation: loaderSnow 18s linear infinite;
}

.loader-snow::before {
  opacity: 0.38;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%232f8ff4' stroke-width='1.7' stroke-linecap='round' opacity='.72'%3E%3Cpath d='M27 8v38M14 14l26 26M40 14 14 40M19 8l8 8 8-8M19 46l8-8 8 8M8 19l8 8-8 8M46 19l-8 8 8 8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%236ab9ff' stroke-width='1.35' stroke-linecap='round' opacity='.66'%3E%3Cpath d='M17 5v24M8.5 8.5l17 17M25.5 8.5l-17 17M12 5l5 5 5-5M12 29l5-5 5 5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18% 22%, 80% 68%;
  background-size: 58px 58px, 34px 34px;
  animation: loaderSnow 24s ease-in-out infinite alternate;
}

.loader-snow::after {
  opacity: 0.22;
  background:
    linear-gradient(90deg, rgba(47, 111, 196, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47, 111, 196, 0.08) 1px, transparent 1px);
  background-size: 210px 210px;
}

.loader-panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(280px, calc(100vw - 48px));
  padding: 28px 26px 24px;
  border: 1px solid rgba(92, 164, 232, 0.2);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 26px 74px rgba(33, 112, 186, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.loader-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(27, 101, 173, 0.18);
  animation: loaderMarkFloat 1.8s ease-in-out infinite;
}

.loader-copy {
  display: grid;
  gap: 5px;
  text-align: center;
}

.loader-copy strong {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.loader-copy span {
  font-size: 13px;
  color: rgba(8, 19, 33, 0.58);
}

.loader-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(47, 111, 196, 0.12);
}

.loader-progress i {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #168cf2, #65d8ff);
  animation: loaderProgress 1.25s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes loaderSnow {
  from { transform: translate3d(0, -24px, 0); }
  to { transform: translate3d(36px, 74px, 0); }
}

@keyframes loaderMarkFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes loaderProgress {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(250%); }
}

#hero::before {
  content: "";
  position: absolute;
  inset: -80px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(47, 111, 196, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(47, 111, 196, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 82% 18%, rgba(35, 148, 255, 0.24), transparent 34%),
    radial-gradient(circle at 78% 58%, rgba(119, 203, 255, 0.28), transparent 40%),
    radial-gradient(circle at 60% 84%, rgba(255, 255, 255, 0.95), transparent 36%);
  background-size: 235px 235px, 235px 235px, auto, auto, auto;
  background-position: 0 0, 0 0, 82% 18%, 78% 58%, 60% 84%;
  opacity: 0.9;
  z-index: 0;
}

#hero .hero-main,
#hero .hero-ticker {
  position: relative;
  z-index: 1;
}

#hero .hero-watermark {
  position: absolute;
  z-index: 0;
}

#hero .hero-dotgrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .95;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 72% at 62% 44%, #000 24%, rgba(0,0,0,.92) 52%, transparent 86%),
    linear-gradient(90deg, rgba(0,0,0,.22) 0, #000 22%, #000 100%);
  mask-image:
    radial-gradient(ellipse 78% 72% at 62% 44%, #000 24%, rgba(0,0,0,.92) 52%, transparent 86%),
    linear-gradient(90deg, rgba(0,0,0,.22) 0, #000 22%, #000 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

#hero .hero-dotgrid canvas {
  position: absolute;
  inset: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  opacity: 0;
  transition: opacity 1.2s ease;
  transform-origin: center;
  will-change: opacity, transform;
}

#hero .hero-dotgrid canvas.visible {
  opacity: 1;
}

#hero .hero-main {
  align-items: center;
  gap: clamp(36px, 5vw, 82px);
}

#hero .hero-left {
  position: relative;
  z-index: 8;
}

#hero .hero-title {
  letter-spacing: -0.075em;
}

#hero .hero-right {
  position: relative;
  justify-self: end;
  width: min(820px, calc(100% + clamp(48px, 5vw, 92px)));
  margin-left: clamp(-92px, -5vw, -48px);
  min-height: clamp(560px, 74vh, 780px);
  display: grid;
  place-items: center;
  perspective: 1200px;
  z-index: 3;
}

#hero .hero-right::before {
  inset: 6% 4% 5% 8%;
  background:
    radial-gradient(circle at 58% 36%, rgba(255,255,255,.96) 0 10%, rgba(223,244,255,.7) 28%, transparent 58%),
    radial-gradient(circle at 52% 72%, rgba(41,151,255,.18), transparent 46%);
  filter: blur(4px);
  transform: rotate(-8deg);
}

#hero .hero-geo {
  width: min(640px, 96%);
  opacity: .16;
  transform: translate3d(calc(var(--px, 0px) * -0.18), calc(var(--py, 0px) * -0.12), 0) rotate(-8deg) scale(.98);
}

#hero .bear-float-wrap {
  width: min(690px, 96%);
  translate: calc(var(--px, 0px) - clamp(8px, 1.8vw, 28px)) calc(var(--py, 0px) - clamp(18px, 3vw, 34px));
  transform: none;
  z-index: 7;
}

#hero .hero-bear-picture {
  display: block;
  width: 100%;
}

#hero .hero-bear-img {
  width: min(690px, 96%);
  height: auto;
  filter:
    drop-shadow(0 30px 44px rgba(13, 54, 92, .20))
    drop-shadow(0 7px 12px rgba(23, 118, 207, .12));
}

#hero .bear-shadow {
  width: 48%;
  left: 28%;
  bottom: 7%;
  opacity: .26;
}

/* Dashboard composition: one real UI cluster around the mascot. */
#hero .hero-float-cards {
  position: absolute;
  inset: -7% -1% 0 -5%;
  pointer-events: none;
  transform: translate3d(calc(var(--cards-px, 0px) * -0.32), calc(var(--cards-py, 0px) * -0.24), 0);
}

#hero .hero-back-cards {
  z-index: 3;
}

#hero .hero-front-cards {
  z-index: 9;
}

#hero .hero-ui-card {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  border: 1px solid rgba(107, 174, 239, .22);
  box-shadow:
    0 26px 68px rgba(30, 88, 150, .18),
    0 10px 26px rgba(11, 52, 94, .10),
    inset 0 1px 0 rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  transform: translate3d(0, 18px, 0) rotate(var(--card-rotate, 0deg)) scale(.96);
  transform-origin: center;
  will-change: transform, opacity;
}

#hero .hero-right.entered .hero-ui-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(var(--card-rotate, 0deg)) scale(1);
  transition:
    opacity .48s ease,
    transform .68s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(.16s + var(--delay, 0ms));
  animation: heroCardFloat var(--float-duration, 6.8s) ease-in-out infinite;
  animation-delay: calc(.9s + var(--delay, 0ms));
}

#hero .hero-ui-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.48) 46%, transparent 58%);
  transform: translateX(-130%);
  animation: heroCardSweep 8.5s ease-in-out infinite;
  animation-delay: calc(var(--delay, 0ms) + 1200ms);
}

#hero .hero-summary-card {
  --card-rotate: .8deg;
  --float-x-a: -5px;
  --float-y-a: -8px;
  --float-rotate-a: -.7deg;
  --float-x-b: 4px;
  --float-y-b: 5px;
  --float-rotate-b: .45deg;
  --float-duration: 8.8s;
  top: 6%;
  right: 3%;
  width: min(330px, 40%);
  min-height: 224px;
  padding: 18px 16px 16px;
  border-radius: 26px;
  color: #10213b;
  background:
    linear-gradient(155deg, rgba(255,255,255,.93), rgba(239,248,255,.78)),
    radial-gradient(circle at 16% 10%, rgba(41, 151, 255, .16), transparent 38%);
  z-index: 3;
}

#hero .ui-card-topline {
  margin-bottom: 16px;
  font-size: 13px;
  letter-spacing: -.01em;
}

#hero .ui-card-topline span {
  color: #93a8bd;
  letter-spacing: .16em;
}

#hero .summary-grid {
  gap: 10px;
}

#hero .summary-tile {
  min-height: 66px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(72, 142, 214, .12);
}

#hero .summary-tile span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6c7f94;
}

#hero .summary-tile strong {
  font-size: clamp(21px, 2.2vw, 30px);
  letter-spacing: -.055em;
}

#hero .summary-tile em {
  color: #17aa78;
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0;
}

#hero .summary-users svg {
  color: var(--hero-blue);
  opacity: .84;
  transform-origin: center;
  animation: heroMetricWave 3.6s ease-in-out infinite;
}

#hero .summary-uptime i {
  display: block;
  height: 7px;
  border-radius: 999px;
  margin-top: 15px;
  background: linear-gradient(90deg, #14c98d, #28a8ff 86%, rgba(40,168,255,.18) 86%);
  background-size: 145% 100%;
  animation: heroUptimeFlow 2.8s ease-in-out infinite;
}

#hero .hero-code-card {
  --card-rotate: -2.8deg;
  --float-x-a: 6px;
  --float-y-a: -7px;
  --float-rotate-a: .7deg;
  --float-x-b: -5px;
  --float-y-b: 5px;
  --float-rotate-b: -.55deg;
  --float-duration: 9.4s;
  left: -1%;
  top: 26%;
  width: min(350px, 42%);
  padding: 0;
  border-radius: 24px;
  color: #dff5ff;
  background:
    radial-gradient(circle at 82% 12%, rgba(85, 214, 255, .18), transparent 34%),
    linear-gradient(150deg, rgba(8,18,32,.98), rgba(12,31,51,.96) 56%, rgba(5,16,29,.98));
  border-color: rgba(104, 202, 255, .24);
  box-shadow:
    0 32px 78px rgba(3, 18, 36, .38),
    0 12px 32px rgba(18, 115, 198, .18),
    inset 0 1px 0 rgba(255,255,255,.10);
  z-index: 8;
}

#hero .code-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid rgba(120, 210, 255, .14);
  color: rgba(223, 245, 255, .92);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}

#hero .code-title span {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: #36e5a0;
  box-shadow: 0 0 16px rgba(54,229,160,.72);
  animation: heroLiveDot 1.8s ease-in-out infinite;
}

#hero .code-title strong {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: .01em;
}

#hero .code-title i {
  margin-left: auto;
  color: rgba(126, 202, 255, .72);
  font-style: normal;
  font-size: 22px;
}

#hero .code-lines-ui {
  margin: 0;
  padding: 14px 16px 16px 44px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 0 38px, transparent 38px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.028) 27px 28px);
  font-size: clamp(10px, .86vw, 12px);
  line-height: 1.72;
  color: rgba(220, 243, 255, .84);
}

#hero .code-lines-ui li::marker {
  color: rgba(120, 181, 222, .45);
}

#hero .code-lines-ui b {
  color: #69dcff;
  font-weight: 600;
}

#hero .hero-launch-card {
  --card-rotate: 3.2deg;
  --float-x-a: -4px;
  --float-y-a: -9px;
  --float-rotate-a: -.8deg;
  --float-x-b: 5px;
  --float-y-b: 4px;
  --float-rotate-b: .55deg;
  --float-duration: 8.1s;
  right: 6%;
  top: 54%;
  bottom: auto;
  width: min(182px, 24%);
  padding: 16px;
  border-radius: 22px;
  color: #13243d;
  background:
    linear-gradient(155deg, rgba(255,255,255,.94), rgba(236,248,255,.80)),
    radial-gradient(circle at 100% 0%, rgba(36, 156, 255, .18), transparent 42%);
  z-index: 10;
}

#hero .launch-title {
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(64, 138, 212, .13);
}

#hero .launch-title strong {
  font-size: 14px;
}

#hero .launch-title svg {
  color: var(--hero-blue);
}

#hero .launch-list {
  gap: 10px;
}

#hero .launch-list li {
  font-size: 12px;
  color: #50647d;
}

#hero .launch-list span {
  background: rgba(28, 159, 242, .12);
  color: var(--hero-blue);
}

@keyframes heroCardFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--card-rotate, 0deg)) scale(1);
  }
  34% {
    transform: translate3d(var(--float-x-a, 8px), var(--float-y-a, -10px), 0)
      rotate(calc(var(--card-rotate, 0deg) + var(--float-rotate-a, 1deg)))
      scale(1.008);
  }
  68% {
    transform: translate3d(var(--float-x-b, -6px), var(--float-y-b, 8px), 0)
      rotate(calc(var(--card-rotate, 0deg) + var(--float-rotate-b, -.8deg)))
      scale(.998);
  }
}

@keyframes heroMetricWave {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .78; }
  50% { transform: translate3d(4px, -2px, 0) scale(1.05); opacity: 1; }
}

@keyframes heroUptimeFlow {
  0%, 100% { background-position: 0 0; filter: saturate(1); }
  50% { background-position: 100% 0; filter: saturate(1.18); }
}

@keyframes heroLiveDot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(54,229,160,.62); }
  50% { transform: scale(1.18); box-shadow: 0 0 22px rgba(54,229,160,.9); }
}

@keyframes heroCardSweep {
  0%, 42% { transform: translateX(-130%); opacity: 0; }
  52% { opacity: .72; }
  68%, 100% { transform: translateX(135%); opacity: 0; }
}

@media (max-width: 1100px) {
  #hero .hero-right { min-height: 600px; }
  #hero .hero-summary-card { right: 1%; width: min(350px, 54%); }
  #hero .hero-code-card { left: 0; width: min(360px, 54%); }
  #hero .hero-launch-card { right: 2%; width: min(190px, 31%); }
}

@media (max-width: 900px) {
  #hero .hero-main { grid-template-columns: 1fr; }
  #hero .hero-right { min-height: 620px; width: min(720px, 100%); margin-inline: auto; }
  #hero .hero-float-cards { inset: 0; transform: none; }
  #hero .hero-summary-card { top: 16px; right: 6%; width: min(350px, 58%); transform: rotate(1deg); }
  #hero .hero-code-card { top: 45%; left: 3%; width: min(340px, 54%); transform: rotate(-2deg); }
  #hero .hero-launch-card { right: 5%; bottom: 8%; width: min(182px, 32%); transform: rotate(1deg); }
}

@media (max-width: 600px) {
  #pageLoader {
    background:
      radial-gradient(circle at 72% 28%, rgba(121, 199, 255, 0.32), transparent 34%),
      linear-gradient(115deg, #ffffff 0 38%, #eef8ff 100%);
  }

  .loader-snow {
    opacity: 0.3;
    background-size: 118px 112px, 166px 158px;
    animation-duration: 28s;
  }

  .loader-snow::before,
  .loader-snow::after {
    display: none;
  }

  .loader-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 18px 44px rgba(33, 112, 186, 0.14);
  }

  #hero .hero-right { min-height: 520px; }
  #hero .bear-float-wrap { width: min(520px, 102%); }
  #hero .hero-bear-img {
    width: min(520px, 102%);
    filter: drop-shadow(0 18px 28px rgba(13, 54, 92, .18));
  }
  #hero .hero-ui-card {
    border-radius: 17px;
    box-shadow:
      0 18px 42px rgba(30, 88, 150, .14),
      0 6px 18px rgba(11, 52, 94, .08),
      inset 0 1px 0 rgba(255, 255, 255, .72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translate3d(0, 10px, 0) rotate(var(--card-rotate, 0deg)) scale(.98);
  }
  #hero .hero-right.entered .hero-ui-card {
    animation-duration: calc(var(--float-duration, 8s) * 1.35);
  }
  #hero .hero-ui-card::after {
    animation: none;
    opacity: 0;
  }
  #hero .summary-users svg,
  #hero .summary-uptime i,
  #hero .code-title span {
    animation-duration: 12s;
  }
  #hero .hero-summary-card { top: 8px; right: 0; width: min(300px, 70%); min-height: 0; padding: 13px; }
  #hero .summary-grid { gap: 7px; }
  #hero .summary-tile { min-height: 56px; padding: 10px; border-radius: 13px; }
  #hero .summary-tile span { font-size: 8px; }
  #hero .summary-tile strong { font-size: 18px; }
  #hero .hero-code-card { top: 45%; left: 0; width: min(270px, 60%); }
  #hero .code-title { padding: 10px 12px; }
  #hero .code-lines-ui { padding: 12px 12px 14px 38px; font-size: 9px; line-height: 1.78; }
  #hero .hero-launch-card { right: 0; bottom: 6%; width: min(158px, 40%); padding: 12px; }
  #hero .launch-list { gap: 7px; }
  #hero .launch-list li { font-size: 10px; }
}

@media (max-width: 600px) {
  #hero {
    padding-top: 64px;
  }

  #hero .hero-main {
    align-items: start;
    gap: 10px;
    padding: 24px 18px 0;
  }

  #hero .hero-left {
    max-width: none;
    width: 100%;
  }

  #hero .hero-sub-label {
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .18em;
    margin-bottom: 12px;
  }

  #hero .hero-title {
    font-size: clamp(46px, 14vw, 56px);
    line-height: .94;
    letter-spacing: -.07em;
    margin-bottom: 14px;
  }

  #hero .hero-desc {
    max-width: 32ch;
    font-size: 16px;
    line-height: 1.42;
    margin-bottom: 0;
  }

  #hero .hero-desc br {
    display: none;
  }

  #hero .hero-divider {
    width: 34px;
    height: 2px;
    margin: 15px 0 17px;
  }

  #hero .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
  }

  #hero .btn-primary,
  #hero .btn-secondary {
    min-height: 43px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1;
    justify-content: center;
    white-space: nowrap;
  }

  #hero .btn-primary svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  #hero .hero-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(12, 26, 44, .12);
  }

  #hero .hero-badge,
  #hero .hero-badge:last-child {
    min-width: 0;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid rgba(47, 111, 196, .13);
    border-radius: 12px;
    background: rgba(255, 255, 255, .48);
  }

  #hero .hero-badge-title {
    display: grid;
    justify-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
  }

  #hero .hero-badge-title svg {
    width: 14px;
    height: 14px;
  }

  #hero .hero-badge-sub {
    display: none;
  }

  #hero .hero-right {
    width: 100%;
    min-height: 412px;
    height: 412px;
    margin: 0 auto;
    justify-self: stretch;
    overflow: visible;
  }

  #hero .hero-right::before {
    inset: 7% 4% 8%;
    filter: blur(3px);
  }

  #hero .hero-geo {
    width: min(390px, 96vw);
    opacity: .11;
  }

  #hero .bear-float-wrap {
    width: min(340px, 92vw);
    translate: 0 -2px;
  }

  #hero .hero-bear-img {
    width: min(340px, 92vw);
  }

  #hero .bear-shadow {
    width: 42%;
    left: 31%;
    bottom: 5%;
    opacity: .2;
  }

  #hero .hero-float-cards {
    inset: 0;
  }

  #hero .hero-code-card {
    display: none !important;
  }

  #hero .hero-summary-card {
    top: 10px;
    left: 0;
    right: auto;
    width: min(168px, 43vw);
    min-height: 0;
    padding: 10px;
    border-radius: 15px;
    z-index: 10;
  }

  #hero .ui-card-topline {
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 1.2;
  }

  #hero .ui-card-topline span {
    letter-spacing: .1em;
  }

  #hero .summary-grid {
    gap: 5px;
  }

  #hero .summary-tile {
    min-height: 43px;
    padding: 7px 6px;
    border-radius: 10px;
  }

  #hero .summary-tile span {
    font-size: 7px;
    letter-spacing: .08em;
  }

  #hero .summary-tile strong {
    font-size: 14px;
    letter-spacing: -.035em;
  }

  #hero .summary-tile em {
    font-size: 8px;
  }

  #hero .summary-users svg {
    width: 48px;
    right: 6px;
    bottom: 6px;
  }

  #hero .hero-launch-card {
    top: auto;
    right: 0;
    bottom: 24px;
    width: min(138px, 36vw);
    padding: 10px;
    border-radius: 15px;
    z-index: 11;
  }

  #hero .launch-title {
    padding: 0 0 9px;
    margin-bottom: 9px;
  }

  #hero .launch-title strong {
    font-size: 11px;
    line-height: 1.2;
  }

  #hero .launch-title svg {
    width: 15px;
    height: 15px;
  }

  #hero .launch-list {
    gap: 7px;
  }

  #hero .launch-list li {
    grid-template-columns: 17px 1fr;
    gap: 6px;
    font-size: 9px;
    line-height: 1.2;
  }

  #hero .launch-list span {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }

  #hero .hero-ticker {
    padding: 12px 18px;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  #hero {
    min-height: auto;
  }

  #hero .hero-main {
    min-height: 0;
    padding-bottom: 18px;
  }

  #hero .hero-left {
    display: grid;
    align-content: center;
    min-height: min(620px, calc(100dvh - 64px));
  }

  #hero .hero-right {
    display: none !important;
  }

  #hero .hero-dotgrid {
    display: block;
  }

  #hero .hero-dotgrid canvas {
    min-height: 100%;
  }

  #hero .hero-watermark {
    display: none;
  }

  #hero .hero-ticker {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-dotgrid {
    display: block !important;
  }

  #hero .hero-right.entered .hero-ui-card {
    animation: heroCardFloat var(--float-duration, 6.8s) ease-in-out infinite !important;
    animation-delay: calc(.9s + var(--delay, 0ms)) !important;
  }

  #hero .hero-float-cards,
  #hero .bear-float-wrap,
  #hero .hero-geo {
    transform: none !important;
  }
}