/* ============================================
   Clash Official Site — Main Stylesheet
   ============================================ */

/* Base */
html { overflow-x: hidden; }
body {
    background-color: #fafafa;
    overflow-x: hidden;
    width: 100%;
}

/* ============================================
   Navigation — Full-width bar
   ============================================ */

.nav-header {
    background: rgba(250, 250, 250, 0.92);
    backdrop-filter: blur(12px) saturate(1.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.nav-header.nav-scrolled {
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.06);
}

/* Desktop nav links */
.nav-link { color: #71717a; transition: color .15s, background .15s; }
.nav-link-inactive { color: #71717a; }
.nav-link-inactive:hover { color: #18181b; background: rgba(0,0,0,.05); }
.nav-link-active   { color: #18181b; font-weight: 600; }

/* Language dropdown */
.nav-dropdown {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.09);
    animation: ddIn .15s ease;
    transform-origin: top right;
}
@keyframes ddIn {
    from { opacity: 0; transform: scale(.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.nav-dd-item {
    display: block; width: 100%; padding: 7px 12px;
    font-size: 13.5px; font-weight: 500; color: #52525b;
    border-radius: 8px; text-align: left;
    background: transparent; border: none; cursor: pointer;
    transition: background .12s, color .12s;
}
.nav-dd-item:hover { background: rgba(0,0,0,.05); color: #18181b; }
.nav-dd-item.active { color: #4f46e5; background: rgba(99,102,241,.08); font-weight: 600; }

/* CTA download button */
.nav-cta {
    background: #18181b;
    color: #fff !important;
    border-radius: 8px;
    transition: background .2s, transform .15s;
}
.nav-cta:hover { background: #3f3f46; transform: translateY(-1px); }

/* Mobile drawer */
.nav-mobile {
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.nav-link-mobile { color: #52525b; border-radius: 8px; transition: background .12s, color .12s; }
.nav-link-mobile-inactive:hover { background: rgba(0,0,0,.04); color: #18181b; }
.nav-link-mobile-active { color: #18181b; background: rgba(0,0,0,.05); font-weight: 600; }

.nav-lang-m {
    color: #71717a; border-radius: 8px;
    background: transparent; border: none; cursor: pointer;
    transition: background .12s, color .12s;
}
.nav-lang-m:hover { background: rgba(0,0,0,.04); color: #18181b; }
.nav-lang-m.active { color: #4f46e5; background: rgba(99,102,241,.08); }

/* ============================================
   Grid Background
   ============================================ */
.bg-grid {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fafafa; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ============================================
   Text Gradients
   ============================================ */
.text-gradient {
    background: linear-gradient(135deg, #18181b 0%, #71717a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-light {
    background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* legacy compat */
.glass-pill {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,.05);
}