/*
 * ═══════════════════════════════════════════════════════════════
 *  SWEDBANG TECHTRADE — LUXURY POLISH v2.0
 *  Scope: Typography · Cards · Spacing · Alignment · Readability
 *  Safe: Does NOT touch hero, map, canvas, video, animations
 *  Works: Homepage + all 50+ inner pages
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── 1. REFINED TYPOGRAPHY SCALE ─────────────────────────────── */

/* Page-level headings — sharper, more premium */
h1, .ip-title, .page-title, .sbhp-headline,
.ent-page-title, [class*="page-heading"] {
  font-size: clamp(32px, 5vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: #F0F6FF !important;
}

/* Section headings */
h2, .ip-section-heading, .sbhp-section-title,
.ent-section-title, [class*="section-title"]:not(.sbhp-eyebrow) {
  font-size: clamp(22px, 3.2vw, 42px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: #EBF2FF !important;
  margin-bottom: 16px !important;
}

/* Sub-headings / card titles */
h3, .ip-section-title, .sbhp-card-title,
.ent-card-title, [class*="card-title"] {
  font-size: clamp(17px, 2vw, 24px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.25 !important;
  color: #DCE8FF !important;
}

h4, h5, h6 {
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: #CADAEF !important;
}

/* Eyebrow labels — consistent across all pages */
.ip-section-eyebrow, .sbhp-eyebrow, .section-eyebrow,
.ip-eyebrow, [class*="eyebrow"], [class*="label-tag"],
.ent-eyebrow {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #00D4FF !important;
  opacity: 0.9 !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* Body / description text — warm, readable */
.ip-section-body, .ip-section-text, .sbhp-section-text,
.sbhp-subheadline, .ent-body, p:not([class*="badge"]):not(.sb-trust-item p),
[class*="description"]:not([class*="meta"]) {
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.82 !important;
  color: #B8CCDF !important;
  font-weight: 420 !important;
  max-width: 72ch;
}

/* Muted / meta text */
.text-muted, small, .ip-text-3, .ip-text-4,
[class*="meta-text"], [class*="caption"] {
  font-size: 13px !important;
  color: #7A92B4 !important;
  line-height: 1.6 !important;
}

/* ─── 2. SECTION SPACING — breathable premium layout ──────────── */

/* ip-section: DO NOT add extra padding — each inner page controls its own spacing */
/* ent-section: only add side padding, not vertical — avoid double gaps */
.ent-section:not(.ent-footer):not(.ent-bottom-bar) {
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}

/* Inner page content container */
.ip-container, .ent-container,
.container-enterprise, .sbhp-container {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}

/* Section title block — consistent top spacing */
.ip-section-heading + .ip-section-body,
.sbhp-section-title + .sbhp-section-text,
h2 + p, h3 + p {
  margin-top: 18px !important;
}

/* ─── 3. CARD SYSTEM — luxury glass-dark refinement ───────────── */

/* Universal card base */
.sbhp-supply-card, .sbhp-feature-card, .sbhp-stat-card,
.sbhp-step-card, .ip-card, .ent-card,
[class*="feature-card"], [class*="service-card"],
[class*="plan-card"], [class*="info-card"],
[class*="solution-card"], [class*="product-card"] {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.045) 0%,
    rgba(14, 30, 72, 0.60) 50%,
    rgba(255,255,255,0.02) 100%
  ) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(0, 198, 255, 0.13) !important;
  border-radius: 18px !important;
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.04) inset,
    0 8px 32px rgba(0,0,0,0.40),
    0 0 0 1px rgba(0,150,255,0.06) !important;
  transition: transform 0.32s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.32s cubic-bezier(0.23,1,0.32,1),
              border-color 0.32s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Top gradient accent line on every card */
.sbhp-supply-card::before, .sbhp-feature-card::before,
.ip-card::before, .ent-card::before,
[class*="feature-card"]::before, [class*="service-card"]::before,
[class*="plan-card"]::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,212,255,0.55) 35%,
    rgba(155,121,255,0.45) 65%,
    transparent 100%
  ) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

