/* ═══════════════════════════════════════════════════════════════════
   SWEDBANG — LUXURY PREMIUM REDESIGN 2026
   Applies exclusively to: Supply, Global Operations, Why SwedBang,
   How We Work, Get Started sections.
   Does NOT touch: hero, video player, or 3D map.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── GLOBAL SECTION POLISH ─────────────────────────────────────── */

#sbhp-supply,
#sbhp-global,
#sbhp-why,
#sbhp-process,
#sbhp-contact {
  background: transparent;
  position: relative;
}

/* Luxury ambient glow behind each section */
#sbhp-supply::after,
#sbhp-why::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 40% at 50% 50%, rgba(0,180,255,0.028) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── EYEBROW LABELS ────────────────────────────────────────────── */

#sbhp-supply .sbhp-eyebrow,
#sbhp-global .sbhp-eyebrow,
#sbhp-why .sbhp-eyebrow,
#sbhp-process .sbhp-eyebrow,
#sbhp-contact .sbhp-eyebrow {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #00E5FF 0%, #A78BFF 60%, #FF7ED4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  margin-bottom: 18px !important;
  display: inline-block !important;
  position: relative !important;
}

/* Subtle line after eyebrow */
#sbhp-supply .sbhp-eyebrow::after,
#sbhp-global .sbhp-eyebrow::after,
#sbhp-why .sbhp-eyebrow::after,
#sbhp-process .sbhp-eyebrow::after,
#sbhp-contact .sbhp-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, #00E5FF, transparent);
  margin: 8px auto 0;
}

/* ── SECTION TITLES ────────────────────────────────────────────── */

#sbhp-supply .sbhp-section-title,
#sbhp-why .sbhp-section-title,
#sbhp-process .sbhp-section-title {
  font-family: 'Cormorant Garamond', 'Satoshi', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3.6vw, 52px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  background: linear-gradient(
    130deg,
    #FFFFFF  0%,
    #C8DDFF 25%,
    #70CFFF 52%,
    #A78BFF 78%,
    #FFFFFF 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  margin-bottom: 20px !important;
  filter: drop-shadow(0 2px 30px rgba(0,200,255,0.12)) !important;
}

#sbhp-global .sbhp-section-title {
  font-family: 'Cormorant Garamond', 'Satoshi', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(24px, 3vw, 46px) !important;
  letter-spacing: -0.015em !important;
  background: linear-gradient(120deg, #FFFFFF 0%, #52E5FF 40%, #A78BFF 75%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

#sbhp-contact .sbhp-section-title {
  font-family: 'Cormorant Garamond', 'Satoshi', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3.4vw, 50px) !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(125deg, #FFFFFF 0%, #D4BBFF 30%, #A78BFF 55%, #FF7ED4 78%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── SECTION BODY TEXT ─────────────────────────────────────────── */

#sbhp-supply .sbhp-section-text,
#sbhp-global .sbhp-section-text,
#sbhp-why .sbhp-section-text,
#sbhp-process .sbhp-section-text {
  color: #9FBDD8 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* ── SUPPLY & WHY CARDS ─────────────────────────────────────────── */

.sbhp-supply-card,
.sbhp-feature-card {
  background: linear-gradient(
    148deg,
    rgba(14, 22, 52, 0.95) 0%,
    rgba(10, 16, 40, 0.98) 100%
  ) !important;
  border: 1px solid rgba(90, 130, 255, 0.13) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.35s ease !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Prismatic top-left accent line */
.sbhp-supply-card::before,
.sbhp-feature-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 229, 255, 0.55) 30%,
    rgba(167, 139, 255, 0.45) 65%,
    transparent 100%
  ) !important;
}

/* Subtle radial glow on hover */
.sbhp-supply-card::after,
.sbhp-feature-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,180,255,0.07) 0%, transparent 70%) !important;
  border-radius: 16px !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.sbhp-supply-card:hover::after,
.sbhp-feature-card:hover::after {
  opacity: 1 !important;
}

