/* First-visit introduction, above the homepage hero. */
.home-intro{ background:#081326; color:#fff; }
.home-intro[hidden]{ display:none; }
.home-intro__header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px,3vw,48px);
}
.home-intro__header h2{ margin:0; color:#fff; font-size:clamp(16px,2vw,22px); line-height:1.3; }
.home-intro__skip{
  flex-shrink:0; padding:10px 18px;
  border:1px solid rgba(255,255,255,.5); border-radius:8px;
  background:transparent; color:#fff;
  font:600 15px/1.4 "IBM Plex Sans",sans-serif; cursor:pointer;
}
.home-intro__skip:hover{ background:rgba(255,255,255,.12); }
.home-intro__skip:focus-visible{ outline:3px solid var(--accent-bright); outline-offset:3px; }
.home-intro__media{ width:100%; max-width:1920px; margin-inline:auto; }
.home-intro video{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#081326; }
.home-intro video::-webkit-media-controls-overflow-button,
.arch__video video::-webkit-media-controls-overflow-button{ display:none; }

/* Product demo beside the architecture introduction, matching the reference. */
.arch__intro{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,4vw,56px);
  margin-bottom:clamp(36px,5vw,60px);
}
.arch__intro .arch__head{ max-width:none; margin-bottom:0; }
.arch__video{
  overflow:hidden; border:1px solid var(--hair); border-radius:16px;
  background:#081326; box-shadow:var(--shadow-md);
}
.arch__video video{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; }
@media (max-width:900px){ .arch__intro{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:480px){
  .home-intro__header{ gap:12px; padding:12px 16px; }
  .home-intro__skip{ padding:8px 10px; font-size:13px; }
}