:root {
      --accent: #18b64b;
      --bg1: #f6fbf8;
      --bg2: #eaf7ee;
      --dark: #0b0d0f;
      --logo: red;
  }

  * {
      box-sizing: border-box
  }

  html,
  body {
      height: 100%
  }

  body {
      margin: 0;
      font-family: Inter, "Helvetica Neue", Arial, sans-serif;
      background: linear-gradient(135deg, var(--bg1), var(--bg2));
      color: var(--dark);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px;
  }

  .hero {
      width: 100%;
      max-width: 1200px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 16px;
      padding: 36px;
      box-shadow: 0 20px 60px rgba(10, 20, 30, 0.08);
      position: relative;
      overflow: hidden;
  }

  /* dekorativ fon chiziqlari */
  .hero::before,
  .hero::after {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.12;
      z-index: 0;
      transform: translate(-30%, -30%);
  }

  .hero::before {
      background: linear-gradient(90deg, var(--accent), #7be08a);
      left: -120px;
      top: -120px;
  }

  .hero::after {
      background: linear-gradient(90deg, #6ec8ff, #b78eff);
      right: -120px;
      bottom: -120px;
      transform: translate(30%, 30%);
  }

  .content {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 24px;
      align-items: center;
      flex-wrap: wrap;
  }

  .left {
      flex: 1 1 420px;
      min-width: 260px;
  }

  .kicker {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
  }

  .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ffffff, #f4fff6);
      box-shadow: 0 6px 18px rgba(24, 182, 75, 0.12);
  }

  /* Tez kunda pulse + shimmer */
  .pulse {
      background: linear-gradient(90deg, var(--accent), #4dd26f);
      color: white;
      padding: 6px 12px;
      font-weight: 700;
      border-radius: 999px;
      position: relative;
      overflow: hidden;
      animation: pulseScale 1.8s ease-in-out infinite;
  }

  @keyframes pulseScale {
      0% {
          transform: scale(1);
          box-shadow: 0 6px 20px rgba(24, 182, 75, 0.12)
      }

      50% {
          transform: scale(1.04);
          box-shadow: 0 14px 36px rgba(24, 182, 75, 0.18)
      }

      100% {
          transform: scale(1);
          box-shadow: 0 6px 20px rgba(24, 182, 75, 0.12)
      }
  }

  .pulse::after {
      content: "";
      position: absolute;
      top: 0;
      left: -60%;
      width: 60%;
      height: 100%;
      transform: skewX(-20deg);
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
      animation: shimmer 2.2s linear infinite;
      opacity: 0.85;
  }

  @keyframes shimmer {
      0% {
          left: -80%
      }

      100% {
          left: 160%
      }
  }

  h1 {
      margin: 0 0 12px 0;
      font-size: clamp(1.5rem, 3.6vw, 2.6rem);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 800;
      color: #071019;
  }


  .subtitle {
      margin: 0 0 18px 0;
      font-size: clamp(1rem, 2.2vw, 1.05rem);
      color: #2b3b3f;
      opacity: 0.95;
  }

  /* typing effect box */
  .typing-wrap {
      display: inline-block;
      font-weight: 600;
      color: #0b2b16;
      font-size: 1rem;
      background: linear-gradient(90deg, #ffffff, #fbfff9);
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid rgba(10, 20, 15, 0.04);
      box-shadow: 0 6px 18px rgba(10, 20, 15, 0.04);
  }

  #typed {
      font-size: 1.2rem;
      line-height: 1.4;
      max-width: 90%;
      /* ✅ ekran bo‘yicha cheklash */
      word-wrap: break-word;
      /* ✅ so‘zlarni bo‘lib chiqarish */
      overflow-wrap: break-word;
      white-space: normal;
      /* ✅ avtomatik keyingi qatorga tushadi */
  }

  .cursor {
      display: inline-block;
      width: 2px;
      height: 1.1em;
      background: #0b2b16;
      margin-left: 6px;
      vertical-align: middle;
      animation: blink 1s steps(1) infinite;
  }

  @keyframes blink {

      0%,
      50% {
          opacity: 1
      }

      51%,
      100% {
          opacity: 0
      }
  }

  /* right side illustration (simple mockup) */
  .right {
      width: 320px;
      min-width: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

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

  .mock {
      width: 260px;
      height: 160px;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #f7fff8);
      border: 1px solid rgba(10, 20, 15, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 40px rgba(20, 30, 40, 0.06);
      transform: translateY(0);
      animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
      0% {
          transform: translateY(0)
      }

      50% {
          transform: translateY(-8px)
      }

      100% {
          transform: translateY(0)
      }
  }

  /* action button */
  .cta {
      display: inline-block;
      margin-top: 18px;
      background: var(--logo);
      color: white;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 10px 30px rgba(24, 182, 75, 0.16);
      transition: transform .18s ease, box-shadow .18s ease;
  }

  .cta:hover {
      background-color: #0b0d0f;
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(24, 182, 75, 0.22)
  }

  /* responsive */
  @media (max-width:900px) {
      .content {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
      }

      .left {
          flex: 1 1 300px;
          min-width: 260px;
      }

      .right {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 12px;
      }

      #typed {
          font-size: 1rem;
      }
  }

  /* reduced-motion accessibility */
  @media (prefers-reduced-motion: reduce) {

      .pulse,
      .pulse::after,
      .mock,
      .cursor,
      .typed {
          animation: none !important;
      }
  }