/* ===================================
   SERVICE PAGE STYLES
   All styles specific to service pages
   =================================== */

/* ===================================
   MAIN SERVICE PAGE COMPONENT STYLES
   =================================== */
      /* Service Page Styles */
      .service-page {
        background: #0a0a0f;
        color: #ffffff;
        font-family: 'Exo', sans-serif;
      }

      /* Hero Section - Split Layout */
      .service-hero {
        position: relative;
        min-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 140px 48px 80px;
        overflow: hidden;
        background: linear-gradient(
          135deg,
          #0a0a14 0%,
          #1a1a28 50%,
          #0f0f1a 100%
        );
      }

      .service-hero-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 64px;
        max-width: 1400px;
        width: 100%;
      }

      .service-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(
            circle at 30% 40%,
            rgba(0, 255, 255, 0.08) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 70% 60%,
            rgba(255, 0, 255, 0.06) 0%,
            transparent 50%
          );
        z-index: 0;
      }

      .service-hero-content {
        position: relative;
        z-index: 1;
        max-width: 600px;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease-out 0.2s forwards;
        will-change: transform, opacity;
      }

      .service-hero h1 {
        font-family: 'Bebas Neue', sans-serif;
                line-height: 1.1;
        letter-spacing: 2px;
        margin: 0 0 24px 0;
        color: #ffffff;
        /* Absolutely NO word breaking */
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
      }

      .service-hero h1 .gradient-text {
        background: linear-gradient(135deg, #00ffff, #ff00ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        /* Ensure span doesn't break either */
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        display: inline;
      }

      .service-hero p {
                line-height: 1.6;
        color: #b0b0c0;
        margin: 0 0 32px 0;
      }

      .hero-cta-group {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
      }

      .hero-visual {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 500px;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease-out 0.4s forwards;
      }

      /* Load animations */
      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Parallax scrolling */
      .service-hero-container.scrolled .service-hero-content,
      .service-hero-container.scrolled .hero-visual {
        transition: transform 0.1s linear, opacity 0.3s ease-out;
      }

      .hero-screenshot-stack {
        position: relative;
        width: 100%;
        max-width: 600px;
      }

      .screenshot-card {
        background: rgba(20, 20, 30, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      }

      .screenshot-card.main {
        position: relative;
        z-index: 3;
        min-height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        animation: cardFadeIn 0.6s ease-out 0.6s forwards;
      }

      .screenshot-card.floating-1 {
        position: absolute;
        top: -40px;
        right: -60px;
        z-index: 4;
        width: 280px;
        padding: 16px;
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        animation: cardFadeIn 0.6s ease-out 0.9s forwards;
      }

      .screenshot-card.floating-2 {
        position: absolute;
        bottom: -28px; /* Moved down 2rem (32px) from original 4px */
        left: -120px;
        z-index: 4;
        width: 220px;
        padding: 16px;
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        animation: cardFadeIn 0.6s ease-out 1.2s forwards;
      }

      .screenshot-card.floating-3 {
        position: absolute;
        bottom: -78px;
        right: -112px;
        z-index: 4;
        width: 240px;
        padding: 16px;
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        animation: cardFadeIn 0.6s ease-out 1.5s forwards;
      }

      @keyframes cardFadeIn {
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.6;
          transform: scale(1.1);
        }
      }

      .metric-display {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }

      .metric-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #00ffff, #ff00ff);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
              }

      .metric-text h4 {
        margin: 0;
                color: #a0a0b8;
        font-weight: 500;
      }

      .metric-text p {
        margin: 0;
                font-weight: 700;
        color: #00ffff;
      }

      .code-snippet {
        background: #0a0a0a;
        border-radius: 8px;
        padding: 16px;
        font-family: 'Courier New', monospace;
                color: #00ff00;
        overflow: hidden;
      }

      /* Screenshot Card Typography - Compact Dashboard UI */
      .screenshot-card span,
      .screenshot-card div:not(.screenshot-card) {
        font-size: 0.875rem; /* 14px - compact UI text */
        line-height: 1.4;
      }

      .screenshot-card h4 {
        font-size: 1rem; /* 16px - card headings */
      }

      /* Proportional scaling starting at 1570px */
      @media (max-width: 1570px) {
        .service-hero-container {
          transform: scale(0.9);
          transform-origin: center;
        }
      }

      @media (max-width: 1400px) {
        .service-hero-container {
          transform: scale(0.8);
          transform-origin: center;
        }
      }

      @media (max-width: 1200px) {
        .service-hero-container {
          transform: scale(0.7);
          transform-origin: center;
        }
      }

      @media (max-width: 1024px) {
        .service-hero {
          min-height: auto;
          padding: 120px 24px 60px;
        }

        .service-hero-container {
          grid-template-columns: 1fr;
          gap: 48px;
          transform: none;
        }

        .service-hero-content {
          max-width: 100%;
          text-align: center;
        }

        .hero-cta-group {
          justify-content: center;
        }

        .hero-visual {
          min-height: auto;
        }

        /* Mobile Grid Layout for Cards */
        .hero-screenshot-stack {
          position: static;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          max-width: 100%;
        }

        /* Make all cards static positioned for mobile */
        .screenshot-card {
          position: static !important;
          width: 100% !important;
          min-height: auto !important;
          padding: 16px !important;
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
        }

        .screenshot-card.main {
          min-height: auto !important;
          grid-column: 1 / -1; /* Main card spans both columns */
          order: 1;
        }

        /* Show all cards on mobile */
        .screenshot-card.floating-1,
        .screenshot-card.floating-2,
        .screenshot-card.floating-3 {
          display: block !important;
        }

        /* Card ordering for mobile: Main, Google Review, Custom Built, Revenue Impact */
        .screenshot-card.floating-1 {
          /* Google Review */
          order: 2;
        }

        .screenshot-card.floating-2 {
          /* Custom Built */
          order: 3;
        }

        .screenshot-card.floating-3 {
          /* Revenue Impact */
          order: 4;
          grid-column: 1 / -1; /* Revenue Impact spans both columns */
        }

        /* Show click indicator on mobile */
        .mobile-click-indicator {
          display: flex !important;
        }
      }

      /* Hide click indicator on desktop (vibrate animation shows it's clickable) */
      @media (min-width: 1025px) {
        .mobile-click-indicator {
          display: none !important;
        }
      }

      /* Disable parallax on mobile */
      @media (max-width: 1024px) {
        .service-hero-container.scrolled .service-hero-content,
        .service-hero-container.scrolled .hero-visual {
          transform: none !important;
          transition: none !important;
        }
      }

      /* Section Base */
      .service-section {
        padding: 64px 24px;
        position: relative;
        overflow: visible;
      }

      .service-container {
        max-width: 1200px;
        margin: 0 auto;
        overflow: visible;
      }

      /* Split Layout */
      .split-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: center;
      }

      @media (min-width: 768px) {
        .split-section {
          grid-template-columns: 1fr 1fr;
        }

        .split-section.reverse {
          direction: rtl;
        }

        .split-section.reverse > * {
          direction: ltr;
        }
      }

      .split-content h2 {
        font-family: 'Bebas Neue', sans-serif;
                line-height: 1.2;
        letter-spacing: 3px;
        color: #00ffff;
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        margin: 0 0 24px 0;
      }

      .split-content p {
                line-height: 1.5;
        color: #a0a0b8;
        margin-bottom: 16px;
      }

      .split-content ul {
        list-style: none;
        padding: 0;
        margin: 24px 0;
      }

      .split-content li {
        padding: 8px 0 8px 32px;
        position: relative;
        color: #ffffff;
      }

      .split-content li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #00ffff;
        font-weight: bold;
      }

      /* Image Placeholder */
      .image-placeholder {
        background: rgba(20, 20, 30, 0.6);
        border: 2px dashed rgba(0, 255, 255, 0.3);
        border-radius: 16px;
        aspect-ratio: 16/9;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 32px;
        backdrop-filter: blur(10px);
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
      }

      .placeholder-content {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      .placeholder-content h3 {
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 2px;
        margin-bottom: 8px;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      .placeholder-content p {
        color: #a0a0b8;
                line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      /* Video Container */
      .video-container {
        position: relative;
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(0, 255, 255, 0.2);
      }

      .video-container video {
        width: 100%;
        height: auto;
        display: block;
      }

      /* Client Websites Grid */
      .client-websites-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        width: 100%;
        margin-bottom: 40px;
      }

      .client-websites-grid.two-col {
        grid-template-columns: repeat(2, 1fr);
      }

      .client-website-item {
        position: relative;
        transition: all 0.3s ease;
      }

      .client-website-item:hover {
        transform: translateY(-4px);
      }

      /* Desktop Screenshot - Laptop Styling */
      .desktop-screenshot {
        width: 100%;
        position: relative;
        transition: all 0.3s ease;
      }

      .desktop-screenshot::before {
        content: '';
        display: block;
        padding-top: 3%;
        background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
        border-radius: 12px 12px 0 0;
        position: relative;
      }

      .desktop-screenshot::after {
        content: '';
        position: absolute;
        top: 1%;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        z-index: 2;
      }

      .desktop-screenshot img {
        width: 100%;
        height: auto;
        display: block;
        border: 12px solid #1a1a1a;
        border-top: 16px solid #1a1a1a;
        border-bottom: 0;
        box-sizing: border-box;
        background: #000;
        box-shadow: inset 0 0 0 1px rgba(0, 255, 255, 0.2);
        transition: transform 0.3s ease;
      }

      .desktop-screenshot .laptop-base {
        height: 12px;
        background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
        border-radius: 0 0 8px 8px;
        position: relative;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      }

      .desktop-screenshot .laptop-base::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
        height: 3px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(0, 255, 255, 0.3),
          transparent
        );
        border-radius: 2px 2px 0 0;
      }

      .client-website-item:hover .desktop-screenshot {
        transform: translateY(-4px);
      }

      .client-website-item:hover .desktop-screenshot .laptop-base {
        box-shadow: 0 12px 36px rgba(0, 255, 255, 0.3);
      }

      /* Mobile Screenshot - Phone Styling */
      .mobile-screenshot {
        width: 100px;
        border-radius: 16px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 6px #1a1a1a,
          0 0 0 8px rgba(0, 255, 255, 0.4);
        transition: all 0.3s ease;
        position: absolute;
        bottom: 60px;
        right: 60px;
        z-index: 10;
      }

      .mobile-screenshot::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 35px;
        height: 2px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 1px;
        z-index: 2;
      }

      .mobile-screenshot:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(0, 255, 255, 0.4), 0 0 0 6px #1a1a1a,
          0 0 0 8px rgba(0, 255, 255, 0.5);
      }

      .mobile-screenshot img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 10px;
        cursor: pointer;
      }

      /* Mobile Screenshot Modal */
      .mobile-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .mobile-modal.show {
        display: flex;
        opacity: 1;
      }

      .mobile-modal-content {
        position: relative;
        max-width: 400px;
        max-height: 90vh;
        background: #000;
        border-radius: 24px;
        padding: 10px;
        box-shadow: 0 0 0 10px #1a1a1a,
          0 0 0 12px rgba(0, 255, 255, 0.5),
          0 20px 80px rgba(0, 255, 255, 0.3);
        transform: scale(0.9);
        transition: transform 0.3s ease;
      }

      .mobile-modal.show .mobile-modal-content {
        transform: scale(1);
      }

      .mobile-modal-content img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
      }

      .mobile-modal-close {
        position: absolute;
        top: -30px;
        right: -20px;
        width: 40px;
        height: 40px;
        border: none;
        background: rgba(0, 255, 255, 0.2);
        color: #00ffff;
                cursor: pointer;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
      }

      .mobile-modal-close:hover {
        background: rgba(0, 255, 255, 0.4);
        transform: rotate(90deg);
      }

      @media (max-width: 768px) {
        .mobile-modal-content {
          max-width: 280px;
          max-height: 70vh;
        }

        .mobile-modal-close {
          top: -20px;
          right: -20px;
          width: 36px;
          height: 36px;
                  }
      }

      @media (max-width: 1200px) {
        .client-websites-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .client-websites-grid.two-col {
          grid-template-columns: repeat(2, 1fr);
        }

        .mobile-screenshot {
          width: 90px;
          bottom: 50px;
          right: 50px;
        }
      }

      @media (max-width: 768px) {
        .client-websites-grid,
        .client-websites-grid.two-col {
          grid-template-columns: 1fr;
          gap: 32px;
        }

        .mobile-screenshot {
          width: 80px;
          bottom: 40px;
          right: 40px;
        }
      }

      /* Solution Text Content */
      .solution-text-content {
        max-width: 900px;
        margin: 64px auto;
        padding: 0 24px;
      }

      .solution-text-content p {
                line-height: 1.8;
        color: #ffffff;
        margin-bottom: 20px;
      }

      .solution-text-content ul {
        list-style: none;
        padding: 0;
        margin: 24px 0;
      }

      .solution-text-content li {
                line-height: 1.7;
        color: #ffffff;
        margin-bottom: 16px;
        padding-left: 32px;
        position: relative;
      }

      .solution-text-content li::before {
        content: '→';
        position: absolute;
        left: 0;
        color: #00ffff;
        font-weight: bold;
              }

      @media (max-width: 768px) {
        .solution-text-content {
          margin: 48px auto;
        }

        .solution-text-content p {
                  }

        .solution-text-content li {
                  }
      }

      /* Stats Bar */
      .stats-bar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
        padding: 48px 24px;
        background: rgba(20, 20, 30, 0.4);
        border-top: 1px solid rgba(0, 255, 255, 0.2);
        border-bottom: 1px solid rgba(0, 255, 255, 0.2);
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
      }

      .stat-item {
        text-align: center;
        min-width: 0; /* Allow items to shrink if needed */
      }

      .stat-number {
        font-family: 'Bebas Neue', sans-serif;
                color: #00ffff;
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
        line-height: 1;
        margin-bottom: 8px;
      }

      .stat-label {
                color: #a0a0b8;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
      }

      /* Client Story Card */
      .client-story {
        background: rgba(20, 20, 30, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 16px;
        padding: 48px;
        margin: 64px 0;
      }

      .story-header {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 32px;
        flex-wrap: wrap;
      }

      .client-photo-placeholder {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #ff6b35;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
                font-weight: 700;
        font-family: 'Bebas Neue', sans-serif;
        text-align: center;
        padding: 0;
      }

      .client-info h3 {
        margin: 0 0 4px 0;
      }

      .client-info p {
        color: #a0a0b8;
        margin: 0;
              }

      .story-quote {
                line-height: 1.6;
        color: #ffffff;
        font-style: italic;
        margin: 24px 0;
        padding-left: 24px;
        border-left: 3px solid #00ffff;
      }

      .story-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 24px;
        margin-top: 32px;
      }

      .metric {
        text-align: center;
        padding: 16px;
        background: rgba(0, 255, 255, 0.05);
        border-radius: 8px;
      }

      .metric-value {
                font-weight: bold;
        color: #00ffff;
        line-height: 1;
      }

      .metric-label {
                color: #a0a0b8;
        margin-top: 4px;
      }

      /* Process Timeline */
      .process-timeline {
        position: relative;
        padding: 64px 0;
      }

      .timeline-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 64px;
        position: relative;
      }

      /* Force consistent order on mobile: content first, then image */
      .timeline-item .timeline-content {
        order: 1;
      }

      .timeline-item img {
        order: 2;
      }

      @media (min-width: 768px) {
        .timeline-item {
          grid-template-columns: 1fr 1fr;
        }

        /* Reset order on desktop to allow zigzag layout */
        .timeline-item .timeline-content,
        .timeline-item img {
          order: 0;
        }
      }

      .timeline-content .timeline-number {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 64px !important; /* Large and prominent */
        color: #00ffff;
        line-height: 1;
        margin-bottom: 16px;
        display: block;
      }

      /* Extra specificity to override any conflicts */
      .process-timeline .timeline-item .timeline-content .timeline-number {
        font-size: 64px !important;
        display: block;
      }

      .timeline-content h3 {
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 2px;
        margin: 0 0 16px 0;
      }

      /* Benefit Cards Grid */
      .benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
        margin: 48px 0;
      }

      .benefit-card {
        background: rgba(20, 20, 30, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 16px;
        padding: 32px;
        transition: all 200ms ease-out;
      }

      .benefit-card:hover {
        transform: translateY(-4px);
        border-color: #00ffff;
        box-shadow: 0 8px 32px rgba(0, 255, 255, 0.2);
      }

      .benefit-icon {
                margin-bottom: 16px;
      }

      .benefit-card h3 {
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 1px;
        margin: 0 0 12px 0;
      }

      .benefit-card p {
        color: #a0a0b8;
                line-height: 1.5;
        margin: 0;
      }

      /* Comparison Table */
      .comparison-section {
        background: rgba(20, 20, 30, 0.4);
        padding: 64px 24px;
        margin: 64px 0;
      }

      .comparison-table {
        max-width: 900px;
        margin: 0 auto;
        background: rgba(20, 20, 30, 0.6);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 16px;
        overflow: hidden;
      }

      .comparison-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        background: rgba(0, 255, 255, 0.1);
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 1px;
      }

      .comparison-header div {
        padding: 16px;
        text-align: center;
        border-right: 1px solid rgba(0, 255, 255, 0.2);
        font-size: 1.125rem; /* 18px - table headers */
      }

      .comparison-header div:last-child {
        border-right: none;
        color: #00ffff;
      }

      .comparison-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        border-bottom: 1px solid rgba(0, 255, 255, 0.1);
      }

      .comparison-row:last-child {
        border-bottom: none;
      }

      .comparison-row div {
        padding: 16px;
        text-align: center;
        border-right: 1px solid rgba(0, 255, 255, 0.1);
        font-size: 0.9375rem; /* 15px - compact table text */
      }

      .comparison-row div:last-child {
        border-right: none;
        background: rgba(0, 255, 255, 0.05);
      }

      /* Video Comparison Container */
      .video-comparison-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
      }

      .video-comparison-header {
        text-align: center;
        margin-bottom: 40px;
      }

      .video-comparison-header h3 {
        font-family: 'Exo', sans-serif;
                color: #ffffff;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin: 0 0 12px 0;
        line-height: 1.3;
      }

      .video-comparison-header p {
                color: #ffffff;
        margin: 0;
        letter-spacing: 0.5px;
        font-weight: 400;
      }

      .video-comparison-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        margin-top: 32px;
      }

      .comparison-video {
        position: relative;
        background: rgba(20, 20, 30, 0.6);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .comparison-video:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 255, 255, 0.3);
      }

      .video-label {
        padding: 16px;
        text-align: center;
        font-family: 'Bebas Neue', sans-serif;
                letter-spacing: 1px;
        border-bottom: 1px solid rgba(0, 255, 255, 0.2);
      }

      .video-label.competitor {
        background: rgba(255, 100, 100, 0.1);
        color: #ff6666;
      }

      .video-label.our-client {
        background: rgba(0, 255, 255, 0.1);
        color: #00ffff;
      }

      .video-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 790 / 654;
        background: #000;
        overflow: hidden;
      }

      .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .score-display {
        padding: 16px;
        text-align: center;
        font-family: 'Bebas Neue', sans-serif;
                letter-spacing: 1px;
        border-top: 1px solid rgba(0, 255, 255, 0.2);
      }

      .score-display.bad {
        background: rgba(255, 100, 100, 0.1);
        color: #ff6666;
      }

      .score-display.good {
        background: rgba(0, 255, 255, 0.1);
        color: #00ffff;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
      }

      .score-display .score {
                font-weight: 700;
      }

      .comparison-note {
        margin-top: 48px;
        text-align: center;
        padding: 24px 32px;
        background: linear-gradient(
          135deg,
          rgba(0, 255, 255, 0.08),
          rgba(255, 0, 255, 0.08)
        );
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 12px;
      }

      .comparison-note p {
        margin: 0;
                line-height: 1.6;
        color: #e0e0e0;
      }

      .comparison-note strong {
        color: #00ffff;
        font-weight: 600;
      }

      @media (max-width: 768px) {
        .video-comparison-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .video-label {
                    padding: 12px;
        }

        .score-display {
          padding: 12px;
                  }

        .score-display .score {
                  }

        .comparison-note {
          margin-top: 32px;
          padding: 20px 24px;
        }

        .comparison-note p {
                  }
      }

      /* Industry Examples Section */
      .industry-examples {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 32px;
        margin-top: 48px;
      }

      .industry-card {
        background: rgba(20, 20, 30, 0.6);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 16px;
        padding: 32px;
        transition: transform 0.3s ease, box-shadow 0.3s ease,
          border-color 0.3s ease;
      }

      .industry-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 255, 255, 0.2);
        border-color: rgba(0, 255, 255, 0.4);
      }

      .industry-icon {
                margin-bottom: 16px;
        text-align: center;
        color: #00ffff;
      }

      .industry-icon i {
        display: block;
      }

      .industry-card h3 {
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 1.5px;
        margin: 0 0 16px 0;
        text-align: center;
      }

      .industry-card p {
        color: #d1d5db;
        line-height: 1.7;
        margin: 0 0 16px 0;
              }

      .industry-card p:last-child {
        margin-bottom: 0;
      }

      .industry-example {
        background: rgba(0, 255, 255, 0.05);
        border-left: 3px solid rgba(0, 255, 255, 0.3);
        padding: 16px;
        border-radius: 8px;
                color: #b8bcc4;
      }

      .industry-example em {
        color: #00ffff;
        font-style: normal;
        font-weight: 600;
      }

      @media (max-width: 768px) {
        .industry-examples {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .industry-card {
          padding: 24px;
        }

        .industry-icon {
                  }

        .industry-icon i {
          display: block;
        }
      }

      /* CTA Section */
      .cta-section {
        text-align: center;
        padding: 80px 24px;
        background: linear-gradient(
          135deg,
          rgba(0, 255, 255, 0.05),
          rgba(255, 0, 255, 0.05)
        );
        margin: 64px 0;
        border-radius: 24px;
      }

      .cta-section h2 {
        font-family: 'Bebas Neue', sans-serif;
                color: #00ffff;
        letter-spacing: 3px;
        margin: 0 0 16px 0;
      }

      .cta-section p {
                color: #a0a0b8;
        max-width: 600px;
        margin: 0 auto 32px;
        line-height: 1.6;
      }

      /* Dark Section Variation */
      .dark-section {
        background: rgba(10, 10, 15, 0.8);
        overflow: visible !important;
      }

      /* Mobile Responsive */
      @media (max-width: 768px) {
        .service-section {
          padding: 48px 16px;
        }

        .client-story {
          padding: 32px 24px;
        }

        .comparison-header div {
          font-size: 0.875rem; /* 14px on mobile */
        }

        .comparison-header div,
        .comparison-row div {
          padding: 12px 8px;
          font-size: 0.8125rem; /* 13px on mobile - more compact */
        }
      }

      /* Revenue Impact Modal */
      #revenue-impact-modal {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
      }

      #revenue-impact-modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .revenue-modal-inner {
        width: 900px;
        max-width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 2rem;
        background: rgba(20, 20, 30, 0.95);
        backdrop-filter: blur(20px);
        border: 2px solid rgba(0, 255, 255, 0.3);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 255, 255, 0.2),
          0 0 60px rgba(0, 255, 255, 0.1);
        position: relative;
      }

      #revenue-impact-modal h3,
      #revenue-impact-modal h4 {
        font-family: 'Bebas Neue', sans-serif;
        letter-spacing: 1px;
      }

      .modal-close-x {
        position: sticky;
        top: 3px;
        float: right;
        margin: 3px 3px 0 0;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 255, 255, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #ffffff;
                line-height: 1;
        padding: 0;
        z-index: 10;
        backdrop-filter: blur(10px);
      }

      .modal-close-x:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: #00ffff;
        transform: rotate(90deg);
      }

      /* Modal font size adjustments - smaller for mobile modal content */
      #revenue-impact-modal h3 {
        /* 18px-24px */
      }

      #revenue-impact-modal h4 {
        /* 15px-18px */
      }

      #revenue-impact-modal p,
      #revenue-impact-modal li,
      #revenue-impact-modal div:not(.revenue-modal-inner) {
        /* 14px-16px */
        line-height: 1.5 !important;
      }

      /* Keep the main revenue number prominent but slightly smaller */
      #revenue-impact-modal [style*='font-size: 2.5rem'] {
        font-size: clamp(
          1.75rem,
          4vw,
          2.25rem
        ) !important; /* 28px-36px instead of 40px */
      }

      /* Reduce padding on mobile */
      @media (max-width: 768px) {
        .revenue-modal-inner {
          padding: 1.25rem !important;
          padding-top: 3rem !important; /* Extra top padding to avoid fixed phone number */
        }
      }

