/* =========================================================
   MONARCHAUREX — MASTER WEBSITE
   LUXURY 3D ARCHITECTURAL DESIGN SYSTEM
   BUILT FOR THE SUPPLIED INDEX.HTML
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600&display=swap');


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {
    --bg: #05070A;
    --bg-2: #080B10;
    --surface: #0B0F15;
    --surface-2: #0E131B;
    --surface-3: #121821;

    --white: #F5F3EE;
    --soft: #C0BFB9;
    --muted: #73777F;

    --gold-dark: #5B3D17;
    --gold: #98702E;
    --gold-soft: #C1A05C;
    --gold-light: #DCC58E;

    --silver: #D1D4D8;
    --silver-soft: #9CA2AA;
    --silver-dark: #4A5058;

    --line: rgba(255,255,255,.075);
    --line-soft: rgba(255,255,255,.045);
    --line-gold: rgba(193,160,92,.24);

    --shadow-sm: 0 14px 40px rgba(0,0,0,.28);
    --shadow-md: 0 28px 80px rgba(0,0,0,.38);
    --shadow-lg: 0 50px 140px rgba(0,0,0,.55);

    --max-width: 1240px;
    --section-space: 150px;

    --ease: cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;

    position: relative;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(193,160,92,.075),
            transparent 26%
        ),
        radial-gradient(
            circle at 87% 23%,
            rgba(156,162,170,.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 65%,
            rgba(193,160,92,.025),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #05070A 0%,
            #080B10 46%,
            #05070A 100%
        );

    color: var(--white);

    font-family: "DM Sans", sans-serif;

    line-height: 1.7;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255,255,255,.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.015) 1px,
            transparent 1px
        );

    background-size: 84px 84px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.72),
            transparent 88%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.72),
            transparent 88%
        );
}

body::after {
    content: "";

    position: fixed;

    width: 520px;
    height: 520px;

    right: -330px;
    top: 28%;

    z-index: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(193,160,92,.055),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}

main {
    position: relative;
    z-index: 1;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: var(--gold-soft);
    color: #05070A;
}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    letter-spacing: -.035em;
}

h3,
strong,
button,
a {
    font-family: "Manrope", sans-serif;
}

p {
    color: var(--soft);
}

strong {
    font-weight: 700;
}


/* =========================================================
   04. ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--gold-soft);
    outline-offset: 4px;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   05. SCROLL OFFSETS
   ========================================================= */

#home,
#problem,
#why-monarch,
#benefits,
#collection,
#process,
#pricing,
#professional-value,
#private-offers,
#live-experiences,
#experiences,
#about,
#request {
    scroll-margin-top: 100px;
}


/* =========================================================
   06. HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;

    z-index: 1000;

    border-bottom: 1px solid rgba(255,255,255,.055);

    background:
        linear-gradient(
            180deg,
            rgba(5,7,10,.97),
            rgba(5,7,10,.80)
        );

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        0 12px 42px rgba(0,0,0,.18),
        inset 0 -1px 0 rgba(255,255,255,.018);
}

.navbar {
    width: min(
        var(--max-width),
        calc(100% - 48px)
    );

    min-height: 78px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.brand {
    position: relative;

    color: var(--white);

    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

    white-space: nowrap;
}

.brand::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-soft),
            transparent
        );

    transition:
        width .35s var(--ease);
}

.brand:hover::after {
    width: 54px;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 28px;
}

.nav-links > a:not(.nav-cta) {
    position: relative;

    color: var(--silver-soft);

    font-size: .72rem;
    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;

    transition:
        color .3s var(--ease);
}

.nav-links > a:not(.nav-cta)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--gold-soft);

    transition:
        width .3s var(--ease);
}

.nav-links > a:not(.nav-cta):hover {
    color: var(--white);
}

.nav-links > a:not(.nav-cta):hover::after {
    width: 100%;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 18px;

    border: 1px solid rgba(193,160,92,.42);

    background:
        linear-gradient(
            135deg,
            rgba(193,160,92,.10),
            rgba(255,255,255,.025)
        );

    color: var(--gold-light);

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;

    transition:
        background .3s var(--ease),
        border-color .3s var(--ease),
        transform .3s var(--ease),
        box-shadow .3s var(--ease);
}

.nav-cta:hover {
    background:
        linear-gradient(
            135deg,
            rgba(193,160,92,.18),
            rgba(255,255,255,.035)
        );

    border-color: rgba(193,160,92,.68);

    transform: translateY(-2px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.25);
}


/* =========================================================
   07. MOBILE MENU BASE
   ========================================================= */

.mobile-menu-toggle {
    display: none;
}

.mobile-menu-button {
    display: none;
}


/* =========================================================
   08. GLOBAL SECTIONS
   ========================================================= */

main > section {
    position: relative;

    width: 100%;

    padding:
        var(--section-space)
        24px;

    border-top:
        1px solid var(--line-soft);

    isolation: isolate;
}

main > section:first-child {
    border-top: none;
}

main > section::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: min(
        var(--max-width),
        calc(100% - 48px)
    );

    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(193,160,92,.12),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   09. SECTION TITLES
   ========================================================= */

.section-title {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto 70px;

    position: relative;

    padding-left: 28px;
}

.section-title::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 2px;
    height: 72px;

    background:
        linear-gradient(
            180deg,
            var(--gold-light),
            var(--gold),
            transparent
        );
}

.section-title > span {
    display: block;

    margin-bottom: 22px;

    color: var(--gold-soft);

    font-family: "Manrope", sans-serif;
    font-size: .67rem;
    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;
}

.section-title h2 {
    max-width: 900px;

    margin:
        0 0 24px;

    color: var(--white);

    font-size:
        clamp(
            2.7rem,
            5vw,
            5rem
        );

    line-height: 1.02;
}

.section-title > p {
    max-width: 720px;

    margin: 0;

    color: var(--soft);

    font-size: 1rem;

    line-height: 1.85;
}


/* =========================================================
   10. HERO
   ========================================================= */

