html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Outfit', system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
     color: #231d49;
     background: #fff;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: 'Outfit', serif;
     letter-spacing: -0.025em;
     font-weight: 500;
 }

 ::selection {
     background: #f4c542;
     color: #231d49;
 }

 .container-x {
     width: 100%;
     margin-inline: auto;
     padding-inline: 1.5rem;
     max-width: 88rem;
 }

 @media (min-width: 1024px) {
     .container-x {
         padding-inline: 3rem;
     }
 }

 .eyebrow {
     font-family: 'Outfit', monospace;
     font-size: 0.7rem;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: #6b6685;
 }

 .hairline {
     height: 1px;
     background: #e8e6ee;
     width: 100%;
 }

 .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
 }

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

 @keyframes rise {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .rise-in {
     animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
 }

 @keyframes marquee {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 .marquee-x {
     animation: marquee 40s linear infinite;
 }

 .hide-scrollbar {
     scrollbar-width: none;
 }

 .hide-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .nav-top {
     background: transparent;
     color: #fff;
 }

 .nav-top.scrolled {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(12px);
     color: #231d49;
     border-bottom: 1px solid #e8e6ee;
 }

 .nav-top.scrolled .nav-cta {
     background: #231d49;
     color: #fff;
 }

 .nav-top:not(.scrolled) .nav-cta {
     background: #fff;
     color: #231d49;
 }

 .icon-arrow {
     display: inline-block;
     transition: transform .3s;
 }

 .group:hover .icon-arrow {
     transform: translate(2px, -2px);
 }

 /* Masonry Gallery Grid */
 .masonry-grid {
     column-count: 1;
     column-gap: 1.75rem;
 }

 @media (min-width: 640px) {
     .masonry-grid {
         column-count: 2;
         column-gap: 1.75rem;
     }
 }

 @media (min-width: 1024px) {
     .masonry-grid {
         column-count: 3;
         column-gap: 2rem;
     }
 }

 .masonry-item {
     break-inside: avoid;
     -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
     margin-bottom: 2rem;
     display: inline-block;
     width: 100%;
 }

 .gallery-card {
     transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1);
 }

 .gallery-card:hover {
     transform: translateY(-6px);
 }

 /* Lightbox Modal Animation */
 #gallery-lightbox {
     transition: opacity .3s cubic-bezier(.16, 1, .3, 1), visibility .3s cubic-bezier(.16, 1, .3, 1);
 }

 #gallery-lightbox.active {
     display: flex !important;
     opacity: 1 !important;
 }

 #lightbox-dialog {
     transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
 }

 #gallery-lightbox.active #lightbox-dialog {
     transform: scale(1) !important;
     opacity: 1 !important;
 }

 /* WhatsApp Floating Button & Animated Effects */
 .wa-float-btn {
     position: fixed;
     bottom: 100px;
     right: 24px;
     z-index: 45;
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .wa-btn-circle {
     position: relative;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
     box-shadow: 0 10px 25px -4px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .wa-btn-circle:hover {
     transform: scale(1.1) translateY(-3px);
     box-shadow: 0 16px 32px -4px rgba(37, 211, 102, 0.65), 0 8px 18px rgba(0, 0, 0, 0.2);
 }

 .wa-btn-circle:active {
     transform: scale(0.95);
 }

 /* Pulsing radar wave rings */
 .wa-pulse-ring {
     position: absolute;
     inset: -6px;
     border-radius: 50%;
     border: 2px solid #25D366;
     opacity: 0.8;
     pointer-events: none;
     animation: wa-ring-pulse 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
 }

 .wa-pulse-ring-delayed {
     position: absolute;
     inset: -12px;
     border-radius: 50%;
     border: 2px solid #25D366;
     opacity: 0.5;
     pointer-events: none;
     animation: wa-ring-pulse 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
     animation-delay: 0.75s;
 }

 @keyframes wa-ring-pulse {
     0% {
         transform: scale(0.85);
         opacity: 0.85;
     }

     50% {
         opacity: 0.45;
     }

     100% {
         transform: scale(1.4);
         opacity: 0;
     }
 }

 /* Gentle floating animation */
 @keyframes wa-float-bounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-6px);
     }
 }

 .wa-floating-anim {
     animation: wa-float-bounce 3.5s ease-in-out infinite;
 }

 /* Online live status dot */
 .wa-status-dot {
     position: absolute;
     top: 2px;
     right: 2px;
     width: 15px;
     height: 15px;
     background: #ffffff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }

 .wa-status-dot::after {
     content: '';
     width: 9px;
     height: 9px;
     background: #10B981;
     border-radius: 50%;
     display: block;
     animation: wa-dot-pulse 2s infinite;
 }

 @keyframes wa-dot-pulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.5;
         transform: scale(0.8);
     }
 }

 /* Tooltip badge callout */
 .wa-badge-tooltip {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #ffffff;
     color: #231d49;
     padding: 9px 16px;
     border-radius: 9999px;
     font-size: 13px;
     font-weight: 500;
     box-shadow: 0 8px 24px -4px rgba(35, 29, 73, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
     border: 1px solid #e8e6ee;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     white-space: nowrap;
     text-decoration: none;
 }

 .wa-badge-tooltip:hover {
     box-shadow: 0 12px 30px -4px rgba(35, 29, 73, 0.22);
     border-color: #25D366;
     transform: translateX(-4px);
 }

 /* Wiggle animation on hover */
 .wa-btn-circle:hover svg {
     animation: wa-wiggle 0.5s ease-in-out;
 }

 @keyframes wa-wiggle {

     0%,
     100% {
         transform: rotate(0deg);
     }

     25% {
         transform: rotate(-14deg) scale(1.08);
     }

     75% {
         transform: rotate(14deg) scale(1.08);
     }
 }

 /* Certificate Lightbox Modal Animation */
 #cert-lightbox {
     transition: opacity .3s cubic-bezier(.16, 1, .3, 1), visibility .3s cubic-bezier(.16, 1, .3, 1);
 }

 #cert-lightbox.active {
     display: flex !important;
     opacity: 1 !important;
 }

 #cert-lightbox.active>div {
     transform: scale(1) !important;
     opacity: 1 !important;
 }