/* ============================================================
   NeoSOFT — AI Capability Showcase
   custom styles layered on top of Tailwind CDN
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(238,46,43,0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 10%, rgba(99,102,241,0.08), transparent 60%),
    #06070B;
}

/* ----- Section reveal animation ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Tech-stack pill ----- */
.stack-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.75rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 600;
  font-size: 0.85rem;
  color: #e4e4e7;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  text-align: center;
}
.stack-chip:hover {
  border-color: rgba(238,46,43,0.55);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(238,46,43,0.35);
}

/* ============================================================
   Filter sidebar (desktop right-pinned) + mobile bottom-sheet
   ============================================================ */
/* The filter sidebar is now a collapsed drawer — it never reserves layout width,
   so the old `padding-right: var(--filter-width)` / `margin-right` reservations are
   gone. (Those overrode `.case-featured { margin: 0 auto }` and shoved the featured
   cards flush-right on viewports wider than 1280px.) */

/* ---- Sidebar shell — collapsed drawer by default, opens via the Filters toggle ---- */
.filter-sidebar {
  position: fixed;
  top: 50%;
  right: 1rem;
  z-index: 60;
  width: 300px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 100px);
  display: block;
  /* Hidden in place (never pushed off-screen) so it can't add horizontal overflow / shift the page */
  transform: translateY(-50%) translateX(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.32s;
}
.filter-sidebar.is-open {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2,.7,.2,1), visibility 0s;
}

/* ---- Glass panel ---- */
.filter-panel {
  background: linear-gradient(180deg, rgba(17,20,28,0.92), rgba(11,13,20,0.92));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1.25rem;
  padding: 0.85rem;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 30px 80px -25px rgba(0,0,0,0.7), 0 0 60px -30px rgba(238,46,43,0.3);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.filter-panel::-webkit-scrollbar { width: 6px; }
.filter-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  padding: 0.25rem 0.35rem 0.55rem;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  flex-wrap: nowrap;
}
.filter-head-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FF7977;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.filter-head-title svg { flex-shrink: 0; }
.filter-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  flex-shrink: 0;
}

/* small "Clear" pill — only visible when at least one filter is active */
.filter-clear {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(238,46,43,0.4);
  background: rgba(238,46,43,0.12);
  color: #FF7977;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-clear:hover { background: rgba(238,46,43,0.22); color: #fff; }
.filter-clear { display: none; }
.filter-sidebar.has-active .filter-clear {
  display: inline-flex;
  opacity: 1;
  pointer-events: auto;
}

/* helper hint under the head */
.filter-hint {
  font-size: 0.68rem;
  color: #71717a;
  letter-spacing: 0.02em;
  margin: -0.2rem 0.35rem 0.55rem;
  line-height: 1.4;
}

/* ---- Group label ---- */
.filter-group-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #71717a;
  padding: 0.85rem 0.6rem 0.4rem;
}

/* ---- Filter buttons (pills) ---- */
.filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: #d4d4d8;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  margin-bottom: 2px;
}
.filter-btn svg { color: #a1a1aa; transition: color 0.2s ease; flex-shrink: 0; }
.filter-btn .filter-btn-label { flex: 1; min-width: 0; }
.filter-btn .filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  color: #71717a;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 26px;
  text-align: center;
}
.filter-btn:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
}
.filter-btn:hover svg { color: #FF7977; }
.filter-btn.is-active {
  background: linear-gradient(90deg, rgba(238,46,43,0.18), rgba(238,46,43,0.06));
  color: #fff;
  border-color: rgba(238,46,43,0.45);
  box-shadow: 0 8px 20px -10px rgba(238,46,43,0.55);
}
.filter-btn.is-active svg { color: #FF7977; }
.filter-btn.is-active .filter-count {
  color: #fff;
  background: rgba(238,46,43,0.30);
  border-color: rgba(238,46,43,0.40);
}
.filter-btn.filter-all { font-weight: 600; }
.filter-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* ---- Hide a case-section that's filtered out ---- */
.case-section.is-hidden,
.featured-shortcut.is-hidden { display: none !important; }

/* ---- Empty-state notice when nothing matches ---- */
.filter-empty {
  display: none;
  max-width: 600px;
  margin: 3rem auto 6rem;
  padding: 2rem;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.02);
}
.filter-empty.is-visible { display: block; }
.filter-empty h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
.filter-empty p { color: #a1a1aa; font-size: 0.95rem; }
.filter-empty button {
  margin-top: 1rem;
  padding: 0.6rem 1.3rem;
  background: #EE2E2B;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.filter-empty button:hover { background: #FF4D4A; }

/* ---- Mobile FAB ---- */
.filter-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 65; /* above the drawer + backdrop so it stays clickable to toggle closed */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #EE2E2B 0%, #C82320 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 18px 40px -10px rgba(238,46,43,0.6), 0 8px 20px -5px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.filter-fab:hover { transform: translateY(-2px); }
.filter-fab.has-active::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid #EE2E2B;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: filterPulse 2s ease-out infinite;
}
@keyframes filterPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.filter-fab-label { font-weight: 700; letter-spacing: 0.02em; }
.filter-fab-active {
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.25);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Mobile bottom-sheet drawer ---- */
@media (max-width: 1023px) {
  .filter-sidebar {
    display: block;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    width: 100%;
    max-width: none;
    max-height: 78vh;
    /* mobile bottom-sheet hides purely via translateY, so keep it visible/opaque */
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
    z-index: 60;
  }
  .filter-sidebar.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .filter-sidebar .filter-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 78vh;
    padding: 1.1rem;
  }
  .filter-sidebar .filter-panel::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 0.85rem;
    background: rgba(255,255,255,0.20);
    border-radius: 4px;
  }
  .filter-sidebar .filter-head { padding-bottom: 0.7rem; }
  .filter-btn { padding: 0.7rem 0.85rem; font-size: 0.9rem; min-height: 44px; }
}

.filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,7,11,0.65);
  backdrop-filter: blur(4px);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: block;
}
.filter-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Featured-project shortcut cards (top of Case Studies area)
   ============================================================ */
.featured-shortcuts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 3rem auto 0;
  max-width: 1280px;
}
@media (min-width: 768px) {
  .featured-shortcuts { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.featured-shortcut {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
  min-height: 92px;
}
.featured-shortcut::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--fs-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.featured-shortcut:hover {
  border-color: var(--fs-border);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px var(--fs-shadow);
}
.featured-shortcut:hover::before { opacity: 1; }

.fs-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--fs-icon-bg-strong), var(--fs-icon-bg-soft));
  color: var(--fs-icon-color);
  border: 1px solid var(--fs-border);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s, box-shadow 0.3s;
}
.featured-shortcut:hover .fs-icon {
  transform: scale(1.06);
  box-shadow: 0 0 22px -4px var(--fs-shadow);
}
.fs-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.fs-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fs-icon-color);
}
.fs-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin-top: 0.2rem;
  letter-spacing: -0.01em;
}
.fs-tagline {
  font-size: 0.82rem;
  color: #a1a1aa;
  margin-top: 0.15rem;
}
.fs-arrow {
  color: #fff;
  opacity: 0.5;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: opacity 0.3s, transform 0.3s;
}
.featured-shortcut:hover .fs-arrow {
  opacity: 1;
  transform: translate(3px, -3px);
}

/* accent variants */
.fs-red {
  --fs-icon-color: #FF7977;
  --fs-icon-bg-strong: rgba(238,46,43,0.22);
  --fs-icon-bg-soft: rgba(238,46,43,0.04);
  --fs-border: rgba(238,46,43,0.45);
  --fs-glow: rgba(238,46,43,0.18);
  --fs-shadow: rgba(238,46,43,0.45);
}
.fs-teal {
  --fs-icon-color: #5EEAD4;
  --fs-icon-bg-strong: rgba(45,212,191,0.22);
  --fs-icon-bg-soft: rgba(45,212,191,0.04);
  --fs-border: rgba(45,212,191,0.45);
  --fs-glow: rgba(45,212,191,0.18);
  --fs-shadow: rgba(45,212,191,0.45);
}
.fs-violet {
  --fs-icon-color: #C4B5FD;
  --fs-icon-bg-strong: rgba(139,92,246,0.22);
  --fs-icon-bg-soft: rgba(139,92,246,0.04);
  --fs-border: rgba(139,92,246,0.45);
  --fs-glow: rgba(139,92,246,0.18);
  --fs-shadow: rgba(139,92,246,0.45);
}

@media (max-width: 640px) {
  .featured-shortcuts { margin-top: 2rem; }
  .featured-shortcut { padding: 1rem 1.15rem; gap: 0.85rem; }
  .fs-icon { width: 48px; height: 48px; border-radius: 12px; }
  .fs-title { font-size: 1.05rem; }
  .fs-tagline { font-size: 0.78rem; }
}