.hero {
    min-height: calc(100vh - 78px);

    display: grid;

    /*
       The hero remains visually full-width,
       but the content follows the same
       1240px system used by the rest
       of the website.
    */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 350px);

    align-items: center;

    gap: clamp(48px, 6vw, 82px);

    position: relative;

    overflow: hidden;

    padding-top: 90px;
    padding-bottom: 90px;

    padding-left:
        max(
            24px,
            calc((100% - var(--max-width)) / 2)
        );

    padding-right:
        max(
            24px,
            calc((100% - var(--max-width)) / 2)
        );

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(152,112,46,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 68%,
            rgba(209,212,216,.045),
            transparent 28%
        );
}


/* ---------------------------------------------------------
   3D ARCHITECTURAL GRID
--------------------------------------------------------- */

.hero::before {
    content: "";

    position: absolute;

    width: 950px;
    height: 650px;

    right: -330px;
    bottom: -310px;

    opacity: .46;

    background:
        linear-gradient(
            rgba(193,160,92,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(193,160,92,.12) 1px,
            transparent 1px
        );

    background-size:
        54px 54px;

    transform:
        perspective(950px)
        rotateX(64deg)
        rotateZ(-16deg);

    transform-origin: center;

    filter:
        drop-shadow(
            0 0 35px
            rgba(193,160,92,.04)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   ARCHITECTURAL VERTICAL / ORBIT
--------------------------------------------------------- */

.hero::after {
    content: "";

    position: absolute;

    width: 680px;
    height: 680px;

    right: -240px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(34deg);

    border:
        1px solid
        rgba(193,160,92,.08);

    box-shadow:
        0 0 90px
        rgba(193,160,92,.025),

        inset 0 0 80px
        rgba(193,160,92,.02);

    pointer-events: none;
}


/* ---------------------------------------------------------
   HERO CONTENT
--------------------------------------------------------- */

.hero-content {
    width: 100%;

    margin: 0;

    position: relative;

    z-index: 3;
}

.eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 28px;

    color: var(--gold-soft);

    font-family: "Manrope", sans-serif;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;
}

.eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

    margin-right: 12px;

    background:
        linear-gradient(
            90deg,
            var(--gold-soft),
            transparent
        );
}

.hero h1 {
    max-width: 920px;

    margin:
        0 0 32px;

    color: var(--white);

    font-size:
        clamp(
            4rem,
            7.5vw,
            8.2rem
        );

    line-height: .89;

    text-wrap: balance;

    text-shadow:
        0 0 40px
        rgba(255,255,255,.018);
}

.hero-description {
    max-width: 680px;

    margin:
        0 0 40px;

    color: var(--soft);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.18rem
        );

    line-height: 1.85;
}

.hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 48px;
}


/* ---------------------------------------------------------
   BUTTON SYSTEM
--------------------------------------------------------- */

.primary-button,
.secondary-button,
.pricing-button,
.experience-button {
    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding:
        0 24px;

    border: 1px solid transparent;

    font-family: "Manrope", sans-serif;

    font-size: .69rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;

    transition:
        transform .35s var(--ease),
        background .35s var(--ease),
        border-color .35s var(--ease),
        box-shadow .35s var(--ease),
        color .35s var(--ease);
}

.primary-button {
    color: #090A0B;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-soft)
        );

    border-color:
        rgba(220,197,142,.68);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.25),

        0 0 30px
        rgba(152,112,46,.06);
}

.primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 22px 48px
        rgba(0,0,0,.34),

        0 0 38px
        rgba(193,160,92,.08);
}

.primary-button span,
.secondary-button span,
.pricing-button span,
.experience-button span {
    font-size: 1rem;

    line-height: 1;
}

.secondary-button {
    color: var(--silver);

    background:
        rgba(255,255,255,.018);

    border-color:
        rgba(255,255,255,.14);
}

.secondary-button:hover {
    color: var(--white);

    border-color:
        rgba(193,160,92,.38);

    background:
        rgba(193,160,92,.055);

    transform: translateY(-3px);
}


/* ---------------------------------------------------------
   HERO META
--------------------------------------------------------- */

.hero-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0;

    max-width: 100%;

    color: var(--muted);

    font-family: "Manrope", sans-serif;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.hero-meta span {
    white-space: nowrap;
}

.hero-meta span:not(:last-child)::after {
    content: "·";

    margin:
        0 16px;

    color: var(--gold-dark);
}


/* =========================================================
   11. HERO SIGNATURE COLLECTION
   ========================================================= */

.hero-signature {
    width: 100%;

    max-width: 350px;

    margin: 0;

    position: relative;

    z-index: 3;

    justify-self: end;

    padding:
        22px 0 0;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}

.hero-signature::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 120px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-light),
            transparent
        );
}

.hero-signature::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -70px;
    top: 35px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(193,160,92,.045),
            transparent 70%
        );

    pointer-events: none;
}

.signature-label {
    display: block;

    margin-bottom: 18px;

    color: var(--muted);

    font-family: "Manrope", sans-serif;

    font-size: .61rem;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.signature-identities {
    display: flex;

    flex-direction: column;
}

.identity-item {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 58px;

    padding: 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    transition:
        padding .3s var(--ease),
        background .3s var(--ease);
}

.identity-item:last-child {
    border-bottom: none;
}

.identity-item:hover {
    padding-left: 9px;

    background:
        linear-gradient(
            90deg,
            rgba(193,160,92,.035),
            transparent
        );
}

.identity-number {
    min-width: 26px;

    color: var(--gold-soft);

    font-family: "Manrope", sans-serif;

    font-size: .61rem;
    font-weight: 800;

    letter-spacing: .1em;
}

.identity-name {
    color: var(--silver);

    font-family: "Manrope", sans-serif;

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition:
        color .3s ease;
}

.identity-item:hover .identity-name {
    color: var(--white);
}


/* =========================================================
   12. STANDARD SECTIONS
   ========================================================= */

.monarch-standard {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.008),
            transparent 38%
        );
}

.standard-grid {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 1px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid
        rgba(255,255,255,.06);
}

