:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --hair: rgba(245, 245, 247, 0.1);
  --grad-blue: linear-gradient(135deg, #142a52 0%, #0071e3 55%, #5ac8fa 100%);
  --grad-blue-text: linear-gradient(135deg, #0071e3 0%, #5ac8fa 100%);
  --blue: #0071e3;
  --blue-rgb: 0, 113, 227;
}
html {
  background: #000;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--sans);
}

.t-hero {
  font-size: clamp(2.75rem, 7.6vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
}
.t-h2 {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.t-h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.t-lead {
  font-size: clamp(1.125rem, 1.9vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.t-eyebrow {
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.t-body {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.t-tiny {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.silver {
  background: linear-gradient(180deg, #fff 0%, #f2f2f5 38%, #bfbfc6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-gradient {
  background: var(--grad-blue);
  box-shadow: 0 8px 28px -10px rgba(90, 200, 250, 0.4);
  transition:
    filter 0.3s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.2s var(--ease);
}
.btn-gradient:hover {
  filter: brightness(1.12) saturate(1.15);
  box-shadow: 0 10px 34px -8px rgba(90, 200, 250, 0.65);
}
.btn-gradient:active {
  transform: scale(0.97);
}

.btn-outline {
  border: 1px solid var(--hair);
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.btn-outline:hover {
  border-color: rgba(var(--blue-rgb), 0.5);
  background: rgba(var(--blue-rgb), 0.08);
  color: #f5f5f7;
}

.text-gradient {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.icon-hover-gradient {
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.icon-hover-gradient:hover {
  background-image: var(--grad-blue);
  color: #fff;
}

.group:hover .text-gradient-hover {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link:focus {
  background-image: var(--grad-blue);
}

::selection {
  background: var(--blue);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 6px;
}

#nav {
  transition:
    background-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
#nav.solid {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: var(--hair);
}

.nav-drop-btn svg {
  transition: transform 0.3s var(--ease);
}
.nav-drop.open .nav-drop-btn svg {
  transform: rotate(180deg);
}
.nav-drop-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -6px);
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0.22s;
}
.nav-drop.open .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop-card {
  width: max-content;
  min-width: 280px;
  background: #131317;
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.85);
}
.nav-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background-color 0.25s var(--ease);
}
.nav-drop-item:hover,
.nav-drop-item:focus-visible {
  background: rgba(245, 245, 247, 0.06);
}
.nav-drop-item-icon {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(245, 245, 247, 0.05);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.14);
  color: #86868b;
  transition: color 0.25s var(--ease);
}
.nav-drop-item:hover .nav-drop-item-icon,
.nav-drop-item:focus-visible .nav-drop-item-icon {
  color: var(--blue);
}
.nav-drop-item-icon.nav-duo {
  display: flex;
  background: none;
}
.nav-drop-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-drop-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #f5f5f7;
}
.nav-drop-item-desc {
  font-size: 12px;
  color: #86868b;
}
.nav-drop-panel--end {
  left: auto;
  right: 0;
  transform: translate(0, -6px);
}
.nav-drop.open .nav-drop-panel--end {
  transform: translate(0, 0);
}
.nav-drop-cap {
  padding: 4px 10px 8px;
}
.nav-drop-logo {
  align-self: flex-start;
  width: auto;
  margin-bottom: 3px;
}
.nav-drop-logo--uv {
  height: 15px;
}
.nav-drop-logo--vi {
  height: 24px;
  margin: -4px 0 0;
}

.mnav-sub .mnav-prod {
  display: block;
  padding: 0.5rem 0;
}
.mnav-prod-logo {
  display: block;
  width: auto;
}
.mnav-prod-logo--uv {
  height: 17px;
}
.mnav-prod-logo--vi {
  height: 27px;
  margin: -5px 0 -4px;
}
.mnav-prod-d {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78125rem;
  line-height: 1.35;
  color: #86868b;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 99px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.04);
}
.lang-opt {
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #86868b;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.lang-opt.is-on {
  color: #f5f5f7;
  background: rgba(245, 245, 247, 0.1);
}
a.lang-opt:not(.is-on):hover {
  color: #f5f5f7;
}
.lang-note {
  position: fixed;
  z-index: 45;
  top: 52px;
  left: 0;
  right: 0;
  padding: 0.45rem 1.5rem;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: #a1a1a8;
  background: rgba(0, 113, 227, 0.14);
  border-bottom: 1px solid rgba(var(--blue-rgb), 0.28);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -10px;
}
.burger-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.burger-box span {
  position: absolute;
  right: 0;
  height: 1.5px;
  border-radius: 99px;
  background: #f5f5f7;
  transition:
    width 0.4s var(--ease),
    transform 0.4s var(--ease),
    opacity 0.25s var(--ease);
}
.burger-box span:nth-child(1) {
  top: 0;
  width: 20px;
}
.burger-box span:nth-child(2) {
  top: 50%;
  margin-top: -0.75px;
  width: 12px;
}
.burger-box span:nth-child(3) {
  bottom: 0;
  width: 16px;
}
.burger[aria-expanded="false"]:active .burger-box span {
  width: 13px;
}
.burger[aria-expanded="true"] .burger-box span:nth-child(1) {
  transform: translateY(6.25px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-box span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger[aria-expanded="true"] .burger-box span:nth-child(3) {
  width: 20px;
  transform: translateY(-6.25px) rotate(-45deg);
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  transition: visibility 0.5s;
}
.mnav.open {
  visibility: visible;
}
.mnav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.mnav.open .mnav-scrim {
  opacity: 1;
}
.mnav-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(10, 10, 13, 0.55);
  backdrop-filter: saturate(180%) blur(34px);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  overscroll-behavior: contain;
}
.mnav.open .mnav-panel {
  transform: none;
}
.mnav-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 1rem 0 1.35rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
}
.mnav-x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  color: #86868b;
  background: rgba(245, 245, 247, 0.05);
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.mnav-x:hover {
  color: #f5f5f7;
  background: rgba(245, 245, 247, 0.1);
}

.mnav-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.35rem 1.35rem 1rem;
}
.mnav-item,
.mnav-link {
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
}
.mnav-acc,
.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.72rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f5f5f7;
  text-align: left;
  transition: color 0.25s var(--ease);
}
.mnav-link.is-accent {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mnav-acc .sign {
  font-size: 1.15rem;
  line-height: 1;
  color: #5e5e63;
}
.mnav-sub {
  padding-bottom: 0.5rem;
}
.mnav-sub a {
  display: block;
  padding: 0.38rem 0;
  font-size: 0.9375rem;
  color: #86868b;
  transition: color 0.25s var(--ease);
}
.mnav-sub a:hover {
  color: #f5f5f7;
}

.mnav-foot {
  flex: none;
  padding: 1rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(245, 245, 247, 0.07);
  background: rgba(245, 245, 247, 0.025);
}
.mnav-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.38rem 0;
  color: #f5f5f7;
}
.mnav-row:first-of-type {
  margin-top: 0.55rem;
}
.mnav-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9px;
  color: #5ac8fa;
  background: rgba(var(--blue-rgb), 0.14);
}
.mnav-row-txt {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.9rem;
  padding: 0.68rem 1rem;
  border-radius: 99px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
}
.mnav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(245, 245, 247, 0.07);
}
.mnav-nip {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: #5e5e63;
}

[data-r] {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-r].in {
  opacity: 1;
  transform: none;
}

.glow-blue {
  background: radial-gradient(50% 50% at 50% 42%, rgba(var(--blue-rgb), 0.28), rgba(var(--blue-rgb), 0.06) 45%, transparent 72%);
}
.pane {
  background: linear-gradient(180deg, #191920 0%, #0e0e12 100%);
  border: 1px solid rgba(245, 245, 247, 0.09);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pane-front {
  box-shadow:
    0 34px 70px -18px rgba(0, 0, 0, 0.95),
    0 0 0 5px #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.bar {
  background: rgba(245, 245, 247, 0.13);
  border-radius: 99px;
}
.bar-b {
  background: var(--grad-blue);
  border-radius: 99px;
}

.cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #86868b;
}
.dotgrid {
  background-image: radial-gradient(rgba(245, 245, 247, 0.075) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
}
.src,
.out {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #101014;
  border: 1px solid rgba(245, 245, 247, 0.08);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8125rem;
  color: #c9c9cf;
  line-height: 1.2;
}
.src .mark {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: rgba(245, 245, 247, 0.07);
  color: #9c9ca5;
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0;
}
.out {
  justify-content: flex-start;
}
.out .tick {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 99px;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.85);
}
@media (max-width: 1023px) {
  .out {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
    padding: 0.6rem 0.5rem;
  }
}
.panel-dim {
  background: #0a0a0d;
  border: 1px solid rgba(245, 245, 247, 0.055);
}
.panel-hi {
  background: linear-gradient(180deg, #121218 0%, #0d0d12 100%);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  box-shadow:
    0 0 80px -26px rgba(var(--blue-rgb), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.badge-x,
.badge-v {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.1rem;
  border-radius: 99px;
  display: grid;
  place-items: center;
}
.badge-x {
  background: rgba(245, 245, 247, 0.055);
  color: #5e5e63;
}
.badge-v {
  background: rgba(var(--blue-rgb), 0.16);
  color: var(--blue);
}
.badge-x svg,
.badge-v svg {
  width: 0.75rem;
  height: 0.75rem;
}

.sw-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 430px);
  margin-inline: auto;
  padding: 4px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.04);
  border: 1px solid var(--hair);
}
.sw-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.08);
  transition:
    transform 0.45s var(--ease),
    background 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.sw[data-side="1"] .sw-thumb {
  transform: translateX(100%);
  background: var(--grad-blue);
  box-shadow: 0 8px 26px -10px rgba(90, 200, 250, 0.6);
}
.sw-tab {
  position: relative;
  z-index: 1;
  padding: 0.6rem 0.4rem;
  border-radius: 99px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #86868b;
  transition: color 0.35s var(--ease);
}
.sw-tab[aria-pressed="true"] {
  color: #f5f5f7;
}

.sw-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(245, 245, 247, 0.09);
  background: linear-gradient(180deg, #111116 0%, #0a0a0d 100%);
  box-shadow: 0 40px 90px -50px #000;
  transition:
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.sw[data-side="1"] .sw-card {
  border-color: rgba(var(--blue-rgb), 0.34);
  box-shadow:
    0 40px 90px -46px #000,
    0 0 90px -28px rgba(var(--blue-rgb), 0.5);
}
.sw-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(var(--blue-rgb), 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.sw[data-side="1"] .sw-aura {
  opacity: 1;
}
.sw-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.075) 50%, transparent 58%);
}
.sw.flip .sw-sheen {
  animation: swSheen 0.85s var(--ease);
}
@keyframes swSheen {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(110%);
  }
}

.sw-card::before,
.sw-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
}
.sw-card::before {
  background: linear-gradient(90deg, transparent, rgba(245, 245, 247, 0.16) 24%, rgba(245, 245, 247, 0.16) 76%, transparent);
}
.sw-card::after {
  background: linear-gradient(90deg, transparent, rgba(90, 200, 250, 0.8) 28%, rgba(90, 200, 250, 0.8) 72%, transparent);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.sw[data-side="1"] .sw-card::after {
  opacity: 1;
}

.sw-row {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.4rem;
  border-top: 1px solid rgba(245, 245, 247, 0.065);
}
.sw-row:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  .sw-row {
    grid-template-columns: 124px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.35rem 2rem;
  }
}
.sw-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(var(--blue-rgb), 0.13), rgba(var(--blue-rgb), 0.03) 38%, transparent 62%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  transition-delay: calc(var(--i) * 60ms);
}
.sw[data-side="1"] .sw-row::before {
  opacity: 1;
}

.sw-key {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5e5e63;
  transition: color 0.4s var(--ease);
}
@media (min-width: 768px) {
  .sw-key {
    padding-top: 0.4rem;
  }
}
.sw[data-side="1"] .sw-key {
  color: #86868b;
}

.sw-states {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
}
.sw-state {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease),
    filter 0.45s var(--ease);
  transition-delay: calc(var(--i) * 55ms);
}
.sw[data-side="0"] .sw-state[data-state="0"],
.sw[data-side="1"] .sw-state[data-state="1"] {
  opacity: 1;
  transform: none;
  filter: none;
}
.sw-txt {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #86868b;
}
@media (min-width: 768px) {
  .sw-txt {
    font-size: 1.1875rem;
  }
}
.sw-state[data-state="1"] .sw-txt {
  color: #f5f5f7;
  font-weight: 500;
}
.sw .badge-x,
.sw .badge-v {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1rem;
}
.sw .badge-x svg,
.sw .badge-v svg {
  width: 0.9rem;
  height: 0.9rem;
}

.sw-foot {
  background: rgba(245, 245, 247, 0.02);
}
.sw-punch {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.sw-hint {
  transition: opacity 0.4s var(--ease);
}
.sw-hint.gone {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sw-state,
  .sw-row::before {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
  .sw-state {
    filter: none;
  }
}

.tk-ask {
  max-width: 620px;
  margin-inline: auto;
  padding: 1.35rem 1.6rem 1.5rem;
  border-radius: 22px;
  border: 1px solid rgba(245, 245, 247, 0.09);
  background: linear-gradient(180deg, #131318 0%, #0b0b0f 100%);
  box-shadow: 0 30px 70px -50px #000;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.tk.in .tk-ask {
  opacity: 1;
  transform: none;
}
.tk-who {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5e5e63;
}
.tk-say {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #f5f5f7;
}
@media (min-width: 768px) {
  .tk-say {
    font-size: 1.1875rem;
  }
}

.tk-stem {
  width: 1px;
  height: 34px;
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(245, 245, 247, 0.22), rgba(245, 245, 247, 0.05));
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.5s var(--ease) 0.25s;
}
.tk.in .tk-stem {
  transform: none;
}
.tk-fork {
  display: none;
  width: 100%;
  height: 64px;
}
@media (min-width: 768px) {
  .tk-stem {
    display: none;
  }
  .tk-fork {
    display: block;
  }
}
.tk-wire {
  stroke: rgba(245, 245, 247, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.85s var(--ease) 0.2s;
}
.tk-wire-on {
  stroke: rgba(90, 200, 250, 0.75);
  filter: drop-shadow(0 0 6px rgba(var(--blue-rgb), 0.5));
  transition-delay: 0.34s;
}
.tk.in .tk-wire {
  stroke-dashoffset: 0;
}

.tk-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .tk-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.tk-a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border-radius: 24px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.tk.in .tk-a {
  opacity: 1;
  transform: none;
}
.tk.in .panel-dim {
  transition-delay: 0.5s;
}
.tk.in .panel-hi {
  transition-delay: 0.68s;
}
.tk-cap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5e5e63;
}
.panel-hi .tk-cap {
  color: #86868b;
}
.tk-cap .badge-x,
.tk-cap .badge-v {
  margin-top: 0;
}
.tk-quote {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: #86868b;
}
.panel-hi .tk-quote {
  color: #f5f5f7;
}
@media (min-width: 768px) {
  .tk-quote {
    font-size: 1.1875rem;
  }
}
.tk-note {
  margin-top: auto;
  padding-top: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5e5e63;
}
.panel-hi .tk-note {
  color: #86868b;
}
.tk-foot {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #86868b;
}

@media (prefers-reduced-motion: reduce) {
  .tk-ask,
  .tk-a {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
  .tk-stem,
  .tk-wire {
    transition: none;
    transform: none;
    stroke-dashoffset: 0;
  }
}

.core-card {
  background: linear-gradient(180deg, #191920 0%, #0b0b0f 100%);
  border: 1px solid rgba(245, 245, 247, 0.13);
  box-shadow:
    0 40px 90px -30px #000,
    0 0 70px -14px rgba(var(--blue-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.wire-run {
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.9));
  animation: wire var(--dur, 3.5s) linear var(--delay, 0s) infinite;
}
.wire-run.out {
  stroke-width: 2.4;
}
@keyframes wire {
  to {
    stroke-dashoffset: -100;
  }
}

.core-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: coreBreathe 4s ease-in-out infinite;
}
@keyframes coreBreathe {
  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.985);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.025);
  }
}
.out-nodes circle {
  animation: nodeGlow 2.6s ease-in-out infinite;
}
.out-nodes circle:nth-child(2) {
  animation-delay: 0.7s;
}
.out-nodes circle:nth-child(3) {
  animation-delay: 1.4s;
}
@keyframes nodeGlow {
  0%,
  100% {
    opacity: 0.45;
    filter: none;
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(var(--blue-rgb), 0.95));
  }
}

