/* Home product tour + back-to-top button. Loaded after site.css by frontend.layouts.app. */

/* ---------- Product tour ---------- */
.tour__grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.tour__tabs {
    display: grid;
    gap: .6rem;
    align-content: start;
}

.tour__tab {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: all .2s ease;
}

.tour__tab i {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.3rem;
    color: var(--rose);
    background: rgba(226, 55, 92, .1);
    transition: all .2s ease;
}

.tour__tab b {
    display: block;
    font-family: var(--font-head);
    font-size: 1rem;
}

.tour__tab small {
    color: var(--faint);
    font-size: .84rem;
}

.tour__tab:hover {
    border-color: rgba(226, 55, 92, .35);
}

.tour__tab.is-on {
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px rgba(226, 55, 92, .4), 0 20px 36px -24px rgba(225, 6, 0, .6);
}

.tour__tab.is-on i {
    color: #fff;
    background: var(--grad);
}

.tour__screen {
    position: relative;
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 40px 70px -44px rgba(20, 16, 15, .55);
    overflow: hidden;
    min-height: 400px;
}

.tour__bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .75rem 1rem;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.tour__bar>i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e3dcda;
}

.tour__bar>i:first-child {
    background: #ff8aa0;
}

.tour__bar span {
    margin-left: .6rem;
    padding: .2rem .75rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: .75rem;
    color: var(--muted);
}

.tour__bar span i {
    display: inline;
    width: auto;
    height: auto;
    background: none;
    margin-right: .3rem;
    color: #10b981;
}

.tour__panel {
    padding: 1.4rem;
    animation: tour-in .35s ease;
}

.tour__panel[hidden] {
    display: none;
}

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

.tour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tour__head b {
    font-family: var(--font-head);
    font-size: 1.15rem;
}

.tour__head em {
    font-style: normal;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
}

.tour__cal-head,
.tour__cal-row {
    display: grid;
    grid-template-columns: 52px repeat(3, minmax(0, 1fr));
    gap: .5rem;
    align-items: center;
}

.tour__cal-head b {
    text-align: center;
    font-size: .85rem;
}

.tour__cal-row {
    margin-top: .5rem;
}

.tour__cal-row>span {
    font-size: .8rem;
    font-weight: 700;
    color: var(--faint);
}

.tour__cal-row i {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 .7rem;
    border-radius: 10px;
    background: var(--soft);
    border: 1px dashed var(--line);
    font-style: normal;
    font-size: .85rem;
    font-weight: 700;
}

.tour__cal-row i.is-rose {
    color: #be123c;
    background: #ffe4ea;
    border: 0;
    border-left: 4px solid #e2375c;
}

.tour__cal-row i.is-violet {
    color: #6d28d9;
    background: #ede9fe;
    border: 0;
    border-left: 4px solid #8b5cf6;
}

.tour__cal-row i.is-sky {
    color: #0369a1;
    background: #e0f2fe;
    border: 0;
    border-left: 4px solid #0ea5e9;
}

.tour__cal-row i.is-amber {
    color: #a16207;
    background: #fef3c7;
    border: 0;
    border-left: 4px solid #f59e0b;
}

.tour__bill>div {
    display: flex;
    justify-content: space-between;
    padding: .8rem .2rem;
    border-bottom: 1px dashed var(--line);
    color: var(--muted);
}

.tour__bill b {
    color: var(--ink);
}

.tour__bill .is-muted b {
    color: #059669;
}

.tour__bill .is-total {
    border: 0;
    margin-top: .3rem;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}

.tour__bill .is-total b {
    font-size: 1.5rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tour__pay {
    display: flex !important;
    gap: .6rem;
    border: 0 !important;
    padding: .4rem 0 0 !important;
}

.tour__pay em {
    flex: 1;
    padding: .7rem;
    border-radius: 12px;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: .9rem;
    color: #047857;
    background: #d1fae5;
}

.tour__pay em+em {
    color: #0369a1;
    background: #e0f2fe;
}

.tour__members {
    display: grid;
    gap: .6rem;
}

.tour__members>div {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    background: var(--soft);
    border: 1px solid var(--line);
}

.tour__members .av {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-head);
    font-weight: 800;
    background: var(--grad);
}

.tour__members b {
    display: block;
}

.tour__members small {
    color: var(--faint);
}

.tour__members .pill {
    margin-left: auto;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-style: normal;
    font-size: .75rem;
    font-weight: 800;
}

.pill.is-amber {
    color: #a16207;
    background: #fef3c7;
}

.pill.is-sky {
    color: #0369a1;
    background: #e0f2fe;
}

.pill.is-violet {
    color: #6d28d9;
    background: #ede9fe;
}

.tour__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.tour__kpis>div {
    padding: .8rem 1rem;
    border-radius: 14px;
    background: var(--soft);
    border: 1px solid var(--line);
}

.tour__kpis small {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--faint);
}

.tour__kpis b {
    font-family: var(--font-head);
    font-size: 1.3rem;
}

.tour__chart {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    height: 190px;
    padding: 1rem 1rem .4rem;
    border-radius: 16px;
    background: var(--soft);
}

.tour__chart span {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
}

.tour__chart span i {
    display: block;
    width: 100%;
    height: var(--h);
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #ff8aa0, #e2375c);
    transform-origin: bottom;
    animation: tour-grow .6s ease both;
}

.tour__chart span:nth-child(6) i {
    background: var(--grad);
}

.tour__chart small {
    font-size: .72rem;
    color: var(--faint);
    font-weight: 600;
}

@keyframes tour-grow {
    from {
        transform: scaleY(0);
    }
}

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

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

    .tour__tab small {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .tour__tab {
        padding: .7rem;
        gap: .6rem;
    }

    .tour__tab i {
        width: 36px;
        height: 36px;
    }

    .tour__tab b {
        font-size: .88rem;
    }

    .tour__cal-head,
    .tour__cal-row {
        grid-template-columns: 40px repeat(3, minmax(0, 1fr));
        gap: .3rem;
    }

    .tour__cal-row i {
        padding: 0 .4rem;
        font-size: .7rem;
        height: 38px;
    }

    .tour__screen {
        min-height: 0;
    }

    .tour__kpis b {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tour__panel,
    .tour__chart span i {
        animation: none;
    }
}

/* ---------- Back to top with scroll ring ---------- */
.to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 55;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 14px 30px -12px rgba(20, 16, 15, .5);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}

.to-top--up {
    bottom: 88px;
}

.to-top.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.to-top:hover {
    background: var(--ink);
    color: #fff;
}

.to-top svg {
    position: absolute;
    inset: 2px;
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.to-top circle {
    fill: none;
    stroke-width: 3;
}

.to-top__track {
    stroke: #efe8e6;
}

.to-top__ring {
    stroke: var(--rose);
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}

.to-top i {
    position: relative;
    font-size: 1.15rem;
}

/* ---------- About page: mission band, module grid, audience cards ---------- */
.ab-mission {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.ab-mission__box {
    position: relative;
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.ab-mission blockquote {
    margin: 1.2rem 0 1.6rem;
    font-family: var(--font-head);
    font-size: clamp(1.7rem, 4.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.ab-mission blockquote em {
    font-style: normal;
    background: linear-gradient(135deg, #ff8aa0, #ff5a4f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ab-mission ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-mission li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}

.ab-mission li i {
    color: #ffd27a;
}

.ab-inside__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.ab-inside__item {
    --c: #e2375c;
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-head);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ab-inside__item:hover {
    border-color: color-mix(in srgb, var(--c) 40%, #fff);
    box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--c) 70%, transparent);
}

.ab-inside__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.4rem;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, #fff);
    transition: all .2s ease;
}

.ab-inside__item:hover .ab-inside__ico {
    color: #fff;
    background: var(--c);
    transform: rotate(-6deg);
}

.ab-inside__item b {
    font-size: .98rem;
}

.ab-inside__go {
    margin-left: auto;
    color: var(--faint);
    transition: transform .2s ease, color .2s ease;
}

.ab-inside__item:hover .ab-inside__go {
    color: var(--c);
    transform: translate(2px, -2px);
}

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

@media (max-width: 575.98px) {
    .ab-inside__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Footer v3: curved top, watermark wordmark, gradient dividers ---------- */
.site-footer {
    margin-top: -1px;
    border-radius: 36px 36px 0 0;
}

.site-footer::before {
    height: 4px;
    background: linear-gradient(90deg, transparent, #e2375c 30%, #f5b942 70%, transparent);
}

.site-footer__trust {
    border-top: 0;
    position: relative;
}

.site-footer__trust::before,
.site-footer__bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}

.site-footer__bar {
    border-top: 0;
}

.site-footer__mark {
    position: relative;
    z-index: 0;
    margin: 1.5rem 0 -.35em;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .8;
    font-size: clamp(5rem, 22vw, 17rem);
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
}

.site-footer__brand .brand {
    display: inline-block;
}

.site-footer__cta {
    background: linear-gradient(135deg, rgba(226, 55, 92, .22), rgba(255, 255, 255, .05));
    border-color: rgba(255, 138, 160, .3);
}

.site-footer__grid h2::after {
    background: linear-gradient(90deg, #e2375c, #f5b942);
}

@media (max-width: 575.98px) {
    .site-footer {
        border-radius: 24px 24px 0 0;
    }

    .site-footer__mark {
        font-size: 24vw;
    }
}

.site-footer__bar-inner {
    padding-right: 4.5rem;
}

.site-footer__bar {
    position: relative;
    z-index: 1;
    background: rgba(8, 2, 4, .85);
}

@media (max-width: 575.98px) {
    .site-footer__bar-inner {
        padding-right: 4.5rem;
    }
}

/* Services dropdown in the main nav */
.nav-drop {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-drop__btn {
    border: 0;
    background: none;
    padding: .5rem .3rem .5rem 0;
    margin-left: -.35rem;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    display: inline-flex;
}

.nav-drop__btn i {
    transition: transform .2s ease;
}

.nav-drop__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 40px -20px rgba(20, 16, 15, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 60;
}

.site-nav__links .nav-drop__menu a:not(.btn) {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    box-shadow: none;
    border: 0;
    white-space: nowrap;
    color: var(--ink);
    background: none;
}

.site-nav__links .nav-drop__menu a:not(.btn):hover {
    background: var(--soft);
    color: var(--ink);
}

.nav-drop__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
}

.nav-drop__ico i {
    color: inherit !important;
}

.site-nav__links .nav-drop__menu a.nav-drop__all {
    margin-top: .25rem;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    color: var(--red);
    font-weight: 700;
}

@media (min-width: 861px) {

    .nav-drop:hover .nav-drop__menu,
    .nav-drop:focus-within .nav-drop__menu,
    .nav-drop.is-open .nav-drop__menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-drop:hover .nav-drop__btn i,
    .nav-drop.is-open .nav-drop__btn i {
        transform: rotate(180deg);
    }
}

@media (max-width: 860px) {
    .nav-drop {
        flex-wrap: wrap;
        width: 100%;
    }

    .nav-drop__link {
        flex: 1;
    }

    .nav-drop__btn {
        padding: .75rem 1rem;
        margin: 0;
    }

    .nav-drop__menu {
        position: static;
        display: none;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--line);
        border-radius: 0;
        margin: 0 0 .25rem .8rem;
        padding: 0 0 0 .4rem;
    }

    .nav-drop.is-open .nav-drop__menu {
        display: block;
    }

    .nav-drop.is-open .nav-drop__btn i {
        transform: rotate(180deg);
    }
}

/* Free salon listing page (/services/free-salon-listing) */
.lst-hero {
    background: radial-gradient(900px 400px at 85% 0, rgba(226, 55, 92, .22), transparent 60%), #0f0b0c;
    color: #fff;
    padding: 2.5rem 0 4rem;
}

.lst-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 3rem;
    align-items: center;
}

.lst-hero .crumbs {
    margin-bottom: 1.5rem;
}

.lst-pill {
    display: inline-block;
    padding: .4rem .9rem;
    border: 1px solid rgba(226, 55, 92, .6);
    border-radius: 999px;
    background: rgba(226, 55, 92, .12);
    color: #ff8aa3;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.lst-hero h1 {
    margin: 1rem 0;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.12;
    color: #fff;
}

.lst-hero h1 em {
    font-style: normal;
    color: var(--rose, #e2375c);
}

.lst-hero p {
    color: rgba(255, 255, 255, .75);
    max-width: 30rem;
}

.lst-facts {
    display: flex;
    gap: 1.5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.lst-facts li {
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.lst-facts li:last-child {
    border: 0;
}

.lst-facts b {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
}

.lst-facts span {
    font-size: .68rem;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .6);
}

.lst-card {
    background: #fff;
    color: var(--ink);
    border-radius: 22px;
    padding: 1.6rem;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}

.lst-card h2 {
    margin: 1.1rem 0 .2rem;
    font-size: 1.25rem;
}

.lst-card__sub {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: .88rem;
}

.lst-card .field-grid {
    grid-template-columns: 1fr 1fr;
}

.lst-card .field textarea {
    min-height: 80px;
}

.lst-card__trust {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin: .9rem 0 0;
    font-size: .75rem;
    color: var(--muted);
}

.lst-card__trust i {
    margin-right: .3rem;
    color: #10b981;
}

.lst-steps {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.lst-steps::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--line);
}

.lst-steps li {
    position: relative;
    flex: 1;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--muted);
}

.lst-steps li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 auto .3rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    font-size: .75rem;
}

.lst-steps li.is-on {
    color: var(--red);
}

.lst-steps li.is-on span {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.lst-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.lst-benefit,
.lst-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.lst-benefit small,
.lst-panel small {
    color: var(--red);
    font-weight: 800;
    font-size: .7rem;
    letter-spacing: .08em;
}

.lst-benefit h3,
.lst-panel h3 {
    margin: .4rem 0 1rem;
    font-size: 1.1rem;
}

.lst-benefit__row {
    display: flex;
    gap: .8rem;
    margin-top: .9rem;
}

.lst-benefit__row p {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .88rem;
}

.lst-benefit .ab-inside__ico {
    --c: #e2375c;
    flex: none;
}

.lst-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.lst-panel p {
    color: var(--muted);
}

@media (max-width: 860px) {

    .lst-hero__grid,
    .lst-benefits,
    .lst-showcase {
        grid-template-columns: 1fr;
    }

    .lst-hero__grid {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .lst-card .field-grid {
        grid-template-columns: 1fr;
    }
}

/* Public salon directory (/salons) */
.dir-search {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 560px;
    margin: 1.6rem auto 0;
    padding: .4rem .4rem .4rem 1rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .6);
}

.dir-search i {
    color: var(--muted);
}

.dir-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    color: var(--ink);
}

.dir-cities {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.4rem;
}

.dir-cities a {
    padding: .45rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}

.dir-cities a span {
    margin-left: .2rem;
    opacity: .6;
}

.dir-cities a:hover {
    color: var(--ink);
}

.dir-cities a.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.dir-count {
    margin: 0 0 1rem;
    color: var(--muted);
    font-weight: 600;
}

.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}

.dir-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dir-card__img {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fde4ea, #f3e8ff);
    color: var(--red);
    font-size: 3rem;
    font-weight: 800;
}

.dir-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dir-card__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem 1.2rem 1.2rem;
    flex: 1;
}

.dir-card__body h2 {
    margin: 0;
    font-size: 1.1rem;
}

.dir-card__body p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}

.dir-card__body p i {
    margin-right: .35rem;
    color: var(--red);
}

.dir-card__actions {
    display: flex;
    gap: .5rem;
    margin-top: auto;
    padding-top: .8rem;
}

.dir-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.dir-empty>i {
    font-size: 3rem;
    color: var(--faint);
}

.dir-empty p {
    color: var(--muted);
    margin-bottom: 1.2rem;
}

.dir-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 2rem;
    font-weight: 600;
}

.dir-pages span {
    color: var(--faint);
}

.lst-panel .btn {
    margin-top: .4rem;
}

/* Service detail pages (/services/{slug}) */
.svc-hero {
    position: relative;
    overflow: hidden;
    background: #0f0b0c;
    color: #fff;
    padding: 2.5rem 0 4.5rem;
}

.svc-hero__glow {
    position: absolute;
    inset: -20% -10% auto auto;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

.svc-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.svc-hero .crumbs {
    margin-bottom: 1.6rem;
}

.svc-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.svc-pill i {
    color: var(--c);
    filter: brightness(1.4);
}

.svc-hero h1 {
    margin: 1.1rem 0 .9rem;
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    line-height: 1.1;
    color: #fff;
}

.svc-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #fff, var(--c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: brightness(1.25);
}

.svc-hero__lead {
    max-width: 33rem;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, .75);
}

.svc-checks {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 1.4rem 0 1.8rem;
    padding: 0;
    list-style: none;
}

.svc-checks li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.svc-checks i {
    font-size: 1.2rem;
    color: #34d399;
}

.svc-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.svc-hero__cta .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
}

.svc-hero__cta .btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
}

.svc-hero__note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 1rem 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}

.svc-hero__note i {
    color: #34d399;
}

.svc-visual {
    position: relative;
    padding: 1.4rem 1rem 1.8rem;
}

.svc-visual__card {
    position: relative;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    padding: 1rem 1.1rem 1.2rem;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
    transform: rotate(-1.5deg);
}

.svc-visual__bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .9rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--line);
}

.svc-visual__bar>i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e1e1;
}

.svc-visual__bar>i:first-child {
    background: #ff5f57;
}

.svc-visual__bar>i:nth-child(2) {
    background: #febc2e;
}

.svc-visual__bar>i:nth-child(3) {
    background: #28c840;
}

.svc-visual__bar span {
    margin-left: .6rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
}

.svc-visual__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .7rem;
    margin-bottom: .45rem;
    border-radius: 12px;
    background: #faf8f8;
    font-size: .9rem;
    animation: svc-in .6s ease both;
    animation-delay: var(--d);
}

.svc-visual__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c) 15%, #fff);
    color: var(--c);
    font-size: 1.05rem;
}

.svc-visual__row b {
    flex: 1;
    font-weight: 700;
}

.svc-visual__tick {
    color: #10b981;
    font-size: 1.1rem;
}

.svc-visual__chart {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    height: 70px;
    margin-top: .8rem;
    padding: .6rem .7rem 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #faf8f8, #fff);
}

.svc-visual__chart span {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff));
}

.svc-visual__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 700;
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .6);
    animation: svc-float 5s ease-in-out infinite;
}

.svc-visual__chip i {
    color: var(--c);
}

.svc-visual__chip--a {
    top: 0;
    right: 0;
}

.svc-visual__chip--b {
    bottom: 0;
    left: 0;
    animation-delay: -2.5s;
}

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

@keyframes svc-float {
    50% {
        transform: translateY(-8px);
    }
}

.svc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.1rem;
}

.svc-card {
    position: relative;
    overflow: hidden;
    padding: 1.7rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.svc-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}

.svc-card:hover {
    border-color: color-mix(in srgb, var(--c) 40%, var(--line));
    box-shadow: 0 28px 44px -26px color-mix(in srgb, var(--c) 55%, transparent);
}

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

.svc-card__num {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--c) 12%, #fff);
}

.svc-card__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 14px 24px -12px var(--c);
}

.svc-card h3 {
    margin: 1.1rem 0 .4rem;
    font-size: 1.12rem;
}

.svc-card p {
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
}

.svc-who {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

.svc-who span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 700;
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease;
}

.svc-who span:hover {
    border-color: var(--c);
}

.svc-who i {
    color: var(--c);
    font-size: 1.15rem;
}

.svc-faq {
    display: grid;
    grid-template-columns: .8fr 1.4fr;
    gap: 3rem;
    align-items: start;
}

.svc-faq__intro p {
    color: var(--muted);
    margin-bottom: 1.2rem;
}

.svc-more {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.svc-more__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    text-decoration: none;
    color: var(--ink);
    transition: transform .25s ease, box-shadow .25s ease;
}

.svc-more__item:hover {
    box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--c) 60%, transparent);
}

.svc-more__item .svc-card__ico {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
    border-radius: 14px;
    margin-bottom: .5rem;
}

.svc-more__item small {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}

.svc-more__go {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    color: var(--faint);
    transition: transform .2s ease, color .2s ease;
}

.svc-more__item:hover .svc-more__go {
    transform: translate(3px, -3px);
    color: var(--c);
}