.standard-card {
    min-height: 285px;

    position: relative;

    padding:
        32px 28px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.007)
        );

    transform-style:
        preserve-3d;

    transition:
        transform .45s var(--ease),
        background .35s ease,
        box-shadow .35s ease;
}

.standard-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -85px;
    right: -85px;

    border-radius: 50%;

    border:
        1px solid
        rgba(193,160,92,.09);

    pointer-events: none;
}

.standard-card::after {
    content: "";

    position: absolute;

    left: 28px;
    bottom: 28px;

    width: 40px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold-soft),
            transparent
        );

    transition:
        width .35s var(--ease);
}

.standard-card:hover {
    z-index: 2;

    transform:
        translateY(-7px)
        perspective(700px)
        rotateX(1deg);

    background:
        linear-gradient(
            145deg,
            rgba(193,160,92,.05),
            rgba(255,255,255,.01)
        );

    box-shadow:
        0 28px 65px
        rgba(0,0,0,.30);
}

.standard-card:hover::after {
    width: 78px;
}

.standard-card > span {
    display: block;

    margin-bottom: 68px;

    color: var(--gold-soft);

    font-family: "Manrope", sans-serif;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.standard-card h3 {
    margin:
        0 0 14px;

    color: var(--white);

    font-size: 1.18rem;

    line-height: 1.3;
}

.standard-card p {
    max-width: 275px;

    margin: 0;

    color: var(--muted);

    font-size: .88rem;

    line-height: 1.8;
}


/* =========================================================
   13. ABOUT / WHY MONARCH
   ========================================================= */

.about-monarch {
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(193,160,92,.035),
            transparent 32%
        );
}

.about-content {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 95px;

    align-items: start;
}

.about-statement {
    padding-top: 10px;
}

.about-statement p {
    margin:
        0 0 28px;

    color: var(--soft);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.85rem
        );

    line-height: 1.55;
}

.about-statement p:last-child {
    margin-bottom: 0;

    color: var(--muted);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: .95rem;

    line-height: 1.9;
}

.about-principles {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 1px;

    background:
        rgba(255,255,255,.055);
}

.about-principle {
    min-height: 220px;

    padding: 29px;

    background:
        var(--surface);

    transition:
        background .3s ease,
        transform .35s var(--ease);
}

.about-principle:hover {
    background:
        linear-gradient(
            145deg,
            rgba(193,160,92,.045),
            var(--surface)
        );

    transform: translateY(-3px);
}

.about-principle > span {
    display: block;

    margin-bottom: 55px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .63rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.about-principle strong {
    display: block;

    margin-bottom: 12px;

    color: var(--white);

    font-size: .78rem;

    letter-spacing: .12em;
}

.about-principle p {
    margin: 0;

    color: var(--muted);

    font-size: .84rem;

    line-height: 1.75;
}


/* =========================================================
   14. PROCESS
   ========================================================= */

.process {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.008),
            transparent
        );
}

.process-grid {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 1px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid
        rgba(255,255,255,.06);
}

.process-step {
    min-height: 305px;

    position: relative;

    padding: 30px;

    overflow: hidden;

    background:
        var(--surface);

    transform-style:
        preserve-3d;

    transition:
        transform .4s var(--ease),
        background .35s ease;
}

.process-step::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -85px;
    bottom: -85px;

    border-radius: 50%;

    border:
        1px solid
        rgba(193,160,92,.09);
}

.process-step:hover {
    transform:
        translateY(-6px)
        perspective(700px)
        rotateX(1deg);

    background:
        linear-gradient(
            145deg,
            rgba(193,160,92,.045),
            var(--surface)
        );
}

.process-step > span {
    display: block;

    margin-bottom: 80px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.process-step h3 {
    margin:
        0 0 14px;

    color: var(--white);

    font-size: 1.2rem;
}

.process-step p {
    max-width: 270px;

    margin: 0;

    color: var(--muted);

    font-size: .86rem;

    line-height: 1.8;
}


/* =========================================================
   15. SIGNATURE COLLECTION
   ========================================================= */

.signature-collection {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(193,160,92,.05),
            transparent 38%
        );
}

.collection-grid {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    perspective: 1400px;
}

.collection-card {
    min-height: 590px;

    position: relative;

    display: flex;

    flex-direction: column;

    padding: 24px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            145deg,
            #11151C,
            #090C11
        );

    box-shadow:
        var(--shadow-sm);

    transform-style:
        preserve-3d;

    transition:
        transform .55s var(--ease),
        border-color .45s ease,
        box-shadow .45s ease;
}

.collection-card::before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px solid
        rgba(255,255,255,.025);

    pointer-events: none;
}

.collection-card::after {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    top: -135px;
    right: -135px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(193,160,92,.12),
            transparent 70%
        );

    pointer-events: none;
}

.collection-card:hover {
    transform:
        translateY(-11px)
        rotateX(1deg)
        rotateY(-1deg);

    border-color:
        rgba(193,160,92,.30);

    box-shadow:
        0 40px 95px
        rgba(0,0,0,.48);
}

.collection-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 2;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.collection-card-top span {
    color: var(--muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .60rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.collection-card-top span:first-child {
    color: var(--gold-soft);
}

.collection-mark {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 1;

    color: transparent;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            10rem,
            15vw,
            16rem
        );

    font-weight: 500;

    line-height: 1;

    -webkit-text-stroke:
        1px rgba(193,160,92,.28);

    text-shadow:
        0 0 55px
        rgba(193,160,92,.08);
}

.collection-card-content {
    position: relative;

    z-index: 2;
}

.collection-card-content h3 {
    margin:
        0 0 12px;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.65rem;

    font-weight: 500;
}

.collection-card-content p {
    min-height: 58px;

    margin:
        0 0 24px;

    color: var(--muted);

    font-size: .85rem;

    line-height: 1.75;
}

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .67rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition:
        gap .3s var(--ease),
        color .3s ease;
}

.text-link span {
    font-size: 1rem;

    line-height: 1;
}

.text-link:hover {
    gap: 15px;

    color: var(--gold-light);
}


