/* ═══════════════════════════════════════════

        RESET & ROOT

      ═══════════════════════════════════════════ */

*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --ink: #0a0a0f;

    /* --ink2: #14141c; */

    --ink2: #14141c;

    /* --ink3: #1e1e2a; */

    --ink3: #1e1e2a;

    --mid: #6b7280;

    --light: #9ca3af;

    --soft: #f6f3ee;

    --soft2: #ede9e2;

    --white: #ffffff;

    --gold: #c8973a;

    --gold2: #e2b96a;

    --gold3: #f5d98a;

    --success: #108132;

    --successbg: #b2daaf;

    --border: rgba(0, 0, 0, 0.09);

    --border-light: rgba(255, 255, 255, 0.08);

    --radius: 3px;

    --topbar-h: 36px;

    --nav-h: 66px;

    --total-h: 102px;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

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

    background: var(--white);

    color: var(--ink);

    overflow-x: hidden;

    line-height: 1.6;

}



img {

    display: block;

    max-width: 100%;

}



a {

    text-decoration: none;

    color: inherit;

}



button {

    cursor: pointer;

    border: none;

    background: none;

    font-family: inherit;

}



::-webkit-scrollbar {

    width: 3px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

    background: var(--gold);

    border-radius: 2px;

}



/* ═══════════════════════════════════════════

   TOPBAR

═══════════════════════════════════════════ */

#topbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    height: var(--topbar-h);

    background: var(--ink2);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5%;

    transition: transform 0.35s ease;

}



#topbar.hidden {

    transform: translateY(-100%);

}



.tb-left {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.tb-right {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.tb-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.68rem;

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

    letter-spacing: 0.02em;

    transition: color 0.2s;

    white-space: nowrap;

}



.tb-link svg {

    width: 12px;

    height: 12px;

    stroke: currentColor;

    fill: none;

    stroke-width: 2;

    flex-shrink: 0;

}



.tb-link:hover {

    color: var(--gold);

}



.tb-wa svg {

    stroke: none;

    fill: currentColor;

}



.tb-wa:hover {

    color: #25d366 !important;

}



.tb-sep {

    width: 1px;

    height: 12px;

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

}



.soc {

    width: 26px;

    height: 26px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    transition:

        background 0.25s,

        transform 0.2s;

}



.soc svg {

    width: 12px;

    height: 12px;

    fill: rgba(255, 255, 255, 0.4);

    transition: fill 0.25s;

}



.soc:hover {

    transform: translateY(-1px);

}



.soc-ig:hover {

    background: radial-gradient(circle at 30% 110%,

            #fd5 5%,

            #f80 45%,

            #c13584 60%,

            #833ab4 90%);

}



.soc-ig:hover svg {

    fill: #fff;

}



.soc-fb:hover {

    background: #1877f2;

}



.soc-fb:hover svg {

    fill: #fff;

}



.soc-li:hover {

    background: #0a66c2;

}



.soc-li:hover svg {

    fill: #fff;

}



.soc-yt:hover {

    background: #ff0000;

}



.soc-yt:hover svg {

    fill: #fff;

}



@media (max-width: 580px) {

    .tb-link span {

        display: none;

    }



    .tb-link svg {

        width: 14px;

        height: 14px;

    }



    .tb-sep {

        display: none;

    }



    #topbar {

        padding: 0 4%;

    }



    .tb-left {

        gap: 0.8rem;

    }

}



/* ═══════════════════════════════════════════

   NAVBAR

═══════════════════════════════════════════ */

#nav {

    position: fixed;

    top: var(--topbar-h);

    left: 0;

    right: 0;

    z-index: 999;

    height: var(--nav-h);

    padding: 0 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    backdrop-filter: blur(20px);

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

    transition:

        top 0.35s ease,

        box-shadow 0.3s ease;

}



#nav.top-gone {

    top: 0;

}



#nav.scrolled {

    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);

}



.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}



.logo-mark {

    /* width: 36px;

      height: 36px;

      background: var(--ink); */

    /* padding: 7px 12px;

    width: min-content; */

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.logo-mark svg {

    width: 44px;

    stroke: var(--gold);

    fill: none;

    stroke-width: 1.4;

}



.logo-text .ln {

    font-family: "Playfair Display", serif;

    font-size: 1.12rem;

    font-weight: 600;

    color: var(--ink);

    display: block;

    line-height: 1.1;

}



.logo-text .ls {

    font-size: 0.56rem;

    font-weight: 400;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color: var(--mid);

}



.nav-menu {

    display: flex;

    align-items: center;

    gap: 2rem;

    list-style: none;

}



.nav-menu a {

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--mid);

    transition: color 0.2s;

    position: relative;

    padding-bottom: 2px;

}



.nav-menu a::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: width 0.25s;

}



.nav-menu a:hover,

.nav-menu a.active {

    color: var(--ink);

}



