@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap");

:root {
    --bg: #eef3f1;
    --dark: #123d3e;
    --dark-soft: #1b4b4c;
    --brown: #2b6061;
    --red: #3a7778;
    --gold: #b99a67;
    --gold-light: #d7ba83;
    --gold-soft: #ead8b3;
    --turquoise: #3a7778;
    --blue: #7aa8a7;
    --cream: #f2f5f3;
    --line: rgba(18, 61, 62, 0.16);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--dark);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open,
body.loading {
    overflow: hidden;
}

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

button {
    font: inherit;
}

img {
    display: block;
}


/* =========================================================
   PRELOADER
========================================================= */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(185, 154, 103, 0.10),
            transparent 35%
        ),
        #0f3132;

    color: var(--cream);
    overflow: hidden;
}

.preloader::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.018),
            transparent
        );

    transform: translateX(-100%);

    animation: preloaderLight 2.8s linear infinite;
}

@keyframes preloaderLight {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.preloader-inner {
    position: relative;
    z-index: 2;

    width: min(
        900px,
        calc(100% - 60px)
    );
}

.preloader-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 28px;
}

.preloader-brand {
    direction: ltr;
    font-family: Arial, sans-serif;

    font-size: clamp(
        25px,
        5vw,
        68px
    );

    font-weight: 400;

    letter-spacing: clamp(
        5px,
        1vw,
        12px
    );

    line-height: 1;
}

.preloader-percent {
    direction: ltr;
    font-family: Arial, sans-serif;

    min-width: 90px;

    text-align: left;

    font-size: clamp(
        30px,
        5vw,
        65px
    );

    line-height: 1;

    color: var(--gold);
}

.preloader-percent::after {
    content: "%";

    font-size: 14px;

    margin-left: 3px;

    opacity: 0.5;
}

.preloader-line {
    position: relative;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.16);

    overflow: hidden;
}

.preloader-line-fill {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #7e6848,
            #d7b87b,
            #f1d9a5
        );

    box-shadow:
        0 0 18px
        rgba(215, 184, 123, 0.45);
}

.preloader-bottom {
    margin-top: 22px;

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

    gap: 20px;

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

    color:
        rgba(248, 244, 237, 0.45);
}

.preloader-bottom span:last-child {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 3px;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: fixed;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 50px);
    max-width: 1450px;
    height: 72px;

    padding: 0 26px;

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

    gap: 30px;

    z-index: 500;

    border:
        1px solid
        rgba(185, 154, 103, 0.25);

    background:
        rgba(245, 240, 232, 0.72);

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

    border-radius: 22px;

    box-shadow:
        0 15px 50px rgba(18, 61, 62, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);

    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.navbar.scrolled {
    background:
        rgba(245, 240, 232, 0.94);

    border-color:
        rgba(185, 154, 103, 0.36);

    box-shadow:
        0 12px 45px
        rgba(18, 61, 62, 0.11);
}

.nav-logo {
    display: flex;
    flex-direction: column;

    min-width: 150px;
}

.nav-logo-fa {
    font-size: 17px;
    font-weight: 700;

    letter-spacing: -0.6px;
}

.nav-logo-en {
    direction: ltr;

    margin-top: 4px;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;
    letter-spacing: 3px;

    opacity: 0.55;
}

.nav-menu {
    display: flex;
    align-items: center;

    gap: 25px;

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

.nav-menu a {
    position: relative;

    padding: 8px 0;
}

.nav-menu a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 1px;

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

    transition:
        width
        0.3s
        ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

.nav-contact {
    padding: 11px 18px;

    border:
        1px solid
        rgba(185, 154, 103, 0.65);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.16);

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

    transition: 0.3s ease;
}

.nav-contact:hover {
    background: var(--dark);
    color: var(--cream);

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

.mobile-menu-button {
    display: none;

    position: relative;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background:
        var(--dark);

    cursor: pointer;

    z-index: 510;
}

.mobile-menu-button span {
    position: absolute;

    left: 11px;

    width: 20px;
    height: 1px;

    background: white;

    transition: 0.3s ease;
}

.mobile-menu-button span:first-child {
    top: 17px;
}

.mobile-menu-button span:last-child {
    top: 24px;
}

.mobile-menu-button.active span:first-child {
    top: 21px;

    transform: rotate(45deg);
}

.mobile-menu-button.active span:last-child {
    top: 21px;

    transform: rotate(-45deg);
}


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

.mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 450;

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

    background:
        radial-gradient(
            circle at center,
            rgba(185, 154, 103, 0.08),
            transparent 38%
        ),
        rgba(22, 19, 15, 0.98);

    color:
        var(--cream);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;

    text-align: center;

    gap: 18px;
}

.mobile-menu a {
    font-size: clamp(
        28px,
        7vw,
        56px
    );

    font-weight: 500;

    letter-spacing: -1.5px;

    opacity: 0;
}


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

.hero {
    position: relative;

    min-height: 100vh;
    height: 100vh;

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

    padding: 40px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0) 31%
        ),
        radial-gradient(
            circle at 18% 22%,
            rgba(185, 154, 103, 0.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(41, 142, 148, 0.11),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f2f5f3 0%,
            #e4ece9 52%,
            #edf2ef 100%
        );
}

.hero::before {
    content: "";

    position: absolute;

    inset: 18px;

    z-index: 1;

    border:
        1px solid
        rgba(185, 154, 103, 0.22);

    pointer-events: none;
}

.hero::after {
    content: "✦";

    position: absolute;

    left: 50%;
    bottom: 28px;

    transform:
        translateX(-50%);

    z-index: 3;

    font-size: 13px;

    color:
        rgba(185, 154, 103, 0.85);

    text-shadow:
        0 0 18px
        rgba(185, 154, 103, 0.42);

    pointer-events: none;
}

.hero-content {
    position: relative;

    z-index: 4;

    width:
        min(
            1180px,
            100%
        );

    text-align: center;

    opacity: 0;
}

.hero-content::before,
.hero-content::after {
    content: "✦";

    position: absolute;

    top: 50%;

    z-index: -1;

    color:
        rgba(185, 154, 103, 0.23);

    font-family:
        Georgia,
        serif;

    font-size: clamp(
        80px,
        11vw,
        160px
    );

    transform:
        translateY(-50%);

    pointer-events: none;
}

.hero-content::before {
    right: -8%;
}