/* =========================================================
   16. PRICING
   ========================================================= */

.pricing {
    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(193,160,92,.045),
            transparent 36%
        );
}

.pricing-grid {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    align-items: stretch;

    perspective: 1400px;
}

.pricing-card {
    min-height: 700px;

    display: flex;

    flex-direction: column;

    position: relative;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.008)
        );

    box-shadow:
        var(--shadow-sm);

    transform-style:
        preserve-3d;

    transition:
        transform .45s var(--ease),
        border-color .4s ease,
        box-shadow .4s ease;
}

.pricing-card::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(193,160,92,.035),
            transparent 35%
        );
}

.pricing-card:hover {
    transform:
        translateY(-8px)
        rotateX(1deg);

    border-color:
        rgba(193,160,92,.22);

    box-shadow:
        0 38px 85px
        rgba(0,0,0,.38);
}

.pricing-card-featured {
    border-color:
        rgba(193,160,92,.38);

    background:
        linear-gradient(
            145deg,
            rgba(193,160,92,.085),
            rgba(255,255,255,.012) 40%,
            rgba(255,255,255,.008)
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.36),

        inset 0 1px 0
        rgba(220,197,142,.08);
}

.pricing-card-featured::after {
    content: "";

    position: absolute;

    top: 0;

    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-light),
            transparent
        );
}

.pricing-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 45px;

    position: relative;

    z-index: 2;
}

.pricing-card-header span {
    color: var(--muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.pricing-card-header span:first-child {
    color: var(--gold-soft);
}

.pricing-card-featured
.pricing-card-header
span:last-child {
    color: var(--gold-light);
}

.pricing-price {
    position: relative;

    z-index: 2;

    margin-bottom: 10px;
}

.pricing-price small {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .60rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.pricing-price strong {
    display: block;

    color: var(--white);

    font-size:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    font-weight: 700;

    letter-spacing: -.06em;

    line-height: 1;
}

.deposit-line {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        24px 0 8px;

    padding:
        13px 0;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    position: relative;

    z-index: 2;
}

.deposit-line span {
    color: var(--muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .60rem;

    font-weight: 800;

    letter-spacing: .1em;
}

.deposit-line strong {
    color: var(--gold-light);

    font-size: .78rem;
}

.pricing-card > .deposit-note {
    min-height: 40px;

    margin:
        0 0 30px;

    color: var(--muted);

    font-size: .72rem;

    line-height: 1.65;

    position: relative;

    z-index: 2;
}

.pricing-card > h3 {
    margin:
        0 0 15px;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.75rem;

    font-weight: 500;

    line-height: 1.15;

    position: relative;

    z-index: 2;
}

.pricing-card > p:not(.deposit-note) {
    margin:
        0 0 26px;

    color: var(--soft);

    font-size: .86rem;

    line-height: 1.75;

    position: relative;

    z-index: 2;
}

.pricing-card ul {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin:
        0 0 34px;

    padding: 0;

    list-style: none;

    position: relative;

    z-index: 2;
}

.pricing-card li {
    position: relative;

    padding-left: 20px;

    color: var(--silver-soft);

    font-size: .80rem;

    line-height: 1.6;
}

.pricing-card li::before {
    content: "—";

    position: absolute;

    left: 0;
    top: 0;

    color: var(--gold-soft);
}

.pricing-button {
    width: 100%;

    margin-top: auto;

    color: var(--white);

    border:
        1px solid
        rgba(193,160,92,.30);

    background:
        rgba(193,160,92,.055);
}

.pricing-button:hover {
    color: #090A0B;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-soft)
        );

    border-color:
        var(--gold-light);

    transform: translateY(-3px);
}

.pricing-card-featured .pricing-button {
    color: #090A0B;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-soft)
        );

    border-color:
        rgba(220,197,142,.65);
}

.pricing-card-featured
.pricing-button:hover {
    box-shadow:
        0 15px 35px
        rgba(0,0,0,.30);
}

.pricing-note {
    display: block;

    margin-top: 15px;

    color: var(--muted);

    font-size: .62rem;

    line-height: 1.5;

    text-align: center;
}

.pricing-promo {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        35px auto 0;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 30px;

    padding:
        24px 28px;

    border:
        1px solid
        rgba(193,160,92,.16);

    background:
        linear-gradient(
            90deg,
            rgba(193,160,92,.045),
            rgba(255,255,255,.012)
        );
}

.pricing-promo > span {
    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .15em;
}

.pricing-promo p {
    margin: 0;

    color: var(--soft);

    font-size: .82rem;

    line-height: 1.7;
}

.pricing-promo small {
    color: var(--muted);

    font-size: .65rem;
}

.pricing-promo .text-link {
    justify-self: end;
}


/* =========================================================
   17. PRIVATE OFFERS / LIVE EXPERIENCES
   ========================================================= */

.live-experiences {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.008),
            transparent
        );
}

.demo-grid {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    perspective: 1400px;
}

.demo-card {
    min-height: 330px;

    position: relative;

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 28px;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.008)
        );

    transform-style:
        preserve-3d;

    transition:
        transform .45s var(--ease),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.demo-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -90px;

    border-radius: 50%;

    border:
        1px solid
        rgba(193,160,92,.10);
}

.demo-card:hover {
    transform:
        translateY(-8px)
        rotateX(1deg);

    border-color:
        rgba(193,160,92,.25);

    background:
        linear-gradient(
            145deg,
            rgba(193,160,92,.055),
            rgba(255,255,255,.008)
        );

    box-shadow:
        0 30px 78px
        rgba(0,0,0,.38);
}

.demo-emblem {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(193,160,92,.26);

    color: var(--gold-soft);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.3rem;

    background:
        radial-gradient(
            circle,
            rgba(193,160,92,.08),
            transparent 72%
        );

    transform:
        translateZ(18px);
}

.demo-card-content {
    position: relative;

    z-index: 2;
}

