/* ============================================================
   BW.CSS — Black & White overlay for GridPanel
   Load after style.css. Coloured SVG icons (text-red, text-aqua,
   text-green, text-blue, btn-violet, etc.) are intentional accents
   and are left alone.
   ============================================================ */

/* ============================================================
   WORDMARK LOGO
   ============================================================ */
.gp-wordmark {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  color: #111111;
  text-decoration: none;
  letter-spacing: -0.5px;
  display: inline-block;
}
.gp-wordmark:hover { color: rgba(17, 17, 17, 0.70); text-decoration: none; }

/* ============================================================
   GLOBAL — TYPOGRAPHY
   ============================================================ */
body { font-family: 'Space Grotesk', sans-serif !important; }
body { color: rgb(85, 85, 85) !important; }
html, body { overflow-x: hidden; max-width: 100%; }

/* Mark / highlight — orange */
:root { --bs-highlight-bg: rgba(249, 115, 22, 0.18) !important; }
mark, .mark { background-color: rgba(249, 115, 22, 0.18) !important; }

/* Default hyperlinks */
:root { --bs-link-color: rgb(56, 102, 255) !important; }
a:not([class]):not([style]) { color: rgb(56, 102, 255) !important; }
a:not([class]):not([style]):hover { color: rgb(30, 72, 220) !important; }

/* ============================================================
   GLOBAL — PRIMARY COLOR RESETS
   ============================================================ */

/* Gradient text → near-black */
.text-gradient,
.text-gradient.gradient-1,
.text-gradient.gradient-2,
.text-gradient.gradient-3 {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: rgb(47, 47, 47) !important;
  color: rgb(47, 47, 47) !important;
}

