/* =========================================================
   AVTOTOPFM
   Premium Dark / Gold
   ========================================================= */

:root {
    --black: #070809;
    --black-2: #0b0d0f;
    --card: #101215;

    --white: #f5f5f3;
    --gray: #92969e;
    --gray-dark: #656a72;

    --gold: #c7a15a;
    --gold-light: #e1bd78;

    --line: rgba(255,255,255,.10);
    --line-gold: rgba(199,161,90,.35);

    --container: 1240px;

    --transition: .35s ease;
}


/* RESET */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--black);
    color: var(--white);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.5;

    overflow-x: hidden;
}

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

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

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

    margin: 0 auto;
}


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

.header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    border-bottom: 1px solid transparent;

    transition: var(--transition);
}

.header.scrolled {
    background: rgba(7,8,9,.92);

    border-bottom-color: var(--line);

    backdrop-filter: blur(18px);
}

.header__inner {
    height: 76px;

    display: flex;
    align-items: center;

    gap: 35px;
}


/* LOGO */

.logo {
    font-size: 22px;

    font-weight: 900;

    letter-spacing: .13em;

    white-space: nowrap;
}

.logo span {
    color: #777b82;
}


/* NAV */

.nav {
    display: flex;

    align-items: center;

    gap: 32px;

    margin-left: auto;
}

.nav__link {
    position: relative;

    color: #969aa1;

    font-size: 13px;

    font-weight: 600;

    transition: var(--transition);
}

.nav__link:hover,
.nav__link.active {
    color: #fff;
}

.nav__link.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -12px;

    height: 1px;

    background: var(--gold);
}


/* TELEGRAM */

.telegram-button {
    padding: 11px 17px;

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

    border-radius: 10px;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    transition: var(--transition);
}

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

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


/* =========================================================
   COMMON
   ========================================================= */

.eyebrow {
    color: var(--gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .25em;

    text-transform: uppercase;
}

.button {
    display: inline-flex;

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

    gap: 18px;

    min-height: 50px;

    padding: 0 21px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 800;

    transition: var(--transition);
}

.button span {
    font-size: 17px;

    transition: var(--transition);
}

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

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

.button--gold {
    background: var(--gold);

    color: #090a0b;
}

.button--gold:hover {
    background: var(--gold-light);
}

.button--outline {
    border: 1px solid var(--line-gold);

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

    color: #eee;
}

.button--outline:hover {
    background: rgba(199,161,90,.08);

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

.text-link {
    display: inline-flex;

    gap: 12px;

    margin-top: 35px;

    color: var(--gold-light);

    font-size: 12px;

    font-weight: 700;

    transition: var(--transition);
}

.text-link:hover span {
    transform: translateX(5px);
}

.text-link span {
    transition: var(--transition);
}


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

.hero {
    position: relative;

    min-height: 760px;
    height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 75% 55%,
            rgba(199,161,90,.12),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            #070809 0%,
            #090b0d 55%,
            #111417 100%
        );
}

.hero__glow {
    position: absolute;

    width: 700px;
    height: 400px;

    right: 5%;
    top: 35%;

    background:
        radial-gradient(
            ellipse,
            rgba(199,161,90,.13),
            transparent 65%
        );

    filter: blur(20px);

    pointer-events: none;
}


/* ВРЕМЕННЫЙ СИЛУЭТ АВТО */

.hero__car {
    position: absolute;

    right: -3%;
    top: 20%;

    width: 57%;
    height: 65%;

    opacity: .65;

    background:
        radial-gradient(
            ellipse at 55% 58%,
            rgba(199,161,90,.25),
            transparent 40%
        );

    transform: skewX(-8deg);
}


/* ДЕКОРАТИВНАЯ ЛИНИЯ */

.hero__car::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 1px;

    left: -150px;
    top: 55%;

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

    transform: rotate(-18deg);

    box-shadow:
        0 0 20px rgba(199,161,90,.5);
}


.hero__inner {
    position: relative;

    z-index: 2;
}

