/* ============================================
   ПРАКТИКИ ИНЬ-ЯН — ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
   Единый источник цветов, шрифтов и размеров
   ============================================ */

:root {

    /* ---------- 🎨 ЦВЕТА: АКЦЕНТ ---------- */
    --c-orange:        #f26711;  /* основной акцент: кнопки, ссылки */
    --c-orange-light:  #fa7a2a;  /* hover-состояние */
    --c-orange-dark:   #d6540a;  /* active / нажатие */
    --c-orange-soft:   #fbeee9;  /* полупрозрачный фон акцента */

    /* ---------- 🟣 ЦВЕТА: ФИОЛЕТОВЫЙ / БОРДО ---------- */
    --c-purple:        #462f52;  /* заголовки, тёмные фоны */
    --c-purple-soft:   #795866;  /* подзаголовки, приглушённый */
    --c-bordo:         #3e0000;  /* самый тёмный заголовок */
    --c-purple-light: #f6f4fb;   /* светлый фон плашки */
    --c-muted:        #8a8697;   /* серый для подписей */

    /* ---------- 🌸 ЦВЕТА: ФОНЫ ---------- */
    --c-bg:            #ffffff;  /* базовый фон страницы */
    --c-bg-pink:       #f7e8e3;  /* тёплый розовый блок */
    --c-bg-lilac:      #faf2fc;  /* холодный сиреневый блок */
    --c-bg-grey:       #f3f1f4;  /* нейтральный серый блок */

    /* ---------- ⚫ ЦВЕТА: ТЕКСТ ---------- */
    --c-text:          #5c565e;  /* основной текст */
    --c-text-muted:    #9f95a3;  /* приглушённый / подписи */
    --c-text-light:    #ffffff;  /* текст на тёмном/акцентном фоне */

    /* ---------- ➖ ЦВЕТА: ГРАНИЦЫ И ТЕНИ ---------- */
    --c-border:        #d9d5da;  /* обводки, разделители */
    --c-border-light:  #efedf0;  /* мягкие разделители */

    /* Тени (готовые к вставке в box-shadow) */
    --shadow-sm:  0 4px 12px rgba(121, 88, 102, .08);
    --shadow-md:  0 20px 49px rgba(243, 241, 244, .8);
    --shadow-lg:  0 30px 60px rgba(121, 88, 102, .15);
    --shadow-orange: 0 8px 24px rgba(242, 103, 17, .3);

    /* ---------- 🅰️ ШРИФТЫ ---------- */
    --font-light:   'Plex Light', system-ui, sans-serif;
    --font-base:    'Plex', system-ui, sans-serif;
    --font-medium:  'Plex Medium', system-ui, sans-serif;
    --font-bold:    'Plex Bold', system-ui, sans-serif;

    /* Размеры шрифта (адаптивные) */
    --fs-base:   17px;
    --fs-sm:     15px;
    --fs-lg:     20px;
    --fs-h1:     clamp(32px, 5vw, 56px);
    --fs-h2:     clamp(28px, 4vw, 40px);
    --fs-h3:     clamp(20px, 2.5vw, 24px);

    --lh-base:   1.7;   /* межстрочный для текста */
    --lh-head:   1.15;  /* межстрочный для заголовков */

    /* ---------- 📐 ОТСТУПЫ (шкала 4px) ---------- */
    --sp-xs:   8px;
    --sp-sm:   16px;
    --sp-md:   24px;
    --sp-lg:   40px;
    --sp-xl:   64px;
    --sp-2xl:  clamp(60px, 8vw, 80px);  /* вертикальные отступы секций */

    /* ---------- 🔲 РАДИУСЫ СКРУГЛЕНИЯ ---------- */
    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-pill: 50px;   /* кнопки-таблетки */
    --radius-full: 50%;    /* круги, аватары */

    /* ---------- 📏 РАЗМЕРЫ МАКЕТА ---------- */
    --maxw:        1280px;  /* макс. ширина контента */
    --maxw-narrow: 780px;   /* для текстовых страниц */
    --gutter:      20px;    /* боковые поля container */

    /* ---------- ⚡ АНИМАЦИЯ ---------- */
    --ease:        cubic-bezier(.25, .8, .25, 1);
    --dur-fast:    .15s;
    --dur:         .25s;
    --dur-slow:    .4s;

    /* ---------- 🧱 Z-INDEX (порядок слоёв) ---------- */
    --z-header:    100;
    --z-dropdown:  200;
    --z-overlay:   900;
    --z-modal:     1000;
}

/* ============ БАЗА ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:var(--font-base);color:var(--c-text);
    font-size:var(--fs-base);line-height:var(--lh-base);
    background:var(--c-bg);-webkit-font-smoothing:antialiased;
}

html, body{overflow-x:hidden;  max-width:100%;}

img{max-width:100%;display:block}
a{color:var(--c-orange);text-decoration:none;transition:var(--dur) var(--ease)}
a:hover{color:var(--c-orange-light)}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}


/* ============ КНОПКИ ============ */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 32px;border-radius:var(--radius-pill);
    font-family:var(--font-bold);font-size:15px;
    cursor:pointer;border:none;transition:var(--dur) var(--ease);
    white-space:nowrap;
}
.btn-primary{background:var(--c-orange);color:var(--c-text-light);
    box-shadow:var(--shadow-orange)}
.btn-primary:hover{background:var(--c-orange-light);color:#fff;
    transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--c-purple);
    border:1.5px solid var(--c-border)}
.btn-ghost:hover{border-color:var(--c-orange);color:var(--c-orange)}

/* ============ ШАПКА ============ */
.header{
    position:sticky;top:0;z-index:var(--z-header);
    background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--c-border-light);
}

.header-inner{
    display:flex;align-items:center;justify-content:space-between;
    /* ✅ padding 17px — лого стало 80px, но высота шапки та же + больше воздуха */
    gap:24px;padding:17px var(--gutter);max-width:var(--maxw);margin:0 auto;
}
/* ✅ Логотип 80px */
.logo{height:80px;width:auto;display:block}

.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--c-purple);font-size:17px;font-family:var(--font-medium);white-space:nowrap}
.nav a:hover{color:var(--c-orange)}
.nav a.orange{color:var(--c-orange)}
.header-lang{color:var(--c-text-muted);font-size:15px}

/* Бургер */
.burger{display:none;flex-direction:column;gap:5px;
    background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:28px;height:2px;background:var(--c-purple);
    border-radius:2px;transition:var(--dur)}