@property --spot {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.tile {
  position: relative;
  background-color: #101014;
  background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--blue-rgb), var(--spot, 0)), transparent 68%);
  border: 1px solid rgba(245, 245, 247, 0.07);
  border-radius: 28px;
  transition:
    transform 0.6s var(--ease),
    background-color 0.6s var(--ease),
    border-color 0.6s var(--ease),
    --spot 0.45s var(--ease);
}
.tile:hover {
  transform: translateY(-6px);
  background-color: #15151a;
  border-color: rgba(245, 245, 247, 0.13);
  --spot: 0.13;
}

.tile-b {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 2rem 2rem;
}
.tile-body .btn-outline {
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .tile-body {
    padding: 2rem 2.75rem 2.75rem;
  }
}
.stage {
  position: relative;
  height: 205px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(245, 245, 247, 0.06);
  background: radial-gradient(90% 130% at 50% 0%, rgba(var(--blue-rgb), 0.13), transparent 62%), linear-gradient(180deg, rgba(24, 24, 30, 0.92) 0%, rgba(12, 12, 16, 0.92) 100%);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(245, 245, 247, 0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
}
@media (max-width: 400px) {
  .stage {
    height: 168px;
  }
}
.tile-b:hover .mk-win,
.tile-b:hover .mk-phones {
  transform: translateY(-3px) scale(1.02);
}

.mk-win,
.mk-phones {
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease);
}
.mk-win {
  border-radius: 12px;
  border: 1px solid rgba(245, 245, 247, 0.14);
  background: linear-gradient(180deg, #1c1c23 0%, #101015 100%);
  box-shadow:
    0 26px 50px -20px #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.mk-top {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 8px;
  background: rgba(245, 245, 247, 0.055);
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
}
.mk-top i {
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: #3a3a40;
}
.mk-in {
  padding: 10px;
}
.mk-l {
  height: 4px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.15);
}
.mk-l + .mk-l {
  margin-top: 5px;
}

.mk-hero {
  height: 32px;
  border-radius: 6px;
  margin-bottom: 9px;
  background: linear-gradient(120deg, rgba(var(--blue-rgb), 0.55), rgba(90, 200, 250, 0.28) 60%, rgba(245, 245, 247, 0.05));
}
.mk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 9px;
}
.mk-cards span {
  height: 18px;
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.07);
  border: 1px solid rgba(245, 245, 247, 0.05);
}
.mk-p {
  animation: mkPaint 5.6s var(--ease) var(--s, 0s) infinite;
}
@keyframes mkPaint {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }
  9%,
  86% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(7px);
  }
}

.mk-shop {
  display: flex;
  gap: 9px;
}
.mk-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  background: linear-gradient(140deg, rgba(var(--blue-rgb), 0.4), rgba(245, 245, 247, 0.06));
}
.mk-price {
  width: 34px;
  height: 7px;
  border-radius: 99px;
  margin-top: 7px;
  background: rgba(245, 245, 247, 0.28);
}
.mk-btn {
  margin-top: 8px;
  padding: 4px 0;
  border-radius: 99px;
  text-align: center;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--grad-blue);
  animation: mkPress 4.4s var(--ease) infinite;
}
@keyframes mkPress {
  0%,
  16% {
    transform: none;
    filter: none;
  }
  21% {
    transform: scale(0.92);
    filter: brightness(1.3);
  }
  28%,
  100% {
    transform: none;
    filter: none;
  }
}
.mk-fly {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -60px;
  border-radius: 4px;
  background: linear-gradient(140deg, #5ac8fa, var(--blue));
  box-shadow: 0 0 14px rgba(var(--blue-rgb), 0.8);
  opacity: 0;
  animation: mkFly 4.4s var(--ease) infinite;
}
@keyframes mkFly {
  0%,
  21% {
    opacity: 0;
    transform: none;
  }
  26% {
    opacity: 1;
    transform: translate(6px, -6px) scale(1);
  }
  44% {
    opacity: 1;
    transform: translate(112px, -74px) scale(0.45);
  }
  48%,
  100% {
    opacity: 0;
    transform: translate(112px, -74px) scale(0.3);
  }
}
.mk-cart {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 24px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #f5f5f7;
  background: rgba(245, 245, 247, 0.07);
  border: 1px solid rgba(245, 245, 247, 0.12);
  backdrop-filter: blur(6px);
  animation: mkCart 4.4s var(--ease) infinite;
}
.mk-cart svg {
  width: 14px;
  height: 14px;
}
.mk-cart b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.7);
}
@keyframes mkCart {
  0%,
  44% {
    transform: none;
    border-color: rgba(245, 245, 247, 0.12);
  }
  50% {
    transform: scale(1.16);
    border-color: rgba(var(--blue-rgb), 0.6);
  }
  60%,
  100% {
    transform: none;
    border-color: rgba(245, 245, 247, 0.12);
  }
}

.mk-app {
  display: flex;
  height: 96px;
}
.mk-side {
  flex: none;
  width: 28px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid rgba(245, 245, 247, 0.07);
}
.mk-side i {
  height: 5px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.13);
}
.mk-side i.on {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.8);
}
.mk-main {
  flex: 1;
  padding: 8px;
}
.mk-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.mk-kpis span {
  height: 16px;
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.07);
}
.mk-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
  margin-top: 8px;
}
.mk-chart b {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgba(90, 200, 250, 0.85), rgba(var(--blue-rgb), 0.6));
  transform-origin: bottom;
  animation: mkGrow 4.8s var(--ease) var(--s, 0s) infinite;
}
@keyframes mkGrow {
  0% {
    transform: scaleY(0.05);
    opacity: 0.35;
  }
  16%,
  84% {
    transform: scaleY(1);
    opacity: 1;
  }
  96%,
  100% {
    transform: scaleY(0.05);
    opacity: 0.35;
  }
}

.mk-phones {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.mk-phone {
  border-radius: 13px;
  border: 1px solid rgba(245, 245, 247, 0.14);
  background: linear-gradient(180deg, #1c1c23 0%, #101015 100%);
  box-shadow:
    0 26px 50px -20px #000,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 9px 7px 7px;
}
.mk-phone.front {
  position: relative;
  width: 84px;
  height: 152px;
  overflow: hidden;
}
.mk-phone.back {
  width: 64px;
  height: 120px;
  opacity: 0.6;
  transform: rotate(-5deg);
  transform-origin: bottom right;
}
.mk-hero-s {
  height: 30px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(140deg, rgba(var(--blue-rgb), 0.5), rgba(90, 200, 250, 0.22) 65%, rgba(245, 245, 247, 0.05));
}
.mk-rows {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.mk-rows i {
  height: 13px;
  border-radius: 4px;
  background: rgba(245, 245, 247, 0.07);
}
.mk-notch {
  display: block;
  width: 20px;
  height: 3px;
  margin: 0 auto 9px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.18);
}
.mk-toast {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(28, 28, 35, 0.92);
  border: 1px solid rgba(var(--blue-rgb), 0.45);
  box-shadow: 0 10px 24px -8px #000;
  backdrop-filter: blur(4px);
  animation: mkToast 5s var(--ease) infinite;
}
.mk-toast span {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--grad-blue);
}
.mk-toast i {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.3);
}
@keyframes mkToast {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-22px);
  }
  18%,
  62% {
    opacity: 1;
    transform: none;
  }
  74%,
  100% {
    opacity: 0;
    transform: translateY(-22px);
  }
}
.mk-tabs {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: flex;
  gap: 5px;
}
.mk-tabs i {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.12);
}
.mk-tabs i.on {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.7);
}

.stage * {
  animation-play-state: paused;
}
.tile-b.in .stage * {
  animation-play-state: running;
}

.stage-crv {
  display: block;
  place-items: normal;
  text-align: left;
  padding: 1.1rem 1.4rem;
}
.crv {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.5rem;
  width: 100%;
  height: calc(100% - 4.8rem);
}
.crv-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(var(--blue-rgb), 0.55));
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.crv-line.seo {
  stroke: #5ac8fa;
}
.crv-area {
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.7s;
}
.tile.in .crv-line {
  animation: crvDraw var(--dur, 3.6s) linear 0.25s infinite;
}
.tile.in .crv-area {
  opacity: 1;
}
@keyframes crvDraw {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
.crv-tag,
.crv-foot {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #86868b;
}
.crv-foot {
  position: absolute;
  left: 1.4rem;
  bottom: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.8125rem;
  color: #c9c9cf;
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(245, 245, 247, 0.04);
  border: 1px solid rgba(245, 245, 247, 0.06);
  font-size: 0.875rem;
  line-height: 1.5;
  color: #a1a1a8;
}
.fact svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--blue);
}
.chip {
  border-radius: 99px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  color: #86868b;
}

.base {
  display: grid;
  gap: 1.75rem;
  padding: 2rem;
  background-image: linear-gradient(180deg, rgba(var(--blue-rgb), 0.07), transparent 60%), radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--blue-rgb), var(--spot, 0)), transparent 68%);
}
@media (min-width: 1024px) {
  .base {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 2.75rem;
  }
  .base-side {
    text-align: right;
    max-width: 320px;
  }
}

.arw {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.tile:hover .arw {
  transform: translateX(3px);
}
.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .stage * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.stage-sm {
  height: 158px;
}
.sc {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.sc-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #f5f5f7;
}
.sc-desc {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #86868b;
}
.tile-sc .tile-body {
  padding: 1.5rem 1.6rem 1.8rem;
}

.sc-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.sc-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 10px 26px -8px rgba(var(--blue-rgb), 0.9);
}
.sc-phone svg {
  width: 19px;
  height: 19px;
}
.sc-phone::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: #34c759;
  border: 2.5px solid #101014;
  animation: scLive 2.4s var(--ease) infinite;
}
@keyframes scLive {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);
  }
}
.sc-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
}
.sc-wave b {
  width: 3px;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(180deg, #5ac8fa, #0071e3);
  transform: scaleY(0.16);
  animation: scWave 1.3s var(--ease) infinite;
  animation-delay: var(--s, 0s);
}
@keyframes scWave {
  0%,
  100% {
    transform: scaleY(0.16);
  }
  50% {
    transform: scaleY(var(--p, 1));
  }
}

.sc-tm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
  width: 100%;
  padding: 0 1.5rem;
}
.sc-tm-cap {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5e5e63;
}
.sc-tm-cap.on {
  color: #86868b;
}
.sc-tm-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(245, 245, 247, 0.06);
}
.sc-tm-track::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  bottom: -4px;
  border-right: 1.5px dashed rgba(245, 245, 247, 0.22);
}
.sc-tm-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 99px;
}
.sc-tm-track i.slow {
  background: rgba(245, 245, 247, 0.22);
  animation: scTmSlow 5.4s linear infinite;
}
.sc-tm-track i.fast {
  background: var(--grad-blue);
  box-shadow: 0 0 16px rgba(var(--blue-rgb), 0.75);
  animation: scTmFast 5.4s var(--ease) infinite;
}
.sc-tm-ok {
  position: absolute;
  right: -11px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 99px;
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 6px 18px -6px rgba(var(--blue-rgb), 0.95);
  opacity: 0;
  animation: scTmOk 5.4s var(--ease) infinite;
}
.sc-tm-ok svg {
  width: 12px;
  height: 12px;
}
.sc-tm-ok::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 99px;
  border: 1px solid rgba(var(--blue-rgb), 0.8);
  opacity: 0;
  animation: scTmRing 5.4s var(--ease) infinite;
}
@keyframes scTmSlow {
  0% {
    width: 0;
  }
  88%,
  100% {
    width: 31%;
  }
}
@keyframes scTmFast {
  0%,
  4% {
    width: 0;
  }
  20%,
  90% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes scTmOk {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.4);
  }
  27%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes scTmRing {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.85);
  }
  28% {
    opacity: 0.9;
  }
  48%,
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

.sc-shield {
  place-items: center;
}
.sc-sh-box {
  position: relative;
  display: grid;
  place-items: center;
}
.sc-sh-box::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 99px;
  background: radial-gradient(circle, rgba(var(--blue-rgb), 0.45), transparent 68%);
  opacity: 0;
  animation: scShGlow 5.4s var(--ease) infinite;
}
.sc-sh-svg {
  position: relative;
  display: block;
  width: 70px;
  height: 83px;
  overflow: visible;
}
.sc-sh-fill {
  opacity: 0;
  animation: scShFill 5.4s var(--ease) infinite;
}
.sc-sh-line {
  stroke: url(#shGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(90, 200, 250, 0.5));
  animation: scShLine 5.4s var(--ease) infinite;
}
.sc-sh-ok {
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: scShOk 5.4s var(--ease) infinite;
}
@keyframes scShLine {
  0%,
  4% {
    stroke-dashoffset: 100;
  }
  42%,
  90% {
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    stroke-dashoffset: 100;
  }
}
@keyframes scShOk {
  0%,
  46% {
    stroke-dashoffset: 100;
  }
  62%,
  90% {
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    stroke-dashoffset: 100;
  }
}
@keyframes scShFill {
  0%,
  44% {
    opacity: 0;
  }
  58%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scShGlow {
  0%,
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0.35;
  }
}

.sc-ahead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 0 1.5rem;
}
.sc-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
  height: 72px;
}
.sc-bars b {
  position: relative;
  width: 16px;
  height: var(--h);
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.15);
  transform-origin: bottom;
  animation: scRise 5.4s var(--ease) infinite;
  animation-delay: var(--s, 0s);
}
.sc-bars b.next {
  background: transparent;
  border: 1.5px dashed rgba(var(--blue-rgb), 0.8);
  box-shadow: 0 0 20px rgba(var(--blue-rgb), 0.3);
}
.sc-badge {
  position: absolute;
  left: 50%;
  top: -12px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 99px;
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 6px 16px -6px rgba(var(--blue-rgb), 0.95);
  animation: scBadge 5.4s var(--ease) infinite;
}
.sc-badge svg {
  width: 11px;
  height: 11px;
}
.sc-note {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5e5e63;
}
@keyframes scRise {
  0% {
    transform: scaleY(0.06);
    opacity: 0.2;
  }
  14%,
  88% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.06);
    opacity: 0.2;
  }
}
@keyframes scBadge {
  0%,
  46% {
    opacity: 0;
    transform: translate(-50%, 7px) scale(0.6);
  }
  56%,
  88% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 7px) scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc *,
  .sc {
    animation: none !important;
  }
  .sc-wave b {
    transform: scaleY(var(--p, 1));
  }
  .sc-tm-track i.slow {
    width: 31%;
  }
  .sc-tm-track i.fast {
    width: 100%;
  }
  .sc-tm-ok,
  .sc-badge,
  .sc-sh-fill {
    opacity: 1;
  }
  .sc-tm-ok {
    transform: scale(1);
  }
  .sc-tm-ok::after {
    opacity: 0;
  }
  .sc-badge {
    transform: translate(-50%, 0);
  }
  .sc-sh-line,
  .sc-sh-ok {
    stroke-dashoffset: 0;
  }
  .sc-sh-box::before {
    opacity: 0.35;
  }
}

