:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #666666;
    --color-accent: #000000;
    --font-main: 'Inter', sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;
    --header-height: 80px;
    /* Define header height */
    --spacing-container: 2rem;
    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main), var(--font-jp);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1001;
    background-color: rgba(255, 255, 255, 0.8);
    /* Semi-transparent white */
    backdrop-filter: blur(10px);
    /* Optional: Adds a blur effect for a premium look */
    transition: background-color 0.3s ease;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.logo-img {
    height: 3.8rem;
    width: auto;
    object-fit: contain;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 1;
}

/* Hamburger Menu (Hidden on Desktop) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}

.hamburger span {
    width: 30px;
    height: 2px;
    background-color: var(--color-text);
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-link {
    font-size: 2rem;
    text-decoration: none;
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Hero Section - Split Layout */
.hero {
    display: flex;
    flex-direction: row;
    /* Desktop: Text Left, Image Right */
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    padding-top: var(--header-height);
    /* Push content down */
}

.hero-left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
    background-color: #fff;
}

.hero-right {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img-split {
    width: 100%;
    height: calc(100vh - var(--header-height));
    /* Fit remaining height */
    object-fit: contain;
    /* Prevent cropping */
    display: block;
    opacity: 0;
    /* Init hidden */
    animation: fadeIn 3s linear forwards;
}

.hero-title {
    font-family: 'good-times', sans-serif;
    /* Applied Good Times font */
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text);
    opacity: 0;
    /* Init hidden */
    animation: fadeIn 3s linear forwards;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--color-text);
    color: var(--color-bg);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-text);
}

.btn-secondary {
    padding: 0.8rem 2rem;
    background: transparent;
    border: 1px solid var(--color-text-muted);
    color: var(--color-text);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

.btn-secondary:hover {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
}

.button-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: stretch;
    width: auto;
}

/* Sections */
.section {
    padding: 8rem 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-container);
}

.section-title {
    font-family: 'good-times', sans-serif;
    font-size: 2rem;
    /* Reduced from 3rem */
    font-weight: 800;
    text-align: center;
    margin-bottom: 4rem;
    letter-spacing: -1px;
    text-transform: uppercase;
}

/* Products */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 4rem;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* cursor: pointer; Removed as per user request */
}

.product-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: 1.5rem;
    position: relative;
    /* cursor: pointer; Removed as per user request */
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

.product-card:hover .hover-img {
    opacity: 1;
}

.product-card:hover .product-img {
    transform: scale(1.05);
}

.product-info {
    text-align: center;
}

.product-name {
    font-family: 'good-times', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.product-category {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* About Section */
.about-section {
    background-color: #f9f9f9;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-text {
    font-size: 1.5rem;
    line-height: 1.8;
    font-weight: 300;
}

.concept-img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    border-radius: 8px;
    /* Optional: adds a slight premium touch */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Optional: adds depth */
}

@media (max-width: 768px) {
    .concept-img {
        height: 300px;
        object-fit: cover;
    }
}

/* Footer */
.footer {
    padding: 4rem 0;
    border-top: 1px solid #eaeaea;
    text-align: center;
}

.footer-bottom p {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.footer-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.footer-btn {
    min-width: 200px;
    text-align: center;
}

/* Mobile Responsive for Footer actions */
@media (max-width: 768px) {
    .footer-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-btn {
        width: 100%;
    }
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.delay-1 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
    transition-delay: 0.4s;
}

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

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    67% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Hamburger Menu (Hidden on Desktop) */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}

.hamburger span {
    width: 30px;
    height: 2px;
    background-color: var(--color-text);
    transition: all 0.3s ease;
}

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

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

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

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-link {
    font-size: 2rem;
    text-decoration: none;
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .logo-text {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .hero {
        flex-direction: column-reverse;
        /* Mobile: Image Top, Text Bottom */
        height: auto;
        min-height: auto;
        /* Padding is already inherited, keeping content pushed down */
    }

    .hero-left {
        flex: none;
        width: 100%;
        padding: 4rem 2rem;
        height: auto;
    }

    .hero-right {
        flex: none;
        width: 100%;
        height: auto;
        padding: 0;
        /* Remove side padding to allow full width */
    }

    .hero-img-split {
        height: auto;
        width: 100%;
        /* Full screen width */
        max-height: none;
        /* Allow full height */
        object-fit: cover;
        /* Cover or Contain? User asked for "Full Width". 
                              Use 'cover' to fill width without empty space if aspect ratio differs, 
                              or 'contain' if they want full image. 
                              User earlier asked for "Not cropped" (contain). 
                              Now "Full width big display". 
                              If I use 'contain' and width 100%, height auto, it fits.
                              If I use 'cover', it crops but fills.
                              
                              User said "Mobile: to-image.webp width full big display".
                              Let's stick to width 100% and height auto (contain aspect ratio). 
                              If the image is portrait, it will be huge. If landscape, it will fit width.
                              Since earlier constraint was "No cropping", I will trust width: 100% + height: auto. 
                           */
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .section {
        padding: 5rem 0;
    }

    .product-grid {
        gap: 3rem;
    }

    .about-text {
        font-size: 1.2rem;
    }
}

/* Slider Container */
.slider-container {
    padding: 1rem 0;
    width: 60%;
    margin: 10px auto 0;
    /* Changed from absolute to margin for spacing */
    position: relative;
    /* Changed from absolute */
    z-index: 10;
}

/* Range Input Styling */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]:focus {
    outline: none;
}

/* Track */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1px;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1px;
}

/* Thumb */
input[type=range]::-webkit-slider-thumb {
    height: 18px;
    /* Increased from 12px */
    width: 18px;
    /* Increased from 12px */
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
    /* Adjusted for larger thumb */
    /* Centers thumb on track */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}

input[type=range]::-moz-range-thumb {
    height: 18px;
    /* Increased from 12px */
    width: 18px;
    /* Increased from 12px */
    border: none;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type=range]::-moz-range-thumb:hover {
    transform: scale(1.2);
}