/* Hero "crown" decoration — swap the Webflow Set 1 crown image for a pastel iPhone SVG.
   Sized down + blurred + faded so it reads as "far away" (atmospheric perspective).
   Higher specificity (with body) + !important to win over the shared.css rule. */
body .home--hero .crown.is_2025 {
  background-image: url(/generated/iphone-crown.svg) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* Make it look distant: shrink ~45%, soften, fade, desaturate a touch. */
  width: 4.5rem !important;
  max-width: 4.5rem !important;
  height: 4.5rem !important;
  filter: blur(1.6px) saturate(0.85) brightness(1.05) !important;
  opacity: 0.7 !important;
  /* Re-anchor so the smaller phone still sits near the headline corner. */
  margin-top: -4.4rem !important;
  margin-left: 13.5rem !important;
  transform: rotate(-6deg);
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}
@media (max-width: 991px) {
  body .home--hero .crown.is_2025 {
    width: 3.4rem !important;
    max-width: 3.4rem !important;
    height: 3.4rem !important;
    margin-top: -3.3rem !important;
    margin-left: 9rem !important;
    filter: blur(1.2px) saturate(0.85) !important;
  }
}

/* Smooth anchor / programmatic scrolling. */
html { scroll-behavior: smooth; }

/* Scroll-performance: isolate layout and style within each section so that
   GSAP animations and marquee movement don't trigger full-page repaints. */
.home--4section.is_2025,
.home--5section.is_2025,
.home--section7.color-gr.is_2025 {
  contain: layout style;
}

/* GSAP reveal helpers — neutralized so right-column text always stays visible. */
.bono-reveal { opacity: 1; transform: none; }
.bono-fade   { opacity: 1; }
.bono-parallax { will-change: transform; }

/* Hard guarantee: every section's right-column text panel is always displayed. */
.home--3section .home--text-wr,
.home--4section .home--text-wr,
.home--5section .home--text-wr,
.home--6section .home--text-wr,
.home--section7 .home--text-wr {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ============================================================
   Section 2 stage — Vinted bot
   AI-generated PC Discord screenshot + animated deal cards.
   ============================================================ */

/* Card-level background ONLY behind the chat + text — not the whole section.
   Section keeps its original Webflow Texture 2 sparkle pattern around the edges. */
.home--2section.is_2025 .home--block-group.block-1._2025 {
  position: relative;
  background-image: url(/generated/section-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 28px;
  padding: 2.5rem 2rem;
  box-shadow: 0 30px 80px rgba(88, 101, 242, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
/* Slight white veil so French text on the right stays legible against the galaxy. */
.home--2section.is_2025 .home--block-group.block-1._2025::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
.home--2section.is_2025 .home--2col_layout.is_2025 {
  position: relative;
  z-index: 1;
}

/* Left column reserves space so the bg image's chest+phones are visible there. */
.home--2section .home--image-wr.video.is_2025 {
  position: relative;
  aspect-ratio: 944 / 720;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  background: transparent;
}

/* Right column text legibility — force dark color since the card bg is light. */
.home--2section.is_2025 .home--text-wr.is_2025 .heading--h2.is_2025,
.home--2section.is_2025 .home--text-wr.is_2025 .body-text--xl.is_2025-n {
  color: #1f1d3a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* ============================================================
   Section 3 — Discord stream layout (original) with Dreamina
   robot scene composited inside the "big screen" rectangle.
   The original Discord chat UI provides the polished frame; our
   video plays inside the top streamed-content rectangle.
   ============================================================ */

/* Hide Webflow static fallback imgs that would compete with the video */
.home--3section.is_2025 img.section3-image,
.home--3section.is_2025 img.radius-60 {
  display: none !important;
}

/* Establish a positioning context so the overlay can sit precisely
   over the "big screen" rectangle of the Discord chat layout. */
.home--3section.is_2025 .home--group-chat-img-wr {
  position: relative;
}

/* The Dreamina overlay — top/left/width/height, border-radius, and
   chrome elements (LIVE badge + username chip) are all computed at
   runtime by enhancements.js so the rectangle and decorations match
   the underlying Discord screen at every viewport.

   object-fit: contain → the Dreamina scene is shown in full (no crop),
   with dark Discord-style bars filling any aspect mismatch.

   box-shadow inset 1px hairline → Discord's signature inner ring that
   defines the screen edge without darkening it. */
.home--3section.is_2025 #bono-robot-overlay,
.home--3section.is_2025 .bono-screen-overlay {
  position: absolute;
  object-fit: contain;
  object-position: center center;
  z-index: 2;
  pointer-events: none;
  /* Poster image as CSS background — shows instantly while the .mp4 streams in.
     Once the video plays, it draws over this background. */
  background: #14171c url(/generated/section3-robot-deals-poster.jpg) center/contain no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---- Overlay elements stay invisible until JS positions them ----
   Without this, the mask/tiles/badges briefly render at (0,0) before
   enhancements.js (defer) computes their correct positions, causing
   a visible "snap" on every page load. Smooth fade-in once positioned. */
.home--group-chat-img-wr .bono-deals-mask,
.home--group-chat-img-wr .bono-tile,
.home--group-chat-img-wr .bono-live-badge,
.home--group-chat-img-wr .bono-user-chip {
  opacity: 0;
  transition: opacity 0.45s ease 0.05s;
}
.home--group-chat-img-wr.bono-positioned .bono-deals-mask,
.home--group-chat-img-wr.bono-positioned .bono-tile,
.home--group-chat-img-wr.bono-positioned .bono-live-badge,
.home--group-chat-img-wr.bono-positioned .bono-user-chip {
  opacity: 1;
}

/* ===== Holographic deals card ==========================================
   Covers the AI-generated panel inside the Dreamina overlay with a clean
   HTML/CSS card. The card is matrix3d-warped at runtime to match the
   panel's 4 corners (including the perspective tilt as it animates).
   Intrinsic size: 280×220 (the matrix scales/skews to fit destination). */
.bono-deals-card {
  position: absolute;
  /* left/top/width/height/font-size set by JS to follow the AR panel area */
  background:
    linear-gradient(180deg,
      rgba(2, 18, 36, 0.94) 0%,
      rgba(4, 38, 70, 0.92) 50%,
      rgba(2, 24, 48, 0.95) 100%);
  border: 0.13em solid rgba(64, 220, 255, 0.85);
  border-radius: 0.7em;
  box-shadow:
    0 0 2.3em rgba(64, 220, 255, 0.55),
    0 0 6.5em rgba(64, 220, 255, 0.18),
    inset 0 0 1.5em rgba(64, 220, 255, 0.18),
    inset 0 0 0 0.09em rgba(120, 230, 255, 0.25);
  color: #5fe9ff;
  font-family: 'gg sans', 'JetBrains Mono', 'Roboto Mono', monospace;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  padding: 0.85em 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  isolation: isolate;
  text-shadow: 0 0 0.5em rgba(80, 220, 255, 0.55);
}

/* Animated scan lines moving down the card */
.bono-deals-card::before {
  content: '';
  position: absolute;
  inset: -50% -10% -50% -10%;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 2px,
      rgba(80, 230, 255, 0.06) 2px,
      rgba(80, 230, 255, 0.06) 3px
    );
  animation: bono-deals-scan 3.5s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes bono-deals-scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(33.33%); }
}

/* Diagonal sheen sweeping across — sci-fi shimmer */
.bono-deals-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(120, 235, 255, 0.12) 50%,
    transparent 65%);
  background-size: 250% 100%;
  animation: bono-deals-sheen 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes bono-deals-sheen {
  0%, 100% { background-position: 100% 0; opacity: 0.35; }
  50%      { background-position: -50% 0; opacity: 0.9; }
}

.bono-deals-card > * { position: relative; z-index: 1; }

.bono-deals-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95em;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(80, 220, 255, 0.35);
  padding-bottom: 0.4em;
}
.bono-deals-card__title { color: #b8f4ff; }
.bono-deals-card__live {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: #ff5e5e;
  text-shadow: 0 0 0.7em rgba(255, 94, 94, 0.7);
  font-size: 0.85em;
}
.bono-deals-card__live::before {
  content: ''; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: #ff5e5e;
  box-shadow: 0 0 0.5em rgba(255, 94, 94, 0.9);
  animation: bono-deals-blink 1.2s ease-in-out infinite;
}
@keyframes bono-deals-blink {
  0%, 100% { opacity: 1; }  50% { opacity: 0.3; }
}

.bono-deals-card__rows {
  display: flex; flex-direction: column; gap: 0.4em;
  flex: 1;
}
.bono-deals-card__row {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: 0.65em;
  padding: 0.35em 0.5em;
  background: rgba(64, 220, 255, 0.04);
  border: 1px solid rgba(64, 220, 255, 0.18);
  border-radius: 0.3em;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.bono-deals-card__row.is-pulse {
  background: rgba(64, 255, 200, 0.14);
  border-color: rgba(120, 255, 220, 0.55);
}
.bono-deals-card__phone-thumb {
  width: 2em; height: 2.4em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 0.3em rgba(80, 220, 255, 0.55)) brightness(1.1);
}
.bono-deals-card__phone-thumb--iphone13 { background-image: url(/generated/iphone13.png); }
.bono-deals-card__phone-thumb--galaxys22 { background-image: url(/generated/galaxy-s22.png); }
.bono-deals-card__phone-thumb--pixel7    { background-image: url(/generated/pixel-7.png); }

.bono-deals-card__name {
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d0f7ff;
  line-height: 1.15;
}
.bono-deals-card__sub {
  font-size: 0.75em;
  color: rgba(176, 232, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.bono-deals-card__price-block {
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.05em;
}
.bono-deals-card__price {
  font-size: 1.05em; font-weight: 800; color: #fff;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.bono-deals-card__price-old {
  font-size: 0.7em; color: rgba(255, 255, 255, 0.42);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.bono-deals-card__discount {
  position: absolute;
  top: -0.4em; right: -0.25em;
  background: linear-gradient(135deg, #1abc7c, #0aff95);
  color: #02321f;
  font-size: 0.78em; font-weight: 900;
  letter-spacing: 0.04em;
  padding: 0.15em 0.45em;
  border-radius: 0.25em;
  box-shadow: 0 0 0.6em rgba(10, 255, 149, 0.65);
}

.bono-deals-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(176, 232, 255, 0.75);
  border-top: 1px solid rgba(80, 220, 255, 0.25);
  padding-top: 0.3em;
}
.bono-deals-card__footer-dot {
  display: inline-flex; align-items: center; gap: 0.35em;
}
.bono-deals-card__footer-dot::before {
  content: ''; width: 0.45em; height: 0.45em; border-radius: 50%;
  background: #5fe9ff;
  box-shadow: 0 0 0.5em rgba(95, 233, 255, 0.85);
  animation: bono-deals-blink 1.6s ease-in-out infinite;
}

/* ============================================================
   Radar scanner — abstract circular sweep over the AR panel,
   hiding bad text underneath. Pure visual, no copy.
   ============================================================ */
.bono-deals-mask {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
}

.bono-radar {
  position: relative;
  height: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(94, 229, 214, 0.45);
  background: radial-gradient(circle at center,
    rgba(8, 12, 28, 0.78) 0%,
    rgba(8, 12, 28, 0.62) 70%,
    rgba(8, 12, 28, 0.42) 100%);
  box-shadow:
    0 0 1.6em rgba(94, 229, 214, 0.35) inset,
    0 0 1.6em rgba(94, 229, 214, 0.30);
  overflow: hidden;
}

/* Two concentric rings */
.bono-radar-rings::before,
.bono-radar-rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(94, 229, 214, 0.22);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bono-radar-rings::before { width: 66%; height: 66%; }
.bono-radar-rings::after  { width: 33%; height: 33%; }

/* Crosshair (horizontal + vertical hairlines) */
.bono-radar-crosshair {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  transparent calc(50% - 0.5px), rgba(94, 229, 214, 0.22) calc(50% - 0.5px), rgba(94, 229, 214, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(94, 229, 214, 0.22) calc(50% - 0.5px), rgba(94, 229, 214, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
}

/* Rotating sweep beam — conic-gradient that fades from clear to bright teal */
.bono-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(94, 229, 214, 0)    0deg,
    rgba(94, 229, 214, 0)    270deg,
    rgba(94, 229, 214, 0.10) 310deg,
    rgba(94, 229, 214, 0.55) 350deg,
    rgba(94, 229, 214, 0.85) 360deg);
  animation: bono-radar-rotate 3.6s linear infinite;
  transform-origin: center;
}

@keyframes bono-radar-rotate {
  to { transform: rotate(360deg); }
}

/* Pulsing blips — small dots that fade in/out at fixed positions */
.bono-radar-blip {
  position: absolute;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #5ee5d6;
  box-shadow:
    0 0 0.4em rgba(94, 229, 214, 0.95),
    0 0 0.9em rgba(94, 229, 214, 0.55);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: bono-radar-blip 4.5s ease-in-out infinite;
}

@keyframes bono-radar-blip {
  0%, 100%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  10%, 35%   { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  70%        { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .bono-radar-sweep { animation: none; }
  .bono-radar-blip  { animation: none; opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
}

/* ---- Discord-style chrome floating ON TOP of the overlay ----
   Sized + positioned by the same JS that places the overlay.
   The CSS-driven size variables are set via inline styles per element. */

/* LIVE badge — top-right of the big screen */
.bono-live-badge {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: #ED4245;
  color: #fff;
  font: 700 1em/1 'gg sans', 'Whitney', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45em 0.7em 0.45em 0.6em;
  border-radius: 0.5em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.bono-live-badge::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #fff;
  animation: bono-live-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bono-live-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* ============================================================
   Bot Squad tiles (3 sidekicks below the big screen)
   Replace the original Discord participant tiles with our own
   Scanner / Analyste / Alerteur sub-bot tiles.
   ============================================================ */
.bono-tile {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.35);
  font-family: 'gg sans', 'Whitney', system-ui, -apple-system, sans-serif;
  color: #fff;
  isolation: isolate;
  display: flex;
  align-items: stretch;
}

/* Per-role color identity (Discord-like vivid gradients) */
.bono-tile--scanner  { background: linear-gradient(135deg, #1c3a8f 0%, #3a6fdb 55%, #5fb6ff 100%); }
.bono-tile--analyste { background: linear-gradient(135deg, #3a1b6e 0%, #6b3fd1 55%, #c586ff 100%); }
.bono-tile--alerteur { background: linear-gradient(135deg, #7a1d2a 0%, #d83b46 55%, #ff9468 100%); }

/* Subtle starfield/grain in each tile so they don't look flat */
.bono-tile::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 78% 64%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 92% 22%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 36% 82%, rgba(255,255,255,0.4), transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Avatar area — square panel on the left */
.bono-tile__avatar {
  position: relative;
  flex: 0 0 38%;
  background: rgba(0, 0, 0, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2em;
  z-index: 1;
}
.bono-tile__avatar img {
  width: 115%;
  height: 115%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  margin: -7%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  /* Gentle bob + slight rotation — the robot feels alive, no other changes. */
  animation: bono-robot-bob 3.2s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}
/* Each tile's robot has a slightly different rhythm so they aren't in sync */
.bono-tile--analyste .bono-tile__avatar img {
  animation-duration: 3.6s;
  animation-delay: 0.45s;
}
.bono-tile--alerteur .bono-tile__avatar img {
  animation-duration: 2.9s;
  animation-delay: 1.15s;
}
@keyframes bono-robot-bob {
  0%, 100% { transform: translateY(0)     rotate(-1.4deg); }
  50%      { transform: translateY(-4px)  rotate(1.4deg);  }
}
@media (prefers-reduced-motion: reduce) {
  .bono-tile__avatar img { animation: none; }
}
/* Emoji fallback (shown until the AI avatar PNG loads) */
.bono-tile__avatar-fallback {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}

/* Content column — name + status + indicator */
.bono-tile__content {
  position: relative;
  flex: 1;
  padding: 0.55em 0.75em;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.18em;
  z-index: 1;
}
.bono-tile__name {
  font-weight: 800;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.bono-tile__status {
  font-size: 0.7em;
  opacity: 0.92;
  display: inline-flex; align-items: center; gap: 0.35em;
  line-height: 1.1;
}
.bono-tile__status::before {
  content: '';
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: #3ba55d;
  box-shadow: 0 0 6px rgba(59,165,93,0.85);
  flex-shrink: 0;
  animation: bono-status-pulse 1.6s ease-in-out infinite;
}
.bono-tile__metric {
  font-weight: 700;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.05em;
  letter-spacing: 0.02em;
}
.bono-tile__metric-label {
  font-weight: 500;
  opacity: 0.7;
  font-size: 0.7em;
  margin-left: 0.25em;
  text-transform: lowercase;
  letter-spacing: 0;
}

@keyframes bono-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Tiny sparkline drawn by JS (a row of bars) for the Analyste tile */
.bono-tile__spark {
  display: inline-flex; align-items: flex-end; gap: 1px;
  height: 0.85em;
  margin-left: 0.3em;
}
.bono-tile__spark span {
  display: inline-block;
  width: 2px;
  background: #fff;
  opacity: 0.85;
  border-radius: 1px;
  transition: height 0.5s ease;
}

/* Username chip — bottom-left of the big screen */
.bono-user-chip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: rgba(15, 17, 23, 0.78);
  color: #fff;
  font: 600 1em/1 'gg sans', 'Whitney', system-ui, -apple-system, sans-serif;
  padding: 0.5em 0.85em 0.5em 0.55em;
  border-radius: 0.55em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.bono-user-chip__avatar {
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865F2, #C586FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  flex-shrink: 0;
}

/* ============================================================
   Section 4 "Hop-In" — French Discord mockup (replaces the EN mp4).
   Sidebar + animated chat bubbles → transition to 2x2 voice grid.
   ============================================================ */
.bono-hopin-mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 944 / 720;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  font-family: 'gg sans', 'Whitney', 'Poppins', system-ui, -apple-system, sans-serif;
  user-select: none;
  color: #f2f3f5;
}

/* --- Sidebar --- */
.bono-hopin-sidebar {
  position: absolute;
  left: 4%; top: 6%; bottom: 6%;
  width: 30%;
  background: #1e1f22;
  border-radius: 14px;
  padding: 1.1rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.92rem;
  color: #949ba4;
  z-index: 2;
}
.bono-hopin-server {
  color: #f2f3f5;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.2rem 0.4rem 0.7rem;
  border-bottom: 1px solid #2b2d31;
  margin-bottom: 0.4rem;
  display: flex; justify-content: space-between; align-items: center;
}
.bono-hopin-chev { font-size: 0.85rem; opacity: 0.7; }
.bono-hopin-section {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; padding: 0.55rem 0.4rem 0.25rem;
}
.bono-hopin-channel {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.32rem 0.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: #949ba4;
  transition: background-color 0.2s, color 0.2s;
}
.bono-hopin-channel .bono-hopin-hash,
.bono-hopin-channel .bono-hopin-spk { opacity: 0.7; }
.bono-hopin-channel.is-active { background: #404249; color: #f2f3f5; }
.bono-hopin-channel.is-voice-active { background: #404249; color: #23a55a; }
.bono-hopin-channel.is-voice-active .bono-hopin-spk { color: #23a55a; opacity: 1; }
.bono-hopin-member {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.22rem 0.5rem 0.22rem 1.6rem;
  font-size: 0.82rem; color: #b5bac1;
}
.bono-hopin-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.bono-hopin-avatar--lucas { background: #5865f2; }
.bono-hopin-avatar--sarah { background: #eb459e; }
.bono-hopin-avatar--yanis { background: #fbb43b; }
.bono-hopin-avatar--me    { background: #3ba55d; }

/* --- Cursor (animated by GSAP) --- */
.bono-hopin-cursor {
  position: absolute;
  width: 24px; height: 30px;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 28'><path d='M2 2 L20 14 L11 14 L17 26 L13 28 L7 16 L2 20 Z' fill='white' stroke='black' stroke-width='1.4' stroke-linejoin='round'/></svg>");
  left: 33%; top: 22%;
  opacity: 0;
}

/* --- Right panel (chat + voice share same anchor) --- */
.bono-hopin-panel {
  position: absolute;
  left: 40%; right: 4%; top: 8%; bottom: 5%;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.bono-hopin-channel-pill,
.bono-hopin-voice-pill {
  background: #5865f2;
  color: #fff;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.35rem;
  width: fit-content;
  font-size: 0.78rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
  opacity: 0; transform: translateY(8px);
}
.bono-hopin-bubbles {
  display: flex; flex-direction: column; gap: 0.55rem;
  align-items: flex-start;
}
.bono-hopin-bubble {
  background: #1e1f22;
  color: #f2f3f5;
  padding: 0.55rem 0.95rem;
  border-radius: 14px;
  font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  max-width: 100%;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  opacity: 0; transform: translateY(12px);
}
.bono-hopin-bot-badge { font-size: 1rem; flex-shrink: 0; }
.bono-hopin-bubble-text { font-weight: 500; line-height: 1.25; }
.bono-hopin-bubble .bono-hopin-avatar { width: 16px; height: 16px; }

/* Voice grid (overlays chat after transition) */
.bono-hopin-voice { opacity: 0; visibility: hidden; }
.bono-hopin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.2rem;
}
.bono-hopin-tile {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  opacity: 0; transform: scale(0.92);
}
.bono-hopin-tile--webcam {
  background: radial-gradient(ellipse at 60% 40%, #f3c19a 0%, #c9a07a 35%, #5b3a25 100%);
}
.bono-hopin-tile--webcam::before {
  content: '';
  position: absolute; left: 38%; top: 18%;
  width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(40,20,10,0.45);
  box-shadow: 0 14px 0 -2px rgba(40,20,10,0.45);
}
.bono-hopin-tile--sarah { background: #c8a3ff; }
.bono-hopin-tile--yanis { background: #ffaecb; }
.bono-hopin-tile--me    { background: #3ba55d; }
.bono-hopin-tile-circle {
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,0.7);
}
.bono-hopin-tile--me .bono-hopin-tile-circle { background: rgba(255,255,255,0.85); }
.bono-hopin-tile-name {
  position: absolute; left: 7px; bottom: 7px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.7rem; font-weight: 500;
  padding: 2px 7px; border-radius: 4px;
}

/* ============================================================
   Inter-section marquee — phone names + green discount badge
   ============================================================ */
.bono-marquee-deal {
  background: #23A55A;
  color: #fff;
  font-size: 0.5em;
  font-weight: 800;
  padding: 0.18em 0.55em;
  margin-left: 0.45em;
  border-radius: 0.35em;
  vertical-align: 0.22em;
  letter-spacing: 0.03em;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(35, 165, 90, 0.35);
  text-transform: none;
}

/* ============================================================
   Section 5 — Bot parameters carousel.
   AI background image + 4 HTML cards cycling with smooth crossfade.
   ============================================================ */

/* Kill the Webflow card wrapper around section-5 so the design + text
   float directly on the page's natural background (no boxed look). */
.home--5section.is_2025,
.home--5section.is_2025 .home--block-group,
.home--5section.is_2025 .home--block-group.is-reverse,
.home--5section.is_2025 .home--block-group._2025,
.home--5section.is_2025 .home--block-group.is-reverse._2025 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Eyes Lottie — peek out from the top-edge of the params stage (visual left).
   Original Webflow positioning anchored it to the now-invisible card,
   so we re-anchor it absolutely above the design column. */
.home--5section.is_2025 .fun2-top-eyes.is_2025 {
  position: absolute !important;
  top: -1.5rem !important;
  left: 14% !important;
  right: auto !important;
  bottom: auto !important;
  width: 9rem !important;
  height: 5rem !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 5 !important;
  pointer-events: none;
}
.home--5section.is_2025 ._3d-animation {
  position: relative;  /* anchor for the absolute eyes */
}
@media (max-width: 991px) {
  .home--5section.is_2025 .fun2-top-eyes.is_2025 {
    top: -0.8rem !important;
    left: 8% !important;
    width: 6rem !important;
    height: 3.4rem !important;
  }
}

.bono-params-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 944 / 720;
  border-radius: 22px;
  overflow: hidden;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #f3edff 0%, #ffeaf3 100%);  /* fallback while AI bg loads */
}
.bono-params-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Card frame — same anchor for all 4, cards crossfade in place */
.bono-params-card {
  position: absolute;
  /* Centered horizontally + vertically inside the params stage */
  left: 25%;
  top: 22%;
  width: 50%;
  min-height: 56%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 1.2rem 1.4rem 1.4rem;
  color: #1f1d3a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
  box-shadow: none;
  z-index: 2;
  opacity: 0;
  transform: scale(0.95) translateY(8px);
  will-change: opacity, transform;
}

/* Card header (icon + title) */
/* Elegant card header: circular icon badge + uppercase tracked title +
   tiny gradient accent bar under the title + "01 / 04" step counter on the right. */
.bono-params-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}
.bono-params-icon {
  /* Frosted circular badge containing the emoji */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem;
  flex-shrink: 0;
  font-size: 1.05rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid rgba(88, 101, 242, 0.22);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(31, 29, 58, 0.12),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  filter: none;
  text-shadow: none;
}
.bono-params-title {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1f1d3a;
  position: relative;
  padding-bottom: 0.55rem;
  flex: 1;
}
/* Tiny gradient bar under JUST the title text — luxe accent */
.bono-params-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 2.4rem; height: 2px;
  background: linear-gradient(90deg, #5865F2 0%, #C586FF 100%);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(88, 101, 242, 0.4);
}
/* Step counter on the right — small caps, blurple, framed pill */
.bono-params-head::after {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: rgba(88, 101, 242, 0.85);
  background: rgba(88, 101, 242, 0.08);
  padding: 0.35em 0.7em;
  border-radius: 999px;
  border: 1px solid rgba(88, 101, 242, 0.22);
  flex-shrink: 0;
  text-shadow: none;
  align-self: flex-start;
  margin-top: 0.15rem;
}
.bono-params-card[data-bono-param="1"] .bono-params-head::after { content: '01 / 04'; }
.bono-params-card[data-bono-param="2"] .bono-params-head::after { content: '02 / 04'; }
.bono-params-card[data-bono-param="3"] .bono-params-head::after { content: '03 / 04'; }
.bono-params-card[data-bono-param="4"] .bono-params-head::after { content: '04 / 04'; }

@media (max-width: 991px) {
  .bono-params-icon { width: 1.7rem; height: 1.7rem; font-size: 0.85rem; }
  .bono-params-title { font-size: 0.74rem; letter-spacing: 0.14em; }
  .bono-params-head::after { font-size: 0.48rem; padding: 0.28em 0.55em; }
}

/* Card 1 — phone picker */
.bono-params-phones {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.bono-params-phone {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 29, 58, 0.15);
  color: #4a4869;
  padding: 0.45rem 0.85rem 0.45rem 0.55rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  text-align: left;
  cursor: default;
  text-shadow: none;
  backdrop-filter: blur(4px);
  transition: background-color .3s, color .3s, transform .3s;
}
.bono-params-phone-thumb {
  flex: 0 0 22px;
  width: 22px;
  height: 30px;
  display: grid; place-items: center;
}
.bono-params-phone-thumb svg { width: 100%; height: 100%; display: block; }
.bono-params-phone-name { flex: 1; }
.bono-params-phone.is-selected {
  background: linear-gradient(135deg, #5865f2 0%, #7b82f8 100%);
  border-color: #5865f2;
  color: #fff;
  box-shadow: 0 6px 16px rgba(88, 101, 242, 0.35);
}
.bono-params-phone .bono-params-check {
  margin-left: auto;
}
.bono-params-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #23A55A;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  box-shadow: 0 2px 6px rgba(35, 165, 90, 0.45);
}

/* Card 2 — budget slider */
.bono-params-slider {
  position: relative;
  height: 8px;
  margin: 1.8rem 0 0.8rem;
}
.bono-params-track {
  position: absolute; inset: 0;
  background: rgba(31, 29, 58, 0.18);
  border-radius: 4px;
}
.bono-params-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 60%;
  background: linear-gradient(90deg, #5865f2, #C586FF);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.35);
}
.bono-params-handle {
  position: absolute; left: 60%; top: 50%;
  width: 22px; height: 22px;
  margin-left: -11px; margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(88, 101, 242, 0.6), 0 0 0 4px rgba(88, 101, 242, 0.25);
}
/* Slider handle gently pulses — a subtle ring expanding every 2.4s */
.bono-params-handle::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(88, 101, 242, 0.5);
  opacity: 0;
  animation: bonoParamsHandlePulse 2.4s ease-out infinite;
}
@keyframes bonoParamsHandlePulse {
  0%   { transform: scale(0.6); opacity: 0.55; border-width: 2px; }
  70%  { transform: scale(1.6); opacity: 0;    border-width: 0.5px; }
  100% { transform: scale(1.6); opacity: 0;    border-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bono-params-handle::after { animation: none; }
}
.bono-params-slider-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: #4a4869;
  margin-top: 0.6rem;
}
.bono-params-slider-value {
  background: #5865f2;
  color: #fff;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.45);
  text-shadow: none;
}

/* Card 3 — condition chips */
.bono-params-chips {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.bono-params-chip {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 29, 58, 0.15);
  color: #4a4869;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  text-shadow: none;
  backdrop-filter: blur(4px);
  font-weight: 500;
}
.bono-params-chip.is-selected {
  background: linear-gradient(135deg, #23A55A 0%, #2EBF6A 100%);
  border-color: #23A55A;
  color: #fff;
  box-shadow: 0 4px 12px rgba(35, 165, 90, 0.45);
  animation: bonoParamsChipBreathe 3.2s ease-in-out infinite;
}
/* Selected chips gently "breathe" — feels alive without being distracting */
.bono-params-chip.is-selected:nth-of-type(2) { animation-delay: -0.6s; }
.bono-params-chip.is-selected:nth-of-type(3) { animation-delay: -1.2s; }
@keyframes bonoParamsChipBreathe {
  0%, 100% { transform: scale(1);     box-shadow: 0 4px 12px rgba(35, 165, 90, 0.45); }
  50%      { transform: scale(1.035); box-shadow: 0 6px 18px rgba(35, 165, 90, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .bono-params-chip.is-selected { animation: none; }
}

/* Card 4 — frequency stepper */
.bono-params-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem;
  margin: 1.2rem 0 0.5rem;
}
.bono-params-stepper-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 29, 58, 0.15);
  color: #1f1d3a;
  font-size: 1.3rem;
  font-family: inherit;
  font-weight: 600;
  cursor: default;
  text-shadow: none;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(31, 29, 58, 0.1);
}
.bono-params-stepper-value {
  font-size: 2.6rem;
  font-weight: 800;
  color: #1f1d3a;
  letter-spacing: -0.02em;
  min-width: 60px;
  text-align: center;
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
}
.bono-params-hint {
  text-align: center;
  font-size: 0.78rem;
  color: #4a4869;
  margin: 0.4rem 0 0;
  font-style: italic;
}
/* Live counter — sits under the alerts/day stepper. Number ticks up over time. */
.bono-params-counter {
  margin: 0.7rem auto 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(35, 165, 90, 0.10);
  border: 1px solid rgba(35, 165, 90, 0.35);
  font-size: 0.74rem;
  color: #1a6b3a;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.65rem;
  white-space: nowrap;
}
.bono-params-counter-dot {
  width: 6.5px; height: 6.5px;
  border-radius: 50%;
  background: #23A55A;
  box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.55);
  animation: bonoParamsCounterPulse 1.8s ease-out infinite;
}
@keyframes bonoParamsCounterPulse {
  0%   { box-shadow: 0 0 0 0   rgba(35, 165, 90, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(35, 165, 90, 0); }
  100% { box-shadow: 0 0 0 0   rgba(35, 165, 90, 0); }
}
.bono-params-counter-num {
  font-weight: 800;
  color: #14512a;
  min-width: 1.5ch;
  display: inline-block;
  text-align: right;
}
@media (prefers-reduced-motion: reduce) {
  .bono-params-counter-dot { animation: none; }
}
@media (max-width: 991px) {
  .bono-params-counter { font-size: 0.68rem; bottom: -1.45rem; }
}

/* (Pixel cursor + click-ring removed — section is now a pure cross-fade carousel.) */

/* Progress dots */
.bono-params-dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.5rem;
  z-index: 3;
}
.bono-params-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.bono-params-dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: #5865f2;
}

/* Responsive — shrink everything ~25% on tablet/mobile */
@media (max-width: 991px) {
  .bono-params-card { left: 22%; top: 18%; width: 56%; padding: 1rem 1.1rem 1.15rem; }
  .bono-params-title { font-size: 0.82rem; }
  .bono-params-phone { font-size: 0.72rem; padding: 0.42rem 0.7rem; }
  .bono-params-chip { font-size: 0.7rem; padding: 0.32rem 0.7rem; }
  .bono-params-stepper-value { font-size: 2.1rem; }
  .bono-params-stepper-btn { width: 36px; height: 36px; font-size: 1.1rem; }
  .bono-params-hint { font-size: 0.66rem; }
  .bono-params-slider-value { font-size: 0.74rem; padding: 0.2rem 0.55rem; }
}

/* Reduced motion: show first card only, no animation */
@media (prefers-reduced-motion: reduce) {
  .bono-params-card[data-bono-param="1"] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Section 7 — Platforms constellation.
   Discord centered as principal + 3 satellite apps (Dashboard,
   WhatsApp, Telegram) floating around it, with pulse rings + wires.
   ============================================================ */
.bono-platforms-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 944 / 720;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Dashed wire connectors from Discord to each satellite */
.bono-platforms-wires {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bono-platforms-wires line {
  stroke: rgba(88, 101, 242, 0.28);
  stroke-width: 0.35;
  stroke-dasharray: 1.4, 1.4;
  stroke-linecap: round;
  animation: bonoPlatWire 6s linear infinite;
}
@keyframes bonoPlatWire {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -28; }
}

/* Pulse rings emanating from Discord center */
.bono-platforms-pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(88, 101, 242, 0.45);
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: bonoPlatPulse 4s ease-out infinite;
}
.bono-platforms-pulse--2 { animation-delay: 1.3s; }
.bono-platforms-pulse--3 { animation-delay: 2.6s; }
@keyframes bonoPlatPulse {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4);  border-width: 2px;  }
  20%  { opacity: 0.6;  border-color: rgba(88, 101, 242, 0.5); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(3.2);  border-width: 0.5px;}
}

/* Card frame — shared by all 4 apps */
.bono-platforms-app {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.95rem 1.1rem 1rem;
  border-radius: 18px;
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 36px rgba(15, 12, 38, 0.22),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  z-index: 2;
  animation: bonoPlatFloat 4.6s ease-in-out infinite alternate;
  will-change: transform;
}
.bono-platforms-icon {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.bono-platforms-icon svg {
  width: 100%; height: 100%;
}
.bono-platforms-name {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.bono-platforms-sub {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
  line-height: 1.1;
}

/* Discord — principal, centered, larger, glowing */
.bono-platforms-app--discord {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.35rem 1.6rem 1.45rem;
  background: linear-gradient(135deg, #5865F2 0%, #4752C4 60%, #3a3270 100%);
  box-shadow: 0 22px 52px rgba(88, 101, 242, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  animation: bonoPlatBreathe 3.4s ease-in-out infinite alternate;
}
.bono-platforms-app--discord .bono-platforms-icon--big {
  width: 3rem; height: 3rem; font-size: 1.7rem;
  margin-bottom: 0.2rem;
}
.bono-platforms-app--discord .bono-platforms-name--big {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.bono-platforms-app--discord .bono-platforms-sub {
  font-size: 0.7rem;
}
.bono-platforms-tag {
  position: absolute;
  top: -0.6rem;
  background: linear-gradient(135deg, #C586FF, #5865F2);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(88, 101, 242, 0.45);
  white-space: nowrap;
}

/* Dashboard — dark satellite, top-left */
.bono-platforms-app--dashboard {
  left: 12%; top: 14%;
  background: linear-gradient(135deg, #2b2d44 0%, #1a1c2e 60%, #0f1018 100%);
  animation-delay: -0.8s;
}

/* WhatsApp — green satellite, top-right */
.bono-platforms-app--whatsapp {
  right: 12%; top: 14%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 16px 36px rgba(18, 140, 126, 0.4),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation-delay: -2.1s;
}

/* Telegram — blue satellite, bottom-center */
.bono-platforms-app--telegram {
  left: 50%;
  bottom: 8%;
  top: auto;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  box-shadow: 0 16px 36px rgba(34, 158, 217, 0.4),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  animation: bonoPlatFloatX 4.6s ease-in-out infinite alternate;
  animation-delay: -3.4s;
}

@keyframes bonoPlatFloat {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}
@keyframes bonoPlatFloatX {
  0%   { transform: translateX(-50%) translateY(0px); }
  100% { transform: translateX(-50%) translateY(-10px); }
}
@keyframes bonoPlatBreathe {
  0%   { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1.04); }
}

@media (max-width: 991px) {
  .bono-platforms-name { font-size: 0.7rem; }
  .bono-platforms-sub  { font-size: 0.52rem; }
  .bono-platforms-icon { width: 1.5rem; height: 1.5rem; font-size: 1rem; }
  .bono-platforms-app  { padding: 0.6rem 0.75rem 0.7rem; gap: 0.22rem; }
  .bono-platforms-app--discord { padding: 0.9rem 1.05rem; }
  .bono-platforms-app--discord .bono-platforms-icon--big { width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
  .bono-platforms-app--discord .bono-platforms-name--big { font-size: 0.88rem; }
  .bono-platforms-tag { font-size: 0.42rem; padding: 0.22em 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .bono-platforms-app,
  .bono-platforms-pulse,
  .bono-platforms-wires line { animation: none !important; }
  .bono-platforms-pulse { opacity: 0.3; transform: translate(-50%, -50%) scale(1.5); }
}

/* Responsive */
@media (max-width: 991px) {
  .bono-hopin-sidebar { font-size: 0.78rem; padding: 0.9rem 0.7rem; }
  .bono-hopin-server { font-size: 0.86rem; }
  .bono-hopin-channel,
  .bono-hopin-channel-pill,
  .bono-hopin-voice-pill { font-size: 0.74rem; }
  .bono-hopin-bubble { font-size: 0.76rem; padding: 0.45rem 0.75rem; }
  .bono-hopin-member { font-size: 0.7rem; padding-left: 1.3rem; }
  .bono-hopin-tile-name { font-size: 0.62rem; }
}

/* ============================================================
   Hop-In v2 polish: usernames + timestamps + APP badge,
   unread red dot, typing indicator, click ring pulse,
   phone-deal voice tiles.
   ============================================================ */

/* Bubbles vertical (header + text) but compact so 4 bubbles + pill + typing fit the chat panel. */
.bono-hopin-bubble {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.32rem 0.68rem 0.36rem;
  border-radius: 11px;
}
.bono-hopin-bubbles { gap: 0.32rem; }
.bono-hopin-bubble-header {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  flex-wrap: nowrap;
  font-size: 0.6rem;
  line-height: 1;
}
.bono-hopin-bubble-header .bono-hopin-avatar {
  width: 13px; height: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.55rem;
}
.bono-hopin-avatar--bot {
  background: linear-gradient(135deg, #5865f2, #C586FF);
  color: #fff;
}
.bono-hopin-username {
  font-weight: 600;
  color: #f2f3f5;
  font-size: 0.68rem;
  line-height: 1;
}
.bono-hopin-bubble--bot .bono-hopin-username { color: #c586ff; }
.bono-hopin-badge-app {
  background: #5865f2;
  color: #fff;
  font-size: 0.46rem;
  font-weight: 700;
  padding: 1px 3.5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  line-height: 1;
}
.bono-hopin-time {
  font-size: 0.55rem;
  color: #949ba4;
  line-height: 1;
}
.bono-hopin-bubble-text {
  font-size: 0.78rem;
  line-height: 1.22;
}

/* Subtle left accent strip on bot bubbles */
.bono-hopin-bubble--bot {
  border-left: 2.5px solid #5865f2;
  padding-left: 0.55rem;
}

/* --- Unread red dot on the deals-iphone channel --- */
.bono-hopin-channel { position: relative; }
.bono-hopin-channel-name { flex: 1; }
.bono-hopin-unread {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ed4245;
  box-shadow: 0 0 0 2.5px #1e1f22;
  margin-left: auto;
  display: inline-block;
}
.bono-hopin-channel.is-active .bono-hopin-unread { display: none; }

/* --- Typing indicator (BonoBot tape...) --- */
.bono-hopin-typing {
  display: none;
  align-items: center;
  gap: 0.3rem;
  background: rgba(30, 31, 34, 0.85);
  color: #b5bac1;
  padding: 0.25rem 0.55rem;
  border-radius: 10px;
  font-size: 0.58rem;
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.bono-hopin-typing.is-visible { display: inline-flex; }
.bono-hopin-typing-author { font-weight: 600; color: #c586ff; }
.bono-hopin-typing-text  { opacity: 0.8; }
.bono-hopin-typing-dots {
  display: inline-flex; gap: 3px; margin-left: 4px;
}
.bono-hopin-typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #b5bac1;
  animation: bonoHopinTypingDot 1.1s infinite ease-in-out;
}
.bono-hopin-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.bono-hopin-typing-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes bonoHopinTypingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

/* --- Click ring pulse on channels --- */
.bono-hopin-click-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  border-radius: 8px;
  border: 2px solid #5865f2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  pointer-events: none;
}
.bono-hopin-click-ring.is-pulsing {
  animation: bonoHopinClickPulse 0.6s ease-out;
}
@keyframes bonoHopinClickPulse {
  0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(0.85); border-width: 2px; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.35); border-width: 0.5px; }
}

/* --- Phone deal tiles (replaces avatar tiles in voice grid) --- */
.bono-hopin-tile--phone {
  background: linear-gradient(135deg, #2b2d31 0%, #1e1f22 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  isolation: isolate;
}
.bono-hopin-tile--phone::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(197, 134, 255, 0.22), transparent 55%);
  z-index: 0;
}
.bono-hopin-tile-img {
  position: relative;
  z-index: 1;
  max-height: 92%;
  max-width: 66%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
.bono-hopin-tile-deal {
  position: absolute;
  left: 7px; bottom: 7px;
  z-index: 2;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  max-width: calc(100% - 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bono-hopin-tile-deal strong {
  color: #23a55a;
  font-weight: 700;
}

/* Responsive: even tighter on phones/tablets so 4 bubbles+pill+typing all fit */
@media (max-width: 991px) {
  .bono-hopin-username    { font-size: 0.6rem; }
  .bono-hopin-bubble-text { font-size: 0.66rem; }
  .bono-hopin-bubble      { padding: 0.25rem 0.55rem 0.3rem; }
  .bono-hopin-bubble-header { font-size: 0.52rem; gap: 0.22rem; }
  .bono-hopin-bubble-header .bono-hopin-avatar { width: 11px; height: 11px; }
  .bono-hopin-bubble--bot { padding-left: 0.45rem; border-left-width: 2px; }
  .bono-hopin-time        { font-size: 0.48rem; }
  .bono-hopin-badge-app   { font-size: 0.42rem; padding: 1px 3px; }
  .bono-hopin-typing      { font-size: 0.5rem; padding: 0.2rem 0.45rem; }
  .bono-hopin-channel-pill,
  .bono-hopin-voice-pill  { font-size: 0.62rem; padding: 0.28rem 0.6rem; }
  .bono-hopin-tile-deal   { font-size: 0.52rem; padding: 2px 5px; }
  .bono-hopin-unread      { width: 7px; height: 7px; }
}

/* Reduced-motion: skip animation, show chat final state */
@media (prefers-reduced-motion: reduce) {
  .bono-hopin-cursor { display: none; }
  .bono-hopin-channel-pill,
  .bono-hopin-voice-pill,
  .bono-hopin-bubble { opacity: 1 !important; transform: none !important; }
  .bono-hopin-typing-dots span { animation: none; }
}

/* ===================================
   Image generator panel (unchanged)
   =================================== */
#bono-gen-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #5865F2, #C586FF);
  color: #fff; border: none; font-size: 28px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.45);
  cursor: pointer; transition: transform 0.2s ease;
}
#bono-gen-toggle:hover { transform: scale(1.08); }

#bono-gen-panel {
  position: fixed; right: 20px; bottom: 90px; z-index: 9999;
  width: min(380px, calc(100vw - 40px));
  background: rgba(15, 17, 24, 0.96);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(12px);
}
#bono-gen-panel[hidden] { display: none; }

#bono-gen-panel header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
}
#bono-gen-close {
  background: transparent; border: none; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}

#bono-gen-panel label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #b9bbbe;
}
#bono-gen-panel textarea,
#bono-gen-panel select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
#bono-gen-panel textarea:focus,
#bono-gen-panel select:focus {
  outline: 2px solid #5865F2;
  outline-offset: 1px;
}

.bono-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#bono-gen-run {
  background: linear-gradient(135deg, #5865F2, #C586FF);
  color: #fff; border: none; border-radius: 10px;
  padding: 10px 14px; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: opacity 0.2s ease;
}
#bono-gen-run:disabled { opacity: 0.5; cursor: progress; }

#bono-gen-status { margin: 0; font-size: 12px; color: #b9bbbe; min-height: 1em; }

#bono-gen-figure {
  margin: 0; display: flex; flex-direction: column; gap: 6px;
}
#bono-gen-figure img {
  width: 100%; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
#bono-gen-figure a {
  color: #C586FF; font-size: 12px; text-decoration: none;
}
#bono-gen-figure a:hover { text-decoration: underline; }

/* ============================================================
   Section 7 — Marketplace marquee (world-class polish)
   Glass container with ambient halo, brand-color hover glow,
   active Vinted card has permanent teal aura + shimmer sweep.
   ============================================================ */

/* Section 7 — 4K phone scene applied as a CONTAINED BOX wrapping
   the heading (left column) + marquee (right column). Section's
   own background stays as Webflow's sparkle texture. */
.home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 {
  position: relative;
  background-image: url(/generated/section7-bg-4k.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0a0a1f;
  border-radius: 36px;
  padding: 64px 56px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 80px -20px rgba(10, 10, 31, 0.45),
    0 8px 24px -8px rgba(10, 10, 31, 0.25);
  isolation: isolate;
  margin-left: 36px;
}

/* Heading + body inside the box — light text against the dark phone scene */
.home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 .heading--h2.is_2025,
.home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 .body-text--xl.new-home.is_2025 {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ----- Roadmap aside — single elegant italic line, no animation ----- */
.bono-roadmap {
  margin: 1.6rem 0 0;
  font-family: "ABC Ginto Nord", "ABC Ginto Normal", "Ginto Normal", "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  max-width: 36ch;
}
.bono-roadmap em {
  font-style: italic;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.bono-roadmap-next {
  display: block;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.48);
}

@media (max-width: 991px) {
  .home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 {
    padding: 48px 36px;
    border-radius: 28px;
  }
}
@media (max-width: 768px) {
  .home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 {
    padding: 36px 24px;
    border-radius: 22px;
    background-position: 72% center;
  }
}

.home--section7 .home--image-wr.is-reverse.is_2025 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 380px;
  padding: 24px 0;
  background: transparent;
}

/* Stack wrapper — holds two marquee rows */
.bono-marquee-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 660px;
}

/* Transparent marquee — no glass box, no border, no halo.
   Just a clipped row of cards floating on the section background. */
.bono-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
          mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  /* Default accent (markets row = Vinted teal). Bright shade for dark bg. */
  --bono-live-r: 9;
  --bono-live-g: 177;
  --bono-live-b: 186;
  --bono-live-text: #5ee5d6;
  --bono-live-bar: linear-gradient(90deg, #09b1ba, #2dd4bf);
}

/* Channels row uses Discord blurple. Bright shade for dark bg. */
.bono-marquee[data-bono-row="channels"] {
  --bono-live-r: 88;
  --bono-live-g: 101;
  --bono-live-b: 242;
  --bono-live-text: #a5b4ff;
  --bono-live-bar: linear-gradient(90deg, #5865f2, #7983ff);
}

/* Row 2 scrolls in the opposite direction for a premium dual-rail feel */
.bono-marquee[data-bono-row="channels"] .bono-marquee-track {
  animation-name: bono-marquee-scroll-reverse;
}

@keyframes bono-marquee-scroll-reverse {
  from { transform: translateX(calc(-50% - 10px)); }
  to   { transform: translateX(0); }
}

.bono-marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 4px 14px;
  animation: bono-marquee-scroll 42s linear infinite;
  will-change: transform;
  /* Single GPU layer for the whole row — children get rasterized once
     at full resolution, then the layer is translated as a unit. No
     per-frame sub-pixel re-rasterization → no blur. */
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.bono-marquee:hover .bono-marquee-track {
  animation-play-state: paused;
}

@keyframes bono-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}

/* ---------- CARD — fully transparent, grid-aligned ----------
   Grid pins logo to a fixed row zone so every card's logo sits
   on the same baseline regardless of how much content sits below. */
.bono-marquee-card {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 158px;
  display: grid;
  grid-template-rows: 18px 70px 18px 18px 1fr;
  /* row 1: top spacer / badge zone
     row 2: logo (70px — fits 60px-tall Discord)
     row 3: caption
     row 4: stat ticker (active only)
     row 5: bottom filler */
  justify-items: center;
  align-items: center;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: filter 0.4s ease;
  isolation: isolate;
}

.bono-marquee-card::before,
.bono-marquee-card::after { content: none; }

/* Pin each child into its row zone */
.bono-marquee-logo { grid-row: 2; }
.bono-marquee-caption { grid-row: 3; }
.bono-marquee-stat { grid-row: 4; }

/* Hover lifts gently — translate only, no scale (sharper rendering) */
.bono-marquee-card:hover {
  transform: translateY(-3px);
}

/* ---------- BRAND TINTS (drives ::before bar + ::after glow) ---------- */
.bono-marquee-logo--vinted    + .bono-marquee-caption + .bono-marquee-badge,
.bono-marquee-card:has(.bono-marquee-logo--vinted) { --brand-accent: #09b1ba; --brand-glow: radial-gradient(60% 80% at 50% 0%, rgba(9, 177, 186, 0.45), transparent 70%); }
.bono-marquee-card:has(.bono-marquee-logo--ebay)      { --brand-accent: #e53238; --brand-glow: radial-gradient(60% 80% at 50% 0%, rgba(229, 50, 56, 0.30), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(0, 100, 210, 0.25), transparent 70%); }
.bono-marquee-card:has(.bono-marquee-logo--amazon)    { --brand-accent: #ff9900; --brand-glow: radial-gradient(60% 80% at 50% 0%, rgba(255, 153, 0, 0.42), transparent 70%); }
.bono-marquee-card:has(.bono-marquee-logo--cdiscount) { --brand-accent: #e40421; --brand-glow: radial-gradient(60% 80% at 50% 0%, rgba(228, 4, 33, 0.35), transparent 70%); }
.bono-marquee-card:has(.bono-marquee-logo--facebook)  { --brand-accent: #1877f2; --brand-glow: radial-gradient(60% 80% at 50% 0%, rgba(24, 119, 242, 0.38), transparent 70%); }

/* ---------- ACTIVE CARD — transparent with brand-colored halo ----------
   No scale/breathing transforms (kept logos crisp). Distinguishable via:
   stronger brand-color radial halo, colored logo + caption, pulsing stat dot. */
.bono-marquee-card[data-bono-status="live"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* No halo. Active is distinguished by size + stat ticker only. */

/* Keep the active logo in its natural brand color, fully crisp */
.bono-marquee-card[data-bono-status="live"] .bono-marquee-logo {
  filter: none;
  opacity: 1;
  position: relative;
  z-index: 1;
}

.bono-marquee-card[data-bono-status="live"] .bono-marquee-caption {
  color: var(--bono-live-text);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.bono-marquee-card[data-bono-status="live"] .bono-marquee-stat {
  font-size: 11.5px;
  font-weight: 700;
}

/* When a stat ticker is present, hide the redundant "Actif" pill —
   the stat's own pulsing dot already signals live status. */
.bono-marquee-card[data-bono-status="live"]:has(.bono-marquee-stat) .bono-marquee-badge.is-live {
  display: none;
}

/* Live badge picks up the row's brand color */
.bono-marquee[data-bono-row="channels"] .bono-marquee-badge.is-live {
  background: linear-gradient(135deg, #7983ff, #5865f2);
  box-shadow:
    0 2px 10px -1px rgba(88, 101, 242, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

@keyframes bono-marquee-breathe {
  0%, 100% { transform: scale(1.12); }
  50%      { transform: scale(1.15); }
}

@keyframes bono-marquee-halo {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.bono-marquee-card[data-bono-status="live"]:hover {
  transform: translateY(-3px);
}

/* ---------- SOON CARDS — full color too, distinguished only via the Q4 badge ---------- */
.bono-marquee-card[data-bono-status="soon"] .bono-marquee-logo {
  transition: transform 0.4s ease;
}
.bono-marquee-card[data-bono-status="soon"]:hover .bono-marquee-logo {
  transform: scale(1.04);
}

/* ---------- LOGO — clean, real colors, no filters ---------- */
.bono-marquee-logo {
  display: block;
  max-width: 82%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Active logos — large to dominate. Wide wordmarks use lower max-height
   + larger max-width so they fill the slot nicely. */
.bono-marquee-logo--vinted    { max-height: 52px; max-width: 92%; }
.bono-marquee-logo--discord   { max-height: 60px; }
.bono-marquee-logo--dashboard { max-height: 56px; }
/* Soon logos — slightly smaller but still very legible */
.bono-marquee-logo--ebay      { max-height: 44px; }
.bono-marquee-logo--amazon    { max-height: 30px; margin-top: 4px; }
.bono-marquee-logo--cdiscount { max-height: 28px; max-width: 96%; }
.bono-marquee-logo--facebook  { max-height: 24px; }
.bono-marquee-logo--telegram  { max-height: 42px; }
.bono-marquee-logo--whatsapp  { max-height: 42px; }
.bono-marquee-logo--sms       { max-height: 38px; }
.bono-marquee-logo--email     { max-height: 38px; }

/* ---------- LIVE STAT TICKER ---------- */
.bono-marquee-stat {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: -1px;
  font-family: "ABC Ginto Normal", "Ginto Normal", "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(30, 30, 60, 0.55);
}

.bono-marquee-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--bono-live-r), var(--bono-live-g), var(--bono-live-b));
  box-shadow: 0 0 6px rgba(var(--bono-live-r), var(--bono-live-g), var(--bono-live-b), 0.7);
  animation: bono-marquee-stat-pulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}

.bono-marquee-stat-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--bono-live-text);
  font-feature-settings: "tnum";
}

.bono-marquee-stat-unit {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

@keyframes bono-marquee-stat-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.5); }
}

@media (max-width: 768px) {
  .bono-marquee-stat { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bono-marquee-stat-dot { animation: none; }
}

/* ---------- CAPTION ---------- (light text — section bg is dark navy) */
.bono-marquee-caption {
  font-family: "ABC Ginto Normal", "Ginto Normal", "Inter", system-ui, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.bono-marquee-card[data-bono-status="live"] .bono-marquee-caption {
  color: var(--bono-live-text);
  font-weight: 700;
}

/* ---------- BADGE ---------- */
.bono-marquee-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: "ABC Ginto Normal", "Ginto Normal", "Inter", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bono-marquee-badge.is-live {
  background: linear-gradient(135deg, #14d9b8, #06a98e);
  color: #ffffff;
  box-shadow:
    0 2px 10px -1px rgba(14, 200, 160, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.bono-marquee-badge.is-live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  margin-right: 5px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95);
  animation: bono-marquee-dot 1.6s ease-in-out infinite;
}

.bono-marquee-badge.is-soon {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

@keyframes bono-marquee-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.6); }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .home--section7 .home--image-wr.is-reverse.is_2025 { min-height: 360px; padding: 20px 0; }
  .bono-marquee { padding: 10px 0; }
  .bono-marquee-card {
    width: 160px;
    height: 132px;
    padding: 0 12px;
    grid-template-rows: 14px 56px 16px 14px 1fr;
  }
  .bono-marquee-logo--vinted    { max-height: 42px; }
  .bono-marquee-logo--discord   { max-height: 48px; }
  .bono-marquee-logo--dashboard { max-height: 44px; }
  .bono-marquee-logo--ebay      { max-height: 36px; }
  .bono-marquee-logo--amazon    { max-height: 24px; }
  .bono-marquee-logo--cdiscount { max-height: 22px; }
  .bono-marquee-logo--facebook  { max-height: 20px; }
  .bono-marquee-logo--telegram  { max-height: 34px; }
  .bono-marquee-logo--whatsapp  { max-height: 34px; }
  .bono-marquee-logo--sms       { max-height: 30px; }
  .bono-marquee-logo--email     { max-height: 30px; }
  .bono-marquee-caption { font-size: 10.5px; }
  .bono-marquee-stat { font-size: 10px; }
  .bono-marquee-badge { font-size: 8.5px; padding: 3px 7px; top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bono-marquee-track { animation: none; }
  .bono-marquee-badge.is-live::before { animation: none; }
}

/* ============================================================
   Mobile layout rescue — keep the desktop composition intact,
   but stop the Webflow desktop art from overflowing phone screens.
   ============================================================ */
@media (max-width: 767px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body,
  .page-wrapper,
  .main-wrapper {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .padding-global,
  .container-hero.is_2025,
  .container-huge.is_2025,
  .container-huge._5-x.is_2025 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .home--2col_layout.is_2025,
  .home--2col_layout.block-2.is_2025,
  .home--2col_layout.mob-revers.is_2025 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home--2col_layout.is_2025 > *,
  .home--2col_layout.block-2.is_2025 > *,
  .home--2col_layout.mob-revers.is_2025 > * {
    min-width: 0 !important;
  }

  .heading--h1.is_2025,
  .heading--h2.is_2025,
  .body-text--xl.new-home.is_2025,
  .body-text--xl.is_2025,
  .body-text--xl.is_2025-n {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  .home--hero.is_2025 .heading--h1.is_2025 {
    font-size: 2.12rem !important;
    line-height: 0.92 !important;
    letter-spacing: 0 !important;
  }

  .home--4section.is_2025 .heading--h2.is_2025,
  .home--5section.is_2025 .heading--h2.is_2025,
  .home--section7.color-gr.is_2025 .heading--h2.is_2025 {
    font-size: 2.08rem !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
  }

  .body-text--xl.new-home.is_2025,
  .body-text--xl.is_2025,
  .body-text--xl.is_2025-n {
    font-size: 1rem !important;
    line-height: 1.32 !important;
  }

  .bonoitec-hero-badge {
    display: none !important;
  }

  .home--hero.is_2025 .home--text-wr.is-mobile-center.is_2025,
  .home--hero.is_2025 .hero-subtitle-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    margin-inline: auto !important;
  }

  #landing-cta,
  .flex-block-2.n-home.is_2025 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }

  .hero_button-r.blue-button.n-home._2025 {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .home--3section.is_2025 .home--image-wr.video.is_2025 {
    width: min(100%, calc(100vw - 48px)) !important;
    max-width: 390px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .home--3section.is_2025 .home--group-chat-img-wr {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 944 / 720 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .home--3section.is_2025 #bono-robot-overlay,
  .home--3section.is_2025 .bono-screen-overlay {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
  }

  .home--hero.is_2025 .home--2col_layout.is-hero.is_2025 {
    gap: 1.4rem !important;
  }

  .home--hero.is_2025 .home_image-hero-mobile,
  .home--hero.is_2025 .home-image,
  .home--hero.is_2025 .home--image-wr.is-center {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .home--hero.is_2025 .home_image-hero.mobile_new {
    max-width: calc(100vw - 32px) !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 54px -22px rgba(88, 50, 180, 0.55) !important;
  }

  .home--4section.is_2025 {
    padding-bottom: 5rem !important;
  }

  .home--4section.is_2025 .home--block-group.block-2._2025,
  .home--5section.is_2025 .home--block-group.is-reverse._2025 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-inline: auto !important;
    border-radius: 28px !important;
  }

  .home--4section.is_2025 .home--2col_layout,
  .home--5section.is_2025 .home--2col_layout.block-2.is_2025,
  .home--section7.color-gr.is_2025 .home--2col_layout.mob-revers.is_2025 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2rem !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .home--4section.is_2025 .home--text-wr.is-mobile-first.is_2025,
  .home--5section.is_2025 .home--text-wr.is-mobile-first.is_2025,
  .home--section7.color-gr.is_2025 .home--text-wr.is-mobile-first.is_2025 {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  .home--4section.is_2025 .home--image-wr.video.is_2025,
  .home--5section.is_2025 .home--image-wr.is-reverse.is_2025 {
    width: min(100%, calc(100vw - 48px)) !important;
    max-width: 390px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  .home--4section.is_2025 .bono-hopin-mockup,
  .home--5section.is_2025 .bono-params-stage {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .home--4section.is_2025 .bono-hopin-mockup {
    aspect-ratio: 4 / 5 !important;
  }

  .home--4section.is_2025 .bono-hopin-sidebar {
    left: 3.5% !important;
    top: 5% !important;
    bottom: 5% !important;
    width: 31% !important;
    padding: 0.65rem 0.45rem !important;
    border-radius: 10px !important;
    font-size: 0.62rem !important;
  }

  .home--4section.is_2025 .bono-hopin-sidebar > :nth-child(n+4) {
    display: none !important;
  }

  .home--4section.is_2025 .bono-hopin-panel {
    left: 38% !important;
    right: 3.5% !important;
    top: 6% !important;
    bottom: 5% !important;
    gap: 0.34rem !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .home--4section.is_2025 .bono-hopin-server,
  .home--4section.is_2025 .bono-hopin-channel,
  .home--4section.is_2025 .bono-hopin-channel-pill,
  .home--4section.is_2025 .bono-hopin-voice-pill,
  .home--4section.is_2025 .bono-hopin-bubble,
  .home--4section.is_2025 .bono-hopin-member {
    font-size: 0.74rem !important;
  }

  .home--4section.is_2025 .bono-hopin-channel,
  .home--4section.is_2025 .bono-hopin-member {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .home--4section.is_2025 .bono-hopin-member,
  .home--4section.is_2025 .bono-hopin-tile,
  .home--4section.is_2025 .bono-hopin-tile-name,
  .home--4section.is_2025 .bono-hopin-typing,
  .home--4section.is_2025 .bono-hopin-click-ring,
  .home--4section.is_2025 .bono-hopin-cursor {
    transform: none !important;
  }

  .home--4section.is_2025 .bono-hopin-member {
    display: none !important;
  }

  .home--4section.is_2025 .bono-hopin-bubble,
  .home--4section.is_2025 .bono-hopin-channel-pill,
  .home--4section.is_2025 .bono-hopin-voice-pill {
    opacity: 1 !important;
    transform: none !important;
    padding: 0.3rem 0.45rem !important;
    border-radius: 9px !important;
  }

  .home--4section.is_2025 .bono-hopin-voice {
    display: none !important;
  }

  .home--5section.is_2025 {
    padding-top: 4rem !important;
  }

  .home--5section.is_2025 .fun2-top-eyes.is_2025 {
    display: none !important;
  }

  .home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 {
    width: calc(100vw - 44px) !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin-left: 28px !important;
    margin-right: 16px !important;
    padding: 34px 22px 30px !important;
    background-position: 66% center !important;
    overflow: hidden !important;
  }

  .home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(8, 8, 28, 0.9) 0%,
      rgba(8, 8, 28, 0.78) 44%,
      rgba(8, 8, 28, 0.54) 100%
    ) !important;
  }

  .home--section7.color-gr.is_2025 .home--block-group.is-reverse.is_2025 > * {
    position: relative !important;
    z-index: 1 !important;
  }

  .home--section7 .home--image-wr.is-reverse.is_2025 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .home--section7 .bono-marquee-stack {
    max-width: 100% !important;
    gap: 0 !important;
  }

  .home--section7 .bono-marquee {
    padding: 6px 0 !important;
  }

  .home--section7 .bono-marquee-card {
    width: 136px !important;
    height: 112px !important;
    grid-template-rows: 12px 46px 14px 13px 1fr !important;
  }
}