.hero-content::after {
    left: -8%;
}

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

    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(
            720px,
            70vw
        );

    height: 340px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185, 154, 103, 0.17),
            rgba(185, 154, 103, 0.05) 37%,
            rgba(185, 154, 103, 0) 70%
        );

    filter: blur(18px);

    z-index: -1;

    pointer-events: none;
}

.kicker {
    position: relative;

    direction: ltr;

    display: inline-flex;
    align-items: center;

    gap: 20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;
    letter-spacing: 8px;

    color: #8e744f;

    margin-bottom: 28px;
}

.kicker::before,
.kicker::after {
    content: "";

    width: 70px;
    height: 1px;

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

    opacity: 0.75;
}

.kicker::after {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

h1 {
    position: relative;

    font-size: clamp(
        74px,
        12vw,
        188px
    );

    line-height: 0.86;

    font-weight: 700;

    letter-spacing: -8px;

    color:
        var(--brown);

    text-shadow:
        0 14px 40px
        rgba(58, 119, 120, 0.08);
}

h1 span {
    display: block;
}

h1 .title-line:first-child {
    position: relative;

    color:
        #214f50;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.7),

        0 18px 45px
        rgba(58, 119, 120, 0.10);
}

.outline {
    margin-top: 8px;

    color:
        rgba(255, 255, 255, 0.18);

    -webkit-text-stroke:
        1.7px
        #a98654;

    text-shadow:
        0 0 35px
        rgba(185, 154, 103, 0.10);
}

.hero-text {
    position: relative;

    margin:
        42px
        auto
        0;

    width:
        min(
            480px,
            90%
        );

    padding-top: 24px;

    font-size: 15px;

    line-height: 2.15;

    color:
        rgba(22, 19, 15, 0.62);
}

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

    position: absolute;

    top: 0;
    left: 50%;

    width: 110px;
    height: 1px;

    transform:
        translateX(-50%);

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

.hero-button {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 15px;

    margin-top: 34px;

    padding:
        15px
        27px;

    border-radius: 999px;

    border:
        1px solid
        rgba(126, 100, 63, 0.72);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.45),
            rgba(255, 255, 255, 0.13)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.70),

        0 12px 35px
        rgba(58, 119, 120, 0.10);

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

    overflow: hidden;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

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

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent
        );

    transition:
        left
        0.55s
        ease;
}

.hero-button:hover::before {
    left: 150%;
}

.hero-button:hover {
    background:
        linear-gradient(
            135deg,
            #163f40,
            #16130f
        );

    color:
        var(--cream);

    border-color:
        var(--dark);

    box-shadow:
        0 16px 40px
        rgba(22, 19, 15, 0.18);
}

.hero-button span {
    color:
        var(--gold);

    font-size: 16px;
}


/* =========================================================
   MAGIC CARPET
========================================================= */

.carpet-stage {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 540px;
    height: 360px;

    z-index: 8;

    pointer-events: none;
}

.carpet-glow {
    position: absolute;

    left: 50%;
    top: 54%;

    width: 360px;
    height: 180px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 214, 120, 0.42) 0%,
            rgba(41, 142, 148, 0.15) 30%,
            rgba(255, 214, 120, 0.12) 48%,
            rgba(255, 214, 120, 0) 72%
        );

    filter: blur(24px);

    opacity: 0.75;
}

.carpet-shadow {
    position: absolute;

    left: 50%;
    top: 78%;

    width: 290px;
    height: 88px;

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

    background:
        rgba(30, 18, 11, 0.22);

    filter:
        blur(30px);

    border-radius: 50%;
}

.carpet-wrapper {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 430px;

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

    transform-style:
        preserve-3d;

    transform-origin:
        center center;

    filter:
        drop-shadow(
            0 28px 35px
            rgba(48, 20, 18, 0.24)
        )
        drop-shadow(
            0 8px 16px
            rgba(0, 0, 0, 0.12)
        );
}

.flying-carpet {
    width: 100%;
    height: auto;

    border-radius: 20px;

    object-fit: cover;

    transform:
        perspective(1100px)
        rotateX(16deg)
        rotateY(-14deg)
        rotateZ(-7deg);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.14);
}

.magic-dust {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 240, 190, 1) 0%,
            rgba(255, 212, 110, 0.9) 45%,
            rgba(255, 212, 110, 0) 100%
        );

    box-shadow:
        0 0 12px
        rgba(255, 220, 130, 0.95),

        0 0 28px
        rgba(255, 220, 130, 0.55);
}

.dust-1 {
    left: 14%;
    top: 60%;
}

.dust-2 {
    left: 22%;
    top: 39%;
}

.dust-3 {
    right: 17%;
    top: 44%;
}

.dust-4 {
    right: 24%;
    top: 66%;
}

.dust-5 {
    left: 50%;
    top: 20%;
}

.dust-6 {
    left: 70%;
    top: 24%;
}


/* =========================================================
   DARK STATEMENT
========================================================= */

.dark-section {
    min-height: 100vh;

    background:
        var(--dark);

    color:
        var(--cream);

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

    padding:
        120px
        clamp(30px, 8vw, 120px);

    overflow: hidden;
}

.dark-label {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 6px;

    font-size: 10px;

    opacity: 0.4;

    margin-bottom: 60px;
}

.dark-section h2 {
    font-size: clamp(
        62px,
        10vw,
        150px
    );

    line-height: 1;

    font-weight: 300;

    letter-spacing: -5px;
}

.dark-section h2 span {
    color:
        var(--gold);

    font-weight: 500;
}


/* =========================================================
   FARSHINEH
========================================================= */

.farshineh-section {
    position: relative;

    min-height: 110vh;

    display: grid;

    grid-template-columns:
        1.25fr
        0.75fr;

    align-items: center;

    gap: 80px;

    padding:
        150px
        clamp(30px, 7vw, 110px);

    background:
        #eef3f1;

    overflow: hidden;
}

.section-number {
    position: absolute;

    top: 50px;

    right:
        clamp(30px, 7vw, 110px);

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 5px;

    opacity: 0.42;
}

.farshineh-image-wrap {
    position: relative;

    height: 680px;

    overflow: hidden;
}

.farshineh-image-box {
    position: absolute;

    inset: -45px 0;

    overflow: hidden;

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

    background:
        #547878;
}

.farshineh-photo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.08);

    will-change:
        transform;
}

