/* ==========================================================================
   Линкче – основни стилове
   Палитра: мастило (#16213E), кобалт (#2E3FE0), слънчоглед (#FFC93C)
   Шрифтове: Unbounded (заглавия) + Onest (текст), от Bunny Fonts
   ========================================================================== */

:root {
    --grid-dot: rgba(46, 63, 224, .5);
    --ink: #16213E;
    --ink-soft: #4A5372;
    --ink-faint: #8A91AB;
    --paper: #FFFFFF;
    --mist: #F1F3F9;
    --line: #DDE2EE;
    --line-strong: #C6CDDF;
    --cobalt: #2E3FE0;
    --cobalt-deep: #1F2DB0;
    --cobalt-tint: rgba(46, 63, 224, .07);
    --sun: #FFC93C;
    --sun-deep: #F5B400;
    --sun-soft: #FFF3CC;
    --leaf: #1A7F51;
    --leaf-soft: #E7F5EE;
    --error: #C4262E;
    --error-soft: #FDECEC;
    --error-text: #8F1B21;
    --error-line: #F3C1C3;
    --success-line: #BCE3CD;

    /* Семантични цветове – в тъмната тема се сменят заедно (виж края на файла) */
    --night: #16213E;             /* винаги тъмни повърхности: долна част, „Защо Линкче“ */
    --on-sun: #16213E;            /* текст върху жълто */
    --cobalt-fill: #2E3FE0;       /* сини бутони и плочки с бял текст */
    --cobalt-fill-hover: #1F2DB0;
    --inverse-bg: #16213E;        /* активен език, чипове, етикет „Демо“ */
    --inverse-fg: #FFFFFF;
    --glass: rgba(255, 255, 255, .95);
    --highlight: var(--sun);
    --dots: rgba(22, 33, 62, .1);
    color-scheme: light;

    --font-display: "Unbounded", "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-xl: 28px;
    --shadow: 0 1px 2px rgba(22, 33, 62, .05), 0 12px 32px -12px rgba(22, 33, 62, .18);

    --container: 1180px;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 72px;
    --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --------------------------------------------------------------------------
   Основа
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    max-width: 100%;
}

img {
    display: block;
    height: auto;
}

h1,
h2,
h3 {
    margin: 0 0 .6em;
    color: var(--ink);
    text-wrap: balance;
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.015em;
}

h1 {
    font-size: clamp(2rem, 1.35rem + 2.4vw, 3rem);
    line-height: 1.12;
}

h2 {
    font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.05rem);
    line-height: 1.2;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--cobalt);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--cobalt-deep);
}

:focus-visible {
    outline: 3px solid var(--cobalt);
    outline-offset: 2px;
}

.site-footer :focus-visible,
.cta-box :focus-visible {
    outline-color: var(--sun);
}

[hidden] {
    display: none !important;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -200px;
    left: 1rem;
    z-index: 100;
    padding: .65rem 1rem;
    border-radius: var(--radius-s);
    background: var(--inverse-bg);
    color: var(--inverse-fg);
    font-weight: 600;
}

.skip-link:focus {
    top: 1rem;
    color: #fff;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.lead {
    max-width: 40rem;
    font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Бутони
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--radius-m);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn .icon {
    width: 1.15em;
    height: 1.15em;
}

.btn-primary {
    background: var(--cobalt-fill);
    color: #fff;
}

.btn-primary:hover {
    background: var(--cobalt-fill-hover);
    color: #fff;
}

.btn-ghost {
    background: var(--paper);
    border-color: var(--ink);
    color: var(--ink);
}

.btn-ghost:hover {
    background: var(--mist);
    color: var(--ink);
}

.btn-sun {
    background: var(--sun);
    color: var(--on-sun);
}

.btn-sun:hover {
    background: var(--sun-deep);
    color: var(--on-sun);
}

.btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.btn-small {
    min-height: 40px;
    padding: .5rem .95rem;
    font-size: .95rem;
}

.btn-large {
    min-height: 54px;
    padding: .85rem 1.5rem;
    font-size: 1.05rem;
}

.btn-block {
    width: 100%;
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: .18em;
    cursor: pointer;
}

.badge {
    display: inline-block;
    padding: .22rem .65rem;
    border-radius: 999px;
    background: var(--sun);
    color: var(--on-sun);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Заглавна лента и меню
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--glass);
    border-bottom: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink);
    text-decoration: none;
}

.logo:hover {
    color: var(--ink);
}

.logo-mark {
    width: 36px;
    height: 36px;
}

.logo-word {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
}

.logo-light,
.logo-light:hover {
    color: #fff;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
}

/* Превключвател на езика */

.lang-switch {
    display: inline-flex;
    flex: none;
    overflow: hidden;
    border: 1.5px solid var(--line-strong);
    border-radius: 10px;
}

.lang-switch a {
    display: grid;
    place-items: center;
    min-width: 42px;
    min-height: 38px;
    padding: 0 .5rem;
    color: var(--ink-soft);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
}

.lang-switch a + a {
    border-left: 1.5px solid var(--line-strong);
}

.lang-switch a:hover {
    background: var(--mist);
    color: var(--ink);
}

.lang-switch a[aria-current="true"] {
    background: var(--inverse-bg);
    color: var(--inverse-fg);
}

.nav-list {
    display: flex;
    gap: clamp(.85rem, 1.2vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list a {
    color: var(--ink-soft);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    padding-block: .35rem;
    border-bottom: 2px solid transparent;
}

.nav-list a:hover {
    color: var(--ink);
}

.nav-list a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--sun);
}

.nav-toggle {
    display: none;
}

@media (max-width: 919px) {
    .header-inner {
        gap: .6rem;
    }

    .lang-switch {
        margin-left: auto;
    }

    .nav-toggle {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1.5px solid var(--line-strong);
        border-radius: var(--radius-m);
        background: var(--paper);
        color: var(--ink);
        cursor: pointer;
    }

    .nav-toggle .icon {
        grid-area: 1 / 1;
        width: 24px;
        height: 24px;
    }

    .nav-toggle .icon-close,
    .nav-toggle[aria-expanded="true"] .icon-open {
        display: none;
    }

    .nav-toggle[aria-expanded="true"] .icon-close {
        display: inline-block;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: .5rem var(--gutter) 1.5rem;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 30px -18px rgba(22, 33, 62, .25);
    }

    .site-nav.is-open {
        display: block;
    }

    .nav-list {
        display: grid;
        gap: 0;
    }

    .nav-list a {
        display: block;
        padding: .9rem 0;
        border-bottom: 1px solid var(--line);
        font-size: 1.1rem;
        color: var(--ink);
    }

    .nav-list a[aria-current="page"] {
        border-bottom-color: var(--line);
        box-shadow: inset 4px 0 0 var(--sun);
        padding-left: .9rem;
    }

    .nav-cta {
        width: 100%;
        margin-top: 1.25rem;
        min-height: 50px;
    }
}

/* --------------------------------------------------------------------------
   Начало – разговорът
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Фина точкова мрежа зад началото – усещане за структура, без да натоварва */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(var(--dots) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 70% at 72% 45%, #000 15%, transparent 72%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hero-title {
    font-size: clamp(1.9rem, 1.2rem + 2.3vw, 2.95rem);
    line-height: 1.14;
    margin-bottom: .55em;
}

.hero-price {
    font-size: 1.05rem;
    color: var(--ink-soft);
}

.hero-price strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    background: linear-gradient(transparent 60%, var(--highlight) 60%);
    padding-inline: .1em;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.hero-note {
    margin: 1rem 0 0;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* Жълтият панел е голям балон от чат – с „опашка“ долу вляво */
.hero-visual {
    position: relative;
    display: grid;
    place-items: center;
    margin-bottom: 2rem;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
    border-radius: 32px 32px 32px 10px;
    background: var(--sun);
}

.hero-visual::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -22px;
    width: 46px;
    height: 30px;
    background: var(--sun);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.phone {
    width: min(100%, 330px);
    margin: 0;
    overflow: hidden;
    border: 8px solid var(--night);
    border-radius: 36px;
    background: var(--paper);
    box-shadow: 0 30px 50px -24px rgba(22, 33, 62, .55);
}

/* Известие „Нова резервация от сайта“ – резултатът от разговора */
.hero-toast {
    position: absolute;
    right: clamp(.5rem, 3vw, 1.5rem);
    bottom: -1.4rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .7rem;
    max-width: 260px;
    padding: .7rem 1rem .7rem .7rem;
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 18px 40px -16px rgba(22, 33, 62, .45);
}

.hero-toast-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--night);
    color: var(--sun);
}

.hero-toast-icon .icon {
    width: 20px;
    height: 20px;
}

.hero-toast-text {
    display: grid;
    line-height: 1.3;
}

.hero-toast-text strong {
    font-size: .9rem;
}

.hero-toast-text small {
    font-size: .8rem;
    color: var(--ink-soft);
}


.phone-top {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 1rem .8rem;
    border-bottom: 1px solid var(--line);
}

.avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cobalt-fill);
    color: #fff;
    font-weight: 700;
}

.phone-contact {
    display: grid;
    line-height: 1.25;
}

.phone-contact small {
    color: var(--leaf);
    font-size: .78rem;
    font-weight: 500;
}

.chat {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-height: 370px;
    padding: 1.1rem .85rem 1.3rem;
    background: var(--mist);
}

.msg {
    max-width: 84%;
    margin: 0;
    padding: .6rem .8rem .45rem;
    border-radius: 18px;
    font-size: .94rem;
    line-height: 1.4;
}

.msg p {
    margin: 0 0 .55rem;
}

.msg time {
    display: block;
    margin-top: .2rem;
    font-size: .7rem;
    text-align: right;
    opacity: .7;
}

.msg-in {
    align-self: flex-start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom-left-radius: 6px;
    transform-origin: bottom left;
}

.msg-out {
    align-self: flex-end;
    background: var(--cobalt-fill);
    color: #fff;
    border-bottom-right-radius: 6px;
    transform-origin: bottom right;
}

/* Мястото на изходящото съобщение: „пише…“ се показва на същото място,
   без да размества чата */
.msg-slot {
    position: relative;
    align-self: flex-end;
    max-width: 84%;
}

.msg-slot > .msg-out {
    max-width: none;
}

.typing {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    gap: 4px;
    padding: .7rem .85rem;
    border-radius: 18px 18px 6px 18px;
    background: var(--cobalt-fill);
    opacity: 0;
}

.typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

.ticks {
    color: var(--sun);
    letter-spacing: -.2em;
    margin-left: .15rem;
}

.link-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--paper);
    color: var(--ink);
}

.link-card-image {
    position: relative;
    display: block;
    height: 74px;
    overflow: hidden;
    background: var(--sun-soft);
}

.lc-bar,
.lc-block,
.lc-line {
    position: absolute;
    border-radius: 4px;
}

.lc-bar {
    top: 12px;
    left: 12px;
    width: 46%;
    height: 10px;
    background: var(--night);
}

.lc-block {
    top: 30px;
    left: 12px;
    width: 58%;
    height: 30px;
    background: rgba(255, 201, 60, .9);
}

.lc-line {
    top: 30px;
    right: 12px;
    width: 22%;
    height: 30px;
    background: var(--paper);
}

