/* ============================================
   SafeBlock — Homepage Sections Styles
   All major homepage content sections
   ============================================ */

/* ============================================
   TRUSTED COMPANIES / LOGOS
   ============================================ */
.sb-trusted {
  padding: 10px 0px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--sb-white);
}

.sb-trusted-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
  opacity: 0.4;
  transition: opacity var(--sb-transition-slow);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.sb-trusted-slider:hover {
  opacity: 0.7;
}

.sb-trusted-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: sb-marquee-right 30s linear infinite;
}

.sb-trusted-track:hover {
  animation-play-state: paused;
}

.sb-trusted-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--sb-space-xl);
}

.sb-trusted-logo-item img {
  height: 42px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter var(--sb-transition-base), opacity var(--sb-transition-base);
}

.sb-trusted-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes sb-marquee-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ============================================
   PRODUCTS OVERVIEW
   ============================================ */
/* Section wrapper — compact pixel-perfect spacing */
.sb-products-section {
  background: linear-gradient(180deg, var(--sb-gray-950) 0%, #0a0a10 50%, var(--sb-gray-950) 100%);
  padding: clamp(3rem, 5vw, 5rem) 0;
}

/* Override header gap for products */
#products .sb-section-header {
  margin-bottom: 2.5rem;
}

/* Override subtitle spacing */
#products .sb-section-subtitle {
  margin-bottom: 0;
}

/* Fine Grid Lines Backdrop — VISIBLE */
.sb-section-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 212, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 212, 0, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center top;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 80%);
}

/* Gradient Title */
#products .sb-section-title {
  background: linear-gradient(135deg, #ffffff 30%, var(--sb-yellow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Watermark Backdrop Text */
.sb-section-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 8.5rem;
  font-weight: 900;
  color: rgba(255, 215, 0, 0.03);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  font-family: var(--sb-font-heading);
}

/* ---- Floating Glow Blobs — BOOSTED ---- */
.sb-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: float-glow 18s infinite alternate ease-in-out;
}

.sb-glow-blob-1 {
  width: 400px;
  height: 400px;
  background: rgba(255, 212, 0, 0.25);
  top: 10%;
  left: -3%;
}

.sb-glow-blob-2 {
  width: 500px;
  height: 500px;
  background: rgba(255, 171, 0, 0.2);
  bottom: 5%;
  right: -3%;
  animation-duration: 24s;
  animation-delay: -5s;
}

.sb-glow-blob-3 {
  width: 300px;
  height: 300px;
  background: rgba(255, 212, 0, 0.12);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 30s;
  animation-delay: -10s;
}

@keyframes float-glow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(60px, -30px) scale(1.15);
  }

  66% {
    transform: translate(-40px, 50px) scale(0.9);
  }

  100% {
    transform: translate(30px, 70px) scale(1.05);
  }
}

/* ---- Floating Blockchain Nodes — CSS-only ---- */
.sb-float-node {
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 212, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.2);
  color: rgba(255, 212, 0, 0.5);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
  animation: float-node 12s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(255, 212, 0, 0.1);
}

.sb-float-node-1 {
  top: 12%;
  left: 8%;
  animation-duration: 14s;
}

.sb-float-node-2 {
  top: 8%;
  right: 12%;
  animation-duration: 16s;
  animation-delay: -3s;
}

.sb-float-node-3 {
  top: 45%;
  left: 4%;
  animation-duration: 18s;
  animation-delay: -6s;
}

.sb-float-node-4 {
  top: 65%;
  right: 6%;
  animation-duration: 15s;
  animation-delay: -2s;
}

.sb-float-node-5 {
  bottom: 15%;
  left: 15%;
  animation-duration: 20s;
  animation-delay: -8s;
}

.sb-float-node-6 {
  bottom: 20%;
  right: 18%;
  animation-duration: 13s;
  animation-delay: -4s;
}

@keyframes float-node {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }

  25% {
    transform: translateY(-20px) rotate(5deg);
    opacity: 0.9;
  }

  50% {
    transform: translateY(10px) rotate(-3deg);
    opacity: 0.5;
  }

  75% {
    transform: translateY(-15px) rotate(2deg);
    opacity: 0.8;
  }
}

/* ---- Animated Connection Lines — SVG ---- */
.sb-connection-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.sb-conn-line {
  stroke: rgba(255, 212, 0, 0.08);
  stroke-width: 1;
  stroke-dasharray: 8 12;
  animation: dash-flow 20s linear infinite;
}

.sb-conn-line-1 {
  animation-duration: 18s;
}

.sb-conn-line-2 {
  animation-duration: 22s;
  animation-delay: -4s;
}

.sb-conn-line-3 {
  animation-duration: 16s;
  animation-delay: -8s;
}

.sb-conn-line-4 {
  animation-duration: 25s;
  animation-delay: -2s;
}

.sb-conn-line-5 {
  animation-duration: 20s;
  animation-delay: -10s;
}

.sb-conn-line-6 {
  animation-duration: 30s;
  animation-delay: -6s;
  stroke-dasharray: 4 16;
}

@keyframes dash-flow {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -200;
  }
}

/* ---- Soft Moving Light ---- */
.sb-moving-light {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 212, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: sweep-light 16s infinite ease-in-out;
}

@keyframes sweep-light {
  0% {
    top: 10%;
    left: -10%;
  }

  25% {
    top: 30%;
    left: 60%;
  }

  50% {
    top: 60%;
    left: 30%;
  }

  75% {
    top: 20%;
    left: 80%;
  }

  100% {
    top: 10%;
    left: -10%;
  }
}

/* ---- Products Grid — tight spacing ---- */
.sb-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Override Bootstrap col-* width inside CSS grid */
.sb-products-grid>[class*="col"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---- Glassmorphic Product Cards — compact ---- */
.sb-product-card {
  position: relative;
  background: linear-gradient(135deg, rgba(25, 25, 35, 0.85), rgba(10, 10, 18, 0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--sb-radius-lg);
  padding: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  height: 100%;
  z-index: 1;
}

/* Radial hover light behind card */
.sb-product-card::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 212, 0, 0.07) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.sb-product-card:hover::after {
  opacity: 1;
}

.sb-col-inner {
  position: relative;
  z-index: 2;
}

/* Gradient border on hover */
.sb-product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 212, 0, 0.5), transparent 40%, rgba(255, 212, 0, 0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
}

.sb-product-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 212, 0, 0.45);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 212, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sb-product-card:hover::before {
  opacity: 1;
}

/* ---- Glowing Icons with Pulse ---- */
.sb-product-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 212, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.2);
  border-radius: var(--sb-radius-lg);
  color: var(--sb-yellow);
  font-size: 1.5rem;
  margin-bottom: var(--sb-space-lg);
  transition: all 0.4s ease;
  box-shadow: 0 0 12px rgba(255, 212, 0, 0.08);
  animation: icon-pulse 4s infinite ease-in-out;
}

@keyframes icon-pulse {

  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 212, 0, 0.08);
  }

  50% {
    box-shadow: 0 0 22px rgba(255, 212, 0, 0.2);
  }
}

.sb-product-card:hover .sb-product-icon {
  background: var(--sb-yellow);
  color: var(--sb-black);
  box-shadow: 0 0 30px rgba(255, 212, 0, 0.5);
  animation: none;
  transform: scale(1.08);
}

/* ---- Card Text ---- */
.sb-product-card-title {
  font-size: var(--sb-fs-h5);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-white);
  margin-bottom: var(--sb-space-sm);
  transition: color 0.3s ease;
}

.sb-product-card:hover .sb-product-card-title {
  color: var(--sb-yellow);
}

