/* Murmaider Software — ethereal glass. Everything animates on transform, opacity and filter only. */

:root {
  --bg: #050507;
  --bg-2: #0a0c14;
  --ink: #f4f6fb;
  --ink-soft: rgba(244, 246, 251, 0.64);
  --ink-mute: rgba(244, 246, 251, 0.42);
  --blue: #0455b6;
  --cyan: #00a3ce;
  --violet: #09009c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --t-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --t-h1: clamp(3rem, 1.2rem + 7vw, 6.5rem);

  --r-xl: 2rem;
  --r-lg: 1.5rem;
  --pad-bezel: 0.375rem;
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(96px, 11vw, 176px);

  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --glow: 0 40px 120px -30px rgba(4, 85, 182, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-md); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--cyan); color: var(--bg); }

.skip { position: fixed; left: 16px; top: -200px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--bg); border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; scroll-margin-top: 88px; }

/* film grain, fixed and inert */
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; margin-top: 22px; text-wrap: balance; }
.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); font-weight: 400; max-width: 60ch; }
.section__head { max-width: 840px; }
.section__head .lead { margin-top: 24px; }
.section__head--split { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px var(--gutter); align-items: end; }
.section__head--split .lead { margin-top: 0; }

/* ---------- buttons: pill, island icon ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 6px 6px 26px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.005em; white-space: nowrap; position: relative; isolation: isolate; will-change: transform;
  transition: transform 600ms var(--spring), background-color 600ms var(--spring), box-shadow 600ms var(--spring), color 600ms var(--spring); }
.btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: rgba(255, 255, 255, 0.1); transition: transform 600ms var(--spring), background-color 600ms var(--spring); }
.btn__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__icon { transform: translate(2px, -2px) scale(1.06); }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--ink); color: var(--bg); box-shadow: 0 20px 60px -20px rgba(255, 255, 255, 0.35); }
.btn--primary .btn__icon { background: rgba(5, 5, 7, 0.08); }
.btn--primary:hover { background: #fff; box-shadow: 0 24px 70px -18px rgba(0, 163, 206, 0.5); }
.btn--ghost { background: var(--glass-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 1px rgba(255, 255, 255, 0.08); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn--small { min-height: 44px; padding: 4px 4px 4px 18px; gap: 10px; font-size: 0.875rem; }
.btn--small .btn__icon { width: 36px; height: 36px; }
.btn--small .btn__icon svg { width: 15px; height: 15px; }

/* ---------- double bezel ---------- */
.bezel { padding: var(--pad-bezel); border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.bezel__core { position: relative; border-radius: calc(var(--r-xl) - var(--pad-bezel)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; height: 100%; }
.bezel--glow { background: linear-gradient(135deg, rgba(0, 163, 206, 0.35), rgba(4, 85, 182, 0.15) 40%, rgba(9, 0, 156, 0.3)); box-shadow: var(--glow); }
.bezel--glow .bezel__core { background: linear-gradient(180deg, rgba(10, 12, 20, 0.92), rgba(5, 5, 7, 0.96)); }

/* spotlight on hover (set by script via --mx/--my) */
[data-spot] .bezel__core::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; transition: opacity 600ms var(--spring);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 163, 206, 0.16), transparent 60%); }
[data-spot]:hover .bezel__core::before { opacity: 1; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 28px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(10, 12, 20, 0.55); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 20px 60px -30px rgba(0, 0, 0, 0.8);
  transition: transform 700ms var(--spring), background-color 700ms var(--spring); }
