/* Nepal AI Gateway — shared design language for the platform pages
   (account.html, docs.html). Adopts the landing's cinematic / liquid-glass /
   Instrument-Serif system on top of platform.css, tuned to keep forms and
   code blocks fully readable (dark glass fills, not transparent). */

:root {
  --glass-line: linear-gradient(
    180deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.12) 22%,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0) 58%,
    rgba(255,255,255,0.12) 78%,
    rgba(255,255,255,0.38) 100%
  );
}

/* Cinematic true-black field, matching the landing. */
body {
  background:
    radial-gradient(140% 90% at 50% -10%, #0c0e12 0%, #050608 55%, #000 100%) fixed;
}

/* --- Display typography: Instrument Serif where headings lead --- */
h1,
h2,
.docs-hero h1,
.metric-value,
#email {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
}
h1 { line-height: 1.03; }
h2 { line-height: 1.08; }
.docs-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.04; }
.section-title h2, main > section h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* Eyebrows stay the single warm accent (isolation effect). */
.eyebrow { color: var(--accent); }

/* --- Floating liquid-glass nav pill that scrolls away (no overlap) --- */
.site-header.shell {
  position: relative;
  margin: 14px auto 0;
  max-width: 1000px;
  width: calc(100% - 32px);
  min-height: 0;
  padding: 12px clamp(16px, 3vw, 26px);
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.028);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.10), 0 18px 40px -24px rgba(0,0,0,0.9);
}
.site-header.shell::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: var(--glass-line);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* --- Glass surface family for the platform's cards --- */
/* Dark translucent fill keeps forms, metrics and code legible. */
.auth-card,
.account-sidebar,
.account-section,
.metric-card,
.callout,
.model-table-wrap,
.docs-nav,
.error-item,
.trust-item {
  position: relative;
  border: none !important;
  background: rgba(255,255,255,0.022);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.07);
  overflow: hidden;
}
.auth-card::before,
.account-sidebar::before,
.account-section::before,
.metric-card::before,
.callout::before,
.model-table-wrap::before,
.docs-nav::before,
.error-item::before,
.trust-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: var(--glass-line);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
/* Keep inner content above the border mask. */
.auth-card > *, .account-section > *, .metric-card > *,
.callout > *, .docs-nav > *, .error-item > *, .trust-item > *,
.account-sidebar > * { position: relative; z-index: 1; }

/* Code blocks stay darker for contrast; glass border only. */
.code-block {
  border: none !important;
  background: rgba(0,0,0,0.4) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}

/* Gentle, consistent hover affordance on the metric/trust cards. */
.metric-card, .trust-item {
  transition: transform .2s ease, background .2s ease;
}
.metric-card:hover, .trust-item:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.045);
}