.nav-menu a:hover::after,

.nav-menu a.active::after {

    width: 100%;

}



.nav-cta {

    padding: 0.5rem 1.4rem;

    background: var(--ink);

    color: var(--white) !important;

    border-radius: var(--radius);

    font-size: 0.78rem !important;

    font-weight: 600 !important;

    transition: background 0.2s !important;

    white-space: nowrap;

}



.nav-cta::after {

    display: none !important;

}



.nav-cta:hover {

    background: var(--gold) !important;

    color: var(--ink) !important;

}



.burger {

    display: none;

    flex-direction: column;

    gap: 5px;

    padding: 5px;

    background: none;

    border: none;

}



.burger span {

    display: block;

    width: 22px;

    height: 2px;

    background: var(--ink);

    border-radius: 1px;

    transition: all 0.3s;

    transform-origin: center;

}



/* ═══════════════════════════════════════════

   MOBILE MENU

═══════════════════════════════════════════ */

.mob-menu {

    position: fixed;

    inset: 0;

    z-index: 998;

    background: var(--white);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2rem;

    transform: translateX(100%);

    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);

}



.mob-menu.open {

    transform: translateX(0);

}



.mob-menu a {

    font-family: "Playfair Display", serif;

    font-size: 2.2rem;

    font-weight: 400;

    color: var(--ink);

    transition: color 0.2s;

}



.mob-menu a:hover {

    color: var(--gold);

}



.mob-social {

    display: flex;

    gap: 0.8rem;

    margin-top: 1rem;

}



.mob-social .soc {

    width: 36px;

    height: 36px;

    background: var(--soft);

}



.mob-social .soc svg {

    width: 15px;

    height: 15px;

    fill: var(--mid);

}



/* ═══════════════════════════════════════════

   HERO CAROUSEL

═══════════════════════════════════════════ */

#home {

    position: relative;

    height: 100svh;

    overflow: hidden;

}



.hero-track {

    position: absolute;

    inset: 0;

    display: flex;

    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);

}



.hs {

    min-width: 100%;

    height: 100%;

    position: relative;

   /* flex-shrink: 0;*/

}



.hs-bg {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    /* transform: scale(1.06);

    transition: transform 8s ease; */

}



.hs.act .hs-bg {

    transform: scale(1);

}



.hs-ov {

    position: absolute;

    inset: 0;

    background: linear-gradient(115deg,

            rgba(10, 10, 15, 0.82) 0%,

            rgba(10, 10, 15, 0.48) 50%,

            rgba(10, 10, 15, 0.1) 100%);

}



.hs-body {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    height: 100%;

    padding: 0 7%;

    padding-top: var(--total-h);

}



.hs-inner {

    max-width: 660px;

}



.hs-chip {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(200, 151, 58, 0.14);

    border: 1px solid rgba(200, 151, 58, 0.38);

    padding: 5px 14px;

    border-radius: 100px;

    font-size: 0.65rem;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color: var(--gold3);

    margin-bottom: 1.5rem;

    opacity: 0;

    transform: translateY(14px);

    transition:

        opacity 0.6s 0.25s,

        transform 0.6s 0.25s;

}



.hs.act .hs-chip {

    opacity: 1;

    transform: none;

}



.hs-h1 {

    font-family: "Playfair Display", serif;

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

    font-weight: 500;

    line-height: 1.06;

    color: #fff;

    margin-bottom: 1.2rem;

    opacity: 0;

    transform: translateY(24px);

    transition:

        opacity 0.75s 0.38s,

        transform 0.75s 0.38s;

}



.hs.act .hs-h1 {

    opacity: 1;

    transform: none;

}



.hs-sub {

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

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

    line-height: 1.8;

    max-width: 460px;

    margin-bottom: 2.2rem;

    font-weight: 300;

    opacity: 0;

    transform: translateY(16px);

    transition:

        opacity 0.7s 0.52s,

        transform 0.7s 0.52s;

}



.hs.act .hs-sub {

    opacity: 1;

    transform: none;

}



.hs-btns {

    display: flex;

    gap: 0.9rem;

    flex-wrap: wrap;

    opacity: 0;

    transform: translateY(12px);

    transition:

        opacity 0.7s 0.66s,

        transform 0.7s 0.66s;

}



.hs.act .hs-btns {

    opacity: 1;

    transform: none;

}



.btn-white {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 0.82rem 1.8rem;

    background: #fff;

    color: var(--ink);

    font-size: 0.82rem;

    font-weight: 600;

    border-radius: var(--radius);

    transition:

        background 0.22s,

        color 0.22s;

}



.btn-white:hover {

    background: var(--gold);

    color: #fff;

}



.btn-ghost {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 0.82rem 1.8rem;

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

    color: #fff;

    font-size: 0.82rem;

    font-weight: 400;

    border-radius: var(--radius);

    transition:

        background 0.22s,

        border-color 0.22s;

}



