/* Start:/clients/inline_styles.css?177985628033159*/
/* Extracted from <style> blocks of MIX_Clients_Page_Mockup.html
   Includes main page CSS AND the .ipx-partners purple design CSS.
   Paste into Bitrix component template <style> tag,
   or into a separate .css file linked from the template. */

:root {
    /* MIX brand purple (matching mixrecordingstudio.com header) */
    --bg: #1a0a2e;
    --bg-alt: #25143d;
    --bg-card: #2e1a4a;
    --text: #f5f5f5;
    --text-dim: #b4a8c8;
    --text-faint: #7e6f9a;
    --purple: #7d3eea;
    --purple-light: #a374ff;
    --purple-deep: #5b2a8c;
    --coral: #ff4d7b;
    --coral-soft: #ff85a0;
    --gold: #ffd700;
    --border: #3d2a52;
    --max-width: 1280px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  /* Force dark theme on /clients/ - beats the brand-template light gradient. */
  html, body {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
  }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg) !important; color: var(--text) !important;
    line-height: 1.6; -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(at 10% 0%, rgba(125,62,234,0.15) 0%, transparent 50%),
      radial-gradient(at 90% 50%, rgba(125,62,234,0.08) 0%, transparent 50%) !important;
  }
  .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }

  /* HERO */
  .hero {
    padding: 110px 0 80px; text-align: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(125,62,234,0.35) 0%, transparent 65%);
  }
  .hero .kicker {
    font-size: 12px; letter-spacing: 4px; color: var(--purple-light);
    text-transform: uppercase; font-weight: 700; margin-bottom: 24px;
  }
  .hero h1 {
    font-size: clamp(40px, 6vw, 72px); font-weight: 800;
    letter-spacing: -2px; margin-bottom: 24px; line-height: 1.05;
  }
  .hero h1 span { color: var(--coral); }
  .hero .lead {
    max-width: 720px; margin: 0 auto 24px;
    color: var(--text-dim); font-size: 18px;
  }
  .hero .seo-text {
    max-width: 820px; margin: 32px auto 0;
    color: var(--text-faint); font-size: 14px; line-height: 1.7;
  }
  .hero .stats {
    display: flex; justify-content: center;
    gap: 60px; margin-top: 56px; flex-wrap: wrap;
  }
  .stat .num { font-size: 40px; font-weight: 800; color: var(--text); line-height: 1; }
  .stat .label {
    font-size: 12px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 2px; margin-top: 8px;
  }

  /* SECTION TITLES */
  .section-title { text-align: center; margin: 100px 0 50px; }
  .section-title .kicker {
    font-size: 11px; letter-spacing: 3px; color: var(--purple-light);
    text-transform: uppercase; font-weight: 700;
  }
  .section-title h2 {
    font-size: clamp(28px, 4vw, 44px); font-weight: 800;
    letter-spacing: -1px; margin-top: 8px;
  }
  .section-title p {
    color: var(--text-dim); max-width: 640px;
    margin: 16px auto 0; font-size: 15px; line-height: 1.6;
  }

  /* ARTIST CARDS · unified circular avatar design */
  .artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
  }
  .artists-grid.top5 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
  }
  .artist-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 28px 22px 22px;
    text-decoration: none; color: inherit;
    transition: all 0.35s ease;
    display: flex; flex-direction: column;
    text-align: center;
    min-height: 270px; position: relative;
  }
  .artist-card:hover {
    border-color: var(--purple);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(125,62,234,0.25);
  }
  .artist-card.top5-card {
    background: linear-gradient(160deg, var(--bg-card) 0%, rgba(125,62,234,0.12) 100%);
    border: 1px solid rgba(125,62,234,0.3);
  }
  .artist-card.top5-card::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px; height: 3px;
    background: linear-gradient(90deg, var(--coral), var(--purple-light));
    border-radius: 0 0 4px 4px;
  }
  /* Unified circular avatar · like a vinyl record. Color tint varies subtly per card. */
  .avatar-disc {
    width: 110px; height: 110px;
    border-radius: 50%;
    margin: 6px auto 18px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(circle at 50% 50%, transparent 18%, rgba(0,0,0,0.45) 19%, rgba(0,0,0,0.45) 23%, transparent 24%),
      radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.25) 31%, rgba(0,0,0,0.25) 34%, transparent 35%),
      radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,0.2) 43%, rgba(0,0,0,0.2) 45%, transparent 46%),
      var(--avatar-color, linear-gradient(135deg, #7d3eea 0%, #5b2a8c 100%));
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,0.08),
      inset 0 -8px 24px rgba(0,0,0,0.3),
      0 4px 12px rgba(0,0,0,0.4);
  }
  .avatar-disc::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 28%; height: 28%;
    background: var(--avatar-label, linear-gradient(135deg, #ff4d7b 0%, #7d3eea 100%));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 2px rgba(255,255,255,0.15);
  }
  .avatar-disc .initials {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white; font-weight: 800; font-size: 13px;
    z-index: 2; letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  /* GOLD PLAQUE · Top 5 Featured Artists (RIAA-style certified gold record) */
  .avatar-disc.plaque-gold {
    background: transparent;
    box-shadow:
      0 10px 28px rgba(0,0,0,0.65),
      0 0 38px rgba(255,200,40,0.45);
  }
  .avatar-disc.plaque-gold .plaque-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    display: block;
  }
  .avatar-disc.plaque-gold::after { display: none; }
  .avatar-disc.plaque-gold .initials {
    color: #3a2700;
    text-shadow: 0 1px 1px rgba(255,245,200,0.65);
    font-weight: 900;
    z-index: 2;
  }
  .avatar-disc.plaque-gold::before {
    content: '★';
    position: absolute; top: -8px; right: -8px;
    width: 30px; height: 30px;
    background: radial-gradient(circle at 30% 25%, #fff6c2 0%, #ffd96b 25%, #d4a017 65%, #6b4f06 100%);
    color: #2a1c00;
    border-radius: 50%; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.55),
      inset 0 -1px 2px rgba(60,40,0,0.5),
      0 2px 8px rgba(0,0,0,0.55);
    z-index: 3;
  }

  /* SILVER PLAQUE · Featured Artists (RIAA-style platinum/silver record) */
  .avatar-disc.plaque-silver {
    background: transparent;
    box-shadow:
      0 10px 28px rgba(0,0,0,0.65),
      0 0 32px rgba(210,220,235,0.4);
  }
  .avatar-disc.plaque-silver .plaque-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    display: block;
  }
  .avatar-disc.plaque-silver::after { display: none; }
  .avatar-disc.plaque-silver .initials {
    color: #f5f8fb;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.4);
    font-weight: 900;
    z-index: 2;
  }

  /* Brushed-chrome silver Featured Artist disc variants (.v1–.v8 + .gold), polished metal with X-shaped highlights */
  .avatar-disc.v1, .avatar-disc.v2, .avatar-disc.v3, .avatar-disc.v4,
  .avatar-disc.v5, .avatar-disc.v6, .avatar-disc.v7, .avatar-disc.v8,
  .avatar-disc.gold {
    background:
      /* X-shaped bright highlight rays, narrow, sharp white streaks */
      conic-gradient(from 0deg at 50% 50%,
        rgba(255,255,255,0.85) 0deg,
        rgba(255,255,255,0.0) 12deg,
        rgba(150,158,170,0.0) 80deg,
        rgba(255,255,255,0.75) 90deg,
        rgba(255,255,255,0.0) 102deg,
        rgba(150,158,170,0.0) 170deg,
        rgba(255,255,255,0.85) 180deg,
        rgba(255,255,255,0.0) 192deg,
        rgba(150,158,170,0.0) 260deg,
        rgba(255,255,255,0.75) 270deg,
        rgba(255,255,255,0.0) 282deg,
        rgba(150,158,170,0.0) 350deg,
        rgba(255,255,255,0.85) 360deg
      ),
      /* Small bright center hot spot where rays converge */
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 18%),
      /* Strong outer rim shadow */
      radial-gradient(circle at 50% 50%, transparent 65%, rgba(50,55,65,0.4) 90%, rgba(40,44,52,0.7) 100%),
      /* Main brushed silver body, darker mid-silver to match the photo reference */
      radial-gradient(circle at 50% 50%, #b8c0ca 0%, #a8b0bb 28%, #8d95a1 55%, #6e7681 80%, #4d535d 100%);
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,0.45),
      inset 0 -8px 18px rgba(30,35,45,0.45),
      inset 0 6px 14px rgba(255,255,255,0.18),
      0 8px 22px rgba(0,0,0,0.55),
      0 0 18px rgba(180,190,205,0.35);
  }
  .avatar-disc.v1::after,
  .avatar-disc.v2::after, .avatar-disc.v3::after, .avatar-disc.v4::after,
  .avatar-disc.v5::after, .avatar-disc.v6::after, .avatar-disc.v7::after, .avatar-disc.v8::after,
  .avatar-disc.gold::after {
    background:
      radial-gradient(circle at 35% 30%, #ffffff 0%, #e0e6ee 25%, #8b929c 65%, #3a3f47 100%);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.4),
      inset 0 0 0 2px rgba(255,255,255,0.4),
      inset 0 -2px 4px rgba(0,0,0,0.3);
  }
  .avatar-disc.v1 .initials, .avatar-disc.v2 .initials, .avatar-disc.v3 .initials,
  .avatar-disc.v4 .initials, .avatar-disc.v5 .initials, .avatar-disc.v6 .initials,
  .avatar-disc.v7 .initials, .avatar-disc.v8 .initials,
  .avatar-disc.gold .initials {
    color: #1a1d22;
    text-shadow: 0 1px 1px rgba(255,255,255,0.7), 0 -1px 1px rgba(0,0,0,0.25);
    font-weight: 900;
    z-index: 3;
  }
  /* Mr. Robotic, silver disc with GOLD STAR badge (Multi-Grammy producer indicator) */
  .avatar-disc.gold::before {
    content: '★';
    position: absolute; top: -8px; right: -8px;
    width: 26px; height: 26px;
    background: radial-gradient(circle at 30% 25%, #fff6c2 0%, #ffd96b 30%, #d4a017 70%, #6b4f06 100%);
    color: #2a1c00; border-radius: 50%; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.5);
    z-index: 4;
  }


  .artist-card .stage-name {
    font-size: 17px; font-weight: 800;
    margin-bottom: 4px; line-height: 1.2;
    letter-spacing: -0.3px;
  }
  .artist-card .handle {
    font-size: 11px; color: var(--coral-soft);
    margin-bottom: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .artist-card .bio {
    font-size: 12.5px; color: var(--text-dim);
    line-height: 1.55; margin-top: 6px;
    flex-grow: 1;
  }
  .artist-card .badges {
    display: flex; gap: 6px; margin-top: 14px;
    flex-wrap: wrap; justify-content: center;
  }
  .badge {
    font-size: 10px; padding: 3px 8px;
    border-radius: 4px; font-weight: 700; letter-spacing: 0.5px;
  }
  .badge-ig { background: rgba(125,62,234,0.2); color: var(--purple-light); }
  .badge-sp { background: rgba(29,185,84,0.15); color: #1db954; }
  .badge-gold { background: rgba(255,215,0,0.15); color: var(--gold); }

  /* LABELS GRID, Industry Partners (6-col with vertical bricks + wave decor) */
  .labels-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
    gap: 14px;
    grid-auto-flow: row dense;
  }
  .label-card.w-1 { grid-column: span 1; }
  .label-card.w-2 { grid-column: span 2; }
  .label-card.w-3 { grid-column: span 3; }
  .label-card.w-6 { grid-column: span 6; }
  .label-card.h-2 { grid-row: span 2; }
  @media (max-width: 900px) {
    .labels-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; }
    .label-card.w-1 { grid-column: span 2; }
    .label-card.w-2 { grid-column: span 2; }
    .label-card.w-3 { grid-column: span 4; }
    .label-card.w-6 { grid-column: span 4; }
  }
  @media (max-width: 520px) {
    .labels-grid { grid-template-columns: 1fr; }
    .label-card.w-1, .label-card.w-2, .label-card.w-3, .label-card.w-6 { grid-column: span 1; }
    .label-card.h-2 { grid-row: span 1; }
  }
  .label-card {
    position: relative;
    padding: 28px 26px;
    background:
      /* Soft top-left purple glow */
      radial-gradient(ellipse 90% 75% at 8% 6%, rgba(192, 132, 252, 0.28) 0%, rgba(168, 85, 247, 0.14) 28%, transparent 60%),
      /* Bottom-right gentle purple glow */
      radial-gradient(ellipse 80% 70% at 95% 95%, rgba(125, 62, 234, 0.22) 0%, rgba(99, 38, 191, 0.10) 35%, transparent 65%),
      /* Mid soft purple wash */
      radial-gradient(ellipse 60% 60% at 50% 50%, rgba(91, 42, 140, 0.12) 0%, transparent 70%),
      /* Base dark purple gradient */
      linear-gradient(135deg, #1a0c30 0%, #20103e 50%, #2a1554 100%);
    border: 1px solid rgba(168, 85, 247, 0.14);
    border-radius: 14px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  .label-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 30px rgba(168, 85, 247, 0.05);
    pointer-events: none;
  }
  .label-card:hover {
    border-color: rgba(217, 134, 255, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(125, 62, 234, 0.32);
  }
  .label-card .name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }
  .label-card .subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #a89bce;
    line-height: 1.5;
    letter-spacing: 0.1px;
    position: relative;
    z-index: 1;
    max-width: 95%;
  }
  /* Wave decoration (positioned in corner, fixed aspect, not stretched) */
  .label-card .wave-decor {
    position: absolute;
    right: -16px;
    bottom: -10px;
    width: 200px;
    height: 130px;
    pointer-events: none;
    z-index: 0;
  }
  .label-card.h-2 .wave-decor {
    right: -10px;
    top: -10px;
    bottom: auto;
    width: 130px;
    height: 200px;
  }
  .label-card.w-1:not(.h-2) .wave-decor {
    right: -30px;
    width: 160px;
    height: 100px;
  }
  /* Small star/spark accent in corner */
  .label-card .dot-accent {
    position: absolute;
    top: 14px; right: 14px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #d986ff;
    box-shadow:
      0 0 6px rgba(217, 134, 255, 0.85),
      0 0 14px rgba(168, 85, 247, 0.6),
      0 0 24px rgba(168, 85, 247, 0.3);
    z-index: 3;
  }
  /* Purple gradient text accent for section heading */
  .gradient-purple {
    background: linear-gradient(90deg, #a374ff 0%, #c084fc 45%, #7d3eea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* FAQ section · for GEO */
  .faq {
    background: var(--bg-alt);
    border-radius: 16px;
    padding: 48px 40px;
    border: 1px solid var(--border);
    max-width: 920px;
    margin: 0 auto;
  }
  .faq-item {
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
  }
  .faq-item:last-child { border-bottom: none; }
  .faq-item h3 {
    font-size: 17px; font-weight: 700;
    color: var(--text); margin-bottom: 10px;
  }
  .faq-item h3::before {
    content: 'Q: '; color: var(--purple-light); font-weight: 800;
  }
  .faq-item p {
    color: var(--text-dim); font-size: 14.5px;
    line-height: 1.7; padding-left: 22px;
  }
  .faq-item p strong { color: var(--text); }

  /* FOOTER SEO */
  .seo-footer {
    margin-top: 100px;
    padding: 60px 0 40px;
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
  }
  .seo-footer .container { max-width: 920px; }
  .seo-footer h3 {
    font-size: 22px; font-weight: 700;
    margin-bottom: 18px; color: var(--text);
  }
  .seo-footer p {
    color: var(--text-dim); font-size: 14px;
    line-height: 1.75; margin-bottom: 16px;
  }
  .seo-footer p strong { color: var(--text); font-weight: 600; }
  .seo-footer a { color: var(--purple-light); text-decoration: none; }
  .seo-footer a:hover { text-decoration: underline; }

  .foot {
    text-align: center; padding: 40px 32px;
    color: var(--text-faint); font-size: 12px;
  }

  @media (max-width: 720px) {
    .hero { padding: 80px 0 60px; }
    .section-title { margin: 60px 0 40px; }
    .artists-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .artist-card { padding: 22px 14px 16px; min-height: 240px; }
    .avatar-disc { width: 80px; height: 80px; }
    .hero .stats { gap: 32px; }
    .labels-grid { grid-template-columns: repeat(2, 1fr); }
    .faq { padding: 32px 24px; }
  }

  /* ===== COLLAPSIBLE FAQ + SEO (native <details>) ===== */
  details.faq-item,
  details.seo-item {
    list-style: none;
  }
  details.faq-item summary,
  details.seo-item summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 36px;
    outline: none;
    user-select: none;
  }
  details.faq-item summary::-webkit-details-marker,
  details.seo-item summary::-webkit-details-marker,
  details.faq-item summary::marker,
  details.seo-item summary::marker { display: none; }
  details.faq-item summary::after,
  details.seo-item summary::after {
    content: '+';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; line-height: 1;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: transform 0.25s ease, color 0.2s ease;
  }
  details.faq-item[open] summary::after,
  details.seo-item[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
    color: var(--text);
  }
  details.faq-item summary h3,
  details.seo-item summary h3 {
    display: inline; margin: 0;
  }
  details.faq-item p,
  details.seo-item p {
    margin-top: 14px;
    animation: fadeIn 0.25s ease-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ===== MOBILE-FIRST RESPONSIVE RULES (80% mobile users) ===== */
  @media (max-width: 768px) {
    .container { padding: 0 16px; }
    .hero { padding: 60px 0 36px; }
    .hero h1 { font-size: clamp(28px, 8vw, 40px); margin-bottom: 16px; }
    .hero .lead { font-size: 14.5px; line-height: 1.55; }
    .hero .stats { gap: 24px; margin-top: 28px; }
    .stat .num { font-size: 28px; }
    .stat .label { font-size: 10px; letter-spacing: 1.5px; }
    .section-title { margin: 36px 0 22px; }
    .section-title h2 { font-size: clamp(22px, 6vw, 30px); }
    .section-title .kicker { font-size: 10px; letter-spacing: 2.5px; }
    .section-title p { font-size: 13.5px; line-height: 1.55; }
    .artist-card { padding: 16px 14px 50px; min-height: auto; }
    .artist-card .stage-name { font-size: 16px; }
    .artist-card .tag { font-size: 11px; }
    .artist-card .handle { font-size: 10.5px; }
    .artist-card .bio { font-size: 12px; line-height: 1.5; }
    .badge { font-size: 9.5px; padding: 2px 6px; }
    .faq, .seo-frame {
      padding: 24px 18px;
      border-radius: 12px;
    }
    .faq-item h3, .seo-item h3 { font-size: 15px; line-height: 1.35; }
    .faq-item p, .seo-item p { font-size: 13.5px; line-height: 1.7; }
    details.faq-item summary,
    details.seo-item summary { padding-right: 32px; }
    details.faq-item summary::after,
    details.seo-item summary::after {
      width: 24px; height: 24px; font-size: 18px;
    }
    .seo-footer { padding: 36px 0 50px; }
    .seo-footer .legal { font-size: 11px; margin-top: 18px; }
    .labels-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 10px !important; }
    .label-card { padding: 18px 16px; min-height: auto; }
    .label-card .name { font-size: 18px; }
    .label-card .subtitle { font-size: 12px; }
    .label-card.w-1, .label-card.w-2, .label-card.w-3, .label-card.w-6 { grid-column: span 1 !important; }
    .label-card.h-2 { grid-row: span 1 !important; }
    .ipx-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 10px !important; }
    .ipx-card { padding: 18px 16px; min-height: auto; }
    .ipx-card .name { font-size: 18px; }
    .ipx-card .subtitle { font-size: 12px; }
    .ipx-card.w-1, .ipx-card.w-2, .ipx-card.w-3, .ipx-card.w-6 { grid-column: span 1 !important; }
    .ipx-card.h-2 { grid-row: span 1 !important; }
    .ipx-partners { padding: 50px 16px; }
    .ipx-headline { font-size: clamp(22px, 6vw, 30px); }
    .ipx-subhead { font-size: 13.5px; }
    .artists-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .artists-grid.top5 { grid-template-columns: 1fr; gap: 14px; }
    .artists-grid.top5 .artist-card { min-height: auto; }
    .avatar-disc { width: 80px; height: 80px; }
    .avatar-disc .initials { font-size: 11px; }
  }
  @media (max-width: 480px) {
    /* Keep 2 columns on Featured + Top 5 so cards stay scannable */
    .artists-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .artists-grid.top5 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    /* Top 5 last (5th) card spans both columns to balance the 2-col grid */
    .artists-grid.top5 .artist-card:nth-child(5) { grid-column: span 2; }
    .hero .stats { flex-direction: column; gap: 14px; align-items: center; }
    .stat { text-align: center; }
    /* Smaller artist-card padding + tighter icons for narrow screens */
    .artist-card { padding: 14px 10px 44px; }
    .artist-card .stage-name { font-size: 14px; }
    .artist-card .tag { font-size: 10px; }
    .artist-card .handle { font-size: 10px; }
    .artist-card .bio { display: none; }
    .artist-card .number { font-size: 22px; top: 8px; right: 10px; }
    /* MIX: shrink chrome avatar-disc */
    .avatar-disc { width: 64px !important; height: 64px !important; margin: 6px auto 12px !important; }
    .avatar-disc .initials { font-size: 10px !important; }
    /* Union/Zoom: shrink PNG and SVG vinyls */
    .artist-card img.vinyl,
    .artist-card svg.vinyl {
      width: 92px !important; height: 92px !important;
      margin: 8px auto 6px !important;
    }
    .artists-grid.top5 .artist-card img.vinyl,
    .artists-grid.top5 .artist-card svg.vinyl {
      width: 110px !important; height: 110px !important;
      margin: 10px auto 0 !important;
    }
    /* Smaller crown + waveform on tiny screens */
    .artist-card .crown { width: 36px !important; height: 32px !important; top: 6px !important; right: 6px !important; }
    .artist-card .waveform { width: 22px !important; height: 8px !important; left: 8px !important; top: 8px !important; }
    /* Smaller arrow button */
    .artist-card .arrow-btn { width: 28px !important; height: 28px !important; bottom: 10px !important; left: 10px !important; }
    /* Compact badges */
    .badge { font-size: 9px !important; padding: 2px 5px !important; }
    .artist-card .badges { bottom: 12px !important; right: 12px !important; gap: 4px !important; }
    /* Section title tighter */
    .section-title { margin: 28px 0 18px !important; }
    .section-title h2 { font-size: clamp(20px, 5.5vw, 26px); }
  }

/* === Additional inline <style> block from body === */
/* ===== INDUSTRY PARTNERS SECTION =====
     Self-contained, scoped to .ipx- prefixed classes.
     Drop-in safe alongside Elementor / Divi / Gutenberg / custom themes. */

  .ipx-partners {
    /* Theme tokens - change these to retheme the section */
    --ipx-bg: #0e0518;
    --ipx-purple-bright: #c084fc;
    --ipx-purple: #a855f7;
    --ipx-purple-deep: #7d3eea;
    --ipx-purple-darkest: #5b2a8c;
    --ipx-text: #ffffff;
    --ipx-text-dim: #a89bce;
    --ipx-text-faint: #7e6f9a;

    background: var(--ipx-bg);
    color: var(--ipx-text);
    padding: 90px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(at 10% 0%, rgba(125,62,234,0.15) 0%, transparent 50%),
      radial-gradient(at 90% 50%, rgba(125,62,234,0.08) 0%, transparent 50%);
  }
  .ipx-partners * { box-sizing: border-box; }

  .ipx-container {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* HEADER */
  .ipx-header { text-align: center; margin-bottom: 56px; }
  .ipx-kicker {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--ipx-purple-bright);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .ipx-headline {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--ipx-text);
    line-height: 1.1;
    margin: 0 0 18px;
  }
  .ipx-headline .ipx-gradient {
    background: linear-gradient(90deg, #a374ff 0%, #c084fc 45%, #7d3eea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .ipx-subhead {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ipx-text-dim);
    font-size: 16px;
    line-height: 1.6;
  }

  /* GRID */
  .ipx-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
    gap: 14px;
    grid-auto-flow: row dense;
  }
  .ipx-card.w-1 { grid-column: span 1; }
  .ipx-card.w-2 { grid-column: span 2; }
  .ipx-card.w-3 { grid-column: span 3; }
  .ipx-card.w-6 { grid-column: span 6; }
  .ipx-card.h-2 { grid-row: span 2; }

  @media (max-width: 900px) {
    .ipx-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
    .ipx-card.w-1 { grid-column: span 2; }
    .ipx-card.w-2 { grid-column: span 2; }
    .ipx-card.w-3 { grid-column: span 4; }
    .ipx-card.w-6 { grid-column: span 4; }
  }
  @media (max-width: 520px) {
    .ipx-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .ipx-card.w-1, .ipx-card.w-2, .ipx-card.w-3, .ipx-card.w-6 { grid-column: span 1; }
    .ipx-card.h-2 { grid-row: span 1; }
  }

  /* CARD */
  .ipx-card {
    position: relative;
    padding: 28px 26px;
    background:
      radial-gradient(ellipse 90% 75% at 8% 6%, rgba(192,132,252,0.28) 0%, rgba(168,85,247,0.14) 28%, transparent 60%),
      radial-gradient(ellipse 80% 70% at 95% 95%, rgba(125,62,234,0.22) 0%, rgba(99,38,191,0.10) 35%, transparent 65%),
      radial-gradient(ellipse 60% 60% at 50% 50%, rgba(91,42,140,0.12) 0%, transparent 70%),
      linear-gradient(135deg, #1a0c30 0%, #20103e 50%, #2a1554 100%);
    border: 1px solid rgba(168,85,247,0.14);
    border-radius: 14px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  .ipx-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 30px rgba(168,85,247,0.05);
    pointer-events: none;
  }
  .ipx-card:hover {
    border-color: rgba(217,134,255,0.45);
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(125,62,234,0.32);
  }
  .ipx-card .name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
  }
  .ipx-card .subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #a89bce;
    line-height: 1.5;
    letter-spacing: 0.1px;
    position: relative;
    z-index: 1;
    max-width: 95%;
  }

  /* Wave decoration */
  .ipx-card .wave-decor {
    position: absolute;
    right: -16px;
    bottom: -10px;
    width: 200px;
    height: 130px;
    pointer-events: none;
    z-index: 0;
  }
  .ipx-card.h-2 .wave-decor {
    right: -10px;
    top: -10px;
    bottom: auto;
    width: 130px;
    height: 200px;
  }
  .ipx-card.w-1:not(.h-2) .wave-decor {
    right: -30px;
    width: 160px;
    height: 100px;
  }

  /* Glowing dot */
  .ipx-card .dot-accent {
    position: absolute;
    top: 14px; right: 14px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #d986ff;
    box-shadow:
      0 0 6px rgba(217,134,255,0.85),
      0 0 14px rgba(168,85,247,0.6),
      0 0 24px rgba(168,85,247,0.3);
    z-index: 3;
  }

  /* Footer (Stronger Together caption) */
  .ipx-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding-right: 6px;
  }
  .ipx-footer-text-main {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.1px;
    line-height: 1.2;
  }
  .ipx-footer-text-sub {
    font-size: 12px;
    color: #a89bce;
    line-height: 1.3;
    margin-top: 2px;
  }

  /* Legal disclaimer */
  .ipx-disclaimer {
    text-align: center;
    color: var(--ipx-text-faint);
    font-size: 11px;
    margin: 24px auto 0;
    max-width: 720px;
    line-height: 1.5;
  }

  /* ===== /clients/ brand-template overrides (Union/Zoom learnings), tuned to MIX purple ===== */

  /* Hide Bitrix-auto-rendered page-title H1 (body has its own hero H1). */
  .union-content.inner-page-content > h1.text-center {
    display: none !important;
  }

  /* Top header bar */
  html body .header-info .header-city,
  html body .header-info .header-city a,
  html body .header-info .header-city .marker-img,
  html body .header-info .header-city i.fa {
    color: var(--purple-light) !important;
  }
  html body .header-info .head-phone,
  html body .header-info .head-phone a {
    color: #ffffff !important;
  }
  html body .header-info .head-phone a:hover {
    color: var(--purple-light) !important;
  }

  /* Top-level nav links white on dark bg; dropdown sub-items stay dark on light dropdown panel. */
  html body .main-nav .nav-link,
  html body .main-nav .nav-link:visited,
  html body .main-nav .dropdown-mark {
    color: #ffffff !important;
  }
  html body .main-nav .nav-link:hover,
  html body .main-nav .nav-link:focus {
    color: var(--purple-light) !important;
  }
  html body .main-nav .dropdown-content a,
  html body .main-nav .dropdown-content a:visited,
  html body .main-nav .dropdown-content li {
    color: #1a1a1a !important;
  }
  html body .main-nav .dropdown-content a:hover,
  html body .main-nav .dropdown-content a:focus {
    color: var(--purple-deep) !important;
  }
  html body .main-nav .navbar-city,
  html body #navbar-collapse .navbar-city {
    color: var(--purple-light) !important;
  }

  /* Mobile hamburger icon visible on dark bg. */
  html body .header__burger span,
  html body .header__burger span::before,
  html body .header__burger span::after,
  html body .header__burger::before,
  html body .header__burger::after {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }

  /* "Open 24/7" label */
  html body .open24 {
    color: #ffffff !important;
  }

  /* Section spacing tweaks (per latest user request, applied to /clients/ across brands):
     larger kickers and more breathing room before/after each section. */
  .section-title .kicker {
    font-size: 15px !important;
    letter-spacing: 4px !important;
  }
  .section-title {
    margin-top: 140px !important;
    margin-bottom: 60px !important;
  }
  .section-title p {
    margin-bottom: 32px !important;
  }
  @media (max-width: 768px) {
    .section-title .kicker {
      font-size: 13px !important;
      letter-spacing: 3px !important;
    }
    .section-title {
      margin-top: 70px !important;
      margin-bottom: 36px !important;
    }
    .section-title p {
      margin-bottom: 24px !important;
    }
  }

  /* User-requested 2026-05-27: bigger + white text on IG/follower/stat badges across all artist cards. */
  html body .badge,
  html body .badge-ig,
  html body .badge-sp,
  html body .badge-gold {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    letter-spacing: 0.4px !important;
  }
  @media (max-width: 768px) {
    html body .badge,
    html body .badge-ig,
    html body .badge-sp,
    html body .badge-gold {
      font-size: 12px !important;
      padding: 3px 8px !important;
    }
  }

  /* User-requested 2026-05-27: prevent long badge text (e.g. "9.2M Spotify · RIAA Platinum")
     from overflowing the artist card on desktop. Let it wrap inside the pill. */
  html body .artist-card .badge,
  html body .artist-card .badge-ig,
  html body .artist-card .badge-sp,
  html body .artist-card .badge-gold {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
  }

/* End */
/* /clients/inline_styles.css?177985628033159 */