:root {
      --orange: #ff9100;
      --orange-2: #ff9f11;
      --blue: #0764e9;
      --cyan: #00a8c8;
      --teal: #00c9a7;
      --green: #48d900;
      --purple: #5f00c9;
      --indigo: #4256b7;
      --ink: #1f2937;
      --muted: #626b78;
      --line-width: 34px;
      --axis-col: 58px;
      --step-height: 82px;
      --step-gap: 46px;
      --card-width: 350px;
      --shadow: 0 14px 26px rgba(15, 23, 42, 0.16);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      /* font-family: "Poppins", "Segoe UI", Arial, sans-serif; */
      color: var(--ink);
      background: #fff;
    }

    button {
      font: inherit;
    }

    .brand-info p{
        color: white;
    }

    .hero {
      position: relative;
      min-height: 220px;
      padding: 42px 24px 48px;
      color: #fff;
      overflow: hidden;
      background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.18) 0 70px, transparent 72px),
        radial-gradient(circle at 95% -10%, rgba(255,255,255,.16) 0 54px, transparent 56px),
        linear-gradient(135deg, var(--orange), var(--orange-2));
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.08);
      transform: rotate(10deg);
      pointer-events: none;
    }

    .hero::before {
      right: -10%;
      bottom: -60%;
      width: 90%;
      height: 230px;
    }

    .hero::after {
      left: -20%;
      top: -70%;
      width: 65%;
      height: 260px;
    }

    .hero-plus {
      position: absolute;
      left: 68px;
      top: 82px;
      font-size: 48px;
      font-weight: 900;
      opacity: .38;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
      max-width: 980px;
      margin: 0 auto;
    }

    .brand-card {
      width: 330px;
      min-height: 112px;
      border: 1.8px solid rgba(255,255,255,.72);
      border-radius: 8px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 18px;
      position: relative;
      background: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 32px rgba(255, 255, 255, .08);
    }

    .brand-card::before,
    .brand-card::after {
      content: "✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: #2d73ff;
      font-size: 18px;
      letter-spacing: 8px;
      white-space: nowrap;
      text-shadow: 0 1px 0 #fff;
    }

    .brand-card::before {
      top: -14px;
    }

    .brand-card::after {
      content: "✦ ✦ ✦";
      bottom: -16px;
      letter-spacing: 12px;
    }

    .brand-title {
      margin: 0 0 4px;
      color: #246dff;
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    .brand-subtitle {
      margin: 0;
      font-size: 19px;
      line-height: 1.15;
      font-weight: 800;
    }

    .hero-text {
      max-width: 580px;
      margin: 0;
      font-size: 21px;
      line-height: 1.36;
      color: white;
    }

    .hero-text strong {
      font-weight: 900;
    }

    .timeline-section {
      min-height: calc(100vh - 220px);
      padding: 38px 18px 76px;
      display: flex;
      justify-content: center;
      background: #fff;
    }

    .timeline {
      --timeline-height: calc((var(--step-height) * 9) + (var(--step-gap) * 8));
      position: relative;
      width: min(960px, 100%);
      display: grid;
      grid-template-columns: minmax(260px, var(--card-width)) var(--axis-col) minmax(260px, var(--card-width));
      grid-auto-rows: var(--step-height);
      row-gap: var(--step-gap);
      justify-content: center;
      align-items: center;
      min-height: var(--timeline-height);
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      width: var(--line-width);
      height: 100%;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(
        to bottom,
        var(--green) 0 11.11%,
        var(--teal) 11.11% 22.22%,
        var(--cyan) 22.22% 33.33%,
        var(--blue) 33.33% 44.44%,
        var(--purple) 44.44% 55.55%,
        var(--teal) 55.55% 66.66%,
        var(--cyan) 66.66% 77.77%,
        var(--indigo) 77.77% 88.88%,
        var(--green) 88.88% 100%
      );
      outline: 8px solid #f5f5f5;
      box-shadow: 0 8px 20px rgba(0,0,0,.16), inset 0 0 0 5px rgba(255,255,255,.18);
      z-index: 1;
    }

    .step {
      --color: var(--green);
      position: relative;
      display: flex;
      align-items: center;
      min-height: var(--step-height);
      z-index: 3;
    }

    .step.left {
      grid-column: 1 / 2;
      justify-content: flex-end;
      text-align: right;
    }

    .step.right {
      grid-column: 3 / 4;
      justify-content: flex-start;
      text-align: left;
    }

    .step::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 16px;
      height: 16px;
      border: 4px solid #fff;
      border-radius: 50%;
      background: transparent;
      box-shadow: 0 1px 5px rgba(0,0,0,.2);
      transform: translateY(-50%);
      z-index: 4;
    }

    .step.left::after {
      right: calc((var(--axis-col) / -2) - 8px);
    }

    .step.right::after {
      left: calc((var(--axis-col) / -2) - 8px);
    }

    .line-card {
      position: relative;
      width: 100%;
      min-height: 56px;
      display: flex;
      align-items: center;
      padding: 8px 14px;
      background: #fff;
      border-bottom: 3px solid var(--color);
      box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .step.left .line-card {
      padding-left: 58px;
      padding-right: 14px;
      justify-content: flex-end;
    }

    .step.right .line-card {
      padding-left: 14px;
      padding-right: 58px;
      justify-content: flex-start;
    }

    .step:hover .line-card {
      transform: translateY(-2px);
      box-shadow: 0 15px 24px rgba(0, 0, 0, .16);
    }

    .number {
      position: absolute;
      top: 50%;
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      border-radius: 50%;
      border: 8px solid var(--color);
      background: #fff;
      color: var(--color);
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      box-shadow: 0 7px 13px rgba(0,0,0,.2);
      z-index: 5;
    }

    .step.left .number {
      left: -32px;
    }

    .step.right .number {
      right: -32px;
    }

    .content {
      width: 100%;
      display: grid;
      gap: 4px;
    }

    .title {
      margin: 0;
      font-size: 13px;
      line-height: 1.15;
      font-weight: 700;
      color: var(--ink);
    }

    .more-btn {
      position: relative;
      isolation: isolate;
      justify-self: end;
      border: 0;
      border-radius: 999px;
      padding: 5px 11px;
      overflow: hidden;
      color: #064842;
      background: color-mix(in srgb, var(--color) 24%, white);
      cursor: pointer;
      font-size: 11px;
      line-height: 1;
      font-weight: 800;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .step.right .more-btn {
      justify-self: start;
    }

    .more-btn:hover,
    .more-btn:focus-visible {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 8px 16px rgba(0,0,0,.16);
      outline: none;
      filter: saturate(1.08);
    }

    .more-btn::after {
      content: "";
      position: absolute;
      inset: 50%;
      z-index: -1;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,.75);
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }

    .more-btn.clicked::after {
      animation: ripple .42s ease-out;
    }

    .more-btn.clicked {
      animation: buttonClick .28s ease-out;
    }

    @keyframes ripple {
      0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .9;
      }
      100% {
        transform: translate(-50%, -50%) scale(16);
        opacity: 0;
      }
    }

    @keyframes buttonClick {
      0% { transform: scale(1); }
      45% { transform: scale(.9); }
      100% { transform: scale(1.03); }
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 32px 20px;
      background: rgba(15, 23, 42, .52);
      backdrop-filter: blur(5px);
      padding-top: 15rem;
      z-index: 999;
    }

    .modal-backdrop.active {
      display: flex;
    }

    .modalit {
      width: min(560px, 100%);
      margin-top: 0;
      overflow: hidden;
      border-radius: 22px;
      background: #fff;
      box-shadow: var(--shadow);
      transform: translateY(-120%);
    }

    .modal-backdrop.active .modalit {
      animation: modalFromTop .48s cubic-bezier(.18,.89,.32,1.18) forwards;
    }

    @keyframes modalFromTop {
      0% {
        transform: translateY(-120%);
        opacity: 0;
      }
      70% {
        transform: translateY(18px);
        opacity: 1;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .modal-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 22px 24px;
      color: #fff;
      background: linear-gradient(135deg, var(--modal-color), color-mix(in srgb, var(--modal-color) 68%, #111827));
    }

    .modal-number {
      flex: 0 0 auto;
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--modal-color);
      background: #fff;
      font-size: 30px;
      line-height: 1;
      font-weight: 900;
    }

    .modal-title {
      margin: 0;
      font-size: clamp(20px, 3vw, 28px);
      line-height: 1.15;
      font-weight: 900;
      color: white;
    }

    .close-icon {
      margin-left: auto;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      color: #fff;
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
      transition: transform .2s ease, background .2s ease;
    }

    .close-icon:hover,
    .close-icon:focus-visible {
      transform: rotate(90deg) scale(1.05);
      background: rgba(255,255,255,.22);
      outline: none;
    }

    .modal-body {
      padding: 24px;
    }

    .modal-body p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      padding: 0 24px 24px;
    }

    .close-btn {
      border: 0;
      border-radius: 999px;
      padding: 11px 18px;
      background: #111827;
      color: #fff;
      cursor: pointer;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .close-btn:hover,
    .close-btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 9px 16px rgba(0,0,0,.18);
      outline: none;
    }

    @media (max-width: 860px) {
      :root {
        --step-height: auto;
        --step-gap: 0px;
      }

      .hero {
        min-height: auto;
        padding: 34px 18px 38px;
      }

      .hero-plus {
        left: 28px;
        top: 58px;
      }

      .hero-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
      }

      .brand-card {
        width: min(330px, 100%);
      }

      .hero-text {
        font-size: 18px;
      }

      .timeline-section {
        padding: 34px 18px 64px;
        justify-content: flex-start;
      }

      .timeline {
        width: 100%;
        min-height: auto;
        display: block;
        padding-left: 58px;
      }

      .timeline::before {
        left: 28px;
        top: 0;
        height: 100%;
        transform: none;
      }

      .step,
      .step.left,
      .step.right {
        display: flex;
        justify-content: flex-start;
        text-align: left;
        min-height: 76px;
        margin: 0 0 30px;
      }

      .step:last-child {
        margin-bottom: 0;
      }

      .step.left::after,
      .step.right::after {
        left: -38px;
        right: auto;
      }

      .step.left .line-card,
      .step.right .line-card,
      .line-card {
        min-height: 58px;
        padding: 10px 58px 10px 14px;
        justify-content: flex-start;
      }

      .step.left .number,
      .step.right .number {
        left: auto;
        right: -24px;
        width: 58px;
        height: 58px;
        border-width: 7px;
        font-size: 30px;
      }

      .step.left .more-btn,
      .step.right .more-btn {
        justify-self: start;
      }
    }

    @media (max-width: 480px) {
      .timeline-section {
        padding-left: 12px;
        padding-right: 12px;
      }

      .timeline {
        padding-left: 50px;
      }

      .timeline::before {
        left: 22px;
        width: 28px;
      }

      .step.left::after,
      .step.right::after {
        left: -34px;
        width: 14px;
        height: 14px;
        border-width: 3px;
      }

      .title {
        font-size: 12.5px;
      }

      .modal-backdrop {
        padding: 18px 12px;
      }

      .modal-header {
        padding: 18px;
      }

      .modal-body {
        padding: 20px 18px;
      }

      .modal-actions {
        padding: 0 18px 20px;
      }
    }