/* =====================================================================
   CERVSOFT — Funnel design system
   Палитра, извлечена от логото: кехлибар върху топло черно + крем.
   ===================================================================== */

:root {
    --ink: #0d0b09;
    --ink-2: #16130f;
    --ink-3: #221d17;
    --line-dark: rgba(255, 238, 214, .09);
    --cream: #f6f1e8;
    --cream-2: #ede5d6;
    --paper: #fbf8f2;
    --text: #f4ede2;
    --text-dim: #b4a996;
    --text-dark: #1a1612;
    --text-dark-dim: #5f564a;
    --amber: #ffb21a;
    --amber-2: #f28c00;
    --amber-3: #c95f00;
    --amber-soft: rgba(255, 178, 26, .14);
    --lime: #d8ff5c;
    --grad: linear-gradient(100deg, #ffd166 0%, #ffb21a 35%, #ff7a1a 100%);
    --radius: 22px;
    --radius-sm: 14px;
    --shadow-xl: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .04);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --container: 1240px;
    --header-h: 76px;
}

/* ---------- Шрифтове (self-hosted variable fonts, без външни заявки) ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-cyrillic.woff2?v=1") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin.woff2?v=1") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/unbounded-cyrillic.woff2?v=1") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/unbounded-latin.woff2?v=1") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Иконки: подмножество на Bootstrap Icons 1.11.3 (MIT License) само с използваните иконки ----------
   За нова иконка: добавете класа в HTML и регенерирайте bootstrap-icons-subset.woff2 + правилата по-долу. */
@font-face { font-family: "bootstrap-icons"; font-display: block; src: url("../fonts/bootstrap-icons-subset.woff2?v=1") format("woff2"); }
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    display: inline-block; font-family: "bootstrap-icons" !important; font-style: normal; font-weight: 400 !important; font-variant: normal;
    text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.bi-arrow-left::before { content: "\f12f"; }
.bi-arrow-left-right::before { content: "\f12b"; }
.bi-arrow-repeat::before { content: "\f130"; }
.bi-arrow-right::before { content: "\f138"; }
.bi-asterisk::before { content: "\f151"; }
.bi-bag::before { content: "\f179"; }
.bi-briefcase::before { content: "\f1cc"; }
.bi-cart3::before { content: "\f244"; }
.bi-chat-dots::before { content: "\f24a"; }
.bi-chat-dots-fill::before { content: "\f249"; }
.bi-check-lg::before { content: "\f633"; }
.bi-check2::before { content: "\f272"; }
.bi-check2-circle::before { content: "\f270"; }
.bi-clock::before { content: "\f293"; }
.bi-cone-striped::before { content: "\f2d2"; }
.bi-envelope::before { content: "\f32f"; }
.bi-envelope-check::before { content: "\f68c"; }
.bi-envelope-fill::before { content: "\f32c"; }
.bi-envelope-paper-heart::before { content: "\f73c"; }
.bi-geo-alt-fill::before { content: "\f3e7"; }
.bi-gift-fill::before { content: "\f3eb"; }
.bi-globe2::before { content: "\f3ef"; }
.bi-google::before { content: "\f3f0"; }
.bi-heart-fill::before { content: "\f415"; }
.bi-hourglass-split::before { content: "\f41f"; }
.bi-laptop::before { content: "\f456"; }
.bi-life-preserver::before { content: "\f467"; }
.bi-lightning-charge-fill::before { content: "\f46c"; }
.bi-lock::before { content: "\f47b"; }
.bi-lock-fill::before { content: "\f47a"; }
.bi-palette2::before { content: "\f4b2"; }
.bi-patch-check-fill::before { content: "\f4b5"; }
.bi-pencil-square::before { content: "\f4ca"; }
.bi-person-badge::before { content: "\f4d3"; }
.bi-phone::before { content: "\f4e7"; }
.bi-rocket-takeoff::before { content: "\f845"; }
.bi-send-fill::before { content: "\f6b9"; }
.bi-shield-check::before { content: "\f52f"; }
.bi-shield-lock::before { content: "\f538"; }
.bi-sliders::before { content: "\f56b"; }
.bi-star-fill::before { content: "\f586"; }
.bi-tag-fill::before { content: "\f5af"; }
.bi-telephone::before { content: "\f5c1"; }
.bi-telephone-fill::before { content: "\f5b4"; }
.bi-telephone-outbound::before { content: "\f5bc"; }
.bi-three-dots::before { content: "\f5d4"; }
.bi-vector-pen::before { content: "\f604"; }
.bi-x-lg::before { content: "\f659"; }


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "locl" 0;
    overflow-x: hidden;
}
/* Нищо да не може да разширява страницата хоризонтално (на мобилни overflow на body не стига) */
main, .site-footer { overflow-x: hidden; }
@supports (overflow: clip) { main, .site-footer { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; overflow-wrap: break-word; font-feature-settings: "locl" 1; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--amber); color: var(--ink); }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--amber); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 40px, 860px); }

/* Фина зърнеста текстура за "печатен" премиум вид */
/* Слоят е с размера на екрана (не излиза извън него), а движението е с transform на вътрешния псевдоелемент –
   анимира се на GPU, без прерисуване на целия екран. */
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; overflow: hidden; contain: strict; }
.grain::before {
    content: ""; position: absolute; inset: -64px; will-change: transform;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-48px, 32px); }
    40% { transform: translate(32px, -64px); }
    60% { transform: translate(-64px, -16px); }
    80% { transform: translate(48px, 48px); }
}

/* ---------- Typography helpers ---------- */
.h-xl { font-size: clamp(min(30px, 8vw), 4.2vw, 56px); }
.h-xxl { font-size: clamp(34px, 5.4vw, 74px); }
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl { color: var(--amber-3); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--live::before { display: none; }
.eyebrow--live {
    padding: 8px 16px 8px 12px; border-radius: 99px;
    background: rgba(255, 178, 26, .08); border: 1px solid rgba(255, 178, 26, .25);
    letter-spacing: .08em; font-size: 12px;
}
.eyebrow--dark { color: var(--amber-3); }

.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }
.pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: pulse 1.8s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