.nav.is-scrolled { background: rgba(10, 12, 20, 0.78); }
.nav.is-hidden { transform: translate(-50%, -140%); }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.nav__brand img { flex: none; }
.nav__mark { width: 18px; height: auto; }
.nav__word { width: 96px; height: auto; }
.nav__links { display: flex; gap: 4px; }
.nav__links a { text-decoration: none; white-space: nowrap; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; transition: color 500ms var(--spring), background-color 500ms var(--spring); }
.nav__links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.lang { position: relative; }
.flag { width: 20px; height: 14px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); display: block; }
.lang__flag .flag { display: none; }
html:lang(en) .lang__flag .flag[data-flag="en"], html:lang(de) .lang__flag .flag[data-flag="de"], html:lang(cs) .lang__flag .flag[data-flag="cs"], html:lang(sk) .lang__flag .flag[data-flag="sk"], html:lang(hu) .lang__flag .flag[data-flag="hu"], html:lang(pl) .lang__flag .flag[data-flag="pl"] { display: block; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); transition: background-color 500ms var(--spring); }
.lang__btn:hover { background: rgba(255, 255, 255, 0.1); }
.lang__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms var(--spring); }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__list { position: absolute; top: calc(100% + 10px); right: 0; min-width: 170px; display: grid; padding: 6px; border-radius: 18px; background: rgba(10, 12, 20, 0.85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 60px -24px rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; transition: opacity 400ms var(--spring), transform 500ms var(--spring), visibility 0s linear 400ms; }
.lang__list.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--spring), transform 500ms var(--spring); }
.lang__list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); transition: background-color 400ms var(--spring), color 400ms var(--spring); }
.lang__list a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.lang__list a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.lang__list a[aria-current="page"]::after { content: "•"; color: var(--cyan); margin-left: auto; }
.menu__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.menu__langs a, .footer__col--langs a { text-decoration: none; }
.menu__langs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); transition: background-color 400ms var(--spring), color 400ms var(--spring); }
.menu__langs a:hover, .menu__langs a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.footer__col--langs a { display: inline-flex; align-items: center; gap: 8px; }
.footer__col--langs .flag { width: 16px; height: 11px; }
.footer__col--langs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.burger { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.burger span { position: absolute; left: 14px; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 600ms var(--spring); }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 55; background: rgba(5, 5, 7, 0.82); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); opacity: 0; visibility: hidden; transition: opacity 700ms var(--spring), visibility 0s linear 700ms; display: grid; place-items: center; padding: 120px var(--gutter) 40px; overflow: auto; overscroll-behavior: contain; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 700ms var(--spring); }
.menu__inner { width: min(960px, 100%); }
.menu__links { display: grid; gap: 4px; }
.menu__links a, .menu__foot, .menu__langs { opacity: 0; transform: translateY(48px); transition: opacity 800ms var(--spring), transform 900ms var(--spring); transition-delay: calc(var(--i) * 60ms); }
.menu.is-open .menu__links a, .menu.is-open .menu__foot, .menu.is-open .menu__langs { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i) * 70ms); }
.menu__links a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu__links a span { font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; transition: transform 700ms var(--spring); display: inline-block; }
.menu__links a:hover span { transform: translateX(16px); }
.menu__links a small { font-size: var(--t-sm); color: var(--ink-mute); text-align: right; }
.menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 40px; color: var(--ink-mute); font-size: var(--t-sm); flex-wrap: wrap; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100dvh; display: grid; align-items: center; padding: 160px 0 100px; overflow: clip; isolation: isolate; }
.orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.75; will-change: transform; }
.orb--a { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(circle, rgba(4, 85, 182, 0.55), transparent 65%); animation: orb-a 26s var(--spring) infinite alternate; }
.orb--b { width: 46vw; height: 46vw; right: -14vw; top: 10vh; background: radial-gradient(circle, rgba(0, 163, 206, 0.45), transparent 65%); animation: orb-b 32s var(--spring) infinite alternate; }
.orb--c { width: 40vw; height: 40vw; left: 30vw; bottom: -24vw; background: radial-gradient(circle, rgba(9, 0, 156, 0.6), transparent 65%); animation: orb-c 38s var(--spring) infinite alternate; }
.orb--d { width: 56vw; height: 56vw; left: 22vw; bottom: -30vw; background: radial-gradient(circle, rgba(4, 85, 182, 0.5), transparent 65%); animation: orb-b 30s var(--spring) infinite alternate; }
@keyframes orb-a { to { transform: translate(12vw, 10vh) scale(1.15); } }
@keyframes orb-b { to { transform: translate(-10vw, 14vh) scale(0.9); } }
@keyframes orb-c { to { transform: translate(-14vw, -10vh) scale(1.2); } }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px var(--gutter); align-items: center; }
.hero__title { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.05em; line-height: 0.94; margin-top: 28px; text-wrap: balance; }
.hero__title { word-spacing: 0.06em; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.12em 0.3em; margin: -0.12em -0.12em -0.3em; }
.hero__title.is-done .w { overflow: visible; }
.hero__title .w > span { display: inline-block; }
.hero__lead { margin-top: 32px; font-size: var(--t-lg); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero__visual { position: relative; }
.bezel--hero { aspect-ratio: 4 / 5; max-height: 72vh; margin-left: auto; width: min(100%, 520px); box-shadow: var(--glow); }
.bezel--hero .bezel__core { height: 100%; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.hero__tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 85, 182, 0.15), rgba(5, 5, 7, 0.1) 40%, rgba(5, 5, 7, 0.85)); mix-blend-mode: multiply; }
.chip { position: absolute; display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: rgba(10, 12, 20, 0.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 1px rgba(255, 255, 255, 0.08); max-width: 74%; }
.chip b { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.chip span { font-size: var(--t-sm); line-height: 1.35; }
.chip--a { top: 8%; left: 8%; }
.chip--b { top: 42%; right: 8%; }
.chip--c { bottom: 8%; left: 8%; }
.hero__mark { position: absolute; right: -24px; bottom: -40px; width: clamp(80px, 9vw, 130px); height: auto; filter: drop-shadow(0 30px 60px rgba(0, 163, 206, 0.45)); }
.hero__scroll { position: absolute; left: 50%; bottom: 28px; width: 1px; height: 56px; background: var(--line-strong); overflow: hidden; }
.hero__scroll span { position: absolute; inset: 0; background: var(--cyan); transform: translateY(-100%); animation: scroll-hint 2.2s var(--expo) infinite; }
@keyframes scroll-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* longer languages: the display sizes step down one notch so headlines keep to two or three lines */
:lang(de) .hero__title, :lang(cs) .hero__title, :lang(sk) .hero__title, :lang(hu) .hero__title, :lang(pl) .hero__title { font-size: clamp(2.75rem, 1rem + 6vw, 5.5rem); line-height: 1.06; }
:lang(de) .h2, :lang(cs) .h2, :lang(sk) .h2, :lang(hu) .h2, :lang(pl) .h2 { font-size: clamp(2rem, 1.2rem + 3.1vw, 3.5rem); line-height: 1.1; }
:lang(de) .menu__links a span, :lang(cs) .menu__links a span, :lang(sk) .menu__links a span, :lang(hu) .menu__links a span, :lang(pl) .menu__links a span { line-height: 1.1; }
:lang(de) .nav__links a, :lang(hu) .nav__links a { padding-inline: 10px; }

/* ---------- numbers ---------- */
.numbers { padding-block: 0 var(--section); }
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.numbers__item { display: grid; gap: 10px; padding: 36px 32px; background: var(--bg); }
.numbers__item strong { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numbers__item > span { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }
.numbers__note { margin-top: 20px; font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--ink-mute); }

/* ---------- situations ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; }
.tab { padding: 14px 20px; border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); min-height: 48px; transition: background-color 600ms var(--spring), color 600ms var(--spring), box-shadow 600ms var(--spring), transform 400ms var(--spring); }
.tab:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.tab:active { transform: scale(0.97); }
.tab.is-active { background: var(--ink); color: var(--bg); box-shadow: 0 16px 50px -16px rgba(255, 255, 255, 0.4); }
.bezel--panel { margin-top: 28px; }
.panel { display: grid; grid-template-columns: 160px 1fr; gap: 40px; padding: 40px; min-height: 520px; }
.panel__gauge { display: grid; align-items: stretch; }
.gauge { height: 100%; max-height: 520px; width: auto; margin: auto; overflow: visible; }
.gauge__line { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.gauge__rope { stroke: url(#gw); stroke-width: 2; }
.gauge__node circle { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; transition: fill 500ms var(--spring), stroke 500ms var(--spring); }
.gauge__node.is-lit circle { fill: var(--cyan); stroke: var(--cyan); }
.gauge__weight { fill: var(--ink); filter: drop-shadow(0 0 14px rgba(0, 163, 206, 0.9)); }
.gauge__label { fill: var(--ink-mute); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font); }
.panel__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.layers { display: grid; gap: 14px; margin-top: 28px; }
.layer { display: grid; grid-template-columns: 120px 1fr; gap: 6px 24px; padding: 18px 20px; border-radius: 18px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 600ms var(--spring), transform 600ms var(--spring); }
.layer:hover { background: var(--glass-2); transform: translateX(6px); }
.layer b { grid-row: 1 / span 2; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); font-weight: 700; padding-top: 5px; }
.layer p { font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.layer small { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }

/* ---------- services ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; margin-top: 64px; }
.bento__a { grid-column: span 7; grid-row: span 2; }
.bento__b, .bento__c { grid-column: span 5; }
.bento__d, .bento__e, .bento__f { grid-column: span 4; }
.card { padding: 36px; display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; min-height: 100%; }
.card--tall { justify-content: flex-end; }
.card__bg { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0.55; filter: saturate(0.8) contrast(1.05) brightness(0.9); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); transition: transform 1600ms var(--spring); }
.bento__a:hover .card__bg { transform: scale(1.05); }
.card__text { position: relative; display: grid; gap: 14px; }
.card__kicker { font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.card h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.card p { color: var(--ink-soft); line-height: 1.55; max-width: 52ch; }

.after { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; align-items: start; margin-top: 56px; padding: 40px 0 0; box-shadow: inset 0 1px 0 var(--line); }
.after__head { display: grid; gap: 18px; justify-items: start; }
.after__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 18ch; }
.after__body { display: grid; gap: 24px; justify-items: start; }
.after__body p { color: var(--ink-soft); font-size: var(--t-lg); line-height: 1.5; max-width: 48ch; }

.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.compare__col { padding: 32px; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); }
.compare__col--us { padding: var(--pad-bezel); }
.compare__col--us .bezel__core { padding: 32px; }
.compare h3 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; }
.compare ul { display: grid; gap: 18px; margin-top: 28px; }
.compare li { display: grid; gap: 4px; font-size: var(--t-sm); line-height: 1.45; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.compare li span { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.compare__col--us li { color: var(--ink); }
.compare__col--us li span { color: var(--cyan); }

/* ---------- how: z-axis cascade ---------- */
.how { background: linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg)); }
.steps { display: grid; gap: 24px; margin-top: 64px; }
.step { position: sticky; top: calc(96px + var(--k, 0) * 18px); transform-origin: 50% 0; box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.8); --dim: 0; }
.step .bezel__core::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--dim); pointer-events: none; z-index: 2; }
.step .bezel__core { display: grid; grid-template-columns: 90px 1fr minmax(200px, 36%); gap: 32px; align-items: center; padding: 40px; min-height: 360px; background: linear-gradient(180deg, #0e111c, #08090f); }
.step__n { font-size: var(--t-h2); font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--cyan); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.step p { margin-top: 14px; color: var(--ink-soft); line-height: 1.55; max-width: 48ch; }
.step__pic { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--r-xl) - var(--pad-bezel) - 16px); box-shadow: inset 0 0 0 1px var(--line); }
.step__pic { background: linear-gradient(160deg, rgba(4, 85, 182, 0.18), rgba(5, 5, 7, 0.4)); }
.viz { width: 100%; height: 100%; display: block; }
.viz__rings circle { opacity: 0.7; transform-origin: 200px 0; stroke-width: 1.5; }
.viz__cause-ring { transform-origin: 212px 152px; }
@media (prefers-reduced-motion: no-preference) {
  .viz__rings circle { animation: ring 4s var(--expo) infinite; }
  .viz__rings circle:nth-child(2) { animation-delay: 1s; } .viz__rings circle:nth-child(3) { animation-delay: 2s; } .viz__rings circle:nth-child(4) { animation-delay: 3s; }
  .viz__weight, .viz__rope { animation: bob 5s var(--spring) infinite alternate; }
  .viz__cause-ring { animation: pulse 2.4s var(--expo) infinite; }
  .viz__contours path { animation: drift-c 14s var(--spring) infinite alternate; transform-origin: 200px 150px; }
  .viz__contours path:nth-child(2) { animation-duration: 17s; } .viz__contours path:nth-child(3) { animation-duration: 11s; }
  .viz__bars rect { transform-origin: 40px 50%; animation: grow 1.6s var(--expo) both; }
  .viz__bars rect:nth-child(2) { animation-delay: .15s; } .viz__bars rect:nth-child(3) { animation-delay: .3s; } .viz__bars rect:nth-child(4) { animation-delay: .45s; } .viz__bars rect:nth-child(5) { animation-delay: .6s; }
  .viz__line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.4s var(--expo) 0.3s both; }
  .viz__dot { animation: pulse-dot 2s var(--expo) infinite; transform-origin: 380px 90px; }
}
@keyframes ring { 0% { transform: scale(0.15); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 0.08; } }
@keyframes bob { to { transform: translateY(8px); } }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes drift-c { to { transform: rotate(3deg) scale(1.04); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }

/* ---------- results ---------- */
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.rcard { padding: 32px; display: grid; gap: 22px; align-content: start; min-height: 320px; }
.rcard ul { display: grid; gap: 14px; }
.rcard li { position: relative; padding-left: 22px; line-height: 1.45; font-weight: 500; letter-spacing: -0.005em; }
.rcard li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 10px rgba(0, 163, 206, 0.6); }
.clients { margin-top: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px var(--gutter); padding-block: 32px; border-block: 1px solid var(--line); }
.clients__label { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.clients__list { display: flex; gap: clamp(24px, 4vw, 64px); justify-content: center; }
.clients__list { align-items: center; }
.clients__list li { display: flex; align-items: center; height: 44px; white-space: nowrap; opacity: 0.92; transition: opacity 500ms var(--spring); }
.clients__list li:hover { opacity: 1; }
.clients__list img { height: 38px; width: auto; display: block; }
.clients__list img[alt="KOMPAN"] { height: 30px; }
.clients__text { display: inline-flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.clients__text svg { width: 22px; height: 26px; display: block; }
.clients__text b { font-weight: 700; color: #e8302a; }
.clients__note { font-size: var(--t-sm); color: var(--ink-soft); text-align: right; max-width: 34ch; justify-self: end; }
.marquee { margin-top: 64px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); border-block: 1px solid var(--line); padding-block: 22px; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-soft); white-space: nowrap; display: flex; align-items: center; gap: 56px; }
.marquee span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- offer ---------- */
.offer__core { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: clamp(40px, 6vw, 96px); min-height: 520px; }
.bezel--glow .offer__core { background: linear-gradient(135deg, #0a1a3f, #050812 60%, #0b0630); }
.offer__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; opacity: 0.45; mix-blend-mode: luminosity; filter: contrast(1.2); mask-image: radial-gradient(80% 100% at 80% 50%, #000, transparent); -webkit-mask-image: radial-gradient(80% 100% at 80% 50%, #000, transparent); }
.offer__text { position: relative; max-width: 640px; display: grid; justify-items: start; }
.offer__text .h2 { margin-top: 22px; }
.offer__text .lead { margin-top: 22px; }
.offer__text .btn { margin-top: 40px; }
.offer__mark { position: relative; width: clamp(120px, 16vw, 220px); height: auto; filter: drop-shadow(0 40px 80px rgba(0, 163, 206, 0.5)); }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px var(--gutter); align-items: start; }
.about__side { display: grid; gap: 16px; position: sticky; top: 96px; }
.about__text p { margin-top: 20px; color: var(--ink-soft); }
.about__text .lead { margin-top: 28px; color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.facts li { padding: 10px 16px; border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-sm); font-weight: 500; }
.about__visual .bezel__core { aspect-ratio: 4 / 3; }
.about__visual img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: saturate(1.1) contrast(1.08) brightness(1.06); }
.founder__core { display: grid; grid-template-columns: 148px 1fr; gap: 24px; padding: 24px; align-items: start; }
.founder__portrait { aspect-ratio: 4 / 5; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 10px; background: linear-gradient(160deg, rgba(4, 85, 182, 0.35), rgba(9, 0, 156, 0.35)); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.founder__portrait { overflow: hidden; }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.founder__text { display: grid; gap: 10px; }
.founder__text h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.founder__text p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; }
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--cyan); transition: color 500ms var(--spring); width: max-content; }
.link:hover { color: var(--cyan); }
button.link { display: inline; font: inherit; }
.about__visual figcaption { position: absolute; left: 20px; bottom: 20px; padding: 8px 14px; border-radius: 999px; background: rgba(10, 12, 20, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- contact ---------- */
.contact { overflow: clip; isolation: isolate; }
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px var(--gutter); align-items: start; }
.contact__lead { margin-top: 24px; max-width: 44ch; }
.contact__meta { margin-top: 36px; display: grid; gap: 10px; color: var(--ink-mute); font-size: var(--t-sm); }
.form { padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; font-size: var(--t-sm); font-weight: 600; }
.field small { font-weight: 400; color: var(--ink-mute); }
.field input, .field textarea { font: inherit; font-weight: 400; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 0; border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); min-height: 52px; width: 100%; transition: box-shadow 400ms var(--spring), background-color 400ms var(--spring); }
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cyan); background: rgba(255, 255, 255, 0.07); }
.field.is-invalid input, .field.is-invalid textarea { box-shadow: inset 0 0 0 2px #ff6b6b; }
.field__error { color: #ff8a8a; font-weight: 400; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form__status { font-size: var(--t-sm); color: var(--ink-soft); }
.form__status.is-ok { color: var(--cyan); }
.form__status.is-err { color: #ff8a8a; }
.contact__mail-unused { display: inline-flex; align-items: center; gap: 20px; margin-top: 48px; padding: 10px 10px 10px 36px; border-radius: 999px; background: var(--ink); color: var(--bg); text-decoration: none; font-size: clamp(1.25rem, 1rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; box-shadow: 0 30px 90px -30px rgba(0, 163, 206, 0.6); transition: transform 600ms var(--spring), background-color 600ms var(--spring); will-change: transform; }
.contact__mail .btn__icon { width: 60px; height: 60px; background: rgba(5, 5, 7, 0.08); }
.contact__mail .btn__icon svg { width: 24px; height: 24px; }
.contact__mail:hover { background: #fff; }
.contact__mail:hover .btn__icon { transform: translate(3px, -3px) scale(1.06); }
.contact__mail:active { transform: scale(0.98); }
.contact__meta a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); transition: color 500ms var(--spring); }
.contact__meta a:hover { color: var(--cyan); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 32px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.1fr 0.7fr 0.7fr 0.7fr 1.8fr; gap: 40px var(--gutter); }
.footer__brand { display: flex; align-items: center; gap: 14px; align-self: start; }
.footer__col { display: grid; gap: 10px; align-content: start; font-size: var(--t-sm); }
.footer__col h4 { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 6px; }
.footer__col a { color: var(--ink-soft); text-decoration: none; width: max-content; transition: color 500ms var(--spring); }
.footer__col a:hover { color: var(--ink); }
.footer__col p { color: var(--ink-mute); line-height: 1.6; font-size: var(--t-xs); }
.footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-mute); }

/* ---------- motion defaults (script drives the rest) ---------- */
.js.motion [data-reveal], .js.motion [data-hero], .js.motion [data-hero-visual] { opacity: 0; }
.js.motion .hero__title .w > span { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  .orb, .hero__scroll span, .marquee__track { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 64em) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .bezel--hero { margin-left: 0; width: 100%; max-height: none; aspect-ratio: 16 / 11; }
  .hero__mark { right: 8px; bottom: -28px; }
  .section__head--split { grid-template-columns: 1fr; align-items: start; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .panel { grid-template-columns: 1fr; padding: 28px; min-height: 0; }
  .panel__gauge { display: none; }
  .bento__a, .bento__b, .bento__c { grid-column: 1 / -1; grid-row: auto; }
  .bento__d, .bento__e { grid-column: span 6; }
  .bento__f { grid-column: 1 / -1; }
  .bento__a .card { min-height: 420px; }
  .compare { grid-template-columns: 1fr; }
  .step .bezel__core { grid-template-columns: 70px 1fr; }
  .step__pic { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
  .rgrid { grid-template-columns: 1fr; }
  .offer__core { grid-template-columns: 1fr; }
  .offer__mark { position: absolute; right: 24px; top: 24px; width: 72px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__side { position: static; }
  .contact__grid { grid-template-columns: 1fr; }
  .clients { grid-template-columns: 1fr; text-align: left; }
  .clients__list { justify-content: flex-start; flex-wrap: wrap; }
  .clients__note { text-align: left; justify-self: start; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 47.99em) {
  .after { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding-top: 32px; }
  :root { --section: 88px; --r-xl: 1.5rem; }
  .nav { top: 12px; left: 12px; right: 12px; transform: none; gap: 8px; padding: 6px 6px 6px 14px; justify-content: space-between; }
  .nav__brand { margin-right: auto; }
  .lang__btn { padding: 0 10px 0 12px; }
  .nav.is-hidden { transform: translateY(-140%); }
  .nav__cta { display: none; }
  .hero { padding: 120px 0 80px; }
  .hero__title { line-height: 0.96; }
  .btn { white-space: normal; text-align: left; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .bezel--hero { aspect-ratio: 1 / 1; }
  .chip { max-width: 78%; padding: 10px 12px; }
  .chip--a { top: 6%; left: 6%; }
  .chip--b { top: 33%; right: 6%; }
  .chip--c { bottom: 6%; left: 6%; }
  .numbers__grid { grid-template-columns: 1fr; }
  .numbers__item { padding: 28px 24px; }
  .tabs { gap: 8px; }
  .tab { flex: 1 1 calc(50% - 8px); text-align: left; padding: 12px 16px; }
  .layer { grid-template-columns: 1fr; }
  .layer b { grid-row: auto; padding-top: 0; }
  .card { padding: 24px; }
  .compare__col, .compare__col--us .bezel__core { padding: 24px; }
  .bento__d, .bento__e, .bento__f { grid-column: 1 / -1; }
  .step { position: relative; top: auto; }
  .step .bezel__core { grid-template-columns: 1fr; padding: 24px; gap: 20px; min-height: 0; }
  .step__n { font-size: 2.5rem; }
  .offer__core { padding: 32px 24px; min-height: 0; }
  .offer__text .btn { width: 100%; justify-content: space-between; }
  .form__row { grid-template-columns: 1fr; }
  .founder__core { grid-template-columns: 1fr; }
  .founder__portrait { aspect-ratio: 4 / 3; }
  .founder__portrait img { object-position: 50% 12%; }
  .form__foot .btn { width: 100%; justify-content: space-between; }
  .menu__links a { flex-direction: column; align-items: flex-start; gap: 6px; }
  .menu__links a small { text-align: left; }
  .footer__grid { grid-template-columns: 1fr; }
}
.cf-turnstile { min-height: 0; }
.cf-turnstile:empty { display: none; }