.sbhp-supply-card:hover,
.sbhp-feature-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 229, 255, 0.28) !important;
  box-shadow:
    0 32px 72px rgba(4, 8, 24, 0.75),
    0 0 0 1px rgba(0, 229, 255, 0.18),
    0 0 60px rgba(0, 200, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  background: linear-gradient(
    148deg,
    rgba(18, 28, 66, 0.99) 0%,
    rgba(12, 20, 52, 1.00) 100%
  ) !important;
}

/* Card number accent — optional icon area */
.sbhp-supply-card > *,
.sbhp-feature-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Card headings */
.sbhp-supply-card h3,
.sbhp-feature-card h3 {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
  background: linear-gradient(105deg, #FFFFFF 0%, #C0D8FF 50%, #EAFAFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.25 !important;
  transition: none !important;
}

.sbhp-supply-card:hover h3,
.sbhp-feature-card:hover h3 {
  background: linear-gradient(105deg, #00E5FF 0%, #A0DAFF 45%, #E0F8FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Card body text */
.sbhp-supply-card p,
.sbhp-feature-card p {
  color: #8BA5C8 !important;
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
}

/* ── STAT CARDS ─────────────────────────────────────────────────── */

.sbhp-stat-card {
  background: linear-gradient(
    155deg,
    rgba(14, 24, 54, 0.92) 0%,
    rgba(10, 16, 40, 0.96) 100%
  ) !important;
  border: 1px solid rgba(80, 120, 255, 0.14) !important;
  border-radius: 14px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.sbhp-stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.5), transparent) !important;
}

.sbhp-stat-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0,229,255,0.22) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 40px rgba(0,180,255,0.08) !important;
}

/* Stat emoji icon */
.sbhp-stat-icon {
  display: block !important;
  font-size: 28px !important;
  margin-bottom: 12px !important;
  filter: saturate(1.2) brightness(1.1) !important;
}

/* Stat number */
.sbhp-stat-number {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-size: clamp(22px, 2.5vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  background: linear-gradient(90deg, #43D7FF 0%, #A78BFF 55%, #FF7ED4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 6px !important;
}

/* Stat label */
.sbhp-stat-label {
  color: #8EA8C4 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

/* Stat sub-label */
#sbhp-global-stats .sbhp-stat-card div[style*="11px"] {
  color: #556A8A !important;
  font-size: 11px !important;
}

/* ── PROCESS STEPS ─────────────────────────────────────────────── */

.sbhp-process-sequence {
  position: relative !important;
}

.sbhp-step {
  background: linear-gradient(
    145deg,
    rgba(13, 21, 50, 0.94) 0%,
    rgba(9, 15, 38, 0.97) 100%
  ) !important;
  border: 1px solid rgba(80, 110, 220, 0.14) !important;
  border-radius: 16px !important;
  padding: 34px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.32s ease, border-color 0.3s ease !important;
}

.sbhp-step::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(167,139,255,0.45), rgba(0,229,255,0.35), transparent) !important;
}

.sbhp-step:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(167, 139, 255, 0.25) !important;
  box-shadow: 0 24px 60px rgba(4, 8, 24, 0.70), 0 0 50px rgba(140, 90, 255, 0.10) !important;
}

/* Step number badge */
.sbhp-step-num {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Satoshi', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 20px !important;
  background: linear-gradient(135deg, rgba(0,229,255,0.12) 0%, rgba(167,139,255,0.12) 100%) !important;
  border: 1.5px solid rgba(0, 229, 255, 0.3) !important;
  color: #00E5FF !important;
  -webkit-text-fill-color: #00E5FF !important;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.06), 0 0 20px rgba(0, 229, 255, 0.14) !important;
}

/* Step heading */
.sbhp-step h3 {
  font-family: 'Satoshi', system-ui, sans-serif !important;
  color: #DDE8FF !important;
  -webkit-text-fill-color: #DDE8FF !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.sbhp-step:hover h3 {
  color: #E8F2FF !important;
  -webkit-text-fill-color: #E8F2FF !important;
}

