/* StreamCharge — the public site: the front page (to become www.streamcharge.cz) and its legal pages, in Czech and in
   English. It is the console's room (app.css): the same tokens, the same ground and grid, the same glass and the same
   light, the stream aurora of fx.js, which both pages load from one address. The boldness is spent there, once. Around it
   everything stays quiet: glass panels, a small tilt and glare under a desktop pointer, one glint (the headline), one
   circling edge (the contact card) — and an industry's example, which opens out of its chip when it is asked for. Dark
   only. A phone gets denser glass and no blur over the moving light; a viewer who asks for less motion gets none. */
:root {
  --bg: #070b14;
  --bg-2: #0b1220;
  --panel: rgba(16, 24, 40, .72);
  --panel-solid: #101828;
  --panel-2: rgba(22, 32, 52, .78);
  --ink: #e7eefc;
  --ink-2: #b9c6de;
  --muted: #8796b0;
  --line: rgba(120, 150, 200, .16);
  --line-2: rgba(120, 150, 200, .28);
  --accent: #3d8bfd;
  --accent-2: #1d4ed8;
  --accent-soft: rgba(61, 139, 253, .14);
  --glow: rgba(61, 139, 253, .45);
  --cyan: #22d3ee;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, .14);
  --warn: #f3b14f;
  --warn-soft: rgba(243, 177, 79, .14);
  --me: rgba(61, 139, 253, .18);
  --them: rgba(255, 255, 255, .05);
  --grid: rgba(90, 140, 255, .06);
  --glare: rgba(255, 255, 255, .075);
  --sheen: rgba(255, 255, 255, .85);
  --radius: 14px;
  --shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: 16px;
  --tone: var(--cyan);
  color-scheme: dark;
}
/* EVERY INDUSTRY HAS ITS OWN LIGHT: its chip, its section's mark and its example take one tone each. */
[data-tone="retail"] { --tone: #34d399; }
[data-tone="learn"] { --tone: #a78bfa; }
[data-tone="hospitality"] { --tone: #fbbf24; }
[data-tone="makers"] { --tone: #fb7185; }
[data-tone="wholesale"] { --tone: #60a5fa; }
/* THE ROOM'S LIGHT IS ON (fx.js drew its first frame): the panels become glass over it — blurred where a desktop GPU
   carries it easily, clear and denser on a phone, where re-blurring a moving room every frame costs battery. */
.fx-gl { --panel: rgba(11, 18, 33, .62); --panel-2: rgba(18, 27, 46, .7); }
@media (pointer: coarse) { .fx-gl { --panel: rgba(11, 18, 33, .82); --panel-2: rgba(18, 27, 46, .86); } }
@media (min-width: 720px) { :root { --gutter: 28px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.ex-open { overflow: hidden; }
/* a column: on a short page (a legal one) the footer still stands at the foot of the screen */
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); min-height: 100vh; overflow-x: hidden;
  display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0 0 .6rem; text-wrap: pretty; }
.nw { white-space: nowrap; }
a { color: var(--accent); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font: 600 .7rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin: 0 0 .6rem; }
.muted { color: var(--muted); }
[id] { scroll-margin-top: 84px; }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the room: a deep ground, light from above, a faint grid — and, where there is a GPU, the stream aurora under the grid */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(61, 139, 253, .18), transparent 60%),
    radial-gradient(900px 400px at 0% 0%, rgba(34, 211, 238, .08), transparent 60%),
    var(--bg); }
.backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.fx-gl .backdrop canvas { opacity: 1; }
.backdrop::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 35%, transparent 85%); }

/* ── the header: the mark, a few places on the page, the other language, and the way into the console ─────────── */
.top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: .6rem var(--gutter); display: flex; align-items: center;
  justify-content: space-between; gap: .75rem; }
.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
/* the mark's viewBox is cut to what it draws, so its height is all mark */
.logo { height: 30px; width: auto; display: block; flex: none; }
.logo-stream { fill: var(--ink); }
.logo-charge { fill: var(--accent); }
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav .anchor { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.nav .anchor:hover { color: var(--ink); }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 .55rem;
  border-radius: 10px; border: 1px solid var(--line-2); color: var(--ink-2); font: 650 .8rem/1 var(--mono); letter-spacing: .08em;
  text-decoration: none; }
