/* CSS_BASE_START */
        :root {
            /* Colors */
            --primary: #0e7490;
            --primary-dark: #164e63;
            --secondary: #0d9488;
            --secondary-dark: #0f766e;
            --text-main: #1f2937;
            --text-light: #4b5563;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-color: #e5e7eb;

            /* Brands */
            --yuraq: #059669;
            --yuraq-bg: #ecfdf5;
            --kali-blue: #1e3a5f;
            --kali-teal: #0d9488;
            --kali-bg: #f0fdfa;

            /* Fonts */
            --font-head: 'Playfair Display', serif;
            --font-body: 'Poppins', sans-serif;

            /* Utils */
            --border-radius: 12px;
            --transition: all 0.3s ease;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --max-width: 1200px;
        }

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

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

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

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--font-head);
            font-weight: 600;
            color: var(--primary-dark);
            line-height: 1.2;
        }

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

        ul {
            list-style: none;
        }

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

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

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 500;
            font-family: var(--font-body);
            cursor: pointer;
            transition: var(--transition);
            border: none;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
        }

        .btn-outline {
            border: 2px solid white;
            color: white;
            background: transparent;
        }

        .btn-outline:hover {
            background: white;
            color: var(--primary);
        }

        .btn-whatsapp {
            background: #25D366;
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-whatsapp:hover {
            background: #128C7E;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* Scroll Animations */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

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

        /* Section Spacing */
        .section-padding {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .section-title p {
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

        /* CSS_BASE_END */

        /* CSS_COMPONENTS_START */
        /* Navbar */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px 0;
            z-index: 1000;
            transition: var(--transition);
        }

        .navbar.scrolled {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: var(--shadow-sm);
        }

        .navbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: var(--font-head);
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            letter-spacing: 1px;
            transition: var(--transition);
        }

        .navbar.scrolled .logo {
            color: var(--primary-dark);
        }

        .nav-links {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav-links a {
            color: white;
            font-weight: 500;
            transition: var(--transition);
            font-size: 0.95rem;
        }

        .navbar.scrolled .nav-links a {
            color: var(--text-main);
        }

        .navbar.scrolled .nav-links a:hover {
            color: var(--primary);
        }

        .nav-btn {
            background: white;
            color: var(--primary);
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }

        .navbar.scrolled .nav-btn {
            background: var(--primary);
            color: white;
        }

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .navbar.scrolled .menu-toggle {
            color: var(--text-main);
        }

        /* Hero */
        .hero {
            height: 100vh;
            background: linear-gradient(135deg, rgba(14, 116, 144, 0.98), rgba(13, 148, 136, 0.9));
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding-top: 80px;
            position: relative;
        }

        .hero-content {
            max-width: 800px;
            padding: 0 20px;
        }

        .hero h1 {
            font-size: 4rem;
            color: white;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            animation: slideDown 1s ease-out;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 40px;
            opacity: 0.9;
            animation: fadeIn 1s ease-out 0.5s both;
        }

        .yuraq-hero h1,
        .kali-hero h1 {
            color: white;
            font-size: 3.5rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            animation: slideUp 1s ease-out 0.8s both;
        }

        /* Brands Cards */
        .brands-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .brand-card {
            background: var(--bg-white);
            border-radius: var(--border-radius);
            padding: 40px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            border-top: 4px solid transparent;
        }

        .brand-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

        .brand-card.yuraq {
            border-top-color: var(--yuraq);
        }

        .brand-card.kali {
            border-top-color: var(--kali-blue);
        }

        .brand-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 2rem;
        }

        .brand-card.yuraq .brand-icon {
            background: var(--yuraq-bg);
            color: var(--yuraq);
        }

        .brand-card.kali .brand-icon {
            background: var(--kali-bg);
            color: var(--kali-blue);
        }

        /* Products Grid */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 30px;
        }

        .product-card {
            background: var(--bg-white);
            border-radius: var(--border-radius);
            padding: 20px;
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }

        .product-img-wrapper {
            height: 250px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .product-img-wrapper img {
            max-height: 100%;
            object-fit: contain;
        }

        /* Placeholder styles */
        .img-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            background: #f9fafb;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            padding: 20px;
        }

        .img-placeholder svg {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
            color: #94a3b8;
        }

        .img-placeholder span {
            font-size: 0.85rem;
            text-align: center;
        }

        .product-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: var(--primary);
            color: white;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            z-index: 10;
        }

        .badge-new {
            background: #ef4444;
            animation: pulse 2s infinite;
        }

        .product-title {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: var(--text-main);
        }

        .product-desc {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        /* Lata Section */
        .lata-section {
            background: linear-gradient(135deg, var(--kali-blue), var(--primary-dark));
            color: white;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .lata-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .lata-content h2 {
            color: white;
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .lata-content p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 30px;
        }

        .lata-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .lata-feature {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .lata-feature svg {
            color: var(--kali-teal);
            width: 24px;
            height: 24px;
        }

        /* Benefits Grid */
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .benefit-card {
            background: white;
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-sm);
            text-align: center;
            transition: var(--transition);
        }

        .benefit-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-5px);
        }

        .benefit-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 20px;
            background: var(--bg-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
        }

        /* Coverage */
        .coverage-section {
            background: var(--bg-white);
        }

        .coverage-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .coverage-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }

        .coverage-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
        }

        .coverage-list li svg {
            color: var(--yuraq);
        }

        .coverage-box {
            background: var(--bg-light);
            padding: 30px;
            border-radius: var(--border-radius);
            border-left: 5px solid var(--secondary);
        }

        /* Final CTA */
        .cta-section {
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            padding: 80px 0;
            text-align: center;
            color: white;
        }

        .cta-section h2 {
            color: white;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        /* Footer */
        .footer {
            background: var(--text-main);
            color: white;
            padding: 80px 0 40px;
            font-size: 0.9rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer h4 {
            color: white;
            font-family: var(--font-body);
            font-size: 1.2rem;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .footer-links a {
            color: #9ca3af;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: white;
            padding-left: 5px;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #9ca3af;
        }

        /* Footer Social Media */
        .footer-social {
            text-align: center;
            margin-bottom: 30px;
        }

        .footer-social h4 {
            margin-bottom: 18px;
        }

        .footer-social-icons {
            display: flex;
            justify-content: center;
            gap: 16px;
        }

        .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: #9ca3af;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .social-icon:hover {
            transform: translateY(-4px) scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .social-icon.social-youtube:hover {
            background: #FF0000;
            color: white;
            border-color: #FF0000;
            box-shadow: 0 8px 20px rgba(255, 0, 0, 0.35);
        }

        .social-icon.social-tiktok:hover {
            background: #010101;
            color: #69C9D0;
            border-color: #69C9D0;
            box-shadow: 0 8px 20px rgba(105, 201, 208, 0.35);
        }

        .social-icon.social-facebook:hover {
            background: #1877F2;
            color: white;
            border-color: #1877F2;
            box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35);
        }

        /* Animations Keyframes */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }

        /* Mobile Responsive */
        @media (max-width: 992px) {

            .lata-container,
            .coverage-container {
                grid-template-columns: 1fr;
            }

            .hero h1 {
                font-size: 3rem;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 12px 0;
            }

            .navbar .logo img {
                height: 72px !important;
            }

            .menu-toggle {
                display: block;
            }

            .nav-links {
                position: fixed;
                top: 96px;
                left: -100%;
                width: 100%;
                background: white;
                flex-direction: column;
                padding: 40px 20px;
                box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
                transition: var(--transition);
            }

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

            .nav-links a {
                color: var(--text-main);
                font-size: 1.1rem;
            }

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

            .hero {
                padding-top: 60px;
            }

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

            .yuraq-hero,
            .kali-hero {
                height: auto;
                min-height: 100vh;
                padding: 140px 0 70px;
            }

            .yuraq-hero h1,
            .kali-hero h1 {
                font-size: 2.35rem;
            }

            .hero-buttons {
                flex-direction: column;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .coverage-list {
                grid-template-columns: 1fr;
            }
        }

        /* CSS_COMPONENTS_END */

/* ================================================================
   EKALMAD REMASTER — IMMERSIVE PRODUCT EXPERIENCE
   ================================================================ */

:root {
    --ink-deep: #071f2b;
    --ink-blue: #0b3448;
    --aqua: #23c7bc;
    --aqua-soft: #a7f3eb;
    --ice: #eefbfa;
    --surface-glass: rgba(255, 255, 255, 0.12);
    --border-glass: rgba(255, 255, 255, 0.22);
    --shadow-premium: 0 30px 80px rgba(2, 32, 44, 0.2);
}

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

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--aqua-soft);
    outline-offset: 4px;
}

