:root {
      --bg: #06070b;
      --bg2: #0b0d14;
      --card: #10131c;
      --line: #1d2232;
      --tx: #eef1f8;
      --mut: #8d95ab;
      --ac: #c6ff3d;
      --ac2: #7a5cff;
      --ac3: #22e6c4;
      --r: 22px
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--tx);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      max-width: 100%;
      display: block
    }

    .wrap {
      width: min(1200px, 92%);
      margin: auto
    }

    section {
      padding: 120px 0;
      position: relative
    }

    h1,
    h2,
    h3 {
      line-height: 1.05;
      letter-spacing: -.035em
    }

    h1 {
      font-size: clamp(2.6rem, 6.6vw, 5.4rem);
      font-weight: 900
    }

    h2 {
      font-size: clamp(2.1rem, 4.6vw, 3.6rem);
      font-weight: 900;
      margin-bottom: 18px
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 800
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: .76rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ac);
      margin-bottom: 20px;
      font-weight: 800
    }

    .eyebrow:before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--ac)
    }

    .lead {
      color: var(--mut);
      font-size: 1.12rem;
      max-width: 640px
    }

    .grad {
      background: linear-gradient(90deg, var(--ac), var(--ac3) 45%, var(--ac2), var(--ac));
      background-size: 250% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shine 7s linear infinite
    }

    @keyframes shine {
      to {
        background-position: 250% center
      }
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 17px 30px;
      border-radius: 999px;
      font-weight: 800;
      border: 1px solid var(--line);
      cursor: pointer;
      font-size: 1rem;
      transition: .3s;
      background: rgba(255, 255, 255, .03);
      color: var(--tx);
      font-family: inherit;
      overflow: hidden
    }

    .btn.pri {
      background: var(--ac);
      color: #0a0c10;
      border-color: var(--ac)
    }

    .btn.pri:before {
      content: "";
      position: absolute;
      top: 0;
      left: -80%;
      width: 50%;
      height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
      transform: skewX(-20deg);
      animation: sweep 3.5s infinite
    }

    @keyframes sweep {
      to {
        left: 140%
      }
    }

    .btn.pri:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 50px -10px rgba(198, 255, 61, .6)
    }

    .btn.sec:hover {
      border-color: var(--ac);
      color: var(--ac);
      transform: translateY(-4px)
    }

    #pre {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 999;
      display: grid;
      place-items: center;
      transition: opacity .7s, visibility .7s
    }

    #pre.off {
      opacity: 0;
      visibility: hidden
    }

    #pre div {
      font-size: clamp(1.6rem, 5vw, 2.6rem);
      font-weight: 900;
      letter-spacing: -.03em
    }

    #pre b {
      color: var(--ac)
    }

    #pre i {
      display: block;
      height: 3px;
      margin-top: 14px;
      background: linear-gradient(90deg, var(--ac), var(--ac2));
      width: 0;
      animation: ld 1.1s forwards
    }

    @keyframes ld {
      to {
        width: 100%
      }
    }

    #bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      background: linear-gradient(90deg, var(--ac), var(--ac3), var(--ac2));
      z-index: 100
    }

    #glow {
      position: fixed;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(122, 92, 255, .18), transparent 65%);
      transform: translate(-50%, -50%);
      z-index: 0;
      left: 50%;
      top: 30%
    }

    main,
    header,
    footer {
      position: relative;
      z-index: 1
    }

    header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      transition: .3s
    }

    header.s {
      background: rgba(6, 7, 11, .78);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line)
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74px
    }

    .logo {
      font-weight: 900;
      font-size: 1.2rem;
      letter-spacing: -.03em
    }

    .logo b {
      color: var(--ac)
    }

    nav ul {
      display: flex;
      gap: 30px;
      list-style: none;
      font-size: .92rem;
      color: var(--mut)
    }

    nav ul a {
      transition: .2s
    }

    nav ul a:hover {
      color: var(--tx)
    }

    .nbtn {
      padding: 11px 22px;
      font-size: .9rem
    }

    .menu {
      display: none;
      background: none;
      border: 0;
      color: var(--tx);
      font-size: 1.7rem;
      cursor: pointer
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 130px 0 70px;
      overflow: hidden
    }

    #cv {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 100%, var(--bg), transparent 60%);
      pointer-events: none
    }

    .hgrid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 50px;
      align-items: center;
      position: relative;
      z-index: 2
    }

    .hero .lead {
      margin: 26px 0 38px
    }

    .ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .caret {
      display: inline-block;
      width: .07em;
      height: .9em;
      background: var(--ac);
      margin-left: 4px;
      vertical-align: -.08em;
      animation: bl 1s steps(1) infinite
    }

    @keyframes bl {
      50% {
        opacity: 0
      }
    }

    .chips {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 36px
    }

    .chip {
      font-size: .8rem;
      padding: 8px 15px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--mut);
      background: rgba(255, 255, 255, .03);
      backdrop-filter: blur(6px)
    }

    .stage {
      position: relative;
      height: 520px;
      perspective: 1200px
    }

    .mk {
      position: absolute;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(16, 19, 28, .85);
      backdrop-filter: blur(10px);
      border-radius: 18px;
      box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9)
    }

    .browser {
      left: 0;
      top: 30px;
      width: 92%;
      height: 330px;
      animation: float 8s ease-in-out infinite;
      transform: rotateY(-8deg) rotateX(4deg)
    }

    .dots {
      display: flex;
      gap: 6px;
      padding: 13px 15px;
      border-bottom: 1px solid var(--line)
    }

    .dots i {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .dots i:nth-child(1) {
      background: #ff5f57
    }

    .dots i:nth-child(2) {
      background: #febc2e
    }

    .dots i:nth-child(3) {
      background: #28c840
    }

    .sk {
      padding: 18px;
      display: grid;
      gap: 12px
    }

    .sk>div {
      height: 12px;
      border-radius: 6px;
      background: linear-gradient(90deg, #1a1f2d, #2a3150, #1a1f2d);
      background-size: 200% 100%;
      animation: sh 2.4s infinite
    }

    .sk .big {
      height: 110px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(198, 255, 61, .35), rgba(122, 92, 255, .4));
      position: relative;
      overflow: hidden;
      animation: none
    }

    .sk .big:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25), transparent 70%);
      transform: translateX(-100%);
      animation: sw2 3s infinite
    }

    @keyframes sw2 {
      to {
        transform: translateX(100%)
      }
    }

    @keyframes sh {
      to {
        background-position: -200% 0
      }
    }

    .sk .row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      height: auto;
      background: none;
      animation: none
    }

    .sk .row span {
      height: 46px;
      border-radius: 10px;
      background: #1a1f2d
    }

    .wa-card {
      right: 0;
      bottom: 20px;
      width: 64%;
      padding: 16px;
      animation: float 8s ease-in-out -3s infinite
    }

    .wa-card small {
      color: var(--mut);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .wa-card small:before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ac);
      box-shadow: 0 0 12px var(--ac)
    }

    .msg {
      padding: 10px 14px;
      border-radius: 14px;
      font-size: .85rem;
      margin-bottom: 8px;
      max-width: 92%;
      opacity: 0;
      transform: translateY(8px);
      transition: .45s
    }

    .msg.show {
      opacity: 1;
      transform: none
    }

    .msg.b {
      background: #1b2030
    }

    .msg.u {
      background: var(--ac);
      color: #0a0c10;
      margin-left: auto;
      font-weight: 700
    }

    .badge {
      right: 4%;
      top: 0;
      padding: 12px 18px;
      font-size: .85rem;
      font-weight: 800;
      color: var(--ac);
      animation: float 6s ease-in-out -1s infinite
    }

    .badge:before {
      content: "● ";
      animation: bl 1.4s infinite
    }

    .metric {
      left: -4%;
      bottom: 0;
      padding: 14px 18px;
      animation: float 7s ease-in-out -2s infinite
    }

    .metric b {
      font-size: 1.5rem;
      color: var(--ac);
      display: block;
      line-height: 1
    }

    .metric span {
      font-size: .72rem;
      color: var(--mut)
    }

    @keyframes float {
      50% {
        transform: translateY(-16px)
      }
    }

    .scrollhint {
      position: absolute;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%);
      z-index: 3;
      width: 24px;
      height: 40px;
      border: 2px solid var(--mut);
      border-radius: 14px;
      opacity: .6
    }

    .scrollhint:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 7px;
      width: 4px;
      height: 8px;
      margin-left: -2px;
      border-radius: 2px;
      background: var(--ac);
      animation: dn 1.6s infinite
    }

    @keyframes dn {
      to {
        transform: translateY(14px);
        opacity: 0
      }
    }

    .marq {
      border-block: 1px solid var(--line);
      padding: 24px 0;
      overflow: hidden;
      background: var(--bg2);
      position: relative;
      z-index: 2
    }

    .track {
      display: flex;
      gap: 60px;
      width: max-content;
      animation: mq 30s linear infinite;
      color: var(--mut);
      font-weight: 800;
      font-size: 1.15rem;
      white-space: nowrap
    }

    .track span:before {
      content: "✦";
      color: var(--ac);
      margin-right: 60px
    }

    @keyframes mq {
      to {
        transform: translateX(-50%)
      }
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px
    }

    .stat {
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: var(--card);
      text-align: center
    }

    .trust-section { padding: 80px 0 0; }
    .trust-card { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
    .trust-label { color: var(--ac3); font-size: .65rem; font-weight: 800; letter-spacing: .15em; margin-bottom: 20px; }
    .trust-card h3 { color: var(--ac); font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.2; margin-bottom: 14px; }
    .trust-card p { color: var(--mut); font-size: .88rem; line-height: 1.7; margin-bottom: 20px; }
    .trust-card a { margin-top: auto; font-size: .78rem; font-weight: 700; color: var(--tx); }
    .trust-card a:hover { color: var(--ac); }
    .trust-card a:focus-visible { outline: 2px solid var(--ac); outline-offset: 5px; border-radius: 3px; }
    @media(max-width:520px) { .stats.trust-grid { grid-template-columns: 1fr; } .trust-card { padding: 26px; } }

    .grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 54px
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      padding: 36px;
      transition: border-color .3s;
      position: relative;
      overflow: hidden
    }

    .card:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0), rgba(198, 255, 61, .12), transparent 45%);
      opacity: 0;
      transition: .3s;
      pointer-events: none
    }

    .card:hover:before {
      opacity: 1
    }

    .card:hover {
      border-color: rgba(198, 255, 61, .45)
    }

    .card .ic {
      width: 58px;
      height: 58px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 1.7rem;
      margin-bottom: 22px;
      background: linear-gradient(135deg, rgba(198, 255, 61, .18), rgba(122, 92, 255, .22));
      border: 1px solid var(--line)
    }

    .card p {
      color: var(--mut);
      margin-top: 10px;
      font-size: .96rem
    }

    .card ul {
      list-style: none;
      margin-top: 18px;
      color: var(--mut);
      font-size: .9rem
    }

    .card li {
      padding: 5px 0
    }

    .card li:before {
      content: "→ ";
      color: var(--ac)
    }

    .alt {
      background: var(--bg2);
      border-block: 1px solid var(--line)
    }

    .tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 42px 0 28px
    }

    .tab {
      padding: 13px 24px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: none;
      color: var(--mut);
      cursor: pointer;
      font-weight: 700;
      font-family: inherit;
      transition: .25s
    }

    .tab.on,
    .tab:hover {
      background: var(--ac);
      color: #0a0c10;
      border-color: var(--ac)
    }

    .case {
      display: grid;
      grid-template-columns: 1.6fr .8fr;
      gap: 36px;
      align-items: start
    }

    .ba {
      position: relative;
      border-radius: var(--r);
      overflow: hidden;
      border: 1px solid var(--line);
      aspect-ratio: 16/10;
      background: linear-gradient(135deg, #141829, #0b0d14);
      user-select: none;
      box-shadow: 0 40px 90px -40px rgba(122, 92, 255, .5)
    }

    .ba .ph {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 20px;
      color: var(--mut);
      font-weight: 800
    }

    .ba img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top
    }

    .ba .layer {
      position: absolute;
      inset: 0;
      clip-path: inset(0 0 0 var(--p, 50%));
      background: #0b0d14
    }

    .ba .layer .ph {
      background: linear-gradient(135deg, #1c2a10, #0b0d14)
    }

    .ba .lbl {
      position: absolute;
      top: 14px;
      padding: 7px 14px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .1em;
      background: rgba(0, 0, 0, .72);
      z-index: 3
    }

    .l1 {
      left: 14px
    }

    .l2 {
      right: 14px;
      background: var(--ac) !important;
      color: #0a0c10
    }

    .ba .hd {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--p, 50%);
      width: 3px;
      background: var(--ac);
      z-index: 4;
      transform: translateX(-50%);
      pointer-events: none
    }

    .ba .hd:after {
      content: "⇆";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--ac);
      color: #0a0c10;
      display: grid;
      place-items: center;
      font-weight: 900;
      box-shadow: 0 0 40px rgba(198, 255, 61, .7)
    }

    .ba input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: ew-resize;
      z-index: 5;
      touch-action: pan-y
    }

    .info h3 {
      font-size: 1.7rem;
      margin-bottom: 12px
    }

    .info p {
      color: var(--mut);
      margin-bottom: 20px
    }

    .info ul {
      list-style: none;
      margin-bottom: 28px
    }

    .info li {
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      font-size: .95rem
    }

    .info li:before {
      content: "✓ ";
      color: var(--ac);
      font-weight: 900
    }

    .two {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 60px;
      align-items: center
    }

    .feat {
      list-style: none;
      margin-top: 28px;
      display: grid;
      gap: 16px
    }

    .feat li {
      display: flex;
      gap: 16px;
      color: var(--mut)
    }

    .feat b {
      color: var(--tx)
    }

    .feat span {
      color: var(--ac);
      font-weight: 900
    }

    .clients {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 34px;
      align-items: center
    }

    .clients small {
      width: 100%;
      color: var(--mut);
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .client {
      padding: 18px 30px;
      border: 1px solid var(--line);
      border-radius: var(--r);
      font-weight: 900;
      font-size: 1.15rem;
      background: var(--card)
    }

    .dash {
      display: grid;
      gap: 16px
    }

    .panel {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 22px;
      box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9)
    }

    .panel h4 {
      font-size: .78rem;
      color: var(--mut);
      font-weight: 700;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      letter-spacing: .04em
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 18px
    }

    .kpi {
      background: #0b0e18;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px
    }

    .kpi small {
      color: var(--mut);
      font-size: .7rem
    }

    .kpi b {
      font-size: 1.45rem;
      display: block;
      font-weight: 900
    }

    .kpi em {
      color: var(--ac);
      font-style: normal;
      font-size: .72rem
    }

    .chart path.ln {
      stroke-dasharray: 900;
      stroke-dashoffset: 900;
      transition: stroke-dashoffset 2.2s ease
    }

    .chart.in path.ln {
      stroke-dashoffset: 0
    }

    .bars {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 90px;
      margin-top: 14px
    }

    .bars i {
      flex: 1;
      border-radius: 7px 7px 0 0;
      background: #2a3350;
      height: 0;
      transition: height 1.2s cubic-bezier(.2, .8, .2, 1)
    }

    .bars i.hl {
      background: linear-gradient(180deg, var(--ac), var(--ac3))
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .82rem
    }

    th {
      color: var(--mut);
      text-align: left;
      font-weight: 600;
      padding: 6px 0
    }

    td {
      padding: 11px 0;
      border-top: 1px solid var(--line)
    }

    .pill {
      padding: 4px 11px;
      border-radius: 99px;
      font-size: .7rem;
      font-weight: 800
    }

    .ok {
      background: rgba(198, 255, 61, .14);
      color: var(--ac)
    }

    .wt {
      background: rgba(255, 255, 255, .08);
      color: var(--mut)
    }

    .fk {
      color: var(--mut);
      font-size: .7rem;
      margin-top: 10px;
      text-align: right
    }

    .live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--ac)
    }

    .live:before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ac);
      animation: bl 1.2s infinite
    }

    .about {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 64px;
      align-items: start
    }

    .photo {
      aspect-ratio: 4/5;
      border-radius: 28px;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
      box-shadow: 0 40px 100px -40px rgba(122, 92, 255, .6)
    }

    .photo:before {
      content: "";
      position: absolute;
      inset: -40%;
      background: conic-gradient(from 0deg, transparent, rgba(198, 255, 61, .3), transparent 30%);
      animation: rot 8s linear infinite
    }

    .photo:after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: 26px;
      background: linear-gradient(145deg, #171c30, #0b0d14)
    }

    .photo span {
      position: relative;
      z-index: 2;
      font-size: 6rem;
      font-weight: 900;
      color: var(--ac);
      letter-spacing: -.05em
    }

    .photo img {
      position: absolute;
      inset: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      object-fit: cover;
      border-radius: 26px;
      z-index: 3
    }

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

    .about p {
      color: var(--mut);
      margin-bottom: 16px;
      font-size: 1.05rem
    }

    .about p b {
      color: var(--tx)
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 24px 0
    }

    .tags span {
      border: 1px solid var(--line);
      background: var(--card);
      padding: 8px 15px;
      border-radius: 99px;
      font-size: .82rem;
      color: var(--mut);
      transition: .2s
    }

    .tags span:hover {
      border-color: var(--ac);
      color: var(--ac)
    }

    .tl {
      display: grid;
      gap: 10px
    }

    .tl div {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px 18px;
      font-size: .92rem;
      color: var(--mut)
    }

    .tl b {
      color: var(--tx)
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 54px;
      counter-reset: s
    }

    .step {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: var(--card);
      counter-increment: s
    }

    .step:before {
      content: "0" counter(s);
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--ac);
      display: block;
      margin-bottom: 6px
    }

    .step p {
      color: var(--mut);
      font-size: .92rem;
      margin-top: 6px
    }

    .price {
      display: flex;
      flex-direction: column
    }

    .price .v {
      font-size: 2.5rem;
      font-weight: 900;
      margin: 16px 0 4px;
      letter-spacing: -.03em
    }

    .price .v small {
      font-size: .9rem;
      color: var(--mut);
      font-weight: 500
    }

    .price .btn {
      margin-top: auto;
      justify-content: center
    }

    .price ul {
      margin-bottom: 26px
    }

    .price.hot {
      border-color: var(--ac);
      background: linear-gradient(180deg, rgba(198, 255, 61, .09), var(--card))
    }

    .price.hot:after {
      content: "MAIS PROCURADO";
      position: absolute;
      top: 18px;
      right: -34px;
      transform: rotate(35deg);
      background: var(--ac);
      color: #0a0c10;
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .1em;
      padding: 4px 40px
    }

    .note {
      margin-top: 30px;
      color: var(--mut);
      font-size: .88rem;
      max-width: 780px
    }

    details {
      border-bottom: 1px solid var(--line);
      padding: 24px 0
    }

    summary {
      cursor: pointer;
      font-weight: 800;
      font-size: 1.12rem;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 20px
    }

    summary::-webkit-details-marker {
      display: none
    }

    summary:after {
      content: "+";
      color: var(--ac);
      font-size: 1.6rem;
      line-height: 1;
      transition: .3s
    }

    details[open] summary:after {
      transform: rotate(45deg)
    }

    details p {
      color: var(--mut);
      margin-top: 12px;
      max-width: 760px
    }

    .cta {
      text-align: center;
      background: radial-gradient(ellipse at 50% 0, rgba(122, 92, 255, .3), transparent 60%);
      overflow: hidden
    }

    .cta .lead {
      margin: 18px auto 38px
    }

    .cta .ctas {
      justify-content: center
    }

    .cta h2 {
      font-size: clamp(2.2rem, 5.4vw, 4.4rem)
    }

    footer {
      padding: 36px 0;
      border-top: 1px solid var(--line);
      color: var(--mut);
      font-size: .88rem
    }

    footer .wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px
    }

    #wa {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 60;
      width: 66px;
      height: 66px;
      border-radius: 50%;
      background: var(--ac);
      color: #0a0c10;
      display: grid;
      place-items: center;
      font-size: 1.8rem;
      box-shadow: 0 10px 40px rgba(198, 255, 61, .5);
      border: 0;
      cursor: pointer;
      animation: pulse 2.4s infinite
    }

    @keyframes pulse {
      70% {
        box-shadow: 0 0 0 24px rgba(198, 255, 61, 0)
      }
    }

    #wa .dot {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ff4d6d;
      border: 2px solid var(--bg)
    }

    #bot {
      position: fixed;
      right: 22px;
      bottom: 104px;
      z-index: 60;
      width: min(380px, calc(100% - 44px));
      background: rgba(16, 19, 28, .97);
      backdrop-filter: blur(16px);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .75);
      display: none;
      overflow: hidden
    }

    #bot.open {
      display: block;
      animation: up .35s
    }

    @keyframes up {
      from {
        opacity: 0;
        transform: translateY(24px) scale(.97)
      }
    }

    .bh {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(135deg, rgba(198, 255, 61, .1), rgba(122, 92, 255, .14))
    }

    .av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--ac);
      color: #0a0c10;
      display: grid;
      place-items: center;
      font-weight: 900
    }

    .bh b {
      display: block;
      font-size: .95rem
    }

    .bh small {
      color: var(--ac);
      font-size: .72rem
    }

    .bh button {
      margin-left: auto;
      background: none;
      border: 0;
      color: var(--mut);
      font-size: 1.2rem;
      cursor: pointer
    }

    #cb {
      padding: 16px;
      max-height: 300px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    #cb .m {
      padding: 10px 14px;
      border-radius: 14px;
      font-size: .88rem;
      max-width: 88%;
      animation: up .3s
    }

    #cb .m.b {
      background: #1b2030
    }

    #cb .m.u {
      background: var(--ac);
      color: #0a0c10;
      font-weight: 700;
      align-self: flex-end
    }

    #cb .typing {
      display: flex;
      gap: 4px;
      padding: 14px;
      background: #1b2030;
      border-radius: 14px;
      width: 60px
    }

    #cb .typing i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mut);
      animation: tp 1s infinite
    }

    #cb .typing i:nth-child(2) {
      animation-delay: .15s
    }

    #cb .typing i:nth-child(3) {
      animation-delay: .3s
    }

    @keyframes tp {
      50% {
        transform: translateY(-5px);
        opacity: .4
      }
    }

    #co {
      padding: 0 16px 16px;
      display: grid;
      gap: 8px
    }

    #co button {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--bg2);
      color: var(--tx);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      font-size: .9rem;
      transition: .2s
    }

    #co button:hover {
      border-color: var(--ac);
      color: var(--ac)
    }

    #co button.go {
      background: var(--ac);
      color: #0a0c10;
      font-weight: 800;
      text-align: center
    }

    .rv {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .9s, transform .9s cubic-bezier(.2, .7, .2, 1)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    .d1 {
      transition-delay: .1s
    }

    .d2 {
      transition-delay: .2s
    }

    .d3 {
      transition-delay: .3s
    }

    @media(max-width:960px) {
      section {
        padding: 84px 0
      }

      .hgrid,
      .two,
      .case,
      .about {
        grid-template-columns: 1fr
      }

      .grid3,
      .steps {
        grid-template-columns: 1fr
      }

      .stats {
        grid-template-columns: 1fr 1fr
      }

      .stage {
        height: 430px
      }

      .metric {
        display: none
      }

      .about .photo {
        max-width: 320px
      }

      nav ul {
        position: fixed;
        inset: 74px 0 auto 0;
        background: var(--bg);
        flex-direction: column;
        padding: 24px 6%;
        gap: 18px;
        border-bottom: 1px solid var(--line);
        display: none
      }

      nav ul.open {
        display: flex
      }

      .menu {
        display: block
      }

      .nbtn {
        display: none
      }

      #glow {
        display: none
      }

      .scrollhint {
        display: none
      }
    }

    @media(max-width:520px) {
      .btn {
        width: 100%;
        justify-content: center
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      .rv {
        opacity: 1;
        transform: none
      }

      .chart path.ln {
        stroke-dashoffset: 0
      }
    }