:root{
  --ink:#06070f; --ink-2:#0b0d1a; --panel:rgba(255,255,255,.045);
  --line:rgba(160,170,255,.14); --line-strong:rgba(160,170,255,.28);
  --text:#e9ecf8; --muted:#a4abcd; --dim:#7b83a8;
  --gold:#ffce52; --gold-light:#fff7db; --gold-deep:#e0891c;
  --violet:#7a5cff; --violet-soft:#a78bfa;
  --ok:#4ade80;
  --radius:20px; --radius-sm:14px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.9);
  --grad-gold:linear-gradient(135deg,#fff7db 0%,#ffce52 45%,#e0891c 100%);
  --grad-violet:linear-gradient(135deg,#a78bfa 0%,#7a5cff 60%,#4c1d95 100%);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(122,92,255,.30), transparent 62%),
    radial-gradient(760px 520px at 6% 4%, rgba(255,206,82,.10), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(76,29,149,.28), transparent 64%),
    var(--ink);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ── header ── */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(6,7,15,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em;font-size:19px}
.brand img{width:40px;height:40px;filter:drop-shadow(0 6px 18px rgba(255,206,82,.34))}
.brand span b{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--muted)}
.nav-links a{padding:6px 0;position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--grad-gold);transition:right .25s}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{right:0}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;font-weight:750;font-size:16px;
  border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .25s,background .25s;
  white-space:nowrap;
}
.btn-cta{background:var(--grad-gold);color:#241503;box-shadow:0 16px 42px -14px rgba(255,206,82,.8)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 22px 54px -14px rgba(255,206,82,.95)}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:14.5px}

/* ── hero ── */
.hero{position:relative;padding:76px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;
  background:rgba(122,92,255,.14);border:1px solid rgba(167,139,250,.35);
  color:#cfc4ff;font-size:13.5px;font-weight:650;letter-spacing:.02em;margin-bottom:26px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(74,222,128,.18)}
h1{
  font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 22px;font-weight:850;
}
h1 .gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .violet{background:var(--grad-violet);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16.5px,1.6vw,19.5px);color:var(--muted);max-width:56ch;margin:0 0 32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;color:var(--dim);font-size:14.5px}
.hero-meta b{color:var(--gold);font-weight:750}

/* ── phone / chat mockup ── */
.phone{
  position:relative;justify-self:center;width:min(360px,88vw);
  background:linear-gradient(180deg,rgba(23,26,48,.96),rgba(9,11,22,.98));
  border:1px solid var(--line-strong);border-radius:34px;padding:16px;
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.03) inset;
}
.phone::before{
  content:"";position:absolute;inset:-22% -12% auto;height:70%;
  background:radial-gradient(circle at 50% 40%, rgba(122,92,255,.42), transparent 65%);
  filter:blur(46px);z-index:-1;
}
.phone-top{display:flex;align-items:center;gap:11px;padding:6px 8px 14px;border-bottom:1px solid var(--line)}
.phone-top img{width:38px;height:38px;border-radius:50%}
.phone-top .who{font-weight:750;font-size:14.5px;line-height:1.25}
.phone-top .status{font-size:12px;color:var(--ok)}
.chat{display:flex;flex-direction:column;gap:12px;padding:16px 6px 8px;min-height:376px}
.bubble{max-width:88%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.45;position:relative}
.bubble.out{align-self:flex-end;background:linear-gradient(135deg,#2b3568,#1c2350);border-bottom-right-radius:5px}
.bubble.in{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--line);border-bottom-left-radius:5px}
.bubble .file{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#cfd6f7}
.bubble .file .ico{width:30px;height:30px;border-radius:9px;background:rgba(122,92,255,.28);display:grid;place-items:center}
.circle-note{
  width:172px;height:172px;border-radius:50%;align-self:flex-start;
  background:radial-gradient(circle at 34% 30%, #4b3aa8, #161a37 72%);
  border:2px solid rgba(255,206,82,.55);display:grid;place-items:center;
  box-shadow:0 0 0 6px rgba(255,206,82,.07),0 18px 40px -18px rgba(0,0,0,.9);
  position:relative;overflow:hidden;
}
.circle-note::after{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(255,206,82,.42) 78%, transparent 92%);
  animation:spin 3.6s linear infinite;
}
.circle-note .play{position:relative;z-index:2;width:0;height:0;border-left:26px solid var(--gold);border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:8px;filter:drop-shadow(0 0 14px rgba(255,206,82,.8))}
@keyframes spin{to{transform:rotate(360deg)}}
.typing{display:inline-flex;gap:5px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce 1.25s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px}
.stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 22px;backdrop-filter:blur(10px);
}
.stat b{display:block;font-size:27px;letter-spacing:-.03em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--dim);font-size:13.5px}