.link-card-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .7rem .65rem;
    font-size: .82rem;
    line-height: 1.35;
}

.link-card-domain {
    color: var(--ink-soft);
    font-size: .74rem;
}

/* ---------- Сцената в началото – върти се непрекъснато (цикъл от 14 s) ----------
   0.4 s клиентът пита · 1 s „пише…“ · 2.2 s линк · 3.4 s прочетено · 3.9 s записва час ·
   4.7 s известие за резервация · 12.6 s всичко изчезва и разговорът започва отначало.
   С „намалено движение“ се вижда само крайното състояние.                                */

.hero-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.hero-bubbles i {
    position: absolute;
    bottom: -40px;
    width: 46px;
    height: 26px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(255, 255, 255, .55);
    opacity: 0;
}

.hero-bubbles i:nth-child(1) { left: 7%; }
.hero-bubbles i:nth-child(2) { left: 80%; width: 34px; height: 20px; border-radius: 12px 12px 4px 12px; }
.hero-bubbles i:nth-child(3) { left: 16%; width: 30px; height: 18px; }
.hero-bubbles i:nth-child(4) { left: 88%; width: 52px; height: 28px; border-radius: 14px 14px 4px 14px; }
.hero-bubbles i:nth-child(5) { left: 4%; width: 38px; height: 22px; }

.phone {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .phone {
        animation: phone-float 6s ease-in-out infinite;
    }

    .hero-bubbles i {
        animation: bubble-rise 9s linear infinite;
    }

    .hero-bubbles i:nth-child(2) { animation-delay: 2s; animation-duration: 11s; }
    .hero-bubbles i:nth-child(3) { animation-delay: 4.5s; }
    .hero-bubbles i:nth-child(4) { animation-delay: 6.5s; animation-duration: 12s; }
    .hero-bubbles i:nth-child(5) { animation-delay: 8s; animation-duration: 10s; }

    .hero-visual .msg-1 { animation: cyc-msg1 14s infinite; }
    .hero-visual .typing { animation: cyc-typing 14s infinite; }
    .hero-visual .typing i { animation: typing-dot .9s ease-in-out infinite; }
    .hero-visual .typing i:nth-child(2) { animation-delay: .15s; }
    .hero-visual .typing i:nth-child(3) { animation-delay: .3s; }
    .hero-visual .msg-2 { animation: cyc-msg2 14s infinite; }
    .hero-visual .ticks { animation: cyc-ticks 14s infinite; }
    .hero-visual .msg-3 { animation: cyc-msg3 14s infinite; }
    .hero-visual .hero-toast { animation: cyc-toast 14s infinite; }
    .hero-visual .hero-toast-icon .icon { animation: cyc-bell 14s infinite; transform-origin: 50% 10%; }

    .hero-visual .link-card-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .8) 50%, transparent 80%) var(--sun-soft);
        background-size: 200% 100%;
        animation: cyc-shimmer 14s infinite;
    }
}

@keyframes phone-float {
    50% {
        translate: 0 -6px;
    }
}

@keyframes bubble-rise {
    0% { opacity: 0; transform: translateY(0) scale(.8); }
    12% { opacity: .9; }
    70% { opacity: .6; }
    100% { opacity: 0; transform: translateY(-420px) scale(1); }
}

@keyframes cyc-msg1 {
    0%, 2.9% { opacity: 0; transform: translateY(10px) scale(.94); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    6.5%, 90% { opacity: 1; transform: none; animation-timing-function: ease; }
    94%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes cyc-typing {
    0%, 7.1% { opacity: 0; transform: scale(.8); }
    8.6%, 14% { opacity: 1; transform: none; }
    15.4%, 100% { opacity: 0; transform: scale(.9); }
}

@keyframes cyc-msg2 {
    0%, 15.4% { opacity: 0; transform: translateY(10px) scale(.94); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    19%, 90% { opacity: 1; transform: none; animation-timing-function: ease; }
    94%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes cyc-shimmer {
    0%, 16.4% { opacity: 1; background-position: 100% 0; }
    22.5% { opacity: 1; background-position: -100% 0; }
    24%, 100% { opacity: 0; background-position: -100% 0; }
}

@keyframes cyc-ticks {
    0%, 24.3% { color: rgba(255, 255, 255, .5); }
    26.5%, 94% { color: var(--sun); }
    100% { color: rgba(255, 255, 255, .5); }
}

@keyframes cyc-msg3 {
    0%, 27.9% { opacity: 0; transform: translateY(10px) scale(.94); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    31.5%, 90% { opacity: 1; transform: none; animation-timing-function: ease; }
    94%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes cyc-toast {
    0%, 33.6% { opacity: 0; transform: translate(24px, 12px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    37.9%, 88% { opacity: 1; transform: none; animation-timing-function: ease; }
    92%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes cyc-bell {
    0%, 38% { transform: rotate(0); }
    40% { transform: rotate(-16deg); }
    42% { transform: rotate(13deg); }
    44% { transform: rotate(-8deg); }
    46%, 100% { transform: rotate(0); }
}

@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .55; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

.section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.section-tight {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section-mist {
    background: var(--mist);
}

.section-head {
    max-width: 46rem;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.section-head p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink-soft);
}

.section-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    max-width: none;
}

.section-head-row h2 {
    margin: 0;
}

.section-foot {
    margin: 2rem 0 0;
    color: var(--ink-soft);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.split-head p {
    color: var(--ink-soft);
    font-size: 1.1rem;
}

.split-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.page-intro {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem);
}

.page-intro .lead {
    margin-bottom: 0;
}

.page-404 {
    min-height: 50vh;
    padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Списъци с отметки */

.checklist {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.checklist .icon {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: .15rem;
    color: var(--leaf);
}

.checklist-2 {
    gap: 0 2rem;
}

.checklist-2 li {
    padding-block: .95rem;
    border-bottom: 1px solid var(--line-strong);
    font-weight: 500;
}

@media (min-width: 640px) {
    .checklist-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Видове бизнес */

.sectors {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sectors li {
    padding: .6rem 1.1rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    font-weight: 500;
}

/* Стъпки (начална страница) */






/* Ценоразпис (начална страница) */

.price-board {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.price-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, .7fr) minmax(0, .8fr) auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1.4rem 1.1rem;
    border-bottom: 1px solid var(--line);
}

.price-row.is-featured {
    background: var(--sun-soft);
    border-radius: var(--radius-l);
    border-bottom-color: transparent;
}

.price-row h3 {
    display: inline;
    margin: 0 .5rem 0 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.price-row-name p {
    margin: .35rem 0 0;
    color: var(--ink-soft);
}

.price-row-first {
    margin: 0;
}

.price-row-first strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.1;
}

.price-row-first span {
    font-size: .88rem;
    color: var(--ink-soft);
}

.price-row-renew {
    margin: 0;
    color: var(--ink-soft);
}

.price-row-monthly {
    display: block;
    font-size: .82rem;
}

.price-row.is-special {
    border-radius: var(--radius-l);
    border-bottom-color: transparent;
    background: linear-gradient(120deg, var(--night) 0%, #1B2A78 100%);
    color: #fff;
}

.price-row.is-special h3,
.price-row.is-special .price-row-first strong {
    color: #fff;
}

.price-row.is-special .price-row-name p,
.price-row.is-special .price-row-renew {
    color: rgba(255, 255, 255, .78);
}

.price-row.is-special :focus-visible {
    outline-color: var(--sun);
}

/* Макет на панела */

.mock {
    width: 100%;
    max-width: 470px;
    justify-self: end;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.mock-bar {
    display: flex;
    gap: .5rem;
    padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .92rem;
}

.mock-bar strong {
    color: var(--ink);
}

.mock-body {
    display: grid;
    gap: .95rem;
    padding: 1.25rem;
}

.mock-field {
    display: grid;
    gap: .3rem;
}

.mock-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.mock-input {
    padding: .6rem .8rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 10px;
}

.mock-old,
.mock-new {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
}

.mock-new,
.mock-caret {
    display: none;
}

.mock-field:first-child .mock-input {
    border-color: var(--cobalt-fill);
    box-shadow: 0 0 0 3px rgba(46, 63, 224, .15);
}

.mock-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .2rem;
}

.mock-button {
    padding: .55rem 1.15rem;
    border-radius: 10px;
    background: var(--cobalt-fill);
    color: #fff;
    font-weight: 600;
}

.mock-toast {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--leaf);
    font-size: .9rem;
    font-weight: 600;
}

/* Примери */

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 1.5rem;
}

.work {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
}

.work-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--mist);
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.work-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    background: var(--sun-soft);
    color: var(--cobalt);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
}

.badge-demo {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: var(--inverse-bg);
    color: var(--inverse-fg);
}

.work-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .6rem;
    padding: 1.2rem 1.3rem 1.3rem;
}

.work-body h3,
.work-body p {
    margin: 0;
}

.work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    color: var(--ink-soft);
    font-size: .92rem;
}

.work-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.work-meta .icon {
    width: 1rem;
    height: 1rem;
}

.work-quote {
    margin: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--sun);
}

.work-quote footer {
    margin-top: .3rem;
    font-size: .88rem;
    color: var(--ink-soft);
}

.work-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .5rem;
}

.work-package {
    font-size: .88rem;
    color: var(--ink-soft);
}

.work-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}

.work-link .icon {
    width: 1rem;
    height: 1rem;
}

/* Въпроси */

.faq-wrap > * {
    max-width: 820px;
}

.faq details {
    border-bottom: 1px solid var(--line);
}

.faq details:first-child {
    border-top: 1px solid var(--line);
}

.faq summary {
    position: relative;
    padding: 1.15rem 2.75rem 1.15rem 0;
    font-size: 1.08rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: .25rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--cobalt);
    transform: translateY(-50%);
}

.faq summary::after {
    transition: transform .25s ease;
}

.faq details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq details p {
    max-width: 65ch;
    margin: 0 0 1.25rem;
    color: var(--ink-soft);
}

/* Призив в края */

.cta {
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.section-mist + .cta {
    padding-top: clamp(3.5rem, 7vw, 6rem);
}

.cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) auto;
    gap: 1.5rem 2.5rem;
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: var(--radius-xl);
    background: var(--cobalt-fill);
    color: #fff;
}

.cta-box h2 {
    margin-bottom: .45rem;
    color: #fff;
}

.cta-box p {
    margin: 0;
    color: rgba(255, 255, 255, .86);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* --------------------------------------------------------------------------
   Цени
   -------------------------------------------------------------------------- */

.packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    padding-top: .8rem;
}

.package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-l);
    background: var(--paper);
}

.package.is-featured {
    border: 2px solid var(--cobalt-fill);
    box-shadow: 0 22px 44px -28px rgba(46, 63, 224, .6);
}

.package > .badge {
    position: absolute;
    top: -.8rem;
    left: 1.5rem;
}

.package-name {
    margin: 0;
    font-size: 1.35rem;
}

.package-for {
    margin: 0;
    font-size: .95rem;
    color: var(--ink-soft);
}

.package-price {
    margin: .2rem 0 0;
}

.package-price strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2.15rem;
    font-weight: 600;
    line-height: 1.1;
}

