:root {
  --bg: #050614;
  --bg-soft: #0A0D22;
  --text: #F6F8FF;
  --muted: #A7B0D3;
  --line: rgba(255,255,255,.15);
  --glass: rgba(255,255,255,.075);
  --glass-strong: rgba(255,255,255,.12);
  --blue: #3BA7FF;
  --cyan: #55F2FF;
  --violet: #8B5CFF;
  --pink: #FF4FD8;
  --green: #4DFFB2;
  --shadow: 0 34px 120px rgba(0,0,0,.48);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% -20%, rgba(59,167,255,.22), transparent 34%),
    radial-gradient(circle at 100% 10%, rgba(139,92,255,.22), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(255,79,216,.12), transparent 34%),
    linear-gradient(180deg, #050614 0%, #090B1F 48%, #050614 100%);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .075;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 20%, #000, transparent 72%);
}

.aurora {
  position: fixed;
  width: 620px;
  height: 620px;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .34;
  pointer-events: none;
  z-index: -2;
  animation: floatAura 12s ease-in-out infinite;
}

.aurora-a {
  background: var(--blue);
  top: -180px;
  left: -160px;
}

.aurora-b {
  background: var(--violet);
  right: -190px;
  top: 120px;
  animation-delay: -4s;
}

.aurora-c {
  background: var(--pink);
  left: 35%;
  bottom: -260px;
  opacity: .18;
  animation-delay: -7s;
}

@keyframes floatAura {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(36px,-28px,0) scale(1.08); }
}

.header {
  width: min(1220px, calc(100% - 32px));
  margin: 22px auto 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: sticky;
  top: 14px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background: rgba(5,6,20,.68);
  backdrop-filter: blur(24px);
  box-shadow: 0 18px 70px rgba(0,0,0,.28);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-orb {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 25% 20%, #fff, transparent 18%),
    linear-gradient(135deg, var(--cyan), var(--blue) 42%, var(--violet));
  box-shadow:
    0 0 38px rgba(59,167,255,.48),
    inset 0 0 22px rgba(255,255,255,.22);
}

.brand-orb span {
  font-weight: 1000;
  letter-spacing: -.11em;
  color: white;
  text-shadow: 0 3px 14px rgba(0,0,0,.35);
}

.brand-copy b {
  display: block;
  font-size: 19px;
  letter-spacing: -.04em;
}

.brand-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: flex;
  gap: 26px;
  color: var(--muted);
  font-size: 14px;
}

.nav a {
  transition: .18s ease;
}

.nav a:hover {
  color: white;
}

.header-cta {
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
  transition: .2s ease;
}

.header-cta:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}

.hero {
  width: min(1220px, calc(100% - 32px));
  margin: 78px auto 0;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 46px;
  min-height: 670px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #D9F7FF;
  padding: 10px 15px;
  border: 1px solid rgba(85,242,255,.28);
  background: rgba(85,242,255,.08);
  border-radius: 999px;
  font-weight: 850;
  box-shadow: 0 0 36px rgba(85,242,255,.12);
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 20px var(--green);
}

h1 {
  margin: 24px 0 0;
  max-width: 720px;
  font-size: clamp(50px, 7.4vw, 96px);
  line-height: .87;
  letter-spacing: -.085em;
}

h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
  color: transparent;
  background: linear-gradient(90deg, #fff, var(--cyan), var(--violet), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 32px rgba(85,242,255,.20));
}

.hero-text {
  margin: 28px 0 0;
  max-width: 650px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.btn {
  min-height: 58px;
  padding: 15px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  font-weight: 950;
  transition: .22s ease;
}

.btn i {
  font-style: normal;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 12px;
}

.btn-primary {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.35), transparent 24%),
    linear-gradient(135deg, var(--blue), var(--violet) 62%, var(--pink));
  box-shadow:
    0 18px 58px rgba(59,167,255,.28),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 26px 78px rgba(139,92,255,.38),
    0 0 0 1px rgba(255,255,255,.18) inset;
}

.btn-ghost {
  background: rgba(255,255,255,.07);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.13);
}

.proof-strip {
  margin-top: 34px;
  max-width: 680px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.proof-strip div {
  min-height: 92px;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.proof-strip strong {
  display: block;
  font-size: 28px;
  letter-spacing: -.05em;
}

.proof-strip span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.hero-stage {
  height: 620px;
  border-radius: 46px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(85,242,255,.20), transparent 28%),
    radial-gradient(circle at 70% 70%, rgba(139,92,255,.20), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: var(--shadow);
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
}

.stage-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
  animation: gridMove 12s linear infinite;
}

@keyframes gridMove {
  to { transform: translateY(46px); }
}

.orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(85,242,255,.22);
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  animation: orbitPulse 5s ease-in-out infinite;
}

.orbit-1 {
  width: 230px;
  height: 230px;
}

.orbit-2 {
  width: 360px;
  height: 360px;
  animation-delay: -1.5s;
  border-color: rgba(139,92,255,.24);
}

.orbit-3 {
  width: 500px;
  height: 500px;
  animation-delay: -3s;
  border-color: rgba(255,255,255,.13);
}

@keyframes orbitPulse {
  0%, 100% { opacity: .45; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.035); }
}

.core {
  position: absolute;
  left: 50%;
  top: 47%;
  translate: -50% -50%;
  width: 172px;
  height: 172px;
  border-radius: 48px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.95), transparent 12%),
    linear-gradient(135deg, rgba(85,242,255,.96), rgba(59,167,255,.95) 40%, rgba(139,92,255,.98));
  box-shadow:
    0 0 90px rgba(85,242,255,.35),
    0 0 150px rgba(139,92,255,.28),
    inset 0 0 40px rgba(255,255,255,.22);
  transform: rotate(45deg);
}

.core-glow {
  position: absolute;
  inset: -45px;
  border-radius: 70px;
  background: radial-gradient(circle, rgba(85,242,255,.28), transparent 62%);
  animation: coreGlow 3.6s ease-in-out infinite;
}

@keyframes coreGlow {
  0%, 100% { opacity: .55; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.08); }
}

