/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-red: #EE1515;
    --primary-white: #FFFFFF;
    --primary-black: #2C2C2C;
    --secondary-yellow: #FFCB05;
    --secondary-blue: #3B4CCA;
    --accent-orange: #FF9800;
    --light-gray: #F5F5F5;
    --dark-gray: #4A4A4A;
    --shadow: rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-black);
    overflow-x: hidden;
    background: linear-gradient(135deg, #FFEFBA 0%, #FFFFFF 100%);
}

html {
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Modern Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: linear-gradient(135deg, 
        #1a1a2e 0%, 
        #16213e 25%, 
        #0f3460 50%, 
        #533483 75%, 
        #e94560 100%);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 6px 20px rgba(233, 69, 96, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
    padding: 0;
    backdrop-filter: blur(15px);
    border-bottom: 2px solid rgba(233, 69, 96, 0.3);
    min-height: 70px;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 25%,
        rgba(233, 69, 96, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 100%);
    animation: synchronized-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

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

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: absolute;
    left: 30px;
    z-index: 10;
}

/* Navbar Logo Styles */
.nav-pokeball {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.nav-pokeball:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 12px rgba(233, 69, 96, 0.4)) drop-shadow(0 0 25px rgba(233, 69, 96, 0.6)) drop-shadow(0 0 50px rgba(233, 69, 96, 0.3));
    animation: navPokeballSpin 1s linear infinite;
}

@keyframes navPokeballSpin {
    from {
        transform: scale(1.1) rotate(0deg);
    }
    to {
        transform: scale(1.1) rotate(360deg);
    }
}

.nav-logo-text {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.nav-logo-text:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(233, 69, 96, 0.4)) drop-shadow(0 0 20px rgba(233, 69, 96, 0.6)) drop-shadow(0 0 40px rgba(233, 69, 96, 0.3));
}

.nav-menu {
    display: flex;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 35px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(233, 69, 96, 0.2);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(233, 69, 96, 0.3), 
        transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    background: rgba(233, 69, 96, 0.2);
    transform: translateY(-2px) scale(1.05);
    color: var(--primary-white);
    box-shadow: 0 8px 25px rgba(233, 69, 96, 0.3);
}

.nav-link:active {
    transform: translateY(-1px) scale(0.98);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(233, 69, 96, 0.2);
}

.hamburger:hover {
    background: rgba(233, 69, 96, 0.1);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.2);
}

