@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(font/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(font/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(font/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(font/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

    --bg:           #fbfaf7;
    --surface:      #ffffff;
    --tint:         #f4f1ea;
    --dark:         #1c2b38;
    --dark-2:       #26404f;
    --footer-bg:    #141f29;

    --ink:          #182430;
    --ink-soft:     #4a5764;
    --muted:        #7c8794;
    --on-dark:      #c7d2db;
    --on-dark-dim:  #8b97a2;

    --accent:       #ee8b1f;
    --accent-dark:  #d1750f;
    --accent-soft:  #fdf1e0;
    --on-accent:    #ffffff;

    --tg:           #2aabee;
    --tg-ink:       #1c85c0;
    --tg-line:      #cbe8fb;

    --line:         #e7e3da;
    --err:          #d64545;
    --ok:           #1f9d55;
    --overlay:      rgba(20, 31, 41, .55);

    --radius:       16px;
    --radius-sm:    11px;
    --radius-lg:    26px;
    --wrap:         1140px;
    --header-h:     70px;

    --shadow:       0 10px 30px -12px rgba(24, 36, 48, .18);
    --shadow-sm:    0 4px 14px -6px rgba(24, 36, 48, .16);
    --shadow-accent: 0 8px 20px -8px rgba(238, 139, 31, .7);

    --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }

ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 20px;
}

.section        { padding: 78px 0; }
.section-tint   { background: var(--tint); }

.section-head        { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.section-head h2     { font-size: clamp(26px, 3.4vw, 38px); }
.section-sub         { color: var(--ink-soft); font-size: 17px; margin-top: 14px; }

.eyebrow {
    display: inline-block;
    font-size: 13px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent-dark);
    background: var(--accent-soft);
    padding: 6px 13px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.eyebrow-center { margin-inline: auto; }

.accent { color: var(--accent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-weight: 700; font-size: 15px;
    padding: 13px 22px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover    { transform: translateY(-2px); }
.btn:active   { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ic      { flex: none; }

.btn-primary       { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost         { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover   { border-color: var(--accent); }

.btn-tg            { background: var(--surface); color: var(--tg-ink); border-color: var(--tg-line); }
.btn-tg:hover      { border-color: var(--tg); }

.btn-sm            { padding: 10px 17px; font-size: 14px; }

.on-dark .btn-tg, .on-dark .btn-ghost {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .2);
}
.on-dark .btn-tg:hover   { border-color: var(--tg); }
.on-dark .btn-ghost:hover{ border-color: var(--accent); }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ic { flex: none; }

[data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
    animation: reveal_failsafe .01s linear 3s forwards;
}
[data-reveal].is_visible   { opacity: 1; transform: none; }
.js_ok [data-reveal]       { animation: none; }

@keyframes reveal_failsafe { to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
    .section       { padding: 56px 0; }
    .section-head  { margin-bottom: 34px; }

    .btn-msg { flex: 1 1 0; }
}

@media (max-width: 520px) {
    .contact-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; animation: none; }
    .btn:hover { transform: none; }
}

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 250, 247, .85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-row {
    display: flex; align-items: center; gap: 22px;
    height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.logo-mark {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex: none;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 6px 16px -6px rgba(238, 139, 31, .7);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.logo-name b { color: var(--accent); font-weight: 800; }
.logo-text small {
    font-weight: 500; font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--muted);
}

.nav { margin-left: auto; min-width: 0; }
.nav ul { display: flex; gap: 26px; font-weight: 600; font-size: 15px; }
.nav li { white-space: nowrap; }
.nav a { color: var(--ink-soft); transition: color .15s ease; }
.nav a:hover { color: var(--accent-dark); }

.header-phone {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 16px;
    white-space: nowrap;
}
.header-phone .ic { color: var(--accent); }
.header-phone:hover { color: var(--accent-dark); }

.burger {
    display: none; flex-direction: column; gap: 5px;
    padding: 8px; margin-left: auto;
}
.burger span {
    width: 24px; height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1200px) {
    .header-row { gap: 16px; }
    .nav ul { gap: 18px; font-size: 14.5px; }
}

@media (max-width: 1040px) {
    .nav ul { gap: 14px; font-size: 14px; }
    .logo-text small { display: none; }
    .header-phone { font-size: 15px; }
}

@media (max-width: 900px) {
    .nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        margin-left: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: 8px 20px;
        transform: translateY(-150%);
        transition: transform .28s ease;
    }
    .nav.is_open { transform: translateY(0); }
    .nav ul { flex-direction: column; gap: 0; }
    .nav li { border-bottom: 1px solid var(--line); }
    .nav li:last-child { border-bottom: 0; }
    .nav a { display: block; padding: 13px 0; font-size: 16px; }

    .header-phone { margin-left: auto; }
    .header-phone span { display: none; }
    .header-phone {
        width: 42px; height: 42px;
        justify-content: center;
        border-radius: 11px;
        background: var(--accent-soft);
    }
    .burger { display: flex; margin-left: 0; }
}

@media (max-width: 420px) {
    .logo-name { font-size: 18px; }
    .logo-mark { width: 40px; height: 40px; }
}

.site-footer {
    background: var(--footer-bg);
    color: #aeb9c3;
    padding: 52px 0 26px;
    font-size: 14.5px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 36px;
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-logo {
    font-size: 22px; font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}
.footer-logo b { color: var(--accent); font-weight: 800; }
.footer-brand p { margin-top: 14px; max-width: 340px; color: var(--on-dark-dim); }

.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer-col a,
.footer-col span {
    display: block;
    color: #aeb9c3;
    margin-bottom: 9px;
    transition: color .15s ease;
}
.footer-col a:hover { color: var(--accent); }

.footer-phone { font-weight: 800; font-size: 17px; color: #fff !important; }
.footer-phone:hover { color: var(--accent) !important; }

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    margin: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
}
.footer-social a:hover { background: var(--accent); color: #fff; }

.footer-bottom {
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding-top: 22px;
    color: #75828d;
    font-size: 13px;
}

.footer-note {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    justify-content: flex-end;
}
.footer-note a { color: var(--on-dark-dim); text-decoration: underline; }
.footer-note a:hover { color: var(--accent); }

@media (max-width: 700px) {
    .footer-note { justify-content: flex-start; }
}

.fab {
    position: fixed; right: 18px; bottom: 18px; z-index: 60;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: none; place-items: center;
    box-shadow: 0 10px 24px -6px rgba(238, 139, 31, .8);
    animation: fab_pulse 2.4s infinite;
}

@keyframes fab_pulse {
    0%   { box-shadow: 0 10px 24px -6px rgba(238, 139, 31, .8), 0 0 0 0    rgba(238, 139, 31, .5); }
    70%  { box-shadow: 0 10px 24px -6px rgba(238, 139, 31, .8), 0 0 0 16px rgba(238, 139, 31, 0); }
    100% { box-shadow: 0 10px 24px -6px rgba(238, 139, 31, .8), 0 0 0 0    rgba(238, 139, 31, 0); }
}

@media (max-width: 980px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .fab { display: grid; }
}

@media (max-width: 520px) {
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .fab { animation: none; }
}

.crumbs {
    padding: 18px 0 0;
    font-size: 13.5px;
}
.crumbs ol {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 4px;
}
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs a { color: var(--muted); transition: color .15s ease; }
.crumbs a:hover { color: var(--accent-dark); }
.crumbs span { color: var(--ink-soft); font-weight: 600; }
.crumbs-sep { color: var(--line); }

.hero {
    position: relative;
    padding: 72px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 78% -8%, var(--accent-soft), transparent 60%),
        linear-gradient(180deg, #fffdf9, var(--bg));
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 50px;
    align-items: center;
}

.hero-text h1 {
    font-size: clamp(32px, 5vw, 54px);
    margin-bottom: 20px;
}

.hero-lead {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--ink-soft);
    max-width: 540px;
    margin-bottom: 28px;
}

.hero-trust {
    display: flex; flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 30px;
    color: var(--ink-soft);
    font-size: 15px;
}
.hero-trust li { position: relative; padding-left: 24px; }
.hero-trust li::before {
    content: "";
    position: absolute; left: 0; top: 8px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 2px solid var(--accent);
}
.hero-trust b { color: var(--ink); font-weight: 800; }

.hero-visual { display: flex; justify-content: center; }

.hero-card {
    position: relative;
    width: 100%; max-width: 440px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.hero-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--tint);
}
.hero-photo img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

.hero-badge {
    position: absolute; right: -14px; bottom: 26px;
    display: flex; flex-direction: column;
    line-height: 1.05;
    padding: 14px 20px;
    border-radius: var(--radius);
    background: var(--dark);
    color: #fff;
    box-shadow: var(--shadow);
}
.hero-badge-num { font-size: 26px; font-weight: 800; color: var(--accent); }
.hero-badge-cap { font-size: 12px; color: var(--on-dark); }

@media (max-width: 980px) {
    .hero { padding: 52px 0 66px; }
    .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-visual { order: -1; max-width: 360px; margin: 0 auto; }
}

@media (max-width: 520px) {
    .hero-badge { right: -6px; bottom: 16px; padding: 11px 16px; }
    .hero-badge-num { font-size: 22px; }
    .hero-trust { gap: 8px 20px; font-size: 14px; }
}

.sections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sec-card {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.sec-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: #eadfce;
}

.sec-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--tint);
    overflow: hidden;
}
.sec-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.sec-card:hover .sec-cover img { transform: scale(1.04); }

.sec-card_noimg .sec-cover {
    display: grid; place-items: center;
    background:
        radial-gradient(circle at 30% 25%, var(--accent-soft), transparent 60%),
        var(--tint);
}
.sec-cover-ico { color: var(--accent); }

.sec-count {
    position: absolute; left: 12px; bottom: 12px;
    padding: 5px 11px;
    border-radius: 100px;
    background: rgba(20, 31, 41, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12.5px; font-weight: 700;
}

.sec-body { flex: 1 1 auto; padding: 20px 22px 16px; }
.sec-body h3 {
    display: flex; align-items: center; gap: 9px;
    font-size: 20px; margin-bottom: 9px;
}
.sec-body h3 .ic { color: var(--accent); }
.sec-card:hover .sec-body h3 { color: var(--accent-dark); }
.sec-body p { color: var(--ink-soft); font-size: 14.5px; }

.sec-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin: 0 22px 20px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}
.sec-price {
    font-weight: 800; font-size: 15px;
    color: var(--ink);
}
.sec-more {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 700; font-size: 14px;
    color: var(--accent-dark);
    transition: gap .15s ease;
}
.sec-card:hover .sec-more { gap: 9px; }

.sections-note {
    text-align: center;
    color: var(--ink-soft);
    margin: 34px auto 0;
    max-width: 700px;
}

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

@media (max-width: 600px) {
    .sections-grid { grid-template-columns: 1fr; }
    .sec-cover { aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sec-card:hover .sec-cover img { transform: none; }
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.adv-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
}

.adv-ico {
    display: grid; place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
}

.adv-item h3 { font-size: 18px; margin-bottom: 10px; }
.adv-item p  { color: var(--ink-soft); font-size: 14.5px; }

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

@media (max-width: 520px) {
    .adv-grid { grid-template-columns: 1fr; }
    .adv-item { padding: 24px 20px; }
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 24px 26px;
}

.step-num {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 800; font-size: 20px;
    box-shadow: var(--shadow-accent);
}

.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p  { color: var(--ink-soft); font-size: 14.5px; }

.step:not(:last-child)::after {
    content: "";
    position: absolute; top: 52px; right: -13px;
    width: 26px; height: 2px;
    z-index: 1;
    background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px);
}

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

    .step:nth-child(2)::after { display: none; }
}

@media (max-width: 520px) {
    .steps { grid-template-columns: 1fr; }
    .step::after { display: none; }
}

.geo-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.geo-text h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }

.geo-list { display: grid; gap: 11px; margin: 22px 0 28px; }
.geo-list li {
    position: relative;
    padding-left: 30px;
    color: var(--ink-soft);
}
.geo-list li::before {
    content: "";
    position: absolute; left: 0; top: 9px;
    width: 16px; height: 16px;
    border-radius: 5px;
    background: var(--accent-soft);
    border: 2px solid var(--accent);
}

.geo-map {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
}
.geo-map iframe { width: 100%; height: 100%; border: 0; }

.geo-map-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    color: var(--muted);
    background:
        radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 40%),
        repeating-linear-gradient(45deg, #f7f4ee 0 22px, #f1ede4 22px 44px);
}
.geo-map-placeholder .ic { color: var(--accent); }
.geo-map-placeholder span { font-weight: 600; font-size: 14px; }

@media (max-width: 980px) {
    .geo-inner { grid-template-columns: 1fr; gap: 28px; }
}

.cta-section { padding: 64px 0; }

.cta-box {
    position: relative;
    overflow: hidden;
    padding: 52px 46px;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--dark), var(--dark-2));
    color: #fff;
    box-shadow: var(--shadow);
}

