:root {
    --bg-color: #0a0a0a;
    --text-color: #f0f0f0;
    --accent-gold: #d4af37;
    --accent-gold-dim: #8a7224;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;

    --transition-slow: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: 0.3s ease-out;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
    /* Custom cursor */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
    height: 100vh;
}

/* Typography */
h1,
h2,
h3,
.logo {
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

button {
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    cursor: none;
}

/* Custom Cursor */
#cursor-follower {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 1px solid var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, width 0.3s, height 0.3s;
    mix-blend-mode: difference;
}

/* Star Background */
#star-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 3px);
    background-size: 550px 550px;
    opacity: 0.3;
    animation: stars-move 100s linear infinite;
}

@keyframes stars-move {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-550px);
    }
}

/* Nav */
.glass-nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0.5rem 4rem;
    /* Reduced padding from 2rem to 0.5rem to fix logo spacing */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    height: 100%;
}

.logo img {
    height: 90px;
    /* Maximize size within reason */
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 3rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    font-size: 0.8rem;
    color: var(--accent-gold);
    padding: 1rem 0;
    /* Add vertical padding to create hit area bridge naturally? No, pseudo element is better. */
}

.lang-btn {
    cursor: pointer;
    border: 1px solid var(--glass-border);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-menu {
    position: absolute;
    top: 100%;
    /* Directly below */
    right: 0;
    margin-top: 0;
    /* Remove margin to prevent gaps */
    padding-top: 0.5rem;
    /* Add padding *inside* the menu so separation looks visual but hit area is continuous */
    background: transparent;
    /* Wrapper is transparent */
    border: none;
    border-radius: 0;
    display: none;
    flex-direction: column;
    width: 120px;
    /* Move background and border to inner wrapper or just styling buttons? 
       Let's keep it simple. If we make bg transparent, we lose the blur. 
       Let's keep background but ensure it touches the button.
    */
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

/* Bridge the gap just in case */
.lang-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    /* Extend upwards to cover any gap */
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.lang-menu::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 0;
    width: 100%;
    height: 0.5rem;
}

.lang-dropdown:hover .lang-menu {
    display: flex;
}

.lang-menu button {
    padding: 0.8rem 1rem;
    text-align: left;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-menu button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Main */
#app {
    height: 100vh;
    width: 100vw;
    position: relative;
    padding-top: 80px;
    /* Nav height */
    perspective: 1000px;
}

/* Footer */
/* 3D Carousel Styles */

/* 3D Carousel Styles */
.carousel-container-3d {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    z-index: 10;
}

.carousel-track-3d {
    position: relative;
    width: 100%;
    height: 600px;
    /* Adjust based on card height */
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item-3d {
    position: absolute;
    width: 350px;
    height: 500px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    will-change: transform, opacity;
}

.card-inner-3d {
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.card-inner-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.carousel-item-3d.active .card-overlay {
    transform: translateY(0);
    opacity: 1;
}

.carousel-item-3d.active .card-inner-3d {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    border-color: var(--accent-gold);
}

.card-overlay h2 {
    color: var(--accent-gold);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.product-page {
    width: 100%;
    height: calc(100vh - 80px);
    /* Full height minus nav */
    display: flex;
    overflow: hidden;
}

.product-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.product-visual {
    flex: 1;
    background: radial-gradient(circle at center, #1a1a1a, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-visual img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.8));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.product-details {
    flex: 1;
    padding: 4rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    background: #0d0d0d;
}

.back-btn {
    position: absolute;
    top: 100px;
    left: 40px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
    z-index: 10;
}

.back-btn:hover {
    opacity: 1;
    color: var(--accent-gold);
}

.product-details h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #999);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price {
    font-size: 2rem;
    color: var(--accent-gold);
    font-family: var(--font-body);
    font-weight: 300;
}

.vat-label {
    font-size: 0.8rem;
    opacity: 0.5;
    margin-bottom: 3rem;
}

.specs {
    display: flex;
    gap: 4rem;
    margin-bottom: 3rem;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    padding: 2rem 0;
}

.spec-item h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-gold);
    margin-bottom: 0.5rem;
}

.description {
    line-height: 1.8;
    margin-bottom: 4rem;
    font-size: 1.1rem;
    max-width: 600px;
}

.cta-btn {
    padding: 1.5rem 3rem;
    background: var(--accent-gold);
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    align-self: flex-start;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Scrollbar for details if needed */
.product-details::-webkit-scrollbar {
    width: 6px;
}

.product-details::-webkit-scrollbar-thumb {
    background: #333;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-split {
        flex-direction: column;
    }

    .product-visual {
        height: 40vh;
    }

    .product-details {
        padding: 2rem;
    }

    .product-details h1 {
        font-size: 2.5rem;
    }
}