/* ============================================================
   components.css  ·  navbar, footer, glass panels, shared UI
   ============================================================ */

/* ---------------- Navigation (floating, blurred) ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.5s var(--ease-soft), backdrop-filter 0.5s, border-color 0.5s, box-shadow 0.5s;
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
/* solidifies on scroll (JS adds .is-scrolled) */
.nav.is-scrolled {
  background: rgba(9, 13, 24, 0.62);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border-bottom-color: var(--glass-stroke);
  box-shadow: 0 10px 40px -24px rgba(0,0,0,0.8);
}
/* light nav variant for paper pages */
.nav--onlight.is-scrolled {
  background: rgba(251, 250, 247, 0.72);
  border-bottom-color: var(--glass-stroke-lt);
  box-shadow: var(--shadow-soft);
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.03em; color: #fff; }
.nav--onlight .brand { color: var(--slate-900); }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-brand);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px -6px rgba(47,107,255,0.7), inset 0 1px 0 rgba(255,255,255,0.5);
  flex: none;
}
.brand__mark svg { width: 17px; height: 17px; }
.brand b { font-weight: 800; }
.brand span { opacity: 0.62; font-weight: 500; }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__link {
  font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.72);
  position: relative; transition: color 0.3s; letter-spacing: -0.01em;
}
.nav--onlight .nav__link { color: var(--slate-600); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0;
  background: var(--grad-brand); transition: width 0.4s var(--ease-cine);
}
.nav__link:hover { color: #fff; }
.nav--onlight .nav__link:hover { color: var(--slate-900); }
.nav__link:hover::after { width: 100%; }

.nav__cta { display: flex; align-items: center; gap: 1.1rem; }
.nav__login { font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.82); }
.nav--onlight .nav__login { color: var(--slate-700); }

.nav__burger { display: none; width: 42px; height: 42px; border-radius: 12px; place-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); }
.nav__burger span { display: block; width: 18px; height: 2px; background: currentColor; color:#fff; position: relative; }
.nav__burger span::before, .nav__burger span::after { content:""; position:absolute; left:0; width:18px; height:2px; background: currentColor; transition: 0.3s; }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
.nav--onlight .nav__burger { color: var(--slate-900); background: rgba(15,23,42,0.05); border-color: var(--glass-stroke-lt); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; display: none;
  flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: 8vh var(--gutter) 4vh;
  background: rgba(8,11,20,0.9); backdrop-filter: blur(30px);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 600; color:#fff; padding: 0.35em 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu .btn { margin-top: 1.4rem; }

@media (max-width: 920px) {
  .nav__links, .nav__login { display: none; }
  .nav__burger { display: grid; }
}

/* ---------------- Glass panel primitive ---------------- */
.glass {
  background: var(--glass-dark);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-glass);
  position: relative;
}
.glass--light {
  background: var(--glass-light);
  border-color: var(--glass-stroke-lt);
  box-shadow: 0 24px 60px -30px rgba(15,23,42,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
}
/* subtle top edge light */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
  mix-blend-mode: screen;
}

/* ---------------- Footer (architectural fade) ---------------- */
.footer { position: relative; background: var(--ink); color: var(--slate-400); overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 120% at 15% -10%, rgba(47,107,255,0.14), transparent 60%),
    radial-gradient(70% 120% at 100% 0%, rgba(22,198,192,0.10), transparent 55%);
}
.footer__inner { position: relative; padding-block: clamp(4rem, 8vw, 6rem) 2.5rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem 2rem; }
.footer__brand .brand { margin-bottom: 1.1rem; }
.footer__blurb { max-width: 34ch; font-size: 0.95rem; line-height: 1.65; color: var(--slate-500); }
.footer__tag {
  margin-top: 1.3rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--slate-500);
}
.footer__col h4 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 1.1rem; }
.footer__col a { display: block; font-size: 0.95rem; color: var(--slate-300); padding: 0.32em 0; transition: color 0.3s, transform 0.3s; }
.footer__col a:hover { color: #fff; transform: translateX(3px); }
.footer__bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--slate-500);
}
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 780px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------------- Pills / chips ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.95em; border-radius: 100px;
  font-size: 0.82rem; font-weight: 500;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-300); box-shadow: 0 0 10px var(--teal-300); }
.pill--light { background: rgba(15,23,42,0.04); border-color: var(--glass-stroke-lt); color: var(--slate-600); }

/* section heading block */
.head { max-width: 60ch; }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { font-size: var(--fs-h2); margin-top: 1rem; }
.head .lead { margin-top: 1.2rem; }

/* generic card */
.card {
  border-radius: var(--radius); padding: clamp(1.6rem, 2.4vw, 2.3rem);
  position: relative; transition: transform 0.6s var(--ease-cine), box-shadow 0.6s var(--ease-cine), border-color 0.5s;
}
.card--paper { background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-soft); }
.card--paper:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -34px rgba(15,23,42,0.35); border-color: rgba(47,107,255,0.28); }