/* ================================================================
   CollabClub — Web3 Visual Layer v2
   Particles · Glassmorphism · Neon Glows · Aurora · Scroll Reveals
   Gradient Mesh · Magnetic Buttons · Animated Borders · Counters
   ================================================================ */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --cc-pink:         #FF2D78;
  --cc-pink-light:   #FF6EC7;
  --cc-purple:       #C850C0;
  --cc-violet:       #7B2FBE;
  --cc-dark:         #0A0A18;
  --cc-dark-2:       #10102A;
  --cc-dark-3:       #18183A;
  --cc-glass:        rgba(255,255,255,0.055);
  --cc-glass-border: rgba(255,255,255,0.10);
  --cc-neon:         0 0 18px rgba(255,45,120,0.55), 0 0 50px rgba(255,45,120,0.2);
  --cc-neon-sm:      0 0 10px rgba(255,45,120,0.4), 0 0 25px rgba(255,45,120,0.15);
  --cc-text:         #f0f0f8;
  --cc-muted:        rgba(240,240,248,0.55);
  --cc-ease:         cubic-bezier(0.23,1,0.32,1);
  --cc-r:            16px;
  --cc-r-lg:         24px;
}

/* ── GLOBAL BASE ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--cc-dark) !important;
  color: var(--cc-text) !important;
  overflow-x: hidden;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Animated gradient mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 80% 60% at 15% 15%, rgba(255,45,120,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 85% 85%, rgba(200,80,192,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(123,47,190,0.07) 0%, transparent 70%),
    var(--cc-dark);
  background-size: 100% 100%;
  animation: ccMesh 16s ease-in-out infinite alternate;
}

@keyframes ccMesh {
  0%   { filter: hue-rotate(0deg);   }
  50%  { filter: hue-rotate(15deg);  }
  100% { filter: hue-rotate(-10deg); }
}

/* Dot-grid overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cc-dark-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cc-pink), var(--cc-purple));
  border-radius: 3px;
}
::selection { background: rgba(255,45,120,0.28); color: #fff; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 {
  background: linear-gradient(135deg, #fff 0%, #FFB3D9 40%, var(--cc-pink) 80%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% 200% !important;
  animation: ccGradShift 7s ease infinite !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
@keyframes ccGradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

h2 {
  color: var(--cc-text) !important;
  letter-spacing: -0.015em !important;
}
h3, h4 { color: var(--cc-text) !important; }
p, li   { color: var(--cc-muted) !important; line-height: 1.75 !important; }

a:not([class*="btn"]):not([class*="button"]):not([class*="nectar"]):not([class*="vc_btn"]) {
  color: var(--cc-pink-light) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}
a:not([class*="btn"]):not([class*="button"]):not([class*="nectar"]):not([class*="vc_btn"]):hover {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,110,199,0.5);
}

/* ── HEADER — AURORA GLASS ───────────────────────────────── */
#header-outer {
  background: rgba(10,10,24,0.72) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,45,120,0.12) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,45,120,0.08) !important;
  transition: background 0.4s var(--cc-ease), box-shadow 0.4s var(--cc-ease) !important;
}
#header-outer.cc-header-scrolled {
  background: rgba(10,10,24,0.94) !important;
  box-shadow: 0 8px 50px rgba(0,0,0,0.6), 0 1px 0 rgba(255,45,120,0.15) !important;
}

/* Logo SVG glow - applied to SVG directly, not anchor (Safari-safe) */
#logo a svg, #logo svg {
  -webkit-filter: drop-shadow(0 0 8px rgba(255,45,120,0.55)) !important;
  filter: drop-shadow(0 0 8px rgba(255,45,120,0.55)) !important;
  transition: -webkit-filter 0.3s ease, filter 0.3s ease !important;
}
#logo a:hover svg, #logo:hover svg {
  -webkit-filter: drop-shadow(0 0 18px rgba(255,110,199,0.9)) !important;
  filter: drop-shadow(0 0 18px rgba(255,110,199,0.9)) !important;
}

/* Nav links */
#top-nav ul > li > a,
.sf-menu > li > a {
  color: rgba(240,240,248,0.85) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  transition: color 0.25s ease, text-shadow 0.25s ease !important;
  position: relative;
}
#top-nav ul > li > a::after,
.sf-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--cc-pink), var(--cc-pink-light));
  border-radius: 2px;
  transition: width 0.3s var(--cc-ease);
}
#top-nav ul > li > a:hover::after,
.sf-menu > li > a:hover::after { width: 100%; }
#top-nav ul > li > a:hover,
.sf-menu > li > a:hover {
  color: var(--cc-pink-light) !important;
  text-shadow: 0 0 14px rgba(255,110,199,0.5);
}

