/* A dark, open network: parallel research areas around people and AI. */
.home-page .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
.ssq-home .home-page header#top .hero-title { font-size: clamp(36px, 3.2vw, 46px) !important; line-height: 1.2 !important; letter-spacing: -.02em; color: var(--fg); margin: 0 0 26px; }
.home-page header.home-hero .hero-intro { color: var(--fg-secondary); font-size: 18px; line-height: 1.75; max-width: 48ch; margin: 0 0 16px; }
.home-page header.home-hero .hero-detail { color: var(--fg-muted); font-size: 15px; line-height: 1.85; max-width: 53ch; margin: 0 0 32px; }
.home-page .hero-visual { max-width: 620px; }
.home-page .scene-core-areas { background: var(--ink-1000); color: var(--ink-50); border-color: var(--ink-800); }
.home-page .hero-visual .scene-core-areas, .home-page .story-stage.is-intro .scene-core-areas { background: transparent; border-color: transparent; }
.home-page .scene-core-areas .figure-art { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px; container-type: inline-size; }
.home-page .core-map { position: relative; width: 100%; aspect-ratio: 600 / 560; flex-shrink: 0; }
.home-page .core-map::before { content: ''; position: absolute; inset: 16% 12%; background: radial-gradient(ellipse, color-mix(in srgb, var(--cyan-glow) 7%, transparent), transparent 68%); pointer-events: none; }
.home-page .core-connections { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-page .core-area { position: absolute; padding: 2.2cqw; text-align: left; }
.home-page .core-area::before { content: ''; display: block; width: 22px; height: 1px; background: var(--cyan-600); margin-bottom: 10px; }
.home-page .core-area-name { display: block; font: 500 3.3cqw/1.2 var(--font-mono); color: var(--cyan-glow); letter-spacing: .07em; margin-bottom: 7px; }
.home-page .core-area-title { display: block; font: 500 2.25cqw/1.4 var(--font-sans); color: var(--ink-100); }
.home-page .core-area p { font: 400 2.15cqw/1.6 var(--font-sans); color: var(--ink-300); margin: 7px 0 0; word-break: normal; overflow-wrap: anywhere; }
.home-page[lang="ko"] .core-area p { word-break: keep-all; }
.home-page .core-collab { left: 33.333%; top: 2.143%; width: 33.333%; height: 25%; text-align: center; }
.home-page .core-collab::before { margin-inline: auto; }
.home-page .core-intel { left: 68.667%; top: 29.643%; width: 30.333%; height: 30%; }
.home-page .core-knowhow { left: 54%; top: 70.357%; width: 35%; height: 28%; }
.home-page .core-exploit { left: 11%; top: 70.357%; width: 35%; height: 28%; }
.home-page .core-agent { left: 1%; top: 29.643%; width: 30.333%; height: 30%; }
.home-page .core-users { position: absolute; left: 36%; top: 35%; width: 28%; height: 30%; color: var(--ink-50); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5cqw; text-align: center; }
.home-page .core-user-name { font: 500 3.5cqw/1.3 var(--font-mono); letter-spacing: .06em; }
.home-page .core-plus { display: block; color: var(--cyan-glow); margin-block: 5px; }
.home-page .core-map-caption { font: 400 10px/1.5 var(--font-mono); color: var(--ink-400); text-align: center; letter-spacing: .04em; }
@media (max-width: 1060px) {
  .home-page .hero-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ssq-home .home-page header#top .hero-title { font-size: clamp(28px, 7.4vw, 38px) !important; }
  .home-page header.home-hero .hero-intro { font-size: 17px; }
  .home-page .scene-core-areas { height: auto; aspect-ratio: auto; }
  .home-page .scene-core-areas .figure-art { padding: 18px 0; gap: 22px; }
  .home-page .core-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; aspect-ratio: auto; }
  .home-page .core-connections { display: none; }
  .home-page .core-users, .home-page .core-area { position: relative; inset: auto; width: auto; height: auto; padding: 0; }
  .home-page .core-users { grid-column: 1 / -1; padding: 30px 12px; margin-bottom: 6px; border-block: 1px solid var(--ink-800); background: radial-gradient(ellipse, color-mix(in srgb, var(--cyan-glow) 6%, transparent), transparent 70%); }
  .home-page .core-area { text-align: left; }
  .home-page .core-area::before { margin-inline: 0; }
  .home-page .core-user-name { font-size: 20px; }
  .home-page .core-plus { display: inline; margin-inline: 8px; }
  .home-page .core-area-name { font-size: 18px; }
  .home-page .core-area-title { font-size: 13px; }
  .home-page .core-area p { font-size: 12px; }
  .home-page .core-agent { grid-column: 1 / -1; }
}