/* VinzaWeb — Public Theme · Precision Control Design */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip (not hidden) — clips horizontal overflow WITHOUT creating a
   scroll container, which would otherwise break the sticky navbar below. */
html { scroll-behavior: smooth; scroll-padding-top: 62px; overflow-x: clip; }

:root {
  /* Brand */
  --brand:       #0f6ed6;
  --brand-dark:  #0a56a8;
  --brand-light: #1a7fe8;
  --brand-pale:  #e8f2fd;
  --brand-glow:  rgba(15, 110, 214, 0.18);

  /* Dark surfaces */
  --dark:        #060d1a;
  --dark-2:      #0d1526;
  --dark-3:      #152038;
  --dark-border: rgba(255,255,255,0.08);
  --dark-muted:  #8899b4;

  /* Light surfaces */
  --bg:          hsl(216, 24%, 96%);
  --bg-card:     #ffffff;
  --bg-alt:      hsl(216, 20%, 93%);
  --border:      rgba(0, 0, 0, 0.08);
  --text:        hsl(220, 25%, 12%);
  --text-muted:  hsl(220, 12%, 48%);
  --success:     hsl(142, 60%, 34%);

  /* Radii & shadows */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.10);
}

body {
  font-family: 'Ubuntu', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;   /* see html rule — keeps .nav position:sticky working */
}

a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════════════ */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(3,7,16,0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 24px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 70px;
  transition: background 0.35s ease, box-shadow 0.35s ease,
              border-color 0.35s ease, height 0.3s ease, padding 0.3s ease;
}
.nav.nav-scrolled {
  height: 54px;
  background: rgba(1,4,10,0.985);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 2px 40px rgba(0,0,0,0.6);
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em;
  color: #fff;
  transition: font-size 0.3s ease;
}
.nav.nav-scrolled .nav-brand { font-size: 1.08rem; }

.nav-brand img {
  width: 32px; height: 32px; object-fit: contain; border-radius: 8px;
  transition: width 0.3s ease, height 0.3s ease;
}
.nav.nav-scrolled .nav-brand img { width: 26px; height: 26px; }

/* Shrink nav links slightly when scrolled — but NOT the dropdown items. They live inside
   .nav-links too, so without the :not() they'd shrink with the bar; excluding them keeps
   the user menu's padding steady whether the page is scrolled or not. */
.nav.nav-scrolled .nav-links a:not(.nav-drop-item),
.nav.nav-scrolled .nav-links .nav-dd-toggle { padding-top: 5px; padding-bottom: 5px; }

.nav-links { display: flex; align-items: center; gap: 2px; }

.nav-links a,
.nav-links .nav-dd-toggle {
  padding: 13px 14px; border-radius: 8px;
  font-size: 0.95rem; font-weight: 400;
  color: rgba(255,255,255,0.62); transition: all 0.15s;
}
/* The icon-only buttons keep their own size: they sit in a fixed 34px box, and
   letting them inherit the larger nav font would grow the glyph inside it. */
.nav-links a.nav-util { font-size: 0.875rem; }

/* :not(.nav-dd-foot) — the dropdown's CTA is a filled gradient button, not a plain
   nav link. This rule's `background` shorthand would wipe that gradient out and
   leave white text on a near-transparent panel, i.e. invisible. It owns its own
   hover state further down. */
