
    :root{
      --navy:#03040d;
      --navy2:#0b1130;
      --blurple:#5865f2;
      --blurple-2:#7c8aff;
      --blurple-dark:#4752c4;
      --ice:#8ea2ff;
      --white:#fff;
      --grey:#a8b1d4;
      --grey-2:#7b85ad;
      --green:#57f287;
      --yellow:#fee75c;
      --glass:rgba(255,255,255,.045);
      --glass-b:rgba(255,255,255,.09);
      --gg:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:var(--gg);color:var(--white);background:var(--navy);
      -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
    }
    a{color:inherit;text-decoration:none}
    .wrap{max-width:1160px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

    /* ========== КРАСИВЫЙ ФОН ========== */
    .bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
    /* глубокий градиент-подложка */
    .bgfx .layer-base{
      position:absolute;inset:0;
      background:
        radial-gradient(1100px 700px at 12% -8%, rgba(70,84,220,.20), transparent 60%),
        radial-gradient(900px 620px at 88% 4%, rgba(56,72,200,.13), transparent 58%),
        radial-gradient(1000px 800px at 50% 115%, rgba(30,42,140,.18), transparent 62%),
        radial-gradient(700px 500px at 78% 82%, rgba(110,124,240,.06), transparent 60%),
        linear-gradient(180deg,#03040d 0%,#05071a 45%,#02030a 100%);
    }
    /* тонкая сетка */
    .bgfx .layer-grid{
      position:absolute;inset:0;opacity:.5;
      background-image:
        linear-gradient(rgba(142,162,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142,162,255,.035) 1px, transparent 1px);
      background-size:56px 56px;
      mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 75%);
      -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 75%);
    }
    /* мягкие северные сияния */
    .bgfx .aurora{
      position:absolute;border-radius:50%;filter:blur(100px);opacity:.30;
      animation:drift 22s ease-in-out infinite alternate;
    }
    .bgfx .a1{width:640px;height:420px;left:-160px;top:-80px;background:rgba(88,101,242,.28)}
    .bgfx .a2{width:560px;height:380px;right:-140px;top:60px;background:rgba(84,120,255,.15);animation-delay:-7s}
    .bgfx .a3{width:720px;height:440px;left:30%;bottom:-220px;background:rgba(60,80,220,.20);animation-delay:-13s}
    @keyframes drift{
      0%{transform:translate(0,0) scale(1)}
      100%{transform:translate(60px,-40px) scale(1.12)}
    }
    /* «звёзды» */
    .bgfx .stars{
      position:absolute;inset:0;
      background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 60% 18%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 82% 46%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.3), transparent),
        radial-gradient(1.2px 1.2px at 72% 82%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 12% 86%, rgba(255,255,255,.28), transparent),
        radial-gradient(1.3px 1.3px at 92% 12%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 33% 12%, rgba(255,255,255,.3), transparent);
      animation:twinkle 6s ease-in-out infinite alternate;
    }
    @keyframes twinkle{0%{opacity:.5}100%{opacity:1}}
    /* зерно */
    .bgfx .noise{
      position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    }

    /* ========== NAV ========== */
    header.nav{
      position:sticky;top:0;z-index:60;
      background:rgba(2,3,10,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(142,162,255,.12);
    }
    .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
    .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18.5px;letter-spacing:-.3px}
    .brand-mark{
      width:38px;height:38px;border-radius:12px;
      background:linear-gradient(135deg,var(--blurple-2),var(--blurple-dark));
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 8px 22px rgba(88,101,242,.45), inset 0 1px 0 rgba(255,255,255,.25);
    }
    .brand-mark svg{width:22px;height:18px;fill:#fff}
    .nav-links{display:flex;gap:28px;font-size:15px;font-weight:600}
    .nav-links a{color:var(--grey);transition:.15s}
    .nav-links a:hover{color:#fff}
    .nav-cta{
      background:linear-gradient(135deg,#fff,#e7e9ff);color:#1b1f4b;
      font-weight:800;font-size:14.5px;padding:11px 24px;border-radius:30px;
      box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.18s;display:inline-flex;align-items:center;gap:8px;
    }
    .nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4);color:var(--blurple)}
    .burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
    .burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

    /* ========== HERO ========== */
    .hero{padding:36px 0 0;text-align:center}
    .badge{
      display:inline-flex;align-items:center;gap:9px;
      background:rgba(87,242,135,.09);border:1px solid rgba(87,242,135,.3);
      color:#9dfcbb;padding:8px 18px;border-radius:100px;
      font-size:13.5px;font-weight:700;margin-bottom:26px;
      backdrop-filter:blur(10px);
    }
    .badge .d{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite;box-shadow:0 0 12px var(--green)}
    @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
    .hero h1{
      font-size:clamp(40px,6.6vw,72px);font-weight:900;line-height:1.04;
      letter-spacing:-2.2px;margin-bottom:20px;
    }
    .hero h1 .grad{
      background:linear-gradient(120deg,#fff 20%,var(--ice) 55%,var(--blurple-2) 90%);
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    }
    .hero .lede{font-size:19px;color:var(--grey);max-width:620px;margin:0 auto 40px;line-height:1.55}
    .dl-hero{
      display:inline-flex;align-items:center;gap:13px;
      background:linear-gradient(135deg,#fff,#e9ebff);color:#141840;
      font-size:19px;font-weight:900;
      padding:20px 58px;border-radius:44px;
      box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.4),0 0 60px rgba(142,162,255,.25);
      transition:.2s;
    }
    .dl-hero:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 26px 64px rgba(0,0,0,.5),0 0 80px rgba(142,162,255,.4);color:var(--blurple)}
    .dl-hero svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .dl-note{margin-top:17px;font-size:14.5px;color:var(--grey-2)}
    .dl-note b{color:#fff}
    .dl-meta{
      margin-top:12px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
      font-size:13px;color:var(--grey-2);
    }
    .dl-meta span{display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--glass-b);padding:7px 14px;border-radius:100px;backdrop-filter:blur(8px)}

    /* мокап приложения */
    .mockup-shell{max-width:960px;margin:58px auto -120px;padding:0 12px;position:relative;z-index:3}
    .mockup-glow{
      position:absolute;inset:6% 10% 30%;border-radius:40px;
      background:radial-gradient(closest-side,rgba(88,101,242,.5),transparent);
      filter:blur(50px);z-index:-1;
    }
    .mockup{
      background:rgba(6,8,24,.84);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border-radius:18px 18px 0 0;overflow:hidden;
      border:1px solid rgba(142,162,255,.18);border-bottom:0;
      box-shadow:0 -10px 70px rgba(0,0,0,.55);
    }
    .mockup-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;background:rgba(6,9,28,.7);border-bottom:1px solid rgba(142,162,255,.1)}
    .dot{width:11px;height:11px;border-radius:50%}
    .dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
    .mockup-title{margin-left:12px;font-size:12px;color:var(--grey-2)}
    .mockup-body{display:flex;min-height:330px}
    .m-side{width:58px;background:rgba(6,9,28,.6);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:11px}
    .m-srv{width:38px;height:38px;border-radius:50%}
    .m-srv:nth-child(1){background:linear-gradient(135deg,#5865f2,#7c8aff)}
    .m-srv:nth-child(2){background:linear-gradient(135deg,#3ba55d,#57f287)}
    .m-srv:nth-child(3){background:linear-gradient(135deg,#faa61a,#fee75c)}
    .m-srv:nth-child(4){background:linear-gradient(135deg,#ed4245,#ff7a7d)}
    .m-channels{width:205px;background:rgba(13,18,48,.65);padding:18px 12px;border-right:1px solid rgba(142,162,255,.08)}
    .m-ch{font-size:13px;color:var(--grey-2);padding:7px 10px;border-radius:7px;margin-bottom:5px;font-weight:600}
    .m-ch.active{background:rgba(88,101,242,.3);color:#fff;box-shadow:inset 0 0 0 1px rgba(142,162,255,.25)}
    .m-chat{flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:15px;text-align:left}
    .m-msg{display:flex;gap:12px;align-items:flex-start}
    .m-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}
    .m-av.a{background:linear-gradient(135deg,#5865f2,#8ea2ff)}
    .m-av.b{background:linear-gradient(135deg,#3ba55d,#8ff0b3)}
    .m-av.c{background:linear-gradient(135deg,#faa61a,#ffe28a)}
    .m-name{font-weight:800;font-size:13.5px;margin-bottom:2px}
    .m-name .t{font-weight:500;color:var(--grey-2);font-size:11px;margin-left:8px}
    .m-text{color:#d7dcf5;font-size:13.5px;line-height:1.45}
    .m-voice{
      display:inline-flex;align-items:center;gap:6px;margin-top:5px;margin-left:8px;
      background:rgba(87,242,135,.12);color:var(--green);
      font-size:11px;font-weight:800;padding:5px 11px;border-radius:10px;
      border:1px solid rgba(87,242,135,.25);
    }

    /* ========== SECTIONS ========== */
    section{padding:150px 0 90px;position:relative;z-index:2}
    .sec-head{text-align:center;margin-bottom:50px}
    .kicker{
      font-size:12.5px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase;
      color:var(--ice);margin-bottom:12px;
    }
    h2{font-size:clamp(30px,4.6vw,44px);font-weight:900;letter-spacing:-1.3px;line-height:1.1}
    .sec-head p{color:var(--grey);font-size:17px;max-width:600px;margin:14px auto 0}

    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:54px}
    .stat{
      background:var(--glass);border:1px solid var(--glass-b);border-radius:20px;
      padding:28px 14px;text-align:center;backdrop-filter:blur(14px);
      box-shadow:0 14px 40px rgba(0,0,0,.25);transition:.22s;
    }
    .stat:hover{transform:translateY(-4px);border-color:rgba(142,162,255,.4)}
    .stat .n{font-size:32px;font-weight:900;background:linear-gradient(135deg,#fff,var(--ice));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .stat .l{font-size:13.5px;color:var(--grey-2);margin-top:4px;font-weight:600}

    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
    .card{
      background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;
      padding:30px;backdrop-filter:blur(14px);
      box-shadow:0 16px 44px rgba(0,0,0,.25);transition:.25s;position:relative;overflow:hidden;
    }
    .card::before{
      content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
      background:radial-gradient(400px 180px at 20% 0%,rgba(142,162,255,.12),transparent);
      opacity:0;transition:.3s;
    }
    .card:hover{transform:translateY(-6px);border-color:rgba(142,162,255,.45);box-shadow:0 24px 60px rgba(20,26,80,.55)}
    .card:hover::before{opacity:1}
    .card .icon{
      width:52px;height:52px;border-radius:16px;margin-bottom:18px;
      display:flex;align-items:center;justify-content:center;font-size:26px;
      background:linear-gradient(135deg,rgba(88,101,242,.35),rgba(124,138,255,.15));
      border:1px solid rgba(142,162,255,.3);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
    }
    .card h3{font-size:19.5px;font-weight:800;margin-bottom:8px}
    .card p{color:var(--grey);font-size:15px;line-height:1.55}

    /* сплит */
    .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
    .split h2{margin-bottom:16px}
    .split .txt p{color:var(--grey);font-size:16.5px;line-height:1.6;margin-bottom:26px}
    .visual{
      border-radius:24px;padding:28px;min-height:300px;
      background:linear-gradient(140deg,rgba(88,101,242,.28),rgba(11,17,48,.6));
      border:1px solid rgba(142,162,255,.22);
      backdrop-filter:blur(16px);
      display:flex;flex-direction:column;justify-content:center;gap:14px;
      box-shadow:0 24px 70px rgba(0,0,0,.4);
    }
    .voice-card{
      background:rgba(6,10,30,.55);border:1px solid rgba(142,162,255,.15);
      border-radius:16px;padding:17px 19px;display:flex;align-items:center;gap:14px;
      backdrop-filter:blur(10px);
    }
    .voice-card .vic{
      width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--green),#2fae5c);
      display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;
      box-shadow:0 8px 20px rgba(87,242,135,.25);
    }
    .voice-card b{display:block;font-size:15px}
    .voice-card small{color:var(--grey-2);font-size:12.5px}
    .bars{display:flex;gap:4px;align-items:flex-end;height:24px;margin-left:auto}
    .bars i{width:4px;border-radius:3px;background:linear-gradient(180deg,var(--green),#2fae5c);animation:vu 1s ease-in-out infinite}
    .bars i:nth-child(1){height:9px;animation-delay:0s}
    .bars i:nth-child(2){height:17px;animation-delay:.15s}
    .bars i:nth-child(3){height:24px;animation-delay:.3s}
    .bars i:nth-child(4){height:13px;animation-delay:.45s}
    .bars i:nth-child(5){height:19px;animation-delay:.6s}
    @keyframes vu{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

    /* шаги */
    .steps{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:16px;counter-reset:s}
    .step{
      background:var(--glass);border:1px solid var(--glass-b);border-radius:18px;
      padding:24px 26px 24px 78px;position:relative;backdrop-filter:blur(12px);
      box-shadow:0 14px 38px rgba(0,0,0,.25);transition:.2s;
    }
    .step:hover{border-color:rgba(142,162,255,.4)}
    .step::before{
      counter-increment:s;content:counter(s);
      position:absolute;left:24px;top:24px;width:36px;height:36px;
      border-radius:12px;background:linear-gradient(135deg,var(--blurple-2),var(--blurple-dark));
      color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;
      box-shadow:0 8px 20px rgba(88,101,242,.4);
    }
    .step h3{font-size:17.5px;font-weight:800;margin-bottom:5px}
    .step p{font-size:15px;color:var(--grey);line-height:1.55}
    .step code{
      background:rgba(4,7,22,.65);border:1px solid rgba(142,162,255,.18);
      padding:2px 9px;border-radius:7px;font-family:Consolas,monospace;font-size:13.5px;color:var(--yellow);
    }

    /* FAQ */
    .faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:13px}
    details{
      background:var(--glass);border:1px solid var(--glass-b);border-radius:17px;
      padding:21px 25px;cursor:pointer;backdrop-filter:blur(12px);
      box-shadow:0 12px 34px rgba(0,0,0,.22);transition:.2s;
    }
    details[open]{border-color:rgba(142,162,255,.5);background:rgba(88,101,242,.08)}
    summary{font-weight:800;font-size:17px;list-style:none;position:relative;padding-right:36px}
    summary::-webkit-details-marker{display:none}
    summary::after{
      content:"+";position:absolute;right:2px;top:-3px;font-size:26px;font-weight:400;
      color:var(--ice);transition:.25s;
    }
    details[open] summary::after{transform:rotate(45deg)}
    details p{margin-top:12px;font-size:15px;color:var(--grey);line-height:1.6}

    /* CTA */
    .cta-band{
      margin:40px 0 0;padding:80px 0;text-align:center;position:relative;overflow:hidden;
      background:linear-gradient(135deg,rgba(88,101,242,.3),rgba(11,17,48,.4));
      border-top:1px solid rgba(142,162,255,.15);border-bottom:1px solid rgba(142,162,255,.15);
      backdrop-filter:blur(10px);
    }
    .cta-band::before{
      content:"";position:absolute;left:50%;top:-40%;width:700px;height:500px;transform:translateX(-50%);
      background:radial-gradient(closest-side,rgba(124,138,255,.35),transparent);filter:blur(40px);
    }
    .cta-band h2{margin-bottom:14px}
    .cta-band p{color:var(--grey);font-size:17.5px;margin-bottom:32px}

    /* FOOTER */
    footer{background:rgba(4,7,22,.75);border-top:1px solid rgba(142,162,255,.1);padding:56px 0 34px;position:relative;z-index:2;backdrop-filter:blur(14px)}
    .f-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;margin-bottom:44px}
    .f-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;margin-bottom:15px}
    .f-brand .brand-mark{width:42px;height:42px}
    .f-status{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(87,242,135,.1);border:1px solid rgba(87,242,135,.25);
      color:#9dfcbb;padding:7px 14px;border-radius:14px;font-size:13px;font-weight:700;
    }
    .f-status .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
    .f-col h4{font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:15px}
    .f-col a{display:block;color:var(--grey-2);margin-bottom:11px;transition:.15s;font-weight:600;font-size:14.5px}
    .f-col a:hover{color:#fff}
    .f-bottom{
      border-top:1px solid rgba(142,162,255,.1);padding-top:26px;
      display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
      color:var(--grey-2);font-size:13.5px;
    }
    .f-social{display:flex;gap:13px}
    .f-social a{
      width:40px;height:40px;border-radius:50%;
      background:linear-gradient(135deg,var(--blurple-2),var(--blurple-dark));
      display:flex;align-items:center;justify-content:center;transition:.2s;
      box-shadow:0 8px 20px rgba(88,101,242,.35);
    }
    .f-social a:hover{transform:translateY(-3px) scale(1.06)}
    .f-social svg{width:18px;height:18px;fill:#fff}

    @media(max-width:900px){
      .split{grid-template-columns:1fr}
      .stats{grid-template-columns:repeat(2,1fr)}
      .f-top{grid-template-columns:1fr 1fr}
    }
    @media(max-width:680px){
      .nav-links,.nav-cta{display:none}
      .burger{display:block}
      .m-channels,.m-side{display:none}
      .mockup-shell{margin-bottom:-60px}
      .f-top{grid-template-columns:1fr}
      section{padding:110px 0 70px}
      .hero{padding:24px 0 0}
    }
