:root {
  /* Tells the browser to render its OWN native UI (select dropdown popups,
     scrollbars, date pickers, etc.) using a dark palette instead of the
     OS/browser default light one - without this, a <select>'s closed box
     picks up our dark .auth-input/.sell-select/etc styling just fine, but
     the popup list of <option>s that appears on click is native browser
     chrome and ignored our CSS entirely, showing up as a jarring white
     dropdown on an otherwise all-dark page. */
  color-scheme: dark;
  --bg: #08080a;
  --border: #1e1e26;
  --border-soft: #16161c;
  --accent: #ff9d2e;
  --accent-dim: #7a4d1c;
  --text: #f4f2ee;
  --text-dim: #8c8b96;
  --text-faint: #55555f;
  --glass-bg: rgba(15, 15, 19, 0.55);
  --avatar-empty: #2b2b33;
  --avatar-empty-ring: #38383f;
  --danger: #ff6b5e;
  --ok: #34d399;
  --font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- custom scrollbar ---------- */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) var(--bg);
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent-dim);
  border: 3px solid var(--bg);
  border-radius: 999px;
  transition: background-color 0.2s var(--ease);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

::-webkit-scrollbar-corner {
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

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

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

/* Grid pattern folded directly into .stage's own background instead of
   a separate .stage::before pseudo-element (that's what used to bleed
   through card backgrounds - see git history/DEPLOY notes). A box's own
   background always paints behind its own content, no matter what -
   there's no stacking-context/z-index class of bug possible here at
   all, which is strictly more robust than the earlier z-index:-1 patch.
   Known, accepted tradeoff: background-attachment: fixed can silently
   fall back to scroll behavior on some older mobile Safari versions -
   there the grid just scrolls with the page instead of staying pinned;
   harmless, and still strictly better than the bug this replaces. Same
   change mirrored into every page's own css/style.css copy - see
   build.js's header comment for why there's no single shared
   stylesheet. */

/* ---------- NAVBAR (glass) ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  /* blur radius cut from 22px to 12px - this bar sits sticky at the top
     of every page, so the browser re-computes this blur on every scroll
     frame the whole time you scroll; blur cost roughly scales with the
     radius squared, so this is a large, continuous saving in exchange for
     a barely-noticeable difference in how "frosted" it looks. Originally
     applied only to marketplace/author/css/style.css (Sept 2026) but
     never mirrored to the other copies of this shared chrome - every
     other page kept paying the full 22px cost on every scroll frame
     ever since, which is what made scrolling feel noticeably less smooth
     site-wide compared to that one page. */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  width: 100%;
  padding: 0 clamp(24px, 5vw, 72px);
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* logo */

.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  outline-offset: 6px;
  padding: 4px 0;
}

.logo:focus-visible {
  outline: 1px solid var(--accent);
}

.logo-mark {
  display: block;
  height: 22px;
  width: auto;
  flex: none;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
  filter: drop-shadow(0 0 0 rgba(255, 157, 46, 0));
}

.logo:hover .logo-mark {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(255, 157, 46, 0.35));
}

.logo:active .logo-mark {
  transform: translateY(0) scale(0.98);
}

/* center nav */

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  justify-self: center;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 9px 13px 11px;
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.25s var(--ease), letter-spacing 0.25s var(--ease);
}

.nav-link-label {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text);
  letter-spacing: 0.055em;
}

.nav-link:hover .nav-link-label,
.nav-link:focus-visible .nav-link-label {
  transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  opacity: 0.5;
  transform: scaleX(1);
}

.nav-link:focus-visible {
  outline: none;
}

.nav-link.is-active {
  color: var(--text);
  font-weight: 700;
}

.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* avatar + name */

.nav-right {
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* cart icon (shared across all pages) */

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  color: var(--text-dim);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.cart-btn:hover {
  background-color: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.cart-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* .cart-btn sets its own `display: flex` for layout (icon centering),
   which - being an ordinary author-stylesheet class rule - always wins
   over the browser's own `[hidden] { display: none }` default, since
   author rules beat UA rules regardless of selector specificity. Without
   this, any button/link carrying .cart-btn while also `hidden` (e.g. the
   notification bell before js/notifications.js decides whether to show
   it - see #notifBtn) renders anyway, as an empty circle, for every
   visitor including signed-out ones. */
.cart-btn[hidden] {
  display: none;
}

.cart-icon {
  width: 19px;
  height: 19px;
}

.cart-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #06070a;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.cart-badge[hidden] {
  display: none;
}

/* hamburger (mobile only) */

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  transition: background-color 0.25s var(--ease);
}

.hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.hamburger-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.hamburger-line {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.hamburger-btn[aria-expanded='true'] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburger-btn[aria-expanded='true'] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn[aria-expanded='true'] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* mobile dropdown menu */

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  /* same 22px -> 12px cut as .navbar above, same reason - mobile GPUs feel
     a large blur radius even more than desktop does. Missed in the first
     propagation pass since that one only matched the .navbar block; caught
     on the follow-up full-site re-check. */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(24px, 5vw, 72px);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease);
}

.mobile-menu.is-open {
  max-height: 320px;
  opacity: 1;
  padding-top: 6px;
  padding-bottom: 14px;
}

.mobile-link {
  padding: 14px 4px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.mobile-link:last-child {
  border-bottom: none;
}

.mobile-link:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.04);
}

.mobile-link.is-active {
  color: var(--text);
  font-weight: 700;
}

.mobile-link:active {
  color: var(--accent);
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  transition: background-color 0.25s var(--ease);
}

.account-btn:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.account-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--avatar-empty-ring);
  background: var(--avatar-empty);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.account-btn:hover .avatar-ring {
  border-color: var(--accent-dim);
  transform: scale(1.06);
}

.avatar-glyph {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-faint);
}

.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.avatar-ring[data-photo='1'] .avatar-glyph {
  display: none;
}

.avatar-ring[data-photo='1'] .avatar-photo {
  display: block;
}

.stage[data-auth='in'] .avatar-glyph {
  color: var(--accent);
  font-weight: 600;
}

.account-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  display: none;
  transition: color 0.25s var(--ease);
}

.account-btn:hover .account-name {
  color: var(--accent);
}

/* state: logged in */

.stage[data-auth='in'] .avatar-ring {
  border-color: var(--accent-dim);
  background: linear-gradient(145deg, rgba(255, 157, 46, 0.22) 0%, rgba(255, 157, 46, 0.03) 100%);
}

.stage[data-auth='in'] .account-name {
  display: inline;
}

/* popover */

.popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 248px;
  background: #101014;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  padding: 18px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.popover-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}

.popover-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.popover-body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 16px;
}