@media (max-width: 900px) {

    .svc-hero__grid,
    .svc-faq {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    .svc-hero {
        padding-bottom: 3rem;
    }

    .svc-visual__card {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .svc-visual__row,
    .svc-visual__chip {
        animation: none;
    }
}

/* Home: categories + salons */
.hm-cats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.hm-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.4rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hm-cat::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 12%, transparent);
    transition: transform .3s ease;
}

.hm-cat:hover {
    border-color: color-mix(in srgb, var(--c) 45%, var(--line));
    box-shadow: 0 26px 40px -24px color-mix(in srgb, var(--c) 60%, transparent);
}

.hm-cat:hover::after {
    transform: scale(1.5);
}

.hm-cat__ico {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 14px 22px -12px var(--c);
}

.hm-cat b {
    position: relative;
    z-index: 1;
    font-size: 1.02rem;
}

.hm-cat__go {
    position: absolute;
    z-index: 1;
    top: 1.1rem;
    right: 1.1rem;
    color: var(--faint);
    transition: transform .2s ease, color .2s ease;
}

.hm-cat:hover .hm-cat__go {
    transform: translate(3px, -3px);
    color: var(--c);
}

.hm-salons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}

.hm-salon {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hm-salon:hover {
    box-shadow: 0 28px 44px -26px rgba(226, 55, 92, .45);
}

.hm-salon__img {
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fde4ea, #ede9fe);
    color: var(--red);
    font-size: 3.2rem;
    font-weight: 800;
    overflow: hidden;
}

.hm-salon__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hm-salon:hover .hm-salon__img img {
    transform: scale(1.06);
}

.hm-salon__img em {
    position: absolute;
    z-index: 1;
    left: .8rem;
    bottom: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(15, 11, 12, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-style: normal;
    font-size: .74rem;
    font-weight: 700;
}

.hm-salon__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: 1.1rem 1.2rem 1.3rem;
}

.hm-salon__body h3 {
    margin: 0;
    font-size: 1.1rem;
}

.hm-salon__body small {
    color: var(--muted);
    font-size: .86rem;
}

.hm-salon__body small i {
    margin-right: .3rem;
    color: var(--red);
}

.hm-salon__body .btn {
    margin-top: .5rem;
}

.hm-salons__empty {
    max-width: 520px;
    margin: 0 auto;
    padding: 2.4rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px dashed color-mix(in srgb, var(--red) 40%, var(--line));
    border-radius: 22px;
}

.hm-salons__empty>i {
    font-size: 2.6rem;
    color: var(--red);
}

.hm-salons__empty h3 {
    margin: .6rem 0 .3rem;
}

.hm-salons__empty p {
    color: var(--muted);
    margin-bottom: 1.2rem;
}

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

@media (max-width: 400px) {
    .hm-cat {
        padding: 1.1rem;
    }
}

.dir-cats {
    margin-bottom: .7rem;
}

.dir-card__tag,
.hm-salon__tag {
    align-self: flex-start;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(226, 55, 92, .1);
    color: var(--red);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Home: discovery layout (meragym-style find-a-salon hero) */
.dh-hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 5rem;
    color: #fff;
    background: radial-gradient(1000px 520px at 85% -10%, rgba(226, 55, 92, .35), transparent 60%), radial-gradient(800px 500px at 0 110%, rgba(139, 92, 246, .28), transparent 60%), #0f0b0c;
}

.dh-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}

.dh-hero__orb--a {
    width: 320px;
    height: 320px;
    top: -120px;
    left: 30%;
    background: #e2375c;
}

.dh-hero__orb--b {
    width: 260px;
    height: 260px;
    bottom: -120px;
    right: 5%;
    background: #8b5cf6;
}

.dh-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items: center;
}

.dh-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 138, 163, .5);
    background: rgba(226, 55, 92, .14);
    color: #ffb3c4;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.dh-hero h1 {
    margin: 1.1rem 0 .9rem;
    font-size: clamp(2.3rem, 5vw, 3.7rem);
    line-height: 1.08;
    color: #fff;
}

.dh-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #ff8aa3, #c4a1ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dh-hero__copy>p {
    max-width: 34rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .75);
}

.dh-search {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.8rem;
    padding: .6rem;
    max-width: 640px;
    background: rgba(255, 255, 255, .96);
    border-radius: 22px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

.dh-search__field {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 .9rem;
    min-height: 52px;
    border-radius: 14px;
    background: #f6f3f3;
    color: var(--ink);
}

.dh-search__field i {
    color: var(--red);
    font-size: 1.2rem;
}

.dh-search__field input,
.dh-search__field select {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    height: 52px;
}

.dh-search .btn {
    flex: 1 1 100%;
    justify-content: center;
}

@media (min-width: 600px) {
    .dh-search .btn {
        flex: 0 0 auto;
    }
}

.dh-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
}

.dh-popular a {
    padding: .3rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .15s ease;
}

.dh-popular a:hover {
    background: rgba(255, 255, 255, .14);
}

.dh-collage {
    position: relative;
    min-height: 380px;
}

.dh-collage__card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 78%;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7);
    animation: svc-float 6s ease-in-out infinite;
}

.dh-collage__card div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dh-collage__card b {
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-collage__card small {
    color: var(--muted);
    font-size: .78rem;
}

.dh-collage__card small i {
    margin-right: .25rem;
    color: var(--red);
}

.dh-collage__card--1 {
    top: 4%;
    left: 0;
}

.dh-collage__card--2 {
    top: 34%;
    right: 0;
    animation-delay: -2s;
}

.dh-collage__card--3 {
    top: 64%;
    left: 6%;
    animation-delay: -4s;
}

.dh-collage__logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e2375c, #8b5cf6);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
}

.dh-collage__ok {
    color: #10b981;
    font-size: 1.3rem;
}

.dh-collage__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.dh-collage__chip--a {
    top: -8%;
    right: 4%;
}

.dh-collage__chip--b {
    bottom: 0;
    right: 0;
}

.dh-why__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.dh-why__card {
    padding: 1.6rem 1.4rem;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.dh-why__card:hover {
    box-shadow: 0 26px 40px -26px color-mix(in srgb, var(--c) 55%, transparent);
}

.dh-why__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
    font-size: 1.6rem;
}

.dh-why__card h3 {
    margin: 1rem 0 .4rem;
    font-size: 1.08rem;
}

.dh-why__card p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
}

.dh-cities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}

.dh-city {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.3rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.dh-city:hover {
    border-color: rgba(226, 55, 92, .4);
    box-shadow: 0 24px 40px -26px rgba(226, 55, 92, .5);
}

.dh-city__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: .6rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #fde4ea, #ede9fe);
    color: var(--red);
    font-size: 1.4rem;
}

.dh-city small {
    color: var(--muted);
}

.dh-city__go {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    color: var(--faint);
    transition: transform .2s ease, color .2s ease;
}

.dh-city:hover .dh-city__go {
    transform: translate(3px, -3px);
    color: var(--red);
}

.dh-offers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.dh-offer {
    padding: 2.2rem 2rem;
    border-radius: 26px;
}

.dh-offer__tag {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .8;
}

.dh-offer h3 {
    margin: .6rem 0 .5rem;
    font-size: 1.6rem;
    line-height: 1.2;
}

.dh-offer p {
    max-width: 26rem;
    margin: 0 0 1.4rem;
    opacity: .85;
}

.dh-offer--client {
    background: linear-gradient(135deg, #fde4ea, #f3e8ff);
    color: var(--ink);
}

.dh-offer--client .dh-offer__tag {
    color: var(--red);
}

.dh-offer--owner {
    background: #0f0b0c;
    color: #fff;
    background-image: radial-gradient(500px 240px at 100% 0, rgba(226, 55, 92, .4), transparent 60%);
}

.dh-offer__btns {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.dh-offer--owner .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
}

@media (max-width: 960px) {

    .dh-hero__grid,
    .dh-offers__grid {
        grid-template-columns: 1fr;
    }

    .dh-collage {
        min-height: 320px;
        max-width: 460px;
    }

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

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

    .dh-hero {
        padding: 3rem 0 3.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dh-collage__card {
        animation: none;
    }
}

/* Salon detail page (/salon/{slug}) */
.sd-page {
    padding: 1.4rem 0 4rem;
    background: #f6f4f4;
}

.sd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    font-size: .85rem;
    color: var(--muted);
}

.sd-crumbs a {
    color: var(--muted);
    text-decoration: none;
}

.sd-crumbs a:hover {
    color: var(--red);
}

.sd-crumbs i {
    font-size: .8rem;
    opacity: .6;
}

.sd-crumbs b {
    color: var(--ink);
    font-weight: 700;
}

.sd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.4rem;
    align-items: start;
}

.sd-main {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}

.sd-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.sd-card h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-size: 1.15rem;
}

.sd-card h2 i {
    color: var(--red);
}

.sd-hero {
    padding: 0;
    overflow: hidden;
}

.sd-gallery__main {
    position: relative;
    aspect-ratio: 16 / 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fde4ea, #ede9fe);
    overflow: hidden;
}

.sd-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-gallery__ph {
    font-size: 6rem;
    font-weight: 800;
    color: var(--red);
    opacity: .8;
}

.sd-gallery__tag {
    position: absolute;
    left: 1rem;
    top: 1rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(15, 11, 12, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.sd-gallery__thumbs {
    display: flex;
    gap: .5rem;
    padding: .7rem 1rem 0;
    overflow-x: auto;
}

.sd-gallery__thumbs button {
    flex: none;
    width: 84px;
    height: 58px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .7;
}

.sd-gallery__thumbs button.is-on {
    border-color: var(--red);
    opacity: 1;
}

.sd-gallery__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-head {
    padding: 1.3rem 1.5rem 1.5rem;
}

.sd-head__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
}

.sd-head h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.sd-verified {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .12);
    color: #059669;
    font-size: .75rem;
    font-weight: 700;
}

.sd-place {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 0;
    color: var(--muted);
}

.sd-place i {
    color: var(--red);
}

.sd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .9rem 0 0;
}

.sd-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: #f6f3f3;
    font-size: .82rem;
    font-weight: 600;
}

.sd-meta .is-open {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.sd-meta .is-closed {
    background: rgba(239, 68, 68, .1);
    color: #dc2626;
}

.sd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.1rem;
}

.sd-wa {
    background: #25d366;
    color: #fff;
    border: 0;
}

.sd-wa:hover {
    background: #1ebe5b;
    color: #fff;
}

.sd-tabs {
    position: sticky;
    top: 64px;
    z-index: 5;
    display: flex;
    gap: .3rem;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.sd-tabs a {
    flex: 1;
    text-align: center;
    padding: .6rem 1rem;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.sd-tabs a.is-on {
    background: var(--red);
    color: #fff;
}

.sd-about {
    margin: 0 0 1rem;
    color: #4a4240;
    line-height: 1.65;
}

.sd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-facts li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: #faf8f8;
}

.sd-facts i {
    color: var(--red);
    font-size: 1.2rem;
}

.sd-facts span {
    font-size: .75rem;
    color: var(--muted);
}

.sd-facts b {
    font-size: .95rem;
}

.sd-services {
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.sd-services li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px dashed var(--line);
}

.sd-services li:last-child {
    border-bottom: 0;
}

.sd-services b {
    display: block;
}

.sd-services small {
    color: var(--muted);
}

.sd-services small i {
    margin-right: .25rem;
}

.sd-services span {
    font-weight: 800;
    color: var(--red);
    white-space: nowrap;
}

.sd-empty {
    color: var(--muted);
    margin: 0 0 1rem;
}

.sd-address {
    margin: 0 0 1rem;
    color: #4a4240;
}

.sd-side {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sd-contact {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sd-contact__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    background: rgba(226, 55, 92, .08);
    color: var(--red);
    font-weight: 800;
    font-size: .9rem;
}

.sd-enquire__sub {
    margin: -.4rem 0 1rem;
    color: var(--muted);
    font-size: .88rem;
}

.sd-enquire .field {
    margin-bottom: .8rem;
}

.sd-enquire textarea {
    min-height: 80px;
}

.sd-related h2 {
    margin: .4rem 0 .9rem;
    font-size: 1.15rem;
}

.sd-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .9rem;
}

.sd-rel {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .8rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sd-rel:hover {
    box-shadow: var(--shadow);
}

.sd-rel__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin-bottom: .4rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #fde4ea, #ede9fe);
    color: var(--red);
    font-size: 2rem;
    font-weight: 800;
    overflow: hidden;
}

.sd-rel__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-rel small {
    color: var(--muted);
}

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

    .sd-side {
        position: static;
    }

    .sd-tabs {
        top: 60px;
    }
}

@media (max-width: 520px) {
    .sd-gallery__main {
        aspect-ratio: 4 / 3;
    }

    .sd-actions .btn {
        flex: 1 1 calc(50% - .6rem);
        justify-content: center;
    }
}

/* Links from directory / home cards to the detail page */
.dir-card__body h2 a,
.hm-salon__body h3 a {
    color: inherit;
    text-decoration: none;
}

.dir-card__body h2 a:hover,
.hm-salon__body h3 a:hover {
    color: var(--red);
}

.dir-card__img,
.hm-salon__img {
    text-decoration: none;
}

/* Home hero v2: photo mosaic, stats, category strip */
.dh-hero {
    padding: 3.5rem 0 0;
}

.dh-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    padding-bottom: 3rem;
}

.dh-search {
    flex-wrap: nowrap;
    max-width: 680px;
    gap: .5rem;
    padding: .5rem;
}

.dh-search__field {
    flex: 1.2 1 0;
    min-width: 0;
}

.dh-search__field--select {
    flex: 1 1 0;
    min-width: 150px;
}

.dh-search__btn {
    flex: none;
    min-height: 52px;
    padding: 0 1.4rem;
    border-radius: 14px;
    white-space: nowrap;
}

.dh-stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 0;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
}

.dh-stats li {
    display: flex;
    flex-direction: column;
    padding: 0 1.4rem;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.dh-stats li:first-child {
    padding-left: 0;
    border-left: 0;
}

.dh-stats b {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.dh-stats span {
    margin-top: .2rem;
    font-size: .76rem;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .6);
}

.dh-mosaic {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .8rem;
    height: 470px;
    padding: .6rem;
}

.dh-tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, #3a1a26, #2a1f4a);
    box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
    animation: svc-in .7s ease both;
}

.dh-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.dh-tile:hover img {
    transform: scale(1.06);
}

.dh-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(10, 6, 8, .85));
    pointer-events: none;
}

.dh-tile__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .85);
}

.dh-tile figcaption {
    position: absolute;
    z-index: 1;
    left: 1rem;
    right: 1rem;
    bottom: .9rem;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.dh-tile figcaption b {
    font-size: .98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-tile figcaption small {
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
}

.dh-tile figcaption small i {
    margin-right: .25rem;
    color: #ff8aa3;
}

.dh-tile__tag {
    position: absolute;
    z-index: 1;
    top: .8rem;
    left: .8rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dh-tile--1 {
    grid-row: 1 / span 2;
}

.dh-tile--2 {
    animation-delay: .1s;
}

.dh-tile--3 {
    animation-delay: .2s;
}

.dh-mosaic__chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .65);
    animation: svc-float 6s ease-in-out infinite;
}

.dh-mosaic__chip i {
    color: var(--red);
}

.dh-mosaic__chip--a {
    top: -4px;
    right: 8%;
}

.dh-mosaic__chip--b {
    top: 46%;
    left: -18px;
    animation-delay: -2s;
}

.dh-mosaic__chip--c {
    bottom: -20px;
    right: 34%;
    animation-delay: -4s;
}

.dh-mosaic__chip--c i {
    color: #10b981;
}

.dh-cats {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    overflow-x: auto;
    scrollbar-width: none;
}

.dh-cats::-webkit-scrollbar {
    display: none;
}

.dh-cats__label {
    flex: none;
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
    font-weight: 700;
}

.dh-cats a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.dh-cats a i {
    color: var(--c);
    filter: brightness(1.35);
    font-size: 1.1rem;
}

.dh-cats a:hover {
    background: rgba(255, 255, 255, .15);
    border-color: var(--c);
}

@media (max-width: 1100px) {
    .dh-stats {
        grid-template-columns: repeat(2, auto);
        row-gap: 1rem;
    }

    .dh-stats li:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 960px) {
    .dh-hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .dh-mosaic {
        height: 340px;
        max-width: 560px;
    }

    .dh-mosaic__chip--b {
        left: 4px;
    }
}

@media (max-width: 600px) {
    .dh-search {
        flex-wrap: wrap;
    }

    .dh-search__field,
    .dh-search__field--select {
        flex: 1 1 100%;
    }

    .dh-search__btn {
        flex: 1 1 100%;
    }

    .dh-mosaic {
        height: 280px;
        gap: .5rem;
    }

    .dh-stats li {
        padding: 0 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .dh-tile,
    .dh-mosaic__chip {
        animation: none;
    }
}

/* Hero stats on phones: clean 2x2 cards */
@media (max-width: 600px) {
    .dh-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
        margin-top: 1.4rem;
    }

    .dh-stats li,
    .dh-stats li:nth-child(3),
    .dh-stats li:first-child {
        padding: .8rem 1rem;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 14px;
        background: rgba(255, 255, 255, .06);
    }

    .dh-stats b {
        font-size: 1.5rem;
    }

    .dh-stats span {
        font-size: .78rem;
    }
}

/* ===== Home: use the space (wider container, tighter rhythm, compact blocks) ===== */
.is-home .wrap {
    width: min(1280px, 100% - 48px);
}

.is-home .section {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
}

.is-home .section__head {
    max-width: 760px;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.is-home .section__head h2 {
    margin: .7rem 0 .55rem;
    font-size: clamp(1.75rem, 3.4vw, 2.45rem);
}

.is-home .section__head p {
    font-size: 1rem;
}

.is-home .section--flush {
    padding-top: 2rem;
}

/* Why: intro left, 2x2 cards right */
.dh-why__split {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
    gap: 3rem;
    align-items: center;
}

.dh-why__intro {
    text-align: left;
}

.dh-why__intro h2 {
    margin: .8rem 0 .7rem;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}

.dh-why__intro p {
    margin: 0 0 1.4rem;
    color: var(--muted);
    font-size: 1.05rem;
}

.dh-why__split .dh-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dh-why__card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem;
}

.dh-why__card h3 {
    margin: 0 0 .3rem;
}

.dh-why__ico {
    flex: none;
    width: 50px;
    height: 50px;
}

/* Categories: compact horizontal tiles */
.hm-cats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.hm-cat {
    flex-direction: row;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
}

.hm-cat__ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.3rem;
}

.hm-cat b {
    flex: 1;
    font-size: .98rem;
}

.hm-cat__go {
    position: static;
    margin-left: auto;
}

/* Salons: single swipeable row */
.hm-carousel {
    position: relative;
}

.hm-carousel .hm-salons__grid {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    padding: .4rem 2px 1.4rem;
    scrollbar-width: none;
}

.hm-carousel .hm-salons__grid::-webkit-scrollbar {
    display: none;
}

.hm-carousel .hm-salon {
    flex: 0 0 calc((100% - 3.3rem) / 4);
    min-width: 250px;
    scroll-snap-align: start;
}

.hm-carousel__btn {
    position: absolute;
    z-index: 3;
    top: 42%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 14px 26px -12px rgba(20, 16, 15, .5);
    transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}

.hm-carousel__btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: scale(1.06);
}

.hm-carousel__btn--prev {
    left: -22px;
}

.hm-carousel__btn--next {
    right: -22px;
}

.hm-carousel.at-start .hm-carousel__btn--prev,
.hm-carousel.at-end .hm-carousel__btn--next,
.hm-carousel.no-scroll .hm-carousel__btn {
    opacity: 0;
    pointer-events: none;
}

.hm-salons .section__more {
    margin-top: .4rem;
    text-align: center;
}

/* Cities: one compact row */
.dh-cities__grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .85rem;
}

.dh-city {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .8rem;
    padding: 1rem 1.1rem;
}

.dh-city__ico {
    margin: 0;
    width: 42px;
    height: 42px;
}

.dh-city b {
    flex: 1;
    min-width: 0;
}

.dh-city small {
    flex: 1 1 100%;
    margin: .3rem 0 0 calc(42px + .8rem);
    line-height: 1;
}

.dh-city__go {
    top: 1rem;
    right: 1rem;
}

