/***** GLOBAL *****/

:root {
    --main-color: #1769e8;
    --main-text-color: #ffffff;
    --main-ink: #1257c4;
    --second-color: #ffffff;
    --second-text-color: #0a1730;
    --third-color: #eef3fb;
    --third-text-color: #0a1730;
    --dark-color: #0a1730;
    --dark-text-color: #ffffff;
    --accent-color: #7cc0ff;
    --accent-text-color: #0a1730;
    --heading-color: #0a1730;
    --text-color: #4a5670;
    --muted-color: #5b6475;
    --border-color: #dde5f0;
    --star-color: #f5b301;
    --promo-color: #ffd23f;
    --promo-text-color: #0a1730;
    --error-color: #c62828;
    --overlay: linear-gradient(100deg, color-mix(in srgb, var(--dark-color) 92%, transparent) 0%, color-mix(in srgb, var(--dark-color) 62%, transparent) 55%, color-mix(in srgb, var(--dark-color) 30%, transparent) 100%);

    --body-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --heading-font: var(--body-font);

    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --shadow-sm: 0 8px 24px color-mix(in srgb, var(--dark-color) 7%, transparent);
    --shadow: 0 20px 48px color-mix(in srgb, var(--dark-color) 12%, transparent);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-height: 100px;
    --section-space: clamp(64px, 8vw, 110px);
}

/* base */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.65;
    background: var(--second-color);
    color: var(--text-color);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

main:focus {
    outline: 0;
}

.container {
    padding-left: 25px;
    padding-right: 25px;
}

img {
    max-width: 100%;
    height: auto;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--main-color);
    color: var(--main-text-color);
}

:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 2000;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.skip-link:focus {
    top: 16px;
}

/* icons */
i[data-lucide] {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* typography */
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--heading-color);
    margin-bottom: 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.375rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.heading span {
    color: var(--main-color);
}

p {
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.spec-font {
    font-family: var(--heading-font);
}

.subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--main-color);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subtitle svg,
.subtitle i[data-lucide] {
    width: 18px;
    height: 18px;
}

/* eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--main-color) 10%, var(--second-color));
    color: var(--main-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--main-color);
}

.eyebrow:has(svg, i[data-lucide])::before {
    display: none;
}

.eyebrow svg,
.eyebrow i[data-lucide] {
    width: 16px;
    height: 16px;
}

.eyebrow.light {
    background: color-mix(in srgb, var(--dark-text-color) 12%, transparent);
    color: var(--accent-color);
}

.eyebrow.light::before {
    background: var(--accent-color);
}

/* buttons */
.t-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0.8em 1.6em;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}

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

.t-btn svg,
.t-btn i[data-lucide] {
    flex: none;
    width: 18px;
    height: 18px;
}

.t-btn:has(> .icon) {
    padding: 6px 6px 6px 1.6em;
}

.t-btn .icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.t-btn .icon .icon-copy {
    position: absolute;
    transform: translate(-150%, 150%);
}

@media (prefers-reduced-motion: no-preference) {
    .t-btn:hover .icon svg:not(.icon-copy) {
        transition: transform 0.35s var(--ease);
        transform: translate(150%, -150%);
    }

    .t-btn:hover .icon .icon-copy {
        transition: transform 0.35s var(--ease) 0.08s;
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .t-btn:hover {
        transform: none;
    }
}

.t-btn.theme {
    background: var(--main-color);
    color: var(--main-text-color);
}

.t-btn.theme .icon {
    background: var(--main-text-color);
    color: var(--main-color);
}

.t-btn.theme:hover {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.t-btn.theme2 {
    background: var(--second-color);
    color: var(--second-text-color);
    border-color: var(--border-color);
}

.t-btn.theme2 .icon {
    background: var(--main-color);
    color: var(--main-text-color);
}

.t-btn.theme2:hover {
    background: var(--main-color);
    color: var(--main-text-color);
    border-color: var(--main-color);
}

.t-btn.theme2:hover .icon {
    background: var(--main-text-color);
    color: var(--main-color);
}

.t-btn.theme3 {
    background: var(--third-color);
    color: var(--third-text-color);
}

.t-btn.theme3 .icon {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.t-btn.theme3:hover {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.t-btn.theme3:hover .icon {
    background: var(--main-color);
    color: var(--main-text-color);
}

.t-btn.outline {
    border-color: color-mix(in srgb, var(--dark-text-color) 35%, transparent);
    color: var(--dark-text-color);
}

.t-btn.outline:hover {
    background: var(--dark-text-color);
    color: var(--dark-color);
}

.t-btn:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}

.buttons,
main .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

main .actions {
    justify-content: center;
    margin-top: 48px;
}

/* check list */
.check-list {
    display: grid;
    gap: 12px;
    margin: 24px 0 32px;
}

.check-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.check-list svg,
.check-list i[data-lucide] {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    padding: 5px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
}

/* section head */
main > div > section {
    padding: var(--section-space) 0;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.section-head .heading {
    max-width: 700px;
    margin-bottom: 0;
}

.section-head .text {
    max-width: 620px;
    margin-top: 16px;
    color: var(--muted-color);
}

.section-head.center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-head.center .eyebrow {
    margin-bottom: 0;
}

/* social */
.social {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
}

.social:hover {
    background: var(--dark-text-color);
    color: var(--dark-color);
}

.social svg,
.social i[data-lucide] {
    width: 20px;
    height: 20px;
}

/* page title */
main > div > .title-section {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(360px, 46vw, 480px);
    margin: 0 16px;
    padding: 120px 0 clamp(40px, 5vw, 64px);
    border-radius: var(--radius-lg);
    background: var(--overlay), var(--background, none) center / cover no-repeat, var(--dark-color);
    color: var(--dark-text-color);
    overflow: hidden;
}

main > div > .title-section.photo {
    --overlay: linear-gradient(90deg, color-mix(in srgb, var(--dark-color) 88%, transparent) 0%, color-mix(in srgb, var(--dark-color) 62%, transparent) 40%, color-mix(in srgb, var(--dark-color) 12%, transparent) 100%);
}

main > div > .title-section.plain {
    min-height: clamp(300px, 34vw, 400px);
    background: var(--dark-color);
}

.title-section .content {
    max-width: 760px;
}

.title-section .heading {
    margin-bottom: 14px;
    color: inherit;
}

.title-section .text {
    max-width: 620px;
    font-size: clamp(17px, 1.4vw, 19px);
    opacity: 0.85;
}

.title-section .crumbs ol {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--dark-text-color) 12%, transparent);
    font-size: 15px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.title-section .crumbs li + li::before {
    content: "/";
    margin-right: 6px;
    opacity: 0.5;
}

.title-section .crumbs a {
    opacity: 0.8;
}

.title-section .crumbs a:hover {
    color: var(--accent-color);
    opacity: 1;
}

/* service card */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--second-color);
    transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.service-card .media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.service-card .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.service-card:hover .image {
    transform: scale(1.05);
}

.service-card .price {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--second-color);
    color: var(--heading-color);
    font-size: 15px;
    font-weight: 700;
}

.service-card .body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 32px 18px 18px;
}

.service-card .body > .icon {
    position: absolute;
    top: -28px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 4px solid var(--second-color);
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
}

.service-card .body > .icon svg,
.service-card .body > .icon i[data-lucide] {
    width: 22px;
    height: 22px;
}

.service-card .title {
    margin-bottom: 10px;
    font-size: 1.375rem;
}

.service-card .title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.service-card .title a:hover {
    color: var(--main-color);
}

.service-card .text {
    color: var(--muted-color);
}

.service-card .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--muted-color);
    font-size: 15px;
}

.service-card .meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.service-card .meta svg,
.service-card .meta i[data-lucide] {
    width: 16px;
    height: 16px;
}

.service-card .more {
    color: var(--main-ink);
    font-weight: 700;
}

.service-card .prices {
    margin: 18px 0 20px;
}

.service-card .prices li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 16px;
}

.service-card .prices strong {
    color: var(--heading-color);
    white-space: nowrap;
}

.service-card .buttons {
    position: relative;
    z-index: 2;
}

.service-card .buttons .t-btn {
    flex: 1;
}