.sb-product-card-desc {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-300);
  line-height: var(--sb-lh-relaxed);
  margin-bottom: var(--sb-space-lg);
}

/* ---- Card Links ---- */
.sb-product-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-xs);
  font-size: var(--sb-fs-body-sm);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-yellow);
  text-decoration: none;
  transition: gap 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.sb-product-card-link:hover {
  gap: var(--sb-space-sm);
  color: var(--sb-yellow-light);
  text-shadow: 0 0 10px rgba(255, 212, 0, 0.4);
}

/* ============================================
   FEATURE SHOWCASE (Wallet, Contracts, etc.)
   Split layout with visual + content
   ============================================ */
.sb-feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-4xl);
  align-items: center;
}

.sb-feature-split-reverse {
  direction: rtl;
}

.sb-feature-split-reverse>* {
  direction: ltr;
}

.sb-feature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-feature-visual-card {
  position: relative;
  background: var(--sb-gradient-card);
  border: 1px solid var(--sb-glass-border);
  border-radius: var(--sb-radius-2xl);
  padding: var(--sb-space-3xl);
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sb-feature-visual-card .sb-lottie-container {
  width: 80%;
  height: 80%;
}

.sb-feature-visual-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--sb-yellow-15);
  filter: blur(80px);
  z-index: 0;
}

.sb-feature-content {
  max-width: 520px;
}

.sb-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
  margin-top: var(--sb-space-xl);
}

.sb-feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-sm);
}

.sb-feature-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-yellow-10);
  border-radius: 50%;
  color: var(--sb-yellow);
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sb-feature-list-text {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-300);
  line-height: var(--sb-lh-relaxed);
}

/* ============================================
   STATS / GLOBAL STATISTICS
   ============================================ */
.sb-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sb-space-xl);
}

.sb-stats-card {
  text-align: center;
  padding: var(--sb-space-2xl);
  background: var(--sb-glass-bg);
  backdrop-filter: var(--sb-glass-blur);
  border: 1px solid var(--sb-glass-border);
  border-radius: var(--sb-radius-xl);
  transition: all var(--sb-transition-base);
  height: 100%;
}

.sb-stats-card:hover {
  border-color: var(--sb-yellow-20);
  transform: translateY(-4px);
}

.sb-stats-number {
  font-family: var(--sb-font-heading);
  font-size: var(--sb-fs-h2);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-yellow);
  line-height: 1;
  margin-bottom: var(--sb-space-xs);
}

.sb-stats-text {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
}

/* ============================================
   ANALYTICS DASHBOARD PREVIEW
   ============================================ */
.sb-dashboard-preview {
  background: var(--sb-gradient-card);
  border: 1px solid var(--sb-glass-border);
  border-radius: var(--sb-radius-2xl);
  padding: var(--sb-space-xl);
  overflow: hidden;
  position: relative;
}

.sb-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sb-space-xl);
  padding-bottom: var(--sb-space-md);
  border-bottom: 1px solid var(--sb-gray-700);
}

.sb-dashboard-dots {
  display: flex;
  gap: 6px;
}

.sb-dashboard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.sb-dashboard-dot:nth-child(1) {
  background: #ff5f57;
}

.sb-dashboard-dot:nth-child(2) {
  background: #febc2e;
}

.sb-dashboard-dot:nth-child(3) {
  background: #28c840;
}

.sb-dashboard-tabs {
  display: flex;
  gap: var(--sb-space-sm);
}

.sb-dashboard-tab {
  padding: var(--sb-space-xs) var(--sb-space-md);
  font-size: var(--sb-fs-caption);
  color: var(--sb-gray-400);
  border-radius: var(--sb-radius-sm);
  cursor: pointer;
  transition: all var(--sb-transition-fast);
}

.sb-dashboard-tab.sb-tab-active {
  background: var(--sb-yellow-10);
  color: var(--sb-yellow);
}

.sb-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sb-space-md);
  margin-bottom: var(--sb-space-xl);
}

.sb-dashboard-metric {
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-lg);
  padding: var(--sb-space-lg);
}

.sb-metric-label {
  font-size: var(--sb-fs-caption);
  color: var(--sb-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--sb-ls-wider);
  margin-bottom: var(--sb-space-xs);
}

.sb-metric-value {
  font-family: var(--sb-font-heading);
  font-size: var(--sb-fs-h4);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-white);
}

.sb-metric-change {
  font-size: var(--sb-fs-caption);
  font-weight: var(--sb-fw-semibold);
  margin-top: 4px;
}

/* Chart placeholder */
.sb-dashboard-chart {
  width: 100%;
  height: 200px;
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-lg);
  position: relative;
  overflow: hidden;
}

.sb-chart-svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   SECURITY SECTION (AI Fraud Detection, etc.)
   ============================================ */
.sb-security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sb-space-xl);
}

/* --- 3D AI Security Card Perspective Container --- */
#aiFraud .col-12 {
  perspective: 1000px;
}

.sb-security-card {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
  border: 1px solid rgba(255, 212, 0, 0.2);
  border-radius: var(--sb-radius-2xl, 18px);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  height: 100%;
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 212, 0, 0.05);
  backdrop-filter: blur(14px);
}

.sb-security-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sb-yellow, #FFD400), transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.sb-security-card::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sb-yellow, #FFD400), transparent);
  box-shadow: 0 0 10px var(--sb-yellow, #FFD400);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.sb-security-card:hover::after {
  animation: sb-ai-laser-scan 2.5s linear infinite;
}

.sb-security-card:hover {
  border-color: rgba(255, 212, 0, 0.55);
  transform: translateY(-8px) rotateX(6deg) rotateY(-4deg) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 212, 0, 0.2);
  background: linear-gradient(145deg, rgba(28, 28, 28, 0.98) 0%, rgba(14, 14, 14, 0.98) 100%);
}

.sb-security-card:hover::before {
  opacity: 1;
}

/* --- Card Header & Spec Tag --- */
.sb-security-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  transform: translateZ(25px);
}

.sb-security-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 212, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.25);
  border-radius: var(--sb-radius-xl, 14px);
  color: var(--sb-yellow, #FFD400);
  font-size: 1.35rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  transform: translateZ(30px);
}

.sb-security-card:hover .sb-security-card-icon {
  background: var(--sb-yellow, #FFD400);
  color: var(--sb-black, #000000);
  box-shadow: 0 0 15px rgba(255, 212, 0, 0.4);
  transform: translateZ(35px) scale(1.08);
}

.sb-security-card-tag {
  font-family: var(--sb-font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sb-yellow, #FFD400);
  background: rgba(255, 212, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.2);
  padding: 3px 10px;
  border-radius: var(--sb-radius-sm, 6px);
  white-space: nowrap;
  letter-spacing: 0.04em;
  transform: translateZ(20px);
}

.sb-security-card-content {
  flex: 1;
  transform: translateZ(20px);
}

.sb-security-card-title {
  font-size: var(--sb-fs-h5, 1.15rem);
  font-weight: var(--sb-fw-bold, 700);
  color: var(--sb-white, #ffffff);
  margin-bottom: var(--sb-space-xs, 8px);
  transition: color 0.3s ease;
}

.sb-security-card:hover .sb-security-card-title {
  color: var(--sb-yellow, #FFD400);
}

.sb-security-card-desc {
  font-size: var(--sb-fs-body-sm, 0.875rem);
  color: var(--sb-gray-300, #a1a1aa);
  line-height: var(--sb-lh-relaxed, 1.6);
  margin: 0;
}

/* ============================================
   PRICING PLANS
   ============================================ */
.sb-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-md);
  margin-bottom: var(--sb-space-3xl);
}

.sb-pricing-label {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
  cursor: pointer;
  user-select: none;
  transition: color var(--sb-transition-base);
}

.sb-pricing-label.sb-pricing-active {
  color: var(--sb-white);
  font-weight: var(--sb-fw-bold);
}

.sb-toggle-switch {
  width: 48px;
  height: 26px;
  background: var(--sb-gray-600);
  border-radius: var(--sb-radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--sb-transition-base);
}

.sb-toggle-switch.sb-toggled {
  background: var(--sb-yellow);
}

.sb-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--sb-white);
  border-radius: 50%;
  transition: transform var(--sb-transition-base);
}

.sb-toggle-switch.sb-toggled .sb-toggle-knob {
  transform: translateX(22px);
}

.sb-pricing-save {
  font-size: var(--sb-fs-caption);
  color: var(--sb-yellow);
  font-weight: var(--sb-fw-semibold);
}

.sb-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sb-space-xl);
  align-items: start;
}