/* ============================================================
   AI Capabilities mosaic — 24 small square tiles
   colour-coded by domain family
   ============================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
@media (min-width: 480px) { .cap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cap-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem; } }
@media (min-width: 1024px) { .cap-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem; } }

.cap-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.1rem 0.5rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
  min-height: 108px;
  overflow: hidden;
  cursor: default;
}
.cap-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--cap-glow, rgba(238,46,43,0.18)), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.cap-tile:hover {
  transform: translateY(-3px);
  border-color: var(--cap-border, rgba(238,46,43,0.55));
  box-shadow: 0 14px 32px -14px var(--cap-shadow, rgba(238,46,43,0.5));
}
.cap-tile:hover::before { opacity: 1; }

.cap-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cap-icon-bg-strong, rgba(238,46,43,0.22)), var(--cap-icon-bg-soft, rgba(238,46,43,0.04)));
  color: var(--cap-icon, #FF7977);
  border: 1px solid var(--cap-border, rgba(238,46,43,0.35));
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.cap-tile:hover .cap-icon {
  transform: scale(1.10);
  box-shadow: 0 0 26px -4px var(--cap-shadow, rgba(238,46,43,0.55));
  filter: saturate(1.15);
}

.cap-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
  color: #d4d4d8;
  line-height: 1.3;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.cap-tile:hover .cap-label { color: #fff; }

/* ---- Category accents (CSS variables drive everything) ---- */
.cap-tile.cap-gen {
  --cap-icon: #FF7977;
  --cap-icon-bg-strong: rgba(238,46,43,0.22);
  --cap-icon-bg-soft: rgba(238,46,43,0.04);
  --cap-border: rgba(238,46,43,0.40);
  --cap-glow: rgba(238,46,43,0.20);
  --cap-shadow: rgba(238,46,43,0.45);
}
.cap-tile.cap-vis {
  --cap-icon: #67E8F9;
  --cap-icon-bg-strong: rgba(34,211,238,0.22);
  --cap-icon-bg-soft: rgba(34,211,238,0.04);
  --cap-border: rgba(34,211,238,0.40);
  --cap-glow: rgba(34,211,238,0.20);
  --cap-shadow: rgba(34,211,238,0.45);
}
.cap-tile.cap-pred {
  --cap-icon: #FCD34D;
  --cap-icon-bg-strong: rgba(251,191,36,0.22);
  --cap-icon-bg-soft: rgba(251,191,36,0.04);
  --cap-border: rgba(251,191,36,0.40);
  --cap-glow: rgba(251,191,36,0.20);
  --cap-shadow: rgba(251,191,36,0.45);
}

/* legend */
.cap-legend {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.cap-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #a1a1aa;
  letter-spacing: 0.02em;
}
.cap-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
.cap-leg-dot--gen { background: #EE2E2B; box-shadow: 0 0 12px rgba(238,46,43,0.7), 0 0 0 1px rgba(238,46,43,0.4); }
.cap-leg-dot--vis { background: #22D3EE; box-shadow: 0 0 12px rgba(34,211,238,0.7), 0 0 0 1px rgba(34,211,238,0.4); }
.cap-leg-dot--pred { background: #FBBF24; box-shadow: 0 0 12px rgba(251,191,36,0.7), 0 0 0 1px rgba(251,191,36,0.4); }

/* mobile cleanup */
@media (max-width: 640px) {
  .cap-tile { min-height: 96px; padding: 0.95rem 0.4rem 0.75rem; border-radius: 0.85rem; gap: 0.5rem; }
  .cap-icon { width: 38px; height: 38px; border-radius: 10px; }
  .cap-label { font-size: 0.68rem; }
  .cap-legend { gap: 1rem; margin-top: 1.75rem; }
  .cap-leg-item { font-size: 0.72rem; }
}

/* ----- Gen AI model grid (flex so partial last row centres nicely) ----- */
.model-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.model-grid > .model-card {
  flex: 1 1 calc(50% - 1rem);
  min-width: 150px;
  max-width: 220px;
}
@media (min-width: 640px) {
  .model-grid > .model-card { flex-basis: calc(33.333% - 1rem); }
}
@media (min-width: 768px) {
  .model-grid { gap: 1.25rem; }
  .model-grid > .model-card { flex-basis: calc(25% - 1.25rem); }
}
@media (min-width: 1024px) {
  .model-grid > .model-card { flex-basis: calc(14.2857% - 1.1rem); max-width: 200px; }
}

/* ----- Gen AI model cards ----- */
.model-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}
.model-card:hover {
  border-color: rgba(238,46,43,0.5);
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -25px rgba(0,0,0,0.6), 0 0 50px -20px rgba(238,46,43,0.3);
}
.model-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
}

/* ----- Gen AI capability cards ----- */
.pattern-card {
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  padding: 1.75rem;
  transition: all 0.3s ease;
}
.pattern-card:hover {
  border-color: rgba(238,46,43,0.45);
  transform: translateY(-3px);
}
.pattern-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(238,46,43,0.25), rgba(238,46,43,0.05));
  color: #FF4D4A;
  border: 1px solid rgba(238,46,43,0.35);
}
.pattern-icon.accent-emerald {
  background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(16,185,129,0.05));
  color: #34D399;
  border-color: rgba(16,185,129,0.4);
}
.pattern-icon.accent-sky {
  background: linear-gradient(135deg, rgba(56,189,248,0.25), rgba(56,189,248,0.05));
  color: #7DD3FC;
  border-color: rgba(56,189,248,0.4);
}
.pattern-icon.accent-amber {
  background: linear-gradient(135deg, rgba(251,146,60,0.30), rgba(251,146,60,0.05));
  color: #FDBA74;
  border-color: rgba(251,146,60,0.45);
}