/* deal */
.deal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--promo-color);
    color: var(--promo-text-color);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--promo-color) 70%, transparent), 0 6px 18px color-mix(in srgb, var(--promo-color) 45%, transparent);
}

.deal svg,
.deal i[data-lucide] {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    .deal {
        animation: deal-glow 2.4s ease-in-out infinite;
    }
}

@keyframes deal-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--promo-color) 70%, transparent), 0 6px 18px color-mix(in srgb, var(--promo-color) 45%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--promo-color) 0%, transparent), 0 6px 26px color-mix(in srgb, var(--promo-color) 75%, transparent); }
}

.deal-box {
    display: grid;
    justify-items: start;
    gap: 10px;
    margin: 0 0 20px;
    line-height: 1.45;
    padding: 18px 20px;
    border: 2px dashed var(--promo-text-color);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--promo-color) 22%, var(--second-color));
    color: var(--promo-text-color);
    font-size: 16px;
    font-weight: 600;
}

.service-card .deal {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* process */
main .process-section {
    background: var(--third-color);
}

.process-section .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 40px 24px;
}

.process-section .step {
    position: relative;
    text-align: center;
}

.process-section .step .icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--second-color);
    color: var(--main-color);
    box-shadow: var(--shadow-sm);
}

.process-section .step .icon svg,
.process-section .step .icon i[data-lucide] {
    width: 28px;
    height: 28px;
}

.process-section .step .number {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    font-size: 14px;
    font-weight: 700;
}

.process-section .step .digit {
    background: linear-gradient(135deg, var(--main-color), var(--dark-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.process-section .step .title {
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.process-section .step .text {
    color: var(--muted-color);
    font-size: 16px;
}

@media (min-width: 1200px) {
    .process-section .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 40px;
        left: calc(50% + 56px);
        right: calc(-50% + 44px);
        border-top: 2px dashed color-mix(in srgb, var(--main-color) 35%, transparent);
    }
}

/* bento */
.bento {
    --columns: 4;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    grid-auto-rows: minmax(240px, auto);
    gap: 16px;
}

.bento .item {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 240px;
    border-radius: var(--radius);
    background: var(--dark-color);
    color: var(--dark-text-color);
    overflow: hidden;
    isolation: isolate;
}

.bento .item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.bento .item .image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}

.bento .item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, color-mix(in srgb, var(--dark-color) 88%, transparent) 0%, color-mix(in srgb, var(--dark-color) 20%, transparent) 55%, transparent 100%);
}

.bento .item:hover .image {
    transform: scale(1.06);
}

.bento .body {
    display: grid;
    gap: 4px;
    padding: 24px;
}

.bento .title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.bento .item:first-child .title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.bento .text {
    display: none;
    max-width: 460px;
    opacity: 0.85;
}

.bento .item:first-child .text {
    display: block;
}

.bento .meta {
    color: var(--accent-color);
    font-size: 15px;
    font-weight: 600;
}

.bento .count {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--dark-color) 55%, transparent);
    font-size: 15px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.bento .count svg,
.bento .count i[data-lucide] {
    width: 16px;
    height: 16px;
}

@media (max-width: 991.98px) {
    .bento {
        --columns: 2;
    }
}

@media (max-width: 575.98px) {
    .bento {
        --columns: 1;
    }

    .bento .item:first-child {
        grid-column: auto;
        grid-row: auto;
        min-height: 320px;
    }
}

/* faq list */
.faq-list {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--heading-color);
    --bs-accordion-btn-color: var(--heading-color);
}

.faq-list .accordion-item {
    margin-bottom: 12px;
    border: 1px solid transparent;
    border-radius: var(--radius) !important;
    background: var(--third-color);
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-list .accordion-item:has(.show) {
    border-color: var(--border-color);
    background: var(--second-color);
    box-shadow: var(--shadow-sm);
}

.faq-list .accordion-header {
    margin: 0;
}

.faq-list .accordion-button {
    gap: 16px;
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.faq-list .accordion-button:focus-visible {
    outline: 3px solid var(--main-color);
    outline-offset: -3px;
}

.faq-list .accordion-body {
    padding: 0 24px 22px;
    color: var(--muted-color);
}

/* bonuses */
.bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 32px;
}

.bonuses .bonus {
    display: grid;
    min-width: 150px;
    padding: 14px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--second-color);
}

.bonuses .bonus strong {
    color: var(--main-color);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.bonuses .bonus span {
    color: var(--muted-color);
    font-size: 15px;
}

/* cta */
main .cta-section {
    padding-top: 0;
}

main .process-section + .cta-section,
main .extras-section + .cta-section,
main .photos-section + .cta-section {
    padding-top: var(--section-space);
}

.cta-section .box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(36px, 6vw, 80px);
    border-radius: var(--radius-lg);
    background: var(--dark-color);
    color: var(--dark-text-color);
    overflow: hidden;
    isolation: isolate;
}

.cta-section .box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--overlay), url("../images/site/c2a.webp") center / cover no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
    .cta-section .box::before {
        animation: cta-zoom 16s ease-in-out infinite alternate;
    }
}

@keyframes cta-zoom {
    to {
        transform: scale(1.08);
    }
}

.cta-section .content {
    max-width: 620px;
}

.cta-section .heading {
    margin-bottom: 14px;
    color: inherit;
}

.cta-section .text {
    opacity: 0.85;
}

/* animations */
@media (prefers-reduced-motion: no-preference) {
    .js [data-animate] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.8s var(--ease) var(--delay, 0s), transform 0.8s var(--ease) var(--delay, 0s);
    }

    .js [data-animate="zoom"] {
        transform: scale(0.96);
    }

    .js [data-animate].is-visible {
        opacity: 1;
        transform: none;
    }

    .load-in {
        animation: load-in 0.9s var(--ease) both;
    }
}

@keyframes load-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 16px;
    }

    main > div > .title-section {
        margin: 0 10px;
        padding-top: 96px;
    }

    .faq-list .accordion-button {
        padding: 18px 20px;
        font-size: 17px;
    }

    .faq-list .accordion-body {
        padding: 0 20px 20px;
    }
}

/***** HEADER *****/

/* header */
.header {
    position: sticky;
    top: 0;
    z-index: 1050;
    padding: 14px 0;
}

.header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 8px 8px 8px 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--second-color) 88%, transparent);
    color: var(--second-text-color);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.header.is-scrolled .bar {
    border-color: transparent;
    box-shadow: var(--shadow);
}

/* logo */
.header .logo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: 160px;
}

.header .logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* navigation */
.header .navigation .menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header .navigation .link {
    display: block;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header .navigation .link:hover {
    background: var(--third-color);
    color: var(--main-ink);
}

.header .navigation .link[aria-current="page"] {
    background: color-mix(in srgb, var(--main-color) 12%, var(--second-color));
    color: var(--main-ink);
}

.header .bar {
    position: relative;
}

.header .navigation .link svg,
.header .navigation .link i[data-lucide] {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.header .has-mega:hover .link svg,
.header .has-mega:focus-within .link svg {
    transform: rotate(180deg);
}

.header .mega {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--second-color);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.header .mega::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 16px;
}

.header .has-mega:hover .mega,
.header .has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.header .mega .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.header .mega .service {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius-sm);
    transition: background-color 0.25s ease;
}

.header .mega .service:hover,
.header .mega .service:focus-visible {
    background: var(--third-color);
}

.header .mega .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--third-color);
    color: var(--main-color);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.header .mega .service:hover .icon {
    background: var(--main-color);
    color: var(--main-text-color);
}

.header .mega .icon svg,
.header .mega .icon i[data-lucide] {
    width: 20px;
    height: 20px;
}

.header .mega .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.header .mega .title {
    color: var(--heading-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.header .mega .meta {
    color: var(--muted-color);
    font-size: 15px;
}

.header .mega .deal {
    margin-top: 6px;
}

.header .mega .side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: var(--radius);
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.header .mega .side .title {
    margin: 0;
    color: var(--dark-text-color);
    font-size: 1.25rem;
}

.header .mega .side .text {
    flex: 1;
    margin: 0 0 8px;
    color: color-mix(in srgb, var(--dark-text-color) 75%, transparent);
    font-size: 16px;
}

.header .mega .call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--dark-text-color);
    font-size: 1.125rem;
    font-weight: 800;
}

.header .mega .call:hover {
    color: var(--accent-color);
}