.package-price span {
    font-size: .9rem;
    color: var(--ink-soft);
}

.package-price.is-quote strong {
    font-size: 1.6rem;
}

.package-renew {
    margin: 0;
    padding: .45rem .7rem;
    border-radius: var(--radius-s);
    background: var(--mist);
    font-size: .92rem;
}

.package .checklist {
    flex: 1;
    align-content: start;
    gap: .6rem;
    margin-bottom: .4rem;
    font-size: .96rem;
}

.package .checklist .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.package-monthly {
    display: block;
    margin-top: .15rem;
    font-size: .82rem;
    color: var(--ink-soft);
}

.package-plus {
    margin: .15rem 0 -.35rem;
    font-size: .9rem;
    font-weight: 600;
}

/* Специалната тъмна карта „Онлайн продажби“ – на цялата ширина под пакетите */

.package.is-special {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.special-main {
    display: grid;
    gap: .9rem;
}

.special-features .package-plus {
    margin: 0 0 1rem;
}

.package.is-special .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1.75rem;
}

.special-note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .9rem;
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 919px) {
    .packages {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.75rem;
    }

    .package.is-special {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .package.is-special .checklist {
        grid-template-columns: minmax(0, 1fr);
    }
}

.package.is-special {
    border-color: transparent;
    background: linear-gradient(160deg, var(--night) 0%, #1B2A78 60%, #1F2DB0 100%);
    color: #fff;
    box-shadow: 0 22px 44px -28px rgba(22, 33, 62, .8);
}

.package.is-special .package-name,
.package.is-special .package-price strong {
    color: #fff;
}

.package.is-special .package-for,
.package.is-special .package-plus {
    color: rgba(255, 255, 255, .78);
}

.package.is-special .package-renew {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .88);
}

.package.is-special .checklist .icon {
    color: var(--sun);
}

.package.is-special :focus-visible {
    outline-color: var(--sun);
}

.bonus {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-m);
    background: var(--sun-soft);
    font-weight: 600;
}

.table-wrap {
    position: relative; /* скритите текстове за екранни четци остават вътре в прозореца за превъртане */
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .96rem;
}

.table-wrap th,
.table-wrap td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.table-wrap tbody:last-child tr:last-child > *,
.table-wrap tfoot tr:last-child > * {
    border-bottom: 0;
}

.compare {
    min-width: 900px;
}

.compare th,
.compare td {
    text-align: center;
    vertical-align: middle;
}

.compare th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 230px;
    background: var(--paper);
    font-weight: 500;
    text-align: left;
}

.compare thead th:not(:first-child) {
    width: 17%;
}

.compare thead th {
    padding-top: 1.2rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.compare thead th span {
    display: block;
    margin-top: .2rem;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.compare .is-featured {
    background: var(--cobalt-tint);
}

.compare .is-special {
    background: rgba(22, 33, 62, .045);
}

.compare thead th.is-special {
    background: linear-gradient(160deg, var(--night) 0%, #1B2A78 100%);
    color: #fff;
}

.compare thead th.is-special span {
    color: var(--sun);
}

.compare-group th {
    padding-top: 1rem;
    background: var(--mist);
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink-soft);
    text-align: left;
}

.compare .icon-yes {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--leaf);
}

.compare .icon-no {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--ink-faint);
}

.compare tfoot th,
.compare tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--line-strong);
}

.opt {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--cobalt-tint);
    color: var(--cobalt-deep);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
}

.addons {
    width: 100%;
}

.addons th,
.addons td {
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.addons thead th {
    padding-top: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.addons tbody th {
    font-weight: 500;
}

.addons tbody th span {
    display: block;
    font-size: .88rem;
    font-weight: 400;
    color: var(--ink-soft);
}

.addons td,
.addons thead th:last-child {
    padding-left: 1rem;
    text-align: right;
    white-space: nowrap;
}

.addons td {
    font-weight: 700;
}

.pay-steps {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pay;
}

.pay-steps li {
    position: relative;
    min-height: 2rem;
    padding-left: 3rem;
    counter-increment: pay;
}

.pay-steps li::before {
    content: counter(pay);
    position: absolute;
    top: -.05rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cobalt-fill);
    color: #fff;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
}

.price-note {
    margin: 1.75rem 0 0;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Примери – филтри и празни състояния
   -------------------------------------------------------------------------- */

.filters {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.filter-label {
    min-width: 6.5rem;
    margin-right: .25rem;
    font-weight: 600;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .95rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
}

.chip:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.chip[aria-current="true"] {
    border-color: var(--inverse-bg);
    background: var(--inverse-bg);
    color: var(--inverse-fg);
}

.chip-count {
    font-size: .8rem;
    opacity: .7;
}

.demo-note {
    margin: 0 0 1.5rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-m);
    background: var(--mist);
    font-size: .94rem;
    color: var(--ink-soft);
}

.empty {
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4rem) 1.25rem;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-l);
    text-align: center;
}

.empty p {
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Как работим
   -------------------------------------------------------------------------- */

.timeline {
    max-width: 780px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.timeline li {
    position: relative;
    padding: 0 0 2.25rem 4.25rem;
    counter-increment: step;
}

@property --step-bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #FFFFFF;
}

@property --step-fg {
    syntax: '<color>';
    inherits: true;
    initial-value: #2E3FE0;
}

.timeline li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--cobalt-fill);
    border-radius: 50%;
    background: var(--step-bg, var(--paper));
    color: var(--step-fg, var(--cobalt));
    font-family: var(--font-display);
    font-weight: 600;
}

.timeline li::after {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: .25rem;
    left: calc(1.375rem - 1px);
    width: 2px;
    background: var(--line);
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li:last-child::after {
    display: none;
}

.timeline h2 {
    margin: .45rem 0 .4rem;
    font-size: 1.25rem;
}

.timeline p {
    margin: 0;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Текстови страници
   -------------------------------------------------------------------------- */

.prose {
    max-width: 74ch;
}

.prose h2 {
    margin: 2.25rem 0 .75rem;
    font-size: 1.3rem;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p,
.prose li {
    color: var(--ink);
}

.prose ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: .45rem;
}

.prose .table-wrap {
    margin-bottom: 1.25rem;
}

.legal-note {
    margin: 0 0 2rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-m);
    background: var(--mist);
    font-size: .95rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Контакти и форма
   -------------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.form {
    display: grid;
    gap: 1.2rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;    align-items: start;
}

.field {
    display: grid;
    gap: .4rem;
}

.field label {
    font-size: .96rem;
    font-weight: 600;
}

.req {
    color: var(--error);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 50px;
    padding: .75rem .9rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

.field select {
    padding-right: 2.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2316213E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.2rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--cobalt-fill);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(46, 63, 224, .18);
}

.field [aria-invalid="true"] {
    border-color: var(--error);
}

.field-error {
    margin: 0;
    color: var(--error);
    font-size: .92rem;
    font-weight: 500;
}

.field-check {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .4rem .75rem;
}

.field-check input {
    width: 1.3rem;
    height: 1.3rem;
    min-height: 0;
    margin: .2rem 0 0;
    padding: 0;
    accent-color: var(--cobalt);
}

.field-check label {
    font-weight: 400;
}

.field-check .field-error {
    grid-column: 1 / -1;
}

.form .btn {
    justify-self: start;
}

.form-note {
    margin: 0;
    font-size: .9rem;
    color: var(--ink-soft);
}

.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;
}

.alert p {
    margin: 0;
}

.alert h2 {
    margin-bottom: .4rem;
    font-size: 1.3rem;
}

.alert-success {
    border: 1px solid var(--success-line);
    background: var(--leaf-soft);
}

.alert-error {
    border: 1px solid var(--error-line);
    background: var(--error-soft);
    color: var(--error-text);
}

.contact-aside {
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-l);
    background: var(--mist);
}

.contact-aside h2 {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
}

.contact-list {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: flex;
    gap: .85rem;
}

.contact-list .icon {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .2rem;
    color: var(--cobalt);
}

.contact-list span {
    display: grid;
}

.contact-list small {
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Долна част
   -------------------------------------------------------------------------- */

.site-footer {
    padding-block: 0 1.5rem;
    background: var(--night);
    color: rgba(255, 255, 255, .78);
    font-size: .98rem;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-top: clamp(2.25rem, 4vw, 3rem);
}

.footer-brand p {
    max-width: 32ch;
    margin: 1rem 0 0;
}

.footer-title {
    margin: 0 0 .9rem;
    font-family: var(--font-body);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
}

.footer-col ul {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contacts li {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.footer-contacts .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--sun);
}

.site-footer .link-button {
    color: #fff;
    text-decoration: none;
}

.site-footer .link-button:hover {
    text-decoration: underline;
}

.footer-bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 2.75rem;
    padding-top: 1.25rem;
    font-size: .88rem;
}

.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--gutter);
    right: var(--gutter);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.footer-bottom p {
    margin: 0;
}

/* Бърза връзка на телефон */

.mobile-bar {
    display: none;
}

/* Банер за бисквитки */

.cookie-banner {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 60;
    width: min(26rem, calc(100% - 2rem));
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
    box-shadow: var(--shadow);
}

.cookie-title {
    margin: 0 0 .4rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.cookie-banner p {
    margin: 0;
    font-size: .93rem;
    color: var(--ink-soft);
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Калкулатор на цената
   -------------------------------------------------------------------------- */

.intro-actions {
    margin: 1.5rem 0 0;
}

.section-foot-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.calc-step {
    min-width: 0;
    margin: 0 0 2.5rem;
    padding: 0;
    border: 0;
}

.calc-step-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.calc-step-no {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cobalt-fill);
    color: #fff;
    font-size: .92rem;
}

.calc-step-hint {
    margin: -.35rem 0 1rem;
    font-size: .95rem;
    color: var(--ink-soft);
}

/* Пакети */

.calc-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .9rem;
}

.calc-package {
    position: relative;
    display: grid;
    align-content: start;
    gap: .15rem;
    padding: 1.1rem 1.2rem 1.15rem 3rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 16px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.calc-package:hover {
    border-color: var(--ink-faint);
}

.calc-package input {
    position: absolute;
    top: 1.3rem;
    left: 1.1rem;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--cobalt);
}

.calc-package:has(input:checked) {
    border-color: var(--cobalt-fill);
    background: var(--cobalt-tint);
    box-shadow: inset 0 0 0 1px var(--cobalt-fill);
}

.calc-package:has(input:focus-visible) {
    outline: 3px solid var(--cobalt);
    outline-offset: 2px;
}

.calc-package-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.calc-package-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
}

.calc-package-price {
    margin-top: .3rem;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
}

.calc-package-renew,
.calc-package-for {
    font-size: .9rem;
    color: var(--ink-soft);
}

.calc-package-for {
    margin-top: .35rem;
}

/* Услуги с отметка */

.calc-addons {
    border-top: 1px solid var(--line);
}

.calc-addon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .85rem .4rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.calc-addon:hover {
    background: var(--mist);
}

.calc-addon input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--cobalt);
}

.calc-addon-text {
    display: grid;
}

.calc-addon-name {
    font-weight: 500;
}

.calc-addon-note {
    font-size: .86rem;
    color: var(--ink-soft);
}

