:root {
      --bg-navy: #0a1c2e;
      --bg-navy-dark: #071421;
      --accent-gold: #d4a017;
      --text-light: #f7f7fa;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
      background: var(--bg-navy);
      color: var(--text-light);
    }

    a {
      text-decoration: none;
    }

    /* Navbar */
    .navbar {
      background: rgba(7, 20, 33, 0.98);
      backdrop-filter: blur(10px);
    }

    .navbar-brand span {
      font-weight: 600;
      font-size: 1rem;
    }

    .nav-link {
      color: #d7e0ee !important;
      font-size: 0.95rem;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--accent-gold) !important;
    }

    /* Logo */
    .logo-hexagon {
      width: 40px;
      height: 40px;
    }

    /* Hero */
    .hero {
      min-height: 85vh;
      background: radial-gradient(circle at top left, #102949 0, #071421 55%);
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
    }

    .hero-content {
      padding: 120px 0 80px;
    }

    .hero-heading {
      font-size: clamp(2.4rem, 3.2vw, 3.4rem);
      font-weight: 700;
      color: #ffffff;
    }

    .hero-subtitle {
      font-size: 1.1rem;
      color: #c9d3e8;
      max-width: 540px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 0.85rem;
      border: 1px solid rgba(212, 160, 23, 0.4);
      margin-bottom: 18px;
      color: #f2e2b2;
    }

    .hero-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-gold);
      box-shadow: 0 0 12px rgba(212, 160, 23, 0.8);
    }

/* Container for the 3 circles */
.hero-mini-circles {
    position: absolute;
    bottom: 25%; /* Tweak based on your layout */
    left: 8%;
    display: flex;
    gap: 22px;
}