.header .mega .call svg,
.header .mega .call i[data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
}

/* actions */
.header .actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header .phone {
    align-items: center;
    gap: 8px;
    padding-right: 8px;
    font-weight: 700;
    color: var(--heading-color);
}

.header .phone:hover {
    color: var(--main-color);
}

.header .phone svg,
.header .phone i[data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--main-color);
}

.header .toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--dark-color);
    color: var(--dark-text-color);
    transition: background-color 0.3s ease;
}

.header .toggle:hover {
    background: var(--main-color);
}

.header .toggle svg,
.header .toggle i[data-lucide] {
    width: 22px;
    height: 22px;
}

/* offcanvas */
.header .offcanvas {
    --bs-offcanvas-width: min(420px, 100vw);
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.header .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 92px;
    padding: 14px 25px;
    border-bottom: 1px solid color-mix(in srgb, var(--dark-text-color) 12%, transparent);
}

.header .offcanvas-header .logo {
    width: 150px;
}

.header .offcanvas-header .logo img {
    filter: brightness(0) invert(1);
}

.header .offcanvas .close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dark-text-color) 12%, transparent);
    color: inherit;
    transition: background-color 0.3s ease;
}

.header .offcanvas .close:hover {
    background: var(--main-color);
}

.header .offcanvas .close:focus-visible,
.header .toggle:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.header .offcanvas-body {
    padding: 8px 25px 24px;
}

.header .offcanvas .links li {
    border-bottom: 1px solid color-mix(in srgb, var(--dark-text-color) 12%, transparent);
}

.header .offcanvas .link {
    display: block;
    padding: 14px 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.header .offcanvas .link:hover,
.header .offcanvas .link[aria-current="page"] {
    color: var(--accent-color);
}

.header .offcanvas .sub {
    display: grid;
    gap: 2px;
    margin: -4px 0 14px;
    padding: 0 0 0 14px;
    border-left: 2px solid color-mix(in srgb, var(--dark-text-color) 15%, transparent);
}

.header .offcanvas .links .sub li {
    border: 0;
}

.header .offcanvas .sub a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: color-mix(in srgb, var(--dark-text-color) 80%, transparent);
    font-size: 16px;
}

.header .offcanvas .sub a:hover {
    color: var(--accent-color);
}

.header .offcanvas .sub .deal {
    padding: 3px 10px;
    font-size: 13px;
}

.header .offcanvas-footer {
    display: grid;
    gap: 18px;
    padding: 20px 25px calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--dark-text-color) 12%, transparent);
    background: color-mix(in srgb, var(--dark-text-color) 4%, var(--dark-color));
}

.header .offcanvas .contacts {
    display: grid;
    gap: 12px;
}

.header .offcanvas .contact {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    line-height: 1.3;
    word-break: break-word;
}

.header .offcanvas .contact small {
    display: block;
    font-size: 14px;
    opacity: 0.6;
}

.header .offcanvas .contact .icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dark-text-color) 10%, transparent);
    color: var(--accent-color);
}

.header .offcanvas .contact svg,
.header .offcanvas .contact i[data-lucide] {
    width: 18px;
    height: 18px;
}

@media (max-width: 575.98px) {
    .header {
        padding: 10px 0;
    }

    .header .bar {
        min-height: 64px;
        padding: 6px 6px 6px 18px;
    }

    .header .logo {
        width: 130px;
    }

    .header .toggle {
        width: 48px;
        height: 48px;
    }
}

/***** HOME *****/

/* hero */
.home-page .hero-section {
    position: relative;
    padding-top: 32px;
    background: var(--second-color);
    color: var(--second-text-color);
    overflow: hidden;
}

.home-page .hero-section .content {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.home-page .hero-section .media {
    position: relative;
    aspect-ratio: 1672 / 941;
    max-width: 1672px;
    margin: -13% auto 0;
    cursor: crosshair;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 88%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
}

.home-page .hero-section .image,
.home-page .hero-section .canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-page .hero-section .canvas {
    display: block;
}

@media (max-width: 767.98px) {
    .home-page .hero-section .media {
        margin-top: 0;
    }
}

.home-page .hero-section {
    padding-bottom: 0;
}

.home-page .hero-section .text {
    color: var(--muted-color);
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
}

.home-page .hero-section .heading {
    font-size: clamp(2rem, 4.6vw, 4rem);
    background: linear-gradient(100deg, var(--dark-color) 0%, var(--main-color) 25%, color-mix(in srgb, var(--main-color) 55%, var(--accent-color)) 50%, var(--main-ink) 75%, var(--dark-color) 100%);
    background-size: 300% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--main-color);
    -webkit-text-fill-color: transparent;
}

.home-page .hero-section .heading span {
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .home-page .hero-section .heading {
        animation: hero-gradient 8s ease-in-out infinite alternate;
    }
}

@keyframes hero-gradient {
    to { background-position: 100% 50%; }
}

.home-page .hero-section .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* overhead */
.home-page .overhead-section {
    background: var(--second-color);
}

.home-page .overhead-section .car {
    position: relative;
    width: min(100%, 460px);
    margin: 0 auto;
}

.home-page .overhead-section .image {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: none;
    filter: none;
}

.home-page .overhead-section .spot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 2;
    transform: translate(-50%, -50%);
}

.home-page .overhead-section .dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 3px solid var(--second-color);
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--dark-color) 35%, transparent);
}

.home-page .overhead-section .dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid var(--second-color);
    border-radius: 50%;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .home-page .overhead-section .dot::after {
        animation: spot-pulse 1.8s ease-out infinite;
    }

    .home-page .overhead-section .spot:nth-child(odd) .dot::after {
        animation-delay: 0.9s;
    }
}

@keyframes spot-pulse {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.2); }
}

.home-page .overhead-section .line,
.home-page .overhead-section .spot .label {
    display: none;
}

.home-page .overhead-section .label {
    margin: 0;
}

.home-page .overhead-section .title {
    display: block;
    color: var(--heading-color);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.home-page .overhead-section .text {
    display: block;
    margin-top: 4px;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.45;
}

.home-page .overhead-section .legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.home-page .overhead-section .legend li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.home-page .overhead-section .legend .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    font-size: 14px;
    font-weight: 800;
}

@media (min-width: 1200px) {
    .home-page .overhead-section .car {
        --reach: 320px;
        width: 440px;
    }

    .home-page .overhead-section .spot {
        display: flex;
        align-items: center;
        transform: translateY(-50%);
    }

    .home-page .overhead-section .spot.right {
        right: calc(-1 * var(--reach));
    }

    .home-page .overhead-section .spot.left {
        right: calc(100% - var(--x));
        left: calc(-1 * var(--reach));
        flex-direction: row-reverse;
    }

    .home-page .overhead-section .spot.right .dot {
        margin-left: -8px;
    }

    .home-page .overhead-section .spot.left .dot {
        margin-right: -8px;
    }

    .home-page .overhead-section .dot {
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .home-page .overhead-section .dot .number {
        display: none;
    }

    .home-page .overhead-section .line {
        display: block;
        flex: 1;
        min-width: 32px;
        margin: 0 6px;
        border-top: 1px dashed color-mix(in srgb, var(--muted-color) 60%, var(--second-color));
    }

    .home-page .overhead-section .spot .label {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        flex: none;
        gap: 10px 12px;
        width: 270px;
        padding: 20px 22px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        background: var(--second-color);
        box-shadow: var(--shadow);
        transition: border-color 0.3s ease, transform 0.3s var(--ease);
    }

    .home-page .overhead-section .spot:hover .label {
        border-color: var(--main-color);
        transform: translateY(-2px);
    }

    .home-page .overhead-section .label .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--third-color);
        color: var(--main-color);
    }

    .home-page .overhead-section .label .icon svg,
    .home-page .overhead-section .label .icon i[data-lucide] {
        width: 20px;
        height: 20px;
    }

    .home-page .overhead-section .label .body {
        display: contents;
    }

    .home-page .overhead-section .spot .text {
        font-size: 15px;
        grid-column: 1 / -1;
        margin-top: 0;
    }

    .home-page .overhead-section .legend {
        display: none;
    }
}

