<<<<<<< HEAD
  * { font-family: 'Inter', sans-serif; }
    body { background: #f8fafd; padding-top: 84px; } /* avoid content hiding under fixed navbar */
    
    /* ----- STICKY NAVBAR (always fixed) ----- */
    .navbar-sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1090; /* above most things */
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 8px 20px rgba(0,20,40,0.06);
      border-bottom: 1px solid rgba(120,150,200,0.15);
      transition: background 0.2s;
    }
    /* Brand / logo */
    .navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: #1d2c4f !important; }
    .nav-link-custom {
      font-weight: 500;
      color: #1d3a5c !important;
      margin: 0 0.5rem;
      border-radius: 40px;
      transition: background 0.2s;
    }
    .nav-link-custom:hover {
      background: rgba(55, 95, 145, 0.08);
      color: #0d2d4f !important;
    }
    
    /* ---- mobile offcanvas customisation (slide from left, backdrop) ---- */
    .offcanvas.offcanvas-start {
      width: 280px;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(10px);
      border-right: none;
      box-shadow: 8px 0 30px rgba(0,20,40,0.15);
    }
    .offcanvas .nav-link-custom {
      margin: 0.2rem 1rem;
      padding: 0.75rem 1.2rem;
      font-size: 1.1rem;
      border-radius: 40px;
    }
    .offcanvas .nav-link-custom i { width: 1.8rem; }
    /* close button on left panel */
    .offcanvas .btn-close {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }
    /* tap anywhere outside to close — is default BS behaviour, we keep that */
    
    /* soft pastel background with playful waves */
    .hero-wave {
      background: linear-gradient(145deg, #e1eef7 0%, #f5f9ff 100%);
      position: relative;
      overflow: hidden;
    }
    .hero-wave::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #fff 80%);
      clip-path: polygon(0 70%, 100% 0%, 100% 100%, 0% 100%);
      opacity: 0.4;
    }
    .tool-card {
      border: none;
      border-radius: 32px;
      background: rgba(255,255,255,0.75);
      backdrop-filter: blur(8px);
      box-shadow: 0 20px 40px -14px rgba(18,45,84,0.15), 0 4px 14px rgba(0,20,40,0.05);
      transition: transform 0.2s ease, box-shadow 0.25s;
      height: 100%;
    }
    .tool-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 48px -18px rgba(18,75,120,0.25);
      background: white;
    }
    .tool-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #ffd966, #ffe9b0);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2d3f66;
      font-size: 2rem;
      margin-bottom: 1.2rem;
    }
    .tool-card:nth-child(2) .tool-icon { background: linear-gradient(145deg, #b6e2f0, #d5f0fa); }
    .tool-card:nth-child(3) .tool-icon { background: linear-gradient(145deg, #c5d1fa, #e3eafe); }
    .tool-card:nth-child(4) .tool-icon { background: linear-gradient(145deg, #fbc6cf, #ffe2e8); }
    .tool-card:nth-child(5) .tool-icon { background: linear-gradient(145deg, #bce5cf, #dcf5e6); }
    .tool-card:nth-child(6) .tool-icon { background: linear-gradient(145deg, #fedba5, #fff0cf); }
    .btn-pill {
      border-radius: 60px;
      padding: 0.6rem 1.8rem;
      font-weight: 500;
      background: white;
      border: 1px solid rgba(0,40,80,0.1);
      color: #1f3a5f;
      box-shadow: 0 4px 10px rgba(0, 30, 60, 0.04);
    }
    .btn-pill:hover { background: #f0f7ff; border-color: #7fa9d0; }
    .gradient-btn {
      background: linear-gradient(145deg, #1f3a5f, #142b44);
      border: none;
      color: white;
      border-radius: 60px;
      padding: 0.7rem 2.2rem;
      font-weight: 600;
      transition: all 0.2s;
      box-shadow: 0 12px 18px -8px rgba(20,55,100,0.3);
    }
    .gradient-btn:hover {
      background: linear-gradient(145deg, #254b78, #1a3457);
      color: white;
      transform: scale(1.02);
    }
    .badge-soft {
      background: rgba(90, 120, 180, 0.12);
      color: #1f3a5f;
      font-weight: 500;
      border-radius: 100px;
      padding: 0.4rem 1.2rem;
    }
    /* new CTA style (replaces drag-drop) */
    .cta-block {
      background: white;
      border-radius: 60px;
      padding: 1rem 2rem;
      display: inline-flex;
      align-items: center;
      gap: 1.5rem;
      box-shadow: 0 16px 32px -12px rgba(18, 75, 120, 0.2);
      border: 1px solid rgba(140, 180, 240, 0.3);
      flex-wrap: wrap;
    }
    .cta-block .btn {
      box-shadow: 0 8px 16px -6px #1f3a5f40;
    }
    footer { background: #1b2b44; color: #cedcea; }
    .footer-link { color: #b3cef0; text-decoration: none; font-size: 0.95rem; }
    .footer-link:hover { color: white; }
    .popular-tools .badge { background: white; color: #1b2b44; font-weight: 500; }
    /* small offset for fixed navbar */
    @media (max-width: 991px) {
      body { padding-top: 70px; }
    }
=======
  * { font-family: 'Inter', sans-serif; }
    body { background: #f8fafd; padding-top: 84px; } /* avoid content hiding under fixed navbar */
    
    /* ----- STICKY NAVBAR (always fixed) ----- */
    .navbar-sticky {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1090; /* above most things */
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 8px 20px rgba(0,20,40,0.06);
      border-bottom: 1px solid rgba(120,150,200,0.15);
      transition: background 0.2s;
    }
    /* Brand / logo */
    .navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: #1d2c4f !important; }
    .nav-link-custom {
      font-weight: 500;
      color: #1d3a5c !important;
      margin: 0 0.5rem;
      border-radius: 40px;
      transition: background 0.2s;
    }
    .nav-link-custom:hover {
      background: rgba(55, 95, 145, 0.08);
      color: #0d2d4f !important;
    }
    
    /* ---- mobile offcanvas customisation (slide from left, backdrop) ---- */
    .offcanvas.offcanvas-start {
      width: 280px;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(10px);
      border-right: none;
      box-shadow: 8px 0 30px rgba(0,20,40,0.15);
    }
    .offcanvas .nav-link-custom {
      margin: 0.2rem 1rem;
      padding: 0.75rem 1.2rem;
      font-size: 1.1rem;
      border-radius: 40px;
    }
    .offcanvas .nav-link-custom i { width: 1.8rem; }
    /* close button on left panel */
    .offcanvas .btn-close {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }
    /* tap anywhere outside to close — is default BS behaviour, we keep that */
    
    /* soft pastel background with playful waves */
    .hero-wave {
      background: linear-gradient(145deg, #e1eef7 0%, #f5f9ff 100%);
      position: relative;
      overflow: hidden;
    }
    .hero-wave::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(135deg, rgba(255,255,255,0) 0%, #fff 80%);
      clip-path: polygon(0 70%, 100% 0%, 100% 100%, 0% 100%);
      opacity: 0.4;
    }
    .tool-card {
      border: none;
      border-radius: 32px;
      background: rgba(255,255,255,0.75);
      backdrop-filter: blur(8px);
      box-shadow: 0 20px 40px -14px rgba(18,45,84,0.15), 0 4px 14px rgba(0,20,40,0.05);
      transition: transform 0.2s ease, box-shadow 0.25s;
      height: 100%;
    }
    .tool-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 48px -18px rgba(18,75,120,0.25);
      background: white;
    }
    .tool-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, #ffd966, #ffe9b0);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2d3f66;
      font-size: 2rem;
      margin-bottom: 1.2rem;
    }
    .tool-card:nth-child(2) .tool-icon { background: linear-gradient(145deg, #b6e2f0, #d5f0fa); }
    .tool-card:nth-child(3) .tool-icon { background: linear-gradient(145deg, #c5d1fa, #e3eafe); }
    .tool-card:nth-child(4) .tool-icon { background: linear-gradient(145deg, #fbc6cf, #ffe2e8); }
    .tool-card:nth-child(5) .tool-icon { background: linear-gradient(145deg, #bce5cf, #dcf5e6); }
    .tool-card:nth-child(6) .tool-icon { background: linear-gradient(145deg, #fedba5, #fff0cf); }
    .btn-pill {
      border-radius: 60px;
      padding: 0.6rem 1.8rem;
      font-weight: 500;
      background: white;
      border: 1px solid rgba(0,40,80,0.1);
      color: #1f3a5f;
      box-shadow: 0 4px 10px rgba(0, 30, 60, 0.04);
    }
    .btn-pill:hover { background: #f0f7ff; border-color: #7fa9d0; }
    .gradient-btn {
      background: linear-gradient(145deg, #1f3a5f, #142b44);
      border: none;
      color: white;
      border-radius: 60px;
      padding: 0.7rem 2.2rem;
      font-weight: 600;
      transition: all 0.2s;
      box-shadow: 0 12px 18px -8px rgba(20,55,100,0.3);
    }
    .gradient-btn:hover {
      background: linear-gradient(145deg, #254b78, #1a3457);
      color: white;
      transform: scale(1.02);
    }
    .badge-soft {
      background: rgba(90, 120, 180, 0.12);
      color: #1f3a5f;
      font-weight: 500;
      border-radius: 100px;
      padding: 0.4rem 1.2rem;
    }
    /* new CTA style (replaces drag-drop) */
    .cta-block {
      background: white;
      border-radius: 60px;
      padding: 1rem 2rem;
      display: inline-flex;
      align-items: center;
      gap: 1.5rem;
      box-shadow: 0 16px 32px -12px rgba(18, 75, 120, 0.2);
      border: 1px solid rgba(140, 180, 240, 0.3);
      flex-wrap: wrap;
    }
    .cta-block .btn {
      box-shadow: 0 8px 16px -6px #1f3a5f40;
    }
    footer { background: #1b2b44; color: #cedcea; }
    .footer-link { color: #b3cef0; text-decoration: none; font-size: 0.95rem; }
    .footer-link:hover { color: white; }
    .popular-tools .badge { background: white; color: #1b2b44; font-weight: 500; }
    /* small offset for fixed navbar */
    @media (max-width: 991px) {
      body { padding-top: 70px; }
    }
>>>>>>> ba173a6eb99c5f188029a3dfef33c1ec50f50ca4