.btn-ghost:hover {

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

    border-color: rgba(255, 255, 255, 0.7);

}



/* Hero controls */

.hero-bottom {

    position: absolute;

    bottom: 2.2rem;

    left: 0;

    right: 0;

    padding: 0 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 3;

}



.hero-dots {

    display: flex;

    gap: 6px;

}



.hdot {

    width: 22px;

    height: 3px;

    border-radius: 2px;

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

    cursor: pointer;

    transition: all 0.3s;

}



.hdot.act {

    background: var(--gold);

    width: 38px;

}



.hero-arrows {

    display: flex;

    gap: 0.5rem;

}



.harr {

    width: 42px;

    height: 42px;

    border-radius: var(--radius);

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

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

    backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 0.95rem;

    transition:

        background 0.2s,

        border-color 0.2s;

}



.harr:hover {

    background: var(--gold);

    border-color: var(--gold);

}



/* Hero progress bar */

.hero-progress {

    position: absolute;

    bottom: 0;

    left: 0;

    height: 2px;

    background: var(--gold);

    animation: hprog 5.5s linear infinite;

    z-index: 3;

}



@keyframes hprog {

    0% {

        width: 0;

    }



    100% {

        width: 100%;

    }

}



/* ═══════════════════════════════════════════

   SECTION UTILITIES

═══════════════════════════════════════════ */

.sec {

    padding: 6rem 5%;

}



.si {

    max-width: 1200px;

    margin: 0 auto;

}



.ey {

    font-size: 0.65rem;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--gold);

    font-weight: 600;

    margin-bottom: 0.7rem;

}



.sh {

    font-family: "Playfair Display", serif;

    font-size: clamp(1.8rem, 2.9vw, 2.8rem);

    font-weight: 500;

    line-height: 1.15;

    color: var(--ink);

}



.sh em {

    color: var(--gold);

    font-style: normal;

}



.sdesc {

    font-size: 0.92rem;

    color: var(--mid);

    line-height: 1.82;

    margin-top: 0.9rem;

}



.sec-divider {

    width: 48px;

    height: 2px;

    background: linear-gradient(to right, var(--gold), var(--gold2));

    margin: 1.2rem 0;

}



/* Reveal animations */

.rv {

    opacity: 0;

    transform: translateY(28px);

    transition:

        opacity 0.65s ease,

        transform 0.65s ease;

}



.rv.in {

    opacity: 1;

    transform: none;

}



.rv[data-d="1"] {

    transition-delay: 0.1s;

}



.rv[data-d="2"] {

    transition-delay: 0.18s;

}



.rv[data-d="3"] {

    transition-delay: 0.26s;

}



.rv[data-d="4"] {

    transition-delay: 0.34s;

}



.rv[data-d="5"] {

    transition-delay: 0.42s;

}



/* Buttons */

.btn-dark {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0.85rem 2rem;

    background: var(--ink);

    color: #fff;

    font-size: 0.82rem;

    font-weight: 600;

    border-radius: var(--radius);

    transition:

        background 0.22s,

        color 0.22s;

}



.btn-dark:hover {

    background: var(--gold);

    color: var(--ink);

}



.btn-gold {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0.85rem 2rem;

    background: var(--gold);

    color: var(--ink);

    font-size: 0.82rem;

    font-weight: 600;

    border-radius: var(--radius);

    transition:

        background 0.22s,

        color 0.22s;

}



.btn-gold:hover {

    background: var(--gold2);

}



.btn-outline-dark {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 0.82rem 1.9rem;

    border: 1.5px solid var(--ink);

    color: var(--ink);

    font-size: 0.82rem;

    font-weight: 500;

    border-radius: var(--radius);

    transition:

        background 0.22s,

        color 0.22s;

}



.btn-outline-dark:hover {

    background: var(--ink);

    color: #fff;

}



/* ═══════════════════════════════════════════

   STATS STRIP

═══════════════════════════════════════════ */

#stats {

    background: var(--ink);

    padding: 3rem 5%;

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

}



.stats-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 1px;

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

}



.stat-box {

    background: var(--ink);

    padding: 2rem 2rem;

    text-align: center;

    transition: background 0.3s;

}



.stat-box:hover {

    background: rgba(200, 151, 58, 0.08);

}



.stat-n {

    font-family: "Playfair Display", serif;

    font-size: 2.8rem;

    font-weight: 700;

    color: var(--gold);

    line-height: 1;

    margin-bottom: 0.4rem;

}



.stat-l {

    font-size: 0.72rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}



/* ═══════════════════════════════════════════

   ABOUT

═══════════════════════════════════════════ */

#about {

    background: var(--soft);

}



.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5.5rem;

    align-items: center;

}



.about-img-wrap {

    position: relative;

}



.about-img {

    width: 100%;

    aspect-ratio: 4/5;

    overflow: hidden;

    background: var(--ink3);

    position: relative;

}