/* ===================================
   INDUSTRY TIMELINE SECTION
   =================================== */
          .industry-zigzag-section {
            position: relative;
            overflow: hidden;
          }

          .industry-zigzag-timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 0;
          }

          /* Vertical connecting line */
          .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(
              to bottom,
              transparent,
              rgba(0, 255, 255, 0.3) 10%,
              rgba(0, 255, 255, 0.3) 90%,
              transparent
            );
            transform: translateX(-50%);
            z-index: 0;
          }

          /* Timeline item wrapper */
          .industry-timeline-item {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 32px;
            gap: 40px;
          }

          /* Left-aligned items */
          .industry-timeline-item.left {
            justify-content: flex-end;
          }

          .industry-timeline-item.left .industry-timeline-content {
            text-align: right;
          }

          /* Right-aligned items */
          .industry-timeline-item.right {
            justify-content: flex-start;
          }

          .industry-timeline-item.right .industry-timeline-content {
            text-align: left;
          }

          /* Timeline dot connector */
          .timeline-dot {
            position: relative;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #00ffff, #0099ff);
            border-radius: 50%;
            border: 4px solid #0a0a0a;
            box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.2),
              0 0 20px rgba(0, 255, 255, 0.4);
            z-index: 2;
            flex-shrink: 0;
            transition: all 0.4s ease;
          }

          .industry-timeline-item:hover .timeline-dot {
            transform: scale(1.3);
            box-shadow: 0 0 0 6px rgba(0, 255, 255, 0.3),
              0 0 30px rgba(0, 255, 255, 0.6);
          }

          /* Timeline content card */
          .industry-timeline-content {
            background: linear-gradient(
              135deg,
              rgba(20, 20, 30, 0.95),
              rgba(10, 10, 20, 0.95)
            );
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 16px;
            padding: 32px;
            width: calc(50% - 60px);
            position: relative;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
          }

          .industry-timeline-content:hover {
            border-color: rgba(0, 255, 255, 0.5);
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 255, 255, 0.15);
          }

          /* Large decorative icons */
          .large-decorative-icon {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: linear-gradient(
              135deg,
              rgba(0, 255, 255, 0.15),
              rgba(0, 153, 255, 0.15)
            );
            border: 3px solid rgba(0, 255, 255, 0.3);
            border-radius: 50%;
                        color: #00ffff;
            transition: all 0.4s ease;
            z-index: 0;
          }

          .large-decorative-icon.left-icon {
            left: 12%;
            top: 50%;
            transform: translateY(-50%);
          }

          .large-decorative-icon.right-icon {
            right: 12%;
            top: 50%;
            transform: translateY(-50%);
          }

          .large-decorative-icon i {
            filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
          }

          .industry-timeline-item:hover .large-decorative-icon {
            background: linear-gradient(
              135deg,
              rgba(0, 255, 255, 0.25),
              rgba(0, 153, 255, 0.25)
            );
            border-color: rgba(0, 255, 255, 0.6);
            transform: translateY(-50%) rotate(10deg) scale(1.1);
          }

          .industry-timeline-content h3 {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1.5px;
            margin-bottom: 16px;
            margin-top: 0;
          }

          .industry-timeline-content p {
            color: #d1d5db;
            line-height: 1.7;
            margin-bottom: 12px;
                      }

          .industry-timeline-content p.industry-example {
            color: #9ca3af;
                        margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(0, 255, 255, 0.1);
          }

          .industry-timeline-content p strong {
            color: #00d9ff;
          }

          .industry-timeline-content p em {
            color: #00ffff;
            font-style: normal;
            font-weight: 600;
          }

          /* Responsive adjustments */
          @media (max-width: 968px) {
            .timeline-line {
              left: 40px;
            }

            .industry-timeline-item {
              flex-direction: row;
              justify-content: flex-start !important;
            }

            .industry-timeline-item.left,
            .industry-timeline-item.right {
              padding-left: 80px;
            }

            .industry-timeline-item.left .industry-timeline-content,
            .industry-timeline-item.right .industry-timeline-content {
              text-align: left;
              width: 100%;
            }

            .timeline-dot {
              position: absolute;
              left: 28px;
            }

            .large-decorative-icon {
              display: none;
            }
          }

          @media (max-width: 640px) {
            .timeline-line {
              left: 24px;
            }

            .industry-timeline-item.left,
            .industry-timeline-item.right {
              padding-left: 60px;
            }

            .timeline-dot {
              left: 12px;
              width: 20px;
              height: 20px;
            }

            .industry-timeline-content {
              padding: 24px;
            }
          }

