@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      padding: 0;
      background: #0D0E14;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      cursor: default; /* Ensure normal arrow cursor site-wide */
    }

    .flex-column {
      display: flex;
      flex-direction: column;
    }

    .flex-row {
      display: flex;
      flex-direction: row;
    }

    .flex-center {
      justify-content: center;
      align-items: center;
    }

    .flex-start {
      justify-content: flex-start;
      align-items: flex-start;
    }

    .flex-space-between {
      justify-content: space-between;
    }

    .inline-flex {
      display: inline-flex;
    }

    .full-width {
      width: 100%;
    }

    .text-center {
      text-align: center;
    }

    .align-stretch {
      align-self: stretch;
    }

    .container {
      width: 1482px;
      max-width: 95%;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    @media (max-width: 1200px) {
      .container {
        max-width: 100%;
        padding: 0 15px;
      }
    }

    .btn {
      height: 74px;
      padding: 21px 40px;
      border-radius: 50px;
      gap: 10px;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 0.22px;
      color: white;
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    .btn:active {
      transform: translateY(0);
    }

    .btn.primary {
      background: linear-gradient(180deg, #3931C5 0%, #2862F1 100%);
      outline: 2px solid white;
      outline-offset: -1px;
    }

    .btn.secondary {
      background: #111111;
      outline: 2px solid white;
      outline-offset: -1px;
    }

    .trusted-badge {
      padding: 15px 30px;
      background: linear-gradient(180deg, #3931C5 0%, #2862F1 100%);
      border-radius: 50px;
      outline: 1px solid white;
      outline-offset: -0.5px;
      justify-content: flex-start;
      align-items: center;
      gap: 9px;
      display: inline-flex;
      color: white;
      font-size: 20px;
      font-family: AmidoneGrotesk, sans-serif;
      font-weight: 400;
      letter-spacing: 0.2px;
      word-wrap: break-word;
    }

    .text-light {
      color: white;
      font-weight: 300;
    }

    .text-medium {
      color: white;
      font-weight: 400;
    }

    .text-bold {
      font-weight: 700;
    }

    .heading-primary {
      font-size: 66px;
      line-height: 85px;
      font-weight: 700;
      text-transform: uppercase;
      word-wrap: break-word;
      color: white;
    }

    .heading-secondary {
      font-size: 60px;
      line-height: 75px;
      font-weight: 700;
      text-transform: uppercase;
      word-wrap: break-word;
      color: white;
    }

    .heading-tertiary {
      font-size: 40px;
      font-weight: 700;
      word-wrap: break-word;
      color: white;
    }

    .paragraph {
      font-size: 22px;
      line-height: 40px;
      word-wrap: break-word;
      color: white;
    }

    .icon {
      position: relative;
      overflow: hidden;
      display: block;
    }

    .icon-small {
      width: 28px;
      height: 28px;
    }

    .icon-medium {
      width: 36px;
      height: 36px;
    }

    .icon-large {
      width: 50px;
      height: 50px;
    }

    .icon-play {
      background: white;
    }
    
    /* Icon styles with proper SVG content */
    .IconVerify::before {
      content: "✓";
      display: block;
      width: 100%;
      height: 100%;
      background: #1E5FFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 16px;
    }
    
    .IconPlay::before {
      content: "▶";
      display: block;
      width: 100%;
      height: 100%;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1E5FFF;
      font-size: 20px;
      margin-left: 2px;
    }
    
    .IconTrophy::before {
      content: "🏆";
      display: block;
      width: 100%;
      height: 100%;
      font-size: 20px;
    }
    
    .IconWhatsapp::before {
      content: "💬";
      display: block;
      width: 100%;
      height: 100%;
      font-size: 20px;
    }
    
    .IconCheck::before {
      content: "✓";
      display: block;
      width: 100%;
      height: 100%;
      background: #1E5FFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 18px;
    }
    
    .IconProfit::before {
      content: "📈";
      display: block;
      width: 100%;
      height: 100%;
      font-size: 24px;
    }
    
    .IconConnect::before {
      content: "👥";
      display: block;
      width: 100%;
      height: 100%;
      font-size: 24px;
    }
    
    .IconRegister::before {
      content: "📝";
      display: block;
      width: 100%;
      height: 100%;
      font-size: 24px;
    }
    
    .IconEarn::before {
      content: "💰";
      display: block;
      width: 100%;
      height: 100%;
      font-size: 24px;
    }

    .header-bg {
      background: linear-gradient(135deg, #0D0E14 0%, #1a1b2e 50%, #16213e 100%);
      position: relative;
      overflow: hidden;
    }
    
    .header-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 20% 50%, rgba(57, 49, 197, 0.1) 0%, transparent 50%),
                  radial-gradient(circle at 80% 20%, rgba(40, 98, 241, 0.1) 0%, transparent 50%);
      pointer-events: none;
    }

    .hero-video-bg {
      background: linear-gradient(135deg, #1a1b2e 0%, #16213e 100%);
      border: 2px solid rgba(255, 255, 255, 0.1);
      position: relative;
      overflow: hidden;
    }
    
    .hero-video-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(57, 49, 197, 0.05) 0%, rgba(40, 98, 241, 0.05) 100%);
      pointer-events: none;
    }

    .testimonial-video-bg {
      background: linear-gradient(135deg, #1a1b2e 0%, #16213e 100%);
      position: relative;
      overflow: hidden;
    }
    
    .testimonial-video-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, rgba(57, 49, 197, 0.03) 0%, rgba(40, 98, 241, 0.03) 100%);
      pointer-events: none;
    }

    .footer-bg {
      background: #111111;
    }

    .gradient-blue {
      background: linear-gradient(180deg, #3931C5 0%, #2862F1 100%);
    }

    .nav-link {
      color: white;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.18px;
      word-wrap: break-word;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .nav-link.active {
      color: #3931C5;
    }

    .play-button {
      width: 120px;
      height: 120px;
      padding: 20px;
      background: linear-gradient(180deg, rgba(57, 49, 197, 0.80) 0%, rgba(40, 98, 241, 0.80) 100%);
      border-radius: 100px;
      outline: 2px solid white;
      outline-offset: -1px;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .play-button:hover {
      transform: scale(1.1);
      box-shadow: 0 15px 35px rgba(57, 49, 197, 0.4);
    }
    
    .play-button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      transform: translate(-40%, -50%);
    }

    .play-button-small {
      width: 80px;
      height: 80px;
      padding: 20px;
      background: #111111;
      border-radius: 100px;
      outline: 1px solid white;
      outline-offset: -1px;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .play-button-small:hover {
      transform: scale(1.1);
      background: #1a1a1a;
    }
    
    .play-button-small::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-left: 15px solid white;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      transform: translate(-40%, -50%);
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
      .container {
        padding: 0 10px;
      }
      
      .heading-primary {
        font-size: 36px;
        line-height: 46px;
      }
      
      .heading-secondary {
        font-size: 32px;
        line-height: 42px;
      }
      
      .paragraph {
        font-size: 18px;
        line-height: 28px;
      }
      
      .btn {
        height: 60px;
        padding: 15px 30px;
        font-size: 18px;
      }
      
      .play-button {
        width: 80px;
        height: 80px;
      }
      
      .play-button::before {
        border-left: 15px solid white;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
      }
      
      .Videos {
        flex-direction: column;
        align-items: center;
      }
      
      .Frame37, .Frame38, .Frame39, .Frame40,
      .FeaturesCard,
      .person-card,
      .success-image,
      .success-image-large,
      .faq-item,
      .step-card,
      .TelegramContent .btn {
        width: 380px !important;
        max-width: 380px !important;
        margin-left: auto;
        margin-right: auto;
      }
      .FeaturesCard { margin-bottom: 20px; }
      .FeaturesCard { height: auto !important; padding: 30px 24px !important; }
      .FeaturesCard .feature-title { font-size: 20px; }
      .FeaturesCard .feature-text { font-size: 15px; line-height: 24px; }
      .feature-text { overflow-wrap: anywhere; word-break: break-word; }

      /* Success stories horizontal slider */
      /* Hide original lists & create combined slider */
      .SuccessImages, .SuccessImagesLarge { display: none; }
      .SuccessStoriesSlider {
        /* Display controlled by dedicated media queries below */
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 24px;
        padding: 10px 0 5px;
        width: 100%;
      }
      .SuccessStoriesSlider::-webkit-scrollbar { display: none; }
      .success-slide { flex: 0 0 100%; max-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; gap: 30px; align-items: center; }
      .success-slide .person-card { width: 100% !important; max-width: 380px; }
      .success-slide .success-image-large { width: 100% !important; max-width: 380px; height: auto; }
      /* Remove controls on mobile; rely on native snap */
      .success-slider-controls { display: none !important; }

      /* Constrain large illustrative SVGs to 380px on mobile */
      .Offer .Image img,
      .FAQImage img,
      .TelegramImages img,
      .step-icon img,
      .feature-icon,
      .brand-logo img,
      img[alt*="Success"],
      img[alt*="Story"],
      img[alt*="Deposit"],
      img[alt*="Guarantee"] {
        max-width: 380px;
        width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      
      .nav {
        flex-direction: column;
        gap: 20px;
        padding: 15px 20px;
      }
      
      .nav-link {
        font-size: 16px;
      }
    }
    
    @media (max-width: 480px) {
      .heading-primary {
        font-size: 28px;
        line-height: 36px;
      }
      
      .heading-secondary {
        font-size: 24px;
        line-height: 32px;
      }
      
      .paragraph {
        font-size: 16px;
        line-height: 24px;
      }
      
      .btn {
        height: 50px;
        padding: 12px 25px;
        font-size: 16px;
      }
      
      .step-card { width: 380px; max-width: 380px; margin-bottom: 40px; }
      
      .Steps {
        flex-direction: column;
        align-items: center;
      }
      
      .faq-item { width: 380px !important; }
      
      .FAQContent {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      
      .FAQImage img {
        width: 100%;
        max-width: 529px;
        height: auto;
      }
      
      .TelegramImages {
        width: 100%;
        max-width: 593px;
        height: auto;
        margin-bottom: 40px;
      }
      
      .TelegramContent {
        width: 100%;
        text-align: center;
      }
      
      .TelegramContent .btn { width: 380px; max-width: 380px; margin: 0 auto; }
      .FeaturesCard,
      .person-card,
      .success-image,
      .success-image-large { width: 380px !important; max-width: 380px !important; margin-left: auto; margin-right: auto; }
      .FeaturesCard { height: auto !important; padding: 28px 22px !important; }
      .FeaturesCard .feature-title { font-size: 19px; }
      .FeaturesCard .feature-text { font-size: 15px; line-height: 24px; }
      .feature-text { overflow-wrap: anywhere; word-break: break-word; }

      /* Tighter combined slider sizing */
      .success-slide { gap: 24px; }
      .SuccessStoriesSlider { gap: 20px; }
      .success-slider-controls { display: flex; }


    /* (Removed nested media queries; see consolidated rules below) */
      /* Repeat SVG constraints for smallest breakpoint */
      .Offer .Image img,
      .FAQImage img,
      .TelegramImages img,
      .step-icon img,
      .feature-icon,
      .brand-logo img,
      img[alt*="Success"],
      img[alt*="Story"],
      img[alt*="Deposit"],
      img[alt*="Guarantee"] {
        max-width: 380px;
        width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }
    
    /* New sections styling */
    .steps-section {
      background: linear-gradient(135deg, #0D0E14 0%, #1a1b2e 50%, #16213e 100%);
      position: relative;
      overflow: hidden;
    }
    
    .steps-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 50% 50%, rgba(57, 49, 197, 0.1) 0%, transparent 70%);
      pointer-events: none;
    }
    
    .step-card {
      width: 455px;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 43px;
      display: inline-flex;
    }
    
    .step-number {
      text-align: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      color: white;
      font-size: 40px;
      font-family: Inter;
      font-weight: 700;
      word-wrap: break-word;
    }
    
    .step-icon {
      width: 117px;
      height: 119px;
      padding: 0;
      background: linear-gradient(194deg, rgba(31, 35, 63, 0.20) 0%, rgba(2, 7, 32, 0.20) 100%);
      border-radius: 100px;
      outline: 1px white solid;
      outline-offset: -0.50px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      display: inline-flex;
    }
    .step-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
    
    .step-content {
      align-self: stretch;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 14px;
      display: flex;
    }
    
    .step-title {
      align-self: stretch;
      text-align: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      color: white;
      font-size: 30px;
      font-family: Inter;
      font-weight: 700;
      word-wrap: break-word;
    }
    
    .step-description {
      align-self: stretch;
      text-align: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      color: white;
      font-size: 16px;
      font-family: Inter;
      font-weight: 400;
      line-height: 30px;
      word-wrap: break-word;
    }
    
    .arrow-connector {
      width: 286px;
      height: 79px;
      outline: 3px white solid;
      outline-offset: -1.50px;
      position: absolute;
    }
    .dotted-line { width: 300px; height: auto; display: block; }
    
    .success-stories-section {
      background: #111111;
    }
    
    .success-image {
      width: 348px;
      height: 300px;
      border-radius: 20px;
      transition: transform 0.3s ease;
      flex: 0 0 348px;
    }
    
    .success-image:hover {
      transform: scale(1.05);
    }
    
    .success-image-large {
      width: 348px;
      height: 709px;
      border-radius: 40px;
      transition: transform 0.3s ease;
      flex: 0 0 348px;
    }
    
    .success-image-large:hover {
      transform: scale(1.05);
    }
    
    /* Person card used in Success Stories small tiles */
    .person-card {
      width: 348px;
      height: 300px;
      background: #0F1016;
      border-radius: 20px;
      outline: 2px solid rgba(255, 255, 255, 0.6);
      outline-offset: -1px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      color: #fff;
      transition: transform 0.3s ease;
      flex: 0 0 348px;
    }
    
    .person-card:hover { transform: scale(1.03); }
    
    .person-header {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    
    .person-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      flex: 0 0 56px;
    }
    .person-avatar img { width: 100%; height: 100%; object-fit: cover; }
    
    .person-name {
      font-size: 22px;
      font-weight: 700;
    }
    .person-age { opacity: 0.8; font-weight: 500; }
    
    .person-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 2px 0 4px; }
    
    .person-rows { display: flex; flex-direction: column; gap: 10px; }
    .person-row { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
    .person-row .label { color: rgba(255,255,255,0.8); }
    .person-row .value { font-weight: 700; }
    
    .gain { color: #2fd166; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
    .gain::before { content: "▲"; font-size: 12px; }
    
    .SuccessImages,
    .SuccessImagesLarge {
      justify-content: center;
      max-width: 1482px;
      margin: 0 auto;
      width: 100%;
      flex-wrap: nowrap;
    }
    
    @media (max-width: 1500px) {
      .success-image,
      .success-image-large {
        flex: 0 0 348px;
      }
      
      .SuccessImages,
      .SuccessImagesLarge {
        max-width: calc(348px * 4 + 30px * 3);
      }
    }
    
    @media (max-width: 1200px) {
      .SuccessImages,
      .SuccessImagesLarge {
        flex-wrap: wrap;
      }
      
      .success-image,
      .success-image-large {
        flex: 0 0 calc(50% - 15px);
        width: calc(50% - 15px);
        max-width: 348px;
      }
    }
    
    @media (max-width: 768px) {
      .success-image,
      .success-image-large {
        flex: 0 0 100%;
        width: 100%;
        max-width: 348px;
      }
    }
    
    .faq-section {
      background: linear-gradient(135deg, #0D0E14 0%, #1a1b2e 50%, #16213e 100%);
      position: relative;
      overflow: hidden;
    }
    
    .faq-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 30% 70%, rgba(40, 98, 241, 0.05) 0%, transparent 50%);
      pointer-events: none;
    }
    
    .faq-item {
      width: 826px;
      padding: 35px 40px;
      background: linear-gradient(135deg, rgba(2, 3, 12, 0.20) 9%, rgba(2, 3, 12, 0.20) 31%, rgba(40, 98, 241, 0.20) 100%);
      border-radius: 10px;
      outline: 1px white solid;
      outline-offset: -0.50px;
      backdrop-filter: blur(7px);
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 18px;
      display: flex;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .faq-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    .faq-header {
      align-self: stretch;
      justify-content: flex-start;
      align-items: center;
      gap: 20px;
      display: inline-flex;
    }
    
    .faq-question {
      flex: 1 1 0;
      color: white;
      font-size: 24px;
      font-family: Inter;
      font-weight: 700;
      word-wrap: break-word;
    }
    
    .faq-toggle {
      width: 36px;
      height: 36px;
      position: relative;
      overflow: hidden;
    }
    
    .faq-toggle::before {
      content: '+';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
          font-size: 30px; /* Bigger plus icon */
      font-weight: bold;
    }
    
    .faq-answer {
      align-self: stretch;
      color: white;
      font-size: 16px;
      font-family: Inter;
      font-weight: 400;
      line-height: 30px;
      word-wrap: break-word;
          display: none; /* Hidden by default */
    }

    /* Open state: show answer and switch icon to minus */
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-toggle::before { content: '−'; }

    /* Reduced motion respect */
    @media (prefers-reduced-motion: no-preference) {
      .faq-answer { transition: all 0.3s ease; }
      .faq-item.open .faq-answer { animation: faqFade 0.25s ease; }
    }

    @keyframes faqFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
    
    .telegram-section {
      background: #111111;
      position: relative;
      overflow: hidden;
    }
    
    .telegram-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 80% 20%, rgba(57, 49, 197, 0.1) 0%, transparent 50%),
                  radial-gradient(circle at 20% 80%, rgba(40, 98, 241, 0.1) 0%, transparent 50%);
      pointer-events: none;
    }
    
    .footer-section {
      background: #111111;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .social-icon {
      width: 34px;
      height: 34px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease;
      cursor: pointer;
    }
    
    .social-icon:hover {
      transform: scale(1.2);
    }
    
    .social-icon::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 50%;
    }
    
    .social-icon.facebook::before {
      width: 20px;
      height: 20px;
    }
    
    .social-icon.twitter::before {
      width: 20px;
      height: 20px;
    }
    
    .social-icon.instagram::before {
      width: 20px;
      height: 20px;
    }
    
    .social-icon.linkedin::before {
      width: 20px;
      height: 20px;
    }
    
    /* Footer social icons using SVGs */
    .social-svg { width: 34px; height: 34px; display: block; transition: transform 0.3s ease; cursor: pointer; }
    .social-svg:hover { transform: scale(1.2); }
    
    /* Brand logo (top-left) */
    .brand-logo {
      display: flex;
      align-items: center;
    }
    .brand-logo img { width: 200px; height: 54px; display: block; }

    /* Language flag icon */
    .flag-badge {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      outline: 1px solid white;
      outline-offset: -1px;
      background: rgba(255,255,255,0.05);
      padding: 0;
      overflow: hidden;
    }
    .flag-badge img { width: 24px; height: 24px; display: block; }

    /* Hide the duplicated mobile language flag by default (desktop view) */
    #mobile-language { display: none; }
    
    /* Guaranteed Performance cards layout: 2 per row */
    .Cards {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px !important;
      align-items: stretch;
      width: 100%;
    }
    .Cards .FeaturesCard { width: 100% !important; }
    .feature-title { color: #fff; font-size: 24px; font-weight: 700; }
    .feature-text { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 28px; }
    
    /* Feature icons sized as requested */
    .feature-icon { width: 110px; height: 113px; display: block; }

    /* Hide mobile success stories slider by default (desktop/non-mobile) */
    .SuccessStoriesSlider { display: none; }

    /* Desktop (>=769px): ensure slider hidden, show original grids */
    @media (min-width: 769px) {
      .SuccessStoriesSlider { display: none !important; }
      .SuccessImages, .SuccessImagesLarge { display: flex; overflow: visible; scroll-snap-type: none; }
    }

    /* Mobile (<=768px): show unified slider and hide original grids */
    @media (max-width: 768px) {
      .SuccessStoriesSlider { display: flex !important; }
      .SuccessImages, .SuccessImagesLarge { display: none !important; }
    }


    /* --- NEW MOBILE STYLES ADDED BELOW --- */

    /* Base styles for new mobile header elements */
    .header-controls {
      align-items: center;
    }

    .mobile-menu-toggle {
      display: none; /* Hidden by default on desktop */
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 24px;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 15px; /* Spacing from flag */
    }

    .mobile-menu-toggle span {
      display: block;
      width: 100%;
      height: 3px;
      background: white;
      border-radius: 2px;
      transition: all 0.3s ease;
    }
    
    /* Mobile-specific overrides */
    @media (max-width: 991px) {
      
      /* --- Header --- */
      .header .container {
        max-width: 100%;
        padding: 0 30px;
      }

      .desktop-nav {
        display: none;
      }

      .desktop-cta {
        display: none;
      }

      .mobile-menu-toggle {
        display: flex; /* Show hamburger */
      }

      .header .header {
        height: auto;
        padding: 15px 0; /* Smaller header padding */
        gap: 0;
      }
      
      .header-controls {
         gap: 15px;
      }

      .brand-logo img {
        width: 160px; /* Smaller logo */
        height: auto;
      }

      /* --- Hero Section --- */
      .Hero {
        padding: 40px 0 60px; /* Reduced padding */
        gap: 40px;
      }
      
      .container {
         max-width: 100%;
         padding: 0 30px;
      }

      /* Hide desktop line breaks */
      .heading-primary br,
      .paragraph br {
        display: none;
      }
      
      .Content.flex-column {
        gap: 30px;
      }

      .heading-primary {
        font-size: 34px; /* Scaled down from 66px */
        line-height: 1.3;
      }

      .paragraph {
        font-size: 18px; /* Scaled down from 22px */
        line-height: 1.6;
      }

      .trusted-badge {
        padding: 12px 24px;
        font-size: 16px;
      }

      /* --- Hero Video --- */
      .hero-video-bg {
        height: auto;
        aspect-ratio: 16 / 9; /* Maintain aspect ratio */
        padding: 0;
        max-height: 400px;
      }

      .play-button {
        width: 80px;
        height: 80px;
      }
      
      .play-button::before {
        border-left-width: 15px;
        border-top-width: 9px;
        border-bottom-width: 9px;
        transform: translate(-45%, -50%);
      }

      /* --- Hero Buttons (Stacked) --- */
      .RatingAndCta {
        gap: 30px;
        width: 100%;
      }

      .Buttons.flex-row {
        flex-direction: column;
        align-items: stretch; /* Make children full-width */
        width: 100%;
        gap: 20px;
      }
      
      .Buttons .btn {
        width: 100%; /* Make buttons full-width */
        font-size: 18px;
        height: 64px;
      }
      
      /* --- Other Sections (General Stacking) --- */
      
      /* Make all sections less padded */
      section {
        padding: 80px 0 !important;
      }
      
      .heading-secondary {
        font-size: 32px;
        line-height: 1.3;
      }
      
      /* Stack columns in other sections */
      .Offer .container.flex-row,
      .faq-section .container.flex-row,
      .telegram-section .container.flex-row {
        flex-direction: column;
      }
      
      .Offer .Image,
      .Offer .Content,
      .faq-section .FAQContent,
      .faq-section .FAQItems,
      .telegram-section .TelegramImages,
      .telegram-section .TelegramContent {
        width: 100% !important;
        max-width: 100%;
      }
      
      .Offer .Image img {
        width: 100%;
        max-width: 516px;
        height: auto;
      }

      /* Fix other flex containers */
      .Frame35.flex-row {
        flex-direction: column;
      }
      .Frame33, .Frame34 {
         width: 100% !important;
      }
      
      .Videos.flex-row,
      .Steps.flex-row,
      .SuccessImages.flex-row,
      .SuccessImagesLarge.flex-row {
        flex-direction: column;
        align-items: center;
        gap: 30px;
      }
      
      .Cards {
        grid-template-columns: 1fr; /* Stack guaranteed cards */
      }

      /* Show dotted line connectors vertically between stacked steps */
      .Steps .dotted-line {
        display: block;
        width: 60px;
        height: auto;
        margin: 20px 0 10px;
        align-self: center;
        transform: rotate(90deg); /* rotate horizontal asset to vertical */
      }
      
      .faq-item {
        width: 100%;
        padding: 25px 20px;
      }
      
      .faq-question {
        font-size: 18px;
      }
      
      .telegram-section .TelegramContent {
        gap: 40px;
      }
      
      .telegram-section .btn {
        width: 100% !important;
        max-width: 450px;
        margin: 0 auto;
      }
      
      .footer-section .container .flex-row {
        flex-direction: column;
        gap: 30px;
      }
      /* Keep social icons in a horizontal row on mobile */
      .footer-section .footer-social {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        gap: 23px;
        width: 100%;
      }
      
      .footer-section .text-light {
        text-align: center;
      }
    }
	/* --- NEW MOBILE NAV STYLES --- */

    /* By default, the mobile nav is hidden.
  The [aria-hidden="true"] in your HTML might already be doing this,
  but adding 'display: none' is more explicit.
*/
.mobile-nav {
  display: none;
  
  /* Add styling for your mobile menu panel.
    The styles below are a starting point based on your site's design.
    You will likely need to adjust them.
  */
  background-color: #0a0b1f; /* A dark blue, matching your site */
  position: absolute; /* Position it relative to the header */
  top: 90px;  /* Adjust to sit below your header */
  left: 5%;   /* Give it some side margin */
  width: 90%; 
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000; /* Ensure it's on top of other content */
}

/* THIS IS THE KEY:
  When the .mobile-nav element ALSO has the .is-open class,
  we change its display from 'none' to 'flex' so it becomes visible.
*/
.mobile-nav.is-open {
  display: flex;
  flex-direction: column; /* Stack the nav links vertically */
  gap: 15px; /* Add some space between the links */
  align-items: center; /* Center the links */
}

/* This styles your burger icon. 
  Your file has empty <button> tags, so this adds a basic 3-line icon.
*/
.mobile-menu-toggle {
  display: none; /* Hide it on desktop */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001; /* Make sure it's clickable */
}

/* These are the 3 lines of the burger icon */
.mobile-menu-toggle span {
  width: 30px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* This media query will show the mobile burger icon 
  and hide the desktop nav on smaller screens.
  Adjust 992px as needed.
*/
@media (max-width: 992px) {
  .desktop-nav,
  .desktop-cta {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex; /* Show the burger menu */
  }

  /* Show the mobile language flag only on mobile widths */
  #mobile-language { display: flex; }
}

/* This animates the burger icon into an 'X'
  when the .is-active class is added by the JavaScript.
*/
.mobile-menu-toggle.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* --- Late overrides to ensure proper precedence for narrower screens --- */
@media (max-width: 768px) {
  /* Force Automated Growth Illustration image to 380px cap */
  .Offer .Image img { max-width: 380px !important; width: 100% !important; height: auto !important; }
  /* Add horizontal padding to content blocks */
  .Content, .Offer .Content, .TelegramContent, .FAQContent { padding-left: 50px !important; padding-right: 50px !important; }
  /* Enlarge dotted connectors to match desktop clarity (rotated 90deg) */
  .Steps .dotted-line { width: 300px; max-width: 100%; margin: 24px auto; transform: rotate(90deg); transform-origin: center; filter: brightness(1.15) contrast(1.1); }
}

@media (max-width: 480px) {
  .Offer .Image img { max-width: 380px !important; width: 100% !important; height: auto !important; }
  .Content, .Offer .Content, .TelegramContent, .FAQContent { padding-left: 50px !important; padding-right: 50px !important; }
  /* Match enlarged dotted connectors on smallest screens (rotated 90deg) */
  .Steps .dotted-line { max-height: 50px; width: 300px; max-width: 100%; margin: 24px auto; transform: rotate(90deg); transform-origin: center; filter: brightness(1.15) contrast(1.1); }
}