.farshineh-photo-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(15, 10, 7, 0.03) 0%,
            rgba(15, 10, 7, 0.10) 55%,
            rgba(15, 10, 7, 0.35) 100%
        );
}

.image-overlay-text {
    position: relative;

    z-index: 2;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: clamp(
        75px,
        9vw,
        150px
    );

    font-weight: 700;

    letter-spacing: -5px;

    color:
        rgba(255, 255, 255, 0.12);

    pointer-events: none;
}

.image-circle {
    position: absolute;

    z-index: 2;

    width: 430px;
    height: 430px;

    border-radius: 50%;

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

.farshineh-content {
    max-width: 440px;
}

.product-en,
.grip-en {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 7px;

    opacity: 0.45;

    margin-bottom: 30px;
}

.farshineh-content h2,
.grip-content h2 {
    font-size: clamp(
        62px,
        7vw,
        112px
    );

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -4px;

    margin-bottom: 40px;
}

.farshineh-description {
    line-height: 2.25;

    font-size: 15px;

    color:
        rgba(22, 19, 15, 0.60);
}

.features {
    margin-top: 60px;

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

.feature-item {
    display: flex;
    align-items: center;

    gap: 24px;

    padding:
        20px 0;

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

    font-size: 14px;
    font-weight: 500;
}

.feature-number {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    color:
        var(--gold);
}


/* =========================================================
   GRIP
========================================================= */

.grip-section {
    position: relative;

    min-height: 110vh;

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    align-items: center;

    gap: 80px;

    padding:
        150px
        clamp(30px, 7vw, 110px);

    background:
        #103536;

    color:
        var(--cream);

    overflow: hidden;
}

.grip-number {
    position: absolute;

    top: 50px;

    right:
        clamp(30px, 7vw, 110px);

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 5px;

    opacity: 0.45;
}

.grip-content {
    max-width: 460px;
}

.grip-description {
    font-size: 15px;

    line-height: 2.25;

    color:
        rgba(248, 244, 237, 0.60);
}

.grip-features {
    margin-top: 60px;

    border-top:
        1px solid
        rgba(248, 244, 237, 0.14);
}

.grip-feature {
    display: flex;
    align-items: center;

    gap: 24px;

    padding: 20px 0;

    border-bottom:
        1px solid
        rgba(248, 244, 237, 0.14);
}

.grip-feature span {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    color:
        var(--gold);
}

.grip-feature p {
    font-size: 14px;
    font-weight: 500;
}

.grip-visual {
    position: relative;

    height: 680px;

    overflow: hidden;

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

    background:
        #194445;
}

.grip-photo {
    position: absolute;

    inset: -50px 0;

    width: 100%;

    height:
        calc(100% + 100px);

    object-fit: cover;

    transform:
        scale(1.05);
}

.grip-photo-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(10, 9, 8, 0.16),
            rgba(10, 9, 8, 0.48)
        );
}

.grip-grid {
    position: absolute;

    inset: 0;

    z-index: 2;

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

    background-size:
        34px 34px;

    mix-blend-mode: screen;

    opacity: 0.42;
}

.grip-word {
    position: relative;

    z-index: 3;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: clamp(
        90px,
        11vw,
        170px
    );

    font-weight: 700;

    letter-spacing: -7px;

    color:
        rgba(255, 255, 255, 0.15);
}

.grip-circle {
    position: absolute;

    z-index: 3;

    border-radius: 50%;

    border:
        1px solid
        rgba(225, 195, 137, 0.32);
}

.grip-circle-one {
    width: 460px;
    height: 460px;
}

.grip-circle-two {
    width: 300px;
    height: 300px;
}

.grip-card {
    position: absolute;

    left: 55px;
    bottom: 55px;

    z-index: 4;

    width: 210px;

    padding: 22px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    background:
        rgba(20, 18, 16, 0.36);

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

    backdrop-filter:
        blur(14px);

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

.grip-card span {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    color:
        #d8ba83;
}

.grip-card strong {
    font-size: 18px;

    font-weight: 500;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-section {
    min-height: 120vh;

    background:
        #eaf0ee;

    padding:
        140px
        clamp(30px, 7vw, 110px);

    overflow: hidden;
}

.gallery-header {
    margin-bottom: 70px;
}

.gallery-header p {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 7px;

    font-size: 9px;

    opacity: 0.42;

    margin-bottom: 24px;
}

.gallery-header h2 {
    font-size: clamp(
        68px,
        9vw,
        145px
    );

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -5px;
}

.gallery-track {
    display: grid;

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

    gap: 24px;

    perspective:
        1400px;
}

.gallery-card {
    position: relative;

    height: 560px;

    overflow: hidden;

    color:
        var(--cream);

    background:
        #244f50;

    isolation: isolate;

    transform-origin:
        center;

    cursor: pointer;
}

.gallery-photo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.04);

    will-change:
        transform;
}

.gallery-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(10, 8, 6, 0.04) 0%,
            rgba(10, 8, 6, 0.08) 42%,
            rgba(10, 8, 6, 0.70) 100%
        );
}

.gallery-number {
    position: absolute;

    z-index: 3;

    top: 28px;
    right: 28px;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    opacity: 0.72;
}

.gallery-card-content {
    position: absolute;

    z-index: 3;

    right: 28px;
    left: 28px;
    bottom: 30px;
}

.gallery-card-content p {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 4px;

    opacity: 0.64;

    margin-bottom: 12px;
}

.gallery-card h3 {
    font-size: clamp(
        30px,
        3vw,
        46px
    );

    font-weight: 500;

    letter-spacing: -1px;
}


/* =========================================================
   RUG FINDER
========================================================= */

.rug-finder-section {
    position: relative;

    min-height: 100vh;

    padding:
        150px
        clamp(30px, 7vw, 110px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(72, 178, 187, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(185, 154, 103, 0.18),
            transparent 32%
        ),
        #0f3132;

    color:
        var(--cream);
}

.rug-finder-section::before {
    content: "";

    position: absolute;

    width: 800px;
    height: 800px;

    top: -450px;
    right: -250px;

    border-radius: 50%;

    border:
        1px solid
        rgba(185, 154, 103, 0.11);

    box-shadow:
        0 0 0 80px rgba(185, 154, 103, 0.025),
        0 0 0 160px rgba(185, 154, 103, 0.018);

    pointer-events: none;
}

.rug-finder-section::after {
    content: "✦";

    position: absolute;

    left: 7%;
    top: 120px;

    font-family:
        Georgia,
        serif;

    font-size: 180px;

    color:
        rgba(185, 154, 103, 0.035);

    pointer-events: none;
}

.rug-finder-shell {
    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   QUIZ INTRO
========================================================= */

.quiz-intro {
    position: relative;

    min-height: 780px;

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

    text-align: center;

    padding:
        90px
        clamp(20px, 5vw, 70px);

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.05),

        0 50px 120px
        rgba(0, 0, 0, 0.20);

    overflow: hidden;
}

.quiz-intro::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185, 154, 103, 0.14),
            rgba(41, 142, 148, 0.05) 42%,
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;
}

