:root {
    --bg-color: #000000;
    /* Void Black */
    --text-color: #ffffff;
    --accent-color: #0071e3;
    --secondary-text: #a1a1a6;
    --nav-bg: rgba(20, 20, 20, 0.6);
    --font-main: 'Inter', sans-serif;
    --transition-speed: 0.6s;

    /* Liquid Glass Variables - Dark Mode */
    --glass-bg: rgba(30, 30, 30, 0.3);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: 40px;
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.4);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
}

/* Animated Navbar Logo - Purple/Blue/Red Gradient */
/* Animated Navbar Logo - Purple/Blue/Red Gradient with White Glow */
.logo {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    text-decoration: none;
    /* Purple - Blue - Red - Purple (loop) */
    background: linear-gradient(90deg,
            #8b00ff 0%,
            #4400ff 33%,
            #ff0055 66%,
            #8b00ff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: logoGradientFlow 8s ease infinite;
    /* Slower animation */
    /* Stronger white glow */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(139, 0, 255, 0.4));
    transition: filter 0.3s ease;
}

.logo:hover {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(139, 0, 255, 0.6));
}

@keyframes logoGradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Specific class for Cart Title (Purple-Blue-Red) */
.cart-title-gradient {
    background: linear-gradient(90deg,
            #8b00ff 0%,
            #0088ff 50%,
            #ff0055 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cartGradient 4s ease infinite alternate;
}

@keyframes cartGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* Fix for animated button glow being cut off on mobile */
.bento-cta,
.bento-cta .bento-content,
.cta-section,
.cta-btn-premium {
    overflow: visible !important;
}

/* Ensure button glow is visible */
.cta-btn-premium::before,
.cta-btn-premium::after {
    pointer-events: none;
}

/* Mobile fix - disable problematic pseudo-elements and use simple box-shadow glow instead */
@media (max-width: 768px) {
    .cta-btn-premium::before {
        display: none !important;
    }

    .cta-btn-premium::after {
        display: none !important;
    }

    .cta-btn-premium {
        box-shadow:
            0 0 20px rgba(139, 0, 255, 0.5),
            0 0 40px rgba(0, 100, 255, 0.3),
            0 0 60px rgba(255, 0, 85, 0.2);
        animation: mobileButtonGlow 3s ease-in-out infinite;
    }

    @keyframes mobileButtonGlow {

        0%,
        100% {
            box-shadow:
                0 0 20px rgba(139, 0, 255, 0.5),
                0 0 40px rgba(0, 100, 255, 0.3),
                0 0 60px rgba(255, 0, 85, 0.2);
        }

        33% {
            box-shadow:
                0 0 20px rgba(0, 100, 255, 0.5),
                0 0 40px rgba(255, 0, 85, 0.3),
                0 0 60px rgba(139, 0, 255, 0.2);
        }

        66% {
            box-shadow:
                0 0 20px rgba(255, 0, 85, 0.5),
                0 0 40px rgba(139, 0, 255, 0.3),
                0 0 60px rgba(0, 100, 255, 0.2);
        }
    }
}

/* Intro Overlay Styles */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* ------------------------------------------------------------------ */
/* GLOBAL PREMIUM COMPONENT STYLES (Cart, Buttons, etc.)              */
/* ------------------------------------------------------------------ */

/* Premium CTA Button - Animated Snake Border (Global Class) */
@property --btn-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.cta-btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 45px;
    background: linear-gradient(135deg, #1a0a2e 0%, #16082a 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    position: relative;
    overflow: visible !important;
    z-index: 1;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    text-transform: none;
}

/* Animated rotating snake border - purple, blue, red */
.cta-btn-premium::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 55px;
    padding: 3px;
    background: conic-gradient(from var(--btn-angle),
            transparent 0deg,
            transparent 60deg,
            #8b00ff 80deg,
            #6a00ff 120deg,
            #4400ff 160deg,
            #0088ff 200deg,
            #ff0055 240deg,
            transparent 280deg,
            transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: rotate-border 3s linear infinite;
    z-index: -1;
    pointer-events: none;
}

/* Glow that follows the snake */
.cta-btn-premium::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 65px;
    background: conic-gradient(from var(--btn-angle),
            transparent 0deg,
            transparent 100deg,
            rgba(139, 0, 255, 0.6) 140deg,
            rgba(0, 100, 255, 0.6) 180deg,
            rgba(255, 0, 85, 0.6) 220deg,
            transparent 260deg,
            transparent 360deg);
    filter: blur(20px);
    animation: rotate-border 3s linear infinite;
    z-index: -2;
    opacity: 0.7;
    pointer-events: none;
}

@keyframes rotate-border {
    to {
        --btn-angle: 360deg;
    }
}

.cta-btn-premium:hover {
    transform: translateY(-5px) scale(1.05);
    background: linear-gradient(135deg, #2a1048 0%, #1a0830 100%);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.cta-btn-premium:hover::after {
    opacity: 1;
    filter: blur(25px);
}

.cta-btn-premium:hover::before,
.cta-btn-premium:hover::after {
    animation: rotate-border 2s linear infinite;
}

.cta-btn-premium svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.cta-btn-premium:hover svg {
    transform: translateX(8px);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* Mobile Fallback for Snake Border */
@media (max-width: 768px) {
    .cta-btn-premium {
        width: 100%;
        /* Full width on mobile often looks better */
    }

    .cta-btn-premium::before,
    .cta-btn-premium::after {
        display: none !important;
    }

    .cta-btn-premium {
        box-shadow:
            0 0 20px rgba(139, 0, 255, 0.5),
            0 0 40px rgba(0, 100, 255, 0.3),
            0 0 60px rgba(255, 0, 85, 0.2);
        animation: mobileButtonGlow 3s ease-in-out infinite;
    }
}

/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from var(--btn-angle), red, blue)) {

    .cta-btn-premium::before,
    .cta-btn-premium::after {
        animation: rotate-border-fallback 3s linear infinite;
    }

    @keyframes rotate-border-fallback {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

/* Cart Glow Container - Main Box for Cart Page */
.cart-glow-container {
    padding: 40px;
    background: #000;
    /* Deep black background */
    border-radius: 30px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Rainbow Border for Cart Container */
.cart-glow-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(139, 0, 255, 0.6),
            rgba(0, 100, 255, 0.6),
            rgba(255, 0, 85, 0.6),
            rgba(139, 0, 255, 0.6));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

/* Soft Outer Glow for Cart Container */
.cart-glow-container {
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 100px rgba(139, 0, 255, 0.1);
}

@media (max-width: 768px) {
    .cart-glow-container {
        padding: 20px;
    }
}

#intro-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

#intro-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#intro-video.fade-out {
    opacity: 0;
}

#intro-logo {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0.1em;
}

