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

:root {
    --bg: #f4f2ed;
    --text: #111111;
    --muted: #74736f;
    --line: rgba(17,17,17,0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}


/* =========================
   WELCOME ENTRY
========================= */

.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 25px;

    background:
        radial-gradient(circle at 50% 40%, #2b2b2b 0%, #151515 38%, #090909 100%);

    transition:
        opacity .75s ease,
        transform .85s cubic-bezier(.2,.8,.2,1);
}

.welcome-card {
    width: min(620px, 100%);
    min-height: 430px;

    padding: 48px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

color: #2b171a;

    border: 1px solid rgba(255, 190, 190, 0.18);
    border-radius: 32px;

   background:
    radial-gradient(
        circle at 22% 12%,
        rgba(255, 245, 241, 0.88),
        transparent 30%
    ),
    radial-gradient(
        circle at 85% 85%,
        rgba(151, 63, 72, 0.30),
        transparent 42%
    ),
    linear-gradient(
        140deg,
        #f6d5d0 0%,
        #e9a9aa 42%,
        #c97880 100%
    );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 40px 100px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);

    animation: welcomeCardIn .9s cubic-bezier(.2,.8,.2,1);
}

@keyframes welcomeCardIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.97);
    }

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

.welcome-brand {
    position: absolute;
    top: 32px;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
}
.welcome-small {
    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: rgba(72, 38, 42, 0.62);
}
.welcome-card h1 {
    font-size: clamp(44px, 7vw, 76px);
    line-height: .98;
    letter-spacing: -4px;
    font-weight: 600;
}

.welcome-text {
    max-width: 410px;

    margin-top: 22px;

  color: rgba(72, 38, 42, 0.62);

    font-size: 16px;
    font-weight: 500;
    line-height: 1.65;
}
.welcome-card button {
    margin-top: 36px;

    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 100px;

    padding: 16px 22px 16px 26px;

    display: flex;
    align-items: center;
    gap: 26px;

    background: rgba(49, 23, 27, 0.92);
    color: #fff8f5;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;

    box-shadow:
        0 12px 30px rgba(78, 31, 38, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.16);

    cursor: pointer;
    transition: .3s ease;
}
.welcome-card button span {
    font-size: 17px;
}

.welcome-card button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,255,255,.13);
}

.welcome-exit {
    opacity: 0;
    transform: scale(1.035);
    pointer-events: none;
}


/* =========================
   HEADER
========================= */

.main-header {
    width: 100%;
    height: 88px;

    padding: 0 5.5vw;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    border-bottom: 1px solid var(--line);
}

.brand {
    color: #111;
    text-decoration: none;

    font-size: 17px;
    font-weight: 900;
    letter-spacing: 5px;
}

.main-header nav {
    display: flex;
    gap: 38px;
}

.main-header nav a {
    position: relative;

    color: #222;
    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
}

.main-header nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: #111;

    transition: width .3s ease;
}

.main-header nav a:hover::after {
    width: 100%;
}

.header-actions {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 15px;
}

.search-button {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;
}

.search-button svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: #111;
    stroke-width: 1.6;
}

.account-button {
    padding: 12px 18px;

    border-radius: 100px;

    background: #111;
    color: white;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
}


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

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

    padding: 105px 6vw 80px;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(214, 154, 158, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 65%,
            rgba(255, 255, 255, 0.75),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f7f5f0 0%,
            #f1eee8 55%,
            #eee8e5 100%
        );
}
.hero::before {
    content: "";

    position: absolute;
    width: 720px;
    height: 720px;

    top: -390px;
    right: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(226, 174, 177, 0.24) 0%,
            rgba(236, 202, 200, 0.13) 38%,
            rgba(255, 255, 255, 0) 72%
        );

    filter: blur(10px);

    pointer-events: none;
}
.hero-label {
    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: #77746e;
}

.hero > h1 {
    position: relative;
    z-index: 2;

    max-width: 1080px;

    font-size: clamp(68px, 8.7vw, 136px);
    line-height: .86;

    letter-spacing: -7px;
    font-weight: 500;

    color: #181414;
}
.hero > h1 span {
    color: #9b696d;
    font-weight: 500;
}
.hero-description {
    width: min(460px, 100%);

    margin-top: 35px;

    font-size: 15px;
    line-height: 1.7;

    color: #686660;
}

.hero-actions {
    margin-top: 30px;

    display: flex;
    align-items: center;
    gap: 25px;
}

.primary-button {
    padding: 15px 20px 15px 23px;

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

    border-radius: 100px;

    background: #111;
    color: white;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition: .3s ease;
}

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

.primary-button span {
    font-size: 17px;
}

.secondary-button {
    color: #333;

    font-size: 12px;
    font-weight: 600;

    text-underline-offset: 5px;
}


/* =========================
   PRODUCT SHOWCASE
========================= */

.hero-showcase {
    max-width: 1180px;

    margin: 90px auto 0;

    display: grid;
    grid-template-columns: .75fr 1.5fr .75fr;

    align-items: center;
    gap: 22px;
}

.showcase-card {
    position: relative;

    overflow: hidden;

    border-radius: 26px;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.showcase-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 28px 65px rgba(0,0,0,.12);
}

.card-one,
.card-three {
    height: 310px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid rgba(0,0,0,.08);

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

.card-one > span,
.card-three > span {
    font-size: 10px;
    color: #888;
}

.card-one small,
.card-three small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #8b8881;
}

.card-one h3,
.card-three h3 {
    margin-top: 8px;

    font-size: 25px;
    letter-spacing: -1.2px;
}

.card-main {
    height: 430px;

    padding: 32px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background:
        radial-gradient(
            circle at 78% 16%,
            rgba(211, 145, 151, 0.32),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(255,255,255,0.07),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #20191a 0%,
            #151213 52%,
            #0e0d0d 100%
        );

    color: #fff9f6;

    border: 1px solid rgba(255,255,255,0.09);

    box-shadow:
        0 35px 90px rgba(46, 24, 27, 0.20),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.main-card-top,
.main-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 9px;
    letter-spacing: 1.5px;

    color: rgba(255,255,255,.48);
}

.main-card-content small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.2px;

    color: rgba(255,255,255,.45);
}

.main-card-content h2 {
    margin-top: 12px;

    font-size: clamp(38px, 4vw, 57px);
    line-height: .95;

    letter-spacing: -3px;
    font-weight: 500;
}

.main-card-bottom {
    padding-top: 18px;

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


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

@media (max-width: 768px) {

    .welcome-card {
        min-height: 390px;
        padding: 35px 24px;

        border-radius: 26px;
    }

    .welcome-card h1 {
        letter-spacing: -2.5px;
    }

    .main-header {
        height: 72px;

        padding: 0 20px;

        display: flex;
        justify-content: space-between;
    }

    .brand {
        font-size: 14px;
        letter-spacing: 4px;
    }

    .main-header nav {
        display: none;
    }

    .account-button {
        display: none;
    }

    .search-button {
        width: 38px;
        height: 38px;
    }

    .hero {
        min-height: auto;

        padding:
            70px 20px
            55px;
    }

    .hero-label {
        margin-bottom: 20px;

        font-size: 8px;
        letter-spacing: 2.4px;
    }

    .hero > h1 {
        font-size: clamp(53px, 17vw, 80px);
        line-height: .88;

        letter-spacing: -4.5px;
    }

    .hero-description {
        margin-top: 27px;

        max-width: 340px;

        font-size: 14px;
    }

    .hero-actions {
        margin-top: 28px;

        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .hero-showcase {
        margin-top: 65px;

        display: flex;
        gap: 14px;

        overflow-x: auto;

        padding-bottom: 10px;

        scrollbar-width: none;
    }

    .hero-showcase::-webkit-scrollbar {
        display: none;
    }

    .showcase-card {
        flex: 0 0 78vw;

        border-radius: 23px;
    }

    .card-one,
    .card-three {
        height: 320px;
    }

    .card-main {
        height: 390px;

        order: -1;
    }

}
.card-one::before {
    content: "V";
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -58%);

    font-size: 150px;
    font-weight: 800;
    letter-spacing: -12px;

    color: rgba(151, 105, 109, 0.07);

    pointer-events: none;
}

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

    position: absolute;

    width: 115px;
    height: 115px;

    top: 45px;
    right: -35px;

    border-radius: 50%;

    background: rgba(190, 128, 134, 0.12);
    filter: blur(2px);

    pointer-events: none;
}
.card-three {
    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(128, 155, 190, 0.20),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #f7f9fb 0%,
            #edf1f5 55%,
            #e2e8ee 100%
        );
}

.card-three::before {
    content: "AI";
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -58%);

    font-size: 105px;
    font-weight: 900;
    letter-spacing: -9px;

  color: #247fbd;

    pointer-events: none;
}
.card-three {
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(164, 199, 229, 0.55),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #dbe8f3 0%,
            #cbddea 52%,
            #b9d0e2 100%
        );

    border: 1px solid rgba(84, 126, 160, 0.16);

    box-shadow:
        0 22px 55px rgba(67, 103, 132, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.38);
}
.card-three > span {
    color: #416f8d;
}

.card-three small {
    color: #286f9d;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.card-three h3 {
    color: #0d3f60;
    font-weight: 700;
}
.card-three::after {
    content: "";
    position: absolute;

    width: 190px;
    height: 190px;

    top: -55px;
    right: -45px;

    border-radius: 50%;

    background: rgba(47, 145, 210, 0.28);
    filter: blur(45px);

    pointer-events: none;
}
/* =========================
   PURPOSE / DISCOVERY
========================= */

.purpose-section {
    padding: 130px 6vw 140px;

    display: grid;
    grid-template-columns: 0.8fr 1.5fr;
    gap: 8vw;

    background: #111010;
    color: #f8f4f1;
}

.purpose-heading {
    position: sticky;
    top: 120px;
    align-self: start;
}

.purpose-heading > span {
    display: block;
    margin-bottom: 25px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: #c28c91;
}

.purpose-heading h2 {
    font-size: clamp(52px, 5.5vw, 86px);
    line-height: .92;
    letter-spacing: -4px;
    font-weight: 500;
}

.purpose-heading p {
    max-width: 340px;
    margin-top: 28px;

    font-size: 14px;
    line-height: 1.7;

    color: rgba(255,255,255,.48);
}

.purpose-options {
    border-top: 1px solid rgba(255,255,255,.13);
}

.purpose-item {
    min-height: 125px;
    padding: 24px 5px;

    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;

    position: relative;
    overflow: hidden;

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

    color: white;
    text-decoration: none;

    transition: padding .35s ease;
}

.purpose-item::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}

.purpose-item > * {
    position: relative;
    z-index: 2;
}

.purpose-item > span {
    font-size: 9px;
    color: rgba(255,255,255,.35);
}

.purpose-item h3 {
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1;

    letter-spacing: -2.5px;
    font-weight: 500;
}

.purpose-item small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    color: rgba(255,255,255,.42);
}

.purpose-item:hover {
    padding-left: 22px;
    padding-right: 22px;
}

.purpose-item:hover::before {
    opacity: 1;
}


/* EACH PURPOSE = OWN LIGHT */

.purpose-item.create::before {
    background: linear-gradient(
        90deg,
        rgba(192, 103, 112, .30),
        transparent 75%
    );
}

.purpose-item.work::before {
    background: linear-gradient(
        90deg,
        rgba(70, 145, 200, .30),
        transparent 75%
    );
}

.purpose-item.learn::before {
    background: linear-gradient(
        90deg,
        rgba(136, 103, 190, .30),
        transparent 75%
    );
}

.purpose-item.grow::before {
    background: linear-gradient(
        90deg,
        rgba(77, 155, 116, .28),
        transparent 75%
    );
}

.purpose-item.build::before {
    background: linear-gradient(
        90deg,
        rgba(201, 145, 74, .30),
        transparent 75%
    );
}

.purpose-item.organize::before {
    background: linear-gradient(
        90deg,
        rgba(102, 121, 145, .30),
        transparent 75%
    );
}


/* MOBILE */

@media (max-width: 768px) {

    .purpose-section {
        padding: 85px 20px 95px;

        display: block;
    }

    .purpose-heading {
        position: static;
        margin-bottom: 65px;
    }

    .purpose-heading h2 {
        font-size: 55px;
        letter-spacing: -3px;
    }

    .purpose-item {
        min-height: 105px;

        grid-template-columns: 38px 1fr;
    }

    .purpose-item h3 {
        font-size: 38px;
    }

    .purpose-item small {
        display: none;
    }

}
/* =========================
   FEATURED PRODUCTS
========================= */

.featured-section {
    padding: 135px 6vw 150px;
    background: #f4f1ec;
}

.featured-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;

    margin-bottom: 75px;
}

.section-label {
    display: block;
    margin-bottom: 22px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;

    color: #9c6b70;
}

.featured-top h2 {
    font-size: clamp(55px, 6vw, 92px);
    line-height: .9;
    letter-spacing: -5px;
    font-weight: 500;

    color: #171414;
}

.featured-top > p {
    max-width: 390px;

    font-size: 14px;
    line-height: 1.75;

    color: #77716d;
}


/* PRODUCT GRID */

.featured-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.featured-product {
   min-height: 360px;
    padding: 25px;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: 30px;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.featured-product:hover {
    transform: translateY(-10px);
}


/* TOP TEXT */

.product-top {
    display: flex;
    justify-content: space-between;

    position: relative;
    z-index: 2;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}


/* BIG VISUAL */

.product-visual {
    position: relative;
    z-index: 2;

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

    flex: 1;
}

.product-visual > span {
    font-size: clamp(52px, 4.5vw, 78px);
    font-weight: 800;
    letter-spacing: -6px;
}


/* BOTTOM */

.product-info {
    position: relative;
    z-index: 2;

    padding-top: 22px;

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

    border-top: 1px solid rgba(0,0,0,.12);
}

.product-info small {
    display: block;
    margin-bottom: 8px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.product-info h3 {
    font-size: 24px;
    letter-spacing: -1.2px;
    font-weight: 600;
}

.product-arrow {
    font-size: 19px;
}


/* =========================
   CREATOR — ROSE
========================= */

.product-creator {
    color: #431f25;

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(255, 218, 216, .72),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #eab5b6,
            #d98f95
        );

    box-shadow: 0 30px 70px rgba(117, 60, 67, .16);
}

.product-creator .product-visual > span {
    color: #8f3f4b;
}


/* =========================
   AI — BLUE
========================= */

.product-ai {
    color: #103d5c;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(210, 235, 255, .82),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #c9e1f2,
            #9fc8e4
        );

    box-shadow: 0 30px 70px rgba(55, 107, 145, .15);
}

.product-ai .product-visual > span {
    color: #247fbd;
}


/* =========================
   BUSINESS — EMERALD
========================= */

.product-business {
    color: #153c32;

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(215, 240, 226, .72),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #c1dfd0,
            #91c3aa
        );

    box-shadow: 0 30px 70px rgba(49, 104, 79, .15);
}

.product-business .product-visual > span {
    color: #27785c;
}


/* MOBILE */

@media (max-width: 768px) {

    .featured-section {
        padding: 90px 20px 100px;
    }

    .featured-top {
        display: block;
        margin-bottom: 55px;
    }

    .featured-top h2 {
        font-size: 58px;
        letter-spacing: -3.5px;
    }

    .featured-top > p {
        margin-top: 28px;
    }

    .featured-products {
        display: flex;
        overflow-x: auto;
        gap: 15px;

        scrollbar-width: none;
    }

    .featured-products::-webkit-scrollbar {
        display: none;
    }

    .featured-product {
        flex: 0 0 84vw;
        min-height: 500px;
    }

}
.featured-section {
    display: none;
}
.card-one {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(232, 153, 160, 0.38),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #f1d1d1 0%,
            #e8b9bc 55%,
            #dda3a8 100%
        );

    border: 1px solid rgba(150, 77, 85, 0.15);

    box-shadow:
        0 22px 55px rgba(104, 55, 61, 0.11),
        inset 0 1px 0 rgba(255,255,255,0.45);
}

.card-one::before {
    color: #c13f50;
    font-weight: 900;
    opacity: 1;
}
.card-one > span {
    color: #805057;
}

.card-one small {
    color: #8e3f4a;
}

.card-one h3 {
    color: #51242a;
}
/* =========================
   VAYEN WORLDS
========================= */

.worlds-section {
    padding: 140px 6vw 150px;

    display: grid;
    grid-template-columns: .72fr 1.55fr;
    gap: 8vw;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(204, 145, 150, .13),
            transparent 28%
        ),
        #f2efea;

    color: #171414;
}


/* LEFT INTRO */

.worlds-intro {
    position: sticky;
    top: 110px;
    align-self: start;
}

.worlds-intro > span {
    display: block;
    margin-bottom: 24px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: #9b676d;
}

.worlds-intro h2 {
    font-size: clamp(55px, 5.7vw, 90px);
    line-height: .91;

    letter-spacing: -5px;
    font-weight: 500;
}

.worlds-intro p {
    max-width: 310px;
    margin-top: 28px;

    font-size: 14px;
    line-height: 1.7;

    color: #77716d;
}


/* RIGHT CATEGORY LIST */

.worlds-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid rgba(20,20,20,.13);
}

.world-item {
    min-height: 145px;

    padding: 25px 24px;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #171414;
    text-decoration: none;

    border-bottom: 1px solid rgba(20,20,20,.13);

    transition:
        background .35s ease,
        transform .35s ease;
}

.world-item:nth-child(odd) {
    border-right: 1px solid rgba(20,20,20,.13);
}

.world-item > span {
    font-size: 9px;
    color: #9b9690;
}

.world-item h3 {
    position: relative;
    z-index: 2;

    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1;

    letter-spacing: -1.5px;
    font-weight: 600;

    transition:
        transform .35s ease,
        color .35s ease;
}

.world-item small {
    margin-top: 10px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #a06b70;
}


/* SOFT LIGHT ON HOVER */

.world-item::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

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

    border-radius: 50%;

    background: rgba(198, 121, 129, .18);

    filter: blur(35px);

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}

.world-item:hover {
    background: rgba(255,255,255,.42);
}

.world-item:hover::before {
    opacity: 1;
}

.world-item:hover h3 {
    transform: translateX(7px);
    color: #8e4f57;
}


/* MOBILE */

@media (max-width: 768px) {

    .worlds-section {
        padding: 90px 20px 100px;

        display: block;
    }

    .worlds-intro {
        position: static;

        margin-bottom: 60px;
    }

    .worlds-intro h2 {
        font-size: 56px;
        letter-spacing: -3.5px;
    }

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

    .world-item {
        min-height: 115px;
        padding: 20px 5px;
    }

    .world-item:nth-child(odd) {
        border-right: 0;
    }

    .world-item h3 {
        font-size: 29px;
    }

}
.all-products-link {
    grid-column: 2;
    margin-top: 38px;
    padding: 28px 30px;

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

    text-decoration: none;
    color: #171414;

    border-top: 1px solid rgba(20,20,20,.16);
    border-bottom: 1px solid rgba(20,20,20,.16);

    transition: .35s ease;
}

.all-products-link div > span {
    display: block;
    margin-bottom: 8px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #9b696d;
}

.all-products-link h3 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1.5px;
}

.all-products-arrow {
    font-size: 25px;
    transition: transform .35s ease;
}

.all-products-link:hover {
    padding-left: 40px;
    background: rgba(255,255,255,.38);
}

.all-products-link:hover .all-products-arrow {
    transform: translate(5px, -5px);
}

@media (max-width: 768px) {
    .all-products-link {
        margin-top: 28px;
        padding: 24px 5px;
    }

    .all-products-link h3 {
        font-size: 27px;
    }
}
/* =========================
   VAYEN STANDARD
========================= */

.vayen-standard {
    padding: 150px 6vw 160px;
    background: #ebe7e1;
    color: #171414;
}

.standard-top {
    padding-bottom: 90px;
    border-bottom: 1px solid rgba(20,20,20,.14);
}

.standard-top > span {
    display: block;
    margin-bottom: 28px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: #9b696d;
}

.standard-top h2 {
    font-size: clamp(70px, 8vw, 125px);
    line-height: .86;
    letter-spacing: -7px;
    font-weight: 500;
}

.standard-top h2 span {
    color: #9b696d;
}

.standard-content {
    padding-top: 70px;

    display: grid;
    grid-template-columns: .8fr 1.4fr;
    gap: 9vw;
}

.standard-statement {
    max-width: 390px;

    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -.5px;

    color: #393332;
}

.standard-points {
    border-top: 1px solid rgba(20,20,20,.14);
}

.standard-point {
    padding: 30px 0;

    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 15px;

    border-bottom: 1px solid rgba(20,20,20,.14);
}

.standard-point > span {
    padding-top: 5px;

    font-size: 9px;
    color: #a09a94;
}

.standard-point h3 {
    margin-bottom: 10px;

    font-size: 27px;
    font-weight: 500;
    letter-spacing: -1px;
}

.standard-point p {
    max-width: 470px;

    font-size: 13px;
    line-height: 1.7;

    color: #77716d;
}


/* MOBILE */

@media (max-width: 768px) {

    .vayen-standard {
        padding: 90px 20px 100px;
    }

    .standard-top {
        padding-bottom: 55px;
    }

    .standard-top h2 {
        font-size: 58px;
        line-height: .9;
        letter-spacing: -4px;
    }

    .standard-content {
        padding-top: 50px;
        display: block;
    }

    .standard-statement {
        margin-bottom: 55px;
        font-size: 19px;
    }

    .standard-point {
        grid-template-columns: 40px 1fr;
        padding: 25px 0;
    }

    .standard-point h3 {
        font-size: 23px;
    }
}
/* =========================
   NEW AT VAYEN
========================= */

.new-vayen {
    padding: 145px 6vw 155px;
    background: #111010;
    color: #f8f5f2;
}

