/* === Tomic Lightings · web === */
:root{
  --bg:#06060c;
  --bg-2:#0b0b18;
  --ink:#eef0ff;
  --ink-dim:#9aa0c2;
  --ink-mute:#5b6082;
  --line:#1c1f33;
  --line-2:#252944;
  --card:rgba(20,22,40,.55);
  --card-strong:rgba(22,24,46,.75);
  --pink:#ff2e88;
  --amber:#ffb02e;
  --cyan:#2ed1ff;
  --violet:#7a4aff;
  --lime:#7cff4a;
  --grad:linear-gradient(95deg,#ff2e88 0%,#ffb02e 45%,#2ed1ff 100%);
  --glow-pink:0 0 40px rgba(255,46,136,.45);
  --glow-cyan:0 0 40px rgba(46,209,255,.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(255,46,136,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(46,209,255,.18), transparent 60%),
    var(--bg);
}
.beam{
  position:absolute;top:-20%;left:50%;
  width:380px;height:140vh;
  transform-origin:top center;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 80%);
  filter:blur(18px);
  opacity:.55;
  mix-blend-mode:screen;
  animation:swing 14s ease-in-out infinite;
}
.beam-1{background:linear-gradient(180deg,rgba(255,46,136,.45),rgba(255,46,136,0) 70%);animation-delay:-2s;left:18%}
.beam-2{background:linear-gradient(180deg,rgba(46,209,255,.45),rgba(46,209,255,0) 70%);animation-delay:-6s;left:42%;animation-duration:18s}
.beam-3{background:linear-gradient(180deg,rgba(255,176,46,.42),rgba(255,176,46,0) 70%);animation-delay:-9s;left:66%;animation-duration:16s}
.beam-4{background:linear-gradient(180deg,rgba(122,74,255,.45),rgba(122,74,255,0) 70%);animation-delay:-12s;left:84%;animation-duration:20s}
@keyframes swing{
  0%,100%{transform:translateX(-50%) rotate(-18deg)}
  50%{transform:translateX(-50%) rotate(18deg)}
}
.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(255,46,136,.4))}
.brand-name{font-size:18px}
.brand-dot{color:var(--amber);margin:0 2px}
.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(255,46,136,.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(46,209,255,.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(46,209,255,.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(255,46,136,.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(255,46,136,.55), 0 2px 0 rgba(255,255,255,.18) inset;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 50px -10px rgba(255,46,136,.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(46,209,255,.18), transparent 60%),
    radial-gradient(500px 200px at 100% 50%, rgba(255,46,136,.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(46,209,255,.25);
}
.bb-flags{font-size:48px;line-height:1;letter-spacing:-4px;filter:drop-shadow(0 4px 20px rgba(46,209,255,.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(255,46,136,.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(255,46,136,.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(255,46,136,.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(46,209,255,.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(255,46,136,.08),rgba(46,209,255,.04));
  border-color:rgba(255,46,136,.35);
  box-shadow:0 0 30px rgba(255,46,136,.08), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.card.highlight:hover{
  border-color:rgba(255,46,136,.55);
  background:linear-gradient(180deg,rgba(255,46,136,.12),rgba(46,209,255,.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(46,209,255,.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(255,46,136,.12);color:var(--pink);border-color:rgba(255,46,136,.5);box-shadow:0 0 16px rgba(255,46,136,.2)}

.c-stage{position:relative;min-height:180px}
.stage{
  position:relative;height:130px;
  border-radius:10px;
  background:radial-gradient(ellipse at center bottom, rgba(46,209,255,.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(255,46,136,.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(46,209,255,.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(46,209,255,.2)}
.ico-9{color:var(--pink);box-shadow:var(--glow-pink),inset 0 0 0 1px rgba(255,46,136,.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(255,46,136,.18), transparent 60%),
    radial-gradient(600px 300px at 100% 50%, rgba(46,209,255,.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(255,46,136,.08);border-color:rgba(255,46,136,.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(46,209,255,.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(46,209,255,.08);border-color:rgba(46,209,255,.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(255,46,136,.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(255,46,136,.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(46,209,255,.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(46,209,255,.4);color:var(--cyan);font-weight:500;font-size:11.5px;
  background:rgba(46,209,255,.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(255,46,136,.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(255,46,136,.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(46,209,255,.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(46,209,255,.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(46,209,255,.4);box-shadow:0 0 30px rgba(46,209,255,.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(255,46,136,.15), transparent 60%),
    linear-gradient(180deg,rgba(28,22,48,.75),rgba(12,8,24,.7));
  border-color:rgba(255,46,136,.4);
  box-shadow:0 30px 80px -30px rgba(255,46,136,.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(255,46,136,.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(255,46,136,.18);color:#ffb8d4}
.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:#a8e7ff}
.cmp tr.grp td{
  background:rgba(46,209,255,.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(255,46,136,.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(46,209,255,.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(46,209,255,.15);color:#a8e7ff}
.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(46,209,255,.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(46,209,255,.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(46,209,255,.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(46,209,255,.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(46,209,255,.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)}