/* ===================================
   MODERN DESIGN PRINCIPLES SECTION
   =================================== */
          .modern-design-principles-section {
            position: relative;
            background: #0a0a14;
          }

          .principles-header {
            text-align: center;
            padding: 80px 24px 40px;
            max-width: 800px;
            margin: 0 auto;
          }

          .principles-header h2 {
            font-family: 'Bebas Neue', sans-serif;
                        color: #00ffff;
            letter-spacing: 4px;
            margin-bottom: 24px;
            line-height: 1.1;
          }

          .principles-header p {
                        color: #d1d5db;
            line-height: 1.7;
          }

          .principles-scroll-container {
            position: relative;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
          }

          .principle-block {
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px 24px;
            position: relative;
            transition: all 0.6s ease;
          }

          .principle-label {
            display: block;
            font-family: 'Bebas Neue', sans-serif;
                        color: rgba(0, 255, 255, 0.6);
            letter-spacing: 3px;
            margin-bottom: 16px;
          }

          /* Principle 1: Clean, Breathing Space - TONS of whitespace */
          .principle-spacing {
            min-height: 60vh;
            background: #1a1a28;
          }

          .principle-spacing-inner {
            max-width: 500px;
            text-align: center;
            padding: 120px 40px;
          }

          .principle-spacing h3 {
            font-family: 'Bebas Neue', sans-serif;
            color: #ffffff;
            letter-spacing: 2px;
            margin-bottom: 40px;
            line-height: 1.2;
          }

          .principle-spacing p {
            color: #d1d5db;
            line-height: 2;
          }

          /* Principle 2: Smart Color Pairing - Color palette showcase */
          .principle-colors {
            background: #ffffff;
          }

          .principle-colors-inner {
            max-width: 700px;
            text-align: center;
          }

          .principle-colors h3 {
            font-family: 'Bebas Neue', sans-serif;
            color: #0a0a14;
            letter-spacing: 2px;
            margin-bottom: 40px;
          }

          .color-blocks {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin: 40px 0;
            flex-wrap: wrap;
          }

          .color-block {
            width: 120px;
            height: 120px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
          }

          .principle-colors.active .color-block {
            animation: colorPop 0.6s ease forwards;
          }

          .principle-colors.active .color-block:nth-child(1) { animation-delay: 0.1s; }
          .principle-colors.active .color-block:nth-child(2) { animation-delay: 0.2s; }
          .principle-colors.active .color-block:nth-child(3) { animation-delay: 0.3s; }
          .principle-colors.active .color-block:nth-child(4) { animation-delay: 0.4s; }

          @keyframes colorPop {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
          }

          .principle-colors p {
            color: #6b7280;
            line-height: 1.7;
          }

          /* Dark label for white background */
          .principle-colors .principle-label {
            color: rgba(0, 0, 0, 0.4);
          }

          /* Principle 3: Soft, Modern Edges - Everything rounded */
          .principle-edges {
            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a28 100%);
          }

          .principle-edges-inner {
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid rgba(0, 255, 255, 0.3);
            border-radius: 60px;
            padding: 80px 60px;
            max-width: 700px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 255, 255, 0.2);
          }

          .principle-edges h3 {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 2px;
            margin-bottom: 30px;
            border-radius: 30px;
            display: inline-block;
            padding: 10px 30px;
            background: rgba(0, 255, 255, 0.1);
          }

          .principle-edges p {
                        color: #d1d5db;
            line-height: 1.8;
            border-radius: 25px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
          }

          /* Principle 4: Readable Typography - Type hierarchy */
          .principle-typography {
            background: #0a0a14;
          }

          .principle-typography-inner {
            max-width: 800px;
            text-align: center;
          }

          .type-stack {
            display: flex;
            flex-direction: column;
            gap: 16px;
          }

          .type-xl {
            font-family: 'Bebas Neue', sans-serif;
                        color: #00ffff;
            line-height: 0.9;
            margin: 0;
          }

          .type-lg {
            font-family: 'Bebas Neue', sans-serif;
                        color: #ffffff;
            line-height: 1;
            margin: 0;
          }

          .type-md {
                        color: #d1d5db;
            font-weight: 600;
            margin: 0;
          }

          .type-sm {
                        color: #9ca3af;
            line-height: 1.7;
            margin: 0;
            max-width: 600px;
          }

          /* Principle 5: Subtle Motion - Floating animated elements */
          .principle-motion {
            background: #0f0f1a;
            position: relative;
            overflow: hidden;
          }

          .principle-motion-inner {
            max-width: 700px;
            text-align: center;
            position: relative;
            z-index: 2;
          }

          .floating-element {
            position: absolute;
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 153, 255, 0.2));
            border-radius: 50%;
            animation: floatAround 8s ease-in-out infinite;
            z-index: 1;
          }

          .floating-element:nth-child(2) {
            animation-duration: 10s;
            animation-delay: 2s;
          }

          .floating-element:nth-child(3) {
            animation-duration: 12s;
            animation-delay: 4s;
          }

          @keyframes floatAround {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(20px, -20px); }
            50% { transform: translate(-15px, -40px); }
            75% { transform: translate(-30px, 20px); }
          }

          .principle-motion h3 {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 2px;
            margin-bottom: 30px;
          }

          .principle-motion p {
                        color: #d1d5db;
            line-height: 1.7;
          }

          /* Principle 6: Clear Visual Hierarchy - Obvious flow */
          .principle-hierarchy {
            background: #1a1a28;
          }

          .principle-hierarchy-inner {
            max-width: 1000px;
            text-align: center;
          }

          .principle-hierarchy h3 {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 2px;
            margin-bottom: 60px;
          }

          .hierarchy-steps {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
          }

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

          .step-number {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #00ffff, #0099ff);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Bebas Neue', sans-serif;
                        color: #0a0a14;
            margin: 0 auto 16px;
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.4);
          }

          .step-item p {
                        color: #d1d5db;
            margin: 0;
          }

          .step-arrow {
                        color: rgba(0, 255, 255, 0.5);
          }

          .principle-hierarchy.active .step-item {
            animation: stepSlideIn 0.6s ease forwards;
          }

          .principle-hierarchy.active .step-item:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
          .principle-hierarchy.active .step-item:nth-child(3) { animation-delay: 0.4s; opacity: 0; }
          .principle-hierarchy.active .step-item:nth-child(5) { animation-delay: 0.6s; opacity: 0; }

          @keyframes stepSlideIn {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
          }

          /* Principle 7: All Together - Combines all principles */
          .principle-all-together {
            grid-column: 1 / -1;
            background: linear-gradient(135deg, #0a0a14 0%, #1a1a28 50%, #0f0f1a 100%);
            min-height: 80vh;
            position: relative;
            overflow: hidden;
          }

          .principle-all-together-inner {
            max-width: 900px;
            text-align: center;
            position: relative;
            z-index: 2;
            padding: 60px;
          }

          .all-together-label {
                        color: #00ffff;
            opacity: 1;
          }

          .floating-orb {
            position: absolute;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(0, 255, 255, 0.3), rgba(0, 153, 255, 0.1));
            border-radius: 50%;
            animation: orbFloat 10s ease-in-out infinite;
            z-index: 1;
            filter: blur(40px);
          }

          .floating-orb:nth-child(2) {
            animation-delay: 3s;
            animation-duration: 12s;
          }

          @keyframes orbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -40px) scale(1.1); }
            66% { transform: translate(-20px, 30px) scale(0.9); }
          }

          .example-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(0, 255, 255, 0.2);
            border-radius: 32px;
            padding: 60px;
            margin-top: 40px;
            position: relative;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
            transition: all 0.4s ease;
          }

          .principle-all-together.active .example-card {
            animation: cardFloat 3s ease-in-out infinite;
          }

          @keyframes cardFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
          }

          .example-badge {
            position: absolute;
            top: -12px;
            right: 40px;
            background: linear-gradient(135deg, #00ffff, #0099ff);
            color: #0a0a14;
            font-family: 'Bebas Neue', sans-serif;
                        letter-spacing: 2px;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: bold;
          }

          .example-title {
            font-family: 'Bebas Neue', sans-serif;
                        background: linear-gradient(135deg, #00ffff, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 2px;
            margin: 0 0 30px 0;
            line-height: 1.1;
          }

          .example-text {
                        color: #d1d5db;
            line-height: 1.8;
            margin: 0 0 40px 0;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
          }

          .example-text em {
            color: #00ffff;
            font-style: italic;
          }

          .example-actions {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
          }

          .example-btn-primary,
          .example-btn-secondary {
            font-family: 'Bebas Neue', sans-serif;
                        letter-spacing: 2px;
            padding: 16px 40px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
          }

          .example-btn-primary {
            background: linear-gradient(135deg, #00ffff, #0099ff);
            color: #0a0a14;
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
          }

          .example-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0, 255, 255, 0.5);
          }

          .example-btn-secondary {
            background: transparent;
            color: #00ffff;
            border: 2px solid #00ffff;
          }

          .example-btn-secondary:hover {
            background: rgba(0, 255, 255, 0.1);
            transform: translateY(-3px);
          }

          /* Mobile Responsive */
          @media (max-width: 768px) {
            .principles-scroll-container {
              grid-template-columns: 1fr;
            }

            .principle-block {
              min-height: 50vh;
              padding: 40px 20px;
            }

            .principles-header {
              padding: 40px 20px 20px;
            }

            .principles-header h2 {
                          }

            .principles-header p {
                          }

            .principle-label {
                          }

            .principle-block h3 {
                          }

            .principle-block p {
                          }

            .principle-spacing-inner {
              padding: 50px 24px;
            }

            .principle-edges-inner {
              border-radius: 32px;
              padding: 40px 28px;
            }

            .color-block {
              width: 60px;
              height: 60px;
            }

            .hierarchy-steps {
              flex-direction: column;
              gap: 16px;
            }

            .step-arrow {
              transform: rotate(90deg);
            }

            .step-number {
              width: 50px;
              height: 50px;
                          }

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

            .type-xl {
                          }

            .type-lg {
                          }

            .type-md {
                          }

            .type-sm {
              max-width: 100%;
                          }

            .principle-all-together-inner {
              padding: 32px 20px;
            }

            .example-card {
              padding: 32px 20px;
              border-radius: 20px;
            }

            .example-title {
                          }

            .example-text {
                          }

            .example-badge {
              right: 16px;
              top: 16px;
                            padding: 4px 12px;
            }

            .example-actions {
              flex-direction: column;
              gap: 12px;
            }

            .example-btn-primary,
            .example-btn-secondary {
              width: 100%;
              padding: 12px 24px;
                          }

            .floating-orb {
              width: 60px;
              height: 60px;
            }
          }

/* ===================================
   ADDITIONAL SECTION STYLES
   =================================== */
                  @media (min-width: 1024px) {
                    .performance-stat-grid {
                      grid-template-columns: repeat(4, 1fr) !important;
                    }
                  }

              .revenue-gauge .gauge-progress {
                transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
              }

              .performance-charts-container.animated .gauge-fast .gauge-progress {
                stroke-dashoffset: 0;
              }

              .performance-charts-container.animated .gauge-slow .gauge-progress {
                stroke-dashoffset: 150.72; /* 60% of 251.2 */
              }

              .revenue-line {
                transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
              }

              .revenue-area {
                transition: opacity 1s ease 1s;
              }

              .data-point,
              .value-label {
                transition: opacity 0.5s ease;
              }

              .performance-charts-container.animated .revenue-line {
                stroke-dashoffset: 0;
              }

              .performance-charts-container.animated .revenue-area {
                opacity: 1;
              }

              .performance-charts-container.animated .data-point {
                opacity: 1;
              }

              .performance-charts-container.animated .value-label {
                opacity: 1;
              }

              .performance-charts-container.animated .data-point:nth-child(9) { transition-delay: 0.5s; }
              .performance-charts-container.animated .data-point:nth-child(10) { transition-delay: 0.8s; }
              .performance-charts-container.animated .data-point:nth-child(11) { transition-delay: 1.1s; }
              .performance-charts-container.animated .data-point:nth-child(12) { transition-delay: 1.4s; }
              .performance-charts-container.animated .data-point:nth-child(13) { transition-delay: 1.7s; }

              .performance-charts-container.animated .value-label:nth-child(14) { transition-delay: 0.5s; }
              .performance-charts-container.animated .value-label:nth-child(15) { transition-delay: 0.8s; }
              .performance-charts-container.animated .value-label:nth-child(16) { transition-delay: 1.1s; }
              .performance-charts-container.animated .value-label:nth-child(17) { transition-delay: 1.4s; }
              .performance-charts-container.animated .value-label:nth-child(18) { transition-delay: 1.7s; }

              @media (max-width: 768px) {
                .revenue-line-graph {
                  height: 250px;
                }
              }

/* Pricing Cards - More Compact */
#pricing-section .benefit-card {
  padding: 24px;
}

