body {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
:root {
      --primary-bg: #0a0a0f;
      --secondary-surface: #12121a;
      --text-color: #e8e8ec;
      --primary-action: #7c3aed;
      --secondary-action: #06b6d4;
    }

    * {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
      background: var(--primary-bg);
      color: var(--text-color);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .gradient-text {
      background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 50%, #ec4899 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .glass-card {
      background: rgba(18, 18, 26, 0.7);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(124, 58, 237, 0.2);
    }

    .glow-border {
      box-shadow: 0 0 30px rgba(124, 58, 237, 0.3), inset 0 0 30px rgba(124, 58, 237, 0.05);
    }

    .btn-gradient {
      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #7c3aed 100%);
      background-size: 200% 200%;
      animation: gradientShift 3s ease infinite;
      transition: all 0.3s ease;
    }

    .btn-gradient:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 40px rgba(124, 58, 237, 0.4);
    }

    .btn-outline {
      border: 2px solid rgba(124, 58, 237, 0.5);
      transition: all 0.3s ease;
    }

    .btn-outline:hover {
      background: rgba(124, 58, 237, 0.1);
      border-color: #7c3aed;
      transform: translateY(-2px);
    }

    @keyframes gradientShift {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px) rotateY(0deg);
      }

      50% {
        transform: translateY(-20px) rotateY(10deg);
      }
    }

    @keyframes floatSlow {

      0%,
      100% {
        transform: translateY(0px) rotate(0deg);
      }

      50% {
        transform: translateY(-15px) rotate(5deg);
      }
    }

    @keyframes pulse-glow {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
      }

      50% {
        box-shadow: 0 0 40px rgba(124, 58, 237, 0.6);
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .animate-float {
      animation: float 6s ease-in-out infinite;
    }

    .animate-float-slow {
      animation: floatSlow 8s ease-in-out infinite;
    }

    .animate-float-delay {
      animation: float 6s ease-in-out infinite;
      animation-delay: 2s;
    }

    .animate-pulse-glow {
      animation: pulse-glow 3s ease-in-out infinite;
    }

    .animate-slide-up {
      animation: slideUp 0.8s ease-out forwards;
    }

    .animate-fade-in {
      animation: fadeIn 1s ease-out forwards;
    }

    .service-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .service-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3);
    }

    .service-card:hover .service-icon {
      transform: scale(1.1) rotateY(180deg);
    }

    .service-icon {
      transition: transform 0.6s ease;
    }

    .portfolio-card {
      transition: all 0.4s ease;
    }

    .portfolio-card:hover {
      transform: scale(1.05);
    }

    .portfolio-card:hover .portfolio-overlay {
      opacity: 1;
    }

    .pricing-card {
      transition: all 0.4s ease;
    }

    .pricing-card:hover {
      transform: translateY(-10px);
    }

    .pricing-popular {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%);
      border: 2px solid #7c3aed;
    }

    .testimonial-card {
      transition: all 0.3s ease;
    }

    .testimonial-card:hover {
      transform: scale(1.02);
    }

    .social-icon-3d {
      transition: all 0.4s ease;
      transform-style: preserve-3d;
    }

    .social-icon-3d:hover {
      transform: translateY(-5px) rotateY(15deg) rotateX(10deg);
    }

    .hero-bg-element {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.3;
    }

    .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #7c3aed, #06b6d4);
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .star-rating {
      color: #fbbf24;
    }

    .review-slider {
      display: flex;
      gap: 1.5rem;
      animation: scroll 30s linear infinite;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .review-slider:hover {
      animation-play-state: paused;
    }

    input,
    textarea {
      transition: all 0.3s ease;
    }

    input:focus,
    textarea:focus {
      border-color: #7c3aed;
      box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
    }

    .section-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease;
    }

    .section-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .metric-counter {
      font-variant-numeric: tabular-nums;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #0a0a0f;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #7c3aed, #06b6d4);
      border-radius: 4px;
    }

    .platform-carousel {
      animation: platformScroll 30s linear infinite;
    }

    @keyframes platformScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(calc(-100% / 1.5));
      }
    }

    .platform-carousel:hover {
      animation-play-state: paused;
    }

    .platform-card {
      transition: all 0.3s ease;
    }

    .platform-card:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3);
    }

    .platform-icon {
      transition: all 0.4s ease;
    }

    .ads-platforms-section {
      background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
    }

    .platform-logo-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateY(0);
    }

    .platform-logo-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(124, 58, 237, 0.2);
    }

    .platform-logo-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
      transition: all 0.4s ease;
    }

    .platform-logo-card:hover .platform-logo-icon {
      transform: scale(1.1);
    }

    .logos-carousel {
      animation: logosScroll 40s linear infinite;
      display: flex;
      gap: 20px;
    }

    @keyframes logosScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(calc(-100% / 2));
      }
    }

    .logos-carousel:hover {
      animation-play-state: paused;
    }

    .logos-carousel-wrapper {
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    .gallery-masonry-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      grid-auto-rows: auto;
    }

    @media (min-width: 768px) {
      .gallery-masonry-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .gallery-masonry-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .gallery-item {
      animation: slideUp 0.8s ease-out forwards;
    }

    .gallery-item:nth-child(1) {
      grid-column: span 1;
      grid-row: span 2;
    }

    .gallery-item:nth-child(2) {
      grid-column: span 1;
      grid-row: span 1;
    }

    .gallery-item:nth-child(3) {
      grid-column: span 1;
      grid-row: span 2;
    }

    .gallery-item:nth-child(4) {
      grid-column: span 1;
      grid-row: span 1;
    }

    .gallery-item:nth-child(5) {
      grid-column: span 1;
      grid-row: span 2;
    }

    .gallery-item:nth-child(6) {
      grid-column: span 1;
      grid-row: span 1;
    }

    .gallery-item:nth-child(7) {
      grid-column: span 1;
      grid-row: span 2;
    }

    .gallery-item:nth-child(8) {
      grid-column: span 1;
      grid-row: span 1;
    }

    @media (max-width: 1024px) {
      .gallery-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
      }
    }

    .gallery-card {
      position: relative;
      height: 100%;
      min-height: 280px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gallery-image-container {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-overlay {
      position: absolute;
      inset: 0;
    }

    .gallery-card:hover {
      transform: scale(1.05) translateY(-8px);
      box-shadow: 0 30px 80px rgba(124, 58, 237, 0.3);
    }

    /* Testimonials Carousel */
    .testimonials-carousel {
      display: flex;
      gap: 1.5rem;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding-bottom: 1rem;
    }

    .testimonials-carousel::-webkit-scrollbar {
      height: 4px;
    }

    .testimonials-carousel::-webkit-scrollbar-track {
      background: rgba(124, 58, 237, 0.1);
      border-radius: 2px;
    }

    .testimonials-carousel::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, #7c3aed, #06b6d4);
      border-radius: 2px;
    }
      .logos-carousel-wrapper {
        overflow: hidden;
        background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
        border-radius: 24px;
        padding: 20px 0;
        mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
      }

      .logos-carousel {
        animation: infiniteScroll 13s linear infinite;
        display: flex;
        gap: 20px;
        will-change: transform;
      }

      .logos-carousel:hover {
        animation-play-state: paused;
      }

      @keyframes infiniteScroll {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(calc(-50% - 10px));
        }
      }

      .platform-logo-card {
        border: 1px solid rgba(124, 58, 237, 0.2);
        backdrop-filter: blur(10px);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .platform-logo-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .platform-logo-card:hover {
        transform: translateY(-12px) scale(1.05);
        border-color: rgba(124, 58, 237, 0.6);
        box-shadow: 0 20px 50px rgba(124, 58, 237, 0.25);
      }

      .platform-logo-card:hover::before {
        opacity: 1;
      }

      .platform-logo-icon {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        animation: fadeInScale 0.6s ease-out both;
      }

      @keyframes fadeInScale {
        from {
          opacity: 0;
          transform: scale(0.8);
        }

        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      .platform-logo-card:hover .platform-logo-icon {
        transform: scale(1.15) rotate(-5deg);
        filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.5));
      }
      @keyframes growWidth {
              from {
                width: 0;
              }

              to {
                width: 100%;
              }
            }

            .advantage-card {
              border: 1px solid rgba(124, 58, 237, 0.2);
              transition: all 0.3s ease;
            }

            .advantage-card:hover {
              border-color: rgba(124, 58, 237, 0.6);
              box-shadow: 0 0 30px rgba(124, 58, 237, 0.2);
              transform: translateX(8px);
            }

            .stat-card {
              border: 1px solid rgba(124, 58, 237, 0.2);
              transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .stat-card:hover {
              border-color: rgba(124, 58, 237, 0.6);
              box-shadow: 0 20px 40px rgba(124, 58, 237, 0.2);
              transform: translateY(-8px);
            }

            .benefit-badge {
              border: 1px solid rgba(124, 58, 237, 0.2);
              transition: all 0.4s ease;
              animation: slideUp 0.8s ease-out forwards;
            }

            .benefit-badge:hover {
              border-color: rgba(124, 58, 237, 0.6);
            }