/* ----- Filter pills ----- */
.filter-pill {
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #d4d4d8;
  transition: all 0.2s ease;
}
.filter-pill:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.filter-pill.active {
  background: #EE2E2B;
  color: #fff;
  border-color: #EE2E2B;
  box-shadow: 0 10px 30px -10px rgba(238,46,43,0.6);
}

/* ============================================================
   Case-study SECTIONS  (one full section per case study)
   ============================================================ */
.case-section {
  position: relative;
  padding: 5rem 1.5rem;
  scroll-margin-top: 80px;
}
@media (min-width: 1024px) {
  .case-section { padding: 7.5rem 2.5rem; }
}
.case-section + .case-section { border-top: 1px solid rgba(255,255,255,0.05); }

/* faint number watermark behind each section (premium feel) */
.case-section::before {
  content: attr(data-index);
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(180px, 28vw, 380px);
  line-height: 1;
  color: rgba(255,255,255,0.018);
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.06em;
}
.case-section:nth-child(even)::before { right: auto; left: 4%; }

.case-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .case-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 5rem;
  }
}

/* alternate sides: even sections push visual to the right */
.case-section:nth-child(even) .case-visual { order: 2; }
@media (max-width: 1023px) {
  .case-section:nth-child(even) .case-visual { order: -1; }
}

/* ---- visual side ---- */
.case-visual {
  position: relative;
  border-radius: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.case-visual:hover {
  border-color: rgba(238,46,43,0.4);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.75), 0 0 80px -40px rgba(238,46,43,0.4);
}
.case-visual .case-thumb { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .case-visual .case-thumb { aspect-ratio: 5 / 4; }
}

.case-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0B0D14;
}
/* blurred backdrop fills the dead space without cropping the foreground */
.thumb-blur {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(38px) saturate(1.3) brightness(0.55);
  transform: scale(1.15);
  z-index: 0;
  transition: opacity 0.45s ease, background-image 0.45s ease;
}
.thumb-track {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.thumb-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.9rem;
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55));
}
.thumb-slide.active { opacity: 1; }
.case-visual:hover .thumb-slide.active { transform: scale(1.02); }

/* subtle bottom fade to blend into card body */
.case-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,7,11,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Carousel controls */
.thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: rgba(6,7,11,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s ease, background 0.25s, transform 0.2s;
}
.case-visual:hover .thumb-nav { opacity: 1; }
.thumb-nav:hover { background: #EE2E2B; border-color: #EE2E2B; }
.thumb-nav.prev { left: 10px; }
.thumb-nav.next { right: 10px; }

.thumb-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 6px;
}
.thumb-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.25s;
}
.thumb-dot.active {
  width: 22px;
  background: #EE2E2B;
  border-color: #EE2E2B;
}

.thumb-count {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #fff;
  background: rgba(6,7,11,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ---- floating badge on the visual ---- */
.case-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  background: rgba(6,7,11,0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 4;
}

/* ---- text content side ---- */
.case-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.case-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.case-num-big {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}
.case-num-divider {
  color: rgba(255,255,255,0.25);
  margin: 0 0.15rem;
  font-weight: 500;
}
.case-num-total {
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  font-size: 0.9rem;
}
.case-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF4D4A;
  padding: 0.3rem 0.7rem;
  background: rgba(238,46,43,0.10);
  border: 1px solid rgba(238,46,43,0.3);
  border-radius: 9999px;
}

.case-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-top: 0.25rem;
}
.case-subtitle {
  font-size: 1.05rem;
  color: #d4d4d8;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 0.25rem;
}
.case-summary {
  color: #c4c4c8;
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 0.75rem;
}
.case-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin-top: 1rem;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.case-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 9px;
  background: rgba(238,46,43,0.10);
  color: #FF7977;
  border: 1px solid rgba(238,46,43,0.25);
}
.case-tag.gray {
  background: rgba(255,255,255,0.05);
  color: #d4d4d8;
  border-color: rgba(255,255,255,0.10);
}
.case-feature-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.case-feature-list li {
  display: flex;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: #d4d4d8;
  line-height: 1.55;
}
.case-feature-list li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #FF4D4A;
  margin-top: 3px;
}

/* outcome card */
.case-outcome {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(238,46,43,0.10), rgba(238,46,43,0.02));
  border: 1px solid rgba(238,46,43,0.25);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.case-outcome .outcome-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FF7977;
  flex-shrink: 0;
}
.case-outcome .outcome-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/* (multi-image grids replaced by built-in carousel) */

/* Icon-collage placeholder thumb (used until generated images arrive) */
.icon-collage-thumb {
  background: radial-gradient(120% 100% at 20% 0%, rgba(238,46,43,0.10), transparent 60%),
              radial-gradient(120% 100% at 100% 100%, rgba(99,102,241,0.10), transparent 60%),
              linear-gradient(135deg, #181C26 0%, #0B0D14 100%);
}
.icon-collage-thumb::after { display: none; }
.icon-collage-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  z-index: 1;
}
.icon-collage-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.35s ease;
}
.icon-collage-cell:hover { background: rgba(255,255,255,0.03); }
.icon-collage-bubble {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(238,46,43,0.22), rgba(238,46,43,0.04));
  color: #FF6E6B;
  border: 1px solid rgba(238,46,43,0.30);
  box-shadow: 0 18px 30px -15px rgba(238,46,43,0.45);
}
@media (min-width: 768px) {
  .icon-collage-bubble { width: 72px; height: 72px; }
}
.icon-collage-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
}

