/* ============================
   GLOBAL — плоская клиника
============================ */
body {
    background:#f4f7f8;
    color:#2a3d4f;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

h1,h2,h3 {
    color:#3c6e8f;
}

/* ============================
   HERO — плоский хирургический
============================ */
.hero {
    background:#e8f1f4;
    padding:80px 20px;
    border-bottom:1px solid #d7e3ea;
    border-radius:2px; /* минимальное скругление */
}

/* ============================
   CTA BUTTON — плоская мята
============================ */
.cta-btn {
    background:#6cc7b2;
    color:#0a0a0a;
    padding:18px 40px;
    border-radius:4px; /* уменьшено */
    font-weight:700;
    font-size:1.2rem;
    text-decoration:none;
    display:inline-block;

    box-shadow:none; /* убрана тень */
    transition:background .2s ease, transform .2s ease;
}

.cta-btn:hover {
    background:#5bb39f;
    transform:translateY(1px);
}

/* ============================
   CARDS — плоские клинические
============================ */
.card {
    border:1px solid #d7e3ea;
    border-radius:4px; /* уменьшено */
    background:#ffffff;
    box-shadow:none; /* плоско */
}

#toc a {
    text-decoration:none;
    color:#3c6e8f;
}
#toc a:hover {
    text-decoration:underline;
}

.equal-card {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    height:100%;
}

/* ============================
   CTA ANIMATIONS — мягкая мята
============================ */
@keyframes ctaPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.cta-pulse { animation: ctaPulse 6s ease-in-out infinite; }

.cta-btn-hover:hover { animation: none; } /* убрал shake для плоскости */

.cta-animated {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.cta-animated.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================
   SVG ICONS — плоские
============================ */
.benefit-icon {
    width:38px;
    height:38px;
    margin-bottom:10px;
    fill:#3c6e8f;
    opacity:0.9;
}

/* ============================
   RELATED LINKS (TILES)
============================ */
.tile {
    background:#ffffff;
    border:1px solid #d7e3ea;
    border-radius:4px; /* уменьшено */
    padding:20px;
    height:100%;
    transition:background .2s ease, transform .2s ease;
}

.tile:hover {
    background:#e8f1f4;
    border-color:#c5d6de;
    transform:translateY(-2px);
}

.tile h5 {
    color:#2a3d4f;
    font-weight:700;
    margin-bottom:6px;
}

.tile p {
    color:#3c6e8f;
    margin:0;
    font-size:0.95rem;
}

.tile-link {
    text-decoration:none;
    color:inherit;
}

/* ============================
   FAQ — плоский ACCORDION
============================ */
.accordion-item {
    border:1px solid #d7e3ea;
    border-radius:4px; /* уменьшено */
    overflow:hidden;
}

.accordion-button {
    background:#e8f1f4;
    color:#2a3d4f;
    font-weight:600;
    border:none;
    box-shadow:none;
    border-radius:0; /* плоско */
}

.accordion-button:not(.collapsed) {
    background:#dce9ee;
    color:#2a3d4f;
}

.accordion-button:hover {
    background:#eef5f7;
}

.accordion-button:focus {
    border-color:#6cc7b2;
    box-shadow:0 0 0 0.15rem rgba(108, 199, 178, 0.45);
}

.accordion-body {
    background:#ffffff;
    color:#2a3d4f;
    border-top:1px solid #d7e3ea;
}

/* ============================
   IMAGES
============================ */
.page-img {
    max-width: 360px;
    border-radius:4px; /* минимальное скругление */
}

@media (max-width: 768px) {
    .page-img {
        float:none !important;
        display:block !important;
        margin:0 auto 24px auto !important;
        width:100% !important;
        max-width:100% !important;
    }
}

/* CTA BOX */
.cta-box {
    background:#e8f1f4;
    border:1px solid #d7e3ea;
    border-radius:4px;
    padding:24px;
    margin-top:24px;
}

.cta-box-title {
    color:#2a3d4f;
    font-weight:800;
    margin-bottom:16px;
}

.cta-box-text {
    font-size:1.05rem;
    color:#3c6e8f;
    font-weight:600;
    margin-bottom:24px;
}

/* BADGES */
.cta-badges {
    margin-bottom:20px;
}

.badge-clinical {
    padding:8px 12px;
    font-weight:700;
    border-radius:4px;
    margin-right:6px;
    display:inline-block;
    color:#0a0a0a;
}

.badge-pink   { background:#f7dfe3; }
.badge-yellow { background:#fceecf; }
.badge-green  { background:#e8f4d9; }
.badge-purple { background:#f2e4ff; }

/* Sticky CTA */
.sticky-cta {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#ecececdd;
    backdrop-filter:blur(6px);
    border-top:1px solid #cfdedb;
    padding:16px 20px;
    z-index:9999;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:opacity .35s ease, transform .35s ease;
}

.sticky-cta.hidden {
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
}

@media (max-width:420px) {
    .sticky-cta { padding:12px; }
    .sticky-cta .cta-btn {
        padding:16px 28px;
        font-size:1.1rem;
    }
}