/* Modal Styles */
    .sc-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .sc-modal.active {
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
    }
    
    .sc-modal-content {
      background: #1a1a2e;
      border-radius: 10px;
      max-width: 90%;
      max-height: 90vh;
      overflow: auto;
      position: relative;
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }
    
    .sc-modal.active .sc-modal-content {
      transform: scale(1);
    }
    
    .sc-modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 30px;
      color: #fff;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 10;
    }
    
    .sc-modal-close:hover {
      color: var(--sc-accent-primary);
    }
    
    .sc-technology-showcase-content {
      width: 900px;
      max-width: 95vw;
    }
    
    .sc-modal-header {
      padding: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .sc-modal-header h3 {
      margin: 0;
      color: #fff;
      font-size: 1.5rem;
    }
    
    .sc-modal-body {
      padding: 20px;
    }
    
    /* Enhanced clean corporate styling */
    :root {
      --sc-hero-spacing: 6rem;
      --sc-section-spacing: 5rem;
    }
    
    /* Clean hero section */
    .sc-hero-clean {
      padding: var(--sc-hero-spacing) 0;
      background: linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 40%, #0f0f23 80%, #050510 100%);
      position: relative;
      overflow: hidden;
      min-height: 80vh;
      display: flex;
      align-items: center;
    }
    
    /* Enterprise-grade animated background layers */
    .sc-hero-clean::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(ellipse at 20% 30%, rgba(136, 120, 249, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(121, 247, 171, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 115, 0, 0.08) 0%, transparent 50%);
      animation: heroGradientShift 20s ease-in-out infinite;
      z-index: 1;
      pointer-events: none; /* Ensure background doesn't block clicks */
    }
    
    @keyframes heroGradientShift {
      0%, 100% { 
        opacity: 0.4;
        transform: scale(1) rotate(0deg);
      }
      25% {
        opacity: 0.3;
        transform: scale(1.1) rotate(90deg);
      }
      50% { 
        opacity: 0.5;
        transform: scale(0.95) rotate(180deg);
      }
      75% {
        opacity: 0.35;
        transform: scale(1.05) rotate(270deg);
      }
    }
    
    /* Static data grid overlay with dots pattern */
    .sc-hero-clean::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(rgba(136, 120, 249, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(136, 120, 249, 0.03) 1px, transparent 1px),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(136,120,249,0.3)" opacity="0.5"/><circle cx="10" cy="10" r="0.5" fill="rgba(121,247,171,0.4)" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
      background-size: 60px 60px, 60px 60px, 200px 200px;
      /* animation: dataGridFlow 30s linear infinite; -- DISABLED for cleaner look */
      opacity: 0.4;
      z-index: 2; pointer-events: none;
    }
    
    @keyframes dataGridFlow {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }
      100% {
        transform: translate(60px, 60px) rotate(0.5deg);
      }
    }
    
    .sc-hero-inner-clean {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      position: relative;
      z-index: 3;
    }
    
    .sc-hero-content-clean {
      text-align: left;
      position: relative;
    }
    
    /* Premium text effects */
    .sc-hero-title-clean {
      background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 50%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      animation: titleShimmer 8s ease-in-out infinite;
    }
    
    @keyframes titleShimmer {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }
    
    .sc-hero-title-clean::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      background: none;
      -webkit-text-fill-color: rgba(136, 120, 249, 0.1);
      filter: blur(8px);
      transform: translateY(2px);
    }
    
    .sc-hero-visual-clean {
      position: relative;
    }
    
    /* Floating particles for depth - DISABLED by default */
    /* To enable: add class 'particles-enabled' to .sc-hero-clean */
    .sc-particle {
      position: absolute;
      width: 2px;
      height: 2px;
      background: rgba(136, 120, 249, 0.6);
      border-radius: 50%;
      pointer-events: none;
      animation: particleFloat 20s infinite linear;
      will-change: transform, opacity;
      transform: translateZ(0); /* GPU acceleration */
      display: none; /* Hidden by default */
    }
    
    .particles-enabled .sc-particle {
      display: block; /* Show when enabled */
    }
    
    .sc-particle:nth-child(1) { left: 10%; top: 20%; animation-duration: 25s; animation-delay: 0s; }
    .sc-particle:nth-child(2) { left: 20%; top: 80%; animation-duration: 30s; animation-delay: 5s; background: rgba(121, 247, 171, 0.6); }
    .sc-particle:nth-child(3) { left: 80%; top: 10%; animation-duration: 28s; animation-delay: 2s; }
    .sc-particle:nth-child(4) { left: 90%; top: 50%; animation-duration: 22s; animation-delay: 8s; background: rgba(255, 115, 0, 0.4); }
    .sc-particle:nth-child(5) { left: 50%; top: 30%; animation-duration: 35s; animation-delay: 3s; }
    
    @keyframes particleFloat {
      0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateY(-100vh) translateX(100px) scale(0.5);
        opacity: 0;
      }
    }
    
    .sc-hero-image-container {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    
    /* Dynamic 3D Hero Visualization */
    .sc-hero-3d-container {
      width: 100%;
      height: 500px;
      min-height: 400px;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      position: relative;
      background: 
        radial-gradient(ellipse at top left, rgba(136, 120, 249, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(121, 247, 171, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0d0d15 0%, #1a1a2e 50%, #0a0a12 100%);
      border: 1px solid rgba(136, 120, 249, 0.2);
      border-bottom: none;
      box-shadow: 
        inset 0 2px 20px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(136, 120, 249, 0.1);
    }
    
    #infrastructure-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    
    .sc-hero-fallback-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 30% 20%, rgba(136, 120, 249, 0.2) 0%, transparent 35%),
        radial-gradient(circle at 70% 80%, rgba(121, 247, 171, 0.15) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(255, 115, 0, 0.1) 0%, transparent 40%),
        linear-gradient(135deg, #0d0d15 0%, #1a1a2e 25%, #16213e 50%, #0f0f23 75%, #0a0a12 100%);
      z-index: 0;
    }
    
    .sc-hero-fallback-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><pattern id="hexgrid" width="40" height="40" patternUnits="userSpaceOnUse"><polygon points="20,2 35,10 35,30 20,38 5,30 5,10" fill="none" stroke="rgba(136,120,249,0.1)" stroke-width="0.5"/></pattern></defs><rect width="40" height="40" fill="url(%23hexgrid)"/></svg>'),
        linear-gradient(45deg, transparent 48%, rgba(136, 120, 249, 0.02) 49%, rgba(136, 120, 249, 0.02) 51%, transparent 52%);
      background-size: 80px 80px, 30px 30px;
      animation: complexGridMove 40s linear infinite;
      opacity: 0.6;
    }
    
    .sc-hero-fallback-bg::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
      pointer-events: none;
      z-index: 1;
    }
    
    @keyframes complexGridMove {
      0% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
      25% {
        transform: translate(-20px, 20px) rotate(45deg) scale(1.05);
      }
      50% {
        transform: translate(-40px, 0) rotate(90deg) scale(1);
      }
      75% {
        transform: translate(-20px, -20px) rotate(135deg) scale(0.95);
      }
      100% { 
        transform: translate(0, 0) rotate(180deg) scale(1);
      }
    }
    
    
    .sc-hero-image-clean {
      width: 100%;
      height: auto;
      display: block;
    }
    
    /* Visual Connector between 3D and Features */
    .sc-visualization-connector {
      height: 2px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(136, 120, 249, 0.3) 20%,
        rgba(136, 120, 249, 0.5) 50%,
        rgba(136, 120, 249, 0.3) 80%,
        transparent 100%);
      position: relative;
      margin: -1px 0;
      z-index: 10;
    }
    
    .sc-visualization-connector::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      bottom: -10px;
      background: linear-gradient(to bottom,
        rgba(136, 120, 249, 0.1) 0%,
        transparent 50%,
        rgba(136, 120, 249, 0.1) 100%);
      filter: blur(10px);
    }
    
    /* Infrastructure Features */
    .sc-infrastructure-features {
      display: flex;
     /* gap: 1rem; */
      padding: 1.5rem;
      background: 
        linear-gradient(to right, rgba(136, 120, 249, 0.05) 0%, transparent 50%, rgba(121, 247, 171, 0.05) 100%),
        linear-gradient(to bottom, rgba(26, 26, 46, 0.8) 0%, rgba(10, 10, 15, 0.9) 100%);
      backdrop-filter: blur(30px) saturate(1.5);
      -webkit-backdrop-filter: blur(30px) saturate(1.5);
      border-radius: 0 0 16px 16px;
      border: 1px solid rgba(136, 120, 249, 0.3);
      border-top: none;
      position: relative;
      box-shadow: 
        0 8px 32px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.3);
      flex-wrap: wrap;
      margin-top: -1px;
    }
    
    /* Removed feature-pulse animation for cleaner enterprise look */
    
    .sc-feature-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 1 1 auto;
      min-width: 280px;
      padding: 0.75rem 1rem;
      background: transparent;
      border-radius: 8px;
      border: none;
      transition: all 0.3s ease;
      cursor: default;
    }
    
    .sc-feature-item:hover {
      background: rgba(136,120,249,0.05);
    }
    
    .sc-feature-item:hover .sc-feature-icon {
      background: linear-gradient(135deg, rgba(136,120,249,0.3) 0%, rgba(121,247,171,0.3) 100%);
    }
    
    .sc-feature-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(136,120,249,0.2) 0%, rgba(121,247,171,0.2) 100%);
      border-radius: 8px;
      flex-shrink: 0;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .sc-feature-text {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      flex: 1;
    }
    
    .sc-feature-text strong {
      font-size: 0.9375rem;
      color: #fff;color: var(--sc-white);
      font-weight: 600;
      line-height: 1.3;
      display: block;
      white-space: nowrap;
    }
    
    .sc-feature-text span {
      font-size: 0.8125rem;
      color: rgba(255,255,255,0.7);color: var(--sc-gray);
      line-height: 1.4;
      display: block;
    }
    
    
    .sc-hero-title-clean {
      font-size: 3.5rem;
      font-weight: 700;  font-weight: 600;
      line-height: 1.1;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, var(--sc-white) 0%, var(--sc-purple) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: var(--sc-spacing-lg);
    }
    
    .sc-hero-subtitle-clean {
      font-size: 1.25rem;
      color: var(--sc-gray);color: var(--sc-gray-30);
      margin-bottom: 3rem;
      line-height: 1.6;
      max-width: 600px;
    }
    
    .sc-hero-cta-clean {
      display: inline-flex;
     /* align-items: center; */
     align-items: flex-start;
      gap: 1rem;
      position: relative;
      z-index: 10; /* Ensure buttons are above other elements */
    }
    
    .sc-button-hero {
      padding: 1rem 2rem;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none;
      border: none;
      cursor: pointer;
      display: inline-block;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 1; /* Ensure clickable */
      -webkit-tap-highlight-color: transparent; /* Remove tap highlight on iOS */
    }
    
    .sc-button-hero.primary {
      background: linear-gradient(135deg, #8878f9 0%, #79f7ab 100%);
      color: white;    color: var(--sc-dark-gray);color: var(--sc-black);
    }
    
    .sc-button-hero.primary:hover {
      background: linear-gradient(135deg, #9988ff 0%, #89ffbb 100%);
      box-shadow: 0 6px 24px rgba(136, 120, 249, 0.3);
    }
    
    .sc-button-hero.primary:active {
      transform: scale(0.98);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .sc-button-hero.secondary {
      background: rgba(255,255,255,0.08);
      /* color: white; */
      border: 2px solid rgba(136,120,249,0.5);
      
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    
    .sc-button-hero.secondary:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(136,120,249,0.8);
      box-shadow: 0 6px 24px rgba(136, 120, 249, 0.2);
    }
    
    .sc-button-hero.secondary:active {
      transform: scale(0.98);
      background: rgba(255,255,255,0.12);
      border-color: rgba(136,120,249,0.8);
    }
    
    /* Hero feature highlight */
    .sc-hero-feature-highlight {
      margin-top: 2rem;
      padding: 2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.98);
      border-radius: 8px;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      border: 1px solid rgba(255,255,255,0.2);

      background: linear-gradient(135deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%);
    border: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 0 0 1px rgba(136, 120, 249, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    }
    
    .sc-hero-highlight-text {
      /* font-size: 1rem; 
      color: var(--sc-dark-gray);
      margin-bottom: 0.75rem;
       font-style: italic; */
      color: #E91E63;    color: var(--sc-dark-gray);
      color: var(--sc-off-white);color: var(--sc-gray);
      color: var(--sc-pink);
    }
    
    .sc-arrow-link {
      color: var(--sc-purple);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      position: relative;
    }
    
    .sc-arrow-link::after {
      content: '→';
      font-size: 1.1rem;
      transition: transform 0.3s ease;
    }
    
    .sc-arrow-link:hover {
      color: var(--sc-dark-gray);
      gap: 0.75rem;color: var(--sc-light-blue);
    }
    
    .sc-arrow-link:hover::after {
      transform: translateX(3px);
    }
    
    /* Enhanced CTA Section */
    .sc-section-cta {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 50%, #8878f9 100%);
      padding: 5rem 0;
      margin: 4rem 0 0;
    }
    
    .sc-section-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
      opacity: 0.5;
    }
    
    .sc-section-cta::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 115, 0, 0.3) 0%, transparent 50%);
      animation: pulse-glow 4s ease-in-out infinite;
    }
    
    @keyframes pulse-glow {
      0%, 100% { opacity: 0.3; transform: scale(0.5); }
      50% { opacity: 0.6; transform: scale(1); }
    }
    
    .sc-cta-content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .sc-cta-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, #ffffff 0%, #79f7ab 50%, #8878f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 2px 10px rgba(136,120,249,0.3));
    }
    
    .sc-cta-description {
      font-size: 1.25rem;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2.5rem;
      line-height: 1.6;
    }
    
    .sc-cta-actions {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .sc-section-cta .sc-button {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    .sc-section-cta .sc-button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    .sc-section-cta .sc-button:hover::before {
      width: 300px;
      height: 300px;
    }
    
    .sc-section-cta .sc-button-primary {
      background: linear-gradient(135deg, #8878f9 0%, #79f7ab 100%);
      border: none;
      color: white; color: var(--sc-black);z-index: 100;
    }
    
    .sc-section-cta .sc-button-primary:hover {
      /* transform: translateY(-2px); */
      box-shadow: 0 6px 20px rgba(136,120,249,0.4);
    }
    
    .sc-section-cta .sc-button-secondary {
      background: rgba(255,255,255,0.1);
      border: 2px solid rgba(255,255,255,0.3);
      color: white;
      backdrop-filter: blur(10px);
    }
    
    .sc-section-cta .sc-button-secondary:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.5);
      /* transform: translateY(-2px); */
      box-shadow: 0 6px 20px rgba(255,255,255,0.2);
    }
    
    /* Trust indicators */
    .sc-trust-section {
      padding: 3rem 0;
      background: var(--sc-dark-blue);
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Brand logos section */
    .sc-brands-section {
      padding: 4rem 0;
      background: var(--sc-black);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .sc-brands-content {
      text-align: center;
    }
    
    .sc-brands-label {
      font-size: 0.875rem;
      color: var(--sc-gray);
      margin-bottom: 2.5rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 500;
    }
    
    .sc-brands-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 2rem 1.5rem;
      align-items: center;
      justify-items: center;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .sc-brands-scroll-container {
      display: contents;
    }
    
    /* Hide duplicate items on desktop - show up to 21 items (original + new brands) */
    .sc-brand-item:nth-child(n+22) {
      display: none;
    }
    
    .sc-brand-item {
      opacity: 0.7;
      transition: all 0.3s ease;
      filter: grayscale(100%);
      cursor: default;
    }
    
    .sc-brand-item:hover {
      opacity: 1;
      filter: grayscale(0%);
      transform: translateY(-2px);
    }
    
    .sc-brand-logo {
      width: 120px;
      height: 40px;
      color: var(--sc-white);
    }
    
    .sc-trust-content {
      text-align: center;
    }
    
    .sc-trust-label {
      font-size: 0.875rem;
      color: var(--sc-gray);
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .sc-trust-items {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3rem;
      flex-wrap: wrap;
    }
    
    .sc-trust-scroll-container {
      display: contents;
    }
    
    /* Hide duplicate items on desktop */
    .sc-trust-item:nth-child(n+5) {
      display: none;
    }
    
    .sc-trust-item {
      color: var(--sc-white);
      font-weight: 600;
      font-size: 1.1rem;
    }
    
    /* Simplified sections */
    .sc-section-clean {
      padding: var(--sc-section-spacing) 0;
    }
    
    .sc-section-header-clean {
      text-align: left;
      /* max-width: 700px; */
      margin: 0 auto 4rem;
    }
    
    .sc-section-title-clean {
      font-size: 2.5rem;
      color: var(--sc-white);  color: var(--sc-xwhite);
      margin-bottom: 1rem;
      font-weight: 700; font-weight: 600;
    }
    
    .sc-section-subtitle-clean {
      font-size: 1.125rem;
      color: var(--sc-gray);
      line-height: 1.6;
    }
    
    /* Clean cards grid */
    .sc-cards-grid-clean {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .sc-card-clean {
      background: var(--sc-dark-blue);
      padding: 2.5rem;
      border: 1px solid var(--sc-dark-gray);
      border-radius: 4px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .sc-card-clean:hover {
      border-color: var(--sc-purple);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Card numbering - subtle and professional */
    .sc-card-clean::after {
      content: attr(data-number);
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-size: 2.5rem;
      font-weight: 700;
      color: rgba(136, 120, 249, 0.15);
      transition: color 0.2s ease;
    }
    
    .sc-card-clean:hover::after {
      color: rgba(136, 120, 249, 0.3);
    }
    
    .sc-card-icon-clean {
      width: 60px;
      height: 60px;
      margin-bottom: 1.5rem;
      transition: filter 0.2s ease;
    }
    
    .sc-card-clean:hover .sc-card-icon-clean {
      filter: brightness(1.3);
    }
    
    .sc-card-title-clean {
      font-size: 1.5rem;
      color: var(--sc-white);color: var(--sc-xwhite);
      margin-bottom: 1rem;
      font-weight: 600;
    }
    
    .sc-card-description-clean {
      color: var(--sc-gray);
      line-height: 1.6;
      margin-bottom: 1.5rem;
      flex-grow: 1;
    }
    
    
    /* Mobile swipe hint - hidden on desktop */
    .sc-mobile-swipe-hint {
      display: none;
    }
    
    /* Responsive adjustments */
    @media (max-width: 1024px) {
      .sc-hero-inner-clean {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
      
      .sc-hero-content-clean {
       /* text-align: center; */
      }
      
      /* Reposition cards for tablet - closer to image */
      .sc-card-1 {
        top: 10%;
        right: 5%;
        animation: floatMobile 4s ease-in-out infinite;
      }
      
      .sc-card-2 {
        bottom: 30%;
        left: 5%;
        animation: floatMobile 4s ease-in-out infinite;
        animation-delay: 2s;
      }
      
      .sc-card-3 {
        top: 50%;
        right: -5%;
        animation: floatMobile 4s ease-in-out infinite;
        animation-delay: 1s;
      }
    }
    
    @media (max-width: 768px) {
      .sc-hero-clean {
        min-height: 100vh;
       /* padding: 2rem 0 3rem; */
        background: 
          linear-gradient(135deg, rgba(136, 120, 249, 0.08) 0%, transparent 40%),
          linear-gradient(45deg, rgba(255, 115, 0, 0.04) 60%, transparent 100%),
          linear-gradient(180deg, #050508 0%, #0f0f1a 35%, #0a0a15 65%, #050510 100%);
        position: relative;
        overflow: hidden;
      }
      
      /* Aurora wave effect - mobile only */
      .sc-hero-aurora {
        display: none; /* Hidden by default */
      }
      
      /* Removed orbs animation for cleaner look */
      
      /* Removed animated dot pattern for better readability */
      
      /* Aurora wave effect - mobile specific */
      .sc-hero-aurora {
        display: block;
        position: absolute;
        top: 0;
        left: -100%;
        width: 300%;
        height: 100%;
        background: linear-gradient(90deg, 
          rgba(136, 120, 249, 0.15) 0%, 
          rgba(80, 60, 180, 0.2) 25%, 
          rgba(60, 40, 120, 0.15) 50%, 
          rgba(80, 60, 180, 0.2) 75%, 
          rgba(136, 120, 249, 0.15) 100%);
        animation: auroraWave 20s linear infinite;
        filter: blur(80px);
        opacity: 0.5;
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 2;
      }
      
      @keyframes auroraWave {
        0% { transform: translateX(-33.33%) skewX(-15deg); }
        100% { transform: translateX(0%) skewX(-15deg); }
      }
      
      .sc-hero-inner-clean {
        position: relative;
       /* z-index: 2; */
      }
      
      .sc-hero-content-clean {
       /* text-align: center; */
        padding: 0 1rem;
        margin-bottom: 3rem;
        position: relative;
        z-index: 10; /* Ensure content is above background elements */
      }
      
      .sc-hero-title-clean {
        font-size: 2.75rem;
        line-height: 1.15;
        font-weight: 700;font-weight: 600;
        margin-bottom: 1.5rem;
        margin-bottom: var(--sc-spacing-lg);
        color: #ffffff;
      }
      
      @keyframes titleGlow {
        0%, 100% { 
          filter: drop-shadow(0 2px 10px rgba(136,120,249,0.3));
        }
        50% { 
          filter: drop-shadow(0 2px 15px rgba(136,120,249,0.4));
        }
      }
      
      .sc-hero-subtitle-clean {
        font-size: 1.125rem;
        line-height: 1.6;
        color: rgba(255,255,255,0.85);
        margin-bottom: 2rem;
        /* max-width: 90%; */
        /*  margin-left: auto; */
        margin-right: auto;
      }
      
      .sc-hero-cta-clean {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
        z-index: 20; /* Higher z-index on mobile */
      }
      
      .sc-button-hero {
        width: 100%;
        max-width: 280px;
        padding: 1.125rem 2rem;
        font-size: 1.0625rem;
        font-weight: 600;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        will-change: transform;
        z-index: 10; /* Ensure clickable on mobile */
        pointer-events: auto; /* Force pointer events */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation; /* Improve touch responsiveness */
      }
      
      .sc-button-hero.primary {
       /* background: linear-gradient(135deg, #8878f9 0%, #79f7ab 100%); 
        border: none;
        color: white;*/
      }
      
      .sc-button-hero.primary:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      }
      
      .sc-button-hero.secondary {
       /*
        background: rgba(255,255,255,0.08);
        border: 2px solid rgba(136,120,249,0.5);
        color: white;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px); */
      }
      
      .sc-button-hero.secondary:active {
        transform: scale(0.98);
        background: rgba(255,255,255,0.12);
        border-color: rgba(136,120,249,0.8);
      }
      
      .sc-hero-feature-highlight {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid rgba(136,120,249,0.2);
        animation: fadeInUp 1s ease-out 0.5s both;
      }
      
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .sc-hero-highlight-text {
        font-size: 0.875rem;
        font-style: normal;
       /* color: rgba(255,255,255,0.7); */
        margin-bottom: 0.5rem;
        letter-spacing: 0.5px;
        font-size: 2rem;
      }
      
      .sc-arrow-link {
        color: #8878f9;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
      }
      
      .sc-arrow-link::after {
        content: '→';
        transition: transform 0.3s ease;
      }
      
      .sc-arrow-link:active {
        color: #79f7ab; color: var(--sc-light-blue);
      }

      .sc-section-cta .sc-button {
        width: auto;
    }
      
      .sc-arrow-link:active::after {
        transform: translateX(4px);
      }
      
      /* Mobile connector styling */
      .sc-visualization-connector {
        margin: -2px 0;
        background: linear-gradient(90deg, 
          transparent 0%, 
          rgba(136, 120, 249, 0.4) 30%,
          rgba(136, 120, 249, 0.6) 50%,
          rgba(136, 120, 249, 0.4) 70%,
          transparent 100%);
      }
      
      /* Mobile 3D visualization */
      .sc-hero-visual-clean {
        margin-top: 2rem;
        perspective: 1000px;
      }
      
      .sc-hero-image-container {
        transform-style: preserve-3d;
        /* animation: heroFloat 4s ease-in-out infinite; */
      }
      
      @keyframes heroFloat {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-5px);
        }
      }
      
      .sc-hero-3d-container {
        border-radius: 16px 16px 0 0;
        box-shadow: none;
        position: relative;
        overflow: hidden;
      }
      
      .sc-hero-3d-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid rgba(136, 120, 249, 0.3);
        border-radius: 16px;
        z-index: 1;
      }
      
      @keyframes borderRotate {
        0% {
          opacity: 0.3;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0.3;
        }
      }
      
      .sc-infrastructure-features {
        margin-top: -1px;
        padding: 1rem;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background: linear-gradient(to bottom, rgba(26, 26, 46, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%);
        border: 1px solid rgba(136, 120, 249, 0.3);
        border-top: none;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        flex-direction: column;
        gap: 1rem;
        position: relative;
        z-index: 5;
        border: 1px solid rgb(92 92 92 / 30%);
      }
      
      .sc-feature-item {
        padding: 0.75rem;
        background: rgba(255,255,255,0.02);
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.05);
        transition: all 0.3s ease;
      }
      
      .sc-feature-item:active {
        background: rgba(136,120,249,0.1);
        border-color: rgba(136,120,249,0.3);
        transform: scale(0.98);
      }
      
      .sc-feature-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, rgba(136,120,249,0.2) 0%, rgba(121,247,171,0.2) 100%);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      }
      
      .sc-feature-text {
        flex: 1;
      }
      
      .sc-feature-text strong {
        font-size: 0.9375rem;
        display: block;
        margin-bottom: 0.25rem;
        color: #fff; color: var(--sc-white);
      }
      
      .sc-feature-text span {
        font-size: 0.8125rem;
        color: rgba(255,255,255,0.7); color: var(--sc-gray);
        line-height: 1.4;
      }
      
      /* Mobile swipe hint */
      .sc-mobile-swipe-hint {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        animation: swipeHint 2s ease-in-out infinite;
        z-index: 10;
        display: none;
      }
      
      @keyframes swipeHint {
        0%, 100% {
          opacity: 0.5;
          transform: translateX(-50%) translateY(0);
        }
        50% {
          opacity: 0.7;
          transform: translateX(-50%) translateY(-5px);
        }
      }
      
      .sc-swipe-icon {
        width: 24px;
        height: 24px;
        color: rgba(255,255,255,0.6);
      }
      
      .sc-swipe-text {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      
      /* Mobile horizontal scrolling for trust and brand sections */
      .sc-trust-section {
        padding: 2rem 0;
        background: linear-gradient(180deg, var(--sc-dark-blue) 0%, rgba(26,26,46,0.8) 100%);
        position: relative;
      }
      
      .sc-trust-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(136,120,249,0.4) 50%, transparent 100%);
      }
      
      /* Show all trust items on mobile */
      .sc-trust-item:nth-child(n+5) {
        display: flex;
      }
      
      .sc-trust-items {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
        padding: 0;
        gap: 2rem;
        width: 100%;
        position: relative;
      }
      
      .sc-trust-items::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--sc-dark-blue) 0%, transparent 10%, transparent 90%, var(--sc-dark-blue) 100%);
        z-index: 2;
        pointer-events: none;
      }
      
      .sc-trust-scroll-container {
        display: flex;
        gap: 2rem;
        animation: scrollTrustLeft 12s linear infinite;
        will-change: transform;
      }
      
      .sc-trust-scroll-container:hover {
        animation-play-state: paused;
      }
      
      @keyframes scrollTrustLeft {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      
      .sc-trust-items::-webkit-scrollbar {
        display: none;
      }
      
      .sc-trust-item {
        flex-shrink: 0;
        scroll-snap-align: center;
        font-size: 1rem;
        white-space: nowrap;
        padding: 0.5rem 1rem;
        background: rgba(255,255,255,0.1);
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.2);
      }
      
      .sc-brands-section {
        padding: 2rem 0;
      }
      
      /* Show all brand items on mobile */
      .sc-brand-item:nth-child(n+22) {
        display: flex;
      }
      
      .sc-brands-grid {
        display: flex;
        overflow: hidden;
        gap: 2rem;
        padding: 0;
        width: 100%;
        position: relative;
      }
      
      .sc-brands-grid::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--sc-black) 0%, transparent 15%, transparent 85%, var(--sc-black) 100%);
        z-index: 2;
        pointer-events: none;
      }
      
      .sc-brands-scroll-container {
        display: flex;
        gap: 2rem;
        animation: scrollBrandsLeft 18s linear infinite;
        will-change: transform;
      }
      
      .sc-brands-scroll-container:hover {
        animation-play-state: paused;
      }
      
      @keyframes scrollBrandsLeft {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
      
      .sc-brands-grid::-webkit-scrollbar {
        display: none;
      }
      
      .sc-brand-item {
        flex-shrink: 0;
        scroll-snap-align: center;
        min-width: 140px;
      }
      
      .sc-cards-grid-clean {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      
      /* Mobile infrastructure features */
      .sc-infrastructure-features {
        flex-direction: column;
        gap: 1rem;
        padding: 0.75rem;
      }
      
      .sc-feature-icon {
        width: 32px;
        height: 32px;
      }
      
      .sc-feature-text strong {
        font-size: 0.8rem;
      }
      
      .sc-feature-text span {
        font-size: 0.7rem;
      }
      
    }
    
    @media (max-width: 480px) {
      .sc-hero-title-clean {
        font-size: 2rem;
      }
      
      .sc-trust-section {
        padding: 1.5rem 0;
      }
      
      .sc-trust-items {
        gap: 1.5rem;
        padding: 0 0.5rem;
      }
      
      .sc-trust-item {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
      }
      
      .sc-brands-section {
        padding: 1.5rem 0;
      }
      
      .sc-brands-grid {
        gap: 1rem;
        padding: 0 0.5rem;
      }
      
      .sc-brand-item {
        min-width: 120px;
      }
      
      .sc-brand-logo {
        width: 90px;
        height: 28px;
      }
      
      /* CTA Section Responsive */
      .sc-section-cta {
        padding: 3rem 0;
        margin: 2rem 0 0;
      }
      
      .sc-cta-title {
        font-size: 1.75rem;
      }
      
      /* Specific mobile styles for homepage cards with higher specificity */
      .sc-features-section .sc-features-cards .sc-card-clean,
      .sc-hero-clean .sc-card-clean,
      body .sc-card-clean {
        padding: 2rem;
        background: var(--sc-dark-blue);
        border: 1px solid var(--sc-dark-gray);
      }
      
      /* Homepage-specific card styles */
      .sc-product-card {
        padding: 2rem;
      }
      
      .sc-expertise-card {
        padding: 1.5rem;
      }
      
      .sc-cta-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
      }
      
      .sc-cta-actions {
        flex-direction: column;
        gap: 1rem;
      }
      
      .sc-section-cta .sc-button {
        width: 100%;
        text-align: center;
      }
      
      /* Very small screens - even more subtle animations */
      .sc-floating-card {
        padding: 0.5rem;
        gap: 0.4rem;
        animation: floatMobile 6s ease-in-out infinite;
      }
      
      .sc-card-1 {
        top: 5%;
        right: 1%;
      }
      
      .sc-card-2 {
        bottom: 20%;
        left: 1%;
      }
      
      .sc-card-3 {
        top: 40%;
        right: -1%;
      }
      
      .sc-card-icon-small {
        width: 24px;
        height: 24px;
      }
      
      .sc-card-title-small {
        font-size: 0.75rem;
      }
      
      .sc-card-subtitle-small {
        font-size: 0.65rem;
      }
    }
    .sc-product-content {
      padding: 0;
    }
    /* Override generic card styles at 480px with proper specificity */
    @media (max-width: 480px) {
      /* Homepage-specific card styles */
      .sc-features-section .sc-features-cards .sc-card-clean,
      .sc-hero-clean .sc-hero-inner-clean .sc-card-clean,
      body.sc-body .sc-card-clean {
        padding: 1.75rem;  padding: 1.25rem; 
        background: var(--sc-dark-blue);
      }
      
      .sc-product-card {
        padding: 1.25rem;
      }

      
      
      .sc-expertise-card {
        padding: 1.25rem;
      }
      
      .sc-approach-card {
        padding: 1.5rem;
      }
    }
    
    /* Tablet responsive adjustments */
    @media (max-width: 1024px) and (min-width: 768px) {
      .sc-hero-3d-container {
        height: 450px;
        min-height: 450px;
      }
    }
    
    /* Mobile responsive adjustments */
    @media (max-width: 767px) {
      .sc-hero-3d-container {
        height: 500px;
        min-height: 500px;
      }
    }
    
    /* Small mobile responsive adjustments */
    @media (max-width: 480px) {
      .sc-hero-3d-container {
        height: 480px;
        min-height: 480px;
      }
    }
    
    /* 3D Hero responsive fixes for very narrow phones */
    @media (max-width: 320px) {
      .sc-hero-3d-container {
        height: 450px;
        min-height: 450px;
      }
      
      .sc-infrastructure-features {
        flex-direction: column;
        padding: 1rem;
        gap: 0.75rem;
      }
      
      .sc-feature-item {
        min-width: 100%;
      }
      
      /* Card adjustments for very narrow phones */
      .sc-features-section .sc-features-cards .sc-card-clean,
      .sc-hero-clean .sc-hero-inner-clean .sc-card-clean,
      body.sc-body .sc-card-clean {
        padding: 1.25rem;
      }
      
      .sc-product-card,
      .sc-approach-card {
        padding: 1.25rem;
      }
      
      .sc-expertise-card {
        padding: 1rem;
      }
      
      /* Font size adjustments */
      .sc-card-title-clean {
        font-size: 1.25rem;
      }
      
      .sc-card-description-clean {
        font-size: 0.875rem;
      }
    }

    .sc-hero-feature-highlight {
      background: none;
      box-shadow: none;
      border: none;
      backdrop-filter: none;
      padding: 0;
      margin: 0;
      margin-top: 2rem;
  }


  .sc-service-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgb(243 242 242 / 71%);
    padding: 8px 12px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(136, 120, 249, 0.2);
    border: 2px solid #e0e0e0;
   /* flex-wrap: wrap;*/
    border-left: none;
    border-right: none;
    border-radius: 0px;
}

