/* =====================================================================
   BEAUTY HOUSE — Design System
   Естетика: "Editorial Neutral" — минималистично, елегантно, статично.
   Организация:
     1. Fonts & Reset
     2. Tokens (цветове, типография, spacing, easing, shadows)
     3. Base elements
     4. Layout helpers
     5. Navbar
     6. Buttons
     7. Hero + 3D canvas
     8. Sections & headings
     9. Cards (услуги / екип)
    10. Forms & inputs
    11. Badges, pills, misc
    12. Footer
    13. Motion (scroll reveal, keyframes)
    14. Responsive
    15. Accessibility (reduced motion, hover gating)
   ===================================================================== */

/* 1. FONTS ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

/* 2. TOKENS ----------------------------------------------------------- */
:root {
    /* Икона часовник (за времетраене в каталога) */
    --ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    /* Неутрална палитра */
    --cream:        #FAF8F5;
    --ivory:        #FFFFFF;
    --sand:         #EAE4DC;
    --blush:        #E3DDD3;
    --blush-soft:   #F1EEE8;
    --rose:         #A59079;
    --rose-deep:    #7D6B5F;
    --mauve:        #BFAEA2;
    --gold:         #C4A98A;
    --gold-soft:    #DBCFBE;
    --ink:          #221F1C;
    --ink-soft:     #5F5A53;
    --muted:        #9A8B7E;
    --line:         #E3DDD3;

    /* Акцентни цветове за таблото на шефа — всеки раздел с ясен, различим цвят */
    --acc-stats:      #5F8DBF;
    --acc-stats-deep: #3E6E97;
    --acc-stats-soft: #EAF1F8;
    --acc-cal:        #4F9E7C;
    --acc-cal-deep:   #357A5C;
    --acc-cal-soft:   #E9F5EF;
    --acc-alert:      #D9534F;
    --acc-alert-deep: #B7413D;
    --acc-alert-soft: #FBEAEA;
    --acc-set:        #9B7FC2;
    --acc-set-deep:   #7358A0;
    --acc-set-soft:   #F2EDF9;
    --acc-crs:        #B07D52;
    --acc-crs-deep:   #8C5E38;
    --acc-crs-soft:   #F7F0E8;

    /* Градиенти */
    --grad-warm:  linear-gradient(135deg, #E3DDD3 0%, #D9D1C7 40%, #DBCFBE 100%);
    --grad-rose:  linear-gradient(135deg, #A59079 0%, #7D6B5F 100%);
    --grad-glow:  radial-gradient(closest-side, rgba(165, 144, 121,.35), rgba(165, 144, 121,0));

    /* Типография */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Montserrat', -apple-system, sans-serif;
    /* Открояваща геометрична гарнитура — само за таблото на шефа (числа/данни) */
    --font-dash:    'Outfit', 'Montserrat', -apple-system, sans-serif;

    /* Радиуси — тесни, редакторски */
    --r-sm: 3px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Сенки — неутрални, дискретни (акцентът е върху тънки контури) */
    --sh-sm: 0 1px 3px rgba(20, 16, 12, .06);
    --sh-md: 0 8px 24px rgba(20, 16, 12, .08);
    --sh-lg: 0 20px 40px rgba(20, 16, 12, .10);
    --sh-glow: 0 8px 24px rgba(20, 16, 12, .08);

    /* Easing — силни криви (виж design guidelines) */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* Layout */
    --nav-h: 76px;
    --dash-h: 56px;        /* лентата с табове на таблото (телефон) */
    --maxw: 1240px;
}

/* 1b. RESET ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Скритото да е скрито дори при inline display (иначе изскачат полета за период). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--cream); overflow-x: hidden; width: 100%; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    font-weight: 400;
    touch-action: manipulation; /* спира двойно-тап зуума (вкл. Safari) */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Спокоен, но не плосък фон — няколко меки, статични петна дълбочина */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(46rem 32rem at 8% 0%,   rgba(196, 169, 138, .22), transparent 62%),
        radial-gradient(50rem 34rem at 100% 18%, rgba(219, 207, 190, .38), transparent 60%),
        radial-gradient(60rem 40rem at 50% 118%, rgba(191, 174, 162, .20), transparent 62%),
        var(--cream);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* 1c. PAGE LOADER — кратка "beauty" анимация докато страницата зарежда --- */
.page-loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
    background: var(--cream);
    transition: opacity .5s var(--ease-out), visibility .5s;
}
.page-loader__ring {
    position: relative; width: 64px; height: 64px; border-radius: 50%;
    border: 2px solid var(--blush); border-top-color: var(--rose);
    display: grid; place-items: center;
    animation: loaderSpin 1s linear infinite;
}
.page-loader__mark { color: var(--rose-deep); animation: loaderPulse 1.4s ease-in-out infinite; }
.page-loader__mark .icon { width: 26px; height: 26px; }
.page-loader__label {
    font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-soft);
    letter-spacing: .02em;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderPulse { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* 3. BASE TYPOGRAPHY -------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); }
.muted { color: var(--muted); }
em, .italic { font-style: italic; }

/* 4. LAYOUT HELPERS --------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; content-visibility: auto; contain-intrinsic-size: 900px; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.center { text-align: center; }
.stack-sm > * + * { margin-top: .6rem; }
.grid { display: grid; gap: 28px; }

/* 4b. PHOTO / .ph — hotlinked снимки с елегантен fallback --------------
   (дефинирано рано, за да могат по-специфични компоненти по-долу
   да променят position/inset чрез нормалния cascade ред) */
.ph { position: relative; display: block; overflow: hidden; background: var(--grad-warm); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out), filter .8s var(--ease-out); }
.ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(34, 31, 28,0) 40%, rgba(34, 31, 28,.5)); opacity: .55; pointer-events: none; }
.ph--broken img { display: none; }
.ph--broken { background: var(--grad-warm); }
.ph--broken::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 55%);
}
.ph__mark { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: rgba(255,255,255,.85); }
.ph--broken .ph__mark { display: flex; }
.ph--broken .ph__mark .icon { width: 34px; height: 34px; }


/* 5. NAVBAR ----------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    z-index: 100;
    display: flex;
    align-items: center;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    transition: background var(--ease-out) .4s, box-shadow var(--ease-out) .4s, backdrop-filter .4s;
}
.nav__inner {
    width: 100%; max-width: var(--maxw); margin-inline: auto;
    padding-inline: 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.nav.scrolled {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 0 rgba(227, 221, 211,.9), var(--sh-sm);
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.01em; }
.brand__mark {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grad-rose);
    display: grid; place-items: center;
    color: #fff; font-size: .95rem; font-weight: 600;
    box-shadow: var(--sh-glow);
    flex: none;
}
.brand b { font-weight: 500; }
.brand span { color: var(--rose-deep); }
/* Лого-изображение в кръглата значка на бранда */
.brand__mark--logo { background: none; overflow: hidden; }
.brand__mark--logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* На тесен екран поздравът в навигацията се крие, за да не е претъпкано */
@media (max-width: 640px) { .nav__auth-hi { display: none; } }