.lang-switch:hover { color: var(--ink); border-color: var(--accent); }
.console-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .85rem; white-space: nowrap;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); font-weight: 650; font-size: .9rem;
  text-decoration: none; box-shadow: 0 0 24px -12px var(--glow); }
.console-link:hover { border-color: var(--accent); }
.console-link svg { width: 16px; height: 16px; flex: none; color: var(--cyan); }
@media (min-width: 720px) { .top .logo { height: 40px; } }

/* ── controls ─────────────────────────────────────────────────────────────────────────────────────────────── */
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .6rem 1.3rem;
  border-radius: 12px; font-weight: 650; letter-spacing: .01em; text-decoration: none; }
.primary { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 24px -10px var(--glow); }
.primary.glow { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 30px -8px var(--glow); }
.primary:hover { filter: brightness(1.08); }
.secondary { border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); }
.secondary:hover { border-color: var(--accent); }
.primary svg, .secondary svg { width: 18px; height: 18px; flex: none; }

main { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── the hero: one calm sentence carries the page ─────────────────────────────────────────────────────────── */
.hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.6rem, 9vw, 6rem) var(--gutter) clamp(2rem, 5vw, 3.5rem); }
.hero h1 { font-size: clamp(2.3rem, 6.6vw, 4.6rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 0 0 1.1rem;
  max-width: 15em; text-wrap: balance;
  background-image: linear-gradient(100deg, transparent 42%, var(--sheen) 50%, transparent 58%), linear-gradient(100deg, var(--ink) 25%, var(--accent) 68%, var(--cyan) 100%);
  background-size: 250% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.hero .lead { font-size: clamp(1.08rem, 2.2vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 38rem; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
/* the industries, each in its own tone — a chip opens the industry's example (site.js) */
.chips-label { margin: 2.2rem 0 .7rem; font: 600 .68rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .35rem .85rem .35rem .65rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 9%, var(--panel));
  color: var(--ink); font-size: .88rem; font-weight: 600; white-space: nowrap; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.chip svg { width: 17px; height: 17px; flex: none; color: var(--tone); }
.chip:hover { border-color: var(--tone); box-shadow: 0 0 22px -6px color-mix(in srgb, var(--tone) 70%, transparent); }
.chip:active { transform: scale(.97); }
/* over the room's light, the hero keeps a little shade of its own (the headline is gradient-filled: a text-shadow would
   paint over its fill, so it takes a drop-shadow of its rendered shape instead) */
.fx-gl .hero .kicker, .fx-gl .hero .lead, .fx-gl .chips-label, .fx-gl .section-head { text-shadow: 0 1px 14px color-mix(in srgb, var(--bg) 85%, transparent); }
.fx-gl .hero h1 { filter: drop-shadow(0 1px 14px color-mix(in srgb, var(--bg) 80%, transparent)); }

/* ── glass: every panel on the page ─────────────────────────────────────────────────────────────────────────── */
.glass { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.glass::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 18px 18px 0 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glow), transparent); opacity: .7; }
@media (pointer: fine) {
  .fx-gl .glass { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
}
/* a phone: no blur over the moving light, so the header is solid — anything less shows the text scrolling under it */
@media (pointer: coarse) {
  .top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; color: var(--cyan);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--cyan) 10%, transparent));
  border: 1px solid var(--line-2); box-shadow: 0 8px 24px -14px var(--glow); }
.ico svg { width: 22px; height: 22px; }
[data-tone] .ico { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 20%, transparent), color-mix(in srgb, var(--tone) 6%, transparent)); }

/* ── the three promises ───────────────────────────────────────────────────────────────────────────────────── */
.promises { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.promise { padding: 1.35rem 1.3rem 1.2rem; }
.promise .ico { margin-bottom: 1rem; }
.promise h3 { font-size: 1.28rem; margin-bottom: .45rem; }
.promise p { color: var(--ink-2); margin: 0; }
@media (min-width: 900px) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── a section of the page ──────────────────────────────────────────────────────────────────────────────────── */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(3.5rem, 9vw, 6.5rem) var(--gutter) 0; }
.section-head { max-width: 44rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.03em; }
.section-head .sub { color: var(--ink-2); font-size: 1.08rem; margin: .8rem 0 0; }

/* the industries: words on one side, a glimpse of the work on the other */
.industry { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 1.6rem 0;
  border-top: 1px solid var(--line); }