.navbar {
    padding: 14px 0;
}

.navbar .logo img {
    height: 72px !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 14px 35px rgba(3, 32, 44, 0.18) !important;
}

.navbar.scrolled {
    background: rgba(248, 253, 252, 0.88);
    border-bottom: 1px solid rgba(14, 116, 144, 0.09);
    box-shadow: 0 12px 40px rgba(2, 38, 50, 0.08);
}

.nav-links a {
    position: relative;
}

.nav-links a::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    content: '';
    background: currentColor;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 240ms ease;
}

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

.hero-remastered {
    --andes-x: 0px;
    --andes-y: 0px;
    --andes-scroll: 0px;
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: auto;
    min-height: 100svh;
    padding: 142px 0 90px;
    overflow: hidden;
    background: #06364a;
}

.andes-scene,
.andes-layer,
.andes-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.andes-scene {
    z-index: -2;
    overflow: hidden;
}

.andes-layer {
    inset: -4%;
    background-image: url('../images/andes-hero-16x9.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    will-change: transform;
}

.andes-base {
    transform: translate3d(calc(var(--andes-x) * 0.2), calc(var(--andes-y) * 0.2 + var(--andes-scroll) * 0.3), 0) scale(1.08);
}

.andes-mountains {
    clip-path: polygon(0 20%, 100% 16%, 100% 76%, 0 76%);
    filter: saturate(1.03) contrast(1.03);
    transform: translate3d(calc(var(--andes-x) * 0.55), calc(var(--andes-y) * 0.45 + var(--andes-scroll) * 0.55), 0) scale(1.1);
}

.andes-water {
    clip-path: polygon(0 67%, 100% 65%, 100% 100%, 0 100%);
    filter: saturate(1.08) brightness(0.96);
    transform: translate3d(calc(var(--andes-x) * 0.85), calc(var(--andes-y) * 0.7 + var(--andes-scroll) * 0.8), 0) scale(1.12);
}

.andes-atmosphere {
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(2, 23, 34, 0.88) 0%, rgba(4, 40, 54, 0.66) 35%, rgba(3, 33, 45, 0.2) 68%, rgba(2, 26, 37, 0.48) 100%),
        linear-gradient(180deg, rgba(3, 28, 38, 0.3) 0%, transparent 42%, rgba(2, 27, 39, 0.42) 100%);
}

.hero-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, 0.97fr);
    gap: clamp(35px, 6vw, 90px);
    align-items: center;
    width: min(1280px, calc(100% - 40px));
    min-height: calc(100svh - 232px);
    margin: 0 auto;
}

.hero-copy {
    max-width: 700px;
    text-align: left;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: #e8fffc;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(9, 91, 105, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.eyebrow::before {
    width: 7px;
    height: 7px;
    content: '';
    background: var(--aqua-soft);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(167, 243, 235, 0.12);
}

.hero-remastered .hero-copy h1 {
    max-width: 760px;
    margin: 24px 0 22px;
    color: white;
    font-size: clamp(3.35rem, 5.4vw, 5.8rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
    text-shadow: 0 8px 28px rgba(0, 20, 30, 0.34);
}

.hero-remastered .hero-copy h1 span {
    display: block;
    color: var(--aqua-soft);
    font-style: italic;
}

.hero-remastered .hero-copy > p {
    max-width: 620px;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.8;
    text-shadow: 0 2px 14px rgba(0, 19, 27, 0.4);
}

.hero-remastered .hero-buttons {
    justify-content: flex-start;
    margin-bottom: 32px;
}

.hero-remastered .btn {
    min-height: 52px;
    padding: 14px 24px;
}

.hero-remastered .btn-primary {
    background: linear-gradient(135deg, #16a9a0, #0e7490);
    box-shadow: 0 16px 38px rgba(3, 40, 51, 0.28);
}

.hero-remastered .btn-outline {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-trust span {
    display: flex;
    flex-direction: column;
    min-width: 135px;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.72rem;
    line-height: 1.3;
    background: rgba(3, 43, 54, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    backdrop-filter: blur(12px);
}

.hero-trust strong {
    color: white;
    font-size: 0.95rem;
}

.hero-visual {
    position: relative;
    min-width: 0;
}

.product-stage,
.brand-hero-visual,
.story-stage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --light-x: 50%;
    --light-y: 25%;
    transform-style: preserve-3d;
    will-change: transform;
}

.product-stage {
    position: relative;
    width: min(100%, 560px);
    height: 590px;
    margin: 0 auto;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 180ms ease-out;
}

.stage-glow {
    position: absolute;
    top: 7%;
    left: 5%;
    width: 90%;
    height: 74%;
    background: radial-gradient(ellipse, rgba(126, 255, 237, 0.25), rgba(38, 181, 183, 0.08) 42%, transparent 70%);
    filter: blur(25px);
    transform: translateZ(-30px);
    animation: stageAura 5.5s ease-in-out infinite;
}

.water-trails {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(137, 255, 242, 0.45));
    transform: translateZ(22px);
}

.water-trail {
    stroke: rgba(193, 255, 248, 0.86);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 14 12 80 18;
    animation: waterFlow 6s linear infinite;
}

.trail-two {
    stroke: rgba(56, 222, 213, 0.72);
    stroke-width: 3.4;
    stroke-dasharray: 5 18 55 13;
    animation-duration: 8s;
    animation-direction: reverse;
}

.trail-three {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1.2;
    stroke-dasharray: 10 25 42 18;
    animation-duration: 10s;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(206, 255, 249, 0.44);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(92, 240, 224, 0.12);
    transform: rotateX(68deg) rotateZ(-12deg) translateZ(-10px);
}

.orbit-one {
    top: 34%;
    left: 5%;
    width: 90%;
    height: 33%;
    animation: orbitSpin 18s linear infinite;
}

.orbit-two {
    top: 22%;
    left: 19%;
    width: 62%;
    height: 48%;
    border-style: dashed;
    opacity: 0.6;
    animation: orbitSpinReverse 24s linear infinite;
}

.product-figure {
    --depth-x: 0px;
    --depth-y: 0px;
    --spin-x: 0deg;
    --spin-y: 0deg;
    --product-scale: 1;
    --product-z: 60px;
    --product-rotate: 0deg;
    position: absolute;
    z-index: 4;
    margin: 0;
    cursor: pointer;
    outline: none;
    transform-style: preserve-3d;
    transition: opacity 360ms ease, filter 360ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 34px 22px rgba(1, 18, 26, 0.44)) drop-shadow(0 0 12px rgba(176, 255, 247, 0.18));
}

.product-figure::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    content: '';
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.72) 49%, transparent 61%);
    transform: translateX(-90%);
    animation: bottleShine 5.8s ease-in-out infinite;
}

.product-figure-yuraq::after {
    -webkit-mask: url('../images/yuraq_1lt_hires.png') center / contain no-repeat;
    mask: url('../images/yuraq_1lt_hires.png') center / contain no-repeat;
}

.product-figure-kali::after {
    -webkit-mask: url('../images/kali_1lt_cutout.png') center / contain no-repeat;
    mask: url('../images/kali_1lt_cutout.png') center / contain no-repeat;
    animation-delay: -2.5s;
}