/* --- 3D Pricing Container --- */
#pricing .col-12 {
  perspective: 1000px;
}

.sb-pricing-card {
  position: relative;
  border-radius: var(--sb-radius-2xl, 20px);
  padding: 32px 28px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  height: 100%;
  transform-style: preserve-3d;
  overflow: hidden;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
}

.sb-pricing-card .sb-col-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.sb-pricing-card::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.sb-pricing-card:hover {
  transform: translateY(-10px) rotateX(5deg) rotateY(-3deg) scale(1.02);
}

/* --- Starter Plan (Cyan Theme) --- */
.sb-pricing-starter {
  border: 1px solid rgba(0, 217, 255, 0.3);
  background: linear-gradient(145deg, rgba(8, 24, 32, 0.95) 0%, rgba(4, 12, 18, 0.98) 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 217, 255, 0.08);
}

.sb-pricing-starter::after {
  background: linear-gradient(90deg, transparent, #00D9FF, transparent);
  box-shadow: 0 0 10px #00D9FF;
}

.sb-pricing-starter:hover {
  border-color: rgba(0, 217, 255, 0.75);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 217, 255, 0.3);
  background: linear-gradient(145deg, rgba(12, 32, 44, 0.98) 0%, rgba(6, 16, 24, 0.98) 100%);
}

.sb-pricing-starter:hover::after {
  animation: sb-cyan-laser-scan 2.5s linear infinite;
}

.sb-pricing-starter .sb-pricing-badge {
  background: rgba(0, 217, 255, 0.12);
  color: #00D9FF;
  border: 1px solid rgba(0, 217, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
}

.sb-pricing-starter .sb-pricing-currency,
.sb-pricing-starter:hover .sb-pricing-plan-name,
.sb-pricing-starter:hover .sb-pricing-amount {
  color: #00D9FF;
}

.sb-pricing-starter .sb-pricing-feature i {
  color: #00D9FF;
}

/* --- Pro / Featured Plan (Gold Signature Theme) --- */
.sb-pricing-pro {
  border: 1px solid rgba(255, 212, 0, 0.45);
  background: linear-gradient(145deg, rgba(32, 28, 10, 0.95) 0%, rgba(16, 14, 5, 0.98) 100%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 212, 0, 0.18);
  animation: sb-price-glow-pulse 4s ease-in-out infinite;
}

.sb-pricing-pro::after {
  background: linear-gradient(90deg, transparent, #FFD400, transparent);
  box-shadow: 0 0 10px #FFD400;
}

.sb-pricing-pro:hover {
  border-color: rgba(255, 212, 0, 0.85);
  box-shadow: 0 30px 55px rgba(0, 0, 0, 0.85), 0 0 45px rgba(255, 212, 0, 0.45);
  background: linear-gradient(145deg, rgba(42, 36, 14, 0.98) 0%, rgba(20, 18, 6, 0.98) 100%);
}

.sb-pricing-pro:hover::after {
  animation: sb-ai-laser-scan 2.5s linear infinite;
}

.sb-pricing-pro .sb-pricing-badge {
  background: #FFD400;
  color: #000000;
  box-shadow: 0 0 15px rgba(255, 212, 0, 0.5);
  animation: sb-price-badge-pulse 2.5s infinite ease-in-out;
}

.sb-pricing-pro .sb-pricing-currency,
.sb-pricing-pro:hover .sb-pricing-plan-name,
.sb-pricing-pro:hover .sb-pricing-amount {
  color: #FFD400;
}

.sb-pricing-pro .sb-pricing-feature i {
  color: #FFD400;
}

/* --- Enterprise Plan (Purple Cyber Theme) --- */
.sb-pricing-enterprise {
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: linear-gradient(145deg, rgba(24, 12, 34, 0.95) 0%, rgba(12, 5, 18, 0.98) 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.1);
}

.sb-pricing-enterprise::after {
  background: linear-gradient(90deg, transparent, #C084FC, transparent);
  box-shadow: 0 0 10px #C084FC;
}

.sb-pricing-enterprise:hover {
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(168, 85, 247, 0.35);
  background: linear-gradient(145deg, rgba(32, 16, 46, 0.98) 0%, rgba(16, 8, 24, 0.98) 100%);
}

.sb-pricing-enterprise:hover::after {
  animation: sb-purple-laser-scan 2.5s linear infinite;
}

.sb-pricing-enterprise .sb-pricing-badge {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.sb-pricing-enterprise .sb-pricing-currency,
.sb-pricing-enterprise:hover .sb-pricing-plan-name,
.sb-pricing-enterprise:hover .sb-pricing-amount {
  color: #C084FC;
}

.sb-pricing-enterprise .sb-pricing-feature i {
  color: #C084FC;
}

/* --- HUD Header Bar & Corner Brackets --- */
.sb-pricing-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: var(--sb-space-md, 14px);
  transform: translateZ(25px);
}

.sb-pricing-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-pricing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.sb-pricing-starter .sb-pricing-dot {
  background: #00D9FF;
  box-shadow: 0 0 6px #00D9FF;
}

.sb-pricing-pro .sb-pricing-dot {
  background: #FFD400;
  box-shadow: 0 0 6px #FFD400;
}

.sb-pricing-enterprise .sb-pricing-dot {
  background: #C084FC;
  box-shadow: 0 0 6px #C084FC;
}

.sb-pricing-dot-txt {
  font-family: var(--sb-font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sb-pricing-starter .sb-pricing-dot-txt {
  color: #00D9FF;
}

.sb-pricing-pro .sb-pricing-dot-txt {
  color: #FFD400;
}

.sb-pricing-enterprise .sb-pricing-dot-txt {
  color: #C084FC;
}

.sb-pricing-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-style: solid;
  pointer-events: none;
  z-index: 6;
}

.sb-pricing-starter .sb-pricing-corner {
  border-color: #00D9FF;
}

.sb-pricing-pro .sb-pricing-corner {
  border-color: #FFD400;
}

.sb-pricing-enterprise .sb-pricing-corner {
  border-color: #C084FC;
}

.sb-pricing-c-tl {
  top: 6px;
  left: 6px;
  border-width: 2px 0 0 2px;
}

.sb-pricing-c-tr {
  top: 6px;
  right: 6px;
  border-width: 2px 2px 0 0;
}

.sb-pricing-c-bl {
  bottom: 6px;
  left: 6px;
  border-width: 0 0 2px 2px;
}

.sb-pricing-c-br {
  bottom: 6px;
  right: 6px;
  border-width: 0 2px 2px 0;
}

/* Custom Buttons for Pricing Tiers */
.sb-btn-outline-cyan {
  border: 1px solid rgba(0, 217, 255, 0.4);
  color: #00D9FF;
  background: rgba(0, 217, 255, 0.05);
}

.sb-btn-outline-cyan:hover {
  background: #00D9FF;
  color: #000000;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

.sb-btn-gold-glow {
  background: var(--sb-yellow, #FFD400);
  color: #000000;
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.35);
}

.sb-btn-gold-glow:hover {
  background: #ffe14d;
  box-shadow: 0 0 30px rgba(255, 212, 0, 0.6);
}

.sb-btn-outline-purple {
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #C084FC;
  background: rgba(168, 85, 247, 0.05);
}

.sb-btn-outline-purple:hover {
  background: #A855F7;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.sb-pricing-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: var(--sb-fs-caption, 0.75rem);
  font-weight: var(--sb-fw-bold, 800);
  border-radius: var(--sb-radius-full, 30px);
  text-transform: uppercase;
  letter-spacing: var(--sb-ls-wide, 0.08em);
  margin-bottom: var(--sb-space-lg, 16px);
  transform: translateZ(30px);
}

.sb-pricing-plan-name {
  font-size: var(--sb-fs-h4, 1.35rem);
  font-weight: var(--sb-fw-extrabold, 800);
  color: var(--sb-white, #ffffff);
  margin-bottom: var(--sb-space-xs, 8px);
  transform: translateZ(25px);
  transition: color 0.3s ease;
}

.sb-pricing-card:hover .sb-pricing-plan-name {
  color: var(--sb-yellow, #FFD400);
}

.sb-pricing-plan-desc {
  font-size: var(--sb-fs-body-sm, 0.875rem);
  color: var(--sb-gray-300, #a1a1aa);
  margin-bottom: var(--sb-space-xl, 20px);
  transform: translateZ(20px);
}

.sb-pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--sb-space-2xs, 4px);
  margin-bottom: var(--sb-space-xl, 24px);
  transform: translateZ(30px);
}

.sb-pricing-currency {
  font-size: var(--sb-fs-h4, 1.35rem);
  font-weight: var(--sb-fw-bold, 700);
  color: var(--sb-yellow, #FFD400);
}

.sb-pricing-amount {
  font-family: var(--sb-font-heading, "Outfit", sans-serif);
  font-size: var(--sb-fs-h1, 2.75rem);
  font-weight: var(--sb-fw-extrabold, 900);
  color: var(--sb-white, #ffffff);
  line-height: 1;
  transition: color 0.3s ease;
}

.sb-pricing-card:hover .sb-pricing-amount {
  color: var(--sb-yellow, #FFD400);
}

.sb-pricing-period {
  font-size: var(--sb-fs-body-sm, 0.875rem);
  color: var(--sb-gray-400, #a1a1aa);
}

.sb-pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-sm, 10px);
  margin-top: var(--sb-space-xl, 20px);
  padding-top: var(--sb-space-xl, 20px);
  border-top: 1px solid rgba(255, 212, 0, 0.15);
  transform: translateZ(20px);
  flex-grow: 1;
}

.sb-pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--sb-space-sm, 10px);
  font-size: var(--sb-fs-body-sm, 0.875rem);
  color: var(--sb-gray-300, #d4d4d8);
  transition: transform 0.2s ease, color 0.2s ease;
}

.sb-pricing-card:hover .sb-pricing-feature {
  color: #ffffff;
}

.sb-pricing-feature i {
  color: var(--sb-yellow, #FFD400);
  font-size: 0.8rem;
  width: 16px;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.sb-testimonials-slider {
  position: relative;
  overflow: hidden;
}

.sb-testimonial-card {
  background: var(--sb-glass-bg);
  backdrop-filter: var(--sb-glass-blur);
  border: 1px solid var(--sb-glass-border);
  border-radius: var(--sb-radius-2xl);
  padding: var(--sb-space-2xl);
}

.sb-testimonial-stars {
  display: flex;
  gap: 4px;
  color: var(--sb-yellow);
  font-size: 0.875rem;
  margin-bottom: var(--sb-space-lg);
}

.sb-testimonial-quote {
  font-size: var(--sb-fs-body-lg);
  color: var(--sb-gray-200);
  line-height: var(--sb-lh-relaxed);
  margin-bottom: var(--sb-space-xl);
  font-style: italic;
}

.sb-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--sb-space-md);
}

.sb-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sb-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--sb-fw-bold);
  color: var(--sb-black);
  font-size: 1.125rem;
}

.sb-testimonial-name {
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
  font-size: var(--sb-fs-body-sm);
}

.sb-testimonial-role {
  font-size: var(--sb-fs-caption);
  color: var(--sb-gray-400);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.sb-faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
}

.sb-faq-item {
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
  transition: border-color var(--sb-transition-base);
}

.sb-faq-item.sb-faq-open {
  border-color: var(--sb-yellow-20);
}

.sb-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sb-space-lg) var(--sb-space-xl);
  font-size: var(--sb-fs-body);
  font-weight: var(--sb-fw-medium);
  color: var(--sb-white);
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: none;
  transition: color var(--sb-transition-fast);
}

.sb-faq-question:hover {
  color: var(--sb-yellow);
}

.sb-faq-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sb-gray-700);
  color: var(--sb-yellow);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: all var(--sb-transition-base);
}

.sb-faq-open .sb-faq-toggle {
  background: var(--sb-yellow);
  color: var(--sb-black);
  transform: rotate(180deg);
}

.sb-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--sb-transition-slow);
}

