/* =====================================================================
   lumiSENS landing page - styles
   evotron GmbH & Co. KG · colours and fonts follow the evotron CD manual (2018-10-19)

   How this file is organised (same order as the page, top to bottom):
     1  Fonts
     2  Design tokens (colours, radii, fonts)  -> change colours HERE only
     3  Base and utilities
     4  Motion: reveal on scroll, reduced motion, play buttons
     5  Shared components: buttons, eyebrow/kicker, chips, link cards, tick marks
     6  Section layout and chapter headings
     7  Header and navigation
     8  Page contents (rail on the left / crumb pill on narrow screens)
     9  Floating elements: back to top, talk to an engineer, sticky mobile button
    10  Intro + hero (top of the page)
    11  Challenges: blind spot, old way, cable length
    12  Technology: how lumiSENS works
    13  Performance: facts, constant light, multicolour, RGB conveyor, spectrum
    14  Applications: use cases, synchronisation, process improvement, configuration
    15  Business case
    16  Products (incl. 3D viewer)
    17  Academy
    18  FAQ
    19  Request form
    20  Footer
    21  Print

   Breakpoints used throughout: 1060px (tablet) and 640px (phone).
   Each section keeps its own @media rules directly below it.
   Maintenance guide: WARTUNG.md in the project folder.
   ===================================================================== */


/* ===== 1 Fonts (self-hosted, no Google request) ===== */
@font-face{font-family:"Ubuntu";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/ubuntu-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Ubuntu";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ubuntu-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Ubuntu";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ubuntu-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Ubuntu";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/ubuntu-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Ubuntu Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ubuntu-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Ubuntu Mono";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/ubuntu-mono-latin-700-normal.woff2") format("woff2")}


/* ===== 2 Design tokens ===== */
:root{
  --green:#a8cd25;        /* Pantone 376 - logo green */
  --green-dark:#5f952e;   /* text/links on light backgrounds (contrast) */
  --green-light:#ccdfa1;
  --ink:#1d1d1b;
  --graphite:#323232;     /* Pantone 426 */
  --night:#0d0e0c;        /* dark sections */
  --night-2:#151713;      /* cards on dark sections */
  --night-line:rgba(255,255,255,.09);
  --paper:#f1f1ef;        /* Pantone 420 */
  --stone:#dfddda;        /* Pantone 421 */
  --white:#ffffff;
  --text-on-dark:#e8eae4;
  --muted-on-dark:#9ea393;
  --muted-on-light:#5d6058;
  --warn:#e0a526;
  --bad:#e5533d;
  --radius:20px;
  --radius-s:12px;
  --max:1200px;           /* width of the content column */
  --font:"Ubuntu",system-ui,sans-serif;
  --mono:"Ubuntu Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}


/* ===== 3 Base and utilities ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;font-size:17px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}
.mono{font-family:var(--mono)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.note{font-size:13px;color:var(--muted-on-light);margin-top:12px}
.note a{color:var(--green-dark)}
/* registered trademark sign: small and raised (the Ubuntu font draws ® at full size on the baseline) */
sup.reg{font-size:.55em;line-height:0;vertical-align:super;margin-left:.03em;font-weight:400;letter-spacing:0}
svg .reg{font-size:.6em}
/* section backgrounds */
.ls-dark{background:var(--night);color:var(--text-on-dark)}
.ls-white{background:var(--white)}
.ls-paper{background:var(--paper)}
@media (max-width:1060px){.grid-2{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){body{font-size:16px}}


/* ===== 4 Motion ===== */
/* reveal on scroll (only when JS is active) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* reduced motion: set by the head script from the system setting (visitors can switch animations on again) */
html.reduce-motion{scroll-behavior:auto}
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation:none!important;transition:none!important}
html.reduce-motion.js .reveal{opacity:1;transform:none}
/* play button shown on animations while they are paused */
.motion-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;gap:14px;text-align:left;max-width:min(360px,90%);padding:14px 18px 14px 14px;border-radius:18px;border:1px solid rgba(168,205,37,.6);background:rgba(13,14,12,.9);color:var(--white);font-family:var(--font);cursor:pointer;box-shadow:0 20px 50px -20px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.motion-play:hover{border-color:var(--green)}
.motion-play .mp-ico{flex:0 0 44px;height:44px;border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center}
.motion-play .mp-ico svg{width:20px;height:20px;margin-left:3px}
.motion-play b{display:block;font-weight:500;font-size:16px}
.motion-play small{display:block;font-size:12px;color:var(--muted-on-dark);line-height:1.4;margin-top:2px}
.motion-play.small{top:auto;bottom:4%;transform:translateX(-50%)}


/* ===== 5 Shared components ===== */
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 16px/1 var(--font);text-decoration:none;padding:15px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--green);color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 34px -8px rgba(168,205,37,.65)}
.btn-ghost{color:var(--white);border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-line{color:var(--ink);border-color:var(--stone);background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.btn-ink.added{background:var(--green-dark)}
.btn-s{padding:10px 16px;font-size:14px}
/* small labels above headings */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.ls-light .eyebrow{color:var(--green-dark)}
.ls-light .eyebrow::before{background:var(--green-dark);box-shadow:none}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark)}
.ls-dark .kicker{color:var(--green)}
/* chips (scenario presets) */
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.presets-l{font-size:13px;color:var(--muted-on-light);width:100%}
.chip{font:500 13px var(--font);padding:8px 12px;border-radius:999px;border:1px solid var(--stone);background:var(--paper);cursor:pointer;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--green-dark)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}
/* round tick / dash used in tables and the form confirmation */
.yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--ink);font-weight:700;font-size:13px}
.no{color:#b0aea8;font-family:var(--mono)}
/* lexicon / whitepaper link cards (light and dark variant) */
.lex{display:flex;align-items:center;gap:16px;max-width:560px;margin-top:20px;padding:14px 16px 14px 14px;border-radius:16px;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--stone);box-shadow:0 10px 30px -22px rgba(0,0,0,.4);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.lex:hover{border-color:var(--green-dark);transform:translateY(-2px);box-shadow:0 16px 40px -22px rgba(95,149,46,.6)}
.lex-ico{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(168,205,37,.18);color:var(--green-dark)}
.lex-ico svg{width:22px;height:22px}
.lex-t{display:flex;flex-direction:column;min-width:0}
.lex-t small{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark)}
.lex-t b{font-weight:500;font-size:17px;margin-top:2px}
.lex-t em{font-style:normal;font-size:14px;color:var(--muted-on-light);line-height:1.4}
.lex-go{margin-left:auto;flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--stone);color:var(--green-dark);transition:background .25s,color .25s,border-color .25s}
.lex-go svg{width:16px;height:16px;display:block}
.lex:hover .lex-go{background:var(--green);border-color:var(--green);color:var(--ink)}
.ls-dark .lex,.spec .lex{background:rgba(255,255,255,.04);border-color:rgba(168,205,37,.35);color:var(--white);box-shadow:none}
.ls-dark .lex:hover,.spec .lex:hover{border-color:var(--green);background:rgba(168,205,37,.08)}
.ls-dark .lex-ico,.spec .lex-ico{background:rgba(168,205,37,.14);color:var(--green)}
.ls-dark .lex-t small,.spec .lex-t small{color:var(--green)}
.ls-dark .lex-t em,.spec .lex-t em{color:var(--muted-on-dark)}
.ls-dark .lex-go,.spec .lex-go{border-color:rgba(168,205,37,.35);color:var(--green)}


/* ===== 6 Section layout and chapter headings ===== */
.ls-section{padding:112px 0}
.ls-head{max-width:760px;margin-bottom:56px}
.ls-head h2{font-size:clamp(32px,4.2vw,54px)}
.ls-head p{margin-top:18px;font-size:19px;font-weight:300;color:var(--muted-on-light)}
.ls-head .eyebrow{margin-bottom:16px}
.ls-dark .ls-head h2{color:var(--white)}
.ls-dark .ls-head p{color:var(--muted-on-dark)}
/* chapter heading with sub-navigation (Challenges, Performance, Applications) */
.chapter{margin-bottom:64px;padding-bottom:28px;border-bottom:1px solid var(--stone);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.chapter.dark{border-bottom-color:var(--night-line)}
.ch-t{margin:0;font-weight:500;font-size:clamp(40px,5vw,68px);letter-spacing:-.025em;line-height:1;color:var(--ink);position:relative;padding-left:22px}
.ch-t::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:6px;border-radius:3px;background:var(--green)}
.chapter.dark .ch-t{color:var(--white)}
.ch-sub{display:flex;flex-wrap:wrap;gap:8px}
.ch-sub a{font:500 15px var(--font);text-decoration:none;padding:9px 16px;border-radius:999px;border:1px solid var(--stone);color:var(--muted-on-light);transition:border-color .2s,background .2s,color .2s}
.ch-sub a:hover{border-color:var(--green-dark);color:var(--ink)}
.ch-sub a.active{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chapter.dark .ch-sub a{border-color:var(--night-line);color:var(--muted-on-dark)}
.chapter.dark .ch-sub a:hover{border-color:var(--green);color:var(--white)}
.chapter.dark .ch-sub a.active{background:var(--green);border-color:var(--green);color:var(--ink)}
@media (max-width:640px){
  .ls-section{padding:76px 0}
  .chapter{margin-bottom:40px}
  .ch-sub a{font-size:14px;padding:8px 12px}
}


/* ===== 7 Header and navigation ===== */
.ls-sample{background:var(--green);color:var(--ink);font-size:13px;text-align:center;padding:6px 16px;font-weight:500}   /* prototype banner, remove for go-live */
.ls-header{position:sticky;top:0;z-index:50;background:rgba(72,73,69,.95);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--night-line);color:var(--text-on-dark)}
.ls-header .wrap{display:flex;align-items:center;gap:20px;height:76px;width:min(1440px,100% - 48px)}   /* wider than the content: 8 menu entries */
.ls-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.ls-word{font-size:27px;letter-spacing:-.01em;line-height:1;color:var(--white)}
.ls-word b{font-weight:700}
.ls-word sup{font-size:.45em;vertical-align:top;position:relative;top:.1em;margin-left:1px}
.ls-by{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted-on-dark);padding-left:14px;border-left:1px solid var(--night-line)}
.ls-by img{height:38px;width:auto}
.ls-nav{margin-left:auto;display:flex;gap:2px}
.ls-nav a{position:relative;text-decoration:none;font-size:16.5px;white-space:nowrap;color:var(--muted-on-dark);padding:9px 11px;border-radius:999px;transition:color .2s,background .2s}
.ls-nav a:hover{color:var(--white);background:rgba(255,255,255,.06)}
/* scroll spy: current chapter */
.ls-nav a.active{color:var(--white);background:rgba(255,255,255,.06)}
.ls-nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--green)}
.ls-lang{display:flex;font-family:var(--mono);font-size:13px;border:1px solid var(--night-line);border-radius:999px;overflow:hidden;flex-shrink:0}
.ls-lang a,.ls-lang span{padding:5px 10px;text-decoration:none;color:var(--muted-on-dark)}
.ls-lang [aria-current]{background:rgba(255,255,255,.1);color:var(--white)}
.ls-lang[hidden]{display:none}
.ls-menu{display:none;background:none;border:1px solid var(--night-line);color:var(--white);border-radius:10px;width:42px;height:42px;cursor:pointer;flex-shrink:0}
.ls-menu span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;border-radius:2px}
/* up to 1400px the 8 menu entries do not fit: hamburger menu */
@media (max-width:1400px){
  .ls-nav{display:none}
  .ls-menu{display:block}
  .ls-header .wrap > .ls-lang{margin-left:auto}
  .ls-header .wrap > .ls-lang[hidden] + .btn{margin-left:auto}   /* switch hidden: button moves right instead */
  .ls-header.open .ls-nav{display:flex;flex-direction:column;position:absolute;top:76px;left:0;right:0;background:rgba(72,73,69,.98);padding:12px 16px 20px;border-bottom:1px solid var(--night-line)}
}
@media (max-width:1060px){.ls-nav a.active::after{left:12px;right:auto;width:24px}}
@media (max-width:640px){
  .ls-by span{display:none}
  .ls-by img{height:32px}
  .ls-word{font-size:24px}
  .ls-header .btn{display:none}
  .ls-header .wrap > .ls-lang[hidden] ~ .ls-menu{margin-left:auto}
}