.product-figure-yuraq {
    --product-z: 70px;
    --product-rotate: -5deg;
    bottom: 76px;
    left: 5%;
    width: 45%;
    height: 77%;
    transform: translate3d(var(--depth-x), var(--depth-y), var(--product-z)) rotateX(var(--spin-x)) rotateY(var(--spin-y)) rotate(var(--product-rotate)) scale(var(--product-scale));
    animation: productFloat 5.8s ease-in-out infinite;
}

.product-figure-kali {
    --product-z: 46px;
    --product-rotate: 4deg;
    right: 0;
    bottom: 68px;
    width: 55%;
    height: 86%;
    transform: translate3d(var(--depth-x), var(--depth-y), var(--product-z)) rotateX(var(--spin-x)) rotateY(var(--spin-y)) rotate(var(--product-rotate)) scale(var(--product-scale));
    animation: productFloatAlt 6.4s ease-in-out infinite;
}

.product-stage.has-product-focus .product-figure.is-active {
    --product-scale: 1.2;
    --product-z: 180px;
    z-index: 12;
    opacity: 1;
    filter: saturate(1.08);
}

.product-stage.has-product-focus .product-figure.is-active img {
    filter: drop-shadow(0 48px 28px rgba(1, 18, 26, 0.48)) drop-shadow(0 0 22px rgba(176, 255, 247, 0.28));
}

.product-stage.has-product-focus .product-figure.is-muted {
    --product-scale: 0.84;
    --product-z: 5px;
    z-index: 2;
    opacity: 0.34;
    filter: saturate(0.65) blur(0.7px);
}

.product-figure.is-selected .product-chip {
    color: white;
    background: linear-gradient(135deg, #0d9488, #0e7490);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 5px rgba(115, 244, 229, 0.13), 0 15px 35px rgba(2, 30, 40, 0.28);
}

.product-figure:focus-visible .product-chip {
    outline: 3px solid var(--aqua-soft);
    outline-offset: 4px;
}

.product-chip {
    position: absolute;
    top: 16%;
    z-index: 3;
    padding: 8px 12px;
    color: var(--ink-deep);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #f5fffd;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow: 0 12px 25px rgba(2, 37, 48, 0.14);
}

.product-figure-yuraq .product-chip {
    left: -12%;
}

.product-figure-kali .product-chip {
    right: -3%;
}

.stage-pedestal,
.brand-pedestal,
.story-pedestal {
    position: absolute;
    right: 10%;
    bottom: 30px;
    left: 10%;
    height: 78px;
    background: linear-gradient(180deg, rgba(235, 255, 252, 0.75), rgba(18, 121, 133, 0.32));
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 50%;
    box-shadow: 0 26px 35px rgba(1, 23, 31, 0.32), inset 0 7px 20px rgba(255, 255, 255, 0.35);
    transform: rotateX(64deg) translateZ(5px);
}

.product-stage .stage-pedestal {
    right: 5%;
    bottom: 38px;
    left: 5%;
    height: 34px;
    background: radial-gradient(ellipse, rgba(201, 255, 248, 0.78) 0%, rgba(50, 203, 199, 0.3) 38%, rgba(0, 20, 29, 0.2) 70%, transparent 74%);
    border: 0;
    box-shadow: 0 20px 24px rgba(1, 21, 28, 0.38);
    filter: blur(1px);
    transform: rotateX(68deg) translateZ(5px);
    animation: pedestalPulse 4.2s ease-in-out infinite;
}

.water-splash {
    position: absolute;
    z-index: 5;
    right: 8%;
    bottom: 53px;
    left: 8%;
    height: 70px;
    pointer-events: none;
    transform: translateZ(52px);
}

.water-splash::before,
.water-splash::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 70%;
    height: 30px;
    content: '';
    border-top: 2px solid rgba(196, 255, 249, 0.68);
    border-radius: 50%;
    filter: drop-shadow(0 0 6px rgba(76, 237, 223, 0.55));
    transform: translateX(-50%) rotateX(68deg);
    animation: splashRing 3.6s ease-out infinite;
}

.water-splash::after {
    width: 42%;
    animation-delay: -1.8s;
}

.water-splash i {
    position: absolute;
    bottom: 14px;
    left: 50%;
    width: 7px;
    height: 15px;
    background: linear-gradient(180deg, rgba(225, 255, 252, 0.92), rgba(75, 219, 211, 0.3));
    border-radius: 70% 30% 60% 40%;
    opacity: 0;
    animation: splashDrop 3.2s ease-out infinite;
}

.water-splash i:nth-child(1) { margin-left: -75px; animation-delay: -0.4s; }
.water-splash i:nth-child(2) { margin-left: -25px; animation-delay: -1.7s; }
.water-splash i:nth-child(3) { margin-left: 36px; animation-delay: -2.4s; }
.water-splash i:nth-child(4) { margin-left: 78px; animation-delay: -1s; }

.water-bubble,
.brand-spark {
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    background: rgba(216, 255, 250, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.35);
    animation: bubbleRise 6s ease-in-out infinite;
}

.bubble-one { top: 72%; left: 7%; }
.bubble-two { top: 30%; right: 10%; width: 23px; height: 23px; animation-delay: -2s; }
.bubble-three { top: 14%; left: 42%; width: 10px; height: 10px; animation-delay: -4s; }

.stage-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.live-dot {
    width: 7px;
    height: 7px;
    background: #8df8e9;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(141, 248, 233, 0.1);
    animation: livePulse 2s ease-out infinite;
}

.scroll-cue {
    position: absolute;
    z-index: 4;
    bottom: 28px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.scroll-cue span {
    position: relative;
    width: 22px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 999px;
}

.scroll-cue span::after {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 7px;
    content: '';
    background: white;
    border-radius: 999px;
    transform: translateX(-50%);
    animation: scrollCue 2s ease-in-out infinite;
}

/* Scroll-driven story */
.immersive-showcase {
    position: relative;
    padding: 120px 0 80px;
    overflow: clip;
    color: white;
    background:
        radial-gradient(circle at 15% 20%, rgba(13, 148, 136, 0.22), transparent 30%),
        radial-gradient(circle at 90% 75%, rgba(14, 116, 144, 0.24), transparent 35%),
        var(--ink-deep);
}

.showcase-heading {
    max-width: 780px;
    margin-bottom: 50px;
}

.eyebrow-dark {
    color: #bafff5;
    background: rgba(255, 255, 255, 0.06);
}

.showcase-heading h2 {
    margin: 23px 0 18px;
    color: white;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.showcase-heading p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.08rem;
}

.scroll-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
    gap: clamp(45px, 8vw, 110px);
    align-items: start;
}

.story-visual {
    position: sticky;
    top: 110px;
    height: calc(100vh - 145px);
    min-height: 590px;
}

.story-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 590px;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--light-x) var(--light-y), rgba(255, 255, 255, 0.17), transparent 30%),
        linear-gradient(145deg, rgba(18, 104, 116, 0.54), rgba(3, 35, 46, 0.84));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 38px;
    box-shadow: 0 40px 100px rgba(0, 10, 18, 0.34), inset 0 1px rgba(255, 255, 255, 0.14);
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 200ms ease-out, background 500ms ease;
}