.sb-faq-answer-inner {
  padding: 0 var(--sb-space-xl) var(--sb-space-lg);
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
  line-height: var(--sb-lh-relaxed);
}

/* ============================================
   BLOG PREVIEW
   ============================================ */
.sb-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sb-space-xl);
}

.sb-blog-card {
  position: relative;
  background: rgba(15, 17, 28, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sb-blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.35);
}

.sb-blog-thumb {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #0d0f1d;
}

.sb-blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sb-blog-card:hover .sb-blog-img {
  transform: scale(1.08);
}

.sb-blog-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 17, 28, 0.95) 0%, rgba(15, 17, 28, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

.sb-blog-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--sb-font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sb-blog-badge-purple {
  background: rgba(168, 85, 247, 0.25);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.sb-blog-badge-cyan {
  background: rgba(0, 242, 254, 0.25);
  color: #bae6fd;
  border: 1px solid rgba(0, 242, 254, 0.4);
}

.sb-blog-badge-gold {
  background: rgba(255, 215, 0, 0.25);
  color: #fef08a;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.sb-blog-body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sb-blog-title {
  font-family: var(--sb-font-heading, "Space Grotesk", sans-serif);
  font-size: 1.22rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.35;
  transition: color 0.3s ease;
}

.sb-blog-card:hover .sb-blog-title {
  color: #00f2fe;
}

.sb-blog-excerpt {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.sb-blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: #64748b;
}

.sb-blog-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: #a855f7;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
}

.sb-blog-link i {
  transition: transform 0.3s ease;
}

.sb-blog-card:hover .sb-blog-link {
  color: #00f2fe;
}

.sb-blog-card:hover .sb-blog-link i {
  transform: translateX(4px);
}

/* ============================================
   NEWSLETTER
   ============================================ */
/* ============================================
   ROADMAP TIMELINE
   ============================================ */
.sb-roadmap-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.sb-roadmap-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sb-gray-700);
  transform: translateX(-50%);
}

.sb-roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-2xl);
  margin-bottom: var(--sb-space-3xl);
  position: relative;
}

.sb-roadmap-item:nth-child(even) {
  flex-direction: row-reverse;
  text-align: right;
}

.sb-roadmap-content {
  flex: 1;
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-xl);
  padding: var(--sb-space-xl);
  transition: all var(--sb-transition-base);
}