/* ── HERO SECTION ────────────────────────────────────────── */
.wpb_row:first-of-type,
.vc_row:first-of-type {
  position: relative;
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: center;
}

/* Aurora blobs */
.wpb_row:first-of-type::before {
  content: '';
  position: absolute;
  top: -20%; left: -15%;
  width: 65%; height: 90%;
  background: radial-gradient(ellipse, rgba(255,45,120,0.16) 0%, transparent 70%);
  animation: ccAurora1 10s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}
.wpb_row:first-of-type::after {
  content: '';
  position: absolute;
  bottom: -20%; right: -15%;
  width: 55%; height: 80%;
  background: radial-gradient(ellipse, rgba(200,80,192,0.12) 0%, transparent 70%);
  animation: ccAurora2 13s ease-in-out infinite alternate-reverse;
  pointer-events: none; z-index: 0;
}
@keyframes ccAurora1 {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  100% { transform: translate(6%,4%) scale(1.08) rotate(5deg); }
}
@keyframes ccAurora2 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-5%,5%) scale(1.06); }
}

/* ── BUTTONS — NEON GLOW + SHIMMER ──────────────────────── */
.vc_btn3,
.nectar-button,
a.button,
.cc-btn,
button.cc-btn {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--cc-pink) 0%, var(--cc-purple) 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  padding: 14px 32px !important;
  box-shadow: var(--cc-neon) !important;
  transition: transform 0.3s var(--cc-ease), box-shadow 0.3s var(--cc-ease) !important;
  cursor: pointer;
  z-index: 1;
}
/* Shimmer sweep */
.vc_btn3::before,
.nectar-button::before,
a.button::before,
.cc-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  z-index: 2; pointer-events: none;
}
.vc_btn3:hover::before,
.nectar-button:hover::before,
a.button:hover::before,
.cc-btn:hover::before { left: 160%; }

.vc_btn3:hover,
.nectar-button:hover,
a.button:hover,
.cc-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 0 35px rgba(255,45,120,0.75), 0 0 90px rgba(255,45,120,0.28), 0 10px 35px rgba(0,0,0,0.35) !important;
}

/* Outline variant */
.vc_btn3.vc_btn3-style-outline,
a.button.outline {
  background: transparent !important;
  border: 2px solid var(--cc-pink) !important;
  color: var(--cc-pink) !important;
  box-shadow: var(--cc-neon-sm) !important;
}
.vc_btn3.vc_btn3-style-outline:hover,
a.button.outline:hover {
  background: var(--cc-pink) !important;
  color: #fff !important;
  box-shadow: var(--cc-neon) !important;
}

/* ── GLASS CARDS ─────────────────────────────────────────── */
.cc-glass,
.cc-feature-card,
.cc-pricing-card,
.cc-testimonial-card,
.cc-step-card {
  background: var(--cc-glass) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid var(--cc-glass-border) !important;
  border-radius: var(--cc-r-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transition: transform 0.4s var(--cc-ease), box-shadow 0.4s var(--cc-ease), border-color 0.4s ease !important;
  position: relative;
  overflow: hidden;
}
/* Top shimmer line */
.cc-glass::before,
.cc-feature-card::before,
.cc-pricing-card::before,
.cc-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,45,120,0.5), rgba(200,80,192,0.4), transparent);
  pointer-events: none;
}
.cc-glass:hover,
.cc-feature-card:hover,
.cc-pricing-card:hover,
.cc-step-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(255,45,120,0.22) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,45,120,0.18), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ── WPBakery ROWS — SECTION STYLING ─────────────────────── */
.wpb_row,
.vc_row {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Hero row: no top padding — it has its own internal padding */
.wpb_row:first-child,
.vc_row-fluid:first-child,
.wpb_row.cc-hero-row {
  padding-top: 0 !important;
}
/* Alternating subtle bg tint */
.wpb_row:nth-child(even),
.vc_row:nth-child(even) {
  background: rgba(255,255,255,0.012) !important;
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.cc-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.75s var(--cc-ease), transform 0.75s var(--cc-ease);
}
.cc-reveal-left {
  opacity: 0;
  transform: translateX(-38px);
  transition: opacity 0.75s var(--cc-ease), transform 0.75s var(--cc-ease);
}
.cc-reveal-right {
  opacity: 0;
  transform: translateX(38px);
  transition: opacity 0.75s var(--cc-ease), transform 0.75s var(--cc-ease);
}
.cc-reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.65s var(--cc-ease), transform 0.65s var(--cc-ease);
}
.cc-reveal.cc-visible,
.cc-reveal-left.cc-visible,
.cc-reveal-right.cc-visible,
.cc-reveal-scale.cc-visible {
  opacity: 1 !important;
  transform: none !important;
}
.cc-delay-1 { transition-delay: 0.08s !important; }
.cc-delay-2 { transition-delay: 0.18s !important; }
.cc-delay-3 { transition-delay: 0.28s !important; }
.cc-delay-4 { transition-delay: 0.38s !important; }
.cc-delay-5 { transition-delay: 0.50s !important; }

