/* ============================================================
   BREEZE HERO — Optimized, Compact, Responsive
   Theme: Blue (#1a4fd6) · White (#ffffff) · Orange (#f5a623)
   ============================================================ */

/* ── Variables ── */
:root {
  /* Hero-specific overrides / additions */
  --hz-blue:         #1a4fd6;
  --hz-blue-dark:    #122fa0;
  --hz-blue-mid:     #1e4fcc;
  --hz-orange:       #f5a623;
  --hz-orange-dark:  #d4880f;
  --hz-orange-glow:  rgba(245, 166, 35, 0.18);
  --hz-blue-glow:    rgba(26, 79, 214, 0.28);
  --hz-white:        #ffffff;
  --hz-body-dark:    #0d1730;
  --hz-body-mid:     #0f2050;
  --hz-text-bright:  #f0f6ff;
  --hz-text-muted:   rgba(240, 246, 255, 0.70);
  --hz-radius:       28px;
  --hz-border:       rgba(255, 255, 255, 0.12);
}

/* ── Section ── */
.brz-hero {
  position: relative;
  width: 100%;
  /* overflow:hidden was clipping the top — removed */
  overflow: visible;
  /* Full border-radius all around so top isn't cut */
  border-radius: 20px;
  /* Tightened: this was adding an extra 24px gap below the page
     header/breadcrumb, on top of the space already reserved for
     the fixed nav — reduced so the hero sits closer to the nav,
     matching the spacing rhythm of other Breeze pages. */
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  /* Contain the absolute background without clipping */
  isolation: isolate;
}

/* ── Layered background ── */
.brz-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    #0d1730 0%,
    #0f2050 30%,
    #0a2a6e 60%,
    #0d1730 100%
  );
  z-index: 0;
  /* Clip bg to section shape */
  border-radius: 20px;
  overflow: hidden;
}

/* Subtle dot grid */
.brz-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Atmospheric glows */
.brz-hero__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.brz-hero__bg-glow--blue {
  width: 55%;
  height: 120%;
  top: -20%;
  right: -8%;
  background: var(--hz-blue-glow);
}
.brz-hero__bg-glow--orange {
  width: 30%;
  height: 60%;
  bottom: -10%;
  left: 5%;
  background: var(--hz-orange-glow);
}

/* ── Inner two-column layout ── */
.brz-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  /* Reduced vertical padding — hero height cut ~35% while keeping full content */
  padding: 2.1rem 24px 1.15rem;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: center;
}

/* ── LEFT column ── */
.brz-hero__left {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Badge */
.brz-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,0.09);
  border: 1px solid var(--hz-border);
  border-radius: 100px;
  padding: 0.3rem 1rem 0.3rem 0.35rem;
  width: fit-content;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: hz-fadeInUp 0.5s ease both;
}
.brz-hero__logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hz-orange);
  box-shadow: 0 0 10px rgba(245,166,35,0.65);
  flex-shrink: 0;
}
.brz-hero__badge-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.brz-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cf5c0;
  box-shadow: 0 0 8px #5cf5c0;
  animation: hz-pulse 2s infinite;
  flex-shrink: 0;
}
.brz-hero__badge-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}

/* Heading */
.brz-hero__heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--hz-white);
  margin: 0;
  animation: hz-fadeInUp 0.5s 0.08s ease both;
}
.brz-hero__heading-accent {
  background: linear-gradient(90deg, #ffd280, var(--hz-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtext */
.brz-hero__sub {
  font-family: 'Manrope', sans-serif;
  font-size: 0.97rem;
  font-weight: 400;
  color: var(--hz-text-muted);
  line-height: 1.7;
  margin: 0;
  animation: hz-fadeInUp 0.5s 0.14s ease both;
}

/* CTA buttons */
.brz-hero__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  animation: hz-fadeInUp 0.5s 0.20s ease both;
}

.brz-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.7rem;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s ease;
  cursor: pointer;
}

