:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --accent-primary: #A1F45A;
    --accent-secondary: #8B0000;
    /* Default fallback */
    --accent-tertiary: #7DBA43;
    /* Default fallback */
    --font-primary: 'Roboto', sans-serif;
    --header-height: 100px;
}

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    position: relative;
    max-width: 100vw;
}

/* Watermark Background */
.watermark-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    /* Optional slight rotation for style */
    width: 120vw;
    /* Massive size */
    height: 120vh;
    z-index: -1;
    pointer-events: none;

    /* The Magic: Use the logo as a mask for a solid color block */
    background-color: #050505;
    /* Darker watermark */
    -webkit-mask-image: url('assets/logo.png');
    mask-image: url('assets/logo.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* Fallback if mask not supported (rare nowadays but good hygiene): opacity on image */
    /* But since user specifically asked for #0a0a0a color, mask is best approach */
}

/* Parallax Background Shapes */
.parallax-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    /* Reduced from 0.6 so it's less distracting */
    z-index: 1;
    transition: background-color 1s ease;
}

.shape-1 {
    top: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: var(--accent-primary);
    opacity: 0.15;
}

.shape-2 {
    top: 40%;
    right: 5%;
    width: 400px;
    height: 400px;
    background: #800080;
    /* Purple accent */
    opacity: 0.13;
}

.shape-3 {
    top: 70%;
    left: 20%;
    width: 250px;
    height: 250px;
    background: #00FF00;
    opacity: 0.13;
}

.shape-4 {
    top: 20%;
    right: 30%;
    width: 150px;
    height: 150px;
    background: #ffffff;
    opacity: 0.07;
}

/* Shape Opacity Overrides per Flavor */
/* Flavor 2: Dark Chocolate (+10% visibility) */
[data-flavor="2"] .shape-1 {
    opacity: 0.25;
}

[data-flavor="2"] .shape-2 {
    opacity: 0.23;
}

[data-flavor="2"] .shape-3 {
    opacity: 0.23;
}

[data-flavor="2"] .shape-4 {
    opacity: 0.17;
}

/* Flavor 3: Mixed Berries (+5% visibility) */
[data-flavor="3"] .shape-1 {
    opacity: 0.20;
}

[data-flavor="3"] .shape-2 {
    opacity: 0.18;
}

[data-flavor="3"] .shape-3 {
    opacity: 0.18;
}

[data-flavor="3"] .shape-4 {
    opacity: 0.12;
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    z-index: 1000;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.scrolled {
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    backdrop-filter: blur(10px);
    /* Blur effect */
    -webkit-backdrop-filter: blur(10px);
    /* Safari support */
}

.logo {
    display: flex;
    align-items: center;
    /* Ensure it doesn't shrink */
    flex-shrink: 0;
}

.logo img {
    height: 65px;
    /* Significantly bigger */
    width: auto;
    object-fit: contain;
}

.main-nav {
    display: flex;
    gap: 3rem;

    /* Absolute centering to ensure it's perfectly in the middle */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.main-nav a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.main-nav a:hover {
    opacity: 1;
    color: var(--accent-primary);
    /* Optional: add hover color */
}

.header-actions {
    /* Ensure actions stay on the right */
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* User Req: Align with Hero Switcher (which has 2rem padding) */
    padding-right: 2rem;
}

.cart-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: grid;
    grid-template-columns: 52% 18% 30%;
    /* More room for long titles */
    /* Text - Image - Controls */
    align-items: center;
    padding: 0 4rem;
    position: relative;
    padding-bottom: var(--header-height);
}

/* Left: Content */
.hero-content {
    max-width: 800px;
    /* Increased to allow full title spread */
    position: relative;
    z-index: 10;
    /* Ensure text is above image parallax overflow */
}

.product-title {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    min-height: 2.2em;
    /* Reserves space for 2 lines */
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-family: sans-serif;
    /* Make it blocky */
    transform: scaleY(1.2);
    /* Taller letters */
    transform-origin: left;
}

/* Gradient Animation */
.gradient-text {
    background: linear-gradient(90deg,
            var(--accent-primary) 0%,
            var(--accent-secondary) 33%,
            var(--accent-tertiary) 66%,
            var(--accent-primary) 100%);
    /* Loop back to primary */
    background-size: 300% auto;
    /* Increased size for smoother traverse */
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 12s linear infinite;
    /* Slower for detail */
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}



/* Metallic Button Animation */
.btn-primary {
    background: linear-gradient(135deg, #bdc3c7 0%, #ecf0f1 50%, #bdc3c7 100%);
    background-size: 200% 200%;
    color: #1a1a1a;
    border: none;
    padding: 1rem 3.5rem !important;
    /* Standardized to match silver button */
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 50px;
    font-family: 'Onest', sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Fix for crisp edges */
    animation: metalShine 4s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

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

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

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

/* Center: Image */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    /* 3D Tilt Settings */
    transition: transform 0.1s ease-out;
    /* Fast follow for mouse */
    perspective: 1000px;
    z-index: 5;
    margin-left: -2rem;
    /* Bring products back to the left, away from numbers */
}

.hero-scene {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* This ensures anchors are relative to the image center area */
    width: auto;
    height: auto;
    transform-style: preserve-3d;
    /* For better depth feeling if we rotate */
}



/* Fallback */

/* Wait, if I use the animation, it completely overrides 'transform'.
   So I must ensure the keyframes use the variable.
*/

.hero-product-img {
    height: 75vh;
    /* Increased from 60vh */
    max-height: 850px;
    /* Increased from 600px */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    z-index: 1;
    /* Product is the anchor */
}

/* Full Screen Background Animation */
#hero-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    /* Ensures 9:16 frames fill the screen */
    z-index: 0;
    /* Behind everything */
    opacity: 1;
}

/* Blur Overlay */
.hero-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darker tint for readability */
    /* Slight tint */
    backdrop-filter: blur(8px);
    /* Frosty effect */
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    /* Above canvas */
    pointer-events: none;
}

/* Bring parallax dots above the blur */
.parallax-container {
    z-index: 2 !important;
}

/* Ensure hero content is top-most */
.hero-content,
.hero-controls,
.hero-image,
.site-header,
.hero-tagline {
    z-index: 20;
    position: relative;
}

/* Ensure hero content sits above the canvas */
.hero-content,
.hero-controls,
.hero-image {
    z-index: 20;
    position: relative;
}

.hero-product-img.animating-in {
    transform: translateY(50px) scale(0.9);
    opacity: 0;
}


/* --- TEXT ANIMATIONS (Premium Reveal/Hide) --- */

