/* Premium Dark - Custom styles (complements Tailwind) */
:root {
    --naszi: #66c4ab;
    --panel: #0f1516;
    --card: #0f1a1a
}

/* Loader */
#page-loader {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(6px);
}

.loading-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--naszi);
    display: inline-block;
    transform: scale(0);
    animation: dot-bounce 1.2s ease-in-out infinite both
}

.loading-dots .dot.delay-1 {
    animation-delay: .12s
}

.loading-dots .dot.delay-2 {
    animation-delay: .24s
}

@keyframes dot-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: .25
    }

    40% {
        transform: scale(1);
        opacity: 1
    }
}

/* reveal on scroll */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.2, .9, .2, 1), transform .6s cubic-bezier(.2, .9, .2, 1);
    will-change: opacity, transform
}

[data-reveal].reveal {
    opacity: 1;
    transform: none
}

/* Nav link style */
.nav-link {
    color: rgba(255, 255, 255, 0.75);
    padding: .25rem .5rem;
    border-radius: .375rem;
    transition: all .12s
}

.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03)
}

/* social buttons */
.social-btn {
    background: rgba(255, 255, 255, 0.02);
    color: var(--naszi);
    padding: .45rem;
    border-radius: .375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s, background .12s
}

.social-btn:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.04)
}

/* cards */
.bg-card\/60 {
    background: rgba(15, 26, 26, 0.6)
}

.bg-card\/50 {
    background: rgba(15, 26, 26, 0.5)
}

.bg-card\/40 {
    background: rgba(15, 26, 26, 0.4)
}

/* focus outline */
:focus {
    outline: 3px solid rgba(102, 196, 171, 0.12);
    outline-offset: 2px
}

/* button */
.btn-send {
    background: var(--naszi);
    color: #000;
    border-radius: .375rem;
    padding: .5rem 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4)
}

/* subtle responsive tweaks */
@media (max-width:640px) {
    .logo {
        font-size: 1.125rem
    }

    .lead {
        font-size: 1rem
    }
}

/* reduce motion */
@media (prefers-reduced-motion:reduce) {

    .loading-dots .dot,
    [data-reveal] {
        animation: none;
        transition: none;
        transform: none;
        opacity: 1
    }
}