.intro-letter {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;

    /* Purple-Blue-Red Gradient */
    background: linear-gradient(90deg,
            #8b00ff 0%,
            #4400ff 33%,
            #ff0055 66%,
            #8b00ff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        letterFadeIn 1.2s ease forwards,
        logoGradientFlow 8s ease infinite;

    opacity: 0;
    transform: translateY(20px);
    filter: drop-shadow(0 0 20px rgba(139, 0, 255, 0.3));
}

@keyframes letterFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide elements during intro */
body.intro-playing .intro-hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* Reveal animation for elements after intro */
.intro-reveal {
    opacity: 1 !important;
    transform: none !important;
    /* Changed from translateY(0) to fix sticky positioning context */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Staggered reveal for bento items */
.bento-item.intro-reveal {
    transition-delay: calc(var(--reveal-delay, 0) * 0.1s);
}

@media (max-width: 768px) {
    .intro-letter {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }
}

/* Physics Background */
#physics-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: auto;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    /* Star Glow */
}

/* Ensure content is above background */
main,
nav {
    position: relative;
    z-index: 1;
}

/* Glass Mixin Class */
.glass-panel {
    background: rgba(30, 30, 30, 0.1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Shimmer effect for glass panels */
.glass-panel::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
    pointer-events: none;
}

/* Rainbow chromatic aberration edge effect for glass panels */
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(255, 100, 100, 0.6) 0%,
            rgba(255, 200, 100, 0.5) 15%,
            rgba(255, 255, 100, 0.4) 25%,
            rgba(100, 255, 100, 0.4) 40%,
            rgba(100, 200, 255, 0.4) 55%,
            rgba(150, 100, 255, 0.5) 70%,
            rgba(255, 100, 200, 0.5) 85%,
            rgba(255, 255, 255, 0.6) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.4s ease;
    z-index: 1;
}

.glass-panel:hover::after {
    transform: translateX(100%);
}

.glass-panel:hover::before {
    opacity: 1;
    background: linear-gradient(135deg,
            rgba(255, 100, 100, 1) 0%,
            rgba(255, 200, 100, 1) 15%,
            rgba(255, 255, 100, 1) 25%,
            rgba(100, 255, 100, 1) 40%,
            rgba(100, 200, 255, 1) 55%,
            rgba(150, 100, 255, 1) 70%,
            rgba(255, 100, 200, 1) 85%,
            rgba(255, 255, 255, 1) 100%);
    filter: brightness(1.5) saturate(150%);
}

.glass-panel:hover {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1),
        0 0 30px 5px rgba(255, 255, 255, 0.5),
        0 0 60px 10px rgba(255, 255, 255, 0.3),
        0 0 100px 20px rgba(200, 150, 255, 0.15);
}