/* Title Specific (Preserves scaleY(1.2)) */
.title-exit-up {
    animation: titleExitUp 0.6s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.title-enter-up {
    animation: titleEnterUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.title-exit-down {
    animation: titleExitDown 0.6s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.title-enter-down {
    animation: titleEnterDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes titleExitUp {
    0% {
        transform: translateY(0) scaleY(1.2);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(-30px) scaleY(1.2);
        opacity: 0;
        filter: blur(10px);
    }
}

@keyframes titleEnterUp {
    0% {
        transform: translateY(30px) scaleY(1.2);
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        transform: translateY(0) scaleY(1.2);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes titleExitDown {
    0% {
        transform: translateY(0) scaleY(1.2);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(30px) scaleY(1.2);
        opacity: 0;
        filter: blur(10px);
    }
}

@keyframes titleEnterDown {
    0% {
        transform: translateY(-30px) scaleY(1.2);
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        transform: translateY(0) scaleY(1.2);
        opacity: 1;
        filter: blur(0);
    }
}

/* Description Specific (Standard) */
.desc-exit-up {
    animation: descExitUp 0.6s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.desc-enter-up {
    animation: descEnterUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.desc-exit-down {
    animation: descExitDown 0.6s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.desc-enter-down {
    animation: descEnterDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes descExitUp {
    0% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(-15px);
        opacity: 0;
        filter: blur(8px);
    }
}

@keyframes descEnterUp {
    0% {
        transform: translateY(15px);
        opacity: 0;
        filter: blur(8px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes descExitDown {
    0% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(15px);
        opacity: 0;
        filter: blur(8px);
    }
}

@keyframes descEnterDown {
    0% {
        transform: translateY(-15px);
        opacity: 0;
        filter: blur(8px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}



/* Utility: Stagger delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

/* Right: Controls */
.hero-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 3rem;
    height: 100%;
    padding-right: 2rem;
}

.index-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-index {
    font-size: 20rem;
    font-weight: 400;
    /* Bebas is usually bold by default */
    font-family: 'Bebas Neue', sans-serif;
    color: white;
    opacity: 1;
    line-height: 0.8;
}

.hero-socials {
    display: flex;
    gap: 2rem;
    margin-top: -1rem;
    margin-left: 1.5rem;
    /* Nudge right for optical center alignment */
    /* Pull closer to the large number */
}

.hero-social-link {
    color: white;
    opacity: 0.3;
    /* Subtle as requested */
    transition: all 0.3s ease;
}

.hero-social-link:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

.nav-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.arrow-separator {
    width: 1px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.3);
}

.arrow-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.arrow-btn:hover {
    opacity: 1;
}

.arrow-btn.up {
    flex-direction: column-reverse;
    /* Text above arrow */
}

/* Social Footer */
.social-footer {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1.5rem;
}

.social-link {
    color: white;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.social-link:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 1200px) {
    .product-title {
        font-size: 3rem;
    }

    .product-index {
        font-size: 8rem;
    }

    .hero {
        padding: 0 2rem;
    }
}

@media (max-width: 1100px) {
    :root {
        --header-height: 66px;
        /* Increased by 10% from 60px */
    }

    .site-header {
        padding: 0 1rem;
        height: var(--header-height);
    }

    .logo img {
        height: 44px !important;
        /* Increased by 10% from 40px */
    }

    .main-nav {
        display: none;
    }

    .hero {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        padding: 0 1rem 1rem 1rem;
        gap: 0;
        justify-content: flex-start;
        align-items: center;
        overflow: visible !important;
        /* Allow flavor text to move UP beyond container */
        text-align: center;
        position: relative;
        z-index: 100;
    }

    .hero-content {
        display: contents;
    }

    .product-title {
        order: 1;
        font-size: 3.4rem !important;
        line-height: 0.95;
        margin: 0 !important;
        width: 100%;
        position: absolute;
        top: -70vh !important;
        /* Aggressive lift (approx. 23cm total) */
        z-index: 110;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: visible;
        transform: scaleY(1.2) !important;
        transform-origin: center !important;
    }

    .title-refinement {
        font-size: 0.97em;
        /* 3% reduction */
    }

    .product-description {
        /* This is now inside the box in HTML, but if targeted globally: */
        font-size: 0.8rem;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.9);
    }

    .hero-image {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: -4.8rem 0 0.5rem 0 !important;
        /* Pushed down by ~3px (from -5rem) */
    }

    .hero-product-img {
        height: auto;
        max-height: 52vh;
        width: auto;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
        /* GUARANTEED CHANGES: */
        transform: scale(1.1);
        /* 10% visual increase */
        position: relative;
        top: 2px;
        /* Exactly 2px down */
    }

    .hero-controls {
        display: contents;
    }

    .index-wrapper {
        display: contents;
    }

    /* Socials on Left of Image - inner-aligned closer to product */
    /* Socials on Left of Image - inner-aligned closer to product */
    .hero-socials {
        position: absolute;
        left: 18%;
        top: calc(35% + 38px);
        /* Pushed down by approx 1cm (38px) - adjusted from 2cm */
        transform: translateY(-50%);
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin: 0 !important;
        z-index: 120;
    }

    .hero-social-link {
        opacity: 0.6 !important;
        /* Force opacity on container */
        color: rgba(255, 255, 255, 0.6) !important;
        /* Force transparent color */
        transition: opacity 0.3s ease;
    }

    .hero-social-link svg {
        width: 20px;
        height: 20px;
        opacity: 0.6 !important;
        /* Double force on the icon itself */
    }

    /* Numbers on Right of Image - inner-aligned & clean style */
    /* Numbers on Right of Image - inner-aligned & clean style */
    /* Numbers on Right of Image - moved right and enlarged */
    .product-index {
        position: absolute;
        right: calc(15vw + 2px) !important;
        /* Shifted 2px left & Scaled */
        top: 38dvh !important;
        transform: translate(50%, -50%);
        font-size: 22.5vw !important;
        /* Proportional scaling */
        line-height: 1 !important;
        margin: 0 !important;
        z-index: 120;
        background: none !important;
        -webkit-text-fill-color: white !important;
        color: white !important;
        font-weight: 500;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        letter-spacing: 2px !important;
    }

    /* Functional Switcher on Mobile */
    .nav-arrows {
        display: flex !important;
        position: absolute;
        right: calc(6vw + 2px) !important;
        /* Shifted 2px left & Scaled */
        top: 50dvh !important;
        transform: translateY(-50%);
        z-index: 130;
        flex-direction: row !important;
        gap: 3vw !important;
        pointer-events: none;
    }

    .arrow-btn {
        pointer-events: auto;
        width: 8vw !important;
        height: 8vw !important;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .arrow-btn:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.2);
    }

    .arrow-btn svg {
        stroke-width: 1.5 !important;
        width: 4vw !important;
        height: 4vw !important;
        transform: rotate(-90deg);
    }

    .arrow-btn span {
        display: none;
    }


    .arrow-separator {
        display: none;
    }

    .description-box {
        order: 3;
        width: 75vw;
        /* Proportional width */
        margin: 4vw 0 !important;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 110;
        border-radius: 3vw;
        overflow: hidden;
    }

    .description-box .product-description {
        font-size: 0.7rem !important;
        /* Smaller text to fit */
    }

    .description-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0 4vw;
        min-height: 12vw;
        /* Locked thickness */
    }

    .desc-label {
        font-weight: 600 !important;
        text-align: center;
        display: block;
        width: 100%;
        padding: 0 8vw;
        white-space: nowrap;
        font-size: 3.2vw !important;
        /* Perfect fit */
        letter-spacing: 0.5vw;
    }

    .toggle-icon {
        position: absolute;
        right: 4vw;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
    }

    .toggle-icon span:first-child {
        height: 2px;
    }

    .toggle-icon span:last-child {
        width: 2px;
    }

    .hero-cta {
        order: 4;
        width: 100%;
        margin: 0 !important;
        padding-bottom: 4vw;
        position: relative;
        z-index: 110;
        display: flex;
        justify-content: center;
    }

    .hero-cta .btn-primary {
        width: 60vw;
        padding: 0 !important;
        min-height: 12vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5vw !important;
        border-radius: 10vw !important;
        background: linear-gradient(135deg, #bdc3c7 0%, #ecf0f1 50%, #bdc3c7 100%) !important;
        color: #000 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    /* Standardize CTA button width on mobile to match forms */
    .cta-section .btn-primary {
        width: 100% !important;
        max-width: 500px;
        margin: 0 auto;
        display: block;
    }

    .hero-social-link {
        opacity: 0.7 !important;
        z-index: 130;
    }
}

/* Scroll Fade Tagline */
.hero-tagline {
    position: fixed;
    top: calc(var(--header-height) + 20px);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 4px;
    color: white;
    opacity: 1;
    /* Will be controlled by JS */
    z-index: 900;
    /* Below header (1000) but above background */
    pointer-events: none;
    transition: opacity 0.1s ease-out;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- NEW SECTIONS --- */

.section {
    padding: 8rem 4rem;
    position: relative;
    z-index: 20;
    background: transparent;
}

/* Brand Name Style */
.brand-name {
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    font-style: normal;
    /* Ensure it overrides italic if needed */
    display: inline;
    /* Changed from inline-block to fix spacing gaps */
    letter-spacing: 0.5px;
    /* Subtle spread for better readability in sentences */
}

/* Specific weight reduction and shift for Science header */
.science-section .section-title .brand-name {
    font-weight: 500 !important;
    position: relative;
    top: 2px;
    display: inline-block;
    /* Ensure vertical nudge works smoothly */
}

.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 4rem;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Bold looks premium */
    letter-spacing: 4px;
    /* Wide spacing looks expensive */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

@media (max-width: 1100px) {
    .section-title {
        flex-direction: column !important;
        font-size: 8vw !important;
        gap: 2vw !important;
        margin-bottom: 8vw !important;
        letter-spacing: 2px !important;
    }

    .section-title span:first-child {
        white-space: nowrap !important;
    }

    .section-title .brand-name {
        font-size: 10vw !important;
    }
}

.inline-logo {
    height: 60px;
    /* Adjust to match title height */
    vertical-align: middle;
    filter: brightness(0) invert(1);
    /* Invert button text color if needed, but black on silver is fine */
}

/* --- PREMIUM CHECKOUT / CART STYLES --- */

/* Badge */
.cart-btn {
    position: relative;
    /* Anchor for absolute badge */
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #ff3b30;
    /* iOS Red */
    border-radius: 50%;
    box-shadow: 0 0 5px #ff3b30;
    z-index: 10;
    pointer-events: none;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* Cart Overlay (Background Dim) */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cart-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: rgba(20, 20, 20, 0.85);
    /* Dark Glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 1600;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Smooth eased slide */
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.cart-sidebar.active {
    transform: translateX(0);
}

.cart-sidebar.glass-panel {
    /* Reinforce glass style if needed override */
    border-radius: 20px 0 0 20px;
}

/* Cart Header */
.cart-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-header h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.cart-header p {
    color: #888;
    font-size: 0.9rem;
}

.close-cart {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: white;
    cursor: pointer;
    line-height: 0.8;
    transition: color 0.2s;
}

.close-cart:hover {
    color: var(--accent-primary);
}

/* Cart Items */
.cart-items-container {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empty-cart-msg {
    text-align: center;
    color: #555;
    margin-top: 4rem;
    font-size: 1.1rem;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: bold;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.2rem;
}

.cart-item-price {
    font-size: 0.9rem;
    color: #aaa;
    font-style: italic;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
}

.cart-qty-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.2s;
}

.cart-qty-btn:hover {
    color: var(--accent-primary);
    transform: scale(1.1);
}

.cart-item-qty {
    font-weight: bold;
    color: var(--accent-primary);
    min-width: 20px;
    text-align: center;
}

/* Cart Footer */
.cart-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.cart-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.disabled-btn {
    background: #333 !important;
    color: #777 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Toast Notification */
#toast-container {
    position: fixed;
    top: 120px;
    /* Below header */
    right: 2rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

.toast {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--accent-primary);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    color: white;
    font-family: 'Onest', sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 280px;
    pointer-events: auto;

    /* Animations */
    opacity: 0;
    transform: translateX(50px);
    animation: toastIn 0.4s ease forwards;
}

.toast.hiding {
    animation: toastOut 0.4s ease forwards;
}

@keyframes toastIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@media (max-width: 500px) {
    .cart-sidebar {
        width: 100%;
        border-left: none;
    }
}

/* Products Section */
.products-carousel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Force 5 columns */
    gap: 1.5rem;
    /* Tighter gap */
    padding: 2rem 1rem;
    width: 100%;
}

.products-carousel::-webkit-scrollbar {
    display: none;
}

.product-card {
    /* Remove min-width to fit 5 on screen */
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    /* reduced padding */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(10px);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.card-img {
    height: 220px;
    /* Smaller image to fit */
    object-fit: contain;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s;
}

.product-card:hover .card-img {
    transform: scale(1.1) rotate(5deg);
}

.card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-content h3 {
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    /* Slightly smaller text */
    white-space: nowrap;
    /* Prevent wrap */
}

.badge {
    background: var(--accent-primary);
    color: black;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    display: table;
    margin-bottom: 1.5rem;
}

.pulsate {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

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

.card-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.qty-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    margin-bottom: 0;
    /* managed by card-actions gap */
    width: 100%;
    /* Full Width */
    height: 45px;
    /* Fixed Height */
}

.qty-selector button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    width: 30px;
}

.btn-primary.small {
    padding: 0;
    /* Reset internal padding */
    width: 100%;
    height: 45px;
    /* Fixed Height matching qty */
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Science Section */
.science-section {
    padding: 8rem 0;
    /* More breathing room */
    position: relative;
    overflow: hidden;
    /* For any overflowing effects */
}

.science-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    /* Larger gap */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.science-card {
    background: rgba(255, 255, 255, 0.03);
    /* Lighter, glassier base */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4rem 2rem;
    border-radius: 24px;
    /* Softer corners */
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    /* Stronger blur */
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
}

.science-card:hover {
    transform: translateY(-15px) scale(1.02);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(255, 255, 255, 0.1) inset;
    /* Inner glow */
}

/* Icon Box Premium */
.icon-box {
    width: 90px;
    height: 90px;
    margin: 0 auto 2.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--accent-primary);
    transition: all 0.5s ease;
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.science-card:hover .icon-box {
    transform: scale(1.1) rotate(10deg);
    border-color: var(--accent-primary);
    box-shadow: 0 0 25px color-mix(in srgb, var(--accent-primary), transparent 50%);
    color: white;
    background: var(--accent-primary);
}

.icon-box svg {
    width: 45px;
    height: 45px;
    stroke-width: 1.5;
    transition: stroke 0.3s;
}

.science-card h3 {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    transform: translateZ(20px);
}

.science-card p {
    color: #bbb;
    line-height: 1.8;
    font-size: 1.05rem;
    font-family: 'Onest', sans-serif;
    transform: translateZ(10px);
    max-width: 90%;
    margin: 0 auto;
}

/* Shine Effect */
.science-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* Start off-screen */
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    transform: skewX(-25deg);
    transition: left 0.7s;
    pointer-events: none;
}

.science-card:hover::after {
    left: 150%;
    /* Sweep across */
    transition: left 0.7s ease-in-out;
}

/* Nutrition Section */
.nutrition-section {
    position: relative;
    /* ensure z-index context */
    z-index: 15;
}

.nutrition-container {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
    transition: transform 0.1s;
}

.nutri-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--accent-primary);
}

.nutri-cols {
    display: flex;
    gap: 3rem;
    text-align: right;
    min-width: 250px;
    justify-content: flex-end;
}

.nutri-cols span {
    width: 100px;
}

.nutri-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s, padding 0.2s;
}

.nutri-row:last-child {
    border-bottom: none;
}

.nutri-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 -1rem;
    border-radius: 8px;
}

.nutri-label {
    font-size: 1.1rem;
    color: #ccc;
    font-weight: 500;
    font-family: 'Onest', sans-serif;
}

.nutri-values {
    display: flex;
    gap: 3rem;
    text-align: right;
    min-width: 250px;
    justify-content: flex-end;
    font-family: 'Onest', sans-serif;
    color: white;
}

.nutri-values span {
    width: 100px;
}

.sub-row {
    padding-left: 2rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.nutri-row.highlight .nutri-label {
    color: white;
    font-weight: 700;
}



@media (max-width: 1100px) {

    .nutrition-container {
        width: 120% !important;
        margin-left: -10% !important;
        max-width: none !important;
    }

    .contact-form,
    .signup-premium-box {
        width: 120% !important;
        margin-left: calc(-10% + 30px) !important;
        max-width: none !important;
    }

    .nutri-header,
    .nutri-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .nutri-cols,
    .nutri-values {
        width: 100%;
        justify-content: space-between;
        min-width: 0;
        gap: 0;
    }

    .nutri-cols span,
    .nutri-values span {
        width: auto;
    }

    .nutri-row:hover {
        padding: 1rem;
        margin: 0;
    }

    .sub-row {
        padding-left: 1rem;
    }
}

/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #333;
    margin-bottom: 1rem;
}

.faq-question {
    padding: 1.5rem 0;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* FAQ Section Redesign */
.faq-section {
    padding: 8rem 2rem;
    position: relative;
    z-index: 2;
    background: transparent;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Individual FAQ Card */
.faq-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-item.active {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--accent-primary);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.faq-question {
    padding: 1.5rem 2rem;
    font-size: 1.3rem;
    color: white;
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: color 0.3s ease;
    position: relative;
    /* Added to anchor absolute toggle-icon on mobile */
}

.faq-question:hover {
    color: var(--accent-primary);
}

/* .arrow logic removed in favor of .toggle-icon */

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), padding 0.4s ease;
    padding: 0 2rem;
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: #dddddd;
    line-height: 1.7;
    border-top: 1px solid transparent;
}

/* Open padding managed via style attribute in script or we can add a class.
   The simplest way without changing script too much is to check for non-zero max-height styling, 
   but CSS can't target based on inline style values easily. 
   Instead, we should ensure the JS adds an 'active' class to .faq-item.
*/
.faq-item.active .faq-answer {
    padding-bottom: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* CTA Section */
/* CTA Section */
.cta-section {
    background: transparent;
    /* Dark premium background */
    position: relative;
    padding: 8rem 2rem;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

/* Background Motion Animation */
.cta-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}

.speed-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    width: 200px;
    opacity: 0;
    transform: rotate(-45deg);
    animation: speedMove 3s infinite linear;
}

.line-1 {
    top: 20%;
    left: -10%;
    animation-delay: 0s;
    width: 300px;
}

.line-2 {
    top: 50%;
    left: -20%;
    animation-delay: 1.5s;
    width: 500px;
}

.line-3 {
    top: 80%;
    left: -15%;
    animation-delay: 0.8s;
    width: 400px;
}

@keyframes speedMove {
    0% {
        transform: translateX(0) translateY(0) rotate(-15deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    80% {
        opacity: 0;
    }

    100% {
        transform: translateX(120vw) translateY(200px) rotate(-15deg);
        opacity: 0;
    }
}

/* Restored CTA Styles */
.cta-section {
    position: relative;
    padding: 6rem 2rem;
    text-align: center;
    background-color: #000000;
    /* Requested Black Background */
    overflow: visible;
    /* Allow floating assets */
}

.cta-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.speed-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    width: 150px;
    border-radius: 2px;
    opacity: 0;
}

.line-1 {
    top: 20%;
    left: -10%;
    animation: speedMove 4s infinite linear;
}

.line-2 {
    top: 60%;
    left: -10%;
    animation: speedMove 3s infinite linear 1s;
}

.line-3 {
    top: 40%;
    left: -10%;
    animation: speedMove 5s infinite linear 0.5s;
}


.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-section h2 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    /* Consistent with other headers */
    font-style: italic;
    /* For motion feel */
    color: white;
}

.highlight-text {
    color: #000;
    /* Set to black to hide internal stroke overlaps */
    -webkit-text-stroke: 1px white;
    position: relative;
    z-index: 5;
    paint-order: stroke fill;
    /* Fixes "ugly strokes" by drawing black fill over inner stroke lines */
}

.highlight-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent-primary);
    -webkit-text-fill-color: var(--accent-primary);
    /* Explicitly set fill color to prevent inheritance issues */
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--accent-primary);
    animation: fillTextSmooth 3s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 5px var(--accent-primary));
    -webkit-text-stroke: 0;
    /* Fix: removes messy internal lines */
    paint-order: normal;
    /* Reset paint order for the filling text */
}

@keyframes fillText {
    0% {
        width: 0%;
    }

    40% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

.cta-section p {
    font-size: 1.2rem;
    color: #cccccc;
    margin-bottom: 3rem;
    letter-spacing: 0.5px;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    line-height: 1.6;
}

/* Illuminated Button */
.illuminated-btn {
    position: relative;
    background: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary);
    /* Fallback or solid */
    /* If we want transparency, we might need opacity or color-mix. For now, solid glow is fine or use opacity on container if relevant, but box-shadow on main element ... */
    /* Let's use a simpler glow that uses the variable directly. */
    box-shadow: 0 0 15px var(--accent-primary);
    opacity: 0.9;
    transition: all 0.3s ease;
    overflow: hidden;
    /* text-shadow: 0 0 8px rgba(161, 244, 90, 0.4); replaced with var */
    text-shadow: 0 0 8px var(--accent-primary);
    animation: none;
    /* Reset inherited animation */
}

.illuminated-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    transition: left 0.5s;
    animation: shimmer 3s infinite;
    opacity: 0.5;
    /* Adjust opacity to mimic the previous rgba(.., 0.2) intensity */
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.illuminated-btn:hover {
    background: var(--accent-primary);
    color: black;
    box-shadow: 0 0 40px color-mix(in srgb, var(--accent-primary), transparent 40%);
    transform: scale(1.05) translateY(-3px);
    text-shadow: none;
}

/* Contact Section Redesign - Premium Glass Background */
/* Contact Section Redesign - Premium Glass Background */
.contact-section {
    background-color: #000000;
    /* Requested Black Background */
    position: relative;
    overflow: visible;
    /* Allow floating assets to pass */
    /* border-top removed to fix gap */
}

/* Subtle tech grid background */
.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #cccccc;
    margin-bottom: 3rem;
    letter-spacing: 0.5px;
    font-family: 'Onest', sans-serif;
    font-weight: 500;
    line-height: 1.6;
    margin-top: -2rem;
    /* Bring it closer to title if needed, or adjust */
    position: relative;
    z-index: 2;
}

.contact-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.forms-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.contact-form.glass-panel,
.signup-premium-box.glass-panel {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    /* Reduced from 3rem */
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    /* Reduced from 550px */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-slogan-divider {
    display: none;
}

.signup-premium-box {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    /* Central alignment */
}

/* Metallic Silver Border Animation */
.signup-premium-box::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2.5px;
    /* Slightly thicker */
    border-radius: inherit;
    background: linear-gradient(135deg,
            #bdc3c7 0%,
            #ecf0f1 25%,
            #ffffff 50%,
            #ecf0f1 75%,
            #bdc3c7 100%);
    /* Much lighter silver palette */
    background-size: 300% 300%;
    animation: silverSweep 6s linear infinite;
    /* Faster sweep */
    -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.8;
    /* More prominent */
}

@keyframes silverSweep {
    0% {
        background-position: 0% 0%;
    }

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

/* Animated Promo Ticker - Silver Banner */
.promo-ticker.silver-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #bdc3c7 0%, #ffffff 50%, #bdc3c7 100%);
    /* Lighter Silver */
    background-size: 200% auto;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    white-space: nowrap;
}

.ticker-content {
    display: inline-flex;
    align-items: center;
    padding-left: 100%;
    animation: tickerLoop 60s linear infinite;
    /* Slowed down even more (+25%) */
}

.ticker-content span {
    display: inline-block;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #000;
    /* Dark text */
    padding: 0 2rem;
    /* Perfectly balanced padding on both sides */
}

@keyframes tickerLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.signup-content {
    margin-top: 3rem;
    /* Extra space for ticker */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
}

.signup-title-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    font-style: italic;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.signup-title-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    /* Increased for stroke visibility */
    font-weight: 900;
    font-style: italic;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
}

.metallic-text {
    background: linear-gradient(to right, #bdc3c7 0%, #ffffff 50%, #bdc3c7 100%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: metalShine 3s linear infinite;
    display: inline-block;
}

.signup-title-main.highlight-text {
    color: #000;
    -webkit-text-stroke: 1px white !important;
    /* Thinner stroke for elegance */
    /* Ensure fill animation works */
    display: inline-block;
    /* Required for width animation */
    white-space: nowrap;
}

.signup-title-main.highlight-text::after {
    border-right: none !important;
    /* No cursor */
    animation: fillTextSmooth 3s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 5px var(--accent-primary));
    /* Subtle glow */
}

@keyframes fillTextSmooth {
    0% {
        width: 0%;
        opacity: 0.5;
    }

    20% {
        width: 0%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

/* Replicate highlight-text::after logic for this specific element OR share the class in HTML. 
   User wants "same animation", so I'll add the class in HTML. 
   But I need to ensure this class handles the layout correctly. */

.signup-desc {
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.signup-form {
    margin-top: auto;
    width: 100%;
    /* Ensure it fills the centered container */
}

/* Premium Silver Metallic Button - Inherits global font */
.btn-silver-metallic {
    background: linear-gradient(135deg, #bdc3c7 0%, #ffffff 50%, #bdc3c7 100%) !important;
    background-size: 200% auto !important;
    color: #000 !important;
    border: none !important;
    padding: 1rem 3.5rem !important;
    /* Matches Hero and Contact size */
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    border-radius: 50px !important;
    /* Matches Hero and Contact rounding */
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Onest', sans-serif !important;
    /* font-family: 'Bebas Neue', sans-serif; REMOVED to match ИСПРАТИ */
    letter-spacing: normal;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    animation: metalShine 4s ease-in-out infinite !important;
}

.btn-silver-metallic:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2) !important;
}

.contact-form.glass-panel:hover {
    box-shadow: 0 20px 50px color-mix(in srgb, var(--accent-primary), transparent 95%);
    border-color: color-mix(in srgb, var(--accent-primary), transparent 70%);
}

.signup-premium-box.glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(255, 255, 255, 0.05);
}

.form-group {
    position: relative;
    margin-bottom: 2rem;
}

/* Inputs & Textareas */
/* Inputs & Textareas */
.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 0;
    color: white;
    font-family: 'Onest', sans-serif;
    /* Tech feel */
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.3s;
    border-radius: 0;
    /* Reset for some browsers */
    resize: none;
    /* User requirement: disable manual resize */
    overflow-y: hidden;
    /* Hide scrollbar for auto-expand */
}

/* Floating Label */
.form-group label {
    position: absolute;
    top: 1rem;
    left: 0;
    font-size: 1rem;
    color: #888;
    pointer-events: none;
    transition: all 0.3s ease;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
}

/* Animation State */
.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:focus+label,
.form-group textarea:not(:placeholder-shown)+label {
    top: -0.8rem;
    font-size: 0.8rem;
    color: var(--accent-primary);
}

/* Animated Bottom Border */
.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--accent-primary);
}