@media (min-width: 1400px) {
    .home-page .overhead-section .car {
        --reach: 360px;
        width: 520px;
    }

    .home-page .overhead-section .spot .label {
        width: 300px;
        padding: 22px 24px;
    }
}

@media (max-width: 575.98px) {
    .home-page .overhead-section .legend {
        grid-template-columns: 1fr;
    }

    .home-page .overhead-section .dot {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
}

/* promo */
.home-page .promo-section .box {
    position: relative;
    padding: clamp(32px, 5vw, 64px);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-color) 45%, transparent) 0%, transparent 45%), linear-gradient(135deg, var(--main-color) 0%, var(--main-ink) 55%, var(--dark-color) 100%);
    color: var(--main-text-color);
    box-shadow: 0 30px 60px color-mix(in srgb, var(--main-color) 30%, transparent);
}

.home-page .promo-section .sticker {
    position: absolute;
    top: -34px;
    right: clamp(16px, 4vw, 48px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    border: 5px solid var(--second-color);
    border-radius: 50%;
    background: var(--promo-color);
    color: var(--promo-text-color);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    box-shadow: var(--shadow);
    transform: rotate(12deg);
}

.home-page .promo-section .sticker strong {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.home-page .promo-section .sticker::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 3px solid var(--promo-color);
    border-radius: 50%;
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .home-page .promo-section .sticker {
        animation: promo-wobble 4s ease-in-out infinite;
    }

    .home-page .promo-section .sticker::after {
        animation: promo-pulse 2s ease-out infinite;
    }

    .home-page .promo-section .countdown svg {
        animation: promo-pulse-icon 1.5s ease-in-out infinite;
    }
}

@keyframes promo-wobble {
    0%, 100% { transform: rotate(12deg) scale(1); }
    50% { transform: rotate(6deg) scale(1.06); }
}

@keyframes promo-pulse {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes promo-pulse-icon {
    50% { opacity: 0.4; }
}

.home-page .promo-section .countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--promo-color);
    color: var(--promo-text-color);
    font-size: 15px;
    font-weight: 700;
}

.home-page .promo-section .countdown svg,
.home-page .promo-section .countdown i[data-lucide] {
    width: 18px;
    height: 18px;
}

.home-page .promo-section .heading {
    max-width: 620px;
    color: inherit;
}

.home-page .promo-section .heading span {
    color: var(--promo-color);
}

.home-page .promo-section .text {
    max-width: 600px;
    opacity: 0.9;
}

.home-page .promo-section .check-list {
    margin-bottom: 0;
}

.home-page .promo-section .check-list svg,
.home-page .promo-section .check-list i[data-lucide] {
    background: var(--second-color);
    color: var(--main-color);
}

.home-page .promo-section .offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 24px;
    border-radius: var(--radius);
    background: var(--second-color);
    color: var(--heading-color);
}

.home-page .promo-section .offer .title {
    margin-bottom: 4px;
    font-size: 1.125rem;
    font-weight: 700;
}

.home-page .promo-section .price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: var(--third-color);
}

.home-page .promo-section .price .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}

.home-page .promo-section .price .value {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.home-page .promo-section .price small {
    color: var(--muted-color);
    font-size: 15px;
    font-weight: 600;
}

.home-page .promo-section .price del {
    margin-right: 6px;
    color: var(--muted-color);
    font-size: 1rem;
    font-weight: 500;
}

.home-page .promo-section .price.highlight {
    border: 2px dashed var(--promo-text-color);
    background: var(--promo-color);
}

.home-page .promo-section .price.highlight .label {
    color: var(--promo-text-color);
    font-weight: 700;
}

.home-page .promo-section .price.highlight svg,
.home-page .promo-section .price.highlight i[data-lucide] {
    width: 18px;
    height: 18px;
}

.home-page .promo-section .price.highlight del {
    color: var(--promo-text-color);
    opacity: 0.6;
}

.home-page .promo-section .offer .t-btn {
    margin-top: 8px;
    border: 0;
    background: var(--main-color);
    color: var(--main-text-color);
    font-size: 17px;
}

.home-page .promo-section .offer .t-btn .icon {
    background: var(--promo-color);
    color: var(--promo-text-color);
}

.home-page .promo-section .offer .t-btn:hover {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.home-page .promo-section .offer .phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
    font-size: 16px;
    font-weight: 600;
}

.home-page .promo-section .offer .phone:hover {
    color: var(--main-color);
}

.home-page .promo-section .offer .phone svg,
.home-page .promo-section .offer .phone i[data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--main-color);
}

.home-page .promo-section .note {
    margin: 14px 0 0;
    font-size: 15px;
    opacity: 0.8;
}

@media (max-width: 575.98px) {
    .home-page .promo-section .box {
        padding-top: 88px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .home-page .promo-section .sticker {
        width: 108px;
        height: 108px;
        font-size: 14px;
    }

    .home-page .promo-section .sticker strong {
        font-size: 1.375rem;
    }

    .home-page .promo-section .offer {
        padding: 16px;
    }

    .home-page .promo-section .price {
        padding: 12px 14px;
    }

    .home-page .promo-section .offer .phone {
        flex-wrap: wrap;
        text-align: center;
    }
}

.home-page .promo-section {
    padding-top: 48px;
}

.home-page .about-section {
    padding-top: 0;
}

/* about */
.home-page .about-section .media,
.about-page .intro-section .media {
    position: relative;
}

.home-page .about-section .image,
.about-page .intro-section .image {
    width: 100%;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.home-page .about-section .stamp,
.about-page .intro-section .stamp {
    position: absolute;
    right: 24px;
    bottom: -28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border: 6px solid var(--second-color);
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transform: rotate(-8deg);
}

.home-page .about-section .stamp strong,
.about-page .intro-section .stamp strong {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.home-page .about-section .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(64px, 7vw, 96px);
    border-top: 1px solid var(--border-color);
}

.home-page .about-section .stat {
    padding: 32px 24px 0;
}

.home-page .about-section .stat + .stat {
    border-left: 1px solid var(--border-color);
}

.home-page .about-section .number {
    margin-bottom: 6px;
    color: var(--heading-color);
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.home-page .about-section .number span {
    color: var(--main-color);
}

.home-page .about-section .label {
    color: var(--muted-color);
}

/* services */
.home-page .services-section {
    background: var(--third-color);
}

.home-page .services-section .service-card {
    border-color: transparent;
}

/* gallery */
.home-page .gallery-section .bento .item:nth-child(n + 2) .meta {
    font-size: 15px;
}

/* banner */
.home-page .banner-section {
    padding-top: 0;
}

.home-page .banner-section .box {
    display: flex;
    align-items: center;
    min-height: 480px;
    padding: clamp(32px, 6vw, 80px);
    border-radius: var(--radius-lg);
    background: var(--overlay), url("../images/site/banner4.webp") center / cover no-repeat, var(--dark-color);
    color: var(--dark-text-color);
}

@media (min-width: 992px) {
    .home-page .banner-section .box {
        background-attachment: scroll, fixed, scroll;
    }
}

.home-page .banner-section .content {
    max-width: 560px;
}

.home-page .banner-section .heading {
    color: inherit;
}

.home-page .banner-section .text {
    margin-bottom: 28px;
    opacity: 0.85;
}

/* reviews */
.home-page .reviews-section {
    background: var(--third-color);
}

.home-page .reviews-section .card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 32px;
    border: 0;
    border-radius: var(--radius);
    background: var(--second-color);
}

.home-page .reviews-section .quote {
    position: absolute;
    top: 24px;
    right: 24px;
    color: color-mix(in srgb, var(--main-color) 22%, transparent);
}

.home-page .reviews-section .quote svg,
.home-page .reviews-section .quote i[data-lucide] {
    width: 44px;
    height: 44px;
    fill: currentColor;
    stroke: none;
}

.home-page .reviews-section .stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
    color: var(--star-color);
}

.home-page .reviews-section .stars svg,
.home-page .reviews-section .stars i[data-lucide] {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.home-page .reviews-section .text {
    margin-bottom: 24px;
    color: var(--heading-color);
}

.home-page .reviews-section .author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.home-page .reviews-section .avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    font-weight: 700;
}

.home-page .reviews-section .name {
    display: block;
    color: var(--heading-color);
    font-weight: 700;
}

.home-page .reviews-section .role {
    display: block;
    color: var(--muted-color);
    font-size: 15px;
}

/* loyalty */
.home-page .loyalty-section .box {
    padding: clamp(32px, 5vw, 64px);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--third-color) 0%, color-mix(in srgb, var(--main-color) 14%, var(--second-color)) 100%);
}