.cta-box::before {
    content: "";
    position: absolute; right: -80px; top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 139, 31, .35), transparent 65%);
}

.cta-inner { position: relative; max-width: 680px; }

.cta-box h2  { font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; }
.cta-lead    { color: var(--on-dark); font-size: 17px; margin-bottom: 22px; }

.cta-contacts {
    display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 8px 20px;
    margin-bottom: 24px;
}
.cta-phone {
    font-size: 28px; font-weight: 800;
    color: #fff;
    transition: color .15s ease;
}
.cta-phone:hover { color: var(--accent); }
.cta-hours { color: var(--on-dark-dim); font-size: 15px; }

@media (max-width: 760px) {
    .cta-section { padding: 48px 0; }
    .cta-box     { padding: 38px 24px; }
    .cta-phone   { font-size: 24px; }
}

.sc { padding: 26px 0 0; }

.sc-head { max-width: 720px; margin-bottom: 40px; }
.sc-head h1 { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 14px; }
.sc-lead {
    color: var(--ink-soft);
    font-size: clamp(16px, 1.6vw, 18px);
    margin-bottom: 24px;
}

.sc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sc-grid_few { grid-template-columns: repeat(3, 1fr); max-width: 860px; }
.sc-grid_two { grid-template-columns: repeat(2, 1fr); max-width: 700px; }