.industry:first-of-type { border-top: 0; padding-top: 0; }
.ind-text h3 { font-size: clamp(1.45rem, 3.2vw, 2rem); letter-spacing: -.025em; margin-bottom: .6rem; }
.ind-text > p:not(.kicker) { color: var(--ink-2); font-size: 1.04rem; max-width: 34rem; }
.ind-text .kicker { display: flex; align-items: center; gap: .6rem; font-size: .74rem; margin-bottom: .8rem; color: var(--tone); }
.ind-text .kicker .ico { width: 34px; height: 34px; border-radius: 10px; }
.ind-text .kicker .ico svg { width: 18px; height: 18px; }
.fx-gl .ind-text { text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 80%, transparent); }
.ticks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--good-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent); }
.ticks li::after { content: ""; position: absolute; left: .36rem; top: .53em; width: .3rem; height: .52rem; border: solid var(--good);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 900px) {
  .industry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; padding: 3rem 0; }
  .industry.flip .ind-visual { order: -1; }
}

/* a glimpse of the work: a conversation, a booking, a commission, a lesson */
.ind-visual { padding: 1.1rem; max-width: 34rem; width: 100%; justify-self: center; }
.ind-visual.glass::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 70%, transparent), transparent); }
.mock-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mock-head b { font-size: .92rem; }
.mock-head .state { margin-left: auto; font: 600 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.orb { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #9ad2ff, var(--accent) 45%, var(--accent-2) 75%); box-shadow: 0 0 18px -2px var(--glow); }
.talk { display: flex; flex-direction: column; gap: .55rem; }
.bubble { max-width: 86%; margin: 0; padding: .6rem .85rem; border-radius: 14px; border: 1px solid var(--line); font-size: .93rem; line-height: 1.45; }
.bubble.guest { align-self: flex-end; background: var(--me); border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: var(--them); border-bottom-left-radius: 4px; }
.slip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .85rem; padding: .7rem .85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent); border: 1px solid var(--line-2); }
.slip .k { font: 600 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); width: 100%; }
.slip b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.ok { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; font: 600 .7rem var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--good); }
.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.spec { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .45rem .8rem; margin: .85rem 0 0; padding: .8rem .9rem; border-radius: 12px;
  background: var(--them); border: 1px solid var(--line); font-size: .93rem; }
.spec dt { font: 600 .64rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; font-weight: 600; }
.spec dd.blank { min-height: 1.4em; border-bottom: 1px dashed color-mix(in srgb, var(--tone) 60%, transparent); }
.saved { display: flex; margin: .8rem 0 0 .2rem; }
.spaced { margin-top: .8rem; }
.saved .ok { margin-left: 0; }
.doc-line { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: .5rem .7rem; border-radius: 10px; font-size: .88rem;
  color: var(--ink-2); background: var(--them); border: 1px solid var(--line); }
.doc-line svg { width: 16px; height: 16px; flex: none; color: var(--tone); }
.bookings { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bookings li { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .7rem; padding: .6rem .8rem; border-radius: 12px; background: var(--them);
  border: 1px solid var(--line); font-size: .92rem; }
.bookings b { font-variant-numeric: tabular-nums; min-width: 4.6rem; }
.bookings span:not(.ok) { color: var(--ink-2); }
.bookings .ok.asked { color: var(--tone); }

/* ── how it works: who does the work ───────────────────────────────────────────────────────────────────────── */
.roles { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.role { padding: 1.25rem 1.2rem 1.15rem; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .3rem 1rem; align-items: start; }
.role .ico { grid-row: span 2; }
.role h3 { font-size: 1.15rem; margin-top: .1rem; }
.role p { color: var(--ink-2); margin: 0; }
.console-note { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.4rem; color: var(--ink-2); }
.console-note a { font-weight: 650; }
.tech { margin-top: 1rem; font: 500 .8rem/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
@media (min-width: 720px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── the contact: the one card whose edge circles ─────────────────────────────────────────────────────────── */
.contact { overflow: hidden; padding: clamp(1.6rem, 5vw, 3rem); text-align: center; border-color: var(--line-2);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--panel-solid)), var(--panel-solid) 60%); }
.contact::before { content: ""; position: absolute; inset: 0; height: auto; border-radius: inherit; opacity: 1;
  background: radial-gradient(640px 220px at 50% 0%, var(--accent-soft), transparent 70%); }
@property --edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.contact::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--edge), transparent 0 62%, color-mix(in srgb, var(--cyan) 85%, transparent) 78%, var(--accent) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
@media (pointer: fine) {
  .fx-gl .contact { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--panel-solid) 80%, transparent) 60%); }
}
.contact > * { position: relative; }
.contact h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.03em; margin-bottom: .7rem; }
.contact p:not(.kicker) { color: var(--ink-2); font-size: 1.08rem; max-width: 34rem; margin-left: auto; margin-right: auto; text-wrap: balance; }
.contact .primary { margin: 1rem 0 1.3rem; font-size: 1.05rem; max-width: 100%; overflow-wrap: anywhere; }
.contact p.muted { color: var(--muted); font-size: .95rem; margin: 0 auto; }

