:root {
      --blue: #1769e0;
      --blue-2: #0d4fba;
      --blue-soft: #eaf3ff;
      --navy: #0a1830;
      --ink: #17233b;
      --muted: #64748b;
      --line: #dce6f2;
      --surface: #fff;
      --surface-2: #f6f9fd;
      --green: #10b981;
      --orange: #f59e0b;
      --purple: #7c3aed;
      --red: #ef6a4a;
      --radius: 20px;
      --shadow: 0 16px 45px rgba(21, 61, 112, .10);
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #f7faff;
      line-height: 1.55;
    }

    button,
    input,
    select {
      font: inherit
    }

    a {
      color: inherit
    }

    .wrap {
      max-width: 1180px;
      margin: auto;
      padding: 0 24px
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(220, 230, 242, .9)
    }

    .topbar .wrap {
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      font-weight: 800;
      font-size: 19px;
      text-decoration: none
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--blue), #52a0ff);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 7px 18px rgba(23, 105, 224, .28)
    }

    .navlinks {
      display: flex;
      gap: 28px;
      color: #53627a;
      font-size: 14px;
      font-weight: 600
    }

    .navlinks a {
      text-decoration: none
    }

    .navlinks a:hover {
      color: var(--blue)
    }

    .nav-cta,
    .primary-btn {
      border: 0;
      background: var(--blue);
      color: #fff;
      font-weight: 700;
      border-radius: 10px;
      padding: 11px 18px;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(23, 105, 224, .22);
      transition: .2s ease
    }

    .nav-cta:hover,
    .primary-btn:hover {
      background: var(--blue-2);
      transform: translateY(-1px)
    }

    .hero {
      padding: 78px 0 46px;
      overflow: hidden;
      position: relative;
      background:
        radial-gradient(circle at 82% 20%, rgba(23, 105, 224, .14), transparent 30%),
        radial-gradient(circle at 10% 0%, rgba(82, 160, 255, .10), transparent 25%), #fff;
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: auto -10% -150px;
      height: 280px;
      background: linear-gradient(180deg, transparent, #f7faff)
    }

    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 7px 12px;
      border: 1px solid #cfe0f7;
      border-radius: 999px;
      color: var(--blue);
      background: #f4f9ff;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .eyebrow i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue)
    }

    .hero h1 {
      font-size: clamp(38px, 5.4vw, 66px);
      line-height: 1.02;
      letter-spacing: -.045em;
      max-width: 900px;
      margin-top: 20px
    }

    .hero h1 span {
      color: var(--blue)
    }

    .hero p {
      max-width: 720px;
      color: var(--muted);
      font-size: 17px;
      margin-top: 20px
    }

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

    .secondary-btn {
      padding: 11px 18px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 700;
      color: var(--ink)
    }

    .section {
      padding: 42px 0
    }

    .tab-input {
      display: none
    }

    .tabbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 22px
    }

    .tab-label {
      padding: 12px 17px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: #607087;
      font-size: 14px;
      font-weight: 750;
      cursor: pointer;
      transition: .2s;
    }

    .tab-label:hover {
      border-color: #b8cff0;
      color: var(--blue)
    }

    #tab-hrms:checked~.tabbar label[for=tab-hrms],
    #tab-dist:checked~.tabbar label[for=tab-dist],
    #tab-crm:checked~.tabbar label[for=tab-crm] {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue);
      box-shadow: 0 8px 18px rgba(23, 105, 224, .18)
    }

    .panel {
      display: none
    }

    .panel.active-placeholder {
      display: block
    }

    #tab-hrms:checked~#panel-hrms,
    #tab-dist:checked~#panel-dist,
    #tab-crm:checked~#panel-crm {
      display: block
    }

    .schematic {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 25px;
      box-shadow: var(--shadow);
      margin-bottom: 26px
    }

    .schematic .cap {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: #718096;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 12px
    }

    .schematic .cap span:first-child {
      color: var(--blue)
    }

    .layer {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 18px;
      padding: 17px 0;
      border-top: 1px dashed #d9e4f1
    }

    .layer:first-of-type {
      border-top: 0
    }

    .layer-tag {
      font-size: 12px;
      color: #64748b;
      font-weight: 800
    }

    .layer-tag .num {
      display: block;
      font-size: 24px;
      line-height: 1;
      color: #a1afc1;
      margin-bottom: 4px
    }

    .layer.l2 .num {
      color: var(--orange)
    }

    .layer.l3 .num {
      color: var(--blue)
    }

    .chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .chip {
      padding: 7px 10px;
      border-radius: 8px;
      background: #f5f8fc;
      border: 1px solid #e2eaf3;
      font-size: 12.5px;
      color: #506078
    }

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

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 27px 24px;
      box-shadow: 0 10px 30px rgba(24, 58, 103, .07);
      display: flex;
      flex-direction: column;
      position: relative
    }

    .card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      transition: .22s
    }

    .card.popular {
      border: 2px solid var(--blue);
      padding: 26px 23px
    }

    .ribbon {
      position: absolute;
      right: 18px;
      top: 16px;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      padding: 6px 9px;
      border-radius: 999px
    }

    .tier-name {
      font-size: 21px;
      font-weight: 850
    }

    .tier-desc {
      color: var(--muted);
      font-size: 13.5px;
      min-height: 43px;
      margin-top: 5px
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: 22px
    }

    .price .amt {
      font-size: 34px;
      font-weight: 850;
      letter-spacing: -.04em
    }

    .price .per {
      font-size: 12px;
      color: var(--muted)
    }

    .price-note {
      font-size: 11.5px;
      color: #8290a3;
      margin: 2px 0 20px
    }

    .cta {
      display: block;
      text-align: center;
      padding: 11px;
      border-radius: 10px;
      text-decoration: none;
      background: #f3f7fc;
      border: 1px solid #dce6f2;
      font-weight: 800;
      font-size: 13px
    }

    .card.popular .cta {
      background: var(--blue);
      color: #fff;
      border-color: var(--blue)
    }

    .modcount {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid var(--line);
      padding-top: 14px;
      margin-top: 20px;
      color: #8a98aa;
      font-size: 11px;
      font-weight: 800
    }

    .feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;
      font-size: 13px
    }

    .feature-list li {
      display: flex;
      gap: 8px;
      color: #607087
    }

    .feature-list .tick {
      color: var(--green);
      font-weight: 900
    }

    .feature-list b {
      color: var(--ink)
    }

    .note-strip {
      margin-top: 20px;
      border: 1px solid #d9e7f7;
      background: #f4f9ff;
      padding: 13px 16px;
      border-radius: 11px;
      color: #5d6f87;
      font-size: 12.5px
    }

    .glyph {
      color: var(--blue);
      font-weight: 900
    }

    .bundle {
      margin-top: 56px;
      padding: 34px;
      border: 1px solid #cfe0f7;
      border-radius: 22px;
      background: linear-gradient(135deg, #f6faff, #fff);
      box-shadow: var(--shadow)
    }

    .bundle-intro h2,
    .faq h2 {
      font-size: 31px;
      letter-spacing: -.03em
    }

    .bundle-intro p {
      color: var(--muted);
      max-width: 760px;
      margin-top: 8px;
      font-size: 14px
    }

    .discount-scale {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 25px 0
    }

    .d-step {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 13px 15px;
      background: #fff
    }

    .d-num {
      display: block;
      color: #8492a5;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase
    }

    .d-pct {
      font-size: 14px;
      font-weight: 800
    }

    .d-step.active {
      border-color: var(--blue);
      background: var(--blue-soft)
    }

    .d-step.active .d-pct {
      color: var(--blue)
    }

    .combiner-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      align-items: start
    }

    .suite-row {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 12px;
      transition: .2s
    }

    .suite-row.off {
      opacity: .55
    }

    .suite-toggle {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer
    }

    .suite-toggle input {
      accent-color: var(--blue)
    }

    .suite-fields {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      padding-left: 25px;
      margin-top: 12px
    }

    .suite-fields select,
    .suite-fields input {
      border: 1px solid #d5e1ee;
      border-radius: 9px;
      padding: 9px 10px;
      background: #f9fbfe;
      color: var(--ink);
      outline: none
    }

    .suite-fields select {
      min-width: 220px
    }

    .suite-fields input {
      width: 85px
    }

    .suite-fields select:focus,
    .suite-fields input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(23, 105, 224, .1)
    }

    .unit {
      font-size: 12px;
      color: #8290a3
    }

    .submit-wrap {
      margin-top: 18px
    }

    .submit-btn {
      width: 100%;
      font-size: 14px;
      padding: 13px
    }

    .submit-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none
    }

    .form-message {
      font-size: 12px;
      margin-top: 9px;
      color: #c2412d;
      min-height: 18px
    }

    .combiner-summary {
      border: 1px solid #cfe0f7;
      border-radius: 16px;
      padding: 22px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(23, 105, 224, .08);
      position: sticky;
      top: 95px;
      opacity: 0;
      visibility: hidden;
      max-height: 0;
      overflow: hidden;
      transform: translateY(10px);
      transition: opacity .35s ease, transform .35s ease, max-height .4s ease, visibility .35s
    }

    .combiner-summary.revealed {
      opacity: 1;
      visibility: visible;
      max-height: 600px;
      transform: none
    }

    .summary-badge {
      display: inline-flex;
      background: #eafaf5;
      color: #087f5b;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase
    }

    .combiner-summary .cap {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #8492a5;
      margin: 11px 0
    }

    .combiner-summary .row {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e6edf5;
      padding: 10px 0;
      font-size: 13px;
      color: #65748a
    }

    .combiner-summary .row b {
      color: var(--ink)
    }

    .combiner-summary .row.discount {
      color: #d97706
    }

    .combiner-summary .row.discount b {
      color: #d97706
    }

    .bundle-total {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 15px;
      margin-top: 3px;
      border-top: 1px solid #dce6f2
    }

    .bundle-total span:first-child {
      font-size: 13px;
      color: #66758a
    }

    .bundle-total .amt {
      font-size: 25px;
      font-weight: 900;
      color: var(--blue)
    }

    .faq {
      padding: 60px 0 90px
    }

    .faq h2 {
      margin-bottom: 22px
    }

    .faq-item {
      border-top: 1px solid var(--line);
      padding: 18px 0
    }

    .faq-item:last-child {
      border-bottom: 1px solid var(--line)
    }

    .faq-q {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-weight: 800;
      cursor: pointer
    }

    .plus {
      color: var(--blue);
      font-size: 20px;
      line-height: 1;
      transition: .2s
    }

    .faq-item.open .plus {
      transform: rotate(45deg)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease
    }

    .faq-item.open .faq-a {
      max-height: 220px
    }

    .faq-a p {
      padding-top: 10px;
      color: var(--muted);
      font-size: 13.5px;
      max-width: 760px
    }

    footer {
      border-top: 1px solid var(--line);
      background: #fff;
      padding: 22px 0;
      color: #8290a3;
      font-size: 11.5px
    }

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

    @media(max-width:900px) {
      .navlinks {
        display: none
      }

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

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

      .combiner-summary {
        position: static
      }

      .layer {
        grid-template-columns: 110px 1fr
      }
    }

    @media(max-width:620px) {
      .wrap {
        padding: 0 16px
      }

      .topbar .wrap {
        height: 64px
      }

      .nav-cta {
        padding: 9px 12px;
        font-size: 12px
      }

      .hero {
        padding: 55px 0 30px
      }

      .hero p {
        font-size: 15px
      }

      .schematic {
        padding: 18px
      }

      .layer {
        grid-template-columns: 1fr;
        gap: 8px
      }

      .discount-scale {
        grid-template-columns: 1fr
      }

      .bundle {
        padding: 20px
      }

      .suite-fields {
        padding-left: 0
      }

      .suite-fields select {
        min-width: 0;
        width: 100%
      }

      .suite-fields input {
        width: 100%
      }

      footer .wrap {
        flex-direction: column
      }

      .hero h1 {
        font-size: 42px
      }
    }