/* ctrlPi site, bright startup design system.
   Mobile-first: base rules target small (iPhone) screens; the min-width
   blocks at the end restore the original tablet/desktop layout. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #2563eb;
  --emerald: #10b981;
  --cyan: #06b6d4;
  --violet: #8b5cf6;
  --amber: #f59e0b;
  --rose: #ec4899;
  --raspberry: #c51a4a;
  --ink: #0f172a;
  --slate: #475569;
  --muted: #94a3b8;
  --bg: #f8fafc;
  --card: #ffffff;
  --line: rgba(15, 23, 42, 0.08);
  --radius: 20px;
  --shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
  --shadow-lift: 0 16px 48px rgba(31, 38, 135, 0.14);
}

/* overflow-x: hidden - the hero glow blobs extend past the viewport edges
   by design; without this they make the whole page scroll sideways on phones */
html { scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 500px at 85% -5%, rgba(6, 182, 212, 0.10), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(16, 185, 129, 0.10), transparent 55%),
    radial-gradient(800px 600px at 55% 105%, rgba(139, 92, 246, 0.07), transparent 60%),
    var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; line-height: 1.15; }
code, pre { font-family: 'JetBrains Mono', monospace; }
a { color: var(--blue); text-decoration: none; }
img, svg { max-width: 100%; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 18px; }
.logo { display: flex; align-items: center; gap: 7px; margin-right: auto; }
/* Logo, all-blue wordmark, matching the webhook-watch page */
.logo .mark {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.5px; color: var(--blue);
}
.logo .mark .pi { color: var(--blue); }
.nav a.link { display: none; font-size: 0.9rem; font-weight: 600; color: var(--slate); transition: color 0.15s; }
.nav a.link:hover { color: var(--blue); }
.nav .gh, .cta-row .gh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #1e293b, var(--ink)); color: #fff; border-radius: 50%;
  transition: transform 0.12s, box-shadow 0.15s;
}
.nav .gh:hover, .cta-row .gh:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3); }
.nav .gh svg, .cta-row .gh svg { width: 18px; height: 18px; fill: currentColor; }
.nav .npmb, .cta-row .npmb { background: linear-gradient(135deg, var(--rose), #dc2626); }
.nav .npmb { margin-left: -6px; }
.nav .npmb:hover, .cta-row .npmb:hover { box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4); }


/* ── Hero ── */
.hero { padding: 44px 20px 48px; text-align: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 6px 16px; border-radius: 99px; margin-bottom: 26px;
}
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); font-weight: 800; margin: 0 auto 22px; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--blue) 10%, var(--cyan) 45%, var(--emerald) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { font-size: 1.05rem; color: var(--slate); margin: 0 auto 38px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.95rem; font-weight: 700; padding: 13px 26px; border-radius: 14px;
  transition: transform 0.12s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: linear-gradient(100deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); }