/* Gradient buttons → solid black */
.btn-gradient,
.btn-gradient.gradient-1,
.btn-gradient.gradient-2,
.btn-gradient.gradient-3 {
  background: #111111 !important;
  background-image: none !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
.btn-gradient:hover,
.btn-gradient.gradient-1:hover,
.btn-gradient.gradient-2:hover,
.btn-gradient.gradient-3:hover {
  background: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

/* Primary text */
.text-primary { color: #111111 !important; }
a.text-primary:hover { color: #555555 !important; }

/* Primary backgrounds */
.bg-primary { background-color: #111111 !important; }
.bg-soft-primary { background-color: #f4f4f4 !important; }
.card.bg-soft-primary { background-color: #f4f4f4 !important; }

/* Primary borders */
.border-primary { border-color: #111111 !important; }
.border-soft-primary { border-color: #e0e0e0 !important; }
.card-border-bottom.border-soft-primary { border-bottom-color: #dddddd !important; }

/* Primary buttons */
.btn-primary {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}
.btn-soft-primary {
  background-color: #f0f0f0 !important;
  border-color: transparent !important;
  color: #111111 !important;
}
.btn-soft-primary:hover {
  background-color: #e0e0e0 !important;
}

/* Circle numbered buttons */
.btn.btn-circle.btn-soft-primary {
  background: #efefef !important;
  border-color: transparent !important;
  color: #222222 !important;
}

/* Icon-list bullets — global orange fallback (per-category rules below override via higher specificity) */
.icon-list.bullet-soft-primary i             { color: #F97316 !important; }
.icon-list.bullet-bg.bullet-soft-primary i   { background-color: rgba(249, 115, 22, 0.12) !important; }

/* Newsletter / form submit */
input.btn-primary,
input.btn-gradient,
input.btn-gradient.gradient-1 {
  background: #111111 !important;
  background-image: none !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

/* Accordion active state */
.accordion-button:not(.collapsed) {
  color: #111111 !important;
  box-shadow: none !important;
}
.accordion-button:focus { box-shadow: none !important; }

/* Accordion card — compact and clean */
.accordion-wrapper .card {
  overflow: hidden;
}
.accordion-wrapper .card.plain {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.accordion-wrapper .card.plain .card-header {
  padding: 0 !important;
}
.accordion-wrapper .card.plain .card-header button {
  padding: 0.6rem 1rem 0.6rem 1.5rem !important;
  width: 100% !important;
  font-size: 0.85rem !important;
}


/* Nav tabs */
.nav-tabs .nav-link.active,
.nav-tabs-basic .nav-link.active {
  color: #111111 !important;
  border-bottom-color: #111111 !important;
  background: transparent !important;
}
.nav-tabs-basic .nav-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #888888;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 20px;
  background: transparent;
}
.code-block .nav-tabs-basic .nav-link {
  color: rgba(255, 255, 255, 0.55) !important;
  border-bottom-color: transparent !important;
}
.code-block .nav-tabs-basic .nav-link.active {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
.nav-tabs-bg .nav-link.active {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #111111 !important;
}

/* "More / Learn more" links */
a.more.hover.link-red,
a.more.hover.link-blue,
a.more.hover.link-yellow,
a.more.hover.link-green {
  color: #111111 !important;
}
a.more.hover:hover { color: #555555 !important; }

/* ============================================================
   NAVBAR — white background with black text
   ============================================================ */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
.navbar .nav-link {
  color: rgba(17, 17, 17, 0.80) !important;
}
.navbar .nav-link:hover {
  color: #111111 !important;
}
.navbar .btn-primary {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
.navbar .btn-primary:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}
.navbar .btn-secondary {
  background-color: transparent !important;
  border-color: rgba(17, 17, 17, 0.35) !important;
  color: #111111 !important;
}
.navbar .btn-secondary:hover {
  background-color: rgba(17, 17, 17, 0.06) !important;
  border-color: #111111 !important;
  color: #111111 !important;
}

/* ============================================================
   PAGE HERO — category & use-case pages
   ============================================================ */
.bw-page-hero {
  background: linear-gradient(to bottom, rgb(6, 6, 6) 0%, rgb(6, 6, 6) 45%, #f5f5f5 100%);
}

/* ============================================================
   HERO — SECTION 1
   ============================================================ */
.bw-hero {
  background: #ffffff;
  padding-top: 120px;
  padding-bottom: 0;
}

.bw-hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 72px;
  font-weight: 600;
  color: #111111;
  line-height: 1.07;
  letter-spacing: -0.5px;
  margin-bottom: 28px;
}

.bw-hero-subtext {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(17, 17, 17, 0.60);
  line-height: 1.65;
  margin-bottom: 48px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.bw-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* "Join the Grid" — solid black, rounded corners */
.btn-bw-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  background: #000000;
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
  transition: background 0.18s ease;
  white-space: nowrap;
}
.btn-bw-primary:hover { background: #2a2a2a; color: #ffffff; text-decoration: none; }

/* "See it in action" — play circle + label */
.btn-bw-play {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #111111;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.btn-bw-play:hover { color: #555555; text-decoration: none; }

.bw-play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #000000;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.btn-bw-play:hover .bw-play-circle { background: #2a2a2a; }

/* ============================================================
   HERO DASHBOARD IMAGE
   ============================================================ */
.bw-hero-img-wrap {
  margin-top: 72px;
  padding: 0 32px;
}

.bw-hero-img {
  display: block;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  border-top: 10px solid #000000;
  border-left: 10px solid #000000;
  border-right: 10px solid #000000;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: none;
}

/* ============================================================
   PRODUCTS SECTION — DARK BACKGROUND
   ============================================================ */
.gp-products-dark {
  background: rgb(6, 6, 6);
  padding-bottom: 80px;
}

.gp-products-eyebrow {
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.08em;
}

.gp-products-heading {
  color: #ffffff !important;
}

/* Text inside the dark products section */
.gp-products-dark h4 { color: #ffffff !important; }
.gp-products-dark p   { color: rgba(255, 255, 255, 0.58) !important; }

/* Tab nav on dark — no card background, flat tabs */
.gp-products-dark .nav-tabs-bg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: 8px;
}
.gp-products-dark .nav-tabs-bg .nav-link {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  min-height: 90px;
  align-items: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}
.gp-products-dark .nav-tabs-bg .nav-link h4 {
  color: rgba(255, 255, 255, 0.55) !important;
}
.gp-products-dark .nav-tabs-bg .nav-link p {
  color: rgba(255, 255, 255, 0.4) !important;
}
.gp-products-dark .nav-tabs-bg .nav-link:hover,
.gp-products-dark .nav-tabs-bg .nav-link.active {
  transform: translateY(-6px) !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #111111 !important;
}
.gp-products-dark .nav-tabs-bg .nav-link:hover h4,
.gp-products-dark .nav-tabs-bg .nav-link.active h4 {
  color: #111111 !important;
}
.gp-products-dark .nav-tabs-bg .nav-link:hover p,
.gp-products-dark .nav-tabs-bg .nav-link.active p {
  color: #555555 !important;
}

/* "Learn More" links on dark */
.gp-products-dark a.more.hover.link-red,
.gp-products-dark a.more.hover.link-blue,
.gp-products-dark a.more.hover.link-yellow,
.gp-products-dark a.more.hover.link-green,
.gp-products-dark a.more.hover {
  color: rgba(255, 255, 255, 0.6) !important;
}
.gp-products-dark a.more.hover:hover {
  color: #ffffff !important;
}

/* Tab SVG icons on dark bg — lineal-stroke is dark navy (#36496d) and
   invisible; solid-mono fills are coloured but inconsistent. Unify to white. */
.gp-products-dark .lineal-stroke              { fill: rgba(255, 255, 255, 0.70) !important; }
.gp-products-dark .lineal-fill                { fill: rgba(255, 255, 255, 0.22) !important; }
.gp-products-dark .nav-link.active .lineal-stroke { fill: rgba(255, 255, 255, 0.90) !important; }
.gp-products-dark .nav-link.active .lineal-fill   { fill: rgba(255, 255, 255, 0.32) !important; }

.gp-products-dark .fill-primary               { fill: rgba(255, 255, 255, 0.82) !important; }
.gp-products-dark .fill-secondary             { fill: rgba(255, 255, 255, 0.28) !important; }
.gp-products-dark .nav-link.active .fill-primary  { fill: #ffffff !important; }
.gp-products-dark .nav-link.active .fill-secondary { fill: rgba(255, 255, 255, 0.40) !important; }

/* Icons go dark when tab background turns white */
.gp-products-dark .nav-tabs-bg .nav-link:hover .lineal-stroke,
.gp-products-dark .nav-tabs-bg .nav-link.active .lineal-stroke { fill: #111111 !important; }
.gp-products-dark .nav-tabs-bg .nav-link:hover .lineal-fill,
.gp-products-dark .nav-tabs-bg .nav-link.active .lineal-fill   { fill: rgba(0, 0, 0, 0.15) !important; }
.gp-products-dark .nav-tabs-bg .nav-link:hover .fill-primary,
.gp-products-dark .nav-tabs-bg .nav-link.active .fill-primary  { fill: #111111 !important; }
.gp-products-dark .nav-tabs-bg .nav-link:hover .fill-secondary,
.gp-products-dark .nav-tabs-bg .nav-link.active .fill-secondary { fill: rgba(0, 0, 0, 0.25) !important; }

/* Feature grid circles — replace violet with a neutral dark-theme style */
.gp-products-dark .btn.btn-circle.btn-violet {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color:     rgba(255, 255, 255, 0.12) !important;
  color:            rgba(255, 255, 255, 0.75) !important;
}

/* "Join Our Grid Today" section sits directly after the dark products block;
   give it breathing room top and bottom */
.gp-products-dark + section {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

/* ============================================================
   DARK SECTIONS  rgb(6,6,6)
   ============================================================ */
.section-dark { background: rgb(6, 6, 6); }
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5 { color: #ffffff; }
.section-dark p,
.section-dark .lead { color: rgba(255, 255, 255, 0.58); }
.section-dark .text-muted { color: rgba(255, 255, 255, 0.45) !important; }
.section-dark .text-gradient.gradient-1 {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.42) !important;
  color: rgba(255, 255, 255, 0.42) !important;
}
.section-dark .counter { color: #ffffff; }

/* White CTA button for dark sections */
.btn-cta-dark {
  display: inline-block;
  background: #ffffff;
  color: #000000;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 38px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid #ffffff;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn-cta-dark:hover { background: transparent; color: #ffffff; text-decoration: none; }

/* ============================================================
   DASHBOARD — CARDS
   ============================================================ */
.card {
  box-shadow: none !important;
  border: 1px solid #f2f2f2 !important;
  border-radius: 20px !important;
}

/* ============================================================
   DASHBOARD — FLAT ALERTS
   ============================================================ */
.alert {
  background-color: #ffffff !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 12px !important;
}
.alert-success {
  border-color: #22c55e !important;
  color: #15803d !important;
}
.alert-danger {
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}
.alert-warning {
  border-color: #f59e0b !important;
  color: #b45309 !important;
}
.alert-info {
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}
.alert-primary {
  border-color: #111111 !important;
  color: #111111 !important;
}
.alert-secondary {
  border-color: #888888 !important;
  color: #555555 !important;
}
.alert .alert-link { font-weight: 600; }
.alert-success .alert-link  { color: #15803d !important; }
.alert-danger  .alert-link  { color: #b91c1c !important; }
.alert-warning .alert-link  { color: #b45309 !important; }
.alert-info    .alert-link  { color: #1d4ed8 !important; }

/* ============================================================
   PRICING CARDS — HOVER
   ============================================================ */
.pricing.card {
  transition: none;
}

/* ============================================================
   CHECK MARKS — PER-CATEGORY ACCENT COLORS (global, via body class)
   ============================================================ */
body.cat-4g .icon-list.bullet-soft-primary i                   { color: #3B82F6 !important; }
body.cat-4g .icon-list.bullet-bg.bullet-soft-primary i         { background-color: rgba(59, 130, 246, 0.12) !important; }

body.cat-5g .icon-list.bullet-soft-primary i                   { color: #8B5CF6 !important; }
body.cat-5g .icon-list.bullet-bg.bullet-soft-primary i         { background-color: rgba(139, 92, 246, 0.12) !important; }

body.cat-datacenter .icon-list.bullet-soft-primary i           { color: #F97316 !important; }
body.cat-datacenter .icon-list.bullet-bg.bullet-soft-primary i { background-color: rgba(249, 115, 22, 0.12) !important; }

body.cat-eco .icon-list.bullet-soft-primary i                  { color: #22C55E !important; }
body.cat-eco .icon-list.bullet-bg.bullet-soft-primary i        { background-color: rgba(34, 197, 94, 0.12) !important; }

body.cat-pro .icon-list.bullet-soft-primary i                  { color: #F59E0B !important; }
body.cat-pro .icon-list.bullet-bg.bullet-soft-primary i        { background-color: rgba(245, 158, 11, 0.12) !important; }

body.cat-social .icon-list.bullet-soft-primary i               { color: #EC4899 !important; }
body.cat-social .icon-list.bullet-bg.bullet-soft-primary i     { background-color: rgba(236, 72, 153, 0.12) !important; }

body.cat-scraping .icon-list.bullet-soft-primary i             { color: #F97316 !important; }
body.cat-scraping .icon-list.bullet-bg.bullet-soft-primary i   { background-color: rgba(249, 115, 22, 0.12) !important; }

/* ============================================================
   FEATURE ICONS — global black fallback
   Per-category rules below override via later source order (same specificity).
   ============================================================ */
.icon-svg.text-yellow .lineal-stroke,
.icon-svg.text-red .lineal-stroke,
.icon-svg.text-green .lineal-stroke,
.icon-svg.text-blue .lineal-stroke,
.icon-svg.text-aqua .lineal-stroke,
.icon-svg.text-primary .lineal-stroke { fill: #111111 !important; }

.icon-svg.text-yellow .lineal-fill,
.icon-svg.text-red .lineal-fill,
.icon-svg.text-green .lineal-fill,
.icon-svg.text-blue .lineal-fill,
.icon-svg.text-aqua .lineal-fill,
.icon-svg.text-primary .lineal-fill   { fill: rgba(17, 17, 17, 0.10) !important; }


/* ============================================================
   PRICING CARDS — PER-CATEGORY ACCENT COLORS
   ============================================================ */
/* 4G — Signal Blue #3B82F6 */
.pricing-4g .icon-list.bullet-soft-primary i                          { color: #3B82F6 !important; }
.pricing-4g .icon-list.bullet-bg.bullet-soft-primary i                { background-color: rgba(59, 130, 246, 0.12) !important; }
.pricing-4g .icon-svg .lineal-stroke                                   { fill: #3B82F6 !important; }
.pricing-4g .icon-svg .lineal-fill                                     { fill: rgba(59, 130, 246, 0.25) !important; }

/* 5G — Electric Violet #8B5CF6 */
.pricing-5g .icon-list.bullet-soft-primary i                          { color: #8B5CF6 !important; }
.pricing-5g .icon-list.bullet-bg.bullet-soft-primary i                { background-color: rgba(139, 92, 246, 0.12) !important; }
.pricing-5g .icon-svg .lineal-stroke                                   { fill: #8B5CF6 !important; }
.pricing-5g .icon-svg .lineal-fill                                     { fill: rgba(139, 92, 246, 0.25) !important; }

/* Datacenter — Burnt Orange #F97316 */
.pricing-datacenter .icon-list.bullet-soft-primary i                  { color: #F97316 !important; }
.pricing-datacenter .icon-list.bullet-bg.bullet-soft-primary i        { background-color: rgba(249, 115, 22, 0.12) !important; }
.pricing-datacenter .icon-svg .lineal-stroke                           { fill: #F97316 !important; }
.pricing-datacenter .icon-svg .lineal-fill                             { fill: rgba(249, 115, 22, 0.25) !important; }

/* Eco — Leaf Green #22C55E */
.pricing-eco .icon-list.bullet-soft-primary i                         { color: #22C55E !important; }
.pricing-eco .icon-list.bullet-bg.bullet-soft-primary i               { background-color: rgba(34, 197, 94, 0.12) !important; }
.pricing-eco .icon-svg .lineal-stroke                                  { fill: #22C55E !important; }
.pricing-eco .icon-svg .lineal-fill                                    { fill: rgba(34, 197, 94, 0.25) !important; }

/* Pro Residential — Amber Gold #F59E0B */
.pricing-pro .icon-list.bullet-soft-primary i                         { color: #F59E0B !important; }
.pricing-pro .icon-list.bullet-bg.bullet-soft-primary i               { background-color: rgba(245, 158, 11, 0.12) !important; }
.pricing-pro .icon-svg .lineal-stroke                                  { fill: #F59E0B !important; }
.pricing-pro .icon-svg .lineal-fill                                    { fill: rgba(245, 158, 11, 0.25) !important; }

/* Social Media — Hot Pink #EC4899 */
.pricing-social .icon-list.bullet-soft-primary i                      { color: #EC4899 !important; }
.pricing-social .icon-list.bullet-bg.bullet-soft-primary i            { background-color: rgba(236, 72, 153, 0.12) !important; }
.pricing-social .icon-svg .lineal-stroke                               { fill: #EC4899 !important; }
.pricing-social .icon-svg .lineal-fill                                 { fill: rgba(236, 72, 153, 0.25) !important; }

/* Pricing card plan icons (hourly/weekly/monthly) — black */
.pricing.card .icon-svg .lineal-stroke { fill: #111111 !important; }
.pricing.card .icon-svg .lineal-fill   { fill: rgba(17, 17, 17, 0.10) !important; }

/* ============================================================
   LOCATIONS NAV TABS
   ============================================================ */
.nav.nav-tabs.nav-pills .nav-link {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}
.nav.nav-tabs.nav-pills .nav-link:hover,
.nav.nav-tabs.nav-pills .nav-link.active {
  background: #F97316 !important;
  color: #ffffff !important;
  border-color: #F97316 !important;
}

/* ============================================================
   WHAT IS — IMAGE SIZING ON MOBILE
   ============================================================ */
@media (max-width: 991px) {
  .what-is-figure img {
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    transform: none !important;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.bg-dark,
footer[class*="bg-dark"] {
  background-color: rgb(6, 6, 6) !important;
}
footer a,
footer a:not([class]):not([style]) { color: rgb(202, 202, 202) !important; }
footer a:hover,
footer a:not([class]):not([style]):hover { color: #ffffff !important; }

/* ============================================================
   HERO UNDERLINE — PER-CATEGORY ACCENT COLORS
   ============================================================ */
.underline-3.style-2.hero-4g:after,
.underline-3.style-2.hero-5g:after,
.underline-3.style-2.hero-datacenter:after,
.underline-3.style-2.hero-eco:after,
.underline-3.style-2.hero-pro:after,
.underline-3.style-2.hero-social:after     { z-index: 1; }

.underline-3.style-2.hero-4g:after         { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%233B82F6' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); }
.underline-3.style-2.hero-5g:after         { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%238B5CF6' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); }
.underline-3.style-2.hero-datacenter:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%23F97316' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); }
.underline-3.style-2.hero-eco:after        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%2322C55E' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); }
.underline-3.style-2.hero-pro:after        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%23F59E0B' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); }
.underline-3.style-2.hero-social:after     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%23EC4899' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); }

/* Use-case pages — override blue underlines to orange */
.underline-3.style-2.blue:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%23F97316' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E") !important; }
.underline-3.style-3.blue:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%23F97316' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E") !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .bw-hero-headline { font-size: 52px; }
  .bw-hero-img-wrap { padding: 0 16px; }
}
@media (max-width: 767px) {
  .bw-hero-headline { font-size: 38px; }
  .bw-hero { padding-top: 80px; }
  .bw-hero-img-wrap { margin-top: 48px; padding: 0; }
  .bw-hero-img { border-radius: 10px 10px 0 0; }
  .gp-wordmark { font-size: 28px; }
}
@media (max-width: 479px) {
  .bw-hero-headline { font-size: 30px; }
  .bw-hero { padding-top: 60px; }
  .bw-hero-actions { flex-direction: column; align-items: center; }
  .gp-wordmark { font-size: 26px; }
}