:root {
  --bg:#090e1c;
  --bg2:#10182b;
  --text:#f5f7ff;
  --muted:#a2aec7;
  --accent:#a68bff;
  --cyan:#64e2e6;
  --line:#29324b}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,sans-serif}

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

.container {
  width:min(1160px,calc(100% - 44px));
  margin:auto}

.header {
  position:sticky;
  top:0;
  z-index:20;
  background:#090e1ce8;
  backdrop-filter:blur(18px);
  border-bottom:1px solid #ffffff12}

.nav {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}

.logo {
  font-size:21px;
  letter-spacing:.08em;
  font-weight:900;
  white-space:nowrap}

.logo span:not(.logo-icon) {
  color:var(--accent)}

.logo small {
  font-size:9px;
  display:block;
  letter-spacing:.3em;
  color:var(--muted);
  line-height:1}

.logo-icon {
  color:var(--cyan);
  font-size:28px;
  margin-right:7px}

.nav nav {
  display:flex;
  gap:27px;
  font-size:13px;
  color:#c3cbe0}

.nav nav a:hover {
  color:white}

.nav-cta {
  font-size:13px;
  padding:11px 18px;
  border:1px solid #7667b3;
  border-radius:9px}

.hero {
  overflow:hidden;
  background:radial-gradient(ellipse at 78% 25%,#34245775,transparent 43%),radial-gradient(ellipse at 10% 65%,#0e4b6060,transparent 50%);
  border-bottom:1px solid var(--line)}

.hero-grid {
  min-height:650px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:42px;
  padding:75px 0}

.eyebrow,.kicker {
  color:var(--cyan);
  letter-spacing:.17em;
  font-size:12px;
  font-weight:750}

.pulse,.green-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#53e3ad;
  box-shadow:0 0 15px #53e3ad;
  margin-right:8px}

h1,h2,h3,p {
  margin-top:0}

h1 {
  font-size:clamp(39px,4.5vw,65px);
  line-height:1.11;
  letter-spacing:-.045em;
  margin:24px 0}

h1 em {
  font-style:normal;
  background:linear-gradient(95deg,var(--cyan),var(--accent));
  background-clip:text;
  color:transparent}

h2 {
  font-size:clamp(29px,3.4vw,43px);
  line-height:1.18;
  letter-spacing:-.03em;
  margin:18px 0 24px}

.lead {
  font-size:17px;
  color:#c0c9de;
  max-width:620px}

.hero-actions,.demo-actions {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin-top:30px}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:15px 23px;
  border-radius:12px;
  font-size:14px;
  font-weight:750;
  transition:transform .2s}

.btn:hover {
  transform:translateY(-3px)}

.primary {
  background:linear-gradient(100deg,#8e7dfc,#53cad8);
  color:#071021}

.secondary {
  border:1px solid #64708c;
  background:#ffffff08}

.stats {
  display:flex;
  gap:36px;
  margin-top:50px}

.stats div {
  display:flex;
  flex-direction:column}

.stats strong {
  font-size:26px;
  line-height:1.2}

.stats span {
  font-size:11px;
  color:var(--muted)}

.hero-art {
  height:510px;
  position:relative;
  display:grid;
  place-items:center}

.orbit {
  position:absolute;
  border:1px solid #8f80db45;
  border-radius:50%;
  transform:rotate(-25deg)}

.orbit-a {
  width:420px;
  height:420px}

.orbit-b {
  width:310px;
  height:310px}

.figure {
  position:relative;
  width:240px;
  height:360px;
  filter:drop-shadow(0 0 65px #ad89ff65)}

.head {
  position:absolute;
  top:30px;
  left:83px;
  width:75px;
  height:87px;
  background:linear-gradient(145deg,#77c8da,#6557ab);
  border-radius:48% 48% 43% 43%}

.body-shape {
  position:absolute;
  top:117px;
  left:22px;
  width:196px;
  height:240px;
  background:linear-gradient(135deg,#68d1d3,#7158c8 60%,#403577);
  clip-path:polygon(29% 0,70% 0,100% 28%,83% 100%,16% 100%,0 28%);
  border-radius:30px}

.glass {
  position:absolute;
  background:#18243fdb;
  border:1px solid #8998cc5c;
  box-shadow:0 20px 50px #0005;
  backdrop-filter:blur(12px);
  border-radius:15px;
  padding:18px;
  z-index:2}

.panel-one {
  left:0;
  top:95px;
  display:flex;
  flex-direction:column}

.panel-one span {
  color:var(--cyan);
  font-size:35px}

.panel-one b {
  font-size:12px;
  letter-spacing:.1em}

.panel-one small {
  font-size:10px;
  color:var(--muted)}

.panel-two {
  right:0;
  bottom:110px;
  font-size:11px;
  letter-spacing:.1em}

.hero-caption {
  position:absolute;
  bottom:24px;
  font-size:10px;
  letter-spacing:.3em;
  color:#8c9ab9}

.section {
  padding:100px 0}

.section.alt {
  background:var(--bg2)}

.section-top {
  max-width:780px}

.section-top>p,.split p,.safety p,.demo p {
  color:var(--muted);
  font-size:17px}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:45px}

.card {
  padding:32px;
  background:linear-gradient(145deg,#17213a,#101728);
  border:1px solid var(--line);
  border-radius:18px}

.card-icon {
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:#5d4eaa33;
  color:var(--cyan);
  font-size:27px;
  border-radius:13px;
  margin-bottom:25px}

.card h3 {
  font-size:20px}

.card p {
  color:var(--muted);
  font-size:14px;
  margin-bottom:0}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:90px}

.checklist {
  list-style:none;
  padding:0;
  margin:25px 0}

.checklist li {
  margin:14px 0;
  color:#d7def1}

.checklist li:before {
  content:'✓';
  color:var(--cyan);
  margin-right:14px}

.feature-box {
  border:1px solid #516087;
  border-radius:19px;
  background:#101b32;
  overflow:hidden;
  box-shadow:0 30px 100px #0005}

.feature-head,.feature-bottom {
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.1em;
  color:#aebbd7}

.feature-head {
  border-bottom:1px solid var(--line)}

.feature-bottom {
  border-top:1px solid var(--line)}

.preview-art {
  height:330px;
  display:grid;
  place-items:center;
  position:relative;
  background:radial-gradient(circle,#423a89,transparent 65%)}

.preview-ring {
  position:absolute;
  width:250px;
  height:250px;
  border:1px dashed #a59aff;
  border-radius:50%}

.preview-shirt {
  display:grid;
  place-items:center;
  font-size:80px;
  color:#d6faff;
  width:150px;
  height:190px;
  background:linear-gradient(135deg,#4dd4cf,#7d61e1);
  clip-path:polygon(25% 0,75% 0,100% 20%,84% 43%,75% 37%,75% 100%,25% 100%,25% 37%,16% 43%,0 20%)}

.safety {
  border:1px solid #4c4a77;
  border-radius:22px;
  padding:55px;
  background:radial-gradient(circle at 95% 0,#3c2e69,transparent 55%),#141b2f}

.safety p {
  max-width:880px}

.demo {
  text-align:center;
  max-width:780px}

.demo-actions {
  justify-content:center}

.demo-note {
  font-size:12px!important;
  margin-top:25px}

.faq {
  max-width:850px}

.faq details {
  border-bottom:1px solid var(--line);
  padding:21px 0}

.faq summary {
  font-weight:700;
  cursor:pointer;
  font-size:17px}

.faq details p {
  color:var(--muted);
  padding-top:14px}

footer {
  background:#070b15;
  border-top:1px solid var(--line)}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:50px 0}

.footer p,.footer small {
  font-size:12px;
  color:var(--muted);
  max-width:300px}

.footer>div:nth-child(2) {
  display:flex;
  gap:17px;
  font-size:12px;
  color:#bcc7de}

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

.hero-grid,.split {
  grid-template-columns:1fr}

.hero-grid {
  padding:65px 0 35px}

.hero-art {
  height:390px}

.cards {
  grid-template-columns:1fr}

.split {
  gap:30px}

.section {
  padding:70px 0}

.footer {
  flex-wrap:wrap}

.orbit-a {
  width:340px;
  height:340px}

.orbit-b {
  width:260px;
  height:260px}

}

@media(max-width:520px) {
  .container {
  width:min(100% - 30px,1160px)}

.nav {
  min-height:65px}

.nav-cta {
  font-size:11px;
  padding:9px}

.logo {
  font-size:17px}

.hero-art {
  height:350px}

.figure {
  transform:scale(.8)}

.panel-one {
  left:0;
  top:45px}

.panel-two {
  right:0;
  bottom:55px}

.stats {
  gap:18px}

.stats strong {
  font-size:20px}

.safety {
  padding:28px}

.btn {
  width:100%}

.hero-actions,.demo-actions {
  flex-direction:column}

.footer {
  display:block}

.footer>div:nth-child(2) {
  margin:20px 0}

}

/* Дополнительный информационный раздел */
.editorial {
  max-width: 920px;
}
.editorial h2 {
  max-width: 780px;
}
.editorial h3 {
  margin: 30px 0 12px;
  font-size: clamp(21px, 2.4vw, 28px);
}
.editorial p {
  margin: 14px 0;
  line-height: 1.85;
}