.demo-card-content > span {
    display: block;

    margin-bottom: 18px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .61rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.demo-card-content h3 {
    margin:
        0 0 15px;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.55rem;

    font-weight: 500;

    line-height: 1.2;
}

.demo-card-content p {
    margin:
        0 0 26px;

    color: var(--muted);

    font-size: .83rem;

    line-height: 1.8;
}

.demo-card-content .text-link {
    margin-top: auto;
}


/* =========================================================
   18. CLIENT EXPERIENCES
   ========================================================= */

.client-experiences {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(193,160,92,.04),
            transparent 36%
        );
}

.experience-feature {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto 80px;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 50px;

    align-items: center;

    padding:
        45px;

    position: relative;

    border:
        1px solid
        rgba(193,160,92,.18);

    background:
        linear-gradient(
            135deg,
            rgba(193,160,92,.055),
            rgba(255,255,255,.012)
        );

    box-shadow:
        var(--shadow-md);
}

.experience-feature::before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px solid
        rgba(255,255,255,.025);

    pointer-events: none;
}

.experience-intro {
    position: relative;

    z-index: 2;
}

.experience-label {
    display: block;

    margin-bottom: 22px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .16em;
}

.experience-rating-mark {
    margin-bottom: 16px;

    color: transparent;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            5rem,
            10vw,
            9rem
        );

    line-height: .8;

    -webkit-text-stroke:
        1px rgba(193,160,92,.28);
}

.experience-intro h3 {
    margin:
        0 0 18px;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.6rem
        );

    font-weight: 500;

    line-height: 1.15;
}

.experience-intro p {
    max-width: 650px;

    margin: 0;

    color: var(--muted);

    font-size: .86rem;

    line-height: 1.8;
}

.rating-stars {
    display: flex;

    align-items: center;

    gap: 5px;

    position: relative;

    z-index: 2;
}

.rating-stars span {
    color: var(--gold-soft);

    font-size: 1.5rem;

    line-height: 1;

    opacity: .85;
}

#review-count {
    grid-column: 1 / -1;

    margin:
        -20px 0 0;

    color: var(--muted);

    font-size: .72rem;

    position: relative;

    z-index: 2;
}

.published-experiences {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto 60px;
}

.experience-section-heading {
    margin-bottom: 30px;
}

.experience-section-heading > span {
    display: block;

    margin-bottom: 14px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .16em;
}

.experience-section-heading h3 {
    margin: 0;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size: 2.2rem;

    font-weight: 500;

    line-height: 1.15;
}

.review-list {
    min-height: 180px;

    display: grid;

    grid-template-columns:
        1fr;

    gap: 15px;
}

.review-empty-state {
    min-height: 160px;

    display: flex;

    align-items: center;

    padding: 30px;

    border:
        1px dashed
        rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.012);
}

.review-empty-number {
    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .15em;
}

.share-experience {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 40px;

    align-items: center;

    padding: 38px;

    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );
}

.share-experience-copy > span {
    display: block;

    margin-bottom: 14px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .61rem;

    font-weight: 800;

    letter-spacing: .16em;
}

.share-experience-copy h3 {
    margin:
        0 0 14px;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size: 2rem;

    font-weight: 500;

    line-height: 1.1;
}

.share-experience-copy p {
    max-width: 620px;

    margin: 0;

    color: var(--muted);

    font-size: .82rem;

    line-height: 1.8;
}

.experience-button {
    color: var(--gold-light);

    border:
        1px solid
        rgba(193,160,92,.30);

    background:
        rgba(193,160,92,.045);
}

.experience-button:hover {
    color: #090A0B;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-soft)
        );

    transform:
        translateY(-3px);
}


/* =========================================================
   19. REVIEW FORM
   ========================================================= */

.review-form-wrapper {
    width: min(
        900px,
        100%
    );

    margin:
        30px auto 0;

    padding:
        40px;

    border:
        1px solid
        rgba(193,160,92,.22);

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(193,160,92,.06),
            transparent 35%
        ),
        var(--surface);

    box-shadow:
        var(--shadow-md);
}

.review-form-header {
    margin-bottom: 35px;
}

.review-form-header > span {
    display: block;

    margin-bottom: 15px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .16em;
}

.review-form-header h3 {
    margin:
        0 0 12px;

    color: var(--white);

    font-family:
        "Playfair Display",
        serif;

    font-size: 2.2rem;

    font-weight: 500;
}

.review-form-header p {
    margin: 0;

    color: var(--muted);

    font-size: .82rem;
}

.client-review-form {
    display: flex;

    flex-direction: column;

    gap: 24px;
}

.review-field {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.review-field label {
    color: var(--silver);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}

.field-description,
.field-note {
    margin:
        -2px 0 2px;

    color: var(--muted);

    font-size: .72rem;
}

.review-field input,
.review-field textarea {
    width: 100%;

    padding:
        14px 15px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 0;

    outline: none;

    background:
        rgba(255,255,255,.025);

    color: var(--white);

    transition:
        border-color .25s var(--ease),
        background .25s var(--ease),
        box-shadow .25s var(--ease);
}

.review-field input::placeholder,
.review-field textarea::placeholder {
    color: #555B63;
}

.review-field input:focus,
.review-field textarea:focus {
    border-color:
        rgba(193,160,92,.50);

    background:
        rgba(193,160,92,.025);

    box-shadow:
        0 0 0 3px
        rgba(193,160,92,.055);
}

.review-field textarea {
    min-height: 150px;

    resize: vertical;
}

.review-rating-field {
    padding:
        24px;

    border:
        1px solid
        rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.012);
}

.rating-selector {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;
}

.rating-selector .rating-star {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(193,160,92,.22);

    background:
        rgba(193,160,92,.035);

    color: var(--gold-soft);

    font-size: 1.25rem;

    transition:
        transform .25s var(--ease),
        background .25s var(--ease),
        border-color .25s var(--ease),
        color .25s var(--ease);
}

.rating-selector .rating-star:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(193,160,92,.55);

    background:
        rgba(193,160,92,.10);
}

.rating-selector .rating-star.selected {
    color: #090A0B;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-soft)
        );

    border-color:
        var(--gold-light);
}