.brz-hero__btn--primary {
  background: linear-gradient(135deg, var(--hz-orange), var(--hz-orange-dark));
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(245,166,35,0.48);
  border: none;
}
.brz-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,166,35,0.65);
}

.brz-hero__btn--outline {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brz-hero__btn--outline:hover {
  background: rgba(255,255,255,0.17);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* ── RIGHT column: ecosystem image ── */
.brz-hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hz-fadeInRight 0.55s 0.1s ease both;
}

.brz-hero__img {
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.07),
    0 0 40px rgba(26,79,214,0.22);
  display: block;
  margin: 0 auto;
}

/* ── Metrics strip — below the image, centered ── */
.brz-hero__metrics {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0.3rem 24px 1.1rem;
  max-width: 1200px;
  margin: 0 auto;
  animation: hz-fadeInUp 0.5s 0.28s ease both;
}

.brz-hero__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  text-align: center;
}

.brz-hero__metric-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--hz-orange);
  line-height: 1;
  letter-spacing: -0.02em;
}

.brz-hero__metric-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 0.22rem;
}

.brz-hero__metric-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* ── Keyframe animations ── */
@keyframes hz-fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hz-fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes hz-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.78); }
}

/* ── Responsive ── */
@media (max-width: 940px) {
  .brz-hero__inner {
    grid-template-columns: 1fr;
    padding: 1.5rem 16px 0.85rem;
  }
  .brz-hero__right {
    order: 2;
    /* Show image below text on tablet, above metrics */
    justify-content: center;
  }
  .brz-hero__img { max-width: 100%; }
  .brz-hero__metrics { flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 16px 1.5rem; }
  .brz-hero__metric { padding: 0.4rem 1.2rem; }
  .brz-hero__metric-sep { display: none; }
}

@media (max-width: 580px) {
  .brz-hero__heading { font-size: 1.75rem; }
  .brz-hero__actions { flex-direction: column; align-items: flex-start; }
  .brz-hero__btn { width: 100%; justify-content: center; }
  .brz-hero__metrics { justify-content: center; }
  .brz-hero__metric { min-width: calc(50% - 1.5rem); }
}


/* ============================================================
   BREEZE PLATFORM — Feature Explorer Stylesheet
   Theme: Blue (#1a4fd6) · White (#ffffff) · Orange (#f5a623)
   ============================================================ */

