:root{
    --brand:#7c5cff; --brand-2:#22d3ee; --accent:#ff7ac6;
    --ok:#34d399;
    --bg:#070810; --bg-2:#0b0e1c; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.07);
    --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
    --ink:#eef0ff; --ink-2:#c3c8e6; --muted:#8f97b8;
    --shadow:0 18px 50px rgba(4,6,20,.55);
    --radius:18px; --radius-lg:26px;
    --wrap:1150px;
    --header-h:66px;
  }
  html[data-theme="light"]{
    --bg:#f5f6fc; --bg-2:#ffffff; --panel:rgba(255,255,255,.85); --panel-2:#ffffff;
    --line:rgba(16,18,43,.10); --line-2:rgba(16,18,43,.18);
    --ink:#141733; --ink-2:#2c3057; --muted:#5d6488;
    --shadow:0 18px 45px rgba(20,24,70,.10);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    margin:0; color:var(--ink); background:var(--bg);
    font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    overflow-x:hidden;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:-2;
    background:
      radial-gradient(60% 45% at 12% 0%, rgba(124,92,255,.28), transparent 60%),
      radial-gradient(55% 40% at 92% 8%, rgba(34,211,238,.18), transparent 60%),
      radial-gradient(45% 40% at 70% 96%, rgba(255,122,198,.14), transparent 60%),
      linear-gradient(180deg,var(--bg),var(--bg-2));
  }
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(75% 60% at 50% 0%,#000 0%,transparent 80%);
    -webkit-mask-image:radial-gradient(75% 60% at 50% 0%,#000 0%,transparent 80%);
  }
  html[data-theme="light"] body::after{background-image:linear-gradient(rgba(16,18,43,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,18,43,.05) 1px,transparent 1px)}
  a{color:var(--brand); text-decoration:none}
  img,svg{max-width:100%}
  h1,h2,h3,h4{line-height:1.18; margin:0; letter-spacing:-.02em}
  p{margin:0}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
  .skip{position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 12px 0; z-index:100}
  .skip:focus{left:0}
  :focus-visible{outline:2px solid var(--brand-2); outline-offset:3px; border-radius:6px}

  /* ---------- header ---------- */
  header.site{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    background:color-mix(in srgb,var(--bg) 78%,transparent); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; gap:18px; height:var(--header-h)}
  .logo{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:16px; white-space:nowrap}
  .logo b{background:linear-gradient(92deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .logo .mark{width:32px; height:32px; border-radius:10px; flex:0 0 auto}
  .navlinks{display:flex; gap:6px; margin-left:auto}
  .navlinks a{color:var(--muted); font-size:14.5px; padding:8px 12px; border-radius:10px; transition:.18s}
  .navlinks a:hover{color:var(--ink); background:var(--panel)}
  .navlinks a.active{color:var(--ink); background:var(--panel-2)}
  .navtools{display:flex; align-items:center; gap:10px}
  .iconbtn{width:38px; height:38px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; transition:.18s}
  .iconbtn:hover{border-color:var(--line-2); color:var(--ink)}
  .iconbtn svg{width:18px; height:18px}
  html[data-theme="dark"] .i-sun{display:block} html[data-theme="dark"] .i-moon{display:none}
  html[data-theme="light"] .i-sun{display:none} html[data-theme="light"] .i-moon{display:block}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:650; font-size:15px; padding:13px 22px; border-radius:13px; border:1px solid transparent;
    background:linear-gradient(96deg,var(--brand),#9b6bff 55%,var(--brand-2)); color:#fff; box-shadow:0 10px 28px rgba(124,92,255,.35); transition:.2s; white-space:nowrap}
  .btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(124,92,255,.45)}
  .btn.ghost{background:var(--panel); color:var(--ink); border-color:var(--line-2); box-shadow:none}
  .btn.ghost:hover{background:var(--panel-2)}
  .btn.sm{padding:10px 16px; font-size:14px; border-radius:11px}
  .btn svg{width:17px; height:17px}

  /* ---------- hero ---------- */
  .hero{padding:64px 0 20px; display:grid; grid-template-columns:1.03fr .97fr; gap:46px; align-items:center}
  .chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); padding:7px 13px; border-radius:999px}
  .chip .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(52,211,153,.16)}
  h1{font-size:clamp(30px,4.4vw,53px); font-weight:860; margin:20px 0 18px}
  h1 .grad{background:linear-gradient(96deg,var(--brand) 8%,var(--accent) 52%,var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lead{color:var(--ink-2); font-size:17.5px; max-width:56ch}
  .cta{display:flex; gap:13px; flex-wrap:wrap; margin:26px 0 18px}
  .ticks{display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:14px}
  .ticks span{display:inline-flex; align-items:center; gap:7px}
  .ticks svg{width:16px; height:16px; color:var(--ok); flex:0 0 auto}
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 15px}
  .stat b{display:block; font-size:21px; letter-spacing:-.02em}
  .stat span{color:var(--muted); font-size:12.5px}

  /* phone / chat mock */
  .mock{position:relative}
  .phone{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); backdrop-filter:blur(8px)}
  .phone-top{display:flex; align-items:center; gap:11px; padding-bottom:13px; border-bottom:1px solid var(--line); margin-bottom:14px}
  .avatar{width:36px; height:36px; border-radius:12px; flex:0 0 auto}
  .phone-top b{font-size:14.5px; display:block}
  .phone-top small{color:var(--ok); font-size:12px}
  .msg{max-width:86%; font-size:14.2px; padding:11px 14px; border-radius:15px; margin-bottom:10px; animation:pop .5s both}
  .msg.in{background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:6px}
  .msg.out{background:linear-gradient(96deg,var(--brand),#8b6bff 60%,var(--brand-2)); color:#fff; margin-left:auto; border-bottom-right-radius:6px}
  .msg .q{display:block; margin-top:7px; color:var(--brand-2); font-weight:600; font-size:13px}
  html[data-theme="light"] .msg.out .q{color:#eaf6ff}
  .kbd{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
  .kbd i{font-style:normal; font-size:13px; padding:8px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2)}
  @keyframes pop{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
  .float{position:absolute; right:-10px; top:-22px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:16px; padding:12px 15px; box-shadow:var(--shadow); font-size:13px; color:var(--ink-2); backdrop-filter:blur(8px)}
  .float b{display:block; font-size:15px; color:var(--ink)}

  /* ---------- sections ---------- */
  section{padding:74px 0}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-2)}
  h2{font-size:clamp(25px,3.1vw,36px); font-weight:840; margin:14px 0 12px}
  .sub{color:var(--muted); max-width:66ch; margin-bottom:34px}
  .center{text-align:center}
  .center .sub{margin-left:auto; margin-right:auto}

  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:.22s; position:relative; overflow:hidden}
  .card:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow)}
  .card .ico{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.16)); border:1px solid var(--line); margin-bottom:14px; color:var(--brand-2)}
  .card .ico svg{width:22px; height:22px}
  .card h3{font-size:17px; margin-bottom:7px}
  .card p{color:var(--muted); font-size:14.3px}

  .tpl{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:12px; transition:.22s}
  .tpl:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow)}
  .tpl .head{display:flex; align-items:center; gap:12px}
  .tpl .ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(34,211,238,.15)); border:1px solid var(--line); font-size:20px}
  .tpl h3{font-size:16.5px}
  .tpl .sum{font-size:12.8px; color:var(--muted)}
  .tpl p{color:var(--muted); font-size:14.2px}
  .tpl .price{font-size:13px; color:var(--ink-2); border-top:1px dashed var(--line); padding-top:11px; margin-top:auto}
  .tpl .price b{font-size:16px}
  .tpl .links{display:flex; flex-direction:column; gap:7px}
  .tpl .links a{font-size:13.4px; font-weight:600; display:inline-flex; align-items:center; gap:7px; color:var(--brand-2)}
  html[data-theme="light"] .tpl .links a{color:#0e8fb5}
  .tpl .links a:hover{text-decoration:underline}
  /* CRM — флагманский сценарий */
  .tpl.flag{position:relative; border-color:rgba(124,92,255,.55); box-shadow:0 0 0 1px rgba(124,92,255,.25), 0 18px 44px rgba(124,92,255,.16)}
  .tpl.flag::before{content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none; background:linear-gradient(135deg,rgba(124,92,255,.10),transparent 55%)}
  .tpl .flagtag{position:absolute; top:14px; right:14px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff}
  .roles{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; margin-top:18px}
  .role{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 15px}
  .role b{display:block; font-size:14.6px; margin-bottom:5px}
  .role span{color:var(--muted); font-size:13.2px; line-height:1.5}
  .chain{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:18px}
  .chain .step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:15px}
  .chain .step b{display:block; font-size:14.4px; margin-bottom:5px}
  .chain .step span{color:var(--muted); font-size:13.2px; line-height:1.5}
  .crmnote{margin-top:18px; padding:15px 17px; border:1px dashed rgba(124,92,255,.5); border-radius:14px; color:var(--ink-2); font-size:14.2px; line-height:1.6}
  .crmnote b{color:var(--ink)}
  .price.flag{position:relative; border-color:rgba(124,92,255,.55); box-shadow:0 0 0 1px rgba(124,92,255,.25), 0 18px 44px rgba(124,92,255,.16)}
  .price .flagtag{position:absolute; top:12px; right:12px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s}
  .step{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
  .step .n{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); margin-bottom:14px}
  .step h3{font-size:16.5px; margin-bottom:7px}
  .step p{color:var(--muted); font-size:14.2px}
  .note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:14px; padding:18px 20px; color:var(--ink-2); font-size:14.3px; margin-top:20px}
  .note b{color:var(--ink)}

  .prices{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
  .price{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:.22s}
  .price:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow)}
  .price .nm{font-weight:720; font-size:16px; display:flex; align-items:center; gap:9px; margin-bottom:10px}
  .price .m{font-size:27px; font-weight:860; letter-spacing:-.03em}
  .price .m small{font-size:14px; font-weight:600; color:var(--muted)}
  .price .y{font-size:13.6px; color:var(--muted); margin-top:6px}
  .price .save{display:inline-block; margin-top:11px; font-size:12.5px; font-weight:700; color:var(--ok); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.28); padding:5px 10px; border-radius:999px}

  .faq{max-width:820px; margin:0 auto}
  details{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:0; margin-bottom:11px; overflow:hidden; transition:.2s}
  details[open]{border-color:var(--line-2)}
  summary{cursor:pointer; padding:17px 20px; font-weight:650; font-size:15.6px; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; font-weight:600; color:var(--brand-2); font-size:20px; line-height:1}
  details[open] summary::after{content:"–"}
  details .body{padding:0 20px 18px; color:var(--muted); font-size:14.5px}

  .band{background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(34,211,238,.10)); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:38px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
  .band h2{margin:0 0 8px; font-size:clamp(23px,2.6vw,31px)}
  .band p{color:var(--ink-2); max-width:60ch}

  .qrbox{display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
  .qrbox img{width:132px; height:132px; border-radius:12px; background:#fff; padding:8px}
  .qrbox .t{max-width:52ch}
  .qrbox .t b{font-size:16.5px; display:block; margin-bottom:6px}
  .qrbox .t p{color:var(--muted); font-size:14.3px}
  .addr{color:var(--ink-2); font-size:14.5px; margin:14px 0 0}
  .addr a{color:var(--brand); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--brand) 45%,transparent)}
  .addr a:hover{color:var(--brand-2)}
  .copylink{background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink-2); border-radius:11px; padding:9px 14px; font:600 13.5px/1 inherit; cursor:pointer; margin-top:10px}
  .copylink:hover{color:var(--ink); border-color:var(--brand)}
  .qrbox .t p.addr b{display:inline; font-size:inherit; margin:0}

  footer.site{border-top:1px solid var(--line); margin-top:30px; padding:52px 0 30px; background:color-mix(in srgb,var(--bg) 70%,transparent)}
  .fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:30px}
  footer h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:13px}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
  footer ul a{color:var(--ink-2); font-size:14.3px}
  footer ul a:hover{color:var(--ink); text-decoration:underline}
  .about{color:var(--muted); font-size:14.2px; max-width:38ch; margin-top:12px}
  .legal{margin-top:38px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
  .legal .r{max-width:70ch}
  .share{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-size:13.5px; background:var(--panel); border:1px solid var(--line); padding:9px 13px; border-radius:11px; cursor:pointer; margin-top:14px}
  .share:hover{border-color:var(--line-2)}
  .share svg{width:15px; height:15px}

  .sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); gap:11px;
    background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line)}
  .sticky-cta .btn{flex:1}
  .totop{position:fixed; right:18px; bottom:18px; z-index:55; width:44px; height:44px; border-radius:14px; display:none; place-items:center;
    background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink); cursor:pointer; backdrop-filter:blur(8px)}
  .totop.show{display:grid}
  .totop svg{width:18px; height:18px}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
    html{scroll-behavior:auto}
    .reveal{opacity:1; transform:none}
  }

  @media (max-width:1000px){
    .hero{grid-template-columns:1fr; gap:36px; padding-top:44px}
    .mock{order:2}
    .fgrid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:760px){
    .navlinks{display:none}
    .steps{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr 1fr}
    section{padding:56px 0}
    .band{padding:26px}
    .sticky-cta{display:flex}
    body{padding-bottom:74px}
    .fgrid{grid-template-columns:1fr}
    .float{position:static; margin-top:14px; display:inline-block}
  }