.selected-rating {
    margin-top: 12px;

    color: var(--muted);

    font-size: .72rem;
}

.review-consent {
    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.012);
}

.review-consent label {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: var(--muted);

    font-size: .73rem;

    line-height: 1.65;
}

.review-consent input {
    margin-top: 4px;

    accent-color:
        var(--gold-soft);
}

.review-form-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}

.review-submit,
.review-cancel {
    min-height: 50px;

    padding:
        0 22px;

    border:
        1px solid
        rgba(193,160,92,.30);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

    transition:
        transform .3s var(--ease),
        background .3s var(--ease),
        border-color .3s var(--ease),
        color .3s var(--ease);
}

.review-submit {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #090A0B;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-soft)
        );
}

.review-submit span {
    font-size: 1rem;
}

.review-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.28);
}

.review-cancel {
    color: var(--silver-soft);

    background:
        rgba(255,255,255,.018);
}

.review-cancel:hover {
    color: var(--white);

    border-color:
        rgba(255,255,255,.20);
}

.review-form-status {
    min-height: 20px;

    color: var(--gold-soft);

    font-size: .75rem;
}

.experience-footer-note {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        60px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    color: var(--muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .59rem;

    font-weight: 800;

    letter-spacing: .16em;

    text-align: center;
}


/* =========================================================
   20. FINAL CTA
   ========================================================= */

.final-cta {
    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(193,160,92,.09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #080B10,
            #05070A
        );
}

.final-cta::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    border:
        1px solid
        rgba(193,160,92,.075);

    box-shadow:
        inset 0 0 110px
        rgba(193,160,92,.018);

    pointer-events: none;
}

.final-cta::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 1px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%)
        rotate(-45deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(193,160,92,.25),
            transparent
        );

    pointer-events: none;
}

.final-cta-content {
    width: min(
        900px,
        100%
    );

    position: relative;

    z-index: 2;

    text-align: center;
}

.final-cta-content > span {
    display: block;

    margin-bottom: 25px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .64rem;

    font-weight: 800;

    letter-spacing: .20em;
}

.final-cta-content h2 {
    margin:
        0 0 25px;

    color: var(--white);

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height: .95;
}

.final-cta-content > p {
    max-width: 650px;

    margin:
        0 auto 35px;

    color: var(--soft);

    font-size: .95rem;

    line-height: 1.85;
}

.final-cta-content > .primary-button {
    margin-bottom: 30px;
}

.cta-policy-note {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    color: var(--muted);

    font-size: .65rem;
}

.cta-policy-note a {
    color: var(--silver-soft);

    text-decoration:
        underline;

    text-decoration-color:
        rgba(193,160,92,.35);

    text-underline-offset: 4px;

    transition:
        color .25s var(--ease);
}

.cta-policy-note a:hover {
    color: var(--gold-light);
}


/* =========================================================
   21. FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    z-index: 1;

    padding:
        90px 24px
        30px;

    background:
        #040609;

    border-top:
        1px solid
        rgba(255,255,255,.06);
}

.footer-top {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1.3fr .8fr .8fr;

    gap: 80px;

    padding-bottom: 70px;
}

.footer-brand > span {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--white);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.footer-brand p {
    margin: 0;

    color: var(--muted);

    font-size: .82rem;

    line-height: 1.8;
}

.footer-navigation,
.footer-contact {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.footer-navigation > span,
.footer-contact > span {
    margin-bottom: 20px;

    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .61rem;

    font-weight: 800;

    letter-spacing: .16em;
}

.footer-navigation a {
    margin-bottom: 10px;

    color: var(--muted);

    font-size: .75rem;

    transition:
        color .25s var(--ease),
        transform .25s var(--ease);
}

.footer-navigation a:hover {
    color: var(--white);

    transform:
        translateX(4px);
}

.footer-contact > a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.footer-contact > a span {
    font-size: 1rem;

    transition:
        transform .25s var(--ease);
}

.footer-contact > a:hover span {
    transform:
        translate(3px,-3px);
}

.footer-policy-navigation {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    padding:
        22px 0;

    border-top:
        1px solid
        rgba(255,255,255,.055);

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}

.footer-policy-navigation > span {
    color: var(--gold-soft);

    font-family:
        "Manrope",
        sans-serif;

    font-size: .59rem;

    font-weight: 800;

    letter-spacing: .14em;
}

.footer-policy-navigation a {
    color: var(--muted);

    font-size: .68rem;

    transition:
        color .25s var(--ease);
}

.footer-policy-navigation a:hover {
    color: var(--silver);
}

.footer-bottom {
    width: min(
        var(--max-width),
        100%
    );

    margin:
        0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 24px;

    color: #50555D;

    font-family:
        "Manrope",
        sans-serif;

    font-size: .61rem;

    letter-spacing: .04em;
}


/* =========================================================
   22. TABLET
   ========================================================= */

