/* ==========================================================
   Humanex — fluid sizing overrides (enterprise / personal)
   Loaded AFTER the page's own <style>, so these win.
   ========================================================== */

html{ -webkit-text-size-adjust:100% }
body{ overflow-x:hidden }
img,svg,video{ max-width:100% }

/* ---------- page header (no longer sticky: the site bar is) ---------- */
.header{ position:relative !important; top:auto !important; z-index:5 !important }
.nav{
  max-width:min(1260px,100%);
  padding:clamp(10px,1.4vw,14px) clamp(14px,3vw,28px);
  gap:clamp(10px,1.6vw,18px);
  flex-wrap:wrap;
}
.nav-links{display:flex;flex-wrap:wrap;gap:clamp(4px,.8vw,10px)}
.nav-link{font-size:clamp(12px,1.05vw,14px)}
.nav-cta{font-size:clamp(12px,1.05vw,14px);padding:clamp(8px,1vw,11px) clamp(13px,1.5vw,19px)}

/* ---------- generic containers ---------- */
.container{ max-width:min(1260px,100%); padding-left:clamp(14px,3vw,28px); padding-right:clamp(14px,3vw,28px) }

/* ---------- hero ---------- */
.hero-wrap{
  max-width:min(1260px,100%);
  padding:clamp(28px,4.5vw,70px) clamp(14px,3vw,28px) clamp(28px,3.6vw,52px);
  gap:clamp(24px,3.4vw,52px);
}
.hero h1{ font-size:clamp(30px,5vw,56px); line-height:1.05 }
.hero-lead{ font-size:clamp(14px,1.25vw,17px) }
.hero-btns{ display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,12px) }
.hero-btns button{ font-size:clamp(12.5px,1.05vw,14px); padding:clamp(11px,1.2vw,14px) clamp(15px,1.8vw,23px) }
.eyebrow{ font-size:clamp(10px,.85vw,11.5px) }

/* ---------- hero constellation: fully fluid ---------- */
.hero-vis{ height:clamp(290px,40vw,430px); border-radius:clamp(18px,2vw,28px) }
.net{
  position:relative;
  width:min(340px, 74vw, 74vh);
  height:min(340px, 74vw, 74vh);
  transform:none !important;
}
.net-core{
  width:clamp(54px,17%,82px); height:clamp(54px,17%,82px);
  font-size:clamp(18px,4.4vw,26px);
}
.net-ring.r1{width:50%;height:50%}
.net-ring.r2{width:79.4%;height:79.4%}
.net-ring.r3{width:100%;height:100%}
/* node positions are set in % by the page, so they scale automatically */
.net-node{
  font-size:clamp(8.5px,1.05vw,10.5px);
  padding:clamp(5px,.7vw,7px) clamp(7px,1vw,11px);
  border-radius:clamp(8px,1vw,12px);
  max-width:46vw;
}

/* ---------- section typography ---------- */
.sec-title{ font-size:clamp(25px,3.6vw,42px); line-height:1.12 }
.sec-sub{ font-size:clamp(13.5px,1.15vw,16px) }
.sec-eye{ font-size:clamp(10px,.85vw,11.5px) }

/* ---------- simulator ---------- */
.sim-section{ padding-left:0; padding-right:0 }
.sim-hdr{ flex-wrap:wrap; gap:10px; padding:clamp(12px,1.5vw,18px) clamp(13px,1.8vw,22px) }
.sim-hdr-title{ font-size:clamp(13px,1.2vw,16px) }
.sim-body{ min-height:0 }
.cmd-input{ font-size:clamp(13px,1.1vw,15px); min-width:0 }
.chip{ font-size:clamp(10.5px,.95vw,12.5px) }
.log-line{ font-size:clamp(10.5px,.92vw,12px); word-break:break-word }
.ctx-item{ font-size:clamp(11px,.95vw,12.5px) }

/* ---------- grids ---------- */
.pillars-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(11px,1.3vw,16px) }
.use-panel{ grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(11px,1.2vw,14px) }
.trust-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(11px,1.3vw,16px) }
.use-card h4{ font-size:clamp(14px,1.15vw,16px) }
.use-card p,.pillar p,.trust-card p{ font-size:clamp(12.5px,1.02vw,14px) }

/* ---------- footer ---------- */
.footer-inner{ max-width:min(1260px,100%); padding-left:clamp(14px,3vw,28px); padding-right:clamp(14px,3vw,28px) }

/* ---------- animation modal ---------- */
.anim-modal-card{ max-width:min(1380px,100%); height:min(calc(100vh - 40px),100%) }
.anim-modal-iframe{ min-height:0 }

@media(max-width:640px){
  .net-node{ max-width:52vw }
  .hero-btns button{ flex:1 1 auto; justify-content:center }
}