.about-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s ease;

}



.about-img:hover img {

    transform: scale(1.04);

}



.about-img::before {

    content: "";

    position: absolute;

    top: -16px;

    left: -16px;

    right: 16px;

    bottom: 16px;

    border: 1px solid rgba(200, 151, 58, 0.3);

    z-index: -1;

}



.about-badge {

    position: absolute;

    bottom: -1.5rem;

    right: -1.5rem;

    background: var(--ink);

    padding: 1.5rem;

    width: 130px;

    z-index: 2;

}



.ab-n {

    font-family: "Playfair Display", serif;

    font-size: 2.4rem;

    font-weight: 700;

    color: var(--gold);

    line-height: 1;

}



.ab-l {

    font-size: 0.63rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

    margin-top: 3px;

}



.about-copy .sdesc {

    max-width: 100%;

}



.about-copy .sdesc+.sdesc {

    margin-top: 0.85rem;

}



.about-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-top: 1.6rem;

}



.atag {

    padding: 0.35rem 0.9rem;

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

    font-size: 0.72rem;

    color: var(--mid);

    border-radius: var(--radius);

    background: #fff;

}



.about-values {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1px;

    background: var(--border);

    margin-top: 2.2rem;

}



.aval {

    background: var(--white);

    padding: 1.2rem 1.4rem;

    transition: background 0.3s;

}



.aval:hover {

    background: var(--soft2);

}



.aval-icon {

    width: 34px;

    height: 34px;

    background: var(--ink);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 0.8rem;

}



.aval-icon svg {

    width: 16px;

    height: 16px;

    stroke: var(--gold);

    fill: none;

    stroke-width: 1.6;

}



.aval-t {

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--ink);

    margin-bottom: 0.3rem;

}



.aval-d {

    font-size: 0.76rem;

    color: var(--mid);

    line-height: 1.65;

}



/* ═══════════════════════════════════════════

   PRODUCTS

═══════════════════════════════════════════ */

#products {

    background: var(--white);

}



.prod-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 1.5rem;

    margin-bottom: 1.2rem;

}



.prod-grid {

    display: grid;

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

    gap: 1.5px;

    background: var(--border);

}



/* First card spans 2 columns on desktop */

.pc-wide {

    grid-column: span 2;

}



.pc {

    background: var(--white);

    position: relative;

    overflow: hidden;

    cursor: default;

    transition: background 0.3s;

}



.pc:hover {

    background: var(--soft);

}



.pc::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(to right, var(--gold), var(--gold2));

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);

}



.pc:hover::after {

    transform: scaleX(1);

}



.pc-img {

    width: 100%;

    overflow: hidden;

    background: var(--ink3);

    position: relative;

}



.pc-wide .pc-img {

    aspect-ratio: 16/9;

}



.pc:not(.pc-wide) .pc-img {

    aspect-ratio: 4/3;

}



.pc-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.65s ease;

}



.pc:hover .pc-img img {

    transform: scale(1.05);

}



.pc-img-ph {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.8rem;

    background: linear-gradient(145deg, #1c1c28, #2a2a3a);

}



.pc-img-ph svg {

    width: 32px;

    height: 32px;

    stroke: rgba(200, 151, 58, 0.4);

    fill: none;

    stroke-width: 1.2;

}



.pc-img-ph span {

    font-size: 0.68rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}



.pc-body {

    padding: 0.6rem 1.8rem 1rem;

}



.pc-num {

    font-family: "Playfair Display", serif;

    font-size: 2.8rem;

    font-weight: 700;

    color: rgba(0, 0, 0, 0.04);

    line-height: 1;

    margin-bottom: 0.2rem;

    user-select: none;

}



.pc-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 1rem;

}



.pc-ico {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    background: var(--ink);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.3s;

}



.pc:hover .pc-ico {

    background: var(--gold);

}



.pc-ico svg {

    width: 18px;

    height: 18px;

    stroke: #fff;

    fill: none;

    stroke-width: 1.5;

}



.pc-t {

    font-family: "Playfair Display", serif;

    font-size: 1.1rem;

    font-weight: 500;

    color: var(--ink);

    margin: 0rem 0 0.5rem;

}



.pc-d {

    font-size: 0.82rem;

    color: var(--mid);

    line-height: 1.74;

}



.pc-tag {

    display: inline-block;

    margin-top: 0.9rem;

    padding: 0.28rem 0.75rem;

    background: var(--soft);

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

    font-size: 0.65rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--mid);

    border-radius: var(--radius);

}



/* ═══════════════════════════════════════════

   WHY RITZLINE

═══════════════════════════════════════════ */

#why {

    background: var(--ink);

    padding: 6rem 5%;

    position: relative;

    overflow: hidden;

}



#why::before {

    content: "";

    position: absolute;

    top: -40%;

    right: -10%;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: radial-gradient(circle,

            rgba(200, 151, 58, 0.06) 0%,

            transparent 70%);

    pointer-events: none;

}



