/* ==========================================================================
   GATE ecosystem — the relationship between the three experiences
   (Discover GATE · For Investors · Investor Cabinet). Labels describe the
   visitor's intent, not our site architecture. Shared by both public
   experiences. Token-driven, so light and dark both work.
   ========================================================================== */

/* --- header switch: Discover GATE | For Investors ------------------------- */
.eco-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-control-border);
  background: var(--c-control-bg);
  border-radius: var(--r-pill);
  flex: none;
}
.eco-switch__opt {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--t-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tr-normal);
  color: var(--c-text-muted);
  transition: color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.eco-switch__opt:hover { color: var(--c-text); }
.eco-switch__opt:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.eco-switch__opt[aria-current="page"] {
  background: var(--c-surface); color: var(--c-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 0 0 1px var(--c-border-strong);
}
.eco-switch__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.eco-switch__dot--ink { background: var(--c-text); }
.eco-switch__dot--violet { background: var(--c-accent); }
.eco-switch__opt[aria-current="page"] .eco-switch__dot--ink { background: var(--c-text); }
@media (max-width: 1365px) { .site-header .eco-switch { display: none; } }
@media (max-width: 860px)  { .lp-nav .eco-switch { display: none; } }

/* --- mobile sheet entry --------------------------------------------------- */
.sheet__eco {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-6); padding: var(--s-4);
  border: 1px solid var(--c-accent-border); background: var(--c-accent-soft);
  border-radius: var(--r-md); color: var(--c-text);
}
.sheet__eco strong { display: block; font-size: var(--t-sm); font-weight: var(--fw-semibold); }
.sheet__eco span { display: block; font-size: var(--t-2xs); color: var(--c-text-muted); }

/* --- footer ecosystem navigation ----------------------------------------- */
.eco-nav { padding-block: var(--s-10); border-top: 1px solid var(--c-border); margin-top: var(--s-10); display: grid; gap: var(--s-5); }
.eco-nav__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.eco-nav__title { font-size: var(--t-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); }
.eco-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.eco-nav__tile {
  display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-4); row-gap: 2px; align-items: center;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface);
  color: var(--c-text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.eco-nav__tile:hover { border-color: var(--c-border-strong); box-shadow: var(--e-2); transform: translateY(-1px); }
.eco-nav__tile--current { background: var(--c-accent-soft); border-color: var(--c-accent-border); }
.eco-nav__mark {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-sm); letter-spacing: var(--tr-display); color: #fff;
  box-shadow: var(--dim-material);
}
.eco-nav__mark--ink    { background: linear-gradient(155deg, #33375e 12.376%, #16182f 87.624%); }
.eco-nav__mark--violet { background: linear-gradient(169.6deg, #a8a6fa 12.376%, #6f6de6 53.762%, #5754d4 87.624%); }
.eco-nav__mark--blue   { background: linear-gradient(155deg, #7d94ff 12.376%, #3d5bfa 53.762%, #2740d0 87.624%); }
.eco-nav__name { font-size: var(--t-sm); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); }
.eco-nav__name .caps { font-size: 10px; color: var(--c-accent-text); }
.eco-nav__desc { font-size: var(--t-2xs); color: var(--c-text-muted); line-height: 1.4; }
@media (max-width: 900px) { .eco-nav__grid { grid-template-columns: 1fr; } }