Perfumia \u2014 Find yourself in a scent<\/title>\n <meta name=\"description\" content=\"Perfumia decodes the products you already love into a fragrance that finally smells like you.\" \/>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Work+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* --------------------------------------------------------------------------\n PERFUMIA \u2014 Elementor-ready homepage HTML\/CSS\n How to use in Elementor:\n - Create a new page.\n - Add an HTML widget for each marked SECTION block, OR paste the whole file\n into one HTML widget (recommended for the first draft).\n - Replace every PERFUMIA_IMAGE_PLACEHOLDER \/ PERFUMIA_VIDEO_PLACEHOLDER\n with your final media URLs.\n - For RTL\/Hebrew: change <html lang=\"en\" dir=\"ltr\"> to lang=\"he\" dir=\"rtl\"\n and load Hebrew fonts.\n -------------------------------------------------------------------------- *\/\n\n :root {\n --radius: 0.25rem;\n --font-serif: \"Instrument Serif\", ui-serif, Georgia, serif;\n --font-sans: \"Work Sans\", ui-sans-serif, system-ui, sans-serif;\n\n \/* oklch colour tokens \u2014 same as the React build *\/\n --background: oklch(0.975 0.012 85);\n --foreground: oklch(0.20 0.02 40);\n --card: oklch(0.985 0.008 85);\n --muted-foreground: oklch(0.48 0.03 55);\n --accent: oklch(0.78 0.11 25);\n --blush: oklch(0.92 0.045 20);\n --peach: oklch(0.86 0.09 55);\n --rose: oklch(0.72 0.13 15);\n --sand: oklch(0.90 0.03 75);\n --plum: oklch(0.38 0.06 20);\n --border: oklch(0.88 0.015 75);\n --secondary: oklch(0.93 0.018 80);\n }\n\n * { box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n margin: 0;\n font-family: var(--font-sans);\n font-weight: 300;\n background: var(--background);\n color: var(--foreground);\n -webkit-font-smoothing: antialiased;\n line-height: 1.5;\n }\n\n h1, h2, h3, .font-serif {\n font-family: var(--font-serif);\n font-weight: 400;\n letter-spacing: -0.01em;\n margin: 0;\n }\n\n a { color: inherit; text-decoration: none; }\n img, video { max-width: 100%; display: block; }\n\n \/* RTL helpers *\/\n [dir=\"rtl\"] { letter-spacing: 0; }\n [dir=\"rtl\"] h1, [dir=\"rtl\"] h2, [dir=\"rtl\"] h3, [dir=\"rtl\"] .font-serif { letter-spacing: 0; }\n [dir=\"rtl\"] .rtl-flip { transform: scaleX(-1); }\n\n \/* Container *\/\n .perfumia-container {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding-inline: 1.25rem;\n }\n @media (min-width: 640px) { .perfumia-container { padding-inline: 1.5rem; } }\n @media (min-width: 1024px) { .perfumia-container { padding-inline: 2.5rem; } }\n\n \/* Utility text *\/\n .eyebrow {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n .eyebrow-rose { color: var(--rose); }\n .eyebrow-peach { color: var(--peach); }\n\n .body-text {\n color: var(--muted-foreground);\n line-height: 1.7;\n }\n\n .link-underline {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n text-decoration: underline;\n text-underline-offset: 8px;\n text-decoration-color: var(--accent);\n }\n\n \/* CTA buttons *\/\n .lux-cta {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n overflow: hidden;\n border: 1px solid var(--foreground);\n padding: 0.875rem 1.5rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--foreground);\n transition: color 0.5s ease;\n isolation: isolate;\n }\n .lux-cta::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--plum);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.5s ease;\n z-index: -1;\n }\n .lux-cta:hover { color: var(--background); }\n .lux-cta:hover::before { transform: scaleX(1); }\n .lux-cta svg { transition: transform 0.5s ease; }\n .lux-cta:hover svg { transform: translateX(4px); }\n [dir=\"rtl\"] .lux-cta::before { transform-origin: right; }\n [dir=\"rtl\"] .lux-cta:hover svg { transform: translateX(-4px); }\n\n .btn-filled {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: var(--foreground);\n color: var(--background);\n padding: 0.75rem 1.25rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n border: none;\n cursor: pointer;\n transition: background 0.3s ease;\n }\n .btn-filled:hover { background: var(--plum); }\n\n .btn-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 9999px;\n background: var(--foreground);\n color: var(--background);\n padding: 0.625rem 1.25rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n transition: background 0.3s ease;\n }\n .btn-pill:hover { background: var(--plum); }\n\n \/* Placeholder media boxes *\/\n .media-placeholder {\n background: var(--secondary);\n border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);\n position: relative;\n }\n .media-placeholder img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0;\n }\n\n \/* Section spacing *\/\n .section-padded { padding-block: 4rem; }\n @media (min-width: 640px) { .section-padded { padding-block: 6rem; } }\n @media (min-width: 1024px) { .section-padded { padding-block: 9rem; } }\n\n \/* --------------------------------------------------------------------------\n SECTION: Header\n -------------------------------------------------------------------------- *\/\n .perfumia-header {\n position: sticky;\n top: 0;\n z-index: 40;\n border-bottom: 1px solid transparent;\n background: color-mix(in oklch, var(--background) 40%, transparent);\n backdrop-filter: blur(12px);\n transition: all 0.3s ease;\n }\n .perfumia-header.scrolled {\n border-bottom-color: color-mix(in oklch, var(--border) 60%, transparent);\n background: color-mix(in oklch, var(--background) 75%, transparent);\n backdrop-filter: blur(24px);\n }\n .perfumia-header__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding-block: 1rem;\n transition: padding 0.3s ease;\n }\n .perfumia-header.scrolled .perfumia-header__inner { padding-block: 0.75rem; }\n .perfumia-header__nav {\n display: none;\n align-items: center;\n gap: 2rem;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n }\n @media (min-width: 1024px) { .perfumia-header__nav { display: flex; } }\n .perfumia-header__nav a:hover { color: var(--foreground); }\n .perfumia-header__logo { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: -0.02em; }\n .perfumia-header__tools {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--muted-foreground);\n }\n .perfumia-header__tools button { background: none; border: none; cursor: pointer; padding: 0; }\n .perfumia-header__tools svg { width: 16px; height: 16px; }\n .lang-toggle {\n border: 1px solid var(--border);\n border-radius: 9999px;\n padding: 0.25rem 0.75rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n background: transparent;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .lang-toggle:hover { border-color: var(--foreground); color: var(--foreground); }\n .cart-btn { position: relative; }\n .cart-badge {\n position: absolute;\n inset-inline-end: -8px;\n top: -8px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--foreground);\n color: var(--background);\n font-size: 10px;\n display: grid;\n place-items: center;\n }\n .mobile-menu-btn { display: block; background: none; border: none; cursor: pointer; }\n @media (min-width: 1024px) { .mobile-menu-btn { display: none; } }\n\n \/* --------------------------------------------------------------------------\n SECTION: Hero\n -------------------------------------------------------------------------- *\/\n .hero { position: relative; overflow: hidden; padding-bottom: 6rem; padding-top: 2.5rem; }\n @media (min-width: 1024px) { .hero { padding-bottom: 8rem; padding-top: 4rem; } }\n\n .hero__clouds {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: -1;\n overflow: hidden;\n }\n .hero__cloud {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n opacity: 0.6;\n }\n .hero__cloud--1 {\n width: 36rem; height: 36rem;\n top: -10rem; left: -8rem;\n background: linear-gradient(135deg, var(--blush), var(--peach));\n }\n .hero__cloud--2 {\n width: 38rem; height: 38rem;\n bottom: -10rem; right: -8rem;\n background: linear-gradient(135deg, var(--sand), var(--rose));\n }\n [dir=\"rtl\"] .hero__cloud--1 { left: auto; right: -8rem; }\n [dir=\"rtl\"] .hero__cloud--2 { right: auto; left: -8rem; }\n\n .hero__grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 3rem;\n }\n @media (min-width: 1024px) { .hero__grid { grid-template-columns: 5fr 7fr; gap: 5rem; } }\n\n .hero__badge {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);\n background: color-mix(in oklch, var(--blush) 60%, transparent);\n border-radius: 9999px;\n padding: 0.375rem 1rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.22em;\n color: var(--plum);\n margin-bottom: 1.5rem;\n }\n .hero__title {\n font-size: 3rem;\n line-height: 1.02;\n }\n @media (min-width: 640px) { .hero__title { font-size: 3.75rem; } }\n @media (min-width: 1024px) { .hero__title { font-size: 5.5rem; } }\n .hero__title em { color: var(--rose); font-style: italic; }\n .hero__body { margin-top: 2.5rem; max-width: 28rem; }\n .hero__ctas { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }\n\n .hero__stats {\n margin-top: 5rem;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n border-top: 1px solid var(--border);\n padding-top: 2.5rem;\n }\n .stat__n { font-family: var(--font-serif); font-size: 1.5rem; }\n @media (min-width: 640px) { .stat__n { font-size: 1.875rem; } }\n .stat__k {\n margin-top: 0.25rem;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n }\n @media (min-width: 640px) { .stat__k { font-size: 10px; letter-spacing: 0.2em; } }\n\n .hero__visual { position: relative; }\n .hero__image-wrap {\n aspect-ratio: 4 \/ 5;\n border-radius: var(--radius);\n }\n .hero__dna-card {\n margin-top: 1.25rem;\n width: 100%;\n border-radius: 1rem;\n border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);\n background: color-mix(in oklch, var(--background) 90%, transparent);\n padding: 1.25rem;\n font-size: 12px;\n backdrop-filter: blur(12px);\n box-shadow: 0 20px 50px -20px rgba(120, 50, 50, 0.25);\n }\n @media (min-width: 640px) {\n .hero__dna-card {\n position: absolute;\n bottom: 1.5rem;\n right: 1.5rem;\n width: 240px;\n margin-top: 0;\n }\n }\n @media (min-width: 1024px) { .hero__dna-card { bottom: 2rem; right: 2rem; width: 260px; } }\n [dir=\"rtl\"] .hero__dna-card { right: auto; left: 1.5rem; }\n @media (min-width: 1024px) { [dir=\"rtl\"] .hero__dna-card { left: 2rem; } }\n\n .dna-card__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n }\n .dna-card__match {\n border-radius: 9999px;\n background: var(--blush);\n padding: 0.125rem 0.5rem;\n font-size: 9px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--rose);\n }\n .formula-bar { margin-bottom: 0.5rem; }\n .formula-bar__row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 0.5rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n margin-bottom: 0.25rem;\n }\n .formula-bar__track {\n height: 4px;\n width: 100%;\n border-radius: 9999px;\n background: var(--secondary);\n overflow: hidden;\n }\n .formula-bar__fill {\n height: 100%;\n border-radius: 9999px;\n background: linear-gradient(90deg, var(--peach), var(--rose));\n }\n .dna-card__name {\n margin-top: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 0.75rem;\n font-family: var(--font-serif);\n font-size: 1rem;\n font-style: italic;\n }\n\n \/* --------------------------------------------------------------------------\n SECTION: Scent DNA\n -------------------------------------------------------------------------- *\/\n .scent-dna {\n position: relative;\n overflow: hidden;\n background: linear-gradient(180deg, var(--background), color-mix(in oklch, var(--blush) 40%, transparent), var(--background));\n }\n .scent-dna__bg {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .scent-dna__bg img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.1;\n mix-blend-mode: multiply;\n }\n .scent-dna__grid {\n position: relative;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n @media (min-width: 1024px) { .scent-dna__grid { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }\n\n .scent-dna__title { font-size: 1.875rem; line-height: 1.08; }\n @media (min-width: 640px) { .scent-dna__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .scent-dna__title { font-size: 3.75rem; } }\n .scent-dna__title em { color: var(--rose); font-style: italic; }\n\n .tag-pill {\n display: inline-block;\n border: 1px solid color-mix(in oklch, var(--rose) 30%, transparent);\n background: var(--background);\n border-radius: 9999px;\n padding: 0.375rem 1rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--plum);\n }\n\n .formula-card {\n border-radius: 1.5rem;\n border: 1px solid var(--border);\n background: var(--background);\n padding: 1.5rem;\n box-shadow: 0 30px 80px -40px rgba(120, 50, 50, 0.35);\n }\n @media (min-width: 640px) { .formula-card { padding: 2rem; } }\n @media (min-width: 1024px) { .formula-card { padding: 3rem; } }\n\n .formula-card__head {\n display: flex;\n flex-wrap: wrap;\n align-items: start;\n justify-content: space-between;\n gap: 1rem;\n border-bottom: 1px solid var(--border);\n padding-bottom: 1.25rem;\n }\n .formula-card__label {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n .formula-card__value {\n margin-top: 0.25rem;\n font-family: var(--font-serif);\n font-size: 1.25rem;\n }\n @media (min-width: 640px) { .formula-card__value { font-size: 1.5rem; } }\n .formula-card__value--rose { color: var(--rose); font-style: italic; }\n\n .formula-card__body {\n margin-top: 2rem;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n @media (min-width: 640px) { .formula-card__body { grid-template-columns: 2fr 3fr; gap: 2.5rem; } }\n\n .donut {\n position: relative;\n aspect-ratio: 1 \/ 1;\n width: 100%;\n max-width: 240px;\n margin-inline: auto;\n border-radius: 50%;\n background: conic-gradient(\n var(--rose) 0 42%,\n var(--peach) 42% 70%,\n var(--sand) 70% 88%,\n var(--plum) 88% 100%\n );\n }\n @media (min-width: 640px) { .donut { max-width: none; } }\n .donut__hole {\n position: absolute;\n inset: 1.25rem;\n border-radius: 50%;\n background: var(--background);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 0.5rem;\n }\n @media (min-width: 640px) { .donut__hole { inset: 1.5rem; } }\n .donut__match { font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--muted-foreground); }\n .donut__pct { font-family: var(--font-serif); font-size: 1.875rem; }\n @media (min-width: 640px) { .donut__pct { font-size: 2.25rem; } }\n .donut__name { margin-top: 0.25rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rose); }\n @media (min-width: 640px) { .donut__name { font-size: 10px; letter-spacing: 0.18em; } }\n\n .mini-stats {\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.5rem;\n border-top: 1px solid var(--border);\n padding-top: 1.25rem;\n text-align: center;\n }\n .mini-stat__k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }\n @media (min-width: 640px) { .mini-stat__k { letter-spacing: 0.2em; } }\n .mini-stat__v { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1rem; }\n @media (min-width: 640px) { .mini-stat__v { font-size: 1.125rem; } }\n\n .formula-card__foot {\n margin-top: 2rem;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 1.5rem;\n }\n .formula-card__foot span { font-size: 12px; color: var(--muted-foreground); }\n .formula-card__foot span strong { color: var(--rose); font-weight: 400; }\n\n \/* --------------------------------------------------------------------------\n SECTION: From What You Love (Reverse Discovery)\n -------------------------------------------------------------------------- *\/\n .from-love { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--background); }\n .from-love__clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\n .from-love__cloud {\n position: absolute;\n border-radius: 50%;\n filter: blur(130px);\n }\n .from-love__cloud--1 {\n width: 34rem; height: 34rem;\n top: -10rem; right: -6rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--blush) 70%, transparent), color-mix(in oklch, var(--peach) 40%, transparent));\n }\n .from-love__cloud--2 {\n width: 36rem; height: 36rem;\n bottom: -10rem; left: -8rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--sand) 60%, transparent), color-mix(in oklch, var(--rose) 25%, transparent));\n }\n [dir=\"rtl\"] .from-love__cloud--1 { right: auto; left: -6rem; }\n [dir=\"rtl\"] .from-love__cloud--2 { left: auto; right: -8rem; }\n .from-love__bg-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.09;\n mix-blend-mode: multiply;\n }\n .from-love__content { position: relative; z-index: 1; }\n\n .from-love__head {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n margin-bottom: 3rem;\n }\n @media (min-width: 1024px) { .from-love__head { grid-template-columns: 1fr 1fr; gap: 2rem; } }\n .from-love__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .from-love__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .from-love__title { font-size: 3.75rem; } }\n .from-love__title em { color: var(--rose); font-style: italic; }\n .from-love__body { max-width: 28rem; }\n @media (min-width: 1024px) { .from-love__body { margin-top: 1.5rem; } }\n\n .match-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n @media (min-width: 640px) { .match-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }\n @media (min-width: 1024px) { .match-grid { grid-template-columns: repeat(4, 1fr); } }\n\n .match-card {\n position: relative;\n overflow: hidden;\n border-radius: 1rem;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, color-mix(in oklch, var(--blush) 40%, transparent), var(--background), color-mix(in oklch, var(--sand) 40%, transparent));\n padding: 1.25rem;\n transition: border-color 0.3s ease, transform 0.3s ease;\n }\n .match-card:hover { border-color: color-mix(in oklch, var(--rose) 50%, transparent); transform: translateY(-4px); }\n .match-card svg { width: 24px; height: 24px; color: var(--rose); }\n .match-card__tag {\n margin-top: 1.5rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .match-card__title { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; }\n @media (min-width: 640px) { .match-card__title { font-size: 1.5rem; } }\n .match-card__match {\n margin-top: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 0.75rem;\n font-size: 12px;\n font-style: italic;\n color: var(--muted-foreground);\n }\n .match-card__cta {\n margin-top: 1.25rem;\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--rose);\n }\n .match-card__cta svg { width: 12px; height: 12px; transition: transform 0.3s ease; }\n .match-card:hover .match-card__cta svg { transform: translateX(4px); }\n\n .also-tags {\n margin-top: 2.5rem;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .also-tags span {\n border: 1px solid var(--border);\n background: var(--background);\n border-radius: 9999px;\n padding: 0.25rem 0.75rem;\n transition: all 0.2s ease;\n }\n .also-tags span:hover { border-color: var(--rose); color: var(--rose); }\n\n \/* --------------------------------------------------------------------------\n SECTION: The Decoder\n -------------------------------------------------------------------------- *\/\n .decoder {\n position: relative;\n overflow: hidden;\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n background: var(--secondary);\n }\n .decoder__clouds {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n z-index: 0;\n }\n .decoder__cloud {\n position: absolute;\n border-radius: 50%;\n filter: blur(110px);\n opacity: 0.7;\n animation: pulse 9s ease-in-out infinite;\n }\n .decoder__cloud--1 {\n width: 28rem; height: 28rem;\n top: -6rem; left: -6rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--peach) 70%, transparent), color-mix(in oklch, var(--rose) 40%, transparent));\n }\n .decoder__cloud--2 {\n width: 32rem; height: 32rem;\n bottom: -8rem; right: -6rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--blush) 80%, transparent), color-mix(in oklch, var(--sand) 50%, transparent));\n animation-duration: 12s;\n }\n .decoder__cloud--3 {\n width: 20rem; height: 20rem;\n top: 33%; right: 25%;\n background: linear-gradient(135deg, color-mix(in oklch, var(--sand) 50%, transparent), color-mix(in oklch, var(--plum) 20%, transparent));\n animation-duration: 14s;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 0.55; transform: scale(1); }\n 50% { opacity: 0.75; transform: scale(1.05); }\n }\n\n .decoder__grid {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n @media (min-width: 1024px) { .decoder__grid { grid-template-columns: 4fr 8fr; gap: 2.5rem; } }\n\n .decoder__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .decoder__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .decoder__title { font-size: 3rem; } }\n .decoder__title em { color: var(--accent); font-style: italic; }\n\n .quiz-card {\n border-radius: var(--radius);\n border: 1px solid var(--border);\n background: var(--background);\n box-shadow: 0 40px 80px -50px rgba(120, 50, 50, 0.35);\n }\n .quiz-card__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-bottom: 1px solid var(--border);\n padding: 1rem 1.25rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.22em;\n color: var(--muted-foreground);\n }\n @media (min-width: 640px) { .quiz-card__head { padding: 1rem 1.5rem; letter-spacing: 0.24em; } }\n .quiz-card__progress { display: flex; gap: 0.25rem; }\n .quiz-card__progress span { width: 24px; height: 1px; background: var(--border); }\n @media (min-width: 640px) { .quiz-card__progress span { width: 40px; } }\n .quiz-card__progress span.active { background: var(--accent); }\n\n .quiz-card__body { padding: 1.5rem; }\n @media (min-width: 640px) { .quiz-card__body { padding: 2rem; } }\n @media (min-width: 1024px) { .quiz-card__body { padding: 3rem; } }\n\n .quiz-card__q {\n font-family: var(--font-serif);\n font-size: 1.25rem;\n line-height: 1.3;\n }\n @media (min-width: 640px) { .quiz-card__q { font-size: 1.5rem; } }\n @media (min-width: 1024px) { .quiz-card__q { font-size: 1.875rem; } }\n\n .quiz-card__input {\n width: 100%;\n margin-top: 1.5rem;\n border: none;\n border-bottom: 1px solid var(--border);\n background: transparent;\n padding-bottom: 0.75rem;\n font-family: var(--font-serif);\n font-size: 1.125rem;\n font-style: italic;\n outline: none;\n color: var(--foreground);\n }\n @media (min-width: 640px) { .quiz-card__input { margin-top: 2rem; font-size: 1.25rem; } }\n .quiz-card__input::placeholder { color: color-mix(in oklch, var(--muted-foreground) 50%, transparent); }\n .quiz-card__input:focus { border-bottom-color: var(--accent); }\n\n .quiz-card__actions {\n margin-top: 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n }\n .quiz-card__back {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n background: none;\n border: none;\n cursor: pointer;\n }\n .quiz-card__back:hover { color: var(--foreground); }\n .quiz-card__back:disabled { opacity: 0.3; cursor: not-allowed; }\n\n \/* --------------------------------------------------------------------------\n SECTION: Products\n -------------------------------------------------------------------------- *\/\n .products { border-top: 1px solid var(--border); background: var(--background); }\n .products__head {\n display: flex;\n flex-wrap: wrap;\n align-items: end;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 2.5rem;\n }\n @media (min-width: 640px) { .products__head { margin-bottom: 4rem; } }\n .products__title { font-size: 1.875rem; }\n @media (min-width: 640px) { .products__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .products__title { font-size: 3rem; } }\n\n .product-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem 1.5rem;\n }\n @media (min-width: 640px) { .product-grid { gap: 2rem 2.5rem; } }\n @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2.5rem; } }\n\n .product-card__media { position: relative; overflow: hidden; background: var(--secondary); }\n .product-card__media .media-placeholder { aspect-ratio: 4 \/ 5; }\n .product-card__wish {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n width: 36px;\n height: 36px;\n display: grid;\n place-items: center;\n background: color-mix(in oklch, var(--background) 80%, transparent);\n backdrop-filter: blur(8px);\n border: none;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n [dir=\"rtl\"] .product-card__wish { right: auto; left: 0.75rem; }\n .product-card__wish:hover { background: var(--background); }\n .product-card__wish svg { width: 16px; height: 16px; }\n .product-card__add {\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n transform: translateY(100%);\n background: var(--foreground);\n color: var(--background);\n padding: 0.75rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n border: none;\n cursor: pointer;\n transition: transform 0.3s ease;\n }\n .product-card:hover .product-card__add { transform: translateY(0); }\n\n .product-card__info {\n margin-top: 1.25rem;\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: 0.75rem;\n }\n .product-card__house {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .product-card__name { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.2; }\n @media (min-width: 640px) { .product-card__name { font-size: 1.25rem; } }\n .product-card__family { margin-top: 0.25rem; font-size: 12px; color: var(--muted-foreground); }\n .product-card__price { flex-shrink: 0; font-family: var(--font-serif); font-size: 1rem; text-align: end; }\n @media (min-width: 640px) { .product-card__price { font-size: 1.125rem; } }\n .product-card__notes { margin-top: 0.5rem; font-size: 12px; font-style: italic; color: var(--muted-foreground); }\n\n \/* --------------------------------------------------------------------------\n SECTION: Scent Families\n -------------------------------------------------------------------------- *\/\n .families { border-top: 1px solid var(--border); background: var(--secondary); }\n .families__head {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n @media (min-width: 1024px) { .families__head { grid-template-columns: 1fr 1fr; } }\n .families__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .families__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .families__title { font-size: 3rem; } }\n .families__body { max-width: 28rem; }\n @media (min-width: 1024px) { .families__body { margin-top: 1rem; } }\n\n .family-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n @media (min-width: 640px) { .family-grid { grid-template-columns: 1fr 1fr; } }\n @media (min-width: 1024px) { .family-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .family-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n border-radius: 1rem;\n border: 1px solid var(--border);\n background: var(--background);\n padding: 1.25rem;\n transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n }\n @media (min-width: 640px) { .family-card { gap: 1.25rem; padding: 1.5rem; } }\n .family-card:hover {\n transform: translateY(-4px);\n border-color: color-mix(in oklch, var(--rose) 40%, transparent);\n box-shadow: 0 20px 40px -25px rgba(120, 50, 50, 0.4);\n }\n .family-card__icon {\n flex-shrink: 0;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n color: var(--plum);\n transition: transform 0.5s ease;\n }\n .family-card:hover .family-card__icon { transform: rotate(8deg); }\n .family-card__name { font-family: var(--font-serif); font-size: 1.25rem; }\n @media (min-width: 640px) { .family-card__name { font-size: 1.5rem; } }\n .family-card__desc { margin-top: 0.25rem; font-size: 12px; color: var(--muted-foreground); }\n @media (min-width: 640px) { .family-card__desc { font-size: 14px; } }\n .family-card__meta {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: end;\n gap: 0.5rem;\n margin-inline-start: auto;\n }\n .family-card__count {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .family-card__meta svg { width: 16px; height: 16px; color: var(--muted-foreground); transition: transform 0.3s ease, color 0.3s ease; }\n .family-card:hover .family-card__meta svg { transform: translateX(4px); color: var(--rose); }\n\n \/* --------------------------------------------------------------------------\n SECTION: Creator Phones\n -------------------------------------------------------------------------- *\/\n .creators {\n position: relative;\n overflow: hidden;\n background: linear-gradient(180deg, var(--background), color-mix(in oklch, var(--blush) 40%, transparent), var(--background));\n }\n .creators__head {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n @media (min-width: 1024px) { .creators__head { grid-template-columns: 1fr 1fr; } }\n .creators__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .creators__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .creators__title { font-size: 3.75rem; } }\n .creators__title em { color: var(--rose); font-style: italic; }\n .creators__body { max-width: 28rem; }\n\n .phone-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n place-items: center;\n }\n @media (min-width: 640px) { .phone-grid { grid-template-columns: repeat(2, 1fr); } }\n @media (min-width: 1024px) { .phone-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .phone-mock {\n width: 100%;\n max-width: 280px;\n transition: transform 0.5s ease;\n }\n .phone-mock:hover { transform: translateY(-8px) rotate(0deg) !important; }\n .phone-mock--tilt-1 { transform: rotate(-2deg); }\n .phone-mock--tilt-3 { transform: rotate(2deg); }\n [dir=\"rtl\"] .phone-mock--tilt-1 { transform: rotate(2deg); }\n [dir=\"rtl\"] .phone-mock--tilt-3 { transform: rotate(-2deg); }\n\n .phone-mock__frame {\n border-radius: 2.25rem;\n border: 1px solid var(--border);\n background: var(--foreground);\n padding: 0.5rem;\n box-shadow: 0 30px 60px -30px rgba(60, 20, 20, 0.5);\n }\n .phone-mock__screen {\n position: relative;\n aspect-ratio: 9 \/ 16;\n width: 100%;\n overflow: hidden;\n border-radius: 1.85rem;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .phone-mock__notch {\n position: absolute;\n top: 0.5rem;\n left: 50%;\n transform: translateX(-50%);\n width: 5rem;\n height: 1.25rem;\n border-radius: 9999px;\n background: var(--foreground);\n z-index: 2;\n }\n .phone-mock__bloom {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, color-mix(in oklch, var(--plum) 40%, transparent), transparent, color-mix(in oklch, var(--background) 30%, transparent));\n pointer-events: none;\n }\n .phone-mock__play {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n border: 1px solid color-mix(in oklch, var(--background) 60%, transparent);\n background: color-mix(in oklch, var(--background) 25%, transparent);\n backdrop-filter: blur(12px);\n display: grid;\n place-items: center;\n color: var(--background);\n transition: all 0.5s ease;\n }\n .phone-mock:hover .phone-mock__play {\n background: var(--background);\n color: var(--foreground);\n transform: scale(1.1);\n }\n .phone-mock__play svg { width: 20px; height: 20px; fill: currentColor; }\n .phone-mock__label {\n position: absolute;\n inset-inline: 1rem;\n bottom: 1rem;\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.22em;\n color: color-mix(in oklch, var(--background) 80%, transparent);\n }\n\n \/* --------------------------------------------------------------------------\n SECTION: Voices\n -------------------------------------------------------------------------- *\/\n .voices { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--plum); color: var(--background); }\n .voices__head {\n display: flex;\n flex-wrap: wrap;\n align-items: end;\n justify-content: space-between;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n .voices__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .voices__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .voices__title { font-size: 3.75rem; } }\n .voices__title em { color: var(--peach); font-style: italic; }\n .voices__rating { display: flex; align-items: center; gap: 0.5rem; color: var(--peach); }\n .voices__rating svg { width: 16px; height: 16px; fill: currentColor; }\n .voices__rating span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--background) 70%, transparent); }\n\n .voice-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.25rem;\n }\n @media (min-width: 768px) { .voice-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .voice-card {\n display: flex;\n flex-direction: column;\n border-radius: 1rem;\n background: var(--background);\n color: var(--foreground);\n padding: 1.25rem;\n }\n .voice-card svg { width: 20px; height: 20px; color: var(--rose); }\n .voice-card__quote {\n margin-top: 1rem;\n flex: 1;\n font-family: var(--font-serif);\n font-size: 1rem;\n line-height: 1.4;\n font-style: italic;\n }\n @media (min-width: 640px) { .voice-card__quote { font-size: 1.125rem; } }\n .voice-card__formula { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }\n .voice-card__author {\n margin-top: 1.5rem;\n border-top: 1px solid var(--border);\n padding-top: 1rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n .voice-card__avatar {\n width: 44px;\n height: 44px;\n flex-shrink: 0;\n border-radius: 50%;\n border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);\n background: var(--secondary);\n }\n .voice-card__name { font-family: var(--font-serif); font-size: 1rem; }\n .voice-card__handle { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }\n @media (min-width: 640px) { .voice-card__handle { font-size: 11px; letter-spacing: 0.18em; } }\n\n .trust-grid {\n margin-top: 3rem;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1.5rem;\n border-top: 1px solid color-mix(in oklch, var(--background) 20%, transparent);\n padding-top: 2rem;\n text-align: center;\n }\n @media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(4, 1fr); padding-top: 2.5rem; } }\n .trust-stat__n { font-family: var(--font-serif); font-size: 1.875rem; color: var(--peach); }\n @media (min-width: 640px) { .trust-stat__n { font-size: 2.25rem; } }\n .trust-stat__k { margin-top: 0.5rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in oklch, var(--background) 60%, transparent); }\n @media (min-width: 640px) { .trust-stat__k { font-size: 10px; letter-spacing: 0.2em; } }\n\n \/* --------------------------------------------------------------------------\n SECTION: Community \/ Journal\n -------------------------------------------------------------------------- *\/\n .journal__head {\n display: flex;\n flex-wrap: wrap;\n align-items: end;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 2.5rem;\n }\n .journal__title { font-size: 1.875rem; }\n @media (min-width: 640px) { .journal__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .journal__title { font-size: 3rem; } }\n\n .journal-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n @media (min-width: 768px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .journal-card {\n display: block;\n border-top: 1px solid var(--border);\n padding-top: 1.5rem;\n transition: color 0.2s ease;\n }\n .journal-card:hover { color: var(--accent); }\n .journal-card__tag {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--accent);\n }\n .journal-card__title {\n margin-top: 1rem;\n font-family: var(--font-serif);\n font-size: 1.25rem;\n line-height: 1.3;\n }\n @media (min-width: 640px) { .journal-card__title { font-size: 1.5rem; } }\n .journal-card__author {\n margin-top: 1.5rem;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n\n \/* --------------------------------------------------------------------------\n SECTION: Newsletter\n -------------------------------------------------------------------------- *\/\n .newsletter {\n position: relative;\n overflow: hidden;\n border-top: 1px solid var(--border);\n background: var(--plum);\n color: var(--background);\n }\n .newsletter__bg {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .newsletter__bg img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.3;\n }\n .newsletter__bg::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg,var(--plum), color-mix(in oklch, var(--plum) 85%, transparent), color-mix(in oklch, var(--plum) 40%, transparent));\n }\n .newsletter__content {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n @media (min-width: 1024px) { .newsletter__content { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }\n .newsletter__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .newsletter__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .newsletter__title { font-size: 3rem; } }\n\n .newsletter__form {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1rem;\n }\n .newsletter__field {\n display: flex;\n align-items: end;\n gap: 0.75rem;\n border-bottom: 1px solid color-mix(in oklch, var(--background) 30%, transparent);\n }\n .newsletter__input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n padding-block: 1rem;\n font-family: var(--font-serif);\n font-size: 1.125rem;\n font-style: italic;\n color: var(--background);\n outline: none;\n }\n @media (min-width: 640px) { .newsletter__input { font-size: 1.25rem; } }\n .newsletter__input::placeholder { color: color-mix(in oklch, var(--background) 40%, transparent); }\n .newsletter__submit {\n flex-shrink: 0;\n background: none;\n border: none;\n padding: 0 0.75rem 1rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--background);\n cursor: pointer;\n transition: color 0.2s ease;\n }\n @media (min-width: 640px) { .newsletter__submit { padding-inline: 1.5rem; font-size: 12px; letter-spacing: 0.2em; } }\n .newsletter__submit:hover { color: var(--accent); }\n .newsletter__note { font-size: 12px; color: color-mix(in oklch, var(--background) 60%, transparent); }\n\n \/* --------------------------------------------------------------------------\n SECTION: Footer\n -------------------------------------------------------------------------- *\/\n .footer { border-top: 1px solid var(--border); background: var(--background); }\n .footer__grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }\n .footer__brand { grid-column: span 2; }\n @media (min-width: 640px) { .footer__brand { grid-column: span 1; } }\n .footer__logo { font-family: var(--font-serif); font-size: 1.875rem; }\n .footer__tagline { margin-top: 0.75rem; max-width: 20rem; font-size: 12px; color: var(--muted-foreground); }\n .footer__col-title {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n .footer__links { list-style: none; margin: 1rem 0 0; padding: 0; }\n .footer__links li + li { margin-top: 0.5rem; }\n .footer__links a { font-size: 14px; transition: color 0.2s ease; }\n .footer__links a:hover { color: var(--accent); }\n\n .footer__bottom {\n margin-top: 4rem;\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: space-between;\n gap: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 1.5rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n @media (min-width: 640px) { .footer__bottom { flex-direction: row; align-items: center; } }\n .footer__bottom a:hover { color: var(--foreground); }\n .footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"perfumia-header\" id=\"perfumia-header\">\n <div class=\"perfumia-container perfumia-header__inner\">\n <button class=\"mobile-menu-btn\" aria-label=\"Menu\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>\n <\/button>\n\n <nav class=\"perfumia-header__nav\">\n <a href=\"#decoder\">Discover<\/a>\n <a href=\"#products\">Collection<\/a>\n <a href=\"#families\">Families<\/a>\n <a href=\"#community\">Journal<\/a>\n <\/nav>\n\n <a href=\"#\" class=\"perfumia-header__logo\">Perfumia<\/a>\n\n <div class=\"perfumia-header__tools\">\n <button class=\"lang-toggle\" aria-label=\"Switch language\">\u05e2\u05d1<\/button>\n <button aria-label=\"Search\" class=\"hidden-sm\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n <\/button>\n <button aria-label=\"Wishlist\" class=\"hidden-sm\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"cart-btn\" aria-label=\"Cart\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 6h15l-1.5 9h-12Z\"\/><circle cx=\"9\" cy=\"20\" r=\"1.5\"\/><circle cx=\"18\" cy=\"20\" r=\"1.5\"\/><path d=\"M6 6 5 3H2\"\/><\/svg>\n <span class=\"cart-badge\">2<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main>\n \n <section class=\"hero\">\n <div class=\"hero__clouds\" aria-hidden=\"true\">\n <div class=\"hero__cloud hero__cloud--1\"><\/div>\n <div class=\"hero__cloud hero__cloud--2\"><\/div>\n \n <img decoding=\"async\" src=\"\" alt=\"\" \/>\n <\/div>\n\n <div class=\"perfumia-container\">\n <div class=\"hero__grid\">\n <div class=\"hero__text\">\n <div class=\"hero__badge\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><path d=\"M12 8v4\"\/><path d=\"M12 16h.01\"\/><\/svg>\n Your scent, decoded\n <\/div>\n <h1 class=\"hero__title\">\n Find yourself<br \/>in a <em>scent.<\/em>\n <\/h1>\n <p class=\"body-text hero__body\">\n Perfumia decodes the products you already love \u2014 your shampoo, your candle, that lotion you keep re-buying \u2014 into a fragrance that finally smells like you.\n <\/p>\n <div class=\"hero__ctas\">\n <a href=\"#decoder\" class=\"lux-cta\">\n <span>Begin the decoder<\/span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <a href=\"#products\" class=\"link-underline\">Shop the collection<\/a>\n <\/div>\n\n <div class=\"hero__stats\">\n <div class=\"stat\">\n <div class=\"stat__n\">180+<\/div>\n <div class=\"stat__k\">Houses curated<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat__n\">42k<\/div>\n <div class=\"stat__k\">Profiles decoded<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat__n\">1:1<\/div>\n <div class=\"stat__k\">Perfumer sessions<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero__image-wrap\" aria-label=\"Hero image\">\n <img decoding=\"async\"\n src=\"https:\/\/perfumia.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-20-2026-08_06_41-PM.png\"\n alt=\"Perfumia Hero\"\n style=\"width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;\"\n \/>\n<\/div>\n\n <div class=\"hero__dna-card\">\n <div class=\"dna-card__head\">\n <span class=\"eyebrow\">Your scent DNA<\/span>\n <span class=\"dna-card__match\">94% match<\/span>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Amber<\/span><span>42%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:42%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Iris<\/span><span>28%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:28%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Cashmeran<\/span><span>18%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:18%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Pink Pepper<\/span><span>12%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:12%\"><\/div><\/div>\n <\/div>\n <div class=\"dna-card__name\">\"Lumi\u00e8re \u00c9ternelle\"<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"scent-dna section-padded\">\n <div class=\"scent-dna__bg\">\n \n <img decoding=\"async\" src=\"\" alt=\"\" \/>\n <\/div>\n\n <div class=\"perfumia-container scent-dna__grid\">\n <div class=\"scent-dna__intro\">\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:1rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n Your Scent DNA\n <\/div>\n <h2 class=\"scent-dna__title\">\n Every person<br \/>has a <em>formula.<\/em>\n <\/h2>\n <p class=\"body-text\" style=\"margin-top:1.25rem;max-width:28rem;\">\n We break down what draws you in \u2014 the molecules, the accords, the memory triggers \u2014 into a visual signature you can wear, share, and build a wardrobe around.\n <\/p>\n <div style=\"margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0.5rem;\">\n <span class=\"tag-pill\">Skin-close<\/span>\n <span class=\"tag-pill\">Warm-radiant<\/span>\n <span class=\"tag-pill\">Second-skin musk<\/span>\n <\/div>\n <\/div>\n\n <div class=\"formula-card\">\n <div class=\"formula-card__head\">\n <div>\n <div class=\"formula-card__label\">Signature \u21160428<\/div>\n <div class=\"formula-card__value\">Elle \u00b7 26 \u00b7 Brooklyn<\/div>\n <\/div>\n <div style=\"text-align:end;\">\n <div class=\"formula-card__label\">Family<\/div>\n <div class=\"formula-card__value formula-card__value--rose\">Amber Floral<\/div>\n <\/div>\n <\/div>\n\n <div class=\"formula-card__body\">\n <div>\n <div class=\"donut\">\n <div class=\"donut__hole\">\n <div class=\"donut__match\">Match<\/div>\n <div class=\"donut__pct\">94%<\/div>\n <div class=\"donut__name\">Lumi\u00e8re \u00c9ternelle<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Amber<\/span><span>42%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:42%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Iris<\/span><span>28%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:28%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Cashmeran<\/span><span>18%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:18%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Pink Pepper<\/span><span>12%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:12%\"><\/div><\/div>\n <\/div>\n\n <div class=\"mini-stats\">\n <div class=\"mini-stat\">\n <div class=\"mini-stat__k\">Sillage<\/div>\n <div class=\"mini-stat__v\">Intimate<\/div>\n <\/div>\n <div class=\"mini-stat\">\n <div class=\"mini-stat__k\">Longevity<\/div>\n <div class=\"mini-stat__v\">8h+<\/div>\n <\/div>\n <div class=\"mini-stat\">\n <div class=\"mini-stat__k\">Season<\/div>\n <div class=\"mini-stat__v\">AW<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"formula-card__foot\">\n <span>Share your formula \u00b7 <strong>#myperfumia<\/strong><\/span>\n <a href=\"#decoder\" class=\"btn-pill\">\n Build my DNA\n <svg class=\"rtl-flip\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"from-love section-padded\">\n <div class=\"from-love__clouds\">\n <div class=\"from-love__cloud from-love__cloud--1\"><\/div>\n <div class=\"from-love__cloud from-love__cloud--2\"><\/div>\n \n <img decoding=\"async\" src=\"\" alt=\"\" class=\"from-love__bg-img\" \/>\n <\/div>\n\n <div class=\"perfumia-container from-love__content\">\n <div class=\"from-love__head\">\n <div>\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:0.75rem;\">Reverse discovery<\/div>\n <h2 class=\"from-love__title\">\n Love your shampoo?<br \/><em>There's a perfume for that.<\/em>\n <\/h2>\n <\/div>\n <p class=\"body-text from-love__body\">\n The scents you gravitate toward \u2014 in your hair mask, your body lotion, the candle burning by your bath \u2014 aren't random. They're data. Tell us what you love, we'll find the fragrance hiding inside it.\n <\/p>\n <\/div>\n\n <div class=\"match-grid\">\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22a8 8 0 0 0 8-8c0-3.5-2-6-5-8s-3-4-3-4-0 2-3 4-5 4.5-5 8a8 8 0 0 0 8 8Z\"\/><\/svg>\n <div class=\"match-card__tag\">Your shampoo<\/div>\n <div class=\"match-card__title\">Coco & Eve masks<\/div>\n <div class=\"match-card__match\">\u2192 Solar coconut, tiar\u00e9, warm vanilla<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 20A7 7 0 0 1 9.8 6.6C11.6 4.8 14 4 16 4a7 7 0 0 1 0 14Z\"\/><path d=\"M12 4v16\"\/><\/svg>\n <div class=\"match-card__tag\">Your skincare<\/div>\n <div class=\"match-card__title\">Sol de Janeiro 62<\/div>\n <div class=\"match-card__match\">\u2192 Salted pistachio, caramel, jasmine<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-2.072-2.143-3-4-.928 1.857-1.928 1.857-3 4-.5 1-1 1.62-1 3a2.5 2.5 0 0 0 2.5 2.5Z\"\/><path d=\"M12.5 18.5a2.5 2.5 0 0 0 2.5-2.5c0-1.38-.5-2-1-3-1.072-2.143-2.072-2.143-3-4-.928 1.857-1.928 1.857-3 4-.5 1-1 1.62-1 3a2.5 2.5 0 0 0 2.5 2.5Z\"\/><\/svg>\n <div class=\"match-card__tag\">Your candle<\/div>\n <div class=\"match-card__title\">Diptyque Baies<\/div>\n <div class=\"match-card__match\">\u2192 Blackcurrant leaf, Bulgarian rose<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H5.5a2.5 2.5 0 1 1 1.8-4.3\"\/><path d=\"M4 12h16\"\/><path d=\"M6 12v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-5\"\/><\/svg>\n <div class=\"match-card__tag\">Your laundry<\/div>\n <div class=\"match-card__title\">Le Labo Rose 31<\/div>\n <div class=\"match-card__match\">\u2192 Cumin, cedar, rose absolute<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"also-tags\">\n <span>Also try:<\/span>\n <span>Your favorite lipbalm<\/span>\n <span>That hotel lobby<\/span>\n <span>Your ex's hoodie<\/span>\n <span>Grandma's linen closet<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"decoder section-padded\" id=\"decoder\">\n <div class=\"decoder__clouds\" aria-hidden=\"true\">\n <div class=\"decoder__cloud decoder__cloud--1\"><\/div>\n <div class=\"decoder__cloud decoder__cloud--2\"><\/div>\n <div class=\"decoder__cloud decoder__cloud--3\"><\/div>\n <\/div>\n\n <div class=\"perfumia-container decoder__grid\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:1rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n The Decoder\n <\/div>\n <h2 class=\"decoder__title\">\n Three questions.<br \/><em>Your scent profile.<\/em>\n <\/h2>\n <p class=\"body-text\" style=\"margin-top:1.5rem;max-width:28rem;\">\n Our perfumers translate what you already love into an olfactory portrait \u2014 families, accords, and the notes that make you turn a head.\n <\/p>\n <\/div>\n\n <div class=\"quiz-card\">\n <div class=\"quiz-card__head\">\n <span>Step 1 of 3<\/span>\n <div class=\"quiz-card__progress\">\n <span class=\"active\"><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-card__body\">\n <div class=\"quiz-card__q\">Name a perfume you wear on repeat.<\/div>\n <input type=\"text\" class=\"quiz-card__input\" placeholder=\"e.g. Baccarat Rouge 540\" \/>\n <div class=\"quiz-card__actions\">\n <button class=\"quiz-card__back\" disabled>\u2190 Back<\/button>\n <button class=\"btn-filled\">\n Continue\n <svg class=\"rtl-flip\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"products section-padded\" id=\"products\">\n <div class=\"perfumia-container\">\n <div class=\"products__head\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:0.75rem;\">The Collection<\/div>\n <h2 class=\"products__title\">Curated this season<\/h2>\n <\/div>\n <a href=\"#\" class=\"link-underline\">View all 180 \u2192<\/a>\n <\/div>\n\n <div class=\"product-grid\">\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Ombre d'Ambre image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Ombre d'Ambre\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac245<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Maison Lior<\/div>\n <h3 class=\"product-card__name\">Ombre d'Ambre<\/h3>\n <div class=\"product-card__family\">Amber \u00b7 Woody<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac245<\/div>\n <\/div>\n <div class=\"product-card__notes\">Labdanum, Sandalwood, Vanilla Bourbon<\/div>\n <\/article>\n\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Rose Cendr\u00e9e image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Rose Cendr\u00e9e\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac198<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Atelier Noir<\/div>\n <h3 class=\"product-card__name\">Rose Cendr\u00e9e<\/h3>\n <div class=\"product-card__family\">Floral \u00b7 Chypre<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac198<\/div>\n <\/div>\n <div class=\"product-card__notes\">Turkish Rose, Pink Pepper, Patchouli<\/div>\n <\/article>\n\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Foin Coup\u00e9 image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Foin Coup\u00e9\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac165<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Studio V\u00e9tiver<\/div>\n <h3 class=\"product-card__name\">Foin Coup\u00e9<\/h3>\n <div class=\"product-card__family\">Aromatic \u00b7 Green<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac165<\/div>\n <\/div>\n <div class=\"product-card__notes\">Hay Absolute, Fig Leaf, Vetiver<\/div>\n <\/article>\n\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Solaire 1974 image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Solaire 1974\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac220<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Maison Lior<\/div>\n <h3 class=\"product-card__name\">Solaire 1974<\/h3>\n <div class=\"product-card__family\">Oriental \u00b7 Solar<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac220<\/div>\n <\/div>\n <div class=\"product-card__notes\">Neroli, Benzoin, Tobacco Leaf<\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"families section-padded\" id=\"families\">\n <div class=\"perfumia-container\">\n <div class=\"families__head\">\n <div>\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:0.75rem;\">Olfactory Families<\/div>\n <h2 class=\"families__title\">What are you naturally drawn to?<\/h2>\n <\/div>\n <p class=\"body-text families__body\">\n Six families. One vocabulary for the feeling you're chasing. Tap a family \u2014 we'll pull the notes, the mood, and the bottles that live there.\n <\/p>\n <\/div>\n\n <div class=\"family-grid\">\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--peach),var(--rose));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 9c4 5 7 9 7 13a7 7 0 1 1-14 0c0-4 3-8 7-13z\"\/><path d=\"M20 17c2 2 3 4 3 6\" opacity=\"0.55\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Amber<\/div>\n <div class=\"family-card__desc\">Warmth, resin, dusk on skin.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">34<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--sand),var(--plum));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c-4 2-7 5-7 9 0 3 2 6 4 7 1-2 3-3 3-5 0 2 2 3 3 5 2-1 4-4 4-7 0-4-3-7-7-9z\"\/><path d=\"M20 12v18\" opacity=\"0.55\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Chypre<\/div>\n <div class=\"family-card__desc\">Oakmoss, bergamot, structured shadow.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">22<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--blush),var(--rose));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"2.4\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(0 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(72 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(144 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(216 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(288 20 20)\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Floral<\/div>\n <div class=\"family-card__desc\">From white petals to smoked rose.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">61<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--peach),var(--sand));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 30V13\"\/><path d=\"M20 14c-2-1-3-3-3-4M20 14c2-1 3-3 3-4\"\/><path d=\"M20 18c-3-1-4-3-4-5M20 18c3-1 4-3 4-5\"\/><path d=\"M20 22c-3-1-5-3-5-5M20 22c3-1 5-3 5-5\"\/><path d=\"M20 26c-3-1-4-3-4-5M20 26c3-1 4-3 4-5\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Aromatic<\/div>\n <div class=\"family-card__desc\">Herbaceous, cool, contemplative.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">28<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--sand),var(--plum));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"10\"\/><circle cx=\"20\" cy=\"20\" r=\"7\" opacity=\"0.75\"\/><circle cx=\"20\" cy=\"20\" r=\"4\" opacity=\"0.55\"\/><circle cx=\"20\" cy=\"20\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Woody<\/div>\n <div class=\"family-card__desc\">Sandalwood, cedar, quiet authority.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">45<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--blush),var(--peach));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 28c2-14 12-18 16-16 2 4-2 14-16 16z\"\/><path d=\"M14 26c3-10 9-13 13-13\" opacity=\"0.55\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Gourmand<\/div>\n <div class=\"family-card__desc\">Vanilla bourbon, tonka, salt caramel.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">19<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"creators section-padded\">\n <div class=\"perfumia-container\">\n <div class=\"creators__head\">\n <div>\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:0.75rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n The Circle \u00b7 On camera\n <\/div>\n <h2 class=\"creators__title\">\n Real people,<br \/><em>decoded on camera.<\/em>\n <\/h2>\n <\/div>\n <div>\n <p class=\"body-text creators__body\">\n A space reserved for our creator community. Real videos, real formulas \u2014 dropping alongside launch.\n <\/p>\n <a href=\"#\" class=\"link-underline\" style=\"margin-top:1.25rem;display:inline-flex;align-items:center;gap:0.5rem;\">\n Join the waitlist\n <svg class=\"rtl-flip\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"phone-grid\">\n \n <div class=\"phone-mock phone-mock--tilt-1\">\n <div class=\"phone-mock__frame\">\n <div class=\"phone-mock__screen\" style=\"background:linear-gradient(160deg,var(--blush),var(--peach) 55%,var(--rose));\">\n \n <div class=\"phone-mock__notch\"><\/div>\n <div class=\"phone-mock__bloom\"><\/div>\n <div class=\"phone-mock__play\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n <\/div>\n <div class=\"phone-mock__label\">\n <span>Creator<\/span>\n <span>Coming soon<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"phone-mock\">\n <div class=\"phone-mock__frame\">\n <div class=\"phone-mock__screen\" style=\"background:linear-gradient(160deg,var(--sand),var(--blush) 55%,var(--peach));\">\n \n <div class=\"phone-mock__notch\"><\/div>\n <div class=\"phone-mock__bloom\"><\/div>\n <div class=\"phone-mock__play\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n <\/div>\n <div class=\"phone-mock__label\">\n <span>Creator<\/span>\n <span>Coming soon<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"phone-mock phone-mock--tilt-3\">\n <div class=\"phone-mock__frame\">\n <div class=\"phone-mock__screen\" style=\"background:linear-gradient(160deg,var(--peach),var(--rose) 60%,var(--plum));\">\n \n <div class=\"phone-mock__notch\"><\/div>\n <div class=\"phone-mock__bloom\"><\/div>\n <div class=\"phone-mock__play\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n <\/div>\n <div class=\"phone-mock__label\">\n <span>Creator<\/span>\n <span>Coming soon<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"voices section-padded\">\n <div class=\"perfumia-container\">\n <div class=\"voices__head\">\n <div>\n <div class=\"eyebrow eyebrow-peach\" style=\"margin-bottom:0.75rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n The Perfumia Circle\n <\/div>\n <h2 class=\"voices__title\">\n 42,000 formulas.<br \/><em>One community.<\/em>\n <\/h2>\n <\/div>\n <div class=\"voices__rating\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <span>4.9 \u00b7 8,200 reviews<\/span>\n <\/div>\n <\/div>\n\n <div class=\"voice-grid\">\n <article class=\"voice-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z\"\/><path d=\"M16 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z\"\/><path d=\"M10 3H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\"\/><path d=\"M10 13H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z\"\/><\/svg>\n <p class=\"voice-card__quote\">\"I finally understand why I've been re-buying the same three candles for years. It's iso E super. Mind blown.\"<\/p>\n <div class=\"voice-card__formula\">\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Musk<\/span><span>48%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:48%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Iso E Super<\/span><span>30%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:30%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Ambroxan<\/span><span>22%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:22%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"voice-card__author\">\n \n <div class=\"voice-card__avatar\" aria-label=\"Amelia Chen avatar placeholder\"><\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"voice-card__name\">Amelia Chen<\/div>\n <div class=\"voice-card__handle\">@ameliascents \u00b7 412k<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"voice-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z\"\/><path d=\"M16 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z\"\/><path d=\"M10 3H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\"\/><path d=\"M10 13H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z\"\/><\/svg>\n <p class=\"voice-card__quote\">\"My scent DNA card is literally my personality in a chart. I made it my Instagram header.\"<\/p>\n <div class=\"voice-card__formula\">\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Neroli<\/span><span>40%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:40%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Fig Leaf<\/span><span>34%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:34%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Vetiver<\/span><span>26%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:26%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"voice-card__author\">\n \n <div class=\"voice-card__avatar\" aria-label=\"Jordan Rae avatar placeholder\"><\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"voice-card__name\">Jordan Rae<\/div>\n <div class=\"voice-card__handle\">@jordanwears \u00b7 1.2M<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"voice-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z\"\/><path d=\"M16 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z\"\/><path d=\"M10 3H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\"\/><path d=\"M10 13H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z\"\/><\/svg>\n <p class=\"voice-card__quote\">\"Perfumia found me a \u20ac70 dupe of a discontinued Serge Lutens. From describing my hair conditioner.\"<\/p>\n <div class=\"voice-card__formula\">\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Rose<\/span><span>52%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:52%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Oud<\/span><span>28%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:28%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Saffron<\/span><span>20%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:20%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"voice-card__author\">\n \n <div class=\"voice-card__avatar\" aria-label=\"Sasha Petrova avatar placeholder\"><\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"voice-card__name\">Sasha Petrova<\/div>\n <div class=\"voice-card__handle\">@nosewithsasha \u00b7 289k<\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n\n <div class=\"trust-grid\">\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">42k<\/div>\n <div class=\"trust-stat__k\">DNA profiles<\/div>\n <\/div>\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">180+<\/div>\n <div class=\"trust-stat__k\">Curated houses<\/div>\n <\/div>\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">94%<\/div>\n <div class=\"trust-stat__k\">Match rate<\/div>\n <\/div>\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">4.9\u2605<\/div>\n <div class=\"trust-stat__k\">Community rated<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"journal section-padded\" id=\"community\">\n <div class=\"perfumia-container\">\n <div class=\"journal__head\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:0.75rem;\">The Journal<\/div>\n <h2 class=\"journal__title\">From the community.<\/h2>\n <\/div>\n <\/div>\n\n <div class=\"journal-grid\">\n <a href=\"#\" class=\"journal-card\">\n <div class=\"journal-card__tag\">Journal<\/div>\n <h3 class=\"journal-card__title\">On wearing tuberose in November<\/h3>\n <div class=\"journal-card__author\">Elle M.<\/div>\n <\/a>\n <a href=\"#\" class=\"journal-card\">\n <div class=\"journal-card__tag\">Perfumer<\/div>\n <h3 class=\"journal-card__title\">Inside the atelier of Studio V\u00e9tiver<\/h3>\n <div class=\"journal-card__author\">Perfumia Editors<\/div>\n <\/a>\n <a href=\"#\" class=\"journal-card\">\n <div class=\"journal-card__tag\">Review<\/div>\n <h3 class=\"journal-card__title\">Six ambers, decoded side by side<\/h3>\n <div class=\"journal-card__author\">Nadia R.<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"newsletter section-padded\">\n <div class=\"newsletter__bg\">\n \n <img decoding=\"async\" src=\"\" alt=\"\" \/>\n <\/div>\n\n <div class=\"perfumia-container newsletter__content\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:1rem;color:color-mix(in oklch,var(--background) 60%,transparent);\">Correspondence<\/div>\n <h2 class=\"newsletter__title\">Letters from the atelier.<\/h2>\n <\/div>\n <form class=\"newsletter__form\" onsubmit=\"event.preventDefault();\">\n <div class=\"newsletter__field\">\n <input type=\"email\" required class=\"newsletter__input\" placeholder=\"your@address.com\" \/>\n <button type=\"submit\" class=\"newsletter__submit\">Subscribe \u2192<\/button>\n <\/div>\n <p class=\"newsletter__note\">One dispatch monthly. New releases, perfumer interviews, the occasional private sample.<\/p>\n <\/form>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"footer section-padded\" style=\"padding-block:3rem 1.5rem;\">\n <div class=\"perfumia-container\">\n <div class=\"footer__grid\">\n <div class=\"footer__brand\">\n <div class=\"footer__logo\">Perfumia<\/div>\n <p class=\"footer__tagline\">Beauty-tech for people who wear their scent like a signature.<\/p>\n <\/div>\n <div>\n <div class=\"footer__col-title\">House<\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#\">Our story<\/a><\/li>\n <li><a href=\"#\">Perfumers<\/a><\/li>\n <li><a href=\"#\">Atelier visits<\/a><\/li>\n <li><a href=\"#\">Press<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer__col-title\">Shop<\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#\">New arrivals<\/a><\/li>\n <li><a href=\"#\">The collection<\/a><\/li>\n <li><a href=\"#\">Discovery sets<\/a><\/li>\n <li><a href=\"#\">Gift cards<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer__col-title\">Care<\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#\">Shipping<\/a><\/li>\n <li><a href=\"#\">Returns<\/a><\/li>\n <li><a href=\"#\">Contact<\/a><\/li>\n <li><a href=\"#\">FAQ<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"footer__bottom\">\n <div>\u00a9 2026 Perfumia \u00b7 Beauty-tech fragrance discovery<\/div>\n <div class=\"footer__legal\">\n <a href=\"#\">Privacy<\/a>\n <a href=\"#\">Terms<\/a>\n <a href=\"#\">Instagram<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n (function () {\n const header = document.getElementById('perfumia-header');\n function onScroll () {\n header.classList.toggle('scrolled', window.scrollY > 12);\n }\n onScroll();\n window.addEventListener('scroll', onScroll, { passive: true });\n })();\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Perfumia \u2014 Find yourself in a scent Discover Collection Families Journal Perfumia \u05e2\u05d1 2 Your scent, decoded Find yourselfin a scent. Perfumia decodes the products you already love \u2014 your shampoo, your candle, that lotion you keep re-buying \u2014 into a fragrance that finally smells like you. Begin the decoder Shop the collection 180+ Houses […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-228","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":16,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages\/228\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages\/228\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/media?parent=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Perfumia \u2014 Find yourself in a scent<\/title>\n <meta name=\"description\" content=\"Perfumia decodes the products you already love into a fragrance that finally smells like you.\" \/>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Serif:ital@0;1&family=Work+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* --------------------------------------------------------------------------\n PERFUMIA \u2014 Elementor-ready homepage HTML\/CSS\n How to use in Elementor:\n - Create a new page.\n - Add an HTML widget for each marked SECTION block, OR paste the whole file\n into one HTML widget (recommended for the first draft).\n - Replace every PERFUMIA_IMAGE_PLACEHOLDER \/ PERFUMIA_VIDEO_PLACEHOLDER\n with your final media URLs.\n - For RTL\/Hebrew: change <html lang=\"en\" dir=\"ltr\"> to lang=\"he\" dir=\"rtl\"\n and load Hebrew fonts.\n -------------------------------------------------------------------------- *\/\n\n :root {\n --radius: 0.25rem;\n --font-serif: \"Instrument Serif\", ui-serif, Georgia, serif;\n --font-sans: \"Work Sans\", ui-sans-serif, system-ui, sans-serif;\n\n \/* oklch colour tokens \u2014 same as the React build *\/\n --background: oklch(0.975 0.012 85);\n --foreground: oklch(0.20 0.02 40);\n --card: oklch(0.985 0.008 85);\n --muted-foreground: oklch(0.48 0.03 55);\n --accent: oklch(0.78 0.11 25);\n --blush: oklch(0.92 0.045 20);\n --peach: oklch(0.86 0.09 55);\n --rose: oklch(0.72 0.13 15);\n --sand: oklch(0.90 0.03 75);\n --plum: oklch(0.38 0.06 20);\n --border: oklch(0.88 0.015 75);\n --secondary: oklch(0.93 0.018 80);\n }\n\n * { box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n margin: 0;\n font-family: var(--font-sans);\n font-weight: 300;\n background: var(--background);\n color: var(--foreground);\n -webkit-font-smoothing: antialiased;\n line-height: 1.5;\n }\n\n h1, h2, h3, .font-serif {\n font-family: var(--font-serif);\n font-weight: 400;\n letter-spacing: -0.01em;\n margin: 0;\n }\n\n a { color: inherit; text-decoration: none; }\n img, video { max-width: 100%; display: block; }\n\n \/* RTL helpers *\/\n [dir=\"rtl\"] { letter-spacing: 0; }\n [dir=\"rtl\"] h1, [dir=\"rtl\"] h2, [dir=\"rtl\"] h3, [dir=\"rtl\"] .font-serif { letter-spacing: 0; }\n [dir=\"rtl\"] .rtl-flip { transform: scaleX(-1); }\n\n \/* Container *\/\n .perfumia-container {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding-inline: 1.25rem;\n }\n @media (min-width: 640px) { .perfumia-container { padding-inline: 1.5rem; } }\n @media (min-width: 1024px) { .perfumia-container { padding-inline: 2.5rem; } }\n\n \/* Utility text *\/\n .eyebrow {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n .eyebrow-rose { color: var(--rose); }\n .eyebrow-peach { color: var(--peach); }\n\n .body-text {\n color: var(--muted-foreground);\n line-height: 1.7;\n }\n\n .link-underline {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n text-decoration: underline;\n text-underline-offset: 8px;\n text-decoration-color: var(--accent);\n }\n\n \/* CTA buttons *\/\n .lux-cta {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n overflow: hidden;\n border: 1px solid var(--foreground);\n padding: 0.875rem 1.5rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--foreground);\n transition: color 0.5s ease;\n isolation: isolate;\n }\n .lux-cta::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--plum);\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.5s ease;\n z-index: -1;\n }\n .lux-cta:hover { color: var(--background); }\n .lux-cta:hover::before { transform: scaleX(1); }\n .lux-cta svg { transition: transform 0.5s ease; }\n .lux-cta:hover svg { transform: translateX(4px); }\n [dir=\"rtl\"] .lux-cta::before { transform-origin: right; }\n [dir=\"rtl\"] .lux-cta:hover svg { transform: translateX(-4px); }\n\n .btn-filled {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: var(--foreground);\n color: var(--background);\n padding: 0.75rem 1.25rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n border: none;\n cursor: pointer;\n transition: background 0.3s ease;\n }\n .btn-filled:hover { background: var(--plum); }\n\n .btn-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 9999px;\n background: var(--foreground);\n color: var(--background);\n padding: 0.625rem 1.25rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n transition: background 0.3s ease;\n }\n .btn-pill:hover { background: var(--plum); }\n\n \/* Placeholder media boxes *\/\n .media-placeholder {\n background: var(--secondary);\n border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);\n position: relative;\n }\n .media-placeholder img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0;\n }\n\n \/* Section spacing *\/\n .section-padded { padding-block: 4rem; }\n @media (min-width: 640px) { .section-padded { padding-block: 6rem; } }\n @media (min-width: 1024px) { .section-padded { padding-block: 9rem; } }\n\n \/* --------------------------------------------------------------------------\n SECTION: Header\n -------------------------------------------------------------------------- *\/\n .perfumia-header {\n position: sticky;\n top: 0;\n z-index: 40;\n border-bottom: 1px solid transparent;\n background: color-mix(in oklch, var(--background) 40%, transparent);\n backdrop-filter: blur(12px);\n transition: all 0.3s ease;\n }\n .perfumia-header.scrolled {\n border-bottom-color: color-mix(in oklch, var(--border) 60%, transparent);\n background: color-mix(in oklch, var(--background) 75%, transparent);\n backdrop-filter: blur(24px);\n }\n .perfumia-header__inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding-block: 1rem;\n transition: padding 0.3s ease;\n }\n .perfumia-header.scrolled .perfumia-header__inner { padding-block: 0.75rem; }\n .perfumia-header__nav {\n display: none;\n align-items: center;\n gap: 2rem;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n }\n @media (min-width: 1024px) { .perfumia-header__nav { display: flex; } }\n .perfumia-header__nav a:hover { color: var(--foreground); }\n .perfumia-header__logo { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: -0.02em; }\n .perfumia-header__tools {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--muted-foreground);\n }\n .perfumia-header__tools button { background: none; border: none; cursor: pointer; padding: 0; }\n .perfumia-header__tools svg { width: 16px; height: 16px; }\n .lang-toggle {\n border: 1px solid var(--border);\n border-radius: 9999px;\n padding: 0.25rem 0.75rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n background: transparent;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .lang-toggle:hover { border-color: var(--foreground); color: var(--foreground); }\n .cart-btn { position: relative; }\n .cart-badge {\n position: absolute;\n inset-inline-end: -8px;\n top: -8px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--foreground);\n color: var(--background);\n font-size: 10px;\n display: grid;\n place-items: center;\n }\n .mobile-menu-btn { display: block; background: none; border: none; cursor: pointer; }\n @media (min-width: 1024px) { .mobile-menu-btn { display: none; } }\n\n \/* --------------------------------------------------------------------------\n SECTION: Hero\n -------------------------------------------------------------------------- *\/\n .hero { position: relative; overflow: hidden; padding-bottom: 6rem; padding-top: 2.5rem; }\n @media (min-width: 1024px) { .hero { padding-bottom: 8rem; padding-top: 4rem; } }\n\n .hero__clouds {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: -1;\n overflow: hidden;\n }\n .hero__cloud {\n position: absolute;\n border-radius: 50%;\n filter: blur(120px);\n opacity: 0.6;\n }\n .hero__cloud--1 {\n width: 36rem; height: 36rem;\n top: -10rem; left: -8rem;\n background: linear-gradient(135deg, var(--blush), var(--peach));\n }\n .hero__cloud--2 {\n width: 38rem; height: 38rem;\n bottom: -10rem; right: -8rem;\n background: linear-gradient(135deg, var(--sand), var(--rose));\n }\n [dir=\"rtl\"] .hero__cloud--1 { left: auto; right: -8rem; }\n [dir=\"rtl\"] .hero__cloud--2 { right: auto; left: -8rem; }\n\n .hero__grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 3rem;\n }\n @media (min-width: 1024px) { .hero__grid { grid-template-columns: 5fr 7fr; gap: 5rem; } }\n\n .hero__badge {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);\n background: color-mix(in oklch, var(--blush) 60%, transparent);\n border-radius: 9999px;\n padding: 0.375rem 1rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.22em;\n color: var(--plum);\n margin-bottom: 1.5rem;\n }\n .hero__title {\n font-size: 3rem;\n line-height: 1.02;\n }\n @media (min-width: 640px) { .hero__title { font-size: 3.75rem; } }\n @media (min-width: 1024px) { .hero__title { font-size: 5.5rem; } }\n .hero__title em { color: var(--rose); font-style: italic; }\n .hero__body { margin-top: 2.5rem; max-width: 28rem; }\n .hero__ctas { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }\n\n .hero__stats {\n margin-top: 5rem;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n border-top: 1px solid var(--border);\n padding-top: 2.5rem;\n }\n .stat__n { font-family: var(--font-serif); font-size: 1.5rem; }\n @media (min-width: 640px) { .stat__n { font-size: 1.875rem; } }\n .stat__k {\n margin-top: 0.25rem;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n }\n @media (min-width: 640px) { .stat__k { font-size: 10px; letter-spacing: 0.2em; } }\n\n .hero__visual { position: relative; }\n .hero__image-wrap {\n aspect-ratio: 4 \/ 5;\n border-radius: var(--radius);\n }\n .hero__dna-card {\n margin-top: 1.25rem;\n width: 100%;\n border-radius: 1rem;\n border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);\n background: color-mix(in oklch, var(--background) 90%, transparent);\n padding: 1.25rem;\n font-size: 12px;\n backdrop-filter: blur(12px);\n box-shadow: 0 20px 50px -20px rgba(120, 50, 50, 0.25);\n }\n @media (min-width: 640px) {\n .hero__dna-card {\n position: absolute;\n bottom: 1.5rem;\n right: 1.5rem;\n width: 240px;\n margin-top: 0;\n }\n }\n @media (min-width: 1024px) { .hero__dna-card { bottom: 2rem; right: 2rem; width: 260px; } }\n [dir=\"rtl\"] .hero__dna-card { right: auto; left: 1.5rem; }\n @media (min-width: 1024px) { [dir=\"rtl\"] .hero__dna-card { left: 2rem; } }\n\n .dna-card__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n }\n .dna-card__match {\n border-radius: 9999px;\n background: var(--blush);\n padding: 0.125rem 0.5rem;\n font-size: 9px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--rose);\n }\n .formula-bar { margin-bottom: 0.5rem; }\n .formula-bar__row {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 0.5rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n margin-bottom: 0.25rem;\n }\n .formula-bar__track {\n height: 4px;\n width: 100%;\n border-radius: 9999px;\n background: var(--secondary);\n overflow: hidden;\n }\n .formula-bar__fill {\n height: 100%;\n border-radius: 9999px;\n background: linear-gradient(90deg, var(--peach), var(--rose));\n }\n .dna-card__name {\n margin-top: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 0.75rem;\n font-family: var(--font-serif);\n font-size: 1rem;\n font-style: italic;\n }\n\n \/* --------------------------------------------------------------------------\n SECTION: Scent DNA\n -------------------------------------------------------------------------- *\/\n .scent-dna {\n position: relative;\n overflow: hidden;\n background: linear-gradient(180deg, var(--background), color-mix(in oklch, var(--blush) 40%, transparent), var(--background));\n }\n .scent-dna__bg {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .scent-dna__bg img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.1;\n mix-blend-mode: multiply;\n }\n .scent-dna__grid {\n position: relative;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n @media (min-width: 1024px) { .scent-dna__grid { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }\n\n .scent-dna__title { font-size: 1.875rem; line-height: 1.08; }\n @media (min-width: 640px) { .scent-dna__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .scent-dna__title { font-size: 3.75rem; } }\n .scent-dna__title em { color: var(--rose); font-style: italic; }\n\n .tag-pill {\n display: inline-block;\n border: 1px solid color-mix(in oklch, var(--rose) 30%, transparent);\n background: var(--background);\n border-radius: 9999px;\n padding: 0.375rem 1rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--plum);\n }\n\n .formula-card {\n border-radius: 1.5rem;\n border: 1px solid var(--border);\n background: var(--background);\n padding: 1.5rem;\n box-shadow: 0 30px 80px -40px rgba(120, 50, 50, 0.35);\n }\n @media (min-width: 640px) { .formula-card { padding: 2rem; } }\n @media (min-width: 1024px) { .formula-card { padding: 3rem; } }\n\n .formula-card__head {\n display: flex;\n flex-wrap: wrap;\n align-items: start;\n justify-content: space-between;\n gap: 1rem;\n border-bottom: 1px solid var(--border);\n padding-bottom: 1.25rem;\n }\n .formula-card__label {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n .formula-card__value {\n margin-top: 0.25rem;\n font-family: var(--font-serif);\n font-size: 1.25rem;\n }\n @media (min-width: 640px) { .formula-card__value { font-size: 1.5rem; } }\n .formula-card__value--rose { color: var(--rose); font-style: italic; }\n\n .formula-card__body {\n margin-top: 2rem;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n @media (min-width: 640px) { .formula-card__body { grid-template-columns: 2fr 3fr; gap: 2.5rem; } }\n\n .donut {\n position: relative;\n aspect-ratio: 1 \/ 1;\n width: 100%;\n max-width: 240px;\n margin-inline: auto;\n border-radius: 50%;\n background: conic-gradient(\n var(--rose) 0 42%,\n var(--peach) 42% 70%,\n var(--sand) 70% 88%,\n var(--plum) 88% 100%\n );\n }\n @media (min-width: 640px) { .donut { max-width: none; } }\n .donut__hole {\n position: absolute;\n inset: 1.25rem;\n border-radius: 50%;\n background: var(--background);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 0.5rem;\n }\n @media (min-width: 640px) { .donut__hole { inset: 1.5rem; } }\n .donut__match { font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--muted-foreground); }\n .donut__pct { font-family: var(--font-serif); font-size: 1.875rem; }\n @media (min-width: 640px) { .donut__pct { font-size: 2.25rem; } }\n .donut__name { margin-top: 0.25rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--rose); }\n @media (min-width: 640px) { .donut__name { font-size: 10px; letter-spacing: 0.18em; } }\n\n .mini-stats {\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.5rem;\n border-top: 1px solid var(--border);\n padding-top: 1.25rem;\n text-align: center;\n }\n .mini-stat__k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }\n @media (min-width: 640px) { .mini-stat__k { letter-spacing: 0.2em; } }\n .mini-stat__v { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1rem; }\n @media (min-width: 640px) { .mini-stat__v { font-size: 1.125rem; } }\n\n .formula-card__foot {\n margin-top: 2rem;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 1.5rem;\n }\n .formula-card__foot span { font-size: 12px; color: var(--muted-foreground); }\n .formula-card__foot span strong { color: var(--rose); font-weight: 400; }\n\n \/* --------------------------------------------------------------------------\n SECTION: From What You Love (Reverse Discovery)\n -------------------------------------------------------------------------- *\/\n .from-love { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: var(--background); }\n .from-love__clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\n .from-love__cloud {\n position: absolute;\n border-radius: 50%;\n filter: blur(130px);\n }\n .from-love__cloud--1 {\n width: 34rem; height: 34rem;\n top: -10rem; right: -6rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--blush) 70%, transparent), color-mix(in oklch, var(--peach) 40%, transparent));\n }\n .from-love__cloud--2 {\n width: 36rem; height: 36rem;\n bottom: -10rem; left: -8rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--sand) 60%, transparent), color-mix(in oklch, var(--rose) 25%, transparent));\n }\n [dir=\"rtl\"] .from-love__cloud--1 { right: auto; left: -6rem; }\n [dir=\"rtl\"] .from-love__cloud--2 { left: auto; right: -8rem; }\n .from-love__bg-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.09;\n mix-blend-mode: multiply;\n }\n .from-love__content { position: relative; z-index: 1; }\n\n .from-love__head {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n margin-bottom: 3rem;\n }\n @media (min-width: 1024px) { .from-love__head { grid-template-columns: 1fr 1fr; gap: 2rem; } }\n .from-love__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .from-love__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .from-love__title { font-size: 3.75rem; } }\n .from-love__title em { color: var(--rose); font-style: italic; }\n .from-love__body { max-width: 28rem; }\n @media (min-width: 1024px) { .from-love__body { margin-top: 1.5rem; } }\n\n .match-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n @media (min-width: 640px) { .match-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }\n @media (min-width: 1024px) { .match-grid { grid-template-columns: repeat(4, 1fr); } }\n\n .match-card {\n position: relative;\n overflow: hidden;\n border-radius: 1rem;\n border: 1px solid var(--border);\n background: linear-gradient(135deg, color-mix(in oklch, var(--blush) 40%, transparent), var(--background), color-mix(in oklch, var(--sand) 40%, transparent));\n padding: 1.25rem;\n transition: border-color 0.3s ease, transform 0.3s ease;\n }\n .match-card:hover { border-color: color-mix(in oklch, var(--rose) 50%, transparent); transform: translateY(-4px); }\n .match-card svg { width: 24px; height: 24px; color: var(--rose); }\n .match-card__tag {\n margin-top: 1.5rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .match-card__title { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; }\n @media (min-width: 640px) { .match-card__title { font-size: 1.5rem; } }\n .match-card__match {\n margin-top: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 0.75rem;\n font-size: 12px;\n font-style: italic;\n color: var(--muted-foreground);\n }\n .match-card__cta {\n margin-top: 1.25rem;\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--rose);\n }\n .match-card__cta svg { width: 12px; height: 12px; transition: transform 0.3s ease; }\n .match-card:hover .match-card__cta svg { transform: translateX(4px); }\n\n .also-tags {\n margin-top: 2.5rem;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .also-tags span {\n border: 1px solid var(--border);\n background: var(--background);\n border-radius: 9999px;\n padding: 0.25rem 0.75rem;\n transition: all 0.2s ease;\n }\n .also-tags span:hover { border-color: var(--rose); color: var(--rose); }\n\n \/* --------------------------------------------------------------------------\n SECTION: The Decoder\n -------------------------------------------------------------------------- *\/\n .decoder {\n position: relative;\n overflow: hidden;\n border-top: 1px solid var(--border);\n border-bottom: 1px solid var(--border);\n background: var(--secondary);\n }\n .decoder__clouds {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n z-index: 0;\n }\n .decoder__cloud {\n position: absolute;\n border-radius: 50%;\n filter: blur(110px);\n opacity: 0.7;\n animation: pulse 9s ease-in-out infinite;\n }\n .decoder__cloud--1 {\n width: 28rem; height: 28rem;\n top: -6rem; left: -6rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--peach) 70%, transparent), color-mix(in oklch, var(--rose) 40%, transparent));\n }\n .decoder__cloud--2 {\n width: 32rem; height: 32rem;\n bottom: -8rem; right: -6rem;\n background: linear-gradient(135deg, color-mix(in oklch, var(--blush) 80%, transparent), color-mix(in oklch, var(--sand) 50%, transparent));\n animation-duration: 12s;\n }\n .decoder__cloud--3 {\n width: 20rem; height: 20rem;\n top: 33%; right: 25%;\n background: linear-gradient(135deg, color-mix(in oklch, var(--sand) 50%, transparent), color-mix(in oklch, var(--plum) 20%, transparent));\n animation-duration: 14s;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 0.55; transform: scale(1); }\n 50% { opacity: 0.75; transform: scale(1.05); }\n }\n\n .decoder__grid {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n @media (min-width: 1024px) { .decoder__grid { grid-template-columns: 4fr 8fr; gap: 2.5rem; } }\n\n .decoder__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .decoder__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .decoder__title { font-size: 3rem; } }\n .decoder__title em { color: var(--accent); font-style: italic; }\n\n .quiz-card {\n border-radius: var(--radius);\n border: 1px solid var(--border);\n background: var(--background);\n box-shadow: 0 40px 80px -50px rgba(120, 50, 50, 0.35);\n }\n .quiz-card__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border-bottom: 1px solid var(--border);\n padding: 1rem 1.25rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.22em;\n color: var(--muted-foreground);\n }\n @media (min-width: 640px) { .quiz-card__head { padding: 1rem 1.5rem; letter-spacing: 0.24em; } }\n .quiz-card__progress { display: flex; gap: 0.25rem; }\n .quiz-card__progress span { width: 24px; height: 1px; background: var(--border); }\n @media (min-width: 640px) { .quiz-card__progress span { width: 40px; } }\n .quiz-card__progress span.active { background: var(--accent); }\n\n .quiz-card__body { padding: 1.5rem; }\n @media (min-width: 640px) { .quiz-card__body { padding: 2rem; } }\n @media (min-width: 1024px) { .quiz-card__body { padding: 3rem; } }\n\n .quiz-card__q {\n font-family: var(--font-serif);\n font-size: 1.25rem;\n line-height: 1.3;\n }\n @media (min-width: 640px) { .quiz-card__q { font-size: 1.5rem; } }\n @media (min-width: 1024px) { .quiz-card__q { font-size: 1.875rem; } }\n\n .quiz-card__input {\n width: 100%;\n margin-top: 1.5rem;\n border: none;\n border-bottom: 1px solid var(--border);\n background: transparent;\n padding-bottom: 0.75rem;\n font-family: var(--font-serif);\n font-size: 1.125rem;\n font-style: italic;\n outline: none;\n color: var(--foreground);\n }\n @media (min-width: 640px) { .quiz-card__input { margin-top: 2rem; font-size: 1.25rem; } }\n .quiz-card__input::placeholder { color: color-mix(in oklch, var(--muted-foreground) 50%, transparent); }\n .quiz-card__input:focus { border-bottom-color: var(--accent); }\n\n .quiz-card__actions {\n margin-top: 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n }\n .quiz-card__back {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--muted-foreground);\n background: none;\n border: none;\n cursor: pointer;\n }\n .quiz-card__back:hover { color: var(--foreground); }\n .quiz-card__back:disabled { opacity: 0.3; cursor: not-allowed; }\n\n \/* --------------------------------------------------------------------------\n SECTION: Products\n -------------------------------------------------------------------------- *\/\n .products { border-top: 1px solid var(--border); background: var(--background); }\n .products__head {\n display: flex;\n flex-wrap: wrap;\n align-items: end;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 2.5rem;\n }\n @media (min-width: 640px) { .products__head { margin-bottom: 4rem; } }\n .products__title { font-size: 1.875rem; }\n @media (min-width: 640px) { .products__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .products__title { font-size: 3rem; } }\n\n .product-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem 1.5rem;\n }\n @media (min-width: 640px) { .product-grid { gap: 2rem 2.5rem; } }\n @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2.5rem; } }\n\n .product-card__media { position: relative; overflow: hidden; background: var(--secondary); }\n .product-card__media .media-placeholder { aspect-ratio: 4 \/ 5; }\n .product-card__wish {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n width: 36px;\n height: 36px;\n display: grid;\n place-items: center;\n background: color-mix(in oklch, var(--background) 80%, transparent);\n backdrop-filter: blur(8px);\n border: none;\n cursor: pointer;\n transition: background 0.2s ease;\n }\n [dir=\"rtl\"] .product-card__wish { right: auto; left: 0.75rem; }\n .product-card__wish:hover { background: var(--background); }\n .product-card__wish svg { width: 16px; height: 16px; }\n .product-card__add {\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n transform: translateY(100%);\n background: var(--foreground);\n color: var(--background);\n padding: 0.75rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n border: none;\n cursor: pointer;\n transition: transform 0.3s ease;\n }\n .product-card:hover .product-card__add { transform: translateY(0); }\n\n .product-card__info {\n margin-top: 1.25rem;\n display: flex;\n align-items: start;\n justify-content: space-between;\n gap: 0.75rem;\n }\n .product-card__house {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .product-card__name { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.2; }\n @media (min-width: 640px) { .product-card__name { font-size: 1.25rem; } }\n .product-card__family { margin-top: 0.25rem; font-size: 12px; color: var(--muted-foreground); }\n .product-card__price { flex-shrink: 0; font-family: var(--font-serif); font-size: 1rem; text-align: end; }\n @media (min-width: 640px) { .product-card__price { font-size: 1.125rem; } }\n .product-card__notes { margin-top: 0.5rem; font-size: 12px; font-style: italic; color: var(--muted-foreground); }\n\n \/* --------------------------------------------------------------------------\n SECTION: Scent Families\n -------------------------------------------------------------------------- *\/\n .families { border-top: 1px solid var(--border); background: var(--secondary); }\n .families__head {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n @media (min-width: 1024px) { .families__head { grid-template-columns: 1fr 1fr; } }\n .families__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .families__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .families__title { font-size: 3rem; } }\n .families__body { max-width: 28rem; }\n @media (min-width: 1024px) { .families__body { margin-top: 1rem; } }\n\n .family-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n @media (min-width: 640px) { .family-grid { grid-template-columns: 1fr 1fr; } }\n @media (min-width: 1024px) { .family-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .family-card {\n display: flex;\n align-items: center;\n gap: 1rem;\n border-radius: 1rem;\n border: 1px solid var(--border);\n background: var(--background);\n padding: 1.25rem;\n transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n }\n @media (min-width: 640px) { .family-card { gap: 1.25rem; padding: 1.5rem; } }\n .family-card:hover {\n transform: translateY(-4px);\n border-color: color-mix(in oklch, var(--rose) 40%, transparent);\n box-shadow: 0 20px 40px -25px rgba(120, 50, 50, 0.4);\n }\n .family-card__icon {\n flex-shrink: 0;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n color: var(--plum);\n transition: transform 0.5s ease;\n }\n .family-card:hover .family-card__icon { transform: rotate(8deg); }\n .family-card__name { font-family: var(--font-serif); font-size: 1.25rem; }\n @media (min-width: 640px) { .family-card__name { font-size: 1.5rem; } }\n .family-card__desc { margin-top: 0.25rem; font-size: 12px; color: var(--muted-foreground); }\n @media (min-width: 640px) { .family-card__desc { font-size: 14px; } }\n .family-card__meta {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: end;\n gap: 0.5rem;\n margin-inline-start: auto;\n }\n .family-card__count {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n .family-card__meta svg { width: 16px; height: 16px; color: var(--muted-foreground); transition: transform 0.3s ease, color 0.3s ease; }\n .family-card:hover .family-card__meta svg { transform: translateX(4px); color: var(--rose); }\n\n \/* --------------------------------------------------------------------------\n SECTION: Creator Phones\n -------------------------------------------------------------------------- *\/\n .creators {\n position: relative;\n overflow: hidden;\n background: linear-gradient(180deg, var(--background), color-mix(in oklch, var(--blush) 40%, transparent), var(--background));\n }\n .creators__head {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n @media (min-width: 1024px) { .creators__head { grid-template-columns: 1fr 1fr; } }\n .creators__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .creators__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .creators__title { font-size: 3.75rem; } }\n .creators__title em { color: var(--rose); font-style: italic; }\n .creators__body { max-width: 28rem; }\n\n .phone-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n place-items: center;\n }\n @media (min-width: 640px) { .phone-grid { grid-template-columns: repeat(2, 1fr); } }\n @media (min-width: 1024px) { .phone-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .phone-mock {\n width: 100%;\n max-width: 280px;\n transition: transform 0.5s ease;\n }\n .phone-mock:hover { transform: translateY(-8px) rotate(0deg) !important; }\n .phone-mock--tilt-1 { transform: rotate(-2deg); }\n .phone-mock--tilt-3 { transform: rotate(2deg); }\n [dir=\"rtl\"] .phone-mock--tilt-1 { transform: rotate(2deg); }\n [dir=\"rtl\"] .phone-mock--tilt-3 { transform: rotate(-2deg); }\n\n .phone-mock__frame {\n border-radius: 2.25rem;\n border: 1px solid var(--border);\n background: var(--foreground);\n padding: 0.5rem;\n box-shadow: 0 30px 60px -30px rgba(60, 20, 20, 0.5);\n }\n .phone-mock__screen {\n position: relative;\n aspect-ratio: 9 \/ 16;\n width: 100%;\n overflow: hidden;\n border-radius: 1.85rem;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .phone-mock__notch {\n position: absolute;\n top: 0.5rem;\n left: 50%;\n transform: translateX(-50%);\n width: 5rem;\n height: 1.25rem;\n border-radius: 9999px;\n background: var(--foreground);\n z-index: 2;\n }\n .phone-mock__bloom {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, color-mix(in oklch, var(--plum) 40%, transparent), transparent, color-mix(in oklch, var(--background) 30%, transparent));\n pointer-events: none;\n }\n .phone-mock__play {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n border: 1px solid color-mix(in oklch, var(--background) 60%, transparent);\n background: color-mix(in oklch, var(--background) 25%, transparent);\n backdrop-filter: blur(12px);\n display: grid;\n place-items: center;\n color: var(--background);\n transition: all 0.5s ease;\n }\n .phone-mock:hover .phone-mock__play {\n background: var(--background);\n color: var(--foreground);\n transform: scale(1.1);\n }\n .phone-mock__play svg { width: 20px; height: 20px; fill: currentColor; }\n .phone-mock__label {\n position: absolute;\n inset-inline: 1rem;\n bottom: 1rem;\n display: flex;\n justify-content: space-between;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.22em;\n color: color-mix(in oklch, var(--background) 80%, transparent);\n }\n\n \/* --------------------------------------------------------------------------\n SECTION: Voices\n -------------------------------------------------------------------------- *\/\n .voices { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--plum); color: var(--background); }\n .voices__head {\n display: flex;\n flex-wrap: wrap;\n align-items: end;\n justify-content: space-between;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n .voices__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .voices__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .voices__title { font-size: 3.75rem; } }\n .voices__title em { color: var(--peach); font-style: italic; }\n .voices__rating { display: flex; align-items: center; gap: 0.5rem; color: var(--peach); }\n .voices__rating svg { width: 16px; height: 16px; fill: currentColor; }\n .voices__rating span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--background) 70%, transparent); }\n\n .voice-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 1.25rem;\n }\n @media (min-width: 768px) { .voice-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .voice-card {\n display: flex;\n flex-direction: column;\n border-radius: 1rem;\n background: var(--background);\n color: var(--foreground);\n padding: 1.25rem;\n }\n .voice-card svg { width: 20px; height: 20px; color: var(--rose); }\n .voice-card__quote {\n margin-top: 1rem;\n flex: 1;\n font-family: var(--font-serif);\n font-size: 1rem;\n line-height: 1.4;\n font-style: italic;\n }\n @media (min-width: 640px) { .voice-card__quote { font-size: 1.125rem; } }\n .voice-card__formula { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }\n .voice-card__author {\n margin-top: 1.5rem;\n border-top: 1px solid var(--border);\n padding-top: 1rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n .voice-card__avatar {\n width: 44px;\n height: 44px;\n flex-shrink: 0;\n border-radius: 50%;\n border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);\n background: var(--secondary);\n }\n .voice-card__name { font-family: var(--font-serif); font-size: 1rem; }\n .voice-card__handle { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); }\n @media (min-width: 640px) { .voice-card__handle { font-size: 11px; letter-spacing: 0.18em; } }\n\n .trust-grid {\n margin-top: 3rem;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1.5rem;\n border-top: 1px solid color-mix(in oklch, var(--background) 20%, transparent);\n padding-top: 2rem;\n text-align: center;\n }\n @media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(4, 1fr); padding-top: 2.5rem; } }\n .trust-stat__n { font-family: var(--font-serif); font-size: 1.875rem; color: var(--peach); }\n @media (min-width: 640px) { .trust-stat__n { font-size: 2.25rem; } }\n .trust-stat__k { margin-top: 0.5rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in oklch, var(--background) 60%, transparent); }\n @media (min-width: 640px) { .trust-stat__k { font-size: 10px; letter-spacing: 0.2em; } }\n\n \/* --------------------------------------------------------------------------\n SECTION: Community \/ Journal\n -------------------------------------------------------------------------- *\/\n .journal__head {\n display: flex;\n flex-wrap: wrap;\n align-items: end;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 2.5rem;\n }\n .journal__title { font-size: 1.875rem; }\n @media (min-width: 640px) { .journal__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .journal__title { font-size: 3rem; } }\n\n .journal-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n @media (min-width: 768px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }\n\n .journal-card {\n display: block;\n border-top: 1px solid var(--border);\n padding-top: 1.5rem;\n transition: color 0.2s ease;\n }\n .journal-card:hover { color: var(--accent); }\n .journal-card__tag {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--accent);\n }\n .journal-card__title {\n margin-top: 1rem;\n font-family: var(--font-serif);\n font-size: 1.25rem;\n line-height: 1.3;\n }\n @media (min-width: 640px) { .journal-card__title { font-size: 1.5rem; } }\n .journal-card__author {\n margin-top: 1.5rem;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n color: var(--muted-foreground);\n }\n\n \/* --------------------------------------------------------------------------\n SECTION: Newsletter\n -------------------------------------------------------------------------- *\/\n .newsletter {\n position: relative;\n overflow: hidden;\n border-top: 1px solid var(--border);\n background: var(--plum);\n color: var(--background);\n }\n .newsletter__bg {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .newsletter__bg img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.3;\n }\n .newsletter__bg::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(90deg,var(--plum), color-mix(in oklch, var(--plum) 85%, transparent), color-mix(in oklch, var(--plum) 40%, transparent));\n }\n .newsletter__content {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n @media (min-width: 1024px) { .newsletter__content { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }\n .newsletter__title { font-size: 1.875rem; line-height: 1.1; }\n @media (min-width: 640px) { .newsletter__title { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .newsletter__title { font-size: 3rem; } }\n\n .newsletter__form {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1rem;\n }\n .newsletter__field {\n display: flex;\n align-items: end;\n gap: 0.75rem;\n border-bottom: 1px solid color-mix(in oklch, var(--background) 30%, transparent);\n }\n .newsletter__input {\n flex: 1;\n min-width: 0;\n background: transparent;\n border: none;\n padding-block: 1rem;\n font-family: var(--font-serif);\n font-size: 1.125rem;\n font-style: italic;\n color: var(--background);\n outline: none;\n }\n @media (min-width: 640px) { .newsletter__input { font-size: 1.25rem; } }\n .newsletter__input::placeholder { color: color-mix(in oklch, var(--background) 40%, transparent); }\n .newsletter__submit {\n flex-shrink: 0;\n background: none;\n border: none;\n padding: 0 0.75rem 1rem;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n color: var(--background);\n cursor: pointer;\n transition: color 0.2s ease;\n }\n @media (min-width: 640px) { .newsletter__submit { padding-inline: 1.5rem; font-size: 12px; letter-spacing: 0.2em; } }\n .newsletter__submit:hover { color: var(--accent); }\n .newsletter__note { font-size: 12px; color: color-mix(in oklch, var(--background) 60%, transparent); }\n\n \/* --------------------------------------------------------------------------\n SECTION: Footer\n -------------------------------------------------------------------------- *\/\n .footer { border-top: 1px solid var(--border); background: var(--background); }\n .footer__grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }\n .footer__brand { grid-column: span 2; }\n @media (min-width: 640px) { .footer__brand { grid-column: span 1; } }\n .footer__logo { font-family: var(--font-serif); font-size: 1.875rem; }\n .footer__tagline { margin-top: 0.75rem; max-width: 20rem; font-size: 12px; color: var(--muted-foreground); }\n .footer__col-title {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n .footer__links { list-style: none; margin: 1rem 0 0; padding: 0; }\n .footer__links li + li { margin-top: 0.5rem; }\n .footer__links a { font-size: 14px; transition: color 0.2s ease; }\n .footer__links a:hover { color: var(--accent); }\n\n .footer__bottom {\n margin-top: 4rem;\n display: flex;\n flex-direction: column;\n align-items: start;\n justify-content: space-between;\n gap: 1rem;\n border-top: 1px solid var(--border);\n padding-top: 1.5rem;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.24em;\n color: var(--muted-foreground);\n }\n @media (min-width: 640px) { .footer__bottom { flex-direction: row; align-items: center; } }\n .footer__bottom a:hover { color: var(--foreground); }\n .footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"perfumia-header\" id=\"perfumia-header\">\n <div class=\"perfumia-container perfumia-header__inner\">\n <button class=\"mobile-menu-btn\" aria-label=\"Menu\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>\n <\/button>\n\n <nav class=\"perfumia-header__nav\">\n <a href=\"#decoder\">Discover<\/a>\n <a href=\"#products\">Collection<\/a>\n <a href=\"#families\">Families<\/a>\n <a href=\"#community\">Journal<\/a>\n <\/nav>\n\n <a href=\"#\" class=\"perfumia-header__logo\">Perfumia<\/a>\n\n <div class=\"perfumia-header__tools\">\n <button class=\"lang-toggle\" aria-label=\"Switch language\">\u05e2\u05d1<\/button>\n <button aria-label=\"Search\" class=\"hidden-sm\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n <\/button>\n <button aria-label=\"Wishlist\" class=\"hidden-sm\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"cart-btn\" aria-label=\"Cart\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 6h15l-1.5 9h-12Z\"\/><circle cx=\"9\" cy=\"20\" r=\"1.5\"\/><circle cx=\"18\" cy=\"20\" r=\"1.5\"\/><path d=\"M6 6 5 3H2\"\/><\/svg>\n <span class=\"cart-badge\">2<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main>\n \n <section class=\"hero\">\n <div class=\"hero__clouds\" aria-hidden=\"true\">\n <div class=\"hero__cloud hero__cloud--1\"><\/div>\n <div class=\"hero__cloud hero__cloud--2\"><\/div>\n \n <img decoding=\"async\" src=\"\" alt=\"\" \/>\n <\/div>\n\n <div class=\"perfumia-container\">\n <div class=\"hero__grid\">\n <div class=\"hero__text\">\n <div class=\"hero__badge\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><path d=\"M12 8v4\"\/><path d=\"M12 16h.01\"\/><\/svg>\n Your scent, decoded\n <\/div>\n <h1 class=\"hero__title\">\n Find yourself<br \/>in a <em>scent.<\/em>\n <\/h1>\n <p class=\"body-text hero__body\">\n Perfumia decodes the products you already love \u2014 your shampoo, your candle, that lotion you keep re-buying \u2014 into a fragrance that finally smells like you.\n <\/p>\n <div class=\"hero__ctas\">\n <a href=\"#decoder\" class=\"lux-cta\">\n <span>Begin the decoder<\/span>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <a href=\"#products\" class=\"link-underline\">Shop the collection<\/a>\n <\/div>\n\n <div class=\"hero__stats\">\n <div class=\"stat\">\n <div class=\"stat__n\">180+<\/div>\n <div class=\"stat__k\">Houses curated<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat__n\">42k<\/div>\n <div class=\"stat__k\">Profiles decoded<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat__n\">1:1<\/div>\n <div class=\"stat__k\">Perfumer sessions<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero__image-wrap\" aria-label=\"Hero image\">\n <img decoding=\"async\"\n src=\"https:\/\/perfumia.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-20-2026-08_06_41-PM.png\"\n alt=\"Perfumia Hero\"\n style=\"width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;\"\n \/>\n<\/div>\n\n <div class=\"hero__dna-card\">\n <div class=\"dna-card__head\">\n <span class=\"eyebrow\">Your scent DNA<\/span>\n <span class=\"dna-card__match\">94% match<\/span>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Amber<\/span><span>42%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:42%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Iris<\/span><span>28%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:28%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Cashmeran<\/span><span>18%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:18%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Pink Pepper<\/span><span>12%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:12%\"><\/div><\/div>\n <\/div>\n <div class=\"dna-card__name\">\"Lumi\u00e8re \u00c9ternelle\"<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"scent-dna section-padded\">\n <div class=\"scent-dna__bg\">\n \n <img decoding=\"async\" src=\"\" alt=\"\" \/>\n <\/div>\n\n <div class=\"perfumia-container scent-dna__grid\">\n <div class=\"scent-dna__intro\">\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:1rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n Your Scent DNA\n <\/div>\n <h2 class=\"scent-dna__title\">\n Every person<br \/>has a <em>formula.<\/em>\n <\/h2>\n <p class=\"body-text\" style=\"margin-top:1.25rem;max-width:28rem;\">\n We break down what draws you in \u2014 the molecules, the accords, the memory triggers \u2014 into a visual signature you can wear, share, and build a wardrobe around.\n <\/p>\n <div style=\"margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0.5rem;\">\n <span class=\"tag-pill\">Skin-close<\/span>\n <span class=\"tag-pill\">Warm-radiant<\/span>\n <span class=\"tag-pill\">Second-skin musk<\/span>\n <\/div>\n <\/div>\n\n <div class=\"formula-card\">\n <div class=\"formula-card__head\">\n <div>\n <div class=\"formula-card__label\">Signature \u21160428<\/div>\n <div class=\"formula-card__value\">Elle \u00b7 26 \u00b7 Brooklyn<\/div>\n <\/div>\n <div style=\"text-align:end;\">\n <div class=\"formula-card__label\">Family<\/div>\n <div class=\"formula-card__value formula-card__value--rose\">Amber Floral<\/div>\n <\/div>\n <\/div>\n\n <div class=\"formula-card__body\">\n <div>\n <div class=\"donut\">\n <div class=\"donut__hole\">\n <div class=\"donut__match\">Match<\/div>\n <div class=\"donut__pct\">94%<\/div>\n <div class=\"donut__name\">Lumi\u00e8re \u00c9ternelle<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Amber<\/span><span>42%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:42%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Iris<\/span><span>28%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:28%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Cashmeran<\/span><span>18%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:18%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Pink Pepper<\/span><span>12%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:12%\"><\/div><\/div>\n <\/div>\n\n <div class=\"mini-stats\">\n <div class=\"mini-stat\">\n <div class=\"mini-stat__k\">Sillage<\/div>\n <div class=\"mini-stat__v\">Intimate<\/div>\n <\/div>\n <div class=\"mini-stat\">\n <div class=\"mini-stat__k\">Longevity<\/div>\n <div class=\"mini-stat__v\">8h+<\/div>\n <\/div>\n <div class=\"mini-stat\">\n <div class=\"mini-stat__k\">Season<\/div>\n <div class=\"mini-stat__v\">AW<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"formula-card__foot\">\n <span>Share your formula \u00b7 <strong>#myperfumia<\/strong><\/span>\n <a href=\"#decoder\" class=\"btn-pill\">\n Build my DNA\n <svg class=\"rtl-flip\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"from-love section-padded\">\n <div class=\"from-love__clouds\">\n <div class=\"from-love__cloud from-love__cloud--1\"><\/div>\n <div class=\"from-love__cloud from-love__cloud--2\"><\/div>\n \n <img decoding=\"async\" src=\"\" alt=\"\" class=\"from-love__bg-img\" \/>\n <\/div>\n\n <div class=\"perfumia-container from-love__content\">\n <div class=\"from-love__head\">\n <div>\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:0.75rem;\">Reverse discovery<\/div>\n <h2 class=\"from-love__title\">\n Love your shampoo?<br \/><em>There's a perfume for that.<\/em>\n <\/h2>\n <\/div>\n <p class=\"body-text from-love__body\">\n The scents you gravitate toward \u2014 in your hair mask, your body lotion, the candle burning by your bath \u2014 aren't random. They're data. Tell us what you love, we'll find the fragrance hiding inside it.\n <\/p>\n <\/div>\n\n <div class=\"match-grid\">\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22a8 8 0 0 0 8-8c0-3.5-2-6-5-8s-3-4-3-4-0 2-3 4-5 4.5-5 8a8 8 0 0 0 8 8Z\"\/><\/svg>\n <div class=\"match-card__tag\">Your shampoo<\/div>\n <div class=\"match-card__title\">Coco & Eve masks<\/div>\n <div class=\"match-card__match\">\u2192 Solar coconut, tiar\u00e9, warm vanilla<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 20A7 7 0 0 1 9.8 6.6C11.6 4.8 14 4 16 4a7 7 0 0 1 0 14Z\"\/><path d=\"M12 4v16\"\/><\/svg>\n <div class=\"match-card__tag\">Your skincare<\/div>\n <div class=\"match-card__title\">Sol de Janeiro 62<\/div>\n <div class=\"match-card__match\">\u2192 Salted pistachio, caramel, jasmine<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-2.072-2.143-3-4-.928 1.857-1.928 1.857-3 4-.5 1-1 1.62-1 3a2.5 2.5 0 0 0 2.5 2.5Z\"\/><path d=\"M12.5 18.5a2.5 2.5 0 0 0 2.5-2.5c0-1.38-.5-2-1-3-1.072-2.143-2.072-2.143-3-4-.928 1.857-1.928 1.857-3 4-.5 1-1 1.62-1 3a2.5 2.5 0 0 0 2.5 2.5Z\"\/><\/svg>\n <div class=\"match-card__tag\">Your candle<\/div>\n <div class=\"match-card__title\">Diptyque Baies<\/div>\n <div class=\"match-card__match\">\u2192 Blackcurrant leaf, Bulgarian rose<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"match-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H5.5a2.5 2.5 0 1 1 1.8-4.3\"\/><path d=\"M4 12h16\"\/><path d=\"M6 12v5a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-5\"\/><\/svg>\n <div class=\"match-card__tag\">Your laundry<\/div>\n <div class=\"match-card__title\">Le Labo Rose 31<\/div>\n <div class=\"match-card__match\">\u2192 Cumin, cedar, rose absolute<\/div>\n <div class=\"match-card__cta\">\n Match me\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"also-tags\">\n <span>Also try:<\/span>\n <span>Your favorite lipbalm<\/span>\n <span>That hotel lobby<\/span>\n <span>Your ex's hoodie<\/span>\n <span>Grandma's linen closet<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"decoder section-padded\" id=\"decoder\">\n <div class=\"decoder__clouds\" aria-hidden=\"true\">\n <div class=\"decoder__cloud decoder__cloud--1\"><\/div>\n <div class=\"decoder__cloud decoder__cloud--2\"><\/div>\n <div class=\"decoder__cloud decoder__cloud--3\"><\/div>\n <\/div>\n\n <div class=\"perfumia-container decoder__grid\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:1rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n The Decoder\n <\/div>\n <h2 class=\"decoder__title\">\n Three questions.<br \/><em>Your scent profile.<\/em>\n <\/h2>\n <p class=\"body-text\" style=\"margin-top:1.5rem;max-width:28rem;\">\n Our perfumers translate what you already love into an olfactory portrait \u2014 families, accords, and the notes that make you turn a head.\n <\/p>\n <\/div>\n\n <div class=\"quiz-card\">\n <div class=\"quiz-card__head\">\n <span>Step 1 of 3<\/span>\n <div class=\"quiz-card__progress\">\n <span class=\"active\"><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <div class=\"quiz-card__body\">\n <div class=\"quiz-card__q\">Name a perfume you wear on repeat.<\/div>\n <input type=\"text\" class=\"quiz-card__input\" placeholder=\"e.g. Baccarat Rouge 540\" \/>\n <div class=\"quiz-card__actions\">\n <button class=\"quiz-card__back\" disabled>\u2190 Back<\/button>\n <button class=\"btn-filled\">\n Continue\n <svg class=\"rtl-flip\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"products section-padded\" id=\"products\">\n <div class=\"perfumia-container\">\n <div class=\"products__head\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:0.75rem;\">The Collection<\/div>\n <h2 class=\"products__title\">Curated this season<\/h2>\n <\/div>\n <a href=\"#\" class=\"link-underline\">View all 180 \u2192<\/a>\n <\/div>\n\n <div class=\"product-grid\">\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Ombre d'Ambre image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Ombre d'Ambre\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac245<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Maison Lior<\/div>\n <h3 class=\"product-card__name\">Ombre d'Ambre<\/h3>\n <div class=\"product-card__family\">Amber \u00b7 Woody<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac245<\/div>\n <\/div>\n <div class=\"product-card__notes\">Labdanum, Sandalwood, Vanilla Bourbon<\/div>\n <\/article>\n\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Rose Cendr\u00e9e image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Rose Cendr\u00e9e\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac198<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Atelier Noir<\/div>\n <h3 class=\"product-card__name\">Rose Cendr\u00e9e<\/h3>\n <div class=\"product-card__family\">Floral \u00b7 Chypre<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac198<\/div>\n <\/div>\n <div class=\"product-card__notes\">Turkish Rose, Pink Pepper, Patchouli<\/div>\n <\/article>\n\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Foin Coup\u00e9 image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Foin Coup\u00e9\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac165<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Studio V\u00e9tiver<\/div>\n <h3 class=\"product-card__name\">Foin Coup\u00e9<\/h3>\n <div class=\"product-card__family\">Aromatic \u00b7 Green<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac165<\/div>\n <\/div>\n <div class=\"product-card__notes\">Hay Absolute, Fig Leaf, Vetiver<\/div>\n <\/article>\n\n \n <article class=\"product-card\">\n <div class=\"product-card__media\">\n \n <div class=\"media-placeholder\" aria-label=\"Solaire 1974 image placeholder\">\n <img loading=\"lazy\" decoding=\"async\" src=\"\" alt=\"Solaire 1974\" width=\"900\" height=\"1100\" loading=\"lazy\" \/>\n <\/div>\n <button class=\"product-card__wish\" aria-label=\"Add to wishlist\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.29.85-4.25 2.17C11.29 3.85 9.76 3 8 3A5.5 5.5 0 0 0 2.5 8.5c0 2.3 1.5 4.05 3 5.5l7.5 7.5Z\"\/><\/svg>\n <\/button>\n <button class=\"product-card__add\">Add to bag \u2014 \u20ac220<\/button>\n <\/div>\n <div class=\"product-card__info\">\n <div style=\"min-width:0;\">\n <div class=\"product-card__house\">Maison Lior<\/div>\n <h3 class=\"product-card__name\">Solaire 1974<\/h3>\n <div class=\"product-card__family\">Oriental \u00b7 Solar<\/div>\n <\/div>\n <div class=\"product-card__price\">\u20ac220<\/div>\n <\/div>\n <div class=\"product-card__notes\">Neroli, Benzoin, Tobacco Leaf<\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"families section-padded\" id=\"families\">\n <div class=\"perfumia-container\">\n <div class=\"families__head\">\n <div>\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:0.75rem;\">Olfactory Families<\/div>\n <h2 class=\"families__title\">What are you naturally drawn to?<\/h2>\n <\/div>\n <p class=\"body-text families__body\">\n Six families. One vocabulary for the feeling you're chasing. Tap a family \u2014 we'll pull the notes, the mood, and the bottles that live there.\n <\/p>\n <\/div>\n\n <div class=\"family-grid\">\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--peach),var(--rose));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 9c4 5 7 9 7 13a7 7 0 1 1-14 0c0-4 3-8 7-13z\"\/><path d=\"M20 17c2 2 3 4 3 6\" opacity=\"0.55\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Amber<\/div>\n <div class=\"family-card__desc\">Warmth, resin, dusk on skin.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">34<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--sand),var(--plum));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c-4 2-7 5-7 9 0 3 2 6 4 7 1-2 3-3 3-5 0 2 2 3 3 5 2-1 4-4 4-7 0-4-3-7-7-9z\"\/><path d=\"M20 12v18\" opacity=\"0.55\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Chypre<\/div>\n <div class=\"family-card__desc\">Oakmoss, bergamot, structured shadow.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">22<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--blush),var(--rose));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"2.4\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(0 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(72 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(144 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(216 20 20)\"\/><ellipse cx=\"20\" cy=\"13.5\" rx=\"3.2\" ry=\"4.5\" transform=\"rotate(288 20 20)\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Floral<\/div>\n <div class=\"family-card__desc\">From white petals to smoked rose.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">61<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--peach),var(--sand));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 30V13\"\/><path d=\"M20 14c-2-1-3-3-3-4M20 14c2-1 3-3 3-4\"\/><path d=\"M20 18c-3-1-4-3-4-5M20 18c3-1 4-3 4-5\"\/><path d=\"M20 22c-3-1-5-3-5-5M20 22c3-1 5-3 5-5\"\/><path d=\"M20 26c-3-1-4-3-4-5M20 26c3-1 4-3 4-5\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Aromatic<\/div>\n <div class=\"family-card__desc\">Herbaceous, cool, contemplative.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">28<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--sand),var(--plum));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"20\" cy=\"20\" r=\"10\"\/><circle cx=\"20\" cy=\"20\" r=\"7\" opacity=\"0.75\"\/><circle cx=\"20\" cy=\"20\" r=\"4\" opacity=\"0.55\"\/><circle cx=\"20\" cy=\"20\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Woody<\/div>\n <div class=\"family-card__desc\">Sandalwood, cedar, quiet authority.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">45<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n \n <a href=\"#\" class=\"family-card\">\n <div class=\"family-card__icon\" style=\"background:linear-gradient(135deg,var(--blush),var(--peach));\">\n <svg width=\"34\" height=\"34\" viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 28c2-14 12-18 16-16 2 4-2 14-16 16z\"\/><path d=\"M14 26c3-10 9-13 13-13\" opacity=\"0.55\"\/><\/svg>\n <\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"family-card__name\">Gourmand<\/div>\n <div class=\"family-card__desc\">Vanilla bourbon, tonka, salt caramel.<\/div>\n <\/div>\n <div class=\"family-card__meta\">\n <span class=\"family-card__count\">19<\/span>\n <svg class=\"rtl-flip\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"creators section-padded\">\n <div class=\"perfumia-container\">\n <div class=\"creators__head\">\n <div>\n <div class=\"eyebrow eyebrow-rose\" style=\"margin-bottom:0.75rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n The Circle \u00b7 On camera\n <\/div>\n <h2 class=\"creators__title\">\n Real people,<br \/><em>decoded on camera.<\/em>\n <\/h2>\n <\/div>\n <div>\n <p class=\"body-text creators__body\">\n A space reserved for our creator community. Real videos, real formulas \u2014 dropping alongside launch.\n <\/p>\n <a href=\"#\" class=\"link-underline\" style=\"margin-top:1.25rem;display:inline-flex;align-items:center;gap:0.5rem;\">\n Join the waitlist\n <svg class=\"rtl-flip\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"phone-grid\">\n \n <div class=\"phone-mock phone-mock--tilt-1\">\n <div class=\"phone-mock__frame\">\n <div class=\"phone-mock__screen\" style=\"background:linear-gradient(160deg,var(--blush),var(--peach) 55%,var(--rose));\">\n \n <div class=\"phone-mock__notch\"><\/div>\n <div class=\"phone-mock__bloom\"><\/div>\n <div class=\"phone-mock__play\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n <\/div>\n <div class=\"phone-mock__label\">\n <span>Creator<\/span>\n <span>Coming soon<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"phone-mock\">\n <div class=\"phone-mock__frame\">\n <div class=\"phone-mock__screen\" style=\"background:linear-gradient(160deg,var(--sand),var(--blush) 55%,var(--peach));\">\n \n <div class=\"phone-mock__notch\"><\/div>\n <div class=\"phone-mock__bloom\"><\/div>\n <div class=\"phone-mock__play\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n <\/div>\n <div class=\"phone-mock__label\">\n <span>Creator<\/span>\n <span>Coming soon<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"phone-mock phone-mock--tilt-3\">\n <div class=\"phone-mock__frame\">\n <div class=\"phone-mock__screen\" style=\"background:linear-gradient(160deg,var(--peach),var(--rose) 60%,var(--plum));\">\n \n <div class=\"phone-mock__notch\"><\/div>\n <div class=\"phone-mock__bloom\"><\/div>\n <div class=\"phone-mock__play\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"\/><\/svg>\n <\/div>\n <div class=\"phone-mock__label\">\n <span>Creator<\/span>\n <span>Coming soon<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"voices section-padded\">\n <div class=\"perfumia-container\">\n <div class=\"voices__head\">\n <div>\n <div class=\"eyebrow eyebrow-peach\" style=\"margin-bottom:0.75rem;\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align:middle;margin-inline-end:0.5rem;\"><path d=\"M9.937 15.5A2 2 0 0 0 8.5 14.134l-1.875-3.29a2 2 0 0 1 1.86-2.995h3.636a2 2 0 0 0 1.5-.69l2.034-2.258a2 2 0 0 1 3.198.53l1.876 3.29a2 2 0 0 0 1.5.69h3.636a2 2 0 0 1 1.86 2.995l-1.875 3.29a2 2 0 0 0-.437 1.366v3.638a2 2 0 0 1-2.995 1.86l-3.29-1.875a2 2 0 0 0-1.366-.437h-3.638a2 2 0 0 0-1.366.437l-3.29 1.875a2 2 0 0 1-2.995-1.86V15.5Z\"\/><\/svg>\n The Perfumia Circle\n <\/div>\n <h2 class=\"voices__title\">\n 42,000 formulas.<br \/><em>One community.<\/em>\n <\/h2>\n <\/div>\n <div class=\"voices__rating\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <span>4.9 \u00b7 8,200 reviews<\/span>\n <\/div>\n <\/div>\n\n <div class=\"voice-grid\">\n <article class=\"voice-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z\"\/><path d=\"M16 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z\"\/><path d=\"M10 3H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\"\/><path d=\"M10 13H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z\"\/><\/svg>\n <p class=\"voice-card__quote\">\"I finally understand why I've been re-buying the same three candles for years. It's iso E super. Mind blown.\"<\/p>\n <div class=\"voice-card__formula\">\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Musk<\/span><span>48%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:48%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Iso E Super<\/span><span>30%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:30%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Ambroxan<\/span><span>22%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:22%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"voice-card__author\">\n \n <div class=\"voice-card__avatar\" aria-label=\"Amelia Chen avatar placeholder\"><\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"voice-card__name\">Amelia Chen<\/div>\n <div class=\"voice-card__handle\">@ameliascents \u00b7 412k<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"voice-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z\"\/><path d=\"M16 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z\"\/><path d=\"M10 3H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\"\/><path d=\"M10 13H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z\"\/><\/svg>\n <p class=\"voice-card__quote\">\"My scent DNA card is literally my personality in a chart. I made it my Instagram header.\"<\/p>\n <div class=\"voice-card__formula\">\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Neroli<\/span><span>40%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:40%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Fig Leaf<\/span><span>34%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:34%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Vetiver<\/span><span>26%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:26%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"voice-card__author\">\n \n <div class=\"voice-card__avatar\" aria-label=\"Jordan Rae avatar placeholder\"><\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"voice-card__name\">Jordan Rae<\/div>\n <div class=\"voice-card__handle\">@jordanwears \u00b7 1.2M<\/div>\n <\/div>\n <\/div>\n <\/article>\n\n <article class=\"voice-card\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z\"\/><path d=\"M16 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2Z\"\/><path d=\"M10 3H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z\"\/><path d=\"M10 13H6a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2Z\"\/><\/svg>\n <p class=\"voice-card__quote\">\"Perfumia found me a \u20ac70 dupe of a discontinued Serge Lutens. From describing my hair conditioner.\"<\/p>\n <div class=\"voice-card__formula\">\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Rose<\/span><span>52%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:52%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Oud<\/span><span>28%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:28%\"><\/div><\/div>\n <\/div>\n <div class=\"formula-bar\">\n <div class=\"formula-bar__row\"><span class=\"truncate\">Saffron<\/span><span>20%<\/span><\/div>\n <div class=\"formula-bar__track\"><div class=\"formula-bar__fill\" style=\"width:20%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"voice-card__author\">\n \n <div class=\"voice-card__avatar\" aria-label=\"Sasha Petrova avatar placeholder\"><\/div>\n <div style=\"min-width:0;flex:1;\">\n <div class=\"voice-card__name\">Sasha Petrova<\/div>\n <div class=\"voice-card__handle\">@nosewithsasha \u00b7 289k<\/div>\n <\/div>\n <\/div>\n <\/article>\n <\/div>\n\n <div class=\"trust-grid\">\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">42k<\/div>\n <div class=\"trust-stat__k\">DNA profiles<\/div>\n <\/div>\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">180+<\/div>\n <div class=\"trust-stat__k\">Curated houses<\/div>\n <\/div>\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">94%<\/div>\n <div class=\"trust-stat__k\">Match rate<\/div>\n <\/div>\n <div class=\"trust-stat\">\n <div class=\"trust-stat__n\">4.9\u2605<\/div>\n <div class=\"trust-stat__k\">Community rated<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"journal section-padded\" id=\"community\">\n <div class=\"perfumia-container\">\n <div class=\"journal__head\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:0.75rem;\">The Journal<\/div>\n <h2 class=\"journal__title\">From the community.<\/h2>\n <\/div>\n <\/div>\n\n <div class=\"journal-grid\">\n <a href=\"#\" class=\"journal-card\">\n <div class=\"journal-card__tag\">Journal<\/div>\n <h3 class=\"journal-card__title\">On wearing tuberose in November<\/h3>\n <div class=\"journal-card__author\">Elle M.<\/div>\n <\/a>\n <a href=\"#\" class=\"journal-card\">\n <div class=\"journal-card__tag\">Perfumer<\/div>\n <h3 class=\"journal-card__title\">Inside the atelier of Studio V\u00e9tiver<\/h3>\n <div class=\"journal-card__author\">Perfumia Editors<\/div>\n <\/a>\n <a href=\"#\" class=\"journal-card\">\n <div class=\"journal-card__tag\">Review<\/div>\n <h3 class=\"journal-card__title\">Six ambers, decoded side by side<\/h3>\n <div class=\"journal-card__author\">Nadia R.<\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"newsletter section-padded\">\n <div class=\"newsletter__bg\">\n \n <img decoding=\"async\" src=\"\" alt=\"\" \/>\n <\/div>\n\n <div class=\"perfumia-container newsletter__content\">\n <div>\n <div class=\"eyebrow\" style=\"margin-bottom:1rem;color:color-mix(in oklch,var(--background) 60%,transparent);\">Correspondence<\/div>\n <h2 class=\"newsletter__title\">Letters from the atelier.<\/h2>\n <\/div>\n <form class=\"newsletter__form\" onsubmit=\"event.preventDefault();\">\n <div class=\"newsletter__field\">\n <input type=\"email\" required class=\"newsletter__input\" placeholder=\"your@address.com\" \/>\n <button type=\"submit\" class=\"newsletter__submit\">Subscribe \u2192<\/button>\n <\/div>\n <p class=\"newsletter__note\">One dispatch monthly. New releases, perfumer interviews, the occasional private sample.<\/p>\n <\/form>\n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"footer section-padded\" style=\"padding-block:3rem 1.5rem;\">\n <div class=\"perfumia-container\">\n <div class=\"footer__grid\">\n <div class=\"footer__brand\">\n <div class=\"footer__logo\">Perfumia<\/div>\n <p class=\"footer__tagline\">Beauty-tech for people who wear their scent like a signature.<\/p>\n <\/div>\n <div>\n <div class=\"footer__col-title\">House<\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#\">Our story<\/a><\/li>\n <li><a href=\"#\">Perfumers<\/a><\/li>\n <li><a href=\"#\">Atelier visits<\/a><\/li>\n <li><a href=\"#\">Press<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer__col-title\">Shop<\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#\">New arrivals<\/a><\/li>\n <li><a href=\"#\">The collection<\/a><\/li>\n <li><a href=\"#\">Discovery sets<\/a><\/li>\n <li><a href=\"#\">Gift cards<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"footer__col-title\">Care<\/div>\n <ul class=\"footer__links\">\n <li><a href=\"#\">Shipping<\/a><\/li>\n <li><a href=\"#\">Returns<\/a><\/li>\n <li><a href=\"#\">Contact<\/a><\/li>\n <li><a href=\"#\">FAQ<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"footer__bottom\">\n <div>\u00a9 2026 Perfumia \u00b7 Beauty-tech fragrance discovery<\/div>\n <div class=\"footer__legal\">\n <a href=\"#\">Privacy<\/a>\n <a href=\"#\">Terms<\/a>\n <a href=\"#\">Instagram<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n (function () {\n const header = document.getElementById('perfumia-header');\n function onScroll () {\n header.classList.toggle('scrolled', window.scrollY > 12);\n }\n onScroll();\n window.addEventListener('scroll', onScroll, { passive: true });\n })();\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Perfumia \u2014 Find yourself in a scent Discover Collection Families Journal Perfumia \u05e2\u05d1 2 Your scent, decoded Find yourselfin a scent. Perfumia decodes the products you already love \u2014 your shampoo, your candle, that lotion you keep re-buying \u2014 into a fragrance that finally smells like you. Begin the decoder Shop the collection 180+ Houses […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-228","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":16,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages\/228\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/pages\/228\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/perfumia.io\/he_il\/wp-json\/wp\/v2\/media?parent=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}