.new-vayen-head {
    margin-bottom: 75px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.new-vayen-head > div > span {
    display: block;
    margin-bottom: 25px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: #c58d92;
}

.new-vayen-head h2 {
    font-size: clamp(62px, 7vw, 105px);
    line-height: .88;
    letter-spacing: -6px;
    font-weight: 500;
}

.new-vayen-head h2 span {
    color: #b47a80;
}

.view-new-link {
    padding-bottom: 9px;

    display: flex;
    align-items: center;
    gap: 18px;

    color: rgba(255,255,255,.65);
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

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

    transition: .3s ease;
}

.view-new-link:hover {
    color: #fff;
}


/* PRODUCT GRID */

.new-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.new-product {
    min-height: 470px;
    padding: 27px;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-radius: 28px;

    color: #fff;
    text-decoration: none;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}

.new-product:hover {
    transform: translateY(-7px);
}


/* INDIVIDUAL PRODUCT COLOURS */

.new-creator {
    background:
        radial-gradient(circle at 82% 14%,
            rgba(255,173,181,.50),
            transparent 35%),
        linear-gradient(145deg,#8f4650,#4d252b);
}

.new-ai {
    background:
        radial-gradient(circle at 82% 14%,
            rgba(102,190,255,.48),
            transparent 35%),
        linear-gradient(145deg,#235f88,#12354e);
}

.new-business {
    background:
        radial-gradient(circle at 82% 14%,
            rgba(244,192,104,.48),
            transparent 35%),
        linear-gradient(145deg,#86602c,#443116);
}

.new-focus {
    background:
        radial-gradient(circle at 82% 14%,
            rgba(150,125,230,.48),
            transparent 35%),
        linear-gradient(145deg,#554683,#29223f);
}


/* PRODUCT CONTENT */

.new-product-meta {
    display: flex;
    justify-content: space-between;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;

    color: rgba(255,255,255,.62);
}

.new-product-art {
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-product-art > span {
    font-size: clamp(65px, 8vw, 125px);
    line-height: 1;

    font-weight: 800;
    letter-spacing: -7px;

    color: rgba(255,255,255,.13);
}

.new-product-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.new-product-bottom small {
    display: block;
    margin-bottom: 9px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;

    color: rgba(255,255,255,.55);
}

.new-product-bottom h3 {
    font-size: 27px;
    line-height: 1.05;
    letter-spacing: -1.3px;
    font-weight: 500;
}

.new-product-bottom > span {
    font-size: 22px;
}


/* MOBILE */

@media (max-width: 768px) {

    .new-vayen {
        padding: 90px 20px 100px;
    }

    .new-vayen-head {
        margin-bottom: 50px;
        display: block;
    }

    .new-vayen-head h2 {
        font-size: 58px;
        letter-spacing: -4px;
    }

    .view-new-link {
        width: max-content;
        margin-top: 35px;
    }

    .new-products {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .new-product {
        min-height: 380px;
        padding: 23px;
        border-radius: 24px;
    }

    .new-product-art > span {
        font-size: 78px;
    }

    .new-product-bottom h3 {
        font-size: 24px;
    }
}
/* NEW AT VAYEN — BALANCED LUXURY SIZE */

.new-vayen {
    padding: 115px 6vw 125px;
}

.new-vayen-head {
    margin-bottom: 55px;
}

.new-products {
    max-width: 1280px;
    margin: 0 auto;

    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.new-product {
    min-height: 330px;
    padding: 24px;
    border-radius: 24px;
}

.new-product-art > span {
    font-size: clamp(58px, 6vw, 92px);
    letter-spacing: -5px;
}

.new-product-bottom h3 {
    font-size: 23px;
}


/* MOBILE */

@media (max-width: 768px) {

    .new-vayen {
        padding: 80px 20px 90px;
    }

    .new-products {
        gap: 14px;
    }

    .new-product {
        min-height: 300px;
        padding: 21px;
        border-radius: 22px;
    }

    .new-product-art > span {
        font-size: 65px;
    }

}
/* =========================
   VAYEN CLOSING
========================= */

.vayen-closing {
    min-height: 620px;
    padding: 125px 6vw 55px;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(205, 148, 153, .16),
            transparent 34%
        ),
        #f3f0eb;

    color: #171414;
}

.closing-label {
    margin-bottom: 27px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.2px;

    color: #9b696d;
}

.vayen-closing h2 {
    font-size: clamp(62px, 7vw, 105px);
    line-height: .9;
    letter-spacing: -6px;
    font-weight: 500;
}

.vayen-closing h2 span {
    color: #a66f74;
}

.vayen-closing > p {
    max-width: 440px;
    margin-top: 28px;

    font-size: 14px;
    line-height: 1.7;

    color: #77716d;
}

.closing-button {
    margin-top: 34px;
    padding: 15px 20px 15px 24px;

    display: flex;
    align-items: center;
    gap: 28px;

    border-radius: 100px;

    background: #181515;
    color: #fff;

    text-decoration: none;
    font-size: 12px;
    font-weight: 700;

    box-shadow: 0 14px 35px rgba(35,20,22,.13);

    transition: .3s ease;
}

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

.closing-button span {
    transition: transform .3s ease;
}

.closing-button:hover span {
    transform: translateX(4px);
}

.closing-mark {
    width: 100%;
    margin-top: auto;

    font-size: clamp(90px, 16vw, 245px);
    line-height: .72;

    font-weight: 700;
    letter-spacing: -10px;

    color: rgba(23,20,20,.045);

    user-select: none;
}


/* MOBILE */

@media (max-width: 768px) {

    .vayen-closing {
        min-height: 520px;
        padding: 90px 20px 35px;
    }

    .vayen-closing h2 {
        font-size: 55px;
        letter-spacing: -4px;
    }

    .vayen-closing > p {
        max-width: 330px;
    }

    .closing-mark {
        font-size: 90px;
        letter-spacing: -5px;
    }
}
/* =========================
   FOOTER
========================= */

.main-footer {
    min-height: 105px;
    padding: 28px 6vw;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;

    background: #111010;
    color: #fff;

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

.footer-brand {
    color: #fff;
    text-decoration: none;

    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.footer-links a {
    color: rgba(255,255,255,.55);
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    transition: color .25s ease;
}

.footer-links a:hover {
    color: #fff;
}

.main-footer p {
    justify-self: end;

    font-size: 9px;
    color: rgba(255,255,255,.35);
}


/* MOBILE */

@media (max-width: 768px) {

    .main-footer {
        padding: 30px 20px;

        grid-template-columns: 1fr;
        gap: 22px;

        text-align: center;
    }

    .footer-brand,
    .main-footer p {
        justify-self: center;
    }

    .footer-links {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
}
/* HOMEPAGE FINAL POLISH — HEADER */

.main-header {
    height: 78px;
    padding: 0 6vw;

    background: rgba(244,242,237,.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.brand {
    letter-spacing: 4.5px;
}

.main-header nav {
    gap: 34px;
}

.main-header nav a {
    font-size: 10px;
    letter-spacing: .5px;
}

.account-button {
    padding: 10px 17px;
}
/* HOMEPAGE FINAL POLISH — HERO */

.hero {
    padding-top: 90px;
    padding-bottom: 70px;
}

.hero-description {
    max-width: 500px;
    margin-top: 30px;
    line-height: 1.65;
}


/* PRIMARY BUTTON */

.primary-button {
    padding: 15px 18px 15px 23px;
    gap: 26px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;

    background: #191516;
    color: #fff;

    box-shadow:
        0 12px 28px rgba(55,31,34,.12),
        inset 0 1px 0 rgba(255,255,255,.12);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

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

    box-shadow:
        0 17px 35px rgba(55,31,34,.17),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.primary-button span {
    transition: transform .3s ease;
}

.primary-button:hover span {
    transform: translateX(4px);
}


/* SECONDARY BUTTON */

.secondary-button {
    padding: 14px 3px 10px;

    color: #625c59;

    border-bottom: 1px solid rgba(23,20,20,.22);

    font-size: 11px;
    font-weight: 700;

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

.secondary-button:hover {
    color: #171414;
    border-color: #9b696d;
}


/* HERO SHOWCASE BALANCE */

.hero-showcase {
    margin-top: 72px;
}

.card-main {
    height: 400px;
}

.card-one,
.card-three {
    height: 285px;
}
/* HOMEPAGE FINAL POLISH — PURPOSE */

.purpose-section {
    padding-top: 105px;
    padding-bottom: 110px;
}

.purpose-heading {
    position: static;
}

.purpose-heading h2 {
    font-weight: 500;
}

.purpose-heading p {
    margin-top: 23px;
}


/* PURPOSE ROWS */

.purpose-item {
    min-height: 105px;
    padding: 20px 5px;
}

.purpose-item h3 {
    font-size: clamp(34px, 3.6vw, 54px);
    transition:
        transform .35s ease,
        color .35s ease;
}

.purpose-item small {
    transition: color .35s ease;
}

.purpose-item:hover {
    padding-left: 18px;
    padding-right: 18px;
}

.purpose-item:hover h3 {
    transform: translateX(5px);
}

.purpose-item:hover small {
    color: rgba(255,255,255,.72);
}


/* MOBILE */

@media (max-width: 768px) {

    .purpose-section {
        padding: 75px 20px 80px;
    }

    .purpose-heading {
        margin-bottom: 48px;
    }

    .purpose-item {
        min-height: 88px;
        padding: 17px 3px;
    }

    .purpose-item h3 {
        font-size: 34px;
    }
}
/* HOMEPAGE FINAL POLISH — 12 WORLDS */

.worlds-section {
    padding-top: 105px;
    padding-bottom: 115px;
}

.worlds-intro h2 {
    font-size: clamp(52px, 5.2vw, 82px);
}

.worlds-item {
    min-height: 125px;
}

/* CATEGORY ROWS */

.world-item {
    min-height: 122px;
    padding: 22px 20px;
}

.world-item h3 {
    font-size: clamp(23px, 2vw, 31px);
}

.world-item:hover {
    background: rgba(255,255,255,.5);
}


/* ALL PRODUCTS — PREMIUM CTA */

.all-products-link {
    margin-top: 32px;
    padding: 24px 25px;

    position: relative;
    overflow: hidden;

    border-top: 1px solid rgba(20,20,20,.18);
    border-bottom: 1px solid rgba(20,20,20,.18);

    background: transparent;
}

.all-products-link::before {
    content: "";
    position: absolute;

    width: 170px;
    height: 170px;

    right: -70px;
    top: -80px;

    border-radius: 50%;

    background: rgba(190,121,128,.16);
    filter: blur(35px);

    opacity: 0;
    transition: opacity .35s ease;
}

.all-products-link > * {
    position: relative;
    z-index: 2;
}

.all-products-link h3 {
    font-size: 28px;
    font-weight: 500;
}

.all-products-arrow {
    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(20,20,20,.16);
    border-radius: 50%;

    font-size: 17px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.all-products-link:hover {
    padding-left: 32px;
    background: rgba(255,255,255,.35);
}

.all-products-link:hover::before {
    opacity: 1;
}

.all-products-link:hover .all-products-arrow {
    transform: translate(3px,-3px);
    background: #181515;
    color: #fff;
}


/* MOBILE */

@media (max-width: 768px) {

    .worlds-section {
        padding: 75px 20px 80px;
    }

    .worlds-intro {
        margin-bottom: 45px;
    }

    .world-item {
        min-height: 100px;
        padding: 18px 4px;
    }

    .all-products-link {
        margin-top: 22px;
        padding: 22px 4px;
    }
}
/* HOMEPAGE FINAL POLISH — VAYEN STANDARD */

.vayen-standard {
    padding: 105px 6vw 115px;
}

.standard-top {
    padding-bottom: 65px;
}

.standard-top h2 {
    font-size: clamp(62px, 7vw, 105px);
    letter-spacing: -6px;
}

.standard-content {
    padding-top: 55px;
    gap: 8vw;
}

.standard-statement {
    max-width: 350px;
    font-size: 19px;
    line-height: 1.5;
}

.standard-point {
    padding: 25px 0;
}

.standard-point h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.standard-point p {
    max-width: 430px;
}


/* SUBTLE INTERACTION */

.standard-point {
    transition: padding .3s ease;
}

.standard-point:hover {
    padding-left: 10px;
}

.standard-point:hover h3 {
    color: #9b696d;
}


/* MOBILE */

@media (max-width: 768px) {

    .vayen-standard {
        padding: 75px 20px 80px;
    }

    .standard-top {
        padding-bottom: 45px;
    }

    .standard-top h2 {
        font-size: 52px;
        letter-spacing: -3.5px;
    }

    .standard-content {
        padding-top: 40px;
    }

    .standard-statement {
        margin-bottom: 42px;
        font-size: 18px;
    }

    .standard-point {
        padding: 22px 0;
    }
}
/* HOMEPAGE FINAL POLISH — NEW AT VAYEN */

.new-vayen {
    padding: 100px 6vw 110px;
}

.new-vayen-head {
    margin-bottom: 48px;
}

.new-vayen-head h2 {
    font-size: clamp(58px, 6.3vw, 94px);
}


/* PRODUCT CARDS */

.new-products {
    gap: 16px;
}

.new-product {
    min-height: 315px;
    padding: 22px;
    border-radius: 22px;

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

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

.new-product:hover {
    transform: translateY(-5px);

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

.new-product-art > span {
    font-size: clamp(55px, 5.5vw, 84px);
    opacity: .9;
}

.new-product-bottom h3 {
    font-size: 22px;
}

.new-product-bottom > span {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;

    font-size: 15px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.new-product:hover .new-product-bottom > span {
    transform: translate(3px,-3px);
    background: rgba(255,255,255,.92);
    color: #171414;
}


/* VIEW ALL NEW */

.view-new-link span {
    transition: transform .3s ease;
}

.view-new-link:hover span {
    transform: translate(3px,-3px);
}


/* MOBILE */

@media (max-width: 768px) {

    .new-vayen {
        padding: 75px 20px 80px;
    }

    .new-vayen-head {
        margin-bottom: 40px;
    }

    .new-vayen-head h2 {
        font-size: 52px;
    }

    .new-product {
        min-height: 285px;
        padding: 20px;
    }

    .new-product-art > span {
        font-size: 62px;
    }
}
/* =========================
   HOMEPAGE FINAL — CLOSING
========================= */

.vayen-closing {
    min-height: 500px;
    padding: 95px 6vw 38px;
}

.vayen-closing h2 {
    font-size: clamp(58px, 6.3vw, 94px);
    letter-spacing: -5px;
}

.vayen-closing > p {
    margin-top: 23px;
}

.closing-button {
    margin-top: 28px;
    padding: 14px 18px 14px 22px;
    gap: 25px;

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

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

    box-shadow:
        0 17px 38px rgba(35,20,22,.17);
}

.closing-mark {
    opacity: .8;
}


/* =========================
   HOMEPAGE FINAL — FOOTER
========================= */

.main-footer {
    min-height: 92px;
    padding: 24px 6vw;

    background: #111010;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 17px;
    letter-spacing: 4.5px;
}

.footer-brand::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #a66f74;
}

.footer-links a {
    position: relative;
    padding: 8px 0;
}

.footer-links a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 2px;

    width: 0;
    height: 1px;

    background: #c58d92;

    transition: width .3s ease;
}

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


/* MOBILE */

@media (max-width: 768px) {

    .vayen-closing {
        min-height: 450px;
        padding: 75px 20px 30px;
    }

    .vayen-closing h2 {
        font-size: 51px;
        letter-spacing: -3.5px;
    }

    .closing-mark {
        font-size: 82px;
    }

    .main-footer {
        min-height: auto;
        padding: 28px 20px;
    }

    .footer-brand::after {
        display: none;
    }
}
/* =========================
   VAYEN — LUXURY CONTROLS
========================= */

/* HEADER ACCOUNT */

.account-button {
    padding: 11px 19px;

    border: 1px solid #181515;
    border-radius: 100px;

    background: #181515;
    color: #fff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15px;

    box-shadow: 0 8px 22px rgba(30,20,20,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.account-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(30,20,20,.14);
}


/* SEARCH */

.search-button {
    width: 40px;
    height: 40px;

    border: 1px solid rgba(20,20,20,.12);
    border-radius: 50%;

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

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

.search-button:hover {
    background: #fff;
    border-color: rgba(20,20,20,.24);
    transform: translateY(-2px);
}


/* HERO SECONDARY LINK */

.secondary-button {
    position: relative;

    padding: 12px 2px;

    border: 0;

    font-size: 10px;
    letter-spacing: .15px;
}

.secondary-button::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 7px;

    width: 100%;
    height: 1px;

    background: rgba(23,20,20,.28);

    transform-origin: right;
    transition: transform .35s ease;
}

.secondary-button:hover::after {
    transform: scaleX(.55);
}


/* PRIMARY + CLOSING BUTTON */

.primary-button,
.closing-button {
    min-height: 48px;

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

    background:
        linear-gradient(
            135deg,
            #201b1c,
            #121111
        );

    box-shadow:
        0 12px 30px rgba(31,19,21,.12),
        inset 0 1px 0 rgba(255,255,255,.11);
}


/* VIEW ALL NEW */

.view-new-link {
    padding: 11px 0;

    font-size: 10px;
    letter-spacing: .2px;

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

.view-new-link span {
    margin-left: 5px;
}


/* PRODUCT CIRCLE ARROWS */

.new-product-bottom > span,
.all-products-arrow {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* NEW AT VAYEN — FINAL SPACING */

.new-vayen {
    padding-top: 78px;
    padding-bottom: 85px;
}

.new-vayen-head {
    margin-bottom: 38px;
}

@media (max-width: 768px) {
    .new-vayen {
        padding-top: 65px;
        padding-bottom: 70px;
    }
}
/* =========================
   MOBILE HERO — FINAL
========================= */

@media (max-width: 768px) {

    .hero {
        min-height: auto;
        padding: 82px 20px 65px;
    }

    .hero > h1 {
        font-size: clamp(55px, 15vw, 68px);
        line-height: .88;
        letter-spacing: -4px;
    }

    .hero-description {
        max-width: 330px;
        margin-top: 30px;
        font-size: 14px;
        line-height: 1.65;
    }

    .hero-actions {
        margin-top: 30px;
        align-items: flex-start;
        gap: 18px;
    }

    .primary-button {
        min-height: 50px;
        padding: 14px 18px 14px 22px;
    }

    .secondary-button {
        width: max-content;
        padding: 9px 1px;
    }

    .hero-showcase {
        margin-top: 62px;
        gap: 12px;
    }

    .showcase-card {
        flex: 0 0 82vw;
    }

    .card-main {
        height: 355px;
    }

    .card-one,
    .card-three {
        height: 275px;
    }
}
/* =========================
   MOBILE PREMIUM CARD SWIPE
========================= */

@media (max-width: 768px) {

    .hero-showcase {
        width: calc(100% + 40px);
        margin-left: -20px;

        padding: 25px 9vw 35px;

        display: flex;
        align-items: center;
        gap: 16px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        scrollbar-width: none;
    }

    .hero-showcase::-webkit-scrollbar {
        display: none;
    }

    .showcase-card {
        flex: 0 0 78vw;

        scroll-snap-align: center;

        transform: scale(.88);
        opacity: .55;

        transition:
            transform .45s cubic-bezier(.2,.8,.2,1),
            opacity .45s ease,
            box-shadow .45s ease;
    }

    .showcase-card.mobile-active {
        transform: scale(1);
        opacity: 1;

        box-shadow:
            0 28px 60px rgba(25,15,17,.20);
    }

    .card-main,
    .card-one,
    .card-three {
        height: 340px;
    }
}
/* ==================================
   MOBILE — VAYEN PURPOSE EXPERIENCE
================================== */

@media (max-width: 768px) {

    .purpose-section {
        padding: 72px 20px 78px;
    }

    .purpose-heading {
        margin-bottom: 42px;
    }

    .purpose-heading > span {
        margin-bottom: 18px;
    }

    .purpose-heading h2 {
        max-width: 330px;

        font-size: 48px;
        line-height: .91;
        letter-spacing: -3.5px;
    }

    .purpose-heading p {
        max-width: 315px;
        margin-top: 22px;

        font-size: 13px;
        line-height: 1.65;
    }


    /* 2 × 3 GRID */

    .purpose-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        border: 0;
    }

    .purpose-item {
        min-height: 142px;
        padding: 17px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        position: relative;
        overflow: hidden;

        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 20px;

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

        transition:
            transform .35s cubic-bezier(.2,.8,.2,1),
            border-color .35s ease;
    }

    .purpose-item > span {
        font-size: 8px;
        letter-spacing: 1px;

        color: rgba(255,255,255,.38);
    }

    .purpose-item h3 {
        margin-top: auto;

        font-size: 29px;
        line-height: 1;
        letter-spacing: -1.6px;
        font-weight: 500;

        color: #fff;
    }

    .purpose-item small {
        display: block;

        margin-top: 7px;

        font-size: 7px;
        font-weight: 700;
        letter-spacing: 1.2px;

        color: rgba(255,255,255,.38);
    }


    /* VAYEN LIGHT SIGNATURE */

    .purpose-item::before {
        width: 115px;
        height: 115px;

        inset: auto -35px -45px auto;

        border-radius: 50%;

        filter: blur(32px);

        opacity: .55;
    }

    .purpose-item.create::before {
        background: #b75d68;
    }

    .purpose-item.work::before {
        background: #397eaf;
    }

    .purpose-item.learn::before {
        background: #7559ad;
    }

    .purpose-item.grow::before {
        background: #42815f;
    }

    .purpose-item.build::before {
        background: #a77739;
    }

    .purpose-item.organize::before {
        background: #647487;
    }


    /* TAP FEEL */

    .purpose-item:active {
        transform: scale(.97);
        border-color: rgba(255,255,255,.22) !important;
    }
}
/* ==================================
   MOBILE — 12 WORLDS PREMIUM INDEX
================================== */

@media (max-width: 768px) {

    .worlds-section {
        padding: 72px 20px 78px;
    }

    .worlds-intro {
        margin-bottom: 42px;
    }

    .worlds-intro > span {
        margin-bottom: 18px;
    }

    .worlds-intro h2 {
        font-size: 47px;
        line-height: .92;
        letter-spacing: -3.3px;
    }

    .worlds-intro p {
        max-width: 290px;
        margin-top: 22px;

        font-size: 13px;
        line-height: 1.65;
    }


    /* 12 WORLDS — 2 COLUMN INDEX */

    .worlds-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        border-top: 1px solid rgba(20,20,20,.14);
        border-left: 1px solid rgba(20,20,20,.14);
    }

    .world-item {
        min-height: 112px;
        padding: 15px;

        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        border: 0 !important;
        border-right: 1px solid rgba(20,20,20,.14) !important;
        border-bottom: 1px solid rgba(20,20,20,.14) !important;

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

    .world-item > span {
        font-size: 8px;
        color: #99918c;
    }

    .world-item h3 {
        margin-top: auto;

        font-size: 18px;
        line-height: 1.05;
        letter-spacing: -.8px;
        font-weight: 600;
    }

    .world-item small {
        margin-top: 7px;

        font-size: 7px;
        letter-spacing: 1.5px;
    }


    /* SUBTLE VAYEN LIGHT */

    .world-item::before {
        width: 90px;
        height: 90px;

        top: auto;
        right: -35px;
        bottom: -40px;

        background: rgba(178,105,112,.18);
        filter: blur(28px);

        opacity: 0;

        transition: opacity .3s ease;
    }

    .world-item:active::before {
        opacity: 1;
    }


    /* ALL PRODUCTS */

    .all-products-link {
        margin-top: 22px;
        padding: 20px 4px;

        border-top: 0;
    }

    .all-products-link h3 {
        font-size: 25px;
    }

    .all-products-arrow {
        width: 39px;
        height: 39px;
    }
}
/* MOBILE — WORLDS REVEAL */

.worlds-reveal {
    display: none;
}

@media (max-width: 768px) {

    .worlds-reveal {
        width: 100%;
        padding: 30px 20px 38px;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 13px;

        border: 0;
        background: #111010;
        color: white;
        cursor: pointer;
    }

    .worlds-reveal > span:first-child {
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2.4px;
        color: rgba(255,255,255,.42);
    }

    .worlds-reveal-arrow {
        width: 46px;
        height: 46px;

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

        border: 1px solid rgba(255,255,255,.17);
        border-radius: 50%;

        color: #e5a8ae;
        font-size: 17px;

        animation: worldsPulse 2.2s ease-in-out infinite;
    }

    @keyframes worldsPulse {
        0%, 100% {
            transform: translateY(0);
            box-shadow: 0 0 0 rgba(194,110,119,0);
        }

        50% {
            transform: translateY(5px);
            box-shadow: 0 0 28px 5px rgba(194,110,119,.16);
        }
    }

    .worlds-section.worlds-hidden {
        display: none;
    }

    .worlds-section.worlds-open {
        display: block;
        animation: worldsFadeIn .7s cubic-bezier(.2,.8,.2,1) both;
    }

    @keyframes worldsFadeIn {
        from {
            opacity: 0;
            transform: translateY(25px);
        }

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

    .worlds-reveal.reveal-open .worlds-reveal-arrow {
        animation: none;
        transform: rotate(180deg);
    }
}
/* =========================================
   MOBILE — VAYEN WORLDS SWIPE DECK
========================================= */

@media (max-width: 768px) {

    .worlds-section {
        padding: 68px 0 78px;
        overflow: hidden;
    }

    .worlds-intro {
        padding: 0 20px;
        margin-bottom: 42px;
    }

    .worlds-intro > span {
        display: block;
        margin-bottom: 18px;
    }

    .worlds-intro h2 {
        font-size: 47px;
        line-height: .92;
        letter-spacing: -3.3px;
    }

    .worlds-intro p {
        max-width: 300px;
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.65;
    }


    /* SWIPE AREA */

    .worlds-list {
        width: 100%;

        display: flex;
        align-items: center;
        gap: 14px;

        padding: 18px 20px 34px;

        overflow-x: auto;
        overflow-y: visible;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        border: 0;

        scrollbar-width: none;
    }

    .worlds-list::-webkit-scrollbar {
        display: none;
    }


    /* WORLD CARD */

    .world-item {
        flex: 0 0 78vw;
        height: 260px;
        min-height: 260px;

        padding: 24px;

        position: relative;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        scroll-snap-align: center;

        border: 1px solid rgba(30,20,20,.10) !important;
        border-radius: 24px;

        background:
            radial-gradient(
                circle at 85% 90%,
                rgba(183,93,104,.13),
                transparent 38%
            ),
            #ebe6e1;

        box-shadow:
            0 12px 30px rgba(35,22,23,.05);

        transform: translateY(0);

        transition:
            transform .4s cubic-bezier(.2,.8,.2,1),
            box-shadow .4s ease,
            border-color .4s ease;
    }


    /* NUMBER */

    .world-item > span {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.5px;

        color: #a27b7e;
    }


    /* TITLE */

    .world-item h3 {
        margin-top: auto;

        max-width: 230px;

        font-size: 34px;
        line-height: .95;
        letter-spacing: -2px;
        font-weight: 500;

        color: #171414;
    }


    /* CATEGORY */

    .world-item small {
        margin-top: 13px;

        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2px;

        color: #a45f66;
    }


    /* SOFT VAYEN LIGHT */

    .world-item::before {
        content: "";

        position: absolute;
        width: 180px;
        height: 180px;

        right: -65px;
        bottom: -80px;

        border-radius: 50%;

        background: rgba(193,104,114,.20);

        filter: blur(45px);

        pointer-events: none;
    }


    /* ALL PRODUCTS */

    .all-products-link {
        margin: 12px 20px 0;
        padding: 22px 2px;

        border-top: 1px solid rgba(20,20,20,.12);
    }

    .all-products-link h3 {
        font-size: 25px;
    }

}
/* MOBILE — WORLDS CARD PERSONALITY */

@media (max-width: 768px) {

    .world-item {
        background: #eee9e4;
        border-radius: 28px;

        box-shadow:
            0 16px 40px rgba(30,20,20,.07),
            inset 0 1px 0 rgba(255,255,255,.65);
    }

    /* BIG FAINT NUMBER */

    .world-item::after {
        content: attr(data-world);

        position: absolute;
        top: 18px;
        right: 20px;

        font-size: 76px;
        line-height: 1;
        font-weight: 500;
        letter-spacing: -6px;

        color: rgba(35,25,25,.045);

        pointer-events: none;
    }


    /* DIFFERENT VAYEN LIGHT FOR EACH WORLD */

    .world-item:nth-child(1)::before {
        background: rgba(190,91,104,.30);
    }

    .world-item:nth-child(2)::before {
        background: rgba(74,125,177,.30);
    }

    .world-item:nth-child(3)::before {
        background: rgba(184,137,68,.30);
    }

    .world-item:nth-child(4)::before {
        background: rgba(105,137,105,.28);
    }

    .world-item:nth-child(5)::before {
        background: rgba(180,91,130,.27);
    }

    .world-item:nth-child(6)::before {
        background: rgba(105,119,143,.27);
    }

    .world-item:nth-child(7)::before {
        background: rgba(114,91,170,.28);
    }

    .world-item:nth-child(8)::before {
        background: rgba(196,103,78,.27);
    }

    .world-item:nth-child(9)::before {
        background: rgba(71,132,145,.28);
    }

    .world-item:nth-child(10)::before {
        background: rgba(116,92,157,.28);
    }

    .world-item:nth-child(11)::before {
        background: rgba(167,113,62,.29);
    }

    .world-item:nth-child(12)::before {
        background: rgba(82,139,112,.28);
    }
}
/* MOBILE — WORLDS PREMIUM FINISH */

@media (max-width: 768px) {

    .world-item {
        background:
            radial-gradient(
                circle at 82% 18%,
                rgba(255,255,255,.95),
                transparent 27%
            ),
            radial-gradient(
                circle at 88% 92%,
                rgba(184,104,113,.22),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                #f7f2ee 0%,
                #eee5e1 52%,
                #e5d8d6 100%
            );

        border: 1px solid rgba(255,255,255,.72) !important;

        box-shadow:
            0 22px 50px rgba(42,25,27,.13),
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(100,60,65,.06);

        border-radius: 26px;
    }

    .world-item h3 {
        color: #21191a;
        font-weight: 550;
    }

    .world-item > span {
        color: rgba(119,69,75,.65);
    }

    .world-item small {
        color: #9b5f65;
    }

}
/* =========================================
   MOBILE — 12 WORLDS COLOR IDENTITY
========================================= */

@media (max-width: 768px) {

    /* 01 — CREATOR STUDIO */
    .world-item:nth-child(1) {
        background:
            radial-gradient(circle at 82% 18%, rgba(255,245,242,.95), transparent 30%),
            radial-gradient(circle at 85% 90%, rgba(191,91,105,.32), transparent 44%),
            linear-gradient(145deg, #f6e4e1, #e7c3c1);
    }

    /* 02 — AI WORKSPACE */
    .world-item:nth-child(2) {
        background:
            radial-gradient(circle at 82% 18%, rgba(238,249,255,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(65,130,190,.32), transparent 44%),
            linear-gradient(145deg, #e6f1f8, #bfd7e8);
    }

    /* 03 — BUSINESS LAUNCH */
    .world-item:nth-child(3) {
        background:
            radial-gradient(circle at 82% 18%, rgba(255,249,230,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(181,132,55,.30), transparent 44%),
            linear-gradient(145deg, #f5ead1, #dfc590);
    }

    /* 04 — CAREER PRO */
    .world-item:nth-child(4) {
        background:
            radial-gradient(circle at 82% 18%, rgba(240,246,252,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(58,86,124,.28), transparent 44%),
            linear-gradient(145deg, #e5ebf1, #bdcad8);
    }

    /* 05 — SOCIAL GROWTH */
    .world-item:nth-child(5) {
        background:
            radial-gradient(circle at 82% 18%, rgba(255,241,244,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(207,92,123,.31), transparent 44%),
            linear-gradient(145deg, #f6dfe5, #e6b4c1);
    }

    /* 06 — MONEY & PLANNING */
    .world-item:nth-child(6) {
        background:
            radial-gradient(circle at 82% 18%, rgba(243,251,244,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(73,132,91,.30), transparent 44%),
            linear-gradient(145deg, #e3eee4, #bdd4c1);
    }

    /* 07 — STUDY SMART */
    .world-item:nth-child(7) {
        background:
            radial-gradient(circle at 82% 18%, rgba(249,245,255,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(111,82,169,.28), transparent 44%),
            linear-gradient(145deg, #ebe3f4, #cdbce0);
    }

    /* 08 — DESIGN VAULT */
    .world-item:nth-child(8) {
        background:
            radial-gradient(circle at 82% 18%, rgba(255,246,240,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(192,91,76,.29), transparent 44%),
            linear-gradient(145deg, #f4dfd5, #dfb7aa);
    }

    /* 09 — WEB & LAUNCH */
    .world-item:nth-child(9) {
        background:
            radial-gradient(circle at 82% 18%, rgba(238,252,253,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(47,129,147,.29), transparent 44%),
            linear-gradient(145deg, #dff0f1, #afd4d9);
    }

    /* 10 — PRODUCTIVITY OS */
    .world-item:nth-child(10) {
        background:
            radial-gradient(circle at 82% 18%, rgba(248,245,255,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(105,82,153,.27), transparent 44%),
            linear-gradient(145deg, #e9e3f1, #c8bbda);
    }

    /* 11 — SELLER & COMMERCE */
    .world-item:nth-child(11) {
        background:
            radial-gradient(circle at 82% 18%, rgba(255,247,235,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(170,105,52,.30), transparent 44%),
            linear-gradient(145deg, #f0dfca, #d7b58e);
    }

    /* 12 — LIFE UTILITY */
    .world-item:nth-child(12) {
        background:
            radial-gradient(circle at 82% 18%, rgba(245,251,246,.95), transparent 30%),
            radial-gradient(circle at 88% 90%, rgba(72,127,101,.27), transparent 44%),
            linear-gradient(145deg, #e2ece4, #bdd1c2);
    }


    /* SAME PREMIUM MATERIAL ON ALL */

    .world-item {
        border: 1px solid rgba(255,255,255,.58) !important;

        box-shadow:
            0 20px 45px rgba(30,20,20,.11),
            inset 0 1px 0 rgba(255,255,255,.72);
    }
}
/* =========================================
   MOBILE — VAYEN STANDARD STACKED CARDS
========================================= */

@media (max-width: 768px) {

    .vayen-standard {
        padding: 76px 20px 88px;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 100% 38%,
                rgba(176, 112, 118, .10),
                transparent 30%
            ),
            #f0ece7;
    }

    .standard-top {
        padding-bottom: 42px;
    }

    .standard-top > span {
        display: block;
        margin-bottom: 24px;
    }

    .standard-top h2 {
        font-size: 51px;
        line-height: .91;
        letter-spacing: -3.8px;
    }

    .standard-top h2 span {
        color: #a36d72;
    }


    /* INTRO */

    .standard-content {
        display: block;
        padding-top: 34px;
    }

    .standard-statement {
        max-width: 320px;

        margin-bottom: 48px;

        font-size: 17px;
        line-height: 1.5;
        letter-spacing: -.35px;

        color: #211c1c;
    }


    /* STACK */

    .standard-points {
        display: flex;
        flex-direction: column;

        gap: 0;
    }

    .standard-point {
        min-height: 205px;

        padding: 24px 23px 26px;

        display: grid;
        grid-template-columns: 32px 1fr;
        align-items: start;
        gap: 12px;

        position: relative;
        overflow: hidden;

        border: 1px solid rgba(255,255,255,.58);
        border-radius: 25px;

        box-shadow:
            0 18px 45px rgba(35,22,23,.09),
            inset 0 1px 0 rgba(255,255,255,.65);
    }


    /* OVERLAP */

    .standard-point + .standard-point {
        margin-top: -18px;
    }

    .standard-point:nth-child(1) {
        z-index: 1;

        background:
            radial-gradient(
                circle at 88% 15%,
                rgba(255,255,255,.70),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #ead6d4,
                #cfa3a4
            );
    }

    .standard-point:nth-child(2) {
        z-index: 2;

        background:
            radial-gradient(
                circle at 88% 15%,
                rgba(255,255,255,.75),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #eee3cf,
                #d8bd91
            );
    }

    .standard-point:nth-child(3) {
        z-index: 3;

        background:
            radial-gradient(
                circle at 88% 15%,
                rgba(255,255,255,.70),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                #ddd9d6,
                #bbb2ae
            );
    }


    /* NUMBER */

    .standard-point > span {
        padding-top: 3px;

        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1px;

        color: rgba(52,35,36,.48);
    }


    /* TEXT */

    .standard-point h3 {
        margin: 0;

        max-width: 230px;

        font-size: 26px;
        line-height: 1.02;
        letter-spacing: -1.5px;
        font-weight: 500;

        color: #1b1717;
    }

    .standard-point p {
        max-width: 245px;

        margin-top: 15px;

        font-size: 12px;
        line-height: 1.6;

        color: rgba(43,31,31,.66);
    }


    /* SOFT LIGHT */

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

        position: absolute;

        width: 150px;
        height: 150px;

        right: -60px;
        bottom: -75px;

        border-radius: 50%;

        background: rgba(255,255,255,.22);
        filter: blur(35px);

        pointer-events: none;
    }
}
/* MOBILE — WORLDS TO STANDARD TRANSITION */

@media (max-width: 768px) {

    .all-products-link {
        margin-bottom: 0;
    }

    .worlds-section {
        padding-bottom: 38px;
    }

    .vayen-standard {
        position: relative;
        padding-top: 62px;

        background:
            radial-gradient(
                circle at 12% 0%,
                rgba(183,105,112,.13),
                transparent 25%
            ),
            radial-gradient(
                circle at 100% 34%,
                rgba(176,112,118,.08),
                transparent 30%
            ),
            #f0ece7;
    }

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

        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(157,102,107,.22),
                transparent
            );
    }
}
/* =========================================
   MOBILE — NEW AT VAYEN PRODUCT DECK
========================================= */

@media (max-width: 768px) {

    .new-vayen {
        padding: 72px 20px 88px;
        overflow: hidden;
    }

    .new-vayen-head {
        margin-bottom: 42px;
    }

    .new-products {
        width: 100%;
        height: 365px;

        position: relative;
        display: block;

        max-width: none;
        margin: 0;
    }

    .new-product {
        position: absolute;
        left: 0;
        top: 0;

        width: 100%;
        height: 315px;
        min-height: 315px;

        padding: 23px;

        border-radius: 26px;
        border: 1px solid rgba(255,255,255,.12);

        transform-origin: center top;

        box-shadow:
            0 24px 55px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.12);

        transition:
            transform .45s cubic-bezier(.2,.8,.2,1),
            opacity .4s ease;

        touch-action: pan-y;
    }

    /* FRONT CARD */

    .new-product:nth-child(1) {
        z-index: 4;
        transform: translateY(0) scale(1);
    }

    /* CARD BEHIND */

    .new-product:nth-child(2) {
        z-index: 3;
        transform: translateY(15px) scale(.965);
    }

    .new-product:nth-child(3) {
        z-index: 2;
        transform: translateY(30px) scale(.93);
    }

    .new-product:nth-child(4) {
        z-index: 1;
        transform: translateY(45px) scale(.895);
    }

    .new-product.deck-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .new-product.deck-front {
        cursor: grab;
    }

    .new-product.deck-front:active {
        cursor: grabbing;
    }
}
/* MOBILE — SCATTERED PREMIUM CARD DECK */

@media (max-width: 768px) {

    .new-products {
        height: 395px;
        position: relative;
        perspective: 1000px;
    }

    .new-product {
        width: 94%;
        height: 315px;
        min-height: 315px;

        left: 3%;
        top: 18px;

        transform-origin: 50% 85%;

        box-shadow:
            0 28px 65px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .new-product:nth-child(1) {
        transform:
            translate(-5px, 0)
            rotate(-2.5deg)
            scale(1) !important;
    }

    .new-product:nth-child(2) {
        transform:
            translate(8px, 12px)
            rotate(4deg)
            scale(.975) !important;
    }

    .new-product:nth-child(3) {
        transform:
            translate(-8px, 24px)
            rotate(-4.5deg)
            scale(.95) !important;
    }

    .new-product:nth-child(4) {
        transform:
            translate(6px, 35px)
            rotate(2.5deg)
            scale(.925) !important;
    }
}
/* MOBILE — SUBTLE SWIPE EDGE SIGNAL */

@media (max-width: 768px) {

    .new-product.deck-front::before,
    .new-product.deck-front::after {
        content: "";

        position: absolute;
        top: 20%;
        bottom: 20%;

        width: 32px;
        border-radius: 50%;

        filter: blur(14px);
        pointer-events: none;

        z-index: 5;
    }

    /* LEFT LIGHT */

    .new-product.deck-front::before {
        left: -15px;

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

        animation: deckGlowLeft 2.4s ease-in-out infinite;
    }

    /* RIGHT LIGHT */

    .new-product.deck-front::after {
        right: -15px;

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

        animation: deckGlowRight 2.4s ease-in-out infinite;
    }

    @keyframes deckGlowLeft {

        0%, 45%, 100% {
            opacity: .08;
            transform: translateX(-4px);
        }

        20% {
            opacity: .75;
            transform: translateX(5px);
        }
    }

    @keyframes deckGlowRight {

        0%, 45%, 100% {
            opacity: .08;
            transform: translateX(4px);
        }

        65% {
            opacity: .75;
            transform: translateX(-5px);
        }
    }
}
/* MOBILE — FRONT DECK EDGE SWIPE GLOW */

@media (max-width: 768px) {

    .new-products .new-product {
        overflow: visible !important;
    }

    .new-products .new-product:first-child::before,
    .new-products .new-product:first-child::after {
        content: "";

        position: absolute;
        top: 22%;
        width: 10px;
        height: 56%;

        border-radius: 50%;

        background: #ffffff;

        filter: blur(7px);

        z-index: 50;
        pointer-events: none;
    }

    .new-products .new-product:first-child::before {
        left: -3px;
        animation: vayenLeftGlow 2.2s ease-in-out infinite;
    }

    .new-products .new-product:first-child::after {
        right: -3px;
        animation: vayenRightGlow 2.2s ease-in-out infinite;
    }

    @keyframes vayenLeftGlow {
        0%, 40%, 100% {
            opacity: .08;
            box-shadow: 0 0 5px rgba(255,255,255,0);
        }

        18% {
            opacity: 1;
            box-shadow:
                0 0 12px rgba(255,255,255,.9),
                0 0 28px rgba(255,190,200,.75);
        }
    }

    @keyframes vayenRightGlow {
        0%, 45%, 100% {
            opacity: .08;
            box-shadow: 0 0 5px rgba(255,255,255,0);
        }

        68% {
            opacity: 1;
            box-shadow:
                0 0 12px rgba(255,255,255,.9),
                0 0 28px rgba(255,190,200,.75);
        }
    }
}
/* Softer swipe edge glow */

@media (max-width: 768px) {

    .new-products .new-product:first-child::before,
    .new-products .new-product:first-child::after {
        opacity: .55;
        filter: blur(9px);
    }

    @keyframes vayenLeftGlow {
        0%, 40%, 100% {
            opacity: .04;
            box-shadow: none;
        }

        18% {
            opacity: .55;
            box-shadow:
                0 0 9px rgba(255,255,255,.55),
                0 0 20px rgba(255,190,200,.38);
        }
    }

    @keyframes vayenRightGlow {
        0%, 45%, 100% {
            opacity: .04;
            box-shadow: none;
        }

        68% {
            opacity: .55;
            box-shadow:
                0 0 9px rgba(255,255,255,.55),
                0 0 20px rgba(255,190,200,.38);
        }
    }
}
/* =========================================
   MOBILE — VAYEN CLOSING PREMIUM FINISH
========================================= */

@media (max-width: 768px) {

    .vayen-closing {
        position: relative;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 72%,
                rgba(181,108,115,.10),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                #f3efeb 0%,
                #eee9e4 100%
            );
    }

    /* GIANT BACKGROUND VAYEN */

    .closing-mark {
        opacity: .055;

        text-shadow:
            0 10px 35px rgba(164,102,108,.12);

        transform: translateY(2px);
    }

    /* SMALL LABEL */

    .closing-label {
        color: #9d656a;
        letter-spacing: 3px;
    }

    /* KEEP MOVING */

    .vayen-closing h2 span {
        color: #a96f74;
    }

    /* PREMIUM BUTTON */

    .closing-button {
        border: 1px solid rgba(255,255,255,.16);

        background:
            linear-gradient(
                135deg,
                #262122 0%,
                #121111 100%
            );

        box-shadow:
            0 15px 35px rgba(30,18,20,.18),
            inset 0 1px 0 rgba(255,255,255,.13);

        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }

    .closing-button:active {
        transform: scale(.97);

        box-shadow:
            0 8px 20px rgba(30,18,20,.15),
            inset 0 1px 0 rgba(255,255,255,.10);
    }

    /* SMOOTH FOOTER TRANSITION */

    .main-footer {
        position: relative;
        border-top: 1px solid rgba(255,255,255,.05);

        box-shadow:
            0 -20px 45px rgba(17,16,16,.05);
    }
}
/* =========================================
   VAYEN — MOBILE BOTTOM NAV
========================================= */

.vayen-mobile-nav {
    display: none;
}

@media (max-width: 768px) {

    body {
        padding-bottom: 82px;
    }

    .vayen-mobile-nav {
        position: fixed;

        left: 50%;
        bottom: 14px;

        width: calc(100% - 28px);
        max-width: 390px;
        height: 64px;

        padding: 7px 8px;

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

        background: rgba(20, 18, 18, .88);

        border: 1px solid rgba(255,255,255,.10);
        border-radius: 22px;

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

        box-shadow:
            0 18px 45px rgba(0,0,0,.26),
            inset 0 1px 0 rgba(255,255,255,.08);

        transform: translateX(-50%);

        z-index: 9999;
    }

    .mobile-nav-item {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        border-radius: 16px;

        color: rgba(255,255,255,.43);
        text-decoration: none;

        font-size: 8px;
        font-weight: 700;
        letter-spacing: .3px;

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

    .mobile-nav-icon {
        width: 19px;
        height: 19px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-icon svg {
        width: 100%;
        height: 100%;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* ACTIVE */

    .mobile-nav-item.active {
        color: #f5d7da;

        background:
            radial-gradient(
                circle at 50% 100%,
                rgba(190,100,110,.18),
                transparent 70%
            );
    }

    .mobile-nav-item.active::after {
        content: "";

        position: absolute;
        bottom: 3px;

        width: 3px;
        height: 3px;

        border-radius: 50%;

        background: #d99199;

        box-shadow:
            0 0 9px rgba(217,145,153,.75);
    }

    .mobile-nav-item:active {
        background: rgba(255,255,255,.06);
    }
}
/* VAYEN — MOBILE EDGE DOCK */

@media (max-width: 768px) {

    body {
        padding-bottom: 74px;
    }

    .vayen-mobile-nav {
        left: 0;
        bottom: 0;

        width: 100%;
        max-width: none;
        height: 72px;

        padding:
            8px 14px
            calc(8px + env(safe-area-inset-bottom));

        transform: none;

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

        border-radius: 24px 24px 0 0;

        background:
            linear-gradient(
                180deg,
                rgba(32,28,29,.94),
                rgba(15,14,14,.98)
            );

        box-shadow:
            0 -14px 35px rgba(20,12,13,.14),
            inset 0 1px 0 rgba(255,255,255,.06);

        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .mobile-nav-item {
        gap: 5px;
        border-radius: 14px;

        font-size: 8px;
        color: rgba(255,255,255,.42);
    }

    .mobile-nav-icon {
        width: 20px;
        height: 20px;
    }

    /* ACTIVE ITEM */

    .mobile-nav-item.active {
        color: #f2d1d4;
        background: transparent;
    }

    .mobile-nav-item.active::before {
        content: "";

        position: absolute;
        top: -8px;

        width: 34px;
        height: 2px;

        border-radius: 0 0 8px 8px;

        background: #cf8d94;

        box-shadow:
            0 2px 14px rgba(207,141,148,.65);
    }

    .mobile-nav-item.active::after {
        display: none;
    }
}
/* MOBILE — MAKE EXPLORE WORLDS LOOK TAPPABLE */

@media (max-width: 768px) {

    .worlds-reveal {
        gap: 15px;
    }

    .worlds-reveal > span:first-child {
        color: rgba(255,255,255,.58);
    }

    .worlds-reveal-arrow {
        position: relative;

        width: 48px;
        height: 48px;

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

        border: 1px solid rgba(225,168,174,.30);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 8px 25px rgba(0,0,0,.18);

        animation: none;
    }

    .worlds-reveal-arrow::before {
        content: "";

        position: absolute;
        inset: -1px;

        border: 1px solid rgba(218,143,151,.40);
        border-radius: 50%;

        animation: exploreTapPulse 2.2s ease-out infinite;
    }

    @keyframes exploreTapPulse {
        0% {
            transform: scale(.82);
            opacity: .7;
        }

        55% {
            transform: scale(1.35);
            opacity: 0;
        }

        100% {
            transform: scale(1.35);
            opacity: 0;
        }
    }

    .worlds-reveal:active .worlds-reveal-arrow {
        transform: scale(.90);
    }
}
@media (max-width: 768px) {

    .worlds-reveal-arrow {
        font-size: 23px;
        font-weight: 300;
        line-height: 1;

        color: #e4afb4;

        transition:
            transform .45s cubic-bezier(.2,.8,.2,1),
            background .3s ease;
    }

    /* OPEN HONE PAR + → × */

    .worlds-reveal.reveal-open .worlds-reveal-arrow {
        transform: rotate(45deg);
    }
}
/* MOBILE — VAYEN DOCK PREMIUM POLISH */

@media (max-width: 768px) {

    .vayen-mobile-nav {
        background:
            radial-gradient(
                circle at 12% 0%,
                rgba(185,105,114,.13),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                rgba(34,30,31,.97),
                rgba(14,13,13,.99)
            );

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

        box-shadow:
            0 -12px 35px rgba(15,10,10,.16),
            inset 0 1px 0 rgba(255,255,255,.055);
    }

    .mobile-nav-item {
        color: rgba(255,255,255,.43);

        transition:
            color .3s ease,
            transform .25s ease;
    }

    .mobile-nav-icon {
        transition:
            transform .3s cubic-bezier(.2,.8,.2,1),
            filter .3s ease;
    }

    /* ACTIVE */

    .mobile-nav-item.active {
        color: #f1c8cc;
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: translateY(-2px);

        filter:
            drop-shadow(
                0 0 7px rgba(214,137,146,.42)
            );
    }

    .mobile-nav-item.active::before {
        width: 28px;
        height: 2px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #db9aa1,
                transparent
            );

        box-shadow:
            0 3px 12px rgba(211,135,144,.45);
    }

    /* TAP FEEL */

    .mobile-nav-item:active {
        transform: scale(.94);
        color: #f4d8da;
    }
}
@media (max-width: 768px) {

    .vayen-mobile-nav {
        background: rgba(17,16,16,.97);

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

        box-shadow:
            0 -8px 24px rgba(0,0,0,.10);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-nav-item {
        color: rgba(255,255,255,.38);
    }

    .mobile-nav-item.active {
        color: #eed4d6;
        background: transparent;
    }

    .mobile-nav-item.active::before,
    .mobile-nav-item.active::after {
        display: none;
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: none;
        filter: none;
    }

    .mobile-nav-item:active {
        transform: scale(.96);
        background: rgba(255,255,255,.035);
    }
}
/* MOBILE NAV — SOFT ACTIVE LIGHT */

@media (max-width: 768px) {

    .mobile-nav-item.active {
        color: #e6c5c8;
    }

    .mobile-nav-item.active::before {
        content: "";
        display: block;

        position: absolute;
        top: -8px;

        width: 25px;
        height: 1px;

        border-radius: 10px;

        background: rgba(221,157,164,.65);

        box-shadow:
            0 2px 8px rgba(211,137,145,.20);
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: translateY(-1px);

        filter:
            drop-shadow(0 0 4px rgba(211,137,145,.20));
    }
}
/* MOBILE NAV — CLEAN PREMIUM ACTIVE */

@media (max-width: 768px) {

    .mobile-nav-item.active::before,
    .mobile-nav-item.active::after {
        display: none !important;
    }

    .mobile-nav-item {
        color: rgba(255,255,255,.38);
    }

    .mobile-nav-item.active {
        color: rgba(242,211,214,.88);
        background: transparent;
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: translateY(-1px);
        filter: drop-shadow(
            0 0 3px rgba(218,155,162,.18)
        );
    }
}
@media (max-width: 768px) {

    /* REMOVE PERMANENT ACTIVE EFFECT */

    .mobile-nav-item.active,
    .mobile-nav-item {
        color: rgba(255,255,255,.45) !important;
        background: transparent !important;
    }

    .mobile-nav-item.active::before,
    .mobile-nav-item.active::after {
        display: none !important;
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: none !important;
        filter: none !important;
    }

    /* ONLY WHILE PRESSING */

    .mobile-nav-item:active {
        color: #efd3d6 !important;
        transform: scale(.95);

        background: rgba(255,255,255,.035) !important;
    }

    .mobile-nav-item:active .mobile-nav-icon {
        filter: drop-shadow(
            0 0 4px rgba(218,155,162,.25)
        ) !important;
    }
}
/* Hide mobile nav while welcome screen is open */

@media (max-width: 768px) {

    body:has(.welcome-screen:not(.welcome-exit)) .vayen-mobile-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .vayen-mobile-nav {
        transition:
            opacity .45s ease,
            visibility .45s ease;
    }
}
/* MOBILE NAV — SLIGHTLY BRIGHTER */

@media (max-width: 768px) {

    .mobile-nav-item,
    .mobile-nav-item.active {
        color: rgba(255,255,255,.58) !important;
    }

    .mobile-nav-icon svg {
        opacity: .88;
    }

    .mobile-nav-item:active {
        color: rgba(246,220,222,.90) !important;
    }
}
/* MOBILE NAV — SOFTER PREMIUM DOCK */

@media (max-width: 768px) {

    .vayen-mobile-nav {
        background:
            linear-gradient(
                180deg,
                rgba(35,32,32,.96),
                rgba(24,22,22,.97)
            ) !important;

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

        box-shadow:
            0 -8px 25px rgba(0,0,0,.08),
            inset 0 1px 0 rgba(255,255,255,.045) !important;
    }
}
/* =========================================
   VAYEN — CUSTOMER ACCOUNT
========================================= */

.account-body {
    margin: 0;
    background: #f1ede8;
    color: #191616;
}

.account-header {
    min-height: 76px;
    padding: 0 6vw;

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

    border-bottom: 1px solid rgba(25,20,20,.09);

    background: rgba(244,240,235,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.account-brand {
    color: #171414;
    text-decoration: none;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: -1px;
}

.account-home {
    padding: 10px 17px;

    border: 1px solid rgba(25,20,20,.12);
    border-radius: 100px;

    color: #211d1d;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}


/* MAIN */

.customer-account {
    max-width: 1320px;
    margin: 0 auto;
    padding: 95px 6vw 120px;
}


/* WELCOME */

.account-welcome {
    padding-bottom: 80px;
}

.account-label {
    display: block;
    margin-bottom: 25px;

    color: #a06a6f;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.account-welcome h1 {
    max-width: 900px;
    margin: 0;

    font-size: clamp(65px, 8vw, 118px);
    line-height: .87;
    letter-spacing: -7px;
    font-weight: 500;
}

.account-welcome h1 span {
    color: #a26b70;
}

.account-welcome p {
    max-width: 390px;
    margin: 35px 0 0;

    color: #716968;

    font-size: 15px;
    line-height: 1.65;
}


/* ACCOUNT ACTIONS */

.account-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;

    padding-top: 22px;
    border-top: 1px solid rgba(25,20,20,.11);
}

.account-action {
    min-height: 275px;
    padding: 26px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 26px;

    color: #1c1818;
    text-decoration: none;

    box-shadow:
        0 16px 38px rgba(40,25,27,.07),
        inset 0 1px 0 rgba(255,255,255,.65);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;
}

.account-action:hover {
    transform: translateY(-4px);

    box-shadow:
        0 24px 48px rgba(40,25,27,.11),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.account-action-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 9px;
    font-weight: 700;

    color: rgba(40,28,29,.48);
}

.action-symbol {
    width: 35px;
    height: 35px;

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

    border: 1px solid rgba(30,20,20,.11);
    border-radius: 50%;
}

.account-action small {
    display: block;
    margin-bottom: 10px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;

    color: rgba(60,40,42,.52);
}

.account-action h2 {
    margin: 0;

    font-size: 39px;
    line-height: .95;
    letter-spacing: -2.5px;
    font-weight: 500;
}

.account-action p {
    max-width: 250px;
    margin: 17px 0 0;

    color: rgba(45,35,35,.60);

    font-size: 12px;
    line-height: 1.55;
}


/* INDIVIDUAL CARD ATMOSPHERE */

.library-action {
    background:
        radial-gradient(circle at 88% 90%,
        rgba(183,98,108,.25), transparent 42%),
        linear-gradient(145deg,#f5e4e1,#e8c8c5);
}

.orders-action {
    background:
        radial-gradient(circle at 88% 90%,
        rgba(68,119,164,.22), transparent 42%),
        linear-gradient(145deg,#e9f0f5,#cbdce7);
}

.saved-action {
    background:
        radial-gradient(circle at 88% 90%,
        rgba(172,126,57,.22), transparent 42%),
        linear-gradient(145deg,#f2ead8,#dfcba4);
}

.profile-action {
    background:
        radial-gradient(circle at 88% 90%,
        rgba(104,82,151,.20), transparent 42%),
        linear-gradient(145deg,#ebe5f1,#d2c4df);
}


/* LIBRARY */

.account-library {
    padding-top: 105px;
}

.account-section-head {
    margin-bottom: 35px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.account-section-head > div > span {
    display: block;
    margin-bottom: 13px;

    color: #9e696e;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.account-section-head h2 {
    margin: 0;

    font-size: 48px;
    letter-spacing: -3px;
    font-weight: 500;
}

.account-section-head > a {
    color: #6c6261;
    text-decoration: none;

    font-size: 10px;
    font-weight: 700;
}


/* EMPTY LIBRARY */

.account-empty {
    min-height: 320px;
    padding: 45px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid rgba(30,20,20,.09);
    border-radius: 28px;

    background:
        radial-gradient(circle at 50% 100%,
        rgba(178,105,112,.12), transparent 35%),
        rgba(255,255,255,.28);
}

.empty-mark {
    width: 58px;
    height: 58px;

    margin-bottom: 24px;

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

    border: 1px solid rgba(157,100,106,.20);
    border-radius: 50%;

    color: #a46d72;

    font-size: 22px;
    font-weight: 600;
}

.account-empty h3 {
    margin: 0;

    font-size: 28px;
    letter-spacing: -1.4px;
    font-weight: 500;
}

.account-empty p {
    max-width: 290px;
    margin: 14px 0 25px;

    color: #786f6d;

    font-size: 12px;
    line-height: 1.6;
}

.account-explore {
    padding: 13px 18px 13px 21px;

    display: flex;
    align-items: center;
    gap: 20px;

    border-radius: 100px;

    background: #181616;
    color: #fff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================
   ACCOUNT — MOBILE
========================================= */

@media (max-width: 768px) {

    .account-body {
        padding-bottom: 78px;
    }

    .account-header {
        min-height: 66px;
        padding: 0 20px;
    }

    .account-home {
        padding: 9px 14px;
    }

    .customer-account {
        padding: 72px 20px 85px;
    }

    .account-welcome {
        padding-bottom: 58px;
    }

    .account-label {
        margin-bottom: 20px;
    }

    .account-welcome h1 {
        max-width: 350px;

        font-size: 57px;
        line-height: .88;
        letter-spacing: -4px;
    }

    .account-welcome p {
        max-width: 310px;
        margin-top: 27px;

        font-size: 13px;
    }


    /* 4 PERSONAL CARDS */

    .account-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        padding-top: 18px;
    }

    .account-action {
        min-height: 190px;
        padding: 17px;

        border-radius: 21px;
    }

    .action-symbol {
        width: 30px;
        height: 30px;

        font-size: 11px;
    }

    .account-action small {
        margin-bottom: 7px;

        font-size: 6px;
        letter-spacing: 1.3px;
    }

    .account-action h2 {
        font-size: 27px;
        letter-spacing: -1.5px;
    }

    .account-action p {
        margin-top: 10px;

        font-size: 9px;
        line-height: 1.5;
    }


    /* LIBRARY */

    .account-library {
        padding-top: 78px;
    }

    .account-section-head {
        margin-bottom: 25px;
    }

    .account-section-head h2 {
        font-size: 39px;
        letter-spacing: -2.5px;
    }

    .account-empty {
        min-height: 300px;
        padding: 35px 24px;

        border-radius: 24px;
    }

    .account-empty h3 {
        max-width: 250px;
        font-size: 25px;
    }
}
@media (max-width:768px) {

    .customer-account {
        padding-top: 58px;
    }

    .account-welcome {
        padding-bottom: 46px;
    }

    .account-welcome h1 {
        font-size: 54px;
        line-height: .89;
        letter-spacing: -3.8px;
    }

    .account-welcome p {
        margin-top: 24px;
    }
}
@media (max-width:768px) {

    .account-action {
        min-height: 205px;
        padding: 18px;
    }

    .account-action h2 {
        font-size: 28px;
        line-height: .98;
    }

    .account-action p {
        max-width: 135px;
        margin-top: 11px;
        font-size: 9px;
        line-height: 1.55;
    }

    .account-action small {
        margin-bottom: 8px;
    }
}
@media (max-width:768px) {

    .account-library {
        padding-top: 68px;
    }

    .account-empty {
        min-height: 330px;
        position: relative;
        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 105%,
                rgba(181,108,115,.16),
                transparent 38%
            ),
            rgba(255,255,255,.30);

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.65),
            0 18px 45px rgba(40,25,27,.05);
    }

    .empty-mark {
        width: 62px;
        height: 62px;

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

        box-shadow:
            0 10px 30px rgba(166,102,108,.08),
            inset 0 1px 0 rgba(255,255,255,.7);
    }

    .account-empty h3 {
        max-width: 270px;
        font-size: 27px;
        line-height: 1.02;
        letter-spacing: -1.6px;
    }

    .account-explore {
        min-height: 46px;
        padding: 0 20px;

        box-shadow:
            0 12px 28px rgba(25,17,18,.14),
            inset 0 1px 0 rgba(255,255,255,.10);
    }
}
/* =========================================
   VAYEN — WELCOME PREFERENCE
========================================= */

.welcome-preference {
    margin-top: 105px;
    padding: 55px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;

    border: 1px solid rgba(30,20,20,.09);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(181,108,115,.12),
            transparent 35%
        ),
        rgba(255,255,255,.25);
}

.welcome-preference-copy > span {
    display: block;
    margin-bottom: 22px;

    color: #a06a6f;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.welcome-preference-copy h2 {
    margin: 0;

    font-size: 52px;
    line-height: .94;
    letter-spacing: -3.5px;
    font-weight: 500;
}

.welcome-preference-copy p {
    max-width: 300px;
    margin: 25px 0 0;

    color: #746b69;

    font-size: 13px;
    line-height: 1.6;
}


/* NAME BOX */

.welcome-name-box {
    padding: 28px;

    border: 1px solid rgba(255,255,255,.65);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.60),
            rgba(237,220,218,.55)
        );

    box-shadow:
        0 18px 45px rgba(40,25,27,.07),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.welcome-name-box label {
    display: block;
    margin-bottom: 12px;

    color: #8d686b;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

#welcomeName {
    width: 100%;
    box-sizing: border-box;

    padding: 16px 0;

    border: 0;
    border-bottom: 1px solid rgba(30,20,20,.18);
    outline: 0;

    background: transparent;
    color: #181515;

    font: inherit;
    font-size: 25px;
    letter-spacing: -1px;
}

#welcomeName::placeholder {
    color: rgba(30,20,20,.30);
}


/* PREVIEW */

.welcome-preview {
    margin-top: 30px;
    padding: 20px;

    border-radius: 18px;

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

.welcome-preview small {
    display: block;
    margin-bottom: 10px;

    color: #a06a6f;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.welcome-preview p {
    margin: 0;

    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -1.2px;
}

.welcome-preview strong {
    color: #a66e73;
    font-weight: 500;
}


/* SAVE */

#saveWelcomeName {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    padding: 0 18px;

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

    border: 0;
    border-radius: 100px;

    background: #181515;
    color: #fff;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}


/* MOBILE */

@media (max-width:768px) {

    .welcome-preference {
        margin-top: 68px;
        padding: 28px 20px;

        display: block;

        border-radius: 25px;
    }

    .welcome-preference-copy > span {
        margin-bottom: 18px;
    }

    .welcome-preference-copy h2 {
        font-size: 39px;
        line-height: .94;
        letter-spacing: -2.5px;
    }

    .welcome-preference-copy p {
        max-width: 280px;
        margin-top: 18px;

        font-size: 12px;
    }

    .welcome-name-box {
        margin-top: 32px;
        padding: 21px;

        border-radius: 21px;
    }

    #welcomeName {
        font-size: 22px;
    }

    .welcome-preview p {
        font-size: 22px;
    }
}
/* VAYEN — PERSONAL GREETING POLISH */

.welcome-card #homeWelcome {
    margin: 20px 0 0;
    max-width: 470px;

    display: flex;
    flex-direction: column;
    align-items: center;

    line-height: .94;
    letter-spacing: -2px;
}

.welcome-line {
    font-size: 30px;
    font-weight: 500;
    color: rgba(53,27,30,.72);
}

.welcome-person {
    margin-top: 7px;

    max-width: 100%;

    font-size: 52px;
    font-weight: 600;
    line-height: .95;

    color: #351d20;

    overflow-wrap: anywhere;
}

.welcome-card .welcome-text {
    max-width: 330px;
    margin-top: 27px;

    line-height: 1.55;
    color: rgba(67,39,42,.55);
}


/* MOBILE */

@media (max-width:768px) {

    .welcome-card #homeWelcome {
        margin-top: 20px;
        letter-spacing: -1.5px;
    }

    .welcome-line {
        font-size: 23px;
    }

    .welcome-person {
        margin-top: 7px;
        font-size: clamp(37px, 11vw, 46px);
    }

    .welcome-card .welcome-text {
        max-width: 265px;
        margin-top: 25px;
        font-size: 13px;
    }
}
.welcome-line {
    color: rgba(53, 27, 30, .82);
    font-weight: 500;
}

@media (max-width:768px) {
    .welcome-line {
        font-size: 24px;
        color: rgba(53, 27, 30, .82);
    }
}
/* WELCOME — MICRO TEXT POLISH */

.welcome-small {
    margin-bottom: 0;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3.1px;

    color: rgba(70, 39, 43, .62);
}

.welcome-card .welcome-text {
    max-width: 300px;
    margin-top: 26px;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .05px;

    color: rgba(70, 39, 43, .60);
}

@media (max-width: 768px) {

    .welcome-small {
        font-size: 8px;
        letter-spacing: 2.7px;
    }

    .welcome-card .welcome-text {
        max-width: 270px;
        font-size: 11.5px;
        line-height: 1.55;
        color: rgba(70, 39, 43, .62);
    }
}
@media (max-width:768px) {

    /* card thoda compact */
    .welcome-card {
    min-height: 0;
    height: auto;
    box-sizing: border-box;

    padding: 36px 28px 34px;
}
    /* micro heading brighter */
    .welcome-small {
        color: rgba(70, 39, 43, .72);
    }

    /* description brighter */
    .welcome-card .welcome-text {
        color: rgba(70, 39, 43, .70);
    }

    /* elements ke beech spacing balance */
    .welcome-card #homeWelcome {
        margin-top: 17px;
    }

    .welcome-card .welcome-text {
        margin-top: 23px;
    }

    .welcome-card #enterVayen {
        margin-top: 25px;
    }
}
@media (max-width:768px) {
    .welcome-brand {
        transform: translateY(-25px);
    }
}
@media (max-width:768px) {

    .welcome-brand {
        transform: translateY(-8px);
        margin-bottom: 10px;
    }

    .welcome-small {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .welcome-card #homeWelcome {
        margin-top: 0;
    }
}
@media (max-width:768px) {

    .welcome-brand {
        transform: none;
        margin-top: -20px;
        margin-bottom: 20px;
    }

    .welcome-small {
        margin-top: 0;
        margin-bottom: 22px;
    }

    .welcome-card #homeWelcome {
        margin-top: 0;
    }
}
@media (max-width:768px) {
    .welcome-small {
        transform: translateY(6px);
    }
}
/* =========================================
   VAYEN — CUSTOMER LIBRARY
========================================= */

.library-body {
    margin: 0;
    background: #f1ede8;
    color: #191616;
}

.library-header {
    min-height: 76px;
    padding: 0 6vw;

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

    border-bottom: 1px solid rgba(25,20,20,.09);

    background: rgba(244,240,235,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.library-brand {
    color: #171414;
    text-decoration: none;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: -1px;
}

.library-back {
    padding: 10px 17px;

    border: 1px solid rgba(25,20,20,.12);
    border-radius: 100px;

    color: #211d1d;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}


/* MAIN */

.customer-library {
    max-width: 1320px;
    margin: 0 auto;
    padding: 95px 6vw 120px;
}


/* HERO */

.library-hero {
    padding-bottom: 75px;
}

.library-label {
    display: block;
    margin-bottom: 25px;

    color: #a06a6f;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.library-hero h1 {
    margin: 0;

    font-size: clamp(76px, 9vw, 132px);
    line-height: .82;
    letter-spacing: -8px;
    font-weight: 500;

    color: #181515;
}

.library-hero h1 span {
    color: #a66f74;
}

.library-hero p {
    max-width: 390px;
    margin: 38px 0 0;

    color: #746c6a;

    font-size: 14px;
    line-height: 1.65;
}


/* TOOLBAR */

.library-toolbar {
    min-height: 70px;

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

    border-top: 1px solid rgba(25,20,20,.11);
    border-bottom: 1px solid rgba(25,20,20,.11);
}

.library-count {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.library-count > span {
    font-size: 25px;
    font-weight: 500;
}

.library-count small {
    color: #8f7778;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.library-tools {
    display: flex;
    gap: 7px;
}

.library-filter {
    padding: 9px 15px;

    border: 1px solid rgba(25,20,20,.10);
    border-radius: 100px;

    background: transparent;
    color: #716766;

    font-size: 8px;
    font-weight: 700;

    cursor: pointer;
}

.library-filter.active {
    background: #1b1818;
    color: #fff;
    border-color: #1b1818;
}


/* PRODUCT AREA */

.library-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    padding-top: 35px;
}


/* EMPTY STATE */

.library-empty {
    min-height: 430px;
    margin-top: 35px;
    padding: 55px 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    text-align: center;

    border: 1px solid rgba(30,20,20,.09);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(182,105,113,.16),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.75),
            transparent 30%
        ),
        rgba(255,255,255,.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        0 22px 55px rgba(40,25,27,.05);
}

.library-empty-mark {
    width: 66px;
    height: 66px;
    margin-bottom: 27px;

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

    border: 1px solid rgba(161,101,107,.20);
    border-radius: 50%;

    background: rgba(255,255,255,.30);
    color: #a66e73;

    font-size: 23px;
    font-weight: 600;

    box-shadow:
        0 12px 30px rgba(166,102,108,.08),
        inset 0 1px 0 rgba(255,255,255,.70);
}

.library-empty > span {
    margin-bottom: 17px;

    color: #a06a6f;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.library-empty h2 {
    margin: 0;

    font-size: 46px;
    line-height: .94;
    letter-spacing: -3px;
    font-weight: 500;
}

.library-empty h2 em {
    color: #a66f74;
    font-style: normal;
}

.library-empty p {
    max-width: 355px;
    margin: 22px 0 28px;

    color: #746a69;

    font-size: 12px;
    line-height: 1.65;
}

.library-explore-button {
    min-height: 48px;
    padding: 0 20px 0 22px;

    display: flex;
    align-items: center;
    gap: 28px;

    border-radius: 100px;

    background: linear-gradient(135deg,#252020,#121111);
    color: #fff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;

    box-shadow:
        0 14px 32px rgba(30,18,20,.15),
        inset 0 1px 0 rgba(255,255,255,.11);
}


/* =========================================
   LIBRARY — MOBILE
========================================= */

@media (max-width:768px) {

    .library-body {
        padding-bottom: 78px;
    }

    .library-header {
        min-height: 66px;
        padding: 0 20px;
    }

    .library-back {
        padding: 9px 14px;
    }

    .customer-library {
        padding: 62px 20px 85px;
    }

    .library-hero {
        padding-bottom: 52px;
    }

    .library-label {
        margin-bottom: 20px;
    }

    .library-hero h1 {
        font-size: 68px;
        line-height: .82;
        letter-spacing: -5px;
    }

    .library-hero p {
        max-width: 300px;
        margin-top: 28px;

        font-size: 13px;
    }


    /* TOOLBAR */

    .library-toolbar {
        min-height: 64px;
    }

    .library-count > span {
        font-size: 22px;
    }

    .library-filter {
        padding: 8px 13px;
    }


    /* PRODUCTS LATER */

    .library-products {
        grid-template-columns: 1fr;
        gap: 12px;

        padding-top: 25px;
    }


    /* EMPTY SHELF */

    .library-empty {
        min-height: 390px;
        margin-top: 25px;
        padding: 40px 22px;

        border-radius: 25px;
    }

    .library-empty-mark {
        width: 61px;
        height: 61px;
        margin-bottom: 24px;
    }

    .library-empty h2 {
        font-size: 40px;
        line-height: .94;
        letter-spacing: -2.5px;
    }

    .library-empty p {
        max-width: 290px;
        margin: 20px 0 26px;

        font-size: 11px;
    }
}
/* =========================================
   VAYEN — CUSTOMER ORDERS
========================================= */

.orders-body {
    margin: 0;
    background: #f1ede8;
    color: #191616;
}

.orders-header {
    min-height: 76px;
    padding: 0 6vw;

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

    border-bottom: 1px solid rgba(25,20,20,.09);

    background: rgba(244,240,235,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.orders-brand {
    color: #171414;
    text-decoration: none;

    font-size: 17px;
    font-weight: 800;
    letter-spacing: -1px;
}

.orders-back {
    padding: 10px 17px;

    border: 1px solid rgba(25,20,20,.12);
    border-radius: 100px;

    color: #211d1d;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}


/* MAIN */

.customer-orders {
    max-width: 1320px;
    margin: 0 auto;
    padding: 95px 6vw 120px;
}


/* HERO */

.orders-hero {
    padding-bottom: 75px;
}

.orders-label {
    display: block;
    margin-bottom: 25px;

    color: #8a6c52;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.orders-hero h1 {
    margin: 0;

    font-size: clamp(76px, 9vw, 132px);
    line-height: .82;
    letter-spacing: -8px;
    font-weight: 500;
}

.orders-hero h1 span {
    color: #9a7958;
}

.orders-hero p {
    max-width: 370px;
    margin: 38px 0 0;

    color: #746c6a;

    font-size: 14px;
    line-height: 1.65;
}


/* TOOLBAR */

.orders-toolbar {
    min-height: 70px;

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

    border-top: 1px solid rgba(25,20,20,.11);
    border-bottom: 1px solid rgba(25,20,20,.11);
}

.orders-count {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.orders-count > span {
    font-size: 25px;
    font-weight: 500;
}

.orders-count small {
    color: #917d6b;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.orders-tools {
    display: flex;
    gap: 7px;
}

.orders-filter {
    padding: 9px 15px;

    border: 1px solid rgba(25,20,20,.10);
    border-radius: 100px;

    background: transparent;
    color: #716766;

    font-size: 8px;
    font-weight: 700;

    cursor: pointer;
}

.orders-filter.active {
    background: #1b1818;
    color: #fff;
    border-color: #1b1818;
}


/* ORDER LIST */

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding-top: 30px;
}


/* EMPTY STATE */

.orders-empty {
    min-height: 430px;
    margin-top: 35px;
    padding: 55px 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    text-align: center;

    border: 1px solid rgba(30,20,20,.09);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(181,137,85,.18),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.78),
            transparent 30%
        ),
        rgba(255,255,255,.28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.68),
        0 22px 55px rgba(40,25,27,.05);
}

.orders-empty-mark {
    width: 66px;
    height: 66px;
    margin-bottom: 27px;

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

    border: 1px solid rgba(154,121,88,.22);
    border-radius: 50%;

    background: rgba(255,255,255,.30);
    color: #987454;

    font-size: 23px;
    font-weight: 600;

    box-shadow:
        0 12px 30px rgba(130,94,59,.08),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.orders-empty > span {
    margin-bottom: 17px;

    color: #987454;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.orders-empty h2 {
    margin: 0;

    font-size: 46px;
    line-height: .94;
    letter-spacing: -3px;
    font-weight: 500;
}

.orders-empty h2 em {
    color: #9a7958;
    font-style: normal;
}

.orders-empty p {
    max-width: 355px;
    margin: 22px 0 28px;

    color: #746a69;

    font-size: 12px;
    line-height: 1.65;
}

.orders-explore-button {
    min-height: 48px;
    padding: 0 20px 0 22px;

    display: flex;
    align-items: center;
    gap: 28px;

    border-radius: 100px;

    background: linear-gradient(135deg,#252020,#121111);
    color: #fff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;

    box-shadow:
        0 14px 32px rgba(30,18,20,.15),
        inset 0 1px 0 rgba(255,255,255,.11);
}


/* =========================================
   ORDERS — MOBILE
========================================= */

@media (max-width:768px) {

    .orders-body {
        padding-bottom: 78px;
    }

    .orders-header {
        min-height: 66px;
        padding: 0 20px;
    }

    .orders-back {
        padding: 9px 14px;
    }

    .customer-orders {
        padding: 62px 20px 85px;
    }

    .orders-hero {
        padding-bottom: 52px;
    }

    .orders-label {
        margin-bottom: 20px;
        font-size: 8px;
        letter-spacing: 2.4px;
    }

    .orders-hero h1 {
        font-size: 68px;
        line-height: .82;
        letter-spacing: -5px;
    }

    .orders-hero p {
        max-width: 300px;
        margin-top: 28px;

        font-size: 13px;
    }

    .orders-toolbar {
        min-height: 64px;
    }

    .orders-count > span {
        font-size: 22px;
    }

    .orders-filter {
        padding: 8px 13px;
    }

    .orders-list {
        padding-top: 25px;
    }

    .orders-empty {
        min-height: 390px;
        margin-top: 25px;
        padding: 40px 22px;

        border-radius: 25px;
    }

    .orders-empty-mark {
        width: 61px;
        height: 61px;
        margin-bottom: 24px;
    }

    .orders-empty h2 {
        font-size: 40px;
        line-height: .94;
        letter-spacing: -2.5px;
    }

    .orders-empty p {
        max-width: 290px;
        margin: 20px 0 26px;

        font-size: 11px;
    }
}
/* =========================================
   VAYEN — SAVED
========================================= */

.saved-body {
    margin: 0;
    background: #f1ede8;
    color: #191616;
}

.saved-header {
    min-height: 76px;
    padding: 0 6vw;

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

    border-bottom: 1px solid rgba(25,20,20,.09);

    background: rgba(244,240,235,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.saved-brand {
    color: #171414;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -1px;
}

.saved-back {
    padding: 10px 17px;

    border: 1px solid rgba(25,20,20,.12);
    border-radius: 100px;

    color: #211d1d;
    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}


/* MAIN */

.customer-saved {
    max-width: 1320px;
    margin: 0 auto;
    padding: 95px 6vw 120px;
}


/* HERO */

.saved-hero {
    padding-bottom: 75px;
}

.saved-label {
    display: block;
    margin-bottom: 25px;

    color: #80658e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.saved-hero h1 {
    margin: 0;

    font-size: clamp(76px, 9vw, 132px);
    line-height: .82;
    letter-spacing: -8px;
    font-weight: 500;
}

.saved-hero h1 span {
    color: #8c6b9c;
}

.saved-hero p {
    max-width: 370px;
    margin: 38px 0 0;

    color: #746c6f;

    font-size: 14px;
    line-height: 1.65;
}


/* TOOLBAR */

.saved-toolbar {
    min-height: 70px;

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

    border-top: 1px solid rgba(25,20,20,.11);
    border-bottom: 1px solid rgba(25,20,20,.11);
}

.saved-count {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.saved-count > span {
    font-size: 25px;
    font-weight: 500;
}

.saved-count small {
    color: #88738e;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.saved-sort {
    padding: 9px 15px;

    border: 1px solid rgba(25,20,20,.10);
    border-radius: 100px;

    background: transparent;
    color: #71676f;

    font-size: 8px;
    font-weight: 700;
}


/* PRODUCTS */

.saved-products {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;

    padding-top: 30px;
}


/* EMPTY STATE */

.saved-empty {
    min-height: 430px;
    margin-top: 35px;
    padding: 55px 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    text-align: center;

    border: 1px solid rgba(30,20,20,.09);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(133,94,154,.17),
            transparent 39%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.78),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.31),
            rgba(232,223,237,.34)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70),
        0 22px 55px rgba(40,25,45,.05);
}

.saved-empty-mark {
    width: 66px;
    height: 66px;
    margin-bottom: 27px;

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

    border: 1px solid rgba(130,94,149,.22);
    border-radius: 50%;

    background: rgba(255,255,255,.31);
    color: #89699a;

    font-size: 25px;

    box-shadow:
        0 12px 30px rgba(113,77,132,.08),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.saved-empty > span {
    margin-bottom: 17px;

    color: #89699a;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.saved-empty h2 {
    margin: 0;

    font-size: 46px;
    line-height: .94;
    letter-spacing: -3px;
    font-weight: 500;
}

.saved-empty h2 em {
    color: #8c6b9c;
    font-style: normal;
}

.saved-empty p {
    max-width: 355px;
    margin: 22px 0 28px;

    color: #746b72;

    font-size: 12px;
    line-height: 1.65;
}

.saved-explore-button {
    min-height: 48px;
    padding: 0 20px 0 22px;

    display: flex;
    align-items: center;
    gap: 28px;

    border-radius: 100px;

    background: linear-gradient(135deg,#252020,#121111);
    color: #fff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;

    box-shadow:
        0 14px 32px rgba(30,18,20,.15),
        inset 0 1px 0 rgba(255,255,255,.11);
}


/* MOBILE */

@media (max-width:768px) {

    .saved-body {
        padding-bottom: 78px;
    }

    .saved-header {
        min-height: 66px;
        padding: 0 20px;
    }

    .saved-back {
        padding: 9px 14px;
    }

    .customer-saved {
        padding: 62px 20px 85px;
    }

    .saved-hero {
        padding-bottom: 52px;
    }

    .saved-label {
        margin-bottom: 20px;
        font-size: 8px;
        letter-spacing: 2.4px;
    }

    .saved-hero h1 {
        font-size: 68px;
        line-height: .82;
        letter-spacing: -5px;
    }

    .saved-hero p {
        max-width: 300px;
        margin-top: 28px;
        font-size: 13px;
    }

    .saved-toolbar {
        min-height: 64px;
    }

    .saved-count > span {
        font-size: 22px;
    }

    .saved-sort {
        padding: 8px 13px;
    }

    .saved-products {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 25px;
    }

    .saved-empty {
        min-height: 390px;
        margin-top: 25px;
        padding: 40px 22px;
        border-radius: 25px;
    }

    .saved-empty-mark {
        width: 61px;
        height: 61px;
        margin-bottom: 24px;
    }

    .saved-empty h2 {
        font-size: 40px;
        line-height: .94;
        letter-spacing: -2.5px;
    }

    .saved-empty p {
        max-width: 290px;
        margin: 20px 0 26px;
        font-size: 11px;
    }
}
/* =========================================
   VAYEN — CUSTOMER PROFILE
========================================= */

.profile-body {
    margin: 0;
    background: #f1ede8;
    color: #191616;
}

.profile-header {
    min-height: 76px;
    padding: 0 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(25,20,20,.09);
    background: rgba(244,240,235,.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.profile-brand {
    color: #171414;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -1px;
}

.profile-back {
    padding: 10px 17px;
    border: 1px solid rgba(25,20,20,.12);
    border-radius: 100px;

    color: #211d1d;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
}


/* MAIN */

.customer-profile {
    max-width: 1320px;
    margin: 0 auto;
    padding: 95px 6vw 120px;
}


/* HERO */

.profile-hero {
    padding-bottom: 80px;
}

.profile-label {
    display: block;
    margin-bottom: 25px;

    color: #76608c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.profile-hero h1 {
    margin: 0;

    font-size: clamp(76px, 9vw, 132px);
    line-height: .82;
    letter-spacing: -8px;
    font-weight: 500;
}

.profile-hero h1 span {
    color: #80679a;
}

.profile-hero p {
    max-width: 380px;
    margin: 38px 0 0;

    color: #746c70;
    font-size: 14px;
    line-height: 1.65;
}


/* SETTINGS */

.profile-settings {
    padding-top: 35px;
    border-top: 1px solid rgba(25,20,20,.11);

    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 14px;
}

.profile-setting-card {
    min-height: 520px;
    padding: 30px;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 20px;

    border: 1px solid rgba(255,255,255,.58);
    border-radius: 28px;

    box-shadow:
        0 20px 50px rgba(38,24,40,.07),
        inset 0 1px 0 rgba(255,255,255,.70);
}

.profile-name-card {
    background:
        radial-gradient(
            circle at 90% 90%,
            rgba(118,84,151,.20),
            transparent 42%
        ),
        linear-gradient(145deg,#eee7f2,#d8cae1);
}

.profile-details-card {
    background:
        radial-gradient(
            circle at 90% 90%,
            rgba(77,117,143,.15),
            transparent 42%
        ),
        linear-gradient(145deg,#edf1f2,#d5e0e3);
}

.profile-setting-number {
    padding-top: 5px;

    color: rgba(45,32,48,.42);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.profile-setting-content > span {
    display: block;
    margin-bottom: 18px;

    color: #765d88;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

.profile-setting-content h2 {
    margin: 0;

    font-size: 43px;
    line-height: .95;
    letter-spacing: -2.8px;
    font-weight: 500;
}

.profile-setting-content > p {
    max-width: 330px;
    margin: 20px 0 30px;

    color: rgba(49,40,50,.62);
    font-size: 12px;
    line-height: 1.6;
}


/* INPUT */

.profile-field {
    margin-top: 28px;
}

.profile-field label {
    display: block;
    margin-bottom: 8px;

    color: rgba(67,48,72,.55);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

#profileWelcomeName {
    width: 100%;
    box-sizing: border-box;

    padding: 14px 0;

    border: 0;
    border-bottom: 1px solid rgba(35,25,38,.20);
    outline: 0;

    background: transparent;
    color: #1b171c;

    font: inherit;
    font-size: 24px;
    letter-spacing: -1px;
}


/* PREVIEW */

.profile-preview {
    margin-top: 25px;
    padding: 19px;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;

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

.profile-preview small {
    display: block;
    margin-bottom: 9px;

    color: #80679a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.profile-preview p {
    margin: 0;

    font-size: 22px;
    letter-spacing: -1px;
}

.profile-preview strong {
    color: #765b8e;
    font-weight: 500;
}


/* SAVE */

#saveProfileName {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    padding: 0 19px;

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

    border: 0;
    border-radius: 100px;

    background: #191617;
    color: #fff;

    font-size: 9px;
    font-weight: 700;
    cursor: pointer;

    box-shadow:
        0 13px 30px rgba(28,18,29,.14),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* ACCOUNT DETAILS */

.profile-detail-row {
    min-height: 68px;

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

    border-top: 1px solid rgba(35,28,36,.10);
}

.profile-detail-row span {
    color: rgba(52,43,54,.50);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.profile-detail-row strong {
    color: #312b31;
    font-size: 11px;
    font-weight: 600;
}


/* =========================================
   PROFILE — MOBILE
========================================= */

@media (max-width:768px) {

    .profile-body {
        padding-bottom: 78px;
    }

    .profile-header {
        min-height: 66px;
        padding: 0 20px;
    }

    .profile-back {
        padding: 9px 14px;
    }

    .customer-profile {
        padding: 62px 20px 85px;
    }

    .profile-hero {
        padding-bottom: 54px;
    }

    .profile-label {
        margin-bottom: 20px;
        font-size: 8px;
        letter-spacing: 2.3px;
    }

    .profile-hero h1 {
        font-size: 68px;
        line-height: .82;
        letter-spacing: -5px;
    }

    .profile-hero p {
        max-width: 305px;
        margin-top: 28px;
        font-size: 13px;
    }


    /* CARDS */

    .profile-settings {
        display: flex;
        flex-direction: column;
        gap: 12px;

        padding-top: 25px;
    }

    .profile-setting-card {
        min-height: auto;
        padding: 23px 20px;

        grid-template-columns: 27px 1fr;
        gap: 10px;

        border-radius: 24px;
    }

    .profile-name-card {
        padding-bottom: 25px;
    }

    .profile-setting-content h2 {
        font-size: 35px;
        line-height: .96;
        letter-spacing: -2.2px;
    }

    .profile-setting-content > p {
        margin: 17px 0 25px;
        font-size: 11px;
    }

    #profileWelcomeName {
        font-size: 22px;
    }

    .profile-preview p {
        font-size: 20px;
    }

    .profile-details-card {
        min-height: 310px;
    }
}
/* ORDERS — MATCH ACCOUNT BLUE CARD */

.orders-label {
    color: #6487a0;
}

.orders-hero h1 span {
    color: #7fa6c1;
}

.orders-count small {
    color: #7393aa;
}

.orders-empty-mark,
.orders-empty > span,
.orders-empty h2 em {
    color: #719bb8;
}

.orders-empty {
    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(105, 164, 202, .18),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.78),
            transparent 30%
        ),
        rgba(255,255,255,.28);
}
/* SAVED — MATCH ACCOUNT GOLD CARD */

.saved-label {
    color: #9a7b45;
}

.saved-hero h1 span {
    color: #b18d50;
}

.saved-count small {
    color: #9d814f;
}

.saved-empty-mark,
.saved-empty > span,
.saved-empty h2 em {
    color: #a9874e;
}

.saved-empty {
    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(201, 163, 91, .20),
            transparent 39%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.80),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.32),
            rgba(238,220,180,.36)
        );
}
/* VAYEN — ACCOUNT PAGES MICRO TEXT POLISH */

.library-label,
.orders-label,
.saved-label,
.profile-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1.4;
}

.library-count small,
.orders-count small,
.saved-count small {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.library-empty > span,
.orders-empty > span,
.saved-empty > span {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.4;
}

@media (max-width:768px) {

    .library-label,
    .orders-label,
    .saved-label,
    .profile-label {
        font-size: 7.5px;
        letter-spacing: 1.8px;
    }
}
/* PC WELCOME — PREMIUM HERO SCALE */

@media (min-width: 769px) {

    .welcome-card #homeWelcome {
        margin-top: 12px;
        max-width: 540px;
        line-height: .92;
        letter-spacing: -2.5px;
    }

    .welcome-line {
        font-size: 34px;
        font-weight: 450;
        letter-spacing: -1.8px;
    }

    .welcome-person {
    margin-top: 10px;
    font-size: 52px;
    font-weight: 500;
    line-height: .96;
    letter-spacing: -2.2px;
}
}
/* VAYEN — SIGN IN ENTRY */

.signin-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 15px;

    border: 1px solid rgba(35, 29, 29, .12);
    border-radius: 999px;

    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(10px);

    color: #292323;
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15px;

    box-shadow:
        0 5px 18px rgba(40, 28, 28, .04),
        inset 0 1px 0 rgba(255,255,255,.65);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.signin-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ad7378;

    box-shadow:
        0 0 0 3px rgba(173,115,120,.10);
}

.signin-button:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.68);

    box-shadow:
        0 8px 22px rgba(40,28,28,.07);
}


/* tiny attention movement */

@keyframes vayenSignInNudge {

    0%, 88%, 100% {
        transform: translateX(0);
    }

    91% {
        transform: translateX(-2px);
    }

    94% {
        transform: translateX(2px);
    }

    97% {
        transform: translateX(0);
    }
}

.signin-button {
    animation:
        vayenSignInNudge 5s ease-in-out infinite;
}

.signin-button:hover {
    animation-play-state: paused;
}
/* =========================================
   VAYEN LOGIN
========================================= */

.login-body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(174,116,124,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(116,98,151,.11),
            transparent 30%
        ),
        #191717;

    color: #f4efeb;

    font-family: Arial, sans-serif;
}


/* HEADER */

.login-header {
    position: relative;
    z-index: 10;

    height: 86px;

    padding: 0 5vw;

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

    box-sizing: border-box;

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


.login-brand {
    color: #f6f0eb;

    text-decoration: none;

    font-size: 19px;
    font-weight: 800;

    letter-spacing: 4px;
}


.login-close {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: rgba(255,255,255,.58);

    text-decoration: none;

    font-size: 11px;
    font-weight: 650;

    transition:
        color .25s ease,
        transform .25s ease;
}


.login-close:hover {
    color: #fff;
    transform: translateX(-2px);
}


/* MAIN */

.vayen-login {
    position: relative;

    min-height:
        calc(100vh - 86px);

    padding: 70px 6vw 90px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* BACKGROUND GLOW */

.login-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.login-orb-one {
    width: 320px;
    height: 320px;

    left: -120px;
    top: 20%;

    background:
        rgba(185,111,120,.12);
}


.login-orb-two {
    width: 380px;
    height: 380px;

    right: -160px;
    bottom: 0;

    background:
        rgba(111,91,151,.11);
}


/* CARD */

.login-card {
    position: relative;
    z-index: 2;

    width: min(1120px, 100%);

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    overflow: hidden;

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

    border-radius: 32px;

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

    box-shadow:
        0 35px 100px rgba(0,0,0,.28);

    backdrop-filter: blur(18px);
}


/* LEFT STORY */

.login-story {
    position: relative;

    min-height: 580px;

    padding: 72px 70px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 10% 100%,
            rgba(191,119,128,.17),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
}


.login-eyebrow {
    display: block;

    margin-bottom: 30px;

    color: #bd858c;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 3px;
}


.login-story h1 {
    margin: 0;

    font-size: clamp(54px,5.2vw,76px);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -4px;
}


.login-story h1 em {
    color: #c58e94;

    font-style: normal;
}


.login-story > p {
    max-width: 380px;

    margin:
        30px 0 55px;

    color:
        rgba(255,255,255,.52);

    font-size: 13px;

    line-height: 1.7;
}


/* BENEFITS */

.login-benefits {
    display: grid;

    gap: 0;

    max-width: 430px;

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


.login-benefits > div {
    display: grid;

    grid-template-columns:
        42px 1fr;

    align-items: center;

    padding: 16px 0;

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


.login-benefits span {
    color: #bd858c;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.login-benefits p {
    margin: 0;

    color:
        rgba(255,255,255,.60);

    font-size: 11px;

    line-height: 1.45;
}


/* RIGHT PANEL */

.login-panel {
    padding: 72px 64px;

    box-sizing: border-box;

    background:
        rgba(244,238,232,.96);

    color: #292323;
}


.login-panel-top > span {
    display: block;

    margin-bottom: 18px;

    color: #987075;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.login-panel-top h2 {
    margin: 0;

    font-size: 35px;
    font-weight: 550;

    letter-spacing: -1.7px;
}


.login-panel-top p {
    margin:
        12px 0 34px;

    color: rgba(41,35,35,.53);

    font-size: 12px;

    line-height: 1.55;
}


/* GOOGLE */

.google-login {
    width: 100%;

    min-height: 54px;

    padding: 0 18px;

    display: grid;

    grid-template-columns:
        30px 1fr 30px;

    align-items: center;

    border:
        1px solid rgba(41,35,35,.12);

    border-radius: 13px;

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

    color: #292323;

    cursor: pointer;

    font-size: 11px;
    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.google-login:hover {
    transform: translateY(-1px);

    background: #fff;

    box-shadow:
        0 10px 25px rgba(50,35,35,.07);
}


.google-mark {
    width: 26px;
    height: 26px;

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

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);

    font-size: 12px;
    font-weight: 800;
}


.login-arrow {
    font-size: 16px;
}


/* DIVIDER */

.login-divider {
    margin: 27px 0;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 13px;
}


.login-divider span {
    height: 1px;

    background:
        rgba(41,35,35,.10);
}


.login-divider small {
    color:
        rgba(41,35,35,.35);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* EMAIL */

.email-login label {
    display: block;

    margin-bottom: 9px;

    color:
        rgba(41,35,35,.48);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.login-email-field {
    display: flex;

    min-height: 54px;

    overflow: hidden;

    border:
        1px solid rgba(41,35,35,.13);

    border-radius: 13px;

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


.login-email-field:focus-within {
    border-color:
        rgba(151,104,111,.45);

    box-shadow:
        0 0 0 3px
        rgba(151,104,111,.07);
}


.login-email-field input {
    flex: 1;

    min-width: 0;

    padding: 0 17px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #292323;

    font-size: 12px;
}


.login-email-field input::placeholder {
    color:
        rgba(41,35,35,.32);
}


.login-email-field button {
    width: 54px;

    margin: 5px;

    border: 0;

    border-radius: 9px;

    background: #292323;

    color: #fff;

    cursor: pointer;

    font-size: 17px;

    transition:
        transform .2s ease,
        background .2s ease;
}


.login-email-field button:hover {
    transform: translateX(2px);

    background: #44383a;
}


/* SECURITY */

.login-security {
    margin-top: 31px;

    padding: 15px 16px;

    display: grid;

    grid-template-columns:
        24px 1fr;

    gap: 9px;

    border-radius: 12px;

    background:
        rgba(151,104,111,.065);
}


.security-mark {
    width: 20px;
    height: 20px;

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

    border-radius: 50%;

    background:
        rgba(151,104,111,.12);

    color: #936970;

    font-size: 9px;
    font-weight: 900;
}


.login-security p {
    margin: 0;

    color:
        rgba(41,35,35,.55);

    font-size: 9px;

    line-height: 1.55;
}


/* LEGAL */

.login-legal {
    margin:
        22px 0 0;

    text-align: center;

    color:
        rgba(41,35,35,.37);

    font-size: 8px;

    line-height: 1.6;
}


.login-legal a {
    color:
        rgba(41,35,35,.58);

    text-decoration: none;

    border-bottom:
        1px solid rgba(41,35,35,.18);
}


/* DEMO CLICK */

.login-demo-click {
    transform: scale(.985);
}


/* MOBILE */

@media (max-width: 768px) {

    .login-header {
        height: 70px;
        padding: 0 20px;
    }

    .login-brand {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .login-close {
        font-size: 9px;
    }


    .vayen-login {
        min-height:
            calc(100vh - 70px);

        padding:
            28px 16px 55px;

        align-items: flex-start;
    }


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

        border-radius: 25px;
    }


    .login-story {
        min-height: auto;

        padding:
            42px 28px 38px;
    }


    .login-eyebrow {
        margin-bottom: 21px;

        font-size: 7px;

        letter-spacing: 2.4px;
    }


    .login-story h1 {
        font-size:
            clamp(44px,13vw,58px);

        letter-spacing: -3px;
    }


    .login-story > p {
        margin:
            22px 0 34px;

        max-width: 300px;

        font-size: 11px;
    }


    .login-benefits > div {
        padding: 13px 0;
    }


    .login-benefits p {
        font-size: 9.5px;
    }


    .login-panel {
        padding:
            40px 26px 35px;
    }


    .login-panel-top h2 {
        font-size: 29px;
    }


    .login-panel-top p {
        margin-bottom: 27px;
    }


    .google-login,
    .login-email-field {
        min-height: 52px;
    }

}
/* LOGIN PC — TIGHTER PREMIUM PROPORTIONS */

@media (min-width: 769px) {

    .login-card {
        width: min(1040px, 88vw);
        grid-template-columns: 1fr .9fr;
    }

    .login-story {
        min-height: 555px;
        padding: 68px 64px;
    }

    .login-panel {
        padding: 68px 58px;
    }
}
/* LOGIN — MICRO TEXT READABILITY */

.login-eyebrow,
.login-panel-top > span {
    font-size: 10px;
    letter-spacing: 2.6px;
}

.login-story > p {
    font-size: 14px;
    line-height: 1.65;
}

.login-benefits span {
    font-size: 9px;
}

.login-benefits p {
    font-size: 12px;
    line-height: 1.5;
}

.login-panel-top p {
    font-size: 13px;
    line-height: 1.55;
}

.login-divider small {
    font-size: 8px;
    letter-spacing: 1.8px;
}

.email-login label {
    font-size: 9px;
    letter-spacing: 1.7px;
}

.login-security p {
    font-size: 10.5px;
    line-height: 1.5;
}

.login-legal {
    margin-top: 24px;
    font-size: 10.5px;
    line-height: 1.6;
    font-weight: 500;
    color: rgba(41,35,35,.55);
}
.login-legal a {
    color: rgba(41,35,35,.72);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(41,35,35,.30);
}
/* LOGIN — FINAL RIGHT PANEL SPACING */

.login-security {
    margin-top: 36px;
    padding: 17px 18px;
}

.login-legal {
    margin-top: 28px;
}
/* VAYEN LOGIN — MOBILE APP FEEL */

@media (max-width: 768px) {

    .vayen-login {
        padding: 16px 0 0;
        min-height: calc(100vh - 70px);
    }

    .login-card {
        width: 100%;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;

        border-radius: 28px 28px 0 0;

        box-shadow: none;
        overflow: hidden;
    }

    .login-story {
        padding: 46px 30px 40px;
    }

    .login-story h1 {
        font-size: clamp(46px, 13vw, 56px);
        line-height: .94;
        letter-spacing: -3.2px;
    }

    .login-story > p {
        max-width: 310px;
        font-size: 12.5px;
        line-height: 1.65;
    }

    .login-panel {
        padding: 44px 26px 42px;
    }

    .login-panel-top h2 {
        font-size: 31px;
        letter-spacing: -1.5px;
    }

    .google-login,
    .login-email-field {
        min-height: 56px;
        border-radius: 14px;
    }
}
/* LOGIN MOBILE — COMPACT PREMIUM INTRO */

@media (max-width: 768px) {

    .login-story {
        padding: 38px 30px 30px;
    }

    .login-eyebrow {
        margin-bottom: 18px;
    }

    .login-story h1 {
        font-size: clamp(43px, 12vw, 52px);
        line-height: .92;
    }

    .login-story > p {
        margin: 20px 0 26px;
        max-width: 290px;
    }

    .login-benefits > div {
        grid-template-columns: 36px 1fr;
        padding: 11px 0;
    }

    .login-panel {
        padding-top: 36px;
    }
}
/* LOGIN MOBILE — TRUE CONTENT HEIGHT */

@media (max-width: 768px) {

    html:has(.login-body),
    body.login-body {
        min-height: auto !important;
        height: auto !important;
    }

    .vayen-login {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .login-card {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }

    .login-story,
    .login-panel {
        min-height: 0 !important;
        height: auto !important;
    }

    .login-panel {
        padding-bottom: 38px !important;
    }
}
/* LOGIN — EXPLORE CLOSING */

.login-explore {
    display: none;
}


/* MOBILE */

@media (max-width: 768px) {

    .login-panel {
        padding-bottom: 0 !important;
    }

    .login-explore {
        display: block;

        margin:
            38px -26px 0;

        padding:
            48px 30px 52px;

        background:
            radial-gradient(
                circle at 15% 100%,
                rgba(183,108,118,.16),
                transparent 42%
            ),
            #1c191a;

        color: #f5efeb;
    }

    .login-explore > span {
        display: block;

        margin-bottom: 18px;

        color: #c58b92;

        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2.5px;
    }

    .login-explore h3 {
        margin: 0;

        font-size: 36px;
        font-weight: 500;
        line-height: .98;
        letter-spacing: -2px;
    }

    .login-explore p {
        max-width: 280px;

        margin: 20px 0 28px;

        color: rgba(255,255,255,.56);

        font-size: 11.5px;
        line-height: 1.6;
    }

    .login-explore a {
        display: inline-flex;
        align-items: center;
        gap: 22px;

        padding: 13px 18px;

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

        border-radius: 999px;

        color: #f7f1ed;
        text-decoration: none;

        font-size: 10px;
        font-weight: 700;

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

    .login-explore a span {
        font-size: 15px;
    }
}
/* LOGIN MOBILE — TRUST FOOTER */

@media (max-width: 768px) {

    .login-explore::after {
        content: "PRIVATE BY DESIGN  ·  PURCHASES STAY YOURS  ·  YOUR LIBRARY, ALWAYS";

        display: block;

        margin:
            46px -30px -52px;

        padding:
            20px 18px;

        background: #eee8e2;

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

        color: rgba(43,36,36,.62);

        text-align: center;

        font-size: 7px;
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: 1.35px;
    }
}
/* LOGIN MOBILE — HARD PAGE END */

@media (max-width: 768px) {

    html,
    body.login-body {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body.login-body {
        overflow-y: auto;
    }

    .vayen-login {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .login-card,
    .login-panel,
    .login-explore {
        margin-bottom: 0 !important;
    }

    .login-card {
        height: auto !important;
        min-height: 0 !important;
    }

    .login-explore::after {
        margin-bottom: 0 !important;
    }
}
/* LOGIN MOBILE — END EXACTLY AT TRUST FOOTER */

@media (max-width: 768px) {

    .login-explore {
        padding-bottom: 0 !important;
    }

    .login-explore::after {
        margin:
            46px -30px 0 !important;

        padding:
            22px 18px !important;
    }

    .login-panel,
    .login-card,
    .vayen-login {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* =========================================
   VAYEN — PRODUCT DETAIL
========================================= */

.product-body {
    margin: 0;
    background: #f1ede8;
    color: #1e1a1a;
    font-family: Arial, sans-serif;
}


/* HEADER */

.product-header {
    height: 84px;
    padding: 0 5vw;

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

    border-bottom: 1px solid rgba(30,26,26,.09);
    box-sizing: border-box;
}

.product-brand {
    color: #211d1d;
    text-decoration: none;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 4px;
}

.product-header-actions {
    display: flex;
    align-items: center;
    gap: 26px;
}

.product-back,
.product-account {
    color: rgba(30,26,26,.60);
    text-decoration: none;
    font-size: 11px;
    font-weight: 650;
}

.product-account {
    padding: 9px 15px;
    border: 1px solid rgba(30,26,26,.12);
    border-radius: 999px;
}


/* PAGE */

.product-page {
    max-width: 1380px;
    margin: 0 auto;
}


/* HERO */

.product-hero {
    min-height: 680px;
    padding: 82px 6vw 105px;

    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(60px,8vw,125px);
    align-items: center;

    box-sizing: border-box;
}


/* PRODUCT VISUAL */

.product-visual {
    position: relative;

    width: 100%;
    max-width: 470px;
    aspect-ratio: .79;

    padding: 32px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-sizing: border-box;

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 80% 85%,
            rgba(184,105,115,.30),
            transparent 39%
        ),
        linear-gradient(
            145deg,
            #f0deda,
            #d9b8b7
        );

    box-shadow:
        0 30px 70px rgba(63,42,43,.13);
}

.product-visual-top,
.product-visual-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: rgba(57,37,39,.57);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.product-cover-content {
    padding: 15px 5px;
}

.product-cover-mark {
    display: block;

    margin-bottom: 24px;

    color: rgba(65,39,42,.42);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
}

.product-cover-content h2 {
    margin: 0;

    color: #3a2528;

    font-size: clamp(48px,4.7vw,70px);
    font-weight: 550;
    line-height: .90;
    letter-spacing: -4px;
}

.product-cover-content p {
    margin: 25px 0 0;

    color: rgba(58,37,40,.58);

    font-size: 12px;
}


/* PRODUCT INFO */

.product-intro {
    max-width: 650px;
}

.product-category {
    display: block;

    margin-bottom: 27px;

    color: #9d6d73;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.7px;
}

.product-intro h1 {
    margin: 0;

    font-size: clamp(54px,5.3vw,78px);
    font-weight: 500;
    line-height: .93;
    letter-spacing: -4.3px;
}

.product-intro h1 em {
    color: #a87076;
    font-style: normal;
}

.product-description {
    max-width: 500px;

    margin: 31px 0 38px;

    color: rgba(30,26,26,.57);

    font-size: 14px;
    line-height: 1.7;
}


/* QUICK INFO */

.product-quick-info {
    max-width: 560px;

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

    border-top: 1px solid rgba(30,26,26,.10);
    border-bottom: 1px solid rgba(30,26,26,.10);
}

.product-quick-info > div {
    padding: 19px 10px 19px 0;
}

.product-quick-info span {
    display: block;

    margin-bottom: 7px;

    color: rgba(30,26,26,.40);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.product-quick-info strong {
    font-size: 11px;
    font-weight: 650;
}


/* PURCHASE */

.product-purchase {
    max-width: 560px;

    margin-top: 34px;

    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 20px;
    align-items: center;
}

.product-price span {
    display: block;

    margin-bottom: 4px;

    color: rgba(30,26,26,.40);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.product-price strong {
    font-size: 31px;
    font-weight: 550;
    letter-spacing: -1.5px;
}

.product-get {
    min-height: 55px;
    padding: 0 20px;

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

    border: 0;
    border-radius: 999px;

    background: #211d1d;
    color: #fff;

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.product-get:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(32,26,26,.16);
}

.product-get span {
    font-size: 18px;
}

.product-purchase-note {
    margin: 13px 0 0;

    color: rgba(30,26,26,.40);

    font-size: 9px;
}


/* =========================================
   INCLUDED
========================================= */

.product-included {
    padding: 110px 6vw 125px;

    background: #1e1b1b;
    color: #f5efeb;
}

.product-section-intro {
    max-width: 700px;
}

.product-section-intro > span,
.product-result > span,
.product-final > div > span {
    display: block;

    margin-bottom: 22px;

    color: #bd858c;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.7px;
}

.product-section-intro h2,
.product-result h2 {
    margin: 0;

    font-size: clamp(50px,5vw,72px);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -4px;
}

.product-section-intro h2 em,
.product-result h2 em {
    color: #c18b91;
    font-style: normal;
}

.product-section-intro p {
    max-width: 390px;

    margin: 25px 0 55px;

    color: rgba(255,255,255,.52);

    font-size: 13px;
    line-height: 1.65;
}


/* STEPS */

.product-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);

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

.product-step {
    min-height: 280px;
    padding: 28px 27px;

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

    box-sizing: border-box;
}

.product-step:last-child {
    border-right: 0;
}

.product-step > span {
    display: block;

    margin-bottom: 45px;

    color: #bd858c;

    font-size: 9px;
    font-weight: 800;
}

.product-step small {
    display: block;

    margin-bottom: 12px;

    color: rgba(255,255,255,.38);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.product-step h3 {
    margin: 0;

    font-size: 24px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.2px;
}

.product-step p {
    max-width: 190px;

    margin: 22px 0 0;

    color: rgba(255,255,255,.45);

    font-size: 10px;
    line-height: 1.6;
}


/* =========================================
   RESULT
========================================= */

.product-result {
    padding: 125px 6vw;

    background:
        radial-gradient(
            circle at 85% 100%,
            rgba(178,109,117,.15),
            transparent 34%
        ),
        #eee9e4;
}

.product-result h2 {
    color: #211d1d;
}

.product-result > p {
    max-width: 450px;

    margin: 30px 0 0;

    color: rgba(30,26,26,.55);

    font-size: 13px;
    line-height: 1.7;
}


/* FINAL */

.product-final {
    padding: 70px 6vw;

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

    background: #d8c1c0;
}

.product-final h2 {
    margin: 0;

    color: #382629;

    font-size: clamp(42px,4vw,60px);
    font-weight: 500;
    letter-spacing: -3px;
}

.product-final-action {
    min-width: 350px;

    display: flex;
    align-items: center;
    gap: 30px;
}

.product-final-action > strong {
    font-size: 27px;
    font-weight: 550;
}

.product-final-action .product-get {
    flex: 1;
}


/* MOBILE GET BAR */

.product-mobile-get {
    display: none;
}


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

@media (max-width: 768px) {

    .product-body {
        padding-bottom: 82px;
    }

    .product-header {
        height: 68px;
        padding: 0 20px;
    }

    .product-brand {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .product-header-actions {
        gap: 14px;
    }

    .product-back {
        font-size: 9px;
    }

    .product-account {
        padding: 7px 11px;
        font-size: 9px;
    }


    /* HERO */

    .product-hero {
        min-height: 0;

        padding: 30px 20px 70px;

        grid-template-columns: 1fr;
        gap: 48px;
    }

    .product-visual {
        max-width: none;

        padding: 25px;

        border-radius: 23px;
    }

    .product-cover-content h2 {
        font-size: clamp(48px,15vw,65px);
        letter-spacing: -3.5px;
    }

    .product-category {
        margin-bottom: 19px;

        font-size: 7.5px;
        letter-spacing: 2px;
    }

    .product-intro h1 {
        font-size: clamp(44px,13vw,57px);
        line-height: .94;
        letter-spacing: -3px;
    }

    .product-description {
        margin: 24px 0 31px;

        font-size: 12px;
        line-height: 1.65;
    }


    /* INFO */

    .product-quick-info {
        grid-template-columns: repeat(3,1fr);
    }

    .product-quick-info > div {
        padding: 16px 5px 16px 0;
    }

    .product-quick-info strong {
        font-size: 9px;
    }


    /* MAIN GET HIDDEN ON MOBILE */

    .product-purchase {
        display: none;
    }

    .product-purchase-note {
        display: none;
    }


    /* INCLUDED */

    .product-included {
        padding: 75px 22px 80px;
    }

    .product-section-intro h2,
    .product-result h2 {
        font-size: clamp(43px,12vw,54px);
        letter-spacing: -3px;
    }

    .product-section-intro p {
        margin-bottom: 40px;

        font-size: 11.5px;
    }

    .product-steps {
        grid-template-columns: 1fr;
    }

    .product-step {
        min-height: 0;

        padding: 24px 0;

        display: grid;
        grid-template-columns: 42px 1fr;

        border-right: 0;
        border-bottom:
            1px solid rgba(255,255,255,.09);
    }

    .product-step > span {
        margin: 2px 0 0;

        grid-row: 1 / 4;
    }

    .product-step small {
        margin-bottom: 8px;
    }

    .product-step h3 {
        font-size: 25px;
    }

    .product-step p {
        margin-top: 14px;
    }


    /* RESULT */

    .product-result {
        padding: 80px 22px;
    }

    .product-result > p {
        font-size: 11.5px;
    }


    /* FINAL */

    .product-final {
        padding: 55px 22px 60px;

        display: block;
    }

    .product-final h2 {
        font-size: 43px;
        letter-spacing: -2.5px;
    }

    .product-final-action {
        display: none;
    }


    /* FIXED GET */

    .product-mobile-get {
        position: fixed;
        z-index: 100;

        left: 12px;
        right: 12px;
        bottom: 12px;

        min-height: 64px;

        padding: 8px 8px 8px 18px;

        display: grid;
        grid-template-columns: 1fr 145px;
        align-items: center;

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

        border-radius: 20px;

        background:
            rgba(31,27,27,.94);

        backdrop-filter: blur(16px);

        box-shadow:
            0 12px 35px rgba(0,0,0,.22);
    }

    .product-mobile-get small {
        display: block;

        margin-bottom: 2px;

        color: rgba(255,255,255,.42);

        font-size: 6px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

    .product-mobile-get strong {
        color: #fff;

        font-size: 19px;
        font-weight: 550;
    }

    .product-mobile-get .product-get {
        min-height: 48px;

        background: #eee7e2;
        color: #241f1f;
    }
}
/* PRODUCT — HERO POLISH */

.product-visual-top,
.product-visual-bottom {
    width: 100%;
    gap: 20px;
}

.product-visual-top span,
.product-visual-top small,
.product-visual-bottom span {
    display: block;
    white-space: nowrap;
}

.product-visual-top small {
    margin-left: auto;
}

.product-visual-bottom span:last-child {
    margin-left: auto;
}


/* Slightly clearer product information */

.product-description {
    color: rgba(30,26,26,.64);
}

.product-quick-info strong {
    color: #211d1d;
}


/* Give GET a little more presence without overdoing it */

.product-get {
    font-size: 12px;
    letter-spacing: .1px;
}

.product-get span {
    opacity: .85;
}


/* Dark section should feel intentional on desktop */

@media (min-width: 769px) {

    .product-included {
        width: 100vw;

        margin-left:
            calc(50% - 50vw);

        padding-left:
            max(6vw, calc((100vw - 1380px) / 2 + 6vw));

        padding-right:
            max(6vw, calc((100vw - 1380px) / 2 + 6vw));
    }
}
/* =========================================
   PRODUCT — WHAT'S INSIDE
========================================= */

.product-contents {
    padding: 105px 6vw 110px;
    background: #f1ede8;
}

.product-contents-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;

    margin-bottom: 58px;
}

.product-contents-head > div > span {
    display: block;
    margin-bottom: 20px;

    color: #9d6d73;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.product-contents-head h2 {
    margin: 0;

    font-size: clamp(48px, 4.8vw, 68px);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -3.7px;
}

.product-contents-head h2 em {
    color: #a87076;
    font-style: normal;
}

.product-contents-head > p {
    max-width: 280px;
    margin: 0 0 5px;

    color: rgba(30,26,26,.55);

    font-size: 12px;
    line-height: 1.65;
}


/* LIST */

.product-content-list {
    border-top: 1px solid rgba(30,26,26,.12);
}

.product-content-item {
    min-height: 105px;

    display: grid;
    grid-template-columns: 70px 1fr 1.2fr;
    align-items: center;
    gap: 30px;

    border-bottom: 1px solid rgba(30,26,26,.10);
}

.product-content-item > span {
    color: #a87076;

    font-size: 9px;
    font-weight: 800;
}

.product-content-item small {
    display: block;
    margin-bottom: 7px;

    color: rgba(30,26,26,.40);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.product-content-item h3 {
    margin: 0;

    font-size: 20px;
    font-weight: 550;
    letter-spacing: -.7px;
}

.product-content-item > p {
    max-width: 370px;
    margin: 0;

    color: rgba(30,26,26,.52);

    font-size: 11px;
    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 768px) {

    .product-contents {
        padding: 72px 22px 76px;
    }

    .product-contents-head {
        display: block;
        margin-bottom: 40px;
    }

    .product-contents-head h2 {
        font-size: clamp(42px, 12vw, 52px);
        letter-spacing: -3px;
    }

    .product-contents-head > p {
        max-width: 290px;
        margin-top: 22px;

        font-size: 11.5px;
    }

    .product-content-item {
        min-height: 0;

        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 22px 0;
    }

    .product-content-item > span {
        align-self: start;
        padding-top: 3px;
    }

    .product-content-item > p {
        grid-column: 2;

        margin-top: -3px;

        font-size: 10.5px;
    }

    .product-content-item h3 {
        font-size: 19px;
    }
}
/* PRODUCT CONTENTS — READABILITY */

.product-contents-head > div > span {
    font-size: 10px;
    letter-spacing: 2.4px;
}

.product-contents-head > p {
    font-size: 14px;
    line-height: 1.6;
}

.product-content-item > span {
    font-size: 11px;
}

.product-content-item small {
    font-size: 9px;
    letter-spacing: 1.6px;
}

.product-content-item h3 {
    font-size: 21px;
}

.product-content-item > p {
    font-size: 13px;
    line-height: 1.55;
}
/* PRODUCT — CLEAR DETAIL INTRO */

.product-detail-title {
    margin: 0 0 25px !important;

    font-size: clamp(44px, 4.4vw, 64px) !important;
    font-weight: 520 !important;
    line-height: .95 !important;
    letter-spacing: -3px !important;
}

.product-detail-points {
    display: grid;
    gap: 9px;
}

.product-detail-points p {
    position: relative;

    margin: 0;
    padding-left: 17px;

    color: rgba(30,26,26,.68);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.product-detail-points p::before {
    content: "—";

    position: absolute;
    left: 0;

    color: #a87076;
}


/* EXTRA INCLUDED VALUE */

.product-extra-value {
    margin-top: 20px;
    padding: 12px 15px;

    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    border-radius: 10px;

    background: rgba(168,112,118,.09);

    color: #68494d;

    font-size: 11px;
    font-weight: 700;
}

.product-extra-value span {
    color: #a87076;
    font-size: 16px;
}


/* CONFIDENCE LINE */

.product-confidence {
    max-width: 440px;

    margin: 17px 0 25px;

    color: #332b2b;

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
}


/* MOBILE */

@media (max-width: 768px) {

    .product-detail-title {
        margin-bottom: 22px !important;

        font-size: 43px !important;
        letter-spacing: -2.5px !important;
    }

    .product-detail-points {
        gap: 10px;
    }

    .product-detail-points p {
        font-size: 12px;
        line-height: 1.45;
    }

    .product-extra-value {
        margin-top: 19px;
        font-size: 10.5px;
    }

    .product-confidence {
        margin-top: 17px;
        font-size: 11.5px;
    }
}
.product-purchase-note {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(30,26,26,.56);
}
/* =========================================
   PRODUCT — REAL PREVIEW
========================================= */

.product-preview {
    padding: 105px 6vw 115px;
    background: #f1ede8;
}

.product-preview-head {
    max-width: 650px;
    margin-bottom: 52px;
}

.product-preview-head > span {
    display: block;
    margin-bottom: 18px;

    color: #9d6d73;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

.product-preview-head h2 {
    margin: 0;

    font-size: clamp(48px, 4.8vw, 68px);
    font-weight: 500;
    line-height: .93;
    letter-spacing: -3.7px;
}

.product-preview-head h2 em {
    color: #a87076;
    font-style: normal;
}

.product-preview-head p {
    max-width: 350px;
    margin: 24px 0 0;

    color: rgba(30,26,26,.60);
    font-size: 13px;
    line-height: 1.6;
}


/* PREVIEW CARDS */

.product-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.product-preview-card {
    position: relative;
    min-height: 300px;
    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    box-sizing: border-box;
    overflow: hidden;

    border: 1px solid rgba(35,29,29,.08);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(180,111,119,.13),
            transparent 34%
        ),
        rgba(255,255,255,.40);
}

.product-preview-card > span {
    position: absolute;
    top: 28px;
    left: 30px;

    color: #956a70;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.product-preview-card h3 {
    margin: 0;

    color: #292323;
    font-size: 28px;
    font-weight: 520;
    line-height: 1.02;
    letter-spacing: -1.5px;
}

.product-preview-card p {
    max-width: 270px;
    margin: 18px 0 0;

    color: rgba(41,35,35,.58);
    font-size: 12px;
    line-height: 1.55;
}


/* SMALL DIFFERENCE BETWEEN CARDS */

.product-preview-card:nth-child(2) {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(105,145,173,.14),
            transparent 35%
        ),
        rgba(255,255,255,.40);
}

.product-preview-card:nth-child(3) {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(157,125,78,.15),
            transparent 35%
        ),
        rgba(255,255,255,.40);
}


/* MOBILE */

@media (max-width: 768px) {

    .product-preview {
        padding: 74px 22px 80px;
    }

    .product-preview-head {
        margin-bottom: 36px;
    }

    .product-preview-head > span {
        font-size: 8px;
        letter-spacing: 1.9px;
    }

    .product-preview-head h2 {
        font-size: clamp(43px, 12vw, 53px);
        letter-spacing: -3px;
    }

    .product-preview-head p {
        max-width: 290px;
        font-size: 11.5px;
    }

    .product-preview-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-preview-card {
        min-height: 235px;
        padding: 25px;
        border-radius: 18px;
    }

    .product-preview-card > span {
        top: 24px;
        left: 25px;
        font-size: 8px;
    }

    .product-preview-card h3 {
        font-size: 27px;
    }

    .product-preview-card p {
        font-size: 11px;
    }
}
/* =========================================
   PRODUCT MOBILE — FINAL FIT PASS 01
========================================= */

@media (max-width: 768px) {

    /* HERO */

    .product-hero {
        padding: 22px 20px 54px;
        gap: 36px;
    }

    .product-visual {
        border-radius: 22px;
    }

    .product-detail-title {
        font-size: 39px !important;
        line-height: .98 !important;
        letter-spacing: -2.2px !important;
    }


    /* WHAT'S INSIDE */

    .product-contents {
        padding: 58px 22px 62px;
    }

    .product-contents-head {
        margin-bottom: 31px;
    }

    .product-contents-head h2 {
        font-size: 45px;
        line-height: .94;
        letter-spacing: -2.8px;
    }

    .product-content-item {
        padding: 18px 0;
    }


    /* DARK JOURNEY */

    .product-included {
        padding: 60px 22px 64px;
    }

    .product-section-intro h2 {
        font-size: 45px;
        line-height: .95;
        letter-spacing: -2.8px;
    }

    .product-section-intro p {
        margin: 20px 0 30px;
    }

    .product-step {
        padding: 20px 0;
    }

    .product-step h3 {
        font-size: 23px;
    }


    /* PREVIEW */

    .product-preview {
        padding: 60px 22px 64px;
    }

    .product-preview-head {
        margin-bottom: 30px;
    }

    .product-preview-head h2 {
        font-size: 45px;
        line-height: .94;
    }

    .product-preview-card {
        min-height: 205px;
        padding: 22px;
    }

    .product-preview-card > span {
        top: 21px;
        left: 22px;
    }

    .product-preview-card h3 {
        font-size: 25px;
    }


    /* RESULT */

    .product-result {
        padding: 64px 22px;
    }

    .product-result h2 {
        font-size: 44px;
        line-height: .95;
        letter-spacing: -2.8px;
    }

    .product-result > p {
        margin-top: 23px;
    }


    /* FINAL */

    .product-final {
        padding: 48px 22px 54px;
    }

    .product-final h2 {
        font-size: 40px;
        letter-spacing: -2px;
    }


    /* SPACE FOR FIXED GET BAR */

    .product-body {
        padding-bottom: 88px;
    }
}
/* =========================================
   PRODUCT MOBILE — GET BAR FINAL FIT
========================================= */

@media (max-width: 768px) {

    .product-mobile-get {
        left: 14px;
        right: 14px;
        bottom: 10px;

        min-height: 58px;
        padding: 6px 6px 6px 16px;

        grid-template-columns: 1fr 138px;

        border-radius: 18px;

        background: rgba(30, 27, 27, .96);

        box-shadow:
            0 8px 24px rgba(0,0,0,.18);

        backdrop-filter: blur(14px);
    }

    .product-mobile-get small {
        margin-bottom: 1px;

        font-size: 7px;
        letter-spacing: 1.3px;

        color: rgba(255,255,255,.52);
    }

    .product-mobile-get strong {
        font-size: 18px;
        line-height: 1;
    }

    .product-mobile-get .product-get {
        min-height: 46px;
        padding: 0 17px;

        border-radius: 999px;

        font-size: 11px;
        font-weight: 700;

        background: #f1ebe6;
        color: #241f1f;

        box-shadow: none;
    }

    .product-mobile-get .product-get span {
        font-size: 16px;
    }

    /* fixed bar content ko cover na kare */

    .product-final {
        padding-bottom: 82px;
    }
}
/* PRODUCT — SMOOTH GET EXIT */

.product-body {
    transition: opacity .16s ease;
}

.product-body.product-leaving {
    opacity: .78;
}
/* PREMIUM VLOGGING HERO CARD */

.hero-showcase .card-one.hero-premium {
    height: 360px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 24px;
    background: #e8c5c3;
    color: #351e24;
    text-decoration: none;
    box-shadow: 0 24px 60px rgba(65, 30, 38, .15);
}

.hero-showcase .card-one.hero-premium::before,
.hero-showcase .card-one.hero-premium::after {
    display: none;
}

.hero-showcase .card-one .hero-card-photo {
    height: 62%;
    width: 100%;
    flex-shrink: 0;
    background-image:
        linear-gradient(to bottom, transparent 65%, rgba(39, 17, 23, .12)),
        url("https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=800&q=85");
    background-size: cover;
    background-position: center;
}

.hero-showcase .card-one .hero-card-info {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hero-showcase .card-one .hero-card-info small {
    font-size: 8px;
    letter-spacing: 1.6px;
    font-weight: 800;
    color: #815159;
}

.hero-showcase .card-one .hero-card-info h3 {
    margin-top: 10px;
    font-size: 23px;
    line-height: 1.06;
    letter-spacing: -1px;
    color: #351e24;
    text-decoration: none;
}

.hero-explore {
    margin-top: auto;
    padding-top: 12px;
    font-size: 10px;
    font-weight: 700;
    color: inherit;
}

@media (max-width: 768px) {
    .hero-showcase .card-one.hero-premium {
        height: 390px;
    }
}
/* VLOGGING IMAGE + TEXT FIX */

.hero-showcase .card-one .hero-card-photo {
    height: 55%;
    background-image: url("images/vlogging.png");
    background-size: cover;
    background-position: center;
}

.hero-showcase .card-one .hero-card-info {
    padding: 14px 18px;
    min-height: 0;
}

.hero-showcase .card-one .hero-card-info h3 {
    font-size: 21px;
    margin-top: 8px;
    line-height: 1.1;
}

.hero-showcase .card-one .hero-explore {
    margin-top: auto;
    padding-top: 8px;
}
/* VLOGGING TEXT SPACING */

.hero-showcase .card-one .hero-card-info h3 {
    margin-top: 16px;
    line-height: 1.2;
}
/* VLOGGING IMAGE CLARITY + TEXT POSITION */

.hero-showcase .card-one .hero-card-photo {
    background-image: url("images/vlogging.png");
    background-size: 100% 100%;
    background-position: center;
    filter: contrast(1.08) saturate(1.08);
}

.hero-showcase .card-one .hero-card-info {
    position: relative;
    justify-content: center;
    padding: 14px 18px;
}

.hero-showcase .card-one .hero-card-info h3 {
    margin-top: 18px;
    line-height: 1.15;
}

.hero-showcase .card-one .hero-explore {
    position: absolute;
    bottom: 16px;
    left: 18px;
    margin: 0;
}
/* VLOGGING PHOTO HEIGHT FIX */

.hero-showcase .card-one .hero-card-photo {
    height: 63%;
    flex-shrink: 0;
}

.hero-showcase .card-one .hero-card-info {
    padding: 10px 18px;
}

.hero-showcase .card-one .hero-card-info h3 {
    margin-top: 10px;
    font-size: 21px;
}
/* VLOGGING — CLEAN TEXT SPACING */

.hero-showcase .card-one .hero-card-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 18px;
}

.hero-showcase .card-one .hero-card-info small {
    position: static;
    transform: translate(-9px, -10px);
    display: block;
    margin: 0;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.hero-showcase .card-one .hero-card-info h3 {
transform: translate(-7px, -3px);
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 21px;
    line-height: 1.15;
}

.hero-showcase .card-one .hero-explore {
    position: static;
    margin-top: auto;
    padding-top: 8px;
}
/* PREMIUM YOUTUBE CARD */

.hero-showcase .card-three.youtube-premium {
    height: 360px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 24px;
    background: #cbdde9;
    color: #173c55;
    text-decoration: none;
    box-shadow: 0 24px 60px rgba(30, 70, 100, .15);
}

.hero-showcase .card-three.youtube-premium::before,
.hero-showcase .card-three.youtube-premium::after {
    display: none;
}

.hero-showcase .card-three .youtube-card-photo {
    height: 63%;
    width: 100%;
    flex-shrink: 0;
    background: url("images/youtube.png");
    background-size: cover;
    background-position: center;
}

.hero-showcase .card-three .youtube-card-info {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 18px 16px;
}

.hero-showcase .card-three .youtube-card-info small {
    position: static;
    display: block;
    margin: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #456e87;
}

.hero-showcase .card-three .youtube-card-info h3 {
    margin-top: 17px;
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.7px;
    color: #173c55;
}

.hero-showcase .card-three .youtube-explore {
    margin-top: auto;
    font-size: 10px;
    font-weight: 700;
    color: #173c55;
}

@media (max-width: 768px) {
    .hero-showcase .card-three.youtube-premium {
        height: 390px;
    }
}
/* VLOGGING — CLEAN PHOTO COVER ONLY */

.product-visual.vlogging-photo-cover
.product-cover-content {
    display: none;
}

.product-visual.vlogging-photo-cover
.product-visual-top span {
    font-size: 0;
}

.product-visual.vlogging-photo-cover
.product-visual-top span::after {
    content: "VAYEN / VLOGGING";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

.product-visual.vlogging-photo-cover
.product-visual-top small {
    display: none;
}

.product-visual.vlogging-photo-cover
.product-visual-bottom span:first-child {
    font-size: 0;
}

.product-visual.vlogging-photo-cover
.product-visual-bottom span:first-child::after {
    content: "CREATE • CAPTURE • TELL YOUR STORY";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.product-visual.vlogging-photo-cover
.product-visual-bottom span:last-child {
    display: none;
}
/* VLOGGING COVER — FINAL POSITION */

.product-visual.vlogging-photo-cover {
    background-size: auto 110% !important;
    background-position: 60% center !important;
}

/* Top text — move right */
.product-visual.vlogging-photo-cover
.product-visual-top span {
    transform: translateX(115px);
}

/* Bottom text — move right */
.product-visual.vlogging-photo-cover
.product-visual-bottom span:first-child {
    transform: translateX(55px);
}
/* YOUTUBE — PREMIUM CLEAN COVER */

.product-visual.youtube-photo-cover .product-cover-content {
    display: none !important;
}

/* TOP TEXT */
.product-visual.youtube-photo-cover .product-visual-top span {
    font-size: 0 !important;
}

.product-visual.youtube-photo-cover .product-visual-top span::after {
    content: "VAYEN / YOUTUBE";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

.product-visual.youtube-photo-cover .product-visual-top small {
    display: none;
}

/* BOTTOM TEXT */
.product-visual.youtube-photo-cover .product-visual-bottom span:first-child {
    font-size: 0 !important;
}

.product-visual.youtube-photo-cover .product-visual-bottom span:first-child::after {
    content: "PLAN • CREATE • GROW YOUR CHANNEL";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.product-visual.youtube-photo-cover .product-visual-bottom span:last-child {
    display: none;
}

/* TEXT POSITION */
.product-visual.youtube-photo-cover .product-visual-top span {
    transform: translateX(105px);
}

.product-visual.youtube-photo-cover .product-visual-bottom span:first-child {
    transform: translateX(50px);
}
.product-get {
    text-decoration: none !important;
}
@media (max-width: 768px) {
    .product-final {
        min-height: auto !important;
        padding-top: 55px !important;
        padding-bottom: 45px !important;
    }
}
/* VLOGGING — PREMIUM MOBILE HERO */

@media (max-width: 768px) {

    .product-visual.vlogging-photo-cover {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        flex: none !important;
        width: 100%;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 22px;
        overflow: hidden;
    }

    .product-visual.vlogging-photo-cover
    .product-visual-top span {
        transform: translateX(35px);
    }

    .product-visual.vlogging-photo-cover
    .product-visual-bottom span:first-child {
        transform: translateX(0);
    }

    .product-intro {
        padding-top: 12px;
    }

    .product-detail-title {
        font-size: clamp(34px, 9vw, 42px);
        line-height: 1.08;
        letter-spacing: -1.8px;
    }

    .product-detail-points {
        margin-top: 26px;
    }

    .product-detail-points p {
        line-height: 1.65;
        margin-bottom: 12px;
    }
}
/* VLOGGING — MOBILE TOP TEXT FIX */

@media (max-width: 768px) {

    .product-visual.vlogging-photo-cover
    .product-visual-top {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .product-visual.vlogging-photo-cover
    .product-visual-top span {
        transform: none !important;
        text-align: center;
    }

    .product-visual.vlogging-photo-cover
    .product-visual-top span::after {
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 2px;
        color: #ffffff;
        text-shadow:
            0 2px 5px rgba(0,0,0,.9),
            0 0 12px rgba(0,0,0,.7);
    }
}
@media (max-width: 768px) {
    .product-visual.vlogging-photo-cover {
        background-size: auto 110% !important;
        background-position: 60% center !important;
    }
}
/* PREMIUM MOBILE — WHAT'S INSIDE */

@media (max-width: 768px) {

    .product-contents-head {
        margin-bottom: 28px;
    }

    .product-contents-head h2 {
        font-size: clamp(34px, 9vw, 42px);
        line-height: 1.08;
        letter-spacing: -1.8px;
    }

    .product-content-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .product-content-item {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 10px;

        padding: 22px 18px !important;
        border: 1px solid rgba(65, 40, 40, .09);
        border-radius: 16px;
        background: rgba(255, 255, 255, .38);
    }

    .product-content-item > span {
        grid-column: 1;
        font-size: 11px;
        font-weight: 800;
        padding-top: 4px;
    }

    .product-content-item > div {
        grid-column: 2;
        min-width: 0;
    }

    .product-content-item small {
        display: block;
        margin-bottom: 7px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .product-content-item h3 {
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -.5px;
    }

    .product-content-item > p {
        grid-column: 2;
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
    }
}
/* PREMIUM MOBILE — INSIDE THE PRODUCT */

@media (max-width: 768px) {

    .product-included {
        padding-top: 65px !important;
        padding-bottom: 65px !important;
    }

    .product-section-intro h2 {
        font-size: clamp(36px, 9vw, 44px);
        line-height: 1.08;
        letter-spacing: -1.8px;
    }

    .product-section-intro p {
        margin-top: 18px;
        font-size: 13px;
        line-height: 1.7;
    }

    .product-steps {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
        border: none;
    }

    .product-step {
        position: relative;
        padding: 24px 22px !important;
        min-height: auto !important;

        background: #292525;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 17px;
    }

    .product-step > span {
        display: block;
        margin-bottom: 20px;
        font-size: 11px;
        font-weight: 800;
        color: #d58e9b;
    }

    .product-step small {
        display: block;
        margin-bottom: 9px;
        font-size: 9px;
        letter-spacing: 1.7px;
        color: #b8a4a4;
    }

    .product-step h3 {
        margin: 0 0 12px;
        font-size: 23px;
        line-height: 1.18;
        letter-spacing: -.8px;
        color: #fff;
    }

    .product-step p {
        margin: 0;
        font-size: 12px;
        line-height: 1.7;
        color: #c1b7b7;
    }
}
/* PREMIUM MOBILE — PREVIEW CARDS */

@media (max-width: 768px) {

    .product-preview-card {
        min-height: 190px !important;
        height: auto !important;
        padding: 24px 22px !important;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        border-radius: 18px;
    }

    .product-preview-card h3 {
        margin-top: 35px !important;
        font-size: 23px !important;
        line-height: 1.2;
        letter-spacing: -0.7px;
    }

    .product-preview-card p {
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.6;
    }
}
/* PREMIUM MOBILE — FINAL SECTIONS */

@media (max-width: 768px) {

    /* WHAT YOU TAKE WITH YOU */
    .product-result {
        padding: 54px 24px 48px !important;
    }

    .product-result h2 {
        font-size: clamp(35px, 9vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -1.8px !important;
        max-width: 360px;
    }

    .product-result > p {
        margin-top: 20px !important;
        font-size: 13px;
        line-height: 1.75;
        max-width: 330px;
    }

    /* MAKE IT YOURS */
    .product-final {
        min-height: auto !important;
        padding: 46px 24px 54px !important;
    }

    .product-final h2 {
        font-size: 42px !important;
        line-height: 1.1;
        letter-spacing: -2px;
    }
}
/* YOUTUBE — MOBILE PHOTO SIZE */

@media (max-width: 768px) {
    .product-visual.youtube-photo-cover {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        flex: none !important;
        width: 100%;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 22px;
        overflow: hidden;
    }
}
/* YOUTUBE — PREMIUM MOBILE TEXT */

@media (max-width: 768px) {

    /* TOP TEXT CENTER */
    .product-visual.youtube-photo-cover .product-visual-top {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .product-visual.youtube-photo-cover .product-visual-top span {
        transform: none !important;
        text-align: center;
        font-size: 0 !important;
    }

    .product-visual.youtube-photo-cover .product-visual-top span::after {
        content: "VAYEN / YOUTUBE";
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 2px;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,.9);
    }

    /* BOTTOM TEXT CENTER */
    .product-visual.youtube-photo-cover .product-visual-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .product-visual.youtube-photo-cover .product-visual-bottom span:first-child {
        transform: none !important;
        text-align: center;
        font-size: 0 !important;
    }

    .product-visual.youtube-photo-cover .product-visual-bottom span:first-child::after {
        content: "PLAN • CREATE • GROW YOUR CHANNEL";
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1px;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,.9);
    }
}
/* YOUTUBE — PREMIUM MOBILE BENEFITS */

@media (max-width: 768px) {

    .product-detail-points:has(.youtube-benefit) {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: 22px;
    }

    .product-detail-points .youtube-benefit {
        position: relative;
        margin: 0 !important;
        padding: 13px 15px 13px 34px !important;

        background: rgba(255,255,255,.45);
        border: 1px solid rgba(80,60,60,.08);
        border-radius: 12px;

        font-size: 13px;
        line-height: 1.55;
        color: #302b2b;
    }

    .product-detail-points .youtube-benefit::before {
        content: "✓";
        position: absolute;
        left: 13px;
        top: 13px;

        font-size: 13px;
        font-weight: 800;
        color: #a96e78;
    }
}
/* VLOGGING + YOUTUBE — PREMIUM PC BENEFITS */

@media (min-width: 769px) {

    .product-detail-points:has(.youtube-benefit) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 28px;
    }

    .product-detail-points .youtube-benefit {
        position: relative;
        margin: 0 !important;
        padding: 18px 16px 18px 38px !important;

        background: rgba(255, 255, 255, .48);
        border: 1px solid rgba(80, 60, 60, .10);
        border-radius: 14px;

        font-size: 13px;
        line-height: 1.6;
        color: #302b2b;
    }

    .product-detail-points .youtube-benefit::before {
        content: "✓";
        position: absolute;
        left: 15px;
        top: 18px;

        font-size: 14px;
        font-weight: 800;
        color: #a96e78;
    }
}
/* VLOGGING + YOUTUBE — PREMIUM PC SECTIONS */

@media (min-width: 769px) {

    body:has(.youtube-benefit) .product-content-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body:has(.youtube-benefit) .product-content-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 28px !important;
        background: rgba(255,255,255,.48);
        border: 1px solid rgba(60,40,40,.1);
        border-radius: 18px;
    }

    body:has(.youtube-benefit) .product-content-item > span {
        font-size: 12px;
        font-weight: 800;
        opacity: .55;
    }

    body:has(.youtube-benefit) .product-content-item h3 {
        font-size: 24px;
        line-height: 1.2;
    }

    body:has(.youtube-benefit) .product-content-item > p {
        margin: 0;
        font-size: 14px;
        line-height: 1.7;
    }

    /* DARK STEPS */

    body:has(.youtube-benefit) .product-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        border: none;
    }

    body:has(.youtube-benefit) .product-step {
        min-height: 230px;
        padding: 30px !important;
        background: #292525;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 18px;
    }

    body:has(.youtube-benefit) .product-step h3 {
        font-size: 27px;
        line-height: 1.15;
    }

    /* PREVIEW CARDS */

    body:has(.youtube-benefit) .product-preview-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    body:has(.youtube-benefit) .product-preview-card {
        min-height: 230px;
        height: auto;
        padding: 28px !important;
        border-radius: 20px;
    }

    body:has(.youtube-benefit) .product-preview-card h3 {
        margin-top: 35px;
        font-size: 25px;
        line-height: 1.2;
    }

    /* FINAL SECTIONS */

    body:has(.youtube-benefit) .product-result {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    body:has(.youtube-benefit) .product-final {
        min-height: auto;
        padding-top: 65px;
        padding-bottom: 65px;
    }
}
/* VLOGGING + YOUTUBE — PREMIUM RESULT & FINAL CTA */

@media (min-width: 769px) {

    /* TOP RESULT BOX */

    body:has(.youtube-benefit) .product-result {
        position: relative;
        margin: 35px 0 16px;
        padding: 85px 75px !important;

        background: linear-gradient(
            135deg,
            #f7f2ef 0%,
            #eee5e2 100%
        );

        border: 1px solid rgba(75, 45, 45, .08);
        border-radius: 24px;

        box-shadow: 0 18px 50px rgba(60, 35, 35, .045);
    }

    /* BOTTOM PURCHASE BOX */

    body:has(.youtube-benefit) .product-final {
        position: relative;
        margin: 0 0 35px;
        padding: 65px 75px !important;

        background: linear-gradient(
            125deg,
            #e8d2d0 0%,
            #d7b9bb 100%
        );

        border: 1px solid rgba(75, 45, 45, .08);
        border-radius: 24px;

        box-shadow: 0 18px 50px rgba(60, 35, 35, .06);
    }

    /* PREMIUM GET BUTTON */

    body:has(.youtube-benefit) .product-final .product-get {
        border-radius: 50px;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    body:has(.youtube-benefit) .product-final .product-get:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    }
}
/* VAYEN FLAGSHIP CARD */

.card-main .flagship-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #dba6a4;
    font-size: 9px;
    letter-spacing: 1.1px;
    white-space: nowrap;
}

.card-main .flagship-label > span {
    font-size: inherit;
    letter-spacing: inherit;
}

.card-main .main-card-content small {
    color: #dba6a4;
}

.card-main .main-card-bottom {
    color: #dba6a4;
}
/* FLAGSHIP CARD — PREMIUM DETAIL */

.card-main .main-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-main .flagship-description {
    margin-top: 18px;
    max-width: 340px;
    color: #bba5a5;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .2px;
}
/* FLAGSHIP DESCRIPTION — PREMIUM FINISH */

.card-main .flagship-description {
    margin-top: 22px;
    padding: 3px 0 3px 16px;

    border-left: 2px solid #c99191;

    color: #d2baba;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .35px;

    max-width: 350px;
}
/* VAYEN COLLECTION PAGE */

.collection-page {
    min-height: 100vh;
    background: #f5f1ee;
    color: #211c1c;
}

.collection-hero {
    padding: 110px 8% 70px;
    border-bottom: 1px solid rgba(40, 30, 30, .12);
}

.collection-eyebrow,
.collection-section-heading > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #a16c70;
}

.collection-hero h1 {
    margin: 25px 0;
    font-size: clamp(55px, 7vw, 105px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -5px;
}

.collection-hero > p {
    max-width: 490px;
    font-size: 15px;
    line-height: 1.8;
    color: #746a68;
}

.collection-count {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 75px;
    padding-top: 20px;
    border-top: 1px solid rgba(40, 30, 30, .12);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.collection-products {
    padding: 90px 8% 120px;
}

.collection-section-heading h2 {
    margin-top: 15px;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 500;
    letter-spacing: -2px;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 45px;
}

@media (max-width: 768px) {
    .collection-hero {
        padding: 85px 24px 45px;
    }

    .collection-hero h1 {
        font-size: clamp(48px, 12vw, 70px);
        letter-spacing: -3px;
    }

    .collection-count {
        margin-top: 45px;
        font-size: 9px;
    }

    .collection-products {
        padding: 65px 24px 90px;
    }

    .collection-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
/* VAYEN — PREMIUM 12 WORLDS (PC ONLY) */

@media (min-width: 769px) {

    .worlds-list {
        gap: 12px;
    }

    .world-item {
        position: relative;
        overflow: hidden;
        min-width: 0;
        padding: 25px 24px !important;

        background: rgba(255, 255, 255, .38);
        border: 1px solid rgba(90, 65, 65, .09);
        border-radius: 16px;

        text-decoration: none;
        transition:
            background .3s ease,
            border-color .3s ease,
            box-shadow .3s ease,
            transform .3s ease;
    }

    .world-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle at 100% 0%,
            rgba(192, 128, 139, .14),
            transparent 65%
        );
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .world-item:hover {
        transform: translateY(-3px);
        background: #fffaf8;
        border-color: rgba(176, 111, 125, .35);
        box-shadow: 0 14px 32px rgba(70, 40, 45, .09);
    }

    .world-item:hover::before {
        opacity: 1;
    }

    .world-item h3 {
        position: relative;
        z-index: 1;
        font-size: clamp(19px, 1.65vw, 26px);
        line-height: 1.2;
        letter-spacing: -.7px;
        transition: color .3s ease;
    }

    .world-item:hover h3 {
        color: #925a66;
    }

    .world-item > span,
    .world-item > small {
        position: relative;
        z-index: 1;
    }

    .world-item > small {
        letter-spacing: 1.7px;
    }
}
/* COLLECTION — FIRST TWO FLAGSHIP CARDS */

.collection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.collection-card {
    position: relative;
    min-width: 0;
    min-height: 420px;
    padding: 30px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.collection-flagship {
    color: white;
    border: 1px solid rgba(255,255,255,.18);
}

.collection-youtube {
    background:
        radial-gradient(circle at 90% 10%, rgba(83,126,229,.3), transparent 55%),
        linear-gradient(145deg, #222b43, #101218);
    box-shadow: 0 12px 35px rgba(57,80,145,.15);
}

.collection-vlogging {
    background:
        radial-gradient(circle at 90% 10%, rgba(255,153,184,.3), transparent 55%),
        linear-gradient(145deg, #4a2b3b, #1d1920);
    box-shadow: 0 12px 35px rgba(167,87,121,.15);
}

.collection-card:hover {
    transform: translateY(-5px);
}

.collection-flagship:hover {
    box-shadow: 0 18px 50px rgba(140,86,125,.24);
}

.collection-card-top,
.collection-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.collection-card-top {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.collection-card-info {
    margin-top: auto;
    padding: 60px 0 30px;
}

.collection-card-info small {
    font-size: 10px;
    letter-spacing: 2px;
    opacity: .75;
}

.collection-card-info h3 {
    margin: 14px 0;
    font-size: clamp(34px, 3.5vw, 52px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.collection-card-info p {
    max-width: 340px;
    font-size: 14px;
    line-height: 1.7;
    opacity: .8;
}

.collection-card-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.2);
}

.collection-card-bottom strong {
    font-size: 24px;
}

@media (max-width: 768px) {
    .collection-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .collection-card {
        min-height: 360px;
        padding: 24px;
    }

    .collection-card-info h3 {
        font-size: 36px;
    }
}
/* VAYEN COLLECTION — COMPACT PREMIUM PC */

@media (min-width: 769px) {

    /* TOP SECTION COMPACT */
    .collection-hero {
        padding-top: 65px;
        padding-bottom: 40px;
    }

    .collection-hero h1 {
        font-size: clamp(48px, 5vw, 72px);
        letter-spacing: -3px;
        margin: 16px 0;
    }

    .collection-hero > p {
        max-width: 450px;
        font-size: 13px;
        line-height: 1.6;
    }

    .collection-count {
        margin-top: 35px;
    }

    /* PRODUCT SECTION */
    .collection-products {
        padding-top: 55px;
        padding-bottom: 80px;
    }

    .collection-section-heading h2 {
        font-size: 38px;
        margin-top: 10px;
    }

    .collection-grid {
        gap: 20px;
        margin-top: 30px;
    }

    /* SMALLER CARDS */
    .collection-card {
        min-height: 285px;
        padding: 25px;
        border-radius: 20px;
    }

    .collection-card-info {
        padding: 20px 0 20px;
    }

    .collection-card-info h3 {
        font-size: clamp(27px, 2.5vw, 36px);
        letter-spacing: -1.3px;
        margin: 10px 0;
    }

    .collection-card-info p {
        font-size: 12px;
        line-height: 1.5;
        margin: 0;
    }

    .collection-card-bottom {
        padding-top: 14px;
    }

    .collection-card-bottom strong {
        font-size: 20px;
    }
}
/* VAYEN COLLECTION — BALANCED PC CARDS */

@media (min-width: 769px) {

    .collection-products {
        padding-top: 38px;
        padding-bottom: 65px;
    }

    .collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 1120px;
        margin: 28px auto 0;
        gap: 20px;
    }

    .collection-card {
        min-height: 310px;
        padding: 26px;
        border-radius: 22px;
    }

    .collection-card-info {
        padding: 25px 0 22px;
    }

    .collection-card-info h3 {
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -1.2px;
        margin: 10px 0;
    }

    .collection-card-info p {
        font-size: 12px;
        line-height: 1.5;
    }

    .collection-card-bottom {
        padding-top: 15px;
    }

    .collection-card-bottom strong {
        font-size: 21px;
    }
}
/* COLLECTION — REMAINING FOUR PRODUCTS */

.collection-mid {
    color: #2c222a;
    border: 1px solid rgba(132, 91, 112, .18);
    box-shadow: 0 10px 28px rgba(115, 75, 105, .08);
}

.collection-business {
    background:
        radial-gradient(circle at 85% 10%,
            rgba(210, 152, 193, .24), transparent 60%),
        linear-gradient(145deg, #f2e6ec, #e6d8e4);
}

.collection-creator {
    background:
        radial-gradient(circle at 85% 10%,
            rgba(171, 155, 225, .23), transparent 60%),
        linear-gradient(145deg, #ece8f5, #ded9eb);
}

.collection-essential {
    color: #2c2726;
    border: 1px solid rgba(65, 45, 45, .09);
    box-shadow: 0 8px 24px rgba(50, 35, 35, .035);
}

.collection-ai {
    background: linear-gradient(145deg, #faf8f5, #eceae5);
}

.collection-planner {
    background: linear-gradient(145deg, #f8f5ef, #eee8df);
}

.collection-mid .collection-card-bottom,
.collection-essential .collection-card-bottom {
    border-top: 1px solid rgba(60, 40, 40, .15);
}

.collection-mid:hover {
    box-shadow: 0 18px 42px rgba(130, 86, 120, .16);
}

.collection-essential:hover {
    box-shadow: 0 14px 32px rgba(60, 45, 45, .09);
}

@media (min-width: 769px) {
    .collection-mid,
    .collection-essential {
        min-height: 270px;
    }
}
/* VAYEN COLLECTION — 12 WORLDS SELECTOR */

.collection-worlds {
    padding: 45px 8% 25px;
    background: #f5f1ee;
}

.collection-worlds-heading > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #a16c70;
}

.collection-worlds-heading h2 {
    margin: 12px 0 25px;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1px;
}

.collection-worlds-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.collection-worlds-list button {
    padding: 12px 17px;
    border: 1px solid rgba(80, 50, 60, .12);
    border-radius: 50px;
    background: #fffaf8;
    color: #53474b;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all .25s ease;
}

.collection-worlds-list button:hover {
    border-color: #bb8996;
    background: #f5e9ed;
}

.collection-worlds-list button.selected-world {
    background: #33232e;
    color: #fff;
    border-color: #c79bab;
    box-shadow:
        0 0 0 3px rgba(201, 145, 169, .12),
        0 0 22px rgba(179, 112, 149, .28);
}

@media (max-width: 768px) {

    .collection-worlds {
        padding: 35px 24px 15px;
    }

    .collection-worlds-heading h2 {
        font-size: 26px;
    }

    .collection-worlds-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 5px 3px 15px;
        scrollbar-width: none;
    }

    .collection-worlds-list button {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
/* COLLECTION — CLEAN 12 WORLDS NAVIGATION */

@media (min-width: 769px) {

    .collection-worlds {
        padding: 30px 8% 12px;
    }

    .collection-worlds-heading h2 {
        font-size: 25px;
        margin: 8px 0 20px;
    }

    .collection-worlds-list {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
    }

    .collection-worlds-list button {
        width: 100%;
        min-height: 55px;
        padding: 10px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
    }

    .collection-worlds-list button.selected-world {
        background: #3b2933;
        color: #fff;
        border-color: #c795a5;
        box-shadow: 0 0 18px rgba(184, 117, 147, .25);
    }

    .collection-products {
        padding-top: 30px;
    }
}
/* VAYEN — COLLECTION PREMIUM POLISH */

/* Subtle page background */
.collection-page {
    background:
        radial-gradient(circle at 5% 5%, rgba(195, 146, 156, .10), transparent 30%),
        #f5f1ee;
}

/* Flagship cards — refined lighting */
.collection-flagship {
    border: 1px solid rgba(255, 220, 225, .25);
    box-shadow:
        0 14px 35px rgba(45, 25, 45, .12),
        0 0 22px rgba(190, 115, 150, .09);
}

.collection-flagship:hover {
    transform: translateY(-5px);
    box-shadow:
        0 22px 48px rgba(45, 25, 45, .18),
        0 0 35px rgba(190, 115, 150, .20);
}

/* Premium text spacing */
.collection-card-info h3 {
    letter-spacing: -1.2px;
    line-height: 1.12;
}

.collection-card-info p {
    opacity: .78;
    line-height: 1.65;
}

/* More elegant card footer */
.collection-card-bottom {
    border-top-color: rgba(150, 125, 135, .24);
}

.collection-card-bottom span {
    font-weight: 600;
    transition: transform .25s ease;
}

.collection-card:hover .collection-card-bottom span {
    transform: translateX(4px);
}

/* Advanced cards — soft lighting */
.collection-mid {
    box-shadow:
        0 12px 30px rgba(100, 65, 95, .07),
        0 0 20px rgba(190, 140, 175, .07);
}

/* Essential cards — understated */
.collection-essential {
    border-color: rgba(95, 70, 75, .10);
    box-shadow: 0 8px 24px rgba(50, 35, 35, .04);
}

/* Worlds — polished selection */
.collection-worlds-list button {
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.collection-worlds-list button:hover {
    transform: translateY(-2px);
}

.collection-worlds-list button.selected-world {
    box-shadow:
        0 0 0 3px rgba(201, 145, 169, .12),
        0 0 25px rgba(179, 112, 149, .25);
}

@media (prefers-reduced-motion: reduce) {
    .collection-card,
    .collection-worlds-list button {
        transition: none;
    }
}

/* =========================================
   VAYEN — RESPONSIVE PRODUCT SEARCH OVERLAY
========================================= */
body.vayen-search-open{overflow:hidden}
.vayen-search-overlay{position:fixed;inset:0;z-index:12000;background:rgba(17,13,16,.67);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(20px,7vh,75px) 18px 20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s,visibility .24s}
.vayen-search-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.vayen-search-panel{width:min(790px,100%);max-height:calc(100dvh - 80px);display:flex;flex-direction:column;min-height:0;background:#f7f4f0;color:#221b20;border:1px solid rgba(255,255,255,.5);border-radius:26px;box-shadow:0 35px 110px rgba(0,0,0,.3);padding:clamp(22px,4vw,38px)}
.vayen-search-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.vayen-search-kicker{font-size:10px;letter-spacing:3px;color:#9c6b79;font-weight:800}.vayen-search-top h2{font-size:clamp(31px,5vw,52px);font-weight:500;letter-spacing:-2.4px;line-height:1.05;margin-top:12px}.vayen-search-top h2 em{font-style:normal;color:#a76d85}.vayen-search-close{flex:0 0 39px;width:39px;height:39px;border-radius:50%;background:#fff;border:1px solid #e5d9dd;color:#32212b;cursor:pointer;font-size:17px}.vayen-search-field{margin-top:28px;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #e1d4d9;border-radius:16px;padding:0 18px;min-height:60px}.vayen-search-field:focus-within{border-color:#ad7c92;box-shadow:0 0 0 3px rgba(173,124,146,.1)}.vayen-search-field svg{width:21px;height:21px;fill:none;stroke:#9a7585;stroke-width:1.8;flex:none}.vayen-search-field input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#241d22;font:inherit;font-size:15px}.vayen-search-meta{display:flex;justify-content:space-between;gap:10px;margin:22px 0 10px;font-size:10px;letter-spacing:1.4px;font-weight:700;color:#93818a}.vayen-search-results{min-height:100px;overflow-y:auto;overscroll-behavior:contain}.vayen-search-result{display:flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none;color:inherit;border-bottom:1px solid #e6dce0;padding:17px 7px;transition:background .2s,padding .2s}.vayen-search-result:hover{background:#f0e7e9;padding-left:14px}.vayen-search-result-info{display:flex;flex-direction:column;gap:5px;min-width:0}.vayen-search-result-info small{font-size:9px;letter-spacing:1.5px;color:#a16f86;font-weight:800}.vayen-search-result-info strong{font-size:17px;letter-spacing:-.4px}.vayen-search-result-info>span{font-size:12px;color:#7d7176;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.vayen-search-result-arrow{font-size:20px;color:#9b6c82}.vayen-search-empty{padding:34px 8px;color:#81767a;text-align:center;font-size:14px}.vayen-search-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e4d9dc;padding-top:20px;margin-top:15px}.vayen-search-bottom a{color:#39252f;text-decoration:none;font-size:12px;font-weight:800}.vayen-search-bottom a span{margin-left:8px}.vayen-search-bottom>span{font-size:10px;color:#9e9297}
@media(max-width:600px){.vayen-search-overlay{padding:0;align-items:stretch}.vayen-search-panel{max-height:100dvh;height:100dvh;width:100%;border:0;border-radius:0;padding:27px 19px max(24px,env(safe-area-inset-bottom))}.vayen-search-top h2{font-size:35px;letter-spacing:-1.8px}.vayen-search-field{min-height:56px;margin-top:26px}.vayen-search-meta{font-size:9px}.vayen-search-result{padding:15px 3px}.vayen-search-bottom>span{display:none}}

/* Mobile-only native-style search layout; desktop unchanged. */
@media (max-width: 600px) {
  .vayen-search-overlay { background: #f7f4f0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .vayen-search-panel { padding: calc(12px + env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); background: #f7f4f0; }
  .vayen-search-top { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px; z-index: 1; }
  .vayen-search-top > div { display: none; }
  .vayen-search-close { width: 42px; height: 44px; border: 0; background: transparent; font-size: 0; border-radius: 10px; }
  .vayen-search-close::after { content: 'Cancel'; font-size: 13px; font-weight: 700; color: #5b3949; }
  .vayen-search-field { margin: 0 75px 0 0; min-height: 44px; padding: 0 12px; border-radius: 12px; background: #ebe7e8; border-color: transparent; gap: 9px; }
  .vayen-search-field input { font-size: 16px; }
  .vayen-search-field svg { width: 19px; height: 19px; }
  .vayen-search-meta { margin: 27px 0 12px; }
  .vayen-search-results { flex: 1; }
  .vayen-search-bottom { display: none; }
}
/* MOBILE HEADER + ANIMATION TEXT FIX */
@media (max-width: 768px) {
  .main-header {
    padding-left: 14px;
    padding-right: 14px;
    gap: 10px;
  }

  .header-actions {
    gap: 9px;
  }

  .brand {
    font-size: 13px;
    letter-spacing: 3px;
  }
}
@media (max-width: 768px) {
  .main-header {
    height: 62px;
    padding: 0 12px;
    gap: 8px;
  }

  .brand {
    font-size: 12px;
    letter-spacing: 2.5px;
  }

  .header-actions {
    gap: 7px;
  }

  .search-button {
    width: 34px;
    height: 34px;
  }
}
/* VAYEN demo purchase orders: scoped additions only */
.vy-demo-order{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:16px;align-items:center;background:#fffaf8;border:1px solid #eadadd;border-radius:20px;padding:22px;box-shadow:0 12px 30px #4a27300b;scroll-margin:110px;transition:box-shadow .3s,border-color .3s}.vy-order-art{width:76px;height:94px;border-radius:13px;background:linear-gradient(145deg,#a66a7a,#271e26);display:grid;place-items:center;color:#fff;font-size:37px;font-weight:900}.vy-order-info{min-width:0}.vy-order-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vy-order-pill,.vy-order-ready{padding:6px 9px;border-radius:100px;font-size:9px;font-weight:800;letter-spacing:.5px;background:#f7e7ec;color:#91506a}.vy-order-ready{background:#e8f2e9;color:#36724a}.vy-order-info h2{font-size:20px;letter-spacing:-.6px;margin:11px 0 6px}.vy-order-info p,.vy-order-info small{color:#87777b;font-size:12px;line-height:1.6}.vy-order-price{font-size:17px}.vy-order-actions{grid-column:2 / 4;display:flex;gap:10px;flex-wrap:wrap}.vy-order-actions button{border:1px solid #e7cfd6;border-radius:11px;padding:12px 18px;font-size:12px;font-weight:800;cursor:pointer;background:#f9edef;color:#733d53}.vy-order-actions button:first-child{background:#98566e;color:white;border-color:#98566e}.vy-order-highlight{border-color:#e88aa8!important;box-shadow:0 0 0 3px #ffc4d4,0 0 28px #e68ba87a!important;animation:vyOrderPulse 1.5s ease-in-out infinite alternate}@keyframes vyOrderPulse{to{box-shadow:0 0 0 4px #ffc4d4,0 0 36px #e68ba8a1}}.vy-order-modal[hidden]{display:none!important}.vy-order-modal{position:fixed;inset:0;z-index:10010;background:#21171cb8;display:grid;place-items:center;padding:20px}.vy-order-dialog{position:relative;width:min(450px,100%);background:#fffaf8;border-radius:24px;padding:34px;text-align:center;box-shadow:0 30px 90px #160d1570}.vy-modal-close{position:absolute;right:16px;top:12px;background:none;border:0;font-size:28px;cursor:pointer;color:#785d6a}.vy-modal-icon{display:grid;place-items:center;margin:8px auto 20px;width:72px;height:72px;border-radius:50%;background:#f7e5ea;color:#94526b;font-size:32px}.vy-order-dialog h2{font-size:25px;margin:0 0 12px}.vy-order-dialog p{color:#7d6b72;line-height:1.65;font-size:13px}.vy-modal-detail{background:#f7f0ef;padding:14px;border-radius:12px;margin:18px 0;overflow-wrap:anywhere;font-size:13px;font-weight:700}.vy-modal-primary{background:#2b2229;color:#fff;border:0;border-radius:12px;padding:15px 24px;width:100%;cursor:pointer;font-weight:800}@media(max-width:768px){.vy-demo-order{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:15px;border-radius:18px}.vy-order-art{width:62px;height:79px}.vy-order-price{grid-column:2;grid-row:2}.vy-order-info h2{font-size:16px}.vy-order-actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.vy-order-actions button{font-size:11px;padding:12px 6px}.vy-order-dialog{padding:28px 21px}}

/* VAYEN PRODUCT PAGE — MOBILE ONLY LAYOUT SAFETY */
@media (max-width: 768px) {
  html:has(body.product-body) { overflow-x: clip; }
  body.product-body { width: 100%; max-width: 100%; overflow-x: clip; }
  body.product-body .product-hero,
  body.product-body .product-included,
  body.product-body .product-result,
  body.product-body .product-final {
    width: 100%; max-width: 100%; min-width: 0;
    margin-left: 0; margin-right: 0;
    transform: none;
    box-sizing: border-box;
  }
  body.product-body .product-hero { display: grid; grid-template-columns: minmax(0,1fr); padding: 24px 20px 56px; gap: 32px; }
  body.product-body .product-visual { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
  body.product-body .product-intro { width: 100%; min-width: 0; }
  body.product-body .product-included { padding: 64px 20px 70px !important; }
  body.product-body .product-section-intro { width: 100%; max-width: 100%; min-width: 0; margin: 0; }
  body.product-body .product-section-intro h2 { font-size: clamp(32px,9vw,43px); line-height: 1.08; letter-spacing: -1.7px; overflow-wrap: break-word; }
  body.product-body .product-section-intro p { max-width: 100%; margin: 18px 0 30px; }
  body.product-body .product-steps { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 12px; margin: 0; }
  body.product-body .product-step { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; padding: 21px 18px !important; }
  body.product-body .product-step h3, body.product-body .product-step p { max-width: 100%; overflow-wrap: break-word; }
  body.product-body .product-result { padding: 65px 20px; }
  body.product-body .product-result h2 { font-size: clamp(32px,9vw,43px); line-height: 1.1; overflow-wrap: break-word; }
  body.product-body .product-result > p { max-width: 100%; }
  body.product-body .product-final { padding: 45px 20px; flex-direction: column; align-items: stretch; gap: 24px; }
  body.product-body .product-final h2 { font-size: clamp(32px,9vw,43px); overflow-wrap: break-word; }
  body.product-body .product-mobile-get { left: 0; right: 0; width: 100%; max-width: 100%; box-sizing: border-box; transform: none; padding-left: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); }
  body.product-body .product-mobile-get > * { min-width: 0; }
}


/* VAYEN 16 product-cover integration — isolated to Collection */
.vayen-collection-final .vc-card.vc-mid:has(.vc-cover-wrap) {
    min-height: 0;
    padding: 18px 20px 21px;
    gap: 12px;
}
.vayen-collection-final .vc-mid .vc-cover-wrap {
    width: 100%; aspect-ratio: 16 / 9;
    border-radius: 15px; overflow: hidden;
    background: #15121c; flex: none;
    box-shadow: 0 8px 22px rgba(20, 15, 29, .12);
}
.vayen-collection-final .vc-mid .vc-cover {
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
}
.vayen-collection-final .vc-mid:has(.vc-cover-wrap) .vc-copy { margin-top: 0; }
.vayen-collection-final .vc-mid:has(.vc-cover-wrap) .vc-copy h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 6px 0; }
.vayen-collection-final .vc-mid:has(.vc-cover-wrap) .vc-bottom { margin-top: 6px; }
.vayen-collection-final .vc-world-list button:has(.vc-world-cover) {
    display: flex; flex-direction: column; gap: 9px;
    padding: 9px 10px 13px; min-width: 0;
    align-items: stretch; justify-content: flex-start;
}
.vayen-collection-final .vc-world-cover {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-fit: contain;
    border-radius: 9px; background: #16121b;
}
.vayen-collection-final .vc-world-name {
    display: block; min-width: 0; padding-right: 15px;
    line-height: 1.35; font-weight: 700;
}
@media(max-width:768px) {
    .vayen-collection-final .vc-mid:has(.vc-cover-wrap) { padding: 15px 16px 19px; }
    .vayen-collection-final .vc-world-list button:has(.vc-world-cover) { padding: 8px 8px 12px; gap: 8px; }
    .vayen-collection-final .vc-world-name { font-size: 10px; }
}

/* VAYEN 12 worlds: mobile-only card artwork. Keep original swipe and dimensions. */
@media (max-width: 768px) {
  #worldsSection .worlds-list > .world-item:nth-child(1) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-01.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(2) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-02.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(3) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-03.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(4) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-04.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(5) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-05.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(6) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-06.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(7) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-07.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(8) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-08.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(9) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-09.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(10) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-10.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(11) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-11.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  #worldsSection .worlds-list > .world-item:nth-child(12) {
    background-image: linear-gradient(to bottom, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 35%, rgba(250,242,238,.16) 55%, rgba(250,242,238,.38) 100%), url("images/worlds/world-12.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}


/* VAYEN FIX: Mobile swipe covers already contain their own product titles.
   Hide only the duplicate HTML title, number and micro-label. */
@media (max-width: 768px) {
    #worldsSection .worlds-list > .world-item > span,
    #worldsSection .worlds-list > .world-item > h3,
    #worldsSection .worlds-list > .world-item > small {
        display: none !important;
    }
}