/* ==========================================
   BASE CARD
========================================== */

.stat-card,
.format-card,
.advantage,
.result-card,
.review-card,
.price-card,
.results__note{

    position:relative;

    background:var(--color-surface);

    border:1px solid rgba(229,231,235,.8);

    border-radius:var(--radius-lg);

    padding:36px;

    box-shadow:var(--color-shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}

.stat-card:hover,
.format-card:hover,
.advantage:hover,
.result-card:hover,
.review-card:hover,
.price-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--color-shadow-hover);

    border-color:rgba(37,99,235,.25);

}

/* ==========================================
   STATISTICS
========================================== */

.stat-card{

    text-align:center;

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0 auto auto 0;

    width:100%;

    height:4px;

    background:var(--gradient-primary);

    border-radius:
        var(--radius-lg)
        var(--radius-lg)
        0
        0;

}

/* ==========================================
   FORMATS
========================================== */

.format-card{

    overflow:hidden;

}

.format-card__header{

    margin-bottom:28px;

}

.format-card__list{

    display:grid;

    gap:16px;

}

.format-card__list li{

    position:relative;

    padding-left:30px;

}

.format-card__list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.72rem;

    font-weight:700;

    line-height:1;

}

.format-card--accent{

    border:2px solid rgba(245,158,11,.35);

}

.format-card__badge{

    position:absolute;

    top:24px;

    right:24px;

    background:var(--gradient-accent);

    color:white;

    padding:

        8px
        16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.04em;

}

.social-card{

    max-width:620px;

    margin:30px auto 0;

    padding:34px;

    text-align:center;

    background:#f8fbff;

    border:1px solid rgba(37,99,235,.08);

    border-radius:24px;

}

.social-card h3{

    margin-bottom:12px;

}

.social-card p{

    margin-bottom:24px;

}

.social-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.social-links a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px;

    border-radius:14px;

    text-decoration:none;

    background:white;

    color:var(--color-dark);

    transition:.25s;

}

.social-links a:hover{

    background:#eef5ff;

    transform:translateY(-2px);

}

.social-links img,
.social-links svg{

    width:22px;

    height:22px;

}

/* ==========================================
   ADVANTAGES
========================================== */

.advantage{

    text-align:center;

}

.advantage__icon{

    width:72px;

    height:72px;

    margin:0 auto 24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#eef5ff,#dbeafe);

    color:var(--color-primary);

    box-shadow:
        0 10px 24px rgba(37,99,235,.12),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.advantage:hover .advantage__icon{

    transform:translateY(-3px) scale(1.06);

    box-shadow:
        0 16px 32px rgba(37,99,235,.18),
        inset 0 1px 0 rgba(255,255,255,.95);

}

.advantage__icon svg{

    width:34px;

    height:34px;

    stroke:currentColor;

}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:39px;

    top:20px;

    bottom:20px;

    width:2px;

    background:

        linear-gradient(
            to bottom,
            #2563EB,
            #93C5FD
        );

}

.timeline__item{

    position:relative;

}

.timeline__number{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    box-shadow:

        0 10px 25px
        rgba(37,99,235,.30);

    position:relative;

    z-index:2;

}

.timeline__content{

    background:white;

    padding:30px;

    border-radius:20px;

    border:1px solid var(--color-border);

    box-shadow:var(--color-shadow);

}

/* ==========================================
   RESULTS
========================================== */

.result-card{

    text-align:center;

}

.results__note{

    margin-top:40px;

    border-left:6px solid
        var(--color-primary);

    background:#EFF6FF;

}

/* ==========================================
   REVIEWS
========================================== */

.reviews__slider{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:30px;

}

.review-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.review-card__text{

    position:relative;

}

.review-card__text::before{

    content:"“";

    position:absolute;

    top:-20px;

    left:-5px;

    font-size:5rem;

    color:#DBEAFE;

    line-height:1;

}

.review-card--image{

    padding:16px;

}

.review-card--image img{

    border-radius:18px;

}

/* ==========================================
   PRICE
========================================== */

.price-card{

    overflow:hidden;

}

.price-card__header{

    padding-bottom:24px;

    margin-bottom:24px;

    border-bottom:1px solid
        var(--color-border);

}

.price-card ul{

    display:grid;

    gap:16px;

}

.price-card li{

    position:relative;

    padding-left:30px;

}

.price-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.72rem;

    font-weight:700;

    line-height:1;
}

.price-card__accent{

    border:2px solid
        rgba(245,158,11,.35);

}

.price-card__badge{

    position:absolute;

    top:24px;

    right:24px;

    padding:

        8px
        16px;

    background:var(--gradient-accent);

    color:white;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

}

/* ==========================================
   PHOTO CARD
========================================== */

.photo-card{

    overflow:hidden;

    border-radius:32px;

    background:white;

    padding:18px;

    box-shadow:

        0 40px 80px
        rgba(15,23,42,.15);

}

.photo-card__badge{

    background:white;

    padding:

        14px
        22px;

    border-radius:999px;

    font-weight:600;

    box-shadow:

        0 12px 30px
        rgba(15,23,42,.15);

}

/* ==========================================
   CTA
========================================== */

.cta__wrapper{

    padding:60px;

    border-radius:32px;

    background:

        linear-gradient(
            135deg,
            #1D4ED8,
            #2563EB
        );

    color:white;

    box-shadow:

        0 35px 80px
        rgba(37,99,235,.30);

}

.cta__wrapper h2,
.cta__wrapper p{

    color:white;

}

/* ==========================================
   CONTACT FORM
========================================== */

.contacts__form{

    background:white;

    padding:40px;

    border-radius:28px;

    box-shadow:var(--color-shadow);

}

.contacts__form form{

    display:grid;

    gap:18px;

}

.results__principles ul{

    display:grid;

    gap:16px;

}

.results__principles li{

    position:relative;

    padding-left:30px;

}

.results__principles li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:3px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.72rem;

    font-weight:700;

    line-height:1;
}