.form-group input:focus~.input-highlight,
.form-group textarea:focus~.input-highlight {
    width: 100%;
}

.btn-primary.full-width {
    width: 100%;
    margin-top: auto;
    /* Align both buttons to the bottom across boxes */
}

.section-subtitle {
    text-align: center;
    color: #888;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

/* Real Footer - Premium Semi-Transparent */
/* Real Footer - Premium Semi-Transparent */
.site-footer {
    background-color: #000000;
    /* Requested Black Background */
    padding: 4rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    position: relative;
    z-index: 2;
    /* Lowered from 50 so parallax (6) floats over it */
}

.site-footer .footer-content {
    position: relative;
    z-index: 10;
    /* Ensure text sits above parallax fruit */
}



/* Unified footer spacing container */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    /* Matches spacing between TextLinks and Socials */
}

.footer-branding-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Center guaranteed in middle */
    align-items: center;
    /* Vertically center all items */
    width: 100%;
    max-width: 1100px;
    /* Constrain width so flanks aren't too far */
    margin-bottom: 0;
    /* Nudge per user request: Slightly Left (-5px), Down 30px */
    transform: translate(-5px, 30px);
}

.footer-logo {
    display: flex;
    justify-content: center;
}

.footer-logo img {
    height: 60px;
    /* Slightly larger main logo */
    width: auto;
    opacity: 1;
}

