
:root{--navy:#021522;--ink:#eff7f8;--mint:#55efb9;--line:#238c91}
/* Brand laboratory button — outlined, rounded. */
.lab-button{
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--mint);border-radius:28px;
  padding:7px 22px;margin:14px 0 0;
  font-size:12px;font-weight:800;letter-spacing:.14em;
  color:var(--mint);background:transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  min-height:38px;white-space:nowrap;
}
.lab-button:hover,.lab-button:focus-visible{
  background:var(--mint);color:var(--navy);
  outline:none;box-shadow:0 0 0 3px rgba(85,239,185,.18);
}
@media(max-width:420px){
 .lab-button{font-size:11px;padding:6px 16px}
}
*{box-sizing:border-box}
html{background:var(--navy)}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 65% 19%,#073344 0%,#021725 45%,#02121d 100%);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.header,main{width:min(1530px,calc(100% - 90px));margin-inline:auto}
.header{min-height:75px;display:flex;align-items:center;gap:22px}
.brandzone{display:flex;align-items:center;gap:23px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:clamp(22px,2.13vw,34px);font-weight:900;letter-spacing:-.03em}
.brand img{width:45px;height:45px;object-fit:contain;filter:brightness(0) saturate(100%) invert(79%) sepia(38%) saturate(666%) hue-rotate(90deg) brightness(103%) contrast(94%)}
.brand b{color:var(--mint)}
.laboratory-name{border-left:1px solid #60baa6;margin:0;padding-left:24px;white-space:nowrap;font-size:clamp(14px,1.36vw,21px);font-weight:800;letter-spacing:.015em}
.header nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);margin-left:auto}
.header nav a{white-space:nowrap;font-size:clamp(11px,1.03vw,16px);font-weight:800}
.header nav a:hover{color:var(--mint)}
.lang{display:flex;border:1px solid #4e9f95;border-radius:9px;overflow:hidden;flex:none}
.lang button{background:transparent;border:0;color:#e7f6f5;font-size:12px;font-weight:800;padding:9px 12px}
.lang button[aria-pressed=true]{background:var(--mint);color:#041e1c}
main{padding-bottom:22px}
.hero{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,.82fr);gap:24px;min-height:335px;align-items:center;padding:10px 0 12px;position:relative}
.hero-copy{min-width:0}
.eyebrow{font-size:clamp(12px,1.23vw,18px);font-weight:800;letter-spacing:.06em;color:var(--mint);margin-bottom:52px;display:flex;gap:14px;align-items:center}
.eyebrow::before{content:"";width:43px;border-top:2px solid var(--mint);flex:none}
.hero h1{margin:0;font-size:clamp(18px,1.95vw,31px);line-height:1.27;letter-spacing:-.015em;font-weight:900}
.hero h1>span{display:block;white-space:nowrap}
.hero-visual{min-width:0;display:flex;align-items:center;justify-content:center}
.hero-visual img{display:block;width:min(100%,390px);height:auto;max-height:320px;object-fit:contain;mix-blend-mode:screen}
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:auto}
.module{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#061e2a,#03141f);align-items:stretch}
.module-visual{display:flex;align-items:center;justify-content:center;padding:14px 14px 0;background:radial-gradient(ellipse at center,#063540 0%,transparent 75%);flex:none}
.module-visual img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.module-copy{flex:1;display:flex;flex-direction:column;min-width:0;padding:8px 22px 16px;justify-content:center;align-items:center;text-align:center}
.module h2{margin:0 0 4px;font-size:clamp(27px,2.5vw,37px);line-height:1.06;font-weight:900}
.fullname{margin:0 0 8px;font-size:clamp(12px,1.16vw,17px);font-weight:800;line-height:1.25;color:var(--mint);text-transform:uppercase;overflow-wrap:break-word}
.tagline{margin:0 0 14px;font-size:clamp(12px,1.05vw,15px);line-height:1.35;color:#e9f0ef;overflow-wrap:break-word}
.go{margin-top:auto;min-height:48px;border-radius:9px;background:var(--mint);color:#041d1c;font-size:clamp(12px,1.05vw,15px);font-weight:900;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center}
.demo{font:10px monospace;letter-spacing:.04em;color:#94b9b7;margin:11px 0 0}
@media(max-width:1250px){
 .header,main{width:calc(100% - 48px)}
 .header{flex-wrap:wrap;gap:12px;padding:12px 0}
 .header nav{margin-left:0}
 .hero{grid-template-columns:minmax(0,1.55fr) minmax(0,.7fr)}
 .hero h1{font-size:clamp(17px,2.03vw,27px)}
}
@media(max-width:950px){
 .header,main{width:calc(100% - 36px)}
 .hero{grid-template-columns:1fr;gap:7px;min-height:0;padding:20px 0}
 .hero h1{font-size:clamp(18px,3.4vw,29px)}
 .hero h1>span{white-space:normal}
 .hero-visual img{width:min(100%,370px);max-height:300px}
 .modules{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .header,main{width:calc(100% - 28px)}
 .brandzone{gap:12px;flex-wrap:wrap}
 .brand{font-size:23px}
 .brand img{width:36px;height:36px}
 .laboratory-name{font-size:14px;padding-left:12px}
 .header nav{width:100%;justify-content:space-between;gap:7px}
 .header nav a{font-size:11px}
 .hero{padding:20px 0 12px}
 .eyebrow{font-size:11px;line-height:1.4;margin-bottom:32px}
 .hero h1{font-size:clamp(16px,4.2vw,22px);line-height:1.3}
 .modules{grid-template-columns:1fr;gap:12px;margin-top:auto}
 .module{min-height:0}
 .module-copy{padding:9px 18px 15px;justify-content:flex-start;align-items:flex-start;text-align:left}
 .module h2{font-size:30px}
 .fullname{font-size:14px}
 .tagline{font-size:13px}
 .go{font-size:14px}
}
@media(max-width:390px){.laboratory-name{width:100%;border-left:0;padding-left:0}.hero h1{font-size:clamp(16px,4.35vw,19px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v0.5.8 — identity typography and supplied illustration set. */
:root{--mint:#55efb9}
body{font-family:"Arial","Helvetica Neue",Helvetica,sans-serif}
.brand,.laboratory-name,.header nav a,.hero h1,.module h2,.fullname,.go{
  font-family:"Arial","Helvetica Neue",Helvetica,sans-serif;
  font-weight:900;
  font-synthesis:weight;
}
.hero h1{letter-spacing:.005em;line-height:1.28}
.hero h1>span{max-width:100%}
.module h2{letter-spacing:-.025em;line-height:1.12}
.fullname{letter-spacing:.02em;line-height:1.28}

/* v0.6.1 · monospace identity applied to the approved title layout. */
:root{--humenai-ui-font:"Consolas","Liberation Mono","DejaVu Sans Mono","Courier New",monospace}
body,button,input,a,.brand,.laboratory-name,.header nav a,.hero h1,.module h2,.fullname,.go {
 font-family:var(--humenai-ui-font) !important;
 font-kerning:normal;
 font-variant-ligatures:none;
}
.hero h1{font-weight:700;letter-spacing:.008em;line-height:1.36}
.module h2{letter-spacing:.025em;line-height:1.25;font-weight:700}
.fullname{letter-spacing:.015em;line-height:1.45}
.go{letter-spacing:0;line-height:1.35}

/* v0.6.3 — approved generated graphic artwork + quiet interface motion. */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.hero-visual{position:relative;isolation:isolate;overflow:visible}
.hero-visual img{
  position:relative;z-index:1;width:min(100%,390px);
  max-height:320px;height:auto;object-fit:contain;
  mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(52,245,185,.08));
  animation:hab-breathe 8s ease-in-out infinite;
}
.hero-halo{position:absolute;z-index:0;left:50%;top:50%;
 width:70%;aspect-ratio:1;transform:translate(-50%,-50%);
 border:1px solid rgba(83,239,188,.20);border-radius:50%;
 box-shadow:0 0 25px rgba(55,221,167,.10),inset 0 0 18px rgba(55,221,167,.08);
 animation:hab-halo 9s ease-in-out infinite;
}
.module-visual{
  position:relative;isolation:isolate;overflow:hidden;background:#031b27;
}
.module-visual img{
  width:100%;height:100%;display:block;object-fit:contain;object-position:center;
  filter:saturate(1.04);transition:transform .6s ease,filter .6s ease;
}
.module:hover .module-visual img{transform:scale(1.025);filter:saturate(1.15)}
.module-visual::after{
  content:"";pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 56%,rgba(2,20,31,.16) 100%);
}
.visual-signal{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;opacity:.46;
}
.visual-signal .trace{fill:none;stroke:rgba(75,245,201,.42);stroke-width:.8;
 stroke-dasharray:5 12;animation:hab-trace 15s linear infinite}
.visual-signal .signal-bead{fill:#aeffe1;filter:drop-shadow(0 0 4px #64ffca);
 animation:hab-bead 13s ease-in-out infinite alternate}
.module-copy{padding-top:11px}
.module-copy .fullname{margin-top:0}
@keyframes hab-trace{to{stroke-dashoffset:-170}}
@keyframes hab-bead{0%{transform:translate(0,0);opacity:.3}50%{opacity:1}100%{transform:translate(480px,-115px);opacity:.35}}
@keyframes hab-halo{
  0%,100%{opacity:.35;box-shadow:0 0 15px rgba(55,221,167,.07)}
  50%{opacity:.8;box-shadow:0 0 38px rgba(55,221,167,.16)}
}
@keyframes hab-breathe{0%,100%{opacity:.94}50%{opacity:1}}
@media (max-width:950px){.module-visual{height:188px}}
@media (max-width:600px){.module-visual{height:175px}}
@media (prefers-reduced-motion:reduce){
 .hero-visual img,.hero-halo,.visual-signal .trace,.visual-signal .signal-bead{animation:none!important}
 .module-visual img{transition:none!important}
 .module:hover .module-visual img{transform:none!important}
}