/* ============ HERO (экран 1) ============ */
.hero{
    /* ✅ Просто мягкий градиент, БЕЗ фоновой картинки */
    background:linear-gradient(135deg,var(--c-bg-pink) 0%,#fbeee9 55%,var(--c-bg-lilac) 100%);
    padding:var(--sp-2xl) 0;
    overflow:hidden;
}
.hero-grid{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:var(--sp-lg);align-items:center;
}
.hero h1{
    font-family:var(--font-light);font-size:var(--fs-h1);
    line-height:var(--lh-head);color:var(--c-bordo);margin-bottom:var(--sp-md);
}
.hero h1 span{color:var(--c-orange)}
.hero-lead{font-size:var(--fs-lg);color:var(--c-purple);
    max-width:520px;margin-bottom:var(--sp-lg)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ✅ Картинка с кругом элементов — как <img> */
.hero-visual{display:flex;justify-content:center}
.hero-visual img{
    width:100%;max-width:440px;height:auto;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    display:block;
}


/* ============ СЕКЦИЯ INTRO (Инь-Ян) ============ */
.section{padding:var(--sp-2xl) 0}
.section-title{
    font-family:var(--font-light);font-size:var(--fs-h2);
    color:var(--c-purple);margin-bottom:var(--sp-md);
}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center}

/* ✅ Сакура — обычная картинка в блоке */
.intro-grid img{
    width:100%;height:auto;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    display:block;
}
.intro-text p{margin-bottom:var(--sp-sm)}


/* ============ СЕКЦИЯ ЭЛЕМЕНТЫ ============ */
.elements{
    /* ✅ Просто цветной фон, картинку ставим отдельным <img> */
    background:var(--c-bg-pink);
}
.elements-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center}
.elements-visual{display:flex;justify-content:center}

/* ✅ Круг элементов — как <img> */
.elements-visual img{
    width:100%;max-width:420px;height:auto;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    display:block;
}
.elements-text p{margin-bottom:var(--sp-md)}
.elements-highlight{
    background:#fff;border-left:4px solid var(--c-orange);
    border-radius:var(--radius-md);padding:var(--sp-md);
    box-shadow:var(--shadow-sm);font-size:15px;
}

/* ============ УСЛУГИ / КАРТОЧКИ ============ */
.services{background:var(--c-bg-lilac)}
.section-sub{color:var(--c-text-muted);margin-bottom:var(--sp-xl)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-md)}
.card{
    background:#fff;border-radius:var(--radius-md);padding:32px 28px;
    border:1px solid var(--c-border-light);box-shadow:var(--shadow-md);
    transition:var(--dur) var(--ease);display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-icon{
    width:60px;height:60px;border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--c-orange),var(--c-orange-light));
    display:flex;align-items:center;justify-content:center;
    font-size:26px;margin-bottom:var(--sp-sm);
}
.card h3{font-family:var(--font-medium);font-size:var(--fs-h3);
    color:var(--c-purple);margin-bottom:12px}
.card p{font-size:15px;margin-bottom:var(--sp-sm);flex-grow:1}
.card-link{font-family:var(--font-bold);font-size:15px}

/* ============ БЛОК КАЛЕНДАРЯ ============ */
.calendar-block{background:var(--c-bg-pink)}
.calendar-inner{
    display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-lg);
    align-items:center;background:#fff;border-radius:var(--radius-lg);
    padding:var(--sp-lg);box-shadow:var(--shadow-md);
}
.bzd{
    width:110px;height:110px;border-radius:var(--radius-full);flex-shrink:0;
    background:linear-gradient(135deg,var(--c-purple),var(--c-purple-soft));
    color:#fff;display:flex;flex-direction:column;align-items:center;
    justify-content:center;font-size:34px;line-height:1.1;font-family:var(--font-bold);
}
.calendar-text h3{font-family:var(--font-medium);font-size:22px;
    color:var(--c-purple);margin-bottom:8px}

/* ============ CTA ============ */
.cta{background:linear-gradient(135deg,var(--c-purple),var(--c-bordo));text-align:center}
.cta h2{font-family:var(--font-light);font-size:var(--fs-h2);color:#fff;margin-bottom:var(--sp-sm)}
.cta p{color:rgba(255,255,255,.8);max-width:560px;margin:0 auto var(--sp-lg)}

/* ============ ПОДВАЛ ============ */
.footer{
    background:linear-gradient(135deg,var(--c-purple) 0%,#3a2545 100%);
    color:rgba(255,255,255,.75);
    padding:var(--sp-xl) 0 var(--sp-lg);font-size:14px;
}
.footer-nav{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--sp-lg);
    margin-bottom:var(--sp-lg);
    padding-bottom:var(--sp-lg);
    border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{
    color:#fff;font-family:var(--font-medium);
    font-size:15px;margin-bottom:6px;
}
.footer-col a{color:rgba(255,255,255,.7);font-size:14px}
.footer-col a:hover{color:var(--c-orange-light)}

.footer-bottom{
    display:flex;flex-wrap:wrap;gap:16px;
    justify-content:space-between;align-items:center;
}
.footer-bottom a{color:rgba(255,255,255,.9)}
.footer-bottom a:hover{color:var(--c-orange-light)}

@media(max-width:700px){
    .footer-nav{grid-template-columns:1fr 1fr;gap:var(--sp-md)}
    .footer-bottom{justify-content:center;text-align:center}
}
@media(max-width:420px){
    .footer-nav{grid-template-columns:1fr}
}

/* ============ АДАПТИВ ============ */
@media(max-width:1100px){
    .logo{height:64px}

    .nav{
        position:fixed !important;
        top:0 !important; right:0 !important;
        left:auto !important; bottom:auto !important;
        height:100dvh !important;
        width:min(82vw,340px) !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;
        background:#ffffff !important;
        padding:0 !important;
        margin:0 !important;
        box-shadow:-8px 0 40px rgba(74,35,90,.18);
        transform:translateX(100%);
        transition:transform var(--dur-slow) var(--ease);
        z-index:900 !important;               /* ✅ меню */
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
    }

    .nav::before{
        content:"";display:block;
        height:80px;flex:0 0 80px;
    }

    .nav a{
        font-size:18px;color:var(--c-purple);width:100%;
        padding:16px 30px !important;
        border-bottom:1px solid var(--c-border-light);
        flex:0 0 auto;white-space:nowrap;
    }
    .nav a:hover{color:var(--c-orange)}
    .nav a.orange{color:var(--c-orange)}
    .nav.open{transform:translateX(0)}

    .burger{
        display:flex;position:relative;
        z-index:901;                          /* ✅ бургер поверх меню */
    }

    .nav-overlay{
        position:fixed;inset:0;
        background:rgba(30,15,40,.45);
        opacity:0;visibility:hidden;
        transition:var(--dur) var(--ease);
        z-index:899;                          /* ✅ затемнение ПОД меню */
    }
    .nav-overlay.open{opacity:1;visibility:visible}
}

@media(max-width:900px){
    .hero-grid,.intro-grid,.elements-grid{
        grid-template-columns:1fr;text-align:center;
    }
    .hero-lead{margin-left:auto;margin-right:auto}
    .hero-actions{justify-content:center}
    .hero-visual,.elements-visual{order:-1}
    .hero-visual img,.elements-visual img{max-width:360px;margin:0 auto}
    .intro-grid img{max-width:520px;margin:0 auto}
    .elements-text{text-align:left}
    .calendar-inner{grid-template-columns:1fr;text-align:center;justify-items:center}
}

@media(max-width:600px){
    .logo{height:56px}
    .hero-visual img,.elements-visual img{max-width:280px}
    .intro-grid img{max-width:100%}
}

/* ============ ШАПКА СТРАНИЦЫ (общая для внутренних) ============ */
.page-hero{
    background:linear-gradient(135deg,var(--c-bg-pink) 0%,#fbeee9 55%,var(--c-bg-lilac) 100%);
    padding:var(--sp-xl) 0;
    text-align:center;
}
.page-hero h1{
    font-family:var(--font-light);font-size:var(--fs-h1);
    line-height:var(--lh-head);color:var(--c-bordo);
}

/* ============ КОНТАКТЫ ============ */
.contacts-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:var(--sp-xl);
    align-items:start;
}

/* --- левая колонка --- */
.contacts-intro{
    font-size:var(--fs-lg);color:var(--c-purple);
    margin-bottom:var(--sp-lg);line-height:1.5;
}
.contact-item{
    display:flex;align-items:center;gap:var(--sp-sm);
    margin-bottom:var(--sp-md);
}
.contact-ico{
    width:56px;height:56px;flex-shrink:0;
    border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--c-orange),var(--c-orange-light));
    display:flex;align-items:center;justify-content:center;
    font-size:24px;box-shadow:var(--shadow-orange);
}
.contact-val{
    display:block;font-family:var(--font-medium);
    font-size:var(--fs-lg);color:var(--c-purple);
}
.contact-val:hover{color:var(--c-orange)}
.contact-label{
    display:block;font-size:14px;color:var(--c-text-muted);
    margin-top:2px;
}