/* ── STAT NUMBERS ────────────────────────────────────────── */
.cc-stat-number,
[data-cc-count] {
  font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #fff 0%, var(--cc-pink-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
  animation: ccCountGlow 3s ease-in-out infinite alternate !important;
}
@keyframes ccCountGlow {
  from { filter: drop-shadow(0 0 4px rgba(255,110,199,0.3)); }
  to   { filter: drop-shadow(0 0 14px rgba(255,110,199,0.75)); }
}

/* ── PRICING CARDS ───────────────────────────────────────── */
.cc-pricing-card {
  padding: 40px 32px !important;
  text-align: center;
}
.cc-pricing-card.featured,
.cc-pricing-card.cc-featured {
  border-color: var(--cc-pink) !important;
  box-shadow: var(--cc-neon), 0 20px 60px rgba(0,0,0,0.4) !important;
  background: linear-gradient(145deg, rgba(255,45,120,0.07), rgba(18,18,42,0.9)) !important;
}
.cc-pricing-card.featured::after,
.cc-pricing-card.cc-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,45,120,0.05) 0%, transparent 60%);
  pointer-events: none; border-radius: inherit;
}

/* ── TESTIMONIAL CARDS ───────────────────────────────────── */
.cc-testimonial-card {
  padding: 32px !important;
}
.cc-testimonial-card::after {
  content: '\201C';
  position: absolute;
  top: 12px; left: 20px;
  font-size: 90px; line-height: 1;
  color: var(--cc-pink); opacity: 0.15;
  font-family: Georgia, serif;
  pointer-events: none;
}

/* ── SWIPE CARDS — ENHANCED ──────────────────────────────── */
.cc-swipe-card {
  background: linear-gradient(145deg, rgba(24,24,58,0.97), rgba(16,16,42,0.99)) !important;
  border: 1px solid rgba(255,45,120,0.18) !important;
  border-radius: 22px !important;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,45,120,0.08),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.cc-swipe-card .cc-brand-logo-placeholder {
  background: linear-gradient(135deg, var(--cc-dark-3), var(--cc-dark-2)) !important;
  border-bottom: 1px solid rgba(255,45,120,0.12) !important;
}

/* Like/Skip buttons */
.cc-swipe-actions button {
  border-radius: 50% !important;
  width: 58px !important; height: 58px !important;
  font-size: 24px !important;
  transition: all 0.25s var(--cc-ease) !important;
  border: none !important;
}
.cc-swipe-actions button:first-child {
  background: rgba(255,45,120,0.08) !important;
  border: 2px solid var(--cc-pink) !important;
  box-shadow: 0 0 18px rgba(255,45,120,0.2) !important;
}
.cc-swipe-actions button:last-child {
  background: linear-gradient(135deg, var(--cc-pink), var(--cc-purple)) !important;
  box-shadow: var(--cc-neon-sm) !important;
}
.cc-swipe-actions button:hover {
  transform: scale(1.18) !important;
  box-shadow: var(--cc-neon) !important;
}

/* ── NEON PULSE RING ─────────────────────────────────────── */
@keyframes ccNeonPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,120,0.4), 0 0 20px rgba(255,45,120,0.15); }
  50%       { box-shadow: 0 0 0 14px rgba(255,45,120,0), 0 0 45px rgba(255,45,120,0.4); }
}
.cc-pulse { animation: ccNeonPulse 2.8s ease-in-out infinite !important; }