/* ===== 8 Page contents: full-height rail on the left / crumb pill on narrow screens =====
   Built by lumisens.js from the header menu + chapter sub-navigation + data-toc markers. */
.ls-toc{--tl:rgba(128,130,122,.38);--tbg:241,241,239;position:fixed;z-index:45;left:0;top:76px;bottom:0;width:170px;opacity:0;pointer-events:none;transition:opacity .4s,width .35s var(--ease);font-family:var(--font)}
.ls-toc.dark{--tbg:13,14,12}
.ls-toc.show{opacity:1}
/* entry colours: --tt text, --ta active, --tg green; .dk = entry sits over a dark section */
.ls-toc a{--tt:#6f7269;--ta:#1d1d1b;--tg:var(--green-dark)}
.ls-toc a.dk{--tt:#9a9e92;--ta:#ffffff;--tg:var(--green)}
.toc-crumb{display:none}
.toc-panel{position:absolute;left:0;top:0;bottom:0;width:max(340px,calc((100vw - 1200px) / 2));overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 22%,#000 78%,transparent 100%);transition:background .3s}
.toc-body{position:absolute;left:24px;right:0;top:0;will-change:transform}
.toc-track{position:absolute;left:4px;width:1px;background:var(--tl);transition:background .4s}
.toc-fill{position:absolute;left:0;top:0;width:100%;background:var(--green)}
.toc-head{position:absolute;left:1px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(168,205,37,.25)}
.toc-list,.toc-sub{list-style:none;margin:0;padding:0}
.toc-ch{transition:padding .5s var(--ease)}
.toc-ch.on{padding:calc(var(--row,26px) * .6) 0}   /* the active chapter gets some air */
.ls-toc a{position:relative;display:flex;align-items:center;gap:14px;height:var(--row,26px);color:var(--tt);text-decoration:none;white-space:nowrap;pointer-events:auto;transition:color .3s}
.ls-toc a:hover{color:var(--ta)}
.toc-ch > a{font-size:13px;letter-spacing:.01em}
.toc-ch.on > a{color:var(--ta);font-weight:500}
.toc-sub a{height:var(--srow,21px);font-size:11.5px;padding-left:12px}
.toc-sub a.on{color:var(--tg)}
.toc-ch:not(.on) .toc-sub a{opacity:.55}
.toc-dot{flex:none;width:9px;height:9px;display:grid;place-items:center}
.toc-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tt);opacity:.8;transition:background .3s,opacity .3s}
.toc-sub .toc-dot{margin-left:-12px}
.toc-sub .toc-dot::before{width:4px;height:4px}
.toc-ch.done > a .toc-dot::before,.toc-sub a.done .toc-dot::before,.toc-sub a.on .toc-dot::before,.toc-ch.on > a .toc-dot::before{background:var(--tg);opacity:1}
.ls-toc span{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s var(--ease)}
.toc-ch > a span{transition:opacity .3s,transform .35s var(--ease),font-size .4s var(--ease)}
.toc-ch.on > a span{opacity:1;transform:none;font-size:15.5px}
/* 1340-1599px: dots (+ current chapter name from 1520px); all names on hover / keyboard focus over a soft backdrop */
.ls-toc:hover,.ls-toc:focus-within{width:260px}
.ls-toc:hover .toc-panel,.ls-toc:focus-within .toc-panel{background:linear-gradient(90deg,rgba(var(--tbg),.96) 70%,rgba(var(--tbg),0))}
.ls-toc:hover span,.ls-toc:focus-within span{opacity:1;transform:none}
/* below 1520px the current chapter name would reach into the content column: dots only, names on hover */
@media (max-width:1519px){
  .toc-ch.on > a span{opacity:0;transform:translateX(-6px)}
  .ls-toc:hover .toc-ch.on > a span,.ls-toc:focus-within .toc-ch.on > a span{opacity:1;transform:none}
}
/* from 1600px: all names always visible */
@media (min-width:1600px){
  .ls-toc{width:max(220px,calc((100vw - 1200px) / 2 - 20px))}
  .toc-body{left:max(24px,calc((100vw - 1200px) / 2 - 200px))}
  .ls-toc span{opacity:1;transform:none}
  .ls-toc:hover .toc-panel,.ls-toc:focus-within .toc-panel{background:none}
}
/* below 1340px: crumb pill under the header, opens the same contents as a drop-down */
@media (max-width:1339px){
  .ls-toc,.ls-toc:hover,.ls-toc:focus-within{left:16px;bottom:auto;top:88px;width:auto;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--ease)}
  .ls-toc.show{transform:none;pointer-events:auto}
  .toc-crumb{display:flex;align-items:center;gap:8px;position:relative;max-width:calc(100vw - 32px);height:38px;padding:0 16px;border-radius:19px;border:1px solid rgba(168,205,37,.45);background:rgba(72,73,69,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-on-dark);font:500 14px var(--font);cursor:pointer;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);overflow:hidden}
  .toc-crumb::after{content:"";width:7px;height:7px;margin-left:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
  .ls-toc.expanded .toc-crumb::after{transform:translateY(2px) rotate(-135deg)}
  .toc-crumb > i{font-style:normal;color:#a9ac9f}
  .ls-toc .toc-crumb span{opacity:1;transform:none;white-space:nowrap}
  .toc-crumb .toc-c2{color:var(--green);font-weight:400;overflow:hidden;text-overflow:ellipsis}
  .toc-crumb.one > i,.toc-crumb.one .toc-c2{display:none}
  .toc-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12)}
  .toc-bar i{display:block;height:100%;width:0;background:var(--green)}
  .ls-toc .toc-panel a{--tt:#b9bcb1;--ta:#fff;--tg:var(--green);height:26px}
  .ls-toc .toc-panel .toc-sub a{height:21px}
  .ls-toc .toc-panel,.ls-toc:hover .toc-panel,.ls-toc:focus-within .toc-panel{display:none;position:absolute;inset:auto;top:46px;left:0;width:250px;max-height:calc(100vh - 160px);overflow:auto;-webkit-mask-image:none;mask-image:none;background:rgba(72,73,69,.985);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;padding:14px 16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);--tl:rgba(255,255,255,.18);--tt:#b9bcb1;--ta:#fff;--tg:var(--green)}
  .ls-toc .toc-panel{pointer-events:auto}
  .ls-toc.expanded .toc-panel{display:block}
  .toc-body{position:relative;left:0;transform:none!important}
  .toc-head{display:none}
  .ls-toc .toc-ch.on{padding:0}
  .ls-toc .toc-ch.on > a span{font-size:13px}
  .ls-toc .toc-panel span{opacity:1;transform:none}
}


/* ===== 9 Floating elements ===== */
/* back to top */
.ls-totop{position:fixed;right:20px;bottom:20px;z-index:55;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(72,73,69,.95);color:var(--white);border:1px solid rgba(168,205,37,.5);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),background .2s}
.ls-totop svg{width:20px;height:20px;display:block}
.ls-totop.show{opacity:1;transform:none;pointer-events:auto}
.ls-totop:hover{background:var(--green);color:var(--ink);border-color:var(--green)}
/* talk to an engineer */
.ls-talk{position:fixed;right:80px;bottom:20px;z-index:56;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.ls-talk.show,.ls-talk.open{opacity:1;transform:none;pointer-events:auto}
.ls-talk-btn{display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(168,205,37,.5);background:rgba(72,73,69,.95);color:var(--white);font:500 15px var(--font);cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:background .2s,color .2s}
.ls-talk-btn svg{width:20px;height:20px;color:var(--green);flex:none}
.ls-talk-btn:hover,.ls-talk.open .ls-talk-btn{background:var(--green);color:var(--ink);border-color:var(--green)}
.ls-talk-btn:hover svg,.ls-talk.open .ls-talk-btn svg{color:var(--ink)}
.ls-talk-panel{position:absolute;right:0;bottom:60px;width:320px;padding:20px;border-radius:18px;background:var(--night);color:var(--text-on-dark);border:1px solid rgba(168,205,37,.4);box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.ls-talk-panel[hidden]{display:none}
.ls-talk-panel > b{display:block;color:var(--white);font-weight:500;font-size:17px}
.ls-talk-panel > p{font-size:14px;color:var(--muted-on-dark);margin:4px 0 12px}
.ls-talk-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--white);background:rgba(255,255,255,.04);border:1px solid var(--night-line);margin-top:8px;transition:border-color .2s}
.ls-talk-row:hover{border-color:var(--green)}
.ls-talk-row svg{width:20px;height:20px;color:var(--green);flex:none}
.ls-talk-row small{display:block;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-dark)}
.ls-talk-cb{width:100%;justify-content:center;margin-top:14px}
/* sticky "request" button on phones */
.ls-sticky{display:none}
@media (max-width:640px){
  .ls-totop{right:14px;bottom:84px;width:44px;height:44px}
  .ls-talk{right:14px;bottom:136px}
  .ls-talk-btn{width:44px;height:44px;padding:0;justify-content:center}
  .ls-talk-btn span{display:none}
  .ls-talk-panel{position:fixed;left:12px;right:12px;bottom:190px;width:auto}
  .ls-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
  .ls-sticky.show{opacity:1;transform:none;pointer-events:auto}   /* shown by lumisens.js after the intro, hidden at the form */
  .ls-sticky .btn{width:100%;justify-content:center;box-shadow:0 10px 40px -8px rgba(0,0,0,.6)}
}