.popover-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.popover-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3a2c1a 0%, #1c1610 100%);
  border: 1px solid var(--accent-dim);
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.popover-avatar-initial {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.popover-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.popover-avatar[data-photo='1'] .popover-avatar-initial {
  display: none;
}

.popover-avatar[data-photo='1'] .popover-avatar-photo {
  display: block;
}

.popover-user-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.popover-user-email {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
}

.popover-btn {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.popover-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.popover-btn.primary {
  background: var(--accent);
  color: #1a1104;
  border: 1px solid var(--accent);
}

.popover-btn.primary:hover {
  background: #ffb257;
}

.popover-btn.ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  margin-top: 8px;
}

.popover-btn.ghost:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.popover-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.popover-link {
  display: block;
  padding: 8px 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
  border-radius: 2px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.popover-link[hidden] {
  display: none;
}

.popover-link:disabled {
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

.popover-link:hover {
  color: var(--text);
  background: var(--border-soft);
}

.popover-link.is-accent {
  color: var(--accent);
  font-weight: 600;
}

.popover-link.is-accent:hover {
  background: rgba(255, 157, 46, 0.1);
}

.popover-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
  border: none;
}

/* ---------- AUTH MODAL (login / register) ---------- */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 5, 4, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  /* visibility (not just opacity/pointer-events) matters here: this class
     is reused by every modal on the site, including the always-present
     sign-in modal's hCaptcha widget. A third-party iframe (hCaptcha's
     checkbox) can re-assert its own `pointer-events: auto` internally,
     which un-does an ancestor's `pointer-events: none` for that iframe
     specifically - opacity/pointer-events alone were not enough to stop
     the CLOSED sign-in modal's captcha from still being clickable through
     whatever modal was actually open on top of it (both share this exact
     class, position and z-index). `visibility: hidden` has no such
     escape hatch - a descendant cannot un-hide itself - so it closes that
     gap for every .auth-overlay on the site, not just this one page.
     Delayed via the transition below so the existing opacity fade-out
     still plays in full before the element actually stops being
     interactive/hit-testable. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s;
}

.auth-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0s;
}

.auth-modal {
  width: 100%;
  max-width: 400px;
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
  padding: 30px 30px 28px;
  position: relative;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.3s var(--ease);
}

.auth-modal--tall {
  max-height: min(88vh, 720px);
  overflow-y: auto;
}

.auth-overlay.is-open .auth-modal {
  transform: translateY(0) scale(1);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.auth-close:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.06);
}

/* brand row */

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 24px;
}

.auth-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

/* segmented pill switch */

.auth-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #1a1a20;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}

.auth-switch-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #f1efe8;
  border-radius: 9px;
  transform: translateX(0);
  transition: transform 0.32s var(--ease);
  will-change: transform;
}

.auth-modal[data-mode='signup'] .auth-switch-thumb {
  transform: translateX(100%);
}

.auth-switch-btn {
  position: relative;
  z-index: 1;
  padding: 13px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
}

.auth-switch-btn.is-active {
  color: #14141a;
}

.auth-switch-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* heading + copy */

.auth-panel {
  margin-top: 22px;
}

.auth-heading {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 8px;
  white-space: nowrap;
}

.auth-heading-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
}

.auth-subcopy {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 22px;
}

/* form */

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 12px 0 6px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 6px;
}

.auth-label-row .auth-label {
  margin: 0;
}

.auth-forgot-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
}

.auth-forgot-link:hover {
  color: var(--accent);
}

.auth-forgot-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: #18181e;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.auth-input::placeholder {
  color: var(--text-faint);
}

.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 157, 46, 0.14);
}

/* Chrome/Edge/Safari autofill (a saved email/password, address or payment
   autofill) forcibly repaints an input's background AND text color with
   its own yellow/light-blue styling the moment it's autofilled - this
   completely ignores .auth-input's own `background`/`color` above, and a
   real `background-color` override on `:-webkit-autofill` gets ignored
   by the browser too (this is the "browser overrides our style" bug
   people notice on login/signup/checkout forms). The fix is the standard
   trick: an inset box-shadow big enough to cover the whole field is NOT
   one of the properties the browser locks, so painting our own dark
   color that way (instead of `background-color`) actually sticks, and
   `-webkit-text-fill-color` forces the text back to our own color too.
   The absurdly long `transition` delay defeats Chrome's own animation
   that reveals the yellow tint after a short delay. Applies everywhere
   .auth-input is used (login/signup, checkout, profile editing, "Start a
   Project", tutorials/add, etc.) since they all share this one class. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #18181e inset;
  box-shadow: 0 0 0 1000px #18181e inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Belt-and-suspenders for the <select> popup on top of `color-scheme: dark`
   above (root of the file) - explicit dark colors on every <option> site-
   wide, in case a browser only partially dark-themes the native dropdown. */
select option {
  background: #18181e;
  color: var(--text);
}

.auth-textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-display);
  line-height: 1.5;
}

.freelancer-guidelines {
  background: #18181e;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.freelancer-guidelines p {
  font-size: 0.84rem;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.freelancer-guidelines-list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.freelancer-guidelines-note {
  font-size: 0.76rem;
  color: var(--text-faint);
  margin: 0 !important;
}

/* show/hide password */

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap .auth-input {
  padding-right: 46px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-faint);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.auth-password-toggle:hover {
  color: var(--text-dim);
  background-color: rgba(255, 255, 255, 0.06);
}

.auth-password-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.auth-password-toggle.is-visible {
  color: var(--accent);
}

.icon-eye {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  /* Absolute path (not '../assets/...') - this rule gets inlined verbatim
     into 400/401/403/404/500.html by build.js, and those pages can be
     served by Apache for a request at ANY depth (e.g. /admin/cos/zepsute
     -> 403.html), while the browser still thinks it's looking at that
     broken URL. A relative path would then resolve against the WRONG
     folder (e.g. /admin/assets/... instead of /assets/...) and silently
     404 - exactly the bug class the rest of this file's inlining already
     protects against elsewhere. Found in the Sept 2026 audit. */
  -webkit-mask: url('/assets/icons/eye.svg') no-repeat center / contain;
  mask: url('/assets/icons/eye.svg') no-repeat center / contain;
}

.auth-password-toggle.is-visible .icon-eye {
  -webkit-mask-image: url('/assets/icons/eye-slash.svg');
  mask-image: url('/assets/icons/eye-slash.svg');
}

/* hCaptcha widget container (js/auth.js renders the actual widget into
   this div via hcaptcha.render()). The widget itself is a fixed-size
   iframe (~303px wide at the default "normal" size) that doesn't reflow
   with the page, so `overflow-x: auto` here is a safety net rather than a
   real fix for very narrow phones - it lets the widget scroll into view
   instead of forcing the whole modal wider or clipping it outright. */
.auth-captcha {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.auth-error {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--danger);
  background: rgba(255, 107, 94, 0.08);
  border: 1px solid rgba(255, 107, 94, 0.25);
  border-radius: 8px;
  padding: 9px 11px;
  margin-top: 12px;
}

.auth-success {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ok);
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 8px;
  padding: 9px 11px;
  margin-top: 12px;
}

.auth-submit {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--accent);
  color: #1a1104;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 32px -12px rgba(255, 157, 46, 0.5);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}

.auth-submit-arrow {
  transition: transform 0.2s var(--ease);
}

.auth-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 20px 38px -12px rgba(255, 157, 46, 0.6);
}

.auth-submit:hover .auth-submit-arrow {
  transform: translateX(3px);
}

.auth-submit:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* google */

.auth-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0 16px;
}

.auth-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #18181e;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.auth-google-btn:hover {
  background: #1e1e25;
  border-color: var(--text-faint);
}

.auth-google-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.google-icon {
  flex: none;
  display: block;
}