.quiz-intro::after {
    content: "";

    position: absolute;

    inset: 22px;

    border:
        1px solid
        rgba(185, 154, 103, 0.12);

    pointer-events: none;
}

.quiz-eyebrow {
    position: relative;

    z-index: 2;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 8px;

    color:
        rgba(215, 186, 131, 0.72);

    margin-bottom: 50px;
}

.quiz-intro-title {
    position: relative;

    z-index: 2;

    max-width: 1120px;
}

.quiz-intro-small {
    display: inline-block;

    margin-bottom: 18px;

    font-size: clamp(
        26px,
        3vw,
        45px
    );

    font-weight: 300;

    color:
        rgba(248, 244, 237, 0.72);
}

.quiz-intro-title h2 {
    font-size: clamp(
        64px,
        9vw,
        140px
    );

    line-height: 1.02;

    font-weight: 400;

    letter-spacing: -6px;
}

.quiz-intro-title h2 span {
    color:
        var(--gold-light);

    font-weight: 600;

    text-shadow:
        0 0 45px
        rgba(215, 186, 131, 0.12);
}

.quiz-intro-fun {
    position: relative;

    z-index: 2;

    margin-top: 24px;

    font-size: clamp(
        30px,
        4vw,
        55px
    );

    font-weight: 500;

    color:
        var(--gold-light);

    transform:
        rotate(-3deg);
}

.quiz-intro-description {
    position: relative;

    z-index: 2;

    max-width: 650px;

    margin-top: 38px;

    font-size: 15px;

    line-height: 2.3;

    color:
        rgba(248, 244, 237, 0.60);
}

.quiz-start-button {
    position: relative;

    z-index: 2;

    margin-top: 45px;

    min-width: 290px;

    padding:
        17px
        28px;

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

    gap: 18px;

    border:
        1px solid
        rgba(215, 186, 131, 0.58);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(185, 154, 103, 0.18),
            rgba(255, 255, 255, 0.03)
        );

    color:
        var(--cream);

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.08),

        0 18px 50px
        rgba(0, 0, 0, 0.17);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.quiz-start-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transition:
        left 0.6s ease;
}

.quiz-start-button:hover::before {
    left: 150%;
}

.quiz-start-button:hover {
    transform:
        translateY(-5px);

    background:
        linear-gradient(
            135deg,
            rgba(185, 154, 103, 0.30),
            rgba(41, 142, 148, 0.10)
        );

    border-color:
        rgba(215, 186, 131, 0.88);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.25);
}

.quiz-start-icon {
    font-family:
        Georgia,
        serif;

    font-size: 20px;

    color:
        #f0cc88;

    text-shadow:
        0 0 14px
        rgba(240, 204, 136, 0.50);
}


/* =========================================================
   QUIZ APP
========================================================= */

.quiz-app {
    display: none;

    position: relative;

    min-height: 780px;

    margin-top: 0;

    padding:
        40px
        clamp(22px, 5vw, 70px)
        70px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    overflow: hidden;
}

.quiz-app::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -200px;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(41, 142, 148, 0.16),
            transparent 68%
        );

    pointer-events: none;
}