.strike { position: relative; white-space: nowrap; }
.strike::after {
    content: ''; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; background: var(--amber-2);
    transform: scaleX(0); transform-origin: left; transition: transform .9s .5s var(--ease-out); border-radius: 4px;
}
.is-visible .strike::after { transform: scaleX(1); }

.ul { position: relative; display: inline-block; }
.ul::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .32em; background: var(--amber); z-index: -1;
    transform: scaleX(0); transform-origin: left; transition: transform .8s .4s var(--ease-out); border-radius: 3px;
}
.is-visible .ul::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn {
    --bg: transparent; --fg: var(--text);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px; border-radius: 99px; border: 0;
    background: var(--bg); color: var(--fg);
    font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s;
    will-change: transform; isolation: isolate; overflow: hidden;
}
.btn i { transition: transform .35s var(--ease-out); }
.btn:hover i.bi-arrow-right, .btn:hover i.bi-send-fill { transform: translateX(4px); }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--lg { padding: 19px 30px; font-size: 17px; }
.btn--block { width: 100%; }

.btn--primary { --bg: var(--amber); --fg: var(--ink); box-shadow: 0 10px 30px -8px rgba(255, 162, 0, .55), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn--primary::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn--primary:hover { box-shadow: 0 18px 40px -10px rgba(255, 162, 0, .7), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn--primary:hover::before { transform: translateX(120%); }
.btn--ghost { --fg: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 238, 214, .2); }
.btn--ghost:hover { --bg: rgba(255, 238, 214, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 238, 214, .45); }
.btn--ghost .bi-chat-dots-fill { color: #a78bfa; }
.btn--dark { --bg: var(--ink); --fg: var(--cream); }
.btn--dark:hover { --bg: #000; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); }

/* ---------- Header ---------- */
.site-header {
    position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
    transition: background .4s, backdrop-filter .4s, box-shadow .4s, transform .5s var(--ease-out);
}
.site-header.is-scrolled {
    background: rgba(13, 11, 9, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 1px 0 var(--line-dark);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { height: 100%; width: min(100% - 40px, 1320px); margin-inline: auto; display: flex; align-items: center; gap: 32px; }
.brand img { height: 28px; width: auto; }
.site-nav { display: flex; gap: 6px; margin-inline: auto; }
.site-nav a { position: relative; padding: 8px 14px; font-size: 15px; font-weight: 600; color: var(--text-dim); border-radius: 99px; transition: color .25s, background .25s; }
.site-nav a:hover { color: var(--text); background: rgba(255, 238, 214, .06); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.header-phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.header-phone:hover { color: var(--amber); }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent; position: relative; }
.nav-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease-out), top .35s; }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-open .nav-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.nav-open .nav-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: 100svh; display: flex; align-items: center;
    padding: calc(var(--header-h) + 40px) 0 90px; overflow: hidden; isolation: isolate;
}
.hero__glow {
    position: absolute; z-index: -1; width: 900px; height: 900px; border-radius: 50%;
    left: var(--mx, 70%); top: var(--my, 40%); transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 168, 20, .22), rgba(255, 120, 0, .08) 45%, transparent 75%);
    transition: left 1.2s var(--ease-out), top 1.2s var(--ease-out); pointer-events: none;
}
.hero__grid-bg {
    position: absolute; inset: 0; z-index: -2;
    background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 60% 45%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 45%, #000 20%, transparent 75%);
}
.hero__inner { width: min(100% - 40px, 1320px); margin-inline: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }

/* H1 = ключовата фраза (малък надпис) + рекламното заглавие */
.hero__h1 { margin: 0 0 28px; }
.hero__kicker {
    display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase;
    color: var(--amber); font-feature-settings: "locl" 0;
}
.hero__kicker::before { content: ""; flex: none; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.hero__title { display: block; font-size: clamp(40px, 5.3vw, 80px); font-weight: 700; letter-spacing: -.035em; line-height: .98; }
.hero__title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w > span { display: inline-block; animation: wordUp .85s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms + 50ms); }
@keyframes wordUp { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
.hero__title em .w > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero__lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-dim); max-width: 560px; margin-bottom: 30px; }
.hero__lead strong { color: var(--text); }

.hero__price { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: end; margin-bottom: 34px; }
.hero__price-label { grid-column: 1; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); font-weight: 700; }
.hero__price-value { grid-column: 1; grid-row: 2; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--amber); }
.hero__price-note b { color: var(--lime); }
.hero__price-note .bi-gift-fill { color: var(--lime); margin-right: 4px; }
.hero__price-note { grid-column: 2; grid-row: 2; align-self: center; font-size: 15px; color: var(--text-dim); padding-left: 18px; border-left: 1px solid var(--line-dark); max-width: 220px; line-height: 1.4; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--text-dim); font-weight: 600; }
.hero__trust i { color: var(--amber); margin-right: 6px; }