/* ── ANIMATED BORDER GRADIENT ────────────────────────────── */
@keyframes ccBorderRot {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cc-border-anim {
  position: relative; border-radius: var(--cc-r-lg);
}
.cc-border-anim::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--cc-pink), var(--cc-purple), var(--cc-violet), var(--cc-pink));
  background-size: 300% 300%;
  animation: ccBorderRot 4s ease infinite;
  z-index: -1; opacity: 0.65;
}

/* ── BADGE / CHIP ────────────────────────────────────────── */
.cc-badge, .cc-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(255,45,120,0.1);
  border: 1px solid rgba(255,45,120,0.28);
  color: var(--cc-pink-light);
  box-shadow: 0 0 10px rgba(255,45,120,0.1);
}

/* ── FORMS ───────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
textarea, select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 12px !important;
  color: var(--cc-text) !important;
  padding: 14px 18px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--cc-pink) !important;
  box-shadow: 0 0 0 3px rgba(255,45,120,0.14), 0 0 22px rgba(255,45,120,0.1) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--cc-muted) !important; }

/* ── FOOTER ──────────────────────────────────────────────── */
#footer-outer {
  background: rgba(6,6,16,0.98) !important;
  border-top: 1px solid rgba(255,45,120,0.12) !important;
  box-shadow: 0 -4px 50px rgba(0,0,0,0.55) !important;
}
#footer-outer p, #footer-outer a { color: var(--cc-muted) !important; }
#footer-outer a:hover { color: var(--cc-pink-light) !important; }

/* ── PAGE HEADER ─────────────────────────────────────────── */
#page-header-bg,
.page-header-no-bg {
  background: var(--cc-dark) !important;
}
#page-header-wrap h1 {
  text-shadow: 0 0 40px rgba(255,45,120,0.3) !important;
}

/* ── BRAND DIRECTORY GRID ────────────────────────────────── */
.cc-brand-grid {
  display: block;
}
.cc-brand-grid-item {
  background: var(--cc-glass);
  border: 1px solid var(--cc-glass-border);
  border-radius: var(--cc-r-lg);
  padding: 28px 24px;
  transition: transform 0.35s var(--cc-ease), box-shadow 0.35s var(--cc-ease), border-color 0.35s ease;
  position: relative; overflow: hidden;
  cursor: pointer;
}
.cc-brand-grid-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,45,120,0.4), transparent);
}
.cc-brand-grid-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255,45,120,0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,45,120,0.15);
}
.cc-brand-logo-wrap {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-size: 26px;
  transition: box-shadow 0.3s ease;
}
.cc-brand-grid-item:hover .cc-brand-logo-wrap {
  box-shadow: 0 0 20px rgba(255,45,120,0.3);
}
.cc-brand-name {
  font-size: 16px; font-weight: 700;
  color: var(--cc-text) !important;
  margin-bottom: 6px;
}
.cc-brand-category {
  font-size: 12px; font-weight: 600;
  color: var(--cc-pink-light) !important;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.cc-brand-tagline {
  font-size: 13px;
  color: var(--cc-muted) !important;
  margin-top: 8px; line-height: 1.5;
}

/* ── SECTION HEADINGS — PILL LABEL ──────────────────────── */
.cc-section-label {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,45,120,0.1);
  border: 1px solid rgba(255,45,120,0.25);
  color: var(--cc-pink);
  margin-bottom: 16px;
  animation: ccNeonPulse 3s ease-in-out infinite;
}

/* ── NECTAR ICON LIST ────────────────────────────────────── */
.nectar-icon-list-item {
  background: var(--cc-glass) !important;
  border: 1px solid var(--cc-glass-border) !important;
  border-radius: var(--cc-r) !important;
  padding: 24px !important;
  transition: transform 0.35s var(--cc-ease), box-shadow 0.35s var(--cc-ease) !important;
}
.nectar-icon-list-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,45,120,0.15) !important;
}
.nectar-icon-list-item .icon-color { color: var(--cc-pink) !important; }

/* ── SALIENT COLUMN INNER ────────────────────────────────── */
.vc_column-inner { position: relative; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .wpb_row:first-of-type { min-height: auto !important; padding-top: 60px !important; padding-bottom: 40px !important; }
  .wpb_row, .vc_row { padding-top: 50px !important; padding-bottom: 50px !important; }
  h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .cc-brand-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}
@media (max-width: 480px) {
  .cc-swipe-card { border-radius: 18px !important; }
}

/* ── CURSOR GLOW ─────────────────────────────────────────── */
#cc-cursor-glow {
  position: fixed;
  width: 280px; height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(255,45,120,0.07) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* ── LOADING SHIMMER ─────────────────────────────────────── */