/* Offers: tighter */
.dh-offer {
    padding: 2rem 2rem;
}

/* Software part below: let the wider container breathe */
.is-home .bento {
    gap: 1.1rem;
}

@media (max-width: 1100px) {
    .hm-cats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hm-carousel .hm-salon {
        flex-basis: calc((100% - 1.1rem) / 2);
    }
}

@media (max-width: 960px) {
    .dh-why__split {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .dh-why__intro {
        text-align: center;
    }

    .hm-carousel__btn {
        display: none;
    }
}

@media (max-width: 600px) {
    .is-home .wrap {
        width: min(1280px, 100% - 32px);
    }

    .dh-why__split .dh-why__grid {
        grid-template-columns: 1fr;
    }

    .hm-cats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .hm-cat {
        padding: .8rem;
        gap: .6rem;
    }

    .hm-cat__go {
        display: none;
    }

    .hm-cat b {
        font-size: .88rem;
    }

    .hm-carousel .hm-salon {
        flex-basis: 78%;
        min-width: 0;
    }

    .dh-cities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Phone menu: full-height sheet with icon rows, services accordion and pinned actions ===== */
.nav-ico,
.nav-go,
.site-nav__tag {
    display: none;
}

@media (max-width: 860px) {
    html.menu-open {
        overflow: hidden;
    }

    .site-nav__toggle {
        position: relative;
        z-index: 61;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    .site-nav__toggle:active {
        transform: scale(.94);
    }

    .site-nav__toggle[aria-expanded="true"] {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff;
    }

    .site-nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        padding: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: linear-gradient(180deg, #fff 0%, #fff7f9 100%);
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        box-shadow: 0 30px 40px -20px rgba(20, 16, 15, .35);
    }

    .site-nav__links.is-open {
        display: flex;
        animation: menu-sheet .25s ease both;
    }

    @keyframes menu-sheet {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
    }

    .site-nav__main {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: 1rem 16px 1.2rem;
        flex: 1 0 auto;
    }

    .site-nav__links a:not(.btn) {
        border: 0 !important;
    }

    .site-nav__main>a,
    .nav-drop__link {
        display: flex;
        align-items: center;
        gap: .85rem;
        width: 100%;
        padding: .7rem .8rem !important;
        border-radius: 16px !important;
        color: var(--ink) !important;
        background: #fff !important;
        font-size: 1rem;
        font-weight: 700;
        box-shadow: 0 1px 0 rgba(20, 16, 15, .05), 0 0 0 1px var(--line) inset !important;
    }

    .site-nav__main>a.is-active,
    .nav-drop__link.is-active {
        background: rgba(226, 55, 92, .08) !important;
        box-shadow: 0 0 0 1px rgba(226, 55, 92, .35) inset !important;
        color: var(--red) !important;
    }

    .nav-ico {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(226, 55, 92, .1);
        color: var(--red);
        font-size: 1.25rem;
    }

    .site-nav__links a:not(.btn) .nav-ico i,
    .nav-ico i {
        color: inherit;
        font-size: inherit;
    }

    .nav-label {
        flex: 1;
        text-align: left;
    }

    .nav-go {
        display: inline-block;
        color: var(--faint);
        font-size: 1.05rem;
    }

    /* staggered entrance */
    .site-nav__links.is-open .site-nav__main>a,
    .site-nav__links.is-open .nav-drop {
        animation: menu-row .35s ease both;
    }

    .site-nav__links.is-open .site-nav__main> :nth-child(2) {
        animation-delay: .04s;
    }

    .site-nav__links.is-open .site-nav__main> :nth-child(3) {
        animation-delay: .08s;
    }

    .site-nav__links.is-open .site-nav__main> :nth-child(4) {
        animation-delay: .12s;
    }

    .site-nav__links.is-open .site-nav__main> :nth-child(5) {
        animation-delay: .16s;
    }

    .site-nav__links.is-open .site-nav__main> :nth-child(6) {
        animation-delay: .2s;
    }

    .site-nav__links.is-open .site-nav__main> :nth-child(7) {
        animation-delay: .24s;
    }

    @keyframes menu-row {
        from {
            opacity: 0;
        }
    }

    /* Services accordion */
    .nav-drop {
        display: block;
        width: 100%;
        position: relative;
    }

    .nav-drop__link {
        padding-right: 3.4rem !important;
    }

    .nav-drop__btn {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 3.4rem;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 0 16px 16px 0;
        color: var(--faint);
        font-size: 1.15rem;
    }

    .nav-drop__menu {
        position: static;
        display: none;
        width: auto;
        margin: .35rem 0 .2rem .6rem;
        padding: .4rem;
        border: 0;
        border-left: 3px solid rgba(226, 55, 92, .35);
        border-radius: 0 14px 14px 0;
        background: rgba(226, 55, 92, .05);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-drop.is-open .nav-drop__menu {
        display: block;
        animation: menu-row .25s ease both;
    }

    .site-nav__links .nav-drop__menu a:not(.btn) {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .6rem .5rem;
        border-radius: 10px;
        font-size: .95rem;
        font-weight: 600;
        color: var(--ink);
        background: none;
        box-shadow: none;
        white-space: normal;
    }

    .site-nav__links .nav-drop__menu a.nav-drop__all {
        margin-top: .2rem;
        border-top: 1px dashed var(--line);
        border-radius: 0 0 10px 10px;
        color: var(--red);
        font-weight: 800;
    }

    /* Pinned actions at the bottom of the sheet */
    .site-nav__actions {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: .6rem;
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: .9rem 16px calc(1rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--line);
        backdrop-filter: blur(10px);
    }

    .site-nav__tag {
        display: block;
        grid-column: 1 / -1;
        margin: 0;
        text-align: center;
        color: var(--muted);
        font-size: .8rem;
    }

    .site-nav__links .site-nav__actions a.site-nav__login {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: .85rem 1rem !important;
        border: 1.5px solid var(--ink) !important;
        border-radius: 14px !important;
        background: #fff;
        font-weight: 700;
        color: var(--ink) !important;
    }

    .site-nav__actions .btn--sm {
        margin: 0;
        justify-content: center;
        padding: .85rem 1rem;
        border-radius: 14px;
        font-size: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .site-nav__links.is-open,
    .site-nav__links.is-open * {
        animation: none !important;
    }
}

/* ===== Home: mobile / tablet polish ===== */
/* Whole salon card is tappable (name link stretches); explicit buttons stay above it */
.hm-salon,
.dir-card {
    position: relative;
}

.hm-salon__body h3 a::after,
.dir-card__body h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hm-salon__body .btn,
.dir-card__actions .btn {
    position: relative;
    z-index: 2;
}

/* 16px inputs stop iOS from zooming the page on focus */
.dh-search input,
.dh-search select {
    font-size: 16px;
}

@media (max-width: 960px) {
    .dh-mosaic {
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 760px) {
    .hm-cats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .hm-cats__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hm-cat {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }

    .hm-cat__go {
        position: absolute;
        top: .9rem;
        right: .9rem;
    }
}

@media (max-width: 600px) {
    .dh-hero {
        padding-top: 1.8rem;
    }

    .dh-hero h1 {
        font-size: clamp(2rem, 9vw, 2.4rem);
        margin: .9rem 0 .7rem;
    }

    .dh-hero__copy>p {
        font-size: 1rem;
    }

    .dh-search {
        margin-top: 1.3rem;
        border-radius: 20px;
    }

    .dh-popular {
        margin-top: .9rem;
    }

    .dh-popular a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 .95rem;
    }

    .dh-stats {
        margin-top: 1.2rem;
    }

    .dh-stats li,
    .dh-stats li:nth-child(3),
    .dh-stats li:first-child {
        padding: .65rem .9rem;
    }

    .dh-stats b {
        font-size: 1.35rem;
    }

    /* photo mosaic: no floating chips over the photos, tighter captions */
    .dh-hero__grid {
        padding-bottom: 1.6rem;
    }

    .dh-mosaic {
        height: 290px;
        padding: 0;
        margin-top: .4rem;
    }

    .dh-mosaic__chip {
        display: none;
    }

    .dh-tile {
        border-radius: 18px;
    }

    .dh-tile figcaption {
        left: .7rem;
        right: .7rem;
        bottom: .6rem;
    }

    .dh-tile figcaption b {
        font-size: .85rem;
    }

    .dh-tile figcaption small {
        font-size: .72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dh-tile__tag {
        top: .55rem;
        left: .55rem;
        padding: .18rem .5rem;
        font-size: .6rem;
    }

    .dh-cats a {
        min-height: 42px;
    }

    .dh-cats {
        padding-top: .8rem;
        padding-bottom: .9rem;
    }

    .is-home .section {
        padding: 2.4rem 0;
    }

    .is-home .section__head h2 {
        font-size: 1.65rem;
    }

    /* cities: arrow off, tidy tile */
    .dh-city {
        padding: .85rem;
        column-gap: .65rem;
    }

    .dh-city__go {
        display: none;
    }

    .dh-city__ico {
        width: 38px;
        height: 38px;
    }

    .dh-city small {
        margin-left: calc(38px + .65rem);
    }

    /* offers: full-width, thumb-friendly buttons */
    .dh-offer {
        padding: 1.6rem 1.35rem;
        border-radius: 22px;
    }

    .dh-offer h3 {
        font-size: 1.35rem;
    }

    .dh-offer .btn,
    .dh-offer__btns .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .dh-offer__btns {
        flex-direction: column;
    }

    .hm-salon__body .btn {
        min-height: 44px;
    }

    .dh-why__card {
        padding: 1.1rem;
    }

    .section__more .btn {
        min-height: 46px;
    }
}

@media (max-width: 360px) {

    .dh-stats li,
    .dh-stats li:nth-child(3),
    .dh-stats li:first-child {
        padding: .6rem .7rem;
    }

    .hm-cat {
        padding: .7rem;
    }

    .hm-cat__ico {
        width: 40px;
        height: 40px;
    }
}

/* ===== Home: mobile app section ===== */
.ap-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2rem;
    align-items: center;
    padding: clamp(1.6rem, 4vw, 3.2rem);
    border-radius: 28px;
    color: #fff;
    background: radial-gradient(700px 360px at 90% 0, rgba(226, 55, 92, .45), transparent 60%), radial-gradient(600px 400px at 0 100%, rgba(139, 92, 246, .35), transparent 60%), #0f0b0c;
}

.ap-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .45;
    pointer-events: none;
}

.ap-glow--a {
    width: 260px;
    height: 260px;
    top: -90px;
    left: 35%;
    background: #e2375c;
}

.ap-glow--b {
    width: 220px;
    height: 220px;
    bottom: -90px;
    right: 6%;
    background: #8b5cf6;
}

.ap-copy,
.ap-phones {
    position: relative;
    z-index: 1;
}

.ap-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 138, 163, .5);
    background: rgba(226, 55, 92, .14);
    color: #ffb3c4;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
}

.ap-copy h2 {
    margin: 1rem 0 .7rem;
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.12;
    color: #fff;
}

.ap-copy h2 em {
    font-style: normal;
    background: linear-gradient(90deg, #ff8aa3, #c4a1ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ap-copy>p {
    max-width: 32rem;
    color: rgba(255, 255, 255, .75);
    font-size: 1.05rem;
}

.ap-feats {
    display: grid;
    gap: .7rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.ap-feats li {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.ap-feats li>span {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #ff8aa3;
    font-size: 1.3rem;
}

.ap-feats b {
    display: block;
    font-size: 1rem;
}

.ap-feats small {
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}

.ap-stores {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.ap-store {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 54px;
    padding: .5rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    color: #0f0b0c;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.1;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ap-store i {
    font-size: 1.8rem;
}

.ap-store span {
    display: flex;
    flex-direction: column;
}

.ap-store small {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .65;
}

a.ap-store:hover {
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .8);
}

.ap-store.is-soon {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    border: 1px dashed rgba(255, 255, 255, .3);
    cursor: default;
}

.ap-note {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: .85rem;
}

.ap-note i {
    color: #34d399;
}

.ap-phones {
    position: relative;
    height: 480px;
}

.ap-phone {
    position: absolute;
    width: 232px;
    padding: 9px;
    border-radius: 34px;
    background: #1d1719;
    box-shadow: 0 40px 60px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

.ap-phone--front {
    top: 0;
    left: 50%;
    margin-left: -60px;
    z-index: 2;
    transform: rotate(4deg);
    animation: svc-float 7s ease-in-out infinite;
}

.ap-phone--back {
    top: 70px;
    left: 50%;
    margin-left: -235px;
    z-index: 1;
    transform: rotate(-7deg) scale(.94);
    opacity: .95;
}

.ap-phone__notch {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 50%;
    width: 70px;
    height: 18px;
    margin-left: -35px;
    border-radius: 99px;
    background: #1d1719;
}

.ap-phone__screen {
    min-height: 440px;
    padding: 2.2rem .8rem .8rem;
    border-radius: 26px;
    background: #fff;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    overflow: hidden;
}

.ap-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ap-top i {
    color: var(--muted);
}

.ap-search {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    background: #f4f1f1;
    color: var(--muted);
    font-size: .72rem;
}

.ap-chips {
    display: flex;
    gap: .35rem;
}

.ap-chips span {
    padding: .22rem .6rem;
    border-radius: 99px;
    background: #f4f1f1;
    font-size: .66rem;
    font-weight: 700;
    color: var(--muted);
}

.ap-chips .is-on {
    background: var(--red);
    color: #fff;
}

.ap-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .5rem;
    border-radius: 16px;
    border: 1px solid var(--line);
}

.ap-card__img {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .3rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #fde4ea, #ede9fe);
    color: var(--red);
    font-size: 2rem;
    font-weight: 800;
    overflow: hidden;
}

.ap-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-card b {
    font-size: .82rem;
}

.ap-card small {
    color: var(--muted);
    font-size: .68rem;
}

.ap-card small i {
    color: var(--red);
    margin-right: .2rem;
}

.ap-card__btn {
    align-self: flex-start;
    margin-top: .3rem;
    padding: .3rem .8rem;
    border-radius: 99px;
    background: var(--red);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.ap-tabs {
    display: flex;
    justify-content: space-around;
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
    color: var(--faint);
    font-size: 1.15rem;
}

.ap-tabs .is-on {
    color: var(--red);
}

.ap-ok {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-top: .8rem;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 1.8rem;
    box-shadow: 0 14px 24px -12px rgba(16, 185, 129, .8);
}

.ap-phone--back .ap-phone__screen>b {
    text-align: center;
    font-size: .95rem;
}

.ap-phone--back .ap-phone__screen>small {
    text-align: center;
    color: var(--muted);
    font-size: .7rem;
}

.ap-ticket {
    display: grid;
    gap: .5rem;
    margin-top: .6rem;
    padding: .8rem;
    border-radius: 14px;
    background: #faf8f8;
}

.ap-ticket small {
    display: block;
    color: var(--muted);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ap-ticket b {
    font-size: .8rem;
}

@media (max-width: 960px) {
    .ap-panel {
        grid-template-columns: 1fr;
    }

    .ap-phones {
        height: 440px;
        max-width: 460px;
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .ap-panel {
        border-radius: 22px;
        padding: 1.5rem 1.2rem 0;
    }

    .ap-copy h2 {
        font-size: 1.75rem;
    }

    .ap-store {
        flex: 1 1 100%;
        justify-content: center;
    }

    .ap-phones {
        height: 400px;
        overflow: hidden;
        margin-bottom: 0;
    }

    .ap-phone {
        width: 210px;
    }

    .ap-phone--front {
        margin-left: -75px;
    }

    .ap-phone--back {
        margin-left: -150px;
        top: 60px;
    }

    .ap-phone__screen {
        min-height: 420px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-phone--front {
        animation: none;
    }
}

/* ===== Home: FAQ ===== */
.dh-faq {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fff6f8 100%);
}

.fq-mark {
    position: absolute;
    top: -.15em;
    right: 2%;
    font-family: var(--font-head);
    font-size: clamp(14rem, 30vw, 26rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(226, 55, 92, .06);
    pointer-events: none;
    user-select: none;
}

.fq-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
    grid-template-areas: "side list";
    gap: 1.6rem 3.5rem;
    align-items: start;
}

.fq-intro {
    grid-area: intro;
    text-align: left;
}

.fq-intro h2 {
    margin: .8rem 0 .7rem;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.fq-intro p {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
}

.fq-list {
    grid-area: list;
    display: grid;
    gap: .8rem;
}

.fq-list details {
    position: relative;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(20, 16, 15, .03), 0 12px 24px -22px rgba(20, 16, 15, .35);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}

.fq-list details::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--grad, linear-gradient(180deg, #e2375c, #8b5cf6));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease;
}

.fq-list details:hover {
    border-color: rgba(226, 55, 92, .3);
}

.fq-list details[open] {
    border-color: rgba(226, 55, 92, .4);
    box-shadow: 0 26px 44px -28px rgba(226, 55, 92, .5);
    background: linear-gradient(180deg, #fff, #fffafb);
}

.fq-list details[open]::before {
    transform: scaleY(1);
}

.fq-list summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    cursor: pointer;
    list-style: none;
}

.fq-list summary::-webkit-details-marker {
    display: none;
}

.fq-list summary:focus-visible {
    outline: 3px solid rgba(226, 55, 92, .35);
    outline-offset: -3px;
    border-radius: 20px;
}

.fq-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(226, 55, 92, .08);
    color: var(--red);
    font-family: var(--font-head);
    font-size: .85rem;
    font-weight: 800;
    transition: background-color .25s ease, color .25s ease;
}

.fq-list details[open] .fq-num {
    background: var(--red);
    color: #fff;
    box-shadow: 0 12px 20px -10px rgba(226, 55, 92, .8);
}

.fq-q {
    flex: 1;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.fq-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 1.1rem;
    transition: transform .3s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.fq-list details[open] .fq-toggle {
    transform: rotate(135deg);
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.fq-a {
    padding: 0 1.3rem 1.3rem calc(1.3rem + 42px + 1rem);
    animation: fq-in .35s ease both;
}

.fq-a p {
    margin: 0;
    color: #4a4240;
    line-height: 1.7;
}

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

.fq-help {
    grid-area: help;
    position: relative;
    overflow: hidden;
    padding: 1.6rem;
    border-radius: 24px;
    color: #fff;
    background: radial-gradient(360px 200px at 100% 0, rgba(226, 55, 92, .5), transparent 60%), #0f0b0c;
    box-shadow: 0 30px 50px -30px rgba(15, 11, 12, .8);
}

.fq-help__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #ff8aa3;
    font-size: 1.6rem;
}

.fq-help h3 {
    margin: 1rem 0 .3rem;
    font-size: 1.25rem;
    color: #fff;
}

.fq-help p {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
}

.fq-help__btns {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.fq-wa {
    background: #25d366;
    color: #fff;
    border: 0;
}

.fq-wa:hover {
    background: #1ebe5b;
    color: #fff;
}

.fq-help__mail {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, .7);
    font-size: .88rem;
    text-decoration: none;
    word-break: break-all;
}

.fq-help__mail:hover {
    color: #fff;
}

.fq-side {
    grid-area: side;
    display: grid;
    gap: 1.6rem;
}

@media (min-width: 961px) {
    .fq-side {
        position: sticky;
        top: 96px;
    }

    .fq-side .fq-intro,
    .fq-side .fq-help {
        grid-area: auto;
    }
}

@media (max-width: 960px) {
    .fq-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "list" "help";
        gap: 1.4rem;
    }

    .fq-side {
        display: contents;
    }

    .fq-intro {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .fq-list summary {
        gap: .75rem;
        padding: 1rem;
    }

    .fq-num {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: .78rem;
    }

    .fq-q {
        font-size: .98rem;
    }

    .fq-toggle {
        width: 32px;
        height: 32px;
    }

    .fq-a {
        padding: 0 1rem 1.1rem 1rem;
    }

    .fq-help {
        padding: 1.4rem 1.2rem;
        border-radius: 20px;
    }

    .fq-help__btns .btn {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fq-a {
        animation: none;
    }

    .fq-list details,
    .fq-toggle {
        transition: none;
    }
}

/* ===== Home: popular salon cards v2 ===== */
.hm-carousel .hm-salon {
    border-radius: 22px;
    box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 18px 34px -26px rgba(20, 16, 15, .45);
}

.hm-carousel .hm-salon:hover {
    border-color: rgba(226, 55, 92, .35);
    box-shadow: 0 30px 46px -26px rgba(226, 55, 92, .5);
}

.hm-salon__img {
    aspect-ratio: 4 / 3;
}

.hm-salon__img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 11, 12, .35) 0%, transparent 35%, transparent 70%, rgba(15, 11, 12, .25) 100%);
    pointer-events: none;
}

.hm-salon__img .hm-salon__tag {
    position: absolute;
    z-index: 2;
    top: .8rem;
    left: .8rem;
    padding: .3rem .7rem;
    background: rgba(255, 255, 255, .95);
    color: var(--ink);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5);
    font-size: .66rem;
}

.hm-salon__img .hm-salon__status {
    position: absolute;
    z-index: 2;
    top: .8rem;
    right: .8rem;
    left: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(15, 11, 12, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
}

.hm-salon__status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
}

.hm-salon__status.is-open i {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .3);
    animation: hm-pulse 2s ease-in-out infinite;
}

.hm-salon__status.is-closed i {
    background: #f87171;
}

@keyframes hm-pulse {
    50% {
        box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
    }
}

.hm-salon__body {
    gap: .35rem;
    padding: 1.1rem 1.2rem 1.2rem;
    flex: 1;
}

.hm-salon__body h3 {
    font-size: 1.12rem;
    line-height: 1.25;
}

.hm-salon__place {
    display: flex;
    align-items: center;
    gap: .1rem;
}

.hm-salon__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .45rem;
}

.hm-salon__chips span {
    padding: .22rem .6rem;
    border-radius: 999px;
    background: #f6f3f3;
    color: #4a4240;
    font-size: .72rem;
    font-weight: 600;
}

.hm-salon__chips .is-more {
    background: rgba(226, 55, 92, .08);
    color: var(--red);
}

.hm-salon__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
}

.hm-salon__price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hm-salon__price small {
    margin: 0;
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hm-salon__price b {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
}

.hm-salon__go {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 20px -12px rgba(226, 55, 92, .9);
    transition: transform .2s ease, gap .2s ease;
}

.hm-salon:hover .hm-salon__go {
    gap: .65rem;
}

.hm-salon__go:hover {
    color: #fff;
}

@media (max-width: 600px) {
    .hm-salon__img {
        aspect-ratio: 16 / 11;
    }

    .hm-salon__go {
        min-height: 44px;
        padding: 0 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hm-salon__status.is-open i {
        animation: none;
    }
}

/* ===== Home: Why mSalon v2 ===== */
.wy {
    position: relative;
    overflow: hidden;
    background: radial-gradient(700px 360px at 0% 0%, rgba(226, 55, 92, .07), transparent 60%), radial-gradient(600px 360px at 100% 100%, rgba(139, 92, 246, .07), transparent 60%), #fff;
}

.wy-dots {
    position: absolute;
    top: 2rem;
    right: 3%;
    width: 220px;
    height: 220px;
    background-image: radial-gradient(rgba(226, 55, 92, .22) 1.6px, transparent 1.7px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
    mask-image: radial-gradient(circle, #000 30%, transparent 72%);
    pointer-events: none;
}

.wy-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    gap: 3.2rem;
    align-items: center;
}

.wy-intro {
    text-align: left;
}

.wy-intro h2 {
    margin: .8rem 0 .8rem;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.12;
}

.wy-intro>p {
    margin: 0 0 1.3rem;
    color: var(--muted);
    font-size: 1.04rem;
}

.wy-checks {
    display: grid;
    gap: .6rem;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.wy-checks li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 600;
    color: #3a3234;
}

.wy-checks i {
    color: #10b981;
    font-size: 1.3rem;
}

.wy-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.4rem;
}

.wy-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(226, 55, 92, .35);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease, gap .2s ease;
}

.wy-link:hover {
    color: var(--red);
    border-color: var(--red);
    gap: .55rem;
}

.wy-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.wy-card {
    position: relative;
    overflow: hidden;
    padding: 1.7rem 1.5rem 1.5rem;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 22px 40px -32px rgba(20, 16, 15, .5);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.wy-card:nth-child(even) {
    transform: translateY(1.2rem);
}

.wy-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #fff));
}

.wy-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 10%, transparent);
    transition: transform .4s ease;
}

.wy-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--c) 40%, var(--line));
    box-shadow: 0 34px 50px -30px color-mix(in srgb, var(--c) 60%, transparent);
}

