/* ============================================================
   www.medsol.pl — system wizualny (Faza 5)
   Spec: 04-projektant/design.md  ·  marka: granat + biel, błękit z logo
   Błękit skalibrowany do znaku „M": --azure #1384EC
   ============================================================ */

/* ---------- 1. TOKENY ---------- */
:root {
  /* GRANAT — baza, tekst, ciemne sceny */
  --ink:        #0A1733;
  --navy-900:   #081634;
  --navy-800:   #0C2150;
  --navy-700:   #133072;
  --navy-600:   #1C45A0;

  /* BŁĘKIT ŻYWY (kalibrowany do znaku „M") — energia/obieg, NIE tekst */
  --azure:      #1384EC;  /* logo; graficzny/duży — 3.79:1 na bieli */
  --azure-glow: #4FA8F4;  /* tor pamięci, poświata — 7.0:1 na granacie */
  --azure-deep: #0B5FC0;  /* link / fill primary — 6.15:1 (AA) na bieli */

  /* AKCENT — jeden, chirurgiczny */
  --pink:       #E81F76;

  /* ŚWIATŁO / NEUTRALNE */
  --white:      #FFFFFF;
  --paper:      #F4F8FC;
  --mist:       #E7EEF7;
  --line:       #D7E1EF;
  --muted:      #4C5C79;
  --on-navy:    #A9BCDC;
  --on-navy-hi: #F4F8FC;

  /* TYPOGRAFIA */
  --f-display: "Gabarito", system-ui, sans-serif;
  --f-text:    "Hanken Grotesk", system-ui, sans-serif;

  /* SIATKA / RYTM */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(42px, 5.8vh, 84px);

  /* PROMIENIE (świadomie różne) */
  --r-btn: 10px;
  --r-card: 16px;
  --r-scene: 20px;
  --r-field: 10px;

  /* MOTION */
  --ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
}

/* ---------- 2. RESET / BAZA ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* kotwice nie chowają się pod fixed-headerem */
[id] { scroll-margin-top: 88px; }

/* dotyk: brak opóźnienia 300ms, świadomy highlight */
a, button, .btn, .nav a, .lang button, .link-cta, .menu-btn, input, textarea, label {
  touch-action: manipulation;
}

body {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: clamp(0.94rem, 0.9rem + 0.12vw, 1rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(19,132,236,.2);
  overflow-x: hidden; /* twardy zakaz poziomego scrolla */
}
p, h1, h2, h3, .law, .lead, .change-lines, .beat-verbs { overflow-wrap: break-word; }

img, svg, video { display: block; max-width: 100%; }
a { color: var(--azure-deep); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid rgba(19,132,236,.55); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. UKŁAD ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section-y); position: relative; }
.bg-paper { background: var(--paper); }
.bg-white { background: var(--white); }

/* ---------- 4. TYPOGRAFIA ---------- */
.eyebrow {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azure-deep);
}
.scene .eyebrow, .hero .eyebrow, .footer .eyebrow { color: var(--azure-glow); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.lead, .body { text-wrap: pretty; }
.h1 { font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.06; }
.h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); }
.h3 { font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }

.lead {
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}
.scene .lead, .hero .lead, .footer .lead { color: var(--on-navy); }
.meta { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--muted); }

.tnum { font-feature-settings: "tnum"; }