/* --- правая колонка: форма --- */
.contacts-form-wrap{
    background:#fff;border-radius:var(--radius-lg);
    padding:var(--sp-lg);
    border:1px solid var(--c-border-light);
    box-shadow:var(--shadow-md);
}
.form-title{
    font-family:var(--font-medium);font-size:var(--fs-h3);
    color:var(--c-purple);margin-bottom:var(--sp-md);
}
.field{display:block;margin-bottom:var(--sp-sm)}
.field span{
    display:block;font-size:14px;color:var(--c-text-muted);
    margin-bottom:6px;
}
.field input,
.field textarea{
    width:100%;font-family:var(--font-base);font-size:16px;
    color:var(--c-text);
    padding:13px 16px;
    border:1.5px solid var(--c-border);
    border-radius:var(--radius-md);
    background:var(--c-bg-grey);
    transition:var(--dur) var(--ease);
}
.field input:focus,
.field textarea:focus{
    outline:none;border-color:var(--c-orange);
    background:#fff;
    box-shadow:0 0 0 3px var(--c-orange-soft);
}
.field textarea{resize:vertical;min-height:120px}
.contacts-form .btn{margin-top:var(--sp-xs)}

/* --- уведомление / успех --- */
.form-notice{
    background:var(--c-orange-soft);
    border-left:4px solid var(--c-orange);
    border-radius:var(--radius-md);
    padding:var(--sp-md);color:var(--c-purple);
}
.form-success{text-align:center;padding:var(--sp-md) 0}
.success-ico{
    width:72px;height:72px;margin:0 auto var(--sp-sm);
    border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--c-orange),var(--c-orange-light));
    color:#fff;font-size:36px;font-family:var(--font-bold);
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-orange);
}
.form-success h3{
    font-family:var(--font-medium);font-size:var(--fs-h3);
    color:var(--c-purple);margin-bottom:var(--sp-xs);
}
.form-success p{color:var(--c-text)}
.success-thanks{
    font-family:var(--font-medium);color:var(--c-orange);
    margin-top:var(--sp-xs);
}

/* --- адаптив --- */
@media(max-width:800px){
    .contacts-grid{grid-template-columns:1fr;gap:var(--sp-lg)}
}

/* ============ О ПРОЕКТЕ ============ */
.page-hero-lead{
    max-width:640px;margin:var(--sp-sm) auto 0;
    font-size:var(--fs-lg);color:var(--c-purple);line-height:1.5;
}

/* --- вводный блок --- */
.about-intro{
    display:grid;grid-template-columns:1.6fr 1fr;
    gap:var(--sp-xl);align-items:start;
}
.about-intro-text p{margin-bottom:var(--sp-sm)}

.about-facts{
    display:flex;flex-direction:column;gap:var(--sp-sm);
}
.fact{
    background:#fff;border:1px solid var(--c-border-light);
    border-radius:var(--radius-md);padding:var(--sp-md);
    box-shadow:var(--shadow-sm);text-align:center;
}
.fact-num{
    display:block;font-family:var(--font-bold);
    font-size:32px;color:var(--c-orange);line-height:1;
    margin-bottom:6px;
}
.fact-label{color:var(--c-text-muted);font-size:14px}

/* --- иероглифы в карточках практик --- */
.card-hanzi{
    font-family:var(--font-base);font-size:15px;
    color:var(--c-text-muted);font-weight:normal;
}
.card-icon{font-family:var(--font-light)}

/* --- шаги --- */
.steps{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--sp-md);
}
.step{
    background:#fff;border:1px solid var(--c-border-light);
    border-radius:var(--radius-md);padding:32px 28px;
    box-shadow:var(--shadow-md);position:relative;
}
.step-num{
    width:48px;height:48px;border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--c-purple),var(--c-purple-soft));
    color:#fff;font-family:var(--font-bold);font-size:22px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:var(--sp-sm);
}
.step h3{
    font-family:var(--font-medium);font-size:var(--fs-h3);
    color:var(--c-purple);margin-bottom:10px;
}
.step p{font-size:15px}

/* --- адаптив --- */
@media(max-width:900px){
    .about-intro{grid-template-columns:1fr;gap:var(--sp-lg)}
    .about-facts{flex-direction:row;flex-wrap:wrap}
    .about-facts .fact{flex:1;min-width:140px}
    .steps{grid-template-columns:1fr}
}

/* ============ ЮРИДИЧЕСКИЙ ДОКУМЕНТ (соглашение, политика) ============ */
.legal-doc{
    max-width:var(--maxw-narrow);
    margin:0 auto;
    font-size:16px;
    line-height:1.75;
    color:var(--c-text);
}
.legal-doc > p{margin-bottom:var(--sp-sm)}

.legal-h{
    font-family:var(--font-medium);
    font-size:var(--fs-h3);
    color:var(--c-purple);
    margin:var(--sp-lg) 0 var(--sp-sm);
    padding-bottom:10px;
    border-bottom:2px solid var(--c-orange-soft);
}
.legal-doc > .legal-h:first-child{margin-top:0}

.legal-sub{
    font-family:var(--font-medium);
    font-size:var(--fs-lg);
    color:var(--c-purple-soft);
    margin:var(--sp-md) 0 var(--sp-xs);
}

.legal-list{
    list-style:none;
    margin:0 0 var(--sp-sm);
    padding:0;
}
.legal-list li{
    position:relative;
    padding-left:26px;
    margin-bottom:12px;
}
.legal-list li::before{
    content:"";
    position:absolute;
    left:0;top:11px;
    width:8px;height:8px;
    border-radius:var(--radius-full);
    background:var(--c-orange);
}

/* ============ COOKIE-БАННЕР ============ */
.cookie-banner{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1000;
    background:var(--c-purple);
    color:#fff;
    box-shadow:0 -6px 24px rgba(0,0,0,.18);
    transform:translateY(0);
    transition:transform .4s ease, opacity .4s ease;
}
.cookie-banner[hidden]{display:none}

.cookie-banner.is-hiding{
    transform:translateY(100%);
    opacity:0;
}

.cookie-banner__inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:16px var(--sp-md);
    display:flex;
    align-items:center;
    gap:var(--sp-md);
}

