:root {
      --bg: #ffffff;
      --bg2: #F6F8FF;
      --ink: #0B1220;
      --text: #1B2437;
      --muted: #5A6477;
      --line: #E7ECF5;

      /* Sleek-like: clean + bright accent + soft tints */
      --brand: #0B3BFF;
      /* primary */
      --brand2: #00C2FF;
      /* secondary */
      --mint: #17C784;
      /* success tint */
      --violet: #7C5CFF;
      /* accent tint */
      --orange: #FFB020;
      /* highlight */

      --shadow: 0 14px 40px rgba(11, 18, 32, .10);
      --shadow2: 0 10px 26px rgba(11, 18, 32, .08);
      --radius: 22px;
      --radius2: 16px;
      --max: 1200px;
  }

  * {
      box-sizing: border-box
  }

  html,
  body {
      height: 100%
  }

  body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

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

  .container {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 22px
  }

  /* Top bar */
  .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .72);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(231, 236, 245, .70);
  }

  
  .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: -.2px;
      color: var(--ink);
  }

  

  .menu {
      display: flex;
      gap: 18px;
      align-items: center;
  }

  .menu a {
      font-size: 14px;
      font-weight: 600;
      color: rgba(27, 36, 55, .80);
      padding: 10px 10px;
      border-radius: 12px;
      transition: background .2s ease, color .2s ease;
  }

  .menu a:hover {
      background: rgba(11, 59, 255, .06);
      color: var(--ink)
  }

  .nav-cta {
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      padding: 0 16px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 14px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      white-space: nowrap;
      user-select: none;
  }

  .btn:active {
      transform: translateY(1px)
  }

  .btn-primary {
      color: #fff;
      background: linear-gradient(180deg, var(--brand), rgba(11, 59, 255, .86));
      box-shadow: 0 16px 34px rgba(11, 59, 255, .22);
  }

  .btn-primary:hover {
      box-shadow: 0 18px 44px rgba(11, 59, 255, .26)
  }

  .btn-secondary {
      color: var(--ink);
      background: #fff;
      border-color: var(--line);
      box-shadow: var(--shadow2);
  }

  .btn-secondary:hover {
      background: rgba(11, 59, 255, .04);
      border-color: rgba(11, 59, 255, .18)
  }

  .btn-ghost {
      color: rgba(27, 36, 55, .80);
      background: transparent;
      border-color: transparent;
  }

  .btn-ghost:hover {
      background: rgba(11, 59, 255, .06)
  }

  /* Hero */
  .hero {
      padding: 56px 0 56px;
      background:
          radial-gradient(900px 420px at 15% 0%, rgba(11, 59, 255, .14), rgba(11, 59, 255, 0) 60%),
          radial-gradient(900px 420px at 75% 10%, rgba(0, 194, 255, .12), rgba(0, 194, 255, 0) 55%),
          radial-gradient(750px 420px at 55% 85%, rgba(23, 199, 132, .10), rgba(23, 199, 132, 0) 55%),
          linear-gradient(180deg, var(--bg2), #fff);
      border-bottom: 1px solid var(--line);
      position: relative;
      overflow: hidden;
  }

  .hero:before {
      content: "";
      position: absolute;
      inset: -1px;
      background-image:
          radial-gradient(circle at 20% 10%, rgba(124, 92, 255, .10), rgba(124, 92, 255, 0) 40%),
          radial-gradient(circle at 80% 15%, rgba(255, 176, 32, .08), rgba(255, 176, 32, 0) 40%);
      pointer-events: none;
  }

  .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items: center;
      position: relative;
  }

  .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(11, 59, 255, .14);
      background: rgba(255, 255, 255, .75);
      box-shadow: 0 12px 30px rgba(11, 18, 32, .06);
      color: rgba(27, 36, 55, .85);
      font-size: 13px;
      font-weight: 700;
  }

  .spark {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--brand2), var(--brand));
      box-shadow: 0 0 0 6px rgba(11, 59, 255, .10);
  }

  h1 {
      margin: 16px 0 12px;
      font-size: clamp(36px, 4.2vw, 56px);
      line-height: 1.06;
      letter-spacing: -.8px;
      color: var(--ink);
  }

  .lead {
      margin: 0 0 18px;
      font-size: 18px;
      color: rgba(27, 36, 55, .82);
      max-width: 60ch;
  }

  .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 18px 0 16px;
  }

  .hero-actions .btn {
      height: 48px;
      padding: 0 18px
  }

  .micro {
      font-size: 13px;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
  }

  .micro span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 999px;
  }

  .micro svg {
      width: 16px;
      height: 16px;
      stroke: rgba(11, 59, 255, .95);
      stroke-width: 2;
      fill: none
  }

  /* Hero visual (sleek-ish illustration / UI cards) */
  .visual {
      border-radius: 28px;
      padding: 10px;
      background: rgba(255, 255, 255, .65);
      border: 1px solid rgba(231, 236, 245, .85);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
  }

  .visual:before {
      content: "";
      position: absolute;
      inset: -40% -30% auto auto;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(11, 59, 255, .22), rgba(11, 59, 255, 0) 60%);
      transform: rotate(25deg);
      opacity: .7;
  }

  .visual-inner {
      border-radius: 22px;
      background:
          radial-gradient(900px 420px at 10% 10%, rgba(11, 59, 255, .10), rgba(11, 59, 255, 0) 55%),
          radial-gradient(900px 420px at 75% 20%, rgba(0, 194, 255, .08), rgba(0, 194, 255, 0) 55%),
          linear-gradient(180deg, #fff, rgba(246, 248, 255, .55));
      border: 1px solid rgba(231, 236, 245, .95);
      padding: 18px;
      min-height: 440px;
      position: relative;
      overflow: hidden;
  }

  .ui-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
  }

  .pill {
      font-size: 12px;
      font-weight: 800;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(11, 59, 255, .14);
      background: rgba(11, 59, 255, .06);
      color: rgba(11, 59, 255, .95);
  }

  .dots {
      display: flex;
      gap: 6px;
      align-items: center
  }

  .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%
  }

  .dot.a {
      background: rgba(255, 176, 32, .95)
  }

  .dot.b {
      background: rgba(23, 199, 132, .95)
  }

  .dot.c {
      background: rgba(11, 59, 255, .95)
  }

  .ui-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 12px;
  }

  .card {
      border-radius: var(--radius2);
      border: 1px solid rgba(231, 236, 245, .95);
      background: #fff;
      box-shadow: 0 12px 24px rgba(11, 18, 32, .06);
      padding: 14px;
      position: relative;
      overflow: hidden;
  }

  .card .title {
      font-weight: 900;
      letter-spacing: -.2px;
      color: var(--ink);
      margin-bottom: 8px;
  }

  .kpi {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
  }

  .k {
      border-radius: 14px;
      border: 1px solid rgba(231, 236, 245, .95);
      background: rgba(246, 248, 255, .65);
      padding: 10px 10px 8px;
  }

  .k .l {
      font-size: 11px;
      color: rgba(90, 100, 119, .88);
      font-weight: 700
  }

  .k .v {
      font-size: 16px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -.3px
  }

  .k .s {
      font-size: 11px;
      color: rgba(90, 100, 119, .88)
  }

  .mini-note {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(231, 236, 245, .95);
      color: rgba(90, 100, 119, .92);
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
  }

  .mini-note b {
      color: var(--ink)
  }

  .bar {
      height: 10px;
      border-radius: 999px;
      background: rgba(231, 236, 245, .95);
      overflow: hidden;
      margin-top: 10px;
      position: relative;
  }

  .bar>span {
      display: block;
      height: 100%;
      width: 68%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
  }

  .side {
      display: grid;
      gap: 12px;
  }

  .side .card {
      background: linear-gradient(180deg, #fff, rgba(246, 248, 255, .55));
  }

  .list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 9px;
      color: rgba(27, 36, 55, .86);
      font-size: 13px;
  }

  .li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
  }

  .tick {
      width: 18px;
      height: 18px;
      margin-top: 2px;
      border-radius: 6px;
      background: rgba(23, 199, 132, .12);
      border: 1px solid rgba(23, 199, 132, .22);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
  }

  .tick svg {
      width: 12px;
      height: 12px;
      stroke: rgba(23, 199, 132, .95);
      stroke-width: 2.5;
      fill: none
  }

  /* Sections */
  .section {
      padding: 78px 0
  }

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

 
  h2 {
      margin: 0;
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.2;
      letter-spacing: -.5px;
      color: var(--ink);
  }

  .sub {
      margin: 0;
      max-width: 64ch;
      color: var(--muted);
      font-size: 16px;
  }

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

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

  .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px
  }

  .feature {
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid rgba(231, 236, 245, .95);
      box-shadow: var(--shadow2);
      padding: 16px;
  }

  .feature .icon {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(11, 59, 255, .12), rgba(0, 194, 255, .10));
      border: 1px solid rgba(11, 59, 255, .14);
      display: grid;
      place-items: center;
      margin-bottom: 10px;
  }

  .feature .icon svg {
      width: 20px;
      height: 20px;
      stroke: rgba(11, 59, 255, .95);
      stroke-width: 2;
      fill: none
  }

  .feature h3 {
      margin: 0 0 6px;
      font-size: 16px;
      letter-spacing: -.2px;
      color: var(--ink);
      font-weight: 900;
  }

  .feature p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
  }

  /* Sleek-style "steps" row */
  .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
  }

  .step {
      border-radius: var(--radius);
      border: 1px solid rgba(231, 236, 245, .95);
      background: #fff;
      padding: 16px;
      position: relative;
      box-shadow: var(--shadow2);
  }

  .num {
      width: 34px;
      height: 34px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(180deg, var(--brand), var(--violet));
      box-shadow: 0 12px 24px rgba(11, 59, 255, .18);
      margin-bottom: 10px;
  }

  .step h3 {
      margin: 0 0 6px;
      font-size: 15px;
      color: var(--ink);
      font-weight: 900
  }

  .step p {
      margin: 0;
      font-size: 13px;
      color: var(--muted)
  }

  .step .meta {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(231, 236, 245, .95);
      display: grid;
      gap: 6px;
      font-size: 12px;
      color: rgba(90, 100, 119, .92);
  }

  .step .meta b {
      color: var(--ink)
  }

  /* Pricing cards - sleeker */
  .pricing {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
  }

  .plan {
      border-radius: var(--radius);
      border: 1px solid rgba(231, 236, 245, .95);
      background: #fff;
      box-shadow: var(--shadow2);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
  }

  .plan:before {
      content: "";
      position: absolute;
      inset: -40% auto auto -30%;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle, rgba(11, 59, 255, .12), rgba(11, 59, 255, 0) 60%);
      pointer-events: none;
  }

  .plan .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: relative;
  }

  .plan h3 {
      margin: 0;
      font-size: 16px;
      color: var(--ink);
      font-weight: 950;
      letter-spacing: -.2px
  }

  .tag {
      font-size: 12px;
      font-weight: 900;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(231, 236, 245, .95);
      background: rgba(246, 248, 255, .85);
      color: rgba(27, 36, 55, .80);
  }

  .tag.hot {
      background: rgba(255, 176, 32, .14);
      border-color: rgba(255, 176, 32, .22);
      color: rgba(164, 98, 0, .90);
  }

  .plan p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      position: relative
  }

  .plan ul {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 8px;
      color: rgba(27, 36, 55, .88);
      font-size: 14px;
      position: relative
  }

  .plan .fine {
      font-size: 12px;
      color: rgba(90, 100, 119, .92);
      padding-top: 10px;
      border-top: 1px solid rgba(231, 236, 245, .95);
      position: relative;
  }

  .plan .btn {
      width: 100%;
      height: 46px
  }

  /* Testimonials */
  .quotes {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items: start;
  }

  .quote {
      border-radius: var(--radius);
      border: 1px solid rgba(231, 236, 245, .95);
      background: #fff;
      box-shadow: var(--shadow2);
      padding: 18px;
  }

  .quote .q {
      font-size: 15px;
      color: rgba(27, 36, 55, .86);
      margin: 0 0 12px;
  }

  .who {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
  }

  .avatar {
      width: 40px;
      height: 40px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(11, 59, 255, .18), rgba(0, 194, 255, .12));
      border: 1px solid rgba(11, 59, 255, .14);
  }

  .who b {
      color: var(--ink)
  }

  .who span {
      display: block;
      font-size: 12px;
      color: var(--muted)
  }

  /* FAQ + contact */
  .faq {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items: start;
  }

  .accordion {
      border-radius: var(--radius);
      border: 1px solid rgba(231, 236, 245, .95);
      background: #fff;
      box-shadow: var(--shadow2);
      overflow: hidden;
  }

  .qa {
      border-bottom: 1px solid rgba(231, 236, 245, .95)
  }

  .qa:last-child {
      border-bottom: none
  }

  .qrow {
      padding: 16px 16px;
      cursor: pointer;
      user-select: none;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      font-weight: 950;
      color: var(--ink);
  }

  .qrow span {
      font-size: 14px
  }

  .qrow svg {
      width: 18px;
      height: 18px;
      stroke: rgba(90, 100, 119, .92);
      stroke-width: 2;
      fill: none;
      transition: transform .18s ease
  }

  .ans {
      display: none;
      padding: 0 16px 16px;
      color: rgba(90, 100, 119, .96);
      font-size: 14px;
  }

  .qa.open .ans {
      display: block
  }

  .qa.open .qrow svg {
      transform: rotate(180deg)
  }

  .sidecard {
      border-radius: var(--radius);
      border: 1px solid rgba(231, 236, 245, .95);
      background: linear-gradient(180deg, rgba(11, 59, 255, .06), rgba(0, 194, 255, .04));
      box-shadow: var(--shadow2);
      padding: 18px;
  }

  .sidecard h3 {
      margin: 0 0 6px;
      color: var(--ink);
      font-weight: 950;
      font-size: 16px;
      letter-spacing: -.2px
  }

  .sidecard p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 14px
  }

  .sidecard .btn {
      width: 100%;
      height: 48px
  }

  .field {
      display: grid;
      gap: 10px;
      margin-top: 10px;
  }

  .input,
  .select {
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(231, 236, 245, .95);
      background: #fff;
      padding: 0 12px;
      font-weight: 650;
      color: rgba(27, 36, 55, .88);
      outline: none;
  }

  .input:focus,
  .select:focus {
      border-color: rgba(11, 59, 255, .35);
      box-shadow: 0 0 0 4px rgba(11, 59, 255, .10);
  }

  /* Footer */
  .footer {
      padding: 46px 0 56px;
      border-top: 1px solid var(--line);
      background: #fff;
  }

  .foot {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 14px;
      color: rgba(90, 100, 119, .95);
      font-size: 14px;
  }

  .foot h4 {
      margin: 0 0 10px;
      color: var(--ink);
      font-weight: 950;
      letter-spacing: -.2px
  }

  .links {
      display: grid;
      gap: 8px
  }

  .links a:hover {
      color: var(--ink)
  }

  .fineprint {
      margin-top: 14px;
      font-size: 12px;
      color: rgba(90, 100, 119, .88);
  }

  /* Mobile sticky CTA */
  .mobile-cta {
      position: fixed;
      inset: auto 14px 14px 14px;
      display: none;
      z-index: 60;
  }

  .mobile-cta .wrap {
      border-radius: 18px;
      border: 1px solid rgba(231, 236, 245, .95);
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      padding: 10px;
      display: flex;
      gap: 10px;
  }

  .mobile-cta .btn {
      flex: 1;
      height: 46px
  }

  .hamb {
      display: none
  }

  @media (max-width: 980px) {
      .menu {
          display: none
      }

      .hamb {
          display: inline-flex
      }

      .hero-grid {
          grid-template-columns: 1fr;
          gap: 18px
      }

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

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

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

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

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

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

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

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

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

      .mobile-cta {
          display: block
      }

      .topbar {
          position: sticky
      }

      .nav {
          height: 72px
      }
  }

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