/* HEADER AND HERO STYLES */
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    .hero-bg {
      background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95), transparent 42%),
        linear-gradient(115deg, #fff5ee 0%, #f7eaff 48%, #dcaeff 100%);
    }

    .dot-pattern {
      background-image: radial-gradient(#f8a777 2px, transparent 2px);
      background-size: 28px 38px;
      opacity: 0.7;
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      box-shadow: 0 8px 18px rgba(120, 40, 220, 0.2);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .feature-item:hover .feature-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 14px 25px rgba(120, 40, 220, 0.32);
    }

    .purple {
      background: linear-gradient(135deg, #7519ef, #c62ce9);
    }

    .orange {
      background: linear-gradient(135deg, #ff6774, #ffae26);
    }

    .blue {
      background: linear-gradient(135deg, #3c75f5, #42caff);
    }

    .green {
      background: linear-gradient(135deg, #18b965, #41df8a);
    }

    .pink {
      background: linear-gradient(135deg, #ec247c, #f347ac);
    }

    .gradient-text {
      background: linear-gradient(
        90deg,
        #5725f4,
        #b522d9,
        #ed2780,
        #ff6d20
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    @media (max-width: 640px) {
      .feature-item {
        white-space: normal !important;
      }

      .feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 17px;
      }
    }


/* WHAT IS VIVAFY AI STYLES SECTION */
  .feature-tag {
    border-radius: 9999px;
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
  }

  .purple-tag {
    color: #6d28d9;
    background: #f3e8ff;
    border: 1px solid #d8b4fe;
  }

  .blue-tag {
    color: #0369a1;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
  }

  .orange-tag {
    color: #c2410c;
    background: #ffedd5;
    border: 1px solid #fdba74;
  }

  .pink-tag {
    color: #be185d;
    background: #fce7f3;
    border: 1px solid #f9a8d4;
  }

  .violet-tag {
    color: #7c3aed;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
  }

  .green-tag {
    color: #047857;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
  }


/* COMPARISON STYLES */

  /* ================================
     COMPARISON ICONS
  ================================= */

  .comparison-icon {
    display: flex;
    height: 52px;
    width: 52px;
    min-width: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: white;
    font-size: 21px;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
  }

  .purple-gradient {
    background: linear-gradient(135deg, #7c3aed, #c026d3);
  }

  .orange-gradient {
    background: linear-gradient(135deg, #f97316, #ec4899);
  }

  .blue-gradient {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
  }

  .pink-gradient {
    background: linear-gradient(135deg, #db2777, #f43f5e);
  }

  .violet-gradient {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  }

  .green-gradient {
    background: linear-gradient(135deg, #059669, #14b8a6);
  }

  .all-in-one-gradient {
    background: linear-gradient(
      135deg,
      #7c3aed,
      #c026d3,
      #f97316
    );
  }


  /* ================================
     COMPARISON CELLS
  ================================= */

  .comparison-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }


  /* ================================
     MOBILE LABELS
  ================================= */

  .mobile-label {
    display: none;
  }


  /* ================================
     VIVAFY COLUMN
  ================================= */

  .vivafy-cell {
    min-height: 52px;
    border-radius: 16px;
    background: linear-gradient(
      135deg,
      #7c3aed,
      #c026d3,
      #f97316
    );
    color: white;
    font-size: 1.35rem;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.25);
  }


  /* ================================
     MOBILE
  ================================= */

  @media (max-width: 1023px) {

    .comparison-cell {
      justify-content: space-between;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.65);
      padding: 0.75rem 1rem;
    }

    .mobile-label {
      display: inline;
      font-size: 0.8rem;
      font-weight: 700;
      color: #6b7280;
    }

    .vivafy-cell {
      background: linear-gradient(
        135deg,
        #7c3aed,
        #c026d3,
        #f97316
      );
    }

  }



  .comparison-icon {
    display: flex;
    height: 52px;
    width: 52px;
    min-width: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: white;
    font-size: 21px;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
  }

  .purple-gradient {
    background: linear-gradient(135deg, #7c3aed, #c026d3);
  }

  .orange-gradient {
    background: linear-gradient(135deg, #f97316, #ec4899);
  }

  .blue-gradient {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
  }

  .pink-gradient {
    background: linear-gradient(135deg, #db2777, #f43f5e);
  }

  .violet-gradient {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  }

  .green-gradient {
    background: linear-gradient(135deg, #059669, #14b8a6);
  }

  .comparison-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }

  .mobile-label {
    display: none;
  }

  .vivafy-cell {
    min-height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7c3aed, #c026d3, #f97316);
    color: white;
    font-size: 1.35rem;
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.25);
  }

  @media (max-width: 1023px) {
    .comparison-cell {
      justify-content: space-between;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.65);
      padding: 0.75rem 1rem;
    }

    .mobile-label {
      display: inline;
      font-size: 0.8rem;
      font-weight: 700;
      color: #6b7280;
    }

    .vivafy-cell {
      background: linear-gradient(135deg, #7c3aed, #c026d3, #f97316);
    }
  }



  /* Smooth option transition */
  .launch-option > div {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease;
  }

  .launch-option:hover > div {
    transform: translateY(-2px);
  }

  
  /* Funnel section styles */
  /* ==========================================
     FUNNEL CARDS
  =========================================== */

  .funnel-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;

    padding: 20px;

    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.78);

    box-shadow:
      0 12px 35px rgba(109, 40, 217, 0.08);

    backdrop-filter: blur(14px);

    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease,
      border-color 0.25s ease;
  }


  .funnel-card:hover {
    transform: translateY(-3px);

    border-color: rgba(139, 92, 246, 0.35);

    box-shadow:
      0 18px 45px rgba(109, 40, 217, 0.14);
  }


  .funnel-card-featured {
    border-color: rgba(168, 85, 247, 0.35);
    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(250,245,255,0.9)
      );
  }


  .funnel-card-premium {
    border-color: rgba(249, 115, 22, 0.3);

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,0.95),
        rgba(255,247,237,0.9)
      );
  }


  /* ==========================================
     FUNNEL NUMBER
  =========================================== */

  .funnel-number {
    display: flex;

    height: 48px;
    width: 48px;
    min-width: 48px;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: white;

    font-size: 13px;
    font-weight: 900;

    box-shadow:
      0 8px 18px rgba(109, 40, 217, 0.18);
  }


  .funnel-purple {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
  }


  .funnel-fuchsia {
    background: linear-gradient(135deg, #c026d3, #ec4899);
  }


  .funnel-orange {
    background: linear-gradient(135deg, #f97316, #fb7185);
  }


  .funnel-pink {
    background: linear-gradient(135deg, #db2777, #f43f5e);
  }


  .funnel-violet {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  }


  .funnel-rainbow {
    background:
      linear-gradient(
        135deg,
        #7c3aed,
        #c026d3,
        #f97316
      );
  }


  /* ==========================================
     FUNNEL INFO
  =========================================== */

  .funnel-info h4 {
    font-size: 1.05rem;
    font-weight: 900;
    color: #111827;
  }


  .funnel-info p {
    margin-top: 3px;

    font-size: 0.85rem;
    line-height: 1.5;

    color: #6b7280;
  }


  /* ==========================================
     PRICE + COMMISSION
  =========================================== */

  .funnel-price,
  .funnel-commission {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }


  .funnel-price span,
  .funnel-commission span {
    font-size: 0.68rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: #9ca3af;
  }


  .funnel-price strong {
    font-size: 1rem;
    font-weight: 900;

    color: #111827;
  }


  .funnel-commission {
    min-width: 110px;

    padding: 10px 14px;

    border-radius: 14px;

    background:
      linear-gradient(
        135deg,
        #f5f3ff,
        #fdf4ff
      );
  }


  .funnel-commission strong {
    font-size: 1.25rem;
    font-weight: 950;

    background:
      linear-gradient(
        90deg,
        #7c3aed,
        #c026d3,
        #f97316
      );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
  }


  /* ==========================================
     CONTEST CARDS
  =========================================== */

  .contest-card {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid rgba(139, 92, 246, 0.14);

    background: rgba(255,255,255,0.75);

    padding: 25px 15px;

    text-align: center;

    box-shadow:
      0 12px 30px rgba(109,40,217,0.07);

    backdrop-filter: blur(12px);

    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }


  .contest-card:hover {
    transform: translateY(-4px);

    box-shadow:
      0 18px 40px rgba(109,40,217,0.13);
  }


  .contest-first {
    border-color: rgba(168,85,247,0.4);

    background:
      linear-gradient(
        135deg,
        rgba(250,245,255,0.95),
        rgba(255,255,255,0.85)
      );
  }


  .contest-second {
    border-color: rgba(236,72,153,0.3);
  }


  .contest-third {
    border-color: rgba(249,115,22,0.3);
  }


  .contest-medal {
    font-size: 2.4rem;
    line-height: 1;
  }


  .contest-place {
    margin-top: 12px;

    font-size: 0.8rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: #6b7280;
  }


  .contest-percent {
    margin-top: 8px;

    font-size: 2.8rem;
    line-height: 1;

    font-weight: 950;

    background:
      linear-gradient(
        90deg,
        #7c3aed,
        #c026d3,
        #f97316
      );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
  }


  .contest-label {
    margin-top: 5px;

    font-size: 0.75rem;
    font-weight: 600;

    color: #9ca3af;
  }


  /* ==========================================
     MOBILE FUNNEL
  =========================================== */

  @media (min-width: 1024px) {

    .funnel-card {
      grid-template-columns: auto 1fr auto auto;
      padding: 18px 22px;
    }

  }


  @media (max-width: 767px) {

    .funnel-card {
      grid-template-columns: auto 1fr;
    }

    .funnel-price {
      grid-column: 2;
      margin-top: 4px;
    }

    .funnel-commission {
      grid-column: 2;
      width: fit-content;
      margin-top: 2px;
    }

  }


  @media (max-width: 479px) {

    .funnel-card {
      gap: 12px;
      padding: 17px;
      border-radius: 20px;
    }

    .funnel-number {
      height: 42px;
      width: 42px;
      min-width: 42px;
    }

    .funnel-info h4 {
      font-size: 0.95rem;
    }

    .funnel-info p {
      font-size: 0.78rem;
    }

  }