#why .sh {

    color: #fff;

}



#why .ey {

    color: var(--gold);

}



#why .sdesc {

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

}



.why-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5rem;

    align-items: center;

    margin-top: 3.5rem;

}



.why-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5px;

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

}



.wf {

    background: var(--ink);

    padding: 1.8rem 1.6rem;

    transition: background 0.3s;

}



.wf:hover {

    background: rgba(200, 151, 58, 0.07);

}



.wf-icon {

    width: 42px;

    height: 42px;

    background: rgba(200, 151, 58, 0.12);

    border: 1px solid rgba(200, 151, 58, 0.2);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1rem;

}



.wf-icon svg {

    width: 18px;

    height: 18px;

    stroke: var(--gold);

    fill: none;

    stroke-width: 1.5;

}



.wf-t {

    font-size: 0.88rem;

    font-weight: 600;

    color: #fff;

    margin-bottom: 0.4rem;

}



.wf-d {

    font-size: 0.78rem;

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

    line-height: 1.7;

}



.why-img {

    position: relative;

}



.why-img-main {

    width: 100%;

    aspect-ratio: 4/5;

    overflow: hidden;

    background: var(--ink3);

}



.why-img-main img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.why-cert {

    position: absolute;

    bottom: -1.5rem;

    left: -1.5rem;

    background: var(--gold);

    padding: 1.4rem 1.6rem;

    max-width: 200px;

}



.wc-n {

    font-family: "Playfair Display", serif;

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--ink);

    line-height: 1;

}



.wc-l {

    font-size: 0.7rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(0, 0, 0, 0.6);

    margin-top: 4px;

}



/* ═══════════════════════════════════════════

   BRANDS

═══════════════════════════════════════════ */

#brands {

    background: var(--ink2);

    overflow: hidden;

    padding: 5.5rem 0;

}



.brands-top {

    padding: 0 5%;

    max-width: 1200px;

    margin: 0 auto 3rem;

}



.brand-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 1.5rem;

}



#brands .sh {

    color: #fff;

}



#brands .ey {

    color: var(--gold);

}



#brands .sdesc {

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

}



.brand-runner {

    overflow: hidden;

    position: relative;

    padding: 1.5px 0;

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

}



.brand-runner::before,

.brand-runner::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 120px;

    z-index: 2;

    pointer-events: none;

}



.brand-runner::before {

    left: 0;

    background: linear-gradient(to right, var(--ink2), transparent);

}



.brand-runner::after {

    right: 0;

    background: linear-gradient(to left, var(--ink2), transparent);

}



.brand-runner+.brand-runner {

    margin-top: 1.5px;

}



.brow {

    display: flex;

    width: max-content;

    animation: mq 38s linear infinite;

}



.brow.rev {

    animation-direction: reverse;

}



.brow:hover {

    animation-play-state: paused;

}



@keyframes mq {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.bi {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 2.5rem;

    min-width: 160px;

    border-right: 1px solid rgba(255, 255, 255, 0.05);

    flex-shrink: 0;

    transition: background 0.3s;

}



.bi:hover {

    background: rgba(200, 151, 58, 0.07);

}



.bi img {

    /* height: 34px; */



    width: auto;

    max-width: 150px;

    object-fit: contain;

    filter: brightness(0) invert(1);

    opacity: 0.28;

    transition:

        opacity 0.3s,

        filter 0.3s;

}



.bi:hover img {

    opacity: 0.75;

    filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg);

}



.bi-t {

    font-family: "Playfair Display", serif;

    font-size: 0.92rem;

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

    white-space: nowrap;

    letter-spacing: 0.04em;

    transition: color 0.3s;

}



.bi:hover .bi-t {

    color: var(--gold);

}



.brand-note {

    text-align: center;

    margin-top: 2.2rem;

    padding: 0 5%;

    font-size: 0.66rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

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

}



/* Start - affiliates */



#affiliatess {

    background: var(--ink2);

    overflow: hidden;

    padding: 5.5rem 0;

}



.affiliatess-top {

    padding: 0 5%;

    max-width: 1200px;

    margin: 0 auto 3rem;

}



.affiliates-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 1.5rem;

}



#affiliatess .sh {

    color: #fff;

}



#affiliatess .ey {

    color: var(--gold);

}



#affiliatess .sdesc {

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

}



.affiliates-runner {

    overflow: hidden;

    position: relative;

    padding: 1.5px 0;

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

}



.affiliates-runner::before,

.affiliates-runner::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    width: 120px;

    z-index: 2;

    pointer-events: none;

}



.affiliates-runner::before {

    left: 0;

    background: linear-gradient(to right, var(--ink2), transparent);

}



.affiliates-runner::after {

    right: 0;

    background: linear-gradient(to left, var(--ink2), transparent);

}



