/* Hero dancers + ideas page */

.cb-dancers {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.cb-dancer {
  position: absolute;
  transform: translate3d(0,0,0);
  will-change: transform;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  opacity: .85;
}
.cb-dancer svg { display: block; }

.cb-dancers__beam {
  position: absolute;
  top: -40%;
  width: 220px; height: 200%;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(251,77,10,.18), rgba(251,77,10,0) 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: beam-sway 6s ease-in-out infinite alternate;
}
.cb-dancers__beam--1 { left: 18%; transform: rotate(-12deg); animation-delay: 0s; }
.cb-dancers__beam--2 { left: 48%; background: linear-gradient(180deg, rgba(216,255,61,.16), rgba(216,255,61,0) 70%); animation-delay: -2s; }
.cb-dancers__beam--3 { left: 78%; transform: rotate(10deg); background: linear-gradient(180deg, rgba(255,106,26,.16), rgba(255,106,26,0) 70%); animation-delay: -4s; }
@keyframes beam-sway { from { transform: rotate(-15deg); } to { transform: rotate(15deg); } }

.cb-dancers__conf {
  position: absolute;
  top: -20px;
  width: 8px; height: 12px;
  border-radius: 1px;
  animation: cb-conf-fall linear infinite;
  opacity: .9;
}
@keyframes cb-conf-fall {
  0%   { transform: translate3d(0,-20vh,0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(40px,90vh,0) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-dancers__conf, .cb-dancers__beam { animation: none; }
  .cb-dancer { transition: none; }
}

/* Bring the hero copy above the dancers */
.cb-hero__inner { position: relative; z-index: 2; }

/* ============================================================
   IDEEËN page — use cases
   ============================================================ */

.cb-ideas {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  max-width: var(--container); margin: 0 auto;
}
.cb-idea {
  position: relative; overflow: hidden;
  border-radius: 12px;
  display: flex; flex-direction: column;
  min-height: 320px;
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .35s;
  border: 1px solid var(--cb-warm-line);
}
.cb-idea:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.cb-idea__bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-position: center; background-size: cover;
}
.cb-idea__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,15,.15) 30%, rgba(11,11,15,.85) 100%);
}
.cb-idea__inner {
  position: relative; z-index: 1;
  padding: 24px;
  margin-top: auto;
  color: white;
  display: flex; flex-direction: column; gap: 6px;
}
.cb-idea__tag {
  display: inline-flex; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cb-idea h3 {
  font-family: var(--font-display); font-size: 36px; line-height: .95;
  text-transform: uppercase; letter-spacing: 0; margin: 0; color: white;
}
.cb-idea p { color: rgba(255,255,255,.85); margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.cb-idea__meta {
  display: flex; gap: 16px; padding-top: 12px; margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.18); font-size: 12px;
  color: rgba(255,255,255,.7);
}
.cb-idea__meta strong { color: white; font-family: var(--font-display); font-size: 18px; letter-spacing: 0; line-height: 1; display: block; }
.cb-idea__sticker {
  position: absolute; z-index: 2;
  top: 18px; right: 18px;
  font-family: var(--font-display);
  background: var(--cb-acid); color: var(--cb-onyx);
  padding: 8px 12px; border-radius: 999px;
  text-transform: uppercase; font-size: 12px; letter-spacing: .08em;
  transform: rotate(6deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.cb-idea__sticker.is-magenta { background: var(--cb-magenta); color: white; }
.cb-idea__sticker.is-strap   { background: var(--cb-strap); color: white; }

/* Bento grid sizing */
.cb-idea--xl { grid-column: span 7; min-height: 480px; }
.cb-idea--xl h3 { font-size: 64px; }
.cb-idea--lg { grid-column: span 5; min-height: 480px; }
.cb-idea--md { grid-column: span 4; min-height: 340px; }
.cb-idea--sm { grid-column: span 4; min-height: 260px; }
.cb-idea--md h3 { font-size: 32px; }
.cb-idea--sm h3 { font-size: 28px; }

/* Ideas hero */
.cb-ideas-hero {
  background: var(--cb-onyx); color: var(--cb-bone);
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 64px) clamp(48px, 6vw, 80px);
  position: relative; overflow: hidden;
}
.cb-ideas-hero__inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 2; }
.cb-ideas-hero h1 {
  font-family: var(--font-display); margin: 0;
  font-size: clamp(72px, 11vw, 180px); line-height: .9; letter-spacing: -.02em;
  text-transform: uppercase;
}
.cb-ideas-hero h1 span { display: block; }
.cb-ideas-hero h1 .stroke {
  -webkit-text-stroke: 2px var(--cb-bone);
  color: transparent;
}
.cb-ideas-hero p { color: #B8B3A8; max-width: 620px; margin: 24px 0 0; font-size: 18px; line-height: 1.5; }

/* Floating emoji-style party stickers in ideas hero bg */
.cb-ideas-hero__stickers {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.cb-ideas-hero__stickers > span {
  position: absolute;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: .15;
  animation: float-spin 14s ease-in-out infinite alternate;
}
@keyframes float-spin {
  from { transform: translateY(-12px) rotate(var(--r, 0deg)); }
  to   { transform: translateY(12px)  rotate(calc(var(--r, 0deg) + 6deg)); }
}

/* Audience filter pills */
.cb-ideas-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: var(--container); margin: 48px auto 32px;
  padding: 0 clamp(20px, 4vw, 64px);
}
.cb-ideas-filter button {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--cb-warm-line); background: white;
  font-weight: 600; font-size: 13px; cursor: pointer;
  font-family: var(--font-body); color: var(--fg-1);
  transition: all .15s;
}
.cb-ideas-filter button.is-active {
  background: var(--cb-magenta); color: white; border-color: var(--cb-magenta);
}
.cb-ideas-filter button:hover:not(.is-active) { background: var(--cb-paper); }

/* Quote band on ideas page */
.cb-ideas-quote {
  background: var(--cb-magenta); color: white;
  padding: 64px clamp(20px, 4vw, 96px);
  text-align: center;
}
.cb-ideas-quote h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 96px); line-height: .95;
  text-transform: uppercase; margin: 0; letter-spacing: -.01em;
  max-width: 18ch; margin-left: auto; margin-right: auto;
}
.cb-ideas-quote h2 span { color: var(--cb-acid); }
.cb-ideas-quote p { color: rgba(255,255,255,.85); margin: 24px auto 0; max-width: 540px; }

@media (max-width: 980px) {
  .cb-ideas { grid-template-columns: 1fr; }
  .cb-idea--xl, .cb-idea--lg, .cb-idea--md, .cb-idea--sm { grid-column: span 1; min-height: 280px; }
  .cb-idea--xl h3 { font-size: 44px; }
  .cb-ideas-hero h1 { font-size: 64px; }
}