#pricing-section .benefit-card h3 {
  margin-bottom: 4px;
}

#pricing-section .benefit-card > div:first-of-type {
  margin-bottom: 16px;
}

#pricing-section .benefit-card ul {
  margin: 16px 0 !important;
}

#pricing-section .benefit-card li {
  padding: 4px 0 !important;
  font-size: 0.875rem;
}

#pricing-section .benefit-card li i {
  margin-right: 8px !important;
  margin-top: 2px !important;
}

/* Pricing amount section */
#pricing-section .benefit-card > div:nth-of-type(2) {
  margin: 16px 0 !important;
  padding: 16px 0 !important;
}

/* How It Works box in Enterprise */
#pricing-section .benefit-card > div[style*="rgba(0, 255, 136, 0.08)"] {
  padding: 12px !important;
  margin: 16px 0 !important;
  font-size: 0.875rem;
  line-height: 1.5 !important;
}

#pricing-section .benefit-card button {
  padding: 12px 20px !important;
}

/* Icon Sizing - Different sections need different sizes */

/* "Why Our Sites Outperform Template Builders" section icons */
.benefit-icon i {
  font-size: 2.5rem; /* 40px - moderate increase */
}

/* "Every Industry Needs Something Different" section - Large decorative circle icons */
.large-decorative-icon i {
  font-size: 5rem; /* 80px - much larger for prominent display */
}

