:root {
      --navy-deepest: #050811;
      --navy-deep: #0a0f1a;
      --navy-primary: #0d1528;
      --navy-elevated: #162038;
      --navy-light: #1e2947;
      --gold-primary: #d4af37;
      --gold-rich: #c49f2e;
      --gold-light: #f0d77e;
      --gold-pale: #fef5d4;
      --gold-glow: rgba(212, 175, 55, 0.4);
      --white: #ffffff;
      --white-soft: #f8f9fb;
      --white-warm: #fdfbf7;
      --cyan-glow: #00d4ff;
      --cyan-soft: rgba(0, 212, 255, 0.25);
      --purple-glow: #a78bfa;
      --green-success: #10b981;
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);
      --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
      --shadow-xl: 0 30px 90px rgba(0, 0, 0, 0.5);
      --shadow-2xl: 0 40px 120px rgba(0, 0, 0, 0.6);
      --glow-gold: 0 0 60px var(--gold-glow);
      --glow-cyan: 0 0 40px var(--cyan-soft);
    }


    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    html { scroll-behavior: smooth; }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      background: 
        radial-gradient(ellipse 1600px 1000px at 50% -15%, rgba(0, 212, 255, 0.09), transparent 55%),
        radial-gradient(ellipse 1400px 900px at 110% 50%, rgba(167, 139, 250, 0.06), transparent 60%),
        radial-gradient(ellipse 1300px 850px at -10% 100%, rgba(212, 175, 55, 0.07), transparent 65%),
        linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-deepest) 100%);
      color: var(--white-soft);
      line-height: 1.7;
      overflow-x: hidden;
      min-height: 100vh;
      position: relative;
    }

    .grid-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: 
        linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent);
      animation: grid-flow 20s linear infinite;
    }

    @keyframes grid-flow {
      0% { transform: translateY(0); }
      100% { transform: translateY(60px); }
    }

    .neural-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.5;
    }

    .particles {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: var(--gold-primary);
      border-radius: 50%;
      opacity: 0.4;
      animation: float-particle linear infinite;
      box-shadow: 0 0 10px var(--gold-glow);
    }

    @keyframes float-particle {
      0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
      10% { opacity: 0.6; transform: translateY(90vh) translateX(20px) scale(1); }
      90% { opacity: 0.6; transform: translateY(10vh) translateX(-20px) scale(1); }
      100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
    }

    .container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 48px;
      position: relative;
      z-index: 1;
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10000;
      background: rgba(5, 8, 17, 0.88);
      backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid rgba(212, 175, 55, 0.12);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav.scrolled {
      background: rgba(5, 8, 17, 0.95);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      border-bottom-color: rgba(212, 175, 55, 0.2);
    }

    .nav-content {
      max-width: 1440px;
      margin: 0 auto;
      padding: 24px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 18px;
      text-decoration: none;
      transition: transform 0.3s ease;
    }

    .brand:hover {
      transform: translateY(-2px);
    }

    .brand-icon {
      width: 56px;
      height: 56px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .brand-icon::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: conic-gradient(from 180deg, var(--gold-primary), var(--cyan-glow), var(--purple-glow), var(--gold-primary));
      border-radius: 14px;
      animation: rotate-brand 10s linear infinite;
      filter: blur(2px);
    }

    .brand-icon::after {
      content: '';
      position: absolute;
      inset: 3px;
      background: linear-gradient(135deg, var(--navy-primary), var(--navy-deep));
      border-radius: 11px;
    }

    @keyframes rotate-brand { 
      to { transform: rotate(360deg); } 
    }

    .brand-core {
      width: 24px;
      height: 24px;
      background: radial-gradient(circle, var(--gold-pale), var(--gold-light), var(--gold-primary));
      border-radius: 50%;
      position: relative;
      z-index: 1;
      box-shadow: 
        0 0 20px var(--gold-glow),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
      animation: pulse-brand 4s ease-in-out infinite;
    }

    @keyframes pulse-brand { 
      0%, 100% { transform: scale(1); box-shadow: 0 0 20px var(--gold-glow); } 
      50% { transform: scale(1.15); box-shadow: 0 0 40px var(--gold-glow); } 
    }

    .brand-text h1 {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: 0.3px;
      margin: 0;
      background: linear-gradient(135deg, var(--white), var(--gold-pale));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .brand-text p {
      font-size: 10px;
      color: var(--gold-light);
      letter-spacing: 2.5px;
      text-transform: uppercase;
      margin: 2px 0 0;
      font-weight: 600;
      white-space: nowrap;
    }

    .nav-links {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .nav-links a {
  padding: 12px 24px;
  color: var(--white-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  letter-spacing: 0.3px;
  white-space: nowrap; /* ADD THIS LINE */
}

    .nav-links a::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(0, 212, 255, 0.1));
      border-radius: 10px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 8px;
      left: 24px;
      right: 24px;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-primary), var(--cyan-glow));
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .nav-links a:hover {
      color: var(--white);
      transform: translateY(-2px);
    }

    .nav-links a:hover::before {
      opacity: 1;
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    .nav-cta {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* ADD THIS LINE */
}

    .btn-lang {
      background: rgba(0, 212, 255, 0.1);
      color: var(--cyan-glow);
      border: 1.5px solid rgba(0, 212, 255, 0.3);
      padding: 10px 20px;
      font-size: 13px;
    }

    .btn-lang:hover {
      background: rgba(0, 212, 255, 0.2);
      box-shadow: var(--glow-cyan);
      transform: translateY(-2px);
      border-color: var(--cyan-glow);
    }

    .btn-secondary {
      background: rgba(212, 175, 55, 0.12);
      color: var(--gold-light);
      border: 1.5px solid rgba(212, 175, 55, 0.35);
    }

    .btn-secondary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(0, 212, 255, 0.15));
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .btn-secondary:hover {
      background: rgba(212, 175, 55, 0.2);
      box-shadow: var(--glow-gold);
      transform: translateY(-3px);
      border-color: var(--gold-primary);
    }

    .btn-secondary:hover::before {
      opacity: 1;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--gold-rich) 0%, var(--gold-primary) 50%, var(--gold-light) 100%);
      color: var(--navy-deepest);
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--gold-light), var(--gold-pale));
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .btn-primary::after {
      content: '';
      position: absolute;
      inset: -2px;
      background: conic-gradient(from 90deg, transparent, var(--gold-primary), transparent);
      border-radius: 10px;
      opacity: 0;
      z-index: -1;
      filter: blur(8px);
      transition: opacity 0.4s ease;
    }

    .btn-primary:hover::before {
      opacity: 1;
    }

    .btn-primary:hover::after {
      opacity: 0.6;
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: var(--glow-gold), var(--shadow-xl);
    }

    .btn span {
      position: relative;
      z-index: 1;
    }

    .hero {
      padding: 220px 0 140px;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translateX(-50%);
      width: 1000px;
      height: 1000px;
      background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent 70%);
      filter: blur(100px);
      animation: hero-glow 8s ease-in-out infinite;
    }

    @keyframes hero-glow {
      0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
      50% { opacity: 0.5; transform: translateX(-50%) scale(1.1); }
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 100px;
      align-items: center;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 28px;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(167, 139, 250, 0.12));
      border: 1.5px solid rgba(0, 212, 255, 0.35);
      border-radius: 60px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--cyan-glow);
      margin-bottom: 40px;
      box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
      animation: badge-glow 3s ease-in-out infinite;
    }

    @keyframes badge-glow {
      0%, 100% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1); }
      50% { box-shadow: 0 0 50px rgba(0, 212, 255, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2); }
    }

    .hero-badge::before {
      content: '';
      width: 10px;
      height: 10px;
      background: var(--cyan-glow);
      border-radius: 50%;
      animation: pulse-dot 2.5s ease-in-out infinite;
      box-shadow: 0 0 10px var(--cyan-glow);
    }

    @keyframes pulse-dot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: 0.7; }
    }

    .hero h2 {
      font-family: 'Playfair Display', serif;
      font-size: 72px;
      line-height: 1.08;
      font-weight: 900;
      color: var(--white);
      margin-bottom: 32px;
      letter-spacing: -1px;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .hero h2 .gradient-text {
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light), var(--gold-pale));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      display: inline-block;
    }

    .hero h2 .gradient-text::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: blur(20px);
      opacity: 0.6;
    }

    .hero-lead {
      font-size: 21px;
      line-height: 1.8;
      color: rgba(248, 249, 251, 0.85);
      margin-bottom: 48px;
      font-weight: 400;
      max-width: 680px;
      letter-spacing: 0.2px;
    }

    .hero-lead strong {
      color: var(--gold-light);
      font-weight: 700;
    }

    .hero-cta {
      display: flex;
      gap: 18px;
      margin-bottom: 70px;
      flex-wrap: wrap;
    }

    .hero-cta .btn {
      padding: 18px 40px;
      font-size: 16px;
    }

    .trust-bar {
      display: flex;
      gap: 48px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 24px;
      padding-top: 32px;
      border-top: 1px solid rgba(212, 175, 55, 0.15);
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }

    .trust-item:hover {
      opacity: 1;
    }

    .trust-icon {
      width: 24px;
      height: 24px;
      color: var(--gold-primary);
      font-size: 20px;
    }

    .trust-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--white-soft);
      letter-spacing: 0.3px;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      margin-top: 50px;
    }

    .metric {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.7), rgba(10, 15, 26, 0.9));
      backdrop-filter: blur(12px);
      border: 1.5px solid rgba(212, 175, 55, 0.25);
      border-radius: 20px;
      padding: 36px 28px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .metric::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold-primary), var(--cyan-glow), transparent);
      transition: left 0.8s ease;
    }

    .metric::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.1), transparent 60%);
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .metric:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: var(--gold-primary);
      box-shadow: 
        0 0 40px var(--gold-glow),
        var(--shadow-xl);
    }

    .metric:hover::before {
      left: 100%;
    }

    .metric:hover::after {
      opacity: 1;
    }

    .metric-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 8px 24px var(--gold-glow);
      position: relative;
      z-index: 1;
    }

    .metric-value {
      font-size: 42px;
      font-weight: 900;
      color: var(--gold-light);
      margin-bottom: 12px;
      font-family: 'Playfair Display', serif;
      position: relative;
      z-index: 1;
      text-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
    }

    .metric-label {
      font-size: 14px;
      color: rgba(248, 249, 251, 0.8);
      font-weight: 600;
      position: relative;
      z-index: 1;
      line-height: 1.5;
    }

    .ai-visual {
      position: relative;
      height: 580px;
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.8), rgba(10, 15, 26, 0.95));
      border-radius: 32px;
      border: 2px solid rgba(212, 175, 55, 0.25);
      box-shadow: 
        var(--shadow-2xl),
        inset 0 0 100px rgba(0, 212, 255, 0.05);
      overflow: hidden;
    }

    .ai-visual::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: conic-gradient(from 90deg, transparent, var(--gold-primary), transparent 120deg, var(--cyan-glow), transparent 240deg, var(--purple-glow), transparent);
      border-radius: 32px;
      animation: rotate-border 12s linear infinite;
      opacity: 0.6;
      z-index: -1;
      filter: blur(4px);
    }

    @keyframes rotate-border {
      to { transform: rotate(360deg); }
    }

    .ai-grid {
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.08) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
      animation: grid-pulse 4s ease-in-out infinite;
    }

    @keyframes grid-pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.6; }
    }

    .ai-core {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 240px;
      height: 240px;
      z-index: 5;
    }

    .ai-core-inner {
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, 
        var(--gold-pale) 0%,
        var(--gold-light) 30%, 
        var(--gold-primary) 60%,
        transparent 100%);
      border-radius: 50%;
      animation: pulse-core 5s ease-in-out infinite;
      box-shadow: 
        0 0 100px var(--gold-glow),
        0 0 200px rgba(212, 175, 55, 0.3),
        inset 0 0 60px rgba(255, 255, 255, 0.2);
      position: relative;
    }

    .ai-core-inner::before {
      content: '';
      position: absolute;
      inset: 20%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent 70%);
      border-radius: 50%;
      animation: core-shimmer 3s ease-in-out infinite;
    }

    @keyframes pulse-core { 
      0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 100px var(--gold-glow), 0 0 200px rgba(212, 175, 55, 0.3); 
      } 
      50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 150px var(--gold-glow), 0 0 300px rgba(212, 175, 55, 0.5); 
      } 
    }

    @keyframes core-shimmer {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    .ai-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: rotate-orbit 25s linear infinite;
    }

    .ai-orbit-ring {
      width: 420px;
      height: 420px;
      border: 1.5px solid rgba(212, 175, 55, 0.3);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: inset 0 0 30px rgba(212, 175, 55, 0.1);
    }

    .ai-orbit-ring.ring-2 {
      width: 350px;
      height: 350px;
      border-color: rgba(0, 212, 255, 0.25);
      animation: rotate-ring-2 20s linear infinite reverse;
      box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.1);
    }

    @keyframes rotate-orbit { 
      to { transform: translate(-50%, -50%) rotate(360deg); } 
    }

    @keyframes rotate-ring-2 { 
      to { transform: translate(-50%, -50%) rotate(-360deg); } 
    }

    .ai-node {
      width: 16px;
      height: 16px;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      border-radius: 50%;
      position: absolute;
      box-shadow: 
        0 0 30px var(--gold-glow),
        0 0 60px rgba(212, 175, 55, 0.4);
      animation: pulse-node 3s ease-in-out infinite;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    @keyframes pulse-node {
      0%, 100% { transform: scale(1); box-shadow: 0 0 30px var(--gold-glow); }
      50% { transform: scale(1.3); box-shadow: 0 0 50px var(--gold-glow), 0 0 80px rgba(212, 175, 55, 0.6); }
    }

    .ai-node:nth-child(1) { top: -8px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    .ai-node:nth-child(2) { top: 50%; right: -8px; transform: translateY(-50%); animation-delay: 0.75s; }
    .ai-node:nth-child(3) { bottom: -8px; left: 50%; transform: translateX(-50%); animation-delay: 1.5s; }
    .ai-node:nth-child(4) { top: 50%; left: -8px; transform: translateY(-50%); animation-delay: 2.25s; }

    .ai-data-stream {
      position: absolute;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--cyan-glow);
      opacity: 0.7;
      animation: float-data 10s ease-in-out infinite;
      padding: 8px 14px;
      background: rgba(0, 212, 255, 0.08);
      border: 1px solid rgba(0, 212, 255, 0.25);
      border-radius: 8px;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2);
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    @keyframes float-data {
      0%, 100% { transform: translateY(0) translateX(0); opacity: 0.5; }
      50% { transform: translateY(-25px) translateX(15px); opacity: 0.9; }
    }

    .ai-data-stream:nth-child(1) { animation-delay: 0s; }
    .ai-data-stream:nth-child(2) { animation-delay: 2s; }
    .ai-data-stream:nth-child(3) { animation-delay: 4s; }
    .ai-data-stream:nth-child(4) { animation-delay: 6s; }

    section {
      padding: 140px 0;
      position: relative;
    }

    .section-header {
      text-align: center;
      margin-bottom: 90px;
      position: relative;
    }

    .section-header::before {
      content: '';
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, var(--gold-glow), transparent 70%);
      filter: blur(40px);
      opacity: 0.4;
    }

    .section-label {
      display: inline-block;
      padding: 8px 24px;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(167, 139, 250, 0.08));
      border: 1.5px solid rgba(212, 175, 55, 0.35);
      border-radius: 60px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 28px;
      box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 56px;
      font-weight: 900;
      color: var(--white);
      margin-bottom: 24px;
      letter-spacing: -0.5px;
      line-height: 1.15;
    }

    .section-subtitle {
      font-size: 20px;
      color: rgba(248, 249, 251, 0.75);
      max-width: 820px;
      margin: 0 auto;
      font-weight: 400;
      line-height: 1.75;
      letter-spacing: 0.2px;
    }

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

    .service-card {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.6), rgba(10, 15, 26, 0.85));
      backdrop-filter: blur(12px);
      border: 1.5px solid rgba(212, 175, 55, 0.2);
      border-radius: 24px;
      padding: 44px 36px;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), rgba(0, 212, 255, 0.1), transparent);
      transition: left 0.8s ease;
    }

    .service-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08), transparent 60%);
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .service-card:hover {
      transform: translateY(-10px) scale(1.02);
      border-color: var(--gold-primary);
      box-shadow: 
        0 0 50px var(--gold-glow),
        var(--shadow-2xl);
    }

    .service-card:hover::before {
      left: 100%;
    }

    .service-card:hover::after {
      opacity: 1;
    }

    .service-icon {
      width: 72px;
      height: 72px;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      margin-bottom: 28px;
      box-shadow: 
        0 10px 30px var(--gold-glow),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
      position: relative;
      z-index: 1;
      transition: all 0.6s ease;
    }

    .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 
        0 15px 50px var(--gold-glow),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    .service-card h3 {
      font-size: 24px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 18px;
      position: relative;
      z-index: 1;
      letter-spacing: -0.3px;
    }

    .service-card p {
      font-size: 16px;
      color: rgba(248, 249, 251, 0.75);
      line-height: 1.75;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
    }

    .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .tag {
      padding: 7px 16px;
      background: rgba(0, 212, 255, 0.12);
      border: 1px solid rgba(0, 212, 255, 0.35);
      border-radius: 60px;
      font-size: 12px;
      font-weight: 700;
      color: var(--cyan-glow);
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
    }

    .tag:hover {
      background: rgba(0, 212, 255, 0.2);
      box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
      transform: translateY(-2px);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
      margin-top: 70px;
    }

    .pricing-card {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.7), rgba(10, 15, 26, 0.9));
      backdrop-filter: blur(12px);
      border: 2px solid rgba(212, 175, 55, 0.25);
      border-radius: 28px;
      padding: 52px 44px;
      position: relative;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .pricing-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.1), transparent 60%);
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .pricing-card.featured {
      border-color: var(--gold-primary);
      box-shadow: 
        0 0 60px var(--gold-glow),
        var(--shadow-2xl);
      transform: scale(1.06);
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.8), rgba(10, 15, 26, 0.95));
    }

    .pricing-card.featured::before {
      opacity: 1;
    }

    .pricing-card.featured::after {
  content: 'RECOMMENDED';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 32px; /* INCREASED from 8px 28px */
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
  color: var(--navy-deepest);
  font-size: 13px; /* INCREASED from 12px */
  font-weight: 900;
  letter-spacing: 2.5px; /* INCREASED from 2px */
  border-radius: 60px;
  box-shadow: 
    0 8px 24px var(--gold-glow),
    0 0 40px rgba(212, 175, 55, 0.6); /* ADDED extra glow */
  z-index: 10;
  border: 2px solid rgba(255, 255, 255, 0.3); /* ADDED border for contrast */
}

    .pricing-card:hover {
      transform: translateY(-10px) scale(1.02);
      border-color: var(--gold-primary);
      box-shadow: 
        0 0 50px var(--gold-glow),
        var(--shadow-2xl);
    }

    .pricing-card:hover::before {
      opacity: 1;
    }

    .pricing-card h3 {
      font-size: 26px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 16px;
      letter-spacing: -0.3px;
      white-space: nowrap;
    }

    .price {
      font-family: 'Playfair Display', serif;
      font-size: 48px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 36px;
      line-height: 1.2;
    }

    .price-period {
      font-size: 16px;
      color: rgba(248, 249, 251, 0.6);
      font-weight: 600;
      margin-top: -24px;
      margin-bottom: 28px;
      font-family: 'Inter', sans-serif;
    }

    .price-features {
      list-style: none;
      margin-bottom: 40px;
    }

    .price-features li {
      padding: 15px 0;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 16px;
      color: rgba(248, 249, 251, 0.85);
      border-bottom: 1px solid rgba(212, 175, 55, 0.12);
      transition: all 0.3s ease;
      line-height: 1.6;
    }

    .price-features li:hover {
      color: var(--white);
      border-bottom-color: rgba(212, 175, 55, 0.3);
      padding-left: 8px;
    }

    .price-features li::before {
      content: '✓';
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy-deepest);
      font-weight: 900;
      flex-shrink: 0;
      font-size: 14px;
      box-shadow: 0 4px 12px var(--gold-glow);
    }

    .stats-bar {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.8), rgba(10, 15, 26, 0.9));
      border: 1.5px solid rgba(212, 175, 55, 0.2);
      border-radius: 24px;
      padding: 60px 48px;
      margin: 100px 0;
      box-shadow: var(--shadow-xl);
      position: relative;
      overflow: hidden;
    }

    .stats-bar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold-primary), var(--cyan-glow), transparent);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
    }

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

    .stat-number {
      font-family: 'Playfair Display', serif;
      font-size: 56px;
      font-weight: 900;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 12px;
      line-height: 1;
    }

    .stat-label {
      font-size: 16px;
      color: rgba(248, 249, 251, 0.8);
      font-weight: 600;
      line-height: 1.5;
    }

    .cases-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
      margin-top: 70px;
    }

    .case-card {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.6), rgba(10, 15, 26, 0.85));
      border: 1.5px solid rgba(212, 175, 55, 0.2);
      border-radius: 24px;
      overflow: hidden;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      text-decoration: none;
      display: block;
      color: inherit;
    }

    .case-card:hover {
      transform: translateY(-10px);
      border-color: var(--gold-primary);
      box-shadow: 0 0 50px var(--gold-glow), var(--shadow-2xl);
    }

    .case-image {
      height: 220px;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(0, 212, 255, 0.25));
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .case-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
      opacity: 0.3;
    }

    .case-icon {
      font-size: 64px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
    }

    .case-body {
      padding: 32px 28px;
    }

    .case-body h4 {
      font-size: 19px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 10px;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .case-body p {
      font-size: 15px;
      color: rgba(248, 249, 251, 0.75);
      line-height: 1.7;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .case-tag {
      display: inline-block;
      padding: 6px 14px;
      background: rgba(0, 212, 255, 0.12);
      border: 1px solid rgba(0, 212, 255, 0.3);
      border-radius: 60px;
      font-size: 11px;
      font-weight: 700;
      color: var(--cyan-glow);
      letter-spacing: 0.5px;
    }

    .cta-section {
      padding: 0;
      margin: 120px 0;
    }

    .cta-box {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.85), rgba(10, 15, 26, 0.95));
      border: 2px solid rgba(212, 175, 55, 0.3);
      border-radius: 36px;
      padding: 90px 70px;
      text-align: center;
      box-shadow: var(--shadow-2xl);
      position: relative;
      overflow: hidden;
    }

    .cta-box::before {
      content: '';
      position: absolute;
      top: -60%;
      right: -25%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, var(--gold-glow), transparent 60%);
      filter: blur(100px);
      opacity: 0.4;
      animation: cta-glow 8s ease-in-out infinite;
    }

    @keyframes cta-glow {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.2); }
    }

    .cta-box::after {
      content: '';
      position: absolute;
      bottom: -60%;
      left: -25%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent 60%);
      filter: blur(100px);
      opacity: 0.3;
    }

    .cta-content {
      position: relative;
      z-index: 1;
    }

    .cta-box .section-label {
      margin-bottom: 32px;
    }

    .cta-box h2 {
      font-family: 'Playfair Display', serif;
      font-size: 52px;
      font-weight: 900;
      color: var(--white);
      margin-bottom: 24px;
      line-height: 1.2;
    }

    .cta-box p {
      font-size: 20px;
      color: rgba(248, 249, 251, 0.8);
      max-width: 720px;
      margin: 0 auto 48px;
      line-height: 1.75;
    }

    .cta-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta-buttons .btn {
      padding: 16px 36px;
      font-size: 15px;
    }

    footer {
      background: linear-gradient(135deg, rgba(10, 15, 26, 0.95), rgba(5, 8, 17, 0.98));
      border-top: 1.5px solid rgba(212, 175, 55, 0.2);
      padding: 100px 0 50px;
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2.5fr 1fr 1fr 1fr;
      gap: 70px;
      margin-bottom: 70px;
    }

    .footer-brand h3 {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 20px;
      letter-spacing: -0.3px;
    }

    .footer-brand p {
      color: rgba(248, 249, 251, 0.65);
      line-height: 1.8;
      font-size: 16px;
      margin-bottom: 28px;
    }

    .footer-social {
      display: flex;
      gap: 14px;
    }

    .social-link {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: rgba(212, 175, 55, 0.1);
      border: 1px solid rgba(212, 175, 55, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-light);
      text-decoration: none;
      transition: all 0.3s ease;
      font-size: 18px;
    }

    .social-link:hover {
      background: var(--gold-primary);
      color: var(--navy-deepest);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px var(--gold-glow);
    }

    .footer-section h4 {
      font-size: 17px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 24px;
      letter-spacing: 0.5px;
    }

    .footer-section a {
      display: block;
      color: rgba(248, 249, 251, 0.7);
      text-decoration: none;
      padding: 10px 0;
      transition: all 0.3s ease;
      font-size: 15px;
      font-weight: 500;
    }

    .footer-section a:hover {
      color: var(--gold-light);
      padding-left: 8px;
    }

    .footer-bottom {
      text-align: center;
      padding-top: 50px;
      border-top: 1px solid rgba(212, 175, 55, 0.15);
      color: rgba(248, 249, 251, 0.5);
      font-size: 14px;
    }

    .footer-bottom a {
      color: rgba(248, 249, 251, 0.6);
      text-decoration: none;
      margin: 0 12px;
      transition: color 0.3s ease;
    }

    .footer-bottom a:hover {
      color: var(--gold-light);
    }

    /* New Sections Styles */
    .ai-feature-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 60px;
    }

    .ai-feature-card {
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.8), rgba(10, 15, 26, 0.9));
      backdrop-filter: blur(12px);
      border: 1.5px solid rgba(212, 175, 55, 0.25);
      border-radius: 20px;
      padding: 36px 28px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ai-feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold-primary), var(--cyan-glow), transparent);
      transition: left 0.8s ease;
    }

    .ai-feature-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.1), transparent 60%);
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .ai-feature-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: var(--gold-primary);
      box-shadow: 
        0 0 40px var(--gold-glow),
        var(--shadow-xl);
    }

    .ai-feature-card:hover::before {
      left: 100%;
    }

    .ai-feature-card:hover::after {
      opacity: 1;
    }

    .ai-feature-card .icon {
      font-size: 48px;
      margin-bottom: 20px;
      display: block;
      filter: drop-shadow(0 0 10px var(--gold-glow));
    }

    .ai-feature-card strong {
      display: block;
      color: var(--white);
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 12px;
      letter-spacing: -0.2px;
    }

    .ai-feature-card small {
      color: rgba(248, 249, 251, 0.75);
      font-size: 14px;
      line-height: 1.6;
      font-weight: 500;
    }

    .robotics-section {
      background: radial-gradient(ellipse 100% 50% at 50% 100%, rgba(0, 212, 255, 0.08), transparent 70%);
      padding: 140px 0;
      position: relative;
    }

    .robotics-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
    }

    .robotics-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .robotics-visual {
      position: relative;
      height: 500px;
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.8), rgba(10, 15, 26, 0.95));
      border-radius: 32px;
      border: 2px solid rgba(0, 212, 255, 0.25);
      box-shadow: 
        var(--shadow-2xl),
        inset 0 0 100px rgba(0, 212, 255, 0.05);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .robotics-visual::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: conic-gradient(from 90deg, transparent, var(--cyan-glow), transparent 120deg, var(--purple-glow), transparent 240deg, var(--gold-primary), transparent);
      border-radius: 32px;
      animation: rotate-border 12s linear infinite;
      opacity: 0.6;
      z-index: -1;
      filter: blur(4px);
    }

    .robot-arm {
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .robot-base {
      width: 120px;
      height: 60px;
      background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
      border-radius: 12px;
      position: absolute;
      bottom: 0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 2px solid rgba(0, 212, 255, 0.3);
    }

    .robot-base::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      height: 8px;
      background: linear-gradient(90deg, var(--cyan-glow), #0099cc);
      border-radius: 4px;
      opacity: 0.7;
    }

    .robot-segment {
      position: absolute;
      background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
      border-radius: 8px;
      transform-origin: bottom center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(0, 212, 255, 0.2);
    }

    .segment-1 {
      width: 20px;
      height: 140px;
      bottom: 60px;
      animation: robot-arm-1 8s ease-in-out infinite;
    }

    .segment-2 {
      width: 18px;
      height: 120px;
      bottom: 200px;
      animation: robot-arm-2 6s ease-in-out infinite;
    }

    .segment-3 {
      width: 16px;
      height: 100px;
      bottom: 320px;
      animation: robot-arm-3 4s ease-in-out infinite;
    }

    .robot-hand {
      width: 40px;
      height: 30px;
      background: linear-gradient(135deg, #4a4a4a, #3a3a3a);
      border-radius: 6px;
      position: absolute;
      bottom: 420px;
      animation: robot-hand 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(0, 212, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .robot-hand::before {
      content: '';
      width: 24px;
      height: 4px;
      background: var(--cyan-glow);
      border-radius: 2px;
      opacity: 0.7;
    }

    @keyframes robot-arm-1 {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(25deg); }
    }

    @keyframes robot-arm-2 {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(-15deg); }
    }

    @keyframes robot-arm-3 {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(10deg); }
    }

    @keyframes robot-hand {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .robotics-content h2 {
      font-family: 'Playfair Display', serif;
      font-size: 48px;
      font-weight: 900;
      color: var(--white);
      margin-bottom: 24px;
      line-height: 1.2;
    }

    .robotics-content p {
      font-size: 18px;
      color: rgba(248, 249, 251, 0.8);
      line-height: 1.7;
      margin-bottom: 32px;
    }

    .robotics-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 40px;
    }

    .robotics-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .robotics-feature .icon {
      width: 24px;
      height: 24px;
      background: var(--cyan-glow);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--navy-deepest);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .robotics-feature strong {
      color: var(--white);
      font-weight: 700;
      display: block;
      margin-bottom: 4px;
    }

    .robotics-feature span {
      color: rgba(248, 249, 251, 0.7);
      font-size: 14px;
      line-height: 1.5;
    }

    .agent-section {
      background: radial-gradient(ellipse 100% 50% at 50% 0%, rgba(167, 139, 250, 0.08), transparent 70%);
      padding: 140px 0;
      position: relative;
    }

    .agent-section::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--purple-glow), transparent);
    }

    .agent-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .agent-visual {
      position: relative;
      height: 500px;
      background: linear-gradient(135deg, rgba(22, 32, 56, 0.8), rgba(10, 15, 26, 0.95));
      border-radius: 32px;
      border: 2px solid rgba(167, 139, 250, 0.25);
      box-shadow: 
        var(--shadow-2xl),
        inset 0 0 100px rgba(167, 139, 250, 0.05);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .agent-visual::before {
      content: '';
      position: absolute;
      inset: -3px;
      background: conic-gradient(from 90deg, transparent, var(--purple-glow), transparent 120deg, var(--gold-primary), transparent 240deg, var(--cyan-glow), transparent);
      border-radius: 32px;
      animation: rotate-border 12s linear infinite;
      opacity: 0.6;
      z-index: -1;
      filter: blur(4px);
    }

    .agent-core {
      position: relative;
      width: 280px;
      height: 280px;
    }

    .agent-brain {
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.8), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.6), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.4), transparent 70%);
      border-radius: 50%;
      animation: pulse-agent 5s ease-in-out infinite;
      box-shadow: 
        0 0 80px rgba(167, 139, 250, 0.5),
        0 0 160px rgba(167, 139, 250, 0.3),
        inset 0 0 40px rgba(255, 255, 255, 0.2);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .agent-brain::before {
      content: '';
      position: absolute;
      inset: 20%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 70%);
      border-radius: 50%;
      animation: agent-shimmer 3s ease-in-out infinite;
    }

    .agent-brain-inner {
      width: 60%;
      height: 60%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(200, 180, 255, 0.7));
      border-radius: 50%;
      position: relative;
      z-index: 2;
      animation: agent-inner-pulse 2s ease-in-out infinite;
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    }

    @keyframes pulse-agent { 
      0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 80px rgba(167, 139, 250, 0.5), 0 0 160px rgba(167, 139, 250, 0.3); 
      } 
      50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 120px rgba(167, 139, 250, 0.7), 0 0 240px rgba(167, 139, 250, 0.5); 
      } 
    }

    @keyframes agent-shimmer {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    @keyframes agent-inner-pulse {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.1); opacity: 1; }
    }

    .agent-node {
      width: 16px;
      height: 16px;
      background: linear-gradient(135deg, var(--purple-glow), #8b5cf6);
      border-radius: 50%;
      position: absolute;
      box-shadow: 
        0 0 20px rgba(167, 139, 250, 0.6),
        0 0 40px rgba(167, 139, 250, 0.4);
      animation: pulse-agent-node 3s ease-in-out infinite;
      border: 1px solid rgba(255, 255, 255, 0.3);
      z-index: 3;
    }

    @keyframes pulse-agent-node {
      0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(167, 139, 250, 0.6); }
      50% { transform: scale(1.3); box-shadow: 0 0 40px rgba(167, 139, 250, 0.8), 0 0 60px rgba(167, 139, 250, 0.6); }
    }

    .agent-node:nth-child(1) { top: 20%; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    .agent-node:nth-child(2) { top: 50%; right: 20%; transform: translateY(-50%); animation-delay: 0.75s; }
    .agent-node:nth-child(3) { bottom: 20%; left: 50%; transform: translateX(-50%); animation-delay: 1.5s; }
    .agent-node:nth-child(4) { top: 50%; left: 20%; transform: translateY(-50%); animation-delay: 2.25s; }

    .agent-data-stream {
      position: absolute;
      font-family: 'Courier New', monospace;
      font-size: 11px;
      color: var(--purple-glow);
      opacity: 0.7;
      animation: float-agent-data 8s ease-in-out infinite;
      padding: 6px 12px;
      background: rgba(167, 139, 250, 0.08);
      border: 1px solid rgba(167, 139, 250, 0.25);
      border-radius: 6px;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 16px rgba(167, 139, 250, 0.2);
      font-weight: 600;
      letter-spacing: 0.5px;
      z-index: 4;
    }

    @keyframes float-agent-data {
      0%, 100% { transform: translateY(0) translateX(0); opacity: 0.5; }
      50% { transform: translateY(-20px) translateX(10px); opacity: 0.9; }
    }

    .agent-data-stream:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
    .agent-data-stream:nth-child(2) { top: 25%; right: 15%; animation-delay: 2s; }
    .agent-data-stream:nth-child(3) { bottom: 20%; left: 12%; animation-delay: 4s; }
    .agent-data-stream:nth-child(4) { bottom: 30%; right: 10%; animation-delay: 6s; }

    .agent-content h2 {
      font-family: 'Playfair Display', serif;
      font-size: 48px;
      font-weight: 900;
      color: var(--white);
      margin-bottom: 24px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .agent-content p {
      font-size: 18px;
      color: rgba(248, 249, 251, 0.8);
      line-height: 1.7;
      margin-bottom: 32px;
    }

    .agent-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 40px;
    }

    .agent-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .agent-feature .icon {
      width: 24px;
      height: 24px;
      background: var(--purple-glow);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--navy-deepest);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .agent-feature strong {
      color: var(--white);
      font-weight: 700;
      display: block;
      margin-bottom: 4px;
    }

    .agent-feature span {
      color: rgba(248, 249, 251, 0.7);
      font-size: 14px;
      line-height: 1.5;
    }

    @media (max-width: 1200px) {
      .hero-grid { grid-template-columns: 1fr; gap: 70px; }
      .ai-visual { height: 500px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing-grid { grid-template-columns: 1fr; }
      .pricing-card.featured { transform: scale(1); }
      .metrics { grid-template-columns: repeat(2, 1fr); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .cases-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
      .hero h2 { font-size: 58px; }
      .section-title { font-size: 48px; }
      .robotics-grid, .agent-grid { grid-template-columns: 1fr; gap: 60px; }
      .ai-feature-cards { grid-template-columns: repeat(2, 1fr); }
      .agent-content h2, .robotics-content h2 { font-size: 42px; }
    }

    @media (max-width: 768px) {
      .container { padding: 0 24px; }
      .nav-content { padding: 20px 24px; flex-wrap: wrap; }
      .nav-links { display: none; }
      .hero { padding: 160px 0 100px; }
      .hero h2 { font-size: 42px; }
      .hero-lead { font-size: 18px; }
      .services-grid { grid-template-columns: 1fr; gap: 24px; }
      .metrics { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr; gap: 32px; }
      .cases-grid { grid-template-columns: 1fr; }
      .section-title { font-size: 38px; }
      .cta-box { padding: 60px 40px; }
      .cta-box h2 { font-size: 38px; }
      .footer-grid { grid-template-columns: 1fr; gap: 40px; }
      .ai-feature-cards { grid-template-columns: 1fr; }
      .trust-bar { gap: 24px; }
      .robotics-visual, .agent-visual { height: 400px; }
      .robotics-content h2, .agent-content h2 { font-size: 36px; }
      .robotics-features, .agent-features { grid-template-columns: 1fr; }
      .agent-content h2, .pricing-card h3 { white-space: normal; }
    }

    .fade-in {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .loading-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--gold-primary), var(--cyan-glow));
      z-index: 99999;
      transition: width 0.3s ease;
    }

  /* أضف هذه القواعد لتحسين Core Web Vitals */

  /* تحسين LCP (Largest Contentful Paint) */
  .hero h2 {
    content-visibility: auto;
    contain-intrinsic-size: 400px;
  }

  /* تحسين CLS (Cumulative Layout Shift) */
  .ai-visual, .robotics-visual, .agent-visual {
    aspect-ratio: 1 / 1;
  }

  /* تحسين FID (First Input Delay) */
  button, a, .btn {
    touch-action: manipulation;
  }

  /* تحسين loading للصور */
  img {
    loading: lazy;
  }

/* RPA Visual Container */
.rpa-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Central RPA Hub */
.rpa-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.hub-core {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #0a0f1a, #162038);
  border: 3px solid rgba(0, 212, 255, 0.5);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 
    0 0 40px rgba(0, 212, 255, 0.4),
    inset 0 0 30px rgba(0, 212, 255, 0.1);
  animation: hub-float 4s ease-in-out infinite;
}

.hub-pulse {
  position: absolute;
  inset: -15px;
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 24px;
  animation: hub-pulse 2s ease-out infinite;
}

@keyframes hub-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

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

.hub-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.8));
  animation: hub-icon-rotate 8s linear infinite;
}

