/* Кожа на новата визия (тъмна, цветовете на платформите) върху старите вътрешни страници.
   Зарежда се след site.css; сменя токените, не разметката. Началната, Product, Integrations и Pricing ползват home/home.css. */
:root, [data-surface="dark"] {
  --bg: #080b13; --bg-2: #0c1120; --bg-3: #101727;
  --text: #f3f5fa; --text-2: #a7afc1; --text-3: #8a92a8;
  --line: rgb(255 255 255 / .09); --line-2: rgb(255 255 255 / .16);
  --fill: rgb(255 255 255 / .05); --fill-2: rgb(255 255 255 / .09);
  --glass: rgb(13 18 30 / .72);
  --lav: #8ab4ff; --lav-2: #6aa0ff; --lav-3: #4285f4; --lav-ink: #ffffff; --lav-rgb: 66 133 244;
  --accent-text: #4b9bff;
  --card: #101727; --card-ink: #f3f5fa; --card-2: #a7afc1; --card-line: rgb(255 255 255 / .09);
  --t-mint: rgb(52 168 83 / .16); --t-mint-i: #7ee2a0;
  --t-lav: rgb(66 133 244 / .16); --t-lav-i: #8ab4ff;
  --t-peach: rgb(251 188 5 / .14); --t-peach-i: #ffd666;
  --t-lime: rgb(124 179 66 / .16); --t-lime-i: #b6e388;
  --t-sky: rgb(66 133 244 / .14); --t-sky-i: #9cc3ff;
  --t-rose: rgb(234 67 53 / .16); --t-rose-i: #ff9e94;
  --good: #7ee2a0; --bad: #ff8a80;
  --display: "Onest", system-ui, sans-serif;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40vw 30vw at 85% -5%, rgb(66 133 244 / .22), transparent 70%), radial-gradient(30vw 24vw at 105% 40%, rgb(234 67 53 / .10), transparent 70%), radial-gradient(34vw 26vw at -5% 90%, rgb(52 168 83 / .08), transparent 70%); }
