/* === Block 1 === */
.ai-use-case-card { position: relative; }
      .ai-use-case-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
      .ai-use-case-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
      .ai-use-case-card:hover::after { transform: scaleX(1); }
      .ai-use-case-card:nth-child(1)::after { background: #EC5A22; }
      .ai-use-case-card:nth-child(2)::after { background: #00A9EA; }
      .ai-use-case-card:nth-child(3)::after { background: #16A34A; }
      .ai-use-case-card:nth-child(4)::after { background: #8C278A; }
      .ai-use-case-card:nth-child(5)::after { background: #F5A11A; }
      .ai-use-case-card:nth-child(6)::after { background: #00A9EA; }
      .ai-use-case-card { display: flex !important; flex-direction: column !important; }
      .ai-use-case-card > span:last-child { margin-top: auto !important; align-self: flex-start; }
      @media (max-width: 768px) { .ai-use-case-card { grid-column: span 1 !important; } }
      .vibecoder-cta:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); }

/* === Block 2 === */
.ai-benefit-card { position: relative; }
      .ai-benefit-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
      .ai-benefit-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
      .ai-benefit-card:hover::after { transform: scaleX(1); }
      .ai-benefit-card:nth-child(1)::after { background: #EC5A22; }
      .ai-benefit-card:nth-child(2)::after { background: #00A9EA; }
      .ai-benefit-card:nth-child(3)::after { background: #16A34A; }
      .ai-benefit-card:nth-child(4)::after { background: #8C278A; }
      .ai-benefit-card:nth-child(5)::after { background: #F5A11A; }
      .ai-benefit-card { display: flex !important; flex-direction: column !important; }
      .ai-benefit-card > span:last-child { margin-top: auto !important; align-self: flex-start; }
      .ai-benefit-card:nth-child(6)::after { background: #00A9EA; }
      @media (max-width: 768px) {
        .ai-benefit-card { grid-column: span 1 !important; }
      }

/* === Block 3 === */
.ailab-card { position: relative; }
      .ailab-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
      .ailab-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
      .ailab-card:hover::after { transform: scaleX(1); }
      .ailab-card:nth-child(1)::after { background: #EC5A22; }
      .ailab-card:nth-child(2)::after { background: #00A9EA; }
      .ailab-card:nth-child(3)::after { background: #16A34A; }
      .ailab-card:nth-child(4)::after { background: #8C278A; }
      .ailab-card:nth-child(5)::after { background: #F5A11A; }
      .ailab-card:nth-child(6)::after { background: #00A9EA; }
      .ailab-card:nth-child(7)::after { background: #16A34A; }
      .ailab-card:nth-child(8)::after { background: #EC5A22; }
      .ailab-card:nth-child(9)::after { background: #8C278A; }
      @media (max-width: 768px) { .ailab-card { grid-column: span 1 !important; } }

/* === Block 4 === */
.ai-sw-slider{overflow:hidden;position:relative;padding:16px 0;width:100vw;margin-left:calc(-50vw + 50%)}
      .ai-sw-slider::before,.ai-sw-slider::after{content:'';position:absolute;top:0;bottom:0;width:150px;z-index:2;pointer-events:none}
      .ai-sw-slider::before{left:0;background:linear-gradient(90deg,#FFFFFF,transparent)}
      .ai-sw-slider::after{right:0;background:linear-gradient(-90deg,#FFFFFF,transparent)}
      .ai-sw-slider-track{display:flex;align-items:center;gap:20px;width:max-content}
      .ai-sw-slider-track.ai-row-1{animation:ai-marquee 85s linear infinite}
      .ai-sw-slider-track.ai-row-2{animation:ai-marquee-reverse 85s linear infinite}
      .ai-sw-slider-track:hover{animation-play-state:paused}
      .ai-sw-slider-item{display:flex;align-items:center;gap:12px;padding:14px 24px;border-radius:12px;border:1px solid #E2E8F0;background:#FFFFFF;text-decoration:none;white-space:nowrap;transition:all 0.25s;flex-shrink:0}
      .ai-sw-slider-item:hover{border-color:#EC5A22;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
      .ai-sw-slider-item img{width:36px;height:36px;border-radius:8px;object-fit:contain}
      .ai-sw-slider-item span{font-size:16px;font-weight:600;color:#1E293B}
      @keyframes ai-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
      @keyframes ai-marquee-reverse{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

/* === Block 5 === */
.vc-feature-card:hover { border-color: #EC5A22 !important; background: #FFFFFF !important; transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
      @media (max-width: 768px) {
        .vc-feature-card + .vc-feature-card { margin-top: 0; }
      }

/* === Block 6 === */
/* Tablet adaptations (1024px and below) */
      @media (max-width: 1024px) {
        /* Hero section */
        .hero h1 {
          font-size: 2.5rem !important;
          white-space: normal !important;
        }

        .hero p {
          font-size: 1.1rem !important;
          padding: 0 20px;
        }

        /* CTA buttons in hero */
        .hero-cta-primary,
        .hero-cta-secondary {
          font-size: 1rem !important;
          padding: 16px 32px !important;
        }

        /* Stats/features in hero */
        [style*="display: flex"][style*="gap: 32px"] {
          gap: 24px !important;
        }

        /* AI LAB section - 2 columns on tablet */
        [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 24px"] {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 20px !important;
          padding: 0 20px;
        }

        /* AI LAB title on tablet */
        [style*="font-size: 3.2rem"][style*="text-align: center"] {
          font-size: 2.5rem !important;
        }

        /* AI LAB description on tablet */
        [style*="font-size: 1.3rem"][style*="max-width: 800px"] {
          font-size: 1.2rem !important;
          padding: 0 20px !important;
        }
      }

      /* Mobile adaptations (768px and below) */
      @media (max-width: 768px) {
        /* Hero section */
        .hero {
          padding: 80px 0 60px !important;
        }

        .hero h1 {
          font-size: 2rem !important;
          line-height: 1.2 !important;
          padding: 0 20px;
        }

        .hero p {
          font-size: 1rem !important;
          padding: 0 20px;
        }

        /* CTA buttons - stack vertically */
        [style*="display: flex"][style*="gap: 20px"][style*="justify-content: center"] {
          flex-direction: column !important;
          align-items: center !important;
          gap: 16px !important;
        }

        .hero-cta-primary,
        .hero-cta-secondary {
          width: 100% !important;
          max-width: 300px !important;
          justify-content: center !important;
        }

        /* Hero stats - stack in 2 columns on mobile */
        [style*="margin-top: 60px"][style*="flex-wrap: wrap"] {
          gap: 20px !important;
          margin-top: 40px !important;
        }

        [style*="margin-top: 60px"][style*="flex-wrap: wrap"] > div {
          flex: 1 1 calc(50% - 10px);
          min-width: 120px;
        }

        /* Section titles */
        .section--title {
          font-size: 2rem !important;
          line-height: 1.3 !important;
          padding: 0 20px;
        }

        /* Use case cards grid */
        [style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
          grid-template-columns: 1fr !important;
          gap: 24px !important;
          padding: 0 20px;
        }

        .ai-use-case-card {
          padding: 32px 24px !important;
        }

        .ai-use-case-card h3 {
          font-size: 1.3rem !important;
        }

        /* Section padding adjustments */
        section {
          padding: 60px 0 !important;
        }

        /* Container padding */
        .container {
          padding-left: 20px !important;
          padding-right: 20px !important;
        }

        /* CTA sections with large padding */
        [style*="padding: 100px 0"] {
          padding: 60px 0 !important;
        }

        [style*="padding: 120px 0"] {
          padding: 80px 0 !important;
        }

        /* VibeCoder section - stack columns on mobile */
        [style*="grid-template-columns: 1fr 1fr"][style*="gap: 60px"] {
          grid-template-columns: 1fr !important;
          gap: 40px !important;
        }

        /* VibeCoder section images */
        [style*="grid-template-columns: 1fr 1fr"][style*="gap: 60px"] img {
          max-width: 100% !important;
          height: auto !important;
        }

        /* AI LAB section - tools grid responsive */
        [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 24px"] {
          grid-template-columns: 1fr !important;
          gap: 20px !important;
          padding: 0 20px;
        }

        /* AI LAB section title */
        [style*="font-size: 3.2rem"][style*="text-align: center"] {
          font-size: 2rem !important;
          padding: 0 20px !important;
        }

        /* AI LAB description */
        [style*="font-size: 1.3rem"][style*="max-width: 800px"] {
          font-size: 1.1rem !important;
          padding: 0 20px !important;
        }

        /* AI tool cards */
        .ai-tool-card {
          padding: 28px 20px !important;
        }
      }

      /* Small mobile (480px and below) */
      @media (max-width: 480px) {
        .hero h1 {
          font-size: 1.75rem !important;
        }

        .hero p {
          font-size: 0.95rem !important;
        }

        /* Hero stats - single column on very small screens */
        [style*="margin-top: 60px"][style*="flex-wrap: wrap"] > div {
          flex: 1 1 100%;
        }

        .section--title {
          font-size: 1.75rem !important;
        }

        /* AI LAB section title even smaller */
        [style*="font-size: 3.2rem"][style*="text-align: center"] {
          font-size: 1.75rem !important;
        }

        /* AI LAB description smaller */
        [style*="font-size: 1.3rem"][style*="max-width: 800px"] {
          font-size: 1rem !important;
        }

        /* Icon sizes in cards */
        .ai-use-case-card [style*="width: 70px"] {
          width: 60px !important;
          height: 60px !important;
        }

        .ai-use-case-card svg {
          width: 30px !important;
          height: 30px !important;
        }

        /* Buttons full width on small screens */
        .hero-cta-primary,
        .hero-cta-secondary {
          max-width: 100% !important;
          padding: 14px 24px !important;
        }
      }

      /* Additional hover effects disable on touch devices */
      @media (hover: none) {
        .ai-use-case-card:hover {
          transform: none !important;
        }

        .hero-cta-primary:hover,
        .hero-cta-secondary:hover {
          transform: none !important;
        }
      }