:root {
  --ink: #1d2b40;
  --muted: #6b778c;
  --blue: #4a90e2;
  --panel: rgba(255,255,255,0.85);
  --blur: blur(30px);
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(74,144,226,.15), transparent 60%),
    radial-gradient(600px 300px at 90% 20%, rgba(74,144,226,.12), transparent 55%),
    linear-gradient(180deg, #f6f9fc, #e9eef5);

  /* Mobile-safe viewport height to avoid resize loops */
  min-height: 100svh;
  min-height: 100vh;                  /* fallback */
  min-height: -webkit-fill-available; /* iOS fallback */

  overflow-x: hidden;
}

/* ───────── NAV (scoped) ───────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1.6rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(255,255,255,.85);

  /* Isolate and promote to its own layer for stability */
  contain: paint;
  will-change: backdrop-filter, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Use blurred backdrop only when supported (desktop and capable mobile) */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header {
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.site-header nav a {
  margin-left: 2rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  opacity: .85;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { opacity: 1; }

/* ───────── HERO / PAGE WRAPPERS ───────── */
.wrap {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem 4rem;
}

main.page {
  max-width: 1000px;
  width: 100%;
  background: var(--panel);
  backdrop-filter: var(--blur); /* will be disabled on mobile for stability */
  border-radius: 28px;
  padding: 3rem 2rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

.page-header > * + * { margin-top: .75rem; }

.page-header h1 {
  font-family: 'Merriweather', serif;
  font-size: 2.4rem;
  line-height: 1.25;
  margin: 0;
}

.lede { color: var(--muted); }

/* ───────── HOMEPAGE HERO ───────── */
.hero-wrap {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem 2rem;
}

.hero {
  position: relative;
  max-width: 1000px;
  width: 100%;
  background: var(--panel);
  backdrop-filter: var(--blur); /* will be disabled on mobile for stability */
  border-radius: 28px;
  padding: 6rem 4rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
}
.hero::before {
  width: 280px; height: 280px;
  background: rgba(74,144,226,.25);
  top: -120px; left: -120px;
}
.hero::after {
  width: 220px; height: 220px;
  background: rgba(74,144,226,.18);
  bottom: -100px; right: -100px;
}

.hero h1 {
  font-family: 'Merriweather', serif;
  font-size: 3rem;
  line-height: 1.25;
  margin-bottom: 3.5rem;
}

/* ───────── GRIDS / CARDS ───────── */
section { margin: 2.2rem 0; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }

.card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 16px;
  padding: 1.25rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);

  /* Defer paint until scrolled into view (helps big pages with code blocks) */
  content-visibility: auto;
  contain-intrinsic-size: 0 300px; /* reserve space to avoid jumps */
}

.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.grid.cols-3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }

@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

/* ───────── CODE ───────── */
pre, code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: .95rem;
}
pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 12px;
  overflow: auto;       /* local scroll; does not affect sticky header */
  border: 1px solid rgba(255,255,255,.1);
  max-width: 100%;
}
code.inline {
  background: rgba(0,0,0,.06);
  padding: .1rem .35rem;
  border-radius: 6px;
}

/* ───────── CTAS ───────── */
.ctas {
  display: flex;
  justify-content: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.3rem;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px); /* will be disabled on mobile */
  box-shadow: 0 10px 30px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.6);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.15);
}

/* ───────── TRUST / FOOTER ───────── */
.trust {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--muted);
  align-items: center;
}
.trust img, .trust svg { height: 28px; opacity: .85; }
.trust img[alt], .trust svg[aria-label] { opacity: .9; }

footer {
  padding: 4rem 2rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}
footer a { color: var(--muted); text-decoration: none; margin: 0 .5rem; }
footer a:hover { color: var(--ink); }

/* ───────── HOMEPAGE CTAs ───────── */
.ctas.home { justify-content: center; margin-bottom: 4rem; }

/* ───────── Accessibility helpers ───────── */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ───────── Mobile stability profile ───────── */
/* On mobile, disable heavy filters and large blurred blobs to avoid GPU thrash */
@media (max-width: 900px) {
  /* Make header lighter; you can also disable the blur completely if needed */
  .site-header {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,.7);
  }

  /* The key changes: turn off big translucent blurs on large containers */
  main.page {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.95); /* slightly more opaque to compensate */
  }

  .hero {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.95);
    padding: 4rem 2rem; /* keep your existing mobile padding */
  }

  .cta {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,.95);
  }

  /* Optional: remove giant blurred pseudo-elements behind the hero */
  .hero::before, .hero::after { display: none; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}