/* coltcode shopify: числата са от измерването на craftberry.co (dokumenti/referencia), компютър 1440 и телефон 390 */
@font-face { font-family: "sans"; src: url("fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "label"; src: url("fonts/archivo-expanded-500.woff2") format("woff2"); font-weight: 400; font-stretch: 125%; font-display: swap; }

:root {
  --ink: #0e0e10;
  --card: #1c1c20;
  --open: #252527;
  --chip: #3e3e40;
  --paper: #f6f6f6;
  --carbon: #1b1b1b;
  --muted: #a8a8ac;
  --grey: #a3a3a3;
  --green: #72c8a8;
  --metric: #3fae7a;
  --blue: #7daeff;
  --blue-d: #165fab;
  --surface: #ffffff;
  --lcard: #efefef;
  --pad: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ink); color: var(--paper); font-family: "sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* общи */
.ink { background: var(--ink); color: var(--paper); }
.light { background: var(--surface); color: var(--carbon); }
.h2 { font-size: 42px; line-height: 44px; letter-spacing: -1.7px; font-weight: 400; }
.body { font-size: 16px; line-height: 26px; }
.lbl { font-family: "label", "sans", sans-serif; font-stretch: 125%; font-size: 11px; line-height: 13.8px; letter-spacing: .1px; text-transform: uppercase; font-weight: 400; }
.lbl-green { color: var(--green); }
.lbl-grey { color: var(--grey); }
.lbl-grey2 { color: #76756f; }
.lbl-blue { color: var(--blue); }
.green { color: var(--metric); }
.wordmark { font-family: "sans", sans-serif; font-weight: 500; letter-spacing: -.02em; text-transform: lowercase; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 25px; border-radius: 4px; font-size: 14px; line-height: 16.8px; font-weight: 500; white-space: nowrap; transition: opacity .2s, background-color .2s, color .2s; }
.btn:hover { opacity: .9; }
.btn-white { background: var(--surface); color: var(--carbon); padding: 0 24px; }
.btn-line { border: 1px solid var(--paper); color: var(--paper); }
.btn-line:hover { background: var(--paper); color: var(--carbon); opacity: 1; }
.btn-line-dark { border: 1px solid var(--carbon); color: var(--carbon); }
.btn-line-dark:hover { background: var(--carbon); color: #fff; opacity: 1; }
.btn-blue { background: var(--blue-d); color: var(--paper); font-size: 16px; font-weight: 400; padding: 0 24px; gap: 8px; }

/* видим етикет за примерно съдържание */
.ph { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 7px 2px; border: 1px dashed currentColor; border-radius: 3px; font-family: "label", sans-serif; font-stretch: 125%; font-size: 9px; line-height: 12px; letter-spacing: .4px; text-transform: uppercase; opacity: .55; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid var(--chip); border-radius: 4px; font-size: 14px; line-height: 21px; color: var(--paper); transition: border-color .2s; }
button.chip:hover { border-color: var(--paper); }
.chip-f { background: var(--chip); border: 0; border-radius: 6px; padding: 4px 12px; font-size: 14px; line-height: 20px; color: #f2f2f2; }

/* 1. Хедър */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; }
.hdr-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 var(--pad); border-bottom: 1px solid transparent; transition: background-color .15s ease-out, border-color .15s ease-out, backdrop-filter .15s; }
.hdr.is-scrolled .hdr-bar, .hdr.is-mega .hdr-bar { background: rgba(14,14,16,.7); border-bottom-color: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hdr.is-mega .hdr-bar { background: var(--ink); }
.hdr-bar > .logo { display: flex; align-items: center; gap: 14px; }
.hdr-bar { grid-template-areas: "l n r"; }
.hdr-bar > .logo .wordmark { font-size: 30px; line-height: 22px; color: #fff; }
.badge { position: absolute; left: 207px; top: 20px; display: flex; align-items: center; gap: 8px; height: 36px; color: #fff; }
.badge-ico { display: grid; place-items: center; width: 36px; height: 36px; background: #e9e9e9; color: #1b1b1b; border-radius: 1px; }
.badge-ico svg { width: 20px; }
.badge-txt { font-size: 10.5px; line-height: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 400; }
.nav { justify-self: center; }
.nav-pill { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 5.5px; border-radius: 4px; background: rgba(255,255,255,.12); }
.nav-pill a { position: relative; z-index: 1; padding: 4px 13px; border-radius: 3px; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; }
.nav-hl { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 3px; background: rgba(255,255,255,.1); opacity: 0; transition: transform .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1), opacity .2s; }
.hdr-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.hdr-meta { font-size: 14px; line-height: 21px; color: rgba(255,255,255,.8); text-align: right; }
.lang { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: #fff; }
.lang svg { width: 18px; }
.btn-hdr { height: 36px; font-size: 12px; line-height: 13.2px; padding: 0 24px; }

.mega { position: absolute; inset: 100% 0 auto; height: 0; overflow: hidden; visibility: hidden; background: var(--ink); transition: height .52s cubic-bezier(.22,1,.36,1) .04s, visibility .52s, box-shadow .52s; }
.hdr.is-mega .mega { visibility: visible; box-shadow: 0 48px 96px -24px rgba(0,0,0,.65); }
.mega-panel { display: none; grid-template-columns: repeat(4, 1fr) 425px; gap: 32px; padding: 40px var(--pad) 48px; }
.mega-panel.is-on { display: grid; }
.mega-h { font-size: 20px; line-height: 28px; letter-spacing: -.8px; margin-bottom: 20px; color: #fff; }
.mega-col a { display: block; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.7); margin-bottom: 14px; transition: color .2s; }
.mega-col a:hover { color: #fff; }
.mega-card { position: relative; height: 217px; border-radius: 8px; overflow: hidden; }
.mega-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-card > div { position: relative; padding: 24px; height: 100%; display: flex; flex-direction: column; background: linear-gradient(90deg, rgba(14,14,16,.75), rgba(14,14,16,.2)); }
.mega-card-h { font-size: 26px; line-height: 31.2px; letter-spacing: -1px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.2); }
.mega-card-p { font-size: 14px; line-height: 20px; color: rgba(255,255,255,.8); margin: 14px 0 auto; }
.mega-card .btn { align-self: flex-start; height: 36px; font-size: 12px; }
.veil { position: fixed; inset: 0; z-index: 30; background: rgba(14,14,16,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.veil.is-on { opacity: 1; visibility: visible; }

.mbar, .mmenu { display: none; }

/* 2. Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: #fff; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.72) 100%); }
.hero-in { position: relative; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--pad); }
.h-hero { font-size: 64px; line-height: 70.4px; letter-spacing: -1.3px; font-weight: 400; margin-bottom: 36px; }
.btn-hero { font-size: 14px; line-height: 15.4px; }
.see-work { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.7); transition: color .2s; }
.see-work:hover { color: #fff; }
.see-work svg { width: 14px; }
.hero-logos { display: flex; align-items: center; height: 100px; margin-top: 24px; padding-left: var(--pad); }
.hero-logos p { flex: 0 0 250px; font-size: 12px; line-height: 18px; color: rgba(255,255,255,.8); }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide-l 38s linear infinite; }
.pl { margin: 0 30px; opacity: .6; transition: opacity .3s; white-space: nowrap; color: #fff; }
.pl:hover { opacity: 1; }
.pl-a { font-size: 21px; font-weight: 600; letter-spacing: -.5px; }
.pl-b { font-size: 19px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
.pl-c { font-size: 22px; font-weight: 500; font-style: italic; letter-spacing: -.8px; }
.pl-d { font-family: "label", sans-serif; font-stretch: 125%; font-size: 15px; letter-spacing: .5px; }
@keyframes slide-l { to { transform: translateX(-50%); } }
@keyframes slide-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* 3. Статистика */
.sec-stats { padding: 160px var(--pad) 0; height: 400px; }
.stats-row { display: flex; gap: 40px; margin-top: 64px; }
.stats { display: flex; gap: 6px; }
.stat { width: 220px; height: 132px; padding: 30px; background: var(--card); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; }
.stat .lbl { min-height: 28px; display: flex; align-items: flex-end; }
.stat-n { font-size: 42px; line-height: 44px; letter-spacing: -1.7px; color: var(--paper); }
.stats-p { width: 422px; flex: none; }

/* 4. Work */
.sec-work { padding: 160px 0 0; height: 1114px; overflow: hidden; }
.work-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 var(--pad); }
.work-top .btn { margin-top: 6px; }
.work-lbl { padding: 0 var(--pad); margin-top: 40px; line-height: 13.2px; }
.work-filters { padding: 0 var(--pad); margin-top: 10px; }
.work-all-m { display: none; }
.slider { position: relative; margin-top: 40px; }
.sl-track { display: flex; gap: 6px; align-items: flex-start; transition: transform .7s cubic-bezier(.22,1,.36,1); will-change: transform; }
.slide { flex: 0 0 787px; }
.sl-img { position: relative; height: 500px; margin-top: 34px; overflow: hidden; border-radius: 8px; transition: height .7s cubic-bezier(.22,1,.36,1), margin .7s cubic-bezier(.22,1,.36,1); }
.sl-img img { width: 100%; height: 100%; object-fit: cover; }
.sl-img::after { content: ""; position: absolute; inset: 0; background: rgba(14,14,16,.45); transition: opacity .7s; pointer-events: none; }
.slide.is-on .sl-img { height: 520px; margin-top: 0; }
.slide.is-on .sl-img::after { opacity: 0; }
.sl-brand { position: absolute; left: 20px; top: 20px; font-size: 28px; line-height: 33px; font-weight: 600; letter-spacing: -1px; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.sl-tags { position: absolute; left: 12px; bottom: 12px; opacity: 0; transition: opacity .5s; }
.sl-tags .chip { border-color: rgba(255,255,255,.85); background: rgba(0,0,0,.15); color: #fff; }
.slide.is-on .sl-tags { opacity: 1; }
.sl-info { padding: 21px 12px 0; transition: opacity .7s; opacity: .45; }
.slide.is-on .sl-info { opacity: 1; }
.sl-client { font-size: 15px; line-height: 22.5px; color: #b9b9b9; }
.sl-head { font-size: 26px; line-height: 32.5px; letter-spacing: -1px; font-weight: 500; color: #c9c9cc; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-head .green { color: var(--metric); }
.sl-desc { font-size: 13.5px; line-height: 21.9px; color: #d8d8d8; margin-top: 4px; }
.sl-ind { display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: 3px; background: #242426; font-size: 14px; line-height: 20px; color: var(--paper); }
.sl-ind span { color: var(--grey); }
.sl-link { display: table; margin-top: 30px; font-size: 14px; line-height: 20px; font-weight: 500; border-bottom: 1px solid currentColor; }
.sl-arrow { position: absolute; z-index: 3; top: 284px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(28,28,32,.9); color: #fff; transition: background-color .2s; }
.sl-arrow:hover { background: #2c2c30; }
.sl-arrow svg { width: 16px; }
.sl-prev { left: 40px; }
.sl-next { right: 40px; }

/* 5. Дъга */
.sec-arc { padding: 160px var(--pad) 0; height: 793px; overflow: hidden; text-align: center; }
.arc { position: relative; height: 552px; margin-top: 64px; }
.pillar h3 { font-size: 30px; line-height: 33px; letter-spacing: -1.2px; font-weight: 400; color: #fff; }
.pillar p { font-size: 16px; line-height: 26px; margin-top: 10px; }
.pillar a { display: inline-block; margin-top: 14px; font-size: 14px; line-height: 20px; font-weight: 500; border-bottom: 1px solid currentColor; }
.p-top { position: absolute; left: 50%; top: 0; width: 378px; transform: translateX(-50%); }
.p-left { position: absolute; left: 49px; top: 385px; width: 333px; }
.p-right { position: absolute; right: 49px; top: 385px; width: 333px; }
.dome { position: absolute; left: 50%; top: 198px; width: 520px; height: 270px; transform: translateX(-50%); }
.dome-ball { position: absolute; left: 12px; top: 12px; width: 495px; height: 495px; border-radius: 50%; background: url("img/kupol.jpg") center/cover; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 52%); mask-image: linear-gradient(180deg, #000 40%, transparent 52%); }
.dome-line { position: absolute; left: 0; top: 0; width: 520px; height: 270px; overflow: visible; }
.comet { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(160,200,255,.9), 0 0 34px 10px rgba(110,160,255,.45); }
.dome-txt { position: absolute; left: 0; right: 0; top: 108px; }
.dome-txt .wordmark { font-size: 30px; line-height: 30px; color: #fff; }
.dome-txt p { font-size: 14px; line-height: 20px; margin-top: 8px; }
.badge-sm { position: static; justify-content: center; margin-top: 14px; height: 32px; text-align: left; }
.badge-sm .badge-ico { width: 32px; height: 32px; }
.badge-sm .badge-txt { font-size: 9px; line-height: 10.5px; color: rgba(255,255,255,.75); }

/* 6. Услуги и 15. FAQ */
.sec-svc { display: flex; gap: 32px; padding: 160px var(--pad); }
.svc-side { flex: 0 0 362px; display: flex; flex-direction: column; align-items: flex-start; }
.svc-side .body { margin-top: 20px; }
.svc-side .btn-line { margin-top: 32px; }
.svc-sticky { position: sticky; top: calc(100vh - 170px); margin-top: 340px; height: 38px; }
.svc-sticky .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.acc { flex: 1; border-top: 1px solid rgba(255,255,255,.1); }
.acc-i { position: relative; display: grid; grid-template-columns: 280px 578px 1fr; column-gap: 24px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); transition: background-color .3s; }
.acc-i.is-open { background: var(--open); }
.acc-b { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: flex-start; text-align: left; padding: 24px 0; width: 100%; }
.acc-t { width: 280px; font-size: 26px; line-height: 32.5px; letter-spacing: -1px; color: var(--paper); }
.acc-b .acc-l { display: none; }
.pm { position: relative; margin-left: auto; width: 16px; height: 16px; margin-top: 8px; color: var(--blue); }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1.3px; background: currentColor; transition: transform .3s; }
.pm::after { transform: rotate(90deg); }
.is-open .pm::after { transform: rotate(0); }
.acc-p { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.acc-p > div { overflow: hidden; padding-top: 30px; }
.is-open .acc-p { grid-template-rows: 1fr; pointer-events: auto; }
.is-open .acc-p > div { padding-bottom: 56px; }
.acc-i:not(.is-open) .acc-p > div { padding-top: 0; }
.acc-lbl { display: block; margin-bottom: 30px; }
.acc-p .body { width: 519px; }
.acc-chips { margin-top: 28px; gap: 8px; }
.sec-svc .acc-i:not(.is-open) .acc-p { visibility: hidden; }

.sec-faq { display: flex; gap: 32px; padding: 80px var(--pad); }
.sec-faq .svc-side { flex-basis: 373px; }
.faq-p { font-size: 16px; line-height: 24px; width: 331px; margin-top: 12px !important; }
.sec-faq .btn-line { margin-top: 32px; height: 36px; }
.faq .acc-i { display: block; }
.faq .acc-t { width: auto; font-size: 26px; line-height: 31.2px; }
.faq .acc-b { padding: 24px 0; }
.faq .acc-p > div { padding-top: 0; }
.faq .is-open .acc-p > div { padding-bottom: 32px; margin-top: -2px; }
.faq .acc-p .body { width: 720px; font-size: 16px; line-height: 24px; }

/* 7, 11. Пикселен преход */
.pix { height: 384px; background: var(--surface); }
.pix canvas { width: 100%; height: 100%; }

/* 8. Ниши */
.sec-brands { padding: 80px 0 128px; overflow: hidden; }
.brands-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 var(--pad); margin-bottom: 48px; }
.lrow { overflow: hidden; }
.lrow + .lrow { margin-top: 6px; }
.lrow-track { display: flex; gap: 12px; width: max-content; padding-right: 12px; animation: slide-l 46s linear infinite; }
.lrow-b .lrow-track { animation-name: slide-r; }
.lcard { display: grid; place-items: center; width: 222px; height: 121px; border-radius: 8px; background: var(--lcard); color: #1b1b1b; }
.w1 { font-family: "label", sans-serif; font-stretch: 125%; font-size: 22px; letter-spacing: 3px; font-weight: 400; }
.w2 { font-size: 30px; font-style: italic; font-weight: 700; letter-spacing: -1px; }
.w3 { font-size: 30px; font-weight: 400; letter-spacing: -1.2px; }
.w4 { font-size: 22px; font-weight: 600; letter-spacing: 4px; }
.brands-all-m { display: none; }

/* 9. Инструменти */
.pin { position: relative; height: 2340px; background: var(--ink); }
.sec-tools { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; }
.tools-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tools-in { position: relative; display: flex; justify-content: space-between; gap: 32px; height: 100%; padding: 0 var(--pad); }
.tools-txt { align-self: center; width: 726px; margin-top: -34px; }
.h-tools { color: #fff; }
.tools-p { font-size: 17px; line-height: 27.6px; color: var(--paper); margin-top: 16px; }
.tools-txt .btn { margin-top: 32px; }
.tools-cards { position: relative; flex: 0 0 602px; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.tools-move { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 8px; will-change: transform; }
.tcard { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 8px; background: rgba(14,14,16,.88); }
.tcard p:not(.lbl) { font-size: 13.5px; line-height: 21.9px; color: var(--paper); margin-top: 10px; max-width: 430px; }
.tlogo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: #f2f2f2; color: var(--ink); font-size: 24px; font-weight: 600; }

/* 10. Отзиви */
.sec-rev { padding: 128px var(--pad); }
.rev-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; }
.rev-all-m { display: none; }
.hscroll { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); cursor: grab; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rcard { flex: 0 0 436px; height: 462px; padding: 28px 26px 26px; display: flex; flex-direction: column; border-radius: 8px; background: #232326; scroll-snap-align: start; }
.rsrc { font-size: 24px; line-height: 20px; font-weight: 600; letter-spacing: -.8px; color: #fff; }
.rcard blockquote { margin-top: 64px; font-size: 18px; line-height: 24px; color: var(--paper); }
.stars { margin-top: 20px; font-size: 15px; letter-spacing: 3px; color: #4a4a4e; }
.rname { margin-top: 10px; font-size: 16px; line-height: 24px; font-weight: 500; }
.rrole { margin-top: 8px; font-size: 15px; line-height: 20px; color: #aeaeae; }
.rlink { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); font-size: 13px; line-height: 17.3px; font-weight: 500; color: rgba(248,248,248,.8); }
.rlink { text-decoration: underline; text-underline-offset: 3px; }

/* 12. Награди */
.sec-awards { display: flex; align-items: center; gap: 40px; height: 120px; padding: 32px 0 32px var(--pad); overflow: hidden; }
.aw-p { flex: 0 0 172px; font-size: 14px; line-height: 21px; }
.aw-p .ph { margin: 4px 0 0; }
.aw-marquee { flex: 1; overflow: hidden; }
.aw-track { display: flex; gap: 64px; width: max-content; padding-right: 64px; animation: slide-l 30s linear infinite; }
.aw { display: grid; place-items: center; width: 90px; height: 56px; border: 1.5px dashed #c9c9c9; border-radius: 6px; font-family: "label", sans-serif; font-stretch: 125%; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #9a9a9a; }
.aw-r { width: 56px; border-radius: 50%; }

/* 13. Глобус */
.sec-globe { position: relative; height: 978px; padding: 64px 44px 0; overflow: hidden; }
.globe-top { display: flex; justify-content: space-between; }
.stats-light .stat { width: 220px; height: 131px; background: #ececec; }
.stats-light .stat-n { color: var(--carbon); }
.globe-wrap { position: absolute; left: 50%; top: 255px; width: 880px; height: 880px; transform: translateX(-50%); }
.globe { width: 880px; height: 880px; }
.regions { position: absolute; left: 150px; right: 150px; top: 620px; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 70px; padding: 24px 20px 0; border-radius: 8px 8px 0 0; background: rgba(242,242,242,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.reg-b { display: flex; justify-content: space-between; width: 100%; text-align: left; pointer-events: none; min-height: 30px; }
.reg-b .lbl { font-size: 12px; line-height: 15px; color: var(--carbon); }
.reg-b i { display: none; }
.reg ul { margin-top: 26px; }
.reg li { font-size: 20px; line-height: 28px; letter-spacing: -.8px; color: var(--blue-d); padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.reg li:first-child { padding-top: 0; }
.more { font-size: 14px; line-height: 16.8px; color: var(--grey); padding-top: 12px; }

/* 14. Статии */
.sec-ins { padding: 128px var(--pad) 80px; overflow: hidden; }
.ins-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.ins-all-m { display: none; }
.ins-row { gap: 12px; }
.icard { flex: 0 0 469px; scroll-snap-align: start; }
.i-img { position: relative; height: 313px; border-radius: 8px; overflow: hidden; }
.i-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.icard:hover .i-img img { transform: scale(1.03); }
.i-img span { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: #fff; font-size: 22px; line-height: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; }
.i-pill { position: absolute; z-index: 1; left: 50%; top: 32px; transform: translateX(-50%); padding: 6px 16px 7px; border-radius: 30px; background: #fff; color: #111; font-size: 20px; line-height: 20px; font-weight: 600; letter-spacing: -.6px; }
.i-dots { position: absolute; left: 44px; top: 92px; width: 46px; height: 10px; background: radial-gradient(circle 4.5px at 5px 5px, transparent 3.4px, rgba(255,255,255,.8) 3.6px, transparent 4.6px) 0 0/18px 10px repeat-x; }
.i-img::after { content: ""; position: absolute; left: 110px; right: 110px; top: 92px; height: 10px; border: 1.3px solid rgba(255,255,255,.75); border-radius: 6px; }
.i-img::before { content: ""; position: absolute; left: 24px; right: 24px; top: 74px; bottom: -1px; border: 1.5px solid rgba(255,255,255,.75); border-bottom: 0; border-radius: 6px 6px 0 0; }
.i-meta { display: flex; align-items: center; gap: 10px; padding: 0 12px; margin-top: 24px; font-size: 12px; line-height: 16px; }
.i-meta .lbl { font-size: 12px; line-height: 15px; }
.i-meta i { font-style: normal; }
.i-t { padding: 0 12px; margin-top: 12px; font-size: 20px; line-height: 25px; letter-spacing: -.8px; }

/* 16. CTA */
.sec-cta { position: relative; height: 283px; overflow: hidden; color: #fff; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-in { position: relative; padding: 52px 64px 0; }
.h-cta { font-size: 64px; line-height: 62.1px; letter-spacing: -1.3px; font-weight: 400; }
.cta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 35px; }
.cta-row p { font-size: 16px; line-height: 24px; color: #f4f4f4; }
.copy { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; color: #fff; }
.copy svg { width: 14px; color: var(--blue); }
.copy.is-done svg { color: var(--metric); }

/* 17. Футър */
.ftr { position: relative; overflow: hidden; background: var(--ink); padding-top: 64px; height: 571px; }
.ftr-mark { position: absolute; left: 418px; top: -9px; width: 979px; height: 915px; }
.ftr-in { position: relative; display: flex; justify-content: space-between; padding: 0 64px; }
.ftr-a { width: 430px; }
.ftr-logo { display: block; font-size: 48px; line-height: 36px; color: #fff; }
.ftr-h { margin-top: 32px; font-size: 12px; line-height: 15px; color: var(--paper); }
.ftr-mail { margin-top: 20px; font-size: 14px; line-height: 20px; }
.ftr-city { margin-top: 12px; font-size: 12px; line-height: 16px; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ftr-tel { margin-top: 12px; font-size: 14px; line-height: 20px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ftr-soc { display: none; }
.ftr-cols { display: flex; gap: 32px; }
.fcol { width: 189px; }
.fcol-h { display: block; font-size: 12px; line-height: 15px; color: var(--paper); text-align: left; pointer-events: none; }
.fcol-h i { display: none; }
.fcol ul { margin-top: 35px; }
.fcol li { margin-bottom: 16.5px; line-height: 18px; }
.fcol a { font-size: 14px; line-height: 18px; color: rgba(255,255,255,.6); transition: color .2s; }
.fcol a:hover { color: #fff; }

/* 18. Финал */
.final { background: var(--ink); }
.final-img { position: relative; height: 415px; overflow: hidden; }
.final-img img { width: 100%; height: 100%; object-fit: cover; }
.final-img::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,14,.28); }
.final-h { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 64px; line-height: 62.1px; letter-spacing: -1.3px; color: #fff; }
.final-bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 91px; padding: 0 64px 0 74px; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); }
.final-soc { display: flex; gap: 32px; }
.final-soc svg, .ftr-soc svg { width: 18px; }
.legal { justify-self: end; display: flex; gap: 20px; }
.legal a, .legal button { font-size: 12px; line-height: 16px; color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }

/* Кръгъл бутон */
.ring { position: fixed; z-index: 35; left: 40px; bottom: 140px; width: 92px; height: 92px; border-radius: 50%; background: var(--ink); border: 1.5px solid rgba(255,255,255,.85); color: #fff; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s, transform .3s; }
.ring.is-on { opacity: 1; visibility: visible; }
.ring:hover { transform: scale(1.05); }
.ring-txt { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; }
.ring-txt text { font-family: "sans", sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 2.6px; fill: #fff; }
.ring-mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -1px; }
.ring-mark img { width: 46px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Телефон и таблет: хедърът сменя вида си под 1024 */
/* Лаптопи: колоните на статистиката и услугите са за 1440 px и иначе се режат отдясно */
@media (min-width: 1024px) and (max-width: 1439px) {
  .stats-row { gap: 24px; }
  .stats { flex: 1; min-width: 0; }
  .stat { flex: 1; width: auto; min-width: 0; padding: 24px 16px; }
  .stat-n { font-size: 30px; line-height: 34px; letter-spacing: -1px; }
  .stats-p { width: 320px; }
  .svc-side, .sec-faq .svc-side { flex-basis: 280px; }
  .acc { min-width: 0; }
  .acc-i { grid-template-columns: 220px minmax(0, 1fr) 16px; }
  .acc-t { width: 220px; }
  .acc-p .body { width: auto; }
}
/* Тесен лаптоп: значката и менюто се събират, за да не се застъпват */
@media (min-width: 1024px) and (max-width: 1200px) {
  .hdr-bar > .badge { left: 160px; gap: 6px; }
  .hdr-bar > .badge .badge-txt { letter-spacing: .8px; }
  .nav { margin-right: 12px; }
  .nav-pill { gap: 2px; }
  .nav-pill a { padding: 4px 8px; }
}

@media (max-width: 1023px) {
  .hdr-bar, .mega { display: none; }
  .mbar { display: flex; align-items: center; gap: 16px; margin: 12px 12px 0; padding: 11px 12px; border-radius: 2px; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .3s; }
  .mbar .logo .wordmark { font-size: 21px; line-height: 15px; color: #fff; }
  .burger { position: relative; width: 20px; height: 32px; display: flex; flex-direction: column; justify-content: center; gap: 3.5px; }
  .burger span { display: block; width: 16px; height: 1.5px; background: var(--paper); transition: transform .3s, opacity .3s, background-color .3s; }
  .btn-mbar { margin-left: auto; height: 32px; padding: 0 24px; font-size: 12px; line-height: 13.2px; }
  .hdr.is-menu .mbar { background: #fff; }
  .hdr.is-menu .mbar .wordmark { color: var(--carbon); }
  .hdr.is-menu .burger span { background: var(--carbon); }
  .hdr.is-menu .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .hdr.is-menu .burger span:nth-child(2) { opacity: 0; }
  .hdr.is-menu .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .hdr.is-menu .btn-mbar { background: var(--carbon); color: #fff; }
  .mmenu { display: block; margin: 0 12px; padding: 24px 20px 40px; background: var(--ink); border-radius: 0 0 2px 2px; }
  .mmenu[hidden] { display: none; }
  .mm-view { display: none; }
  .mm-view.is-on { display: block; animation: mm-in .35s ease; }
  @keyframes mm-in { from { opacity: 0; transform: translateX(12px); } }
  .mm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; font-size: 22px; line-height: 30px; letter-spacing: -.6px; color: #fff; text-align: left; }
  .mm-item i { margin-left: auto; width: 9px; height: 9px; border-right: 1.5px solid #fff; border-top: 1.5px solid #fff; transform: rotate(45deg); }
  .mm-lang svg { width: 22px; }
  .mm-all { margin-top: 26px; height: 46px; font-size: 16px; padding: 0 30px; }
  .mm-back { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: "label", sans-serif; font-stretch: 125%; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.7); }
  .mm-back::before { content: ""; width: 7px; height: 7px; border-left: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg); }
}

@media (max-width: 767px) {
  :root { --pad: 12px; }
  .h2 { font-size: 24px; line-height: 26.4px; letter-spacing: -1px; }
  .body { font-size: 14px; line-height: 21px; }
  .btn { height: 32px; font-size: 12px; line-height: 13.2px; }
  .ph { font-size: 8px; padding: 2px 5px 1px; margin-left: 6px; }

  .hero { min-height: 100svh; }
  .hero-row { padding: 0 20px; }
  .h-hero { font-size: 27px; line-height: 29.7px; letter-spacing: -.5px; margin-bottom: 20px; }
  .see-work { display: none; }
  .hero-logos { height: 100px; margin-top: 0; padding: 0; }
  .hero-logos p { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .pl { margin: 0 22px; }
  .pl-a { font-size: 17px; } .pl-b { font-size: 15px; } .pl-c { font-size: 18px; } .pl-d { font-size: 12px; }

  .sec-stats { height: auto; padding: 48px 20px; }
  .stats-row { flex-direction: column; gap: 32px; margin-top: 24px; }
  .stats { gap: 6px; }
  .stat { width: auto; flex: 1 1 0; height: 76px; padding: 8px; border-radius: 4px; }
  .stat .lbl { font-size: 9px; line-height: 10.8px; min-height: 22px; align-items: flex-start; }
  .stat-n { font-size: 20px; line-height: 20px; letter-spacing: -.8px; }
  .stats-p { width: auto; font-size: 14px; line-height: 21px; }

  .sec-work { height: auto; padding: 48px 0; }
  .work-top { justify-content: center; text-align: center; padding: 0 20px; }
  .work-all { display: none; }
  .work-lbl { padding: 0 20px; margin-top: 28px; }
  .work-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 20px; margin-top: 10px; }
  .work-filters::-webkit-scrollbar { display: none; }
  .work-filters .chip { flex: none; }
  .slider { margin-top: 20px; touch-action: pan-y; }
  .slide { flex: 0 0 289px; }
  .sl-img, .slide.is-on .sl-img { height: 347px; margin-top: 0; }
  .sl-brand { font-size: 22px; left: 12px; top: 12px; }
  .sl-tags { display: none; }
  .sl-info { padding: 20px 8px 0; }
  .sl-client { font-size: 13px; line-height: 19.5px; }
  .sl-head { font-size: 20px; line-height: 24px; letter-spacing: -.8px; margin-top: 8px; white-space: normal; }
  .sl-desc { font-size: 13px; line-height: 19.5px; }
  .sl-ind { font-size: 12px; line-height: 16px; margin-top: 12px; }
  .sl-link { display: none; }
  .sl-arrow { display: none; }
  .work-all-m { display: flex; width: max-content; margin: 36px auto 0; padding: 0 25px; }

  .sec-arc { height: 495px; padding: 48px 20px 0; }
  .arc-h { max-width: 300px; margin: 0 auto; }
  .arc { height: 368px; margin-top: 36px; }
  .pillar { position: absolute; top: 0; width: 218px; left: 50%; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s; }
  .pillar h3 { font-size: 20px; line-height: 22px; letter-spacing: -.8px; }
  .pillar p { font-size: 12px; line-height: 18px; margin-top: 8px; }
  .pillar a { font-size: 13px; line-height: 19.5px; margin-top: 12px; }
  .pillar.pos-0 { transform: translate(-50%, 0); opacity: 1; }
  .pillar.pos-1 { transform: translate(calc(-50% + 224px), 106px); opacity: .7; }
  .pillar.pos-2 { transform: translate(calc(-50% - 224px), 106px); opacity: .7; }
  .p-left, .p-right, .p-top { right: auto; }
  .dome { top: 152px; width: 357px; height: 186px; left: 50%; }
  .dome-ball { left: 0; top: 0; width: 357px; height: 357px; }
  .dome-line { width: 357px; height: 186px; }
  .dome-txt { top: 70px; }
  .dome-txt .wordmark { font-size: 22px; line-height: 22px; }
  .dome-txt p { font-size: 10px; line-height: 15px; margin-top: 4px; }
  .badge-sm { margin-top: 8px; height: 26px; }
  .badge-sm .badge-ico { width: 26px; height: 26px; }
  .badge-sm .badge-txt { font-size: 7px; line-height: 8.5px; }

  .sec-svc, .sec-faq { flex-direction: column; gap: 0; padding: 48px 12px; }
  .svc-side { flex: none; }
  .svc-side .body { margin-top: 12px; }
  .svc-side .btn-line { margin-top: 22px; height: 38px; padding: 0 25px; }
  .svc-sticky { display: none; }
  .acc { margin-top: 38px; }
  .acc-i { display: block; padding: 0 12px; }
  .acc-b { padding: 24px 0; }
  .acc-t { width: auto; font-size: 18px; line-height: 18px; letter-spacing: -.7px; padding-right: 24px; }
  .acc-t br { display: none; }
  .pm { margin-top: 1px; }
  .acc-p > div { padding-top: 0 !important; }
  .is-open .acc-p > div { padding-bottom: 28px; }
  .acc-lbl { font-size: 12px; line-height: 15px; letter-spacing: -.1px; margin: -4px 0 14px; }
  .acc-p .body { width: auto; font-size: 14px; line-height: 21px; }
  .acc-chips { margin-top: 14px; }
  .chip-f { font-size: 12px; line-height: 16px; }
  .sec-faq .acc { margin-top: 38px; }
  .sec-faq .svc-side { flex-basis: auto; }
  .faq-p { width: auto; font-size: 14px; line-height: 21px; }
  .sec-faq .btn-line { margin-top: 22px; height: 32px; }
  .faq .acc-b { padding: 24px 0 16px; }
  .faq .acc-t { font-size: 16px; line-height: 18.4px; letter-spacing: -.2px; }
  .faq .acc-p .body { width: auto; font-size: 14px; line-height: 21px; }
  .faq .is-open .acc-p > div { padding-bottom: 24px; }

  .pix { height: 104px; }

  .sec-brands { padding: 48px 0; text-align: center; }
  .brands-top { justify-content: center; margin-bottom: 24px; padding: 0 32px; }
  .brands-top .btn { display: none; }
  .lcard { width: 101px; height: 55px; border-radius: 4px; }
  .lrow-track { gap: 6px; padding-right: 6px; }
  .w1 { font-size: 10px; letter-spacing: 1.5px; } .w2, .w3 { font-size: 15px; letter-spacing: -.4px; } .w4 { font-size: 10px; letter-spacing: 2px; }
  .brands-all-m { display: inline-flex; margin-top: 24px; }

  .pin { height: auto; }
  .sec-tools { position: relative; height: auto; min-height: 0; padding: 96px 20px 64px; }
  .tools-in { flex-direction: column; gap: 48px; padding: 0; }
  .tools-txt { width: auto; margin: 0; }
  .h-tools { font-size: 28px; line-height: 30.8px; letter-spacing: -1.1px; }
  .tools-p { font-size: 17px; line-height: 27.6px; }
  .tools-cards { flex: none; height: auto; -webkit-mask-image: none; mask-image: none; }
  .tools-move { position: static; gap: 4px; transform: none !important; }
  .tcard { padding: 15px; gap: 12px; }
  .tcard .lbl { font-size: 9px; line-height: 11px; letter-spacing: -.1px; }
  .tcard p:not(.lbl) { font-size: 12px; line-height: 18px; margin-top: 6px; }
  .tlogo { width: 38px; height: 38px; font-size: 18px; }

  .sec-rev { padding: 48px 12px; }
  .rev-top { margin-bottom: 24px; }
  .rev-all { display: none; }
  .rcard { flex: 0 0 291px; height: 355px; padding: 20px 16px 16px; }
  .rsrc { font-size: 18px; }
  .rcard blockquote { margin-top: 40px; font-size: 12px; line-height: 18px; }
  .stars { font-size: 13px; margin-top: 16px; }
  .rname { font-size: 14px; line-height: 20px; margin-top: 6px; }
  .rrole { font-size: 12px; line-height: 16px; margin-top: 6px; }
  .rlink { font-size: 12px; line-height: 16px; }
  .rev-all-m { display: inline-flex; margin-top: 22px; }

  .sec-awards { height: 44px; padding: 4px 0 4px 12px; gap: 12px; }
  .aw-p { flex-basis: 120px; font-size: 12px; line-height: 18px; }
  .aw-p .ph { display: none; }
  .aw { width: 58px; height: 36px; }
  .aw-r { width: 36px; }
  .aw-track { gap: 26px; }

  .sec-globe { height: auto; padding: 64px 12px 0; }
  .globe-top { flex-direction: column; gap: 22px; }
  .stats-light { gap: 4px; }
  .stats-light .stat { height: 62px; padding: 8px; }
  .globe-wrap { position: relative; left: auto; top: auto; transform: none; width: 380px; max-width: 100%; height: 380px; margin: 66px auto 0; }
  .globe { width: 100%; height: auto; aspect-ratio: 1; }
  .regions { position: relative; left: auto; right: auto; top: auto; display: block; margin: -150px 0 0; padding: 0 20px 12px; border-radius: 8px 8px 0 0; }
  .reg { border-bottom: 1px solid rgba(0,0,0,.08); }
  .reg:last-child { border-bottom: 0; }
  .reg-b { pointer-events: auto; align-items: center; padding: 14px 0; min-height: 41px; }
  .reg-b .lbl { font-size: 11px; line-height: 13.2px; }
  .reg-b .lbl br { display: none; }
  .reg-b i { display: block; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 1.3px solid var(--carbon); border-bottom: 1.3px solid var(--carbon); transform: rotate(45deg); transition: transform .3s; }
  .reg.is-open .reg-b i { transform: rotate(-135deg); margin-top: 4px; }
  .reg ul, .reg .more { display: none; }
  .reg.is-open ul, .reg.is-open .more { display: block; }
  .reg ul { margin-top: 0; }
  .reg li { font-size: 16px; line-height: 24px; letter-spacing: -.2px; padding: 10px 0; }
  .more { padding-bottom: 12px; }

  .sec-ins { padding: 48px 12px; }
  .ins-top { margin-bottom: 24px; }
  .ins-all { display: none; }
  .icard { flex-basis: 267px; }
  .i-img { height: 178px; border-radius: 6px; }
  .i-img span { font-size: 13px; line-height: 15px; bottom: 18px; }
  .i-img::before { left: 14px; right: 14px; top: 44px; }
  .i-pill { top: 14px; font-size: 13px; line-height: 13px; padding: 4px 10px 5px; }
  .i-dots { left: 24px; top: 54px; transform: scale(.7); transform-origin: left; }
  .i-img::after { left: 70px; right: 70px; top: 54px; height: 7px; }
  .i-meta { padding: 0 4px; margin-top: 20px; }
  .i-meta .lbl { font-size: 11px; line-height: 13.2px; }
  .i-t { padding: 0 4px; margin-top: 10px; font-size: 18px; line-height: 18px; letter-spacing: -.7px; }
  .ins-all-m { display: inline-flex; margin-top: 30px; }

  .sec-cta { height: 237px; }
  .cta-in { padding: 48px 12px 0; }
  .h-cta { font-size: 28px; line-height: 30.8px; letter-spacing: -.3px; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 14px; }
  .cta-row p { font-size: 14px; line-height: 21px; }
  .copy { font-size: 14px; line-height: 20px; }

  .ftr { height: auto; padding: 40px 0 48px; }
  .ftr-mark { left: -390px; top: 132px; width: 858px; height: 802px; }
  .ftr-in { flex-direction: column; padding: 0 20px; }
  .ftr-a { width: auto; }
  .ftr-logo { font-size: 46px; }
  .ftr-h { margin-top: 24px; font-size: 11px; line-height: 16.5px; letter-spacing: 1.7px; color: rgba(255,255,255,.6); }
  .ftr-mail { margin-top: 20px; font-size: 15px; line-height: 21.4px; }
  .ftr-city { font-size: 11px; line-height: 15.7px; letter-spacing: 1px; margin-top: 18px; }
  .ftr-tel { margin-top: 18px; }
  .ftr-soc { display: flex; gap: 12px; margin-top: 24px; }
  .ftr-soc a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.12); }
  .ftr-cols { flex-direction: column; gap: 0; margin-top: 40px; }
  .fcol { width: auto; }
  .fcol-h { display: flex; align-items: center; gap: 8px; pointer-events: auto; padding: 8px 0; font-family: "sans", sans-serif; font-size: 13px; line-height: 19.5px; font-weight: 500; letter-spacing: 0; color: #fff; }
  .fcol-h i { display: block; width: 6px; height: 6px; border-right: 1.3px solid #fff; border-bottom: 1.3px solid #fff; transform: rotate(45deg); margin-top: -3px; transition: transform .3s; }
  .fcol.is-open .fcol-h i { transform: rotate(-135deg); margin-top: 3px; }
  .fcol ul { display: none; margin: 14px 0 8px; }
  .fcol.is-open ul { display: block; }
  .fcol a br { display: none; }

  .final-img { height: 156px; }
  .final-h { font-size: 28px; line-height: 30.8px; letter-spacing: -.3px; }
  .final-bar { display: block; height: 88px; padding: 22px 20px 0; }
  .final-soc { display: none; }
  .legal { justify-self: auto; margin-top: 12px; gap: 20px; }

  .ring { left: 12px; bottom: 124px; width: 72px; height: 72px; }
  .ring-txt text { font-size: 10px; }
  .ring-mark { font-size: 26px; }
}

/* Таблет 768–1023: образецът подрежда колоните една под друга */
@media (min-width: 768px) and (max-width: 1023px) {
  .sec-stats { height: auto; padding-bottom: 80px; }
  .stats-row { flex-direction: column; }
  .stats .stat { width: auto; flex: 1 1 0; }
  .stats-p { width: auto; max-width: 600px; }
  .sec-svc, .sec-faq { padding-left: 32px; padding-right: 32px; }
  .svc-side { flex-basis: 283px; }
  .sec-faq .svc-side { flex-basis: 283px; }
  .acc-i { grid-template-columns: 220px 1fr 0; column-gap: 24px; padding: 0 16px; }
  .acc-t { width: 220px; }
  .acc-p .body, .faq .acc-p .body { width: auto; }
  .acc-chips { flex-direction: column; align-items: flex-start; }
  .pix { height: 267px; }
  .tools-txt { width: 420px; }
  .tools-cards { flex-basis: 440px; }
  .globe-top { flex-direction: column; gap: 32px; }
  .regions { left: 44px; right: 44px; gap: 24px; top: 700px; }
  .globe-wrap { top: 330px; }
  .sec-globe { height: 1035px; }
  .ftr { height: auto; padding-bottom: 64px; }
  .ftr-in { flex-direction: column; gap: 48px; }
  .ftr-cols { gap: 24px; }
  .p-left { left: 0; } .p-right { right: 0; }
  .p-left, .p-right { width: 260px; }
}

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