.home-page .loyalty-section .text {
    max-width: 560px;
}

.home-page .loyalty-section .image {
    display: block;
    width: min(100%, 340px);
    margin: 0 auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    transform: rotate(4deg);
}

/* faq */
.home-page .faq-section {
    padding-top: 0;
}

@media (min-width: 992px) {
    .home-page .faq-section .intro-box {
        position: sticky;
        top: calc(var(--header-height) + 24px);
    }
}

.home-page .faq-section .text {
    margin-bottom: 28px;
    color: var(--muted-color);
}

@media (max-width: 991.98px) {
    .home-page .about-section .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-page .about-section .stat:nth-child(3) {
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .home-page .about-section .stats {
        grid-template-columns: 1fr;
    }

    .home-page .about-section .stat {
        padding: 24px 0;
    }

    .home-page .about-section .stat + .stat {
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .home-page .about-section .stamp,
    .about-page .intro-section .stamp {
        width: 112px;
        height: 112px;
        right: 12px;
        font-size: 14px;
    }

    .home-page .about-section .stamp strong,
    .about-page .intro-section .stamp strong {
        font-size: 1.25rem;
    }
}

/***** ABOUT *****/

/* intro */
.about-page .intro-section .lead {
    margin-bottom: 20px;
    color: var(--heading-color);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.45;
}

.about-page .intro-section .lead span {
    color: var(--muted-color);
}

/* values */
.about-page .values-section {
    padding-top: 0;
}

.about-page .values-section .card,
.loyalty-page .steps-section .card {
    height: 100%;
    padding: 32px;
    border: 0;
    border-radius: var(--radius);
    background: var(--third-color);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.about-page .values-section .card:hover,
.loyalty-page .steps-section .card:hover {
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.about-page .values-section .card:hover .title,
.loyalty-page .steps-section .card:hover .title {
    color: inherit;
}

.about-page .values-section .icon,
.loyalty-page .steps-section .card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--second-color);
    color: var(--main-color);
}

.about-page .values-section .title,
.loyalty-page .steps-section .card .title {
    margin-bottom: 10px;
    font-size: 1.25rem;
    transition: color 0.4s ease;
}

/***** SERVICES *****/

/* packages */
.services-page .packages-section .title {
    font-size: 1.375rem;
}

/* ceramic */
.services-page .ceramic-section {
    padding-top: 0;
}

.services-page .ceramic-section .box {
    padding: clamp(32px, 5vw, 64px);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--main-color) 45%, transparent) 0%, transparent 55%), var(--dark-color);
    color: var(--dark-text-color);
}

.services-page .ceramic-section .heading {
    color: inherit;
}

.services-page .ceramic-section .text {
    margin-bottom: 28px;
    opacity: 0.85;
}

.services-page .ceramic-section .plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.services-page .ceramic-section .plan {
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--dark-text-color) 14%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--dark-text-color) 6%, transparent);
}

.services-page .ceramic-section .plan .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
}

.services-page .ceramic-section .plan .title {
    margin-bottom: 10px;
    color: inherit;
    font-size: 1.25rem;
}

.services-page .ceramic-section .plan .text {
    margin-bottom: 20px;
    font-size: 16px;
    opacity: 0.75;
}

.services-page .ceramic-section .plan .price {
    margin-bottom: 4px;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.services-page .ceramic-section .plan .time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-color);
    font-weight: 600;
}

.services-page .ceramic-section .plan .time svg,
.services-page .ceramic-section .plan .time i[data-lucide] {
    width: 16px;
    height: 16px;
}

@media (max-width: 575.98px) {
    .services-page .ceramic-section .plans {
        grid-template-columns: 1fr;
    }
}

/***** SERVICE DETAIL *****/

/* detail */
.service-detail-page .detail-section .content > .title,
.gallery-detail-page .detail-section .content > .title {
    margin: 36px 0 0;
    font-size: 1.375rem;
}

.service-detail-page .detail-section .text,
.gallery-detail-page .detail-section .text {
    color: var(--text-color);
}

.service-detail-page .detail-section .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.service-detail-page .detail-section .tags li {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--third-color);
    color: var(--heading-color);
    font-size: 16px;
    font-weight: 600;
}

.service-detail-page .detail-section .facts,
.gallery-detail-page .detail-section .facts {
    padding: clamp(28px, 3vw, 36px);
    border-radius: var(--radius);
    background: var(--third-color);
}

@media (min-width: 992px) {
    .service-detail-page .detail-section .facts,
    .gallery-detail-page .detail-section .facts {
        position: sticky;
        top: calc(var(--header-height) + 24px);
    }
}

.service-detail-page .detail-section .facts .title {
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.service-detail-page .detail-section .prices li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.service-detail-page .detail-section .prices strong {
    color: var(--main-ink);
    font-size: 1.25rem;
    white-space: nowrap;
}

.service-detail-page .detail-section .time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 22px;
    color: var(--heading-color);
    font-weight: 600;
}

.service-detail-page .detail-section .time svg,
.service-detail-page .detail-section .time i[data-lucide] {
    width: 20px;
    height: 20px;
    color: var(--main-color);
}

.service-detail-page .detail-section .phone,
.gallery-detail-page .detail-section .phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--heading-color);
    font-weight: 700;
}

.service-detail-page .detail-section .phone:hover,
.gallery-detail-page .detail-section .phone:hover {
    color: var(--main-color);
}

.service-detail-page .detail-section .phone svg,
.gallery-detail-page .detail-section .phone svg,
.service-detail-page .detail-section .phone i[data-lucide],
.gallery-detail-page .detail-section .phone i[data-lucide] {
    width: 18px;
    height: 18px;
}

.service-detail-page .detail-section .note {
    margin: 18px 0 0;
    color: var(--muted-color);
    font-size: 15px;
}

/* related */
.service-detail-page .related-section .service-card {
    border-color: var(--border-color);
}

/***** GALLERY *****/

/* projects */
.gallery-page .projects-section .bento {
    --columns: 3;
    grid-auto-rows: minmax(280px, auto);
}

.gallery-page .projects-section .bento .item {
    min-height: 280px;
}

@media (max-width: 991.98px) {
    .gallery-page .projects-section .bento {
        --columns: 2;
    }
}

@media (max-width: 575.98px) {
    .gallery-page .projects-section .bento {
        --columns: 1;
    }
}

/***** GALLERY DETAIL *****/

/* detail */
.gallery-detail-page .detail-section .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.gallery-detail-page .detail-section .info .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-color);
}

.gallery-detail-page .detail-section .info svg,
.gallery-detail-page .detail-section .info i[data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--main-color);
}

.gallery-detail-page .detail-section .info strong {
    color: var(--heading-color);
}

.gallery-detail-page .detail-section .info .price {
    color: var(--main-ink);
    font-size: 1.25rem;
}

.gallery-detail-page .detail-section .facts .t-btn {
    margin-top: 24px;
}

/* photos */
.gallery-detail-page .photos-section {
    background: var(--third-color);
}

.gallery-detail-page .photos-section .item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.gallery-detail-page .photos-section .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.gallery-detail-page .photos-section .zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--dark-color) 45%, transparent);
    color: var(--dark-text-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-detail-page .photos-section .item:hover .image {
    transform: scale(1.06);
}

.gallery-detail-page .photos-section .item:hover .zoom,
.gallery-detail-page .photos-section .item:focus-visible .zoom {
    opacity: 1;
}

/* pager */
.gallery-detail-page .photos-section .pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.gallery-detail-page .photos-section .link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--heading-color);
    font-weight: 700;
}

.gallery-detail-page .photos-section .link.next {
    text-align: right;
}

.gallery-detail-page .photos-section .link small {
    display: block;
    color: var(--muted-color);
    font-size: 14px;
    font-weight: 500;
}