/* footer lines */

.auth-legal {
  margin: 14px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}

.auth-legal a {
  color: var(--text-dim);
  text-decoration: underline;
}

.auth-legal a:hover {
  color: var(--text);
}

.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 2px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-faint);
  cursor: pointer;
}

.auth-consent-checkbox {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-consent-row a {
  color: var(--text-dim);
  text-decoration: underline;
}

.auth-consent-row a:hover {
  color: var(--text);
}

@media (max-width: 480px) {
  .auth-modal {
    padding: 24px 20px 24px;
    border-radius: 18px;
  }

  .auth-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- shared: wide modal + custom select dropdown ----------
   Added for the "Start a Project" modal (partials/project-inquiry-modal.html,
   see js/site-forms.js) - a full-width modifier and a from-scratch <select>
   re-skin, both promoted to shared chrome since the project inquiry modal
   is injected on every page. If you change one of these, mirror the
   change in every other page's own copy (same rule as the rest of this
   "shared chrome" block - see the comment at the top of this file). */

.auth-modal--wide {
  max-width: 600px;
}

/* A native <select>'s closed box happily takes .auth-input's dark
   styling, but its OPEN popup is OS/browser chrome - `color-scheme: dark`
   (root of this file) gets it part of the way, but the browser still
   paints its own blue highlight on the hovered/selected row and there is
   no CSS hook to change that. So any <select> that opts into this (see
   enhanceSelect() in js/site-forms.js) gets visually hidden via
   `.select-native` below - it stays in the DOM as the real source of
   truth for .value - and a fully custom trigger button + option list is
   layered on top instead, themed with our own accent color. */
.select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.select-wrap {
  position: relative;
}

.select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-value--placeholder {
  color: var(--text-faint);
}

.select-arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.select-wrap.is-open .select-arrow {
  transform: rotate(-135deg) translateY(1px);
  border-color: var(--accent);
}

.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: #18181e;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

.select-option {
  padding: 9px 10px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.select-option:hover,
.select-option.is-active {
  background: rgba(255, 157, 46, 0.14);
}

.select-option[aria-selected='true'] {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- shared: "Start a Project" modal extras ----------
   Added back alongside the modal itself (partials/project-inquiry-modal.html,
   js/site-forms.js) when "Start a Project" reverted from its own page back
   to a popup. Mirrors the "success panel" pattern already used elsewhere
   (tutorials/add's .admin-gate, the old /start-project page's
   .sp-success-panel) but under its own class names since this modal is
   shared on every page and shouldn't depend on the admin-only .admin-gate
   styling. If you change one of these, mirror the change in every other
   page's own copy (same rule as the rest of this "shared chrome" block). */

/* .auth-form sets `display: flex`, which (being an author-stylesheet rule)
   otherwise wins over the browser's own `[hidden] { display: none }` -
   without this, `someForm.hidden = true` on anything carrying .auth-form
   silently does nothing. */
.auth-form[hidden] {
  display: none;
}

.project-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  text-align: center;
  color: var(--text-dim);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 16px;
  background: rgba(52, 211, 153, 0.05);
  padding: 32px 24px;
}

.project-success-panel[hidden] {
  display: none;
}

.project-success-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.project-success-panel-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

.project-optional {
  text-transform: none;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0;
}

/* ---------- main content / hero ---------- */

.main-content {
  flex: 1;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 69px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(24px, 5vw, 72px) 40px;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
}

.hero-image-grid {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 78% 42%, black 0%, transparent 75%);
  mask-image: radial-gradient(circle at 78% 42%, black 0%, transparent 75%);
  opacity: 0.5;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    90deg,
    var(--bg) 0%,
    var(--bg) 22%,
    rgba(8, 8, 10, 0.85) 40%,
    rgba(8, 8, 10, 0.35) 62%,
    transparent 82%
  );
}

@media (max-width: 900px) {
  .hero-scrim {
    background: linear-gradient(
      180deg,
      var(--bg) 0%,
      rgba(8, 8, 10, 0.7) 45%,
      rgba(8, 8, 10, 0.5) 100%
    );
  }
}

.hero-noise {
  /* mix-blend-mode: overlay used to sit here - at 0.035 opacity the blend
     mode made no visible difference (overlay vs normal blending is
     imperceptible this faint), but it forced the browser to recomposite
     this full-viewport layer against everything underneath on every frame.
     Combined with .navbar's backdrop-filter (see below) and the mousemove
     parallax on .hero-gridlines, that was the main source of the hero
     feeling laggy while the mouse moved over it - measured and confirmed
     before removing it. */
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-gridlines {
  position: absolute;
  inset: -20px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 78% 18%, black 0%, rgba(0, 0, 0, 0.5) 35%, transparent 72%);
  mask-image: radial-gradient(circle at 78% 18%, black 0%, rgba(0, 0, 0, 0.5) 35%, transparent 72%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-eyebrow-bar {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 0 26px;
  background: var(--accent);
  transform-origin: left center;
  animation: heroBarGrow 0.7s var(--ease-premium) both;
}

@keyframes heroBarGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
  color: var(--text);
}

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-line-inner {
  display: block;
  transform: translateY(112%);
  animation: heroLineReveal 0.6s var(--ease-premium) forwards;
}

.hero-line:nth-child(1) .hero-line-inner {
  animation-delay: 0.1s;
}

.hero-line:nth-child(2) .hero-line-inner {
  animation-delay: 0.5s;
}

.hero-line:nth-child(3) .hero-line-inner {
  animation-delay: 0.9s;
}

@keyframes heroLineReveal {
  to {
    transform: translateY(0);
  }
}

.hero-heading-accent {
  position: relative;
  color: var(--accent);
}

.hero-subcopy {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 480px;
  margin: 0 0 36px;
  animation: heroFadeUp 0.7s var(--ease-premium) 1.6s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-btn-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateX(-28px);
  animation: heroBtnSlideIn 0.6s var(--ease-premium) forwards;
}

@keyframes heroBtnSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-actions .hero-btn-reveal:nth-child(1) {
  animation-delay: 1.75s;
}

.hero-actions .hero-btn-reveal:nth-child(2) {
  animation-delay: 1.87s;
}

.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.hero-btn[hidden] {
  display: none;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s var(--ease-premium);
  pointer-events: none;
}

.hero-btn:hover::before {
  left: 130%;
}

.hero-btn.primary {
  background: var(--accent);
  color: #1a1104;
  box-shadow: 0 20px 40px -18px rgba(255, 157, 46, 0.55);
}

.hero-btn.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 24px 46px -16px rgba(255, 157, 46, 0.65);
}

.hero-btn-arrow {
  transition: transform 0.2s var(--ease);
}

.hero-btn.primary:hover .hero-btn-arrow {
  transform: translateX(3px);
}

.hero-btn.outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.hero-btn.outline:hover {
  border-color: var(--text-faint);
  background: rgba(255, 255, 255, 0.03);
}

.hero-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow-bar,
  .hero-subcopy,
  .hero-actions,
  .hero-line-inner,
  .hero-btn-reveal {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .hero-btn::before {
    transition: none;
    display: none;
  }
  .render-card {
    transition: border-color 0.35s var(--ease), z-index 0.35s;
    opacity: 1;
    transform: none;
  }
}

