/* ========================================================
   Hydrobann Brand CSS - Minimal, Modern & Pure CSS
   Brand Color: #86C341 | Zero JS | Bootstrap 5 Integrated
   ======================================================== */

:root {
  --hb-brand: #86C341;
  --hb-brand-hover: #6da832;
  --hb-brand-subtle: rgba(134, 195, 65, 0.12);
  --hb-brand-glow: rgba(134, 195, 65, 0.35);
  --hb-dark: #0f172a;
  --hb-card-bg: #ffffff;
  --hb-border: #e2e8f0;
}

/* کارت‌های صنعتی با طراحی مدرن و خط درخشان برند در هاور */
.hb-box {
  background-color: var(--hb-card-bg);
  border: 1px solid var(--hb-border);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
              background: radial-gradient(circle at top right, rgba(134, 195, 65, 0.12) 0%, transparent 60%), #ffffff;
}

.hb-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--hb-brand);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hb-box:hover {
  transform: translateY(-5px);
  border-color: var(--hb-brand);
  box-shadow: 0 16px 30px rgba(134, 195, 65, 0.12) !important;
}

.hb-box:hover::before {
  opacity: 1;
}

/* انیمیشن پالس مینیمال نشانگر وضعیت (سبز سازمانی) */
.hb-status-pulse {
  width: 9px;
  height: 9px;
  background-color: var(--hb-brand);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 var(--hb-brand-glow);
  animation: hbPulseAnimation 2s infinite ease-out;
}

