/* Шаблон коммерческой страницы услуги под SEO: H1 с городом, цена «от» и срок в первом экране, состав работ, этапы, кейсы, FAQ с разметкой. */


.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 .dino{position:absolute;right:-40px;bottom:-60px;width:min(36%,480px);height:auto;color:#fff;opacity:.07}
.ph-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:48px;align-items:end;padding-block:40px 56px}
.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}
.page-hero h1{font:800 clamp(34px,4.4vw,58px)/1.02 var(--font);letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
.page-hero .sum{margin:0 0 28px;max-width:36em;font-size:19px;color:#cfd6ff}
.offer{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:26px;display:grid;gap:16px}
.offer dl{margin:0;display:grid;gap:14px}
.offer dt{font-size:13px;color:#a9b4f0}
.offer dd{margin:2px 0 0;font:800 24px/1.2 var(--font);letter-spacing:-.02em}
.offer dd.small{font:600 16px/1.4 var(--font)}
.offer p{margin:0;font-size:14px;color:#cfd6ff}
.todo{color:#ff9d93}
.sec-h{font:800 clamp(28px,3.2vw,42px)/1.08 var(--font);letter-spacing:-.035em;color:var(--navy);margin:0 0 28px;max-width:20em;text-wrap:balance}

.service-result-wrap{padding-bottom:0}
.service-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center}
.service-art{aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:#eef1fb;border:1px solid var(--rule)}
.service-art img{display:block;width:100%;height:100%;object-fit:contain}
.service-eyebrow{display:block;margin-bottom:12px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.service-result-copy .sec-h{margin-bottom:18px;font-size:clamp(28px,3vw,38px)}
.service-result-copy p{margin:0 0 22px}
.service-result-copy ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.service-result-copy li{padding-left:20px;border-left:3px solid var(--blue);font-weight:600;color:var(--navy);font-size:15px}
.service-preparation{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding:32px;background:var(--plate);border:1px solid var(--rule);border-radius:24px;align-items:start}
.service-preparation .sec-h{font-size:clamp(25px,2.5vw,32px);margin:0}
.service-preparation p{margin:0}
.service-sources h2{font-size:19px;color:var(--navy);margin:0 0 12px}
.service-sources ul{margin:0;padding-left:20px;display:grid;gap:8px}
.service-sources a{color:var(--blue);text-underline-offset:3px}
@media (max-width:760px){.service-result,.service-preparation{grid-template-columns:1fr;gap:26px}.service-preparation{padding:24px}.service-art{max-width:560px;width:100%;margin-inline:auto}}

.for{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.for div{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:22px;display:grid;gap:12px;align-content:start;font-weight:600;color:var(--navy)}
.for div::before{content:"";width:36px;height:36px;border-radius:12px;background:var(--plate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12 3.5 3.5L17 9' fill='none' stroke='%232536d0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}

.incl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;align-items:start;background:var(--card);border:1px solid var(--rule);border-radius:28px;padding:40px}
.incl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.incl li{padding-left:28px;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
.incl .sec-h{margin-bottom:12px}
.incl p{margin:0;color:var(--muted)}

.flow4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:f}
.flow4 div{counter-increment:f;padding:0 20px 0 0;position:relative}
.flow4 div::before{content:counter(f,decimal-leading-zero);display:block;font:800 40px/1 var(--font);letter-spacing:-.04em;color:var(--blue);margin-bottom:14px}
.flow4 div::after{content:"";position:absolute;left:64px;right:20px;top:20px;height:2px;background:var(--rule)}
.flow4 div:last-child::after{display:none}
.flow4 h3{margin:0 0 6px;font:800 19px/1.25 var(--font);color:var(--navy)}
.flow4 p{margin:0;font-size:15px}

.tars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tar{background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:26px;display:grid;gap:12px;align-content:start}
.tar.hl{background:linear-gradient(135deg,#151d63,#2a3ac4);border:0;color:#dfe4ff}
.tar h3{margin:0;font:800 19px/1.2 var(--font);color:var(--navy)}
.tar.hl h3,.tar.hl .pr{color:#fff}
.pr{font:800 34px/1 var(--font);letter-spacing:-.03em;color:var(--navy)}
.pr small{font:500 14px/1 var(--font);letter-spacing:0;opacity:.7}
.tar ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px}

.fmts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fmt{background:var(--card);border:1px solid var(--rule);border-radius:24px;padding:30px;display:grid;gap:12px;align-content:start}
.fmt.dark{background:linear-gradient(135deg,#151d63,#2a3ac4);border:0;color:#dfe4ff}
.fmt h3{margin:0;font:800 24px/1.2 var(--font);letter-spacing:-.02em;color:var(--navy)}
.fmt.dark h3{color:#fff}
.fmt p{margin:0}
.fmt ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
@media (max-width:760px){.fmts{grid-template-columns:1fr}}
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:0 24px}
.faq summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-weight:700;font-size:17px;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:6px}
.faq details p{margin:0 0 20px;max-width:46em}
.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)}
.wip{background:var(--card);border:2px dashed var(--rule);border-radius:24px;padding:32px;max-width:760px}
.wip h2{margin:0 0 10px;color:var(--navy);font:800 22px/1.3 var(--font)}
.wip ul{margin:10px 0 0;padding-left:20px}
@media (max-width:1080px){.ph-grid,.incl{grid-template-columns:1fr}.for{grid-template-columns:1fr 1fr}.flow4{grid-template-columns:1fr 1fr;row-gap:28px}.flow4 div::after{display:none}.tars{grid-template-columns:1fr}}
@media (max-width:640px){.for,.flow4,.incl ul{grid-template-columns:1fr}.incl{padding:24px}}