.hero-dark {
  background: #0f172a;
  position: relative;
  overflow: hidden;
}
.hero-dark::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 120%;
  height: 80%;
  background:
    linear-gradient(135deg, transparent 30%, rgba(139, 92, 246, 0.15) 40%, transparent 50%),
    linear-gradient(160deg, transparent 35%, rgba(236, 72, 153, 0.12) 45%, transparent 55%),
    linear-gradient(180deg, transparent 25%, rgba(37, 99, 235, 0.1) 40%, transparent 55%),
    linear-gradient(200deg, transparent 30%, rgba(6, 182, 212, 0.1) 42%, transparent 54%),
    linear-gradient(145deg, transparent 20%, rgba(249, 115, 22, 0.08) 35%, transparent 50%);
  transform: rotate(-5deg);
  pointer-events: none;
  z-index: 0;
}
.hero-dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.8) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-glow-lines {
  position: absolute;
  top: -60px;
  left: -5%;
  right: -5%;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-glow-lines span {
  position: absolute;
  width: 110%;
  height: 2px;
  border-radius: 2px;
  filter: blur(1px);
}
.hero-glow-lines span:nth-child(1) { top: 40px; left: -5%; background: linear-gradient(90deg, transparent, #8b5cf6, #ec4899, transparent); transform: rotate(-3deg); }
.hero-glow-lines span:nth-child(2) { top: 70px; left: -3%; background: linear-gradient(90deg, transparent, #3b82f6, #06b6d4, transparent); transform: rotate(-2.5deg); }
.hero-glow-lines span:nth-child(3) { top: 100px; left: -8%; background: linear-gradient(90deg, transparent, #f97316, #eab308, transparent); transform: rotate(-2deg); }
.hero-glow-lines span:nth-child(4) { top: 130px; left: -2%; background: linear-gradient(90deg, transparent, #ec4899, #8b5cf6, transparent); transform: rotate(-1.5deg); }
.hero-glow-lines span:nth-child(5) { top: 160px; left: -6%; background: linear-gradient(90deg, transparent, #06b6d4, #3b82f6, transparent); transform: rotate(-1deg); }
.hero-glow-lines span:nth-child(6) { top: 190px; left: -4%; background: linear-gradient(90deg, transparent, #10b981, #06b6d4, transparent); transform: rotate(-0.5deg); }

.hero-stats-bar {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.hero-feature-item {
  border-left: 2px solid rgba(100, 116, 139, 0.3);
  transition: border-color 0.3s;
}
.hero-feature-item:hover {
  border-left-color: #3b82f6;
}

.dashboard-preview {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 12px;
  overflow: hidden;
}
.dashboard-preview-bar {
  background: rgba(30, 41, 59, 0.8);
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.product-tab {
  transition: all 0.2s;
}
.product-tab.active {
  background: #0f172a;
  color: #fff;
}


.use-case-card {
  transition: all 0.3s;
}
.use-case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.stat-flag {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.pipeline-accordion-btn .fa-plus {
  transition: transform 0.2s;
}
.pipeline-accordion-item.active .pipeline-accordion-btn .fa-plus {
  transform: rotate(45deg);
}
.pipeline-accordion-content {
  transition: max-height 0.3s ease;
}

.line-clamp-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.solution-tab-btn {
  background: transparent;
}
.solution-tab-btn.active {
  background: #111111;
  color: #ffffff;
}

.dashboard-device-phone {
  width: 108px;
  min-width: 108px;
  border-radius: 18px;
  background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
  padding: 6px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.dashboard-device-phone__top {
  margin: 2px auto 8px;
  width: 40px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-device-phone__screen {
  min-height: 276px;
  border-radius: 14px;
  background: linear-gradient(180deg, #171717 0%, #101010 100%);
  padding: 12px 10px;
  color: #ffffff;
}

.dashboard-device-phone__brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.dashboard-device-panel {
  width: min(100%, 394px);
  flex: 1;
  border-radius: 26px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.dashboard-device-panel__window {
  border-radius: 20px;
  border: 1px solid #ece8e2;
  background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
  padding: 16px;
}

.partner-marquee {
  overflow: hidden;
  position: relative;
}

.partner-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.partner-marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
}

.partner-logo {
  flex: 0 0 auto;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0.92;
}

.partner-logo--convergence,
.partner-logo--info-price,
.partner-logo--rtmp,
.partner-logo--gobble,
.partner-logo--roidynamic,
.partner-logo--insites,
.partner-logo--osint {
  font-family: "Inter", sans-serif;
}

.partner-marquee:focus,
.partner-marquee:hover {
  outline: none;
}

.free-tools-title {
  font-family: "Inter", sans-serif;
}
.free-tools-subtitle {
  font-family: "Inter", sans-serif;
}

.free-tools-scroll {
  scrollbar-width: none;
  overflow: hidden;
}
.free-tools-scroll::-webkit-scrollbar {
  display: none;
}
.free-tools-track {
  width: max-content;
  will-change: transform;
}
.free-tools-card {
  min-height: 140px;
  border-radius: 2px;
  box-shadow: none;
}
.free-tools-card:hover {
  border-color: #8b5cf6;
  box-shadow: none;
}
.free-tools-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e9efff 0%, #f3e8ff 100%);
  color: #8b5cf6;
  font-size: 0.95rem;
}
.free-tools-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: #222222;
}
.free-tools-card-link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: #a855f7;
}

.blog-preview-title,
.blog-preview-subtitle,
.blog-preview-column-title {
  font-family: "Inter", sans-serif;
}
.blog-preview-shell {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.blog-feature-image-wrap {
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
}
.blog-feature-image {
  display: block;
}
.blog-preview-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #e5e7eb;
  flex: none;
}
.blog-side-thumb {
  width: 72px;
  height: 72px;
  background: #f3f4f6;
  flex: none;
}
.blog-side-card {
  padding-bottom: 18px;
  border-bottom: 1px solid #ececec;
}
.blog-side-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.brand-hero-title,
.brand-hero-subtitle {
  font-family: "Inter", sans-serif;
}
.brand-hero-stats {
  max-width: 680px;
}
.brand-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-hero-stat-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid #b59ad6;
  color: #b59ad6;
  font-size: 0.72rem;
}
.brand-hero-stat-text {
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 600;
  color: #3d2d5f;
}
.brand-hero-heart {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
}
.brand-hero-heart span {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(100% - (var(--i) * 12%));
  height: calc(100% - (var(--i) * 12%));
  border: 1.6px solid var(--c);
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  border-radius: 34px 34px 0 0;
  box-sizing: border-box;
}
.brand-hero-heart span:nth-child(1) { --i: 0; --c: #4f4f4f; }
.brand-hero-heart span:nth-child(2) { --i: 1; --c: #e7c86a; }
.brand-hero-heart span:nth-child(3) { --i: 2; --c: #e19a9f; }
.brand-hero-heart span:nth-child(4) { --i: 3; --c: #d69adf; }
.brand-hero-heart span:nth-child(5) { --i: 4; --c: #9f9be9; }
.brand-hero-heart span:nth-child(6) { --i: 5; --c: #79c8e6; }
.brand-hero-heart span:nth-child(7) { --i: 6; --c: #71d0c0; }

@media (min-width: 1024px) {
  .solution-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}