@keyframes hbPulseAnimation {
  0% {
    box-shadow: 0 0 0 0 var(--hb-brand-glow);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(134, 195, 65, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(134, 195, 65, 0);
  }
}

/* آیکون باکس اختصاصی با افکت چرخش مینیمال */
.hb-icon-wrapper {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  background-color: var(--hb-brand-subtle);
  color: var(--hb-brand-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(134, 195, 65, 0.25);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hb-box:hover .hb-icon-wrapper {
  background-color: var(--hb-brand);
  color: #ffffff;
  transform: scale(1.05) rotate(-4deg);
}

/* دکمه‌های سازمانی با رنگ اصلی هیدروبان */
.btn-hb-brand {
  background-color: var(--hb-brand);
  color: #0f172a !important;
  font-weight: 700;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-hb-brand:hover {
  background-color: var(--hb-brand-hover);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--hb-brand-glow);
}

/* بج رنگ سازمانی هیدروبان */
.hb-badge-brand {
  background-color: var(--hb-brand-subtle);
  color: var(--hb-dark);
  border: 1px solid rgba(134, 195, 65, 0.3);
}

/* رنگ متنی و هاور لینک‌ها */
.hb-text-brand {
  color: var(--hb-brand-hover) !important;
}

.hb-interactive-link {
  color: var(--hb-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hb-interactive-link:hover {
  color: var(--hb-brand-hover);
}

/* دسترس‌پذیری برای جلوگیری از پرش انیمیشن */
@media (prefers-reduced-motion: reduce) {
  .hb-box,
  .hb-icon-wrapper,
  .btn-hb-brand,
  .hb-status-pulse {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}






/* --- استایل پایه و باکس آیکون --- */
.hydrobann-badge {
  background-color: rgba(134, 195, 65, 0.15);
  color: #558322;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.metric-box {
  transition: transform 0.25s ease, border-color 0.25s ease;
  border-color: #eaeef1 !important;
}
.metric-box:hover {
  transform: translateY(-3px);
  border-color: #86C341 !important;
}

.highlight-card-mission,
.highlight-card-vision {
  background-color: #fbfcfb;
  border-right: 4px solid #86C341 !important;
}

.vision-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(134, 195, 65, 0.15);
  flex-shrink: 0;
}

.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-top: 3px solid transparent !important;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07) !important;
  border-top: 3px solid #86C341 !important;
}

.hydrobann-cta-dark {
  background: linear-gradient(135deg, #1d221f 0%, #0e1210 100%) !important;
  border: 1px solid rgba(134, 195, 65, 0.3);
}

.btn-hydrobann-primary {
  background-color: #86C341;
  color: #121512;
  border: 1px solid #86C341;
  transition: all 0.2s ease-in-out;
}
.btn-hydrobann-primary:hover {
  background-color: #72a835;
  border-color: #72a835;
  color: #ffffff;
}

/* --- تعریف آیکون‌های وکتور خالص هیدروبان (بدون فونت و غیرقابل حذف توسط JCE) --- */
.hb-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* آیکون تارگت / ماموریت */
.hb-target {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

/* آیکون چشم‌انداز / ویژن */
.hb-eye {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* آیکون بازرگانی و انبار */
.hb-import {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='22' height='13' rx='2' ry='2'/%3E%3Cpolyline points='1 9 12 14 23 9'/%3E%3C/svg%3E");
}

/* آیکون کارگاه و تراشکاری CNC */
.hb-gear {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

/* آیکون قطره / پمپ واترجت و هیدرولیک */
.hb-pump {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}

/* استایل کارت‌های صنایع */
.industry-card {
  transition: transform 0.2s ease, border 0.2s ease;
  border-right: 3px solid transparent !important;
}

.industry-card:hover {
  transform: translateY(-3px);
  border-right: 3px solid #86C341 !important;
  background-color: #ffffff !important;
}

.industry-dot {
  width: 8px;
  height: 8px;
  background-color: #86C341;
  border-radius: 50%;
  display: inline-block;
}


/* استایل و آیکون‌های وکتور اختصاصی صنایع هیدروبان */
.industry-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-right: 3px solid transparent !important;
}

.industry-card:hover {
  transform: translateY(-4px);
  border-right: 3px solid #86C341 !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important;
}

.hb-ind-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* آیکون خودرو / خطوط مونتاژ صنعتی */
.hb-ind-car {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H6.5a1 1 0 0 0-.8.4L3 11l-5.16.86a1 1 0 0 0-.84.99V16h3'/%3E%3Ccircle cx='6.5' cy='16.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E");
}

/* آیکون معدن، مصالح و حفاری */
.hb-ind-cement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22h20'/%3E%3Cpath d='m14 10 7-7'/%3E%3Cpath d='M18 3l3 3'/%3E%3Cpath d='m2 22 10-10'/%3E%3Cpath d='m7 13 4 4'/%3E%3C/svg%3E");
}

/* آیکون کارخانه ذوب، کوره و متالورژی */
.hb-ind-steel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M5 20V8l5 4V4l9 8v8'/%3E%3Cpath d='M13 14v2'/%3E%3Cpath d='M9 16v2'/%3E%3C/svg%3E");
}

/* آیکون مخزن و پالایشگاه نفت و پتروشیمی */
.hb-ind-oil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18'/%3E%3Cpath d='M6 12h12'/%3E%3Cpath d='m12 6 2 2-2 2'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}





/* افکت و چارچوب تصویر کارگاه */
.hb-image-frame {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hb-image-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

.hb-zoom-img {
  transition: transform 0.5s ease;
}

.hb-image-frame:hover .hb-zoom-img {
  transform: scale(1.03);
}

/* آیتم‌های ویژگی با تعامل برندینگ */
.hb-feature-item {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border-right: 3px solid transparent !important;
}

.hb-feature-item:hover {
  transform: translateX(-4px);
  border-right: 3px solid #86C341 !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05) !important;
}

/* نشانگر چشمک‌زن وضعیت زنده */
.hb-pulse-indicator {
  width: 9px;
  height: 9px;
  background-color: #86C341;
  border-radius: 50%;
  display: inline-block;
}

/* استایل آیکون‌های وکتور اختصاصی کارگاهی */
.hb-spec-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* آیکون گیج فشار ۷۰۰ بار */
.hb-spec-gauge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m14 10-4 4'/%3E%3Cpath d='m12 6 2 4'/%3E%3C/svg%3E");
}

/* آیکون دستگاه پرس هیدرولیک */
.hb-spec-press {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h16'/%3E%3Cpath d='M7 21v-4'/%3E%3Cpath d='M17 21v-4'/%3E%3Cpath d='M4 17h16'/%3E%3Cpath d='M12 3v10'/%3E%3Cpath d='M8 9l4 4 4-4'/%3E%3Cpath d='M6 3h12'/%3E%3C/svg%3E");
}

/* آیکون تراشکاری و فرز CNC */
.hb-spec-cnc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* آیکون تاییدیه و تست هیدرواستاتیک */
.hb-spec-test {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}





/* ===================================================
   Hydrobann Creative Bento-Engineering Section
   Identity Accent: #86C341 | 100% Pure CSS (No JS)
   =================================================== */

.hb-bento-hero {
  position: relative;
  background: radial-gradient(circle at top right, rgba(134, 195, 65, 0.12) 0%, transparent 60%), #ffffff;
  overflow: hidden;
}

/* Ambient glow accents */
.hb-glow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(134, 195, 65, 0.4);
  box-shadow: 0 4px 14px rgba(134, 195, 65, 0.15);
  padding: 6px 16px;
  border-radius: 50rem;
  font-size: 0.85rem;
  color: #3b610e;
  font-weight: 700;
}

.hb-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #86C341;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(134, 195, 65, 0.7);
  animation: hbPulse 2s infinite;
}

@keyframes hbPulse {
  0% { box-shadow: 0 0 0 0 rgba(134, 195, 65, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(134, 195, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(134, 195, 65, 0); }
}

.hb-hero-title {
  color: #111418;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.hb-hero-title mark {
  background: transparent;
  color: #86C341;
  position: relative;
  padding: 0;
}

/* Bento Cards Styling */
.hb-bento-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hb-bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #86C341, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hb-bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(134, 195, 65, 0.5);
  box-shadow: 0 18px 36px -10px rgba(134, 195, 65, 0.18);
}

.hb-bento-card:hover::before {
  opacity: 1;
}

/* Hero Dark Bento Card (1400 Bar Feature) */
.hb-bento-dark {
  background: linear-gradient(145deg, #161a1d, #0d1012);
  border: 1px solid #273038;
  color: #ffffff;
}

.hb-bento-dark:hover {
  border-color: #86C341;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.hb-stat-num {
  font-size: 2.75rem;
  font-weight: 900;
  color: #86C341;
  line-height: 1;
  font-family: inherit;
  letter-spacing: -1px;
}

/* Vector Icons with Glow Container */
.hb-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0.85rem;
  background: rgba(134, 195, 65, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.hb-bento-card:hover .hb-icon-box {
  transform: rotate(5deg) scale(1.08);
  background: #86C341;
}

.hb-bento-card:hover .hb-svg-icon {
  filter: brightness(0) invert(1);
}

.hb-svg-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 0.3s ease;
}

/* Data-URI SVGs */
.hb-ico-pressure {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0-10-10 10 10 0 0 0 10 10z'/%3E%3Cpath d='m16 8-5 5'/%3E%3Cpath d='M12 7V3'/%3E%3Cpath d='M7 12H3'/%3E%3Cpath d='M17 12h4'/%3E%3C/svg%3E");
}

.hb-ico-cnc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.hb-ico-hose {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4.5c1.62-1.63 5-1.5 5-1.5'/%3E%3C/svg%3E");
}

.hb-ico-flame {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C341' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
}

/* Image Visual Bento Container */
.hb-visual-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
  min-height: 420px;
}

.hb-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hb-visual-card:hover img {
  transform: scale(1.04);
}

/* Glassmorphism Floating Pill over Image */
.hb-floating-pill {
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 5px solid #86C341;
  padding: 14px 20px;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* High-Converting CTA Button */
.hb-cta-btn {
  background: linear-gradient(135deg, #86C341, #70a830);
  color: #ffffff;
  font-weight: 800;
  border-radius: 0.75rem;
  padding: 12px 28px;
  border: none;
  box-shadow: 0 8px 22px rgba(134, 195, 65, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.hb-cta-btn:hover {
  background: linear-gradient(135deg, #74b331, #5f9126);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(134, 195, 65, 0.45);
  color: #ffffff;
}

.hb-cta-btn svg {
  transition: transform 0.25s ease;
}

.hb-cta-btn:hover svg {
  transform: translateX(-4px);
}



/* ==========================================
   HYDROBANN FAQ STYLES (PURE CSS & BOOTSTRAP 5)
   ========================================== */
.hb-faq-section {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hb-faq-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(134, 195, 65, 0.08);
  border: 1px solid rgba(134, 195, 65, 0.25);
  color: #86C341;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 50rem;
}

.hb-mark {
  background: transparent;
  color: #86C341;
}

.hb-faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* اصلاح نهایی آکاردئون هیدروبان - دارک گلس با لهجه سبز */
.hb-faq-item {
  background: rgba(18, 22, 25, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 0.85rem !important;
  transition: all 0.25s ease-in-out !important;
  backdrop-filter: blur(8px);
}

.hb-faq-item:hover {
  border-color: rgba(134, 195, 65, 0.4) !important;
  background: rgba(24, 29, 34, 0.95) !important;
  transform: translateY(-2px);
}

.hb-faq-item[open] {
  border-color: #86C341 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 12px rgba(134, 195, 65, 0.15) !important;
}

.hb-faq-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.1rem 1.4rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #f8f9fa !important;
  cursor: pointer !important;
  list-style: none !important;
}

.hb-faq-summary::-webkit-details-marker {
  display: none !important;
}

/* آیکون مدرن بازشو با وکتور SVG سبز هیدروبان */
.hb-faq-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  background: rgba(134, 195, 65, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease !important;
}

.hb-faq-icon::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #86C341 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
}

.hb-faq-item[open] .hb-faq-icon {
  transform: rotate(180deg) !important;
  background: rgba(134, 195, 65, 0.25) !important;
}

.hb-faq-answer {
  padding: 1rem 1.4rem 1.25rem 1.4rem !important;
  color: #414242 !important;
  font-size: 0.95rem !important;
  line-height: 1.85 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.hb-faq-answer strong {
  color: #86C341 !important;
}


/* تضمین بسته بودن پیش‌فرض و نمایش فقط در زمان باز شدن صریح کاربر */
.hb-faq-item:not([open]) .hb-faq-answer {
  display: none !important;
}

.hb-faq-item[open] .hb-faq-answer {
  display: block !important;
}

.hb-faq-item {
  background: #86c3410a !important; /* دارک متالیک عمیق */
  border: 1px solid rgb(94 94 94 / 10%) !important;
  border-radius: 10px !important;
  margin-bottom: 0.75rem !important;
}

.hb-faq-item:hover {
  border-color: rgba(134, 195, 65, 0.5) !important;
  background: #86c3410a !important;
}

.hb-faq-item[open] {
  border-color: #86C341 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.hb-faq-summary {
  color: #121212 !important;
  font-size: 0.98rem !important;
  padding: 1.1rem 1.4rem !important;
}

.hb-faq-icon {
  background: rgba(134, 195, 65, 0.2) !important;
  border-radius: 50% !important;
}






/* استایل باکس‌های ۴گانه مزایای هیدروبان */
.hb-features-section {
  background: transparent;
}

.hb-feature-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hb-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #86C341;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hb-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(134, 195, 65, 0.5);
  box-shadow: 0 10px 24px rgba(134, 195, 65, 0.12);
}

.hb-feature-card:hover::before {
  opacity: 1;
}

/* باکس آیکون گرد با پس‌زمینه لایت سبز */
.hb-icon-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(134, 195, 65, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.hb-feature-card:hover .hb-icon-wrapper {
  background: #86C341;
  transform: scale(1.08);
}

/* آیکون‌های وکتور اختصاصی SVG بدون وابستگی به FontAwesome */
.hb-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: #86C341;
  transition: background-color 0.25s ease;
}

.hb-feature-card:hover .hb-icon {
  background-color: #ffffff; /* هنگام هاور سفید می‌شود */
}

/* ۱. آیکون نشان کیفیت و اصالت (Shield Check) */
.hb-icon-quality {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ۲. آیکون نمایندگی و تامین جهانی (Globe Network) */
.hb-icon-brands {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ۳. آیکون کارگاه و ماشین‌کاری (Settings Cogs / Factory) */
.hb-icon-workshop {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ۴. آیکون مشاوره فنی و تخصصی (Headset / Support) */
.hb-icon-consult {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* تایپوگرافی عناوین و توضیحات */
.hb-feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
}

.hb-feature-desc {
  font-size: 0.83rem;
  line-height: 1.6;
  color: #64748b !important;
  text-align: center;
}

/* بهینه‌سازی دقیق در نمایشگر موبایل */
@media (max-width: 576px) {
  .hb-icon-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem !important;
  }
  .hb-icon {
    width: 22px;
    height: 22px;
  }
  .hb-feature-title {
    font-size: 0.88rem;
  }
  .hb-feature-desc {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}





/* متغیرها و رنگ برند */
:root {
  --hb-brand: #86C341;
  --hb-brand-hover: #75b035;
  --hb-brand-soft: rgba(134, 195, 65, 0.12);
  --hb-text-dark: #1e293b;
}

.text-brand {
  color: var(--hb-brand) !important;
}

.hb-btn-brand {
  background-color: var(--hb-brand) !important;
  border: none !important;
  transition: all 0.25s ease !important;
}
.hb-btn-brand:hover {
  background-color: var(--hb-brand-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(134, 195, 65, 0.35) !important;
}

.hb-dot-status {
  width: 8px;
  height: 8px;
  background-color: var(--hb-brand);
  border-radius: 50%;
  display: inline-block;
}

/* فریم عکس کارگاه */
.hb-workshop-img-frame {
  max-height: 420px;
  background: #f8fafc;
}

/* کارت‌های تجهیزات و ماشین‌آلات */
.hb-equip-card {
  background: #ffffff;
  border: 1px solid #eef2f6 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hb-equip-card:hover {
  transform: translateY(-4px);
  border-color: var(--hb-brand) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05) !important;
}

.hb-equip-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--hb-brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.hb-equip-card:hover .hb-equip-icon-box {
  background: var(--hb-brand);
}

/* کارت‌های شرح خدمات */
.hb-service-box {
  position: relative;
  transition: all 0.25s ease;
}
.hb-service-box:hover {
  border-color: var(--hb-brand) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(134, 195, 65, 0.08) !important;
}

.hb-service-badge {
  font-family: monospace, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--hb-brand);
}

.hb-check-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hb-brand);
  display: inline-block;
}

/* بنر فراخوان نهایی (CTA) */
.hb-cta-banner {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(134, 195, 65, 0.3);
}

/* آیکون‌های وکتور اختصاصی SVG بدون کتابخانه خارجی */
.hb-ico {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--hb-brand);
  transition: background-color 0.25s ease;
}
.hb-equip-card:hover .hb-ico {
  background-color: #ffffff;
}

/* آیکون CTA واتس‌اپ */
.hb-icon-cta {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* آیکون ۱: دستگاه تراش و فرز CNC */
.hb-ico-cnc {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* آیکون ۲: دستگاه پرس شیلنگ */
.hb-ico-press {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M7 10h10'/%3E%3Cpath d='M12 2v8'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M7 10h10'/%3E%3Cpath d='M12 2v8'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* آیکون ۳: جوشکاری آرگون و CO2 */
.hb-ico-weld {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* آیکون ۴: جوشکاری لیزر */
.hb-ico-laser {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* آیکون ۵: تست هیدرواستاتیک */
.hb-ico-hydro {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m12 12 4-4'/%3E%3Cpath d='M12 7v1'/%3E%3Cpath d='M12 16v1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m12 12 4-4'/%3E%3Cpath d='M12 7v1'/%3E%3Cpath d='M12 16v1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* آیکون ۶: تست نشتی شیلنگ */
.hb-ico-leak {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}


.hb-card-title-link {
  transition: color 0.2s ease-in-out;
}
.hb-card-title-link:hover {
  color: #86C341 !important;
}
.hb-link-text {
  color: #212529;
  transition: all 0.2s ease-in-out;
}
.hb-link-text:hover {
  color: #86C341 !important;
  transform: translateX(-3px);
}




/* --- پالت رنگ و تایپوگرافی --- */
:root {
  --hb-lime: #86C341;
  --hb-lime-hover: #96d848;
  --hb-lime-glow: rgba(134, 195, 65, 0.35);
  --hb-dark-slate: #0d130e;
}

.text-lime {
  color: var(--hb-lime) !important;
}

.fw-black {
  font-weight: 900;
}

/* گرادینت متنی برای تیتر */
.hb-text-gradient {
  background: linear-gradient(135deg, #111827 30%, #528020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* کپسول وضعیت بالای صفحه */
.hb-status-pill {
  background: #f2f9eb;
  border: 1px solid rgba(134, 195, 65, 0.45);
  color: #2b500a;
  box-shadow: 0 4px 12px rgba(134, 195, 65, 0.12);
}

.hb-neon-dot {
  width: 8px;
  height: 8px;
  background-color: var(--hb-lime);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(134, 195, 65, 0.6);
  animation: hbPulse 2.2s infinite;
}

@keyframes hbPulse {
  0% { box-shadow: 0 0 0 0 rgba(134, 195, 65, 0.7); }
  70% { box-shadow: 0 0 0 9px rgba(134, 195, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(134, 195, 65, 0); }
}

/* کارت‌های سبک بنتو با بافت ملایم و سایه هارمونیک */
.hb-panel {
  border: 1px solid #e5e9e2;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* پس‌زمینه کارت‌های روشن با گرادینت شیری-متالیک بسیار ملایم */
.hb-panel-light {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.05), 0 4px 10px -2px rgba(134, 195, 65, 0.04);
}

.hb-panel-light:hover {
  transform: translateY(-5px);
  border-color: var(--hb-lime);
  box-shadow: 0 18px 32px -8px rgba(15, 23, 42, 0.09), 0 0 20px -3px var(--hb-lime-glow);
}

/* کارت اصلی (Hero Dark Bento) */
.hb-panel-hero {
  background: radial-gradient(circle at 90% 10%, #1c271e 0%, #0d120e 100%);
  border: 1px solid rgba(134, 195, 65, 0.3);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 0 30px -5px rgba(134, 195, 65, 0.15);
}

.hb-panel-hero:hover {
  transform: translateY(-4px);
  border-color: var(--hb-lime);
  box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.35), 0 0 35px -2px rgba(134, 195, 65, 0.28);
}

.hb-ambient-glow {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(134, 195, 65, 0.35) 0%, rgba(134, 195, 65, 0) 70%);
  pointer-events: none;
}

.hb-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.6;
  pointer-events: none;
}

/* کارت نسوز با هاله گرم */
.hb-panel-fire {
  background: linear-gradient(180deg, #ffffff 0%, #fffbf9 100%);
  border: 1px solid #f2ded8;
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.05);
}

.hb-panel-fire:hover {
  transform: translateY(-5px);
  border-color: #ea580c;
  box-shadow: 0 18px 32px -8px rgba(234, 88, 12, 0.12);
}

.hb-fire-halo {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0) 70%);
  pointer-events: none;
}

/* محفظه آیکون کپسولی (Gem Box) */
.hb-icon-gem {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(134, 195, 65, 0.2) 0%, rgba(134, 195, 65, 0.05) 100%);
  border: 1px solid rgba(134, 195, 65, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-gem-fire {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.03) 100%);
  border-color: rgba(239, 68, 68, 0.25);
}

.hb-gem-blue {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.03) 100%);
  border-color: rgba(13, 110, 253, 0.25);
}

/* چیپ‌ها و بج‌های مهندسی */
.hb-chip-code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--hb-lime);
  background: rgba(134, 195, 65, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(134, 195, 65, 0.25);
}

.hb-tag-brand {
  font-size: 0.75rem;
  font-weight: 600;
  color: #d6ded8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.2s;
}

.hb-tag-brand:hover {
  background: rgba(134, 195, 65, 0.2);
  border-color: var(--hb-lime);
  color: #fff;
}

.hb-tag-brand-pro {
  color: var(--hb-lime);
  border-color: var(--hb-lime);
  background: rgba(134, 195, 65, 0.15);
}

.hb-badge-fire {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.hb-badge-origin {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.hb-badge-tech {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.hb-badge-german {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

/* جعبه‌های آمار و مشخصات داخلی کارت‌ها */
.hb-stat-box, .hb-metric-grid, .hb-spec-box {
  background: #f7faf5;
  border: 1px solid #e6ede0;
}

.hb-divider-v {
  width: 1px;
  height: 36px;
  background: #dce5d5;
}

/* دکمه‌های کنشی (CTA) */
.hb-btn-cta {
  background: linear-gradient(135deg, #86C341 0%, #75b233 100%);
  border: 1px solid #86C341;
  box-shadow: 0 4px 14px rgba(134, 195, 65, 0.4);
  transition: all 0.25s ease;
}

.hb-btn-cta:hover,
.hb-btn-cta:focus {
  background: linear-gradient(135deg, var(--hb-lime-hover) 0%, #86C341 100%);
  box-shadow: 0 6px 20px rgba(134, 195, 65, 0.55);
  transform: translateY(-2px);
  color: #000;
}

.hb-btn-outline {
  border: 1.5px solid #2d3748;
  color: #2d3748;
  background: transparent;
  transition: all 0.25s ease;
}

.hb-btn-outline:hover {
  background: #2d3748;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* بنر فوتر تیره با گرادینت غنی */
.hb-footer-cta {
  background: radial-gradient(circle at 10% 50%, #1e281f 0%, #0d120e 100%);
  border: 1px solid rgba(134, 195, 65, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

.hb-cta-glow {
  position: absolute;
  bottom: -60px;
  left: 20%;
  width: 300px;
  height: 140px;
  background: radial-gradient(circle, rgba(134, 195, 65, 0.25) 0%, rgba(134, 195, 65, 0) 70%);
  pointer-events: none;
}

/* آیکون‌های وکتور اختصاصی (SVG Mask) بدون نیاز به فایل خارجی */
.hb-mask-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.hb-ico-hose {
  background-color: var(--hb-lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a5 5 0 0 1 5 5v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h11a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H7a5 5 0 0 1-5-5V5a3 3 0 0 1 2-2.8V5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a5 5 0 0 1 5 5v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h11a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H7a5 5 0 0 1-5-5V5a3 3 0 0 1 2-2.8V5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hb-ico-fire {
  background-color: #ef4444;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.5 3 2.5 5 4 7 1.5 2 2 4.5 2 6.5A7.5 7.5 0 0 1 10.5 23C6.36 23 3 19.64 3 15.5c0-4 3-7.5 5.5-10 1 2.5 2.5 4 4 4 .5-2.5-.5-5.5-.5-7.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.5 3 2.5 5 4 7 1.5 2 2 4.5 2 6.5A7.5 7.5 0 0 1 10.5 23C6.36 23 3 19.64 3 15.5c0-4 3-7.5 5.5-10 1 2.5 2.5 4 4 4 .5-2.5-.5-5.5-.5-7.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hb-ico-pump {
  background-color: var(--hb-lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6V4a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H2v4h3v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8h3V6h-3zm-7 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6V4a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H2v4h3v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8h3V6h-3zm-7 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hb-ico-fitting {
  background-color: var(--hb-lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.71 13.04l-2.4-2.4a1 1 0 0 0-1.41 0l-1.83 1.83-4.95-4.95 1.83-1.83a1 1 0 0 0 0-1.41L9.54 1.87a1 1 0 0 0-1.41 0L5.72 4.29a3 3 0 0 0 0 4.24l.59.59-4.02 4.02a2 2 0 0 0 0 2.83l4.24 4.24a2 2 0 0 0 2.83 0l4.02-4.02.59.59a3 3 0 0 0 4.24 0l2.42-2.42a1 1 0 0 0 .08-1.32z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.71 13.04l-2.4-2.4a1 1 0 0 0-1.41 0l-1.83 1.83-4.95-4.95 1.83-1.83a1 1 0 0 0 0-1.41L9.54 1.87a1 1 0 0 0-1.41 0L5.72 4.29a3 3 0 0 0 0 4.24l.59.59-4.02 4.02a2 2 0 0 0 0 2.83l4.24 4.24a2 2 0 0 0 2.83 0l4.02-4.02.59.59a3 3 0 0 0 4.24 0l2.42-2.42a1 1 0 0 0 .08-1.32z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hb-ico-nozzle {
  background-color: #0d6efd;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h-4V2zm6 5H8a2 2 0 0 0-2 2v3l2 4v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6l2-4V9a2 2 0 0 0-2-2zm-2 14h-4v-5.2l-2-4V9h8v3.8l-2 4V21z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h-4V2zm6 5H8a2 2 0 0 0-2 2v3l2 4v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6l2-4V9a2 2 0 0 0-2-2zm-2 14h-4v-5.2l-2-4V9h8v3.8l-2 4V21z'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* اصلاح کنتراست متن‌ها و تضمین امتیاز 100 در گوگل لایت‌هاوس */
.hb-catalog-section p,
.hb-panel p,
.hb-catalog-section .text-muted {
  color: #374151 !important; /* رنگ اسلیت تیره استاندارد با کنتراست عالی و خوانایی فوق‌العاده */
  opacity: 1 !important;
  font-weight: 400;
  line-height: 1.8;
}

/* متن‌های داخل باکس‌های مشخصات فنی */
.hb-metric-grid span,
.hb-spec-box div {
  color: #1f2937 !important;
}

/* متن‌های داخل کارت تیره اصلی شیلنگ‌ها */
.hb-panel-hero p,
.hb-panel-hero .text-white-50 {
  color: #d1d5db !important; /* کنتراست ایده‌آل روی بک‌گراند تیره */
  opacity: 1 !important;
}


/* ==========================================================
   بهینه‌سازی سراسری کنتراست و خوانایی سایت هیدروبان (SEO & WCAG AAA)
   ========================================================== */

/* ۱. اصلاح تمام متون خاکستری و کم‌رنگ به اسلیت تیره و خوانا */
.text-muted,
.text-secondary,
p.text-muted,
p.text-secondary,
span.text-muted {
  color: #374151 !important; /* خاکستری متالیک تیره با کنتراست بالای ۷:۱ روی سفید */
  opacity: 1 !important;
}

/* ۲. استانداردسازی فونت پاراگراف‌ها برای رفع کامل تاری و خستگی چشم */
body, 
p {
  color: #1f2937; /* رنگ مشکی-اسلیت عمیق برای متون عمومی */
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ۳. اصلاح متن‌های نیمه‌شفاف داخل بخش‌ها یا کارت‌های تیره (Dark Sections) */
.bg-dark p,
.bg-dark .text-muted,
.bg-dark .text-white-50,
[class*="-hero"] p,
[class*="-hero"] .text-white-50 {
  opacity: 1 !important;
}



/* ===================================================
   Hydrobann Products Hub Styles (Light Engineering)
   =================================================== */
:root {
  --hb-brand: #86C341;
  --hb-brand-dark: #588e1e;
  --hb-brand-light: rgba(134, 195, 65, 0.15);
  --hb-dark: #0f172a;
  --hb-text: #334155;
  --hb-text-muted: #64748b;
  --hb-border: #e2e8f0;
  --hb-bg-subtle: #f8fafc;
}

/* هیرو و معرفی دسته‌بندی */
.hb-hero-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--hb-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.hb-badge-brand {
  background-color: var(--hb-brand-light);
  color: var(--hb-brand-dark);
  border: 1px solid rgba(134, 195, 65, 0.35);
  font-size: 0.85rem;
}

.hb-title-main {
  color: var(--hb-dark);
  font-size: 2.1rem;
  line-height: 1.3;
}

.hb-desc-main {
  color: var(--hb-text);
  font-size: 1rem;
  line-height: 1.9;
}

.hb-btn-primary {
  background-color: var(--hb-brand);
  color: var(--hb-dark);
  border: 1px solid var(--hb-brand);
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}
.hb-btn-primary:hover {
  background-color: var(--hb-brand-dark);
  border-color: var(--hb-brand-dark);
  color: #ffffff;
}

.hb-btn-outline-brand {
  background: #ffffff;
  border: 1px solid var(--hb-brand);
  color: var(--hb-brand-dark);
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}
.hb-btn-outline-brand:hover {
  background: var(--hb-brand-light);
  color: var(--hb-brand-dark);
}

/* پنل راهنمای انتخاب و متریک‌ها */
.hb-guide-card {
  background-color: #ffffff;
  border: 1px solid var(--hb-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.hb-guide-list li {
  color: var(--hb-text);
  font-size: 0.9rem;
  line-height: 2;
}
.hb-guide-list li strong {
  color: var(--hb-brand-dark);
}

.hb-metric-pill {
  background-color: var(--hb-bg-subtle);
  border: 1px solid var(--hb-border);
}
.hb-metric-val {
  color: var(--hb-dark);
  font-weight: 700;
}

/* کارت‌های گرید محصولات */
.hb-product-card {
 background: radial-gradient(circle at top right, rgba(134, 195, 65, 0.12) 0%, transparent 60%), #ffffff;
  border: 1px solid var(--hb-border);
  border-top: 4px solid var(--hb-brand);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hb-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hb-card-title {
  color: var(--hb-dark);
}

.hb-card-text {
  color: var(--hb-text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
}

.hb-tag-pill {
  background-color: #f1f5f9;
  color: #1e293b;
  border: 1px solid var(--hb-border);
  font-size: 0.85rem;
}

.hb-tag-blue {
  background-color: #f8fafc;
  color: #0284c7;
  border: 1px solid #e0f2fe;
  font-size: 0.85rem;
}

.hb-link-more {
  color: var(--hb-brand-dark);
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.2s ease;
}
.hb-link-more:hover {
  color: var(--hb-dark);
  text-decoration: underline;
}

.hb-border-top-subtle {
  border-top: 1px solid #f1f5f9;
}



/* ================= HYDROBANN HOSE HUB HIGH-TECH STYLES ================= */
:root {
  --hb-lime: #86C341;
  --hb-lime-dark: #6fa533;
  --hb-lime-alpha: rgba(134, 195, 65, 0.12);
  --hb-bg-radial: radial-gradient(circle at top right, rgba(134, 195, 65, 0.12) 0%, transparent 60%), #ffffff;
}

.hb-universe {
  position: relative;
  font-family: inherit;
}

/* Hero Cyber Grid */
.hb-hero-cyber {
  background: var(--hb-bg-radial);
  background-image: 
    radial-gradient(circle at 100% 0%, rgba(134, 195, 65, 0.15) 0%, transparent 50%),
    linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
}

.hb-glow-orb {
  position: absolute;
  top: -50px;
  left: 20%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 195, 65, 0.25) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: hbPulseGlow 6s ease-in-out infinite alternate;
}

@keyframes hbPulseGlow {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.5; }
  100% { transform: scale(1.2) translate(-30px, 20px); opacity: 0.85; }
}

.hb-text-gradient {
  background: linear-gradient(135deg, #111827 30%, var(--hb-lime-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hb-pill {
  background: rgba(134, 195, 65, 0.15);
  border: 1px solid rgba(134, 195, 65, 0.3);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2e5210;
}

.hb-blink-dot {
  width: 8px;
  height: 8px;
  background-color: var(--hb-lime);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--hb-lime);
  animation: hbBlink 1.4s infinite;
}

@keyframes hbBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* Telemetry Box & Step Badges */
.hb-telemetry-box {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.hb-matrix-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hb-matrix-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  color: #374151;
  line-height: 1.5;
}

.hb-step-badge {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: #ffffff;
  color: #111827;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  border: 1.5px solid var(--hb-lime);
  box-shadow: 0 3px 8px rgba(134, 195, 65, 0.2);
  margin-top: 2px;
}

/* Fancy Cards */
.hb-fancy-card {
  background: var(--hb-bg-radial);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.hb-fancy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(134, 195, 65, 0.18), 0 0 0 1.5px var(--hb-lime);
}

.hb-card-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--hb-lime), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.hb-fancy-card:hover .hb-card-scanline {
  transform: translateX(100%);
}

.hb-radar-icon {
  position: relative;
  width: 54px;
  height: 54px;
}

.hb-radar-core {
  position: relative;
  width: 100%;
  height: 100%;
  background: #c8d9b5;
  border: 1px solid rgba(134, 195, 65, 0.35);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(134, 195, 65, 0.18);
  z-index: 2;
  transition: all 0.3s ease;
}

.hb-fancy-card:hover .hb-radar-core {
  background: #111827;
  border-color: var(--hb-lime);
  transform: scale(1.05);
}

.hb-radar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 1.5px dashed var(--hb-lime);
  opacity: 0.6;
  animation: hbRadarSpin 12s linear infinite;
}

@keyframes hbRadarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hb-chip-metric {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #374151;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.hb-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hb-tech-tags span {
  font-size: 0.8rem;
  background: #ffffff;
  border: 1px solid rgba(134, 195, 65, 0.3);
  color: #374151;
  padding: 5px 12px;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: background 0.2s, color 0.2s;
}

.hb-fancy-card:hover .hb-tech-tags span {
  background: rgba(134, 195, 65, 0.1);
  color: #1f2937;
}

.hb-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  color: #111827;
  transition: color 0.2s ease;
}

.hb-action-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(134, 195, 65, 0.15);
  color: var(--hb-lime-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.hb-fancy-card:hover .hb-card-action {
  color: var(--hb-lime-dark);
}

.hb-fancy-card:hover .hb-action-arrow {
  background: var(--hb-lime);
  color: #ffffff;
  transform: translateX(-6px);
  box-shadow: 0 6px 15px rgba(134, 195, 65, 0.4);
}

/* Cyber Button with Shine Sweep */
.hb-btn-cyber {
  position: relative;
  background: var(--hb-lime);
  border: 1px solid var(--hb-lime);
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(134, 195, 65, 0.3);
  transition: all 0.3s ease;
}

.hb-btn-cyber::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(30deg);
  transition: none;
}

.hb-btn-cyber:hover::after {
  left: 120%;
  transition: all 0.75s ease-in-out;
}

.hb-btn-cyber:hover {
  background: var(--hb-lime-dark);
  box-shadow: 0 12px 28px rgba(134, 195, 65, 0.45);
  transform: translateY(-2px);
}

.hb-btn-glass {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #1f2937;
  font-weight: 700;
  border-radius: 12px;
  transition: all 0.25s ease;
}

.hb-btn-glass:hover {
  background: #ffffff;
  border-color: #111827;
  color: #111827;
  transform: translateY(-2px);
}

/* Bottom Live CTA */
.hb-live-cta {
  background: var(--hb-bg-radial);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}