@keyframes ccShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.cc-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: ccShimmer 1.6s infinite;
  border-radius: 8px;
}

/* ── GLOW DIVIDER ────────────────────────────────────────── */
.cc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cc-pink), var(--cc-purple), transparent);
  margin: 64px 0; position: relative;
}
.cc-divider::after {
  content: '';
  position: absolute; top: -2px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 5px;
  background: var(--cc-pink);
  border-radius: 3px;
  box-shadow: var(--cc-neon-sm);
}

/* ── FLOATING LABEL ABOVE HERO ───────────────────────────── */
.cc-hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px;
  border-radius: 50px;
  background: rgba(255,45,120,0.08);
  border: 1px solid rgba(255,45,120,0.22);
  color: var(--cc-pink-light) !important;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  animation: ccFloatLabel 4s ease-in-out infinite;
}
.cc-hero-label::before {
  content: '✦';
  color: var(--cc-pink);
  animation: ccSpin 3s linear infinite;
  display: inline-block;
}
@keyframes ccFloatLabel {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes ccSpin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   CC-FEATURES GRID — SVG Line Icons, No Emoji
   ══════════════════════════════════════════════════════════════ */

.cc-features-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.cc-features-title {
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin-bottom: 0.4em !important;
}

.cc-features-subtitle {
  text-align: center;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--cc-pink) !important;
  margin-bottom: 2.5rem !important;
}

/* ── Grid ── */
.cc-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 2rem;
}

.cc-features-cols-2 .cc-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
.cc-features-cols-4 .cc-features-grid { grid-template-columns: repeat(4, 1fr) !important; }
.cc-features-cols-6 .cc-features-grid { grid-template-columns: repeat(6, 1fr) !important; }

@media (max-width: 900px) {
  .cc-features-grid,
  .cc-features-cols-4 .cc-features-grid,
  .cc-features-cols-6 .cc-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .cc-features-grid,
  .cc-features-cols-2 .cc-features-grid,
  .cc-features-cols-4 .cc-features-grid,
  .cc-features-cols-6 .cc-features-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Feature Item Card ── */
.cc-feature-item {
  background: var(--cc-glass) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid var(--cc-glass-border) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--cc-ease), box-shadow 0.4s var(--cc-ease), border-color 0.4s ease !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* Top shimmer line */
.cc-feature-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,45,120,0.5), rgba(200,80,192,0.4), transparent);
  pointer-events: none;
}

.cc-feature-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255,45,120,0.25) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,45,120,0.2) !important;
}

/* ── Icon Wrap ── */
.cc-feature-icon-wrap {
  margin-bottom: 20px;
}

.cc-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,45,120,0.08);
  border: 1px solid rgba(255,45,120,0.18);
  position: relative;
}

.cc-feature-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke: var(--cc-pink) !important;
  fill: none !important;
  filter: drop-shadow(0 0 6px rgba(255,45,120,0.5));
  transition: filter 0.3s ease, stroke 0.3s ease;
}

.cc-feature-item:hover .cc-feature-icon svg {
  filter: drop-shadow(0 0 10px rgba(255,45,120,0.8));
  stroke: var(--cc-pink-light) !important;
}

/* Animated icon glow ring */
.cc-feature-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: conic-gradient(from 0deg, rgba(255,45,120,0.3), rgba(123,47,190,0.2), rgba(255,45,120,0.3));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.cc-feature-item:hover .cc-feature-icon::after {
  opacity: 1;
  animation: ccIconSpin 3s linear infinite;
}

@keyframes ccIconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Feature Text ── */
.cc-feature-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}

.cc-feature-desc {
  font-size: 0.9rem !important;
  color: var(--cc-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION TITLE
   ══════════════════════════════════════════════════════════════ */
.cc-section-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin-bottom: 2rem !important;
}

/* ══════════════════════════════════════════════════════════════
   JOIN PAGE CARDS
   ══════════════════════════════════════════════════════════════ */
.cc-join-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 800px;
  margin: 3rem auto 0;
}

@media (max-width: 600px) {
  .cc-join-cards { grid-template-columns: 1fr; }
}

.cc-join-card {
  padding: 40px 32px;
  text-align: center;
  border-radius: 24px;
}

.cc-join-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255,45,120,0.08);
  border: 1px solid rgba(255,45,120,0.2);
  margin: 0 auto 20px;
}