.hero__content {
    max-width: 750px;
}

.hero h1 {
    margin-top: 24px;

    font-size:
        clamp(
            58px,
            7vw,
            104px
        );

    line-height: .91;

    letter-spacing: -.065em;

    font-weight: 850;
}

.hero__description {
    max-width: 590px;

    margin-top: 30px;

    color: #a1a5ac;

    font-size: 16px;

    line-height: 1.75;
}

.hero__buttons {
    display: flex;

    gap: 11px;

    margin-top: 33px;
}

.hero__countries {
    display: flex;

    gap: 25px;

    margin-top: 65px;

    color: #747980;

    font-size: 10px;

    letter-spacing: .25em;
}

.hero__countries span {
    position: relative;
}

.hero__countries span:not(:last-child)::after {
    content: "";

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    right: -14px;
    top: 50%;

    background: var(--gold);
}

.scroll-indicator {
    position: absolute;

    right: 35px;
    bottom: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: #70757c;

    font-size: 9px;

    letter-spacing: .2em;
}

.scroll-line {
    width: 1px;

    height: 45px;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            transparent
        );
}


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

.about {
    padding: 130px 0 0;

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

    background: #090a0c;
}

.about__top {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 100px;
}

.about h2,
.directions h2,
.catalog-section h2,
.process h2 {
    margin-top: 25px;

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

    line-height: .93;

    letter-spacing: -.06em;

    font-weight: 800;
}

.about__text {
    padding-top: 50px;

    max-width: 500px;
}