.quiz-header {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 25px;

    padding-bottom: 30px;

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

.quiz-progress-copy {
    direction: ltr;

    display: flex;
    align-items: baseline;

    gap: 7px;

    min-width: 70px;

    font-family:
        Arial,
        sans-serif;
}

.quiz-progress-current {
    font-size: 24px;

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

.quiz-progress-divider,
.quiz-progress-total {
    font-size: 10px;

    color:
        rgba(248, 244, 237, 0.38);
}

.quiz-progress-bar {
    position: relative;

    height: 2px;

    background:
        rgba(255, 255, 255, 0.10);

    overflow: hidden;
}

.quiz-progress-fill {
    width: 14.2857%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #9d7b45,
            #e1bd78,
            #72cbd1
        );

    box-shadow:
        0 0 16px
        rgba(215, 186, 131, 0.35);

    transition:
        width
        0.55s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.quiz-back-button {
    min-width: 70px;

    padding:
        9px
        14px;

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

    border-radius: 999px;

    background:
        transparent;

    color:
        rgba(248, 244, 237, 0.62);

    cursor: pointer;

    font-size: 11px;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.quiz-back-button:hover {
    color:
        var(--cream);

    border-color:
        rgba(215, 186, 131, 0.45);

    background:
        rgba(255, 255, 255, 0.035);
}


/* =========================================================
   QUESTIONS
========================================================= */

.quiz-question {
    display: none;

    position: relative;

    z-index: 2;

    min-height: 650px;

    padding-top: 65px;
}

.quiz-question.active {
    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 70px;

    align-items: center;
}

.quiz-question-copy {
    max-width: 470px;
}

.quiz-question-number {
    direction: ltr;

    display: block;

    margin-bottom: 26px;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 5px;

    color:
        var(--gold);
}

.quiz-question-kicker {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 7px;

    color:
        rgba(248, 244, 237, 0.36);

    margin-bottom: 24px;
}

.quiz-question-copy h3 {
    font-size: clamp(
        40px,
        5vw,
        72px
    );

    line-height: 1.18;

    font-weight: 500;

    letter-spacing: -3px;
}

.quiz-question-copy > p:last-child {
    margin-top: 28px;

    max-width: 420px;

    font-size: 14px;

    line-height: 2.15;

    color:
        rgba(248, 244, 237, 0.52);
}


/* =========================================================
   OPTIONS
========================================================= */

.quiz-options {
    display: grid;

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

    gap: 15px;
}

.quiz-option {
    position: relative;

    min-height: 155px;

    padding:
        24px;

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

    text-align: right;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    color:
        var(--cream);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.quiz-option::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -90px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185, 154, 103, 0.16),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity
        0.35s
        ease;
}

.quiz-option:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(215, 186, 131, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(185, 154, 103, 0.12),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 24px 45px
        rgba(0, 0, 0, 0.16);
}

.quiz-option:hover::before {
    opacity: 1;
}

.quiz-option.selected {
    border-color:
        rgba(215, 186, 131, 0.88);

    background:
        linear-gradient(
            145deg,
            rgba(185, 154, 103, 0.19),
            rgba(41, 142, 148, 0.07)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(215, 186, 131, 0.15),

        0 0 35px
        rgba(185, 154, 103, 0.08);
}

.quiz-option strong {
    position: relative;

    z-index: 2;

    font-size: 20px;

    font-weight: 500;

    letter-spacing: -0.7px;
}

.quiz-option small {
    position: relative;

    z-index: 2;

    margin-top: 8px;

    font-size: 11px;

    line-height: 1.8;

    color:
        rgba(248, 244, 237, 0.47);
}

.quiz-option-symbol {
    position: absolute;

    left: 20px;
    top: 18px;

    font-size: 26px;

    color:
        rgba(215, 186, 131, 0.65);

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}

.quiz-option:hover
.quiz-option-symbol {
    transform:
        rotate(15deg)
        scale(1.1);

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


/* =========================================================
   COLOR OPTIONS
========================================================= */

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

.color-option {
    min-height: 185px;
}

.color-palette {
    position: absolute;

    top: 22px;
    right: 22px;

    display: flex;

    gap: 7px;
}

.color-palette i {
    display: block;

    width: 32px;
    height: 32px;

    border-radius: 50%;

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

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.20);

    transition:
        transform
        0.35s
        ease;
}

.color-option:hover
.color-palette i:nth-child(1) {
    transform:
        translateY(-4px);
}

.color-option:hover
.color-palette i:nth-child(2) {
    transform:
        translateY(-8px);
}

.color-option:hover
.color-palette i:nth-child(3) {
    transform:
        translateY(-4px);
}


/* =========================================================
   STATEMENT
========================================================= */

.statement-options {
    grid-template-columns:
        repeat(3, 1fr);
}

.statement-options
.quiz-option {
    min-height: 230px;
}

.statement-scale {
    position: absolute;

    top: 30px;
    right: 24px;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: 8px;

    color:
        var(--gold-light);

    opacity: 0.75;
}


/* =========================================================
   PATTERN
========================================================= */

.pattern-options {
    grid-template-columns:
        repeat(3, 1fr);
}

.pattern-option {
    min-height: 250px;
}

.pattern-preview {
    position: absolute;

    top: 22px;
    right: 22px;
    left: 22px;

    height: 105px;

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

    gap: 9px;

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

    background:
        rgba(255, 255, 255, 0.02);

    overflow: hidden;
}

.pattern-preview::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            45deg,
            rgba(185, 154, 103, 0.025) 0,
            rgba(185, 154, 103, 0.025) 1px,
            transparent 1px,
            transparent 12px
        );
}

.pattern-preview i {
    position: relative;

    z-index: 2;

    display: block;

    width: 12px;
    height: 12px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(215, 186, 131, 0.75);

    transition:
        transform
        0.35s
        ease;
}

.pattern-option:hover
.pattern-preview i {
    transform:
        rotate(135deg)
        scale(1.1);
}

.pattern-simple i {
    width: 18px;
    height: 18px;
}

.pattern-balanced i:nth-child(even) {
    width: 18px;
    height: 18px;
}

.pattern-detailed {
    gap: 6px;
}

.pattern-detailed i {
    width: 9px;
    height: 9px;
}


/* =========================================================
   ROOM + MOOD + DISLIKE
========================================================= */

.room-options,
.mood-options {
    grid-template-columns:
        repeat(2, 1fr);
}

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

.dislike-options
.quiz-option {
    min-height: 130px;
}

.dislike-options
.quiz-option:last-child {
    grid-column:
        1 / -1;

    min-height: 110px;
}


/* =========================================================
   QUIZ ANALYSIS
========================================================= */

.quiz-analysis {
    display: none;

    position: relative;

    z-index: 2;

    min-height: 650px;

    padding:
        80px
        20px;

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

    text-align: center;
}

.quiz-analysis-orbit {
    position: relative;

    width: 210px;
    height: 210px;

    margin-bottom: 45px;

    border:
        1px solid
        rgba(215, 186, 131, 0.18);

    border-radius: 50%;
}

.quiz-analysis-orbit::before,
.quiz-analysis-orbit::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(98, 207, 216, 0.15);
}

.quiz-analysis-orbit::before {
    inset: 22px;
}

.quiz-analysis-orbit::after {
    inset: 54px;
}

.quiz-analysis-orbit span {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 20px
        rgba(215, 186, 131, 0.65);
}

.quiz-analysis-orbit span:nth-child(1) {
    top: 9px;
    left: 50%;
}

.quiz-analysis-orbit span:nth-child(2) {
    bottom: 25px;
    right: 18px;

    background:
        #70cbd2;

    box-shadow:
        0 0 20px
        rgba(112, 203, 210, 0.65);
}

.quiz-analysis-orbit span:nth-child(3) {
    bottom: 30px;
    left: 20px;
}

.quiz-analysis-kicker {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 7px;

    color:
        rgba(215, 186, 131, 0.62);

    margin-bottom: 25px;
}

.quiz-analysis h3 {
    max-width: 760px;

    font-size: clamp(
        38px,
        5vw,
        72px
    );

    line-height: 1.25;

    font-weight: 400;

    letter-spacing: -3px;
}

.quiz-analysis > p:last-child {
    max-width: 590px;

    margin-top: 28px;

    font-size: 14px;

    line-height: 2.1;

    color:
        rgba(248, 244, 237, 0.50);
}


/* =========================================================
   QUIZ RESULT
========================================================= */

.quiz-result {
    display: none;

    position: relative;

    z-index: 2;

    padding:
        70px
        0
        20px;
}

.quiz-result-heading {
    max-width: 920px;
}

.quiz-result-kicker {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 7px;

    color:
        rgba(215, 186, 131, 0.65);

    margin-bottom: 24px;
}