/* ===================================
   SEO & DIGITAL MARKETING PAGE STYLES
   All styles specific to seo-digital-marketing.html
   =================================== */

/* CRITICAL: Prevent ALL overflow on SEO page */
[class*="seo-page-"],
[class*="seo-page-"] * {
  box-sizing: border-box;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Prevent horizontal scroll on SEO sections */
section[class*="seo-page-"],
.seo-page-section {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure all text elements break properly */
.seo-page-text-large,
.seo-page-text-medium,
.seo-page-text-base,
.seo-page-text-small,
.seo-page-section-subtitle,
.seo-page-text-emphasis-large,
.seo-page-text-emphasis-medium,
.seo-page-card-title,
.seo-page-strong-cyan,
.seo-page-strong-magenta,
.seo-page-strong-green,
.seo-page-strong-orange,
p, span, strong, em {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Headings - NEVER break words mid-word */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: normal !important; /* Do NOT break words */
  word-wrap: normal !important;
  word-break: normal !important; /* Explicitly prevent breaking */
  hyphens: none !important; /* No hyphens ever */
  max-width: 100%;
}

/* Ensure containers respect viewport */
.seo-page-container,
.seo-page-split-section,
.seo-page-split-content,
.seo-page-problem-grid,
.seo-page-services-grid,
.seo-page-content-grid,
.seo-page-dashboard-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Service Page Styles - Matching website-design-development.html */
.service-page {
  background: #0a0a0f;
  color: #ffffff;
  font-family: 'Exo', sans-serif;
}

/* Hero Section - Split Layout */
.service-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 48px 80px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a14 0%, #1a1a28 50%, #0f0f1a 100%);
}

.service-hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  max-width: 1400px;
  width: 100%;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 0, 255, 0.06) 0%, transparent 50%);
  z-index: 0;
}

.service-hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
  will-change: transform, opacity;
}

.service-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 2px;
  margin: 0 0 24px 0;
  color: #ffffff;
  /* Absolutely NO word breaking */
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.service-hero h1 .gradient-text {
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Ensure span doesn't break either */
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  display: inline; /* Keep inline to allow natural wrapping */
}

.service-hero p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: #b0b0c0;
  margin: 0 0 32px 0;
}

.hero-cta-group {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
}

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