.btn.primary:hover { box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45); }
.hero .cta-row .btn {
  border-radius: 10px; padding: 14px 30px;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.hero .cta-row .btn.primary { background: transparent; color: #059669; border: 1.5px solid rgba(16, 185, 129, 0.45); box-shadow: none; }
.hero .cta-row .btn.ghost { background: transparent; color: var(--blue); border: 1.5px solid rgba(37, 99, 235, 0.4); box-shadow: none; }
.hero .cta-row .btn:hover { transform: translateY(-2px); }
.hero .cta-row .btn.primary:hover { background: rgba(16, 185, 129, 0.1); border-color: var(--emerald); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18); }
.hero .cta-row .btn.ghost:hover { background: rgba(37, 99, 235, 0.08); border-color: var(--blue); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow); transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, color 0.15s; }
.btn.ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ── Sections ── */
section { padding: 52px 0; }
.sec-head { text-align: center; margin: 0 auto 36px; }
.sec-head .kicker {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 12px; display: block;
}
.sec-head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 14px; }
.sec-head p { color: var(--slate); font-size: 1.05rem; }
.k-blue { color: var(--blue); } .k-green { color: #059669; } .k-cyan { color: #0891b2; }
.k-violet { color: var(--violet); } .k-amber { color: #d97706; } .k-rose { color: var(--rose); }

/* ── Cards ── */
.grid { display: grid; gap: 16px; }
.grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card .icon {
  width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card .icon svg, .doc-hero .icon svg {
  width: 55%; height: 55%; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon.i-blue { background: rgba(37, 99, 235, 0.12); color: var(--blue); }
.icon.i-green { background: rgba(16, 185, 129, 0.14); color: var(--emerald); }
.icon.i-cyan { background: rgba(6, 182, 212, 0.14); color: var(--cyan); }
.icon.i-violet { background: rgba(139, 92, 246, 0.13); color: var(--violet); }
.icon.i-amber { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
.icon.i-rose { background: rgba(236, 72, 153, 0.12); color: var(--rose); }
.card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.card h3 code { font-size: 0.95em; background: none; padding: 0; color: inherit; }
.card p { color: var(--slate); font-size: 0.92rem; flex: 1; }
.card .links { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.card .links a { font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.card .links a.more { margin-right: auto; }
/* Package cards: the whole card is a click target for the Overview link;
   the ext icons sit above the stretched overlay and stay clickable. */
#packages .card .links a.more::after { content: ''; position: absolute; inset: 0; }
#packages .card .links a.ext { position: relative; z-index: 1; }
.card .links a.ext { color: var(--slate); }
.card .links a.ext:hover { color: var(--ink); }
.card .links a.ext svg { width: 16px; height: 16px; fill: currentColor; }
/* npm icons match the nav's rose/red npm button */
.card .links a.ext[aria-label="npm"] { color: #dc2626; }
.card .links a.ext[aria-label="npm"]:hover { color: #b91c1c; }
.tag {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 99px; margin-bottom: 14px; width: fit-content;
}
.tag.t-agent { background: rgba(16, 185, 129, 0.13); color: #047857; }
.tag.t-bridge { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.tag.t-ai { background: rgba(236, 72, 153, 0.12); color: #be185d; }
.tag-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tag-row .tag { margin-bottom: 0; }
.tag.t-lang { margin-left: auto; background: var(--bg); color: var(--slate); border: 1px solid var(--line); }
.tag.t-soon { background: rgba(236, 72, 153, 0.12); color: #be185d; }
.tag.t-meta { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

/* ── How it works ── */
.flow {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 14px; box-shadow: var(--shadow);
}
/* The "How it works" schematic is a captured image that links to the full-size,
   frameless standalone page (/site-services/schematic). Scales to the container,
   never upscales past its natural width, no sideways scroll on phones. */
.flow .flow-img { display: block; max-width: 780px; margin: 0 auto; border-radius: 12px; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.flow .flow-img img { display: block; width: 100%; height: auto; }
.flow .flow-img:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.steps { counter-reset: step; margin-top: 28px; }
.step { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: none; }
.step .num {
  counter-increment: step; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--blue), var(--cyan)); color: #fff;
}
.step .num::before { content: counter(step); }
.step h4 { font-size: 1rem; margin-bottom: 4px; }
.step p { color: var(--slate); font-size: 0.92rem; }

/* ── Doc pages ── */
.doc-hero { padding: 44px 20px 32px; }
.crumb { font-size: 0.85rem; font-weight: 700; color: var(--slate); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; }
.crumb:hover { color: var(--blue); }
.doc-hero .title-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.doc-hero .icon { width: 52px; height: 52px; border-radius: 15px; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.doc-hero h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 800; overflow-wrap: anywhere; }
.doc-hero .tagline { color: var(--slate); font-size: 1rem; margin-top: 16px; }
.badges { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 700; padding: 5px 13px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line); color: var(--slate);
}
.badge svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Two-sided badges, the shape the project READMEs already use (shields.io: a neutral label
   on the left, a coloured value on the right). Same idea here so a package reads the same
   on GitHub and on the site. Corners are a small radius rather than the full 99px pill -
   a two-tone split reads as one object only if the halves meet squarely.
   Opt-in via .kv: a.badge.solid (the pinout and setup links) stays a round action pill. */
.badge.kv { padding: 0; border: 0; background: none; overflow: hidden; border-radius: 7px; align-items: stretch; gap: 0; }
.badge.kv .k, .badge.kv .v { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; }
.badge.kv .k { background: #5b6472; color: #fff; font-weight: 600; }
.badge.kv .v { background: var(--slate); color: #fff; font-weight: 700; }
.badge.kv .v.raspberry { background: var(--raspberry); }
.badge.kv .v.blue      { background: var(--blue); }
.badge.kv .v.emerald   { background: var(--emerald); }
.badge.kv .v.violet    { background: var(--violet); }
.badge.kv .v.amber     { background: var(--amber); }
.badge.kv .v.rose      { background: var(--rose); }
.badge.kv .v.cyan      { background: var(--cyan); }
.badge.kv svg { stroke: #fff; }
.badge b { color: var(--ink); }
/* Solid badge variants - filled background, white text/icon (matches the pinout pill) */
.badge.tint-emerald { background: var(--emerald); border-color: transparent; }
.badge.tint-blue    { background: var(--blue);    border-color: transparent; }
.badge.tint-violet  { background: var(--violet);  border-color: transparent; }
.badge.tint-amber   { background: var(--amber);   border-color: transparent; }
.badge.tint-rose    { background: var(--rose);    border-color: transparent; }
.badge.tint-emerald, .badge.tint-blue, .badge.tint-violet, .badge.tint-amber, .badge.tint-rose,
.badge.tint-emerald b, .badge.tint-blue b, .badge.tint-violet b, .badge.tint-amber b, .badge.tint-rose b {
  color: #fff;
}
/* Solid badge: badge-sized pill with a filled theme color (hero pinout links) */
a.badge.solid { background: var(--emerald); border-color: transparent; color: #fff; transition: filter 0.15s; }
a.badge.solid.cyan { background: var(--cyan); }
a.badge.solid.rose { background: var(--rose); }
a.badge.solid:hover { filter: brightness(0.92); }
.doc-hero .cta-row { justify-content: flex-start; margin-top: 26px; align-items: center; }
.btn.sm { padding: 10px 20px; font-size: 0.88rem; border-radius: 12px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.doc { padding: 8px 20px 56px; }
.doc h2 { font-size: 1.45rem; font-weight: 800; margin: 44px 0 16px; }
.doc h2:first-child { margin-top: 0; }
.doc p { color: var(--slate); margin-bottom: 14px; max-width: 780px; }
.doc p code, .doc li code, .doc td code {
  background: rgba(37, 99, 235, 0.08); color: #1d4ed8;
  padding: 1px 7px; border-radius: 6px; font-size: 0.86em;
}
.doc p code.chip-gray {
  background: rgba(15, 23, 42, 0.06); color: var(--slate);
}
.doc ul { color: var(--slate); margin: 0 0 14px 4px; list-style: none; }
.doc ul li { padding-left: 26px; position: relative; margin-bottom: 9px; }
.doc ul li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(120deg, var(--emerald), var(--cyan)); }
.doc pre {
  background: #0b1120; color: #e2e8f0; border-radius: 16px; padding: 16px;
  font-size: 0.84rem; line-height: 1.65; overflow-x: auto; margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.doc pre .cm { color: #64748b; }
.doc pre .k { color: #34d399; }
.doc pre .s { color: #7dd3fc; }
/* Copy-to-clipboard button overlaid on a .doc pre, wrapped in .code-block */
.code-block { position: relative; margin: 0 0 20px; }
.code-block pre { margin: 0; padding-right: 46px; }
.copy-btn {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.14); color: #e2e8f0; }
.copy-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-btn.copied { color: var(--emerald); border-color: rgba(16, 185, 129, 0.4); }
/* Github icon + pinout pill merged into the .badges row (instead of a separate .cta-row): smaller than the standalone hero/cta-row version */
.badges .gh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: linear-gradient(135deg, #1e293b, var(--ink));
  color: #fff; border-radius: 50%; transition: transform 0.15s, box-shadow 0.15s;
}
.badges .gh:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3); }
.badges .gh svg { width: 13px; height: 13px; fill: currentColor; }
/* Readme and pinout are the same round icon button as GitHub and npm, so a package page's
   badge row reads as one set of icons rather than two wide pills followed by two icons. The
   label moves to the tooltip. Both containers are covered because .badges is where the
   package pages put them and .cta-row is the larger hero variant.
   The svg override matters: .gh svg FILLS, and these two glyphs are drawn as strokes, so
   without it they render as solid blobs. */
.badges .rmb, .cta-row .rmb { background: linear-gradient(135deg, #64748b, #475569); }
.badges .rmb:hover, .cta-row .rmb:hover { box-shadow: 0 6px 18px rgba(71, 85, 105, 0.4); }
.badges .pinb, .cta-row .pinb { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.badges .pinb:hover, .cta-row .pinb:hover { box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4); }
.badges .rmb svg, .badges .pinb svg, .cta-row .rmb svg, .cta-row .pinb svg {
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* npm in a .badges row never got its red: the gradient was only ever scoped to .nav/.cta-row,
   so it inherited GitHub's dark one and the two icons were indistinguishable. */
.badges .npmb { background: linear-gradient(135deg, var(--rose), #dc2626); }
.badges .npmb:hover { box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); margin: 0 0 20px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.doc th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.doc td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.doc tr:last-child td { border-bottom: none; }
.doc td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.callout {
  display: flex; gap: 14px; background: rgba(6, 182, 212, 0.07);
  border: 1px solid rgba(6, 182, 212, 0.22); border-radius: 16px;
  padding: 14px 16px; margin: 0 0 20px; font-size: 0.92rem; color: var(--slate);
}
.callout .ico { flex-shrink: 0; color: var(--cyan); }
.callout .ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.callout b { color: var(--ink); }
.callout.warn { background: rgba(236, 72, 153, 0.08); border-color: rgba(236, 72, 153, 0.28); }
.callout.warn .ico { color: var(--rose); }

.chat-ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; margin-right: 4px; }

/* ── Pinout routes (/pinout/pi, /pinout/pico): index.html is the frame, JS
   swaps its own hero/sections for a full-height iframe of the raw pinout.
   The .pinout-route class is set synchronously in <head> to avoid a flash
   of the homepage content before the swap runs. ── */
.framewrap { display: none; height: calc(100vh - 64px); }
.framewrap iframe { display: block; width: 100%; height: 100%; border: 0; }
html.pinout-route body > header,
html.pinout-route body > section { display: none; }
html.pinout-route .framewrap { display: block; }

/* ── Motion & modern touches ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fade-1, .fade-2, .fade-3, .fade-4 { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-2 { animation-delay: 0.12s; }
.fade-3 { animation-delay: 0.24s; }
.fade-4 { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .fade-1, .fade-2, .fade-3, .fade-4 { animation: none; }
}
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald); animation: pulse 1.8s ease-in-out infinite; flex-shrink: 0;
}

/* Glow blobs behind the hero. On phones the hero spans the full viewport, so
   clip the blobs' horizontal bleed there - otherwise they widen the page. */
.hero { position: relative; overflow-x: clip; }
/* Painted as radial gradients rather than blurred circles. filter: blur(70px) put each
   blob on its own composited layer, expanded ~210px past its box, at z-index:-1 - directly
   under the sticky .nav's backdrop-filter, which has to re-sample whatever sits behind it.
   Two GPU filters reading the same region is what made this page flicker while the package
   pages, which have no blobs, stayed still. A gradient with a transparent falloff is the
   same soft glow with no filter and no extra layer.
   The boxes are grown to roughly the old blurred extent so the glow lands where it did. */
.hero .blob {
  position: absolute; z-index: -1; pointer-events: none;
}
.hero .blob.b1 {
  width: 800px; height: 800px; top: -270px; left: -330px;
  background: radial-gradient(closest-side, rgba(6, 182, 212, 0.18), rgba(6, 182, 212, 0) 100%);
}
.hero .blob.b2 {
  width: 740px; height: 740px; top: -170px; right: -310px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0) 100%);
}
.hero .blob.b3 {
  width: 680px; height: 680px; bottom: -330px; left: calc(38% - 210px);
  background: radial-gradient(closest-side, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0) 100%);
}

/* Hero terminal mock */
.term {
  margin: 40px auto 0; text-align: left;
  background: #0b1120; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.term .bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.term .bar i { width: 11px; height: 11px; border-radius: 50%; }
.term .bar i:nth-child(1) { background: #f87171; }
.term .bar i:nth-child(2) { background: #fbbf24; }
.term .bar i:nth-child(3) { background: #34d399; }
.term .bar span { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #64748b; }
.term pre {
  padding: 14px 16px; font-size: 0.74rem; line-height: 1.75; color: #e2e8f0;
  overflow-x: auto; font-family: 'JetBrains Mono', monospace;
}
.term .p { color: #34d399; }
.term .c { color: #7dd3fc; }
.term .d { color: #64748b; }

/* Card accent bar on hover */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--emerald));
  opacity: 0; transition: opacity 0.2s;
}
.card:hover::before { opacity: 1; }

/* ── Footer ── */
footer { border-top: 1px solid var(--line); padding: 44px 0 52px; margin-top: 40px; }
.foot { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.foot a, .foot span { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.foot a:hover { color: var(--blue); }
.foot .copy { width: 100%; font-size: 0.8rem; color: var(--muted); margin-top: 16px; text-align: center; }

/* ── ≥641px: two-column card grids ── */
@media (min-width: 641px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≥761px: original tablet/desktop spacing & full nav ── */
@media (min-width: 761px) {
  .wrap { padding: 0 24px; }
  .nav-inner { gap: 28px; padding: 0 28px; }
  .nav a.link { display: inline; }
  .nav .npmb { margin-left: -18px; }
  .hero { padding: 64px 24px; overflow-x: visible; }
  .hero .sub { font-size: 1.18rem; }
  .term { margin: 52px auto 0; }
  .term pre { padding: 18px 22px; font-size: 0.8rem; }
  section { padding: 72px 0; }
  .sec-head { margin-bottom: 48px; }
  .grid { gap: 22px; }
  .card { padding: 28px; }
  .flow { padding: 40px; }
  .steps { margin-top: 40px; }
  .doc-hero { padding: 64px 24px 40px; }
  .doc-hero .icon { width: 64px; height: 64px; border-radius: 18px; font-size: 1.9rem; }
  .doc-hero .tagline { font-size: 1.1rem; }
  .doc { padding: 8px 24px 72px; }
  .doc pre { padding: 20px 24px; }
  .doc th { padding: 12px 18px; }
  .doc td { padding: 11px 18px; }
  .callout { padding: 16px 20px; }
}

/* ── ≥901px: three-column card grid ── */
@media (min-width: 901px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Updates signup ("Stay in the loop") ── */
.subscribe { text-align: center; padding-bottom: 16px; }
.subscribe .kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; display: block; }
.subscribe h2 { font-size: 1.9rem; margin-bottom: 10px; }
.subscribe > .wrap > p { color: var(--slate); margin: 0 auto 24px; }
.subscribe-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 auto; }
.subscribe-form input[type="email"] {
  flex: 1 1 260px; min-width: 0; padding: 13px 18px; font-size: 0.98rem; font-family: inherit;
  color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}
.subscribe-form input[type="email"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
/* Honeypot: off-screen for humans, still "fillable" by naive bots. */
.subscribe-form input[name="website"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe-form .btn.primary { background: transparent; color: #059669; border: 1.5px solid rgba(16, 185, 129, 0.45); box-shadow: none; cursor: pointer; font-family: inherit; }
.subscribe-form .btn.primary:hover { background: rgba(16, 185, 129, 0.1); border-color: var(--emerald); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18); }
.subscribe-form .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.subscribe-msg { min-height: 1.4em; margin-top: 14px; font-size: 0.9rem; font-weight: 600; }
.subscribe-msg.ok { color: var(--emerald); }
.subscribe-msg.err { color: var(--rose); }

.brand-icon { display: block; width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; }

/* The tenth package occupies the middle column of the final desktop row. */
@media (min-width: 901px) {
  #packages .studio-card { grid-column: 2; }
}