html {
  background-color: #000;
  /* The sideways-scroll guard lives here, NOT on <body>. An ancestor with a
     non-visible overflow becomes the scroll container for any position:sticky
     inside it, which silently stops the sticky bars from pinning (Chrome is
     forgiving about it, iOS Safari is not). */
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}
/* `clip` trims stray sideways overflow WITHOUT creating a scroll container,
   so sticky keeps working. Ignored by browsers that don't support it. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* Fixed gradient layer — works consistently on desktop Chrome AND iOS Safari */
.bg-base {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2;
  background: linear-gradient(to bottom right, #df5f00 0%, #000000 50%, #df5f00 100%);
}

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
}

/* Glassmorphism */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.18));
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
.glass-soft {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.14));
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.glass-orange {
  background: linear-gradient(135deg, rgba(223,95,0,0.30), rgba(194,82,0,0.12));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,160,90,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

/* =====================================================================
   MAIN CATEGORY TABS — an app-style menu bar fixed to the bottom of the
   screen. It scrolls sideways when there are more tabs than fit, so the
   admin can add as many as they like.
   ===================================================================== */
/* A floating glass dock: hugs its tabs, fully rounded, lifted off the
   bottom edge. Falls back to a solid tint where backdrop-filter is off. */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: max-content;
  max-width: calc(100vw - 1.5rem);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 8, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 22px 45px -18px rgba(0,0,0,0.95);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar {
    background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(0,0,0,0.26));
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }
}
@media (min-width: 640px) {
  .tabbar {
    bottom: 1.25rem;
    max-width: min(92vw, 46rem);
  }
}
/* On large screens the dock moves up into the nav row (ui.js reparents it
   into #tabbar-slot). Without JS it still floats at the top rather than
   covering the bottom of the page. */
@media (min-width: 1024px) {
  .tabbar {
    top: 1.25rem;
    bottom: auto;
  }
}

/* Merged into the nav: flows in normal layout instead of floating. */
.tabbar--inline {
  position: static;
  transform: none;
  inset: auto;
  width: auto;
  max-width: none;
  z-index: auto;
  padding: 0.3rem;
}
/* Slightly tighter so it doesn't make the nav row tall. */
.tabbar--inline .tabbar__btn { padding: 0.3rem 0.6rem 0.25rem; font-size: 0.7rem; }
.tabbar--inline .tabbar__btn .ico { width: 3rem; height: 1.8rem; font-size: 1rem; }

.tabbar__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
  width: max-content;
  min-width: 100%;
  padding-inline: 0.4rem;
}

.tabbar__btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem 0.35rem;
  border-radius: 999px;
  color: rgba(255,255,255,0.55);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  transition: color .18s ease;
}
.tabbar__btn:hover { color: rgba(255,255,255,0.9); }
.tabbar__btn.is-on { color: #fff; }

/* Pill behind the icon marks the active tab. */
.tabbar__btn .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 2.2rem;
  border-radius: 999px;
  font-size: 1.15rem;
  /* Transparent border on the resting state so turning it on never nudges
     the layout by the border's width. */
  border: 1px solid transparent;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
/* Active pill: brand-tinted glass rather than a flat block of colour —
   translucent gradient, hairline edge and an inset top highlight, matching
   the .glass-orange treatment used elsewhere on the site. */
.tabbar__btn.is-on .ico {
  color: #fff;
  background: linear-gradient(135deg, rgba(223,95,0,0.62), rgba(223,95,0,0.20));
  border-color: rgba(255,160,90,0.65);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 8px 18px -8px rgba(223,95,0,0.75);
}
.theme-agency .tabbar__btn.is-on .ico {
  background: linear-gradient(135deg, rgba(111,37,199,0.68), rgba(111,37,199,0.24));
  border-color: rgba(168,110,240,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 8px 18px -8px rgba(111,37,199,0.8);
}

/* Keep page content clear of the bar.
   `--tabbar-space` is the room the dock takes up measured from whichever edge
   it is anchored to, and ui.js adds `.tabbar-top` when it sits at the top —
   so these rules follow the media query above without repeating the
   breakpoint in two places. */
body.has-tabbar { padding-bottom: calc(var(--tabbar-space, 5rem) + 1rem); }

body.has-tabbar.tabbar-top { padding-bottom: 0; padding-top: calc(var(--tabbar-space, 5rem) + 0.5rem); }
/* The sticky nav pins underneath the dock rather than behind it. */
body.has-tabbar.tabbar-top .page-nav { top: var(--tabbar-space, 5rem); }

/* Merged into the nav there is nothing to make room for. */
body.has-tabbar.tabbar-inline { padding-top: 0; padding-bottom: 0; }

/* =====================================================================
   TOP NAV — pins to the top of the screen so Home / the other division
   stay reachable while scrolling. Transparent until it actually pins.
   ===================================================================== */
.page-nav {
  position: -webkit-sticky;   /* older iOS Safari */
  position: sticky;
  top: 0;
  z-index: 40;
  /* bleed past the page gutter so the backdrop spans the full width */
  margin-inline: -1rem;
  padding: 0.45rem 1rem;
  transition: box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
  border-radius: 20rem;
  margin: 0rem;
}
/* Opaque by default so it stays readable without backdrop-filter. */
.page-nav.is-stuck {
  background: rgba(14, 6, 24, 0.95);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,0.95);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-nav.is-stuck {
    /* same glass recipe as the bottom dock, so the two read as one system */
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.26));
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }
}
@media (min-width: 640px) {
  .page-nav { margin-inline: -1.5rem; padding-inline: 1.5rem; }
}

