:root {
    color-scheme: light;
    --ink: #14213d;
    --muted: #5f6f8e;
    --line: rgba(255, 255, 255, .78);
    --glass: rgba(255, 255, 255, .52);
    --glass-strong: rgba(255, 255, 255, .76);
    --blue: #356df3;
    --violet: #7357ef;
    --cyan: #28b7d8;
    --brand-on: #0e2f50;
    --brand-store: #157dfa;
    --shadow: 0 28px 80px rgba(57, 75, 126, .15), inset 0 1px 0 rgba(255, 255, 255, .9);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.modal-open,
html.modal-open body {
    overflow: hidden;
    overscroll-behavior: none;
}
html.modal-open body { padding-right: var(--modal-scrollbar-width, 0); }
body {
    --glow-one-x: 0vw;
    --glow-one-y: 0vh;
    --glow-one-scale: 1;
    --glow-one-color: rgba(111, 197, 255, .35);
    --glow-two-x: 0vw;
    --glow-two-y: 0vh;
    --glow-two-scale: 1;
    --glow-two-color: rgba(177, 145, 255, .32);
    margin: 0;
    color: var(--ink);
    background:
            radial-gradient(circle at 12% 10%, rgba(143, 198, 255, .5), transparent 29rem),
            radial-gradient(circle at 88% 16%, rgba(201, 174, 255, .48), transparent 31rem),
            radial-gradient(circle at 48% 78%, rgba(140, 235, 226, .28), transparent 34rem),
            linear-gradient(145deg, #f8fbff 0%, #eff4ff 48%, #fbf9ff 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .52;
    pointer-events: none;
    will-change: transform, background-color;
    transition: transform 1.15s cubic-bezier(.22,.75,.22,1), background-color 1.15s ease, opacity .8s ease;
}
body::before {
    top: 22%;
    left: -10rem;
    background-color: var(--glow-one-color);
    transform: translate3d(var(--glow-one-x), var(--glow-one-y), 0) scale(var(--glow-one-scale));
}
body::after {
    right: -12rem;
    bottom: 8%;
    background-color: var(--glow-two-color);
    transform: translate3d(var(--glow-two-x), var(--glow-two-y), 0) scale(var(--glow-two-scale));
}
body > main,
body > footer { position: relative; z-index: 1; }

a { color: inherit; }
p { line-height: 1.72; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; }
h1 { margin: .45rem 0 1.25rem; font-size: clamp(2.8rem, 3vw, 65px); font-weight: 700; }
h2 { margin: .35rem 0 1.2rem; font-size: clamp(2rem, 4vw, 3.75rem); }
h3 { font-size: 1.35rem; }

.site-header {
    position: sticky;
    top: 1rem;
    z-index: 20;
    width: min(1180px, calc(100% - 2rem));
    margin: 1rem auto 0;
    padding: .75rem .9rem .75rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border: 1px solid var(--line);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 16px 50px rgba(67, 84, 128, .12), inset 0 1px 0 #fff;
    backdrop-filter: blur(24px) saturate(145%);
    transition: transform .38s cubic-bezier(.22,.75,.22,1), opacity .28s ease;
    will-change: transform, opacity;
}
.site-header.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-100% - 2rem));
}
.brand { margin: 0 auto 0 0; line-height: 1; }
.brand a { text-decoration: none; }
.brand-logo { display: block; width: 142px; height: auto; }
.brand-logo-mobile { display: none; width: 2.6rem; height: 2.6rem; }
.brand-name { font-weight: 750; letter-spacing: -.045em; white-space: nowrap; }
.brand-word { display: inline-flex; align-items: baseline; font-size: 1.75rem; line-height: 1; }
.brand-on { color: var(--brand-on); }
.brand-store { color: var(--brand-store); }
.brand-icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.site-header nav ul { display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.site-header nav a { display: block; padding: .7rem .75rem; color: var(--muted); text-decoration: none; font-size: .92rem; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current="page"] { color: var(--blue); background: rgba(255,255,255,.65); border-radius: .75rem; font-weight: 750; }
.header-login { color: var(--muted); text-decoration: none; }
.header-action-icon { display: none; width: 1.5rem; height: 1.5rem; color: white; }
.mobile-menu-toggle {
    display: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: .9rem;
    background: rgba(255,255,255,.52);
    color: var(--ink);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(57,75,126,.08);
    cursor: pointer;
}
.mobile-menu-toggle img { width: 1.5rem; height: 1.5rem; }

.button,
a[href="#demo"],
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .82rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(53, 109, 243, .96), rgba(115, 87, 239, .94));
    color: #fff;
    box-shadow: 0 12px 30px rgba(70, 88, 216, .27), inset 0 1px 0 rgba(255,255,255,.35);
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.button:hover,
a[href="#demo"]:hover,
button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(70, 88, 216, .34); }
.button.secondary { color: var(--ink); background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(67,84,128,.1); }
.button.ghost { color: var(--ink); background: rgba(255,255,255,.42); box-shadow: none; }
.button.start-free,
button.start-free {
    color: #20365d;
    border-color: rgba(150,177,237,.82);
    background: linear-gradient(110deg, #fff 0%, #e9f3ff 20%, #c9e2ff 38%, #e2d5ff 58%, #fff 82%);
    background-size: 250% 100%;
    box-shadow: 0 12px 30px rgba(83,114,206,.19), inset 0 1px 0 rgba(255,255,255,.95);
    animation: start-free-shimmer 5.5s ease-in-out infinite alternate;
}
.button.start-free:hover,
button.start-free:hover { box-shadow: 0 16px 34px rgba(83,114,206,.26), inset 0 1px 0 #fff; }
.start-free:focus-visible { outline: 3px solid rgba(62,114,246,.55); outline-offset: 3px; }
.start-free:disabled,
.start-free.is-loading { animation: none; }
@keyframes start-free-shimmer {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .start-free { animation: none; }
}

main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
main > section,
footer {
    margin: 1.4rem auto;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid var(--line);
    border-radius: clamp(1.5rem, 4vw, 3rem);
    background: var(--glass);
    box-shadow: var(--shadow);
    backdrop-filter: blur(28px) saturate(140%);
}
main > section > p:first-child { margin-top: 0; color: var(--blue); font-weight: 700; }
main > section > p:not(:first-child) { color: var(--muted); }
section article,
details,
figure {
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.43);
    box-shadow: inset 0 1px 0 #fff, 0 16px 40px rgba(57,75,126,.08);
}
section article p, section article li, figcaption, details p { color: var(--muted); }
figure:not(:has(img)) { display: none; }
figure img { display: block; width: 100%; height: auto; border-radius: 1rem; object-fit: cover; }
.progressive-image { position: relative; display: block; width: 100%; overflow: hidden; }
.progressive-image-preview {
    opacity: 0;
    filter: blur(18px);
    transform: scale(1.1);
    transition: opacity 200ms ease-in-out, filter 320ms ease, transform 320ms ease;
}
.progressive-image.is-preview-ready > .progressive-image-preview { opacity: 1; filter: blur(0); transform: scale(1); }
.progressive-image > .progressive-image-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 3000ms ease-in-out;
}
.progressive-image.is-full-visible > .progressive-image-full { opacity: 1; }
.progressive-image.is-full-visible > .progressive-image-preview { opacity: 0; transition: opacity 3000ms ease-in-out; }
.delivery-visual > .progressive-image { height: 100%; }
figcaption { margin-top: .8rem; font-size: .88rem; }
summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: rgba(255,255,255,.62);
    color: var(--blue);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: inset 0 1px 0 #fff;
    transition: transform .36s cubic-bezier(.2,.75,.25,1), background-color .25s ease;
}
details[open] summary::after {
    transform: rotate(45deg);
    background: rgba(227,237,255,.88);
}
.faq-answer {
    overflow: hidden;
}
.faq-motion .faq-answer {
    height: 0;
    opacity: 0;
    will-change: height, opacity;
    transition: height .46s cubic-bezier(.22,.72,.24,1), opacity .3s ease;
}
.faq-motion details[open] > .faq-answer { opacity: 1; }
.faq-answer p { margin: .9rem 0 .1rem; }

.hero {
    min-height: 710px;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(340px, .97fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    margin-top: 2rem;
    overflow: hidden;
    position: relative;
}
.hero::before {
    content: "";
    position: absolute;
    width: 22rem;
    height: 22rem;
    right: 5%;
    top: 14%;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(71, 151, 255, .38), rgba(182, 125, 255, .38));
    filter: blur(35px);
}
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border-radius: 999px; background: rgba(255,255,255,.56); border: 1px solid var(--line); color: var(--blue); font-weight: 700; line-height: 1em}
.hero-copy { position: relative; z-index: 2; }
.hero-copy > p:nth-of-type(2) { max-width: 43rem; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0; }
.hero-actions p { margin: 0; }
.hero-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 0; list-style: none; }
.hero-bullets li {
    padding: .82rem 1rem;
    border: 1px solid rgba(112,137,194,.24);
    border-radius: 1rem;
    background: rgba(255,255,255,.82);
    color: #425475;
    box-shadow: 0 10px 24px rgba(57,75,126,.09), inset 0 1px 0 #fff;
    backdrop-filter: blur(14px);
}
.hero-bullets li::before { content: "✓"; margin-right: .55rem; color: var(--blue); font-weight: 800; }
.hero-stage { position: relative; z-index: 2; min-height: 480px; padding: 1.25rem; }
.hero-stage img { width: 100%; min-height: 480px; height: 100%; object-fit: cover; border-radius: 2rem; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.92); }
.hero-stage .glass-screen { position: absolute; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.55); backdrop-filter: blur(20px); box-shadow: var(--shadow); }
.screen-main { inset: 8% 4% 14% 0; border-radius: 2rem; padding: 1.3rem; transform: perspective(900px) rotateY(-7deg) rotateX(3deg); }
.screen-mobile { width: 36%; height: 62%; right: -2%; bottom: 0; border-radius: 2rem; padding: .85rem; transform: rotate(5deg); }
.screen-chip { width: 64%; height: .8rem; border-radius: 999px; background: rgba(79,112,215,.18); margin-bottom: .8rem; }
.screen-row { height: 3.1rem; border-radius: .9rem; background: rgba(255,255,255,.65); margin: .7rem 0; border: 1px solid rgba(255,255,255,.8); }
.screen-map { height: 43%; border-radius: 1.3rem; background: linear-gradient(135deg, rgba(85,173,255,.16), rgba(162,112,255,.17)); margin-top: 1rem; position: relative; overflow: hidden; }
.screen-map::before { content: ""; position: absolute; width: 52%; height: 2px; background: var(--blue); left: 18%; top: 49%; transform: rotate(-18deg); box-shadow: 42px 28px 0 rgba(115,87,239,.5); }

.order-path h2 { max-width: 18ch; }
.journey-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: journey;
}
.journey-step {
    position: relative;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 1.5rem;
    background: rgba(255,255,255,.54);
    box-shadow: inset 0 1px 0 #fff, 0 18px 42px rgba(57,75,126,.09);
    counter-increment: journey;
}
.journey-step::before {
    content: "0" counter(journey);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: .85rem;
    border-radius: 50%;
    background: rgba(21,125,250,.1);
    color: #157dfa;
    font-size: .82rem;
    font-weight: 800;
}
.journey-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    z-index: 3;
    top: 8rem;
    right: -.88rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background: #f6f9ff;
    color: #157dfa;
    box-shadow: 0 8px 20px rgba(57,75,126,.14);
    font-weight: 900;
}
.journey-step h3 { margin: 1rem 0 .45rem; font-size: 1.28rem; }
.journey-step > p { margin: 0; color: var(--muted); font-size: .92rem; }
.journey-visual {
    position: relative;
    height: 205px;
    overflow: hidden;
    border: 1px solid rgba(121,143,193,.16);
    border-radius: 1.1rem;
    background: linear-gradient(145deg, rgba(239,246,255,.96), rgba(255,255,255,.72));
}