/* ---------- selected renders ---------- */

.renders {
  position: relative;
  padding: 90px clamp(24px, 5vw, 72px) 90px;
}

.renders-inner {
  width: 100%;
}

.renders-head {
  margin: 0 0 48px;
}

.renders-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.renders.is-visible .renders-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.renders-eyebrow-dash {
  color: var(--accent);
}

.renders-heading-bar {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 16px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-premium) 0.12s;
}

.renders.is-visible .renders-heading-bar {
  transform: scaleX(1);
}

.renders-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-premium) 0.22s, transform 0.7s var(--ease-premium) 0.22s;
}

.renders.is-visible .renders-heading {
  opacity: 1;
  transform: translateY(0);
}

.renders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.render-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  padding: 22px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-premium), transform 0.5s var(--ease-premium), border-color 0.35s var(--ease), z-index 0.35s;
}

.renders-grid.is-visible .render-card {
  opacity: 1;
  transform: translateY(0);
}

.render-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.85;
  transition: opacity 0.35s var(--ease);
}

.render-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to top, black, transparent 70%);
  mask-image: linear-gradient(to top, black, transparent 70%);
  opacity: 0.5;
}

.render-card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: var(--accent-dim);
  z-index: 4;
}

.render-card:hover::before {
  opacity: 1;
}

.render-card--featured {
  grid-column: 1 / 3;
  grid-row: 1 / span 2;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.render-card:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

.render-card:nth-child(3) {
  grid-column: 4;
  grid-row: 1;
}

.render-card:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}

.render-card:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}

.render-card:nth-child(1)::before {
  background: radial-gradient(circle at 75% 20%, rgba(255, 157, 46, 0.18), transparent 55%);
}

.render-card:nth-child(2)::before {
  background: radial-gradient(circle at 30% 80%, rgba(120, 150, 255, 0.14), transparent 55%);
}

.render-card:nth-child(3)::before {
  background: radial-gradient(circle at 70% 75%, rgba(255, 157, 46, 0.14), transparent 55%);
}

.render-card:nth-child(4)::before {
  background: radial-gradient(circle at 25% 20%, rgba(120, 150, 255, 0.12), transparent 55%);
}

.render-card:nth-child(5)::before {
  background: radial-gradient(circle at 80% 30%, rgba(255, 157, 46, 0.16), transparent 55%);
}

.render-card-index {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.render-card-body {
  position: relative;
  z-index: 2;
}

.render-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.render-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}

.render-card--featured .render-card-title {
  font-size: 1.3rem;
}

.render-card-arrow {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.render-card:hover .render-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.render-card-tags {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease), margin-top 0.35s var(--ease);
  margin-top: 0;
}

.render-card:hover .render-card-tags {
  grid-template-rows: 1fr;
  margin-top: 10px;
}

.render-card-tags-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.render-card:hover .render-card-tags-inner {
  opacity: 1;
  transition-delay: 0.08s;
}

.render-card-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .renders-grid {
    grid-template-columns: 1fr 1fr;
  }
  .render-card--featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .render-card:nth-child(2),
  .render-card:nth-child(3),
  .render-card:nth-child(4),
  .render-card:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }
  .render-card {
    min-height: 180px;
  }
}

@media (max-width: 560px) {
  .renders {
    padding: 72px clamp(20px, 6vw, 40px) 80px;
  }
  .renders-grid {
    grid-template-columns: 1fr;
  }
  .render-card--featured {
    aspect-ratio: 4 / 3;
  }
  .render-card {
    min-height: 200px;
  }
}

/* ---------- the people ---------- */

.people {
  position: relative;
  padding: 90px clamp(24px, 5vw, 72px) 90px;
}

.people-inner {
  width: 100%;
}

.people-head {
  margin: 0 0 48px;
}

.people-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.people.is-visible .people-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.people-eyebrow-dash {
  color: var(--accent);
}

.people-heading-bar {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 16px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-premium) 0.12s;
}

.people.is-visible .people-heading-bar {
  transform: scaleX(1);
}

.people-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-premium) 0.22s, transform 0.7s var(--ease-premium) 0.22s;
}

.people.is-visible .people-heading {
  opacity: 1;
  transform: translateY(0);
}

.people-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.people-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 260px;
  padding: 40px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
  overflow: hidden;
  text-align: center;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform: translateY(24px);
  transition: border-color 0.3s var(--ease), transform 0.5s var(--ease-premium), opacity 0.5s var(--ease-premium);
}

.people-grid.is-visible .people-card {
  opacity: 1;
  transform: translateY(0);
}

.people-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 157, 46, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.people-card:hover::before {
  opacity: 1;
}

.people-card:hover {
  border-color: var(--border-soft);
  transform: translateY(-6px) scale(1.04);
}

.people-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
  background: radial-gradient(circle at 35% 30%, rgba(255, 157, 46, 0.32), rgba(255, 157, 46, 0.08) 70%), #17171d;
  border: 1px solid var(--border-soft);
}

.people-avatar[data-tint='2'] {
  background: radial-gradient(circle at 35% 30%, rgba(120, 150, 255, 0.32), rgba(120, 150, 255, 0.08) 70%), #17171d;
}

.people-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.people-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .people-card {
    width: 100%;
    max-width: 320px;
  }
}

/* ---------- trusted by (3-card sliding window) ---------- */

.trusted {
  position: relative;
  padding: 90px clamp(24px, 5vw, 72px) 90px;
}

.trusted-inner {
  width: 100%;
}

.trusted-head {
  margin: 0 0 56px;
}

.trusted-eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.trusted.is-visible .trusted-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.trusted-eyebrow-dash {
  color: var(--accent);
}

.trusted-heading-bar {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 20px auto;
  background: var(--accent);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-premium) 0.12s;
}

.trusted.is-visible .trusted-heading-bar {
  transform: scaleX(1);
}

.trusted-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
  text-align: right;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-premium) 0.22s, transform 0.7s var(--ease-premium) 0.22s;
}

.trusted.is-visible .trusted-heading {
  opacity: 1;
  transform: translateY(0);
}

.trusted-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-premium) 0.3s, transform 0.6s var(--ease-premium) 0.3s;
  cursor: grab;
  /* Let the browser keep handling vertical page scroll on touch while our
     own JS (wireTrackDrag(), js/main.js) takes over horizontal drags/swipes -
     without this, mobile browsers try to scroll the page on any touch
     that starts here and our drag handler never gets a clean gesture. */
  touch-action: pan-y;
}

.trusted.is-visible .trusted-viewport {
  opacity: 1;
  transform: translateY(0);
}

.trusted-viewport.is-dragging {
  cursor: grabbing;
}

.trusted-track {
  display: flex;
  gap: 28px;
  transition: transform 0.62s var(--ease-premium);
  will-change: transform;
}

.trusted-card {
  position: relative;
  flex: 0 0 calc((100cqw - 56px) / 3);
  width: calc((100cqw - 56px) / 3);
  display: flex;
  flex-direction: column;
  padding: 64px 38px 48px 34px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  border-radius: 12px;
  background: linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease-premium);
}

.trusted-card[data-tint='2'] {
  border-left-color: rgba(120, 150, 255, 0.4);
}

