/*
 * ═══════════════════════════════════════════════════════════════════
 *  SWEDBANG — HOMEPAGE PREMIUM REDESIGN v2.0
 *  Targets: service cards, solutions grid, stats, section text, CTAs
 *  Does NOT touch: logos, header, footer, hero animation, 3D globe, map
 * ═══════════════════════════════════════════════════════════════════
 */

/* ── 0. CUSTOM FONT TOKENS ─────────────────────────────────────────── */
:root {
  --pm-cyan:    #00E5FF;
  --pm-blue:    #4DA3FF;
  --pm-purple:  #A78BFF;
  --pm-gold:    #FFD166;
  --pm-text1:   #EBF2FF;
  --pm-text2:   #8EA8C8;
  --pm-surface: rgba(255,255,255,0.035);
  --pm-border:  rgba(255,255,255,0.07);
  --pm-ease:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 1. SECTION TYPOGRAPHY — more compelling, less bland ──────────── */
.sb-eyebrow {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, var(--pm-cyan), var(--pm-purple)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 14px !important;
  display: inline-block !important;
}

.sb-section-title {
  font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: var(--pm-text1) !important;
  background: linear-gradient(135deg, #EBF2FF 0%, #B8D0F0 60%, #8EA8C8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.sb-section-header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

/* ── 2. CORE CARDS (3-up: Technology Sourcing / Email / Digital) ───── */

/* Fix: icon header should NOT be full-width — just wrap the icon */
.sb-card-header {
  margin-bottom: 24px !important;
  width: fit-content !important;  /* ← removes the stretched bar gap */
}

/* Icon container: more premium, no wide bar */
.sb-card-icon-accent {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: transform 0.3s var(--pm-ease), box-shadow 0.3s var(--pm-ease) !important;
}
.sb-card-icon-accent.accent-cyan {
  background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(0,229,255,0.06)) !important;
  border: 1px solid rgba(0,229,255,0.35) !important;
  box-shadow: 0 0 0 0 rgba(0,229,255,0), inset 0 1px 0 rgba(0,229,255,0.2) !important;
  color: #00E5FF !important;
}
.sb-card-icon-accent.accent-blue {
  background: linear-gradient(135deg, rgba(77,163,255,0.15), rgba(77,163,255,0.06)) !important;
  border: 1px solid rgba(77,163,255,0.35) !important;
  box-shadow: 0 0 0 0 rgba(77,163,255,0), inset 0 1px 0 rgba(77,163,255,0.2) !important;
  color: #4DA3FF !important;
}
.sb-card-icon-accent.accent-magenta {
  background: linear-gradient(135deg, rgba(167,139,255,0.15), rgba(167,139,255,0.06)) !important;
  border: 1px solid rgba(167,139,255,0.35) !important;
  box-shadow: 0 0 0 0 rgba(167,139,255,0), inset 0 1px 0 rgba(167,139,255,0.2) !important;
  color: #A78BFF !important;
}

/* Card glass — deeper, more luxurious */
.sb-card-glass {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 50%,
    rgba(255,255,255,0.035) 100%
  ) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  padding: 36px !important;
  transition: transform 0.4s var(--pm-ease), box-shadow 0.4s var(--pm-ease), border-color 0.4s !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25) !important;
}
.sb-card-glass:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35) !important;
}
.sb-card-glass:hover .sb-card-icon-accent {
  transform: scale(1.1) !important;
}
.sb-border-cyan { border-color: rgba(0,229,255,0.2) !important; }
.sb-border-blue { border-color: rgba(77,163,255,0.18) !important; }
.sb-border-magenta { border-color: rgba(167,139,255,0.18) !important; }
.sb-border-cyan:hover { border-color: rgba(0,229,255,0.45) !important; box-shadow: 0 16px 48px rgba(0,229,255,0.06), 0 0 0 1px rgba(0,229,255,0.15) !important; }
.sb-border-blue:hover { border-color: rgba(77,163,255,0.45) !important; box-shadow: 0 16px 48px rgba(77,163,255,0.06), 0 0 0 1px rgba(77,163,255,0.15) !important; }
.sb-border-magenta:hover { border-color: rgba(167,139,255,0.45) !important; box-shadow: 0 16px 48px rgba(167,139,255,0.06), 0 0 0 1px rgba(167,139,255,0.15) !important; }