.cc-join-card h3 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin-bottom: 12px !important;
}

.cc-join-card p {
  color: var(--cc-muted) !important;
  font-size: 0.95rem !important;
  margin-bottom: 24px !important;
}

/* ══════════════════════════════════════════════════════════════
   FAQ PAGE
   ══════════════════════════════════════════════════════════════ */
.cc-faq-list {
  max-width: 800px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-faq-item {
  padding: 28px 32px;
  border-radius: 18px;
  cursor: pointer;
}

.cc-faq-q {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin: 0 0 10px 0 !important;
}

.cc-faq-a {
  font-size: 0.92rem !important;
  color: var(--cc-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════ */
.cc-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 3rem auto 0;
}

@media (max-width: 700px) {
  .cc-contact-grid { grid-template-columns: 1fr; }
}

.cc-contact-card {
  padding: 32px 24px;
  text-align: center;
  border-radius: 20px;
}

.cc-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,45,120,0.08);
  border: 1px solid rgba(255,45,120,0.2);
  margin: 0 auto 16px;
}

.cc-contact-card h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin-bottom: 8px !important;
}

.cc-contact-card p {
  color: var(--cc-pink) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   BRAND DIRECTORY GRID
   ══════════════════════════════════════════════════════════════ */
.cc-brand-grid {
  display: block !important;
  margin-top: 2rem;
}

.cc-brand-grid .cc-grid-inner,
.cc-influencer-grid .cc-grid-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Force 3-column grid regardless of container width */
.cc-grid-cols-3 .cc-grid-inner {
  grid-template-columns: repeat(3, 1fr) !important;
}

.cc-brand-card {
  background: var(--cc-glass) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid var(--cc-glass-border) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  transition: transform 0.3s var(--cc-ease), box-shadow 0.3s ease !important;
  overflow: hidden;
  position: relative;
}

.cc-brand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,45,120,0.4), transparent);
}

.cc-brand-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,45,120,0.2) !important;
}

.cc-brand-card-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255,255,255,0.05);
  padding: 8px;
  margin-bottom: 14px;
}

.cc-brand-card-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cc-text) !important;
  margin-bottom: 6px !important;
}

.cc-brand-card-cat {
  font-size: 0.75rem !important;
  color: var(--cc-pink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   SWIPE CARD — BRAND IMAGE DISPLAY
   ══════════════════════════════════════════════════════════════ */
.cc-disc-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  display: block;
}

.cc-disc-card-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,0.08);
  padding: 6px;
  position: absolute;
  top: 16px;
  right: 16px;
  border: 1px solid rgba(255,255,255,0.12);
}

.cc-disc-card-placeholder {
  width: 100%;
  height: 220px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,45,120,0.15), rgba(123,47,190,0.15));
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(255,255,255,0.3);
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════
   NECTAR ICON LIST OVERRIDE — Remove emoji stacked boxes
   ══════════════════════════════════════════════════════════════ */
.nectar-icon-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nectar-icon-list-item {
  background: var(--cc-glass) !important;
  border: 1px solid var(--cc-glass-border) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  transition: transform 0.3s var(--cc-ease) !important;
}

.nectar-icon-list-item:hover {
  transform: translateY(-4px) !important;
}

.nectar-icon-list-item .icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,45,120,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nectar-icon-list-item .icon-wrap i,
.nectar-icon-list-item .icon-wrap svg {
  color: var(--cc-pink) !important;
  fill: none !important;
  stroke: var(--cc-pink) !important;
  font-size: 20px !important;
}

/* ══════════════════════════════════════════════════════════════
   ANIMATED NEON BORDER ON HOVER FOR GLASS CARDS
   ══════════════════════════════════════════════════════════════ */
@keyframes ccBorderGlow {
  0%, 100% { border-color: rgba(255,45,120,0.15); }
  50%       { border-color: rgba(255,45,120,0.4); }
}

.cc-feature-item:hover,
.cc-faq-item:hover,
.cc-join-card:hover,
.cc-contact-card:hover {
  animation: ccBorderGlow 2s ease-in-out infinite;
}

/* ============================================================
   CC FEATURES GRID — SVG LINE ICON CARDS
   ============================================================ */
