:root{
      --bg:#061119;
      --bg-2:#0a1922;
      --surface:#0f2430;
      --surface-2:#153240;
      --surface-glass:rgba(15,36,48,.78);
      --line:rgba(153,199,219,.16);
      --line-strong:rgba(94,222,215,.34);
      --text:#f4fbff;
      --muted:#aac0cb;
      --muted-2:#7f9ba8;
      --teal:#21c8bd;
      --cyan:#47d6ff;
      --blue:#4d8fff;
      --green:#47dc8e;
      --orange:#ff9d3d;
      --red:#ff6d79;
      --purple:#a97dff;
      --shadow:0 26px 80px rgba(0,0,0,.38);
      --shadow-soft:0 16px 45px rgba(0,0,0,.24);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --container:1200px;
      --header-h:74px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-width:320px;
      color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.55;
      background:
        radial-gradient(circle at 12% 0%,rgba(33,200,189,.17),transparent 31rem),
        radial-gradient(circle at 95% 6%,rgba(77,143,255,.18),transparent 34rem),
        linear-gradient(180deg,#07141c 0%,#061119 50%,#07141b 100%);
      overflow-x:hidden;
    }

    img,svg{display:block;max-width:100%}
    a{color:inherit}
    button,input,textarea,select{font:inherit}
    button{color:inherit}
    ::selection{background:rgba(33,200,189,.34)}

    .container{
      width:min(calc(100% - 40px),var(--container));
      margin-inline:auto;
    }

    .skip-link{
      position:fixed;
      left:14px;
      top:-90px;
      z-index:1000;
      padding:11px 15px;
      border-radius:12px;
      color:#07141c;
      background:#fff;
      transition:top .2s ease;
    }
    .skip-link:focus{top:14px}

    .site-header{
      position:sticky;
      top:0;
      z-index:100;
      min-height:var(--header-h);
      border-bottom:1px solid rgba(255,255,255,.06);
      background:rgba(5,16,23,.78);
      backdrop-filter:blur(18px);
    }

    .nav{
      min-height:var(--header-h);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }

    .brand{
      min-width:0;
      display:inline-flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
    }

    .brand-icon{
      width:46px;
      height:46px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:15px;
      color:#031419;
      background:linear-gradient(135deg,#6ff5e5,var(--teal) 48%,var(--cyan));
      box-shadow:0 12px 34px rgba(33,200,189,.28);
    }

    .brand-icon svg{width:25px;height:25px}
    .brand-copy{display:grid;line-height:1.05}
    .brand-copy strong{font-size:15px;letter-spacing:.01em}
    .brand-copy span{margin-top:5px;color:var(--muted);font-size:11px}

    .nav-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:4px;
    }

    .nav-links a{
      padding:10px 12px;
      border-radius:12px;
      color:#c7d9e1;
      text-decoration:none;
      font-size:14px;
      transition:.2s ease;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      color:#fff;
      background:rgba(255,255,255,.06);
    }

    .nav-actions{display:flex;align-items:center;gap:10px}
    .menu-btn{
      display:none;
      width:45px;
      height:45px;
      border:1px solid var(--line);
      border-radius:13px;
      background:rgba(255,255,255,.04);
      cursor:pointer;
    }
    .menu-btn span,
    .menu-btn::before,
    .menu-btn::after{
      content:"";
      display:block;
      width:21px;
      height:2px;
      margin:4px auto;
      border-radius:99px;
      background:#fff;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:12px 18px;
      border:1px solid transparent;
      border-radius:14px;
      text-decoration:none;
      font-weight:780;
      cursor:pointer;
      transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{
      color:#031419;
      background:linear-gradient(135deg,#7ff8e9,var(--teal) 48%,var(--cyan));
      box-shadow:0 14px 34px rgba(33,200,189,.24);
    }
    .btn-primary:hover{box-shadow:0 18px 44px rgba(33,200,189,.34)}
    .btn-secondary{
      border-color:var(--line-strong);
      background:rgba(255,255,255,.045);
    }
    .btn-small{min-height:42px;padding:9px 14px;font-size:14px}

    .hero{
      position:relative;
      padding:86px 0 66px;
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,#000,transparent 82%);
    }

    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.04fr) minmax(430px,.96fr);
      gap:58px;
      align-items:center;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 12px;
      border:1px solid rgba(71,220,142,.27);
      border-radius:999px;
      color:#d9fff0;
      background:rgba(71,220,142,.07);
      font-size:13px;
      font-weight:750;
    }

    .status-dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 6px rgba(71,220,142,.12),0 0 18px rgba(71,220,142,.6);
    }

    h1,h2,h3,p{margin-top:0}
    h1{
      max-width:790px;
      margin:22px 0 22px;
      font-size:clamp(40px,6vw,76px);
      line-height:.99;
      letter-spacing:-.045em;
    }

    .headline-accent{
      display:block;
      background:linear-gradient(90deg,#fff,#78f2e4 45%,#70baff 82%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .hero-lead{
      max-width:760px;
      margin-bottom:26px;
      color:#c3d5dd;
      font-size:clamp(17px,2vw,21px);
      line-height:1.6;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-bottom:28px;
    }

    .hero-points{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:11px 18px;
      max-width:760px;
    }

    .mini-point{
      display:flex;
      align-items:flex-start;
      gap:9px;
      color:#d5e4ea;
      font-size:14px;
    }

    .mini-point i{
      width:21px;
      height:21px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:7px;
      color:#032018;
      background:linear-gradient(135deg,#65efc4,var(--green));
      font-style:normal;
      font-size:13px;
      font-weight:900;
    }

    .messenger-shell{
      position:relative;
      padding:16px;
      border:1px solid rgba(106,218,235,.25);
      border-radius:32px;
      background:linear-gradient(160deg,rgba(24,58,72,.9),rgba(8,23,31,.93));
      box-shadow:var(--shadow);
    }

    .messenger-shell::before{
      content:"";
      position:absolute;
      inset:-1px;
      z-index:-1;
      border-radius:inherit;
      background:linear-gradient(135deg,rgba(96,240,225,.45),transparent 42%,rgba(77,143,255,.35));
      filter:blur(16px);
      opacity:.55;
    }

    .app{
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      background:#0a1922;
    }

    .app-top{
      display:flex;
      align-items:center;
      gap:10px;
      padding:13px 15px;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:#102a36;
    }

    .traffic{display:flex;gap:6px}
    .traffic span{width:9px;height:9px;border-radius:50%}
    .traffic span:nth-child(1){background:#ff6f78}
    .traffic span:nth-child(2){background:#ffbd55}
    .traffic span:nth-child(3){background:#55dc91}
    .app-address{
      min-width:0;
      flex:1;
      padding:7px 10px;
      border-radius:9px;
      color:#8fb0be;
      background:rgba(0,0,0,.16);
      font-size:11px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .app-main{
      display:grid;
      grid-template-columns:170px minmax(0,1fr);
      min-height:480px;
    }

    .chat-list{
      border-right:1px solid rgba(255,255,255,.07);
      background:#0b1d26;
    }

    .list-head{
      padding:14px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .list-head strong{display:block;font-size:13px}
    .list-head span{color:#7796a4;font-size:10px}

    .chat-row{
      display:grid;
      grid-template-columns:35px minmax(0,1fr) auto;
      gap:9px;
      align-items:center;
      padding:11px 12px;
      border-bottom:1px solid rgba(255,255,255,.045);
    }
    .chat-row.active{background:rgba(33,200,189,.12)}
    .avatar{
      width:35px;height:35px;border-radius:12px;
      display:grid;place-items:center;
      color:#05171d;font-size:11px;font-weight:900;
      background:linear-gradient(135deg,#65f0e1,#49a9ff);
    }
    .avatar.group{background:linear-gradient(135deg,#ffba5a,#ff7d69)}
    .avatar.user{background:linear-gradient(135deg,#c998ff,#6c8fff)}
    .chat-copy{min-width:0}
    .chat-copy strong,
    .chat-copy span{
      display:block;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .chat-copy strong{font-size:11px}
    .chat-copy span{margin-top:3px;color:#7897a4;font-size:9px}
    .chat-meta{text-align:right}
    .chat-meta time{display:block;color:#6f8e9c;font-size:8px}
    .badge{
      min-width:18px;height:18px;padding:0 5px;
      display:inline-grid;place-items:center;
      border-radius:99px;
      color:#06141a;
      background:var(--orange);
      font-size:8px;font-weight:900;
    }

    .dialog{
      display:grid;
      grid-template-rows:auto 1fr auto;
      min-width:0;
      background:
        radial-gradient(circle at 90% 0%,rgba(33,200,189,.07),transparent 20rem),
        #091820;
    }

    .dialog-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px;
      border-bottom:1px solid rgba(255,255,255,.07);
      background:#102630;
    }
    .dialog-person{display:flex;align-items:center;gap:10px;min-width:0}
    .dialog-person .avatar{width:38px;height:38px}
    .dialog-title{min-width:0}
    .dialog-title strong{display:block;font-size:12px}
    .dialog-title span{display:block;color:#67e6a0;font-size:9px}
    .dialog-actions{display:flex;gap:7px}
    .icon-btn{
      width:30px;height:30px;display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.09);
      border-radius:10px;
      color:#9eb7c2;
      background:rgba(255,255,255,.04);
    }

    .messages{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:17px;
      overflow:hidden;
    }

    .msg{
      max-width:77%;
      padding:10px 11px 8px;
      border-radius:15px 15px 15px 5px;
      border:1px solid rgba(255,255,255,.08);
      background:#18313d;
      box-shadow:0 8px 20px rgba(0,0,0,.16);
    }
    .msg.me{
      align-self:flex-end;
      border-radius:15px 15px 5px 15px;
      background:#126b5d;
    }
    .msg small{display:block;margin-bottom:3px;color:#69cfff;font-size:8px;font-weight:800}
    .msg p{margin:0;font-size:10px;line-height:1.42}
    .msg time{display:block;margin-top:5px;color:#91aab5;font-size:7px;text-align:right}
    .quote{
      margin-bottom:7px;padding:6px 7px;
      border-left:3px solid var(--cyan);
      border-radius:7px;
      color:#bed5df;
      background:rgba(0,0,0,.17);
      font-size:8px;
    }
    .file-card{
      display:flex;align-items:center;gap:8px;
      margin-top:6px;padding:7px;
      border-radius:9px;
      background:rgba(0,0,0,.15);
    }
    .file-icon{
      width:27px;height:27px;display:grid;place-items:center;
      border-radius:8px;background:rgba(255,255,255,.09);font-size:13px;
    }

    .composer{
      display:flex;
      align-items:flex-end;
      gap:8px;
      padding:12px;
      border-top:1px solid rgba(255,255,255,.07);
      background:#102630;
    }
    .composer-tools{display:flex;gap:6px}
    .composer-tools span{
      width:29px;height:29px;display:grid;place-items:center;
      border-radius:9px;background:rgba(255,255,255,.05);
      color:#a9c0ca;font-size:13px;
    }
    .composer-input{
      min-height:38px;flex:1;padding:9px 11px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:11px;color:#6f8f9d;background:#08161e;font-size:10px;
    }
    .send{
      width:38px;height:38px;display:grid;place-items:center;
      border-radius:12px;color:#06171d;background:linear-gradient(135deg,var(--teal),var(--cyan));
      font-size:15px;font-weight:900;
    }

    .trust-strip{
      padding:20px 0 0;
    }
    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .trust-card{
      padding:17px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.035);
      text-align:center;
    }
    .trust-card strong{display:block;font-size:16px}
    .trust-card span{display:block;margin-top:5px;color:var(--muted);font-size:12px}

    section{padding:84px 0}
    .section-head{
      max-width:820px;
      margin:0 auto 38px;
      text-align:center;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:14px;
      color:#78efe4;
      font-size:12px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .section-head h2{
      margin-bottom:15px;
      font-size:clamp(31px,4.5vw,52px);
      line-height:1.07;
      letter-spacing:-.035em;
    }
    .section-head p{
      margin:0 auto;
      color:var(--muted);
      font-size:17px;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }

    .feature-card{
      position:relative;
      overflow:hidden;
      min-height:100%;
      padding:24px;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:linear-gradient(160deg,rgba(22,48,61,.82),rgba(10,26,35,.9));
      box-shadow:var(--shadow-soft);
    }
    .feature-card::after{
      content:"";
      position:absolute;
      width:170px;height:170px;right:-80px;bottom:-90px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(33,200,189,.15),transparent 68%);
    }
    .feature-icon{
      width:48px;height:48px;display:grid;place-items:center;
      margin-bottom:17px;border-radius:15px;
      color:#06161b;
      background:linear-gradient(135deg,#7df5e6,var(--teal),var(--cyan));
      font-size:22px;
      box-shadow:0 10px 26px rgba(33,200,189,.2);
    }
    .feature-card h3{margin-bottom:10px;font-size:20px}
    .feature-card p{margin-bottom:16px;color:var(--muted)}
    .checks{
      display:grid;
      gap:9px;
      margin:0;padding:0;
      list-style:none;
    }
    .checks li{
      position:relative;
      padding-left:28px;
      color:#d6e4ea;
      font-size:14px;
    }
    .checks li::before{
      content:"✓";
      position:absolute;left:0;top:0;
      width:19px;height:19px;display:grid;place-items:center;
      border-radius:6px;color:#042017;
      background:linear-gradient(135deg,#75efbd,var(--green));
      font-size:12px;font-weight:900;
    }

    .split{
      display:grid;
      grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
      gap:42px;
      align-items:center;
    }

    .split.reverse .visual{order:2}
    .split.reverse .copy{order:1}

    .copy h2{
      margin-bottom:16px;
      font-size:clamp(30px,4vw,50px);
      line-height:1.08;
      letter-spacing:-.03em;
    }
    .copy>p{color:var(--muted);font-size:17px}
    .copy .checks{margin-top:22px}

    .visual{
      min-height:420px;
      padding:24px;
      border:1px solid var(--line-strong);
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 15% 10%,rgba(33,200,189,.16),transparent 18rem),
        linear-gradient(160deg,rgba(19,49,63,.88),rgba(8,22,30,.94));
      box-shadow:var(--shadow);
    }

    .flow{
      display:grid;
      gap:14px;
      align-content:center;
      height:100%;
    }
    .flow-item{
      display:grid;
      grid-template-columns:54px minmax(0,1fr);
      gap:14px;
      align-items:center;
      padding:16px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:17px;
      background:rgba(255,255,255,.035);
    }
    .flow-num{
      width:54px;height:54px;display:grid;place-items:center;
      border-radius:17px;color:#06161b;
      background:linear-gradient(135deg,#75f4e5,var(--teal),#5eb6ff);
      font-weight:900;font-size:20px;
    }
    .flow-item strong{display:block}
    .flow-item span{display:block;margin-top:3px;color:var(--muted);font-size:13px}

    .use-cases{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .case{
      padding:18px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.035);
    }
    .case b{display:block;font-size:16px}
    .case span{display:block;margin-top:5px;color:var(--muted);font-size:13px}

    .admin-panel{
      position:relative;
      overflow:hidden;
      padding:28px;
      border:1px solid rgba(104,197,255,.25);
      border-radius:28px;
      background:
        radial-gradient(circle at 100% 0%,rgba(77,143,255,.15),transparent 23rem),
        linear-gradient(150deg,rgba(18,41,55,.92),rgba(8,24,32,.96));
      box-shadow:var(--shadow);
    }

    .admin-grid{
      display:grid;
      grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
      gap:30px;
      align-items:center;
    }

    .admin-preview{
      min-height:420px;
      padding:16px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:22px;
      background:#091820;
    }
    .admin-bar{
      display:flex;align-items:center;justify-content:space-between;
      margin-bottom:14px;padding:12px 13px;
      border-radius:14px;background:#102b37;
    }
    .admin-bar strong{font-size:13px}
    .admin-bar span{color:#6be3a0;font-size:10px}
    .admin-layout{
      display:grid;grid-template-columns:140px 1fr;gap:12px;min-height:330px;
    }
    .admin-menu{
      display:grid;align-content:start;gap:8px;
      padding:10px;border-radius:14px;background:#0c202a;
    }
    .admin-menu div{
      padding:9px;border-radius:9px;color:#8faab6;background:rgba(255,255,255,.035);font-size:9px;
    }
    .admin-menu div.active{color:#06171c;background:linear-gradient(135deg,var(--teal),var(--cyan));font-weight:800}
    .admin-content{
      display:grid;gap:9px;align-content:start;
      padding:10px;border-radius:14px;background:#0c202a;
    }
    .admin-row{
      display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;
      padding:9px;border-radius:10px;background:rgba(255,255,255,.035);
    }
    .admin-row .avatar{width:32px;height:32px;border-radius:10px;font-size:9px}
    .admin-row strong{display:block;font-size:9px}
    .admin-row span{display:block;color:#73909d;font-size:7px}
    .admin-row em{font-style:normal;color:#ffb258;font-size:8px}

    .cloud{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
      margin-top:28px;
    }
    .cloud-card{
      padding:18px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.035);
    }
    .cloud-card strong{display:block}
    .cloud-card span{display:block;margin-top:6px;color:var(--muted);font-size:13px}

    .widget-feature{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);
      gap:40px;
      align-items:center;
      padding:30px;
      border:1px solid rgba(255,157,61,.25);
      border-radius:30px;
      background:
        radial-gradient(circle at 90% 10%,rgba(255,157,61,.12),transparent 24rem),
        linear-gradient(145deg,rgba(26,49,61,.9),rgba(8,24,32,.95));
    }

    .widget-demo{
      min-height:360px;
      display:grid;
      place-items:center;
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      background:
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        #091820;
      background-size:28px 28px;
    }

    .widget-window{
      width:min(330px,84%);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.1);
      border-radius:22px;
      background:#0b1921;
      box-shadow:0 24px 60px rgba(0,0,0,.38);
    }
    .widget-head{
      display:flex;align-items:center;gap:10px;
      padding:13px;background:#174c49;
    }
    .widget-head .avatar{width:36px;height:36px;border-radius:11px;background:#2e5e65;color:#fff}
    .widget-head strong{display:block;font-size:12px}
    .widget-head span{display:block;color:#8ff3bd;font-size:9px}
    .widget-body{display:grid;gap:9px;padding:15px;min-height:170px}
    .widget-msg{
      width:max-content;max-width:82%;padding:9px 10px;
      border-radius:13px;background:#203743;font-size:10px;
    }
    .widget-msg.me{justify-self:end;background:#116c5c}
    .widget-input{
      display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.07);
      background:#102630;
    }
    .widget-input div{
      flex:1;padding:9px;border-radius:10px;color:#6d8b98;background:#08171e;font-size:9px;
    }
    .widget-input b{
      width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
      color:#04191d;background:linear-gradient(135deg,var(--teal),var(--cyan));
    }
    .floating-btn{
      position:absolute;right:22px;bottom:22px;
      display:flex;align-items:center;gap:10px;
      padding:12px 16px;border-radius:999px;
      color:#06171b;background:linear-gradient(100deg,#6cf1de,#2cc7bd,#52b9ff);
      box-shadow:0 15px 36px rgba(33,200,189,.32);
      font-size:11px;font-weight:900;
    }
    .floating-btn i{
      width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
      color:#fff;background:#173d48;font-style:normal;
    }


    .project-shot{
      margin:0;
      padding:10px;
      overflow:hidden;
      border:1px solid rgba(99,211,229,.27);
      border-radius:28px;
      background:linear-gradient(145deg,rgba(18,47,60,.86),rgba(5,17,24,.98));
      box-shadow:var(--shadow);
    }
    .project-shot img{
      width:100%;
      height:auto;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.09);
      background:#07131b;
      object-fit:contain;
    }
    .project-shot figcaption{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 8px 3px;
      color:var(--muted);
      font-size:13px;
    }
    .project-shot-hero{transform:rotate(.25deg)}
    .project-shot-section{align-self:center}



    .overview-slider-section{
      position:relative;
      overflow:hidden;
      padding-top:92px;
      padding-bottom:54px;
    }
    .overview-slider-section::before{
      content:"";
      position:absolute;
      width:620px;
      height:620px;
      right:-310px;
      top:80px;
      border-radius:50%;
      pointer-events:none;
      background:radial-gradient(circle,rgba(33,200,189,.14),transparent 68%);
    }
    .overview-slider{
      position:relative;
      overflow:hidden;
      padding:18px;
      border:1px solid var(--line-strong);
      border-radius:30px;
      background:
        radial-gradient(circle at 0 0,rgba(33,200,189,.12),transparent 25rem),
        linear-gradient(155deg,rgba(17,43,56,.94),rgba(6,20,28,.98));
      box-shadow:var(--shadow);
    }
    .overview-slider-toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      margin-bottom:16px;
      padding:2px 2px 14px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .overview-slider-toolbar>div:first-child{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .overview-slider-toolbar strong{
      font-size:18px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .overview-slider-toolbar span{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:54px;
      padding:6px 10px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:999px;
      color:var(--muted);
      background:rgba(255,255,255,.04);
      font-size:12px;
      font-weight:800;
    }
    .overview-slider-arrows{
      display:flex;
      gap:8px;
      flex:0 0 auto;
    }
    .overview-slider-arrows button{
      width:44px;
      height:44px;
      border:1px solid rgba(88,220,235,.25);
      border-radius:14px;
      color:var(--text);
      background:#0d2732;
      font:700 28px/1 Arial,sans-serif;
      cursor:pointer;
      transition:.2s ease;
    }
    .overview-slider-arrows button:hover{
      color:#06171b;
      border-color:transparent;
      background:linear-gradient(135deg,#74f0df,var(--teal),var(--cyan));
      transform:translateY(-2px);
    }
    .overview-slider-viewport{
      overflow:hidden;
      border-radius:22px;
    }
    .overview-slider-track{
      display:flex;
      width:100%;
      transition:transform .5s cubic-bezier(.22,.75,.18,1);
      will-change:transform;
    }
    .overview-page{
      flex:0 0 100%;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-rows:repeat(2,minmax(0,1fr));
      gap:14px;
      padding:1px;
    }
    .overview-card{
      position:relative;
      overflow:hidden;
      min-height:300px;
      padding:22px;
      border:1px solid rgba(255,255,255,.09);
      border-radius:22px;
      background:linear-gradient(150deg,rgba(24,54,68,.88),rgba(9,27,36,.94));
      box-shadow:0 14px 38px rgba(0,0,0,.18);
    }
    .overview-card::after{
      content:"";
      position:absolute;
      width:170px;
      height:170px;
      right:-90px;
      bottom:-100px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(33,200,189,.15),transparent 70%);
      pointer-events:none;
    }
    .overview-card-important{
      border-color:rgba(255,191,87,.24);
      background:linear-gradient(150deg,rgba(61,47,25,.48),rgba(9,27,36,.94));
    }
    .overview-card-icon{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      margin-bottom:15px;
      border-radius:14px;
      color:#04191d;
      background:linear-gradient(135deg,#79f4e5,var(--teal),var(--cyan));
      box-shadow:0 10px 26px rgba(33,200,189,.18);
      font-size:17px;
      font-weight:900;
    }
    .overview-card h3{
      margin:0 0 9px;
      font-size:21px;
      line-height:1.18;
    }
    .overview-card p{
      margin:0 0 13px;
      color:var(--muted);
      font-size:14px;
    }
    .overview-card ul{
      display:grid;
      gap:7px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .overview-card li{
      position:relative;
      padding-left:23px;
      color:#d9e7ec;
      font-size:13px;
      line-height:1.45;
    }
    .overview-card li::before{
      content:"✓";
      position:absolute;
      left:0;
      top:.08em;
      width:16px;
      height:16px;
      display:grid;
      place-items:center;
      border-radius:5px;
      color:#032019;
      background:linear-gradient(135deg,#75efbd,var(--green));
      font-size:10px;
      font-weight:900;
    }
    .overview-dots{
      display:flex;
      justify-content:center;
      gap:8px;
      margin-top:16px;
    }
    .overview-dots button{
      width:10px;
      height:10px;
      padding:0;
      border:0;
      border-radius:999px;
      background:#35515d;
      cursor:pointer;
      transition:.25s ease;
    }
    .overview-dots button.active{
      width:34px;
      background:linear-gradient(90deg,var(--teal),var(--cyan));
    }

    .gallery-section{
      position:relative;
      overflow:hidden;
    }

    .gallery-section::before{
      content:"";
      position:absolute;
      width:560px;
      height:560px;
      left:-260px;
      top:90px;
      border-radius:50%;
      pointer-events:none;
      background:radial-gradient(circle,rgba(77,143,255,.13),transparent 68%);
    }

    .gallery-card{
      position:relative;
      padding:18px;
      border:1px solid rgba(99,211,229,.24);
      border-radius:30px;
      background:linear-gradient(155deg,rgba(18,47,60,.9),rgba(7,23,31,.96));
      box-shadow:var(--shadow);
    }

    .gallery-viewer{
      position:relative;
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
    }

    .gallery-stage{
      position:relative;
      width:100%;
      min-height:280px;
      padding:0;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.09);
      border-radius:22px;
      background:#051019;
      cursor:zoom-in;
      box-shadow:0 20px 55px rgba(0,0,0,.32);
    }

    .gallery-stage img{
      width:100%;
      height:min(65vw,690px);
      min-height:280px;
      object-fit:contain;
      background:#06121a;
    }

    .gallery-zoom-hint{
      position:absolute;
      right:14px;
      bottom:14px;
      padding:8px 11px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:999px;
      color:#d9e9ef;
      background:rgba(5,16,23,.78);
      backdrop-filter:blur(12px);
      font-size:11px;
      pointer-events:none;
    }

    .gallery-arrow,
    .lightbox-arrow{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border:1px solid var(--line-strong);
      border-radius:15px;
      color:#fff;
      background:rgba(255,255,255,.055);
      cursor:pointer;
      font-size:34px;
      line-height:1;
      transition:.2s ease;
    }

    .gallery-arrow:hover,
    .lightbox-arrow:hover{
      transform:translateY(-2px);
      background:rgba(33,200,189,.16);
      border-color:rgba(83,238,223,.55);
    }

    .gallery-info{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      padding:18px 6px 12px;
    }

    .gallery-info strong{
      display:block;
      margin-bottom:5px;
      font-size:20px;
    }

    .gallery-info p{
      max-width:850px;
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .gallery-counter{
      flex:0 0 auto;
      padding:7px 10px;
      border-radius:999px;
      color:#06171b;
      background:linear-gradient(135deg,#77f3e4,var(--teal),var(--cyan));
      font-size:12px;
      font-weight:900;
    }

    .gallery-lightbox[hidden]{display:none}

    .gallery-lightbox{
      position:fixed;
      inset:0;
      z-index:10000;
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      align-items:center;
      gap:18px;
      padding:34px;
      background:rgba(1,8,12,.94);
      backdrop-filter:blur(16px);
    }

    .lightbox-figure{
      min-width:0;
      margin:0;
      text-align:center;
    }

    .lightbox-figure img{
      max-width:100%;
      max-height:calc(100vh - 110px);
      margin-inline:auto;
      border:1px solid rgba(255,255,255,.12);
      border-radius:18px;
      object-fit:contain;
      box-shadow:0 28px 90px rgba(0,0,0,.56);
    }

    .lightbox-figure figcaption{
      margin-top:12px;
      color:#d7e8ee;
      font-size:14px;
    }

    .lightbox-close{
      position:absolute;
      right:22px;
      top:18px;
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.15);
      border-radius:15px;
      color:#fff;
      background:rgba(255,255,255,.07);
      cursor:pointer;
      font-size:28px;
    }

    .widget-demo-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:13px;
      margin-top:24px;
    }

    .widget-demo-actions span{
      max-width:360px;
      color:var(--muted);
      font-size:12px;
    }

    .widget-demo-off{
      display:grid;
      place-items:center;
    }

    .demo-promo-card{
      max-width:430px;
      padding:28px;
      border:1px solid rgba(255,255,255,.09);
      border-radius:24px;
      text-align:center;
      background:rgba(255,255,255,.035);
      box-shadow:0 20px 55px rgba(0,0,0,.26);
    }

    .demo-promo-icon{
      width:68px;
      height:68px;
      display:grid;
      place-items:center;
      margin:0 auto 15px;
      border-radius:21px;
      color:#05161a;
      background:linear-gradient(135deg,#7cf7e7,var(--teal),var(--cyan));
      font-size:31px;
      box-shadow:0 15px 38px rgba(33,200,189,.25);
    }

    .demo-promo-card strong{
      display:block;
      margin-bottom:9px;
      font-size:20px;
    }

    .demo-promo-card p{
      margin-bottom:18px;
      color:var(--muted);
    }

    .demo-promo-list{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
    }

    .demo-promo-list span{
      padding:7px 9px;
      border:1px solid var(--line);
      border-radius:999px;
      color:#cfe1e8;
      background:rgba(255,255,255,.035);
      font-size:11px;
    }

    .live-demo-root[hidden]{display:none}

    .live-demo-root{
      position:fixed;
      right:max(20px,env(safe-area-inset-right));
      bottom:max(20px,env(safe-area-inset-bottom));
      z-index:9990;
      pointer-events:none;
    }

    .live-demo-launcher{
      position:absolute;
      right:0;
      bottom:0;
      min-width:224px;
      min-height:66px;
      display:flex;
      align-items:center;
      gap:11px;
      padding:10px 17px 10px 10px;
      border:0;
      border-radius:999px;
      color:#04171c;
      background:linear-gradient(110deg,#72f5e4,#24c8bd 44%,#55baff 84%,#72f5e4);
      background-size:260% 260%;
      box-shadow:0 18px 48px rgba(33,200,189,.42),0 0 0 1px rgba(255,255,255,.22) inset;
      cursor:pointer;
      pointer-events:auto;
      isolation:isolate;
      animation:liveDemoBreath 2.2s ease-in-out infinite,liveDemoGradient 4.5s linear infinite;
    }

    .live-demo-launcher::after{
      content:"";
      position:absolute;
      inset:4px;
      z-index:-1;
      border-radius:inherit;
      background:linear-gradient(110deg,rgba(255,255,255,.33),transparent 30%,rgba(255,255,255,.08));
      pointer-events:none;
    }

    .live-demo-launcher:hover{transform:translateY(-3px) scale(1.02)}
    .live-demo-launcher:active{transform:scale(.98)}

    .live-demo-ripple{
      position:absolute;
      inset:-7px;
      z-index:-2;
      border:2px solid rgba(74,234,218,.48);
      border-radius:inherit;
      animation:liveDemoRipple 2.6s ease-out infinite;
      pointer-events:none;
    }

    .live-demo-ripple-two{animation-delay:1.3s}

    .live-demo-launcher-icon{
      position:relative;
      width:46px;
      height:46px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#fff;
      background:#143b47;
      font-size:22px;
      box-shadow:0 8px 20px rgba(0,0,0,.22);
    }

    .live-demo-launcher-icon i{
      position:absolute;
      right:0;
      bottom:1px;
      width:11px;
      height:11px;
      border:2px solid #143b47;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 5px rgba(71,220,142,.11);
      animation:liveDemoOnline 1.35s ease-in-out infinite;
    }

    .live-demo-launcher-copy{
      display:grid;
      line-height:1.08;
      text-align:left;
    }

    .live-demo-launcher-copy strong{font-size:15px}
    .live-demo-launcher-copy small{margin-top:5px;font-size:12px;font-weight:800}

    .live-demo-unread{
      position:absolute;
      right:-4px;
      top:-7px;
      min-width:25px;
      height:25px;
      padding:0 6px;
      display:grid;
      place-items:center;
      border:3px solid #0b1c24;
      border-radius:999px;
      color:#fff;
      background:var(--orange);
      font-size:11px;
      box-shadow:0 8px 18px rgba(255,157,61,.42);
    }

    .live-demo-panel{
      position:absolute;
      right:0;
      bottom:82px;
      width:min(390px,calc(100vw - 28px));
      height:min(610px,calc(100vh - 120px));
      display:grid;
      grid-template-rows:auto 1fr auto auto;
      overflow:hidden;
      border:1px solid rgba(114,227,219,.35);
      border-radius:24px;
      background:#0a171f;
      box-shadow:0 30px 90px rgba(0,0,0,.55);
      opacity:0;
      visibility:hidden;
      transform:translateY(18px) scale(.97);
      transform-origin:right bottom;
      transition:.22s ease;
      pointer-events:none;
    }

    .live-demo-panel.open{
      opacity:1;
      visibility:visible;
      transform:none;
      pointer-events:auto;
    }

    .live-demo-header{
      display:grid;
      grid-template-columns:42px minmax(0,1fr) 42px;
      gap:10px;
      align-items:center;
      padding:13px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:linear-gradient(135deg,#174d49,#103842);
    }

    .live-demo-avatar{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:13px;
      background:rgba(255,255,255,.12);
      font-size:20px;
    }

    .live-demo-header strong{display:block;font-size:14px}
    .live-demo-header span{
      display:flex;
      align-items:center;
      gap:5px;
      margin-top:3px;
      color:#b7f2d0;
      font-size:10px;
    }

    .live-demo-header span i{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 4px rgba(71,220,142,.11);
    }

    .live-demo-close{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.12);
      border-radius:13px;
      color:#fff;
      background:rgba(0,0,0,.12);
      cursor:pointer;
      font-size:24px;
    }

    .live-demo-messages{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:15px;
      overflow:auto;
      background:
        radial-gradient(circle at 100% 0%,rgba(33,200,189,.08),transparent 19rem),
        #09161e;
    }

    .live-demo-message{
      max-width:82%;
      padding:10px 11px 8px;
      border:1px solid rgba(255,255,255,.09);
      border-radius:15px 15px 15px 5px;
      background:#1b323e;
      box-shadow:0 8px 20px rgba(0,0,0,.16);
    }

    .live-demo-message.me{
      align-self:flex-end;
      border-radius:15px 15px 5px 15px;
      background:#126b5d;
    }

    .live-demo-message small{
      display:block;
      margin-bottom:3px;
      color:#68d5ff;
      font-size:9px;
      font-weight:900;
    }

    .live-demo-message.me small{color:#95ffe0}
    .live-demo-message p{margin:0;font-size:12px;line-height:1.45}
    .live-demo-message time{
      display:block;
      margin-top:5px;
      color:#8ea6b1;
      text-align:right;
      font-size:8px;
    }

    .live-demo-composer{
      display:flex;
      align-items:flex-end;
      gap:8px;
      padding:11px;
      border-top:1px solid rgba(255,255,255,.08);
      background:#102630;
    }

    .live-demo-composer textarea{
      min-width:0;
      min-height:42px;
      max-height:110px;
      flex:1;
      resize:none;
      padding:10px 11px;
      border:1px solid rgba(255,255,255,.09);
      border-radius:12px;
      outline:none;
      color:#fff;
      background:#08161d;
    }

    .live-demo-composer textarea:focus{border-color:rgba(71,214,255,.45)}

    .live-demo-emoji,
    .live-demo-send{
      width:42px;
      height:42px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border:0;
      border-radius:13px;
      cursor:pointer;
    }

    .live-demo-emoji{
      color:#fff;
      background:rgba(255,255,255,.07);
      font-size:18px;
    }

    .live-demo-send{
      color:#04191d;
      background:linear-gradient(135deg,var(--teal),var(--cyan));
      font-size:18px;
      font-weight:900;
    }

    .live-demo-disable{
      min-height:34px;
      border:0;
      border-top:1px solid rgba(255,255,255,.06);
      color:#88a4b0;
      background:#0c2029;
      cursor:pointer;
      font-size:10px;
    }

    @keyframes liveDemoBreath{
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.045)}
    }

    @keyframes liveDemoGradient{
      0%{background-position:0% 50%}
      100%{background-position:260% 50%}
    }

    @keyframes liveDemoRipple{
      0%{opacity:.58;transform:scale(.94)}
      80%,100%{opacity:0;transform:scale(1.22)}
    }

    @keyframes liveDemoOnline{
      0%,100%{transform:scale(.9)}
      50%{transform:scale(1.2)}
    }

    .accordion{
      display:grid;
      gap:13px;
      max-width:960px;
      margin:0 auto;
    }
    .accordion details{
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.035);
      overflow:hidden;
    }
    .accordion summary{
      list-style:none;
      cursor:pointer;
      padding:19px 54px 19px 20px;
      position:relative;
      font-weight:780;
    }
    .accordion summary::-webkit-details-marker{display:none}
    .accordion summary::after{
      content:"+";
      position:absolute;right:20px;top:50%;
      transform:translateY(-50%);
      width:28px;height:28px;display:grid;place-items:center;
      border-radius:9px;color:#07171c;background:linear-gradient(135deg,var(--teal),var(--cyan));
      font-size:18px;font-weight:900;
    }
    .accordion details[open] summary::after{content:"−"}
    .accordion-content{
      padding:0 20px 20px;
      color:var(--muted);
    }
    .accordion-content .checks{margin-top:8px}

    .cta{
      padding:42px;
      border:1px solid rgba(104,234,219,.28);
      border-radius:30px;
      text-align:center;
      background:
        radial-gradient(circle at 50% 0%,rgba(33,200,189,.18),transparent 28rem),
        linear-gradient(145deg,rgba(19,50,63,.92),rgba(8,23,31,.96));
      box-shadow:var(--shadow);
    }
    .cta h2{margin-bottom:13px;font-size:clamp(30px,4vw,52px);letter-spacing:-.035em}
    .cta p{max-width:760px;margin:0 auto 24px;color:var(--muted);font-size:17px}
    .cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

    .important{
      padding:24px;
      border-left:4px solid var(--orange);
      border-radius:0 18px 18px 0;
      color:#cfdee4;
      background:rgba(255,157,61,.08);
    }
    .important strong{display:block;margin-bottom:6px;color:#fff}

    footer{
      padding:32px 0 40px;
      border-top:1px solid rgba(255,255,255,.06);
      color:#8ea7b2;
    }
    .footer-grid{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .footer-brand{display:flex;align-items:center;gap:10px}
    .footer-brand .brand-icon{width:38px;height:38px;border-radius:12px}
    .footer-links{display:flex;flex-wrap:wrap;gap:14px}
    .footer-links a{text-decoration:none}
    .footer-links a:hover{color:#fff}
    .site-dev-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-width:0;
      text-decoration:none;
      color:#b8cbd3;
      font-size:12px;
      line-height:1.2;
      transition:color .25s ease,transform .25s ease;
    }
    .site-dev-link:hover{
      color:#fff;
      transform:translateY(-1px);
    }
    .site-dev-text,
    .site-dev-domain{
      white-space:nowrap;
    }
    .site-dev-logo{
      width:32px;
      height:32px;
      flex:0 0 32px;
      display:block;
      object-fit:contain;
      border-radius:50%;
      background:#fff;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        0 7px 18px rgba(0,0,0,.24),
        0 0 18px rgba(0,229,214,.12);
      transition:transform .25s ease,box-shadow .25s ease;
    }
    .site-dev-link:hover .site-dev-logo{
      transform:scale(1.06);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.24),
        0 9px 22px rgba(0,0,0,.28),
        0 0 22px rgba(0,229,214,.2);
    }

    .reveal{
      opacity:0;
      transform:translateY(22px);
      transition:opacity .7s ease,transform .7s ease;
    }
    .reveal.visible{opacity:1;transform:none}


    .important-spaced{
      margin-top:22px;
    }

    @media (max-width:1020px){
      .nav-links{display:none}
      .menu-btn{display:block}
      .nav-links.open{
        position:absolute;
        top:calc(100% + 8px);
        left:20px;
        right:20px;
        display:grid;
        padding:12px;
        border:1px solid var(--line);
        border-radius:18px;
        background:#0b202a;
        box-shadow:var(--shadow);
      }
      .nav-links.open a{padding:12px}
      .hero-grid,
      .split,
      .admin-grid,
      .widget-feature{grid-template-columns:1fr}
      .hero-grid{gap:38px}
      .hero-copy{text-align:center}
      .hero-lead{margin-inline:auto}
      .hero-actions{justify-content:center}
      .hero-points{margin-inline:auto;text-align:left}
      .messenger-shell{max-width:730px;margin-inline:auto}
      .split.reverse .visual,
      .split.reverse .copy{order:initial}
      .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
      .use-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
      .cloud{grid-template-columns:repeat(2,minmax(0,1fr))}
      .widget-demo{min-height:430px}
    }

    @media (max-width:720px){
      :root{--header-h:66px}
      .container{width:min(calc(100% - 28px),var(--container))}
      .nav-actions .btn{display:none}
      .hero{padding:58px 0 44px}
      h1{font-size:clamp(39px,12vw,61px)}
      .hero-points{grid-template-columns:1fr}
      .trust-grid,
      .cards,
      .use-cases,
      .cloud{grid-template-columns:1fr}
      section{padding:64px 0}
      .app-main{grid-template-columns:112px minmax(0,1fr);min-height:430px}
      .chat-row{grid-template-columns:30px minmax(0,1fr);padding:10px 8px}
      .chat-row .chat-meta{display:none}
      .avatar{width:30px;height:30px;border-radius:10px}
      .dialog-head{padding:11px}
      .dialog-actions .icon-btn:nth-child(2){display:none}
      .messages{padding:12px}
      .msg{max-width:88%}
      .composer-tools span:nth-child(2){display:none}
      .visual{min-height:auto;padding:17px}
      .admin-panel,
      .widget-feature,
      .cta{padding:20px}
      .admin-layout{grid-template-columns:94px 1fr}
      .widget-demo{min-height:390px}
      .floating-btn{right:14px;bottom:14px}
      .footer-grid{align-items:flex-start;flex-direction:column}
    }

    @media (max-width:460px){
      .brand-copy span{display:none}
      .brand-icon{width:42px;height:42px}
      .hero-actions{display:grid}
      .hero-actions .btn{width:100%}
      .messenger-shell{padding:8px;border-radius:24px}
      .app{border-radius:18px}
      .app-main{grid-template-columns:88px minmax(0,1fr);min-height:405px}
      .list-head{padding:10px}
      .list-head span{display:none}
      .chat-row{grid-template-columns:27px minmax(0,1fr);gap:6px}
      .chat-row .avatar{width:27px;height:27px}
      .chat-copy strong{font-size:9px}
      .chat-copy span{font-size:7px}
      .dialog-person .avatar{width:33px;height:33px}
      .dialog-title strong{font-size:10px}
      .dialog-title span{font-size:8px}
      .messages{gap:7px}
      .msg{padding:8px;max-width:92%}
      .msg p{font-size:9px}
      .composer{padding:9px;gap:6px}
      .composer-tools span{width:26px;height:26px}
      .composer-input{min-height:34px;padding:8px;font-size:8px}
      .send{width:34px;height:34px}
      .section-head{text-align:left}
      .section-head h2{font-size:34px}
      .flow-item{grid-template-columns:45px minmax(0,1fr);padding:13px}
      .flow-num{width:45px;height:45px;border-radius:14px}
      .admin-layout{grid-template-columns:1fr}
      .admin-menu{grid-template-columns:repeat(3,1fr)}
      .admin-menu div{text-align:center}
      .widget-window{width:94%}
      .widget-feature{padding:17px}
    }


    @media (max-width:820px){
      .gallery-card{padding:11px;border-radius:22px}
      .gallery-viewer{display:block}
      .gallery-arrow{
        position:absolute;
        top:50%;
        z-index:3;
        width:42px;
        height:42px;
        transform:translateY(-50%);
        background:rgba(5,16,23,.82);
      }
      .gallery-arrow:hover{transform:translateY(-50%)}
      .gallery-arrow-prev{left:9px}
      .gallery-arrow-next{right:9px}
      .gallery-stage img{height:min(72vw,520px)}
      .gallery-lightbox{
        grid-template-columns:1fr;
        padding:60px 14px 20px;
      }
      .lightbox-arrow{
        position:absolute;
        top:50%;
        z-index:2;
        transform:translateY(-50%);
        background:rgba(5,16,23,.82);
      }
      .lightbox-arrow:hover{transform:translateY(-50%)}
      .lightbox-arrow-prev{left:10px}
      .lightbox-arrow-next{right:10px}
      .lightbox-figure img{max-height:calc(100vh - 115px)}
    }

    @media (max-width:560px){
      .gallery-info{display:block}
      .gallery-counter{display:inline-flex;margin-top:10px}
      .gallery-stage{min-height:220px}
      .gallery-stage img{min-height:220px;height:68vw}
      .gallery-zoom-hint{display:none}
      .live-demo-root{
        right:12px;
        bottom:max(12px,env(safe-area-inset-bottom));
      }
      .live-demo-launcher{
        min-width:194px;
        min-height:58px;
        padding:8px 13px 8px 8px;
      }
      .live-demo-launcher-icon{width:41px;height:41px}
      .live-demo-launcher-copy strong{font-size:13px}
      .live-demo-launcher-copy small{font-size:10px}
      .live-demo-panel{
        position:fixed;
        inset:10px;
        width:auto;
        height:auto;
        max-height:none;
        bottom:10px;
        border-radius:22px;
        transform:translateY(20px) scale(.98);
      }
    }



    @media (max-width:760px){
      .overview-slider-section{padding-top:70px;padding-bottom:34px}
      .overview-slider{padding:12px;border-radius:23px}
      .overview-slider-toolbar{gap:10px}
      .overview-slider-toolbar strong{font-size:15px}
      .overview-slider-toolbar span{min-width:49px;padding:5px 8px}
      .overview-slider-arrows button{width:40px;height:40px;border-radius:12px}
      .overview-page{
        grid-template-columns:1fr;
        grid-template-rows:none;
        gap:12px;
      }
      .overview-card{min-height:0;padding:19px;border-radius:18px}
      .overview-card h3{font-size:19px}
      .overview-card li{font-size:13px}
    }

    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
      }
      .reveal{opacity:1;transform:none}
    }
/* =========================================================
   PREMIUM v9 — ОДИН СМЫСЛОВОЙ БЛОК НА СЛАЙД
   ========================================================= */

.page-scroll-progress{
  position:fixed;
  inset:0 0 auto;
  z-index:1200;
  height:3px;
  pointer-events:none;
  background:rgba(255,255,255,.025);
}
.page-scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--teal),var(--cyan),var(--purple),var(--teal));
  background-size:220% 100%;
  box-shadow:0 0 18px rgba(71,214,255,.75);
  animation:premiumGradientFlow 5s linear infinite;
  will-change:transform;
}

.premium-ambient{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.premium-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(12px);
  opacity:.28;
  mix-blend-mode:screen;
  animation:premiumOrbFloat 18s ease-in-out infinite alternate;
}
.premium-orb-one{
  width:36rem;
  height:36rem;
  left:-18rem;
  top:16%;
  background:radial-gradient(circle,rgba(33,200,189,.38),transparent 68%);
}
.premium-orb-two{
  width:42rem;
  height:42rem;
  right:-21rem;
  top:48%;
  background:radial-gradient(circle,rgba(77,143,255,.30),transparent 69%);
  animation-delay:-6s;
}
.premium-orb-three{
  width:30rem;
  height:30rem;
  left:38%;
  bottom:-18rem;
  background:radial-gradient(circle,rgba(169,125,255,.24),transparent 70%);
  animation-delay:-11s;
}

.site-header{
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.site-header.is-scrolled{
  border-bottom-color:rgba(71,214,255,.18);
  background:rgba(5,16,23,.9);
  box-shadow:0 18px 55px rgba(0,0,0,.26),0 1px 0 rgba(71,214,255,.05) inset;
}

.nav-links a{
  position:relative;
  overflow:hidden;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  box-shadow:0 0 12px rgba(71,214,255,.5);
  transition:transform .3s cubic-bezier(.22,.8,.2,1);
}
.nav-links a:hover::after,
.nav-links a.is-active::after{
  transform:scaleX(1);
}

.headline-accent{
  color:transparent;
  background:linear-gradient(100deg,#7ff8e9 0%,var(--teal) 26%,var(--cyan) 55%,#8b9cff 78%,#7ff8e9 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  animation:premiumTextFlow 7s linear infinite;
  filter:drop-shadow(0 10px 32px rgba(33,200,189,.14));
}

.section-kicker{
  position:relative;
  isolation:isolate;
}
.section-kicker::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-10px;
  right:-10px;
  bottom:-3px;
  height:10px;
  border-radius:999px;
  opacity:.18;
  background:linear-gradient(90deg,transparent,var(--teal),var(--cyan),transparent);
  filter:blur(7px);
  animation:premiumPulse 3.8s ease-in-out infinite;
}

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-40%;
  bottom:-40%;
  left:-70%;
  width:38%;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.44),transparent);
  transition:left .75s cubic-bezier(.2,.72,.18,1);
}
.btn:hover::before{left:135%}
.premium-ripple{
  position:absolute;
  z-index:3;
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.45);
  transform:scale(0);
  animation:premiumRipple .72s ease-out forwards;
}

.premium-surface{
  --premium-x:50%;
  --premium-y:50%;
  position:relative;
  isolation:isolate;
}
.premium-surface::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(420px circle at var(--premium-x) var(--premium-y),
      rgba(105,246,232,.14),
      rgba(71,214,255,.055) 37%,
      transparent 68%);
  transition:opacity .38s ease;
}
.premium-surface:hover::before{opacity:1}
.premium-surface > *{
  position:relative;
  z-index:1;
}

.project-shot{
  transition:transform .5s cubic-bezier(.2,.78,.18,1),box-shadow .5s ease,border-color .5s ease;
  transform-style:preserve-3d;
}
.project-shot.premium-tilt{
  transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-2px);
}
.project-shot:hover{
  border-color:rgba(100,237,226,.38);
  box-shadow:0 30px 85px rgba(0,0,0,.43),0 0 0 1px rgba(71,214,255,.08) inset,0 0 46px rgba(33,200,189,.08);
}
.project-shot img{
  transition:transform .7s cubic-bezier(.2,.78,.18,1),filter .7s ease;
}
.project-shot:hover img{
  transform:scale(1.012);
  filter:saturate(1.06) contrast(1.025);
}

.trust-card,
.mini-point,
.checks li{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,background .32s ease,box-shadow .32s ease;
}
.trust-card:hover{
  transform:translateY(-5px);
  border-color:rgba(71,214,255,.32);
  background:linear-gradient(145deg,rgba(26,63,78,.8),rgba(10,28,37,.88));
  box-shadow:0 20px 46px rgba(0,0,0,.23),0 0 26px rgba(33,200,189,.055);
}
.mini-point:hover,
.checks li:hover{
  transform:translateX(5px);
}

.hero-copy.visible .mini-point,
.trust-strip.visible .trust-card{
  animation:premiumItemReveal .72s cubic-bezier(.2,.78,.18,1) both;
  animation-delay:var(--premium-delay,0ms);
}

/* Текстовая карусель: один блок на слайде */
.overview-slider{
  --overview-delay:5600ms;
  overflow:hidden;
  padding:18px;
  border-color:rgba(95,231,220,.25);
  background:
    linear-gradient(150deg,rgba(17,46,59,.93),rgba(6,21,29,.97)),
    radial-gradient(circle at 18% 0%,rgba(33,200,189,.12),transparent 40%);
  box-shadow:
    0 28px 90px rgba(0,0,0,.39),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 70px rgba(33,200,189,.055);
}

.overview-slider-toolbar{
  align-items:center;
  margin-bottom:11px;
}
.overview-slider-heading{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "group counter"
    "title counter";
  column-gap:16px;
  align-items:center;
}
.overview-slider-heading small{
  grid-area:group;
  color:var(--teal);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.overview-slider-heading strong{
  grid-area:title;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px;
}
.overview-slider-heading span{
  grid-area:counter;
}

.overview-autoplay-progress{
  position:relative;
  height:3px;
  margin:0 4px 14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}
.overview-autoplay-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--teal),var(--cyan),var(--purple));
  box-shadow:0 0 14px rgba(71,214,255,.42);
}
.overview-autoplay-progress span.is-running{
  animation:overviewTimer var(--overview-delay) linear forwards;
}

.overview-slider-viewport{
  position:relative;
  min-height:445px;
  padding:3px;
  overflow:hidden;
  perspective:1600px;
}
.overview-slider-viewport::before,
.overview-slider-viewport::after{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:88px;
  pointer-events:none;
  opacity:.65;
}
.overview-slider-viewport::before{
  left:0;
  background:linear-gradient(90deg,rgba(5,18,25,.95),transparent);
}
.overview-slider-viewport::after{
  right:0;
  background:linear-gradient(270deg,rgba(5,18,25,.95),transparent);
}
.overview-slider.is-transitioning .overview-slider-viewport::after{
  width:42%;
  opacity:.32;
  background:linear-gradient(115deg,transparent 25%,rgba(113,250,236,.24) 48%,transparent 72%);
  animation:overviewLightSweep 1.05s cubic-bezier(.2,.74,.18,1);
}

.overview-slider-track{
  display:flex;
  align-items:stretch;
  transition:transform 1.05s cubic-bezier(.16,.82,.18,1);
  transform-style:preserve-3d;
  will-change:transform;
}
.overview-page{
  flex:0 0 100%;
  display:flex;
  align-items:stretch;
  padding:7px;
  opacity:.08;
  filter:blur(10px) saturate(.65);
  transform:scale(.915) rotateY(5deg);
  transform-origin:center center;
  pointer-events:none;
  transition:
    opacity .95s ease,
    filter 1.05s ease,
    transform 1.05s cubic-bezier(.16,.82,.18,1);
}
.overview-page.is-before{transform:scale(.915) rotateY(-5deg)}
.overview-page.is-after{transform:scale(.915) rotateY(5deg)}
.overview-page.is-active{
  opacity:1;
  filter:none;
  transform:scale(1) rotateY(0);
  pointer-events:auto;
}

.overview-card{
  width:100%;
  min-height:425px;
  padding:38px 42px 36px;
  display:block;
  border-color:rgba(255,255,255,.11);
  background:
    linear-gradient(145deg,rgba(27,61,75,.96),rgba(8,25,34,.985)),
    radial-gradient(circle at 85% 12%,rgba(71,214,255,.11),transparent 38%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.31),
    0 1px 0 rgba(255,255,255,.045) inset;
}
.overview-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.06),transparent 21%),
    radial-gradient(circle at 100% 0%,rgba(33,200,189,.14),transparent 38%);
  opacity:.75;
}
.overview-card-number{
  position:absolute;
  right:30px;
  top:22px;
  color:rgba(255,255,255,.055);
  font-size:clamp(62px,8vw,112px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.07em;
  user-select:none;
}
.overview-card-icon{
  width:62px;
  height:62px;
  margin-bottom:18px;
  border-radius:19px;
  font-size:21px;
  box-shadow:
    0 16px 38px rgba(33,200,189,.23),
    0 0 0 1px rgba(255,255,255,.26) inset;
}
.overview-card-group{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:11px;
  padding:5px 10px;
  border:1px solid rgba(71,214,255,.18);
  border-radius:999px;
  color:#b8ecf8;
  background:rgba(71,214,255,.055);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.overview-card h3{
  max-width:880px;
  margin-bottom:14px;
  font-size:clamp(28px,4vw,43px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.overview-card p{
  max-width:900px;
  margin-bottom:18px;
  color:#b9cbd3;
  font-size:16px;
  line-height:1.65;
}
.overview-card ul{
  max-width:1040px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 20px;
}
.overview-card li{
  min-height:42px;
  padding:10px 12px 10px 38px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  color:#e4eff3;
  background:rgba(255,255,255,.028);
  font-size:14px;
  line-height:1.5;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.overview-card li:hover{
  transform:translateX(4px);
  border-color:rgba(71,214,255,.19);
  background:rgba(71,214,255,.055);
}
.overview-card li::before{
  left:12px;
  top:50%;
  transform:translateY(-50%);
}
.overview-card-important{
  border-color:rgba(255,184,82,.32);
  background:
    linear-gradient(145deg,rgba(68,50,23,.76),rgba(12,27,35,.985)),
    radial-gradient(circle at 86% 14%,rgba(255,173,66,.15),transparent 40%);
}

.overview-page.is-active .overview-card-icon{
  animation:overviewIconIn .82s .16s cubic-bezier(.18,.84,.18,1) both;
}
.overview-page.is-active .overview-card-group{
  animation:overviewContentIn .72s .22s cubic-bezier(.18,.84,.18,1) both;
}
.overview-page.is-active .overview-card h3{
  animation:overviewContentIn .82s .28s cubic-bezier(.18,.84,.18,1) both;
}
.overview-page.is-active .overview-card p{
  animation:overviewContentIn .82s .34s cubic-bezier(.18,.84,.18,1) both;
}
.overview-page.is-active .overview-card li{
  animation:overviewListIn .7s cubic-bezier(.18,.84,.18,1) both;
}
.overview-page.is-active .overview-card li:nth-child(1){animation-delay:.38s}
.overview-page.is-active .overview-card li:nth-child(2){animation-delay:.43s}
.overview-page.is-active .overview-card li:nth-child(3){animation-delay:.48s}
.overview-page.is-active .overview-card li:nth-child(4){animation-delay:.53s}
.overview-page.is-active .overview-card li:nth-child(5){animation-delay:.58s}
.overview-page.is-active .overview-card li:nth-child(6){animation-delay:.63s}

.overview-dots{
  max-width:720px;
  margin:16px auto 2px;
  gap:5px;
}
.overview-dots button{
  flex:1 1 20px;
  width:auto;
  max-width:38px;
  height:5px;
  border-radius:999px;
  background:rgba(117,155,170,.28);
  transition:flex .45s cubic-bezier(.2,.78,.18,1),background .35s ease,box-shadow .35s ease;
}
.overview-dots button.active{
  flex-grow:2.4;
  width:auto;
  background:linear-gradient(90deg,var(--teal),var(--cyan),var(--purple));
  box-shadow:0 0 18px rgba(71,214,255,.34);
}

.gallery-card{
  transition:transform .45s cubic-bezier(.2,.78,.18,1),border-color .45s ease,box-shadow .45s ease;
}
.gallery-card:hover{
  transform:translateY(-4px);
  border-color:rgba(99,225,235,.38);
  box-shadow:0 34px 100px rgba(0,0,0,.42),0 0 60px rgba(71,214,255,.055);
}
.gallery-stage img{
  transition:transform .75s cubic-bezier(.2,.78,.18,1),filter .75s ease,opacity .45s ease;
}
.gallery-stage:hover img{
  transform:scale(1.012);
  filter:saturate(1.07) contrast(1.025);
}

.cta{
  overflow:hidden;
}
.cta::after{
  content:"";
  position:absolute;
  inset:-60% -20%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.075) 50%,transparent 58%);
  transform:translateX(-70%) rotate(4deg);
  animation:premiumCtaSweep 6.5s ease-in-out infinite;
}

@keyframes overviewTimer{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes overviewLightSweep{
  from{transform:translateX(-180%) skewX(-16deg)}
  to{transform:translateX(260%) skewX(-16deg)}
}
@keyframes overviewIconIn{
  from{opacity:0;transform:translateY(15px) scale(.72) rotate(-8deg);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes overviewContentIn{
  from{opacity:0;transform:translateY(18px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes overviewListIn{
  from{opacity:0;transform:translateX(-15px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes premiumGradientFlow{
  to{background-position:220% 0}
}
@keyframes premiumTextFlow{
  to{background-position:220% center}
}
@keyframes premiumOrbFloat{
  from{transform:translate3d(-2%,0,0) scale(.96)}
  to{transform:translate3d(6%,-7%,0) scale(1.08)}
}
@keyframes premiumPulse{
  0%,100%{opacity:.12;transform:scaleX(.82)}
  50%{opacity:.3;transform:scaleX(1)}
}
@keyframes premiumRipple{
  0%{transform:scale(0);opacity:.72}
  100%{transform:scale(22);opacity:0}
}
@keyframes premiumItemReveal{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes premiumCtaSweep{
  0%,52%{transform:translateX(-70%) rotate(4deg)}
  78%,100%{transform:translateX(70%) rotate(4deg)}
}

@media (max-width:820px){
  .overview-slider{padding:12px}
  .overview-slider-viewport{min-height:500px}
  .overview-slider-viewport::before,
  .overview-slider-viewport::after{width:34px}
  .overview-card{
    min-height:480px;
    padding:28px 24px 26px;
  }
  .overview-card-number{
    right:18px;
    top:20px;
    font-size:70px;
  }
  .overview-card h3{font-size:clamp(27px,7vw,38px)}
  .overview-card ul{grid-template-columns:1fr}
  .overview-slider-heading strong{font-size:15px}
  .overview-slider-heading small{font-size:9px}
  .overview-dots{gap:3px}
  .overview-dots button{max-width:24px}
}

@media (max-width:520px){
  .overview-slider-toolbar{
    align-items:flex-start;
  }
  .overview-slider-heading{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:9px;
  }
  .overview-slider-heading strong{
    max-width:205px;
    font-size:14px;
  }
  .overview-slider-arrows button{
    width:38px;
    height:38px;
  }
  .overview-slider-viewport{min-height:555px}
  .overview-page{padding:3px}
  .overview-card{
    min-height:540px;
    padding:24px 18px 23px;
  }
  .overview-card-icon{
    width:54px;
    height:54px;
    border-radius:17px;
  }
  .overview-card h3{font-size:29px}
  .overview-card p{font-size:14px}
  .overview-card li{
    min-height:0;
    padding:9px 10px 9px 35px;
    font-size:12.5px;
  }
  .overview-card li::before{left:10px}
  .overview-dots{
    flex-wrap:wrap;
    max-width:270px;
  }
  .overview-dots button{
    flex:0 0 11px;
    width:11px;
    height:5px;
  }
  .overview-dots button.active{
    flex-basis:28px;
    width:28px;
  }
}

@media (prefers-reduced-motion:reduce){
  .premium-orb,
  .headline-accent,
  .page-scroll-progress span,
  .cta::after,
  .section-kicker::after{
    animation:none!important;
  }
  .overview-slider-track,
  .overview-page,
  .project-shot,
  .gallery-card{
    transition-duration:.01ms!important;
  }
  .overview-page.is-active .overview-card-icon,
  .overview-page.is-active .overview-card-group,
  .overview-page.is-active .overview-card h3,
  .overview-page.is-active .overview-card p,
  .overview-page.is-active .overview-card li{
    animation:none!important;
  }
}
/* =========================================================
   PREMIUM v10 — ГАРАНТИРОВАННЫЙ АВТОПОКАЗ И ЯРКИЕ ЭФФЕКТЫ
   ========================================================= */

.overview-slider{
  --overview-delay:4200ms;
  --overview-transition:920ms;
  background:
    radial-gradient(circle at 12% -5%,rgba(39,236,216,.18),transparent 34%),
    radial-gradient(circle at 93% 18%,rgba(104,92,255,.17),transparent 38%),
    linear-gradient(150deg,rgba(17,48,61,.97),rgba(5,17,25,.99));
  border-color:rgba(94,239,225,.34);
  box-shadow:
    0 34px 110px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 90px rgba(25,214,200,.09);
}

.overview-slider::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      transparent 0deg,
      rgba(37,229,212,.28) 42deg,
      transparent 92deg,
      transparent 205deg,
      rgba(120,89,255,.24) 258deg,
      transparent 320deg
    );
  opacity:.48;
  filter:blur(16px);
  animation:overviewBorderOrbit 10s linear infinite;
}

.overview-slider-toolbar,
.overview-autoplay-progress,
.overview-slider-viewport,
.overview-dots{
  position:relative;
  z-index:2;
}

.overview-slider-heading{
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:
    "group counter autoplay"
    "title counter autoplay";
}

.overview-autoplay-badge{
  grid-area:autoplay;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:6px 10px;
  border:1px solid rgba(91,240,225,.22);
  border-radius:999px;
  color:#d8fffa;
  background:linear-gradient(135deg,rgba(33,200,189,.16),rgba(71,214,255,.07));
  box-shadow:0 8px 24px rgba(0,0,0,.16),0 0 18px rgba(33,200,189,.05);
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
  white-space:nowrap;
}
.overview-autoplay-badge i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#6af2a7;
  box-shadow:0 0 0 0 rgba(106,242,167,.54);
  animation:overviewLivePulse 1.5s ease-out infinite;
}

.overview-autoplay-progress{
  height:5px;
  background:rgba(255,255,255,.075);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.overview-autoplay-progress::after{
  content:"";
  position:absolute;
  inset:-7px 0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(71,214,255,.15),transparent);
  filter:blur(8px);
}
.overview-autoplay-progress span{
  background:
    linear-gradient(90deg,#2ae0cb,#52c8ff 45%,#9d77ff 80%,#2ae0cb);
  background-size:220% 100%;
  animation-timing-function:linear;
}
.overview-autoplay-progress span.is-running{
  animation:
    overviewTimer var(--overview-delay) linear forwards,
    premiumGradientFlow 2.2s linear infinite;
}

.overview-slider-viewport{
  min-height:470px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.045);
  border-radius:22px;
  background:
    linear-gradient(rgba(255,255,255,.012),rgba(255,255,255,.012)),
    radial-gradient(circle at 50% 115%,rgba(21,205,192,.11),transparent 45%);
  box-shadow:0 18px 44px rgba(0,0,0,.24) inset;
}

.overview-slider-viewport::before{
  width:130px;
  background:linear-gradient(90deg,rgba(3,14,20,.98),rgba(3,14,20,.62),transparent);
}
.overview-slider-viewport::after{
  width:130px;
  background:linear-gradient(270deg,rgba(3,14,20,.98),rgba(3,14,20,.62),transparent);
}

.overview-slider-track{
  position:relative;
  display:block;
  min-height:468px;
  transform:none!important;
  transition:none!important;
  perspective:1600px;
}

.overview-page{
  position:absolute;
  inset:0;
  display:flex;
  padding:8px;
  opacity:0;
  visibility:hidden;
  filter:blur(18px) brightness(.68) saturate(.6);
  transform:translate3d(10%,0,-120px) scale(.9) rotateY(-9deg);
  pointer-events:none;
  transition:none;
  will-change:transform,opacity,filter;
}

.overview-page.is-active{
  z-index:3;
  opacity:1;
  visibility:visible;
  filter:none;
  transform:none;
  pointer-events:auto;
}

.overview-page.is-entering-next{
  animation:overviewEnterNext var(--overview-transition) cubic-bezier(.16,.84,.18,1) both;
}
.overview-page.is-entering-previous{
  animation:overviewEnterPrevious var(--overview-transition) cubic-bezier(.16,.84,.18,1) both;
}
.overview-page.is-leaving-next{
  z-index:2;
  visibility:visible;
  animation:overviewLeaveNext var(--overview-transition) cubic-bezier(.22,.66,.2,1) both;
}
.overview-page.is-leaving-previous{
  z-index:2;
  visibility:visible;
  animation:overviewLeavePrevious var(--overview-transition) cubic-bezier(.22,.66,.2,1) both;
}

.overview-slider.is-transitioning .overview-slider-viewport{
  animation:overviewViewportPulse var(--overview-transition) ease both;
}
.overview-slider.is-transitioning .overview-slider-viewport::after{
  width:52%;
  opacity:.65;
  background:linear-gradient(
    112deg,
    transparent 18%,
    rgba(255,255,255,.04) 35%,
    rgba(80,245,227,.36) 50%,
    rgba(124,91,255,.22) 60%,
    transparent 79%
  );
  animation:overviewLightSweep var(--overview-transition) cubic-bezier(.18,.78,.18,1);
}

.overview-card{
  min-height:450px;
  overflow:hidden;
  border:1px solid rgba(127,247,236,.17);
  background:
    radial-gradient(circle at 92% 8%,rgba(106,74,255,.16),transparent 33%),
    radial-gradient(circle at 10% 92%,rgba(24,220,200,.14),transparent 36%),
    linear-gradient(145deg,rgba(28,66,80,.97),rgba(7,23,32,.99));
}
.overview-card::after{
  content:"";
  position:absolute;
  inset:-70% -30%;
  pointer-events:none;
  background:linear-gradient(
    110deg,
    transparent 42%,
    rgba(255,255,255,.08) 49%,
    rgba(89,242,228,.16) 52%,
    transparent 60%
  );
  transform:translateX(-62%) rotate(8deg);
}
.overview-page.is-active .overview-card::after{
  animation:overviewCardShine 1.25s .1s ease-out both;
}

.overview-card-number{
  text-shadow:0 0 42px rgba(105,239,225,.1);
}

.overview-card-icon{
  position:relative;
}
.overview-card-icon::after{
  content:"";
  position:absolute;
  inset:-9px;
  z-index:-1;
  border-radius:24px;
  border:1px solid rgba(93,245,230,.2);
  opacity:.62;
  animation:overviewIconOrbit 4s linear infinite;
}

.overview-dots button{
  position:relative;
  overflow:hidden;
}
.overview-dots button.active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:overviewDotShine 1.4s ease-in-out infinite;
}

.cursor-aura{
  --cursor-x:50vw;
  --cursor-y:50vh;
  position:fixed;
  z-index:999;
  left:0;
  top:0;
  width:1px;
  height:1px;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
}
.cursor-aura::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  left:calc(var(--cursor-x) - 140px);
  top:calc(var(--cursor-y) - 140px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(67,233,218,.095),rgba(72,149,255,.035) 38%,transparent 68%);
  filter:blur(5px);
  mix-blend-mode:screen;
}
.cursor-aura.is-visible{opacity:1}

.premium-back-to-top{
  position:fixed;
  z-index:950;
  right:22px;
  bottom:22px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(99,239,226,.3);
  border-radius:17px;
  color:#eafffc;
  background:
    linear-gradient(145deg,rgba(25,74,86,.92),rgba(7,26,36,.96));
  box-shadow:
    0 18px 46px rgba(0,0,0,.35),
    0 0 28px rgba(39,220,204,.1),
    0 1px 0 rgba(255,255,255,.06) inset;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.84);
  cursor:pointer;
  transition:opacity .3s ease,visibility .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
.premium-back-to-top span{
  font-size:22px;
  transition:transform .3s ease;
}
.premium-back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.premium-back-to-top:hover{
  border-color:rgba(112,255,241,.62);
  transform:translateY(-4px);
}
.premium-back-to-top:hover span{transform:translateY(-3px)}

.hero-visual{
  position:relative;
  transform:translate3d(var(--hero-parallax-x,0),var(--hero-parallax-y,0),0);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.hero-visual::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:8% 5%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 45%,rgba(35,224,205,.19),transparent 42%),
    radial-gradient(circle at 72% 40%,rgba(111,78,255,.18),transparent 44%);
  filter:blur(34px);
  animation:heroHaloBreathe 5.5s ease-in-out infinite;
}

/* Премиальная секция ключевых направлений */
.keywords-section{
  position:relative;
  padding:36px 0 100px;
  overflow:hidden;
}
.keywords-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 20%,rgba(36,223,205,.09),transparent 30%),
    radial-gradient(circle at 92% 72%,rgba(115,81,255,.1),transparent 33%);
}

.keywords-shell{
  position:relative;
  overflow:hidden;
  padding:30px;
  border:1px solid rgba(91,235,222,.22);
  border-radius:32px;
  background:
    radial-gradient(circle at 8% 0%,rgba(38,219,203,.13),transparent 30%),
    radial-gradient(circle at 95% 10%,rgba(107,77,255,.13),transparent 34%),
    linear-gradient(145deg,rgba(12,39,51,.95),rgba(5,18,26,.98));
  box-shadow:
    0 38px 120px rgba(0,0,0,.43),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 90px rgba(32,218,202,.055);
}
.keywords-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius:inherit;
  background:conic-gradient(from 20deg,transparent,rgba(52,228,211,.25),transparent 28%,transparent 68%,rgba(116,80,255,.24),transparent);
  filter:blur(18px);
  opacity:.55;
  animation:overviewBorderOrbit 14s linear infinite reverse;
}

.keywords-heading{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:end;
  margin-bottom:25px;
}
.keywords-heading h2{
  max-width:850px;
  margin:8px 0 12px;
  font-size:clamp(31px,4.6vw,58px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.keywords-heading p{
  max-width:760px;
  margin:0;
  color:#a9c2cd;
  font-size:15px;
  line-height:1.7;
}
.keywords-total{
  min-width:145px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid rgba(94,240,225,.2);
  border-radius:20px;
  background:rgba(11,37,48,.72);
  box-shadow:0 16px 38px rgba(0,0,0,.2),0 0 28px rgba(38,219,203,.05);
}
.keywords-total span{
  color:#78f4e5;
  font-size:38px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
}
.keywords-total small{
  color:#bdd2da;
  font-size:10px;
  line-height:1.25;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.keyword-groups{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.keyword-group{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(22,57,70,.78),rgba(7,24,33,.88));
  transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.keyword-group::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background:radial-gradient(circle at 100% 0%,rgba(55,226,210,.12),transparent 42%);
}
.keyword-group:nth-child(even)::before{
  background:radial-gradient(circle at 100% 0%,rgba(115,83,255,.13),transparent 42%);
}
.keyword-group:hover{
  transform:translateY(-5px);
  border-color:rgba(95,241,226,.27);
  box-shadow:0 24px 52px rgba(0,0,0,.25),0 0 32px rgba(37,216,201,.055);
}
.keyword-group header{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:15px;
}
.keyword-group-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(101,245,232,.22);
  border-radius:14px;
  color:#78f3e5;
  background:rgba(34,210,194,.09);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  font-size:19px;
}
.keyword-group header small{
  display:block;
  margin-bottom:3px;
  color:#6edbce;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.keyword-group header h3{
  margin:0;
  font-size:17px;
  line-height:1.25;
}
.keyword-group header strong{
  min-width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#d8e8ee;
  background:rgba(255,255,255,.055);
  font-size:12px;
}
.keyword-chip-list{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.keyword-chip{
  position:relative;
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  min-height:36px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  color:#cfdee4;
  background:rgba(255,255,255,.025);
  font-size:11.5px;
  line-height:1.45;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),color .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
}
.keyword-chip i{
  flex:0 0 auto;
  width:6px;
  height:6px;
  margin-top:5px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--cyan));
  box-shadow:0 0 10px rgba(43,224,207,.42);
}
.keyword-chip:hover{
  z-index:2;
  transform:translateY(-3px);
  color:#f4ffff;
  border-color:rgba(91,239,224,.25);
  background:rgba(48,215,200,.075);
  box-shadow:0 10px 24px rgba(0,0,0,.18),0 0 20px rgba(33,200,189,.05);
}
.keywords-shell.visible .keyword-chip{
  animation:keywordChipReveal .55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc((var(--keyword-order) - 1) * 18ms);
}
.keywords-footer-line{
  position:relative;
  z-index:2;
  margin-top:17px;
  padding:15px 17px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 24px;
  border:1px solid rgba(101,238,225,.14);
  border-radius:17px;
  background:rgba(4,17,24,.45);
}
.keywords-footer-line span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#a9c2cc;
  font-size:11px;
  font-weight:700;
}
.keywords-footer-line i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#65eaa3;
  box-shadow:0 0 12px rgba(101,234,163,.52);
}

@keyframes overviewEnterNext{
  0%{
    opacity:0;
    filter:blur(20px) brightness(.64) saturate(.55);
    transform:translate3d(23%,0,-150px) scale(.86) rotateY(-13deg);
    clip-path:inset(0 0 0 65% round 24px);
  }
  58%{opacity:1}
  100%{
    opacity:1;
    filter:none;
    transform:none;
    clip-path:inset(0 0 0 0 round 24px);
  }
}
@keyframes overviewLeaveNext{
  0%{opacity:1;filter:none;transform:none;clip-path:inset(0 0 0 0 round 24px)}
  100%{
    opacity:0;
    filter:blur(17px) brightness(.68);
    transform:translate3d(-18%,0,-120px) scale(.9) rotateY(10deg);
    clip-path:inset(0 70% 0 0 round 24px);
  }
}
@keyframes overviewEnterPrevious{
  0%{
    opacity:0;
    filter:blur(20px) brightness(.64) saturate(.55);
    transform:translate3d(-23%,0,-150px) scale(.86) rotateY(13deg);
    clip-path:inset(0 65% 0 0 round 24px);
  }
  58%{opacity:1}
  100%{
    opacity:1;
    filter:none;
    transform:none;
    clip-path:inset(0 0 0 0 round 24px);
  }
}
@keyframes overviewLeavePrevious{
  0%{opacity:1;filter:none;transform:none;clip-path:inset(0 0 0 0 round 24px)}
  100%{
    opacity:0;
    filter:blur(17px) brightness(.68);
    transform:translate3d(18%,0,-120px) scale(.9) rotateY(-10deg);
    clip-path:inset(0 0 0 70% round 24px);
  }
}
@keyframes overviewViewportPulse{
  0%,100%{box-shadow:0 18px 44px rgba(0,0,0,.24) inset}
  48%{box-shadow:0 18px 44px rgba(0,0,0,.24) inset,0 0 0 1px rgba(95,245,231,.22),0 0 42px rgba(46,222,206,.14)}
}
@keyframes overviewCardShine{
  0%{transform:translateX(-68%) rotate(8deg);opacity:0}
  18%{opacity:1}
  100%{transform:translateX(68%) rotate(8deg);opacity:0}
}
@keyframes overviewIconOrbit{
  to{transform:rotate(360deg)}
}
@keyframes overviewDotShine{
  from{transform:translateX(-180%)}
  to{transform:translateX(180%)}
}
@keyframes overviewLivePulse{
  0%{box-shadow:0 0 0 0 rgba(106,242,167,.55)}
  75%,100%{box-shadow:0 0 0 8px rgba(106,242,167,0)}
}
@keyframes overviewBorderOrbit{
  to{transform:rotate(360deg)}
}
@keyframes heroHaloBreathe{
  0%,100%{opacity:.65;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes keywordChipReveal{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:none}
}

@media (max-width:900px){
  .overview-slider-heading{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "group counter"
      "title counter"
      "autoplay autoplay";
  }
  .overview-autoplay-badge{
    width:max-content;
    margin-top:7px;
  }
  .keyword-groups{grid-template-columns:1fr}
}

@media (max-width:620px){
  .overview-slider-viewport{min-height:610px}
  .overview-slider-track{min-height:608px}
  .overview-card{min-height:590px}
  .overview-autoplay-badge{
    min-height:27px;
    padding:4px 8px;
    font-size:9px;
  }
  .keywords-section{padding:22px 0 74px}
  .keywords-shell{padding:20px 14px;border-radius:24px}
  .keywords-heading{
    grid-template-columns:1fr;
    gap:16px;
  }
  .keywords-total{
    width:max-content;
    min-width:0;
  }
  .keyword-group{padding:15px}
  .keyword-chip{width:100%}
  .premium-back-to-top{
    right:14px;
    bottom:14px;
    width:46px;
    height:46px;
  }
}

@media (prefers-reduced-motion:reduce){
  .overview-page.is-entering-next,
  .overview-page.is-entering-previous{
    animation:overviewReducedEnter .25s ease both!important;
  }
  .overview-page.is-leaving-next,
  .overview-page.is-leaving-previous{
    animation:overviewReducedLeave .25s ease both!important;
  }
  .overview-autoplay-progress span.is-running{
    animation:overviewTimer var(--overview-delay) linear forwards!important;
  }
  .overview-slider::after,
  .overview-autoplay-badge i,
  .overview-card-icon::after,
  .hero-visual::before,
  .keywords-shell::before{
    animation:none!important;
  }
}
@keyframes overviewReducedEnter{
  from{opacity:0}
  to{opacity:1}
}
@keyframes overviewReducedLeave{
  from{opacity:1}
  to{opacity:0}
}
/* =========================================================
   v11 — КНОПКА ОСТАНОВКИ / ПРОДОЛЖЕНИЯ АВТОПОКАЗА
   ========================================================= */

.overview-slider-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
}

.overview-autoplay-toggle{
  position:relative;
  isolation:isolate;
  min-width:142px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  overflow:hidden;
  border:1px solid rgba(255,190,88,.58);
  border-radius:14px;
  padding:0 16px;
  color:#fffaf2;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,236,186,.22),transparent 30%),
    linear-gradient(135deg,#ff9f1c 0%,#f47b20 48%,#ffb52e 100%);
  background-size:170% 170%;
  box-shadow:
    0 14px 34px rgba(244,123,32,.29),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 28px rgba(255,156,42,.14);
  font:inherit;
  font-size:12px;
  font-weight:900;
  letter-spacing:.025em;
  cursor:pointer;
  transform:translateZ(0);
  animation:
    overviewTogglePulse 2.15s ease-in-out infinite,
    overviewToggleGradient 4.2s ease-in-out infinite;
  transition:
    transform .3s cubic-bezier(.2,.82,.2,1),
    box-shadow .3s ease,
    border-color .3s ease,
    filter .3s ease;
}

.overview-autoplay-toggle::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  bottom:-70%;
  left:-55%;
  width:34%;
  transform:skewX(-24deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      rgba(255,255,255,.78),
      rgba(255,255,255,.16),
      transparent
    );
  animation:overviewToggleShimmer 2.85s ease-in-out infinite;
}

.overview-autoplay-toggle::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:3px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

.overview-autoplay-toggle:hover{
  transform:translateY(-3px) scale(1.025);
  border-color:rgba(255,223,148,.88);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:
    0 20px 44px rgba(244,123,32,.38),
    0 0 0 1px rgba(255,255,255,.17) inset,
    0 0 38px rgba(255,164,54,.23);
}

.overview-autoplay-toggle:active{
  transform:translateY(0) scale(.98);
}

.overview-autoplay-toggle:focus-visible{
  outline:3px solid rgba(255,192,96,.3);
  outline-offset:4px;
}

.overview-autoplay-toggle-icon{
  position:relative;
  width:14px;
  height:16px;
  flex:0 0 auto;
}

.overview-autoplay-toggle-icon::before,
.overview-autoplay-toggle-icon::after{
  content:"";
  position:absolute;
  top:1px;
  width:4px;
  height:14px;
  border-radius:2px;
  background:#fffdf8;
  box-shadow:0 0 10px rgba(255,255,255,.3);
  transition:
    width .28s ease,
    height .28s ease,
    transform .34s cubic-bezier(.2,.8,.2,1),
    clip-path .28s ease,
    opacity .28s ease;
}

.overview-autoplay-toggle-icon::before{
  left:1px;
}

.overview-autoplay-toggle-icon::after{
  right:1px;
}

.overview-autoplay-toggle.is-paused{
  background:
    radial-gradient(circle at 20% 18%,rgba(255,242,203,.24),transparent 30%),
    linear-gradient(135deg,#ffad25 0%,#e96c13 50%,#ff9b1a 100%);
  box-shadow:
    0 14px 34px rgba(234,108,19,.28),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 28px rgba(255,143,30,.13);
  animation:
    overviewTogglePausedPulse 2.4s ease-in-out infinite,
    overviewToggleGradient 4.2s ease-in-out infinite;
}

.overview-autoplay-toggle.is-paused .overview-autoplay-toggle-icon::before{
  left:2px;
  top:1px;
  width:12px;
  height:14px;
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform:none;
}

.overview-autoplay-toggle.is-paused .overview-autoplay-toggle-icon::after{
  opacity:0;
  transform:scale(.4);
}

.overview-slider.is-user-paused .overview-autoplay-progress span{
  animation:none!important;
  transform:scaleX(0)!important;
}

.overview-slider.is-user-paused .overview-autoplay-badge{
  color:#ffe6c5;
  border-color:rgba(255,172,67,.32);
  background:rgba(255,132,27,.08);
}

.overview-slider.is-user-paused .overview-autoplay-badge i{
  background:#ff9d2b;
  animation:none;
  box-shadow:0 0 12px rgba(255,157,43,.52);
}

@keyframes overviewTogglePulse{
  0%,100%{
    box-shadow:
      0 14px 34px rgba(244,123,32,.29),
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 22px rgba(255,156,42,.12);
  }
  50%{
    box-shadow:
      0 18px 42px rgba(244,123,32,.4),
      0 0 0 1px rgba(255,255,255,.17) inset,
      0 0 38px rgba(255,156,42,.3);
  }
}

@keyframes overviewTogglePausedPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025)}
}

@keyframes overviewToggleGradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

@keyframes overviewToggleShimmer{
  0%,48%{left:-55%;opacity:0}
  58%{opacity:1}
  82%,100%{left:135%;opacity:0}
}

@media (max-width:760px){
  .overview-slider-toolbar{
    align-items:flex-start;
  }

  .overview-slider-actions{
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
  }

  .overview-autoplay-toggle{
    min-width:132px;
    height:40px;
    padding:0 13px;
    border-radius:12px;
    font-size:11px;
  }
}

@media (max-width:520px){
  .overview-slider-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }

  .overview-slider-actions{
    width:100%;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .overview-autoplay-toggle{
    min-width:137px;
  }
}

@media (prefers-reduced-motion:reduce){
  .overview-autoplay-toggle,
  .overview-autoplay-toggle::before{
    animation-duration:4.5s!important;
  }
}

/* =========================================================
   v12 — КРУПНЫЙ ОРАНЖЕВЫЙ БЛОК КЛЮЧЕВЫХ ПРЕИМУЩЕСТВ
   ========================================================= */

.hero-points{
  position:relative;
  isolation:isolate;
  max-width:820px;
  gap:13px;
  padding:15px;
  border:1px solid rgba(255,160,36,.58);
  border-radius:23px;
  background:
    radial-gradient(circle at 0 0,rgba(255,177,65,.15),transparent 32%),
    radial-gradient(circle at 100% 100%,rgba(255,111,20,.10),transparent 36%),
    linear-gradient(145deg,rgba(53,35,18,.78),rgba(10,25,32,.9));
  box-shadow:
    0 22px 55px rgba(0,0,0,.29),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 38px rgba(255,137,25,.12);
  overflow:hidden;
}

.hero-points::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-80% -25%;
  pointer-events:none;
  background:
    linear-gradient(
      112deg,
      transparent 39%,
      rgba(255,255,255,.035) 45%,
      rgba(255,190,91,.23) 50%,
      rgba(255,255,255,.045) 56%,
      transparent 62%
    );
  transform:translateX(-62%) rotate(5deg);
  animation:heroBenefitsSweep 5.8s ease-in-out infinite;
}

.hero-points::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.62;
  background:
    conic-gradient(
      from 180deg,
      transparent 0deg,
      rgba(255,171,48,.46) 48deg,
      transparent 102deg,
      transparent 224deg,
      rgba(255,112,20,.38) 276deg,
      transparent 335deg
    );
  filter:blur(15px);
  animation:heroBenefitsOrbit 12s linear infinite;
}

.hero-points .mini-point{
  position:relative;
  min-height:78px;
  display:flex;
  align-items:center;
  gap:13px;
  overflow:hidden;
  padding:15px 16px;
  border:1px solid rgba(255,169,49,.62);
  border-radius:16px;
  color:#fff7ec;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,205,125,.13),transparent 34%),
    linear-gradient(145deg,rgba(89,52,19,.72),rgba(28,29,28,.83));
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 20px rgba(255,133,21,.07);
  font-size:16.5px;
  font-weight:850;
  line-height:1.35;
  letter-spacing:-.01em;
  transition:
    transform .34s cubic-bezier(.2,.82,.2,1),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.hero-points .mini-point::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 15% 50%,rgba(255,192,88,.14),transparent 46%);
  transition:opacity .3s ease;
}

.hero-points .mini-point:hover{
  transform:translateY(-4px) scale(1.012);
  border-color:rgba(255,203,117,.92);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,216,151,.2),transparent 35%),
    linear-gradient(145deg,rgba(112,62,20,.82),rgba(34,31,27,.9));
  box-shadow:
    0 18px 38px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.075) inset,
    0 0 30px rgba(255,145,31,.18);
}

.hero-points .mini-point:hover::before{
  opacity:1;
}

.hero-points .mini-point i{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,224,166,.72);
  border-radius:11px;
  color:#3b1a00;
  background:
    linear-gradient(135deg,#ffd27a 0%,#ff9b20 52%,#ff6f16 100%);
  box-shadow:
    0 8px 20px rgba(255,119,18,.27),
    0 0 0 1px rgba(255,255,255,.27) inset,
    0 0 18px rgba(255,151,38,.24);
  font-size:18px;
  font-weight:1000;
  text-shadow:0 1px 0 rgba(255,255,255,.24);
  animation:heroBenefitCheckPulse 2.6s ease-in-out infinite;
}

.hero-points .mini-point:nth-child(2) i{animation-delay:.18s}
.hero-points .mini-point:nth-child(3) i{animation-delay:.36s}
.hero-points .mini-point:nth-child(4) i{animation-delay:.54s}

.hero-points .mini-point span{
  position:relative;
  z-index:1;
  display:block;
  text-wrap:balance;
}

@keyframes heroBenefitsSweep{
  0%,45%{transform:translateX(-62%) rotate(5deg);opacity:0}
  54%{opacity:1}
  78%,100%{transform:translateX(62%) rotate(5deg);opacity:0}
}

@keyframes heroBenefitsOrbit{
  to{transform:rotate(360deg)}
}

@keyframes heroBenefitCheckPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 8px 20px rgba(255,119,18,.27),
      0 0 0 1px rgba(255,255,255,.27) inset,
      0 0 15px rgba(255,151,38,.18);
  }
  50%{
    transform:scale(1.075);
    box-shadow:
      0 11px 25px rgba(255,119,18,.38),
      0 0 0 1px rgba(255,255,255,.34) inset,
      0 0 28px rgba(255,151,38,.4);
  }
}

@media (max-width:760px){
  .hero-points{
    gap:10px;
    padding:12px;
    border-radius:20px;
  }

  .hero-points .mini-point{
    min-height:70px;
    padding:13px 14px;
    font-size:15.5px;
  }
}

@media (max-width:520px){
  .hero-points{
    width:100%;
  }

  .hero-points .mini-point{
    min-height:68px;
    font-size:15px;
  }

  .hero-points .mini-point i{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:17px;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-points::before,
  .hero-points::after,
  .hero-points .mini-point i{
    animation:none!important;
  }
}
/* =========================================================
   v13 — ДОПОЛНИТЕЛЬНЫЕ ПРЕИМУЩЕСТВА
   ========================================================= */

.hero-points{
  width:100%;
  max-width:860px;
  grid-auto-rows:minmax(78px,auto);
}

.hero-points .mini-point{
  height:100%;
}

.hero-points .mini-point-wide{
  grid-column:1 / -1;
  min-height:84px;
  padding-left:20px;
  padding-right:22px;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,214,145,.19),transparent 31%),
    radial-gradient(circle at 92% 84%,rgba(255,112,20,.12),transparent 35%),
    linear-gradient(145deg,rgba(105,58,19,.82),rgba(28,29,28,.9));
  border-color:rgba(255,191,84,.76);
  box-shadow:
    0 15px 34px rgba(0,0,0,.27),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 28px rgba(255,143,25,.13);
}

.hero-points .mini-point-wide span{
  font-size:17px;
  line-height:1.45;
}

.hero-points .mini-point:nth-child(5) i{animation-delay:.72s}
.hero-points .mini-point:nth-child(6) i{animation-delay:.90s}
.hero-points .mini-point:nth-child(7) i{animation-delay:1.08s}
.hero-points .mini-point:nth-child(8) i{animation-delay:1.26s}
.hero-points .mini-point:nth-child(9) i{animation-delay:1.44s}

@media (max-width:760px){
  .hero-points .mini-point-wide{
    grid-column:auto;
    min-height:70px;
    padding-left:14px;
    padding-right:14px;
  }

  .hero-points .mini-point-wide span{
    font-size:15.5px;
  }
}

@media (max-width:620px){
  .hero-points{
    grid-template-columns:1fr;
  }

  .hero-points .mini-point-wide{
    grid-column:auto;
  }
}
/* =========================================================
   v14 — 9 ПРЕИМУЩЕСТВ В ДВЕ СТРОКИ НА ВСЮ ШИРИНУ
   ========================================================= */

.hero-benefits-container{
  position:relative;
  margin-top:38px;
}

.hero-benefits-container .hero-points{
  width:100%;
  max-width:none;
  grid-template-columns:repeat(20,minmax(0,1fr));
  grid-auto-rows:minmax(124px,auto);
  align-items:stretch;
  gap:14px;
  padding:17px;
}

/* Первая строка: 5 одинаковых карточек */
.hero-benefits-container .mini-point:nth-child(-n+5){
  grid-column:span 4;
}

/* Вторая строка: 4 одинаковых карточки на всю ширину */
.hero-benefits-container .mini-point:nth-child(n+6){
  grid-column:span 5;
}

.hero-benefits-container .mini-point{
  width:100%;
  min-width:0;
  min-height:124px;
  height:100%;
  padding:16px 15px;
  gap:11px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.42;
}

.hero-benefits-container .mini-point i{
  width:31px;
  height:31px;
  flex:0 0 31px;
  margin-top:1px;
  border-radius:10px;
  font-size:16px;
}

.hero-benefits-container .mini-point span{
  text-wrap:pretty;
}

.hero-benefits-container .mini-point-wide{
  grid-column:auto;
}

/* Плавное появление перенесённого блока */
.hero-benefits-container .hero-points.visible .mini-point{
  animation:heroBenefitWideReveal .64s cubic-bezier(.2,.82,.2,1) both;
}

.hero-benefits-container .hero-points.visible .mini-point:nth-child(1){animation-delay:.03s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(2){animation-delay:.08s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(3){animation-delay:.13s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(4){animation-delay:.18s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(5){animation-delay:.23s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(6){animation-delay:.28s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(7){animation-delay:.33s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(8){animation-delay:.38s}
.hero-benefits-container .hero-points.visible .mini-point:nth-child(9){animation-delay:.43s}

@keyframes heroBenefitWideReveal{
  from{
    opacity:0;
    transform:translateY(14px) scale(.98);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* На средних экранах карточки остаются читаемыми */
@media (max-width:1100px){
  .hero-benefits-container .hero-points{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
  }

  .hero-benefits-container .mini-point:nth-child(n){
    grid-column:auto;
    min-height:96px;
    font-size:14.5px;
  }

  .hero-benefits-container .mini-point:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:620px){
  .hero-benefits-container{
    margin-top:25px;
  }

  .hero-benefits-container .hero-points{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
  }

  .hero-benefits-container .mini-point:nth-child(n),
  .hero-benefits-container .mini-point:last-child{
    grid-column:auto;
    min-height:70px;
    font-size:15px;
  }
}
/* =========================================================
   v15 — ИСПРАВЛЕНИЕ ДЕМО-ВИДЖЕТА НА УЗКИХ ЭКРАНАХ
   ========================================================= */

/* Android WebView и мобильные браузеры не должны самовольно
   увеличивать текст внутри виджета и ломать его геометрию. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (max-width:560px){
  .live-demo-root{
    inset:0;
    right:auto;
    bottom:auto;
    width:100%;
    height:100%;
    pointer-events:none;
  }

  .live-demo-launcher{
    position:fixed;
    right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
  }

  .live-demo-panel{
    position:fixed;
    inset:auto;
    top:max(8px,env(safe-area-inset-top));
    right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));
    left:max(8px,env(safe-area-inset-left));
    width:auto;
    min-width:0;
    max-width:none;
    height:auto;
    min-height:0;
    max-height:none;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    overflow:hidden;
    border-radius:18px;
    transform:translateY(14px) scale(.985);
    transform-origin:center bottom;
    contain:layout paint;
  }

  .live-demo-panel.open{
    transform:none;
  }

  .live-demo-panel > *,
  .live-demo-header > *,
  .live-demo-composer > *{
    min-width:0;
    max-width:100%;
  }

  .live-demo-header{
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:8px;
    padding:10px;
  }

  .live-demo-header > div:nth-child(2){
    min-width:0;
    overflow:hidden;
  }

  .live-demo-avatar,
  .live-demo-close{
    width:36px;
    height:36px;
    border-radius:11px;
  }

  .live-demo-avatar{
    font-size:18px;
  }

  .live-demo-close{
    font-size:22px;
  }

  .live-demo-header strong{
    max-width:100%;
    overflow:hidden;
    font-size:clamp(12px,4vw,14px);
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .live-demo-header span{
    max-width:100%;
    gap:5px;
    margin-top:3px;
    overflow:hidden;
    font-size:9px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .live-demo-messages{
    min-width:0;
    min-height:0;
    padding:10px;
    gap:8px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }

  .live-demo-message{
    max-width:88%;
    padding:9px 10px 7px;
    border-radius:14px 14px 14px 5px;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .live-demo-message.me{
    border-radius:14px 14px 5px 14px;
  }

  .live-demo-message small{
    margin-bottom:3px;
    font-size:9px;
    line-height:1.2;
  }

  .live-demo-message p{
    font-size:clamp(11px,3.45vw,12px);
    line-height:1.4;
  }

  .live-demo-message time{
    margin-top:4px;
    font-size:8px;
  }

  .live-demo-composer{
    width:100%;
    min-width:0;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:6px;
    overflow:hidden;
    padding:8px;
  }

  .live-demo-composer textarea{
    width:0;
    min-width:0;
    max-width:100%;
    min-height:38px;
    max-height:84px;
    flex:1 1 0;
    padding:8px 9px;
    border-radius:11px;
    font-size:16px;
    line-height:1.3;
  }

  .live-demo-emoji,
  .live-demo-send{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:11px;
  }

  .live-demo-emoji{
    font-size:17px;
  }

  .live-demo-send{
    font-size:17px;
  }

  .live-demo-disable{
    min-height:32px;
    padding:6px 10px;
    font-size:9.5px;
    line-height:1.25;
    white-space:normal;
  }
}

@media (max-width:380px){
  .live-demo-panel{
    top:max(6px,env(safe-area-inset-top));
    right:max(6px,env(safe-area-inset-right));
    bottom:max(6px,env(safe-area-inset-bottom));
    left:max(6px,env(safe-area-inset-left));
    border-radius:16px;
  }

  .live-demo-header{
    grid-template-columns:34px minmax(0,1fr) 34px;
    gap:7px;
    padding:8px;
  }

  .live-demo-avatar,
  .live-demo-close{
    width:34px;
    height:34px;
    border-radius:10px;
  }

  .live-demo-header strong{
    font-size:12px;
  }

  .live-demo-header span{
    font-size:8.5px;
  }

  .live-demo-messages{
    padding:8px;
    gap:7px;
  }

  .live-demo-message{
    max-width:91%;
    padding:8px 9px 7px;
  }

  .live-demo-message p{
    font-size:11px;
  }

  .live-demo-composer{
    gap:5px;
    padding:7px;
  }

  .live-demo-composer textarea{
    min-height:36px;
    padding:7px 8px;
  }

  .live-demo-emoji,
  .live-demo-send{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
}

@media (max-width:560px) and (max-height:560px){
  .live-demo-header{
    padding:7px 9px;
  }

  .live-demo-avatar,
  .live-demo-close{
    width:32px;
    height:32px;
  }

  .live-demo-messages{
    padding:7px 9px;
  }

  .live-demo-composer{
    padding:6px 8px;
  }

  .live-demo-disable{
    min-height:28px;
    padding:4px 8px;
  }
}
/* =========================================================
   v16 — ЛОГОТИП РАЗРАБОТЧИКА В ПОДВАЛЕ
   ========================================================= */

@media (max-width:480px){
  .site-dev-link{
    gap:7px;
    font-size:11.5px;
  }

  .site-dev-logo{
    width:30px;
    height:30px;
    flex-basis:30px;
  }
}
/* =========================================================
   v17 — ЦЕНТРИРОВАНИЕ ЛОГОТИПА РАЗРАБОТЧИКА НА МОБИЛЬНЫХ
   ========================================================= */

@media (max-width:720px){
  footer .site-dev-link{
    width:max-content;
    max-width:100%;
    align-self:center;
    justify-content:center;
    margin:8px auto 0;
    text-align:center;
  }
}

@media (max-width:380px){
  footer .site-dev-link{
    gap:6px;
    font-size:11px;
  }

  footer .site-dev-logo{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
}