/* Card hover — lift with cyan glow */
.sbhp-supply-card:hover, .sbhp-feature-card:hover,
.ip-card:hover, .ent-card:hover,
[class*="feature-card"]:hover, [class*="service-card"]:hover,
[class*="plan-card"]:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0,212,255,0.28) !important;
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.06) inset,
    0 24px 56px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,200,255,0.16),
    0 0 48px rgba(0,180,255,0.10) !important;
}

/* Card padding — comfortable premium */
.sbhp-supply-card, .sbhp-feature-card,
.ip-card, .ent-card {
  padding: clamp(24px, 3vw, 36px) !important;
}

/* ─── 4. STAT / NUMBER CARDS ───────────────────────────────────── */

.sbhp-stat-card {
  text-align: center !important;
  padding: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 28px) !important;
}

.sbhp-stat-value, [class*="stat-value"],
[class*="stat-number"], [class*="counter-value"] {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #00D4FF 0%, #7B5CFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: block !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.sbhp-stat-label, [class*="stat-label"] {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #7A92B4 !important;
}

/* ─── 5. PROCESS / STEP CARDS ──────────────────────────────────── */

.sbhp-step-num, [class*="step-number"], [class*="step-num"] {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(0,212,255,0.14) 0%, rgba(123,92,255,0.12) 100%) !important;
  border: 1px solid rgba(0,212,255,0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #00D4FF !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
}

/* ─── 6. CTA BUTTONS — crisp, premium ─────────────────────────── */

/* Primary CTA */
.sbhp-btn-primary, .ip-btn-primary, .ent-btn-primary,
.sb-btn-primary, [class*="btn-primary"]:not([class*="sb-dropdown"]) {
  background: linear-gradient(135deg, #00C6FF 0%, #0080CC 100%) !important;
  color: #000F1F !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  padding: 13px 28px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,198,255,0.30) !important;
  transition: all 0.28s cubic-bezier(0.23,1,0.32,1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.sbhp-btn-primary:hover, .ip-btn-primary:hover, .ent-btn-primary:hover,
.sb-btn-primary:hover, [class*="btn-primary"]:not([class*="sb-dropdown"]):hover {
  background: linear-gradient(135deg, #00D4FF 0%, #0090DD 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0,198,255,0.40) !important;
}

/* Secondary / ghost CTA */
.sbhp-btn-secondary, .ip-btn-secondary, .ent-btn-secondary,
.sb-btn-secondary, [class*="btn-secondary"] {
  background: rgba(0,198,255,0.07) !important;
  color: #00C6FF !important;
  font-weight: 650 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  padding: 12px 26px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,198,255,0.25) !important;
  transition: all 0.28s cubic-bezier(0.23,1,0.32,1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.sbhp-btn-secondary:hover, .ip-btn-secondary:hover,
.sb-btn-secondary:hover, [class*="btn-secondary"]:hover {
  background: rgba(0,198,255,0.13) !important;
  border-color: rgba(0,198,255,0.45) !important;
  transform: translateY(-2px) !important;
}

/* ─── 7. INNER PAGE HERO / BANNER ─────────────────────────────── */

.ip-hero, .ip-banner, .ent-hero,
[class*="page-hero"]:not(#sbhp-hero) {
  /* Preserved original padding — do not inflate on mobile */
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
  text-align: center !important;
  background: linear-gradient(
    165deg,
    #060d1f 0%,
    #0a1428 45%,
    #0d1a35 100%
  ) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle top glow on inner page hero */
.ip-hero::before, .ip-banner::before, .ent-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 20% !important; right: 20% !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,212,255,0.6) 40%,
    rgba(123,92,255,0.5) 60%,
    transparent
  ) !important;
  pointer-events: none !important;
}

/* ─── 8. INNER PAGE SECTION ALTERNATION ───────────────────────── */

.ip-section:nth-child(even),
.ent-section:nth-child(even) {
  background: rgba(255,255,255,0.015) !important;
}

/* ─── 9. FEATURE / ICON BLOCKS ────────────────────────────────── */

/* Icon containers */
[class*="feature-icon"], [class*="card-icon"],
[class*="service-icon"], .sbhp-step-icon,
.ip-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(0,212,255,0.12) 0%, rgba(123,92,255,0.10) 100%) !important;
  border: 1px solid rgba(0,212,255,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}

[class*="feature-icon"]:hover,
[class*="card-icon"]:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 24px rgba(0,200,255,0.18) !important;
}

/* ─── 10. DIVIDERS & SEPARATORS ───────────────────────────────── */

hr, .ip-divider, [class*="divider"] {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,198,255,0.15) 25%,
    rgba(0,198,255,0.25) 50%,
    rgba(0,198,255,0.15) 75%,
    transparent 100%
  ) !important;
  margin: clamp(40px,5vw,72px) 0 !important;
}