@media (max-width: 1050px) {

    :root {
        --section-space: 120px;
    }

    .navbar {
        width:
            min(
                var(--max-width),
                calc(100% - 36px)
            );
    }

    .nav-links {
        gap: 18px;
    }

    .nav-links > a:not(.nav-cta) {
        font-size: .63rem;
    }

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 320px);

        gap:
            clamp(42px, 5vw, 65px);
    }

    .hero h1 {
        font-size:
            clamp(
                4rem,
                8.5vw,
                7rem
            );
    }

    .hero-signature {
        max-width: 320px;
    }

    .standard-grid,
    .process-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .collection-grid,
    .pricing-grid,
    .demo-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .collection-card:last-child,
    .pricing-card:last-child,
    .demo-card:last-child {
        grid-column: 1 / -1;

        max-width:
            calc(50% - 9px);

        width: 100%;

        justify-self: center;
    }

    .about-content {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .footer-top {
        grid-template-columns:
            1fr 1fr;
    }

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

    .pricing-promo {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .pricing-promo .text-link {
        justify-self: start;
    }
}


/* =========================================================
   23. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .site-header {
        position: sticky;
    }

    .navbar {
        width:
            min(
                var(--max-width),
                calc(100% - 32px)
            );

        min-height: 72px;

        padding:
            14px 0;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        position: relative;
    }

    .brand {
        position: relative;

        z-index: 1002;
    }

    .mobile-menu-button {
        width: 44px;
        height: 44px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 5px;

        flex-shrink: 0;

        padding: 0;

        border:
            1px solid
            rgba(193,160,92,.25);

        background:
            rgba(11,15,21,.90);

        color:
            var(--gold-soft);

        position: relative;

        z-index: 1002;

        transition:
            border-color .3s ease,
            background .3s ease;
    }

    .mobile-menu-button span {
        display: block;

        width: 18px;
        height: 1px;

        background:
            var(--gold-soft);

        transition:
            transform .3s ease,
            opacity .3s ease;
    }

    .mobile-menu-button:hover {
        border-color:
            rgba(193,160,92,.55);

        background:
            rgba(18,24,33,.96);
    }

    .nav-links {
        position: absolute;

        top:
            calc(100% + 1px);

        left: 0;
        right: 0;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            18px 24px 26px;

        background:
            linear-gradient(
                180deg,
                rgba(8,11,16,.99),
                rgba(5,7,10,.99)
            );

        border-top:
            1px solid
            rgba(193,160,92,.15);

        border-bottom:
            1px solid
            rgba(193,160,92,.12);

        box-shadow:
            0 30px 70px
            rgba(0,0,0,.55);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-12px);

        transition:
            opacity .3s ease,
            transform .3s ease,
            visibility .3s ease;

        z-index: 1001;
    }

    .nav-links > a {
        width: 100%;

        padding:
            17px 4px;

        border-bottom:
            1px solid
            rgba(255,255,255,.06);

        font-size:
            11px;

        letter-spacing:
            .14em;
    }

    .nav-links >
    a:not(.nav-cta)::after {
        display: none;
    }

    .nav-links > a:last-child {
        border-bottom: none;
    }

    .nav-links .nav-cta {
        margin-top: 14px;

        padding:
            15px 18px;

        text-align: center;
    }

    .mobile-menu-toggle:checked ~ .nav-links {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }

    .mobile-menu-toggle:checked
    + .mobile-menu-button
    span:nth-child(1) {
        transform:
            translateY(6px)
            rotate(45deg);
    }

    .mobile-menu-toggle:checked
    + .mobile-menu-button
    span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle:checked
    + .mobile-menu-button
    span:nth-child(3) {
        transform:
            translateY(-6px)
            rotate(-45deg);
    }


    /* =====================================================
       HERO MOBILE
    ===================================================== */

    .hero {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 54px;

        padding-top:
            82px;

        padding-bottom:
            76px;

        padding-left:
            24px;

        padding-right:
            24px;
    }

    .hero::before {
        width: 760px;
        height: 520px;

        right: -340px;
        bottom: -280px;

        opacity: .24;
    }

    .hero::after {
        width: 520px;
        height: 520px;

        right: -240px;
    }

    .hero-content {
        width: 100%;
    }

    .hero-signature {
        width: 100%;

        max-width: none;

        justify-self: stretch;
    }

    .collection-grid,
    .pricing-grid,
    .demo-grid {
        grid-template-columns:
            1fr;
    }

    .collection-card:last-child,
    .pricing-card:last-child,
    .demo-card:last-child {
        grid-column: auto;

        max-width: none;
    }
}


/* =========================================================
   24. MOBILE
   ========================================================= */

@media (max-width: 760px) {

    :root {
        --section-space: 95px;
    }

    body {
        font-size: 15px;
    }

    main > section {
        padding-left: 18px;
        padding-right: 18px;
    }

    main > section::after {
        width:
            calc(100% - 36px);
    }

    .hero {
        padding-top:
            76px;

        padding-bottom:
            70px;

        padding-left:
            18px;

        padding-right:
            18px;
    }

    .hero h1 {
        font-size:
            clamp(
                3.3rem,
                16.5vw,
                5.8rem
            );
    }

    .hero-description {
        font-size: .92rem;
    }

    .hero-actions {
        align-items: stretch;

        flex-direction: column;

        max-width: 360px;

        margin-bottom: 35px;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }

    .hero-meta {
        display: flex;

        align-items: center;

        justify-content:
            space-between;

        flex-wrap: nowrap;

        width: 100%;

        gap: 5px;

        overflow: visible;
    }

    .hero-meta span {
        flex:
            0 0 auto;

        font-size:
            .51rem;

        letter-spacing:
            .10em;

        white-space:
            nowrap;
    }

    .hero-meta span:not(:last-child)::after {
        margin:
            0 6px;
    }

    .hero-signature {
        padding-top:
            20px;
    }

    .signature-label {
        margin-bottom:
            14px;

        font-size:
            .56rem;

        letter-spacing:
            .15em;
    }

    .identity-item {
        min-height:
            55px;
    }

    .identity-name {
        font-size:
            .70rem;
    }

    .standard-grid,
    .process-grid {
        grid-template-columns:
            1fr;
    }

    .standard-card,
    .process-step {
        min-height:
            250px;
    }

    .about-principles {
        grid-template-columns:
            1fr;
    }

    .collection-card {
        min-height:
            540px;
    }

    .pricing-card {
        min-height:
            auto;
    }

    .demo-card {
        min-height:
            300px;
    }

    .experience-feature {
        grid-template-columns:
            1fr;

        padding:
            30px;

        gap:
            35px;
    }

    .rating-stars {
        justify-content:
            flex-start;
    }

    #review-count {
        grid-column:
            auto;
    }

    .share-experience {
        grid-template-columns:
            1fr;

        padding:
            30px;
    }

    .review-form-wrapper {
        padding:
            28px 22px;
    }

    .review-form-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .review-submit,
    .review-cancel {
        width: 100%;
    }

    .final-cta {
        min-height:
            540px;
    }

    .final-cta::before {
        width:
            430px;

        height:
            430px;
    }

    .final-cta-content h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                5rem
            );
    }

    .footer-top {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

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

    .footer-policy-navigation {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }

    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;
    }
}