.calc-addon-price {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.calc-price-included {
    display: none;
    font-size: .9rem;
    font-weight: 600;
    color: var(--leaf);
}

.calc-addon.is-included {
    cursor: default;
}

.calc-addon.is-included:hover {
    background: transparent;
}

.calc-addon.is-included .calc-addon-name {
    color: var(--ink-soft);
}

.calc-addon.is-included .calc-price-included {
    display: inline;
}

/* Количества */

.calc-qty-list {
    display: grid;
    gap: .75rem;
}

.calc-qty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .8rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 14px;
}

.calc-qty label {
    display: grid;
    cursor: pointer;
}

.stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
}

.stepper-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.stepper-btn:hover {
    background: var(--mist);
}

.stepper input {
    box-sizing: border-box;
    width: 3.5rem;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-inline: 1.5px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 44px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.calc-addon-qty {
    cursor: default;
}

.calc-addon-qty:hover {
    background: transparent;
}

.calc-addon-spacer {
    width: 1.25rem;
}

.calc-addon-qty .calc-addon-text {
    cursor: pointer;
}

/* Пакети по индивидуална оферта */

.calc-quote {
    margin-top: 1.5rem;
}

.calc-quote-title {
    margin: 0 0 .35rem;
    font-weight: 600;
}

.calc-quote-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
}

.calc-quote-card {
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: 1rem 1.2rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: 16px;
    color: var(--ink);
    text-decoration: none;
}

.calc-quote-card:hover {
    border-color: var(--cobalt-fill);
    color: var(--ink);
}

.calc-quote-card.is-special {
    border: 0;
    background: linear-gradient(160deg, var(--night) 0%, #1B2A78 100%);
    color: #fff;
}

.calc-quote-card.is-special:hover {
    color: #fff;
    box-shadow: 0 16px 30px -20px rgba(22, 33, 62, .8);
}

.calc-quote-card.is-special .calc-package-for {
    color: rgba(255, 255, 255, .78);
}

.calc-quote-card.is-special .calc-quote-link {
    color: var(--sun);
}

.calc-quote-card.is-special:focus-visible {
    outline-color: var(--sun);
}

.calc-package-monthly {
    font-size: .8rem;
    color: var(--ink-soft);
}

.calc-monthly {
    margin: .35rem 0 0;
    font-size: .84rem;
    text-align: right;
    color: var(--ink-soft);
}

.calc-quote-link {
    margin-top: .35rem;
    color: var(--cobalt);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Обобщение */

.calc-summary {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-l);
    background: var(--paper);
}

.calc-summary h2 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.calc-lines {
    display: grid;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .95rem;
}

.calc-lines li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.calc-lines strong {
    white-space: nowrap;
}

.calc-totals {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 2px solid var(--ink);
}

.calc-totals div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.calc-totals dt {
    font-size: .92rem;
    color: var(--ink-soft);
}

.calc-totals dd {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.calc-total dt {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-total dd {
    font-family: var(--font-display);
    font-size: 1.9rem;
}

.calc-note {
    margin: .75rem 0 1rem;
    font-size: .86rem;
    color: var(--ink-soft);
}

.calc-suggest {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: var(--sun-soft);
}

.calc-suggest-title {
    margin: 0 0 .5rem;
    font-weight: 600;
}

.calc-suggest ul {
    margin: 0 0 .5rem;
    padding-left: 1.1rem;
    font-size: .92rem;
}

.calc-suggest li {
    margin-bottom: .15rem;
}

.calc-suggest-renew {
    margin: 0 0 .75rem;
    font-size: .86rem;
    color: var(--ink-soft);
}

.calc-fine {
    margin: .75rem 0 0;
    font-size: .84rem;
    color: var(--ink-soft);
}

.contact-form-wrap .calc-summary {
    position: static;
    margin-bottom: 1.75rem;
    background: var(--mist);
    border-color: var(--line);
}

.mobile-total {
    display: grid;
    align-self: center;
    line-height: 1.2;
}

.mobile-total small {
    font-size: .76rem;
    color: var(--ink-soft);
}

.mobile-total strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
}

@media (min-width: 920px) and (max-width: 1279px) {
    .nav-cta {
        display: none;
    }
}

.nav-cta {
    white-space: nowrap;
}

@media (max-width: 919px) {
    .calc {
        grid-template-columns: minmax(0, 1fr);
    }

    .calc-summary {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   Движение и детайли
   Всичко тук е допълнение: без него страницата е пълна и четима.
   -------------------------------------------------------------------------- */

/* Бутони: отговарят на посочване и натискане */
.btn {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease;
}

@media (hover: hover) {
    .btn:hover {
        transform: translateY(-1px);
    }

    .btn-primary:hover {
        box-shadow: 0 12px 22px -12px rgba(46, 63, 224, .85);
    }

    .btn-sun:hover {
        box-shadow: 0 12px 22px -12px rgba(245, 180, 0, .95);
    }
}

.btn:active {
    transform: translateY(0) scale(.98);
}

/* Видове бизнес: без движение – обикновен списък; с движение – два реда, които се плъзгат */
.marquee-track .is-copy,
.marquee-reverse {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .marquee {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    }

    .marquee + .marquee {
        display: block;
        margin-top: .7rem;
    }

    .marquee-track {
        flex-wrap: nowrap;
        width: max-content;
        gap: 0;
        animation: marquee 48s linear infinite;
    }

    .marquee-track li {
        margin-right: .6rem;
        white-space: nowrap;
    }

    .marquee-track .is-copy {
        display: block;
    }

    .marquee-reverse .marquee-track {
        animation-duration: 58s;
        animation-direction: reverse;
    }

    .marquee:hover .marquee-track {
        animation-play-state: paused;
    }
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* Стъпките на началната страница: линията се запълва, докато превъртате */
@supports (animation-timeline: view()) {
        /* „Как работим“: кръгчетата светват едно след друго */
    @media (prefers-reduced-motion: no-preference) {
        .timeline li {
            animation: step-light linear both;
            animation-timeline: view();
            animation-range: entry 70% cover 40%;
        }
    }
}


@keyframes step-light {
    from {
        --step-bg: #FFFFFF;
        --step-fg: #2E3FE0;
    }
    to {
        --step-bg: #2E3FE0;
        --step-fg: #FFFFFF;
    }
}

/* Панелът: докато е на екрана, цената се сменя, „Запази“ се натиска и излиза потвърждение –
   отново и отново (цикъл от 7 s). JavaScript добавя .is-armed и .is-live. */
@media (prefers-reduced-motion: no-preference) {
    .mock.is-armed .mock-toast {
        opacity: 0;
    }

    .mock.is-live .mock-old {
        animation: cyc-old 7s infinite;
    }

    .mock.is-live .mock-new {
        display: inline-block;
        max-width: 0;
        animation: cyc-new 7s infinite;
    }

    .mock.is-live .mock-caret {
        display: inline-block;
        width: 2px;
        height: 1.1em;
        margin-left: 2px;
        vertical-align: text-bottom;
        background: var(--cobalt-fill);
        animation: caret-blink .8s steps(1) infinite, cyc-caret 7s infinite;
    }

    .mock.is-live .mock-button {
        animation: cyc-press 7s infinite;
    }

    .mock.is-live .mock-toast {
        animation: cyc-mock-toast 7s infinite;
    }
}

@keyframes cyc-old {
    0%, 8.5% { max-width: 6ch; opacity: 1; }
    13.5%, 88% { max-width: 0; opacity: 0; }
    94%, 100% { max-width: 6ch; opacity: 1; }
}

@keyframes cyc-new {
    0%, 13.5% { max-width: 0; opacity: 1; animation-timing-function: steps(4, end); }
    22%, 86% { max-width: 6ch; opacity: 1; }
    90% { max-width: 6ch; opacity: 0; }
    91%, 100% { max-width: 0; opacity: 0; }
}

@keyframes caret-blink {
    50% { background-color: transparent; }
}

@keyframes cyc-caret {
    0%, 30% { opacity: 1; }
    31%, 92% { opacity: 0; }
    93%, 100% { opacity: 1; }
}

@keyframes cyc-press {
    0%, 26% { transform: none; }
    28% { transform: scale(.94); background: var(--cobalt-fill-hover); }
    31%, 100% { transform: none; }
}

@keyframes cyc-mock-toast {
    0%, 30.7% { opacity: 0; transform: translateY(6px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
    36%, 85% { opacity: 1; transform: none; animation-timing-function: ease; }
    90%, 100% { opacity: 0; transform: none; }
}

/* Въпросите се отварят плавно (където браузърът го поддържа) */
@supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
        :root {
            interpolate-size: allow-keywords;
        }

        .faq details::details-content {
            block-size: 0;
            overflow: clip;
            transition: block-size .3s ease, content-visibility .3s allow-discrete;
        }

        .faq details[open]::details-content {
            block-size: auto;
        }
    }
}

/* Горната лента получава сянка, щом страницата се превърти */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .site-header {
            animation: header-lift linear both;
            animation-timeline: scroll(root);
            animation-range: 0 140px;
        }
    }
}

@keyframes header-lift {
    to {
        border-bottom-color: transparent;
        box-shadow: 0 12px 30px -20px rgba(22, 33, 62, .4);
    }
}

/* Карти с пакети: светлина, която следва курсора (координатите идват от JavaScript) */
.package {
    isolation: isolate;
}

/* Карти с пакети: спокойно повдигане и цветна линия отгоре (без светлина след курсора) */
.package::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--cobalt-fill);
    transform: scaleX(0);
    transition: transform .25s ease;
    pointer-events: none;
}

.package.is-special::after {
    background: var(--sun);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .package {
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .package:hover {
        transform: translateY(-3px);
    }
    .package:hover::after {
        transform: scaleX(1);
    }
}

/* Въпрос на клиента до заглавието на вътрешните страници */
.page-intro.has-bubble .container {
    position: relative;
}

.intro-chat {
    position: absolute;
    top: .25rem;
    right: var(--gutter);
    display: grid;
    justify-items: end;
    gap: .6rem;
    max-width: 300px;
}

.intro-typing {
    display: inline-flex;
    gap: 4px;
    padding: .7rem .85rem;
    border-radius: 18px 18px 6px 18px;
    background: var(--cobalt-fill);
    transform: rotate(2deg);
}

.intro-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

.intro-bubble {
    justify-self: start;
    margin: 0;
    padding: .75rem 1rem .45rem;
    border: 1px solid var(--line);
    border-radius: 20px 20px 20px 6px;
    background: var(--paper);
    box-shadow: var(--shadow);
    font-size: 1rem;
    line-height: 1.4;
    transform: rotate(-2deg);
}

.intro-bubble time {
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    text-align: right;
    color: var(--ink-faint);
}

@media (max-width: 1099px) {
    .intro-chat {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .intro-bubble {
        animation: bubble-in .6s var(--spring) .35s both;
    }

    .intro-typing {
        animation: bubble-in .5s var(--spring) 1.2s both;
    }

    .intro-typing i {
        animation: typing-dot .9s ease-in-out infinite;
    }

    .intro-typing i:nth-child(2) { animation-delay: .15s; }
    .intro-typing i:nth-child(3) { animation-delay: .3s; }
}

@keyframes bubble-in {
    from {
        opacity: 0;
        transform: translateY(14px) rotate(-2deg) scale(.9);
    }
    to {
        opacity: 1;
        transform: rotate(-2deg);
    }
}

/* Постоянни малки акценти */
@media (prefers-reduced-motion: no-preference) {
    .badge {
        background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
        background-size: 250% 100%;
        background-repeat: no-repeat;
        animation: badge-shine 4.5s ease-in-out infinite;
    }

    .package.is-special,
    .price-row.is-special {
        background-size: 200% 200%;
        animation: drift 14s ease-in-out infinite alternate;
    }

    .cta-actions .btn:first-child {
        animation: pulse-ring 2.8s ease-out infinite;
    }
}

@keyframes badge-shine {
    0%, 55% { background-position: 150% 0; }
    85%, 100% { background-position: -60% 0; }
}

@keyframes drift {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 201, 60, .55); }
    70%, 100% { box-shadow: 0 0 0 16px rgba(255, 201, 60, 0); }
}

/* Два бели или два сиви раздела един след друг получават тънка разделителна линия */
.section:not(.section-mist):not(.why-us) + .section:not(.section-mist):not(.why-us),
.section-mist + .section-mist {
    border-top: 1px solid var(--line);
}

/* ---------- Начална страница: защо сайт ---------- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.why-item {
    padding-top: 1.1rem;
    border-top: 3px solid var(--sun);
}

.why-item h3 {
    margin-bottom: .5rem;
    font-size: 1.15rem;
}

.why-item p {
    margin: 0;
    color: var(--ink-soft);
}

/* ---------- Сайт за вашия бранш ---------- */
.solutions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}

