/* Шаблон одного кейса. Порядок повторяет наш метод: что было, что сделали по этапам, что стало. Главные цифры результата стоят сразу под шапкой. */
.page-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(50% 80% at 85% 20%,rgba(77,98,255,.7),transparent 70%),linear-gradient(160deg,#0e1450,#1d2a9c)}
.page-hero .wrap{position:relative;padding-block:44px 120px}
.page-hero .dino{position:absolute;right:-40px;bottom:-60px;width:min(40%,520px);height:auto;color:#fff;opacity:.08}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#b9c2f5;margin-bottom:20px}
.crumbs a{color:#dfe4ff;text-decoration:none}.crumbs a:hover{color:#fff}
.ind{display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:700;color:#8fe3ff;margin-bottom:14px}
.demo{font-size:11px;font-weight:800;background:#ff7b6e;color:#fff;border-radius:6px;padding:2px 8px}
.page-hero h1{font:800 clamp(34px,4.6vw,60px)/1.02 var(--font);letter-spacing:-.04em;margin:0 0 18px;max-width:16em;text-wrap:balance}
.page-hero .sum{margin:0 0 30px;max-width:38em;font-size:19px;color:#cfd6ff}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin:0;border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
.facts div{padding-right:16px}
.facts div+div{padding-left:20px;border-left:1px solid rgba(255,255,255,.16)}
.facts dt{font-size:13px;color:#a9b4f0;margin-bottom:4px}
.facts dd{margin:0;font-weight:700}

.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:-80px;position:relative}
.res{background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:26px;box-shadow:0 24px 50px -30px rgba(10,20,90,.45)}
.res strong{display:block;font:800 clamp(34px,3.6vw,48px)/1.05 var(--font);letter-spacing:-.035em;color:var(--blue);margin-bottom:10px;hyphens:none;overflow-wrap:normal}
.res strong.txt{font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em}
.res span{font-size:15px}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba>div{border-radius:24px;padding:30px}
.ba .b{background:var(--card);border:1px solid var(--rule)}
.ba .a{background:linear-gradient(135deg,#151d63,#2a3ac4);color:#dfe4ff}
.ba h2{margin:0 0 16px;font:800 24px/1.2 var(--font);color:var(--navy)}
.ba .a h2{color:#fff}
.ba ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.ba li{display:grid;grid-template-columns:24px 1fr;gap:10px}
.ba li::before{content:"";width:20px;height:20px;border-radius:50%;margin-top:2px;box-sizing:border-box}
.ba .b li::before{border:6px solid color-mix(in srgb,var(--flag) 25%,var(--card));background:var(--flag)}
.ba .a li::before{background:#3fd994 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10 3 3 5-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

.steps2{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s;max-width:820px}
.steps2 li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:20px;position:relative;padding-bottom:30px}
.steps2 li::before{content:counter(s,decimal-leading-zero);width:56px;height:56px;border-radius:18px;background:var(--plate);color:var(--blue);display:grid;place-items:center;font:800 18px/1 var(--font)}
.steps2 li:not(:last-child)::after{content:"";position:absolute;left:27px;top:62px;bottom:6px;width:2px;background:var(--rule)}
.steps2 h3{margin:12px 0 6px;font:800 20px/1.25 var(--font);color:var(--navy)}
.steps2 p{margin:0}

.quote{background:var(--card);border:1px solid var(--rule);border-radius:28px;padding:44px;position:relative;overflow:hidden}
.quote::before{content:"«";position:absolute;left:28px;top:-30px;font:800 200px/1 var(--font);color:var(--plate)}
.quote blockquote{position:relative;margin:0 0 18px;font:700 clamp(22px,2.4vw,30px)/1.35 var(--font);color:var(--navy);letter-spacing:-.02em;max-width:30em}
.quote cite{position:relative;font-style:normal;color:var(--muted)}


.svc{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.svc a{display:inline-block;padding:12px 18px;border-radius:14px;background:var(--card);border:1px solid var(--rule);text-decoration:none;font-weight:700;color:var(--navy)}
.svc a:hover{border-color:var(--blue);color:var(--blue)}

.more{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mcard{display:grid;grid-template-columns:150px 1fr;text-decoration:none;background:var(--card);border:1px solid var(--rule);border-radius:22px;overflow:hidden}
.mcard:hover{border-color:var(--blue)}
.mcard .m{background:linear-gradient(135deg,#151d63,#2a3ac4);color:#fff;padding:18px;display:flex;flex-direction:column;justify-content:flex-end}
.mcard .m strong{font:800 28px/1 var(--font);letter-spacing:-.03em}
.mcard .t{padding:18px 20px}
.mcard small{color:var(--blue);font-weight:700;font-size:13px}
.mcard h3{margin:4px 0 0;font:800 18px/1.3 var(--font);color:var(--navy)}
.sec-h{font:800 clamp(26px,3vw,38px)/1.1 var(--font);letter-spacing:-.03em;color:var(--navy);margin:0 0 24px}
.nf{padding-block:80px;text-align:center}
@media (max-width:1080px){.facts{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}.facts div:nth-child(4){padding-left:0;border-left:0}}
@media (max-width:760px){.ba,.more{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}.facts div{padding-left:0!important;border-left:0!important}.quote{padding:28px}.mcard{grid-template-columns:110px 1fr}}