.gallery-detail-page .photos-section .link .arrow {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--second-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gallery-detail-page .photos-section .link:hover .arrow {
    background: var(--main-color);
    color: var(--main-text-color);
}

@media (max-width: 767.98px) {
    .gallery-detail-page .photos-section .pager {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-detail-page .photos-section .link.next {
        justify-content: flex-end;
    }

    .gallery-detail-page .photos-section .pager .t-btn {
        order: 3;
    }
}

/***** PRICING *****/

/* packages */
.pricing-page .packages-section .table-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow-x: auto;
}

.pricing-page .packages-section .table {
    min-width: 760px;
    margin: 0;
    vertical-align: middle;
}

.pricing-page .packages-section thead th {
    padding: 18px 20px;
    border: 0;
    background: var(--dark-color);
    color: var(--dark-text-color);
    font-size: 15px;
    font-weight: 600;
}

.pricing-page .packages-section tbody th,
.pricing-page .packages-section tbody td {
    padding: 20px;
    border-color: var(--border-color);
}

.pricing-page .packages-section tbody tr:last-child th,
.pricing-page .packages-section tbody tr:last-child td {
    border-bottom: 0;
}

.pricing-page .packages-section tbody tr:hover > * {
    background: var(--third-color);
}

.pricing-page .packages-section .title {
    display: block;
    color: var(--heading-color);
    font-weight: 700;
}

.pricing-page .packages-section .title a:hover {
    color: var(--main-color);
}

.pricing-page .packages-section .title small {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--third-color);
    color: var(--muted-color);
    font-size: 14px;
    font-weight: 600;
}

.pricing-page .packages-section tbody .text {
    display: block;
    margin-top: 4px;
    color: var(--muted-color);
    font-size: 15px;
    font-weight: 400;
}

.pricing-page .packages-section .price {
    width: 170px;
    text-align: center;
    white-space: nowrap;
}

.pricing-page .packages-section td.price {
    color: var(--main-ink);
    font-size: 1.125rem;
    font-weight: 800;
}

/* extras */
.pricing-page .extras-section {
    background: var(--third-color);
}

.pricing-page .extras-section .list {
    display: grid;
    gap: 12px;
}

.pricing-page .extras-section .list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-radius: var(--radius-sm);
    background: var(--second-color);
    color: var(--heading-color);
}

.pricing-page .extras-section .list strong {
    color: var(--main-ink);
    white-space: nowrap;
}

.pricing-page .extras-section .note {
    margin: 24px 0 0;
    color: var(--muted-color);
    font-size: 15px;
}

.pricing-page .extras-section .loyalty {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 20px 24px;
    border-radius: var(--radius);
    background: var(--dark-color);
    color: var(--dark-text-color);
    transition: background-color 0.3s ease;
}

.pricing-page .extras-section .loyalty:hover {
    background: var(--main-color);
}

.pricing-page .extras-section .loyalty .icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--accent-text-color);
}

.pricing-page .extras-section .loyalty strong {
    display: block;
    font-size: 1.125rem;
}

.pricing-page .extras-section .loyalty > svg,
.pricing-page .extras-section .loyalty > i[data-lucide] {
    flex: none;
    margin-left: auto;
}

@media (min-width: 768px) {
    .pricing-page .extras-section .list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .pricing-page .packages-section .table-box {
        border: 0;
        overflow: visible;
    }

    .pricing-page .packages-section .table,
    .pricing-page .packages-section tbody {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .pricing-page .packages-section thead {
        display: none;
    }

    .pricing-page .packages-section tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 12px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .pricing-page .packages-section tbody th {
        grid-column: 1 / -1;
        border: 0;
        padding-bottom: 6px;
    }

    .pricing-page .packages-section tbody th,
    .pricing-page .packages-section tbody td {
        display: block;
        min-width: 0;
    }

    .pricing-page .packages-section .price {
        width: auto;
    }

    .pricing-page .packages-section tbody td {
        padding: 6px 8px 16px;
        border: 0;
    }

    .pricing-page .packages-section tbody td::before {
        content: attr(data-label);
        display: block;
        color: var(--muted-color);
        font-size: 14px;
        font-weight: 500;
        white-space: normal;
    }

    .pricing-page .packages-section tbody td[colspan] {
        grid-column: 1 / -1;
        padding-left: 20px;
        text-align: left;
    }

    .pricing-page .extras-section .list li {
        padding: 14px 18px;
    }
}

/***** LOYALTY *****/

/* intro */
.loyalty-page .intro-section .text {
    color: var(--muted-color);
}

.loyalty-page .intro-section .card-image {
    display: block;
    width: min(100%, 420px);
    margin: 0 auto;
}

.loyalty-page .intro-section .image {
    width: 100%;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    transform: rotate(3deg);
    transition: transform 0.5s var(--ease);
}

.loyalty-page .intro-section .card-image:hover .image {
    transform: rotate(0deg) scale(1.02);
}

/* steps */
.loyalty-page .steps-section {
    background: var(--third-color);
}

.loyalty-page .steps-section .stamps {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 48px;
}

.loyalty-page .steps-section .stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 2px dashed color-mix(in srgb, var(--main-color) 40%, transparent);
    border-radius: 50%;
    background: var(--second-color);
    color: var(--heading-color);
    line-height: 1.1;
    text-align: center;
}

.loyalty-page .steps-section .stamp strong {
    font-size: clamp(1rem, 1.8vw, 1.375rem);
    font-weight: 800;
}

.loyalty-page .steps-section .stamp span {
    font-size: 14px;
}

.loyalty-page .steps-section .stamp.reward {
    border: 0;
    background: var(--main-color);
    color: var(--main-text-color);
}

.loyalty-page .steps-section .card {
    background: var(--second-color);
}

.loyalty-page .steps-section .card .icon {
    background: var(--third-color);
}

/* savings */
.loyalty-page .savings-section .table-responsive {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.loyalty-page .savings-section .table {
    margin: 0;
}

.loyalty-page .savings-section thead th {
    padding: 16px 18px;
    border: 0;
    background: var(--dark-color);
    color: var(--dark-text-color);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.loyalty-page .savings-section tbody th,
.loyalty-page .savings-section tbody td {
    padding: 16px 18px;
    border-color: var(--border-color);
    white-space: nowrap;
}

.loyalty-page .savings-section tbody tr:last-child > * {
    border-bottom: 0;
}

.loyalty-page .savings-section .price {
    color: var(--main-ink);
    font-weight: 800;
}

/* rules */
.loyalty-page .rules-section {
    padding-top: 0;
}

.loyalty-page .rules-section .content {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px);
    border-radius: var(--radius-lg);
    background: var(--third-color);
}

.loyalty-page .rules-section .actions {
    justify-content: flex-start;
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .loyalty-page .steps-section .stamps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/***** FAQ *****/

/* questions */
@media (min-width: 992px) {
    .faq-page .questions-section .sidebar {
        position: sticky;
        top: calc(var(--header-height) + 24px);
    }
}

.faq-page .questions-section .search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 4px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--second-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-page .questions-section .search:focus-within {
    border-color: var(--main-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color) 15%, transparent);
}

.faq-page .questions-section .search svg,
.faq-page .questions-section .search i[data-lucide] {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--muted-color);
}

.faq-page .questions-section .search input {
    width: 100%;
    min-height: 48px;
    border: 0;
    background: transparent;
    color: var(--heading-color);
    font-size: 16px;
    outline: 0;
}

.faq-page .questions-section .categories {
    display: grid;
    gap: 4px;
    margin-bottom: 24px;
}

.faq-page .questions-section .categories a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--heading-color);
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.faq-page .questions-section .categories a:hover {
    background: var(--third-color);
}

.faq-page .questions-section .categories svg,
.faq-page .questions-section .categories i[data-lucide] {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--main-color);
}

.faq-page .questions-section .categories small {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--third-color);
    color: var(--muted-color);
    font-size: 14px;
}

.faq-page .questions-section .categories .highlight {
    background: color-mix(in srgb, var(--main-color) 10%, var(--second-color));
    color: var(--main-ink);
}

.faq-page .questions-section .help {
    padding: 28px;
    border-radius: var(--radius);
    background: var(--dark-color);
    color: var(--dark-text-color);
}

.faq-page .questions-section .help .title {
    margin-bottom: 6px;
    font-size: 1.25rem;
    font-weight: 700;
}

.faq-page .questions-section .help .text {
    margin-bottom: 18px;
    opacity: 0.8;
}

