/* ===== mAIk preview: "Apple / iOS" look. Loaded after site.css, only in maik-preview-elegancki =====
   A = hero headline stays in Anton, rest new style. B = everything in Inter. */
:root {
  --bg: #040807; --bg-2: #060c0a; --txt: #F2F5F3; --dim: #9db7b1; --mute: #6f8b85;
  --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.12);
  --glass-bg: rgba(255,255,255,0.04); --teal: #5EEAD4; --green: #0b3d33;
  --soft: cubic-bezier(0.16, 1, 0.3, 1);
}
html, body { background: #040807; }
body { color: var(--txt); }

/* background: near black, soft glows per section, no grid / network */
.bg { background: #040807 !important; }
.bg::after, .sidenet, .hero-vid::after { display: none !important; }
main > section { position: relative; isolation: isolate; }
main > section::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px 460px at 12% 22%, rgba(11,61,51,0.55), transparent 70%), radial-gradient(520px 380px at 88% 78%, rgba(202,255,0,0.08), transparent 70%); }
main > section:nth-of-type(even)::before { background: radial-gradient(620px 440px at 86% 24%, rgba(11,61,51,0.55), transparent 70%), radial-gradient(520px 380px at 14% 80%, rgba(202,255,0,0.075), transparent 70%); }
.hero-vid video.on { opacity: 0.32; mix-blend-mode: screen; }

/* typography: Inter, sentence case, tight tracking */
.display, .case h3, .quiz h3, .pm-box h3, .bk-done h4.display { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600; text-transform: none !important; letter-spacing: -0.025em; }
.h2, .display.h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }
.mo h2.words { padding-block: 0.04em; }
.hero h1.display { font-size: clamp(44px, 7vw, 96px); line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; }
[data-v="a"] .hero h1.display { font-family: 'Anton', 'Impact', sans-serif !important; text-transform: uppercase !important; font-weight: 400; letter-spacing: 0.3px; line-height: 1.12; font-size: clamp(52px, 9.2vw, 132px); }
.case h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.quiz h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
p, .lead, .sub, .case-lead, .cg p, .svc p, .pr p, .faq details p { color: var(--dim); font-weight: 400; }
.lead, .hero .sub, .case-lead { max-width: 640px; }
.about-tx p { max-width: 640px; }
.kicker { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--teal); }
.kicker::before { display: none; }
/* highlights: colour only, no shine, no blocks */
.hl, .hl.shine, .hl .w, .hl.split.shine .w { background: none !important; -webkit-text-fill-color: currentColor !important; animation: none !important; color: var(--lime) !important; }
.ph-b .hl, .h2 .hl { color: var(--lime) !important; }
strong { font-weight: 600; }

/* glass cards */
.svc, .pain, .case, .calc, .quiz, .faq details, .cg, .case-feats li, .facts, .f-cta, .pwin, .prow, .app, .kpi, .card-s, .calc-k, .about-badge, .md-phone, .bk-box, .pm-box, .direct, .contact .c-side > div, .tabs:not(.stories) {
  background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line) !important; box-shadow: none !important; }
.svc, .case, .calc, .quiz, .f-cta, .facts, .app, .pwin { border-radius: 24px; }
.pain, .faq details, .cg, .case-feats li, .calc-k, .kpi, .card-s { border-radius: 20px; }
.mo .pstage .pain { background: rgba(14,26,22,0.88) !important; }
.svc .ico, .pain .ico, .prow .ico { background: rgba(255,255,255,0.06) !important; color: var(--lime); box-shadow: none !important; }
.svc .num { font-family: 'Inter', sans-serif; font-weight: 200; color: rgba(255,255,255,0.10); letter-spacing: -0.04em; }
.pr .n { font-family: 'Inter', sans-serif; font-weight: 300; background: var(--glass-bg); border: 1px solid var(--line); }
.pr .when, .stage-fade { border-color: var(--line); }
.case-tag span, .tag { background: rgba(255,255,255,0.05) !important; border-color: var(--line) !important; }