/* akcent kolorem (wyróżnienie słowa) */
.accent { color: var(--azure-deep); }
.scene .accent, .hero .accent, .footer .accent, .subhero .accent { color: var(--azure-glow); }
.subhero-teal .accent { color: #2DD4BF; }

/* ---------- 5. PRZYCISKI ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-text); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em;
  padding: 13px 22px; border-radius: var(--r-btn);
  transition: transform var(--t-fast) var(--ease-in), background var(--t-fast) var(--ease-in), border-color var(--t-fast) var(--ease-in);
  will-change: transform;
}
.btn-primary { background: var(--azure-deep); color: var(--white); }
.btn-primary:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--mist); }
.scene .btn-ghost, .hero .btn-ghost, .subhero .btn-ghost { border-color: rgba(79,168,244,.4); color: var(--on-navy-hi); }
.scene .btn-ghost:hover, .hero .btn-ghost:hover, .subhero .btn-ghost:hover { background: rgba(255,255,255,.06); }

.link-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--azure-deep);
}
.link-cta .arrow { transition: transform var(--t-fast) var(--ease-in); }
.link-cta:hover .arrow { transform: translateX(4px); }

/* ---------- 6. HEADER ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: 72px;
  display: flex; align-items: center;
  transition: background var(--t-fast) var(--ease-in), border-color var(--t-fast) var(--ease-in), backdrop-filter var(--t-fast);
  border-bottom: 1px solid transparent;
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header.scrolled {
  background: rgba(12,33,80,.82); backdrop-filter: blur(8px);
  border-bottom-color: rgba(215,225,239,.12);
}
.header .logo, .header .nav a, .header .lang, .header .menu-btn { color: var(--on-navy-hi); }

.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-text); flex: none; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo .word { font-weight: 600; letter-spacing: 0.12em; font-size: 0.95rem; }
.logo-img { height: 50px; width: auto; display: block; }
.footer .logo-img { height: 40px; }
@media (max-width: 920px) { .logo-img { height: 42px; } }

.nav { display: flex; align-items: center; gap: 20px; min-width: 0; }
.nav > .lang { display: none; } /* na desktopie jeden przełącznik (w header-right); ten wraca w menu mobilnym */
.nav a { font-weight: 500; font-size: 15px; position: relative; padding: 4px 0; white-space: nowrap; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--azure-glow); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease-in);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* zakładki produktowe — wyróżnione kolorem marki (kropka + hover/active + podkreślenie) */
.nav a[href$="rep.html"], .nav a[href$="doc.html"], .nav a[href$="media.html"], .nav a[href$="insights.html"] { padding-left: 16px; }
.nav a[href$="rep.html"]::before, .nav a[href$="doc.html"]::before, .nav a[href$="media.html"]::before, .nav a[href$="insights.html"]::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; transition: box-shadow var(--t-fast) var(--ease-in);
}
.nav a[href$="rep.html"]::before { background: #4FA8F4; }
.nav a[href$="doc.html"]::before { background: #2DD4BF; }
.nav a[href$="media.html"]::before { background: #A78BFA; }
.nav a[href$="insights.html"]::before { background: #34D399; }
.nav a[href$="rep.html"]:hover, .nav a[href$="rep.html"][aria-current="page"] { color: #4FA8F4; }
.nav a[href$="doc.html"]:hover, .nav a[href$="doc.html"][aria-current="page"] { color: #2DD4BF; }
.nav a[href$="media.html"]:hover, .nav a[href$="media.html"][aria-current="page"] { color: #A78BFA; }
.nav a[href$="insights.html"]:hover, .nav a[href$="insights.html"][aria-current="page"] { color: #34D399; }
.nav a[href$="rep.html"]::after { background: #4FA8F4; }
.nav a[href$="doc.html"]::after { background: #2DD4BF; }
.nav a[href$="media.html"]::after { background: #A78BFA; }
.nav a[href$="insights.html"]::after { background: #34D399; }
.nav a[href$="rep.html"]:hover::before { box-shadow: 0 0 0 4px rgba(79,168,244,.22); }
.nav a[href$="doc.html"]:hover::before { box-shadow: 0 0 0 4px rgba(45,212,191,.22); }
.nav a[href$="media.html"]:hover::before { box-shadow: 0 0 0 4px rgba(167,139,250,.22); }
.nav a[href$="insights.html"]:hover::before { box-shadow: 0 0 0 4px rgba(52,211,153,.22); }

.header-right { display: flex; align-items: center; gap: 16px; }

/* przełącznik PL/EN */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.1); }
.lang button { padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--on-navy); transition: color var(--t-fast), background var(--t-fast); }
.lang button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--on-navy-hi); }
.header.scrolled .lang { background: rgba(255,255,255,.08); }

.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }

/* cross-fade języka */
.lang-fade { transition: opacity 160ms var(--ease-in); }
.lang-fading { opacity: 0; }

/* przełączanie bloków językowych */
html[data-lang="pl"] [data-lang-block="en"],
html[data-lang="en"] [data-lang-block="pl"] { display: none; }

/* ---------- 7. HERO (sekcja 1) ---------- */
.hero {
  position: relative; min-height: clamp(560px, 78vh, 800px); display: flex; align-items: center;
  background: var(--navy-900); color: var(--on-navy-hi); overflow: hidden;
  padding-top: 96px; padding-bottom: clamp(48px, 6vh, 80px);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg img { opacity: 0; transition: opacity 600ms var(--ease-in); }
.hero-bg img.loaded { opacity: 1; } /* fade-in po załadowaniu, gradient jako fallback pod spodem */
.hero-bg .poster {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(19,132,236,.20), transparent 55%),
    radial-gradient(100% 80% at 20% 90%, rgba(28,69,160,.25), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
}
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(8,22,52,.7); }
.grain { position: absolute; inset: 0; z-index: 2; opacity: .09; pointer-events: none; mix-blend-mode: overlay; }
.hero .wrap { position: relative; z-index: 3; display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: center; width: 100%; }
.hero-copy { max-width: 40rem; }
.hero .h1 { margin: 18px 0 22px; overflow-wrap: normal; }
.hero .h1 .mark { position: relative; white-space: nowrap; }
.hero .h1 .mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 2px;
  background: var(--pink); transform: scaleX(0); transform-origin: left;
  transition: transform 600ms var(--ease-in);
}
.hero.lit .h1 .mark::after { transform: scaleX(1); }
.hero .lead { margin-bottom: 30px; max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-orbit-cue { position: relative; height: 460px; }
.hero-orbit-cue svg { position: absolute; right: -22%; top: 50%; transform: translateY(-50%); width: 130%; height: auto; opacity: .55; }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--on-navy); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.scroll-cue .chev { width: 18px; height: 18px; animation: cue 3s var(--ease-in) infinite; }
@keyframes cue { 0%,72%,100%{transform:translateY(0);opacity:.5} 84%{transform:translateY(5px);opacity:1} }

/* ---------- HERO — diagram obiegu (4 narzędzia wokół systemu Trigger) ---------- */
@media (min-width: 921px) { .hero.hero-system .wrap { grid-template-columns: 1.06fr 1fr; } }
.hero-diagram { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1 / 1; }
.hero-diagram .orbit-node {
  position: absolute; width: 35%; transform: translate(-50%, -50%); z-index: 2;
  opacity: 0; animation: orbIn .7s var(--ease-in) forwards;
}
.orbit-node.media    { top: 12%; left: 50%; animation-delay: .15s; }
.orbit-node.insights { top: 50%; left: 17%; animation-delay: .30s; }
.orbit-node.rep      { top: 50%; left: 83%; animation-delay: .45s; }
.orbit-node.doc      { top: 88%; left: 50%; animation-delay: .60s; }

/* trigger sub-logo (kodowane) */
.tg { display: inline-flex; align-items: center; gap: 6px; }
.tg .tgm { width: 22px; height: auto; flex: none; }
.tg b { font-family: var(--f-display); font-weight: 800; font-size: .82rem; color: var(--ink); letter-spacing: -.01em; }
.tg em { font-style: normal; font-weight: 700; font-size: .6rem; letter-spacing: .12em; }
.tg.violet em { color: #7C3AED; } .tg.blue em { color: var(--azure-deep); } .tg.teal em { color: #0E9F9A; }
.tg.lg .tgm { width: 30px; } .tg.lg b { font-size: 1.15rem; } .tg.lg em { font-size: .82rem; }
.subhero .tg b, .cta-band .tg b { color: var(--on-navy-hi); }

/* mini-card (węzły diagramu hero) */
.mc { background: #fff; border-radius: 16px; padding: 13px 14px; box-shadow: 0 18px 44px rgba(4,12,30,.5); text-align: left; min-height: 152px; display: flex; flex-direction: column; justify-content: flex-start; }
.mc .tg { margin-bottom: 11px; }
.mc-title { font-family: var(--f-display); font-weight: 700; font-size: .85rem; color: var(--ink); line-height: 1.2; }
.mc-metric { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 7px; }
.mc-big { font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; line-height: 1; }
.mc-big.violet { color: #7C3AED; } .mc-big.teal { color: #0E9F9A; }
.mc-sub { font-size: .68rem; color: var(--muted); margin-top: 3px; }
.mc-spark { width: 44%; height: auto; flex: none; }
.mc-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; flex: none; }
.mc-bars i { width: 6px; background: #0E9F9A; border-radius: 2px 2px 0 0; display: block; }
.mc-row { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; font-size: .72rem; color: var(--ink); font-weight: 600; margin-top: 6px; }
.mc-row .ck { width: 16px; height: 16px; flex: none; color: var(--azure-deep); }
.mc-row .arr { margin-left: auto; color: var(--azure-deep); }
.mc-chan { display: flex; justify-content: space-around; margin-top: 12px; }
.mc-chan span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .64rem; color: var(--muted); }
.mc-chan svg { width: 20px; height: 20px; color: #0E9F9A; }
@keyframes orbIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.orbit-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 20%; aspect-ratio: 1; padding: 8px; text-align: center;
  background: #fff; border-radius: 22px; box-shadow: 0 18px 40px rgba(4,12,30,.5);
}
.orbit-core .tg-mark { width: 42%; max-width: 46px; height: auto; margin-bottom: 5px; }
.orbit-core .tg-word { font-family: var(--f-display); font-weight: 800; font-size: clamp(.9rem, 1.5vw, 1.1rem); color: var(--ink); line-height: 1; }
.orbit-core .tg-sys { font-family: var(--f-text); font-weight: 700; font-size: clamp(.5rem, .9vw, .62rem); letter-spacing: .22em; color: var(--azure-deep); }

.orbit-ring {
  position: absolute; inset: 16%; border-radius: 50%; z-index: 1; pointer-events: none;
  border: 1.5px solid rgba(79,168,244,.45);
  box-shadow: 0 0 55px rgba(19,132,236,.30), inset 0 0 60px rgba(19,132,236,.16);
}
.js .orbit-ring { animation: orbitPulse 7s ease-in-out infinite; }
@keyframes orbitPulse { 0%,100%{opacity:.65} 50%{opacity:1} }

@media (max-width: 720px) {
  .hero-diagram { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 440px; }
  .hero-diagram .orbit-node { position: static; width: 100%; transform: none; animation: none; opacity: 1; }
  .orbit-node.media { order: 2; } .orbit-node.insights { order: 3; }
  .orbit-node.rep { order: 4; } .orbit-node.doc { order: 5; }
  .orbit-core { position: static; transform: none; grid-column: 1 / -1; order: 1; width: 100%; aspect-ratio: auto; flex-direction: row; gap: 10px; padding: 14px; }
  .orbit-core .tg-mark { width: 34px; margin-bottom: 0; }
  .orbit-ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-diagram .orbit-node { animation: none !important; opacity: 1 !important; transform: translate(-50%,-50%) !important; }
  .js .orbit-ring { animation: none !important; }
}

/* ---------- 7b. WERSJA B — scalony hero + „zmiana" ---------- */
/* bez pełnej wysokości ekranu — treść tuż pod nawigacją, bez wielkiej szpary */
.hero-merged { min-height: auto; align-items: start; padding-top: clamp(104px, 13vh, 140px); padding-bottom: clamp(56px, 9vh, 104px); }
.hero-merged .wrap { grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-merged .hero-copy { max-width: 100%; }
.hero-merged .h1 { font-size: clamp(1.85rem, 3.2vw, 2.4rem); }
.hero-mem { border-left: 1px solid rgba(79,168,244,.28); padding-left: clamp(20px, 3vw, 40px); }
.hero-mem-lines .ln { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.25; color: var(--on-navy); margin-bottom: 8px; }
.hero-mem-lines .ln.word-memory { font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--azure-glow); margin-top: 6px; letter-spacing: -0.02em; }
.js .hero-mem-lines .ln { opacity: 0; animation: memLoop 11s var(--ease-in) infinite; }
.js .hero-mem-lines .ln:nth-child(1) { animation-delay: .3s; }
.js .hero-mem-lines .ln:nth-child(2) { animation-delay: .8s; }
.js .hero-mem-lines .ln:nth-child(3) { animation-delay: 1.3s; }
.js .hero-mem-lines .ln:nth-child(4) { animation-delay: 1.8s; }
.js .hero-mem-lines .ln:nth-child(5) { animation-delay: 2.5s; }
@keyframes memLoop {
  0%   { opacity: 0; transform: translateY(14px); }
  6%   { opacity: 1; transform: none; }
  86%  { opacity: 1; transform: none; }
  94%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(14px); }
}
@media (max-width: 920px) {
  .hero-merged .wrap { grid-template-columns: 1fr; }
  .hero-mem { border-left: 0; padding-left: 0; border-top: 1px solid rgba(79,168,244,.28); padding-top: 28px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-mem-lines .ln { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* tagline hero (z checkiem) */
.hero-tagline { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--on-navy); font-weight: 500; font-size: 0.95rem; }
.hero-tagline svg { width: 20px; height: 20px; flex: none; }

/* ---------- sekcja PROBLEM — „wiele kanałów, za mało ciągłości" ---------- */
.problem { background: var(--paper); text-align: center; }
.problem .h2 { max-width: 24ch; margin: 0 auto 12px; }
.problem .sub { color: var(--muted); max-width: 62ch; margin: 0 auto clamp(32px,5vh,48px); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.problem-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; }
.problem-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--mist); display: grid; place-items: center; color: var(--azure-deep); margin-bottom: 16px; }
.problem-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.problem-card p { color: var(--muted); font-size: 0.95rem; }

/* ---------- pasek 3 KROKÓW (numerowany obieg pracy) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); text-align: left; margin-top: clamp(28px, 4vh, 44px); }
.step { position: relative; }
.step .num { width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--azure-deep); color: var(--azure-deep); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; margin-bottom: 16px; background: var(--white); }
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; max-width: 32ch; }
/* łącznik — chevron w szparze między krokami (desktop) */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 14px; right: calc(-1 * clamp(20px, 3vw, 40px) / 2 - 5px); width: 11px; height: 11px;
  border-top: 1.6px solid var(--azure-deep); border-right: 1.6px solid var(--azure-deep);
  transform: rotate(45deg); opacity: .5;
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step:not(:last-child)::after { display: none; } }

/* zrzut ekranu w sekcji split (np. dashboard managera) */
.shot { border-radius: var(--r-scene); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(8,22,52,.16); background: var(--white); }
.shot img { width: 100%; height: auto; display: block; }

/* ---------- pasek PRZEPŁYWU ---------- */
.flow { background: var(--white); text-align: center; }
.flow .h2 { margin-bottom: 10px; }
.flow .sub { color: var(--muted); margin-bottom: clamp(28px,4vh,40px); }
.flow-strip { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: var(--paper); max-width: 1020px; margin: 0 auto; }
.flow-node { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; }
.flow-node .n { font-family: var(--f-display); font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.flow-node .r { font-size: 0.76rem; color: var(--muted); }
.flow-arrow { color: var(--azure-deep); flex: none; }

/* ---------- pas CTA ---------- */
.cta-band { background: linear-gradient(120deg, var(--navy-800), var(--navy-900)); color: var(--on-navy-hi); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band .h2 { color: var(--on-navy-hi); margin: 0; }
.cta-band .h2 .accent { color: var(--azure-glow); }
@media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; } .flow-node .r { display: none; } }

/* ---------- 8. SEKCJA 2 — ZMIANA ---------- */
.change { background: var(--white); text-align: left; position: relative; overflow: hidden; }
.change-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.change-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease-in); }
.change .wrap { max-width: 920px; position: relative; z-index: 1; }
.change-eyebrow { margin-bottom: 40px; }
.change-lines { display: flex; flex-direction: column; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.15; color: var(--ink); }
.change-lines .ln { opacity: 1; }
/* z JS: linie ukryte do wejścia w kadr, potem wyraźna sekwencja przez .in */
.js .change-lines .ln { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-in), transform .55s var(--ease-in); }
.js .change-lines.in .ln { opacity: 1; transform: none; }
.js .change-lines.in .ln:nth-child(1) { transition-delay: .15s; }
.js .change-lines.in .ln:nth-child(2) { transition-delay: .55s; }
.js .change-lines.in .ln:nth-child(3) { transition-delay: .95s; }
.js .change-lines.in .ln:nth-child(4) { transition-delay: 1.35s; }
/* „pamięć." ląduje po beacie ciszy, z mocniejszym wejściem */
.js .change-lines .ln.word-memory { transform: translateY(22px) scale(.92); transform-origin: left center; }
.js .change-lines.in .ln.word-memory { transform: none; transition-delay: 2.0s; transition-duration: .8s; }
.change-lines .word-memory { font-weight: 900; font-size: clamp(2rem, 4.5vw, 3rem); color: var(--azure-deep); letter-spacing: -0.03em; }
.change-payoff { margin-top: 56px; }
.change-payoff .h2 { max-width: 18ch; }
.change-payoff .lead { margin-top: 16px; }

/* JS-driven reveal */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-in), transform 700ms var(--ease-in); }