/* Hero visual */
.hero__visual { position: relative; height: 560px; perspective: 1400px; }
.mock {
    position: absolute; top: 30px; left: 0; right: 40px;
    border-radius: 18px; background: #fdfaf4; color: var(--text-dark);
    box-shadow: var(--shadow-xl), 0 0 120px -20px rgba(255, 160, 0, .25);
    transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-style: preserve-3d;
    transition: transform 1.2s var(--ease-out);
    opacity: 0; animation: mockIn 1.4s .3s var(--ease-out) forwards;
}
.hero__visual:hover .mock { transform: rotateY(-6deg) rotateX(3deg); }
@keyframes mockIn { from { opacity: 0; transform: rotateY(-30deg) rotateX(14deg) translateY(60px) scale(.92); } to { opacity: 1; } }
.mock__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #efe7da; border-radius: 18px 18px 0 0; }
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d8cdbb; }
.mock__dots i:first-child { background: #ff6b5a; } .mock__dots i:nth-child(2) { background: #ffbe2e; } .mock__dots i:last-child { background: #2bc840; }
.mock__url { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #fff; font-size: 13px; color: #6b6255; font-weight: 600; min-height: 30px; }
.mock__url .bi { color: #2bc840; font-size: 11px; }
.caret { width: 1.5px; height: 14px; background: #333; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mock__body { padding: 18px 22px 24px; }

.mock .b { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease-out), transform .7s var(--ease-spring); }
.mock .b.on { opacity: 1; transform: none; }

.mock__nav { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.mock__logo { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); }
.mock__links { display: flex; gap: 10px; margin-left: auto; }
.mock__links i { width: 42px; height: 8px; border-radius: 4px; background: #e6dccb; }
.mock__navbtn { width: 70px; height: 28px; border-radius: 99px; background: var(--ink); }
.mock__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; margin-bottom: 22px; }
.mock__h { display: block; height: 18px; border-radius: 6px; background: var(--ink); margin-bottom: 10px; }
.mock__h--short { width: 70%; background: var(--amber-2); }
.mock__p { display: block; height: 8px; border-radius: 4px; background: #ded3c1; margin: 14px 0 0; }
.mock__p--short { width: 80%; margin-top: 8px; }
.mock__btn { display: inline-block; margin-top: 18px; padding: 9px 16px; border-radius: 99px; background: var(--amber); font-size: 12px; font-weight: 800; color: var(--ink); }
.mock__img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #fff1d6, #ffd89a); }
.mock__img svg { width: 100%; height: 100%; }
.mock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock__card { height: 66px; border-radius: 12px; background: #f1eadf; display: grid; place-items: center; color: var(--amber-3); font-size: 20px; }
.mock__published {
    position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, 10px) scale(.8); opacity: 0;
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px;
    background: var(--lime); color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 14px 30px -10px rgba(216, 255, 92, .6);
    transition: all .7s var(--ease-spring);
}
.mock.is-live .mock__published { opacity: 1; transform: translate(-50%, 0) scale(1); }

.float-card {
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px;
    background: rgba(28, 24, 19, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 238, 214, .1); border-radius: 18px; box-shadow: var(--shadow-xl);
    font-size: 14px; line-height: 1.25; z-index: 3;
}
.float-card strong { display: block; color: var(--text); }
.float-card small { color: var(--text-dim); font-size: 12px; }
.float-card__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--amber); color: var(--ink); font-size: 18px; }
.float-card--lead { right: -10px; top: 0; opacity: 0; transform: translateY(-16px) scale(.9); transition: all .7s var(--ease-spring); }
.float-card--lead.show { opacity: 1; transform: none; }
.float-card--speed { left: -36px; bottom: 120px; animation: floaty 6s ease-in-out infinite, fadeIn 1s 1.6s both; }
.speed-ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--lime); font-size: 18px; }
.speed-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.speed-ring circle { fill: none; stroke: rgba(216, 255, 92, .15); stroke-width: 3; }
.speed-ring .speed-ring__val { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; animation: ring 1.8s 2s var(--ease-out) forwards; }
@keyframes ring { to { stroke-dashoffset: 4; } }

.phone {
    position: absolute; right: 0; bottom: 30px; width: 150px; height: 300px; border-radius: 30px; padding: 8px;
    background: #1d1914; box-shadow: var(--shadow-xl), inset 0 0 0 2px #3a3128; z-index: 2;
    animation: floaty 7s 1s ease-in-out infinite, phoneIn 1.2s 1s var(--ease-out) both;
}
@keyframes phoneIn { from { opacity: 0; transform: translateY(80px) rotate(8deg); } }
.phone__notch { position: absolute; top: 14px; left: 50%; width: 46px; height: 12px; border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 1; }
.phone__screen { height: 100%; border-radius: 23px; background: #fdfaf4; padding: 36px 14px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.phone__h { height: 12px; width: 80%; border-radius: 4px; background: var(--ink); }
.phone__img { height: 92px; border-radius: 10px; background: var(--grad); margin: 6px 0; }
.phone__p { height: 6px; border-radius: 3px; background: #ded3c1; }
.phone__p--short { width: 60%; }
.phone__btn { margin-top: auto; height: 30px; border-radius: 99px; background: var(--amber); }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes fadeIn { from { opacity: 0; } }

.days {
    position: absolute; left: 30px; bottom: 0; display: flex; align-items: center; gap: 14px;
    padding: 12px 18px; border-radius: 99px; background: rgba(28, 24, 19, .82); border: 1px solid rgba(255, 238, 214, .1);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; font-weight: 700; color: var(--text-dim);
    animation: fadeIn 1s 1.2s both;
}
.days b { color: var(--amber); font-variant-numeric: tabular-nums; }
.days__track { width: 160px; height: 6px; border-radius: 99px; background: rgba(255, 238, 214, .1); overflow: hidden; }
.days__fill { display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; transition: width .6s var(--ease-out); }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; border-radius: 99px; border: 1.5px solid rgba(255, 238, 214, .25); transform: translateX(-50%); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--amber); animation: cue 1.8s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee { padding: 26px 0 30px; border-block: 1px solid var(--line-dark); background: var(--ink-2); overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.marquee__label { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--text-dim); }
.marquee__track { width: 100%; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee__group { display: flex; align-items: center; gap: 36px; padding-right: 36px; flex: none; animation: marquee 38s linear infinite; }
.marquee__group span { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: rgba(244, 237, 226, .55); white-space: nowrap; transition: color .3s; }
.marquee__group span:hover { color: var(--amber); }
.marquee__group i { color: var(--amber); font-size: 14px; }
.marquee:hover .marquee__group { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(80px, 11vw, 150px) 0; }
.section--light { background: var(--paper); color: var(--text-dark); }
.section--cream { background: var(--cream); color: var(--text-dark); }
.section--dark { background: var(--ink); }
.section--light + .section--dark, .section--cream + .section--dark { border-radius: 40px 40px 0 0; margin-top: -40px; }
.section--dark + .section--light, .section--dark + .section--cream { border-radius: 40px 40px 0 0; margin-top: -40px; }

.section-head { max-width: 860px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.section-head__aside { max-width: 380px; color: var(--text-dim); }
.lead-dark { color: var(--text-dark-dim); font-size: 18px; margin: 26px 0 34px; max-width: 520px; }

/* Pain */
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pain {
    position: relative; padding: 32px 28px 34px; border-radius: var(--radius); background: #fff;
    border: 1px solid rgba(26, 22, 18, .07); box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pain:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(80, 50, 0, .35); }
.pain__num { display: inline-block; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--amber-3); background: var(--amber-soft); padding: 6px 10px; border-radius: 8px; margin-bottom: 22px; }
.pain h3 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
.pain p { color: var(--text-dark-dim); font-size: 16px; }

.pivot { margin-top: clamp(60px, 8vw, 100px); text-align: center; }
.pivot p:first-child { color: var(--text-dark-dim); font-size: 19px; margin-bottom: 14px; }
.pivot strong { color: var(--text-dark); }
.pivot__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.4vw, 60px); letter-spacing: -.03em; line-height: 1.05; }

/* Timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.timeline__line { position: absolute; left: 0; right: 0; top: 94px; height: 2px; background: var(--line-dark); }
.timeline__line span { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 20px rgba(255, 178, 26, .6); }
.step { position: relative; padding-right: 10px; }
.step__day { display: inline-block; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--amber); margin-bottom: 22px; letter-spacing: .02em; }
.step__icon {
    position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 28px;
    background: var(--ink-3); border: 1px solid var(--line-dark); font-size: 26px; color: var(--amber);
    transition: background .4s, color .4s, transform .5s var(--ease-spring);
}
.step:hover .step__icon { transform: translateY(-4px) rotate(-6deg); }
.step.is-active .step__icon, .step--final .step__icon { background: var(--amber); color: var(--ink); border-color: transparent; box-shadow: 0 0 40px -6px rgba(255, 178, 26, .7); }
.step h3 { font-size: 22px; margin-bottom: 12px; }
.step p { color: var(--text-dim); font-size: 16px; }

/* Included */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.split .section-head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }
.included { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.included li {
    display: flex; gap: 16px; padding: 22px; border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(26, 22, 18, .07);
    transition: transform .4s var(--ease-out), border-color .4s;
}
.included li:hover { transform: translateY(-4px); border-color: rgba(242, 140, 0, .45); }
.included li > i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--amber); font-size: 19px; }
.included strong { display: block; font-size: 16px; margin-bottom: 4px; color: var(--text-dark); }
.included span { font-size: 14.5px; color: var(--text-dark-dim); line-height: 1.5; }
.included li.included__wide { grid-column: 1 / -1; background: var(--ink); color: var(--text); border-color: transparent; }
.included li.included__wide > i { background: var(--amber); color: var(--ink); }
.included li.included__wide strong { color: var(--text); }
.included li.included__wide span { color: var(--text-dim); }
.included li.included__gift > i { background: var(--lime); color: var(--ink); }

/* Compare */
.compare { margin-top: clamp(70px, 9vw, 120px); border-radius: var(--radius); background: #fff; border: 1px solid rgba(26, 22, 18, .08); overflow: hidden; }
/* Клетките се разтягат до височината на най-високата в реда – линиите и черната колона остават непрекъснати */
.compare__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; align-items: stretch; }
.compare__row > span { display: flex; align-items: center; padding: 20px 24px; font-size: 15.5px; color: var(--text-dark-dim); border-top: 1px solid rgba(26, 22, 18, .06); min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.compare__row > .compare__us { border-top-color: rgba(255, 238, 214, .07); }
.compare__row--head > .compare__us { border-top: 0; }
.compare__row > span:first-child { font-weight: 700; color: var(--text-dark); }
.compare__row--head > span { border-top: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-dark); padding-top: 24px; }
.compare__us { background: var(--ink); color: var(--text) !important; position: relative; }
.compare__row--head .compare__us { color: var(--amber) !important; border-radius: 0; }
.compare__us b { color: var(--amber); font-size: 17px; }
.compare .bi-x-lg { color: #d24b3a; margin-right: 6px; }
.compare .bi-check-lg { color: var(--lime); margin-right: 6px; font-size: 18px; }
.compare__row:not(.compare__row--head) > span:not(.compare__us) .bi-check-lg { color: #2e9a4c; }

/* Showcase — компютър + телефон със синхронизиран скрол */
.showcase { display: grid; grid-template-columns: 340px 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.showcase__list { display: grid; gap: 6px; }
.showcase__tab {
    position: relative; width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 18px 20px; border: 0; border-radius: 18px;
    background: transparent; color: var(--text-dim); text-align: left; overflow: hidden; transition: background .35s, color .35s;
}
.showcase__tab:hover { background: rgba(255, 238, 214, .04); color: var(--text); }
.showcase__tab.is-active { background: var(--ink-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-dark); }
.showcase__num { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-dim); transition: color .35s; }
.showcase__tab.is-active .showcase__num { color: var(--amber); }
.showcase__name { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.showcase__name strong { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.showcase__name small { font-size: 13px; color: var(--text-dim); }
.showcase__arrow { opacity: 0; transform: translateX(-8px); transition: all .35s var(--ease-out); color: var(--amber); }
.showcase__tab.is-active .showcase__arrow { opacity: 1; transform: none; }
.showcase__progress { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255, 238, 214, .06); opacity: 0; }
.showcase__progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); }
.showcase__tab.is-active .showcase__progress { opacity: 1; }
.showcase__tab.is-active .showcase__progress i { animation: progress var(--cycle, 10s) linear forwards; }
.showcase.is-paused .showcase__tab.is-active .showcase__progress i { animation-play-state: paused; }
@keyframes progress { to { width: 100%; } }

.showcase__stage { position: relative; padding: 40px 0 40px 70px; }
.showcase__glow { position: absolute; inset: 10% 0 0 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 20, .22), transparent); filter: blur(10px); pointer-events: none; }