/* Step body */
.sbhp-step p {
  color: #7A98BA !important;
  font-size: 14px !important;
  line-height: 1.76 !important;
  font-weight: 400 !important;
}

/* ── GLOBAL OPERATIONS SECTION ──────────────────────────────────── */

#sbhp-global .sbhp-section-text {
  color: #8AA4C6 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

#sbhp-global .sbhp-caption {
  font-size: 14px !important;
  line-height: 1.68 !important;
  color: #5A7090 !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
  margin-top: 24px !important;
}

/* ── CONTACT / GET STARTED SECTION ─────────────────────────────── */

#sbhp-contact {
  background: linear-gradient(180deg, #060E22 0%, #0A1432 55%, #060E22 100%) !important;
}

#sbhp-contact::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.35), rgba(167,139,255,0.30), transparent) !important;
  pointer-events: none !important;
}

#sbhp-contact .sbhp-section-text {
  color: #8CA8C4 !important;
  font-size: 16.5px !important;
  line-height: 1.72 !important;
  max-width: 520px !important;
  margin: 0 auto 40px !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────────── */

/* Primary button — electric sapphire */
.sbhp-btn-primary {
  background: linear-gradient(135deg, #0044CC 0%, #0088FF 48%, #00CCFF 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 14px 30px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 6px 28px rgba(0,120,255,0.40), 0 0 0 1px rgba(0,200,255,0.18) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.sbhp-btn-primary::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.45s ease !important;
}

.sbhp-btn-primary:hover::after {
  transform: translateX(100%) !important;
}

.sbhp-btn-primary:hover {
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow: 0 12px 44px rgba(0,140,255,0.55), 0 0 0 1px rgba(0,229,255,0.30) !important;
}

/* Secondary button — refined glass */
.sbhp-btn-secondary {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #C0D4F0 !important;
  -webkit-text-fill-color: #C0D4F0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.025em !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.sbhp-btn-secondary:hover {
  background: rgba(0, 229, 255, 0.07) !important;
  border-color: rgba(0, 229, 255, 0.40) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,229,255,0.08) !important;
}

/* ── SECTION SEPARATORS (thin luminous dividers) ─────────────────── */

#sbhp-supply::before,
#sbhp-why::before,
#sbhp-process::before,
#sbhp-global::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,229,255,0.14) 30%,
    rgba(167,139,255,0.10) 60%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

/* ── BRAND FILM SECTION TEXT ─────────────────────────────────────── */

#sbhp-brand-film .sbhp-eyebrow {
  background: linear-gradient(90deg, #00E5FF 0%, #A78BFF 70%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.28em !important;
  font-size: 10px !important;
}

#sbhp-brand-film .sbhp-section-title {
  font-family: 'Cormorant Garamond', 'Satoshi', sans-serif !important;
  font-size: clamp(28px, 3.5vw, 50px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(100deg, #FFF 0%, #7DDFFF 40%, #C8AAFF 70%, #FFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#sbhp-brand-film .sbhp-subheadline {
  color: #8AACCC !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
}

/* ── GLOBAL REACH SECTION TEXT ───────────────────────────────────── */

#sbhp-global-reach .sbhp-eyebrow {
  background: linear-gradient(90deg, #00E5FF 0%, #7CFFCB 50%, #A78BFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.28em !important;
}

#sbhp-global-reach .sbhp-subheadline {
  color: #8AAEC8 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

/* ── RESPONSIVE MOBILE TWEAKS ────────────────────────────────────── */

@media (max-width: 767px) {
  .sbhp-supply-card,
  .sbhp-feature-card {
    padding: 28px 22px !important;
    border-radius: 14px !important;
  }

  .sbhp-step {
    padding: 26px 22px !important;
    border-radius: 14px !important;
  }

  .sbhp-supply-card h3,
  .sbhp-feature-card h3 {
    font-size: 17px !important;
  }

  #sbhp-supply .sbhp-section-title,
  #sbhp-why .sbhp-section-title,
  #sbhp-process .sbhp-section-title {
    font-size: clamp(26px, 7vw, 38px) !important;
  }
}