.sb-roadmap-content:hover {
  border-color: var(--sb-yellow-20);
  box-shadow: var(--sb-shadow-card-hover);
}

.sb-roadmap-dot {
  position: absolute;
  left: 50%;
  top: var(--sb-space-xl);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sb-yellow);
  border: 3px solid var(--sb-black);
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: 0 0 15px var(--sb-yellow-30);
}

.sb-roadmap-year {
  font-size: var(--sb-fs-caption);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-yellow);
  text-transform: uppercase;
  letter-spacing: var(--sb-ls-wider);
  margin-bottom: var(--sb-space-xs);
}

.sb-roadmap-title {
  font-size: var(--sb-fs-h6);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
  margin-bottom: var(--sb-space-xs);
}

.sb-roadmap-desc {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
}

/* ============================================
   DOWNLOAD APPS
   ============================================ */
.sb-download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-4xl);
  align-items: center;
}

.sb-download-badges {
  display: flex;
  gap: var(--sb-space-md);
  margin-top: var(--sb-space-xl);
  flex-wrap: wrap;
}

.sb-download-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-space-sm);
  padding: var(--sb-space-sm) var(--sb-space-xl);
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-600);
  border-radius: var(--sb-radius-lg);
  text-decoration: none;
  transition: all var(--sb-transition-base);
}

.sb-download-badge:hover {
  border-color: var(--sb-yellow-40);
  background: var(--sb-yellow-10);
  transform: translateY(-2px);
}

.sb-download-badge-icon {
  font-size: 1.75rem;
  color: var(--sb-white);
}

.sb-download-badge-text {
  display: flex;
  flex-direction: column;
}

.sb-download-small {
  font-size: var(--sb-fs-caption);
  color: var(--sb-gray-400);
}

.sb-download-store {
  font-size: var(--sb-fs-body-sm);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
}

/* ============================================
   PARTNERS & INTEGRATIONS — NEON ANIMATED SECTION
   ============================================ */
#partners.sb-partners-section {
  position: relative;
  background: linear-gradient(180deg, #090a18 0%, #0d0f28 50%, #070814 100%);
  overflow: hidden;
  padding: 6rem 0;
  z-index: 1;
}

/* Background Ambient Lighting & Neon Effects */
.sb-partner-bg-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sb-partner-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.sb-partner-orb-1 {
  width: 550px;
  height: 550px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(0, 255, 135, 0.3) 0%, rgba(0, 255, 135, 0) 70%);
  animation: sb-case-orb-float 14s ease-in-out infinite;
}

.sb-partner-orb-2 {
  width: 600px;
  height: 600px;
  bottom: -150px;
  right: -120px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 70%);
  animation: sb-case-orb-float 16s ease-in-out infinite reverse;
}

/* Cyber Grid Overlay */
.sb-partner-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 242, 254, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.85;
}

.sb-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  background: rgba(15, 17, 28, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.4s ease,
    background 0.4s ease;
}

/* Hover Glowing Border & Shadow Effect */
.sb-partner-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(0, 242, 254, 0.55);
  background: rgba(20, 24, 42, 0.85);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45),
    0 0 25px rgba(0, 242, 254, 0.3),
    inset 0 0 15px rgba(168, 85, 247, 0.15);
}

.sb-partner-icon {
  font-size: 1.7rem;
  margin-bottom: 8px;
  color: #94a3b8;
  transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

.sb-partner-name {
  font-family: var(--sb-font-heading, "Space Grotesk", sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  color: #cbd5e1;
  text-align: center;
  transition: color 0.3s ease;
}

.sb-partner-card:hover .sb-partner-icon {
  transform: scale(1.15);
}

.sb-partner-card:hover .sb-partner-name {
  color: #ffffff;
}

/* Brand Specific Neon Glow Hover Accents */
.sb-partner-eth:hover {
  border-color: rgba(98, 126, 234, 0.6);
  box-shadow: 0 0 25px rgba(98, 126, 234, 0.4);
}

.sb-partner-eth:hover .sb-partner-icon {
  color: #627eea;
  filter: drop-shadow(0 0 8px #627eea);
}

.sb-partner-poly:hover {
  border-color: rgba(130, 71, 229, 0.6);
  box-shadow: 0 0 25px rgba(130, 71, 229, 0.4);
}

.sb-partner-poly:hover .sb-partner-icon {
  color: #a855f7;
  filter: drop-shadow(0 0 8px #a855f7);
}

.sb-partner-sol:hover {
  border-color: rgba(20, 241, 149, 0.6);
  box-shadow: 0 0 25px rgba(20, 241, 149, 0.4);
}

.sb-partner-sol:hover .sb-partner-icon {
  color: #14f195;
  filter: drop-shadow(0 0 8px #14f195);
}

.sb-partner-avax:hover {
  border-color: rgba(232, 65, 66, 0.6);
  box-shadow: 0 0 25px rgba(232, 65, 66, 0.4);
}

.sb-partner-avax:hover .sb-partner-icon {
  color: #e84142;
  filter: drop-shadow(0 0 8px #e84142);
}

.sb-partner-link:hover {
  border-color: rgba(55, 91, 210, 0.6);
  box-shadow: 0 0 25px rgba(55, 91, 210, 0.4);
}

.sb-partner-link:hover .sb-partner-icon {
  color: #38bdf8;
  filter: drop-shadow(0 0 8px #38bdf8);
}

.sb-partner-aws:hover {
  border-color: rgba(255, 153, 0, 0.6);
  box-shadow: 0 0 25px rgba(255, 153, 0, 0.4);
}

.sb-partner-aws:hover .sb-partner-icon {
  color: #ff9900;
  filter: drop-shadow(0 0 8px #ff9900);
}

.sb-partner-azure:hover {
  border-color: rgba(0, 137, 214, 0.6);
  box-shadow: 0 0 25px rgba(0, 137, 214, 0.4);
}

.sb-partner-azure:hover .sb-partner-icon {
  color: #0089d6;
  filter: drop-shadow(0 0 8px #0089d6);
}

.sb-partner-gcp:hover {
  border-color: rgba(66, 133, 244, 0.6);
  box-shadow: 0 0 25px rgba(66, 133, 244, 0.4);
}

.sb-partner-gcp:hover .sb-partner-icon {
  color: #4285f4;
  filter: drop-shadow(0 0 8px #4285f4);
}

.sb-partner-fire:hover {
  border-color: rgba(255, 87, 34, 0.6);
  box-shadow: 0 0 25px rgba(255, 87, 34, 0.4);
}

.sb-partner-fire:hover .sb-partner-icon {
  color: #ff5722;
  filter: drop-shadow(0 0 8px #ff5722);
}

.sb-partner-circle:hover {
  border-color: rgba(39, 117, 202, 0.6);
  box-shadow: 0 0 25px rgba(39, 117, 202, 0.4);
}

.sb-partner-circle:hover .sb-partner-icon {
  color: #2775ca;
  filter: drop-shadow(0 0 8px #2775ca);
}

.sb-partner-chain:hover {
  border-color: rgba(0, 230, 118, 0.6);
  box-shadow: 0 0 25px rgba(0, 230, 118, 0.4);
}

.sb-partner-chain:hover .sb-partner-icon {
  color: #00e676;
  filter: drop-shadow(0 0 8px #00e676);
}

.sb-partner-ledger:hover {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.4);
}

.sb-partner-ledger:hover .sb-partner-icon {
  color: #fbbf24;
  filter: drop-shadow(0 0 8px #fbbf24);
}

/* ============================================
   CERTIFICATIONS BADGES
   ============================================ */
.sb-certs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2xl);
  flex-wrap: wrap;
}

.sb-cert-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-sm);
  padding: var(--sb-space-xl);
  background: rgba(15, 17, 28, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: var(--sb-radius-xl);
  min-width: 140px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sb-cert-badge:hover {
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.2);
}

.sb-cert-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-yellow-10);
  border-radius: 50%;
  color: var(--sb-yellow);
  font-size: 1.25rem;
  transition: transform 0.35s ease;
}

.sb-cert-badge:hover .sb-cert-icon {
  transform: scale(1.15);
}

.sb-cert-name {
  font-size: var(--sb-fs-caption);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.sb-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-3xl);
}

.sb-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
}

.sb-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-xs);
}

.sb-form-label {
  font-size: var(--sb-fs-body-sm);
  font-weight: var(--sb-fw-medium);
  color: var(--sb-gray-300);
}

.sb-form-input {
  padding: 0.875rem 1.25rem;
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-lg);
  color: var(--sb-white);
  font-size: var(--sb-fs-body-sm);
  transition: border-color var(--sb-transition-fast), box-shadow var(--sb-transition-fast);
}

.sb-form-input:focus {
  border-color: var(--sb-yellow);
  box-shadow: 0 0 0 3px var(--sb-yellow-10);
}

.sb-form-input::placeholder {
  color: var(--sb-gray-500);
}

.sb-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.sb-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-xl);
}

.sb-contact-card {
  display: flex;
  gap: var(--sb-space-md);
  padding: var(--sb-space-lg);
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-lg);
  transition: all var(--sb-transition-base);
}