.story-stage.tone-kali {
    background: radial-gradient(circle at 52% 35%, rgba(99, 208, 219, 0.26), transparent 34%), linear-gradient(145deg, #123f56, #081d2b);
}

.story-stage.tone-family {
    background: radial-gradient(circle at 50% 30%, rgba(188, 255, 223, 0.22), transparent 35%), linear-gradient(145deg, #116f68, #073943);
}

.story-ring {
    position: absolute;
    top: 18%;
    left: 14%;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(179, 255, 246, 0.22);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(117, 234, 222, 0.035), 0 0 0 90px rgba(117, 234, 222, 0.02);
    animation: ringBreathe 6s ease-in-out infinite;
}

.story-number {
    position: absolute;
    top: 28px;
    left: 34px;
    color: rgba(255, 255, 255, 0.08);
    font-family: var(--font-head);
    font-size: clamp(7rem, 15vw, 12rem);
    font-weight: 700;
    line-height: 1;
}

.story-product {
    position: absolute;
    z-index: 3;
    top: 8%;
    right: 13%;
    width: 74%;
    height: 74%;
    object-fit: contain;
    filter: drop-shadow(0 40px 25px rgba(0, 13, 20, 0.42));
    transform: translateZ(75px);
    transition: opacity 180ms ease, transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
    animation: productFloat 6s ease-in-out infinite;
}

.story-stage.is-changing .story-product {
    opacity: 0;
    transform: translate3d(0, 18px, 75px) scale(0.94);
}

.story-pedestal {
    right: 13%;
    bottom: 55px;
    left: 13%;
}

.story-label {
    position: absolute;
    z-index: 5;
    right: 28px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    backdrop-filter: blur(12px);
}

.story-label small {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.story-label strong {
    color: white;
    font-size: 0.95rem;
}

.story-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 68vh;
    padding: 45px 8px 45px 34px;
    opacity: 0.36;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateX(0);
    transition: opacity 380ms ease, border-color 380ms ease, transform 380ms ease;
}

.story-step.is-active {
    opacity: 1;
    border-color: var(--aqua);
    transform: translateX(10px);
}

.story-step > span {
    color: var(--aqua-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.story-step h3 {
    margin: 18px 0;
    color: white;
    font-size: clamp(2.1rem, 3.6vw, 3.7rem);
    line-height: 1.08;
}

.story-step p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 1.02rem;
    line-height: 1.8;
}

.story-step a {
    align-self: flex-start;
    margin-top: 24px;
    color: white;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Brand heroes */
.brand-hero {
    position: relative;
    display: block;
    height: auto;
    min-height: 92svh;
    padding: 145px 0 80px;
    overflow: hidden;
    color: white;
}

.yuraq-hero.brand-hero {
    background: radial-gradient(circle at 82% 30%, rgba(138, 255, 221, 0.26), transparent 28%), linear-gradient(135deg, #0b5366, #05866e);
}

.kali-hero.brand-hero {
    background: radial-gradient(circle at 80% 30%, rgba(91, 213, 219, 0.24), transparent 30%), linear-gradient(135deg, #071f36, #0b6171);
}

.brand-hero::before {
    position: absolute;
    inset: 0;
    content: '';
    opacity: 0.2;
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to right, transparent 0%, black 55%, black 100%);
}

.brand-hero-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(410px, 0.75fr);
    gap: clamp(45px, 8vw, 110px);
    align-items: center;
    width: min(1180px, calc(100% - 40px));
    min-height: calc(92svh - 225px);
    margin: 0 auto;
}

.brand-hero-copy {
    text-align: left;
}

.brand-hero-copy h1 {
    max-width: 720px;
    margin: 25px 0 22px;
    color: white;
    font-size: clamp(3.4rem, 6vw, 6.3rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.brand-hero-copy > p {
    max-width: 590px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.1rem;
    line-height: 1.8;
}

.brand-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.brand-hero-actions > span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
}

.brand-hero-visual {
    position: relative;
    width: min(100%, 480px);
    height: 590px;
    margin: 0 auto;
    background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(255, 255, 255, 0.22), transparent 32%);
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 200ms ease-out;
}

.brand-hero-visual > img {
    position: absolute;
    z-index: 4;
    inset: 3% 12% 15%;
    width: 76%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 38px 28px rgba(1, 22, 31, 0.36));
    transform: translateZ(70px);
    animation: productFloat 6s ease-in-out infinite;
}

.brand-orbit {
    position: absolute;
    top: 18%;
    left: 4%;
    width: 92%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(255, 255, 255, 0.025), 0 0 0 76px rgba(255, 255, 255, 0.018);
    transform: translateZ(-20px);
    animation: ringBreathe 6s ease-in-out infinite;
}

.brand-pedestal {
    right: 8%;
    bottom: 28px;
    left: 8%;
}

.brand-float-label {
    position: absolute;
    z-index: 6;
    right: -5px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(1, 22, 31, 0.2);
    backdrop-filter: blur(12px);
}

.brand-float-label small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.62rem;
    text-transform: uppercase;
}

.brand-float-label strong {
    color: white;
}

.brand-spark.spark-one { top: 15%; left: 7%; }
.brand-spark.spark-two { top: 42%; right: 3%; width: 25px; height: 25px; animation-delay: -3s; }

/* 3D product cards */
.products-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 28px;
    perspective: 1400px;
}

.product-card {
    --card-rx: 0deg;
    --card-ry: 0deg;
    --pointer-x: 50%;
    --pointer-y: 35%;
    padding: 14px 14px 22px;
    overflow: hidden;
    text-align: left;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(14, 116, 144, 0.1);
    border-radius: 26px;
    box-shadow: 0 18px 55px rgba(7, 45, 58, 0.09);
    transform: perspective(1000px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(0);
    transform-style: preserve-3d;
    transition: opacity 600ms ease var(--reveal-delay, 0ms), transform 220ms ease-out, box-shadow 220ms ease;
    will-change: transform;
}

.product-card::before {
    position: absolute;
    z-index: 4;
    inset: 0;
    content: '';
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.9), transparent 35%);
    transition: opacity 220ms ease;
}

.product-card:hover {
    box-shadow: 0 28px 75px rgba(7, 45, 58, 0.17);
    transform: perspective(1000px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(-8px);
}

.product-card:hover::before {
    opacity: 0.32;
}

.motion-ready .product-card:not(.is-visible) {
    opacity: 0;
    transform: perspective(1000px) rotateX(7deg) translateY(42px);
}

.product-img-wrapper {
    height: 310px;
    margin-bottom: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98), rgba(227, 246, 244, 0.78) 58%, rgba(205, 234, 233, 0.7)),
        #eef8f7;
    border: 1px solid rgba(14, 116, 144, 0.08);
    border-radius: 20px;
    transform: translateZ(18px);
}

.product-img-wrapper::after {
    position: absolute;
    right: 16%;
    bottom: 9px;
    left: 16%;
    height: 24px;
    content: '';
    background: rgba(3, 44, 55, 0.16);
    border-radius: 50%;
    filter: blur(11px);
    transform: rotateX(70deg);
}

.product-img-wrapper img {
    position: relative;
    z-index: 2;
    max-width: 92%;
    max-height: 89%;
    filter: drop-shadow(0 24px 15px rgba(4, 45, 56, 0.2));
    transform: translateZ(48px) scale(0.92);
    transition: transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 420ms ease;
}

.product-card:hover .product-img-wrapper img {
    filter: drop-shadow(0 34px 20px rgba(4, 45, 56, 0.27));
    transform: translate3d(0, -8px, 65px) scale(1.01) rotate(-1deg);
}

.product-image-kali {
    mix-blend-mode: multiply;
}

.product-badge {
    top: 26px;
    right: 25px;
    z-index: 7;
    padding: 7px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 22px rgba(3, 44, 55, 0.16);
    transform: translateZ(70px);
}

.product-title,
.product-desc,
.product-card > .btn {
    position: relative;
    z-index: 5;
    margin-right: 10px;
    margin-left: 10px;
    transform: translateZ(22px);
}

.product-title {
    font-size: 1.35rem;
}

.product-desc {
    min-height: 68px;
    font-size: 0.88rem;
    line-height: 1.65;
}

.product-card > .btn {
    width: calc(100% - 20px) !important;
    min-height: 46px;
    border-width: 1px;
}

@keyframes productFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -13px; }
}