/* Попъп за час (замъглен фон) */
.cal-modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(40, 26, 30, .42);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    animation: calFadeIn .2s var(--ease-out);
}
.cal-modal {
    width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto;
    background: var(--ivory); border-radius: 20px;
    box-shadow: 0 30px 70px rgba(30, 15, 18, .4);
    padding: 1.5rem 1.5rem 1.6rem; position: relative;
    animation: calPop .28s var(--ease-out);
}
.cal-modal__close {
    position: absolute; top: .8rem; right: .8rem; width: 34px; height: 34px;
    border-radius: 50%; border: 0; background: rgba(0,0,0,.05); cursor: pointer;
    font-size: 1.2rem; line-height: 1; color: var(--ink-soft);
}
.cal-modal__close:hover { background: rgba(0,0,0,.1); }
/* Подредено съдържание на попъпа за час */
.cal-modal__title { font-weight: 800; font-size: 1.2rem; line-height: 1.3; padding-right: 2.4rem; }
.cal-modal__meta { margin: .45rem 0 1.15rem; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .55rem; }
.cal-modal__rows { display: flex; flex-direction: column; }
.cmrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.cmrow:first-child { padding-top: .2rem; }
.cmrow:last-child { border-bottom: 0; }
/* Бърз избор на услуга в „Нов час": търсене + категории + последно избирани */
/* Попъп „Нов час": компактен, за да се побира целият без скрол (и на телефон). */
.cal-modal--add { padding: 1.25rem 1.25rem 1.3rem; max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); }
.cal-modal--add:has(.svp.is-open) { overflow: hidden; }
.ad-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.ad-form .field { margin: 0; min-width: 0; }
.ad-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.ad-pair--time { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.ad-form .input, .ad-form .select { padding-top: .7rem; padding-bottom: .7rem; }
.ad-form .select { padding-left: .9rem; background-position: right .8rem center; padding-right: 2rem; text-overflow: ellipsis; }
.ad-form .input { padding-left: .9rem; padding-right: .9rem; }
.ad-lbl { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-lbl small { font-size: inherit; font-weight: 400; color: var(--muted); }
/* „Готово в 09:45 · следващ час от 10:00" до „Почивка след" */
.ad-sum { display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem; padding-bottom: .55rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
/* Времетраене: едно поле с два избора — „1 ч | 30 мин" (като в Studio24) */
.ad-hm {
    display: flex; align-items: stretch; width: 100%;
    background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.ad-hm:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(165,144,121,.15); }
.ad-hm select {
    flex: 1 1 0; min-width: 0; appearance: none; -webkit-appearance: none;
    border: 0; background: transparent; outline: none; cursor: pointer;
    font: inherit; font-size: .96rem; color: var(--ink); text-align: center; text-align-last: center;
    padding: .66rem 1.5rem .66rem .6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237D6B5F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .65rem center;
}
.ad-hm select:hover { background-color: var(--blush-soft); }
.ad-hm select:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.ad-hm select:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.ad-hm__sep { width: 1px; background: var(--line); margin: .5rem 0; flex: none; }
/* Еднаква височина на „Начален час" и „Времетраене" (44px). */
.ad-row-time .select, .ad-row-time .ad-hm { height: 44px; }
.ad-row-time .select { padding-top: 0; padding-bottom: 0; }
.ad-hm select { height: 100%; padding-top: 0; padding-bottom: 0; }
@media (max-width: 400px) {
    .ad-hm select { padding-right: 1.25rem; padding-left: .45rem; background-position: right .45rem center; font-size: .92rem; }
}
@media (max-width: 380px) {
    .ad-pair--time.ad-row-time { grid-template-columns: 1fr; }
    .ad-row-client { grid-template-columns: 1fr; }
}
.cal-modal .hint .ad-hm { width: auto; min-width: 11rem; }
.cal-modal .hint .ad-hm select { padding: .45rem .5rem; font-size: .9rem; }
.ad-sum__note { font-style: normal; color: var(--muted); }
.ad-sum__note.is-short { color: var(--acc-alert-deep); }
.ad-row-rest .ad-sum { flex-direction: row; justify-content: space-between; padding: .55rem .8rem; border-radius: var(--r-md); background: var(--blush-soft); }
.cal-modal .hint .ad-hm .select { padding-top: .4rem; padding-bottom: .4rem; width: 4.6rem; flex: none; }
.ad-sum b { color: var(--rose-deep); font-variant-numeric: tabular-nums; }
.ad-save { margin-top: .15rem; }
.ad-msg:empty { display: none; }
.svp-btn { display: flex; align-items: baseline; gap: .6rem; text-align: left; cursor: pointer; }
.svp-btn span { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svp-btn small { flex: none; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.svp-btn:disabled { color: var(--muted); cursor: default; }
.svp.is-open .svp-btn { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(165, 144, 121,.14); background-color: #fff; }
.svp-pop { margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; animation: calFadeIn .15s; }
.svp-pop[hidden] { display: none; }
.svp { min-width: 0; contain: inline-size; }   /* дългото име не разпъва попъпа */
.svp-top { display: none; }
.svp--sheet .svp-pop { position: absolute; inset: 0; z-index: 5; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; animation: calFadeIn .15s; }
.svp--sheet .svp-pop[hidden] { display: none; }
.svp--sheet .svp-top { display: flex; align-items: center; gap: .35rem; padding: .9rem 1rem .55rem .6rem; font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.svp-back { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.svp-back:hover { background: rgba(0,0,0,.05); }
.svp-q { -webkit-appearance: none; appearance: none; }
.svp--sheet .svp-q, .svp--sheet .svp-q:focus { flex: none; width: auto; margin: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem .9rem; }
.svp--sheet .svp-q:focus { border-color: var(--rose); }
.svp--sheet .svp-cats { border-bottom: 1px solid var(--line); padding: .7rem 1rem; flex: none; }
.svp--sheet .svp-list { flex: 1; min-height: 0; max-height: none; }
.svp-pop .svp-q, .svp-pop .svp-q:focus { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: #fff; }
.svp-cats { display: flex; gap: .4rem; padding: .6rem .75rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.svp-cats::-webkit-scrollbar { display: none; }
.svp-cats:empty { display: none; }
.svp-cat { flex: none; padding: .38rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(165, 144, 121, .1); font: inherit; font-size: .85rem; color: var(--ink-soft); cursor: pointer; }
.svp-cat.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.svp-list { max-height: min(46vh, 340px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: .35rem; }
.svp-h { position: sticky; top: 0; z-index: 1; background: #fff; padding: .6rem 1rem .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.svp-it { display: flex; align-items: baseline; gap: .75rem; width: 100%; padding: .62rem 1rem; border: 0; background: none; text-align: left; font: inherit; font-size: .93rem; color: var(--ink); cursor: pointer; }
.svp-it span { flex: 1; min-width: 0; }
.svp-it small { flex: none; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.svp-it.is-act { background: rgba(165, 144, 121, .12); }
@media (hover: hover) { .svp-it:hover { background: rgba(165, 144, 121, .12); } }
.svp-it.is-sel { font-weight: 600; }
.svp-it.is-sel::after { content: "✓"; color: var(--rose); }
.svp-it mark { background: rgba(165, 144, 121, .25); color: inherit; border-radius: 3px; }
.svp-empty { padding: 1.1rem 1rem; text-align: center; font-size: .9rem; color: var(--muted); }
.cmrow > .hint { flex: none; }
.cmrow > :last-child:not(.hint) { text-align: right; font-weight: 600; }
.cal-modal__price { border-top: 1px dashed var(--rose); margin-top: 1.1rem; padding-top: 1.1rem; }
.cal-modal__actions { display: grid; gap: .55rem; margin-top: 1.3rem; }
@keyframes calFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes calPop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== Каталог с услуги (Studio24 стил) ===== */
.cat { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--sh-sm); }

/* Категории с икони (винаги видими; съдържанието идва след избор) */
.cat__tabs { display: flex; gap: .5rem; padding: 1.1rem; background: var(--blush-soft); border-bottom: 1px solid var(--line); }
.cat__tab {
    flex: 1 1 0; min-width: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .4rem .2rem; color: var(--ink-soft);
    transition: color .25s;
}
.cat__tab-ic {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--line); color: var(--rose-deep);
    transition: background .3s var(--ease-out), color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.cat__ic-img { width: 32px; height: 32px; object-fit: contain; transition: filter .3s; }
/* по подразбиране иконите са тъмни -> оцветяваме ги в тона на салона */
.cat__tab-ic .cat__ic-img { filter: brightness(0) saturate(100%) invert(48%) sepia(20%) saturate(400%) hue-rotate(350deg) brightness(85%) contrast(90%); }
.cat__tab.is-active .cat__tab-ic .cat__ic-img { filter: brightness(0) invert(1); }
.cat__tab-lb { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.cat__tab:hover .cat__tab-ic { box-shadow: 0 6px 16px rgba(60,30,35,.12); }
.cat__tab.is-active { color: var(--rose-deep); }
.cat__tab.is-active .cat__tab-ic {
    background: var(--grad-rose); color: #fff; border-color: transparent;
    box-shadow: 0 8px 20px rgba(125, 107, 95,.45); transform: scale(1.06);
}
.cat__tab.is-active .cat__tab-lb { font-weight: 800; }

.cat__empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cat__empty svg { width: 40px; height: 40px; color: var(--rose); opacity: .55; }
.cat__empty .cat__ic-img { width: 44px; height: 44px; opacity: .4; filter: brightness(0) saturate(100%) invert(48%) sepia(20%) saturate(400%) hue-rotate(350deg) brightness(85%) contrast(90%); }
.cat__empty p { max-width: 340px; margin: 0; }

.cat__body { display: grid; grid-template-columns: 250px 1fr; }
.cat__groups-wrap { border-right: 1px solid var(--line); min-width: 0; }
.cat__groups { padding: .6rem; display: flex; flex-direction: column; gap: .2rem; }
.cat__groups-bar { display: none; }
.cat__group {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    border: 1px solid var(--line); background: #fff; cursor: pointer; padding: .7rem .9rem; border-radius: 12px;
    font-size: .95rem; font-weight: 600; color: var(--ink);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.cat__group:hover { background: var(--blush-soft); border-color: var(--rose); }
.cat__group:active { transform: scale(.98); }
.cat__group.is-active {
    background: var(--grad-rose); color: #fff; border-color: transparent; font-weight: 700;
    box-shadow: 0 8px 20px rgba(125, 107, 95,.4);
}
.cat__group > span:first-child { flex: 1; }
/* брой процедури като малка значка */
.cat__group-n {
    color: var(--rose-deep); font-size: .72rem; font-weight: 800;
    background: var(--blush-soft); border-radius: 999px; padding: .12rem .48rem; min-width: 22px; text-align: center;
}
.cat__group.is-active .cat__group-n { background: rgba(255,255,255,.28); color: #fff; }
.cat__group-arrow { color: #fff; font-size: 1.1rem; opacity: 0; transition: opacity .2s; }
.cat__group.is-active .cat__group-arrow { opacity: 1; }
.cat__items { padding: .55rem; display: flex; flex-direction: column; gap: .15rem; }
.cat__item { border-radius: 16px; }
/* тънки разделители между процедурите */
.cat__item:not(:last-child)::after { content: ""; display: block; height: 1px; background: var(--line); margin: 0 1rem; }

.cat__item-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 16px; transition: background .2s var(--ease-out); }
/* лек акцент само върху самия ред и само на устройства с мишка (без „залепване" на телефон) */
@media (hover: hover) {
    .cat__item-row:hover { background: var(--blush-soft); }
}
.cat__item-info { flex: 1; min-width: 0; }
.cat__item-name { font-weight: 600; color: var(--ink); line-height: 1.35; letter-spacing: -.01em; }
.cat__item-dur {
    display: inline-flex; align-items: center; gap: .32rem;
    color: var(--muted); font-size: .8rem; margin-top: .4rem;
}
.cat__item-dur::before {
    content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
    -webkit-mask: var(--ic-clock) center / contain no-repeat; mask: var(--ic-clock) center / contain no-repeat;
}

/* дясна колона: цената и бутонът подравнени в стълб (цените се четат в редица) */
.cat__item-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex: none; min-width: 96px; }
.cat__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--rose-deep); white-space: nowrap; line-height: 1; }
.cat__price small, .cat__price .cat__from { font-family: var(--font-body); font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cat__opt .cat__price { font-size: 1.2rem; }

.cat__pick {
    border: 1px solid var(--rose); color: var(--rose-deep); background: #fff; border-radius: 999px;
    padding: .42rem 1.05rem; font-size: .82rem; font-weight: 700; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.cat__pick:hover { background: var(--grad-rose); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(125, 107, 95,.4); }
.cat__pick:active { transform: translateY(1px); }
.cat__pick--sm { padding: .34rem .85rem; font-size: .78rem; }

.cat__opts-toggle {
    border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--rose-deep);
    font-weight: 700; font-size: .8rem; border-radius: 999px; padding: .42rem .85rem;
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; transition: background .2s, border-color .2s;
}
.cat__opts-toggle:hover { background: var(--blush-soft); border-color: var(--rose); }
.cat__chev { transition: transform .25s var(--ease-out); display: inline-block; font-size: .9em; }
.cat__opts-toggle.is-open { background: var(--blush-soft); border-color: var(--rose); }
.cat__opts-toggle.is-open .cat__chev { transform: rotate(180deg); }

.cat__opts { padding: 0 1.1rem 1rem; display: flex; flex-direction: column; gap: .45rem; animation: catOpts .25s var(--ease-out); }
.cat__opts[hidden] { display: none; }
@keyframes catOpts { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cat__opt {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem .95rem; background: var(--ivory); border: 1px solid var(--line); border-radius: 14px;
    transition: border-color .2s, background .2s;
}
.cat__opt:hover { border-color: var(--rose); background: #fff; }
.cat__opt-name { font-size: .92rem; color: var(--ink); font-weight: 500; }
.cat__opt-dur { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.cat__opt-right { display: flex; align-items: center; gap: .9rem; flex: none; }

@media (max-width: 720px) {
    .cat { border-radius: 16px; }
    .cat__tabs { padding: .65rem .4rem; gap: .15rem; }
    .cat__tab { padding: .25rem .1rem; }
    .cat__tab-ic { width: 44px; height: 44px; }
    .cat__ic-img { width: 23px; height: 23px; }
    .cat__tab-lb { font-size: .72rem; }
    .cat__body { grid-template-columns: minmax(0, 1fr); }
    /* Подкатегориите са един ред, който се плъзга настрани (като в App Store / Instagram).
       Последният видим чип нарочно се подава отрязан, а ръбовете избледняват — така
       окото веднага разбира, че има още вдясно. */
    .cat__groups-wrap { position: relative; border-right: 0; border-bottom: 1px solid var(--line); }
    .cat__groups {
        flex-direction: row; flex-wrap: nowrap; border-right: 0; gap: .4rem;
        padding: .7rem .9rem 1rem; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; scroll-padding-inline: .9rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        --fade-l: 0px; --fade-r: 36px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    }
    .cat__groups::-webkit-scrollbar { display: none; }
    .cat__groups.is-scrolled { --fade-l: 28px; }
    .cat__groups.is-end { --fade-r: 0px; }
    .cat__group {
        width: auto; flex: none; white-space: nowrap; scroll-snap-align: start;
        padding: .5rem .8rem; font-size: .8rem; border-radius: 999px; box-shadow: none;
    }
    .cat__group.is-active { box-shadow: 0 4px 12px rgba(125, 107, 95,.32); }
    .cat__group-n { font-size: .66rem; padding: .08rem .42rem; min-width: 20px; }
    .cat__group-arrow { display: none; }
    /* Тънък индикатор под реда — показва колко от списъка се вижда и къде си. */
    .cat__groups-bar {
        display: block; position: absolute; left: 50%; width: 56px; margin-left: -28px; bottom: 5px; height: 2px;
        border-radius: 2px; background: var(--line); overflow: hidden; pointer-events: none;
        transition: opacity .3s;
    }
    .cat__groups-bar i {
        position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--rose);
        width: var(--bar-w, 30%); transform: translateX(var(--bar-x, 0));
    }
    .cat__groups-wrap.no-scroll .cat__groups-bar { opacity: 0; }
    .cat__groups-wrap.no-scroll .cat__groups { -webkit-mask-image: none; mask-image: none; }
    @keyframes catNudge { 0%, 100% { transform: none; } 45% { transform: translateX(-26px); } }
    .cat__groups.is-nudge > .cat__group { animation: catNudge .9s var(--ease-out) .15s; }
    .cat__items { padding: .4rem .3rem; gap: .05rem; }
    .cat__item-row { padding: .8rem .7rem; gap: .6rem; align-items: flex-start; }
    .cat__item:not(:last-child)::after { margin: 0 .7rem; }
    .cat__item-name { font-size: .88rem; }
    .cat__item-dur { font-size: .72rem; margin-top: .3rem; }
    .cat__item-right { gap: .4rem; min-width: 76px; }
    .cat__price { font-size: 1.12rem; }
    .cat__price small, .cat__price .cat__from { font-size: .6rem; }
    .cat__opt .cat__price { font-size: 1rem; }
    .cat__pick { padding: .34rem .8rem; font-size: .74rem; }
    .cat__pick--sm { padding: .28rem .65rem; font-size: .7rem; }
    .cat__opts-toggle { padding: .34rem .7rem; font-size: .72rem; }
    .cat__opts { padding: 0 .7rem .7rem; gap: .35rem; }
    .cat__opt { padding: .55rem .65rem; }
    .cat__opt-name { font-size: .84rem; }
    .cat__opt-dur { font-size: .7rem; }
}

/* Ключ (toggle switch) */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__slider {
    position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
    background: var(--line); transition: background .3s var(--ease-out);
}
.switch__slider::before {
    content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .3s var(--ease-out);
}
.switch input:checked + .switch__slider { background: var(--rose-deep); }
.switch input:checked + .switch__slider::before { transform: translateX(20px); }

/* Карта за печалба по специалист */
/* Печалба по специалист: на телефон една под друга (без скрити карти настрани),
   на компютър трите една до друга. */
.earn-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .earn-grid { grid-template-columns: repeat(3, 1fr); } }

.earn-card { padding: 1.3rem 1.35rem 1.15rem; border-radius: 18px; }
.earn-card__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.earn-card__avatar {
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    font-weight: 700; font-size: 1rem; letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(60,30,35,.18);
}
.earn-card__title { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.earn-card__title strong { font-size: 1.02rem; line-height: 1.2; }
.earn-card__badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--rose-deep);
}
.earn-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .34rem 0; }
.earn-card__row span { color: var(--muted); font-size: .88rem; }
.earn-card__row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.earn-card__row--total { border-top: 1px dashed var(--line); margin-top: .35rem; padding-top: .6rem; }
.earn-card__row--total span { color: var(--ink); font-weight: 600; }
.earn-card__row--total b { font-family: var(--font-dash); font-weight: 700; font-size: 1.5rem; color: var(--rose-deep); white-space: nowrap; }

/* ---- Таблото на шефа: рамка около активния раздел, оцветена според темата му ---- */
.dash-body {
    border-radius: 22px;
    padding: clamp(1rem, 3vw, 1.7rem) clamp(.75rem, 2.4vw, 1.8rem);
    padding-bottom: 240px;              /* въздух под долната лента (телефон) */
    transition: background .45s var(--ease-out);
}
.dash-body h3 {
    font-family: var(--font-dash); font-weight: 700; letter-spacing: -.01em;
    font-size: 1.15rem;
}

/* ---- Навигация на таблото ---- */
/* Телефон: лента с табове ГОРЕ, залепена под хедъра — долу остава свободно
   за кръгчетата на графика. Компютър (≥1024px): страничен стълб вляво. */
.dash-nav {
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    z-index: 90;
    height: var(--dash-h);
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 16px rgba(60, 30, 35, .06);
    padding: 0 .25rem;
}
.dash-nav .dash-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
    padding: .45rem .2rem .38rem;
    border-bottom: 2.5px solid transparent;
    color: #9A8B7E; font-family: inherit;
    transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.dash-tab__ic { width: 24px; height: 24px; display: grid; place-items: center; color: inherit; }
.dash-tab__lb {
    font-family: var(--font-dash); font-size: .66rem; font-weight: 600; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.dash-nav .dash-tab:hover { color: var(--ink); }
.dash-nav .dash-tab.active { border-bottom-color: currentColor; }
.dash-nav .dash-tab.active .dash-tab__lb { font-weight: 800; }

/* Всеки раздел на таблото със свой ясен цвят. */
.dash-tab[data-t="stats"].active    { color: var(--acc-stats-deep); }
.dash-tab[data-t="calendar"].active { color: var(--acc-cal-deep); }
.dash-tab[data-t="noshow"].active   { color: var(--acc-alert-deep); }
.dash-tab[data-t="settings"].active { color: var(--acc-set-deep); }
.dash-tab[data-t="courses"].active  { color: var(--acc-crs-deep); }
.dash-tab__ic { position: relative; }
.dash-tab__badge {
    position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    display: grid; place-items: center; background: var(--acc-alert); color: #fff;
    font-family: var(--font-dash); font-size: .62rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px #fff;
}

@media (max-width: 1023px) {
    /* Съдържанието започва под двете ленти (хедър + табове). */
    body.has-dashnav .section { padding-top: calc(var(--nav-h) + var(--dash-h) + 26px) !important; }
    .dash-body { padding-bottom: 40px; }
    /* Раздел „График": без заглавие и рамки — графикът запълва точно
       екрана под двете ленти, като приложение (кръгчетата долу се виждат). */
    body.dash-on-cal .section__head { display: none; }
    body.dash-on-cal .section { padding-top: calc(var(--nav-h) + var(--dash-h)) !important; padding-bottom: 0 !important; min-height: 0 !important; }
    body.dash-on-cal .dash-body { padding: 0; background: none !important; border-radius: 0; }
    body.dash-on-cal .sc { height: calc(100svh - var(--nav-h) - var(--dash-h)); border-top: 0; }
}

/* Компютър: навигацията слиза отстрани — лентата с табове стои добре само на телефон.
   Стълбът се подравнява вляво от съдържанието и следва екрана при скрол. */
@media (min-width: 1024px) {
    .dash-nav {
        top: calc(var(--nav-h) + 26px); bottom: auto; right: auto;
        left: calc(24px + max(0px, (100vw - 1084px) / 2));
        transform: none;
        border: 1px solid rgba(34, 31, 28, .07);
        box-shadow: 0 12px 34px rgba(60, 30, 35, .16), 0 2px 8px rgba(60, 30, 35, .07);
        flex-direction: column; align-items: stretch; gap: .25rem;
        width: 212px; max-width: none; height: auto;
        border-radius: 20px; padding: .6rem;
    }
    .dash-nav .dash-tab {
        flex-direction: row; justify-content: flex-start; gap: .7rem;
        width: 100%; min-width: 0;
        padding: .55rem .65rem; border-radius: 14px;
        transition: background .2s var(--ease-out), color .2s var(--ease-out);
    }
    .dash-nav .dash-tab:hover { background: var(--blush-soft); }
    .dash-tab__lb { font-size: .86rem; font-weight: 700; }

    /* Без изскачащ кръг — тук избраният раздел е плътен ред в своя цвят. */
    .dash-nav .dash-tab { border-bottom: 0; }
    .dash-nav .dash-tab .dash-tab__ic { width: 36px; height: 36px; border-radius: 50%; transition: background .2s, color .2s; }
    .dash-nav .dash-tab.active .dash-tab__ic { color: #fff; }
    .dash-tab[data-t="stats"].active .dash-tab__ic    { background: linear-gradient(135deg, var(--acc-stats), var(--acc-stats-deep)); }
    .dash-tab[data-t="calendar"].active .dash-tab__ic { background: linear-gradient(135deg, var(--acc-cal), var(--acc-cal-deep)); }
    .dash-tab[data-t="noshow"].active .dash-tab__ic   { background: linear-gradient(135deg, var(--acc-alert), var(--acc-alert-deep)); }
    .dash-tab[data-t="settings"].active .dash-tab__ic { background: linear-gradient(135deg, var(--acc-set), var(--acc-set-deep)); }
    .dash-tab[data-t="courses"].active .dash-tab__ic  { background: linear-gradient(135deg, var(--acc-crs), var(--acc-crs-deep)); }
    .dash-nav .dash-tab[data-t="stats"].active   { background: var(--acc-stats-soft); }
    .dash-nav .dash-tab[data-t="calendar"].active{ background: var(--acc-cal-soft); }
    .dash-nav .dash-tab[data-t="noshow"].active  { background: var(--acc-alert-soft); }
    .dash-nav .dash-tab[data-t="settings"].active{ background: var(--acc-set-soft); }
    .dash-nav .dash-tab[data-t="courses"].active { background: var(--acc-crs-soft); }

    /* Съдържанието се отмества, за да не минава под стълба. */
    body.has-dashnav .section { padding-left: 264px; }
    .dash-body { padding-bottom: 48px; }
}

.nav__links { display: flex; align-items: center; gap: 2.2rem; }
.nav__link {
    position: relative;
    font-size: .74rem; font-weight: 600; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .09em;
    transition: color .25s var(--ease-out);
}
.nav__link::after {
    content: ""; position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 1px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-out);
}
.nav__link:hover, .nav__link.active { color: var(--ink); }
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: .8rem; }

/* Профилен „чип" в навигацията — аватар + име + роля, всичко в едно,
   води директно към профила. До него — компактен бутон само с икона за изход. */
.nav__profile {
    display: inline-flex; align-items: center; gap: .75rem;
    padding: .42rem 1.2rem .42rem .42rem;
    border-radius: var(--r-pill);
    background: var(--blush-soft);
    transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
    white-space: nowrap;
}
.nav__profile:hover { background: var(--blush); box-shadow: 0 2px 10px rgba(34,31,28,.08); }
.nav__profile__av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--rose), var(--rose-deep));
    color: var(--ivory); font-weight: 700; font-size: 1rem;
}
.nav__profile__text { display: flex; flex-direction: column; line-height: 1.25; }
.nav__profile__name { font-weight: 700; font-size: .98rem; color: var(--ink); }
.nav__profile__label { font-size: .74rem; font-weight: 600; color: var(--rose-deep); text-transform: uppercase; letter-spacing: .05em; }
.nav__logout {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    color: var(--muted);
    transition: background .25s var(--ease-out), color .2s;
}
.nav__logout:hover { background: var(--acc-alert-soft); color: var(--acc-alert-deep); }
.nav__logout svg { width: 19px; height: 19px; }

/* Падащо меню под профилния чип (компютър/таблет). На телефон — скрито;
   там връзките са в менюто ☰ (.nav__link--acct), а изходът е иконата до чипа. */
.nav__acct { position: relative; }
.nav__profile__chev { color: var(--rose-deep); margin-left: -.2rem; transition: transform .3s var(--ease-out); }
.nav__acct.is-open .nav__profile__chev { transform: rotate(180deg); }
.nav__acct.is-open .nav__profile { background: var(--blush); }
.nav__menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 120; min-width: 220px;
    display: flex; flex-direction: column; padding: .45rem;
    background: rgba(255,255,255,.98); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 44px rgba(34,31,28,.14), 0 2px 8px rgba(34,31,28,.05);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
    transition: opacity .2s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
}
.nav__acct.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); }
.nav__menu-item {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: .7rem .8rem; border-radius: 10px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); text-align: left; white-space: nowrap;
    transition: background .18s, color .18s;
}
.nav__menu-item svg { color: var(--rose); flex: none; }
.nav__menu-item:hover { background: var(--blush-soft); }
.nav__menu-item.is-on { background: var(--blush-soft); color: var(--rose-deep); }
.nav__menu-sep { height: 1px; background: var(--line); margin: .35rem .4rem; }
.nav__menu-item--out { color: var(--ink-soft); }
.nav__menu-item--out:hover { background: var(--acc-alert-soft); color: var(--acc-alert-deep); }
.nav__menu-item--out:hover svg { color: var(--acc-alert-deep); }
.nav__link--acct { display: none; }
@media (min-width: 721px) { .nav__logout { display: none; } }
@media (min-width: 721px) and (max-width: 980px) { .nav__acct .nav__profile { padding: .32rem .7rem .32rem .32rem; gap: .5rem; } }
@media (max-width: 720px) {
    .nav__menu, .nav__profile__chev { display: none; }
    .nav__links .nav__link--acct { display: flex; }
}

.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s; }

/* 6. BUTTONS ---------------------------------------------------------- */
.btn {
    --pad-y: .95rem; --pad-x: 1.9rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: var(--pad-y) var(--pad-x);
    font-family: var(--font-body); font-weight: 600; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .1em;
    border-radius: var(--r-sm);
    line-height: 1;
    transition: transform .16s var(--ease-out), box-shadow .3s var(--ease-out), background .3s, color .3s, border-color .3s;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
    background: var(--ink); color: var(--ivory);
    box-shadow: none;
}
.btn--primary:hover { background: var(--rose-deep); }
.btn--ghost {
    background: transparent; color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.btn--gold { background: var(--gold); color: var(--ivory); box-shadow: none; }
.btn--gold:hover { background: var(--rose-deep); }
.btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.btn--outline-light:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #fff; }
.btn--block { width: 100%; }
.btn--lg { --pad-y: 1.1rem; --pad-x: 2.4rem; font-size: .82rem; }
.btn__arrow {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.7em; height: 1.7em; border-radius: 50%;
    background: rgba(255,255,255,.18);
    transition: transform .3s var(--ease-out), background .3s;
}
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--ghost .btn__arrow, .btn--outline-light .btn__arrow { background: rgba(0,0,0,.06); }
.btn--ghost:hover .btn__arrow, .btn--outline-light:hover .btn__arrow { background: rgba(255,255,255,.35); }

/* 7. HERO — fullscreen видео, затъмнено отляво, текстът плава върху него ---- */
.hero--video { position: relative; min-height: 100svh; padding-top: 0; overflow: hidden; background: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transform: translateZ(0); backface-visibility: hidden; }
.hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(15,11,9,.92) 0%, rgba(15,11,9,.72) 32%, rgba(15,11,9,.28) 58%, rgba(15,11,9,.06) 76%, rgba(15,11,9,0) 92%),
        linear-gradient(0deg, rgba(15,11,9,.5) 0%, rgba(15,11,9,0) 32%);
}
.hero__content { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); }
.hero__inner { width: 100%; padding-inline: clamp(24px, 5vw, 72px); } /* „рамка" — отстрани остава само клипът */

.hero__copy { max-width: 600px; }
.hero__title { margin: 1.4rem 0 0; font-size: clamp(2.2rem, 4.3vw, 3.7rem); font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: #fff; }
.hero__title .accent { font-style: italic; font-weight: 500; color: var(--gold-soft); }
.hero__lead { margin-top: 1.3rem; font-size: 1.12rem; line-height: 1.7; letter-spacing: .012em; color: rgba(255,255,255,.82); max-width: 42ch; }
.hero__cta { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
/* Основното CTA в героя стои върху видео — трябва топъл, силно контрастен акцент, не тъмно на тъмно */
.hero__cta .btn--primary {
    background: linear-gradient(135deg, #F1E7D8, var(--gold));
    color: var(--ink);
    box-shadow: 0 14px 32px rgba(0,0,0,.38);
}
.hero__cta .btn--primary:hover { background: var(--gold-soft); }
.hero__cta .btn--primary .btn__arrow { background: rgba(34,31,28,.14); }

/* Заглавие дума-по-дума (clip reveal) */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wd__inner { display: inline-block; transform: translateY(115%); animation: wdIn 1s var(--ease-out) forwards; }
@keyframes wdIn { to { transform: translateY(0); } }

/* Заглавие „пишеща машина": след първата анимация фразите се изтриват и изписват наново.
   Височината е заключена по най-дългата фраза (JS), за да не подскача съдържанието отдолу. */
.hero__title.is-typing .tw-accent { font-style: italic; font-weight: 500; color: var(--gold-soft); }
.tw-caret {
    display: inline-block; width: 2px; height: .9em; margin-left: .06em; vertical-align: -.06em;
    background: var(--gold-soft); border-radius: 1px; animation: twBlink 1s steps(1) infinite;
}
.hero__title.is-busy .tw-caret { animation: none; }
@keyframes twBlink { 50% { opacity: 0; } }

/* Статистика в редица под бутоните, разделена с тънка линия */
/* Статистика в героя: три големи курсивни числа на един ред, разделени с
   наклонени бели линии; по числата минава златист отблясък при зареждане. */
.hero__stats {
    display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
    margin-top: 2.8rem; padding-top: 1.7rem; border-top: 1px solid rgba(255,255,255,.2);
}
.hero__stat {
    position: relative; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
    padding: .15rem clamp(1.3rem, 3.2vw, 2.4rem);
}
.hero__stat:first-child { padding-left: 0; }
.hero__stat + .hero__stat::before {
    content: ""; position: absolute; left: 0; top: -4%; bottom: -4%; width: 1.5px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.9) 25%, rgba(255,255,255,.9) 75%, transparent);
    transform: rotate(16deg);
}
.hero__stat strong {
    display: inline-flex; align-items: flex-start;
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: .9; letter-spacing: -.02em;
    color: transparent;
    background: linear-gradient(100deg, #fff 42%, #F3DDB0 50%, #fff 58%) 100% 0 / 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: statShine 2.6s var(--ease-out) 1.4s both;
}
.hero__stat strong b { font-weight: inherit; }
.hero__stat strong i {
    font-style: normal; font-size: .42em; margin: .1em 0 0 .08em;
    color: #E7C27D; -webkit-text-fill-color: #E7C27D;
    text-shadow: 0 0 12px rgba(231,194,125,.55);
}
.hero__stat span {
    font-size: .68rem; font-weight: 600; color: rgba(255,255,255,.72);
    text-transform: uppercase; letter-spacing: .16em; white-space: nowrap;
}
@keyframes statShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero__stat strong { animation: none; background-position: 0 0; } }

/* Стрелка-подкана за скрол, долу вляво */
.hero__scrollcue {
    position: absolute; left: clamp(24px, 4vw, 60px); bottom: 2.2rem; z-index: 2;
    width: 30px; height: 48px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px;
    display: flex; align-items: flex-start; justify-content: center; padding-top: 8px;
    transition: border-color .3s;
}
.hero__scrollcue span { width: 4px; height: 8px; border-radius: 999px; background: #fff; animation: scrollCue 1.8s ease-in-out infinite; }
.hero__scrollcue:hover { border-color: rgba(255,255,255,.9); }
@keyframes scrollCue { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(14px); } 71% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }

/* 7b. EDITORIAL SPLIT (философия) -------------------------------------- */
.split { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.split__art { position: relative; padding: 10% 14% 14% 0; }
.split__photo { border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.split__photo--main { aspect-ratio: 4/5; position: relative; z-index: 1; }
.split__photo--accent { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1/1; z-index: 2; border: 6px solid var(--ivory); transform: rotate(-3deg); }
.split__copy h2 { margin: 1rem 0 1.1rem; }
.check-list { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.check-list li { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .95rem; }
.check-list .icon { color: #fff; background: var(--grad-rose); border-radius: 50%; padding: 4px; width: 22px; height: 22px; flex: none; }

/* 8. SECTION HEADINGS ------------------------------------------------- */
.section__head { max-width: 640px; margin-bottom: 3.5rem; }
.section__head.center { margin-inline: auto; }
.section__head h2 { margin: 1rem 0 1rem; }

/* Декоративен разделител */
.divider { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); }
.divider::before, .divider::after { content: ""; height: 1px; width: 60px; background: linear-gradient(90deg, transparent, var(--gold)); }
.divider::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* 9. CARDS ------------------------------------------------------------ */
.cards { display: grid; gap: 26px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
    position: relative; background: var(--ivory);
    border-radius: var(--r-lg); padding: 2rem;
    box-shadow: var(--sh-sm); border: 1px solid var(--line);
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
    overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0; background: var(--grad-glow); opacity: 0; transition: opacity .5s; pointer-events: none; }
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.card:hover::before { opacity: 1; }

/* Услуга */
.service-card__icon { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--grad-warm); display: grid; place-items: center; color: var(--ink); margin-bottom: 1.2rem; box-shadow: var(--sh-sm); flex: none; }
.service-card__icon.ic--gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #fff; }
.service-card__icon.ic--mauve { background: linear-gradient(135deg, #D9D1C7, var(--mauve)); color: #fff; }
.service-card__icon.ic--rose { background: var(--grad-rose); color: #fff; }
.service-card h3 { margin-bottom: .5rem; }
.service-card p { color: var(--ink-soft); font-size: .95rem; }
.service-card__meta { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; }

/* Услуга с горна снимка (services.html — динамичен списък) */
.service-card { padding: 0; }
.service-card__photo { aspect-ratio: 16/10; }
.service-card__body { padding: 0 1.7rem 1.8rem; }
.service-card__body .service-card__icon { margin-top: -30px; position: relative; z-index: 2; border: 4px solid var(--ivory); }
.price { font-family: var(--font-display); font-size: 1.35rem; color: var(--rose-deep); }
.price small { font-size: .8rem; color: var(--muted); }

/* Екип */
.team-card { padding: 0; }
.team-card__photo { aspect-ratio: 3/3.4; position: relative; overflow: hidden; background: var(--grad-warm); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.team-card:hover .team-card__photo img { transform: scale(1.06); }
.team-card__initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 4rem; color: rgba(255,255,255,.85); }
.team-card__socials { position: absolute; inset: auto 0 0 0; padding: 1rem; display: flex; gap: .5rem; justify-content: center; background: linear-gradient(transparent, rgba(34, 31, 28,.45)); opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.team-card:hover .team-card__socials { opacity: 1; transform: translateY(0); }
.team-card__socials a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--ink); transition: transform .2s var(--ease-out), background .2s; }
.team-card__socials a svg { width: 16px; height: 16px; }
.team-card__socials a:hover { background: #fff; transform: translateY(-3px); }
.team-card__body { padding: 1.4rem 1.6rem 1.8rem; }
.team-card__body h3 { margin-bottom: .15rem; }
.team-card__role { color: var(--rose-deep); font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.team-card__bio { margin-top: .7rem; color: var(--ink-soft); font-size: .9rem; }

/* Екипните карти на началната страница не стоят в права редица */
@media (min-width: 981px) {
    #team-preview.cards--3 > .team-card:nth-child(1) { transform: translateY(16px) rotate(-.6deg); }
    #team-preview.cards--3 > .team-card:nth-child(2) { transform: translateY(-20px); }
    #team-preview.cards--3 > .team-card:nth-child(3) { transform: translateY(10px) rotate(.6deg); }
    #team-preview.cards--3 > .team-card:nth-child(1):hover { transform: translateY(12px) rotate(-.6deg); }
    #team-preview.cards--3 > .team-card:nth-child(2):hover { transform: translateY(-24px); }
    #team-preview.cards--3 > .team-card:nth-child(3):hover { transform: translateY(6px) rotate(.6deg); }
}

/* "Защо нас" — листчета, забодени с кабарчета.
   Наклонът е със свойството `rotate` (не transform), за да не се бие с
   анимацията за появяване и hover-а, които ползват transform. */
.feature-grid { align-items: start; row-gap: 2.6rem; padding-top: 14px; }
.split-features { margin-top: clamp(3rem, 6vw, 4.6rem); }
.feature-grid > .card {
    display: flex; flex-direction: column; overflow: visible;
    padding: 2.5rem 1.8rem 1.9rem;
    background: linear-gradient(180deg, #FFFEFB 0%, #FBF7F0 100%);
    border: 0; border-radius: 3px;
    box-shadow:
        0 1px 1px rgba(60, 40, 30, .06),
        0 12px 18px -10px rgba(60, 40, 30, .30),
        0 26px 34px -22px rgba(60, 40, 30, .28);
    transform-origin: 50% 0;               /* „виси" от кабарчето */
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), rotate .5s var(--ease-out);
}
.feature-grid > .card::before { display: none; }
/* Кабарчето: лъскава кръгла главичка със сянка върху листа. */
.feature-grid > .card::after {
    content: ""; position: absolute; z-index: 2;
    top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 45% 40%, var(--pin) 0 55%, color-mix(in srgb, var(--pin) 65%, #000) 100%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .28), 3px 7px 7px -3px rgba(0, 0, 0, .22);
}
.feature-grid > .card:nth-child(1) { rotate: -2deg;   --pin: #B86B76; }
.feature-grid > .card:nth-child(2) { rotate: 1.6deg;  --pin: #C9A15B; margin-top: 1.4rem; }
.feature-grid > .card:nth-child(3) { rotate: -1.2deg; --pin: #6F8F7A; }
.feature-grid > .card:nth-child(4) { rotate: 2.2deg;  --pin: #8A6FA8; margin-top: 1rem; }
.feature-grid > .card:hover { rotate: 0deg; transform: translateY(-4px); }
.feature-grid > .card .service-card__icon { margin-bottom: 1.3rem; }
.feature-grid > .card h3 { font-size: 1.16rem; line-height: 1.25; margin-bottom: .55rem; min-height: 2.7em; }
.feature-grid > .card p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; }
/* Иконите са еднакви и плътни — ясно се открояват като акцент на всяка карта. */
.feature-grid > .card .service-card__icon { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; box-shadow: 0 6px 14px rgba(125, 107, 95, .28); }
.feature-grid > .card p strong { color: var(--ink); font-weight: 600; }

/* Стъпки — числа-воден знак + свързваща линия */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.step-tile {
    position: relative; background: var(--ivory); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--sh-sm);
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.step-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.step-tile__num {
    position: absolute; top: .6rem; right: 1.2rem;
    font-family: var(--font-display); font-size: 3.4rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--gold-soft);
}
.step-tile .service-card__icon { margin-top: .8rem; }
.step-tile h3 { margin: .6rem 0 .4rem; }
.steps-grid > .step-tile:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: 26px; height: 1px;
    background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
    display: none;
}
@media (min-width: 981px) {
    /* Плочките се разминават леко във вертикала — не стоят в права линия */
    .steps-grid > .step-tile:nth-child(2) { transform: translateY(-18px) rotate(-.8deg); }
    .steps-grid > .step-tile:nth-child(3) { transform: translateY(12px) rotate(.8deg); }
    .steps-grid > .step-tile:nth-child(2):hover { transform: translateY(-22px) rotate(-.8deg); }
    .steps-grid > .step-tile:nth-child(3):hover { transform: translateY(8px) rotate(.8deg); }
}

/* Лента за резервация веднага след 3-те стъпки — следващото логично действие */
.steps-cta {
    margin-top: 2.6rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1.6rem; flex-wrap: wrap; background: var(--ivory); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 1.5rem 1.8rem; box-shadow: var(--sh-sm);
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.steps-cta:hover { box-shadow: var(--sh-md); border-color: var(--rose); }
.steps-cta__text { display: flex; flex-direction: column; gap: .3rem; }
.steps-cta__text strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.steps-cta__text span { color: var(--ink-soft); font-size: .92rem; }
.steps-cta .btn { pointer-events: none; flex: none; }
@media (max-width: 560px) {
    .steps-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .steps-cta .btn { width: 100%; justify-content: center; }
}

/* CTA секция с приглушена снимка на фона */
.cta-section { position: relative; overflow: hidden; }
.cta-section__bg { position: absolute; inset: 0; z-index: -1; opacity: .16; }
.cta-section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cream), transparent 30%, transparent 70%, var(--cream)); }

/* Социални бутони във футъра */
.footer__social { display: flex; gap: .7rem; margin-top: 1.3rem; }
.social-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); transition: all .25s var(--ease-out); }
.social-btn:hover { background: var(--grad-rose); color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: var(--sh-glow); }

/* 10. FORMS ----------------------------------------------------------- */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .45rem; letter-spacing: .02em; }
.input, .select, textarea.input {
    width: 100%; padding: .9rem 1.1rem;
    font-family: inherit; font-size: .96rem; color: var(--ink);
    background: var(--ivory); border: 1px solid var(--line);
    border-radius: var(--r-md); outline: none;
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
}
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus, textarea.input:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 4px rgba(165, 144, 121,.14);
    background: #fff;
}
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237D6B5F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.6rem; }
textarea.input { resize: vertical; min-height: 110px; }

/* Панел (форма/бокс) */
.panel { background: rgba(255,255,255,.8); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--sh-md); overflow-x: hidden; max-width: 100%; }

/* 11. BADGES / PILLS / SLOTS ----------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; background: var(--blush-soft); color: var(--rose-deep); }
.tabs { display: inline-flex; padding: .3rem; background: var(--blush-soft); border-radius: var(--r-pill); gap: .2rem; }
.tab { padding: .6rem 1.4rem; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: color .25s var(--ease-out); position: relative; z-index: 1; }
.tab.active { color: #fff; }
.tabs { position: relative; }
.tabs__thumb { position: absolute; top: .3rem; bottom: .3rem; border-radius: var(--r-pill); background: var(--grad-rose); box-shadow: var(--sh-sm); transition: transform .35s var(--ease-out), width .35s var(--ease-out); z-index: 0; }

/* Свободни часове (slot grid) */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .7rem; }
.slot { padding: .75rem .4rem; border-radius: var(--r-md); background: var(--ivory); border: 1px solid var(--line); font-weight: 600; font-size: .92rem; color: var(--ink); transition: transform .16s var(--ease-out), border-color .2s, background .2s, color .2s; }
.slot:hover { border-color: var(--rose); transform: translateY(-2px); }
.slot:active { transform: scale(.97); }
.slot.selected { background: var(--grad-rose); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }

/* Съобщения */
.alert { padding: .9rem 1.1rem; border-radius: var(--r-md); font-size: .9rem; font-weight: 500; display: flex; gap: .6rem; align-items: flex-start; }
.alert--ok { background: #EAF6EE; color: #2F7D50; }
.alert--err { background: #FBEAE9; color: #C0453F; }
.alert--info { background: var(--blush-soft); color: var(--rose-deep); }

/* Празно състояние / зареждане */
.hint { color: var(--muted); font-size: .92rem; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--blush); border-top-color: var(--rose); animation: spin .7s linear infinite; margin: 2rem auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Steps (booking) */
.steps { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--muted); font-size: .9rem; }
.step__num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); border: 1px solid var(--line); font-size: .85rem; transition: all .3s var(--ease-out); }
.step.active { color: var(--ink); }
.step.active .step__num { background: var(--grad-rose); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.step.done .step__num { background: var(--gold-soft); color: var(--ink); border-color: transparent; }
.steps--booking { justify-content: center; }

/* Резервация (booking.html) — основна зона + sticky обобщение --------- */
.booking-grid { grid-template-columns: 1.5fr .9fr; gap: 28px; align-items: start; margin-top: 2rem; }
.booking-panel-summary { position: sticky; top: calc(var(--nav-h) + 16px); background: linear-gradient(180deg, #fff, var(--ivory)); }
.booking-panel-main { min-width: 0; }

/* Стъпка 1 — каталогът от началната страница, на цяла ширина, без обобщението */
.booking-grid.is-picking { grid-template-columns: minmax(0, 1fr); }
.booking-grid.is-picking .booking-panel-summary { display: none; }
.booking-grid.is-picking .booking-panel-main { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; min-height: 0 !important; overflow: visible; }

/* Стъпка 2 — по-компактни карти със специалисти */
#bk-employees .bk-pick { padding: 1rem 1.2rem; }

/* ---- Некоректни клиенти: подредени карти ---- */
.ns-card {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1rem 1.15rem; margin-bottom: .75rem;
    border: 1px solid rgba(217,83,79,.28); border-left: 6px solid #D9534F;
    background: #D9534F0F; border-radius: 16px;
}
.ns-ic {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    background: #D9534F; color: #fff; display: grid; place-items: center;
    font-size: 1.3rem; font-weight: 800; box-shadow: 0 4px 12px rgba(217,83,79,.4);
}
.ns-main { flex: 1; min-width: 0; }
.ns-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.ns-name { font-weight: 700; font-size: 1.04rem; line-height: 1.25; }
.ns-count { flex: none; background: #D9534F; color: #fff; border-radius: 999px; padding: .26rem .65rem; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.ns-meta { margin-top: .5rem; display: flex; flex-direction: column; gap: .28rem; }
.ns-meta-row { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--muted); }
.ns-meta-row a { color: var(--ink-soft); font-weight: 600; }
.ns-meta-row svg { flex: none; opacity: .7; }
.ns-upcoming { margin-top: .7rem; }
.ns-badge-up { display: inline-flex; align-items: center; gap: .35rem; background: #D9534F; color: #fff; border-radius: 999px; padding: .26rem .65rem; font-size: .74rem; font-weight: 700; }
.ns-badge-none { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; }

/* ---- Настройки (прагове + комисионни): професионален вид ---- */
.set-card { padding: 1.25rem 1.35rem; border-top: 3px solid var(--acc-set); }
.set-thresh { display: flex; flex-direction: column; }
.set-trow { display: flex; align-items: center; gap: .8rem; padding: .95rem 0; }
.set-trow + .set-trow { border-top: 1px solid var(--line); }
.set-dot { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.set-trow__lb { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: .93rem; }
.set-trow__lb small { display: block; color: var(--muted); font-weight: 500; font-size: .76rem; margin-top: .15rem; line-height: 1.3; }
.set-field { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; flex: none; }
.set-field input.input { width: 58px; border: 0 !important; border-radius: 0 !important; text-align: center; font-weight: 700; font-size: 1rem; padding: .55rem .2rem !important; box-shadow: none !important; }
.set-field__u { color: var(--muted); font-size: .8rem; padding: 0 .7rem 0 .15rem; white-space: nowrap; }
.set-save { justify-self: start; margin-top: 1.1rem; }

.comm-card { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: .8rem; border-left: 4px solid var(--acc-set); }
.comm-head { display: flex; align-items: center; gap: .8rem; }
.comm-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem; box-shadow: 0 4px 12px rgba(60,30,35,.2); }
.comm-name { flex: 1; min-width: 0; }
.comm-name strong { font-size: 1.05rem; }
.comm-name .hint { font-size: .77rem; margin-top: .05rem; }
.comm-boss-pill { background: var(--acc-set-soft); color: var(--acc-set-deep); border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.comm-boss-pill b { font-family: var(--font-dash); font-weight: 700; }
.comm-bar { height: 9px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.comm-bar__her { display: block; height: 100%; background: linear-gradient(90deg, var(--acc-set), var(--acc-set-deep)); border-radius: 999px; transition: width .25s var(--ease-out); }
.comm-ctrl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.comm-ctrl .comm-save { margin-left: auto; }

/* Контакти — две колони на десктоп, една на телефон */
.contact-grid { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 18px; } }

/* =====================================================================
   ГРАФИК — стил Studio 24 (js/calendar.js)
   Размерите идват от JS: --hh = пиксели за 1 час, --cw = ширина на колона.
   Цветът на лентата е в --sc-accent (смени го тук, ако трябва).
   ===================================================================== */
.sc {
    --sc-accent: #52ABB3;
    --sc-accent-deep: #3E949C;
    --sc-line: #DCDCDC;
    --sc-line-soft: #EFEFEF;
    --sc-off: #F0F0F0;
    --sc-text: #4A4A4A;
    --hh: 72px; --cw: 120px;
    position: relative;
    display: flex; flex-direction: column;
    height: clamp(460px, calc(100svh - var(--nav-h) - 20px), 1000px);
    background: #fff;
    border: 1px solid var(--sc-line); border-radius: 16px;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "locl" 0;   /* стандартни кирилски форми (както в Studio 24) */
    color: var(--sc-text);
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* Телефон: от край до край, като в приложението. */
@media (max-width: 640px) {
    .sc { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; }
}

/* ---- Горна лента ---- */
.sc-bar {
    flex: none; display: flex; align-items: center; gap: .4rem;
    height: 60px; padding: 0 .55rem 0 .95rem;
    background: var(--sc-accent); color: #fff;
}
.sc-date {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
    border: 0; background: none; color: inherit; cursor: pointer; padding: 0; text-align: left; font: inherit;
}
.sc-date__d { display: inline-flex; align-items: center; gap: .25rem; font-size: 1.12rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15; white-space: nowrap; }
.sc-date__w { font-size: .9rem; opacity: .95; line-height: 1.2; }
.sc-bar__mid { flex: none; display: flex; align-items: center; gap: .6rem; }
.sc-ic {
    border: 0; background: none; color: #fff; cursor: pointer; padding: .3rem;
    display: grid; place-items: center; border-radius: 10px;
    transition: background .15s;
}
.sc-ic:active { background: rgba(255,255,255,.18); }
.sc-today { color: #fff; }
.sc-menu { margin-left: auto; flex: 1 1 0; justify-content: end; display: flex; }

/* ---- Изскачащи: мини календар + меню ---- */
.sc-pop {
    position: absolute; top: 64px; z-index: 30;
    background: #fff; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1);
    animation: scPop .16s var(--ease-out);
}
.sc-pop[hidden] { display: none; }
.sc-pop--date { left: 8px; width: min(320px, calc(100% - 16px)); padding: .6rem .6rem .7rem; }
.sc-pop--menu { right: 8px; min-width: 200px; padding: .35rem 0; }
@keyframes scPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sc-mini__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.sc-mini__nav strong { font-size: .98rem; font-weight: 600; color: #333; }
.sc-mini__arr { border: 0; background: none; color: var(--sc-accent); cursor: pointer; padding: .3rem; display: grid; place-items: center; border-radius: 8px; }
.sc-mini__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.sc-mini__grid > span { font-size: .72rem; color: #999; padding: .25rem 0; }
.sc-mini__d {
    position: relative; aspect-ratio: 1; border: 0; background: none; cursor: pointer;
    border-radius: 50%; font: inherit; font-size: .88rem; color: #333;
}
.sc-mini__d.is-other { color: #BBB; }
.sc-mini__d.is-today { color: var(--sc-accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--sc-accent); }
.sc-mini__d.is-sel { background: var(--sc-accent); color: #fff; font-weight: 700; }
.sc-mini__d i { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sc-accent); }
.sc-mini__d.is-sel i { background: #fff; }
.sc-mn {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    border: 0; background: none; cursor: pointer; font: inherit; font-size: .95rem; color: #333;
    padding: .75rem 1.1rem; text-align: left;
}
.sc-mn:active, .sc-mn:hover { background: #F4F4F4; }
.sc-mn.is-on { color: var(--sc-accent-deep); font-weight: 600; }
.sc-mn__sep { height: 1px; background: #EEE; margin: .3rem 0; }
.sc-mn__zoom { display: flex; align-items: center; gap: .5rem; padding: .45rem 1.1rem .55rem; font-size: .95rem; color: #333; }
.sc-mn__zoom span { flex: 1; }
.sc-mn__z { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #DDD; background: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--sc-accent-deep); }

/* ---- Решетка ---- */
.sc-scroll {
    position: relative; flex: 1; min-height: 0;
    overflow: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}
.sc.is-selecting .sc-scroll { touch-action: none; }
.sc-grid { display: grid; width: max-content; min-width: 100%; }
.sc-corner {
    position: sticky; top: 0; left: 0; z-index: 6;
    border: 0; border-bottom: 1px solid var(--sc-line); border-right: 1px solid var(--sc-line);
    background: #fff; color: #666; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sc-hd {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: flex-start; gap: .4rem;
    min-width: 0; padding: 0 .6rem;
    background: #fff; border: 0;
    border-bottom: 1px solid var(--sc-line); border-left: 1px solid var(--sc-line);
    font: inherit; font-size: .98rem; font-weight: 500; color: #555;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.sc-corner + .sc-hd, .sc-gut + .sc-col { border-left: 0; }
.sc-hd.is-today { color: var(--sc-accent-deep); font-weight: 700; }
.sc-hd.is-sel { box-shadow: inset 0 -3px 0 var(--sc-accent); }
.sc-hd--emp { cursor: default; justify-content: center; font-weight: 600; color: #333; box-shadow: inset 0 -3px 0 var(--c); }
.sc-hd b { font-weight: inherit; }
.sc.is-small .sc-hd { font-size: .8rem; padding: 0 .35rem; }
/* Тесни колони: ден над число, без месеца. */
.sc.is-narrow .sc-hd:not(.sc-hd--emp) { flex-direction: column; justify-content: center; gap: 0; padding: 0 2px; font-size: .72rem; line-height: 1.15; }
.sc.is-narrow .sc-hd b { font-size: 1rem; }
.sc.is-narrow .sc-hd__m { display: none; }
.sc.is-narrow .sc-hd--emp span { display: none; }
.sc-gut {
    position: sticky; left: 0; z-index: 4;
    background: #fff; border-right: 1px solid var(--sc-line);
}
.sc-gl {
    position: absolute; left: 0; right: 6px; transform: translateY(-50%);
    text-align: right; font-size: .9rem; color: #444; font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.sc-gl--h { font-size: .74rem; color: #777; }
.sc-gl--q { font-size: .66rem; color: #A5A5A5; }
.sc.is-small .sc-gl { font-size: .74rem; }
.sc.no-q .sc-gl--q, .sc.no-h .sc-gl--h { display: none; }
.sc.is-tiny .sc-gl.is-odd { display: none; }

.sc-col {
    position: relative; min-width: 0;
    background: var(--sc-off);
    border-left: 1px solid var(--sc-line);
}
.sc-work { position: absolute; left: 0; right: 0; background: #fff; pointer-events: none; }
/* Линии: плътна на кръгъл час, по-мека на половин час, най-лека на 15 мин. */
.sc-lines {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to bottom, var(--sc-line) 1px, transparent 1px),
        linear-gradient(to bottom, transparent calc(50% - .5px), var(--sc-line-soft) calc(50% - .5px), var(--sc-line-soft) calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(to bottom, #F6F6F6 1px, transparent 1px);
    /* 1 ред = 1 час (--sc-hh идва от JS); графикът започва от 07:30 -> линиите са отместени с половин час */
    background-size: 100% var(--sc-hh, 60px), 100% var(--sc-hh, 60px), 100% calc(var(--sc-hh, 60px) / 4);
    background-position: 0 calc(var(--sc-hh, 60px) / 2);
}
.sc.no-q .sc-lines {
    background-image:
        linear-gradient(to bottom, var(--sc-line) 1px, transparent 1px),
        linear-gradient(to bottom, transparent calc(50% - .5px), var(--sc-line-soft) calc(50% - .5px), var(--sc-line-soft) calc(50% + .5px), transparent calc(50% + .5px));
    background-size: 100% var(--sc-hh, 60px);
    background-position: 0 calc(var(--sc-hh, 60px) / 2);
}
.sc.is-tiny .sc-lines { background-image: linear-gradient(to bottom, var(--sc-line) 1px, transparent 1px); }

/* Линия „сега" */
.sc-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #E53935; z-index: 4; pointer-events: none; }
.sc-now::before { content: ""; position: absolute; left: -6px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #E53935; }

/* Записан час */
.sc-bk {
    position: absolute; z-index: 2; min-height: 16px;
    display: flex; flex-direction: column; align-items: stretch; gap: 1px;
    padding: 3px 5px 3px 7px; margin: 0; overflow: hidden;
    border: 0; border-left: 4px solid var(--bc); border-radius: 4px;
    background: color-mix(in srgb, var(--bc) 20%, #fff);
    color: #222; text-align: left; font: inherit; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    /* Блокчетата извън екрана не се подреждат/рисуват -> мащабът остава гладък при много часове. */
    content-visibility: auto;
}
.sc-bk:active { filter: brightness(.95); }
/* Много тясно блокче -> само цветът, без смачкан текст. Класовете hl1..hl8 ги слага JS
   според ширината на колоната (по-евтино от container query на всяко блокче при мащаб). */
.sc.hl1 .sc-bk[data-l="1"] > span,
.sc.hl2 .sc-bk[data-l="2"] > span,
.sc.hl3 .sc-bk[data-l="3"] > span,
.sc.hl4 .sc-bk[data-l="4"] > span,
.sc.hl5 .sc-bk[data-l="5"] > span,
.sc.hl6 .sc-bk[data-l="6"] > span,
.sc.hl7 .sc-bk[data-l="7"] > span,
.sc.hl8 .sc-bk[data-l="8"] > span { display: none !important; }
.sc-bk > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.sc-bk__t { font-size: .74rem; font-weight: 700; color: color-mix(in srgb, var(--bc) 75%, #000); font-variant-numeric: tabular-nums; }
.sc-bk__s { font-size: .82rem; font-weight: 600; }
.sc-bk__c { font-size: .76rem; color: #555; }
.sc.is-small .sc-bk { flex-direction: row; flex-wrap: wrap; align-content: flex-start; column-gap: .3rem; padding-top: 1px; padding-bottom: 1px; }
.sc.is-small .sc-bk__c { display: none; }
.sc.is-tiny .sc-bk__s { display: none; }
.sc.is-tiny .sc-bk__t { font-size: .66rem; }
.sc-bk.is-flag { box-shadow: 0 0 0 2px #D9534F, 0 2px 8px rgba(217,83,79,.45); }
.sc-bk.is-done { opacity: .72; }
.sc-bk.is-cancel { opacity: .45; }
.sc-bk.is-cancel .sc-bk__s { text-decoration: line-through; }

/* Почивка (блокирано време) — щрихована, с цвета на специалистката отляво */
.sc-bk.sc-rest {
    background: repeating-linear-gradient(-45deg, #EFEFEF 0 6px, #F8F8F8 6px 12px);
    box-shadow: none; outline: 1px dashed #C9C9C9; outline-offset: -1px;
}
.sc-bk.sc-rest .sc-bk__s { color: #666; font-weight: 700; }
.sc-bk.sc-rest .sc-bk__t { color: #777; }

/* Почивен ден — щрихова зона през работното време (под часовете) */
.sc-dayoff {
    position: absolute; left: 0; right: 0; z-index: 1;
    display: flex; align-items: flex-start; justify-content: center;
    padding: .6rem .3rem 0; margin: 0; border: 0; font: inherit; cursor: pointer;
    background: repeating-linear-gradient(-45deg, rgba(0,0,0,.045) 0 8px, rgba(0,0,0,.015) 8px 16px);
    border-top: 3px solid var(--bc);
}
.sc-dayoff span {
    position: sticky; top: 52px;
    font-size: .74rem; font-weight: 700; color: #666; background: #fff;
    padding: .15rem .55rem; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
    white-space: nowrap;
}
/* Почивен ден в обща колона (няколко специалистки) */
.sc-offtags { position: absolute; left: 2px; right: 2px; z-index: 3; display: flex; flex-direction: column; gap: 2px; pointer-events: none; padding-top: 2px; }
.sc-offtag {
    pointer-events: auto; display: block; width: 100%; margin: 0; cursor: pointer;
    font: inherit; font-size: .66rem; font-weight: 700; text-align: left; color: #555;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 1px 4px; border: 0; border-left: 3px solid var(--bc); border-radius: 3px;
    background: repeating-linear-gradient(-45deg, #EDEDED 0 5px, #F7F7F7 5px 10px);
}
.sc-bk__web {
    position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%;
    display: grid !important; place-items: center; background: #fff; color: var(--bc);
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Маркиран период (задръж + плъзни) */
.sc-sel {
    position: absolute; left: 2px; right: 2px; z-index: 3; pointer-events: none;
    background: color-mix(in srgb, var(--sc-accent) 28%, transparent);
    border: 2px solid var(--sc-accent); border-radius: 6px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 3px 6px; color: #0F4F55; overflow: hidden;
    animation: scSel .15s var(--ease-out);
}
.sc-sel span { font-size: .8rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-sel small { font-size: .72rem; font-weight: 600; opacity: .85; }
@keyframes scSel { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---- Месец ---- */
.sc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 100%; }
.sc-mh {
    position: sticky; top: 0; z-index: 2; background: #fff;
    display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: #777;
    border-bottom: 1px solid var(--sc-line);
}
.sc-mc {
    min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 3px 2px 4px; border: 0; border-right: 1px solid var(--sc-line-soft); border-bottom: 1px solid var(--sc-line);
    background: #fff; cursor: pointer; font: inherit; text-align: left; overflow: hidden;
}
.sc-mc:nth-child(7n) { border-right: 0; }
.sc-mc.is-off { background: #FAFAFA; }
.sc-mc.is-other { background: var(--sc-off); }
.sc-mc.is-other .sc-mc__n { color: #AAA; }
.sc-mc__n {
    display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
    min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px;
    font-size: .85rem; font-weight: 500; color: #333;
}
.sc-mc__n i { width: 5px; height: 5px; border-radius: 50%; }
.sc-mc.is-today .sc-mc__n { background: var(--sc-accent); color: #fff; font-weight: 700; }
.sc-mc.is-sel { box-shadow: inset 0 0 0 2px var(--sc-accent); }
.sc-mi {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .66rem; line-height: 1.35; padding: 0 3px; border-radius: 3px;
    border-left: 3px solid var(--bc); background: color-mix(in srgb, var(--bc) 18%, #fff); color: #222;
}
.sc-mi b { font-weight: 700; }
.sc-mi.is-cancel { opacity: .45; text-decoration: line-through; }
.sc-mi--off { color: #555; font-weight: 700; background: repeating-linear-gradient(-45deg, #EDEDED 0 5px, #F7F7F7 5px 10px); }
.sc-mc__more { font-size: .66rem; color: #777; padding: 0 3px; }

/* ---- Плаващи кръгчета ---- */
.sc-fabs {
    position: absolute; right: 14px; bottom: 16px; z-index: 20;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    pointer-events: none;
}
.sc-fab {
    pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; cursor: pointer; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
    transition: transform .12s;
}
.sc-fab[hidden] { display: none; }
.sc-fab:active { transform: scale(.93); }
.sc-fab--add { background: var(--sc-accent); color: #fff; }
.sc-fab--who { background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--c, var(--sc-accent)), 0 4px 14px rgba(0,0,0,.3); }
.sc-fab--who .sc-av { width: 100% !important; height: 100% !important; }
.sc-fab__all { color: var(--sc-accent-deep); display: grid; place-items: center; }
.sc-fab__all svg { width: 24px; height: 24px; }
.sc-fab--add svg { width: 24px; height: 24px; }

.sc-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; }
.sc-av--i { color: #fff; font-weight: 700; }
.sc-av--all { width: 44px; height: 44px; background: #E8F4F5; color: var(--sc-accent-deep); }
.sc-av--all svg { width: 26px; height: 26px; }

/* ---- Долен лист: избор на специалист ---- */
.sc-sheet { position: absolute; inset: 0; z-index: 40; }
.sc-sheet[hidden] { display: none; }
.sc-sh__back { position: absolute; inset: 0; background: rgba(0,0,0,.35); animation: calFadeIn .18s; }
.sc-sh__panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 80%; overflow-y: auto;
    background: #fff; border-radius: 18px 18px 0 0; padding: .4rem 0 1rem;
    animation: scUp .24s var(--ease-out);
}
@keyframes scUp { from { transform: translateY(100%); } to { transform: none; } }
.sc-sh__grab { width: 40px; height: 4px; border-radius: 2px; background: #DDD; margin: .3rem auto .6rem; }
.sc-sh__title { font-size: .85rem; font-weight: 600; color: #888; padding: 0 1.2rem .5rem; }
.sc-sh__row {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    border: 0; background: none; cursor: pointer; font: inherit; font-size: 1rem; color: #333;
    padding: .6rem 1.2rem; text-align: left;
}
.sc-sh__row span:not(.sc-av) { flex: 1; }
.sc-sh__row:active, .sc-sh__row:hover { background: #F5F5F5; }
.sc-sh__row.is-on { color: var(--sc-accent-deep); font-weight: 600; }

.sc-loading { position: absolute; inset: 60px 0 0; z-index: 25; display: grid; place-items: center; background: rgba(255,255,255,.6); }
.sc-loading[hidden] { display: none; }


/* Обобщение на резервацията — чисти редове с разделители */
.bk-sum { display: flex; flex-direction: column; }
.bk-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.bk-sum__row:last-child { border-bottom: 0; }
.bk-sum__lb { color: var(--muted); font-size: .85rem; flex: none; }
.bk-sum__val { text-align: right; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bk-sum__val:empty::before { content: "—"; color: var(--muted); }
.bk-sum__row--total { border-top: 1px dashed var(--rose); border-bottom: 0; margin-top: .5rem; padding-top: 1rem; }
.bk-sum__row--total .bk-sum__lb { color: var(--ink); font-weight: 600; font-size: .95rem; }
.bk-sum__row--total .price { font-size: 1.7rem; }
.bk-find { white-space: normal !important; width: 100% !important; max-width: 100%; text-align: center; line-height: 1.4; box-sizing: border-box; }

/* 12. FOOTER — тъмна, редакторска лента ------------------------------- */
.footer { background: var(--ink); color: #D8D2CB; padding-top: clamp(60px, 8vw, 110px); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 3rem; }
.footer .brand, .footer .brand span { color: #F5F1EB; }
.footer h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #A79A8C; margin-bottom: 1.2rem; }
.footer__links a { display: block; color: #D8D2CB; font-size: .92rem; padding: .3rem 0; transition: color .2s, transform .2s var(--ease-out); }
.footer__links a:hover { color: var(--gold); transform: translateX(4px); }
.footer__about p { color: #B7AFA3; max-width: 320px; margin-top: 1rem; font-size: .95rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.6rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; color: #A79A8C; font-size: .85rem; }
.footer__bottom .heart-mark { color: var(--gold); vertical-align: -3px; }
.footer .social-btn { background: transparent; border-color: rgba(255,255,255,.18); color: #D8D2CB; }
.footer .social-btn:hover { background: var(--gold); color: var(--ink); border-color: transparent; box-shadow: none; }
.footer .hint { color: #B7AFA3; }

/* 12b. ICON SYSTEM ------------------------------------------------------ */
.icon { display: inline-block; flex: none; }

/* 12d. BENTO GRID — разчупени карти с различни размери ----------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 22px; }
.bento-tile {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-sm); border: 1px solid var(--line);
    transition: box-shadow .5s var(--ease-out);
}
.bento-tile:hover { box-shadow: var(--sh-lg); }
.bento-tile--a { grid-column: span 2; grid-row: span 2; }
.bento-tile--b { grid-column: span 2; grid-row: span 1; }
.bento-tile--c { grid-column: span 1; grid-row: span 1; }
.bento-tile--d { grid-column: span 1; grid-row: span 1; }

.bento-tile__photo { position: absolute; inset: 0; }
.bento-tile__body {
    position: relative; z-index: 1; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem; color: #fff;
}
.bento-tile__body .service-card__icon { background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; box-shadow: none; }
.bento-tile__body h3 { color: #fff; }
.bento-tile__body p { color: rgba(255,255,255,.82); font-size: .9rem; margin-top: .3rem; max-width: 34ch; }
.bento-tile__meta { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.bento-tile__meta .pill { background: rgba(255,255,255,.2); color: #fff; }
.bento-tile__meta a { color: #fff; font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: .3rem; transition: gap .25s var(--ease-out); }
.bento-tile__meta a:hover { gap: .55rem; }
.bento-tile--c .bento-tile__body p, .bento-tile--d .bento-tile__body p { display: none; }
/* ниската широка карта няма място за икона — иначе се реже отгоре */
.bento-tile--b .bento-tile__body .service-card__icon { display: none; }

/* Градиент върху снимката: горе снимката се вижда, долу (където е текстът) е тъмно,
   за да се чете белият текст. opacity: 1 — иначе наследява .55 от .ph::after и избледнява. */
.bento-tile__photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1;
    background: linear-gradient(180deg, rgba(15,10,9,.18) 0%, rgba(15,10,9,.38) 38%, rgba(15,10,9,.82) 68%, rgba(15,10,9,.94) 100%);
}
.bento-tile__body h3 { text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.bento-tile__body p  { color: rgba(255,255,255,.93); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.bento-tile__meta .pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bento-tile__meta a, .bento-tile__meta .pill { text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Tilt-on-hover 3D (JS добавя --rx/--ry чрез pointermove) */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .25s var(--ease-out); will-change: transform; }

/* 12e. MARQUEE — безкрайна лента с ключови думи -------------------------- */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--ivory); }
.marquee__track { display: flex; width: max-content; gap: 3rem; padding: 1.1rem 0; animation: marquee 32s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); white-space: nowrap; }
.marquee__track span .icon { color: var(--gold); width: 16px; height: 16px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* 12f. GALLERY — асиметрична мозайка от снимки, подредена в грид -------------------- */
.gallery {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: 240px 240px;
    gap: 20px;
}
.gallery__item {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--sh-sm); border: 1px solid var(--line);
    transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.gallery__item .ph { width: 100%; height: 100%; }
.gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; }
.gallery__item:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
/* Леко разместени и завъртени — не са в перфектна редица, но мозайката си остава подредена */
@media (min-width: 981px) {
    .gallery__item:nth-child(1) { transform: rotate(-.5deg); }
    .gallery__item:nth-child(2) { transform: rotate(.9deg); }
    .gallery__item:nth-child(3) { transform: rotate(-.8deg); }
    .gallery__item:nth-child(4) { transform: rotate(.4deg); }
}
.gallery__item:hover { box-shadow: var(--sh-md); transform: translateY(-4px) rotate(0deg); z-index: 2; }

/* 12g. TESTIMONIALS — офсетнати цитати ------------------------------------ */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testimonial { background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.9rem; box-shadow: var(--sh-sm); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
@media (min-width: 981px) {
    .testimonial:nth-child(1) { transform: rotate(-.6deg); }
    .testimonial:nth-child(2) { transform: translateY(22px) rotate(.3deg); }
    .testimonial:nth-child(3) { transform: rotate(.9deg); }
    .testimonial:nth-child(1):hover { transform: rotate(-.6deg) translateY(-4px); }
    .testimonial:nth-child(2):hover { transform: translateY(16px) rotate(.3deg); }
    .testimonial:nth-child(3):hover { transform: rotate(.9deg) translateY(-4px); }
}
.testimonial__stars { display: flex; gap: .2rem; color: var(--gold); margin-bottom: 1rem; }
.testimonial__stars .icon { width: 16px; height: 16px; fill: var(--gold); }
.testimonial p { color: var(--ink-soft); font-size: 1rem; }
.testimonial__who { margin-top: 1.3rem; display: flex; align-items: center; gap: .8rem; }
.testimonial__who .ph { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.testimonial__who b { display: block; font-size: .92rem; }
.testimonial__who span { color: var(--muted); font-size: .8rem; }

/* 12h. STAT COUNTERS ------------------------------------------------------ */
[data-count] { font-variant-numeric: tabular-nums; }

/* 12i. PARALLAX BAND — кинематографичен цитат на цяла ширина ------------- */
.parallax-band {
    position: relative; min-height: 56vh; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; gap: 1.6rem; text-align: center;
    padding: 6rem 24px 4rem; overflow: hidden; color: #fff;
    background: var(--grad-rose);
    content-visibility: auto; contain-intrinsic-size: 600px;
}
.parallax-band__video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 60%; /* фокус върху маникюра (действието е в долната част на кадъра) */
    transform: translateZ(0); backface-visibility: hidden;
}
.parallax-band::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(rgba(40, 28, 32, .55), rgba(40, 28, 32, .55));
}
.parallax-band > *:not(.parallax-band__video) { position: relative; z-index: 2; }
.parallax-band__quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.28; max-width: 780px; }
@media (max-width: 720px) {
}

/* 13. MOTION — scroll reveal ----------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .07s; }
.reveal[data-delay="2"] { transition-delay: .14s; }
.reveal[data-delay="3"] { transition-delay: .21s; }
.reveal[data-delay="4"] { transition-delay: .28s; }

/* Посочни варианти — задействат се при .in (когато секцията стане видима) */
.reveal--left  { transform: translateX(-46px); }
.reveal--right { transform: translateX(46px); }
.reveal--zoom  { transform: scale(.9); }
.reveal--left.in, .reveal--right.in, .reveal--zoom.in { transform: none; }

/* Стъпаловидно появяване на дъщерните елементи, когато групата стане видима */
.reveal.reveal-stagger { opacity: 1; transform: none; }   /* самата група не се движи — движат се децата */
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; }

/* Плавно появяване за снимки/грид блокове (opacity+transform = GPU, без repaint) */
.reveal.reveal-clip { opacity: 0; transform: translateY(26px) scale(.992); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.reveal-clip.in { opacity: 1; transform: none; }

/* Hero entrance stagger */
.hero .anim { opacity: 0; transform: translateY(20px); animation: heroIn .9s var(--ease-out) forwards; }
.hero .anim:nth-child(1){animation-delay:.1s}
.hero .anim:nth-child(2){animation-delay:.2s}
.hero .anim:nth-child(3){animation-delay:.3s}
.hero .anim:nth-child(4){animation-delay:.4s}
.hero .anim:nth-child(5){animation-delay:.5s}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* 14. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 980px) {
    /* По-тясна навигация на таблет — иначе линковете + бутонът не се събират на ред */
    .nav__inner { padding-inline: 16px; gap: .4rem; }
    .brand { font-size: 1.2rem; gap: .5rem; }
    .nav__links { gap: 1rem; }
    .nav__link { font-size: .68rem; }
    #nav-auth .nav__link { display: none; }
    .nav__actions { gap: .5rem; }
    /* По-тесен таблет — показваме само аватара, без име/роля до него. */
    .nav__profile__text { display: none; }
    .nav__profile { padding: .32rem; }

    /* Таблети — по-тясно копие, стъклото стои по-широко над видеото */
    .hero__copy { max-width: 460px; }
    .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .bento-tile--a { grid-column: span 2; grid-row: span 2; }
    .bento-tile--b { grid-column: span 2; }
    .testimonials { grid-template-columns: 1fr 1fr; }
    .testimonial:nth-child(2), .testimonial:nth-child(2):hover { transform: none; }
    .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 200px; gap: 16px; }
    .gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
    .gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
    .gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; }
    .gallery__item:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
    .split { grid-template-columns: 1fr; }
    .split__art { padding: 8% 20% 12% 0; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .container { padding-inline: 18px; }
    .section { padding-block: clamp(48px, 11vw, 80px); }
    .section--tight { padding-block: clamp(36px, 8vw, 60px); }
    .section__head { margin-bottom: 2.2rem; }

    .nav__inner { padding-inline: 14px; gap: .5rem; }
    .brand { font-size: 1.15rem; gap: .65rem; white-space: nowrap; flex: none; }
    .brand__mark { width: 34px; height: 34px; }
    .nav__actions { gap: .6rem; }
    #nav-auth { gap: .6rem; }
    #nav-auth .btn--primary { display: none; }
    #nav-auth .nav__link {
        display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 1;
        margin-right: .5rem;
        padding: .85rem 1.6rem; border-radius: var(--r-pill);
        background: transparent; border: 1.5px solid var(--line);
        font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: var(--ink);
        opacity: 1; transform: none; white-space: nowrap;
        transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .2s;
    }
    #nav-auth .nav__link::before, #nav-auth .nav__link::after { content: none; display: none; }
    #nav-auth .nav__link:hover { background: var(--blush-soft); color: var(--ink) !important; border-color: var(--rose); }
    .nav__toggle { width: 34px; height: 34px; }
    /* Навигацията остава плътна бяла с тъмен текст навсякъде — статична */
    .nav__links {
        position: fixed; inset: var(--nav-h) 0 0 0; flex-direction: column; gap: 0;
        background: linear-gradient(160deg, rgba(255, 255, 255,.99), rgba(250, 248, 245,.99));
        padding: 1.6rem 24px 1.6rem; box-shadow: var(--sh-md);
        transform: translateY(-120%); transition: transform .45s var(--ease-drawer), visibility 0s linear .45s;
        visibility: hidden; pointer-events: none; align-items: stretch; overflow-y: auto; z-index: 99;
    }
    .nav__links::before {
        content: ""; position: absolute; top: 0; right: 0; width: 55%; aspect-ratio: 1/1; z-index: -1;
        background: radial-gradient(circle at 100% 0%, rgba(165, 144, 121,.18) 0%, transparent 68%); pointer-events: none;
    }
    .nav__links.open { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .45s var(--ease-drawer); }
    .nav__link {
        position: relative; padding: 1.15rem .1rem; border-bottom: 1px solid var(--line);
        display: flex; align-items: baseline; gap: 1rem;
        font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; color: var(--ink);
        text-transform: none; letter-spacing: normal;
        opacity: 0; transform: translateX(-16px);
        transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .2s, padding-left .3s var(--ease-out), gap .3s var(--ease-out);
    }
    .nav__link::after { content: "→"; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); color: var(--rose-deep); font-size: 1.1rem; position: static; width: auto; height: auto; background: none; }
    .nav__link:hover, .nav__link:active { color: var(--rose-deep); gap: 1.3rem; }
    .nav__link:hover::after, .nav__link:active::after { opacity: 1; transform: none; }
    .nav__link.active { color: var(--rose-deep); }
    .nav__link.active::before { color: var(--rose-deep); }
    .nav__links.open .nav__link { opacity: 1; transform: none; }
    .nav__links.open .nav__link:nth-child(1) { transition-delay: .08s; }
    .nav__links.open .nav__link:nth-child(2) { transition-delay: .14s; }
    .nav__links.open .nav__link:nth-child(3) { transition-delay: .2s; }
    .nav__links.open .nav__link:nth-child(4) { transition-delay: .26s; }
    .nav__links.open .nav__link:nth-child(5) { transition-delay: .32s; }
    .nav__links.open .nav__link:nth-child(6) { transition-delay: .38s; }
    .nav__links.open .nav__link:nth-child(7) { transition-delay: .44s; }
    .nav__toggle { display: block; }
    .nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
    .nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav__actions .btn--ghost { display: none; }

    /* Hero на телефон — компактно, с максимален въздух: видеото се вижда, съдържанието е сведено до минимум */
    .hero__scrim {
        background:
            linear-gradient(180deg, rgba(15,11,9,.1) 0%, rgba(15,11,9,.46) 52%, rgba(15,11,9,.94) 100%),
            linear-gradient(100deg, rgba(15,11,9,.5) 0%, rgba(15,11,9,.12) 70%);
    }
    /* Героят остава закотвен долу — както на iPhone SE. На по-високи телефони съдържанието
       самото леко нараства (шрифт и разстояния), за да запълни въздуха с наличното, вместо да го центрира. */
    .hero__content { align-items: flex-end; padding-bottom: clamp(44px, 9svh, 88px); }
    .hero__inner { padding-inline: 0; }
    .hero__copy { max-width: none; padding: 0 clamp(1.9rem, 8vw, 2.4rem); }
    .hero__title {
        margin-top: 0; line-height: 1.18; letter-spacing: .002em;
        font-size: clamp(1.7rem, calc(7vw + (100svh - 667px) * .015), 2.4rem);
    }
    .hero__title .accent, .hero__title.is-typing .tw-accent { font-style: normal; font-weight: 600; }
    .hero__lead { display: none; }
    .hero__cta {
        flex-direction: column; align-items: stretch; gap: 0;
        margin-top: calc(2.4rem + (100svh - 667px) * .05);
    }
    .hero__cta .btn--primary {
        width: 100%; padding: .8rem 1.3rem; font-size: .68rem;
    }
    .hero__cta .btn--primary .btn__arrow { width: 1.5em; height: 1.5em; }
    .hero__cta .btn--outline-light {
        margin-top: .35rem; padding: .5rem 0; justify-content: center;
        background: none; box-shadow: none; color: rgba(255,255,255,.78);
        font-size: .64rem; font-weight: 600; letter-spacing: .08em;
    }
    .hero__cta .btn--outline-light .btn__arrow { background: none; width: auto; height: auto; }
    .hero__cta .btn--outline-light:hover { background: none; color: #fff; }
    /* Статистиката е тих, компактен ред, не блокове — оставя героя да диша */
    /* Статистиката — пак на един ред: три равни колони с наклонени линии между тях. */
    .hero__stats {
        margin-top: calc(1rem + (100svh - 667px) * .025); padding-top: calc(.9rem + (100svh - 667px) * .02);
        grid-template-columns: repeat(3, 1fr);
    }
    .hero__stat { padding: .1rem .7rem 0 1rem; gap: .3rem; }
    .hero__stat:first-child { padding-left: 0; }
    .hero__stat strong { font-size: 1.7rem; }
    .hero__stat span { font-size: .52rem; letter-spacing: .1em; }
    .hero__scrollcue { display: none; }

    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .split__art { padding: 6% 12% 10% 0; }

    /* Резервация — една колона, обобщението слиза под стъпките, не sticky/стеснено */
    .booking-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 1.6rem; }
    .booking-panel-summary { position: static; }
    /* Стъпките — един ред: само номера, а текст има само активната */
    .steps--booking { flex-wrap: nowrap; gap: .5rem; }
    .steps--booking .step:not(.active) { font-size: 0; gap: 0; }
    .booking-panel-main { padding: 1.3rem 1.1rem; }
    .booking-grid.is-picking .booking-panel-main { padding: 0; }
    .steps--booking { justify-content: flex-start; gap: .7rem 1.1rem; }
    .steps--booking .step { font-size: .82rem; gap: .4rem; }
    .steps--booking .step__num { width: 26px; height: 26px; font-size: .76rem; }

    /* Малки карти (без снимка) — компактна мрежа 2 в ред, без скрол */
    .cards--4, .steps-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cards--4 .card, .steps-grid .step-tile { padding: 1.3rem; }
    .step-tile__num { font-size: 2.2rem; }
    .steps-grid > .step-tile:last-child { grid-column: 1 / -1; }

    /* Големи снимкови карти — хоризонтален скрол само за тях, ограничен в контейнера */
    .cards--3, .bento {
        display: flex; flex-wrap: nowrap; grid-template-columns: none; columns: unset;
        /* overflow-y: hidden (а не visible): иначе браузърът го прави auto и каруселът
           става и вертикално скролваем — „засича" скрола на страницата нагоре/надолу. */
        gap: 14px; overflow-x: auto; overflow-y: hidden; max-width: 100%;
        overscroll-behavior-x: contain; touch-action: pan-x pan-y;
        scroll-snap-type: x mandatory; scroll-padding-inline: 18px;
        padding-bottom: 10px; scrollbar-width: none;
    }
    .cards--3::-webkit-scrollbar, .bento::-webkit-scrollbar { display: none; }

    .cards--3 > * { flex: 0 0 66%; min-width: 0; scroll-snap-align: start; }

    .bento-tile { flex: 0 0 66%; min-width: 0; grid-column: auto; grid-row: auto; aspect-ratio: 4/5; scroll-snap-align: start; }
    .bento-tile--c .bento-tile__body p, .bento-tile--d .bento-tile__body p { display: block; }
    /* на телефон: по-широка карта и без декоративната икона — текстът диша и снимката се вижда */
    .bento-tile { flex-basis: 80%; }
    .bento-tile__body { padding: 1.3rem 1.25rem 1.2rem; }
    .bento-tile__body .service-card__icon { display: none; }
    .bento-tile__body h3 { font-size: 1.7rem; line-height: 1.1; }
    .bento-tile__body p { font-size: .88rem; line-height: 1.5; margin-top: .4rem; }
    .bento-tile__meta { margin-top: .9rem; }

    /* Галерия — статична мрежа 2 в ред, изцяло видима без скрол */
    .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 12px; }
    .gallery__item { grid-column: auto !important; grid-row: auto !important; transform: none !important; }
    .gallery__item .ph { aspect-ratio: 1/1; height: auto; }

    /* Отзиви — текстови карти, подредени нормално една под друга */
    .testimonials { grid-template-columns: 1fr; }
    .testimonial:nth-child(2), .testimonial:nth-child(2):hover { transform: none; }
}
@media (max-width: 420px) {
    .container { padding-inline: 14px; }
    .cards--3, .bento { scroll-padding-inline: 14px; }
    .cards--4 { grid-template-columns: 1fr; }
    /* Стъпките и галерията остават 2 в ред и на телефон (по-компактно) */
    .steps-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .steps-grid .step-tile { padding: 1.1rem; }
    .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* 15. ACCESSIBILITY --------------------------------------------------- */
/* Hover ефекти само на реални hover устройства */
@media (hover: none) {
    .card:hover { transform: none; }
    .team-card__socials { opacity: 1; transform: none; }
    .gallery__item:hover { transform: none; }
}
/* По-малко движение при предпочитание за reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
    .reveal, .reveal.reveal-clip, .reveal-stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .marquee__track { animation: none; }
    [data-tilt] { transform: none !important; }
    .wd__inner { transform: none !important; }
    .hero__scrollcue span { animation: none !important; }
}

/* Focus видимост */
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* 16. COOKIE BANNER ----------------------------------------------------- */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
    max-width: 720px; margin-inline: auto;
    background: var(--ink); color: var(--ivory);
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
    padding: 1.1rem 1.3rem;
    opacity: 0; transform: translateY(16px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.cookie-banner--show { opacity: 1; transform: translateY(0); }
.cookie-banner__inner { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cookie-banner__text { margin: 0; font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.88); flex: 1 1 320px; }
.cookie-banner__text a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { flex: none; }
.cookie-banner .btn--primary { background: var(--gold); color: var(--ink); }
.cookie-banner .btn--primary:hover { background: var(--gold-soft); }
@media (max-width: 560px) {
    .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 1rem; }
    .cookie-banner__inner { gap: .8rem; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { width: 100%; }
}

/* "Защо нас" на телефон — по-малки листчета, редуват се вляво/вдясно
   и леко се застъпват по диагонал; иконата до заглавието, текстът под тях. */
@media (max-width: 560px) {
    .feature-grid { display: flex; flex-direction: column; gap: 0; padding-top: 12px; }
    .feature-grid > .card {
        position: relative; width: 82%;
        display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: .55rem; align-items: center;
        padding: 1.55rem 1.1rem 1.2rem;
    }
    .feature-grid > .card:nth-child(odd)  { align-self: flex-start; }
    .feature-grid > .card:nth-child(even) { align-self: flex-end; }
    .feature-grid > .card:nth-child(1) { rotate: -2.4deg; z-index: 1; margin-top: 0; }
    .feature-grid > .card:nth-child(2) { rotate: 2deg;    z-index: 2; margin-top: -12px; }
    .feature-grid > .card:nth-child(3) { rotate: -1.8deg; z-index: 3; margin-top: -12px; }
    .feature-grid > .card:nth-child(4) { rotate: 2.4deg;  z-index: 4; margin-top: -12px; }
    .feature-grid > .card .service-card__icon {
        width: 44px; height: 44px; margin: 0; border-radius: 50%;
    }
    .feature-grid > .card .service-card__icon svg { width: 20px; height: 20px; }
    .feature-grid > .card h3 {
        min-height: 0; margin: 0;
        font-size: 1.08rem; font-weight: 600; line-height: 1.25; color: var(--ink);
    }
    .feature-grid > .card p {
        grid-column: 1 / -1;
        font-size: .9rem; line-height: 1.55; color: var(--ink-soft);
        font-feature-settings: "locl" 0;   /* стандартни кирилски букви — четат се по-лесно */
    }
}

/* Прозорче за потвърждение (изход от профила и др.) ------------------ */
.bh-confirm {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center; padding: 16px;
    background: rgba(34, 31, 28, .45);
    backdrop-filter: blur(3px);
    animation: bhFade .15s ease-out;
}
.bh-confirm__box {
    width: 100%; max-width: 380px;
    background: var(--ivory); border: 1px solid var(--line); border-radius: 16px;
    padding: 1.6rem 1.5rem 1.3rem;
    box-shadow: 0 20px 50px rgba(34, 31, 28, .18);
    animation: bhPop .18s ease-out;
}
.bh-confirm__title { margin: 0 0 .4rem; font-size: 1.25rem; color: var(--ink); }
.bh-confirm__text  { margin: 0 0 1.3rem; color: var(--ink-soft); }
.bh-confirm__actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
@keyframes bhFade { from { opacity: 0; } }
@keyframes bhPop  { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .bh-confirm, .bh-confirm__box { animation: none; } }

/* Моят акаунт: данните се показват като текст, моливчето отваря редакцията */
.acc-sec { display: grid; gap: .9rem; }
.acc-sec--line { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.acc-title { font-weight: 700; font-size: .88rem; color: var(--ink); }
.acc-edit {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; background: var(--ivory);
    color: var(--ink-soft); cursor: pointer;
    transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.acc-edit:hover, .acc-edit:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.acc-edit[hidden] { display: none; }
.acc-view { margin: 0; display: grid; gap: .85rem; }
.acc-view[hidden] { display: none; }
.acc-view dt { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; margin-bottom: .15rem; }
.acc-view dd { margin: 0; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.acc-form { display: grid; gap: .8rem; }
.acc-form[hidden] { display: none; }
.acc-form .field { margin: 0; }
.acc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.acc-msg:empty, .pwd-msg:empty { display: none; }

/* Око в полетата за парола */
.pwd-wrap { position: relative; display: block; }
.pwd-wrap .input { padding-right: 3rem; }
.pwd-eye {
    position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
    transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.pwd-eye:hover, .pwd-eye:focus-visible { color: var(--ink); background: rgba(0,0,0,.05); }
.pwd-eye[aria-pressed="true"] { color: var(--ink); }
.pwd-wrap input::-ms-reveal, .pwd-wrap input::-ms-clear { display: none; }   /* Edge си има свое око -> да не са две */

/* =====================================================================
   16. КУРСОВЕ — карти, страница „Курсове", страница на курс, форма
   Класовете са с префикс .crs- (виж js/courses.js).
   ===================================================================== */

/* ---- Общи ---- */
.crs-eyebrow {
    display: inline-flex; align-items: center; gap: .7rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--rose);
}
.crs-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--gold); }
.crs-head { margin-bottom: 2rem; }
.crs-head h2 { margin: .7rem 0 0; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; }
.crs-head.center { text-align: center; }
.crs-head.center .crs-eyebrow { justify-content: center; }
.crs-head.center .crs-eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: var(--gold); }
.crs-head p { margin-top: .9rem; color: var(--ink-soft); max-width: 560px; }
.crs-head.center p { margin-inline: auto; }
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---- Чипове ---- */
.crs-chips { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.crs-chips li {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-height: 58px; padding: .6rem .5rem; border-radius: var(--r-md);
    background: var(--blush-soft); color: var(--rose-deep);
    font-size: .72rem; font-weight: 600; text-align: center; line-height: 1.25;
}
.crs-chips--plain { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.crs-chips--plain li { flex-direction: row; min-height: 0; padding: 0; background: none; font-size: .82rem; color: var(--ink-soft); }
.crs-chips--plain li .ic { color: var(--rose); }

/* ---- Карта на курс ---- */
.crs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.crs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.crs-card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--ivory); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: opacity .7s var(--ease-out), transform .6s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
}
.crs-card__media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--blush-soft); }
.crs-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.crs-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,31,28,.18), rgba(34,31,28,0) 30%); pointer-events: none; }
.crs-card__level {
    position: absolute; top: 14px; right: 14px; z-index: 1;
    padding: .42rem .95rem; border-radius: var(--r-pill);
    background: rgba(250, 248, 245, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-family: var(--font-display); font-size: .88rem; color: var(--ink);
}
.crs-card__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.5rem 1.4rem; flex: 1; }
.crs-card__title { margin: 0; font-size: 1.38rem; line-height: 1.22; }
.crs-card__title a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.crs-card__text {
    color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin: -.3rem 0 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.crs-card__price {
    margin-top: auto; display: flex; justify-content: center; align-items: center;
    padding: .7rem 1rem; border-radius: var(--r-pill);
    background: var(--grad-rose); color: #fff;
    font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
}
.crs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .95rem; border-top: 1px solid var(--line); }
.crs-more {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.crs-more .ic { transition: transform .35s var(--ease-out); }
.crs-card__cta { --pad-y: .8rem; --pad-x: 1.3rem; }
@media (hover: hover) {
    .crs-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--gold-soft); }
    .crs-card:hover .crs-card__media img { transform: scale(1.07); }
    .crs-card:hover .crs-card__title a { background-size: 100% 1px; }
    .crs-more:hover .ic { transform: translateX(4px); }
}

/* ---- Hero (страница на курс + страница „Курсове") ---- */
.crs-hero { padding: calc(var(--nav-h) + 28px) 0 0; }
.crs-hero__panel {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 72px);
    padding: clamp(36px, 5.5vw, 76px);
    border-radius: 28px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
        linear-gradient(160deg, #EFE9E1 0%, #E6DDD2 100%);
    border: 1px solid rgba(165, 144, 121, .18);
}
.crs-back {
    display: flex; width: max-content; align-items: center; gap: .45rem; margin-bottom: 1.6rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-deep);
}
.crs-back .ic { transform: rotate(180deg); transition: transform .35s var(--ease-out); }
.crs-back:hover .ic { transform: rotate(180deg) translateX(4px); }
.crs-hero__copy { position: relative; z-index: 1; }
.crs-hero__title {
    margin: 1.1rem 0 1.2rem; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.04;
    letter-spacing: -.015em; text-wrap: balance;
}
.crs-hero__title em { font-style: italic; color: var(--rose-deep); }
.crs-hero__lead { color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.7; max-width: 520px; }
.crs-hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.1rem 1.8rem; margin: 2rem 0 1.8rem; }
.crs-hero__price { display: flex; flex-direction: column; line-height: 1; padding-left: 1.6rem; border-left: 1px solid rgba(125,107,95,.3); }
.crs-hero__price small { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.crs-hero__price strong { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink); }
.crs-hero__visual { position: relative; justify-self: center; width: min(100%, 420px); }
.crs-hero__arch {
    position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 999px 999px 22px 22px;
    box-shadow: 0 30px 60px -20px rgba(60, 40, 30, .35);
}
.crs-hero__arch img { width: 100%; height: 100%; object-fit: cover; animation: crsKen 14s var(--ease-out) both; }
.crs-hero__ring {
    position: absolute; inset: -9% -12% auto auto; width: 78%; aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(165, 144, 121, .45); pointer-events: none;
    animation: crsSpin 40s linear infinite;
}
.crs-hero__ring::after { content: ""; position: absolute; top: 12%; left: 12%; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.crs-float {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.05rem .7rem .7rem; border-radius: 16px;
    background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(60, 40, 30, .16); border: 1px solid rgba(255,255,255,.8);
    animation: crsFloat 6s ease-in-out infinite;
}
.crs-float--trainer { left: -14%; bottom: 12%; }
.crs-float--trainer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; }
.crs-float--trainer b { display: block; font-size: .86rem; color: var(--ink); }
.crs-float--trainer span { font-size: .72rem; color: var(--muted); }
.crs-float--doc { right: -8%; top: 14%; padding: .65rem 1rem; gap: .5rem; font-size: .78rem; font-weight: 700; color: var(--rose-deep); animation-delay: -3s; }

/* влизане на hero-то */
.crs-hero .anim { opacity: 0; transform: translateY(18px); animation: crsIn .9s var(--ease-out) forwards; }
.crs-hero .anim:nth-child(1) { animation-delay: .05s; }
.crs-hero .anim:nth-child(2) { animation-delay: .12s; }
.crs-hero .anim:nth-child(3) { animation-delay: .19s; }
.crs-hero .anim:nth-child(4) { animation-delay: .26s; }
.crs-hero .anim:nth-child(5) { animation-delay: .33s; }
.crs-hero .anim:nth-child(6) { animation-delay: .4s; }
.crs-hero__visual { animation: crsVisual 1.2s var(--ease-out) .15s both; }
@keyframes crsIn { to { opacity: 1; transform: none; } }
@keyframes crsVisual { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes crsKen { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes crsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes crsSpin { to { transform: rotate(360deg); } }

/* ---- Инфо карти (Цел / Формат / За кого) ---- */
.crs-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.crs-info__card {
    position: relative; padding: 2rem 1.8rem 1.9rem; border-radius: 20px;
    background: var(--ivory); border: 1px solid var(--line);
    transition: opacity .7s var(--ease-out), transform .6s var(--ease-out), box-shadow .5s;
}
.crs-info__ic {
    display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.3rem;
    border-radius: 16px; background: var(--grad-warm); color: var(--ink);
}
.crs-info__card h3 { font-size: 1.3rem; margin: 0 0 .55rem; }
.crs-info__card p { color: var(--ink-soft); font-size: .94rem; line-height: 1.65; }
@media (hover: hover) { .crs-info__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } }

/* ---- CTA лента ---- */
.crs-band { padding: 0 0 clamp(56px, 7vw, 96px); }
.crs-band__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: clamp(28px, 4vw, 44px) clamp(28px, 4.5vw, 56px); border-radius: 24px;
    background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.crs-band__inner::before {
    content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(196,169,138,.35), rgba(196,169,138,0));
}
.crs-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 .4rem; }
.crs-band p { color: rgba(255,255,255,.72); }
.crs-band__actions { display: flex; align-items: center; gap: 1.4rem; flex: none; position: relative; }
.crs-band .btn--primary { background: var(--ivory); color: var(--ink); }
.crs-band .btn--primary:hover { background: var(--gold-soft); }
.crs-band .btn--primary .btn__arrow { background: rgba(34,31,28,.1); }
.crs-band__phone { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; white-space: nowrap; }

/* ---- Програма ---- */
.crs-program { background: var(--ivory); }
.crs-program__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.crs-trainer { position: sticky; top: calc(var(--nav-h) + 24px); }
.crs-trainer__photo { margin: 0; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; box-shadow: var(--sh-lg); }
.crs-trainer__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.crs-trainer__card {
    position: relative; margin: -64px 18px 0; padding: 1.4rem 1.5rem; border-radius: 18px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--sh-md); border: 1px solid var(--line);
}
.crs-trainer__card h3 { margin: .6rem 0 .15rem; font-size: 1.45rem; }
.crs-trainer__role { font-size: .8rem; color: var(--rose); font-weight: 600; margin-bottom: .7rem; }
.crs-trainer__card p:last-child { font-size: .9rem; color: var(--ink-soft); line-height: 1.65; }
.crs-modules { list-style: none; position: relative; }
.crs-modules::before {
    content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 1px;
    background: linear-gradient(var(--gold-soft), var(--line));
}
.crs-module { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.4rem; padding-bottom: 2.4rem; }
.crs-module:last-child { padding-bottom: 0; }
.crs-module__num {
    position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--ivory); border: 1px solid var(--gold-soft);
    font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--rose-deep);
    transition: background .5s var(--ease-out), color .5s var(--ease-out), border-color .5s;
}
.crs-module.in .crs-module__num { background: var(--grad-rose); color: #fff; border-color: transparent; transition-delay: .25s; }
.crs-module__body { padding: .2rem 0 0; }
.crs-module__body h3 { margin: 0; font-size: 1.55rem; }
.crs-module__sub { color: var(--rose); font-size: .86rem; font-weight: 600; margin: .3rem 0 1rem; }
.crs-module__body ul, .crs-outcomes ul { list-style: none; display: grid; gap: .6rem; }
.crs-module__body li, .crs-outcomes li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.crs-module__body li .ic, .crs-outcomes li .ic {
    width: 22px; height: 22px; margin-top: .05rem; border-radius: 50%; background: var(--blush-soft); color: var(--rose-deep);
}

/* ---- За кого + FAQ ---- */
.crs-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.crs-who { display: grid; gap: .7rem; }
.crs-who__item {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; align-items: baseline;
    padding: 1.05rem 1.3rem; border-radius: 14px; background: var(--ivory); border: 1px solid var(--line);
    transition: opacity .7s var(--ease-out), transform .6s var(--ease-out), border-color .4s;
}
.crs-who__item b { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; color: var(--ink); }
.crs-who__item span { color: var(--ink-soft); font-size: .92rem; }
@media (hover: hover) { .crs-who__item:hover { border-color: var(--gold-soft); } }
.crs-outcomes { margin-top: 2.2rem; padding: 1.7rem 1.8rem; border-radius: 20px; background: var(--blush-soft); }
.crs-outcomes h3 { font-size: 1.3rem; margin: 0 0 1.1rem; }
.crs-outcomes li { color: var(--ink); }
.crs-outcomes li .ic { background: var(--ivory); }

.crs-faq { display: grid; gap: .7rem; }
.crs-faq__item { border-radius: 14px; background: var(--ivory); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.crs-faq__item.is-open { border-color: var(--gold-soft); box-shadow: var(--sh-md); }
.crs-faq__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.3rem; text-align: left; background: none; border: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: .98rem; color: var(--ink);
}
.crs-faq__ic { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--blush-soft); transition: background .3s, transform .4s var(--ease-out); }
.crs-faq__ic::before, .crs-faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--rose-deep); transform: translate(-50%, -50%); transition: transform .4s var(--ease-out), background .3s; }
.crs-faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.crs-faq__item.is-open .crs-faq__ic { background: var(--ink); transform: rotate(180deg); }
.crs-faq__item.is-open .crs-faq__ic::before, .crs-faq__item.is-open .crs-faq__ic::after { background: #fff; }
.crs-faq__item.is-open .crs-faq__ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.crs-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.crs-faq__a > div { overflow: hidden; }
.crs-faq__a p { padding: 0 1.3rem 1.25rem; color: var(--ink-soft); font-size: .94rem; line-height: 1.65; }
.crs-faq__item.is-open .crs-faq__a { grid-template-rows: 1fr; }

/* ---- Удостоверение ---- */
.crs-cert__card {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); align-items: center;
    padding: clamp(32px, 5vw, 60px); border-radius: 28px; background: linear-gradient(160deg, #EFE9E1, #E6DDD2);
}
.crs-cert__copy h2 { margin: .8rem 0 .9rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.crs-cert__copy p { color: var(--ink-soft); line-height: 1.7; max-width: 520px; }
.crs-cert__paper {
    position: relative; justify-self: center; width: min(100%, 300px); aspect-ratio: 1 / 1.3;
    padding: 18% 14% 12%; border-radius: 6px; background: #fff;
    box-shadow: 0 30px 60px -24px rgba(60,40,30,.4), 0 0 0 10px rgba(255,255,255,.45);
    display: flex; flex-direction: column; gap: 9%;
    transform: rotate(-3deg); transition: transform .8s var(--ease-out);
}
.crs-cert__card:hover .crs-cert__paper { transform: rotate(0deg) translateY(-6px); }
.crs-cert__paper::before { content: ""; position: absolute; inset: 7%; border: 1px solid var(--gold-soft); border-radius: 3px; }
.crs-cert__seal { position: absolute; right: 10%; bottom: 9%; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-rose); color: #fff; }
.crs-cert__line { display: block; height: 6px; border-radius: 3px; background: var(--blush); width: 100%; }
.crs-cert__line--t { height: 11px; width: 70%; align-self: center; background: var(--gold-soft); }
.crs-cert__line--s { width: 72%; }
.crs-cert__sign { display: block; width: 38%; height: 1px; background: var(--muted); margin-top: auto; }

/* ---- Галерия ---- */
.crs-gallery__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.crs-gallery__track figure { flex: 0 0 min(260px, 70%); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; scroll-snap-align: start; margin: 0; }
.crs-gallery__track img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Записване ---- */
.crs-enroll { background: linear-gradient(180deg, var(--cream), #F1ECE5); }
.crs-enroll__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.crs-enroll__form {
    padding: clamp(24px, 3.5vw, 40px); border-radius: 24px; background: var(--ivory);
    border: 1px solid var(--line); box-shadow: 0 24px 50px -28px rgba(60,40,30,.3);
}
.crs-steps { list-style: none; display: grid; gap: 1.3rem; margin: .4rem 0 2rem; position: relative; }
.crs-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; transition: opacity .7s var(--ease-out), transform .6s var(--ease-out); }
.crs-steps li > span {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--gold-soft); background: var(--ivory);
    font-family: var(--font-display); font-size: 1.1rem; color: var(--rose-deep);
}
.crs-steps b { display: block; font-size: 1rem; color: var(--ink); margin: .15rem 0 .2rem; }
.crs-steps p { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.crs-callcard {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: 18px;
    background: var(--ink); color: #fff; transition: transform .4s var(--ease-out), box-shadow .4s;
}
.crs-callcard__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); animation: courseRing 3.4s ease-in-out infinite; }
.crs-callcard small { display: block; font-size: .76rem; color: rgba(255,255,255,.65); margin-bottom: .15rem; }
.crs-callcard b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: .02em; }
@media (hover: hover) { .crs-callcard:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); } }
@keyframes courseRing {
    0%, 72%, 100% { transform: rotate(0); }
    76% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); }
    84% { transform: rotate(-9deg); } 88% { transform: rotate(6deg); } 92% { transform: rotate(0); }
}

/* ---- Формата ---- */
.crs-form { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.crs-form.is-leaving { opacity: 0; transform: translateY(8px); }
.crs-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.crs-field { display: flex; flex-direction: column; min-width: 0; }
.crs-field--full { grid-column: 1 / -1; }
.crs-field__lb { font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .45rem; }
.crs-field__lb i { font-style: normal; color: var(--rose); }
.crs-field__lb em { font-style: normal; font-weight: 400; color: var(--muted); }
.crs-field .input, .crs-field .select { padding: .85rem 1rem; }
.crs-field .select { padding-right: 2.4rem; text-overflow: ellipsis; }
.crs-field textarea.input { min-height: 96px; }
.crs-field__hint { font-size: .74rem; color: var(--muted); margin-top: .4rem; }
.crs-field__err, .crs-consent__err { font-size: .76rem; color: var(--acc-alert-deep); min-height: 0; }
.crs-field__err:not(:empty) { margin-top: .4rem; }
.crs-field.is-err .input, .crs-field.is-err .select { border-color: var(--acc-alert); box-shadow: 0 0 0 3px rgba(217,83,79,.12); }
.crs-field.is-err .crs-field__hint { display: none; }
.crs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.crs-consent { position: relative; display: flex; gap: .75rem; align-items: flex-start; font-size: .82rem; color: var(--ink-soft); line-height: 1.55; cursor: pointer; }
.crs-consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.crs-consent__box {
    width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1.5px solid var(--mauve); background: var(--ivory);
    display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s;
}
.crs-consent__box svg { transform: scale(.4); transition: transform .3s var(--ease-out); }
.crs-consent input:checked + .crs-consent__box { background: var(--ink); border-color: var(--ink); color: #fff; }
.crs-consent input:checked + .crs-consent__box svg { transform: scale(1); }
.crs-consent input:focus-visible + .crs-consent__box { box-shadow: 0 0 0 3px rgba(165,144,121,.3); }
.crs-consent.is-err .crs-consent__box { border-color: var(--acc-alert); }
.crs-consent a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 2px; }
.crs-consent__err:not(:empty) { display: block; margin: .5rem 0 0 2.2rem; }
.crs-form__submit { margin-top: 1.5rem; position: relative; }
.crs-form__submit.is-loading { opacity: .75; pointer-events: none; }
.crs-form__submit.is-loading .btn__arrow { animation: crsPulse .9s ease-in-out infinite; }
@keyframes crsPulse { 50% { transform: translateX(4px); opacity: .5; } }
.crs-form__alt { text-align: center; font-size: .86rem; color: var(--muted); margin-top: 1rem; }
.crs-form__alt a { color: var(--ink); font-weight: 700; }
.crs-form__msg:not(:empty) { margin-top: 1rem; }
.crs-form__msg a { font-weight: 700; color: inherit; }

.crs-success { text-align: center; padding: 1.5rem .5rem; animation: crsIn .6s var(--ease-out) both; opacity: 0; transform: translateY(12px); }
.crs-success__check { width: 76px; height: 76px; margin: 0 auto 1.2rem; display: block; }
.crs-success__check circle { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: crsDraw .8s var(--ease-out) .1s forwards; }
.crs-success__check path { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: crsDraw .5s var(--ease-out) .7s forwards; }
@keyframes crsDraw { to { stroke-dashoffset: 0; } }
.crs-success h3 { font-size: 1.8rem; margin: 0 0 .8rem; }
.crs-success p { color: var(--ink-soft); line-height: 1.65; max-width: 420px; margin: 0 auto; }
.crs-success__next { margin-top: 1rem !important; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.crs-success a { color: var(--ink); font-weight: 700; }

/* ---- Лента „Запиши се" (само телефон) ---- */
.crs-sticky { display: none; }
.crs-dots { display: none; }

/* ---- Страница „Курсове" ---- */
.crs-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.crs-why__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; box-shadow: var(--sh-lg); }
.crs-why__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.crs-why__photo figcaption {
    position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 1rem 1.2rem; border-radius: 16px;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.crs-why__photo figcaption b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.crs-why__photo figcaption span { font-size: .8rem; color: var(--muted); }
/* „Защо при нас" — три различни карти, разминати една спрямо друга */
.crs-feats { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.crs-feat {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 1.1rem; align-items: center;
    padding: 1.6rem 1.7rem; border-radius: 22px;
    transition: opacity .7s var(--ease-out), transform .6s var(--ease-out), box-shadow .4s;
}
.crs-feat h3 { margin: 0; font-size: 1.28rem; line-height: 1.2; position: relative; }
.crs-feat p { grid-column: 1 / -1; margin: .8rem 0 0; font-size: .94rem; line-height: 1.65; position: relative; max-width: 440px; }
.crs-feat__ic { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; }
/* 01 — тъмна, водеща */
.crs-feat--dark { background: var(--ink); color: #fff; margin-right: 12%; box-shadow: 0 24px 44px -26px rgba(34,31,28,.6); }
.crs-feat--dark h3 { color: #fff; }
.crs-feat--dark p { color: rgba(255,255,255,.72); }
.crs-feat--dark .crs-feat__ic { background: var(--gold); color: #fff; }
/* 02 — лека, със златна линия отляво, изместена надясно */
.crs-feat--line { margin-left: 12%; background: var(--ivory); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px 22px 22px 6px; }
.crs-feat--line p { color: var(--ink-soft); }
.crs-feat--line .crs-feat__ic { background: var(--blush-soft); color: var(--rose-deep); }
/* 03 — топла бежова */
.crs-feat--soft { margin-right: 6%; background: linear-gradient(150deg, #EFE8DE, #E6DDD2); }
.crs-feat--soft p { color: var(--ink-soft); }
.crs-feat--soft .crs-feat__ic { background: var(--ivory); color: var(--rose-deep); box-shadow: var(--sh-sm); }
@media (hover: hover) { .crs-feat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } }
@media (max-width: 720px) {
    .crs-feats { gap: .9rem; }
    .crs-feat { padding: 1.35rem 1.25rem; grid-template-columns: 44px minmax(0, 1fr); column-gap: .9rem; }
    .crs-feat__ic { width: 44px; height: 44px; }
    .crs-feat h3 { font-size: 1.18rem; }
    .crs-feat p { font-size: .92rem; margin-top: .7rem; }
    .crs-feat--dark { margin-right: 8%; }
    .crs-feat--line { margin-left: 8%; }
    .crs-feat--soft { margin-right: 4%; }
}

/* ---- Начална страница: секция „Курсове" ---- */
.home-courses__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; }
.home-courses__head .crs-head { margin: 0; }
.home-courses__head p { margin-top: .9rem; color: var(--ink-soft); max-width: 520px; }

/* ---- Адаптивност ---- */
@media (max-width: 1080px) {
    .crs-float--trainer { left: -6%; }
    .crs-float--doc { right: -4%; }
}
@media (max-width: 980px) {
    .crs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crs-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 14px); justify-self: center; }
    .crs-hero__panel { grid-template-columns: 1fr; }
    .crs-hero__visual { order: -1; width: min(78%, 360px); margin-top: 8px; }
    .crs-program__grid { grid-template-columns: 1fr; }
    .crs-trainer { position: static; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.2rem; align-items: center; }
    .crs-trainer__photo { border-radius: 18px; }
    .crs-trainer__card { margin: 0; box-shadow: none; background: transparent; border: 0; padding: 0; }
    .crs-fit__grid, .crs-enroll__grid, .crs-why { grid-template-columns: 1fr; }
    .crs-enroll__side { order: -1; }
    .crs-why__photo { max-width: 420px; }
}
@media (max-width: 720px) {
    .crs-hero { padding-top: calc(var(--nav-h) + 12px); }
    .crs-hero .container { padding-inline: 10px; }
    .crs-hero__panel { padding: 28px 20px 30px; border-radius: 22px; gap: 26px; }
    .crs-hero__visual { width: min(74%, 300px); }
    .crs-float--trainer { left: -10%; bottom: 8%; padding: .5rem .8rem .5rem .5rem; }
    .crs-float--trainer img { width: 36px; height: 36px; }
    .crs-float--doc { right: -10%; font-size: .72rem; }
    .crs-hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .crs-hero__cta { margin: 1.6rem 0 1.4rem; gap: 1rem 1.4rem; }
    .crs-hero__cta .btn { flex: 1 1 auto; }
    /* Курсовете на телефон: лента, която се плъзга настрани (като екипа) */
    .crs-grid, .crs-grid--2 {
        display: flex; gap: 14px; max-width: none;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: 18px;
        margin-inline: -18px; padding: 4px 18px 16px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .crs-grid::-webkit-scrollbar { display: none; }
    .crs-grid > .crs-card { flex: 0 0 84%; width: auto; scroll-snap-align: start; }
    .crs-grid > :last-child:nth-child(odd) { width: auto; }
    .crs-dots { display: flex; justify-content: center; gap: 8px; margin-top: .4rem; }
    .crs-dots button {
        width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
        background: var(--mauve); opacity: .45;
        transition: width .35s var(--ease-out), opacity .3s, background .3s;
    }
    .crs-dots button.is-on { width: 24px; opacity: 1; background: var(--rose-deep); }
    .crs-card__body { padding: 1.3rem 1.25rem 1.2rem; }
    .crs-info { grid-template-columns: 1fr; gap: 14px; }
    .crs-info__card { padding: 1.5rem 1.4rem; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 1rem; }
    .crs-info__ic { width: 48px; height: 48px; margin: 0; grid-row: span 2; }
    .crs-info__card h3 { font-size: 1.15rem; align-self: end; }
    .crs-band__inner { flex-direction: column; align-items: flex-start; border-radius: 20px; }
    .crs-band__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 1rem; }
    .crs-band__actions .btn { width: 100%; }
    .crs-band__phone { justify-content: center; }
    .crs-trainer { grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; }
    .crs-trainer__card p:last-child { display: none; }
    .crs-trainer__card h3 { font-size: 1.25rem; }
    .crs-modules::before { left: 21px; }
    .crs-module { grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; padding-bottom: 2rem; }
    .crs-module__num { width: 44px; height: 44px; font-size: 1rem; }
    .crs-module__body h3 { font-size: 1.3rem; }
    .crs-who__item { grid-template-columns: 1fr; gap: .2rem; }
    .crs-outcomes { padding: 1.4rem 1.3rem; }
    .crs-cert__card { grid-template-columns: 1fr; padding: 28px 22px 36px; }
    .crs-cert__paper { width: 200px; }
    .crs-enroll__form { padding: 22px 18px; border-radius: 20px; }
    .crs-form__grid { grid-template-columns: 1fr; }
    .crs-callcard b { font-size: 1.3rem; }
    .home-courses__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

    .crs-sticky {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 80;
        padding: .6rem .6rem .6rem 1.1rem; border-radius: 18px;
        background: rgba(34,31,28,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
        box-shadow: 0 16px 40px rgba(0,0,0,.25);
        transform: translateY(140%); transition: transform .5s var(--ease-drawer);
    }
    .crs-sticky.is-on { transform: none; }
    .crs-sticky small { display: block; font-size: .7rem; color: rgba(255,255,255,.6); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .crs-sticky b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
    .crs-sticky .btn { background: var(--ivory); color: var(--ink); --pad-y: .85rem; --pad-x: 1.3rem; }
}
/* ---- Малки телефони (≤ 400px: iPhone SE/mini, по-малки Android) ---- */
@media (max-width: 480px) {
    .crs-hero__btns { flex-direction: column; }
    .crs-hero__btns .btn { width: 100%; }
}
@media (max-width: 400px) {
    .crs-eyebrow { font-size: .64rem; letter-spacing: .16em; gap: .55rem; }
    .crs-eyebrow::before, .crs-head.center .crs-eyebrow::after { width: 1.1rem; }
    .crs-hero__panel { padding: 24px 18px 26px; }
    .crs-hero__title { font-size: clamp(1.85rem, 9.4vw, 2.2rem); }
    .crs-hero__lead { font-size: .95rem; line-height: 1.65; }
    /* цената над бутона, на един ред с етикета — без висящата черта */
    .crs-hero__cta { flex-direction: column; align-items: stretch; gap: .9rem; }
    .crs-hero__price { order: -1; flex-direction: row; align-items: baseline; gap: .7rem; padding: 0; border: 0; }
    .crs-hero__price small { margin: 0; }
    .crs-hero__price strong { font-size: 1.8rem; }
    .crs-hero__cta .btn { width: 100%; }
    .crs-float--trainer { left: -6%; }
    .crs-float--trainer b { font-size: .8rem; }
    .crs-float--doc { right: -6%; padding: .5rem .75rem; }

    /* карта на курс: чиповете стават списък, бутонът — на цяла ширина */
    .crs-card__body { padding: 1.2rem 1.1rem 1.15rem; gap: .9rem; }
    .crs-card__title { font-size: 1.25rem; }
    .crs-card__price { font-size: 1.4rem; padding: .62rem 1rem; }
    .crs-card .crs-chips { grid-template-columns: 1fr; gap: .35rem; }
    .crs-card .crs-chips li { flex-direction: row; justify-content: flex-start; min-height: 0; padding: .55rem .8rem; gap: .55rem; font-size: .76rem; text-align: left; }
    .crs-card__foot { flex-direction: column-reverse; align-items: stretch; gap: .75rem; }
    .crs-card__cta { width: 100%; --pad-y: .95rem; }
    .crs-more { justify-content: center; }

    .crs-trainer { grid-template-columns: 96px minmax(0, 1fr); }
    .crs-trainer__role { font-size: .74rem; }
    .crs-head h2 { font-size: clamp(1.65rem, 8.2vw, 1.95rem); }
    .crs-info__card { padding: 1.3rem 1.15rem; column-gap: .85rem; grid-template-columns: 42px minmax(0, 1fr); }
    .crs-info__ic { width: 42px; height: 42px; border-radius: 13px; }
    .crs-band__inner { padding: 26px 20px; }
    .crs-module__body li, .crs-outcomes li { font-size: .9rem; }
    .crs-faq__q { padding: 1rem 1.05rem; font-size: .93rem; }
    .crs-faq__a p { padding: 0 1.05rem 1.1rem; }
    .crs-enroll__form { padding: 20px 16px; }
    .crs-callcard { padding: 1rem 1.1rem; }
    .crs-callcard b { font-size: 1.2rem; }
    .crs-sticky { padding-left: .95rem; }
    .crs-sticky small { max-width: 40vw; }
}
.crs-form__alt a, .crs-band__phone, .crs-callcard b { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .crs-hero .anim, .crs-hero__visual, .crs-success { animation: none; opacity: 1; transform: none; }
    .crs-hero__arch img, .crs-hero__ring, .crs-float, .crs-callcard__ic { animation: none; }
    .crs-card, .crs-card__media img, .crs-faq__a { transition: none; }
}

/* ---- Табло: раздел „Курсове" (само шефът) ---- */
.ce-kpis { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.ce-courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.ce-course {
    display: flex; flex-direction: column; gap: .5rem; text-align: left; cursor: pointer; font: inherit;
    padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1.5px solid transparent;
    box-shadow: var(--sh-sm); transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s, background .2s;
}
.ce-course:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.ce-course.is-on { border-color: var(--acc-crs); }
.ce-course__title { font-family: var(--font-dash); font-weight: 700; font-size: .88rem; color: var(--ink); line-height: 1.3; }
.ce-course__num { font-family: var(--font-dash); font-weight: 800; font-size: 2rem; color: var(--acc-crs-deep); line-height: 1; display: flex; align-items: baseline; gap: .35rem; }
.ce-course__num small { font-size: .74rem; font-weight: 600; color: var(--muted); }
.ce-course__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ce-muted { font-style: normal; font-size: .74rem; color: var(--muted); }
.ce-st { font-style: normal; display: inline-flex; align-items: center; border-radius: 999px; padding: .2rem .55rem; font-size: .7rem; font-weight: 700; }
.ce-st--new { background: var(--acc-alert-soft); color: var(--acc-alert-deep); }
.ce-st--contacted { background: var(--acc-stats-soft); color: var(--acc-stats-deep); }
.ce-st--enrolled { background: var(--acc-cal-soft); color: var(--acc-cal-deep); }
.ce-st--cancelled { background: #EEEAE5; color: var(--muted); }
.ce-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.ce-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.ce-chip {
    font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
    padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
    transition: background .2s, color .2s, border-color .2s;
}
.ce-chip.is-on { background: var(--acc-crs-deep); border-color: var(--acc-crs-deep); color: #fff; }
.ce-stf { width: auto; padding: .5rem 2.4rem .5rem .9rem; font-size: .82rem; }

/* Карта на заявка */
.ce-list { display: grid; gap: .7rem; }
.ce-item {
    position: relative; padding: 1rem 1.1rem; border-radius: 18px; background: #fff;
    box-shadow: var(--sh-sm); border: 1px solid rgba(34,31,28,.05);
    animation: crsIn .4s var(--ease-out) both; opacity: 0; transform: translateY(6px);
}
.ce-item.is-new::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc-alert); }
.ce-item__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .8rem; }
.ce-av {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--acc-crs), var(--acc-crs-deep)); color: #fff;
    font-family: var(--font-dash); font-weight: 700; font-size: 1.05rem;
}
.ce-item__who { flex: 1; min-width: 0; }
.ce-item__who b { display: block; font-family: var(--font-dash); font-size: 1rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ce-item__who span { display: block; margin-top: .1rem; font-size: .78rem; color: var(--acc-crs-deep); font-weight: 600; }
.ce-item__st {
    flex: none; appearance: none; -webkit-appearance: none; cursor: pointer; field-sizing: content; max-width: 9.5rem;
    padding: .34rem 1.6rem .34rem .7rem; border: 0; border-radius: 999px;
    font: inherit; font-size: .74rem; font-weight: 700;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center;
}
.ce-item__st.ce-st--new { background-color: var(--acc-alert-soft); }
.ce-item__st.ce-st--contacted { background-color: var(--acc-stats-soft); }
.ce-item__st.ce-st--enrolled { background-color: var(--acc-cal-soft); }
.ce-item__st.ce-st--cancelled { background-color: #EEEAE5; }
.ce-item__msg {
    position: relative; margin: .85rem 0 0; padding: .65rem .85rem .65rem 2rem; border-radius: 12px;
    background: var(--cream); font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
}
.ce-item__msg::before { content: "“"; position: absolute; left: .65rem; top: .1rem; font-family: var(--font-display); font-size: 1.8rem; line-height: 1; color: var(--acc-crs); }
.ce-item__foot { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ce-act {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .4rem .8rem; border-radius: 999px;
    background: var(--cream); color: var(--ink); font-size: .8rem; font-weight: 600; white-space: nowrap;
    transition: background .2s, color .2s;
}
.ce-act svg { color: var(--acc-crs-deep); flex: none; }
.ce-act:hover { background: var(--acc-crs-soft); }
.ce-act--call { background: var(--acc-crs-deep); color: #fff; }
.ce-act--call svg { color: #fff; }
.ce-act--call:hover { background: var(--acc-crs); }
.ce-item__date { margin-left: auto; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.ce-item__del {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: none; border: 0; cursor: pointer; color: var(--muted); transition: background .2s, color .2s;
}
.ce-item__del:hover { background: var(--acc-alert-soft); color: var(--acc-alert-deep); }

@media (max-width: 720px) {
    .ce-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .ce-kpis > .card { min-width: 0 !important; padding: .9rem .95rem !important; }
    /* курсовете — един общ списък с редове */
    .ce-courses { grid-template-columns: 1fr; gap: 0; background: #fff; border-radius: 18px; box-shadow: var(--sh-sm); overflow: hidden; }
    .ce-course {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .8rem; row-gap: .35rem;
        padding: .9rem 1rem; border-radius: 0; box-shadow: none; border: 0; border-left: 3px solid transparent;
    }
    .ce-course + .ce-course { border-top: 1px solid var(--line); }
    .ce-course:hover { transform: none; box-shadow: none; }
    .ce-course.is-on { border-color: transparent; border-left-color: var(--acc-crs); background: var(--acc-crs-soft); }
    .ce-course__title { font-size: .86rem; }
    .ce-course__num { grid-row: span 2; font-size: 1.55rem; flex-direction: column; align-items: flex-end; gap: 0; }
    .ce-course__num small { font-size: .66rem; }
    .ce-course__chips:empty { display: none; }
    .ce-toolbar { flex-direction: column; align-items: stretch; }
    /* 4 филтъра в мрежа 2×2 — всички се виждат, нищо не излиза от екрана */
    .ce-filter { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
    .ce-chip { min-width: 0; padding: .6rem .5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ce-stf { width: 100%; }
    .ce-item { padding: .95rem .95rem .85rem; }
    .ce-av { width: 38px; height: 38px; font-size: .95rem; }
    .ce-item__head { grid-template-columns: auto minmax(0, 1fr); row-gap: .5rem; align-items: start; }
    .ce-item__st { grid-column: 2; justify-self: start; }
    /* ред 1: Обади се + Имейл; ред 2: дата вляво, кошче вдясно */
    .ce-item__foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .45rem .4rem; }
    .ce-act { min-height: 38px; justify-content: center; }
    .ce-item__date { grid-column: 1 / 3; grid-row: 2; margin: 0; }
    .ce-item__del { grid-column: 3; grid-row: 2; justify-self: end; margin: 0 -.35rem 0 0; }
}
/* Лентата с табове на таблото на телефон — пет таба без отрязани надписи. */
@media (max-width: 480px) {
    .dash-nav { padding: 0; }
    .dash-nav .dash-tab { padding: .45rem 0 .38rem; }
    .dash-tab__lb { font-size: .58rem; letter-spacing: 0; overflow: visible; text-overflow: clip; }
}

@media (max-width: 420px) {
    .crs-grid, .crs-grid--2 { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; }
    .crs-grid > .crs-card { flex-basis: 86%; }
}

/* =====================================================================
   Страница „Курсове" — hero с 3D сцена
   ===================================================================== */
/* Нормални (изправени) цифри навсякъде в курсовете — Playfair иначе ги „пуска" надолу. */
[class*="crs-"] { font-variant-numeric: lining-nums; }

.crs-hero--list .crs-hero__title { font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.02; }
.crs-hero--list .crs-hero__lead { max-width: 470px; }
.crs-hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 0; }

/* Числата — четлив шрифт, броят се при появяване */
.crs-kpis { display: flex; gap: 0; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(125,107,95,.2); }
.crs-kpi { flex: 1 1 0; min-width: 0; padding-right: 1.2rem; }
.crs-kpi + .crs-kpi { padding-left: 1.4rem; border-left: 1px solid rgba(125,107,95,.2); }
.crs-kpi b {
    display: flex; align-items: baseline; gap: .25rem; line-height: 1;
    font-family: var(--font-dash); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem);
    letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.crs-kpi b i { font-style: normal; font-size: .5em; font-weight: 600; color: var(--rose-deep); letter-spacing: 0; }
.crs-kpi small { display: block; margin-top: .45rem; font-size: .76rem; color: var(--muted); line-height: 1.35; }

/* 3D сцена: слоевете са на различна дълбочина и се накланят след мишката */
.crs-hero--list .crs-hero__visual { width: min(100%, 500px); justify-self: end; }
.crs-scene { position: relative; aspect-ratio: 1 / 1.02; perspective: 1400px; }
.crs-scene__inner {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .7s var(--ease-out);
}
.crs-scene.is-idle .crs-scene__inner { animation: crsSway 9s ease-in-out infinite; }
@keyframes crsSway {
    0%, 100% { transform: rotateX(4deg) rotateY(-7deg); }
    50% { transform: rotateX(-3deg) rotateY(7deg); }
}
.crs-scene__glow {
    position: absolute; left: 20%; top: 18%; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(196,169,138,.55), rgba(196,169,138,0));
    transform: translateZ(-80px); filter: blur(6px);
}

.crs-hero--list .crs-hero__visual { animation: none; }

@media (max-width: 980px) {
    .crs-hero--list .crs-hero__visual { justify-self: center; width: min(92%, 440px); }
}
@media (max-width: 720px) {
    .crs-hero--list .crs-hero__title { font-size: clamp(2.2rem, 10vw, 2.9rem); }
    .crs-hero--list .crs-hero__visual { width: 86%; margin-inline: auto; }
    .crs-scene { aspect-ratio: 1 / .98; }
    .crs-kpis { margin-top: 2rem; }
    .crs-kpi { padding-right: .8rem; }
    .crs-kpi + .crs-kpi { padding-left: .9rem; }
    .crs-kpi b { font-size: 1.75rem; }
    .crs-kpi small { font-size: .7rem; }
}
@media (max-width: 400px) {
    .crs-kpi b { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .crs-scene.is-idle .crs-scene__inner { animation: none; }
}

/* ---- 3D ветрило от трите курса ---- */
@keyframes crsSpin { to { transform: rotate(360deg); } }
.crs-scene--fan { aspect-ratio: 1 / 1; }
.crs-fan__card {
    position: absolute; top: 12%; width: 46%; aspect-ratio: 4 / 5.4; overflow: hidden; display: block;
    border-radius: 999px 999px 22px 22px; border: 5px solid #F6F1EA;
    box-shadow: 0 34px 60px -26px rgba(50,35,25,.55);
    transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
    animation: crsFanIn 1.1s var(--ease-out) both;
}
.crs-fan__card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.crs-fan__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(24,18,14,.72)); pointer-events: none; }
.crs-fan__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: .9rem 1rem 1rem; text-align: center; color: #fff; }
.crs-fan__cap b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.crs-fan__cap small { display: inline-block; margin-top: .35rem; padding: .18rem .6rem; border-radius: 999px; background: rgba(255,255,255,.2); font-family: var(--font-dash); font-size: .74rem; font-weight: 600; }
.crs-fan__card--l { left: 2%; transform: translateZ(-40px) rotate(-9deg); transform-origin: bottom center; animation-delay: .25s; }
.crs-fan__card--r { right: 2%; transform: translateZ(-40px) rotate(9deg); transform-origin: bottom center; animation-delay: .4s; }
.crs-fan__card--c { left: 27%; top: 4%; width: 46%; transform: translateZ(60px); z-index: 2; animation-delay: .1s; box-shadow: 0 44px 70px -26px rgba(50,35,25,.65); }
.crs-fan__card--c .crs-fan__cap b { font-size: 1.25rem; }
@keyframes crsFanIn { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
@media (hover: hover) {
    .crs-fan__card:hover img { transform: scale(1.07); }
    .crs-fan__card--l:hover { transform: translateZ(-10px) rotate(-12deg) translateY(-10px); }
    .crs-fan__card--r:hover { transform: translateZ(-10px) rotate(12deg) translateY(-10px); }
    .crs-fan__card--c:hover { transform: translateZ(80px) translateY(-8px); }
}
@media (max-width: 720px) {
    .crs-fan__card { border-width: 4px; }
    .crs-fan__cap { padding: .6rem .5rem .7rem; }
    .crs-fan__cap b { font-size: .8rem; }
    .crs-fan__card--c .crs-fan__cap b { font-size: .95rem; }
    .crs-fan__cap small { font-size: .64rem; }
}
/* страничните карти: надписът е във видимата (външната) половина */
.crs-fan__card--l .crs-fan__cap, .crs-fan__card--r .crs-fan__cap { width: 52%; padding-bottom: .9rem; }
.crs-fan__card--l .crs-fan__cap { left: 0; right: auto; text-align: left; padding-left: 1rem; }
.crs-fan__card--r .crs-fan__cap { left: auto; right: 0; text-align: right; padding-right: 1rem; }
.crs-fan__card--l .crs-fan__cap b, .crs-fan__card--r .crs-fan__cap b { display: none; }
.crs-fan__card--l .crs-fan__cap small, .crs-fan__card--r .crs-fan__cap small { font-size: .9rem; padding: .3rem .8rem; background: rgba(255,255,255,.9); color: var(--ink); }
@media (max-width: 720px) {
    .crs-fan__card--l .crs-fan__cap { padding-left: .6rem; }
    .crs-fan__card--r .crs-fan__cap { padding-right: .6rem; }
    .crs-fan__card--l .crs-fan__cap small, .crs-fan__card--r .crs-fan__cap small { font-size: .72rem; padding: .22rem .6rem; }
}
.crs-scene--fan { aspect-ratio: 1 / .92; }
.crs-fan__cap b { white-space: nowrap; }
.crs-fan__card--c .crs-fan__cap b { white-space: normal; text-wrap: balance; }
@media (max-width: 400px) { .crs-fan__card--c .crs-fan__cap b { font-size: .85rem; } }
/* по-големи снимки във ветрилото */
.crs-hero--list .crs-hero__visual { width: min(100%, 610px); }
.crs-scene--fan { aspect-ratio: 1 / 1; }
.crs-fan__card { width: 54%; top: 11%; }
.crs-fan__card--c { width: 54%; left: 23%; top: 1%; }
.crs-fan__card--l { left: -1%; }
.crs-fan__card--r { right: -1%; }
@media (max-width: 980px) { .crs-hero--list .crs-hero__visual { width: min(100%, 540px); } }
@media (max-width: 720px) {
    .crs-hero--list .crs-hero__visual { width: 106%; margin-inline: -3%; }
    .crs-scene--fan { aspect-ratio: 1 / 1.05; }
}
@media (prefers-reduced-motion: reduce) { .crs-fan__card { animation: none; } }