.trusted-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(255, 157, 46, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.trusted-card[data-tint='2']::after {
  background: radial-gradient(circle at 0% 0%, rgba(120, 150, 255, 0.12), transparent 60%);
}

.trusted-card:hover {
  border-color: var(--border-soft);
  border-left-color: var(--accent);
  transform: translateY(-4px);
}

.trusted-card[data-tint='2']:hover {
  border-left-color: #93a9ff;
}

.trusted-card:hover::after {
  opacity: 1;
}

.trusted-card-mark {
  position: absolute;
  top: -14px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.trusted-card-category {
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.trusted-card-category[data-tint='2'] {
  color: #93a9ff;
}

.trusted-card-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 32px;
}

.trusted-card-divider {
  position: relative;
  display: block;
  height: 1px;
  background: var(--border);
  margin: 0 0 22px;
}

.trusted-card-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-faint);
  margin-top: auto;
}

.trusted-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
}

.trusted-status-check {
  color: var(--ok);
}

@container (max-width: 900px) {
  .trusted-track {
    gap: 22px;
  }
  .trusted-card {
    flex-basis: calc((100cqw - 22px) / 2);
    width: calc((100cqw - 22px) / 2);
    padding: 52px 28px 40px 28px;
  }
}

@container (max-width: 560px) {
  .trusted-track {
    gap: 18px;
  }
  .trusted-card {
    flex-basis: 80cqw;
    width: 80cqw;
    padding: 48px 24px 36px 26px;
  }
  .trusted-card-mark {
    font-size: 4rem;
  }
}

.trusted-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  opacity: 0;
  transition: opacity 0.6s var(--ease-premium) 0.4s;
}

.trusted.is-visible .trusted-dots {
  opacity: 1;
}

.trusted-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-soft);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), width 0.3s var(--ease-premium);
}

.trusted-dot:hover {
  background: var(--text-faint);
}

.trusted-dot.is-active {
  width: 38px;
  background: var(--accent);
}

/* ---------- client words (testimonial carousel) ---------- */

.client-words {
  position: relative;
  padding: 90px clamp(24px, 5vw, 72px) 90px;
}

.client-words-inner {
  width: 100%;
}

.client-words-head {
  margin: 0 0 48px;
}

.client-words-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.client-words.is-visible .client-words-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.client-words-eyebrow-dash {
  color: var(--accent);
}

.client-words-heading-bar {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 16px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-premium) 0.12s;
}

.client-words.is-visible .client-words-heading-bar {
  transform: scaleX(1);
}

.client-words-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-premium) 0.22s, transform 0.7s var(--ease-premium) 0.22s;
}

.client-words.is-visible .client-words-heading {
  opacity: 1;
  transform: translateY(0);
}

.client-words-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-premium) 0.3s, transform 0.6s var(--ease-premium) 0.3s;
  cursor: grab;
  /* see .trusted-viewport's touch-action comment - same reasoning */
  touch-action: pan-y;
}

.client-words-viewport.is-dragging {
  cursor: grabbing;
}

.client-words.is-visible .client-words-viewport {
  opacity: 1;
  transform: translateY(0);
}

.client-words-track {
  display: flex;
  gap: 28px;
  transition: transform 0.62s var(--ease-premium);
  will-change: transform;
}

.client-word-card {
  position: relative;
  flex: 0 0 calc((100cqw - 56px) / 3);
  width: calc((100cqw - 56px) / 3);
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease-premium);
}

.client-word-card:hover {
  border-color: var(--border-soft);
  transform: translateY(-4px);
}

.client-word-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 12px;
}

.client-word-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 28px;
}

.client-word-divider {
  display: block;
  height: 1px;
  background: var(--border);
  margin: 0 0 16px;
  margin-top: auto;
}

.client-word-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
}

.client-word-role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-top: 4px;
}

@container (max-width: 900px) {
  .client-words-track {
    gap: 22px;
  }
  .client-word-card {
    flex-basis: calc((100cqw - 22px) / 2);
    width: calc((100cqw - 22px) / 2);
  }
}

@container (max-width: 560px) {
  .client-words-track {
    gap: 18px;
  }
  .client-word-card {
    flex-basis: 80cqw;
    width: 80cqw;
    padding: 30px 26px;
  }
}

.client-words-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  opacity: 0;
  transition: opacity 0.6s var(--ease-premium) 0.4s;
}

.client-words.is-visible .client-words-dots {
  opacity: 1;
}

.client-word-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-soft);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), width 0.3s var(--ease-premium);
}

.client-word-dot:hover {
  background: var(--text-faint);
}

.client-word-dot.is-active {
  width: 38px;
  background: var(--accent);
}

/* ---------- final cta ---------- */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px clamp(24px, 5vw, 72px) 140px;
  text-align: center;
}

.cta-glow {
  position: absolute;
  /* Kept fully inside the section (which clips with overflow: hidden) and
     faded to 0 at its own edges (closest-side), so the glow never shows a
     hard cut line at the top of the section. */
  top: 20px;
  left: 50%;
  width: min(900px, 100%);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 157, 46, 0.12), rgba(255, 157, 46, 0.04) 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.cta.is-visible .cta-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.cta-eyebrow-dash {
  color: var(--accent);
}

.cta-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: var(--text);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-premium) 0.1s, transform 0.7s var(--ease-premium) 0.1s;
}

.cta.is-visible .cta-heading {
  opacity: 1;
  transform: translateY(0);
}

.cta-subcopy {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--text-dim);
  margin: 0 0 40px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-premium) 0.18s, transform 0.7s var(--ease-premium) 0.18s;
}

.cta.is-visible .cta-subcopy {
  opacity: 1;
  transform: translateY(0);
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 36px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-premium) 0.26s, transform 0.7s var(--ease-premium) 0.26s;
}

.cta.is-visible .cta-actions {
  opacity: 1;
  transform: translateY(0);
}

.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.7s var(--ease-premium) 0.34s;
}

.cta.is-visible .cta-trust {
  opacity: 1;
}

.cta-trust li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cta-trust-check {
  color: var(--text-faint);
}

@media (max-width: 640px) {
  .cta-trust {
    flex-direction: column;
    gap: 10px;
  }
  .cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .cta-actions .hero-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- capabilities ---------- */

.capabilities {
  padding: 90px clamp(24px, 5vw, 72px) 90px;
}

.capabilities-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.capabilities-showcase.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -- left: rotating image -- */

.capabilities-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  min-height: 320px;
  background: linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
  cursor: grab;
  /* let the page still scroll vertically on touch - see wireSwipe() in
     js/main.js, same reasoning as .trusted-viewport's touch-action */
  touch-action: pan-y;
}

.capabilities-visual.is-dragging {
  cursor: grabbing;
}

.capabilities-visual-grid {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 65% 35%, black 0%, transparent 70%);
  mask-image: radial-gradient(circle at 65% 35%, black 0%, transparent 70%);
  opacity: 0.5;
}

.capabilities-visual-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.95;
  transition: background 0.6s var(--ease-premium);
  background: radial-gradient(circle at 65% 30%, rgba(255, 157, 46, 0.24), transparent 60%);
}