@keyframes productFloatAlt {
    0%, 100% { translate: 0 -7px; }
    50% { translate: 0 9px; }
}

@keyframes stageAura {
    0%, 100% { opacity: 0.68; scale: 0.94; }
    50% { opacity: 1; scale: 1.06; }
}

@keyframes waterFlow {
    to { stroke-dashoffset: -220; }
}

@keyframes bottleShine {
    0%, 62% { opacity: 0; transform: translateX(-95%); }
    72% { opacity: 0.5; }
    88%, 100% { opacity: 0; transform: translateX(105%); }
}

@keyframes pedestalPulse {
    0%, 100% { opacity: 0.7; scale: 0.94; }
    50% { opacity: 1; scale: 1.03; }
}

@keyframes splashRing {
    0% { opacity: 0; scale: 0.55; }
    30% { opacity: 0.85; }
    100% { opacity: 0; scale: 1.15; }
}

@keyframes splashDrop {
    0%, 55% { opacity: 0; translate: 0 12px; scale: 0.6; }
    65% { opacity: 0.9; }
    100% { opacity: 0; translate: 0 -48px; scale: 1; }
}

@keyframes bubbleRise {
    0%, 100% { translate: 0 8px; opacity: 0.35; }
    50% { translate: 4px -14px; opacity: 0.9; }
}

@keyframes orbitSpin {
    to { transform: rotateX(68deg) rotateZ(348deg) translateZ(-10px); }
}

@keyframes orbitSpinReverse {
    to { transform: rotateX(68deg) rotateZ(-372deg) translateZ(-10px); }
}

@keyframes ringBreathe {
    0%, 100% { scale: 0.96; opacity: 0.65; }
    50% { scale: 1.04; opacity: 1; }
}

@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(141, 248, 233, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(141, 248, 233, 0); }
}

@keyframes scrollCue {
    0% { opacity: 0; translate: -50% 0; }
    35% { opacity: 1; }
    100% { opacity: 0; translate: -50% 12px; }
}

@media (max-width: 1100px) {
    .hero-shell {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
        gap: 30px;
    }

    .product-stage {
        height: 520px;
    }

    .brand-hero-shell {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 0.75fr);
        gap: 35px;
    }

    .brand-hero-visual {
        height: 520px;
    }
}