.sb-contact-card:hover {
  border-color: var(--sb-yellow-20);
}

.sb-contact-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-yellow-10);
  border-radius: var(--sb-radius-md);
  color: var(--sb-yellow);
  flex-shrink: 0;
}

.sb-contact-card-title {
  font-size: var(--sb-fs-body-sm);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
  margin-bottom: 4px;
}

.sb-contact-card-text {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
}

.sb-contact-card-wrap {
  height: 100%;
  padding: var(--sb-space-xl) var(--sb-space-xl);
}

.sb-contact-card-inner {
  position: relative;
  z-index: 4;
}

/* Animated Border Runner */
.sb-card-border-line {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
}

.sb-card-border-line::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, rgba(255, 215, 0, 0.6) 20%, transparent 40%);
  animation: sb-border-spin 3s linear infinite;
}

.sb-card-border-line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, rgba(0, 255, 135, 0.4) 50%, transparent 70%);
  animation: sb-border-spin 3s linear infinite reverse;
}

@keyframes sb-border-spin {
  100% { transform: rotate(360deg); }
}

/* Animated border for Blog, Cert & Community cards */
.sb-blog-card::before,
.sb-community-card::before,
.sb-cert-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1.5px;
  background: conic-gradient(transparent, rgba(255, 215, 0, 0.6) 20%, transparent 40%);
  animation: sb-border-spin 3s linear infinite;
}

/* Ensure card content stays above border */
.sb-blog-body,
.sb-blog-thumb,
.sb-community-card > *,
.sb-cert-badge > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   COMMUNITY
   ============================================ */
.sb-community-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sb-space-lg);
}

.sb-community-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-md);
  padding: var(--sb-space-2xl);
  background: rgba(15, 17, 28, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: var(--sb-radius-xl);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sb-community-card:hover {
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.2);
}

.sb-community-icon {
  font-size: 2rem;
  color: var(--sb-yellow);
  transition: transform 0.35s ease;
}

.sb-community-card:hover .sb-community-icon {
  transform: scale(1.15);
}

.sb-community-name {
  font-size: var(--sb-fs-body);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
  letter-spacing: 0.02em;
}

.sb-community-count {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
}

/* ============================================
   CASE STUDIES / SUCCESS STORIES — REDESIGNED
   ============================================ */

/* Section background & relative positioning */
#caseStudies.sb-case-section {
  position: relative;
  background: linear-gradient(180deg, #070618 0%, #0d0b2e 50%, #060512 100%);
  overflow: hidden;
  padding: 6.5rem 0;
  z-index: 1;
}

/* Background interactive canvas - High Visibility */
.sb-case-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}

/* Background Ambient Lighting & Grid */
.sb-case-bg-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sb-case-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.sb-case-orb-1 {
  width: 600px;
  height: 600px;
  top: -150px;
  left: -120px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.32) 0%, rgba(255, 215, 0, 0) 70%);
  animation: sb-case-orb-float 12s ease-in-out infinite;
}

.sb-case-orb-2 {
  width: 650px;
  height: 650px;
  bottom: -180px;
  right: -140px;
  background: radial-gradient(circle, rgba(0, 255, 135, 0.32) 0%, rgba(0, 255, 135, 0) 70%);
  animation: sb-case-orb-float 15s ease-in-out infinite reverse;
}

.sb-case-orb-3 {
  width: 500px;
  height: 500px;
  top: 30%;
  left: 35%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0) 70%);
  animation: sb-case-orb-float 18s ease-in-out infinite;
}

.sb-case-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 215, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 135, 0.05) 1px, transparent 1px);
  background-size: 45px 45px;
  opacity: 0.85;
}

/* --- Floating Crypto & Web3 Icons --- */
.sb-case-floating-crypto {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.sb-crypto-icon {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  background: rgba(15, 17, 32, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: sb-crypto-float 6s ease-in-out infinite, sb-crypto-glow-pulse 3s ease-in-out infinite;
}

.sb-crypto-btc {
  top: 10%;
  left: 4%;
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.35);
  animation-delay: 0s;
}

.sb-crypto-eth {
  top: 15%;
  right: 5%;
  color: #00ff87;
  border-color: rgba(0, 255, 135, 0.45);
  box-shadow: 0 0 25px rgba(0, 255, 135, 0.35);
  animation-delay: 1.2s;
}

.sb-crypto-sol {
  bottom: 22%;
  left: 3%;
  color: #14f195;
  border-color: rgba(20, 241, 149, 0.45);
  box-shadow: 0 0 25px rgba(20, 241, 149, 0.35);
  animation-delay: 2.4s;
}

.sb-crypto-usdt {
  bottom: 14%;
  right: 4%;
  color: #26a17b;
  border-color: rgba(38, 161, 123, 0.45);
  box-shadow: 0 0 25px rgba(38, 161, 123, 0.35);
  animation-delay: 0.8s;
}

.sb-crypto-wallet {
  top: 52%;
  left: 2%;
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
  animation-delay: 1.8s;
}

.sb-crypto-link {
  top: 58%;
  right: 3%;
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.35);
  animation-delay: 3s;
}

#caseStudies .sb-section-label {
  color: #ffd700;
  letter-spacing: 0.15em;
}

#caseStudies .sb-section-title {
  color: #ffffff;
}

#caseStudies .sb-section-subtitle {
  color: #94a3b8;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Perspective container for 3D card tilt */
#caseStudies .col-12 {
  perspective: 1200px;
}

/* --- UI CARD STYLE (Unique Modern Glassmorphism Cyber Card) --- */
.sb-case-card {
  position: relative;
  background: rgba(15, 17, 28, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  height: 100%;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.4s ease;
}

/* Mouse Cursor Spotlight Glow Layer */
.sb-case-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 215, 0, 0.08), transparent 40%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sb-case-card:hover .sb-case-spotlight {
  opacity: 1;
}

/* Cyber Corner HUD Brackets */
.sb-case-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(255, 215, 0, 0.4);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.sb-case-c-tl {
  top: 10px;
  left: 10px;
  border-width: 2px 0 0 2px;
}

.sb-case-c-tr {
  top: 10px;
  right: 10px;
  border-width: 2px 2px 0 0;
}

.sb-case-c-bl {
  bottom: 10px;
  left: 10px;
  border-width: 0 0 2px 2px;
}