.footer-flank-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity 0.3s;
}

/* Specific alignment for flanks */
.footer-flank-img.mascot {
    justify-self: end;
    /* Push right towards center */
    padding-right: 3rem;
    /* Gap from Logo */
}

.footer-flank-img.slogan {
    justify-self: start;
    /* Push left towards center */
    padding-left: 3rem;
    /* Gap from Logo */
    height: 125px;
    /* Larger */
    transform: translateX(-35px);
    /* Move left 35px */
}

.footer-flank-img:hover {
    opacity: 1;
}

.footer-nav {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav a {
    color: #888;
    text-decoration: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: var(--accent-primary);
}

.footer-socials {
    display: flex;
    gap: 1.5rem;
}

.footer-socials a {
    color: #888;
    transition: color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
}

.footer-socials svg {
    width: 19px;
    height: 19px;
}

.footer-socials a:hover {
    color: var(--accent-primary);
    transform: translateY(-3px);
}

.footer-bottom {
    width: 100%;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #444;
    font-size: 0.75rem;
    font-family: 'Onest', sans-serif;
}

/* Footer Fix */
.relative-footer {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    padding: 4rem 0;
    justify-content: center;
    background: transparent;
    border-top: 1px solid #222;
}

@media (max-width: 1100px) {
    .section-title {
        font-size: 2rem;
    }

    .cta-section h2 {
        font-size: 2.5rem;
    }

    .forms-wrapper {
        flex-direction: column-reverse;
        align-items: center;
    }

    .contact-form.glass-panel,
    .signup-premium-box.glass-panel {
        max-width: 100%;
        padding: 2.5rem 1.5rem;
    }
}

/* Custom Hyphen for Typography */
.custom-hyphen {
    display: inline-block;
    transform: translate(3px, -10px);
    /* Move right 3px, up 8px */
    margin: 0 5px;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero Index Animation */
.product-index {
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Mask the sliding digit */
    height: 1.2em;
    /* Ensure consistent height */
    line-height: 1.2em;
}

.index-static {
    display: inline-block;
}

.index-dynamic {
    display: inline-block;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}

/* Slide Animation Classes */
.slide-out-up {
    transform: translateY(-100%);
    opacity: 0;
}

.slide-in-up {
    transform: translateY(100%);
    opacity: 0;
}

.slide-out-down {
    transform: translateY(100%);
    opacity: 0;
}

.slide-in-down {
    transform: translateY(-100%);
    opacity: 0;
}

.slide-reset {
    transform: translateY(0);
    opacity: 1;
}

.no-transition {
    transition: none !important;
}

/* CORRECTED PARALLAX ANIMATION AND LOGIC */
@keyframes floatIdle {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -15px;
    }
}

.parallax-asset {
    animation: floatIdle 4s ease-in-out infinite;
    /* Ensure transform is not managed by animation so JS can control it */
}



/* UPDATED PARALLAX LAYOUT (13 POSITIONS) */
/* Deep Background */
.p-pos-1 {
    top: 5%;
    left: -25%;
    width: 140px;
    filter: blur(2px);
    z-index: -3;
}

.p-pos-2 {
    top: 60%;
    left: -35%;
    width: 160px;
    filter: blur(2px);
    z-index: -3;
}

.p-pos-3 {
    top: 20%;
    right: -30%;
    width: 130px;
    filter: blur(2px);
    z-index: -3;
}

.p-pos-4 {
    bottom: 10%;
    right: -25%;
    width: 150px;
    filter: blur(2px);
    z-index: -3;
}

.p-pos-5 {
    top: -10%;
    left: 40%;
    width: 120px;
    filter: blur(3px);
    z-index: -4;
}

/* High floating */

/* Mid Ground */
.p-pos-6 {
    top: 15%;
    left: -10%;
    width: 100px;
    z-index: 2;
}

.p-pos-7 {
    bottom: 25%;
    left: -15%;
    width: 110px;
    z-index: 2;
}

.p-pos-8 {
    top: 30%;
    right: -12%;
    width: 95px;
    z-index: 2;
}

.p-pos-9 {
    bottom: 5%;
    left: 10%;
    width: 90px;
    z-index: 2;
}

/* Foreground (Close/Fast) */
.p-pos-10 {
    bottom: -15%;
    right: 15%;
    width: 190px;
    filter: blur(2px);
    z-index: 10;
    opacity: 0.95;
}

.p-pos-11 {
    top: 50%;
    right: 25%;
    width: 120px;
    filter: blur(1px);
    z-index: 10;
    opacity: 0.9;
}

/* Overlapping product slightly? */
.p-pos-12 {
    top: -5%;
    right: 10%;
    width: 160px;
    filter: blur(3px);
    z-index: 11;
}

.p-pos-13 {
    bottom: 40%;
    left: -20%;
    width: 180px;
    filter: blur(4px);
    z-index: 11;
}

/* REMOVE HERO TILT CONTEXT */
.hero-image {
    perspective: none !important;
    transform: none !important;
}

.hero-scene {
    transform-style: flat !important;
}



/* REFINED SPREAD LAYOUT (Clear Center, Wide Spread) */
/* Clear the center view */
.p-pos-10 {
    bottom: -25%;
    right: 40%;
    width: 190px;
    filter: blur(3px);
    z-index: 10;
    opacity: 0.95;
}

.p-pos-11 {
    top: 30%;
    right: -40%;
    width: 140px;
    filter: blur(1px);
    z-index: 10;
    opacity: 0.9;
}

/* Pushed right */

/* Widen the background/midground */
.p-pos-1 {
    top: 10%;
    left: -60%;
    width: 140px;
}

/* Over text? */
.p-pos-2 {
    top: 70%;
    left: -50%;
    width: 160px;
}

.p-pos-3 {
    top: 30%;
    right: -50%;
    width: 130px;
}

/* Over switcher */
.p-pos-9 {
    bottom: 0%;
    left: 30%;
    width: 90px;
}

/* Moved from center-left */

/* NEW OUTLIERS (Far reaches) */
.p-pos-14 {
    top: -20%;
    left: -80%;
    width: 100px;
    filter: blur(2px);
    z-index: -2;
    opacity: 0.7;
}

/* Far top-left */
.p-pos-15 {
    bottom: 50%;
    right: -90%;
    width: 180px;
    filter: blur(4px);
    z-index: 12;
    opacity: 0.8;
}

/* Far right blurry foreground */
.p-pos-16 {
    top: 80%;
    left: -90%;
    width: 110px;
    filter: blur(1px);
    z-index: 2;
}

/* Far bottom-left */
.p-pos-17 {
    top: -30%;
    right: 10%;
    width: 80px;
    filter: blur(2px);
    z-index: -4;
}

/* High top */



/* REFINED CENTER CLEARANCE */
/* Push large foreground elements away from center face */
.p-pos-10 {
    bottom: -20%;
    right: 45%;
    width: 220px;
    filter: blur(4px);
    opacity: 0.9;
}

/* Lower left-ish now */
.p-pos-11 {
    top: 0%;
    right: -30%;
    width: 140px;
    filter: blur(1px);
    opacity: 0.9;
}

/* High right */

/* MOUTHPIECE COVER (The one user liked) */
.p-pos-12 {
    top: -8%;
    left: 35%;
    width: 120px;
    filter: blur(2px);
    z-index: 12;
    transform: rotate(45deg);
    opacity: 0.95;
}

/* Sitting right on top cap */

/* EDGE HUGGERS (Covering edges but not face) */
.p-pos-13 {
    bottom: 20%;
    left: -15%;
    width: 140px;
    z-index: 10;
    filter: blur(1px);
}

/* Left edge */
.p-pos-9 {
    bottom: 10%;
    right: -5%;
    width: 110px;
    z-index: 10;
}

/* Right low edge */

/* FULL APPLE ITERATIONS (Peripheral) */
.p-pos-18 {
    top: 60%;
    right: -60%;
    width: 180px;
    filter: blur(3px);
    z-index: -1;
    opacity: 0.8;
}

/* Deep right */
.p-pos-19 {
    top: -25%;
    left: -30%;
    width: 150px;
    filter: blur(2px);
    z-index: -2;
    opacity: 0.7;
}

/* Top left */



/* FINAL CLARITY REFINEMENT */
/* Push the foreground cinnamon/slices further out to reveal text */
.p-pos-10 {
    bottom: -30%;
    right: 55%;
    width: 220px;
    filter: blur(4px);
    opacity: 0.8;
}

/* Lower left corner */
.p-pos-11 {
    top: 10%;
    right: -40%;
    width: 150px;
    filter: blur(2px);
    opacity: 0.8;
}

/* Far right */
.p-pos-13 {
    bottom: 30%;
    left: -25%;
    width: 140px;
}

/* Pull left edge further left */

/* MORE FULL APPLES */
.p-pos-20 {
    bottom: -15%;
    left: 60%;
    width: 130px;
    filter: blur(2px);
    z-index: 10;
    transform: rotate(-10deg);
}

/* Low front right */
.p-pos-21 {
    top: 40%;
    left: -70%;
    width: 160px;
    filter: blur(3px);
    z-index: -3;
    opacity: 0.6;
}

/* Mid far left */



/* MAXIMUM SPREAD REFINEMENT */
/* Pushing everything further out to de-cluster */

/* Background Spread */
.p-pos-1 {
    left: -80%;
}

.p-pos-2 {
    left: -75%;
    top: 75%;
}

.p-pos-3 {
    right: -70%;
}

.p-pos-4 {
    right: -60%;
    bottom: 5%;
}

.p-pos-5 {
    left: 60%;
    top: -25%;
}

/* Midground Spread */
.p-pos-6 {
    left: -30%;
    top: 10%;
}

.p-pos-7 {
    left: -35%;
    bottom: 20%;
}

.p-pos-8 {
    right: -35%;
    top: 35%;
}

.p-pos-9 {
    right: -25%;
    bottom: 0%;
}

/* Foreground/Outlier Spread */
.p-pos-10 {
    right: 75%;
    bottom: -45%;
}

/* Way bottom-left */
.p-pos-11 {
    right: -60%;
    top: 5%;
}

/* Way right */
.p-pos-12 {
    left: 55%;
    top: -15%;
}

/* Moved off the top cap slightly to right */
.p-pos-13 {
    left: -45%;
    bottom: 40%;
}

/* Far left mid */
.p-pos-14 {
    left: -90%;
    top: -30%;
}

.p-pos-15 {
    right: -110%;
    bottom: 60%;
}

.p-pos-16 {
    left: -100%;
    top: 90%;
}

.p-pos-17 {
    right: 25%;
    top: -45%;
}

.p-pos-18 {
    right: -80%;
    top: 55%;
}

.p-pos-19 {
    left: -60%;
    top: -40%;
}

.p-pos-20 {
    left: 80%;
    bottom: -30%;
}

.p-pos-21 {
    left: -85%;
    top: 50%;
}

/* CUSTOM VISUAL LAYOUT (Matches Screenshot + De-cluttered) */
/* Reset margins for absolute positioning */
.parallax-asset {
    margin: 0;
}

/* REMOVED ASSET (Crossed out in image) */
.p-pos-20 {
    display: none;
}

/* Bottom center apple removed */

/* CLOCKWISE MAPPING FROM TOP-NOON */

/* Top Center / Mouthpiece Area */
.p-pos-12 {
    top: -15%;
    left: 45%;
    width: 100px;
    z-index: 10;
    transform: rotate(10deg);
    filter: blur(1px);
}

/* Small slice floating above */

/* Top Right (1-2 o'clock) */
.p-pos-6 {
    top: 5%;
    right: 15%;
    width: 110px;
    transform: rotate(-15deg);
}

/* Cinnamon */
.p-pos-8 {
    top: 20%;
    right: -10%;
    width: 100px;
    transform: rotate(12deg);
}

/* Slice */

/* Mid Right (3 o'clock) - Over '01' */
.p-pos-3 {
    top: 40%;
    right: -25%;
    width: 140px;
    z-index: 12;
    filter: blur(0px);
    transform: rotate(90deg);
}

/* The vertical slice */
.p-pos-4 {
    top: 55%;
    right: -5%;
    width: 130px;
    transform: rotate(-30deg);
    z-index: -1;
}

/* Cinnamon behind */

/* Bottom Right (4-5 o'clock) */
.p-pos-9 {
    bottom: 0%;
    right: 5%;
    width: 120px;
    transform: rotate(45deg);
    z-index: 10;
}

/* Cinnamon pointing up */
.p-pos-11 {
    bottom: -20%;
    right: -15%;
    width: 160px;
    filter: blur(3px);
    opacity: 0.8;
}

/* Blurred foreground slice */

/* Bottom Left (7-8 o'clock) */
.p-pos-10 {
    bottom: -10%;
    left: -10%;
    width: 150px;
    filter: blur(2px);
    transform: rotate(-20deg);
}

/* Large slice */
.p-pos-13 {
    bottom: 25%;
    left: -20%;
    width: 130px;
    transform: rotate(60deg);
    z-index: -2;
}

/* Cinnamon deep */

/* Mid Left (9 o'clock) - Over Text */
.p-pos-2 {
    top: 50%;
    left: -45%;
    width: 160px;
    z-index: 1;
    transform: rotate(-10deg);
}

/* Main text apple */
.p-pos-14 {
    top: 40%;
    left: -65%;
    width: 110px;
    filter: blur(2px);
}

/* Far left outlier */

/* Top Left (10-11 o'clock) */
.p-pos-1 {
    top: 10%;
    left: -25%;
    width: 130px;
    transform: rotate(30deg);
}

/* High apple */
.p-pos-7 {
    top: 0%;
    left: -50%;
    width: 120px;
    filter: blur(1px);
}

/* Far top left */

/* DEEP BACKGROUND FILLERS (Subtle density) */
.p-pos-5 {
    top: -25%;
    left: 10%;
    width: 90px;
    opacity: 0.6;
    filter: blur(2px);
}

.p-pos-15 {
    bottom: 40%;
    right: -50%;
    width: 100px;
    opacity: 0.5;
    filter: blur(3px);
}

.p-pos-16 {
    bottom: -30%;
    left: 20%;
    width: 110px;
    opacity: 0.4;
    filter: blur(4px);
}

.p-pos-17 {
    top: -35%;
    right: 30%;
    width: 80px;
    opacity: 0.5;
}

.p-pos-18 {
    top: 60%;
    right: 40%;
    width: 90px;
    opacity: 0;
}

/* Hidden/Removed to reduce fill */
.p-pos-19 {
    display: none;
}

/* Removed to reduce overfill */
.p-pos-21 {
    display: none;
}

/* Removed to reduce overfill */



/* CORRECTED SCREENSHOT MATCH (Precise) */
/* RESTORED: Bottom Center Apple (The 'Selected' one) */
.p-pos-20 {
    display: block;
    bottom: -15%;
    left: 45%;
    width: 160px;
    transform: rotate(10deg);
    z-index: 10;
    filter: blur(0px);
    opacity: 1;
}

/* RE-MAPPING TO MATCH IMAGE */
/* Top Left Quadrant */
.p-pos-1 {
    top: 5%;
    left: -10%;
    width: 130px;
    transform: rotate(45deg);
}

/* High Apple */
.p-pos-13 {
    top: 25%;
    left: -25%;
    width: 140px;
    transform: rotate(-30deg);
}

/* Cinnamon near 'APPLE-' */

/* Bottom Left Quadrant */
.p-pos-2 {
    top: 60%;
    left: -15%;
    width: 150px;
    transform: rotate(-15deg);
}

/* Apple over 'CINNAMON' */
.p-pos-10 {
    bottom: 5%;
    left: -5%;
    width: 140px;
    z-index: 5;
}

/* Apple near 'stabila...' */

/* Top Right Quadrant */
.p-pos-6 {
    top: 5%;
    right: 20%;
    width: 120px;
    transform: rotate(-15deg);
}

/* Cinnamon high */
.p-pos-8 {
    top: 25%;
    right: 5%;
    width: 110px;
    transform: rotate(20deg);
}

/* Apple near '01' top */

/* Bottom Right Quadrant */
.p-pos-3 {
    top: 55%;
    right: -15%;
    width: 130px;
    transform: rotate(80deg);
}

/* Vertical apple right of '01' */
.p-pos-9 {
    bottom: 5%;
    right: 15%;
    width: 130px;
    transform: rotate(50deg);
}

/* Cinnamon low right */
.p-pos-11 {
    bottom: -25%;
    right: -10%;
    width: 170px;
    filter: blur(2px);
}

/* Far corner blur */

/* Center / Product Interaction */
.p-pos-12 {
    top: -10%;
    left: 40%;
    width: 90px;
    transform: rotate(5deg);
    z-index: 15;
}

/* Mouthpiece tiny slice */
.p-pos-4 {
    top: 50%;
    right: 25%;
    width: 100px;
    transform: rotate(-45deg);
    z-index: -1;
}

/* Behind product right */

/* HIDING EXTRAS TO MATCH CLEAN LOOK */
.p-pos-18,
.p-pos-19,
.p-pos-21 {
    display: none;
}

/* Keeping clutter low */



/* STRICT SCREENSHOT REPLICATION (Pixel-Attempt Match) */
/* 1. Left Flank */
.p-pos-1 {
    top: 0%;
    left: -15%;
    width: 120px;
    transform: rotate(30deg);
}

/* Top-left High Apple */
.p-pos-13 {
    top: 35%;
    left: -25%;
    width: 140px;
    transform: rotate(-30deg);
}

/* Cinnamon near 'A' of APPLE */
.p-pos-2 {
    top: 55%;
    left: -30%;
    width: 160px;
    transform: rotate(-10deg);
    z-index: 1;
}

/* Large Apple over 'CINNAMON', clear of bottle */
.p-pos-10 {
    bottom: 10%;
    left: -10%;
    width: 140px;
    transform: rotate(-20deg);
}

/* Bottom-left apple, fairly low */
.p-pos-14 {
    bottom: -10%;
    left: -25%;
    width: 150px;
    opacity: 0.6;
    filter: blur(2px);
}

/* Far bottom-left blur */

/* 2. Right Flank */
.p-pos-6 {
    top: 5%;
    right: 15%;
    width: 110px;
    transform: rotate(-15deg);
}

/* Top-right Cinnamon */
.p-pos-8 {
    top: 15%;
    right: -5%;
    width: 100px;
    transform: rotate(15deg);
}

/* Top-right Apple */
.p-pos-3 {
    top: 45%;
    right: -20%;
    width: 135px;
    transform: rotate(90deg);
    z-index: 5;
}

/* Vertical Apple over '01', RIGHT of bottle */
.p-pos-4 {
    top: 55%;
    right: 0%;
    width: 120px;
    transform: rotate(-40deg);
    z-index: -1;
}

/* Cinnamon behind product right */
.p-pos-9 {
    bottom: 5%;
    right: 10%;
    width: 130px;
    transform: rotate(45deg);
}

/* Cinnamon low right */
.p-pos-11 {
    bottom: -25%;
    right: -15%;
    width: 180px;
    filter: blur(3px);
}

/* Corner blur */

/* 3. Center Adjustments (Crucial: Clear the Text) */
.p-pos-12 {
    top: -8%;
    left: 40%;
    width: 90px;
    transform: rotate(5deg);
    z-index: 10;
}

/* Tiny slice on cap (fine) */
.p-pos-20 {
    bottom: 5%;
    left: 35%;
    width: 140px;
    transform: rotate(10deg);
    z-index: 10;
}

/* THE 'SELECTED' ONE. Positioned low, overlapping 1:0.8 but distinct from POWERBANK vertical text. */

/* 4. Fine-tuning to prevent overlap */
/* Ensure p-pos-2 (left apple) is far enough left */
.p-pos-2 {
    left: -35% !important;
}

/* Ensure p-pos-3 (right apple) is far enough right */
.p-pos-3 {
    right: -25% !important;
}

/* Hide others to match the clean count of the screenshot */
.p-pos-5,
.p-pos-7,
.p-pos-15,
.p-pos-16,
.p-pos-17,
.p-pos-18,
.p-pos-19,
.p-pos-21 {
    display: none;
}



/* CENTER-ORIGIN POSITIONING (Fixes container width issue) */
.parallax-asset {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centers element on origin */
    margin: 0;
}

/* MAPPING FROM SCREENSHOT (Pixel offsets from Center) */
/* Product is approx 300px wide. Safe zone is +/- 180px. */

/* --- LEFT FLANK --- */
/* Cinnamon pointing at 'A' in Apple */
.p-pos-13 {
    margin-left: -280px;
    margin-top: -80px;
    width: 140px;
    transform: translate(-50%, -50%) rotate(-30deg);
}

/* Large Apple under 'CINNAMON' (Must clear text) */
.p-pos-2 {
    margin-left: -450px;
    margin-top: 120px;
    width: 160px;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 1;
}

/* High Top-Left Apple */
.p-pos-1 {
    margin-left: -280px;
    margin-top: -350px;
    width: 120px;
    transform: translate(-50%, -50%) rotate(30deg);
}

/* Low Bottom-Left Apple */
.p-pos-10 {
    margin-left: -320px;
    margin-top: 300px;
    width: 150px;
    transform: translate(-50%, -50%) rotate(-20deg);
}

/* --- RIGHT FLANK --- */
/* Vertical Apple next to '01' (Must visually separate) */
.p-pos-3 {
    margin-left: 280px;
    margin-top: 50px;
    width: 135px;
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 5;
}

/* High Top-Right Cinnamon */
.p-pos-6 {
    margin-left: 220px;
    margin-top: -320px;
    width: 110px;
    transform: translate(-50%, -50%) rotate(-15deg);
}

/* Apple near Top-Right Cinnamon */
.p-pos-8 {
    margin-left: 350px;
    margin-top: -200px;
    width: 100px;
    transform: translate(-50%, -50%) rotate(15deg);
}

/* Cinnamon Low Right */
.p-pos-9 {
    margin-left: 250px;
    margin-top: 250px;
    width: 130px;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* --- CENTER / FRAMING --- */
/* Selected Apple (Bottom Center) - DISTINCTLY BELOW TEXT */
.p-pos-20 {
    bottom: auto;
    left: 50%;
    margin-left: 0px;
    margin-top: 280px;
    width: 140px;
    transform: translate(-50%, -50%) rotate(10deg);
    z-index: 10;
    display: block;
}

/* Tiny slice on cap */
.p-pos-12 {
    top: auto;
    bottom: auto;
    margin-left: -40px;
    margin-top: -260px;
    width: 90px;
    transform: translate(-50%, -50%) rotate(5deg);
    z-index: 10;
}

/* Cinnamon tucking behind right */
.p-pos-4 {
    margin-left: 180px;
    margin-top: 80px;
    width: 110px;
    transform: translate(-50%, -50%) rotate(-40deg);
    z-index: -1;
}

/* --- FAR OUTLIERS (Blur/Fill) --- */
.p-pos-14 {
    margin-left: -550px;
    margin-top: 200px;
    filter: blur(2px);
    opacity: 0.7;
}

/* Deep Left */
.p-pos-11 {
    margin-left: 500px;
    margin-top: 350px;
    filter: blur(3px);
    opacity: 0.8;
}

/* Deep Right */
.p-pos-5 {
    display: none;
}

/* Rest hidden */
.p-pos-7 {
    display: none;
}

.p-pos-15 {
    display: none;
}

.p-pos-16 {
    display: none;
}

.p-pos-17 {
    display: none;
}

.p-pos-18 {
    display: none;
}

.p-pos-19 {
    display: none;
}

.p-pos-21 {
    display: none;
}



/* FLOATING KEYFRAMES UPDATE (For Center-Origin) */
/* Since margin is used for positioning, we can't use margin for bobbing or it will override. Using transform translate. */
@keyframes floatIdle {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(-15px);
    }
}

.parallax-asset {
    animation: floatIdle 6s ease-in-out infinite;
    /* We need to pass rotation variable to each asset manually in CSS or rely on JS update? JS update uses transform. */
    /* Actually, the JS scroll logic overrides transform heavily. */
    /* Better: Use a wrapper for position, and inner img for bobbing? No, too much HTML change. */
    /* Simple fix: Add the rotation to the animation rule dynamically? No. */
    /* JS controls transform on scroll. We should let CSS handle position via margins, and JS handle scroll transform (translateY). */
    /* NOTE: The JS sets transform: translateY(...) rotate(...). This overrides the translate(-50%, -50%). */
    /* FIX: JS must include translate(-50%, -50%) in its setAttribute or style. */
}



/* TIGHTENED LAYOUT (Closer to Screenshot) */
/* Bringing everything in by ~30-40% */

/* --- LEFT FLANK --- */
/* Cinnamon pointing at 'A' in Apple */
.p-pos-13 {
    margin-left: -200px;
    margin-top: -60px;
}

/* Was -280, -80 */
/* Large Apple over 'CINNAMON' */
.p-pos-2 {
    margin-left: -320px;
    margin-top: 100px;
    width: 170px;
}

/* Was -450. Closer but clears text (text is approx 150px from center?) */
/* High Top-Left Apple */
.p-pos-1 {
    margin-left: -180px;
    margin-top: -280px;
}

/* Was -280, -350 */
/* Low Bottom-Left Apple */
.p-pos-10 {
    margin-left: -220px;
    margin-top: 220px;
}

/* Was -320, 300 */

/* --- RIGHT FLANK --- */
/* Vertical Apple next to '01' */
.p-pos-3 {
    margin-left: 200px;
    margin-top: 40px;
}

/* Was 280. Fits snugly next to bottle. */
/* High Top-Right Cinnamon */
.p-pos-6 {
    margin-left: 160px;
    margin-top: -240px;
}

/* Was 220, -320 */
/* Apple near Top-Right Cinnamon */
.p-pos-8 {
    margin-left: 260px;
    margin-top: -150px;
}

/* Was 350, -200 */
/* Cinnamon Low Right */
.p-pos-9 {
    margin-left: 180px;
    margin-top: 200px;
}

/* Was 250, 250 */

/* --- CENTER --- */
/* The 'Selected' Apple */


/* ================= MOBILE MENU STYLES ================= */

/* Initial State: Hamburger Hidden on Desktop */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 1.5rem;
    z-index: 1001;
    /* Above almost everything */
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    /* Dark background */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 2000;
    /* Highest priority */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Close Button */
.mobile-menu-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
}

