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

        :root {
            --cream: #FAF5E9;
            --cream2: #F3EAD2;
            --ink: #161209;
            --ink2: #2A2413;
            --gold: #B98A1C;
            --gold2: #E4C566;
            --goldD: #8a6410;
            --olive: #6d7242;
            --card: #fff;
            --line: #e7d9b4;
            --mut: #7a7261;
            --wa: #1faa55;
            --waD: #0d7a3c;
            --dark: #0f0d08;
            --r: 26px;
            --sh: 0 20px 60px rgba(22, 18, 9, .10)
        }

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--cream);
            color: var(--ink);
            font-family: 'Cairo', sans-serif;
            line-height: 1.75;
            overflow-x: hidden
        }

        html[dir=ltr] body {
            font-family: 'Fraunces', 'Cairo', Georgia, serif
        }

        .serif {
            font-family: 'Fraunces', 'Cairo', serif
        }

        .wrap {
            max-width: 1140px;
            margin: 0 auto;
            padding: 0 20px
        }

        /* announcement */
        .marquee {
            background: var(--ink);
            color: var(--gold2);
            font-size: .82rem;
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            padding: 9px 0
        }

        .marquee span {
            display: inline-block;
            padding-inline: 26px;
            animation: slide 22s linear infinite
        }

        @keyframes slide {
            to {
                transform: translateX(-50%)
            }
        }

        /* nav */
        nav {
            position: sticky;
            top: 0;
            z-index: 80;
            background: rgba(250, 245, 233, .88);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line)
        }

        .nav-in {
            max-width: 1140px;
            margin: 0 auto;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 14px
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--ink)
        }

        .logo img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--gold);
            box-shadow: 0 4px 14px rgba(185, 138, 28, .4)
        }

        .logo b {
            font-size: 1.3rem;
            letter-spacing: 4px
        }

        .links {
            display: flex;
            gap: 18px;
            margin-inline-start: 18px;
            font-size: .86rem;
            font-weight: 700;
            flex: 1
        }

        .links a {
            color: var(--ink2);
            text-decoration: none;
            opacity: .8
        }

        .links a:hover {
            opacity: 1;
            color: var(--goldD)
        }

        @media(max-width:860px) {
            .links {
                display: none
            }
        }

        .langs {
            display: flex;
            gap: 6px
        }

        .langs button {
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 20px;
            padding: 5px 13px;
            font-size: .76rem;
            font-weight: 800;
            cursor: pointer;
            font-family: inherit
        }

        .langs button.on {
            background: var(--ink);
            color: var(--gold2);
            border-color: var(--ink)
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            font-weight: 900;
            border-radius: 16px;
            padding: 13px 24px;
            transition: .22s;
            cursor: pointer;
            border: 0;
            font-family: inherit;
            font-size: 1rem
        }

        .btn-wa {
            background: linear-gradient(135deg, #2bd06a, #0d7a3c);
            color: #fff;
            box-shadow: 0 12px 30px rgba(31, 170, 85, .4)
        }

        .btn-wa:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(31, 170, 85, .5)
        }

        .btn-dark {
            background: var(--ink);
            color: var(--gold2)
        }

        .btn-ghost {
            background: transparent;
            border: 1.5px solid var(--line);
            color: var(--ink)
        }

        .btn-sm {
            padding: 10px 18px;
            font-size: .88rem;
            border-radius: 12px
        }

        /* hero — organic split like Dribbble ref */
        .hero {
            position: relative;
            overflow: hidden;
            background: radial-gradient(800px 400px at 85% 10%, #f3e3ac 0%, transparent 60%), radial-gradient(700px 500px at 5% 90%, #e6e4c6 0%, transparent 55%), var(--cream)
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 36px;
            align-items: center;
            padding: 46px 0 30px
        }

        @media(max-width:900px) {
            .hero-grid {
                grid-template-columns: 1fr
            }
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 30px;
            padding: 7px 16px;
            font-size: .8rem;
            font-weight: 800;
            color: var(--goldD);
            box-shadow: var(--sh)
        }

        .pill .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #2bd06a;
            box-shadow: 0 0 0 4px rgba(43, 208, 106, .2)
        }

        h1 {
            font-size: clamp(2.1rem, 5vw, 3.6rem);
            line-height: 1.2;
            font-weight: 900;
            margin: 16px 0 10px
        }

        h1 .gold {
            color: transparent;
            background: linear-gradient(120deg, var(--goldD), var(--gold) 45%, #e9cd7c);
            -webkit-background-clip: text;
            background-clip: text
        }

        html[dir=rtl] h1 {
            font-family: 'Cairo'
        }

        .sub {
            color: #4d4632;
            font-size: 1.05rem;
            max-width: 520px
        }

        .cta-row {
            display: flex;
            gap: 12px;
            margin: 22px 0 14px;
            flex-wrap: wrap
        }

        .trust {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 6px
        }

        .avatars {
            display: flex
        }

        .avatars span {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--cream);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            color: #fff;
            font-size: .85rem;
            margin-inline-end: -10px
        }

        .stars {
            color: var(--gold);
            letter-spacing: 2px;
            font-size: .9rem
        }

        .trust small {
            color: var(--mut);
            font-size: .8rem
        }

        /* product arch */
        .visual {
            position: relative;
            display: flex;
            justify-content: center
        }

        .arch {
            position: relative;
            width: min(380px, 86vw);
            background: linear-gradient(180deg, #fffdf4, #f3e6bf);
            border-radius: 200px 200px 30px 30px;
            padding: 26px 26px 20px;
            border: 1px solid var(--line);
            box-shadow: var(--sh);
            overflow: hidden
        }

        .arch::before {
            content: "";
            position: absolute;
            inset: 14px;
            border: 1.5px dashed rgba(185, 138, 28, .45);
            border-radius: 180px 180px 22px 22px;
            pointer-events: none
        }

        .arch img.main {
            width: 100%;
            height: 340px;
            object-fit: cover;
            border-radius: 140px 140px 18px 18px;
            border: 1px solid var(--gold)
        }

        .leaf {
            position: absolute;
            font-size: 2rem;
            opacity: .35
        }

        .fcard {
            position: absolute;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 10px 14px;
            font-size: .78rem;
            font-weight: 800;
            box-shadow: var(--sh);
            display: flex;
            gap: 8px;
            align-items: center
        }

        .fcard i {
            color: var(--gold);
            font-size: 1rem
        }

        .fc1 {
            top: 60px;
            inset-inline-start: -8px
        }

        .fc2 {
            bottom: 90px;
            inset-inline-end: -6px
        }

        .fc3 {
            bottom: 18px;
            inset-inline-start: 14px;
            background: var(--ink);
            color: var(--gold2);
            border-color: var(--ink)
        }

        /* strip */
        .strip {
            background: var(--ink);
            color: #f4e9c8;
            border-block: 1px solid var(--gold);
            overflow: hidden;
            white-space: nowrap;
            padding: 12px 0;
            font-weight: 800;
            font-size: .9rem
        }

        .strip span {
            display: inline-block;
            padding-inline: 22px;
            animation: slide 26s linear infinite
        }

        /* sections */
        section {
            padding: 54px 0
        }

        .eyebrow {
            color: var(--goldD);
            font-weight: 900;
            font-size: .8rem;
            letter-spacing: 2px;
            text-transform: uppercase
        }

        h2 {
            font-size: clamp(1.5rem, 3.4vw, 2.3rem);
            line-height: 1.3;
            margin: 8px 0 10px;
            font-weight: 900
        }

        html[dir=rtl] h2 {
            font-family: 'Cairo'
        }

        .lead {
            color: #57503c;
            max-width: 640px
        }

        .grid4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-top: 24px
        }

        @media(max-width:900px) {
            .grid4 {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:520px) {
            .grid4 {
                grid-template-columns: 1fr
            }
        }

        .bcard {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--r);
            padding: 24px 20px;
            box-shadow: var(--sh);
            transition: .25s;
            position: relative;
            overflow: hidden
        }

        .bcard:hover {
            transform: translateY(-4px)
        }

        .bcard::after {
            content: "";
            position: absolute;
            top: 0;
            inset-inline: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--gold2), var(--gold))
        }

        .bcard .ic {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            background: linear-gradient(135deg, #1a1608, #3a2f0e);
            color: var(--gold2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 12px
        }

        .bcard b {
            display: block;
            margin-bottom: 6px
        }

        .bcard p {
            font-size: .87rem;
            color: #5b5440
        }

        /* dark stats */
        .band {
            background: radial-gradient(600px 200px at 50% 0%, rgba(228, 197, 102, .25), transparent), var(--dark);
            color: #f2e7c4;
            border-block: 1px solid var(--gold)
        }

        .band-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            text-align: center;
            padding: 10px 0
        }

        @media(max-width:640px) {
            .band-grid {
                grid-template-columns: 1fr 1fr
            }
        }

        .band b {
            font-size: 2rem;
            color: var(--gold2);
            display: block
        }

        .band span {
            font-size: .82rem;
            opacity: .8
        }

        /* ritual */
        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-top: 24px
        }

        @media(max-width:900px) {
            .steps {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:520px) {
            .steps {
                grid-template-columns: 1fr
            }
        }

        .step {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            padding: 22px 18px;
            position: relative
        }

        .step .n {
            font-size: 2.6rem;
            font-weight: 900;
            color: #ecdcab;
            line-height: 1
        }

        .step b {
            color: var(--ink)
        }

        .step p {
            font-size: .86rem;
            color: #5b5440
        }

        /* ingredients */
        .ing-sec {
            background: linear-gradient(180deg, #fffdf4, var(--cream));
            border-block: 1px solid var(--line)
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin: 18px 0
        }

        .chip {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 30px;
            padding: 8px 15px;
            font-size: .83rem;
            font-weight: 700;
            display: inline-flex;
            gap: 8px;
            align-items: center
        }

        .chip i {
            color: var(--olive)
        }

        .seo-box {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 22px;
            color: #4d4632;
            font-size: .92rem
        }

        .seo-box h3 {
            color: var(--ink);
            margin-bottom: 8px
        }

        /* compare */
        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 20px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            font-size: .88rem
        }

        th,
        td {
            padding: 13px 14px;
            text-align: start;
            border-bottom: 1px solid var(--line)
        }

        th {
            background: var(--ink);
            color: var(--gold2)
        }

        td:last-child,
        th:last-child {
            text-align: center
        }

        .yes {
            color: var(--waD);
            font-weight: 900
        }

        .no {
            color: #c1b99f
        }

        /* reviews */
        .revs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 22px
        }

        @media(max-width:900px) {
            .revs {
                grid-template-columns: 1fr
            }
        }

        .rev {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 20px;
            box-shadow: var(--sh)
        }

        .rev .stars {
            margin-bottom: 8px
        }

        .rev p {
            font-size: .9rem;
            color: #3f3a2b
        }

        .rev b {
            display: block;
            margin-top: 10px;
            font-size: .82rem;
            color: var(--goldD)
        }

        /* offer — black luxury */
        .offer {
            background: radial-gradient(700px 300px at 50% 0%, rgba(228, 197, 102, .2), transparent), var(--dark);
            border-radius: 32px;
            color: #f4ead0;
            padding: 38px 28px;
            text-align: center;
            border: 1px solid var(--gold);
            position: relative;
            overflow: hidden
        }

        .offer .price {
            font-size: 3.2rem;
            font-weight: 900;
            color: var(--gold2)
        }

        .offer .old {
            opacity: .6;
            text-decoration: line-through
        }

        .offer ul {
            list-style: none;
            margin: 16px auto;
            max-width: 420px;
            text-align: start;
            font-size: .92rem
        }

        .offer li {
            padding: 8px 0;
            border-bottom: 1px dashed rgba(228, 197, 102, .25);
            display: flex;
            gap: 10px
        }

        .offer li i {
            color: #2bd06a
        }

        /* faq */
        .faq {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            margin: 10px 0;
            overflow: hidden
        }

        .faq summary {
            padding: 16px 18px;
            cursor: pointer;
            font-weight: 800;
            list-style: none;
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: center
        }

        .faq summary::-webkit-details-marker {
            display: none
        }

        .faq div {
            padding: 0 18px 18px;
            color: #5b5440;
            font-size: .9rem
        }

        /* article */
        .article {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            padding: 28px;
            color: #463f2d;
            font-size: .93rem
        }

        .article h3 {
            color: var(--ink);
            margin: 14px 0 6px
        }

        /* footer — multi-column brand footer */
        footer {
            background: #0d0c07;
            color: #b9ad8d;
            padding: 52px 0 130px;
            margin-top: 40px;
            border-top: 1px solid var(--gold);
            font-size: .88rem
        }

        .foot-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 30px
        }

        .flogo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            margin-bottom: 14px
        }

        .flogo img {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            object-fit: cover;
            border: 2px solid var(--gold)
        }

        .flogo b {
            display: block;
            font-size: 1.35rem;
            letter-spacing: 3px;
            color: var(--gold2)
        }

        .flogo small {
            color: #8f8468;
            font-size: .78rem
        }

        .foot-brand p {
            font-size: .86rem;
            max-width: 340px;
            color: #a99e80
        }

        .fsoc {
            display: flex;
            gap: 10px;
            margin-top: 16px
        }

        .fsoc a {
            width: 42px;
            height: 42px;
            border: 1.5px solid rgba(228, 197, 102, .4);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f0e3b8;
            font-size: 1.05rem;
            text-decoration: none;
            transition: .2s
        }

        .fsoc a:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: #161209;
            transform: translateY(-2px)
        }

        .fcol b {
            display: block;
            color: #f4ead0;
            font-size: .95rem;
            margin-bottom: 12px
        }

        .fcol a {
            display: block;
            color: #a99e80;
            text-decoration: none;
            font-size: .85rem;
            padding: 5px 0
        }

        .fcol a:hover {
            color: var(--gold2)
        }

        .foot-div {
            height: 1px;
            background: rgba(228, 197, 102, .22);
            margin: 28px 0 18px
        }

        .foot-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap
        }

        .foot-bottom small {
            color: #8f8468;
            font-size: .78rem
        }

        .made {
            color: var(--gold2);
            font-weight: 800;
            text-decoration: none
        }

        .made:hover {
            text-decoration: underline
        }

        .flinks {
            display: flex;
            gap: 18px
        }

        .flinks a {
            color: #a99e80;
            text-decoration: none;
            font-size: .8rem
        }

        .flinks a:hover {
            color: var(--gold2)
        }

        .fbadges {
            display: flex;
            gap: 10px
        }

        .bpill {
            background: #fff;
            color: #161209;
            border-radius: 10px;
            padding: 7px 14px;
            font-weight: 800;
            font-size: .76rem;
            display: inline-flex;
            gap: 7px;
            align-items: center
        }

        .bpill i {
            color: var(--waD)
        }

        .bpill:last-child i {
            color: #2563eb
        }

        @media(max-width:900px) {
            .foot-grid {
                grid-template-columns: 1fr 1fr
            }
        }

        @media(max-width:560px) {
            footer {
                padding: 40px 0 135px
            }

            .foot-grid {
                grid-template-columns: 1fr;
                gap: 24px
            }

            .foot-bottom {
                justify-content: center;
                text-align: center
            }
        }

        /* sticky */
        .sticky {
            position: fixed;
            bottom: 0;
            inset-inline: 0;
            z-index: 90;
            background: rgba(15, 13, 8, .94);
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--gold);
            padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
            display: flex;
            gap: 12px;
            align-items: center
        }

        .sticky .p {
            flex: 1;
            color: #f4ead0
        }

        .sticky .p b {
            color: var(--gold2);
            font-size: 1.2rem
        }

        .sticky .p span {
            display: block;
            font-size: .72rem;
            color: #2bd06a;
            font-weight: 800
        }

        .float {
            position: fixed;
            bottom: 88px;
            inset-inline-end: 16px;
            z-index: 90;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2bd06a, #0d7a3c);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            text-decoration: none;
            box-shadow: 0 12px 30px rgba(31, 170, 85, .5)
        }

        @media(min-width:760px) {
            .sticky {
                display: none
            }

            .float {
                bottom: 24px
            }
        }

        .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: .6s
        }

        .reveal.in {
            opacity: 1;
            transform: none
        }

        /* ============ Responsive polish: phones / tablets / desktop ============ */
        img {
            max-width: 100%
        }

        nav,
        .sticky {
            -webkit-backdrop-filter: blur(14px)
        }

        /* Large desktop: give the hero room to breathe */
        @media(min-width:1024px) {
            .hero-grid {
                padding: 64px 0 44px;
                gap: 48px
            }
        }

        /* Tablet: 2-col reviews instead of tall single stack */
        @media(min-width:600px) and (max-width:900px) {
            .revs {
                grid-template-columns: 1fr 1fr
            }
        }

        /* Phones & small tablets */
        @media(max-width:640px) {
            section {
                padding: 36px 0
            }

            h1 {
                font-size: clamp(1.7rem, 8vw, 2.2rem)
            }

            h2 {
                font-size: clamp(1.3rem, 6vw, 1.7rem)
            }

            .sub {
                font-size: .95rem
            }

            /* Hero centers nicely on phones */
            .hero-grid {
                gap: 24px;
                padding: 32px 0 22px;
                text-align: center
            }

            .hero-grid .sub {
                margin-inline: auto
            }

            .cta-row .btn {
                flex: 1 1 100%;
                justify-content: center;
                padding: 15px 20px
            }

            .trust {
                justify-content: center;
                flex-wrap: wrap
            }

            /* Product visual fits small screens, cards stay inside */
            .arch {
                width: min(340px, 88vw);
                padding: 20px 18px 16px
            }

            .arch img.main {
                height: 270px
            }

            .fcard {
                font-size: .7rem;
                padding: 8px 11px;
                border-radius: 13px
            }

            .fc1 {
                top: 44px;
                inset-inline-start: 4px
            }

            .fc2 {
                bottom: 110px;
                inset-inline-end: 4px
            }

            .fc3 {
                bottom: 12px;
                inset-inline-start: 8px
            }

            /* Comparison table never squeezes */
            th,
            td {
                padding: 10px 8px;
                font-size: .76rem;
                word-break: break-word
            }

            /* Offer card breathes on phones */
            .offer {
                padding: 28px 18px;
                border-radius: 24px
            }

            .offer .price {
                font-size: 2.6rem
            }

            .offer .btn-wa {
                width: 100%;
                justify-content: center
            }

            .article {
                padding: 20px
            }

            .seo-box {
                padding: 18px
            }

            .chip {
                font-size: .76rem;
                padding: 7px 12px
            }

            .band b {
                font-size: 1.6rem
            }

            /* Sticky buy bar stays compact */
            .sticky .p b {
                font-size: 1.05rem
            }

            .sticky .btn {
                padding: 11px 18px;
                font-size: .9rem
            }

            .float {
                width: 52px;
                height: 52px;
                font-size: 1.5rem;
                bottom: 84px
            }
        }

        /* Small phones: nav must never overflow */
        @media(max-width:640px) {
            .nav-in {
                flex-wrap: wrap;
                row-gap: 10px;
                padding: 10px 14px
            }

            .logo {
                flex: 1
            }

            .logo img {
                width: 38px;
                height: 38px
            }

            .logo b {
                font-size: 1.05rem;
                letter-spacing: 2px
            }

            .langs button {
                padding: 5px 11px;
                font-size: .72rem
            }

            .nav-in .btn-wa {
                padding: 9px 14px;
                font-size: .8rem
            }
        }

        @media(max-width:400px) {

            /* Icon-only WhatsApp in nav (sticky bar still converts) */
            .nav-in .btn-wa span {
                display: none
            }

            .nav-in .btn-wa {
                padding: 10px 12px;
                border-radius: 12px
            }

            .marquee {
                font-size: .72rem
            }

            .strip {
                font-size: .8rem
            }

            .arch img.main {
                height: 230px
            }
        }

        /* Small landscape phones: keep hero compact */
        @media(max-height:500px) and (orientation:landscape) {
            .hero-grid {
                padding: 24px 0 16px;
                gap: 18px
            }

            .arch img.main {
                height: 220px
            }

            section {
                padding: 30px 0
            }
        }

        /* Reduced motion: respect user preference */
        @media(prefers-reduced-motion:reduce) {

            .marquee span,
            .btn-wa::before {
                animation: none
            }

            .reveal {
                opacity: 1;
                transform: none;
                transition: none
            }

            html {
                scroll-behavior: auto
            }
        }