.cookie-banner__text{
    margin:0;
    font-size:14px;
    line-height:1.55;
    flex:1;
}
.cookie-banner__text a{
    color:var(--c-orange-soft);
    text-decoration:underline;
    text-underline-offset:2px;
}
.cookie-banner__text a:hover{color:#fff}

.cookie-banner__btn{
    flex-shrink:0;
    padding:11px 32px;
    border:none;
    border-radius:var(--radius-full);
    background:var(--c-orange);
    color:#fff;
    font-family:var(--font-medium);
    font-size:15px;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
}
.cookie-banner__btn:hover{background:var(--c-orange-dark, #e08a2b)}
.cookie-banner__btn:active{transform:scale(.97)}

/* мобильная версия */
@media (max-width:600px){
    .cookie-banner__inner{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        text-align:center;
    }
    .cookie-banner__btn{width:100%}
}

/* ============ СТАТЬИ: СЕТКА 3 В РЯД ============ */
.articles-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--sp-md);
}

/* ---------- Карточка ---------- */
.article-card{
    position:relative;
    background:#fff;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
    transition:transform .22s ease, box-shadow .22s ease;
}

/* акцентная полоса слева */
.article-card::before{
    content:'';
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
    background:linear-gradient(180deg, var(--c-purple), var(--c-orange));
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .3s ease;
}

.article-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.13);
}
.article-card:hover::before{
    transform:scaleY(1);
}

/* ссылка-обёртка на всю карточку */
.article-card__link-wrap{
    display:block;
    text-decoration:none;
    color:inherit;
    height:100%;
}

/* тело */
.article-card__body{
    display:flex;
    flex-direction:column;
    height:100%;
    padding:26px 24px;
}

/* заголовок */
.article-card__title{
    margin:0 0 14px;
    font-family:var(--font-medium);
    font-size:19px;
    line-height:1.35;
    color:var(--c-purple);
    transition:color .2s ease;
}
.article-card:hover .article-card__title{
    color:var(--c-orange);
}

/* текст */
.article-card__text{
    margin:0 0 22px;
    font-size:15px;
    line-height:1.6;
    color:var(--c-text);
    flex:1;
}

/* "Читать →" */
.article-card__more{
    display:inline-flex;
    align-items:center;
    gap:7px;
    align-self:flex-start;
    font-family:var(--font-medium);
    font-size:15px;
    color:var(--c-orange);
}
.article-card__arrow{
    transition:transform .2s ease;
}
.article-card:hover .article-card__arrow{
    transform:translateX(5px);
}

/* ============ АДАПТИВ ============ */
@media (max-width:1000px){
    .articles-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
    .articles-grid{grid-template-columns:1fr;}
    .article-card__body{padding:22px 20px;}
}

/* ============ ТАБЛИЦЫ В СТАТЬЯХ ============ */
.table-wrap{
    overflow-x:auto;
    margin:20px 0;
    -webkit-overflow-scrolling:touch;
}

.tinfo{
    border-collapse:collapse;
    width:100%;
    font-size:15px;
}
.tinfo td{
    border:1px solid var(--c-border, #e5e2ec);
    padding:9px 14px;
    text-align:center;
    vertical-align:middle;
}
.tinfo .trcap td{
    background:var(--c-purple);
    color:#fff;
    font-family:var(--font-medium);
}
.tinfo .scd td{background:#faf9fc;}
.tinfo.fs16 td{font-size:17px;}

/* таблица цикла Цзя-Цзы */
#tblzz{
    border-collapse:collapse;
    width:100%;
    font-size:16px;
    text-align:center;
}
#tblzz td{
    border:1px solid var(--c-border, #e5e2ec);
    padding:7px 6px;
}
#tblzz .zznum td{
    background:var(--c-orange);
    color:#fff;
    font-family:var(--font-medium);
    font-size:13px;
}

/* нумерованный/маркированный список в статье */
.article-list{
    margin:0 0 18px;
    padding-left:22px;
}
.article-list li{
    margin-bottom:12px;
    line-height:1.65;
}

/* ============ КОНТЕЙНЕР СТАТЬИ ============ */
/* Оптимальная ширина для чтения — строка не растягивается на весь экран */
.article-full{
    max-width:860px;
    margin:0 auto;
}

/* ============ ОТСТУПЫ ============ */
.article-full p{
    margin:0 0 18px;
}