.hero-screenshot-stack {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.screenshot-card {
  background: rgba(20, 20, 30, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.screenshot-card.main {
  position: relative;
  z-index: 3;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: cardFadeIn 0.6s ease-out 0.6s forwards;
}

.screenshot-card.floating-1 {
  position: absolute;
  top: -40px;
  right: -60px;
  z-index: 4;
  width: 280px;
  padding: 16px;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: cardFadeIn 0.6s ease-out 0.9s forwards;
}

.screenshot-card.floating-2 {
  position: absolute;
  bottom: 4px;
  left: -120px;
  z-index: 4;
  width: 220px;
  padding: 16px;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: cardFadeIn 0.6s ease-out 1.2s forwards;
}

.screenshot-card.floating-3 {
  position: absolute;
  bottom: -78px;
  right: -112px;
  z-index: 4;
  width: 240px;
  padding: 16px;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: cardFadeIn 0.6s ease-out 1.5s forwards;
}

@keyframes cardFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive scaling */
@media (max-width: 1570px) {
  .service-hero-container {
    transform: scale(0.9);
    transform-origin: center;
  }
}

@media (max-width: 1400px) {
  .service-hero-container {
    transform: scale(0.8);
    transform-origin: center;
  }
}

@media (max-width: 1200px) {
  .service-hero-container {
    transform: scale(0.7);
    transform-origin: center;
  }
}

@media (max-width: 1024px) {
  .service-hero {
    min-height: auto;
    padding: 120px 24px 60px;
  }

  .service-hero-container {
    grid-template-columns: 1fr;
    gap: 48px;
    transform: none;
  }

  .service-hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-visual {
    min-height: auto;
  }

  .hero-screenshot-stack {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 100%;
  }

  .screenshot-card {
    position: static !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .screenshot-card.main {
    min-height: auto !important;
    grid-column: 1 / -1;
    order: 1;
  }

  .screenshot-card.floating-1,
  .screenshot-card.floating-2,
  .screenshot-card.floating-3 {
    display: block !important;
  }

  .screenshot-card.floating-1 {
    order: 2;
  }

  .screenshot-card.floating-2 {
    order: 3;
  }

  .screenshot-card.floating-3 {
    order: 4;
    grid-column: 1 / -1;
  }

  .mobile-click-indicator {
    display: flex !important;
  }
}

@media (min-width: 1025px) {
  .mobile-click-indicator {
    display: none !important;
  }
}

/* SEO Page-Specific Responsive Grid Utilities */
.seo-page-section {
  padding: 80px 0;
}

.seo-page-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px); /* Responsive padding - 16px mobile, 48px desktop */
  box-sizing: border-box;
}

.seo-page-split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.seo-page-split-section > * {
  min-width: 0; /* Critical: allows grid items to shrink below content size */
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.seo-page-split-content {
  min-width: 0; /* Critical for grid overflow */
  max-width: 100%;
}

.seo-page-split-content h2 {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 1.2;
  letter-spacing: 3px;
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
  margin: 0 0 24px 0;
  /* Wrapping handled by global h2 rule - no word-break */
}

.seo-page-split-content p {
  line-height: 1.5;
  color: #a0a0b8;
  margin-bottom: 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.seo-page-split-content p strong {
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: inline; /* Ensure strong doesn't block wrap */
}

.seo-page-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 48px 0;
}

.seo-page-problem-card {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(139, 92, 246, 0.15));
  border: 2px solid rgba(255, 107, 107, 0.3);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

.seo-page-problem-icon {
  width: 72px;
  height: 72px;
  background: rgba(255, 107, 107, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* SEO Service Cards */
.seo-page-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.seo-page-service-card {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 153, 255, 0.08));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

.seo-page-service-card .decorative-circle {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 50%;
  opacity: 0.1;
}

.seo-page-icon-box {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.seo-page-stat-box {
  background: rgba(0, 255, 255, 0.1);
  border-left: 4px solid #00ffff;
  padding: 16px;
  border-radius: 8px;
}

/* Content/PPC Grid */
.seo-page-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}

.seo-page-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.seo-page-content-card {
  background: rgba(0, 255, 255, 0.05);
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  padding: 28px;
}

.seo-page-content-icon-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.seo-page-small-icon-box {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seo-page-ppc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.seo-page-platform-bar {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.08), rgba(194, 65, 12, 0.08));
  border-left: 4px solid #ea580c;
  padding: 28px;
  border-radius: 12px;
}

.seo-page-platform-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Data Dashboard Grid */
.seo-page-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.seo-page-dashboard-card {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 153, 255, 0.1));
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 16px;
  padding: 32px;
}

.seo-page-dashboard-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.seo-page-dashboard-icon-box {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-width centered sections */
.seo-page-section-header {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.seo-page-emphasis-box {
  max-width: 800px;
  margin: 48px auto 0;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 255, 0.1));
  border: 3px solid rgba(0, 255, 136, 0.3);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
}

/* Collapse split sections earlier to prevent text overflow */
@media (max-width: 1200px) {
  .seo-page-split-section {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .seo-page-split-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .seo-page-problem-grid,
  .seo-page-services-grid,
  .seo-page-content-grid,
  .seo-page-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .seo-page-service-card,
  .seo-page-problem-card {
    padding: 24px;
  }

  .seo-page-content-wrapper {
    gap: 60px;
  }

  .seo-page-emphasis-box {
    padding: 32px 24px;
  }

  /* Fix text cutoff on mobile - match web design page */
  .seo-page-container {
    padding-left: var(--margin-mobile, 16px) !important;
    padding-right: var(--margin-mobile, 16px) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Stats bar mobile overflow protection */
  .stats-bar {
    padding: 32px 16px !important;
    overflow-x: hidden !important;
  }

  .stat-item {
    min-width: 0 !important; /* Allow flex items to shrink */
  }

  .stat-label {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Override all inline font sizes with responsive ones */
  .seo-page-section p[style*="font-size: 1.125rem"],
  .seo-page-section p[style*="font-size: 1.0625rem"],
  .seo-page-split-content p {
    font-size: var(--font-size-base) !important; /* 17-18px responsive */
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .seo-page-section p[style*="font-size: 1.25rem"] {
    font-size: clamp(1rem, 2vw, 1.125rem) !important; /* Scale down on mobile */
  }

  .seo-page-section p[style*="font-size: 1.5rem"] {
    font-size: clamp(1.125rem, 3vw, 1.375rem) !important; /* Scale down emphasis text */
  }

  .seo-page-section h2,
  h2[style*="clamp(2.5rem"] {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    /* No word-break - handled by global h2 rule */
  }

  .seo-page-section h3[style*="font-size: 1.25rem"] {
    font-size: 1.125rem !important; /* Slightly smaller on mobile */
  }
}

/* ========================================
   TYPOGRAPHY CLASSES - Replacing Inline Styles
   ======================================== */

/* Section Titles */
.seo-page-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 16px;
  letter-spacing: 4px;
}

.seo-page-section-title-cyan {
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.seo-page-section-title-red {
  color: #ff6b6b;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
}

.seo-page-section-title-green {
  color: #00ff88;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.seo-page-section-title-magenta {
  color: #ff00ff;
  text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
}

.seo-page-section-title-medium {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.seo-page-section-title-small {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: 2px;
  margin: 0 0 16px 0;
}

.seo-page-section-title-xsmall {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 2px;
  margin: 0 0 16px 0;
}

/* Section Subtitles */
.seo-page-section-subtitle {
  font-size: 1.125rem;
  color: #a0a0b8;
  max-width: 700px;
  margin: 0 auto;
}

.seo-page-section-subtitle-wide {
  font-size: 1.125rem;
  color: #a0a0b8;
  max-width: 800px;
  margin: 0 auto;
}

/* Text Sizes */
.seo-page-text-large {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.seo-page-text-medium {
  font-size: 1.0625rem;
  color: #a0a0b8;
  max-width: 700px;
  margin: 0 auto;
}

.seo-page-text-base {
  color: #b0b0c0;
  line-height: 1.6;
  margin: 0;
}

.seo-page-text-small {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.seo-page-text-emphasis-large {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ff6b6b;
  margin-bottom: 48px;
}

.seo-page-text-emphasis-medium {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: 16px;
  color: #e0e0e0;
}

.seo-page-text-emphasis-final {
  font-size: 1.25rem;
  line-height: 1.7;
  color: #e0e0e0;
  margin: 0;
}

.seo-page-text-contact {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #e0e0e0;
  max-width: 700px;
  margin: 0 auto 32px;
}

.seo-page-text-hours {
  font-size: 0.9375rem;
  color: #a0a0b8;
  margin: 24px 0 0 0;
}

/* Card Titles */
.seo-page-card-title {
  color: #ff6b6b;
  margin: 0 0 12px 0;
  font-size: 1.25rem;
}

.seo-page-card-title-cyan {
  color: #00ffff;
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.seo-page-card-title-magenta {
  color: #ff00ff;
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.seo-page-card-title-green {
  color: #00ff88;
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.seo-page-card-title-orange {
  color: #ff8800;
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.seo-page-card-title-indigo {
  color: #6366f1;
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.seo-page-card-title-small {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
}

.seo-page-card-title-medium {
  margin: 0 0 16px 0;
  font-size: 1.375rem;
}

/* Content Card Titles */
.seo-page-content-title-cyan {
  color: #00ffff;
  margin: 0;
  font-size: 1.125rem;
}

.seo-page-content-title-magenta {
  color: #ff00ff;
  margin: 0;
  font-size: 1.125rem;
}

.seo-page-content-title-green {
  color: #00ff88;
  margin: 0;
  font-size: 1.125rem;
}

.seo-page-content-title-orange {
  color: #ff8800;
  margin: 0;
  font-size: 1.125rem;
}

/* Platform Titles */
.seo-page-platform-title-orange {
  color: #ea580c;
  margin: 0;
  font-size: 1.25rem;
}

.seo-page-platform-title-blue {
  color: #3b82f6;
  margin: 0;
  font-size: 1.25rem;
}

.seo-page-platform-title-purple {
  color: #8b5cf6;
  margin: 0;
  font-size: 1.25rem;
}

/* Dashboard Card Titles */
.seo-page-dashboard-title-cyan {
  color: #00ffff;
  margin: 0;
  font-size: 1.25rem;
}

.seo-page-dashboard-title-magenta {
  color: #ff00ff;
  margin: 0;
  font-size: 1.25rem;
}

.seo-page-dashboard-title-green {
  color: #00ff88;
  margin: 0;
  font-size: 1.25rem;
}

.seo-page-dashboard-title-orange {
  color: #ff8800;
  margin: 0;
  font-size: 1.25rem;
}

.seo-page-dashboard-title-indigo {
  color: #6366f1;
  margin: 0;
  font-size: 1.25rem;
}

/* Strong/Emphasis Text Colors */
.seo-page-strong-cyan {
  color: #00ffff;
}

.seo-page-strong-magenta {
  color: #ff00ff;
}

.seo-page-strong-green {
  color: #00ff88;
}

.seo-page-strong-orange {
  color: #ff8800;
}

/* Icon Colors */
.seo-page-icon-black {
  color: #0a0a0a;
  font-size: 2rem;
}

.seo-page-icon-black-medium {
  color: #0a0a0a;
  font-size: 1.75rem;
}

.seo-page-icon-black-small {
  color: #0a0a0a;
  font-size: 1.5rem;
}

.seo-page-icon-black-xsmall {
  color: #0a0a0a;
  font-size: 1.25rem;
}

.seo-page-icon-white {
  color: #ffffff;
  font-size: 2rem;
}

.seo-page-icon-white-small {
  color: #ffffff;
  font-size: 1.5rem;
}

.seo-page-icon-red {
  color: #ff6b6b;
  font-size: 2rem;
}

.seo-page-icon-orange {
  color: #ff8800;
  font-size: 2rem;
}

.seo-page-icon-orange-alt {
  color: #ea580c;
  font-size: 2rem;
}

.seo-page-icon-magenta {
  color: #ec4899;
  font-size: 2rem;
}

.seo-page-icon-purple {
  color: #8b5cf6;
  font-size: 2rem;
}

.seo-page-icon-dark-red {
  color: #dc2626;
  font-size: 2rem;
}

.seo-page-icon-blue {
  color: #3b82f6;
  font-size: 2rem;
}

.seo-page-icon-purple-alt {
  color: #8b5cf6;
  font-size: 1.75rem;
}

/* Layout Utilities */
.seo-page-text-center {
  text-align: center;
}

.seo-page-center-section {
  text-align: center;
  margin-bottom: 64px;
}

.seo-page-center-section-48 {
  text-align: center;
  margin-bottom: 48px;
}

.seo-page-margin-bottom-24 {
  margin-bottom: 24px;
}

.seo-page-margin-bottom-48 {
  margin-bottom: 48px;
}

/* Hero Screenshot Card Styles */
.seo-hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
}

.seo-hero-card-title {
  margin: 0;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}

.seo-hero-card-badge {
  font-size: 0.7rem;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.seo-hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.seo-hero-stat-card-green {
  background: rgba(0, 255, 136, 0.08);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 136, 0.15);
}

.seo-hero-stat-card-cyan {
  background: rgba(0, 255, 255, 0.08);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.15);
}

.seo-hero-stat-label {
  font-size: 0.65rem;
  color: #a0a0b8;
  margin-bottom: 3px;
}

.seo-hero-stat-value-green {
  font-size: 1.25rem;
  font-weight: 700;
  color: #00ff88;
  line-height: 1.2;
}

.seo-hero-stat-value-cyan {
  font-size: 1.25rem;
  font-weight: 700;
  color: #00ffff;
  line-height: 1.2;
}

.seo-hero-stat-change-red {
  font-size: 0.7rem;
  color: #ff6b6b;
  margin-top: 2px;
}

.seo-hero-stat-change-green {
  font-size: 0.7rem;
  color: #00ff88;
  margin-top: 2px;
}

.seo-hero-metrics-container {
  background: rgba(10, 10, 15, 0.6);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.1);
  margin-bottom: 12px;
}

.seo-hero-metrics-title {
  font-size: 0.7rem;
  color: #a0a0b8;
  margin-bottom: 10px;
  font-weight: 600;
}

.seo-hero-metric-item {
  margin-bottom: 8px;
}

.seo-hero-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.seo-hero-metric-label {
  font-size: 0.65rem;
  color: #b0b0b8;
}

.seo-hero-metric-value-green {
  font-size: 0.7rem;
  color: #00ff88;
  font-weight: 700;
}

.seo-hero-metric-value-cyan {
  font-size: 0.7rem;
  color: #00ffff;
  font-weight: 700;
}

.seo-hero-metric-value-magenta {
  font-size: 0.7rem;
  color: #ff00ff;
  font-weight: 700;
}

.seo-hero-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.seo-hero-progress-fill-green-cyan {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00ffff);
}

.seo-hero-progress-fill-cyan-magenta {
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
}

.seo-hero-progress-fill-magenta-cyan {
  width: 85%;
  height: 100%;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
}

.seo-hero-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.seo-hero-mini-stat-magenta {
  background: rgba(255, 0, 255, 0.06);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 0, 255, 0.12);
  text-align: center;
}

.seo-hero-mini-stat-orange {
  background: rgba(255, 136, 0, 0.06);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 136, 0, 0.12);
  text-align: center;
}

.seo-hero-mini-stat-label {
  font-size: 0.6rem;
  color: #a0a0b8;
  margin-bottom: 2px;
}

.seo-hero-mini-stat-value-magenta {
  font-size: 1rem;
  font-weight: 700;
  color: #ff00ff;
}

.seo-hero-mini-stat-value-orange {
  font-size: 1rem;
  font-weight: 700;
  color: #ff8800;
}

.seo-hero-trophy-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.seo-hero-trophy-icon-box {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #00ffff, #ff00ff);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-hero-trophy-icon {
  color: #0a0a0a;
  font-size: 1rem;
}

.seo-hero-trophy-title {
  margin: 0;
  color: #00ffff;
  font-size: 0.875rem;
  font-weight: 600;
}

.seo-hero-trophy-text {
  font-size: 0.7rem;
  color: #e0e0e0;
  line-height: 1.4;
  margin-bottom: 8px;
}

.seo-hero-chart-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 6px;
}

.seo-hero-chart-icon {
  color: #00ff88;
  font-size: 0.75rem;
}

/* CTA Box Styles */
.seo-page-cta-box {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(255, 0, 255, 0.08));
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
}

.seo-page-cta-flex {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.seo-page-emphasis-box-bottom {
  max-width: 900px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(255, 0, 255, 0.08));
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
}

/* Image Placeholder - Remove inline min-height */
.image-placeholder.seo-page-placeholder-400 {
  min-height: 400px;
}

.image-placeholder.seo-page-placeholder-450 {
  min-height: 450px;
  margin-bottom: 64px;
}

/* ===================================
   GOOGLE BUSINESS PROFILE PAGE STYLES
   All styles specific to google-business-profile.html
   =================================== */

/* Base Section & Container */
.gbp-page-section {
  padding: 80px 0;
}

.gbp-page-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* Centered Section Headers */
.gbp-page-center-section {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

/* Section Titles */
.gbp-page-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: 4px;
  margin-bottom: 16px;
}

.gbp-page-section-title-cyan {
  color: #00ffff;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.gbp-page-section-title-red {
  color: #ff6b6b;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
}

.gbp-page-section-title-green {
  color: #00ff88;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.gbp-page-section-title-magenta {
  color: #ff00ff;
  text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
}

.gbp-page-section-title-orange {
  color: #ff8800;
  text-shadow: 0 0 20px rgba(255, 136, 0, 0.5);
}

.gbp-page-section-subtitle {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: #b0b0c0;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Typography */
.gbp-page-text-large {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #e0e0e0;
  margin-bottom: 24px;
}

.gbp-page-text-base {
  color: #b0b0c0;
  line-height: 1.6;
  margin: 0;
}

.gbp-page-subsection-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 2px;
  color: #ffffff;
  margin-bottom: 24px;
  margin-top: 32px;
}

.gbp-page-emphasis-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 255, 136, 0.1));
  padding: 20px 24px;
  border-left: 4px solid #00ffff;
  border-radius: 8px;
  margin-top: 24px;
}

.gbp-page-emphasis-large {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 1.5;
}

.gbp-page-stat-callout {
  font-size: 1.0625rem;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
  padding: 16px 20px;
  border-radius: 8px;
  margin-top: 16px;
}

/* Strong Text Color Variants */
.gbp-page-strong-cyan {
  color: #00ffff;
  font-weight: 700;
}

.gbp-page-strong-green {
  color: #00ff88;
  font-weight: 700;
}

.gbp-page-strong-magenta {
  color: #ff00ff;
  font-weight: 700;
}

.gbp-page-strong-orange {
  color: #ff8800;
  font-weight: 700;
}

/* Icon Colors */
.gbp-page-icon-red {
  color: #ff6b6b;
  font-size: 1.25rem;
}

.gbp-page-icon-cyan {
  color: #00ffff;
}

.gbp-page-icon-green {
  color: #00ff88;
}

/* Split Section Layout */
.gbp-page-split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.gbp-page-split-section > * {
  min-width: 0;
  max-width: 100%;
}

.gbp-page-split-content {
  min-width: 0;
  max-width: 100%;
}

/* Two Column Layout */
.gbp-page-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.gbp-page-two-column > * {
  min-width: 0;
}

/* Problem List */
.gbp-page-problem-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}

.gbp-page-problem-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gbp-page-problem-item i {
  margin-top: 4px;
  flex-shrink: 0;
}

.gbp-page-problem-item p {
  margin: 0;
  color: #e0e0e0;
  line-height: 1.6;
}

/* Check List */
.gbp-page-check-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}