/* ---------- 9. SCENA OBIEGU (sekcja 3 — serce) ---------- */
.scene { background: var(--navy-900); color: var(--on-navy-hi); overflow: hidden; padding-block: clamp(60px, 8vh, 104px); }
.scene .scene-bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, var(--navy-700), var(--navy-900) 70%); z-index: 0; }
.scene .grain { z-index: 1; }
.scene .wrap { position: relative; z-index: 2; }
.scene-head { max-width: 48rem; margin-bottom: 28px; }
.scene-head .h2 { margin: 14px 0 14px; }

.scene-stage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.scene-beats { align-self: center; }
.beat-verbs { display: flex; flex-direction: column; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.55rem); }
.beat-verbs .bv { display: flex; align-items: baseline; gap: 14px; opacity: .5; transition: opacity 400ms var(--ease-in); color: #fff; }
.beat-verbs .bv.on { opacity: 1; }
.beat-verbs .bv .tool { font-family: var(--f-text); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--azure-glow); }
.beat-verbs .bv.on .tool { text-shadow: 0 0 16px rgba(79,168,244,.5); }
.scene-close { margin-top: 26px; }
.scene-close .close-line { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; color: var(--on-navy-hi); opacity: .3; transition: opacity 500ms var(--ease-in); }
.scene-close .close-line.on { opacity: 1; }
.scene-close .climax { margin-top: 14px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--on-navy-hi); opacity: .25; transition: opacity 500ms var(--ease-in); }
.scene-close .climax.on { opacity: 1; }
.scene-close .climax .dot { color: var(--pink); }

.orbit-holder { position: relative; }
.obieg-asset { max-width: 1000px; margin: 0 auto; border-radius: var(--r-scene); overflow: hidden; }
.obieg-asset img { width: 100%; height: auto; display: block; }
.proof .zaufali-img { width: 100%; max-width: 1120px; margin: 0 auto; border-radius: var(--r-card); display: block; aspect-ratio: 2.42 / 1; object-fit: cover; object-position: center bottom; }

.command-line { margin-top: clamp(28px, 4vh, 48px); max-width: 60ch; }
.command-line .h3.accent { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; margin-bottom: 8px; }
.command-line .h3 { font-size: 1.05rem; color: var(--azure-glow); margin-bottom: 8px; font-family: var(--f-text); font-weight: 600; letter-spacing: 0.02em; }
.command-line p { color: var(--on-navy); font-size: 0.95rem; }
.command-line .micro { color: var(--on-navy); opacity: .8; font-size: 0.82rem; margin-top: 8px; font-style: italic; }