.device { position: relative; background: #1d1914; box-shadow: var(--shadow-xl); }
.device__screen { position: relative; overflow: hidden; background: linear-gradient(160deg, #2a241d, #17130f); }
.device__shot {
    position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transform: translateY(0);
    transition: opacity .7s var(--ease-out);
}
.device__shot.is-active { opacity: 1; animation: shotScroll var(--dur, 10s) ease-in-out .8s infinite alternate; }
.showcase.is-paused .device__shot.is-active { animation-play-state: paused; }
@keyframes shotScroll { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(var(--dist, 0px)); } }

.device--desktop { border-radius: 16px; }
.device--desktop .device__bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: #2a241d; border-radius: 16px 16px 0 0; }
.device__url { flex: 1; max-width: 360px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.device__url .bi { color: #2bc840; font-size: 10px; }
.device--desktop .device__screen { aspect-ratio: 16 / 9; border-radius: 0 0 16px 16px; }

.device--phone {
    position: absolute; left: 0; bottom: 0; width: 200px; padding: 9px; border-radius: 36px; z-index: 2;
    box-shadow: var(--shadow-xl), inset 0 0 0 2px #3a3128, 0 30px 60px -20px rgba(0, 0, 0, .8);
    animation: floaty 7s ease-in-out infinite;
}
.device--phone .device__screen { aspect-ratio: 9 / 19.5; border-radius: 28px; }
.device__notch { position: absolute; top: 17px; left: 50%; width: 60px; height: 16px; border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 3; }

.ruler { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .08em; pointer-events: none; }
.ruler b { padding: 3px 8px; border-radius: 6px; background: var(--ink); border: 1px solid rgba(255, 178, 26, .35); position: relative; z-index: 1; }
.ruler::before { content: ''; position: absolute; border: 0 dashed rgba(255, 178, 26, .45); }
.ruler--top { left: 0; right: 0; top: -30px; height: 20px; }
.ruler--top::before { left: 0; right: 0; top: 50%; border-top-width: 1px; }
.ruler--top::after { content: ''; position: absolute; inset: 4px 0; border-left: 1px solid rgba(255, 178, 26, .6); border-right: 1px solid rgba(255, 178, 26, .6); }
.ruler--side { left: -34px; top: 9px; bottom: 9px; width: 20px; }
.ruler--side::before { top: 0; bottom: 0; left: 50%; border-left-width: 1px; }
.ruler--side b { transform: rotate(-90deg); white-space: nowrap; }

.responsive-chip {
    position: absolute; right: -14px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px;
    border-radius: 18px; background: rgba(28, 24, 19, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 238, 214, .1); box-shadow: var(--shadow-xl); font-size: 14px; line-height: 1.2;
}
.responsive-chip__icons { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--lime); color: var(--ink); font-size: 15px; }
.responsive-chip__icons .bi-arrow-left-right { font-size: 11px; }
.responsive-chip strong { display: block; color: var(--text); }
.responsive-chip small { color: var(--text-dim); font-size: 12px; }

/* Quotes */
.quotes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.quote { margin: 0; padding: 32px; border-radius: var(--radius); background: #fff; border: 1px solid rgba(26, 22, 18, .07); display: flex; flex-direction: column; gap: 24px; }
.quote p { font-size: 16.5px; color: var(--text-dark); flex: 1; }
.quote--big { grid-row: span 2; background: var(--ink); color: var(--text); position: relative; overflow: hidden; }
.quote--big::before { content: '“'; position: absolute; right: 18px; top: -40px; font-family: Georgia, serif; font-size: 260px; line-height: 1; color: var(--amber); opacity: .18; }
.quote--big p { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; letter-spacing: -.01em; color: var(--text); }
.quote:nth-child(4) { grid-column: 2 / 4; }
.quote footer { display: flex; align-items: center; gap: 14px; }
.quote footer strong { display: block; font-size: 15.5px; color: var(--text-dark); }
.quote footer small { color: var(--text-dark-dim); font-size: 13.5px; }
.quote--big footer strong { color: var(--text); }
.quote--big footer small { color: var(--text-dim); }
.quote__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--ink); font-weight: 800; font-size: 14px; }

/* Price */
.section--price { overflow: hidden; }
.section--price::before { content: ''; position: absolute; left: -200px; top: 10%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 20, .16), transparent); pointer-events: none; }
.price-wrap { display: grid; grid-template-columns: 460px 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.price-card {
    position: relative; padding: 40px 36px 32px; border-radius: 30px; overflow: hidden; transform-style: preserve-3d;
    background: linear-gradient(160deg, #241e16 0%, #15110d 60%); border: 1px solid rgba(255, 178, 26, .25);
    box-shadow: 0 60px 100px -40px rgba(255, 140, 0, .35), var(--shadow-xl);
}
.price-card__shine { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--px, 30%) var(--py, 0%), rgba(255, 210, 120, .14), transparent 40%); pointer-events: none; }
.price-card__badge { display: inline-block; padding: 7px 14px; border-radius: 99px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 26px; }
.price-card__from { font-size: 14px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-dim); font-weight: 700; }
.price-card__value { font-family: var(--font-display); font-weight: 700; font-size: 120px; line-height: 1; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; align-items: flex-start; gap: 6px; }
.price-card__value small { font-size: 48px; margin-top: 14px; }
.price-card__vat { font-size: 13px; color: var(--text-dim); margin: 8px 0 26px; }
.price-card__list { display: grid; gap: 12px; padding: 24px 0; border-block: 1px solid var(--line-dark); margin-bottom: 28px; }
.price-card__list li { display: flex; gap: 12px; font-weight: 600; }
.price-card__list i { color: var(--lime); font-size: 20px; line-height: 1.2; }
.price-card__gift { display: flex; gap: 14px; align-items: center; padding: 16px; margin: -8px 0 24px; border-radius: 16px; background: rgba(216, 255, 92, .07); border: 1px dashed rgba(216, 255, 92, .4); font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.price-card__gift strong { display: block; color: var(--lime); font-size: 14.5px; margin-bottom: 6px; }
.price-card__gift-list { display: grid; gap: 4px; }
.price-card__gift-list li { display: flex; gap: 8px; align-items: baseline; color: var(--text); }
.price-card__gift-list i { color: var(--lime); font-size: 15px; flex: none; }
.price-card__gift-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-size: 19px; animation: wiggle 3.5s ease-in-out infinite; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 88% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } 96% { transform: rotate(3deg); } }
.price-card__micro { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-dim); }