.capabilities-visual[data-tint='2'] .capabilities-visual-glow {
  background: radial-gradient(circle at 30% 25%, rgba(120, 150, 255, 0.2), transparent 60%);
}

.capabilities-visual[data-tint='3'] .capabilities-visual-glow {
  background: radial-gradient(circle at 70% 75%, rgba(255, 157, 46, 0.22), transparent 60%);
}

.capabilities-visual[data-tint='4'] .capabilities-visual-glow {
  background: radial-gradient(circle at 25% 70%, rgba(120, 150, 255, 0.18), transparent 60%);
}

.capabilities-visual[data-tint='5'] .capabilities-visual-glow {
  background: radial-gradient(circle at 75% 25%, rgba(255, 157, 46, 0.24), transparent 60%);
}

/* -- right: title + description, synced to the image -- */

.capabilities-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-self: end;
  width: 100%;
}

.capabilities-eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px;
}

.capabilities-heading-bar {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 20px auto;
  background: var(--accent);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-premium) 0.12s;
}

.capabilities-showcase.is-visible .capabilities-heading-bar {
  transform: scaleX(1);
}

.capabilities-copy {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.capabilities-copy.is-switching {
  opacity: 0;
  transform: translateY(10px);
}

.capabilities-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: right;
  margin: 0 0 20px;
}

.capabilities-desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
  max-width: 100%;
}

.capabilities-dots {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.capabilities-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--border-soft);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), width 0.3s var(--ease-premium);
}

.capabilities-dot:hover {
  background: var(--text-faint);
}

.capabilities-dot.is-active {
  width: 38px;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .capabilities-showcase {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .capabilities-copy {
    transition: none;
  }
  .capabilities-dot {
    transition: background-color 0.3s var(--ease);
  }
}

@media (max-width: 900px) {
  .capabilities-showcase {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .capabilities-visual {
    aspect-ratio: auto;
    min-height: 360px;
  }
  .capabilities-text {
    justify-self: stretch;
    max-width: none;
  }
  .capabilities-dots {
    position: static;
    transform: none;
    margin-top: 32px;
  }
}

@media (max-width: 480px) {
  .capabilities-visual {
    min-height: 280px;
  }
}

@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
  .nav-inner {
    grid-template-columns: auto 1fr;
  }
  .account-name {
    display: none !important;
  }
  .hamburger-btn {
    display: flex;
  }
  .popover {
    width: min(280px, calc(100vw - 48px));
  }
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000000;
  border-top: 1px solid var(--border);
  padding: 40px clamp(24px, 5vw, 72px) 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 48px;
  padding-bottom: 32px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer-logo-mark {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer-logo-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.footer-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0;
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease-premium);
}

.footer-social-link:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-social-link svg {
  width: 14px;
  height: 14px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 150px));
  gap: 28px;
  justify-content: end;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 4px;
}

.footer-link {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--text-faint);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease-premium);
}

.footer-link:hover {
  color: var(--text);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.footer-copyright,
.footer-signature {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  margin: 0;
}

.footer-watermark {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 90%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  margin-top: 2px;
  padding-bottom: 14px;
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-links {
    justify-content: start;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 24px;
  }
  .footer-brand {
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .footer {
    padding-top: 36px;
  }
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------- 404 page (specific to 404.html, root-level like .hero/
   .renders/.capabilities above - reuses .hero-btn/.hero-btn-reveal/
   heroFadeUp rather than redefining them). ---------- */

.nf-section {
  position: relative;
  min-height: calc(100vh - 69px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px clamp(24px, 5vw, 72px) 80px;
}

.nf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 620px;
}

.nf-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--accent);
  text-shadow: 0 0 70px rgba(255, 157, 46, 0.35);
  animation: heroFadeUp 0.7s var(--ease-premium) 0.1s both;
}

.nf-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin: 0 0 14px;
  color: var(--text);
  animation: heroFadeUp 0.7s var(--ease-premium) 0.25s both;
}

.nf-subcopy {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 460px;
  margin: 0 0 36px;
  animation: heroFadeUp 0.7s var(--ease-premium) 0.4s both;
}

.nf-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.nf-actions .hero-btn-reveal:nth-child(1) {
  animation-delay: 0.55s;
}

.nf-actions .hero-btn-reveal:nth-child(2) {
  animation-delay: 0.67s;
}

.nf-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: heroFadeUp 0.7s var(--ease-premium) 0.8s both;
}

.nf-links-label {
  color: var(--text-faint);
}

.nf-link {
  color: var(--text-dim);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nf-link:hover,
.nf-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.nf-link-sep {
  color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .nf-code,
  .nf-title,
  .nf-subcopy,
  .nf-actions,
  .nf-links {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 560px) {
  .nf-section {
    padding-top: 40px;
    padding-bottom: 60px;
  }
}

/* ---------- cookie consent banner (shared chrome, see
   partials/cookie-banner.html + js/cookie-consent.js - if you change one
   of those, mirror the change here too). ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: 0 clamp(16px, 4vw, 32px) clamp(16px, 4vw, 32px);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease-premium), opacity 0.3s var(--ease);
  pointer-events: none;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #101014;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
}

.cookie-banner-text {
  flex: 1 1 320px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.cookie-banner-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-link:hover {
  color: var(--text);
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  flex-wrap: wrap;
}

.cookie-banner-btn {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), filter 0.2s var(--ease);
}

.cookie-banner-btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.cookie-banner-btn.ghost:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.cookie-banner-btn.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #1a1104;
}

.cookie-banner-btn.primary:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

@media (max-width: 640px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .cookie-banner-text {
    flex-basis: auto;
  }
  .cookie-banner-actions {
    justify-content: stretch;
  }
  .cookie-banner-btn {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ---------- text selection highlight (site-wide) - restyled per team
   feedback (Discord: "Wyłączyć zaznaczanie tekstu (lub je uładnić, np.
   lekko pomarańczowe i cieńsze)") to a light, thin accent-orange
   highlight instead of the harsh browser default, rather than disabling
   selection outright - keeping text selectable matters for accessibility
   (copying, screen readers, translation tools), it just needed to look
   intentional instead of default. Same rule copied into every
   css/style.css on the site - see build.js's header comment for why
   there's no single shared stylesheet to add this to instead. ---------- */

::selection {
  background: rgba(255, 157, 46, 0.28);
  color: var(--text);
}

/* ---------- notification bell (js/notifications.js) - shown once
   signed in, a small red dot appears while there's at least one unread
   notification (a REAL one - see notifications_migration.sql - not a
   decorative reuse of some other count). The bell reuses .cart-btn/
   .cart-icon for identical sizing; the dropdown below it is the same
   visual language as .popover, just anchored to the bell itself (not the
   whole .nav-right) via .notif-wrap so it doesn't have to share
   .popover's own right:0 anchor. ---------- */

.notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b5e;
  border: 2px solid #06070a;
}

.notif-dot[hidden] {
  display: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: #101014;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
  z-index: 40;
}

.notif-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.notif-panel-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.notif-mark-all-btn {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  transition: opacity 0.2s var(--ease);
}

.notif-mark-all-btn:hover {
  opacity: 0.8;
}

.notif-mark-all-btn[hidden] {
  display: none;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.2s var(--ease);
}

.notif-item:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.notif-item.is-unread {
  background-color: rgba(255, 157, 46, 0.07);
}

.notif-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
}