/* ─── 11. LINKS & INLINE ACCENTS ──────────────────────────────── */

a:not([class*="btn"]):not([class*="nav"]):not([class*="logo"]):not([class*="footer"]):not([class*="mobile"]) {
  color: #00C6FF !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}

a:not([class*="btn"]):not([class*="nav"]):not([class*="logo"]):not([class*="footer"]):not([class*="mobile"]):hover {
  color: #50D8FF !important;
  border-bottom-color: rgba(0,198,255,0.4) !important;
}

/* ─── 12. LIST ITEMS — premium bullet style ───────────────────── */

.ip-section ul:not([class]), .ent-section ul:not([class]),
.sbhp-section ul:not([class]) {
  list-style: none !important;
  padding-left: 0 !important;
}

.ip-section ul:not([class]) li:not([class]),
.ent-section ul:not([class]) li:not([class]) {
  padding-left: 24px !important;
  position: relative !important;
  margin-bottom: 10px !important;
  line-height: 1.72 !important;
  color: #B8CCDF !important;
}

.ip-section ul:not([class]) li::before,
.ent-section ul:not([class]) li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #00C6FF, #7B5CFF) !important;
}

/* ─── 13. BADGES & TAGS ───────────────────────────────────────── */

[class*="badge"]:not([class*="trust"]):not([class*="header"]),
[class*="tag"]:not([class*="html"]):not([class*="body"]) {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 11px !important;
  border-radius: 6px !important;
  background: rgba(0,198,255,0.10) !important;
  color: #00C6FF !important;
  border: 1px solid rgba(0,198,255,0.20) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ─── 14. TABLE STYLING ───────────────────────────────────────── */

table:not([class*="admin"]) {
  width: 100% !important;
  border-collapse: collapse !important;
}

table:not([class*="admin"]) th {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #7A92B4 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(0,198,255,0.12) !important;
  text-align: left !important;
}

table:not([class*="admin"]) td {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(0,198,255,0.06) !important;
  color: #B8CCDF !important;
  font-size: 14.5px !important;
  vertical-align: top !important;
}

table:not([class*="admin"]) tr:hover td {
  background: rgba(0,198,255,0.04) !important;
}

/* ─── 15. FORM INPUTS ─────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(0,198,255,0.16) !important;
  border-radius: 10px !important;
  color: #EBF2FF !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(0,198,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(0,198,255,0.10) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: #4A6080 !important;
}

/* ─── 16. GRID SYSTEMS — consistent alignment ─────────────────── */

/* 3-column feature grids */
.sbhp-card-grid,
[class*="feature-grid"],
[class*="card-grid"],
[class*="services-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: clamp(18px, 2.5vw, 32px) !important;
  align-items: stretch !important;
}

/* 2-column content grids */
[class*="two-col"],
[class*="split-grid"],
[class*="content-grid"]:not([class*="card"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  [class*="two-col"],
  [class*="split-grid"],
  [class*="content-grid"]:not([class*="card"]) {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ─── 17. SECTION HEADING BLOCK — centred where needed ────────── */

.sbhp-section-header,
[class*="section-header"],
[class*="section-intro"] {
  text-align: center !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: clamp(36px, 5vw, 64px) !important;
}

/* ─── 18. HOMEPAGE SPECIFIC: WHY SWEDBANG CARDS ──────────────── */

.sbhp-why-card, [class*="why-card"] {
  padding: 32px 28px !important;
  text-align: left !important;
}

.sbhp-why-card h3, [class*="why-card"] h3 {
  font-size: 19px !important;
  margin-bottom: 12px !important;
  color: #DCE8FF !important;
}

.sbhp-why-card p, [class*="why-card"] p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: #9BACC8 !important;
}

/* ─── 19. SCROLLBAR — premium dark ───────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #040810; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00819A 0%, #4A2FA0 100%);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #00C6FF; }

/* ─── 20. SELECTION COLOUR ────────────────────────────────────── */

::selection {
  background: rgba(0,198,255,0.25) !important;
  color: #FFFFFF !important;
}

/* ─── 21. RESPONSIVE: MOBILE REFINEMENTS ─────────────────────── */

@media (max-width: 767px) {
  h1, .ip-title, .page-title { font-size: clamp(26px, 8vw, 38px) !important; }
  h2, .ip-section-heading    { font-size: clamp(20px, 6vw, 28px) !important; }
  h3                         { font-size: clamp(17px, 5vw, 22px) !important; }

  p, .ip-section-body        { font-size: 15px !important; line-height: 1.75 !important; }

  .sbhp-card-grid, [class*="feature-grid"], [class*="card-grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sbhp-supply-card, .sbhp-feature-card,
  .ip-card, .ent-card { padding: 22px 18px !important; border-radius: 14px !important; }

  [class*="btn-primary"], [class*="btn-secondary"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }

  .sbhp-section-header, [class*="section-header"] {
    margin-bottom: 28px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sbhp-card-grid, [class*="feature-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── 22. SMOOTH FOCUS RING (accessibility) ───────────────────── */

:focus-visible {
  outline: 2px solid rgba(0,198,255,0.60) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════
   23. SPACE-SAVING & ALIGNMENT FIXES  (2026-08-23)
   Targets: orphaned card · black gap · footer internal gap
   ═══════════════════════════════════════════════════════════════ */

/* ── A. ORPHANED LAST CARD (4th card alone on bottom row of 3-col) ─
   When the last card is the first child in a new row of a 3-col grid
   we centre it so it doesn't stick awkwardly to the left.
   Works for any grid that uses auto-fit/auto-fill with 3 columns.   */

/* Centre the lone last card and cap its width to match siblings */
.sbhp-card-grid > *:last-child:nth-child(3n + 1),
[class*="feature-grid"] > *:last-child:nth-child(3n + 1),
[class*="card-grid"]    > *:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1 !important;
  max-width: calc((100% - 2 * clamp(18px,2.5vw,32px)) / 3) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4-card layout: switch to 2x2 so rows are even */
.sbhp-card-grid:has(> *:nth-child(4):last-child),
[class*="feature-grid"]:has(> *:nth-child(4):last-child),
[class*="card-grid"]:has(> *:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Undo the lone-card centring inside a 2-col layout */
.sbhp-card-grid:has(> *:nth-child(4):last-child) > *:last-child:nth-child(3n + 1),
[class*="feature-grid"]:has(> *:nth-child(4):last-child) > *:last-child:nth-child(3n + 1),
[class*="card-grid"]:has(> *:nth-child(4):last-child) > *:last-child:nth-child(3n + 1) {
  grid-column: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── B. BLACK GAP BETWEEN CTA SECTION & FOOTER ─────────────────
   The gap (image 2) is caused by excessive padding on the last
   homepage section (#sbhp-contact) and/or excess top padding on
   the footer itself.                                              */

/* Tighten the contact / last CTA section bottom padding */
#sbhp-contact,
.sbhp-section:last-of-type,
section:last-of-type:not(#sbhp-hero):not([id*="hero"]) {
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* Remove accidental min-height that creates the black void */
#sbhp-contact,
[id*="contact"].sbhp-section {
  min-height: unset !important;
  height: auto !important;
}

/* If the gap is from a wrapper div between the section and footer */
#root > div > div:last-of-type:not(footer):not([class*="footer"]):empty,
#root > div > *:last-of-type:not(footer):not([class*="footer"]):not([class]):empty {
  display: none !important;
}

/* Kill the brand-film section excessive bottom gap */
#sbhp-brand-film {
  padding-bottom: clamp(40px, 5vw, 72px) !important;
}

/* Tighten footer top padding to meet sections cleanly */
/* Footer: controlled padding — not inflated */
.ent-footer,
footer.ent-footer {
  padding-top: 40px !important;
  padding-bottom: 0 !important;
}

/* ── C. FOOTER INTERNAL GAP (huge space before copyright bar) ───
   The .ent-main-grid (logo + nav columns) has too much margin-
   bottom, or the footer min-height is too tall.                  */

/* Remove any min-height that inflates the footer */
.ent-footer,
footer {
  min-height: unset !important;
  height: auto !important;
}

/* Tighten the gap between main nav grid and the bottom bar */
.ent-main-grid {
  margin-bottom: clamp(24px, 3vw, 48px) !important;
  padding-bottom: 0 !important;
}

/* Reduce the gap between trust items and the copyright row */
.sb-trust-grid,
[class*="trust-grid"],
[class*="trust-strip"] {
  margin-top: clamp(20px, 2.5vw, 36px) !important;
  margin-bottom: clamp(20px, 2.5vw, 36px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Bottom bar: no extra padding top */
.ent-bottom-bar {
  padding-top: clamp(16px, 2vw, 28px) !important;
  padding-bottom: clamp(16px, 2vw, 28px) !important;
  margin-top: 0 !important;
}

/* Collapse any anonymous wrapper divs inside footer with no content */
.ent-footer > div:empty,
footer > div:empty {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   24. INNER PAGE PRODUCT-CARD GRID — ORPHAN & ALIGNMENT FIX
   Targets: CyberSecurity, Hardware, Software, Digital Codes
   and any other inner page using Tailwind grid-cols-4 layout
   ═══════════════════════════════════════════════════════════════ */

/*
  The inner page product grids use:
  "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"

  At 4-col (xl) this creates orphaned cards when the count is
  not a multiple of 4 (e.g. 5 → 4+1, 6 → 4+2, 9 → 4+4+1).

  Fix: cap at 3 columns site-wide so grids are always balanced
  (3 cols works cleanly for 3, 6, 9, 12… products).
  Cards are still fully responsive: 1-col mobile → 2-col tablet → 3-col desktop.
*/

/* Override the xl:grid-cols-4 to stay at 3 cols max */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Individual product cards — ensure equal height & clean styling */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > div,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/*
  Orphan handling: when last card is alone in a 3-col row
  (position 3n+1), centre it horizontally without full-width stretch
*/
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > *:last-child:nth-child(3n + 1) {
  grid-column: 2 / 3 !important;
}

/* When 2 cards remain in last row (positions 3n+2), let them fill naturally centred */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > *:last-child:nth-child(3n + 2) {
  grid-column: auto !important;
}

/* Card inner content — description text fills remaining height */
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 .flex-1,
.grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 [class*="leading-relaxed"] {
  flex: 1 1 auto !important;
}

/* Section separator padding — reduce excessive gaps between categories */
.py-14.border-b {
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}

.py-16.lg\:py-20 {
  padding-top: clamp(48px, 6vw, 72px) !important;
  padding-bottom: clamp(48px, 6vw, 72px) !important;
}

/* Card base styling — match the luxury glassmorphism system */
.flex.flex-col.gap-3.p-5.rounded-xl {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.045) 0%,
    rgba(14, 30, 72, 0.60) 50%,
    rgba(255,255,255,0.02) 100%
  ) !important;
  border: 1px solid rgba(0, 198, 255, 0.13) !important;
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.04) inset,
    0 6px 24px rgba(0,0,0,0.35) !important;
  transition: transform 0.30s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.30s cubic-bezier(0.23,1,0.32,1),
              border-color 0.30s ease !important;
  position: relative !important;
}

.flex.flex-col.gap-3.p-5.rounded-xl::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,212,255,0.50) 40%,
    rgba(123,92,255,0.40) 60%,
    transparent
  ) !important;
  pointer-events: none !important;
}

.flex.flex-col.gap-3.p-5.rounded-xl:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0,212,255,0.28) !important;
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.06) inset,
    0 16px 40px rgba(0,0,0,0.50),
    0 0 32px rgba(0,180,255,0.10) !important;
}

/* Product card name typography */
.text-\[15px\].font-bold.leading-snug {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #DCE8FF !important;
  letter-spacing: -0.01em !important;
}

/* Brand label */
.text-\[11px\].uppercase.tracking-widest.font-semibold {
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  color: #00C6FF !important;
  font-weight: 800 !important;
}

/* Description text */
.text-\[13px\].leading-relaxed.flex-1 {
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: #9BACC8 !important;
}

/* CTA button on each card */
.mt-2.w-full.py-2.rounded-lg {
  background: linear-gradient(135deg, rgba(0,198,255,0.12) 0%, rgba(123,92,255,0.08) 100%) !important;
  border: 1px solid rgba(0,198,255,0.22) !important;
  color: #00C6FF !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  transition: all 0.25s ease !important;
}

.mt-2.w-full.py-2.rounded-lg:hover {
  background: linear-gradient(135deg, rgba(0,198,255,0.22) 0%, rgba(123,92,255,0.15) 100%) !important;
  border-color: rgba(0,198,255,0.45) !important;
  transform: translateY(-1px) !important;
}

/* Section heading on inner product pages */
.text-\[22px\].md\:text-\[28px\].mb-2.font-bold {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  color: #EBF2FF !important;
}

/* Mobile override — single column */
@media (max-width: 639px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > *:last-child:nth-child(3n + 1) {
    grid-column: 1 !important;
  }
}

/* Tablet override — 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > *:last-child:nth-child(3n + 1) {
    grid-column: auto !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   25. "EXPLORE MORE SOLUTIONS" RELATED CARDS — GAP FIX
   ip-related-grid was single-column; override to auto-fit
   so 2-4 cards fill the row evenly with no empty gap.
   ═══════════════════════════════════════════════════════════════ */

.ip-related-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0 !important;
  background: var(--ip-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.ip-related-card {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 80px !important;
  padding: 22px 24px !important;
  background: rgba(7,12,26,0.92) !important;
  transition: background 0.2s ease !important;
}

.ip-related-card:hover {
  background: rgba(0,198,255,0.05) !important;
}

.ip-related-eyebrow {
  color: #00C6FF !important;
  letter-spacing: 0.20em !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}

.ip-related-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #DCE8FF !important;
  letter-spacing: -0.01em !important;
}

.ip-related-card-desc {
  font-size: 13px !important;
  color: #8FA8C8 !important;
  line-height: 1.55 !important;
}

.ip-related-arrow {
  color: #00C6FF !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}

.ip-related-card:hover .ip-related-arrow {
  opacity: 1 !important;
  transform: translateX(4px) !important;
}

/* Mobile: single column */
@media (max-width: 639px) {
  .ip-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   26. FOOTER — REGIONAL HEADING STYLE + CONNECTIVITY TIGHTENING
   Regional lives inside the last ent-grid-col (Compliance col).
   We style it to visually appear as a clean sub-section.
   We also tighten the Connectivity column to remove excess whitespace.
   ═══════════════════════════════════════════════════════════════ */

/* Footer column gap — tighter overall */
.ent-main-grid {
  gap: clamp(20px, 3vw, 40px) !important;
}

/* Connectivity column (3rd ent-grid-col): no excess bottom space */
.ent-main-grid > .ent-grid-col:nth-child(3) {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

/* Regional heading (second h4 in the last column): style as sub-section */
.ent-main-grid > .ent-grid-col:last-child h4:nth-of-type(2),
.ent-main-grid > .ent-grid-col:nth-child(5) h4:nth-of-type(2) {
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(0,198,255,0.10) !important;
  color: #00C6FF !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

/* Regional nav links — flag + country style */
.ent-main-grid > .ent-grid-col:last-child nav:last-of-type .ent-link,
.ent-main-grid > .ent-grid-col:nth-child(5) nav:last-of-type .ent-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  color: #9BACC8 !important;
  padding: 3px 0 !important;
}

.ent-main-grid > .ent-grid-col:last-child nav:last-of-type .ent-link:hover,
.ent-main-grid > .ent-grid-col:nth-child(5) nav:last-of-type .ent-link:hover {
  color: #00C6FF !important;
}

/* Tighten nav link spacing in all footer columns */
.ent-col-nav .ent-link {
  padding: 3px 0 !important;
  line-height: 1.6 !important;
}

/* Footer col headings — consistent uppercase style */
.ent-col-heading {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #00C6FF !important;
  margin-bottom: 14px !important;
}

/* Mobile footer */
@media (max-width: 767px) {
  .ip-related-grid {
    grid-template-columns: 1fr !important;
  }
  .ent-main-grid > .ent-grid-col:last-child h4:nth-of-type(2) {
    margin-top: 20px !important;
    padding-top: 16px !important;
  }
}

/* ═══ FOOTER INTERNAL GAP — DEFINITIVE FIX ═══
   Remove ALL excess space between nav links and bottom copyright bar */
.ent-footer { padding-bottom: 0 !important; min-height: 0 !important; }
.ent-main-grid { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.sb-trust-grid { padding: 10px 0 !important; margin: 0 !important; min-height: 0 !important; }
.ent-bottom-bar { margin-top: 0 !important; padding-top: 0 !important; }

/* CTA section above footer: remove black void */
.section-padding.bg-\[var\(--color-bg\)\] { padding-bottom: 40px !important; }
.ip-cta-section, .ip-cta-band { padding-bottom: 40px !important; }

/* Trust/badge strip: remove empty height */
[class*="trust-strip"],
[class*="trust-bar"],
.sb-trust-wrapper { 
  padding: 10px 0 !important; 
  margin: 0 !important; 
  min-height: 0 !important; 
}

/* Collapse any empty anonymous divs in footer */
.ent-footer > div:not(.ent-main-grid):not(.ent-bottom-bar):not(.sb-trust-grid):empty {
  display: none !important;
}
/* ═══ MOBILE SAFARI — INNER PAGE GAP FIX ═══ */
@media (max-width: 768px) {
  /* Hero: reduce bottom padding on mobile — prevent double-gap with first section */
  .ip-hero,
  [class*="page-hero"]:not(#sbhp-hero) {
    padding-top: clamp(80px, 18vw, 110px) !important;
    padding-bottom: clamp(28px, 5vw, 44px) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* First section after hero: tighten top padding on mobile */
  .ip-hero + .ip-section,
  .ip-hero ~ section:first-of-type {
    padding-top: 24px !important;
  }

  /* General section top/bottom on mobile: compact */
  .ip-section {
    padding-top: clamp(24px, 4vw, 48px) !important;
    padding-bottom: clamp(24px, 4vw, 48px) !important;
  }

  /* Safari 100vh fix — prevent hero inflating due to address bar */
  .ip-hero,
  [class*="page-hero"]:not(#sbhp-hero) {
    min-height: 0 !important;
  }

  /* Footer mobile compact */
  .ent-footer { padding-top: 28px !important; }
  .ent-main-grid { gap: 28px !important; }
  .ent-bottom-bar { padding: 14px 16px !important; }
}

@media (max-width: 480px) {
  .ip-hero,
  [class*="page-hero"]:not(#sbhp-hero) {
    padding-top: 72px !important;
    padding-bottom: 24px !important;
  }
  .ip-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}