.nav-links a:not(.nav-dd-foot):hover,
.nav-dd:hover .nav-dd-toggle,
.nav-dd:focus-within .nav-dd-toggle { color: #fff; background: rgba(255,255,255,0.08); }
.nav-links a.nav-link-active,
.nav-links .nav-dd-toggle.nav-link-active { color: #fff; font-weight: 700; }

/* ── "Why Vinza" dropdown (CSS-only: hover + focus-within for touch/keyboard) ── */
.nav-dd { position: relative; }
.nav-dd-toggle { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; }
.nav-dd-caret { font-size: 0.62rem; opacity: 0.65; transition: transform 0.15s; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  /* Centred on the toggle, not left-aligned to it. The X translate is part of the
     positioning, so the open/close animation below must carry it too — animating
     `transform` alone would snap the panel back to left:50%.
     Safe because "Why Vinza" sits 3rd in the bar and the panel only exists above
     1200px (below that the whole bar becomes the hamburger drawer); re-check the
     edges if the item is ever moved to either end of the nav. */
  position: absolute; top: 100%; left: 50%; margin-top: 10px;
  width: min(600px, 92vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.45); padding: 8px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s; z-index: 1200;
}
@media (max-width: 640px){ .nav-dd-menu { grid-template-columns: 1fr; width: min(340px, 92vw); } }
.nav-dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Header row (spans both columns) */
.nav-dd-head { grid-column: 1 / -1; padding: 6px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.nav-dd-eyebrow-lbl { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand, #0f6ed6); }
.nav-dd-tag { display: block; font-size: .82rem; color: var(--text-muted, #64748b); margin-top: 3px; }
/* Items */
.nav-dd-item {
  position: relative; display: flex !important; gap: 12px; align-items: center;
  padding: 12px 30px 12px 12px !important; border-radius: 11px; text-decoration: none; color: #0f172a !important;
  transition: background .15s;
}
.nav-dd-item:hover { background: var(--brand-pale, #e8f2fd); }
.nav-dd-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-pale, #e8f2fd); color: var(--brand, #0f6ed6); font-size: 1rem; transition: all 0.15s;
}
.nav-dd-item:hover .nav-dd-ico { background: var(--brand, #0f6ed6); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 65%, transparent); }
.nav-dd-tt { display: block; font-weight: 700; font-size: .9rem; line-height: 1.25; }
.nav-dd-dd { display: block; font-size: .77rem; color: var(--text-muted, #64748b); margin-top: 3px; line-height: 1.35; }
.nav-dd-chev {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%) translateX(-5px);
  color: var(--brand, #0f6ed6); font-size: .72rem; opacity: 0; transition: opacity .15s, transform .15s;
}
.nav-dd-item:hover .nav-dd-chev { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Footer CTA (spans both columns) */
.nav-dd-foot {
  grid-column: 1 / -1; margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-radius: 11px; text-decoration: none;
  background: linear-gradient(100deg, var(--brand,#0f6ed6), var(--brand-light,#1a7fe8)); color: #fff !important;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: background 0.15s, box-shadow 0.15s;
}
/* Deepen the gradient instead of overlaying a wash, so the white label keeps its
   contrast in both the dark and the light navbar. */
.nav-dd-foot:hover {
  background: linear-gradient(100deg, var(--brand-dark,#0a56a8), var(--brand,#0f6ed6));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand) 85%, transparent);
}
.nav-dd-foot .ft-t { font-weight: 800; font-size: .9rem; }
.nav-dd-foot .ft-s { font-size: .76rem; opacity: .85; display: block; margin-top: 1px; }
.nav-dd-foot .ft-go { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.18); transition: transform .15s; }
.nav-dd-foot:hover .ft-go { transform: translateX(3px); }

/* Inline active style (for backward compat) */
.nav-links a[style*="var(--brand)"] { color: var(--brand) !important; }

/* Secondary "utility" nav links (Releases, Docs) — smaller, outlined and subtler
   than the primary links so they read as a distinct group on the right. */
.nav-links a.nav-util {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}
.nav-links a.nav-util:hover {
  color: #fff;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
}
.nav-links a.nav-util.nav-link-active {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.26);
}
.nav-links a.nav-util i { font-size: 0.95rem; opacity: 0.9; }
.nav.nav-scrolled .nav-links a.nav-util { width: 30px; height: 30px; }
/* A little breathing room between the two icon buttons */
.nav-links a.nav-util + a.nav-util { margin-left: 4px; }

/* Thin vertical dividers that split the navbar into three tidy groups:
   primary links | utility pills | user menu. */
.nav-links .nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.12);
  margin: 0 10px;
  flex-shrink: 0;
  align-self: center;
}

/* Sign-in sits next to the brand button, so it must not compete with it: no
   background, no border, just a slightly firmer weight than a nav link. Colour
   comes from .nav-links a, which each nav theme already sets. */

.btn-nav {
  background: var(--brand) !important;
  color: white !important;
  padding: 8px 18px; border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 2px 10px var(--brand-glow);
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}

.btn-nav:hover {
  background: var(--brand-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px var(--brand-glow);
}

/* Nav user dropdown */
.nav-user-wrap {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; user-select: none;
  font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85);
  transition: all 0.15s;
}
.nav-user-wrap:hover { background: rgba(255,255,255,0.15); }
.nav-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.nav-user-drop {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,0.15);
  overflow: hidden; z-index: 200;
}
.nav-user-wrap.open .nav-user-drop { display: block; }
.nav-drop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; font-size: 0.84rem; font-weight: 500;
  text-decoration: none; transition: background 0.12s;
}
/* Override .nav-links a white color for dropdown items */
.nav-user-drop .nav-drop-item { color: var(--text); }
.nav-user-drop .nav-drop-item:hover { background: var(--brand-pale); color: var(--brand); }
.nav-drop-item i { width: 14px; color: var(--brand); opacity: 0.8; }
.nav-drop-sep { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Mobile hamburger button */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Mobile nav overlay */
.nav-mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index: 1001;   /* above the language FAB (z:1000) so it never pokes through */
}
.nav-mobile-overlay.open { display: block; }

/* Mobile nav drawer */
.nav-mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  background: #0d1526;
  border-left: 1px solid rgba(255,255,255,0.08);
  z-index: 1002;   /* above the overlay (1001) and the language FAB (1000) */
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.nav-mobile-drawer.open { transform: translateX(0); }

.nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-mobile-close {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7); border-radius: 7px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; transition: all 0.15s;
}
.nav-mobile-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.nav-mobile-links {
  display: flex; flex-direction: column;
  padding: 12px 12px;
  gap: 2px;
  flex: 1;
}
.nav-mobile-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.68);
  text-decoration: none; transition: all 0.15s;
}
.nav-mobile-link i { width: 16px; text-align: center; }
.nav-mobile-link:hover, .nav-mobile-link.active {
  background: rgba(15,110,214,0.18); color: #fff;
}
.nav-mobile-link-danger { color: rgba(239,68,68,0.8); }
.nav-mobile-link-danger:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
/* The drawer's language rows are <button>s inside a POST form (set_language needs one),
   so they must be talked out of looking like buttons — the class alone styles an <a>. */
.nav-mobile-lang { display: flex; flex-direction: column; gap: 2px; }
.nav-mobile-lang .nav-mobile-link {
  /* Reset native <button> chrome (the light "Indonesia" box / bevel some mobile
     browsers draw) so these read as plain rows exactly like the <a> links above. */
  -webkit-appearance: none; appearance: none;
  width: 100%; text-align: left; background: none; border: 0; box-shadow: none;
  color: rgba(255,255,255,0.68);
  font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
/* ── Collapsible group in the drawer (<details>) ──────────────────────────────
   The summary reuses .nav-mobile-link so it sits flush with the rows around it; only
   the marker and the caret are added here. */
.nav-mobile-group { border-radius: 9px; }
.nav-mobile-sum { cursor: pointer; list-style: none; user-select: none; }
/* Both spellings are needed: WebKit still draws the disclosure triangle through its
   own pseudo-element and ignores `list-style` on the summary. */
.nav-mobile-sum::-webkit-details-marker { display: none; }
.nav-mobile-sum::marker { content: ""; }
.nav-mobile-sum > span { flex: 1; }
.nav-mobile-caret {
  font-size: 0.72rem; opacity: 0.6;
  transition: transform 0.2s ease;
}
.nav-mobile-group[open] .nav-mobile-caret { transform: rotate(180deg); }
.nav-mobile-group[open] > .nav-mobile-sum { color: #fff; }
/* Children sit under a rail so the nesting is visible without indenting them so far
   that the labels start wrapping on a narrow phone. */
.nav-mobile-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 6px 20px; padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.nav-mobile-sub .nav-mobile-link { padding: 9px 12px; font-size: 0.86rem; }
@media (prefers-reduced-motion: reduce) { .nav-mobile-caret { transition: none; } }

.nav-mobile-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 8px 0; }
.nav-mobile-link-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 8px 0; padding: 12px;
  background: var(--brand); color: #fff;
  border-radius: 10px; font-size: 0.9rem; font-weight: 700;
  text-decoration: none; transition: all 0.15s;
  box-shadow: 0 3px 12px var(--brand-glow);
}
.nav-mobile-link-cta:hover { background: var(--brand-dark); }

/* ── Light navbar variant (SiteSettings → Navbar Theme = Light, the default) ────
   Everything above styles the DARK bar; these overrides flip it to a light, blurred
   bar that sits cleanly under a light hero. The brand CTA (.btn-nav) is already
   brand-filled with !important, so it needs no variant. */
.nav.nav-light {
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 18px rgba(15,23,42,0.06);
}
.nav.nav-light.nav-scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 22px rgba(15,23,42,0.10);
}
.nav.nav-light .nav-brand { color: var(--text); }
.nav.nav-light .nav-links a,
.nav.nav-light .nav-links .nav-dd-toggle { color: var(--text-muted); }
.nav.nav-light .nav-links a:not(.nav-dd-foot):hover,
.nav.nav-light .nav-dd:hover .nav-dd-toggle,
.nav.nav-light .nav-dd:focus-within .nav-dd-toggle { color: var(--text); background: rgba(15,23,42,0.06); }
.nav.nav-light .nav-links a.nav-link-active,
.nav.nav-light .nav-links .nav-dd-toggle.nav-link-active { color: var(--text); }
.nav.nav-light .nav-links a.nav-util { color: var(--text-muted); border-color: var(--border); }
.nav.nav-light .nav-links a.nav-util:hover,
.nav.nav-light .nav-links a.nav-util.nav-link-active {
  color: var(--brand); background: var(--brand-pale); border-color: rgba(15,110,214,0.30);
}
.nav.nav-light .nav-links .nav-sep { background: var(--border); }
.nav.nav-light .nav-user-wrap {
  background: rgba(15,23,42,0.05); border-color: var(--border); color: var(--text);
}
.nav.nav-light .nav-user-wrap:hover { background: rgba(15,23,42,0.09); }
.nav.nav-light .nav-hamburger { color: var(--text); border-color: var(--border); }
.nav.nav-light .nav-hamburger:hover { background: rgba(15,23,42,0.07); color: var(--text); }

/* Light mobile drawer — it is a SIBLING of .nav, so it carries the theme class itself. */
.nav-mobile-drawer.nav-light { background: var(--bg-card); border-left: 1px solid var(--border); }
.nav-mobile-drawer.nav-light .nav-mobile-header { border-bottom-color: var(--border); color: var(--text); }
.nav-mobile-drawer.nav-light .nav-mobile-close {
  background: rgba(15,23,42,0.05); border-color: var(--border); color: var(--text-muted);
}
.nav-mobile-drawer.nav-light .nav-mobile-close:hover { background: rgba(15,23,42,0.10); color: var(--text); }
.nav-mobile-drawer.nav-light .nav-mobile-link,
.nav-mobile-drawer.nav-light .nav-mobile-lang .nav-mobile-link { color: var(--text-muted); }
.nav-mobile-drawer.nav-light .nav-mobile-link:hover,
.nav-mobile-drawer.nav-light .nav-mobile-link.active { background: var(--brand-pale); color: var(--brand); }
.nav-mobile-drawer.nav-light .nav-mobile-link-danger { color: #dc2626; }
.nav-mobile-drawer.nav-light .nav-mobile-link-danger:hover { background: rgba(239,68,68,0.10); color: #b91c1c; }
.nav-mobile-drawer.nav-light .nav-mobile-divider { border-top-color: var(--border); }
/* The rail and the open-summary colour are set in white for the dark bar; on the light
   drawer white-on-white is simply invisible. */
.nav-mobile-drawer.nav-light .nav-mobile-sub { border-left-color: var(--border); }
.nav-mobile-drawer.nav-light .nav-mobile-group[open] > .nav-mobile-sum { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   SCROLL TO TOP (fixed bottom-right, above the lang FAB)
══════════════════════════════════════════════════════════════ */

.to-top {
  position: fixed; right: 28px; bottom: 86px;   /* clears .lang-fab (28px + 46px + gap) */
  z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text);
  font-size: 0.95rem; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,0.16);
  /* Hidden by default and driven by a class rather than by JS writing inline styles,
     so the whole appearance stays in the stylesheet. `visibility` (not display) keeps
     the fade — a display:none element cannot transition. */
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.9);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* The lang globe is dropped below 768px, so the button takes the corner it vacates. */
@media (max-width: 768px) {
  .to-top { right: 18px; bottom: 18px; width: 40px; height: 40px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .2s ease, visibility .2s; transform: none; }
  .to-top.show, .to-top:hover { transform: none; }
}

/* The cslabs live-chat bubble owns the corner (58px at right/bottom 20px): the
   globe and the scroll button stack above it instead of under it. */
body.has-live-chat .lang-fab { bottom: 92px; }
body.has-live-chat .to-top { bottom: 150px; }
@media (max-width: 768px) {
  body.has-live-chat .to-top { bottom: 90px; }
}

/* ═══════════════════════════════════════════════════════════════
   LANG FAB (fixed bottom-right)
══════════════════════════════════════════════════════════════ */

.lang-fab {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}

.lang-fab-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fff;
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(15,110,214,0.45);
  font-size: 1.05rem; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lang-fab-btn:hover { background: var(--brand-dark); transform: scale(1.08); }

.lang-fab-menu {
  display: none;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,0.14);
  overflow: hidden; padding: 4px; min-width: 140px;
}
.lang-fab.open .lang-fab-menu { display: block; }

.lang-fab-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 13px;
  font-size: 0.84rem; font-weight: 500;
  color: var(--text); background: none; border: none;
  cursor: pointer; transition: background 0.12s;
  border-radius: 8px; font-family: inherit; text-align: left;
}
.lang-fab-opt:hover { background: var(--brand-pale); }
.lang-fab-opt.active { color: var(--brand); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   HERO — dark split layout
══════════════════════════════════════════════════════════════ */

.hero {
  /* Professional layered backdrop (dark theme): an elegant geometric pattern over
     a soft brand glow and a deep diagonal gradient. Light variant overrides below. */
  background:
    url("../img/hero-pattern-dark.824f10529a3d.svg") 0 0 / 46px 46px repeat,
    radial-gradient(72% 60% at 50% -8%, color-mix(in srgb, var(--brand) 28%, transparent) 0%, transparent 62%),
    linear-gradient(165deg, #0a1326 0%, var(--dark) 62%);
  padding: 100px 5% 0;          /* no bottom padding — the full-bleed stat band sits flush */
  position: relative; overflow: hidden;
  color: #fff;
}

/* Counter grew while you were watching — a short lift so the change is felt,
   not just rendered. Removed under prefers-reduced-motion with the rest. */
#panel-dl-count.is-bumped { animation: dlBump .55s ease-out; }
@keyframes dlBump {
  0%   { transform: translateY(0)    scale(1);    filter: brightness(1); }
  35%  { transform: translateY(-3px) scale(1.06); filter: brightness(1.35); }
  100% { transform: translateY(0)    scale(1);    filter: brightness(1); }
}

/* ── Hero speed streak ──────────────────────────────────────────────────────
   A light sweep that crosses the hero fast and then waits — the speed reads from
   the CROSSING TIME, not from how often it happens. It clears the width in about
   2.0 s and then holds still for ~5.5 s; a much shorter gap would turn it into a
   shimmer, which says "loading", not "fast".

   Two bands, not one: a wide soft glare plus a thin sharp line trailing a beat
   behind it. A single band reads as a gradient sliding past; the pair reads as
   something moving through light. Both skew, because a vertical band moving
   sideways looks like a wipe transition.

   z-index 0 keeps it under .hero-container (z-index 1) — it lights the backdrop
   and never touches the headline or the terminal. */
.hero-streak {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.hero-streak::before,
.hero-streak::after {
  content: ''; position: absolute; top: -25%; bottom: -25%;
  transform: skewX(-18deg);
  will-change: transform;
}
.hero-streak::before {
  width: 26%; left: -35%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(120,180,255,.30) 42%,
              rgba(255,255,255,.75) 50%,
              rgba(120,180,255,.30) 58%,
              transparent 100%);
  filter: blur(7px);
  animation: heroStreak 7.5s cubic-bezier(.35,.15,.3,1) infinite;
}
.hero-streak::after {
  width: 7%; left: -35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85) 50%, transparent);
  filter: blur(1.5px);
  animation: heroStreak 7.5s cubic-bezier(.35,.15,.3,1) infinite;
  animation-delay: .16s;                /* trails the glare — the lag IS the motion cue */
}
/* On the dark hero the same light adds instead of overlaying. */
.hero:not(.hero-light) .hero-streak::before,
.hero:not(.hero-light) .hero-streak::after { mix-blend-mode: screen; }

@keyframes heroStreak {
  0%            { left: -35%; opacity: 0; }
  3%            { opacity: 1; }
  24%           { opacity: 1; }
  27%           { left: 115%; opacity: 0; }
  27.01%, 100%  { left: -35%; opacity: 0; }   /* park off-screen for the pause */
}

/* ── Light hero variant (SiteSettings → Hero Theme = Light, the default) ────────
   Overrides the dark defaults; the terminal window stays dark on purpose. */
.hero.hero-light {
  /* Elegant geometric pattern over a login-style diagonal wash + subtle brand glow —
     clean and professional for a light landing page. */
  background:
    url("../img/hero-pattern-light.e0c409d94d63.svg") 0 0 / 46px 46px repeat,
    radial-gradient(70% 58% at 50% -6%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, hsl(214,60%,97%) 0%, var(--bg) 58%, hsl(214,42%,95%) 100%);
  color: var(--text);
}
.hero.hero-light::before { background: radial-gradient(ellipse, rgba(15,110,214,0.08) 0%, transparent 65%); }
.hero.hero-light::after  { background: radial-gradient(ellipse, rgba(120,90,250,0.06) 0%, transparent 65%); }
.hero.hero-light .hero-badge { background: var(--brand-pale); border-color: rgba(15,110,214,0.22); color: var(--brand); }
.hero.hero-light .hero-heading { color: var(--text); }
.hero.hero-light .hero-sub { color: var(--text-muted); }
.hero.hero-light .btn-hero-secondary { background: var(--bg); border-color: var(--border); color: var(--text); }
.hero.hero-light .btn-hero-secondary:hover { background: var(--brand-pale); color: var(--brand); border-color: rgba(15,110,214,0.25); }
/* The default accent gradient is tuned for a dark hero — its light-blue/cyan/lavender
   stops wash out on a light background. Use deeper, saturated stops so the accent stays
   bold and legible on the light hero. */
.hero.hero-light .hero-heading .accent {
  background: linear-gradient(110deg, #1d4ed8 0%, #7c3aed 40%, #2563eb 68%, #0f6ed6 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Hero screenshot carousel (replaces the terminal; images matched to the theme) ── */
.hero-slider { width: 100%; }
.hero-slider-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  background: #0b1220;
}
.hero.hero-light .hero-slider-frame { border-color: var(--border); box-shadow: var(--shadow-lg); background: var(--bg-card); }
.hero-slider-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); }
.hero.hero-light .hero-slider-bar { background: var(--bg); border-bottom-color: var(--border); }
.hero-slider-url { margin-left: 10px; font-size: 0.72rem; color: rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 6px; }
.hero.hero-light .hero-slider-url { color: var(--text-muted); }
.hero-slider-viewport { overflow: hidden; }
.hero-slider-track { display: flex; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); }
.hero-slide { min-width: 100%; width: 100%; display: block; height: auto; }
.hero-slider-btn {
  position: absolute; top: 54%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.45); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
  opacity: 0.55; transition: opacity 0.2s, background 0.2s; z-index: 2;
}
.hero-slider-frame:hover .hero-slider-btn { opacity: 1; }
.hero-slider-btn:hover { background: var(--brand); }
.hero-slider-prev { left: 12px; }
.hero-slider-next { right: 12px; }
.hero-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(255,255,255,0.28); transition: all 0.2s; }
.hero.hero-light .hero-dot { background: var(--border); }
.hero-dot.active { width: 22px; border-radius: 4px; background: var(--brand); }
/* Stats are a brand-filled bar with white text in BOTH themes (see .hero-stats below),
   so the light hero intentionally does NOT recolour them. */

/* Ambient glow */
.hero::before {
  content: '';
  position: absolute; top: -200px; left: -150px;
  width: 800px; height: 800px;
  background: radial-gradient(ellipse, rgba(15,110,214,0.16) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: -150px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(30,60,160,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.hero-container {
  /* hero-left narrower, hero-right (the screenshot carousel) wider; tighter gap so the
     large space between columns doesn't read as padding on the right. */
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 44px; align-items: center;
  max-width: 1240px; margin: 0 auto;
  position: relative; z-index: 1;
}
/* Vertical breathing room on the two content columns only — the full-bleed
   stat band stays flush at the bottom. */
.hero-left, .hero-right { padding: 36px 0; }

/* Prevent grid blowout: a grid item's default min-width:auto is its MIN-CONTENT, so one
   unshrinkable child (the nowrap terminal, or a nowrap stat number) stretches the 1fr
   track past the viewport — and since .hero clips, the hero's right padding ends up off
   screen and every box in it (buttons, terminal) runs into the edge.
   .hero-stats is a grid item too, and was the one left out: on a phone it forced the
   track to ~369px inside a 324px container. */
.hero-left, .hero-right, .hero-stats, .hero-stat { min-width: 0; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(15,110,214,0.18);
  border: 1px solid rgba(15,110,214,0.35);
  color: #7eb9f5; border-radius: 99px;
  padding: 5px 14px; font-size: 0.75rem; font-weight: 700;
  margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase;
}

.hero-badge .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0.10); }
}

.hero-heading {
  font-size: clamp(1.98rem, 3.73vw, 3.19rem);   /* -9% */
  font-weight: 900; line-height: 1.12; letter-spacing: -0.035em;
  margin-bottom: 20px; color: #fff;
}

.hero-heading .accent {
  background: linear-gradient(110deg, #4fa3f7 0%, #a78bfa 35%, #60d9fa 60%, #1a7fe8 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-shimmer 4s ease-in-out infinite;
}

/* ── Hero entrance keyframes ─────────────────────────────── */
@keyframes hero-fade-down {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-shimmer {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}
@keyframes hero-line-reveal {
  from { opacity: 0; transform: translateY(32px) skewY(1.5deg); }
  to   { opacity: 1; transform: translateY(0)    skewY(0deg); }
}

/* Badge entrance */
.hero-badge {
  animation: hero-fade-down 0.6s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.05s;
}

/* Heading lines — each wrapped in .hero-line */
.hero-line {
  display: block;
  opacity: 0;
  animation: hero-line-reveal 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-line-1 { animation-delay: 0.2s; }
.hero-line-2 { animation-delay: 0.38s; }

/* Sub, CTA, stats */
.hero-sub {
  animation: hero-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.65s;
}
.hero-cta {
  animation: hero-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.8s;
}
.hero-stats {
  animation: hero-fade-up 0.6s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.95s;
}

.hero-sub {
  font-size: 0.95rem; color: rgba(255,255,255,0.58);
  line-height: 1.7; margin-bottom: 32px; max-width: 460px;
  overflow-wrap: break-word;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }

.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: white;
  padding: 12px 26px; border-radius: var(--r-md);
  font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 4px 24px rgba(15,110,214,0.45); transition: all 0.2s;
}
.btn-hero-primary:hover {
  background: var(--brand-dark); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(15,110,214,0.55);
}

.btn-hero-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85); padding: 12px 26px; border-radius: var(--r-md);
  font-size: 0.95rem; font-weight: 600; transition: all 0.2s;
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.12); color: #fff;
  border-color: rgba(255,255,255,0.25);
}

.hero-stats {
  grid-column: 1 / -1;
  /* Full-bleed brand BAND: the background spans the FULL viewport width; the content is
     re-centred by .hero-stats-inner. The hero's overflow:hidden absorbs the 100vw
     scrollbar rounding, so this never adds a horizontal page scroll. */
  width: 100vw; margin: 40px calc(50% - 50vw) 0;
  background: var(--brand); overflow: hidden;
}
.hero-stats-inner {
  /* Match the hero-container's alignment above (max-width 1200px within the hero's 5%
     padding) so the stat content lines up with the heading/terminal, not the band edges. */
  width: min(1200px, 90%); margin: 0 auto;
  display: grid;
  /* Apps · Powered by · Community · Downloads · Realtime */
  grid-template-columns: 10% 30% 30% 20% 10%;
  gap: 0;
}

.hero-stat {
  position: relative;
  padding: 18px 16px;           /* vertical breathing room inside the brand band */
  text-align: center;
  color: #fff;                  /* brand fill comes from the band; text stays light in both themes */
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
/* Keep the first stat symmetric too, so every stat centres in its own column. */
.hero-stat:first-child { padding-left: 16px; }
/* Hairline divider between stats (fades at the ends) */
.hero-stat:not(:last-child)::after {
  content: '';
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 52px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent);
}
.hero-stat:hover { background: var(--brand-dark); }   /* no translate — the bar clips overflow */

.hero-stat-num {
  font-size: clamp(1.5rem, 2vw, 2.2rem); font-weight: 800; line-height: 1.05;
  font-family: 'JetBrains Mono', monospace; letter-spacing: -0.045em;
  /* Digits change width as the counter rolls; tabular figures stop the number
     jittering sideways on every frame. */
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.62) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
  white-space: nowrap;
}
.hero-stat-label {
  font-size: 0.82rem; font-weight: 600; margin-top: 5px;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(255,255,255,0.85);
}

