/* =========================================================
   Multi-page layer: page banners, explore grid, pager
   ========================================================= */

/* Page banner */
.page-hero { position: relative; overflow: hidden; padding: 150px 0 40px; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero-inner {
  display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center;
  padding: clamp(28px, 4vw, 48px); border-radius: 32px;
  background: var(--glass); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.page-hero-inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--rim, 0deg), transparent 0 60%, var(--c1), var(--c2), var(--c3), var(--c5), var(--c4), transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rim 8s linear infinite;
}
.page-title { font-size: clamp(36px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 16px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-3); margin-bottom: 16px; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs b { color: var(--text); }
.page-hero + section, .page-hero + .marquee-section { padding-top: 40px; }

/* Animated orb on each banner */
.page-orb { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(26,155,215,.45); animation: spin 22s linear infinite; }
.orb-ring.r2 { inset: 34px; border-style: solid; border-color: rgba(142,92,245,.35); animation-duration: 14s; animation-direction: reverse; }
.orb-ring.r3 { inset: 70px; border: 2px dotted rgba(255,159,10,.5); animation-duration: 9s; }
.orb-core { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; border-radius: 24px; transform: translate(-50%, -50%); animation: orbPulse 3.2s ease-in-out infinite; }
.orb-core svg { width: 36px; height: 36px; }
@keyframes orbPulse { 50% { transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); box-shadow: 0 0 40px -6px currentColor; } }
.page-orb i {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 16px var(--c);
  transform: rotate(var(--a)) translateX(130px); animation: orbit 12s linear infinite;
}
@keyframes orbit { from { transform: rotate(var(--a)) translateX(130px); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(130px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Home: explore grid */
.explore-section { padding-top: 40px; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.explore-card { display: flex; flex-direction: column; padding: 28px; position: relative; overflow: hidden; color: inherit; }
.explore-card h3 { font-size: 22px; font-weight: 800; margin: 18px 0 8px; }
.explore-card p { margin: 0 0 20px; color: var(--text-2); }
.explore-card .go { margin-top: auto; font-weight: 700; font-size: 14.5px; color: var(--accent-2); display: inline-flex; gap: 8px; align-items: center; }
.explore-card .go span { transition: transform .3s ease; }
.explore-card:hover .go span { transform: translateX(6px); }
.explore-card::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26,155,215,.18), transparent 70%); transition: transform .5s ease;
}
.explore-card:hover::after { transform: scale(1.6); }

/* Previous / next pager */
.pager { display: flex; justify-content: space-between; gap: 14px; padding: 56px 0 10px; }
.pager-link { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px; min-width: 220px; transition: transform .25s ease; }
.pager-link.next { text-align: right; margin-left: auto; }
.pager-link small { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pager-link b { font-size: 19px; }
.pager-link:hover { transform: translateY(-3px); }

/* Page fade-in on load */
body { animation: pageIn .5s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1080px) {
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero-inner { grid-template-columns: 1fr 200px; }
  .page-orb { width: 190px; height: 190px; }
  .page-orb i { animation-name: orbitSm; transform: rotate(var(--a)) translateX(95px); }
  .orb-ring.r2 { inset: 26px; } .orb-ring.r3 { inset: 52px; }
}
@keyframes orbitSm { from { transform: rotate(var(--a)) translateX(95px); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(95px); } }
@media (max-width: 720px) {
  .page-hero { padding-top: 110px; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 10px; }
  .page-orb { display: none; }
  .explore-grid { grid-template-columns: 1fr; }
  .pager-link { min-width: 0; flex: 1; padding: 14px 16px; }
  .pager-link b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* =========================================================
   Client logos
   ========================================================= */
.marquee { padding: 14px 0; border-radius: 26px; }
.marquee-track { gap: 14px; animation-duration: 60s; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 70s; }
.marquee-track .logo-chip {
  display: grid; place-items: center; width: 132px; height: 84px; flex: none; gap: 0;
  background: #fff; border-radius: 18px; padding: 8px 12px;
  box-shadow: 0 6px 18px -8px rgba(11,16,48,.35), inset 0 0 0 1px rgba(11,16,48,.06);
  transition: transform .3s ease;
}
.marquee-track .logo-chip::after { content: none; }
.marquee-track .logo-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marquee-track .logo-chip.text { font-size: 15px; font-weight: 800; color: #23246E; }
.marquee-track .logo-chip:hover { transform: translateY(-4px) scale(1.06); }

.client-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.client { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; padding: 12px 12px 14px; }
.client-logo {
  display: grid; place-items: center; height: 104px; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(11,16,48,.06);
}
.client-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
.client:hover .client-logo img { transform: scale(1.08); }
.client-logo .mono { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.client b { font-size: 14px; }

/* =========================================================
   Touch devices / small screens: lighter compositing.
   Mobile Chrome drops layers (visible flashing) when large blurred,
   animated, backdrop-filtered and 3D layers stack up — so here we keep
   the look but render it with cheap, static equivalents.
   ========================================================= */
@media (hover: none), (max-width: 1080px) {
  /* static ambient background instead of huge animated blur blobs */
  .ambient { background:
      radial-gradient(60vmax 50vmax at 0% 0%, color-mix(in srgb, var(--blob-a) 75%, transparent), transparent 70%),
      radial-gradient(50vmax 45vmax at 100% 20%, color-mix(in srgb, var(--blob-b) 70%, transparent), transparent 70%),
      radial-gradient(50vmax 40vmax at 30% 100%, color-mix(in srgb, var(--blob-c) 65%, transparent), transparent 70%); }
  .ambient span, .ambient::after { display: none; }

  /* no backdrop blur: use a more opaque glass instead */
  :root { --glass: rgba(255,255,255,.80); --glass-strong: rgba(255,255,255,.90); }
  .glass, .btn-glass, .eyebrow, .badge, .segmented, .cap-hud, .cap-detail, .page-hero-inner, .g-item figcaption, .lightbox {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .cap-hud { background: rgba(16,24,72,.92); }

  /* no 3D / will-change layers, no masked animated rims */
  .cap-stage, .tilt { transform: none !important; transform-style: flat; will-change: auto; }
  .cap-stage::after, .page-hero-inner::after { display: none; }
  .cap-stage::before { animation: none; }
  .hero-stack .widget, .btn-primary, .btn-primary::after { animation: none; }
  .glass.spot::before { display: none; }
  body { animation: none; }
  .cap-beam, .cap-map.focus .cap-label.on { filter: none; }
}
@media (hover: none) and (prefers-color-scheme: dark), (max-width: 1080px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass: rgba(24,30,66,.86); --glass-strong: rgba(30,36,78,.92); }
}
@media (hover: none), (max-width: 1080px) {
  :root[data-theme="dark"] { --glass: rgba(24,30,66,.86); --glass-strong: rgba(30,36,78,.92); }
}

/* number inside a stat must not inherit the label style */
.stat b span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }