:root { font-size: 87.5%; } /* 1rem = 14px — proportional font scale */
body { font-size: 14px; } /* override style.css 16px */

.site-nav .logo .nav-brand-text {
  margin-left: 0;
  font-size: 18px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
  white-space: nowrap;
}

.site-nav .site-navigation .site-menu > li > a {
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: none;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

@media (min-width: 992px) {
  .site-nav .site-navigation {
    justify-content: flex-start;
  }

  .site-nav .site-navigation .site-menu {
    margin-left: 290px;
    white-space: nowrap;
  }
}

.fresh-hero {
  padding: 40px 0 100px !important;
}

.fresh-hero .fresh-title {
  text-transform: none;
  font-size: clamp(2.8rem, 6.2vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
}

.fresh-hero .fresh-description {
  font-size: 1.15rem !important;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.hero-buttons .btn {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-explore-qdt {
  background: linear-gradient(135deg, #00f2fe 0%, #0fa3e8 100%);
  color: #ffffff;
}

.btn-explore-qdt:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 242, 254, 0.4);
  color: #ffffff;
  text-decoration: none;
}

.btn-applications {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-applications:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 242, 254, 0.8);
  color: #00f2fe;
  text-decoration: none;
}

/* Block 1 from index.html */
/* Home page domain preview card hover effects */
    .domain-preview-card {
      transition: all 0.4s ease;
    }

    .domain-preview-card:hover {
      transform: translateY(-8px);
    }

    /* Domain-specific hover glows - Four Domains Preview Section */
    .domain-preview-card:has(.uil-brain):hover {
      box-shadow: 0 25px 80px rgba(0, 242, 254, 0.7);
      border-color: rgba(0, 242, 254, 0.8) !important;
      background: rgba(0, 242, 254, 0.1) !important;
    }

    .domain-preview-card:has(.uil-dna):hover {
      box-shadow: 0 25px 80px rgba(0, 230, 118, 0.7);
      border-color: rgba(0, 230, 118, 0.8) !important;
      background: rgba(0, 230, 118, 0.1) !important;
    }

    .domain-preview-card:has(.uil-chart-line):hover {
      box-shadow: 0 25px 80px rgba(217, 245, 0, 0.7);
      border-color: rgba(217, 245, 0, 0.8) !important;
      background: rgba(217, 245, 0, 0.1) !important;
    }

    .domain-preview-card:has(.uil-atom):hover {
      box-shadow: 0 25px 80px rgba(255, 0, 255, 0.7);
      border-color: rgba(255, 0, 255, 0.8) !important;
      background: rgba(255, 0, 255, 0.1) !important;
    }

    /* Real-World Impact cards hover effects */
    .impact-card-cyan {
      transition: all 0.4s ease;
    }

    .impact-card-cyan:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(0, 242, 254, 0.7);
      border-color: rgba(0, 242, 254, 0.8) !important;
      background: rgba(0, 242, 254, 0.1) !important;
    }

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

    .impact-card-green:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(0, 230, 118, 0.7);
      border-color: rgba(0, 230, 118, 0.8) !important;
      background: rgba(0, 230, 118, 0.1) !important;
    }

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

    .impact-card-lime:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(217, 245, 0, 0.7);
      border-color: rgba(217, 245, 0, 0.8) !important;
      background: rgba(217, 245, 0, 0.1) !important;
    }

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

    .impact-card-orange:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(255, 0, 255, 0.7);
      border-color: rgba(255, 0, 255, 0.8) !important;
      background: rgba(255, 0, 255, 0.1) !important;
    }

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

    .impact-card-magenta:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(255, 0, 255, 0.7);
      border-color: rgba(255, 0, 255, 0.8) !important;
      background: rgba(255, 0, 255, 0.1) !important;
    }

    /* Technology Foundation card hover */
    .tech-foundation-card {
      transition: all 0.4s ease;
    }

    .tech-foundation-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(139, 92, 246, 0.7);
      border-color: rgba(139, 92, 246, 0.8) !important;
      background: rgba(139, 92, 246, 0.1) !important;
    }

    /* Button hover effects */
    .domain-preview-card .btn:hover {
      transform: scale(1.08);
      box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5);
    }

    /* CTA button enhanced glow */
    .cta-primary-glow:hover {
      box-shadow: 0 15px 50px rgba(139, 92, 246, 0.8);
      transform: translateY(-3px);
    }

    /* Why Quantum Digital Twins - Key Advantages card hover */
    .why-qdt-card {
      transition: all 0.4s ease;
    }

    .why-qdt-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 80px rgba(139, 92, 246, 0.7);
      border-color: rgba(139, 92, 246, 0.8) !important;
      background: rgba(139, 92, 246, 0.1) !important;
    }

/* Block 2 from index.html */
@media (max-width: 768px) {
          .timeline-nodes {
            flex-direction: column !important;
            gap: 60px;
          }
          .timeline-line {
            left: 50% !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 2px !important;
            height: auto !important;
            right: auto !important;
            transform: translateX(-50%) !important;
          }
          .timeline-glow-line {
            display: none !important;
          }
          .timeline-node {
            width: 100%;
          }
          .node-circle:hover {
            transform: scale(1.15) !important;
          }
        }