@keyframes hub-icon-rotate {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(10deg) scale(1.1);
  }
}

.hub-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 50%;
  animation: ring-rotate 20s linear infinite;
}

.hub-ring::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--cyan-glow);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--cyan-glow);
}

.hub-ring.ring-2 {
  width: 220px;
  height: 220px;
  animation: ring-rotate 15s linear infinite reverse;
  border-color: rgba(212, 175, 55, 0.2);
}

.hub-ring.ring-2::before {
  background: var(--gold-primary);
  box-shadow: 0 0 15px var(--gold-primary);
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
}

@keyframes ring-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Input Documents Layer */
.input-layer {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 5;
}

.rpa-document {
  width: 70px;
  height: 90px;
  background: linear-gradient(135deg, rgba(22, 32, 56, 0.9), rgba(10, 15, 26, 0.95));
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  padding: 12px 10px;
  position: relative;
  animation: doc-float 3s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.rpa-document.doc-1 {
  animation-delay: 0s;
}

.rpa-document.doc-2 {
  animation-delay: 0.5s;
}

.rpa-document.doc-3 {
  animation-delay: 1s;
}

@keyframes doc-float {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(5px) translateY(-5px);
  }
}

.doc-icon {
  font-size: 24px;
  text-align: center;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
}

.doc-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-lines span {
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.5), transparent);
  border-radius: 1px;
  animation: line-scan 2s ease-in-out infinite;
}

