/* webmooy custom styles */

:root {
    --lime: #C5E82E;
    --lime-glow: rgba(197, 232, 46, 0.4);
    --ink-900: #0A0A0A;
    --ink-800: #161616;
    --ink-700: #262626;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html.dark body { color-scheme: dark; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--lime); }

/* Selection */
::selection { background: var(--lime); color: #0A0A0A; }

/* Hero gradient bg */
.hero-bg {
    background:
        radial-gradient(circle at 20% 30%, rgba(197, 232, 46, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(197, 232, 46, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(197, 232, 46, 0.10) 0%, transparent 60%);
}

.hero-bg-light {
    background:
        radial-gradient(circle at 20% 30%, rgba(197, 232, 46, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(197, 232, 46, 0.18) 0%, transparent 50%);
}

/* Grid pattern */
.grid-pattern {
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 80%);
}

html:not(.dark) .grid-pattern {
    background-image:
        linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
}

/* Service card hover */
.service-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(197,232,46,0.15), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
.service-card:hover { transform: translateY(-4px); border-color: rgba(197, 232, 46, 0.5); }

/* Marquee */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Lime glow */
.lime-glow {
    box-shadow: 0 0 60px -10px var(--lime-glow);
}

/* Number reveal */
@keyframes count-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Heading gradient */
.text-gradient {
    background: linear-gradient(135deg, var(--lime) 0%, #E5F58A 50%, var(--lime) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Decorated shapes */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

/* Swiper customization */
.swiper-pagination-bullet { background: #525252 !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--lime) !important; width: 24px !important; border-radius: 4px !important; }
.swiper-button-next, .swiper-button-prev { color: var(--lime) !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 20px !important; }

/* AOS override */
[data-aos] { transition-property: opacity, transform; }

/* Smooth focus rings */
*:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
    border-radius: 4px;
}

/* FAQ smooth */
.faq-content {
    transition: max-height 0.4s ease, opacity 0.3s ease;
    overflow: hidden;
}

/* Hero floating animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) }
    50%      { transform: translateY(-12px) }
}
@keyframes float-delayed {
    0%, 100% { transform: translateY(0px) rotate(0deg) }
    50%      { transform: translateY(-10px) rotate(-2deg) }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg) }
    50%      { transform: translateY(-8px) rotate(2deg) }
}
.float-anim         { animation: float 6s ease-in-out infinite; }
.float-anim-delayed { animation: float-delayed 7s ease-in-out infinite 0.5s; }
.float-anim-slow    { animation: float-slow 8s ease-in-out infinite 1s; }