.cost {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.75rem 1.5rem 1.5rem;
}
@media (min-width: 640px) {
  .cost {
    gap: 3rem;
    padding: 2.25rem 2.5rem 2rem;
  }
}
.cost-side {
  min-width: 0;
}
.cost-cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5e5e63;
}
.cost-cap.on {
  color: #86868b;
}
.cost-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  height: 232px;
  margin-top: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.12);
}
.cost-b {
  flex: none;
  display: grid;
  place-items: center;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #86868b;
  background: rgba(245, 245, 247, 0.07);
  border: 1px solid rgba(245, 245, 247, 0.08);
  opacity: 0;
  animation: costGrow 7s var(--ease) calc(var(--s) * 0.6s) infinite;
}
.cost-b.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0 1.1rem;
  white-space: normal;
  color: #fff;
  background: linear-gradient(150deg, #0071e3 0%, #0a55b4 100%);
  border-color: transparent;
  box-shadow:
    0 16px 36px -16px rgba(var(--blue-rgb), 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.cost-b.main b {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cost-b.main i {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}
.cost-gap {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 0.6rem;
  border: 1px dashed rgba(245, 245, 247, 0.14);
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: #4a4a50;
  opacity: 0;
  animation: costGapIn 7s var(--ease) 1.9s infinite;
}
@keyframes costGapIn {
  0%,
  10% {
    opacity: 0;
  }
  22%,
  86% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes costGrow {
  0% {
    height: 0;
    opacity: 0;
  }
  7%,
  86% {
    height: var(--h);
    opacity: 1;
  }
  95%,
  100% {
    height: 0;
    opacity: 0;
  }
}
.cost-foot {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #5e5e63;
}
.cost-foot.on {
  color: #a1a1a8;
}
.cost * {
  animation-play-state: paused;
}
[data-r].in .cost * {
  animation-play-state: running;
}

.pay {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
}
.pay-ico {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 2px;
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.14);
  color: #5ac8fa;
}
.pay-ico svg {
  width: 15px;
  height: 15px;
}
.pay-t {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f5f7;
}
.pay-d {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #86868b;
}

@media (prefers-reduced-motion: reduce) {
  .cost-b,
  .cost-gap {
    animation: none;
    opacity: 1;
  }
  .cost-b {
    height: var(--h);
  }
}

.step {
  border-top: 1px solid var(--hair);
}

.dz-ok {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-inline: auto;
}
.dz-ok-glow {
  position: absolute;
  inset: -20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--blue-rgb), 0.42), transparent 68%);
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.75s;
}
.dz-ok.in .dz-ok-glow {
  opacity: 1;
}
.dz-ok-svg {
  width: 84px;
  height: 84px;
  overflow: visible;
}
.dz-ok-ring {
  stroke: url(#dzGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgba(var(--blue-rgb), 0.5));
  transition: stroke-dashoffset 0.9s var(--ease);
}
.dz-ok.in .dz-ok-ring {
  stroke-dashoffset: 0;
}
.dz-ok-check {
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--ease) 0.65s;
}
.dz-ok.in .dz-ok-check {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .dz-ok-glow,
  .dz-ok-ring,
  .dz-ok-check {
    transition: none;
  }
}

.pill {
  background: rgba(245, 245, 247, 0.06);
  border: 1px solid rgba(245, 245, 247, 0.09);
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    color 0.4s var(--ease);
}
.pill:hover {
  background: rgba(var(--blue-rgb), 0.14);
  border-color: rgba(var(--blue-rgb), 0.45);
  color: #f5f5f7;
}

.slot {
  background: radial-gradient(120% 120% at 50% 0%, rgba(245, 245, 247, 0.045), transparent 70%), #0c0c0f;
  border: 1px solid rgba(245, 245, 247, 0.07);
  transition:
    border-color 0.5s var(--ease),
    transform 0.6s var(--ease);
}
.slot:hover {
  border-color: rgba(var(--blue-rgb), 0.4);
  transform: translateY(-4px);
}

.wk {
  --wk-gap: 0.5rem;
  --wk-pad: calc(max(0px, (100vw - 1240px) / 2) + 1.5rem);
}
@media (min-width: 640px) {
  .wk {
    --wk-gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .wk {
    --wk-gap: 1.5rem;
    --wk-pad: calc(max(0px, (100vw - 1240px) / 2) + 2.5rem);
  }
}
.wk-rail {
  display: flex;
  gap: var(--wk-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--wk-pad);
  padding-inline: var(--wk-pad);
  padding-block: 5px 1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  --f-w: 0px;
  --f-l: 0px;
  --f-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--f-l), #000 calc(100% - var(--f-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--f-l), #000 calc(100% - var(--f-r)), transparent 100%);
}
@media (min-width: 640px) {
  .wk-rail {
    --f-w: 64px;
  }
}
.wk-rail::-webkit-scrollbar {
  display: none;
}
.wk-rail.is-drag {
  cursor: grabbing;
  scroll-snap-type: none;
}
.wk-rail.is-drag .wk-link {
  transition: none;
}
.wk-card {
  flex: 0 0 auto;
  width: clamp(272px, calc(100vw - var(--wk-pad) * 2), 424px);
  scroll-snap-align: start;
}
.wk-rail [data-r] {
  transform: none;
}
.wk-link:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.9);
  outline-offset: 3px;
}
.shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0c0c0f;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.12);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgba(245, 245, 247, 0.04);
}
.shot-dots {
  display: flex;
  gap: 0.25rem;
  flex: none;
}
.shot-dots i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.18);
}
.shot-url {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.05);
  font-size: 11px;
  color: #9a9aa0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.5s var(--ease);
}
.wk-card:hover .shot-url {
  color: #f5f5f7;
}
.shot-url svg {
  flex: none;
  opacity: 0.7;
}
.shot-fav {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  object-fit: contain;
}
.shot-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #0c0c0f;
}


.rz-tor.jest-lepki {
  height: 250vh;
}
@media (min-width: 1024px) {
  .rz-tor.jest-lepki {
    height: 330vh;
  }
}
.rz-tor.jest-lepki .rz-lepki {
  position: sticky;
  top: clamp(84px, 11vh, 132px);
}
.rz-ekran {
  border-radius: 20px;
}
@media (min-width: 768px) {
  .rz-ekran {
    border-radius: 26px;
  }
}
.rz-kadr {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0c0c0f;
}
/* Zrzut/film wypełnia .rz-kadr od krawędzi do krawędzi, więc box-shadow na
   .shot (rodzicu) ginie pod nim po bokach i na dole - widać go tylko nad
   paskiem adresu, gdzie nic go nie zasłania. Pseudoelement maluje się NAD
   dziećmi (obrazem/filmem), więc ta sama ramka jest tam już zawsze widoczna,
   niezależnie jak ciemny jest sam zrzut. */
.rz-kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  /* .rz-kadr to tylko dolna część .rz-ekran (pod paskiem adresu), więc
     tylko jej dwa dolne rogi pokrywają się z zewnętrznym zaokrągleniem -
     góra jest prostą krawędzią pod shot-bar. Bez tego promień ramki byłby
     kwadratowy i wystawałby poza zaokrąglenie rodzica tuż przed przycięciem. */
  border-radius: 0 0 20px 20px;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.12);
  pointer-events: none;
}
@media (min-width: 768px) {
  .rz-kadr::after {
    border-radius: 0 0 26px 26px;
  }
}
@media (min-width: 1024px) {
  .rz-kadr {
    aspect-ratio: 16 / 9;
  }
}
.rz-kadr video,
.rz-zrzut {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rz-zrzut {
  --rz: 0%;
  object-position: 50% var(--rz);
}

.wk-nav {
  display: inline-flex;
  gap: 0.6rem;
}
.wk-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #f5f5f7;
  background: rgba(245, 245, 247, 0.04);
  border: 1px solid var(--hair);
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    opacity 0.35s var(--ease);
}
.wk-btn:hover:not(:disabled) {
  background: rgba(var(--blue-rgb), 0.14);
  border-color: rgba(var(--blue-rgb), 0.5);
}
.wk-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.wk-prog {
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.1);
  overflow: hidden;
}
.wk-prog i {
  position: absolute;
  inset-block: 0;
  left: var(--x, 0%);
  width: var(--w, 30%);
  border-radius: 999px;
  background-image: var(--grad-blue);
}

@media (max-width: 400px) {
  .wl-res {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inp {
  width: 100%;
  background: #141418;
  border: 1px solid rgba(245, 245, 247, 0.1);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  color: #f5f5f7;
  font-size: 1.0625rem;
  font-family: var(--sans);
  transition:
    border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}
.inp::placeholder {
  color: #5e5e63;
}
.inp:focus {
  outline: none;
  border-color: var(--blue);
  background: #17171c;
}
select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
select.inp option {
  background: #141418;
  color: #f5f5f7;
}
.cbx {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgba(245, 245, 247, 0.22);
  border-radius: 6px;
  background: #141418;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.cbx:checked {
  background: var(--grad-blue);
  border-color: var(--blue);
}
.cbx:checked::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"].chipbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
input[type="checkbox"].chipbox:checked + .pill {
  background-image: var(--grad-blue);
  border-color: var(--blue);
  color: #fff;
}
input[type="checkbox"].chipbox:focus-visible + .pill {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.channel-card {
  position: relative;
  background: linear-gradient(180deg, #17171b 0%, #101013 100%);
  border: 1px solid rgba(245, 245, 247, 0.09);
  border-radius: 28px;
  padding: 2rem;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
}
@media (min-width: 1024px) {
  .channel-card {
    padding: 2.75rem;
  }
}
.channel-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  filter: blur(10px);
}
.channel-badge {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.65);
}
.channel-tagline {
  margin-top: 3px;
  font-size: 13px;
  color: #86868b;
}
.format-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #c9c9cf;
  background: rgba(245, 245, 247, 0.055);
  border: 1px solid rgba(245, 245, 247, 0.09);
}

.feat-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(var(--blue-rgb), 0.13);
  border: 1px solid rgba(var(--blue-rgb), 0.24);
  color: #5ac8fa;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.9rem;
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: #86868b;
}
.trust-strip svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: #0071e3;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 13px;
  color: #86868b;
  transition: color 0.3s var(--ease);
}
.trust-badge:hover {
  color: #f5f5f7;
}
.trust-badge-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
}
.trust-badge img {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  object-fit: cover;
}

.cert {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.03);
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.cert:hover {
  border-color: rgba(var(--blue-rgb), 0.4);
  background: rgba(var(--blue-rgb), 0.07);
}
.cert img {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  object-fit: cover;
}
.cert-t {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #f5f5f7;
}
.cert-d {
  display: block;
  margin-top: 1px;
  font-size: 0.8125rem;
  color: #86868b;
}

.doc {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #86868b;
}
.doc h2 {
  margin: 3rem 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f5f5f7;
  scroll-margin-top: 7rem;
}
.doc h2:first-child {
  margin-top: 0;
}
.doc p + p,
.doc ul + p,
.doc ol + p,
.doc ul,
.doc ol {
  margin-top: 1rem;
}
.doc ul,
.doc ol {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.35rem;
}
.doc ul {
  list-style: disc;
}
.doc ol {
  list-style: decimal;
}
.doc li::marker {
  color: #5e5e63;
}
.doc-link {
  color: #b6b6bc;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 245, 247, 0.25);
  overflow-wrap: anywhere;
  transition:
    color 0.3s var(--ease),
    text-decoration-color 0.3s var(--ease);
}
.doc-link:hover {
  color: #f5f5f7;
  text-decoration-color: rgba(245, 245, 247, 0.6);
}

.step-card {
  position: relative;
  overflow: hidden;
}
.step-card .ghost-num {
  position: absolute;
  top: -0.5rem;
  right: 0.75rem;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(245, 245, 247, 0.045);
  pointer-events: none;
}

.build {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(245, 245, 247, 0.1);
  background: #0b0b0e;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.build-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
}
@media (max-width: 900px) {
  .build-grid {
    grid-template-columns: 1fr;
  }
}
.build-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.7rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
  font-size: 11.5px;
  color: #6b6b73;
  letter-spacing: 0.02em;
}
.build-bar i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.16);
}
.build-bar .url {
  margin-left: 0.7rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.06);
  color: #86868b;
}

.build-code {
  background: #0e0e12;
  border-right: 1px solid rgba(245, 245, 247, 0.07);
  min-width: 0;
}
@media (max-width: 900px) {
  .build-code {
    border-right: 0;
    border-bottom: 1px solid rgba(245, 245, 247, 0.07);
  }
}
.build-code pre {
  margin: 0;
  padding: 1.4rem 1.2rem 1.6rem;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.85;
  color: #c9d1d9;
}
@media (max-width: 480px) {
  .build-code pre {
    font-size: 10px;
  }
}
.cl {
  display: block;
  white-space: pre;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.cl.in {
  opacity: 1;
  transform: none;
}
.cl.active::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.12em;
  vertical-align: -0.19em;
  background: #79c0ff;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.build-code .t {
  color: #79c0ff;
}
.build-code .a {
  color: #d2a8ff;
}
.build-code .s {
  color: #a5d6ff;
}
.build-code .c {
  color: #8b949e;
}

.build-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prev {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 82% 0%, rgba(230, 46, 63, 0.16), transparent 60%), #131315;
  padding: 1.1rem 1.6rem 1.5rem;
  font-family: var(--sans);
}
@media (max-width: 480px) {
  .prev {
    padding: 1rem 1.1rem 1.3rem;
  }
}
.prev [data-prev] {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.prev [data-prev].in {
  opacity: 1;
  transform: none;
}

.prev-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.1);
}
.prev-logo {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f5f2ef;
}
.prev-nav nav {
  display: flex;
  gap: 0.9rem;
  margin-left: auto;
  font-size: 11.5px;
  color: #9a9a9e;
}
.prev-navbtn {
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: #e62e3f;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.prev-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.3rem 0 1.4rem;
}
@media (max-width: 560px) {
  .prev-hero {
    grid-template-columns: 1fr;
  }
}
.prev-eyebrow {
  margin: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #ff5a68;
}
.prev-h {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: clamp(1.1rem, 1.85vw, 1.48rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f5f2ef;
  text-wrap: balance;
}
.prev-lead {
  margin: 0.6rem 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #9a9a9e;
}
.prev-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
}
.prev-btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 7px;
  background: #e62e3f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(230, 46, 63, 0.6);
}
.prev-link {
  font-size: 11.5px;
  font-weight: 600;
  color: #f5f2ef;
}

.prev-figure {
  position: relative;
  margin: 0;
}
.prev-img {
  height: 9rem;
  border-radius: 11px;
  overflow: hidden;
  position: relative;
  background: #0c0c0e;
  box-shadow:
    0 14px 30px -14px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(245, 245, 247, 0.08);
}
.prev-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 45%;
}
.prev-badge {
  position: absolute;
  left: -0.7rem;
  bottom: -0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}
.prev-stars {
  color: #e6a13a;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1;
}
.prev-badge-txt {
  font-size: 10.5px;
  color: #8a8a8e;
  white-space: nowrap;
}
.prev-badge-txt b {
  font-size: 12px;
  font-weight: 700;
  color: #17171a;
  letter-spacing: -0.01em;
}

.prev-facts {
  display: flex;
  gap: 1.9rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 245, 247, 0.1);
}
.prev-facts div b {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  color: #f5f2ef;
}
.prev-facts div span {
  display: block;
  margin-top: 0.1rem;
  font-size: 10.5px;
  color: #8a8a8e;
}

.build-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.4rem;
  margin-top: 1.1rem;
}
.build-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: 13px;
  font-weight: 500;
  color: #86868b;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.build-replay:hover {
  color: #f5f5f7;
  border-color: rgba(var(--blue-rgb), 0.5);
  background: rgba(var(--blue-rgb), 0.08);
}
.build-replay svg {
  transition: transform 0.5s var(--ease);
}
.build-replay:hover svg {
  transform: rotate(-180deg);
}

@media (prefers-reduced-motion: reduce) {
  .cl,
  .prev [data-prev] {
    opacity: 1 !important;
    transform: none !important;
  }
  .cl.active::after {
    animation: none;
  }
}