.about__text p {
    margin-bottom: 27px;

    color: #9499a1;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   STATS
   ========================================================= */

.stats {
    display: grid;

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

    margin-top: 90px;

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

.stat {
    min-height: 300px;

    padding: 38px 30px;

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

    transition: var(--transition);
}

.stat:last-child {
    border-right: none;
}

.stat:hover {
    background: rgba(199,161,90,.025);
}

.stat__number {
    font-size: clamp(50px,5vw,75px);

    line-height: .9;

    font-weight: 850;

    letter-spacing: -.065em;
}

.stat__number span {
    color: var(--gold);
}

.stat__title {
    margin-top: 28px;

    color: #858a92;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .22em;
}

.stat__dash {
    margin-top: 17px;

    color: var(--gold);

    font-size: 12px;
}

.stat p {
    max-width: 230px;

    margin-top: 12px;

    color: #858a92;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   DIRECTIONS
   ========================================================= */

.directions {
    padding: 130px 0;

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

.directions__layout {
    display: grid;

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

    gap: 70px;
}

.direction-grid {
    display: grid;

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

    gap: 12px;
}

.direction-card {
    position: relative;

    min-height: 310px;

    padding: 25px;

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

    border-radius: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #15181d,
            #0e1013
        );

    transition: var(--transition);
}

.direction-card:hover {
    transform: translateY(-5px);

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

.direction-card__number {
    color: var(--gold);

    font-size: 11px;

    letter-spacing: .1em;
}

.direction-card h3 {
    position: absolute;

    left: 25px;
    bottom: 70px;

    font-size: 30px;

    letter-spacing: -.04em;
}

.direction-card p {
    position: absolute;

    left: 25px;
    bottom: 24px;

    max-width: 220px;

    color: #858a92;

    font-size: 12px;

    line-height: 1.6;
}

.direction-card__arrow {
    position: absolute;

    right: 23px;
    bottom: 23px;

    color: var(--gold);

    font-size: 18px;

    transition: var(--transition);
}

.direction-card:hover .direction-card__arrow {
    transform: translateX(5px);
}


/* =========================================================
   CATALOG
   ========================================================= */

.catalog-section {
    padding: 130px 0;
}

.catalog-section__layout {
    display: grid;

    grid-template-columns: .65fr 1.35fr;

    gap: 60px;

    align-items: start;
}

.catalog-section__heading .button {
    margin-top: 35px;
}

.catalog-banner {
    position: relative;

    min-height: 450px;

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

    border-radius: 18px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 80% 65%,
            rgba(199,161,90,.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #16191e,
            #0d0f12
        );
}

.catalog-banner__content {
    position: relative;

    z-index: 2;

    width: 52%;

    padding: 55px;
}

.catalog-banner__label {
    color: var(--gold);

    font-size: 10px;

    letter-spacing: .2em;
}

.catalog-banner h3 {
    margin-top: 22px;

    font-size: 39px;

    line-height: 1;

    letter-spacing: -.05em;
}

.catalog-banner p {
    margin: 20px 0 27px;

    color: #898e96;

    font-size: 13px;

    line-height: 1.7;
}


/* СИЛУЭТ */

.catalog-banner__car {
    position: absolute;

    right: -5%;
    bottom: 35px;

    width: 62%;
    height: 200px;

    border-radius:
        55% 45%
        18% 18%;

    background:
        linear-gradient(
            145deg,
            #343942,
            #171a20 50%,
            #0a0c0e
        );

    transform: skewX(-10deg);

    box-shadow:
        0 35px 70px rgba(0,0,0,.7);
}

.catalog-banner__car::after {
    content: "";

    position: absolute;

    width: 70%;
    height: 2px;

    top: 27%;

    left: 15%;

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


/* =========================================================
   PROCESS
   ========================================================= */

.process {
    padding: 120px 0;

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

.process__layout {
    display: grid;

    grid-template-columns: .65fr 1.35fr;

    gap: 60px;
}

.process-grid {
    display: grid;

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

    gap: 10px;
}

.process-card {
    min-height: 220px;

    padding: 23px;

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

    border-radius: 12px;

    background: #0e1013;

    transition: var(--transition);
}

.process-card:hover {
    border-color: var(--line-gold);

    background: #121519;
}

.process-card > span {
    color: var(--gold);

    font-size: 10px;

    letter-spacing: .15em;
}

.process-card h3 {
    margin-top: 65px;

    font-size: 20px;

    letter-spacing: -.03em;
}

.process-card p {
    margin-top: 9px;

    color: #858a92;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   CTA
   ========================================================= */

.cta {
    padding: 20px 0 120px;
}

.cta__box {
    position: relative;

    display: grid;

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

    gap: 40px;

    align-items: center;

    min-height: 330px;

    padding: 50px;

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

    border-radius: 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 40%,
            rgba(199,161,90,.13),
            transparent 35%
        ),
        #111316;
}

.cta__box::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 1px;

    right: -150px;
    bottom: 50px;

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

    transform: rotate(-12deg);

    opacity: .7;
}

.cta h2 {
    margin-top: 15px;

    font-size: clamp(45px,5vw,70px);

    line-height: .9;

    letter-spacing: -.06em;
}

.cta__description {
    color: #969ba3;

    font-size: 14px;

    line-height: 1.7;
}

.cta__buttons {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


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

.footer {
    padding: 55px 0 25px;

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

    background: #070809;
}

.footer__top {
    display: grid;

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

    gap: 50px;
}

.footer__brand p {
    margin-top: 14px;

    color: #70757d;

    font-size: 12px;

    line-height: 1.6;
}

.footer__links {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer__links a,
.footer__contacts span,
.footer__contacts a {
    color: #858a92;

    font-size: 12px;

    transition: var(--transition);
}

.footer__links a:hover,
.footer__contacts a:hover {
    color: var(--gold);
}

.footer__contacts {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer__bottom {
    display: flex;

    justify-content: space-between;

    margin-top: 55px;

    padding-top: 20px;

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

    color: #555a61;

    font-size: 9px;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .nav {
        gap: 18px;
    }

    .about__top,
    .directions__layout,
    .catalog-section__layout,
    .process__layout {
        grid-template-columns: 1fr;
    }

    .about__text {
        padding-top: 0;
    }

    .directions__heading {
        max-width: 500px;
    }

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

    .stat:nth-child(2) {
        border-right: none;
    }

    .stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .catalog-banner__content {
        width: 60%;
    }

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

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

    .cta__buttons {
        grid-column: 1 / -1;
    }
}


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

@media (max-width: 700px) {

    .container {
        width: min(
            calc(100% - 30px),
            var(--container)
        );
    }

    .header__inner {
        height: 68px;
    }

    .nav {
        display: none;
    }

    .telegram-button {
        margin-left: auto;
    }

    .hero {
        min-height: 720px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero__description {
        font-size: 14px;
    }

    .hero__buttons {
        flex-direction: column;

        align-items: stretch;

        max-width: 330px;
    }

    .button {
        width: 100%;
    }

    .hero__countries {
        flex-wrap: wrap;

        gap: 12px 24px;

        margin-top: 40px;
    }

    .scroll-indicator {
        display: none;
    }

    .about,
    .directions,
    .catalog-section,
    .process {
        padding: 85px 0;
    }

    .about h2,
    .directions h2,
    .catalog-section h2,
    .process h2 {
        font-size: 43px;
    }

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

        margin-top: 60px;
    }

    .stat {
        min-height: 220px;

        border-right: none;

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

    .stat:last-child {
        border-bottom: none;
    }

    .stat:nth-child(2) {
        border-right: none;
    }

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

    .direction-card {
        min-height: 250px;
    }

    .catalog-banner {
        min-height: 530px;
    }

    .catalog-banner__content {
        width: 100%;

        padding: 35px;
    }

    .catalog-banner h3 {
        font-size: 34px;
    }

    .catalog-banner__car {
        width: 90%;

        right: -20%;

        bottom: 30px;
    }

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

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

        padding: 35px;
    }

    .cta__buttons {
        grid-column: auto;

        flex-direction: column;
    }

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

    .footer__bottom {
        flex-direction: column;

        gap: 8px;
    }
}


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

@media (max-width: 420px) {

    .logo {
        font-size: 18px;
    }

    .telegram-button {
        padding: 9px 11px;

        font-size: 10px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .about h2,
    .directions h2,
    .catalog-section h2,
    .process h2 {
        font-size: 38px;
    }

    .stat__number {
        font-size: 58px;
    }
}
/* =========================================================
   AVTOTOPFM — CATALOG THEME
   Graphite + Gold
   ========================================================= */

/* Основной фон каталога */
body {
    background: #070809 !important;
    color: #f5f5f3 !important;
}


/* Верхняя панель */
.top {
    background: rgba(7, 8, 9, .94) !important;

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

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


/* Логотип */
.logo {
    color: #f5f5f3 !important;
}

.logo span {
    color: #777b82 !important;
}


/* Заголовки */
.hero h1,
.title {
    color: #f5f5f3 !important;
}


/* Маленькие подписи */
.eyebrow,
.ey,
.sub {
    color: #c7a15a !important;
}


/* =========================================================
   FILTERS
   ========================================================= */

.panel {
    background: #0d0f12 !important;

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

    border-radius: 18px !important;
}


input,
select {
    background: #111316 !important;

    color: #f5f5f3 !important;

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

    border-radius: 10px !important;
}


input::placeholder {
    color: #70757d !important;
}


input:focus,
select:focus {
    outline: none !important;

    border-color: rgba(199,161,90,.65) !important;

    box-shadow:
        0 0 0 3px rgba(199,161,90,.08) !important;
}


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

.card {
    background:
        linear-gradient(
            145deg,
            #15181d,
            #0d0f12
        ) !important;

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

    border-radius: 18px !important;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease !important;
}


.card:hover {
    transform: translateY(-5px) !important;

    border-color: rgba(199,161,90,.42) !important;

    background:
        linear-gradient(
            145deg,
            #191c21,
            #101215
        ) !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35) !important;
}


/* Картинка-заглушка */
.photo {
    background:
        radial-gradient(
            ellipse at 50% 55%,
            rgba(199,161,90,.08),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #20242b,
            #101216
        ) !important;

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


/* Надпись AUTO */
.photo::before {
    color: rgba(255,255,255,.10) !important;
}


/* Текст карточки */
.card .body {
    background: #111316 !important;
}


.card .title {
    color: #f5f5f3 !important;
}


.card .sub {
    color: #858a92 !important;
}


/* =========================================================
   CAR PRICE
   ========================================================= */

.card .price,
.price {
    color: #f5f5f3 !important;

    font-weight: 850 !important;
}


.card .price::first-letter {
    color: #f5f5f3;
}


/* Если цена "По запросу" */
.card .price {
    position: relative;
}


/* =========================================================
   INFO BLOCKS
   ========================================================= */

.card .meta,
.card .info,
.card .specs {
    color: #858a92 !important;
}


.card .meta div,
.card .info div,
.card .specs div {
    background: #0b0d0f !important;

    border-color: rgba(255,255,255,.06) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    background: #c7a15a !important;

    color: #090a0b !important;

    border: 1px solid #c7a15a !important;

    border-radius: 10px !important;

    font-weight: 800 !important;

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


.btn:hover {
    background: #e1bd78 !important;

    border-color: #e1bd78 !important;

    transform: translateY(-2px) !important;
}


/* Вторичные кнопки */
button.secondary,
.btn.secondary {
    background: transparent !important;

    color: #eee !important;

    border-color: rgba(199,161,90,.35) !important;
}


button.secondary:hover,
.btn.secondary:hover {
    background: rgba(199,161,90,.08) !important;

    border-color: #c7a15a !important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination button {
    background: #101215 !important;

    color: #969ba3 !important;

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

    border-radius: 9px !important;
}


.pagination button:hover {
    color: #fff !important;

    border-color: rgba(199,161,90,.45) !important;
}


.pagination button.active {
    background: #c7a15a !important;

    color: #090a0b !important;

    border-color: #c7a15a !important;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
    background: rgba(0,0,0,.78) !important;

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


.modal .box {
    background:
        linear-gradient(
            145deg,
            #171a1f,
            #0c0e10
        ) !important;

    border: 1px solid rgba(199,161,90,.30) !important;

    border-radius: 20px !important;

    box-shadow:
        0 30px 100px rgba(0,0,0,.65) !important;
}


.modal .close {
    color: #aaa !important;

    border-color: rgba(255,255,255,.12) !important;
}


.modal .close:hover {
    color: #c7a15a !important;

    border-color: rgba(199,161,90,.45) !important;
}


/* =========================================================
   GOLD DETAILS
   ========================================================= */

.card:hover .title {
    color: #e1bd78 !important;
}


.card a:hover {
    color: #e1bd78 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #070809;
}

::-webkit-scrollbar-thumb {
    background: #292d33;

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c7a15a;
}
/* ===== CONTACTS ===== */

.contact-links {
    padding: 110px 0 90px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.contact-links .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 42px;
}

.contact-links .section-head p {
    color: rgba(255,255,255,.45);
    font-size: 14px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.contact-card {
    min-height: 150px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    color: #fff;
    transition: all .25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199,161,90,.65);
    background: rgba(199,161,90,.055);
}

.contact-label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c7a15a;
}

.contact-card strong {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
}

.address-card span:last-child {
    color: rgba(255,255,255,.50);
    font-size: 14px;
}

@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-links .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 520px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-links {
        padding: 80px 0 60px;
    }
}
/* ===== CONTACTS ===== */

.contact-links {
    padding: 110px 0 90px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.contact-links .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 42px;
}

.contact-links .section-head p {
    color: rgba(255,255,255,.45);
    font-size: 14px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.contact-card {
    min-height: 150px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    color: #fff;
    transition: all .25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199,161,90,.65);
    background: rgba(199,161,90,.055);
}

.contact-label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c7a15a;
}

.contact-card strong {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
}

.address-card span:last-child {
    color: rgba(255,255,255,.50);
    font-size: 14px;
}

@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-links .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 520px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-links {
        padding: 80px 0 60px;
    }
}