.hamburger span {
    width: 26px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-white), rgba(233, 69, 96, 0.8));
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hamburger:hover span {
    background: var(--primary-white);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 0;
    transition: all 0.3s ease;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 15% 20%, rgba(238, 21, 21, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(83, 52, 131, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(15, 52, 96, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, 
            #1a1a2e 0%, 
            #16213e 20%, 
            #0f3460 40%, 
            #533483 60%, 
            #e94560 80%,
            #ff6b9d 100%);
    background-size: 100% 100%;
    z-index: -1;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0%),
        radial-gradient(circle at 50px 50px, rgba(233, 69, 96, 0.1) 1px, transparent 0%),
        radial-gradient(circle at 100px 100px, rgba(83, 52, 131, 0.08) 1px, transparent 0%),
        radial-gradient(circle at 150px 150px, rgba(15, 52, 96, 0.06) 1px, transparent 0%),
        radial-gradient(circle at 20% 30%, rgba(233, 69, 96, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(83, 52, 131, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(15, 52, 96, 0.08) 0%, transparent 70%);
    background-size: 200px 200px, 150px 150px, 180px 180px, 220px 220px, 100% 100%, 100% 100%, 100% 100%;
    opacity: 0.8;
    animation: pattern-move 20s ease-in-out infinite;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 25%,
        rgba(233, 69, 96, 0.12) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%);
    animation: synchronized-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pattern-move {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }
    25% {
        background-position: 10% 10%, -10% 10%, 5% -5%;
    }
    50% {
        background-position: -5% 20%, 15% -10%, -10% 10%;
    }
    75% {
        background-position: 15% -5%, -5% 20%, 10% 5%;
    }
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(233, 69, 96, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(83, 52, 131, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(15, 52, 96, 0.08) 0%, transparent 70%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    opacity: 0.8;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 25%,
        rgba(233, 69, 96, 0.12) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%);
    animation: synchronized-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

/* Synchronized shimmer animation for navbar and hero */
@keyframes synchronized-shimmer {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
}


.hero-content {
    text-align: center;
    z-index: 10;
    padding: 120px 20px 40px 20px;
    margin-top: 80px;
}

.hero-logo-container {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero-pokeball {
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: gentleFloat 4s ease-in-out infinite;
}

.hero-pokeball:hover {
    transform: scale(1.08) rotate(15deg);
    filter: drop-shadow(0 20px 50px rgba(233, 69, 96, 0.4)) drop-shadow(0 0 30px rgba(233, 69, 96, 0.6));
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero-logo-text {
    width: 400px;
    max-width: 90vw;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hero-logo-text:hover {
    transform: scale(1.05);
    filter: drop-shadow(6px 6px 12px rgba(233, 69, 96, 0.6));
}

.logo-placeholder h1 {
    font-size: 64px;
    font-weight: 800;
    color: var(--primary-white);
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 4px;
}

.hero-subtitle {
    font-size: 22px;
    color: var(--primary-white);
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--secondary-yellow) 0%, #FFA000 100%);
    color: var(--primary-black);
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(255, 203, 5, 0.4);
    border: 4px solid var(--primary-black);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 203, 5, 0.6);
}

.pokeball-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--primary-red) 50%, var(--primary-white) 50%);
    border: 3px solid var(--primary-black);
    position: relative;
}

.pokeball-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--primary-white);
    border: 2px solid var(--primary-black);
    border-radius: 50%;
}


/* Hero Decorations */
.hero-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Base floating pokeball styles - overridden by physics system */

/* Physics-based pokéball system */
.floating-pokeball {
    position: absolute;
    width: var(--pokeball-size, 70px);
    height: var(--pokeball-size, 70px);
    object-fit: contain;
    opacity: 0.6;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
    pointer-events: none;
    z-index: 2;
    border-radius: 50%;
    transition: none;
    will-change: transform;
}

/* Initial random positions and sizes */
.pokeball-1 { --pokeball-size: 60px; top: 10%; left: 15%; }
.pokeball-2 { --pokeball-size: 80px; top: 20%; right: 20%; }
.pokeball-3 { --pokeball-size: 50px; bottom: 25%; left: 10%; }
.pokeball-4 { --pokeball-size: 75px; top: 60%; left: 30%; }
.pokeball-5 { --pokeball-size: 65px; top: 40%; right: 15%; }
.pokeball-6 { --pokeball-size: 55px; bottom: 15%; right: 25%; }
.pokeball-7 { --pokeball-size: 70px; top: 80%; left: 40%; }
.pokeball-8 { --pokeball-size: 45px; top: 30%; left: 60%; }

/* Physics-based pokéball animations removed - handled by JavaScript */

/* Section Styles */
section {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-black);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.title-decoration {
    font-size: 40px;
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--dark-gray);
    margin-bottom: 50px;
}

/* About Section */
.about-section {
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(circle at 15% 25%, rgba(255, 203, 5, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(238, 21, 21, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(59, 76, 202, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 25% 75%, rgba(83, 52, 131, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 45%),
        linear-gradient(135deg, 
            #667eea 0%, 
            #764ba2 20%, 
            #f093fb 40%, 
            #f5576c 60%, 
            #4facfe 80%,
            #00f2fe 100%);
    background-size: 100% 100%;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.25);
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.12) 1px, transparent 0%),
        radial-gradient(circle at 60px 60px, rgba(255, 203, 5, 0.08) 1px, transparent 0%),
        radial-gradient(circle at 120px 120px, rgba(238, 21, 21, 0.06) 1px, transparent 0%),
        radial-gradient(circle at 180px 180px, rgba(59, 76, 202, 0.05) 1px, transparent 0%),
        radial-gradient(circle at 30% 40%, rgba(255, 203, 5, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(238, 21, 21, 0.1) 0%, transparent 50%);
    background-size: 250px 250px, 200px 200px, 180px 180px, 220px 220px, 100% 100%, 100% 100%;
    opacity: 0.9;
    animation: pattern-move 25s ease-in-out infinite;
    pointer-events: none;
}

.about-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 203, 5, 0.08) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        transparent 100%);
    animation: synchronized-shimmer 7s ease-in-out infinite;
    pointer-events: none;
}


.about-content {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.about-section .container {
    position: relative;
    z-index: 10;
}

.about-text {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.about-card {
    background: var(--primary-white);
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border: 3px solid var(--primary-black);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.card-icon {
    font-size: 60px;
    margin-bottom: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.about-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-blue);
    margin-bottom: 15px;
    text-align: center;
    transition: color 0.3s ease;
}

.about-card:hover h3 {
    color: var(--primary-red);
}

.about-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--dark-gray);
    text-align: center;
}

/* About Section Pokéball Decorations */
.about-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.about-pokeball {
    position: absolute;
    width: 60px;
    height: 60px;
    object-fit: contain;
    opacity: 0.5;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    pointer-events: none;
}