/* ============ ПОДЗАГОЛОВКИ ============ */
.article-full h2{
    margin:52px 0 20px;              /* чуть больше отступ сверху */
    font-family:var(--font-medium);
    font-size:24px;
    line-height:1.3;
    color:var(--c-purple);
    padding-bottom:10px;
    border-bottom:2px solid var(--c-border, #eceaf2);
    position:relative;
}
/* оранжевый штрих-акцент под заголовком */
.article-full h2::after{
    content:'';
    position:absolute;
    left:0; bottom:-2px;
    width:60px; height:2px;
    background:var(--c-orange);
}

.article-full h3{
    margin:40px 0 16px;
    font-family:var(--font-medium);
    font-size:19px;
    line-height:1.35;
    color:var(--c-purple);
}

/* первый заголовок — без лишнего отступа сверху */
.article-full > h2:first-child,
.article-full > h3:first-child{
    margin-top:0;
}

/* ============ КАРТИНКИ — ПО ЦЕНТРУ ============ */
.article-img{
    display:block;
    max-width:100%;
    height:auto;
    margin:26px auto;                /* auto по бокам = центрирование */
    border-radius:var(--radius, 10px);
    box-shadow:0 6px 22px rgba(0,0,0,.12);
}

/* ============ ТАБЛИЦЫ ============ */
.table-wrap{
    margin:26px 0;
}

/* ============ СПИСКИ ============ */
.article-full ul,
.article-full ol,
.article-list{
    margin:0 0 22px;
    padding-left:24px;
}
.article-full li,
.article-list li{
    margin-bottom:12px;
}

/* ============ ХЛЕБНЫЕ КРОШКИ ============ */
.breadcrumbs{
    max-width:860px;
    margin:0 auto var(--sp-md);
    font-size:14px;
    color:var(--c-text-muted);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}
.breadcrumbs a{color:var(--c-purple-soft)}
.breadcrumbs a:hover{color:var(--c-orange)}
.breadcrumbs__sep{color:var(--c-border)}
.breadcrumbs__current{color:var(--c-text-muted)}

/* ============ CTA ВНУТРИ СТАТЬИ ============ */
.article-cta{
    max-width:860px;
    margin:var(--sp-xl) auto 0;
    padding:var(--sp-lg);
    text-align:center;
    background:linear-gradient(135deg,var(--c-bg-pink),var(--c-bg-lilac));
    border-radius:var(--radius-lg);
}
.article-cta p{
    font-size:var(--fs-lg);
    color:var(--c-purple);
    margin-bottom:var(--sp-md);
}

/* ============ ЧИТАЙТЕ ТАКЖЕ ============ */
.article-related{
    margin-top:var(--sp-2xl);
    padding-top:var(--sp-lg);
    border-top:1px solid var(--c-border-light);
}
.article-related__title{
    font-family:var(--font-light);
    font-size:var(--fs-h2);
    color:var(--c-purple);
    margin-bottom:var(--sp-lg);
    text-align:center;
    /* сбрасываем стили article-full h2, если они наследуются */
    border:none;
    padding:0;
}
.article-related__title::after{display:none}



/* ============ ПЛАШКА "ПЛАТНАЯ ВЕРСИЯ / ЦЕНА" ============ */
.price-box{
    margin:34px 0 10px;
    padding:22px 26px;
    background:var(--c-purple-light, #f6f4fb);
    border:1px solid var(--c-border, #eceaf2);
    border-left:4px solid var(--c-orange);
    border-radius:var(--radius, 10px);
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

/* иконка/бейдж "платно" */
.price-box__badge{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    background:var(--c-orange);
    color:#fff;
    border-radius:100px;
    font-family:var(--font-medium);
    font-size:14px;
    letter-spacing:.3px;
    text-transform:uppercase;
    white-space:nowrap;
}

/* текстовая часть */
.price-box__text{
    flex:1;
    min-width:200px;
    line-height:1.55;
    color:var(--c-text);
}

/* сама цена — крупно */
.price-box__price{
    font-family:var(--font-medium);
    font-size:26px;
    line-height:1;
    color:var(--c-purple);
    white-space:nowrap;
}
.price-box__price b{
    color:var(--c-orange);
}

/* подпись про скидки */
.price-box__note{
    display:block;
    margin-top:6px;
    font-size:14px;
    color:var(--c-muted, #8a8697);
}

/* ============ АДАПТИВ ============ */
@media (max-width:560px){
    .price-box{
        padding:18px 20px;
        gap:14px;
    }
    .price-box__price{
        font-size:22px;
    }
}

/* ============================================
   СТРАНИЦА ТАРИФОВ
   ============================================ */

/* --- вводный текст под заголовком --- */
.pricing-intro{
    max-width:760px;margin:var(--sp-sm) auto 0;
    font-size:var(--fs-lg);color:var(--c-purple);line-height:1.55;
}

/* --- инфо-плашки "как это работает" --- */
.pricing-notes{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--sp-md);margin-bottom:var(--sp-2xl);
}
.pnote{
    background:#fff;border:1px solid var(--c-border-light);
    border-radius:var(--radius-md);padding:var(--sp-md);
    box-shadow:var(--shadow-sm);
}
.pnote-ico{
    width:52px;height:52px;border-radius:var(--radius-full);
    background:var(--c-orange-soft);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;margin-bottom:12px;
}
.pnote h3{
    font-family:var(--font-medium);font-size:17px;
    color:var(--c-purple);margin-bottom:6px;
}
.pnote p{font-size:14px;color:var(--c-text)}

/* --- переключатель периодов --- */
.period-switch{
    display:inline-flex;gap:4px;
    background:var(--c-bg-grey);
    border-radius:var(--radius-pill);
    padding:5px;margin:0 auto var(--sp-lg);
}
.period-switch button{
    border:none;background:none;cursor:pointer;
    padding:10px 22px;border-radius:var(--radius-pill);
    font-family:var(--font-medium);font-size:15px;
    color:var(--c-purple-soft);
    transition:var(--dur) var(--ease);white-space:nowrap;
}
.period-switch button .save{
    display:inline-block;margin-left:6px;font-size:12px;
    color:var(--c-orange);font-family:var(--font-bold);
}
.period-switch button.active{
    background:#fff;color:var(--c-purple);
    box-shadow:var(--shadow-sm);
}
.period-switch button.active .save{color:var(--c-orange-dark)}
.switch-wrap{text-align:center}

/* --- сетка тарифных карточек --- */
.pricing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:var(--sp-md);margin-bottom:var(--sp-2xl);
}
.plan{
    position:relative;
    background:#fff;border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);padding:var(--sp-lg) var(--sp-md);
    box-shadow:var(--shadow-md);
    display:flex;flex-direction:column;
    transition:var(--dur) var(--ease);
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* выделенный (популярный) тариф */
.plan.featured{
    border:2px solid var(--c-orange);
    box-shadow:var(--shadow-orange);
}
.plan-badge{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:linear-gradient(135deg,var(--c-orange),var(--c-orange-light));
    color:#fff;font-family:var(--font-bold);font-size:12px;
    padding:6px 16px;border-radius:var(--radius-pill);
    white-space:nowrap;letter-spacing:.4px;
    box-shadow:var(--shadow-orange);
}

.plan-ico{
    width:64px;height:64px;border-radius:var(--radius-full);
    background:linear-gradient(135deg,var(--c-purple),var(--c-purple-soft));
    color:#fff;font-family:var(--font-light);font-size:26px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:var(--sp-sm);
}
.plan.featured .plan-ico{
    background:linear-gradient(135deg,var(--c-orange),var(--c-orange-light));
}
.plan h3{
    font-family:var(--font-medium);font-size:var(--fs-h3);
    color:var(--c-purple);margin-bottom:4px;
}
.plan-hanzi{font-size:14px;color:var(--c-text-muted);margin-bottom:var(--sp-sm)}

/* цена */
.plan-price{
    display:flex;align-items:baseline;gap:6px;
    margin-bottom:4px;
}
.plan-price .cur{font-size:18px;color:var(--c-purple)}
.plan-price .val{
    font-family:var(--font-bold);font-size:40px;
    color:var(--c-purple);line-height:1;
}
.plan.featured .plan-price .val{color:var(--c-orange)}
.plan-price .per{font-size:14px;color:var(--c-text-muted)}
.plan-old{
    font-size:15px;color:var(--c-text-muted);
    text-decoration:line-through;margin-bottom:var(--sp-sm);
    min-height:20px;
}

/* список фич */
.plan-feats{
    list-style:none;padding:0;margin:0 0 var(--sp-md);
    flex:1;
}
.plan-feats li{
    position:relative;padding-left:26px;
    font-size:14px;line-height:1.5;margin-bottom:10px;
    color:var(--c-text);
}
.plan-feats li::before{
    content:'✓';position:absolute;left:0;top:0;
    color:var(--c-orange);font-family:var(--font-bold);
}
.plan .btn{width:100%;justify-content:center}

/* --- пакеты (акцентная тёмная секция) --- */
.bundles{background:var(--c-bg-lilac)}
.bundle-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:var(--sp-md);
}
.bundle{
    background:linear-gradient(135deg,var(--c-purple),#3a2545);
    color:#fff;border-radius:var(--radius-lg);
    padding:var(--sp-lg) var(--sp-md);
    box-shadow:var(--shadow-lg);
    display:flex;flex-direction:column;
    transition:var(--dur) var(--ease);
}
.bundle:hover{transform:translateY(-6px)}
.bundle-tag{
    align-self:flex-start;
    background:rgba(242,103,17,.2);color:var(--c-orange-light);
    font-family:var(--font-bold);font-size:12px;
    padding:5px 12px;border-radius:var(--radius-pill);
    margin-bottom:var(--sp-sm);letter-spacing:.3px;
}
.bundle h3{
    font-family:var(--font-medium);font-size:20px;
    color:#fff;margin-bottom:var(--sp-sm);line-height:1.3;
}
.bundle-price{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.bundle-price .val{font-family:var(--font-bold);font-size:34px;line-height:1}
.bundle-price .cur{font-size:16px}
.bundle-price .per{font-size:13px;color:rgba(255,255,255,.6)}
.bundle-old{
    font-size:14px;color:rgba(255,255,255,.5);
    text-decoration:line-through;margin-bottom:var(--sp-md);
    min-height:18px; visibility: hidden;
}
.bundle .btn{
    width:100%;justify-content:center;margin-top:auto;
    background:#fff;color:var(--c-purple);
}
.bundle .btn:hover{background:var(--c-orange);color:#fff;transform:translateY(-2px)}

/* --- разовая оплата карты --- */
.onetime{background:var(--c-bg-pink)}
.onetime-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:var(--sp-md);
}
.otcard{
    background:#fff;border-radius:var(--radius-md);
    border:1px solid var(--c-border-light);
    box-shadow:var(--shadow-sm);
    padding:var(--sp-md);text-align:center;
    transition:var(--dur) var(--ease);
}
.otcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.otcard h4{
    font-family:var(--font-medium);font-size:17px;
    color:var(--c-purple);margin-bottom:8px;
}
.otcard .otprice{
    font-family:var(--font-bold);font-size:28px;
    color:var(--c-orange);line-height:1;margin-bottom:4px;
}
.otcard .otnote{font-size:13px;color:var(--c-text-muted)}

/* --- FAQ --- */
.faq{max-width:var(--maxw-narrow);margin:0 auto}
.faq-item{
    background:#fff;border:1px solid var(--c-border-light);
    border-radius:var(--radius-md);margin-bottom:12px;
    overflow:hidden;box-shadow:var(--shadow-sm);
}
.faq-item summary{
    cursor:pointer;list-style:none;
    padding:18px var(--sp-md);
    font-family:var(--font-medium);font-size:17px;
    color:var(--c-purple);
    display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
    content:'+';font-size:24px;color:var(--c-orange);
    transition:transform var(--dur) var(--ease);flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{
    padding:0 var(--sp-md) 18px;
    font-size:15px;line-height:1.6;color:var(--c-text);
}

/* --- адаптив --- */
@media(max-width:800px){
    .pricing-notes{grid-template-columns:1fr}
}

/* метка "хит" на популярном периоде */
.period-switch button .hot{
    display:inline-block;margin-left:6px;
    background:var(--c-orange);color:#fff;
    font-family:var(--font-bold);font-size:10px;
    padding:2px 7px;border-radius:var(--radius-pill);
    letter-spacing:.3px;vertical-align:middle;
}

/* пояснение под переключателем */
.period-hint{
    text-align:center;
    font-size:13px;
    color:var(--c-text-muted);
    margin-top:10px;
}

/* метка "хит" на годовом периоде */
.period-switch button .hot{
    display:inline-block;margin-left:6px;
    background:var(--c-orange);color:#fff;
    font-family:var(--font-bold);font-size:10px;
    padding:2px 7px;border-radius:var(--radius-pill);
    letter-spacing:.3px;vertical-align:middle;
}

/* перечёркнутая цена в тарифах */
.plan-old{
    visibility:hidden;      /* при 1 мес скрыта */
    min-height:20px;
    margin-top:2px;
}
.plan-old .oval{
    position:relative;
    display:inline-block;
    color:var(--c-text-muted);
    font-size:14px;
}
/* тонкая цветная линия перечёркивания */
.plan-old .oval:not(:empty)::before{
    content:'';
    position:absolute;
    left:-2px; right:-2px;
    top:50%;
    height:1px;                      /* толщина черты */
    background:var(--c-orange);      /* цвет черты */
    transform:rotate(-6deg);         /* лёгкий наклон, можно убрать */
    opacity:.85;
}
.plan-old .oval:not(:empty)::after{ content:' ₽/мес'; }

/* ===== ГАЛЕРЕЯ ВИДЕО ===== */
.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
}
.video-card{
    background:var(--c-card,#fff);
    border-radius:var(--radius,14px);
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    transition:transform .2s, box-shadow .2s;
    display:flex;flex-direction:column;
}
.video-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.video-card__thumb{
    position:relative;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
}
.video-card__thumb img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .3s, opacity .2s;
}
.video-card:hover .video-card__thumb img{ transform:scale(1.05); }
.video-card__play{
    position:absolute;
    left:50%;top:50%;
    width:60px;height:60px;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,.55);
    color:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;
    padding-left:4px;
    transition:background .2s, transform .2s;
}
.video-card:hover .video-card__play{
    background:var(--c-orange,#e8721c);
    transform:translate(-50%,-50%) scale(1.1);
}
.video-card__body{ padding:16px 18px 20px; }
.video-card__title{
    font-size:17px;line-height:1.3;margin:0 0 4px;
    font-family:var(--font-bold);
}
.video-card__author{
    font-size:13px;color:var(--c-orange,#e8721c);
    margin-bottom:8px;font-weight:600;
}
.video-card__text{
    font-size:14px;line-height:1.5;
    color:var(--c-text-muted,#666);margin:0;
}

/* ===== МОДАЛКА ===== */
.video-modal{
    position:fixed;inset:0;z-index:9999;
    display:none;
    align-items:center;justify-content:center;
    padding:20px;
}
.video-modal.is-open{ display:flex; }
.video-modal__overlay{
    position:absolute;inset:0;
    background:rgba(0,0,0,.8);
    backdrop-filter:blur(3px);
}
.video-modal__box{
    position:relative;z-index:1;
    width:100%;max-width:900px;
    background:var(--c-card,#fff);
    border-radius:14px;
    overflow:hidden;
    max-height:90vh;
    display:flex;flex-direction:column;
    animation:vmIn .25s ease;
}
@keyframes vmIn{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.video-modal__close{
    position:absolute;top:10px;right:14px;z-index:2;
    background:rgba(0,0,0,.5);color:#fff;
    border:none;cursor:pointer;
    width:36px;height:36px;border-radius:50%;
    font-size:24px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
}
.video-modal__close:hover{ background:var(--c-orange,#e8721c); }
.video-modal__player{
    position:relative;
    aspect-ratio:16/9;
    background:#000;
    width:100%;
}
.video-modal__info{
    padding:18px 22px;
    overflow-y:auto;
}
.video-modal__info h3{ margin:0 0 8px;font-size:19px; }
.video-modal__info p{ margin:0;font-size:14px;line-height:1.6;color:var(--c-text-muted,#666); }

@media(max-width:520px){
    .video-modal{ padding:0; align-items:flex-start; }
    .video-modal__box{ max-height:100vh;border-radius:0; }
}

/* ============================================
   СТРАНИЦА КАЛЕНДАРЯ БА-ЦЗЫ
   ============================================ */

.cal-hero__sub{
    max-width:680px;margin:var(--sp-sm) auto 0;
    font-size:var(--fs-base);color:var(--c-purple-soft);
    line-height:1.5;
}

/* раскладка: календарь широкий + панель справа */
.cal-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:var(--sp-lg);
    align-items:start;
}

/* ---------- КАРТОЧКА КАЛЕНДАРЯ ---------- */
.cal-card{
    background:#fff;
    border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:var(--sp-md);
    overflow-x:auto;
}
.cal-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 6px;          /* ✅ 0 по горизонтали, 6px по вертикали */
    text-align:center;
    table-layout:fixed;
}
/* пустые ячейки-разделители между днями */
.cal-table .emp{width:6px;padding:0;border:none}

/* дни недели */
.cal-table .cap td{
    font-family:var(--font-medium);
    font-size:16px;                 /* ⬆ было 14 */
    color:var(--c-purple-soft);
    padding-bottom:12px;
}

/* активные дни месяца — кликабельные */
.cal-day{
    border:2px solid var(--c-border-light);
    border-radius:var(--radius-md);
    padding:14px 6px;               /* ⬆ больше воздуха */
    font-family:var(--font-medium);
    font-size:20px;                 /* ⬆ было 16 */
    color:var(--c-purple);
    cursor:pointer;
    line-height:1.25;
    transition:border-color .15s ease, background .15s ease;
}

.cal-day:hover{
    background:var(--c-orange-soft);
    border-color:var(--c-orange-light);
}
/* иероглиф дня */
.cal-day .zdzz{
    font-size:16px;                 /* ⬆ было 13 */
    color:var(--c-text-muted);
}

/* дни соседних месяцев — приглушённые, некликабельные */
.cal-table .gr{
    color:var(--c-text-muted);
    opacity:.45;
    padding:8px 4px;
    font-size:14px;
}
.cal-table .brd0{border:none}

/* ---------- ЧАСЫ ---------- */
.cal-hours{
    margin-top:var(--sp-md);
    background:#fff;
    border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:var(--sp-sm);
    overflow-x:auto;
}
.cal-hours__table{
    width:100%;
    border-collapse:separate;
    border-spacing:6px 0;
    text-align:center;
}
.cal-hour{
    border:2px solid var(--c-border-light);
    border-radius:var(--radius-md);
    padding:12px 4px;               /* ⬆ */
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    min-width:60px;                 /* ⬆ было 52 */
}
.cal-hour:hover{
    background:var(--c-orange-soft);
    border-color:var(--c-orange-light);
}
.cal-hour b{
    font-size:18px;color:var(--c-purple);
    font-family:var(--font-medium);
}
.cal-hour__time{
    display:block;margin-top:4px;
    font-size:10px;line-height:1.3;
    color:var(--c-text-muted);
}

/* ============ ПРАВАЯ ПАНЕЛЬ ============ */
.cal-side{
    background:#fff;
    border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:var(--sp-lg) var(--sp-md);
    position:sticky;
    top:100px;
}

/* выбранная дата */
.cal-side__date{
    text-align:center;
    margin-bottom:var(--sp-md);
    padding-bottom:var(--sp-md);
    border-bottom:1px solid var(--c-border-light);
}
.cal-side__date .tbzn{
    font-family:var(--font-medium);
    font-size:var(--fs-lg);
    color:var(--c-purple);
}
.cal-side__date .gr{color:var(--c-orange);font-size:15px}

/* периоды */
.cal-periods{
    display:flex;flex-direction:column;gap:12px;
    margin-bottom:var(--sp-md);
    font-size:14px;line-height:1.5;
}
.cal-period__lbl{
    display:block;
    color:var(--c-text-muted);
    font-family:var(--font-medium);
    margin-bottom:2px;
}
.cal-period__val{color:var(--c-text)}
.cal-period__val b{color:var(--c-purple);font-family:var(--font-medium)}
.cal-period__val2{color:var(--c-text-muted);font-size:13px}

/* ---------- КАРТА БА-ЦЗЫ: 4 КОЛОНКИ ВСЕГДА ---------- */
.cal-bazi-wrap{
    overflow-x:auto;
    margin:var(--sp-md) 0;
}
.cal-bazi{
    width:100%;
    max-width:100%;
    border-collapse:collapse;      /* ✅ убирает лишние промежутки/спейсинг */
    table-layout:auto;
}

.cal-bazi{
    width:100%;
    min-width:250px;              /* гарантия, что 4 колонки помещаются */
    border-collapse:separate;
    border-spacing:0;
    text-align:center;
    table-layout:fixed;
}
/* пустые колонки-разделители */
.cal-bazi #te1,.cal-bazi #te2,.cal-bazi #te3,.cal-bazi #te4{
    width:8px;
}
/* заголовки колонок */
.cal-bazi .tlbl td{
    font-family:var(--font-medium);
    font-size:13px;
    color:var(--c-purple-soft);
    padding-bottom:10px;
}
/* иероглифы (Небесные стволы / Земные ветви) */
.cal-bazi .tsmb td{
    font-size:32px;
    line-height:1.2;
    color:var(--c-purple);
    font-family:var(--font-light);
    padding:2px 0;
}
.cal-bazi .tsmb2 td{color:var(--c-orange)}

/* ячейки-иероглифы с фоном-плашкой */
.cal-bazi #bns1,.cal-bazi #bns2,.cal-bazi #bns3,.cal-bazi #bns4,
.cal-bazi #bzv1,.cal-bazi #bzv2,.cal-bazi #bzv3,.cal-bazi #bzv4{
    background:var(--c-bg-grey);
    border-radius:var(--radius-sm);
}
.cal-bazi .thde td{height:6px}



/* слияния / столкновения */
.cal-relations{
    display:flex;flex-direction:column;gap:14px;
    padding-top:var(--sp-md);
    border-top:1px solid var(--c-border-light);
    margin-bottom:var(--sp-md);
}
.cal-rel .txt2{
    display:block;
    font-family:var(--font-medium);
    font-size:14px;
    color:var(--c-text-muted);
    margin-bottom:4px;
}
.cal-rel__val{
    display:block;
    font-size:15px;
    color:var(--c-purple);
    line-height:1.5;
}

/* навигация по месяцам */
.cal-nav{
    display:flex;align-items:center;justify-content:center;
    gap:var(--sp-sm);
    padding-top:var(--sp-md);
    border-top:1px solid var(--c-border-light);
}
.cal-nav__btn{
    width:44px;height:44px;flex-shrink:0;
    border-radius:var(--radius-full);
    background:var(--c-bg-grey);
    color:var(--c-purple);
    display:flex;align-items:center;justify-content:center;
    font-size:24px;line-height:1;
    transition:var(--dur) var(--ease);
}
.cal-nav__btn:hover{
    background:var(--c-orange);color:#fff;
    transform:translateY(-2px);
}
.cal-nav__label{
    font-family:var(--font-medium);
    font-size:var(--fs-lg);
    color:var(--c-purple);
    min-width:90px;text-align:center;
}

/* ============ АДАПТИВ ============ */
@media(max-width:1000px){
    .cal-layout{grid-template-columns:1fr;}
    .cal-side{position:static;top:auto}
}
@media(max-width:560px){
    .cal-day{font-size:14px;padding:6px 2px}
    .cal-day .zdzz{font-size:11px}
    .cal-bazi .tsmb td{font-size:26px}
}

.cal-hint{
    margin-top:var(--sp-md);
    padding-top:var(--sp-md);
    border-top:1px solid var(--c-border-light);
    font-size:13px;
    color:var(--c-text-muted);
    text-align:center;
    line-height:1.5;
}

/* ============================================
   СТРАНИЦА КАЛЬКУЛЯТОРА (форма ввода)
   ============================================ */

.calc-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:var(--sp-lg);
    align-items:start;
}
.calc-main{min-width:0}          /* ✅ не даём распирать grid */

/* ---------- КАРТОЧКА ФОРМЫ ---------- */
.calc-form-card{
    background:#fff;
    border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:var(--sp-lg);
    margin-bottom:var(--sp-lg);
}
.calc-form__title{
    font-family:var(--font-medium);
    font-size:var(--fs-h3);
    color:var(--c-purple);
    margin-bottom:var(--sp-md);
    line-height:1.3;
}

/* поле формы */
.calc-field{margin-bottom:var(--sp-md)}
.calc-field__lbl{
    display:block;
    font-size:14px;
    color:var(--c-text-muted);
    margin-bottom:8px;
}
.calc-field__hint{
    margin-top:8px;
    font-size:13px;
    color:var(--c-text-muted);
}

/* группа селектов (дата / время) */
.calc-selects{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.calc-selects--time{gap:8px}
.calc-colon{font-size:20px;color:var(--c-purple-soft)}

/* селект — единый стиль (как input в контактах) */
.calc-sel,
.calc-input{
    font-family:var(--font-base);
    font-size:16px;
    color:var(--c-text);
    padding:12px 14px;
    border:1.5px solid var(--c-border);
    border-radius:var(--radius-md);
    background:var(--c-bg-grey);
    transition:var(--dur) var(--ease);
    cursor:pointer;
}
.calc-input{cursor:text;width:100%}
.calc-sel{
    /* стрелочка */
    appearance:none;-webkit-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 fill='%23795866' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:34px;
}
.calc-sel--wide{min-width:130px;flex:1}
.calc-sel--full{width:100%}

.calc-sel:focus,
.calc-input:focus{
    outline:none;border-color:var(--c-orange);
    background:#fff;
    box-shadow:0 0 0 3px var(--c-orange-soft);
}

/* радио — пол */
.calc-radios{display:flex;gap:12px;flex-wrap:wrap}
.calc-radio{position:relative;cursor:pointer}
.calc-radio input{position:absolute;opacity:0;pointer-events:none}
.calc-radio__mark{
    display:inline-block;
    padding:12px 26px;
    border:1.5px solid var(--c-border);
    border-radius:var(--radius-pill);
    background:var(--c-bg-grey);
    font-family:var(--font-medium);
    font-size:15px;
    color:var(--c-purple-soft);
    transition:var(--dur) var(--ease);
}
.calc-radio input:checked + .calc-radio__mark{
    border-color:var(--c-orange);
    background:var(--c-orange-soft);
    color:var(--c-orange-dark);
}
.calc-radio input:focus-visible + .calc-radio__mark{
    box-shadow:0 0 0 3px var(--c-orange-soft);
}

/* кнопка отправки */
.calc-submit{
    width:100%;justify-content:center;
    margin-top:var(--sp-xs);
    font-size:16px;padding:15px 32px;
}

/* ---------- ОПИСАНИЕ КАЛЬКУЛЯТОРА ---------- */
.calc-desc{
    font-size:16px;
    line-height:1.7;
    color:var(--c-text);
}
.calc-desc h3{
    font-family:var(--font-medium);
    font-size:var(--fs-h3);
    color:var(--c-purple);
    margin-bottom:var(--sp-sm);
}
.calc-desc a{text-decoration:underline;text-underline-offset:2px}
.calc-desc i{color:var(--c-text-muted)}

/* Заголовок блока описания под калькулятором */
.calc-desc__title {
    font-size:var(--fs-h3);
    font-weight: 600;
    color:var(--c-purple);
    margin-bottom:var(--sp-sm);
    line-height: 1.3;
}


/* ============ ПРАВОЕ МЕНЮ-ПЕРЕКЛЮЧАТЕЛЬ ============ */
.calc-switch{
    background:#fff;
    border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:var(--sp-md);
    position:sticky;
    top:100px;
    min-width:0;
}
.calc-switch__title{
    font-family:var(--font-medium);
    font-size:14px;
    color:var(--c-text-muted);
    margin-bottom:var(--sp-sm);
    padding-bottom:var(--sp-sm);
    border-bottom:1px solid var(--c-border-light);
}
.calc-switch__nav{display:flex;flex-direction:column;gap:6px}

.calc-switch__item{
    display:block;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1.5px solid transparent;
    transition:var(--dur) var(--ease);
}
.calc-switch__item b{
    display:block;
    font-family:var(--font-medium);
    font-size:16px;
    color:var(--c-purple);
    margin-bottom:2px;
}
.calc-switch__item small{
    display:block;
    font-size:13px;
    color:var(--c-text-muted);
    line-height:1.4;
}
a.calc-switch__item:hover{
    background:var(--c-bg-grey);
    border-color:var(--c-border-light);
    transform:translateX(2px);
}
.calc-switch__item.is-active{
    background:var(--c-orange-soft);
    border-color:var(--c-orange-light);
}
.calc-switch__item.is-active b{color:var(--c-orange-dark)}

/* ============ АДАПТИВ ============ */
@media(max-width:1000px){
    .calc-layout{grid-template-columns:1fr}
    .calc-switch{
        position:static;top:auto;
        order:-1;                 /* меню наверх на мобилке */
    }
    .calc-switch__nav{
        flex-direction:row;flex-wrap:wrap;
    }
    .calc-switch__item{flex:1;min-width:140px}
}
@media(max-width:560px){
    .calc-form-card{padding:var(--sp-md)}
    .calc-selects{gap:8px}
    .calc-sel,.calc-input{font-size:15px;padding:11px 12px}
    .calc-radio__mark{padding:11px 20px}
}

/* ============================================
   СТРАНИЦА ВХОДА
   ============================================ */
.login-card{
    max-width:440px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--c-border-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:var(--sp-lg);
}

/* карточка-сообщение (ошибка/успех) */
.login-card--msg{
    text-align:center;
    font-size:16px;
    line-height:1.7;
    color:var(--c-text);
}
.login-card--msg a{text-decoration:underline;text-underline-offset:2px}

/* форма */
.login-form .calc-field:last-of-type{
    margin-bottom:var(--sp-md);
}
.login-form .calc-submit{
    margin-top:0;
}

/* ссылка «Забыли пароль?» (если добавишь) */
.login-forgot{
    display:block;
    text-align:center;
    margin-top:var(--sp-md);
    font-size:14px;
    color:var(--c-text-muted);
}
.login-forgot:hover{color:var(--c-orange)}

/* ============ СТРАНИЦА 404 ============ */
.error-hero{
    padding:var(--sp-2xl) 0;
}

/* Крупная «404» градиентом в бренд-цветах */
.error-code{
    font-family:var(--font-bold);
    font-size:clamp(90px, 20vw, 180px);
    line-height:1;
    margin-bottom:var(--sp-sm);
    background:linear-gradient(135deg, var(--c-purple), var(--c-orange));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--c-purple);          /* фолбэк, если clip не поддержан */
    letter-spacing:2px;
}

.error-hero h1{
    /* наследует .page-hero h1, чуть уменьшим под композицию */
    font-size:var(--fs-h2);
    color:var(--c-bordo);
    margin-bottom:var(--sp-sm);
}

/* Кнопки под текстом — по центру */
.error-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    margin-top:var(--sp-lg);
}

/* Карточки-ссылки на 404 (переопределяем .card под <a>) */
.cards a.card{
    text-decoration:none;
}
.cards a.card:hover .card-link{
    color:var(--c-orange-dark);
}