/* ===== CUSTOM PROPERTIES ===== */
:root {
    --plum-50: #F5EEF8;
    --plum-100: #E8D5F0;
    --plum-200: #D4AFE0;
    --plum-300: #BB7FCC;
    --plum-400: #A056B0;
    --plum-500: #7B2D8E;
    --plum-600: #6A2078;
    --plum-700: #561860;
    --plum-800: #44134C;
    --plum-900: #320E38;
    --plum-950: #1E0722;
    --amber-300: #FFB74D;
    --amber-400: #FFA000;
    --amber-500: #F5A623;
    --amber-600: #E8940A;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ===== SECTION LABEL ===== */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--amber-400);
}

.section-label::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--amber-400);
    border-radius: 1px;
}

/* ===== NAVIGATION ===== */
.nav-scrolled {
    background: rgba(30, 7, 34, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(123, 45, 142, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nav-scrolled .menu-line {
    background: var(--amber-400);
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
    background: rgba(30, 7, 34, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(123, 45, 142, 0.2);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-link {
    display: block;
}

/* ===== HERO ===== */
.hero {
    background: var(--plum-950);
}

.hero-bg {
    opacity: 0.5;
}

.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(30, 7, 34, 0.85) 0%,
        rgba(50, 14, 56, 0.75) 40%,
        rgba(30, 7, 34, 0.85) 100%
    );
}

.hero-content {
    padding-top: 80px;
}

.hero-headline {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Hero CTA Buttons */
.cta-primary {
    box-shadow: 0 8px 32px rgba(245, 166, 35, 0.3);
}

.cta-primary:hover {
    box-shadow: 0 12px 40px rgba(245, 166, 35, 0.4);
    transform: translateY(-2px);
}

.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

/* Hero scroll indicator */
.hero-scroll {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-8px); }
    60% { transform: translateX(-50%) translateY(-4px); }
}

/* Hero geometric shapes */
.hero-geo {
    animation: float 6s ease-in-out infinite;
}

.hero-geo-1 { animation-delay: 0s; }
.hero-geo-2 { animation-delay: 1s; }
.hero-geo-3 { animation-delay: 2s; }
.hero-geo-4 { animation-delay: 3s; }
.hero-geo-5 { animation-delay: 4s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.hero-geo-2 {
    animation-name: rotate;
}

@keyframes rotate {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(50deg) translateY(-15px); }
}

/* ===== ABOUT ===== */
.about {
    background: var(--plum-950);
}

.about-img-main {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.about-img-accent {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.about-badge {
    box-shadow: 0 10px 30px rgba(245, 166, 35, 0.3);
}

/* ===== PRODUCTS ===== */
.products {
    background: linear-gradient(180deg, var(--plum-950) 0%, #1a0520 50%, var(--plum-950) 100%);
}

.product-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.product-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 166, 35, 0.2);
}

.product-img-wrap {
    overflow: hidden;
}

/* ===== CRAFT ===== */
.craft {
    background: var(--plum-950);
}

.craft-img-main {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.craft-floating {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* ===== VISIT ===== */
.visit {
    background: linear-gradient(135deg, var(--plum-900) 0%, var(--plum-950) 100%);
}

.visit-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.visit-card:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 166, 35, 0.2);
    transform: translateY(-4px);
}

/* ===== CONTACT ===== */
.contact {
    background: linear-gradient(180deg, var(--plum-950) 0%, #1a0520 100%);
}

.form-input {
    transition: all 0.2s ease;
}

.form-input:focus {
    background: rgba(30, 7, 34, 0.8);
}

.btn-submit {
    transition: all 0.3s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
}

.btn-submit:active {
    transform: translateY(0);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--plum-950);
}

/* ===== SCROLL REVEAL (progressive enhancement) ===== */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
}

/* ===== MOBILE MENU BUTTON ANIMATION ===== */
.menu-open .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-open .menu-line:nth-child(2) {
    opacity: 0;
}

.menu-open .menu-line:nth-child(3) {
    width: 1.5rem;
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-headline {
        font-size: 2.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .about-img-accent {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: -40px;
        margin-left: auto;
        margin-right: auto;
    }

    .about-badge {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 1rem;
    }

    .craft-floating {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 1rem;
        justify-content: center;
    }

    .section-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .hero-headline {
        font-size: 2.25rem;
    }

    .cta-primary,
    .cta-secondary {
        width: 100%;
        justify-content: center;
    }

    .about-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .stat-item {
        text-align: center;
    }
}