.affiliates-runner+.affiliates-runner {

    margin-top: 1.5px;

}



.aicus {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1rem 2.5rem;

    min-width: 160px;

    border-right: 1px solid rgba(255, 255, 255, 0.05);

    flex-shrink: 0;

    transition: background 0.3s;

}



.aicus:hover {

    background: rgba(200, 151, 58, 0.07);

}



.aicus img {

    /* height: 34px; */



    width: auto;

    max-width: 150px;

    object-fit: contain;

    /* filter: brightness(0) invert(1); */

    /* opacity: 0.28; */

    transition:

        opacity 0.3s,

        filter 0.3s;

}



.aicus:hover img {

    opacity: 0.75;

    /* filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg); */

}



.aicus-t {

    font-family: "Playfair Display", serif;

    font-size: 0.92rem;

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

    white-space: nowrap;

    letter-spacing: 0.04em;

    transition: color 0.3s;

}



.aicus:hover .aicus-t {

    color: var(--gold);

}



.affiliates-note {

    text-align: center;

    margin-top: 2.2rem;

    padding: 0 5%;

    font-size: 0.66rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

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

}



/* End - affiliates */





/* ═══════════════════════════════════════════

   TESTIMONIALS

═══════════════════════════════════════════ */

#testimonials {

    background: var(--soft);

    padding: 6rem 5%;

}



.testi-header {

    text-align: center;

    max-width: 580px;

    margin: 0 auto 3.5rem;

}



.testi-header .sdesc {

    text-align: center;

}



.testi-grid {

    display: grid;

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

    gap: 1.5px;

    background: var(--border);

}



.tc {

    background: var(--white);

    padding: 2.2rem;

    position: relative;

    transition: background 0.3s;

}



.tc:hover {

    background: var(--soft2);

}



.tc-stars {

    display: flex;

    gap: 3px;

    margin-bottom: 1.2rem;

}



.tc-stars svg {

    width: 14px;

    height: 14px;

    fill: var(--gold);

}



.tc-quote {

    font-family: "Playfair Display", serif;

    font-size: 1.05rem;

    font-style: italic;

    color: var(--ink);

    line-height: 1.7;

    margin-bottom: 1.5rem;

}



.tc-author {

    display: flex;

    align-items: center;

    gap: 0.9rem;

}



.tc-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: var(--ink);

    overflow: hidden;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.tc-avatar svg {

    width: 20px;

    height: 20px;

    stroke: var(--gold);

    fill: none;

    stroke-width: 1.5;

}



.tc-name {

    font-size: 0.84rem;

    font-weight: 600;

    color: var(--ink);

}



.tc-role {

    font-size: 0.73rem;

    color: var(--mid);

}



/* ═══════════════════════════════════════════

   CTA BANNER

═══════════════════════════════════════════ */

#cta-banner {

    background: var(--ink);

    padding: 5rem 5%;

    position: relative;

    overflow: hidden;

    text-align: center;

}



#cta-banner::before {

    content: "";

    position: absolute;

    top: -50%;

    left: 50%;

    transform: translateX(-50%);

    width: 800px;

    height: 800px;

    border-radius: 50%;

    background: radial-gradient(circle,

            rgba(200, 151, 58, 0.07) 0%,

            transparent 65%);

    pointer-events: none;

}



.cta-inner {

    position: relative;

    z-index: 1;

    max-width: 700px;

    margin: 0 auto;

}



.cta-inner .sh {

    color: #fff;

    margin-bottom: 0.8rem;

}



.cta-inner .sdesc {

    text-align: center;

    max-width: 500px;

    margin: 0 auto 2.5rem;

}



.cta-btns {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



/* ═══════════════════════════════════════════

   CONTACT

═══════════════════════════════════════════ */

#contact {

    background: var(--white);

    /* padding: 6rem 5%; */

}



.contact-header {

    text-align: center;

    max-width: 580px;

    margin: 0 auto 3.5rem;

}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1.4fr;

    gap: 4.5rem;

    align-items: start;

    max-width: 1200px;

    margin: 0 auto;

}



/* Info panel */

.c-info {

    background: var(--ink);

    padding: 2.5rem;

    border-radius: var(--radius);

    position: sticky;

    top: calc(var(--total-h) + 1rem);

}



.ci-logo {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 1.5rem;

    padding-bottom: 1.5rem;

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

}



.ci-logo .logo-mark {

    width: 30px;

    height: 30px;

}



/* .ci-logo .logo-mark svg {

    width: 16px;

    height: 16px;

} */



.ci-logo .ln {

    font-size: 0.95rem;

}



.ci-title {

    font-family: "Playfair Display", serif;

    font-size: 1.5rem;

    font-weight: 500;

    color: #fff;

    margin-bottom: 0.35rem;

}



.ci-sub {

    font-size: 0.82rem;

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

    line-height: 1.72;

    margin-bottom: 1.8rem;

}



