/* ==========================================================================
    Base & Variables
    ========================================================================== */

    /* Zolina Font Family */
    @font-face {
        font-family: 'Zolina';
        src: url('../assets/fonts/fonnts.com-Zolina_Thin.ttf') format('truetype');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Zolina';
        src: url('../assets/fonts/fonnts.com-Zolina_Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Zolina';
        src: url('../assets/fonts/fonnts.com-Zolina_Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Zolina';
        src: url('../assets/fonts/fonnts.com-Zolina_Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Zolina';
        src: url('../assets/fonts/fonnts.com-Zolina_Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Zolina';
        src: url('../assets/fonts/fonnts.com-Zolina_Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    :root {
        /* Color Palette - Luxury Organic Liquid */
        --bg-primary: #E8DFD0; /* Warm parchment */
        --bg-secondary: #DDD4C4;
        --text-primary: #000000; /* Deep rich forest black */
        --text-secondary: #000000;
        --accent-color: #C86B28; /* Warm Palm Sugar Gold */
        --accent-dark: #A3521A;
        --brand-dark: #212b1d; /* Very dark rich green */
        --brand-light: #44633B;
        --white: #FFFFFF;
        
        /* Typography */
        --font-display: 'Lora', serif;
        --font-body: 'Raleway', sans-serif;
        
        /* Spacing */
        --space-sm: 1rem;
        --space-md: 2rem;
        --space-lg: 4rem;
        --space-xl: 8rem;
        
        /* Layout */
        --container-width: 1400px;
        --border-radius-sm: 12px;
        --border-radius-md: 24px;
        --border-radius-lg: 32px;
        --border-radius-organic: 40px; /* Modern sleek radius */
        
        /* Transitions (2026 Fluid & Spatial Trends) */
        --transition-fast: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        --transition-slow: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); /* Softer, more fluid */
        --spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Spatial bounce */
    }

    .menu-decor {
        position: absolute;
        top: 0;
        height: 100%;
        width: 150px;
        z-index: 0;
        pointer-events: none;
        opacity: 0.3;
    }

    .menu-decor-left { left: 0; }
    .menu-decor-right { right: 0; }

    .menu-decor svg {
        width: 100%;
        height: 100%;
    }

    ::selection{
        background-color: var(--accent-color);
        color: var(--bg-primary);
    }

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

    html {
        scroll-behavior: initial; /* Managed by JS for smooth scroll */
        font-size: 16px;
    }

    body {
        font-family: var(--font-body);
        background-color: var(--bg-primary);
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
        scrollbar-width: none; 
        cursor: auto;
    }

    html {
        scrollbar-width: none; /* Firefox */
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }

    /* Scroll Container */
    [data-scroll-container] {
        width: 100%;
        background-color: var(--bg-primary);
    }

    /* Ensure navbar stays on top */
    .navbar {
        z-index: 1000;
    }

    /* Typography */
    h1, h2, h3, h4, h5, h6, .brand-logo {
        font-family: var(--font-display);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    h1 { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -0.02em; }
    h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: -0.01em; }
    h3 { font-size: 1.5rem; }

    .italic-accent {
        font-style: italic;
        font-weight: 400;
        font-family: var(--font-display);
        color: var(--brand-dark);
        text-transform: none;
    }

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

    ul {
        list-style: none;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
        transition: transform 0.8s var(--ease-out-expo), filter 0.8s var(--ease-out-expo);
    }

    .parallax-image {
        overflow: hidden;
    }

    /* Noise Overlay for texture */
    .noise-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.04;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
        /* Static — no animation for performance */
    }

    @media (max-width: 1024px) {
        .noise-overlay {
            animation: none; /* Disable noise animation on mobile */
        }
    }

    @keyframes grainMove {
        0%, 100% { transform: translate(0, 0); }
        10% { transform: translate(-1%, -1%); }
        20% { transform: translate(1%, 1%); }
        30% { transform: translate(-2%, 1%); }
        40% { transform: translate(1%, -2%); }
        50% { transform: translate(-1%, 2%); }
        60% { transform: translate(2%, 1%); }
        70% { transform: translate(-2%, -1%); }
        80% { transform: translate(1%, 2%); }
        90% { transform: translate(-1%, -2%); }
    }

    /* Geometric Elements */
    .geo-shape {
        position: absolute;
        pointer-events: none;
        z-index: -1;
        opacity: 0.15;
    }

    .geo-shape svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

    .section-divider {
        width: 100%;
        height: 100px;
        background-color: var(--bg-primary);
        position: relative;
        z-index: 5;
        overflow: hidden;
        margin-top: -1px;
    }

    .divider-wave {
        width: 100%;
        height: 100%;
        display: block;
    }

    .parallax-waves > use {
        animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
    }
    .parallax-waves > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }
    .parallax-waves > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }
    .parallax-waves > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }
    .parallax-waves > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 16s;
    }
    .parallax-waves > use:nth-child(5) {
        animation-delay: -6s;
        animation-duration: 20s;
    }
    
    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0);
        }
        100% { 
            transform: translate3d(85px, 0, 0);
        }
    }

    .geo-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
        opacity: 0.1;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C25E42' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .floating-shape-1 {
        width: 300px;
        height: 300px;
        top: 10%;
        right: -5%;
        color: var(--accent-color);
    }

    .floating-shape-2 {
        width: 200px;
        height: 200px;
        bottom: 20%;
        left: -2%;
        color: var(--brand-dark);
    }

    .shape-rotate {
        animation: rotate 20s linear infinite;
    }

    .shape-float {
        animation: floating 8s ease-in-out infinite;
    }

    /* Floating Blobs (Background) */
    .floating-blobs {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        overflow: hidden;
        pointer-events: none;
        filter: blur(80px);
        opacity: 0.2;
    }

    @media (max-width: 768px) {
        .floating-blobs {
            display: none; /* Blobs are too heavy for mobile GPUs */
        }
    }

    .blob {
        position: absolute;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--brand-light), var(--accent-color));
        opacity: 0.5;
    }

    .blob-1 {
        width: 400px;
        height: 400px;
        top: -5%;
        left: -5%;
        animation: blobMove1 25s infinite alternate-reverse ease-in-out;
    }

    .blob-2 {
        width: 350px;
        height: 350px;
        bottom: -5%;
        right: -5%;
        background: linear-gradient(135deg, var(--accent-color), #FFB74D);
        animation: blobMove2 30s infinite alternate ease-in-out;
    }

    .blob-3 { display: none; }

    @keyframes blobMove1 {
        from { transform: translate(0, 0) scale(1); }
        to { transform: translate(100px, 150px) scale(1.2) rotate(45deg); }
    }

    @keyframes blobMove2 {
        from { transform: translate(0, 0) scale(1.1); }
        to { transform: translate(-150px, -100px) scale(0.9) rotate(-30deg); }
    }

    @keyframes blobMove3 {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-30%, -60%) rotate(90deg) scale(1.3); }
    }

    /* Scroll Progress Line */
    .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background: linear-gradient(to right, var(--brand-dark), var(--accent-color));
        z-index: 2000;
        transition: width 0.1s ease-out;
    }

    .label-geo {
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.7; }
    }

    /* Custom Cursor */
    .cursor {
        width: 10px;
        height: 10px;
        background-color: var(--accent-color);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 10000;
        will-change: transform;
        transition: width 0.2s, height 0.2s, background-color 0.2s;
    }

    .cursor-follower {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(194, 94, 66, 0.4);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        will-change: transform;
        transition: width 0.3s, height 0.3s, border-color 0.3s;
    }

    .cursor.hover {
        width: 60px;
        height: 60px;
        background-color: rgba(194, 94, 66, 0.1);
        mix-blend-mode: multiply;
    }

    .cursor-follower.hover {
        opacity: 0;
    }

    /* Layout Classes */
    .section-padding {
        padding: var(--space-xl) 5%;
    }

    .dark-section {
        background-color: var(--brand-dark);
        color: var(--bg-primary);
    }

    .section-label {
        display: inline-block;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--accent-color);
    }

    .section-label.light {
        color: var(--bg-secondary);
    }

    .text-light {
        color: var(--bg-primary);
    }

    .text-light .italic-accent {
        color: var(--accent-color);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1.2rem 2.5rem;
        font-weight: 600;
        font-family: var(--font-body);
        font-size: 1rem;
        border-radius: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 1;
        border: none;
        text-decoration: none;
        letter-spacing: 0.05em;
        transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), color 0.4s ease;
    }

    /* Magnetic Button Prep */
    .btn-magnetic {
        display: inline-block;
    }

    .btn-primary {
        background-color: var(--brand-dark);
        color: var(--bg-primary);
        box-shadow: 0 10px 30px rgba(44, 66, 63, 0.1);
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 150%;
        height: 100%;
        background-color: var(--accent-color);
        transform: translateX(-100%) skewX(-15deg);
        transition: transform 0.6s var(--ease-out-expo);
        z-index: -1;
    }

    .btn-primary:hover {
        transform: scale(1.05) translateY(-3px);
        box-shadow: 0 15px 40px rgba(194, 94, 66, 0.2);
        color: var(--white);
    }

    .btn-primary:hover::before {
        transform: translateX(-15%) skewX(-15deg);
    }

    .btn-outline {
        border: 1px solid var(--brand-dark);
        color: var(--brand-dark);
        background: transparent;
    }

    .btn-outline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 150%;
        height: 100%;
        background-color: var(--brand-dark);
        transform: translateX(-100%) skewX(-15deg);
        transition: transform 0.6s var(--ease-out-expo);
        z-index: -1;
    }

    .btn-outline:hover {
        color: var(--bg-primary);
        transform: scale(1.05) translateY(-3px);
        border-color: var(--brand-dark);
    }

    .btn-outline:hover::before {
        transform: translateX(-15%) skewX(-15deg);
    }

    .light-btn {
        border-color: var(--bg-primary);
        color: var(--bg-primary);
    }

    .light-btn::before {
        background-color: var(--bg-primary);
    }

    .light-btn:hover {
        color: var(--brand-dark);
        border-color: var(--bg-primary);
    }

    .btn i {
        margin-left: 0.8rem;
        font-size: 1.2rem;
        transition: transform 0.5s var(--ease-out-expo);
    }

    .btn:hover i {
        transform: translateX(8px) scale(1.2);
    }

    /* ==========================================================================
    Navigation
    ========================================================================== */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 1.2rem 5%;
        z-index: 1000;
        transition:
            padding 0.6s var(--ease-out-expo),
            top 0.6s var(--ease-out-expo);
    }

    /* Inner container handles the pill shape */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
        border-radius: 0px;
        padding: 0 0;
        background: transparent;
        box-shadow: none;
        border: 1px solid transparent;
        transition:
            max-width 0.6s var(--ease-out-expo),
            border-radius 0.6s var(--ease-out-expo),
            background 0.5s ease,
            padding 0.6s var(--ease-out-expo),
            box-shadow 0.5s ease,
            border-color 0.5s ease;
    }

    /* Scrolled: pill effect on container */
    .navbar.scrolled {
        top: 0.8rem;
        padding: 0 5%;
    }

    .navbar.scrolled .nav-container {
        max-width: 860px;
        border-radius: 100px;
        background: rgba(30, 45, 26, 0.93);
        backdrop-filter: blur(20px) saturate(1.8);
        -webkit-backdrop-filter: blur(20px) saturate(1.8);
        padding: 0.45rem 0.45rem 0.45rem 1.8rem;
        box-shadow: 0 8px 32px rgba(30, 45, 26, 0.22), 0 2px 8px rgba(0,0,0,0.1);
        border-color: rgba(255,255,255,0.07);
    }

    /* Scrolled: logo kecil */
    .navbar.scrolled .brand-logo img {
        height: 40px !important;
        transition: height 0.4s ease;
    }

    /* Scrolled: nav links putih */
    .navbar.scrolled .nav-link {
        color: rgba(232, 223, 208, 0.8);
        font-size: 0.88rem;
    }

    .navbar.scrolled .nav-link:hover {
        color: #E8DFD0;
    }

    .navbar.scrolled .nav-link::after {
        background-color: var(--accent-color);
    }

    /* Scrolled: tombol pill kecil */
    .navbar.scrolled .btn-outline {
        border-color: rgba(232, 223, 208, 0.3);
        color: #E8DFD0;
        padding: 0.55rem 1.3rem;
        font-size: 0.82rem;
    }

    .navbar.scrolled .btn-outline:hover {
        color: var(--brand-dark);
    }

    .navbar.scrolled .btn-outline::before {
        background-color: #E8DFD0;
    }

    /* Scrolled: menu toggle putih */
    .navbar.scrolled .menu-toggle {
        color: #E8DFD0;
    }

    .brand-logo {
        font-size: 2rem;
        font-weight: 800;
        color: var(--brand-dark);
    }

    .brand-logo .logo-light {
        display: none;
    }

    .brand-logo .logo-dark {
        display: block;
    }

    /* Scrolled: swap ke logo light (logo1.png) karena background navbar jadi gelap */
    .navbar.scrolled .brand-logo .logo-light {
        display: block;
    }

    .navbar.scrolled .brand-logo .logo-dark {
        display: none;
    }

    /* Desktop nav links */
    .desktop-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }

    @media (max-width: 768px) {
        .desktop-nav {
            display: none;
        }
    }

    /* ── Sidebar — hidden on desktop, shown only on mobile ── */
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--brand-dark);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 2.5rem 2.5rem;
        z-index: 1200;
        transform: translateX(100%);
        transition: transform 0.65s var(--ease-out-expo);
        box-shadow: -20px 0 60px rgba(30, 45, 26, 0.35);
        overflow-y: auto;
    }

    /* Desktop: hide sidebar-only elements */
    .nav-links .sidebar-header,
    .nav-links .sidebar-footer-decor {
        display: none;
    }

    .nav-links .sidebar-nav {
        display: contents;
    }

    /* Desktop nav link style */
    .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0 0 4px 0;
        border-bottom: none;
        font-weight: 500;
        font-size: 0.95rem;
        font-family: var(--font-body);
        color: var(--brand-dark);
        letter-spacing: 0.01em;
        position: relative;
        overflow: hidden;
        transition: color 0.3s ease;
        text-transform: none;
    }

    .nav-link-num {
        display: none;
    }

    .nav-link-text {
        flex: unset;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--brand-dark);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s var(--ease-out-expo);
    }

    .nav-link:hover {
        color: var(--brand-dark);
        padding-left: 0;
    }

    .nav-link:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* Sidebar overlay — hidden on desktop */
    .sidebar-overlay {
        display: none;
    }

    /* Nav actions */
    .nav-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .navbar .btn-outline {
        border-color: var(--brand-dark);
        color: var(--brand-dark);
    }

    .navbar .btn-outline:hover {
        color: var(--bg-primary);
    }

    /* Menu toggle — hidden on desktop */
    .menu-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--brand-dark);
        transition: color 0.4s ease;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }

    .navbar.scrolled .menu-toggle {
        color: #E8DFD0;
    }

    .sidebar-decor { display: none; }

    /* ── Mobile: sidebar ── */
    @media (max-width: 768px) {
        .menu-toggle {
            display: flex;
        }

        .nav-links {
            display: flex;
        }

        .nav-links.active {
            transform: translateX(0);
        }

        .sidebar-overlay {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(10, 14, 10, 0.5);
            backdrop-filter: blur(4px);
            z-index: 1100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

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

        .nav-links .sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 2.5rem;
            flex-shrink: 0;
        }

        .sidebar-logo {
            height: 40px;
            width: auto;
            opacity: 0.9;
        }

        .sidebar-close {
            background: rgba(232, 223, 208, 0.08);
            border: 1px solid rgba(232, 223, 208, 0.15);
            color: #E8DFD0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
        }

        .sidebar-close:hover {
            background: rgba(200, 107, 40, 0.25);
            transform: rotate(90deg);
        }

        .nav-links .sidebar-nav {
            display: flex;
            flex-direction: column;
            width: 100%;
            flex: 1;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.1rem 0;
            border-bottom: 1px solid rgba(232, 223, 208, 0.08);
            font-size: 1.6rem;
            font-family: var(--font-display);
            color: rgba(232, 223, 208, 0.85);
            font-weight: 400;
            letter-spacing: -0.02em;
            transition: color 0.3s ease, padding-left 0.4s var(--ease-out-expo);
        }

        .nav-link:hover {
            color: #E8DFD0;
            padding-left: 0.4rem;
        }

        .nav-link-num {
            display: inline;
            font-family: var(--font-body);
            font-size: 0.65rem;
            font-weight: 500;
            color: var(--accent-color);
            letter-spacing: 0.1em;
            opacity: 0.8;
            flex-shrink: 0;
        }

        .nav-link::after {
            background-color: var(--accent-color);
            transform-origin: left;
        }

        .nav-links .sidebar-footer-decor {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(232, 223, 208, 0.08);
            width: 100%;
            flex-shrink: 0;
        }

        .sidebar-lottie { opacity: 0.6; }

        .sidebar-quote {
            font-family: var(--font-display);
            font-style: italic;
            color: var(--accent-color);
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .sidebar-tagline {
            font-family: var(--font-body);
            font-size: 0.65rem;
            color: rgba(232, 223, 208, 0.35);
            text-transform: uppercase;
            letter-spacing: 0.15em;
        }

        .nav-actions .btn {
            display: none;
        }
    }

    /* ==========================================================================
    Hero Section v2 — Ohayo split layout
    Top: cream dengan wordmark besar
    Bottom: dark panel full width dengan border-radius top
    Produk: menembus batas keduanya di tengah
    ========================================================================== */
    .hero {
        position: relative;
        overflow: hidden;
    }

    .hero-v2 {
        height: 100vh;
        min-height: 100vh;
        background: var(--bg-primary);
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    /* Background cream dengan subtle gradient */
    .hv2-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,107,40,0.08) 0%, transparent 65%),
            var(--bg-primary);
        z-index: 0;
    }

    /* ══ TOP HALF — wordmark + CTA ══ */
    .hv2-top {
        position: relative;
        z-index: 3;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 6rem;
        padding-bottom: 2rem;
    }

    /* ══ WORDMARK ══ */
    .hv2-wordmark-row {
        text-align: center;
        line-height: 1;
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .hv2-wordmark {
        font-family: 'Zolina', var(--font-display);
        font-weight: 700;
        font-size: clamp(6rem, 20vw, 17rem);
        letter-spacing: -0.04em;
        line-height: 0.88;
        color: var(--brand-dark);
        text-transform: none;
        margin: 0;
    }

    /* ══ CTA PILL ══ */
    .hv2-cta-row {
        display: flex;
        justify-content: center;
        margin-top: 1.8rem;
        position: relative;
        z-index: 4;
    }

    .hv2-cta-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        background: var(--brand-dark);
        color: #E8DFD0;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        padding: 0.85rem 2rem 0.85rem 0.85rem;
        border-radius: 100px;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: background 0.35s ease, transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
        box-shadow: 0 8px 28px rgba(30,45,26,0.18);
    }

    .hv2-cta-pill:hover {
        background: var(--accent-color);
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 14px 36px rgba(200,107,40,0.28);
    }

    .hv2-cta-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #E8DFD0;
        color: var(--brand-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        transition: background 0.35s ease, color 0.35s ease;
    }

    .hv2-cta-pill:hover .hv2-cta-icon {
        background: var(--brand-dark);
        color: #E8DFD0;
    }

    /* ══ BOTTOM STAGE — dark panel full width ══ */
    .hv2-stage {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 45%;
        background: var(--brand-dark);
        border-radius: 50% 50% 0 0 / 35% 35% 0 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 6% 3rem;
    }

    /* ══ PRODUK — menembus split, di tengah ══ */
    .hv2-product-anchor {
        position: absolute;
        left: 50%;
        top: 58%;
        /* translate dihandle via GSAP xPercent/yPercent supaya tidak konflik dengan scale */
        z-index: 10;
        width: clamp(260px, 28vw, 440px);
        pointer-events: none;
        transform-origin: center center;
    }

    .hv2-product {
        width: 100%;
        pointer-events: auto; /* aktifkan hover */
        position: relative;
        cursor: none;
    }

    .hv2-product-img {
        width: 100%;
        height: auto;
        display: block;
        transform-origin: center center;
    }

    /* Layer grayscale — selalu terlihat */
    .hv2-product-gray {
        filter: grayscale(1);
        transition: filter 0.3s ease;
    }

    /* Layer berwarna — di atas, di-clip jadi spotlight */
    .hv2-product-color {
        position: absolute;
        inset: 0;
        clip-path: circle(0px at 50% 50%);
        pointer-events: none;
    }

    /* Saat hover: grayscale sedikit lebih terang */
    .hv2-product:hover .hv2-product-gray {
        filter: grayscale(1) ;
    }

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

    /* ══ STATS — arc di bawah produk ══ */
    .hv2-stats {
        display: flex;
        justify-content: center;
        gap: 1.2rem;
        margin-top: 1.4rem;
        padding: 0 0.5rem;
    }

    .hv2-stat-pill {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        width: clamp(64px, 7vw, 88px);
        height: clamp(64px, 7vw, 88px);
        border-radius: 50%;
        background: var(--bg-primary);
        border: 1px solid rgba(232, 223, 208, 0.18);
        backdrop-filter: blur(8px);
        transition: background 0.3s ease, transform 0.3s var(--ease-out-expo);
    }

    .hv2-stat-pill:hover {
        background: rgba(232, 223, 208, 0.15);
        transform: translateY(-4px) scale(1.06);
    }

    /* Offset vertikal untuk efek arc bentuk U */
    .hv2-stat-pill:nth-child(1) { transform: translateY(-16px); }
    .hv2-stat-pill:nth-child(2) { transform: translateY(8px);  }
    .hv2-stat-pill:nth-child(3) { transform: translateY(8px);  }
    .hv2-stat-pill:nth-child(4) { transform: translateY(-16px); }

    .hv2-stat-pill:nth-child(1):hover,
    .hv2-stat-pill:nth-child(4):hover { transform: translateY(-20px) scale(1.06); }
    .hv2-stat-pill:nth-child(2):hover,
    .hv2-stat-pill:nth-child(3):hover { transform: translateY(4px) scale(1.06); }

    .hv2-stat-num {
        font-family: 'Zolina', var(--font-display);
        font-weight: 700;
        font-size: clamp(0.85rem, 1.4vw, 1.1rem);
        letter-spacing: -0.02em;
        color: black;
        line-height: 1;
    }

    .hv2-stat-label {
        font-family: var(--font-body);
        font-size: clamp(0.5rem, 0.8vw, 0.62rem);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: black;
        font-weight: 500;
    }

    /* ══ DESC kiri & kanan di dalam stage ══ */
    .hv2-desc {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: relative;
        z-index: 3;
    }

    .hv2-desc-left {
        align-items: flex-start;
        text-align: left;
    }

    .hv2-desc-right {
        align-items: flex-end;
        text-align: right;
    }

    .hv2-link {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        color: rgba(232, 223, 208, 0.7);
        text-decoration: none;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        border: 1px solid rgba(232, 223, 208, 0.2);
        padding: 0.6rem 1.2rem;
        border-radius: 100px;
        transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
    }

    .hv2-link:hover {
        color: var(--bg-primary);
        border-color: rgba(232, 223, 208, 0.6);
        gap: 0.9rem;
    }

    .hv2-link i {
        font-size: 0.9rem;
        transition: transform 0.3s var(--ease-out-expo);
    }

    .hv2-link:hover i {
        transform: translateX(3px);
    }

    /* ══ RESPONSIVE ══ */
    @media (max-width: 900px) {
        .hv2-product-anchor {
            width: clamp(200px, 35vw, 320px);
        }
        .hv2-stage {
            height: 42%;
            padding: 0 5% 2.5rem;
        }
    }

    @media (max-width: 600px) {
        .hv2-wordmark {
            font-size: clamp(4.5rem, 22vw, 7rem);
        }
        .hv2-product-anchor {
            width: clamp(180px, 55vw, 260px);
        }
        .hv2-stage {
            height: 40%;
            border-radius: 2rem 2rem 0 0;
            padding: 0 5% 2rem;
        }
        .hv2-top {
            padding-top: 5rem;
        }
    }

    /* ── Legacy hero elements kept for compatibility ── */
    .hero-line {
        width: 48px; height: 2px;
        background: var(--accent-color);
        margin-bottom: 1.5rem;
        border-radius: 1px;
    }
    .hero-lead {
        font-family: var(--font-body);
        font-size: 1.05rem;
        color: rgba(253,253,249,0.7);
        line-height: 1.7;
        max-width: 520px;
        font-weight: 300;
        margin-bottom: 1.8rem;
    }
    .hero-actions {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .hero-btn-main {
        border-radius: 100px;
        padding: 1rem 2.2rem;
        font-size: 0.9rem;
        background: var(--accent-color);
        color: #fff;
        border: none;
        box-shadow: 0 8px 30px rgba(200,107,40,0.25);
    }
    .hero-btn-main:hover {
        background: var(--accent-dark);
        box-shadow: 0 12px 40px rgba(200,107,40,0.35);
    }
    .hero-btn-wa {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--font-body);
        font-size: 0.85rem;
        font-weight: 500;
        color: rgba(253,253,249,0.8);
        cursor: pointer;
        transition: color 0.3s ease;
        letter-spacing: 0.02em;
        text-decoration: none;
    }
    .hero-btn-wa:hover { color: #25D366; }
    .hero-btn-wa i { font-size: 1.1rem; }
    .badge-amount {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 700;
        color: #FDFDF9;
        line-height: 1;
    }
    .badge-per {
        font-family: var(--font-body);
        font-size: 0.7rem;
        color: rgba(253,253,249,0.5);
        font-weight: 400;
        margin-top: 0.2rem;
    }

    /* ==========================================================================
    Curved Text Marquee
    ========================================================================== */
    .curved-marquee-section {
        position: relative;
        width: 100%;
        background: var(--bg-primary);
        overflow: hidden;
        z-index: 5;
        margin: 0;
        padding: 0;
        line-height: 0;
    }

    .marquee-inner {
        position: relative;
        width: 100%;
    }

    /* Background SVG — absolute, sits behind text SVG */
    .marquee-bg-svg {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 1;
    }

    /* Text SVG — absolute on top, same dimensions */
    .marquee-text-svg {
        display: block;
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    /* Fade edges left & right */
    .marquee-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(
            to right,
            var(--bg-primary) 0%,
            transparent 12%,
            transparent 88%,
            var(--bg-primary) 100%
        );
    }

        /* ==========================================================================
    About Section — Scroll Chapters
    ========================================================================== */
    .about-chapters {
        position: relative;
        background: var(--bg-primary);
        display: grid;
        grid-template-columns: 280px 1fr;
        grid-template-rows: auto auto;
        max-width: var(--container-width);
        margin: 0 auto;
        padding: var(--space-xl) 5%;
        gap: 0 6rem;
    }

    .chapters-sticky {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 120px;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        align-self: start;
    }

    .chapters-eyebrow {
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-color);
    }

    .chapters-num-wrap {
        display: flex;
        align-items: flex-end;
        gap: 0.3rem;
        line-height: 1;
    }

    .chapters-num {
        font-family: 'Zolina', var(--font-display);
        font-weight: 700;
        font-size: clamp(4rem, 8vw, 7rem);
        letter-spacing: -0.04em;
        color: var(--brand-dark);
        transition: all 0.5s var(--ease-out-expo);
        display: block;
    }

    .chapters-total {
        font-family: var(--font-body);
        font-size: 1rem;
        color: rgba(30, 45, 26, 0.3);
        font-weight: 400;
        padding-bottom: 0.8rem;
    }

    .chapters-progress-track {
        width: 100%;
        height: 2px;
        background: rgba(30, 45, 26, 0.1);
        border-radius: 2px;
        overflow: hidden;
    }

    .chapters-progress-bar {
        height: 100%;
        width: 33.33%;
        background: var(--accent-color);
        border-radius: 2px;
        transition: width 0.5s var(--ease-out-expo);
    }

    .chapters-hint {
        font-family: var(--font-body);
        font-size: 0.72rem;
        color: rgba(30, 45, 26, 0.35);
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chapters-hint::before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 1px;
        background: rgba(30, 45, 26, 0.3);
    }

    .chapters-panels {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 6rem;
    }

    .chapter-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
        opacity: 0.35;
        transition: opacity 0.6s ease;
    }

    .chapter-panel.is-active { opacity: 1; }

    .chapter-img-wrap {
        position: relative;
        aspect-ratio: 4/5;
        overflow: hidden;
    }

    .chapter-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.2s var(--ease-out-expo);
        display: block;
    }

    .chapter-panel.is-active .chapter-img { transform: scale(1.03); }

    .chapter-img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(30,45,26,0.25) 0%, transparent 60%);
        pointer-events: none;
    }

    .chapter-body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .chapter-title {
        font-family: 'Zolina', var(--font-display);
        font-weight: 700;
        font-size: clamp(2.2rem, 4vw, 3.5rem);
        letter-spacing: -0.03em;
        line-height: 1.05;
        color: var(--brand-dark);
        text-transform: none;
    }

    .chapter-title em {
        font-style: italic;
        font-weight: 400;
        font-family: var(--font-display);
        color: var(--accent-color);
    }

    .chapter-text {
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.85;
        color: var(--text-secondary);
        font-weight: 300;
        max-width: 38ch;
    }

    .chapters-stats {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        gap: 0;
        border-top: 1px solid rgba(30, 45, 26, 0.12);
        margin-top: 6rem;
        padding-top: 3rem;
    }

    .cstat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0 2rem;
    }

    .cstat-item:first-child { padding-left: 0; }
    .cstat-item:last-child  { padding-right: 0; }

    .cstat-num {
        font-family: 'Zolina', var(--font-display);
        font-weight: 700;
        font-size: clamp(2rem, 3.5vw, 3rem);
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--brand-dark);
    }

    .cstat-label {
        font-family: var(--font-body);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--accent-color);
        font-weight: 600;
    }

    .cstat-divider {
        width: 1px;
        height: 48px;
        background: rgba(30, 45, 26, 0.12);
        flex-shrink: 0;
    }

    @media (max-width: 1024px) {
        .about-chapters {
            grid-template-columns: 1fr;
        }
        .chapters-sticky {
            position: relative;
            top: auto;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem 2rem;
            margin-bottom: 3rem;
        }
        .chapters-num { font-size: 3rem; }
        .chapters-hint { display: none; }
        .chapters-progress-track { width: 120px; }
        .chapters-panels { grid-column: 1; }
        .chapters-stats  { grid-column: 1; }
    }

    @media (max-width: 768px) {
        .chapter-panel {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        .chapter-img-wrap { aspect-ratio: 16/9; }
        .chapters-stats { flex-wrap: wrap; gap: 1.5rem; }
        .cstat-divider { display: none; }
        .cstat-item { flex: 0 0 calc(50% - 0.75rem); padding: 0; }
    }
/* ==========================================================================
    Products Section
    ========================================================================== */
    .products {
        position: relative;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 0;
        padding-bottom: 5rem;
        max-width: var(--container-width);
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 1;
    }

    /* Single Product Showcase */
    .single-product-showcase {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
        align-items: flex-start;
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 2rem 0;
        position: relative;
        z-index: 5;
    }

    .showcase-image-container {
        position: relative;
        height: 600px;
        border-radius: var(--border-radius-organic);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -10rem;
        z-index: 5;
        transform: none !important;
        animation: none !important;
    }

    .showcase-bg-shape {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
        background: radial-gradient(circle, rgba(194, 94, 66, 0.2) 0%, rgba(44, 66, 63, 0) 70%);
        border-radius: 50%;
        z-index: 0;
        filter: blur(30px);
    }

    .showcase-img-box {
        height: 100%;
        position: relative;
        z-index: 1;
        border-radius: var(--border-radius-md);
        overflow: hidden;
        transform: rotate(30deg) !important;
        animation: none !important;
    }

    .showcase-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .showcase-badge {
        position: absolute;
        bottom: 5%;
        right: 5%;
        background: var(--accent-color);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        border: 3px solid var(--brand-dark);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .badge-price {
        color: var(--white);
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.2rem;
    }

    .showcase-info {
        position: relative;
        z-index: 2;
    }

    .showcase-meta {
        margin-bottom: 1.5rem;
    }

    .meta-tag {
        display: inline-block;
        padding: 0.5rem 1.2rem;
        border: 1px solid var(--accent-color);
        color: var(--accent-color);
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .showcase-title {
        font-size: clamp(3rem, 5vw, 4.5rem);
        line-height: 1;
        margin-bottom: 2rem;
        color: var(--bg-primary);
    }

    .showcase-title .outline-text {
        -webkit-text-stroke: 1px var(--bg-primary);
        color: transparent;
        display: block;
    }

    .showcase-desc {
        font-size: 1.1rem;
        line-height: 1.8;
        color: rgba(244, 241, 234, 0.7);
        margin-bottom: 2.5rem;
    }

    .showcase-ingredients {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 3rem;
    }

    .ingredient-item {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--bg-primary);
        padding: 0.6rem 1.2rem;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 100px;
        backdrop-filter: blur(4px);
        transition: var(--transition-fast);
    }

    .ingredient-item:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: var(--accent-color);
        transform: translateY(-2px);
    }

    .ingredient-item i {
        color: var(--accent-color);
        font-size: 1rem;
    }

    @media (max-width: 1024px) {
        .single-product-showcase {
            grid-template-columns: 1fr;
            gap: 4rem;
            text-align: center;
        }
        
        .showcase-badge {
            right: 15%;
        }
        
        .showcase-ingredients {
            justify-content: center;
            text-align: left;
            max-width: 300px;
            margin: 0 auto 3rem;
        }
    }

    /* ==========================================================================
    Ritual & Philosophy Section - MAGAZINE EDITORIAL
    ========================================================================== */
    .ritual-magazine {
        position: relative;
        background-color: var(--bg-primary);
        padding: 12rem 0;
        overflow: hidden;
    }

    .ritual-bg-accent {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-display);
        font-size: 20vw;
        font-weight: 900;
        color: var(--brand-dark);
        opacity: 0.02;
        pointer-events: none;
        z-index: 0;
        letter-spacing: -0.05em;
    }

    .ritual-magazine-header {
        margin-bottom: 8rem;
        position: relative;
        z-index: 1;
    }

    .ritual-label-group {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .ritual-dash {
        width: 40px;
        height: 1px;
        background: var(--accent-color);
    }

    .ritual-tag {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        color: var(--accent-color);
        font-weight: 700;
    }

    .ritual-title-large {
        font-family: var(--font-display);
        font-size: clamp(3rem, 6vw, 5.5rem);
        line-height: 1;
        color: var(--brand-dark);
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .ritual-italic {
        color: var(--accent-color);
        font-style: italic;
        font-weight: 400;
    }

    /* Magazine Collage */
    .ritual-magazine-collage {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
        position: relative;
        z-index: 1;
    }

    .magazine-item {
        background: var(--white);
        padding: 3rem;
        box-shadow: 0 30px 60px rgba(30, 45, 26, 0.04);
        border-radius: var(--border-radius-md);
        position: relative;
        transition: transform 0.6s var(--ease-out-expo);
    }

    .magazine-item:hover {
        transform: translateY(-15px);
    }

    .magazine-num {
        font-family: var(--font-display);
        font-size: 4rem;
        font-weight: 900;
        color: var(--brand-dark);
        opacity: 0.5;
        position: absolute;
        top: 1.5rem;
        right: 2rem;
        line-height: 1;
    }

    .magazine-title {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        color: var(--brand-dark);
        font-weight: 700;
    }

    .magazine-text {
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-secondary);
        opacity: 0.8;
    }

    .magazine-icon-box {
        margin-top: 2rem;
        font-size: 2rem;
        color: var(--accent-color);
    }

    /* Collage Positioning */
    .item-1 { grid-column: 1 / 6; z-index: 2; }
    .item-2 { grid-column: 2 / 7; margin-top: -2rem; z-index: 3; background: var(--bg-secondary); }
    .item-3 { grid-column: 1 / 6; margin-top: -2rem; z-index: 2; }

    .magazine-visual {
        grid-column: 7 / 13;
        grid-row: 1 / 4;
        position: relative;
        padding-left: 2rem;
    }

    .visual-img-container {
        position: relative;
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        height: 100%;
        min-height: 600px;
        box-shadow: 0 40px 80px rgba(30, 45, 26, 0.1);
    }

    .visual-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.5s var(--ease-out-expo);
    }

    .magazine-visual:hover .visual-img {
        transform: scale(1.1);
    }

    .visual-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(30, 45, 26, 0.4), transparent);
    }

    .visual-badge {
        position: absolute;
        top: 3rem;
        right: -1rem;
        background: var(--accent-color);
        color: white;
        padding: 1rem 2rem;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        transform: rotate(90deg) translateX(50%);
        transform-origin: right center;
    }

    .visual-quote-card {
        position: absolute;
        bottom: 4rem;
        left: -4rem;
        background: var(--brand-dark);
        color: white;
        padding: 3.5rem;
        max-width: 450px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        z-index: 4;
    }

    .visual-quote {
        font-family: var(--font-display);
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 2rem;
        font-style: italic;
    }

    .visual-author {
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-weight: 700;
        color: var(--accent-color);
    }

    @media (max-width: 1024px) {
        .ritual-magazine-collage {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .magazine-item {
            margin: 0 !important;
            padding: 2.5rem;
        }

        .magazine-visual {
            padding-left: 0;
            margin-top: 4rem;
        }

        .visual-img-container {
            min-height: 400px;
        }

        .visual-quote-card {
            position: relative;
            bottom: 0;
            left: 0;
            max-width: 100%;
            margin-top: -2rem;
        }

        .visual-quote {
            font-size: 1.8rem;
        }
    }

    /* ==========================================================================
    Testimonials
    ========================================================================== */
    .testimonials-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .testi-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .testi-slider {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .testi-card {
        background: var(--white);
        padding: 3rem;
        border-radius: var(--border-radius-md);
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    }

    .quote-icon {
        font-size: 4rem;
        color: rgba(194, 94, 66, 0.1);
        position: absolute;
        top: 1.5rem;
        right: 2rem;
    }

    .testi-text {
        font-size: 1.25rem;
        font-style: italic;
        color: var(--text-primary);
        margin-bottom: 2rem;
        position: relative;
        z-index: 1;
    }

    .testi-author {
        display: flex;
        align-items: center;
        gap: 1.2rem;
    }

    .author-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
    }

    .author-info h4 {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }

    .author-info span {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }

    .stars {
        color: #F59E0B;
        font-size: 0.9rem;
        margin-top: 0.3rem;
    }

    /* ==========================================================================
    CTA Section
    ========================================================================== */
    /* ==========================================================================
    CTA Section - BOLD MINIMALIST
    ========================================================================== */
    .cta-bold {
        position: relative;
        height: 80vh;
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #000;
    }

    .cta-visual {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .cta-img-full {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.8;
        filter: blur(8px);
        transform: scale(1.1); /* Prevent white edges from blur */
    }

    .cta-vignette {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, #000 0%, transparent 40%),
                    linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%),
                    linear-gradient(to right, rgba(0,0,0,0.5) 0%, transparent 50%);
    }

    .cta-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: var(--container-width);
        padding: 0 5%;
    }

    .cta-content-box {
        max-width: 800px;
        text-align: left;
    }

    .cta-headline {
        font-family: var(--font-display);
        font-size: clamp(3.5rem, 8vw, 6rem);
        line-height: 0.95;
        color: #fff;
        margin-bottom: 2rem;
        letter-spacing: -0.04em;
        text-transform: none;
    }

    .cta-accent {
        color: var(--accent-color);
        font-style: italic;
        font-weight: 400;
    }

    .cta-subtext {
        font-family: var(--font-body);
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
        max-width: 500px;
        line-height: 1.6;
        margin-bottom: 3.5rem;
        font-weight: 300;
    }

    .cta-main-btn {
        display: inline-flex;
        align-items: center;
        gap: 1.2rem;
        padding: 1.5rem 3rem;
        background-color: var(--accent-color);
        color: #fff;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        transition: all 0.4s var(--ease-out-expo);
        box-shadow: 0 10px 30px rgba(200, 107, 40, 0.3);
    }

    .cta-main-btn:hover {
        background-color: #fff;
        color: #000;
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    }

    .cta-main-btn i {
        font-size: 1.5rem;
    }

    @media (max-width: 1024px) {
        .cta-headline {
            font-size: clamp(2.5rem, 6vw, 4rem);
        }
    }

    @media (max-width: 768px) {
        .cta-bold {
            height: auto;
            padding: 8rem 0;
        }
        
        .cta-content-box {
            text-align: center;
        }

        .cta-subtext {
            margin: 0 auto 3rem;
        }
    }

    /* ==========================================================================
    Awning Decoration
    ========================================================================== */
    .awning-section {
        position: relative;
        width: 100%;
        background-color: var(--brand-dark);
        padding: 4rem 0 2rem;
        margin-top: -2rem; /* Subtle overlap */
        z-index: 10;
        overflow: hidden;
    }

    .awning-container {
        position: relative;
        width: 100%;
        height: 100px;
        perspective: 1000px;
    }

    .awning-stripes {
        position: absolute;
        top: -120px;
        left: 0;
        width: 100%;
        height: 180px;
        background: repeating-linear-gradient(
            90deg,
            var(--accent-color) 0,
            var(--accent-color) 80px,
            var(--bg-primary) 80px,
            var(--bg-primary) 160px
        );
        transform: rotateX(45deg);
        transform-origin: bottom;
        box-shadow: 0 30px 60px rgba(0,0,0,0.4),
                    inset 0 -40px 50px rgba(0,0,0,0.3);
        border-bottom: 3px solid rgba(0,0,0,0.2);
    }

    .awning-stripes::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            110deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 60%,
            transparent 100%
        );
        background-size: 200% 100%;
        animation: awning-shimmer 8s linear infinite;
        pointer-events: none;
    }

    @keyframes awning-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .awning-scallops {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 110%; /* Extra width to cover edges */
        display: flex;
        justify-content: center;
    }

    .scallop {
        flex: 0 0 100px;
        height: 50px;
        background: var(--accent-color);
        border-radius: 0 0 50px 50px;
        margin: 0 -1px;
        box-shadow: 0 15px 25px rgba(0,0,0,0.3);
        position: relative;
        z-index: 2;
        transition: transform 0.5s var(--spring-easing);
    }

    .scallop:nth-child(even) {
        background: var(--bg-primary);
        z-index: 1;
    }

    .awning-section:hover .scallop {
        transform: translateY(5px) rotate(1deg);
    }

    .awning-section:hover .scallop:nth-child(even) {
        transform: translateY(8px) rotate(-1deg);
    }

    @media (max-width: 768px) {
        .awning-stripes {
            background: repeating-linear-gradient(
                90deg,
                var(--accent-color) 0,
                var(--accent-color) 40px,
                var(--bg-primary) 40px,
                var(--bg-primary) 80px
            );
        }
        .scallop {
            flex: 0 0 50px;
            height: 25px;
        }
    }

    /* ==========================================================================
    Footer
    ========================================================================== */

    .footer {
        background-color: #0c120e; /* Even darker for premium feel */
        color: var(--bg-primary);
        padding: 8rem 5% 3rem;
        position: relative;
        overflow: hidden;
    }

    .footer-bg-text {
        position: absolute;
        bottom: -8%;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-display);
        font-size: 24vw;
        font-weight: 800;
        color: var(--white);
        opacity: 0.02;
        white-space: nowrap;
        z-index: 0;
        pointer-events: none;
        line-height: 1;
    }

    .footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 5%;
        right: 5%;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(200, 107, 40, 0) 20%, 
            var(--accent-color) 50%, 
            rgba(200, 107, 40, 0) 80%, 
            transparent 100%
        );
        background-size: 200% 100%;
        animation: footer-line-glow 4s linear infinite, footer-line-pulse 2s ease-in-out infinite;
        filter: blur(0.5px);
        z-index: 2;
    }

    @keyframes footer-line-glow {
        0% { background-position: 150% 0; }
        100% { background-position: -150% 0; }
    }

    @keyframes footer-line-pulse {
        0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
        50% { opacity: 1; transform: scaleY(1.2); filter: drop-shadow(0 0 10px var(--accent-color)); }
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 4rem;
        max-width: var(--container-width);
        margin: 0 auto 4rem;
        position: relative;
        z-index: 1;
    }

    .footer-logo {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        color: var(--bg-primary);
    }

    .footer-desc {
        color: rgba(244, 241, 234, 0.6);
        margin-bottom: 2rem;
        max-width: 300px;
    }

    .social-links {
        display: flex;
        gap: 1rem;
    }

    .social-link {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 1px solid rgba(244, 241, 234, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transition: all 0.4s var(--ease-out-expo);
        text-decoration: none;
        color: var(--bg-primary);
    }

    .social-link:hover {
        background: var(--accent-color);
        color: var(--white);
        border-color: var(--accent-color);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 112, 67, 0.25);
    }

    .footer-heading {
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 2rem;
        color: var(--white);
        position: relative;
        display: inline-block;
        padding-bottom: 0.5rem;
        letter-spacing: 0.5px;
    }

    .footer-heading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 3px;
        background: var(--accent-color);
        border-radius: 3px;
        box-shadow: 0 0 10px rgba(255, 112, 67, 0.4);
    }

    .footer-links ul li {
        margin-bottom: 1rem;
    }

    .footer-links a, .contact-info li {
        color: rgba(244, 241, 234, 0.7);
        transition: all 0.3s var(--ease-out-expo);
        position: relative;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .footer-links a::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background-color: var(--accent-color);
        transition: width 0.3s var(--ease-out-expo);
    }

    .footer-links a:hover {
        color: var(--white);
        transform: translateX(8px);
    }

    .footer-links a:hover::before {
        width: 100%;
    }

    .contact-info li {
        display: flex;
        gap: 1.2rem;
        margin-bottom: 1.5rem;
        align-items: flex-start;
        line-height: 1.6;
    }

    .contact-info i {
        color: var(--accent-color);
        font-size: 1.4rem;
        margin-top: 2px;
        filter: drop-shadow(0 0 8px rgba(255,112,67,0.3));
    }

    .footer-bottom {
        position: relative;
        z-index: 1;
        max-width: var(--container-width);
        margin: 0 auto;
        padding-top: 2rem;
        border-top: 1px solid rgba(244, 241, 234, 0.1);
        display: flex;
        justify-content: space-between;
        color: rgba(244, 241, 234, 0.4);
        font-size: 0.9rem;
    }

    .footer-bottom-links {
        display: flex;
        gap: 2rem;
    }

    .footer-bottom-links a {
        transition: var(--transition-fast);
    }
    .footer-bottom-links a:hover {
        color: var(--bg-primary);
    }

    /* ==========================================================================
    Responsive
    ========================================================================== */
    @media (max-width: 1200px) {
        .stats-grid-restyled {
            gap: 1rem;
            padding: 1.5rem;
        }
        .stat-number-bold {
            font-size: 2rem;
        }
    }

    @media (max-width: 1024px) {
        .hero-inner {
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 4rem;
        }

        .hero-badge-float {
            position: absolute;
            bottom: 4rem;
            right: 5%;
        }

        .hero-headline {
            font-size: clamp(2.4rem, 5vw, 3.5rem);
        }
        
        .about-grid {
            grid-template-columns: 1fr;
            gap: 4rem;
        }
        
        .about-images-restyled {
            height: 450px;
            justify-content: center;
        }
        
        .main-img-box {
            width: 80%;
        }
        
        .secondary-img-box {
            width: 200px;
            height: 280px;
        }

        .about-content-restyled {
            padding-left: 0;
        }
        
        .stats-grid-restyled {
            margin-top: 2rem;
        }

        .single-product-showcase {
            display: flex;
            flex-direction: column-reverse;
            gap: 3rem;
            text-align: left;
        }
        
        .showcase-image-container {
            margin-top: 2rem;
            height: 400px;
        }
        
        .showcase-badge {
            right: 5%;
        }
        
        .ritual-grid {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
        
        .ritual-visual-footer {
            grid-template-columns: 1fr;
            gap: 3rem;
            margin-top: 6rem;
        }
        
        .footer-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 768px) {
        .nav-actions .btn {
            display: none;
        }

        .hero {
            padding-top: 100px;
        }

        h2 { font-size: 2.2rem; }
        .about-title-large { font-size: 2.5rem; }
        .showcase-title { font-size: 2.5rem; }
        .cta-title { font-size: 2rem; }

        .section-padding {
            padding: var(--space-lg) 5%;
        }

        .stats-grid-restyled {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        /* Product Section Mobile Fixes */
        .menu-decor {
            display: none; /* Sembunyikan hiasan agar tidak menutupi konten di HP */
        }
        
        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        
        .single-product-showcase {
            gap: 2rem;
        }
        
        .showcase-image-container {
            height: 300px;
        }
        
        .showcase-badge {
            width: 80px;
            height: 80px;
            bottom: 0;
            right: 0;
        }
        
        .badge-price {
            font-size: 1rem;
        }
        
        .cta-section {
            padding: 6rem 5%;
        }

        .cta-content {
            padding: 2rem 1.5rem;
        }

        .cta-form {
            flex-direction: column;
        }
        
        .footer-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }
        
        .footer-bottom {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
        }

    }


    /* ==========================================================================
    RESPONSIVE — Comprehensive Multi-Breakpoint
    ========================================================================== */

    /* ── Tablet Landscape (max 1200px) ── */
    @media (max-width: 1200px) {
        .navbar.scrolled .nav-container {
            max-width: 720px;
        }

        .hv2-product-anchor {
            width: clamp(220px, 26vw, 360px);
        }

        .footer-grid {
            grid-template-columns: 1.5fr 1fr 1fr;
            gap: 3rem;
        }

        .footer-brand {
            grid-column: 1 / -1;
        }

        .section-padding {
            padding: var(--space-lg) 5%;
        }
    }

    /* ── Tablet Portrait (max 1024px) ── */
    @media (max-width: 1024px) {
        /* Hero */
        .hv2-top {
            padding-top: 5.5rem;
        }

        .hv2-stage {
            height: 42%;
            padding: 0 5% 2.5rem;
        }

        .hv2-product-anchor {
            width: clamp(200px, 32vw, 320px);
            top: 56%;
        }

        .hv2-stats {
            gap: 0.8rem;
        }

        /* Products */
        .single-product-showcase {
            grid-template-columns: 1fr;
            gap: 3rem;
            text-align: left;
        }

        .showcase-image-container {
            height: 420px;
            margin-top: 0;
        }

        .showcase-img-box {
            transform: rotate(15deg) !important;
        }

        /* Footer */
        .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

        .footer-brand {
            grid-column: 1 / -1;
        }

        /* Navbar scrolled pill */
        .navbar.scrolled .nav-container {
            max-width: 680px;
        }
    }

    /* ── Mobile Large (max 768px) ── */
    @media (max-width: 768px) {
        /* Base spacing */
        :root {
            --space-xl: 5rem;
            --space-lg: 3rem;
        }

        /* Typography */
        h1 { font-size: clamp(2.5rem, 9vw, 4rem); }
        h2 { font-size: clamp(2rem, 7vw, 3rem); }
        h3 { font-size: 1.3rem; }

        /* Navbar */
        .navbar {
            padding: 1rem 5%;
        }

        .navbar.scrolled {
            top: 0.5rem;
            padding: 0 4%;
        }

        .navbar.scrolled .nav-container {
            max-width: calc(100% - 2rem);
            padding: 0.4rem 0.4rem 0.4rem 1.2rem;
        }

        .brand-logo img {
            height: 50px !important;
        }

        .navbar.scrolled .brand-logo img {
            height: 34px !important;
        }

        /* ══ HERO v2 — semua elemen diperbesar ══ */
        .hero-v2 {
            min-height: 100svh;
        }

        .hv2-top {
            padding-top: 5rem;
            padding-bottom: 0;
        }

        /* Wordmark besar */
        .hv2-wordmark {
            font-size: clamp(5rem, 24vw, 8rem);
        }

        /* Stage lebih tinggi supaya ada ruang untuk elemen */
        .hv2-stage {
            height: 48%;
            border-radius: 3rem 3rem 0 0;
            padding: 0 6% 2.5rem;
        }

        /* Mangkuk — jauh lebih besar */
        .hv2-product-anchor {
            width: clamp(280px, 78vw, 400px);
            top: 50%;
        }

        /* Stats pills — lebih besar */
        .hv2-stats {
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .hv2-stat-pill {
            width: clamp(70px, 17vw, 90px);
            height: clamp(70px, 17vw, 90px);
        }

        .hv2-stat-num {
            font-size: clamp(0.9rem, 3.2vw, 1.15rem);
        }

        .hv2-stat-label {
            font-size: clamp(0.52rem, 1.8vw, 0.65rem);
        }

        /* Lottie walking — lebih besar */
        #walkingLottie {
            width: 130px !important;
            height: 130px !important;
        }

        /* CTA pill — lebih besar */
        .hv2-cta-pill {
            font-size: 1.05rem;
            padding: 1rem 2.2rem 1rem 1rem;
            gap: 0.8rem;
        }

        .hv2-cta-icon {
            width: 42px;
            height: 42px;
            font-size: 1.15rem;
        }

        /* Products section */
        .section-padding {
            padding: var(--space-lg) 5%;
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 1.2rem;
            padding-bottom: 3rem;
        }

        .section-title {
            font-size: clamp(2rem, 7vw, 3rem);
        }

        .single-product-showcase {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: left;
        }

        .showcase-image-container {
            height: 280px;
            margin-top: 0;
        }

        .showcase-img-box {
            transform: rotate(8deg) !important;
        }

        .showcase-title {
            font-size: clamp(2rem, 7vw, 2.8rem);
        }

        .showcase-desc {
            font-size: 1rem;
        }

        .showcase-action .btn {
            width: 100%;
            justify-content: center;
        }

        /* Marquee section */
        .curved-marquee-section {
            overflow: hidden;
        }

        /* CTA Bold */
        .cta-bold {
            height: auto;
            min-height: unset;
            padding: 6rem 0;
        }

        .cta-headline {
            font-size: clamp(2.2rem, 8vw, 3.5rem);
        }

        .cta-content-box {
            text-align: center;
        }

        .cta-subtext {
            font-size: 1rem;
            margin: 0 auto 2.5rem;
        }

        .cta-main-btn {
            padding: 1.2rem 2rem;
            font-size: 0.9rem;
            width: 100%;
            justify-content: center;
        }

        /* Awning */
        .awning-section {
            padding: 3rem 0 1.5rem;
        }

        .awning-stripes {
            background: repeating-linear-gradient(
                90deg,
                var(--accent-color) 0,
                var(--accent-color) 40px,
                var(--bg-primary) 40px,
                var(--bg-primary) 80px
            );
        }

        .scallop {
            flex: 0 0 50px;
            height: 25px;
        }

        /* Footer */
        .footer {
            padding: 5rem 5% 2.5rem;
        }

        .footer-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }

        .footer-brand {
            grid-column: auto;
        }

        .footer-desc {
            max-width: 100%;
        }

        .footer-bottom {
            flex-direction: column;
            gap: 0.8rem;
            text-align: center;
        }

        .footer-bottom-links {
            justify-content: center;
            gap: 1rem;
        }

        /* Section divider */
        .section-divider {
            height: 60px;
        }

        /* Scroll progress */
        .scroll-progress {
            height: 3px;
        }
    }

    /* ── Mobile Medium (max 600px) ── */
    @media (max-width: 600px) {
        .hv2-wordmark {
            font-size: clamp(4.5rem, 22vw, 7rem);
        }

        .hv2-stage {
            height: 46%;
            border-radius: 2.5rem 2.5rem 0 0;
            padding: 0 5% 2.2rem;
        }

        .hv2-product-anchor {
            width: clamp(260px, 80vw, 360px);
            top: 50%;
        }

        .hv2-stats {
            gap: 0.8rem;
            margin-top: 1.4rem;
        }

        .hv2-stat-pill {
            width: clamp(64px, 16vw, 84px);
            height: clamp(64px, 16vw, 84px);
        }

        .hv2-stat-num {
            font-size: clamp(0.85rem, 3vw, 1.1rem);
        }

        .hv2-stat-label {
            font-size: clamp(0.5rem, 1.7vw, 0.62rem);
        }

        /* Offset arc */
        .hv2-stat-pill:nth-child(1) { transform: translateY(-12px); }
        .hv2-stat-pill:nth-child(2) { transform: translateY(6px); }
        .hv2-stat-pill:nth-child(3) { transform: translateY(6px); }
        .hv2-stat-pill:nth-child(4) { transform: translateY(-12px); }

        #walkingLottie {
            width: 120px !important;
            height: 120px !important;
        }

        .hv2-cta-pill {
            font-size: 1rem;
            padding: 0.95rem 2rem 0.95rem 0.95rem;
            gap: 0.75rem;
        }

        .hv2-cta-icon {
            width: 40px;
            height: 40px;
            font-size: 1.1rem;
        }

        /* Navbar scrolled — full width pill di mobile kecil */
        .navbar.scrolled .nav-container {
            max-width: calc(100% - 1.5rem);
            border-radius: 60px;
        }

        /* Products */
        .showcase-image-container {
            height: 240px;
        }

        .showcase-img-box {
            transform: rotate(5deg) !important;
        }

        /* Buttons */
        .btn {
            padding: 1rem 1.8rem;
            font-size: 0.9rem;
        }

        /* Footer */
        .footer {
            padding: 4rem 5% 2rem;
        }

        .social-links {
            gap: 0.75rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            font-size: 1.1rem;
        }
    }

    /* ── Mobile Small (max 480px) ── */
    @media (max-width: 480px) {
        .hv2-top {
            padding-top: 4.5rem;
        }

        .hv2-wordmark {
            font-size: clamp(4rem, 21vw, 6rem);
        }

        .hv2-stage {
            height: 46%;
            padding: 0 5% 2rem;
        }

        .hv2-product-anchor {
            width: clamp(240px, 78vw, 320px);
            top: 50%;
        }

        #walkingLottie {
            width: 110px !important;
            height: 110px !important;
        }

        .hv2-cta-pill {
            font-size: 0.95rem;
            padding: 0.9rem 1.9rem 0.9rem 0.9rem;
            gap: 0.7rem;
        }

        .hv2-cta-icon {
            width: 38px;
            height: 38px;
            font-size: 1.05rem;
        }

        .hv2-stats {
            gap: 0.7rem;
            margin-top: 1.2rem;
        }

        .hv2-stat-pill {
            width: clamp(60px, 15.5vw, 78px);
            height: clamp(60px, 15.5vw, 78px);
        }

        .hv2-stat-num {
            font-size: clamp(0.8rem, 2.9vw, 1rem);
        }

        .hv2-stat-label {
            font-size: clamp(0.48rem, 1.6vw, 0.6rem);
        }

        /* Preloader */
        .preloader-wordmark {
            font-size: clamp(3rem, 18vw, 5rem);
        }

        .preloader-number {
            font-size: clamp(4rem, 16vw, 7rem);
        }

        /* Products */
        .showcase-image-container {
            height: 200px;
        }

        .showcase-img-box {
            transform: none !important;
        }

        .showcase-title {
            font-size: clamp(1.8rem, 8vw, 2.5rem);
        }

        /* CTA */
        .cta-headline {
            font-size: clamp(1.8rem, 9vw, 2.8rem);
        }

        .cta-subtext {
            font-size: 0.95rem;
        }

        /* Footer */
        .contact-info li {
            font-size: 0.9rem;
            gap: 0.8rem;
        }

        .footer-heading {
            font-size: 1.1rem;
        }

        /* Section padding */
        .section-padding {
            padding: 3rem 5%;
        }
    }

    /* ── Mobile Extra Small (max 360px) ── */
    @media (max-width: 360px) {
        .hv2-wordmark {
            font-size: clamp(3.5rem, 20vw, 5rem);
        }

        .hv2-product-anchor {
            width: clamp(210px, 76vw, 270px);
            top: 50%;
        }

        .hv2-stage {
            height: 46%;
        }

        .hv2-stat-pill {
            width: clamp(54px, 14.5vw, 68px);
            height: clamp(54px, 14.5vw, 68px);
        }

        .hv2-stat-num {
            font-size: clamp(0.72rem, 2.7vw, 0.9rem);
        }

        .hv2-stat-label {
            font-size: clamp(0.44rem, 1.5vw, 0.56rem);
        }

        .navbar {
            padding: 0.8rem 4%;
        }

        .brand-logo img {
            height: 42px !important;
        }

        .btn {
            padding: 0.9rem 1.5rem;
            font-size: 0.85rem;
        }
    }

    /* ── Landscape Mobile (height < 500px) ── */
    @media (max-height: 500px) and (orientation: landscape) {
        .hero-v2 {
            height: auto;
            min-height: 100svh;
        }

        .hv2-top {
            padding-top: 4rem;
            padding-bottom: 0.5rem;
        }

        .hv2-wordmark {
            font-size: clamp(2.5rem, 10vh, 5rem);
        }

        .hv2-stage {
            height: 45%;
            border-radius: 1.5rem 1.5rem 0 0;
            padding: 0 6% 1rem;
        }

        .hv2-product-anchor {
            width: clamp(100px, 22vh, 180px);
            top: 52%;
        }

        .hv2-stats {
            gap: 0.4rem;
        }

        .hv2-stat-pill {
            width: clamp(40px, 8vh, 60px);
            height: clamp(40px, 8vh, 60px);
        }

        .preloader-wordmark {
            font-size: clamp(2.5rem, 10vh, 5rem);
        }

        .preloader-number {
            font-size: clamp(3rem, 12vh, 6rem);
        }

        .preloader-content-wrap {
            bottom: 3vh;
        }
    }

    /* ── Wide Screen (min 1600px) ── */
    @media (min-width: 1600px) {
        .navbar.scrolled .nav-container {
            max-width: 960px;
        }

        .hv2-product-anchor {
            width: clamp(380px, 26vw, 500px);
        }

        .section-padding {
            padding: var(--space-xl) 8%;
        }

        .footer {
            padding: 10rem 8% 4rem;
        }
    }

    /* ── Ultra Wide (min 2000px) ── */
    @media (min-width: 2000px) {
        html {
            font-size: 18px;
        }

        .hv2-wordmark {
            font-size: clamp(10rem, 16vw, 20rem);
        }

        .hv2-product-anchor {
            width: clamp(440px, 22vw, 560px);
        }

        .navbar.scrolled .nav-container {
            max-width: 1100px;
        }
    }