/* SVG orbit */
.orbit-holder { display: flex; justify-content: center; }
.orbit { width: 100%; max-width: 400px; height: auto; overflow: visible; }
.orbit .track { fill: none; stroke: rgba(79,168,244,.32); stroke-width: 2; opacity: 1; }
.orbit .trail { fill: none; stroke: var(--azure-glow); stroke-width: 3.5; stroke-linecap: round; }
.orbit .spoke { stroke: var(--azure); stroke-width: 1; opacity: .15; }
.orbit .node circle { fill: var(--navy-800); stroke: var(--navy-600); stroke-width: 1.5; transition: stroke 400ms var(--ease-in); }
.orbit .node.on circle { stroke: var(--azure); }
.orbit .node .bloom { fill: var(--azure); opacity: 0; transition: opacity 400ms var(--ease-in); }
.orbit .node.on .bloom { opacity: .14; }
.orbit .node .nname { font-family: var(--f-display); font-weight: 800; font-size: 15px; fill: #fff; text-anchor: middle; }
.orbit .node .nrole { font-family: var(--f-text); font-weight: 500; font-size: 10.5px; fill: var(--azure-glow); text-anchor: middle; }
.orbit .station circle { fill: var(--on-navy); }
.orbit .station text { font-family: var(--f-text); font-weight: 500; font-size: 11px; fill: var(--on-navy); }
.orbit .command .cdisk { fill: var(--navy-800); stroke: var(--azure); stroke-width: 1.5; }
.orbit .command .glow { fill: var(--azure); opacity: .1; }
.orbit .mmark { fill: none; stroke: var(--azure-glow); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.orbit .packet { fill: var(--azure); }
.orbit .packet .pline { stroke: rgba(255,255,255,.7); stroke-width: 1.2; }
.orbit .pink-burst { fill: none; stroke: var(--pink); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- 10. SEKCJA 4 — KARTY ---------- */
/* ---------- SUITE — „Poznaj Trigger z bliska" (2×2 karty-assety) ---------- */
.suite { background: var(--paper); padding-block: clamp(40px, 5vh, 64px); }
.suite .eyebrow { display: block; text-align: center; }
.suite .h2 { text-align: center; margin: 8px 0 clamp(20px, 3vh, 32px); }
.suite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: var(--maxw); margin: 0 auto; }
/* karty suite KODOWANE — kompozycja: kopia + zwarty mock UI (1:1 z mockupem) */
.scard { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(12px, 1.4vw, 22px); align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(14px, 1.6vw, 20px); transition: transform var(--t-fast) var(--ease-in), box-shadow var(--t-fast) var(--ease-in); }
.scard-mock { align-self: center; }
a.scard { text-decoration: none; color: inherit; }
a.scard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(8,22,52,.10); }
.scard-copy { display: flex; flex-direction: column; height: 100%; }
.scard .tg { margin-bottom: 12px; }
.scard .tg .tgm { width: 26px; }
.scard .tg b { font-size: 1rem; }
.scard .tg em { font-size: .72rem; letter-spacing: .1em; }
.scard h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.14; color: var(--ink); margin-bottom: 7px; letter-spacing: -.01em; }
.scard .sdesc { color: var(--muted); font-size: .88rem; line-height: 1.42; margin-bottom: 10px; max-width: 34ch; }
.scard .cta { color: var(--azure-deep); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: auto; }
.scard .cta svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-in); }
a.scard:hover .cta svg { transform: translateX(4px); }
/* mock UI w karcie */
.scard-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; padding: 12px; }
.mk-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--ink); margin-bottom: 6px; font-size: .82rem; }
.mk-head svg { width: 15px; height: 15px; color: var(--muted); }
.mk-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line); }
.mk-row.t0 { border-top: 0; }
.mk-time { font-weight: 700; color: var(--ink); font-size: .72rem; width: 32px; flex: none; }
.mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--azure-deep); flex: none; }
.mk-dot.o { background: transparent; border: 2px solid var(--line); }
.mk-who { flex: 1; min-width: 0; }
.mk-who b { display: block; color: var(--ink); font-weight: 600; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-who span { color: var(--muted); font-size: .68rem; }
.mk-ck { width: 17px; height: 17px; flex: none; color: #0E9F9A; }
.mk-av { width: 24px; height: 24px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--azure), var(--azure-deep)); }
.mk-btn { margin-top: 12px; background: var(--azure-deep); color: #fff; border-radius: 9px; padding: 9px; font-weight: 600; font-size: .76rem; display: flex; align-items: center; justify-content: center; gap: 7px; }
.mk-btn svg { width: 14px; height: 14px; }
.mk-sub { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.mk-tag { font-size: .6rem; font-weight: 600; color: #0E9F9A; background: rgba(14,159,154,.12); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.mk-tile { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.mk-thumb { width: 30px; height: 30px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; }
.mk-big { font-family: var(--f-display); font-weight: 800; font-size: 1.55rem; line-height: 1; }
.mk-chart { width: 100%; height: auto; display: block; margin: 6px 0; }
.mk-btns { display: flex; flex-direction: column; gap: 8px; }
.mk-sqbtn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.mk-avrow { display: flex; align-items: center; margin-top: 10px; }
.mk-avrow .mk-av { width: 26px; height: 26px; border: 2px solid var(--white); margin-left: -7px; }
.mk-avrow .mk-av:first-child { margin-left: 0; }
.mk-avrow .more { margin-left: 8px; font-size: .66rem; color: var(--muted); font-weight: 600; }
.mk-media { position: relative; flex: 1; min-height: 96px; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-start; padding: 11px; }
.mk-media b { position: relative; z-index: 1; color: #5B21B6; font-family: var(--f-display); font-weight: 800; font-size: .9rem; line-height: 1.16; background: rgba(255,255,255,.82); border-radius: 7px; padding: 5px 8px; }
.js .scard.reveal:nth-child(1) { transition-delay: .05s; }
.js .scard.reveal:nth-child(2) { transition-delay: .16s; }
.js .scard.reveal:nth-child(3) { transition-delay: .27s; }
.js .scard.reveal:nth-child(4) { transition-delay: .38s; }
@media (max-width: 920px) { .suite-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .scard { grid-template-columns: 1fr; } }

.tools { background: var(--paper); }
.tools-intro { max-width: 68ch; margin-bottom: 44px; }
.flagships { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(18px, 2.2vw, 26px); position: relative;
  transition: transform var(--t-fast) var(--ease-in), border-color var(--t-fast) var(--ease-in), box-shadow var(--t-fast);
}
.card:hover { transform: translateY(-4px); border-color: rgba(11,95,192,.4); box-shadow: 0 1px 0 rgba(11,95,192,.25); }
.card .ic { width: 40px; height: 40px; color: var(--azure-deep); margin-bottom: 18px; }
.card .h3 { margin-bottom: 10px; }
.card p { color: var(--muted); margin-bottom: 20px; max-width: 34ch; }
.card.rep { margin-top: 0; }
.card.doc { margin-top: 16px; } /* asymetria — różna „waga" */
.card .corner-phone { position: absolute; top: 22px; right: 22px; width: 30px; height: 48px; opacity: .5; }
.card .corner-qr { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; opacity: .5; transition: opacity var(--t-fast); }
.card.doc:hover .corner-qr { opacity: .9; }

.closers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.closer { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 26px; }
.closer .h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; }
.closer p { color: var(--muted); font-size: 0.95rem; }
.closer .ic { width: 28px; height: 28px; color: var(--muted); margin-bottom: 12px; }

/* ---------- 11. SEKCJA 5 — ETOS ---------- */
.ethos { background: var(--white); }
.ethos .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.ethos .h2 { margin-bottom: 18px; }
.ethos .law { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.55rem, 2.8vw, 2.2rem); line-height: 1.16; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.ethos .law .u { box-shadow: inset 0 -2px 0 var(--pink); }
.ethos .body { color: var(--muted); font-size: 1.05rem; margin: 0; }
@media (max-width: 820px) { .ethos .wrap { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 12. SEKCJA 6 — DOWÓD ---------- */
.proof { background: var(--paper); text-align: center; }
.proof .h3 { font-family: var(--f-display); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.proof .sub { color: var(--muted); margin-bottom: 40px; }
/* „ściana zaufania" — jednolite kafle z hairline-siatką (gotowe na realne pliki logo) */
.logo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; max-width: 1040px; margin: 0 auto; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.logo-strip .logo-item { display: flex; align-items: center; justify-content: center; background: var(--white); min-height: 88px; padding: 18px 16px; transition: background var(--t-fast) var(--ease-in); }
.logo-strip .logo-item:hover { background: var(--paper); }
.logo-strip .logo-fallback { font-family: var(--f-text); font-weight: 600; font-size: clamp(0.9rem, 1.3vw, 1.05rem); color: var(--muted); opacity: .7; letter-spacing: 0.01em; text-align: center; }
/* realne logo: monochrom (jeden kolor), pełny kolor na hover */
.logo-strip img { max-height: 34px; max-width: 78%; width: auto; filter: grayscale(1) brightness(0); opacity: .55; transition: opacity var(--t-fast) var(--ease-in), filter var(--t-fast) var(--ease-in); }
.logo-strip .logo-item:hover img { opacity: 1; filter: none; }

/* ---------- 13. SEKCJA 7 — KONTAKT ---------- */
.contact { background: var(--white); }
.contact .wrap { max-width: 760px; margin: 0 auto; text-align: center; }
.contact .h2 { margin: 14px auto 16px; max-width: 20ch; }
.contact .lead { margin: 0 auto 28px; }
.contact-data { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; }
.contact-data a, .contact-data span { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 500; }
.contact-data svg { width: 19px; height: 19px; flex: none; color: var(--azure-deep); }
.contact-data a:hover { color: var(--azure-deep); }
.contact .hero-actions { justify-content: center; }
.form-card { background: var(--mist); border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-field);
  padding: 12px 14px; min-height: 48px; font: inherit; color: var(--ink);
  transition: border-color var(--t-fast);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(19,132,236,.18); }
.field .err { min-height: 18px; font-size: 0.78rem; color: var(--pink); margin-top: 4px; }
.form-card .btn-primary { width: 100%; justify-content: center; }
.form-note { margin-top: 14px; font-size: 0.8rem; color: var(--muted); text-align: center; min-height: 18px; }

/* ---------- 14. STOPKA ---------- */
.footer { background: var(--navy-900); color: var(--on-navy); padding-block: 64px 40px; }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.footer .logo { color: var(--on-navy-hi); margin-bottom: 14px; }
.footer .f-brand p { color: var(--on-navy); font-size: 0.9rem; max-width: 30ch; }
.footer h4 { font-family: var(--f-text); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy); opacity: .7; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--on-navy-hi); font-size: 0.92rem; }
.footer a:hover { color: var(--azure-glow); }
.footer .f-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(215,225,239,.12); }
.footer .f-bottom .meta { color: var(--on-navy); }
.footer .lang button { color: var(--on-navy); }
.footer .lang button[aria-pressed="true"] { color: var(--on-navy-hi); }

/* ---------- 15. PODSTRONY ---------- */
.subhero { background: var(--navy-900); color: var(--on-navy-hi); position: relative; overflow: hidden; min-height: 60svh; display: flex; align-items: center; padding-top: 100px; padding-bottom: 60px; }
.subhero .h1 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
.subhero .hero-bg, .subhero .hero-overlay, .subhero .grain { position: absolute; inset: 0; }
.subhero .hero-overlay { background: linear-gradient(90deg, rgba(8,22,52,.92) 0%, rgba(8,22,52,.7) 42%, rgba(8,22,52,.3) 100%); z-index: 1; }
@media (max-width: 920px) { .subhero .hero-overlay { background: rgba(8,22,52,.72); } }

/* badge sklepów (REP = apka mobilna) — obok siebie, kompaktowo */
.store-badges { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
.store-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(79,168,244,.35); color: var(--on-navy-hi); white-space: nowrap; transition: background var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in); }
@media (max-width: 560px) { .store-badges { flex-wrap: wrap; } }
.store-badge:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.store-badge svg { width: 20px; height: 20px; flex: none; }
.store-badge .sb-t { display: flex; flex-direction: column; line-height: 1.05; }
.store-badge .sb-small { font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; opacity: .75; }
.store-badge .sb-big { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
/* wariant na jasne tło (sekcja Mobile) — ciemne przyciski jak prawdziwe badge */
.store-badges-light .store-badge { background: var(--ink); border-color: var(--ink); color: #fff; }
.store-badges-light .store-badge:hover { background: #16284a; }
.subhero .grain { z-index: 2; }
.subhero .wrap { position: relative; z-index: 3; max-width: 760px; }
/* REP hero — wizual dominujący kadr, większy baner */
.subhero-split { min-height: 72svh; }
.subhero-split .wrap { max-width: var(--maxw); display: grid; grid-template-columns: minmax(320px, 0.92fr) 1.08fr; gap: clamp(20px, 2.5vw, 44px); align-items: center; }
.subhero-split .subhero-copy { max-width: 40rem; }
/* wizual hero — bez ramki, znacząco większy, wtopiony w baner:
   skaluje się ponad kolumnę (kotwica prawa, przycięty overflow sceny),
   lewa krawędź zanika w tło, prawa schodzi do krawędzi ekranu */
.subhero-visual { position: relative; margin-right: calc(-1 * var(--gutter)); }
.subhero-visual img {
  width: 106%; max-width: none; height: auto; display: block;
  border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}
@media (max-width: 920px) {
  .subhero-split { min-height: auto; }
  .subhero-split .wrap { grid-template-columns: 1fr; }
  .subhero-visual { margin-right: 0; }
  .subhero-visual img { width: 100%; -webkit-mask-image: none; mask-image: none; }
}
.subhero .h1 { margin: 18px 0 20px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split + .split { margin-top: clamp(48px, 8vh, 96px); }
.split.reverse > :first-child { order: 2; }
.panel { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-scene); padding: clamp(28px, 4vw, 48px); min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.panel { position: relative; overflow: hidden; }
.panel .drop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel.dark { background: var(--navy-800); border-color: var(--navy-700); color: var(--on-navy); }
.mock-phone, .mock-ui { filter: drop-shadow(0 24px 48px rgba(8,22,52,.45)); }
.panel .mock-ui { width: 100%; height: auto; border-radius: 12px; }
.split .h3 { margin-bottom: 12px; }
.split p { color: var(--muted); max-width: 42ch; }

/* lista realnych funkcji (podstrony) */
.features { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 14px; max-width: 46ch; }
.features li { position: relative; padding-left: 28px; color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
.features li strong { color: var(--ink); font-weight: 600; }
.features li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px;
  border: 1.5px solid var(--azure-deep); border-radius: 3px;
}
.panel .features { margin-top: 0; }
.panel.dark .features li { color: var(--on-navy); }
.panel.dark .features li strong { color: var(--on-navy-hi); }
.panel.dark .features li::before { border-color: var(--azure-glow); }
.nfz { background: var(--paper); border-left: 2px solid var(--azure-deep); padding: clamp(24px,3vw,36px); border-radius: 0 var(--r-card) var(--r-card) 0; margin-top: clamp(48px,8vh,96px); }
.nfz .h3 { margin-bottom: 10px; }
.nfz p { color: var(--muted); max-width: 56ch; }
.subcta { text-align: center; }
.subcta .h2 { margin-bottom: 24px; }

/* ---------- 15b. HERO DASHBOARD (MEDIA/INSIGHTS — tło Higgsfield + UI kodowane) ---------- */
.subhero-dash .wrap { grid-template-columns: minmax(280px, 0.82fr) 1.18fr; gap: clamp(20px, 3vw, 48px); }
.subhero-dash .subhero-copy { max-width: 34rem; }
.hdash { display: grid; gap: 10px; max-width: 560px; }
.hpanel { background: rgba(12,33,80,.55); border: 1px solid rgba(79,168,244,.22); border-radius: 14px; padding: 13px; backdrop-filter: blur(7px); }
.hpanel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.hpanel-h .t { font-family: var(--f-display); font-weight: 700; font-size: .92rem; color: var(--on-navy-hi); }
.hpanel-h .pill { font-size: .64rem; color: var(--on-navy); border: 1px solid rgba(79,168,244,.3); border-radius: 999px; padding: 3px 9px; }
.hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.hstat { background: rgba(255,255,255,.04); border: 1px solid rgba(79,168,244,.16); border-radius: 10px; padding: 9px 10px; }
.hstat .k { font-size: .58rem; color: var(--on-navy); letter-spacing: .01em; }
.hstat .v { font-family: var(--f-display); font-weight: 800; font-size: .92rem; color: var(--on-navy-hi); margin-top: 3px; }
.hstat .v.up { color: #34D399; }
.hchart { width: 100%; height: auto; display: block; border-radius: 8px; }
.hgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hmini .mh { display: flex; align-items: center; gap: 7px; font-size: .68rem; color: var(--on-navy); margin-bottom: 9px; font-weight: 600; }
.hmini .mh svg { width: 16px; height: 16px; flex: none; color: var(--azure-glow); }
.hmini .big { font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; color: var(--azure-glow); line-height: 1; }
.hmini .big.green { color: #34D399; }
.hmini .ms { font-size: .64rem; color: var(--on-navy); margin-top: 4px; }
.hbtn { font-size: .64rem; font-weight: 600; color: #fff; background: var(--azure-deep); border-radius: 7px; padding: 5px 11px; display: inline-block; white-space: nowrap; }
.htile-img { width: 100%; height: 50px; object-fit: cover; border-radius: 8px; display: block; margin: 4px 0 7px; }
.htag { font-size: .6rem; font-weight: 600; color: #34D399; background: rgba(52,211,153,.14); border-radius: 999px; padding: 3px 9px; }
.hbar { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: .64rem; color: var(--on-navy); }
.hbar .lab { width: 42%; flex: none; color: var(--on-navy-hi); }
.hbar .trk { flex: 1; height: 5px; background: rgba(255,255,255,.09); border-radius: 3px; overflow: hidden; }
.hbar .trk i { display: block; height: 100%; background: linear-gradient(90deg, #0E9F9A, #34D399); border-radius: 3px; }
.hbar .val { width: 30px; flex: none; text-align: right; color: var(--on-navy-hi); font-weight: 700; }
.hrec { display: flex; gap: 10px; align-items: flex-start; }
.hrec .star { width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(52,211,153,.16); display: grid; place-items: center; color: #34D399; }
@media (max-width: 920px) { .subhero-dash .wrap { grid-template-columns: 1fr; } .hstats { grid-template-columns: repeat(2,1fr); } .hgrid3 { grid-template-columns: 1fr; } }

/* ---------- 15c. SEKCJE PODSTRON (Zakres / Rezultaty / checklist / tool-flow) ---------- */
.sec-head2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; margin-bottom: clamp(28px, 4vh, 44px); }
.sec-head2 .h2 { margin: 8px 0 0; }
.sec-head2 .lead { margin: 0; }
.feat6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .feat4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat4 { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; }
.checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); font-size: 1rem; }
.checks .ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.tflow { display: flex; align-items: stretch; gap: 8px; }
.tflow-card { flex: 1 1 0; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; }
.tflow-card .tg { margin-bottom: 10px; }
.tflow-card p { font-size: .85rem; color: var(--muted); }
.tflow-card.active { border-color: var(--accent-tool, var(--azure-deep)); box-shadow: 0 0 0 1.5px var(--accent-tool, var(--azure-deep)) inset; }
.tflow-arrow { align-self: center; color: var(--muted); flex: none; }
@media (max-width: 860px) { .sec-head2 { grid-template-columns: 1fr; } .feat6 { grid-template-columns: 1fr; } .checks { grid-template-columns: 1fr; } .tflow { flex-direction: column; } .tflow-arrow { transform: rotate(90deg); align-self: center; } }

/* ---------- 15d. DOC — pełne grafiki sekcji klienta + CTA badges ---------- */
.doc-shot { width: 100%; height: auto; display: block; border-radius: var(--r-card); }
.doc-band { background: var(--paper); }
.doc-band .wrap { max-width: 1160px; }
.cta-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 30px; margin-top: 10px; }
.cta-badges span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--on-navy); font-weight: 500; }
.cta-badges svg { width: 18px; height: 18px; color: var(--azure-glow); flex: none; }

/* ---------- 15e. RYNEK / CARE / MEMORY / CTA-2col (nowa strona główna) ---------- */
.market { background: var(--paper); padding-block: clamp(40px, 5vh, 64px); }
.market .h2 { line-height: 1.08; }
.market p { color: var(--muted); }
.market-grid { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.market-copy { max-width: 38rem; }
.market-copy .market-payoff { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--azure-deep); margin-top: 14px; }
.flowmap-anim { width: 100%; }
@media (max-width: 860px) { .market-grid { grid-template-columns: 1fr; } .market-copy { max-width: none; text-align: center; margin: 0 auto; } }
.flowmap-svg { width: 100%; height: auto; display: block; overflow: visible; }
.flowmap-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.flowmap-labels span { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 2px; }
.flowmap-labels b { font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: var(--ink); line-height: 1.15; }
.flowmap-labels i { font-style: normal; font-size: .78rem; color: var(--muted); line-height: 1.2; margin-top: 3px; }

/* animowany obieg (pętla): linia rysuje się, kometa jedzie, kółka zapalają się po kolei */
.fm-base { stroke: var(--azure); stroke-width: 2.5; opacity: .26; stroke-linecap: round; }
.fm-draw { stroke: var(--azure); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 1px 5px rgba(19,132,236,.45)); }
.fm-disc { fill: var(--white); stroke: var(--line); stroke-width: 1.6; }
.fm-ic { stroke: var(--azure-deep); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fm-halo { fill: none; stroke: var(--azure-glow); stroke-width: 2; opacity: 0; }
.fm-comet { fill: var(--azure-glow); opacity: 0; offset-path: path("M100,96 C200,96 200,140 300,140 S400,72 500,72 S600,140 700,140 S800,96 900,96"); offset-rotate: 0deg; filter: drop-shadow(0 0 7px rgba(79,168,244,.95)); }
.fm-node { transform-box: fill-box; transform-origin: center; }

.fm-draw { animation: fmDraw 5s linear infinite; }
.fm-comet { animation: fmComet 5s linear infinite; }
.fm-node { animation: fmPop 5s ease-out infinite; }
.fm-disc { animation: fmDisc 5s ease-out infinite; }
.fm-halo { animation: fmHalo 5s ease-out infinite; }

@keyframes fmDraw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  6%   { opacity: 1; }
  56%  { stroke-dashoffset: 0; opacity: 1; }
  86%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes fmComet {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  56%  { offset-distance: 100%; opacity: 1; }
  64%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes fmPop {
  0%, 100% { transform: scale(1); }
  3%       { transform: scale(1.16); }
  13%      { transform: scale(1); }
}
@keyframes fmDisc {
  0%   { stroke: var(--line); stroke-width: 1.6; }
  3%   { stroke: var(--azure); stroke-width: 2.8; }
  45%  { stroke: var(--azure-deep); stroke-width: 2.2; }
  62%  { stroke: var(--line); stroke-width: 1.6; }
  100% { stroke: var(--line); stroke-width: 1.6; }
}
@keyframes fmHalo {
  0%   { r: 34px; opacity: 0; }
  3%   { opacity: .55; }
  28%  { r: 60px; opacity: 0; }
  100% { r: 60px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-draw, .fm-comet, .fm-node, .fm-disc, .fm-halo { animation: none !important; }
  .fm-draw { stroke-dashoffset: 0; opacity: 1; }
  .fm-disc { stroke: var(--azure-deep); }
  .fm-comet { display: none; }
}
@media (max-width: 860px) { .flowmap-labels b { font-size: .72rem; } .flowmap-labels i { font-size: .6rem; } }

/* sekcja CARE — zwarta, by ścieżka + CARE mieściły się na jednym widoku */
.problem:has(.care-grid) { padding-block: clamp(34px, 4vh, 56px); }
.problem:has(.care-grid) .sub { margin-bottom: clamp(18px, 2.5vh, 30px); }
.care-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(18px, 2.5vh, 30px); text-align: left; }
.care-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 18px; transition: transform var(--t-fast) var(--ease-in), box-shadow var(--t-fast); }
.care-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(8,22,52,.08); }
.care-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.care-letter { font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1; }
.care-top svg { width: 26px; height: 26px; flex: none; }
.care-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }
.care-card p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
@media (max-width: 860px) { .care-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .care-grid { grid-template-columns: 1fr; } }

.memory { position: relative; background: var(--white); overflow: hidden; }
.memory-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.memory-bg img {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: clamp(560px, 62%, 980px); height: auto; display: block;
  opacity: 0; transition: opacity 1s var(--ease-in);
  -webkit-mask-image: radial-gradient(120% 100% at 78% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 78% 50%, #000 30%, transparent 78%);
}
.memory-bg img.loaded { opacity: .55; }
/* biel po lewej, by tekst leżał na czystym tle, a fala miękko wtapiała się po prawej */
.memory-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--white) 0%, var(--white) 30%, rgba(255,255,255,.45) 58%, transparent 80%);
}
.memory .wrap { position: relative; z-index: 1; }
.memory-copy { max-width: 48ch; }
.memory .mem-payoff { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); margin-top: 20px; line-height: 1.22; }
@media (max-width: 860px) {
  .memory-bg img { width: 130%; right: -15%; }
  .memory-bg::after { background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.82) 100%); }
}