@media (max-width: 900px) {
    .hero-remastered {
        padding-top: 125px;
    }

    .hero-shell,
    .brand-hero-shell,
    .scroll-story {
        grid-template-columns: 1fr;
    }

    .hero-copy,
    .brand-hero-copy {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-remastered .hero-copy > p,
    .brand-hero-copy > p {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-remastered .hero-buttons,
    .hero-trust,
    .brand-hero-actions {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 620px);
        margin: 10px auto 0;
    }

    .product-stage {
        height: 540px;
    }

    .scroll-cue {
        display: none;
    }

    .story-visual {
        position: relative;
        top: auto;
        height: 640px;
        min-height: 0;
    }

    .story-stage {
        min-height: 0;
    }

    .story-step {
        min-height: 0;
        margin-top: 24px;
        padding: 38px 28px;
        opacity: 1;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 22px;
    }

    .story-step.is-active {
        transform: none;
    }

    .brand-hero {
        padding-top: 135px;
    }

    .brand-hero-visual {
        width: min(100%, 500px);
    }
}

@media (max-width: 600px) {
    .navbar .logo img {
        height: 58px !important;
    }

    .nav-links {
        top: 82px;
    }

    .hero-remastered {
        padding: 112px 0 55px;
    }

    .hero-shell,
    .brand-hero-shell {
        width: min(100% - 28px, 1180px);
    }

    .hero-remastered .hero-copy h1,
    .brand-hero-copy h1 {
        font-size: clamp(2.55rem, 12vw, 3.7rem);
    }

    .hero-remastered .hero-buttons,
    .brand-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-remastered .btn,
    .brand-hero-actions .btn {
        width: 100%;
    }

    .hero-trust {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    .hero-trust span {
        min-width: 0;
        padding: 10px 8px;
    }

    .product-stage {
        height: 430px;
        border-radius: 0;
    }

    .product-figure-yuraq {
        left: 6%;
        width: 44%;
    }

    .product-figure-kali {
        right: 1%;
        width: 55%;
    }

    .product-stage.has-product-focus .product-figure.is-active {
        --product-scale: 1.12;
        --product-z: 130px;
    }

    .product-stage.has-product-focus .product-figure.is-muted {
        --product-scale: 0.88;
    }

    .product-chip,
    .stage-caption {
        display: none;
    }

    .stage-pedestal {
        bottom: 18px;
        height: 58px;
    }

    .product-stage .stage-pedestal {
        bottom: 22px;
        height: 26px;
    }

    .water-splash {
        bottom: 34px;
    }

    .immersive-showcase {
        padding: 85px 0 60px;
    }

    .showcase-heading h2 {
        font-size: 2.65rem;
    }

    .story-visual {
        height: 500px;
    }

    .story-stage {
        border-radius: 26px;
    }

    .story-product {
        top: 10%;
        right: 8%;
        width: 84%;
        height: 72%;
    }

    .story-number {
        left: 18px;
        font-size: 7rem;
    }

    .story-label {
        right: 16px;
        bottom: 16px;
    }

    .story-step {
        padding: 30px 22px;
    }

    .story-step h3 {
        font-size: 2rem;
    }

    .brand-hero {
        min-height: 100svh;
        padding: 118px 0 55px;
    }

    .brand-hero-visual {
        height: 450px;
    }

    .brand-float-label {
        right: 5px;
        bottom: 65px;
    }

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

    .product-img-wrapper {
        height: 340px;
    }
}

/* Five product positions with clear click targets and no microcopy */
.hero-copy > .eyebrow,
.product-carousel .product-chip,
.product-carousel + .stage-caption {
    display: none !important;
}

.product-carousel .product-orbit-item {
    top: 49%;
    left: 50%;
    right: auto;
    bottom: auto;
    height: 76%;
    cursor: pointer;
    pointer-events: auto;
    transition: left 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        top 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        width 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 700ms ease,
        filter 700ms ease,
        transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-carousel .product-orbit-item.is-front {
    left: 50%;
    top: 48%;
    z-index: 12;
    width: 39%;
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, -48%, 130px) scale(1.08);
}

.product-carousel .product-orbit-item.is-right {
    left: 76%;
    top: 53%;
    z-index: 8;
    width: 27%;
    opacity: 0.94;
    filter: saturate(0.92);
    transform: translate3d(-50%, -42%, 15px) scale(0.76) rotateY(-18deg);
}

.product-carousel .product-orbit-item.is-far-right {
    left: 96%;
    top: 55%;
    z-index: 5;
    width: 24%;
    opacity: 0.78;
    filter: saturate(0.78);
    transform: translate3d(-100%, -36%, -90px) scale(0.58) rotateY(-28deg);
}

.product-carousel .product-orbit-item.is-far-left {
    left: 4%;
    top: 55%;
    z-index: 5;
    width: 24%;
    opacity: 0.78;
    filter: saturate(0.78);
    transform: translate3d(0, -36%, -90px) scale(0.58) rotateY(28deg);
}

.product-carousel .product-orbit-item.is-left {
    left: 24%;
    top: 53%;
    z-index: 8;
    width: 27%;
    opacity: 0.94;
    filter: saturate(0.92);
    transform: translate3d(-50%, -42%, 15px) scale(0.76) rotateY(18deg);
}

.product-carousel.has-product-focus .product-orbit-item.is-front {
    top: 45%;
    width: 47%;
    opacity: 1;
    filter: saturate(1.08) brightness(1.03);
    transform: translate3d(-50%, -50%, 220px) scale(1.2);
}

.product-carousel.has-product-focus .product-orbit-item.is-left,
.product-carousel.has-product-focus .product-orbit-item.is-right,
.product-carousel.has-product-focus .product-orbit-item.is-far-left,
.product-carousel.has-product-focus .product-orbit-item.is-far-right {
    opacity: 0.72;
    filter: saturate(0.72);
}

.product-carousel .product-orbit-item:focus-visible {
    outline: 3px solid rgba(167, 243, 235, 0.9);
    outline-offset: 4px;
}

@media (max-width: 600px) {
    .product-carousel .product-orbit-item {
        top: 48%;
        height: 72%;
    }

    .product-carousel .product-orbit-item.is-front {
        width: 45%;
        transform: translate3d(-50%, -45%, 105px) scale(1.05);
    }

    .product-carousel .product-orbit-item.is-right {
        left: 77%;
        width: 29%;
        transform: translate3d(-50%, -40%, 10px) scale(0.72) rotateY(-16deg);
    }

    .product-carousel .product-orbit-item.is-far-right {
        left: 98%;
        width: 24%;
        transform: translate3d(-100%, -34%, -80px) scale(0.54) rotateY(-24deg);
    }

    .product-carousel .product-orbit-item.is-far-left {
        left: 2%;
        width: 24%;
        transform: translate3d(0, -34%, -80px) scale(0.54) rotateY(24deg);
    }

    .product-carousel .product-orbit-item.is-left {
        left: 23%;
        width: 29%;
        transform: translate3d(-50%, -40%, 10px) scale(0.72) rotateY(16deg);
    }

    .product-carousel.has-product-focus .product-orbit-item.is-front {
        width: 53%;
        transform: translate3d(-50%, -47%, 155px) scale(1.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .product-stage,
    .brand-hero-visual,
    .story-stage,
    .product-card {
        transform: none !important;
    }
}

/* Three product orbital selector */
.product-carousel {
    perspective: 1100px;
}

.product-carousel .product-orbit-item {
    top: 49%;
    right: auto;
    bottom: auto;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76%;
    transform-style: preserve-3d;
    transform-origin: center 115%;
}

.product-carousel .product-orbit-item img {
    max-width: 100%;
    max-height: 100%;
}

.product-carousel .product-orbit-item::after {
    display: none;
}

.product-carousel .product-orbit-item.is-front {
    z-index: 10;
    width: 39%;
    opacity: 1;
    filter: saturate(1.08);
    transform: translate3d(-50%, -48%, 125px) scale(1.12) rotateY(0deg);
}

.product-carousel .product-orbit-item.is-left {
    z-index: 4;
    width: 30%;
    opacity: 0.84;
    filter: saturate(0.82);
    transform: translate3d(-148%, -41%, -45px) scale(0.78) rotateY(24deg);
}

.product-carousel .product-orbit-item.is-right {
    z-index: 4;
    width: 30%;
    opacity: 0.84;
    filter: saturate(0.82);
    transform: translate3d(48%, -41%, -45px) scale(0.78) rotateY(-24deg);
}

.product-carousel .product-orbit-item.is-front img {
    filter: drop-shadow(0 32px 24px rgba(1, 18, 26, 0.44)) drop-shadow(0 0 18px rgba(176, 255, 247, 0.2));
}

.product-carousel .product-orbit-item.is-left img,
.product-carousel .product-orbit-item.is-right img {
    filter: drop-shadow(0 24px 18px rgba(1, 18, 26, 0.34));
}

.product-carousel.has-product-focus .product-orbit-item.is-front {
    width: 46%;
    opacity: 1;
    filter: saturate(1.15) brightness(1.04);
    transform: translate3d(-50%, -55%, 205px) scale(1.24) rotateY(0deg);
}

.product-carousel.has-product-focus .product-orbit-item.is-left,
.product-carousel.has-product-focus .product-orbit-item.is-right {
    opacity: 0.56;
    filter: saturate(0.65) blur(0.3px);
}

.product-carousel .product-orbit-item .product-chip {
    top: 17%;
    right: auto;
    left: 50%;
    z-index: 8;
    transform: translateX(-50%) translateZ(30px);
}

.product-carousel .product-orbit-item.is-front .product-chip {
    color: #073746;
    box-shadow: 0 12px 28px rgba(1, 22, 31, 0.22);
}

.product-carousel .product-orbit-item[aria-pressed="true"] .product-chip {
    color: white;
    background: linear-gradient(135deg, #0d9488, #0e7490);
}

.product-carousel .product-orbit-item:focus-visible .product-chip {
    outline: 3px solid var(--aqua-soft);
    outline-offset: 4px;
}

.product-carousel .stage-pedestal {
    z-index: 2;
}

.product-carousel .water-splash {
    z-index: 6;
}

.product-carousel.is-paused .orbit-one,
.product-carousel.is-paused .orbit-two {
    animation-play-state: paused;
}

@media (max-width: 600px) {
    .product-carousel .product-orbit-item {
        top: 47%;
        height: 72%;
    }

    .product-carousel .product-orbit-item.is-front {
        width: 46%;
        transform: translate3d(-50%, -45%, 90px) scale(1.08);
    }

    .product-carousel .product-orbit-item.is-left {
        width: 34%;
        transform: translate3d(-142%, -38%, -35px) scale(0.76) rotateY(22deg);
    }

    .product-carousel .product-orbit-item.is-right {
        width: 34%;
        transform: translate3d(42%, -38%, -35px) scale(0.76) rotateY(-22deg);
    }

    .product-carousel.has-product-focus .product-orbit-item.is-front {
        width: 54%;
        transform: translate3d(-50%, -51%, 145px) scale(1.18);
    }
}

/* Product carousel: balanced proportions, depth and safe navbar clearance */
.hero-remastered .hero-visual {
    z-index: 4;
    padding-top: clamp(24px, 4vh, 48px);
}

.hero-remastered .product-stage {
    width: min(100%, 590px);
    height: clamp(500px, 66vh, 570px);
    max-height: calc(100svh - 180px);
    perspective: 1350px;
    perspective-origin: 50% 42%;
}

.product-carousel .product-orbit-item {
    --product-width: 180px;
    --product-height: 420px;
    top: 56% !important;
    width: min(var(--product-width), 34vw) !important;
    max-width: var(--product-width);
    height: min(var(--product-height), 62vh) !important;
    max-height: var(--product-height);
    isolation: isolate;
    transform-origin: 50% 88%;
    transition: left 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        top 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 620ms ease,
        filter 620ms ease,
        transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-carousel .product-orbit-item[data-product="jug"] {
    --product-width: 218px;
    --product-height: 438px;
}

.product-carousel .product-orbit-item[data-product="can"] {
    --product-width: 152px;
    --product-height: 420px;
}

.product-carousel .product-orbit-item[data-product="box"] {
    --product-width: 246px;
    --product-height: 396px;
}

.product-carousel .product-orbit-item[data-product="seven"] {
    --product-width: 198px;
    --product-height: 430px;
}

.product-carousel .product-orbit-item[data-product="three"] {
    --product-width: 158px;
    --product-height: 420px;
}

.product-carousel .product-orbit-item::before {
    position: absolute;
    z-index: -1;
    right: 7%;
    bottom: 2%;
    left: 7%;
    height: 12%;
    content: '';
    pointer-events: none;
    opacity: 0.72;
    background: radial-gradient(ellipse, rgba(0, 12, 20, 0.58) 0%, rgba(0, 21, 30, 0.26) 48%, transparent 74%);
    border-radius: 50%;
    filter: blur(8px);
    transform: translateZ(-35px) rotateX(72deg) scaleX(1.08);
}

.product-carousel .product-orbit-item::after {
    position: absolute;
    z-index: -2;
    inset: 8% -22% 4%;
    display: block;
    content: '';
    pointer-events: none;
    opacity: 0.42;
    background: radial-gradient(ellipse at 48% 46%, rgba(167, 243, 235, 0.2), rgba(35, 199, 188, 0.07) 42%, transparent 70%);
    border-radius: 50%;
    filter: blur(15px);
    transform: translateZ(-55px);
}

.product-carousel .product-orbit-item img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(-12px 18px 15px rgba(1, 15, 24, 0.28))
        drop-shadow(16px 34px 24px rgba(0, 18, 28, 0.42))
        drop-shadow(0 0 12px rgba(198, 255, 249, 0.2));
    transform: translateZ(34px);
    transition: filter 620ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-carousel .product-orbit-item.is-front {
    left: 50% !important;
    z-index: 12;
    opacity: 1;
    filter: saturate(1.08) contrast(1.02);
    transform: translate3d(-50%, -50%, 118px) scale(1.02) rotateY(0deg) !important;
}

.product-carousel .product-orbit-item.is-right {
    top: 59% !important;
    left: 77% !important;
    z-index: 8;
    opacity: 0.86;
    filter: saturate(0.9) brightness(0.94);
    transform: translate3d(-50%, -46%, 5px) scale(0.7) rotateY(-29deg) !important;
}

.product-carousel .product-orbit-item.is-left {
    top: 59% !important;
    left: 23% !important;
    z-index: 8;
    opacity: 0.86;
    filter: saturate(0.9) brightness(0.94);
    transform: translate3d(-50%, -46%, 5px) scale(0.7) rotateY(29deg) !important;
}

.product-carousel .product-orbit-item.is-far-right {
    top: 62% !important;
    left: 96% !important;
    z-index: 5;
    opacity: 0.62;
    filter: saturate(0.72) brightness(0.86);
    transform: translate3d(-100%, -42%, -105px) scale(0.48) rotateY(-38deg) !important;
}

.product-carousel .product-orbit-item.is-far-left {
    top: 62% !important;
    left: 4% !important;
    z-index: 5;
    opacity: 0.62;
    filter: saturate(0.72) brightness(0.86);
    transform: translate3d(0, -42%, -105px) scale(0.48) rotateY(38deg) !important;
}

.product-carousel.has-product-focus .product-orbit-item.is-front {
    top: 56% !important;
    width: min(var(--product-width), 34vw) !important;
    opacity: 1;
    filter: saturate(1.12) brightness(1.025) contrast(1.03);
    transform: translate3d(-50%, -50%, 170px) scale(1.085) rotateY(0deg) !important;
}

.product-carousel.has-product-focus .product-orbit-item.is-front img {
    filter: drop-shadow(-15px 20px 17px rgba(1, 15, 24, 0.3))
        drop-shadow(20px 40px 28px rgba(0, 16, 25, 0.5))
        drop-shadow(0 0 20px rgba(177, 255, 247, 0.3));
    transform: translateZ(48px) rotateY(-1.5deg);
}

.product-carousel.has-product-focus .product-orbit-item.is-left,
.product-carousel.has-product-focus .product-orbit-item.is-right,
.product-carousel.has-product-focus .product-orbit-item.is-far-left,
.product-carousel.has-product-focus .product-orbit-item.is-far-right {
    opacity: 0.54;
    filter: saturate(0.68) brightness(0.82);
}

@media (max-width: 900px) {
    .hero-remastered .hero-visual {
        padding-top: 4px;
    }

    .hero-remastered .product-stage {
        height: 520px;
        max-height: none;
    }
}

@media (max-width: 600px) {
    .hero-remastered .product-stage {
        height: 430px;
    }

    .product-carousel .product-orbit-item {
        width: min(var(--product-width), 38vw) !important;
        height: min(var(--product-height), 360px) !important;
    }

    .product-carousel .product-orbit-item.is-front {
        top: 55% !important;
        transform: translate3d(-50%, -50%, 92px) scale(0.96) !important;
    }

    .product-carousel .product-orbit-item.is-left {
        left: 20% !important;
        transform: translate3d(-50%, -44%, -5px) scale(0.6) rotateY(28deg) !important;
    }

    .product-carousel .product-orbit-item.is-right {
        left: 80% !important;
        transform: translate3d(-50%, -44%, -5px) scale(0.6) rotateY(-28deg) !important;
    }

    .product-carousel .product-orbit-item.is-far-left {
        left: 1% !important;
        transform: translate3d(0, -38%, -100px) scale(0.39) rotateY(36deg) !important;
    }

    .product-carousel .product-orbit-item.is-far-right {
        left: 99% !important;
        transform: translate3d(-100%, -38%, -100px) scale(0.39) rotateY(-36deg) !important;
    }

    .product-carousel.has-product-focus .product-orbit-item.is-front {
        top: 55% !important;
        width: min(var(--product-width), 38vw) !important;
        transform: translate3d(-50%, -50%, 130px) scale(1.02) !important;
    }
}

/* Automatic product showcase: enter right, present, fade left */
.hero-remastered .product-carousel {
    overflow: visible;
    perspective: 1500px;
    perspective-origin: 50% 48%;
}

.hero-remastered .product-carousel::before {
    position: absolute;
    z-index: 1;
    top: 13%;
    left: 50%;
    width: 66%;
    height: 70%;
    content: '';
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(181, 255, 248, 0.2), rgba(25, 164, 164, 0.07) 44%, transparent 72%);
    border-radius: 50%;
    filter: blur(22px);
    transform: translateX(-50%) translateZ(-80px);
}

.product-carousel .product-orbit-item {
    top: 56% !important;
    left: 50% !important;
    pointer-events: none;
    cursor: default;
    opacity: 0;
    visibility: visible;
    transition: opacity 920ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 920ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1080ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}

.product-carousel .product-orbit-item.is-front {
    z-index: 14;
    opacity: 1;
    visibility: visible;
    filter: saturate(1.08) contrast(1.035) brightness(1.025);
    transform: translate3d(-50%, -50%, 145px) scale(1.045) rotateY(0deg) !important;
}

.product-carousel .product-orbit-item.is-right {
    z-index: 10;
    opacity: 0;
    visibility: visible;
    filter: saturate(0.75) brightness(0.82) blur(3px);
    transform: translate3d(92%, -48%, -125px) scale(0.76) rotateY(-22deg) !important;
}

.product-carousel .product-orbit-item.is-left {
    z-index: 9;
    opacity: 0;
    visibility: visible;
    filter: saturate(0.68) brightness(0.78) blur(4px);
    transform: translate3d(-192%, -48%, -105px) scale(0.74) rotateY(20deg) !important;
}

.product-carousel .product-orbit-item.is-far-right {
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    transform: translate3d(160%, -46%, -220px) scale(0.56) rotateY(-30deg) !important;
}

.product-carousel .product-orbit-item.is-far-left {
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    filter: blur(7px);
    transform: translate3d(-260%, -46%, -220px) scale(0.56) rotateY(30deg) !important;
}

.product-carousel .product-orbit-item.is-front::before {
    opacity: 0.88;
    transform: translateZ(-42px) rotateX(72deg) scaleX(1.16);
}

.product-carousel .product-orbit-item.is-front::after {
    opacity: 0.58;
}

.product-carousel .product-orbit-item.is-front img {
    image-rendering: auto;
    filter: drop-shadow(-14px 20px 18px rgba(0, 16, 24, 0.3))
        drop-shadow(19px 40px 28px rgba(0, 16, 25, 0.5))
        drop-shadow(0 0 18px rgba(192, 255, 249, 0.25));
    animation: productShowcaseDepth 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes productShowcaseDepth {
    0% {
        transform: translate3d(12px, 4px, 26px) rotateY(-8deg) rotateX(1.5deg) scale(0.975);
    }
    45% {
        transform: translate3d(0, 0, 52px) rotateY(1.5deg) rotateX(0deg) scale(1.012);
    }
    100% {
        transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1);
    }
}

@media (max-width: 600px) {
    .product-carousel .product-orbit-item.is-front {
        top: 55% !important;
        transform: translate3d(-50%, -50%, 105px) scale(0.98) rotateY(-2deg) !important;
    }

    .product-carousel .product-orbit-item.is-right {
        transform: translate3d(88%, -47%, -110px) scale(0.68) rotateY(-21deg) !important;
    }

    .product-carousel .product-orbit-item.is-left {
        transform: translate3d(-188%, -47%, -100px) scale(0.66) rotateY(19deg) !important;
    }
}

/* Yuraq hero video presentation */
.yuraq-page .brand-hero-shell {
    grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
    gap: clamp(42px, 5vw, 82px);
}

.yuraq-page .brand-hero-copy {
    max-width: 630px;
}

.yuraq-page .brand-hero-copy > p {
    max-width: 600px;
}

.yuraq-page .brand-video-showcase {
    width: min(100%, 700px);
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    align-self: center;
}

.brand-video-frame {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #075c67, #0d9488);
    border: 1px solid rgba(218, 255, 251, 0.38);
    border-radius: 30px;
    box-shadow: 0 34px 80px rgba(0, 28, 39, 0.34),
        0 10px 28px rgba(0, 45, 54, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transform: none;
}

.brand-video-frame::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.16), transparent 22%, transparent 76%, rgba(75, 238, 220, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-product-video {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.19);
    transform-origin: center;
}

.brand-video-glow {
    position: absolute;
    z-index: 3;
    right: 8%;
    bottom: -20%;
    left: 8%;
    height: 36%;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(170, 255, 246, 0.3), transparent 68%);
    filter: blur(22px);
}

@media (max-width: 1100px) {
    .yuraq-page .brand-hero-shell {
        grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr);
        gap: 36px;
    }
}

@media (max-width: 900px) {
    .yuraq-page .brand-hero-shell {
        grid-template-columns: 1fr;
    }

    .yuraq-page .brand-video-showcase {
        width: min(100%, 720px);
        margin: 24px auto 0;
    }
}

@media (max-width: 600px) {
    .brand-video-frame {
        border-radius: 22px;
        transform: none;
    }
}

/* Blend the Yuraq video into the banner instead of showing a separate card */
.yuraq-hero.brand-hero {
    background:
        radial-gradient(circle at 78% 34%, rgba(36, 186, 164, 0.32), transparent 34%),
        linear-gradient(105deg, #064f59 0%, #075c61 39%, #087068 68%, #0a8878 100%);
}

.yuraq-page .brand-hero-shell {
    grid-template-columns: minmax(540px, 0.9fr) minmax(600px, 1.1fr);
    gap: 0;
    width: min(1320px, calc(100% - 40px));
}

.yuraq-page .brand-video-showcase {
    width: min(115%, 810px);
    margin-left: -20px;
}

.yuraq-page .brand-video-frame {
    height: clamp(460px, 60vh, 540px);
    aspect-ratio: auto;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
    isolation: auto;
}

.yuraq-page .brand-video-frame::before {
    display: none;
}

.yuraq-page .brand-video-glow {
    display: none;
}

.yuraq-page .brand-product-video {
    object-fit: cover;
    object-position: center;
    transform: scale(1.26);
    mix-blend-mode: lighten;
}

@media (max-width: 1100px) {
    .yuraq-page .brand-hero-shell {
        grid-template-columns: minmax(470px, 0.92fr) minmax(480px, 1.08fr);
        gap: 0;
    }

    .yuraq-page .brand-video-showcase {
        width: 108%;
        margin-left: -18px;
    }
}

@media (max-width: 900px) {
    .yuraq-page .brand-hero-shell {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .yuraq-page .brand-video-showcase {
        width: min(110%, 760px);
        margin: 4px auto 0;
    }

    .yuraq-page .brand-video-frame {
        height: min(62vw, 460px);
    }
}

@media (max-width: 600px) {
    .yuraq-page .brand-video-showcase {
        width: calc(100% + 24px);
        margin-left: -12px;
    }

    .yuraq-page .brand-video-frame {
        height: 310px;
        border-radius: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Yuraq video becomes part of the hero background */
.yuraq-hero.brand-hero {
    isolation: isolate;
    background: linear-gradient(100deg, #064f59 0%, #07565d 52%, #087269 78%, #098174 100%);
}

.yuraq-video-backdrop {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(72vw, 1220px);
    overflow: hidden;
    pointer-events: none;
}

.yuraq-backdrop-video {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 112%;
    height: 112%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) scale(1.08);
}

.yuraq-hero.brand-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
    pointer-events: none;
    background:
        linear-gradient(90deg,
            #064f59 0%,
            #064f59 32%,
            rgba(6, 79, 89, 0.97) 39%,
            rgba(6, 79, 89, 0.78) 48%,
            rgba(6, 79, 89, 0.28) 61%,
            transparent 76%),
        linear-gradient(180deg, rgba(3, 52, 61, 0.18), transparent 22%, transparent 82%, rgba(4, 72, 73, 0.26));
}

.yuraq-page .brand-hero-shell {
    z-index: 2;
    display: block;
    width: min(1320px, calc(100% - 40px));
}

.yuraq-page .brand-hero-copy {
    width: min(48%, 640px);
    max-width: 640px;
}

@media (max-width: 900px) {
    .yuraq-video-backdrop {
        top: 34%;
        width: 100%;
        opacity: 0.72;
    }

    .yuraq-hero.brand-hero::after {
        background:
            linear-gradient(180deg, #064f59 0%, rgba(6, 79, 89, 0.98) 34%, rgba(6, 79, 89, 0.64) 58%, rgba(6, 79, 89, 0.26) 100%),
            linear-gradient(90deg, rgba(6, 79, 89, 0.34), transparent 50%, rgba(8, 114, 105, 0.24));
    }

    .yuraq-page .brand-hero-copy {
        width: min(100%, 700px);
    }
}

@media (max-width: 600px) {
    .yuraq-video-backdrop {
        top: 42%;
        opacity: 0.62;
    }

    .yuraq-backdrop-video {
        width: 150%;
        height: 105%;
    }
}


/* Kali video becomes part of the hero background */
.kali-hero.brand-hero {
    isolation: isolate;
    background: linear-gradient(100deg, #071f36 0%, #093349 52%, #0b5266 78%, #0b6171 100%);
}

.kali-video-backdrop {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(72vw, 1220px);
    overflow: hidden;
    pointer-events: none;
}

.kali-backdrop-video {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 112%;
    height: 112%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) scale(1.08);
}

.kali-hero.brand-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
    pointer-events: none;
    background:
        linear-gradient(90deg,
            #071f36 0%,
            #071f36 32%,
            rgba(7, 31, 54, 0.97) 39%,
            rgba(7, 31, 54, 0.78) 48%,
            rgba(7, 31, 54, 0.28) 61%,
            transparent 76%),
        linear-gradient(180deg, rgba(3, 20, 38, 0.18), transparent 22%, transparent 82%, rgba(4, 40, 60, 0.26));
}

.kali-page .brand-hero-shell {
    z-index: 2;
    display: block;
    width: min(1320px, calc(100% - 40px));
}

.kali-page .brand-hero-copy {
    width: min(48%, 640px);
    max-width: 640px;
}

@media (max-width: 900px) {
    .kali-video-backdrop {
        top: 34%;
        width: 100%;
        opacity: 0.72;
    }

    .kali-hero.brand-hero::after {
        background:
            linear-gradient(180deg, #071f36 0%, rgba(7, 31, 54, 0.98) 34%, rgba(7, 31, 54, 0.64) 58%, rgba(7, 31, 54, 0.26) 100%),
            linear-gradient(90deg, rgba(7, 31, 54, 0.34), transparent 50%, rgba(11, 97, 113, 0.24));
    }

    .kali-page .brand-hero-copy {
        width: min(100%, 700px);
    }
}

@media (max-width: 600px) {
    .kali-video-backdrop {
        top: 42%;
        opacity: 0.62;
    }

    .kali-backdrop-video {
        width: 150%;
        height: 105%;
    }
}