/* ── Live "connection speed" stat — animated signal bars ──────── */
.hero-speed {
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(1.5rem, 2vw, 2.2rem);   /* match .hero-stat-num cap height */
}
/* Realtime stat is narrower than the text stats — tighter side padding and slimmer,
   closer-spaced bars so it doesn't eat a full column's width. */
.hero-stat-live { padding-left: 22px; padding-right: 22px; }
.hero-stat-live .speed-bars { gap: 4px; }
.hero-stat-live .speed-bars i { width: 5px; }
.speed-bars {
  display: inline-flex; align-items: flex-end; gap: 5px; height: 100%;
}
.speed-bars i {
  display: block; width: 7px; height: 30%;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
  transform-origin: bottom;
  animation: speed-pulse 1.1s ease-in-out infinite;
}
.speed-bars i:nth-child(1) { animation-delay: 0s;    }
.speed-bars i:nth-child(2) { animation-delay: 0.18s; }
.speed-bars i:nth-child(3) { animation-delay: 0.36s; }
.speed-bars i:nth-child(4) { animation-delay: 0.54s; }
.speed-bars i:nth-child(5) { animation-delay: 0.72s; }

@keyframes speed-pulse {
  0%, 100% { height: 25%;  opacity: 0.55; }
  50%      { height: 100%; opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .speed-bars i { animation: none; height: 65%; }
  /* A bright band crossing the viewport is exactly the kind of large-area motion
     this preference exists to stop. Removed outright rather than slowed. */
  .hero-streak::before, .hero-streak::after { animation: none; opacity: 0; }
  #panel-dl-count.is-bumped { animation: none; }
}

/* ── Terminal Window ────────────────────────────────────────── */

.terminal-window {
  background: #0d1117;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

.terminal-bar {
  background: #1c2333;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.t-dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.t-dot.red    { background: #ff5f57; }
.t-dot.yellow { background: #febc2e; }
.t-dot.green  { background: #28c840; }

.terminal-title {
  margin-left: 8px;
  font-size: 0.72rem; color: rgba(255,255,255,0.35);
  font-family: 'JetBrains Mono', monospace;
}

.terminal-body {
  padding: 22px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; line-height: 1.9;
  overflow-x: auto;
}

.t-line { display: block; white-space: nowrap; }

.t-prompt { color: #22c55e; }
.t-cmd    { color: #e2e8f0; }
.t-output { color: rgba(255,255,255,0.42); padding-left: 0; }
.t-output.ok   { color: #22c55e; }
.t-output.info { color: #60a5fa; }
.t-output.done { color: #a78bfa; }
.t-cursor { display: inline-block; width: 2px; height: 14px; background: #22c55e; vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════
   SECTION COMMONS
══════════════════════════════════════════════════════════════ */

section { padding: 88px 5%; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--brand);
  background: var(--brand-pale); border-radius: 99px;
  padding: 4px 14px; margin-bottom: 16px;
}

.section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px;
}

.section-sub { font-size: 1rem; color: var(--text-muted); line-height: 1.7; }

.center { text-align: center; }
.center .section-sub { margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT SHOWCASE
══════════════════════════════════════════════════════════════ */

.showcase-section {
  position: relative; overflow: hidden;
  background: var(--dark); color: #fff;
}
.showcase-section .section-label {
  background: rgba(15,110,214,0.18); color: #7eb9f5;
  border: 1px solid rgba(15,110,214,0.3);
}
.showcase-section .section-title { color: #fff; }
.showcase-section .section-sub { color: rgba(255,255,255,0.55); }

/* Ambient glow behind the showcase */
.showcase-section::before {
  content: ''; position: absolute; top: -180px; left: 50%;
  width: 900px; height: 600px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(15,110,214,0.18) 0%, transparent 65%);
  pointer-events: none;
}

.showcase-wrap {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 52px auto 0;
  display: grid; grid-template-columns: 300px 1fr; gap: 28px;
  align-items: start;
}

/* Tabs (left rail) */
.showcase-tabs { display: flex; flex-direction: column; gap: 12px; }
.showcase-tab {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: var(--r-md); cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7); font-family: inherit;
  transition: all 0.2s;
}
.showcase-tab:hover {
  background: rgba(255,255,255,0.07); color: #fff;
  border-color: rgba(255,255,255,0.16);
}
.showcase-tab.active {
  background: rgba(15,110,214,0.16); color: #fff;
  border-color: rgba(15,110,214,0.5);
  box-shadow: 0 6px 24px rgba(15,110,214,0.22);
}
.showcase-tab i {
  font-size: 1.1rem; width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255,255,255,0.06); color: #7eb9f5;
  transition: all 0.2s;
}
.showcase-tab.active i { background: var(--brand); color: #fff; }
.showcase-tab span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.showcase-tab strong { font-size: 0.95rem; font-weight: 700; }
.showcase-tab small { font-size: 0.78rem; color: rgba(255,255,255,0.45); }

/* Browser-frame stage */
.showcase-browser {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0d1117;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.showcase-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #161b25;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sc-dot { width: 12px; height: 12px; border-radius: 50%; }
.sc-dot.red { background: #ff5f57; }
.sc-dot.yellow { background: #febc2e; }
.sc-dot.green { background: #28c840; }
.showcase-url {
  margin-left: 14px; font-size: 0.8rem; color: rgba(255,255,255,0.45);
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex; align-items: center; gap: 7px;
}
.showcase-url i { font-size: 0.72rem; color: #28c840; }

.showcase-screens { position: relative; aspect-ratio: 1920 / 965; background: #0d1117; }
.showcase-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: top center;
  opacity: 0; transform: scale(1.01);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.showcase-img.active { opacity: 1; transform: scale(1); pointer-events: auto; }

/* ── Dark separator between hero and See-It-In-Action (both dark) ───────────── */
.dark-sep {
  background: var(--dark);
  height: 72px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dark-sep::before {                 /* hairline rule */
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, 78%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 28%, rgba(255,255,255,0.14) 72%, transparent);
}
.dark-sep > span {                  /* centered chevron badge */
  position: relative; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 26px var(--brand-glow);
  animation: darkSepBob 2.4s ease-in-out infinite;
}
@keyframes darkSepBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── See It In Action ──────────────────────────────────────────────────────── */
.sia {
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 60%);
  color: #fff;
  position: relative; overflow: hidden;
  padding-top: 44px;
}
.sia::before {                      /* soft brand glow top-center */
  content: ''; position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 500px; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(15,110,214,0.16) 0%, transparent 70%);
}
.sia .center { position: relative; z-index: 1; }
.sia .section-sub { color: rgba(255,255,255,0.62); }
.sia-label {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85) !important;
}

.sia-wrap { max-width: 1060px; margin: 44px auto 0; position: relative; z-index: 1; }

.sia-frame {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #0a1220;
  box-shadow: 0 36px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
}
.sia-frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sia-frame-url {
  margin-left: 10px; flex: 1; max-width: 440px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.28); border-radius: 8px; padding: 5px 13px;
}
.sia-frame-url i { font-size: 0.64rem; color: #34d399; }
.sia-frame-body { line-height: 0; background: #0a1220; }
.sia-frame-body img { width: 100%; height: auto; display: block; transition: opacity 0.18s ease; }

.sia-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.sia-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border-radius: 10px; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; font-family: inherit;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: color 0.16s, background 0.16s, border-color 0.16s, transform 0.16s;
}
.sia-tab:hover { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.sia-tab.active {
  color: #fff; background: var(--brand); border-color: var(--brand);
  box-shadow: 0 6px 18px var(--brand-glow);
}
.sia-tab i { font-size: 0.8rem; }
@media (max-width: 600px) {
  .sia-tab { padding: 8px 12px; font-size: 0.76rem; }
  .sia-frame-url { display: none; }
}

/* ── Core Features: 3-column card grid (Security / Platform, colour-coded) ── */
.cf-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  max-width: 1180px; margin: 52px auto 0;
}
.cf-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cf-card-security:hover { border-color: rgba(34,197,94,0.35); }
.cf-card-general:hover  { border-color: rgba(15,110,214,0.35); }
.cf-card-icon {
  width: 48px; height: 48px; border-radius: 13px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.cf-card-security .cf-card-icon { background: rgba(34,197,94,0.12); color: #16a34a; }
.cf-card-general  .cf-card-icon { background: var(--brand-pale); color: var(--brand); }
.cf-card-cat { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 7px; }
.cf-card-security .cf-card-cat { color: #16a34a; }
.cf-card-general  .cf-card-cat { color: var(--brand); }
.cf-card-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text); margin-bottom: 8px; }
.cf-card-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 900px) { .cf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .cf-grid { grid-template-columns: 1fr; } }

/* ── Homepage Core Features: compact, minimal-text groups (Security / Platform) ── */
.cf-group { max-width: 1180px; margin: 46px auto 0; }
.cf-group:first-of-type { margin-top: 52px; }
.cf-group-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  text-align: left; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.cf-group-head > i {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.cf-group-security > i { background: rgba(34,197,94,0.12); color: #16a34a; }
.cf-group-platform > i { background: var(--brand-pale); color: var(--brand); }
.cf-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.cf-mini {
  display: flex; align-items: center; gap: 13px; padding: 15px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cf-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cf-mini-security:hover { border-color: rgba(34,197,94,0.35); }
.cf-mini-platform:hover { border-color: rgba(15,110,214,0.35); }
.cf-mini-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.cf-mini-security .cf-mini-icon { background: rgba(34,197,94,0.12); color: #16a34a; }
.cf-mini-platform .cf-mini-icon { background: var(--brand-pale); color: var(--brand); }
.cf-mini-title { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.3; }
@media (max-width: 900px) { .cf-mini-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Mobile: keep two COMPACT columns (was a single tall stack) and shrink the cards,
   icons and headers so each 8-item group stays short. */
@media (max-width: 560px) {
  .cf-group { margin-top: 30px; }
  .cf-group:first-of-type { margin-top: 34px; }
  .cf-group-head { font-size: 0.95rem; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; }
  .cf-group-head > i { width: 30px; height: 30px; font-size: 0.85rem; }
  .cf-mini-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .cf-mini { padding: 10px 11px; gap: 9px; border-radius: 11px; align-items: flex-start; }
  .cf-mini-icon { width: 30px; height: 30px; font-size: 0.85rem; border-radius: 8px; }
  .cf-mini-title { font-size: 0.78rem; font-weight: 400; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
}

/* ── /features screenshot spotlight (browser-framed panel screens) ── */
.feat-shot {
  max-width: 940px; margin: 4px auto 46px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--bg-card);
}
.feat-shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.feat-shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.feat-shot img { display: block; width: 100%; height: auto; }

/* ── Core Features: 2-column panels (Security | Platform) ─────────────────── */
.cf-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1180px;
  margin: 52px auto 0;
}
.cf-col {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 30px 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.cf-col:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* Accent rail along the top of each panel */
.cf-col::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.cf-col-security::before { background: linear-gradient(90deg, #16a34a, #22c55e); }
.cf-col-security:hover { border-color: rgba(34,197,94,0.35); }
.cf-col-general::before  { background: linear-gradient(90deg, var(--brand), #4f93f0); }
.cf-col-general:hover { border-color: rgba(15,110,214,0.35); }

/* Panel header */
.cf-head {
  display: flex; align-items: center; gap: 15px;
  padding-bottom: 22px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cf-head-badge {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.cf-col-security .cf-head-badge { background: rgba(34,197,94,0.12); color: #16a34a; }
.cf-col-general  .cf-head-badge { background: var(--brand-pale); color: var(--brand); }
.cf-head-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.cf-head-sub   { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.cf-head-tag {
  margin-left: auto; align-self: flex-start; flex-shrink: 0;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.cf-col-security .cf-head-tag { background: rgba(34,197,94,0.12); color: #16a34a; }
.cf-col-general  .cf-head-tag { background: var(--brand-pale); color: var(--brand); }

/* Feature row */
.cf-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.cf-item:last-child { border-bottom: none; }
.cf-item-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.cf-col-security .cf-item-icon { background: rgba(34,197,94,0.10); color: #16a34a; }
.cf-col-general  .cf-item-icon { background: var(--brand-pale); color: var(--brand); }
.cf-item-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.cf-item-desc  { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   INSTALL SECTION
══════════════════════════════════════════════════════════════ */

.install-section {
  background: var(--dark-2);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #fff;
}

.install-section .section-label {
  background: rgba(15,110,214,0.18); color: #7eb9f5;
  border-color: rgba(15,110,214,0.3);
}

.install-section .section-title { color: #fff; }
.install-section .section-sub { color: rgba(255,255,255,0.55); }
/* Header aligns to the same 1240px cap as the card / hero-container. */
.install-section .center { max-width: 1240px; margin: 0 auto; }

.install-card {
  /* steps take the room, requirements is a compact fixed column (no longer 50:50) */
  display: grid; grid-template-columns: minmax(0, 1fr) 480px;
  gap: 40px; margin: 52px auto 0; max-width: 1240px;   /* same cap as hero-container */
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl); padding: 40px;
}

/* min-width:0 lets these grid/flex items shrink so the nowrap command
   text scrolls inside .install-cmd instead of blowing out the layout */
.install-steps { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.install-step { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.install-step > div { min-width: 0; }

.install-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 0.8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

.install-step-title { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 8px; }

.install-cmd-wrap {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; overflow: hidden;
  min-width: 0; max-width: 100%;
}

.install-reqs { min-width: 0; }

.install-cmd {
  font-family: 'JetBrains Mono', monospace; font-size: 0.77rem;
  color: #7eb9f5; padding: 11px 14px; flex: 1;
  white-space: nowrap; overflow-x: auto;
  min-width: 0;
}

.install-copy {
  padding: 0 14px; height: 100%; min-height: 40px;
  background: none; border: none; border-left: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center;
}

.install-copy:hover { background: rgba(255,255,255,0.08); color: #fff; }

.install-reqs {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}

.install-req-title { font-size: 0.78rem; font-weight: 700; color: #7eb9f5; }

.install-req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

.install-req-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: rgba(255,255,255,0.55); font-weight: 400;
}
.install-req-item i { color: var(--brand); font-size: 0.9rem; width: 16px; }

.install-docs-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: #7eb9f5; font-weight: 600;
  margin-top: auto; transition: opacity 0.15s;
}
.install-docs-link:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════
   PLUGIN ECOSYSTEM (dark section)
══════════════════════════════════════════════════════════════ */

.plugins-section {
  background: linear-gradient(160deg, hsl(218,30%,11%) 0%, hsl(222,35%,15%) 100%);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.plugins-pro-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-top: 48px;
}

.plugin-pro-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 18px 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; transition: all 0.2s; cursor: default;
  backdrop-filter: blur(4px);
}
.plugin-pro-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(158,200,255,0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.plugin-pro-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(158,200,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #9ec8ff;
}
.plugin-pro-name { font-size: 0.74rem; font-weight: 700; color: #e2eeff; line-height: 1.3; }
.plugin-pro-tag {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(158,200,255,0.12); color: #9ec8ff;
  border-radius: 99px; padding: 2px 8px;
}
.plugin-pro-tag.premium { background: rgba(251,191,36,0.12); color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════════════ */

.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; margin-top: 52px; max-width: 820px; margin-left: auto; margin-right: auto;
}

.pricing-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; position: relative;
  box-shadow: var(--shadow-sm);
  transform: scale(1); transform-origin: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  z-index: 1;
}
/* Hover enlarges the whole card — container AND its text scale together */
.pricing-card:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  border-color: rgba(15,110,214,0.35);
  z-index: 3;
}
/* "Most Popular" is larger than the rest by default... */
.pricing-card.featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-md);
  transform: scale(1.07);
  z-index: 2;
}
/* ...and grows further on hover */
.pricing-card.featured:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-lg);
  z-index: 3;
}

.pricing-badge-featured {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: white;
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 16px; border-radius: 99px; letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-name {
  font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
}
/* Price — the amount is the hero; period + annual line are supporting detail. */
.pricing-price {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  margin-bottom: 8px; color: var(--text);
}
.pricing-price .price-val {
  font-size: 2.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pricing-price .price-period { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); }
/* Annual billing line — a quiet pill that makes the yearly total explicit. */
.pricing-annual {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--text-muted); margin-bottom: 22px;
  padding: 7px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border);
}
.pricing-annual > i { color: var(--brand); font-size: 0.82rem; }
.pricing-annual .pricing-billing-note { font-weight: 700; color: var(--text); }
.pricing-annual-free > i { color: var(--success); }
.pricing-save {
  font-size: 0.66rem; font-weight: 800; color: var(--success);
  background: rgba(34,197,94,0.13); padding: 2px 8px; border-radius: 99px;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
.pricing-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   SUPPORTED LANGUAGES / RUNTIMES
══════════════════════════════════════════════════════════════ */
.langs-section { padding: 76px 5%; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Match hero-container exactly: 1240px cap, centered, with the hero's 5% side gutter. */
.langs-section .center { max-width: 1240px; margin: 0 auto; }
.langs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 46px; }
.lang-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 18px; text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lang-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(15,110,214,0.32); }
.lang-logo { width: 58px; height: 58px; margin: 0 auto 16px; }
.lang-logo img { width: 100%; height: 100%; object-fit: contain; }
.lang-name { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 15px; }
.lang-frameworks { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.lang-fw {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 400; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 99px; padding: 5px 12px 5px 8px;
}
.lang-fw img { width: 15px; height: 15px; object-fit: contain; }
.lang-fw-plain { color: var(--text-muted); }
.lang-fw-plain i { color: var(--brand); font-size: 0.72rem; }
.langs-extra {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  margin-top: 40px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}
.langs-extra span { display: inline-flex; align-items: center; gap: 8px; }
.langs-extra i { color: var(--brand); }
/* Ecosystem logo cloud — the stack the plugins manage. */
.lang-cloud-title {
  text-align: center; margin: 54px 0 22px;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted);
}
.lang-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cloud-item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.78rem; font-weight: 500; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 16px 10px 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cloud-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(15,110,214,0.28); }
.cloud-item img { width: 22px; height: 22px; object-fit: contain; }
.cloud-item-fa i { color: var(--brand); font-size: 1rem; }
@media (max-width: 900px) { .langs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Mobile: the 4 language cards become a swipeable, scroll-snap slider (CSS only) —
   cards at 80% width so the next one peeks, hinting there's more to swipe. */
@media (max-width: 560px) {
  .langs-section { padding: 56px 5%; }
  .langs-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .langs-grid::-webkit-scrollbar { display: none; }
  .lang-card { flex: 0 0 80%; scroll-snap-align: start; }
  /* Ecosystem chips become an even 2-up grid (50:50) instead of ragged flow. */
  .lang-cloud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cloud-item {
    justify-content: center; min-width: 0;
    padding: 10px; gap: 7px; font-size: 0.74rem;
  }
  .cloud-item img { width: 18px; height: 18px; }
  .cloud-item-fa i { font-size: 0.9rem; }
  /* Three secondary "also supported" notes — they are a footnote to the cards above,
     so on a phone they shrink to footnote size instead of competing with them. */
  .langs-extra {
    margin-top: 26px; gap: 8px 16px;
    font-size: 0.72rem; font-weight: 500;
  }
  .langs-extra span { gap: 6px; }
  .langs-extra i { font-size: 0.7rem; }
}

/* Lightweight footprint — proof the whole stack runs on low-spec servers.
   Full-width band that lines up with .langs-grid above (shared .center width). */
.footprint {
  margin: 56px 0 0; width: 100%;
  border: 1px solid var(--border); border-radius: 20px;
  background:
    radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 55%),
    var(--bg);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr; text-align: left;
}
.footprint-head { padding: 32px 34px 22px; }
.footprint-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: 99px; padding: 6px 13px; margin-bottom: 14px;
}
/* "Featherweight" cue — the feather gently floats, as if weightless. */
.footprint-badge i { animation: fp-float 2.8s ease-in-out infinite; }
@keyframes fp-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-8deg); }
}
/* The big RAM figure lifts on hover to reinforce the lightness. */
.footprint:hover .fp-stat:first-child .fp-num { transform: translateY(-3px); }
.fp-stat:first-child .fp-num { transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .footprint-badge i { animation: none; } }
.footprint-title { font-size: 1.42rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0 0 8px; }
.footprint-sub { font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.footprint-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.fp-stat { text-align: center; padding: 24px 18px; position: relative; }
.fp-stat + .fp-stat::before {
  content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--border);
}
.fp-num {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-size: 2.05rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fp-num span { font-size: 0.88rem; font-weight: 700; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); }
.fp-lbl { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-top: 10px; line-height: 1.35; }
@media (max-width: 620px) {
  .footprint-head { padding: 26px 22px 20px; }
  /* Badge and title centre; the sub-paragraph stays left, because a centred block of
     wrapped body text is harder to read. The pill is inline-flex, on which auto
     margins do nothing — it needs to be a block-level flex box with a shrink-to-fit
     width before `margin-inline:auto` can centre it. */
  .footprint-badge { display: flex; width: fit-content; margin-inline: auto; }
  .footprint-title { text-align: center; }
  .footprint-stats { grid-template-columns: repeat(2, 1fr); }
  .fp-stat { padding: 22px 14px; }
  /* Keep the column divider (stat 2 & 4), drop it on the left-edge stat 3, add a row line. */
  .fp-stat:nth-child(3)::before { display: none; }
  .fp-stat:nth-child(3), .fp-stat:nth-child(4) { border-top: 1px solid var(--border); }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-SERVER
══════════════════════════════════════════════════════════════ */
.ms-section { padding: 84px 5%; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Same 1240px cap + 5% gutter as hero-container. */
.ms-wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ms-copy { text-align: left; }
.ms-lead { font-size: 1rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 28px; }

/* Feature mini-grid (replaces the plain bullet list). */
.ms-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.ms-feat { display: flex; align-items: flex-start; gap: 12px; }
.ms-feat-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 0.95rem; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.ms-feat-t { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.ms-feat-s { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

/* Fleet console card. */
.ms-console { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ms-console-bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, var(--bg));
}
.ms-console-title { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 0.82rem; font-weight: 700; color: var(--text); }
.ms-console-title i { color: var(--brand); }
.ms-console-count {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 0.7rem; font-weight: 700; color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
  border-radius: 99px; padding: 3px 10px;
}
.ms-console-count i { font-size: 0.5rem; }
.ms-console-body { padding: 20px; }

.ms-hub {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 10px 26px var(--brand-glow);
}
.ms-hub img { width: 32px; height: 32px; }
.ms-hub-name { font-weight: 800; font-size: 0.98rem; }
.ms-hub-sub { font-size: 0.74rem; opacity: 0.85; }
.ms-hub-badge { margin-left: auto; opacity: 0.8; font-size: 1.05rem; }

.ms-trunk { width: 2px; height: 22px; background: var(--border); margin: 0 auto; }
.ms-nodes { display: flex; flex-direction: column; gap: 10px; }
.ms-node {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .18s ease, transform .18s ease;
}
.ms-node:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); transform: translateX(2px); }
.ms-node-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-pale); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ms-node-info { flex: 1; min-width: 0; }
.ms-node-name { font-weight: 700; font-size: 0.86rem; color: var(--text); }
.ms-node-os { font-size: 0.74rem; color: var(--text-muted); }
.ms-node-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ms-gauge { width: 58px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.ms-gauge span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.ms-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 700; color: var(--success); text-transform: capitalize; }
.ms-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.16); }

@media (max-width: 860px) { .ms-wrap { grid-template-columns: 1fr; gap: 40px; } .ms-section { padding: 60px 5%; } }
@media (max-width: 480px) { .ms-feats { grid-template-columns: 1fr; } .ms-gauge { display: none; } }

.pricing-features { list-style: none; margin-bottom: 28px; }
.pricing-features li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.74rem; padding: 7px 0;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li i { color: var(--success); font-size: 0.68rem; flex-shrink: 0; }

.btn-pricing {
  width: 100%; padding: 13px; border-radius: var(--r-md);
  font-size: 0.9rem; font-weight: 700; text-align: center;
  cursor: pointer; display: block; transition: all 0.2s; border: none;
}
.btn-pricing-primary { background: var(--brand); color: white; box-shadow: 0 3px 12px var(--brand-glow); }
.btn-pricing-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 20px var(--brand-glow); }
.btn-pricing-secondary { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.btn-pricing-secondary:hover { background: var(--brand-pale); color: var(--brand); border-color: rgba(15,110,214,0.25); }

/* ═══════════════════════════════════════════════════════════════
   BLOG GRID (homepage section)
══════════════════════════════════════════════════════════════ */

.blog-grid {
  /* auto-fit (not auto-fill) so exactly 3 latest posts stretch to fill the row evenly
     instead of leaving an empty 4th track. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; margin: 44px auto 0;
  max-width: 1240px;                 /* same cap as hero-container */
}
.blog-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: all 0.2s; display: block;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(15,110,214,0.20); }
.blog-card-img {
  width: 100%; height: 180px;
  background: linear-gradient(135deg, hsl(214,60%,88%), hsl(214,80%,78%));
  display: flex; align-items: center; justify-content: center;
  color: rgba(15,110,214,0.25); font-size: 3rem; overflow: hidden;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px; }
.blog-card-cat { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: 8px; }
.blog-card-title { font-size: 0.95rem; font-weight: 700; line-height: 1.45; margin-bottom: 10px; color: var(--text); }
.blog-card-excerpt { font-size: 0.83rem; color: var(--text-muted); line-height: 1.65; }
.blog-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.78rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   CTA BAND
══════════════════════════════════════════════════════════════ */

.cta-band {
  background: linear-gradient(135deg, #0a56a8 0%, #0f6ed6 60%, #1a7fe8 100%);
  text-align: center; padding: 80px 5%; color: #fff;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band h2 {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 900; margin-bottom: 18px; letter-spacing: -0.03em; color: #fff;
  position: relative;
}
.cta-band p { font-size: 1rem; color: rgba(255,255,255,0.72); margin-bottom: 34px; position: relative; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER (dark)
══════════════════════════════════════════════════════════════ */

.pub-footer {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  color: var(--text, #0f172a);
}

.pub-footer-inner { padding: 60px 5% 32px; }

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 44px;
}

.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; font-weight: 800; margin-bottom: 14px;
  color: var(--text, #0f172a);
}
.footer-brand img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }

.footer-desc { font-size: 0.85rem; color: var(--text-muted, #64748b); line-height: 1.7; margin-bottom: 16px; }

.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-badge {
  font-size: 0.7rem; font-weight: 600;
  background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.08));
  color: var(--text-muted, #64748b); border-radius: 6px; padding: 3px 9px;
  display: flex; align-items: center; gap: 5px;
}

/* ── Accepted payment methods strip ────────────────────────────────────────────
   Brand logos are full-colour SVGs of varied dimensions; each sits on a white
   chip of fixed height so a tall logo (Mandiri) and a wide one (PermataBank) read
   as visually equal. On the light footer the chip needs a hairline border to
   separate it from the near-white background. */
.footer-pay {
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}
.footer-pay-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted, #64748b); margin-bottom: 14px;
}
.footer-pay-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.footer-pay-item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 10px;
  background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.08)); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.footer-pay-item img { max-height: 18px; max-width: 74px; width: auto; object-fit: contain; display: block; }
/* The label is the fallback, not a caption: hidden while the logo loads, revealed
   only when onerror strips a missing image. A row of broken-image icons would look
   worse than no strip at all. */
.footer-pay-label { display: none; font-size: 0.72rem; font-weight: 700; color: #1f2937; white-space: nowrap; }
.footer-pay-item.is-text .footer-pay-label { display: block; }
.footer-pay-item.is-icon i { font-size: 26px; line-height: 1; color: #1f2937; display: block; }
.footer-pay-item.is-icon .footer-pay-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.footer-pay-note {
  margin: 14px 0 0; font-size: 0.76rem; line-height: 1.6; color: var(--text-muted, #64748b);
}
.footer-pay-note a { color: var(--brand-dark, #0a56a8); text-decoration: underline; }
.footer-pay-note a:hover { color: var(--brand, #0f6ed6); }
@media (max-width: 560px) {
  .footer-pay-list { gap: 6px; }
  .footer-pay-item { height: 28px; padding: 0 8px; }
  .footer-pay-item img { max-height: 15px; max-width: 62px; }
}

/* Contact address in the footer. It is the SAME pill as the platform badges
   above it — .footer-badge does the work — so the block reads as one row of
   chips rather than a badge row plus something else. Only the interactive part
   is added here, because these badges are static text and this one is a link. */
.footer-badge-link {
  text-decoration: none; margin-top: 10px; width: fit-content;
  transition: border-color 0.18s, color 0.18s;
}
.footer-badge-link:hover {
  color: var(--brand-dark, #0a56a8);
  border-color: color-mix(in srgb, var(--brand, #0f6ed6) 35%, transparent);
}
/* Long addresses must wrap inside the chip rather than push the footer column
   wider than its grid track. */
.footer-email { word-break: break-all; }

.footer-socials {
  display: flex; gap: 10px; margin-top: 14px; align-items: center;
}
.footer-socials a {
  width: 34px; height: 34px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.08));
  color: var(--text-muted, #64748b); display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; transition: all 0.18s; text-decoration: none;
}
.footer-socials a:hover {
  background: var(--brand-pale, #e8f2fd); border-color: color-mix(in srgb, var(--brand,#0f6ed6) 35%, transparent);
  color: var(--brand-dark, #0a56a8); transform: translateY(-2px);
}

.footer-heading {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted, #64748b); margin-bottom: 16px;
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { font-size: 0.85rem; color: var(--text-muted, #64748b); transition: color 0.15s; }
.footer-links a:hover { color: var(--brand-dark, #0a56a8); }

/* Visitor counters (apps.stats) — a quiet strip between the payment methods and
   the copyright line. Same muted voice as .footer-bottom on purpose: it is a
   curiosity, not a call to action. */
.footer-stats {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 28px;
  padding: 14px 0; margin-top: 8px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  font-size: 0.8rem; color: var(--text-muted, #64748b);
}
.footer-stats-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.footer-stats-item i { font-size: 0.75rem; opacity: 0.7; }
.footer-stats-item strong {
  color: var(--text, #1e293b); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  font-size: 0.8rem; color: var(--text-muted, #64748b); flex-wrap: wrap; gap: 12px;
}
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: var(--text-muted, #64748b); font-size: 0.8rem; transition: color 0.15s; }
.footer-bottom-links a:hover { color: var(--brand-dark, #0a56a8); }

/* ═══════════════════════════════════════════════════════════════
   BLOG DETAIL PAGE — Professional editorial layout
══════════════════════════════════════════════════════════════ */

/* Hero */
.bd-hero {
  /* LIGHT header — same recipe as the homepage light hero, /blog/ and /features/,
     so an article does not drop the reader onto a differently-themed page. */
  background:
    url("../img/hero-pattern-light.e0c409d94d63.svg") 0 0 / 46px 46px repeat,
    linear-gradient(160deg, hsl(214,60%,97%) 0%, var(--bg) 58%, hsl(214,42%,95%) 100%);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.bd-hero::before {
  content: '';
  position: absolute; top: -200px; right: -100px;
  width: 600px; height: 600px;
  /* Eased right down: the dark hero's tint reads as a blue smudge on a pale page. */
  background: radial-gradient(ellipse, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.bd-hero-inner {
  /* Same box as .bd-wrap (max-width + horizontal 5% padding), so the hero title
     lines up edge-to-edge with the article+sidebar grid below it. */
  max-width: 1280px; margin: 0 auto;
  padding: 52px 5% 48px;
  position: relative; z-index: 1;
}
.bd-hero-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.bd-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  padding: 5px 10px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.bd-back:hover {
  color: var(--brand); background: var(--brand-pale);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.bd-category {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  padding: 3px 12px; border-radius: 99px;
}
.bd-category:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.bd-title {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 18px;
}
.bd-excerpt {
  font-size: 1.1rem; color: var(--text-muted);
  line-height: 1.7; margin-bottom: 24px; max-width: 720px;
}
.bd-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bd-meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text-muted);
}
.bd-meta-item i { font-size: 0.75rem; }
.bd-meta-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

/* The author byline (.bd-author*) was removed with the markup — posts publish
   under the product name, so there is no avatar or name in the meta row. */

/* Reading progress bar (fixed at very top of viewport) */
.bd-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand), #7c3aed);
  z-index: 200; border-radius: 0 3px 3px 0;
  transition: width 0.1s linear;
}

/* Share row (top of the article) */
.bd-share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 10px;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
/* Language tabs — sit below the share bar, shown only when an English translation exists */
.bd-langtabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.bd-langtab {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 16px; border-radius: 7px; font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted); transition: color 0.15s, background 0.15s;
}
.bd-langtab:hover { color: var(--text); }
.bd-langtab.active { background: var(--brand); color: #fff; }
.bd-share-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-right: auto;
}
.bd-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); font-size: 0.9rem; cursor: pointer;
  text-decoration: none; transition: all 0.15s;
}
.bd-share-btn svg { display: block; }
.bd-share-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); transform: translateY(-2px); }
/* Brand-tinted hover per network */
.bd-share-btn[data-net="x"]:hover        { border-color: #000;    color: #000;    background: #f3f4f6; }
.bd-share-btn[data-net="facebook"]:hover { border-color: #1877f2; color: #1877f2; background: #eef4ff; }
.bd-share-btn[data-net="linkedin"]:hover { border-color: #0a66c2; color: #0a66c2; background: #eaf2fb; }
.bd-share-btn[data-net="whatsapp"]:hover { border-color: #25d366; color: #1ea952; background: #eafaf0; }
.bd-share-btn[data-net="telegram"]:hover { border-color: #229ed9; color: #229ed9; background: #e8f6fd; }
.bd-share-btn[data-net="email"]:hover    { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }
.bd-share-btn.copied { border-color: #16a34a; color: #16a34a; background: rgba(22,163,74,0.08); }

/* Cover image (lives inside .bd-hero, below the meta) */
.bd-cover { margin-top: 40px; }
.bd-cover img {
  width: 100%; border-radius: 16px; object-fit: cover;
  max-height: 460px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  display: block;
}

/* Content layout */
.bd-wrap { max-width: 1280px; margin: 0 auto; padding: 0 5% 80px; }
.bd-grid {
  display: grid; grid-template-columns: 1fr 260px;
  gap: 64px; align-items: start;
  padding-top: 48px;
}

/* Article body */
.bd-article { min-width: 0; }

.bd-body {
  font-size: 1.05rem; line-height: 1.9; color: var(--text);
}
/* Embedded video (Quill .ql-video / any iframe) — responsive 16:9. */
.bd-body iframe, .bd-body .ql-video {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: 10px; margin: 28px 0; display: block;
}
.bd-body > * + * { margin-top: 1.4em; }
.bd-body p { color: hsl(220,16%,26%); }
/* Editorial lead: the opening paragraph reads a little larger. */
.bd-body > p:first-of-type { font-size: 1.2rem; line-height: 1.75; color: hsl(220,16%,30%); }
.bd-body h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin-top: 2.6em; margin-bottom: 0.7em;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.bd-body h2::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 4px; height: 1.05em; margin-right: 12px; border-radius: 3px;
  background: linear-gradient(var(--brand), #7c3aed);
}
.bd-body h3 {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin-top: 2em; margin-bottom: 0.5em; scroll-margin-top: 80px;
}
.bd-body h4 { font-size: 1rem; font-weight: 700; margin-top: 1.6em; scroll-margin-top: 80px; }
.bd-body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.bd-body a:hover { color: var(--brand-dark); }
.bd-body strong { font-weight: 700; color: var(--text); }
.bd-body ul, .bd-body ol { padding-left: 1.6em; }
.bd-body li { margin-bottom: 0.4em; }
.bd-body blockquote {
  border-left: 3px solid var(--brand); margin: 1.6em 0;
  padding: 12px 20px; background: var(--brand-pale);
  border-radius: 0 8px 8px 0; font-style: italic;
  color: var(--text-muted);
}
.bd-body blockquote p { margin: 0; }
.bd-body code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.87em;
  background: hsl(220,20%,95%); color: hsl(222,60%,38%);
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid hsl(220,18%,88%);
}
.bd-body pre {
  background: #0d1117; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 22px 20px; overflow-x: auto;
  margin: 1.6em 0; position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
}
.bd-body pre code {
  background: none; border: none; padding: 0;
  color: #c9d1d9; font-size: 0.85rem; line-height: 1.75;
}
.bd-body table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0;
  font-size: 0.92rem;
}
.bd-body th {
  background: var(--bg-alt); font-weight: 700; text-align: left;
  padding: 10px 14px; border: 1px solid var(--border);
  color: var(--text); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bd-body td { padding: 10px 14px; border: 1px solid var(--border); vertical-align: top; }
.bd-body tr:nth-child(even) td { background: hsl(216,24%,98%); }
.bd-body img { max-width: 100%; border-radius: 10px; margin: 0.5em 0; }
.bd-body hr { border: none; border-top: 2px solid var(--border); margin: 2em 0; }

/* copy button on code blocks */
.bd-copy-btn {
  position: absolute; top: 10px; right: 12px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55); border-radius: 6px;
  padding: 4px 9px; font-size: 0.72rem; cursor: pointer;
  transition: all 0.15s;
}
.bd-copy-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Bottom bar */
.bd-bottom-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 56px; padding-top: 24px;
  border-top: 2px solid var(--border); flex-wrap: wrap; gap: 12px;
}
.bd-back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 600; color: var(--brand);
  transition: gap 0.15s;
}
.bd-back-link:hover { gap: 10px; }
.bd-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff;
  padding: 9px 20px; border-radius: 9px;
  font-size: 0.88rem; font-weight: 700;
  box-shadow: 0 3px 12px var(--brand-glow); transition: all 0.18s;
}
.bd-cta-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }

/* Sidebar */
.bd-sidebar { position: sticky; top: 84px; }

.bd-toc {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.bd-toc-header {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-alt);
}
.bd-toc-nav { padding: 8px 0; }
.bd-toc-placeholder { padding: 12px 18px; font-size: 0.82rem; color: var(--text-muted); }
.bd-toc-link {
  display: block; padding: 6px 18px;
  font-size: 0.82rem; color: var(--text-muted);
  border-left: 3px solid transparent;
  transition: all 0.15s; line-height: 1.4;
}
.bd-toc-link:hover { color: var(--brand); background: var(--brand-pale); }
.bd-toc-link.active { color: var(--brand); border-left-color: var(--brand); background: var(--brand-pale); font-weight: 600; }
.bd-toc-h3 { padding-left: 30px; font-size: 0.78rem; }

/* Sidebar card */
.bd-sidebar-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.bd-sidebar-heading {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.bd-related-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.bd-related-item:last-child { border-bottom: none; }
.bd-related-item:hover { background: var(--brand-pale); }
.bd-related-cat { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); }
.bd-related-title { font-size: 0.84rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.bd-related-date { font-size: 0.74rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }

/* Sidebar CTA */
.bd-sidebar-cta {
  background: var(--dark); border-radius: 14px;
  padding: 22px 18px; color: #fff; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.bd-sidebar-cta::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(ellipse, rgba(15,110,214,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.bd-sidebar-cta-icon { font-size: 1.4rem; color: #7eb9f5; margin-bottom: 10px; }
.bd-sidebar-cta-title { font-size: 0.9rem; font-weight: 800; margin-bottom: 6px; }
.bd-sidebar-cta-desc { font-size: 0.78rem; color: rgba(255,255,255,0.52); line-height: 1.55; margin-bottom: 16px; }
.bd-sidebar-cta-btn {
  display: block; text-align: center;
  background: var(--brand); color: #fff;
  padding: 9px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 700;
  transition: background 0.15s; position: relative;
}
.bd-sidebar-cta-btn:hover { background: var(--brand-dark); }

/* Related section (mobile / bottom) */
.bd-related-section {
  max-width: 1160px; margin: 0 auto;
  padding: 0 5% 64px;
  display: none;
}
.bd-related-header {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 20px; color: var(--text);
}
.bd-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }

/* ═══════════════════════════════════════════════════════════════
   BLOG PUBLIC PAGES
══════════════════════════════════════════════════════════════ */

.pub-hero {
  padding: 52px 5% 36px;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
.pub-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900; letter-spacing: -0.03em; color: #fff; margin-bottom: 10px;
}
.pub-hero p { font-size: 1rem; color: rgba(255,255,255,0.52); }

.cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 20px 5%;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.cat-btn {
  padding: 6px 16px; border-radius: 99px;
  font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-muted); background: var(--bg-card);
  cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.cat-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }
.cat-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Blog search (lives in the .cats bar, pushed to the right) */
.blog-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--bg-card);
  transition: border-color 0.15s;
}
.blog-search:focus-within { border-color: var(--brand); }
.blog-search i { font-size: 0.78rem; color: var(--text-muted); }
.blog-search input[type="search"] {
  border: none; outline: none; background: transparent;
  font-size: 0.82rem; color: var(--text); width: 180px;
}
.blog-search input[type="search"]::placeholder { color: var(--text-muted); }
.blog-search-clear {
  color: var(--text-muted); font-size: 1.1rem; line-height: 1;
  text-decoration: none; padding: 0 2px;
}
.blog-search-clear:hover { color: var(--brand); }

/* Mobile: the search shouldn't float right at a fixed 180px (which left it stranded and
   misaligned under the wrapped category pills). Give it its own full-width row. */
@media (max-width: 640px) {
  .cats { padding: 16px 5%; }
  .blog-search { margin-left: 0; width: 100%; }
  .blog-search input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; }
}

.blog-layout {
  display: grid; grid-template-columns: 1fr 260px;
  gap: 32px; padding: 32px 5% 72px; align-items: start;
}

.posts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.post-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: all 0.2s;
  display: block; color: inherit;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(15,110,214,0.22); }
.post-img {
  height: 200px;
  background: linear-gradient(135deg, hsl(214,60%,88%), hsl(214,80%,76%));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: rgba(15,110,214,0.25); overflow: hidden;
}
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 20px 22px 22px; }
.post-cat { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: 6px; }
.post-title { font-size: 1rem; font-weight: 700; line-height: 1.45; margin-bottom: 8px; color: var(--text); }
.post-excerpt { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.post-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 14px; display: flex; align-items: center; gap: 6px; }
/* Separator between the date and the view count — the flex gap already spaces
   them, so the dot only needs to sit back visually. */
.post-meta-dot { opacity: .45; }

.sidebar-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.sidebar-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 0; font-size: 0.84rem;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover { color: var(--brand); }

.empty { text-align: center; padding: 64px 20px; color: var(--text-muted); }
.empty i { font-size: 2.5rem; margin-bottom: 14px; display: block; color: rgba(15,110,214,0.2); }
.empty p { font-size: 0.9rem; }
.related-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); transition: all 0.2s; display: block; }
.related-card:hover { transform: translateY(-2px); border-color: rgba(15,110,214,0.25); box-shadow: var(--shadow-md); }
.related-card-title { font-size: 0.88rem; font-weight: 700; line-height: 1.4; margin-bottom: 6px; color: var(--text); }
.related-card-meta { font-size: 0.74rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   LOGIN & AUTH FORMS
══════════════════════════════════════════════════════════════ */

.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, hsl(214,60%,96%) 0%, var(--bg) 100%);
}
.login-container { width: 100%; max-width: 450px; }
.login-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 40px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand); }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.login-logo img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; }
.login-logo span { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--brand); }
.login-subtitle { font-size: 0.85rem; color: var(--text-muted); }
.input-wrapper { position: relative; }
.input-wrapper > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; pointer-events: none; }
.input-with-icon { width: 100%; padding: 11px 14px 11px 38px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: 0.9rem; outline: none; transition: all 0.15s; font-family: inherit; }
.input-with-icon:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); background: #fff; }
.btn-login { width: 100%; padding: 12px; border-radius: var(--r-md); font-size: 0.9rem; font-weight: 700; cursor: pointer; border: none; background: var(--brand); color: #fff; box-shadow: 0 3px 12px var(--brand-glow); transition: all 0.15s; margin-top: 8px; }
.btn-login:hover { background: var(--brand-dark); transform: translateY(-1px); }
.error-msg { background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.18); color: #dc2626; padding: 10px 14px; border-radius: var(--r-md); font-size: 0.8rem; font-weight: 500; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.back-home { text-align: center; margin-top: 18px; font-size: 0.82rem; }
.back-home a { color: var(--text-muted); transition: color 0.15s; }
.back-home a:hover { color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════
   PLUGIN DETAIL HERO
══════════════════════════════════════════════════════════════ */

.plugin-hero {
  background: linear-gradient(135deg, hsl(214,60%,97%) 0%, hsl(220,30%,99%) 100%);
  border-bottom: 1px solid var(--border); padding: 0 5%;
}
.plugin-hero-inner { max-width: 1240px; margin: 0 auto; padding: 40px 0 36px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }   /* same cap as hero-container */
.plugin-hero-left { display: flex; align-items: flex-start; gap: 20px; flex: 1; min-width: 0; }
.plugin-hero-icon { width: 80px; height: 80px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--brand); flex-shrink: 0; overflow: hidden; }
.plugin-hero-icon img { width:100%;height:100%;object-fit:contain;padding:10px; }
.plugin-hero-name { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.03em; color: var(--text); margin-bottom: 6px; }
.plugin-hero-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; }
.plugin-hero-meta i { color: var(--brand); }
.plugin-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.plugin-hero-tag { font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--border); color: var(--text-muted); }

/* Breadcrumb, price badges and the "get this app" card used to be re-declared
   inside plugins/detail.html for a dark hero. They belong to the component, not
   to one page, so they live here. */
.plugin-hero-inner { padding: 44px 0 40px; align-items: center; }
.plugin-hero-icon { width: 100px; height: 100px; border-radius: 24px; box-shadow: 0 6px 20px rgba(15,23,42,0.10); }
.plugin-hero-name { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 10px; }

.plugin-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.73rem; margin-bottom: 10px; }
.plugin-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.13s; }
.plugin-breadcrumb a:hover { color: var(--text); }
.plugin-breadcrumb i { font-size: 0.55rem; color: var(--border); }
.plugin-breadcrumb span { color: var(--text); font-weight: 600; }

.plugin-hero-meta { gap: 8px; margin-bottom: 12px; }
.plugin-hero-meta span {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 99px;
  font-size: 0.75rem; color: var(--text-muted);
}
/* Price is the one chip that carries a state, so it is the one chip with colour. */
.badge-free-hero, .badge-premium-hero {
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.65rem !important;
}
.badge-free-hero { background: #e9f7ef !important; border-color: #b7e4c7 !important; color: #15803d !important; }
.badge-premium-hero { background: #f3edfd !important; border-color: #d8c7fa !important; color: #6d28d9 !important; }

.plugin-hero-get {
  background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 24px;
  box-shadow: 0 8px 28px rgba(15,23,42,0.07);
  display: flex; flex-direction: column; gap: 0;
  min-width: 240px; flex-shrink: 0; position: relative; z-index: 1;
}
.plugin-hero-get .plugin-sidebar-label { color: var(--text-muted); margin-bottom: 12px; }
.plugin-hero-get .plugin-price-big { margin-bottom: 2px; }
.plugin-hero-get .plugin-price-sub { margin-bottom: 18px; }
.plugin-hero-get .btn-full { margin-bottom: 0; }

/* Plugin detail body */
/* minmax(0,1fr) not 1fr: a grid item defaults to min-width:auto and refuses to
   shrink below its content's intrinsic width, so one wide child (the tabs bar)
   would stretch the whole page past the viewport. */
/* The 5% gutter lives on the wrapper, not on .plugin-detail-body itself: with
   box-sizing:border-box a max-width on a padded element would eat the gutter out of
   the 1240px, leaving this page narrower than every other capped section. */
.plugin-detail-wrap { padding: 0 5%; }
.plugin-detail-body { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; padding: 36px 0 72px; align-items: start; }  /* 1240px = same cap as hero-container; collapses to 1fr at ≤900px in the RESPONSIVE section */
/* overflow-x:auto makes this a scroll container, so its intrinsic width stops
   propagating to the grid — the tabs scroll sideways on a phone instead of
   stretching the page. */
.plugin-tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.plugin-tabs-bar::-webkit-scrollbar { display: none; }
.plugin-tabs-bar > * { flex: 0 0 auto; }
.plugin-tab-btn { padding: 10px 18px; font-size: 0.84rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all 0.15s; }
.plugin-tab-btn:hover { color: var(--brand); }
.plugin-tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.plugin-tab-pane { display: none; }
.plugin-tab-pane.active { display: block; }
/* ── Screenshot gallery ────────────────────────────────────────────────────
   auto-fit with a 260px floor: three across on a wide screen, two on a tablet,
   one on a phone, without a breakpoint per step. minmax(0,…) so a wide image
   cannot push the grid past its column. */
.plugin-shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px; margin-bottom: 26px;
}
.plugin-shot {
  display: block; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: #fff; line-height: 0;
  transition: border-color .13s, box-shadow .13s;
}
.plugin-shot:hover { border-color: var(--brand); box-shadow: 0 6px 20px rgba(15,23,42,.10); }
.plugin-shot img { width: 100%; height: auto; display: block; }
/* A single screenshot should not stretch to the full column width — at 1240px
   that blows one image up past its own resolution. */
.plugin-shots:has(> :only-child) { grid-template-columns: minmax(0, 620px); }

.plugin-desc-thin {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 10px 14px; border-radius: 10px;
  background: var(--brand-pale, #eef5fd); color: var(--text-muted);
  font-size: 0.82rem;
}
.plugin-desc-thin i { color: var(--brand); }
/* Markdown tables inside the description get their own scroll box (wrap_tables). */
.plugin-table-wrap { overflow-x: auto; margin: 12px 0; }

.plugin-desc-content { font-size: 0.93rem; line-height: 1.8; color: var(--text-muted); }
.plugin-desc-content h2,.plugin-desc-content h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 1.4em 0 0.5em; }
/* Descriptions are several paragraphs now, not one line, so they need the gap.
   Nothing set it before, because there was never more than a single <p> here. */
.plugin-desc-content p { margin: 0 0 1.1em; }
.plugin-desc-content p:last-child { margin-bottom: 0; }
.plugin-desc-content ul { padding-left: 1.4em; margin: 0.6em 0; }
.plugin-desc-content li { margin-bottom: 4px; }
.plugin-desc-content pre { background: hsl(214,30%,96%); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 0.8rem; overflow-x: auto; margin: 12px 0; }
.plugin-desc-content code { font-family: 'JetBrains Mono',monospace; font-size: 0.85em; }

.plugin-sidebar-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); margin-bottom: 16px; }
.plugin-sidebar-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 14px; display: block; }
.plugin-price-big { font-size: 2.2rem; font-weight: 900; color: var(--text); line-height: 1; margin-bottom: 4px; }
.plugin-price-sub { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 16px; }
.plugin-info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.plugin-info-row:last-child { border-bottom: none; }
.plugin-info-row-label { color: var(--text-muted); }
.plugin-info-row-val { font-weight: 600; color: var(--text); text-align: right; }

.plugin-api-block { background: hsl(222,30%,14%); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.plugin-api-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: hsl(222,30%,18%); font-size: 0.72rem; font-weight: 700; color: hsl(210,20%,55%); font-family: 'JetBrains Mono', monospace; }
.plugin-api-copy { background: none; border: 1px solid hsl(210,20%,35%); border-radius: 5px; color: hsl(210,20%,65%); padding: 3px 10px; font-size: 0.68rem; cursor: pointer; transition: all 0.15s; }
.plugin-api-copy:hover { background: hsl(210,20%,25%); color: #fff; }
.plugin-api-pre { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: hsl(210,30%,80%); padding: 16px; overflow-x: auto; white-space: pre; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   PLUGIN STORE
══════════════════════════════════════════════════════════════ */

.store-hero { position: relative; overflow: hidden; padding: 56px 5% 52px; background: linear-gradient(135deg, #0a3d82 0%, var(--brand) 55%, #2b8bf0 100%); border-bottom: 1px solid rgba(0,0,0,0.06); }
.store-hero::before { content: ''; position: absolute; width: 460px; height: 460px; top: -220px; right: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); pointer-events: none; }
.store-hero::after { content: ''; position: absolute; width: 380px; height: 380px; bottom: -250px; left: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(120,190,255,0.4), transparent 70%); pointer-events: none; }
/* max-width 1240px + the 5% gutter on .store-hero: same cap as hero-container, so the
   store hero lines up with every other section instead of stretching on wide screens. */
.store-hero-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.store-hero .section-label { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 5px 13px; border-radius: 99px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.store-hero h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -0.035em; margin-bottom: 8px; color: #fff; }
.store-hero p { font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 0; max-width: 460px; line-height: 1.55; }
.store-hero-trust { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 20px; }
.store-hero-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.store-hero-trust i { color: #9ad4ff; }
.store-stats { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
.store-stat { text-align: center; min-width: 96px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; padding: 16px 22px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.store-stat-num { font-size: 1.9rem; font-weight: 900; color: #fff; line-height: 1; }
.store-stat-lbl { font-size: 0.66rem; color: rgba(255,255,255,0.82); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.store-body-wrap { padding: 0 5%; }
.store-body { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 32px 0 80px; align-items: start; }   /* same cap as hero-container */
.store-sidebar { position: sticky; top: 82px; }
.store-sidebar-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; padding: 0 4px; }
.store-search-wrap { position: relative; margin-bottom: 20px; }
.store-search-wrap i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.8rem; pointer-events: none; }
.store-search { width: 100%; padding: 9px 12px 9px 32px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.84rem; background: #fff; color: var(--text); outline: none; box-sizing: border-box; transition: border-color 0.15s; }
.store-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,110,214,0.08); }
.store-cat-list { display: flex; flex-direction: column; gap: 3px; }
.store-cat-btn { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; font-size: 0.83rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: all 0.13s; border: none; background: none; cursor: pointer; width: 100%; text-align: left; }
.store-cat-btn:hover { background: var(--brand-pale); color: var(--brand); }
.store-cat-btn.active { background: var(--brand-pale); color: var(--brand); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); }
.store-cat-count { font-size: 0.7rem; font-weight: 700; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; color: var(--text-muted); }
.store-cat-btn.active .store-cat-count { background: rgba(15,110,214,0.12); border-color: rgba(15,110,214,0.2); }
.store-grid-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.store-grid-title { font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.store-grid-count { font-size: 0.8rem; color: var(--text-muted); margin-left: 8px; }
.store-sort { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; background: #fff; color: var(--text); outline: none; cursor: pointer; }
/* min(300px, 100%) so the 300px track minimum can never exceed a narrow phone
   container and push the grid past the viewport. */
.plugins-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 10px; }
.plugin-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(16,24,40,0.04), 0 1px 10px rgba(16,24,40,0.03); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; }
.plugin-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand), #4f9bf5); opacity: 0; transition: opacity 0.18s ease; }
.plugin-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,110,214,0.15); border-color: rgba(15,110,214,0.35); }
.plugin-card:hover::before { opacity: 1; }
.plugin-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.plugin-card-meta { display: flex; align-items: flex-start; gap: 13px; flex: 1; min-width: 0; }
.plugin-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-pale), #fff); border: 1px solid rgba(15,110,214,0.14); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; color: var(--brand); flex-shrink: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(15,110,214,0.08); }
.plugin-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.plugin-name { font-size: 0.98rem; font-weight: 800; margin-bottom: 2px; color: var(--text); letter-spacing: -0.01em; }
.plugin-author { font-size: 0.72rem; color: var(--text-muted); }
.plugin-category { font-size: 0.67rem; color: var(--brand); font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.plugin-desc { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; flex: 1; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plugin-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.store-tag { font-size: 0.66rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.plugin-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--border); }
.plugin-footer-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plugin-price-amount { font-size: 1.06rem; font-weight: 900; color: var(--text); letter-spacing: -0.02em; }
.plugin-price-amount .cur { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-right: 2px; }
.plugin-price-sub { font-size: 0.72rem; color: var(--text-muted); }
.plugin-price-free { font-size: 1.06rem; font-weight: 900; color: #15803d; letter-spacing: -0.01em; }
.plugin-dl-count { font-size: 0.7rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.badge-free { background: rgba(21,128,61,0.1); color: #15803d; border: 1px solid rgba(21,128,61,0.2); padding: 4px 11px; border-radius: 99px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 5px; }
.badge-premium { background: linear-gradient(135deg, #7c3aed, #b048e8); color: #fff; border: none; padding: 4px 11px; border-radius: 99px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 3px 9px rgba(124,58,237,0.32); }
.plugin-price.free { color: #15803d; }

.btn-plugin { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 9px; font-size: 0.8rem; font-weight: 700; transition: all 0.15s; white-space: nowrap; }
.btn-plugin-primary { background: linear-gradient(135deg, var(--brand), #2b8bf0); color: #fff; box-shadow: 0 3px 10px var(--brand-glow); }
.btn-plugin-primary:hover { filter: brightness(1.06); }
.plugin-card:hover .btn-plugin-primary { box-shadow: 0 6px 16px var(--brand-glow); }
.btn-full { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; transition: all 0.18s; margin-bottom: 10px; cursor: pointer; border: none; }
.btn-full-primary { background: var(--brand); color: #fff; box-shadow: 0 3px 12px var(--brand-glow); }
.btn-full-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-full-secondary { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.btn-full-secondary:hover { background: var(--brand-pale); color: var(--brand); border-color: rgba(15,110,214,0.25); }

/* ═══════════════════════════════════════════════════════════════
   PURCHASE / FORM PAGES
══════════════════════════════════════════════════════════════ */

.form-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, hsl(214,60%,96%) 0%, var(--bg) 100%); }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 36px; width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); }
.form-card h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.form-card .sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px; }
.price-box { background: var(--brand-pale); border: 1px solid rgba(15,110,214,0.18); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; }
.price-box .name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.price-box .price { font-size: 1.3rem; font-weight: 900; color: var(--brand); }
.form-input { width: 100%; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 0.9rem; font-family: inherit; outline: none; transition: all 0.15s; }
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); background: #fff; }
.btn-form { width: 100%; padding: 13px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; border: none; background: var(--brand); color: #fff; box-shadow: 0 3px 12px var(--brand-glow); transition: all 0.18s; }
.btn-form:hover { background: var(--brand-dark); transform: translateY(-1px); }
.form-note { font-size: 0.76rem; color: var(--text-muted); margin-top: 12px; text-align: center; }
.back-link { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; transition: color 0.15s; }
.back-link:hover { color: var(--brand); }
.msg-error { padding: 10px 14px; border-radius: 8px; font-size: 0.83rem; margin-bottom: 8px; background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.18); color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════
   PLUGIN SLIDER (homepage #plugins)   — was an inline <style> in home.html
   Responsive rules live in the RESPONSIVE section below (≤900px, ≤560px).
══════════════════════════════════════════════════════════════ */
.ps-wrap {
  display: flex; gap: 24px; margin: 48px auto 0;
  max-width: 1240px;                 /* same cap as hero-container */
  align-items: stretch; min-height: 300px;
}
.ps-feat-slot {
  flex: 0 0 54%; max-width: 54%;
}
.ps-feat {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(158,200,255,0.3);
  border-radius: 20px; padding: 36px 32px 28px;
  height: 100%; display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.ps-feat-head { display: flex; align-items: flex-start; gap: 18px; }
.ps-feat-icon {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 18px; background: rgba(158,200,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #9ec8ff; overflow: hidden;
}
.ps-feat-icon img { width: 100%; height: 100%; object-fit: contain; }
.ps-feat-meta { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ps-feat-name { font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1.2; }
.ps-feat-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-feat-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; border-radius: 99px; padding: 3px 10px;
  background: rgba(158,200,255,0.13); color: #9ec8ff;
}
.ps-feat-badge.premium { background: rgba(251,191,36,0.13); color: #fbbf24; }
.ps-feat-badge.cat { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.ps-feat-desc {
  font-size: 0.875rem; color: rgba(255,255,255,0.58); line-height: 1.65;
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-feat-footer {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px;
}
.ps-feat-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 10px;
  background: rgba(158,200,255,0.15); color: #9ec8ff;
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(158,200,255,0.28); transition: all 0.2s;
}
.ps-feat-link:hover {
  background: rgba(158,200,255,0.28); border-color: rgba(158,200,255,0.55);
  color: #c8dfff;
}
/* Thumbnail grid */
.ps-thumbs {
  flex: 1; display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; align-content: start;
}
.ps-thumb {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 13px 8px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; cursor: pointer; transition: all 0.18s;
  user-select: none;
}
.ps-thumb:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(158,200,255,0.35);
  transform: translateY(-2px);
}
.ps-thumb.ps-active {
  background: rgba(158,200,255,0.13);
  border-color: rgba(158,200,255,0.55);
  box-shadow: 0 0 0 1px rgba(158,200,255,0.25), 0 4px 16px rgba(0,0,0,0.3);
}
.ps-thumb-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(158,200,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: #9ec8ff; overflow: hidden;
}
.ps-thumb-icon img { width: 100%; height: 100%; object-fit: contain; }
.ps-thumb-name { font-size: 0.64rem; font-weight: 700; color: #e2eeff; line-height: 1.25; }
.ps-thumb-tag {
  font-size: 0.5rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(158,200,255,0.1); color: #9ec8ff;
  border-radius: 99px; padding: 1px 6px;
}
.ps-thumb-tag.premium { background: rgba(251,191,36,0.1); color: #fbbf24; }
/* Progress bar */
.ps-progress {
  height: 2px; background: rgba(255,255,255,0.06);
  border-radius: 2px; margin-top: 16px; overflow: hidden;
}
.ps-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #9ec8ff, #6aa3f8);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING (homepage #pricing)   — was an inline <style> in home.html
   Responsive rules live in the RESPONSIVE section below (≤1100px, ≤560px).
══════════════════════════════════════════════════════════════ */
#pricing {
  padding: 88px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
#pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(15,110,214,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hp-pricing-header {
  text-align: center;
  position: relative;
}
/* Currency switcher pill */
.hp-curr-wrap {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px;
  gap: 4px;
  margin: 20px 0 52px;
}
.hp-curr-btn {
  padding: 6px 22px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: background 0.18s, color 0.18s;
}
.hp-curr-btn.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 10px var(--brand-glow);
}
/* 4-col plan grid (Free / Starter / Pro / Enterprise) — separate cards */
.hp-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1380px;
  margin: 0 auto;
  align-items: stretch;
}
.hp-plan-col {
  display: flex;
  flex-direction: column;
  padding: 30px 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hp-plan-col:hover {
  transform: translateY(-6px);
  border-color: rgba(15,110,214,0.35);
  box-shadow: 0 16px 38px rgba(15,110,214,0.12);
}
.hp-plan-col.hp-featured {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 18px 50px var(--brand-glow);
  transform: scale(1.05);
  z-index: 2;
}
.hp-plan-col.hp-featured:hover {
  transform: scale(1.05) translateY(-6px);
  box-shadow: 0 26px 62px var(--brand-glow);
}
/* badge */
.hp-plan-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 14px;
  width: fit-content;
}
.hp-plan-badge-default {
  background: rgba(15,110,214,0.12);
  color: var(--brand);
}
.hp-plan-badge-featured {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
/* tier label */
.hp-plan-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.hp-featured .hp-plan-name { color: #fff; }

/* price block */
.hp-plan-price-block { margin: 18px 0 6px; }
.hp-plan-price-num {
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--text);
}
.hp-featured .hp-plan-price-num { color: #fff; }
.hp-plan-price-unit {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}
.hp-featured .hp-plan-price-unit { color: rgba(255,255,255,0.65); }
.hp-plan-billing {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 5px;
  min-height: 18px;
}
.hp-featured .hp-plan-billing { color: rgba(255,255,255,0.55); }
/* The "Billed $X/year" note — bolder and a touch larger than the plain billing line. */
.hp-plan-billing.hp-billing-note { font-size: 0.85rem; font-weight: 700; }

/* desc */
.hp-plan-desc {
  font-size: 0.80rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 12px 0 20px;
  flex: 0;
}
.hp-featured .hp-plan-desc { color: rgba(255,255,255,0.7); }

/* divider */
.hp-plan-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 18px;
}
.hp-featured .hp-plan-divider { border-top-color: rgba(255,255,255,0.18); }

/* features */
.hp-plan-features {
  list-style: none;
  flex: 1;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.73rem;
}
.hp-plan-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.73rem;
  color: var(--text);
}
.hp-featured .hp-plan-features li { color: rgba(255,255,255,0.88); }
.hp-plan-features li.excluded {
  opacity: 0.38;
  text-decoration: line-through;
}
.hp-plan-features li i {
  font-size: 0.7rem;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.hp-plan-features li .fi-check { color: var(--success); }
.hp-featured .hp-plan-features li .fi-check { color: rgba(255,255,255,0.9); }
.hp-plan-features li .fi-x { color: var(--text-muted); }

/* CTA */
.hp-plan-cta {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.18s;
  border: none;
  cursor: pointer;
}
.hp-cta-default {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}
.hp-cta-default:hover {
  background: var(--brand-pale);
  color: var(--brand);
  border-color: rgba(15,110,214,0.25);
}
.hp-cta-featured {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 3px 14px rgba(0,0,0,0.15);
}
.hp-cta-featured:hover {
  background: #f0f6ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
/* "View all capabilities" link — centered, pinned just above the CTA, and
   visible on the blue Most-Popular card */
.hp-caps-link {
  margin-top: auto;
  align-self: center;
  margin-bottom: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hp-featured .hp-caps-link { color: #fff; }
/* "View more" row */
.hp-pricing-more {
  text-align: center;
  margin-top: 52px;
}
.hp-pricing-more a {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 32px;
  border: 1px solid rgba(15,110,214,0.3);
  border-radius: 12px;
  background: var(--brand-pale, rgba(15,110,214,0.06));
  transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.hp-pricing-more a:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--brand-glow);
}
.plugins-grid-5col { grid-template-columns: repeat(5, 1fr); }
.plugin-chip .tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--brand-pale); color: var(--brand); border-radius: 99px; padding: 2px 8px; }
.plugin-chip .tag.premium { background: rgba(245,158,11,0.10); color: #b45309; }

/* Pagination */
.pagination-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; margin-top: 28px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-muted);
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
  transition: all 0.15s;
}
.page-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.page-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ·  public theme
   ───────────────────────────────────────────────────────────────
   Breakpoint scale (max-width), largest → smallest:
       1100 — hero stacks; pricing 4→2 cols; plugin grids relax
        960 — blog-detail sidebar/TOC hide
        900 — 2-col sections stack; plugin slider stacks; grids → 2/3
        768 — nav → hamburger; single column; terminal/install tighten
        680 — pricing-card hover scaling eases
        640 — blog-detail typography shrinks
        600 — in-app screenshot tabs compact  (see .sia block above)
        560 — pricing → 1 col; plugin slider thumbnails → 4
        480 — footer/install/pricing → 1 col; hero CTAs stack
   Base rules for a section live with that section; only the width-dependent
   overrides live here. Where several breakpoints target the SAME selector
   (plugin grids, pricing, hero stats), the wider-width block comes first so the
   narrower-width override wins the cascade. Blocks that target isolated
   selectors (e.g. .bd-* blog detail) may sit out of order harmlessly.
══════════════════════════════════════════════════════════════ */

/* Install card stacks earlier than the generic 900px: below ~1024px the fixed
   480px requirements column would out-width the steps column (inverting the
   "compact" intent), so collapse to a single column here. */
@media (max-width: 1024px) {
  .install-card { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .hero-container { grid-template-columns: 1fr; gap: 52px; }
  /* Stacked: drop the side-column vertical padding so it doesn't compound with the
     grid gap (and .hero's 100px top) into excess whitespace. */
  .hero-left, .hero-right { padding: 0; }
  .hero-right { max-width: 540px; margin: 0 auto; }
  .plugins-grid-5col { grid-template-columns: repeat(4, 1fr); }
  .plugins-pro-grid { grid-template-columns: repeat(4, 1fr); }
  /* Hero stacks here, so the stats column is full-width — switch the 4-across
     bar to a 2×2 glass-card grid and let the terminal wrap from this point on. */
  .hero-stats { border-top: none; padding: 14px 0; }
  /* The stat GRID is .hero-stats-inner (5-col on desktop) — override THAT, not the
     full-bleed band, or the 5 columns stay cramped on phones. */
  .hero-stats-inner {
    width: 90%;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .hero-stat {
    padding: 16px 16px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
  }
  .hero-stat:first-child { padding-left: 16px; }
  .hero-stat:not(:last-child)::after { display: none; }
  .hero-stat:hover { transform: none; }
  /* 5 stats over 2 columns — let the live bars stat span the final full row */
  .hero-stat-live { grid-column: 1 / -1; text-align: center; }
  .hero-stat-live .hero-speed { justify-content: center; }
  .terminal-body { white-space: normal; overflow-x: hidden; }
  .t-line { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  /* The stats are 2-up cards from here, so a nowrap value ("Self-Hosted") no longer has a
     full column to sit in — let it wrap instead of pushing out of its card. */
  .hero-stat-num { white-space: normal; overflow-wrap: anywhere; }
  /* Pricing: 4 plan columns → 2, and drop the featured card's scale-up. */
  .hp-plan-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 680px; padding: 0 20px; }
  .hp-plan-col.hp-featured { transform: none; }
  .hp-plan-col.hp-featured:hover { transform: translateY(-6px); }
}

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .cf-2col { grid-template-columns: 1fr; gap: 18px; max-width: 560px; }
  .install-card { grid-template-columns: 1fr; }
  .plugins-pro-grid { grid-template-columns: repeat(3, 1fr); }
  .plugins-grid-5col { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* minmax(0,1fr), not 1fr — the column must be allowed to shrink below its
     content's intrinsic width or wide children stretch the page (see base rules). */
  .store-body { grid-template-columns: minmax(0, 1fr); }
  .plugin-detail-body { grid-template-columns: minmax(0, 1fr); }
  /* Store: the sidebar stops sticking and its category list becomes a horizontal,
     swipeable pill row so it never eats a screen of vertical space above the grid. */
  .store-sidebar { position: static; top: auto; }
  .store-cat-list { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .store-cat-btn { flex: 0 0 auto; width: auto; }
  /* Plugin detail: the "Get this app" card was min-width:240px and floated; once the
     hero stacks it should span the column. */
  .plugin-hero-get { min-width: 0; width: 100%; }
  /* Plugin slider: feature card stacks above the thumbnail grid. */
  .ps-wrap { flex-direction: column; }
  .ps-feat-slot { flex: none; max-width: 100%; }
  .ps-thumbs { grid-template-columns: repeat(6, 1fr); }

  /* Showcase: stack tabs above the screenshot and lay them out horizontally */
  .showcase-wrap { grid-template-columns: 1fr; gap: 20px; }
  .showcase-tabs {
    flex-direction: row; overflow-x: auto; gap: 10px;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  .showcase-tab { flex: 1 0 auto; }
  .showcase-tab small { display: none; }
}

/* ── Navbar → drawer ──────────────────────────────────────────────────────────
   Kept apart from the 768px block on purpose. The bar's contents stop fitting at
   about 1080px, not 768: between those two widths the full nav was forced into
   a space too small for it, so labels wrapped under their icons and at 800px the
   Login button ran off the right edge of the viewport. That band is exactly where
   iPad landscape (1024) and small laptops sit.

   The number tracks the bar's contents and has to be re-measured whenever an item
   is added: Get Started pushed the limit to ~1080, then the Home link pushed it to
   ~1140. 1200 leaves headroom for the longest translation — Indonesian renders
   "Beranda / Kenapa Vinza / Aplikasi" where English has "Home / Why Vinza / Apps". */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 768px) {
  .hero { padding: 80px 5% 64px; }
  .hero-heading { font-size: 2.06rem; }
  .hero-sub { max-width: 100%; }
  /* The tagline pill is the least load-bearing thing in the hero, and on a phone it
     costs a whole line above the fold before the heading — the message it carries is
     repeated by the heading and subtitle right under it. */
  .hero-badge { display: none; }
  /* The language globe is fixed to the corner, so on a phone it simply sits on top of the
     page — it landed squarely on the hero's install command. Drop it here; the drawer
     carries the same two choices (.nav-mobile-lang in elements/_pub_navbar.html). */
  .lang-fab { display: none; }
  .plugins-pro-grid { grid-template-columns: repeat(2, 1fr); }
  .plugins-grid-5col { grid-template-columns: repeat(2, 1fr); }
  .install-card { padding: 24px 20px; gap: 28px; }
  .install-cmd { font-size: 0.72rem; }
  /* Keep the install command box within the viewport — no overlap/overflow */
  .install-cmd-wrap { max-width: 100%; min-width: 0; }
  /* Terminal already wraps from 1100px; center it, keep it within the viewport,
     and tighten padding/size on phones. */
  .terminal-window { margin: 0 auto; max-width: 100%; }
  .terminal-body { padding: 16px 14px; font-size: 0.72rem; }
  .content-container { padding: 24px 20px; }
  .header-bar { padding: 0 20px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; margin: -24px -20px 24px; }
}

/* Pricing cards collapse to a single full-width column below ~645px (auto-fill
   minmax(280px) inside a 90%-width section). Tame the hover/featured scale across
   that whole zone so an enlarged card can never exceed the viewport and trigger
   horizontal scroll. Featured stays subtly larger so "Most Popular" reads on mobile. */
@media (max-width: 680px) {
  .pricing-card.featured { transform: scale(1.04); }
  .pricing-card:hover { transform: scale(1.03); }
  .pricing-card.featured:hover { transform: scale(1.06); }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .install-req-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 26px 22px; }   /* reclaim width on small phones */
  .hero-cta { flex-direction: column; }
  .btn-hero-primary, .btn-hero-secondary { justify-content: center; }
  .install-card { padding: 16px; gap: 24px; }
  .install-step { gap: 10px; }
  .install-step-num { width: 26px; height: 26px; font-size: 0.72rem; }
  .install-cmd { font-size: 0.68rem; padding: 9px 10px; }
  .install-copy { padding: 0 10px; }
  .terminal-body { padding: 12px 10px; font-size: 0.68rem; line-height: 1.75; }
}

/* Vinza Store (/plugins/) + plugin detail (/plugins/<id>/) — phones */
@media (max-width: 640px) {
  /* ── Store index ── */
  .store-hero { padding: 40px 5% 34px; }
  .store-hero-inner { gap: 20px; }
  .store-hero p { font-size: 0.92rem; }
  .store-stats { width: 100%; gap: 10px; }
  .store-stat { flex: 1; min-width: 0; padding: 12px 8px; }
  .store-stat-num { font-size: 1.5rem; }
  .store-body { padding: 22px 0 56px; gap: 16px; }
  .plugins-store-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Search + sort drop to their own full-width row under the title. */
  .store-grid-header > div:last-child { width: 100%; }
  .store-grid-header .store-search-wrap { flex: 1; }

  /* ── Plugin detail ── */
  .plugin-hero-inner { padding: 26px 0 24px; flex-direction: column; align-items: flex-start; }
  .plugin-hero-left { gap: 14px; }
  .plugin-hero-icon { width: 72px; height: 72px; border-radius: 18px; }
  .plugin-hero-get { padding: 20px; }
  .plugin-detail-body { padding: 24px 0 52px; gap: 24px; }   /* gutter is on .plugin-detail-wrap */
  /* In-content screenshot / version grids: let them go single-column on a phone. */
  .plugin-detail-body [style*="minmax(220px"] { grid-template-columns: 1fr !important; }
}

/* Blog detail responsive */
@media (max-width: 960px) {
  .bd-grid { grid-template-columns: 1fr; gap: 40px; }
  .bd-sidebar { position: static; }
  .bd-toc { display: none; }
  .bd-related-section { display: block; }
  .bd-sidebar-card { display: none; }
}

@media (max-width: 640px) {
  .bd-title { font-size: 1.5rem; }
  .bd-excerpt { font-size: 0.95rem; }
  .bd-body { font-size: 1rem; }
  .bd-hero-inner { padding: 36px 5% 32px; }
  .bd-wrap { padding-bottom: 48px; }
  .bd-body h2 { font-size: 1.25rem; }
}

/* Phones (≤ 560px): homepage pricing → one column; plugin slider tightens.
   (Kept last so it wins over the ≤900 / ≤1100 rules above at equal specificity.) */
@media (max-width: 560px) {
  /* Pricing — single column, with side margin so cards clear the screen edges. */
  #pricing { padding: 56px 0; }
  .hp-plan-grid { grid-template-columns: 1fr; max-width: 460px; padding: 0 18px; gap: 16px; }
  .hp-plan-col { margin: 0; }
  /* Plugin slider — 4-across thumbnails, smaller feature card. */
  .ps-thumbs { grid-template-columns: repeat(4, 1fr); }
  .ps-feat { padding: 24px 18px 20px; }
  .ps-feat-icon { width: 54px; height: 54px; font-size: 1.5rem; }
  .ps-feat-name { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECKOUT
   A page read once and acted on. Two columns: what you are buying
   and what we need from you on the left, the money and the button
   on the right, pinned so the total is never scrolled away from.
══════════════════════════════════════════════════════════════ */
.co { max-width: 1020px; margin: 0 auto; padding: 30px 5% 96px; }
.co-back { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-muted); text-decoration: none; }
.co-back:hover { color: var(--text); }

.co-head { margin: 18px 0 26px; }
.co-head h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -.03em; color: var(--text); margin: 0 0 8px; }
.co-order { font-size: .85rem; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-order-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .76rem;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; color: var(--text);
}

.co-msgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.co-msg { padding: 11px 14px; border-radius: 10px; font-size: .85rem; border: 1px solid transparent; }
.co-msg-success { background: #e9f7ef; border-color: #b7e4c7; color: #15803d; }
.co-msg-error { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.22); color: #b91c1c; }

/* minmax(0,…) so a long licence key cannot widen its column past the grid */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 20px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.co-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; }

.co-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.co-card-head h3 { font-size: .95rem; font-weight: 800; color: var(--text); margin: 0; display: flex; align-items: center; gap: 9px; }
.co-card-head h3 i { color: var(--text-muted); font-size: .85rem; }
.co-card-head h3 em { font-style: normal; font-weight: 500; font-size: .78rem; color: var(--brand); margin-left: 2px; }
.co-required { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #b45309; background: #fef3c7; border-radius: 5px; padding: 3px 8px; }

/* ── item ── */
.co-item { display: flex; align-items: center; gap: 14px; }
.co-item-icon {
  width: 50px; height: 50px; border-radius: 13px; flex: none; overflow: hidden;
  border: 1px solid var(--border); background: #fff; color: var(--brand); font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.co-item-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.co-item-meta { flex: 1; min-width: 0; }
.co-item-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0; }
.co-item-kind { font-size: .8rem; color: var(--text-muted); margin: 2px 0 0; }
.co-item-price { font-size: 1rem; font-weight: 800; color: var(--text); white-space: nowrap; }
.co-item-foot { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); }
.co-item-foot .mono, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem; color: var(--text); }

/* ── licence picker ── */
.co-lics { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.co-lic {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .13s, background .13s;
}
.co-lic:hover { border-color: var(--brand); }
.co-lic.is-on { border-color: var(--brand); background: var(--brand-pale, #eef5fd); }
/* An option that would destroy value is shown and explained, not hidden — the
   customer should see that the licence exists and why it cannot be chosen. */
.co-lic.is-off { opacity: .55; cursor: not-allowed; }
.co-lic.is-off:hover { border-color: var(--border); }
.co-lic input { margin-top: 3px; flex: none; accent-color: var(--brand); }
.co-lic-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-lic-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.co-lic-key { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; font-weight: 700; color: var(--text); }
.co-lic-plan { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--bg-soft, #f1f5f9); border-radius: 4px; padding: 2px 7px; }
.co-lic-new { color: var(--brand); background: var(--brand-pale, #eef5fd); }
.co-lic-note { font-size: .78rem; color: var(--text-muted); }

/* ── billing ── */
.co-billing { padding: 0; }
.co-fold { background: none; border: none; font: inherit; cursor: pointer; padding: 18px 22px; text-align: left; }
.co-chev { color: var(--text-muted); font-size: .8rem; transition: transform .15s; }
.co-billing[data-folded="1"] .co-chev { transform: rotate(-90deg); }
.co-billing[data-folded="1"] .co-fold-body { display: none; }
.co-fold-body { padding: 0 22px 22px; border-top: 1px solid var(--border); }
.co-note { font-size: .8rem; line-height: 1.6; color: var(--text-muted); margin: 14px 0 16px; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.co-fields .wide { grid-column: 1 / -1; }
/* block, not flex-column: as a flex item the "optional" tag drops onto its own
   line and pushes that field's input out of line with its neighbour. */
.co-fields label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.co-fields .opt { font-weight: 400; opacity: .75; }
.co-fields input, .co-fields textarea {
  font: inherit; font-size: .88rem; color: var(--text); margin-top: 5px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: #fff; width: 100%; resize: vertical;
}
.co-fields input:focus, .co-fields textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,110,214,.12); }

/* ── pay panel ── */
.co-side { position: sticky; top: 92px; }
.co-pay-title { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.co-sum { margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; }
.co-sum > div { display: flex; justify-content: space-between; gap: 16px; font-size: .85rem; color: var(--text-muted); }
.co-sum dt, .co-sum dd { margin: 0; }
.co-sum dd { font-variant-numeric: tabular-nums; }
.co-sum-total { padding-top: 12px; border-top: 1px solid var(--border); align-items: baseline; }
.co-sum-total dt { font-weight: 700; color: var(--text); font-size: .9rem; }
.co-sum-total dd { font-size: 1.25rem; font-weight: 900; color: var(--text); letter-spacing: -.02em; }

.co-billed { font-size: .78rem; line-height: 1.6; color: var(--text); margin: 0 0 16px; padding: 11px 13px; background: var(--bg-soft, #f8fafc); border-radius: 10px; }
.co-billed .muted { color: var(--text-muted); }

.co-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 18px; border: none; border-radius: 11px; cursor: pointer;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .92rem; font-family: inherit;
  transition: background .13s, transform .13s;
}
.co-btn:hover:not(:disabled) { background: var(--brand-dark); transform: translateY(-1px); }
.co-btn:disabled { background: var(--text-muted); opacity: .55; cursor: not-allowed; }
.co-btn-quiet { background: var(--text); width: auto; padding: 10px 16px; font-size: .85rem; }
.co-btn-quiet:hover:not(:disabled) { background: #000; }
.co-hint { font-size: .76rem; color: #b45309; margin: 9px 0 0; text-align: center; }
.co-err { margin-top: 12px; padding: 10px 12px; border-radius: 9px; font-size: .8rem; background: rgba(220,38,38,.08); color: #b91c1c; border: 1px solid rgba(220,38,38,.2); }
.co-err[hidden] { display: none; }

.co-trust { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.co-trust li { display: flex; align-items: flex-start; gap: 9px; font-size: .76rem; color: var(--text-muted); line-height: 1.5; }
.co-trust i { color: var(--brand); font-size: .78rem; margin-top: 2px; flex: none; }
.co-cancel { display: block; text-align: center; margin-top: 14px; font-size: .8rem; color: var(--text-muted); text-decoration: none; }
.co-cancel:hover { color: var(--text); }

@media (max-width: 860px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-side { position: static; }
  .co-fields { grid-template-columns: 1fr; }
}

/* Says a plan is already running on one of the buyer's licences. Informational:
   with several servers per account, holding it once is not a reason to refuse
   selling it again. */
.plan-held {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .76rem; font-weight: 600; color: #15803d;
  background: #e9f7ef; border: 1px solid #b7e4c7; border-radius: 9px;
  padding: 7px 12px; margin-bottom: 9px;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER FINISH
   Read once, acted on once. Single column, and the licence key —
   the thing actually bought — sits above everything else.
══════════════════════════════════════════════════════════════ */
/* 720px, not 620: the same max-width as .page-hero-in directly above it, so the
   content column and the hero copy share one edge instead of stepping inward. */
.fin { max-width: 720px; margin: 0 auto; padding: 34px 5% 96px; }

/* Sizing comes from .page-hero-mark; only the status colouring is per-state. */
.fin-success .fin-mark { background: #dcfce7; color: #16a34a; }
.fin-pending .fin-mark { background: #fef9c3; color: #ca8a04; }
.fin-failed .fin-mark, .fin-expired .fin-mark, .fin-missing .fin-mark { background: #fee2e2; color: #dc2626; }

/* ── licence key ── */
.fin-key { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.fin-key-label { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.fin-key-row { display: flex; align-items: stretch; gap: 10px; }
.fin-key-row code {
  flex: 1; min-width: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .78rem; line-height: 1.6; color: var(--brand); word-break: break-all;
  background: var(--brand-pale, #eef5fd); border-radius: 10px; padding: 11px 13px;
}
.fin-copy {
  flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color .13s, color .13s;
}
.fin-copy:hover { border-color: var(--brand); color: var(--brand); }
.fin-key-note { font-size: .76rem; color: var(--text-muted); margin: 11px 0 0; }

/* ── next steps ── */
.fin-steps { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.fin-steps h2 { font-size: .95rem; font-weight: 800; color: var(--text); margin: 0 0 14px; }
.fin-steps ol { list-style: none; counter-reset: fin; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fin-steps li { counter-increment: fin; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.fin-steps li::before {
  content: counter(fin); grid-row: span 2;
  width: 24px; height: 24px; border-radius: 50%; font-size: .72rem; font-weight: 800;
  background: var(--brand-pale, #eef5fd); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.fin-steps strong { font-size: .87rem; font-weight: 700; color: var(--text); }
.fin-steps span { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }

/* ── order facts ── */
.fin-order { background: var(--bg-soft, #f8fafc); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin-bottom: 22px; }
.fin-order dl { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.fin-order dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: .84rem; }
.fin-order dt { color: var(--text-muted); margin: 0; }
.fin-order dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.fin-order .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .78rem; font-weight: 500; }
.fin-invoice {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: .82rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.fin-invoice:hover { text-decoration: underline; }

.fin-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fin-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border-radius: 11px; font-size: .88rem; font-weight: 700; text-decoration: none;
  background: var(--brand); color: #fff; transition: background .13s, transform .13s;
}
.fin-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.fin-btn-quiet { background: #fff; color: var(--text); border: 1px solid var(--border); }
.fin-btn-quiet:hover { background: var(--bg-soft, #f8fafc); }

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO
   The light band that opens an inner page. The recipe — geometric
   pattern over a diagonal wash with a soft brand glow — already
   existed twice, written into <style> blocks on the homepage and
   the blog. Written once here so a third page cannot drift from
   the other two; both of those can adopt it in place.
   URL is relative to this file (static/css/), not absolute, so it
   survives being served from a different static prefix.
══════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden; text-align: center; color: var(--text);
  background:
    url("../img/hero-pattern-light.e0c409d94d63.svg") 0 0 / 46px 46px repeat,
    linear-gradient(160deg, hsl(214,60%,97%) 0%, var(--bg) 58%, hsl(214,42%,95%) 100%);
  padding: clamp(40px, 6vw, 68px) 20px clamp(30px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
}
.page-hero-glow {
  position: absolute; top: -170px; left: 50%; transform: translateX(-50%);
  width: min(880px, 120%); height: 430px; pointer-events: none; z-index: 0;
  /* Weak on purpose: at the dark hero's 42% tint this reads as a blue smudge on
     a pale ground rather than a glow. */
  background: radial-gradient(50% 55% at 50% 50%,
    color-mix(in srgb, var(--brand, #0f6ed6) 13%, transparent), transparent 70%);
  filter: blur(10px); opacity: .9;
}
.page-hero-in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.page-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 99px; margin-bottom: 16px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand, #0f6ed6);
  background: color-mix(in srgb, var(--brand, #0f6ed6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #0f6ed6) 26%, transparent);
}
.page-hero-eyebrow.is-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: none; }
.page-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 10px; color: var(--text); }
.page-hero p { font-size: .95rem; line-height: 1.65; color: var(--text-muted); margin: 0 auto; }
.page-hero-back {
  position: absolute; top: 20px; left: 5%; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--text-muted); text-decoration: none;
}
.page-hero-back:hover { color: var(--text); }
/* The status mark the finish page opens with, sized to sit inside the band. */
.page-hero-mark {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
@media (max-width: 640px) { .page-hero-back { position: static; display: inline-flex; margin-bottom: 14px; } }