.about-pokeball-1 {
    top: 10%;
    left: 10%;
    animation: about-float-simple 20s linear infinite;
}

.about-pokeball-2 {
    top: 20%;
    right: 15%;
    animation: about-float-simple 25s linear infinite reverse;
}

.about-pokeball-3 {
    bottom: 15%;
    left: 12%;
    animation: about-float-simple 22s linear infinite;
    animation-delay: 5s;
}

.about-pokeball-4 {
    bottom: 25%;
    right: 10%;
    animation: about-float-simple 24s linear infinite reverse;
    animation-delay: 8s;
}

@keyframes about-float-simple {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(20px, -20px) rotate(90deg);
    }
    50% {
        transform: translate(0, -40px) rotate(180deg);
    }
    75% {
        transform: translate(-20px, -20px) rotate(270deg);
    }
}

/* About Section Title Styling */
.about-section .section-title {
    color: var(--primary-white);
    text-shadow: 
        3px 3px 8px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 203, 5, 0.4),
        0 0 40px rgba(238, 21, 21, 0.3);
    position: relative;
    z-index: 10;
}

.about-section .title-decoration {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.about-section .section-subtitle {
    color: var(--primary-white);
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 203, 5, 0.3);
    position: relative;
    z-index: 10;
}

/* Machines Section */
.machines-section {
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59, 76, 202, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(238, 21, 21, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 203, 5, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, 
            #667eea 0%, 
            #764ba2 30%, 
            #f093fb 60%, 
            #f5576c 100%);
    background-size: 100% 100%;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

.machines-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 40%, rgba(59, 76, 202, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 60%, rgba(238, 21, 21, 0.1) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%;
    opacity: 0.8;
    animation: pattern-move 25s ease-in-out infinite;
    pointer-events: none;
}

.machines-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 25%,
        rgba(59, 76, 202, 0.1) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%);
    animation: synchronized-shimmer 8s ease-in-out infinite;
    pointer-events: none;
}

.machines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 10;
}

.machine-card {
    background: var(--primary-white);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 8px 25px var(--shadow);
    border: 4px solid var(--primary-black);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

.machine-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 35px var(--shadow);
}

.machine-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.placeholder-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.vending-machine-icon {
    font-size: 80px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.location-badge {
    background: var(--secondary-yellow);
    color: var(--primary-black);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 18px;
    border: 3px solid var(--primary-black);
}

.machine-info {
    padding: 25px;
}

.machine-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-black);
    margin-bottom: 10px;
}

.machine-info p {
    font-size: 16px;
    color: var(--dark-gray);
    margin-bottom: 8px;
}

.machine-status {
    font-weight: 600;
    margin: 15px 0;
}

.machine-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #C41E1E 100%);
    color: var(--primary-white);
    border: 3px solid var(--primary-black);
    border-radius: 25px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.machine-button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px var(--shadow);
}

/* Gallery Section */
.gallery-section {
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(circle at 30% 20%, rgba(255, 203, 5, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(238, 21, 21, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(59, 76, 202, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, 
            #ffecd2 0%, 
            #fcb69f 30%, 
            #ff9a9e 60%, 
            #fecfef 100%);
    background-size: 100% 100%;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.15);
}

.gallery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 40% 30%, rgba(255, 203, 5, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(238, 21, 21, 0.1) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%;
    opacity: 0.8;
    animation: pattern-move 22s ease-in-out infinite;
    pointer-events: none;
}

.gallery-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 203, 5, 0.1) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%);
    animation: synchronized-shimmer 7s ease-in-out infinite;
    pointer-events: none;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 10;
}

.gallery-item {
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 4px solid var(--primary-black);
    box-shadow: 0 5px 15px var(--shadow);
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px var(--shadow);
}

.gallery-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.gallery-icon {
    font-size: 80px;
}