/* Counter shimmer */
[data-counter] { transition: color 0.2s; }

/* Lightbox */
#lightbox.open { display: flex !important; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Better focus visible for accessibility */
a:focus-visible, button:focus-visible, .filter-pill:focus-visible {
  outline: 2px solid #FF4D4A;
  outline-offset: 3px;
  border-radius: 12px;
}

/* ============================================================
   Featured project (Aurevia Voyages) — compact, full-width
   ============================================================ */
.case-section.is-featured { padding: 5rem 1.5rem; }
@media (min-width: 1024px) {
  .case-section.is-featured { padding: 7rem 2.5rem; }
}
.case-section.is-featured::before { content: none; }

.case-featured {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  border-radius: 2rem;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(238,46,43,0.18), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(99,102,241,0.18), transparent 60%),
    linear-gradient(135deg, #11141C 0%, #0B0D14 100%);
  border: 1px solid rgba(238,46,43,0.30);
  box-shadow: 0 40px 100px -40px rgba(238,46,43,0.35), 0 30px 80px -30px rgba(0,0,0,0.7);
  overflow: hidden;
}

.case-featured-ribbon {
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  background: rgba(238,46,43,0.05);
}
.ribbon-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF7977;
}
.ribbon-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

.case-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 2.5rem;
}
@media (min-width: 1024px) {
  .case-featured-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 4rem;
    padding: 3.5rem;
  }
  .case-featured-below { grid-column: 1 / -1; }
}

.case-featured-text { display: flex; flex-direction: column; gap: 0.85rem; }
.case-featured-below { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.5rem; }

.case-featured-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (min-width: 640px) {
  .case-featured-actions { flex-direction: row; align-items: center; gap: 1.25rem; }
}
.case-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #EE2E2B;
  color: #fff;
  font-weight: 700;
  padding: 0.95rem 1.6rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 40px -18px rgba(238,46,43,0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: max-content;
}
.case-cta-primary:hover {
  background: #FF4D4A;
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -20px rgba(238,46,43,0.85);
}
.case-featured-hint {
  font-size: 0.78rem;
  color: #a1a1aa;
}

/* visual side — animated agent-mesh mockup */
.case-featured-visual {
  position: relative;
  border-radius: 1.5rem;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center, #181C26 0%, #0B0D14 70%);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.mesh-mock { position: absolute; inset: 0; }
.mesh-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(238,46,43,0.25), transparent 70%),
    radial-gradient(70% 70% at 50% 50%, rgba(99,102,241,0.12), transparent 70%);
}
.mesh-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #EE2E2B 0%, #C82320 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  z-index: 4;
  box-shadow: 0 0 0 6px rgba(238,46,43,0.18), 0 30px 60px -20px rgba(238,46,43,0.7);
}
.mesh-center span { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.18em; }

.mesh-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 1px dashed rgba(255,255,255,0.12);
}
.mesh-ring--a { width: 220px; height: 220px; animation: meshSpin 22s linear infinite; }
.mesh-ring--b { width: 320px; height: 320px; animation: meshSpin 34s linear infinite reverse; }
.mesh-ring--c { width: 420px; height: 420px; animation: meshSpin 48s linear infinite; opacity: 0.6; }
@keyframes meshSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.mesh-node {
  --r: 160px;
  --angle: calc((var(--i) / 13) * 360deg);
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, #FF7977 0%, #EE2E2B 70%, #7a0e0d 100%);
  box-shadow: 0 0 12px rgba(238,46,43,0.7), 0 0 0 2px rgba(238,46,43,0.15);
  transform: rotate(var(--angle)) translateX(var(--r)) rotate(calc(var(--angle) * -1));
  animation: meshPulse 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
  z-index: 3;
}
.mesh-node::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2px;
  height: var(--r);
  margin-left: -1px;
  margin-top: 0;
  background: linear-gradient(to top, rgba(238,46,43,0.45), transparent 80%);
  transform-origin: top center;
  transform: translate(-50%, -100%);
  z-index: -1;
  opacity: 0.55;
}
@keyframes meshPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(238,46,43,0.7), 0 0 0 2px rgba(238,46,43,0.15); transform: rotate(var(--angle)) translateX(var(--r)) rotate(calc(var(--angle) * -1)) scale(1); }
  50% { box-shadow: 0 0 18px rgba(238,46,43,1), 0 0 0 3px rgba(238,46,43,0.25); transform: rotate(var(--angle)) translateX(var(--r)) rotate(calc(var(--angle) * -1)) scale(1.18); }
}