.display, .hero h1, .phead h1 { font-family: "Onest", system-ui, sans-serif; font-weight: 700; letter-spacing: -.05em; }
.btn-primary { background: #1870ec; color: #fff; box-shadow: 0 12px 30px -12px rgb(24 119 242 / .9), inset 0 1px 0 rgb(255 255 255 / .25); }
.btn-primary .btn-ico { background: rgb(255 255 255 / .18); color: #fff; }
.btn-primary:hover { background: #2a86ff; }
.tag.dim { background: rgb(255 255 255 / .07); color: var(--text-2); }
.fcard .btn-ghost { color: var(--card-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
::selection { background: #4285f4; color: #fff; }
:focus-visible { outline-color: #4285f4; }
/* места със зададен бял фон в site.css */
.paper .stat, .paper .fnode { background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); }
.draft-note { background: rgb(251 188 5 / .10); box-shadow: inset 3px 0 0 #fbbc05; color: var(--text-2); }
.draft-note strong { color: #ffc59a; }
.kv b.up { color: #4fd18b; }
.ftool input[type=text], .ftool input[type=number], .ftool select, .ftool textarea { background: var(--bg-2); border-color: var(--line-2); color: var(--text); }
.ftool-out .btn, .ftool-actions .btn { background: var(--fill); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.ftool-out .btn:hover, .ftool-actions .btn:hover { background: var(--fill-2); }
.ftool-out textarea, .ftool-svg, .ftool-table thead th, .u-prev { background: var(--bg-2); color: var(--text); }
.ftool-svg .dot { fill: #f3f5fa; stroke: #080b13; }
.ba { background: var(--bg-3); }
.ba-before { background: rgb(234 67 53 / .10); }
.nav-pill .btn-primary, [data-surface="dark"] .btn-primary, .btn-primary { background: #1870ec; color: #fff; box-shadow: 0 10px 26px -12px rgb(24 119 242 / .9); }
.nav-pill .btn-primary .btn-ico, [data-surface="dark"] .btn-primary .btn-ico { background: rgb(255 255 255 / .18); color: #fff; }
.btn-dark { background: #f3f5fa; color: #0b0f19; }

/* ---------- hero с визия ---------- */
.phead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.phead-v { padding-bottom: clamp(40px, 6vw, 80px); }
.hv { position: relative; perspective: 1400px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.hv-win { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 50px 100px -40px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 255 255 / .14), 0 40px 120px -50px rgb(66 133 244 / .6); transform: rotateY(-9deg) rotateX(5deg); transform-origin: center; animation: hvIn 1.1s cubic-bezier(.16,1,.3,1) both; }
.hv-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: #eef0f4; border-bottom: 1px solid #dfe2e8; }
.hv-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }.hv-bar i:nth-child(2) { background: #febc2e; }.hv-bar i:nth-child(3) { background: #28c840; }
.hv-bar span { margin-left: 10px; font: 500 11px "Onest", sans-serif; color: #5c6478; }
.hv-win > img { display: block; width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@keyframes hvIn { from { opacity: 0; translate: 0 40px; } }
.hv-chip { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: var(--r-md); background: #fff; color: #0d1220; font: 600 13px/1.2 "Onest", sans-serif; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .9); white-space: nowrap; animation: hvPop .8s cubic-bezier(.34,1.56,.64,1) both, hvBob 4.5s ease-in-out 1s infinite alternate; }
.hv-chip img { width: 20px; height: 20px; }
.hv-chip.c1 { left: -4%; top: -6%; animation-delay: .5s, 1.3s; }
.hv-chip.c2 { right: -3%; bottom: -7%; animation-delay: .7s, 1.6s; }
@keyframes hvPop { from { opacity: 0; scale: .7; } }
@keyframes hvBob { to { translate: 0 -10px; } }
/* интеграция: лого - жица - нашият знак */
.hv-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; padding: 60px 20px; border-radius: var(--r-xl); background: radial-gradient(60% 80% at 50% 50%, #13203d, #0b1120 70%); border: 1px solid var(--line); }
.hv-node { position: relative; display: grid; justify-items: center; gap: 10px; }
.hv-node > img, .hv-node > svg, .hv-node > b { width: 112px; height: 112px; padding: 22px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .9); display: grid; place-items: center; font: 700 34px "Onest"; color: #0b0f19; }
.hv-us > svg { background: #0b0f19; box-shadow: 0 0 0 1px var(--line-2), 0 0 70px rgb(66 133 244 / .45); }
.hv-node small { color: var(--text-2); font: 600 13px "Onest"; }
.hv-ring { position: absolute; top: 0; left: 50%; width: 112px; height: 112px; margin-left: -56px; border-radius: var(--r-xl); border: 2px solid rgb(66 133 244 / .5); animation: hvRing 2.8s ease-out infinite; }
.hv-us .hv-ring { animation-delay: 1.4s; }
@keyframes hvRing { to { scale: 1.6; opacity: 0; } }
.hv-wire { width: 100%; height: 40px; }
.hv-wire path { stroke: url(#none); stroke: #4285f4; stroke-width: 3; stroke-dasharray: 8 10; fill: none; animation: hvFlow 1.2s linear infinite; }
@keyframes hvFlow { to { stroke-dashoffset: -36; } }
.hv-link .hv-chip.c1 { left: 6%; top: -18px; } .hv-link .hv-chip.c2 { right: 6%; bottom: -18px; }
/* снимка */
.hv-photo { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 50px 100px -40px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 255 255 / .12); animation: hvIn 1.1s cubic-bezier(.16,1,.3,1) both; }
.hv-photo > img { width: 100%; height: 100%; object-fit: cover; animation: hvKb 14s ease-in-out infinite alternate; }
@keyframes hvKb { to { scale: 1.08; } }
.hv-photo .hv-chip.c1 { left: 16px; top: auto; bottom: 16px; }
@media (max-width: 960px) { .phead-grid { grid-template-columns: 1fr; } .hv-chip.c1 { left: 0; } .hv-chip.c2 { right: 0; } .hv-node > img, .hv-node > svg, .hv-node > b { width: 84px; height: 84px; padding: 16px; } .hv-ring { width: 84px; height: 84px; margin-left: -42px; } }
@media (prefers-reduced-motion: reduce) { .hv *, .hv { animation: none !important; } }

/* ---------- ефекти навсякъде ---------- */
.fx-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853); pointer-events: none; }
.link-card, .fcard, .card, .bezel-core, .ftool, .mod { position: relative; }
.link-card::after, .fcard::after, .card::after, .bezel-core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .08), transparent 45%); }
.link-card:hover::after, .fcard:hover::after, .card:hover::after, .bezel-core:hover::after { opacity: 1; }
.link-card { transition: translate .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.link-card:hover { translate: 0 -4px; box-shadow: 0 26px 50px -26px rgb(66 133 244 / .7); }
.stat { border-top: 3px solid transparent; border-image: linear-gradient(90deg, #4285f4, #34a853) 1; }
.stats .stat:nth-child(4n+2) { border-image: linear-gradient(90deg, #ea4335, #fbbc05) 1; }
.stats .stat:nth-child(4n+3) { border-image: linear-gradient(90deg, #fbbc05, #34a853) 1; }
.stats .stat:nth-child(4n+4) { border-image: linear-gradient(90deg, #34a853, #4285f4) 1; }
.sec:not(.paper) .stat .n, .paper .stat .n { background: linear-gradient(90deg, #fff, #9cc3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats .stat:nth-child(4n+2) .n { background-image: linear-gradient(90deg, #fff, #ff9e94); }
.stats .stat:nth-child(4n+3) .n { background-image: linear-gradient(90deg, #fff, #ffd666); }
.stats .stat:nth-child(4n+4) .n { background-image: linear-gradient(90deg, #fff, #7ee2a0); }

/* ===== global fixes (deep pages): header = home header, tap targets, min text, contrast ===== */
.nav-pill { width: min(1240px, 100%); border-radius: var(--r-lg); padding: 8px 8px 8px 14px; gap: 24px; background: rgb(13 18 30 / .72); box-shadow: inset 0 0 0 1px var(--line); }
.nav-pill .brand { font: 700 19px/1 "Onest", system-ui, sans-serif; letter-spacing: -.04em; gap: 10px; }
.nav-pill .brand img { width: 30px; height: 30px; }
.nav-pill .brand b { font-weight: 400; color: var(--text-2); }
.nav-links { margin: 0 auto; gap: 14px; }
.nav-links > a, .nav-top { border-radius: var(--r-md); font-size: 14.5px; }
.nav-cta { min-height: 44px; }
.burger { width: 44px; height: 44px; border-radius: var(--r-md); }
.burger i { left: 14px; right: 14px; }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
@media (max-width: 900px) { .nav-pill { width: 100%; } .nav-links { margin: 0; gap: 6px; } }
.skip:focus { background: #fff; color: #0b0f19; }
/* tap targets */
.foot-cols a, .foot-cols div a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
.foot-cols div h3 a { display: inline-flex; min-height: 44px; align-items: center; }
.foot-bot a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
.faq summary { min-height: 44px; }
.tab { min-height: 44px; }
.toggle button, .billing button { min-height: 44px; }
.tool { min-height: 44px; }
input[type=range] { height: 44px; background: transparent; margin: 0; }
/* minimum 12px text */
html .gi-chip em { font-size: 12px; letter-spacing: .06em; padding: 3px 6px; }
.ad .chip span, .stage .pill, .variants .ad h4, .variants .ad .ad-h, .kpi-b .dt, .trow .tag, .hv-bar span, .fk { font-size: 12px; }
.ftool-svg .ax text, .ftool-svg .ax-t { font-size: 12px; }
@media (max-width: 760px) { html .gi-chip { font-size: 12px; } }
.nav-pill .brand { min-height: 44px; }
.nav-top, .nav-links > a { min-height: 44px; display: inline-flex; align-items: center; }
.mega li a, .mega .mega-all { min-height: 44px; display: flex; align-items: center; }
.mega .mega-group { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
.foot-brand .brand { min-height: 44px; }
.sec-row h2 a { display: inline-flex; align-items: center; min-height: 44px; }
.tool input { width: 24px; height: 24px; }
html .st-stage .t,html .st-stage .t i,html .aw-bar span{font-size:12px}
/* ROASfinity brand colours from the logo (light blue, blue, violet), added next to the platform colours */
:root { --bc: #22c3ff; --bb: #2f6bff; --bv: #7b3dff; --bm: #c45cff; }
html .nav-pill .btn-primary, html [data-surface="dark"] .btn-primary, html .btn-primary { background: linear-gradient(100deg, #2f6bff 0%, #5b4dff 55%, #7b3dff 100%); color: #fff; box-shadow: 0 10px 26px -12px rgb(91 77 255 / .85), inset 0 1px 0 rgb(255 255 255 / .25); }
html .btn-primary:hover { background: linear-gradient(100deg, #3d78ff 0%, #6a5cff 55%, #8a50ff 100%); }
html .fx-progress { background: linear-gradient(90deg, var(--bc), var(--bb), var(--bv), #ea4335, #fbbc05, #34a853); }
html .stat { border-image: linear-gradient(90deg, var(--bc), var(--bb), var(--bv), #34a853) 1; }
/* Footer v2: brand column beside the product columns, denser links, group colours from the brand palette */
.foot-top { grid-template-columns: minmax(240px, 300px) 1fr; gap: 28px clamp(32px, 5vw, 72px); align-items: start; }
.foot-top > .foot-cols-2 { grid-column: 1 / -1; }
.foot-brand p { font-size: 14.5px; line-height: 1.6; }
.foot-brand .fine { font-size: 12.5px; }
.foot-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.foot-ask { font-size: 13.5px; color: #8fb4ff; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.foot-ask:hover { color: #fff; }
.foot-cols h3 { min-height: 32px; margin-bottom: 8px; }
.foot-cols h3 a { display: inline-flex; align-items: center; gap: 8px; }
.foot-cols h3 i { width: 8px; height: 8px; border-radius: 2px; background: var(--hue, #2f6bff); box-shadow: 0 0 10px var(--hue, #2f6bff); }
.fg-measure { --hue: #22c3ff; } .fg-create { --hue: #c45cff; } .fg-launch { --hue: #2f6bff; } .fg-operate { --hue: #34a853; }
.foot-cols-2 { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) {
  .foot-cols a, .foot-cols div a { min-height: 34px; }
  footer .foot-cols div a { padding-block: 5px; }
}
@media (max-width: 1000px) { .foot-top { grid-template-columns: 1fr; } }
.hv-chip .hv-ic { flex: none; }