/* ═══ AGENTIFY — RED corporate deck: white, crimson & graphite, section ribbons, B&W photos, diagonal shapes ═══ */
:root {
  --sage: #d7262e;
  --sage-2: #aa181f;
  --sage-soft: rgba(215, 38, 46, .16);
  --sky: #5b5f68;
  --sky-soft: rgba(58, 61, 68, .35);
  --slate: #1f2024;
  --mist: #f2f2f3;
  --rose: #f07a80;
  --rose-soft: rgba(215, 38, 46, .35);
  --ink: #1f2024;
  --text: #3c3f46;
  --muted: #6b6e76;
  --dim: #9a9da4;
  --glass: rgba(255, 255, 255, .46);
  --glass-2: rgba(255, 255, 255, .62);
  --glass-line: rgba(255, 255, 255, .7);
  --line: rgba(31, 32, 36, .1);
  --ok: #2f855a;
  --r: 4px;
  --r-sm: 3px;
  --side: 268px;
  --font: Roboto, 'Segoe UI', system-ui, sans-serif;
  --head: Oswald, 'Arial Narrow', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --blur: none;
  --shadow: 0 22px 44px -26px rgba(31, 32, 36, .4), 0 2px 6px rgba(31, 32, 36, .04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: #e9eaec; color: var(--text); font: 400 15.5px/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.2; font-family: var(--head); font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* misty landscape backdrop (fixed layer, safe on mobile) */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(242,242,243,.35), rgba(242,242,243,.15) 40%, rgba(236,237,239,.55)), url('img/mist-bg.jpg') center / cover no-repeat; }
.bg > * { display: none; }

/* glass surfaces */
.glass, .card, .panel, .sec, .side, .top__glass { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.card, .panel { position: relative; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.panel { padding: 24px; }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel__head h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.panel__head p { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ═══ SHELL ═══ */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; gap: 0; }
.side { position: sticky; top: 16px; height: calc(100vh - 32px); margin: 16px 0 16px 16px; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden auto; }
.side > * { flex: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: .06em; color: var(--ink); }
.side .brand { padding: 24px 22px 20px; }
.brand__mark { position: relative; width: 36px; height: 36px; border-radius: 11px; background: var(--sage); box-shadow: 0 8px 16px -8px rgba(215,38,46,.9); }
.brand__mark i { position: absolute; bottom: 10px; width: 9px; height: 15px; background: rgba(255,255,255,.95); border-radius: 100% 0; }
.brand__mark i:first-child { left: 9px; transform: rotate(-20deg); }
.brand__mark i:last-child { right: 9px; transform: scaleX(-1) rotate(-20deg); }
.brand__mark::after { content: ''; position: absolute; left: 50%; bottom: 9px; width: 8px; height: 17px; margin-left: -4px; background: #fff; border-radius: 50% 50% 40% 40%; }

.side__label { margin: 4px 22px 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.navi { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--text); font-size: 14.5px; transition: background .2s, color .2s; }
.navi > .i { display: none; }
.navi__n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--sage-2); background: rgba(255,255,255,.6); border: 1px solid rgba(215,38,46,.25); }
.navi:hover { background: rgba(255,255,255,.45); }
.navi.is-active { background: var(--sage); color: #fff; font-weight: 500; box-shadow: 0 10px 20px -12px rgba(215,38,46,.95); }
.navi.is-active .navi__n { background: rgba(255,255,255,.95); border-color: transparent; }

.side__foot { margin-top: auto; padding: 16px 12px; display: grid; gap: 10px; }
.progress { display: flex; align-items: center; gap: 14px; padding: 14px; background: rgba(255,255,255,.5); border: 1px solid var(--glass-line); border-radius: 16px; box-shadow: none; }
.progress__lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.progress__cur { font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--ink); }
.ring { --p: 0; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--sage) calc(var(--p) * 1%), rgba(215,38,46,.15) 0); }
.progress .ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fbe9ea; }
.progress .ring > span { position: relative; z-index: 1; font-size: 12px; font-weight: 600; color: var(--sage-2); }
.side__cta { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; background: var(--sage); color: #fff; box-shadow: 0 12px 24px -14px rgba(215,38,46,1); transition: background .2s; }
.side__cta:hover { background: var(--sage-2); }
.side__cta .i { width: 20px; height: 20px; }
.side__cta strong { display: block; font-size: 14px; font-weight: 600; }
.side__cta small { display: block; font-size: 12px; opacity: .85; }

/* ═══ TOPBAR ═══ */
.main { min-width: 0; padding: 0 28px; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 16px 0 12px; }
.crumb { display: flex; gap: 8px; align-items: baseline; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.5); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); font-size: 13.5px; color: var(--muted); }
.crumb em { font-style: normal; }
.crumb strong { color: var(--ink); font-weight: 600; }
.top__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top .top__menu, .top .brand--top { display: none; }
.brand--top { font-size: 15px; }
.brand--top .brand__mark { width: 30px; height: 30px; border-radius: 9px; }

.lang { display: flex; align-items: center; gap: 2px; padding: 3px 3px 3px 12px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--muted); }
.lang button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lang button.is-on { background: var(--sage); color: #fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; border: 1px solid var(--glass-line); background: rgba(255,255,255,.55); color: var(--ink); white-space: nowrap; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background .2s, transform .2s, box-shadow .2s; }
.btn:hover { background: rgba(255,255,255,.8); transform: translateY(-1px); }
.btn:active { background: var(--slate); color: #fff; }
.btn--primary { background: var(--sage); border-color: transparent; color: #fff; box-shadow: 0 12px 22px -14px rgba(215,38,46,1); }
.btn--primary:hover { background: var(--sage-2); }
.btn--lg { padding: 14px 26px; font-size: 15px; border-radius: 14px; }
.btn--sm { padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }
.iconbtn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--glass-line); background: rgba(255,255,255,.55); color: var(--ink); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* ═══ SECTIONS — frosted panels ═══ */
.sec { position: relative; max-width: 1240px; margin: 0 0 22px; padding: 44px 46px 42px; background: rgba(255,255,255,.34); border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: var(--shadow); isolation: isolate; }
.sec__head { max-width: 780px; margin-bottom: 30px; }
.kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.kicker span { font-weight: 700; }
.sec__head h2, .contact h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.01em; margin: 12px 0 14px; }
.lead { color: var(--text); font-size: 16px; }
.grad { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--sage); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); display: inline-block; animation: blink 2.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* intro = headline + soft rounded photo card */
.intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 36px; align-items: center; margin-bottom: 34px; }
.intro .sec__head { margin: 0; }
.ph { position: relative; margin: 0; width: 100%; max-width: 300px; aspect-ratio: 4 / 4.4; justify-self: end; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--glass-line); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(.95) brightness(1.05); }
.ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58,61,68,.18), rgba(215,38,46,.25)); }