/* ===== 10 Intro + hero (top of the page) ===== */
/* .ls-stage wraps intro and hero: one continuous evotron logo pattern behind both */
.ls-stage{position:relative;isolation:isolate;overflow:hidden;background:var(--night)}
.ls-stage::before{content:"";position:absolute;inset:0;z-index:-2;background:url("../img/et-pattern-dark.svg");pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 35%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 35%,#000 72%,transparent 100%)}
.ls-stage > section{background:transparent}
/* intro: wordmark, one sentence, the two path cards */
.ls-intro{position:relative;min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);display:flex;align-items:center;padding:64px 0 96px;text-align:center}
.ls-intro::after{content:"";position:absolute;left:50%;top:46%;width:1100px;height:1100px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(168,205,37,.16),transparent 70%);z-index:-1;pointer-events:none}
.ls-intro-in{display:flex;flex-direction:column;align-items:center}
.ls-intro-word{margin:0;font-size:clamp(64px,12vw,168px);font-weight:300;letter-spacing:-.035em;line-height:1;color:var(--white)}
.ls-intro-word b{font-weight:700;background:linear-gradient(90deg,var(--green),#d9f07a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ls-intro-word sup{font-size:.28em;font-weight:400;vertical-align:top;position:relative;top:.25em;margin-left:.04em;color:var(--muted-on-dark)}
.ls-intro-claim{margin:28px 0 0;max-width:720px;font-size:clamp(20px,2.2vw,28px);font-weight:300;line-height:1.35;color:var(--text-on-dark)}
.ls-intro-by{margin:14px 0 0;font:13px var(--mono);letter-spacing:.06em;color:var(--muted-on-dark)}
.ls-intro-paths{width:100%;margin-top:clamp(48px,9vh,96px);text-align:left}
.ls-intro-more{position:absolute;left:50%;bottom:28px;width:44px;height:44px;margin-left:-22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted-on-dark);border:1px solid var(--night-line);transition:color .2s,border-color .2s}
.ls-intro-more:hover{color:var(--green);border-color:rgba(168,205,37,.5)}
.ls-intro-more svg{width:20px;height:20px;animation:ls-nudge 2.4s var(--ease) infinite}
.ls-intro-word,.ls-intro-claim,.ls-intro-by,.ls-intro-paths{animation:ls-rise .9s var(--ease) both}
.ls-intro-claim{animation-delay:.12s}.ls-intro-by{animation-delay:.2s}.ls-intro-paths{animation-delay:.3s}
@keyframes ls-nudge{0%,60%,100%{transform:none}30%{transform:translateY(4px)}}
@keyframes ls-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* path cards: "I'm an engineer" / "I decide on investments" */
.ls-paths-l{margin-top:0;font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-dark)}
.ls-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.ls-path{display:flex;gap:18px;align-items:center;text-decoration:none;padding:24px 24px 24px 22px;border:1px solid rgba(168,205,37,.45);border-radius:var(--radius-s);background:linear-gradient(135deg,rgba(168,205,37,.12),rgba(168,205,37,.03) 70%),var(--night);box-shadow:0 0 0 0 rgba(168,205,37,0);transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .25s}
.ls-path:hover,.ls-path:focus-visible{border-color:var(--green);background:linear-gradient(135deg,rgba(168,205,37,.2),rgba(168,205,37,.06) 70%),var(--night);transform:translateY(-3px);box-shadow:0 14px 40px -16px rgba(168,205,37,.55)}
.ls-path span{display:block;font-size:15px;color:var(--white);line-height:1.35;margin-top:2px}
.ls-path small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--green);letter-spacing:.08em;white-space:nowrap}
.ls-path > span:nth-child(2) > span{font-size:20px;font-weight:500;margin-top:4px}
.ls-path em{display:block;font-style:normal;font-size:14px;color:var(--muted-on-dark);margin-top:6px;line-height:1.45}
.ls-path .ls-path-ico{flex:0 0 56px;height:56px;border-radius:14px;background:var(--green);color:var(--ink);display:flex;align-items:center;justify-content:center;margin:0;padding:0;line-height:0;font-size:0}
.ls-path .ls-path-ico svg{width:28px;height:28px;display:block;margin:0;flex:none}
.ls-path .ls-path-go{flex:0 0 40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0;padding:0;line-height:0;font-size:0;color:var(--green);border:1px solid rgba(168,205,37,.45);transition:transform .25s var(--ease),background .25s,color .25s}
.ls-path .ls-path-go svg{width:18px;height:18px;display:block;margin:0;flex:none}
.ls-path:hover .ls-path-go{transform:translateX(3px);background:var(--green);color:var(--ink)}
/* hero: headline, lead text, buttons, animated ring light */
.ls-hero{position:relative;padding:72px 0 64px}
.ls-hero::after{content:"";position:absolute;width:960px;height:960px;right:-280px;top:-300px;background:radial-gradient(closest-side,rgba(168,205,37,.17),transparent 70%);z-index:-1;pointer-events:none;opacity:.8}
.ls-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.ls-hero h1{font-size:clamp(42px,6vw,78px);margin:18px 0 22px;color:var(--white)}
.ls-hero h1 em{font-style:normal;font-weight:500;background:linear-gradient(90deg,var(--green),#d9f07a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ls-lead{font-size:clamp(17px,1.45vw,20px);color:var(--muted-on-dark);max-width:560px;font-weight:300}
.ls-lead strong{color:var(--text-on-dark);font-weight:500}
.ls-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* ring light: the colour comes from --led (set by lumisens.js) */
.ls-visual{position:relative;aspect-ratio:1/1;max-width:540px;justify-self:center;width:100%}
.ls-ring{width:100%;height:100%;overflow:visible;--led:#a8cd25}
.ls-ring .housing{fill:url(#housing);stroke:rgba(255,255,255,.08)}
.ls-ring .led{fill:#262b1a;transition:fill .16s linear}
.ls-ring .seg.on .led{fill:var(--led);filter:url(#glow)}
.ls-ring .seg-label{font:12px var(--mono);fill:#6c7163;text-anchor:middle;dominant-baseline:middle;transition:fill .16s}
.ls-ring .seg.on .seg-label{fill:var(--led)}
.ls-readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56%;font-family:var(--mono);font-size:clamp(11px,1.15vw,14px);line-height:1.55;background:rgba(8,9,7,.88);border:1px solid var(--night-line);border-radius:10px;padding:12px 14px;box-shadow:0 20px 60px -20px #000}
.ls-readout header{display:flex;justify-content:space-between;color:var(--white);letter-spacing:.08em;border-bottom:1px solid var(--night-line);padding-bottom:6px;margin-bottom:6px}
.ls-readout header i{font-style:normal;color:var(--green)}
.ls-readout dl{display:grid;grid-template-columns:auto 1fr;gap:0 12px;margin:0}
.ls-readout dt{color:var(--muted-on-dark)}
.ls-readout dd{margin:0;text-align:right;color:var(--text-on-dark);font-variant-numeric:tabular-nums}
.ls-readout dd.hold{color:var(--green)}
.ls-readout footer{margin-top:6px;padding-top:6px;border-top:1px solid var(--night-line);display:flex;justify-content:space-between;color:var(--muted-on-dark)}
.ls-readout footer b{color:var(--green);font-weight:400}
@media (max-width:1060px){
  .ls-hero-grid{grid-template-columns:1fr}
  .ls-visual{max-width:440px;order:-1}
}
@media (max-width:760px){.ls-paths{grid-template-columns:1fr}.ls-path small{white-space:normal}}
@media (max-width:640px){
  .ls-intro{padding:48px 0 88px}
  .ls-intro-claim{margin-top:20px}
  .ls-hero{padding:36px 0 48px}
}


/* ===== 11 Challenges ===== */
/* --- the blind spot: stagnation bars + four pain cards --- */
.stagnation{background:var(--paper);border-radius:var(--radius);padding:26px}
.stag-t{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-light);margin-bottom:8px}
.stag-row{display:grid;grid-template-columns:150px 1fr 48px;gap:14px;align-items:center;padding:9px 0;font-size:15px}
.stag-row+.stag-row{border-top:1px solid var(--stone)}
.stag-bar{height:8px;border-radius:999px;background:var(--stone);overflow:hidden}
.stag-bar i{display:block;height:100%;border-radius:inherit;background:var(--graphite);width:var(--w);transform-origin:left;transition:transform 1.2s var(--ease)}
.js .stagnation:not(.in) .stag-bar i{transform:scaleX(0)}
.stag-row > span:last-child{font-family:var(--mono);font-size:13px;color:var(--muted-on-light);text-align:right}
.stag-row.light{font-weight:500}
.stag-row.light .stag-bar i{background:var(--bad)}
.stag-row.light > span:last-child{color:var(--bad)}
.stag-note{font-size:13px;color:var(--muted-on-light);margin-top:12px}
.pains{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px}
.pain{border:1px solid var(--stone);border-radius:var(--radius);padding:24px;background:var(--white);display:flex;flex-direction:column}
.pain .num{font-family:var(--mono);font-size:13px;color:var(--bad)}
.pain h3{font-size:21px;font-weight:500;letter-spacing:-.01em;margin:10px 0}
.pain p{font-size:15px;color:var(--muted-on-light);flex:1}
.pain svg{margin-top:18px;width:100%;height:auto}
.pain .ui-ax{stroke:#c9c7c1;stroke-width:1.5;fill:none}
.pain .ui-c{stroke:var(--ink);stroke-width:2.5;fill:none}
.pain .ui-b{fill:rgba(229,83,61,.16)}
.pain .ui-r{stroke:var(--bad);stroke-width:2;fill:none}
.pain .ui-t{font:11px var(--mono);fill:var(--muted-on-light)}
@media (max-width:1060px){.pains{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .pains{grid-template-columns:1fr}
  .stag-row{grid-template-columns:104px 1fr 42px;font-size:14px;gap:10px}
}

/* --- the old way: multi-channel set-up is struck out and replaced (phases .p1-.p6 set by lumisens.js) --- */
.ox-stage{position:relative;background:var(--white);border:1px solid var(--stone);border-radius:24px;padding:24px 20px 16px;overflow:hidden}
.ox-svg{width:100%;height:auto;display:block;overflow:visible}
.ox-svg .part{opacity:0;transition:opacity .45s var(--ease) calc(var(--d,0) * .28s),transform .45s var(--ease) calc(var(--d,0) * .28s)}
.ox-svg .cab{fill:#e9e8e4;stroke:#c9c7c1;stroke-width:2}
.ox-svg .box{fill:#d9d8d3;stroke:#b9b7b2;stroke-width:1.5}
.ox-svg .box-n{fill:#f1f1ef;stroke:#b9b7b2;stroke-width:1.5}
.ox-svg .ch{fill:#2a2b28}
.ox-svg .fan circle{fill:#d0cec9;stroke:#a9a7a2;stroke-width:2}
.ox-svg .fan path{stroke:#8c8f87;stroke-width:2}
.ox-svg .lbl-d{font:600 12px var(--mono);letter-spacing:.06em;fill:#6c6e68}
.ox-svg .lbl-ch{font:11px var(--mono);fill:#c9cbc4}
.ox-svg .box .lbl-ch,.ox-svg .box-n+.lbl-ch,.ox-svg g .box~.lbl-ch{fill:#4a4c47}
.ox-svg .lbl-l{font:500 14px var(--font);fill:var(--ink)}
.ox-svg .lbl-g{font:700 13px var(--mono);fill:var(--green-dark)}
.ox-svg .lbl-b{font:11px var(--mono);fill:#4a4c47}
/* machine vision camera (side view): body with cooling fins, status LED, lens with knurled rings */
.ox-svg .cam-plug{fill:#b9bbb4}
.ox-svg .cam-body{fill:#2a2b28}
.ox-svg .cam-hi{fill:rgba(255,255,255,.14)}
.ox-svg .cam-fin{stroke:#41433d;stroke-width:2.5;stroke-linecap:round}
.ox-svg .cam-led{fill:var(--green)}
.ox-svg .cam-mount{fill:#6c6e68}
.ox-svg .cam-lens{fill:#1d1e1b}
.ox-svg .cam-knurl{stroke:#3d3f39;stroke-width:1.6}
.ox-svg .cam-ring{fill:var(--green-dark)}
.ox-svg .cam-glass{fill:#2c4a6e;stroke:#5d86b5;stroke-width:1}
.ox-svg .dim{stroke:var(--bad);stroke-width:1.5;fill:none}
.ox-svg .cable-old{fill:none;stroke:#2a2b28;stroke-width:11;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;opacity:1;transition:stroke-dashoffset 1.1s var(--ease) calc(var(--d,0) * .28s)}
.ox-svg .cable-old.thin{stroke-width:5}
.ox-svg .cn-old circle{fill:#55574f}
.ox-svg .cn-old .pin{fill:#d9d8d3}
.ox-svg .rl-house{fill:#2a2b28}
.ox-svg .rl-hole{fill:var(--white)}
.ox-svg .seg-old{fill:none;stroke:#6c6e68;stroke-width:14;stroke-linecap:round}
.ox-svg .seg-new{fill:none;stroke:#3a4030;stroke-width:14;stroke-linecap:round;transition:stroke .3s}
.ox-svg .cable-new{fill:none;stroke:var(--green-dark);stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;opacity:1;transition:stroke-dashoffset .8s var(--ease) calc(var(--d,0) * .28s)}
.ox-svg .cable-new.thin{stroke-width:3}
.ox-svg .ctrl{fill:#2a2b28}
.ox-svg .ctrl-disp{fill:var(--green)}
.ox-svg .ctrl-led{fill:var(--green)}
.ox-svg .ctrl-led.b{fill:#3a7bd5}
.ox-svg .m8{fill:#b9bbb4}
.ox-svg .strike path{fill:none;stroke:var(--bad);stroke-width:12;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:1100;transition:stroke-dashoffset .5s var(--ease)}
.ox-svg .strike path+path{transition-delay:.25s}
.ox-svg .old-wrap{transition:transform .8s cubic-bezier(.7,0,.3,1),opacity .8s}
.ox-svg .new{opacity:0;transition:opacity .2s}
html.reduce-motion .ox-svg .cable-old,html.reduce-motion .ox-svg .cable-new,html.reduce-motion .ox-svg .strike path{stroke-dasharray:none}
/* phases: 1 old set-up appears, 2 drawbacks listed, 3 struck out, 4 wiped away, 5 lumiSENS appears, 6 running */
.ox.p1 .old .part{opacity:1}
.ox.p1 .old .cable-old{stroke-dashoffset:0}
.ox.p3 .strike path{stroke-dashoffset:0}
.ox.p4 .old-wrap{transform:translateX(-110%);opacity:0}
.ox.p5 .new{opacity:1}
.ox.p5 .new .part{opacity:1}
.ox.p5 .new .cable-new{stroke-dashoffset:0}
.ox.p6 .seg-new{stroke:var(--green);filter:drop-shadow(0 0 6px rgba(168,205,37,.9));animation:oxseg 1.6s linear infinite;animation-delay:calc(var(--q) * .4s)}
@keyframes oxseg{0%,100%{stroke:var(--green)}50%{stroke:#3a4030}}
.ox-badge{position:absolute;top:16px;left:20px;font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;transition:opacity .4s}
.ox-badge.old{background:rgba(229,83,61,.12);color:#b8402d;opacity:0}
.ox-badge.new{background:rgba(168,205,37,.2);color:var(--green-dark);opacity:0}
.ox.p1 .ox-badge.old{opacity:1}
.ox.p4 .ox-badge.old{opacity:0}
.ox.p5 .ox-badge.new{opacity:1}
.ox-replay{position:absolute;top:12px;right:14px;display:inline-flex;gap:6px;align-items:center;font:500 13px var(--font);border:1px solid var(--stone);background:var(--white);border-radius:999px;padding:7px 12px;cursor:pointer;color:var(--ink);opacity:0;transition:opacity .4s,border-color .2s}
.ox-replay svg{width:15px;height:15px}
.ox-replay:hover{border-color:var(--ink)}
.ox.p6 .ox-replay{opacity:1}
.ox-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ox-lists ul{list-style:none;margin:0;padding:20px 22px;border-radius:18px;background:var(--white);border:1px solid var(--stone)}
.ox-lists li{display:flex;gap:10px;padding:7px 0;font-size:15px;opacity:0;transform:translateY(6px);transition:opacity .4s calc(var(--d) * .3s),transform .4s calc(var(--d) * .3s)}
.ox-lists li::before{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--font);margin-top:1px}
.ox-bad li::before{content:"✕";background:rgba(229,83,61,.14);color:var(--bad)}
.ox-good li::before{content:"✓";background:var(--green);color:var(--ink)}
.ox-good{border-color:rgba(168,205,37,.6)!important}
.ox.p2 .ox-bad li{opacity:1;transform:none}
.ox.p4 .ox-bad li{opacity:.45;text-decoration:line-through;text-decoration-color:rgba(229,83,61,.6)}
.ox.p6 .ox-good li{opacity:1;transform:none}
@media (max-width:640px){.ox-lists{grid-template-columns:1fr}.ox-stage{padding:44px 8px 8px}}

/* --- cable length matters: oscilloscope (pulse vs cable length) --- */
.cl{display:grid;grid-template-columns:330px 1fr;gap:24px;align-items:start}
.cl-ctrl{background:var(--paper);border-radius:var(--radius);padding:24px}
.cl-ctrl .presets{margin-top:16px}
.cl-ctrl .cl-pw{margin-top:22px}
.cl-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.cl-stats div{background:var(--white);border:1px solid var(--stone);border-radius:12px;padding:10px 12px}
.cl-stats small{display:block;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-light)}
.cl-stats strong{font:400 20px var(--mono);font-variant-numeric:tabular-nums}
.cl-stats .cl-sch{margin-top:2px;color:var(--warn)}   /* jitter of long cables: schematic model, not measured */
.verdict.cl-v{margin-top:12px;border-radius:12px;background:var(--night);color:var(--text-on-dark);border:0}   /* .verdict from section 13, as a dark box */
.cl-scope{background:var(--night);border-radius:var(--radius);padding:16px 16px 12px;color:var(--text-on-dark)}
.cl-scope-top{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--muted-on-dark);padding:0 6px 8px}
#cl-svg{width:100%;height:auto;display:block}
#cl-svg .g{stroke:rgba(255,255,255,.07)}
#cl-svg .ax{font:11px var(--mono);fill:var(--muted-on-dark)}
#cl-svg .trig{fill:none;stroke:#8a8f80;stroke-width:1.6}
#cl-svg .ideal{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:5 5}
#cl-svg .real{fill:none;stroke:var(--green);stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(168,205,37,.6))}
#cl-svg .real.ghost{stroke-width:1.2;opacity:.45;filter:none}
.cl-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted-on-dark);padding:8px 6px 0}
.cl-leg span{display:inline-flex;align-items:center;gap:8px}
.cl-leg i{width:18px;height:0;border-top:2px solid var(--green)}
.cl-leg .l-ideal i{border-top:2px dashed rgba(255,255,255,.45)}
.cl-leg .l-trig i{border-top:2px solid #8a8f80}
@media (max-width:1060px){.cl{grid-template-columns:1fr}}


/* ===== 12 Technology: how lumiSENS works (scroll-driven steps + 3D scene) ===== */
.how{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.how-visual{min-width:0;position:sticky;top:100px;background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);padding:16px}
.how-visual.has-3d .sys{display:none}   /* SVG diagram = fallback when 3D is not loaded */
.how-3d{display:block;border-radius:12px;max-width:100%}
.how-3d-note{position:absolute;right:26px;bottom:24px;font:11px var(--mono);color:#6c7163;pointer-events:none}
/* SVG system diagram, highlighted per step via data-step */
.sys{width:100%;height:auto;display:block}
.sys .box{fill:#1b1e17;stroke:rgba(255,255,255,.13);stroke-width:1.5;transition:stroke .4s,fill .4s}
.sys .lbl{font:500 15px var(--font);fill:var(--white)}
.sys .sub{font:11px var(--mono);fill:var(--muted-on-dark)}
.sys .wire{stroke:#3a4030;stroke-width:3;fill:none;transition:stroke .4s}
.sys .bus{stroke:#3a4030;stroke-width:2;fill:none;stroke-dasharray:4 6;transition:stroke .4s}
.sys .chip{fill:#262b1a;stroke:rgba(168,205,37,.3);transition:fill .4s,stroke .4s}
.sys .chip-t{font:700 11px var(--mono);fill:var(--green);letter-spacing:.06em}
.sys .ledr{fill:#2b3020;transition:fill .3s}
.sys .sense{font:11px var(--mono);fill:var(--muted-on-dark);opacity:.3;transition:opacity .4s,fill .4s}
.sys .badge{opacity:0;transition:opacity .4s}
.sys .badge rect{fill:var(--green)}
.sys .badge text{font:700 11px var(--mono);fill:var(--ink)}
.sys .out{opacity:.35;transition:opacity .4s}
.sys .wire-out{stroke:#3a4030;stroke-width:2;fill:none;transition:stroke .4s}
.sys[data-step="1"] .s1-chip{fill:#3b4a12;stroke:var(--green)}
.sys[data-step="1"] .sense{opacity:1;fill:var(--green)}
.sys[data-step="1"] .ledr,.sys[data-step="3"] .ledr,.sys[data-step="4"] .ledr{fill:var(--green)}
.sys[data-step="1"] .bus,.sys[data-step="2"] .bus{stroke:var(--green);animation:dash 1s linear infinite}
.sys[data-step="2"] .b-id{opacity:1}
.sys[data-step="2"] .s1-chip{stroke:var(--green)}
.sys[data-step="3"] .s3-box{stroke:var(--green);fill:#1f2615}
.sys[data-step="3"] .wire-led{stroke:var(--green)}
.sys[data-step="3"] .b-reg{opacity:1}
.sys[data-step="4"] .out{opacity:1}
.sys[data-step="4"] .wire-out{stroke:var(--green);stroke-dasharray:4 6;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.steps{display:flex;flex-direction:column;gap:14px}
.step{border:1px solid var(--night-line);border-radius:var(--radius);padding:28px;background:rgba(255,255,255,.02);transition:border-color .4s,background .4s,opacity .4s;min-height:42vh;display:flex;flex-direction:column;justify-content:center}
.js .step{opacity:.45}
.js .step.active{opacity:1;border-color:rgba(168,205,37,.45);background:rgba(168,205,37,.04)}
.step .n{font-family:var(--mono);font-size:13px;color:var(--green)}
.step h3{font-size:32px;color:var(--white);margin:6px 0 12px}
.step p{color:var(--muted-on-dark);font-size:16px}
.step p b{color:var(--text-on-dark);font-weight:500}
.step ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.step li{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--text-on-dark)}
.oneliner{margin-top:64px;text-align:center;font-weight:300;font-size:clamp(24px,2.8vw,36px);color:var(--white);max-width:900px;margin-inline:auto;line-height:1.3}
.oneliner em{font-style:normal;color:var(--green)}
@media (max-width:1060px){
  .how{grid-template-columns:1fr;gap:36px}
  .how-visual{top:76px;z-index:2;padding:10px}
  .step{min-height:0}
}
@media (max-width:640px){
  .how-visual{position:static}
  .js .step{opacity:1}
  /* phones with 3D: the scene moves above the steps and docks under the header + contents pill (88 + 38 px),
     the steps scroll underneath it (height of the scene: how3d.js, resize) */
  .how-visual.has-3d{position:sticky;top:134px;order:-1;padding:8px}
  /* covers the strip between header and scene, so the steps do not show through while scrolling underneath */
  .how-visual.has-3d::before{content:"";position:absolute;left:-17px;right:-17px;bottom:100%;height:60px;background:var(--night);pointer-events:none}
}


/* ===== 13 Performance ===== */
/* --- facts: bento grid of key figures --- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(180px,auto);gap:14px}
.tile{position:relative;overflow:hidden;border-radius:var(--radius);padding:26px;background:var(--night-2);border:1px solid var(--night-line);display:flex;flex-direction:column;justify-content:space-between;transition:border-color .3s,transform .3s var(--ease)}
.tile:hover{border-color:rgba(168,205,37,.35);transform:translateY(-2px)}
.tile .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-on-dark)}
.tile .v{font-weight:300;font-size:clamp(40px,4.6vw,62px);letter-spacing:-.03em;line-height:1;color:var(--white);margin-top:14px}
.tile .v small{font-size:.42em;letter-spacing:0;color:var(--green);margin-left:4px;font-weight:400}
.tile .v.v-long{font-size:clamp(34px,3.7vw,54px);font-variant-numeric:tabular-nums}
.tile p{color:var(--muted-on-dark);font-size:15px;margin-top:10px;max-width:44ch}
.tile.accent{background:linear-gradient(145deg,#1b2110 0%,var(--night-2) 62%)}
.t-6{grid-column:span 6}.t-4{grid-column:span 4}.t-3{grid-column:span 3}
.r-2{grid-row:span 2}
.trace{width:100%;height:auto;margin-top:20px}
.trace .grid{stroke:rgba(255,255,255,.06)}
.trace .lane{font:11px var(--mono);fill:var(--muted-on-dark)}
.trace .trig{fill:none;stroke:#8a8f80;stroke-width:1.5}
.trace .pulse{fill:none;stroke:var(--green);stroke-width:1.4;opacity:.16}
.trace .pulse.main{opacity:1;stroke-width:2;filter:url(#glow2)}
.trace .dim{stroke:var(--muted-on-dark);stroke-width:1}
.trace .dim-t{font:11px var(--mono);fill:var(--text-on-dark)}
.seqgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:16px;max-width:260px}
.seqgrid i{aspect-ratio:1;border-radius:4px;background:#262b1a;transition:background .12s}
.seqgrid i.on{background:var(--green);box-shadow:0 0 10px rgba(168,205,37,.6)}
.cams{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;margin-top:16px;max-width:300px}
.cams i{aspect-ratio:1;border-radius:2px;background:#2b3020;transition:background .1s}
.cams.flash i{background:var(--green);box-shadow:0 0 6px rgba(168,205,37,.7)}
.bar{height:8px;border-radius:999px;background:#2b3020;margin-top:18px;overflow:hidden}
.bar i{display:block;height:100%;width:98%;background:linear-gradient(90deg,var(--green-dark),var(--green));border-radius:inherit}
#performance .lex{margin-top:28px}
@media (max-width:1060px){.t-6{grid-column:span 12}.t-3,.t-4{grid-column:span 6}}
@media (max-width:640px){.t-3,.t-4{grid-column:span 12}.r-2{grid-row:span 1}}

/* --- constant light: drift demo (sliders, two camera images, chart) --- */
.demo{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.panel{background:var(--white);border-radius:var(--radius);border:1px solid var(--stone);padding:26px;position:sticky;top:92px}
.panel h3{font-size:20px;font-weight:500;letter-spacing:0;margin-bottom:6px}
.panel > p{font-size:14px;color:var(--muted-on-light);margin-bottom:24px}
.ctrl+.ctrl{margin-top:24px}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:500}
.ctrl output{font-family:var(--mono);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.ctrl input[type=range]{width:100%;margin:10px 0 2px;accent-color:var(--green-dark);height:28px;cursor:pointer}
.ctrl .scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted-on-light)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cam{border-radius:var(--radius);overflow:hidden;background:var(--night);color:var(--text-on-dark)}
.cam-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;font-family:var(--mono);font-size:13px}
.cam-top b{font-weight:400;color:var(--white)}
.cam-top .tag{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap}
.cam.ls .cam-top .tag{background:rgba(168,205,37,.16);color:var(--green)}
.cam-img{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
.cam-img svg{width:100%;height:100%;transition:filter .3s var(--ease)}
.cam-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--night-line)}
.cam-stats div{padding:12px 16px}
.cam-stats div+div{border-left:1px solid var(--night-line)}
.cam-stats small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted-on-dark);letter-spacing:.06em;text-transform:uppercase}
.cam-stats strong{font-family:var(--mono);font-weight:400;font-size:22px;color:var(--white);font-variant-numeric:tabular-nums}
.verdict{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--night-line);font-size:14px;min-height:50px;line-height:1.35}
.verdict i{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:var(--green);box-shadow:0 0 10px var(--green)}
.verdict.bad i{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.verdict.warn i{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.chart-card{margin-top:14px;background:var(--white);border:1px solid var(--stone);border-radius:var(--radius);padding:20px 20px 10px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted-on-light);margin-bottom:6px}
.chart-legend span{display:inline-flex;align-items:center;gap:8px}
.chart-legend i{width:20px;height:0;border-top:3px dashed #9b9e94}
.chart-legend .l-ls i{border-top:3px solid var(--green-dark)}
.chart-legend .l-res i{height:10px;border:0;background:rgba(168,205,37,.25);border-radius:2px}
.chart{width:100%;height:auto;overflow:visible}
.chart .ax{stroke:var(--stone)}
.chart .tick{font:11px var(--mono);fill:var(--muted-on-light)}
.chart .c-conv{fill:none;stroke:#9b9e94;stroke-width:2.5;stroke-dasharray:6 5}
.chart .c-ls{fill:none;stroke:var(--green-dark);stroke-width:3}
.chart .c-res{fill:rgba(168,205,37,.18)}
.chart .now{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.chart .dot-conv{fill:#9b9e94}
.chart .dot-ls{fill:var(--green-dark)}
.chart .lim{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:3 3}
.chart .lim-t{font:11px var(--mono);fill:#9a6c12}
@media (max-width:1060px){.demo{grid-template-columns:1fr}.panel{position:static}}
@media (max-width:640px){.compare{grid-template-columns:1fr}}

/* --- multicolour: one light, every wavelength --- */
.mc{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.mc-side{position:sticky;top:96px}
.mc-lamp{position:relative;aspect-ratio:112/94;border-radius:16px;background:linear-gradient(160deg,#3a3c37,#1d1e1b);padding:12%;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mc-glass{width:100%;height:100%;border-radius:4px;background:var(--lc,#ff3b2f);box-shadow:0 0 40px 6px var(--lc,#ff3b2f),inset 0 0 30px rgba(255,255,255,.35);transition:background .35s,box-shadow .35s}
.mc-lamp span{position:absolute;left:0;right:0;bottom:4%;text-align:center;font:10px var(--mono);color:#8c8f87;letter-spacing:.06em}
.mc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.wl{display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid var(--stone);background:var(--white);cursor:pointer;font-family:var(--font);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.wl:hover{border-color:var(--ink);transform:translateY(-1px)}
.wl i{grid-row:1/3;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 10px var(--c)}
.wl b{font-weight:500;font-size:14px;color:var(--ink)}
.wl small{font:11px var(--mono);color:var(--muted-on-light)}
.wl[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}
.wl[aria-pressed=true] b{color:#fff}
.wl[aria-pressed=true] small{color:#b9bbb4}
.wl-seq i{background:conic-gradient(#ff3b2f 0 33%,#2fd16a 0 66%,#3b6cff 0);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.mc-views{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mc-view{margin:0}
.mc-view figcaption{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-light);margin-bottom:8px}
.mc-frame{border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/10;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.mc-frame svg{width:100%;height:100%;display:block}
.mc-frame.mono{outline:2px solid var(--ink);outline-offset:-2px}
.mc-frame svg *{transition:fill .35s}
.mc-cap{margin-top:16px;font-size:18px;font-weight:300;min-height:56px;max-width:62ch}
.mc-cap b{font-weight:500}
.mc-seq{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.mc-seq[hidden]{display:none}
.mc-seq > div{text-align:center}
.mc-seq small{display:block;font:11px var(--mono);color:var(--muted-on-light);margin-top:4px}
.mc-th{display:block;width:120px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#111;opacity:.25;transition:opacity .3s;box-shadow:0 0 0 1px var(--stone)}
.mc-th.on{opacity:1}
.mc-th svg{width:100%;height:100%;display:block}
.mc-eq{font-size:28px;font-weight:300;color:var(--muted-on-light)}
@media (max-width:1060px){.mc{grid-template-columns:1fr}.mc-side{position:static;display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}.mc-btns{margin-top:0}}
@media (max-width:640px){.mc-side{grid-template-columns:1fr}.mc-lamp{max-width:220px}.mc-views{grid-template-columns:1fr}.mc-th{width:68px}}

/* --- RGB in production: conveyor with colour per part (SVG built by lumisens.js) --- */
.rgbline{margin-top:56px;background:var(--night);color:var(--text-on-dark);border-radius:24px;padding:28px}
.rgbline .kicker{color:var(--green)}
.rl-head{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:flex-end}
.rl-head h3{font-size:clamp(22px,2.4vw,30px);color:var(--white);margin-top:6px}
.rl-head p{color:var(--muted-on-dark);margin-top:8px;max-width:62ch;font-size:15px}
.rl-mode{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--night-line)}
.rl-mode button{font:500 13px var(--font);padding:8px 14px;border-radius:999px;border:0;background:none;color:var(--muted-on-dark);cursor:pointer}
.rl-mode button[aria-pressed=true]{background:var(--green);color:var(--ink)}
.rl-stage{position:relative;margin-top:18px;background:#121410;border:1px solid var(--night-line);border-radius:16px;overflow:hidden}
#rl-svg{width:100%;height:auto;display:block}
#rl-svg .rl-belt{fill:#262923}
#rl-svg .rl-roll{fill:#3a3e33;stroke:#555a4c;stroke-width:2;stroke-dasharray:6 4}
#rl-svg .rl-box{fill:#1f221b;stroke:rgba(255,255,255,.18)}
#rl-svg .rl-ctrl{fill:#2a2b28;stroke:rgba(168,205,37,.5)}
#rl-svg .rl-t{font:500 15px var(--font);fill:var(--white)}
#rl-svg .rl-t.small{font:12px var(--mono);fill:var(--text-on-dark)}
#rl-svg .rl-s{font:11px var(--mono);fill:var(--muted-on-dark)}
#rl-svg .rl-s.light{fill:var(--text-on-dark)}
#rl-svg .rl-bus{fill:none;stroke:#59614a;stroke-width:2;stroke-dasharray:4 5}
#rl-svg .rl-bus.thin{stroke-width:1.5}
#rl-svg .rl-sensorbeam{stroke:#e5533d;stroke-width:1.5;stroke-dasharray:3 4;opacity:.7}
#rl-svg .rl-packet{fill:var(--green);filter:drop-shadow(0 0 6px var(--green));opacity:0}
#rl-svg .rl-lamp{transition:fill .25s;filter:drop-shadow(0 0 10px rgba(255,255,255,.4))}
#rl-svg .rl-cone{opacity:.16;transition:fill .25s}
#rl-svg .rl-cam{fill:#2a2b28;stroke:rgba(255,255,255,.25)}
#rl-svg .rl-lens{fill:#0b0b0b;stroke:var(--green);stroke-width:2}
#rl-svg .rl-print{fill:#111}
#rl-svg .rl-flash{fill:#fff;opacity:0}
#rl-svg .rl-flash.on{animation:rlflash .35s ease-out}
@keyframes rlflash{0%{opacity:.3}100%{opacity:0}}
.rl-shots{margin-top:16px}
.rl-shots small{display:block;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.rl-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;min-height:120px}
.rl-frame{margin:0;border-radius:10px;overflow:hidden;border:1px solid rgba(168,205,37,.45);background:#111;animation:rlin .4s var(--ease)}
.rl-frame.bad{border-color:rgba(229,83,61,.6)}
.rl-frame svg{width:100%;height:auto;display:block}
.rl-frame figcaption{display:flex;align-items:center;gap:6px;padding:6px 8px;font:11px var(--mono);color:var(--text-on-dark)}
.rl-frame figcaption i{width:9px;height:9px;border-radius:50%}
.rl-frame.bad figcaption{color:#f08a7a}
@keyframes rlin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rl-note{font-size:12px;color:var(--muted-on-dark);margin-top:12px}
@media (max-width:640px){.rgbline{padding:20px 14px}.rl-strip{grid-template-columns:repeat(3,1fr)}.rl-strip .rl-frame:nth-child(n+4){display:none}}

/* --- spectrum of standard wavelengths (SVG built by lumisens.js) --- */
.spec{margin-top:56px;background:var(--night);color:var(--text-on-dark);border-radius:24px;padding:28px 28px 20px}
.spec-head{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:flex-end}
.spec .kicker{color:var(--green)}
.spec h3{font-size:clamp(22px,2.4vw,30px);color:var(--white);margin-top:6px}
.spec-fam{display:flex;flex-wrap:wrap;gap:6px}
.spec-fam button{font:500 13px var(--font);padding:8px 13px;border-radius:999px;border:1px solid var(--night-line);background:rgba(255,255,255,.03);color:var(--muted-on-dark);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.spec-fam button:hover{color:var(--white);border-color:rgba(255,255,255,.3)}
.spec-fam button[aria-pressed=true]{background:var(--green);color:var(--ink);border-color:var(--green)}
.spec-chart{position:relative;margin-top:18px}
#spec-svg{width:100%;height:auto;display:block;overflow:visible}
#spec-svg .ax{stroke:rgba(255,255,255,.12)}
#spec-svg .tk{font:11px var(--mono);fill:var(--muted-on-dark)}
#spec-svg .zone{font:11px var(--mono);letter-spacing:.08em;fill:#6c7163}
#spec-svg .pk{transition:opacity .35s}
#spec-svg .pk.dim{opacity:.08}
#spec-svg .pk path{mix-blend-mode:screen}
#spec-svg .pk .hit{fill:transparent;cursor:pointer;mix-blend-mode:normal}
#spec-svg .pk text{font:11px var(--mono);fill:var(--text-on-dark)}
#spec-svg .pk.rgb text{fill:var(--white);font-weight:700}
#spec-svg .wht path{fill:url(#whiteGrad);opacity:1;fill-opacity:.3;stroke:rgba(255,255,255,.9);stroke-width:2;stroke-dasharray:none;mix-blend-mode:screen}
#spec-svg .wht text{font:11px var(--mono);fill:#fff;font-weight:700;paint-order:stroke;stroke:#0d0e0c;stroke-width:4px}
#spec-svg .wht.dim{opacity:.15}
.spec-tip{position:absolute;pointer-events:none;transform:translate(-50%,-110%);background:var(--white);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:13px;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.spec-tip b{font:700 14px var(--mono)}
.spec-note{font-size:12px;color:var(--muted-on-dark);margin-top:10px}
.spec-list{font-size:14px;color:var(--muted-on-dark);margin-top:8px}
.js .spec-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* text list for screen readers / no JS */
@media (max-width:640px){.spec{padding:20px 16px}}


/* ===== 14 Applications ===== */
/* --- use cases + showcase (12 synchronised cameras) --- */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.appc{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s var(--ease)}
.appc:hover{border-color:rgba(168,205,37,.35);transform:translateY(-2px)}
.appc h3{font-size:22px;color:var(--white);font-weight:400;margin:16px 0 10px}
.appc p{color:var(--muted-on-dark);font-size:15px;flex:1}
.appc .ico{width:44px;height:44px;border-radius:12px;background:rgba(168,205,37,.1);display:grid;place-items:center;color:var(--green)}
.appc .ico svg{width:24px;height:24px}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.facts span{font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:999px;background:rgba(168,205,37,.1);color:var(--green)}
.industries{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;align-items:center}
.industries small{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-dark);margin-right:6px}
.industries span{font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid var(--night-line);color:var(--text-on-dark)}
.showcase{margin-top:14px;border-radius:24px;overflow:hidden;background:radial-gradient(120% 140% at 100% 0%,rgba(168,205,37,.2),transparent 55%),#11130f;border:1px solid rgba(168,205,37,.3);display:grid;grid-template-columns:1.1fr .9fr}
.showcase-copy{padding:44px}
.flag{display:inline-flex;align-items:center;gap:8px;font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--green);border-radius:999px;padding:5px 12px}
.showcase h3{font-size:clamp(28px,3vw,40px);color:var(--white);margin:18px 0 14px}
.showcase p{color:var(--muted-on-dark)}
.sc-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 14px;margin-top:28px}
.sc-figs b{display:block;font-weight:300;font-size:30px;color:var(--white);letter-spacing:-.02em;line-height:1.1}
.sc-figs small{font:12px var(--mono);color:var(--muted-on-dark)}
.sc-visual{padding:28px;display:flex;align-items:center}
.sc-visual svg{width:100%;height:auto}
.sc-visual .belt{fill:#1b1e17}
.sc-visual .pnl{fill:#26301a;stroke:#3d4a24}
.sc-visual .cam-r{fill:#2a2e24;stroke:#4a5040;transition:fill .08s,stroke .08s}
.sc-visual .beam{fill:rgba(168,205,37,0);transition:fill .08s}
.sc-visual .rs{stroke:#59614a;stroke-width:2;fill:none;stroke-dasharray:3 5}
.sc-visual .lbl{font:11px var(--mono);fill:var(--muted-on-dark)}
#sc-cams.f .cam-r{fill:var(--green);stroke:var(--green)}
#sc-cams.f .beam{fill:rgba(168,205,37,.25)}
@media (max-width:1060px){.apps{grid-template-columns:1fr 1fr}.showcase{grid-template-columns:1fr}}
@media (max-width:640px){.apps{grid-template-columns:1fr}.showcase-copy{padding:28px}.sc-figs{grid-template-columns:1fr 1fr}}

/* --- synchronisation: PLC, camera and light (tabs, timing chart) --- */
.sy{background:var(--white);border:1px solid var(--stone);border-radius:24px;padding:24px}
.sy-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--paper);border-radius:14px;width:fit-content;max-width:100%}
.sy-tabs button{font:500 14px var(--font);border:0;background:none;color:var(--muted-on-light);padding:10px 16px;border-radius:10px;cursor:pointer}
.sy-tabs button[aria-selected=true]{background:var(--ink);color:var(--white)}
.sy-pane{margin-top:20px}
.sy-pane[hidden]{display:none}
.sy-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.sy-svg{width:100%;height:auto;display:block}
.sy-pane > .sy-svg{max-width:820px}
.sy-node rect{fill:var(--paper);stroke:var(--stone);stroke-width:1.5}
.sy-node.main rect{fill:#1f211c;stroke:#1f211c}
.sy-l{font:500 15px var(--font);fill:var(--ink)}
.sy-node.main .sy-l{fill:var(--white)}
.sy-s{font:12px var(--mono);fill:var(--muted-on-light)}
.sy-node.main .sy-s{fill:var(--green)}
.sy-w{fill:none;stroke:#b9b7b2;stroke-width:2}
.sy-sig{fill:none;stroke:var(--green-dark);stroke-width:3;stroke-dasharray:8 120;stroke-linecap:round;animation:sysig 2.2s linear infinite}
@keyframes sysig{from{stroke-dashoffset:128}to{stroke-dashoffset:0}}
html.reduce-motion .sy-sig{animation:none;stroke-dasharray:none;opacity:.5}
.sy-wl{font:12px var(--mono);fill:var(--green-dark)}
.sy-txt{margin-top:16px;font-size:15.5px;color:var(--muted-on-light);max-width:70ch}
.sy-tim{background:var(--night);border-radius:16px;padding:16px;color:var(--text-on-dark)}
#sy-chart{width:100%;height:auto;display:block}
#sy-chart .sy-g{stroke:rgba(255,255,255,.07)}
#sy-chart .sy-ax{font:11px var(--mono);fill:var(--muted-on-dark)}
#sy-chart .sy-lane{font:11px var(--mono);fill:var(--muted-on-dark)}
#sy-chart .sy-tr{fill:none;stroke:#8a8f80;stroke-width:1.6}
#sy-chart .sy-led{fill:none;stroke:var(--green);stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(168,205,37,.6))}
#sy-chart .sy-exp{fill:none;stroke:#7fa8ff;stroke-width:2}
#sy-chart .sy-win{fill:rgba(127,168,255,.1)}
#sy-chart .sy-dim{stroke:#7fa8ff;stroke-width:1;stroke-dasharray:3 3}
#sy-chart .sy-dt{font:10px var(--mono);fill:#7fa8ff}
.sy-ctrl{margin-top:10px}
.mini{margin-top:6px}
.mini label{display:flex;justify-content:space-between;color:#55574f}
.mini label b{font-family:var(--mono);font-weight:400;color:var(--ink)}
.mini input{width:100%;accent-color:var(--green-dark);margin:4px 0 6px}
.sy-ctrl .mini label{color:var(--muted-on-dark)}
.sy-ctrl .mini label b{color:var(--white)}
.sy-res{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 12px;padding-top:10px;border-top:1px solid var(--night-line);font-size:14px}
.sy-res strong{font:400 24px var(--mono)}
.sy-res strong.ok{color:var(--green)}.sy-res strong.warn{color:var(--warn)}.sy-res strong.bad{color:var(--bad)}
.sy-ctrl .btn{width:100%;justify-content:center;background:var(--green);color:var(--ink)}
.sy-hint{font-size:12px;color:var(--muted-on-dark);margin-top:10px}
.sy-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--stone)}
.sy-facts div{border-left:3px solid var(--green);padding-left:14px}
.sy-facts b{display:block;font:500 17px var(--font)}
.sy-facts span{font-size:14px;color:var(--muted-on-light)}
@media (max-width:1060px){.sy-grid{grid-template-columns:1fr}.sy-facts{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sy{padding:16px}.sy-facts{grid-template-columns:1fr}.sy-tabs button{padding:9px 10px;font-size:13px}}

/* --- process improvement: before / after cards --- */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ba{border:1px solid var(--stone);border-radius:var(--radius);overflow:hidden;background:var(--white);display:flex;flex-direction:column}
.ba header{padding:24px 26px 0}
.ba h3{font-size:24px;font-weight:500;letter-spacing:-.01em;margin-top:6px}
.ba-body{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-top:1px solid var(--stone);flex:1}
.ba-body > div{padding:18px 26px 24px;font-size:15px}
.ba-body > div+div{border-left:1px solid var(--stone);background:linear-gradient(180deg,rgba(168,205,37,.1),transparent)}
.ba-body small{display:block;font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;color:var(--muted-on-light)}
.ba-body > div+div small{color:var(--green-dark)}
.ba-body p{color:var(--muted-on-light)}
.ba-body > div+div p{color:var(--ink)}
@media (max-width:1060px){.ba-grid{grid-template-columns:1fr}}
@media (max-width:640px){.ba-body{grid-template-columns:1fr}.ba-body > div+div{border-left:0;border-top:1px solid var(--stone)}}

/* --- configuration: DCConfig app (real screenshots, IP-safe spotlight) --- */
.app{display:grid;grid-template-columns:.9fr 1.3fr;gap:48px;align-items:center}
.app-copy ul{margin:24px 0 0;padding:0;list-style:none}
.app-copy li{padding:12px 0 12px 28px;border-top:1px solid var(--night-line);position:relative;color:var(--muted-on-dark);font-size:15px}
.app-copy li b{color:var(--white);font-weight:500;display:block;font-size:16px}
.app-copy li::before{content:"";position:absolute;left:3px;top:19px;width:10px;height:10px;border-radius:3px;background:var(--green)}
.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.platforms span{font-family:var(--mono);font-size:12px;padding:6px 12px;border:1px solid var(--night-line);border-radius:999px;color:var(--text-on-dark)}
.spot{background:var(--night-2);border:1px solid var(--night-line);border-radius:20px;padding:14px;box-shadow:0 40px 100px -30px rgba(0,0,0,.85)}
.spot-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:4px;background:rgba(255,255,255,.04);border-radius:12px}
.spot-tabs button{font:500 14px var(--font);border:0;background:none;color:var(--muted-on-dark);padding:10px 14px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s}
.spot-tabs button:hover{color:var(--white)}
.spot-tabs button[aria-selected=true]{background:var(--green);color:var(--ink)}
.spot-pane{margin:14px 0 0}
.spot-pane[hidden]{display:none}
.spot-img{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:repeating-linear-gradient(135deg,#1b1e17 0 12px,#181a15 12px 24px);display:grid;place-items:center;text-align:center;color:var(--muted-on-dark);font:13px var(--mono);border:1px dashed rgba(168,205,37,.25)}
.spot-img img{width:100%;height:100%;object-fit:cover;display:block}
.spot-img small{color:#6c7163}
.spot-pane figcaption{margin-top:12px;color:var(--text-on-dark);font-size:15px;padding:0 4px}
/* live demo call to action below the screenshots */
.demo-cta{margin-top:16px;display:grid;grid-template-columns:auto 1fr auto;gap:16px 18px;align-items:center;padding:18px 20px;border-radius:18px;border:1px solid rgba(168,205,37,.55);background:linear-gradient(120deg,rgba(168,205,37,.16),rgba(168,205,37,.04) 60%);box-shadow:0 0 0 4px rgba(168,205,37,.06),0 20px 50px -30px rgba(168,205,37,.6)}
.demo-ico{width:48px;height:48px;border-radius:14px;background:var(--green);color:var(--ink);display:grid;place-items:center}
.demo-ico svg{width:26px;height:26px}
.demo-txt b{display:block;color:var(--white);font-weight:500;font-size:19px}
.demo-txt span{color:var(--muted-on-dark);font-size:14px}
.demo-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:1060px){.app{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.demo-cta{grid-template-columns:auto 1fr}.demo-btns{grid-column:1/-1}.demo-btns .btn{flex:1;justify-content:center}}


/* ===== 15 Business case ===== */
/* key figures */
.biz{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bizc{background:var(--white);border:1px solid var(--stone);border-radius:var(--radius);padding:26px}
.bizc .big{font-weight:300;font-size:52px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.bizc .big small{font-size:.4em;color:var(--green-dark);margin-left:3px;letter-spacing:0}
.bizc h3{font-size:18px;font-weight:500;letter-spacing:0;margin:14px 0 8px}
.bizc p{font-size:15px;color:var(--muted-on-light)}
/* "Where does your application gain?" (gains are defined in lumisens.js, sources in FAKTEN.md) */
.fit{margin-top:28px;background:var(--night);color:var(--text-on-dark);border-radius:24px;padding:32px}
.fit .kicker{color:var(--green)}
.fit .btn{white-space:normal;text-align:center;line-height:1.3}
.fit-head h3{font-size:clamp(24px,2.6vw,34px);color:var(--white);margin-top:8px}
.fit-head p{color:var(--muted-on-dark);margin-top:8px}
.fit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.fit-opts{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.fit-o{font:500 14px var(--font);text-align:left;padding:11px 14px 11px 38px;border-radius:12px;border:1px solid var(--night-line);background:rgba(255,255,255,.03);color:var(--text-on-dark);cursor:pointer;position:relative;transition:border-color .2s,background .2s}
.fit-o::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:5px;border:1.5px solid #6c7163}
.fit-o:hover{border-color:rgba(168,205,37,.5)}
.fit-o[aria-pressed=true]{border-color:var(--green);background:rgba(168,205,37,.1);color:var(--white)}
.fit-o[aria-pressed=true]::before{background:var(--green) url("../img/check.svg") center/11px no-repeat;border-color:var(--green)}
.fit-out{background:rgba(255,255,255,.03);border:1px solid var(--night-line);border-radius:18px;padding:20px 22px}
.fit-out small{display:block;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.fit-out ul{list-style:none;margin:0;padding:0}
.fit-base li{position:relative;padding:4px 0 4px 22px;font-size:14px;color:var(--text-on-dark)}
.fit-base li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.fit-gains{margin-top:18px;padding-top:16px;border-top:1px solid var(--night-line)}
.fit-gains li{padding:8px 0;border-bottom:1px dashed var(--night-line)}
.fit-gains li:last-child{border-bottom:0}
.fit-gains b{display:block;color:var(--white);font-weight:500;font-size:16px}
.fit-gains span{font-size:14px;color:var(--muted-on-dark)}
.fit-empty{font-size:14px;color:var(--muted-on-dark)}
.fit-cta{margin-top:18px;width:100%;justify-content:center}
.fit-save{margin-top:10px;width:100%;justify-content:center;gap:10px;background:transparent;color:var(--white);border:1px solid rgba(168,205,37,.45);font-family:var(--font)}
.fit-save:hover{background:rgba(168,205,37,.1);border-color:var(--green);color:var(--white)}
.fit-save svg{width:18px;height:18px;color:var(--green)}
.fit-save-s{font:12px var(--mono);opacity:.65;margin-left:6px}
/* "What else buyers value" */
.biz-list-h{margin-top:72px;font-size:clamp(22px,2.2vw,28px);font-weight:400}
.biz-list{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px}
.biz-list div{border-left:3px solid var(--green);padding:4px 0 4px 22px}
.biz-list b{display:block;font-weight:500;font-size:18px;margin-bottom:6px}
.biz-list span{display:block;font-size:15.5px;line-height:1.65;color:var(--muted-on-light)}
.biz-src{font-size:13px;color:var(--muted-on-light);margin-top:48px}
@media (max-width:1060px){
  .biz{grid-template-columns:1fr 1fr}
  .biz-list{grid-template-columns:1fr}
  .fit-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){.biz{grid-template-columns:1fr}.fit{padding:22px 16px}}


/* ===== 16 Products ===== */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod{border:1px solid var(--stone);border-radius:var(--radius);overflow:hidden;background:var(--white);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.prod:hover{transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(0,0,0,.35)}
.prod-img{aspect-ratio:16/10;background:linear-gradient(160deg,#f6f6f4,#e3e2de);display:grid;place-items:center;position:relative}
.prod-img span{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:11px var(--mono);color:#9b9e94}
.prod-img svg{width:62%;height:auto}
.prod-b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.prod-b h3{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-top:6px}
.prod-b p{font-size:15px;color:var(--muted-on-light);margin-top:8px;flex:1}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.specs span{font:12px var(--mono);padding:4px 9px;border-radius:999px;background:var(--paper);color:var(--graphite)}
.prod-a{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
/* comparison table: works with your lights / shines with ours */
.cmp{margin-top:64px;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.cmp h3{font-size:clamp(26px,2.6vw,34px)}
.cmp-copy p{margin-top:14px;color:var(--muted-on-light)}
.tbl{border-radius:var(--radius);overflow:hidden;border:1px solid var(--stone);background:var(--white)}
.cmp table{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--stone)}
.cmp th{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-light);background:var(--paper);font-weight:400}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:130px}
.cmp tr:last-child td{border-bottom:0}
.cmp th.ls-col{color:var(--green-dark)}
/* 3D product viewer (tools/3d/src/product3d.js -> lumisens-product3d.js) */
.prod-img.has-3d{cursor:grab;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#ffffff 0%,#e6e5e1 70%)}
.prod-img.has-3d:active{cursor:grabbing}
.prod-img.has-3d > svg{display:none}
.p3d-canvas{position:absolute;inset:0;display:block;touch-action:none}
/* still image of the model (tools/build.py stills): shown until the 3D model has rendered, fallback without WebGL, image for search engines */
.p3d-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity .5s}
.prod-img.p3d-ready .p3d-poster{opacity:0}
.p3d-spot{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:2px solid var(--white);background:var(--green-dark);color:var(--white);font:700 12px var(--font);cursor:pointer;box-shadow:0 0 0 4px rgba(95,149,46,.25),0 4px 12px rgba(0,0,0,.25);transition:opacity .2s,background .2s;z-index:2;padding:0}
.p3d-spot:hover,.p3d-spot.on{background:var(--ink)}
.p3d-spot.back{opacity:.25}                       /* hotspot on the far side of the model */
.p3d-spot.out{opacity:0;pointer-events:none}      /* zoomed in: hotspot outside the card */
.p3d-tip{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;background:rgba(13,14,12,.92);color:var(--text-on-dark);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45}
.p3d-tip b{display:block;color:var(--green);font-weight:500;font-size:14px}
.p3d-tip[hidden]{display:none}
.p3d-hint{position:absolute;left:0;right:0;top:10px;text-align:center;font:11px var(--mono);color:#7a7c74;pointer-events:none;transition:opacity .4s}
.prod-img.touched .p3d-hint{opacity:0}
.p3d-note{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:10px var(--mono);color:#9b9e94;pointer-events:none}
.p3d-tip:not([hidden]) ~ .p3d-note{display:none}
@media (max-width:1060px){.prods{grid-template-columns:1fr 1fr}.cmp{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){
  .prods{grid-template-columns:1fr}
  .cmp th,.cmp td{padding:11px 8px;font-size:14px}
  .cmp td:not(:first-child),.cmp th:not(:first-child){width:auto}
}


/* ===== 17 Academy ===== */
.academy{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.acad-cards{display:grid;gap:12px}
.acad{display:flex;gap:18px;padding:20px 22px;border:1px solid var(--night-line);border-radius:var(--radius);text-decoration:none;background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.acad:hover{border-color:rgba(168,205,37,.45);background:rgba(168,205,37,.04)}
.acad b{display:block;color:var(--white);font-weight:500;font-size:17px}
.acad span{color:var(--muted-on-dark);font-size:15px}
.acad .ar{margin-left:auto;align-self:center;color:var(--green);flex-shrink:0}
.acad .ar svg{width:20px;height:20px}
.quote{margin-top:28px;padding-left:20px;border-left:3px solid var(--green);color:var(--text-on-dark);font-weight:300;font-size:18px}
.quote small{display:block;margin-top:8px;font-size:13px;color:var(--muted-on-dark);font-weight:400}
/* further reading */
.reading{margin-top:64px}
.read-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.read{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;border:1px solid var(--night-line);text-decoration:none;background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.read:hover{border-color:rgba(168,205,37,.45);background:rgba(168,205,37,.04)}
.read small{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.read b{font-weight:500;color:var(--white);font-size:15px;line-height:1.4}
@media (max-width:1060px){.academy{grid-template-columns:1fr;gap:36px}.read-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.read-grid{grid-template-columns:1fr}}


/* ===== 18 FAQ (the FAQ is also exported as JSON-LD by tools/seo.py) ===== */
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--stone)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-size:19px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 22px;color:var(--muted-on-light);max-width:72ch}


/* ===== 19 Request form (prototype: nothing is sent yet, later the evotron watchlist backend) ===== */
.req{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.req h2{font-size:clamp(34px,4.4vw,56px);color:var(--white)}
.req > div > p{margin-top:18px;font-size:19px;font-weight:300;color:var(--muted-on-dark)}
.req-points{list-style:none;padding:0;margin:28px 0 0}
.req-points li{display:flex;gap:12px;padding:9px 0;color:var(--text-on-dark)}
.req-points li::before{content:"";flex:0 0 18px;height:18px;margin-top:3px;border-radius:50%;background:var(--green) url("../img/check.svg") center/12px no-repeat}
.req-contact{margin-top:28px;font-size:15px;color:var(--muted-on-dark)}
.req-contact a{color:var(--white);text-decoration:none}
.form{background:var(--white);color:var(--ink);border-radius:24px;padding:30px}
/* request type: test device / live demo / sample / quote */
.seg-ctl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--paper);padding:5px;border-radius:14px;border:0;margin:0}
.seg-ctl label{position:relative;cursor:pointer}
.seg-ctl input{position:absolute;opacity:0;pointer-events:none}
.seg-ctl span{display:block;text-align:center;padding:11px 6px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted-on-light);transition:background .2s,color .2s}
.seg-ctl input:checked+span{background:var(--ink);color:#fff}
.seg-ctl input:focus-visible+span{outline:2px solid var(--green-dark)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.fgrid .full{grid-column:1/-1}
.fld label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font:16px var(--font);padding:12px 14px;border-radius:12px;border:1px solid var(--stone);background:#fbfbfa;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(168,205,37,.3)}
.opt{font-weight:400;color:var(--muted-on-light);margin-left:4px}   /* "(optional)" next to a label */
.consent{display:flex;gap:10px;font-size:13px;color:var(--muted-on-light);margin-top:16px;align-items:flex-start}
.consent input{margin-top:3px;accent-color:var(--green-dark)}
.form .btn{margin-top:20px;width:100%;justify-content:center}
.proto-note{font-size:12px;color:var(--muted-on-light);margin-top:12px;text-align:center}
.form-ok{display:none;text-align:center;padding:48px 10px}
.form.sent .form-ok{display:block}
.form.sent .form-in{display:none}
.form-ok b{display:block;font-size:24px;font-weight:500;margin:14px 0 6px}
.form-ok p{color:var(--muted-on-light)}
.form-ok .yes{width:48px;height:48px;font-size:22px}
/* Contao form generator markup (templates in contao/templates/lumisens/): fieldset as grid, hidden helper texts, errors */
fieldset.fgrid{border:0;padding:0;margin:20px 0 0;min-width:0}
fieldset.fgrid > legend{display:none}
.form .invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fld label .mandatory{margin-left:2px}
.fld.widget-captcha .captcha_text{display:block;font-size:13px;color:var(--muted-on-light);margin-top:6px}
.form p.error{color:#b3261e;font-size:13px;margin:0 0 6px}
.form .error input,.form .error select,.form .error textarea,.fld input.error,.fld select.error,.fld textarea.error{border-color:#b3261e}
.consent.error span{color:#b3261e}
@media (max-width:1060px){.req{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}.form{padding:22px}.seg-ctl{grid-template-columns:1fr 1fr}}


/* ===== 20 Footer ===== */
.ls-footer{padding:56px 0 100px;font-size:14px;color:var(--muted-on-dark)}
.ls-footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
.ls-footer img{height:56px;width:auto}
.ls-footer a{color:var(--text-on-dark);text-decoration:none}
.ls-footer a:hover{color:var(--green)}
.ls-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.ls-legal{width:100%;font-size:12px;color:#6c7163;margin-top:8px}
.ls-motion-toggle{font:inherit;font-size:14px;color:var(--text-on-dark);background:none;border:1px solid var(--night-line);border-radius:999px;padding:4px 12px;cursor:pointer}
.ls-motion-toggle:hover{border-color:var(--green);color:var(--green)}


/* ===== 20b Narrow screens (phones and narrow browser windows): swipe rows instead of long stacks =====
   Groups of similar cards become one horizontal row with dots below and, for mouse users, arrow buttons
   (built by lumisens.js). Must stay after sections 11-19 so it overrides their stacked layout. */
.swipe-dots{display:none}
@media (max-width:1060px){
  .pains,.bento,.apps,.ba-grid,.biz,.biz-list,.prods{display:grid;grid-template-columns:none;grid-template-rows:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px - 12px) / 2.15);grid-auto-rows:auto;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:-16px;padding:2px 16px 6px;scroll-padding-inline:16px;scrollbar-width:none}
  .pains::-webkit-scrollbar,.bento::-webkit-scrollbar,.apps::-webkit-scrollbar,.ba-grid::-webkit-scrollbar,.biz::-webkit-scrollbar,.biz-list::-webkit-scrollbar,.prods::-webkit-scrollbar{display:none}
  .pains > *,.bento > *,.apps > *,.ba-grid > *,.biz > *,.biz-list > *,.prods > *{scroll-snap-align:start;grid-column:auto;grid-row:auto;min-width:0}
  .bento .tile:hover,.apps .appc:hover,.prods .prod:hover{transform:none}
  .biz-list > div{background:var(--white);border-radius:var(--radius-s);padding:18px 18px 18px 20px}
  .swipe-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:14px}
  .swipe-dots .sd{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:#c9c7c1;cursor:pointer;transition:width .25s var(--ease),background .25s}
  .ls-dark .swipe-dots .sd{background:rgba(255,255,255,.22)}
  .swipe-dots .sd.on{width:22px;background:var(--green-dark)}
  .ls-dark .swipe-dots .sd.on{background:var(--green)}
  /* arrow buttons for mouse and touchpad users */
  .swipe-dots .sa{display:none;width:36px;height:36px;margin:0 8px;padding:0;border-radius:50%;border:1px solid var(--stone);background:var(--white);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;transition:border-color .2s,opacity .2s}
  .swipe-dots .sa svg{width:16px;height:16px;display:block}
  .swipe-dots .sa:hover{border-color:var(--ink)}
  .swipe-dots .sa:disabled{opacity:.3;cursor:default}
  .ls-dark .swipe-dots .sa{background:rgba(255,255,255,.05);border-color:var(--night-line);color:var(--white)}
  .ls-dark .swipe-dots .sa:hover{border-color:var(--green)}
}
@media (max-width:1060px) and (hover:hover) and (pointer:fine){.swipe-dots .sa{display:inline-flex}}
@media (max-width:640px){
  .pains,.bento,.apps,.ba-grid,.biz,.biz-list,.prods{grid-auto-columns:86%}
}


/* ===== 21 Print ===== */
@media print{.ls-toc{display:none}}