.solution {
    display: grid;
    align-content: start;
    gap: .4rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line-strong);
}

.solution h3 {
    margin: 0;
    font-size: 1.05rem;
}

.solution p {
    margin: 0;
    color: var(--ink-soft);
}

.solution-pkg a {
    font-weight: 600;
    color: var(--cobalt);
}

/* ---------- Сравнение ---------- */
.versus {
    min-width: 720px;
}

.versus thead th {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-family: var(--font-display);
    font-size: .98rem;
    text-align: left;
}

.versus td,
.versus th[scope="row"] {
    vertical-align: top;
}

.versus th[scope="row"] {
    font-weight: 600;
}

.versus td {
    color: var(--ink-soft);
}

.versus .is-us {
    background: var(--cobalt-tint);
    color: var(--ink);
    font-weight: 600;
}

.versus thead .is-us {
    background: var(--cobalt-fill);
    color: #fff;
}

/* ---------- Градове ---------- */
.cities {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cities li {
    padding: .45rem .85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    font-size: .95rem;
}

@media (max-width: 919px) {
    .why-grid,
    .solutions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 560px) and (max-width: 919px) {
    .solutions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Калкулатор: сумата „подскача“, когато се промени; избраният пакет потвърждава избора */
@media (prefers-reduced-motion: no-preference) {
    .calc-total dd.is-bump {
        animation: bump .45s ease;
    }

    .calc-package:has(input:checked) {
        animation: select-pop .35s var(--spring);
    }

    .cookie-banner:not([hidden]) {
        animation: rise-in .5s var(--spring) both;
    }
}

.calc-total dd {
    transform-origin: right center;
}

@keyframes bump {
    40% {
        transform: scale(1.07);
        color: var(--cobalt);
    }
}

@keyframes select-pop {
    40% {
        transform: scale(1.02);
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   Начална страница: „Защо Линкче“ – тъмен раздел с анимирани икони
   ========================================================================== */

.why-us {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--night);
    color: #fff;
}

.why-us::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px);
    background-size: 24px 24px;
}

.why-us-glow span {
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
}

.why-us-glow span:first-child {
    top: -180px;
    left: -120px;
    background: var(--cobalt-fill);
}

.why-us-glow span:last-child {
    right: -160px;
    bottom: -220px;
    background: #B8860B;
    opacity: .25;
}

.why-us .section-head h2 {
    color: #fff;
}

.why-us .section-head p {
    color: rgba(255, 255, 255, .72);
}

.whyus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.whyus-card {
    position: relative;
    padding: 1.6rem 1.5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.whyus-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 201, 60, .45);
    box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 201, 60, .15);
}

.whyus-card h3 {
    margin: 1.1rem 0 .45rem;
    font-size: 1.12rem;
    color: #fff;
}

.whyus-card p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
}

.whyus-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(46, 63, 224, .55), rgba(46, 63, 224, .15));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: #fff;
}

.wi {
    width: 50px;
    height: 50px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wi-accent,
.wi-type {
    stroke: var(--sun);
}

.wi-dot,
.wi-caret {
    fill: currentColor;
    stroke: none;
}

.wi-caret {
    fill: var(--sun);
}

.wi-bar {
    fill: var(--sun);
    stroke: none;
}

.wi-ring {
    stroke: rgba(255, 201, 60, .35);
    stroke-width: 1.6;
}

.wi-type {
    stroke-dasharray: 30;
    stroke-dashoffset: 0;
}

.wi *,
.wi {
    transform-box: fill-box;
}

@media (prefers-reduced-motion: no-preference) {
    .wi-type-1 { animation: wi-type 4.2s ease-in-out infinite; }
    .wi-type-2 { animation: wi-type 4.2s ease-in-out .5s infinite; }
    .wi-type-3 { animation: wi-type 4.2s ease-in-out 1s infinite; }
    .wi-caret { animation: caret-blink .8s steps(1) infinite; }
    .wi-phone { animation: wi-bob 3.2s ease-in-out infinite; }
    .wi-scroll { animation: wi-scroll 3.2s ease-in-out infinite; }
    .wi-check { stroke-dasharray: 32; animation: wi-draw 3.4s ease-in-out infinite; }
    .wi-ring { transform-origin: center; animation: wi-pulse 3.4s ease-out infinite; }
    .wi-bar { transform-origin: 50% 100%; }
    .wi-bar-1 { animation: wi-grow 3.6s ease-in-out infinite; }
    .wi-bar-2 { animation: wi-grow 3.6s ease-in-out .25s infinite; }
    .wi-bar-3 { animation: wi-grow 3.6s ease-in-out .5s infinite; }
    .wi-lens { animation: wi-lens 3.6s ease-in-out infinite; }
    .wi-tag { transform-origin: 72% 20%; animation: wi-swing 3s ease-in-out infinite; }
    .wi-hand-m { transform-box: view-box; transform-origin: 32px 32px; animation: wi-spin 4s linear infinite; }
    .wi-hand-h { transform-box: view-box; transform-origin: 32px 32px; animation: wi-spin 48s linear infinite; }
    .why-us-glow span:first-child { animation: glow-drift 16s ease-in-out infinite alternate; }
    .why-us-glow span:last-child { animation: glow-drift 20s ease-in-out infinite alternate-reverse; }
}

@keyframes wi-type {
    0% { stroke-dashoffset: 30; }
    30%, 80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -30; }
}

@keyframes wi-bob {
    50% { transform: translateY(-4px); }
}

@keyframes wi-scroll {
    50% { transform: translateY(3px); }
}

@keyframes wi-draw {
    0% { stroke-dashoffset: 32; }
    35%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -32; }
}

@keyframes wi-pulse {
    0% { transform: scale(.85); opacity: .9; }
    80%, 100% { transform: scale(1.15); opacity: 0; }
}

@keyframes wi-grow {
    0%, 100% { transform: scaleY(.35); }
    45%, 70% { transform: scaleY(1); }
}

@keyframes wi-lens {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-22px, 6px); }
}

@keyframes wi-swing {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

@keyframes wi-spin {
    to { transform: rotate(360deg); }
}

@keyframes glow-drift {
    to { transform: translate(120px, 60px) scale(1.15); }
}

/* „Защо Линкче“ е тъмен – не слагаме разделителна линия до него */
.why-us + .section,
.section + .why-us {
    border-top: 0;
}

/* ==========================================================================
   Начална страница: процес в 6 стъпки – точката върви, линията се пълни,
   иконата светва, когато точката стигне до нея (цикъл от 10 s)
   ========================================================================== */

.process {
    position: relative;
    margin-top: .5rem;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .3rem;
    text-align: center;
}

.process-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: .55rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--paper);
    color: var(--cobalt);
    box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45);
}

.process-icon .icon {
    width: 30px;
    height: 30px;
}

.process-no {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--cobalt);
}

.process-step h3 {
    margin: 0;
    font-size: 1.02rem;
}

.process-step p {
    margin: 0;
    font-size: .93rem;
    color: var(--ink-soft);
}

.process-track {
    position: absolute;
    top: 37px;
    left: calc((100% - 6.25rem) / 12);
    right: calc((100% - 6.25rem) / 12);
    height: 2px;
    background: var(--line-strong);
}

.process-fill {
    position: absolute;
    inset: 0;
    background: var(--cobalt-fill);
    transform-origin: left center;
}

.process-dot {
    position: absolute;
    top: -7px;
    left: 0;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--sun);
    box-shadow: 0 0 0 5px rgba(255, 201, 60, .3);
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .process-fill { animation: proc-fill 10s linear infinite; }
    .process-dot { opacity: 1; animation: proc-dot 10s linear infinite; }
    .process-step:nth-child(1) .process-icon { animation: proc-light-1 10s linear infinite; }
    .process-step:nth-child(2) .process-icon { animation: proc-light-2 10s linear infinite; }
    .process-step:nth-child(3) .process-icon { animation: proc-light-3 10s linear infinite; }
    .process-step:nth-child(4) .process-icon { animation: proc-light-4 10s linear infinite; }
    .process-step:nth-child(5) .process-icon { animation: proc-light-5 10s linear infinite; }
    .process-step:nth-child(6) .process-icon { animation: proc-light-6 10s linear infinite; }
}

@keyframes proc-fill {
    0% { transform: scaleX(0); }
    42%, 50% { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

@keyframes proc-dot {
    0% { left: 0%; }
    42%, 50% { left: 100%; }
    92%, 100% { left: 0%; }
}

@keyframes proc-light-1 {
    0%, 91.4% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
    92.4%, 99% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
    100% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
}

@keyframes proc-light-2 {
    0%, 7.8% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
    8.8%, 83.0% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
    84.0%, 100% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
}

@keyframes proc-light-3 {
    0%, 16.2% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
    17.2%, 74.6% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
    75.6%, 100% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
}

@keyframes proc-light-4 {
    0%, 24.6% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
    25.6%, 66.2% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
    67.2%, 100% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
}

@keyframes proc-light-5 {
    0%, 33.0% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
    34.0%, 57.8% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
    58.8%, 100% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
}

@keyframes proc-light-6 {
    0%, 41.4% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
    42.4%, 49.4% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: scale(1.08); box-shadow: 0 16px 30px -14px rgba(46, 63, 224, .75); }
    50.4%, 100% { background: var(--paper); border-color: var(--line-strong); color: var(--cobalt); transform: none; box-shadow: 0 12px 26px -18px rgba(22, 33, 62, .45); }
}

@media (max-width: 1080px) {
    .process-track {
        display: none;
    }

    .process-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 2.25rem;
    }
}