.mobile-menu-close:hover {
    transform: scale(1.1) rotate(90deg);
}

/* Links */
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.mobile-nav-links a {
    color: white;
    text-decoration: none;
    font-family: 'Onest', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-menu-overlay.active .mobile-nav-links a {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation for Links */
.mobile-menu-overlay.active .mobile-nav-links a:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-overlay.active .mobile-nav-links a:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-menu-overlay.active .mobile-nav-links a:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-menu-overlay.active .mobile-nav-links a:nth-child(4) {
    transition-delay: 0.4s;
}

/* ================= PREMIUM LOADING SCREEN ================= */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    /* Swift pull-down */
}

#page-loader.loaded {
    transform: translateY(100%);
    /* Slide down out of view */
}

.loader-content {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper: Ensures Black BG for Multiplying */
.loader-wrapper {
    position: relative;
    width: 240px;
    /* Desktop: 2x Scale */
    height: 240px;
    background-color: #000000;
    overflow: hidden;
    border-radius: 4px;
    /* Vignette to hide any edge bleeding */
    box-shadow: inset 0 0 0 50px #000000;

    /* Throb Animation applies to the whole stack */
    animation: loaderThrob 1.5s ease-in-out infinite;
}

/* Layer 1: The White Mascot Image */
.mascot-base {
    position: absolute;
    inset: 0;
    background-image: url('assets/loader_mascot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    filter: brightness(100%);
}

/* Layer 2: The Gradient Overlay (Multiply) */
.mascot-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #A1F45A 0%, #8B0000 33%, #7DBA43 66%, #A1F45A 100%);
    background-size: 200% 200%;

    /* DOUBLE SAFETY: Mask the gradient layer itself */
    -webkit-mask-image: url('assets/loader_mascot.png');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('assets/loader_mascot.png');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    mix-blend-mode: multiply;

    opacity: 0;
    transition: opacity 0.5s ease;
}

/* ACTIVE STATE: Fade in the gradient */
.mascot-gradient.active {
    opacity: 1;
    animation: loaderFillShine 2s linear infinite;
}

/* MOBILE ADJUSTMENT: 50% Size */
@media (max-width: 1100px) {
    .loader-wrapper {
        width: 120px;
        height: 120px;
        box-shadow: inset 0 0 0 25px #000000;
        /* Scale down vignette */
    }
}

@keyframes loaderThrob {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

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

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

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

/* END PREMIUM LOADING SCREEN */

/* ================= MEDIA QUERIES FOR MOBILE MENU ================= */
@media (max-width: 1100px) {
    /* Tablet/Mobile Breakpoint */

    /* Hide Desktop Nav */
    .main-nav {
        display: none;
    }

    /* Show Hamburger */
    .mobile-menu-toggle {
        display: block;
    }

    /* Reduce Header Padding */
    .site-header {
        padding: 0 1.5rem;
    }

    /* Align right properly */
    .header-actions {
        padding-right: 0;
    }

    /* Products Section: Vertical Stacking for Mobile - FORCED */
    .products-carousel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4rem;
        /* Increased spacing */
        overflow-x: hidden;
        padding-bottom: 2rem;
    }

    /* Ensure cards don't get too wide on mobile */
    .product-card {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Footer Mobile Adjustments - FIXED ROW */
    .footer-branding-row {
        flex-direction: row;
        /* FORCE ROW */
        align-items: center;
        justify-content: center;
        gap: 1rem;
        width: 100%;
        padding-left: 100px;
        /* Shift content right */
    }

    /* Adjust specific items */
    .mascot {
        transform: translateX(21px);
        /* Pushed +5px (Total 21px) */
        height: 45px !important;
    }

    .footer-logo {
        transform: translateX(28px);
        /* Nudged 2px left (was 30px) */
    }

    .slogan {
        transform: translateX(-60px);
        /* Shifted 1cm left (Total -60px) */
    }

    .footer-flank-img {
        display: block;
        height: 25px;
        margin: 0;
    }

    /* New positioning offsets applied to specific class if needed, checking existing...
       The above .slogan rule handles it. 
       Adding explicit specificity to match plan if needed, but .slogan seems to satisfy.
    */
    .footer-flank-img.mascot {
        transform: translateX(44px) !important;
    }

    .footer-flank-img.slogan {
        transform: translateX(-60px) !important;
    }

    .footer-logo img {
        height: 40px;
    }

    .footer-socials {
        justify-content: center !important;
        gap: 1.5rem !important;
        /* Closer together (was 3rem) */
        margin-top: calc(2rem - 38px);
        /* Moved up by 1cm (~38px) from original 2rem */
    }

    /* Mobile Hero Image Sizing */
    .hero-product-img {
        height: auto;
        max-height: 55vh;
        /* Larger on mobile too */
        width: 100%;
        margin-top: 1rem;
    }

    /* Signup Box Mobile Refinement */
    .signup-premium-box.glass-panel {
        padding: 1.5rem;
    }

    .signup-content {
        margin-top: 2.5rem;
    }

    .signup-title-main {
        font-size: 1.8rem !important;
    }

    .signup-title-sub {
        font-size: 0.72rem !important;
    }

    .signup-desc {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    /* Widen and Stack Forms */
    .forms-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 0 0.2rem;
        /* Maximum width bleed */
    }

    .contact-form.glass-panel,
    .signup-premium-box.glass-panel {
        width: 130% !important;
        margin-left: calc(-15% + 30px) !important;
        max-width: none !important;
    }

    .nutrition-container {
        width: 120% !important;
        margin-left: -10% !important;
        max-width: none !important;
    }

    /* Slow down text animation on mobile */
    .highlight-text::after {
        animation-duration: 5s !important;
    }

    /* Mobile Slogan Divider */
    .mobile-slogan-divider {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 0;
        /* CRITICAL: Adds no space */
        position: relative;
        z-index: 5;
        overflow: visible;
        /* Let the giant icon bleed */
    }

    .mobile-slogan-divider img {
        position: absolute;
        width: 162vw;
        /* Reduced by 10% from 180vw */
        max-width: 1200px;
        height: auto;
        opacity: 1;
        transform: translateY(calc(-50% + 6cm));
        /* Shifted total 6cm down */
        filter: drop-shadow(0 0 30px rgba(161, 244, 90, 0.25));
        pointer-events: none;
    }

    /* Mobile Floating Lime & Chocolate (Top Right) */
    @media (max-width: 900px) {

        .mobile-only-float,
        .mobile-only-float-chocolate {
            display: block !important;
            position: absolute;
            top: 15vh;
            right: -5vw;
            width: 35vw;
            z-index: 20;
            animation: floatMobile 6s ease-in-out infinite;
        }

        /* Mobile Floating Berry & Apple (Lower Left) */
        .mobile-only-float-berry,
        .mobile-only-float-apple {
            display: block !important;
            position: absolute;
            top: calc(55vh + 2cm);
            /* Lower half relative to product */
            left: -2vw;
            /* Left side bleed */
            width: 35vw;
            z-index: 20;
            animation: floatMobile 6s ease-in-out infinite;
            animation-delay: 1s;
            /* Offset timing */
        }
    }

    @keyframes floatMobile {

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

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

/* Product Switch Animations */
@keyframes productSlideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(15vh);
        opacity: 0;
    }
}

@keyframes productSlideInDown {
    from {
        transform: translateY(-15vh);
        opacity: 0;
    }

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

@keyframes productSlideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-15vh);
        opacity: 0;
    }
}