/* Card title — bolder, more readable */
.sb-core-title {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important;
  font-weight: 700 !important;
  color: #EBF2FF !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

/* Card description — warmer, more inviting */
.sb-core-desc {
  font-size: clamp(0.875rem, 1.2vw, 0.975rem) !important;
  line-height: 1.75 !important;
  color: #8EA8C8 !important;
  letter-spacing: 0.01em !important;
}

/* ── 3. SOLUTIONS GRID (4 tiles) ────────────────────────────────────── */

.sb-tile-colorful {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.048) 0%,
    rgba(255,255,255,0.02) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 30px !important;
  transition: transform 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease), border-color 0.35s !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2) !important;
}
.sb-tile-colorful:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.3) !important;
}

/* Tile icon — compact, no gap */
.sb-tile-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  flex-shrink: 0 !important;
  width: fit-content !important; /* ← removes extra horizontal space */
}
.sb-tile-icon.accent-cyan {
  background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(0,229,255,0.05)) !important;
  border: 1px solid rgba(0,229,255,0.3) !important;
  color: #00E5FF !important;
  width: 40px !important;
  height: 40px !important;
}
.sb-tile-icon.accent-blue {
  background: linear-gradient(135deg, rgba(77,163,255,0.15), rgba(77,163,255,0.05)) !important;
  border: 1px solid rgba(77,163,255,0.3) !important;
  color: #4DA3FF !important;
  width: 40px !important;
  height: 40px !important;
}

/* Solution tile title */
.sb-sol-title {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem) !important;
  font-weight: 700 !important;
  color: #EBF2FF !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}

/* Solution tile desc */
.sb-sol-desc {
  font-size: clamp(0.82rem, 1.1vw, 0.92rem) !important;
  line-height: 1.7 !important;
  color: #7A9ABF !important;
}

/* ── 4. STATS SECTION ───────────────────────────────────────────────── */

.sb-stat {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.018) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  transition: transform 0.35s var(--pm-ease), box-shadow 0.35s var(--pm-ease) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.18) !important;
}
.sb-stat:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.28) !important;
  border-color: rgba(0,229,255,0.15) !important;
}

.sb-stat-value {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  background: linear-gradient(90deg, #00E5FF, #4DA3FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(0,229,255,0.2) !important;
}

.sb-stat-label {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #8EA8C8 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
}

/* ── 5. SECTION BODY TEXT — any paragraphs inside sb-section ─────── */
.sb-section p,
.sb-stats-section p {
  color: #8EA8C8 !important;
  line-height: 1.75 !important;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem) !important;
}

/* Section divider accent line */
.sb-section-header::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, var(--pm-cyan), var(--pm-purple));
  border-radius: 2px;
  opacity: 0.7;
}

/* "Built for businesses..." tagline */
.sb-stats-section .sb-section-title {
  font-size: clamp(1.2rem, 2.5vw, 1.85rem) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* ── 6. SECTION BACKGROUND — subtle depth gradient ──────────────────── */
.sb-section {
  position: relative !important;
  padding: clamp(60px, 7vw, 100px) 0 !important;
}
.sb-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,229,255,0.03), transparent 70%) !important;
  pointer-events: none !important;
}

/* ── 7. TAG PILLS (region tags) ─────────────────────────────────────── */
.sb-tag-pill {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 10px 22px !important;
  border-radius: 100px !important;
  transition: all 0.28s var(--pm-ease) !important;
  background: rgba(255,255,255,0.03) !important;
}
.sb-tag-pill:hover {
  transform: translateY(-3px) !important;
  background: rgba(0,229,255,0.06) !important;
}

/* ── 8. CORE SECTION — "Core Offerings" label fix ──────────────────── */
.sb-section > .sb-container .sb-eyebrow.text-cyan {
  color: transparent !important;
}

/* ── 9. RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sb-card-glass { padding: 28px !important; border-radius: 14px !important; }
  .sb-tile-colorful { padding: 24px !important; }
  .sb-stat { padding: 24px 20px !important; }
  .sb-card-icon-accent { width: 42px !important; height: 42px !important; }
  .sb-section-title { letter-spacing: -0.02em !important; }
  .sb-section-header::after { margin-top: 12px !important; }
}