.dash {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(245, 245, 247, 0.1);
  background: #0b0b0e;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.dash .build-bar {
  justify-content: space-between;
}
.dash-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #86868b;
}
.dash-live-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #34c759;
  box-shadow: 0 0 7px rgba(52, 199, 89, 0.85);
  animation: dashLive 1.8s ease-in-out infinite;
}
@keyframes dashLive {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
.dash-body {
  display: grid;
  grid-template-columns: 200px 1fr;
}
@media (max-width: 780px) {
  .dash-body {
    grid-template-columns: 1fr;
  }
  .dash-side {
    display: none;
  }
}
.dash-side {
  padding: 1.4rem 1rem;
  border-right: 1px solid rgba(245, 245, 247, 0.07);
  background: #0e0e12;
}
.dash-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.5rem;
  font-size: 13.5px;
  font-weight: 600;
  color: #d5d5d8;
}
.dash-brand-mark {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 7px;
  background: var(--grad-blue);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.dash-nav {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: #6b6b73;
}
.dash-nav-item svg {
  flex: none;
  width: 15px;
  height: 15px;
}
.dash-nav-item.is-active {
  background: rgba(var(--blue-rgb), 0.14);
  color: #eaeaec;
}
.dash-nav-item.is-active svg {
  color: #5ac8fa;
}
.dash-main {
  padding: 1.4rem 1.2rem 1.6rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .dash-main {
    padding: 1.7rem 1.8rem 2rem;
  }
}
.dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dash-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #eaeaec;
}
.dash-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.dash-role {
  font-size: 11px;
  font-weight: 600;
  color: #86868b;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.055);
  border: 1px solid rgba(245, 245, 247, 0.09);
}
.dash-avatar {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--grad-blue);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}
.dash-kpis {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (min-width: 640px) {
  .dash-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dash-kpi {
  padding: 0.9rem 1rem 1rem;
  border-radius: 14px;
  background: #101014;
  border: 1px solid rgba(245, 245, 247, 0.07);
}
.dash-kpi-label {
  font-size: 11px;
  color: #86868b;
}
.dash-kpi-num {
  margin-top: 0.35rem;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
}
.dash-kpi-trend {
  margin-top: 0.3rem;
  font-size: 11px;
  font-weight: 600;
}
.dash-kpi-trend.is-up {
  color: #34c759;
}
.dash-kpi-trend.is-steady {
  color: #5ac8fa;
}
.dash-panels {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 900px) {
  .dash-panels {
    grid-template-columns: 1.55fr 1fr;
  }
}
.dash-chart-card,
.dash-int-card {
  padding: 1.1rem 1.2rem 1.3rem;
  border-radius: 14px;
  background: #101014;
  border: 1px solid rgba(245, 245, 247, 0.07);
}
.dash-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #c9c9cf;
}
.dash-chart {
  display: block;
  width: 100%;
  height: 130px;
  margin-top: 0.8rem;
  overflow: visible;
}
.dash-chart-area {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.5s;
}
.dash-chart-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.75));
  transition: stroke-dashoffset 1.7s var(--ease);
}
.dash-chart-dot {
  fill: #5ac8fa;
  opacity: 0;
  transition: opacity 0.4s var(--ease) 1.9s;
  animation: nodeGlow 2.6s ease-in-out infinite 1.9s;
}
.dash[data-r].in .dash-chart-line {
  stroke-dashoffset: 0;
}
.dash[data-r].in .dash-chart-area {
  opacity: 1;
}
.dash[data-r].in .dash-chart-dot {
  opacity: 1;
}
.dash-int-list {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.dash-int-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(245, 245, 247, 0.055);
  font-size: 12.5px;
  color: #c9c9cf;
}
.dash-int-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.dash-status-dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
}
.dash-status-dot.is-ok {
  background: #34c759;
  box-shadow: 0 0 6px rgba(52, 199, 89, 0.7);
}
.dash-status-dot.is-sync {
  background: #f5a623;
  animation: dashLive 1.4s ease-in-out infinite;
}
.dash-status-pill {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
.dash-status-pill.is-ok {
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
}
.dash-status-pill.is-sync {
  color: #f5a623;
  background: rgba(245, 166, 35, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .dash-chart-line,
  .dash-chart-area,
  .dash-chart-dot {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

.pv {
  display: grid;
  justify-items: center;
  gap: 2.6rem;
}
@media (min-width: 1024px) {
  .pv {
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: center;
    align-items: center;
    justify-items: start;
    gap: 4.5rem;
  }
}
.pv-phone {
  position: relative;
  width: 264px;
  max-width: 78vw;
  aspect-ratio: 9 / 19.4;
  background: #000;
  border: 2px solid rgba(245, 245, 247, 0.16);
  border-radius: 52px;
  overflow: hidden;
  box-shadow:
    0 60px 110px -34px rgba(0, 0, 0, 0.95),
    0 0 90px -30px rgba(var(--blue-rgb), 0.45),
    inset 0 0 0 5px #0b0b0e;
}
.pv-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 25px;
  border-radius: 20px;
  background: #000;
  z-index: 3;
}
.pv-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.55);
  z-index: 3;
}
.pv-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #17171c 0%, #0b0b0e 100%);
}
.pv-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.2rem 0.2rem;
  font-size: 11px;
  font-weight: 600;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
}
.pv-status svg {
  width: 14px;
  height: 14px;
}

.pv-views {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pv-view {
  position: absolute;
  inset: 0;
  padding: 1.1rem 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  animation: pvView 12s var(--ease) infinite;
  animation-delay: calc(var(--i) * 3s - 12s);
}
@keyframes pvView {
  0% {
    opacity: 0;
    transform: translateX(26px);
  }
  2.5%,
  22% {
    opacity: 1;
    transform: translateX(0);
  }
  25% {
    opacity: 0;
    transform: translateX(-26px);
  }
  25.01%,
  100% {
    opacity: 0;
    transform: translateX(26px);
  }
}
.pv-hi {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #f5f5f7;
}

.pv-ring {
  position: relative;
  width: 166px;
  margin: 0.9rem auto 0.2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.pv-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.pv-ring circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.pv-ring-bg {
  stroke: rgba(245, 245, 247, 0.09);
}
.pv-ring-fill {
  stroke: var(--blue);
  stroke-dasharray: 327;
  stroke-dashoffset: 84;
  filter: drop-shadow(0 0 7px rgba(var(--blue-rgb), 0.6));
  animation: pvRing 12s var(--ease) infinite;
}
@keyframes pvRing {
  0%,
  1% {
    stroke-dashoffset: 327;
  }
  14%,
  100% {
    stroke-dashoffset: 84;
  }
}
.pv-ring-mid {
  position: relative;
  text-align: center;
}
.pv-ring-num {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pv-ring-lab {
  margin-top: 0.25rem;
  font-size: 10.5px;
  color: #6e6e75;
}
.pv-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.pv-tile {
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 14px;
  background: rgba(245, 245, 247, 0.06);
}
.pv-tile-k {
  font-size: 9.5px;
  color: #6e6e75;
}
.pv-tile-v {
  margin-top: 0.15rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
}

.pv-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 0.32rem;
  height: 190px;
  margin-top: 1rem;
}
.pv-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.32rem;
  margin-top: 0.4rem;
  text-align: center;
  font-size: 9px;
  color: #6e6e75;
}
.pv-chart span {
  height: var(--h);
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.14);
  transform-origin: bottom;
  animation: pvBar 12s var(--ease) infinite;
}
.pv-chart span.is-now {
  background: var(--grad-blue);
}
.pv-chart span:nth-child(2) {
  animation-delay: 0.05s;
}
.pv-chart span:nth-child(3) {
  animation-delay: 0.1s;
}
.pv-chart span:nth-child(4) {
  animation-delay: 0.15s;
}
.pv-chart span:nth-child(5) {
  animation-delay: 0.2s;
}
.pv-chart span:nth-child(6) {
  animation-delay: 0.25s;
}
.pv-chart span:nth-child(7) {
  animation-delay: 0.3s;
}
@keyframes pvBar {
  0%,
  25% {
    transform: scaleY(0);
  }
  32%,
  100% {
    transform: scaleY(1);
  }
}

.pv-rows {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.75rem;
}
.pv-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 13px;
  background: rgba(245, 245, 247, 0.05);
}
.pv-row.is-top {
  background: rgba(var(--blue-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb), 0.3);
}
.pv-row > div {
  flex: 1;
  min-width: 0;
}
.pv-av {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-blue);
}
.pv-row-t {
  font-size: 12px;
  font-weight: 600;
  color: #f5f5f7;
}
.pv-row-s {
  font-size: 9.5px;
  color: #6e6e75;
}
.pv-medal {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: #6e6e75;
  font-variant-numeric: tabular-nums;
}
.pv-row.is-top .pv-medal {
  color: #f5f5f7;
}
.pv-ico {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);
}
.pv-ico svg {
  width: 13px;
  height: 13px;
}
.pv-cta {
  margin-top: auto;
  padding: 0.6rem;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--grad-blue);
}
.pv-lab {
  margin-top: 0.9rem;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e75;
}

.pv-me {
  text-align: center;
  padding-top: 0.4rem;
}
.pv-me-av {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-blue);
}
.pv-me-n {
  margin-top: 0.6rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #f5f5f7;
}
.pv-me-s {
  margin-top: 0.15rem;
  font-size: 10px;
  color: #6e6e75;
}
.pv-goal {
  margin-top: 0.9rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 15px;
  background: rgba(245, 245, 247, 0.06);
}
.pv-goal-k {
  font-size: 9.5px;
  color: #6e6e75;
}
.pv-goal-v {
  margin-top: 0.15rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f5f7;
}
.pv-goal-bar {
  display: block;
  margin-top: 0.55rem;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(245, 245, 247, 0.1);
}
.pv-goal-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-blue);
  animation: pvGoal 12s var(--ease) infinite;
}
@keyframes pvGoal {
  0%,
  76% {
    width: 0;
  }
  88%,
  100% {
    width: 72%;
  }
}
.pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.pv-chip {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  color: #c9c9cf;
  background: rgba(245, 245, 247, 0.07);
}

.pv-tabbar {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.6rem 0.55rem 1.35rem;
  border-top: 1px solid rgba(245, 245, 247, 0.08);
}
.pv-ind {
  position: absolute;
  top: 0.3rem;
  left: 0.55rem;
  width: calc((100% - 1.1rem) / 4);
  height: 2px;
  border-radius: 999px;
  background: var(--grad-blue);
  animation: pvInd 12s var(--ease) infinite;
}
@keyframes pvInd {
  0%,
  22% {
    transform: translateX(0);
  }
  25%,
  47% {
    transform: translateX(100%);
  }
  50%,
  72% {
    transform: translateX(200%);
  }
  75%,
  97% {
    transform: translateX(300%);
  }
  100% {
    transform: translateX(0);
  }
}
.pv-tab {
  display: grid;
  place-items: center;
  color: #5e5e63;
  animation: pvTab 12s var(--ease) infinite;
  animation-delay: calc(var(--i) * 3s - 12s);
}
.pv-tab svg {
  width: 17px;
  height: 17px;
}
@keyframes pvTab {
  0%,
  24.9% {
    color: var(--blue);
  }
  25%,
  100% {
    color: #5e5e63;
  }
}

.pv-side {
  max-width: 34rem;
}
@media (max-width: 1023px) {
  .pv-side {
    text-align: center;
  }
  .pv-side p {
    margin-left: auto;
    margin-right: auto;
  }
  .pv-badges {
    margin-inline: auto;
  }
}
.pv-pts {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.6rem;
}
.pv-pts li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 14.5px;
  line-height: 1.5;
  color: #86868b;
  text-align: left;
}
.pv-pts b {
  font-weight: 600;
  color: #f5f5f7;
}
.pv-pt-ico {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 1px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);
}
.pv-pt-ico svg {
  width: 13px;
  height: 13px;
}

.pv-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 25rem;
  margin-top: 1.8rem;
}
.pv-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgba(245, 245, 247, 0.05);
}
.pv-badge-ico {
  flex: none;
  width: 21px;
  height: 21px;
}
.pv-badge-tx {
  display: grid;
  min-width: 0;
}
.pv-badge-tx small {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6e6e75;
}
.pv-badge-tx b {
  margin-top: 1px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f5f5f7;
  white-space: nowrap;
}
.pv-note {
  margin-top: 1.1rem;
  font-size: 12px;
  line-height: 1.55;
  color: #6e6e75;
  max-width: 42ch;
}

@media (max-width: 480px) {
  .pv-phone {
    width: 236px;
  }
  .pv-badges {
    grid-template-columns: minmax(0, 1fr);
    max-width: 17rem;
    margin-inline: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pv-view,
  .pv-ind,
  .pv-tab,
  .pv-ring-fill,
  .pv-chart span,
  .pv-goal-bar i {
    animation: none;
  }
  .pv-view {
    opacity: 0;
  }
  .pv-view[style*="--i: 0"] {
    opacity: 1;
  }
  .pv-tab:first-of-type {
    color: var(--blue);
  }
  .pv-goal-bar i {
    width: 72%;
  }
}

.uv-logo {
  filter: brightness(0) invert(1);
}
.demo {
  --dm-bg: linear-gradient(180deg, #15151b 0%, #0b0b0f 100%);
  --dm-hair: var(--hair);
  --dm-ink: #f5f5f7;
  --dm-muted: #86868b;
  --dm-accent: var(--grad-blue);
  --dm-accent-t: #0071e3;
  --dm-live: #5ac8fa;
  --dm-ok: #30d158;
  --dm-paper: linear-gradient(180deg, #fff 0%, #f1f1f4 100%);
  --dm-paper-ink: #1d1d1f;
  --dm-paper-shadow: 0 24px 55px -24px rgba(0, 0, 0, 0.9);

  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--dm-bg);
  border: 1px solid var(--dm-hair);
  box-shadow:
    0 44px 100px -34px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.demo--vi {
  --dm-bg: linear-gradient(180deg, #0a0c11 0%, #06070a 100%);
  --dm-hair: rgba(255, 255, 255, 0.08);
  --dm-ink: #f2f5f8;
  --dm-muted: #9aa4b2;
  --dm-accent: linear-gradient(135deg, #c7f73e 0%, #9b83ff 100%);
  --dm-accent-t: #d9ff5c;
  --dm-live: #c7f73e;
  --dm-ok: #c7f73e;
  --dm-paper: rgba(255, 255, 255, 0.04);
  --dm-paper-ink: #f2f5f8;
  --dm-paper-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--dm-hair);
  background: rgba(245, 245, 247, 0.02);
}
.demo-dots {
  display: flex;
  gap: 0.32rem;
  flex: none;
}
.demo-dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.16);
}
.demo-file {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  font-size: 12.5px;
  color: var(--dm-muted);
}
.demo-file svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.demo-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  font-size: 12.5px;
  color: var(--dm-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--ease);
}
.demo-chip svg {
  width: 12.5px;
  height: 12.5px;
}
.demo-chip b {
  color: var(--dm-ink);
  font-weight: 600;
  transition: color 0.5s var(--ease);
}
.demo-chip.is-on,
.demo-chip.is-on b {
  color: var(--dm-ok);
}
.demo-live {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--dm-live);
  animation: demo-blink 1.4s var(--ease) infinite;
}
.demo.is-done .demo-live {
  background: var(--dm-ok);
  animation: none;
}
@keyframes demo-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.demo-body {
  display: grid;
  gap: 1.6rem;
  padding: 1.15rem;
}
@media (min-width: 1024px) {
  .demo-body {
    grid-template-columns: 0.84fr 1fr;
    gap: 2.4rem;
    padding: 1.9rem;
    align-items: center;
  }
}

.demo-step {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0;
  opacity: 0.3;
  transition: opacity 0.5s var(--ease);
}
.demo-step.is-on {
  opacity: 1;
}
.demo-step + .demo-step {
  border-top: 1px solid var(--dm-hair);
}
.demo-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--dm-muted);
  box-shadow: inset 0 0 0 1px var(--dm-hair);
  transition:
    background-color 0.5s var(--ease),
    color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.demo-num svg {
  width: 15px;
  height: 15px;
}
.demo-step.is-on .demo-num {
  background-image: var(--dm-accent);
  color: #fff;
  box-shadow: none;
}
.demo--vi .demo-num {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.demo--vi .demo-num svg {
  width: 20px;
  height: 20px;
}
.demo--vi .demo-step.is-on .demo-num {
  background-image: none;
  color: #d9ff5c;
}
.demo-step-t {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--dm-ink);
  letter-spacing: -0.01em;
}
.demo-step p {
  margin-top: 0.22rem;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dm-muted);
}
.demo-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.demo-src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--dm-hair);
  font-size: 11.5px;
  color: #c9c9cf;
}
.demo--vi .demo-src {
  color: var(--dm-muted);
}
.demo-src-meta {
  color: #0866ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.demo-paper {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 16px;
  background: var(--dm-paper);
  color: var(--dm-paper-ink);
  box-shadow: var(--dm-paper-shadow);
}
@media (min-width: 1024px) {
  .demo-paper {
    min-height: 320px;
  }
}
.demo-part {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.demo-part.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .demo-part,
  .demo-step,
  .uvb-cols > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .demo-live {
    animation: none;
  }
}