/* small screens — shrink the mesh */
@media (max-width: 640px) {
  .mesh-center { width: 84px; height: 84px; font-size: 0.7rem; }
  .mesh-ring--a { width: 170px; height: 170px; }
  .mesh-ring--b { width: 240px; height: 240px; }
  .mesh-ring--c { width: 310px; height: 310px; }
  .mesh-node { --r: 120px; }
}

.mesh-stat {
  position: absolute;
  padding: 0.55rem 0.85rem;
  background: rgba(11,13,20,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: 'Space Grotesk', sans-serif;
  z-index: 5;
}
.mesh-stat b { color: #fff; font-size: 1.5rem; font-weight: 700; }
.mesh-stat span { color: #a1a1aa; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mesh-stat--top { top: 6%; left: 6%; }
.mesh-stat--mid { bottom: 50%; right: 4%; transform: translateY(50%); }
.mesh-stat--bot { bottom: 6%; left: 6%; }
@media (max-width: 640px) {
  .mesh-stat b { font-size: 1.15rem; }
  .mesh-stat span { font-size: 0.6rem; }
}

/* ============================================================
   Teal-accent featured variant (NanoEcho · Healthcare)
   ============================================================ */
.case-section.is-featured.accent-teal .case-featured {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(45,212,191,0.18), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(56,189,248,0.16), transparent 60%),
    linear-gradient(135deg, #11141C 0%, #0B0D14 100%);
  border-color: rgba(45,212,191,0.35);
  box-shadow: 0 40px 100px -40px rgba(45,212,191,0.35), 0 30px 80px -30px rgba(0,0,0,0.7);
}
.case-section.is-featured.accent-teal .case-featured-ribbon {
  background: rgba(45,212,191,0.08);
}
.case-section.is-featured.accent-teal .ribbon-eyebrow { color: #5EEAD4; }
.case-section.is-featured.accent-teal .case-eyebrow-tag {
  color: #5EEAD4;
  background: rgba(45,212,191,0.12);
  border-color: rgba(45,212,191,0.40);
}
.case-section.is-featured.accent-teal .case-feature-list li svg { color: #2DD4BF; }
.case-section.is-featured.accent-teal .case-cta-primary {
  background: #14B8A6;
  box-shadow: 0 18px 40px -18px rgba(20,184,166,0.7);
}
.case-section.is-featured.accent-teal .case-cta-primary:hover {
  background: #2DD4BF;
  box-shadow: 0 24px 50px -20px rgba(45,212,191,0.85);
}

/* ============================================================
   Scanner sonar visualization (NanoEcho)
   ============================================================ */
.scan-mock {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, #0E1A1E 0%, #06070B 70%);
}
.scan-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 45% at 50% 50%, rgba(45,212,191,0.30), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(56,189,248,0.12), transparent 70%);
}
.scan-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(45,212,191,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45,212,191,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 90%);
}
.scan-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 1px solid rgba(45,212,191,0.25);
  opacity: 0.7;
  animation: scanPulseRing 4.5s ease-out infinite;
}
.scan-ring--a { width: 50px; height: 50px; animation-delay: 0s; }
.scan-ring--b { width: 50px; height: 50px; animation-delay: 1.5s; }
.scan-ring--c { width: 50px; height: 50px; animation-delay: 3s; }
@keyframes scanPulseRing {
  0% {
    width: 80px; height: 80px;
    opacity: 0.8;
    border-color: rgba(45,212,191,0.55);
  }
  100% {
    width: 520px; height: 520px;
    opacity: 0;
    border-color: rgba(45,212,191,0.05);
  }
}
.scan-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 9999px;
  background: conic-gradient(from 0deg,
    rgba(45,212,191,0) 0deg,
    rgba(45,212,191,0) 300deg,
    rgba(45,212,191,0.35) 350deg,
    rgba(45,212,191,0.55) 358deg,
    rgba(45,212,191,0.85) 360deg);
  filter: blur(2px);
  animation: scanSweep 4s linear infinite;
  z-index: 1;
}
@keyframes scanSweep { to { transform: rotate(360deg); } }

.scan-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  z-index: 4;
  box-shadow: 0 0 0 6px rgba(45,212,191,0.18), 0 30px 60px -20px rgba(45,212,191,0.7);
}
.scan-center span {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
}