/* buttons: pills */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; }
.btn-lime { background: #CAFF00; color: #06100c; box-shadow: none !important; }
.btn-lime:hover { box-shadow: 0 8px 30px -12px rgba(202,255,0,0.55) !important; transform: translateY(-1px); }
.btn-lime::after { display: none; }
.btn-ghost { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); }
.nav { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.nav.scrolled .nav-in, .nav-in { border-color: var(--line) !important; }

/* big thin numbers */
.fact strong, .calc-k strong, .cg-m strong, .metric strong { font-family: 'Inter', sans-serif !important; font-weight: 200 !important; color: #CAFF00 !important; letter-spacing: -0.045em; line-height: 1 !important; text-shadow: 0 0 34px rgba(202,255,0,0.35), 0 0 2px rgba(202,255,0,0.4); font-variant-numeric: tabular-nums; }
.fact strong { font-size: clamp(56px, 7.4vw, 108px) !important; }
.calc-k strong { font-size: clamp(42px, 4.6vw, 68px) !important; }
.calc-big strong { font-size: clamp(56px, 7vw, 104px) !important; }
.cg-m strong { font-size: clamp(64px, 8vw, 112px) !important; }
.facts { gap: 0; }
.fact { padding: 30px 14px 26px; }
.fact span { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.cg-m { background: rgba(202,255,0,0.035) !important; }
.cg-m b { color: var(--teal); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.el-src { display: block; margin-top: 10px; font-size: 12px; line-height: 1.4; color: #6f8b85; font-weight: 400; letter-spacing: 0; text-transform: none; text-shadow: none; }
.el-src-demo { text-align: center; margin: 18px auto 0; }
.kpi strong, .md-foot strong, .bk-day b, .bk-pt strong, .pl-total strong, .gl-kpis b, .calc-f label b { font-family: 'Inter', sans-serif !important; font-weight: 300 !important; letter-spacing: -0.03em; }

/* more air, narrower text */
.sec { padding: 140px 0; }
.sec-head { margin-bottom: 64px; }
.sec-head .lead { margin-top: 14px; }
@media (max-width: 760px) {
  .sec { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }
  .hero h1.display { font-size: clamp(40px, 11.5vw, 56px); }
  [data-v="a"] .hero h1.display { font-size: clamp(46px, 13vw, 64px); }
  .fact strong { font-size: clamp(44px, 13vw, 60px) !important; }
  .fact { padding: 22px 6px 18px; }
}
.mo #problemy { padding: 0; }

/* calm motion: fade + 16 px up, 600 ms ease-out, one thing at a time */
.rv { transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out !important; }
.rv.in { transform: none; }
.mo h2.words .w { filter: none !important; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out !important; transition-delay: 0s !important; }
.mo h2.words.words-in .w { transform: none; }
.mo .vwords .w { filter: none !important; }
.hero-in > * { animation-duration: .6s !important; animation-timing-function: ease-out !important; }
@media (prefers-reduced-motion: reduce) { .rv, .mo h2.words .w { transition: none !important; transform: none !important; opacity: 1 !important; } }

/* A/B switch */
.ab { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(20,28,25,0.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); font: 600 13px/1 'Inter', sans-serif; }
.ab span { padding: 9px 6px 9px 10px; color: #9db7b1; font-weight: 500; }
.ab button { width: 34px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: #F2F5F3; font: inherit; cursor: pointer; }
.ab button.on { background: #CAFF00; color: #06100c; }

/* small labels in sentence case too (badge, nav, chips) */
.badge { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; font-weight: 500; color: var(--dim); background: rgba(255,255,255,0.04) !important; border-color: var(--line) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.nav-links a:not(.btn) { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px; font-weight: 500; }
.case-tag span, .pr .when, .stories .tab, .qz-step, .tg, .st, .live, .pane-t, .md-top { letter-spacing: 0.02em; }
.case-tag span, .pr .when, .qz-step { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px; }
.trust { color: var(--dim); }
.c-side .h2, .c-side .display.h2 { font-size: clamp(30px, 3.1vw, 44px) !important; letter-spacing: -0.03em; }
@media (max-width: 760px) { .c-side .h2, .c-side .display.h2 { font-size: clamp(30px, 8.6vw, 38px) !important; } }

/* ===== colour palettes (switch "Kolor" 1-4): how much brand green ===== */
:root, [data-c="4"] { --pbg: #040807; --pglowA: rgba(11,61,51,0.55); --pglowB: rgba(202,255,0,0.08); --pcard: rgba(255,255,255,0.04); --pcardb: rgba(255,255,255,0.08); --pnav: rgba(14,20,18,0.62); --pnavs: rgba(10,15,13,0.80); }
[data-c="1"] { --pbg: #001F1A; --pglowA: rgba(0,96,80,0.50); --pglowB: rgba(202,255,0,0.10); --pcard: rgba(0,70,60,0.28); --pcardb: rgba(202,255,0,0.13); --pnav: rgba(0,44,37,0.55); --pnavs: rgba(0,36,30,0.82); }
[data-c="2"] { --pbg: #03171300; --pbg: #031713; --pglowA: rgba(8,82,68,0.55); --pglowB: rgba(202,255,0,0.085); --pcard: rgba(110,255,210,0.045); --pcardb: rgba(190,255,220,0.10); --pnav: rgba(6,36,30,0.55); --pnavs: rgba(4,28,23,0.82); }
[data-c="3"] { --pbg: #070D0B; --pglowA: rgba(11,66,55,0.60); --pglowB: rgba(202,255,0,0.075); --pcard: rgba(255,255,255,0.04); --pcardb: rgba(255,255,255,0.085); --pnav: rgba(16,24,21,0.60); --pnavs: rgba(11,17,15,0.82); }
html, body, .bg { background: var(--pbg) !important; }
[data-c="1"] body, [data-c="1"] .bg { background: radial-gradient(1200px 700px at 50% -10%, rgba(0,70,58,0.55), transparent 70%), #001F1A !important; }
main > section::before { background: radial-gradient(640px 460px at 12% 22%, var(--pglowA), transparent 70%), radial-gradient(520px 380px at 88% 78%, var(--pglowB), transparent 70%); }
main > section:nth-of-type(even)::before { background: radial-gradient(620px 440px at 86% 24%, var(--pglowA), transparent 70%), radial-gradient(520px 380px at 14% 80%, var(--pglowB), transparent 70%); }
.svc, .pain, .case, .calc, .quiz, .faq details, .cg, .case-feats li, .facts, .f-cta, .pwin, .prow, .app, .kpi, .card-s, .calc-k, .about-badge, .md-phone, .bk-box, .pm-box, .direct, .badge, .btn-ghost, .tabs:not(.stories) { background: var(--pcard) !important; border-color: var(--pcardb) !important; }
.mo .pstage .pain { background: color-mix(in srgb, var(--pbg) 88%, white 4%) !important; }

/* ===== navigation, Apple style: slimmer glass pill, sentence case, no dot ===== */
.nav { top: 12px; }
.nav-pill { height: 62px; padding: 0 8px 0 18px; background: var(--pnav) !important; border: 1px solid var(--pcardb) !important; -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 10px 40px -20px rgba(0,0,0,0.6) !important; }
.nav.scrolled .nav-pill { height: 56px; background: var(--pnavs) !important; border-color: var(--pcardb) !important; }
.nav-pill .logo img { height: 42px; }
.nav.scrolled .nav-pill .logo img { height: 38px; }
.nav-links a:not(.btn) { color: #b9cdc8; padding: 8px 13px; }
.nav-links a:not(.btn):hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-links a.on { color: #fff !important; background: rgba(255,255,255,0.07); }
.nav-links a.on::after { display: none; }
.nav-act .lang { width: 38px; height: 38px; font-size: 12px; letter-spacing: 0; color: #dfe9e6; border-color: var(--pcardb); }
.nav-act .lang:hover { background: rgba(255,255,255,0.06); }
.nav-act .btn { height: 42px; padding: 0 18px; font-size: 14px; }
.nav-burger { width: 40px; height: 40px; border-color: var(--pcardb); background: rgba(255,255,255,0.04); }
@media (max-width: 760px) { .nav { top: 10px; padding: 0 12px; } .nav-pill { height: 56px; padding: 0 6px 0 14px; } .nav-pill .logo img { height: 38px; } .nav-act .btn { height: 40px; padding: 0 14px; } }

/* switch with two rows */
.ab { flex-direction: column; gap: 2px; border-radius: 18px; padding: 5px; }
.ab .row { display: flex; align-items: center; gap: 3px; }
.ab span { width: 48px; padding: 0 0 0 8px; font-size: 12px; }

/* ===== 5 and 6: background differs per section =====
   5 "Rytm": the whole page smoothly changes colour while you scroll from one section to the next.
   6 "Pasy": every section has its own tone, edges fade softly into the next one (no hard lines). */
[data-c="5"], [data-c="6"] { --pbg: #031713; --pglowA: rgba(8,82,68,0.50); --pglowB: rgba(202,255,0,0.08); --pcard: rgba(110,255,210,0.045); --pcardb: rgba(190,255,220,0.10); --pnav: rgba(6,36,30,0.55); --pnavs: rgba(4,28,23,0.82); }
[data-c="5"] body, [data-c="5"] .bg { background: var(--rbg, #031713) !important; }
[data-c="6"] main > section { --tone: transparent; background: linear-gradient(to bottom, transparent 0, var(--tone) 180px, var(--tone) calc(100% - 180px), transparent 100%); }
[data-c="6"] #problemy { --tone: #020f0c; }
[data-c="6"] #uslugi { --tone: #0b2c25; }
[data-c="6"] #wdrozenia { --tone: #010a08; }
[data-c="6"] #kalkulator { --tone: #07291f; }
[data-c="6"] #proces { --tone: #031511; }
[data-c="6"] #o-mnie { --tone: #0c2d26; }
[data-c="6"] #faq { --tone: #020c0a; }
[data-c="6"] #kontakt { --tone: #00261f; }

/* ===== 7 "Zieleń i czerń": sections alternate brand green and near black, the calculator sits in a green window ===== */
[data-c="7"] { --pbg: #020a08; --pglowA: rgba(8,82,68,0.45); --pglowB: rgba(202,255,0,0.07); --pcard: rgba(110,255,210,0.045); --pcardb: rgba(190,255,220,0.10); --pnav: rgba(4,24,20,0.6); --pnavs: rgba(3,18,15,0.84); }
[data-c="7"] body, [data-c="7"] .bg { background: #020a08 !important; }
[data-c="7"] main > section { --tone: transparent; background: linear-gradient(to bottom, transparent 0, var(--tone) 200px, var(--tone) calc(100% - 200px), transparent 100%); }
[data-c="7"] #top { --tone: #002a22; background: linear-gradient(to bottom, #002a22 0, #002a22 calc(100% - 260px), transparent 100%); }
[data-c="7"] #problemy { --tone: #010605; }
[data-c="7"] #uslugi { --tone: #003128; }
[data-c="7"] #wdrozenia { --tone: #000403; }
[data-c="7"] #proces { --tone: #010605; }
[data-c="7"] #o-mnie { --tone: #003128; }
[data-c="7"] #faq { --tone: #010605; }
[data-c="7"] #kontakt { --tone: #002a22; }
[data-c="7"] #kontakt::before { background: radial-gradient(700px 480px at 70% 30%, rgba(202,255,0,0.10), transparent 70%), radial-gradient(600px 420px at 10% 80%, rgba(8,90,74,0.55), transparent 70%); }
[data-c="7"] #uslugi::before, [data-c="7"] #o-mnie::before { background: radial-gradient(700px 500px at 85% 20%, rgba(0,110,90,0.45), transparent 70%), radial-gradient(500px 380px at 10% 85%, rgba(202,255,0,0.06), transparent 70%); }
/* the calculator: a green rounded window on the black part of the page */
[data-c="7"] #kalkulator { margin: 40px clamp(10px, 2vw, 28px); border-radius: clamp(28px, 4vw, 48px); background: radial-gradient(900px 500px at 50% 0%, rgba(0,120,98,0.55), transparent 70%), linear-gradient(180deg, #00382e, #002a22) !important; border: 1px solid rgba(190,255,220,0.10); }
[data-c="7"] #kalkulator::before { display: none; }
[data-c="7"] #kalkulator .calc { background: rgba(0,0,0,0.28) !important; }
@media (max-width: 760px) { [data-c="7"] #kalkulator { margin: 24px 8px; } }

/* 7: no bands any more. The whole page background flows from colour to colour while you scroll (elegant.js),
   and the section glows reach beyond their section so no edge is ever visible */
[data-c="7"] main > section, [data-c="7"] #top { background: none !important; }
[data-c="7"] body, [data-c="7"] .bg { background: var(--rbg, #002a22) !important; }
[data-c="7"] main > section::before { inset: -260px 0; }
[data-c="7"] #kalkulator::before { display: none; }

/* ===== fix after review: no neon. Numbers crisp (weight 300, no glow), white for secondary, solid lime only for the key result ===== */
.fact strong, .calc-k strong, .cg-m strong, .metric strong { text-shadow: none !important; font-weight: 300 !important; letter-spacing: -0.04em; }
.fact strong, .calc-k:not(.calc-big) strong { color: #F2F5F3 !important; }
.calc-big strong, .cg-m strong { color: #CAFF00 !important; }
.cg-m { background: var(--pcard) !important; }
/* calculator: one even glass card, both halves the same, thin divider */
.calc .calc-out, .calc .calc-in { background: transparent !important; }
.calc .calc-out { border-left: 1px solid var(--pcardb); }
@media (max-width: 760px) { .calc .calc-out { border-left: 0; border-top: 1px solid var(--pcardb); } }
.calc-k { background: rgba(255,255,255,0.03) !important; }
/* 7: the calculator is no longer a separate window, it just gets its green turn in the colour flow */
[data-c="7"] #kalkulator { margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: none !important; }
[data-c="7"] #kalkulator .calc { background: var(--pcard) !important; }

/* fix: calculator result never wraps into two lines (no jumping), it shrinks to fit the card instead */
.calc-big { container-type: inline-size; }
.calc-big strong { white-space: nowrap; font-size: min(clamp(56px, 7vw, 104px), 15.5cqw) !important; }
.calc-k:not(.calc-big) strong { white-space: nowrap; }
/* 7: darker hero */
[data-c="7"] #top::before { opacity: 0.55; }
[data-c="7"] .hero-vid video.on { opacity: 0.2; }

/* 4 steps: no dashed line through the number tiles; tiles solid so nothing shows through */
.proc::before { display: none !important; }
.pr .n { background: #0b1512 !important; }
/* final CTA card: video much quieter, dark veil so the text leads */
.f-cta { position: relative; overflow: hidden; }
.f-vid { opacity: 0.16 !important; filter: saturate(0.7) brightness(0.8); }
.f-cta::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(70% 90% at 50% 50%, rgba(2,14,11,0.55), rgba(2,14,11,0.85)); }
.f-cta > *:not(.f-vid) { position: relative; z-index: 1; }
/* all four tiles equal, number always lime; hover = lime tile with dark number */
.pr .n, .pr:first-child .n { color: #CAFF00 !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: none !important; }
@media (pointer: fine) { .pr:hover .n { background: #CAFF00 !important; color: #06120e !important; } }

/* fix scroll jitter: no live blur under elements that move with the scroll (3D dashboard, phone, flying cards).
   They get a solid glass-like fill instead, which the GPU can move without re-blurring every frame */
.app, .md-phone, .pwin, .prow, .pain, .kpi, .card-s, .ev, .toast, .md-n { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.app { background: linear-gradient(180deg, rgba(14,34,29,0.97), rgba(8,22,18,0.98)) !important; }
.md-phone { background: linear-gradient(180deg, #0c2620, #061612) !important; }
.mo .app, .mo .mobdemo, .mo .pstage .pain, .mo .pwin { backface-visibility: hidden; transform-style: flat; }
/* the flowing page colour lives on its own fixed layer, not on <body>, so a colour change repaints only that layer */
[data-c="5"] body, [data-c="7"] body { background: #020a08 !important; }
[data-c="5"] .bg, [data-c="7"] .bg { background: var(--rbg, #00140f) !important; will-change: background-color; transform: translateZ(0); }
/* final CTA: no box at all (no frame, no veil, no video), the text sits straight on the flowing background */
.f-cta { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible; }
.f-cta::before, .f-cta::after { display: none !important; }
.f-vid { display: none !important; }

/* ===== big numbers, calmer and more refined: white, medium weight, smaller; unit small and grey; lime only as a thin accent ===== */
.fact strong, .calc-k strong, .cg-m strong, .metric strong, .calc-big strong {
  color: #F2F5F3 !important; font-weight: 500 !important; letter-spacing: -0.045em !important; text-shadow: none !important;
  font-feature-settings: "tnum" 1, "cv11" 1; line-height: 1 !important; }
.cg-m strong { font-size: clamp(48px, 5vw, 68px) !important; }
.calc-big strong { font-size: min(clamp(44px, 4.6vw, 64px), 13cqw) !important; }
.calc-k:not(.calc-big) strong { font-size: clamp(30px, 3vw, 40px) !important; }
.fact strong { font-size: clamp(40px, 4.4vw, 60px) !important; }
/* unit: small, grey, normal weight */
.u, .calc-k strong { --u: 0.42em; }
.u { font-size: 0.42em; font-weight: 400; color: #9db7b1; letter-spacing: 0; margin-left: 0.18em; }
.calc-k strong { font-size: inherit; }
.calc-k strong > span[id] { font-size: 1em; }
.calc-big strong, .calc-k strong { word-spacing: -0.05em; }
/* thin lime accent line above the key results */
.cg-m strong::before, .calc-big strong::before { content: ''; display: block; width: 28px; height: 2px; border-radius: 2px; background: #CAFF00; margin: 0 auto 18px; }
.cg-m b { color: #9db7b1 !important; }
@media (max-width: 760px) { .cg-m strong { font-size: 52px !important; } .fact strong { font-size: 40px !important; } }
/* key results in lime, same weight/size as the white ones (no thin neon); secondary numbers stay white */
.cg-m strong, .calc-big strong { color: #CAFF00 !important; }
.cg-m strong .u, .calc-big strong .u { color: rgba(202,255,0,0.6); }
.cg-m strong::before, .calc-big strong::before { display: none; }

/* demo caption: phone version only on phones, desktop version only under the dashboard */
#mobdemo + .el-src-demo { display: none; }
@media (max-width: 760px) { #mobdemo + .el-src-demo { display: block; } #stage .el-src-demo { display: none; } }

/* ===== smooth scrolling fixes =====
   1) colour flow = two fixed layers crossfading with opacity (GPU only), body/.bg stay static */
.flow-l { position: fixed; inset: 0; z-index: -2; pointer-events: none; will-change: opacity; transform: translateZ(0); }
[data-c="5"] body, [data-c="7"] body { background: #020a08 !important; }
[data-c="5"] .bg, [data-c="7"] .bg { background: transparent !important; will-change: auto; }
/* 2) no live background blur on cards (the old site had none; blur over moving content is what made scrolling heavy). Only the nav keeps it. */
.svc, .pain, .case, .calc, .quiz, .faq details, .cg, .case-feats li, .facts, .f-cta, .pwin, .prow, .app, .kpi, .card-s, .calc-k, .about-badge, .md-phone, .bk-box, .pm-box, .direct, .badge, .btn-ghost, .tabs, .ab { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.svc, .pain, .case, .calc, .quiz, .faq details, .cg, .case-feats li, .facts, .calc-k, .badge, .btn-ghost { background-color: rgba(255,255,255,0.045) !important; }

/* scroll shake, round 3: keep the two pinned scenes (hero, problems) exactly as on the live site.
   - no isolation/stacking context and no glow layer around sections that contain a sticky stage
   - no blend mode on the hero video (blend + sticky forces the browser to redraw the pinned layer every frame) */
main > section { isolation: auto; }
#top::before, #problemy::before { display: none !important; content: none !important; }
.hero-vid video, .hero-vid video.on { mix-blend-mode: normal !important; filter: none !important; }
main > section:not(#top):not(#problemy) { isolation: isolate; }
/* static colour flow (replaces the fixed crossfading layers) */
.flow-l { display: none !important; }
.flow-bg { position: absolute; left: 0; right: 0; top: 0; z-index: -2; pointer-events: none; }
body { position: relative; }
[data-c="5"] body, [data-c="7"] body { background: transparent !important; }
[data-c="5"], [data-c="7"] { background: #020a08 !important; }
/* phones: no live blur under the nav (it redraws on every scroll frame on iPhone), no extra glow layers */
@media (max-width: 760px), (pointer: coarse) {
  .nav-pill, .nav.scrolled .nav-pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(3,20,16,0.94) !important; }
  main > section::before { display: none !important; }
  main > section { isolation: auto !important; }
  .flow-bg { transform: none; }
}
.ph-b { color: var(--txt) !important; }
/* anything below the colour flow matches the dark footer, so there is never a hard edge */
[data-c="7"] { background: #010605 !important; }

/* ===== v29: mobile pass after review ===== */
@media (max-width: 760px) {
  /* nav: CTA same height as the burger, so the pill has one rhythm */
  .nav-act .nav-cta, .nav-act .btn.nav-cta { height: 44px !important; min-height: 44px !important; padding: 0 16px !important; font-size: 14px !important; gap: 6px; }
  .nav-act .nav-burger { width: 44px; height: 44px; }
  .nav-pill { padding-right: 5px !important; }
  .nav-act .nav-cta svg { width: 15px; height: 15px; }
  .nav-act { gap: 8px; }
  /* tighter vertical rhythm between sections */
  .sec:not(#problemy) { padding: 60px 0 !important; }
  .sec-head { margin-bottom: 32px; }
  .footer { padding-top: 8px !important; }
  .footer .f-cta { padding: 12px 0 8px !important; margin-bottom: 44px !important; }
  .el-src-demo { margin-bottom: 0; }
}

/* ===== v36: hero caption (what the demo is showing) ===== */
.hcap { text-align: left; }
.hcap small { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--lime); margin-bottom: 12px; }
.hcap small b { font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hcap-t { font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--txt); min-height: 3.9em; transition: opacity .18s ease, transform .18s ease; }
.hcap-t.swap { opacity: 0; transform: translateY(6px); }
.hcap-bar { display: flex; gap: 6px; margin-top: 18px; }
.hcap-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.1); transition: background .3s ease; }
.hcap-bar i.on { background: var(--lime); }
.hcap-mob { display: none; }
/* wide screens: caption column on the left of the dashboard */
@media (min-width: 1200px) {
  .stage.has-cap { max-width: 1440px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 44px; align-items: center; }
  .stage.has-cap .el-src { grid-column: 2; }
}
/* tablets and small laptops: caption above the dashboard */
@media (min-width: 761px) and (max-width: 1199px) {
  .hcap-desk { max-width: 620px; margin: 0 auto 26px; text-align: center; }
  .hcap-desk small { justify-content: center; }
  .hcap-desk .hcap-t { min-height: 2.7em; font-size: 20px; }
}
/* phones: short caption above the phone mockup */
@media (max-width: 760px) {
  .hcap-desk { display: none; }
  .hcap-mob { display: block; width: min(340px, 88vw); margin: 0 auto 18px; text-align: center; }
  .hcap-mob small { justify-content: center; font-size: 12px; margin-bottom: 8px; }
  .hcap-mob .hcap-t { font-size: 17px; min-height: 2.8em; }
  .hcap-mob .hcap-bar { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hcap-t { transition: none; } }
@media (max-width: 760px) {
  /* caption + phone must fit under the nav even on small phones (iPhone SE) */
  .hsticky { justify-content: flex-start !important; padding-top: calc(78px + env(safe-area-inset-top)) !important; }
  .hcap-mob { margin-bottom: 12px; }
  .hcap-mob small { font-size: 11.5px; margin-bottom: 6px; }
  .hcap-mob .hcap-t { font-size: 15.5px; line-height: 1.4; min-height: 2.8em; }
  .hcap-mob .hcap-bar { margin-top: 10px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hcap-mob .hcap-t { font-size: 14.5px; }
}

/* v39: screenshot tabs always on one line */
.seg button { white-space: nowrap; }
@media (max-width: 420px) {
  .seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { padding: 8px 10px; font-size: 12px; flex: 1 0 auto; }
}