/* =========================================================
   25. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --section-space: 80px;
    }

    .navbar {
        width:
            calc(100% - 28px);

        min-height:
            68px;

        padding:
            0;
    }

    .brand {
        font-size:
            .88rem;

        letter-spacing:
            .10em;
    }

    .mobile-menu-button {
        width:
            42px;

        height:
            42px;
    }

    .nav-links {
        padding-left:
            18px;

        padding-right:
            18px;
    }

    .hero {
        padding-top:
            68px;

        padding-left:
            18px;

        padding-right:
            18px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.95rem,
                18vw,
                4.5rem
            );
    }

    .hero-description {
        font-size:
            .86rem;
    }

    /* FORCE ALL THREE HERO WORDS ON ONE LINE */

    .hero-meta {
        display:
            flex;

        flex-direction:
            row;

        flex-wrap:
            nowrap;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            2px;

        width:
            100%;
    }

    .hero-meta span {
        flex:
            0 0 auto;

        font-size:
            .46rem;

        letter-spacing:
            .065em;

        white-space:
            nowrap;
    }

    .hero-meta span:not(:last-child)::after {
        display:
            inline;

        margin:
            0 4px;

        color:
            var(--gold-dark);
    }

    .hero-signature {
        padding-top:
            18px;
    }

    .signature-label {
        font-size:
            .52rem;

        letter-spacing:
            .12em;
    }

    .identity-item {
        min-height:
            52px;

        gap:
            14px;
    }

    .identity-number {
        min-width:
            22px;

        font-size:
            .56rem;
    }

    .identity-name {
        font-size:
            .65rem;

        letter-spacing:
            .055em;
    }

    .section-title {
        padding-left:
            16px;
    }

    .section-title > span {
        font-size:
            .57rem;
    }

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

    .section-title > p {
        font-size:
            .84rem;
    }

    .standard-card,
    .process-step {
        padding:
            24px;
    }

    .standard-card > span,
    .process-step > span {
        margin-bottom:
            55px;
    }

    .collection-card {
        min-height:
            500px;

        padding:
            20px;
    }

    .collection-mark {
        font-size:
            10rem;
    }

    .pricing-card {
        padding:
            24px;
    }

    .pricing-price strong {
        font-size:
            2.8rem;
    }

    .deposit-line {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;
    }

    .demo-card {
        grid-template-columns:
            1fr;

        gap:
            24px;

        padding:
            24px;
    }

    .demo-emblem {
        width:
            50px;

        height:
            50px;
    }

    .experience-feature {
        padding:
            24px;
    }

    .experience-intro h3 {
        font-size:
            1.6rem;
    }

    .rating-stars span {
        font-size:
            1.25rem;
    }

    .share-experience {
        padding:
            24px;
    }

    .share-experience-copy h3 {
        font-size:
            1.7rem;
    }

    .review-form-wrapper {
        padding:
            24px 18px;
    }

    .review-rating-field {
        padding:
            18px;
    }

    .rating-selector {
        gap:
            5px;
    }

    .rating-selector .rating-star {
        width:
            38px;

        height:
            38px;
    }

    .cta-policy-note {
        align-items:
            center;

        flex-direction:
            column;

        gap:
            4px;
    }

    .site-footer {
        padding-left:
            18px;

        padding-right:
            18px;
    }
}


/* =========================================================
   26. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}
/* =========================================================
   FLOATING WHATSAPP CHAT — ULTRA SUBTLE
========================================================= */

.whatsapp-chat {
    position: fixed;

    right: 26px;
    bottom: 26px;

    z-index: 99999;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

    transition:
        opacity .6s ease,
        transform .6s ease,
        visibility .6s ease;
}


/* =========================================================
   HIDDEN
========================================================= */

.whatsapp-chat.whatsapp-hidden {
    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.whatsapp-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

    background: none;

    border: none;

    border-radius: 0;

    box-shadow: none;
}


/* Remove all decorative effects */

.whatsapp-icon::before,
.whatsapp-icon::after {
    display: none;
}


/* =========================================================
   VERY SUBTLE WHATSAPP ICON
========================================================= */

.whatsapp-icon svg {
    width: 27px;
    height: 27px;

    display: block;

    fill: #9E916F;

    opacity: .38;

    filter:
        drop-shadow(
            0 0 3px
            rgba(158,145,111,.08)
        );

    transition:
        transform .3s ease,
        fill .3s ease,
        opacity .3s ease,
        filter .3s ease;
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .whatsapp-chat:hover .whatsapp-icon svg {

        transform:
            scale(1.05);

        fill: #C1AF7D;

        opacity: .65;

        filter:
            drop-shadow(
                0 0 5px
                rgba(193,175,125,.14)
            );
    }

}


/* =========================================================
   CHAT WITH US
========================================================= */

.whatsapp-label {
    max-width: 0;

    overflow: hidden;

    white-space: nowrap;

    opacity: 0;

    color: #A99B75;

    font-family:
        "Manrope",
        sans-serif;

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

    transform:
        translateX(4px);

    transition:
        max-width .35s ease,
        opacity .3s ease,
        transform .35s ease;
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

    .whatsapp-chat:hover .whatsapp-label {

        max-width: 110px;

        opacity: .55;

        transform:
            translateX(0);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .whatsapp-chat {

        right: 16px;
        bottom: 16px;
    }


    .whatsapp-icon {

        width: 42px;
        height: 42px;
    }


    .whatsapp-icon svg {

        width: 25px;
        height: 25px;
    }


    .whatsapp-chat:not(.whatsapp-hidden)
    .whatsapp-label {

        max-width: 100px;

        opacity: .50;

        transform:
            translateX(0);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .whatsapp-chat {

        right: 13px;
        bottom: 13px;
    }


    .whatsapp-icon {

        width: 40px;
        height: 40px;
    }


    .whatsapp-icon svg {

        width: 24px;
        height: 24px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .whatsapp-chat,
    .whatsapp-icon,
    .whatsapp-label,
    .whatsapp-icon svg {

        transition: none !important;
    }

}