.faq-page .questions-section .group {
    margin-bottom: 48px;
}

.faq-page .questions-section .group > .heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.faq-page .questions-section .group > .heading .icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
}

.faq-page .questions-section .group > .heading svg,
.faq-page .questions-section .group > .heading i[data-lucide] {
    width: 22px;
    height: 22px;
}

.faq-page .questions-section .empty {
    padding: 20px 24px;
    border-radius: var(--radius);
    background: var(--third-color);
    color: var(--muted-color);
}

/***** CONTACT *****/

/* info */
.contact-page .info-section .channels {
    display: grid;
    grid-template-columns: 1fr 1.45fr 1.2fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-page .info-section .channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--second-color);
    box-shadow: var(--shadow);
    transition: border-color 0.3s ease, transform 0.3s var(--ease);
}

.contact-page .info-section .channel .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--third-color);
    color: var(--main-color);
    transition: background-color 0.4s ease, color 0.4s ease;
}

.contact-page .info-section .channel .icon svg,
.contact-page .info-section .channel .icon i[data-lucide] {
    width: 22px;
    height: 22px;
}

.contact-page .info-section .channel .label {
    color: var(--muted-color);
    font-size: 15px;
    transition: color 0.4s ease;
}

.contact-page .info-section .channel .value {
    color: var(--heading-color);
    font-size: 1.0625rem;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color 0.4s ease;
}

.contact-page .info-section .channel:hover {
    border-color: var(--main-color);
    transform: translateY(-4px);
}

.contact-page .info-section .channel:hover .icon {
    background: var(--main-color);
    color: var(--main-text-color);
}

.contact-page .info-section .box {
    height: 100%;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--second-color);
    box-shadow: var(--shadow);
}

.contact-page .info-section .box .heading {
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}

.contact-page .info-section .hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 24px;
    margin: 20px 0 24px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.contact-page .info-section .hours dt {
    font-weight: 400;
}

.contact-page .info-section .hours dd {
    margin: 0;
    color: var(--heading-color);
    font-weight: 700;
    text-align: right;
}

.contact-page .info-section .address {
    display: flex;
    gap: 12px;
    color: var(--heading-color);
}

.contact-page .info-section .address svg,
.contact-page .info-section .address i[data-lucide] {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--main-color);
}

.contact-page .info-section .address strong {
    display: block;
}

.contact-page .info-section .box .text {
    margin-bottom: 28px;
    color: var(--muted-color);
}

/* map */
.contact-page .info-section .map {
    height: 100%;
    min-height: 420px;
    border-radius: var(--radius-lg);
    background: var(--third-color);
    overflow: hidden;
}

.contact-page .info-section .map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

@media (max-width: 1199.98px) {
    .contact-page .info-section .channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .contact-page .info-section .channels {
        grid-template-columns: 1fr;
    }

    .contact-page .info-section .channel {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
        padding: 20px;
    }

    .contact-page .info-section .channel .icon {
        margin: 0;
    }

    .contact-page .info-section .channel .value {
        flex-basis: 100%;
    }
}

/***** RESERVATION *****/

/* booking */
.reservation-page .booking-section .trap {
    position: absolute;
    left: -9999px;
}

.reservation-page .booking-section .alert-box {
    margin-bottom: 30px;
    padding: 16px 20px;
    border-left: 4px solid var(--error-color);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--error-color) 8%, var(--second-color));
    color: var(--heading-color);
    font-weight: 600;
}

.reservation-page .booking-section .step {
    margin: 0 0 24px;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.reservation-page .booking-section .step > .title {
    display: flex;
    align-items: center;
    gap: 14px;
    float: left;
    width: 100%;
    margin-bottom: 22px;
    color: var(--heading-color);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.reservation-page .booking-section .number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    font-size: 1rem;
}

/* progress */
.reservation-page .booking-section .step {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.reservation-page .booking-section .step.is-current {
    border-color: var(--main-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color) 12%, transparent), var(--shadow);
}

.reservation-page .booking-section .step .number {
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.reservation-page .booking-section .step .number svg,
.reservation-page .booking-section .step .number i[data-lucide] {
    display: none;
    width: 20px;
    height: 20px;
}

.reservation-page .booking-section .step.is-done .number .digit {
    display: none;
}

.reservation-page .booking-section .step.is-done .number svg,
.reservation-page .booking-section .step.is-done .number i[data-lucide] {
    display: block;
}

.reservation-page .booking-section .step.is-current .number {
    background: var(--promo-color);
    color: var(--promo-text-color);
}

.reservation-page .booking-section .step.is-current .number::after,
.reservation-page .booking-section .summary-box .t-btn.is-ready::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 3px solid var(--promo-color);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.reservation-page .booking-section .summary-box .t-btn.is-ready {
    position: relative;
}

.reservation-page .booking-section .summary-box .t-btn.is-ready::after {
    border-color: var(--main-color);
}

@media (prefers-reduced-motion: no-preference) {
    .reservation-page .booking-section .step.is-current .number::after {
        animation: step-pulse 1.6s ease-out infinite;
    }

    .reservation-page .booking-section .summary-box .t-btn.is-ready::after {
        animation: step-pulse-wide 1.6s ease-out infinite;
    }
}

@keyframes step-pulse {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes step-pulse-wide {
    0% { opacity: 0.8; transform: scale(1, 1); }
    100% { opacity: 0; transform: scale(1.08, 1.4); }
}

.reservation-page .booking-section .services {
    display: grid;
    gap: 12px;
}

@media (min-width: 768px) {
    .reservation-page .booking-section .services {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .reservation-page .booking-section .services {
        grid-template-columns: repeat(3, 1fr);
    }
}

.reservation-page .booking-section .option,
.reservation-page .booking-section .size {
    position: relative;
    display: block;
    cursor: pointer;
}

.reservation-page .booking-section .option input,
.reservation-page .booking-section .size input {
    position: absolute;
    opacity: 0;
}

.reservation-page .booking-section .box {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--second-color);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.reservation-page .booking-section .box .photo {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.reservation-page .booking-section .box .photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.reservation-page .booking-section .option:hover .photo img {
    transform: scale(1.05);
}

.reservation-page .booking-section .box .check {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--second-color);
    border-radius: 50%;
    background: color-mix(in srgb, var(--dark-color) 35%, transparent);
    color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.reservation-page .booking-section .box .check svg,
.reservation-page .booking-section .box .check i[data-lucide] {
    width: 16px;
    height: 16px;
}

.reservation-page .booking-section .option input:checked + .box .check {
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--main-text-color);
}

.reservation-page .booking-section .box .deal {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.reservation-page .booking-section .box .content {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px 16px;
}

.reservation-page .booking-section .box .icon {
    display: inline-flex;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--third-color);
    color: var(--main-color);
}

.reservation-page .booking-section .box .icon svg,
.reservation-page .booking-section .box .icon i[data-lucide] {
    width: 22px;
    height: 22px;
}

.reservation-page .booking-section .box .name {
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.3;
}

.reservation-page .booking-section .box .meta {
    color: var(--muted-color);
    font-size: 15px;
}

.reservation-page .booking-section .option:hover .box,
.reservation-page .booking-section .size:hover span {
    border-color: var(--main-color);
}

.reservation-page .booking-section .option input:checked + .box {
    border-color: var(--main-color);
    background: color-mix(in srgb, var(--main-color) 6%, var(--second-color));
}

.reservation-page .booking-section .option input:checked + .box .icon {
    background: var(--main-color);
    color: var(--main-text-color);
}

.reservation-page .booking-section .option input:focus-visible + .box,
.reservation-page .booking-section .size input:focus-visible + span {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
}

.reservation-page .booking-section .hint {
    display: flex;
    gap: 8px;
    margin: 14px 0 24px;
    color: var(--muted-color);
    font-size: 15px;
}

.reservation-page .booking-section .hint svg,
.reservation-page .booking-section .hint i[data-lucide] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--main-color);
}

.reservation-page .booking-section .hint a {
    color: var(--main-ink);
    font-weight: 600;
}

.reservation-page .booking-section .label {
    margin-bottom: 10px;
    color: var(--heading-color);
    font-weight: 700;
}

.reservation-page .booking-section .sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reservation-page .booking-section .size span {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--heading-color);
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.reservation-page .booking-section .size input:checked + span {
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--main-text-color);
}

/* calendar */
.reservation-page .booking-section .calendar {
    padding: 20px;
    border-radius: var(--radius);
    background: var(--third-color);
}

.reservation-page .booking-section .calendar .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.reservation-page .booking-section .calendar .month {
    margin: 0;
    color: var(--heading-color);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: capitalize;
}

.reservation-page .booking-section .calendar .nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--second-color);
    color: var(--heading-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.reservation-page .booking-section .calendar .nav:hover:not(:disabled) {
    background: var(--main-color);
    color: var(--main-text-color);
}

.reservation-page .booking-section .calendar .nav:disabled {
    opacity: 0.35;
}

.reservation-page .booking-section .weekdays,
.reservation-page .booking-section .days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.reservation-page .booking-section .weekdays {
    margin-bottom: 6px;
    color: var(--muted-color);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.reservation-page .booking-section .days.loading {
    opacity: 0.4;
    pointer-events: none;
}

.reservation-page .booking-section .day {
    height: 46px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted-color);
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.reservation-page .booking-section .day:disabled {
    opacity: 0.45;
    text-decoration: line-through;
}

.reservation-page .booking-section .day.free {
    border-color: color-mix(in srgb, var(--main-color) 35%, transparent);
    background: var(--second-color);
    color: var(--main-ink);
}

.reservation-page .booking-section .day.free:hover,
.reservation-page .booking-section .day.active {
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--main-text-color);
}

.reservation-page .booking-section .day:focus-visible,
.reservation-page .booking-section .slot:focus-visible {
    outline: 3px solid var(--main-color);
    outline-offset: 2px;
}

.reservation-page .booking-section .calendar .legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--muted-color);
    font-size: 14px;
}

