:root{
  --bg:#0b111d;
  --surface:#111a2a;
  --lavender:#b9caff;
  --mint:#b9ddc4;
  --mint-bright:#bcedbd;
  --white:#eef2fa;
  --muted:#919eb3;
  --border:#253147;
  --ease:cubic-bezier(.22,.8,.25,1)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  background:var(--bg);
  color-scheme:dark
}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font:14px/1.65 Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
body:has(dialog[open]){
  overflow:hidden
}
button,a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
a{
  color:inherit;
  text-decoration:none
}
button,input{
  font-family:inherit
}
button{
  border:0;
  background:none
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  font-family:Manrope,Inter,sans-serif;
  letter-spacing:-.055em;
  line-height:1.1
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:6px
}
button:disabled{
  cursor:default
}
img{
  display:block;
  max-width:100%;
  object-fit:contain
}
::selection{
  background:var(--mint);
  color:#10241c
}
[hidden]{
  display:none!important
}
.icon{
  width:20px;
  height:20px;
  stroke:currentColor;
  stroke-width:1.8;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:inline-block;
  vertical-align:middle;
  flex:none
}
.container{
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}
.skip-link{
  position:fixed;
  z-index:80;
  left:20px;
  top:-100px;
  padding:12px 20px;
  background:var(--mint);
  color:#10241c;
  border-radius:12px
}
.skip-link:focus{
  top:14px
}
.header{
  height:88px;
  position:sticky;
  top:0;
  z-index:30;
  background:#0b111ddd;
  backdrop-filter:blur(22px);
  border-bottom:1px solid #222d3d99
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand{
  display:inline-flex;
  align-items:center;
  font:800 29px/1 Manrope,Inter,sans-serif;
  letter-spacing:-1.4px;
  flex:none
}
.brand-light{
  font-weight:700
}
.brand-dot{
  color:var(--mint)
}
.brand-mark{
  display:grid;
  place-items:center;
  width:35px;
  height:37px;
  border-radius:11px;
  background:var(--mint);
  color:#162b22;
  transform:rotate(-8deg);
  margin-right:11px;
  box-shadow:inset 0 1px 1px #fff5
}
.brand-mark .icon{
  width:23px;
  height:23px
}
.desktop-nav{
  display:flex;
  gap:30px;
  font-size:12px;
  color:#a6b1c3
}
.desktop-nav a{
  position:relative;
  transition:color .2s
}
.desktop-nav a:after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:0;
  right:0;
  height:1px;
  background:var(--mint);
  transform:scaleX(0);
  transition:transform .3s var(--ease)
}
.desktop-nav a:hover{
  color:var(--white)
}
.desktop-nav a:hover:after{
  transform:scaleX(1)
}
.header-actions{
  display:flex;
  align-items:center;
  gap:15px
}
.header-start{
  display:flex;
  align-items:center;
  gap:16px;
  background:#141e2c;
  border:1px solid #303d4c;
  border-radius:10px;
  padding:11px 17px;
  font-size:12px
}
.header-start .icon{
  color:var(--mint);
  width:16px
}
.header-start:hover{
  border-color:#839e8e;
  background:#1c2933
}
.menu-button{
  display:none
}
.scroll-progress{
  position:absolute;
  height:1px;
  background:var(--mint);
  box-shadow:0 0 9px #b9ddc488;
  bottom:-1px;
  left:0;
  width:0;
  transition:width .1s linear
}
.hero{
  position:relative;
  min-height:716px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  padding-top:24px;
  padding-bottom:72px;
  isolation:isolate
}
.hero:before{
  content:"";
  position:absolute;
  width:850px;
  height:720px;
  right:-100px;
  top:-60px;
  background:radial-gradient(ellipse,#1f31514d,transparent 65%);
  z-index:-1;
  pointer-events:none
}
.hero-copy{
  position:relative;
  z-index:3;
  margin-top:-22px
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--mint);
  line-height:1.5
}
.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mint-bright);
  box-shadow:0 0 12px #bcedbd88;
  flex:none
}
.hero h1{
  font-size:clamp(53px,5.2vw,77px);
  font-weight:800;
  letter-spacing:-.065em;
  line-height:1.05;
  margin-top:29px;
  white-space:nowrap
}
.hero h1>span{
  color:var(--lavender)
}
.hero-description{
  font-size:16px;
  line-height:1.85;
  color:#a0acc0;
  margin-top:30px
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:34px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:55px;
  padding:16px 24px;
  font-size:13px;
  font-weight:600;
  border-radius:12px;
  transition:transform .3s var(--ease),background .2s,box-shadow .3s;
  position:relative;
  overflow:hidden
}
.button-primary{
  background:var(--lavender);
  color:#17223c;
  box-shadow:inset 0 1px 0 #fff5,0 5px 20px #b9caff08
}
.button-primary:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 25%,#fff5 45%,transparent 65%);
  transform:translateX(-110%);
  transition:transform .7s var(--ease)
}
.button-primary:hover:before{
  transform:translateX(110%)
}
.button-primary:hover{
  transform:translateY(-3px);
  background:#cbd7ff;
  box-shadow:0 8px 28px #b9caff22
}
.button:active{
  transform:translateY(0)
}
.button .icon{
  width:18px;
  height:18px
}
.button-quiet{
  padding-inline:13px;
  gap:12px;
  background:none;
  color:#c0cadb;
  font-size:12px
}
.button-quiet:hover{
  color:var(--mint)
}
.hero-apps{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:34px
}
.app-stack{
  display:flex;
  padding-left:0
}
.app-stack img{
  width:33px;
  height:33px;
  border:3px solid var(--bg);
  border-radius:10px;
  box-sizing:content-box;
  margin-right:-9px
}
.app-stack img:last-child{
  margin-right:0
}
.hero-apps p{
  font-size:10px;
  line-height:1.7;
  color:#8492a8
}
.hero-apps strong{
  font-weight:400;
  color:#bbc4d4
}
.hero-scroll{
  position:absolute;
  bottom:28px;
  left:0;
  display:flex;
  align-items:center;
  gap:11px;
  font-size:10px;
  color:#77869e
}
.hero-scroll>.icon{
  width:16px
}
.scroll-line{
  height:1px;
  width:62px;
  background:linear-gradient(90deg,#657790,transparent);
  margin-left:15px
}
.network-scene{
  height:540px;
  position:relative;
  margin-right:-48px;
  margin-left:0;
  margin-top:-13px;
  isolation:isolate;
  --map-x:0px;
  --map-y:0px
}
.map-grid{
  position:absolute;
  inset:20px -30px 30px;
  background-image:linear-gradient(#41577b12 1px,transparent 1px),linear-gradient(90deg,#41577b12 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:radial-gradient(ellipse,#000 15%,transparent 68%);
  transform:perspective(600px) rotateX(16deg);
  pointer-events:none
}
.network-scene:before{
  content:"";
  position:absolute;
  inset:90px 10px;
  background:radial-gradient(ellipse at 55% 47%,#35486635,transparent 64%);
  filter:blur(40px)
}
#network-map{
  width:100%;
  height:100%;
  display:block;
  transform:translate(var(--map-x),var(--map-y));
  transition:transform .8s var(--ease)
}
.scene-top,.scene-bottom{
  position:absolute;
  left:34px;
  right:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  font-weight:500;
  letter-spacing:.15em;
  color:#73839a;
  z-index:2
}
.scene-top{
  top:28px
}
.scene-top>span:first-child{
  display:flex;
  align-items:center;
  gap:9px
}
.scene-top .status-dot{
  width:4px;
  height:4px;
  background:#a2bce4;
  box-shadow:none
}
.scene-view{
  display:flex;
  align-items:center;
  gap:10px
}
.scene-view .icon{
  width:14px;
  height:14px
}
.scene-bottom{
  bottom:18px;
  left:34px;
  right:24px
}
.map-caption{
  font-size:7px;
  letter-spacing:.18em;
  color:#677b92
}
.route-ticket{
  position:absolute;
  left:24%;
  bottom:63px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 17px;
  min-width:243px;
  border:1px solid #49665488;
  border-top-color:#71978299;
  border-radius:15px;
  background:linear-gradient(120deg,#172b2be6,#172030ed);
  box-shadow:0 15px 40px #02091688,0 0 30px #a4d4b20a;
  backdrop-filter:blur(14px);
  transform:rotate(-3deg);
  animation:ticket-float 7s ease-in-out infinite;
  z-index:4
}
.ticket-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#2b4436;
  color:var(--mint);
  box-shadow:inset 0 0 0 1px #b9ddc421
}
.ticket-icon .icon{
  width:21px
}
.route-ticket>div{
  display:grid;
  gap:2px
}
.route-ticket strong{
  font-size:11px;
  font-weight:600
}
.route-ticket>div>span{
  font-size:9px;
  color:#8eaa9c
}
.signal-bars{
  margin-left:17px;
  display:flex;
  align-items:flex-end;
  height:17px;
  gap:3px
}
.signal-bars b{
  display:block;
  width:3px;
  border-radius:2px;
  background:#a6d6b1;
  animation:signal 3s ease-in-out infinite
}
.signal-bars b:nth-child(1){
  height:5px
}
.signal-bars b:nth-child(2){
  height:9px;
  animation-delay:.15s
}
.signal-bars b:nth-child(3){
  height:12px;
  animation-delay:.3s
}
.signal-bars b:nth-child(4){
  height:17px;
  animation-delay:.45s
}
.map-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none
}
.map-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  transform:translate(-16px,-16px);
  padding:11px;
  pointer-events:auto;
  min-width:36px;
  min-height:36px
}
.map-node>span:first-child{
  width:5px;
  height:5px;
  background:#cee4d5;
  border-radius:50%;
  box-shadow:0 0 0 5px #b9ddc415,0 0 15px #b9ddc455;
  transition:box-shadow .3s
}
.map-node[aria-pressed=true]>span:first-child{
  box-shadow:0 0 0 5px #b9ddc42a,0 0 0 9px #b9ddc40a,0 0 20px #b9ddc4bb
}
.node-label{
  position:absolute;
  left:26px;
  top:18px;
  font:500 8px Inter,sans-serif;
  color:#b1c7bc;
  letter-spacing:.02em;
  padding:4px 7px;
  background:#12211ce0;
  border:1px solid #3959478a;
  border-radius:4px;
  white-space:nowrap;
  transition:color .3s,border-color .3s;
  transform:translateY(1px)
}
.map-node[aria-pressed=true] .node-label{
  color:#e0f3e5;
  border-color:#719981
}
.map-node:hover .node-label{
  color:white
}
.node-america{
  left:22.8%;
  top:43.8%
}
.node-europe{
  left:53.7%;
  top:37.8%
}
.node-asia{
  left:82.8%;
  top:46%
}
.device-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:29px 0;
  border-block:1px solid #2632489c;
  gap:24px
}
.device-strip>p{
  color:#74839a;
  font-size:11px;
  line-height:1.8;
  min-width:180px
}
.device-strip strong{
  font-weight:500;
  color:#bac4d4
}
.platform{
  display:flex;
  align-items:center;
  gap:11px;
  color:#96a5bd;
  font-size:12px
}
.platform .icon{
  height:22px;
  width:22px;
  color:#acbad3
}
.section{
  margin-top:112px
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:36px
}
.eyebrow.muted{
  color:#8696af;
  font-size:9px
}
.section h2,.faq-section h2{
  font-size:clamp(34px,3.2vw,46px);
  font-weight:700;
  line-height:1.14;
  margin-top:17px
}
.section-heading>p{
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:3px
}
.section h2 span{
  color:var(--lavender)
}
.feature-grid{
  display:grid;
  grid-template-columns:1.18fr 1fr;
  gap:20px
}
.feature-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:25px;
  overflow:hidden;
  isolation:isolate;
  min-height:430px;
  padding:28px 32px;
  background:linear-gradient(145deg,#151f32,#0f1828);
  transition:border-color .4s
}
.feature-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(400px circle at var(--spot-x,50%) var(--spot-y,50%),#b9ddc40c,transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
  z-index:-1
}
.feature-card:hover:before{
  opacity:1
}
.feature-card:hover{
  border-color:#4d616c
}
.card-topline{
  display:flex;
  align-items:center;
  justify-content:flex-end
}
.tiny-label{
  font-size:8px;
  letter-spacing:.15em;
  color:#90a0b9;
  font-weight:500
}
.round-icon{
  border:1px solid #3b4d614d;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#8fa3c7
}
.round-icon .icon{
  width:16px;
  height:16px
}
.feature-card h3{
  font-size:34px;
  letter-spacing:-.045em;
  line-height:1.12;
  font-weight:700;
  margin-top:21px
}
.feature-card p{
  font-size:12px;
  line-height:1.9;
  color:#95a4bc;
  margin-top:15px
}
.services-card{
  background:radial-gradient(ellipse at 80% 100%,#1c3043,transparent 80%),#111a2b
}
.service-scene{
  height:210px;
  width:100%;
  position:relative;
  margin-top:10px
}
.service-center{
  position:absolute;
  top:100px;
  left:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  width:57px;
  height:59px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(140deg,#466a56,#1c3b2c);
  border:1px solid #b9ddc45c;
  box-shadow:inset 0 1px 2px #c1e7ce44,0 0 55px #b9ddc41b;
  color:#c1e7cb;
  z-index:2
}
.service-center .icon{
  width:31px;
  height:31px
}
.service-tile{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid #3d4c654d;
  border-radius:17px;
  background:#1b273b;
  box-shadow:0 8px 20px #050a1733;
  position:absolute;
  z-index:2;
  animation:tile-float 6s ease-in-out infinite
}
.service-tile img{
  width:35px;
  height:35px;
  object-fit:contain;
  border-radius:9px
}
.service-youtube{
  top:16px;
  left:19%;
  transform:rotate(-9deg)
}
.service-telegram{
  top:73px;
  left:1%;
  animation-delay:-2s;
  transform:rotate(-12deg)
}
.service-chatgpt{
  top:133px;
  left:22%;
  animation-delay:-3s;
  transform:rotate(5deg)
}
.service-chatgpt img{
  filter:invert(1);
  width:32px;
  height:32px
}
.service-google{
  top:14px;
  right:17%;
  animation-delay:-1s;
  transform:rotate(9deg)
}
.service-discord{
  top:80px;
  right:0;
  animation-delay:-4s;
  transform:rotate(13deg)
}
.service-yandex{
  top:139px;
  right:23%;
  animation-delay:-2s;
  transform:rotate(-7deg)
}
.service-paths{
  position:absolute;
  inset:0;
  mask-image:radial-gradient(ellipse,#000 20%,transparent 70%)
}
.service-paths span{
  position:absolute;
  left:5%;
  right:5%;
  top:100px;
  height:1px;
  background:linear-gradient(90deg,transparent,#8ab99899,transparent)
}
.service-paths span:nth-child(2){
  transform:rotate(34deg)
}
.service-paths span:nth-child(3){
  transform:rotate(-34deg)
}
.service-paths span:after{
  content:"";
  position:absolute;
  left:0;
  width:25px;
  height:1px;
  background:#daf5e3;
  box-shadow:0 0 7px #b9ddc4;
  animation:route-flow 6s linear infinite
}
.service-paths span:nth-child(2):after{
  animation-delay:-3s
}
.service-paths span:nth-child(3):after{
  animation-delay:-1s
}
.connection-card{
  background:radial-gradient(ellipse at 80% 40%,#22383199,transparent 70%),linear-gradient(135deg,#15212c,#111c25)
}
.connection-art{
  position:absolute;
  width:285px;
  height:230px;
  right:-2px;
  top:46px
}
.connection-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  animation:art-float 8s ease-in-out infinite
}
.art-orbit{
  position:absolute;
  width:245px;
  height:95px;
  border:1px solid #8ab99c40;
  border-radius:50%;
  top:72px;
  left:30px;
  transform:rotate(-28deg);
  box-shadow:0 0 24px #b9ddc409
}
.art-orbit:after{
  content:"";
  position:absolute;
  left:35px;
  top:4px;
  width:4px;
  height:4px;
  background:#ccf0d6;
  border-radius:50%;
  box-shadow:0 0 12px #b9ddc4
}
.connection-copy{
  position:relative;
  margin-top:125px
}
.connection-copy h3{
  margin:0
}
.connection-copy p{
  font-size:11px
}
.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:23px;
  padding-top:18px;
  border-top:1px solid #3e55493d
}
.card-bottom>span{
  display:flex;
  align-items:center;
  gap:9px;
  color:#adc6b9;
  font-size:10px
}
.card-bottom>span .icon{
  width:15px;
  height:15px
}
.circle-button{
  width:33px;
  height:33px;
  border:1px solid #688a7355;
  background:#28433466;
  color:var(--mint);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background .3s,transform .3s
}
.circle-button .icon{
  width:17px;
  height:17px
}
.circle-button:hover{
  background:#385e48;
  transform:rotate(6deg)
}
.details-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-top:29px;
  gap:30px
}
.details-strip>div,.details-strip>.detail-action{
  display:flex;
  align-items:center;
  gap:14px
}
.details-strip>.detail-action{min-height:44px}
.detail-action:hover strong,.card-bottom:hover>span{color:var(--mint)}
.detail-icon{
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:1px solid #25374a;
  border-radius:12px;
  background:#15202e;
  color:#b2c5e8
}
.detail-icon .icon{
  width:18px;
  height:18px
}
.details-strip strong{
  display:block;
  font-size:11px;
  font-weight:500;
  color:#c4cedd
}
.details-strip small{
  display:block;
  font-size:10px;
  color:#7f8ea5;
  margin-top:2px
}
.devices-section{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:20px;
  align-items:center;
  min-height:490px
}
.devices-copy h2{
  font-size:54px;
  line-height:1.08
}
.devices-copy>p{
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:23px
}
.device-switch{
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid #27354c;
  background:#101929;
  border-radius:12px;
  padding:5px;
  width:fit-content;
  margin-top:27px
}
.device-switch button{
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:8px;
  font-size:10px;
  color:#92a0b8;
  transition:background .3s,color .3s
}
.device-switch button[aria-pressed=true]{
  background:#b9ddc4;
  color:#173126;
  box-shadow:0 3px 12px #030b1633
}
.device-switch button .icon{
  width:15px;
  height:15px
}
.devices-copy .device-note{
  font-size:9px;
  color:#8190a6;
  margin-top:13px;
  max-width:360px;
  min-height:35px
}
.devices-visual{
  position:relative;
  min-height:460px;
  isolation:isolate
}
.devices-art{
  width:100%;
  height:410px;
  object-fit:contain;
  position:relative;
  transition:transform 1s var(--ease);
  animation:devices-float 9s ease-in-out infinite
}
.devices-visual[data-device-scene=phone] .devices-art{
  transform:translateX(-10%) scale(1.07)
}
.devices-visual[data-device-scene=tv] .devices-art{
  transform:translateX(2%) scale(1.05)
}
.device-halo{
  position:absolute;
  inset:20% 12% 10%;
  background:radial-gradient(ellipse,#325d4244,transparent 68%);
  filter:blur(30px);
  z-index:-1
}
.device-rail{
  position:absolute;
  border:1px solid #b9ddc42a;
  border-radius:50%;
  width:95%;
  height:180px;
  left:4%;
  top:35%;
  transform:rotate(-20deg);
  z-index:-1
}
.rail-two{
  transform:rotate(18deg);
  border-color:#839bc82a;
  top:33%;
  height:210px
}
.device-rail:after{
  content:"";
  position:absolute;
  top:7%;
  left:18%;
  width:5px;
  height:5px;
  background:var(--mint);
  border-radius:50%;
  box-shadow:0 0 15px #b9ddc4;
  animation:signal 5s ease-in-out infinite
}
.floating-tag{
  position:absolute;
  background:linear-gradient(130deg,#21352aee,#17232ced);
  border:1px solid #5b826b77;
  backdrop-filter:blur(20px);
  border-radius:9px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 16px;
  font-size:10px;
  color:#c7e2d0;
  box-shadow:0 12px 24px #03070d44
}
.device-tag{
  top:15%;
  right:0;
  transform:rotate(6deg)
}
.key-tag{
  bottom:21%;
  left:7%;
  transform:rotate(-5deg)
}
.key-tag .icon{
  width:15px;
  height:15px
}
.visual-footnote{
  position:absolute;
  bottom:17px;
  left:0;
  width:100%;
  text-align:center;
  font-size:7px;
  letter-spacing:.17em;
  color:#6d8195
}
.text-link{
  display:flex;
  align-items:center;
  gap:10px;
  color:#a7bbdb;
  font-size:11px;
  margin-bottom:7px
}
.text-link .icon{
  width:16px;
  height:16px
}
.text-link:hover{
  color:var(--mint)
}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:27px
}
.step-visual{
  height:195px;
  border-radius:18px;
  background:linear-gradient(140deg,#142035,#101825);
  border:1px solid #28354b;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.step-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 70%,#b9ddc410,transparent 65%);
  pointer-events:none
}
.step-number{
  position:absolute;
  top:17px;
  left:20px;
  font-size:10px;
  letter-spacing:.15em;
  color:#71839d
}
.mini-key{
  display:grid;
  place-items:center;
  width:63px;
  height:65px;
  transform:translateY(-12px) rotate(-11deg);
  border-radius:19px;
  color:#cae8d3;
  background:linear-gradient(140deg,#426e52,#193d2a);
  border:1px solid #7ba18b;
  box-shadow:inset 0 1px 2px #d4f9df66,0 10px 22px #0005;
  z-index:2
}
.mini-key .icon{
  width:34px;
  height:34px
}
.step-chip{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font-size:9px;
  color:#b4c7bc;
  padding:5px 11px;
  border:1px solid #3c59494d;
  border-radius:6px;
  background:#1b2d2899;
  z-index:2
}
.step-chip>.icon{
  width:12px;
  height:12px
}
.step-line{
  position:absolute;
  top:82px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#93cba487,transparent)
}
.step-line:after{
  content:"";
  position:absolute;
  left:0;
  width:33px;
  height:1px;
  background:#c2ebce;
  box-shadow:0 0 10px #b9ddc4;
  animation:route-flow 7s linear infinite
}
.mini-apps{
  display:flex;
  align-items:center;
  gap:13px;
  transform:translateY(-10px)
}
.mini-apps img{
  width:47px;
  height:47px;
  border-radius:12px;
  border:1px solid #ffffff22;
  box-shadow:0 10px 22px #02071288;
  animation:tile-float 7s ease-in-out infinite
}
.mini-apps img:first-child{
  transform:rotate(-10deg);
  animation-delay:-2s
}
.mini-apps img:nth-child(2),.mini-apps img:nth-child(3){
  transform:translateY(-8px)
}
.mini-apps img:nth-child(3){
  animation-delay:-1s
}
.mini-apps img:last-child{
  transform:rotate(10deg);
  animation-delay:-4s
}
.connection-pulse{
  width:61px;
  height:61px;
  position:relative;
  display:grid;
  place-items:center;
  transform:translateY(-11px);
  border-radius:50%;
  border:1px solid #a1d5b266;
  background:#1d392d;
  color:#b9ddc4;
  box-shadow:0 0 30px #b9ddc40a
}
.connection-pulse .icon{
  width:27px;
  height:27px
}
.connection-pulse>span{
  position:absolute;
  inset:-12px;
  border:1px solid #b9ddc432;
  border-radius:50%;
  animation:pulse-ring 4s ease-out infinite
}
.connection-pulse>span:last-child{
  animation-delay:2s
}
.step h3{
  font-size:20px;
  letter-spacing:-.035em;
  margin-top:24px
}
.step p{
  font-size:11px;
  line-height:1.9;
  color:var(--muted);
  margin-top:13px
}
.faq-section{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  padding-top:20px
}
.faq-section h2{
  font-size:40px
}
.faq-heading>p{
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  margin-top:21px
}
.faq-decoration{
  position:relative;
  display:grid;
  place-items:center;
  width:53px;
  height:53px;
  border-radius:18px;
  background:linear-gradient(140deg,#24374c,#141f2f);
  border:1px solid #384a62;
  margin-top:30px;
  transform:rotate(-8deg);
  color:var(--lavender)
}
.faq-decoration .icon{
  width:26px;
  height:26px
}
.faq-decoration .status-dot{
  position:absolute;
  right:4px;
  top:4px
}
.faq-list{
  border-top:1px solid #2c3950
}
.faq-list details{
  border-bottom:1px solid #2c3950
}
.faq-list summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font-size:12px;
  cursor:pointer;
  min-height:72px;
  padding:20px 2px;
  color:#c6d0df
}
.faq-list summary::-webkit-details-marker{
  display:none
}
.faq-list summary .icon{
  width:17px;
  height:17px;
  color:#849cbc;
  transition:transform .3s,color .3s
}
.faq-list details[open] summary .icon{
  transform:rotate(45deg);
  color:var(--mint)
}
.faq-list details[open] summary{
  color:var(--mint)
}
.faq-list details>p{
  font-size:11px;
  line-height:1.9;
  color:#9baac0;
  max-width:95%;
  padding:0 5px 22px
}
.faq-list summary:hover{
  color:var(--white)
}
.final-section{
  position:relative;
  border:1px solid #344359;
  border-radius:25px;
  overflow:hidden;
  margin-top:112px;
  padding:58px 55px 63px;
  background:radial-gradient(ellipse at 85% 100%,#29413444,transparent 70%),linear-gradient(105deg,#15213a,#111d2d);
  isolation:isolate
}
.final-section h2{
  font-size:65px;
  line-height:1.03;
  margin-top:23px;
  font-weight:800
}
.final-section h2 span{
  color:var(--lavender)
}
.final-section p{
  color:#8f9fb6;
  font-size:12px;
  margin-top:23px
}
.final-section .button{
  margin-top:25px
}
.final-grid{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#59759214 1px,transparent 1px),linear-gradient(90deg,#59759214 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:linear-gradient(90deg,transparent,#000)
}
.final-orbits{
  position:absolute;
  inset:-120px -230px -120px 42%;
  transform:rotate(-24deg);
  z-index:-1;
  opacity:.8
}
.final-orbits>span{
  position:absolute;
  width:75%;
  height:100%;
  border:1px solid #b9ddc43d;
  border-radius:50%;
  left:0;
  top:0;
  box-shadow:0 0 40px #b9ddc403
}
.final-orbits>span:nth-child(2){
  left:18%;
  border-color:#b9caff33
}
.final-orbits>span:nth-child(3){
  left:36%
}
.final-orbits>span:after{
  content:"";
  position:absolute;
  top:16%;
  right:13%;
  width:6px;
  height:6px;
  background:#d4f4dd;
  box-shadow:0 0 8px #b9ddc4,0 0 25px #b9ddc4;
  border-radius:50%;
  animation:signal 5s ease-in-out infinite
}
.final-orbits>span:nth-child(2):after{
  top:80%;
  right:10%;
  animation-delay:-2s
}
.final-watermark{
  position:absolute;
  font:800 132px/1 Manrope,Inter,sans-serif;
  letter-spacing:-10px;
  right:28px;
  top:38%;
  color:#b9ddc412;
  transform:rotate(-8deg);
  z-index:-1
}
.footer{
  padding:53px 0 24px
}
.footer-top{
  display:flex;
  align-items:center;
  gap:30px
}
.footer-top .brand{
  font-size:23px
}
.footer-top .brand-mark{
  width:29px;
  height:31px;
  border-radius:9px
}
.footer-top .brand-mark .icon{
  width:20px;
  height:20px
}
.footer-top>p{
  font-size:10px;
  color:#8796ae
}
.back-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  font-size:10px;
  color:#a9b9d1
}
.back-top .icon{
  width:15px;
  height:15px
}
.footer-bottom{
  border-top:1px solid #253248;
  margin-top:29px;
  padding-top:19px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#71819b;
  font-size:9px
}
.footer-palette{
  display:flex;
  gap:6px
}
.footer-palette i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lavender)
}
.footer-palette i:nth-child(2){
  background:#293d66
}
.footer-palette i:nth-child(3){
  background:var(--mint)
}
.design-dialog{
  border:1px solid #3f5b4c;
  padding:42px 35px 35px;
  border-radius:24px;
  width:min(460px,calc(100% - 32px));
  background:linear-gradient(145deg,#1b2d2c,#111b2b);
  color:var(--white);
  text-align:center;
  box-shadow:0 20px 100px #0008
}
.design-dialog::backdrop{
  background:#050a12b8;
  backdrop-filter:blur(8px)
}
.dialog-close{
  position:absolute;
  right:15px;
  top:15px
}
.dialog-mark{
  display:grid;
  place-items:center;
  background:var(--mint);
  color:#193426;
  width:52px;
  height:55px;
  border-radius:16px;
  margin:0 auto 25px;
  transform:rotate(-8deg)
}
.dialog-mark .icon{
  width:31px;
  height:31px
}
.design-dialog .eyebrow{
  justify-content:center
}
.design-dialog h2{
  font-size:28px;
  margin:15px 0 20px
}
.design-dialog>p:not(.eyebrow){
  font-size:13px;
  color:#acbbc9
}
.design-dialog p strong{
  color:var(--mint);
  font-weight:500
}
.design-dialog .dialog-note{
  font-size:11px!important;
  color:#8798ad!important;
  margin:18px 0 25px
}
.design-dialog>.button{
  width:100%
}
.js-motion .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)
}
.js-motion .reveal.in-view{
  opacity:1;
  transform:none
}
.motion-scope:not(.is-visible) *,.motion-scope:not(.is-visible):before,.motion-scope:not(.is-visible):after{
  animation-play-state:paused!important
}
.motion-paused{
  scroll-behavior:auto
}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{
  animation-play-state:paused!important
}
.motion-paused .reveal{
  opacity:1;
  transform:none;
  transition:none
}
@keyframes ticket-float{
  0%,100%{
    translate:0 0
  }
  50%{
    translate:0 -7px
  }
}
@keyframes signal{
  0%,100%{
    opacity:.45
  }
  50%{
    opacity:1
  }
}
@keyframes tile-float{
  0%,100%{
    translate:0 0
  }
  50%{
    translate:0 -7px
  }
}
@keyframes art-float{
  0%,100%{
    translate:0 0;
    rotate:0deg
  }
  50%{
    translate:0 -6px;
    rotate:2deg
  }
}
@keyframes devices-float{
  0%,100%{
    translate:0 0
  }
  50%{
    translate:0 -8px
  }
}
@keyframes route-flow{
  from{
    left:-10%
  }
  to{
    left:110%
  }
}
@keyframes pulse-ring{
  from{
    scale:.8;
    opacity:.7
  }
  to{
    scale:1.7;
    opacity:0
  }
}
.hero:before{
  right:0;
  width:min(850px,100%)
}
.network-scene{
  overflow:clip
}
@media(min-width:1500px){
  .hero{
    min-height:755px
  }
  .network-scene{
    height:580px;
    margin-right:-48px
  }
  .hero h1{
    font-size:78px
  }
}
@media(max-width:1100px){
  .container{
    width:calc(100% - 64px)
  }
  .desktop-nav{
    gap:19px;
    font-size:11px
  }
  .hero{
    min-height:650px;
    grid-template-columns:1fr 1fr
  }
  .hero h1{
    font-size:58px
  }
  .hero-description{
    font-size:14px
  }
  .hero-actions{
    gap:6px
  }
  .button{
    font-size:12px;
    gap:16px;
    padding-inline:20px
  }
  .button-quiet{
    font-size:10px;
    padding-inline:10px
  }
  .network-scene{
    height:485px;
    margin-right:-32px;
    margin-left:-6px
  }
  .scene-top{
    left:20px;
    right:9px;
    font-size:7px
  }
  .route-ticket{
    left:21%;
    min-width:210px;
    padding:11px 13px;
    bottom:52px
  }
  .ticket-icon{
    width:28px;
    height:30px
  }
  .route-ticket strong{
    font-size:10px
  }
  .signal-bars{
    margin-left:7px
  }
  .feature-card{
    padding:24px;
    min-height:420px
  }
  .feature-card h3{
    font-size:30px
  }
  .connection-art{
    right:-20px;
    width:260px
  }
  .connection-copy{
    margin-top:133px
  }
  .connection-copy p{
    font-size:10px
  }
  .services-card p{
    font-size:11px
  }
  .service-tile{
    width:51px;
    height:51px;
    border-radius:15px
  }
  .service-tile img{
    width:31px;
    height:31px
  }
  .devices-copy h2{
    font-size:48px
  }
  .device-switch button{
    padding:10px 8px
  }
  .section{
    margin-top:95px
  }
  .faq-section{
    gap:45px
  }
  .faq-section h2{
    font-size:35px
  }
  .final-watermark{
    font-size:115px;
    right:20px
  }
  .details-strip{
    gap:16px
  }
  .details-strip strong{
    font-size:10px
  }
  .details-strip small{
    font-size:9px
  }
}
@media(max-width:850px){
  .container{
    width:calc(100% - 48px)
  }
  .desktop-nav{
    display:none
  }
  .header{
    height:76px
  }
  .menu-button{
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    border:1px solid #344257;
    border-radius:9px;
    color:var(--lavender)
  }
  .mobile-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:15px 24px 24px;
    background:#101a2a;
    border-bottom:1px solid #344257;
    box-shadow:0 25px 40px #0004
  }
  .mobile-nav>a,.mobile-nav>button{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    padding:14px 4px;
    color:#bdcadd;
    font-size:13px;
    border-bottom:1px solid #29394e
  }
  .mobile-nav>a .icon,.mobile-nav>button .icon{
    width:16px;
    height:16px
  }
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:64px;
    padding-bottom:70px
  }
  .hero-copy{
    margin:0;
    max-width:650px
  }
  .hero h1{
    font-size:74px
  }
  .hero-description{
    font-size:16px
  }
  .hero-actions{
    gap:20px
  }
  .button{
    font-size:13px;
    gap:25px
  }
  .button-quiet{
    font-size:12px
  }
  .hero-apps{
    margin-top:26px
  }
  .network-scene{
    position:absolute;
    right:-24px;
    top:15px;
    width:360px;
    height:520px;
    opacity:.6;
    z-index:-1;
    mask-image:linear-gradient(90deg,transparent,#000 65%);
    margin:0
  }
  .network-scene .scene-top,.network-scene .scene-bottom,.network-scene .route-ticket,.network-scene .map-hotspots{
    display:none
  }
  .hero-scroll{
    bottom:22px
  }
  .hero:before{
    right:0;
    width:100%;
    height:600px;
    top:0
  }
  .device-strip{
    gap:15px;
    flex-wrap:wrap;
    padding-block:23px
  }
  .device-strip>p{
    min-width:120px
  }
  .platform{
    font-size:10px;
    gap:6px
  }
  .platform .icon{
    width:19px;
    height:19px
  }
  .feature-card h3{
    font-size:28px
  }
  .feature-card{
    min-height:420px;
    padding:22px
  }
  .connection-art{
    width:240px;
    right:-25px;
    top:50px
  }
  .connection-copy{
    margin-top:146px
  }
  .connection-copy p{
    font-size:10px
  }
  .connection-copy p br{
    display:none
  }
  .services-card p{
    font-size:11px
  }
  .service-scene{
    margin-top:22px;
    height:190px
  }
  .service-tile{
    width:45px;
    height:45px;
    border-radius:13px
  }
  .service-tile img{
    width:28px;
    height:28px
  }
  .service-center{
    width:49px;
    height:50px;
    border-radius:14px
  }
  .service-center .icon{
    width:27px
  }
  .service-youtube{
    left:14%;
    top:15px
  }
  .service-google{
    right:12%
  }
  .service-telegram{
    left:0;
    top:85px
  }
  .service-discord{
    right:0;
    top:85px
  }
  .service-chatgpt{
    left:17%;
    top:146px
  }
  .service-yandex{
    right:17%;
    top:146px
  }
  .devices-section{
    grid-template-columns:.9fr 1.1fr;
    gap:0
  }
  .devices-copy h2{
    font-size:43px
  }
  .devices-visual{
    min-height:360px
  }
  .devices-art{
    height:340px
  }
  .devices-copy .eyebrow{
    font-size:7px
  }
  .device-switch{
    gap:2px;
    padding:4px
  }
  .device-switch button{
    font-size:9px;
    padding:8px
  }
  .device-switch button .icon{
    width:13px
  }
  .device-tag{
    right:0;
    top:15%;
    font-size:8px;
    padding:8px
  }
  .key-tag{
    left:0;
    bottom:19%;
    font-size:9px;
    padding:8px 10px
  }
  .visual-footnote{
    font-size:6px;
    bottom:0
  }
  .details-strip{
    gap:14px
  }
  .details-strip>div{
    gap:8px
  }
  .detail-icon{
    width:31px;
    height:33px
  }
  .details-strip strong{
    font-size:9px
  }
  .details-strip small{
    font-size:8px
  }
  .steps-grid{
    gap:18px
  }
  .step-visual{
    height:180px
  }
  .mini-apps{
    gap:6px
  }
  .mini-apps img{
    width:38px;
    height:38px
  }
  .step h3{
    font-size:18px;
    line-height:1.3
  }
  .step p{
    font-size:10px
  }
  .faq-section{
    grid-template-columns:1fr 1.2fr;
    gap:35px
  }
  .faq-section h2{
    font-size:31px
  }
  .faq-list summary{
    font-size:11px;
    gap:20px
  }
  .final-section{
    padding:42px
  }
  .final-section h2{
    font-size:58px
  }
  .final-watermark{
    font-size:95px;
    right:20px;
    top:45%;
    letter-spacing:-7px
  }
}
@media(max-width:600px){
  .container{
    width:calc(100% - 40px)
  }
  .header{
    height:72px
  }
  .brand{
    font-size:25px
  }
  .brand-mark{
    width:31px;
    height:33px;
    border-radius:9px;
    margin-right:8px
  }
  .brand-mark .icon{
    width:21px;
    height:21px
  }
  .header-actions{
    gap:9px
  }
  .header-start{
    font-size:0;
    padding:0;
    width:37px;
    height:37px;
    display:grid;
    place-items:center
  }
  .header-start .icon{
    width:17px;
    height:17px
  }
  .hero{
    padding-top:40px;
    padding-bottom:27px;
    display:flex;
    flex-direction:column;
    align-items:stretch
  }
  .hero-copy{
    z-index:3
  }
  .eyebrow{
    font-size:8px;
    gap:8px;
    letter-spacing:.13em
  }
  .hero h1{
    font-size:clamp(40px,11.9vw,68px);
    line-height:1.07;
    margin-top:24px;
    letter-spacing:-.06em
  }
  .hero-description{
    font-size:12px;
    margin-top:21px;
    line-height:1.9
  }
  .hero-actions{
    margin-top:25px;
    gap:9px
  }
  .button{
    min-height:51px;
    padding:14px 18px;
    font-size:12px;
    gap:23px;
    border-radius:10px
  }
  .button-quiet{
    font-size:10px;
    padding:10px 8px;
    gap:8px
  }
  .button-quiet .icon{
    width:15px
  }
  .hero-apps{
    margin-top:24px;
    gap:12px
  }
  .app-stack img{
    width:28px;
    height:28px;
    border-radius:9px
  }
  .hero-apps p{
    font-size:9px
  }
  .network-scene{
    position:relative;
    width:calc(100% + 40px);
    right:auto;
    top:auto;
    height:350px;
    opacity:1;
    mask-image:none;
    z-index:1;
    flex:none;
    align-self:center;
    margin:13px -20px -1px
  }
  .network-scene .scene-top{
    display:flex;
    top:18px;
    left:20px;
    right:20px;
    font-size:6px
  }
  .network-scene .scene-view{
    font-size:6px;
    gap:5px
  }
  .scene-view .icon{
    width:11px;
    height:11px
  }
  .network-scene .scene-bottom{
    display:flex;
    bottom:0;
    left:20px;
    right:20px
  }
  .map-caption{
    font-size:6px;
    letter-spacing:.12em
  }
  .network-scene .map-hotspots{
    display:block
  }
  .network-scene .route-ticket{
    display:flex;
    bottom:37px;
    left:25%;
    min-width:185px;
    padding:9px 12px;
    gap:9px;
    border-radius:11px
  }
  .ticket-icon{
    width:26px;
    height:27px;
    border-radius:8px
  }
  .ticket-icon .icon{
    width:16px;
    height:16px
  }
  .route-ticket strong{
    font-size:9px
  }
  .route-ticket>div>span{
    font-size:8px
  }
  .signal-bars{
    margin-left:8px;
    height:13px;
    scale:.8
  }
  .hero-scroll{
    display:none
  }
  .node-label{
    font-size:6px;
    left:23px;
    top:16px;
    padding:3px 5px
  }
  .map-node>span:first-child{
    width:4px;
    height:4px
  }
  .device-strip{
    padding:23px 0;
    justify-content:space-between;
    gap:20px 10px
  }
  .device-strip>p{
    width:100%;
    display:flex;
    gap:5px;
    font-size:10px;
    justify-content:center
  }
  .device-strip>p br{
    display:none
  }
  .platform{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:9px;
    min-width:41px
  }
  .platform .icon{
    width:21px;
    height:21px
  }
  .section{
    margin-top:72px
  }
  .section-heading{
    display:block;
    margin-bottom:25px
  }
  .section h2,.faq-section h2{
    font-size:33px;
    line-height:1.16;
    margin-top:13px
  }
  .section-heading>p{
    font-size:11px;
    margin-top:17px;
    line-height:1.8
  }
  .section-heading>p br{
    display:none
  }
  .eyebrow.muted{
    font-size:8px
  }
  .feature-grid{
    grid-template-columns:1fr;
    gap:16px
  }
  .feature-card{
    padding:23px;
    min-height:402px;
    border-radius:21px
  }
  .feature-card h3{
    font-size:32px;
    margin-top:19px
  }
  .feature-card p{
    font-size:12px
  }
  .tiny-label{
    font-size:7px
  }
  .round-icon{
    width:27px;
    height:27px
  }
  .service-scene{
    height:195px;
    margin-top:12px;
    max-width:350px;
    margin-inline:auto
  }
  .service-center{
    width:52px;
    height:54px;
    border-radius:16px
  }
  .service-tile{
    width:51px;
    height:51px;
    border-radius:15px
  }
  .service-tile img{
    width:31px;
    height:31px
  }
  .service-youtube{
    left:18%;
    top:12px
  }
  .service-google{
    right:15%;
    top:10px
  }
  .service-chatgpt{
    left:20%;
    top:140px
  }
  .service-yandex{
    right:19%;
    top:143px
  }
  .connection-card{
    min-height:385px
  }
  .connection-art{
    right:-6px;
    top:40px;
    width:265px;
    height:210px
  }
  .connection-copy{
    margin-top:128px
  }
  .connection-copy h3{
    font-size:32px;
    margin:0
  }
  .connection-copy p{
    font-size:11px;
    max-width:240px
  }
  .card-bottom{
    margin-top:20px
  }
  .details-strip{
    display:flex;
    flex-wrap:wrap;
    gap:19px;
    padding:23px 2px 0
  }
  .details-strip>div{
    width:100%;
    gap:13px
  }
  .detail-icon{
    width:35px;
    height:35px
  }
  .details-strip strong{
    font-size:11px
  }
  .details-strip small{
    font-size:10px
  }
  .devices-section{
    grid-template-columns:1fr;
    gap:10px;
    overflow:clip
  }
  .devices-copy h2{
    font-size:43px
  }
  .devices-copy h2 span br{
    display:none
  }
  .devices-copy .eyebrow{
    font-size:7px
  }
  .devices-copy>p{
    font-size:12px;
    margin-top:20px
  }
  .device-switch{
    margin-top:23px;
    gap:5px;
    padding:5px
  }
  .device-switch button{
    font-size:10px;
    padding:10px 12px;
    gap:8px
  }
  .device-switch button .icon{
    width:15px;
    height:15px
  }
  .devices-copy .device-note{
    font-size:9px;
    min-height:20px
  }
  .devices-visual{
    min-height:340px;
    margin-top:10px
  }
  .devices-art{
    height:320px;
    width:100%
  }
  .device-tag{
    top:12%;
    right:2%;
    padding:9px 11px;
    font-size:9px
  }
  .key-tag{
    left:0;
    bottom:22%;
    padding:9px 12px
  }
  .visual-footnote{
    bottom:4px;
    font-size:6px
  }
  .steps-grid{
    grid-template-columns:1fr;
    gap:30px
  }
  .step{
    display:grid;
    grid-template-columns:1fr;
    gap:0
  }
  .step-visual{
    height:185px;
    border-radius:17px
  }
  .step h3{
    font-size:22px;
    margin-top:20px
  }
  .step p{
    font-size:12px;
    margin-top:9px
  }
  .step p br{
    display:none
  }
  .mini-apps{
    gap:14px
  }
  .mini-apps img{
    width:49px;
    height:49px
  }
  .step-chip{
    font-size:9px
  }
  .section-heading .text-link{
    margin-top:22px;
    font-size:11px
  }
  .faq-section{
    grid-template-columns:1fr;
    gap:26px
  }
  .faq-heading>p{
    font-size:12px;
    margin-top:17px
  }
  .faq-decoration{
    display:none
  }
  .faq-list summary{
    min-height:69px;
    font-size:12px;
    padding-block:19px;
    gap:25px
  }
  .faq-list details>p{
    font-size:11px
  }
  .final-section{
    margin-top:70px;
    padding:32px 25px 36px;
    border-radius:21px
  }
  .final-section .eyebrow{
    font-size:7px;
    letter-spacing:.1em
  }
  .final-section h2{
    font-size:53px;
    margin-top:25px
  }
  .final-section p{
    font-size:11px;
    max-width:230px;
    margin-top:20px
  }
  .final-section .button{
    margin-top:25px;
    font-size:12px
  }
  .final-orbits{
    inset:0 -250px -100px 43%
  }
  .final-watermark{
    font-size:74px;
    top:47%;
    right:-50px;
    letter-spacing:-5px;
    opacity:.6
  }
  .footer{
    padding-top:38px
  }
  .footer-top{
    flex-wrap:wrap;
    gap:16px
  }
  .footer-top .brand{
    font-size:23px
  }
  .footer-top>p{
    order:3;
    width:100%;
    font-size:10px
  }
  .footer-bottom{
    margin-top:23px;
    flex-wrap:wrap;
    font-size:8px;
    gap:14px
  }
  .footer-bottom>span:nth-child(2){
    order:3;
    width:100%;
    font-size:8px
  }
  .back-top{
    font-size:10px
  }
  .footer-palette{
    margin-left:auto
  }
  .design-dialog{
    padding:40px 25px 28px
  }
  .design-dialog h2{
    font-size:25px
  }
  .design-dialog>p:not(.eyebrow){
    font-size:12px
  }
}
/* Крупная читабельная типографика;
микротекст остаётся только внутри иллюстраций. */
.desktop-nav{
  font-size:13px
}
.header-start{
  font-size:13px
}
.hero-description{
  font-size:18px
}
.hero-actions .button-primary{
  font-size:14px
}
.hero-actions .button-quiet{
  font-size:12px
}
.hero-apps p{
  font-size:11px
}
.section-heading>p{
  font-size:14px
}
.feature-card p{
  font-size:14px
}
.connection-copy p{
  font-size:13px
}
.details-strip strong{
  font-size:13px
}
.details-strip small{
  font-size:11px
}
.devices-copy>p{
  font-size:15px
}
.devices-copy .device-note{
  font-size:11px
}
.device-switch button{
  font-size:11px
}
.step p{
  font-size:13px
}
.step h3{
  font-size:22px
}
.faq-list summary{
  font-size:14px
}
.faq-list details>p{
  font-size:13px
}
.faq-heading>p{
  font-size:14px
}
.final-section p{
  font-size:14px
}
.final-section .button{
  font-size:14px
}
.node-label{
  font-size:9px
}
.footer-top>p{
  font-size:11px
}
.footer-bottom{
  font-size:10px
}
@media(min-width:601px) and (max-width:850px){
  .hero{
    display:grid;
    grid-template-columns:1fr;
    padding-top:50px;
    padding-bottom:60px
  }
  .hero-copy{
    max-width:none
  }
  .network-scene{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    height:470px;
    opacity:1;
    mask-image:none;
    z-index:1;
    margin:0
  }
  .network-scene .scene-top,.network-scene .scene-bottom,.network-scene .route-ticket{
    display:flex
  }
  .network-scene .map-hotspots{
    display:block
  }
  .hero-scroll{
    bottom:16px
  }
  .feature-card p{
    font-size:12px
  }
  .details-strip strong{
    font-size:10px
  }
  .details-strip small{
    font-size:9px
  }
  .device-switch button{
    font-size:10px
  }
  .devices-copy>p{
    font-size:13px
  }
  .faq-list summary{
    font-size:13px
  }
  .step h3{
    font-size:19px
  }
  .step p{
    font-size:12px
  }
}
@media(max-width:600px){
  .header-start{
    font-size:0
  }
  .hero-description{
    font-size:14px
  }
  .hero-actions .button-primary{
    font-size:13px
  }
  .hero-actions .button-quiet{
    font-size:11px;
    gap:7px
  }
  .hero-actions{
    gap:5px
  }
  .hero-actions .button{
    padding-inline:15px
  }
  .hero-actions .button-quiet{
    padding-inline:8px
  }
  .hero-apps p{
    font-size:10px
  }
  .section-heading>p{
    font-size:13px
  }
  .feature-card p,.connection-copy p{
    font-size:13px
  }
  .connection-copy p{
    max-width:250px
  }
  .feature-card{
    min-height:415px
  }
  .connection-card{
    min-height:440px
  }
  .connection-art{
    width:240px;
    height:190px;
    top:28px;
    right:0
  }
  .connection-copy{
    margin-top:160px
  }
  .details-strip strong{
    font-size:12px
  }
  .details-strip small{
    font-size:11px
  }
  .devices-copy>p{
    font-size:14px
  }
  .devices-copy .device-note{
    font-size:10px
  }
  .device-switch button{
    font-size:10px
  }
  .step p{
    font-size:13px
  }
  .faq-heading>p{
    font-size:13px
  }
  .faq-list summary{
    font-size:13px
  }
  .faq-list details>p{
    font-size:12px
  }
  .final-section p{
    font-size:13px
  }
  .final-section .button{
    font-size:13px
  }
  .node-label{
    font-size:7px
  }
  .footer-top>p{
    font-size:10px
  }
  .footer-bottom{
    font-size:9px
  }
}
.hero-actions .button{
  white-space:nowrap
}
@media(max-width:600px){
  .hero-actions{
    flex-wrap:wrap;
    gap:10px
  }
  .hero-actions .button-primary{
    width:100%;
    font-size:14px
  }
  .hero-actions .button-quiet{
    min-height:35px;
    padding:0;
    font-size:12px
  }
}
.header-start{
  background:var(--lavender);
  border-color:transparent;
  color:#17223c;
  font-weight:600
}
.header-start .icon{color:inherit}
.header-start:hover{background:#cbd7ff;border-color:transparent}
.checkout-dialog{
  width:min(500px,calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  padding:30px;
  text-align:left;
  overflow:auto
}
.flow-brand{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.flow-brand .brand-mark{margin-right:0;width:28px;height:30px;border-radius:9px}
.flow-brand strong{font:800 22px Manrope,Inter,sans-serif;letter-spacing:-1px}
.checkout-dialog .eyebrow{justify-content:flex-start;font-size:8px}
.checkout-dialog h2{font-size:30px;margin:14px 0 18px}
.checkout-dialog h2:focus{outline:0}
.flow-intro{font-size:13px;line-height:1.8;color:#a9b8c8}
.checkout-email{display:grid;gap:8px;font-size:12px;color:#c3cfdd}
.checkout-email input{width:100%;min-height:51px;border:1px solid #3b4d62;border-radius:11px;padding:12px 14px;background:#0e1927;color:var(--white);font:14px Inter,Arial,sans-serif}
.checkout-email input::placeholder{color:#72849d}
.checkout-email input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.email-caption{color:#8c9db2;font-size:10px;line-height:1.7;margin-top:9px}
.checkout-pay{width:100%;font-size:13px;opacity:.65;cursor:default}
.checkout-pay:disabled:hover{transform:none;box-shadow:none}
.checkout-pay:disabled:before{display:none}
.flow-demo-note{font-size:10px;color:#8d9bb1;text-align:center;line-height:1.7;margin-top:13px}
.flow-preview-link{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px auto 0;padding:8px 0;font-size:11px;color:var(--mint)}
.flow-preview-link .icon{width:16px;height:16px}
@media(max-width:600px){
  .header-start{display:none}
  .checkout-dialog{padding:26px 21px;max-height:calc(100dvh - 24px)}
  .flow-brand{margin-bottom:25px}
  .checkout-dialog h2{font-size:27px}
  .flow-intro{font-size:12px}
  .checkout-email input{font-size:16px}
}
.hero h1,.section h2,.final-section h2{margin-top:0}
.trial-terms{color:#9baac0;font-size:12px;line-height:1.8}
.trial-terms a,.final-section p a{color:#b8c8bc;text-decoration:underline;text-underline-offset:4px}
.hero-apps{margin-top:25px}
.card-bottom .circle-button,.dialog-close.circle-button{width:44px;height:44px}
.card-bottom>.circle-button{display:grid;place-items:center;padding:0;flex:none}
.device-switch button{min-height:44px}
.menu-button{min-width:44px;min-height:44px}
.faq-section{grid-template-columns:.75fr 1.25fr;gap:80px;align-items:start;padding-top:0}
.faq-section h2{font-size:clamp(32px,3vw,43px);letter-spacing:-.05em}
.faq-support{display:inline-flex;align-items:center;gap:12px;margin-top:27px;font-size:15px;color:var(--mint);transition:color .2s}
.faq-support .icon{width:18px;height:18px}
.faq-support:hover{color:#e4f6e9}
.faq-list summary{min-height:76px;padding:23px 0;font-size:16px;line-height:1.5;gap:24px}
.faq-list summary .icon{width:17px;height:17px;flex:none}
.faq-list details[open] summary .icon{transform:rotate(180deg)}
.faq-list details>p{font-size:14px;line-height:1.85;max-width:100%;padding:0 34px 24px 0}
.faq-list details>p a{color:var(--mint);text-decoration:underline;text-underline-offset:4px}
.footer{margin-top:70px;border-top:1px solid #2c3950;padding-top:48px}
.footer-content{display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:60px;padding-bottom:42px}
.footer-identity .brand{font-size:27px}
.footer-seller{margin-top:24px;font-size:14px;line-height:1.7;color:#b9c6d5}
.footer-seller span{display:block;margin-top:9px;color:var(--muted);font-size:13px}
.footer-identity address{display:grid;gap:10px;margin-top:19px;font-style:normal;font-size:13px;color:#a7b5c8}
.footer-content h3{font-size:15px;font-weight:600;letter-spacing:0;color:#e5ebf4;margin:6px 0 8px}
.footer-documents,.footer-help{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-content a:not(.brand){font-size:13px;line-height:1.65;color:#a7b5c8;transition:color .2s}
.footer-content a:hover{color:var(--mint)}
.footer-support{display:inline-flex;align-items:center;gap:10px}
.footer-support .icon{width:16px;height:16px;color:var(--mint)}
.footer-help>a:last-child{margin-top:16px}
.footer .footer-bottom{font-size:12px;align-items:center;gap:22px;padding-top:23px}
.footer .back-top{font-size:12px}
@media(max-width:850px){
  .faq-section{grid-template-columns:1fr;gap:32px}
  .faq-support{margin-top:18px;font-size:14px}
  .faq-list summary{font-size:15px;min-height:72px;padding-block:20px;gap:18px}
  .faq-list details>p{font-size:14px;padding-right:22px}
  .footer-content{grid-template-columns:1fr 1fr;gap:35px}
  .footer-identity{grid-column:1/-1}
}
@media(max-width:600px){
  .footer{margin-top:48px;padding-top:34px}
  .footer-content{grid-template-columns:1fr;gap:32px;padding-bottom:32px}
  .footer-identity{grid-column:auto}
  .footer .footer-bottom{flex-wrap:wrap;gap:16px;font-size:10px}
  .footer .back-top{font-size:11px}
  .footer-help>a:last-child{margin-top:4px}
}
.device-picture {
  display: block;
}

@media (max-width: 850px) {
  .devices-visual {
    width: 100%;
    max-width: 520px;
    min-width: 0;
    min-height: 0;
    justify-self: center;
    padding: 37px 0 32px;
  }

  .device-picture {
    position: relative;
    animation: devices-float 9s ease-in-out infinite;
  }

  .devices-visual[data-device-scene] .devices-art {
    display: block;
    width: 100%;
    height: auto;
    transform: none;
    animation: none;
  }

  .device-picture::after {
    content: "";
    position: absolute;
    left: var(--device-x, 28%);
    top: var(--device-y, 60%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d2f0d9;
    box-shadow: 0 0 0 4px #b9ddc426, 0 0 12px #b9ddc47a;
    transform: translate(-50%, -50%);
    transition: left .4s var(--ease), top .4s var(--ease);
    pointer-events: none;
  }

  .devices-visual[data-device-scene=phone] { --device-x: 86%; --device-y: 64%; }
  .devices-visual[data-device-scene=tv] { --device-x: 60%; --device-y: 27%; }

  .device-rail {
    top: 31%;
    left: 9%;
    width: 82%;
    height: 40%;
  }

  .devices-visual .floating-tag {
    padding: 7px 11px;
    font-size: 11px;
    line-height: 1.35;
  }

  .device-tag {
    top: 4px;
    right: 4%;
    transform: rotate(3deg);
  }

  .key-tag {
    bottom: 5px;
    left: 4%;
    transform: rotate(-3deg);
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .js-motion .reveal{
    opacity:1;
    transform:none
  }
  .network-scene canvas{
    transform:none
  }
  .route-ticket{
    translate:none
  }
  .devices-art{
    translate:none
  }
}