/* ---------- 15f. REP (przebudowa wg mockupu klienta) ---------- */
/* etykieta warstwy w kartach WEB/APP + lista funkcji w karcie */
.layer-ic { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; background: var(--mist); color: var(--azure-deep); align-items: center; justify-content: center; margin-bottom: 16px; }
.layer-ic svg { width: 24px; height: 24px; }
.layer-label { display: inline-block; font-family: var(--f-text); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azure-deep); margin-bottom: 8px; }
/* bullety REP = niebieskie kółko z checkiem (wzór mockupu) */
.page-rep .features li { padding-left: 30px; }
.page-rep .features li::before {
  content: ""; width: 20px; height: 20px; border: 0; border-radius: 0; top: 1px; left: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231384EC'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* proces „Jak to działa" — nagłówek lewo + 3 kroki z ikonami i przerywanymi strzałkami (wzór mockupu) */
.repproc-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.repflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.repstep { position: relative; }
.repstep-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--azure-deep); box-shadow: 0 8px 22px rgba(8,22,52,.06); position: relative; z-index: 1; }
.repstep-ic svg { width: 26px; height: 26px; }
.repstep:not(:last-child)::before { content: ""; position: absolute; top: 30px; left: 70px; right: -18px; border-top: 2px dashed rgba(19,132,236,.42); z-index: 0; }
.repstep:not(:last-child)::after { content: ""; position: absolute; top: 26px; right: -22px; width: 7px; height: 7px; border-top: 2px solid rgba(19,132,236,.6); border-right: 2px solid rgba(19,132,236,.6); transform: rotate(45deg); z-index: 0; }
.repstep-num { display: inline-block; margin: 16px 0 8px; font-family: var(--f-display); font-weight: 800; font-size: .8rem; color: var(--azure-deep); letter-spacing: .08em; }
.repstep h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin-bottom: 8px; }
.repstep p { color: var(--muted); font-size: .95rem; line-height: 1.5; }
@media (max-width: 900px) {
  .repproc-grid { grid-template-columns: 1fr; }
  .repflow { grid-template-columns: 1fr; gap: 22px; }
  .repstep:not(:last-child)::before, .repstep:not(:last-child)::after { display: none; }
}
.card .features { margin-top: 18px; max-width: none; }
.card .features li { font-size: .92rem; }
/* warstwy WEB / mobile jedna pod drugą — karta pozioma: opis lewo, funkcje (2 kolumny) prawo */
.flagships-stack { grid-template-columns: 1fr; gap: 18px; }
.flagships-stack .card { display: grid; grid-template-columns: minmax(220px, .82fr) 1.18fr; column-gap: clamp(24px, 3vw, 52px); row-gap: 4px; align-items: start; }
.flagships-stack .card > .layer-label,
.flagships-stack .card > .h3,
.flagships-stack .card > p { grid-column: 1; }
.flagships-stack .card > .features { grid-column: 2; grid-row: 1 / 4; align-self: center; grid-template-columns: 1fr 1fr; column-gap: 26px; margin-top: 0; }
@media (max-width: 820px) {
  .flagships-stack .card { grid-template-columns: 1fr; }
  .flagships-stack .card > .features { grid-column: 1; grid-row: auto; margin-top: 18px; }
}
@media (max-width: 520px) { .flagships-stack .card > .features { grid-template-columns: 1fr; } }
/* dane wracają — ciemny pas z kartami metryk */
.repdata { background: linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: var(--on-navy-hi); }
.repdata .sub { color: var(--on-navy); max-width: 64ch; }
.repdata-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(28px, 4vh, 44px); }
.repdata-card { background: rgba(255,255,255,.05); border: 1px solid rgba(79,168,244,.18); border-radius: var(--r-card); padding: 28px 24px; transition: transform var(--t-fast) var(--ease-in), border-color var(--t-fast); }
.repdata-card:hover { transform: translateY(-4px); border-color: rgba(79,168,244,.42); }
.repdata-tag { display: block; font-family: var(--f-text); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy); margin-bottom: 8px; }
.repdata-val { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.7rem); color: var(--azure-glow); letter-spacing: -.03em; line-height: 1; margin-bottom: 14px; }
.repdata-val svg { width: 40px; height: 40px; display: block; }
.repdata-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: var(--on-navy-hi); margin-bottom: 8px; }
.repdata-card p { color: var(--on-navy); font-size: .92rem; line-height: 1.5; }
@media (max-width: 980px) { .repdata-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .repdata-grid { grid-template-columns: 1fr; } }
/* integracja „Dokłada się do tego, co macie" — 3 karty (wzór GPT) */
.repfit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(24px, 4vh, 40px); }
@media (max-width: 900px) { .repfit-grid { grid-template-columns: 1fr; } }

