/* ================================================
   HERO SECTION
================================================ */

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: var(--gradient-hero);
    }
    .hero-bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(15,112,183,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,112,183,0.07) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    }
    .hero-content {
      position: relative;
      z-index: 10;
      padding-top: 7rem;
      padding-bottom: 5rem;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      background: var(--primary-10);
      border: 1px solid var(--primary-20);
      border-radius: var(--radius-full);
      padding: 0.375rem 1rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--color-blue-primary);
      letter-spacing: 0.04em;
      margin-bottom: 2rem;
    }
    .hero-eyebrow-dot {
      width: 8px; height: 8px;
      background: var(--color-blue-primary);
      border-radius: 50%;
      animation: dotBlink 2s ease-in-out infinite;
      box-shadow: 0 0 10px var(--color-blue-primary);
    }
    @keyframes dotBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.2; }
    }
    .btn-border-sweep {
      position: relative;
      overflow: hidden;
      background: transparent !important;
      border: none !important;
      color: var(--text-primary);
      box-shadow: 0 0 20px rgba(15, 112, 183, 0.3);
      border-radius: 100px !important;
      z-index: 1;
    }
    .btn-border-sweep::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%; width: 200%; height: 200%;
      background: conic-gradient(from 0deg, transparent 60%, rgba(255,255,255,0.8) 80%, #00f0ff 100%);
      animation: spin-slow 2s linear infinite;
      z-index: -2;
    }
    .btn-border-sweep::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: var(--gradient-primary) !important;
      background-size: 200% 100% !important;
      border-radius: 100px !important;
      z-index: -1;
      transition: background-position 0.4s ease, box-shadow 0.4s ease;
    }
    .btn-border-sweep:hover::after {
      background-position: 100% 0 !important;
    }
    .btn-border-sweep:hover {
      box-shadow: 0 0 30px rgba(15, 112, 183, 0.6);
    }
    .hero-title {
      font-size: var(--text-h1);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -0.04em;
      color: var(--text-primary);
      margin-bottom: 1.5rem;
    }
    .hero-title .gradient-text {
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-subtitle {
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      font-weight: 400;
      color: var(--text-secondary);
      line-height: 1.7;
      max-width: 52ch;
      margin-bottom: 2.75rem;
    }
    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      margin-bottom: 4rem;
    }
    .hero-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      padding-top: 2.5rem;
      border-top: 1px solid var(--border-soft);
    }
    .hero-metric-value {
      font-size: 1.75rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text-primary);
      line-height: 1;
    }
    .hero-metric-label {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }
    .hero-image-frame {
      position: relative;
      border-radius: var(--radius-2xl);
      overflow: hidden;
      border: 1px solid var(--primary-20);
      box-shadow: var(--shadow-glow-lg), var(--shadow-lg);
    }
    .hero-image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-image-badge {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      right: 1.5rem;
    }
    .hero-panel-float {
      position: absolute;
      animation: float 4s ease-in-out infinite;
    }
    .hero-panel-float:nth-child(even) {
      animation-direction: reverse;
      animation-delay: -2s;
    }