.reservation-page .booking-section .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    background: var(--second-color);
}

.reservation-page .booking-section .dot.busy {
    margin-left: 10px;
    border-color: var(--border-color);
    background: var(--third-color);
}

.reservation-page .booking-section .slots {
    margin-top: 20px;
}

.reservation-page .booking-section .slots .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.reservation-page .booking-section .slot {
    padding: 10px 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--second-color);
    color: var(--heading-color);
    font-weight: 700;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.reservation-page .booking-section .slot:hover {
    border-color: var(--main-color);
}

.reservation-page .booking-section .slot.active {
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--main-text-color);
}

.reservation-page .booking-section .empty {
    margin: 0;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    background: var(--third-color);
    color: var(--muted-color);
}

/* fields */
.reservation-page .booking-section .field {
    display: block;
    margin-bottom: 6px;
    color: var(--heading-color);
    font-weight: 600;
}

.reservation-page .booking-section .input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--second-color);
    color: var(--heading-color);
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reservation-page .booking-section .input:focus {
    border-color: var(--main-color);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color) 15%, transparent);
}

.reservation-page .booking-section .check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.reservation-page .booking-section .check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--main-color);
}

.reservation-page .booking-section .error {
    margin: 6px 0 0;
    color: var(--error-color);
    font-size: 15px;
    font-weight: 600;
}

/* summary */
.reservation-page .booking-section .summary-box {
    padding: 32px;
    border-radius: var(--radius);
    background: var(--dark-color);
    color: var(--dark-text-color);
}

@media (min-width: 992px) {
    .reservation-page .booking-section .summary-box {
        position: sticky;
        top: calc(var(--header-height) + 24px);
    }
}

.reservation-page .booking-section .summary-box .title {
    margin-bottom: 16px;
    color: inherit;
    font-size: 1.375rem;
}

.reservation-page .booking-section .summary {
    margin: 0 0 24px;
}

.reservation-page .booking-section .summary div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--dark-text-color) 12%, transparent);
}

.reservation-page .booking-section .summary dt {
    font-weight: 500;
    opacity: 0.7;
}

.reservation-page .booking-section .summary dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.reservation-page .booking-section .summary .total dd {
    color: var(--accent-color);
    font-size: 1.625rem;
}

.reservation-page .booking-section .summary-box .t-btn {
    width: 100%;
}

.reservation-page .booking-section .summary-box .note {
    display: flex;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 15px;
    opacity: 0.8;
}

.reservation-page .booking-section .summary-box .note svg,
.reservation-page .booking-section .summary-box .note i[data-lucide] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

/* done */
.reservation-page .booking-section .done {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px);
    border-radius: var(--radius-lg);
    background: var(--third-color);
    text-align: center;
}

.reservation-page .booking-section .done .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
}

.reservation-page .booking-section .done .icon svg,
.reservation-page .booking-section .done .icon i[data-lucide] {
    width: 36px;
    height: 36px;
}

.reservation-page .booking-section .done .text {
    color: var(--muted-color);
}

.reservation-page .booking-section .done .summary {
    margin-top: 24px;
    text-align: left;
}

.reservation-page .booking-section .done .summary div {
    border-color: var(--border-color);
}

.reservation-page .booking-section .done .actions {
    margin-top: 28px;
}

/***** NOT FOUND *****/

/* message */
.notfound-page .message-section {
    padding: clamp(60px, 10vw, 120px) 0;
    text-align: center;
}

.notfound-page .message-section .content {
    max-width: 560px;
    margin: 0 auto;
}

.notfound-page .message-section .code {
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--main-color), var(--dark-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(5rem, 16vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.notfound-page .message-section .text {
    margin-bottom: 28px;
    color: var(--muted-color);
}

.notfound-page .message-section .buttons {
    justify-content: center;
}

/***** FOOTER *****/

.footer {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 0 0;
    background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--main-color) 35%, transparent) 0%, transparent 45%), var(--dark-color);
    color: color-mix(in srgb, var(--dark-text-color) 72%, transparent);
    font-size: 16px;
    overflow: hidden;
}

.footer a {
    transition: color 0.3s ease;
}

.footer .label {
    margin-bottom: 8px;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* main */
.footer .main {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.4fr 1fr 1.1fr;
    align-items: start;
    gap: 40px 32px;
}

.footer .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 16px;
    text-align: center;
}

.footer .logo {
    display: inline-block;
    width: clamp(200px, 20vw, 280px);
}

.footer .logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

.footer .phone {
    color: var(--dark-text-color);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.footer .phone:hover {
    color: var(--accent-color);
}

.footer .social {
    width: 52px;
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--dark-text-color) 22%, transparent);
    background: transparent;
    color: var(--dark-text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}

.footer .social svg {
    width: 22px;
    height: 22px;
}

.footer .social:hover {
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--main-text-color);
    transform: translateY(-3px);
}

/* contact */
.footer .item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
}

.footer .item .icon svg,
.footer .item .icon i[data-lucide] {
    width: 20px;
    height: 20px;
}

.footer .item .value {
    display: block;
    margin: 0;
    color: var(--dark-text-color);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.footer .item a.value[href^="mailto"] {
    font-size: 16px;
}

.footer .item a.value:hover {
    color: var(--accent-color);
}

.footer .hours {
    display: grid;
    gap: 10px;
    margin: 0;
}

.footer .hours div {
    display: grid;
}

.footer .hours dt {
    font-size: 15px;
    font-weight: 400;
}

.footer .hours dd {
    margin: 0;
    color: var(--dark-text-color);
    font-weight: 600;
}

/* bottom */
.footer .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(48px, 6vw, 72px);
    padding: 24px 0;
    border-top: 1px solid color-mix(in srgb, var(--dark-text-color) 12%, transparent);
    font-size: 15px;
}

.footer .bottom .text {
    margin: 0;
}

.footer .credit {
    color: var(--dark-text-color);
    font-weight: 600;
}

.footer .credit:hover {
    color: var(--accent-color);
}

.footer .top-link {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--main-text-color);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}

.footer .top-link.is-visible {
    opacity: 1;
    visibility: visible;
}

.footer .top-link:hover {
    background: var(--dark-text-color);
    color: var(--dark-color);
}

@media (max-width: 1199.98px) {
    .footer .main {
        grid-template-columns: 1fr 1fr;
    }

    .footer .brand {
        grid-column: 1 / -1;
        order: -1;
        padding-bottom: 8px;
    }
}

@media (max-width: 575.98px) {
    .footer .main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer .item .icon {
        margin-bottom: 12px;
    }
}