/* ============================================================
   HOME — 3D solutions showcase (replaces the city map)
   List of the 15 solutions + large 3D render stage. Navy/amber
   per tokens.css; amber only as fills/markers on light grounds.
   ============================================================ */
.sc {
  display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: var(--sp-4); align-items: start;
}
.sc > * { min-inline-size: 0; }
.sc__list {
  list-style: none; margin: 0; padding: .5rem;
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-1);
  max-block-size: 34.5rem; overflow-y: auto; scrollbar-width: thin;
}
.sc__tab {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .75rem; border-radius: 12px;
  color: var(--text); text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.sc__num {
  flex: none; display: grid; place-items: center;
  inline-size: 2.3rem; block-size: 2.3rem; border-radius: 9px;
  background: rgba(40, 73, 144, .08); color: var(--navy);
  font: 700 var(--fs-sm)/1 var(--font-mono);
  transition: background-color .25s, color .25s;
}
.sc__txt { display: flex; flex-direction: column; min-inline-size: 0; }
.sc__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; }
.sc__venue { font-size: var(--fs-xs); color: var(--text-muted); }
.sc__tab:hover { background: rgba(40, 73, 144, .06); }
.sc__tab.is-active { background: var(--navy); color: #fff; }
.sc__tab.is-active .sc__num { background: var(--amber); color: var(--ink); }
.sc__tab.is-active .sc__venue { color: #c9d3e8; }
.sc__tab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.sc__stage {
  position: relative; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 10%, #fbf9f4 0%, #f2ede4 60%, #e9e2d3 100%);
  box-shadow: 0 30px 60px -30px rgba(14, 26, 51, .35);
}
.sc__panel { display: grid; grid-template-rows: auto auto; }
.sc__panel[hidden] { display: none; }
.sc__panel.is-active .sc__fig img { animation: sc-in .7s var(--ease) both; }
.sc__panel.is-active .sc__info > * { animation: sc-up .6s var(--ease) both; }
.sc__panel.is-active .sc__info > *:nth-child(2) { animation-delay: .06s; }
.sc__panel.is-active .sc__info > *:nth-child(3) { animation-delay: .12s; }
.sc__panel.is-active .sc__info > *:nth-child(4) { animation-delay: .18s; }
@keyframes sc-in { from { opacity: 0; transform: scale(.96) translateY(10px); } }
@keyframes sc-up { from { opacity: 0; transform: translateY(12px); } }
.sc__fig { margin: 0; padding: var(--sp-2) var(--sp-3) 0; }
.sc__fig img { display: block; inline-size: 100%; block-size: 23rem; object-fit: contain; }
.sc__info {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eye cta" "title cta" "fit cta";
  column-gap: var(--sp-3); align-items: end;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85) 30%);
}
.sc__eyebrow { grid-area: eye; display: flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.sc__badge { display: inline-grid; place-items: center; min-inline-size: 2rem; padding: .25em .5em; border-radius: 6px; background: var(--amber); color: var(--ink); font: 700 var(--fs-xs)/1 var(--font-mono); }
.sc__title { grid-area: title; margin: .25rem 0 .2rem; color: var(--navy); font-size: var(--fs-2xl); line-height: 1.15; }
.sc__fit { grid-area: fit; margin: 0; color: var(--text-muted); max-inline-size: 38rem; }
.sc__cta { grid-area: cta; align-self: end; white-space: nowrap; }

.sc__bar { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: rgba(40, 73, 144, .1); }
.sc__bar span { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(90deg, var(--amber), #f2c063); }
[dir="rtl"] .sc__bar span { margin-inline-start: 0; }
.sc__toggle {
  position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .9); color: var(--navy);
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.sc__toggle:hover { border-color: var(--navy); }
.sc__toggle-i { inline-size: .7rem; block-size: .7rem; position: relative; }
.sc__toggle[aria-pressed="true"] .sc__toggle-i { border-inline: 3px solid currentColor; inline-size: .62rem; }
.sc__toggle[aria-pressed="false"] .sc__toggle-i { border-block: .35rem solid transparent; border-inline-start: .6rem solid currentColor; inline-size: 0; block-size: 0; }
[dir="rtl"] .sc__toggle[aria-pressed="false"] .sc__toggle-i { transform: scaleX(-1); }
.no-js .sc__toggle, .no-js .sc__bar { display: none; }

@media (max-width: 899px) {
  .sc { grid-template-columns: 1fr; gap: var(--sp-2); }
  .sc__list {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; max-block-size: none;
    padding: .4rem; scroll-snap-type: x proximity;
  }
  .sc__list li { flex: none; scroll-snap-align: start; }
  .sc__tab { padding: .45rem .7rem; }
  .sc__venue { display: none; }
  .sc__name { white-space: nowrap; }
  .sc__info { grid-template-columns: 1fr; grid-template-areas: "eye" "title" "fit" "cta"; row-gap: .4rem; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .sc__cta { justify-self: start; margin-block-start: .4rem; }
  .sc__title { font-size: var(--fs-xl); }
  .sc__fig img { block-size: auto; max-block-size: 16rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sc__panel.is-active .sc__fig img, .sc__panel.is-active .sc__info > * { animation: none; }
  .sc__tab, .sc__num { transition: none; }
}