/* ═══ HERO — kit title + landscape card ═══ */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; padding: 0 0 24px; margin-top: 4px; }
.cover { grid-column: 1 / -1; position: relative; min-height: 540px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px; align-items: center; padding: 26px; }
.hero__copy { padding: 30px 20px 30px 26px; order: 1; }
.cover__img { order: 2; width: 100%; height: 100%; min-height: 470px; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--glass-line); grid-column: 2; grid-row: 1; }
.hero__copy { grid-column: 1; grid-row: 1; }
.cover__tab { position: absolute; right: 50px; bottom: 50px; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.72); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.cover__tab::after { content: ''; position: absolute; left: 22px; top: 18px; border-left: 15px solid var(--slate); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.cover::after { content: ''; position: absolute; left: calc(56% + 28px); bottom: 50px; width: 150px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.75); box-shadow: 0 16px 0 -2px rgba(255,255,255,.5); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid var(--glass-line); font-size: 13px; font-weight: 500; color: var(--text); }
.hero h1 { font-family: var(--head); font-size: clamp(38px, 4.6vw, 64px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 22px 0 18px; color: var(--slate); }
.hero h1 .grad { display: block; font-size: 1.12em; letter-spacing: -.005em; line-height: 1.05; margin-top: 4px; }
.hero .lead { max-width: 520px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.feed { grid-column: 2; grid-row: 2; margin-right: 26px; padding: 22px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--sage-2); background: var(--sage-soft); padding: 5px 12px; border-radius: 999px; }
.feed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 340px; align-content: start; }
.fi { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); animation: fin .5s ease both; }
.fi b { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.fi small { font-size: 12px; color: var(--muted); display: block; }
.fi time { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
@keyframes fin { from { opacity: 0; transform: translateY(-8px); } }
.feed__foot { display: flex; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.feed__foot > span { flex: 1; padding: 12px 14px; border-radius: 14px; background: var(--sage-soft); }
.feed__foot > span + span { background: var(--rose-soft); }
.feed__foot b { display: block; font-family: var(--head); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; }

.kpis { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-left: 26px; align-content: start; }
.kpi { display: flex; gap: 14px; padding: 18px; }
.kpi__ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--sage-2); background: rgba(255,255,255,.75); border: 1px solid rgba(215,38,46,.25); }
.kpi__ic .i { width: 20px; height: 20px; }
.kpi:nth-child(2) .kpi__ic { color: #3a3d44; border-color: rgba(58,61,68,.3); }
.kpi:nth-child(3) .kpi__ic { color: var(--slate); }
.kpi:nth-child(4) .kpi__ic { color: #d7262e; border-color: rgba(215,38,46,.3); }
.kpi__l { font-size: 12px; color: var(--muted); }
.kpi__v { font-family: var(--head); font-size: 19px; font-weight: 700; color: var(--ink); margin: 1px 0; }
.kpi__s { font-size: 12.5px; color: var(--sage-2); }

/* problems — soft cards with mood-like circle numbers */
.alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: pr; }
.alert { display: block; padding: 22px; counter-increment: pr; transition: transform .25s, background .25s; }
.alert::before { content: counter(pr, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; font-family: var(--head); font-size: 14px; font-weight: 700; color: var(--slate); background: var(--sky-soft); border: 1px solid rgba(255,255,255,.8); }
.alert:nth-child(3n+2)::before { background: var(--sage-soft); }
.alert:nth-child(3n)::before { background: var(--rose-soft); }
.alert > .alert__ic { display: none; }
.alert h3 { font-size: 16.5px; margin-bottom: 6px; }
.alert p { font-size: 14px; color: var(--muted); }
.alert p.alert__fix { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.55); color: var(--sage-2); font-size: 13px; font-weight: 500; }
.alert__fix .i { width: 15px; height: 15px; margin-top: 3px; }
.alert:hover { transform: translateY(-3px); background: var(--glass-2); }
.alert__ic { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.alert__ic.sm { width: 34px; height: 34px; }
.alert__ic.sm .i { width: 15px; height: 15px; }
.tone-r { color: var(--sage-2); background: var(--sage-soft); }
.tone-a { color: #d7262e; background: var(--rose-soft); }
.tone-b { color: #3a3d44; background: var(--sky-soft); }

/* network */
.net { padding: 24px; background: rgba(255,255,255,.3); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 3px; border-radius: 2px; }
.lg-p { background: #3a3d44; }
.lg-b { background: var(--sage); }
.net__stage { position: relative; height: 440px; }
.net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#gIn stop { stop-color: #3a3d44; }
#gOut stop { stop-color: #d7262e; }
.net__svg path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 5 7; stroke-linecap: round; animation: flowd 1.8s linear infinite; }
.net__in path { stroke: url(#gIn); opacity: .75; }
.net__out path { stroke: url(#gOut); opacity: .8; animation-duration: 1.4s; }
.net__v path { stroke: #d7262e; stroke-dasharray: 3 5; }
@keyframes flowd { to { stroke-dashoffset: -24; } }
.nn { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); width: 17%; min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 10px 22px -16px rgba(31,32,36,.5); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.nn b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.nn small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }
.nn__ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #3a3d44; background: var(--sky-soft); }
.nn__ic .i { width: 15px; height: 15px; }
.nn--core { background: var(--sage); border-color: transparent; }
.nn--core b { color: #fff; }
.nn--core small { color: rgba(255,255,255,.85); }
.nn--core .nn__ic { background: rgba(255,255,255,.9); color: var(--sage-2); }
.nn--hub { box-shadow: 0 0 0 7px rgba(215,38,46,.15), 0 16px 30px -12px rgba(215,38,46,.8); }
.nn--out .nn__ic { color: var(--sage-2); background: var(--sage-soft); }

/* steps — like the progress stepper (1 — 2 — 3) */
.steps4 { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.steps4::before { content: ''; position: absolute; left: 12%; right: 12%; top: 22px; height: 2px; background: rgba(215,38,46,.35); }
.step { padding: 0 8px; background: none; border: 0; box-shadow: none; text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none; }
.step__n { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 15px; font-weight: 600; color: var(--sage-2); background: #fbe9ea; border: 2px solid var(--sage); }
.step:first-child .step__n { background: var(--sage); color: #fff; }
.step h3 { font-size: 15.5px; margin: 12px 0 4px; }
.step p { font-size: 13.5px; color: var(--muted); }

/* use cases */
.uc { display: grid; grid-template-columns: 260px minmax(0, 1fr); padding: 0; overflow: hidden; background: rgba(255,255,255,.4); }
.uc__tabs { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--glass-line); background: rgba(255,255,255,.3); }
.uct { display: flex; align-items: center; gap: 12px; text-align: left; padding: 11px 14px; border-radius: 12px; border: 0; background: none; color: var(--text); font-size: 14px; transition: .2s; }
.uct .i { width: 17px; height: 17px; color: var(--sage-2); }
.uct:hover { background: rgba(255,255,255,.55); }
.uct.is-on { background: var(--sage); color: #fff; font-weight: 500; box-shadow: 0 10px 20px -12px rgba(215,38,46,.95); }
.uct.is-on .i { color: #fff; }
.ucp { display: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; padding: 28px; }
.ucp.is-on { display: grid; animation: fin .4s ease both; }
.ucp h3 { font-size: 23px; margin-bottom: 10px; }
.ucp__txt > p { color: var(--muted); }
.flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 20px 0; }
.flow span { font-size: 12.5px; font-weight: 500; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); color: var(--text); }
.flow span:first-child { background: var(--sage); color: #fff; border-color: transparent; }
.flow span:not(:last-child)::after { content: '›'; margin-left: 8px; color: var(--dim); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; font-size: 14.5px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }

.mock { align-self: start; min-width: 0; padding: 0 0 16px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.mock__h { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 16px 6px; margin: 0 0 8px; }
.mock > :not(.mock__h) { margin-left: 16px; margin-right: 16px; }
.mock__note { margin-top: 8px; }
.tbl { width: calc(100% - 32px); border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 0 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.pill--ok { color: #fff; background: var(--sage); }
.pill--warn { color: #b21e25; background: var(--rose-soft); }
.pill--info { color: #3a3d44; background: var(--sky-soft); }
.pill--p { color: var(--sage-2); background: var(--sage-soft); }
.c-ok { color: var(--ok); } .c-warn { color: #d7262e; }
.tbl .i { width: 16px; height: 16px; }

.parse { display: grid; gap: 8px; font-size: 13px; }
.parse__row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.parse__row b { color: var(--ink); font-weight: 600; }
.parse__row b.c-ok { color: var(--sage-2); }
.parse__line { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.7); }
.parse__line code { font: 600 12.5px var(--font); color: var(--ink); }
.parse__line .i { width: 14px; height: 14px; color: var(--sage); }
.parse__line .pill { margin-left: auto; }

.exc { list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; display: grid; gap: 8px; }
.exc li { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.7); }
.exc b { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.exc small { display: block; font-size: 12px; color: var(--muted); }
.approve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px dashed rgba(215,38,46,.5); font-size: 13px; }
.approve > span { margin-right: auto; }

.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 15px; font-size: 13.5px; line-height: 1.5; border-radius: 16px; }
.msg--me { align-self: flex-end; background: var(--sage); color: #fff; border-bottom-right-radius: 5px; }
.msg--ai { align-self: flex-start; background: rgba(255,255,255,.8); color: var(--ink); border-bottom-left-radius: 5px; }
.typing { display: flex; gap: 5px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }

/* capabilities */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cap { padding: 24px; transition: transform .25s, background .25s; overflow: hidden; }
.cap:hover { transform: translateY(-3px); background: var(--glass-2); }
.cap .kpi__ic { width: 48px; height: 48px; }
.cap h3 { font-size: 16.5px; margin: 16px 0 6px; }
.cap p { font-size: 14px; color: var(--muted); }
.cap--wide { grid-column: span 2; background: linear-gradient(135deg, rgba(215,38,46,.88), rgba(170,24,31,.9)); border-color: rgba(255,255,255,.35); }
.cap--wide:hover { background: linear-gradient(135deg, rgba(215,38,46,.95), rgba(170,24,31,.95)); }
.cap--wide h3, .cap--wide p { color: #fff; }
.cap--wide p { opacity: .9; }
.cap--wide .kpi__ic { background: rgba(255,255,255,.9); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chips span { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.bento > .cap:nth-child(4) { background: rgba(58,61,68,.42); }
.cap--panel { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.smp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); }
.sm__ring { position: relative; width: 112px; height: 112px; }
.ring--lg { width: 112px; height: 112px; -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%); mask: radial-gradient(circle, transparent 64%, #000 65%); background: conic-gradient(var(--sage) calc(var(--p) * 1%), rgba(215,38,46,.15) 0); }
.sm__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--head); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.05; }
.sm__val small { font-family: var(--font); font-size: 11px; font-weight: 400; color: var(--muted); }
.sm__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sm__bars li { display: grid; grid-template-columns: 42px minmax(40px, 1fr) 36px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.sm__bars i { height: 6px; border-radius: 3px; background: rgba(31,32,36,.1); position: relative; overflow: hidden; }
.sm__bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--sage); }
.sm__bars li:nth-child(2) i::after { background: var(--sky); }
.sm__bars li:nth-child(4) i::after { background: var(--rose); }
.sm__bars b { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: right; }
.sm__note { grid-column: 1 / -1; text-align: right; margin-top: -10px; font-size: 10.5px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }

/* rollout */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 12%; right: 12%; top: 50px; height: 2px; background: rgba(215,38,46,.35); }
.tl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 16px 22px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tl__n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 600; color: var(--sage-2); background: #fbe9ea; border: 2px solid var(--sage); position: relative; z-index: 1; }
.tl:first-child .tl__n { background: var(--sage); color: #fff; }
.tl h3 { font-size: 15.5px; margin-bottom: 4px; }
.tl p { font-size: 13.5px; color: var(--muted); }
.deploy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.dpc { display: flex; gap: 14px; padding: 20px; }
.dpc > .i { width: 44px; height: 44px; padding: 12px; flex: none; border-radius: 50%; color: var(--sage-2); background: var(--sage-soft); }
.dpc:nth-child(2) > .i { color: #3a3d44; background: var(--sky-soft); }
.dpc:nth-child(3) > .i { color: #d7262e; background: var(--rose-soft); }
.dpc h3 { font-size: 15.5px; margin-bottom: 4px; }
.dpc p { font-size: 13.5px; color: var(--muted); }

/* contact */
#kontakt { padding: 0; overflow: hidden; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.contact__copy { position: relative; padding: 48px 46px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, rgba(215,38,46,.9), rgba(31,32,36,.92)); color: #fff; }
.contact__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: saturate(.3); z-index: -1; mix-blend-mode: luminosity; }
.contact__copy h2, .contact__copy .kicker { color: #fff; }
.contact__copy .lead { color: rgba(255,255,255,.9); margin-bottom: 22px; }
.contact__copy .ticks li { color: #fff; }
.contact__copy .ticks li::before { background-color: rgba(255,255,255,.25); }
.contact__mail { margin-top: 26px; font-size: 14px; color: rgba(255,255,255,.85); }
.contact__mail a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.7); }
.form { display: grid; gap: 14px; padding: 46px; align-content: center; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.form input, .form textarea { font: inherit; font-size: 15px; color: var(--ink); padding: 12px 14px; border: 1px solid rgba(255,255,255,.85); border-radius: 12px; background: rgba(255,255,255,.6); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; resize: vertical; }
.form input::placeholder { color: var(--dim); }
.form input:focus, .form textarea:focus { background: rgba(255,255,255,.85); border-color: var(--sage); box-shadow: 0 0 0 4px rgba(215,38,46,.18); }
.form__status { font-size: 14px; min-height: 22px; }
.form__status.ok { color: var(--ok); } .form__status.err { color: #b21e25; }

.foot { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 20px 28px; margin: 0 0 22px; max-width: 1240px; border-radius: var(--r); background: rgba(255,255,255,.4); border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--muted); font-size: 13px; }
.foot .brand { font-size: 15px; }
.foot .brand__mark { width: 30px; height: 30px; border-radius: 9px; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__back { position: absolute; inset: 0; background: rgba(31,32,36,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__box { width: min(420px, 100%); padding: 0 0 22px; border-radius: var(--r); background: rgba(255,255,255,.75); animation: fin .3s ease both; }
.modal__box .panel__head { padding: 22px 24px 8px; margin: 0 0 10px; }
.modal__box .panel__head h3 { font-size: 20px; text-transform: none; letter-spacing: 0; }
.lopt { display: flex; align-items: center; gap: 14px; margin: 0 18px 8px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); color: var(--ink); font-weight: 500; transition: .2s; }
.lopt span { flex: 1; }
.lopt .i:first-child { width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: var(--sage-2); background: var(--sage-soft); }
.lopt:hover { background: #fff; }
.modal__foot { font-size: 13px; color: var(--muted); margin: 14px 24px 0; }
.modal__foot a { color: var(--sage-2); font-weight: 600; }

/* ═══ TECHNOLOGY — control-plane diagram on a slate glass panel ═══ */
.acp { position: relative; margin-top: 4px; padding: 42px 38px 32px; border-radius: var(--r); background: linear-gradient(160deg, rgba(31,32,36,.86), rgba(40,42,48,.8)); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; overflow: hidden; isolation: isolate; box-shadow: var(--shadow); }
.acp__head { text-align: center; }
.acp__head h3 { color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
.acp__head p { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 26px); color: #f5b3b6; }
.acp__top { position: relative; width: min(620px, 62%); margin: 28px auto 0; display: flex; justify-content: space-around; gap: 16px; padding: 18px 20px 46px; }
.acp__top::before { content: ''; position: absolute; inset: 0; border: 1.5px solid rgba(215,38,46,.7); border-bottom: 0; border-radius: 16px 16px 0 0; -webkit-mask: linear-gradient(180deg, #000 45%, transparent); mask: linear-gradient(180deg, #000 45%, transparent); }
.acp__top span { font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--rose); }
.acp__body { display: grid; grid-template-columns: minmax(0, 1fr) 330px minmax(0, 1fr); align-items: center; margin-top: -22px; }
.acp__side { position: relative; display: grid; gap: 22px; padding: 30px 26px; }
.acp__side::before { content: ''; position: absolute; inset: 0; border: 1.5px solid rgba(215,38,46,.7); pointer-events: none; }
.acp__side--l::before { border-right: 0; border-radius: 16px 0 0 16px; -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); }
.acp__side--r { text-align: right; }
.acp__side--r::before { border-left: 0; border-radius: 0 16px 16px 0; -webkit-mask: linear-gradient(270deg, #000 70%, transparent); mask: linear-gradient(270deg, #000 70%, transparent); }
.acp__it { cursor: default; transition: transform .25s; }
.acp__it h4 { margin: 0 0 4px; font-size: 21px; font-weight: 700; color: #fff; }
.acp__it p { font-size: 13.5px; line-height: 1.5; color: #d9dbe0; }
.acp__side--l .acp__it:hover { transform: translateX(6px); }
.acp__side--r .acp__it:hover { transform: translateX(-6px); }
.acp__stack { position: relative; height: 400px; }
.sl { position: absolute; left: 50%; width: 300px; height: 150px; margin-left: -150px; display: grid; place-items: center; transition: transform .35s ease; }
.sl:nth-child(1) { top: 0; z-index: 5; } .sl:nth-child(2) { top: 62px; z-index: 4; } .sl:nth-child(3) { top: 124px; z-index: 3; }
.sl:nth-child(4) { top: 186px; z-index: 2; } .sl:nth-child(5) { top: 250px; z-index: 1; }
.sl::before { content: ''; position: absolute; left: 50%; top: 50%; width: 208px; height: 208px; margin: -104px 0 0 -104px; border-radius: 24px; background: linear-gradient(135deg, #f5a3a7 0%, #f07a80 55%, #b21e25 100%); box-shadow: 8px 8px 0 #7d1016, 16px 16px 26px rgba(0,0,0,.3); transform: rotateX(60deg) rotateZ(45deg); transition: background .35s, box-shadow .35s; }
.sl b { position: relative; z-index: 1; margin-top: 10px; font-family: var(--head); font-size: 15px; font-weight: 600; color: #3a2a2e; }
.sl:not(:first-child) b { margin-top: 92px; }
.sl--base::before { background: linear-gradient(135deg, #8c9099 0%, #5b5f68 55%, #3a3d44 100%); box-shadow: 8px 8px 0 #1f2024, 16px 16px 30px rgba(0,0,0,.3); }
.sl--base b { color: #20364b; }
.sl--ring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 244px; height: 244px; margin: -122px 0 0 -122px; border-radius: 28px; border: 2px dotted rgba(255,255,255,.65); transform: rotateX(60deg) rotateZ(45deg); pointer-events: none; }
.acp__foot { margin-top: 12px; text-align: center; font-size: 15px; font-weight: 600; color: var(--rose); }
.acp:has(.acp__it[data-l="1"]:hover) .sl[data-l="1"],
.acp:has(.acp__it[data-l="2"]:hover) .sl[data-l="2"],
.acp:has(.acp__it[data-l="3"]:hover) .sl[data-l="3"],
.acp:has(.acp__it[data-l="4"]:hover) .sl[data-l="4"],
.acp:has(.acp__it[data-l="5"]:hover) .sl[data-l="5"] { transform: translateY(-14px); }
.acp:has(.acp__it[data-l="1"]:hover) .sl[data-l="1"]::before,
.acp:has(.acp__it[data-l="2"]:hover) .sl[data-l="2"]::before,
.acp:has(.acp__it[data-l="3"]:hover) .sl[data-l="3"]::before,
.acp:has(.acp__it[data-l="4"]:hover) .sl[data-l="4"]::before { background: linear-gradient(135deg, #fff, #fde2e3); box-shadow: 8px 8px 0 #b21e25, 0 0 36px rgba(255,255,255,.45); }

.locked { display: grid; grid-template-columns: auto minmax(0, 1fr) 180px auto; gap: 22px; align-items: center; margin-top: 18px; padding: 22px 26px; }
.locked__ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: #d7262e; background: var(--rose-soft); }
.locked__ic .i { width: 22px; height: 22px; }
.locked h3 { font-size: 17px; margin-bottom: 4px; }
.locked p { color: var(--muted); font-size: 14px; }
.locked__redact { display: grid; gap: 8px; }
.locked__redact i { display: block; width: var(--w); height: 8px; border-radius: 4px; background: rgba(31,32,36,.14); filter: blur(.6px); }

/* ═══ HOW IT WORKS — chaptered demo ═══ */
.demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr); gap: 20px; align-items: start; }
.demo__screen { border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.5); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.demo__chrome { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.7); }
.demo__chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.demo__chrome i:nth-child(2) { background: var(--sky); }
.demo__chrome i:nth-child(3) { background: var(--sage); }
.demo__chrome span { margin-left: auto; font-size: 12px; color: var(--muted); }
.demo__stage { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(180deg, rgba(242,242,243,.55), rgba(58,61,68,.3)); overflow: hidden; }
.demo__stage video { display: block; width: 100%; height: 100%; object-fit: cover; background: #e9eaec; }
.demo__stage video[hidden] { display: none; }
.sim { position: absolute; inset: 0; }
.scene { position: absolute; inset: 26px 28px; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.scene.is-on { opacity: 1; transform: none; }
.sc__h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sc__h .i { width: 16px; height: 16px; color: var(--sage-2); }
.sc__tag { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 12px; background: var(--sage); color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: 0 12px 22px -14px rgba(215,38,46,1); opacity: 0; }
.sc__tag .i { width: 15px; height: 15px; }
.scene.is-on .sc__tag { animation: popin .5s 1.6s ease both; }
@keyframes popin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mail { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mail li { display: grid; grid-template-columns: 10px minmax(0, 180px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); font-size: 13.5px; color: var(--muted); }
.mail li b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--rose-soft); color: #b21e25; }
.mail__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(31,32,36,.18); }
.mail__new .mail__dot { background: var(--sage); }
.scene.is-on .mail__new { animation: mailin .6s ease both, ring 1.2s .8s ease both; }
@keyframes mailin { from { opacity: 0; transform: translateY(-16px); } }
@keyframes ring { to { border-color: var(--sage); box-shadow: 0 0 0 4px rgba(215,38,46,.18); } }
.read { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: start; }
.read__doc { position: relative; height: 200px; padding: 18px 16px; border-radius: 12px; background: rgba(255,255,255,.85); box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; overflow: hidden; }
.read__doc i { display: block; height: 6px; border-radius: 3px; background: rgba(31,32,36,.1); }
.read__doc i:nth-child(3n) { width: 70%; }
.read__doc i:nth-child(2) { width: 50%; height: 9px; background: rgba(31,32,36,.22); }
.read__scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, transparent, rgba(215,38,46,.2), transparent); border-bottom: 2px solid var(--sage); }
.scene.is-on .read__scan { animation: scan 2.2s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-40px); } 100% { transform: translateY(210px); } }
.read__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.read__rows li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); font-size: 13px; opacity: 0; }
.read__rows code { font: 600 12.5px var(--font); color: var(--ink); }
.read__rows .i { width: 14px; height: 14px; color: var(--dim); }
.read__rows .pill { margin-left: auto; }
.scene.is-on .read__rows li { animation: rise .45s ease both; }
.scene.is-on .read__rows li:nth-child(1) { animation-delay: .7s; }
.scene.is-on .read__rows li:nth-child(2) { animation-delay: 1.4s; }
.scene.is-on .read__rows li:nth-child(3) { animation-delay: 2.1s; }
.ask { position: relative; max-width: 470px; padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow); }
.ask__q { font-size: 14px; color: var(--muted); }
.ask__a { margin: 10px 0 18px; font-size: 14.5px; color: var(--ink); }
.ask__a code { font: 600 13.5px var(--font); padding: 3px 9px; border-radius: 999px; background: var(--sky-soft); margin-right: 6px; }
.ask__btns { position: relative; display: flex; gap: 10px; }
.ask__btns .btn { pointer-events: none; }
.ask__note { margin-top: 16px; font-size: 12.5px; color: var(--muted); opacity: 0; }
.ask__cursor { position: absolute; left: 60px; top: 60px; width: 18px; height: 22px; background: var(--slate); clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 58% 94%, 40% 56%, 76% 56%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); opacity: 0; }
.scene.is-on .ask__cursor { animation: cursor 2.4s .4s ease both; }
.scene.is-on .ask__ok { animation: press .35s 2.3s ease both; }
.scene.is-on .ask__note { animation: popin .4s 2.7s ease both; }
@keyframes cursor { 0% { opacity: 0; transform: translate(260px, 60px); } 15% { opacity: 1; } 80% { opacity: 1; transform: translate(0, -44px); } 88% { transform: translate(0, -44px) scale(.85); } 100% { opacity: 1; transform: translate(0, -44px); } }
@keyframes press { 50% { transform: scale(.94); background: var(--slate); } }
.erp { max-width: 480px; padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.95); box-shadow: var(--shadow); }
.erp__id { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--head); font-size: 28px; font-weight: 700; color: var(--ink); }
.erp__list li { opacity: 0; font-size: 14.5px; }
.scene.is-on .erp__list li { animation: rise .45s ease both; }
.scene.is-on .erp__list li:nth-child(1) { animation-delay: .5s; }
.scene.is-on .erp__list li:nth-child(2) { animation-delay: 1.1s; }
.scene.is-on .erp__list li:nth-child(3) { animation-delay: 1.7s; }
.mon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mon__k { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); }
.mon__k:first-child { background: var(--sage); }
.mon__k:first-child .mon__n, .mon__k:first-child span { color: #fff; }
.mon__k:nth-child(3) { background: var(--sky-soft); }
.mon__n { display: block; font-family: var(--head); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.mon__k span { font-size: 12.5px; color: var(--muted); }
.demo__ctrl { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.7); }
.demo__play { width: 38px; height: 38px; color: #fff; background: var(--slate); border-color: transparent; }
.demo__play .i { width: 14px; height: 14px; fill: currentColor; }
.demo__segs { flex: 1; display: flex; gap: 6px; }
.demo__segs i { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(31,32,36,.12); overflow: hidden; }
.demo__segs i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sage); transform: scaleX(var(--f, 0)); transform-origin: left; }
.demo__segs i.done::after { transform: scaleX(1); }
.demo__segs i.run::after { animation: segfill 4.8s linear forwards; }
.demo--paused .demo__segs i.run::after, .demo--paused .scene * { animation-play-state: paused !important; }
@keyframes segfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.chaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chap { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--glass-line); border-radius: 16px; background: rgba(255,255,255,.46); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); text-align: left; color: var(--text); transition: background .25s, transform .25s; }
.chap:hover { transform: translateX(4px); background: rgba(255,255,255,.65); }
.chap__n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--sage-2); background: #fbe9ea; border: 2px solid var(--sage); }
.chap__t { flex: 1; min-width: 0; }
.chap b { display: block; font-family: var(--head); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.chap small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.chap time { font-size: 12px; color: var(--dim); }
.demo:not(.demo--video) .chap time { display: none; }
.chap.is-on { background: rgba(255,255,255,.78); box-shadow: var(--shadow); }
.chap.is-on .chap__n { background: var(--sage); color: #fff; }

/* reveal */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1180px) {
  .alerts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap--wide, .cap--panel { grid-column: 1 / -1; }
  .uc { grid-template-columns: 1fr; }
  .uc__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--glass-line); }
  .uct { white-space: nowrap; flex: none; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline::before { display: none; }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .steps4::before { display: none; }
  .deploy { grid-template-columns: 1fr; }
  .sec { padding: 40px 34px 38px; }
  .hero { grid-template-columns: 1fr; }
  .kpis { grid-column: 1; grid-row: auto; padding: 0 26px; }
  .feed { grid-column: 1; grid-row: auto; margin: 0 26px; }
  .demo { grid-template-columns: 1fr; }
  .chaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acp__body { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); }
  .acp__it h4 { font-size: 18px; }
  .acp__stack { transform: scale(.9); }
  .locked { grid-template-columns: auto minmax(0, 1fr); }
  .locked__redact { display: none; }
  .locked .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; z-index: 60; width: 286px; height: calc(100vh - 24px); margin: 12px; transform: translateX(-110%); transition: transform .35s ease; background: rgba(242,242,243,.85); }
  .side.is-open { transform: none; }
  body.menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(31,32,36,.25); z-index: 50; }
  .top .top__menu, .top .brand--top { display: inline-flex; }
  .crumb { display: none; }
  .main { padding: 0 16px; }
  .intro { grid-template-columns: 1fr; gap: 22px; }
  .ph { justify-self: start; max-width: 100%; aspect-ratio: 16 / 9; }
  .ucp.is-on { grid-template-columns: 1fr; }
  .cap--panel { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact__copy, .form { padding: 38px 28px; }
  .cover { grid-template-columns: 1fr; min-height: 0; padding: 16px; }
  .cover__img { grid-column: 1; grid-row: 1; min-height: 0; height: 260px; }
  .hero__copy { grid-column: 1; grid-row: 2; padding: 14px 10px 10px; }
  .cover__tab { right: 34px; top: 204px; bottom: auto; }
  .cover::after { display: none; }
  .acp { padding: 32px 18px 26px; }
  .acp__top { width: 100%; flex-wrap: wrap; padding-bottom: 20px; }
  .acp__top::before { -webkit-mask: none; mask: none; border-bottom: 1.5px solid rgba(215,38,46,.7); border-radius: 16px; }
  .acp__body { grid-template-columns: 1fr; margin-top: 10px; gap: 14px; }
  .acp__stack { order: -1; transform: none; height: 380px; }
  .acp__side, .acp__side--r { text-align: left; padding: 22px; }
  .acp__side--l::before, .acp__side--r::before { border: 1.5px solid rgba(215,38,46,.55); border-radius: 16px; -webkit-mask: none; mask: none; }
}
@media (max-width: 860px) {
  .net__stage { height: auto; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .net__svg { display: none; }
  .nn { position: static; transform: none; width: auto; }
  .nn--core { margin-left: 20px; }
  .nn--out { margin-left: 40px; }
}
@media (max-width: 720px) {
  .top__actions .btn--primary span, .top__actions .btn--ghost span { display: none; }
  .top__actions .btn { padding: 10px 12px; }
  .alerts, .bento, .timeline, .steps4, .kpis, .chaps { grid-template-columns: 1fr; }
  .kpis { padding: 0 14px; }
  .feed { margin: 0 14px; }
  .cap--wide, .cap--panel { grid-column: auto; }
  .form__row { grid-template-columns: 1fr; }
  .smp { grid-template-columns: 1fr; justify-items: center; }
  .sm__bars { width: 100%; }
  .sec { padding: 32px 18px 30px; margin-bottom: 16px; border-radius: 20px; }
  .hero.sec { padding: 0 0 20px; }
  .hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .panel { padding: 18px; }
  .uc.panel { padding: 0; }
  .ucp { padding: 22px 14px; }
  .mock { overflow-x: auto; }
  .mock .tbl td:first-child, .mock .pill { white-space: normal; }
  .contact__copy, .form { padding: 32px 20px; }
  .demo__stage { aspect-ratio: 4 / 5; }
  .scene { inset: 20px 16px; }
  .mail li { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .mail li > span:not(.mail__dot) { grid-column: 2 / -1; grid-row: 2; }
  .read { grid-template-columns: 1fr; }
  .read__doc { height: 110px; }
  .mon { grid-template-columns: 1fr; gap: 8px; }
  .mon__k { padding: 12px 14px; }
  .mon__n { font-size: 28px; }
  .locked { grid-template-columns: 1fr; padding: 22px 18px; }
  .locked .btn { justify-self: stretch; }
}
@media (max-width: 420px) {
  .main { padding: 0 10px; }
  .top { gap: 8px; }
  .lang > .i { display: none; }
  .lang { padding-left: 3px; }
  .acp__stack { height: 330px; transform: scale(.82); transform-origin: top center; margin-bottom: -40px; }
  .acp__top span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}
.uc.panel { padding: 0; }

/* lotus mark + soft fade under the sticky top bar */
.brand__mark::after { display: none; }
.brand__mark svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.top::before { content: ""; position: absolute; inset: 0 -28px -18px; z-index: -1; background: linear-gradient(180deg, rgba(236,237,239,.92) 55%, rgba(236,237,239,0)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); pointer-events: none; }
@media (max-width: 1000px) { .top::before { inset: 0 -16px -14px; } }
.cover__tab { cursor: pointer; transition: transform .2s; } .cover__tab:hover { transform: scale(1.06); }


/* ═══════════ RED DECK overrides ═══════════ */
:root { --red: #d7262e; --red-2: #aa181f; --graphite: #2b2d32; --paper: #ffffff;
  --glass: #ffffff; --glass-2: #ffffff; --glass-line: #e4e5e8; --line: rgba(31,32,36,.12);
  --shadow: 0 10px 24px -16px rgba(0,0,0,.35); }
body { background: #eceded; color: #3c3f46; }
/* low-poly light grey backdrop like the slides */
.bg { background:
    linear-gradient(135deg, rgba(255,255,255,.7) 25%, transparent 25%) 0 0 / 180px 180px,
    linear-gradient(225deg, rgba(255,255,255,.45) 25%, transparent 25%) 0 0 / 240px 240px,
    linear-gradient(180deg, #f4f4f5, #e6e7e9); }
h1, h2, h3, h4 { font-family: var(--head); text-transform: uppercase; letter-spacing: .01em; font-weight: 600; }
.grad { font-family: var(--head); font-style: normal; font-weight: 700; color: var(--red); }

/* surfaces: flat white cards, hairline, square corners */
.card, .panel, .sec, .side, .top__glass, .crumb, .lang, .btn, .iconbtn, .chap, .demo__screen, .foot { -webkit-backdrop-filter: none; backdrop-filter: none; }
.card, .panel { background: #fff; border: 1px solid #e4e5e8; border-radius: 3px; box-shadow: var(--shadow); }
.sec { background: #fff; border: 0; border-radius: 0; box-shadow: 0 16px 40px -28px rgba(0,0,0,.45); overflow: hidden; padding-top: 96px; }
/* section header = red ribbon with the number (like "01 SECTION TITLE HERE") */
.sec::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 58px; background: linear-gradient(90deg, var(--red) 0 330px, var(--graphite) 330px 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.sec::after { content: ''; position: absolute; left: 330px; top: 0; width: 46px; height: 58px; background: var(--red); clip-path: polygon(0 0, 100% 0, 0 100%); }
.sec.hero::before, .sec.hero::after, #kontakt::before, #kontakt::after { display: none; }
.kicker { position: absolute; left: 34px; top: 16px; z-index: 1; color: #fff; font-family: var(--head); font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.kicker span { color: #fff; }
.sec__head h2, .contact h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 600; color: #1f2024; }
.sec__head h2::before { content: ''; display: block; width: 54px; height: 5px; margin-bottom: 18px; background: var(--red); }
.lead { color: #5a5d65; }

/* sidebar: white with red active block, graphite footer card */
.side { background: #fff; border: 0; border-radius: 0; margin: 0; top: 0; height: 100vh; box-shadow: 6px 0 24px -18px rgba(0,0,0,.4); }
.side::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--red) 60%, var(--graphite) 60%); }
.brand { font-family: var(--head); text-transform: uppercase; letter-spacing: .12em; }
.brand__mark { background: none !important; box-shadow: none !important; }
.side__label { color: var(--red); font-family: var(--head); letter-spacing: .2em; }
.navi { border-radius: 0; }
.navi__n { border-radius: 0; background: var(--graphite); color: #fff; border: 0; }
.navi.is-active { background: var(--red); box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.navi.is-active .navi__n { background: #fff; color: var(--red); }
.progress { background: var(--graphite); border: 0; border-radius: 0; }
.progress__lbl { color: #b9bcc3; }
.progress__cur { color: #fff; }
.progress .ring::after { background: var(--graphite); }
.progress .ring > span { color: #fff; }
.side__cta { border-radius: 0; background: var(--red); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }

/* top bar + buttons */
.top::before { background: linear-gradient(180deg, rgba(236,237,237,.95) 60%, rgba(236,237,237,0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.crumb, .lang { border-radius: 0; background: #fff; border: 1px solid #e4e5e8; }
.lang button { border-radius: 0; }
.lang button.is-on { background: var(--graphite); }
.btn { border-radius: 0; background: #fff; border: 1px solid #d9dbe0; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.btn--primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 20px -12px rgba(215,38,46,.9); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 30px; }
.btn--primary:hover { background: var(--red-2); }
.iconbtn { border-radius: 0; }

/* HERO — B&W photo with red / graphite diagonal shards (title slide) */
.hero.sec { padding: 0 0 24px; background: #fff; }
.cover { padding: 0; min-height: 560px; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.cover__img { grid-column: 1; grid-row: 1; width: 100%; height: 560px; min-height: 0; border-radius: 0; border: 0; box-shadow: none; filter: grayscale(1) contrast(1.05) brightness(.95); }
.hero__copy { grid-column: 1; grid-row: 1; z-index: 2; align-self: end; margin: 0 0 56px 0; padding: 30px 44px; max-width: 640px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.5); }
.cover::before { content: ''; position: absolute; z-index: 1; left: 0; top: 0; width: 62%; height: 100%; background: var(--red); clip-path: polygon(0 0, 38% 0, 12% 100%, 0 100%); opacity: .95; }
.cover::after { content: ''; position: absolute; z-index: 1; right: 0; bottom: 0; left: auto; width: 46%; height: 55%; background: var(--graphite); clip-path: polygon(40% 100%, 100% 0, 100% 100%); border-radius: 0; box-shadow: none; }
.cover__tab { z-index: 3; right: 44px; top: 36px; bottom: auto; width: auto; height: auto; padding: 12px 22px 12px 18px; border-radius: 0; background: var(--red); border: 0; color: #fff; font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: none; }
.cover__tab::after { content: '▶  Jak to działa'; position: static; border: 0; }
.eyebrow { border-radius: 0; background: var(--red); color: #fff; border: 0; font-family: var(--head); text-transform: uppercase; letter-spacing: .12em; }
.eyebrow .dot { background: #fff; }
.hero h1 { color: #1f2024; font-size: clamp(34px, 4vw, 54px); }
.hero h1 .grad { display: block; font-size: 1em; margin-top: 2px; }

/* KPI / icons: red & graphite circles like the infographic slides */
.kpi__ic, .dpc > .i, .nn__ic, .lopt .i:first-child { background: var(--red); color: #fff; border: 0; }
.kpi:nth-child(even) .kpi__ic, .dpc:nth-child(even) > .i { background: var(--graphite); color: #fff; }
.kpi__s { color: var(--red); }
.feed__foot > span { background: var(--graphite); color: #c9cbd1; border-radius: 0; }
.feed__foot > span + span { background: var(--red); color: #ffe0e1; }
.feed__foot b { color: #fff; font-family: var(--head); }
.live { background: var(--red); color: #fff; border-radius: 0; }
.fi { border-radius: 0; background: #f6f6f7; border: 0; border-left: 3px solid var(--red); }

/* problems: numbered circles alternate red / graphite */
.alert::before { background: var(--red); color: #fff; border: 0; font-family: var(--head); font-size: 16px; }
.alert:nth-child(even)::before { background: var(--graphite); }
.alert p.alert__fix { border-radius: 0; background: #fbe9ea; color: #aa181f; }

/* steps & timeline: red circles on a line */
.step__n, .tl__n, .chap__n { background: #fff; border: 3px solid var(--red); color: var(--red); font-family: var(--head); }
.step:nth-child(even) .step__n, .tl:nth-child(even) .tl__n { border-color: var(--graphite); color: var(--graphite); }
.step:first-child .step__n, .tl:first-child .tl__n { background: var(--red); color: #fff; }
.steps4::before, .timeline::before { background: #d4d5d9; height: 3px; }

/* use-case tabs: graphite column with red active tab */
.uc__tabs { background: var(--graphite); border: 0; }
.uct { color: #c9cbd1; border-radius: 0; }
.uct .i { color: #c9cbd1; }
.uct.is-on { background: var(--red); color: #fff; box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.uct.is-on .i { color: #fff; }
.flow span { border-radius: 0; background: #f2f2f3; border: 0; }
.flow span:first-child { background: var(--red); }
.ticks li::before { border-radius: 50%; background-color: var(--red); }
.mock { border-radius: 0; border: 1px solid #e4e5e8; }
.mock__h { background: var(--graphite); color: #fff; padding: 10px 16px; margin: 0 0 12px; }
.pill { border-radius: 0; }

/* capabilities: red wide tile, graphite 4th tile */
.cap--wide { background: var(--red); border-color: var(--red); }
.cap--wide:hover { background: var(--red-2); }
.bento > .cap:nth-child(4) { background: var(--graphite); border-color: var(--graphite); }
.bento > .cap:nth-child(4) h3 { color: #fff; } .bento > .cap:nth-child(4) p { color: #c9cbd1; }
.chips span { border-radius: 0; }
.smp { border-radius: 0; }

/* intro photos: B&W with red corner block */
.ph { border-radius: 0; border: 0; overflow: visible; }
.ph img { filter: grayscale(1) contrast(1.05); }
.ph::after { content: ''; position: absolute; inset: auto -14px -14px auto; width: 45%; height: 40%; background: var(--red); z-index: -1; }

/* network: red core nodes */
.net { background: #f6f6f7; border-radius: 0; }
.nn { border-radius: 0; background: #fff; }
.nn--core { background: var(--red); }
.nn--hub { background: var(--graphite); box-shadow: 0 0 0 6px rgba(215,38,46,.15); }

/* technology diagram on graphite */
.acp { background: var(--graphite); border-radius: 0; }
.acp__head p { font-family: var(--font); font-style: normal; color: #c9cbd1; }
.acp__top span, .acp__foot { color: #ff6a70; }
.acp__top::before, .acp__side::before { border-color: rgba(255,106,112,.7) !important; border-radius: 0 !important; }
.sl::before { background: linear-gradient(135deg, #ff5a61 0%, #d7262e 55%, #9c141a 100%); box-shadow: 8px 8px 0 #6d0c10, 16px 16px 26px rgba(0,0,0,.35); border-radius: 10px; }
.sl b { color: #fff; }
.sl--base::before { background: linear-gradient(135deg, #6a6d75 0%, #45484f 55%, #2a2c31 100%); box-shadow: 8px 8px 0 #151619, 16px 16px 30px rgba(0,0,0,.35); }
.locked { border-radius: 0; }
.locked__ic { background: var(--red); color: #fff; border-radius: 0; }

/* demo player */
.demo__screen { border-radius: 0; background: #fff; }
.demo__chrome i { background: var(--red); }
.demo__chrome i:nth-child(2), .demo__chrome i:nth-child(3) { background: #c9cbd1; }
.demo__play { background: var(--red); border-radius: 0; }
.demo__segs i::after { background: var(--red); }
.chap { border-radius: 0; background: #fff; }
.chap.is-on { background: var(--graphite); }
.chap.is-on b { color: #fff; } .chap.is-on small { color: #c9cbd1; }
.chap.is-on .chap__n { background: var(--red); border-color: var(--red); color: #fff; }
.sc__tag { border-radius: 0; background: var(--red); }
.mon__k, .ask, .erp, .mail li, .read__rows li, .read__doc { border-radius: 0; }
.mon__k:first-child { background: var(--red); }

/* contact: "thank you" slide — red / graphite */
.contact__copy { background: linear-gradient(120deg, var(--graphite) 0 60%, var(--red) 60% 100%); }
.contact__img { opacity: .12; filter: grayscale(1); }
.form input, .form textarea { border-radius: 0; background: #f6f6f7; border: 1px solid #e4e5e8; }
.form input:focus, .form textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(215,38,46,.15); background: #fff; }
.foot { border-radius: 0; background: var(--graphite); color: #b9bcc3; border: 0; }
.foot .brand { color: #fff; }

@media (max-width: 1000px) {
  .side { margin: 0; height: 100vh; }
  .cover { min-height: 0; }
  .cover__img { height: 280px; }
  .hero__copy { align-self: auto; margin: 0; padding: 26px 22px; max-width: none; box-shadow: none; }
  .cover::before { height: 280px; }
  .cover::after { display: none; }
  .cover__tab { right: 16px; top: 16px; }
}
@media (max-width: 720px) {
  .sec::before { background: linear-gradient(90deg, var(--red) 0 70%, var(--graphite) 70% 100%); }
  .sec::after { left: 70%; }
  .kicker { left: 18px; font-size: 15px; }
  .btn--primary { padding-right: 18px; }
}

/* fixes */
.brand__name { font-family: Outfit, Roboto, sans-serif; font-weight: 700; text-transform: none; letter-spacing: -.01em; font-size: 1.35em; line-height: 1; color: #1f2024; }
.foot .brand__name { color: #fff; }
.brand__mark { width: 38px !important; height: 34px !important; }
.brand__mark img { object-fit: contain; }
.alert::before, .alert:nth-child(3n)::before, .alert:nth-child(3n+2)::before { background: var(--red); color: #fff; }
.alert:nth-child(even)::before { background: var(--graphite); color: #fff; }
.contact__copy h2 { color: #fff; }
.contact__copy .kicker { position: static; }
@media (max-width: 1000px) {
  .hero__copy { grid-row: 2; }
  .cover__img { grid-row: 1; display: block; }
}


/* ═══════════ WEBSITE LAYOUT (overrides the deck look) ═══════════ */
:root { --hdr: 76px; --gut: max(24px, calc((100% - 1200px) / 2)); --gutv: max(24px, calc((100vw - 1200px) / 2)); }
body { background: #fff; }
.bg { display: none; }

/* sections: full-bleed, flowing, no slide frames or ribbons */
.sec { max-width: none; margin: 0; padding: 104px var(--gut) 96px; border: 0; border-radius: 0; box-shadow: none; background: #fff; overflow: visible; }
.sec::before, .sec::after { display: none !important; }
main > .sec:nth-of-type(even) { background: #f4f4f5; }
.kicker { position: static; display: inline-flex; align-items: center; gap: 10px; color: var(--red); font-family: var(--head); font-size: 14px; letter-spacing: .14em; }
.kicker span { color: var(--red); }
.kicker::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--red); box-shadow: 5px 3px 0 #1f2024; flex: none; }
.sec__head h2::before { display: none; }
.sec__head h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); }

/* dark sections for rhythm */
#jak-dziala, #technologia { background: #1f2024 !important; }
#jak-dziala .sec__head h2, #technologia .sec__head h2 { color: #fff; }
#jak-dziala .lead, #technologia .lead { color: #b9bcc3; }
#jak-dziala .step h3, #technologia .locked h3 { color: #fff; }
#jak-dziala .step p { color: #b9bcc3; }
#jak-dziala .net { background: #2a2c31; }
#jak-dziala .steps4::before { background: #3a3d44; }
#technologia .acp { background: #2a2c31; }
#technologia .locked { background: #2a2c31; border-color: #3a3d44; }
#technologia .locked p { color: #b9bcc3; }
#technologia .ph::after { background: var(--red); }

/* HERO — full-width skyscrapers with red angular bands */
.hero.sec { padding: 0 0 90px; background: #fff; }
.hero .cover { grid-column: 1 / -1; min-height: calc(100vh - var(--hdr)); max-height: 820px; padding: 0 var(--gut); display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(20,20,22,.88) 0%, rgba(20,20,22,.62) 45%, rgba(20,20,22,.1) 75%), url('img/city-red.jpg') center / cover no-repeat; }
.hero .cover__img { display: none; }
.hero .cover::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 30%; opacity: 1;
  background: var(--red); clip-path: polygon(0 62%, 58% 18%, 100% 58%, 100% 100%, 0 100%); }
.hero .cover::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 30%;
  background: #1f2024; clip-path: polygon(0 88%, 58% 44%, 100% 84%, 100% 100%, 0 100%); }
.hero .hero__copy { position: relative; z-index: 2; align-self: center; margin: 0 0 22vh; padding: 0; max-width: 660px; background: none; box-shadow: none; }
.hero h1 { color: #fff; font-size: clamp(40px, 5vw, 72px); }
.hero .lead { color: rgba(255,255,255,.85); }
.hero .eyebrow { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); }
.hero .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.hero .btn--ghost:hover { background: #fff; color: #1f2024; }
.hero .cover__tab { z-index: 3; top: auto; bottom: 33%; right: var(--gut); }
/* KPI cards and live feed float over the bottom of the hero */
.hero .kpis { grid-column: 1; grid-row: 2; position: relative; z-index: 3; margin-top: -70px; padding: 0 0 0 var(--gutv); }
.hero .feed { grid-column: 2; grid-row: 2; position: relative; z-index: 3; margin: -70px var(--gutv) 0 0; }

/* horizontal header (desktop) */
@media (min-width: 1320px) {
  .shell { display: block; }
  .side { position: fixed; top: 0; left: 0; right: 0; height: var(--hdr); margin: 0; z-index: 40; display: flex; flex-direction: row; align-items: center;
    padding: 0 520px 0 32px; background: #fff; border-radius: 0; box-shadow: 0 1px 0 #e6e7ea; overflow: visible; transform: none; }
  .side::before { display: none; }
  .side > * { flex: none; }
  .side .brand { padding: 0; margin-right: 34px; }
  .side__label, .side__foot { display: none; }
  .side__nav { flex-direction: row; padding: 0; gap: 2px; }
  .side__nav a:nth-child(1), .side__nav a:nth-child(3), .side__nav a:nth-child(7), .side__nav a:nth-child(8) { display: none; }
  .navi { padding: 10px 12px; font-size: 14.5px; font-weight: 500; color: #3c3f46; background: none; clip-path: none; box-shadow: none; }
  .navi__n { display: none; }
  .navi:hover { background: none; color: var(--red); }
  .navi.is-active { background: none; color: var(--red); box-shadow: inset 0 -3px 0 var(--red); clip-path: none; }
  .top { position: fixed; top: 0; right: 32px; height: var(--hdr); z-index: 41; padding: 0; background: none; }
  .top::before { display: none; }
  .crumb { display: none; }
  .main { padding: var(--hdr) 0 0; }
}
/* drawer menu below 1320px */
@media (max-width: 1319px) {
  .shell { display: block; }
  .side { position: fixed; left: 0; top: 0; z-index: 60; width: 290px; height: 100vh; margin: 0; transform: translateX(-110%); transition: transform .35s ease; background: #fff; border-radius: 0; }
  .side.is-open { transform: none; }
  body.menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(20,20,22,.45); z-index: 50; }
  .top { position: sticky; top: 0; z-index: 41; padding: 12px var(--gut); background: #fff; box-shadow: 0 1px 0 #e6e7ea; }
  .top::before { display: none; }
  .top .top__menu, .top .brand--top { display: inline-flex; }
  .crumb { display: none; }
  .main { padding: 0; }
  .hero .cover { min-height: 620px; }
}
@media (max-width: 1180px) {
  .hero .kpis { grid-column: 1; grid-row: auto; padding: 0 var(--gut); }
  .hero .feed { grid-column: 1; grid-row: auto; margin: 24px var(--gut) 0; }
}
@media (max-width: 720px) {
  .sec { padding: 72px 20px 64px; }
  .hero .cover { min-height: 560px; padding: 0 20px; background-position: 60% center; }
  .hero .hero__copy { margin: 0 0 18vh; }
  .hero .cover::before, .hero .cover::after { height: 26%; }
  .hero .kpis { margin-top: -40px; padding: 0 16px; }
  .hero .feed { margin: 20px 16px 0; }
  .hero .cover__tab { display: none; }
  .hero .cover { align-items: flex-start; padding-top: 48px; }
  .hero .hero__copy { margin-bottom: 150px; }
}
.foot { margin: 0; padding: 30px var(--gut); max-width: none; }