@media (max-width: 700px) {
    .process-steps {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
    }

    .process-step {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 1rem;
        justify-items: start;
        text-align: left;
    }

    .process-icon {
        grid-row: 1 / span 3;
        width: 64px;
        height: 64px;
        margin: 0;
    }
}

/* ==========================================================================
   Сравнение: отметки за Линкче и обещание под таблицата
   ========================================================================== */

.versus td.is-us .icon {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .4rem;
    vertical-align: -.15em;
    color: var(--leaf);
}

.versus thead .is-us {
    background: linear-gradient(120deg, var(--cobalt-fill) 0%, #4655F0 50%, var(--cobalt-fill) 100%);
    background-size: 200% 100%;
}

.vs-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 1.25rem;
    padding: 1.1rem 1.4rem;
    border-radius: 18px;
    background: var(--night);
    color: #fff;
}

.vs-note p {
    margin: 0;
    font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
    .versus thead .is-us {
        animation: drift 6s ease-in-out infinite alternate;
    }
}

/* ==========================================================================
   Градове: синя вълна минава по тях един след друг
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .cities li {
        animation: city-wave 6s ease-in-out infinite;
    }
    .cities li:nth-child(1) { animation-delay: 0.00s; }
    .cities li:nth-child(2) { animation-delay: 0.22s; }
    .cities li:nth-child(3) { animation-delay: 0.44s; }
    .cities li:nth-child(4) { animation-delay: 0.66s; }
    .cities li:nth-child(5) { animation-delay: 0.88s; }
    .cities li:nth-child(6) { animation-delay: 1.10s; }
    .cities li:nth-child(7) { animation-delay: 1.32s; }
    .cities li:nth-child(8) { animation-delay: 1.54s; }
    .cities li:nth-child(9) { animation-delay: 1.76s; }
    .cities li:nth-child(10) { animation-delay: 1.98s; }
    .cities li:nth-child(11) { animation-delay: 2.20s; }
    .cities li:nth-child(12) { animation-delay: 2.42s; }
    .cities li:nth-child(13) { animation-delay: 2.64s; }
    .cities li:nth-child(14) { animation-delay: 2.86s; }
    .cities li:nth-child(15) { animation-delay: 3.08s; }
    .cities li:nth-child(16) { animation-delay: 3.30s; }
    .cities li:nth-child(17) { animation-delay: 3.52s; }
    .cities li:nth-child(18) { animation-delay: 3.74s; }
    .cities li:nth-child(19) { animation-delay: 3.96s; }
    .cities li:nth-child(20) { animation-delay: 4.18s; }
}

@keyframes city-wave {
    0%, 12%, 100% { background: var(--paper); border-color: var(--line-strong); color: var(--ink); transform: none; box-shadow: none; }
    5% { background: var(--cobalt-fill); border-color: var(--cobalt-fill); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgba(46, 63, 224, .8); }
}

/* ==========================================================================
   Долна част: слоган, действия, анимирана линия, „нагоре“
   ========================================================================== */

.site-footer {
    position: relative;
}

.footer-line {
    height: 3px;
    background: linear-gradient(90deg, var(--cobalt-fill), var(--sun), var(--cobalt-fill));
    background-size: 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .footer-line {
        animation: footer-flow 8s linear infinite;
    }
}

@keyframes footer-flow {
    to { background-position: -200% 0; }
}

.footer-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.footer-hero::after {
    content: "";
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    left: var(--gutter);
    height: 1px;
    background: rgba(255, 255, 255, .12);
}

.footer-hero > div:first-child {
    flex: 1 1 420px;
}

.footer-tagline {
    max-width: 28ch;
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.footer-tagline-text {
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, .72);
}

.footer-hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .75rem;
    max-width: 100%;
}

.btn-outline-light {
    border: 1.5px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
}

.btn-outline-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.to-top {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff;
    transition: background-color .2s ease, transform .2s ease;
}

.to-top:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transform: translateY(-2px);
}

.footer-bottom {
    align-items: center;
}

/* ==========================================================================
   Блог
   ========================================================================== */

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
    transition: transform .2s ease, box-shadow .2s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -28px rgba(22, 33, 62, .45);
}

.post-card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--mist);
}

.post-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px) 0 0 / 18px 18px,
        linear-gradient(135deg, var(--cobalt-fill), #1B2A78);
}

.post-card-placeholder .logo-mark {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
    transition: transform .3s ease;
}

.post-card:hover .post-card-placeholder .logo-mark {
    transform: rotate(-8deg) scale(1.06);
}

.post-card-body {
    display: grid;
    gap: .5rem;
    padding: 1.2rem 1.3rem 1.4rem;
}

.post-card-title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.35;
}

.post-card-title a {
    color: var(--ink);
    text-decoration: none;
}

/* цялата карта е връзка */
.post-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.post-card-title a:focus-visible {
    outline: none;
}

.post-card:has(a:focus-visible) {
    outline: 3px solid var(--cobalt);
    outline-offset: 3px;
}

.post-card-excerpt {
    margin: 0;
    color: var(--ink-soft);
    font-size: .95rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0;
    font-size: .85rem;
    color: var(--ink-soft);
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    color: var(--ink-soft);
}

.post-container {
    max-width: 780px;
}

.post-head {
    padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}

.post-head h1 {
    margin: .6rem 0 .8rem;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .9rem;
}

.breadcrumbs a + a::before {
    content: "/";
    margin-right: .4rem;
    color: var(--ink-faint);
}

.post-cover {
    width: 100%;
    height: auto;
    border-radius: var(--radius-l);
}

.post-body {
    padding-block: 2rem clamp(3rem, 6vw, 4.5rem);
    font-size: 1.08rem;
}

.post-body h2 {
    margin-top: 2.2rem;
}

.post-body blockquote {
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1.2rem;
    border-left: 4px solid var(--sun);
    color: var(--ink);
}

@media (max-width: 919px) {
    .whyus-grid,
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .whyus-grid,
    .post-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ==========================================================================
   Началото: паралакс след курсора (слоеве с различна дълбочина),
   светлина, която следва мишката, и плаващи значки около жълтия балон.
   --px/--py са от -1 до 1 и се задават от main.js само при мишка.
   ========================================================================== */

.hero-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Курсорът „разкрива“ чертежа отдолу: фина мрежа от точки около мишката */
.hero-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--grid-dot) 1.5px, transparent 1.9px);
    background-size: 22px 22px;
    background-position: 11px 11px;
    -webkit-mask-image: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 75%);
    mask-image: radial-gradient(200px circle at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 75%);
    opacity: 0;
    transition: opacity .4s ease;
}

.hero.is-pointer .hero-glow {
    opacity: 1;
}

.hero-sticker {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: var(--paper);
    color: var(--cobalt);
    box-shadow: 0 16px 30px -14px rgba(22, 33, 62, .45);
    pointer-events: none;
}

.hero-sticker .icon {
    width: 26px;
    height: 26px;
}

.hs-1 {
    top: -22px;
    left: -18px;
    rotate: -8deg;
}

.hs-2 {
    top: 16%;
    right: -22px;
    rotate: 8deg;
    color: var(--sun-deep);
}

.hs-3 {
    bottom: 26%;
    left: -26px;
    rotate: 6deg;
    color: var(--leaf);
}

@media (prefers-reduced-motion: no-preference) {
    .hero::before {
        translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px);
    }

    .hero-visual {
        translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * -6px);
    }

    .hero-bubbles {
        translate: calc(var(--px, 0) * -20px) calc(var(--py, 0) * -14px);
    }

    .phone {
        transform: perspective(1000px)
            translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px), 0)
            rotateX(calc(var(--py, 0) * -7deg))
            rotateY(calc(var(--px, 0) * 10deg));
        transition: none;
    }

    .hero-toast {
        translate: calc(var(--px, 0) * 28px) calc(var(--py, 0) * 20px);
    }

    .hs-1 {
        translate: calc(var(--px, 0) * 36px) calc(var(--py, 0) * 26px);
    }

    .hs-2 {
        translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 30px);
    }

    .hs-3 {
        translate: calc(var(--px, 0) * 44px) calc(var(--py, 0) * 18px);
    }

    .hero-sticker {
        animation: sticker-float 5s ease-in-out infinite;
    }

    .hs-2 {
        animation-duration: 6s;
        animation-delay: -1.8s;
    }

    .hs-3 {
        animation-duration: 5.5s;
        animation-delay: -3.2s;
    }
}

@keyframes sticker-float {
    50% { transform: translateY(-9px); }
}

@media (max-width: 560px) {
    .hero-sticker {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Адаптивност
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 919px) {
    .hero-grid,
    .split,
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-visual {
        max-width: 560px;
        width: 100%;
        justify-self: center;
    }

    .mock {
        justify-self: start;
    }

    .cta-box {
        grid-template-columns: minmax(0, 1fr);
    }

    .price-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .price-row-renew {
        text-align: right;
    }

    .price-row-name {
        grid-column: 1 / -1;
    }

    .price-row .btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 759px) {
    .hero-toast {
        max-width: 240px;
    }

    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: .6rem;
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--line);
        background: var(--glass);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .mobile-bar .btn {
        min-height: 46px;
        padding-inline: .75rem;
    }

    .mobile-bar {
        animation: rise-in .5s var(--spring) .8s both;
    }

    .mobile-bar-calc {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
        padding-left: 1rem;
    }

    .cookie-banner {
        left: .75rem;
        right: .75rem;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        width: auto;
    }

    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .form .btn {
        justify-self: stretch;
    }

    .hero-actions .btn {
        flex: 1 1 100%;
    }

    .chat {
        min-height: 340px;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-label {
        min-width: 100%;
    }

    .cta-actions .btn {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header,
    .mobile-bar,
    .cookie-banner,
    .cta,
    .site-footer {
        display: none !important;
    }

    body {
        padding: 0;
        font-size: 11pt;
    }
}

/* Без скрити такси / без обвързване */

.trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.trust-list li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .98rem;
    font-weight: 600;
    color: var(--ink);
}

.trust-list .icon {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--leaf);
}

/* Отметка с кратка бележка в таблицата за сравнение */

.cell-note {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--ink-soft);
}

/* Групи в таблицата с допълнителни услуги */

.addons .addons-group th {
    padding-top: 1.4rem;
    border-bottom: 2px solid var(--ink);
    font-size: .92rem;
    font-weight: 700;
}

.addons tbody:first-of-type .addons-group th {
    padding-top: .6rem;
}

/* Пакети с часове в калкулатора */

.calc-addon-boxed {
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: .8rem 1rem;
}

