:root{
  --ink:#030f2b; --deep:#07225c; --panel:#0b2f7a; --cyan:#19d3ff; --lime:#c6f81c; --mint:#18e0a8;
  --text:#e9f0ff; --muted:#9db3de; --line:rgba(120,170,255,.22);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,.brand,.btn{font-family:Montserrat,system-ui,sans-serif}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:12px var(--pad);background:rgba(3,15,43,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;margin-right:auto}
.mark{width:26px;height:26px;border-radius:8px 8px 8px 2px;background:linear-gradient(135deg,var(--cyan),#2b5cff)}
.top nav{display:flex;gap:22px;font-size:15px;color:var(--muted)}
.top nav a{text-decoration:none}.top nav a:hover{color:#fff}

.btn{display:inline-block;padding:16px 30px;border-radius:14px;background:linear-gradient(90deg,var(--lime),var(--mint));color:#04163d;font-weight:800;font-size:16px;text-decoration:none;text-align:center;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(24,224,168,.3)}
.btn-sm{padding:10px 18px;font-size:14px;border-radius:10px}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{box-shadow:none;border-color:var(--cyan)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(40px,7vw,96px) var(--pad);max-width:1240px;margin:auto;background:radial-gradient(60% 70% at 85% 40%,rgba(25,211,255,.16),transparent 70%)}

/* Плашки над заголовком */
.note-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.note {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

/* Переливающаяся градиентная плашка */
.ai-bot-note {
  cursor: pointer;
  font-weight: 800;
  color: #04163d; /* Тёмный текст для максимального контраста */
  border: none;
  
  /* Плавный градиент из цветов сайта: салатовый ➔ мятный ➔ голубой ➔ салатовый */
  background: linear-gradient(135deg, var(--lime), var(--mint), var(--cyan), var(--lime));
  background-size: 300% 300%;
  
  /* Запуск бесконечной анимации перелива */
  animation: gradientShift 3s ease infinite;
  box-shadow: 0 0 12px rgba(24, 224, 168, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Эффект наведения */
.ai-bot-note:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(25, 211, 255, 0.7);
}

/* Анимация смещения градиента */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1{margin:0 0 20px;font-size:clamp(32px,5vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.02em}
.lead{max-width:56ch;margin:0 0 30px;color:var(--muted);font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.fine{margin:0;max-width:62ch;font-size:13.5px;line-height:1.5;color:var(--muted)}

.phone{position:relative;justify-self:center;width:min(100%,340px);aspect-ratio:9/16;border-radius:34px;padding:8px;background:#0d2f78;box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,100,255,.35)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:27px;background:var(--deep)}
.sound{position:absolute;right:20px;bottom:20px;padding:8px 14px;border:0;border-radius:99px;background:rgba(3,15,43,.78);color:#fff;font:600 13px system-ui;cursor:pointer}

.block{max-width:1240px;margin:auto;padding:clamp(40px,6vw,80px) var(--pad)}
h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);line-height:1.15;font-weight:800;letter-spacing:-.01em}
.sub{margin:0 0 28px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:18px}
.card{overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--deep);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.card img{width:100%;height:auto}

.steps ol{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 32px;padding:0}
.steps li{counter-increment:s;padding:24px;border-radius:16px;background:var(--deep);border:1px solid var(--line)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:50%;background:var(--cyan);color:var(--ink);font:800 16px Montserrat,sans-serif}
.steps strong{display:block;margin-bottom:6px;font-size:18px}

.risk{max-width:1240px;border-left:4px solid #ffb020;background:rgba(255,176,32,.07);border-radius:0 16px 16px 0;margin:0 var(--pad);padding:28px clamp(20px,3vw,40px)}
.risk p{margin:0;max-width:90ch;color:#f3e6c8}

footer{max-width:1240px;margin:0 auto;padding:40px var(--pad) 110px;color:var(--muted);font-size:13.5px;line-height:1.6}
footer p{margin:0;max-width:100ch}

.sticky{display:none}
@media (max-width:860px){
  .top nav{display:none}
  .hero{grid-template-columns:1fr}
  .phone{order:-1;width:min(70%,280px)}
  .grid,.steps ol{grid-template-columns:1fr}
  .sticky{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.5)}
}