.gbp-page-check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.gbp-page-check-item i {
  color: #00ff88;
  font-size: 1.125rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.gbp-page-check-item p {
  margin: 0;
  color: #e0e0e0;
  line-height: 1.6;
}

/* Features Grid */
.gbp-page-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 48px 0;
}

.gbp-page-feature-card {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 153, 255, 0.08));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
  transition: all 0.3s ease;
}

.gbp-page-feature-card:hover {
  border-color: rgba(0, 255, 255, 0.4);
  transform: translateY(-4px);
}

.gbp-page-feature-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #0a0a14;
  margin-bottom: 20px;
}

/* Card Title Color Variants */
.gbp-page-card-title-cyan {
  color: #00ffff;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.gbp-page-card-title-magenta {
  color: #ff00ff;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.gbp-page-card-title-green {
  color: #00ff88;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.gbp-page-card-title-orange {
  color: #ff8800;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

/* Bottom Callout */
.gbp-page-bottom-callout {
  max-width: 800px;
  margin: 32px auto 0;
  text-align: center;
}

.gbp-page-callout-text {
  font-size: 1.125rem;
  color: #e0e0e0;
  line-height: 1.7;
  margin: 0;
}

/* Tactics Grid */
.gbp-page-tactics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 48px 0;
}

.gbp-page-tactic-card {
  background: linear-gradient(135deg, rgba(10, 10, 20, 0.6), rgba(20, 20, 35, 0.6));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.3s ease;
}

