/* ==========================================================================
   TRUSTNGO — Public website SaaS theme (overlay, safe to load on every
   public page after its own styles). Fonts, glass navbar, soft sections,
   rounded cards and animated gradient buttons.
   ========================================================================== */
:root { --ease:cubic-bezier(.16,1,.3,1); }
html { scroll-behavior:smooth; }
body { font-family:'Plus Jakarta Sans','Poppins',system-ui,sans-serif !important; color:#0f1411; background:#f6fbf7; }

/* glass navbar */
nav#main-nav, nav.fixed {
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 30px rgba(15,20,17,.08) !important;
}
nav a { transition:color .2s, transform .25s var(--ease); }
nav .desktop-menu a:hover { color:#16a34a; transform:translateY(-1px); }

/* soft colourful section backdrops */
section.bg-gray-100, section.bg-gray-50 { background:linear-gradient(135deg,#ecfdf3 0%,#f7fee7 55%,#fffbeb 100%) !important; }
section.bg-gradient-to-b { background:linear-gradient(180deg,#ecfdf3,#ffffff) !important; }

/* cards */
.rounded-lg, .rounded-xl { border-radius:20px !important; }
.shadow-md, .shadow-lg, .shadow-xl {
  box-shadow:0 8px 24px rgba(15,20,17,.08) !important;
}
.bg-white.rounded-lg, .bg-white.rounded-xl, .bg-white.rounded-2xl {
  border:1px solid rgba(15,20,17,.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bg-white.rounded-lg:hover, .bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover {
  transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,20,17,.14) !important;
}
img.rounded-lg, img.rounded-xl { box-shadow:0 18px 40px rgba(15,20,17,.15); }

/* accent remap: orange/blue/indigo -> brand green */
.bg-orange-500,.bg-orange-600,.bg-blue-600,.bg-blue-500,.bg-indigo-600 { background-image:linear-gradient(135deg,#22c55e,#16a34a) !important; background-color:#16a34a !important; }
.hover\:bg-orange-600:hover,.hover\:bg-orange-700:hover,.hover\:bg-blue-700:hover { background-color:#15803d !important; }
.text-orange-500,.text-orange-600,.text-blue-600,.text-indigo-600 { color:#16a34a !important; }
.border-orange-500,.border-blue-500 { border-color:#22c55e !important; }
.swiper-pagination-bullet-active { background-color:#22c55e !important; }

/* animated pill buttons (any tailwind button/link styled as CTA) */
a[class*="bg-orange"], a[class*="bg-blue-6"], a[class*="bg-indigo-6"], a[class*="bg-green-"],
button[class*="bg-orange"], button[class*="bg-blue-6"], button[class*="bg-indigo-6"], button[class*="bg-green-"], .btn {
  position:relative; overflow:hidden; isolation:isolate; border-radius:999px !important; font-weight:700;
  box-shadow:0 8px 20px rgba(34,197,94,.38);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s !important;
}
a[class*="bg-orange"]::before, a[class*="bg-blue-6"]::before, a[class*="bg-indigo-6"]::before, a[class*="bg-green-"]::before,
button[class*="bg-orange"]::before, button[class*="bg-blue-6"]::before, button[class*="bg-indigo-6"]::before, button[class*="bg-green-"]::before, .btn::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
a[class*="bg-orange"]:hover::before, a[class*="bg-blue-6"]:hover::before, a[class*="bg-indigo-6"]:hover::before, a[class*="bg-green-"]:hover::before,
button[class*="bg-orange"]:hover::before, button[class*="bg-blue-6"]:hover::before, button[class*="bg-indigo-6"]:hover::before, button[class*="bg-green-"]:hover::before, .btn:hover::before { transform:translateX(120%); }
a[class*="bg-orange"]:hover, a[class*="bg-blue-6"]:hover, a[class*="bg-indigo-6"]:hover, a[class*="bg-green-"]:hover,
button[class*="bg-orange"]:hover, button[class*="bg-blue-6"]:hover, button[class*="bg-indigo-6"]:hover, button[class*="bg-green-"]:hover, .btn:hover {
  transform:translateY(-3px); filter:saturate(1.15); box-shadow:0 14px 28px rgba(22,163,74,.45);
}
a[class*="bg-orange"]:active, button[class*="bg-orange"]:active, .btn:active { transform:scale(.96); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.5rem; border:0; text-decoration:none; color:#fff; }
.btn-primary { background:linear-gradient(135deg,#22c55e,#16a34a); }
.btn-purple { background:linear-gradient(135deg,#a78bfa,#8b5cf6); box-shadow:0 8px 20px rgba(139,92,246,.35); }
.btn-orange { background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 8px 20px rgba(245,158,11,.35); }
.btn-pink   { background:linear-gradient(135deg,#f472b6,#ec4899); box-shadow:0 8px 20px rgba(236,72,153,.35); }
.btn-ghost  { background:#fff; color:#0f1411; border:1px solid #e5e9e6; box-shadow:none; }
.btn-ghost:hover { color:#16a34a; border-color:#22c55e; }
.btn-arrow::after { content:"\2192"; transition:transform .3s var(--ease); }
.btn-arrow:hover::after { transform:translateX(5px); }
.btn-pulse { animation:ui-pulse 2.2s infinite; }
@keyframes ui-pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 70%{box-shadow:0 0 0 16px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

/* scroll-in utility: add class="reveal" to any block */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* forms (contact / login / registration) */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {
  border-radius:12px; border:1px solid #e5e9e6; transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.16); }

footer { background:linear-gradient(135deg,#0b0f0c,#14301f) !important; }
::-webkit-scrollbar-thumb { background:rgba(22,163,74,.4); border-radius:99px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .reveal{opacity:1;transform:none} }