.sb-case-c-br {
  bottom: 10px;
  right: 10px;
  border-width: 0 2px 2px 0;
}

.sb-case-card:hover .sb-case-corner {
  border-color: #ffd700;
}

/* Hover Card State */
.sb-case-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(255, 215, 0, 0.28);
  border-color: rgba(255, 215, 0, 0.45);
}

/* Card Inner Content Structure */
.sb-case-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 30px;
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
}

/* Card Header & Avatar Company Badges */
.sb-case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.sb-case-company-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sb-case-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sb-case-avatar-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 1px solid currentColor;
  opacity: 0.4;
  animation: sb-case-pulse-glow 2.5s infinite ease-in-out;
}

.sb-case-avatar-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.sb-case-avatar-cyan {
  background: rgba(0, 242, 254, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.sb-case-avatar-emerald {
  background: rgba(0, 255, 135, 0.15);
  color: #34d399;
  border: 1px solid rgba(0, 255, 135, 0.3);
}

.sb-case-avatar-gold {
  background: rgba(255, 215, 0, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.sb-case-company-name {
  display: block;
  font-family: var(--sb-font-heading, "Space Grotesk", sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.sb-case-category {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 500;
}

.sb-case-badge {
  font-family: var(--sb-font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.08em;
}

.sb-badge-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.sb-badge-cyan {
  background: rgba(0, 242, 254, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.sb-badge-emerald {
  background: rgba(0, 255, 135, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(0, 255, 135, 0.3);
}

.sb-badge-gold {
  background: rgba(255, 215, 0, 0.15);
  color: #fde047;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Card Title & Description */
.sb-case-title {
  font-family: var(--sb-font-heading, "Space Grotesk", sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.sb-case-card:hover .sb-case-title {
  color: #ffffff;
}

.sb-case-desc {
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
}

/* Metric Counter Grid */
.sb-case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  margin-bottom: 22px;
}

.sb-case-stat-box {
  text-center: center;
  text-align: center;
}

.sb-case-stat-val {
  font-family: var(--sb-font-heading, "Space Grotesk", sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}

.sb-case-card:hover .sb-case-stat-val {
  background: linear-gradient(135deg, #a855f7 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sb-case-stat-lbl {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tech Badges */
.sb-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sb-case-tag {
  font-size: 0.76rem;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.sb-case-tag i {
  color: #a855f7;
  font-size: 0.7rem;
}

.sb-case-card:hover .sb-case-tag {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.25);
}

/* Card CTA Action Button */
.sb-case-footer {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sb-case-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sb-case-btn i {
  transition: transform 0.3s ease;
}

.sb-case-btn-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.sb-case-btn-cyan {
  background: rgba(0, 242, 254, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.sb-case-btn-emerald {
  background: rgba(0, 255, 135, 0.12);
  color: #6ee7b7;
  border: 1px solid rgba(0, 255, 135, 0.3);
}

.sb-case-btn-gold {
  background: rgba(255, 215, 0, 0.12);
  color: #fde047;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.sb-case-btn:hover {
  background: linear-gradient(135deg, #a855f7, #00f2fe);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.3);
}

.sb-case-btn:hover i {
  transform: translateX(6px);
}

/* ============================================
   CAREERS PREVIEW
   ============================================ */
.sb-careers-list {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-md);
  max-width: 800px;
  margin: 0 auto;
}

.sb-career-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sb-space-lg) var(--sb-space-xl);
  background: var(--sb-gray-800);
  border: 1px solid var(--sb-gray-700);
  border-radius: var(--sb-radius-lg);
  text-decoration: none;
  transition: all var(--sb-transition-base);
}

.sb-career-card:hover {
  border-color: var(--sb-yellow-20);
  transform: translateX(4px);
}

.sb-career-title {
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-white);
  font-size: var(--sb-fs-body);
}

.sb-career-details {
  display: flex;
  gap: var(--sb-space-lg);
}

.sb-career-detail {
  font-size: var(--sb-fs-caption);
  color: var(--sb-gray-400);
  display: flex;
  align-items: center;
  gap: var(--sb-space-2xs);
}

.sb-career-arrow {
  color: var(--sb-yellow);
  font-size: 0.875rem;
  transition: transform var(--sb-transition-fast);
}

.sb-career-card:hover .sb-career-arrow {
  transform: translateX(4px);
}

/* ============================================
   MILITARY-GRADE SECURITY SECTION
   ============================================ */
.sb-mil-section {
  position: relative;
  overflow: hidden;
  background: var(--sb-gray-950);
  padding: 100px 0;
  border-top: 1px solid rgba(255, 212, 0, 0.12);
  border-bottom: 1px solid rgba(255, 212, 0, 0.12);
}

.sb-mil-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sb-mil-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 212, 0, 0.07) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
}

.sb-mil-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(255, 212, 0, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 212, 0, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}

/* --- Badge --- */
.sb-mil-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(255, 212, 0, 0.06);
  border: 1px solid rgba(255, 212, 0, 0.2);
  border-radius: var(--sb-radius-full);
  margin-bottom: var(--sb-space-md);
  backdrop-filter: blur(8px);
}

.sb-mil-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--sb-yellow);
  border-radius: 50%;
  animation: sb-mil-pulse-dot 2s infinite ease-in-out;
}

.sb-mil-badge-txt {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-caption);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-yellow);
  letter-spacing: var(--sb-ls-wider);
}

/* --- Title --- */
.sb-mil-title {
  font-size: var(--sb-fs-h2);
  line-height: var(--sb-lh-tight);
  margin-bottom: var(--sb-space-xs);
  display: flex;
  flex-direction: column;
  font-size: 30px;
}

.sb-mil-title-grad {
  background: linear-gradient(135deg, #fff 0%, #ffd400 50%, #ffe680 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sb-mil-shimmer 4s ease infinite;
  font-weight: var(--sb-fw-extrabold);
}

.sb-mil-beam {
  height: 3px;
  width: 120px;
  background: linear-gradient(90deg, var(--sb-yellow), transparent);
  margin: var(--sb-space-md) 0 var(--sb-space-lg);
  border-radius: 2px;
  animation: sb-mil-beam 3s infinite ease-in-out;
}

.sb-mil-desc {
  color: var(--sb-gray-300);
  font-size: var(--sb-fs-body);
  line-height: var(--sb-lh-relaxed);
  margin-bottom: var(--sb-space-xl);
}

/* --- Feature Cards --- */
.sb-mil-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-sm);
  margin-bottom: var(--sb-space-xl);
}

.sb-mil-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-md);
  padding: 14px var(--sb-space-lg);
  background: rgba(17, 17, 17, 0.65);
  border: 1px solid rgba(255, 212, 0, 0.1);
  border-radius: var(--sb-radius-xl);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.sb-mil-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--sb-yellow);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sb-mil-card:hover {
  transform: translateX(5px);
  border-color: rgba(255, 212, 0, 0.3);
  background: rgba(26, 26, 26, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 212, 0, 0.06);
}

.sb-mil-card:hover::before {
  opacity: 1;
}

.sb-mil-card-ico {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: rgba(255, 212, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.18);
  border-radius: var(--sb-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-yellow);
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.sb-mil-card:hover .sb-mil-card-ico {
  background: var(--sb-yellow);
  color: var(--sb-black);
  box-shadow: 0 0 12px rgba(255, 212, 0, 0.35);
}

.sb-mil-card-body {
  flex: 1;
}

.sb-mil-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-sm);
  margin-bottom: 3px;
}

.sb-mil-card-name {
  font-size: var(--sb-fs-body);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-white);
  margin: 0;
}

.sb-mil-card-tag {
  font-family: var(--sb-font-mono);
  font-size: 0.65rem;
  color: var(--sb-yellow);
  background: rgba(255, 212, 0, 0.07);
  border: 1px solid rgba(255, 212, 0, 0.18);
  padding: 2px 8px;
  border-radius: var(--sb-radius-sm);
  white-space: nowrap;
}

.sb-mil-card-txt {
  font-size: var(--sb-fs-body-sm);
  color: var(--sb-gray-400);
  margin: 0;
  line-height: var(--sb-lh-normal);
}

/* --- Certification Badges --- */
.sb-mil-certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sb-space-sm);
  margin-bottom: var(--sb-space-xl);
}

.sb-mil-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--sb-radius-md);
  font-size: var(--sb-fs-body-sm);
  font-weight: var(--sb-fw-medium);
  color: var(--sb-gray-300);
  transition: all 0.3s ease;
}

