@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap');

:root {
    --main-bg: #151418;
    --surface-card: #1e1d23;
    --surface-hover: #292830;
    --surface-border: #2e2d36;
    --accent-primary: #914171;
    --accent-secondary: #b55b90;
    --accent-light: #d687b5;
    --accent-glow: rgba(145, 65, 113, 0.35);
    --text-main: #ffffff;
    --text-muted: #8e8d9a;
    --success: #10b981;
    --font-family: 'Lexend', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    user-select: none;
}

body {
    background-color: var(--main-bg);
    color: var(--text-main);
    overflow-x: hidden;
}

.text-colored, .text-brand-400, .text-brand-500, .text-muted-colored {
    color: var(--accent-primary) !important;
}

.liquid-glass {
    background: var(--surface-card);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid var(--surface-border);
    box-shadow: 
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.08),
      0 16px 40px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

.liquid-glass-hover:hover {
    background: var(--surface-hover);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-4px);
}

.bg-grid-pattern {
    background-image: 
      radial-gradient(circle at 50% 35%, rgba(145, 65, 113, 0.25) 0%, transparent 70%),
      linear-gradient(to right, rgba(46, 45, 54, 0.3) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(46, 45, 54, 0.3) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 60px 60px;
}

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

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #ffffff 0%, #d687b5 45%, #914171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.particle-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-glow);
    pointer-events: none;
}

/* Force all FontAwesome icons to pure white */
i.fa-solid, i.fa-brands, i.fa-regular, i.fas, i.fab, i.far, i[class*="fa-"] {
    color: #ffffff !important;
}