.cc-features-wrap {
  width: 100%;
  padding: 60px 0 40px;
}
.cc-features-title {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.cc-features-subtitle {
  text-align: center;
  color: rgba(232,232,240,0.65);
  font-size: 1rem;
  margin-bottom: 40px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cc-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}
.cc-features-cols-2 .cc-features-grid { grid-template-columns: repeat(2, 1fr); }
.cc-features-cols-3 .cc-features-grid { grid-template-columns: repeat(3, 1fr); }
.cc-features-cols-4 .cc-features-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cc-features-cols-3 .cc-features-grid,
  .cc-features-cols-4 .cc-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cc-features-grid,
  .cc-features-cols-2 .cc-features-grid,
  .cc-features-cols-3 .cc-features-grid,
  .cc-features-cols-4 .cc-features-grid { grid-template-columns: 1fr; }
}

.cc-feature-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,45,120,0.18);
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cc-feature-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #FF2D78, #7B2FFF);
  opacity: 0;
  transition: opacity .25s ease;
}
.cc-feature-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255,45,120,0.45);
  box-shadow: 0 12px 40px rgba(255,45,120,0.18);
}
.cc-feature-item:hover::before { opacity: 1; }

.cc-feature-icon-wrap {
  margin-bottom: 16px;
}
.cc-feature-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,45,120,0.12);
  border: 1px solid rgba(255,45,120,0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, box-shadow .25s ease;
}
.cc-feature-item:hover .cc-feature-icon {
  background: rgba(255,45,120,0.22);
  box-shadow: 0 0 16px rgba(255,45,120,0.35);
}
.cc-feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: #FF2D78;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255,45,120,0.5));
  transition: filter .25s ease, stroke .25s ease;
}
.cc-feature-item:hover .cc-feature-icon svg {
  stroke: #ff5fa0;
  filter: drop-shadow(0 0 8px rgba(255,45,120,0.8));
}

.cc-feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.cc-feature-desc {
  font-size: 0.88rem;
  color: rgba(232,232,240,0.65);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   OVERRIDE: Kill the old Nectar icon list stacked boxes
   ============================================================ */
.nectar-icon-list .nectar-icon-list-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.nectar-icon-list {
  background: transparent !important;
}
/* Kill WPBakery row default white bg */
.vc_row .row-bg,
.vc_row-has-fill > .vc_column_container > .vc_column-inner {
  background: transparent !important;
}

/* ============================================================
   FULL-WIDTH FIX — Force Salient span_12 to 100% on all rows
   ============================================================ */
.wpb_row .row_col_wrap_12.span_12,
.vc_row  .row_col_wrap_12.span_12,
.wpb_row .col.span_12,
.vc_row  .col.span_12 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
.wpb_row .wpb_column.vc_col-sm-12,
.vc_row  .wpb_column.vc_col-sm-12 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
/* Also fix the inner column container */
.vc_col-sm-12 > .vc_column-inner {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   HERO — Two-column layout: text left, phone mockup right
   ============================================================ */
.cc-hero-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  box-sizing: border-box;
  min-height: 0;
}
.cc-hero-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}
.cc-hero-phone-col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.cc-hero-phone-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 36px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,45,120,0.15),
    0 0 60px rgba(255,45,120,0.12);
  animation: ccPhoneFloat 5s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes ccPhoneFloat {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}
.cc-hero-phone-col::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,120,0.22) 0%, transparent 70%);
  animation: ccPhoneGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes ccPhoneGlow {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1;   }
}
@media (max-width: 900px) {
  .cc-hero-two-col {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 24px;
    gap: 32px;
  }
  .cc-hero-text-col { align-items: center; }
  .cc-hero-phone-col { order: -1; }
  .cc-hero-phone-img { max-width: 240px; }
}

/* ============================================================
   INFLUENCER STRIP — Infinite horizontal marquee carousel
   ============================================================ */