.core-logo {
  transform: rotate(-45deg);
  font-size: 78px;
  font-weight: 1000;
  letter-spacing: -.12em;
  text-shadow: 0 8px 28px rgba(0,0,0,.28);
  z-index: 1;
}

.core-label {
  position: absolute;
  left: 50%;
  bottom: -82px;
  translate: -50% 0;
  transform: rotate(-45deg);
  width: 190px;
  text-align: center;
}

.core-label b,
.core-label span {
  display: block;
}

.core-label span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.node {
  position: absolute;
  width: 112px;
  height: 102px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  border-radius: 28px;
  background: rgba(5,6,20,.58);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}

.node b {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

.node span {
  display: block;
  color: #EAF0FF;
  font-weight: 900;
  font-size: 13px;
  margin-top: -4px;
}

.node.active {
  border-color: rgba(85,242,255,.42);
  box-shadow:
    0 22px 70px rgba(59,167,255,.25),
    0 0 0 1px rgba(85,242,255,.12) inset;
}

.node-ru {
  left: 8%;
  top: 18%;
  animation: softFloat 5s ease-in-out infinite;
}

.node-de {
  right: 9%;
  top: 20%;
  animation: softFloat 5s ease-in-out infinite -1.4s;
}

.node-fi {
  left: 13%;
  bottom: 14%;
  animation: softFloat 5s ease-in-out infinite -2.5s;
}

@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.beam {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(85,242,255,.92), transparent);
  transform-origin: left center;
  filter: drop-shadow(0 0 14px rgba(85,242,255,.8));
  opacity: .78;
  animation: beamFlow 2.8s ease-in-out infinite;
}

.beam-a {
  width: 220px;
  left: 25%;
  top: 34%;
  rotate: 23deg;
}

.beam-b {
  width: 210px;
  right: 23%;
  top: 36%;
  rotate: -24deg;
  animation-delay: -.9s;
}

.beam-c {
  width: 230px;
  left: 26%;
  bottom: 29%;
  rotate: -18deg;
  animation-delay: -1.7s;
}

@keyframes beamFlow {
  0%, 100% { opacity: .22; transform: scaleX(.82); }
  50% { opacity: 1; transform: scaleX(1.05); }
}

.floating-card {
  position: absolute;
  min-width: 178px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(5,6,20,.56);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 52px rgba(0,0,0,.32);
}

.floating-card small,
.floating-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.floating-card b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

.card-speed {
  right: 8%;
  bottom: 15%;
}

.card-speed span {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--green), var(--cyan), var(--violet));
  box-shadow: 0 0 22px rgba(85,242,255,.38);
}

.card-sub {
  left: 8%;
  top: 44%;
}

.section,
.connect,
.price {
  width: min(1220px, calc(100% - 32px));
  margin: 112px auto 0;
}

.section-title p,
.price-badge {
  margin: 0;
  color: #D9F7FF;
  font-weight: 950;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .14em;
}

.section-title h2,
.price-left h2 {
  margin: 12px 0 0;
  max-width: 760px;
  font-size: clamp(36px, 5vw, 62px);
  line-height: .96;
  letter-spacing: -.065em;
}

.feature-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: 16px;
}

.feature-card {
  min-height: 250px;
  padding: 26px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
  transition: .22s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:before {
  content: "";
  position: absolute;
  inset: -80px;
  background: radial-gradient(circle at 20% 10%, rgba(85,242,255,.13), transparent 36%);
  opacity: 0;
  transition: .22s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(85,242,255,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
}

.feature-card:hover:before {
  opacity: 1;
}

.feature-card.big {
  grid-row: span 2;
  min-height: 516px;
  background:
    radial-gradient(circle at 18% 12%, rgba(85,242,255,.22), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
}

.feature-card.wide {
  grid-column: span 2;
}

.feature-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 28px;
  background: rgba(255,255,255,.095);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
}

.feature-card h3 {
  margin: 24px 0 0;
  font-size: 25px;
  letter-spacing: -.045em;
  position: relative;
}

.feature-card p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.65;
  position: relative;
}

.connect-panel {
  padding: 36px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 86% 18%, rgba(139,92,255,.20), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

.steps {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.step {
  min-height: 230px;
  padding: 25px;
  border-radius: 30px;
  background: rgba(5,6,20,.42);
  border: 1px solid rgba(255,255,255,.13);
}

.step strong {
  color: var(--cyan);
  font-size: 14px;
  letter-spacing: .16em;
}

.step h3 {
  margin: 24px 0 0;
  font-size: 24px;
  letter-spacing: -.045em;
}

.step p {
  color: var(--muted);
  line-height: 1.6;
}

.price {
  position: relative;
  padding: 36px;
  border-radius: 46px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 32px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(59,167,255,.15), rgba(139,92,255,.12), rgba(255,79,216,.10));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
}

.price-bg {
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(from 180deg, transparent, rgba(85,242,255,.22), transparent, rgba(255,79,216,.18), transparent);
  animation: spin 14s linear infinite;
  opacity: .55;
}

@keyframes spin {
  to { rotate: 360deg; }
}

.price-left,
.price-card {
  position: relative;
  z-index: 1;
}

.price-left p {
  max-width: 660px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 18px;
}

.price-card {
  padding: 28px;
  border-radius: 34px;
  background: rgba(5,6,20,.70);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(18px);
}

.price-card small,
.price-card span {
  color: var(--muted);
}

.price-card strong {
  display: block;
  margin-top: 4px;
  font-size: 74px;
  line-height: .9;
  letter-spacing: -.09em;
}

.price-card ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.price-card li {
  color: #E9EFFF;
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-card li:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
}

.full {
  width: 100%;
  margin-top: 26px;
}

.footer {
  width: min(1220px, calc(100% - 32px));
  margin: 80px auto 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
}

.footer b {
  color: #fff;
  margin-right: 8px;
}

.footer a {
  color: #fff;
  font-weight: 800;
}

@media (max-width: 1020px) {
  .nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    transform: none;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .feature-card.big,
  .feature-card.wide {
    grid-column: auto;
    grid-row: auto;
    min-height: 250px;
  }

  .price {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .header {
    width: calc(100% - 18px);
    border-radius: 22px;
    top: 8px;
  }

  .brand-copy small {
    display: none;
  }

  .header-cta {
    padding: 11px 13px;
    font-size: 13px;
  }

  .hero,
  .section,
  .connect,
  .price,
  .footer {
    width: calc(100% - 24px);
  }

  .hero {
    margin-top: 46px;
    min-height: auto;
  }

  h1 {
    font-size: 52px;
  }

  .hero-text {
    font-size: 17px;
  }

  .hero-actions {
    display: grid;
  }

  .btn {
    width: 100%;
  }

  .proof-strip,
  .feature-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    height: 560px;
    border-radius: 34px;
  }

  .core {
    width: 138px;
    height: 138px;
    border-radius: 40px;
  }

  .core-logo {
    font-size: 62px;
  }

  .node {
    width: 96px;
    height: 88px;
  }

  .node b {
    font-size: 30px;
  }

  .node-ru {
    left: 5%;
    top: 12%;
  }

  .node-de {
    right: 5%;
    top: 15%;
  }

  .node-fi {
    left: 8%;
    bottom: 12%;
  }

  .floating-card {
    min-width: 150px;
    padding: 13px;
  }

  .card-sub {
    left: 5%;
    top: 46%;
  }

  .card-speed {
    right: 5%;
    bottom: 12%;
  }

  .beam-a,
  .beam-b,
  .beam-c {
    opacity: .5;
  }

  .connect-panel,
  .price {
    padding: 22px;
    border-radius: 34px;
  }

  .footer {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Fix: identical branded SVG step badges */
.step strong {
  display: none;
}

.step-badge {
  width: 82px;
  height: 82px;
  display: block;
  margin: -6px 0 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(59,167,255,.34));
}

.step h3 {
  margin-top: 10px;
}

@media (max-width: 680px) {
  .step-badge {
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
  }
}


/* wow4 hero/header/text fixes */
.hero-kicker {
  display: none !important;
}

h1 {
  color: transparent !important;
  background: linear-gradient(90deg, #ffffff 0%, #c9f7ff 12%, #55F2FF 34%, #2F8DFF 58%, #7B61FF 78%, #B15CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 32px rgba(85,242,255,.16));
}

h1 span {
  color: inherit !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter: none !important;
  display: inline !important;
  width: auto !important;
}

.core-label,
.card-sub {
  display: none !important;
}

.header-cta {
  min-width: 182px;
  justify-content: center;
}

.proof-strip div strong {
  line-height: 1.05;
}

.node span {
  font-size: 14px;
}

@media (max-width: 680px) {
  .header-cta {
    min-width: 0;
  }
}


/* wow7: redesigned why section */
.why-v2 {
  margin-top: 112px;
}

.why-top {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: end;
}

.why-top .section-title h2 {
  max-width: 860px;
}

.why-lead {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
  max-width: 520px;
  justify-self: end;
}

.why-hero-card {
  margin-top: 34px;
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 15% 18%, rgba(85,242,255,.14), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(177,92,255,.14), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: 0 24px 80px rgba(0,0,0,.20);
}

.why-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.55));
  pointer-events: none;
}

.why-hero-inner {
  position: relative;
  z-index: 1;
  padding: 34px;
}

.why-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(85,242,255,.24);
  background: rgba(85,242,255,.08);
  color: #D9F7FF;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.why-hero-card h3 {
  margin: 18px 0 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: .98;
  letter-spacing: -.05em;
}