.notif-item-body {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
  margin: 0 0 4px;
}

.notif-item-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-faint);
}

.notif-empty {
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
  padding: 18px 6px;
  margin: 0;
}

.notif-empty[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .notif-panel {
    width: calc(100vw - 32px);
    right: -8px;
  }
}

/* ---------- home "Built frame by frame." - marketplace-fed cards ----------
   js/home-renders.js fills the .renders-grid cards with real approved
   marketplace listings and adds .render-card-media (the listing thumbnail)
   as each card's background. Cards it couldn't fill keep the old static
   look. */
.render-card-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--ease-premium), transform 0.8s var(--ease-premium);
}

.render-card-media.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.render-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.35) 45%, rgba(8, 8, 10, 0.15) 100%);
}

.render-card:hover .render-card-media.is-loaded {
  transform: scale(1.05);
}

.render-card.has-media::after {
  z-index: 1;
  opacity: 0.25;
}

.renders-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.renders-more:hover {
  color: var(--accent);
}

/* ---------- testimonials v2 (js/client-words.js) ----------
   Regular cards: monogram + green rating up top, the quote as the hero,
   name/role in a quiet footer. Three subtle tones (warm / cool / mono) so
   neighbouring cards differ without looking random.
   Key client: gold frame and a slow "studio light" sweeping across the
   card, like a light bar travelling over car paint. */

.client-word-card {
  padding: 28px 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, #131318 0%, #0b0b0e 100%);
  isolation: isolate;
  transition: border-color 0.3s var(--ease), transform 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium);
}

.client-word-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, var(--cw-glow, transparent), transparent 60%);
}

.client-word-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.9);
}

.client-word-card.tone-warm { --cw-tone: #ffb766; --cw-tone-bg: rgba(255, 157, 46, 0.14); --cw-glow: rgba(255, 157, 46, 0.09); }
.client-word-card.tone-cool { --cw-tone: #a9b9ff; --cw-tone-bg: rgba(120, 150, 255, 0.15); --cw-glow: rgba(120, 150, 255, 0.08); }
.client-word-card.tone-mono { --cw-tone: #e6e4ec; --cw-tone-bg: rgba(255, 255, 255, 0.08); --cw-glow: rgba(255, 255, 255, 0.035); }

.client-word-mark {
  position: absolute;
  top: -34px;
  right: 14px;
  z-index: -1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 10rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.client-word-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.client-word-monogram {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--cw-tone, #e6e4ec);
  background: var(--cw-tone-bg, rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.client-word-rating {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.22);
}

.client-word-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 0.76rem;
  line-height: 1;
}

.client-word-star { color: rgba(255, 255, 255, 0.16); }
.client-word-star.is-on { color: var(--ok); }

.client-word-score {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ok);
  padding: 0;
  background: none;
  border: 0;
}

.client-word-text {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #ebe9f0;
  margin: 0 0 22px;
}

.client-word-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.client-word-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.client-word-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.client-word-role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- key client ---- */
.client-word-card.is-key-client {
  --cw-tone: #1a1104;
  cursor: pointer;
  border: 1px solid transparent;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 190, 90, 0.16), transparent 60%) padding-box,
    linear-gradient(180deg, #1a140d 0%, #0c0a08 100%) padding-box,
    linear-gradient(140deg, #ffe0a3 0%, #ff9d2e 35%, rgba(255, 157, 46, 0.18) 65%, #ffcf7a 100%) border-box;
  box-shadow: 0 24px 60px -30px rgba(255, 157, 46, 0.55);
}

/* the light sweep */
.client-word-card.is-key-client::after {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 226, 170, 0.12) 48%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: cwLightSweep 7s var(--ease-premium) 1.5s infinite;
}

@keyframes cwLightSweep {
  0% { transform: translateX(-120%); }
  35%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .client-word-card.is-key-client::after { animation: none; opacity: 0; }
}

.client-word-card.is-key-client:hover,
.client-word-card.is-key-client:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -26px rgba(255, 157, 46, 0.7);
  outline: none;
}

.client-word-card.is-key-client:focus-visible {
  box-shadow: 0 0 0 2px #ffcf7a, 0 30px 70px -26px rgba(255, 157, 46, 0.7);
}

.client-word-card.is-key-client .client-word-mark {
  color: rgba(255, 190, 90, 0.07);
}

.client-word-card.is-key-client .client-word-monogram {
  color: #1a1104;
  background: linear-gradient(135deg, #ffe0a3, #ff9d2e);
  border: 0;
}

.client-word-badge {
  position: static;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffcf7a;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 207, 122, 0.45);
  background: rgba(255, 207, 122, 0.08);
}

.client-word-card.is-key-client .client-word-text {
  color: #fff6e8;
}

.client-word-card.is-key-client .client-word-name {
  font-size: 1.02rem;
  background: linear-gradient(90deg, #ffe7b8, #ffb04d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.client-word-card.is-key-client .client-word-foot {
  border-top-color: rgba(255, 207, 122, 0.16);
}

.client-word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  order: 3;
}

.client-word-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.client-word-chip strong {
  color: #ffcf7a;
  font-weight: 700;
}

.client-word-more {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffcf7a;
}

.client-word-more::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 207, 122, 0.4);
  transition: transform 0.3s var(--ease-premium), background-color 0.3s var(--ease);
}

.client-word-card.is-key-client:hover .client-word-more::after {
  transform: translateX(3px);
  background: rgba(255, 207, 122, 0.14);
}

/* ---- profile pop-up ---- */
.cw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cw-modal-overlay.is-open { display: flex; }

.cw-modal {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #141418 0%, #0b0b0e 100%);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
  animation: cwModalIn 0.4s var(--ease-premium, ease) both;
}

.cw-modal--profile {
  padding: 0 0 24px;
  overflow-x: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #141210 0%, #0b0a09 100%) padding-box,
    linear-gradient(150deg, rgba(255, 214, 150, 0.7), rgba(255, 157, 46, 0.45) 40%, rgba(255, 255, 255, 0.08) 75%) border-box;
  box-shadow: 0 40px 90px -36px rgba(255, 157, 46, 0.22);
}

@keyframes cwModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-modal { animation: none; }
}

.cw-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 8, 10, 0.55);
  cursor: pointer;
}

.cw-profile-hero {
  height: 96px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(120% 140% at 85% 0%, rgba(255, 190, 110, 0.55) 0%, rgba(255, 157, 46, 0.32) 32%, rgba(74, 42, 12, 0.5) 62%, #0b0a09 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.cw-modal--profile .cw-modal-head,
.cw-modal--profile .cw-modal-stats,
.cw-modal--profile .cw-modal-quote,
.cw-modal--profile .cw-modal-socials {
  margin-left: 28px;
  margin-right: 28px;
}

.cw-modal-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: -38px;
  margin-bottom: 20px;
  position: relative;
}

.cw-modal-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: #1a1104;
  background: linear-gradient(135deg, #ffe7b8, #ffb04d);
  box-shadow: 0 0 0 4px #121010, 0 12px 24px -14px rgba(255, 157, 46, 0.45);
}

.cw-modal-who { padding-bottom: 4px; min-width: 0; }

.cw-modal-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffcf7a;
  margin-bottom: 4px;
}

