/* ══════════════════════════════════════
   SECTIONS — commons
══════════════════════════════════════ */
.section {
  padding: 100px clamp(1.25rem,4vw,3rem);
  max-width: var(--max-w); margin: 0 auto;
}
.section-full  { padding: 100px clamp(1.25rem,4vw,3rem); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--purple); letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 12px;
}
.section-h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 800; letter-spacing: -2px;
  line-height: 1.05; color: var(--ink); margin-bottom: 16px;
}
.section-p {
  font-size: 17px; color: var(--slate);
  line-height: 1.75; max-width: 500px; font-weight: 400;
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(247,248,252,0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226,230,240,0.55);
  transition: background .3s, box-shadow .3s;
}
nav.scrolled {
  background: rgba(247,248,252,0.96);
  box-shadow: 0 1px 24px rgba(13,15,26,0.07);
}

.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 19px; letter-spacing: -0.5px;
}
.nav-logo-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-logo-icon svg { display: block; }
.nav-logo-icon-sm { width:28px; height:28px; border-radius:7px; }
.nav-logo-img    { width:32px; height:32px; border-radius:12px; display:block; flex-shrink:0; }
.nav-logo-img-sm { width:26px; height:26px; border-radius:10px; }
.nav-logo .z { color: var(--purple); }

.nav-links {
  display: flex; align-items: center; gap: 28px; list-style: none;
}
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--slate);
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1.5px; background:var(--purple);
  transition: width .25s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: var(--ink); color: var(--white);
  border: none; border-radius: var(--r8);
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  letter-spacing: -.2px; transition: background .2s, transform .15s;
}
.nav-cta:hover { background: var(--purple); transform: translateY(-1px); }

.nav-right { display: flex; align-items: center; gap: 20px; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 4px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 99px;
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; position: fixed;
  inset: var(--nav-h) 0 0;
  background: rgba(247,248,252,0.98);
  backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5rem; z-index:99;
  opacity:0; transform: translateY(-10px);
  transition: opacity .3s, transform .3s;
}
.nav-mobile.open { display:flex; opacity:1; transform:translateY(0); }
.nav-mobile a {
  font-size: 2rem; font-weight: 800; letter-spacing: -1px;
  color: var(--slate); transition: color .2s;
}
.nav-mobile a:hover { color: var(--purple); }
.nav-mobile .nav-cta { font-size: 1rem; padding: 12px 32px; }