.quiz-result-heading h3 {
    font-size: clamp(
        58px,
        8vw,
        125px
    );

    line-height: 1;

    font-weight: 400;

    letter-spacing: -5px;
}

.quiz-result-heading h3 span {
    color:
        var(--gold-light);

    font-weight: 600;
}

.quiz-result-summary {
    max-width: 700px;

    margin-top: 38px;

    font-size: 15px;

    line-height: 2.2;

    color:
        rgba(248, 244, 237, 0.55);
}

.quiz-result-personality {
    margin-top: 55px;

    padding:
        26px
        0;

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

    gap: 30px;

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

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

.quiz-result-personality span {
    font-size: 11px;

    color:
        rgba(248, 244, 237, 0.40);
}

.quiz-personality-name {
    font-size: clamp(
        24px,
        3vw,
        42px
    );

    font-weight: 500;

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


/* =========================================================
   RESULT CARDS
========================================================= */

.quiz-result-grid {
    margin-top: 45px;

    display: grid;

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

    gap: 18px;
}

.quiz-result-card {
    position: relative;

    min-width: 0;

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

    background:
        rgba(255, 255, 255, 0.025);

    overflow: hidden;

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

.quiz-result-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(215, 186, 131, 0.45);

    background:
        rgba(255, 255, 255, 0.045);
}

.quiz-result-image {
    position: relative;

    height: 370px;

    overflow: hidden;

    background:
        #1a4445;
}

.quiz-result-photo {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.quiz-result-card:hover
.quiz-result-photo {
    transform:
        scale(1.06);
}

.quiz-result-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(15, 12, 9, 0.54)
        );

    pointer-events: none;
}

.quiz-match-badge {
    position: absolute;

    z-index: 3;

    right: 18px;
    bottom: 18px;

    min-width: 92px;

    padding:
        11px
        13px;

    display: flex;
    flex-direction: column;

    direction: ltr;

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

    background:
        rgba(20, 18, 15, 0.53);

    backdrop-filter:
        blur(12px);

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

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;

    color:
        rgba(248, 244, 237, 0.55);
}

.quiz-match-percent {
    margin-bottom: 4px;

    font-size: 22px;

    letter-spacing: -1px;

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

.quiz-result-content {
    min-height: 205px;

    padding:
        24px;
}

.quiz-result-rank {
    display: block;

    margin-bottom: 14px;

    font-size: 10px;

    color:
        var(--gold);
}

.quiz-result-name {
    font-size: 25px;

    font-weight: 500;

    letter-spacing: -1px;
}

.quiz-result-reason {
    margin-top: 15px;

    font-size: 12px;

    line-height: 2;

    color:
        rgba(248, 244, 237, 0.47);
}


/* =========================================================
   CLOSE MATCH
========================================================= */

.quiz-close-match {
    display: none;

    margin-top: 28px;

    padding:
        22px
        24px;

    align-items: center;

    gap: 18px;

    border:
        1px solid
        rgba(215, 186, 131, 0.20);

    background:
        rgba(185, 154, 103, 0.06);
}

.quiz-close-match span {
    font-size: 22px;

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

.quiz-close-match p {
    font-size: 12px;

    line-height: 1.9;

    color:
        rgba(248, 244, 237, 0.58);
}


/* =========================================================
   RESULT ACTIONS
========================================================= */

.quiz-result-actions {
    margin-top: 40px;

    display: flex;
    align-items: center;

    gap: 14px;
}

.quiz-view-products,
.quiz-restart-button {
    min-height: 50px;

    padding:
        13px
        22px;

    border-radius: 999px;

    font-size: 12px;

    cursor: pointer;

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

.quiz-view-products {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        var(--gold-light);

    color:
        #183f40;

    border:
        1px solid
        var(--gold-light);
}

.quiz-view-products:hover {
    transform:
        translateY(-3px);

    background:
        #efd39e;
}

.quiz-restart-button {
    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    background:
        transparent;

    color:
        rgba(248, 244, 237, 0.67);
}

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

    border-color:
        rgba(215, 186, 131, 0.52);

    color:
        var(--cream);
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee-section {
    position: relative;

    overflow: hidden;

    background:
        var(--dark);

    color:
        var(--cream);

    padding:
        42px 0;

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

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

.marquee-track {
    width: 100%;

    overflow: hidden;
}

.marquee-content {
    width:
        max-content;

    display: flex;
    align-items: center;

    gap: 34px;

    white-space:
        nowrap;

    direction: ltr;

    will-change:
        transform;
}

.marquee-content span {
    direction: rtl;

    font-size: clamp(
        44px,
        6vw,
        92px
    );

    line-height: 1;

    font-weight: 300;

    letter-spacing: -3px;
}

.marquee-content span:nth-of-type(5),
.marquee-content span:nth-of-type(10) {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    letter-spacing: -2px;
}

.marquee-content i {
    font-style: normal;

    font-size: 22px;

    color:
        var(--gold);

    opacity: 0.8;
}


/* =========================================================
   WHY
========================================================= */

.why-section {
    position: relative;

    min-height: 110vh;

    background:
        #eef3f1;

    padding:
        150px
        clamp(30px, 7vw, 110px);

    overflow: hidden;
}

.why-header {
    max-width: 1100px;

    margin-bottom: 90px;
}

.why-label {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 7px;

    opacity: 0.42;

    margin-bottom: 30px;
}

.why-header h2 {
    font-size: clamp(
        68px,
        9vw,
        145px
    );

    line-height: 0.98;

    font-weight: 400;

    letter-spacing: -5px;
}

.why-header h2 span {
    color:
        var(--gold);

    font-weight: 500;
}

.why-grid {
    display: grid;

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

    gap: 22px;
}

.why-card {
    position: relative;

    min-height: 430px;

    padding: 28px;

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

    background:
        rgba(255, 255, 255, 0.26);

    border:
        1px solid
        rgba(22, 19, 15, 0.12);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
}

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

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(185, 154, 103, 0.18),
            transparent 35%
        );

    opacity: 0;

    transition:
        opacity
        0.4s
        ease;
}

.why-card:hover {
    transform:
        translateY(-10px);

    background:
        var(--dark);

    color:
        var(--cream);

    box-shadow:
        0 30px 60px
        rgba(18, 61, 62, 0.12);
}

.why-card:hover::before {
    opacity: 1;
}

.why-card-top {
    position: relative;

    z-index: 2;

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

.why-card-top > span:first-child {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    opacity: 0.45;
}

.why-icon {
    font-size: 25px;

    color:
        var(--gold);
}

.why-card-content {
    position: relative;

    z-index: 2;
}

.why-card-content h3 {
    font-size: clamp(
        36px,
        4vw,
        60px
    );

    font-weight: 500;

    letter-spacing: -2px;

    margin-bottom: 24px;
}

.why-card-content p {
    max-width: 320px;

    font-size: 14px;

    line-height: 2.1;

    color:
        rgba(22, 19, 15, 0.58);

    transition:
        color
        0.4s
        ease;
}

.why-card:hover
.why-card-content p {
    color:
        rgba(248, 244, 237, 0.62);
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
    min-height: 95vh;

    background:
        #3a7778;

    color:
        var(--cream);

    display: grid;

    grid-template-columns:
        0.7fr
        1.3fr;

    align-items: center;

    gap: 80px;

    padding:
        140px
        clamp(30px, 7vw, 110px);

    overflow: hidden;
}

.about-small {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 7px;

    opacity: 0.45;
}

.about-content h2 {
    font-size: clamp(
        72px,
        10vw,
        160px
    );

    line-height: 0.95;

    font-weight: 300;

    letter-spacing: -6px;
}

.about-content h2 span {
    color:
        #d7ba83;

    font-weight: 500;
}

.about-content p {
    margin-top: 55px;

    max-width: 520px;

    font-size: 15px;

    line-height: 2.25;

    color:
        rgba(248, 244, 237, 0.62);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    position: relative;

    min-height: 100vh;

    background:
        #eef3f1;

    padding:
        140px
        clamp(30px, 8vw, 120px);

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

    overflow: hidden;
}

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

    position: absolute;

    width: 700px;
    height: 700px;

    left: -260px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185, 154, 103, 0.16),
            transparent 68%
        );

    pointer-events: none;
}

.contact-top {
    position: relative;

    z-index: 2;

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

    gap: 30px;

    margin-bottom: 50px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(22, 19, 15, 0.12);
}

.contact-label {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 7px;

    opacity: 0.42;
}

.contact-number {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 5px;

    color:
        var(--gold);
}

.contact-section h2 {
    position: relative;

    z-index: 2;

    max-width: 1100px;

    font-size: clamp(
        70px,
        10vw,
        160px
    );

    line-height: 0.98;

    font-weight: 400;

    letter-spacing: -6px;
}

.contact-section h2 span {
    color:
        var(--gold);

    font-weight: 500;
}

.contact-description {
    position: relative;

    z-index: 2;

    max-width: 520px;

    margin-top: 45px;

    font-size: 15px;

    line-height: 2.2;

    color:
        rgba(22, 19, 15, 0.56);
}

.contact-links {
    position: relative;

    z-index: 2;

    margin-top: 70px;

    display: grid;

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

    border-top:
        1px solid
        rgba(22, 19, 15, 0.14);
}

.contact-links a {
    min-height: 150px;

    padding:
        28px
        24px;

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

    border-left:
        1px solid
        rgba(22, 19, 15, 0.14);

    transition:
        background 0.4s ease,
        color 0.4s ease;
}

.contact-links a:last-child {
    border-left: 0;
}

.contact-links a span {
    font-size: clamp(
        25px,
        2.5vw,
        42px
    );

    font-weight: 500;

    letter-spacing: -1.5px;
}

.contact-links a small {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    opacity: 0.48;
}

.contact-links a:hover {
    background:
        var(--dark);

    color:
        var(--cream);
}

.contact-address {
    position: relative;

    z-index: 2;

    margin-top: 55px;

    padding-top: 30px;

    display: grid;

    grid-template-columns:
        180px
        1fr;

    gap: 40px;

    align-items: start;

    border-top:
        1px solid
        rgba(22, 19, 15, 0.14);
}

.contact-address span {
    font-size: 11px;

    font-weight: 600;

    color:
        var(--gold);
}

.contact-address p {
    max-width: 760px;

    font-size: clamp(
        18px,
        2vw,
        28px
    );

    line-height: 1.9;

    color:
        rgba(22, 19, 15, 0.80);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    min-height: 220px;

    background:
        var(--dark);

    color:
        var(--cream);

    padding:
        50px
        clamp(30px, 7vw, 110px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 50px;

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

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand strong {
    font-size: clamp(
        23px,
        2.5vw,
        36px
    );

    font-weight: 500;
}

.footer-brand span {
    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    margin-top: 8px;

    font-size: 7px;

    letter-spacing: 4px;

    color:
        rgba(248, 244, 237, 0.4);
}

.footer-center {
    display: flex;
    align-items: center;

    gap: 14px;

    font-size: 11px;

    color:
        rgba(248, 244, 237, 0.58);
}

.footer-center span:nth-child(2) {
    color:
        var(--gold);
}

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

    gap: 28px;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(248, 244, 237, 0.48);
}

.footer-end a {
    position: relative;

    color:
        var(--cream);

    transition:
        color
        0.3s
        ease;
}

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

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background:
        var(--gold);

    transition:
        width
        0.3s
        ease;
}

.footer-end a:hover {
    color:
        var(--gold);
}

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


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .quiz-question.active {
        grid-template-columns:
            1fr;

        gap: 45px;
    }

    .quiz-question-copy {
        max-width: 700px;
    }

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

    .quiz-result-card:last-child {
        grid-column:
            1 / -1;

        max-width: 600px;
    }
}