.cc-influencer-strip {
  width: 100%;
  overflow: hidden;
  padding: 48px 0 40px;
  /* Edge fade masks */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* The scrolling track — contains two identical sets of cards */
.cc-influencer-strip-inner {
  display: -webkit-flex;
  display: flex;
  gap: 16px;
  width: -webkit-max-content;
  width: max-content;
  -webkit-animation: ccMarquee 28s linear infinite;
          animation: ccMarquee 28s linear infinite;
  max-width: none;
  margin: 0;
  padding: 0;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  /* Safari GPU compositing — do NOT use will-change with -webkit-transform */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

/* Pause on hover (desktop) */
.cc-influencer-strip:hover .cc-influencer-strip-inner {
  animation-play-state: paused;
}

@-webkit-keyframes ccMarquee {
  0%   { -webkit-transform: translateX(0);    transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes ccMarquee {
  0%   { -webkit-transform: translateX(0);    transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

.cc-influencer-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  flex: 0 0 260px;          /* fixed width, no shrink/grow */
  width: 260px;
  height: 340px;
  background: var(--cc-dark-2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  transition: box-shadow 0.4s var(--cc-ease);
  /* Floating animation */
  opacity: 1 !important;
  -webkit-animation: ccCardFloat 4s ease-in-out infinite;
  animation: ccCardFloat 4s ease-in-out infinite;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* Stagger each card's float so they don't all move in sync */
.cc-influencer-card:nth-child(2n)   { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; }
.cc-influencer-card:nth-child(3n)   { -webkit-animation-delay: -2.6s; animation-delay: -2.6s; }
.cc-influencer-card:nth-child(4n)   { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.cc-influencer-card:nth-child(5n)   { -webkit-animation-delay: -3.1s; animation-delay: -3.1s; }
@-webkit-keyframes ccCardFloat {
  0%, 100% { -webkit-transform: translateY(0px) translateZ(0);    box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
  50%       { -webkit-transform: translateY(-10px) translateZ(0); box-shadow: 0 30px 65px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,45,120,0.12); }
}
@keyframes ccCardFloat {
  0%, 100% { transform: translateY(0px);    box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
  50%       { transform: translateY(-10px); box-shadow: 0 30px 65px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,45,120,0.12); }
}
.cc-influencer-card:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-transform: translateY(-10px) scale(1.03) translateZ(0);
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,45,120,0.25);
}
.cc-influencer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cc-influencer-card:hover img { transform: scale(1.07); }
.cc-influencer-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(10,10,24,0.92) 0%, transparent 100%);
}
.cc-influencer-card-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--cc-pink-light) !important;
  margin-bottom: 3px !important;
}
.cc-influencer-card-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* ============================================================
   SCROLL REVEAL — Imagery fade-in
   ============================================================ */
.cc-img-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.7s var(--cc-ease), transform 0.7s var(--cc-ease);
}
.cc-img-reveal.cc-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cc-img-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--cc-ease), transform 0.7s var(--cc-ease);
}
.cc-img-reveal-left.cc-visible {
  opacity: 1;
  transform: translateX(0);
}
.cc-img-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--cc-ease), transform 0.7s var(--cc-ease);
}
.cc-img-reveal-right.cc-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   MOBILE — Full-width sections
   ============================================================ */
@media (max-width: 768px) {
  /* ── Hero row: no massive blank space on mobile ── */
  .wpb_row:first-of-type,
  .vc_row:first-of-type {
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 20px !important;
  }

  .cc-hero-two-col { padding: 0 16px; }

  /* Marquee: slightly smaller cards on mobile, faster scroll */
  .cc-influencer-card {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: 270px !important;
  }
  .cc-influencer-strip-inner {
    gap: 12px !important;
    animation-duration: 20s !important;
  }

  /* Hide phone mockup on mobile — text only */
  .cc-hero-phone-col {
    display: none !important;
  }
  .cc-hero-two-col {
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: 0 20px;
  }
  .cc-hero-text-col {
    align-items: center !important;
  }

  /* ── Stats bar: ensure full width and visible on mobile ── */
  .cc-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }
  .cc-stats-bar-item {
    min-width: 0 !important;
    padding: 20px 12px !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .cc-stats-bar-item:nth-child(2n) { border-right: none !important; }
  .cc-stats-bar-item:nth-last-child(-n+2) { border-bottom: none !important; }

  /* ── Reduce all row padding on mobile ── */
  .wpb_row, .vc_row {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ============================================================
   MOBILE BUTTON FIX — Hero CTAs centered side-by-side
   ============================================================ */
@media (max-width: 768px) {
  /* Center the hero text column on mobile */
  .cc-hero-text-col {
    -webkit-align-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Center the cc-hero-btns wrapper */
  .cc-hero-btns {
    -webkit-justify-content: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Remove bottom padding from hero row to eliminate gap */
  .wpb_row:first-of-type,
  .vc_row:first-of-type {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Tighten the hero two-col padding on mobile */
  .cc-hero-two-col {
    padding: 20px 20px 0 !important;
  }
}

/* ============================================================
   SAFARI iOS — Marquee animation compatibility
   ============================================================ */
/* Safari sometimes needs explicit display on the strip container */
.cc-influencer-strip {
  display: block !important;
  overflow: hidden !important;
  -webkit-overflow-scrolling: touch;
}