.price-copy h2 { margin-bottom: 24px; }
.price-copy > p { color: var(--text-dim); font-size: 18px; max-width: 580px; }
.guarantee { display: flex; gap: 24px; align-items: center; margin: 40px 0 30px; padding: 28px; border-radius: var(--radius); background: rgba(255, 238, 214, .04); border: 1px dashed rgba(255, 178, 26, .35); }
.guarantee__seal { position: relative; flex: none; width: 104px; height: 104px; display: grid; place-items: center; }
.guarantee__seal svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.guarantee__seal text { font-family: var(--font-body); font-size: 10.5px; font-weight: 800; fill: var(--amber); }
.guarantee__seal i { font-size: 38px; color: var(--amber); }
@keyframes spin { to { transform: rotate(360deg); } }
.guarantee h3 { font-size: 19px; margin-bottom: 8px; }
.guarantee p { color: var(--text-dim); font-size: 15.5px; }
.scarcity { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--text-dim); }
.scarcity i { color: var(--amber); }
.scarcity strong { color: var(--text); }
.scarcity span { flex: 1; min-width: 0; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(26, 22, 18, .08); transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: rgba(242, 140, 0, .45); box-shadow: 0 20px 40px -30px rgba(80, 50, 0, .35); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; font-weight: 700; font-size: 18px; color: var(--text-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+'; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--cream); color: var(--text-dark); font-size: 22px; font-weight: 500; transition: transform .4s var(--ease-out), background .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--amber); }
.faq details p { padding: 0 28px 26px; color: var(--text-dark-dim); font-size: 16.5px; }
.faq details p strong { color: var(--text-dark); }

/* CTA + form */
.section--cta { overflow: hidden; }
.cta-glow { position: absolute; right: -10%; top: -20%; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 168, 20, .2), transparent); pointer-events: none; animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.15); opacity: .7; } }
.cta { position: relative; display: grid; grid-template-columns: 1fr 520px; gap: clamp(40px, 6vw, 90px); align-items: center; }
.cta__copy h2 { margin-bottom: 24px; }
.cta__copy > p { color: var(--text-dim); font-size: 18px; max-width: 540px; margin-bottom: 40px; }
.cta__contacts { display: grid; gap: 12px; max-width: 420px; }
.cta__contacts a { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 18px; transition: background .3s; font-weight: 700; }
.cta__contacts a:hover { background: rgba(255, 238, 214, .05); }
.cta__contacts a > span:first-child { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-3); border: 1px solid var(--line-dark); color: var(--amber); font-size: 19px; }
.cta__contacts a > span.viber { color: #a78bfa; }
.cta__contacts small { display: block; font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }

.lead-form {
    position: relative; padding: 36px; border-radius: 30px; background: var(--paper); color: var(--text-dark);
    box-shadow: 0 60px 120px -40px rgba(255, 140, 0, .35), 0 0 0 1px rgba(255, 255, 255, .5);
}
.lead-form__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.lead-form__head h3 { font-size: 24px; }
.lead-form__steps { font-size: 13px; font-weight: 700; color: var(--text-dark-dim); background: var(--cream); padding: 6px 12px; border-radius: 99px; }

.chips { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 13px; font-weight: 700; color: var(--text-dark-dim); margin-bottom: 10px; padding: 0; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 99px; font-size: 14px; font-weight: 700;
    background: #fff; border: 1.5px solid rgba(26, 22, 18, .1); transition: all .25s var(--ease-out);
}
.chips label:hover span { border-color: rgba(26, 22, 18, .3); }
.chips input:checked + span { background: var(--ink); color: var(--amber); border-color: var(--ink); transform: scale(1.03); }
.chips input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

.field { position: relative; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field input, .field textarea {
    width: 100%; padding: 26px 18px 10px; border-radius: 14px; border: 1.5px solid rgba(26, 22, 18, .1); background: #fff;
    font: inherit; font-size: 16px; color: var(--text-dark); transition: border-color .25s, box-shadow .25s; resize: vertical;
}
.field textarea { min-height: 112px; }
.field label { position: absolute; left: 19px; top: 18px; font-size: 16px; color: var(--text-dark-dim); pointer-events: none; transition: all .25s var(--ease-out); transform-origin: left top; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--amber-2); box-shadow: 0 0 0 4px rgba(255, 178, 26, .2); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 8px; font-size: 12px; font-weight: 700; color: var(--amber-3); }
.field.has-error input, .field.has-error textarea { border-color: #d24b3a; }
.field__error { display: block; font-size: 13px; color: #c23a2a; font-weight: 600; margin-top: 6px; min-height: 0; }
.field__error:empty { display: none; }

.lead-form__submit { margin-top: 6px; }
.lead-form__spinner { display: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(13, 11, 9, .25); border-top-color: var(--ink); animation: spin .8s linear infinite; }
.lead-form.is-loading .lead-form__label { display: none; }
.lead-form.is-loading .lead-form__spinner { display: block; }
.lead-form.is-loading { pointer-events: none; }
.lead-form__legal { margin-top: 14px; font-size: 12.5px; color: var(--text-dark-dim); text-align: center; line-height: 1.5; }
.lead-form__legal a { text-decoration: underline; text-underline-offset: 2px; }
.lead-form__fatal { color: #c23a2a; font-weight: 700; text-align: center; font-size: 14px; margin-top: 10px; }
.lead-form__fatal:empty { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); border-top: 1px solid var(--line-dark); padding: 70px 0 0; }
.site-footer__inner { width: min(100% - 40px, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.site-footer__brand p { color: var(--text-dim); max-width: 340px; margin-top: 18px; font-size: 15px; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col h3 { font-size: 13px; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); margin-bottom: 8px; }
.site-footer__col a { font-size: 15px; font-weight: 600; transition: color .2s; }
.site-footer__col a:hover { color: var(--amber); }
.site-footer__col i { color: var(--amber); margin-right: 8px; }
.site-footer__bottom { width: min(100% - 40px, var(--container)); margin-inline: auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 0 28px; border-top: 1px solid var(--line-dark); font-size: 13.5px; color: var(--text-dim); }
.site-footer__bottom .bi-heart-fill { color: var(--amber); }

/* ---------- Mobile dock ---------- */
.mobile-dock { display: none; }

/* ---------- Legal / status pages ---------- */
.legal { background: var(--paper); color: var(--text-dark); padding: calc(var(--header-h) + 80px) 0 110px; }
.legal__inner { width: min(100% - 40px, 820px); margin-inline: auto; }
.legal h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 40px; }
.legal h2 { font-size: 20px; margin: 40px 0 14px; }
.legal p, .legal li { color: var(--text-dark-dim); margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--amber-3); text-decoration: underline; text-underline-offset: 2px; }
body:not(.page-home):not(.page-status) .site-header { background: rgba(13, 11, 9, .94); }

.status { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--header-h) + 60px) 0 100px; overflow: hidden; isolation: isolate; text-align: center; }
.status .hero__glow { left: 50%; top: 40%; }
.status__inner { width: min(100% - 40px, 820px); display: flex; flex-direction: column; align-items: center; }
.status__inner .eyebrow::before { display: none; }
.status__icon { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; margin-bottom: 30px; background: var(--ink-3); border: 1px solid var(--line-dark); color: var(--amber); font-size: 42px; }
.status__icon--ok { background: transparent; border: 0; }
.status__icon svg { width: 96px; height: 96px; }
.status__icon circle { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 1s .2s var(--ease-out) forwards; }
.status__icon path { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s 1s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.status h1 { margin-bottom: 22px; font-size: clamp(32px, 4.4vw, 60px); }
.status__lead { color: var(--text-dim); font-size: 19px; max-width: 600px; margin-bottom: 40px; }
.status__lead strong { color: var(--text); }
.status__next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; margin-bottom: 44px; text-align: left; }
.status__next li { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 18px; background: rgba(255, 238, 214, .04); border: 1px solid var(--line-dark); font-weight: 600; font-size: 15px; }
.status__next b { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--amber); color: var(--ink); font-family: var(--font-display); }
.status__hurry { color: var(--text-dim); margin-bottom: 16px; }
.status__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 36px; }
.status__back { color: var(--text-dim); font-weight: 600; font-size: 15px; transition: color .2s; }
.status__back:hover { color: var(--amber); }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* В първия екран (hero) появяването е с чист CSS - не чака JavaScript, така текстът се изрисува веднага (по-добър LCP) */
.hero [data-reveal] { opacity: 1; transform: none; transition: none; animation: revealUp .9s var(--ease-out) var(--d, 0s) both; }
@keyframes revealUp { from { opacity: .01; transform: translateY(24px); } }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1180px) {
    .site-nav a { padding: 8px 10px; font-size: 14px; }
    .header-phone span:last-child { display: none; }
    .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__copy { max-width: 760px; }
    .hero__visual { height: 520px; max-width: 680px; width: 100%; margin-inline: auto; }
    .pain-grid { grid-template-columns: 1fr 1fr; }
    .price-wrap, .cta { grid-template-columns: 1fr; }
    .price-card { max-width: 520px; }
    .lead-form { max-width: 640px; }
}