.ci-sep {

    height: 1px;

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

    margin: 1.4rem 0;

}



.ci-row {

    display: flex;

    gap: 0.9rem;

    align-items: flex-start;

    margin-bottom: 1.3rem;

}



.ci-ico {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    background: rgba(200, 151, 58, 0.1);

    border: 1px solid rgba(200, 151, 58, 0.2);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

}



.ci-ico svg {

    width: 14px;

    height: 14px;

    stroke: var(--gold);

    fill: none;

    stroke-width: 1.8;

}



.ci-lbl {

    font-size: 0.6rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: var(--gold);

    margin-bottom: 2px;

}



.ci-val {

    font-size: 0.82rem;

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

    line-height: 1.6;

}



.ci-val a {

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

    transition: color 0.2s;

}



.ci-val a:hover {

    color: var(--gold);

}



.ci-socials {

    display: flex;

    gap: 0.5rem;

    margin-top: 1.5rem;

}



.ci-socials .soc {

    width: 32px;

    height: 32px;

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

}



.ci-socials .soc svg {

    width: 13px;

    height: 13px;

    fill: rgba(255, 255, 255, 0.4);

}



/* Form panel */

.c-form-wrap {

    background: var(--soft);

    padding: 2.5rem;

    border-radius: var(--radius);

}



.cf-h {

    font-family: "Playfair Display", serif;

    font-size: 1.5rem;

    font-weight: 500;

    color: var(--ink);

    margin-bottom: 0.35rem;

}



.cf-s {

    font-size: 0.83rem;

    color: var(--mid);

    line-height: 1.65;

    margin-bottom: 1.8rem;

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.9rem;

    margin-bottom: 0.9rem;

}



.fg {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.fg.full {

    grid-column: 1/-1;

}



.fg label {

    font-size: 0.66rem;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--ink);

}



.fg input,

.fg select,

.fg textarea {

    padding: 0.78rem 0.95rem;

    border: 1.5px solid var(--border);

    background: var(--white);

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

    font-size: 0.86rem;

    color: var(--ink);

    outline: none;

    border-radius: var(--radius);

    transition:

        border-color 0.2s,

        box-shadow 0.2s;

}



.fg input:focus,

.fg select:focus,

.fg textarea:focus {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(200, 151, 58, 0.1);

}



.fg textarea {

    resize: vertical;

    min-height: 110px;

}



.fg select {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='%236B7280' d='M5 8L0 0h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 0.9rem center;

    background-size: 9px;

    cursor: pointer;

}



.btn-send {

    width: 100%;

    padding: 1rem;

    background: var(--ink);

    color: #fff;

    border: none;

    border-radius: var(--radius);

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

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 0.4rem;

    transition: background 0.22s, color 0.22s;

}



.btn-send svg {

    width: 14px;

    height: 14px;

    stroke: currentColor;

    fill: none;

    stroke-width: 2;

}



.btn-send:hover {

    background: var(--gold);

    color: var(--ink);

}



.f-ok {

    display: none;

    margin-top: 0.9rem;

    padding: 0.9rem 1.1rem;

    background: var(--successbg);

    border: 1px solid rgba(200, 151, 58, 0.28);

    font-size: 0.84rem;

    color: var(--success);

    border-radius: var(--radius);

    text-align: center;

}



/* Map embed placeholder */

.map-strip {

    background: var(--soft);

    padding: 0 5% 5rem;

}



.map-inner {

    max-width: 1200px;

    margin: 0 auto;

}



.map-wrap {

    width: 100%;

    height: 380px;

    background: var(--soft2);

    overflow: hidden;

    border-radius: var(--radius);

    position: relative;

}



.map-wrap iframe {

    width: 100%;

    height: 100%;

    border: 0;

    filter: grayscale(0.2);

}



/* ═══════════════════════════════════════════

   FOOTER

═══════════════════════════════════════════ */

#footer {

    background: var(--ink2);

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

}



.footer-main {

    display: grid;

    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;

    gap: 3.5rem;

    max-width: 1200px;

    margin: 0 auto;

    padding: 4.5rem 5% 3.5rem;

}



.fc-brand .logo-mark {

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

    margin-bottom: 1.2rem;

}



.fc-brand .logo-mark svg {

    stroke: var(--gold);

}



.fc-brand .ln {

    color: #fff;

    font-size: 1.2rem;

}



.fc-brand .ls {

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

}



.fc-brand p {

    font-size: 0.83rem;

    line-height: 1.78;

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

    margin-top: 1.1rem;

    max-width: 260px;

}



.fc-social {

    display: flex;

    gap: 0.5rem;

    margin-top: 1.4rem;

}



.fc-social .soc {

    width: 32px;

    height: 32px;

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

}



.fc-social .soc svg {

    width: 13px;

    height: 13px;

    fill: rgba(255, 255, 255, 0.35);

}



