* { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: #ffffff;
      color: #1a1a3e;
      font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
    }

    @keyframes float {
      0%,100% { transform: translateY(0) rotate(var(--rot,-3deg)); }
      50% { transform: translateY(-10px) rotate(var(--rot,-3deg)); }
    }

    /* HEADER */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 6%;
      max-width: 1440px;
      margin: 0 auto;
      flex-wrap: wrap;
      gap: 20px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      background: oklch(0.7 0.15 55);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-icon div {
      width: 14px;
      height: 14px;
      border-radius: 4px;
      background: white;
    }

    .logo-text {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 20px;
    }

    .logo-text .main { color: #1a1a3e; }
    .logo-text .accent { color: oklch(0.7 0.15 55); }

    nav {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }

    nav a {
      color: #5a6b7f;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      transition: color 0.3s;
    }

    nav a:hover { color: oklch(0.45 0.15 250); }

    .btn-demo {
      background: oklch(0.45 0.15 250);
      color: white;
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      padding: 11px 22px;
      border-radius: 100px;
      white-space: nowrap;
      transition: background 0.3s;
    }

    .btn-demo:hover { background: oklch(0.35 0.12 250); }

    .btn-portal {
      background: transparent;
      border: 1.5px solid oklch(0.45 0.15 250);
      color: oklch(0.45 0.15 250);
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      padding: 9.5px 20px;
      border-radius: 100px;
      white-space: nowrap;
      transition: background 0.3s, color 0.3s;
    }

    .btn-portal:hover {
      background: oklch(0.45 0.15 250);
      color: white;
    }

    /* HERO */
    .hero {
      position: relative;
      background: linear-gradient(155deg, oklch(0.38 0.15 250) 0%, oklch(0.56 0.145 235) 100%);
      overflow: hidden;
      padding: 80px 6% 120px;
      color: white;
    }

    .hero-bg-1 {
      position: absolute;
      top: -120px;
      right: -100px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      filter: blur(2px);
    }

    .hero-bg-2 {
      position: absolute;
      bottom: -160px;
      left: 10%;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
    }

    .hero-content {
      max-width: 1440px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .hero-visual {
      position: relative;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-box {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 24px;
      position: absolute;
      color: white;
    }

    .stat-box.box-1 {
      top: 20px;
      left: 0;
      width: 240px;
    }

    .stat-box.box-2 {
      top: 160px;
      right: 0;
      width: 200px;
    }

    .stat-box.box-3 {
      bottom: 0;
      left: 40px;
      width: 220px;
    }

    .stat-number {
      font-size: 32px;
      font-weight: 700;
      font-family: 'Space Grotesk', sans-serif;
      margin-bottom: 6px;
    }

    .stat-label {
      font-size: 14px;
      opacity: 0.9;
      line-height: 1.4;
    }

    .hero-text h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 56px;
      font-weight: 700;
      line-height: 1.15;
      margin: 0 0 24px;
      max-width: 700px;
    }

    .hero-text p {
      font-size: 20px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.85);
      max-width: 600px;
      margin: 0 0 40px;
    }

    .hero-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.12);
      color: white;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 100px;
      margin-bottom: 24px;
      letter-spacing: 0.02em;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: oklch(0.7 0.15 55);
      color: white;
      text-decoration: none;
      font-weight: 700;
      font-size: 16px;
      padding: 16px 30px;
      border-radius: 100px;
      display: inline-block;
      white-space: nowrap;
      transition: background 0.3s;
    }

    .btn-primary:hover { background: oklch(0.6 0.15 55); }

    .btn-secondary {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      color: white;
      text-decoration: none;
      font-weight: 700;
      font-size: 16px;
      padding: 16px 30px;
      border-radius: 100px;
      display: inline-block;
      white-space: nowrap;
      transition: border-color 0.3s, background 0.3s;
    }

    .btn-secondary:hover {
      border-color: white;
      background: rgba(255, 255, 255, 0.1);
    }

    .btn-tertiary {
      background: transparent;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: underline;
      font-weight: 600;
      font-size: 16px;
      padding: 16px 4px;
      border: none;
      cursor: pointer;
      transition: color 0.3s;
    }

    .btn-tertiary:hover { color: white; }

    .hero-visuals {
      position: relative;
      height: 520px;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .cards-carousel {
      display: none;
      width: 100%;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .cards-carousel::-webkit-scrollbar {
      display: none;
    }

    .carousel-container {
      display: flex;
      gap: 12px;
      padding: 0;
      min-width: 100%;
      width: fit-content;
    }

    .card {
      position: absolute;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 14px;
      box-shadow: 0 16px 40px rgba(10, 20, 50, 0.3);
      padding: 14px;
      box-sizing: border-box;
      animation: float 7s ease-in-out infinite;
    }

    .card.large {
      width: 58%;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 20px 50px rgba(10, 20, 50, 0.35);
    }

    /* PAIN POINTS */
    .pain-points {
      position: relative;
      background: #1a2847;
      overflow: hidden;
      padding: 100px 6%;
      color: white;
    }

    .pain-points-bg-1 {
      position: absolute;
      top: -140px;
      left: -100px;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: rgba(212, 165, 116, 0.18);
      filter: blur(4px);
    }

    .pain-points-bg-2 {
      position: absolute;
      bottom: -160px;
      right: -100px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(44, 74, 138, 0.25);
      filter: blur(4px);
    }

    .pain-points-container {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .pain-points h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 38px;
      font-weight: 700;
      text-align: center;
      margin: 0 0 12px;
      color: white;
    }

    .pain-points-subtitle {
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
      font-size: 17px;
      max-width: 560px;
      margin: 0 auto 64px;
    }

    .comparison {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }

    .comparison-card {
      border-radius: 22px;
      padding: 44px 40px;
      border: 2px solid oklch(0.7 0.15 55);
    }

    .comparison-card.before {
      background: #f5f0e8;
      color: #1a1a3e;
    }

    .comparison-card.after {
      background: #ffffff;
      color: #1a1a3e;
      box-shadow: 0 20px 50px rgba(10, 20, 50, 0.35);
    }

    .comparison-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 26px;
      font-weight: 700;
      font-size: 17px;
      letter-spacing: 0.03em;
    }

    .comparison-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      flex-shrink: 0;
      color: white;
    }

    .comparison-card.before .comparison-icon {
      background: oklch(0.7 0.15 55);
      color: white;
    }

    .comparison-card.after .comparison-icon {
      background: oklch(0.45 0.15 250);
      color: white;
    }

    .comparison-items {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .comparison-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .comparison-item-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .comparison-card.before .comparison-item-icon {
      background: white;
      border: 2px solid oklch(0.7 0.15 55);
      color: oklch(0.7 0.15 55);
    }

    .comparison-card.after .comparison-item-icon {
      background: oklch(0.45 0.15 250);
      color: white;
    }

    .comparison-item-text {
      font-size: 17px;
      font-weight: 600;
      line-height: 1.5;
      color: #1a1a3e;
    }

    .vs-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: oklch(0.7 0.15 55);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      z-index: 2;
    }

    /* FEATURES */
    .features {
      background: #ffffff;
      padding: 100px 6%;
    }

    .features-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .features h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      margin: 0 0 12px;
    }

    .features-subtitle {
      text-align: center;
      color: #5a6b7f;
      font-size: 17px;
      max-width: 560px;
      margin: 0 auto 56px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .feature-card {
      border-radius: 18px;
      padding: 32px;
      border: 1px solid rgba(44, 74, 138, 0.15);
    }

    .feature-card-1 { background: #f0f4f8; border-color: oklch(0.45 0.15 250); }
    .feature-card-2 { background: #fef9f3; border-color: oklch(0.7 0.15 55); }
    .feature-card-3 { background: #eef2f8; border-color: oklch(0.56 0.145 235); }
    .feature-card-4 { background: #fef5eb; border-color: oklch(0.7 0.15 55); }
    .feature-card-5 { background: #f0f4f8; border-color: oklch(0.45 0.15 250); }
    .feature-card-6 { background: #fef9f3; border-color: oklch(0.7 0.15 55); }

    .feature-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 24px;
      font-weight: 700;
    }

    .feature-card-1 .feature-icon { background: oklch(0.45 0.15 250); color: white; }
    .feature-card-2 .feature-icon { background: oklch(0.7 0.15 55); color: white; }
    .feature-card-3 .feature-icon { background: oklch(0.56 0.145 235); color: white; }
    .feature-card-4 .feature-icon { background: oklch(0.7 0.15 55); color: white; }
    .feature-card-5 .feature-icon { background: oklch(0.45 0.15 250); color: white; }
    .feature-card-6 .feature-icon { background: oklch(0.7 0.15 55); color: white; }

    .feature-title {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 19px;
      margin-bottom: 10px;
    }

    .feature-text {
      font-size: 15.5px;
      line-height: 1.6;
      color: #5a6b7f;
    }

    /* PRICING */
    .pricing {
      max-width: 1200px;
      margin: 0 auto;
      padding: 100px 6%;
    }

    .pricing h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      margin: 0 0 12px;
    }

    .pricing-subtitle {
      text-align: center;
      color: #5a6b7f;
      font-size: 17px;
      max-width: 560px;
      margin: 0 auto 12px;
    }

    .pricing-badge {
      display: inline-block;
      background: oklch(0.7 0.15 55 / 0.15);
      color: #1a1a3e;
      font-weight: 700;
      font-size: 14px;
      padding: 8px 18px;
      border-radius: 100px;
      margin: 0 auto 56px;
      text-align: center;
      width: fit-content;
      display: block;
    }

    .pricing-content {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 36px;
      align-items: start;
      max-width: 1160px;
      margin: 0 auto;
    }

    .pricing-box {
      background: #ffffff;
      border-radius: 28px;
      padding: 16px;
      box-shadow: 0 20px 60px rgba(30, 40, 80, 0.14);
      border: 2px solid oklch(0.45 0.15 250);
    }

    .pricing-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      background: #eef2f8;
      border-radius: 20px;
      padding: 8px;
      margin-bottom: 8px;
    }

    .pricing-tab {
      border: none;
      cursor: pointer;
      padding: 16px 10px;
      border-radius: 14px;
      font-family: 'Manrope', sans-serif;
      font-weight: 800;
      font-size: 15px;
      background: transparent;
      color: #5a6b7f;
      transition: all 0.15s;
    }

    .pricing-tab.active {
      background: white;
      color: #2c4a8a;
      box-shadow: 0 4px 12px rgba(30, 40, 80, 0.12);
    }

    .pricing-details {
      padding: 44px 40px 40px;
      text-align: center;
    }

    .pricing-period {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .pricing-period-text {
      color: #5a6b7f;
      font-size: 15px;
      font-weight: 600;
    }

    .pricing-savings {
      background: oklch(0.7 0.15 55);
      color: white;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 100px;
    }

    .pricing-amount {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .pricing-price {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 68px;
      font-weight: 700;
      color: #1a1a3e;
    }

    .pricing-unit {
      color: #5a6b7f;
      font-size: 17px;
      font-weight: 600;
    }

    .pricing-original {
      color: #999;
      font-size: 15px;
      text-decoration: line-through;
      margin-bottom: 28px;
      min-height: 22px;
    }

    .pricing-cta {
      display: inline-block;
      text-decoration: none;
      background: oklch(0.45 0.15 250);
      color: white;
      font-weight: 700;
      font-size: 16px;
      padding: 16px 44px;
      border-radius: 100px;
      margin-bottom: 36px;
      transition: background 0.3s;
      width: 100%;
    }

    .pricing-cta:hover { background: oklch(0.35 0.12 250); }

    .pricing-items {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      text-align: left;
      border-top: 1px solid #f0f4fa;
      padding-top: 32px;
    }

    .pricing-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .pricing-item-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: oklch(0.45 0.15 250);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .pricing-item-text {
      font-size: 15px;
      line-height: 1.5;
      color: #1a1a3e;
    }

    .testimonials {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .testimonial {
      background: #ffffff;
      border-radius: 18px;
      padding: 26px;
      box-shadow: 0 6px 20px rgba(30, 40, 80, 0.12);
      border-left: 4px solid oklch(0.7 0.15 55);
    }

    .testimonial-quote {
      font-size: 15px;
      line-height: 1.6;
      color: #1a1a3e;
      margin-bottom: 16px;
      font-style: italic;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testimonial-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: oklch(0.45 0.15 250);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 15px;
      flex-shrink: 0;
    }

    .testimonial-info {
      min-width: 0;
    }

    .testimonial-name {
      font-weight: 700;
      font-size: 14.5px;
      color: #1a1a3e;
    }

    .testimonial-business {
      color: #5a6b7f;
      font-size: 13px;
    }

    /* CONTACT */
    .contact {
      position: relative;
      background: linear-gradient(155deg, oklch(0.38 0.15 250) 0%, oklch(0.56 0.145 235) 100%);
      overflow: hidden;
      padding: 100px 6%;
      text-align: center;
      color: white;
    }

    .contact-bg-1 {
      position: absolute;
      top: -100px;
      left: -80px;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
    }

    .contact-bg-2 {
      position: absolute;
      bottom: -140px;
      right: -60px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
    }

    .contact-content {
      position: relative;
      z-index: 1;
      max-width: 640px;
      margin: 0 auto;
    }

    .contact h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 38px;
      font-weight: 700;
      color: white;
      margin: 0 0 16px;
    }

    .contact-text {
      color: rgba(255, 255, 255, 0.85);
      font-size: 17px;
      line-height: 1.6;
      margin: 0 0 40px;
    }

    .contact-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 36px;
    }

    /* FOOTER */
    footer {
      max-width: 1440px;
      margin: 0 auto;
      padding: 36px 6%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      border-top: 1px solid #e0e8f0;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-logo-icon {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: oklch(0.7 0.15 55);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-logo-icon div {
      width: 11px;
      height: 11px;
      border-radius: 3px;
      background: white;
    }

    .footer-logo-text {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: 16px;
    }

    .footer-logo-text .main { color: #1a1a3e; }
    .footer-logo-text .accent { color: oklch(0.7 0.15 55); }

    .footer-copyright {
      color: #5a6b7f;
      font-size: 14px;
    }

    /* RESPONSIVE MOBILE */
    @media (max-width: 768px) {
      html {
        font-size: 15px;
      }

      header {
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 4%;
      }

      nav {
        width: auto;
        gap: 8px;
        justify-content: flex-end;
      }

      nav a:not(.btn-demo):not(.btn-portal) {
        display: none;
      }

      .logo {
        gap: 8px;
      }

      .logo-icon {
        width: 32px;
        height: 32px;
      }

      .logo-text {
        font-size: 17px;
      }

      /* HERO MOBILE */
      .hero {
        padding: 40px 4% 60px;
      }

      .hero-content {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .hero-visual {
        display: none;
      }

      .hero-badge {
        font-size: 12px;
        padding: 6px 14px;
        margin-bottom: 16px;
      }

      .hero-text h1 {
        font-size: 28px;
        line-height: 1.25;
        margin: 0 0 16px;
      }

      .hero-text p {
        font-size: 15px;
        line-height: 1.5;
        margin: 0 0 20px;
      }

      .hero-buttons {
        flex-direction: column;
        gap: 10px;
      }

      .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 16px;
        font-size: 15px;
        border-radius: 12px;
      }

      .btn-tertiary {
        display: none;
      }

      .hero-visuals {
        position: relative;
        height: auto;
        display: none;
      }

      .cards-carousel {
        display: block;
      }

      .card {
        position: static;
        animation: none;
        width: 280px;
        min-width: 280px;
        padding: 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.97) !important;
        flex-shrink: 0;
      }

      .card.large {
        padding: 14px;
      }

      /* PAIN POINTS MOBILE */
      .pain-points {
        padding: 50px 4%;
      }

      .pain-points h2 {
        font-size: 26px;
        margin: 0 0 8px;
      }

      .pain-points-subtitle {
        font-size: 14px;
        margin: 0 auto 32px;
      }

      .comparison {
        grid-template-columns: 1fr;
        gap: 16px;
        position: relative;
      }

      .comparison-card {
        padding: 24px 18px;
        border-radius: 16px;
        border-width: 2px;
      }

      .comparison-title {
        font-size: 15px;
        margin-bottom: 18px;
      }

      .comparison-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
      }

      .vs-badge {
        top: -28px;
        left: 50%;
        width: 52px;
        height: 52px;
        font-size: 12px;
      }

      .comparison-items {
        gap: 14px;
      }

      .comparison-item {
        gap: 10px;
      }

      .comparison-item-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }

      .comparison-item-text {
        font-size: 14px;
        line-height: 1.5;
      }

      /* FEATURES MOBILE */
      .features {
        padding: 50px 4%;
      }

      .features h2 {
        font-size: 26px;
        margin: 0 0 8px;
      }

      .features-subtitle {
        font-size: 14px;
        margin: 0 auto 32px;
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .feature-card {
        padding: 22px;
        border-radius: 14px;
      }

      .feature-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 14px;
        font-size: 22px;
      }

      .feature-title {
        font-size: 16px;
        margin-bottom: 8px;
      }

      .feature-text {
        font-size: 14px;
        line-height: 1.5;
      }

      /* PRICING MOBILE */
      .pricing {
        padding: 50px 4%;
      }

      .pricing h2 {
        font-size: 26px;
        margin: 0 0 8px;
      }

      .pricing-subtitle {
        font-size: 14px;
        margin: 0 auto 12px;
      }

      .pricing-badge {
        font-size: 12px;
        padding: 6px 14px;
        margin-bottom: 32px;
      }

      .pricing-content {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .pricing-box {
        padding: 12px;
        border-radius: 20px;
      }

      .pricing-tabs {
        gap: 6px;
        padding: 6px;
        border-radius: 14px;
      }

      .pricing-tab {
        padding: 12px 10px;
        font-size: 13px;
        border-radius: 10px;
      }

      .pricing-details {
        padding: 24px 18px;
      }

      .pricing-period {
        margin-bottom: 14px;
      }

      .pricing-amount {
        margin-bottom: 6px;
      }

      .pricing-price {
        font-size: 44px;
      }

      .pricing-unit {
        font-size: 13px;
      }

      .pricing-original {
        font-size: 13px;
        margin-bottom: 20px;
      }

      .pricing-cta {
        font-size: 14px;
        padding: 13px 20px;
        margin-bottom: 28px;
        border-radius: 12px;
      }

      .pricing-items {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid #f0f0f0;
      }

      .pricing-item {
        gap: 8px;
      }

      .pricing-item-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
      }

      .pricing-item-text {
        font-size: 13px;
        line-height: 1.4;
      }

      .testimonials {
        gap: 14px;
      }

      .testimonial {
        padding: 18px;
        border-radius: 12px;
        border-left-width: 3px;
      }

      .testimonial-quote {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 12px;
      }

      .testimonial-author {
        gap: 10px;
      }

      .testimonial-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
        flex-shrink: 0;
      }

      .testimonial-name {
        font-size: 13px;
      }

      .testimonial-business {
        font-size: 12px;
      }

      /* CONTACT MOBILE */
      .contact {
        padding: 50px 4%;
      }

      .contact h2 {
        font-size: 26px;
        margin: 0 0 12px;
      }

      .contact-text {
        font-size: 14px;
        line-height: 1.5;
        margin: 0 0 28px;
      }

      .contact-buttons {
        flex-direction: column;
        gap: 10px;
      }

      .btn-primary, .btn-secondary {
        width: 100%;
        padding: 13px 16px;
        font-size: 14px;
        border-radius: 12px;
      }

      /* FOOTER MOBILE */
      footer {
        flex-direction: column;
        gap: 12px;
        padding: 20px 4%;
        text-align: center;
        border-top: 1px solid #e8e8e8;
      }

      .footer-logo {
        justify-content: center;
        gap: 8px;
      }

      .footer-logo-icon {
        width: 24px;
        height: 24px;
      }

      .footer-logo-text {
        font-size: 14px;
      }

      .footer-copyright {
        font-size: 12px;
      }
    }

    @media (max-width: 480px) {
      html {
        font-size: 14px;
      }

      header {
        padding: 12px 3%;
        gap: 8px;
      }

      .logo {
        gap: 6px;
      }

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

      .logo-text {
        font-size: 15px;
      }

      .btn-demo,
      .btn-portal {
        font-size: 12px;
        padding: 8px 14px;
        border-radius: 8px;
      }

      /* HERO 480 */
      .hero {
        padding: 32px 3% 40px;
      }

      .hero-bg-1, .hero-bg-2 {
        display: none;
      }

      .hero-content {
        gap: 20px;
      }

      .hero-text h1 {
        font-size: 24px;
        line-height: 1.2;
        margin: 0 0 10px;
      }

      .hero-badge {
        font-size: 11px;
        padding: 5px 10px;
        margin-bottom: 10px;
      }

      .hero-text p {
        font-size: 13px;
        line-height: 1.45;
        margin: 0 0 14px;
      }

      .hero-buttons {
        gap: 8px;
      }

      .btn-primary, .btn-secondary {
        font-size: 13px;
        padding: 12px 12px;
        border-radius: 10px;
      }

      .cards-carousel {
        padding: 0 -3%;
        margin: 0 -3%;
      }

      .carousel-container {
        padding: 0 3%;
      }

      .card {
        width: 260px;
        min-width: 260px;
        padding: 12px;
      }

      /* PAIN POINTS 480 */
      .pain-points {
        padding: 40px 3%;
      }

      .pain-points-bg-1, .pain-points-bg-2 {
        display: none;
      }

      .pain-points h2 {
        font-size: 22px;
      }

      .pain-points-subtitle {
        font-size: 13px;
        margin: 0 auto 24px;
      }

      .comparison-card {
        padding: 18px 14px;
        border-width: 1.5px;
      }

      .comparison-title {
        font-size: 13px;
        margin-bottom: 14px;
      }

      .comparison-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
      }

      .comparison-items {
        gap: 12px;
      }

      .comparison-item-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
      }

      .comparison-item-text {
        font-size: 13px;
      }

      .vs-badge {
        width: 48px;
        height: 48px;
        font-size: 11px;
      }

      /* FEATURES 480 */
      .features {
        padding: 40px 3%;
      }

      .features h2 {
        font-size: 22px;
      }

      .features-subtitle {
        font-size: 13px;
        margin: 0 auto 24px;
      }

      .features-grid {
        gap: 12px;
      }

      .feature-card {
        padding: 18px;
        border-width: 1px;
      }

      .feature-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        margin-bottom: 10px;
      }

      .feature-title {
        font-size: 14px;
        margin-bottom: 6px;
      }

      .feature-text {
        font-size: 13px;
        line-height: 1.4;
      }

      /* PRICING 480 */
      .pricing {
        padding: 40px 3%;
      }

      .pricing h2 {
        font-size: 22px;
      }

      .pricing-subtitle {
        font-size: 13px;
      }

      .pricing-badge {
        font-size: 11px;
        padding: 5px 12px;
        margin-bottom: 24px;
      }

      .pricing-box {
        padding: 10px;
        border-radius: 16px;
      }

      .pricing-tabs {
        gap: 4px;
        padding: 5px;
      }

      .pricing-tab {
        padding: 10px 8px;
        font-size: 12px;
        border-radius: 8px;
      }

      .pricing-details {
        padding: 20px 14px;
      }

      .pricing-price {
        font-size: 36px;
      }

      .pricing-unit {
        font-size: 12px;
      }

      .pricing-cta {
        font-size: 13px;
        padding: 12px 16px;
        margin-bottom: 20px;
      }

      .pricing-items {
        gap: 10px;
        padding-top: 16px;
      }

      .pricing-item-text {
        font-size: 12px;
      }

      .testimonials {
        gap: 12px;
      }

      .testimonial {
        padding: 14px;
      }

      .testimonial-quote {
        font-size: 12px;
        margin-bottom: 10px;
      }

      .testimonial-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }

      .testimonial-name {
        font-size: 12px;
      }

      .testimonial-business {
        font-size: 11px;
      }

      /* CONTACT 480 */
      .contact {
        padding: 40px 3%;
      }

      .contact-bg-1, .contact-bg-2 {
        display: none;
      }

      .contact h2 {
        font-size: 22px;
      }

      .contact-text {
        font-size: 13px;
        margin: 0 0 20px;
      }

      .btn-primary, .btn-secondary {
        font-size: 13px;
        padding: 12px 14px;
      }

      /* FOOTER 480 */
      footer {
        padding: 16px 3%;
        gap: 10px;
      }

      .footer-logo-icon {
        width: 22px;
        height: 22px;
      }

      .footer-logo-icon div {
        width: 8px;
        height: 8px;
      }

      .footer-logo-text {
        font-size: 13px;
      }

      .footer-copyright {
        font-size: 11px;
      }
    }