/* ==========================================================================
   Тъмна тема – по настройката на устройството или по избор на посетителя
   (бутонът в горната лента записва избора в localStorage, виж theme.js)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --grid-dot: rgba(255, 201, 60, .32);
        --ink: #E7EAF4;
        --ink-soft: #B3BAD0;
        --ink-faint: #8C94AD;
        --paper: #131B31;
        --mist: #0C1224;
        --line: rgba(255, 255, 255, .09);
        --line-strong: rgba(255, 255, 255, .18);
        --cobalt: #8C99FF;
        --cobalt-deep: #B0B9FF;
        --cobalt-tint: rgba(140, 153, 255, .12);
        --sun-soft: rgba(255, 201, 60, .14);
        --leaf: #45C98C;
        --leaf-soft: rgba(69, 201, 140, .14);
        --error: #FF7F86;
        --error-soft: rgba(255, 127, 134, .12);
        --error-text: #FFB4B8;
        --error-line: rgba(255, 127, 134, .4);
        --success-line: rgba(69, 201, 140, .4);
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -12px rgba(0, 0, 0, .6);
        --night: #080D1B;
        --cobalt-fill: #3647E6;
        --cobalt-fill-hover: #4B5BF5;
        --inverse-bg: #E7EAF4;
        --inverse-fg: #10172B;
        --glass: rgba(19, 27, 49, .94);
        --highlight: rgba(255, 201, 60, .4);
        --dots: rgba(255, 255, 255, .07);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --grid-dot: rgba(255, 201, 60, .32);
    --ink: #E7EAF4;
    --ink-soft: #B3BAD0;
    --ink-faint: #8C94AD;
    --paper: #131B31;
    --mist: #0C1224;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .18);
    --cobalt: #8C99FF;
    --cobalt-deep: #B0B9FF;
    --cobalt-tint: rgba(140, 153, 255, .12);
    --sun-soft: rgba(255, 201, 60, .14);
    --leaf: #45C98C;
    --leaf-soft: rgba(69, 201, 140, .14);
    --error: #FF7F86;
    --error-soft: rgba(255, 127, 134, .12);
    --error-text: #FFB4B8;
    --error-line: rgba(255, 127, 134, .4);
    --success-line: rgba(69, 201, 140, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -12px rgba(0, 0, 0, .6);
    --night: #080D1B;
    --cobalt-fill: #3647E6;
    --cobalt-fill-hover: #4B5BF5;
    --inverse-bg: #E7EAF4;
    --inverse-fg: #10172B;
    --glass: rgba(19, 27, 49, .94);
    --highlight: rgba(255, 201, 60, .4);
    --dots: rgba(255, 255, 255, .07);
    color-scheme: dark;
}

/* Бутон за тема и знамена в превключвателя на езика */

.theme-toggle {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.theme-toggle:hover {
    border-color: var(--ink);
}

.theme-toggle:active {
    transform: scale(.94);
}

.theme-toggle .icon {
    width: 20px;
    height: 20px;
}

.theme-toggle .icon-sun,
.theme-toggle[aria-pressed="true"] .icon-moon {
    display: none;
}

.theme-toggle[aria-pressed="true"] .icon-sun {
    display: block;
    color: var(--sun);
}

.theme-switching,
.theme-switching * {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.flag {
    flex: none;
    width: 18px;
    height: 12px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--line-strong);
}

/* Контактна форма: избор с бутони (канал за връзка, сегашен сайт) */

.choice-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-group legend {
    margin-bottom: .45rem;
    padding: 0;
    font-weight: 600;
}

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.choice {
    position: relative;
    cursor: pointer;
}

.choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 46px;
    padding: .55rem 1.05rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.choice span .icon {
    width: 18px;
    height: 18px;
}

.choice:hover span {
    border-color: var(--ink-soft);
}

.choice input:checked + span {
    border-color: var(--cobalt-fill);
    background: var(--cobalt-fill);
    color: #fff;
}

.choice input:focus-visible + span {
    outline: 3px solid var(--cobalt);
    outline-offset: 2px;
}

.choice-group[aria-invalid="true"] .choice span {
    border-color: var(--error);
}

/* Адресът на сегашния сайт се показва само при „Имам, искам нов“ */
.form:has(#has_site_yes:not(:checked)) .site-url-field {
    display: none;
}

.turnstile {
    min-height: 65px;
}

/* В тъмните зони общото правило за бели връзки не бива да засяга жълтите бутони */
.site-footer .btn-sun,
.site-footer .btn-sun:hover,
.vs-note .btn-sun,
.vs-note .btn-sun:hover {
    color: var(--on-sun);
}

/* Логото никога не се свива, когато горната лента е пълна */
.logo,
.logo-mark {
    flex: none;
}

/* На широк екран горната лента е пълна: показваме само знамената
   (името на езика остава в aria-label за екранните четци) */
@media (min-width: 920px) {
    .lang-switch .lang-code {
        display: none;
    }

    .lang-switch a {
        min-width: 40px;
        padding: 0 .55rem;
    }

    .lang-switch .flag {
        width: 21px;
        height: 14px;
    }
}

/* Код за отстъпка за нови посетители – лента над горното меню */

.promo-bar {
    position: relative;
    z-index: 51;
    background: var(--night);
    color: #fff;
    font-size: .92rem;
}

.promo-bar[hidden] {
    display: none;
}

.promo-inner {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    min-height: 46px;
    padding-block: .45rem;
}

.promo-icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--sun);
}

.promo-text {
    flex: 1;
    margin: 0;
    line-height: 1.45;
}

.promo-code {
    padding: .05rem .45rem;
    border: 1px dashed rgba(255, 201, 60, .7);
    border-radius: 6px;
    color: var(--sun);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .03em;
    white-space: nowrap;
}

.promo-timer {
    margin-left: .35rem;
    color: rgba(255, 255, 255, .75);
    white-space: nowrap;
}

.promo-timer time {
    font-variant-numeric: tabular-nums;
    color: #fff;
    font-weight: 600;
}

.promo-copy {
    flex: none;
    padding: .35rem .8rem;
    border: 0;
    border-radius: 999px;
    background: var(--sun);
    color: var(--on-sun);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.promo-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.promo-close:hover {
    background: rgba(255, 255, 255, .12);
}

.promo-close .icon {
    width: 18px;
    height: 18px;
}

.promo-short {
    display: none;
}

@media (max-width: 600px) {
    .promo-bar {
        font-size: .86rem;
    }

    .promo-inner {
        flex-wrap: wrap;
        gap: .3rem .6rem;
        min-height: 0;
        padding-block: .5rem;
        padding-right: 2.6rem;
    }

    .promo-icon {
        display: none;
    }

    .promo-long {
        display: none;
    }

    .promo-short {
        display: inline;
    }

    .promo-timer-label {
        display: none;
    }

    .promo-copy {
        padding: .2rem .7rem;
        font-size: .82rem;
    }

    .promo-close {
        position: absolute;
        top: 50%;
        right: .4rem;
        transform: translateY(-50%);
    }
}

/* Ред с отстъпката в обобщението */
.calc-promo {
    display: grid;
    gap: .35rem;
    margin: .25rem 0 .5rem;
    padding: .7rem .85rem;
    border: 1px dashed var(--leaf);
    border-radius: 12px;
    background: var(--leaf-soft);
    font-size: .95rem;
}

.calc-promo[hidden] {
    display: none;
}

.calc-promo > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.calc-promo strong {
    white-space: nowrap;
    color: var(--leaf);
}

.calc-promo-total strong {
    color: var(--ink);
    font-size: 1.1rem;
}

/* Снимки в текста на статия и лента за преглед */
.post-figure {
    margin: 1.75rem 0;
}

.post-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-l);
}

.preview-bar {
    padding: .6rem 1rem;
    background: var(--sun);
    color: var(--on-sun);
    font-weight: 600;
    text-align: center;
}

/* Тесен телефон: менюто, темата и езиците никога не се свиват.
   Под 420 px остават само знамената (името на езика е в aria-label). */
@media (max-width: 919px) {
    .nav-toggle,
    .theme-toggle,
    .lang-switch {
        flex: none;
    }
}

@media (max-width: 419px) {
    .header-inner {
        gap: .45rem;
    }

    .lang-switch .lang-code {
        display: none;
    }

    .lang-switch a {
        min-width: 38px;
        padding: 0 .5rem;
    }
}

@media (max-width: 359px) {
    .logo {
        gap: .4rem;
    }

    .logo-mark {
        width: 30px;
        height: 30px;
    }

    .logo-word {
        font-size: 1.15rem;
    }
}

/* ---------- Оферта по линк (/oferta/…) ---------- */
.offer-hero {
    padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(180deg, var(--cobalt-tint), transparent);
    border-bottom: 1px solid var(--line);
}
.offer-hero h1 {
    margin: .35rem 0 1.25rem;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}
.offer-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
}
.offer-number {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
}
.offer-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--mist);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 700;
}
.offer-status::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor;
}
.offer-status-open,
.offer-status-accepted,
.offer-status-reported {
    background: var(--sun-soft);
}
.offer-status-paid {
    background: var(--leaf-soft);
    color: var(--leaf);
}
.offer-status-expired,
.offer-status-declined {
    background: var(--error-soft);
    color: var(--error-text);
}
.offer-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.offer-facts li {
    display: grid;
    align-content: start;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--paper);
}
.offer-facts span {
    color: var(--ink-soft);
    font-size: .85rem;
}
.offer-facts strong {
    font-size: 1.2rem;
}
.offer-facts small {
    color: var(--ink-soft);
    font-size: .82rem;
}
.offer-facts .is-accent {
    border-color: var(--cobalt);
    box-shadow: inset 0 0 0 1px var(--cobalt);
}

.offer-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.offer-progress li {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem .9rem;
    border-radius: var(--radius-m);
    background: var(--mist);
    color: var(--ink-soft);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
}
.offer-progress-dot {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--paper);
    font-size: .85rem;
    font-weight: 800;
}
.offer-progress .is-done {
    background: var(--leaf-soft);
    color: var(--leaf);
}
.offer-progress .is-done .offer-progress-dot {
    border-color: var(--leaf);
    background: var(--leaf);
    color: #fff;
}
.offer-progress .is-current {
    background: var(--paper);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--cobalt);
}
.offer-progress .is-current .offer-progress-dot {
    border-color: var(--cobalt-fill);
    background: var(--cobalt-fill);
    color: #fff;
}