.scan-target {
  position: absolute;
  top: 32%; left: 64%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.scan-target-pulse {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #FF4D4A;
  box-shadow: 0 0 0 0 rgba(255,77,74,0.7);
  animation: targetPing 1.8s ease-out infinite;
}
@keyframes targetPing {
  0% { box-shadow: 0 0 0 0 rgba(255,77,74,0.7); }
  70% { box-shadow: 0 0 0 16px rgba(255,77,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,74,0); }
}
.scan-target-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  background: rgba(6,7,11,0.85);
  border: 1px solid rgba(255,77,74,0.4);
  color: #FF7977;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scan-stat {
  position: absolute;
  padding: 0.55rem 0.85rem;
  background: rgba(11,13,20,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(45,212,191,0.25);
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: 'Space Grotesk', sans-serif;
  z-index: 5;
}
.scan-stat b { color: #5EEAD4; font-size: 1.25rem; font-weight: 700; }
.scan-stat span { color: #a1a1aa; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.scan-stat--top { top: 6%; left: 6%; }
.scan-stat--mid { top: 50%; right: 4%; transform: translateY(-50%); }
.scan-stat--bot { bottom: 6%; left: 6%; }

@media (max-width: 640px) {
  .scan-center { width: 88px; height: 88px; font-size: 0.75rem; }
  .scan-stat b { font-size: 1rem; }
  .scan-stat span { font-size: 0.58rem; }
}

/* ============================================================
   Indigo/Violet-accent featured variant (GO2 Store · Retail)
   ============================================================ */
.case-section.is-featured.accent-indigo .case-featured {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(139,92,246,0.18), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(99,102,241,0.16), transparent 60%),
    linear-gradient(135deg, #11141C 0%, #0B0D14 100%);
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 40px 100px -40px rgba(139,92,246,0.35), 0 30px 80px -30px rgba(0,0,0,0.7);
}
.case-section.is-featured.accent-indigo .case-featured-ribbon { background: rgba(139,92,246,0.08); }
.case-section.is-featured.accent-indigo .ribbon-eyebrow { color: #C4B5FD; }
.case-section.is-featured.accent-indigo .case-eyebrow-tag {
  color: #C4B5FD;
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.40);
}
.case-section.is-featured.accent-indigo .case-feature-list li svg { color: #A78BFA; }
.case-section.is-featured.accent-indigo .case-cta-primary {
  background: #7C3AED;
  box-shadow: 0 18px 40px -18px rgba(124,58,237,0.7);
}
.case-section.is-featured.accent-indigo .case-cta-primary:hover {
  background: #8B5CF6;
  box-shadow: 0 24px 50px -20px rgba(139,92,246,0.85);
}

/* ============================================================
   Photo-carousel visual (for featured entries with real images)
   ============================================================ */
.case-featured-visual.is-photo { aspect-ratio: auto; }

.feat-photo-mock {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #06070B;
}
.feat-photo-blur {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(30px) saturate(1.2) brightness(0.55);
  transform: scale(1.12);
  z-index: 0;
  transition: background-image 0.5s ease;
}
.feat-photo-track {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.feat-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: block;
}
.feat-slide.active { opacity: 1; }

.feat-photo-count {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  background: rgba(6,7,11,0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.feat-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 8px;
}
.feat-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.feat-dot.active {
  width: 26px;
  background: #fff;
  border-color: #fff;
}
.case-section.is-featured.accent-indigo .feat-dot.active { background: #A78BFA; border-color: #A78BFA; }

/* ============================================================
   Mobile menu drawer
   ============================================================ */
#mobile-menu {
  opacity: 0;
  transition: opacity 0.25s ease;
}
#mobile-menu.is-open { opacity: 1; }
#mobile-menu > div:last-child {
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
#mobile-menu.is-open > div:last-child { transform: translateX(0); }

.mobile-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  color: #e4e4e7;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  min-height: 48px;
}
.mobile-link:hover,
.mobile-link:active {
  background: rgba(238,46,43,0.10);
  color: #fff;
}
.mobile-link svg { color: #FF7977; flex-shrink: 0; }

/* ============================================================
   Touch-device improvements
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Always show carousel arrows on touch devices (no hover) */
  .thumb-nav { opacity: 1; }
  /* Generous tap targets */
  .thumb-nav { width: 40px; height: 40px; }
  .thumb-dot {
    width: 10px;
    height: 10px;
    /* expand invisible hit area */
    box-shadow: 0 0 0 8px transparent;
  }
  .thumb-dot.active { width: 26px; }
  .feat-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 8px transparent;
  }
  .feat-dot.active { width: 30px; }
}

/* ============================================================
   Reduced-motion: respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mesh-ring--a, .mesh-ring--b, .mesh-ring--c,
  .mesh-node,
  .scan-sweep, .scan-ring,
  .scan-target-pulse {
    animation: none !important;
  }
}

/* ============================================================
   Small-screen content polish (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  .pattern-card { padding: 1.25rem; }

  /* Case-study sections: tighter padding + better watermark scale */
  .case-section { padding: 3.5rem 1.25rem; scroll-margin-top: 64px; }
  .case-section::before {
    font-size: clamp(80px, 22vw, 130px);
    opacity: 0.012;
    right: 6%;
  }
  .case-section:nth-child(even)::before { left: 6%; right: auto; }
  .case-inner { gap: 1.75rem; }

  /* Case text */
  .case-title { font-size: 1.75rem; letter-spacing: -0.02em; }
  .case-subtitle { font-size: 0.95rem; }
  .case-summary { font-size: 0.92rem; }
  .case-feature-list li { font-size: 0.88rem; }
  .case-outcome { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.9rem 1rem; }
  .case-outcome .outcome-text { font-size: 0.9rem; }

  /* Featured sections */
  .case-section.is-featured { padding: 3.5rem 1.25rem; }
  .case-featured-grid { padding: 1.75rem; gap: 1.75rem; }
  .case-featured-ribbon { padding: 0.7rem 1rem; }
  .ribbon-eyebrow { font-size: 0.62rem; }
  .ribbon-num { font-size: 0.65rem; }

  /* Featured CTAs */
  .case-cta-primary { width: 100%; justify-content: center; padding: 0.95rem 1.4rem; }
  .case-featured-actions { flex-direction: column; align-items: stretch; }
  .case-featured-hint { text-align: center; }

  /* Featured visual always 1:1, but tighten height when photo */
  .case-featured-visual { border-radius: 1.25rem; }

  /* Mesh + Scan visuals — shrink stat callouts more */
  .mesh-stat, .scan-stat {
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
  }
  .scan-stat--mid, .mesh-stat--mid { right: 6%; }
  .mesh-stat--top, .scan-stat--top { top: 5%; left: 5%; }
  .mesh-stat--bot, .scan-stat--bot { bottom: 5%; left: 5%; }

  /* Carousel dots: bigger touch targets */
  .thumb-dot { width: 9px; height: 9px; }
  .thumb-dot.active { width: 26px; }
  .feat-dot { width: 9px; height: 9px; }
  .feat-dot.active { width: 28px; }

  /* Featured photo carousel dots */
  .feat-photo-count { top: 0.65rem; right: 0.65rem; }

  /* Pattern icon */
  .pattern-icon { width: 46px; height: 46px; }

  /* Stack chip */
  .stack-chip { padding: 0.7rem 0.6rem; font-size: 0.78rem; }

  /* Eyebrow tag */
  .case-eyebrow-tag { font-size: 0.62rem; padding: 0.25rem 0.6rem; }
}

/* ============================================================
   Tablet polish (641–1023px)
   ============================================================ */
@media (min-width: 641px) and (max-width: 1023px) {
  .case-section { padding: 5rem 1.5rem; }
  .case-section::before { font-size: clamp(140px, 22vw, 220px); }
  .case-featured-grid { padding: 2.25rem; }
}

/* ============================================================
   Ensure no horizontal overflow on any screen
   ============================================================ */
.case-section, .case-inner, .case-featured, .case-featured-grid,
.case-content, .case-visual, .case-featured-visual {
  min-width: 0;
}
.case-meta { max-width: 100%; }

/* ============================================================
   Featured-page (av/ne/g2) — small-screen content tightening
   Selectors are intentionally generic so they apply across all
   three featured pages without changing page CSS.
   ============================================================ */
@media (max-width: 640px) {
  .av-card, .ne-card, .g2-card { padding: 1.35rem; border-radius: 1.25rem; }
  .av-agent { padding: 1.1rem; border-radius: 1rem; }
  .av-pipe-num, .ne-num, .g2-num { font-size: 2.1rem; }
  .av-stat-card, .ne-stat-card, .g2-stat-card { padding: 1.1rem; border-radius: 1rem; }

  .av-eyebrow, .ne-eyebrow, .g2-eyebrow { font-size: 0.65rem; letter-spacing: 0.14em; }

  /* The big featured-page headlines need to fit at 360px */
  .av-card h3, .ne-card h3, .g2-card h3 { font-size: 1.05rem; line-height: 1.3; }

  /* Chat preview (Aurevia) */
  .chat-preview { padding: 1rem; }
  .chat-bubble { font-size: 0.85rem; padding: 0.7rem 0.95rem; max-width: 92%; }

  /* Image galleries — tighter gutters */
  .g2-gallery { gap: 1rem; }
  .g2-gallery-caption { padding: 0.9rem 1rem; }
  .g2-gallery-caption p { font-size: 0.82rem; }

  /* NanoEcho UI shot captions */
  .ne-shot figcaption { padding: 0.9rem 1rem; }

  /* Hero frames */
  .g2-hero-frame { border-radius: 1.25rem; }

  /* CTA section cards — full width */
  section .rounded-3xl { border-radius: 1.5rem; }
}

/* Very small screens (≤ 380px) — extra-tight padding so 320px iPhones survive */
@media (max-width: 380px) {
  .case-section { padding: 3rem 1rem; }
  .case-section.is-featured { padding: 3rem 1rem; }
  .case-featured-grid { padding: 1.35rem; }
  .case-featured-ribbon { padding: 0.6rem 0.85rem; }
  .ribbon-eyebrow { font-size: 0.58rem; }
  .case-title { font-size: 1.6rem; }
  .mesh-stat b, .scan-stat b { font-size: 0.95rem; }
  .mesh-stat span, .scan-stat span { font-size: 0.55rem; }
  .stack-chip { padding: 0.65rem 0.55rem; font-size: 0.74rem; }
}