.sc-card {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.sc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: #eadfce;
}

.sc-photo {
    aspect-ratio: 4 / 3;
    background: var(--tint);
    overflow: hidden;
}
.sc-photo img { width: 100%; height: 100%; object-fit: cover; }

.sc-card_noimg .sc-photo {
    display: grid; place-items: center;
    background:
        radial-gradient(circle at 30% 25%, var(--accent-soft), transparent 62%),
        var(--tint);
}
.sc-photo-ico { color: var(--accent); opacity: .75; }

.sc-body { flex: 1 1 auto; padding: 18px 18px 12px; }

.sc-body h2 {
    font-size: 17px; line-height: 1.25; margin-bottom: 7px;
    hyphens: auto; overflow-wrap: break-word;
}
.sc-note { color: var(--ink-soft); font-size: 13.5px; }

.sc-foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 18px 16px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.sc-price {
    font-weight: 800; font-size: 17px;
    color: var(--ink);
    min-width: 0;
}

.sc-price .unit {
    font-size: 12.5px; font-weight: 600;
    color: var(--muted);
    margin-left: 2px;
    white-space: nowrap;
}
.sc-price_deal { font-size: 14px; color: var(--accent-dark); }

.sc-order {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 700; font-size: 13.5px;
    color: var(--accent-dark);
    white-space: nowrap;
    transition: gap .15s ease;
}
.sc-order:hover { gap: 8px; }

.sc-unit-note {
    display: flex; align-items: center; gap: 9px;
    margin-top: 22px; padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 14.5px; font-weight: 600;
}
.sc-unit-note .ic { flex: none; }

.sc-terms { margin-top: 46px; }
.sc-terms h2 { font-size: 22px; margin-bottom: 20px; }

.sc-terms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.sc-term {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--tint);
    border-radius: var(--radius);
    padding: 22px 20px;
}
.sc-term .ic { color: var(--accent); margin-bottom: 4px; }
.sc-term b { font-size: 15.5px; }
.sc-term span { color: var(--ink-soft); font-size: 14px; }

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

@media (max-width: 860px) {
    .sc-grid,
    .sc-grid_few,
    .sc-grid_two   { grid-template-columns: repeat(2, 1fr); max-width: none; }
    .sc-terms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
    .sc-grid { grid-template-columns: 1fr; }
    .sc-grid .sc-foot { flex-direction: row; align-items: center; }
}

@media (max-width: 520px) {
    .sc { padding: 18px 0 0; }
    .sc-head { margin-bottom: 30px; }
    .sc-terms-grid { grid-template-columns: 1fr; }
    .sc-body { padding: 15px 15px 10px; }
    .sc-foot { margin: 0 15px 14px; }

    .sc-body h2 { font-size: 15px; }
    .sc-price   { font-size: 16px; }

    .sc-foot  { flex-direction: column; align-items: flex-start; gap: 7px; }
    .sc-order { align-self: flex-end; }

    .sc-grid_onecol-mob { grid-template-columns: 1fr; }

    .sc-grid_onecol-mob .sc-foot { flex-direction: row; align-items: center; }
}

.sa {
    max-width: 820px;
    padding-bottom: 20px;
}

.sa h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    margin-bottom: 8px;
}

.sa-article {
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.sa-part { margin-top: 26px; }

.sa-part h3 {
    font-size: 18px;
    margin-bottom: 9px;
}

.sa-part p {
    color: var(--ink-soft);
    font-size: 15.5px;
    margin-bottom: 11px;
}
.sa-part p b { color: var(--ink); }

.sa-list {
    list-style: none;
    margin: 0 0 13px;
    display: grid;
    gap: 9px;
}
.sa-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-soft);
    font-size: 15.5px;
}
.sa-list li b { color: var(--ink); }

.sa-li-ico {
    flex: none;
    margin-top: 4px;
    color: var(--accent);
}

.sa-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.sa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    white-space: nowrap;
}
.sa-table th,
.sa-table td {
    padding: 11px 16px;
    text-align: left;
}
.sa-table thead th {
    background: var(--tint);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}
.sa-table tbody tr + tr td { border-top: 1px solid var(--line); }
.sa-table tbody td         { color: var(--ink-soft); }
.sa-table tbody td:first-child { color: var(--ink); font-weight: 600; }

.sa-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 14px;
}
.sa-note .ic { flex: none; margin-top: 2px; }

.sa-faq { margin-top: 46px; }
.sa-faq h2 { margin-bottom: 18px; }

.sa-q {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    transition: border-color .15s ease;
}
.sa-q[open] { border-color: #eadfce; }

.sa-q summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15.5px;
    list-style: none;
}
.sa-q summary::-webkit-details-marker { display: none; }
.sa-q summary:hover { color: var(--accent-dark); }

.sa-q-ico {
    flex: none;
    color: var(--accent);
    transition: transform .2s ease;
}
.sa-q[open] .sa-q-ico { transform: rotate(180deg); }

.sa-q > p {
    padding: 0 18px 16px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

@media (max-width: 520px) {
    .sa-article,
    .sa-faq { margin-top: 34px; }

    .sa-part p,
    .sa-list li,
    .sa-q > p     { font-size: 15px; }
    .sa-q summary { font-size: 15px; padding: 14px 15px; }
    .sa-q > p     { padding: 0 15px 14px; }

    .sa-table th,
    .sa-table td  { padding: 10px 13px; }
}

.lg {
    max-width: 780px;
    padding: 26px 0 80px;
}

.lg-head { margin-bottom: 30px; }
.lg-head h1 {
    font-size: clamp(26px, 3.8vw, 38px);
    margin-bottom: 8px;
}
.lg-upd {
    color: var(--muted);
    font-size: 14px;
}

.lg-intro {
    padding: 18px 20px;
    border-radius: var(--radius-sm);
    background: var(--tint);
    font-size: 15.5px;
    color: var(--ink-soft);
}
.lg-intro b { color: var(--ink); }

.lg-body h2 {
    font-size: 19px;
    margin: 30px 0 10px;
}

.lg-body p {
    color: var(--ink-soft);
    font-size: 15.5px;
    margin-bottom: 11px;
}
.lg-body p b { color: var(--ink); }

.lg-list {
    list-style: none;
    margin: 0 0 12px;
    display: grid;
    gap: 8px;
}
.lg-list li {
    position: relative;
    padding-left: 18px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

.lg-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.lg-contacts {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.lg-contacts li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15.5px;
}
.lg-contacts .ic { flex: none; color: var(--accent); }
.lg-contacts a:hover { color: var(--accent-dark); }

@media (max-width: 520px) {
    .lg { padding: 18px 0 60px; }
    .lg-body p,
    .lg-list li,
    .lg-intro     { font-size: 15px; }
    .lg-body h2   { font-size: 18px; margin-top: 26px; }
}

.nf {
    max-width: 700px;
    margin: 0 auto;
    padding: 70px 0 90px;
    text-align: center;
}

.nf-code {
    display: block;
    font-size: clamp(84px, 16vw, 140px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--accent);
    opacity: .9;
}

.nf h1 { font-size: clamp(24px, 4vw, 34px); margin-top: 8px; }

.nf-desc {
    color: var(--ink-soft);
    font-size: 16.5px;
    margin: 14px auto 0;
    max-width: 460px;
}

.nf-actions { justify-content: center; margin-top: 30px; }

.nf-materials {
    margin-top: 54px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}
.nf-materials h2 { font-size: 18px; margin-bottom: 18px; }
.nf-materials ul {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 10px;
}
.nf-materials a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 600; font-size: 14.5px;
    transition: border-color .15s ease, color .15s ease;
}
.nf-materials a:hover { border-color: var(--accent); color: var(--accent-dark); }
.nf-materials .ic { color: var(--accent); }

@media (max-width: 520px) {
    .nf { padding: 44px 0 60px; }
    .nf-materials { margin-top: 40px; }
}