.why-hero-card p {
  margin: 16px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.why-tags {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.why-tags span,
.why-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #EAF2FF;
  font-weight: 700;
  font-size: 14px;
}

.why-grid-v2 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.why-card {
  min-height: 220px;
  padding: 26px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  box-shadow: 0 18px 64px rgba(0,0,0,.16);
  transition: .2s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(85,242,255,.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(85,242,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}

.why-card h3 {
  margin: 18px 0 0;
  font-size: 28px;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.why-card p {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 17px;
}

@media (max-width: 980px) {
  .why-top {
    grid-template-columns: 1fr;
  }

  .why-lead {
    justify-self: start;
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .why-hero-inner {
    padding: 24px;
  }

  .why-grid-v2 {
    grid-template-columns: 1fr;
  }

  .why-card {
    min-height: auto;
    padding: 22px;
  }

  .why-card h3 {
    font-size: 24px;
  }

  .why-hero-card p,
  .why-card p,
  .why-lead {
    font-size: 16px;
  }
}


/* wow12: header redesign like reference */
.header {
  width: min(1220px, calc(100% - 32px));
  min-height: 80px;
  margin: 18px auto 0;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  position: sticky;
  top: 12px;
  z-index: 30;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(8,10,28,.88), rgba(6,8,22,.80));
  backdrop-filter: blur(18px);
  box-shadow:
    0 14px 48px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.brand-logo img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 14px rgba(77,157,255,.18));
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  color: rgba(235,242,255,.76);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.nav-header a {
  position: relative;
  transition: .18s ease;
  white-space: nowrap;
}

.nav-header a:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(85,242,255,.20);
}

.nav-header a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #55F2FF, #7B61FF, #B15CFF);
  transform: scaleX(0);
  transform-origin: center;
  transition: .18s ease;
  opacity: .9;
}

.nav-header a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  min-width: 188px;
  min-height: 54px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(123,97,255,.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(9,12,30,.72);
  box-shadow:
    0 0 0 1px rgba(85,242,255,.04) inset,
    0 0 22px rgba(123,97,255,.14);
  color: #FFFFFF;
  font-weight: 800;
  transition: .2s ease;
}

.header-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(85,242,255,.48);
  box-shadow:
    0 0 0 1px rgba(85,242,255,.08) inset,
    0 0 28px rgba(123,97,255,.22);
}

@media (max-width: 980px) {
  .header {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .nav-header {
    display: none;
  }

  .brand-logo img {
    height: 44px;
  }
}

@media (max-width: 680px) {
  .header {
    width: calc(100% - 18px);
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 20px;
    top: 8px;
  }

  .brand-logo img {
    height: 38px;
  }

  .header-cta {
    min-width: 0;
    min-height: 46px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 14px;
  }
}


/* wow13: use original horizontal logo in header */
.brand-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-logo img {
  display: block;
  height: 54px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(77,157,255,.14));
}

.header {
  grid-template-columns: auto 1fr auto;
}

.nav-header {
  justify-content: center;
}

@media (max-width: 980px) {
  .brand-logo img {
    height: 48px;
    max-width: 260px;
  }
}

@media (max-width: 680px) {
  .brand-logo img {
    height: 38px;
    max-width: 190px;
  }
}


/* === NEROLINK REF SKIN START === */

/*
  Reference-inspired visual skin:
  - current layout is preserved
  - only background, cards, blocks, buttons, borders and glow are restyled
*/

:root {
  --ref-bg: #040614;
  --ref-panel: rgba(7, 10, 25, .74);
  --ref-panel-2: rgba(12, 16, 35, .72);
  --ref-line: rgba(90, 118, 255, .22);
  --ref-line-soft: rgba(255,255,255,.095);
  --ref-text: #F6F8FF;
  --ref-muted: #AEB6D3;
  --ref-blue: #0A84FF;
  --ref-cyan: #56EFFF;
  --ref-violet: #7B61FF;
  --ref-purple: #B15CFF;
  --ref-shadow: 0 28px 95px rgba(0,0,0,.44);
}

body {
  background:
    radial-gradient(circle at 20% 4%, rgba(10,132,255,.16), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(177,92,255,.14), transparent 28%),
    radial-gradient(circle at 50% 105%, rgba(123,97,255,.11), transparent 34%),
    linear-gradient(180deg, #030511 0%, #06091B 46%, #030511 100%) !important;
}

/* фоновые световые линии как на референсе */
body::before {
  content: "";
  position: fixed;
  left: -160px;
  top: 330px;
  width: 760px;
  height: 270px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 0% 52%, rgba(10,132,255,.34), transparent 28%),
    linear-gradient(90deg, transparent 0%, rgba(10,132,255,.52) 20%, rgba(69,91,255,.38) 48%, rgba(177,92,255,.22) 72%, transparent 100%);
  filter: blur(22px);
  opacity: .76;
  transform: rotate(-9deg);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .055;
  background-image:
    linear-gradient(rgba(255,255,255,.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.75) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 16%, #000, transparent 80%);
}

/* шапка — темная стеклянная панель */
.header,
.site-header {
  border-radius: 24px !important;
  border: 1px solid rgba(123,97,255,.22) !important;
  background:
    linear-gradient(180deg, rgba(8,11,28,.86), rgba(4,7,18,.76)) !important;
  box-shadow:
    0 18px 58px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(18px) !important;
}

/* основной hero-блок/визуал — больше глубины и glow */
.hero-stage,
.visual-card,
.auth-card {
  border: 1px solid rgba(123,97,255,.20) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(86,239,255,.16), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(177,92,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028)) !important;
  box-shadow:
    var(--ref-shadow),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

/* карточки, блоки, панели */
.proof-strip div,
.feature-card,
.step,
.step-card,
.why-card,
.why-hero-card,
.connect-panel,
.price,
.price-box,
.price-card,
.node,
.floating-card,
.mini-cards div,
.status-card,
.route-node,
.auth-btn,
.help-card,
.no-tg,
.bottom-strip {
  border: 1px solid rgba(123,97,255,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022)),
    rgba(5,8,20,.66) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

/* мягкое наведение у карточек */
.proof-strip div,
.feature-card,
.step,
.step-card,
.why-card,
.node,
.auth-btn,
.help-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.proof-strip div:hover,
.feature-card:hover,
.step:hover,
.step-card:hover,
.why-card:hover,
.node:hover,
.help-card:hover {
  transform: translateY(-3px);
  border-color: rgba(86,239,255,.30) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(86,239,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028)),
    rgba(5,8,20,.72) !important;
  box-shadow:
    0 26px 84px rgba(0,0,0,.28),
    0 0 34px rgba(86,239,255,.055),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

/* иконки/бейджи — как неоновые круглые элементы */
.feature-icon,
.btn-icon,
.mini-lock,
.icon-circle {
  border: 1px solid rgba(86,239,255,.22) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(10,132,255,.22), rgba(123,97,255,.08) 54%, rgba(255,255,255,.02)) !important;
  color: #63DFFF !important;
  box-shadow:
    0 0 26px rgba(10,132,255,.12),
    inset 0 0 22px rgba(86,239,255,.08) !important;
}

/* кнопки — как в референсе: читаемый белый текст, насыщенный градиент */
.btn-primary,
.trial-btn,
.steps-cta,
.auth-btn-primary {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.68) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(90deg, #078DFF 0%, #245DFF 42%, #7B37F2 74%, #B02CFF 100%) !important;
  box-shadow:
    0 18px 50px rgba(42,91,255,.28),
    0 0 34px rgba(177,92,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.btn-primary:hover,
.trial-btn:hover,
.steps-cta:hover,
.auth-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 68px rgba(42,91,255,.34),
    0 0 42px rgba(177,92,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

/* вторичные кнопки — стеклянные, но с неоновой рамкой */
.btn-ghost,
.btn-soft,
.header-cta,
.header-btn {
  color: #fff !important;
  border: 1px solid rgba(123,97,255,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(5,8,20,.70) !important;
  box-shadow:
    0 0 24px rgba(123,97,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.btn-ghost:hover,
.btn-soft:hover,
.header-cta:hover,
.header-btn:hover {
  border-color: rgba(86,239,255,.42) !important;
  box-shadow:
    0 0 32px rgba(86,239,255,.13),
    0 0 28px rgba(123,97,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

/* ценовой блок — темная карточка с яркой ценой */
.price-card,
.price-box {
  position: relative;
  overflow: hidden;
}

.price-card::before,
.price-box::before,
.price::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(10,132,255,.16), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(177,92,255,.16), transparent 32%);
  opacity: .9;
}

/* текстовые акценты */
h1,
.price-card strong,
.price-number,
.bottom-right {
  color: transparent !important;
  background: linear-gradient(90deg, #fff 0%, #DDFBFF 12%, #56EFFF 33%, #258DFF 56%, #7B61FF 78%, #B15CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.lead,
.hero-text,
.step p,
.step-card p,
.price-left p,
.price-copy p,
.auth-head p,
.no-tg p,
.section-head p {
  color: rgba(184,194,225,.86) !important;
}

/* нижние/разделительные панели */
.footer,
.site-footer {
  border-top-color: rgba(123,97,255,.16) !important;
}

/* чуть ближе к референсу на мобильных */
@media (max-width: 720px) {
  body::before {
    top: 260px;
    left: -220px;
    width: 640px;
    opacity: .58;
  }

  .proof-strip div,
  .feature-card,
  .step,
  .step-card,
  .connect-panel,
  .price,
  .price-box,
  .price-card {
    border-radius: 24px !important;
  }
}

/* === NEROLINK REF SKIN END === */


/* === NEROLINK REFERENCE STYLE V2 START === */

/* ---------- palette ---------- */
:root {
  --nl-ref-bg-1: #02040f;
  --nl-ref-bg-2: #06091a;
  --nl-ref-bg-3: #090d20;
  --nl-ref-panel: rgba(6, 9, 22, .84);
  --nl-ref-panel-2: rgba(10, 14, 30, .78);
  --nl-ref-border: rgba(96, 84, 255, .24);
  --nl-ref-border-soft: rgba(255,255,255,.08);
  --nl-ref-text: #F4F7FF;
  --nl-ref-muted: #AAB3D1;
  --nl-ref-blue: #078DFF;
  --nl-ref-blue2: #295EFF;
  --nl-ref-cyan: #56F0FF;
  --nl-ref-violet: #7B61FF;
  --nl-ref-purple: #B15CFF;
  --nl-ref-shadow: 0 32px 110px rgba(0,0,0,.44);
}

/* ---------- global background ---------- */
html, body {
  background:
    radial-gradient(circle at 16% 8%, rgba(7,141,255,.16), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(177,92,255,.16), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(123,97,255,.10), transparent 34%),
    linear-gradient(180deg, #02040f 0%, #050818 45%, #02040f 100%) !important;
  color: var(--nl-ref-text) !important;
}

body {
  position: relative;
  overflow-x: hidden;
}

/* сетка */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  opacity: .05;
  background-image:
    linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 18%, #000, transparent 82%);
}

/* световой шлейф слева как в референсе */
body::after {
  content: "";
  position: fixed;
  left: -220px;
  top: 280px;
  width: 900px;
  height: 300px;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 4% 50%, rgba(14,142,255,.36), transparent 25%),
    linear-gradient(90deg,
      rgba(7,141,255,0) 0%,
      rgba(7,141,255,.70) 18%,
      rgba(53,95,255,.48) 42%,
      rgba(177,92,255,.28) 74%,
      rgba(177,92,255,0) 100%);
  filter: blur(22px);
  opacity: .78;
  transform: rotate(-9deg);
}

/* ---------- typography ---------- */
body,
p,
span,
small,
li {
  color: inherit;
}

.hero-text,
.lead,
.step p,
.step-card p,
.feature-card p,
.proof-strip span,
.price-left p,
.auth-head p,
.no-tg p,
.why-lead,
.why-card p,
.why-hero-card p,
.section-head p {
  color: rgba(180,191,223,.88) !important;
}

h1 {
  color: transparent !important;
  background: linear-gradient(90deg, #ffffff 0%, #e6fbff 14%, #56F0FF 34%, #298DFF 56%, #7B61FF 78%, #B15CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 26px rgba(86,240,255,.14));
}

h2, h3, strong, .price-card strong, .price-number, .bottom-right {
  color: var(--nl-ref-text) !important;
}

/* ---------- header ---------- */
.header,
.site-header {
  border-radius: 24px !important;
  border: 1px solid rgba(123,97,255,.22) !important;
  background:
    linear-gradient(180deg, rgba(7,10,24,.86), rgba(4,7,18,.78)) !important;
  box-shadow:
    0 18px 56px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
  backdrop-filter: blur(18px) !important;
}

.header-nav a,
.nav-header a,
.nav a {
  color: rgba(235,242,255,.78) !important;
}

.header-nav a:hover,
.nav-header a:hover,
.nav a:hover {
  color: #fff !important;
  text-shadow: 0 0 18px rgba(86,240,255,.16);
}

.header-cta,
.header-btn {
  border-radius: 16px !important;
  border: 1px solid rgba(123,97,255,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(5,8,20,.72) !important;
  color: #fff !important;
  box-shadow:
    0 0 28px rgba(123,97,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.header-cta:hover,
.header-btn:hover {
  border-color: rgba(86,240,255,.42) !important;
  box-shadow:
    0 0 34px rgba(86,240,255,.11),
    0 0 28px rgba(123,97,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* ---------- main hero / panels ---------- */
.hero-stage,
.connect-panel,
.price,
.price-card,
.price-box,
.auth-card,
.no-tg,
.why-hero-card,
.bottom-strip,
.showcase,
.steps-section {
  border: 1px solid rgba(123,97,255,.22) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(86,240,255,.08), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(177,92,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016)),
    rgba(5,8,20,.78) !important;
  box-shadow:
    var(--nl-ref-shadow),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
  backdrop-filter: blur(10px);
}

/* ---------- cards ---------- */
.proof-strip div,
.feature-card,
.step,
.step-card,
.why-card,
.node,
.floating-card,
.auth-btn,
.help-card {
  border-radius: 26px !important;
  border: 1px solid rgba(123,97,255,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.016)),
    rgba(5,8,20,.70) !important;
  box-shadow:
    0 22px 74px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.proof-strip div:hover,
.feature-card:hover,
.step:hover,
.step-card:hover,
.why-card:hover,
.help-card:hover,
.node:hover {
  transform: translateY(-3px);
  border-color: rgba(86,240,255,.30) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(86,240,255,.06), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.064), rgba(255,255,255,.020)),
    rgba(5,8,20,.78) !important;
  box-shadow:
    0 28px 86px rgba(0,0,0,.26),
    0 0 28px rgba(86,240,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

/* ---------- icon circles ---------- */
.feature-icon,
.btn-icon,
.icon-circle,
.mini-lock {
  border: 1px solid rgba(86,240,255,.18) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(7,141,255,.18), rgba(123,97,255,.08) 58%, rgba(255,255,255,.01)) !important;
  color: #5DDFFF !important;
  box-shadow:
    0 0 24px rgba(7,141,255,.10),
    inset 0 0 22px rgba(86,240,255,.06) !important;
}

/* ---------- buttons ---------- */
.btn-primary,
.trial-btn,
.steps-cta,
.auth-btn-primary {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.70) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(90deg, #078DFF 0%, #285EFF 42%, #7B38F1 74%, #B02DFF 100%) !important;
  box-shadow:
    0 18px 54px rgba(40,94,255,.28),
    0 0 34px rgba(177,92,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.10) !important;
}

.btn-primary:hover,
.trial-btn:hover,
.steps-cta:hover,
.auth-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 68px rgba(40,94,255,.34),
    0 0 42px rgba(177,92,255,.20),
    inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

.btn-primary i {
  background: rgba(0,0,0,.26) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);
}

/* ---------- price accents ---------- */
.price-card strong,
.price-number {
  color: transparent !important;
  background: linear-gradient(180deg, #5CE3FF 0%, #1C76FF 46%, #B15CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.price-card,
.price-box {
  overflow: hidden;
  position: relative;
}

.price-card::before,
.price-box::before,
.price::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(7,141,255,.12), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(177,92,255,.12), transparent 30%);
  opacity: .9;
}

/* ---------- special reference-looking strip ---------- */
.bottom-strip {
  border-radius: 22px !important;
}

.bottom-right {
  color: #3B97FF !important;
  font-weight: 700;
}

/* ---------- footer ---------- */
.footer,
.site-footer {
  border-top-color: rgba(123,97,255,.16) !important;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  body::after {
    top: 240px;
    left: -260px;
    width: 740px;
    opacity: .60;
  }

  .proof-strip div,
  .feature-card,
  .step,
  .step-card,
  .connect-panel,
  .price,
  .price-card,
  .price-box,
  .auth-card {
    border-radius: 22px !important;
  }
}

/* === NEROLINK REFERENCE STYLE V2 END === */


/* === NEROLINK BRAND PACK COLORS START === */

/*
  NeroLink brand pack palette:
  Blue:   #0A84FF
  Indigo: #3B5BFF
  Violet: #7B61FF
  Purple: #B15CFF
  White:  #F2F4FF
  Dark:   #0D111A
*/

:root {
  --nl-blue: #0A84FF;
  --nl-indigo: #3B5BFF;
  --nl-violet: #7B61FF;
  --nl-purple: #B15CFF;
  --nl-white: #F2F4FF;
  --nl-dark: #0D111A;

  --blue: #0A84FF !important;
  --blue2: #3B5BFF !important;
  --cyan: #0A84FF !important;
  --violet: #7B61FF !important;
  --pink: #B15CFF !important;
  --muted: rgba(242,244,255,.68) !important;
  --text: #F2F4FF !important;
}

html,
body {
  background:
    radial-gradient(circle at 14% 8%, rgba(10,132,255,.16), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(177,92,255,.15), transparent 32%),
    radial-gradient(circle at 50% 105%, rgba(123,97,255,.12), transparent 36%),
    linear-gradient(180deg, #060914 0%, #0D111A 46%, #050711 100%) !important;
  color: #F2F4FF !important;
}

/* фоновой поток в фирменных цветах */
body::after {
  content: "";
  position: fixed;
  left: -220px;
  top: 285px;
  width: 900px;
  height: 310px;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(circle at 4% 50%, rgba(10,132,255,.34), transparent 25%),
    linear-gradient(90deg,
      rgba(10,132,255,0) 0%,
      rgba(10,132,255,.72) 17%,
      rgba(59,91,255,.50) 43%,
      rgba(123,97,255,.34) 66%,
      rgba(177,92,255,.20) 82%,
      rgba(177,92,255,0) 100%);
  filter: blur(22px);
  opacity: .78;
  transform: rotate(-9deg);
}

/* общий брендовый градиент */
h1,
h1 span,
.price-number,
.price-card strong,
.bottom-right,
.steps-cta,
.trial-btn {
  background-image: linear-gradient(
    90deg,
    #F2F4FF 0%,
    #0A84FF 30%,
    #3B5BFF 52%,
    #7B61FF 74%,
    #B15CFF 100%
  ) !important;
}

/* заголовки с мягким белым, как в брендпаке */
h2,
h3,
strong,
.brand-copy b,
.section-title h2,
.section-head h2 {
  color: #F2F4FF !important;
}

/* вторичный текст */
p,
small,
.lead,
.hero-text,
.section-head p,
.step p,
.step-card p,
.feature-card p,
.auth-head p,
.no-tg p,
.price-left p,
.price-copy p,
.proof-strip span {
  color: rgba(242,244,255,.68) !important;
}

/* панели и карточки */
.header,
.site-header,
.hero-stage,
.visual-card,
.connect-panel,
.price,
.price-box,
.price-card,
.auth-card,
.no-tg,
.proof-strip div,
.feature-card,
.step,
.step-card,
.node,
.floating-card,
.help-card,
.auth-btn,
.bottom-strip {
  border-color: rgba(123,97,255,.24) !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(10,132,255,.075), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(177,92,255,.075), transparent 32%),
    linear-gradient(180deg, rgba(242,244,255,.055), rgba(242,244,255,.016)),
    rgba(13,17,26,.76) !important;
  box-shadow:
    0 28px 94px rgba(0,0,0,.42),
    0 0 0 1px rgba(242,244,255,.018) inset !important;
}

/* hover у карточек */
.proof-strip div:hover,
.feature-card:hover,
.step:hover,
.step-card:hover,
.node:hover,
.help-card:hover {
  border-color: rgba(10,132,255,.36) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(10,132,255,.105), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(177,92,255,.085), transparent 30%),
    linear-gradient(180deg, rgba(242,244,255,.075), rgba(242,244,255,.022)),
    rgba(13,17,26,.82) !important;
  box-shadow:
    0 32px 104px rgba(0,0,0,.48),
    0 0 30px rgba(10,132,255,.075),
    0 0 30px rgba(177,92,255,.055),
    0 0 0 1px rgba(242,244,255,.024) inset !important;
}

/* кнопки — строго в палитре брендпака */
.btn-primary,
.trial-btn,
.steps-cta,
.auth-btn-primary {
  color: #F2F4FF !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.72) !important;
  border: 1px solid rgba(242,244,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(242,244,255,.14), rgba(242,244,255,.025)),
    linear-gradient(90deg, #0A84FF 0%, #3B5BFF 40%, #7B61FF 70%, #B15CFF 100%) !important;
  box-shadow:
    0 18px 54px rgba(59,91,255,.30),
    0 0 34px rgba(177,92,255,.18),
    0 0 0 1px rgba(242,244,255,.10) inset !important;
}

.btn-primary:hover,
.trial-btn:hover,
.steps-cta:hover,
.auth-btn-primary:hover {
  box-shadow:
    0 24px 70px rgba(59,91,255,.38),
    0 0 44px rgba(177,92,255,.24),
    0 0 0 1px rgba(242,244,255,.16) inset !important;
}

/* стеклянные кнопки */
.btn-ghost,
.btn-soft,
.header-cta,
.header-btn {
  color: #F2F4FF !important;
  border: 1px solid rgba(123,97,255,.46) !important;
  background:
    linear-gradient(180deg, rgba(242,244,255,.06), rgba(242,244,255,.018)),
    rgba(13,17,26,.72) !important;
  box-shadow:
    0 0 24px rgba(123,97,255,.14),
    0 0 0 1px rgba(242,244,255,.025) inset !important;
}

.btn-ghost:hover,
.btn-soft:hover,
.header-cta:hover,
.header-btn:hover {
  border-color: rgba(10,132,255,.46) !important;
  box-shadow:
    0 0 30px rgba(10,132,255,.14),
    0 0 30px rgba(177,92,255,.14),
    0 0 0 1px rgba(242,244,255,.04) inset !important;
}

/* иконки / бейджи */
.feature-icon,
.btn-icon,
.icon-circle,
.mini-lock,
.step-badge {
  color: #F2F4FF !important;
  border-color: rgba(10,132,255,.28) !important;
  background:
    radial-gradient(circle at 38% 30%, rgba(242,244,255,.16), transparent 18%),
    linear-gradient(135deg, rgba(10,132,255,.24), rgba(123,97,255,.18), rgba(177,92,255,.16)) !important;
  box-shadow:
    0 0 26px rgba(10,132,255,.14),
    0 0 24px rgba(177,92,255,.10),
    0 0 0 1px rgba(242,244,255,.045) inset !important;
}

/* цена */
.price-card strong,
.price-number {
  color: transparent !important;
  background:
    linear-gradient(180deg, #0A84FF 0%, #3B5BFF 45%, #B15CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 18px rgba(59,91,255,.18));
}

.price-currency,
.price-period {
  color: rgba(242,244,255,.82) !important;
}

/* нижние линии/разделители */
.footer,
.site-footer {
  border-top-color: rgba(123,97,255,.18) !important;
}

/* логотип в шапке чуть мягче, без чужих оттенков */
.brand-logo img,
.header-logo img {
  filter:
    drop-shadow(0 0 12px rgba(10,132,255,.16))
    drop-shadow(0 0 18px rgba(177,92,255,.08)) !important;
}

/* === NEROLINK BRAND PACK COLORS END === */


/* === NEROLINK PAYMENT BRAND REPAIR START === */

/*
  Правильная схема:
  - .price отвечает только за геометрию блока
  - .price-bg отвечает только за анимацию
  - ::before/::after на .price/.price-card отключены, чтобы не ломали layout
  - цвета строго из брендпака
*/

.price,
.price-box,
.price-card {
  transform: none !important;
}

.price::before,
.price::after,
.price-box::before,
.price-box::after,
.price-card::before,
.price-card::after {
  content: none !important;
  display: none !important;
}

/* Восстановление нормальной геометрии блока оплаты */
.price {
  width: min(1220px, calc(100% - 32px)) !important;
  margin: 110px auto 0 !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr 370px !important;
  gap: 32px !important;
  align-items: center !important;
  padding: 36px !important;
  border-radius: 46px !important;
  border: 1px solid rgba(123,97,255,.28) !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(10,132,255,.14), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(177,92,255,.13), transparent 32%),
    linear-gradient(135deg, rgba(10,132,255,.08), rgba(123,97,255,.07), rgba(177,92,255,.06)),
    rgba(13,17,26,.86) !important;
  box-shadow:
    0 34px 120px rgba(0,0,0,.46),
    0 0 42px rgba(59,91,255,.10),
    inset 0 0 0 1px rgba(242,244,255,.025) !important;
}

/* Анимация только отдельным фоновым слоем, не влияет на сетку */
.price-bg {
  display: block !important;
  position: absolute !important;
  inset: -45% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    conic-gradient(
      from 180deg,
      transparent 0deg,
      rgba(10,132,255,.26) 64deg,
      rgba(59,91,255,.24) 122deg,
      rgba(123,97,255,.24) 190deg,
      rgba(177,92,255,.22) 252deg,
      rgba(242,244,255,.06) 306deg,
      transparent 360deg
    ) !important;
  opacity: .58 !important;
  filter: blur(0px) !important;
  animation: nlPaymentSpinBrand 14s linear infinite !important;
}

@keyframes nlPaymentSpinBrand {
  to {
    transform: rotate(360deg);
  }
}

/* Контент блока поверх анимации */
.price-left,
.price-copy,
.price-card {
  position: relative !important;
  z-index: 1 !important;
}

.price-left h2,
.price-copy h2 {
  color: #F2F4FF !important;
}

.price-left p,
.price-copy p {
  color: rgba(242,244,255,.70) !important;
}

/* Карточка тарифа внутри блока */
.price-card {
  padding: 28px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(123,97,255,.30) !important;
  background:
    linear-gradient(180deg, rgba(242,244,255,.065), rgba(242,244,255,.018)),
    rgba(13,17,26,.88) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.36),
    0 0 34px rgba(59,91,255,.10),
    inset 0 0 0 1px rgba(242,244,255,.025) !important;
}

/* Цена */
.price-card strong,
.price-number {
  display: block;
  color: transparent !important;
  background:
    linear-gradient(180deg, #0A84FF 0%, #3B5BFF 42%, #7B61FF 68%, #B15CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 18px rgba(59,91,255,.20));
}

.price-card small,
.price-card span,
.price-currency,
.price-period {
  color: rgba(242,244,255,.78) !important;
}

/* Кнопка в оплате */
.price .btn-primary,
.price-card .btn-primary,
.price a.btn-primary,
.price-card a.btn-primary,
.trial-btn {
  color: #F2F4FF !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.72) !important;
  border: 1px solid rgba(242,244,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(242,244,255,.14), rgba(242,244,255,.025)),
    linear-gradient(90deg, #0A84FF 0%, #3B5BFF 38%, #7B61FF 68%, #B15CFF 100%) !important;
  box-shadow:
    0 18px 54px rgba(59,91,255,.30),
    0 0 34px rgba(177,92,255,.18),
    inset 0 0 0 1px rgba(242,244,255,.08) !important;
}

.price .btn-primary:hover,
.price-card .btn-primary:hover,
.price a.btn-primary:hover,
.price-card a.btn-primary:hover,
.trial-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 70px rgba(59,91,255,.36),
    0 0 46px rgba(177,92,255,.24),
    inset 0 0 0 1px rgba(242,244,255,.14) !important;
}

@media (max-width: 1020px) {
  .price {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .price {
    width: calc(100% - 24px) !important;
    margin-top: 80px !important;
    padding: 22px !important;
    border-radius: 34px !important;
  }

  .price-card {
    padding: 24px !important;
    border-radius: 28px !important;
  }
}

/* === NEROLINK PAYMENT BRAND REPAIR END === */


/* === NEROLINK STEP BADGE FRAME FIX START === */

/*
  Fix unwanted square frames around step number images.
  The generated SVG already contains its own frame/glow,
  so outer CSS border/background must not be applied to img.step-badge.
*/

img.step-badge,
.step img.step-badge,
.step-card img.step-badge {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 18px rgba(59,91,255,.28)) drop-shadow(0 0 14px rgba(177,92,255,.16)) !important;
}

/* Do not let global icon/badge skin affect image badges */
.feature-icon.step-badge,
.btn-icon.step-badge,
.icon-circle.step-badge,
.mini-lock.step-badge {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep text step badges styled only if they are real div badges, not images */
div.step-badge {
  border: 1px solid rgba(242,244,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(242,244,255,.14), rgba(242,244,255,.025)),
    linear-gradient(135deg, #0A84FF 0%, #3B5BFF 42%, #7B61FF 70%, #B15CFF 100%) !important;
  box-shadow:
    0 16px 40px rgba(59,91,255,.24),
    0 0 24px rgba(177,92,255,.14),
    inset 0 0 0 1px rgba(242,244,255,.08) !important;
}

/* === NEROLINK STEP BADGE FRAME FIX END === */


/* === NEROLINK CENTER LOGO STATIC FIX START === */

/* Replace old center diamond with original NeroLink icon in a round brand circle */
.core.core-logo-image {
  width: clamp(190px, 22vw, 300px) !important;
  height: clamp(190px, 22vw, 300px) !important;
  border-radius: 999px !important;
  transform: none !important;
  rotate: 0deg !important;
  display: grid !important;
  place-items: center !important;
  padding: 14px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(242,244,255,.13), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(10,132,255,.20), rgba(123,97,255,.11) 55%, rgba(13,17,26,.86) 100%) !important;
  border: 1px solid rgba(123,97,255,.36) !important;
  box-shadow:
    0 0 54px rgba(10,132,255,.24),
    0 0 64px rgba(177,92,255,.18),
    inset 0 0 0 1px rgba(242,244,255,.05) !important;
  z-index: 7 !important;
}

.core.core-logo-image::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 180deg,
      rgba(10,132,255,0),
      rgba(10,132,255,.48),
      rgba(59,91,255,.36),
      rgba(123,97,255,.40),
      rgba(177,92,255,.46),
      rgba(10,132,255,0)
    );
  filter: blur(20px);
  opacity: .72;
  z-index: -1;
}

.core-logo-circle {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: #0D111A;
  border: 1px solid rgba(242,244,255,.12);
  box-shadow:
    0 0 30px rgba(10,132,255,.18),
    0 0 28px rgba(177,92,255,.14),
    inset 0 0 0 1px rgba(242,244,255,.04);
}

.core-logo-circle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 999px;
}

/* Make sure old text logo styles do not affect image version */
.core.core-logo-image .core-logo,
.core.core-logo-image .core-label,
.core.core-logo-image .core-glow {
  display: none !important;
}

@media (max-width: 680px) {
  .core.core-logo-image {
    width: clamp(150px, 44vw, 220px) !important;
    height: clamp(150px, 44vw, 220px) !important;
    padding: 10px !important;
  }
}

/* === NEROLINK CENTER LOGO STATIC FIX END === */


/* === NEROLINK HEADER ORIGINAL LOGO START === */

.header-logo,
.brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

.header-logo img,
.brand-logo img,
.header .brand-logo img,
.site-header .header-logo img {
  display: block !important;
  height: 52px !important;
  width: auto !important;
  max-width: 330px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 12px rgba(10,132,255,.16))
    drop-shadow(0 0 18px rgba(177,92,255,.08)) !important;
}

@media (max-width: 980px) {
  .header-logo img,
  .brand-logo img,
  .header .brand-logo img,
  .site-header .header-logo img {
    height: 46px !important;
    max-width: 270px !important;
  }
}

@media (max-width: 680px) {
  .header-logo img,
  .brand-logo img,
  .header .brand-logo img,
  .site-header .header-logo img {
    height: 38px !important;
    max-width: 195px !important;
  }
}

/* === NEROLINK HEADER ORIGINAL LOGO END === */