:root {
  --blue:        #1a4fd6;
  --blue-dark:   #0d3aaa;
  --blue-light:  #3b6ef0;
  --blue-pale:   #e8f0fe;
  --orange:      #f5a623;
  --orange-dark: #d4880f;
  --orange-light:#ffd280;
  --orange-pale: #fff4e0;
  --white:       #ffffff;
  --off-white:   #f7f9ff;
  --text-dark:   #0d1e3c;
  --text-body:   #1e3a5f;
  --text-muted:  #4a6a8a;
  --border:      rgba(26,79,214,0.18);
  --border-light:rgba(26,79,214,0.10);
  --shadow-sm:   0 2px 8px rgba(26,79,214,0.10);
  --shadow-md:   0 6px 20px rgba(26,79,214,0.14);
  --shadow-lg:   0 12px 36px rgba(26,79,214,0.18);
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Body ── */
body {
  background: var(--off-white);
  color: var(--text-dark);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(26,79,214,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(245,166,35,0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Container ──
   REMOVED: this module previously redefined .container (max-width:1280px;
   padding:0 2rem), which silently overrode the site-wide .container
   (max-width:1200px; padding:0 24px) defined in style.css, since this
   stylesheet loads after style.css with equal selector specificity.
   That's what caused this page's sections to render wider than every
   other Breeze page and lose their matching left/right gutters.
   The page now uses the site's own .container class directly — no
   duplicate container system needed. */

/* old hero-banner CSS removed — using .brz-hero */

/* old hero-banner inner CSS removed */

/* ============================================================
   HEADER — removed (logo-lockup section deleted)
   ============================================================ */
/* h1 kept for any remaining internal headings */
h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em; margin-bottom: 1rem;
  color: var(--text-dark);
}
h1 span.accent { color: var(--blue); }
h1 span.gold { color: var(--orange); }

/* ============================================================
   PRODUCT SWITCHER
   ============================================================ */
/* ── Product Nav Container ── */
.product-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0;
  margin-bottom: 2rem;
  background: #f0f5ff;
  border: 2px solid #d0deff;
  border-radius: 24px;
  padding: 0.65rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(26,79,214,0.10);
}

/* ── Tab base ── */
.product-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem 0.6rem;
  border-radius: 16px;
  border: 2px solid transparent;
  background: #ffffff;
  color: #4a6a8a;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
  min-width: 175px;
  flex: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

/* Tab label & badge */
.product-tab .tab-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e3a5f;
  transition: color 0.2s;
}
.product-tab .tab-badge {
  font-size: 0.6rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  background: #e8efff;
  color: #1a4fd6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.2s;
}

/* ── Tab hover ── */
.product-tab:hover {
  background: #e8efff;
  border-color: #b3c8ff;
  color: #1a4fd6;
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 22px rgba(26,79,214,0.20);
}
.product-tab:hover .tab-label { color: #1a4fd6; }
.product-tab:hover .tab-badge { background: #d0deff; color: #122fa0; }

/* ── Tab ACTIVE — Orange accent ── */
.product-tab.active {
  background: linear-gradient(145deg, #1a4fd6 0%, #1238aa 100%);
  border-color: #f5a623;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(26,79,214,0.42), 0 0 0 3px rgba(245,166,35,0.28);
  transform: translateY(-3px);
}
.product-tab.active .tab-label { color: #ffffff; }
.product-tab.active .tab-badge {
  background: rgba(245,166,35,0.22);
  color: #ffd280;
  border: 1px solid rgba(245,166,35,0.35);
}
/* Orange top accent bar on active */
.product-tab.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f5a623, transparent);
  border-radius: 0 0 4px 4px;
}
.tab-coming {
  font-size: 0.6rem; font-family: 'Manrope', sans-serif; font-weight: 700;
  padding: 0.12rem 0.55rem; border-radius: 100px;
  background: var(--orange-pale); color: var(--orange-dark);
  letter-spacing: 0.07em; text-transform: uppercase;
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: linear-gradient(135deg, #1238aa 0%, #1a4fd6 50%, #2563eb 100%);
  border: none;
  border-radius: 20px;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  box-shadow:
    0 8px 32px rgba(26, 79, 214, 0.35),
    0 2px 8px rgba(26, 79, 214, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
}
/* Subtle inner shimmer */
.stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(245,166,35,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.stat {
  text-align: center;
  padding: 1.35rem 2.25rem;
  position: relative;
  flex: 1;
  min-width: 140px;
}
/* Divider lines between stats */
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,0.15);
}
/* Decorative icon above each stat number — purely visual, order-based */
.stat::after {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
  opacity: 0.85;
}
.stat:nth-child(1)::after { content: '\1F4E6'; }
.stat:nth-child(2)::after { content: '\2699\FE0F'; }
.stat:nth-child(3)::after { content: '\1F3E2'; }
.stat:nth-child(4)::after { content: '\1F4F1'; }
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffd280;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(245,166,35,0.4);
}
.stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.4rem;
}

/* ============================================================
   FILTER TABS
   ============================================================ */
.filter-bar {
  display: flex; gap: 0.55rem; flex-wrap: wrap;
  justify-content: center; margin-bottom: 2.75rem;
}
.filter-btn {
  padding: 0.55rem 1.3rem; border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--white); color: var(--text-body);
  font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26,79,214,0.15);
}
.filter-btn.active {
  background: var(--blue); border-color: var(--blue);
  color: var(--white); font-weight: 700;
  box-shadow: 0 4px 14px rgba(26,79,214,0.3);
  transform: translateY(-1px);
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.search-wrap {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 100px; padding: 0.75rem 1.5rem 0.75rem 1.6rem;
  margin-bottom: 2rem; box-shadow: var(--shadow-sm);
  max-width: 440px; margin-left: auto; margin-right: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,79,214,0.15);
}
.search-icon { font-size: 1.1rem; color: var(--text-muted); flex-shrink: 0; }
#searchInput {
  border: none; outline: none; background: transparent;
  font-family: 'Manrope', sans-serif; font-size: 0.9rem;
  color: var(--text-dark); font-weight: 500; width: 100%;
}
#searchInput::placeholder { color: var(--text-muted); font-weight: 400; opacity: 0.85; }