@media (max-width: 960px) {
    :root { --header-h: 68px; }
    .nav-toggle { display: block; }
    .header-phone { display: none; }
    .site-nav {
        position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; gap: 0; padding: 12px 20px 24px;
        background: rgba(13, 11, 9, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line-dark);
        transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all .35s var(--ease-out);
    }
    .site-nav a { padding: 14px 4px; font-size: 18px; border-bottom: 1px solid var(--line-dark); border-radius: 0; color: var(--text); }
    .nav-open .site-nav { transform: none; opacity: 1; pointer-events: auto; }
    .nav-open .site-header { background: rgba(13, 11, 9, .96); }
    .split { grid-template-columns: 1fr; }
    .split .section-head { position: static; }
    .timeline { grid-template-columns: 1fr 1fr; row-gap: 50px; }
    .timeline__line { display: none; }
    .showcase { grid-template-columns: 1fr; }
    .showcase__list { display: flex; overflow-x: auto; gap: 8px; padding: 0 20px 6px; margin-inline: -20px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; }
    .showcase__list::-webkit-scrollbar { display: none; }
    .showcase__list li { flex: none; scroll-snap-align: start; }
    .showcase__tab { padding: 12px 16px 16px; gap: 10px; }
    .showcase__arrow { display: none; }
    .showcase__name strong { font-size: 15px; white-space: nowrap; }
    .showcase__progress { left: 16px; right: 16px; bottom: 6px; }
    .quotes { grid-template-columns: 1fr 1fr; }
    .quote--big { grid-column: 1 / -1; grid-row: auto; }
    .quote:nth-child(4) { grid-column: auto; }
    .section-head--row { flex-direction: column; align-items: start; }
    .compare__row > span { padding: 18px 16px; font-size: 14.5px; }
}

