/* v0.6.4 · alpha-channel artwork and viewport-safe responsive layout.
 * Original module links, texts and other pages are untouched. */
:root{--hab-ui: "Consolas","Liberation Mono","DejaVu Sans Mono",monospace}
html,body{max-width:100%;overflow-x:clip}
.header,main{width:min(1530px,calc(100% - clamp(26px,5vw,84px)))}
.header{min-height:64px;gap:clamp(10px,1.2vw,22px)}
.hero{min-height:clamp(206px,29dvh,288px);padding:2px 0 12px;
      grid-template-columns:minmax(0,1.65fr) minmax(220px,.8fr);gap:clamp(10px,2vw,26px)}
.hero h1{font-size:clamp(17px,1.82vw,29px);letter-spacing:.005em;line-height:1.35;overflow-wrap:normal}
.hero h1>span{white-space:normal}
.eyebrow{margin-bottom:clamp(12px,2.4vh,24px)}
.hero-visual{min-width:0;position:relative;min-height:0}
.hero-visual img{display:block;width:min(100%,clamp(210px,27vw,335px));max-height:clamp(185px,29dvh,290px);
   object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 0 8px rgba(57,240,198,.12))}
.hero-halo{display:none}
.modules{gap:clamp(10px,1vw,16px);align-items:stretch}
.module{min-height:0;overflow:hidden;border-radius:16px}
.module-visual{height:clamp(132px,21dvh,206px);padding:5px 6px 0;background:transparent;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.module-visual img{width:100%;height:100%;object-fit:contain;object-position:center;
  mix-blend-mode:normal;mask:none!important;-webkit-mask:none!important;
  filter:drop-shadow(0 0 6px rgba(44,218,182,.16))}
.module-visual::after{display:none}
.visual-signal{opacity:.20}
.module-copy{padding:3px clamp(12px,1.3vw,20px) 14px;gap:0;min-width:0}
.module-name{display:block!important;position:static!important;width:auto!important;height:auto!important;
 clip:auto!important;margin:0 0 4px!important;overflow:visible!important;white-space:normal!important;
 font-family:var(--hab-ui)!important;font-size:clamp(24px,2.3vw,34px);line-height:1.16;
 letter-spacing:.025em;font-weight:800}
.module-copy .fullname{font-size:clamp(11px,1vw,15px);line-height:1.35;min-height:2.3em;margin:0 0 3px}
.module-copy .tagline{font-size:clamp(11px,.91vw,13px);line-height:1.42;margin:0 0 10px}
.module-copy .go{min-height:43px;padding:9px 10px;margin-top:auto;font-size:clamp(12px,.97vw,14px);line-height:1.3}
.demo{margin:8px 0 0;font-size:9px;line-height:1.35}
@media (min-width:1000px) and (max-height:750px){
 .header{min-height:57px}
 .hero{min-height:clamp(178px,29dvh,222px);padding:0 0 7px}
 .hero-visual img{max-height:215px;width:min(100%,225px)}
 .eyebrow{margin-bottom:11px}
 .module-visual{height:clamp(104px,18dvh,142px)}
 .module-copy{padding-bottom:10px}
 .module-name{font-size:25px}
 .module-copy .fullname{font-size:11px;min-height:2.3em}
 .module-copy .go{min-height:40px}
}
@media (max-width:1099px){
 .header{flex-wrap:wrap;gap:10px;padding:9px 0}
 .header nav{margin-left:auto}
 .hero{grid-template-columns:minmax(0,1fr) minmax(195px,.55fr)}
 .hero h1{font-size:clamp(17px,2.3vw,27px)}
}
@media (max-width:850px){
 .header,main{width:calc(100% - 32px)}
 .hero{grid-template-columns:minmax(0,1fr) minmax(180px,.67fr);gap:10px;min-height:235px}
 .hero h1{font-size:clamp(17px,2.6vw,24px)}
 .hero-visual img{max-height:220px;width:100%}
 .modules{grid-template-columns:repeat(2,minmax(0,1fr))}
 .module-visual{height:clamp(138px,21vw,185px)}
 .module-name{font-size:28px}
}
@media (max-width:600px){
 .header,main{width:calc(100% - 28px)}
 .header{gap:10px;min-height:0}
 .brandzone{flex-wrap:wrap;gap:6px 12px}
 .header nav{order:3;width:100%;gap:8px;justify-content:space-between;margin:0}
 .lang{margin-left:auto}
 .hero{grid-template-columns:1fr;min-height:0;gap:0;padding:16px 0 10px}
 .hero h1{font-size:clamp(17px,4.4vw,24px);line-height:1.4}
 .hero-visual img{width:min(68vw,275px);max-height:240px;margin:auto}
 .eyebrow{font-size:11px;margin-bottom:13px}
 .modules{grid-template-columns:1fr;gap:12px}
 .module-visual{height:clamp(140px,47vw,240px)}
 .module-copy{padding:0 15px 15px}
 .module-name{font-size:clamp(26px,7vw,32px)}
 .module-copy .fullname{font-size:13px;min-height:0;margin:3px 0 6px}
 .module-copy .tagline{font-size:12px}
 .module-copy .go{min-height:46px}
}
@media (max-width:380px){
 .laboratory-name{width:auto;border-left:1px solid #60baa6;padding-left:10px;font-size:12px}
 .hero h1{font-size:clamp(16px,4.4vw,20px)}
 .header nav a{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
 .hero-visual img,.module-visual img,.visual-signal *{animation:none!important;transition:none!important}
}