/* Individual circle — matched precisely to your existing big circle styling */
.mini-circle {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    border: 2px solid #f1c752; /* same gold */
    background: radial-gradient(circle at 30% 30%, #132338, #0b1a2b 85%);
    color: #f5f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    text-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

    .btn-cta {
      background: var(--accent-gold);
      color: #1b2436;
      border-radius: 999px;
      padding: 10px 26px;
      font-weight: 600;
      border: none;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    }

    .btn-cta:hover {
      background: #f1c752;
      color: #000;
    }

    .btn-secondary-ghost {
      border-radius: 999px;
      padding: 10px 22px;
      border: 1px solid rgba(215, 224, 238, 0.4);
      color: #d7e0ee;
    }

    .btn-secondary-ghost:hover {
      border-color: var(--accent-gold);
      color: var(--accent-gold);
    }

    .hero-meta {
      margin-top: 24px;
      font-size: 0.9rem;
      color: #a9b5d2;
    }

    .hero-stat {
      font-weight: 600;
      color: var(--accent-gold);
    }

    /* Hero Illustration */
    .hero-visual-wrapper {
      position: relative;
      min-height: 320px;
    }

    .hero-wave {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0% 0%, #d4a01733 0, transparent 55%),
        radial-gradient(circle at 100% 0%, #1a3e7f 0, transparent 55%);
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    }

    .hero-wave-layer {
      position: absolute;
      width: 160%;
      left: -30%;
      height: 140px;
      border-radius: 50%;
      filter: blur(1px);
      opacity: 0.6;
    }

    .hero-wave-layer.wave-1 {
      bottom: -10px;
      background: linear-gradient(90deg, #273e7a, #d4a017);
    }

    .hero-wave-layer.wave-2 {
      bottom: 60px;
      background: linear-gradient(90deg, #0a1c2e, #273e7a);
      opacity: 0.5;
    }

    .hero-wave-layer.wave-3 {
      bottom: 120px;
      background: linear-gradient(90deg, #d4a017, #f1c752);
      opacity: 0.25;
    }

    .hero-orbit {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 1px solid rgba(212, 160, 23, 0.6);
      top: 16%;
      right: 12%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fbe7ac;
      font-size: 0.75rem;
      text-align: center;
      padding: 6px;
      background: radial-gradient(circle at 30% 0%, #f1c75233, #071421);
    }

    .hero-pill {
      position: absolute;
      bottom: 14%;
      left: 9%;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.8rem;
      background: rgba(7, 20, 33, 0.85);
      border: 1px solid rgba(212, 160, 23, 0.5);
      color: #f7f7fa;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-pill span {
      color: var(--accent-gold);
      font-weight: 600;
    }

      /* --- CLEAN PREMIUM LOGO STRIP --- */
      .logo-strip {
          background: #0b1a2b;
          padding: 70px 0;
          border-top: 1px solid rgba(255,255,255,0.06);
          border-bottom: 1px solid rgba(255,255,255,0.06);
      }

      /* Title in gold matching your theme */
      .logo-title {
          font-size: 0.95rem;
          font-weight: 500;
          letter-spacing: 0.06em;
          color: #f1c752;
          margin-bottom: 18px;
          text-transform: uppercase;
          opacity: 0.9;
      }

      /* Each of the 4 columns */
      .logo-group {
          flex: 1;
          min-width: 260px;
          text-align: center;
      }

      /* PERFECT GRID: 2 logos per row always */
      .logo-list {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr);
          gap: 18px 24px;
          justify-items: center;
      }

      .logo-card {
          width: 130px;
          height: 70px;
          background: white; /* ← white background */
          border-radius: 10px; /* optional: rounded corners */
          padding: 10px; /* keeps logos from touching edges */
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 8px rgba(0,0,0,0.06); /* subtle depth */
      }

          /* Uniform logo container (the magic fix) */
          .logo-list img,
          .logo-generic {
              width: 130px;
              height: 70px;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          /* Real logo images */
          .logo-list img {
              max-width: 100%;
              max-height: 60px;
              object-fit: contain;
              filter: brightness(1.15);
              opacity: 0.9;
              transition: 0.25s ease;
          }

              /* Hover glow */
              .logo-list img:hover {
                  opacity: 1;
                  filter: brightness(1.35);
                  transform: translateY(-2px);
              }

      /* +80 more badge styled */
      .logo-generic {
          border: 1px solid rgba(212,160,23,0.45);
          border-radius: 999px;
          color: #f1c752;
          font-size: 0.9rem;
          padding: 0 14px;
          line-height: 70px;
          transition: 0.25s;
      }

          /* Slight hover effect on +80 more */
          .logo-generic:hover {
              background: rgba(212,160,23,0.1);
              border-color: rgba(212,160,23,0.7);
          }


      /* NEW: 2 columns for logos on large screens */
      .logo-list {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 16px 20px; /* vertical | horizontal */
          justify-items: center;
      }

          /* consistent logo size */
          .logo-list img {
              width: 110px;
              height: auto;
              object-fit: contain;
              opacity: 0.9;
              transition: opacity 0.2s ease-out;
          }

              .logo-list img:hover {
                  opacity: 1;
              }

      .logo-generic {
          font-size: 0.9rem;
          padding: 6px 14px;
          border-radius: 999px;
          border: 1px solid rgba(212,160,23,0.4);
          color: #f1c752;
      }


      /* Toggle buttons */
      .toggle-group .toggle-btn {
          background: transparent;
          border: 1px solid rgba(241,199,82,0.5);
          color: #f1c752;
          padding: 6px 18px;
          border-radius: 999px;
          margin: 0 6px;
          transition: all .25s ease;
          font-size: 0.9rem;
      }

          .toggle-group .toggle-btn.active {
              background: #f1c752;
              color: #0a1c2e;
              border-color: #f1c752;
          }

      /* Smooth slide animation */
      .logo-category {
          opacity: 0;
          transform: translateY(30px);
          transition: opacity .5s ease, transform .5s ease;
      }

          .logo-category.active {
              opacity: 1;
              transform: translateY(0);
          }

      /* Hide inactive categories */
      .logo-category {
          display: none;
      }

          .logo-category.active {
              display: block;
          }

    /* Section base */
    section {
      padding: 80px 0;
    }

    .section-title {
      font-size: 1.9rem;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .section-subtitle {
      font-size: 1rem;
      color: #a9b5d2;
      max-width: 620px;
    }

    .section-divider {
      width: 80px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        var(--accent-gold),
        rgba(212, 160, 23, 0)
      );
      margin-bottom: 16px;
    }

    /* Cards */
    .feature-card {
      background: linear-gradient(145deg, #0d243b, #071421);
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.03);
      padding: 24px;
      height: 100%;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    }

    .feature-card h5 {
      color: #f5f5ff;
      margin-bottom: 8px;
    }

    .feature-card p {
      font-size: 0.95rem;
      color: #b9c5de;
      margin-bottom: 0;
    }

    .badge-pill {
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 0.75rem;
      background: rgba(212, 160, 23, 0.1);
      border: 1px solid rgba(212, 160, 23, 0.5);
      color: #f1c752;
      margin-bottom: 10px;
      display: inline-block;
    }

    /* Experience timeline-ish */
    .experience-item {
      border-left: 2px solid rgba(212, 160, 23, 0.4);
      padding-left: 18px;
      margin-bottom: 24px;
    }

    .experience-item:last-child {
      margin-bottom: 0;
    }

    .experience-org {
      font-weight: 600;
      color: #f5f5ff;
    }

    .experience-role {
      font-size: 0.9rem;
      color: #f1c752;
    }

    /* Testimonials */
    .testimonial-card {
      background: linear-gradient(145deg, #0d2236, #071421);
      border-radius: 16px;
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.95rem;
      color: #dbe2f4;
      position: relative;
      overflow: hidden;
    }

    .testimonial-card::before {
      content: "“";
      position: absolute;
      font-size: 3.5rem;
      color: rgba(212, 160, 23, 0.2);
      top: -8px;
      left: 12px;
    }

    .testimonial-author {
      margin-top: 14px;
      font-weight: 600;
      color: #f7f7fa;
      font-size: 0.9rem;
    }

    .testimonial-role {
      font-size: 0.8rem;
      color: #c0c8dd;
    }

      .testimonial-linkedin {
          display: inline-block;
          margin-top: 10px;
      }

          .testimonial-linkedin img {
              width: 22px;
              height: 22px;
              filter: drop-shadow(0 0 4px rgba(212,160,23,0.4));
              opacity: 0.9;
              transition: opacity .2s ease, transform .2s ease;
          }

              .testimonial-linkedin img:hover {
                  opacity: 1;
                  transform: translateY(-2px);
              }

    /* Pricing */
    .pricing-card {
      background: #0b1a2b;
      border-radius: 18px;
      border: 1px solid rgba(212, 160, 23, 0.3);
      padding: 24px 22px;
      height: 100%;
      display: flex;
      flex-direction: column;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    }

    .pricing-label {
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #f1c752;
      margin-bottom: 8px;
    }

    .pricing-price {
      font-size: 1.6rem;
      font-weight: 700;
      color: #ffffff;
    }

    .pricing-period {
      font-size: 0.85rem;
      color: #b9c5de;
    }

    .pricing-features {
      margin-top: 16px;
      margin-bottom: 16px;
      padding-left: 18px;
      font-size: 0.9rem;
      color: #b9c5de;
    }

    .pricing-cta {
      margin-top: auto;
    }

    /* Blog */
    .blog-card {
      background: #0c1f33;
      border-radius: 14px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      height: 100%;
      transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
      cursor: pointer;
    }

    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    }

    .blog-title {
      font-size: 1rem;
      font-weight: 600;
      color: #f5f5ff;
    }

    .blog-meta {
      font-size: 0.78rem;
      color: #b9c5de;
      margin-top: 8px;
    }

    /* Contact */
    .contact-card {
      background: linear-gradient(145deg, #0c223a, #071421);
      border-radius: 18px;
      padding: 26px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Footer */
    footer {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding: 24px 0;
      font-size: 0.85rem;
      color: #9caac7;
    }

    @media (max-width: 991.98px) {
      .hero-content {
        padding: 100px 0 60px;
      }

      .hero {
        min-height: auto;
      }

      .hero-visual-wrapper {
        margin-top: 40px;
      }
    }

    @media (max-width: 576px) {
    body {
        padding-left: 18px;
        padding-right: 18px;
    }
}