/* ============================================================
   Kreeate Global - "Nexus Elite" design tokens
   Monochrome, high-end corporate modernism. Light + dark.
   ============================================================ */

:root {
    --surface: #f8f9fa;
    --sc-lowest: #ffffff;
    --sc-low: #f3f4f5;
    --sc: #edeeef;
    --sc-high: #e7e8e9;
    --sc-highest: #e1e3e4;
    --surface-ink: #191a1f;
    --primary: #191a1f;
    --on-primary: #ffffff;
    --on-primary-container: #83838a;
    --primary-fixed: #e3e2e9;
    --on-primary-fixed: #1a1b20;
    --secondary: #5f5e5e;
    --on-surface: #191c1d;
    --accent-subtle: #e5e7eb;
    --outline: #77767b;
    --outline-variant: #c7c6cb;
    --text-muted: #71717a;
}

.dark {
    --surface: #0e0f12;
    --sc-lowest: #17181c;
    --sc-low: #131418;
    --sc: #1c1d22;
    --sc-high: #232429;
    --sc-highest: #2a2b31;
    --surface-ink: #0b0c0e;
    --primary: #f0f1f2;
    --on-primary: #17181c;
    --on-primary-container: #9a9aa2;
    --primary-fixed: #2a2b31;
    --on-primary-fixed: #e3e2e9;
    --secondary: #a2a2a8;
    --on-surface: #f0f1f2;
    --accent-subtle: rgba(255, 255, 255, 0.10);
    --outline: #8a8a90;
    --outline-variant: rgba(255, 255, 255, 0.16);
    --text-muted: #9a9aa2;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

/* ===== Bento grid (Process) ===== */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* ===== Glass / floating card ===== */
.glass-card {
    background: var(--sc-lowest);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--accent-subtle);
}

/* ===== Logo / talent marquee ===== */
.logo-scroll {
    display: flex;
    width: max-content;
    animation: scroll 45s linear infinite;
}

.marquee-mask:hover .logo-scroll {
    animation-play-state: paused;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== Scroll reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

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

/* ===== Custom scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sc-low); }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 3px; }

/* ===== Mobile menu overlay ===== */
.mob-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mob-menu.open {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Floating WhatsApp button (monochrome) ===== */
.wa-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 40;
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--on-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    border: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease;
}

.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 26px; height: 26px; }