/* === tomic.lighting · web === */
/* Písma z vlastního serveru (2026-10-20, dřív Google Fonts; licence SIL OFL). Variabilní soubory = všechny řezy v jednom. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#06060c;
  --bg-2:#0b0b18;
  --ink:#eef0ff;
  --ink-dim:#9aa0c2;
  --ink-mute:#7d82a8;   /* 2026-10-15: dřív #5b6082 — na tmavém pozadí nečitelné (kontrast < 3:1) */
  --line:#1c1f33;
  --line-2:#252944;
  --card:rgba(20,22,40,.55);
  --card-strong:rgba(22,24,46,.75);
  --pink:#8b5cf6;   /* 2026-10-15: fialová výběru z aplikace (dřív růžová #8b5cf6) */
  --amber:#ffb02e;
  --cyan:#60a5fa;
  --violet:#7c3aed;
  --lime:#7cff4a;
  --grad:linear-gradient(95deg,#ede9fe 0%,#b39dfb 45%,#93c5fd 100%);
  --glow-pink:0 0 40px rgba(139,92,246,.45);
  --glow-cyan:0 0 40px rgba(96,165,250,.4);
  --r:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

code{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:.92em;color:#cbd0ff;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:5px}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* ----- animated stage background ----- */
.bg-stage{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(122,74,255,.18), transparent 60%),
    radial-gradient(900px 600px at 0% 10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(96,165,250,.18), transparent 60%),
    var(--bg);
}
/* GOBA V POZADÍ (2026-10-15, user: „nebylo by lepší, kdyby měhaly spotová goba po pozadí“): projekce gob
   moving headů, které se pomalu posouvají a otáčejí po ploše — tvar gobo z SVG masky, barva z palety aplikace. */
.gobo{
  position:absolute;width:440px;height:440px;left:0;top:0;
  --c:139,92,246;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(var(--c),.95) 30%,rgba(var(--c),.55) 62%,rgba(var(--c),.18) 100%);
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
  mix-blend-mode:screen;opacity:.34;filter:blur(2px) drop-shadow(0 0 30px rgba(var(--c),.6));
  will-change:transform;
}
.gobo-1{--g:url(/assets/gobo/gobo-1.svg?v=2);--c:139,92,246;animation:gob1 34s ease-in-out infinite}
.gobo-2{--g:url(/assets/gobo/gobo-2.svg?v=2);--c:96,165,250;width:360px;height:360px;animation:gob2 40s ease-in-out infinite}
.gobo-3{--g:url(/assets/gobo/gobo-3.svg?v=2);--c:255,176,46;width:400px;height:400px;opacity:.26;animation:gob3 46s ease-in-out infinite}
.gobo-4{--g:url(/assets/gobo/gobo-4.svg?v=2);--c:196,181,253;width:320px;height:320px;animation:gob4 38s ease-in-out infinite}
.gobo-5{--g:url(/assets/gobo/gobo-1.svg?v=2);--c:124,58,237;width:520px;height:520px;opacity:.22;animation:gob5 52s ease-in-out infinite}
@keyframes gob1{0%{transform:translate(-5vw,8vh) rotate(0)}33%{transform:translate(35vw,40vh) rotate(120deg)}66%{transform:translate(10vw,70vh) rotate(240deg)}100%{transform:translate(-5vw,8vh) rotate(360deg)}}
@keyframes gob2{0%{transform:translate(70vw,10vh) rotate(0)}40%{transform:translate(45vw,55vh) rotate(-150deg)}75%{transform:translate(80vw,65vh) rotate(-260deg)}100%{transform:translate(70vw,10vh) rotate(-360deg)}}
@keyframes gob3{0%{transform:translate(40vw,-10vh) rotate(0)}30%{transform:translate(70vw,30vh) rotate(90deg)}65%{transform:translate(20vw,45vh) rotate(200deg)}100%{transform:translate(40vw,-10vh) rotate(360deg)}}
@keyframes gob4{0%{transform:translate(85vw,75vh) rotate(0)}50%{transform:translate(55vw,15vh) rotate(180deg)}100%{transform:translate(85vw,75vh) rotate(360deg)}}
@keyframes gob5{0%{transform:translate(15vw,60vh) rotate(0)}50%{transform:translate(60vw,-5vh) rotate(-180deg)}100%{transform:translate(15vw,60vh) rotate(-360deg)}}
@media (max-width:760px){ .gobo{width:240px;height:240px} .gobo-4,.gobo-5{display:none} }
/* Omezené animace ve Windows: goba se dál hýbou, jen dvakrát pomaleji (user 2026-10-15: „animace gob neběží“ —
   majitel má reduced-motion zapnuté a chce je vidět). Plynulý pomalý posun nemá rychlé záblesky. */
@media (prefers-reduced-motion:reduce){ .gobo{animation-duration:80s!important} }
/* ČITELNOST TEXTU NAD GOBY (user 2026-10-15: „text musí zůstat vidět, nyní je malý kontrast“):
   tmavší vrstva přes goba v oblasti textu + stín pod nadpisy a úvodními odstavci. */
.bg-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,12,.72) 0%,rgba(6,6,12,.5) 45%,rgba(6,6,12,.25) 75%,rgba(6,6,12,.15) 100%)}
h1,h2,.lede,.hero p,.page-head p{text-shadow:0 2px 18px rgba(6,6,12,.9),0 0 2px rgba(6,6,12,.6)}
.grad{text-shadow:none!important;filter:drop-shadow(0 2px 14px rgba(6,6,12,.85))}
.grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:3px 3px;
  opacity:.5;
}

/* ----- nav ----- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:rgba(6,6,12,.6);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em}
.brand-mark{filter:drop-shadow(0 0 14px rgba(124,58,237,.45))}
.brand-name{font-size:18px}
.brand-dot{color:var(--amber);margin:0 2px}
.brand-sub{font-weight:500;color:var(--ink-dim)}
.brand.small .brand-name{font-size:14px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);position:relative}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;
  background:var(--grad);border-radius:99px;
}
.nav-cta{
  padding:8px 16px;border-radius:99px;
  background:var(--grad);
  color:#0a0a14 !important;
  font-weight:600 !important;
  box-shadow:0 6px 24px -8px rgba(139,92,246,.6);
}
.nav-cta.active::after{display:none}
.nav-burger{
  display:none !important;
  background:none;border:1px solid var(--line-2);
  color:var(--ink);font-size:24px;line-height:1;padding:4px 12px;border-radius:8px;cursor:pointer;
}
@media (max-width:880px){
  .nav-links{
    position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,6,12,.95);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:12px 0;
    display:none;
  }
  body.nav-open .nav-links{display:flex}
  .nav-links a{padding:14px 28px;border-bottom:1px solid var(--line)}
  .nav-links a.active::after{display:none}
  .nav-links a.active{background:rgba(96,165,250,.08)}
  .nav-cta{margin:8px 28px 0;text-align:center}
  .nav-burger{display:block !important}
}

/* ----- hero ----- */
.hero{padding:90px 0 60px;position:relative}
.hero-eyebrow{margin-bottom:24px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:99px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  color:var(--ink-dim);font-size:13px;font-weight:500;
}
.pill i{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#7cff4a;box-shadow:0 0 10px #7cff4a;
  animation:pulse 1.6s infinite ease-in-out;
}
.pill-free{
  background:linear-gradient(95deg,rgba(124,255,74,.14),rgba(96,165,250,.14));
  border-color:rgba(124,255,74,.4);
  color:#dfffdc;
}
.pill-free i{background:#7cff4a;box-shadow:0 0 12px #7cff4a}
@keyframes pulse{50%{opacity:.35}}
.hero-title{
  font-size:clamp(40px,7vw,84px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 24px;
  max-width:14ch;
}
.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(139,92,246,.18));
}
.hero-sub{
  color:var(--ink-dim);
  font-size:clamp(16px,1.5vw,19px);
  max-width:62ch;
  margin:0 0 36px;
}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:48px}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:12px;
  font-weight:600;text-decoration:none;font-size:15px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .25s ease, background .2s;
  cursor:pointer;
}
.btn-primary{
  background:var(--grad);color:#0a0a14;
  box-shadow:0 12px 40px -10px rgba(139,92,246,.55), 0 2px 0 rgba(255,255,255,.18) inset;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 50px -10px rgba(139,92,246,.7), 0 2px 0 rgba(255,255,255,.22) inset}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:#373c5e}