/* Interactive Feature Boxes */
.feature-box-interactive {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-box-interactive:hover {
    transform: translateY(-8px);
}

.feature-box-interactive:hover .feature-image-container img {
    transform: scale(1.05);
}

.feature-image-container {
    position: relative;
    overflow: hidden;
}

/* Checkout Styles */
.checkout-container {
    padding-top: 120px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.checkout-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.form-group {
    display: flex;
    gap: 20px;
}

input,
select {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    font-size: 1rem;
    color: var(--text-color);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

input:focus,
select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
    border-color: var(--accent-color);
}

input::placeholder {
    color: var(--secondary-text);
}

.payment-methods {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.payment-option {
    padding: 20px;
    background: rgba(30, 30, 30, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    cursor: pointer;
    flex: 1;
    text-align: center;
    transition: all 0.3s ease;
    color: var(--text-color);
    position: relative;
    overflow: hidden;
}

.payment-option:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.payment-option.selected {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(0, 113, 227, 0.15);
    box-shadow: 0 0 20px rgba(0, 113, 227, 0.3);
}

.order-summary {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 40px;
    border-radius: 32px;
    height: fit-content;
    box-shadow: var(--glass-shadow);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: var(--secondary-text);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1.2rem;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

.full-width {
    width: 100%;
    margin-top: 20px;
}

/* Typography */
h1 {
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #a1a1a6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Dissolve Effect */
.hero-content {
    transition: opacity 0.1s ease-out, transform 0.1s ease-out, filter 0.1s ease-out;
    will-change: opacity, transform, filter;
}

.hero-content.dissolving {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
    filter: blur(10px);
}

.hero-content h1 {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(255, 255, 255, 0.2);
}

h2 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.2rem;
    color: var(--secondary-text);
    font-weight: 400;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}

/* Navbar - Ultra Minimal */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navbar scroll state - glass effect appears */
.navbar.scrolled {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.nav-content {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    max-width: 1400px;
    margin: 0 auto;
}



.nav-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-links a:not(.btn-primary) {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.8;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-links a:not(.btn-primary):hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    color: #000;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 16px 48px;
    background: rgba(30, 30, 30, 0.15);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Shimmer for buttons */
.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
    pointer-events: none;
}

/* Rainbow edge for buttons */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    padding: 1.5px;
    background: linear-gradient(135deg,
            rgba(255, 100, 100, 0.5) 0%,
            rgba(255, 200, 100, 0.4) 20%,
            rgba(100, 255, 100, 0.3) 40%,
            rgba(100, 200, 255, 0.4) 60%,
            rgba(150, 100, 255, 0.4) 80%,
            rgba(255, 100, 200, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.4;
    transition: all 0.4s ease;
    z-index: 1;
}

.btn-primary:hover {
    transform: scale(1.05);
    background: rgba(30, 30, 30, 0.05);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.3),
        0 0 60px rgba(200, 150, 255, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.btn-primary:hover::after {
    transform: translateX(100%);
}

.btn-primary:hover::before {
    opacity: 1;
    filter: brightness(1.5) saturate(150%);
}

.btn-primary.small {
    padding: 10px 24px;
    font-size: 0.9rem;
}

/* Animated Rainbow Border Button - Snake Effect with Following Glow */
.btn-rainbow-glow {
    position: relative;
    display: inline-block;
    padding: 20px 60px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background: #0f0f0f;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.4s ease;
}

/* Animated snake border - purple, blue, red gradient */
.btn-rainbow-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 60px;
    padding: 3px;
    background: conic-gradient(from var(--angle, 0deg),
            transparent 0deg,
            transparent 300deg,
            #8b00ff 320deg,
            #6a00ff 330deg,
            #4400ff 340deg,
            #0066ff 345deg,
            #0088ff 350deg,
            #ff0055 355deg,
            #ff0000 358deg,
            transparent 360deg);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin-snake 4s linear infinite;
    pointer-events: none;
}

/* Glow layer that follows the snake - purple, blue, red */
.btn-rainbow-glow::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 70px;
    background: conic-gradient(from var(--angle, 0deg),
            transparent 0deg,
            transparent 310deg,
            rgba(139, 0, 255, 0.6) 325deg,
            rgba(0, 100, 255, 0.8) 340deg,
            rgba(255, 0, 85, 0.6) 355deg,
            transparent 360deg);
    filter: blur(20px);
    animation: spin-snake 4s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes spin-snake {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Fallback for browsers without @property support */
@supports not (background: conic-gradient(from var(--angle), red, blue)) {

    .btn-rainbow-glow::before,
    .btn-rainbow-glow::after {
        animation: spin-snake-fallback 4s linear infinite;
    }

    @keyframes spin-snake-fallback {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

.btn-rainbow-glow:hover {
    transform: scale(1.05);
    color: #fff;
}

.btn-rainbow-glow:hover::before,
.btn-rainbow-glow:hover::after {
    animation-duration: 2s;
}

.link {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-left: 20px;
}

.link:hover {
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(0, 113, 227, 0.4);
}

/* Layout */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 120px 0;
}

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 100px;
}

.hero-content {
    margin-bottom: 60px;
    max-width: 700px;
    z-index: 2;
    padding: 40px;
    position: relative;
    transition: all 0.4s ease;
}

.hero-content h1 {
    text-align: center;
}

.hero-content p {
    text-align: center;
}


@keyframes rotateRainbow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateRainbow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Animated Rainbow Text for Prisma */
@keyframes prismaRainbow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.prisma-rainbow {
    background: linear-gradient(90deg,
            #ff0000,
            #ff7f00,
            #ffff00,
            #00ff00,
            #00ffff,
            #0000ff,
            #8b00ff,
            #ff0000);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: prismaRainbow 6s ease infinite;
    font-weight: inherit;
}

.hero-image-container {
    width: 100%;
    max-width: 900px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    transition: transform 0.5s ease;
    background: transparent !important;
    /* Ensure floating effect */
}

.hero-image-container:hover {
    transform: translateY(-10px);
}

.hero-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Intro */
.intro {
    text-align: center;
}

.section-text {
    max-width: 700px;
    margin: 0 auto;
}

/* Features */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: center;
}

.feature-card {
    padding: 40px 30px;
    background: rgba(30, 30, 30, 0.1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    box-shadow: var(--glass-shadow);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Shimmer effect */
.feature-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s;
    pointer-events: none;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 32px;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(255, 100, 100, 0.6) 0%,
            rgba(255, 200, 100, 0.5) 15%,
            rgba(255, 255, 100, 0.4) 25%,
            rgba(100, 255, 100, 0.4) 40%,
            rgba(100, 200, 255, 0.4) 55%,
            rgba(150, 100, 255, 0.5) 70%,
            rgba(255, 100, 200, 0.5) 85%,
            rgba(255, 255, 255, 0.6) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(255, 255, 255, 0.4),
        0 0 80px rgba(200, 150, 255, 0.2);
    background: rgba(30, 30, 30, 0.05);
    border-color: rgba(255, 255, 255, 0.9);
    border-width: 2px;
}

.feature-card:hover::after {
    transform: translateX(100%);
}

.feature-card:hover::before {
    opacity: 1;
    padding: 2px;
    filter: brightness(1.5) saturate(150%);
    background: linear-gradient(135deg,
            rgba(255, 50, 50, 0.9) 0%,
            rgba(255, 150, 50, 0.8) 12%,
            rgba(255, 255, 50, 0.7) 25%,
            rgba(50, 255, 50, 0.7) 37%,
            rgba(50, 150, 255, 0.7) 50%,
            rgba(100, 50, 255, 0.8) 62%,
            rgba(255, 50, 150, 0.8) 75%,
            rgba(255, 100, 100, 0.9) 87%,
            rgba(255, 255, 255, 0.9) 100%);
}

/* Large Image */
.large-image-section {
    width: 100%;
    padding: 0;
    overflow: hidden;
    margin: 60px 0;
}

.full-width-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Footer */
.footer {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
    padding: 60px 0;
    margin-top: 60px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.copyright {
    color: var(--secondary-text);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 30px;
}

/* Animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile-only line break utility */
.mobile-only {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-only {
        display: inline;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    .navbar {
        width: 95%;
        top: 10px;
    }

    .nav-content {
        padding: 0 20px;
    }

    .nav-links a:not(.btn-primary) {
        display: none;
    }

    .hero-content {
        padding: 20px;
    }

    /* Features page responsive grids */
    .glass-panel>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .glass-panel>div>div[style*="padding: 60px"] {
        padding: 30px !important;
    }
}

/* Color Picker Section */
.color-picker-section {
    text-align: center;
    padding: 120px 0;
}

.color-options {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
    padding: 20px;
    background: rgba(30, 30, 30, 0.1);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-radius: 100px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.color-swatch {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.color-swatch:hover {
    transform: scale(1.2);
}

.color-swatch.active {
    border-color: var(--accent-color);
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 113, 227, 0.4);
}

.swatch-black {
    background-color: #1d1d1f;
}

.swatch-gold {
    background-color: #d4af37;
}

.swatch-silver {
    background-color: #c0c0c0;
}

.color-display {
    margin-top: 80px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.color-display img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: scale(0.95);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
}

.color-display img.active {
    opacity: 1;
    transform: scale(1);
}

/* Special Glass Effect for Profile Box */
.special-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-radius: 60px 20px 60px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.2),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.special-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 40%);
    pointer-events: none;
    opacity: 0.6;
}

.special-glass:hover {
    transform: perspective(1000px) rotateX(0) rotateY(0) translateY(-10px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.3),
        inset 0 0 40px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(255, 255, 255, 0.2);
}

.special-glass h2 {
    background: linear-gradient(to right, #fff, #ccc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Cart Icon Styles */
.cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: visible;
}

.cart-icon svg {
    stroke: url(#cartRainbowGradient);
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 3px rgba(255, 200, 150, 0.3));
}

/* Define inline SVG gradient via CSS - fallback to white with rainbow tint */
.cart-icon svg {
    stroke: rgba(255, 220, 200, 0.9);
    filter:
        drop-shadow(0 0 2px rgba(255, 100, 100, 0.4)) drop-shadow(0 0 4px rgba(255, 200, 100, 0.3)) drop-shadow(0 0 6px rgba(100, 255, 200, 0.3)) drop-shadow(0 0 8px rgba(150, 100, 255, 0.3));
}

.cart-icon:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(1.15);
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.15),
        0 0 40px rgba(200, 150, 255, 0.1);
}

.cart-icon:hover svg {
    stroke: rgba(255, 255, 255, 0.9);
    filter:
        drop-shadow(0 0 4px rgba(255, 100, 100, 0.6)) drop-shadow(0 0 8px rgba(255, 200, 100, 0.5)) drop-shadow(0 0 12px rgba(100, 255, 100, 0.4)) drop-shadow(0 0 16px rgba(100, 200, 255, 0.4)) drop-shadow(0 0 20px rgba(150, 100, 255, 0.5)) drop-shadow(0 0 24px rgba(255, 100, 200, 0.4)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 100, 100, 0.5);
}

/* Cart Page Styles */
.cart-container {
    padding-top: 120px;
    min-height: 100vh;
}

.cart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.cart-items-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-item {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 30px;
    padding: 30px;
    align-items: center;
}

.cart-item-image {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-item-details h3 {
    margin: 0;
    font-size: 1.5rem;
}

.cart-item-description {
    color: var(--secondary-text);
    font-size: 0.95rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    width: fit-content;
}

.quantity-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.quantity-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.quantity-display {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

.cart-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.cart-item-price .price {
    font-size: 1.5rem;
    font-weight: 600;
}

.remove-btn {
    background: transparent;
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: #ff6b6b;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.remove-btn:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: #ff6b6b;
    transform: translateY(-2px);
}

.cart-empty {
    text-align: center;
    padding: 80px 40px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 32px;
}

.cart-empty h2 {
    margin-bottom: 20px;
}

.cart-empty p {
    margin-bottom: 30px;
}

.cart-summary {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 40px;
    border-radius: 32px;
    height: fit-content;
    box-shadow: var(--glass-shadow);
    position: sticky;
    top: 120px;
    box-sizing: border-box;
}

.cart-summary h3 {
    margin: 0 0 20px 0;
    font-size: 1.5rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 1rem;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 15px 0 20px 0;
}

.cart-summary hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.cart-summary .btn-primary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 16px 20px;
}

.cart-summary .link {
    margin: 0;
}

@media (max-width: 768px) {
    .cart-grid {
        grid-template-columns: 1fr;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cart-item-image {
        width: 100%;
        height: 200px;
    }

    .cart-item-price {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cart-summary {
        position: static;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* Language Switcher - positioned below navbar to avoid overlap */
.lang-switch {
    position: fixed !important;
    top: 80px !important;
    right: 20px !important;
    z-index: 998 !important;
    background: rgba(30, 30, 30, 0.3);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    padding: 6px 12px;
    display: flex;
    gap: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.lang-switch a {
    color: var(--secondary-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.lang-switch a.active {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.lang-switch a:hover {
    color: var(--text-color);
}

/* BluFilter Box Specifics */
.tech-gradient-text {
    margin-bottom: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 33%, #ef4444 66%, #3b82f6 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.tech-checklist-item {
    display: block;
    padding: 15px 20px;
    background: rgba(0, 113, 227, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(0, 113, 227, 0.2);
    color: #fff;
    font-size: 1rem;
    backdrop-filter: blur(5px);
}

/* Clean Confetti Effect */
.spark-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 8px;
    height: 8px;
    background: var(--confetti-color, #ffffff);
    animation: confettiFly 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.spark-particle.square {
    border-radius: 2px;
}

.spark-particle.circle {
    border-radius: 50%;
}

.spark-particle.line {
    width: 3px;
    height: 12px;
    border-radius: 2px;
}

@keyframes confettiFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx, 80px), var(--ty, -80px)) rotate(var(--rotation, 360deg)) scale(0.4);
    }
}

.tech-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 20%);
    pointer-events: none;
}

/* ==========================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZATION
   ========================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .container {
        padding: 0 30px;
    }

    .section-padding {
        padding: 60px 0;
    }

    /* Two-column grids become single column */
    .glass-panel>div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Feature boxes stack vertically */
    .feature-box-interactive>div {
        grid-template-columns: 1fr !important;
    }

    .feature-box-interactive .feature-image-container {
        min-height: 300px !important;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    p {
        font-size: 1rem;
    }

    .container {
        padding: 0 20px;
    }

    .section-padding {
        padding: 40px 0;
    }

    /* Navbar Mobile */
    .navbar {
        width: 95%;
        top: 10px;
    }

    .nav-content {
        height: 50px;
        padding: 0 15px;
    }

    .logo {
        font-size: 1.1rem;
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links a {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    .nav-links a.btn-primary.small {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Hero Section */
    .hero {
        min-height: 80vh;
        padding: 100px 20px 60px;
    }

    .hero-content {
        text-align: center;
    }

    /* Hero words stack on mobile */
    .hero-content>div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-content>div h1 {
        opacity: 1 !important;
    }

    .hero-actions {
        flex-direction: column;
        gap: 15px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
    }

    .btn-primary {
        padding: 14px 28px;
        font-size: 1rem;
        width: auto;
        max-width: 280px;
        text-align: center;
    }

    /* Hero content button centering */
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    /* Glass panels */
    .glass-panel {
        border-radius: 16px;
    }

    .glass-panel::before {
        border-radius: 16px;
    }

    /* Feature cards */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 30px;
    }

    /* Product page */
    .product-image-container {
        height: auto !important;
        min-height: 200px !important;
        width: calc(100% + 40px) !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        margin-top: -20px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .product-image-container .product-image {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .color-selector {
        justify-content: center;
    }

    .color-option {
        width: 35px;
        height: 35px;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-col {
        align-items: center;
    }

    /* Language switch */
    .lang-switch {
        top: 65px;
        right: 15px;
    }

    .lang-switch a {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Cart icon */
    .cart-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Intro section */
    .intro h1 {
        font-size: 2.5rem !important;
    }

    .hero-image-container {
        height: 300px !important;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .navbar {
        width: 98%;
        border-radius: 50px;
    }

    .hero {
        padding: 80px 15px 40px;
    }

    .glass-panel {
        border-radius: 12px;
    }

    .glass-panel::before {
        border-radius: 12px;
    }

    .section-padding {
        padding: 30px 0;
    }

    /* Feature image containers smaller */
    .feature-image-container {
        min-height: 200px !important;
    }

    /* Checkout/Cart */
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cart-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cart-item img {
        width: 100px;
        height: 100px;
    }
}

/* ==========================================
   HAMBURGER MENU - MOBILE NAVIGATION
   ========================================== */

/* Hamburger button - hidden on desktop */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
    z-index: 1001;
    background: none;
    border: none;
    padding: 0;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when open */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile navigation overlay */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .navbar.active {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        background: rgba(0, 0, 0, 0.98) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center !important;
        gap: 20px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1001;
        padding: 80px 20px;
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        height: 100vh;
        text-align: center !important;
        box-sizing: border-box;
    }

    .nav-links.active {
        display: flex !important;
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        font-size: 1.5rem !important;
        padding: 15px 30px !important;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
        display: block !important;
        text-align: center !important;
        width: auto !important;
    }

    .nav-links.active a {
        opacity: 1;
        transform: translateY(0);
        display: block !important;
    }

    /* Ensure hamburger stays visible and correct in full screen mode */
    .navbar.active .nav-content {
        z-index: 1002;
        position: relative;
    }

    .hamburger {
        z-index: 1003 !important;
        position: relative !important;
    }

    .nav-links.active a:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-links.active a:nth-child(2) {
        transition-delay: 0.15s;
    }

    .nav-links.active a:nth-child(3) {
        transition-delay: 0.2s;
    }

    .nav-links.active a:nth-child(4) {
        transition-delay: 0.25s;
    }

    .nav-links.active a:nth-child(5) {
        transition-delay: 0.3s;
    }

    .nav-links a.btn-primary.small {
        font-size: 1.2rem !important;
        padding: 15px 40px !important;
        width: auto !important;
        max-width: none !important;
        text-align: center !important;
    }

    .nav-links .cart-icon {
        margin-top: 20px;
        justify-content: center;
    }

    .nav-links .cart-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* --- UNIVERSAL MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {

    /* Global Container & Spacing */
    .container {
        padding: 0 20px !important;
    }

    .section-padding {
        padding: 60px 0 !important;
    }

    /* Typography */
    h1 {
        font-size: 2.5rem !important;
    }

    h2 {
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
    }

    h3 {
        font-size: 1.3rem !important;
    }

    p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Grids - Force Single Column */
    .feature-grid,
    .checkout-grid,
    .cart-grid,
    .values-grid,
    .glass-panel>div[style*="grid-template-columns"],
    .container>div[style*="display: grid"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        display: grid !important;
    }

    /* Flex Containers - Force Stack */
    .payment-methods,
    .footer-content,
    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Specific Page Fixes */

    /* Checkout */
    .checkout-box {
        padding: 20px !important;
    }

    .payment-method-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 20px;
    }

    .payment-arrow {
        transform: rotate(90deg);
        margin-top: 5px;
    }

    /* Product */
    .product-image-container {
        height: auto !important;
        margin-top: -20px !important;
        margin-bottom: 20px;
    }

    /* About Us - Fix timeline/history/values */
    .about-grid,
    .values-container {
        grid-template-columns: 1fr !important;
    }

    /* Navbar fixes */
    .navbar.active {
        border-radius: 0 !important;
    }

    /* Amazon/Cart Buttons on Product Page */
    div[style*="display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;"] {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100%;
    }

    #add-to-cart-btn,
    a[href*="amazon"] {
        width: 100% !important;
        justify-content: center;
    }

    /* Cart Page adjustments */
    .cart-table {
        display: block;
        overflow-x: auto;
        /* Allow scroll if table is wide */
    }

    /* Hide specific desktop elements if needed */
    .desktop-only {
        display: none !important;
    }

    /* Values Row (About page "Wir stehen für" section) */
    .values-row {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .values-row>div[style*="width: 1px"] {
        display: none !important;
    }

    .values-row>div[style*="max-width: 280px"] {
        max-width: 100% !important;
    }

    /* Language toggle - move below navbar and don't overlap content */
    .lang-switch {
        top: 70px !important;
        right: 20px !important;
        padding: 6px 12px !important;
    }

    /* Glass panels - add more padding on top to avoid lang switch overlap */
    .glass-panel {
        padding: 30px 20px !important;
    }

    /* Product page glass panel - no side padding for full-width image */
    .glass-panel[style*="padding: 0"] {
        padding: 0 !important;
    }

    /* Feature boxes text padding */
    .feature-box-interactive div[style*="padding: 60px"] {
        padding: 30px 20px !important;
    }

    /* Product page - button and text alignment */
    .glass-panel div[style*="padding: 40px"] {
        padding: 30px 20px !important;
    }

    /* Buttons full width on mobile */
    .glass-panel .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Fix inline button containers */
    .glass-panel div[style*="display: flex"][style*="gap: 20px"][style*="flex-wrap"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Product bullet points - left align text */
    .glass-panel ul {
        text-align: left !important;
        padding-left: 20px !important;
    }

    .glass-panel ul li {
        text-align: left !important;
    }

    /* Features page 3-column grid */
    div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Checkout page fixes */
    .form-group {
        flex-direction: column !important;
    }

    .payment-methods {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Contact page form */
    .kontakt-form input,
    .kontakt-form textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Contact form - glass panel on mobile */
    .glass-panel form .form-group {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .glass-panel form .form-group input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .glass-panel form textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 120px !important;
    }

    /* Glass panel padding on mobile */
    .glass-panel[style*="padding: 60px"] {
        padding: 30px !important;
    }

    /* Contact info row - stack vertically on mobile */
    .container>div[style*="margin-bottom: 80px"]>div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 40px !important;
        align-items: center !important;
    }

    /* Hide vertical dividers on mobile */
    .container>div[style*="margin-bottom: 80px"]>div[style*="display: flex"]>div[style*="width: 1px"] {
        display: none !important;
    }

    /* Product image container - full bleed on mobile */
    .product-image-container {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Product image - fill width completely */
    .product-image {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        display: block !important;
    }
}

/* ==========================================
   BENTO GRID LAYOUT
   ========================================== */

/* Bento Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Bento Item Base */
.bento-item {
    background: rgba(30, 30, 30, 0.15);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

/* Bento Item Glow Border */
.bento-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    padding: 2px;
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.5) 0%,
            rgba(139, 92, 246, 0.45) 50%,
            rgba(239, 68, 68, 0.5) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.4s ease;
    z-index: 1;
}

/* Bento Item Shimmer */
.bento-item::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 70%);
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.8s ease;
    pointer-events: none;
    z-index: 2;
}

.bento-item:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(139, 92, 246, 0.2),
        inset 0 0 30px rgba(255, 255, 255, 0.05);
}

.bento-item:hover::before {
    opacity: 1;
    filter: brightness(1.3);
}

.bento-item:hover::after {
    transform: translateX(100%) rotate(45deg);
}

/* Bento Item Content */
.bento-content {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

/* Bento Size Variants */
.bento-hero {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 400px;
}

.bento-large {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-wide {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 200px;
}

.bento-tall {
    grid-column: span 1;
    grid-row: span 2;
    min-height: 380px;
}

.bento-small {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 200px;
}

.bento-small .bento-content {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bento-small .bento-icon {
    margin: 0 auto 15px auto;
}

.bento-full {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 220px;
}

/* Bento Typography */
.bento-item h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    background: linear-gradient(135deg,
            #3b82f6 0%,
            #8b5cf6 50%,
            #ef4444 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.bento-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.bento-item p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Bento Big Number */
.bento-big-number {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 1) 0%,
            rgba(139, 92, 246, 1) 50%,
            rgba(239, 68, 68, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.4));
}

.bento-big-number span {
    font-size: 3rem;
}

/* Bento Icons */
.bento-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    stroke: url(#bentoIconGradient);
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.4));
}

/* Bento Image */
.bento-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
    z-index: 0;
}

.bento-item:hover .bento-image {
    transform: scale(1.08);
    filter: brightness(1.1);
}

.bento-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 30%,
            rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

/* Bento Floating Image */
.bento-floating-img {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
    animation: bentoFloat 4s ease-in-out infinite;
    transition: transform 0.4s ease;
}

.bento-item:hover .bento-floating-img {
    transform: scale(1.05) translateY(-10px);
}

@keyframes bentoFloat {

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

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

/* Bento Counter Animation */
.bento-counter {
    font-size: 5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg,
            rgba(59, 130, 246, 1) 0%,
            rgba(139, 92, 246, 1) 50%,
            rgba(239, 68, 68, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.5));
}

/* Bento Color Swatches */
.bento-colors {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.bento-color-img {
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.4));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bento-color-img:hover {
    transform: translateY(-10px) scale(1.1) rotate(3deg);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* Bento Pulse Effect */
.bento-pulse {
    position: relative;
}

.bento-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
    animation: bentoPulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes bentoPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.2;
    }
}

/* Bento CTA */
.bento-cta {
    background: linear-gradient(135deg,
            rgba(0, 212, 255, 0.15) 0%,
            rgba(124, 58, 237, 0.15) 100%);
    text-align: center;
}

.bento-cta .bento-content {
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
}

.bento-price {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.bento-price .currency {
    font-size: 1.5rem;
    vertical-align: super;
}

/* Bento Scroll Reveal */
.bento-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal delays */
.bento-reveal:nth-child(1) {
    transition-delay: 0s;
}

.bento-reveal:nth-child(2) {
    transition-delay: 0.1s;
}

.bento-reveal:nth-child(3) {
    transition-delay: 0.2s;
}

.bento-reveal:nth-child(4) {
    transition-delay: 0.3s;
}

.bento-reveal:nth-child(5) {
    transition-delay: 0.4s;
}

.bento-reveal:nth-child(6) {
    transition-delay: 0.5s;
}

.bento-reveal:nth-child(7) {
    transition-delay: 0.6s;
}

.bento-reveal:nth-child(8) {
    transition-delay: 0.7s;
}

/* Bento Benefits List */
.bento-benefits {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px;
}

.bento-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-text);
    font-size: 0.9rem;
}

.bento-benefit svg {
    width: 20px;
    height: 20px;
    stroke: #8b5cf6;
}

/* ==========================================
   BENTO RESPONSIVE
   ========================================== */

@media (max-width: 1200px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bento-hero {
        grid-column: span 2;
    }

    .bento-full {
        grid-column: span 3;
    }
}

@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .bento-hero,
    .bento-large,
    .bento-wide,
    .bento-full {
        grid-column: span 2;
    }

    .bento-tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-item h2 {
        font-size: 2rem;
    }

    .bento-big-number {
        font-size: 4rem;
    }

    .bento-counter {
        font-size: 3.5rem;
    }

    .bento-floating-img {
        max-height: 180px;
    }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .bento-hero,
    .bento-large,
    .bento-wide,
    .bento-tall,
    .bento-full {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-hero {
        min-height: 300px;
    }

    .bento-content {
        padding: 25px;
    }

    .bento-item h2 {
        font-size: 1.8rem;
    }

    .bento-big-number {
        font-size: 3rem;
    }

    .bento-big-number span {
        font-size: 1.5rem;
    }

    .bento-counter {
        font-size: 2.5rem;
    }

    .bento-price {
        font-size: 2.5rem;
    }

    .bento-benefits {
        flex-direction: column;
        gap: 10px;
    }

    .bento-color-img {
        height: 60px;
    }
}

.bento-group {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

@media (max-width: 768px) {
    .bento-group {
        grid-column: span 1;
        grid-row: auto;
        height: auto;
    }
}

/* BENTO COLOR SWATCHES */
.bento-color-swatches {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.bento-swatch {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.bento-swatch:hover {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.1);
}


.bento-swatch--grey {
    background: linear-gradient(135deg, #6b6b6b 0%, #3d3d3d 100%);
}

.bento-swatch--havanna {
    background: url('/assets/images/havanna.png') center/180% no-repeat;
    border-radius: 50% !important;
    /* Force round shape */
}

.color-option.havanna {
    background: url('https://schafundgrimm.de/assets/images/havanna.png') center/180% no-repeat !important;
    border-radius: 50% !important;
    /* Force round shape */
}

.bento-swatch--crystal {
    background: linear-gradient(135deg, #e8e8e8 0%, #b8b8b8 100%);
}

/* Tooltip/Label on hover */
.bento-swatch::after {
    content: attr(data-label);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bento-swatch:hover::after {
    opacity: 1;
}

/* --- FIXES: MOBILE BUTTONS & HAMBURGER --- */
@media (max-width: 768px) {

    /* Fix oversized buttons on mobile */
    .btn-primary,
    .cta-btn-premium {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        /* Ensure buttons aren't wider than screen */
        max-width: 100% !important;
        /* Prevent overflow issues */
        white-space: nowrap;
        width: auto !important;
        /* Reset width: 100% if set elsewhere, unless explicit full width needed */
    }

    /* Ensure SVGs in buttons scale down */
    .cta-btn-premium svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Fix Hamburger Menu X Asymmetry */
    /* Force specific dimensions to ensure symmetry */
    .hamburger {
        width: 30px;
        height: 24px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 !important;
        /* Reset any padding */
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px !important;
        /* Fixed height for consistency */
        background-color: #fff;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-origin: center;
        /* Critical for symmetric rotation */
        position: static !important;
        /* Reset absolute if set elsewhere */
        margin: 0 !important;
    }

    /* Active State - Symmetric X */
    .hamburger.active span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
}

/* ========================================= */
/* FIX: Sticky Footer & Scroll Issue Solver */
/* ========================================= */

html {
    height: 100%;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    position: relative;
    min-height: 100vh;
}

/* Page Wrapper for Sticky Footer Layout */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Actually, this needs to calculate remaining height? No, just flow. */
    /* The page wrapper comes AFTER the scroll section. */
    /* So it just needs to be a flex container for Main/Footer */
}

/* Make main content unlimited in height but pushing footer down */
main {
    flex: 1 0 auto;
    width: 100%;
}

/* Footer always at bottom, never with space below */
.footer {
    flex-shrink: 0;
    margin-bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    z-index: 2;
}

/* Physics background fixed coverage */
#physics-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* SCROLL WHEEL SECTION                                               */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* SCROLL WHEEL HERO SECTION (Sticky)                                 */
/* ------------------------------------------------------------------ */

.scroll-wheel-section {
    position: relative;
    height: 250vh;
    /* Adjusted for better pacing */
    background: transparent;
    z-index: 10;
}

/* Wrapper controlled by JS for robust sticky behavior */
.sticky-wrapper {
    position: absolute;
    /* Default start position */
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    overflow: hidden;
    /* Will be toggled to 'fixed' by JS */
}

.wheel-left {
    color: #fff;
    text-align: right;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.2;
    transition: all 0.5s ease;
    /* Default white state */
}

/* White Glow for "Verbessere" ONLY when sentence is complete */
.sentence-complete .wheel-left {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
    color: #fff;

    /* White Glow */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.5);

    animation: none;
    filter: none;
}

.wheel-container {
    height: 1.4em;
    overflow: visible;
    /* Fix clipping horizontally */
    /* overflow-y: hidden; isn't strictly needed if height is set, but let's be safe */
    position: relative;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.4;
    padding: 10px 30px;
    /* More horizontal padding to prevent ANY clipping */
    margin: -10px 0;
}

.wheel-content {
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wheel-item {
    height: 1.4em;
    display: flex;
    align-items: center;
    opacity: 0.3;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
    white-space: nowrap;
    padding: 0 10px;
}

/* White Glow for standard active words */
/* Standard Active Words (No Glow as per request) */
.wheel-item.active {
    opacity: 1;
    transform: scale(1);
    color: #fff;
    /* Removed text-shadow and filter */
}

/* Epic Effect: Last Word (Just Glow, No Bounce, No Gradient) */
.wheel-item:last-child.active {
    font-weight: 800;

    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
    color: #fff;

    /* White Glow */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.5);

    /* No animation, no border */
    animation: none;
    filter: none;
    border: none;
    box-shadow: none;

    padding: 0 10px;
    margin: 0;
}

@keyframes epicGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes epicPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes epicPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Gradient Colors for Items */
.wheel-highlight-1 {
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wheel-highlight-2 {
    background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wheel-highlight-3 {
    background: linear-gradient(90deg, #fbc2eb 0%, #a6c1ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wheel-highlight-4 {
    background: linear-gradient(90deg, #84fab0 0%, #8fd3f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .sticky-wrapper {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .wheel-left {
        text-align: center;
        margin-bottom: 0;
    }

    .wheel-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .wheel-content {
        align-items: center;
    }
}
/* --- CSS INTRO SPLASH STYLES (REFINED V7 - NO GLOW CLIP) --- */
#css-intro-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#css-intro-splash.fade-out {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.02);
}

.intro-content-wrapper {
    display: flex;
    /* 
       GAP ADJUSTMENT:
       Previously 20px. 
       We added 50px left-padding to items.
       To maintain visual distance (~20px), we need to pull them closer.
       Gap = 20px - 50px = -30px.
    */
    gap: -30px;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: -0.02em;
    align-items: center;
    height: 300px;
}

@media (max-width: 768px) {
    .intro-content-wrapper {
        font-size: 2rem;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        /* Reset gap for mobile stack */
    }

    .intro-wheel-container {
        /* On mobile, we don't need negative gap logic as they are stacked vertically */
        /* But high padding might shift it off center? */
        /* Let's reset padding on mobile items slightly or handle centering */
    }

    .intro-item {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.intro-left {
    color: #fff;
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
    z-index: 2;
    position: relative;
    animation: left-text-glow 5s linear forwards;
}

@keyframes left-text-glow {

    0%,
    70% {
        text-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
        color: #fff;
    }

    75% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }

    100% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 255, 255, 0.9),
            0 0 40px rgba(255, 255, 255, 0.7),
            0 0 80px rgba(255, 255, 255, 0.5);
    }
}

.intro-wheel-container {
    height: 3.6em;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Mask allows full width visibility now */
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 20%,
            black 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 20%,
            black 100%);
}

.intro-wheel-list {
    display: flex;
    flex-direction: column;
    transform: translateY(1.2em);
    animation: scrollListV4 5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.intro-item {
    height: 1.2em;
    display: flex;
    align-items: center;
    white-space: nowrap;

    /* 
       PADDING INCREASE:
       Add huge padding to allow text-shadow (glow) to render inside the container box.
       Container clips at its box edge.
       If text is at edge, shadow is clipped.
       If text has 50px padding, shadow renders in that padding.
    */
    padding-left: 50px;
    padding-right: 50px;

    transition: all 0.5s ease;
    transform-origin: center left;

    opacity: 0.3;
    filter: blur(0px);
    color: #555;
    transform: scale(1);
}

/* Colors */
.intro-item:nth-child(1) {
    color: #d65d5d;
}

.intro-item:nth-child(2) {
    color: #9d5dd6;
}

.intro-item:nth-child(3) {
    color: #5d7ad6;
}

.intro-item:nth-child(4) {
    color: #fff;
}


/* SCROLL ANIMATION */
@keyframes scrollListV4 {

    0%,
    15% {
        transform: translateY(1.2em);
    }

    25%,
    40% {
        transform: translateY(0em);
    }

    50%,
    65% {
        transform: translateY(-1.2em);
    }

    75%,
    100% {
        transform: translateY(-2.4em);
    }
}


/* HIGHLIGHT ANIMATIONS */
.intro-item:nth-child(1) {
    animation: highlight-v5-1 5s linear forwards;
}

.intro-item:nth-child(2) {
    animation: highlight-v5-2 5s linear forwards;
}

.intro-item:nth-child(3) {
    animation: highlight-v5-3 5s linear forwards;
}

.intro-item:nth-child(4) {
    animation: highlight-v5-final 5s linear forwards;
}

@keyframes highlight-v5-1 {

    0%,
    15% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 20px rgba(214, 93, 93, 0.6);
    }

    20%,
    100% {
        opacity: 0.3;
        transform: scale(1);
        text-shadow: none;
    }
}

@keyframes highlight-v5-2 {

    0%,
    20% {
        opacity: 0.3;
        transform: scale(1);
    }

    25%,
    40% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 20px rgba(157, 93, 214, 0.6);
    }

    45%,
    100% {
        opacity: 0.3;
        transform: scale(1);
        text-shadow: none;
    }
}

@keyframes highlight-v5-3 {

    0%,
    45% {
        opacity: 0.3;
        transform: scale(1);
    }

    50%,
    65% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 20px rgba(93, 122, 214, 0.6);
    }

    70%,
    100% {
        opacity: 0.3;
        transform: scale(1);
        text-shadow: none;
    }
}

@keyframes highlight-v5-final {

    0%,
    70% {
        opacity: 0.3;
        transform: scale(1);
        text-shadow: none;
    }

    75% {
        opacity: 1;
        transform: scale(1);
        color: #fff;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        color: #fff;
        text-shadow:
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 255, 255, 0.9),
            0 0 40px rgba(255, 255, 255, 0.7),
            0 0 80px rgba(255, 255, 255, 0.5);
    }
}