.doc-lines span:nth-child(1) {
  width: 80%;
}

.doc-lines span:nth-child(2) {
  width: 100%;
  animation-delay: 0.3s;
}

.doc-lines span:nth-child(3) {
  width: 60%;
  animation-delay: 0.6s;
}

@keyframes line-scan {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Processing Steps */
.rpa-steps {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 60px;
  z-index: 8;
}

.rpa-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: step-appear 1s ease-out forwards;
  opacity: 0;
}

.rpa-step.step-1 {
  animation-delay: 0.5s;
}

.rpa-step.step-2 {
  animation-delay: 1s;
}

.rpa-step.step-3 {
  animation-delay: 1.5s;
}

@keyframes step-appear {
  to {
    opacity: 1;
  }
}

.step-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.1));
  border: 2px solid rgba(0, 212, 255, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  animation: step-pulse 2s ease-in-out infinite;
}

@keyframes step-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
  }
}

.step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan-glow);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Output Systems Layer */
.output-layer {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 5;
}

.rpa-system {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(22, 32, 56, 0.9), rgba(10, 15, 26, 0.95));
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: sys-float 3s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.rpa-system.sys-1 {
  animation-delay: 0.2s;
}

.rpa-system.sys-2 {
  animation-delay: 0.7s;
}

.rpa-system.sys-3 {
  animation-delay: 1.2s;
}