/* ============================================================
   PRODUCT PANELS
   ============================================================ */
.product-panel { display: none; }
.product-panel.active { display: block; }

.coming-soon-panel {
  text-align: center; padding: 7rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.coming-soon-panel .cs-icon { font-size: 4rem; opacity: 0.4; }
.coming-soon-panel h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-dark);
}
.coming-soon-panel p { color: var(--text-body); max-width: 400px; line-height: 1.7; font-size: 1rem; font-weight: 500; }
.coming-soon-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--orange-pale); border: 1px solid rgba(245,166,35,0.35);
  border-radius: 100px; padding: 0.55rem 1.5rem;
  font-size: 0.85rem; font-weight: 700;
  color: var(--orange-dark); letter-spacing: 0.05em; text-transform: uppercase;
}

/* ============================================================
   CATEGORY SECTIONS
   ============================================================ */
.category-section {
  margin-bottom: 3.25rem;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 0.45s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

.category-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 2.5px solid var(--blue-pale);
}
.category-icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--blue-pale), #dbeafe);
  border: 1.5px solid var(--border); flex-shrink: 0;
}
.category-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem; font-weight: 800;
  color: var(--text-dark); letter-spacing: -0.01em;
}
.category-desc {
  font-size: 0.87rem; color: var(--text-body); font-weight: 500;
  margin-top: 0.2rem; line-height: 1.55;
}
.category-count {
  margin-left: auto; font-size: 0.75rem; font-weight: 700;
  color: var(--blue); background: var(--blue-pale);
  border: 1px solid var(--border);
  padding: 0.3rem 0.9rem; border-radius: 100px; white-space: nowrap;
}

/* ============================================================
   FEATURE GRID & CARDS
   ============================================================ */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.4rem;
  cursor: default;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  position: relative;
  /* overflow: visible — intentional, allows expanded details to show fully */
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.feature-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-card.expanded { border-color: var(--orange); box-shadow: 0 8px 28px rgba(245,166,35,0.18); }

.feature-card-header {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.65rem;
}
.feature-icon {
  font-size: 1.6rem; flex-shrink: 0; line-height: 1;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-pale); border-radius: 12px;
}
.feature-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.97rem; font-weight: 800;
  color: var(--text-dark); line-height: 1.3;
}
.feature-summary {
  font-size: 0.86rem; color: var(--text-body);
  line-height: 1.6; font-weight: 500;
  margin-bottom: 0.85rem; flex: 1;
}