@keyframes productSlideInUp {
    from {
        transform: translateY(15vh);
        opacity: 0;
    }

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

.product-slide-out-down {
    animation: productSlideOutDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-slide-in-down {
    animation: productSlideInDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-slide-out-up {
    animation: productSlideOutUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-slide-in-up {
    animation: productSlideInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- ELITE CREATIVE PARALLAX SYSTEM --- */
.parallax-system {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.elite-asset {
    position: absolute;
    will-change: transform;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    object-fit: contain;
    animation: eliteBob 8s ease-in-out infinite;
}

/* Depth Tiers (speeds handled by JS) */
.depth-front {
    z-index: 5;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
}

.depth-mid {
    z-index: 4;
    filter: blur(1px) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.depth-back {
    z-index: 3;
    filter: blur(4px) opacity(0.7);
}

/* Scaling Tiers (Realistic Ratios) */
.size-tiny {
    width: 25px;
}

.size-small {
    width: 45px;
}

.size-medium {
    width: 110px;
}

.size-large {
    width: 220px;
}

.size-xl {
    width: 320px;
}

/* Section Specific Overrides for Mobile */
@media (max-width: 1100px) {
    .size-xl {
        width: 220px;
    }

    .size-large {
        width: 140px;
    }

    .size-medium {
        width: 80px;
    }
}

@keyframes eliteBob {

    0%,
    100% {
        translate: 0 0;
        rotate: var(--r, 0deg);
    }

    50% {
        translate: 0 -20px;
        rotate: calc(var(--r, 0deg) + 5deg);
    }
}

/* Visibility Control via Body Data Attribute */
[data-flavor="0"] .flavor-apple,
[data-flavor="1"] .flavor-lime,
[data-flavor="2"] .flavor-chocolate,
[data-flavor="3"] .flavor-berry,
[data-flavor="4"] .flavor-vanilla {
    opacity: 1;
}

/* Ensure other flavors fade out */
[data-flavor="0"] .elite-asset:not(.flavor-apple),
[data-flavor="1"] .elite-asset:not(.flavor-lime),
[data-flavor="2"] .elite-asset:not(.flavor-chocolate),
[data-flavor="3"] .elite-asset:not(.flavor-berry),
[data-flavor="4"] .elite-asset:not(.flavor-vanilla) {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Bottom Edge */

/* --- PREMIUM DESCRIPTION BOX --- */
.description-box {
    margin-bottom: 2rem;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 580px;
    /* Aligned with 'CINNAMON' text length */
    /* Glassmorphism */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    /* Required for the mask trick */
}

/* Illuminated Gradient Border */
.description-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* Border thickness */
    background: linear-gradient(90deg,
            var(--accent-primary) 0%,
            var(--accent-secondary) 33%,
            var(--accent-tertiary) 66%,
            var(--accent-primary) 100%);
    background-size: 300% auto;
    animation: shine 12s linear infinite;
    -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;
    /* Subtle illumination */
    transition: opacity 0.3s ease;
}

/* Accent Glow */
.description-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 15px var(--accent-primary);
    opacity: 0.05;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.description-box:hover::after {
    opacity: 0.15;
}

.description-box:hover::before {
    opacity: 1;
    /* Brighter on hover */
}

.description-box:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.description-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    user-select: none;
}

.desc-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-color);
    text-transform: uppercase;
    opacity: 0.9;
}

.toggle-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.toggle-icon span {
    position: absolute;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal Line */
.toggle-icon span:first-child {
    width: 100%;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Vertical Line */
.toggle-icon span:last-child {
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Active State (Open) */
.description-box.open .toggle-icon span:last-child,
.faq-item.active .toggle-icon span:last-child {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.description-content {
    max-height: 0;
    opacity: 0;
    padding: 0 1.5rem;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, padding 0.5s ease;
}

.description-box.open .description-content {
    max-height: 200px;
    /* Arbitrary large enough height */
    opacity: 1;
    padding-bottom: 1.5rem;
}

.product-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    /* Slightly larger for better 3-line fill */
    line-height: 1.5;
    color: #cccccc;
    margin: 0;
    text-align: left;
    letter-spacing: 0.3px;
}

/* --- FINAL LAYERING SYSTEM (User Request: "Exact Same Shit") --- */

/* Layer 1: The Black Canvas Sections */
.cta-section,
.contact-section,
.site-footer {
    position: relative !important;
    z-index: 1 !important;
    background-color: #000000 !important;
    overflow: visible !important;
    /* Allow parallax flow */
}

/* Layer 2: The Parallax System (Floating Fruit) */
.parallax-system {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Stretches to full body height, solving clipping */
    height: auto !important;
    pointer-events: none;
    z-index: 5 !important;
    /* Floats OVER the black background */
    overflow: visible !important;
}

/* Layer 3: The Content (Text/Forms) - Must be Readable */
.cta-content,
.forms-wrapper,
.site-footer .footer-content,
.section-title,
.section-subtitle {
    position: relative !important;
    z-index: 10 !important;
    /* Floats OVER the fruit */
}

/* Mobile Floating Asset (Default Hidden) */
.mobile-only-float,
.mobile-only-float-chocolate,
.mobile-only-float-berry,
.mobile-only-float-apple {
    display: none;
}

.elite-asset {
    position: absolute;
    /* Ensure they are position absolute relative to the parallax-system container */
}

/* --- MOBILE "POSTER MODE" (Strict Screenshot Match) --- */
@media (max-width: 1100px) {
    .hero {
        height: 100dvh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Changed to allow top-anchored growth */
        align-items: center;
        padding-bottom: 0;
        position: relative;
        overflow: visible !important;
        /* Allow flavor text lift */
    }

    /* 1. Title: Extreme Upward Shift */
    .product-title {
        font-size: 14vw !important;
        line-height: 0.9;
        position: absolute;
        top: calc(-70vh + 1cm) !important;
        /* Extreme lift into header space */
        width: 100%;
        text-align: center;
        z-index: 0;
        text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        pointer-events: none;
    }

    /* 2. Image: Centered & Tall */
    .hero-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        /* Override previous styles */
        justify-content: center;
        align-items: center;
        z-index: 1;
        pointer-events: none;
    }

    .hero-product-img {
        height: auto;
        max-height: 52dvh !important;
        width: auto !important;
        max-width: 60vw !important;
        /* Elastic center image */
        margin-top: -2vh;
        z-index: 5;
    }

    /* 3. Controls & Socials: Fully Elastic Proportional Scaling */
    .hero-socials {
        position: absolute;
        left: 10vw !important;
        top: 42% !important;
        /* Nudged up by ~1cm (approx 8vh/8%) */
        transform: translateY(-50%);
        flex-direction: column !important;
        gap: 6vw !important;
        z-index: 100;
        display: flex !important;
    }

    .hero-social-link svg {
        width: 6vw !important;
        height: 6vw !important;
        opacity: 0.6;
    }

    .hero-controls {
        display: contents;
    }

    .product-index {
        position: absolute;
        right: calc(10vw + 4px) !important;
        /* Proportional spacing */
        top: 39.6dvh !important;
        transform: translate(50%, -50%) !important;
        font-size: 20vw !important;
        line-height: 1;
        font-weight: 700;
        z-index: 90;
        text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    .index-static,
    .index-dynamic {
        display: inline-block;
    }

    .nav-arrows {
        position: absolute;
        right: calc(10vw + 4px) !important;
        /* Match index spacing */
        top: calc(39.6dvh + 10vw + 20px) !important;
        /* Dynamic top: Center + Half Num Height + Buffer */
        transform: translate(50%, -50%);
        display: flex !important;
        flex-direction: row;
        gap: 2vw !important;
        z-index: 100;
    }

    .arrow-btn {
        width: 7vw !important;
        /* Smaller arrows */
        height: 7vw !important;
        /* Smaller arrows */
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .arrow-btn svg {
        width: 4vw !important;
        /* Scaled down icon */
        height: 4vw !important;
        transform: rotate(-90deg);
    }

    /* 4. Buttons: Top Anchored (Push Logic) */
    .hero-content {
        position: relative;
        z-index: 10;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin-top: 72dvh;
        /* Stable anchor for downward expansion */
    }

    .description-box {
        width: 75vw;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 3vw;
        margin-bottom: 4vw;
        overflow: hidden;
    }

    .description-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0 4vw;
        min-height: 12vw;
    }

    .desc-label {
        text-align: center;
        width: 100%;
        padding: 0 8vw;
        font-size: 3.2vw !important;
        white-space: nowrap;
        letter-spacing: 0.5vw;
    }

    .toggle-icon {
        position: absolute;
        right: 4vw;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
    }

    .toggle-icon span:first-child {
        height: 2px;
    }

    .toggle-icon span:last-child {
        width: 2px;
    }

    .hero-cta {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-cta .btn-primary {
        width: 60vw;
        padding: 0 !important;
        min-height: 12vw;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10vw !important;
        font-size: 3.5vw !important;
    }
}

/* Adjustment for screens wider than 385px (User Reference) */
@media (min-width: 385px) and (max-width: 900px) {
    .hero-content {
        margin-top: calc(72dvh - 0.5cm) !important;
        /* Lifted by 0.5cm */
    }
}

/* Adjustment for screens wider than 343px (Reference SS) */
@media (min-width: 344px) and (max-width: 900px) {
    .product-index {
        right: calc(10vw + 9px) !important;
        /* +5px from base (Total +9px shift logic) */
    }

    .nav-arrows {
        right: calc(10vw + 9px) !important;
        /* +5px from base */
    }
}

/* WIDE MOBILE OPTIMIZATIONS (450px - 760px) */
@media (min-width: 450px) and (max-width: 760px) {
    .product-index {
        font-size: 25vw !important;
        /* Larger numbers */
        right: 12vw !important;
        /* Push closer to product */
    }

    .nav-arrows {
        right: 12vw !important;
        /* Match index alignment */
        top: calc(39.6dvh + 12.5vw + 20px) !important;
        /* Dynamic top: Center + Half New Font (12.5vw) + Buffer */
        gap: 3vw !important;
    }

    .arrow-btn {
        width: 9vw !important;
        height: 9vw !important;
    }

    .arrow-btn svg {
        width: 5vw !important;
        height: 5vw !important;
    }
}