/* Таблица за сравнение на тесни екрани: само Агенция срещу CERVSOFT, без реда за оферта и фактура */
@media (max-width: 640px) {
    .compare__row { grid-template-columns: 1.1fr 1fr 1.1fr; }
    .compare__row > span:nth-child(3), .compare__row--desktop { display: none; }
    .compare__row > span { padding: 14px 12px; font-size: 13.5px; }
    .compare__row--head > span { font-size: clamp(11px, 3.4vw, 13px); }
    .compare__row--head > .compare__us { padding-inline: 10px; }
    .compare__us b { font-size: 15px; }
    .compare .bi-x-lg, .compare .bi-check-lg { margin-right: 4px; }
}
@media (max-width: 360px) {
    .compare__row:not(.compare__row--head) > span:not(:nth-child(3)) { display: block; padding: 12px 9px; font-size: 12.5px; align-content: center; }
}

@media (max-width: 640px) {
    body { font-size: 16px; padding-bottom: 84px; }
    .site-header__actions .btn { display: none; }
    .hero { padding-top: calc(var(--header-h) + 28px); min-height: auto; padding-bottom: 60px; }
    .hero__title { font-size: clamp(34px, 10.5vw, 52px); }
    .hero__kicker { font-size: 11.5px; letter-spacing: .12em; margin-bottom: 16px; }
    .hero__price { grid-template-columns: 1fr; }
    .hero__price-note { grid-column: 1; grid-row: 3; border: 0; padding: 8px 0 0; max-width: none; }
    .hero__ctas .btn { width: 100%; }
    .hero__visual { height: 400px; }
    .mock { right: 0; top: 10px; transform: rotateY(-8deg) rotateX(4deg); }
    .mock__body { padding: 14px; }
    .mock__cards { display: none; }
    .phone { width: 110px; height: 220px; right: -6px; bottom: 26px; border-radius: 24px; }
    .phone__screen { border-radius: 18px; padding-top: 28px; }
    .phone__img { height: 60px; }
    .float-card--speed { display: none; }
    .showcase__stage { padding: 34px 0 30px 34px; }
    .device--phone { width: 112px; padding: 5px; border-radius: 22px; }
    .device--phone .device__screen { border-radius: 18px; }
    .device__notch { top: 10px; width: 34px; height: 9px; }
    .ruler--side { display: none; }
    .ruler--top { top: -26px; }
    .device__url { font-size: 10.5px; padding: 4px 8px; }
    .device--desktop .device__bar { padding: 8px 10px; }
    .responsive-chip { right: -6px; bottom: -6px; padding: 8px 12px 8px 8px; font-size: 12px; }
    .responsive-chip small { display: none; }
    .float-card--lead { right: 0; top: -20px; }
    .days { left: 0; }
    .days__track { width: 100px; }
    .scroll-cue { display: none; }
    .marquee { gap: 14px; padding: 22px 0; }
    .marquee__group span { font-size: 18px; }
    .pain-grid, .included, .quotes, .timeline, .status__next { grid-template-columns: 1fr; }
    .included { grid-template-columns: 1fr 1fr; gap: 10px; }
    .included li { flex-direction: column; gap: 12px; padding: 16px; }
    .included li > i { width: 38px; height: 38px; font-size: 17px; }
    .included strong { font-size: 14.5px; margin-bottom: 0; }
    .included span span, .included li > span { font-size: 0; }
    .included li > span strong { font-size: 14.5px; }
    .included li.included__wide { flex-direction: row; align-items: center; }
    .included li.included__wide > span { font-size: 13.5px; }
    .pain { padding: 24px 22px 26px; }
    .pain__num { margin-bottom: 14px; }
    .mock__published { white-space: nowrap; font-size: 12px; padding: 8px 14px; }
    .section--light + .section--dark, .section--cream + .section--dark,
    .section--dark + .section--light, .section--dark + .section--cream { border-radius: 28px 28px 0 0; margin-top: -28px; }
    .price-card { padding: 32px 24px 26px; }
    .price-card__value { font-size: min(96px, 22vw); }
    .price-card__value small { font-size: min(48px, 10vw); margin-top: 1.5vw; }
    .scarcity strong { display: block; margin-top: 4px; }
    .guarantee { flex-direction: column; align-items: start; padding: 22px; }
    .guarantee__seal { align-self: center; }
    .lead-form { padding: 26px 20px; border-radius: 24px; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .faq summary { padding: 20px; font-size: 16.5px; }
    .faq details p { padding: 0 20px 22px; }
    .site-footer__inner { grid-template-columns: 1fr; }

    .mobile-dock {
        position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; gap: 8px; padding: 8px;
        border-radius: 22px; background: rgba(22, 19, 15, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 238, 214, .1); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6);
        transform: translateY(140%); transition: transform .5s var(--ease-out);
    }
    .mobile-dock.show { transform: none; }
    .mobile-dock__btn { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--ink-3); color: var(--amber); font-size: 19px; }
    .mobile-dock__btn--viber { color: #a78bfa; }
    .mobile-dock__cta { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    [data-reveal], .mock, .mock .b, .hero__title .w > span, .hero [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
    .grain::before, .marquee__group { animation: none !important; }
}