/* Winngoo Pages — supplementary styling */

::selection { background: #16335f; color: #fff; }

html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #f1f3f9; }
::-webkit-scrollbar-thumb { background: #16335f; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #166f3c; }

/* Focus rings */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 0px solid #1c8a4c00;
  outline-offset: 2px;
  border-radius: 4px;
}

.focus\:ring-leaf-400:focus{
      --tw-ring-opacity: 1;
    --tw-ring-color: none !important;
}

/* Checkbox styling */
input[type="checkbox"] {
  accent-color: #16335f;
  width: 1.05rem; height: 1.05rem;
}

/* Card hover lift */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 40px -12px rgba(11,20,53,0.22); }

/* Section divider pattern */
.pattern-dots {
  background-image: radial-gradient(circle, rgba(28,138,75,0.18) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, #eef0f8 25%, #f7f8fc 37%, #eef0f8 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

/* Accordion chevron rotate */
.accordion-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.chevron { transition: transform .3s ease; }

/* Star rating */
.star-fill { color: #d9a441; fill: #d9a441; }

/* Line clamp fallback note: Tailwind v3.3+ has line-clamp built in as core utility */

/* Toast */
.toast-card { backdrop-filter: blur(6px); }

/* Custom radio pill */
.pill-radio:checked + label { background: #0b1435; color: #fff; }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 28s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

/* ---------------- Clip-path shapes ---------------- */
.clip-blob-1 { clip-path: path('M421,58 C486,101 500,224 468,306 C436,388 340,439 253,437 C166,435 63,382 30,300 C-3,218 21,107 91,52 C161,-3 258,-4 421,58 Z'); }
.clip-hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.clip-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.clip-arrow-r { clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); }
.clip-wave-bottom { clip-path: polygon(0 0, 100% 0, 100% 92%, 75% 100%, 50% 92%, 25% 100%, 0 92%); }
.clip-badge { clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 80% 100%, 20% 100%, 0% 60%, 10% 20%); }
.clip-corner-cut { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }

/* Decorative blob background shape used behind hero/section art */
.bg-blob { position: absolute; border-radius: 42% 58% 64% 36% / 45% 39% 61% 55%; }

/* Mesh gradient background utility */
.bg-mesh { background-image:
  radial-gradient(circle at 12% 18%, rgba(28,138,75,0.20), transparent 40%),
  radial-gradient(circle at 85% 12%, rgba(217,164,65,0.22), transparent 42%),
  radial-gradient(circle at 75% 85%, rgba(28,138,75,0.16), transparent 45%),
  radial-gradient(circle at 15% 90%, rgba(11,20,53,0.10), transparent 40%);
}

/* Tilt / 3D hover card */
.tilt-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; transform-style: preserve-3d; }
.tilt-card:hover { transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-6px) scale(1.015); box-shadow: 0 24px 55px -18px rgba(11,20,53,0.32); }

/* Logo marquee track (duplicated content scrolls seamlessly) */
.logo-track { display: flex; width: max-content; animation: marquee 24s linear infinite; }
.logo-track:hover { animation-play-state: paused; }

/* Animated ring / dashed orbit ring behind avatars */
.ring-orbit { position: relative; }
.ring-orbit::before {
  content: ''; position: absolute; inset: -10px; border-radius: 9999px;
  border: 2px dashed rgba(28,138,75,0.35); animation: spin 18s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Counter number style */
.counter-num { font-variant-numeric: tabular-nums; }

/* Testimonial carousel slide fade */
.tcard { transition: opacity .5s ease, transform .5s ease; }

/* Underline squiggle accent for headings */
.underline-squiggle { position: relative; display: inline-block; }
.underline-squiggle::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='8' viewBox='0 0 100 8'%3E%3Cpath d='M0 4 Q 8 0, 16 4 T 32 4 T 48 4 T 64 4 T 80 4 T 96 4' stroke='%2316335f' stroke-width='2.4' fill='none' /%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 32px 8px;
}

/* Glassmorphism panel */
.glass-panel { background: rgba(255,255,255,0.08); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.15); }

/* Soft floating animation for decorative icons */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-floaty { animation: floaty 4s ease-in-out infinite; }



  .bg-leaf-50{background-color: #f0f8ff !important;}
  .bg-leaf-100{background-color: #d6e4f0 !important;}
  .bg-leaf-200{background-color: #a8c4e0 !important;}
  .bg-leaf-300{background-color: #7aa3d0 !important;}
  .bg-leaf-400{background-color: #4c82c0 !important;}
  .bg-leaf-500{background-color: #2a61a0 !important;}
  .bg-leaf-600{background-color: #1e4a7f !important;}
  .bg-leaf-700{background-color: #16335f !important;}
  .bg-leaf-800{background-color: #0f1d3f  !important;}
  .bg-leaf-900{background-color: #080a1f !important;}