/* Homepage-only composition: quiet monochrome surfaces alongside the existing brand. */
.hero { background: #fff; padding: 54px 0 64px; }
.hero-inner { display: flex; align-items: center; gap: 64px; min-height: 430px; }
.hero-copy { flex: 1 1 52%; width: auto; min-width: 0; }
.hero-workspace { flex: 0 1 47%; width: 47%; min-width: 0; max-width: 525px; position: relative; padding: 10px 0 14px; }
.workspace-panel { position: relative; z-index: 1; background: #fff; border: 1px solid #e1e2e8; border-radius: 18px; box-shadow: 0 18px 48px #24243b0b, 0 3px 10px #24243b03; overflow: hidden; }
.workspace-base { position: absolute; z-index: 0; bottom: 0; left: 18px; right: 18px; height: 40px; background: #f4f4f6; border: 1px solid #ebebef; border-radius: 16px; }
.workspace-topbar { min-height: 68px; padding: 15px 24px; border-bottom: 1px solid #eeeef1; display: flex; align-items: center; gap: 11px; }
.workspace-app-mark { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #e7e7ec; background: #f6f6f8; color: #353641; display: grid; place-items: center; border-radius: 9px; }
.workspace-name { font-family: var(--display); color: #25262f; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.workspace-name > span { font-family: var(--font); font-size: 12px; color: #777983; font-weight: 400; }
.workspace-preview { margin-left: auto; color: #6c6e78; border: 1px solid #e5e5ea; background: #fafafb; border-radius: 5px; padding: 4px 7px; font-size: 12px; white-space: nowrap; }
.workspace-intro { padding: 24px 24px 21px; }
.workspace-heading { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.workspace-heading > div { min-width: 0; }
.workspace-caption { color: #70727d; font-size: 12px; letter-spacing: .9px; font-weight: 500; }
.workspace-heading h2 { color: #2b2c36; font-size: 21px; font-weight: 600; letter-spacing: -.6px; line-height: 1.45; margin-top: 7px; }
.workspace-lock { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid #e5e5eb; color: #4e505c; border-radius: 14px; background: linear-gradient(145deg, #fdfdfd, #f2f2f5); }
.workspace-intro p { color: #7b7d88; font-size: 14px; line-height: 1.75; margin-top: 12px; max-width: 380px; }
.workspace-services { padding: 0 24px; }
.workspace-section-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #727480; padding-bottom: 10px; }
.workspace-section-label a { display: inline-flex; gap: 5px; align-items: center; color: #5d5f6b; }
.workspace-section-label a:hover { color: #22242f; }
.workspace-service { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #ececf0; border-radius: 9px; margin-bottom: 8px; background: #fcfcfd; transition: background .2s, border-color .2s; }
.workspace-service:hover { background: #f5f5f8; border-color: #d8d9e0; }
.workspace-service-icon { width: 33px; height: 33px; flex-shrink: 0; border-radius: 8px; background: #f0f0f3; color: #646672; display: grid; place-items: center; }
.workspace-service-name { min-width: 0; font-size: 14px; color: #3d3e49; font-weight: 500; line-height: 1.45; }
.workspace-service-name small { display: block; font-size: 12px; font-weight: 400; color: #777984; letter-spacing: .4px; margin-top: 3px; }
.workspace-service-arrow { margin-left: auto; color: #9b9da8; flex-shrink: 0; }
.workspace-empty { font-size: 13px; color: #858792; line-height: 1.8; padding: 18px 0; }
.workspace-networks { margin: 17px 24px 19px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.workspace-networks > span { font-size: 12px; color: #777984; }
.workspace-networks > div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.workspace-network { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e7e7ed; border-radius: 5px; padding: 4px 6px; color: #676977; font-size: 12px; background: #fff; }
.workspace-network .chain-icon { color: #666875; width: 16px; height: 16px; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; border-top: 1px solid #ededf1; padding: 13px 24px; background: #fafafb; }
.workspace-footer > span { display: inline-flex; align-items: center; gap: 6px; color: #727480; font-size: 12px; }
.workspace-footer a { display: inline-flex; align-items: center; gap: 6px; color: #343641; font-size: 13px; font-weight: 500; white-space: nowrap; }
.workspace-footer a:hover { color: #000; }

@media (max-width: 1100px) {
  .hero-inner { gap: 36px; }
  .hero-workspace { flex-basis: 48%; width: 48%; }
  .workspace-topbar, .workspace-footer { padding-left: 19px; padding-right: 19px; }
  .workspace-intro { padding-left: 19px; padding-right: 19px; }
  .workspace-services { padding-left: 19px; padding-right: 19px; }
  .workspace-networks { margin-left: 19px; margin-right: 19px; align-items: flex-start; }
  .workspace-networks > span { flex-shrink: 0; padding-top: 5px; }
  .workspace-heading h2 { font-size: 19px; }
  .workspace-lock { width: 42px; height: 42px; }
  .workspace-footer > span { max-width: 160px; }
}
@media (max-width: 820px) {
  .hero-inner { flex-direction: column; gap: 27px; align-items: stretch; }
  .hero-copy { width: 100%; flex: none; }
  .hero-workspace { width: 100%; flex: none; max-width: 550px; align-self: center; }
  .hero-copy > p { max-width: 540px; }
}
@media (max-width: 700px) {
  .hero { padding-top: 32px; padding-bottom: 36px; }
  .hero-inner { display: flex; min-height: 0; }
  .hero-workspace { padding-top: 0; }
  .workspace-topbar { min-height: 62px; padding: 13px 17px; gap: 8px; }
  .workspace-intro { padding: 20px 17px 18px; }
  .workspace-services { padding-left: 17px; padding-right: 17px; }
  .workspace-heading h2 { font-size: 20px; }
  .workspace-caption { font-size: 12px; letter-spacing: .5px; }
  .workspace-intro p { font-size: 14px; }
  .workspace-lock { width: 40px; height: 40px; border-radius: 11px; }
  .workspace-networks { margin-left: 17px; margin-right: 17px; flex-direction: column; gap: 9px; }
  .workspace-networks > div { justify-content: flex-start; }
  .workspace-network { font-size: 12px; padding: 5px 8px; }
  .workspace-service-name small { font-size: 12px; }
  .workspace-footer { padding-left: 17px; padding-right: 17px; }
  .workspace-footer > span { font-size: 12px; max-width: 145px; }
  .workspace-preview { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-service { transition: none; }
}