/* Tags */
.feature-tag {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  padding: 0.15rem 0.65rem; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.25rem;
}
.tag-core    { background: var(--blue-pale);   color: var(--blue); }
.tag-ai      { background: #f0e8ff;            color: #6d28d9; }
.tag-retail  { background: var(--orange-pale); color: var(--orange-dark); }
.tag-geo     { background: #e0fdf4;            color: #065f46; }
.tag-pro     { background: #fff0f3;            color: #be123c; }
.tag-new     { background: var(--orange-pale); color: var(--orange-dark); border: 1px solid rgba(245,166,35,0.3); }

/* Expand button */
.expand-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.45rem 1.1rem;
  background: var(--blue-pale); color: var(--blue);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; align-self: flex-start;
}
.expand-btn:hover { background: var(--blue); color: var(--white); border-color: var(--blue); transform: translateY(-1px); }
.feature-card.expanded .expand-btn {
  background: var(--orange-pale); color: var(--orange-dark);
  border-color: rgba(245,166,35,0.4);
}
.feature-card.expanded .expand-btn:hover {
  background: var(--orange); color: var(--white); border-color: var(--orange);
}

/* Feature details panel */
.feature-details {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--blue-pale);
}
.feature-card.expanded .feature-details { display: block; }

.feature-details ul {
  list-style: none; display: flex; flex-direction: column; gap: 0.45rem;
}
.feature-details li {
  font-size: 0.85rem; color: var(--text-body); font-weight: 500;
  padding-left: 1.2rem; position: relative; line-height: 1.55;
}
.feature-details li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--orange); font-weight: 800; font-size: 1rem; line-height: 1.3;
}

/* ============================================================
   COMMON SECTIONS
   ============================================================ */
.common-section {
  margin-bottom: 4rem;
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.common-section-header { margin-bottom: 2rem; }
.common-section-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--orange-pale); color: var(--orange-dark);
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 100px; padding: 0.25rem 0.85rem; margin-bottom: 0.6rem;
}
.common-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.55rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--text-dark);
}
.common-section-sub { font-size: 0.88rem; color: var(--text-body); font-weight: 500; margin-top: 0.35rem; line-height: 1.6; }

/* Industries */
.industry-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }
.industry-list-group { display: flex; flex-direction: column; gap: 0.5rem; }
.industry-list-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.3rem; }
.industry-list-heading.extended { color: var(--orange-dark); font-size: 0.85rem; }
.industry-list-item { display: flex; align-items: center; gap: 0.65rem; font-size: 0.87rem; color: var(--text-body); font-weight: 500; padding: 0.35rem 0; }
.industry-list-item span { font-size: 1rem; }
.industry-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.ind-card {
  background: var(--off-white); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 1.1rem 0.85rem;
  text-align: center; transition: all 0.2s;
}
.ind-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-sm); background: var(--white); }
.ind-emoji { font-size: 1.9rem; line-height: 1; margin-bottom: 0.45rem; }
.ind-label { font-size: 0.78rem; color: var(--text-body); font-weight: 600; line-height: 1.3; }

/* Benefits */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.benefit-card {
  background: var(--off-white); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1.6rem; transition: all 0.25s;
}
.benefit-card:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(245,166,35,0.14); background: var(--white); }
.benefit-icon { font-size: 2.1rem; margin-bottom: 0.8rem; }
.benefit-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.97rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--text-dark); }
.benefit-desc { font-size: 0.84rem; color: var(--text-body); line-height: 1.65; font-weight: 500; }

/* Support */
.support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.support-card {
  background: var(--off-white); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1.6rem 1.3rem; transition: all 0.25s;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.support-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-md); background: var(--white); }