.uvb-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.uvb-brand {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  background-image: var(--grad-blue);
}
.uvb-tit b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.uvb-tit span {
  display: block;
  margin-top: 0.05rem;
  font-size: 11px;
  color: #6e6e73;
}
.uvb-tag {
  margin-left: auto;
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.1);
  color: #0071e3;
  font-size: 10.5px;
  font-weight: 600;
}
.uvb-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.uvb-kpis > div {
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.045);
}
.uvb-kpi-l {
  display: block;
  font-size: 10.5px;
  color: #6e6e73;
  line-height: 1.3;
}
.uvb-kpis b {
  display: block;
  margin-top: 0.2rem;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.uvb-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 10.5px;
  color: #6e6e73;
}
.uvb-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.uvb-legend i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
}
.uvb-legend i + i {
  margin-left: 0.45rem;
}
.uvb-legend i.g {
  background: #0071e3;
}
.uvb-legend i.m {
  background: rgba(0, 0, 0, 0.22);
}
.uvb-cols {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 76px;
  margin-top: 0.55rem;
}
.uvb-cols > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: var(--h);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.uvb-chart.is-on .uvb-cols > span {
  transform: none;
}
.uvb-cols i {
  display: block;
}
.uvb-cols i.m {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 3px 3px 0 0;
}
.uvb-cols i.g {
  background-image: linear-gradient(180deg, #0071e3 0%, #5ac8fa 100%);
  border-radius: 0 0 3px 3px;
}
.uvb-ai {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.07);
  border: 1px solid rgba(var(--blue-rgb), 0.16);
}
.uvb-ai-ic {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background-image: var(--grad-blue);
  color: #fff;
}
.uvb-ai-ic svg {
  width: 13px;
  height: 13px;
}
.uvb-ai b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #0071e3;
}
.uvb-type {
  display: block;
  margin-top: 0.15rem;
  min-height: 2.4em;
  font-size: 12.5px;
  line-height: 1.45;
  color: #3a3a3c;
}
.uvb-type.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: #0071e3;
  animation: demo-blink 0.9s steps(1) infinite;
}
.uvb-done {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  font-size: 11.5px;
  font-weight: 500;
  color: #1c8c3c;
}
.uvb-done svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.vi-fmt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vi-chip {
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 500;
  color: #9aa4b2;
  transition:
    background-color 0.45s var(--ease),
    color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.vi-chip.is-on {
  background: #c7f73e;
  box-shadow: none;
  color: #06070a;
  font-weight: 600;
}
.vi-px {
  margin-left: auto;
  font-size: 10.5px;
  color: #626b7a;
}
.vi-rows {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.vi-row {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}
.vi-thumb {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #d9ff5c;
  background-color: rgba(255, 255, 255, 0.05);
  background-image:
    linear-gradient(45deg, #1a1f2a 25%, transparent 0), linear-gradient(-45deg, #1a1f2a 25%, transparent 0), linear-gradient(45deg, transparent 75%, #1a1f2a 0), linear-gradient(-45deg, transparent 75%, #1a1f2a 0);
  background-size: 10px 10px;
  background-position:
    0 0,
    0 5px,
    5px -5px,
    -5px 0;
}
.vi-thumb svg {
  width: 14px;
  height: 14px;
}
.vi-meta {
  display: block;
  min-width: 0;
}
.vi-name {
  display: block;
  font-size: 11.5px;
  color: #f2f5f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vi-bar {
  display: block;
  margin-top: 0.34rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.vi-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #c7f73e 0%, #9b83ff 100%);
  transition: width 1.1s var(--ease);
}
.vi-row.is-run .vi-bar i {
  width: var(--w);
}
.vi-size {
  text-align: right;
  min-width: 4.6rem;
}
.vi-size b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #f2f5f8;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vi-cut {
  display: block;
  margin-top: 0.1rem;
  font-size: 10px;
  font-weight: 700;
  color: #c7f73e;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.vi-row.is-done .vi-cut {
  opacity: 1;
}
.vi-total {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vi-total-l {
  font-size: 10.5px;
  color: #626b7a;
}
.vi-total-l b {
  display: block;
  margin-top: 0.1rem;
  font-size: 14px;
  font-weight: 600;
  color: #f2f5f8;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vi-total-cut {
  flex: none;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(199, 247, 62, 0.14);
  color: #d9ff5c;
  font-size: 11px;
  font-weight: 700;
}
.vi-zip {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #c7f73e;
  color: #06070a;
  font-size: 11.5px;
  font-weight: 600;
}
.vi-zip svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

@media (prefers-reduced-motion: reduce) {
  .vi-bar i,
  .vi-cut {
    transition: none;
  }
}

.hub {
  position: relative;
  width: min(560px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub-cable {
  stroke: rgba(245, 245, 247, 0.14);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.hub-pulse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.9));
  animation: hubPulse 3.4s linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes hubPulse {
  to {
    stroke-dashoffset: -100;
  }
}
.hub-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--grad-blue);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 1px rgba(245, 245, 247, 0.12),
    0 25px 60px -18px rgba(var(--blue-rgb), 0.7);
  animation: hubBreathe 4s ease-in-out infinite;
}
@keyframes hubBreathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(245, 245, 247, 0.12),
      0 25px 60px -18px rgba(var(--blue-rgb), 0.7);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(245, 245, 247, 0.12),
      0 30px 70px -14px rgba(var(--blue-rgb), 0.95);
  }
}
.hub-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 44px;
  height: 44px;
}
.hub-icon {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: #131317;
  border: 1px solid rgba(245, 245, 247, 0.1);
  display: grid;
  place-items: center;
  color: #9c9ca5;
}
.hub-icon.is-mark {
  font-size: 13px;
  font-weight: 700;
  color: #c9c9cf;
}
.hub-pill {
  position: absolute;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #131317;
  border: 1px solid var(--hair);
  font-size: 11px;
  font-weight: 600;
  color: #d5d5d8;
  white-space: nowrap;
}
.hub-pill--above {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -0.6rem);
}
.hub-pill--below {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.6rem);
}
.hub-pill--left {
  right: 100%;
  top: 50%;
  transform: translate(-0.6rem, -50%);
}
.hub-pill--right {
  left: 100%;
  top: 50%;
  transform: translate(0.6rem, -50%);
}
@media (max-width: 640px) {
  .hub {
    width: min(560px, 78vw);
  }
  .hub-node {
    width: 34px;
    height: 34px;
  }
  .hub-icon {
    border-radius: 10px;
  }
  .hub-pill {
    font-size: 9.5px;
    padding: 0.24rem 0.55rem;
  }
  .hub-pill--left,
  .hub-pill--right {
    left: 50%;
    right: auto;
    top: 100%;
    bottom: auto;
    transform: translate(-50%, 0.5rem);
  }
}

.faq-p {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq-b[aria-expanded="true"] + .faq-p {
  grid-template-rows: 1fr;
}
.faq-p > div {
  overflow: hidden;
}
.faq-b .sign {
  transition: transform 0.4s var(--ease);
}
.faq-b[aria-expanded="true"] .sign {
  transform: rotate(45deg);
}

.ul-hover:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  [data-r] {
    opacity: 1 !important;
    transform: none !important;
  }
  .loop-run {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.9;
  }
  .wire-run {
    display: none;
  }
  .core-ring {
    animation: none;
    opacity: 0.3;
  }
  .out-nodes circle {
    animation: none;
    opacity: 0.9;
  }
}

.serp {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(245, 245, 247, 0.1);
  background: #0b0b0e;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.serp-grid {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
}
@media (max-width: 940px) {
  .serp-grid {
    grid-template-columns: 1fr;
  }
}
.serp-main {
  min-width: 0;
  border-right: 1px solid rgba(245, 245, 247, 0.07);
}
@media (max-width: 940px) {
  .serp-main {
    border-right: 0;
    border-bottom: 1px solid rgba(245, 245, 247, 0.07);
  }
}

.serp-search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.3rem 1.4rem 0.9rem;
  padding: 0.68rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 245, 247, 0.12);
  background: rgba(245, 245, 247, 0.04);
}
@media (max-width: 480px) {
  .serp-search {
    margin: 1rem 1rem 0.7rem;
    padding: 0.6rem 0.9rem;
  }
}
.serp-search > svg {
  flex: none;
  color: #6b6b73;
}
.serp-q {
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #f5f5f7;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 480px) {
  .serp-q {
    font-size: 12.5px;
  }
}
.serp-caret {
  width: 1.5px;
  height: 15px;
  border-radius: 2px;
  background: #5ac8fa;
  animation: serp-blink 1.05s steps(1, end) infinite;
}
.serp-caret.off {
  opacity: 0;
  animation: none;
}
@keyframes serp-blink {
  50% {
    opacity: 0;
  }
}
.serp-count {
  margin: 0 1.6rem;
  font-size: 11px;
  color: #5e5e63;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.serp-main.is-on .serp-count {
  opacity: 1;
}

.serp-list {
  --row: 4.3rem;
  position: relative;
  height: calc(8 * var(--row));
  margin: 0.6rem 1rem 1.3rem;
  list-style: none;
}
@media (max-width: 480px) {
  .serp-list {
    --row: 4.6rem;
    margin: 0.5rem 0.6rem 1rem;
  }
}
.serp-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 0.8rem;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(calc(var(--p, 0) * var(--row)));
  transition:
    transform 0.85s var(--ease),
    opacity 0.5s var(--ease),
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease);
  border: 1px solid transparent;
}
.serp-list.is-on .serp-row {
  opacity: 1;
  transition-delay: 0s, calc(var(--i) * 55ms), 0s, 0s;
}
.serp-rank {
  flex: none;
  width: 1.35rem;
  font-size: 12px;
  font-weight: 600;
  color: #5e5e63;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.serp-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.07);
  color: #86868b;
  font-size: 12px;
  font-weight: 700;
}
.serp-body {
  flex: 1;
  min-width: 0;
}
.serp-title {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #9fb6d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.serp-url {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  color: #5e5e63;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .serp-title {
    font-size: 12.5px;
    white-space: normal;
    line-height: 1.35;
  }
}

.serp-row.is-you {
  background: rgba(var(--blue-rgb), 0.1);
  border-color: rgba(var(--blue-rgb), 0.32);
}
.serp-row.is-you .serp-rank {
  color: #5ac8fa;
}
.serp-row.is-you .serp-title {
  color: #f5f5f7;
}
.serp-row.is-you .serp-url {
  color: #86868b;
}
.serp-row.is-you .serp-mark {
  background: var(--grad-blue);
  color: #fff;
}
.serp-you-tag {
  margin-left: auto;
  flex: none;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.18);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5ac8fa;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .serp-you-tag {
    display: none;
  }
}

.serp-fold {
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: calc(3 * var(--row));
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transform: translateY(-1px);
  pointer-events: none;
}
.serp-fold::before,
.serp-fold::after {
  content: "";
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(90deg, rgba(245, 245, 247, 0.16) 0 5px, transparent 5px 10px);
}
.serp-fold span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5e63;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .serp-fold span {
    font-size: 9px;
  }
}

.serp-side {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem 1.5rem;
  background: radial-gradient(120% 80% at 85% 0%, rgba(var(--blue-rgb), 0.14), transparent 62%);
}
@media (max-width: 480px) {
  .serp-side {
    padding: 1.2rem 1.1rem 1.3rem;
  }
}
.serp-stages {
  position: relative;
  min-height: 9.5rem;
}
@media (max-width: 940px) {
  .serp-stages {
    min-height: 8rem;
  }
}
.serp-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
  pointer-events: none;
}
.serp-stage.is-on {
  opacity: 1;
  transform: none;
}
.serp-stage h3 {
  margin-top: 0.55rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.serp-stage p {
  margin-top: 0.6rem;
  font-size: 14px;
  line-height: 1.55;
  color: #86868b;
}
.serp-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.serp-kpi {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.03);
}
.serp-kpi-l {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5e5e63;
}
.serp-kpi-v {
  display: block;
  margin-top: 0.3rem;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.serp-kpi-v.bump {
  animation: serp-bump 0.5s var(--ease);
}
@keyframes serp-bump {
  0% {
    transform: translateY(5px);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.serp-kpi-s {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  color: #5e5e63;
}
.serp-track {
  margin-top: auto;
  padding-top: 1.6rem;
}
.serp-line {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(245, 245, 247, 0.1);
  overflow: hidden;
}
.serp-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: 2px;
  background: var(--grad-blue);
  transition: width 0.8s var(--ease);
}
.serp-ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.7rem;
}
.serp-tick {
  font-size: 11.5px;
  font-weight: 500;
  color: #5e5e63;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.serp-tick:hover {
  color: #86868b;
}
.serp-tick.is-on {
  color: #f5f5f7;
  background: rgba(245, 245, 247, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .serp-row,
  .serp-stage,
  .serp-line i,
  .serp-count {
    transition: none !important;
  }
  .serp-caret {
    display: none;
  }
  .serp-kpi-v.bump {
    animation: none;
  }
}

.bill-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .bill-grid {
    gap: 2.5rem;
  }
}
@media (max-width: 900px) {
  .bill-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.bill-paper {
  padding: 1.9rem 1.9rem 1.7rem;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(245, 245, 247, 0.055), rgba(245, 245, 247, 0.018));
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
@media (max-width: 480px) {
  .bill-paper {
    padding: 1.5rem 1.3rem 1.3rem;
  }
}
.bill-head {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bill-head span {
  display: block;
  margin-top: 0.35rem;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5e5e63;
}
.bill-rows {
  margin-top: 1.6rem;
}
.bill-row {
  display: flex;
  align-items: baseline;
  padding: 0.62rem 0;
  font-size: 14px;
}
.bill-row span {
  color: #86868b;
}
.bill-row i {
  flex: 1;
  min-width: 1.2rem;
  height: 1px;
  margin: 0 0.55rem 0.32rem;
  align-self: flex-end;
  background: repeating-linear-gradient(90deg, rgba(245, 245, 247, 0.22) 0 2px, transparent 2px 6px);
}
.bill-row b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bill-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
}
.bill-total span {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5e5e63;
}
.bill-total b {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 480px) {
  .bill-total b {
    font-size: 28px;
  }
}
.bill-note {
  margin-top: 1.1rem;
  font-size: 11.5px;
  line-height: 1.5;
  color: #5e5e63;
}

.cal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem 1.8rem;
}
.cal::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  right: 0.7rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(245, 245, 247, 0.2) 0 5px, transparent 5px 11px);
}
@media (max-width: 940px) {
  .cal {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6rem 2rem;
  }
  .cal::before {
    display: none;
  }
}
@media (max-width: 540px) {
  .cal {
    grid-template-columns: 1fr;
  }
}
.cal-col {
  position: relative;
}
.cal-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.45);
  background: #000;
}
.cal-dot i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--grad-blue);
}
.cal-when {
  margin-top: 1.1rem;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5e5e63;
}
.cal-t {
  margin-top: 0.45rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.cal-list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.75rem;
}
.cal-list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 14px;
  line-height: 1.55;
  color: #86868b;
}
.cal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.55);
}
.cal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.7rem 1.9rem;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: radial-gradient(120% 160% at 88% 50%, rgba(var(--blue-rgb), 0.13), transparent 62%);
}
.cal-foot > a {
  margin-left: auto;
}
@media (max-width: 640px) {
  .cal-foot {
    padding: 1.4rem 1.3rem;
  }
  .cal-foot > a {
    margin-left: 0;
  }
}