.storefront-visual { padding: 1.1rem .8rem .7rem; }
.storefront-browser {
    width: 90%;
    height: auto;
    overflow: hidden;
    padding: .45rem;
    border-radius: .9rem;
    background: #0e2f50;
    box-shadow: 0 16px 32px rgba(14,47,80,.22);
}
.storefront-browser::before {
    content: "";
    display: block;
    width: 23px;
    height: 4px;
    margin: 0 0 5px 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff917e 0 4px, transparent 4px 9px, #ffd37c 9px 13px, transparent 13px 18px, #8fe1bd 18px);
}
.storefront-screen,
.phone-screen { position: relative; overflow: hidden; background: #fff; }
.storefront-screen { width: 100%; height: auto; aspect-ratio: 8 / 5; border-radius: .45rem; isolation: isolate; }
.storefront-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
.storefront-slide.is-active { z-index: 1; opacity: 1; }
.storefront-slide .progressive-image { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.storefront-slide img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.storefront-screen .storefront-slide { overflow: hidden; }
.storefront-screen .storefront-slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform: none; }
.phone-storefront {
    position: absolute;
    z-index: 2;
    right: .55rem;
    bottom: .45rem;
    width: 54px;
    height: 112px;
    padding: 2px;
    border: 2px solid #0e2f50;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 12px 25px rgba(14,47,80,.2);
}
.phone-storefront::before { content: ""; display: block; width: 18px; height: 3px; margin: -1px auto 5px; border-radius: 999px; background: #0e2f50; }
.phone-screen { height: calc(100% - 7px); border-radius: .3rem; }
.storefront-controls { position: absolute; z-index: 3; left: .8rem; bottom: .1rem; display: flex; gap: .1rem; }
.storefront-control {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.storefront-control::after { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: #9cb4d7; transition: width 200ms ease, background 200ms ease; }
.storefront-control.is-active::after { width: .7rem; background: #157dfa; }
.storefront-control:focus-visible { outline: 2px solid #157dfa; outline-offset: 1px; border-radius: .3rem; }
.payment-visual { display: grid; place-items: center; padding: 1rem; }
.payment-logos { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 100%; }
.bank-logo {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 70px;
    padding: .45rem;
    overflow: hidden;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 8px 18px rgba(57,75,126,.08);
}
.bank-logo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.bank-logo.sbp { background: #08006b; }
.bank-logo.mir { background: #fff; }
.bank-logo.sber { background: #fff; }
.bank-logo.tbank { background: #ffdd2d; }
.kanban-visual { display: grid; place-items: center; padding: .65rem .65rem 2rem; }
.monitor-shell { position: relative; width: 100%; max-width: 205px; padding: .42rem; border-radius: .85rem; background: #162840; box-shadow: 0 14px 30px rgba(14,47,80,.22); }
.monitor-screen { position: relative; width: 100%; min-height: 134px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .5rem; background: #f7f9fc; }
.monitor-shell::after { content: ""; position: absolute; left: 42%; bottom: -12px; width: 16%; height: 12px; background: linear-gradient(#8e9aad, #c8d0da); clip-path: polygon(35% 0, 65% 0, 72% 72%, 100% 72%, 100% 100%, 0 100%, 0 72%, 28% 72%); }
.oms-slide { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 11px 9px; opacity: 0; visibility: hidden; transition: opacity 350ms ease, visibility 350ms; color: #162840; }
.oms-slide.is-active { opacity: 1; visibility: visible; }
.oms-slide h4 { margin: 0; font-size: 12px; line-height: 1.2; font-weight: 800; }
.oms-mini-board { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; min-height: 0; }
.oms-mini-column { min-width: 0; border-radius: 5px; background: #eaf2fd; }
.oms-column-title { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 5px; border-radius: 5px 5px 0 0; background: #197bd5; color: #fff; font-size: 11px; line-height: 1.1; font-weight: 700; }
.oms-column-title span { opacity: .8; }
.oms-mini-column.ready { background: #eaf7ef; }
.oms-mini-column.ready .oms-column-title { background: #238454; }
.oms-mini-order { display: grid; gap: 5px; margin: 5px; padding: 7px 4px; border-left: 2px solid #197bd5; border-radius: 4px; background: #fff; box-shadow: 0 2px 5px rgba(14,47,80,.05); font-size: 10px; line-height: 1.1; }
.oms-mini-order strong { font-size: 12px; }
.ready .oms-mini-order { border-color: #238454; }
.oms-mini-order i { width: 70%; height: 3px; margin-top: 2px; border-radius: 3px; background: #dbe5f2; }
.oms-order-focus { display: grid; gap: 7px; padding: 8px; border-left: 3px solid #197bd5; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(14,47,80,.07); font-size: 11px; line-height: 1.15; }
.oms-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.oms-order-heading strong { font-size: 15px; }
.oms-order-heading span { padding: 3px 5px; border-radius: 4px; background: #eaf2fd; color: #196bbc; font-size: 10px; font-weight: 700; }
.oms-order-business { font-weight: 700; }
.oms-order-address { color: #52647a; }
.oms-order-method { color: #196bbc; font-weight: 700; }
.oms-courier-focus { display: grid; justify-items: center; gap: 8px; padding: 10px 3px; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(14,47,80,.07); }
.oms-courier-status { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.2; font-weight: 700; }
.oms-courier-status i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #e89d27; }
.oms-timer { color: #188546; font-family: ui-monospace, Consolas, monospace; font-size: 30px; line-height: 1; letter-spacing: -1px; }
.oms-timer-label { color: #52647a; font-size: 10px; line-height: 1.2; }
.oms-map { position: relative; flex: 1; min-height: 0; overflow: hidden; border: 1px solid #e1dbe3; border-radius: 6px; }
.oms-map svg { display: block; width: 100%; height: 100%; }
.oms-map-order { position: absolute; left: 53%; top: 68%; transform: translateX(-50%); padding: 3px 6px; border-radius: 4px; background: #157dfa; color: #fff; font-size: 11px; line-height: 1; font-weight: 800; }
.oms-controls { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.oms-control, .oms-play-toggle { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #315881; cursor: pointer; }
.oms-control::after { content: ""; width: 5px; height: 5px; border-radius: 99px; background: #9cb4d7; transition: width 200ms ease, background 200ms ease; }
.oms-control.is-active::after { width: 13px; background: #157dfa; }
.oms-play-toggle { font-size: 13px; font-weight: 800; }
.oms-control:hover, .oms-play-toggle:hover { background: rgba(21,125,250,.08); }
.oms-control:focus-visible, .oms-play-toggle:focus-visible { outline: 2px solid #157dfa; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
    .oms-slide, .oms-control::after { transition: none; }
}
.delivery-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.courier-labels { position: absolute; inset: auto .4rem .55rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: .25rem; }
.courier-label { display: grid; place-items: center; min-width: 0; padding: .45rem .15rem; border-radius: .6rem; text-align: center; box-shadow: 0 10px 24px rgba(20,33,61,.18); font-size: .65rem; line-height: 1.2; font-weight: 900; }
.courier-label.cdek { background: rgba(255,255,255,.94); color: #179c49; }
.courier-label.own { background: #157dfa; color: #fff; }
.courier-label.yandex { background: #ffdb25; color: #111; }

#integrations { position: relative; overflow: hidden; }
#integrations::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 22rem;
    height: 22rem;
    right: -7rem;
    top: 4rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,125,250,.16), rgba(115,87,239,.04) 58%, transparent 72%);
}
#integrations > p:nth-of-type(2) { max-width: 52rem; }
.integration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 1.5rem;
}
.integration-category {
    min-width: 0;
    margin: 0;
    padding: 1.35rem;
    background: rgba(255,255,255,.5);
}
.integration-category-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}
.integration-category-head > span {
    display: grid;
    place-items: center;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: .9rem;
    background: linear-gradient(145deg, rgba(21,125,250,.13), rgba(115,87,239,.1));
    color: #157dfa;
    font-size: .8rem;
    font-weight: 850;
    box-shadow: inset 0 1px 0 #fff;
}
.integration-category-head p {
    margin: 0 0 .18rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}
.integration-category-head h3 { margin: 0; font-size: 1.55rem; }
.integration-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}
.integration-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    min-height: 4.7rem;
    padding: .7rem;
    border: 1px solid rgba(130,151,197,.16);
    border-radius: 1rem;
    background: rgba(255,255,255,.78);
    box-shadow: 0 9px 24px rgba(57,75,126,.07), inset 0 1px 0 #fff;
}
.integration-logo img {
    display: block;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    padding: .35rem;
    border-radius: .75rem;
    background: #fff;
    object-fit: contain;
}
.integration-logo > span:last-child {
    min-width: 0;
    color: var(--ink);
    font-size: .94rem;
    font-weight: 780;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.integration-logos--payments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integration-bank-more { margin-top: 1rem; }
.integration-bank-more summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: fit-content;
    margin: 0 auto;
    padding: .7rem 1rem;
    border: 1px solid rgba(130,151,197,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 8px 20px rgba(57,75,126,.06);
}
.integration-bank-more summary::-webkit-details-marker { display: none; }
.integration-bank-more summary::after {
    content: "";
    width: .45rem;
    height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.12rem) rotate(45deg);
    transition: transform .2s ease;
}
.integration-bank-more[open] summary::after { transform: translateY(.12rem) rotate(225deg); }
.integration-bank-more summary:hover { background: #fff; }
.integration-bank-more summary:focus-visible { outline: 3px solid #157dfa; outline-offset: 3px; }
.integration-bank-more .integration-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.integration-note { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }

#value {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    overflow: hidden;
}
#value > h2,
#value > p,
#value > .value-visual { grid-column: 1 / -1; }
#value > article { margin: 0; padding: 1.55rem; }
#value > .value-feature {
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-color: rgba(255,255,255,.96);
    border-radius: 1.55rem;
    background: rgba(255,255,255,.74);
    box-shadow: inset 0 1px 0 #fff, 0 16px 40px rgba(57,75,126,.1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.value-feature::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 1px 1px auto;
    height: 2rem;
    border-radius: 1.55rem 1.55rem 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    pointer-events: none;
}
.value-feature-scene {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 12.5rem;
    padding: 1.2rem 1.3rem .8rem;
    overflow: hidden;
}
.value-orders-scene { background: radial-gradient(circle at 92% 5%, #c2ecff, transparent 47%), linear-gradient(135deg, #e5f5ff, #eff2ff); }
.value-client-scene { background: radial-gradient(circle at 8% 0, #d6f6ed, transparent 50%), linear-gradient(135deg, #eff9ff, #eeeaff); }
.value-delivery-scene { background: radial-gradient(circle at 80% 0, #e1dcff, transparent 48%), linear-gradient(135deg, #e6f8ff, #f1f2ff); }
.value-editor-scene { background: radial-gradient(circle at 95% 0, #ecdfff, transparent 46%), linear-gradient(135deg, #e6f3ff, #f5f0ff); }
.value-report-scene { background: radial-gradient(circle at 70% 0, #d8edff, transparent 50%), linear-gradient(135deg, #e8f6ff, #f3edff); }
.value-feature-content { padding: 1.25rem 1.45rem 1.5rem; }
.value-feature-content h3 { margin: 0 0 .6rem; font-size: 1.35rem; line-height: 1.22; }
.value-feature-content p { margin: 0; line-height: 1.6; }

.value-oms-window,
.value-client-window,
.value-report-window {
    width: 100%;
    overflow: hidden;
    border: 1px solid #dce6f3;
    border-radius: .8rem .8rem 0 0;
    background: #fff;
    box-shadow: 0 10px 26px rgba(35,75,137,.17);
}
.value-oms-window { height: 10.1rem; transform: rotate(-1deg); }
.value-oms-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    height: 2rem;
    padding: 0 .7rem;
    border-bottom: 1px solid #ebeff6;
    color: #22375e;
    font-size: .68rem;
    font-weight: 750;
}
.value-oms-top b { margin-right: .3rem; color: #187be4; font-weight: 900; }
.value-oms-count { padding: .2rem .4rem; border-radius: .45rem; background: #e7f7ee; color: #348a65; font-size: .55rem; white-space: nowrap; }
.value-oms-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; padding: .55rem; }
.value-oms-lane { min-width: 0; }
.value-oms-lane > span {
    display: block;
    padding: .3rem .35rem;
    border-radius: .3rem;
    background: #d8edff;
    color: #1f659f;
    font-size: .58rem;
    font-weight: 800;
    white-space: nowrap;
}
.value-oms-lane:nth-child(2) > span { background: #dcf5ed; color: #21826a; }
.value-oms-lane:nth-child(3) > span { background: #dff3df; color: #36804c; }
.value-oms-lane > div { margin-top: .32rem; padding: .4rem; border: 1px solid #e5ebf3; border-radius: .4rem; background: #fff; box-shadow: 0 3px 7px rgba(35,75,137,.05); }
.value-oms-lane b,
.value-oms-lane small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.value-oms-lane b { color: #203455; font-size: .57rem; }
.value-oms-lane small { margin-top: .18rem; color: #74839b; font-size: .52rem; }

.value-client-window { height: 10.1rem; padding: .7rem; transform: rotate(1deg); }
.value-client-head { display: flex; align-items: center; gap: .55rem; padding-bottom: .55rem; border-bottom: 1px solid #edf0f6; }
.value-client-avatar { display: grid; place-items: center; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(145deg,#e7b88e,#a86950); color: #fff; font-size: 1rem; font-weight: 800; box-shadow: inset 0 -4px 8px rgba(51,32,25,.2); }
.value-client-head > span:nth-child(2) { min-width: 0; }
.value-client-head b,
.value-client-head small { display: block; white-space: nowrap; }
.value-client-head b { font-size: .72rem; }
.value-client-head small { margin-top: .1rem; color: #7788a0; font-size: .55rem; }
.value-client-head em { margin-left: auto; padding: .3rem .4rem; border-radius: .45rem; background: #e4f8ef; color: #218266; font-size: .56rem; font-style: normal; font-weight: 700; }
.value-client-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .55rem; }
.value-client-facts > span { min-width: 0; padding: .4rem; border: 1px solid #e7ecf5; border-radius: .45rem; }
.value-client-facts small,
.value-client-facts b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.value-client-facts small { color: #7b8aa2; font-size: .52rem; }
.value-client-facts b { margin-top: .12rem; color: #213657; font-size: .62rem; }
.value-client-timeline { display: flex; align-items: center; gap: .8rem; margin-top: .65rem; color: #60728d; font-size: .57rem; }
.value-client-timeline span { position: relative; white-space: nowrap; }
.value-client-timeline span::before { content: ""; display: inline-block; width: .36rem; height: .36rem; margin-right: .3rem; border-radius: 50%; background: #28bcae; vertical-align: middle; }

.value-dispatch { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .45rem; width: 100%; height: 10.1rem; }
.value-dispatch-order { min-width: 9.5rem; padding: .55rem .75rem; border: 1px solid #e5eaf6; border-radius: .65rem; background: #fff; box-shadow: 0 8px 18px rgba(38,85,140,.12); text-align: center; }
.value-dispatch-order b,
.value-dispatch-order small { display: block; }
.value-dispatch-order b { font-size: .68rem; }
.value-dispatch-order small { margin-top: .2rem; color: #6683a8; font-size: .55rem; }
.value-dispatch-connector { position: relative; width: 54%; height: 1.1rem; border-top: 2px solid #84addd; border-left: 2px solid #84addd; border-right: 2px solid #84addd; border-radius: .6rem .6rem 0 0; }
.value-dispatch-connector::after { content: ""; position: absolute; top: -.75rem; left: 50%; height: .7rem; border-left: 2px solid #84addd; }
.value-dispatch-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.value-dispatch-choices > div { min-width: 0; padding: .6rem .5rem; border: 1px solid #e2e9f5; border-radius: .65rem; background: #fff; box-shadow: 0 7px 16px rgba(38,85,140,.1); }
.value-dispatch-choices span { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: .2rem; border-radius: .4rem; background: #1d8ce9; color: #fff; font-size: .7rem; font-weight: 800; }
.value-dispatch-choices > div:last-child span { background: #7764d7; }
.value-dispatch-choices b { font-size: .62rem; white-space: nowrap; }
.value-dispatch-choices small { display: block; margin-top: .25rem; color: #6b7a93; font-size: .52rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.value-editor-devices { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 10.6rem; }
.value-editor-laptop {
    position: relative;
    flex: 0 0 auto;
    width: min(72%, 292px);
    aspect-ratio: 16 / 10;
    transform: rotate(-2deg);
}
.value-editor-laptop::after {
    content: "";
    position: absolute;
    right: -5%;
    bottom: 0;
    left: -5%;
    height: .42rem;
    border-radius: 0 0 55% 55%;
    background: linear-gradient(#c9d4e2, #8fa2b8);
    box-shadow: 0 5px 10px rgba(28,44,81,.16);
}
.value-editor-desktop {
    height: calc(100% - .4rem);
    overflow: hidden;
    border: .3rem solid #33445f;
    border-radius: .55rem .55rem .22rem .22rem;
    background: #fff;
    box-shadow: 0 12px 25px rgba(28,44,81,.2);
}
.value-editor-top {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 1.35rem;
    padding: 0 .4rem;
    border-bottom: 1px solid #e8ecf4;
    background: #fff;
    color: #64748b;
    font-size: .48rem;
    white-space: nowrap;
}
.value-editor-top b { color: #167edd; font-size: .58rem; }
.value-editor-top em { margin-left: auto; padding: .16rem .28rem; border-radius: .25rem; background: #e7f7ee; color: #348a65; font-size: .42rem; font-style: normal; }
.value-editor-body { display: flex; height: calc(100% - 1.35rem); }
.value-editor-sidebar {
    display: flex;
    flex: 0 0 23%;
    flex-direction: column;
    gap: .28rem;
    padding: .45rem .3rem;
    border-right: 1px solid #e6ebf2;
    background: #f7f9fc;
    color: #5b6d85;
    font-size: .45rem;
    white-space: nowrap;
}
.value-editor-sidebar strong { margin-bottom: .15rem; color: #263c5d; font-size: .48rem; }
.value-editor-sidebar span { padding: .22rem .25rem; border-radius: .25rem; }
.value-editor-sidebar .is-selected { background: #e4f0ff; color: #167edd; font-weight: 800; }
.value-editor-canvas { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #fff; }
.value-editor-canvas > .progressive-image,
.value-editor-phone-screen > .progressive-image { height: 100%; }
.value-editor-canvas img,
.value-editor-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.value-editor-canvas::after {
    content: "";
    position: absolute;
    inset: 10% 5% 40%;
    border: 1px solid #2b91f1;
    box-shadow: 0 0 0 2px rgba(43,145,241,.12);
    pointer-events: none;
}
.value-editor-selection { position: absolute; z-index: 1; top: 7%; right: 5%; padding: .12rem .25rem; border-radius: .2rem; background: #258af1; color: #fff; font-size: .42rem; font-weight: 750; }
.value-editor-phone {
    position: absolute;
    right: clamp(.3rem, 4vw, 2.1rem);
    bottom: 0;
    width: 3.85rem;
    height: 7.65rem;
    overflow: hidden;
    border: .3rem solid #273653;
    border-radius: .85rem .85rem .3rem .3rem;
    background: #fff;
    box-shadow: 0 8px 15px rgba(28,44,81,.2);
    transform: rotate(5deg);
}
.value-editor-phone-screen { position: absolute; inset: 0; overflow: hidden; border-radius: .5rem .5rem .1rem .1rem; }
.value-editor-phone-island { position: absolute; z-index: 2; top: .15rem; left: 50%; width: .9rem; height: .2rem; border-radius: 999px; background: #273653; transform: translateX(-50%); }
.value-chat-scene { padding: 1rem 1.25rem; background: radial-gradient(circle at 15% 0, #d1f4ef, transparent 48%), linear-gradient(135deg, #e9f6ff, #efeaff); }
.value-chat-window { width: 100%; max-width: 22rem; overflow: hidden; border: 1px solid #dce6f3; border-radius: .8rem; background: #fff; box-shadow: 0 10px 26px rgba(35,75,137,.17); transform: rotate(1deg); }
.value-chat-head { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; border-bottom: 1px solid #edf0f6; }
.value-chat-avatar { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: .65rem; background: #e6f3ff; color: #2584dc; }
.value-chat-head b, .value-chat-head small { display: block; }
.value-chat-head b { color: #213657; font-size: .72rem; }
.value-chat-head small { margin-top: .1rem; color: #7788a0; font-size: .55rem; }
.value-chat-messages { display: flex; flex-direction: column; gap: .45rem; padding: .65rem .75rem; background: #f8faff; }
.value-chat-message { align-self: flex-start; max-width: 85%; padding: .45rem .6rem; border-radius: .6rem .6rem .6rem .15rem; background: #e9eff8; color: #324768; font-size: .62rem; line-height: 1.45; }
.value-chat-message--reply { align-self: flex-end; border-radius: .6rem .6rem .15rem .6rem; background: #e0f5ee; color: #236b58; }
.value-chat-compose { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .75rem; color: #8391a7; font-size: .58rem; }
.value-chat-send { display: grid; place-items: center; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #2584dc; color: #fff; }
.value-report-scene { padding: 1rem 1.25rem; }
.value-report-window { height: 10.1rem; padding: .8rem .9rem; border-radius: .8rem; transform: rotate(-1deg); }
.value-report-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #1f3154; font-size: .7rem; }
.value-report-head small { color: #6b7e99; font-size: .54rem; white-space: nowrap; }
.value-report-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .7rem; }
.value-report-metrics > span { min-width: 0; padding: .4rem; border: 1px solid #e7ecf4; border-radius: .4rem; }
.value-report-metrics small,
.value-report-metrics b { display: block; }
.value-report-metrics small { color: #7c8da4; font-size: .52rem; }
.value-report-metrics b { margin-top: .12rem; color: #203455; font-size: .7rem; }
.value-report-bars { display: flex; align-items: flex-end; gap: .5rem; height: 3.5rem; margin-top: .45rem; padding: 0 .4rem; border-bottom: 1px solid #e4eaf4; }
.value-report-bars span { flex: 1; max-width: 1.5rem; border-radius: .2rem .2rem 0 0; background: linear-gradient(180deg,#2dbdb7,#1788e8); }
.value-report-bars span:nth-child(1) { height: 36%; }
.value-report-bars span:nth-child(2) { height: 49%; }
.value-report-bars span:nth-child(3) { height: 43%; }
.value-report-bars span:nth-child(4) { height: 67%; }
.value-report-bars span:nth-child(5) { height: 61%; }
.value-report-bars span:nth-child(6) { height: 77%; }
.value-report-bars span:nth-child(7) { height: 92%; }
@media (max-width: 800px) {
    #value { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .value-feature-scene { padding-right: .8rem; padding-left: .8rem; }
    .value-dispatch-choices b { font-size: .54rem; }
}
.value-visual {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .82fr) auto minmax(0, 1.18fr);
    align-items: stretch;
    gap: 1rem;
    margin: 1rem 0 1.4rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 2rem;
    background:
            radial-gradient(circle at 80% 25%, rgba(21,125,250,.16), transparent 16rem),
            radial-gradient(circle at 25% 82%, rgba(115,87,239,.11), transparent 15rem),
            rgba(255,255,255,.38);
    box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(57,75,126,.1);
}
.value-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 1.45rem;
    background: rgba(255,255,255,.46);
    box-shadow: inset 0 1px 0 #fff;
}
.value-panel-title { margin: 0 0 .8rem; color: #65758f; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scattered-board { position: relative; min-height: 286px; overflow: hidden; border-radius: 1rem; background: linear-gradient(145deg, rgba(236,240,248,.9), rgba(249,251,255,.82)); }
.scattered-board::before,
.scattered-board::after { content: ""; position: absolute; height: 1px; background: repeating-linear-gradient(90deg, rgba(113,130,168,.25) 0 6px, transparent 6px 11px); transform-origin: left center; }
.scattered-board::before { width: 74%; left: 12%; top: 43%; transform: rotate(23deg); }
.scattered-board::after { width: 68%; left: 18%; top: 67%; transform: rotate(-27deg); }
.service-window {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 112px;
    padding: .7rem .8rem;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: .9rem;
    background: rgba(255,255,255,.86);
    box-shadow: 0 12px 28px rgba(57,75,126,.12);
    color: #34435d;
    font-size: .74rem;
    font-weight: 750;
}
.service-window i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; background: #eef3fb; font-style: normal; font-size: .9rem; }
.service-window.web { left: 7%; top: 8%; transform: rotate(-3deg); }
.service-window.app { right: 5%; top: 20%; transform: rotate(3deg); }
.service-window.sheet { left: 16%; top: 43%; transform: rotate(2deg); }
.service-window.chat { right: 8%; bottom: 21%; transform: rotate(-2deg); }
.service-window.delivery { left: 9%; bottom: 6%; transform: rotate(3deg); }
.scattered-warning { position: absolute; right: .75rem; bottom: .7rem; z-index: 2; padding: .38rem .55rem; border-radius: 999px; background: #fff1f1; color: #bf4a57; font-size: .62rem; font-weight: 800; }

.value-transition { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; color: #157dfa; text-align: center; }
.transition-arrow { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 14px 30px rgba(21,125,250,.16); }
.transition-arrow::before { content: "→"; font-size: 1.45rem; font-weight: 900; }
.value-transition small { max-width: 7rem; color: #677791; font-size: .65rem; font-weight: 750; line-height: 1.35; }

.unified-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "website chats orders" "clients hub delivery" "editor . analytics";
    align-items: center;
    gap: .65rem .5rem;
    min-height: 320px;
    padding: 1rem .75rem 3rem;
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(241,247,255,.92), rgba(248,246,255,.85));
}
.unified-glow { position: relative; z-index: 0; grid-area: hub; align-self: stretch; pointer-events: none; }
.unified-glow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, rgba(21,125,250,.4), rgba(21,125,250,.18) 38%, transparent 70%); opacity: .7; transform: translate(-50%, -50%); animation: unified-glow-pulse 3.4s ease-in-out infinite; }
@keyframes unified-glow-pulse {
    0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.82); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .unified-glow::before { animation: none; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .unified-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "chats chats" "website orders" "clients delivery" "hub hub" "editor analytics"; }
    .hub-node.chats { justify-self: center; }
}
.unified-map::before,
.unified-map::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, rgba(21,125,250,.25), transparent); transform-origin: center; }
.unified-map::before { width: 78%; height: 1px; transform: translate(-50%, -50%) rotate(25deg); }
.unified-map::after { width: 78%; height: 1px; transform: translate(-50%, -50%) rotate(-25deg); }
.system-hub {
    position: relative;
    grid-area: hub;
    justify-self: center;
    z-index: 3;
    width: 112px;
    max-width: 100%;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .8rem;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 2rem;
    background: rgba(255,255,255,.8);
    box-shadow: 0 22px 45px rgba(21,125,250,.2), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px);
}
.system-hub img { width: 2.45rem; height: 2.35rem; }
.system-hub .brand-word { font-size: 1.15rem; }
.system-hub small { color: #6d7b91; font-size: .58rem; text-align: center; }
.hub-node {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    padding: .58rem .68rem;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: .82rem;
    background: rgba(255,255,255,.85);
    box-shadow: 0 10px 24px rgba(57,75,126,.1);
    color: #34435d;
    font-size: .68rem;
    font-weight: 750;
}
.hub-node.chats { grid-area: chats; }
.hub-node i { display: grid; flex: 0 0 1.55rem; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: .5rem; background: rgba(21,125,250,.1); color: #157dfa; font-style: normal; }
.hub-node.website { grid-area: website; }
.hub-node.orders { grid-area: orders; }
.hub-node.clients { grid-area: clients; }
.hub-node.delivery { grid-area: delivery; }
.hub-node.editor { grid-area: editor; }
.hub-node.analytics { grid-area: analytics; }
.unified-status { position: absolute; z-index: 4; left: 50%; bottom: .55rem; transform: translateX(-50%); padding: .36rem .6rem; border-radius: 999px; background: #e9f8ef; color: #218451; font-size: .6rem; font-weight: 850; white-space: nowrap; }

#capabilities,
#audience,
#roles,
#benefits,
#plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
#capabilities > h2, #capabilities > p,
#audience > h2, #audience > p,
#roles > h2, #roles > p,
#benefits > h2, #benefits > p,
#plans > h2, #plans > p { grid-column: 1 / -1; }
#capabilities > article,
#audience > article,
#roles > article,
#benefits > article,
#plans > article { margin: 0; padding: 1.55rem; }
#audience > article { overflow: hidden; }
.audience-photo { display: block; aspect-ratio: 3 / 2; margin: -1.55rem -1.55rem 1.25rem; overflow: hidden; background: #f2f5fa; }
.audience-photo > .progressive-image { height: 100%; }
.audience-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#roles > article { display: flex; flex-direction: column; overflow: hidden; }
.role-photo { margin: -1.55rem -1.55rem 1.25rem; }
.role-photo img { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; object-fit: cover; }
.role-photo.admin img { object-position: center 42%; }
.role-photo.picker img { object-position: center 45%; }
.role-photo.marketer img { object-position: center 42%; }
.role-photo.courier img { object-position: center 43%; }
#capabilities > figure,
#audience > figure { grid-column: 1 / -1; }
.audience-templates-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.audience-template {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 #fff, 0 16px 40px rgba(57,75,126,.08);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.audience-template[data-pattern-start] { color: inherit; font: inherit; text-align: left; cursor: pointer; }
.audience-template:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 20px 42px rgba(57,75,126,.14); }
.audience-template:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.audience-template-preview {
    position: relative;
    isolation: isolate;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: radial-gradient(circle at 50% 22%, rgba(255,255,255,.85), transparent 48%), linear-gradient(145deg, #e0e9f5, #f2e6e0);
}
.audience-template-preview::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 14%;
    bottom: 0;
    left: 14%;
    height: 11%;
    border-radius: 50%;
    background: rgba(28,39,57,.26);
    filter: blur(14px);
}
.audience-template[data-template-key="pet"] .audience-template-preview { background: radial-gradient(circle at 54% 21%, rgba(255,255,255,.9), transparent 46%), linear-gradient(145deg, #d4eee3, #e9f0d8); }
.audience-template[data-template-key="producty"] .audience-template-preview { background: radial-gradient(circle at 46% 20%, rgba(255,255,255,.9), transparent 46%), linear-gradient(145deg, #d6f3ed, #faefd5); }
.audience-template[data-template-key="resturant"] .audience-template-preview { background: radial-gradient(circle at 76% 10%, rgba(255,235,196,.86), transparent 43%), linear-gradient(145deg, #ffba67, #f27b34 65%, #ba4828); }
.audience-template[data-template-key="aggregator"] .audience-template-preview { background: radial-gradient(circle at 24% 18%, rgba(255,255,255,.9), transparent 45%), linear-gradient(145deg, #f7d6c3, #d5f1eb); }
.audience-template-phone {
    position: absolute;
    z-index: 1;
    bottom: 3%;
    left: 50%;
    display: block;
    width: 58%;
    max-width: 180px;
    aspect-ratio: .478;
    overflow: hidden;
    border: 5px solid #111419;
    border-radius: 12% / 5.8%;
    background: #111419;
    box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 22px 30px rgba(24,29,42,.35), inset 0 0 0 1px rgba(255,255,255,.13);
    transform: translateX(-50%) rotate(-7deg);
    transform-origin: 50% 80%;
}
.audience-template[data-template-key="pet"] .audience-template-phone { transform: translateX(-50%) rotate(6deg); }
.audience-template[data-template-key="producty"] .audience-template-phone { transform: translateX(-50%) rotate(-5deg); }
.audience-template[data-template-key="resturant"] .audience-template-phone { transform: translateX(-50%) rotate(7deg); }
.audience-template[data-template-key="aggregator"] .audience-template-phone { transform: translateX(-50%) rotate(-3deg); }
.audience-template-screen {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: 9% / 4.2%;
    background: #f7f7f5;
}
.audience-template-screen > .progressive-image { height: 100%; }
.audience-template-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.audience-template-island {
    position: absolute;
    z-index: 3;
    top: 1.2%;
    left: 50%;
    width: 27%;
    height: 2.7%;
    min-height: 6px;
    border-radius: 999px;
    background: #0b0d10;
    box-shadow: 0 1px 2px rgba(0,0,0,.42);
    transform: translateX(-50%);
    pointer-events: none;
}
.audience-template-phone::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: 1.2%;
    left: 35%;
    width: 30%;
    height: 2px;
    border-radius: 999px;
    background: rgba(16,20,26,.8);
    pointer-events: none;
}.audience-template-content { display: flex; flex: 1; flex-direction: column; gap: .65rem; padding: 1.2rem; }
.audience-template-content strong { font-size: 1.15rem; line-height: 1.2; }
.audience-template-content > span:not(.audience-template-link) { color: var(--muted); line-height: 1.5; }
.audience-template-link { margin-top: auto; padding-top: .55rem; color: var(--blue); font-weight: 700; }
@media (max-width: 900px) { .audience-templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .audience-templates-grid { grid-template-columns: 1fr; } }
.section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.4rem;
}
#value > .section-actions,
#capabilities > .section-actions,
#audience > .section-actions,
#roles > .section-actions,
#benefits > .section-actions,
#plans > .section-actions { grid-column: 1 / -1; }
.section-actions .button { min-width: 10.5rem; }

/* Pricing */
#plans { display: block; }
#plans > p { max-width: 52rem; }
.pricing-periods {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 2rem auto 1.5rem;
    padding: .3rem;
    overflow-x: auto;
    border: 1px solid rgba(119,143,192,.18);
    border-radius: 1rem;
    background: rgba(255,255,255,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.pricing-period {
    min-width: 9.5rem;
    padding: .72rem 1rem;
    border: 0;
    border-radius: .72rem;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.pricing-period:hover { color: var(--ink); }
.pricing-period:active { transform: scale(.98); }
.pricing-period.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    box-shadow: 0 10px 24px rgba(53,109,243,.24);
}
.pricing-period span,
.pricing-period small { display: block; white-space: nowrap; }
.pricing-period small { margin-top: .2rem; color: inherit; font-size: .7rem; font-weight: 700; opacity: .82; }
.pricing-period-select { display: none; margin: 1.4rem 0; }
.pricing-period-select > span { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.pricing-period-select select {
    width: 100%;
    min-height: 3.1rem;
    padding: 0 2.7rem 0 1rem;
    border: 1px solid rgba(119,143,192,.25);
    border-radius: .9rem;
    color: var(--ink);
    background: rgba(255,255,255,.85);
    font: inherit;
    font-weight: 750;
}
.pricing-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(18rem, 20.5rem);
    align-items: start;
    gap: .5rem;
    margin: 0 -1rem;
    padding: 1.3rem 1rem 1.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}
.pricing-grid::-webkit-scrollbar { display: none; }
.pricing-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.pricing-card {
    position: relative;
    min-width: 0;
    max-height: 52rem;
    margin: 0;
    padding: 0 0 4.25rem;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid rgba(119,143,192,.2);
    border-radius: 1.35rem;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 44px rgba(57,75,126,.1), inset 0 1px 0 rgba(255,255,255,.95);
    transition: max-height .55s cubic-bezier(.22,.75,.22,1), border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(57,75,126,.15), inset 0 1px 0 rgba(255,255,255,.95); }
.pricing-card.is-most-value { border-color: rgba(53,109,243,.55); box-shadow: 0 24px 58px rgba(53,109,243,.18), inset 0 1px 0 rgba(255,255,255,.95); }
.pricing-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53,109,243,.14), 0 24px 58px rgba(53,109,243,.18); }
.pricing-card.is-expanded { max-height: 220rem; }
.pricing-card.has-no-overflow { padding-bottom: 0; }
.pricing-card__badge {
    height: 2.15rem;
    padding: .48rem 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
}
.pricing-card__badge.is-placeholder { visibility: hidden; }
.pricing-card__body { padding: 1.45rem; }
.pricing-card__head { min-height: 0; }
.pricing-card__head h3 { margin: 0; font-size: 1.7rem; }
.pricing-card__head p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.pricing-card__name,
.pricing-card__description-top,
.pricing-card__description-middle,
.pricing-card__description-bottom {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.pricing-card__name {
    height: 4.3rem;
    padding-bottom: .55rem;
    -webkit-line-clamp: 2;
}
.pricing-card__description-top {
    height: 4.65rem;
    padding-bottom: .6rem;
    -webkit-line-clamp: 3;
}
.pricing-card__description-middle {
    height: 4.65rem;
    padding-bottom: .6rem;
    -webkit-line-clamp: 3;
}
.pricing-card__head .pricing-card__lead { color: var(--ink); font-weight: 750; }
.pricing-price { min-height: 7.25rem; padding: 1.1rem 0 .9rem; border-top: 1px solid rgba(119,143,192,.16); }
.pricing-price > div { display: flex; align-items: flex-start; gap: .24rem; }
.pricing-price > div > span { margin-top: .35rem; color: var(--blue); font-size: 1.15rem; font-weight: 900; }
.pricing-price strong { color: var(--ink); font-size: 2.7rem; letter-spacing: -.055em; line-height: 1; }
.pricing-price small { align-self: center; margin-left: .25rem; color: var(--muted); font-size: .68rem; font-weight: 750; line-height: 1.25; }
.pricing-price p { margin: .6rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.pricing-price--request { display: flex; align-items: center; color: var(--ink); font-size: 1.45rem; font-weight: 850; }
.pricing-card__note { min-height: 0; margin: 0 0 1rem; color: var(--muted); font-size: .83rem; line-height: 1.5; }
.pricing-card__description-bottom { height: 4.75rem; padding-bottom: .8rem; -webkit-line-clamp: 3; }
.pricing-card__select { width: 100%; height: 3.25rem; margin-bottom: 1.4rem; overflow: hidden; text-align: center; }
.pricing-options { padding-top: 1rem; border-top: 1px solid rgba(119,143,192,.16); }
.pricing-options + .pricing-options { margin-top: 1rem; }
.pricing-options h4 { margin: 0 0 .8rem; font-size: .87rem; }
.pricing-options ul { margin: 0; padding: 0; list-style: none; }
.pricing-options li { display: grid; grid-template-columns: 1.15rem 1fr; gap: .5rem; margin: .7rem 0; color: #44526c; font-size: .82rem; line-height: 1.42; }
.pricing-options li > span { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-top: .08rem; border-radius: 50%; color: #fff; background: #2ca56b; font-size: .67rem; font-weight: 900; }
.pricing-option { display: grid; grid-template-columns: 2.35rem 1fr; align-items: center; gap: .65rem; margin: .8rem 0; color: #44526c; font-size: .82rem; line-height: 1.42; cursor: pointer; }
.pricing-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pricing-option__switch { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: #cdd6e5; box-shadow: inset 0 1px 3px rgba(20,33,61,.14); transition: background-color .2s ease; }
.pricing-option__switch::after { content: ""; position: absolute; top: .17rem; left: .18rem; width: .91rem; height: .91rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(20,33,61,.22); transition: transform .2s ease; }
.pricing-option input:checked + .pricing-option__switch { background: var(--blue); }
.pricing-option input:checked + .pricing-option__switch::after { transform: translateX(1rem); }
.pricing-option input:focus-visible + .pricing-option__switch { outline: 3px solid rgba(53,109,243,.25); outline-offset: 2px; }
.pricing-card__expand {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 4.25rem;
    border: 0;
    color: var(--blue);
    background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.97) 36%);
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
}
.pricing-card__expand span:last-child { font-size: 1.15rem; transition: transform .25s ease; }
.pricing-card__expand[hidden] { display: none; }
.pricing-card.is-expanded .pricing-card__expand span:last-child { transform: rotate(180deg); }
.pricing-empty { margin-top: 1.5rem; padding: 1.5rem; border-radius: 1rem; background: rgba(255,255,255,.65); }
.selected-tariff-summary {
    margin: 0 0 .8rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(53,109,243,.18);
    border-radius: .8rem;
    color: #2652b9;
    background: rgba(53,109,243,.07);
    font-size: .83rem;
    font-weight: 800;
    line-height: 1em;
}

#capabilities { position: relative; overflow: hidden; }
#capabilities::before { content: ""; position: absolute; z-index: -1; width: 24rem; height: 24rem; right: -10rem; top: 7rem; border-radius: 50%; background: rgba(21,125,250,.12); filter: blur(24px); }
#capabilities > article { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.capability-visual {
    position: relative;
    height: 220px;
    margin: -.55rem -.55rem 1.3rem;
    overflow: hidden;
    border: 1px solid rgba(119,143,192,.16);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgba(237,245,255,.96), rgba(255,255,255,.74));
    box-shadow: inset 0 1px 0 #fff;
}
.cap-web-window { position: absolute; left: 1rem; top: 1.05rem; width: 78%; height: 174px; padding: .48rem; border-radius: .85rem; background: #0e2f50; box-shadow: 0 18px 35px rgba(14,47,80,.2); }
.cap-web-screen { height: 100%; padding: .55rem; border-radius: .52rem; background: #fff; }
.cap-web-nav { display: flex; align-items: center; gap: .35rem; height: 1rem; margin-bottom: .55rem; }
.cap-web-nav::before { content: "онстор"; color: #0e2f50; font-size: .44rem; font-weight: 900; }
.cap-web-nav::after { content: "Каталог   Акции   Корзина"; margin-left: auto; color: #8795aa; font-size: .3rem; }
.cap-web-hero { height: 38px; border-radius: .42rem; background: linear-gradient(125deg, rgba(21,125,250,.24), rgba(115,87,239,.18)); }
.cap-product-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .32rem; margin-top: .4rem; }
.cap-product-row i { height: 50px; border-radius: .38rem; background: linear-gradient(#eef2f7 72%, #d8e0ec 72% 78%, #157dfa 78% 84%, #fff 84%); }
.cap-mobile { position: absolute; right: .8rem; bottom: .7rem; width: 62px; height: 126px; padding: 5px; border: 2px solid #0e2f50; border-radius: .95rem; background: #fff; box-shadow: 0 15px 30px rgba(14,47,80,.22); }
.cap-mobile::before { content: ""; display: block; width: 20px; height: 3px; margin: -1px auto 5px; border-radius: 999px; background: #0e2f50; }
.cap-mobile-hero { height: 31px; border-radius: .38rem; background: linear-gradient(145deg, #c8dfff, #e8e1ff); }
.cap-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 4px; }
.cap-mobile-grid i { height: 28px; border-radius: 3px; background: #eef2f7; }

.cap-orders { display: grid; grid-template-columns: 1.2fr .8fr; gap: .65rem; padding: .85rem; }
.cap-orders-list, .cap-client-card { padding: .7rem; border-radius: .85rem; background: rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(57,75,126,.1); }
.cap-ui-title { display: flex; justify-content: space-between; margin-bottom: .5rem; color: #0e2f50; font-size: .62rem; font-weight: 900; }
.cap-ui-title::after { content: "+ Добавить"; color: #157dfa; font-size: .44rem; }
.cap-order-row { display: grid; grid-template-columns: 1fr .75fr .55fr; gap: .3rem; align-items: center; margin-top: .32rem; padding: .4rem; border-radius: .48rem; background: #f4f7fb; color: #65758d; font-size: .43rem; }
.cap-order-row b { color: #0e2f50; }
.cap-status { padding: .18rem .25rem; border-radius: 999px; background: #e9f8ef; color: #248653; text-align: center; font-size: .36rem; }
.cap-client-avatar { width: 2.6rem; height: 2.6rem; margin: .25rem auto .55rem; border-radius: 50%; background: linear-gradient(145deg, #c7dcff, #ddd4ff); }
.cap-client-line { height: 6px; margin: .36rem auto; border-radius: 999px; background: #dce4ef; }
.cap-client-line.short { width: 62%; }
.cap-client-metric { margin-top: .65rem; padding: .55rem; border-radius: .55rem; background: rgba(21,125,250,.08); color: #157dfa; font-size: .48rem; font-weight: 850; text-align: center; }

.cap-delivery { background: linear-gradient(145deg, #f4fbff, #eef4ff); }
.map-lines { position: absolute; inset: 0; opacity: .52; background: repeating-linear-gradient(25deg, transparent 0 24px, rgba(116,151,191,.14) 24px 26px), repeating-linear-gradient(115deg, transparent 0 31px, rgba(116,151,191,.12) 31px 33px); }
.delivery-route { position: absolute; left: 14%; top: 48%; width: 68%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #157dfa, #7357ef); transform: rotate(-13deg); box-shadow: 0 0 0 4px rgba(21,125,250,.08); }
.delivery-route::before, .delivery-route::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); border: 4px solid #fff; border-radius: 50%; background: #157dfa; box-shadow: 0 6px 14px rgba(21,125,250,.24); }
.delivery-route::before { left: -7px; }
.delivery-route::after { right: -7px; background: #7357ef; }
.delivery-card { position: absolute; left: 1rem; top: 1rem; padding: .65rem .75rem; border-radius: .8rem; background: rgba(255,255,255,.9); box-shadow: 0 12px 26px rgba(57,75,126,.1); color: #0e2f50; font-size: .58rem; font-weight: 850; }
.delivery-card small { display: block; margin-top: .25rem; color: #76849a; font-size: .44rem; }
.courier-pin { position: absolute; right: 15%; top: 35%; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #fff; border-radius: 1rem 1rem 1rem .25rem; background: #157dfa; color: #fff; box-shadow: 0 14px 26px rgba(21,125,250,.25); transform: rotate(45deg); }
.courier-pin span { transform: rotate(-45deg); font-size: 1.25rem; }
.delivery-progress { position: absolute; left: 1rem; right: 1rem; bottom: .8rem; display: flex; justify-content: space-between; padding: .55rem .65rem; border-radius: .75rem; background: rgba(255,255,255,.9); color: #5f6f86; font-size: .44rem; }
.delivery-progress b { color: #248653; }

.cap-marketing { padding: 1rem; }
.campaign-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .35rem; margin-top: 1rem; }
.campaign-node { min-height: 72px; display: grid; place-items: center; padding: .5rem; border-radius: .75rem; background: rgba(255,255,255,.9); box-shadow: 0 10px 22px rgba(57,75,126,.09); color: #0e2f50; font-size: .5rem; font-weight: 800; text-align: center; }
.campaign-arrow { color: #157dfa; font-weight: 900; }
.segment-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .8rem; }
.segment-chip { padding: .6rem .45rem; border-radius: .65rem; background: rgba(21,125,250,.08); color: #157dfa; font-size: .46rem; font-weight: 800; text-align: center; }
.promo-badge { position: absolute; right: .75rem; top: .65rem; padding: .45rem .6rem; border-radius: .7rem; background: #7357ef; color: #fff; font-size: .5rem; font-weight: 850; transform: rotate(3deg); }

.cap-analytics { padding: .85rem; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.metric-card { padding: .55rem; border-radius: .65rem; background: rgba(255,255,255,.9); box-shadow: 0 8px 18px rgba(57,75,126,.08); color: #6d7b90; font-size: .4rem; }
.metric-card b { display: block; margin-top: .25rem; color: #0e2f50; font-size: .75rem; }
.metric-card em { color: #248653; font-size: .38rem; font-style: normal; }
.chart-panel { position: relative; height: 104px; margin-top: .55rem; padding: .7rem; border-radius: .75rem; background: rgba(255,255,255,.9); }
.chart-grid { position: absolute; inset: .7rem; background: repeating-linear-gradient(0deg, rgba(111,130,170,.11) 0 1px, transparent 1px 22px); }
.chart-bars { position: absolute; inset: 1rem 1rem .8rem; display: flex; align-items: flex-end; gap: .45rem; }
.chart-bars i { flex: 1; border-radius: .3rem .3rem .08rem .08rem; background: linear-gradient(#157dfa, #7aaeff); }
.chart-bars i:nth-child(1) { height: 38%; } .chart-bars i:nth-child(2) { height: 55%; } .chart-bars i:nth-child(3) { height: 44%; } .chart-bars i:nth-child(4) { height: 72%; } .chart-bars i:nth-child(5) { height: 64%; } .chart-bars i:nth-child(6) { height: 88%; }

/* Компактные модульные эмблемы вместо крупных скриншотов интерфейса. */
.module-visual {
    --module-color: #157dfa;
    position: relative;
    width: 100%;
    height: 154px;
    margin: 0 0 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(119,143,192,.18);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(230,240,255,.66));
    box-shadow: inset 0 1px 0 #fff, 0 16px 32px rgba(57,75,126,.08);
}
.module-background {
    position: absolute;
    z-index: 0;
    inset: -12px;
    display: block;
    pointer-events: none;
    filter: blur(1px);
    opacity: 1;
}
.module-background > .progressive-image { height: 100%; }
.module-background img { display: block; width: 100%; height: 100%; object-fit: cover; }
.module-background::after { content: ""; position: absolute; inset: 0; background: rgba(245,249,255,.34); }
.module-visual::before, .module-visual::after { z-index: 1; pointer-events: none; }
.module-visual::before {
    content: "";
    position: absolute;
    width: 132px;
    height: 132px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: var(--module-color);
    opacity: .1;
    filter: blur(20px);
    transform: translate(-50%, -50%);
}
.module-visual::after {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px dashed rgba(119,143,192,.2);
    border-radius: .9rem;
}
.module-icon {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    min-width: 78px;
    height: 78px;
    padding-inline: .85rem;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 1rem;
    background: rgba(255,255,255,.82);
    color: var(--module-color);
    box-shadow: 0 14px 30px rgba(57,75,126,.14), inset 0 1px 0 #fff;
    transform: translate(-50%, -50%);
}
.module-glyph {
    width: 50px;
    height: 50px;
    background: var(--module-color);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.module-tag {
    position: absolute;
    z-index: 3;
    padding: .38rem .55rem;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: #4e6078;
    box-shadow: 0 8px 20px rgba(57,75,126,.1);
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}
.module-tag.primary { left: .72rem; bottom: .72rem; color: var(--module-color); }
.module-tag.secondary { right: .72rem; top: .72rem; }
.module-store { --module-color: #157dfa; }
.module-orders { --module-color: #7357ef; }
.module-delivery { --module-color: #14a578; }
.module-payments { --module-color: #ef7a32; }
.module-marketing { --module-color: #d94d91; }
.module-analytics { --module-color: #1689a8; }
.module-api { --module-color: #0e2f50; }
.module-ai { --module-color: #6b5ce7; }
.capability-link { margin-top: auto; padding-top: 1rem; line-height: 1em}
.capability-link a { width: 100%; justify-content: center; text-align: center; }
#delivery figure img { aspect-ratio: 16 / 9; }
#audience .section-image img { aspect-ratio: 16 / 7; }
#how-it-works ol { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; padding: 0; list-style: none; counter-reset: steps; }
#how-it-works li { counter-increment: steps; padding: 1.35rem; border: 1px solid var(--line); border-radius: 1.35rem; background: rgba(255,255,255,.42); }
#how-it-works li::before { content: "0" counter(steps); display: block; margin-bottom: 1.25rem; color: var(--blue); font-weight: 800; }
#case { display: none; }

.contact-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    gap: 2rem;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,.67), rgba(229,239,255,.48));
}
.contact-cta h2 { max-width: 14ch; }
.contact-cta .cta-image { margin: 0; padding: .65rem; transform: rotate(1.5deg); }
.contact-cta .cta-image img { aspect-ratio: 4 / 3; }
.cta-actions, .channel-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.channel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .82rem 1.1rem;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 1rem;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(57,75,126,.1);
}
.channel-button.telegram { background: linear-gradient(135deg, rgba(220,243,255,.9), rgba(255,255,255,.65)); }
.channel-button.whatsapp { background: linear-gradient(135deg, rgba(218,250,232,.9), rgba(255,255,255,.65)); }
.modal-divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 .2rem; color: var(--muted); font-size: .86rem; }
.modal-divider::before, .modal-divider::after { content: ""; flex: 1; height: 1px; background: rgba(112,130,174,.2); }

form { display: grid; gap: .8rem; }
form p { margin: 0; }
input:not([type="checkbox"]), textarea {
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid rgba(137,154,197,.28);
    border-radius: .95rem;
    background: rgba(255,255,255,.64);
    color: var(--ink);
    font: inherit;
    outline: none;
}
input:focus, textarea:focus { border-color: rgba(53,109,243,.55); box-shadow: 0 0 0 4px rgba(53,109,243,.09); }

.phone-form-field { display: grid; gap: .35rem; }
.phone-control {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(133,151,188,.32);
    border-radius: .95rem;
    background: rgba(255,255,255,.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 14px rgba(57,75,126,.06);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.phone-control:focus-within {
    border-color: rgba(53,109,243,.55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(53,109,243,.09);
}
.phone-country-trigger {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: .35rem;
    min-width: 4rem;
    padding: .55rem .65rem;
    border: 0;
    border-right: 1px solid rgba(133,151,188,.2);
    border-radius: .9rem 0 0 .9rem;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.phone-country-trigger:hover { background: rgba(53,109,243,.06); }
.phone-country-trigger:focus-visible { outline: 2px solid rgba(53,109,243,.42); outline-offset: -2px; }
.phone-country-trigger img,
.country-option img {
    width: 1.8rem;
    height: 1.25rem;
    flex: 0 0 auto;
    border-radius: .22rem;
    object-fit: cover;
    box-shadow: 0 2px 7px rgba(20,33,61,.14);
}
.phone-country-fallback,
.country-option-fallback { min-width: 1.8rem; color: var(--muted); font-size: .75rem; font-weight: 800; text-align: center; }
.phone-country-caret { color: var(--muted); font-size: .9rem; line-height: 1; }
.phone-prefix { padding-left: .7rem; color: var(--ink); font-weight: 720; white-space: nowrap; }
.phone-control .phone-number-input,
.auth-fields .phone-control .phone-number-input {
    width: 100%;
    min-width: 0;
    padding-left: .35rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.phone-control .phone-number-input:focus,
.auth-fields .phone-control .phone-number-input:focus { border-color: transparent; box-shadow: none; }
.phone-form-field:has(.phone-number-input.is-invalid) .phone-control { border-color: rgba(190,81,81,.58); }
.phone-form-field:has(.phone-number-input.is-valid) .phone-control { border-color: rgba(77,131,90,.42); }

dialog {
    width: min(560px, calc(100% - 2rem));
    padding: 0;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 2rem;
    color: var(--ink);
    background: rgba(246,249,255,.82);
    box-shadow: 0 40px 120px rgba(31,46,89,.3), inset 0 1px 0 #fff;
    backdrop-filter: blur(30px) saturate(145%);
}
dialog::backdrop { background: rgba(62,75,112,.26); backdrop-filter: blur(12px); }
dialog[open] { animation: modal-enter .36s cubic-bezier(.2,.78,.24,1) both; }
dialog[open]::backdrop { animation: backdrop-enter .36s ease both; }
dialog.is-closing { animation: modal-exit .28s ease both; }
dialog.is-closing::backdrop { animation: backdrop-exit .28s ease both; }
@keyframes modal-enter {
    from { opacity: 0; transform: translateY(1.25rem) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modal-exit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(.85rem) scale(.98); }
}
@keyframes backdrop-enter {
    from { background: rgba(62,75,112,0); backdrop-filter: blur(0); }
    to { background: rgba(62,75,112,.26); backdrop-filter: blur(12px); }
}
@keyframes backdrop-exit {
    from { background: rgba(62,75,112,.26); backdrop-filter: blur(12px); }
    to { background: rgba(62,75,112,0); backdrop-filter: blur(0); }
}
.modal-inner { padding: clamp(1.5rem, 5vw, 2.5rem); }
.modal-head { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; }
.modal-head h2 { margin: 0 auto .8rem 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.modal-close { min-width: 2.7rem; min-height: 2.7rem; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.55); color: var(--ink); font-size: 1.35rem; cursor: pointer; }
.modal-copy { color: var(--muted); font-size: .76rem; line-height: 1rem}
.mobile-menu-dialog { width: min(520px, calc(100% - 1rem)); }
.mobile-menu-dialog .modal-inner { padding: 1.25rem; }
.mobile-menu-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.7rem; }
.mobile-menu-title img { width: 2rem; height: 2rem; }
.mobile-menu-links { display: grid; gap: .55rem; margin-top: 1.25rem; }
.mobile-menu-links a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 1rem;
    background: rgba(255,255,255,.5);
    color: var(--ink);
    font-weight: 720;
    text-decoration: none;
    box-shadow: inset 0 1px 0 #fff;
}
.mobile-menu-links a::after { content: "→"; margin-left: auto; color: var(--blue); }
.mobile-menu-links a[aria-current="page"] { background: rgba(227,237,255,.9); color: var(--blue); }
.country-picker-dialog {
    width: min(620px, calc(100% - 1rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}
.country-picker-dialog[open] { display: block; }
.country-picker-dialog .modal-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}
.country-picker-dialog .modal-head { flex: 0 0 auto; margin-bottom: 1rem; }
.country-search { display: grid; flex: 0 0 auto; gap: .4rem; color: var(--ink); font-size: .9rem; font-weight: 680; }
.country-search input { width: 100%; }
.country-list {
    display: grid;
    min-height: 0;
    margin-top: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.country-option {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem .8rem;
    border: 0;
    border-bottom: 1px solid rgba(133,151,188,.16);
    border-radius: .75rem;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.country-option:hover,
.country-option[aria-selected="true"] { background: rgba(53,109,243,.08); }
.country-option[hidden] { display: none; }
.country-option:focus-visible { outline: 2px solid rgba(53,109,243,.42); outline-offset: -2px; }
.country-option-name { min-width: 0; overflow-wrap: anywhere; }
.country-option-code { color: var(--muted); font-weight: 720; }
.country-empty { margin: 1rem 0 0; color: var(--muted); text-align: center; }
.auth-dialog { width: min(480px, calc(100% - 1rem)); }
.auth-dialog .modal-head { margin-bottom: 1rem; }
.auth-dialog .modal-head h2 { margin-bottom: 0; }
.cookie-dialog {
    position: fixed;
    inset: auto clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem) auto;
    width: min(430px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: 0;
    overflow: auto;
    z-index: 1000;
    border-radius: 1.4rem;
    box-shadow: 0 20px 55px rgba(31,46,89,.22), inset 0 1px 0 #fff;
}
.cookie-dialog::backdrop { display: none; background: transparent; backdrop-filter: none; }
.cookie-dialog .modal-inner { padding: 1rem 1.1rem; }
.cookie-dialog .modal-head { align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.cookie-dialog .modal-head h2 { margin-bottom: 0; font-size: 1.25rem; line-height: 1.2; }
.cookie-dialog .eyebrow { margin-bottom: .25rem; font-size: .68rem; }
.cookie-dialog .modal-close { min-width: 2.15rem; min-height: 2.15rem; font-size: 1rem; }
.cookie-copy { margin: 0 0 .85rem; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.cookie-copy a { color: var(--blue); font-weight: 700; }
.cookie-actions { display: flex; justify-content: flex-end; }
.cookie-actions .button { min-width: 8.5rem; padding: .7rem 1rem; font-size: .86rem; }
#register {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}
#register .modal-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}
#register .registration-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
#register .register-view { min-height: 0; }
#register .register-view[data-register-view="form"]:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
#register[data-register-state="success"] .modal-close { visibility: hidden; pointer-events: none; }
#register .auth-fields {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.registration-form .form-field { display: grid; gap: .35rem; }
.registration-form .form-field label { color: var(--ink); font-size: .9rem; font-weight: 680; }
.registration-form .field-error {
    display: block;
    color: #a74f4f;
    font-size: .78rem;
    line-height: 1.35;
}
.registration-form .field-error:empty { display: none; }
.registration-form input.is-invalid { border-color: rgba(190,81,81,.58); box-shadow: 0 0 0 3px rgba(190,81,81,.08); }
.registration-form input.is-valid { border-color: rgba(77,131,90,.42); }
.registration-form .checkbox-field { gap: .45rem; }
.registration-form .checkbox-field label { font-weight: 500; }
.password-strength { display: grid; gap: .4rem; }
.password-strength[hidden] { display: none; }
.password-meter { height: .38rem; overflow: hidden; border-radius: 999px; background: rgba(151,163,190,.2); }
.password-meter span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .25s ease, background-color .25s ease; }
.password-strength-info { margin: 0; font-size: .78rem; line-height: 1.35; }
.registration-form button[type="submit"] {
    min-height: 3.55rem;
    margin-top: .55rem;
    padding-block: 1rem;
    font-size: 1.04rem;
}
.registration-form button[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: saturate(.55);
    box-shadow: none;
}
.auth-status {
    margin: .15rem 0;
    padding: .72rem .85rem;
    border: 1px solid rgba(190,81,81,.2);
    border-radius: .75rem;
    color: #964646;
    background: rgba(190,81,81,.07);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.45;
}
.auth-status[hidden] { display: none; }
.auth-status[data-status-type="success"] {
    border-color: rgba(44,165,107,.22);
    color: #26794f;
    background: rgba(44,165,107,.08);
}
.auth-form button.is-loading,
.registration-form button.is-loading,
#demo-form button.is-loading { cursor: wait; opacity: .72; }

#demo-form .demo-comment-field { display: grid; gap: .35rem; }
#demo-form .demo-comment-field label { color: var(--ink); font-size: .9rem; font-weight: 680; }
#demo-form textarea { min-height: 6.5rem; resize: vertical; }
#demo {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}
#demo .modal-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
}
#demo-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
#demo-form .auth-fields {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
#demo[data-demo-state="success"] {
    width: min(760px, calc(100% - 2rem));
    overflow: auto;
    background: linear-gradient(135deg, #f8fbff, #eaf0ff 68%, #f6f1ff);
}
#demo[data-demo-state="success"] .modal-inner { position: relative; max-height: none; padding: .85rem; }
#demo[data-demo-state="success"] .modal-head { position: absolute; z-index: 3; top: 1.3rem; right: 1.3rem; }
#demo[data-demo-state="success"] .modal-close { background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(29,50,94,.12); }
#demo[data-demo-state="success"] .modal-head > div,
#demo[data-demo-state="success"] .modal-copy,
#demo[data-demo-state="success"] #demo-form,
#demo[data-demo-state="success"] .modal-divider,
#demo[data-demo-state="success"] .channel-row { display: none; }
.demo-success[hidden] { display: none; }
.demo-success {
    display: grid;
    grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 20px 55px rgba(51,76,138,.12);
}
.demo-success__photo { min-height: 390px; overflow: hidden; background: #e7f0f2; }
.demo-success__photo > img,
.demo-success__photo .progressive-image,
.demo-success__photo .progressive-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.demo-success__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.6rem, 4vw, 2.6rem); }
.demo-success__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px; background: #ecf8f1; color: #19734b; font-size: .78rem; font-weight: 750; }
.demo-success__badge span { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #28a66d; color: #fff; font-size: .75rem; }
.demo-success h2 { max-width: 12ch; margin: 1.15rem 0 .85rem; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.04em; }
.demo-success h2:focus { outline: none; }
.demo-success p { max-width: 31ch; margin: 0; color: var(--muted); line-height: 1.6; }
.demo-success__button { margin-top: 1.7rem; min-width: 13rem; }
@media (max-width: 620px) {
    #demo[data-demo-state="success"] .modal-inner { padding: .6rem; }
    #demo[data-demo-state="success"] .modal-head { top: 1rem; right: 1rem; }
    .demo-success { grid-template-columns: 1fr; }
    .demo-success__photo { height: 190px; min-height: 0; }
    .demo-success__content { padding: 1.45rem; }
    .demo-success h2 { margin: .9rem 0 .65rem; font-size: 2rem; }
    .demo-success__button { width: 100%; margin-top: 1.25rem; }
}
.auth-success { padding: 1.5rem .5rem .5rem; text-align: center; }
.auth-success__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    color: #fff;
    background: #2ca56b;
    font-size: 2rem;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(44,165,107,.24);
}
.auth-success h3 { margin-bottom: .5rem; }
.auth-success p { color: var(--muted); }
.auth-spinner {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 1.25rem auto 0;
    border: .2rem solid rgba(53,109,243,.18);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: auth-spinner .75s linear infinite;
}
@keyframes auth-spinner { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
    .cookie-dialog {
        inset: auto .75rem .75rem .75rem;
        width: auto;
        max-height: calc(100dvh - 1.5rem);
    }
    .cookie-dialog .modal-head h2 { font-size: 1.2rem; }
    .cookie-actions .button { width: 100%; }
}
.auth-view { animation: auth-view-enter .28s cubic-bezier(.2,.75,.25,1) both; }
.auth-view[hidden] { display: none; }
@keyframes auth-view-enter {
    from { opacity: 0; transform: translateX(.7rem); }
    to { opacity: 1; transform: translateX(0); }
}
.auth-view > p { margin-top: 0; color: var(--muted); }
.auth-form { display: grid; gap: .9rem; }
.auth-form label { display: inline-block; margin-bottom: .35rem; color: var(--ink); font-size: .9rem; font-weight: 680; }
.auth-form button { width: 100%; }
.auth-fields {
    display: grid;
    gap: .45rem;
    padding: .75rem 1rem;
    border: 1.5px solid rgb(151 163 190 / 30%);
    border-radius: 1.15rem;
    background: transparent;
    box-shadow: 0 10px 28px rgba(57,75,126,.05);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    margin-bottom: 0.5rem;
}
.auth-fields:focus-within {
    border: 1.5px solid rgb(77 105 169 / 30%);
    background: transparent;
    box-shadow: 0 0 0 4px rgb(53 109 243 / 0.02);
}
.auth-fields p { padding: .15rem 0; border: 0; }
.auth-fields input:not([type="checkbox"]) {
    padding: .78rem .9rem;
    border: 0;
    border-radius: .8rem;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 14px rgba(57,75,126,.06);
}
.auth-fields input:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(53,109,243,.08); }
.password-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.password-input-wrap > input { padding-right: 3.35rem !important; }
.password-toggle,
.auth-form .password-toggle {
    position: absolute;
    top: 50%;
    right: .4rem;
    display: grid;
    place-items: center;
    width: 2.55rem !important;
    min-width: 2.55rem;
    height: 2.55rem;
    min-height: 2.55rem;
    padding: 0;
    border: 0;
    border-radius: .7rem;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.password-toggle:hover,
.auth-form .password-toggle:hover {
    color: var(--blue);
    background: rgba(53,109,243,.08);
    box-shadow: none;
    transform: translateY(-50%);
}
.password-toggle:focus-visible { outline: 2px solid rgba(53,109,243,.4); outline-offset: 1px; }
.password-toggle svg { display: block; width: 1.5rem; height: 1.5rem; }
.password-toggle svg[hidden] { display: none; }
#login-form > button[type="submit"] {
    min-height: 3.55rem;
    margin-top: .55rem;
    padding-block: 1rem;
    font-size: 1.04rem;
}
.auth-forgot {
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .2rem; }

footer {
    position: relative;
    width: min(1180px, calc(100% - 2rem));
    display: grid;
    grid-template-columns: minmax(240px, 1.25fr) minmax(155px, .8fr) minmax(220px, 1fr) minmax(180px, .85fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    overflow: hidden;
    color: #fff;
    border-color: rgba(255,255,255,.2);
    background:
            radial-gradient(circle at 8% 10%, rgba(58,144,255,.34), transparent 19rem),
            radial-gradient(circle at 88% 82%, rgba(128,96,240,.28), transparent 22rem),
            linear-gradient(145deg, rgba(11,37,64,.94), rgba(24,49,86,.88));
    box-shadow: 0 30px 90px rgba(14,47,80,.26), inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(32px) saturate(135%);
}
footer::before {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: 10%;
    top: -12rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 40px rgba(255,255,255,.04);
    pointer-events: none;
}
footer > * { position: relative; z-index: 1; min-width: 0; }
.footer-logo-link {
    display: inline-flex;
    padding: .7rem .85rem;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 1rem;
    background: rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 #fff, 0 14px 32px rgba(4,22,40,.18);
}
.footer-logo { display: block; width: 150px; height: auto; }
.footer-brand p { max-width: 25rem; margin-bottom: 0; color: rgba(236,243,255,.7); }
footer h2 {
    margin: .15rem 0 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 780;
    letter-spacing: .02em;
    line-height: 1.25;
}
footer ul { margin: 0; padding: 0; list-style: none; }
footer li { margin: .62rem 0; }
footer a { color: rgba(239,245,255,.76); text-decoration: none; transition: color .2s ease; }
footer a:hover { color: #fff; }
footer a[aria-current="page"] { color: #fff; font-weight: 750; }
footer address { color: rgba(239,245,255,.74); font-style: normal; }
footer address p { margin: .25rem 0 .65rem; line-height: 1.45; }
.footer-copyright {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.14);
    color: rgba(233,241,255,.58);
    font-size: .88rem;
}

@media (max-width: 720px) {
    .pricing-periods { display: none; }
    .pricing-period-select { display: block; }
    .pricing-grid {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
        scroll-snap-type: none;
        cursor: default;
    }
    .pricing-card { width: 100%; }
}

@media (max-width: 1100px) {
    .site-header > nav { display: none; }
    .site-header .mobile-menu-toggle { display: grid; }
    .journey-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journey-step::after { display: none !important; }
}
@media (max-width: 900px) {
    .site-header { gap: .45rem; padding: .55rem; }
    .site-header > nav { display: none; }
    .brand { margin-right: auto; }
    .brand-logo { display: none; }
    .brand-logo-mobile { display: block; }
    .mobile-menu-toggle { display: grid; }
    .header-action-label { display: none; }
    .header-action-icon { display: block; }
    .header-login,
    .header-register.button {
        display: grid;
        place-items: center;
        flex: 0 0 2.75rem;
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        border: 1px solid rgba(255,255,255,.86);
        border-radius: .9rem;
    }
    .header-login { background: rgba(255,255,255,.52); box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(57,75,126,.08); }
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-stage { min-height: 430px; }
    #how-it-works ol { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .contact-cta { grid-template-columns: 1fr; }
    footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
    .journey-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journey-step::after { display: none !important; }
    .value-visual { grid-template-columns: 1fr; }
    .value-transition { flex-direction: row; }
    .transition-arrow::before { content: "↓"; }
    .value-transition small { max-width: none; }
    .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .integration-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .site-header { top: .5rem; width: calc(100% - 1rem); margin-top: .5rem; }
    .site-header .header-register.button { padding: 0; }
    main { width: calc(100% - 1rem); }
    main > section, footer { padding: 1.25rem; border-radius: 1.5rem; }
    h1 { font-size: 2.75rem; }
    .hero-bullets { grid-template-columns: 1fr; }
    .hero-stage { min-height: 330px; }
    .hero-stage img { min-height: 330px; }
    .screen-main { inset: 3% 6% 18% 0; }
    #capabilities, #audience, #roles, #benefits, #plans { grid-template-columns: 1fr; }
    #how-it-works ol { grid-template-columns: 1fr; }
    footer { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
    .journey-flow { grid-template-columns: 1fr; gap: 1.65rem; }
    .journey-step:not(:last-child)::after { content: "↓"; display: grid !important; top: auto; right: auto; bottom: -1.72rem; left: calc(50% - .88rem); }
    #value { grid-template-columns: 1fr; }
    #value > article:last-of-type { grid-column: auto; }
    .value-visual { margin-inline: -.35rem; padding: .55rem; border-radius: 1.35rem; }
    .value-panel { padding: .7rem; }
    .unified-map { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "chats chats" "website orders" "clients delivery" "hub hub" "editor analytics"; }
    .hub-node { font-size: .61rem; }
    .hub-node.chats { justify-self: center; }
    .integration-category { padding: 1rem; }
    .integration-logo { min-height: 4.25rem; padding: .55rem; }
    .integration-logo img { flex-basis: 2.6rem; width: 2.6rem; height: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Payment, access and refund information */
.payment-page {  }
.payment-page h1 { max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.payment-page h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.payment-page section > p, .payment-page li { max-width: 75ch; }
.payment-page ol { padding-left: 1.5rem; color: var(--muted); line-height: 1.7; }
.payment-page li + li { margin-top: .8rem; }
.payment-page a, .pricing-terms-link a { color: var(--blue); text-underline-offset: .2em; }
.payment-page__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; font-weight: 700; }
.pricing-terms-link { margin-top: .5rem; }

/* Standalone template gallery and registration template picker */
.templates-section > p:last-of-type { max-width: 42rem; color: var(--muted); }
.pattern-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.1rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(119,143,192,.3);
    border-radius: .9rem;
    background: rgba(255,255,255,.72);
    color: var(--muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.pattern-picker-trigger:hover, .pattern-picker-trigger:focus-visible { border-color: var(--blue); background: #fff; }
.pattern-picker-trigger span:last-child { color: var(--blue); font-size: 1.25rem; }
.pattern-picker-trigger.has-selection { color: var(--ink); font-weight: 700; }
.pattern-picker-trigger.is-invalid { border-color: rgba(190,81,81,.58); box-shadow: 0 0 0 3px rgba(190,81,81,.08); }
.pattern-picker-dialog {
    width: min(1080px, calc(100% - 1rem));
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}
.pattern-picker-dialog .modal-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    padding: clamp(1rem, 3vw, 2rem);
}
.pattern-picker-dialog .modal-head { flex: 0 0 auto; margin-bottom: 1rem; }
.pattern-picker-dialog .modal-head h2 { margin: .4rem 0; }
.pattern-picker-dialog .modal-copy { max-width: 52rem; margin: 0; font-size: .9rem; line-height: 1.5; }
.pattern-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    min-height: 0;
    padding: .2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.pattern-option.is-selected { border-color: rgba(53,109,243,.55); box-shadow: 0 0 0 2px rgba(53,109,243,.12), 0 18px 38px rgba(57,75,126,.12); }
.pattern-option .audience-template-content { gap: .45rem; padding: .95rem; }
.pattern-option .audience-template-content strong { font-size: 1rem; }
.pattern-option .audience-template-content > span { font-size: .82rem; }
.pattern-option__actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .7rem; }
.pattern-option__actions a { color: var(--blue); font-size: .78rem; font-weight: 700; text-decoration: none; }
.pattern-option__actions .button { min-height: 2.5rem; padding: .55rem .8rem; font-size: .8rem; }
@media (max-width: 900px) {
    .pattern-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .pattern-picker-dialog .modal-inner { padding: .9rem; }
    .pattern-picker-dialog .modal-head { margin-bottom: .65rem; }
    .pattern-picker-dialog .eyebrow { padding: .35rem .55rem; font-size: .7rem; }
    .pattern-picker-dialog .modal-head h2 { margin: .3rem 0; font-size: 1.5rem; line-height: 1.15; }
    .pattern-picker-dialog .modal-copy { font-size: .75rem; line-height: 1.35; }
    .pattern-picker-grid { grid-template-columns: 1fr; gap: .6rem; }
    .pattern-option { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); cursor: pointer; }
    .pattern-option:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
    .pattern-option .audience-template-preview { min-height: 148px; aspect-ratio: auto; }
    .pattern-option .audience-template-phone { width: 82%; }
    .pattern-option .audience-template-content { gap: .3rem; padding: .6rem .7rem; }
    .pattern-option .audience-template-content strong { font-size: .9rem; line-height: 1.2; }
    .pattern-option .audience-template-content > span { font-size: .72rem; line-height: 1.3; }
    .pattern-option__actions { margin-top: auto; padding-top: .2rem; }
    .pattern-option__actions a { position: relative; z-index: 3; font-size: .7rem; }
    .pattern-option__actions .button { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
}
/* Shared messenger CTA and channel picker. */
.contact-button { gap: .6rem; white-space: nowrap; }
.contact-button:focus-visible { outline: 3px solid rgba(62,114,246,.55); outline-offset: 3px; }
.contact-button__icons { position: relative; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; }
.contact-button__icon { position: absolute; inset: 0; display: block; width: 1.5rem; height: 1.5rem; }
.contact-button__icons:has(.contact-button__icon + .contact-button__icon) .contact-button__icon { animation: contact-icon-swap 6s ease-in-out infinite; }
.contact-button__icons:has(.contact-button__icon + .contact-button__icon) .contact-button__icon--telegram { animation-delay: -3s; }
@keyframes contact-icon-swap {
    0%, 42%, 100% { opacity: 1; transform: translateY(0) scale(1); }
    50%, 92% { opacity: 0; transform: translateY(.35rem) scale(.75); }
}
#contact-channels .channel-row { gap: .75rem; }
#contact-channels .channel-button { flex: 1 1 10rem; gap: .65rem; }
#contact-channels .channel-button img { flex: 0 0 auto; }
#contact-channels .channel-button:hover { transform: translateY(-2px); }
#contact-channels .channel-button:focus-visible { outline: 3px solid rgba(62,114,246,.55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .contact-button__icons { display: flex; gap: .3rem; flex-basis: auto; width: auto; }
    .contact-button__icon { position: static; opacity: 1; transform: none; }
}

/* Partnership CTA shared by every landing page through the footer. */
.landing-partner-cta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
    align-items: center;
    gap: clamp(1.5rem,4vw,3rem);
    width: min(1180px, calc(100% - 2rem));
    margin: 1.5rem auto;
    padding: clamp(1.5rem,4vw,3rem);
    border: 1px solid var(--line);
    border-radius: 2rem;
    background: linear-gradient(120deg,rgba(226,246,239,.86),rgba(231,239,255,.9) 60%,rgba(244,235,255,.85));
    box-shadow: var(--shadow);
}
.landing-partner-cta__copy { min-width: 0; }
.landing-partner-cta h2 { margin: 0 0 1rem; font-size: clamp(1.8rem,3.2vw,2.65rem); line-height: 1.12; }
.landing-partner-cta__copy > p { margin: 0 0 1.4rem; color: var(--muted); }
.landing-partner-cta__audience strong { color: var(--ink); }
.landing-partner-cta .button { gap: .8rem; }
.landing-partner-cta .button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.landing-partner-cta__visual { position: relative; min-width: 0; overflow: hidden; border: 1px solid white; border-radius: 1.4rem; }
.landing-partner-cta__visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.landing-partner-cta__visual > p { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: 0; padding: 1rem 1.2rem; background: rgba(255,255,255,.8); }
.landing-partner-cta__visual strong { color: #17775e; font-size: 1.8rem; line-height: 1; }
.landing-partner-cta__visual span { font-size: .8rem; color: var(--muted); }
@media (max-width: 700px) {
    .landing-partner-cta { grid-template-columns: 1fr; padding: 1.3rem; border-radius: 1.5rem; }
    .landing-partner-cta .button { width: 100%; }
    .landing-partner-cta__visual img { aspect-ratio: 16 / 9; }
}

/* Compact desktop navigation for eight product links. */
@media (min-width: 1180px) {
    .site-header { gap: .8rem; }
    .site-header nav a { padding: .65rem .45rem; font-size: .85rem; white-space: nowrap; }
}

@media (max-width: 1179px) {
    .site-header > nav { display: none; }
    .site-header .mobile-menu-toggle { display: grid; }
}