.support-icon { font-size: 1.9rem; margin-bottom: 0.3rem; }
.support-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.92rem; font-weight: 800; color: var(--text-dark); }
.support-desc { font-size: 0.82rem; color: var(--text-body); line-height: 1.6; font-weight: 500; }
.support-extra { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.support-link { color: var(--blue); font-size: 0.82rem; text-decoration: none; font-weight: 700; }
.support-link:hover { text-decoration: underline; color: var(--orange-dark); }

/* Offices */
.offices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.office-card {
  background: var(--off-white); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1.4rem 1.3rem 1.6rem; transition: all 0.25s;
}
.office-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--white); }
.office-card.office-hq { border-color: rgba(245,166,35,0.35); background: var(--orange-pale); }
.office-badge { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; }
.office-card.office-hq .office-badge { color: var(--orange-dark); }
.office-card.office-rd .office-badge { color: var(--blue); }
.office-city { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.45rem; color: var(--text-dark); }
.office-addr { font-size: 0.82rem; color: var(--text-body); line-height: 1.65; font-weight: 500; }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
  margin-bottom: 4rem;
  background: linear-gradient(135deg, #0d1e3c 0%, #1a3a7a 50%, #0a2d6e 100%);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl); padding: 4rem 3rem;
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(245,166,35,0.12), transparent);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.cta-badge {
  display: inline-block; background: rgba(245,166,35,0.15);
  border: 1px solid rgba(245,166,35,0.35); border-radius: 100px;
  padding: 0.4rem 1.3rem; font-size: 0.8rem; font-weight: 700;
  color: var(--orange); letter-spacing: 0.05em; margin-bottom: 1rem;
}
.cta-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); margin-bottom: 1rem; }
.cta-body { font-size: 1rem; color: rgba(255,255,255,0.85); line-height: 1.75; margin-bottom: 1.75rem; font-weight: 400; }
.cta-trust {
  display: inline-flex; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm); padding: 0.85rem 1.75rem;
  font-size: 0.88rem; color: rgba(255,255,255,0.9);
  margin-bottom: 2rem; text-align: left; font-weight: 500;
}
.cta-trust-icon { font-size: 1.3rem; flex-shrink: 0; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-btn-primary {
  padding: 0.95rem 2.4rem;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: var(--white); border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.97rem; font-weight: 700;
  text-decoration: none; transition: all 0.22s;
  box-shadow: 0 4px 22px rgba(245,166,35,0.5);
}
.cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,166,35,0.65); }
.cta-btn-secondary {
  padding: 0.95rem 2.4rem;
  background: rgba(255,255,255,0.1); color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.97rem; font-weight: 600;
  text-decoration: none; transition: all 0.22s; backdrop-filter: blur(8px);
}
.cta-btn-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================
   REMOVED: this module previously redefined footer, .footer-link,
   .footer-links, footer strong, .footer-logo-row/.footer-logo/
   .footer-tagline/.footer-dot for an old, unused footer layout.
   Those selectors collided with the real site-wide footer classes
   (same names, loaded after style.css → last-rule-wins), which is
   why this page's footer background, link colors, hover states,
   font weight and column spacing didn't match the rest of the
   Breeze site. The footer markup here is byte-identical to every
   other page's footer, so it now inherits its styling entirely
   from style.css — no duplicate footer CSS needed. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .industry-layout { grid-template-columns: 1fr; }
  .industry-cards  { grid-template-columns: repeat(3, 1fr); }
  .benefits-grid   { grid-template-columns: repeat(2, 1fr); }
  .support-grid    { grid-template-columns: repeat(2, 1fr); }
  .offices-grid    { grid-template-columns: repeat(2, 1fr); }
  .product-tab { min-width: 140px; padding: 0.85rem 1.2rem; }
  .product-tab .tab-icon { height: 42px; }
  .tab-product-logo { height: 38px; max-width: 110px; }
  .product-tab .tab-label { font-size: 0.82rem; }
  .stats-bar { gap: 1.75rem; }
  .cta-section { padding: 3rem 1.75rem; }
  .cta-heading { font-size: 2rem; }
}
@media (max-width: 640px) {
  .benefits-grid, .support-grid, .offices-grid { grid-template-columns: 1fr; }
  .industry-cards { grid-template-columns: repeat(2, 1fr); }
  .product-nav { padding: 0.4rem; }
  .product-tab { min-width: 110px; padding: 0.75rem 0.85rem; }
  .product-tab .tab-icon { height: 36px; }
  .tab-product-logo { height: 32px; max-width: 95px; }
  .cta-heading { font-size: 1.75rem; }
}

/* ── Product tab icon wrapper ── */
.product-tab .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 100%;
  line-height: 1;
  /* Pass clicks through to parent button */
  pointer-events: none;
}

