/* ==========================================================================
   TIME FOR YOU ♡ — Стили сайта бьюти-кабинета
   Концепт: премиальная вырубная визитка-бабочка в пудрово-розовых тонах,
   крупная читаемая типографика, эстетичные пунктирные строчки и плавная анимация
   ========================================================================== */

/* Базовая типографика — крупно, контрастно и легко читаемо */
body {
    background-color: #FAF6F5;
    color: #2C2224;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-size: 18px;
    line-height: 1.65;
    overflow-x: hidden;
    overscroll-behavior: none;
}

/* Пунктирная окантовка как на вырубной визитке */
.dashed-stitch {
    border: 1.5px dashed #C7A4AA;
}
.dashed-stitch-inner {
    border: 1.5px dashed rgba(199, 164, 170, 0.7);
}

.stitch-border {
    position: relative;
}
.stitch-border::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1.5px dashed rgba(181, 123, 132, 0.38);
    border-radius: inherit;
    pointer-events: none;
}

/* Тень для крылышек бабочки */
.butterfly-wing-shadow {
    filter: drop-shadow(0 8px 20px rgba(184, 125, 135, 0.22));
}

/* Медленное вращение VIP-печати по кругу */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 32s linear infinite;
}

/* Анимация живых крылышек бабочки */
@keyframes wingFlutterLeft {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(2.5deg) scale(1.02); }
}
@keyframes wingFlutterRight {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(-2.5deg) scale(1.02); }
}
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.wing-left {
    transform-origin: bottom right;
    animation: wingFlutterLeft 7s ease-in-out infinite;
}
.wing-right {
    transform-origin: bottom left;
    animation: wingFlutterRight 7s ease-in-out infinite;
}
.float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

/* Акварельные пятна и градиенты */
.watercolor-brush {
    background: radial-gradient(ellipse at center, rgba(216, 180, 188, 0.42) 0%, rgba(244, 234, 232, 0.25) 55%, transparent 75%);
}

/* Кастомный скроллбар в пудровых тонах */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FAF6F5;
}
::-webkit-scrollbar-thumb {
    background: #D8B4BC;
    border-radius: 9999px;
    border: 2px solid #FAF6F5;
}
::-webkit-scrollbar-thumb:hover {
    background: #B57B84;
}

/* Стилизация кнопок */
.btn-mauve {
    background: linear-gradient(135deg, #9E5A63 0%, #874952 100%);
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-mauve:hover {
    background: linear-gradient(135deg, #874952 0%, #6E3840 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px rgba(158, 90, 99, 0.42);
}
.btn-mauve:active {
    transform: translateY(0);
}

/* Фиксированная высота кнопок CTA: 52px — хорошо читается, легко нажимается */
.h-13 {
    height: 3.25rem; /* 52px */
}

/* FAQ аккордеон плавное раскрытие */
.material-symbols-outlined.fill-1 {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
}
.faq-answer.open {
    max-height: 300px;
    opacity: 1;
}

/* Иконка стрелочки FAQ */
.faq-icon {
    transition: transform 0.3s ease;
}
.faq-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Акцентные карточки с деликатной строчкой */
.luxury-card {
    background: #FFFFFF;
    border: 1px solid #EED8DC;
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px -2px rgba(184, 125, 135, 0.08);
    transition: all 0.3s ease;
}
.luxury-card:hover {
    border-color: #D8B4BC;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(184, 125, 135, 0.16);
}

/* Линия шагов (Схема работы) */
.step-connector {
    background: repeating-linear-gradient(to right, #D8B4BC 0, #D8B4BC 6px, transparent 6px, transparent 12px);
}