@keyframes sys-float {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-5px) translateY(-5px);
  }
}

.sys-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

.sys-status {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: var(--green-success);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--green-success);
  animation: status-blink 2s ease-in-out infinite;
}

@keyframes status-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Data Particles */
.data-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--cyan-glow);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan-glow);
  animation: particle-flow 4s ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0;
}

@keyframes particle-flow {
  0% {
    opacity: 0;
    left: 15%;
    top: calc(20% + var(--path) * 30%);
  }
  25% {
    opacity: 1;
  }
  50% {
    left: 50%;
    top: 50%;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 85%;
    top: calc(20% + var(--path) * 30%);
  }
}

/* Connection Lines */
.rpa-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.connection-line {
  stroke-dasharray: 5, 5;
  animation: dash-flow 2s linear infinite;
}

.connection-line.line-1 {
  animation-delay: 0s;
}

.connection-line.line-2 {
  animation-delay: 0.3s;
}

.connection-line.line-3 {
  animation-delay: 0.6s;
}

.connection-line.line-4 {
  animation-delay: 0.9s;
}

.connection-line.line-5 {
  animation-delay: 1.2s;
}

.connection-line.line-6 {
  animation-delay: 1.5s;
}

@keyframes dash-flow {
  to {
    stroke-dashoffset: -10;
  }
}

/* Performance Metrics */
.rpa-metrics {
  position: absolute;
  top: 10%;
  right: 10%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 15;
}

.metric-badge {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05));
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2);
  animation: badge-glow-pulse 3s ease-in-out infinite;
}

@keyframes badge-glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2);
  }
  50% {
    box-shadow: 0 4px 24px rgba(0, 212, 255, 0.4);
  }
}

.metric-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--cyan-glow);
  font-family: 'Playfair Display', serif;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.metric-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(248, 249, 251, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .rpa-hub .hub-core {
    width: 90px;
    height: 90px;
  }
  
  .hub-icon {
    font-size: 36px;
  }
  
  .rpa-document {
    width: 50px;
    height: 70px;
  }
  
  .rpa-system {
    width: 50px;
    height: 50px;
  }
  
  .rpa-steps {
    gap: 30px;
    bottom: 8%;
  }
  
  .step-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .rpa-metrics {
    top: 5%;
    right: 5%;
  }
  
  .metric-badge {
    padding: 8px 12px;
  }
  
  .metric-value {
    font-size: 14px;
  }
}