.anat-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .anat-grid {
    gap: 2.6rem;
  }
}
@media (max-width: 940px) {
  .anat-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.anat-mock {
  position: sticky;
  top: 84px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(245, 245, 247, 0.1);
  background: #0b0b0e;
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.9);
}
@media (max-width: 940px) {
  .anat-mock {
    position: static;
  }
}
.anat-page {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #0e0e12;
}
.anat-layer {
  padding: 0.85rem 0.95rem;
  border-radius: 13px;
  border: 1px solid rgba(245, 245, 247, 0.07);
  background: rgba(245, 245, 247, 0.025);
  transition:
    opacity 0.45s var(--ease),
    border-color 0.45s var(--ease),
    background-color 0.45s var(--ease);
}
.anat-grid[data-on] .anat-layer {
  opacity: 0.26;
}
.anat-grid[data-on] .anat-layer.is-on {
  opacity: 1;
  border-color: rgba(var(--blue-rgb), 0.45);
  background: rgba(var(--blue-rgb), 0.07);
}
.anat-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
}
.anat-logo {
  width: 2.6rem;
  height: 0.55rem;
  border-radius: 3px;
  background: rgba(245, 245, 247, 0.55);
}
.anat-navbtn {
  margin-left: auto;
  width: 3.2rem;
  height: 1.05rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.12);
}
.anat-t {
  height: 0.78rem;
  width: 88%;
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.5);
}
.anat-t.short {
  width: 56%;
  margin-top: 0.4rem;
}
.anat-l {
  display: block;
  height: 0.4rem;
  border-radius: 4px;
  background: rgba(245, 245, 247, 0.13);
}
.anat-l + .anat-l {
  margin-top: 0.32rem;
}
.anat-cta {
  display: block;
  width: 5.6rem;
  height: 1.5rem;
  margin-top: 0.9rem;
  border-radius: 999px;
  background: var(--grad-blue);
}
.anat-cta.sm {
  width: 4.4rem;
  height: 1.25rem;
  margin: 0;
}
.anat-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 10.5px;
  color: #86868b;
}
.anat-row {
  display: flex;
  gap: 0.5rem;
}
.anat-box {
  flex: 1;
  height: 3rem;
  border-radius: 9px;
  background: rgba(245, 245, 247, 0.06);
}
.anat-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.anat-price b {
  font-size: 12px;
  font-weight: 600;
  color: #f5f5f7;
}
.anat-price .anat-l {
  flex: none;
}
.anat-faq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
}
.anat-faq + .anat-faq {
  border-top: 1px solid rgba(245, 245, 247, 0.07);
}
.anat-faq i {
  font-size: 11px;
  font-style: normal;
  color: #5e5e63;
}
.anat-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.anat-list {
  display: grid;
  gap: 0.3rem;
  counter-reset: none;
}
.anat-item {
  display: flex;
  gap: 0.95rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid transparent;
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.anat-item:hover {
  background: rgba(245, 245, 247, 0.035);
}
.anat-item.is-on {
  background: rgba(var(--blue-rgb), 0.08);
  border-color: rgba(var(--blue-rgb), 0.26);
}
.anat-n {
  flex: none;
  padding-top: 0.15rem;
  font-size: 11px;
  font-weight: 600;
  color: #5e5e63;
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.anat-item.is-on .anat-n {
  color: #5ac8fa;
}
.anat-it {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.anat-id {
  display: block;
  margin-top: 0.3rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: #86868b;
}

.spd-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 2.4rem;
  border-radius: 28px;
  border: 1px solid var(--hair);
  background: radial-gradient(110% 130% at 92% 50%, rgba(var(--blue-rgb), 0.12), transparent 60%);
}
@media (max-width: 900px) {
  .spd-wrap {
    grid-template-columns: 1fr;
    padding: 1.7rem 1.4rem 2rem;
  }
}
.spd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: end;
  justify-items: center;
}
.spd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.spd-val {
  margin-bottom: 0.7rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.spd-val.hi {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.spd-bar {
  width: 100%;
  max-width: 5.5rem;
  height: var(--h);
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, rgba(245, 245, 247, 0.16), rgba(245, 245, 247, 0.04));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.9s var(--ease) var(--d, 0ms);
}
.spd-bar.hi {
  background: var(--grad-blue);
}
.spd-wrap.in .spd-bar {
  transform: none;
}
.spd-lab {
  margin-top: 0.7rem;
  font-size: 12px;
  color: #5e5e63;
  font-variant-numeric: tabular-nums;
}

.spec {
  border-top: 1px solid var(--hair);
}
.spec-row {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 1.5rem 2.5rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 860px) {
  .spec-row {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 1.8rem 0;
  }
}
.spec-when {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  background: rgba(var(--blue-rgb), 0.09);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5ac8fa;
  font-variant-numeric: tabular-nums;
}
.spec-t {
  margin-top: 0.9rem;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.spec-for {
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.55;
  color: #86868b;
}
.spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2rem;
  align-content: start;
}
@media (max-width: 620px) {
  .spec-list {
    grid-template-columns: 1fr;
  }
}
.spec-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 14.5px;
  line-height: 1.55;
  color: #86868b;
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 1.6px solid rgba(var(--blue-rgb), 0.85);
  border-bottom: 1.6px solid rgba(var(--blue-rgb), 0.85);
  transform: rotate(-45deg);
}
.spec-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.4rem;
}
.spec-foot > a {
  margin-left: auto;
}
@media (max-width: 640px) {
  .spec-foot > a {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spd-bar {
    transform: none;
    transition: none;
  }
  .anat-layer {
    transition: none;
  }
}

.fun {
  display: grid;
  gap: 0.5rem;
}
.fun-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 0.9rem 0;
}
@media (max-width: 860px) {
  .fun-step {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.7rem 0;
  }
}
.fun-side {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  min-width: 0;
}
.fun-bar {
  width: var(--w);
  height: 2.7rem;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(var(--blue-rgb), 0.5), rgba(90, 200, 250, 0.16));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s var(--ease) var(--d, 0ms);
}
.fun-step.in .fun-bar {
  transform: none;
}
.fun-step.is-end .fun-bar {
  background: var(--grad-blue);
}
.fun-num {
  font-size: 13.5px;
  color: #86868b;
  white-space: nowrap;
}
.fun-num b {
  margin-right: 0.45rem;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
}
.fun-step.is-end .fun-num b {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fun-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: #86868b;
}
.fun-note span {
  color: #f5f5f7;
  font-weight: 500;
}
.fun-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hair);
}
.fun-foot > a {
  margin-left: auto;
}
@media (max-width: 640px) {
  .fun-foot > a {
    margin-left: 0;
  }
}

.dr {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #0b0b0e;
  transition: border-color 0.45s var(--ease);
}
.dr:hover {
  border-color: rgba(var(--blue-rgb), 0.32);
}
.dr--woo:hover {
  border-color: rgba(127, 84, 179, 0.45);
}
.dr-scena {
  position: relative;
  display: grid;
  place-items: center;
  height: 208px;
  padding: 1.5rem;
  background: radial-gradient(70% 90% at 50% 0%, rgba(var(--blue-rgb), 0.1), transparent 70%), #08080b;
  border-bottom: 1px solid var(--hair);
}

.woo-poswiata {
  position: absolute;
  width: min(78%, 280px);
  height: 116px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(127, 84, 179, 0.5), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.dr-scena--woo {
  background: radial-gradient(68% 88% at 50% 46%, rgba(127, 84, 179, 0.14), transparent 72%), #08080b;
}
.dr-woo {
  position: relative;
  height: clamp(34px, 6.6vw, 50px);
  width: auto;
}

.wrs {
  position: relative;
  width: 100%;
  max-width: 320px;
}
.wrs-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.wrs-cien {
  fill: #000;
}
.wrs-gora {
  fill: url(#wrsPlyta);
  stroke: rgba(245, 245, 247, 0.16);
  stroke-width: 1;
}
.wrs-bok {
  fill: #0a0a0e;
  stroke: rgba(245, 245, 247, 0.08);
  stroke-width: 1;
}
.wrs-blask {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
}
.wrs-blask--akcent {
  stroke: rgba(255, 255, 255, 0.34);
}
.wrs-akcent {
  fill: url(#wrsAkcent);
  stroke: url(#wrsObrys);
  filter: drop-shadow(0 0 12px rgba(var(--blue-rgb), 0.3));
  transition: filter 0.45s var(--ease);
}
.wrs-bok--akcent {
  fill: #07131f;
  stroke: rgba(90, 200, 250, 0.22);
}
.dr:hover .wrs-akcent {
  filter: drop-shadow(0 0 18px rgba(var(--blue-rgb), 0.5));
}
.wrs-wodz {
  stroke: rgba(245, 245, 247, 0.14);
  stroke-width: 1;
}
.wrs-opis {
  font-size: 9.5px;
  letter-spacing: -0.01em;
  fill: #5e5e63;
}
.wrs-opis--mocny {
  fill: #86868b;
}
.dr-scena--wrs {
  overflow: hidden;
  background: radial-gradient(62% 82% at 50% 42%, rgba(var(--blue-rgb), 0.11), transparent 72%), #08080b;
}
.dr-tresc {
  flex: 1;
  padding: 1.75rem;
}
@media (min-width: 640px) {
  .dr-tresc {
    padding: 2rem;
  }
}
.dr-h {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f5f5f7;
}
.dr-p {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #86868b;
}
.dr-lista {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.4rem;
}
.dr-lista li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #b6b6bc;
}
.dr-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-image: var(--grad-blue);
}
.dr-kiedy {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #5e5e63;
}

@media (max-width: 1023px) {
  .shp-view {
    display: none;
  }
  .shp[data-on="0"] .shp-view[data-v="0"],
  .shp[data-on="1"] .shp-view[data-v="1"],
  .shp[data-on="2"] .shp-view[data-v="2"] {
    display: grid;
  }
}
@media (max-width: 520px) {
  .shp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shp-search {
    display: none;
  }
  .shp-opt {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shp-prod,
  .shp-opt,
  .shp-opt .is-pick,
  .shp-sys,
  .shp-sys b,
  .shp-sum-v b,
  .shp-count b,
  .shp-vend,
  .shp-bar i,
  .shp-cart b,
  .shp-toast,
  .shp-tab-bar i {
    animation: none !important;
  }
  .shp-opt .is-pick {
    color: #fff;
    background: var(--blue);
  }
}

.run {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #0b0b0e;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.run-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
  background: rgba(245, 245, 247, 0.025);
}
.run-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: #86868b;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.run-tag {
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  background: rgba(var(--blue-rgb), 0.1);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #5ac8fa;
}
.run-list {
  padding: 0.6rem 1.6rem 1.6rem;
}
@media (max-width: 560px) {
  .run-list {
    padding: 0.4rem 1.1rem 1.2rem;
  }
}
.run-list li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(245, 245, 247, 0.06);
}
.run-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0.4rem;
}
@media (max-width: 700px) {
  .run-list li {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}
.run-when {
  padding-top: 0.2rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #5ac8fa;
  white-space: nowrap;
}
.run-body h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.run-body p {
  margin-top: 0.5rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: #86868b;
}

@media (prefers-reduced-motion: reduce) {
  .fun-bar {
    transform: none;
    transition: none;
  }
}

.wall {
  display: grid;
  gap: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.wall-row {
  overflow: hidden;
}
.wall-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  animation: wallRun 56s linear infinite;
}
.wall-row--back .wall-track {
  animation-direction: reverse;
  animation-duration: 68s;
}
@keyframes wallRun {
  to {
    transform: translateX(-50%);
  }
}
.wall-card {
  flex: none;
  width: 296px;
}
@media (max-width: 640px) {
  .wall-card {
    width: 236px;
  }
}
.wall-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hair);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #17171c;
}
.wall-chrome i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.22);
}
.wall-url {
  margin-left: 0.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8.5px;
  color: #6e6e75;
  background: rgba(245, 245, 247, 0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-screen {
  height: 152px;
  padding: 0.8rem;
  border: 1px solid var(--hair);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #101014 0%, #0a0a0d 100%);
  overflow: hidden;
}
@media (max-width: 640px) {
  .wall-screen {
    height: 128px;
  }
}
.wall-name {
  margin-top: 0.7rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #86868b;
  text-align: center;
}

.wall-screen > div {
  height: 100%;
}
.w-cal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 5px;
}
.w-cal span {
  border-radius: 4px;
  background: rgba(245, 245, 247, 0.07);
}
.w-cal span.is-on {
  background: var(--grad-blue);
  opacity: calc(0.45 + var(--n) * 0.03);
}
.w-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 7px;
}
.w-grid span {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 4px;
}
.w-grid i {
  border-radius: 6px;
  background: rgba(245, 245, 247, 0.09);
}
.w-grid span:nth-child(2) i,
.w-grid span:nth-child(4) i {
  background: linear-gradient(180deg, rgba(var(--blue-rgb), 0.5), rgba(var(--blue-rgb), 0.14));
}
.w-grid b {
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.13);
}
.w-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  align-items: stretch;
}
.w-plans span {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding: 8px 7px;
  border-radius: 8px;
  border: 1px solid var(--hair);
}
.w-plans span.is-on {
  border-color: transparent;
  background: var(--grad-blue);
}
.w-plans i {
  height: 5px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.2);
}
.w-plans b {
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.08);
}
.w-plans span.is-on i,
.w-plans span.is-on b {
  background: rgba(255, 255, 255, 0.42);
}
.w-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 6px;
}
.w-chart span {
  height: var(--h);
  border-radius: 4px;
  background: rgba(245, 245, 247, 0.11);
}
.w-chart span:nth-child(6),
.w-chart span:nth-child(7) {
  background: var(--grad-blue);
}
.w-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.w-kanban span {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.04);
}
.w-kanban i {
  height: 17px;
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.1);
}
.w-kanban span:nth-child(2) i:first-child {
  background: var(--grad-blue);
}
.w-chat {
  display: grid;
  align-content: center;
  gap: 8px;
}
.w-chat span {
  height: 20px;
  border-radius: 9px;
}
.w-chat .l {
  width: 62%;
  background: rgba(245, 245, 247, 0.09);
}
.w-chat .r {
  width: 52%;
  margin-left: auto;
  background: var(--grad-blue);
  opacity: 0.85;
}
.w-rows {
  display: grid;
  gap: 6px;
  align-content: center;
}
.w-rows span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(245, 245, 247, 0.05);
}
.w-rows i {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.14);
}
.w-rows b {
  flex: none;
  width: 24px;
  height: 8px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.12);
}
.w-rows b.ok {
  background: var(--grad-blue);
}
.w-map {
  position: relative;
  border-radius: 8px;
  background:
    linear-gradient(rgba(245, 245, 247, 0.05) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(245, 245, 247, 0.05) 1px, transparent 1px) 0 0 / 26px 100%,
    rgba(245, 245, 247, 0.03);
}
.w-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.w-map-road {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.7));
}
.w-map i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.45);
}
.w-conf {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8px;
}
.w-conf-opts {
  display: grid;
  align-content: start;
  gap: 6px;
}
.w-conf-opts i {
  height: 15px;
  border-radius: 5px;
  background: rgba(245, 245, 247, 0.08);
}
.w-conf-opts i.is-on {
  background: var(--grad-blue);
}
.w-conf-view {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.04);
}
.w-conf-view b {
  width: 58%;
  height: 56%;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(var(--blue-rgb), 0.55), rgba(var(--blue-rgb), 0.12));
}
.w-course {
  display: grid;
  gap: 8px;
  align-content: center;
}
.w-course span {
  display: grid;
  gap: 5px;
}
.w-course i {
  height: 5px;
  width: 64%;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.14);
}
.w-course b {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.08);
}
.w-course b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  border-radius: 999px;
  background: var(--grad-blue);
}

@media (prefers-reduced-motion: reduce) {
  .wall-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .wall-card[aria-hidden="true"] {
    display: none;
  }
  .wall {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.ask {
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
}
.ask-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  width: min(100%, 46rem);
  min-height: 5.6rem;
  padding: 1.25rem 1.6rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--blue-rgb), 0.32);
  background: radial-gradient(120% 200% at 0% 0%, rgba(var(--blue-rgb), 0.14), transparent 60%), #0b0b0e;
  box-shadow:
    0 30px 70px -34px rgba(0, 0, 0, 0.95),
    0 0 70px -30px rgba(var(--blue-rgb), 0.55);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .ask-box {
    min-height: 7.4rem;
    padding: 1.1rem 1.2rem;
  }
}
.ask-pre {
  flex: none;
  color: #5e5e63;
}
.ask-txt {
  color: #f5f5f7;
}
.ask-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.9);
  transform: translateY(0.12em);
  animation: askCaret 1.05s steps(1) infinite;
}
@keyframes askCaret {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-caret {
    animation: none;
  }
}

.sla {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .sla {
    gap: 3rem;
  }
}
@media (max-width: 900px) {
  .sla {
    grid-template-columns: 1fr;
  }
}
.sla-panel {
  border-radius: 22px;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.sla-row {
  display: grid;
  grid-template-columns: auto 10rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--hair);
}
.sla-row:last-child {
  border-bottom: 0;
}
@media (max-width: 620px) {
  .sla-row {
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.8rem;
    padding: 0.95rem 1.1rem;
  }
  .sla-row .sla-v {
    grid-column: 2;
  }
}
.sla-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #5ac8fa;
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.16);
  transform: translateY(-2px);
}
.sla-k {
  font-size: 14px;
  font-weight: 600;
}
.sla-v {
  font-size: 14px;
  line-height: 1.5;
  color: #86868b;
}

.sd {
  border: 1px solid var(--hair);
  border-radius: 28px;
  overflow: hidden;
  background: #0b0b0e;
}

.sd-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
@media (max-width: 520px) {
  .sd-rail {
    gap: 0.4rem;
  }
}
.sd-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
}
.sd-step-bar {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(245, 245, 247, 0.11);
}
.sd-step-bar i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--grad-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.sd-step.is-done .sd-step-bar i,
.sd-step.is-on .sd-step-bar i {
  transform: scaleX(1);
}
.sd-step-n {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: #5e5e63;
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.sd-step-t {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #86868b;
  transition: color 0.35s var(--ease);
}
@media (max-width: 520px) {
  .sd-step-t {
    font-size: 12px;
  }
}
.sd-step:hover .sd-step-t,
.sd-step.is-on .sd-step-t {
  color: #f5f5f7;
}
.sd-step.is-on .sd-step-n {
  color: #86868b;
}

.sd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
@media (max-width: 940px) {
  .sd-body {
    grid-template-columns: 1fr;
  }
}
.sd-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.9rem 1.2rem 2rem;
}
.sd-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
  letter-spacing: 0.01em;
}
.sd-tool-in[hidden] {
  display: none;
}
.sd-tool::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.28);
  transition: background-color 0.4s var(--ease);
}
.sd[data-stage="4"] .sd-tool::before {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.85);
  animation: sdLive 2s var(--ease) infinite;
}
@keyframes sdLive {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.sd-phone {
  position: relative;
  width: 202px;
  max-width: 100%;
  aspect-ratio: 9 / 19.4;
  background: #000;
  border: 2px solid rgba(245, 245, 247, 0.16);
  border-radius: 38px;
  overflow: hidden;
  box-shadow:
    0 45px 90px -30px rgba(0, 0, 0, 0.95),
    inset 0 0 0 5px #0b0b0e;
}
.sd-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 22px;
  border-radius: 20px;
  background: #000;
  z-index: 3;
}
.sd-home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 4px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.55);
  z-index: 3;
}
.sd-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #17171c 0%, #0b0b0e 100%);
  transition: background 0.6s var(--ease);
}
.sd[data-stage="1"] .sd-screen,
.sd[data-stage="2"] .sd-screen {
  background: #0d0d11;
}