.cw-modal-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}

.cw-modal-tagline {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
}

.cw-modal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

.cw-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #121110;
}

.cw-modal-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #f3e3c4;
}

.cw-modal-stat dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cw-modal-quote {
  margin-top: 0;
  margin-bottom: 18px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cw-modal-quote .client-word-rating { margin: 0 0 12px; }

.cw-modal-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #e9e6e0;
}

.cw-modal-socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.cw-modal-social {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 36px 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 207, 122, 0.25);
  background: rgba(255, 207, 122, 0.05);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cw-modal-social::after {
  content: "\2197";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffcf7a;
}

.cw-modal-social:hover {
  background: rgba(255, 207, 122, 0.12);
  border-color: rgba(255, 207, 122, 0.5);
}

.cw-modal-social-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
}

.cw-modal-social-host {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* room for the lift + glow on hover (the viewport clips its overflow) */
.client-words-viewport {
  padding: 14px 0 40px;
  margin: -14px 0 -40px;
}

@media (max-width: 560px) {
  .client-word-text { font-size: 0.98rem; }
  .cw-modal-name { font-size: 1.4rem; }
}

/* ---------- testimonials: team controls (add / edit / delete) ---------- */
.client-words-head {
  position: relative;
}

.client-words-add {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 157, 46, 0.5);
  background: rgba(255, 157, 46, 0.06);
  color: var(--accent);
  cursor: pointer;
}

.client-words-add:hover {
  background: rgba(255, 157, 46, 0.14);
}

.client-word-tools {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.client-word-tool {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
}

.client-word-tool:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.client-word-tool--danger:hover {
  color: var(--danger, #ff6b5e);
  border-color: rgba(255, 107, 94, 0.5);
}

.client-word-card.is-unpublished {
  opacity: 0.55;
}

.client-word-hidden-tag {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

.cw-modal--form {
  width: min(640px, 100%);
}

.cw-modal--form .cw-modal-name {
  margin-bottom: 18px;
}

.cw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .cw-form-grid {
    grid-template-columns: 1fr;
  }
}

.cw-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.cw-form-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cw-form-textarea {
  min-height: 96px;
  resize: vertical;
}

.cw-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 4px 0 10px;
  cursor: pointer;
}

.cw-form-key {
  padding: 14px;
  margin: 4px 0 12px;
  border: 1px solid rgba(255, 157, 46, 0.25);
  border-radius: 12px;
  background: rgba(255, 157, 46, 0.04);
}

.cw-form-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.cw-form-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cw-form-error {
  color: var(--danger, #ff6b5e);
  font-size: 0.84rem;
  margin: 6px 0 10px;
}

.cw-form-save {
  margin-top: 8px;
}

/* photo avatars (testimonials.avatar_url) */
.client-word-monogram,
.cw-modal-avatar {
  overflow: hidden;
}

.client-word-monogram.has-photo,
.cw-modal-avatar.has-photo {
  padding: 0;
  background: #1a1a20;
}

.client-word-monogram.has-photo img,
.cw-modal-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cw-form-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cw-form-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 1.05rem;
}

.cw-form-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cw-form-avatar-pick {
  cursor: pointer;
}

.cw-form-avatar-status {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ---- key client: social pills on the card ---- */
.client-word-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  order: 4;
}
.client-word-social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 207, 122, 0.28);
  background: rgba(255, 207, 122, 0.06);
  color: #ffe2ad;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease-premium);
}
.client-word-social:hover,
.client-word-social:focus-visible {
  background: rgba(255, 207, 122, 0.16);
  border-color: rgba(255, 207, 122, 0.6);
  transform: translateY(-1px);
}
.client-word-social-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.client-word-social-icon svg {
  width: 100%;
  height: 100%;
}

/* ---------- artwork showcase carousel (js/home-showcase.js) ----------
   Replaces the old 5-card grid: one big 16:9 render in the middle with
   the neighbours peeking in, native scroll-snap (swipe / trackpad), arrows,
   dots, gentle autoplay. */
.showcase-carousel {
  position: relative;
  margin: 0 calc(50% - 50vw);
}
.showcase-carousel .showcase-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 14px max(16px, calc((100vw - min(920px, 74vw)) / 2)) 18px;
  outline: none;
}
.showcase-carousel .showcase-track::-webkit-scrollbar { display: none; }
.showcase-carousel .render-card {
  flex: 0 0 min(920px, 74vw);
  aspect-ratio: 16 / 9;
  min-height: 0;
  scroll-snap-align: center;
  border-radius: 14px;
  overflow: hidden;
  padding: 28px;
}
.showcase-carousel .render-card:hover {
  transform: translateY(-3px);
}
.showcase-carousel .render-card-title {
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
}
.showcase-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(14, 14, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.showcase-nav:hover { border-color: var(--accent-dim); color: var(--accent); }
.showcase-nav--prev { left: max(12px, calc((100vw - min(920px, 74vw)) / 2 - 64px)); }
.showcase-nav--next { right: max(12px, calc((100vw - min(920px, 74vw)) / 2 - 64px)); }
.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.showcase-dot {
  width: 18px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.showcase-dot.is-active { width: 38px; background: var(--accent); }
@media (max-width: 720px) {
  .showcase-carousel .showcase-track { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .showcase-carousel .render-card { flex-basis: 88vw; padding: 18px; }
  .showcase-nav { display: none; }
}
.showcase { overflow-x: clip; }
.showcase {
  position: relative;
  padding: 90px clamp(24px, 5vw, 72px) 90px;
}
.showcase-head { margin: 0 0 40px; }
.showcase-heading-bar {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 16px;
  background: var(--accent);
}
.showcase-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.showcase-sub {
  margin: 14px 0 0;
  max-width: 520px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.showcase-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
}
.showcase-more:hover { color: var(--accent); }
.showcase-track .render-card { opacity: 1; transform: none; }
.showcase-track .render-card:hover { transform: translateY(-3px); }
.showcase-byline {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.showcase-skeleton {
  background: linear-gradient(110deg, #121216 30%, #1b1b21 50%, #121216 70%);
  background-size: 200% 100%;
  animation: lhShowcaseShimmer 1.6s linear infinite;
}
@keyframes lhShowcaseShimmer { to { background-position: -200% 0; } }

.section-anchor-alias { position: absolute; top: 0; }
.client-words { position: relative; }
.client-words-sub {
  margin: 14px 0 0;
  max-width: 520px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ---- team: "Want to be next?" card (paper-cut art, js/main.js) ---- */
.people-card--join {
  text-decoration: none;
  border-style: dashed;
  border-color: rgba(255, 157, 46, 0.35);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 157, 46, 0.12), transparent 60%),
    linear-gradient(155deg, #1a1a20 0%, #0c0c10 62%);
}
.people-card--join:hover { border-color: var(--accent); }
.people-join-art {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  transition: transform 0.45s var(--ease-premium, ease);
}
.people-join-art svg { width: 100%; height: 100%; display: block; }
.people-card--join:hover .people-join-art { transform: rotate(-6deg) scale(1.06); }
.people-join-cta { color: var(--accent) !important; }