.gallery-placeholder p {
    color: var(--primary-white);
    font-weight: 700;
    font-size: 18px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    font-size: 48px;
    color: var(--primary-white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    color: var(--secondary-yellow);
    transform: rotate(90deg);
}

.lightbox-image {
    max-width: 600px;
    max-height: 600px;
}

/* Contact Section */
.contact-section {
    position: relative;
    overflow: hidden;
    background: 
        radial-gradient(circle at 25% 40%, rgba(238, 21, 21, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 75% 60%, rgba(255, 203, 5, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(59, 76, 202, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, 
            #fa709a 0%, 
            #fee140 30%, 
            #f093fb 60%, 
            #f5576c 100%);
    background-size: 100% 100%;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 50%, rgba(238, 21, 21, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(255, 203, 5, 0.1) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%;
    opacity: 0.8;
    animation: pattern-move 24s ease-in-out infinite;
    pointer-events: none;
}

.contact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 25%,
        rgba(238, 21, 21, 0.1) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%);
    animation: synchronized-shimmer 6.5s ease-in-out infinite;
    pointer-events: none;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    position: relative;
    z-index: 10;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-card {
    background: var(--primary-white);
    padding: 30px;
    border-radius: 20px;
    border: 4px solid var(--primary-black);
    box-shadow: 0 5px 15px var(--shadow);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.contact-card:hover {
    transform: translateX(10px);
}

.contact-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.contact-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-red);
    margin-bottom: 10px;
}

.contact-card p {
    font-size: 16px;
    color: var(--dark-gray);
    line-height: 1.6;
}

.contact-form-container {
    background: var(--primary-white);
    padding: 40px;
    border-radius: 25px;
    border: 4px solid var(--primary-black);
    box-shadow: 0 8px 25px var(--shadow);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group label {
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-black);
}

.form-group input,
.form-group textarea {
    padding: 15px;
    border: 3px solid var(--primary-black);
    border-radius: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 10px rgba(238, 21, 21, 0.3);
}

.submit-button {
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #C41E1E 100%);
    color: var(--primary-white);
    border: 3px solid var(--primary-black);
    border-radius: 25px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow);
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.submit-button:active:not(:disabled) {
    transform: translateY(-1px);
}

.button-icon {
    font-size: 24px;
    display: inline-flex;
    align-items: center;
}

/* Form Status Messages */
.form-status {
    margin-top: 15px;
    padding: 15px 20px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.form-status.success,
.form-status.error {
    opacity: 1;
    transform: translateY(0);
}

.form-status.success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 3px solid #28a745;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.form-status.error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border: 3px solid #dc3545;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* Input validation styles */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
}

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
    border-color: #28a745;
}

/* Footer */
.footer {
    background: 
        radial-gradient(circle at 20% 30%, rgba(238, 21, 21, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(59, 76, 202, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 203, 5, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, 
            #1a1a2e 0%, 
            #16213e 20%, 
            #0f3460 40%, 
            #533483 60%, 
            #2c2c2c 80%,
            #1a1a1a 100%);
    color: var(--primary-white);
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

.footer-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25px 25px, rgba(238, 21, 21, 0.1) 2%, transparent 0%),
        radial-gradient(circle at 75px 75px, rgba(255, 255, 255, 0.1) 2%, transparent 0%),
        radial-gradient(circle at 125px 125px, rgba(255, 203, 5, 0.08) 2%, transparent 0%);
    background-size: 100px 100px, 150px 150px, 200px 200px;
    opacity: 0.3;
    animation: pattern-move 30s ease-in-out infinite;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.footer-section h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--secondary-yellow);
}

.footer-section p {
    line-height: 1.6;
    margin-bottom: 15px;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: var(--primary-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--secondary-yellow);
    padding-left: 5px;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid var(--primary-white);
    color: var(--primary-white);
    background: rgba(255, 255, 255, 0.05);
}

.social-link span {
    flex: 1;
}

.social-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.social-link:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.social-link:hover .social-icon {
    opacity: 1;
    transform: scale(1.1);
}

.facebook:hover {
    background: #1877F2;
    border-color: #1877F2;
}

.instagram:hover {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
    border-color: #DD2A7B;
}

.location:hover {
    background: #34A853;
    border-color: #34A853;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.footer-bottom p {
    margin-bottom: 10px;
    font-size: 14px;
}

.disclaimer {
    font-size: 12px;
    opacity: 0.7;
}

/* Responsive Design */
/* Tablet Styles */
@media (max-width: 1024px) {
    .navbar {
        min-height: 60px;
    }

    .nav-container {
        padding: 0 20px;
        height: 60px;
    }

    .nav-logo {
        left: 20px;
        gap: 6px;
    }

    .nav-pokeball {
        width: 28px;
        height: 28px;
    }

    .nav-logo-text {
        height: 20px;
    }

    .nav-menu {
        gap: 3px;
        padding: 6px 12px;
    }

    .nav-link {
        font-size: 13px;
        padding: 10px 16px;
    }

    .hamburger {
        right: 20px;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .navbar {
        min-height: 50px;
    }

    .nav-container {
        padding: 0 15px;
        height: 50px;
        justify-content: space-between;
    }

    .nav-logo {
        left: 15px;
        gap: 4px;
        position: absolute;
    }

    .nav-pokeball {
        width: 24px;
        height: 24px;
    }

    .nav-logo-text {
        height: 16px;
    }

    .hamburger {
        display: flex;
        right: 15px;
    }

    .nav-menu {
        position: fixed;
        top: 50px;
        left: -100%;
        width: 100%;
        flex-direction: column;
        background: linear-gradient(135deg, 
            #1a1a2e 0%, 
            #16213e 25%, 
            #0f3460 50%, 
            #533483 75%, 
            #e94560 100%);
        padding: 30px;
        gap: 15px;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.3),
            0 6px 20px rgba(233, 69, 96, 0.2);
        backdrop-filter: blur(15px);
        border: none;
        border-radius: 0 0 20px 20px;
        transform: none;
    }

    .nav-menu.active {
        left: 0;
    }

    .logo-pokeball {
        width: 140px;
        height: 140px;
    }

    .logo-image {
        width: 300px;
    }

    .logo-placeholder h1 {
        font-size: 40px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .section-title {
        font-size: 36px;
    }

    .about-text {
        grid-template-columns: 1fr;
    }

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

    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .cta-button {
        font-size: 18px;
        padding: 15px 30px;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 10px 0;
        min-height: 50px;
    }

    .nav-container {
        padding: 0 5px;
        margin: 0 auto;
        max-width: 1200px;
    }

    .nav-logo {
        gap: 3px;
        margin-left: 1px;
        position: static;
    }

    .pokeball-image {
        width: 18px;
        height: 18px;
        transform: scale(0.8);
    }

    .logo-image {
        height: 12px;
        transform: scale(0.8);
    }

    .hamburger {
        margin-right: 5px;
    }

    .hamburger span {
        width: 25px;
        height: 2px;
    }

    .logo-pokeball {
        width: 100px;
        height: 100px;
    }

    .logo-image {
        width: 240px;
    }

    .logo-placeholder {
        gap: 15px;
    }

    .logo-placeholder h1 {
        font-size: 32px;
    }

    .section-title {
        font-size: 28px;
        flex-direction: column;
        gap: 10px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .contact-form-container {
        padding: 25px;
    }

    /* Pokémon Question Mark Mobile Styles */
    .question-mark-container {
        height: 180px;
    }

    .question-mark-image {
        max-width: 100px;
        max-height: 100px;
    }

    .machine-details .vending-machine-icon {
        font-size: 50px;
    }

    .machine-details .location-badge {
        font-size: 14px;
        padding: 8px 20px;
    }

    .coming-soon {
        font-size: 16px;
    }

    /* Floating Pokéballs Mobile */
    .floating-pokeball {
        width: 70px;
        height: 70px;
        opacity: 0.5;
    }

    /* About Section Pokéballs Mobile */
    .about-pokeball {
        width: 50px;
        height: 50px;
        opacity: 0.5;
    }
}

/* Pokémon Question Mark Container - Top Section */
.question-mark-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 25%, #03A9F4 50%, #0288D1 75%, #0277BD 100%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(0, 0, 0, 0.2);
}

.question-mark-image {
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: questionMarkFloat 3s ease-in-out infinite;
}

.question-mark-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.4) 30deg,
        transparent 60deg,
        rgba(255, 255, 255, 0.4) 90deg,
        transparent 120deg,
        rgba(255, 255, 255, 0.4) 150deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.4) 210deg,
        transparent 240deg,
        rgba(255, 255, 255, 0.4) 270deg,
        transparent 300deg,
        rgba(255, 255, 255, 0.4) 330deg,
        transparent 360deg
    );
    animation: shimmer 4s linear infinite;
    pointer-events: none;
}

/* Removed the white question mark overlay */

.machine-card:hover .question-mark-image {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.machine-card:hover .question-mark-container::before {
    animation-duration: 2s;
}

/* Machine Details - Bottom Section */
.machine-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
}

.machine-details .vending-machine-icon {
    font-size: 60px;
    animation: bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.machine-details .location-badge {
    background: linear-gradient(135deg, var(--secondary-yellow) 0%, #FFA000 100%);
    color: var(--primary-black);
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 16px;
    border: 3px solid var(--primary-black);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.machine-details .location-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Coming Soon Text */
.coming-soon {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-red);
    text-align: center;
    margin: 15px 0 0 0;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(238, 21, 21, 0.1) 0%, rgba(238, 21, 21, 0.2) 100%);
    border-radius: 15px;
    border: 2px dashed var(--primary-red);
    animation: comingSoonPulse 2s ease-in-out infinite;
}

@keyframes comingSoonPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Removed unused glow animation */

/* Animations */
@keyframes questionMarkFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Removed unused pulse animation */

@keyframes shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.pokeball-icon:hover {
    animation: shake 0.5s ease-in-out;
}