.wy-card:nth-child(even):hover {
    transform: translateY(calc(1.2rem - 6px));
}

.wy-card:hover::after {
    transform: scale(1.5);
}

.wy-card__num {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    z-index: 1;
    font-family: var(--font-head);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--c) 14%, #fff);
}

.wy-card__ico {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 16px 26px -12px var(--c);
}

.wy-card h3 {
    position: relative;
    z-index: 1;
    margin: 1.2rem 0 .45rem;
    font-size: 1.15rem;
}

.wy-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .wy-grid {
        gap: 2.2rem;
    }
}

@media (max-width: 960px) {
    .wy-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .wy-intro {
        text-align: center;
    }

    .wy-checks {
        justify-content: center;
        justify-items: center;
    }

    .wy-cta {
        justify-content: center;
    }

    .wy-card:nth-child(even),
    .wy-card:nth-child(even):hover {
        transform: none;
    }

    .wy-cards {
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {
    .wy-cards {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .wy-card {
        display: grid;
        grid-template-columns: 54px 1fr;
        column-gap: 1rem;
        padding: 1.2rem;
        border-radius: 20px;
    }

    .wy-card__ico {
        grid-row: 1 / span 2;
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    .wy-card h3 {
        margin: 0 0 .3rem;
        font-size: 1.05rem;
        padding-right: 2rem;
    }

    .wy-card__num {
        font-size: 1.9rem;
        top: .8rem;
        right: 1rem;
    }

    .wy-card::after {
        width: 110px;
        height: 110px;
    }

    .wy-checks {
        justify-items: start;
    }

    .wy-cta .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .wy-dots {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wy-card,
    .wy-card::after {
        transition: none;
    }
}

/* ===== Hero stats v2: glass cards with icons ===== */
.dh-hero .dh-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
    max-width: 680px;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
}

.dh-hero .dh-stats li,
.dh-hero .dh-stats li:first-child,
.dh-hero .dh-stats li:nth-child(3) {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .9rem .95rem 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .12) inset;
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}

.dh-hero .dh-stats li::after {
    content: "";
    position: absolute;
    right: -26px;
    top: -26px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
    pointer-events: none;
}

.dh-hero .dh-stats li:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--c) 60%, transparent);
}

.dh-stat__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: .55rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--c) 22%, transparent);
    color: var(--c);
    font-size: 1.15rem;
}

.dh-hero .dh-stats b {
    font-family: var(--font-head);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -.02em;
}

.dh-hero .dh-stats .dh-stat__lbl {
    margin: 0;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .68);
}

@media (max-width: 1100px) {
    .dh-hero .dh-stats {
        max-width: 560px;
    }
}

@media (max-width: 600px) {
    .dh-hero .dh-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: .6rem;
        margin-top: 1.3rem;
        max-width: none;
    }

    .dh-hero .dh-stats li,
    .dh-hero .dh-stats li:first-child,
    .dh-hero .dh-stats li:nth-child(3) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .65rem;
        padding: .75rem .8rem;
        border-radius: 16px;
    }

    .dh-stat__ico {
        width: 38px;
        height: 38px;
        margin: 0;
    }

    .dh-hero .dh-stats b {
        font-size: 1.4rem;
    }

    .dh-hero .dh-stats .dh-stat__lbl {
        flex: 1 1 100%;
        margin-top: .35rem;
    }

    .dh-hero .dh-stats li {
        display: grid;
        grid-template-columns: 38px 1fr;
    }

    .dh-hero .dh-stats li .dh-stat__ico {
        grid-row: 1 / span 2;
    }

    .dh-hero .dh-stats .dh-stat__lbl {
        grid-column: 2;
        margin: 0;
        flex: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dh-hero .dh-stats li {
        transition: none;
    }
}

/* ===== Home: How it works v2 ===== */
.hw-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
    margin: 0;
    padding: 2rem 0 0;
    list-style: none;
    counter-reset: none;
}

/* dashed path connecting the three badges */
.hw-steps::before {
    content: "";
    position: absolute;
    top: calc(2rem + 22px);
    left: 16.6%;
    right: 16.6%;
    border-top: 2px dashed rgba(226, 55, 92, .35);
}

.hw-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.2rem 1.5rem 1.6rem;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 24px 40px -32px rgba(20, 16, 15, .5);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}



.hw-step:hover {
    border-color: color-mix(in srgb, var(--c) 40%, var(--line));
    box-shadow: 0 34px 50px -30px color-mix(in srgb, var(--c) 60%, transparent);
}

.hw-step__badge {
    position: absolute;
    top: -22px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 0 0 6px #fff, 0 14px 22px -10px var(--c);
    z-index: 2;
}

.hw-step__art {
    width: 100%;
    display: grid;
    gap: .55rem;
    margin: .4rem 0 1.2rem;
    padding: .9rem;
    border-radius: 16px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, #fff), #faf8f8);
    border: 1px dashed color-mix(in srgb, var(--c) 30%, var(--line));
    min-height: 112px;
    align-content: center;
}

.hw-mini {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 16px -12px rgba(20, 16, 15, .5);
    font-size: .78rem;
}

.hw-mini>i {
    color: var(--c);
    font-size: 1.05rem;
}

.hw-mini--search span {
    flex: 1;
    font-weight: 700;
    color: var(--ink);
}

.hw-mini.hw-mini--search b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--c);
    color: #fff;
}

.hw-mini-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.hw-mini-chips span {
    padding: .22rem .65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.hw-mini-chips .is-on {
    background: var(--c);
    border-color: var(--c);
    color: #fff;
}

.hw-mini--salon {
    gap: .6rem;
}

.hw-mini__img {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #fff), color-mix(in srgb, var(--c) 15%, #fff));
}

.hw-mini b {
    display: block;
    font-size: .8rem;
    color: var(--ink);
}

.hw-mini small {
    color: var(--muted);
    font-size: .68rem;
}

.hw-mini--ok>i {
    font-size: 1.5rem;
}

.hw-step__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 14px 22px -12px var(--c);
}

.hw-step h3 {
    margin: 1rem 0 .4rem;
    font-size: 1.15rem;
}

.hw-step p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
}

.hw-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.2rem;
}

@media (max-width: 900px) {
    .hw-steps {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        max-width: 520px;
        margin-inline: auto;
        padding-top: 1.4rem;
    }

    .hw-steps::before {
        top: 1.4rem;
        bottom: 2rem;
        left: 50%;
        right: auto;
        border-top: 0;
        border-left: 2px dashed rgba(226, 55, 92, .3);
    }
}

