:root {
  --bg: #070a0f;
  --panel: #0d131d;
  --panel-soft: #111a27;
  --line: rgba(129, 161, 204, 0.18);
  --text: #f4f7fb;
  --muted: #8c9bae;
  --blue: #4c8dff;
  --cyan: #53e3d1;
  --lime: #b7f34b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 52% 7%, rgba(41, 93, 177, 0.17), transparent 29rem),
    linear-gradient(180deg, #080b11 0%, #06090e 45%, #080c12 100%);
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.space { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .75; }
.space::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.space span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; animation: star 4s ease-in-out infinite; }
.space span:nth-child(1){left:8%;top:18%}.space span:nth-child(2){left:20%;top:52%;animation-delay:.8s}.space span:nth-child(3){left:46%;top:10%;animation-delay:1.6s}.space span:nth-child(4){left:72%;top:31%;animation-delay:2.3s}.space span:nth-child(5){left:91%;top:14%;animation-delay:1.1s}.space span:nth-child(6){left:87%;top:68%;animation-delay:3s}
@keyframes star { 50% { opacity: .18; transform: scale(.55); } }

.site-header, footer { width: min(1380px, calc(100% - 48px)); margin: 0 auto; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; letter-spacing: .09em; font-weight: 700; }
.brand b { color: var(--cyan); }
.brand-mark { width: 29px; height: 29px; border: 1px solid rgba(83,227,209,.6); display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px; transform: rotate(45deg); box-shadow: 0 0 22px rgba(83,227,209,.12); }
.brand-mark i { background: var(--cyan); border-radius: 1px; }
.site-header nav { display: flex; gap: 34px; color: #a9b4c3; font-size: 14px; }
.site-header nav a { transition: color .2s; }
.site-header nav a:hover { color: #fff; }
.header-login { border: 1px solid var(--line); border-radius: 8px; padding: 11px 17px; font-size: 13px; background: rgba(255,255,255,.025); }
.header-login:hover { border-color: var(--blue); }

main { width: min(1380px, calc(100% - 48px)); margin: 0 auto; }
.hero { min-height: 760px; display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: 28px; padding: 70px 0 50px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid rgba(83,227,209,.2); border-radius: 999px; color: #b8c5d4; background: rgba(83,227,209,.04); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow span,.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
h1 { margin: 28px 0 24px; font-size: clamp(52px, 5vw, 82px); line-height: .98; letter-spacing: -.055em; max-width: 760px; }
h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(120,180,255,.9); text-shadow: 0 0 34px rgba(76,141,255,.16); }
.hero-copy > p { max-width: 660px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.button { min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: 14px; border-radius: 9px; padding: 0 21px; font-size: 14px; font-weight: 700; transition: transform .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: linear-gradient(135deg, #367cf3, #2458bc); box-shadow: 0 14px 40px rgba(36,88,188,.25), inset 0 1px rgba(255,255,255,.22); }
.button.primary:hover { box-shadow: 0 18px 50px rgba(36,88,188,.4); }
.button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #c5cfda; }
.button.secondary:hover { border-color: rgba(83,227,209,.55); }
.hero-facts { display: flex; gap: 0; margin-top: 48px; }
.hero-facts div { min-width: 145px; padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line); }
.hero-facts div:last-child { border: 0; }
.hero-facts strong { display: block; font-size: 23px; color: #fff; }
.hero-facts span { display: block; color: #69788b; font-size: 11px; margin-top: 5px; }

.network { position: relative; height: 620px; min-width: 0; }
.network-glow { position: absolute; width: 370px; height: 370px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(48,109,230,.18), transparent 66%); filter: blur(8px); }
.network-lines { position: absolute; inset: 15px 0; width: 100%; height: calc(100% - 30px); overflow: visible; }
.network-lines path { fill: none; stroke: rgba(57,119,245,.52); stroke-width: 1.5; stroke-dasharray: 8 6; animation: dash 16s linear infinite; }
.network-lines circle { fill: #70a5ff; filter: drop-shadow(0 0 7px #4c8dff); }
@keyframes dash { to { stroke-dashoffset: -280; } }
.integration { position: absolute; width: 205px; min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(86,130,202,.25); border-radius: 13px; background: linear-gradient(145deg, rgba(22,32,49,.95), rgba(11,16,25,.96)); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.integration-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #fff; font-weight: 900; font-size: 19px; }
.integration b,.integration small { display: block; }.integration b{font-size:14px}.integration small{margin-top:5px;color:#718196;font-size:11px}
.integration.yandex { left: 2%; top: 13%; }.integration.yandex .integration-icon{background:#f4cc27;color:#111}
.integration.ozon { right: 1%; top: 13%; }.integration.ozon .integration-icon{background:#1769ff}
.integration.wb { left: 2%; bottom: 12%; }.integration.wb .integration-icon{background:linear-gradient(145deg,#b128e1,#7e24bd)}
.integration.external-api { right: 1%; bottom: 12%; }.integration.external-api .integration-icon{background:linear-gradient(145deg,#ff7a38,#ff4d21);font-size:11px}
.core { position: absolute; left: 50%; top: 50%; width: 182px; height: 182px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(89,145,255,.45); border-radius: 38px; background: linear-gradient(145deg,#17386f,#0c1b36); box-shadow: 0 0 0 10px rgba(37,88,188,.05), 0 25px 80px rgba(26,88,204,.28), inset 0 1px rgba(255,255,255,.2); }
.core-ring { position: absolute; inset: -22px; border: 1px dashed rgba(83,227,209,.24); border-radius: 54px; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.core-label { font-size: 47px; font-weight: 900; letter-spacing: -.06em; }.core b{font-size:12px;letter-spacing:.18em;margin-top:5px}.core small{color:var(--cyan);font-size:10px;margin-top:9px;text-transform:uppercase}
.pulse { position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);border:1px solid rgba(76,141,255,.18);border-radius:50%;animation:pulse 3.5s ease-out infinite}.pulse.p2{animation-delay:1.7s}@keyframes pulse{to{width:430px;height:430px;opacity:0}}

.signal-strip { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 17px; border: 1px solid var(--line); border-radius: 12px; color: #8898ab; font-size: 12px; letter-spacing: .04em; background: rgba(13,19,29,.78); }
.signal-strip strong{color:#d7e0ea}.signal-strip i{width:1px;height:22px;background:var(--line)}.signal-strip b{color:#3d78e7}
.section { padding: 140px 0 20px; }
.section-heading span { color: var(--cyan); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.section-heading h2,.security h2,.final-cta h2 { margin: 18px 0 50px; font-size: clamp(36px,4vw,58px); line-height: 1.06; letter-spacing: -.045em; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.feature { min-height: 330px; position: relative; overflow: hidden; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,rgba(17,26,39,.95),rgba(9,14,22,.95)); }
.feature::after { content:"";position:absolute;width:220px;height:220px;right:-100px;bottom:-130px;border:1px solid rgba(76,141,255,.14);border-radius:50%;box-shadow:0 0 60px rgba(76,141,255,.07) }
.feature-wide { grid-column: span 2; }
.feature-index { position:absolute;right:22px;top:20px;color:#33445a;font-size:12px;letter-spacing:.15em }
.feature-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:rgba(76,141,255,.12);border:1px solid rgba(76,141,255,.24);color:#79a9ff;font-size:25px }
.feature h3 { margin: 32px 0 12px; font-size: 23px; }.feature p{max-width:600px;color:var(--muted);line-height:1.65;font-size:14px}
.mini-flow { position:absolute;left:32px;bottom:30px;display:flex;align-items:center;gap:10px;font-size:11px;color:#6f7e91 }.mini-flow i{width:40px;height:1px;background:#263c60}.mini-flow .active{color:var(--cyan)}
.limit-card { position:absolute;right:30px;bottom:28px;width:255px;padding:17px;border:1px solid rgba(83,227,209,.2);background:rgba(83,227,209,.04);border-radius:11px }.limit-card span,.limit-card strong,.limit-card i{display:block}.limit-card span{color:var(--cyan);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.limit-card strong{font-size:13px;margin-top:10px}.limit-card i{font-style:normal;color:#718196;font-size:10px;margin-top:6px}
.timeline { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:0 }.timeline article{position:relative;padding:37px 28px 20px;border-right:1px solid var(--line)}.timeline article:last-child{border:0}.timeline article::before{content:"";position:absolute;width:9px;height:9px;left:28px;top:-5px;border-radius:50%;background:var(--blue);box-shadow:0 0 15px var(--blue)}.timeline b{color:#557bb5;font-size:11px;letter-spacing:.12em}.timeline h3{font-size:19px;margin:22px 0 9px}.timeline p{color:var(--muted);font-size:13px;line-height:1.55}
.security { margin: 140px 0 20px; padding: 60px; border:1px solid rgba(83,227,209,.2);border-radius:18px;background:radial-gradient(circle at 85% 20%,rgba(83,227,209,.09),transparent 28rem),#0b121b;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}.security h2{font-size:45px;margin-bottom:20px}.security p{color:var(--muted);max-width:700px;line-height:1.65}.security-badge{color:var(--cyan);font-size:11px;letter-spacing:.15em}.security-list{display:grid;gap:13px}.security-list span{padding:16px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.018);font-size:13px}.security-list i{font-style:normal;color:var(--cyan);margin-right:10px}
.final-cta { text-align:center;padding:150px 20px }.final-cta>span{color:var(--cyan);font-size:12px;letter-spacing:.13em;text-transform:uppercase}.final-cta h2{margin-bottom:34px}.final-cta .button{display:inline-flex}
footer { min-height:120px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#5f6e80;font-size:12px }footer .brand{color:#dbe4ee}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s ease; }.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 1050px) {
  .site-header nav { display:none; }.hero{grid-template-columns:1fr;padding-top:80px}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.eyebrow{margin:auto}.hero-actions,.hero-facts{justify-content:center}.network{height:590px}.feature-grid{grid-template-columns:1fr 1fr}.feature-wide{grid-column:span 2}.timeline{grid-template-columns:1fr 1fr}.timeline article:nth-child(2){border-right:0}.security{grid-template-columns:1fr}
}
@media (max-width: 700px) {
  .site-header,main,footer{width:min(100% - 28px,1380px)}.site-header{height:76px}.brand{font-size:12px}.header-login{padding:9px 11px}.hero{padding-top:60px;min-height:auto}.hero-copy{text-align:left}.eyebrow{margin:0}h1{font-size:48px}.hero-actions{justify-content:flex-start;flex-direction:column}.hero-facts{justify-content:flex-start;overflow:auto}.hero-facts div{min-width:125px;padding-right:16px;margin-right:16px}.network{height:560px;margin-top:20px}.network-lines{display:none}.integration{width:155px;min-height:66px;padding:10px}.integration-icon{width:36px;height:36px}.integration b{font-size:12px}.integration small{font-size:9px}.integration.yandex,.integration.wb{left:0}.integration.ozon,.integration.external-api{right:0}.core{width:145px;height:145px}.core-label{font-size:38px}.signal-strip{margin-top:40px;padding:18px;flex-wrap:wrap}.signal-strip i{display:none}.section{padding-top:100px}.section-heading h2{font-size:39px}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto}.feature{min-height:320px}.mini-flow{right:20px;left:20px}.mini-flow i{flex:1}.limit-card{position:relative;right:auto;bottom:auto;margin-top:24px;width:100%}.timeline{grid-template-columns:1fr}.timeline article{border-right:0;border-bottom:1px solid var(--line)}.security{margin-top:100px;padding:30px 22px}.security h2{font-size:36px}.final-cta{padding:110px 5px}footer{padding:30px 0;flex-direction:column;gap:18px;text-align:center}
}

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