.effects {
    padding-bottom: 74px;
    background: #fff;
    color: #294455;
}
.effects * { box-sizing: border-box; }
.effects h2, .effects h3 { color: #173f52; font-weight: 700; line-height: 1.48; }
.effects h2 { font-size: 30px; }
.effects > .container p { line-height: 1.8; }
.effects-label {
    margin-bottom: 12px;
    color: #0E7AC4;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
}
.effects-lead { max-width: 800px; color: #5b717d; }
.effects-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.effects-actions .btn { min-width: 190px; border-radius: 7px; font-weight: 700; }
.effects-actions .btn-info, .effects-actions .btn-success { border-color: #0E7AC4; background: #0E7AC4; }
.effects-actions .btn-info:hover, .effects-actions .btn-info:focus, .effects-actions .btn-success:hover, .effects-actions .btn-success:focus { border-color: #08649f; background: #08649f; }

.effects-hero {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 42px;
    padding: 46px;
    border-radius: 20px;
    background: #f1f8fd;
}
.effects-hero h2 { margin: 0 0 19px; font-size: 35px; }
.effects-hero h2 strong { color: #0E7AC4; }
.effects-hero-copy > p:not(.effects-label) { font-size: 16px; }
.effects-hero-copy .effects-hero-source { margin: 15px 0 0; color: #59717a; font-size: 13px !important; }
.effects-hero-visual {
    padding: 15px 15px 25px;
    border: 1px solid #d8eaf6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 17px 42px rgba(14, 122, 196, .1);
}
.effects-hero-image { display: block; width: 100%; height: auto; margin-bottom: 21px; border-radius: 10px; }
.effects-hero-visual > p { margin: 0 12px 14px; color: #31505a; font-weight: 700; }
.effects-time-row { display: grid; grid-template-columns: 76px 1fr; gap: 5px 10px; margin: 19px 0; align-items: baseline; }
.effects-time-row span { color: #71848b; font-size: 13px; font-weight: 700; }
.effects-time-row strong { color: #173f52; font-size: 30px; line-height: 1.2; }
.effects-time-row:nth-of-type(2) strong { color: #0E7AC4; }
.effects-time-bar { display: block; grid-column: 2; height: 12px; border-radius: 30px; }
.effects-time-bar.is-before { width: 100%; background: #b8c9ca; }
.effects-time-bar.is-after { width: 27%; min-width: 48px; background: #0E7AC4; }
.effects-hero-visual small { display: block; margin: 19px 12px 0; color: #667a82; line-height: 1.6; }

.effects-results, .effects-after, .effects-early, .effects-scale, .effects-fit { margin-top: 76px; }
.effects-results { scroll-margin-top: 140px; }
.effects-results h2, .effects-after h2, .effects-early h2, .effects-fit h2 { margin: 0 0 14px; }
.effects-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 29px; }
.effects-result-card {
    display: flex;
    flex-direction: column;
    padding: 27px 25px 24px;
    border: 1px solid #d8eaf6;
    border-top: 5px solid #0E7AC4;
    border-radius: 13px;
    box-shadow: 0 9px 26px rgba(29, 69, 78, .06);
}
.effects-result-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 13px; background: #e7f4fc; }
.effects-result-icon svg { width: 36px; height: 36px; fill: none; stroke: #0E7AC4; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.effects-result-topic { margin: 20px 0 6px; color: #0E7AC4; font-weight: 700; }
.effects-result-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; margin: 0 0 20px; }
.effects-result-number span { color: #576e78; font-size: 18px; font-weight: 700; }
.effects-result-number b { color: #8da4aa; font-size: 19px; }
.effects-result-number strong { color: #0E7AC4; font-size: 30px; line-height: 1.28; }
.effects-result-card h3 { margin: 0 0 11px; font-size: 19px; }
.effects-result-card > p:not(.effects-result-topic):not(.effects-result-number):not(.effects-result-note) { flex: 1; }
.effects-result-card .effects-result-note { margin: 9px 0 16px; color: #677b83; font-size: 12px; }
.effects-result-card > a, .effects-after a, .effects-scale a, .effects-fit a { color: #0E7AC4; font-weight: 700; }

.effects-after { padding: 43px; border-radius: 18px; background: #f1f8fd; }
.effects-after-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 26px; }
.effects-after-grid article { display: flex; flex-direction: column; padding: 26px; border-radius: 12px; background: #fff; }
.effects-after-image { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 22px; border-radius: 10px; }
.effects-after-tag { width: max-content; padding: 5px 11px; border-radius: 20px; background: #e7f4fc; color: #0E7AC4; font-size: 12px; font-weight: 700; }
.effects-after h3 { margin: 17px 0 10px; font-size: 20px; }
.effects-after-grid article > p { flex: 1; }
.effects-after-links { display: flex; flex-wrap: wrap; gap: 5px 15px; }

.effects-early {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 48px;
    padding: 40px 45px;
    border: 1px solid #d8eaf6;
    border-radius: 18px;
    background: #f5fafe;
}
.effects-early-copy > p:not(.effects-label) { margin-bottom: 15px; }
.effects-early-copy .effects-early-note { color: #617780; font-size: 12px; }
.effects-early-copy > a { color: #0E7AC4; font-weight: 700; }
.effects-early-growth { padding: 24px 30px; border-radius: 16px; background: #fff; box-shadow: 0 9px 26px rgba(29, 69, 78, .06); text-align: center; }
.effects-early-growth > div { padding: 13px 0; }
.effects-early-growth > div > span { display: block; color: #607580; font-size: 13px; font-weight: 700; }
.effects-early-growth strong { display: block; margin-top: 3px; color: #0E7AC4; font-size: 46px; line-height: 1.3; }
.effects-early-growth strong span { margin-left: 5px; font-size: 19px; }
.effects-early-growth > div:first-child strong { color: #607580; }
.effects-early-arrow { color: #0E7AC4; font-size: 27px; line-height: 1; }
.effects-early-growth small { display: block; margin-top: 10px; color: #617780; }

.effects-scale {
    display: grid;
    grid-template-columns: 275px 1fr;
    align-items: center;
    gap: 38px;
    padding: 38px 43px;
    border-radius: 18px;
    background: #125581;
    color: #fff;
}
.effects-scale h2 { margin: 0 0 12px; color: #fff; }
.effects-scale .effects-label { color: #c9e9fc; }
.effects-scale .effects-scale-number { padding-right: 32px; border-right: 1px solid rgba(255,255,255,.28); text-align: center; }
.effects-scale-number strong { color: #d3edfc; font-size: 58px; line-height: 1.1; }
.effects-scale-number strong span { font-size: 23px; }
.effects-scale-number p { margin: 13px 0 0; font-size: 13px; }
.effects-scale .effects-condition { color: #c8d8dd; font-size: 12px; }
.effects-scale a { color: #d3edfc; }

.effects-fit { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; padding: 36px 40px; border: 1px solid #d8eaf6; border-radius: 18px; background: #f5fafe; }
.effects-fit-list p { margin: 0; padding: 14px 0; border-bottom: 1px solid #d8eaf6; }
.effects-fit-list p:first-child { padding-top: 0; }
.effects-fit-list p:last-child { border: 0; padding-bottom: 0; }
.effects-fit-list strong, .effects-fit-list span { display: block; }
.effects-fit-list strong { color: #173f52; font-size: 16px; }
.effects-fit-list span { margin: 3px 0 5px; color: #59727b; font-size: 13px; }
.effects-fit-list a { font-size: 13px; }

.effects-cta { margin-top: 76px; padding: 43px; border-radius: 18px; background: #e7f4fc; text-align: center; }
.effects-cta h2 { margin: 0 0 12px; }
.effects-cta .effects-actions { justify-content: center; }
.effects-cta .effects-cta-note { margin: 21px 0 0; color: #617780; font-size: 12px; }

@media (max-width: 991px) {
    .effects-hero { gap: 25px; padding: 32px; }
    .effects-hero h2 { font-size: 30px; }
    .effects-result-number strong { font-size: 25px; }
}
@media (max-width: 1099px) {
    .effects-results { scroll-margin-top: 84px; }
}
@media (max-width: 767px) {
    .effects h2 { font-size: 25px; }
    .effects-hero, .effects-result-grid, .effects-after-grid, .effects-early, .effects-scale, .effects-fit { display: block; }
    .effects-hero { padding: 27px 22px; }
    .effects-hero h2 { font-size: 28px; }
    .effects-hero-visual { margin-top: 28px; }
    .effects-results, .effects-after, .effects-early, .effects-scale, .effects-fit { margin-top: 54px; }
    .effects-result-card, .effects-after-grid article { margin-top: 14px; }
    .effects-after { padding: 27px 18px; }
    .effects-early { padding: 28px 23px; }
    .effects-early-growth { margin-top: 24px; }
    .effects-scale { padding: 30px 23px; }
    .effects-scale .effects-scale-number { margin-bottom: 25px; padding: 0 0 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.28); }
    .effects-fit { padding: 28px 23px; }
    .effects-fit-list { margin-top: 24px; }
    .effects-cta { margin-top: 54px; padding: 30px 20px; }
    .effects-actions .btn { width: 100%; }
}