@media (max-width: 900px) {

    .preloader-inner {
        width:
            calc(100% - 40px);
    }

    .preloader-top {
        align-items:
            flex-start;
    }

    .preloader-brand {
        max-width:
            250px;
    }

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

        top: 12px;

        height: 64px;
    }

    .nav-menu,
    .nav-contact {
        display:
            none;
    }

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

    .nav-logo {
        min-width:
            auto;
    }

    .hero {
        padding:
            25px;
    }

    .hero::before {
        inset:
            10px;
    }

    .hero-content::before,
    .hero-content::after {
        opacity:
            0.45;
    }

    .kicker {
        gap:
            12px;

        letter-spacing:
            5px;
    }

    .kicker::before,
    .kicker::after {
        width:
            35px;
    }

    h1 {
        font-size: clamp(
            72px,
            21vw,
            118px
        );

        letter-spacing:
            -5px;
    }

    .hero-text {
        font-size:
            14px;

        margin-top:
            34px;
    }

    .carpet-stage {
        width:
            310px;

        height:
            230px;
    }

    .carpet-wrapper {
        width:
            250px;
    }

    .farshineh-section,
    .grip-section,
    .about-section {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .farshineh-section,
    .grip-section {
        padding-top:
            120px;
    }

    .farshineh-image-wrap,
    .grip-visual {
        height:
            500px;
    }

    .image-circle {
        width:
            300px;

        height:
            300px;
    }

    .grip-circle-one {
        width:
            340px;

        height:
            340px;
    }

    .grip-circle-two {
        width:
            220px;

        height:
            220px;
    }

    .grip-card {
        left:
            25px;

        bottom:
            25px;
    }

    .gallery-track {
        grid-template-columns:
            1fr;
    }

    .gallery-card {
        height:
            460px;
    }

    .rug-finder-section {
        padding-top:
            100px;

        padding-bottom:
            100px;
    }

    .quiz-intro {
        min-height:
            680px;
    }

    .quiz-intro-title h2 {
        letter-spacing:
            -4px;
    }

    .quiz-app {
        padding:
            28px
            22px
            55px;
    }

    .quiz-header {
        grid-template-columns:
            auto
            1fr;

        gap:
            18px;
    }

    .quiz-back-button {
        grid-column:
            1 / -1;

        justify-self:
            start;
    }

    .quiz-question {
        min-height:
            auto;

        padding-top:
            50px;
    }

    .quiz-options,
    .color-options,
    .room-options,
    .mood-options,
    .dislike-options {
        grid-template-columns:
            1fr;
    }

    .statement-options,
    .pattern-options {
        grid-template-columns:
            1fr;
    }

    .statement-options
    .quiz-option,
    .pattern-option {
        min-height:
            190px;
    }

    .quiz-result-grid {
        grid-template-columns:
            1fr;
    }

    .quiz-result-card:last-child {
        grid-column:
            auto;

        max-width:
            none;
    }

    .quiz-result-image {
        height:
            440px;
    }

    .quiz-result-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .quiz-view-products,
    .quiz-restart-button {
        width:
            100%;
    }

    .marquee-section {
        padding:
            30px 0;
    }

    .marquee-content {
        gap:
            24px;
    }

    .why-section {
        min-height:
            auto;
    }

    .why-header {
        margin-bottom:
            55px;
    }

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

    .why-card {
        min-height:
            340px;
    }

    .contact-links {
        grid-template-columns:
            1fr;
    }

    .contact-links a {
        min-height:
            120px;

        border-left:
            0;

        border-bottom:
            1px solid
            rgba(22, 19, 15, 0.14);
    }

    .contact-links a:last-child {
        border-bottom:
            0;
    }

    .contact-address {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

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

        gap:
            35px;
    }

    .footer-center {
        justify-content:
            flex-start;
    }

    .footer-end {
        justify-content:
            flex-start;
    }
}


