@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

.nv-ref { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #1a1a2e; line-height: 1.6; }
.nv-ref a { color: inherit; text-decoration: none; }
.nv-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Override theme */
body, .qodef-page-title, #qodef-top-area, .qodef-header--standard #qodef-page-header,
#qodef-page-outer, #qodef-page-inner, .qodef-content-grid { background-color: #f5f4ef !important; }
.qodef-page-title, #qodef-top-area { display: none !important; }

/* Hero */
.nv-ref-hero { background: linear-gradient(180deg, #1a1f2e 0%, #252b3d 100%); padding: 120px 0 80px; text-align: center; }
.nv-ref-hero .nv-badge { display: inline-block; background: rgba(201,168,76,0.15); color: #c9a84c; padding: 6px 18px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; }
.nv-ref-hero h1 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; color: #ffffff; line-height: 1.15; margin-bottom: 20px; }
.nv-ref-hero h1 span { color: #c9a84c; }
.nv-ref-hero .nv-subtext { font-size: 17px; color: rgba(255,255,255,0.55); max-width: 600px; margin: 0 auto; line-height: 1.7; }


/* Filter */
.nv-ref-filter { padding: 40px 0 20px; }
.nv-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nv-filter-btn { background: #ffffff; border: 1px solid #e8e7e0; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: #4a4a5a; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.nv-filter-btn:hover { border-color: #c9a84c; color: #c9a84c; }
.nv-filter-btn.active { background: #c9a84c; color: #ffffff; border-color: #c9a84c; }

/* Cases Grid */
.nv-ref-cases { padding: 20px 0 60px; }
.nv-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.nv-case { display: block; background: #ffffff; border: 1px solid #e8e7e0; border-radius: 14px; padding: 28px; transition: all 0.3s; text-decoration: none !important; color: inherit !important; }
.nv-case:hover { border-color: rgba(201,168,76,0.4); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }

.nv-case-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.nv-case-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; background: rgba(201,168,76,0.1); color: #c9a84c; }
.nv-case-scope { font-size: 11px; font-weight: 700; color: #8a8a9a; }

.nv-case h3 { font-size: 20px; font-weight: 800; color: #1a1a2e; margin-bottom: 4px; line-height: 1.2; }
.nv-case-title { font-size: 14px; color: #4a4a5a; font-weight: 500; margin-bottom: 10px; }
.nv-case-desc { font-size: 13px; color: #8a8a9a; line-height: 1.6; margin-bottom: 16px; }

.nv-case-meta { display: flex; gap: 16px; margin-bottom: 14px; }
.nv-case-meta span { font-size: 12px; color: #8a8a9a; }

.nv-case-result { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(39,174,96,0.06); border-radius: 6px; font-size: 13px; font-weight: 700; color: #27ae60; }

/* Stats */
.nv-ref-stats { padding: 60px 0; background: #ffffff; }
.nv-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.nv-stat-num { display: block; font-size: 36px; font-weight: 800; color: #c9a84c; letter-spacing: -1px; margin-bottom: 4px; }
.nv-stat-lbl { font-size: 14px; color: #8a8a9a; }

/* CTA */
.nv-ref-cta { padding: 80px 0; }
.nv-ref-cta .nv-cta-box { background: linear-gradient(180deg, #1a1f2e 0%, #252b3d 100%); border-radius: 16px; padding: 60px 40px; text-align: center; }
.nv-ref-cta .nv-cta-box h2 { font-size: 28px; font-weight: 800; color: #ffffff; margin-bottom: 12px; }
.nv-ref-cta .nv-cta-box p { font-size: 16px; color: rgba(255,255,255,0.55); margin-bottom: 28px; }
.nv-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #c9a84c; color: #ffffff !important; padding: 16px 32px; border-radius: 8px; font-size: 16px; font-weight: 700; transition: all 0.25s; text-decoration: none !important; }
.nv-btn-primary:hover { background: #d4b85a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.3); }

/* Responsive */
@media (max-width: 900px) {
  .nv-cases-grid { grid-template-columns: repeat(2, 1fr); }
  .nv-stats-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .nv-cases-grid { grid-template-columns: 1fr; }
  .nv-stats-row { grid-template-columns: repeat(2, 1fr); }
  .nv-ref-hero { padding: 80px 0 50px; }
}

/* Fix Elementor grid interference */
.nv-ref { width: 100% !important; max-width: 100% !important; }
.nv-ref .nv-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; width: 100% !important; }
.nv-ref .nv-cases-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
.elementor-widget-container .nv-ref { display: block !important; }
.elementor-widget-container .nv-cases-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 900px) { .nv-ref .nv-cases-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .nv-ref .nv-cases-grid { grid-template-columns: 1fr !important; } }

/* Hero Logos */
.nv-hero-logos { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); }
.nv-hero-logos span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.3); letter-spacing: 1px; text-transform: uppercase; }




/* Logo Grid - Clean Version */
.nv-hero-logos-img {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
  padding: 24px 0 !important;
  max-width: 1000px;
  margin: 0 auto;
}
.nv-hero-logos-img img {
  width: 100% !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  padding: 10px 16px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  opacity: 0.5 !important;
  filter: grayscale(100%) brightness(2) !important;
  transition: all 0.3s ease !important;
}
.nv-hero-logos-img img:hover {
  opacity: 1 !important;
  filter: grayscale(0%) brightness(1) !important;
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(255,255,255,0.3) !important;
}
@media (max-width: 768px) {
  .nv-hero-logos-img { grid-template-columns: repeat(3, 1fr) !important; }
  .nv-hero-logos-img img { height: 40px !important; padding: 8px 12px !important; }
}

.nv-hero-logos-img { margin-top: 32px !important; }