/* Vitrini institutional landing — local styles on top of the token file */
@import url('../colors_and_type.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background-image: url('../assets/grain.svg'); opacity: .05; mix-blend-mode: multiply; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 860px){ .container { padding: 0 48px; } }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); }
.em { font-style: italic; color: var(--brand); }

/* section headings */
.h-section { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -.015em;
  color: var(--ink-2); margin: 0; text-wrap: balance; }

/* buttons */
.btn { font-family: var(--font-ui); font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px;
  border-radius: 999px; border: 0; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn-primary, a.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover, a.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--brand-700); color: #fff; }
.btn-ghost, a.btn-ghost { background: var(--paper); color: var(--brand-700); border: 1px solid var(--line); }
.btn-ghost:hover, a.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn svg { flex: none; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); }

.section { padding: clamp(12px, 1.6vw, 24px) 0 clamp(64px, 9vw, 128px); scroll-margin-top: 80px; }

.reveal { opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* meta checks row */
.meta-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 14px; color: var(--muted); }
.meta-row .chk { display: inline-flex; align-items: center; gap: 7px; }
.meta-row .chk svg { color: var(--brand); }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track, .levitate, .pulsering, .bob { animation: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 860px){
  .nav-links { display: none !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .bento, .grid-3 { grid-template-columns: 1fr !important; }
  .bento > *, .pricing > * { grid-column: auto !important; }
}
@media (min-width: 561px) and (max-width: 860px){
  .bento { grid-template-columns: 1fr 1fr !important; }
}