*::before,
  *::after {
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'Cairo', sans-serif;
      color: #1C2B40;
      background: #fff;
      overflow-x: hidden;
  }

  /* ── Scroll-reveal utility ── */
  .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .65s ease, transform .65s ease;
  }

  .reveal.visible {
      opacity: 1;
      transform: translateY(0);
  }

  .reveal-delay-1 {
      transition-delay: .1s;
  }

  .reveal-delay-2 {
      transition-delay: .2s;
  }

  .reveal-delay-3 {
      transition-delay: .3s;
  }

  .reveal-delay-4 {
      transition-delay: .4s;
  }

  /* ── Gradient text ── */
  .gradient-text {
      background: linear-gradient(135deg, #1A73C8 0%, #00ACC1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  /* ── Hero background ── */
  .hero-bg {
      background:
          linear-gradient(135deg, rgba(13, 79, 139, 0.88) 0%, rgba(26, 115, 200, 0.72) 50%, rgba(0, 172, 193, 0.60) 100%),
          url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
  }

  /* ── Nav glass ── */
  .nav-glass {
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(26, 115, 200, 0.10);
  }

  /* ── Service card hover ── */
  .service-card {
      transition: transform .35s ease, box-shadow .35s ease;
  }

  .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 48px rgba(26, 115, 200, 0.16);
  }

  /* ── Stat pill ── */
  .stat-pill {
      background: linear-gradient(135deg, #1A73C8, #00ACC1);
  }

  /* ── WhatsApp float ── */
  .whatsapp-float {
      position: fixed;
      bottom: 28px;
      left: 28px;
      z-index: 999;
      animation: float 4s ease-in-out infinite;
  }

  /* ── Section divider wave ── */
  .wave-top {
      margin-top: -2px;
  }

  /* ── Testimonial card ── */
  .testi-card {
      transition: transform .3s ease, box-shadow .3s ease;
  }

  .testi-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 40px rgba(26, 115, 200, 0.14);
  }

  /* ── Input focus ── */
  .form-input:focus {
      outline: none;
      border-color: #1A73C8;
      box-shadow: 0 0 0 3px rgba(26, 115, 200, 0.12);
  }

  /* ── Custom scrollbar ── */
  ::-webkit-scrollbar {
      width: 6px;
  }

  ::-webkit-scrollbar-track {
      background: #f1f5f9;
  }

  ::-webkit-scrollbar-thumb {
      background: #1A73C8;
      border-radius: 3px;
  }

  /* ── Mobile nav ── */
  #mobile-menu {
      transition: all .3s ease;
  }

  /* ── Icon circle ── */
  .icon-circle {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #EBF5FF, #E0F7FA);
      font-size: 28px;
      margin: 0 auto 1rem;
      transition: background .3s ease, transform .3s ease;
  }

  .service-card:hover .icon-circle {
      background: linear-gradient(135deg, #1A73C8, #00ACC1);
      transform: scale(1.08);
  }

  .service-card:hover .icon-circle span {
      filter: brightness(0) invert(1);
  }

  /* ── Why-choose icon ── */
  .why-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      background: linear-gradient(135deg, #1A73C8, #00ACC1);
      flex-shrink: 0;
  }

  /* ── Stars ── */
  .stars {
      color: #F59E0B;
      letter-spacing: 2px;
  }

  /* Button pulse ring */
  .btn-primary {
      position: relative;
      overflow: hidden;
  }

  .btn-primary:focus-visible,
  a:focus-visible,
  button:focus-visible {
      outline: 2px solid #1A73C8;
      outline-offset: 4px;
  }

  .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.15);
      transform: translateX(100%);
      transition: transform .4s ease;
  }

  .btn-primary:hover::after {
      transform: translateX(-100%);
  }

  @media (max-width: 640px) {
      .hero-bg {
          background-position: 60% center;
      }
  }