/* ── Logo image — FULL COLOR always ── */
.tab-product-logo {
  height: 48px;
  width: auto;
  max-width: 136px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* Always full colour — no fading */
  filter: none;
  opacity: 1;
  transition: transform 0.22s ease, filter 0.22s ease;
  border-radius: 4px;
}

/* ── Hover: scale + glow, never reduce opacity ── */
.product-tab:hover .tab-product-logo {
  filter: drop-shadow(0 4px 12px rgba(26,79,214,0.30));
  transform: scale(1.06);
}

/* ── ACTIVE: invert for dark-blue bg readability ── */
.product-tab.active .tab-product-logo {
  /* White logos → white on dark bg; keeps brand legible */
  filter: brightness(0) invert(1) opacity(0.95);
  transform: scale(1.05);
}

/* Pass pointer-events through inner elements */
.product-tab .tab-label,
.product-tab .tab-badge {
  pointer-events: none;
}

/* ============================================================
   WHAT'S NEW BUTTON  (hero CTA)
   ============================================================ */
.brz-hero__wn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.4rem 0.72rem 1.1rem;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.87rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  color: #0d1e3c;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  /* Base gradient */
  background: linear-gradient(135deg, #ffcf40 0%, #f5a623 55%, #e08b00 100%);
  border: 1.5px solid rgba(255, 215, 80, 0.6);
  /* Layered glow shadow */
  box-shadow:
    0 4px 18px rgba(245, 166, 35, 0.55),
    0 1px 4px rgba(245, 166, 35, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.35);
  /* Entrance + continuous pulse */
  animation:
    wn-entrance 0.55s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    wn-pulse    3.5s 1.2s ease-in-out infinite;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Shine sweep */
.brz-hero__wn-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent  20%,
    rgba(255,255,255,0.55) 50%,
    transparent  80%
  );
  transform: translateX(-110%);
  animation: wn-shine 3.5s 1.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Hover state */
.brz-hero__wn-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 10px 30px rgba(245, 166, 35, 0.70),
    0 3px 8px  rgba(245, 166, 35, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.4);
  color: #0d1e3c;
}

/* Rocket icon */
.brz-hero__wn-icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  animation: wn-rocket 2.8s 1s ease-in-out infinite;
  pointer-events: none;
}

/* Update count badge */
.brz-hero__wn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  background: #0d1e3c;
  color: #ffd280;
  letter-spacing: 0;
  margin-left: 0.1rem;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ── Keyframes ── */
@keyframes wn-entrance {
  from { opacity: 0; transform: scale(0.72) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
@keyframes wn-pulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(245,166,35,0.55),
                0 1px 4px  rgba(245,166,35,0.30),
                inset 0 1px 0 rgba(255,255,255,0.35);
  }
  50% {
    box-shadow: 0 6px 28px rgba(245,166,35,0.80),
                0 2px 8px  rgba(245,166,35,0.45),
                inset 0 1px 0 rgba(255,255,255,0.35),
                0 0 0 5px  rgba(245,166,35,0.12);
  }
}
@keyframes wn-shine {
  0%        { transform: translateX(-110%); }
  30%, 100% { transform: translateX(130%); }
}
@keyframes wn-rocket {
  0%, 100% { transform: translate(0,    0)    rotate(0deg);   }
  25%      { transform: translate(1px, -2px)  rotate(-8deg);  }
  75%      { transform: translate(-1px, 1px)  rotate( 6deg);  }
}

/* Mobile: stack buttons, full width */
@media (max-width: 580px) {
  .brz-hero__wn-btn { width: 100%; justify-content: center; }
}

/* What's New inner elements */
.brz-hero__wn-icon { font-size: 1rem; line-height: 1; }
.brz-hero__wn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: linear-gradient(135deg, var(--hz-orange), var(--hz-orange-dark));
  color: #0d1730;
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem; font-weight: 800;
  line-height: 1;
  margin-left: 0.1rem;
  box-shadow: 0 2px 8px rgba(245,166,35,0.5);
  animation: wn-dot-pulse 1.4s ease-in-out infinite;
}