/* Self-hosted fonts (152-ФЗ: без Google Fonts) */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/golos-text-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/golos-text-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #080a0d;
  --panel: #0d1014;
  --panel-2: #12161b;
  --line: rgba(231, 234, 229, .14);
  --line-strong: rgba(231, 234, 229, .26);
  --paper: #e9e9e2;
  --muted: #92989e;
  --blue: #436fff;
  --blue-bright: #6b8cff;
  --red: #ff4f3f;
  --radius: 10px;
  --pad: clamp(20px, 4vw, 64px);
  --max: 1600px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
section[id] { scroll-margin-top: 66px; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--paper);
  background:
    radial-gradient(circle at 75% 6%, rgba(67, 111, 255, .07), transparent 30%),
    var(--ink);
  font-family: "Golos Text", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
main > *, .hero > *, .section-heading > *, .network > *, .security-grid > *, .plans__heading > *, .plan-grid > *, .faq > *, .final-cta > * { min-width: 0; }
::selection { color: white; background: var(--blue); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  min-height: 78px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, min-height .3s ease;
}
.nav.is-scrolled {
  min-height: 66px;
  background: rgba(8, 10, 13, .82);
  border-color: var(--line);
  backdrop-filter: blur(18px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand img { display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,.28)); }
.nav > .brand img { width: 52px; height: 35px; }
.brand span {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .055em;
}
.brand b { color: var(--blue-bright); }
.brand__name { line-height: 1.05; }
.brand__name small { margin-top: 4px; display: block; color: #666f78; font-size: 7px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.nav__links a { color: #b6bac0; font-size: 13px; transition: color .2s ease; }
.nav__links a:hover { color: white; }
.nav__login { justify-self: end; }
.nav__toggle { display: none; }

.button {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button--small { min-height: 40px; padding: 0 20px; font-size: 13px; }
.button--ghost { border-color: var(--line-strong); }
.button--ghost:hover, .button--outline:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.button--primary { color: white; background: var(--blue); box-shadow: 0 22px 55px rgba(67, 111, 255, .22); }
.button--primary:hover { background: #5279ff; }
.button--outline { width: 100%; border-color: var(--line-strong); }
.button--light { color: var(--ink); background: var(--paper); }
.button--light:hover { background: white; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.text-link span { color: var(--blue-bright); font-size: 18px; transition: transform .25s ease; }
.text-link:hover span { transform: translate(3px, 3px); }

.eyebrow {
  margin: 0 0 20px;
  color: var(--blue-bright);
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow > span {
  width: 6px;
  height: 6px;
  margin-right: 7px;
  display: inline-block;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 14px var(--blue);
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  max-height: 980px;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(92px, 13vh, 130px) var(--pad) clamp(52px, 8vh, 78px);
  display: grid;
  grid-template-columns: minmax(360px, 41%) 1fr;
  align-items: center;
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 var(--pad);
  z-index: -1;
  border-left: 1px solid rgba(255,255,255,.035);
  border-right: 1px solid rgba(255,255,255,.035);
}
.hero__copy { position: relative; z-index: 5; padding-bottom: 70px; }
.hero h1 {
  margin: 0 0 28px;
  max-width: 660px;
  font-family: Manrope, sans-serif;
  font-size: clamp(48px, min(6.2vw, 10.5vh), 112px);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: .91;
}
.hero__lead { max-width: 520px; margin: 0 0 clamp(24px,4vh,36px); color: #a9afb5; font-size: clamp(15px, 1.3vw, 21px); line-height: 1.55; }
.hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__proof { margin-top: clamp(30px,6vh,56px); display: flex; gap: clamp(14px,2vw,28px); flex-wrap: wrap; color: #767d84; font-size: 12px; }
.hero__proof span { display: flex; align-items: center; gap: 8px; }
.hero__proof span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #697077; }

.bear-stage {
  position: relative;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  margin-right: calc(var(--pad) * -1);
  perspective: 1300px;
  isolation: isolate;
}
.bear-stage__halo {
  position: absolute;
  inset: 12% -5% 0 8%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(67, 111, 255, .16), transparent 63%);
  filter: blur(35px);
}
.bear-stage__grid {
  position: absolute;
  left: 5%;
  right: -15%;
  bottom: 2%;
  height: 44%;
  opacity: .18;
  transform: perspective(600px) rotateX(68deg);
  transform-origin: bottom;
  background-image: linear-gradient(rgba(126,139,153,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(126,139,153,.3) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to top, black, transparent 78%);
}
.bear-stage__model {
  position: absolute;
  inset: 5% -10% 4% 2%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, -5deg)) translate3d(var(--mx, 0), var(--my, 0), 0) scale(var(--sc, 1));
  transition: transform .18s ease-out;
  filter: drop-shadow(0 32px 48px rgba(0,0,0,.6));
}
.bear-stage__model img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  mask-image: radial-gradient(ellipse 72% 72% at 55% 54%, black 56%, transparent 98%);
  animation: bear-arrive 1.5s cubic-bezier(.18,.85,.22,1) both;
}
.bear-stage__scan {
  position: absolute;
  left: 10%;
  right: 0;
  top: 18%;
  z-index: 2;
  height: 1px;
  opacity: .5;
  background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
  box-shadow: 0 0 15px var(--blue);
  animation: scan 5.5s ease-in-out infinite;
}
.connection { position: absolute; z-index: 5; height: 1px; transform-origin: left; background: linear-gradient(90deg, rgba(107,140,255,.05), rgba(107,140,255,.9), rgba(107,140,255,.05)); }
.connection::after { content: ""; position: absolute; right: 18%; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #b9c7ff; box-shadow: 0 0 10px var(--blue); animation: travel 2.8s ease-in-out infinite; }
.connection--one { top: 26%; left: 52%; width: 37%; transform: rotate(-8deg); }
.connection--two { top: 68%; left: 42%; width: 44%; transform: rotate(7deg); }

.node {
  position: absolute;
  z-index: 8;
  min-width: 158px;
  padding: 11px 14px;
  border: 1px solid rgba(231,234,229,.18);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8f969d;
  background: rgba(9, 11, 14, .76);
  backdrop-filter: blur(13px);
  box-shadow: 0 16px 42px rgba(0,0,0,.3);
  font-size: 11px;
  transform: translate3d(var(--nx,0), var(--ny,0), 0);
  transition: border-color .25s ease, transform .18s ease-out;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.node:hover, .node:focus-visible, .node.is-active { border-color: rgba(107,140,255,.8); background: rgba(18,24,38,.88); outline: none; }
.node.is-active { box-shadow: 0 16px 42px rgba(0,0,0,.3), 0 0 0 1px rgba(67,111,255,.2), 0 0 30px rgba(67,111,255,.11); }
.node b { display: block; color: #e6e8e4; font-weight: 600; line-height: 1.2; }
.node small { margin-top: 3px; display: block; color: #69727a; font-size: 8px; line-height: 1.3; }
.node--camera { right: 8%; top: 11%; animation: float 7s ease-in-out infinite; }
.node--server { right: 2%; top: 33%; animation: float 7.6s ease-in-out -2.4s infinite; }
.node--storage { right: 4%; top: 55%; animation: float 8s ease-in-out -2s infinite; }
.node--office { left: 2%; top: 31%; animation: float 6.4s ease-in-out -1s infinite; }
.node--remote { left: 12%; top: 61%; animation: float 7.2s ease-in-out -3s infinite; }
.bear-stage__hint { position: absolute; left: 4%; top: 5%; z-index: 7; display: flex; align-items: center; gap: 8px; color: #59626b; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.bear-stage__hint i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 10px var(--blue); }
.node__dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 10px var(--blue); }
.node__dot--record { background: var(--red); box-shadow: 0 0 10px rgba(255,79,63,.6); animation: blink 1.6s ease-in-out infinite; }
.hero-console {
  position: absolute;
  left: 10%;
  right: 2%;
  bottom: 2%;
  z-index: 10;
  min-height: 74px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  background: rgba(10, 12, 15, .8);
  backdrop-filter: blur(16px);
}
.hero-console > div { min-width: 0; padding: 3px 18px; border-left: 1px solid var(--line); }
.hero-console > div:first-child { border-left: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
.hero-console small { display: block; color: #687077; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.hero-console strong { color: #d9dcd8; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 600; }
.signal { grid-row: 1/3; display: flex; align-items: end; gap: 2px; width: 15px; height: 14px; }
.signal i { width: 3px; border-radius: 2px; background: var(--blue-bright); }
.signal i:nth-child(1) { height: 5px; }.signal i:nth-child(2) { height: 9px; }.signal i:nth-child(3) { height: 13px; }
.hero__scroll { position: absolute; left: var(--pad); bottom: 28px; padding: 0; border: 0; display: flex; gap: 13px; align-items: center; color: #60676d; background: none; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.hero__scroll i { color: var(--blue-bright); font-style: normal; font-size: 17px; }

.trust-line {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.trust-line p { margin: 0; color: #d2d5d1; font-family: Manrope,sans-serif; font-size: 12px; font-weight: 600; }
.trust-line__items { display: flex; align-items: center; justify-content: flex-end; gap: clamp(20px, 3vw, 48px); color: #666e75; font-size: 11px; }

.section { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 8vw, 116px) var(--pad); }
.section-heading { margin-bottom: clamp(38px, 5vw, 64px); display: grid; grid-template-columns: 1.2fr .55fr; align-items: end; gap: clamp(30px,4vw,62px); }
.section-heading h2, .network h2, .plans h2, .faq h2, .final-cta h2 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: clamp(42px, 5.5vw, 86px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}
.section-heading > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.scenario-list { border-top: 1px solid var(--line); }
.scenario {
  min-height: 134px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 54px 70px minmax(280px, 1fr) minmax(190px, .45fr);
  gap: 24px;
  align-items: center;
  transition: border-color .3s ease, padding .3s ease, background .3s ease;
}
.scenario:hover, .scenario:focus-visible, .scenario.is-active { padding-left: 14px; padding-right: 14px; border-color: rgba(107,140,255,.5); outline: none; background: linear-gradient(90deg,rgba(67,111,255,.06),transparent 64%); }
.scenario.is-active .scenario__icon { background: var(--blue); }
.scenario.is-active .scenario__icon svg { stroke: white; }
.scenario.is-active .scenario__route { color: var(--blue-bright); }
.scenario__number { align-self: start; color: #596168; font-family: Manrope,sans-serif; font-size: 10px; }
.scenario__icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #111419; }
.scenario__icon svg { width: 28px; fill: none; stroke: #8d949b; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.scenario h3 { margin: 0 0 8px; font-family: Manrope,sans-serif; font-size: clamp(20px,2vw,28px); font-weight: 500; letter-spacing: -.025em; }
.scenario p { max-width: 660px; margin: 0; color: #7e858c; font-size: 14px; line-height: 1.65; }
.scenario__route { justify-self: end; color: #767e85; font-family: Manrope,sans-serif; font-size: 11px; }

.network {
  min-height: 830px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  background: #06080a;
}
.world { position: relative; min-height: 830px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 44%,rgba(49,70,108,.14),transparent 42%); }
.world::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,transparent 76%,#06080a),linear-gradient(0deg,#06080a,transparent 18%); pointer-events: none; }
.world__map { position: absolute; inset: 112px 1% 82px; width: 98%; height: calc(100% - 194px); overflow: visible; filter: drop-shadow(0 34px 70px rgba(0,0,0,.55)); transform: perspective(1100px) rotateX(var(--world-rx,0deg)) rotateY(var(--world-ry,0deg)); transform-origin: center; transition: transform .18s ease-out; }
.world__sphere { stroke: rgba(150,165,183,.2); stroke-width: 1.2; }
.world__grid { fill: none; stroke: rgba(136,152,171,.13); stroke-width: 1; }
.world__continents { fill: rgba(113,128,146,.13); stroke: rgba(154,171,193,.18); stroke-width: 1.1; }
.world__routes path { fill: none; stroke: rgba(90,124,255,.78); stroke-width: 1.6; stroke-dasharray: 5 14; stroke-linecap: round; animation: world-route 5s linear infinite; transition: opacity .35s ease, stroke-width .35s ease; }
.world__routes path.is-active { stroke: #89a1ff; stroke-width: 3; stroke-dasharray: 8 18; }
.world__routes path.is-muted { opacity: .08; }
.world__hub circle:first-child { fill: rgba(67,111,255,.04); stroke: rgba(107,140,255,.22); animation: hub-ring 3.2s ease-out infinite; transform-origin: 500px 350px; }
.world__hub circle:nth-child(2) { fill: rgba(8,10,13,.94); stroke: rgba(231,234,229,.2); }
.world__hub image { filter: drop-shadow(0 0 20px rgba(67,111,255,.38)); }
.world__filters { position: absolute; left: clamp(18px,3vw,48px); right: clamp(18px,3vw,48px); top: clamp(22px,3vw,44px); z-index: 10; min-height: 68px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: rgba(7,9,12,.82); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.world__filters button { min-width: 0; min-height: 60px; padding: 9px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 4px; display: grid; grid-template-columns: 14px minmax(0,1fr) auto; align-items: center; gap: 9px; color: #929aa2; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: color .25s ease,background .25s ease; }
.world__filters button:first-child { border-left-color: transparent; }
.world__filters button > span { min-width: 0; font-size: 10px; font-weight: 600; line-height: 1.15; }
.world__filters button small { margin-top: 4px; display: block; overflow: hidden; color: #565f67; font-size: 7px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.world__filters button b { color: #6674a7; font-family: Manrope,sans-serif; font-size: 17px; font-weight: 400; line-height: 1; }
.world__filters button:hover,.world__filters button:focus-visible { color: white; background: rgba(67,111,255,.09); outline: none; }
.world__filters button.is-active { color: #080a0d; background: var(--paper); }
.world__filters button.is-active small { color: #666b6e; }
.world__filters button.is-active b { color: var(--blue); }
.world__filter-icon { position: relative; width: 11px; height: 11px; display: block; color: var(--blue-bright); }
.world__filter-icon--all { border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(107,140,255,.18); }
.world__filter-icon--office { border: 1px solid currentColor; border-radius: 1px; }
.world__filter-icon--office::after { content: ""; position: absolute; inset: 3px 2px; background: linear-gradient(90deg,currentColor 1px,transparent 1px) 0 0/3px 100%; opacity: .7; }
.world__filter-icon--camera { border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(107,140,255,.16); }
.world__filter-icon--server { border: 1px solid currentColor; border-radius: 1px; transform: rotate(45deg) scale(.82); }
.world__filters button.is-active .world__filter-icon { color: var(--blue); }
.world-node { position: absolute; z-index: 7; padding: 0; border: 0; display: flex; align-items: center; gap: 9px; color: #aeb4ba; background: transparent; text-align: left; font-size: 10px; cursor: pointer; transition: opacity .3s ease, transform .3s ease; }
.world-node > i { position: relative; width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid #b9c6ff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(67,111,255,.1),0 0 18px rgba(67,111,255,.8); }
.world-node > i::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(107,140,255,.4); border-radius: 50%; opacity: 0; }
.world-node > span { padding: 7px 9px; border: 1px solid transparent; border-radius: 5px; background: rgba(8,10,13,.54); backdrop-filter: blur(8px); transition: border-color .25s ease,background .25s ease; }
.world-node small { margin-top: 2px; display: block; color: #626a72; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.world-node:hover > span,.world-node:focus-visible > span,.world-node.is-active > span { border-color: rgba(107,140,255,.5); background: rgba(12,16,23,.92); }
.world-node:hover,.world-node:focus-visible,.world-node.is-active { color: white; outline: none; transform: translateY(-2px); }
.world-node.is-active > i::after { opacity: 1; animation: node-ping 1.8s ease-out infinite; }
.world-node.is-muted { opacity: .08; transform: scale(.88); pointer-events: none; }
.world-node--arctic { left: 50%; top: 18%; }
.world-node--america { left: 20%; top: 34%; }
.world-node--europe { left: 45%; top: 33%; }
.world-node--asia { left: 71%; top: 37%; }
.world-node--africa { left: 49%; top: 61%; }
.world-node--south { left: 27%; top: 68%; }
.world__fleet { position: absolute; inset: 112px 1% 82px; z-index: 6; pointer-events: none; }
.world-fleet-node { position: absolute; left: var(--fx); top: var(--fy); width: 9px; height: 9px; padding: 0; border: 1px solid rgba(158,175,255,.7); border-radius: 2px; background: rgba(67,111,255,.58); box-shadow: 0 0 0 5px rgba(67,111,255,.05),0 0 12px rgba(67,111,255,.5); opacity: .52; pointer-events: auto; cursor: pointer; transition: opacity .3s ease,transform .3s ease,box-shadow .3s ease; animation: fleet-pulse 3.2s ease-in-out var(--fd,0s) infinite; }
.world-fleet-node[data-world-fleet="camera"] { border-color: rgba(255,131,119,.85); border-radius: 50%; background: rgba(255,79,63,.72); box-shadow: 0 0 0 5px rgba(255,79,63,.05),0 0 12px rgba(255,79,63,.46); }
.world-fleet-node[data-world-fleet="server"] { border-color: rgba(151,161,173,.85); border-radius: 1px; background: rgba(125,137,152,.72); transform: rotate(45deg); box-shadow: 0 0 0 5px rgba(147,159,173,.04),0 0 12px rgba(147,159,173,.35); }
.world-fleet-node::after { content: attr(data-label); position: absolute; left: 15px; top: 50%; width: max-content; max-width: 170px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; color: #c9ceca; background: rgba(7,9,12,.94); font: 8px/1.2 Golos Text,sans-serif; letter-spacing: .02em; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px); transition: opacity .2s ease,transform .2s ease; }
.world-fleet-node[data-world-fleet="server"]::after { transform: rotate(-45deg) translate(2px,-70%); transform-origin: left center; }
.world-fleet-node:hover,.world-fleet-node:focus-visible,.world-fleet-node.is-active { z-index: 3; opacity: 1; outline: none; transform: scale(1.35); }
.world-fleet-node[data-world-fleet="server"]:hover,.world-fleet-node[data-world-fleet="server"]:focus-visible,.world-fleet-node[data-world-fleet="server"].is-active { transform: rotate(45deg) scale(1.35); }
.world-fleet-node:hover::after,.world-fleet-node:focus-visible::after,.world-fleet-node.is-active::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.world-fleet-node[data-world-fleet="server"]:hover::after,.world-fleet-node[data-world-fleet="server"]:focus-visible::after,.world-fleet-node[data-world-fleet="server"].is-active::after { transform: rotate(-45deg) translate(5px,-70%); }
.world-fleet-node.is-highlighted { opacity: .95; box-shadow: 0 0 0 7px rgba(67,111,255,.1),0 0 20px rgba(67,111,255,.8); animation: none; }
.world-fleet-node[data-world-fleet="camera"].is-highlighted { box-shadow: 0 0 0 7px rgba(255,79,63,.1),0 0 20px rgba(255,79,63,.72); }
.world-fleet-node[data-world-fleet="server"].is-highlighted { box-shadow: 0 0 0 7px rgba(147,159,173,.08),0 0 20px rgba(147,159,173,.6); }
.world-fleet-node.is-muted { opacity: .035; pointer-events: none; transform: scale(.65); animation: none; }
.world-fleet-node[data-world-fleet="server"].is-muted { transform: rotate(45deg) scale(.65); }
.world__scope { position: absolute; left: clamp(18px,3vw,48px); bottom: 24px; z-index: 8; max-width: 330px; padding-left: 17px; display: grid; gap: 3px; }
.world__scope > span { color: #646d75; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.world__scope > span i { position: absolute; left: 0; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #45d38a; box-shadow: 0 0 10px rgba(69,211,138,.55); }
.world__scope strong { color: #d5d9d5; font-family: Manrope,sans-serif; font-size: 13px; font-weight: 500; }
.world__scope small { color: #5c656d; font-size: 8px; line-height: 1.4; }
.world__tour { position: absolute; right: clamp(18px,3vw,48px); bottom: 25px; z-index: 8; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 5px; display: inline-flex; align-items: center; gap: 9px; color: #a6adb4; background: rgba(8,10,13,.8); backdrop-filter: blur(12px); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.world__tour i { color: var(--blue-bright); font-size: 9px; font-style: normal; }
.world__tour:hover,.world__tour.is-playing { border-color: rgba(107,140,255,.6); color: white; }
.world__tour.is-playing i { animation: blink 1s ease-in-out infinite; }
.network__copy { align-self: center; padding: clamp(52px,5vw,72px) var(--pad) clamp(52px,5vw,72px) clamp(36px,4vw,68px); }
.network__copy h2 { font-size: clamp(40px,4.2vw,64px); hyphens: none; }
.network__copy > p:not(.eyebrow) { max-width: 560px; margin: 18px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.network-inspector { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 8px; background: #0b0e12; }
.network-inspector header { min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #727b83; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.network-inspector header span { display: flex; align-items: center; gap: 8px; }
.network-inspector header i { width: 5px; height: 5px; border-radius: 50%; background: #45d38a; box-shadow: 0 0 10px rgba(69,211,138,.5); }
.network-inspector header b { color: var(--blue-bright); font-weight: 500; }
.network-inspector h3 { margin: 0; padding: 14px 16px; font-family: Manrope,sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }
.network-inspector dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.network-inspector dl > div { min-height: 56px; padding: 10px 12px; border-left: 1px solid var(--line); }
.network-inspector dl > div:first-child { border-left: 0; }
.network-inspector dt { margin-bottom: 5px; color: #5f6870; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.network-inspector dd { margin: 0; color: #c5c9c6; font-size: 10px; line-height: 1.35; }
.network-inspector__resources { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.network-inspector__resources span { padding: 5px 8px; border-radius: 4px; color: #9facdf; background: rgba(67,111,255,.1); font-size: 9px; }
.network__facts { margin: 0 0 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.network__facts span { color: #707980; font-size: 9px; }
.network__facts span::before { content: "·"; margin-right: 7px; color: var(--blue-bright); }

.security { padding-top: clamp(68px,6vw,92px); padding-bottom: clamp(68px,6vw,92px); background: linear-gradient(180deg, #0a0c0f, #080a0d); }
.security .section-heading { margin-bottom: clamp(34px,4vw,50px); }
.security-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); grid-template-rows: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.security-main { grid-column: 1; grid-row: 1/4; min-height: 420px; padding: clamp(30px,4vw,54px); display: grid; grid-template-columns: minmax(170px,.55fr) 1fr; align-items: center; gap: clamp(28px,4vw,56px); background: #0c0f13; overflow: hidden; }
.security-main h3 { max-width: 700px; margin: 0 0 22px; font-family: Manrope,sans-serif; font-size: clamp(28px,3.4vw,52px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.security-main p:not(.eyebrow) { max-width: 570px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.security-main__orb { position: relative; aspect-ratio: 1; width: min(100%,230px); margin: auto; display: grid; place-items: center; }
.security-main__orb div { position: absolute; inset: 6%; border: 1px solid rgba(107,140,255,.32); border-radius: 46% 54% 51% 49%; animation: orbit 12s linear infinite; }
.security-main__orb div:nth-child(2) { inset: 15%; border-color: rgba(231,234,229,.16); animation-duration: 16s; animation-direction: reverse; }
.security-main__orb div:nth-child(3) { inset: 24%; border-color: rgba(107,140,255,.23); animation-duration: 8s; }
.security-main__orb span { color: #dfe4ef; font-family: Manrope,sans-serif; font-size: clamp(52px,6vw,90px); font-weight: 400; letter-spacing: -.07em; }
.security-card { min-height: 0; padding: 20px 24px; display: grid; grid-template-columns: 32px 1fr; align-content: center; column-gap: 12px; background: #0b0e12; }
.security-card > span { grid-row: 1/3; display: block; margin: 2px 0 0; color: var(--blue-bright); font-family: Manrope,sans-serif; font-size: 9px; }
.security-card h3 { margin: 0 0 6px; font-family: Manrope,sans-serif; font-size: 16px; font-weight: 500; }
.security-card p { grid-column: 2; margin: 0; color: #747c83; font-size: 11px; line-height: 1.55; }

.plans__heading { margin-bottom: 68px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.plans { padding-top: clamp(72px,6vw,96px); }
.plans__heading { margin-bottom: clamp(42px,4vw,56px); }
.plans__heading h2 { max-width: 990px; font-size: clamp(40px,4.5vw,68px); }
.billing { flex: 0 0 auto; padding: 4px; border: 1px solid var(--line); border-radius: 7px; display: flex; background: #0c0f13; }
.billing button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 4px; color: #777f86; background: transparent; font-size: 11px; cursor: pointer; }
.billing button span { margin-left: 5px; color: var(--blue-bright); }
.billing button.is-active { color: var(--ink); background: var(--paper); }
.plan-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,1.5vw,20px); }
.plan { position: relative; min-height: 460px; padding: clamp(28px,3vw,38px); border: 1px solid var(--line); display: flex; flex-direction: column; background: #0c0f13; }
.plan--featured { border-color: #d7d8d2; color: var(--ink); background: var(--paper); }
.plan__badge { position: absolute; top: 18px; right: 18px; padding: 6px 9px; border-radius: 4px; color: white; background: var(--blue); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.plan__top p { margin: 0 0 6px; font-family: Manrope,sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.plan__top span { color: #777f86; font-size: 12px; }
.plan--featured .plan__top span { color: #5d6265; }
.plan__price { margin: 42px 0 30px; }
.plan__price strong { display: block; font-family: Manrope,sans-serif; font-size: clamp(48px,5vw,70px); font-weight: 500; letter-spacing: -.07em; line-height: 1; }
.plan__price span { display: block; margin-top: 10px; color: #6f777e; font-size: 11px; }
.plan ul { margin: 0 0 30px; padding: 0; display: grid; gap: 11px; list-style: none; color: #9aa0a6; font-size: 13px; }
.plan--featured ul { color: #4e5357; }
.plan li::before { content: "↗"; margin-right: 10px; color: var(--blue-bright); }
.plan .button { margin-top: auto; }

.faq { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(60px,10vw,180px); }
.faq__intro > p:not(.eyebrow) { max-width: 420px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: Manrope,sans-serif; font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--blue-bright); font-size: 22px; transition: transform .3s ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 680px; margin: -2px 48px 25px 0; color: #7e868d; font-size: 13px; line-height: 1.7; }

.final-cta { position: relative; min-height: 0; padding: clamp(72px,8vw,110px) var(--pad); border-top: 1px solid var(--line); overflow: hidden; background: #06080a; }
.final-cta__inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.42fr); align-items: end; gap: clamp(48px,8vw,130px); }
.final-cta__bear { display: block; width: min(100%, 440px); height: auto; margin: 0 0 26px; filter: drop-shadow(0 18px 40px rgba(67,111,255,.2)); }
.final-cta h2 { max-width: 900px; margin: 0; font-size: clamp(44px,5.5vw,80px); }
.final-cta__action { max-width: 420px; justify-self: end; }
.final-cta__action p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.final-cta__action small { margin-top: 14px; display: block; color: #596169; font-size: 9px; }
.final-cta__line { position: absolute; left: 4%; top: 15%; width: 440px; height: 260px; border: 1px solid rgba(107,140,255,.24); border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 0 70px rgba(67,111,255,.06), inset 0 0 70px rgba(67,111,255,.03); animation: orbit 18s linear infinite; }
.final-cta__line::after { content: ""; position: absolute; left: 11%; top: 8%; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 16px var(--blue); }
.footer { min-height: 90px; max-width: var(--max); margin: 0 auto; padding: 24px var(--pad); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #616970; font-size: 10px; }
.footer__links { display: flex; gap: 26px; }
.footer__links a:hover { color: var(--paper); }
.footer > span { justify-self: end; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes bear-arrive { from { opacity: 0; transform: translate3d(9%,3%,80px) scale(.96); filter: blur(8px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; filter: none; clip-path: inset(0); } }
@keyframes scan { 0%,100% { top: 17%; opacity: 0; } 15% { opacity: .5; } 65% { opacity: .35; } 80% { top: 83%; opacity: 0; } }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes travel { 0% { left: 0; opacity: 0; } 20%,80% { opacity: 1; } 100% { left: 96%; opacity: 0; } }
@keyframes route { to { stroke-dashoffset: -172; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes world-route { to { stroke-dashoffset: -76; } }
@keyframes hub-ring { 0% { opacity: .55; transform: scale(.72); } 75%,100% { opacity: 0; transform: scale(1.45); } }
@keyframes node-ping { 0% { opacity: .8; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes fleet-pulse { 0%,100% { opacity: .46; } 50% { opacity: .82; } }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 44% 56%; }
  .node--office { left: 0; }
  .scenario { grid-template-columns: 42px 60px 1fr; }
  .scenario__route { display: none; }
  .network { grid-template-columns: 1fr; }
  .world { min-height: 700px; }
  .world::after { background: linear-gradient(0deg,#06080a,transparent 18%); }
  .network__copy { padding: 50px var(--pad) 76px; }
  .plans__heading { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .nav { min-height: 64px; }
  .hero { min-height: 620px; padding-top: 82px; padding-bottom: 46px; }
  .hero__copy { padding-bottom: 36px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { margin-bottom: 18px; font-size: clamp(48px, min(5.8vw, 9vh), 78px); }
  .hero__lead { margin-bottom: 22px; font-size: 15px; }
  .button { min-height: 48px; }
  .hero__proof { margin-top: 26px; }
  .hero-console { min-height: 64px; }
}

@media (max-width: 900px) {
  .nav { min-height: 68px; grid-template-columns: 1fr auto; }
  .nav__login { display: none; }
  .nav__toggle { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 5px; display: grid; place-content: center; gap: 5px; background: #0b0d10; cursor: pointer; }
  .nav__toggle span { width: 17px; height: 1px; background: var(--paper); transition: transform .3s ease; }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav__links { position: fixed; inset: 67px 0 auto; padding: 28px var(--pad) 42px; border-bottom: 1px solid var(--line); display: none; align-items: stretch; flex-direction: column; gap: 0; background: rgba(8,10,13,.97); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .hero { height: auto; min-height: 0; max-height: none; padding-top: 112px; grid-template-columns: 1fr; }
  .hero__copy { padding-bottom: 15px; }
  .hero h1 { font-size: clamp(54px,14vw,90px); }
  .hero__lead { max-width: 600px; }
  .bear-stage { min-height: clamp(500px,76vw,650px); margin: 0 calc(var(--pad) * -.7); }
  .bear-stage__model { inset: 4% -16% 7% 2%; }
  .node { min-width: 150px; }
  .node--camera { right: 3%; top: 9%; }
  .node--server { right: 0; top: 30%; }
  .node--storage { right: 2%; top: 53%; }
  .node--office { left: 2%; top: 28%; }
  .node--remote { left: 8%; top: 56%; }
  .hero__scroll { display: none; }
  .trust-line { align-items: flex-start; flex-direction: column; }
  .trust-line__items { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .scenario { grid-template-columns: 38px 1fr; gap: 16px; }
  .scenario__icon { display: none; }
  .security-main { grid-column: auto; grid-row: auto; min-height: 0; grid-template-columns: minmax(160px,.45fr) 1fr; }
  .security-main__orb { width: min(70vw,280px); }
  .security-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .security-card { min-height: 120px; }
  .plan-grid { grid-template-columns: 1fr; max-width: none; }
  .faq { grid-template-columns: 1fr; gap: 50px; }
  .final-cta__inner { grid-template-columns: 1fr; align-items: start; gap: 36px; }
  .final-cta__action { max-width: 520px; justify-self: start; }
  .footer { grid-template-columns: 1fr; gap: 22px; justify-items: start; }
  .footer > span { justify-self: start; }
}

@media (max-width: 520px) {
  .hero { padding-bottom: 44px; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__proof { margin-top: 38px; gap: 15px; }
  .bear-stage { min-height: clamp(390px,118vw,500px); }
  .bear-stage__model { inset: 5% -21% 9% 1%; }
  .bear-stage__hint { left: 4%; top: 3%; max-width: 120px; line-height: 1.45; }
  .node { min-width: 0; max-width: 142px; padding: 8px 9px; gap: 7px; font-size: 9px; }
  .node small { font-size: 7px; }
  .node--camera { right: 1%; top: 10%; }
  .node--server { right: 0; top: 28%; }
  .node--storage { right: 1%; top: 49%; }
  .node--office { left: 1%; top: 30%; }
  .node--remote { left: 5%; top: 56%; }
  .hero-console { left: 4%; right: 4%; padding: 0 6px; }
  .hero-console > div { padding: 3px 7px; }
  .hero-console small { font-size: 7px; }
  .hero-console strong { font-size: 9px; }
  .trust-line__items { gap: 17px; }
  .scenario { padding: 24px 0; }
  .scenario p { font-size: 13px; }
  .world { min-height: clamp(580px,165vw,650px); }
  .world__map { inset: 145px -18% 88px; width: 136%; height: calc(100% - 233px); }
  .world__filters { right: 14px; left: 14px; top: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .world__filters button { min-height: 52px; padding: 7px 8px; }
  .world__filters button:nth-child(odd) { border-left-color: transparent; }
  .world__filters button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .world__filters button > span { font-size: 9px; }
  .world__filters button small { font-size: 6px; }
  .world-node > span { display: none; }
  .world-node.is-active > span { position: absolute; left: 16px; display: block; width: max-content; }
  .world-node--arctic { top: 27%; }
  .world-node--south { top: 71%; }
  .world-fleet-node { width: 8px; height: 8px; }
  .world__fleet { inset: 145px -18% 88px; }
  .world-fleet-node::after { display: none; }
  .world__scope { left: 14px; right: 14px; bottom: 67px; max-width: none; }
  .world__scope small { max-width: 240px; }
  .world__tour { right: 14px; bottom: 15px; }
  .network-inspector dl { grid-template-columns: 1fr; }
  .network-inspector dl > div { min-height: 52px; border-top: 1px solid var(--line); border-left: 0; }
  .network-inspector dl > div:first-child { border-top: 0; }
  .network__copy { padding-top: 15px; }
  .security { padding-top: 52px; padding-bottom: 52px; }
  .security .section-heading { gap: 18px; margin-bottom: 26px; }
  .security-main { padding: 22px; grid-template-columns: 1fr; gap: 20px; }
  .security-main__orb { width: min(46vw,150px); }
  .security-main h3 { margin-bottom: 14px; font-size: clamp(25px,9vw,34px); }
  .security-main p:not(.eyebrow) { font-size: 12px; line-height: 1.6; }
  .security-card { min-height: 100px; padding: 18px; }
  .plan { padding: 28px; }
  .billing { width: 100%; }
  .billing button { flex: 1; }
  .final-cta { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .final-cta__bear { width: min(100%, 300px); margin-bottom: 18px; }
  .final-cta__line { left: -18%; top: 18%; width: 340px; height: 200px; }
  .footer__links { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== How it works — Higgsfield scenes + live overlays ===== */
.how-flow { display: grid; gap: clamp(30px, 4.2vw, 64px); }
.how-row { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(26px, 3.4vw, 62px); }
.how-row--rev .how-stage { order: 2; }
.how-row--rev .how-copy { order: 1; }

.how-stage {
  margin: 0; position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) + 5px);
  overflow: hidden; border: 1px solid var(--line-strong); background: var(--panel);
  box-shadow: 0 34px 90px -46px rgba(67,111,255,.55), inset 0 0 0 1px rgba(255,255,255,.02);
}
.how-stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.how-stage:hover .how-stage__img { transform: scale(1.035); }
.how-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.how-stage__video.is-playing { opacity: 1; }
.how-stage__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 12%, transparent 42%, rgba(8,10,13,.42) 100%),
              linear-gradient(180deg, rgba(8,10,13,.28), rgba(8,10,13,.04) 34%, rgba(8,10,13,.52)); }
.how-stage__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* nodes + packets */
.fx-node { fill: none; stroke: var(--blue-bright); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: fx-ping 2.8s ease-out infinite; }
.fx-node--d { animation-delay: 1.4s; }
@keyframes fx-ping { 0% { transform: scale(.45); opacity: .9; } 70%, 100% { transform: scale(1.85); opacity: 0; } }
.fx-dot { fill: var(--blue-bright); }
.fx-halo { fill: var(--blue); opacity: .3; }
.fx-pkt, .fx-flow { filter: drop-shadow(0 0 6px rgba(107,140,255,.9)); }
.fx-pkt { offset-path: path('M430,360 Q800,300 1330,360'); animation: fx-run 3.4s linear infinite; }
.fx-pkt--a { animation-delay: 0s; } .fx-pkt--b { animation-delay: 1.1s; } .fx-pkt--c { animation-delay: 2.2s; }
.fx-pkt--r1, .fx-pkt--r2 { offset-path: path('M1330,360 Q800,424 430,360'); }
.fx-pkt--r1 { animation-delay: .6s; } .fx-pkt--r2 { animation-delay: 2s; }
@keyframes fx-run { 0% { offset-distance: 0%; opacity: 0; } 12%, 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* cameras: sweep + roaming target */
.fx-sweep { fill: var(--blue-bright); opacity: 0; animation: fx-sweep 4.6s ease-in-out infinite; }
@keyframes fx-sweep { 0% { transform: translateY(-160px); opacity: 0; } 12% { opacity: .15; } 55% { opacity: .1; } 85% { transform: translateY(900px); opacity: 0; } 100% { transform: translateY(900px); opacity: 0; } }
.fx-target path { fill: none; stroke: var(--blue-bright); stroke-width: 4; stroke-linecap: round; }
.fx-target { filter: drop-shadow(0 0 6px rgba(107,140,255,.7)); animation: fx-target 6.6s steps(1, end) infinite; }
@keyframes fx-target { 0%, 24% { transform: translate(226px, 150px); } 33%, 57% { transform: translate(760px, 470px); } 66%, 90% { transform: translate(1180px, 250px); } 100% { transform: translate(226px, 150px); } }

/* remote: wire + flow + print */
.fx-wire { fill: none; stroke: var(--blue); stroke-width: 2.5; opacity: .4; stroke-dasharray: 2 11; stroke-linecap: round; animation: fx-dash 1.1s linear infinite; }
@keyframes fx-dash { to { stroke-dashoffset: -13; } }
.fx-flow { offset-path: path('M540,560 C720,720 980,560 1150,470'); animation: fx-run 3s linear infinite; }
.fx-flow--a { animation-delay: 0s; } .fx-flow--b { animation-delay: 1s; } .fx-flow--c { animation-delay: 2s; }
.fx-sheet rect { fill: rgba(233,233,226,.94); }
.fx-sheet line { stroke: #0d1014; stroke-width: 3; opacity: .5; stroke-linecap: round; }
.fx-sheet { transform-box: fill-box; transform-origin: center bottom; opacity: 0; animation: fx-print 4.2s ease-in-out infinite; }
@keyframes fx-print { 0%, 8% { opacity: 0; transform: translateY(28px) scale(.9); } 26% { opacity: 1; transform: translateY(0) scale(1); } 68% { opacity: 1; } 86%, 100% { opacity: 0; transform: translateY(-20px) scale(.96); } }

/* floating tags + chips */
.how-tag, .how-chip { position: absolute; z-index: 2; font-family: Manrope, sans-serif; white-space: nowrap; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.how-tag { top: 7%; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--paper);
  background: rgba(8,10,13,.5); border: 1px solid var(--line-strong); border-radius: 100px; padding: 6px 13px; display: inline-flex; align-items: center; gap: 7px; }
.how-tag--tl { left: 5%; } .how-tag--tr { right: 5%; }
.how-chip { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--paper);
  background: rgba(13,16,20,.64); border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 13px;
  display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 12px 34px -18px rgba(0,0,0,.9); }
.how-chip--tl { top: 7%; left: 5%; }
.how-chip--count, .how-chip--print { right: 5%; bottom: 8%; }
.how-chip--count b { color: var(--blue-bright); font-weight: 700; }
.how-chip--mid { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: fx-hover 4.2s ease-in-out infinite; }
@keyframes fx-hover { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }

.how-chip__lock { flex: none; width: 11px; height: 9px; position: relative; border: 2px solid var(--blue-bright); border-radius: 2px; margin-top: 4px; }
.how-chip__lock::before { content: ""; position: absolute; left: 1.5px; top: -6px; width: 6px; height: 6px; border: 2px solid var(--blue-bright); border-bottom: none; border-radius: 4px 4px 0 0; }
.how-chip--rec { color: #fff; background: rgba(255,79,63,.16); border-color: rgba(255,79,63,.5); font-weight: 700; letter-spacing: .14em; font-size: 11px; }
.how-chip__rec { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.4s ease-in-out infinite; }
.how-tag--live { color: var(--paper); }
.how-tag__pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #39d98a; animation: fx-livedot 1.9s ease-out infinite; }
@keyframes fx-livedot { 0% { box-shadow: 0 0 0 0 rgba(57,217,138,.55); } 100% { box-shadow: 0 0 0 9px rgba(57,217,138,0); } }

/* copy side */
.how-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.how-step { font-family: Manrope, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--blue-bright); }
.how-copy h3 { margin: 0; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.12; letter-spacing: -.012em; color: var(--paper); font-weight: 600; text-wrap: balance; }
.how-copy > p { margin: 0; max-width: 47ch; color: var(--muted); font-size: 15px; line-height: 1.7; }
.how-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.how-points li { position: relative; padding-left: 25px; color: var(--paper); font-size: 14px; line-height: 1.5; }
.how-points li::before { content: ""; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--blue); background: radial-gradient(circle at 50% 50%, var(--blue-bright) 0 3px, transparent 3.5px); }
.how-metric { margin-top: 4px; font-size: 13px; color: var(--muted); }
.how-metric b { color: var(--paper); font-weight: 600; }

@media (max-width: 860px) {
  .how-row, .how-row--rev { grid-template-columns: 1fr; gap: 22px; }
  .how-row--rev .how-stage, .how-row--rev .how-copy { order: 0; }
  .how-copy { gap: 12px; }
  .how-copy > p { font-size: 14px; }
  .how-tag { font-size: 9px; padding: 4px 9px; letter-spacing: .1em; }
  .how-chip { font-size: 10.5px; padding: 6px 10px; gap: 7px; }
  .how-chip--mid { font-size: 10px; }
}

/* map node positions (moved from inline styles for strict CSP) */
.world-fleet-node[data-label="Офис · Канада"] { --fx:16%; --fy:29%; --fd:.1s }
.world-fleet-node[data-label="Филиал · США"] { --fx:23%; --fy:45%; --fd:.7s }
.world-fleet-node[data-label="Офис · Бразилия"] { --fx:31%; --fy:62%; --fd:1.2s }
.world-fleet-node[data-label="Офис · Великобритания"] { --fx:43%; --fy:27%; --fd:.4s }
.world-fleet-node[data-label="Филиал · ОАЭ"] { --fx:57%; --fy:44%; --fd:1.5s }
.world-fleet-node[data-label="Офис · Индия"] { --fx:65%; --fy:52%; --fd:.9s }
.world-fleet-node[data-label="Филиал · Япония"] { --fx:79%; --fy:35%; --fd:1.8s }
.world-fleet-node[data-label="Офис · Австралия"] { --fx:83%; --fy:63%; --fd:.3s }
.world-fleet-node[data-label="Камеры · Аляска"] { --fx:12%; --fy:39%; --fd:.2s }
.world-fleet-node[data-label="Камеры · Канада"] { --fx:21%; --fy:24%; --fd:1.4s }
.world-fleet-node[data-label="Камеры · Португалия"] { --fx:36%; --fy:37%; --fd:.8s }
.world-fleet-node[data-label="Камеры · Марокко"] { --fx:47%; --fy:54%; --fd:1.9s }
.world-fleet-node[data-label="Камеры · Казахстан"] { --fx:60%; --fy:28%; --fd:.5s }
.world-fleet-node[data-label="Камеры · Индонезия"] { --fx:69%; --fy:62%; --fd:1.1s }
.world-fleet-node[data-label="Камеры · Корея"] { --fx:76%; --fy:47%; --fd:1.6s }
.world-fleet-node[data-label="Камеры · Новая Зеландия"] { --fx:88%; --fy:56%; --fd:.6s }
.world-fleet-node[data-label="Сервер · США"] { --fx:15%; --fy:51%; --fd:1s }
.world-fleet-node[data-label="NAS · Мексика"] { --fx:28%; --fy:31%; --fd:.3s }
.world-fleet-node[data-label="Сервер · Аргентина"] { --fx:37%; --fy:64%; --fd:1.7s }
.world-fleet-node[data-label="Сервер · Северная Европа"] { --fx:47%; --fy:22%; --fd:.7s }
.world-fleet-node[data-label="NAS · Центральная Европа"] { --fx:55%; --fy:37%; --fd:1.3s }
.world-fleet-node[data-label="Сервер · Сибирь"] { --fx:65%; --fy:23%; --fd:.1s }
.world-fleet-node[data-label="Сервер · Сингапур"] { --fx:72%; --fy:55%; --fd:1.5s }
.world-fleet-node[data-label="NAS · Япония"] { --fx:85%; --fy:43%; --fd:.9s }
.footer__hash { flex-basis: 100%; text-align: center; color: #33332d; font-size: 11px; padding-top: 10px; word-break: break-all; }

/* ===== legal pages ===== */
.legal-body { background: var(--ink); }
.legal-head { max-width: var(--max); margin: 0 auto; padding: 18px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.legal { max-width: 820px; margin: 0 auto; padding: clamp(40px,6vw,72px) var(--pad) clamp(64px,8vw,110px); color: var(--paper); }
.legal h1 { margin: 0 0 14px; font-size: clamp(28px,4vw,44px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.legal h2 { margin: 40px 0 12px; font-size: clamp(18px,2vw,22px); line-height: 1.25; letter-spacing: -.01em; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: #c9cdc9; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--paper); background: var(--panel-2); padding: 1px 6px; border-radius: 4px; }
.legal__meta { color: var(--muted) !important; font-size: 13px !important; margin-bottom: 28px !important; }

/* ===== footer legal block ===== */
.footer__legal { grid-column: 1 / -1; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 40px; align-items: start; }
.footer__note { margin: 0; color: #6e767d; font-size: 11px; line-height: 1.6; max-width: 70ch; }
.requisites { font-style: normal; color: #7b838a; font-size: 11px; line-height: 1.7; }
.requisites b { color: var(--paper); font-weight: 600; }
.requisites a { color: var(--blue-bright); }
.footer__hash { grid-column: 1 / -1; }
.plans__note { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 72ch; }

/* ===== cookie consent ===== */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(calc(100% - 40px), 480px); padding: 18px 20px 16px; border-radius: 12px;
  background: #0f1216; border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(67,111,255,.08);
  opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.cookie.is-open { opacity: 1; transform: none; }
.cookie p { margin: 0 0 14px; color: #c9cdc9; font-size: 13px; line-height: 1.6; }
.cookie p b { color: var(--paper); }
.cookie a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie .button { transform: none; }
.cookie .button--ghost { color: var(--paper); background: transparent; border-color: var(--line-strong); }
.cookie .button--ghost:hover, .cookie .button--ghost:focus-visible { color: #080a0d; background: #e9e9e2; border-color: #e9e9e2; }
.cookie .button--primary { color: #fff; box-shadow: none; }
.cookie .button--primary:hover { background: #5279ff; color: #fff; }
.cookie .button:hover { transform: none; }
@media (max-width: 860px) {
  .footer__legal { grid-template-columns: 1fr; gap: 12px; }
  .cookie { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 16px; }
  .cookie .button { flex: 1 1 auto; }
}