/* ============================
 * Landing Pages — Shared Styles
 * css/landing-pages.css
 *
 * Universal classes for all SEO landing pages.
 * Replaces per-page prefixed classes (dt-, an-, sv-, pb-, etc.)
 * ============================ */

/* ============================
 * Hero Section
 * ============================ */
.lp-hero {
    padding: 50px 0 60px !important;
}

/* ============================
 * Section Padding
 * ============================ */
.lp-section {
    padding: 60px 0 !important;
}

@media (max-width: 767.98px) {
    .lp-hero,
    .lp-section {
        padding: 36px 0 !important;
    }
}

/* ============================
 * Lead Text (under H1)
 * ============================ */
.lp-lead {
    max-width: 740px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.65;
    color: #555;
}

/* ============================
 * Cards
 * ============================ */
.lp-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

@media (max-width: 575.98px) {
    .lp-card {
        padding: 22px 20px;
        border-radius: 14px;
    }
}

.lp-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
    line-height: 1.3;
}

.lp-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #555;
    margin: 0 0 10px;
}

.lp-card p:last-child {
    margin-bottom: 0;
}

/* ============================
 * Grid Layouts
 * ============================ */
.lp-grid {
    display: grid;
    gap: 16px;
    margin-top: 10px;
}

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

.lp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

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

@media (max-width: 767.98px) {
    .lp-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ============================
 * Icon (in cards)
 * ============================ */
.lp-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.lp-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================
 * Article Text
 * ============================ */
.lp-article {
    max-width: 820px;
    margin: 0 auto;
}

.lp-article p {
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 16px;
}

.lp-article p:last-child {
    margin-bottom: 0;
}

.lp-article strong {
    color: #222;
}

.lp-article ul {
    padding: 0 0 0 20px;
    margin: 0 0 16px;
}

.lp-article ul li {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 6px;
}

/* ============================
 * Highlight Block
 * ============================ */
.lp-highlight {
    background: #fff4e6;
    border-left: 4px solid #F18E90;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
}

.lp-highlight p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #444;
}

/* ============================
 * Warning Block (red)
 * ============================ */
.lp-warn {
    background: #fff0f0;
    border-left: 4px solid #dc2626;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
}

.lp-warn p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #444;
}

/* ============================
 * Comparison Cards (2-col)
 * ============================ */
.lp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .lp-compare {
        grid-template-columns: 1fr;
    }
}

.lp-compare-card {
    border-radius: 16px;
    padding: 28px;
}

.lp-compare-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
}

.lp-compare-card ul {
    padding: 0 0 0 18px;
    margin: 0;
}

.lp-compare-card li {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 8px;
}

.lp-compare-card--other {
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(0, 0, 0, 0.15);
}