.gbp-page-tactic-card:hover {
  border-color: rgba(0, 255, 255, 0.4);
  transform: translateX(8px);
}

.gbp-page-tactic-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  color: rgba(0, 255, 255, 0.3);
  line-height: 1;
  margin-bottom: 16px;
}

.gbp-page-bottom-emphasis {
  max-width: 900px;
  margin: 48px auto 0;
  padding: 32px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 255, 0.1));
  border: 3px solid rgba(0, 255, 136, 0.3);
  border-radius: 16px;
  text-align: center;
}

/* Post Types List */
.gbp-page-post-types {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0;
}

.gbp-page-post-type-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(0, 255, 255, 0.05);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.15);
}

.gbp-page-post-icon-box {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, #ff8800, #ff6600);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #0a0a14;
}

.gbp-page-post-type-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.gbp-page-post-type-item p {
  color: #b0b0c0;
  margin: 0;
  line-height: 1.5;
}

/* Package Grid */
.gbp-page-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin: 48px 0;
}

.gbp-page-package-item {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(0, 153, 255, 0.08));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
}

.gbp-page-package-item:hover {
  border-color: rgba(0, 255, 255, 0.4);
  transform: scale(1.05);
}

.gbp-page-package-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #00ffff, #0099ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #0a0a14;
}

.gbp-page-package-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #00ffff;
  margin: 0 0 12px 0;
}

/* Final CTA */
.gbp-page-final-cta {
  max-width: 800px;
  margin: 48px auto 0;
  text-align: center;
}

.gbp-page-cta-text {
  font-size: 1.125rem;
  color: #e0e0e0;
  line-height: 1.7;
  margin-bottom: 20px;
}

.gbp-page-cta-emphasis {
  font-size: 1.25rem;
  font-weight: 700;
  color: #00ffff;
  margin-bottom: 32px;
}

.gbp-page-final-cta .btn-primary {
  font-size: 1.125rem;
  padding: 16px 48px;
}

/* Placeholder Sizing */
.gbp-page-placeholder-350 {
  min-height: 350px;
}

.gbp-page-placeholder-400 {
  min-height: 400px;
}

.gbp-page-placeholder-450 {
  min-height: 450px;
}

/* Mobile Responsive */
@media (max-width: 1200px) {
  .gbp-page-split-section,
  .gbp-page-two-column {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .gbp-page-section {
    padding: 60px 0;
  }

  .gbp-page-container {
    padding-left: var(--margin-mobile, 16px) !important;
    padding-right: var(--margin-mobile, 16px) !important;
  }

  .gbp-page-center-section {
    margin-bottom: 32px;
  }

  .gbp-page-split-section,
  .gbp-page-two-column {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .gbp-page-features-grid,
  .gbp-page-tactics-grid,
  .gbp-page-package-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .gbp-page-feature-card,
  .gbp-page-tactic-card,
  .gbp-page-package-item {
    padding: 24px;
  }

  .gbp-page-text-large {
    font-size: var(--font-size-base);
  }

  .gbp-page-bottom-emphasis {
    padding: 24px 20px;
  }
}

/* ===================================
   SEO PAGE VISUALIZATIONS
   Traffic Growth Chart & Marketing Funnel
   =================================== */

/* Traffic Growth Chart */
.seo-traffic-chart {
  background: linear-gradient(135deg, rgba(10, 10, 20, 0.6), rgba(20, 20, 35, 0.6));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px;
  min-height: 400px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.chart-title {
  font-size: 1.5rem;
  color: #00ffff;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-legend {
  display: flex;
  gap: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #b0b0c0;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.pre-seo {
  background: #ff6b6b;
}

.legend-dot.post-seo {
  background: linear-gradient(135deg, #00ff88, #00ffff);
}

.chart-container {
  position: relative;
}

.traffic-chart-svg {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}

.line-before {
  animation: drawLine 2s ease-out forwards;
  animation-delay: 0.5s;
}

.line-after {
  animation: drawLine 2s ease-out forwards;
  animation-delay: 2.5s;
}

.seo-start-dot {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 2s;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.chart-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.stat-box {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.stat-box.highlight {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
}

.stat-label {
  font-size: 0.875rem;
  color: #8b8b9a;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-value.stat-green {
  color: #00ff88;
}

.stat-sublabel {
  font-size: 0.8125rem;
  color: #b0b0c0;
}

.stat-arrow {
  color: #00ffff;
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .seo-traffic-chart {
    padding: 24px 16px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-title {
    font-size: 1.25rem;
  }

  .chart-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stat-arrow {
    transform: rotate(90deg);
  }

  .stat-value {
    font-size: 1.5rem;
  }
}

/* Marketing Funnel */
.seo-marketing-funnel {
  background: linear-gradient(135deg, rgba(10, 10, 20, 0.6), rgba(20, 20, 35, 0.6));
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 48px;
}

.funnel-header {
  text-align: center;
  margin-bottom: 40px;
}

.funnel-title {
  font-size: 1.75rem;
  color: #00ffff;
  font-weight: 700;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.funnel-subtitle {
  font-size: 1rem;
  color: #b0b0c0;
  margin: 0;
}

.funnel-container {
  max-width: 700px;
  margin: 0 auto;
}

.funnel-stage {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.6s ease-out forwards;
}

.funnel-stage.awareness {
  animation-delay: 0.2s;
}

.funnel-stage.consideration {
  animation-delay: 0.6s;
}

.funnel-stage.conversion {
  animation-delay: 1s;
}

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

.funnel-shape {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 153, 255, 0.1));
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  padding: 28px;
  position: relative;
  clip-path: polygon(
    10% 0%, 
    90% 0%, 
    85% 100%, 
    15% 100%
  );
}

.funnel-stage.awareness .funnel-shape {
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 153, 255, 0.15));
}

.funnel-stage.consideration .funnel-shape {
  clip-path: polygon(10% 0%, 90% 0%, 80% 100%, 20% 100%);
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.12), rgba(255, 0, 153, 0.12));
  border-color: rgba(255, 0, 255, 0.3);
}

.funnel-stage.conversion .funnel-shape {
  clip-path: polygon(20% 0%, 80% 0%, 70% 100%, 30% 100%);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 204, 170, 0.15));
  border-color: rgba(0, 255, 136, 0.3);
}

.funnel-content {
  text-align: center;
  padding: 8px 0;
}

.stage-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.stage-label i {
  font-size: 1.25rem;
}

.stage-metric {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00ffff;
  margin-bottom: 16px;
}

.funnel-stage.consideration .stage-metric {
  color: #ff00ff;
}

.funnel-stage.conversion .stage-metric {
  color: #00ff88;
}

.stage-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid currentColor;
}

.channel-tag.cyan {
  color: #00ffff;
  border-color: rgba(0, 255, 255, 0.3);
}

.channel-tag.magenta {
  color: #ff00ff;
  border-color: rgba(255, 0, 255, 0.3);
}

.channel-tag.orange {
  color: #ff8800;
  border-color: rgba(255, 136, 0, 0.3);
}

.channel-tag.green {
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.3);
}

.channel-tag.indigo {
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.3);
}

.funnel-arrow {
  text-align: center;
  padding: 12px 0;
  color: #00ffff;
  font-size: 1.5rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.funnel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.funnel-stat-item {
  text-align: center;
  padding: 16px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 12px;
}

.funnel-stat-item.highlight {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
}

.stat-percentage {
  font-size: 2rem;
  font-weight: 700;
  color: #00ffff;
  line-height: 1;
  margin-bottom: 8px;
}

.funnel-stat-item.highlight .stat-percentage {
  color: #00ff88;
}

.stat-text {
  font-size: 0.75rem;
  color: #8b8b9a;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .seo-marketing-funnel {
    padding: 24px 16px;
  }

  .funnel-title {
    font-size: 1.25rem;
  }

  .funnel-shape {
    padding: 20px 16px;
  }

  .stage-label {
    font-size: 1rem;
  }

  .stage-metric {
    font-size: 1.5rem;
  }

  .channel-tag {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  .funnel-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-percentage {
    font-size: 1.5rem;
  }
}