:root {
    --color-yellow: #facc15;
    --color-black: #000;
    --color-white: #fff;
    --color-gray-900: #111827;
    --color-gray-800: #1f2937
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto
}

.moving-text span,
.moving-text-reverse span {
    white-space: nowrap !important
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-white);
    background-image: none !important;
    color: var(--color-gray-900)
}

body.dark,
body.dark-mode {
    background-color: var(--color-gray-900);
    color: var(--color-white)
}

.dark .bg-white,
.dark-mode .bg-white {
    background-color: var(--color-gray-900)
}

.dark .bg-gray-50,
.dark-mode .bg-gray-50 {
    background-color: var(--color-gray-800)
}

.dark .text-black,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-900,
.dark-mode .text-black,
.dark-mode .text-gray-600,
.dark-mode .text-gray-700,
.dark-mode .text-gray-900 {
    color: var(--color-white)
}

.dark .text-yellow-400,
.dark-mode .text-yellow-400 {
    color: var(--color-yellow)
}

.moving-text-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 20px 0
}

.moving-text,
.moving-text-reverse {
    display: flex;
    white-space: nowrap;
    width: fit-content
}

.moving-text {
    animation: marquee 25s linear infinite
}

.moving-text-reverse {
    animation: marquee-reverse 30s linear infinite
}

.moving-text-content {
    display: flex;
    align-items: center;
    padding-right: 4rem
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(-50%)
    }

    100% {
        transform: translateX(0)
    }
}

.testimonial-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    padding: 2rem 0
}

.testimonial-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: marquee 40s linear infinite
}

.testimonial-track:hover {
    animation-play-state: paused
}

.testimonial-card {
    width: 400px;
    max-width: 85vw;
    flex-shrink: 0
}

.dark .testimonial-card,
.dark-mode .testimonial-card {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-900)
}

.dark-mode-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s ease
}

.dark .dark-mode-particles,
.dark-mode .dark-mode-particles {
    opacity: 1
}

.service-card,
.testimonial-card,
.work-card {
    transition: all .4s cubic-bezier(.4, 0, .2, 1)
}

.service-card:hover,
.work-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, .1), 0 10px 20px -5px rgba(0, 0, 0, .04)
}

.particle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0
}

.particle.light-theme {
    color: rgba(250, 204, 21, .3)
}

.particle.dark-theme {
    color: rgba(250, 204, 21, .4)
}

@keyframes float-particle {
    0% {
        opacity: 0;
        transform: translateY(100vh) translateX(0) scale(1)
    }

    10% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(var(--tx)) scale(0)
    }
}

.particle.animate {
    animation: float-particle linear infinite
}

.section-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0
}

.overlay-circle-1,
.overlay-circle-2,
.overlay-circle-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .1
}

.overlay-circle-1 {
    top: 10%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: var(--color-yellow)
}

.overlay-circle-2 {
    bottom: 20%;
    right: 5%;
    width: 300px;
    height: 300px;
    background: var(--color-gray-900)
}

.overlay-circle-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--color-yellow) 0, transparent 70%);
    opacity: .05
}

.bg-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.star-layer {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 20px 30px, #ccc, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 40px 70px, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 90px 40px, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 130px 80px, #fff, rgba(0, 0, 0, 0));
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0;
    animation: fade-stars 4s ease-in-out infinite alternate
}

.bg-animation[data-theme=always-on] .star-layer,
.dark .bg-animation .star-layer,
.dark-mode .bg-animation .star-layer {
    opacity: .3
}

.star-layer--primary {
    animation-duration: 4s
}

.star-layer--secondary {
    background-size: 300px 300px;
    animation-duration: 6s;
    animation-delay: 1s
}

.star-layer--tertiary {
    background-size: 400px 400px;
    animation-duration: 8s;
    animation-delay: 2s
}

@keyframes fade-stars {
    from {
        opacity: .1
    }

    to {
        opacity: .4
    }
}

@keyframes float-blob {
    0% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(20px, -20px) scale(1.1)
    }

    100% {
        transform: translate(-10px, 10px) scale(.9)
    }
}

.floating-element {
    animation: float-y 6s ease-in-out infinite
}

.floating-element-delayed {
    animation: float-y 6s ease-in-out infinite 3s
}

@keyframes float-y {

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

    50% {
        transform: translateY(-15px)
    }
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-yellow)
}

.reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 1s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.4, 0, .2, 1)
}

.reveal-up {
    transform: translateY(30px)
}

.reveal-down {
    transform: translateY(-30px)
}

.reveal-left {
    transform: translateX(30px)
}

.reveal-right {
    transform: translateX(-30px)
}

.reveal-scale {
    transform: scale(.92)
}

.reveal-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important
}

.delay-100 {
    transition-delay: 0.1s
}

.delay-200 {
    transition-delay: 0.2s
}

.delay-300 {
    transition-delay: 0.3s
}

.delay-400 {
    transition-delay: 0.4s
}

.delay-500 {
    transition-delay: 0.5s
}

@media (prefers-reduced-motion:reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important
    }
}

@media (max-width:640px) {
    .moving-text-content span {
        -webkit-text-stroke: 1px currentColor;
        text-shadow: 1px currentColor;
        paint-order: stroke fill
    }
}

/* Contact & Footer Orbs - decorative backgrounds */
.contact-orbs,
.footer-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0
}

.contact-orb,
.footer-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.15
}

.contact-orb-1 {
    width: 200px;
    height: 200px;
    background: var(--color-yellow);
    top: 10%;
    left: 10%;
    animation: float-blob 8s ease-in-out infinite
}

.contact-orb-2 {
    width: 150px;
    height: 150px;
    background: var(--color-yellow);
    top: 50%;
    right: 5%;
    animation: float-blob 10s ease-in-out infinite reverse
}

.contact-orb-3 {
    width: 180px;
    height: 180px;
    background: var(--color-yellow);
    bottom: 20%;
    left: 20%;
    animation: float-blob 12s ease-in-out infinite 2s
}

.contact-orb-4 {
    width: 120px;
    height: 120px;
    background: var(--color-yellow);
    bottom: 10%;
    right: 15%;
    animation: float-blob 9s ease-in-out infinite 1s
}

.footer-orb {
    filter: blur(40px);
    opacity: 0.1
}

.orb-1 {
    width: 100px;
    height: 100px;
    background: var(--color-black);
    top: 20%;
    left: 10%;
    animation: float-blob 7s ease-in-out infinite
}

.orb-2 {
    width: 80px;
    height: 80px;
    background: var(--color-black);
    top: 60%;
    left: 25%;
    animation: float-blob 9s ease-in-out infinite reverse
}

.orb-3 {
    width: 120px;
    height: 120px;
    background: var(--color-black);
    top: 30%;
    right: 20%;
    animation: float-blob 11s ease-in-out infinite 1s
}

.orb-4 {
    width: 60px;
    height: 60px;
    background: var(--color-black);
    bottom: 30%;
    right: 10%;
    animation: float-blob 8s ease-in-out infinite 2s
}

.orb-5 {
    width: 90px;
    height: 90px;
    background: var(--color-black);
    bottom: 20%;
    left: 50%;
    animation: float-blob 10s ease-in-out infinite 0.5s
}

/*# sourceMappingURL=styles.min.css.map */