:root {
    --bg-dark-1: #120722;
    --bg-dark-2: #1A0D33;
    --bg-dark-3: #2A1A4D;
    --color-turquoise: #00F5D4;
    --color-yellow: #FEE440;
    --color-orange: #F8961E;
    --text-light: #FFFFFF;
}
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-light);
    overflow-x: hidden;
    background-color: var(--bg-dark-1);
}
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
#hero-particles {
    position: relative;
    z-index: 1;
}
#hero-particles canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.hero-section {
    min-height: 100vh;
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(-45deg, var(--bg-dark-1), var(--bg-dark-2), var(--bg-dark-3), var(--bg-dark-2));
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}
.hero-content {
    position: relative;
    z-index: 1;
}
.logo { max-width: 280px; height: auto; border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.app-store-badge img { height: 55px; width: auto; transition: transform 0.3s ease, opacity 0.3s ease; }
.app-store-badge:hover img { transform: translateY(-3px); opacity: 0.9; }
.step-icon { width: 60px; height: 60px; border-radius: 50%; background-color: var(--color-orange); color: var(--bg-dark-1); display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto; border: 3px solid var(--text-light); }
section { padding: 6rem 0; position: relative; }
.bg-darker { background-color: rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.phone-screenshot { border-radius: 40px; border: 10px solid #111; box-shadow: 0 15px 30px rgba(0,0,0,0.4); max-width: 300px; margin: 0 auto; }
.carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--color-turquoise); border-radius: 50%; padding: 1.5rem; }
.category-pill { background-color: rgba(255, 255, 255, 0.1); border: 1px solid var(--color-yellow); color: var(--color-yellow); padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: bold; transition: all 0.3s ease; }
.category-pill:hover { background-color: var(--color-yellow); color: var(--bg-dark-1); }
.feature-icon { font-size: 3.5rem; margin-bottom: 1rem; display: inline-block; text-shadow: 0 0 15px currentColor; }
.feature-icon .bi-patch-question-fill { color: #FF477E; }
.feature-icon .bi-people-fill { color: #9D4EDD; }
.feature-icon .bi-globe2 { color: var(--color-turquoise); }
#cta .logo { max-width: 250px; }
footer { background-color: var(--bg-dark-1); padding: 2rem 0; position: relative; }
.footer-links a { color: var(--text-light); text-decoration: none; margin: 0 10px; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--color-turquoise); }
.language-selector { max-width: 150px; margin-left: auto; margin-right: auto; }
.language-selector .form-select { background-color: var(--bg-dark-2); color: var(--text-light); border-color: var(--color-turquoise); }
.cookie-banner { position: fixed; bottom: -100%; left: 0; width: 100%; background-color: var(--bg-dark-1); border-top: 1px solid var(--color-turquoise); padding: 1rem; display: flex; justify-content: center; align-items: center; gap: 1rem; z-index: 1000; transition: bottom 0.5s ease-in-out; }
.cookie-banner.show { bottom: 0; }
.modal-content { background-color: var(--bg-dark-2); border: 1px solid var(--color-turquoise); color: var(--text-light); }
.modal-header { border-bottom: 1px solid rgba(0, 245, 212, 0.2); }