/* ── an industry's example: a panel that opens out of its chip as a widening circle, and a ring that runs out ahead
   of it (site.js sets where the chip is, --ox/--oy, and how far the circle must open, --r0/--r1) ─────────────── */
dialog.example { position: fixed; inset: 0; margin: auto; width: min(700px, calc(100vw - 2 * var(--gutter))); height: fit-content;
  max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
dialog.example::backdrop { background: rgba(3, 6, 14, .66); }
@media (pointer: fine) { dialog.example::backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
.ex-panel { position: relative; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; border-radius: 22px;
  padding: clamp(1.2rem, 4vw, 1.8rem); background: linear-gradient(165deg, color-mix(in srgb, var(--tone) 11%, #0f1b33), #0a1122 62%);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 70px -24px color-mix(in srgb, var(--tone) 70%, transparent); }
.ex-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tone), transparent); opacity: .8; }
.ex-ring { position: absolute; left: var(--ox, 50%); top: var(--oy, 50%); width: 14px; height: 14px; margin: -7px; border-radius: 50%;
  pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--tone), 0 0 40px 10px color-mix(in srgb, var(--tone) 45%, transparent); }
.ex-close { position: absolute; top: .8rem; right: .8rem; z-index: 1; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--ink); }
.ex-close:hover { border-color: var(--tone); }
.ex-close svg { width: 18px; height: 18px; }
.ex-panel .kicker { display: flex; align-items: center; gap: .6rem; color: var(--tone); padding-right: 3rem; }
.ex-panel .kicker .ico { width: 34px; height: 34px; border-radius: 10px; }
.ex-panel .kicker .ico svg { width: 18px; height: 18px; }
.ex-panel h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); letter-spacing: -.025em; margin: .2rem 3rem .6rem 0; }
.ex-panel > p { color: var(--ink-2); margin: 0 0 .8rem; }
.ex-panel .ind-visual { max-width: none; padding: 1rem; margin-top: 1rem; }
.ex-shots { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin: 1.1rem 0 0; }
.ex-shot { margin: 0; }
.ex-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-2); background: #f4ece0;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7); }
.ex-shot.narrow { max-width: 260px; justify-self: center; }
.ex-shot figcaption, .ex-note { margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.ex-note { margin: .9rem 0 0; }
.ex-tag { display: inline-block; margin-right: .4rem; padding: .15rem .45rem; border-radius: 6px; font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.ex-link { margin-top: .4rem; }
@media (min-width: 640px) { .ex-shots { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } .ex-shot.narrow { max-width: none; } }
/* Two wide screenshots stand one above the other. */
.ex-shots.stack { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: no-preference) {
  dialog.example.opening .ex-panel { animation: ex-open .62s cubic-bezier(.2, .8, .2, 1) both; }
  dialog.example.opening .ex-ring { animation: ex-ring .9s cubic-bezier(.2, .7, .3, 1) both; }
  dialog.example.closing .ex-panel { animation: ex-close .3s cubic-bezier(.5, 0, .75, .2) both; }
  dialog.example.opening::backdrop { animation: ex-fade .4s ease both; }
  dialog.example.closing::backdrop { animation: ex-fade .3s ease reverse both; }
  @keyframes ex-open { from { clip-path: circle(var(--r0, 20px) at var(--ox, 50%) var(--oy, 50%)); }
    to { clip-path: circle(var(--r1, 150%) at var(--ox, 50%) var(--oy, 50%)); } }
  @keyframes ex-close { from { clip-path: circle(var(--r1, 150%) at var(--ox, 50%) var(--oy, 50%)); }
    to { clip-path: circle(var(--r0, 20px) at var(--ox, 50%) var(--oy, 50%)); } }
  @keyframes ex-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(46); } }
  @keyframes ex-fade { from { opacity: 0; } }
}