.cta-band .cta-panel { background: rgba(255,255,255,.07); border: 1px solid rgba(79,168,244,.28); border-radius: var(--r-card); padding: clamp(20px, 2.5vw, 28px); max-width: 430px; }
.cta-band .cta-panel p { color: var(--on-navy); margin-bottom: 16px; font-size: .98rem; }
.cta-band .cta-panel .btn-primary { width: 100%; justify-content: center; }
@media (max-width: 820px) { .cta-band .cta-panel { max-width: none; width: 100%; } }

/* ---------- 15h. TriggerMedia (przebudowa wg mockupu klienta) ---------- */
/* hero — akcent fioletowy + podtytuł */
.subhero-violet .accent { color: #A78BFA; }
/* większe logo trigger MEDIA w hero */
.tg-hero { gap: 9px; }
.tg-hero .tgm { width: 42px; }
.tg-hero b { font-size: 1.7rem; }
.tg-hero em { font-size: 1.15rem; letter-spacing: .1em; }
/* kolaż hero — wtopiony w tło: miękkie krawędzie + delikatny cień zamiast twardego kwadratu */
.subhero-violet .subhero-visual { margin-right: 0; }
.subhero-violet .subhero-visual img {
  width: 100%; max-width: none; border-radius: 24px;
  -webkit-mask-image: radial-gradient(135% 125% at 52% 46%, #000 56%, transparent 100%);
          mask-image: radial-gradient(135% 125% at 52% 46%, #000 56%, transparent 100%);
  filter: drop-shadow(0 30px 64px rgba(0,0,0,.5));
}
@media (max-width: 920px) {
  .subhero-violet .subhero-visual img { border-radius: 16px; -webkit-mask-image: none; mask-image: none; filter: none; }
}
.subhero-sub { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.02rem, 1.6vw, 1.35rem); color: #A78BFA; margin: 8px 0 18px; }
/* proces „Od strategii do działania" — 3 kroki z numerem, ikoną, tagami i strzałkami */
.mwork-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px); }
.mwork-step { position: relative; }
.mwork-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-weight: 800; font-size: .85rem; margin-bottom: 18px; position: relative; z-index: 1; }
.mwork-step:nth-child(1) .mwork-num { background: #7C3AED; }
.mwork-step:nth-child(2) .mwork-num { background: var(--azure-deep); }
.mwork-step:nth-child(3) .mwork-num { background: #0E9F9A; }
/* łącznik między krokami — gradientowa „żyjąca" linia + strzałka */
.mwork-step:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: 52px; right: -30px; height: 3px; border-radius: 2px; z-index: 0;
  background: linear-gradient(90deg, #7C3AED, #1384EC, #7C3AED); background-size: 220% 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  animation: mflow 2.6s linear infinite;
}
.mwork-step:nth-child(2):not(:last-child)::after { background: linear-gradient(90deg, #1384EC, #0E9F9A, #1384EC); background-size: 220% 100%; }
.mwork-step:not(:last-child)::before {
  content: ""; position: absolute; top: 11px; right: -30px; width: 8px; height: 8px; z-index: 1;
  border-top: 2.5px solid #1384EC; border-right: 2.5px solid #1384EC; transform: rotate(45deg);
}
.mwork-step:nth-child(2):not(:last-child)::before { border-color: #0E9F9A; }
@keyframes mflow { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .mwork-step:not(:last-child)::after { animation: none !important; } }
.mwork-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(124,58,237,.1); color: #7C3AED; display: grid; place-items: center; margin-bottom: 14px; }
.mwork-ic svg { width: 24px; height: 24px; }
.mwork-step h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.14rem; color: var(--ink); margin-bottom: 8px; }
.mwork-step p { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.mtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mtag { font-size: .72rem; font-weight: 600; color: #6D28D9; background: rgba(124,58,237,.1); border-radius: 999px; padding: 5px 11px; }
@media (max-width: 860px) { .mwork-grid { grid-template-columns: 1fr; } .mwork-step:not(:last-child)::after { display: none; } }
/* rezultaty — duża karta statystyki + siatka 2×2 */
.mres-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(18px, 2vw, 26px); align-items: stretch; margin-top: clamp(28px, 4vh, 44px); }
.mstat { position: relative; overflow: hidden; color: #fff; border-radius: var(--r-scene); padding: clamp(30px, 3.2vw, 46px); display: flex; flex-direction: column;
  background: linear-gradient(155deg, #7C3AED 0%, #5B21B6 48%, #3B1178 100%); }
/* żywa grafika tła (sieć HCP) + delikatne rozświetlenie */
.mstat::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("../media/media-hcp-base.jpg"); background-size: cover; background-position: center; opacity: .85; }
.mstat::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 75% 12%, rgba(216,180,254,.35), transparent 55%), linear-gradient(180deg, transparent 30%, rgba(43,12,90,.55) 100%); }
.mstat > * { position: relative; z-index: 1; }
.mstat-ic { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); display: grid; place-items: center; margin-bottom: 22px; }
.mstat-ic svg { width: 26px; height: 26px; }
.mstat-big { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.03em; text-shadow: 0 2px 18px rgba(43,12,90,.5); }
.mstat-sub { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin: 8px 0 12px; }
.mstat p { color: rgba(255,255,255,.85); font-size: .96rem; line-height: 1.5; }
.mstat-badge { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 13px 15px; border-radius: 14px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); margin-top: clamp(20px, 4vh, 36px); }
.mstat-badge svg { width: 22px; height: 22px; flex: none; }
.mstat-badge span { font-size: .9rem; line-height: 1.35; color: #fff; font-weight: 500; }
.mstat-badge b { font-weight: 800; }
/* karty wyników — „żyją": hover + akcent; CTOR animowany */
.mres-card { transition: transform var(--t-fast) var(--ease-in), box-shadow var(--t-fast) var(--ease-in), border-color var(--t-fast); }
.mres-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.4); box-shadow: 0 20px 44px rgba(76,29,149,.12); }
.mres-ctor .ctor-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.mres-ctor .ctor-lab { font-weight: 700; color: var(--muted); font-size: .8rem; letter-spacing: .08em; }
.mres-ctor .mres-big { font-size: 1.7rem; }
.ctor-up { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; font-weight: 800; font-size: .82rem; margin-left: auto; }
.ctor-up svg { width: 15px; height: 15px; }
.ctor-chart { width: 100%; height: 64px; display: block; }
.ctor-ln { fill: none; stroke: #7C3AED; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 360; }
.ctor-area { opacity: 0; }
.mres-ctor.in .ctor-ln { animation: ctorDraw 1.5s var(--ease-out) forwards; }
.mres-ctor.in .ctor-area { animation: ctorFade .7s 1s var(--ease-in) forwards; }
@keyframes ctorDraw { to { stroke-dashoffset: 0; } }
@keyframes ctorFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ctor-ln { stroke-dashoffset: 0; } .ctor-area { opacity: 1; } }
.mres-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 20px); }
.mres-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; }
.mres-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; color: var(--ink); margin-bottom: 6px; }
.mres-card p { color: var(--muted); font-size: .89rem; line-height: 1.45; margin-bottom: 12px; }
.mres-card .spacer { flex: 1; }
.mres-shot { width: 100%; height: 92px; object-fit: cover; border-radius: 10px; display: block; }
.mres-big { font-family: var(--f-display); font-weight: 900; font-size: 1.7rem; color: #6D28D9; line-height: 1; }
.mres-big .u { font-size: .9rem; color: var(--muted); font-weight: 600; margin-left: 6px; }
.mbar { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: .82rem; }
.mbar .lab { width: 38%; flex: none; color: var(--ink); }
.mbar .trk { flex: 1; height: 6px; background: rgba(124,58,237,.12); border-radius: 3px; overflow: hidden; }
.mbar .trk i { display: block; height: 100%; background: linear-gradient(90deg, #7C3AED, #A78BFA); border-radius: 3px; }
.mbar .val { width: 42px; flex: none; text-align: right; color: var(--ink); font-weight: 700; }
.mres-chart { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .mres-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mres-cards { grid-template-columns: 1fr; } }

/* ---------- 15i. TriggerInsights (przebudowa wg mockupu) ---------- */
/* kolaż/dashboard hero — miękkie wtopienie (reużywalne, nie psuje doc subhero-teal) */
.subhero-collage { margin-right: 0; }
.subhero-collage img {
  width: 100%; max-width: none; border-radius: 22px;
  -webkit-mask-image: radial-gradient(135% 125% at 50% 48%, #000 60%, transparent 100%);
          mask-image: radial-gradient(135% 125% at 50% 48%, #000 60%, transparent 100%);
  filter: drop-shadow(0 28px 62px rgba(0,0,0,.5));
}
@media (max-width: 920px) { .subhero-collage img { border-radius: 14px; -webkit-mask-image: none; mask-image: none; filter: none; } }
/* dwie warstwy — Analyze / Ask */
.ilayer-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; margin-bottom: 18px; }
.ilayer-q { color: var(--muted); font-size: .96rem; margin: -2px 0 14px; }
.icheck { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.icheck li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: .96rem; }
.icheck li svg { width: 20px; height: 20px; flex: none; }
/* lista funkcji z ikoną */
.irow { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--line); }
.irow:first-child { border-top: 0; padding-top: 0; }
.irow-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(14,159,154,.1); color: #0E9F9A; display: grid; place-items: center; flex: none; }
.irow-ic svg { width: 21px; height: 21px; }
.irow h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.04rem; color: var(--ink); margin: 0 0 3px; }
.irow p { color: var(--muted); font-size: .9rem; line-height: 1.45; margin: 0; }
/* proces 4-krokowy + teal */
.mwork-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .mwork-grid.four { grid-template-columns: repeat(2, 1fr); } .mwork-grid.four .mwork-step:nth-child(2)::after { display: none; } }
@media (max-width: 560px) { .mwork-grid.four { grid-template-columns: 1fr; } }
.mwork-teal .mwork-num { background: #0E9F9A; }
.mwork-teal .mwork-ic { background: rgba(14,159,154,.1); color: #0E9F9A; }
.mwork-teal .mwork-step:not(:last-child)::after,
.mwork-teal .mwork-step:nth-child(2):not(:last-child)::after { background: linear-gradient(90deg, #0E9F9A, #34D399, #0E9F9A); background-size: 220% 100%; }
.mwork-teal .mwork-step:not(:last-child)::before { border-color: #0E9F9A; }
.mwork-teal .mtag { color: #0a756f; background: rgba(14,159,154,.12); }
/* mini-karty badań (light) */
.ires-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ires-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.ires-card .lab { font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.ires-big { font-family: var(--f-display); font-weight: 900; font-size: 2rem; color: #0E9F9A; line-height: 1; }
.istars { color: #0E9F9A; letter-spacing: 3px; font-size: 1.15rem; }
@media (max-width: 560px) { .ires-grid { grid-template-columns: 1fr; } }
/* kondensacja całej zakładki Insights — mniej światła, lepsze skalowanie */
.page-insights section:not(.subhero):not(.cta-band) { padding-block: clamp(38px, 4.6vh, 66px); }
.page-insights .sec-head2 { margin-bottom: clamp(22px, 3.4vh, 36px); }
.page-insights .card { padding: clamp(20px, 2.2vw, 28px); }
.page-insights .ilayer-ic { width: 46px; height: 46px; margin-bottom: 14px; }
.page-insights .ilayer-q { margin: -2px 0 10px; font-size: .92rem; }
.page-insights .card > p { font-size: .92rem; line-height: 1.5; max-width: none; }
.page-insights .icheck { margin-top: 14px; gap: 10px; }
.page-insights .icheck li { font-size: .92rem; }
.page-insights .irow { padding: 11px 0; }
.page-insights .irow h4 { font-size: 1rem; }
.page-insights .ires-card { padding: 16px; }
.page-insights .ires-big { font-size: 1.7rem; }
.page-insights .split { gap: clamp(24px, 3vw, 44px); align-items: start; }

/* ---------- 16. MEDIA PLACEHOLDER ---------- */
.media-ph { position: relative; }
.media-ph .ph-note {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  font-family: var(--f-text); font-size: 10px; letter-spacing: .04em;
  color: rgba(255,255,255,.5); background: rgba(8,22,52,.5); padding: 3px 7px; border-radius: 4px;
  pointer-events: none;
}
body:not(.dev) .ph-note { display: none; }

/* ---------- 17. MOBILE ---------- */
/* NAV → hamburger gdy 6 pozycji się nie mieści (≤1200) */
@media (max-width: 1200px) {
  .menu-btn { display: inline-flex; }
  .nav, .header-right .lang { display: none; }
  .header .nav.open {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 72px; left: 0; right: 0; z-index: 120;
    background: var(--navy-900); backdrop-filter: blur(10px);
    padding: 24px var(--gutter) 32px; border-bottom: 1px solid rgba(215,225,239,.12);
    min-height: calc(100dvh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .header .nav.open > .lang { display: inline-flex; align-self: flex-start; }
  /* touch targets ≥44px w menu */
  .header .nav.open a { padding: 9px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .lang button { padding: 10px 14px; }
}

@media (max-width: 920px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-orbit-cue { display: none; }
  .hero-copy, .hero .lead { max-width: none; }

  .scene-stage { grid-template-columns: 1fr; gap: 24px; }
  .scene-beats { order: 2; }

  .flagships, .closers, .contact .wrap, .footer .wrap, .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .card.doc { margin-top: 0; }
  .footer .f-brand { grid-column: 1 / -1; }
}

/* ---------- 18. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .change-lines .ln { opacity: 1 !important; transform: none !important; transition: none !important; }
  .beat-verbs .bv { opacity: 1 !important; }
  .scene-close .close-line, .scene-close .climax { opacity: 1 !important; }
  .orbit .node circle { stroke: var(--azure) !important; }
  .orbit .node .bloom { opacity: .12 !important; }
  .hero .h1 .mark::after { transform: scaleX(1) !important; }
  .scroll-cue .chev { animation: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}