.sb-mil-cert i {
  color: var(--sb-yellow);
  font-size: 0.8rem;
}

.sb-mil-cert:hover {
  border-color: rgba(255, 212, 0, 0.25);
  color: var(--sb-white);
  background: rgba(255, 212, 0, 0.04);
}

/* --- Buttons --- */
.sb-mil-btns {
  display: flex;
  gap: var(--sb-space-md);
  flex-wrap: wrap;
}

.sb-mil-btn-pri {
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.2);
}

.sb-mil-btn-pri:hover {
  box-shadow: 0 0 30px rgba(255, 212, 0, 0.4);
}

/* --- HUD Card --- */
.sb-mil-hud {
  position: relative;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(255, 212, 0, 0.18);
  border-radius: var(--sb-radius-2xl);
  padding: 22px;
  overflow: hidden;
  animation: sb-mil-hud-glow 5s infinite ease-in-out;
  backdrop-filter: blur(14px);
}

.sb-mil-hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 212, 0, 0.1);
  margin-bottom: 18px;
}

.sb-mil-hud-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-mil-dot {
  width: 7px;
  height: 7px;
  background: var(--sb-success);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--sb-success);
}

.sb-mil-dot-text {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-caption);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-success);
  letter-spacing: 0.04em;
}

.sb-mil-hud-spec {
  font-family: var(--sb-font-mono);
  font-size: 0.65rem;
  color: var(--sb-gray-400);
  letter-spacing: 0.04em;
}

/* --- Corner Brackets --- */
.sb-mil-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--sb-yellow);
  border-style: solid;
  pointer-events: none;
  z-index: 5;
}

.sb-mil-c-tl {
  top: 7px;
  left: 7px;
  border-width: 2px 0 0 2px;
}

.sb-mil-c-tr {
  top: 7px;
  right: 7px;
  border-width: 2px 2px 0 0;
}

.sb-mil-c-bl {
  bottom: 7px;
  left: 7px;
  border-width: 0 0 2px 2px;
}

.sb-mil-c-br {
  bottom: 7px;
  right: 7px;
  border-width: 0 2px 2px 0;
}

/* --- HUD Visual --- */
.sb-mil-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(255, 212, 0, 0.04) 0%, transparent 70%);
  border-radius: var(--sb-radius-xl);
}

.sb-mil-scan {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sb-yellow), transparent);
  box-shadow: 0 0 12px var(--sb-yellow);
  z-index: 4;
  animation: sb-mil-scanner 4s linear infinite;
  pointer-events: none;
}

.sb-mil-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 212, 0, 0.2);
  pointer-events: none;
  z-index: 2;
}

.sb-mil-ring-out {
  width: 240px;
  height: 240px;
  animation: sb-mil-spin-cw 25s linear infinite;
  border-top-color: var(--sb-yellow);
}

.sb-mil-ring-in {
  width: 180px;
  height: 180px;
  animation: sb-mil-spin-ccw 15s linear infinite;
  border-bottom-color: var(--sb-yellow);
}

/* --- HUD Footer Metrics --- */
.sb-mil-metrics {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 212, 0, 0.1);
  text-align: center;
}

.sb-mil-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-mil-metric-val {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-body);
  font-weight: var(--sb-fw-bold);
  color: var(--sb-yellow);
}

.sb-mil-metric-lbl {
  font-size: 0.65rem;
  color: var(--sb-gray-400);
}

.sb-mil-metric-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 212, 0, 0.12);
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .sb-mil-section {
    padding: 60px 0;
  }

  .sb-mil-hud {
    margin-bottom: 28px;
  }

  .sb-mil-metrics {
    flex-direction: column;
    gap: 10px;
  }

  .sb-mil-metric-sep {
    display: none;
  }

  .sb-mil-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 575.98px) {
  .sb-mil-certs {
    gap: 6px;
  }

  .sb-mil-cert {
    font-size: var(--sb-fs-caption);
    padding: 4px 8px;
  }

  .sb-mil-btns {
    flex-direction: column;
  }

  .sb-mil-ring-out {
    width: 180px;
    height: 180px;
  }

  .sb-mil-ring-in {
    width: 130px;
    height: 130px;
  }
}

/* ============================================
   UNIFIED BACKGROUND — MATCHING SUCCESS STORIES
   Override all section backgrounds so the entire
   page renders as one seamless continuous canvas.
   Reference: #caseStudies.sb-case-section
   ============================================ */

/* Unified background gradient for every content section */
#products.sb-products-section,
#walletSecurity.sb-mil-section,
#smartContracts,
#globalStats.sb-section-alt,
#analytics,
#safeBlockParticles,
#aiFraud.sb-section-alt,
#multiChain,
#devPlatform.sb-section-alt,
#testimonials,
#pricing.sb-section-alt,
#faq.sb-section-alt,
#blog,
#newsletter.sb-section-alt,
#certifications,
#partners.sb-partners-section,
#roadmap,
#community,
#downloadApps.sb-section-alt,
#contact.sb-section-alt {
  background: linear-gradient(180deg, #070618 0%, #0d0b2e 50%, #060512 100%) !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Ensure all section content stacks above background effects */
.sb-section > .container,
.sb-section > .container-fluid {
  position: relative;
  z-index: 2;
}

/* ============================================
   UNIFIED FLOATING ICONS — All sections except Success Stories
   Smaller icons, repositioned to avoid overlapping content
   ============================================ */

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon {
  width: 48px;
  height: 48px;
  font-size: 1.15rem;
}

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon:nth-child(1) {
  top: 5%;
  left: 2%;
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  animation-delay: 0s;
}

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon:nth-child(2) {
  top: 7%;
  right: 2%;
  color: #00ff87;
  border-color: rgba(0, 255, 135, 0.45);
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.3);
  animation-delay: 1s;
}

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon:nth-child(3) {
  bottom: 15%;
  left: 2%;
  color: #14f195;
  border-color: rgba(20, 241, 149, 0.45);
  box-shadow: 0 0 20px rgba(20, 241, 149, 0.35);
  animation-delay: 2s;
}

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon:nth-child(4) {
  bottom: 10%;
  right: 2%;
  color: #26a17b;
  border-color: rgba(38, 161, 123, 0.45);
  box-shadow: 0 0 20px rgba(38, 161, 123, 0.35);
  animation-delay: 0.7s;
}

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon:nth-child(5) {
  top: 48%;
  left: 1%;
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
  animation-delay: 1.5s;
}

.sb-section:not(.sb-case-section) > .sb-case-floating-crypto .sb-crypto-icon:nth-child(6) {
  top: 52%;
  right: 1%;
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.35);
  animation-delay: 2.5s;
}

@media (max-width: 991.98px) {
  .sb-section:not(.sb-case-section) > .sb-case-floating-crypto {
    display: none;
  }
}