/* ── the footer: who we are, and the legal pages ───────────────────────────────────────────────────────────── */
.foot { margin-top: clamp(3.5rem, 9vw, 6rem); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 2.2rem var(--gutter) 2.6rem; display: grid; gap: 1.8rem; grid-template-columns: minmax(0, 1fr); }
.foot .logo { height: 32px; }
.foot-brand p { margin: .8rem 0 0; color: var(--muted); font-size: .92rem; max-width: 22rem; }
.company { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: .92rem; }
.company dt { font: 600 .64rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.company dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.company a { color: var(--ink); }
.foot-links { display: flex; flex-direction: column; gap: .55rem; font-size: .95rem; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .9fr); gap: 2.5rem; } }

/* ── a legal page: one document in one glass sheet; its text is plain HTML (h2, h3, p, ul, ol) inside .doc-body ─── */
.legal { max-width: 52rem; margin: 0 auto; padding: clamp(1.6rem, 5vw, 3.2rem) var(--gutter) 0; }
.back { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .92rem;
  margin-bottom: 1.2rem; }
.back:hover { color: var(--ink); }
.back svg { width: 16px; height: 16px; }
.doc { padding: clamp(1.4rem, 5vw, 2.8rem); }
.fx-gl .doc { --panel: rgba(11, 18, 33, .86); }
.doc h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: -.03em; margin-bottom: 1.4rem; }
/* an English legal page is a translation, and says which text prevails */
.translation-note { margin: -.4rem 0 1.4rem; padding: .7rem .9rem; border-radius: 12px; font-size: .92rem; color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.translation-note a { color: var(--ink); }
.doc-body { font-size: 1rem; line-height: 1.7; color: var(--ink-2); max-width: 44rem; overflow-wrap: break-word; }
.doc-body > :first-child { margin-top: 0; }
.doc-body h2 { font-size: 1.35rem; color: var(--ink); margin: 2.2rem 0 .7rem; letter-spacing: -.015em; }
.doc-body h3 { font-size: 1.08rem; color: var(--ink); margin: 1.6rem 0 .5rem; letter-spacing: -.01em; }
.doc-body p { margin: 0 0 .9rem; }
.doc-body ul, .doc-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.doc-body li { margin: .3rem 0; }
.doc-body li::marker { color: var(--cyan); }
.doc-body strong, .doc-body b { color: var(--ink); }
.doc-body a { color: var(--accent); text-underline-offset: 3px; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .92rem; display: block; overflow-x: auto; }
.doc-body th, .doc-body td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-body th { color: var(--ink); }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; }

/* phone and narrow: the anchors give way to the other language and the console link; the console link drops its icon,
   then the mark shrinks a little, before anything wraps */
@media (max-width: 719px) {
  .nav { gap: .5rem; }
  .nav .anchor { display: none; }
  .hero .cta > * { flex: 1 1 auto; }
  .chip { min-height: 36px; padding: .3rem .75rem .3rem .55rem; font-size: .85rem; }
}
@media (max-width: 480px) {
  .console-link svg { display: none; }
  .console-link { padding: .4rem .7rem; font-size: .86rem; }
}
@media (max-width: 380px) { .top .logo { height: 27px; } }
@media (max-width: 365px) { .top .logo { height: 25px; } .lang-switch { min-width: 36px; padding: 0 .4rem; } }
@media (max-width: 340px) { .top .logo { height: 21px; } .console-link { padding: .35rem .55rem; font-size: .8rem; } .nav { gap: .35rem; } }

/* motion — every bit of it off when the viewer asks */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero h1 { animation: glint 11s 1.6s ease-in-out infinite; }
  .contact::after { animation: edge 10s linear infinite; }
  @keyframes glint { 0% { background-position: 130% 0, 0 0; } 16%, 100% { background-position: -30% 0, 0 0; } }
  @keyframes edge { to { --edge: 360deg; } }
}

/* the cards lean toward a desktop pointer and catch its light (fx.js sets --rx/--ry/--mx/--my) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
  .tilt.tilting { transition: transform .12s ease-out, box-shadow .3s ease; box-shadow: var(--shadow), 0 22px 50px -26px var(--glow); }
  .glass.tilt.tilting { background: radial-gradient(420px circle at var(--mx) var(--my), var(--glare), transparent 45%), var(--panel); }
}