@media (max-width: 560px) {

    .preloader-top {
        gap:
            15px;
    }

    .preloader-percent {
        min-width:
            65px;
    }

    .preloader-bottom {
        font-size:
            7px;

        letter-spacing:
            1px;
    }

    .hero-content::before,
    .hero-content::after {
        display:
            none;
    }

    .farshineh-section,
    .grip-section,
    .gallery-section,
    .rug-finder-section,
    .why-section,
    .about-section,
    .contact-section {
        padding-left:
            20px;

        padding-right:
            20px;
    }

    .farshineh-image-wrap,
    .grip-visual {
        height:
            420px;
    }

    .gallery-card {
        height:
            420px;
    }

    .image-overlay-text {
        font-size:
            60px;
    }

    .grip-word {
        font-size:
            75px;
    }

    .dark-section h2,
    .farshineh-content h2,
    .grip-content h2,
    .gallery-header h2,
    .why-header h2,
    .about-content h2,
    .contact-section h2 {
        letter-spacing:
            -3px;
    }

    .quiz-intro {
        min-height:
            620px;

        padding:
            70px
            18px;
    }

    .quiz-intro::after {
        inset:
            10px;
    }

    .quiz-eyebrow {
        font-size:
            7px;

        letter-spacing:
            4px;

        margin-bottom:
            35px;
    }

    .quiz-intro-small {
        font-size:
            23px;
    }

    .quiz-intro-title h2 {
        font-size:
            clamp(
                48px,
                15vw,
                70px
            );

        line-height:
            1.08;

        letter-spacing:
            -3px;
    }

    .quiz-intro-fun {
        font-size:
            30px;
    }

    .quiz-intro-description {
        font-size:
            13px;

        line-height:
            2.1;
    }

    .quiz-start-button {
        width:
            100%;

        min-width:
            0;

        font-size:
            12px;
    }

    .quiz-app {
        padding:
            22px
            15px
            45px;
    }

    .quiz-header {
        padding-bottom:
            22px;
    }

    .quiz-question {
        padding-top:
            38px;
    }

    .quiz-question-copy h3 {
        font-size:
            39px;

        letter-spacing:
            -2px;
    }

    .quiz-question-copy > p:last-child {
        font-size:
            12px;
    }

    .quiz-option {
        min-height:
            135px;

        padding:
            20px;
    }

    .color-option {
        min-height:
            170px;
    }

    .color-palette {
        top:
            18px;

        right:
            18px;
    }

    .color-palette i {
        width:
            27px;

        height:
            27px;
    }

    .quiz-option strong {
        font-size:
            18px;
    }

    .quiz-option small {
        font-size:
            10px;
    }

    .pattern-preview {
        height:
            90px;
    }

    .pattern-option {
        min-height:
            220px;
    }

    .quiz-analysis {
        min-height:
            560px;
    }

    .quiz-analysis-orbit {
        width:
            165px;

        height:
            165px;
    }

    .quiz-analysis h3 {
        font-size:
            39px;
    }

    .quiz-result-heading h3 {
        font-size:
            58px;

        letter-spacing:
            -3px;
    }

    .quiz-result-personality {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .quiz-result-image {
        height:
            360px;
    }

    .contact-description {
        font-size:
            14px;
    }

    .contact-links {
        margin-top:
            50px;
    }

    .contact-address p {
        font-size:
            18px;

        line-height:
            2;
    }

    .footer {
        padding-left:
            20px;

        padding-right:
            20px;
    }
}