/* =====================================================================
   SUBTABS — a single-line strip that scrolls sideways. It rides along
   with the page (not pinned).
   ===================================================================== */
.tab-dock {
  /* bleed past the page gutter so the strip can scroll edge to edge */
  margin-inline: -1rem;
  padding-block: 0.7rem;
}

.tab-strip {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.tab-strip::-webkit-scrollbar { display: none; }

/* The docked filter strips need to show that there are more pills past the
   edge, but a native scrollbar looks different in every browser and Chrome
   drops the ::-webkit-scrollbar styling as soon as `scrollbar-width` is set.
   So the bar stays hidden and the dock draws its own rail underneath: ui.js
   publishes the thumb size and offset as --sb-w / --sb-r (both 0-1 fractions
   of the rail) whenever the strip scrolls or resizes. */
.tab-dock { position: relative; --rail-gutter: 1rem; }
/* Enough room under the pills that an active one's glow is not clipped by
   the strip's own overflow, and the rail sits clear of them. */
.tab-dock .tab-strip { padding-bottom: 0.5rem; }

/* The rail is a transparent hit area parked in the dock's bottom padding, so
   there is something comfortable to grab even though the bar drawn inside it
   is only a few pixels tall. It sits below the pills, never over them. */
.tab-rail {
  position: absolute;
  left: var(--rail-gutter);
  right: var(--rail-gutter);
  bottom: 0;
  height: 0.85rem;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;   /* inert until there is actually somewhere to go */
  touch-action: none;     /* a drag along the rail must not scroll the page */
}
.tab-dock.is-scrollable .tab-rail { opacity: 1; pointer-events: auto; cursor: grab; }
.tab-dock.is-scrollable .tab-rail.is-dragging { cursor: grabbing; }

.tab-rail__track,
.tab-rail__thumb {
  position: absolute;
  bottom: 0.15rem;
  height: 5px;
  border-radius: 999px;
  pointer-events: none;   /* the rail itself takes the pointer */
}
.tab-rail__track { left: 0; right: 0; background: rgba(255,255,255,0.10); }
/* Placed with left/width rather than a transform: a scaleX'd bar squashes its
   own rounded caps flat once the thumb gets short. */
.tab-rail__thumb {
  left: calc(var(--sb-r, 0) * 100%);
  width: calc(var(--sb-w, 0.3) * 100%);
  background: linear-gradient(90deg, rgba(250,122,46,0.9), rgba(255,157,99,1));
  box-shadow: 0 0 12px rgba(223,95,0,0.5);
  transition: height .15s ease, box-shadow .15s ease;
}
/* Fatten it on hover and while held, so it reads as something you can grab. */
.tab-rail:hover .tab-rail__thumb,
.tab-rail.is-dragging .tab-rail__thumb {
  height: 7px;
  box-shadow: 0 0 16px rgba(223,95,0,0.7);
}

.tab-strip + .tab-strip { margin-top: 0.5rem; }
.tab-strip[hidden] { display: none; }

/* max-content + min-width:100% centers the pills when they fit and lets
   them run past the edge (left-aligned) when they don't. */
.tab-strip__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: max-content;
  min-width: 100%;
  padding-inline: 1rem;
}

/* Fade whichever edge still has pills hidden beyond it. */
.tab-strip.fade-l {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
}
.tab-strip.fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
}
.tab-strip.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}

@media (min-width: 640px) {
  .tab-dock { margin-inline: -1.5rem; --rail-gutter: 1.5rem; }
  .tab-strip__row { padding-inline: 1.5rem; }
}

.filter-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: center;
}

/* Active filter tab — solid bright orange for strong contrast vs the dark inactive tabs */
.filter-tab.glass-orange {
  background: #df5f00;
  border-color: #ff9a3c;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(223,95,0,0.45);
}

.card-hover {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(223,95,0,0.5);
}

.fade-up { animation: fadeUp .6s both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(223,95,0,0.4); border-radius: 99px; }

/* =====================================================================
   AGENCY THEME — purple (#6f25c7) instead of the Tech orange.
   Applied by adding class="theme-agency" on <body>.
   ===================================================================== */
.theme-agency .bg-base {
  background: linear-gradient(to bottom right, #6f25c7 0%, #000000 50%, #6f25c7 100%);
}
.theme-agency .glass-orange {
  background: linear-gradient(135deg, rgba(111,37,199,0.34), rgba(90,28,160,0.14));
  border: 1px solid rgba(168,110,240,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.theme-agency .card-hover:hover {
  border-color: rgba(111,37,199,0.5);
}
.theme-agency .tab-rail__thumb {
  background: linear-gradient(90deg, rgba(154,82,227,0.9), rgba(180,131,239,1));
  box-shadow: 0 0 12px rgba(111,37,199,0.6);
}
.theme-agency .tab-rail:hover .tab-rail__thumb,
.theme-agency .tab-rail.is-dragging .tab-rail__thumb {
  box-shadow: 0 0 16px rgba(111,37,199,0.8);
}
.theme-agency ::-webkit-scrollbar-thumb { background: rgba(111,37,199,0.45); }
.theme-agency .filter-tab.glass-orange {
  background: #6f25c7;
  border-color: #a86ef0;
  box-shadow: 0 6px 20px rgba(111,37,199,0.45);
}