.btn.big{padding:16px 26px;font-size:16px}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  list-style:none;padding:0;margin:0;
  max-width:780px;
}
.hero-stats li{
  display:flex;flex-direction:column;gap:2px;
  padding:18px 18px;border-radius:var(--r);
  background:var(--card);
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.hero-stats b{font-size:28px;font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-stats b small{font-size:.55em;font-weight:600;opacity:.7;-webkit-text-fill-color:initial;color:var(--ink-dim);background:none;margin-left:1px}
.hero-stats span{color:var(--ink-mute);font-size:13px;font-weight:500}
@media (max-width:680px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* ----- bilingual banner ----- */
.bilingual-banner{padding:40px 0 10px}
.bb-box{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding:24px 30px;border-radius:18px;
  background:
    radial-gradient(500px 200px at 0% 50%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(500px 200px at 100% 50%, rgba(139,92,246,.15), transparent 60%),
    linear-gradient(180deg,rgba(16,18,36,.85),rgba(10,11,24,.85));
  border:1px solid var(--line-2);
  box-shadow:0 30px 80px -30px rgba(96,165,250,.25);
}
.bb-flags{font-size:48px;line-height:1;letter-spacing:-4px;filter:drop-shadow(0 4px 20px rgba(96,165,250,.4));white-space:nowrap}
.bb-text h2{font-size:clamp(20px,2.6vw,28px);font-weight:700;letter-spacing:-.015em;margin:0 0 6px;line-height:1.2}
.bb-text p{color:var(--ink-dim);font-size:15px;margin:0;line-height:1.5}
.bb-text p b{color:var(--ink)}
@media (max-width:680px){
  .bb-box{grid-template-columns:1fr;text-align:center;padding:22px 18px;gap:10px}
  .bb-flags{font-size:40px}
  .bb-text h2{font-size:20px}
}

.foot-bilingual{margin-top:6px !important;font-size:12.5px}
.foot-bilingual b{color:var(--ink-dim)}

/* ----- use cases (3 scenarios) ----- */
.use-cases{padding:60px 0 40px}
.uc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.uc{
  padding:28px 26px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,22,40,.7),rgba(10,11,24,.5));
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.uc:hover{transform:translateY(-2px);border-color:#373c5e}
.uc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad);opacity:.7;
}
.uc-icon{font-size:38px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 0 24px rgba(139,92,246,.3))}
.uc h3{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:0 0 6px}
.uc-lead{color:var(--ink-dim);font-size:14.5px;margin:0 0 18px;font-style:italic}
.uc ul{margin:0;padding:0;list-style:none}
.uc li{
  padding:9px 0 9px 22px;position:relative;font-size:14px;color:var(--ink-dim);
  border-top:1px dashed var(--line-2);
}
.uc li:first-child{border-top:none}
.uc li::before{
  content:"";position:absolute;left:0;top:14px;
  width:10px;height:10px;border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 12px rgba(139,92,246,.5);
}
.uc li b{color:var(--ink);font-weight:600}
@media (max-width:1320px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.uc-grid{grid-template-columns:1fr}}

/* ----- limits banner ----- */
.limits-banner{padding:30px 0 40px}
.lb-box{
  padding:28px 32px;border-radius:18px;
  background:
    radial-gradient(700px 200px at 50% 0%, rgba(124,255,74,.12), transparent 60%),
    linear-gradient(180deg,rgba(13,18,28,.85),rgba(10,11,24,.85));
  border:1px solid rgba(124,255,74,.3);
  text-align:center;
}
.lb-tag{
  display:inline-block;padding:5px 14px;border-radius:99px;
  background:rgba(124,255,74,.12);border:1px solid rgba(124,255,74,.4);
  color:#bcffaf;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px;
}
.lb-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0 0 16px;
}
.lb-stats > div{
  display:flex;flex-direction:column;gap:2px;
  padding:14px;border-radius:12px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
}
.lb-stats b{
  font-size:32px;font-weight:700;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.lb-stats span{color:var(--ink-mute);font-size:13px;font-weight:500}
.lb-note{color:var(--ink-dim);font-size:14.5px;margin:0;max-width:62ch;margin-left:auto;margin-right:auto}
.lb-note b{color:var(--ink)}
@media (max-width:700px){
  .lb-stats{grid-template-columns:repeat(2,1fr)}
  .lb-box{padding:22px 18px}
  .lb-stats b{font-size:26px}
}

/* ----- how (3-step intro) ----- */
.how{padding:80px 0 40px}
.how-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-bottom:34px;
}
.how-card{
  position:relative;padding:28px 24px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,22,40,.7),rgba(10,11,24,.65));
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
}
.how-num{
  position:absolute;top:-14px;left:24px;
  width:34px;height:34px;border-radius:50%;
  background:var(--grad);color:#0a0a14;
  font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(139,92,246,.55);
}
.how-card h3{margin:6px 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.how-card p{margin:0;color:var(--ink-dim);font-size:14.5px}
.how-card p b{color:var(--ink)}
.how-cta{display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.how-hint{color:var(--ink-mute);font-size:13.5px}
@media (max-width:900px){.how-grid{grid-template-columns:1fr}}

/* ----- hardware callout ----- */
.hw-callout{
  margin-top:28px;padding:30px 32px;border-radius:18px;
  background:
    radial-gradient(700px 280px at 0% 0%, rgba(255,176,46,.18), transparent 60%),
    radial-gradient(500px 300px at 100% 100%, rgba(96,165,250,.18), transparent 60%),
    linear-gradient(180deg,#11122a 0%,#0a0b18 100%);
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hw-callout h3{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.015em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hw-callout p{margin:0;color:var(--ink-dim);font-size:15px;max-width:62ch}
.hw-callout p b{color:var(--ink)}

/* ----- highlight card ----- */
.card.highlight{
  background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(96,165,250,.04));
  border-color:rgba(139,92,246,.35);
  box-shadow:0 0 30px rgba(139,92,246,.08), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.card.highlight:hover{
  border-color:rgba(139,92,246,.55);
  background:linear-gradient(180deg,rgba(139,92,246,.12),rgba(96,165,250,.06));
}

/* ----- section heads ----- */
.section-head{max-width:760px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{
  display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;margin-bottom:14px;
}
.section-head h2{
  font-size:clamp(28px,4vw,46px);
  line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:0 0 18px;
}
.lede{color:var(--ink-dim);font-size:17px;margin:0;max-width:60ch}
.section-head.center .lede{margin-left:auto;margin-right:auto}

/* ----- console mock ----- */
.console-mock{padding:60px 0 70px}
.console{
  border-radius:18px;
  background:linear-gradient(180deg,#0d0e1c 0%,#0a0b14 100%);
  border:1px solid var(--line-2);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
}
.c-top{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:rgba(255,255,255,.025);
  border-bottom:1px solid var(--line);
  font-size:13px;color:var(--ink-dim);
}
.c-dot{width:11px;height:11px;border-radius:50%}
.c-dot-r{background:#ff5e57}
.c-dot-y{background:#ffbd2e}
.c-dot-g{background:#28c940}
.c-title{margin-left:8px;color:var(--ink-mute)}
.c-rec{margin-left:auto;color:#ff5e57;font-weight:600;letter-spacing:.05em;animation:pulse 1s infinite}

.c-body{display:grid;grid-template-columns:170px 1fr 240px;gap:0;min-height:380px}
.c-sidebar,.c-prog{padding:14px;background:rgba(255,255,255,.015);border-right:1px solid var(--line)}
.c-prog{border-right:none;border-left:1px solid var(--line)}
.c-side-h{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);margin-bottom:10px;font-weight:600}
.c-side-item{padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-dim);cursor:default;margin-bottom:2px;transition:background .15s}
.c-side-item.active{background:rgba(96,165,250,.1);color:var(--cyan);box-shadow:inset 2px 0 0 var(--cyan)}
.c-side-item:not(.active):hover{background:rgba(255,255,255,.03)}

.c-main{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:0;
}
.c-pane{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.c-pane:nth-child(2n){border-right:none}
.c-pane:nth-last-child(-n+2){border-bottom:none}
.c-pane-h{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);margin-bottom:10px;font-weight:600}
.c-pane-h small{color:var(--cyan);text-transform:none;letter-spacing:0;margin-left:6px;font-weight:500;font-size:11px}
.c-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.c-tiles.small{grid-template-columns:repeat(4,1fr)}
.c-tiles span{
  height:38px;border-radius:8px;
  background:var(--c, #2a2d4a);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;color:#0a0a14;
  box-shadow:0 0 18px color-mix(in srgb, var(--c, #2a2d4a) 35%, transparent);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.c-tiles.small span{background:#1c1f33;color:var(--ink-dim);box-shadow:none;border:1px solid var(--line-2);text-shadow:none}

.c-effects{display:flex;flex-wrap:wrap;gap:6px}
.ef{
  padding:7px 11px;border-radius:8px;border:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-dim);font-weight:500;
}
.ef.on{background:rgba(139,92,246,.12);color:var(--pink);border-color:rgba(139,92,246,.5);box-shadow:0 0 16px rgba(139,92,246,.2)}

.c-stage{position:relative;min-height:180px}
.stage{
  position:relative;height:130px;
  border-radius:10px;
  background:radial-gradient(ellipse at center bottom, rgba(96,165,250,.1), transparent 70%), #0b0d1c;
  border:1px solid var(--line);
  overflow:hidden;
}
.stage::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.04));
  border-top:1px dashed var(--line-2);
}
.lamp{
  position:absolute;left:var(--x);top:var(--y);
  width:14px;height:14px;border-radius:50%;
  background:var(--c);
  box-shadow:0 0 22px var(--c),0 0 6px var(--c);
  transform:translate(-50%,-50%);
}

.c-prog .prog-row{display:grid;grid-template-columns:50px 1fr 40px;align-items:center;gap:8px;margin-bottom:11px;font-size:12.5px}
.c-prog label{color:var(--ink-mute);font-weight:600;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em}
.c-prog .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.c-prog .bar i{display:block;height:100%;border-radius:99px}
.c-prog span{text-align:right;color:var(--ink-dim);font-family:'JetBrains Mono',monospace;font-size:11px}
.c-prog .prog-row.size{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}

.c-fader-bar{
  display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
}
.fader{
  background:linear-gradient(180deg,#11132a,#0a0b16);
  padding:14px 12px;min-height:78px;
  display:flex;flex-direction:column;gap:2px;justify-content:center;
  font-size:13px;font-weight:600;color:#fff;
  position:relative;overflow:hidden;
}
.fader::before{
  content:"";position:absolute;inset:0;background:var(--col);opacity:.78;
}
.fader > *{position:relative;z-index:1}
.fader span{font-family:'JetBrains Mono',monospace;font-size:10.5px;opacity:.8;color:#0a0a14;font-weight:700}
.fader small{font-size:11px;font-weight:500;opacity:.85;color:#0a0a14}
.fader.off{background:#0a0b14;color:var(--ink-mute)}
.fader.off::before{display:none}
.fader.off span,.fader.off small{color:var(--ink-mute)}

.caption{color:var(--ink-mute);font-size:13px;margin-top:18px;text-align:center}

@media (max-width:900px){
  .c-body{grid-template-columns:1fr}
  .c-sidebar{display:none}
  .c-prog{border-left:none;border-top:1px solid var(--line)}
  .c-fader-bar{grid-template-columns:repeat(4,1fr)}
}

/* ----- features grid ----- */
.features{padding:80px 0}
.cat-h{
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);
  margin:48px 0 18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.cat-h::before{
  content:"";display:inline-block;width:24px;height:1px;
  background:var(--grad);vertical-align:middle;margin-right:12px;
}
.cat-h:first-of-type{margin-top:0}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px;
  transition:transform .2s, border-color .2s, background .2s;
  backdrop-filter:blur(8px);
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--card-strong)}
.card h3{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-dim);font-size:14.5px}
.card p b{color:var(--ink)}
.ico{
  width:46px;height:46px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;
  margin-bottom:18px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
}
.ico-1{color:var(--pink);box-shadow:var(--glow-pink),inset 0 0 0 1px rgba(139,92,246,.2)}
.ico-2{color:var(--amber);box-shadow:0 0 32px rgba(255,176,46,.35),inset 0 0 0 1px rgba(255,176,46,.2)}
.ico-3{color:var(--cyan);box-shadow:var(--glow-cyan),inset 0 0 0 1px rgba(96,165,250,.2)}
.ico-4{color:var(--violet);box-shadow:0 0 32px rgba(122,74,255,.35),inset 0 0 0 1px rgba(122,74,255,.2)}
.ico-5{color:#ff5e57;box-shadow:0 0 32px rgba(255,94,87,.35),inset 0 0 0 1px rgba(255,94,87,.2)}
.ico-6{color:var(--lime);box-shadow:0 0 32px rgba(124,255,74,.35),inset 0 0 0 1px rgba(124,255,74,.2)}
.ico-7{color:var(--amber);box-shadow:0 0 32px rgba(255,176,46,.35),inset 0 0 0 1px rgba(255,176,46,.2)}
.ico-8{color:var(--cyan);box-shadow:var(--glow-cyan),inset 0 0 0 1px rgba(96,165,250,.2)}
.ico-9{color:var(--pink);box-shadow:var(--glow-pink),inset 0 0 0 1px rgba(139,92,246,.2)}

@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

/* ----- hardware ----- */
.hardware{padding:80px 0}
.hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hw{
  padding:22px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.hw-head{font-size:14px;font-weight:600;color:var(--cyan);letter-spacing:-.01em;margin-bottom:10px}
.hw p,.hw ul{margin:0;color:var(--ink-dim);font-size:14.5px}
.hw ul{padding-left:18px}
.hw li{margin:3px 0}
@media (max-width:900px){.hw-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.hw-grid{grid-template-columns:1fr}}

/* ----- specs ----- */
.specs{padding:80px 0}
.specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.spec{
  padding:18px 18px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.spec b{font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.spec span{color:var(--ink);font-size:14.5px;font-weight:500}
@media (max-width:900px){.specs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.specs-grid{grid-template-columns:1fr}}

/* ----- cta ----- */
.cta{padding:60px 0 100px}
.cta-card{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
  padding:46px 48px;border-radius:24px;
  background:
    radial-gradient(800px 300px at 0% 50%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(600px 300px at 100% 50%, rgba(96,165,250,.18), transparent 60%),
    linear-gradient(180deg,#11122a 0%,#0a0b18 100%);
  border:1px solid var(--line-2);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.6);
}
.cta-card h2{font-size:clamp(26px,3.5vw,40px);line-height:1.1;letter-spacing:-.02em;margin:8px 0 12px}
.cta-card p{color:var(--ink-dim);margin:0;max-width:48ch}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta-actions .btn{justify-content:center}
@media (max-width:780px){
  .cta-card{grid-template-columns:1fr;padding:34px 24px}
}

/* ----- footer ----- */
.foot{border-top:1px solid var(--line);background:rgba(6,6,12,.6);backdrop-filter:blur(8px)}
.foot-inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:36px 28px;flex-wrap:wrap;
}
.foot-muted{color:var(--ink-mute);font-size:13px;margin:6px 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:14px;row-gap:8px;align-items:center;color:var(--ink-mute);font-size:14px}
.foot-links a{color:var(--ink-dim);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-bar{text-align:center;padding:14px;font-size:12.5px;color:var(--ink-mute);border-top:1px solid var(--line)}

/* ----- hero supports chips ----- */
.hero-supports{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:-12px 0 36px;
  max-width:760px;
}
.hero-supports-label{
  font-size:13px;color:var(--ink-mute);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  margin-right:4px;
}
.hero-supports .chip{
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:99px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  color:var(--ink-dim);font-size:13px;font-weight:500;
  white-space:nowrap;
  transition:border-color .2s, color .2s;
}
.hero-supports .chip:hover{color:var(--ink);border-color:#373c5e}
.hero-supports .chip.chip-strong{
  color:var(--ink);font-weight:600;
  background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.35);
}

/* ----- page head (sub-pages) ----- */
.page-head{padding:60px 0 30px}
.page-head h1{
  font-size:clamp(34px,5.5vw,58px);font-weight:700;line-height:1.05;letter-spacing:-.025em;
  margin:8px 0 18px;
}
.page-head .lede{max-width:64ch;font-size:17px}
.page-head .lede a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3)}
.page-head .lede a:hover{border-bottom-color:var(--cyan)}

/* TOC inline */
.toc{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;
  padding-top:22px;border-top:1px solid var(--line);
}
.toc a{
  padding:6px 12px;border-radius:99px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  color:var(--ink-dim);font-size:13px;font-weight:500;text-decoration:none;
  transition:color .15s, background .15s;
}
.toc a:hover{color:var(--ink);background:rgba(96,165,250,.08);border-color:rgba(96,165,250,.3)}

/* page-end CTA */
.page-cta{
  margin-top:60px;padding:36px;border-radius:18px;text-align:center;
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(139,92,246,.15), transparent 60%),
    linear-gradient(180deg,#11122a,#0a0b18);
  border:1px solid var(--line-2);
}
.page-cta h2{font-size:clamp(22px,3vw,32px);margin:0 0 8px;letter-spacing:-.015em}
.page-cta p{color:var(--ink-dim);margin:0 0 22px}

/* ----- quickstart (5 steps) ----- */
.quickstart{padding:70px 0}
.qs-list{list-style:none;padding:0;margin:36px 0 0;counter-reset:qs;
  display:flex;flex-direction:column;gap:20px;max-width:1080px;margin-left:auto;margin-right:auto}
.qs-step{
  display:grid;grid-template-columns:54px 1fr 1fr;gap:24px;align-items:center;
  padding:26px 28px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,22,40,.65),rgba(10,11,24,.5));
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  position:relative;
}
.qs-step::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:3px;border-radius:99px;
  background:var(--grad);opacity:.6;
}
.qs-num{
  width:54px;height:54px;border-radius:16px;
  background:var(--grad);color:#0a0a14;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;
  box-shadow:0 14px 34px -10px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.qs-body h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px;line-height:1.25}
.qs-body p{color:var(--ink-dim);font-size:14.5px;margin:0;line-height:1.55}
.qs-body p b{color:var(--ink)}
.qs-body p a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3)}
.qs-body p a:hover{border-bottom-color:var(--cyan)}
.qs-body kbd{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:#cbd0ff;margin:0 1px;
}
.qs-visual{align-self:stretch;display:flex;align-items:center}

/* mock visuals inside steps */
.qsv-patch,.qsv-palettes,.qsv-faders,.qsv-show{
  width:100%;border-radius:12px;border:1px solid var(--line);
  background:#0b0d1c;padding:14px;font-size:12px;
}
.qsv-patch-h,.qsv-pal-h,.qsv-show-live{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:8px;
}
.qsv-patch-row{display:grid;grid-template-columns:30px 1fr auto 16px;gap:8px;align-items:center;padding:5px 0;border-top:1px dashed var(--line-2);color:var(--ink-dim)}
.qsv-patch-row:first-of-type{border-top:none}
.px-n{font-family:'JetBrains Mono',monospace;color:var(--ink-mute);font-size:10px}
.px-addr{font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:11px}
.px-grp{color:var(--ink-mute);text-align:center}
.qsv-patch-row.qsv-new{color:var(--ink)}
.qsv-patch-row.qsv-new .px-grp{color:#7cff4a;font-weight:700}
.qsv-drop{
  margin-top:10px;padding:10px;border-radius:8px;text-align:center;
  border:1px dashed rgba(96,165,250,.4);color:var(--cyan);font-weight:500;font-size:11.5px;
  background:rgba(96,165,250,.05);
}
/* groups */
.qsv-groups{display:flex;flex-wrap:wrap;gap:8px}
.qsv-grp{
  flex:1 1 calc(50% - 4px);min-width:110px;
  padding:12px 14px;border-radius:10px;
  background:color-mix(in srgb, var(--c, #2a2d4a) 16%, #0b0d1c);
  border:1px solid color-mix(in srgb, var(--c, #2a2d4a) 50%, transparent);
  color:#fff;font-weight:600;font-size:13px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:inset 3px 0 0 var(--c, #2a2d4a);
}
.qsv-grp small{color:var(--ink-mute);font-weight:500;font-size:11px}
.qsv-grp-add{
  align-items:center;justify-content:center;flex-direction:row;
  background:transparent;border:1px dashed var(--line-2);color:var(--ink-mute);box-shadow:none;
}
/* palettes */
.qsv-pal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.qsv-pal-grid span{
  height:30px;border-radius:7px;background:var(--c,#2a2d4a);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#0a0a14;text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.qsv-pal-grid .qsv-pal-pos{background:#1c1f33;color:var(--ink-dim);border:1px solid var(--line-2);text-shadow:none}
/* faders */
.qsv-action{display:flex;justify-content:flex-end;margin-bottom:8px}
.qsv-rec{color:#ff5e57;font-weight:700;font-size:11px;letter-spacing:.05em;animation:pulse 1s infinite}
.qsv-fader-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.qsv-fd{
  min-height:54px;border-radius:8px;padding:8px;
  display:flex;flex-direction:column;gap:1px;justify-content:center;
  position:relative;overflow:hidden;color:#0a0a14;font-weight:700;font-size:11px;
}
.qsv-fd::before{content:"";position:absolute;inset:0;background:var(--c);opacity:.82}
.qsv-fd>*{position:relative;z-index:1}
.qsv-fd span{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.85}
.qsv-fd small{font-size:9.5px;font-weight:500}
.qsv-fd-off{background:#0a0b14;color:var(--ink-mute)}
.qsv-fd-off::before{display:none}
/* show */
.qsv-show-live{display:flex;align-items:center;gap:8px;color:#7cff4a;font-size:11px;margin-bottom:12px}
.qsv-dot{width:8px;height:8px;border-radius:50%;background:#7cff4a;box-shadow:0 0 10px #7cff4a;animation:pulse 1.4s infinite}
.qsv-show-keys{color:var(--ink-dim);font-size:11.5px;line-height:1.9}
.qsv-show-keys kbd{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:4px;padding:1px 5px;color:#cbd0ff;
}

.qs-cta{text-align:center;margin-top:34px}
.qs-cta p{font-size:20px;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
.qs-cta p b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

@media (max-width:860px){
  .qs-step{grid-template-columns:48px 1fr;grid-template-rows:auto auto;gap:14px 18px;align-items:start}
  .qs-num{width:48px;height:48px;font-size:21px}
  .qs-visual{grid-column:1 / -1}
}
@media (max-width:480px){
  .qs-step{padding:20px}
  .qsv-pal-grid{grid-template-columns:repeat(3,1fr)}
}

/* ----- highlights (home) ----- */
.highlights{padding:60px 0}
.hl-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;
}
.hl-card{
  padding:30px 28px 26px;border-radius:18px;
  background:linear-gradient(180deg,rgba(20,22,40,.7),rgba(10,11,24,.5));
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  position:relative;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:18px;row-gap:0;
  transition:transform .2s, border-color .2s, background .2s;
}
.hl-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.4);background:linear-gradient(180deg,rgba(28,22,48,.75),rgba(12,8,24,.55))}
.hl-num{
  grid-row:1 / span 3;grid-column:1;
  width:46px;height:46px;border-radius:14px;
  background:var(--grad);color:#0a0a14;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;
  letter-spacing:-.02em;
  box-shadow:0 12px 30px -8px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.25);
  position:static;
  align-self:start;
  margin-top:2px;
}
.hl-card h3{
  grid-column:2;grid-row:1;
  font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0 0 10px;
  line-height:1.25;
}
.hl-card p{
  grid-column:2;grid-row:2;
  color:var(--ink-dim);font-size:15px;margin:0 0 14px;line-height:1.55;
}
.hl-card p b{color:var(--ink)}
.hl-card p a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3)}
.hl-card p a:hover{border-bottom-color:var(--cyan)}
.hl-more{
  grid-column:2;grid-row:3;
  display:inline-flex;align-items:center;gap:4px;
  color:var(--cyan);text-decoration:none;font-size:13.5px;font-weight:600;
  border-bottom:1px solid rgba(96,165,250,.3);padding-bottom:1px;
  align-self:end;justify-self:start;
}
.hl-more:hover{border-bottom-color:var(--cyan)}
@media (max-width:780px){.hl-grid{grid-template-columns:1fr}}
@media (max-width:480px){
  .hl-card{padding:24px 20px 22px;column-gap:14px}
  .hl-num{width:40px;height:40px;font-size:14px;border-radius:12px}
  .hl-card h3{font-size:17px}
  .hl-card p{font-size:14.5px}
}

/* ----- badges paid/free ----- */
.badge-free, .badge-paid, .badge-soon{
  display:inline-block;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:99px;
  letter-spacing:.05em;text-transform:uppercase;
  margin-left:6px;vertical-align:middle;
}
.badge-free{background:rgba(124,255,74,.15);color:#bcffaf;border:1px solid rgba(124,255,74,.4)}
.badge-paid{background:rgba(255,176,46,.15);color:#ffd28a;border:1px solid rgba(255,176,46,.4)}
.badge-soon{background:rgba(140,160,255,.14);color:#b9c6ff;border:1px solid rgba(140,160,255,.4)}

/* ----- pricing plans ----- */
.plans{padding:30px 0 60px}
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:860px;margin:0 auto}
.plan-midi{border-color:rgba(96,165,250,.4);box-shadow:0 0 30px rgba(96,165,250,.08)}
.plan{
  padding:34px 30px;border-radius:20px;
  background:linear-gradient(180deg,rgba(20,22,40,.75),rgba(10,11,24,.6));
  border:1px solid var(--line-2);
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  position:relative;
}
.plan-pro{
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(139,92,246,.15), transparent 60%),
    linear-gradient(180deg,rgba(28,22,48,.75),rgba(12,8,24,.7));
  border-color:rgba(139,92,246,.4);
  box-shadow:0 30px 80px -30px rgba(139,92,246,.4);
}
.plan-h h2{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0}
.plan-tag{color:var(--ink-mute);font-size:14px;margin:4px 0 22px}
.plan-badge{
  position:absolute;top:-12px;right:24px;
  padding:5px 14px;border-radius:99px;background:var(--grad);color:#0a0a14;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 24px -8px rgba(139,92,246,.55);
}
.plan-price{display:flex;align-items:baseline;gap:8px;padding-bottom:22px;border-bottom:1px dashed var(--line-2);margin-bottom:22px}
.plan-price b{font-size:40px;font-weight:700;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.plan-price b small{font-size:.4em;font-weight:600;color:var(--ink-dim);-webkit-text-fill-color:initial;background:none;letter-spacing:0}
.plan-price span{color:var(--ink-mute);font-size:14px}
.plan-list{list-style:none;padding:0;margin:0 0 26px;flex:1}
.plan-list li{
  padding:9px 0 9px 26px;position:relative;font-size:14.5px;color:var(--ink-dim);
  border-top:1px dashed rgba(255,255,255,.04);
}
.plan-list li:first-child{border-top:none}
.plan-list li::before{
  content:"✓";position:absolute;left:0;top:8px;width:18px;height:18px;
  border-radius:50%;background:rgba(124,255,74,.15);color:#bcffaf;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
.plan-list li.plan-new::before{background:rgba(139,92,246,.18);color:#ddd6fe}
.plan-list li b{color:var(--ink)}
.plan-cta{justify-content:center;width:100%}
.plan-note{font-size:13px;color:var(--ink-mute);margin:14px 0 0;text-align:center}
.plan-note b{color:var(--ink-dim)}
.plans-note{margin-top:30px;text-align:center;color:var(--ink-dim);font-size:15px;max-width:62ch;margin-left:auto;margin-right:auto}
.plans-note b{color:var(--ink)}
@media (max-width:980px){.plans-grid{grid-template-columns:1fr;max-width:560px}}

/* ----- comparison table ----- */
.compare{padding:60px 0}
.cmp-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:rgba(10,11,24,.5)}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cmp th,.cmp td{padding:12px 16px;text-align:left;border-top:1px solid var(--line)}
.cmp thead th{background:rgba(255,255,255,.03);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);font-weight:600;border-top:none}
.cmp th small{display:block;font-size:11px;font-weight:500;color:var(--ink-mute);letter-spacing:0;text-transform:none}
.cmp th.th-free{color:#bcffaf}
.cmp th.th-paid{color:#ffd28a}
.cmp td:first-child{color:var(--ink-dim)}
.cmp td:nth-child(2),.cmp td:nth-child(3),.cmp td:nth-child(4){text-align:center;font-weight:600;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:13.5px;width:22%}
.cmp .th-midi{color:#bfdbfe}
.cmp tr.grp td{
  background:rgba(96,165,250,.06);color:var(--cyan);
  font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-top:1px solid var(--line-2);
}
.cmp tr.cmp-new td{background:rgba(139,92,246,.04)}
.cmp tr.cmp-price td{background:rgba(255,255,255,.03);padding:18px 16px;border-top:1px solid var(--line-2)}
.cmp tr.cmp-price td b{font-size:18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cmp tr.cmp-price td small{color:var(--ink-mute);font-size:11px;font-family:'Space Grotesk',sans-serif}

/* ----- faq ----- */
.faq{padding:60px 0}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:980px;margin:0 auto}
.faq details{
  padding:18px 22px;border-radius:14px;
  background:rgba(20,22,40,.5);border:1px solid var(--line-2);
  cursor:pointer;transition:border-color .2s;
}
.faq details:hover{border-color:#373c5e}
.faq details[open]{background:rgba(20,22,40,.75)}
.faq summary{font-weight:600;font-size:15px;list-style:none;color:var(--ink);outline:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:18px;color:var(--cyan);font-weight:700;font-size:18px;line-height:1;vertical-align:-1px}
.faq details[open] summary::before{content:"−"}
.faq p{color:var(--ink-dim);font-size:14.5px;margin:12px 0 0;padding-left:18px}
.faq p b{color:var(--ink)}
@media (max-width:780px){.faq-grid{grid-template-columns:1fr}}

/* ----- requirements page ----- */
.req{padding:30px 0 60px}
.req-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:50px}
.req-card{
  padding:26px;border-radius:16px;
  background:linear-gradient(180deg,rgba(20,22,40,.7),rgba(10,11,24,.55));
  border:1px solid var(--line-2);
}
.req-card.req-min{border-color:rgba(124,255,74,.3)}
.req-card.req-rec{border-color:rgba(96,165,250,.3)}
.req-card.req-vis{border-color:rgba(255,176,46,.3)}
.req-card h2{font-size:18px;font-weight:600;margin:0 0 14px;letter-spacing:-.01em;line-height:1.3}
.req-badge{
  display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;
  letter-spacing:.1em;text-transform:uppercase;margin-right:8px;
  background:rgba(255,255,255,.06);
}
.req-min .req-badge{background:rgba(124,255,74,.15);color:#bcffaf}
.req-rec .req-badge{background:rgba(96,165,250,.15);color:#bfdbfe}
.req-vis .req-badge{background:rgba(255,176,46,.15);color:#ffd28a}
.req-card ul{margin:0;padding:0;list-style:none}
.req-card li{
  padding:8px 0 8px 18px;position:relative;font-size:14px;color:var(--ink-dim);
  border-top:1px dashed rgba(255,255,255,.04);
}
.req-card li:first-child{border-top:none}
.req-card li::before{content:"·";position:absolute;left:6px;top:8px;color:var(--cyan);font-weight:700}
.req-card li b{color:var(--ink)}
.req-note{color:var(--ink-mute);font-size:13.5px;margin:0 0 14px;font-style:italic}
@media (max-width:900px){.req-grid{grid-template-columns:1fr}}

/* ── Kontakt (2026-07-21) — dva sloupce: s cim psat + identifikacni udaje ── */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:50px}
.contact-card{
  padding:26px;border-radius:16px;
  background:linear-gradient(180deg,rgba(20,22,40,.7),rgba(10,11,24,.55));
  border:1px solid var(--line-2);
}
.contact-card h2{font-size:18px;font-weight:600;margin:0 0 14px;letter-spacing:-.01em;line-height:1.3}
.contact-card ul{margin:0 0 14px;padding:0;list-style:none}
.contact-card li{
  padding:8px 0 8px 18px;position:relative;font-size:14px;color:var(--ink-dim);
  border-top:1px dashed rgba(255,255,255,.04);
}
.contact-card li:first-child{border-top:none}
.contact-card li::before{content:"·";position:absolute;left:6px;top:8px;color:var(--cyan);font-weight:700}
.contact-card li b{color:var(--ink)}
.contact-card .small{color:var(--ink-mute);font-size:13.5px;margin:0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

.req-extra h2{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:-.015em}
.req-extra > p{color:var(--ink-dim);margin:0 0 24px;max-width:62ch}
.req-hw{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.req-hwc{
  padding:22px;border-radius:14px;
  background:rgba(20,22,40,.5);border:1px solid var(--line);
}
.req-hwc h3{font-size:14px;font-weight:600;color:var(--cyan);margin:0 0 8px;letter-spacing:-.01em}
.req-hwc p{margin:0;color:var(--ink-dim);font-size:14px}
.req-hwc p + p{margin-top:8px}
.req-hwc p.small{color:var(--ink-mute);font-size:12.5px}
.req-hwc b{color:var(--ink)}
@media (max-width:900px){.req-hw{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.req-hw{grid-template-columns:1fr}}

/* ----- legal pages ----- */
.legal{padding:30px 0 80px}
.legal-wrap{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.legal-toc{
  position:sticky;top:90px;
  display:flex;flex-direction:column;gap:2px;
  padding:18px;border-radius:14px;
  background:rgba(20,22,40,.5);border:1px solid var(--line);
}
.legal-toc a{
  padding:7px 10px;border-radius:8px;
  color:var(--ink-dim);font-size:13.5px;text-decoration:none;
  transition:color .15s,background .15s;
}
.legal-toc a:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.legal-body{
  padding:36px 36px;border-radius:16px;
  background:rgba(13,18,28,.65);border:1px solid var(--line);
  max-width:80ch;
}
.legal-body h2{
  font-size:22px;font-weight:600;letter-spacing:-.015em;
  margin:32px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:80px;
}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p,.legal-body li{font-size:15px;color:var(--ink-dim);line-height:1.65}
.legal-body p b,.legal-body li b{color:var(--ink)}
.legal-body ul{padding-left:24px;margin:12px 0 16px}
.legal-body li{margin:6px 0}
.legal-body a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3)}
.legal-body a:hover{border-bottom-color:var(--cyan)}
.legal-date{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-mute);font-size:13.5px}
@media (max-width:900px){
  .legal-wrap{grid-template-columns:1fr}
  .legal-toc{position:static}
  .legal-body{padding:24px 22px}
}

/* ----- cookie banner ----- */
.cookie-bar{
  position:fixed;bottom:16px;left:16px;right:16px;
  z-index:200;
  padding:0;border-radius:14px;
  background:rgba(13,15,28,.96);
  border:1px solid rgba(255,176,46,.4);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 30px rgba(255,176,46,.15);
  backdrop-filter:blur(20px);
  animation:cookie-in .35s ease;
  max-width:760px;margin:0 auto;
}
.cookie-inner{
  display:flex;align-items:center;gap:18px;
  padding:18px 22px;flex-wrap:wrap;
}
.cookie-text{flex:1;min-width:220px;color:var(--ink-dim);font-size:14px;line-height:1.5}
.cookie-text b{color:var(--ink)}
.cookie-text a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3);margin-left:4px}
.cookie-text a:hover{border-bottom-color:var(--cyan)}
.cookie-actions{display:flex;gap:8px}
.cookie-ok{padding:10px 22px;font-size:14px;border:none;cursor:pointer;font-family:inherit}
@keyframes cookie-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.cookie-hide{opacity:0;transform:translateY(20px);transition:opacity .3s, transform .3s}
@media (max-width:600px){
  .cookie-inner{padding:14px 16px;gap:12px}
  .cookie-text{font-size:13px}
}

/* ----- 2-col grid variant (hardware bundle, ArtNet setup) ----- */
.grid.grid-2{grid-template-columns:repeat(2,1fr)}

/* ----- hardware bundle section (cenik) ----- */
.hardware{padding:20px 0 60px}
.hw-card{display:flex;flex-direction:column}
.hw-list{list-style:none;padding:0;margin:14px 0 4px}
.hw-list li{position:relative;padding:5px 0 5px 22px;font-size:14px;color:var(--ink-dim);border-top:1px solid var(--line)}
.hw-list li:first-child{border-top:none}
.hw-list li::before{content:"✓";position:absolute;left:0;top:5px;color:#7cff4a;font-weight:700;font-size:12px}
.hw-list li a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3)}
.hw-list li a:hover{border-bottom-color:var(--cyan)}
.hw-price{font-size:14px;color:var(--ink-dim);margin:16px 0 16px;padding-top:14px;border-top:1px dashed var(--line-2)}
.hw-price b{color:var(--ink)}
.hw-card .plan-cta{margin-top:auto}

/* ----- návod teaser (homepage) ----- */
.quickstart-teaser{padding:80px 0}
.qt-steps{list-style:none;margin:0 auto 8px;padding:0;max-width:920px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:none}
.qt-steps li{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 14px;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.qt-steps li small{font-weight:400;color:var(--ink-mute);font-size:12.5px}
.qt-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;color:#0a0a14;background:var(--grad);font-size:15px}
@media (max-width:860px){.qt-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.qt-steps{grid-template-columns:1fr}}

/* ----- ArtNet setup guide (funkce) ----- */
.setup-guide{margin:26px 0 8px}
.setup-h{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.setup-lead{color:var(--ink-dim);font-size:14.5px;line-height:1.55;margin:0 0 20px;max-width:80ch}
.setup-lead b{color:var(--ink)}
.setup-steps{margin:12px 0 0;padding:0 0 0 20px;counter-reset:st}
.setup-steps li{color:var(--ink-dim);font-size:14px;line-height:1.55;margin:0 0 9px;padding-left:4px}
.setup-steps li b{color:var(--ink)}
.setup-steps code,.setup-lead code{background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;font-size:.9em;color:var(--cyan)}
.setup-tip{margin:14px 0 0;font-size:13.5px;color:var(--ink-mute);font-style:italic;padding-top:12px;border-top:1px dashed var(--line-2)}
.setup-note{margin:20px 0 0;font-size:14px;color:var(--ink-dim);line-height:1.55;max-width:82ch}
.setup-note b{color:var(--ink)}

/* ----- scrollbar (subtle) ----- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0b14}
::-webkit-scrollbar-thumb{background:#1e2236;border-radius:99px;border:2px solid #0a0b14}
::-webkit-scrollbar-thumb:hover{background:#2a2f4d}

/* ----- screenshots (2026-07-03) ----- */
.screens{padding:56px 0}
.screens-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
.screen-card{margin:0;background:rgba(10,11,24,.55);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s ease,border-color .25s ease}
.screen-card:hover{transform:translateY(-3px);border-color:rgba(140,160,255,.45)}
.screen-card img{display:block;width:100%;height:auto}
.screen-card figcaption{padding:12px 16px;font-size:13.5px;line-height:1.5;color:var(--muted,#9aa3b5)}
.screens-note{margin-top:24px;font-size:14px;color:var(--muted,#9aa3b5);text-align:center}
@media (max-width:760px){
  .screens-grid{grid-template-columns:1fr;gap:16px}
  .screen-card figcaption{font-size:13px}
}

/* ----- language switcher (2026-07-03) ----- */
.nav-langs{display:inline-flex;gap:3px;margin-left:8px;padding:3px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.nav-langs a{font-size:12px !important;font-weight:700 !important;padding:5px 9px;border-radius:8px;color:var(--ink-dim) !important;border:1px solid transparent;white-space:nowrap}
.nav-langs a:hover{color:var(--ink) !important;background:rgba(255,255,255,.05)}
.nav-langs a.lang-on{color:var(--ink) !important;border-color:var(--line-2);background:rgba(255,255,255,.06)}
@media (max-width:880px){.nav-langs{padding:10px 28px}}
.screens-parts{margin-top:22px}
.screens-parts .screen-card img{background:#0b0d11}

/* ----- feature lists (2026-07-04) ----- */
.feature-lists .card ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.feature-lists .card li{font-size:14px;line-height:1.45;color:var(--ink-dim)}
.feature-lists .card li::marker{color:var(--cyan)}

/* ----- language suggestion bar (2026-07-04) ----- */
.langbar{position:sticky;top:64px;z-index:49;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 16px;background:linear-gradient(90deg,rgba(96,165,250,.14),rgba(122,74,255,.14));border-bottom:1px solid var(--line-2);font-size:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.langbar-go{color:var(--ink) !important;font-weight:700;text-decoration:none;border:1px solid var(--line-2);padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.06);white-space:nowrap}
.langbar-go:hover{background:rgba(255,255,255,.12)}
.langbar-x{background:none;border:none;color:var(--ink-mute);font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
@media (max-width:600px){.langbar{flex-wrap:wrap;gap:8px;font-size:13px}}

/* ----- identifikační údaje provozovatele (podmínky, ochrana údajů) ----- */
.ident-box{margin:14px 0 18px;padding:18px 20px;border-radius:12px;
  background:rgba(20,22,40,.55);border:1px solid var(--line-2)}
.ident-box dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.ident-box dt{color:var(--ink-dim);font-size:13px;margin:0}
.ident-box dd{margin:0;color:var(--ink);font-weight:600;font-size:14.5px}
.ident-box .ident-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-dim);line-height:1.55}
@media (max-width:560px){.ident-box dl{grid-template-columns:1fr;gap:2px}
  .ident-box dt{margin-top:10px}}

/* ----- návod: dokumentace ve struktuře právních stránek (2026-07-20) -----
   Používá .legal-wrap / .legal-toc / .legal-body ze stránky Podmínky; tady jen
   doplňky pro číslování kapitol, dvouúrovňový rejstřík, hledání a prev/next. */
/* Rejstřík je sticky (top:90px), ale u návodu má 20 kapitol i s podkapitolami — seznam je vyšší
   než okno a spodek se nedal nijak zobrazit: sticky prvek jede se stránkou, takže scrollování
   dolů ho jen posouvá s sebou a konec zůstane pod okrajem. Omezíme výšku na viewport a rolujeme
   UVNITŘ. overscroll-behavior brání tomu, aby dojetí na konec seznamu strhlo celou stránku.
   Na právních stránkách (Podmínky, Ochrana údajů) je seznam krátký → max-height se neuplatní. */
#docToc{
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
#docToc::-webkit-scrollbar{width:8px}
#docToc::-webkit-scrollbar-track{background:transparent}
#docToc::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
#docToc::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}
/* Hledací pole zůstane vidět i po odrolování seznamu. */
#docToc .toc-search{
  position:sticky;top:0;z-index:1;
  margin:-18px -18px 10px;padding:18px 18px 10px;
  background:rgba(20,22,40,.96);
  border-radius:14px 14px 0 0;
}
/* Na mobilu je rejstřík statický (viz media 900px) — tam výšku nesvazovat, jinak by vznikl
   druhý scroller uvnitř stránky. */
@media (max-width:900px){
  #docToc{max-height:none;overflow:visible}
  #docToc .toc-search{position:static;margin:0 0 10px;padding:0;background:none}
}
.legal-toc .toc-ch{padding:8px 10px;color:var(--ink);font-weight:600;font-size:13.5px}
.legal-toc .toc-sub{padding:5px 10px 5px 22px;font-size:12.5px}
.legal-toc .toc-search{margin-bottom:10px}
.legal-toc .toc-search input{
  width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line-2);
  color:var(--ink);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}
.legal-toc .toc-search input:focus{outline:none;border-color:var(--cyan)}
.legal-toc .is-hidden{display:none}
.legal-toc .toc-empty{padding:8px 10px;font-size:12.5px;color:var(--ink-mute);font-style:italic}
.doc-chapter{scroll-margin-top:80px}
.doc-chapter + .doc-chapter{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.doc-chapter h2 .num,.doc-chapter h3 .num{
  color:var(--cyan);font-variant-numeric:tabular-nums;margin-right:10px;font-weight:700}
.doc-chapter > .lede{font-size:15.5px;color:var(--ink-dim);margin:0 0 20px}
.doc-sub{margin:26px 0 0;scroll-margin-top:80px}
.doc-sub h3{font-size:17px;font-weight:600;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em}
.doc-sub h3 .anchor{margin-left:8px;color:var(--ink-mute);font-weight:400;opacity:0;
  text-decoration:none;border:0;font-size:14px;transition:opacity .15s}
.doc-sub h3:hover .anchor{opacity:1}
.doc-sub .setup-steps{margin:12px 0 4px}
.doc-sub .setup-tip{margin:12px 0 0}
.legal-body .xref{white-space:nowrap}
.doc-pn{display:flex;justify-content:space-between;gap:14px;margin-top:34px;
  padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.doc-pn a{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600;
  color:var(--ink);border:0;max-width:48%}
.doc-pn a span{font-size:12px;color:var(--ink-mute);font-weight:400}
.doc-pn .next{text-align:right;margin-left:auto}
@media (max-width:640px){.doc-pn a{max-width:100%}}

/* ----- opravy z kontroly stylování 2026-07-20 ----- */
/* Podnadpisy v právních stránkách a v návodu (dřív bez definice → výchozí styl prohlížeče). */
.legal-body h3{font-size:17px;font-weight:600;color:var(--ink);margin:22px 0 8px;
  letter-spacing:-.01em;scroll-margin-top:80px}
/* Čtvrtá úroveň — členění delších podkapitol návodu. Bez definice by spadla na výchozí styl
   prohlížeče (stejná vada, jaká se výš řešila u h3). */
.legal-body h4{font-size:14.5px;font-weight:600;color:var(--ink);margin:20px 0 6px;
  letter-spacing:-.005em;scroll-margin-top:80px}
.doc-sub h4:first-of-type{margin-top:18px}
/* .legal-date byla přebitá pravidlem `.legal-body p` (vyšší specificita) — nikdy se neuplatnila. */
.legal-body .legal-date{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--ink-mute);font-size:13.5px}
.legal-body .setup-note{font-size:13.5px;color:var(--ink-mute)}
/* Poznámka pod nadpisem kategorie (dřív inline style na několika stránkách). */
.cat-h + .setup-note{max-width:70ch;margin-bottom:8px}
.toc + .setup-note{margin-top:22px}
/* Samostatná stránka /udaje nemá .ident-box obal — ať vypadá stejně. */
.ident-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-dim);line-height:1.55}
.doc-pn a.prev{text-align:left}
.legal-toc .lbl{min-width:0}
/* Hero dlaždice: 4 v řadě jsou mezi tabletem a malým desktopem moc úzké. */
@media (max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* Návod (2026-07-20): tabulky přehledů a odrážkové seznamy bez čísel.
   Tabulka se na úzkém displeji roluje uvnitř svého rámu, ne celou stránkou. */
.doc-table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px}
.doc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.doc-table th,.doc-table td{padding:9px 13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.doc-table thead th{background:rgba(255,255,255,.04);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table code{white-space:nowrap}
.legal-body ul.plain{list-style:none;padding-left:0}
.legal-body ul.plain li{padding-left:18px;position:relative;margin:7px 0}
.legal-body ul.plain li::before{content:"·";position:absolute;left:5px;color:var(--acc);font-weight:700}

/* ----- ODKAZY: ZÁKLADNÍ BARVA (2026-07-21) -----
   Do teď se barva odkazu nastavovala ZVLÁŠŤ pro každý kontejner (.page-head .lede a,
   .qs-body p a, .hl-card p a, .legal-body a, .cookie-text a, .hw-list li a…). Co na ten
   výčet nespadlo, nechal prohlížeč na svém výchozím stylu — a NAVŠTÍVENÝ odkaz vyšel
   FIALOVĚ. Takhle vypadlo 8 odkazů: přepínače jazyků a odkazy na Funkce/ceník na titulní
   straně, odkaz na návod ve Funkcích, e-mail na Kontaktu a odkaz na Ochranu údajů ve
   formuláři stahování.

   Základní pravidlo má schválně NEJNIŽŠÍ specificitu (jediný prvkový selektor), takže ho
   cokoli s třídou přebije — navigace, karty, doc-pn i patičky si drží svoje barvy beze změny.
   Autorské pravidlo navíc v kaskádě vyhrává nad stylem prohlížeče, takže padá i to fialové
   :visited; samostatné :visited tu ZÁMĚRNĚ není, protože by mělo vyšší specificitu než
   kontejnerová pravidla a přebilo by je. */
a{color:var(--cyan)}

/* Textové odkazy uvnitř odstavců a seznamů dostanou i decentní podtržení jako jinde na webu.
   :not([class]) míří jen na holé odkazy v textu — prvky s vlastní třídou si řeší vzhled samy. */
p > a:not([class]),
li > a:not([class]),
dd > a:not([class]){text-decoration:none;border-bottom:1px solid rgba(96,165,250,.3)}
p > a:not([class]):hover,
li > a:not([class]):hover,
dd > a:not([class]):hover{border-bottom-color:var(--cyan)}

/* Slovník pojmů — odkaz na to, jak se stejné věci jmenují na jiných pultech
   (ChamSys / grandMA / Avolites). Vizuálně odlišené, ať je jasné, že to není
   součást definice, ale pomůcka pro toho, kdo přichází od jiné značky. */
.doc-gloss .gloss-alt{display:block;margin-top:6px;font-size:13px;color:var(--ink-mute);
  padding-left:10px;border-left:2px solid var(--line-2)}
.doc-gloss .gloss-alt b{font-weight:600;color:var(--ink)}

/* ----- opravy z revize webu 2026-10-15 ----- */
/* Mobil: sloupec mřížky Podmínek / Ochrany údajů / návodu nesmí růst podle nejširšího obsahu
   (tabulka, dlouhý <code>) — „1fr" má minimum min-content, proto minmax(0,1fr) + min-width:0. */
.legal-wrap{grid-template-columns:240px minmax(0,1fr)}
.legal-body{min-width:0;overflow-wrap:break-word}
.legal-body pre{max-width:100%;overflow-x:auto}
.doc-table-wrap{max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (max-width:900px){.legal-wrap{grid-template-columns:minmax(0,1fr)}}
/* Dvousloupcová mřížka (.grid.grid-2) přebíjela mobilní pravidlo .grid vyšší specificitou. */
@media (max-width:600px){.grid.grid-2{grid-template-columns:1fr}}
/* Srovnávací tabulka v ceníku: na ~570 px se 560px tabulka o kousek nevešla a třetí sloupec
   byl useknutý bez náznaku, že jde rolovat. Pod 640 px se zúží a vejde se; teprve na úplně
   úzkém displeji se roluje ve vlastním rámu (.cmp-wrap), nikdy celou stránkou. */
.cmp-wrap{max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (max-width:640px){
  .cmp{min-width:0;font-size:13.5px}
  .cmp th,.cmp td{padding:10px 10px}
  .cmp td:nth-child(2),.cmp td:nth-child(3){font-size:12.5px;width:24%}
}
@media (max-width:400px){.cmp{min-width:360px}}
/* Čitelnost nad animovanými goby: pevnější tmavý podklad pod dlouhými texty. */
.legal-body{background:rgba(10,12,22,.88)}
.legal-toc{background:rgba(16,18,34,.85)}
.cmp-wrap{background:rgba(10,11,24,.88)}
.faq details{background:rgba(16,18,34,.85)}
.faq details[open]{background:rgba(18,20,38,.92)}
/* Dlouhá německá slova v nadpisech (Datenschutzerklärung) přetékala na mobilu. */
.page-head h1{overflow-wrap:break-word;hyphens:auto}

/* ===== 2026-10-20: titulní stránka — světelná scéna v hero, pás předností, nájezd sekcí ===== */
.hero{overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:2}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  opacity:0;transition:opacity 1.2s ease}
.hero-stage.is-ready{opacity:1}
.hero-stage canvas{display:block;width:100%;height:100%}
/* Čitelnost: text vlevo leží na ztmavené části, paprsky hrají hlavně vpravo. */
.hero-stage::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,6,12,.86) 0%,rgba(6,6,12,.62) 34%,rgba(6,6,12,.18) 62%,rgba(6,6,12,0) 80%)}
@media (max-width:760px){
  .hero-stage::after{background:linear-gradient(180deg,rgba(6,6,12,.35) 0%,rgba(6,6,12,.72) 38%,rgba(6,6,12,.82) 100%)}
}
.hero-eyebrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-note{color:var(--ink-mute);font-size:13.5px;margin:-30px 0 0}
.hero-note b{color:var(--ink-dim);font-weight:600}
.hero-stage-toggle{position:absolute;right:28px;bottom:22px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;
  background:rgba(10,11,22,.7);border:1px solid var(--line-2);color:var(--ink-dim);
  font:500 12.5px/1 'Space Grotesk',system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.hero-stage-toggle:hover{color:var(--ink);border-color:#3a3f66}
.hero-stage-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.hero-stage-toggle svg{width:12px;height:12px}
.hero-stage-toggle .i-play{display:none}
.hero-stage-toggle.is-paused .i-play{display:inline}
.hero-stage-toggle.is-paused .i-pause{display:none}
.hero-stage-toggle.is-paused{color:var(--ink);border-color:rgba(139,92,246,.55);box-shadow:0 0 22px rgba(139,92,246,.25)}
@media (max-width:760px){.hero-stage-toggle{right:16px;bottom:14px}}

/* Pás předností: velká čísla */
.strengths{padding:30px 0 70px;position:relative}
.sb-numbers{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,24,46,.82),rgba(12,13,26,.82));backdrop-filter:blur(8px)}
.sb-numbers li{padding:28px 26px 26px;border-right:1px solid var(--line-2);position:relative}
.sb-numbers li:last-child{border-right:none}
.sb-numbers li::before{content:'';position:absolute;left:26px;right:26px;top:0;height:2px;background:var(--grad);opacity:.55}
.sb-num{display:block;font-size:clamp(40px,4.6vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums}
.sb-num small{font-size:.42em;letter-spacing:-.01em;margin-left:4px}
.sb-lbl{display:block;margin-top:10px;font-weight:600;font-size:15px;color:var(--ink)}
.sb-sub{display:block;margin-top:4px;color:var(--ink-mute);font-size:13px;line-height:1.45}
@media (max-width:900px){
  .sb-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-numbers li:nth-child(2){border-right:none}
  .sb-numbers li:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
}
@media (max-width:420px){.sb-numbers li{padding:22px 16px 20px}.sb-numbers li::before{left:16px;right:16px}}

/* Karty předností s liniovými ikonami */
.sb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sb-card{position:relative;padding:26px 24px 24px;border-radius:16px;background:var(--card);border:1px solid var(--line);
  backdrop-filter:blur(6px);transition:border-color .25s,background .25s,transform .25s}
.sb-card:hover{border-color:rgba(139,92,246,.45);background:var(--card-strong);transform:translateY(-3px)}
.sb-card h3{margin:16px 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.sb-card p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.sb-card p b{color:var(--ink);font-weight:600}
.sb-card .sb-more{display:inline-block;margin-top:12px;color:var(--cyan);font-size:13.5px;font-weight:500;text-decoration:none}
.sb-card .sb-more:hover{text-decoration:underline}
.sb-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(139,92,246,.22),rgba(96,165,250,.14));
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.35),0 0 28px rgba(139,92,246,.18);color:#d9ccff}
.sb-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-tag{position:absolute;top:22px;right:20px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#cfe0ff;padding:3px 8px;border-radius:99px;border:1px solid rgba(96,165,250,.4);background:rgba(96,165,250,.1)}
@media (max-width:980px){.sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sb-grid{grid-template-columns:1fr}}

/* Ikony případů použití (místo emoji) */
.uc-icon svg{width:34px;height:34px;fill:none;stroke:#cdbcff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Funkce: přehled klíčových novinek nahoře */
.cat-lede{color:var(--ink-dim);max-width:70ch;margin:-6px 0 22px;font-size:15px}

/* Nájezd sekcí při scrollu (app.js přidá .rv / .rv-in); bez JS je vše vidět. */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{transform:none;transition:opacity .4s linear}}

/* karty se štítkem „Nové“ */
.card{position:relative}
.card .sb-tag{top:18px;right:16px}

/* ===== 2026-10-20: hlavní přednosti — velké sekce text + schéma ===== */
.fs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.fs:first-of-type{border-top:none}
.fs.fs-rev .fs-text{order:2}
.fs-kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.fs h2,.fs h3.fs-h{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 14px}
.fs-lede{color:var(--ink-dim);font-size:17px;line-height:1.6;margin:0 0 20px;max-width:56ch}
.fs-lede b{color:var(--ink);font-weight:600}
.fs-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.fs-list li{position:relative;padding-left:26px;color:var(--ink-dim);font-size:15px;line-height:1.5}
.fs-list li b{color:var(--ink);font-weight:600}
.fs-list li::before{content:'';position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:3px;background:var(--grad);box-shadow:0 0 12px rgba(139,92,246,.5)}
.fs-more{color:var(--cyan);font-weight:600;text-decoration:none;font-size:15px}
.fs-more:hover{text-decoration:underline}
.fs-fig{margin:0;position:relative}
.fs-fig::before{content:'';position:absolute;inset:8% 6%;background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent);filter:blur(30px);z-index:-1}
.fs-fig svg{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(139,92,246,.12)}
.fs-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.fs-tags span{font-size:12.5px;font-weight:500;padding:5px 10px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--ink-dim)}
@media (max-width:900px){
  .fs{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 0}
  .fs.fs-rev .fs-text{order:0}
}
/* Funkce: podrobné bloky uvnitř hlavních sekcí */
.fs-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:6px 0 10px}
.fs-detail h3,.fs-detail h4{margin:0 0 6px;font-size:15.5px;font-weight:600;color:var(--ink)}
.fs-detail p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.fs-detail code{font-size:.86em}
@media (max-width:700px){.fs-detail{grid-template-columns:minmax(0,1fr)}}
.fs-wide{grid-column:1/-1}
/* Další přednosti — kompaktní řada */
.sb-mini{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:20px}
.sb-mini article{padding:18px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(6px)}
.sb-mini .sb-ico{width:38px;height:38px;border-radius:10px}
.sb-mini .sb-ico svg{width:20px;height:20px}
.sb-mini h3{margin:12px 0 6px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.sb-mini p{margin:0;color:var(--ink-dim);font-size:13.5px;line-height:1.5}
.sb-mini-h{margin:40px 0 0;text-align:center;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
@media (max-width:1100px){.sb-mini{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.sb-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.sb-mini{grid-template-columns:minmax(0,1fr)}}
/* Tabulka podporovaného hardwaru */
.hw-table{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 8px}
.hw-table th,.hw-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.hw-table th{color:var(--ink);font-weight:600;white-space:nowrap;width:30%}
.hw-table td{color:var(--ink-dim)}
.hw-wrap{background:rgba(10,11,24,.88);border:1px solid var(--line-2);border-radius:14px;padding:6px 8px;overflow-x:auto}
@media (max-width:600px){.hw-table th{white-space:normal;width:38%}}
.fs-detail{order:3}
.strengths{padding-top:50px}
.fs-more-block{margin:30px auto 0;max-width:860px;padding:30px 32px;border-radius:18px;background:var(--card);border:1px solid var(--line-2);backdrop-filter:blur(6px)}
.fs-more-block h3{margin:0 0 10px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.fs-more-block p{margin:0;color:var(--ink-dim);font-size:16px;line-height:1.7}
.fs-more-block p b{color:var(--ink);font-weight:600}
.fs-more-block a{color:var(--cyan)}
@media (max-width:600px){.fs-more-block{padding:22px 18px}}

/* ===== 2026-10-20: blok Bezplatná verze / Licence Full ===== */
.editions{padding:20px 0 70px}
.ed-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:stretch}
.ed-wrap.ed-single{grid-template-columns:minmax(0,1fr);max-width:820px;margin:0 auto}
.ed{position:relative;padding:32px 30px 30px;border-radius:20px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(22,24,46,.88),rgba(12,13,26,.88));backdrop-filter:blur(8px);display:flex;flex-direction:column}
.ed-free{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 1px rgba(139,92,246,.15),0 30px 80px -40px rgba(139,92,246,.6)}
.ed-free::before{content:'';position:absolute;left:30px;right:30px;top:0;height:2px;background:var(--grad)}
.ed-badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:99px;color:#0a0a14;background:var(--grad)}
.ed-badge-full{background:rgba(96,165,250,.14);color:#cfe0ff;border:1px solid rgba(96,165,250,.45)}
.ed h3{margin:16px 0 8px;font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ed h4{margin:18px 0 8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.ed-lede{margin:0;color:var(--ink-dim);font-size:15.5px;line-height:1.6}
.ed-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.ed-list li{position:relative;padding-left:24px;color:var(--ink-dim);font-size:15px;line-height:1.5}
.ed-list li b{color:var(--ink)}
.ed-list li::before{content:'';position:absolute;left:2px;top:.35em;width:12px;height:7px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}
.ed-full .ed-list li::before{border-color:var(--cyan)}
.ed-limits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ed-limits li{padding:12px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line-2);color:var(--ink-dim);font-size:13px;line-height:1.35}
.ed-limits b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ed-note{margin:16px 0 22px;color:var(--ink-mute);font-size:13.5px;line-height:1.5}
.ed .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.ed-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ed-limits{grid-template-columns:repeat(2,minmax(0,1fr))}.ed{padding:26px 18px 22px}.ed-free::before{left:18px;right:18px}}
.fs-fig img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(139,92,246,.12);background:#000}
.fs-fig figcaption,.shot-fig figcaption{margin-top:10px;color:var(--ink-mute);font-size:12.5px;text-align:center}
.shot-fig{margin:0 0 40px}
.shot-fig img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
.fs-fig-pair{display:grid;gap:14px}

/* 2026-10-20 (SEO): věta s vnitřními odkazy pod obsahem a skrytý nadpis pro čtečky/vyhledávače */
.page-links{max-width:760px;margin:28px auto 0;text-align:center;color:var(--ink-dim);font-size:15px;line-height:1.6}
.faq .page-links{padding-left:0;margin-top:28px;font-size:15px}
.dl-more{padding-top:0;padding-bottom:0}
.dl-more .page-links{margin:8px auto 28px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}