.offer-card {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.offer-card h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}
.offer-card-step {
    margin: 0 0 .25rem;
    color: var(--cobalt);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.offer-accept .btn-large {
    width: 100%;
}
.offer-notes {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Офертата като документ (фактура) */
.offer-doc {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--paper);
    box-shadow: var(--shadow);
    font-size: .94rem;
    line-height: 1.5;
}
.doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 3px solid var(--ink);
}
.doc-brand {
    display: grid;
    gap: .1rem;
}
.doc-logo {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--cobalt);
    line-height: 1.1;
}
.doc-brand small {
    color: var(--ink-soft);
}
.doc-title {
    text-align: right;
}
.doc-title h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.doc-title p {
    margin: .15rem 0 0;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.doc-parties {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.25rem 2rem;
    padding: 1.25rem 0;
}
.doc-parties h3 {
    margin: 0 0 .3rem;
    color: var(--ink-soft);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.doc-parties p {
    margin: 0;
    overflow-wrap: anywhere;
}
.doc-dates {
    display: grid;
    grid-template-columns: auto auto;
    align-content: start;
    gap: .25rem 1rem;
    margin: 0;
    padding: .75rem 1rem;
    border-radius: var(--radius-s);
    background: var(--mist);
}
.doc-dates dt {
    color: var(--ink-soft);
}
.doc-dates dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.doc-table-wrap {
    overflow-x: auto;
}
.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.doc-table th {
    padding: .55rem .6rem;
    border-bottom: 1.5px solid var(--ink);
    color: var(--ink-soft);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.doc-table td {
    padding: .7rem .6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    overflow-wrap: anywhere;
}
.doc-table .num {
    text-align: right;
    white-space: nowrap;
}
.doc-table .doc-no {
    width: 2.5rem;
    color: var(--ink-soft);
}
.doc-table .is-included {
    color: var(--leaf);
    font-weight: 600;
}
.doc-show-sm {
    display: none;
}
.doc-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 1.5rem 2rem;
    padding-top: 1.1rem;
}
.doc-notes h3 {
    margin: 0 0 .3rem;
    font-size: .9rem;
}
.doc-vat {
    margin: .75rem 0 0;
    color: var(--ink-soft);
    font-size: .84rem;
}
.doc-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
    gap: .35rem 0;
    margin: 0;
}
.doc-totals dt {
    color: var(--ink-soft);
}
.doc-totals dd {
    margin: 0;
    padding-left: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.doc-totals .is-total {
    margin: .2rem 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
}
.doc-totals .is-discount {
    color: var(--leaf);
}
.doc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--line-strong);
}
.doc-accepted {
    margin: 0;
    color: var(--leaf);
    font-weight: 600;
}
.doc-print {
    margin-left: auto;
    padding: .35rem .85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.doc-print:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.offer-next {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
.offer-next.is-two {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Проследяване на изработката (5 етапа + новини) */
.project-track {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.track-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1.25rem;
}
.track-head h2 {
    margin: 0;
    font-size: 1.25rem;
}
.track-fresh {
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--leaf-soft);
    color: var(--leaf);
    font-size: .85rem;
    font-weight: 700;
}
.track-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.track-steps li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .45rem;
    text-align: center;
}
.track-steps li::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: calc(-50% + 1.3rem);
    right: calc(50% + 1.3rem);
    height: 3px;
    border-radius: 3px;
    background: var(--line-strong);
}
.track-steps li:first-child::before {
    display: none;
}
.track-steps .is-done::before,
.track-steps .is-current::before {
    background: var(--leaf);
}
.track-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-soft);
    font-weight: 800;
}
.track-steps .is-done .track-dot {
    border-color: var(--leaf);
    background: var(--leaf);
    color: #fff;
}
.track-steps .is-current .track-dot {
    border-color: var(--cobalt-fill);
    background: var(--cobalt-fill);
    color: #fff;
}
.track-steps .is-current .track-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid var(--cobalt-fill);
    border-radius: 50%;
    animation: track-pulse 1.6s ease-out infinite;
}
.track-steps li > div {
    display: grid;
    gap: .15rem;
}
.track-steps strong {
    font-size: .92rem;
    line-height: 1.3;
}
.track-steps small {
    color: var(--ink-soft);
    font-size: .8rem;
    line-height: 1.35;
}
.track-steps .is-current strong {
    color: var(--cobalt);
}
@keyframes track-pulse {
    from { transform: scale(.85); opacity: .9; }
    to { transform: scale(1.35); opacity: 0; }
}
.project-track h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
}
.track-news {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.track-news li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--leaf);
    border-radius: var(--radius-s);
    background: var(--mist);
}
.track-news time {
    color: var(--ink-soft);
    font-size: .85rem;
    font-weight: 700;
}
.track-news p {
    margin: .1rem 0 0;
    overflow-wrap: anywhere;
}
.track-stage {
    color: var(--leaf);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.track-soon {
    margin: 0;
    color: var(--ink-soft);
}
@media (max-width: 760px) {
    .track-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .track-steps li {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        justify-items: start;
        column-gap: .8rem;
        padding-bottom: 1rem;
        text-align: left;
    }
    .track-steps li > div {
        display: grid;
    }
    .track-steps li::before {
        top: calc(-1rem + 2px);
        bottom: auto;
        left: calc(1.1rem - 1.5px);
        right: auto;
        width: 3px;
        height: 1.1rem;
    }
    .track-news li {
        grid-template-columns: minmax(0, 1fr);
        gap: .2rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .track-steps .is-current .track-dot::after {
        animation: none;
    }
}

/* „Изработваме сайта“ – строителна площадка с вишка и работници */
.offer-build {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: center;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 2px solid var(--leaf);
    border-radius: var(--radius-l);
    background: var(--leaf-soft);
}
.offer-build h2 {
    margin: 0 0 .5rem;
}
.offer-build p:last-child {
    margin: 0;
}
.build-scene {
    display: block;
    width: 100%;
    height: auto;
}
.build-scene * {
    transform-box: view-box;
}
.b-ground {
    stroke: var(--ink);
    stroke-width: 3;
    stroke-linecap: round;
}
.b-frame {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 2.5;
}
.b-bar {
    fill: var(--ink);
}
.b-dot {
    fill: var(--sun);
}
.b-block {
    fill: var(--cobalt-fill);
}
.b-block-soft {
    fill: var(--line-strong);
}
.b-block-new {
    fill: var(--sun);
    stroke: var(--ink);
    stroke-width: 2;
}
.b-code {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.b-slot {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 2;
    stroke-dasharray: 6 5;
}
.b-cursor {
    fill: #fff;
    animation: b-blink 1s steps(2, start) infinite;
}
.b-crane-part {
    fill: var(--sun-deep);
}
.b-crane-line {
    fill: none;
    stroke: var(--sun-deep);
    stroke-width: 2;
}
.b-crane-weight,
.b-crane-cab {
    fill: var(--ink);
}
.b-cable {
    stroke: var(--ink);
    stroke-width: 2;
    transform-origin: 299px 30px;
    animation: b-cable 6s ease-in-out infinite;
}
.b-load {
    animation: b-lower 6s ease-in-out infinite;
}
.w-leg {
    fill: var(--ink);
}
.w-body {
    fill: var(--cobalt-fill);
}
.w-body-alt {
    fill: #E8743B;
}
.w-vest {
    fill: var(--sun);
}
.w-skin {
    fill: #F2C7A5;
}
.w-hat {
    fill: var(--sun);
    stroke: var(--sun-deep);
    stroke-width: 1;
}
.w-wood {
    fill: #9A6B3F;
}
.w-steel {
    fill: var(--ink);
}
.w-flag {
    fill: #E23B3B;
}
.w-hammer {
    transform-origin: 122px 158px;
    animation: b-hammer 1.1s ease-in-out infinite;
}
.w-wave {
    transform-origin: 389px 152px;
    animation: b-wave 1.6s ease-in-out infinite;
}
.b-spark {
    fill: var(--sun-deep);
    opacity: 0;
    animation: b-spark 1.1s ease-out infinite;
}
@keyframes b-hammer {
    0%, 100% { transform: rotate(-42deg); }
    42%, 52% { transform: rotate(6deg); }
}
@keyframes b-spark {
    0%, 40% { opacity: 0; }
    46% { opacity: 1; }
    70%, 100% { opacity: 0; }
}
@keyframes b-cable {
    0%, 12% { transform: scaleY(1); }
    45%, 65% { transform: scaleY(1.886); }
    95%, 100% { transform: scaleY(1); }
}
@keyframes b-lower {
    0%, 12% { transform: translateY(0); }
    45%, 65% { transform: translateY(62px); }
    95%, 100% { transform: translateY(0); }
}
@keyframes b-wave {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(16deg); }
}
@keyframes b-blink {
    to { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .build-scene *,
    .build-scene {
        animation: none !important;
    }
    .b-spark {
        opacity: 0;
    }
}

.offer-pay {
    margin-top: 1.5rem;
    border: 2px solid var(--cobalt);
}
.offer-pay-intro {
    margin: 0 0 1rem;
}
.pay-grid {
    display: grid;
    margin: 0 0 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
}
.pay-row {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
}
.pay-row:last-child {
    border-bottom: 0;
}
.pay-row dt {
    color: var(--ink-soft);
    font-weight: 600;
}
.pay-row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0;
    overflow-wrap: anywhere;
}
.pay-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.02rem;
    letter-spacing: .02em;
}
.pay-ref {
    background: var(--sun-soft);
}
.pay-code {
    padding: .2rem .6rem;
    border: 2px dashed var(--ink);
    border-radius: var(--radius-s);
    background: var(--paper);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.copy-btn {
    padding: .3rem .75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.copy-btn:hover {
    border-color: var(--ink);
}
.copy-btn.is-copied {
    border-color: var(--leaf);
    color: var(--leaf);
}
.pay-warn {
    margin: 0 0 1.25rem;
    padding: .9rem 1rem .9rem 2.75rem;
    position: relative;
    border-radius: var(--radius-m);
    background: var(--sun-soft);
    color: var(--ink);
    font-weight: 600;
}
.pay-warn::before {
    content: "!";
    position: absolute;
    top: .85rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: .8rem;
    font-weight: 800;
}
.pay-nowrap {
    white-space: nowrap;
}
.offer-paid-form .form-note {
    margin-top: .5rem;
}
.offer-questions {
    margin: 1.75rem 0 1rem;
}

@media (max-width: 960px) {
    .offer-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .offer-next.is-two,
    .offer-build {
        grid-template-columns: minmax(0, 1fr);
    }
    .doc-parties {
        grid-template-columns: 1fr 1fr;
    }
    .doc-dates {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .offer-progress {
        grid-template-columns: minmax(0, 1fr);
    }
    .offer-progress li {
        padding: .55rem .75rem;
    }
    .pay-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .2rem;
    }
    .doc-parties,
    .doc-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
    .doc-hide-sm {
        display: none;
    }
    .doc-show-sm {
        display: block;
        color: var(--ink-soft);
        font-size: .85rem;
    }
    .doc-table .doc-no {
        width: 1.75rem;
    }
}
@media (max-width: 380px) {
    .offer-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media print {
    .site-header,
    .site-footer,
    .offer-progress,
    .offer-next,
    .offer-build,
    .project-track,
    .offer-questions,
    .doc-print,
    .offer-facts {
        display: none !important;
    }
    .offer-hero {
        padding: 0 0 1rem;
        background: none;
        border: 0;
    }
    .offer-doc {
        padding: 0;
        border: 0;
        box-shadow: none;
        font-size: 10.5pt;
    }
    .doc-table tr {
        break-inside: avoid;
    }
}



/* Часове за промени и помощ (след първия безплатен месец) */
.support-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 860px;
    margin: 0 auto;
}
.support-pack {
    display: grid;
    gap: .2rem;
    padding: 1.4rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper);
    text-align: center;
}
.support-pack.is-featured {
    border-color: var(--cobalt);
    box-shadow: inset 0 0 0 1px var(--cobalt);
}
.support-pack p {
    margin: 0;
}
.support-hours {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}
.support-price {
    font-size: 1.8rem;
    font-weight: 800;
}
.support-rate,
.support-valid {
    color: var(--ink-soft);
    font-size: .9rem;
}
.support-note {
    max-width: 640px;
    margin: 1.25rem auto 0;
    color: var(--ink-soft);
    text-align: center;
}
@media (max-width: 720px) {
    .support-packs {
        grid-template-columns: minmax(0, 1fr);
    }
}