/* ==========================================================================
   layout.css — page shell: nav bar, hero, section rhythm, stats band,
   footer, and the view-switching mechanism.
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

.view { display: none; }
.view.is-on { display: block; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  height: var(--nav-h); display: flex; align-items: center; gap: var(--s5);
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5);
}

.brand { display: flex; align-items: center; gap: 11px; background: none; border: none; padding: 0; }
.brand-glyph { width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; line-height: 1.1; }
.brand-sub { font-size: 11.5px; color: var(--ink-faint); line-height: 1.1; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: var(--s4); }
.nav-links button {
  background: none; border: none; padding: 9px 15px; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; font-family: var(--display); color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.nav-links button:hover { background: var(--page-2); color: var(--ink); }
.nav-links button.is-on { background: var(--ink); color: var(--page); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.lang-set { display: flex; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.lang-set button {
  border: none; background: var(--paper); color: var(--ink-soft);
  padding: 9px 14px; font-size: var(--t-xs); font-weight: 700; font-family: var(--display);
}
.lang-set button.is-on { background: var(--ink); color: var(--page); }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--paper); color: var(--ink-soft); display: grid; place-items: center;
  position: relative; transition: all .15s;
}
.icon-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.shelf-pip {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--coral); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--page);
}
.nav-burger { display: none; }

/* --------------------------------------------------------------------------
   Hero — the AI is the first thing on the page, not the last.
   -------------------------------------------------------------------------- */
.hero { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1000px 460px at 78% -8%, rgba(245,165,36,.20), transparent 62%),
              radial-gradient(760px 400px at 6% 104%, rgba(0,163,140,.20), transparent 60%);
}
.hero-in {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin: 0 auto; padding: var(--s8) var(--s5) var(--s9);
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--s7); align-items: center;
}
.hero .eyebrow { color: var(--night-soft); }
.hero .eyebrow::before { background: var(--marigold); }
.hero h1 { color: #fff; font-size: var(--t-3xl); font-weight: 800; margin: var(--s4) 0 var(--s4); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--marigold); }
.hero-sub { color: var(--night-soft); font-size: var(--t-md); max-width: 46ch; }
.hero-art { display: grid; place-items: center; gap: var(--s4); }

.hero-figs { display: flex; gap: var(--s5); margin-top: var(--s6); flex-wrap: wrap; }
.hero-fig strong {
  display: block; font-family: var(--display); font-size: var(--t-xl); font-weight: 800;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hero-fig span { font-size: var(--t-xs); color: var(--night-soft); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--s9) 0; }
.section-tight { padding: var(--s8) 0; }
.section-band { background: var(--page-2); }

/* Stats band on night */
.figures { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.figures-in {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s5); padding: var(--s7) var(--s5); max-width: var(--wrap); margin: 0 auto;
}
.figure { text-align: center; }
.figure strong {
  display: block; font-family: var(--display); font-weight: 800; font-size: var(--t-2xl);
  color: #fff; font-variant-numeric: tabular-nums;
}
.figure span { font-size: var(--t-sm); color: var(--night-soft); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--night); color: var(--night-soft); padding: var(--s8) 0 var(--s6); }
.footer-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6);
}
.footer h4 {
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--s3);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer li { font-size: var(--t-sm); }
.footer li button { background: none; border: none; padding: 0; color: var(--night-soft); font-size: var(--t-sm); }
.footer li button:hover { color: #fff; }
.footer-note {
  max-width: var(--wrap); margin: var(--s7) auto 0; padding: var(--s5) var(--s5) 0;
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-xs); line-height: 1.6;
}
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s3); color: #fff; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; padding: var(--s7) var(--s5) var(--s8); gap: var(--s6); }
  .hero-art { order: -1; max-width: 460px; }
  .footer-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s3);
    box-shadow: var(--shadow-md);
  }
  .nav-links.is-open { display: flex; }
  .nav-links button { text-align: left; padding: 13px 16px; border-radius: var(--r-sm); }
  .nav-burger { display: grid; }
  .figures-in { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s4); }
  .section, .section-tight { padding: var(--s7) 0; }
}
@media (max-width: 560px) {
  .wrap, .nav-in, .hero-in, .figures-in, .footer-in { padding-left: var(--s4); padding-right: var(--s4); }
  .footer-in { grid-template-columns: 1fr; gap: var(--s5); }
  .brand-sub { display: none; }
}