/* ── sections ── */
section{padding:84px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(29px,3.7vw,44px);line-height:1.12;letter-spacing:-.03em;margin:0 0 16px;font-weight:830}
.sec-head p{color:var(--muted);font-size:17.5px;margin:0}
.tag{
  display:inline-block;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:750;
  letter-spacing:.09em;text-transform:uppercase;color:#cfc4ff;
  background:rgba(122,92,255,.14);border:1px solid rgba(167,139,250,.3);margin-bottom:18px;
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;overflow:hidden;
  transition:transform .25s,border-color .25s,background .25s;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,206,82,.5),transparent 42%,rgba(122,92,255,.5));
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none;
}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);background:rgba(255,255,255,.062)}
.card:hover::after{opacity:1}
.card .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(140deg,rgba(255,206,82,.2),rgba(122,92,255,.2));border:1px solid var(--line);margin-bottom:18px}
.card h3{font-size:19px;margin:0 0 10px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:15px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px 26px}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;top:-18px;left:26px;
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-weight:850;font-size:18px;color:#241503;background:var(--grad-gold);
  box-shadow:0 12px 30px -12px rgba(255,206,82,.9);
}
.step h3{margin:14px 0 10px;font-size:18.5px}
.step p{margin:0;color:var(--muted);font-size:15.3px}