.fc-title {

    font-family: "Playfair Display", serif;

    font-size: 1rem;

    font-weight: 500;

    color: #fff;

    margin-bottom: 1.3rem;

}



.fc-links {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

    list-style: none;

}



.fc-links a {

    font-size: 0.82rem;

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

    transition: color 0.2s;

}



.fc-links a:hover {

    color: var(--gold);

}



.fc-contact-list {

    display: flex;

    flex-direction: column;

    gap: 0.9rem;

}



.fci {

    display: flex;

    gap: 0.7rem;

    align-items: flex-start;

}



.fci-ico {

    width: 28px;

    height: 28px;

    background: rgba(200, 151, 58, 0.1);

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    margin-top: 1px;

}



.fci-ico svg {

    width: 12px;

    height: 12px;

    stroke: var(--gold);

    fill: none;

    stroke-width: 2;

}



.fci-txt {

    font-size: 0.78rem;

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

    line-height: 1.6;

}



.fci-txt a {

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

    transition: color 0.2s;

}


.fci-txt a:hover {

    color: var(--gold);

}



.footer-bottom {

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

    padding: 1.4rem 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 0.8rem;

    max-width: 100%;

}



.fb-copy {

    font-size: 0.7rem;

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

    letter-spacing: 0.04em;

}



.fb-links {

    display: flex;

    gap: 1.5rem;

    list-style: none;

}



.fb-links a {

    font-size: 0.7rem;

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

    transition: color 0.2s;

}



.fb-links a:hover {

    color: var(--gold);

}



.fb-made {

    font-size: 0.68rem;

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

    letter-spacing: 0.04em;

}



/* ═══════════════════════════════════════════

   BACK TO TOP

═══════════════════════════════════════════ */

#btt {

    position: fixed;

    bottom: 2rem;

    right: 2rem;

    z-index: 900;

    width: 42px;

    height: 42px;

    background: var(--ink);

    color: #fff;

    border-radius: var(--radius);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: translateY(10px);

    pointer-events: none;

    transition:

        opacity 0.3s,

        transform 0.3s,

        background 0.2s;

}



#btt.show {

    opacity: 1;

    transform: none;

    pointer-events: all;

}



#btt:hover {

    background: var(--gold);

    color: var(--ink);

}



#btt svg {

    width: 16px;

    height: 16px;

    stroke: currentColor;

    fill: none;

    stroke-width: 2.5;

}



/* ═══════════════════════════════════════════

   RESPONSIVE

═══════════════════════════════════════════ */

@media (max-width: 1100px) {

    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 2.5rem;

    }



    .why-grid {

        gap: 3rem;

    }



    .about-grid {

        gap: 3.5rem;

    }

}



@media (max-width: 900px) {

    .prod-grid {

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

    }



    .pc-wide {

        grid-column: span 1;

    }



    .testi-grid {

        grid-template-columns: 1fr 1fr;

    }



    .stats-grid {

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

    }



    .why-grid {

        grid-template-columns: 1fr;

    }



    .why-img {

        display: none;

    }



    .contact-grid {

        grid-template-columns: 1fr;

    }



    .c-info {

        position: static;

    }

}



@media (max-width: 768px) {

    .nav-menu {

        display: none;

    }



    .burger {

        display: flex;

    }



    .sec {

        padding: 4rem 5%;

    }



    #stats {

        padding: 2.5rem 5%;

    }



    .about-grid {

        grid-template-columns: 1fr;

    }



    .about-img::before {

        display: none;

    }



    .about-badge {

        right: 0;

        bottom: -1rem;

    }



    .prod-grid {

        grid-template-columns: 1fr;

    }



    .testi-grid {

        grid-template-columns: 1fr;

    }



    .about-values {

        grid-template-columns: 1fr;

    }



    .why-features {

        grid-template-columns: 1fr;

    }



    .footer-main {

        grid-template-columns: 1fr;

        gap: 2rem;

        padding: 3rem 5% 2.5rem;

    }



    .form-row {

        grid-template-columns: 1fr;

    }



    .hero-arrows {

        display: none;

    }



    #btt {

        bottom: 1.2rem;

        right: 1.2rem;

    }

}



@media (max-width: 480px) {

    #nav {

        padding: 0 4%;

    }



    .sec {

        padding: 3.2rem 4%;

    }



    .hs-body {

        padding: 0 5%;

        padding-top: var(--total-h);

    }



    .about-badge {

        width: 110px;

        padding: 1.1rem;

    }



    .ab-n {

        font-size: 2rem;

    }



    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }



    .cta-btns {

        flex-direction: column;

        align-items: center;

    }



    .stats-grid {

        grid-template-columns: 1fr 1fr;

    }



    .stat-box {

        padding: 1.5rem 1rem;

    }



    .stat-n {

        font-size: 2.2rem;

    }



    .map-wrap {

        height: 260px;

    }

}