@media (max-width: 600px) {
    .hw-step {
        padding: 2rem 1.2rem 1.3rem;
        border-radius: 20px;
    }

    .hw-cta .btn {
        width: 100%;
        justify-content: center;
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-step {
        transition: none;
    }
}
/* ===== Home: Membership offers near you ===== */
.mo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.3rem; }
.mo-card { position: relative; display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 26px 44px -30px rgba(20, 16, 15, .55); transition: transform .3s ease, box-shadow .3s ease; }
.mo-card:hover { transform: translateY(-6px); box-shadow: 0 36px 54px -30px color-mix(in srgb, var(--a) 60%, transparent); }
.mo-card__top { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.7rem; border-radius: 26px 26px 0 0; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); }
.mo-card__top::before, .mo-card__top::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); pointer-events: none; }
.mo-card__top::before { width: 170px; height: 170px; right: -50px; top: -70px; }
.mo-card__top::after { width: 100px; height: 100px; right: 40px; bottom: -60px; }
.mo-card__ribbon { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mo-card__top h3 { position: relative; z-index: 1; margin: .9rem 0 .5rem; font-size: 1.25rem; color: #fff; }
.mo-card__price { position: relative; z-index: 1; display: flex; align-items: baseline; gap: .45rem; }
.mo-card__price b { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mo-card__price span { font-size: .9rem; opacity: .85; font-weight: 600; }
/* ticket perforation */
.mo-card__cut { position: relative; height: 0; display: flex; align-items: center; justify-content: space-between; }
.mo-card__cut i { width: 26px; height: 26px; border-radius: 50%; background: #f5f5f5; box-shadow: inset 0 0 0 1px var(--line); }
.mo-card__cut i:first-child { margin-left: -13px; } .mo-card__cut i:last-child { margin-right: -13px; }
.mo-card__cut span { flex: 1; margin: 0 .6rem; border-top: 2px dashed rgba(20, 16, 15, .14); }
.mo-card__body { display: flex; flex-direction: column; gap: 1.1rem; flex: 1; padding: 1.7rem 1.5rem 1.4rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 26px 26px; }
.mo-card__perks { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mo-card__perks li { display: flex; align-items: flex-start; gap: .55rem; color: #3a3234; font-size: .92rem; line-height: 1.4; }
.mo-card__perks i { flex: none; margin-top: .1rem; color: #10b981; font-size: 1.1rem; }
.mo-card__salon { position: relative; display: flex; align-items: center; gap: .75rem; margin-top: auto; padding: .7rem .8rem; border-radius: 16px; background: #faf8f8; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.mo-card__salon:hover { border-color: var(--a); background: color-mix(in srgb, var(--a) 6%, #fff); }
.mo-card__avatar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }
.mo-card__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-card__avatar em { font-style: normal; font-weight: 800; }
.mo-card__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mo-card__who b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-card__who small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-card__who small i { margin-right: .2rem; color: var(--a); }
.mo-card__go { color: var(--muted); font-size: 1.1rem; transition: transform .2s ease, color .2s ease; }
.mo-card__salon:hover .mo-card__go { transform: translate(3px, -3px); color: var(--a); }
.mo-more { display: flex; justify-content: center; margin-top: 2rem; }

/* owner band: single wide card */
.dh-offer--wide { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem 2.4rem; flex-wrap: wrap; padding: 2.2rem 2.4rem; }
.dh-offer--wide p { margin-bottom: 0; }
.dh-offer--wide .dh-offer__btns { flex: none; }

/* the cut-out circles must match each section's background (odd/even pattern) */
#main > section.bg-alt .mo-card__cut i { background: var(--band, #f5f5f5); }
#main > section.bg-plain .mo-card__cut i { background: #fff; }

@media (max-width: 760px) {
    .dh-offer--wide { padding: 1.7rem 1.4rem; }
    .dh-offer--wide .dh-offer__btns { width: 100%; }
}
@media (max-width: 600px) {
    .mo-card__top { padding: 1.3rem 1.2rem 1.5rem; }
    .mo-card__price b { font-size: 2rem; }
    .mo-card__body { padding: 1.5rem 1.2rem 1.2rem; }
    .mo-more .btn { width: 100%; justify-content: center; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .mo-card, .mo-card__go { transition: none; } }

/* ===== How it works v3: connected timeline, bigger screens, guided highlight ===== */
.hw-steps { --p: 0; gap: 2.2rem; padding-top: 2.6rem; }
/* base dashed path + coloured progress that follows the active step */
.hw-steps::before { top: calc(2.6rem + 24px); left: 16.66%; right: 16.66%; border-top: 3px dashed rgba(20, 16, 15, .12); }
.hw-steps::after { content: ""; position: absolute; top: calc(2.6rem + 24px); left: 16.66%; width: calc(var(--p) * 66.68%); height: 3px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, #e2375c, #8b5cf6, #16a34a); transition: width .7s cubic-bezier(.4, 0, .2, 1); }

.hw-step { padding: 2.6rem 1.6rem 1.7rem; transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease, opacity .3s ease; }
/* arrow between cards */
.hw-step:not(:last-child)::after { content: ""; position: absolute; top: calc(50% - 8px); right: -1.7rem; width: 14px; height: 14px; border-top: 3px solid color-mix(in srgb, var(--c) 55%, #fff); border-right: 3px solid color-mix(in srgb, var(--c) 55%, #fff); transform: rotate(45deg); z-index: 3; border-radius: 2px; }
.hw-step__badge { top: -24px; width: 48px; height: 48px; margin-left: -24px; font-size: 1.25rem; transition: transform .45s ease, box-shadow .45s ease, background-color .45s ease; }
.hw-step.is-done .hw-step__badge { background: #10b981; }
.hw-step.is-active { transform: translateY(-10px); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow: 0 40px 60px -32px color-mix(in srgb, var(--c) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--c) 10%, transparent); }
.hw-step.is-active .hw-step__badge { transform: scale(1.12); box-shadow: 0 0 0 6px #fff, 0 0 0 11px color-mix(in srgb, var(--c) 30%, transparent), 0 16px 24px -10px var(--c); animation: hw-ring 2.2s ease-out infinite; }
@keyframes hw-ring { 70% { box-shadow: 0 0 0 6px #fff, 0 0 0 20px transparent, 0 16px 24px -10px var(--c); } 100% { box-shadow: 0 0 0 6px #fff, 0 0 0 20px transparent, 0 16px 24px -10px var(--c); } }

/* bigger "app screen" per step */
.hw-step__art { min-height: 150px; padding: 1.1rem; margin: .5rem 0 1.4rem; border-radius: 18px; gap: .7rem; }
.hw-mini { padding: .7rem .85rem; font-size: .85rem; border-radius: 14px; }
.hw-mini-chips span { padding: .3rem .8rem; font-size: .76rem; }
.hw-mini b { font-size: .88rem; } .hw-mini small { font-size: .74rem; }
.hw-mini__img { width: 44px; height: 44px; }
.hw-step.is-active .hw-mini-chips .is-on, .hw-step.is-active .hw-mini--search b { animation: hw-pop 1.6s ease-in-out infinite; }
@keyframes hw-pop { 50% { transform: scale(1.1); } }
.hw-step.is-active .hw-mini--ok > i { animation: hw-pop 1.6s ease-in-out infinite; }

.hw-step__kicker { margin-top: 1.1rem; font-size: .7rem; font-weight: 800; letter-spacing: .09em; color: var(--c); }
.hw-step__ico { width: 44px; height: 44px; border-radius: 14px; font-size: 1.3rem; }
.hw-step h3 { margin: .3rem 0 .45rem; font-size: 1.25rem; }
.hw-step p { font-size: .96rem; }

.hw-cta { margin-top: 2.6rem; }

@media (max-width: 900px) {
    .hw-steps { gap: 2.6rem; padding-top: 1.6rem; }
    .hw-steps::before { top: 1.6rem; bottom: 3rem; left: 50%; right: auto; border-top: 0; border-left: 3px dashed rgba(20, 16, 15, .12); }
    .hw-steps::after { top: 1.6rem; left: 50%; width: 3px; height: calc(var(--p) * (100% - 4.6rem)); margin: 0 0 0 -1.5px; background: linear-gradient(180deg, #e2375c, #8b5cf6, #16a34a); transition: height .7s cubic-bezier(.4, 0, .2, 1); }
    .hw-step:not(:last-child)::after { display: none; }

    .hw-step.is-active { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .hw-step, .hw-step__badge, .hw-steps::after { transition: none; }
    .hw-step.is-active .hw-step__badge, .hw-step.is-active .hw-mini-chips .is-on, .hw-step.is-active .hw-mini--search b, .hw-step.is-active .hw-mini--ok > i { animation: none; }
}

/* How it works: connector lines sit behind the cards */
.hw-steps::before, .hw-steps::after { z-index: 0; }
.hw-steps .hw-step { z-index: 1; }

/* ===== How it works v4: plain cards, equal height, no circles ===== */
.hw-steps { padding-top: 0; align-items: stretch; }
.hw-steps::before, .hw-steps::after { display: none; }
.hw-step { height: 100%; align-items: flex-start; padding: 2rem 1.7rem 1.8rem; overflow: hidden; }
.hw-step::before { opacity: .35; transform-origin: left; transition: opacity .4s ease; }
.hw-step.is-active::before, .hw-step:hover::before { opacity: 1; }
.hw-step__num { position: absolute; top: 1.1rem; right: 1.4rem; font-family: var(--font-head); font-size: 3.2rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--c) 13%, #fff); transition: color .4s ease; }
.hw-step.is-active .hw-step__num { color: color-mix(in srgb, var(--c) 28%, #fff); }
.hw-step__ico { width: 64px; height: 64px; border-radius: 20px; font-size: 1.9rem; margin-bottom: .3rem; transition: transform .45s ease; }
.hw-step.is-active .hw-step__ico { transform: scale(1.08) rotate(-4deg); }
.hw-step__kicker { margin-top: 1.1rem; }
.hw-step h3 { font-size: 1.3rem; }
.hw-step p { font-size: 1rem; line-height: 1.6; }
.hw-step.is-done::before { opacity: .7; }
@media (max-width: 900px) {
    .hw-steps { gap: 1.1rem; max-width: 560px; }
    .hw-step { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .hw-step__ico { transition: none; } .hw-step.is-active .hw-step__ico { transform: none; } }

/* ===== About page v2 ===== */
.ab2-hero { position: relative; overflow: hidden; padding: 4rem 0 0; color: #fff; background: radial-gradient(900px 480px at 90% -10%, rgba(226, 55, 92, .35), transparent 60%), radial-gradient(700px 460px at 0 110%, rgba(139, 92, 246, .28), transparent 60%), #0f0b0c; }
.ab2-hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.ab2-hero__glow--a { width: 300px; height: 300px; top: -120px; left: 38%; background: #e2375c; }
.ab2-hero__glow--b { width: 240px; height: 240px; bottom: -110px; right: 6%; background: #8b5cf6; }
.ab2-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; padding-bottom: 3.2rem; }
.ab2-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 138, 163, .5); background: rgba(226, 55, 92, .14); color: #ffb3c4; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.ab2-hero h1 { margin: 1.1rem 0 .9rem; font-size: clamp(2.3rem, 5.2vw, 3.8rem); line-height: 1.07; color: #fff; text-wrap: balance; }
.ab2-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ff8aa3, #c4a1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab2-hero__copy > p { max-width: 33rem; font-size: 1.1rem; color: rgba(255, 255, 255, .75); }
.ab2-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.ab2-hero__cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.ab2-hero__cta .btn--ghost:hover { background: rgba(255, 255, 255, .14); }

.ab2-hero__cards { display: grid; gap: .9rem; }
.ab2-glass { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 22px 36px -26px rgba(0, 0, 0, .9); transition: transform .3s ease, border-color .3s ease; }
.ab2-glass:nth-child(2) { margin-left: 1.6rem; } .ab2-glass:nth-child(3) { margin-left: .6rem; }
.ab2-glass:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ab2-glass__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-size: 1.6rem; }
.ab2-glass b { display: block; font-size: 1.05rem; color: #fff; }
.ab2-glass small { display: block; margin-top: .15rem; color: rgba(255, 255, 255, .68); font-size: .88rem; line-height: 1.45; }

.ab2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; padding: 1.4rem 0 1.6rem; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.ab2-stats li { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem 1rem; text-align: center; border-left: 1px solid rgba(255, 255, 255, .1); }
.ab2-stats li:first-child { border-left: 0; }
.ab2-stats i { color: #ff8aa3; font-size: 1.4rem; }
.ab2-stats b { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: #fff; }
.ab2-stats span { font-size: .78rem; color: rgba(255, 255, 255, .6); }

.ab2-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.2rem; align-items: center; }
.ab2-story h2 { margin: .8rem 0 1rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; }
.ab2-story .lead { margin: 0; }
.ab2-story .lead.mt { margin-top: 1rem; }
.ab2-swap { padding: 1.3rem; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 28px 48px -34px rgba(20, 16, 15, .55); }
.ab2-swap__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; padding: .3rem .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ab2-swap__head .is-new { color: var(--red); }
.ab2-swap__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: .7rem .8rem; margin-bottom: .5rem; border-radius: 14px; background: #faf8f8; }
.ab2-swap__old { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .9rem; text-decoration: line-through; text-decoration-color: rgba(20, 16, 15, .25); }
.ab2-swap__old i { color: var(--faint); font-size: 1.1rem; }
.ab2-swap__arrow { color: var(--red); }
.ab2-swap__new { justify-self: end; padding: .3rem .8rem; border-radius: 999px; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-size: .8rem; box-shadow: 0 10px 16px -10px #e2375c; }

.ab2-mission { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.6rem); border-radius: 30px; color: #fff; text-align: center; background: radial-gradient(600px 300px at 100% 0, rgba(226, 55, 92, .45), transparent 60%), radial-gradient(500px 300px at 0 100%, rgba(139, 92, 246, .35), transparent 60%), #0f0b0c; }
.ab2-mission__glow { position: absolute; top: -90px; left: 50%; width: 280px; height: 280px; margin-left: -140px; border-radius: 50%; background: #e2375c; filter: blur(90px); opacity: .3; pointer-events: none; }
.ab2-mission > * { position: relative; }
.ab2-mission blockquote { max-width: 760px; margin: 1.2rem auto 1.6rem; font-family: var(--font-head); font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.ab2-mission blockquote em { font-style: normal; background: linear-gradient(90deg, #ff8aa3, #c4a1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab2-mission ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.ab2-mission li { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .9rem; font-weight: 600; }
.ab2-mission li i { color: #ff8aa3; font-size: 1.15rem; }

.ab2-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ab2-pr { position: relative; overflow: hidden; padding: 1.7rem 1.5rem 1.5rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 22px 40px -32px rgba(20, 16, 15, .5); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ab2-pr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #fff)); }
.ab2-pr::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .4s ease; }
.ab2-pr:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: 0 34px 50px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.ab2-pr:hover::after { transform: scale(1.5); }
.ab2-pr__ico { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); color: #fff; font-size: 1.6rem; box-shadow: 0 16px 26px -12px var(--c); }
.ab2-pr__num { position: absolute; z-index: 1; top: 1rem; right: 1.2rem; font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--c) 14%, #fff); }
.ab2-pr h3 { position: relative; z-index: 1; margin: 1.1rem 0 .4rem; font-size: 1.12rem; }
.ab2-pr p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }

.ab2-who { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ab2-who span { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1.3rem .75rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease; }
.ab2-who span:hover { transform: translateY(-4px); border-color: var(--c); }
.ab2-who i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.15rem; }

@media (max-width: 960px) {
    .ab2-hero { padding-top: 2.6rem; }
    .ab2-hero__grid, .ab2-story { grid-template-columns: 1fr; gap: 2rem; }
    .ab2-glass:nth-child(2), .ab2-glass:nth-child(3) { margin-left: 0; }
    .ab2-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ab2-hero__cta .btn { flex: 1 1 100%; justify-content: center; min-height: 50px; }
    .ab2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .8rem; }
    .ab2-stats li:nth-child(odd) { border-left: 0; }
    .ab2-principles { grid-template-columns: 1fr; gap: .8rem; }
    .ab2-pr { padding: 1.4rem 1.2rem; border-radius: 20px; }
    .ab2-swap { padding: 1rem; border-radius: 22px; }
    .ab2-swap__row { padding: .6rem .6rem; gap: .4rem; }
    .ab2-swap__old { font-size: .82rem; gap: .4rem; } .ab2-swap__new { font-size: .72rem; padding: .25rem .6rem; }
    .ab2-mission { border-radius: 24px; padding: 1.8rem 1.2rem; }
    .ab2-who span { flex: 1 1 calc(50% - .8rem); }
}
@media (prefers-reduced-motion: reduce) { .ab2-glass, .ab2-pr, .ab2-who span, .ab2-pr::after { transition: none; } }

/* ===== Features page v2 ===== */
.ft-hero { position: relative; overflow: hidden; padding: 4rem 0 4.2rem; color: #fff; background: radial-gradient(900px 480px at 90% -10%, rgba(226, 55, 92, .35), transparent 60%), radial-gradient(700px 460px at 0 110%, rgba(139, 92, 246, .28), transparent 60%), #0f0b0c; }
.ft-hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.ft-hero__glow--a { width: 300px; height: 300px; top: -120px; left: 36%; background: #e2375c; }
.ft-hero__glow--b { width: 240px; height: 240px; bottom: -110px; right: 4%; background: #8b5cf6; }
.ft-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; }
.ft-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 138, 163, .5); background: rgba(226, 55, 92, .14); color: #ffb3c4; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.ft-hero h1 { margin: 1.1rem 0 .9rem; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; color: #fff; text-wrap: balance; }
.ft-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ff8aa3, #c4a1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-hero__copy > p { max-width: 33rem; font-size: 1.08rem; color: rgba(255, 255, 255, .75); }
.ft-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.ft-hero__cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.ft-hero__cta .btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.ft-hero .ft-hero__note { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.ft-hero__note i { color: #34d399; }

.ft-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ft-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; text-decoration: none; box-shadow: 0 20px 34px -26px rgba(0, 0, 0, .9); transition: transform .3s ease, border-color .3s ease, background-color .3s ease; }
.ft-tile:nth-child(3n+2) { transform: translateY(1rem); }
.ft-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 65%, transparent); }
.ft-tile:nth-child(3n+2):hover { transform: translateY(calc(1rem - 4px)); }
.ft-tile span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--c) 28%, transparent); color: #fff; font-size: 1.4rem; box-shadow: 0 10px 18px -10px var(--c); }
.ft-tile small { font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .88); line-height: 1.25; }

.ft-mods { display: grid; gap: 1.6rem; }
.ft-mod { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.4rem; align-items: center; padding: clamp(1.6rem, 3.5vw, 2.6rem); border-radius: 30px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 7%, #fff) 0%, #fff 55%); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 28px 50px -38px color-mix(in srgb, var(--c) 55%, transparent); scroll-margin-top: 130px; }
.ft-mod--flip .ft-mod__copy { order: 2; }
.ft-mod__top { display: flex; align-items: center; gap: .9rem; }
.ft-mod__ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); color: #fff; font-size: 1.7rem; box-shadow: 0 16px 26px -12px var(--c); }
.ft-mod__num { padding: .25rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.ft-mod h2 { margin: 1.1rem 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.ft-mod__lead { margin: 0 0 1.2rem; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.ft-mod__points { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.ft-mod__points li { display: flex; align-items: flex-start; gap: .6rem; color: #3a3234; font-weight: 500; line-height: 1.45; }
.ft-mod__points i { flex: none; margin-top: .12rem; color: var(--c); font-size: 1.2rem; }

.ft-vis { position: relative; padding: 1.4rem 1rem 1.6rem; }
.ft-vis::before { content: ""; position: absolute; inset: 6% 2% 6% 6%; border-radius: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 6%, #fff)); transform: rotate(3deg); }
.ft-vis__card { position: relative; padding: 1rem 1.1rem 1.2rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 34px 56px -30px rgba(20, 16, 15, .55); transform: rotate(-1.5deg); }
.ft-vis__bar { display: flex; align-items: center; gap: .35rem; margin-bottom: .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.ft-vis__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #e5e1e1; }
.ft-vis__bar > i:first-child { background: #ff5f57; } .ft-vis__bar > i:nth-child(2) { background: #febc2e; } .ft-vis__bar > i:nth-child(3) { background: #28c840; }
.ft-vis__bar span { margin-left: .6rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.ft-vis__row { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; margin-bottom: .45rem; border-radius: 12px; background: #faf8f8; font-size: .85rem; }
.ft-vis__row span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, #fff); color: var(--c); font-size: .95rem; }
.ft-vis__row b { font-weight: 600; line-height: 1.3; }
.ft-vis__chart { display: flex; align-items: flex-end; gap: .4rem; height: 72px; margin-top: .8rem; padding: .6rem .7rem 0; border-radius: 12px; background: linear-gradient(180deg, #faf8f8, #fff); }
.ft-vis__chart span { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff)); }
.ft-vis__chip { position: absolute; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; background: #fff; color: var(--ink); font-size: .76rem; font-weight: 700; box-shadow: 0 16px 28px -14px rgba(20, 16, 15, .55); animation: svc-float 6s ease-in-out infinite; }
.ft-vis__chip i { color: var(--c); }
.ft-vis__chip--a { top: 0; right: 4%; } .ft-vis__chip--b { bottom: 0; left: 2%; animation-delay: -3s; }
.ft-vis__chip--b i { color: #10b981; }

.ft-updates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.1rem; }
.ft-up { position: relative; overflow: hidden; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.ft-up::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #e2375c, #8b5cf6); }
.ft-up:hover { transform: translateY(-5px); box-shadow: 0 28px 44px -28px rgba(226, 55, 92, .45); }
.ft-up__meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.ft-up__ver { padding: .25rem .7rem; border-radius: 999px; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-size: .74rem; font-weight: 800; }
.ft-up time { color: var(--muted); font-size: .8rem; font-weight: 600; }
.ft-up h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.ft-up p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }

.ft-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ft-ex { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease; }
.ft-ex:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.ft-ex__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.5rem; }
.ft-ex b { display: block; font-size: 1rem; }
.ft-ex small { display: block; margin-top: .15rem; color: var(--muted); font-size: .86rem; line-height: 1.4; }

@media (max-width: 960px) {
    .ft-hero { padding: 2.6rem 0 3rem; }
    .ft-hero__grid, .ft-mod { grid-template-columns: 1fr; gap: 2rem; }
    .ft-mod--flip .ft-mod__copy { order: 0; }
    .ft-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ft-hero__cta .btn { flex: 1 1 100%; justify-content: center; min-height: 50px; }
    .ft-tiles { gap: .55rem; }
    .ft-tile { padding: .75rem; border-radius: 16px; gap: .5rem; }
    .ft-tile:nth-child(3n+2), .ft-tile:nth-child(3n+2):hover { transform: none; }
    .ft-tile span { width: 38px; height: 38px; font-size: 1.2rem; border-radius: 12px; }
    .ft-tile small { font-size: .72rem; }
    .ft-mod { padding: 1.3rem 1.1rem 1rem; border-radius: 24px; }
    .ft-mod__ico { width: 50px; height: 50px; }
    .ft-extras { grid-template-columns: 1fr; gap: .7rem; }
    .ft-vis { padding: 1rem .4rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .ft-tile, .ft-up, .ft-ex { transition: none; } .ft-vis__chip { animation: none; } }

/* Features: readable active pill in the sticky module nav */
.module-nav a.is-on, .module-nav a.is-on:hover { color: #fff; }
.module-nav a.is-on i { color: #fff; }

/* ===== Salons directory v2 ===== */
.sl-hero { position: relative; overflow: hidden; padding: 3.2rem 0 3rem; color: #fff; background: radial-gradient(900px 440px at 90% -10%, rgba(226, 55, 92, .35), transparent 60%), radial-gradient(700px 420px at 0 110%, rgba(139, 92, 246, .28), transparent 60%), #0f0b0c; }
.sl-hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.sl-hero__glow--a { width: 280px; height: 280px; top: -120px; left: 34%; background: #e2375c; }
.sl-hero__glow--b { width: 220px; height: 220px; bottom: -110px; right: 5%; background: #8b5cf6; }
.sl-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 2.4rem; align-items: center; }
.sl-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 138, 163, .5); background: rgba(226, 55, 92, .14); color: #ffb3c4; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.sl-hero h1 { margin: 1rem 0 .7rem; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; color: #fff; text-wrap: balance; }
.sl-hero__copy > p { max-width: 34rem; margin: 0; color: rgba(255, 255, 255, .72); font-size: 1.05rem; }
.sl-search { display: flex; gap: .5rem; max-width: 560px; margin-top: 1.5rem; padding: .5rem; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .8); }
.sl-search__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 50px; border-radius: 13px; background: #f6f3f3; color: var(--ink); }
.sl-search__field i { color: var(--red); font-size: 1.2rem; }
.sl-search__field input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.sl-search .btn { flex: none; min-height: 50px; padding: 0 1.4rem; border-radius: 13px; }
.sl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.sl-stats li { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .9rem 1rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sl-stats i { margin-bottom: .45rem; color: #ff8aa3; font-size: 1.3rem; }
.sl-stats b { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; line-height: 1.05; color: #fff; }
.sl-stats span { font-size: .74rem; color: rgba(255, 255, 255, .65); }

.sl-main { padding-top: 1.6rem; }
.sl-active { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.1rem; font-size: .88rem; color: var(--muted); }
.sl-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(226, 55, 92, .1); color: var(--red); font-weight: 700; text-decoration: none; transition: background-color .2s ease; }
.sl-chip:hover { background: rgba(226, 55, 92, .2); }
.sl-chip i { font-size: .95rem; }
.sl-clear { margin-left: .3rem; color: var(--muted); font-weight: 600; text-decoration: underline; }
.sl-clear:hover { color: var(--red); }

.sl-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.sl-filters { position: sticky; top: 88px; display: grid; gap: 1rem; }
.sl-box { padding: 1.1rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 18px 34px -28px rgba(20, 16, 15, .45); }
.sl-box h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .95rem; letter-spacing: 0; }
.sl-box h2 i { color: var(--red); }
.sl-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.sl-box:nth-child(2) .sl-list { max-height: 300px; overflow-y: auto; }
.sl-list a { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: 12px; color: #3a3234; font-size: .92rem; font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.sl-list a span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-list a:hover { background: #f6f3f3; }
.sl-list a.is-on { background: color-mix(in srgb, var(--red) 9%, #fff); color: var(--red); }
.sl-list em { min-width: 26px; padding: .1rem .5rem; border-radius: 999px; background: #f1eeee; color: var(--muted); font-size: .74rem; font-style: normal; font-weight: 700; text-align: center; }
.sl-list a.is-on em { background: var(--red); color: #fff; }
.sl-list__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.05rem; }

.sl-count { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.sl-count b { color: var(--ink); font-size: 1.1rem; }
.sl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.sl-card { min-width: 0; }
.sl-card.hm-salon { border-radius: 22px; box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 18px 34px -26px rgba(20, 16, 15, .45); }
.sl-card.hm-salon:hover { transform: translateY(-6px); border-color: rgba(226, 55, 92, .35); box-shadow: 0 30px 46px -26px rgba(226, 55, 92, .5); }

.sl-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 2rem; }
.sl-pager a, .sl-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .8rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.sl-pager a:hover { border-color: var(--red); color: var(--red); }
.sl-pager a.is-on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 12px 20px -10px rgba(226, 55, 92, .8); }
.sl-pager .is-off { opacity: .4; }

.sl-filter-toggle { display: none; align-items: center; gap: .55rem; width: 100%; min-height: 48px; margin-bottom: 1rem; padding: 0 1rem; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.sl-filter-toggle i:first-child { color: var(--red); font-size: 1.25rem; }
.sl-filter-toggle b { padding: .1rem .55rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .75rem; }
.sl-filter-toggle__chev { margin-left: auto; transition: transform .25s ease; }
.sl-filter-toggle.is-open .sl-filter-toggle__chev { transform: rotate(180deg); }

@media (max-width: 1100px) { .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
    .sl-hero { padding: 2.4rem 0 2.2rem; }
    .sl-hero__inner { grid-template-columns: 1fr; gap: 1.4rem; }
    .sl-stats { max-width: 520px; }
    .sl-layout { grid-template-columns: 1fr; gap: 0; }
    .sl-filter-toggle { display: flex; }
    .sl-filters { display: none; position: static; margin-bottom: 1.2rem; }
    .sl-filters.is-open { display: grid; animation: svc-in .25s ease both; }
    .sl-list { max-height: none; } .sl-box:nth-child(2) .sl-list { max-height: 240px; }
}
@media (max-width: 600px) {
    .sl-grid { grid-template-columns: 1fr; }
    .sl-search { flex-wrap: wrap; border-radius: 16px; }
    .sl-search .btn { flex: 1 1 100%; }
    .sl-stats { gap: .5rem; }
    .sl-stats li { padding: .7rem .75rem; border-radius: 14px; }
    .sl-stats b { font-size: 1.35rem; }
    .sl-pager a, .sl-pager span { min-width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .sl-filters.is-open { animation: none; } }

/* ===== Salons: slim hero so the list starts higher ===== */
.sl-hero { padding: 1.5rem 0 1.4rem; }
.sl-hero__glow--a { width: 200px; height: 200px; top: -110px; }
.sl-hero__glow--b { width: 160px; height: 160px; bottom: -100px; }
.sl-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 1.2rem 2rem; align-items: center; }
.sl-hero h1 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.15; }
.sl-search { max-width: none; margin-top: 0; padding: .4rem; border-radius: 16px; }
.sl-search__field, .sl-search .btn { min-height: 46px; }
.sl-search__field input { height: 46px; }
.sl-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .55rem 0 0; }
.sl-stats li { flex-direction: row; align-items: center; gap: .35rem; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.sl-stats i { margin: 0; font-size: 1rem; }
.sl-stats b { font-size: .95rem; font-family: inherit; font-weight: 800; line-height: 1; color: #fff; }
.sl-main { padding-top: 1.1rem; }
.sl-active { margin-bottom: .8rem; }
@media (max-width: 960px) {
    .sl-hero { padding: 1.2rem 0 1.1rem; }
    .sl-hero__inner { grid-template-columns: 1fr; gap: .9rem; }
    .sl-stats { max-width: none; }
}
@media (max-width: 600px) {
    .sl-hero h1 { font-size: 1.45rem; }
    .sl-stats { gap: .3rem .9rem; margin-top: .45rem; }
    .sl-stats li { font-size: .8rem; }
    .sl-search { flex-wrap: nowrap; }
    .sl-search .btn { flex: none; min-height: 46px; padding: 0 1.1rem; }
    .sl-filter-toggle { min-height: 44px; margin-bottom: .8rem; }
}.sl-hero__inner > * { min-width: 0; }
.sl-search { width: 100%; min-width: 0; }
@media (max-width: 600px) { .sl-search__field { padding: 0 .7rem; gap: .45rem; } .sl-search .btn { padding: 0 1rem; } }

/* ===== Salons: searchable pickers + bottom sheet (phones) ===== */
.sl-pickers { display: none; }
.sl-sheet[hidden] { display: none; }
html.sheet-open { overflow: hidden; }
@media (max-width: 960px) {
    .sl-filter-toggle, .sl-filters, .sl-filters.is-open { display: none !important; }
    .sl-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
    .sl-pickers:has(.sl-pick:only-child) { grid-template-columns: 1fr; }
    .sl-pick { display: flex; align-items: center; gap: .6rem; min-width: 0; min-height: 56px; padding: .5rem .8rem; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: border-color .2s ease, box-shadow .2s ease; }
    .sl-pick > i:first-child { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.15rem; }
    .sl-pick span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    .sl-pick small { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
    .sl-pick b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sl-pick__chev { flex: none; color: var(--muted); }
    .sl-pick.is-set { border-color: var(--red); box-shadow: 0 0 0 3px rgba(226, 55, 92, .12); }
    .sl-pick.is-set > i:first-child { background: var(--red); color: #fff; }
    .sl-pick:active { transform: scale(.98); }

    .sl-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; }
    .sl-sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 11, 12, .55); backdrop-filter: blur(2px); animation: sl-fade .2s ease both; }
    .sl-sheet__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 85vh; max-height: 85dvh; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -24px 50px -20px rgba(0, 0, 0, .5); animation: sl-up .28s cubic-bezier(.2, .8, .2, 1) both; }
    .sl-sheet__panel::before { content: ""; align-self: center; width: 42px; height: 4px; margin-bottom: .7rem; border-radius: 4px; background: var(--line); }
    .sl-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
    .sl-sheet__head h2 { margin: 0; font-size: 1.15rem; }
    .sl-sheet__x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #f4f1f1; color: var(--ink); font-size: 1.2rem; cursor: pointer; }
    .sl-sheet__search { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 50px; margin-bottom: .6rem; border-radius: 14px; background: #f6f3f3; border: 1px solid transparent; }
    .sl-sheet__search:focus-within { border-color: rgba(226, 55, 92, .5); box-shadow: 0 0 0 3px rgba(226, 55, 92, .12); background: #fff; }
    .sl-sheet__search i { color: var(--red); font-size: 1.2rem; }
    .sl-sheet__search input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
    .sl-sheet__list { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
    .sl-sheet__list li[hidden] { display: none; }
    .sl-sheet__list a { display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: .5rem .6rem; border-radius: 14px; color: #3a3234; font-size: 1rem; font-weight: 600; text-decoration: none; }
    .sl-sheet__list a span:nth-child(2) { flex: 1; min-width: 0; }
    .sl-sheet__list a:active { background: #f6f3f3; }
    .sl-sheet__list a.is-on { background: color-mix(in srgb, var(--red) 9%, #fff); color: var(--red); }
    .sl-sheet__list a.is-on::after { content: "✓"; font-size: 1.1rem; font-weight: 800; }
    .sl-sheet__list em { min-width: 28px; padding: .15rem .55rem; border-radius: 999px; background: #f1eeee; color: var(--muted); font-size: .78rem; font-style: normal; font-weight: 700; text-align: center; }
    .sl-sheet__list a.is-on em { background: var(--red); color: #fff; }
    .sl-sheet__none { margin: 1.4rem 0; text-align: center; color: var(--muted); }
}
@media (min-width: 961px) { .sl-sheet { display: none !important; } }
@keyframes sl-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes sl-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sl-sheet__panel, .sl-sheet__backdrop { animation: none; } }
/* ===== Salon detail page v2 (/salon/{slug}) ===== */
.sp-page { padding: 1.2rem 0 4rem; background: #f6f4f4; }
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .9rem; font-size: .85rem; color: var(--muted); }
.sp-crumbs a { color: var(--muted); text-decoration: none; } .sp-crumbs a:hover { color: var(--red); }
.sp-crumbs i { font-size: .8rem; opacity: .6; } .sp-crumbs b { color: var(--ink); font-weight: 700; }

/* photo mosaic */
.sp-gallery { position: relative; display: grid; grid-template-columns: 1fr; gap: .5rem; height: 440px; border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, #fde4ea, #ede9fe); box-shadow: 0 30px 50px -36px rgba(20, 16, 15, .6); }
.sp-gallery.has-many { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sp-gallery__item { position: relative; display: block; padding: 0; border: 0; background: #e9e4e4; overflow: hidden; cursor: zoom-in; }
.sp-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sp-gallery__item:hover img { transform: scale(1.05); }
.sp-gallery.has-many .sp-gallery__item--1 { grid-row: 1 / span 2; }
.sp-gallery__ph { display: flex; align-items: center; justify-content: center; font-size: 7rem; font-weight: 800; color: var(--red); opacity: .8; }
.sp-gallery__tag { position: absolute; z-index: 2; top: 1rem; left: 1rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .5); }
.sp-gallery__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; background: rgba(15, 11, 12, .55); color: #fff; font-size: 1.05rem; font-weight: 800; backdrop-filter: blur(2px); }
.sp-gallery__all { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: 0 1rem; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .6); transition: transform .2s ease; }
.sp-gallery__all:hover { transform: translateY(-2px); }

.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 1.4rem; align-items: start; margin-top: 1.4rem; }
.sp-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.sp-card { padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 18px 34px -28px rgba(20, 16, 15, .45); }
.sp-card h2 { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font-size: 1.15rem; }
.sp-card h2 i { color: var(--red); }
.sp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-card__head h2 { margin-bottom: 1rem; }
.sp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; margin-bottom: 1rem; padding: 0 .6rem; border-radius: 999px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: .8rem; font-weight: 800; }

.sp-title__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sp-title h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.sp-verified { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .75rem; border-radius: 999px; background: rgba(16, 185, 129, .12); color: #059669; font-size: .76rem; font-weight: 700; }
.sp-place { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; color: var(--muted); }
.sp-place i { color: var(--red); }
.sp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.sp-facts li { display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border-radius: 16px; background: #faf8f8; border: 1px solid var(--line); }
.sp-facts li > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.2rem; }
.sp-facts span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sp-facts small { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sp-facts b { font-size: .92rem; }
.sp-facts .is-open > i { background: rgba(16, 185, 129, .14); color: #059669; } .sp-facts .is-open small { color: #059669; }
.sp-facts .is-closed > i { background: rgba(239, 68, 68, .12); color: #dc2626; } .sp-facts .is-closed small { color: #dc2626; }
.sp-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.sp-wa { background: #25d366; color: #fff; border: 0; } .sp-wa:hover { background: #1ebe5b; color: #fff; }

.sp-tabs { position: sticky; top: 64px; z-index: 5; display: flex; gap: .3rem; padding: .4rem; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tabs a { flex: 1 0 auto; text-align: center; padding: .65rem 1.1rem; border-radius: 12px; color: var(--muted); font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.sp-tabs a.is-on { background: var(--red); color: #fff; box-shadow: 0 10px 18px -10px rgba(226, 55, 92, .8); }
#overview, #services, #memberships, #location { scroll-margin-top: 130px; }

.sp-about { margin: 0 0 1.1rem; color: #4a4240; line-height: 1.7; }
.sp-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.sp-infos li { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: 16px; background: #faf8f8; }
.sp-infos i { color: var(--red); font-size: 1.25rem; } .sp-infos span { font-size: .74rem; color: var(--muted); } .sp-infos b { font-size: .95rem; }

.sp-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.sp-svcs a { display: flex; align-items: center; gap: .8rem; padding: .75rem .85rem; border-radius: 16px; background: #faf8f8; border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.sp-svcs a:hover { border-color: rgba(226, 55, 92, .4); background: #fff; transform: translateY(-2px); }
.sp-svc__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.2rem; }
.sp-svc__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-svc__name b { font-size: .95rem; line-height: 1.25; }
.sp-svc__name small { color: var(--muted); font-size: .76rem; } .sp-svc__name small i { margin-right: .25rem; }
.sp-svc__price { flex: none; padding: .3rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--red); font-weight: 800; font-size: .9rem; }
.sp-empty { color: var(--muted); margin: 0 0 1rem; }

.sp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.sp-plan { box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 18px 32px -26px rgba(20, 16, 15, .5); }
.sp-plan .mo-card__top h3 { font-size: 1.1rem; } .sp-plan .mo-card__price b { font-size: 1.9rem; }
.sp-plan .mo-card__cut i { background: #fff; }
.sp-plan .mo-card__body { padding: 1.4rem 1.2rem 1.2rem; }
.sp-plan:hover { transform: translateY(-4px); }

.sp-loc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.sp-loc__map { position: relative; display: flex; align-items: center; justify-content: center; height: 150px; border-radius: 18px; color: var(--red); font-size: 2.6rem; background: radial-gradient(circle at 30% 30%, rgba(14, 165, 233, .18), transparent 50%), radial-gradient(circle at 75% 70%, rgba(226, 55, 92, .16), transparent 50%), repeating-linear-gradient(0deg, transparent 0 22px, rgba(20, 16, 15, .05) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, rgba(20, 16, 15, .05) 22px 23px), #f3f0f0; box-shadow: inset 0 0 0 1px var(--line); }
.sp-loc__map i { filter: drop-shadow(0 8px 10px rgba(226, 55, 92, .45)); animation: svc-float 4s ease-in-out infinite; }
.sp-loc__info b { font-size: 1.05rem; } .sp-loc__info p { margin: .3rem 0 0; color: #4a4240; }
.sp-loc__info .sp-actions { margin-top: 1rem; }

.sp-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; }
.sp-book { display: flex; flex-direction: column; gap: .8rem; }
.sp-book__price { display: flex; align-items: baseline; gap: .6rem; }
.sp-book__price small { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sp-book__price b { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.sp-book__hours { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted); }
.sp-book__hours i { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; }
.sp-book__hours.is-open { color: #059669; } .sp-book__hours.is-open i { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .25); }
.sp-book__hours.is-closed { color: #dc2626; } .sp-book__hours.is-closed i { background: #ef4444; }
.sp-book__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.sp-book__row .btn { justify-content: center; }
.sp-trust { display: grid; gap: .5rem; margin: .3rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px dashed var(--line); }
.sp-trust li { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .84rem; }
.sp-trust i { color: #10b981; font-size: 1.1rem; }
.sp-enquire h2 { margin-bottom: .4rem; }
.sp-enquire__sub { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; }
.sp-enquire .field { margin-bottom: .8rem; } .sp-enquire textarea { min-height: 80px; }

.sp-related { margin-top: 2.4rem; }
.sp-related__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sp-related__head h2 { font-size: 1.3rem; }
.sp-related__head a { display: inline-flex; align-items: center; gap: .35rem; color: var(--red); font-weight: 700; text-decoration: none; }
.sp-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sp-rel { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .7rem .7rem 1rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.sp-rel:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -26px rgba(226, 55, 92, .45); }
.sp-rel__img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: .5rem; border-radius: 14px; background: linear-gradient(135deg, #fde4ea, #ede9fe); overflow: hidden; }
.sp-rel__img em { font-style: normal; font-size: 2.4rem; font-weight: 800; color: var(--red); }
.sp-rel__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-rel__img span { position: absolute; top: .55rem; left: .55rem; padding: .22rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sp-rel b { padding: 0 .3rem; font-size: 1rem; } .sp-rel small { padding: 0 .3rem; color: var(--muted); font-size: .82rem; } .sp-rel small i { margin-right: .2rem; color: var(--red); }
.sp-rel__from { align-self: flex-start; margin: .35rem .3rem 0; padding: .2rem .65rem; border-radius: 999px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: .76rem; font-style: normal; font-weight: 800; }

/* phones: sticky quick-action bar */
.sp-bar { display: none; }
.sp-lb[hidden] { display: none; }
.sp-lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(10, 6, 8, .94); animation: sl-fade .2s ease both; }
.sp-lb__img { max-width: min(92vw, 1100px); max-height: 82vh; max-height: 82dvh; border-radius: 14px; object-fit: contain; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.sp-lb__close, .sp-lb__nav { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem; cursor: pointer; transition: background-color .2s ease; }
.sp-lb__close:hover, .sp-lb__nav:hover { background: rgba(255, 255, 255, .28); }
.sp-lb__close { top: 1rem; right: 1rem; }
.sp-lb__nav { top: 50%; margin-top: -24px; } .sp-lb__nav--prev { left: 1rem; } .sp-lb__nav--next { right: 1rem; }
.sp-lb__count { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .85rem; font-weight: 700; }

@media (max-width: 1100px) { .sp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
    .sp-grid { grid-template-columns: 1fr; }
    .sp-side { position: static; }
    .sp-gallery { height: 340px; border-radius: 22px; }
    .sp-tabs { top: 60px; }
    .sp-loc { grid-template-columns: 1fr; }
    .sp-loc__map { height: 110px; }
}
@media (max-width: 760px) {
    .sp-page { padding-bottom: 6rem; }
    .sp-gallery, .sp-gallery.has-many { grid-template-columns: 1fr; grid-template-rows: 1fr; height: auto; aspect-ratio: 4 / 3; }
    .sp-gallery.has-many .sp-gallery__item--1 { grid-row: auto; }
    .sp-gallery .sp-gallery__item--2, .sp-gallery .sp-gallery__item--3 { display: none; }
    .sp-svcs { grid-template-columns: 1fr; }
    .sp-card { padding: 1.2rem 1.1rem; border-radius: 20px; }
    .sp-actions .btn { flex: 1 1 calc(50% - .6rem); justify-content: center; }
    .sp-bar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; gap: .5rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -16px 30px -22px rgba(20, 16, 15, .5); }
    .sp-bar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; border-radius: 14px; background: #fff; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 800; text-decoration: none; }
    .sp-bar__btn--wa { background: #25d366; border-color: #25d366; color: #fff; }
    .sp-bar__btn--book { flex: 1.5; background: linear-gradient(135deg, #e2375c, #e10600); border-color: transparent; color: #fff; box-shadow: 0 12px 20px -12px rgba(226, 55, 92, .9); }
    .sp-bar__btn i { font-size: 1.25rem; }
    .is-salon .to-top, .is-salon .wa-float { bottom: 5.4rem; }
    .sp-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .sp-rel { padding: .5rem .5rem .8rem; border-radius: 16px; }
    .sp-rel b { font-size: .9rem; }
}
@media (max-width: 380px) { .sp-related__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sp-gallery__item img, .sp-svcs a, .sp-rel, .sp-loc__map i { transition: none; animation: none; } }
@media (max-width: 600px) {
    .sp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .sp-facts li { padding: .6rem .65rem; gap: .5rem; border-radius: 14px; }
    .sp-facts li > i { width: 34px; height: 34px; font-size: 1.05rem; }
    .sp-facts b { font-size: .84rem; }
    .sp-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Public booking page (/book/{slug}) ===== */
.is-booking { background: #f6f4f4; }
.bk { min-height: 60vh; }
.bk-hero { position: relative; overflow: hidden; padding: 1.4rem 0; color: #fff; background: radial-gradient(800px 360px at 90% -20%, rgba(226, 55, 92, .4), transparent 60%), radial-gradient(600px 340px at 0 120%, rgba(139, 92, 246, .3), transparent 60%), #0f0b0c; }
.bk-hero__glow { position: absolute; width: 200px; height: 200px; top: -110px; left: 40%; border-radius: 50%; background: #e2375c; filter: blur(70px); opacity: .4; pointer-events: none; }
.bk-hero__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bk-hero__who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.bk-hero__logo { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-weight: 800; font-size: 1.5rem; box-shadow: 0 14px 24px -12px rgba(226, 55, 92, .8); }
.bk-hero__logo em { font-style: normal; } .bk-hero__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-hero small { display: block; color: #ffb3c4; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.bk-hero h1 { margin: .15rem 0 0; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.15; color: #fff; }
.bk-hero p { display: flex; align-items: center; gap: .35rem; margin: .25rem 0 0; color: rgba(255, 255, 255, .7); font-size: .88rem; }
.bk-hero p i { color: #ff8aa3; }
.bk-hero__back { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: 0 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; transition: background-color .2s ease; }
.bk-hero__back:hover { background: rgba(255, 255, 255, .18); }

.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; padding-top: 1.6rem; padding-bottom: 4rem; }
.bk-main { min-width: 0; }
.bk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.bk-steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .7rem .6rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .88rem; font-weight: 700; transition: all .25s ease; }
.bk-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #f1eeee; font-size: .8rem; font-weight: 800; }
.bk-steps li.is-active { border-color: var(--red); color: var(--ink); box-shadow: 0 0 0 3px rgba(226, 55, 92, .12); }
.bk-steps li.is-active span { background: var(--red); color: #fff; }
.bk-steps li.is-done { color: #059669; border-color: rgba(16, 185, 129, .35); }
.bk-steps li.is-done span { background: #10b981; color: #fff; }

.bk-card { padding: 1.6rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 22px 40px -32px rgba(20, 16, 15, .5); animation: svc-in .3s ease both; }
.bk-title { margin: 0; font-size: 1.4rem; }
.bk-sub { margin: .3rem 0 1.2rem; color: var(--muted); font-size: .95rem; }
.bk-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .9rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.bk-back:hover { color: var(--red); }
.bk-notice { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(239, 68, 68, .09); border: 1px solid rgba(239, 68, 68, .3); color: #b91c1c; font-weight: 600; font-size: .92rem; }
.bk-notice i { font-size: 1.25rem; }

.bk-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.bk-service { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem .9rem; border-radius: 18px; border: 1.5px solid var(--line); background: #faf8f8; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.bk-service:hover { border-color: rgba(226, 55, 92, .5); background: #fff; transform: translateY(-2px); box-shadow: 0 18px 28px -22px rgba(226, 55, 92, .6); }
.bk-service.is-on { border-color: var(--red); background: #fff; }
.bk-service:disabled { opacity: .7; }
.bk-service__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.3rem; }
.bk-service__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-service__body b { font-size: .98rem; line-height: 1.25; }
.bk-service__body small { color: var(--muted); font-size: .78rem; } .bk-service__body small i { margin-right: .25rem; }
.bk-service__price { flex: none; padding: .3rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--red); font-weight: 800; font-size: .92rem; }
.bk-service__go { flex: none; color: var(--faint); }

.bk-label { display: flex; align-items: center; gap: .5rem; margin: 1.3rem 0 .6rem; font-size: .92rem; }
.bk-label:first-of-type { margin-top: 0; }
.bk-label i { color: var(--red); }
.bk-label small { margin-left: auto; color: var(--muted); font-weight: 600; }
.bk-dates { display: flex; gap: .5rem; padding: .2rem .1rem .6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bk-date { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: .05rem; width: 64px; padding: .6rem .3rem; border-radius: 16px; border: 1.5px solid var(--line); background: #faf8f8; color: var(--ink); font: inherit; cursor: pointer; transition: all .2s ease; }
.bk-date small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bk-date b { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.1; }
.bk-date em { font-style: normal; font-size: .7rem; color: var(--muted); }
.bk-date:hover { border-color: rgba(226, 55, 92, .5); background: #fff; }
.bk-date.is-on { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 14px 22px -12px rgba(226, 55, 92, .8); }
.bk-date.is-on small, .bk-date.is-on em { color: rgba(255, 255, 255, .85); }

.bk-stylists { display: flex; flex-wrap: wrap; gap: .5rem; }
.bk-stylist { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .45rem; border-radius: 999px; border: 1.5px solid var(--line); background: #faf8f8; color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; transition: all .2s ease; }
.bk-stylist span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-weight: 800; font-size: .85rem; }
.bk-stylist:hover { border-color: rgba(226, 55, 92, .5); background: #fff; }
.bk-stylist.is-on { border-color: var(--red); background: rgba(226, 55, 92, .07); box-shadow: 0 0 0 3px rgba(226, 55, 92, .1); }

.bk-group { margin-bottom: 1rem; }
.bk-group h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bk-group h4 i { font-size: 1.1rem; color: #f59e0b; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.bk-slot { min-height: 46px; padding: .5rem; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.bk-slot:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.bk-slot.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.bk-noslots { display: flex; align-items: center; gap: .8rem; padding: 1.1rem; border-radius: 16px; background: #faf8f8; border: 1px dashed var(--line); color: var(--muted); }
.bk-noslots i { font-size: 1.8rem; color: var(--faint); } .bk-noslots p { margin: 0; }

.bk-recap { display: grid; gap: .5rem; margin-bottom: 1.3rem; padding: 1rem 1.1rem; border-radius: 18px; background: linear-gradient(135deg, rgba(226, 55, 92, .07), rgba(139, 92, 246, .07)); border: 1px solid rgba(226, 55, 92, .2); }
.bk-recap div { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.bk-recap i { color: var(--red); font-size: 1.2rem; } .bk-recap span { flex: 1; } .bk-recap b { color: var(--red); }
.bk-field { margin-bottom: 1rem; }
.bk-field label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; } .bk-field label em { font-style: normal; font-weight: 500; color: var(--muted); }
.bk-input { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: #faf8f8; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.bk-input:focus-within { border-color: rgba(226, 55, 92, .6); box-shadow: 0 0 0 3px rgba(226, 55, 92, .14); background: #fff; }
.bk-input > i { color: var(--red); font-size: 1.2rem; }
.bk-input__cc { padding-right: .6rem; border-right: 1px solid var(--line); font-weight: 700; color: var(--muted); }
.bk-input input, .bk-input textarea { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.bk-input--area { align-items: flex-start; padding-top: .55rem; } .bk-input--area textarea { height: auto; min-height: 60px; resize: vertical; }
.bk-input.has-error { border-color: #ef4444; background: rgba(239, 68, 68, .04); }
.bk-error { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; color: #dc2626; font-size: .82rem; font-weight: 600; }
.bk-pay { display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0; padding: .75rem .9rem; border-radius: 12px; background: rgba(16, 185, 129, .09); color: #047857; font-size: .88rem; font-weight: 600; }
.bk-confirm { width: 100%; justify-content: center; min-height: 54px; }
.bk-spin { animation: bk-rot .8s linear infinite; }
@keyframes bk-rot { to { transform: rotate(360deg); } }

.bk-success { text-align: center; }
.bk-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #10b981; color: #fff; font-size: 2.4rem; box-shadow: 0 0 0 8px rgba(16, 185, 129, .15), 0 18px 30px -12px rgba(16, 185, 129, .8); animation: bk-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bk-pop { from { transform: scale(.4); opacity: 0; } }
.bk-success h2 { margin: 1.1rem 0 .2rem; font-size: 1.6rem; }
.bk-ticket { margin: 1.2rem 0; text-align: left; border-radius: 20px; background: #faf8f8; border: 1px dashed rgba(20, 16, 15, .2); overflow: hidden; }
.bk-ticket__ref { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; }
.bk-ticket__ref small { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; } .bk-ticket__ref b { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: .06em; }
.bk-ticket ul { display: grid; gap: .1rem; margin: 0; padding: .6rem 1.1rem 1rem; list-style: none; }
.bk-ticket li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); } .bk-ticket li:last-child { border-bottom: 0; }
.bk-ticket li > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.15rem; }
.bk-ticket li span { display: flex; flex-direction: column; min-width: 0; } .bk-ticket li small { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .bk-ticket li b { font-size: .95rem; }
.bk-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.bk-success__note { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }

.bk-empty { padding: 2.4rem 1.4rem; text-align: center; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bk-empty > i { font-size: 3rem; color: var(--faint); } .bk-empty h2 { margin: .6rem 0 .4rem; font-size: 1.3rem; } .bk-empty p { margin: 0 0 1.1rem; color: var(--muted); }

.bk-side { position: sticky; top: 84px; display: grid; gap: 1rem; }
.bk-box { border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 18px 34px -28px rgba(20, 16, 15, .45); overflow: hidden; }
.bk-salon__img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #fde4ea, #ede9fe); color: var(--red); font-size: 3rem; font-weight: 800; overflow: hidden; }
.bk-salon__img em { font-style: normal; } .bk-salon__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-salon__body { padding: 1rem 1.1rem 1.1rem; }
.bk-salon__body h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.bk-salon__body p { display: flex; align-items: center; gap: .45rem; margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.bk-salon__body p i { color: var(--red); } .bk-salon__body p.is-open { color: #059669; font-weight: 600; } .bk-salon__body a { color: inherit; text-decoration: none; }
.bk-summary { padding: 1.1rem; }
.bk-summary h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: 1rem; } .bk-summary h3 i { color: var(--red); }
.bk-summary ul { display: grid; gap: .45rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.bk-summary li { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 12px; background: #faf8f8; color: var(--muted); font-size: .88rem; }
.bk-summary li i { color: var(--faint); font-size: 1.1rem; } .bk-summary li span { flex: 1; min-width: 0; }
.bk-summary li.is-set { color: var(--ink); font-weight: 600; } .bk-summary li.is-set i { color: var(--red); } .bk-summary li b { color: var(--red); }
.bk-summary > p { display: flex; align-items: center; gap: .5rem; margin: 0; color: #047857; font-size: .82rem; font-weight: 600; } .bk-summary > p i { font-size: 1.1rem; }

@media (max-width: 960px) {
    .bk-layout { grid-template-columns: 1fr; padding-top: 1.1rem; }
    .bk-side { position: static; order: -1; grid-template-columns: 1fr; }
    .bk-salon__img { display: none; }
    .bk-box:first-child { display: none; }
}
@media (max-width: 600px) {
    .bk-hero { padding: 1rem 0; }
    .bk-hero__logo { width: 48px; height: 48px; border-radius: 15px; font-size: 1.25rem; }
    .bk-hero__back { padding: 0; width: 42px; justify-content: center; font-size: 0; gap: 0; } .bk-hero__back i { font-size: 1.2rem; }
    .bk-steps li { flex-direction: column; gap: .25rem; padding: .55rem .3rem; font-size: .72rem; text-align: center; }
    .bk-card { padding: 1.2rem 1rem; border-radius: 20px; }
    .bk-services { grid-template-columns: 1fr; }
    .bk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bk-success__actions .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
    .bk-summary ul { margin-bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .bk-card, .bk-success__icon, .bk-spin { animation: none; } }

/* ===== Booking: success screen v2 ===== */
.bk-summary[hidden] { display: none; }
.bk-done { padding: 0; overflow: hidden; }
.bk-done__top { position: relative; overflow: hidden; padding: 2.2rem 1.4rem 2rem; text-align: center; color: #fff; background: radial-gradient(600px 260px at 100% 0, rgba(139, 92, 246, .55), transparent 60%), radial-gradient(500px 260px at 0 100%, rgba(226, 55, 92, .5), transparent 60%), linear-gradient(135deg, #064e3b, #0f766e 55%, #0f0b0c); }
.bk-confetti { position: absolute; top: -14px; left: var(--x); width: 9px; height: 15px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--r)); animation: bk-fall 2.6s ease-out var(--d) both; pointer-events: none; }
.bk-confetti:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; } .bk-confetti:nth-child(4n) { height: 20px; width: 6px; }
@keyframes bk-fall { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(260px) rotate(calc(var(--r) + 360deg)); } }
.bk-done__ring { position: relative; display: inline-flex; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 9px rgba(255, 255, 255, .1), 0 20px 34px -14px rgba(0, 0, 0, .6); }
.bk-done__ring svg { width: 100%; height: 100%; }
.bk-done__ring circle { fill: #10b981; stroke: #fff; stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: bk-draw .7s ease .1s forwards; transform-origin: center; }
.bk-done__ring path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bk-draw .5s ease .65s forwards; }
@keyframes bk-draw { to { stroke-dashoffset: 0; } }
.bk-done__top h2 { margin: 1.1rem 0 .3rem; font-size: clamp(1.5rem, 3.4vw, 2rem); color: #fff; }
.bk-done__top p { margin: 0 auto; max-width: 28rem; color: rgba(255, 255, 255, .82); }
.bk-done__when { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-weight: 800; font-size: .95rem; backdrop-filter: blur(6px); }

.bk-ticket2 { margin: 1.4rem 1.4rem 0; border-radius: 22px; background: #faf8f8; border: 1px solid var(--line); box-shadow: 0 18px 34px -28px rgba(20, 16, 15, .55); overflow: hidden; }
.bk-ticket2__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: #fff; }
.bk-ticket2__head small { display: block; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bk-ticket2__head b { font-family: var(--font-head); font-size: 1.4rem; letter-spacing: .08em; color: var(--ink); }
.bk-copy { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .9rem; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.bk-copy:hover { border-color: var(--red); color: var(--red); }
.bk-ticket2__cut { position: relative; display: flex; align-items: center; height: 0; }
.bk-ticket2__cut i { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bk-ticket2__cut i:first-child { margin-left: -12px; } .bk-ticket2__cut i:last-child { margin-left: auto; margin-right: -12px; }
.bk-ticket2__cut span { position: absolute; left: 20px; right: 20px; top: 0; border-top: 2px dashed rgba(20, 16, 15, .15); }
.bk-ticket2__list { display: grid; gap: 0; margin: 0; padding: 1.1rem 1.2rem .4rem; list-style: none; }
.bk-ticket2__list li { display: flex; align-items: center; gap: .85rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.bk-ticket2__list li:last-child { border-bottom: 0; }
.bk-ticket2__list li > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.2rem; }
.bk-ticket2__list span { display: flex; flex-direction: column; min-width: 0; }
.bk-ticket2__list small { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bk-ticket2__list b { font-size: .98rem; line-height: 1.3; }
.bk-ticket2__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .6rem 1.2rem 1.2rem; padding: .85rem 1rem; border-radius: 14px; background: rgba(16, 185, 129, .1); color: #047857; font-weight: 700; }
.bk-ticket2__total span { display: inline-flex; align-items: center; gap: .5rem; } .bk-ticket2__total i { font-size: 1.25rem; } .bk-ticket2__total b { font-family: var(--font-head); font-size: 1.35rem; color: #065f46; }

.bk-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 1.4rem 0; }
.bk-action { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .85rem .4rem; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: .8rem; font-weight: 700; text-align: center; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.bk-action i { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.3rem; }
.bk-action:hover { transform: translateY(-3px); border-color: rgba(226, 55, 92, .5); box-shadow: 0 16px 26px -20px rgba(226, 55, 92, .7); }
.bk-action--wa i { background: rgba(37, 211, 102, .14); color: #16a34a; }

.bk-next { margin: 1.3rem 1.4rem 0; padding: 1.1rem 1.2rem; border-radius: 20px; background: linear-gradient(135deg, rgba(226, 55, 92, .06), rgba(139, 92, 246, .06)); border: 1px solid rgba(226, 55, 92, .15); }
.bk-next h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: 1rem; } .bk-next h3 i { color: var(--red); }
.bk-next ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.bk-next li { display: flex; align-items: flex-start; gap: .75rem; color: #3a3234; font-size: .92rem; line-height: 1.45; }
.bk-next li span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-size: .78rem; font-weight: 800; }
.bk-done__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.4rem 1.4rem 0; }
.bk-done__note { margin: 1rem 1.4rem 1.5rem; text-align: center; color: var(--muted); font-size: .85rem; }

@media (max-width: 600px) {
    .bk-done__top { padding: 1.8rem 1rem 1.6rem; }
    .bk-ticket2, .bk-actions, .bk-next, .bk-done__foot { margin-left: 1rem; margin-right: 1rem; }
    .bk-done__note { margin-left: 1rem; margin-right: 1rem; }
    .bk-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk-ticket2__head b { font-size: 1.2rem; }
    .bk-done__foot .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-confetti { display: none; }
    .bk-done__ring circle, .bk-done__ring path { animation: none; stroke-dashoffset: 0; }
}
.bk-next li p { margin: 0; flex: 1; min-width: 0; }
.bk-next li p b { letter-spacing: .04em; color: var(--ink); }

/* ===== Pricing page v2 ===== */
.pr2-hero { position: relative; overflow: hidden; padding: 3.6rem 0 6.5rem; text-align: center; color: #fff; background: radial-gradient(900px 480px at 85% -10%, rgba(226, 55, 92, .38), transparent 60%), radial-gradient(700px 460px at 5% 110%, rgba(139, 92, 246, .3), transparent 60%), #0f0b0c; }
.pr2-hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.pr2-hero__glow--a { width: 300px; height: 300px; top: -130px; left: 28%; background: #e2375c; }
.pr2-hero__glow--b { width: 240px; height: 240px; bottom: -120px; right: 10%; background: #8b5cf6; }
.pr2-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.pr2-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 138, 163, .5); background: rgba(226, 55, 92, .14); color: #ffb3c4; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.pr2-hero h1 { margin: 1.1rem 0 .9rem; font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.08; color: #fff; text-wrap: balance; }
.pr2-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ff8aa3, #c4a1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr2-hero__inner > p { max-width: 38rem; margin: 0; font-size: 1.1rem; color: rgba(255, 255, 255, .75); }
.pr2-toggle { display: inline-flex; gap: .3rem; margin-top: 1.8rem; padding: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); }
.pr2-toggle button { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 1.4rem; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .8); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.pr2-toggle button.is-on { background: #fff; color: var(--ink); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .6); }
.pr2-toggle em { padding: .15rem .55rem; border-radius: 999px; background: #10b981; color: #fff; font-style: normal; font-size: .68rem; font-weight: 800; }
.pr2-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pr2-trust li { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255, 255, 255, .72); font-size: .88rem; font-weight: 600; }
.pr2-trust i { color: #34d399; font-size: 1.1rem; }

.pr2-plans-sec { padding-top: 0; }
.pr2-plans { display: grid; gap: 1.2rem; margin-top: -4.2rem; align-items: stretch; }
.pr2-plans--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.pr2-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.pr2-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr2-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr2-card { position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.5rem 1.6rem; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 28px 50px -34px rgba(20, 16, 15, .6); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pr2-card:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -34px rgba(226, 55, 92, .45); }
.pr2-card.is-featured { z-index: 1; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #e2375c, #8b5cf6) border-box; box-shadow: 0 40px 70px -36px rgba(226, 55, 92, .7); }
.pr2-plans--3 .pr2-card.is-featured, .pr2-plans--4 .pr2-card.is-featured { transform: translateY(-14px); }
.pr2-plans--3 .pr2-card.is-featured:hover, .pr2-plans--4 .pr2-card.is-featured:hover { transform: translateY(-20px); }
.pr2-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; padding: .35rem 1rem; border-radius: 999px; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 22px -12px #e2375c; }
.pr2-card__head { display: flex; align-items: flex-start; gap: .9rem; }
.pr2-card__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: rgba(226, 55, 92, .1); color: var(--red); font-size: 1.5rem; }
.pr2-card.is-featured .pr2-card__ico { background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; box-shadow: 0 14px 24px -12px #e2375c; }
.pr2-card__head h3 { margin: 0; font-size: 1.25rem; }
.pr2-card__head p { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.pr2-price { margin: 1.4rem 0 1.1rem; padding: 1rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.pr2-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; }
.pr2-amount b { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.pr2-card.is-featured .pr2-amount b { background: linear-gradient(135deg, #e2375c, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr2-amount span { color: var(--muted); font-weight: 600; }
.pr2-save { padding: .2rem .6rem; border-radius: 999px; background: rgba(16, 185, 129, .13); color: #059669; font-style: normal; font-size: .72rem; font-weight: 800; }
.pr2-price small { display: block; margin-top: .45rem; color: var(--muted); font-size: .78rem; }
.pr2-plans[data-period="monthly"] [data-show="yearly"], .pr2-plans[data-period="yearly"] [data-show="monthly"] { display: none; }
.pr2-limits { display: grid; gap: .5rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.pr2-limits li { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 12px; background: #faf8f8; font-size: .9rem; font-weight: 600; }
.pr2-limits i { color: var(--red); font-size: 1.15rem; }
.pr2-card__cta { justify-content: center; min-height: 50px; }
.pr2-card__sub { margin: 1.4rem 0 .7rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pr2-feats { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pr2-feats li { display: flex; align-items: flex-start; gap: .55rem; color: #3a3234; font-size: .92rem; line-height: 1.4; }
.pr2-feats li i { flex: none; margin-top: .1rem; color: #10b981; font-size: 1.15rem; }
.pr2-feats li.is-off { color: var(--faint); } .pr2-feats li.is-off i { color: var(--faint); }

.pr2-inc { margin-top: 2.6rem; padding: 1.3rem 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.pr2-inc h3 { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0 0 1rem; font-size: 1.05rem; } .pr2-inc h3 i { color: var(--red); }
.pr2-inc ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pr2-inc li { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem .55rem; border-radius: 999px; background: #faf8f8; border: 1px solid var(--line); font-size: .88rem; font-weight: 600; }
.pr2-inc li i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1rem; }

.pr2-compare { border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 28px 50px -38px rgba(20, 16, 15, .55); overflow: hidden; }
.pr2-compare__scroll { overflow-x: auto; }
.pr2-compare table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; }
.pr2-compare thead th { position: sticky; top: 0; padding: 1.1rem 1rem; background: #0f0b0c; color: #fff; text-align: center; font-family: var(--font-head); font-size: 1.05rem; }
.pr2-compare thead th:first-child { text-align: left; }
.pr2-compare thead th small { display: block; margin-top: .2rem; color: rgba(255, 255, 255, .65); font-family: var(--font-body, inherit); font-size: .74rem; font-weight: 600; }
.pr2-compare thead th.is-featured { background: linear-gradient(135deg, #e2375c, #8b5cf6); }
.pr2-compare tbody th, .pr2-compare tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: center; font-size: .92rem; }
.pr2-compare tbody th[scope="row"] { text-align: left; font-weight: 600; color: #3a3234; }
.pr2-compare tbody td.is-featured { background: rgba(226, 55, 92, .05); font-weight: 700; }
.pr2-compare tbody tr:hover td, .pr2-compare tbody tr:hover th[scope="row"] { background: #faf8f8; } .pr2-compare tbody tr:hover td.is-featured { background: rgba(226, 55, 92, .09); }
.pr2-compare tr.is-group th { padding: .7rem 1rem; background: #f6f3f3; text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pr2-compare tr.is-group i { margin-right: .5rem; color: var(--red); font-size: 1rem; vertical-align: -2px; }
.pr2-yes { color: #10b981; font-size: 1.35rem; } .pr2-no { color: var(--faint); font-size: 1.1rem; }
.pr2-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.2rem 0 0; color: var(--muted); font-size: .86rem; text-align: center; } .pr2-note i { color: var(--red); }

@media (max-width: 1100px) {
    .pr2-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr2-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
    .pr2-amount b { font-size: 2.2rem; }
}
@media (max-width: 900px) {
    .pr2-plans--3, .pr2-plans--2 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .pr2-plans--3 .pr2-card.is-featured, .pr2-plans--4 .pr2-card.is-featured { transform: none; }
    .pr2-plans--3 .pr2-card.is-featured:hover, .pr2-plans--4 .pr2-card.is-featured:hover { transform: translateY(-6px); }
    .pr2-plans { gap: 1.6rem; }
}
@media (max-width: 600px) {
    .pr2-hero { padding: 2.6rem 0 5.5rem; }
    .pr2-toggle { width: 100%; max-width: 360px; } .pr2-toggle button { flex: 1; justify-content: center; padding: 0 .8rem; font-size: .9rem; flex-wrap: wrap; row-gap: .2rem; }
    .pr2-plans--4 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .pr2-card { padding: 1.6rem 1.2rem 1.3rem; border-radius: 22px; }
    .pr2-inc { padding: 1.1rem 1rem; } .pr2-inc li { font-size: .82rem; }
    .pr2-compare thead th, .pr2-compare tbody th, .pr2-compare tbody td { padding: .7rem .65rem; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) { .pr2-card, .pr2-toggle button { transition: none; } }
@media (max-width: 600px) { .pr2-hero { padding-bottom: 6.2rem; } .pr2-plans { margin-top: -3.2rem; } }

/* ===== Contact page v2 ===== */
.ct2-hero { position: relative; overflow: hidden; padding: 3.6rem 0 3.4rem; color: #fff; background: radial-gradient(900px 460px at 90% -10%, rgba(226, 55, 92, .36), transparent 60%), radial-gradient(700px 440px at 0 110%, rgba(139, 92, 246, .28), transparent 60%), #0f0b0c; }
.ct2-hero__glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.ct2-hero__glow--a { width: 280px; height: 280px; top: -120px; left: 36%; background: #e2375c; }
.ct2-hero__glow--b { width: 230px; height: 230px; bottom: -110px; right: 6%; background: #8b5cf6; }
.ct2-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.6rem; align-items: center; }
.ct2-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 138, 163, .5); background: rgba(226, 55, 92, .14); color: #ffb3c4; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.ct2-hero h1 { margin: 1.1rem 0 .9rem; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.08; color: #fff; text-wrap: balance; }
.ct2-hero h1 em { font-style: normal; background: linear-gradient(90deg, #ff8aa3, #c4a1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct2-hero__copy > p { max-width: 32rem; margin: 0; font-size: 1.08rem; color: rgba(255, 255, 255, .75); }
.ct2-quick { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.ct2-quick a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.ct2-quick a:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.ct2-quick i { color: #ff8aa3; font-size: 1.15rem; } .ct2-quick .is-wa { background: #25d366; border-color: #25d366; } .ct2-quick .is-wa i { color: #fff; }

.ct2-help { display: grid; gap: .8rem; }
.ct2-glass { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 22px 36px -26px rgba(0, 0, 0, .9); transition: transform .3s ease, border-color .3s ease; }
.ct2-glass:nth-child(2) { margin-left: 1.6rem; } .ct2-glass:nth-child(3) { margin-left: .6rem; }
.ct2-glass:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ct2-glass > span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-size: 1.5rem; }
.ct2-glass b { display: block; font-size: 1.02rem; color: #fff; } .ct2-glass small { display: block; margin-top: .15rem; color: rgba(255, 255, 255, .68); font-size: .86rem; line-height: 1.45; }

.ct2-main { padding-top: 3rem; }
.ct2-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.ct2-card { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 30px 54px -36px rgba(20, 16, 15, .55); scroll-margin-top: 100px; }
.ct2-card__head h2 { margin: 0; font-size: 1.5rem; } .ct2-card__head p { margin: .3rem 0 1.4rem; color: var(--muted); font-size: .92rem; } .ct2-card__head p span { color: var(--red); }

.ct2-topics { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.ct2-topics legend { margin-bottom: .7rem; padding: 0; font-size: .88rem; font-weight: 700; } .ct2-topics legend span { color: var(--red); }
.ct2-topics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ct2-topic { position: relative; display: block; cursor: pointer; }
.ct2-topic input { position: absolute; opacity: 0; inset: 0; }
.ct2-topic__box { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; padding: .8rem .9rem; border-radius: 16px; border: 1.5px solid var(--line); background: #faf8f8; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ct2-topic__box > i { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.3rem; transition: background-color .2s ease, color .2s ease; }
.ct2-topic__box b { font-size: .92rem; line-height: 1.2; } .ct2-topic__box small { color: var(--muted); font-size: .76rem; }
.ct2-topic__box em { position: absolute; top: .55rem; right: .6rem; font-size: 1.15rem; color: var(--c); opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.ct2-topic:hover .ct2-topic__box { border-color: color-mix(in srgb, var(--c) 50%, var(--line)); background: #fff; transform: translateY(-2px); }
.ct2-topic input:checked + .ct2-topic__box { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.ct2-topic input:checked + .ct2-topic__box > i { background: var(--c); color: #fff; }
.ct2-topic input:checked + .ct2-topic__box em { opacity: 1; transform: none; }
.ct2-topic input:focus-visible + .ct2-topic__box { outline: 3px solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: 2px; }

.ct2-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.ct2-field { margin-bottom: 1.1rem; min-width: 0; }
.ct2-field label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; } .ct2-field label span { color: var(--red); } .ct2-field label em { font-style: normal; font-weight: 500; color: var(--muted); }
.ct2-input { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: #faf8f8; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.ct2-input:focus-within { border-color: rgba(226, 55, 92, .6); box-shadow: 0 0 0 3px rgba(226, 55, 92, .14); background: #fff; }
.ct2-input > i { color: var(--red); font-size: 1.2rem; }
.ct2-input input, .ct2-input textarea { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.ct2-input--area { align-items: flex-start; padding-top: .6rem; } .ct2-input--area textarea { height: auto; min-height: 120px; resize: vertical; line-height: 1.55; }
.ct2-input.has-error { border-color: #ef4444; background: rgba(239, 68, 68, .04); }
.ct2-error { display: block; margin-top: .35rem; color: #dc2626; font-size: .82rem; font-weight: 600; }
.ct2-submit { width: 100%; justify-content: center; min-height: 54px; }
.ct2-note { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 1rem 0 0; color: var(--muted); font-size: .82rem; text-align: center; } .ct2-note i { color: #10b981; }

.ct2-sent { padding: 2rem .5rem; text-align: center; }
.ct2-sent__ico { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #10b981; color: #fff; font-size: 2.5rem; box-shadow: 0 0 0 9px rgba(16, 185, 129, .15), 0 20px 32px -12px rgba(16, 185, 129, .8); animation: bk-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ct2-sent h2 { margin: 1.2rem 0 .4rem; font-size: 1.6rem; } .ct2-sent p { margin: 0 auto 1.4rem; max-width: 26rem; color: var(--muted); }

.ct2-side { display: grid; gap: 1rem; position: sticky; top: 90px; }
.ct2-info { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 26px; color: #fff; background: radial-gradient(420px 220px at 100% 0, rgba(226, 55, 92, .5), transparent 60%), radial-gradient(360px 220px at 0 100%, rgba(139, 92, 246, .35), transparent 60%), #0f0b0c; box-shadow: 0 30px 50px -30px rgba(15, 11, 12, .8); }
.ct2-info h2 { margin: 0; font-size: 1.35rem; color: #fff; } .ct2-info > p { margin: .3rem 0 1.2rem; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.ct2-info ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ct2-info li > a, .ct2-info li > div { display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.ct2-info li > a:hover { background: rgba(255, 255, 255, .15); transform: translateX(4px); }
.ct2-info__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(226, 55, 92, .22); color: #ff8aa3; font-size: 1.3rem; }
.ct2-info__ico.is-wa { background: rgba(37, 211, 102, .2); color: #4ade80; }
.ct2-info li span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .ct2-info li small { color: rgba(255, 255, 255, .6); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .ct2-info li b { font-size: .92rem; font-weight: 600; word-break: break-word; }
.ct2-info__social { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, .2); } .ct2-info__social small { display: block; margin-bottom: .6rem; color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ct2-info__social div { display: flex; gap: .5rem; } .ct2-info__social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.25rem; transition: background-color .2s ease, transform .2s ease; } .ct2-info__social a:hover { background: var(--red); transform: translateY(-3px); }
.ct2-promise { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ct2-promise > span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: rgba(16, 185, 129, .13); color: #059669; font-size: 1.6rem; }
.ct2-promise b { display: block; } .ct2-promise small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.4; }

@media (max-width: 960px) {
    .ct2-hero { padding: 2.6rem 0 2.6rem; }
    .ct2-hero__grid, .ct2-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .ct2-glass:nth-child(2), .ct2-glass:nth-child(3) { margin-left: 0; }
    .ct2-side { position: static; }
}
@media (max-width: 600px) {
    .ct2-quick a { flex: 1 1 100%; justify-content: center; }
    .ct2-card { border-radius: 22px; padding: 1.3rem 1.1rem; }
    .ct2-topics__grid { grid-template-columns: 1fr; }
    .ct2-fields { grid-template-columns: 1fr; }
    .ct2-info { border-radius: 22px; padding: 1.3rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .ct2-glass, .ct2-topic__box, .ct2-quick a, .ct2-info li > a { transition: none; } .ct2-sent__ico { animation: none; } }

/* ===== Service detail page v3 ===== */
.svc-hero { padding-bottom: 0; }
.svc-hero__grid { padding-bottom: 3rem; }
.sv-stats { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; padding: 1.3rem 0 1.5rem; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.sv-stats li { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem 1rem; text-align: center; border-left: 1px solid rgba(255, 255, 255, .1); }
.sv-stats li:first-child { border-left: 0; }
.sv-stats i { color: var(--c); font-size: 1.4rem; filter: brightness(1.4); }
.sv-stats b { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: #fff; }
.sv-stats span { font-size: .78rem; color: rgba(255, 255, 255, .62); }

.sv-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sv-mod { position: relative; display: flex; align-items: flex-start; gap: .9rem; padding: 1.2rem 1.2rem 1.2rem 1.1rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sv-mod::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .35s ease; }
.sv-mod:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 26px 40px -28px color-mix(in srgb, var(--c) 60%, transparent); }
.sv-mod:hover::after { transform: scale(1.5); }
.sv-mod__ico { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); color: #fff; font-size: 1.45rem; box-shadow: 0 14px 22px -12px var(--c); }
.sv-mod__body { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding-right: 1.4rem; }
.sv-mod__body b { font-size: 1rem; line-height: 1.25; }
.sv-mod__body small { margin-top: .25rem; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.sv-mod__go { position: absolute; z-index: 1; top: 1rem; right: 1rem; color: var(--faint); transition: transform .2s ease, color .2s ease; }
.sv-mod:hover .sv-mod__go { transform: translate(3px, -3px); color: var(--c); }
.sv-more { display: flex; justify-content: center; margin-top: 1.8rem; }

.sv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.2rem; max-width: 980px; margin-inline: auto; align-items: stretch; }
.sv-plan { position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.5rem 1.5rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(20, 16, 15, .04), 0 24px 44px -34px rgba(20, 16, 15, .55); transition: transform .3s ease, box-shadow .3s ease; }
.sv-plan:hover { transform: translateY(-6px); box-shadow: 0 36px 54px -34px rgba(226, 55, 92, .45); }
.sv-plan.is-featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #e2375c, #8b5cf6) border-box; box-shadow: 0 36px 60px -36px rgba(226, 55, 92, .65); }
.sv-plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: 999px; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sv-plan h3 { margin: 0; font-size: 1.2rem; }
.sv-plan__price { display: flex; align-items: baseline; gap: .4rem; margin: .8rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.sv-plan__price b { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.sv-plan.is-featured .sv-plan__price b { background: linear-gradient(135deg, #e2375c, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-plan__price span { color: var(--muted); font-weight: 600; }
.sv-plan ul { display: grid; gap: .55rem; margin: 0 0 1.3rem; padding: 0; list-style: none; flex: 1; }
.sv-plan li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; } .sv-plan li i { color: #10b981; font-size: 1.15rem; }

@media (max-width: 960px) { .sv-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .8rem; }
    .sv-stats li:nth-child(odd) { border-left: 0; }
    .sv-mods { grid-template-columns: 1fr; gap: .7rem; }
    .sv-mod { padding: 1rem; border-radius: 18px; }
    .sv-more .btn { width: 100%; justify-content: center; min-height: 48px; }
    .sv-plans { gap: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .sv-mod, .sv-plan, .sv-mod::after { transition: none; } }

/* ===== Free salon listing: hero v2 (wider form) ===== */
.lh-hero { position: relative; overflow: hidden; padding: 3.2rem 0 4.4rem; color: #fff; background: radial-gradient(1000px 520px at 92% -10%, rgba(226, 55, 92, .38), transparent 60%), radial-gradient(760px 480px at 0 110%, rgba(139, 92, 246, .3), transparent 60%), #0f0b0c; }
.lh-hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; pointer-events: none; }
.lh-hero__glow--a { width: 320px; height: 320px; top: -130px; left: 30%; background: #e2375c; }
.lh-hero__glow--b { width: 260px; height: 260px; bottom: -120px; right: 6%; background: #8b5cf6; }
.lh-hero .wrap { width: min(1280px, 100% - 48px); }
.lh-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.2rem; align-items: start; }

.lh-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .95rem; border-radius: 999px; border: 1px solid rgba(255, 138, 163, .5); background: rgba(226, 55, 92, .14); color: #ffb3c4; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.lh-copy h1 { margin: 1.1rem 0 .9rem; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; color: #fff; text-wrap: balance; }
.lh-copy h1 em { font-style: normal; background: linear-gradient(90deg, #ff8aa3, #c4a1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lh-lead { max-width: 30rem; margin: 0; font-size: 1.08rem; color: rgba(255, 255, 255, .75); }
.lh-points { display: grid; gap: .7rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.lh-points li { display: flex; align-items: center; gap: .8rem; color: rgba(255, 255, 255, .92); font-weight: 600; font-size: .98rem; }
.lh-points span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #ff8aa3; font-size: 1.2rem; }
.lh-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; max-width: 30rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.lh-facts li { padding: .85rem 1rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lh-facts b { display: block; font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; line-height: 1.05; color: #fff; }
.lh-facts span { font-size: .72rem; letter-spacing: .04em; color: rgba(255, 255, 255, .62); }

.lh-preview { position: relative; display: flex; align-items: center; gap: 1rem; max-width: 30rem; margin: 2rem 0 0 1rem; padding: .9rem 1rem; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .8); transform: rotate(-2deg); animation: svc-float 7s ease-in-out infinite; }
.lh-preview__img { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-size: 1.8rem; }
.lh-preview__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lh-preview__body b { display: flex; align-items: center; gap: .35rem; font-size: 1rem; } .lh-preview__body b i { color: #10b981; }
.lh-preview__body small { color: var(--muted); font-size: .8rem; } .lh-preview__body small i { margin-right: .25rem; color: var(--red); }
.lh-preview__chips { display: flex; gap: .35rem; margin-top: .3rem; } .lh-preview__chips span { padding: .15rem .55rem; border-radius: 999px; background: #f6f3f3; color: #4a4240; font-size: .7rem; font-weight: 600; }
.lh-preview__tag { position: absolute; top: -12px; right: 14px; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; background: linear-gradient(135deg, #e2375c, #8b5cf6); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* the wider registration card */
.lh-card { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 30px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.lh-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 1.5rem; padding: 0; list-style: none; }
.lh-steps::before { content: ""; position: absolute; top: 15px; left: 16.6%; right: 16.6%; height: 2px; background: var(--line); }
.lh-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .78rem; color: var(--muted); }
.lh-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--line); font-weight: 800; font-size: .85rem; }
.lh-steps li b { font-weight: 700; }
.lh-steps li.is-on { color: var(--red); } .lh-steps li.is-on span { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 18px -8px rgba(226, 55, 92, .8); }
.lh-card__head h2 { margin: 0; font-size: 1.55rem; } .lh-card__head p { margin: .3rem 0 1.5rem; color: var(--muted); font-size: .93rem; }

.lh-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }
.lh-field { margin-bottom: 1.1rem; min-width: 0; }
.lh-field--full { grid-column: 1 / -1; }
.lh-field--wide { grid-column: 1 / -1; }
.lh-field label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; } .lh-field label span { color: var(--red); }
.lh-input { display: flex; align-items: center; gap: .65rem; padding: 0 1rem; min-height: 54px; border-radius: 15px; border: 1.5px solid var(--line); background: #faf8f8; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.lh-input:focus-within { border-color: rgba(226, 55, 92, .6); box-shadow: 0 0 0 3px rgba(226, 55, 92, .14); background: #fff; }
.lh-input > i { color: var(--red); font-size: 1.25rem; }
.lh-input input, .lh-input textarea { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.lh-input--area { align-items: flex-start; padding-top: .7rem; } .lh-input--area > i { margin-top: .1rem; } .lh-input--area textarea { height: auto; min-height: 84px; resize: vertical; line-height: 1.5; }
.lh-input.has-error { border-color: #ef4444; background: rgba(239, 68, 68, .04); }
.lh-error { display: block; margin-top: .35rem; color: #dc2626; font-size: .82rem; font-weight: 600; }
.lh-submit { width: 100%; justify-content: center; min-height: 56px; font-size: 1.05rem; }
.lh-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .8rem; font-weight: 600; }
.lh-trust i { margin-right: .35rem; color: #10b981; font-size: 1rem; vertical-align: -2px; }
.lh-note { margin: .8rem 0 0; text-align: center; color: var(--muted); font-size: .8rem; }

.lh-sent { padding: 2.4rem .5rem; text-align: center; }
.lh-sent__ico { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #10b981; color: #fff; font-size: 2.6rem; box-shadow: 0 0 0 9px rgba(16, 185, 129, .15), 0 20px 32px -12px rgba(16, 185, 129, .8); animation: bk-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.lh-sent h2 { margin: 1.2rem 0 .4rem; font-size: 1.6rem; } .lh-sent p { margin: 0 auto 1.4rem; max-width: 26rem; color: var(--muted); }

@media (max-width: 1100px) { .lh-hero__grid { gap: 2.2rem; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (max-width: 960px) {
    .lh-hero { padding: 2.4rem 0 3rem; }
    .lh-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
    .lh-hero .wrap { width: min(1280px, 100% - 32px); }
    .lh-preview { display: none; }
    .lh-facts, .lh-lead { max-width: none; }
}
@media (max-width: 600px) {
    .lh-card { border-radius: 24px; padding: 1.4rem 1.1rem; }
    .lh-fields { grid-template-columns: 1fr; }
    .lh-points li { font-size: .92rem; }
    .lh-card__head h2 { font-size: 1.35rem; }
    .lh-steps li b { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .lh-preview { animation: none; } .lh-sent__ico { animation: none; } }

/* ===== Free salon listing: compact form + tighter hero ===== */
.lh-hero { padding: 2.4rem 0 3.2rem; }
.lh-hero__grid { align-items: center; gap: 2.8rem; }
.lh-card { padding: clamp(1.2rem, 2.4vw, 1.8rem); border-radius: 26px; }
/* one-line progress tracker */
.lh-steps { margin: 0 0 1.1rem; padding: .35rem; border-radius: 999px; background: #f6f3f3; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.lh-steps::before { display: none; }
.lh-steps li { flex-direction: row; justify-content: center; gap: .5rem; padding: .35rem .4rem; border-radius: 999px; font-size: .8rem; }
.lh-steps li span { width: 24px; height: 24px; border-width: 0; background: #e9e4e4; font-size: .75rem; }
.lh-steps li.is-on { background: #fff; box-shadow: 0 8px 16px -10px rgba(20, 16, 15, .5); }
.lh-steps li.is-on span { background: var(--red); box-shadow: none; }
.lh-card__head h2 { font-size: 1.35rem; }
.lh-card__head p { margin: .2rem 0 1.1rem; font-size: .88rem; }
.lh-fields { gap: 0 .9rem; }
.lh-field { margin-bottom: .85rem; }
.lh-field label { margin-bottom: .3rem; font-size: .8rem; }
.lh-input { min-height: 48px; padding: 0 .85rem; border-radius: 13px; }
.lh-input input, .lh-input textarea { height: 46px; }
.lh-input textarea { min-height: 46px; padding: 12px 0; resize: none; line-height: 1.3; overflow: hidden; }
.lh-submit { min-height: 52px; }
.lh-trust { margin-top: .85rem; }
.lh-note { margin-top: .5rem; }
/* left column: a little tighter so both sides end together */
.lh-copy h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.lh-points { margin-top: 1.3rem; gap: .55rem; }
.lh-points span { width: 34px; height: 34px; border-radius: 11px; }
.lh-facts { margin-top: 1.4rem; }
.lh-preview { margin-top: 1.6rem; }
@media (max-width: 960px) { .lh-hero { padding: 2rem 0 2.6rem; } }
@media (max-width: 600px) {
    .lh-steps li { font-size: .72rem; gap: .35rem; } .lh-steps li span { width: 22px; height: 22px; }
    .lh-input textarea { overflow: auto; }
}