.lp-compare-card--other h3 { color: #222; }
.lp-compare-card--other li { color: #555; }

.lp-compare-card--us {
    background: linear-gradient(135deg, #F18E90 0%, #e25da0 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(242, 142, 144, 0.3);
}

.lp-compare-card--us h3,
.lp-compare-card--us li { color: #fff; }

/* 3-column comparison (red/yellow/green) */
.lp-compare-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .lp-compare-3 {
        grid-template-columns: 1fr;
    }
}

.lp-compare-card--red { background: #fff0f0; border: 1px solid rgba(220, 38, 38, 0.2); }
.lp-compare-card--red h3 { color: #dc2626; }
.lp-compare-card--yellow { background: #fffbeb; border: 1px solid rgba(234, 179, 8, 0.3); }
.lp-compare-card--yellow h3 { color: #b45309; }
.lp-compare-card--green { background: #f0fdf4; border: 1px solid rgba(34, 197, 94, 0.3); }
.lp-compare-card--green h3 { color: #15803d; }

.lp-compare-card p {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 8px;
}

.lp-compare-card p:last-child {
    margin-bottom: 0;
}

/* ============================
 * Steps (numbered circles)
 * ============================ */
.lp-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.lp-step:last-child {
    margin-bottom: 0;
}

.lp-step-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F18E90 0%, #e25da0 100%);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-step-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin: 0 0 6px;
}

.lp-step-body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* ============================
 * Timeline (vertical line + dots)
 * ============================ */
.lp-timeline {
    position: relative;
    max-width: 820px;
    margin: 24px auto 0;
}

.lp-timeline::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(241, 142, 144, 0.3);
}

.lp-tl-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 24px;
    position: relative;
}

.lp-tl-item:last-child {
    margin-bottom: 0;
}

.lp-tl-dot {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #F18E90;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #F18E90;
    z-index: 1;
}

.lp-tl-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px;
}

.lp-tl-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* ============================
 * Notify Steps (dot + text)
 * ============================ */
.lp-notify-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.lp-notify-step:last-child {
    margin-bottom: 0;
}

.lp-notify-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #F18E90;
    margin-top: 6px;
}

.lp-notify-body {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

.lp-notify-body strong {
    color: #222;
}

/* ============================
 * Age / Data Table
 * ============================ */
.lp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.lp-table th,
.lp-table td {
    padding: 14px 18px;
    text-align: left;
    font-size: 14.5px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lp-table th {
    font-weight: 700;
    color: #222;
    background: rgba(74, 176, 230, 0.08);
}

.lp-table td {
    color: #444;
}

@media (max-width: 575.98px) {
    .lp-table th,
    .lp-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ============================
 * District Tags
 * ============================ */
.lp-district-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.lp-district-tag {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.2s;
}

.lp-district-tag:hover {
    background: rgba(74, 176, 230, 0.08);
}

/* ============================
 * FAQ — Pink Dot Animation
 * ============================ */
.lp-faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lp-faq-item:last-child {
    border-bottom: none;
}

.lp-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    cursor: pointer;
    gap: 16px;
}

.lp-faq-q h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    padding-left: 22px;
    position: relative;
}

.lp-faq-dot {
    position: absolute;
    left: 0;
    top: 0.75em;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F18E90;
}

.lp-faq-item.open .lp-faq-q h3 {
    padding-left: 0;
    transition: padding-left 0.3s 0.1s;
}

.lp-faq-item:not(.open):not(.closing) .lp-faq-q h3 {
    transition: padding-left 0.3s 0.2s;
}

.lp-faq-item.closing .lp-faq-q h3 {
    padding-left: 22px;
    transition: padding-left 0.3s 0.2s;
}

.lp-faq-item.open .lp-faq-dot {
    animation: lpDotLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.lp-faq-item.closing .lp-faq-dot {
    animation: lpDotRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lpDotLeft {
    0%   { left: 0; opacity: 1; }
    15%  { left: 12px; opacity: 1; }
    100% { left: -95vw; opacity: 0; }
}

@keyframes lpDotRight {
    0%   { left: -95vw; opacity: 0; }
    85%  { opacity: 1; }
    100% { left: 0; opacity: 1; }
}

.lp-faq-chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
    color: #006bd8;
}

.lp-faq-item.open .lp-faq-chevron {
    transform: rotate(180deg);
}

.lp-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0;
}

.lp-faq-item.open .lp-faq-a {
    max-height: 400px;
    padding: 0 0 20px 0;
}

.lp-faq-a p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

/* ============================
 * CTA Button (green gradient)
 * ============================ */
.lp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 44px;
    background: linear-gradient(135deg, #029969 0%, #04b87f 100%);
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(2, 153, 105, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.lp-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(2, 153, 105, 0.4);
    color: #fff !important;
}

.lp-cta-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

/* ============================
 * CTA Section Override
 * ============================ */
.lp-cta-section .ld-fh-element {
    color: #fff !important;
}

.lp-cta-section p.ld-fh-element {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================
 * Text-Align Left Overrides (mobile)
 * Beats global center from _func.php
 * ============================ */
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-article,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-article p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-article ul,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-highlight,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-highlight p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-warn,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-warn p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-faq-item,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-faq-q h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-faq-a p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-step,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-step-body h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-step-body p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-tl-item,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-tl-body h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-tl-body p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-notify-step,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-notify-body,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-compare-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-compare-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-compare-card li,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-compare-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-table th,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .lp-table td {
    text-align: left !important;
}

/* ── /avtonyanya-otzyvy page components ── */
.ao-story-tag {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: rgba(242,142,144,0.15); color: #c95a5c;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.ao-trust-icon {
    width: 46px; height: 46px; min-width: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.ao-trust-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ao-check-list { list-style: none; padding: 0; margin: 0; }
.ao-check-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ao-check-list li:last-child { border-bottom: none; }
.ao-check-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: rgba(2,153,105,0.12); display: flex; align-items: center; justify-content: center;
}
.ao-check-icon svg { width: 16px; height: 16px; stroke: #029969; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── avtonyanya-cena ── */
.ac-hero{padding:50px 0 60px!important}
#ac-factors{padding:60px 0!important}
#ac-includes{padding:60px 0!important}
#ac-examples{padding:60px 0!important}
#ac-compare{padding:60px 0!important}
#ac-steps{padding:60px 0!important}
#ac-faq{padding:60px 0!important}
#ac-cta{padding:70px 0!important}
@media(max-width:767.98px){
	.ac-hero,#ac-factors,#ac-includes,#ac-examples,#ac-compare,#ac-steps,#ac-faq,#ac-cta{padding:36px 0!important}
}
/* Factor cards */
.ac-factor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:767.98px){.ac-factor-grid{grid-template-columns:1fr}}
.ac-factor-card{background:#fff;border-radius:14px;padding:22px 22px;display:flex;gap:16px;align-items:flex-start;border:1px solid rgba(0,0,0,0.05);transition:transform .3s,box-shadow .3s}
.ac-factor-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,107,217,0.1)}
.ac-factor-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:rgba(242,142,144,0.12);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#F18E90;font-family:'Roboto',-apple-system,sans-serif}
.ac-factor-title{font-size:15px;font-weight:700;color:#222;margin-bottom:4px;line-height:1.3}
.ac-factor-text{font-size:13.5px;line-height:1.55;color:#666;margin:0}
/* Includes cards */
.ac-inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
@media(max-width:991.98px){.ac-inc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.ac-inc-grid{grid-template-columns:1fr}}
.ac-inc-card{background:#fff;border-radius:14px;padding:20px;display:flex;gap:14px;align-items:flex-start;text-align:left!important}
.ac-inc-icon{flex-shrink:0;width:42px;height:42px;border-radius:10px;background:rgba(74,176,230,0.12);display:flex;align-items:center;justify-content:center;color:#4ab0e6}
.ac-inc-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ac-inc-title{font-size:15px;font-weight:700;color:#222;margin-bottom:6px;line-height:1.3}
.ac-inc-text{font-size:13.5px;line-height:1.55;color:#666;margin:0}
/* Route examples */
.ac-routes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:767.98px){.ac-routes{grid-template-columns:1fr}}
.ac-route{background:#fff;border-radius:14px;padding:20px 22px;display:flex;align-items:flex-start;gap:16px;border:1px solid rgba(0,0,0,0.06);transition:border-color .3s,transform .3s}
.ac-route:hover{border-color:#F18E90;transform:translateX(2px)}
.ac-route-pin{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:rgba(242,142,144,0.12);display:flex;align-items:center;justify-content:center;color:#F18E90}
.ac-route-pin svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.ac-route-body{flex:1;min-width:0}
.ac-route-title{font-size:15px;font-weight:600;color:#222;margin-bottom:4px;line-height:1.3}
.ac-route-meta{font-size:13px;color:#888;display:flex;flex-wrap:wrap;gap:10px}
.ac-route-meta span{display:inline-flex;align-items:center;gap:4px}
.ac-route-price{flex-shrink:0;font-size:20px;font-weight:800;color:#006bd8;font-family:'Roboto',-apple-system,sans-serif;white-space:nowrap}
/* Compare cards */
.ac-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:767.98px){.ac-compare{grid-template-columns:1fr}}
.ac-compare-card{border-radius:16px;padding:28px;text-align:center}
.ac-compare-card--single{background:rgba(255,255,255,0.6);border:1px dashed rgba(0,0,0,0.15)}
.ac-compare-card--regular{background:linear-gradient(135deg,#F18E90 0%,#e25da0 100%);color:#fff;box-shadow:0 10px 30px rgba(242,142,144,0.3)}
.ac-compare-badge{display:inline-block;background:rgba(255,255,255,0.25);padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px}
.ac-compare-label{font-size:14px;color:#666;margin-bottom:10px}
.ac-compare-card--regular .ac-compare-label{color:rgba(255,255,255,0.9)}
.ac-compare-amount{font-size:36px;font-weight:800;color:#222;line-height:1;font-family:'Roboto',-apple-system,sans-serif}
.ac-compare-card--regular .ac-compare-amount{color:#fff}
.ac-compare-sub{font-size:13px;color:#888;margin-top:8px}
.ac-compare-card--regular .ac-compare-sub{color:rgba(255,255,255,0.85)}
.ac-highlight{margin-top:24px;padding:18px 22px;background:#fff4e6;border-radius:12px;border-left:4px solid #F18E90}
.ac-highlight p{font-size:14.5px;line-height:1.6;color:#555;margin:0}
/* Steps */
.ac-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
@media(max-width:767.98px){.ac-steps-grid{grid-template-columns:1fr}}
.ac-step{background:#fff;border-radius:16px;padding:28px 22px;text-align:center;border:1px solid rgba(0,0,0,0.05)}
.ac-step-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#029969,#04b87f);color:#fff;font-size:20px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.ac-step-title{font-size:16px;font-weight:700;color:#222;margin-bottom:8px}
.ac-step-text{font-size:14px;line-height:1.6;color:#666;margin:0}
/* CTA button */
.ac-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 44px;background:linear-gradient(135deg,#029969 0%,#04b87f 100%);color:#fff!important;font-size:17px;font-weight:700;border-radius:12px;text-decoration:none!important;box-shadow:0 6px 20px rgba(2,153,105,0.3);transition:transform .3s,box-shadow .3s}
.ac-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,153,105,0.4);color:#fff!important}
.ac-cta-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none}
/* FAQ */
.ac-faq-item{border-bottom:1px solid rgba(0,0,0,0.08)}
.ac-faq-item:last-child{border-bottom:none}
.ac-faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;gap:16px}
.ac-faq-q h3{margin:0;font-size:17px;font-weight:600;line-height:1.4;padding-left:22px;position:relative}
.ac-faq-dot{position:absolute;left:0;top:0.75em;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#F18E90}
.ac-faq-item.open .ac-faq-q h3{padding-left:0;transition:padding-left .3s .1s}
.ac-faq-item:not(.open):not(.closing) .ac-faq-q h3{padding-left:22px;transition:padding-left .3s .2s}
.ac-faq-item.closing .ac-faq-q h3{padding-left:22px;transition:padding-left .3s .2s}
.ac-faq-item.open .ac-faq-dot{animation:acDotLeft .5s cubic-bezier(0.4,0,0.2,1) forwards}
.ac-faq-item.closing .ac-faq-dot{animation:acDotRight .5s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes acDotLeft{0%{left:0;opacity:1}15%{left:12px;opacity:1}100%{left:-95vw;opacity:0}}
@keyframes acDotRight{0%{left:-95vw;opacity:0}85%{opacity:1}100%{left:0;opacity:1}}
.ac-faq-chevron{flex-shrink:0;width:24px;height:24px;transition:transform .3s;color:#006bd8}
.ac-faq-item.open .ac-faq-chevron{transform:rotate(180deg)}
.ac-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0}
.ac-faq-item.open .ac-faq-a{max-height:400px;padding:0 0 20px 0}
.ac-faq-a p{margin:0;font-size:16px;line-height:1.7;color:#555}
/* Ruble */
span.rub{font-family:Arial,'Helvetica Neue',sans-serif!important;font-weight:inherit!important;display:inline;margin-left:0.1em}
span.rub::before{content:"\20BD"}
/* Mobile text-align overrides */
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-factor-title,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-factor-text,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-inc-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-inc-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-inc-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-inc-title,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-inc-text,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-route-title,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-route-meta,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-faq-q h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-faq-a p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-step-text,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ac-highlight p{text-align:left!important}
<section class="lqd-section image-bg transition-all" id="ac-cta" style="background:linear-gradient(135deg,#e25da0 0%,#f4845f 100%);position:relative;">
	<div class="container" style="position:relative;z-index:2;">
		<div class="row items-center">
			<div class="col col-12 col-lg-7">
				<div class="ld-fancy-heading uppercase">
					<h6 class="ld-fh-element mb-1em" style="color:rgba(255,255,255,0.85);">Расчёт за&nbsp;30&nbsp;секунд</h6>
				</div>
				<h2 class="ld-fh-element mb-0 text-40 tracking-0" style="color:#fff!important;">Узнайте цену за&nbsp;30&nbsp;секунд</h2>
				<p class="ld-fh-element text-18" style="color:rgba(255,255,255,0.85)!important;margin-top:20px;">Укажите адреса, время и&nbsp;количество детей — и&nbsp;увидите точную стоимость. Без звонков, без скрытых доплат.</p>
			</div>
			<div class="col col-12 text-center mt-30">
				<a class="ac-cta-btn" href="/app/order" style="background:rgba(255,255,255,0.2);box-shadow:0 4px 20px rgba(0,0,0,0.15);">
					Рассчитать стоимость
					<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
				</a>
			</div>
		</div>
	</div>
</section>

<!-- JSON-LD FAQPage -->
<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "FAQPage",
	"mainEntity": [
		{
			"@type": "Question",
			"name": "Какая минимальная цена поездки с автоняней?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Минимальная стоимость поездки — от 800 ₽. Это короткий маршрут в одну сторону (до 5–6 км) при регулярном расписании. Разовая поездка по такому же маршруту будет немного дороже."
			}
		},
		{
			"@type": "Question",
			"name": "Может ли цена измениться после оформления?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Нет. Цена фиксируется при оформлении и не меняется — даже если маршрут оказался длиннее из-за пробок или объездов. Рискует сервис, а не вы."
			}
		},
		{
			"@type": "Question",
			"name": "Нужно ли доплачивать за детское кресло?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Нет. Детское кресло или бустер под возраст ребёнка уже входит в стоимость. Автоняня приезжает с подходящим удерживающим устройством."
			}
		},
		{
			"@type": "Question",
			"name": "Как оплачивается поездка?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Онлайн через личный кабинет. Стоимость фиксируется при оформлении. Автоняне на руки деньги передавать не нужно."
			}
		},
		{
			"@type": "Question",
			"name": "Есть ли скидки при регулярных поездках?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Да. При оформлении регулярного расписания (от 8 поездок в месяц) система автоматически применяет сниженный тариф. Скидка рассчитывается сразу — договариваться ни с кем не нужно."
			}
		},
		{
			"@type": "Question",
			"name": "Что если отменить поездку — деньги вернутся?",
			"acceptedAnswer": {
				"@type": "Answer",
				"text": "Отмена заблаговременно — бесплатно, деньги возвращаются полностью. Если отмена произошла близко к времени подачи, часть стоимости удерживается в пользу автоняни за выделенное время."
			}
		}
	]
}
</script>

<script>
function acFaqToggle(item){
	if(item.classList.contains('open')){
		item.classList.remove('open');
		item.classList.add('closing');
		setTimeout(function(){item.classList.remove('closing')},400);
	}else{
		item.classList.add('open');
	}
}
</script>

<?php
page_footer();
?>

/* ── vakansiya-avtonyanya ── */
.nanny-hero{padding:60px 0!important}
#nanny-income{padding:60px 0!important}
#nanny-perks{padding:70px 0!important}
#nanny-why{padding:60px 0!important}
#nanny-duties{padding:60px 0!important}
#nanny-who{padding:60px 0!important}
#nanny-start{padding:60px 0!important}
#nanny-faq{padding:60px 0!important}
#nanny-cta{padding:70px 0!important}
@media(max-width:767.98px){
	.nanny-hero,#nanny-income,#nanny-perks,#nanny-why,#nanny-duties,#nanny-who,#nanny-start,#nanny-faq,#nanny-cta{padding:30px 0!important}
	/* Равный отступ между рядами преимуществ */
	#wrap > main section#nanny-why .nanny-why-row2 > .col:first-child .iconbox{margin-top:0!important}
	#wrap > main section#nanny-why .row > .col:last-child .iconbox{margin-bottom:24px!important}
	#wrap > main section#nanny-why .row:last-child > .col:last-child .iconbox{margin-bottom:0!important}
}
/* Убрать слипание uppercase заголовков в iconbox */
#nanny-why .iconbox h3.text-14{letter-spacing:0.02em!important;word-spacing:0.15em!important}
/* Hero: скрыть субтитль на мобильном чтобы не налезал */
@media(max-width:767.98px){
	.nanny-hero .ld-fancy-heading.uppercase{display:none!important}
}
/* Mobile: force left-align on key sections overriding global center */
@media(max-width:991.98px){
	/* Карточки Требования/Обязанности */
	#wrap > main section#nanny-who.lqd-section .nanny-card,
	#wrap > main section#nanny-who.lqd-section .nanny-card h6,
	#wrap > main section#nanny-who.lqd-section .nanny-card h3,
	#wrap > main section#nanny-who.lqd-section .nanny-card li,
	#wrap > main section#nanny-who.lqd-section .nanny-card p{text-align:left!important}
	/* FAQ */
	#wrap > main section#nanny-faq.lqd-section,
	#wrap > main section#nanny-faq.lqd-section .nanny-faq-q h3,
	#wrap > main section#nanny-faq.lqd-section .nanny-faq-a p,
	#wrap > main section#nanny-faq.lqd-section h3,
	#wrap > main section#nanny-faq.lqd-section p{text-align:left!important}
}
.nanny-income-num{font-size:clamp(36px,6vw,56px);font-weight:800;color:#006bd8;line-height:1.1;font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
/* Override global text-align:center for FAQ and cards */
#wrap > main section#nanny-faq .nanny-faq-q h3,
#wrap > main section#nanny-faq .nanny-faq-a p{text-align:left!important}
#wrap > main section#nanny-who .nanny-card h6,
#wrap > main section#nanny-who .nanny-card h3,
#wrap > main section#nanny-who .nanny-list li{text-align:left!important}
#wrap > main section#nanny-perks.lqd-section .perk-card,
#wrap > main section#nanny-perks.lqd-section .perk-card h3.perk-title,
#wrap > main section#nanny-perks.lqd-section .perk-card p.perk-text{text-align:left!important}
/* Force left-align on iconbox sections */
#wrap > main section#nanny-why.lqd-section .iconbox,
#wrap > main section#nanny-why.lqd-section .iconbox h3,
#wrap > main section#nanny-why.lqd-section .iconbox p,
#wrap > main section#nanny-why.lqd-section .iconbox .contents,
#wrap > main section#nanny-start.lqd-section .iconbox,
#wrap > main section#nanny-start.lqd-section .iconbox h3,
#wrap > main section#nanny-start.lqd-section .iconbox p,
#wrap > main section#nanny-start.lqd-section .iconbox .contents{text-align:left!important}
.nanny-income-label{font-size:15px;color:#888;margin-top:6px}
#nanny-perks{background:linear-gradient(135deg,#2c5aa6 0%,#6b4eca 60%,#b248f5 100%);position:relative;overflow:hidden}
#nanny-perks::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,0.12) 0%,transparent 45%),radial-gradient(circle at 85% 80%,rgba(255,255,255,0.08) 0%,transparent 50%);pointer-events:none}
#nanny-perks .container{position:relative;z-index:2}
#nanny-perks .ld-fh-element{color:#fff!important}
#nanny-perks h6.ld-fh-element{color:rgba(255,255,255,0.85)!important}
.perk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:10px}
.perk-card{background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:28px;color:#fff;opacity:0;transform:translateY(30px);transition:transform .7s cubic-bezier(0.34,1.2,0.64,1),opacity .5s ease,background .3s,border-color .3s}
.perk-card.perk-in{opacity:1;transform:translateY(0)}
.perk-card:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.3)}
.perk-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,0.25),rgba(255,255,255,0.1));display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:#fff}
.perk-icon svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.perk-title{font-size:17px;font-weight:700;margin:0 0 10px;color:#fff;line-height:1.3}
.perk-text{font-size:14.5px;line-height:1.6;margin:0;color:rgba(255,255,255,0.88)}
@media(max-width:575.98px){.perk-grid{grid-template-columns:1fr}}
.perk-card.perk-in:nth-child(1){transition-delay:0s}
.perk-card.perk-in:nth-child(2){transition-delay:0.1s}
.perk-card.perk-in:nth-child(3){transition-delay:0.2s}
.perk-card.perk-in:nth-child(4){transition-delay:0.3s}
.nanny-card{background:#fff;border-radius:16px;padding:32px 28px;height:100%}
.nanny-card h6{color:#4ab0e6;text-transform:uppercase;letter-spacing:0.1em;font-size:11px;font-weight:700;margin-bottom:12px}
.nanny-card h3{font-size:22px;font-weight:700;margin-bottom:20px}
.nanny-list{list-style:none;padding:0;margin:0}
.nanny-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.7;color:#555;margin-bottom:12px}
.nanny-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:#F18E90}
.nanny-steps{display:flex;justify-content:center;gap:0;position:relative;counter-reset:step}
.nanny-step{flex:1;max-width:220px;text-align:center;position:relative;padding:0 10px}
.nanny-step-circle{width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid #F18E90;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:2;font-size:18px;font-weight:700;color:#F18E90}
.nanny-step-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;color:#222}
.nanny-step-text{font-size:14px;line-height:1.5;color:#666}
.nanny-step-text a{color:#006bd8}
/* Connector line between circles */
.nanny-step:not(:last-child)::after{content:"";position:absolute;top:26px;left:calc(50% + 30px);width:calc(100% - 60px);height:2px;background:#F18E90;opacity:0.3;z-index:1}
@media(max-width:991.98px){
	.nanny-steps{flex-direction:column;align-items:stretch;gap:0;padding:0 15px}
	.nanny-step{max-width:none;display:flex;align-items:flex-start;text-align:left;padding:0 0 28px 0;gap:16px}
	.nanny-step-circle{margin:0;flex-shrink:0}
	.nanny-step-body{flex:1}
	.nanny-step:not(:last-child)::after{top:52px;left:25px;width:2px;height:calc(100% - 52px);z-index:1}
}
.nanny-faq-item{border-bottom:1px solid rgba(0,0,0,0.08)}
.nanny-faq-item:last-child{border-bottom:none}
.nanny-faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;gap:16px}
.nanny-faq-q h3{margin:0;font-size:17px;font-weight:600;line-height:1.4;display:flex;align-items:center}
.nanny-faq-dot{position:absolute;left:0;top:0.75em;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#F18E90}
.nanny-faq-q h3{padding-left:22px;position:relative}
.nanny-faq-item.open .nanny-faq-q h3{padding-left:0;transition:padding-left 0.3s 0.1s}
.nanny-faq-item:not(.open):not(.closing) .nanny-faq-q h3{padding-left:22px;transition:padding-left 0.3s 0.2s}
.nanny-faq-item.closing .nanny-faq-q h3{padding-left:22px;transition:padding-left 0.3s 0.2s}
.nanny-faq-item.open .nanny-faq-dot{animation:dotFlyLeft 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
.nanny-faq-item.closing .nanny-faq-dot{animation:dotFlyRight 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes dotFlyLeft{0%{left:0;opacity:1}15%{left:12px;opacity:1}100%{left:-95vw;opacity:0}}
@keyframes dotFlyRight{0%{left:-95vw;opacity:0}85%{opacity:1}100%{left:0;opacity:1}}
.nanny-faq-q .nanny-faq-chevron{flex-shrink:0;width:24px;height:24px;transition:transform 0.3s;color:#006bd8}
.nanny-faq-item.open .nanny-faq-chevron{transform:rotate(180deg)}
.nanny-faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease;padding:0}
.nanny-faq-item.open .nanny-faq-a{max-height:300px;padding:0 0 20px 0}
.nanny-faq-a p{margin:0;font-size:16px;line-height:1.7;color:#555}
/* Round avatars with pink border drop animation */
#testimonials .testi-avatar-wrap{position:relative;display:inline-block;width:83px;height:83px;border-radius:50%;overflow:hidden;flex-shrink:0;margin-right:15px}
#testimonials .testi-avatar-wrap img{width:75px;height:75px;object-fit:cover;border-radius:50%;display:block;position:absolute;top:4px;left:4px}
#testimonials .testi-avatar-ring{position:absolute;inset:0;border-radius:50%;border:4px solid #F18E90;opacity:0;transform:translateY(-40px);pointer-events:none;z-index:2}
#testimonials h5 small{font-family:'Roboto',Arial,Helvetica,sans-serif;font-weight:400;font-size:13px;color:#888}
#testimonials .testi-avatar-wrap.ring-drop .testi-avatar-ring{animation:ringDrop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes ringDrop{
	0%{opacity:0;transform:translateY(-40px)}
	40%{opacity:1;transform:translateY(3px)}
	70%{transform:translateY(-2px)}
	100%{opacity:1;transform:translateY(0)}
}
<section class="lqd-section image-bg transition-all" id="nanny-cta" style="background:linear-gradient(135deg,#e25da0 0%,#f4845f 100%);position:relative;">
	<div class="container" style="position:relative;z-index:2;">
		<div class="row items-center">
			<div class="col col-12 col-lg-7">
				<div class="ld-fancy-heading uppercase">
					<h6 class="ld-fh-element mb-1em" style="color:rgba(255,255,255,0.85);">Начните сегодня</h6>
				</div>
				<h2 class="ld-fh-element mb-0 text-40 tracking-0" style="color:#fff!important;">Готовы присоединиться?</h2>
				<p class="ld-fh-element text-18" style="color:rgba(255,255,255,0.85)!important;margin-top:20px;">Зарегистрируйтесь, заполните анкету — и начните зарабатывать<br>в удобном для себя режиме.</p>
			</div>
			<div class="col col-12 text-center mt-30">
				<a href="/app/register" class="btn font-bold text-14 btn-solid text-white uppercase border-thin btn-hover-swp leading-1/5em tracking-0/1em hover:text-white" style="background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5);border-radius:9999px;display:inline-flex;max-width:100%;">
					<span class="inline-flex py-1/5em px-3/5em items-center">
						<span class="btn-txt" data-text="Зарегистрироваться">Зарегистрироваться</span>
						<span class="btn-icon"><i class="lqd-icn-ess icon-md-arrow-forward"></i></span>
						<span class="btn-icon"><i class="lqd-icn-ess icon-md-arrow-forward"></i></span>
					</span>
				</a>
			</div>
		</div>
	</div>
</section>

<script>
function nannyFaqToggle(item) {
	if (item.classList.contains('open')) {
		item.classList.remove('open');
		item.classList.add('closing');
		setTimeout(function(){ item.classList.remove('closing'); }, 400);
	} else {
		item.classList.add('open');
	}
}
(function(){
	['nanny-why'].forEach(function(id){
		var section = document.getElementById(id);
		if (!section) return;
		var circles = section.querySelectorAll('.sp-circle-wrap');
		if (!circles.length) return;
		var io = new IntersectionObserver(function(entries) {
			entries.forEach(function(e) {
				if (e.isIntersecting) {
					circles.forEach(function(c){ c.classList.add('sp-animated'); });
					io.disconnect();
				}
			});
		}, { threshold: 0.3 });
		io.observe(section);
	});
})();
</script>

<!-- JSON-LD: JobPosting -->
<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "JobPosting",
	"title": "Автоняня — водитель-сопровождающий детей",
	"description": "Работа автоняней в Москве и Подмосковье. Сопровождение детей на автомобиле: школа, секции, врач. Гибкий график, доход 60 000–120 000 ₽ в месяц, страхование поездок.",
	"datePosted": "<?= date('Y-m-d') ?>",
	"validThrough": "<?= date('Y-m-d', strtotime('+6 months')) ?>",
	"employmentType": ["PART_TIME", "FULL_TIME", "CONTRACTOR"],
	"hiringOrganization": {
		"@type": "Organization",
		"name": "Добрая Тётя",
		"sameAs": "https://<?= defined('APP_BRAND_DOMAIN') ? APP_BRAND_DOMAIN : 'добраятётя.рф' ?>",
		"logo": "https://xn--80abi4blna6hcs.xn--p1ai/img/logo.png"
	},
	"jobLocation": {
		"@type": "Place",
		"address": {
			"@type": "PostalAddress",
			"addressLocality": "Москва",
			"addressRegion": "Московская область",
			"addressCountry": "RU"
		}
	},
	"baseSalary": {
		"@type": "MonetaryAmount",
		"currency": "RUB",
		"value": {
			"@type": "QuantitativeValue",
			"minValue": 60000,
			"maxValue": 120000,
			"unitText": "MONTH"
		}
	},
	"applicantLocationRequirements": {
		"@type": "Country",
		"name": "RU"
	}
}
</script>

<!-- JSON-LD: FAQPage -->
<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "FAQPage",
	"mainEntity": [
		{"@type": "Question", "name": "Какие требования к автомобилю?", "acceptedAnswer": {"@type": "Answer", "text": "Собственный автомобиль не старше 10 лет, технически исправный, с чистым салоном. Наличие детского кресла или бустера — обязательно."}},
		{"@type": "Question", "name": "Нужен ли опыт работы с детьми?", "acceptedAnswer": {"@type": "Answer", "text": "Не обязателен. Важны доброжелательность, внимательность и спокойный характер. Перед началом работы вы пройдёте инструктаж."}},
		{"@type": "Question", "name": "Как оформляется работа?", "acceptedAnswer": {"@type": "Answer", "text": "Работа по договору. Выплаты на счёт самозанятого или ИП. Все расчёты официальные и прозрачные."}},
		{"@type": "Question", "name": "Что если я не смогу выйти на поездку?", "acceptedAnswer": {"@type": "Answer", "text": "Предупредите заранее — координатор подберёт замену. Уважительные причины отказа не влияют на ваш рейтинг."}},
		{"@type": "Question", "name": "Застрахованы ли поездки?", "acceptedAnswer": {"@type": "Answer", "text": "Да, каждая поездка дополнительно застрахована сервисом."}},
		{"@type": "Question", "name": "Сколько длится проверка?", "acceptedAnswer": {"@type": "Answer", "text": "Обычно от одного до нескольких рабочих дней. После одобрения вы сразу получаете допуск и можете настроить зоны и время работы."}}
	]
}
</script>

<?php
page_footer();

/* ── uslugi-avtonyani ── */
.ua-hero{padding:50px 0 60px!important}
#ua-services,#ua-types,#ua-included,#ua-how,#ua-routes,#ua-faq,#ua-cta{padding:60px 0!important}
@media(max-width:767.98px){
	.ua-hero,#ua-services,#ua-types,#ua-included,#ua-how,#ua-routes,#ua-faq,#ua-cta{padding:36px 0!important}
}
.ua-lead{max-width:740px;margin:0 auto;font-size:17px;line-height:1.65;color:#555}
.ua-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04)}
@media(max-width:575.98px){.ua-card{padding:22px 20px;border-radius:14px}}
.ua-card h3{font-size:17px;font-weight:700;color:#222;margin:0 0 10px;line-height:1.3}
.ua-card p{font-size:14.5px;line-height:1.65;color:#555;margin:0 0 10px}
.ua-card p:last-child{margin-bottom:0}
.ua-grid{display:grid;gap:16px;margin-top:10px}
.ua-grid-2{grid-template-columns:repeat(2,1fr)}
.ua-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:991.98px){.ua-grid-3{grid-template-columns:1fr}}
@media(max-width:767.98px){.ua-grid-2{grid-template-columns:1fr}}
.ua-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.ua-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ua-article{max-width:820px;margin:0 auto}
.ua-article p{font-size:16px;line-height:1.75;color:#444;margin:0 0 16px}
.ua-article p:last-child{margin-bottom:0}
.ua-article strong{color:#222}
.ua-article ul{padding:0 0 0 20px;margin:0 0 16px}
.ua-article ul li{font-size:15px;line-height:1.7;color:#444;margin-bottom:6px}
.ua-highlight{background:#fff4e6;border-left:4px solid #F18E90;border-radius:12px;padding:20px 24px;margin:20px 0}
.ua-highlight p{margin:0;font-size:15px;line-height:1.65;color:#444}
.ua-step{display:flex;gap:18px;align-items:flex-start;margin-bottom:20px}
.ua-step:last-child{margin-bottom:0}
.ua-step-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#F18E90 0%,#e25da0 100%);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}
.ua-step-body h3{font-size:16px;font-weight:700;color:#222;margin:0 0 6px}
.ua-step-body p{font-size:14.5px;line-height:1.6;color:#555;margin:0}
.ua-type-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);height:100%}
@media(max-width:575.98px){.ua-type-card{padding:22px 20px;border-radius:14px}}
.ua-type-card h3{font-size:18px;font-weight:700;color:#222;margin:0 0 12px;line-height:1.3}
.ua-type-card p{font-size:14.5px;line-height:1.65;color:#555;margin:0 0 10px}
.ua-type-card p:last-child{margin-bottom:0}
.ua-type-card ul{padding:0 0 0 18px;margin:8px 0 0}
.ua-type-card ul li{font-size:14.5px;line-height:1.65;color:#555;margin-bottom:4px}
.ua-type-label{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:4px 10px;border-radius:6px;margin-bottom:14px}
.ua-type-label--single{background:#e8f4fd;color:#2980b9}
.ua-type-label--regular{background:#d5f5e3;color:#1e8449}
.ua-route-card{background:#fff;border-radius:14px;padding:22px 24px;box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);margin-bottom:12px}
.ua-route-card:last-child{margin-bottom:0}
.ua-route-card h3{font-size:15px;font-weight:700;color:#222;margin:0 0 6px}
.ua-route-card p{font-size:14px;line-height:1.6;color:#555;margin:0}
.ua-faq-item{border-bottom:1px solid rgba(0,0,0,0.08)}
.ua-faq-item:last-child{border-bottom:none}
.ua-faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;gap:16px}
.ua-faq-q h3{margin:0;font-size:17px;font-weight:600;line-height:1.4;display:flex;align-items:center;padding-left:22px;position:relative}
.ua-faq-dot{position:absolute;left:0;top:0.75em;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#F18E90}
.ua-faq-item.open .ua-faq-q h3{padding-left:0;transition:padding-left 0.3s 0.1s}
.ua-faq-item:not(.open):not(.closing) .ua-faq-q h3{transition:padding-left 0.3s 0.2s}
.ua-faq-item.closing .ua-faq-q h3{padding-left:22px;transition:padding-left 0.3s 0.2s}
.ua-faq-item.open .ua-faq-dot{animation:uaDotLeft 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
.ua-faq-item.closing .ua-faq-dot{animation:uaDotRight 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes uaDotLeft{0%{left:0;opacity:1}15%{left:12px;opacity:1}100%{left:-95vw;opacity:0}}
@keyframes uaDotRight{0%{left:-95vw;opacity:0}85%{opacity:1}100%{left:0;opacity:1}}
.ua-faq-chevron{flex-shrink:0;width:24px;height:24px;transition:transform .3s;color:#006bd8}
.ua-faq-item.open .ua-faq-chevron{transform:rotate(180deg)}
.ua-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0}
.ua-faq-item.open .ua-faq-a{max-height:400px;padding:0 0 20px 0}
.ua-faq-a p{margin:0;font-size:16px;line-height:1.7;color:#555}
.ua-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 44px;background:linear-gradient(135deg,#029969 0%,#04b87f 100%);color:#fff!important;font-size:17px;font-weight:700;border-radius:12px;text-decoration:none!important;box-shadow:0 6px 20px rgba(2,153,105,0.3);transition:transform .3s,box-shadow .3s}
.ua-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,153,105,0.4);color:#fff!important}
.ua-cta-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none}
/* Text-align overrides */
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-article,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-article p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-article ul,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-highlight,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-highlight p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-step,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-step-body h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-step-body p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-type-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-type-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-type-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-type-card ul,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-route-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-route-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-route-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-faq-item,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-faq-q h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ua-faq-a p{text-align:left!important}
<section class="lqd-section" id="ua-cta" style="background:linear-gradient(135deg,#e25da0 0%,#f4845f 100%);">
	<div class="container">
		<div class="row justify-center">
			<div class="col col-12 col-lg-9 text-center">
				<div class="ld-fancy-heading uppercase">
					<h6 class="ld-fh-element mb-1em" style="color:rgba(255,255,255,0.85);">Оформить заказ</h6>
				</div>
				<h2 class="ld-fh-element mb-0 text-40 tracking-0" style="color:#fff!important;">Закажите автоняню за&nbsp;30&nbsp;секунд</h2>
				<p class="ld-fh-element text-18" style="color:rgba(255,255,255,0.85)!important;margin-top:20px;">Укажите маршрут&nbsp;— калькулятор рассчитает стоимость.<br>Разовая поездка или&nbsp;расписание на&nbsp;весь год.</p>
				<div style="margin-top:30px;">
					<a class="ua-cta-btn" href="/app/order">
						Оформить заказ
						<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- JSON-LD: FAQPage -->
<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "FAQPage",
	"mainEntity": [
<?php foreach ($faq as $i => $f): ?>
		{
			"@type": "Question",
			"name": <?= json_encode($f['q'], JSON_UNESCAPED_UNICODE) ?>,
			"acceptedAnswer": {
				"@type": "Answer",
				"text": <?= json_encode($f['a'], JSON_UNESCAPED_UNICODE) ?>
			}
		}<?= $i < count($faq) - 1 ? ',' : '' ?>

<?php endforeach; ?>
	]
}
</script>

<!-- JSON-LD: Service -->
<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "Service",
	"name": "Услуги автоняни",
	"description": "Сопровождение ребёнка на автомобиле: в школу, на секции, к врачу. Разовые и регулярные поездки с детским креслом, страхованием и уведомлениями.",
	"provider": {
		"@type": "Organization",
		"name": "Добрая Тётя",
		"url": "https://tyotya.ru"
	},
	"areaServed": {
		"@type": "City",
		"name": "Москва"
	},
	"serviceType": "Сопровождение детей на автомобиле",
	"hasOfferCatalog": {
		"@type": "OfferCatalog",
		"name": "Услуги автоняни",
		"itemListElement": [
			{
				"@type": "Offer",
				"itemOffered": {
					"@type": "Service",
					"name": "Разовая поездка"
				}
			},
			{
				"@type": "Offer",
				"itemOffered": {
					"@type": "Service",
					"name": "Регулярные поездки по расписанию"
				}
			}
		]
	}
}
</script>

<script>
function uaFaqToggle(item) {
	if (item.classList.contains('open')) {
		item.classList.remove('open');
		item.classList.add('closing');
		setTimeout(function(){ item.classList.remove('closing'); }, 500);
	} else {
		item.classList.add('open');
	}
}
</script>

<?php
	page_footer();
?>

/* ── nyanya-soprovozhdayushchaya ── */
.ns-hero{padding:50px 0 60px!important}
#ns-who,#ns-diff,#ns-duties,#ns-safe,#ns-when,#ns-faq,#ns-cta{padding:60px 0!important}
@media(max-width:767.98px){
	.ns-hero,#ns-who,#ns-diff,#ns-duties,#ns-safe,#ns-when,#ns-faq,#ns-cta{padding:36px 0!important}
}
.ns-lead{max-width:740px;margin:0 auto;font-size:17px;line-height:1.65;color:#555}
.ns-card{background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);height:100%}
@media(max-width:575.98px){.ns-card{padding:22px 20px;border-radius:14px}}
.ns-card h3{font-size:17px;font-weight:700;color:#222;margin:0 0 10px;line-height:1.3}
.ns-card p{font-size:14.5px;line-height:1.65;color:#555;margin:0 0 10px}
.ns-card p:last-child{margin-bottom:0}
.ns-grid{display:grid;gap:16px;margin-top:10px}
.ns-grid-2{grid-template-columns:repeat(2,1fr)}
.ns-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:991.98px){.ns-grid-3{grid-template-columns:1fr}}
@media(max-width:767.98px){.ns-grid-2{grid-template-columns:1fr}}
.ns-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.ns-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ns-article{max-width:820px;margin:0 auto}
.ns-article p{font-size:16px;line-height:1.75;color:#444;margin:0 0 16px}
.ns-article p:last-child{margin-bottom:0}
.ns-article strong{color:#222}
.ns-article ul{padding:0 0 0 20px;margin:0 0 16px}
.ns-article ul li{font-size:15px;line-height:1.7;color:#444;margin-bottom:6px}
.ns-highlight{background:#fff4e6;border-left:4px solid #F18E90;border-radius:12px;padding:20px 24px;margin:20px 0}
.ns-highlight p{margin:0;font-size:15px;line-height:1.65;color:#444}
/* Comparison cards */
.ns-cmp-label{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;border-radius:6px;padding:4px 12px;margin-bottom:14px}
.ns-cmp-label--usual{background:rgba(0,0,0,0.06);color:#666}
.ns-cmp-label--escort{background:rgba(2,153,105,0.12);color:#029969}
.ns-list{list-style:none;padding:0;margin:0}
.ns-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.7;color:#555;margin-bottom:10px}
.ns-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%}
.ns-list--grey li::before{background:#ccc}
.ns-list--green li::before{background:#029969}
/* Duty cards */
.ns-duty-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04)}
.ns-duty-card h3{font-size:16px;font-weight:700;color:#222;margin:0 0 8px;line-height:1.3}
.ns-duty-card p{font-size:14.5px;line-height:1.65;color:#555;margin:0}
/* Situation cards */
.ns-sit-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);height:100%}
.ns-sit-card h3{font-size:16px;font-weight:700;color:#222;margin:0 0 8px;line-height:1.3}
.ns-sit-card p{font-size:14.5px;line-height:1.65;color:#555;margin:0}
/* FAQ */
.ns-faq-item{border-bottom:1px solid rgba(0,0,0,0.08)}
.ns-faq-item:last-child{border-bottom:none}
.ns-faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;gap:16px}
.ns-faq-q h3{margin:0;font-size:17px;font-weight:600;line-height:1.4;padding-left:22px;position:relative}
.ns-faq-dot{position:absolute;left:0;top:0.75em;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#F18E90}
.ns-faq-item.open .ns-faq-q h3{padding-left:0;transition:padding-left 0.3s 0.1s}
.ns-faq-item:not(.open):not(.closing) .ns-faq-q h3{transition:padding-left 0.3s 0.2s}
.ns-faq-item.closing .ns-faq-q h3{padding-left:22px;transition:padding-left 0.3s 0.2s}
.ns-faq-item.open .ns-faq-dot{animation:nsDotLeft 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
.ns-faq-item.closing .ns-faq-dot{animation:nsDotRight 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes nsDotLeft{0%{left:0;opacity:1}15%{left:12px;opacity:1}100%{left:-95vw;opacity:0}}
@keyframes nsDotRight{0%{left:-95vw;opacity:0}85%{opacity:1}100%{left:0;opacity:1}}
.ns-faq-q .ns-faq-chevron{flex-shrink:0;width:24px;height:24px;transition:transform 0.3s;color:#006bd8}
.ns-faq-item.open .ns-faq-chevron{transform:rotate(180deg)}
.ns-faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease;padding:0}
.ns-faq-item.open .ns-faq-a{max-height:400px;padding:0 0 20px 0}
.ns-faq-a p{margin:0;font-size:16px;line-height:1.7;color:#555}
/* CTA button */
.ns-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 44px;background:linear-gradient(135deg,#029969 0%,#04b87f 100%);color:#fff!important;font-size:17px;font-weight:700;border-radius:12px;text-decoration:none!important;box-shadow:0 6px 20px rgba(2,153,105,0.3);transition:transform .3s,box-shadow .3s}
.ns-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,153,105,0.4);color:#fff!important}
.ns-cta-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none}
/* Text-align overrides (full specificity for mobile) */
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-duty-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-duty-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-duty-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-sit-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-sit-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-sit-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-article,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-article p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-article ul,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-highlight,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-highlight p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-list,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-list li,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-faq-item,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-faq-q h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .ns-faq-a p{text-align:left!important}
<section class="lqd-section" id="ns-cta" style="background:linear-gradient(135deg,#e25da0 0%,#f4845f 100%);">
	<div class="container">
		<div class="row justify-center">
			<div class="col col-12 col-lg-9 text-center">
				<div class="ld-fancy-heading uppercase">
					<h6 class="ld-fh-element mb-1em" style="color:rgba(255,255,255,0.85);">Попробуйте</h6>
				</div>
				<h2 class="ld-fh-element mb-0 text-40 tracking-0" style="color:#fff!important;">Закажите няню-сопровождающую</h2>
				<p class="ld-fh-element text-18" style="color:rgba(255,255,255,0.85)!important;margin-top:20px;">Укажите маршрут&nbsp;— узнаете точную цену за&nbsp;30&nbsp;секунд. Без&nbsp;звонков и&nbsp;скрытых наценок.</p>
				<div style="margin-top:30px;">
					<a class="ns-cta-btn" href="/app/order">
						Рассчитать стоимость
						<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
function nsFaqToggle(item) {
	if (item.classList.contains('open')) {
		item.classList.remove('open');
		item.classList.add('closing');
		setTimeout(function(){ item.classList.remove('closing'); }, 400);
	} else {
		item.classList.add('open');
	}
}
</script>

<?php
	page_footer();
?>

/* ── soprovozhdenie-detey ── */
.sd-hero{padding:50px 0 60px!important}
#sd-law,#sd-what,#sd-how,#sd-safe,#sd-who,#sd-faq,#sd-cta{padding:60px 0!important}
@media(max-width:767.98px){
	.sd-hero,#sd-law,#sd-what,#sd-how,#sd-safe,#sd-who,#sd-faq,#sd-cta{padding:36px 0!important}
}
.sd-lead{max-width:740px;margin:0 auto;font-size:17px;line-height:1.65;color:#555}
.sd-card{background:#fff;border-radius:16px;padding:28px 28px;box-shadow:0 4px 20px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04)}
@media(max-width:575.98px){.sd-card{padding:22px 20px;border-radius:14px}}
.sd-card h3{font-size:17px;font-weight:700;color:#222;margin:0 0 10px;line-height:1.3}
.sd-card p{font-size:14.5px;line-height:1.65;color:#555;margin:0 0 10px}
.sd-card p:last-child{margin-bottom:0}
.sd-grid{display:grid;gap:16px;margin-top:10px}
.sd-grid-2{grid-template-columns:repeat(2,1fr)}
.sd-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:991.98px){.sd-grid-3{grid-template-columns:1fr}}
@media(max-width:767.98px){.sd-grid-2{grid-template-columns:1fr}}
.sd-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.sd-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sd-law-card{position:relative;padding-left:24px}
.sd-law-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px}
.sd-article{max-width:820px;margin:0 auto}
.sd-article p{font-size:16px;line-height:1.75;color:#444;margin:0 0 16px}
.sd-article p:last-child{margin-bottom:0}
.sd-article strong{color:#222}
.sd-article ul{padding:0 0 0 20px;margin:0 0 16px}
.sd-article ul li{font-size:15px;line-height:1.7;color:#444;margin-bottom:6px}
.sd-highlight{background:#fff4e6;border-left:4px solid #F18E90;border-radius:12px;padding:20px 24px;margin:20px 0}
.sd-highlight p{margin:0;font-size:15px;line-height:1.65;color:#444}
.sd-faq-item{border-bottom:1px solid rgba(0,0,0,0.08)}
.sd-faq-item:last-child{border-bottom:none}
.sd-faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;gap:16px}
.sd-faq-q h3{margin:0;font-size:17px;font-weight:600;line-height:1.4;display:flex;align-items:center;padding-left:22px;position:relative}
.sd-faq-dot{position:absolute;left:0;top:0.75em;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#F18E90}
.sd-faq-item.open .sd-faq-q h3{padding-left:0;transition:padding-left 0.3s 0.1s}
.sd-faq-item:not(.open):not(.closing) .sd-faq-q h3{transition:padding-left 0.3s 0.2s}
.sd-faq-item.closing .sd-faq-q h3{padding-left:22px;transition:padding-left 0.3s 0.2s}
.sd-faq-item.open .sd-faq-dot{animation:sdDotLeft 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
.sd-faq-item.closing .sd-faq-dot{animation:sdDotRight 0.5s cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes sdDotLeft{0%{left:0;opacity:1}15%{left:12px;opacity:1}100%{left:-95vw;opacity:0}}
@keyframes sdDotRight{0%{left:-95vw;opacity:0}85%{opacity:1}100%{left:0;opacity:1}}
.sd-faq-q .sd-faq-chevron{flex-shrink:0;width:24px;height:24px;transition:transform 0.3s;color:#006bd8}
.sd-faq-item.open .sd-faq-chevron{transform:rotate(180deg)}
.sd-faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease;padding:0}
.sd-faq-item.open .sd-faq-a{max-height:300px;padding:0 0 20px 0}
.sd-faq-a p{margin:0;font-size:16px;line-height:1.7;color:#555}
.sd-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 44px;background:linear-gradient(135deg,#029969 0%,#04b87f 100%);color:#fff!important;font-size:17px;font-weight:700;border-radius:12px;text-decoration:none!important;box-shadow:0 6px 20px rgba(2,153,105,0.3);transition:transform .3s,box-shadow .3s}
.sd-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,153,105,0.4);color:#fff!important}
.sd-cta-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none}
/* Text-align overrides */
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-card,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-card h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-card p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-article,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-article p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-article ul,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-highlight,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-highlight p,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-faq-item,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-faq-q h3,
#wrap > main section:not(#site-footer):not(.lqd-section.module-top) .sd-faq-a p{text-align:left!important}
<section class="lqd-section" id="sd-cta" style="background:linear-gradient(135deg,#e25da0 0%,#f4845f 100%);">
	<div class="container">
		<div class="row justify-center">
			<div class="col col-12 col-lg-9 text-center">
				<div class="ld-fancy-heading uppercase">
					<h6 class="ld-fh-element mb-1em" style="color:rgba(255,255,255,0.85);">Попробуйте</h6>
				</div>
				<h2 class="ld-fh-element mb-0 text-40 tracking-0" style="color:#fff!important;">Рассчитайте стоимость поездки</h2>
				<p class="ld-fh-element text-18" style="color:rgba(255,255,255,0.85)!important;margin-top:20px;">Укажите маршрут — узнаете точную цену за&nbsp;30&nbsp;секунд. Без&nbsp;звонков и&nbsp;скрытых наценок.</p>
				<div style="margin-top:30px;">
					<a class="sd-cta-btn" href="/app/order">
						Рассчитать маршрут
						<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
function sdFaqToggle(item) {
	if (item.classList.contains('open')) {
		item.classList.remove('open');
		item.classList.add('closing');
		setTimeout(function(){ item.classList.remove('closing'); }, 400);
	} else {
		item.classList.add('open');
	}
}
(function(){
	['sd-how'].forEach(function(id){
		var section = document.getElementById(id);
		if (!section) return;
		var circles = section.querySelectorAll('.sp-circle-wrap');
		if (!circles.length) return;
		var io = new IntersectionObserver(function(entries) {
			entries.forEach(function(e) {
				if (e.isIntersecting) {
					circles.forEach(function(c){ c.classList.add('sp-animated'); });
					io.disconnect();
				}
			});
		}, {threshold: 0.2});
		io.observe(section);
	});
})();
</script>

<?php
	page_footer();
?>

/* ── po-raspisaniu ── */
<section class="lqd-section image-bg transition-all" id="art-cta" style="background:linear-gradient(135deg,#e25da0 0%,#f4845f 100%);position:relative;padding:70px 0!important;">
	<div class="container" style="position:relative;z-index:2;">
		<div class="row justify-center">
			<div class="col col-12 col-lg-9 text-center">
				<h2 class="ld-fh-element mb-0 text-40 tracking-0" style="color:#fff!important;">Рассчитайте маршрут</h2>
				<p class="ld-fh-element text-18" style="color:rgba(255,255,255,0.85)!important;margin-top:20px;">Укажите адреса и расписание — увидите точную стоимость до оформления.</p>
				<div class="col col-12 text-center mt-30">
					<a href="/app/order" class="btn font-bold text-14 btn-solid text-white uppercase border-thin btn-hover-swp leading-1/5em tracking-0/1em hover:text-white" style="background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5);border-radius:9999px;display:inline-flex;max-width:100%;">
						<span class="inline-flex py-1/5em px-3/5em items-center">
							<span class="btn-txt" data-text="Оформить заказ">Оформить заказ</span>
							<span class="btn-icon"><i class="lqd-icn-ess icon-md-arrow-forward"></i></span>
							<span class="btn-icon"><i class="lqd-icn-ess icon-md-arrow-forward"></i></span>
						</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</section>

<?php
	page_footer();
?>