/* Responsive adjustments for 3D hero visualization */
@media (max-width: 480px) {
  .sc-service-controls {
    gap: 4px;
    padding: 6px 8px;
  }
  
  .sc-control-label {
    font-size: 11px;
    margin-right: 4px;
  }
  
  .sc-service-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  
  .sc-service-btn .sc-btn-icon {
    font-size: 12px;
    margin-right: 2px;
  }
  
  #hero-3d-visualization {
    height: 400px;
  }
  
  .sc-hero-3d-container {
    margin-top: 1rem;
  }
  
  /* Hide some text on very narrow screens */
  @media (max-width: 380px) {
    .sc-service-btn .sc-btn-icon {
      margin-right: 0;
    }
    
    #hero-3d-visualization {
      height: 350px;
    }
  }
}

.sc-service-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #e0e0e0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: #5e5e5e;background: #d8d6e6;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-family: var(--sc-font-primary);

}

.sc-service-btn:hover {
    background: #d0d0d0;
    border-color: #c0c0c0;
    color: #4e4e4e;
}

#service-controls {
  bottom: 0px;
  position: absolute;
  bottom: 0px;
  left: 0;
  transform: none;
  z-index: 100;
  pointer-events: auto;
  width: 100%;
  
}

@media (max-width: 1024px) {

  .sc-service-btn {
  
    padding: 5px 5px;
  }
}