/* formats */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.chip{padding:9px 17px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:14px;color:#cfd6f7;font-weight:600}
.chip.gold{border-color:rgba(255,206,82,.4);color:var(--gold);background:rgba(255,206,82,.09)}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;transition:transform .25s,border-color .25s;
}
.plan:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.plan.featured{
  background:linear-gradient(180deg,rgba(255,206,82,.14),rgba(122,92,255,.10));
  border-color:rgba(255,206,82,.5);box-shadow:0 30px 70px -34px rgba(255,206,82,.6);
}
.plan .name{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:750}
.plan .price{font-size:40px;font-weight:850;letter-spacing:-.035em;margin:12px 0 4px;display:flex;align-items:baseline;gap:8px}
.plan .price small{font-size:15px;font-weight:650;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:10px;font-size:15px;color:var(--muted)}
.plan ul li{display:flex;gap:10px;align-items:flex-start}
.plan ul li::before{content:"✓";color:var(--gold);font-weight:850;flex:none}
.plan .btn{margin-top:auto;width:100%}
.badge-top{position:absolute;top:-13px;right:22px;background:var(--grad-gold);color:#241503;font-size:12px;font-weight:850;padding:6px 14px;border-radius:999px;letter-spacing:.04em}
.plan{position:relative}

/* faq */
.faq{max-width:900px;margin:0 auto;display:grid;gap:12px}
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;overflow:hidden;transition:border-color .2s,background .2s}
details[open]{border-color:var(--line-strong);background:rgba(255,255,255,.06)}
summary{
  cursor:pointer;padding:20px 24px;font-weight:700;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;color:var(--gold);font-weight:600;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details .answer{padding:0 24px 22px;color:var(--muted);font-size:15.5px}

/* cta band */
.cta-band{
  position:relative;border-radius:28px;padding:60px 40px;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,206,82,.16),rgba(122,92,255,.22));
  border:1px solid rgba(255,206,82,.34);
}
.cta-band::before{content:"";position:absolute;inset:-60% 20% auto;height:120%;background:radial-gradient(circle,rgba(255,206,82,.3),transparent 62%);filter:blur(70px)}
.cta-band h2{position:relative;font-size:clamp(27px,3.6vw,42px);margin:0 0 14px;letter-spacing:-.03em}
.cta-band p{position:relative;color:#dfe3fb;margin:0 auto 30px;max-width:56ch}
.cta-band .btn{position:relative}

/* footer */
footer{border-top:1px solid var(--line);padding:52px 0 40px;color:var(--dim);font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
footer h4{color:var(--text);font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;font-weight:750}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a:hover{color:var(--gold)}
.f-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px}
.disclaimer{color:#5f6584;font-size:12.8px;margin-top:14px;max-width:70ch}

.brand span{white-space:nowrap}
h1 .line{display:block}
h1 em{font-style:normal}
.ico svg{width:26px;height:26px}
.btn svg{width:18px;height:18px;flex:none}
.bubble .file .ico{width:30px;height:30px}
.bubble .file .ico svg{width:16px;height:16px}
.bubble.in .spark{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--gold)}
.bubble.in .spark svg{width:15px;height:15px}

h1{font-size:clamp(30px,4.6vw,56px)}
h1 .line{white-space:nowrap}
section[id]{scroll-margin-top:96px}
#features,#how,#pricing,#faq{scroll-margin-top:96px}
.hero-meta{gap:18px;font-size:13.8px;row-gap:6px}
.star{width:13px;height:13px;display:inline-block;vertical-align:-2px;color:var(--gold);flex:none}
.heart{width:14px;height:14px;display:inline-block;vertical-align:-2px;color:#ff6b8b;flex:none}
.plan ul li.with-heart{color:var(--muted)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.vis{opacity:1;transform:none}

/* mobile */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .cards,.pricing,.steps{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links{display:none}
  .hero{padding:52px 0 40px}
  section{padding:62px 0}
  .cards,.pricing,.steps{grid-template-columns:1fr}
  .cta-band{padding:44px 22px}
  .plan .price{font-size:34px}
  .chat{min-height:340px}
  .circle-note{width:150px;height:150px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ─────────────── переключатель языка ─────────────── */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);margin-left:4px;flex:none;
}
.lang-switch a{
  display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:750;
  letter-spacing:.06em;color:var(--muted);transition:background .2s,color .2s;line-height:1;
}
.lang-switch a:hover{color:var(--text);background:rgba(255,255,255,.08)}
.lang-switch a.active{background:var(--grad-gold);color:#241503}
@media (max-width:680px){ .lang-switch a{padding:5px 9px;font-size:12px} }
img{background-color:rgba(255,255,255,.02)}

/* английская версия: заголовок чуть компактнее, чтобы влезал в колонку */
html[lang="en"] h1{font-size:clamp(24px,3.3vw,42px)}
html[lang="en"] .hero-meta{font-size:13.4px}
@media (max-width:680px){ html[lang="en"] h1{font-size:clamp(25px,6.6vw,34px)} }
/* мобильная шапка: бренд + язык в первой строке, кнопка — во второй */
@media (max-width:680px){
  .nav{flex-wrap:wrap;gap:10px}
  .nav .brand{order:1;font-size:17px}
  .nav .brand img{width:34px;height:34px}
  .nav .lang-switch{order:2;margin-left:auto}
  .nav .btn{order:3;width:100%;margin-top:2px}
  .nav-links{display:none}
}
@media (max-width:400px){
  .nav .brand{font-size:16px}
  .lang-switch a{padding:5px 8px;font-size:11.5px}
}
/* обрезаем декоративное свечение в hero, чтобы не появлялся горизонтальный скролл */
.hero{overflow:hidden}
html{overflow-x:hidden}

/* ─────────── логотип: анимации ─────────── */
.brand img{border-radius:50%;transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s}
.brand:hover img{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 0 16px rgba(255,206,82,.6))}

.hero-visual{position:relative;justify-self:center;display:grid;place-items:center;padding:22px 0 0 58px}
.hero-mark{
  position:absolute;top:-52px;left:-44px;z-index:4;
  width:clamp(84px,9vw,126px);aspect-ratio:1/1;border-radius:50%;
  animation:floatY 6.5s ease-in-out infinite;
}
.hero-mark img{
  width:100%;height:100%;border-radius:50%;display:block;position:relative;z-index:2;
  box-shadow:0 0 0 3px rgba(255,206,82,.55),0 0 34px rgba(255,206,82,.35),0 18px 36px rgba(0,0,0,.65);
}
.hero-mark::before{
  content:"";position:absolute;inset:-16%;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,
    rgba(255,206,82,0) 0deg, rgba(255,206,82,.9) 38deg, rgba(255,206,82,0) 108deg,
    rgba(122,92,255,.75) 196deg, rgba(255,206,82,0) 300deg);
  filter:blur(10px);animation:spin 9s linear infinite;
}
.hero-mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.6) 46%,transparent 60%);
  background-size:280% 100%;background-position:180% 0;
  mix-blend-mode:screen;animation:sheen 5.5s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sheen{0%,62%{background-position:180% 0}100%{background-position:-90% 0}}

/* лёгкое «дыхание» золотых акцентов */
.cta-band .btn-cta{animation:pulseGlow 4.5s ease-in-out infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 16px 42px -14px rgba(255,206,82,.8)}
  50%{box-shadow:0 20px 54px -12px rgba(255,206,82,1)}
}

@media (max-width:1000px){
  .hero-mark{top:-30px;left:-14px;width:clamp(78px,15vw,104px)}
}
@media (max-width:680px){
  .hero-mark{top:-26px;left:-8px;width:82px}
}
@media (prefers-reduced-motion:reduce){
  .hero-mark,.hero-mark::before,.hero-mark::after,.cta-band .btn-cta,.brand img{animation:none!important}
}