.sd-paper {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.sd[data-stage="1"] .sd-paper {
  opacity: 1;
  background-image: linear-gradient(rgba(245, 245, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 245, 247, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
}
.sd[data-stage="2"] .sd-paper {
  opacity: 1;
  background-image: repeating-linear-gradient(90deg, rgba(var(--blue-rgb), 0.14) 0 1px, transparent 1px 25%);
  background-position: 0.85rem 0;
}
.sd-status {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.05rem 0.2rem;
  font-size: 10.5px;
  font-weight: 600;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.5s var(--ease);
}
.sd-status svg {
  width: 13px;
  height: 13px;
}
.sd[data-stage="1"] .sd-status {
  opacity: 0.3;
}
.sd-app {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  padding: 0.9rem 0.85rem 1rem;
  overflow: hidden;
}
.sd-hi {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-bell {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #c9c9cf;
  background: rgba(245, 245, 247, 0.07);
  transition:
    background-color 0.5s var(--ease),
    border-radius 0.5s var(--ease);
}
.sd-bell svg {
  width: 12px;
  height: 12px;
}
.sd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.sd-stat {
  padding: 0.6rem 0.55rem 0.7rem;
  border-radius: 14px;
  background: rgba(245, 245, 247, 0.06);
  border: 1px solid transparent;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd-num {
  position: relative;
  margin-top: 0.25rem;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f5f7;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
.sd-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.sd-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  background: rgba(245, 245, 247, 0.05);
  border: 1px solid transparent;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd-item-tx {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 0.15rem;
}
.sd-ico {
  position: relative;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);
  transition:
    background 0.5s var(--ease),
    border-radius 0.5s var(--ease);
}
.sd-ico svg {
  width: 11px;
  height: 11px;
}
.sd-btn {
  margin-top: 0.75rem;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);

  transition:
    background 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd-btn .sd-tx {
  color: #fff;
  font-weight: 600;
}
.sd[data-stage="1"] .sd-btn .sd-tx,
.sd[data-stage="2"] .sd-btn .sd-tx {
  color: transparent;
}
.sd-tabbar {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.55rem 0.5rem 1.15rem;
  border-top: 1px solid rgba(245, 245, 247, 0.08);
}
.sd-tab {
  position: relative;
  display: grid;
  place-items: center;
  color: #5e5e63;
  transition: color 0.4s var(--ease);
}
.sd-tab svg {
  width: 14px;
  height: 14px;
}
.sd-tab.is-active {
  color: #f5f5f7;
}
.sd[data-stage="4"] .sd-tab.is-active {
  color: var(--blue);
}

.sd-tx {
  position: relative;
  font-size: 11.5px;
  line-height: 1.35;
  color: #f5f5f7;
  transition: color 0.4s var(--ease);
}
.sd-tx--lg {
  font-size: 13px;
  font-weight: 700;
}
.sd-tx--sm {
  font-size: 9.5px;
  color: #86868b;
}
.sd-tx::after,
.sd-num::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--w, 70%);
  height: 44%;
  max-height: 8px;
  min-height: 4px;
  border-radius: 3px;
  background: rgba(245, 245, 247, 0.17);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.sd[data-stage="1"] .sd-tx,
.sd[data-stage="2"] .sd-tx,
.sd[data-stage="1"] .sd-num,
.sd[data-stage="2"] .sd-num {
  color: transparent;
}
.sd[data-stage="1"] .sd-tx::after,
.sd[data-stage="2"] .sd-tx::after,
.sd[data-stage="1"] .sd-num::after,
.sd[data-stage="2"] .sd-num::after {
  opacity: 1;
}
.sd[data-stage="1"] .sd-tx::after,
.sd[data-stage="1"] .sd-num::after {
  border-radius: 1px;
  background: rgba(245, 245, 247, 0.26);
  transform: translateY(-50%) rotate(-0.5deg);
}
.sd[data-stage="1"] .sd-tx--sm::after {
  transform: translateY(-50%) rotate(0.6deg);
}

.sd[data-stage="1"] .sd-stat,
.sd[data-stage="1"] .sd-item,
.sd[data-stage="1"] .sd-btn {
  background: none;
  border-color: rgba(245, 245, 247, 0.3);
  border-width: 1.5px;
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
}
.sd[data-stage="1"] .sd-stat:nth-child(2),
.sd[data-stage="1"] .sd-item:nth-child(2) {
  border-radius: 15px 225px 15px 255px / 255px 12px 225px 15px;
}
.sd[data-stage="1"] .sd-item {
  transform: rotate(-0.35deg);
}
.sd[data-stage="1"] .sd-item:nth-child(2) {
  transform: rotate(0.3deg);
}
.sd[data-stage="1"] .sd-btn {
  transform: rotate(-0.4deg);
}
.sd[data-stage="1"] .sd-ico,
.sd[data-stage="1"] .sd-bell {
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.3);
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
}
.sd[data-stage="1"] .sd-tabbar {
  border-top-style: dashed;
  border-top-color: rgba(245, 245, 247, 0.22);
}

.sd[data-stage="2"] .sd-stat,
.sd[data-stage="2"] .sd-item,
.sd[data-stage="2"] .sd-btn {
  background: none;
  border-color: var(--hair);
  border-radius: 10px;
}
.sd[data-stage="2"] .sd-btn {
  border-radius: 999px;
}
.sd[data-stage="2"] .sd-ico,
.sd[data-stage="2"] .sd-bell {
  background: none;
  box-shadow: inset 0 0 0 1px var(--hair);
  border-radius: 6px;
}

.sd[data-stage="1"] .sd-ico svg,
.sd[data-stage="2"] .sd-ico svg,
.sd[data-stage="1"] .sd-bell svg,
.sd[data-stage="2"] .sd-bell svg,
.sd[data-stage="1"] .sd-tab svg,
.sd[data-stage="2"] .sd-tab svg {
  opacity: 0;
}
.sd-ico svg,
.sd-bell svg,
.sd-tab svg {
  transition: opacity 0.35s var(--ease);
}
.sd-ico::after,
.sd-tab::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(245, 245, 247, 0.22);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.sd[data-stage="1"] .sd-ico::after,
.sd[data-stage="2"] .sd-ico::after,
.sd[data-stage="1"] .sd-tab::after,
.sd[data-stage="2"] .sd-tab::after {
  opacity: 1;
}

.sd-push {
  position: absolute;
  z-index: 4;
  top: 2.4rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 14px;
  border: 1px solid rgba(245, 245, 247, 0.12);
  background: rgba(28, 28, 34, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd[data-stage="4"] .sd-push {
  animation: sdPush 6s var(--ease) 0.6s infinite;
}
@keyframes sdPush {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  8%,
  55% {
    opacity: 1;
    transform: translateY(0);
  }
  66%,
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}
.sd-push-mark {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-blue);
}
.sd-push-t {
  font-size: 9.5px;
  font-weight: 700;
  color: #f5f5f7;
}
.sd-push-s {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.3;
  color: #a6a6ad;
}
.sd-push-time {
  flex: none;
  align-self: flex-start;
  font-size: 8.5px;
  color: #5e5e63;
}
.sd[data-stage="4"] .sd-stat {
  border-color: rgba(var(--blue-rgb), 0.28);
  background: rgba(var(--blue-rgb), 0.1);
}

.sd-panel {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.9rem 2rem 2rem;
  border-left: 1px solid var(--hair);
  background: radial-gradient(120% 110% at 85% 0%, rgba(var(--blue-rgb), 0.16), transparent 62%);
}
@media (max-width: 940px) {
  .sd-panel {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
}
@media (max-width: 520px) {
  .sd-panel {
    padding: 1.5rem 1.2rem 1.7rem;
  }
}
.sd-cards {
  min-height: 168px;
}
@media (max-width: 620px) {
  .sd-cards {
    min-height: 0;
  }
}
.sd-card[hidden] {
  display: none;
}
.sd-card {
  animation: sdCard 0.4s var(--ease) both;
}
@keyframes sdCard {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.sd-card-when {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5e5e63;
}
.sd-card-t {
  margin-top: 0.4rem;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.028em;
}
.sd-card-d {
  margin-top: 0.6rem;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.55;
  color: #86868b;
}
.sd-card-get {
  margin-top: 0.6rem;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: #c9c9cf;
}
.sd-ready {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.95rem;
}
.sd-ready-k {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5e5e63;
}
.sd-ready-v {
  flex: none;
  min-width: 3.2ch;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.sd-ready-bar {
  flex: 1;
  min-width: 40px;
  max-width: 200px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(245, 245, 247, 0.1);
}
.sd-ready-bar i {
  display: block;
  height: 100%;
  width: var(--f, 0%);
  border-radius: 999px;
  background: var(--grad-blue);
  animation: sdReady 0.7s var(--ease) both;
}
@keyframes sdReady {
  from {
    width: 0;
  }
}

.sd-qr {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
}
@media (max-width: 620px) {
  .sd-qr {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
}
.sd-qr-card {
  flex: none;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  line-height: 0;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.sd-qr-card img {
  display: block;
  width: 104px;
  height: 104px;
}
.sd-qr:hover .sd-qr-card {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(var(--blue-rgb), 0.75);
}
.sd-qr-tx {
  display: block;
}
.sd-qr-t {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.sd-qr-d {
  display: block;
  margin-top: 0.35rem;
  max-width: 50ch;
  font-size: 13px;
  line-height: 1.5;
  color: #86868b;
}
.sd-qr-a {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 12.5px;
  color: transparent;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.sd-qr-tap {
  display: none;
}
@media (max-width: 620px) {
  .sd-qr-card {
    display: none;
  }
  .sd-qr-scan {
    display: none;
  }
  .sd-qr-tap {
    display: inline;
  }
  .sd-qr-a {
    margin-top: 0.85rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--grad-blue);
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-card,
  .sd-ready-bar i {
    animation: none;
  }
  .sd[data-stage="4"] .sd-push {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sd[data-stage="4"] .sd-tool::before {
    animation: none;
  }
}

.store-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .store-grid {
    gap: 1.5rem;
  }
}
@media (max-width: 860px) {
  .store-grid {
    grid-template-columns: 1fr;
  }
}
.store {
  padding: 1.9rem 1.9rem 1.7rem;
  border-radius: 24px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.022);
}
@media (max-width: 520px) {
  .store {
    padding: 1.5rem 1.3rem;
  }
}
.store-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hair);
}
.store-mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: rgba(245, 245, 247, 0.07);
  color: #f5f5f7;
}
.store-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.store-when {
  margin-top: 0.15rem;
  font-size: 12.5px;
  color: #5e5e63;
}
.store-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.3rem;
}
.store-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 14px;
  line-height: 1.6;
  color: #86868b;
}
.store-list li b {
  color: #f5f5f7;
  font-weight: 500;
}
.store-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 1.6px solid rgba(var(--blue-rgb), 0.85);
  border-bottom: 1.6px solid rgba(var(--blue-rgb), 0.85);
  transform: rotate(-45deg);
}
.store-note {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  background: rgba(var(--blue-rgb), 0.06);
}
.store-note-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.16);
  color: #5ac8fa;
}

.cost2 {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .cost2 {
    gap: 3rem;
  }
}
@media (max-width: 900px) {
  .cost2 {
    grid-template-columns: 1fr;
  }
}
.cost2-list {
  border-radius: 22px;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.cost2-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--hair);
}
.cost2-row:last-child {
  border-bottom: 0;
}
@media (max-width: 620px) {
  .cost2-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.95rem 1.1rem;
  }
}
.cost2-k {
  font-size: 14px;
  font-weight: 500;
}
.cost2-v {
  font-size: 14px;
  line-height: 1.5;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.cost2-row.is-us {
  background: rgba(var(--blue-rgb), 0.07);
}
.cost2-row.is-us .cost2-v {
  color: #5ac8fa;
}

.auc {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #0b0b0e;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.auc-head,
.auc-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.25fr 1fr 1.15fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.5rem;
}
.auc-head {
  padding-top: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5e5e63;
}
.auc-row + .auc-row {
  border-top: 1px solid rgba(245, 245, 247, 0.05);
}
.auc-name {
  font-size: 15px;
  font-weight: 500;
}
.auc-row.is-you .auc-name {
  color: #f5f5f7;
}
.auc-row.is-you {
  background: rgba(var(--blue-rgb), 0.07);
}
.auc-cell {
  font-size: 14px;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.auc-cell b {
  font-weight: 600;
  color: #f5f5f7;
}
.auc-row.is-you .auc-cell b {
  color: #5ac8fa;
}
.auc-c {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.auc-c.is-on {
  opacity: 1;
  transform: none;
}
.auc-q {
  display: inline-flex;
  gap: 2px;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.auc-q i {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: rgba(245, 245, 247, 0.14);
}
.auc-q i.on {
  background: rgba(245, 245, 247, 0.45);
}
.auc-row.is-you .auc-q i.on {
  background: var(--grad-blue);
}
.auc-pos {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  font-style: normal;
  color: #5e5e63;
}
.auc-row.is-you .auc-pos {
  color: #5ac8fa;
}
@media (max-width: 860px) {
  .auc-head {
    display: none;
  }
  .auc-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1.2rem 1.2rem;
  }
  .auc-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .auc-cell::before {
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5e5e63;
  }
  .auc-cell b {
    margin-left: auto;
  }
  .auc-pos {
    display: inline;
    margin-left: 0.5rem;
  }
}
.auc-sum {
  margin-top: 1.6rem;
  padding: 1.5rem 1.7rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  background: rgba(var(--blue-rgb), 0.06);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.auc-sum.is-on {
  opacity: 1;
  transform: none;
}

.fit-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}
.fit-type {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 13.5px;
  color: #86868b;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.fit-type:hover {
  color: #f5f5f7;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.24);
}
.fit-type:focus {
  outline: none;
}
.fit-type:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.7);
  outline-offset: 3px;
}
.fit-type.is-on,
.fit-type.is-on:hover {
  color: #fff;
  background: var(--grad-blue);
  box-shadow: none;
}
.fit {
  border-top: 1px solid var(--hair);
}
.fit-row {
  display: grid;
  grid-template-columns: 1.9fr repeat(4, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hair);
}
.fit-head {
  padding: 0.9rem 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5e5e63;
}
.fit-ch {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.fit-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.14);
}
.fit-duo {
  display: flex;
  background: none;
}
.duo-mark {
  display: grid;
  place-items: center;
  width: 50%;
  height: 100%;
}
.duo-mark svg {
  width: 76%;
  height: 76%;
}
.duo-mark.is-fb {
  background: #1877f2;
}
.duo-mark.is-ig {
  background: linear-gradient(160deg, #feda75 0%, #fa7e1e 22%, #d62976 55%, #962fbf 78%, #4f5bd5 100%);
}
.duo-inline {
  display: flex;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  overflow: hidden;
}
.fit-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.fit-lead {
  margin-top: 0.4rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: #86868b;
  max-width: 44ch;
}
.fit-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.fit-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s var(--ease);
}
.fit-dots {
  display: inline-flex;
  gap: 4px;
}
.fit-dots i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.12);
}
.fit-dots[data-v="1"] i:nth-child(-n + 1),
.fit-dots[data-v="2"] i:nth-child(-n + 2),
.fit-dots[data-v="3"] i:nth-child(-n + 3) {
  background: var(--grad-blue);
}
.fit-wrap[data-type] .fit-cell {
  opacity: 0.22;
}
.fit-wrap[data-type="sklep"] .fit-cell[data-type="sklep"],
.fit-wrap[data-type="lokal"] .fit-cell[data-type="lokal"],
.fit-wrap[data-type="b2b"] .fit-cell[data-type="b2b"],
.fit-wrap[data-type="app"] .fit-cell[data-type="app"] {
  opacity: 1;
}
.fit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin-top: 1.5rem;
  font-size: 12.5px;
  color: #5e5e63;
}
.fit-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
@media (max-width: 900px) {
  .fit-head {
    display: none;
  }
  .fit-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.6rem 0;
  }
  .fit-cell {
    justify-content: space-between;
    font-size: 13px;
    color: #86868b;
  }
  .fit-cell::before {
    content: attr(data-label);
  }
  .fit-row > .fit-cell + .fit-cell {
    margin-top: -0.55rem;
  }
}

.rep {
  border-radius: 24px;
  border: 1px solid var(--hair);
  overflow: hidden;
  background: #0b0b0e;
}
.rep-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.035);
}
.rep-logo {
  height: 15px;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.rep-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 12px;
  color: #86868b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-file svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.rep-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex: none;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #5e5e63;
}
@media (max-width: 420px) {
  .rep-auto {
    display: none;
  }
}
.rep-live {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
  animation: rep-pulse 2.4s var(--ease) infinite;
}
@keyframes rep-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(52, 199, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rep-live {
    animation: none;
  }
}
.rep-body {
  padding: 1.7rem 1.8rem 1.6rem;
  background: radial-gradient(120% 90% at 80% 0%, rgba(var(--blue-rgb), 0.16), transparent 60%);
}
@media (max-width: 520px) {
  .rep-body {
    padding: 1.4rem 1.2rem 1.3rem;
  }
}
.rep-srcs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.rep-srcs-lab {
  margin-right: 0.35rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5e5e63;
}
.rep-src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.04);
  font-size: 11.5px;
  color: #c9c9cf;
}
.rep-lab {
  font-size: 13.5px;
  color: #86868b;
}
.rep-big {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.2rem;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 520px) {
  .rep-big {
    font-size: 44px;
  }
}
.rep-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
}
.rep-delta svg {
  width: 13px;
  height: 13px;
}
.rep-sub {
  margin-top: 0.5rem;
  font-size: 13px;
  color: #5e5e63;
}
.rep-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 96px;
  margin-top: 1.7rem;
}
.rep-col {
  position: relative;
  flex: 1;
  height: var(--h);
  min-width: 0;
  border-radius: 5px;
  overflow: hidden;
  background: var(--grad-blue);
}
.rep-col i {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--m);
  background: rgba(245, 245, 247, 0.28);
}
.rep-axis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: 0.8rem;
  font-size: 11px;
  color: #5e5e63;
}
.rep-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rep-legend b {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.rep-legend b.is-g {
  background: rgba(var(--blue-rgb), 0.9);
}
.rep-legend b.is-m {
  margin-left: 0.5rem;
  background: rgba(245, 245, 247, 0.4);
}
.rep-rest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
.rep-rest span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #5e5e63;
}
.rep-rest b {
  display: block;
  margin-top: 0.25rem;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rep-ai {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  background: rgba(var(--blue-rgb), 0.07);
  font-size: 12.5px;
  line-height: 1.5;
  color: #86868b;
}
.rep-ai svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.1rem;
  color: rgba(var(--blue-rgb), 0.95);
}
.rep-ai b {
  color: #f5f5f7;
  font-weight: 600;
}

.cadence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}
@media (max-width: 900px) {
  .cadence {
    grid-template-columns: 1fr;
  }
}
.cadence-item {
  display: flex;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.022);
}
.cadence-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  background: rgba(var(--blue-rgb), 0.1);
}
.cadence-ico svg {
  width: 17px;
  height: 17px;
  color: rgba(var(--blue-rgb), 0.95);
}
.cadence-t {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.cadence-p {
  margin-top: 0.4rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: #86868b;
}

.tailor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 900px) {
  .tailor {
    grid-template-columns: 1fr;
  }
}
.tailor-step {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.9rem 1.8rem;
  border-radius: 24px;
  border: 1px solid var(--hair);
  background: rgba(245, 245, 247, 0.022);
}
.tailor-num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.35);
  background: rgba(var(--blue-rgb), 0.1);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-clip: padding-box;
  color: #f5f5f7;
}
.tailor-h {
  margin-top: 1.3rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tailor-p {
  margin-top: 0.75rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: #86868b;
}
.tailor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
.tailor-link {
  margin-top: 1rem;
  font-size: 13.5px;
  color: rgba(var(--blue-rgb), 0.95);
  transition: opacity 0.3s var(--ease);
}
.tailor-link:hover {
  opacity: 0.75;
}

.uplift {
  margin-top: 1.1rem;
  padding: 2.1rem 2.3rem 1.9rem;
  border-radius: 28px;
  border: 1px solid var(--hair);
  background: radial-gradient(90% 140% at 92% 0%, rgba(var(--blue-rgb), 0.13), transparent 60%), rgba(245, 245, 247, 0.022);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.6rem 2.6rem;
  align-items: center;
}
@media (max-width: 900px) {
  .uplift {
    grid-template-columns: 1fr;
    padding: 1.8rem 1.4rem 1.6rem;
  }
}
.uplift-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 560px) {
  .uplift-calc {
    grid-template-columns: 1fr;
  }
}
.uplift-col {
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: #0b0b0e;
}
.uplift-col.is-after {
  border-color: rgba(var(--blue-rgb), 0.4);
  background: linear-gradient(180deg, rgba(var(--blue-rgb), 0.12), rgba(var(--blue-rgb), 0.03)), #0b0b0e;
}
.uplift-cap {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5e5e63;
}
.uplift-col.is-after .uplift-cap {
  color: rgba(var(--blue-rgb), 0.95);
}
.uplift-line {
  margin-top: 0.7rem;
  font-size: 13px;
  line-height: 1.5;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.uplift-line b {
  color: #f5f5f7;
  font-weight: 600;
}
.uplift-line span {
  padding: 0 0.15rem;
  color: #5e5e63;
}
.uplift-big {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.uplift-col.is-after .uplift-big {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.uplift-big small {
  display: block;
  margin-top: 0.45rem;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: #5e5e63;
}
.uplift-note {
  grid-column: 1 / -1;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  line-height: 1.5;
  color: #5e5e63;
}

.cross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 1.9rem;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: radial-gradient(110% 150% at 90% 50%, rgba(var(--blue-rgb), 0.12), transparent 62%);
}
.cross > a {
  margin-left: auto;
}
@media (max-width: 700px) {
  .cross {
    padding: 1.4rem 1.3rem;
  }
  .cross > a {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auc-c,
  .auc-sum {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

.hero-chans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.hero-chan {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 13.5px;
  color: #86868b;
  transition:
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.hero-chan:hover {
  color: #f5f5f7;
  box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb), 0.45);
}
.hero-chan .fit-badge {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9px;
}
.hero-chan .fit-badge svg {
  width: 16px;
  height: 16px;
}
.hero-chan .fit-duo svg {
  width: 76%;
  height: 76%;
}

.ui-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.1rem;
  padding: 0 0.8rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
}
.ui-dots {
  display: flex;
  gap: 0.3rem;
}
.ui-dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #2e2e34;
}
.ui-urls {
  position: relative;
  flex: 0 1 13rem;
  height: 1.05rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.05);
}
.ui-url {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  color: #6b6b73;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.ui-url.is-on {
  opacity: 1;
}
.ui-stage {
  position: relative;
  height: 19rem;
}
@media (max-width: 640px) {
  .ui-stage {
    height: 17rem;
  }
}
.ui-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1.05rem 1rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.ui-view.is-on {
  opacity: 1;
  transform: none;
}

.ui-site-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
  font-size: 9px;
  color: #86868b;
}
.ui-site-nav b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f5f5f7;
}
.ui-site-nav em {
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.1);
  font-style: normal;
  color: #f5f5f7;
}
.ui-site-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0;
}
.ui-eyebrow {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ui-site-txt h4 {
  margin-top: 0.35rem;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.032em;
}
@media (max-width: 640px) {
  .ui-site-txt h4 {
    font-size: 16px;
  }
}
.ui-lead {
  margin-top: 0.4rem;
  font-size: 9px;
  line-height: 1.5;
  color: #86868b;
}
.ui-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: var(--grad-blue);
  font-size: 9px;
  font-weight: 500;
  color: #fff;
}
.ui-btn.sm {
  margin: 0;
  padding: 0.32rem 0.75rem;
}
.ui-site-photo {
  position: relative;
  align-self: stretch;
  min-height: 6.2rem;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(155deg, #1b2740 0%, #101522 55%, #0b0d13 100%);
}
.ui-site-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 55% at 50% 0%, rgba(90, 200, 250, 0.22), transparent 72%);
}
.ui-facade {
  position: absolute;
  inset: 0;
}
.ui-facade i {
  position: absolute;
  bottom: 0;
  background: rgba(245, 245, 247, 0.07);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.07);
}
.ui-facade i:nth-child(1) {
  left: 9%;
  width: 28%;
  height: 58%;
}
.ui-facade i:nth-child(2) {
  left: 39%;
  width: 25%;
  height: 80%;
  background: rgba(245, 245, 247, 0.1);
}
.ui-facade i:nth-child(3) {
  left: 66%;
  width: 23%;
  height: 44%;
}
.ui-facade i:nth-child(4) {
  left: 0;
  width: 100%;
  height: 12%;
  background: rgba(var(--blue-rgb), 0.22);
  box-shadow: none;
}
.ui-site-badge {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  z-index: 2;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.72);
  font-size: 8px;
  color: #f5f5f7;
}
.ui-site-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(245, 245, 247, 0.07);
}
.ui-site-facts b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.ui-site-facts span {
  font-size: 8px;
  color: #5e5e63;
}

.ui-shop-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(245, 245, 247, 0.07);
}
.ui-shop-top b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.ui-search {
  flex: 1;
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.06);
  font-size: 8.5px;
  color: #5e5e63;
}
.ui-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.07);
  color: #f5f5f7;
}
.ui-cart em {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  display: grid;
  place-items: center;
  min-width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: var(--grad-blue);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 600;
  color: #fff;
}
.ui-chips {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.ui-chips span {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.1);
  font-size: 8.5px;
  color: #86868b;
}
.ui-chips .is-on {
  background: var(--grad-blue);
  box-shadow: none;
  color: #fff;
}
.ui-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-top: 0.7rem;
}
.ui-grid article {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ui-thumb {
  position: relative;
  flex: 1;
  min-height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: rgba(245, 245, 247, 0.6);
}
.ui-thumb.t1 {
  background: linear-gradient(150deg, rgba(var(--blue-rgb), 0.42), rgba(90, 200, 250, 0.14) 62%, rgba(245, 245, 247, 0.04));
}
.ui-thumb.t2 {
  background: linear-gradient(150deg, rgba(120, 95, 225, 0.36), rgba(245, 245, 247, 0.05));
}
.ui-thumb.t3 {
  background: linear-gradient(150deg, rgba(90, 200, 250, 0.3), rgba(245, 245, 247, 0.04));
}
.ui-tag {
  position: absolute;
  top: 0.32rem;
  left: 0.32rem;
  padding: 0.08rem 0.35rem;
  border-radius: 5px;
  background: #f5f5f7;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  color: #0b0b0e;
}
.ui-grid p {
  margin-top: 0.4rem;
  font-size: 9px;
  color: #f5f5f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-grid b {
  margin-top: 0.1rem;
  font-size: 10px;
  font-weight: 600;
}
.ui-grid s {
  margin-left: 0.25rem;
  font-size: 8px;
  color: #5e5e63;
}
.ui-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(245, 245, 247, 0.07);
  font-size: 8.5px;
  color: #5e5e63;
}

.ui-app {
  flex-direction: row;
  padding: 0;
}
.ui-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 2.5rem;
  padding: 0.85rem 0;
  border-right: 1px solid rgba(245, 245, 247, 0.07);
  color: #4e4e55;
}
.ui-side-mark {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 6px;
  background: var(--grad-blue);
}
.ui-side .on {
  color: #5ac8fa;
}
.ui-app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 0.95rem;
}
.ui-app-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ui-app-top b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ui-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 8px;
  color: #5ac8fa;
}
.ui-live i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: #5ac8fa;
  animation: ui-pulse 2.2s var(--ease) infinite;
}
@keyframes ui-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.ui-av {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.1);
  font-size: 7.5px;
  font-weight: 600;
}
.ui-av.sm {
  margin: 0;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 7px;
}
.ui-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.ui-kpis div {
  padding: 0.45rem 0.55rem;
  border-radius: 9px;
  background: rgba(245, 245, 247, 0.04);
  min-width: 0;
}
.ui-kpis span {
  display: block;
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5e5e63;
}
.ui-kpis b {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ui-kpis em {
  font-size: 7.5px;
  font-style: normal;
  color: #5e5e63;
}
.ui-kpis .up {
  color: #5ac8fa;
}
.ui-chart {
  flex: 1;
  min-height: 3rem;
  margin-top: 0.6rem;
}
.ui-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ui-chart-line {
  stroke: #5ac8fa;
  stroke-width: 2;
  stroke-linecap: round;
}
.ui-chart-dot {
  fill: #5ac8fa;
}
.ui-rows {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.ui-rows div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.035);
  font-size: 9px;
}
.ui-rows b {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-rows em {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 7.5px;
  font-style: normal;
  white-space: nowrap;
}
.ui-rows .ok {
  background: rgba(var(--blue-rgb), 0.2);
  color: #5ac8fa;
}
.ui-rows .wait {
  background: rgba(245, 245, 247, 0.08);
  color: #86868b;
}

.ui-mob {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0.9rem 1.05rem;
}
.ui-phone {
  position: relative;
  flex: none;
  width: 8.6rem;
  height: 100%;
  padding: 0.28rem;
  border-radius: 20px;
  background: #16161b;
  box-shadow:
    inset 0 0 0 1px rgba(245, 245, 247, 0.14),
    0 24px 50px -24px #000;
}
.ui-notch {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.6rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #0a0a0d;
}
.ui-phone-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.2rem 0.6rem 0.5rem;
  border-radius: 17px;
  overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--blue-rgb), 0.22), transparent 60%), #0c0c11;
}
.ui-mob-top span {
  font-size: 8px;
  color: #5e5e63;
}
.ui-mob-top b {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ui-mob-card {
  position: relative;
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem 0.4rem;
  border-radius: 11px;
  background: linear-gradient(140deg, rgba(var(--blue-rgb), 0.55), rgba(90, 200, 250, 0.18));
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.1);
}
.ui-mob-card span {
  font-size: 7.5px;
  color: rgba(245, 245, 247, 0.75);
}
.ui-mob-card b {
  display: block;
  margin-top: 0.1rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.ui-mob-card svg {
  display: block;
  width: 100%;
  height: 1.3rem;
  margin-top: 0.2rem;
}
.ui-mob-card path {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ui-mob-list {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.55rem;
}
.ui-mob-list div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 8px;
  color: #f5f5f7;
}
.ui-mob-ico {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 6px;
  background: rgba(245, 245, 247, 0.08);
  color: #86868b;
}
.ui-mob-list b {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-mob-list em {
  flex: none;
  margin-left: auto;
  font-style: normal;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.ui-mob-list .in {
  color: #5ac8fa;
}
.ui-tabbar {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 0.5rem 0.35rem 0.15rem;
  border-top: 1px solid rgba(245, 245, 247, 0.07);
  color: #4e4e55;
}
.ui-tabbar .on {
  color: #5ac8fa;
}
.ui-mob-side {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
@media (max-width: 420px) {
  .ui-mob-side {
    display: none;
  }
}
.ui-mob-push {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgba(245, 245, 247, 0.06);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.08);
  font-size: 8.5px;
  color: #f5f5f7;
}
.ui-mob-push i {
  color: #5ac8fa;
}
.ui-mob-push em {
  font-style: normal;
}
.ui-mob-stars {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #5ac8fa;
}
.ui-mob-stars em {
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: 0;
  color: #5e5e63;
}
.ui-mob-os {
  font-size: 8.5px;
  color: #5e5e63;
}

.ui-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.85rem;
}
.ui-tab {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #000;
  font-size: 11.5px;
  color: #5e5e63;
  transition:
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
@media (min-width: 1024px) {
  .ui-tab {
    background: transparent;
  }
}
.ui-tab:hover {
  color: #86868b;
}
.ui-tab.is-on {
  color: #f5f5f7;
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.14);
}
.ui-tab:focus {
  outline: none;
}
.ui-tab:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-view,
  .ui-url {
    transition: none;
  }
  .ui-live i {
    animation: none;
  }
}