/* ==========================================================================
   HELLOBOTZ STORY JOURNEY & GLOBAL DESIGN SYSTEM (v47)
   ========================================================================== */

/* 1. Global SVG Constraints & Icon Safety (prevents any SVG blowup) */
svg {
  max-width: 100%;
  box-sizing: border-box;
}

.hb-comp-item svg,
.hb-step-icon svg,
.hb-tab-check svg,
.hb-ind-icon svg,
.hb-card-icon svg,
.hb-hero-card svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle;
}

/* 2. Global Header System */
body {
  padding-top: 74px !important;
}
@media (max-width: 768px) {
  body {
    padding-top: 60px !important;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled {
  top: 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
  border-bottom-color: rgba(203, 213, 225, 0.85);
}

@media (min-width: 1025px) {
  .header-inner {
    max-width: 1360px !important;
    height: 74px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-header.scrolled .header-inner {
    height: 60px !important;
    padding: 0 2rem !important;
  }

  .nav-desktop {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: nowrap !important;
  }

  .nav-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .nav-link {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.75rem !important;
    color: #475569 !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    line-height: 1.2 !important;
  }

  .nav-link:hover {
    color: #8B5CF6 !important;
    background: rgba(139, 92, 246, 0.08) !important;
  }

  .logo {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .logo-img {
    height: 32px !important;
    max-width: 140px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .header-cta-start,
  .header-actions .btn-primary {
    padding: 0.45rem 1.1rem !important;
    font-size: 0.82rem !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .header-login,
  .header-actions .btn-outline {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
}

/* Mobile Header */
@media (max-width: 1024px) {
  body {
    padding-top: 64px !important;
  }
  .site-header {
    top: 8px !important;
    padding: 0 10px !important;
  }
  .header-inner {
    height: 52px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0.85rem 0 1rem !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 28px -6px rgba(15, 23, 42, 0.12) !important;
    pointer-events: auto !important;
  }
  .logo-img {
    height: 28px !important;
    max-width: 125px !important;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 60px !important;
  }
  .site-header {
    top: 6px !important;
    padding: 0 8px !important;
  }
  .header-inner {
    height: 48px !important;
    padding: 0 0.75rem !important;
    border-radius: 14px !important;
  }
  .logo-img {
    height: 25px !important;
    max-width: 110px !important;
  }
}

/* 3. HERO STAGE & HIGH-END REALISTIC WHATSAPP PHONE MOCKUP */
.hb-phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px;
  padding: 1.5rem 0;
}

.hb-phone-stage::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(6, 182, 212, 0.12) 50%, rgba(0, 0, 0, 0) 70%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
  animation: hbGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes hbGlowPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* Phone Body Frame: Realistic iPhone 15 Pro Aesthetic */
.hb-phone {
  width: 325px !important;
  max-width: 90vw !important;
  border-radius: 44px !important;
  padding: 10px !important;
  background: linear-gradient(145deg, #1E293B, #0F172A) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 
    0 25px 60px -10px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(139, 92, 246, 0.25) !important;
  animation: hbPhoneFloat 6s ease-in-out infinite !important;
  position: relative !important;
  z-index: 2 !important;
}

@keyframes hbPhoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hb-phone-notch {
  width: 100px !important;
  height: 24px !important;
  background: #000000 !important;
  border-radius: 20px !important;
  margin: 4px auto 10px auto !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.hb-phone-screen {
  background: #0B141A !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}

/* WhatsApp Header Bar */
.hb-wa-head {
  background: #1F2C34 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hb-wa-av {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
  flex-shrink: 0 !important;
}

.hb-wa-head strong {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.88rem !important;
  color: #E9EDEF !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.hb-wa-head small {
  color: #25D366 !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.hb-wa-head small::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #25D366;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #25D366;
}

/* WhatsApp Chat Body */
.hb-wa-body {
  flex: 1 !important;
  padding: 14px 12px !important;
  overflow-y: auto !important;
  background: #0B141A url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23111b21' fill-opacity='0.6' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E") !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.hb-wa-body::-webkit-scrollbar {
  width: 4px;
}
.hb-wa-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* WhatsApp Message Bubbles */
.hb-msg {
  max-width: 86% !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  opacity: 0 !important;
  transform: translateY(10px) scale(0.96) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  word-wrap: break-word !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.hb-msg.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.hb-msg.bot {
  align-self: flex-start !important;
  background: #202C33 !important;
  color: #E9EDEF !important;
  border-top-left-radius: 3px !important;
}

.hb-msg.user {
  align-self: flex-end !important;
  background: #005C4B !important;
  color: #E9EDEF !important;
  border-top-right-radius: 3px !important;
}

.hb-msg b {
  color: #34D399;
}

/* Typing Indicator */
.hb-typing {
  align-self: flex-start !important;
  background: #202C33 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border-top-left-radius: 3px !important;
  display: none !important;
  gap: 5px !important;
  align-items: center !important;
}

.hb-typing.on {
  display: inline-flex !important;
}

.hb-typing i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #8696A0 !important;
  animation: hbDot 1.2s infinite ease-in-out !important;
}
.hb-typing i:nth-child(2) { animation-delay: 0.2s !important; }
.hb-typing i:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes hbDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* Interactive WhatsApp Quick Reply Chips */
.hb-chips {
  display: none !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 4px 0 !important;
  margin-top: 4px !important;
}

.hb-chips.on {
  display: flex !important;
}

.hb-chips button {
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
  border-radius: 9999px !important;
  padding: 7px 12px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: rgba(139, 92, 246, 0.18) !important;
  color: #DDD6FE !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

.hb-chips button:hover {
  background: #7C3AED !important;
  color: #FFFFFF !important;
  border-color: #7C3AED !important;
  transform: translateY(-2px) !important;
}

/* Clean WhatsApp Single Input Footer */
.hb-wa-footer {
  background: #1F2C34 !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.hb-wa-footer input {
  flex: 1 !important;
  background: #2A3942 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 0.8rem !important;
  color: #E9EDEF !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.hb-wa-footer input:focus {
  border-color: #25D366 !important;
}

.hb-wa-footer input::placeholder {
  color: #8696A0 !important;
}

.hb-wa-send-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #00A884 !important;
  border: none !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
  flex-shrink: 0 !important;
}

.hb-wa-send-btn:hover {
  background: #008f70 !important;
  transform: scale(1.05) !important;
}

/* Premium Glass Floating Stats Badges */
.hb-float {
  position: absolute !important;
  z-index: 4 !important;
  padding: 0.75rem 1.1rem !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 14px 36px -6px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(139, 92, 246, 0.08) !important;
  font-size: 0.78rem !important;
  color: #475569 !important;
  animation: hbCardFloat 5s ease-in-out infinite !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  line-height: 1.3 !important;
}

.hb-float b {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.hb-float .hb-float-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.hb-float-1 {
  top: 10% !important;
  left: -45px !important;
  animation-delay: 0s !important;
}

.hb-float-1 .hb-float-icon {
  background: rgba(139, 92, 246, 0.12);
  color: #7C3AED;
}

.hb-float-2 {
  top: 44% !important;
  right: -45px !important;
  animation-delay: -1.8s !important;
}

.hb-float-2 .hb-float-icon {
  background: rgba(6, 182, 212, 0.12);
  color: #0891B2;
}

.hb-float-3 {
  bottom: 8% !important;
  left: -35px !important;
  animation-delay: -3.5s !important;
}

.hb-float-3 .hb-float-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

@keyframes hbCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 4. Story Section Framework */
.hb-story-wrapper {
  overflow-x: hidden;
  width: 100%;
}

.hb-story-section {
  padding: 5rem 0;
  background: #FFFFFF;
  position: relative;
}

.hb-story-section-alt {
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

.hb-story-header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3.5rem auto;
}

.hb-story-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: rgba(139, 92, 246, 0.1);
  color: #7C3AED;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 1rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.hb-story-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hb-text-grad {
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hb-story-header p {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.6;
}

/* 5. Story Chapter 1: Old Way vs HelloBotz AI Comparison Grid */
.hb-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hb-comp-card {
  border-radius: 24px;
  padding: 2.25rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hb-comp-old {
  background: #FFF5F5;
  border: 1px solid #FECDD3;
}

.hb-comp-old:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(225, 29, 72, 0.08);
}

.hb-comp-new {
  background: linear-gradient(145deg, #0F172A 0%, #1E1B4B 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}

.hb-comp-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(139, 92, 246, 0.25);
}

.hb-comp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}

.hb-comp-old .hb-comp-badge {
  background: #FFE4E6;
  color: #E11D48;
}

.hb-comp-new .hb-comp-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.hb-comp-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.hb-comp-old .hb-comp-title {
  color: #9F1239;
}

.hb-comp-new .hb-comp-title {
  color: #FFFFFF;
}

.hb-comp-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hb-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.5;
}

.hb-comp-old .hb-comp-item {
  color: #475569;
}

.hb-comp-old .hb-comp-item svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  stroke: #E11D48;
  flex-shrink: 0 !important;
  display: block;
}

.hb-comp-new .hb-comp-item {
  color: #CBD5E1;
}

.hb-comp-new .hb-comp-item svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  stroke: #34D399;
  flex-shrink: 0 !important;
  display: block;
}

/* 6. Story Chapter 2: 3-Step Growth Journey */
.hb-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hb-step-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.hb-step-card:hover {
  transform: translateY(-5px);
  border-color: #8B5CF6;
  box-shadow: 0 16px 36px rgba(139, 92, 246, 0.12);
}

.hb-step-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(139, 92, 246, 0.15);
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  line-height: 1;
}

.hb-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7C3AED;
  margin-bottom: 1.25rem;
}

.hb-step-icon svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  stroke: #7C3AED;
  flex-shrink: 0 !important;
}

.hb-step-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.6rem;
}

.hb-step-card p {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.55;
}

/* 7. Story Chapter 3: Platform Suite Interactive Tabs */
.hb-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hb-tab-btn {
  padding: 0.75rem 1.4rem;
  border-radius: 9999px;
  font-size: 0.92rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.hb-tab-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.hb-tab-btn.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.hb-tab-pane {
  display: none;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 3rem;
  color: #FFFFFF;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.hb-tab-pane.active {
  display: grid;
  animation: hbFadeIn 0.35s ease;
}

@keyframes hbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hb-tab-content h3 {
  font-size: 1.65rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.85rem;
  line-height: 1.3;
}

.hb-tab-content p {
  font-size: 1.02rem;
  color: #94A3B8;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.hb-tab-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hb-tab-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: #E2E8F0;
  font-weight: 500;
}

.hb-tab-check svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  stroke: #34D399;
  flex-shrink: 0 !important;
}

/* 8. Story Chapter 4: Industry Cards */
.hb-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hb-ind-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.hb-ind-card:hover {
  transform: translateY(-4px);
  border-color: #8B5CF6;
  box-shadow: 0 14px 32px rgba(139, 92, 246, 0.12);
}

.hb-ind-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.08);
  color: #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.hb-ind-icon svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  stroke: #7C3AED;
  flex-shrink: 0 !important;
}

.hb-ind-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.5rem;
}

.hb-ind-card p {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.hb-ind-preview-pill {
  font-size: 0.8rem;
  font-weight: 600;
  background: #F1F5F9;
  color: #334155;
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  display: inline-block;
  border: 1px solid #E2E8F0;
}

/* 9. Story Final CTA Banner */
.hb-cta-banner {
  background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 50%, #06B6D4 100%);
  border-radius: 28px;
  padding: 4rem 2rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.3);
  max-width: 1100px;
  margin: 0 auto;
}

/* ==========================================================================
   10. UNIVERSAL MOBILE RESPONSIVE OPTIMIZATION SYSTEM (320px - 1024px)
   ========================================================================== */

/* Zero Horizontal Page Overflow */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

.hb-story-wrapper,
.container {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

@media (max-width: 1240px) {
  .hb-story-wrapper,
  .container {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .hb-story-wrapper,
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Tablet & Mobile Layout Adaptations (<= 1024px) */
@media (max-width: 1024px) {
  .hb-story-section {
    padding: 3.5rem 0 !important;
  }

  .hb-story-header {
    margin-bottom: 2.5rem !important;
  }

  .hb-story-header h2 {
    font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
  }

  .hb-float-1 { left: 0px !important; top: 2% !important; }
  .hb-float-2 { right: 0px !important; top: 48% !important; }
  .hb-float-3 { display: none !important; }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  /* Hero Copy Stack */
  .hb-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2rem !important;
  }

  .hb-hero-copy {
    width: 100% !important;
    text-align: center !important;
  }

  .hb-hero-badge {
    font-size: 0.72rem !important;
    padding: 0.35rem 0.75rem !important;
    max-width: 100% !important;
    word-break: break-word !important;
    display: inline-block !important;
    margin: 0 auto 1rem auto !important;
  }

  .hb-hero-copy h1 {
    font-size: clamp(1.65rem, 6.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .hb-lead {
    font-size: 0.96rem !important;
    text-align: center !important;
    margin: 0 auto 1.5rem auto !important;
  }

  .hb-hero-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .hb-hero-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.8rem 1.2rem !important;
  }

  .hb-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  .hb-stat {
    padding: 0.6rem 0.5rem !important;
    text-align: center !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
  }

  /* Phone Stage Responsiveness */
  .hb-phone-stage {
    min-height: auto !important;
    padding: 1rem 0 1.5rem 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .hb-phone {
    width: min(300px, 90vw) !important;
    margin: 0 auto !important;
    border-radius: 36px !important;
    padding: 8px !important;
  }

  .hb-phone-screen {
    height: 440px !important;
    border-radius: 28px !important;
  }

  /* Floating Metric Cards on Mobile */
  .hb-float {
    position: absolute !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.7rem !important;
    border-radius: 14px !important;
  }
  .hb-float b { font-size: 0.85rem !important; }
  .hb-float .hb-float-icon { width: 28px !important; height: 28px !important; font-size: 0.9rem !important; }
  .hb-float-1 { left: -5px !important; top: 0% !important; }
  .hb-float-2 { right: -5px !important; top: 48% !important; }
  .hb-float-3 { display: none !important; }

  /* Hero Cards Grid */
  .hb-hero-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }

  /* Comparison Grid */
  .hb-comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .hb-comp-card {
    padding: 1.35rem 1.1rem !important;
    border-radius: 18px !important;
  }

  .hb-comp-title {
    font-size: 1.15rem !important;
    margin-bottom: 1rem !important;
  }

  /* 3-Step Growth Cards */
  .hb-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
  }

  .hb-step-card {
    padding: 1.35rem !important;
    border-radius: 18px !important;
  }

  /* Platform Tabs System */
  .hb-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding-bottom: 0.5rem !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .hb-tab-btn {
    flex-shrink: 0 !important;
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
  }

  .hb-tab-pane {
    display: none !important;
    grid-template-columns: 1fr !important;
    padding: 1.35rem 1.1rem !important;
    gap: 1.25rem !important;
    border-radius: 18px !important;
  }

  .hb-tab-pane.active {
    display: flex !important;
    flex-direction: column !important;
  }

  .hb-tab-content h3 {
    font-size: 1.3rem !important;
  }

  /* Industry Grid */
  .hb-ind-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .hb-ind-card {
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }

  /* CTA Banner */
  .hb-cta-banner {
    padding: 2.5rem 1.25rem !important;
    border-radius: 20px !important;
  }

  .hb-cta-banner h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
  }
}

/* Compact Mobile Screens (<= 400px) */
@media (max-width: 400px) {
  .hb-phone {
    width: min(270px, 94vw) !important;
  }
  .hb-phone-screen {
    height: 400px !important;
  }
  .hb-float {
    display: none !important;
  }
}

/* ==========================================================================
   11. MOBILE NAVIGATION DRAWER & ACCORDION OVERRIDES (v47)
   ========================================================================== */

/* Toggle Button Display on Mobile */
@media (max-width: 1024px) {
  .mobile-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10060 !important;
    position: relative !important;
    cursor: pointer !important;
  }
}

/* Mobile Menu Overlay Root — Closed */
div#mobile-menu,
#mobile-menu {
  display: none !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: var(--hb-mobile-top, 98px) !important;
  z-index: 99990 !important;
  width: 100% !important;
  height: calc(100vh - var(--hb-mobile-top, 98px)) !important;
  height: calc(100dvh - var(--hb-mobile-top, 98px)) !important;
  background: transparent !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Mobile Menu Overlay Root — OPEN */
div#mobile-menu.is-open,
div#mobile-menu.open,
#mobile-menu.is-open,
#mobile-menu.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#mobile-menu.is-open *,
#mobile-menu.open * {
  visibility: visible !important;
}

/* Backdrop */
#mobile-menu.is-open .mobile-backdrop,
#mobile-menu.open .mobile-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: block !important;
}

/* Drawer Panel */
#mobile-menu.is-open .mobile-drawer,
#mobile-menu.open .mobile-drawer {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(340px, 92vw) !important;
  max-width: 100% !important;
  height: 100% !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  visibility: visible !important;
}

/* Drawer Header — hidden because .site-header is fixed right above */
#mobile-menu .mobile-drawer-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Drawer Body */
#mobile-menu .mobile-drawer-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0.4rem 1rem 1.5rem !important;
  min-height: 0 !important;
  pointer-events: auto !important;
}

/* Accordion Buttons & Items */
#mobile-menu .mobile-nav-item {
  border-bottom: 1px solid #F1F5F9 !important;
  pointer-events: auto !important;
}

#mobile-menu .mobile-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0.85rem 0 !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  border: 0 !important;
  background: transparent !important;
  color: #0F172A !important;
  cursor: pointer !important;
  text-align: left !important;
  pointer-events: auto !important;
  min-height: 48px !important;
}

/* Submenu Accordion Open State */
#mobile-menu .mobile-submenu {
  display: none !important;
  padding: 0.25rem 0 0.75rem 0.5rem !important;
}

#mobile-menu .mobile-nav-item.is-open > .mobile-submenu,
#mobile-menu .mobile-nav-item.open > .mobile-submenu {
  display: block !important;
  visibility: visible !important;
}

#mobile-menu .mobile-submenu-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

#mobile-menu .mobile-submenu-inner a {
  display: block !important;
  padding: 0.6rem 0.75rem !important;
  font-size: 0.9rem !important;
  color: #475569 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  pointer-events: auto !important;
}

#mobile-menu .mobile-submenu-inner a:hover,
#mobile-menu .mobile-submenu-inner a:active {
  background: rgba(139, 92, 246, 0.08) !important;
  color: #7C3AED !important;
}

/* Bottom CTA Actions */
#mobile-menu.is-open .mobile-nav-actions,
#mobile-menu.open .mobile-nav-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  padding: 1rem 0 !important;
  border-top: 1px solid #E2E8F0 !important;
  margin-top: 0.5rem !important;
}

#mobile-menu .mnav-login,
#mobile-menu .mnav-start,
#mobile-menu .mnav-demo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
}

#mobile-menu .mnav-login {
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
}

#mobile-menu .mnav-start {
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
}

#mobile-menu .mnav-demo {
  color: #7C3AED !important;
  background: rgba(139, 92, 246, 0.1) !important;
}

/* ==========================================================================
   12. UNIVERSAL MOBILE RESPONSIVE OVERFLOW PROTECTION (v48)
   ========================================================================== */

@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100vw;
  }

  .container, section, div, header, footer, main {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Headings word wrap protection */
  h1, .h1, h2, .h2, h3, .h3,
  .ig-hero h1, .tg-hero h1, .fb-hero h1, .wa-hero h1,
  .edu-hero h1, .re-hero h1, .ecom-hero h1, .crm-hero h1 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    line-height: 1.22 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }

  /* Stack button containers full width */
  .ig-ctas, .tg-ctas, .fb-ctas, .wa-ctas, .hero-ctas, .hb-hero-ctas,
  .edu-ctas, .re-ctas, .ecom-ctas, .crm-ctas, .prt-ctas, .prc-ctas, .ig-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.65rem !important;
  }

  .ig-ctas .btn, .tg-ctas .btn, .fb-ctas .btn, .wa-ctas .btn,
  .hero-ctas .btn, .hb-hero-ctas .btn, .edu-ctas .btn, .re-ctas .btn,
  .ecom-ctas .btn, .crm-ctas .btn, .prt-ctas .btn, .prc-ctas .btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Horizontal scrolling tab bars with zero parent overflow */
  .ig-tabs, .tg-tabs, .fb-tabs, .wa-tabs, .edu-sim-tabs,
  .re-sim-tabs, .ecom-tabs, .crm-tabs, .gcm-tabs, .gfs-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    scrollbar-width: none !important;
  }

  .ig-tabs::-webkit-scrollbar, .tg-tabs::-webkit-scrollbar,
  .fb-tabs::-webkit-scrollbar, .wa-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .ig-tabs button, .tg-tabs button, .fb-tabs button, .wa-tabs button,
  .edu-sim-tabs button, .re-sim-tabs button, .ecom-tabs button, .crm-tabs button {
    flex: 0 0 auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    padding: 0.45rem 0.8rem !important;
  }

  /* Grid collapse to single column */
  .ig-hero-grid, .tg-hero-grid, .fb-hero-grid, .wa-hero-grid,
  .edu-grid, .re-grid, .ecom-hero-grid, .crm-hero-grid, .ig-split {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1.25rem !important;
  }

  /* Phone Stage & Mocks */
  .ig-phone-stage, .tg-phone-stage, .fb-phone-stage, .wa-phone-stage,
  .edu-phone-stage, .re-phone-stage {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .ig-phone, .tg-phone, .fb-phone, .wa-phone, .edu-phone, .re-phone {
    width: min(230px, 78vw) !important;
    max-width: 230px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   13. PREMIUM VISUAL STORY JOURNEY TIMELINE (v49)
   ========================================================================== */

.hb-story-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  align-items: stretch;
  position: relative;
  margin: 2.5rem 0 1rem;
}

.hb-timeline-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1.6rem 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hb-timeline-step:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 16px 36px rgba(139, 92, 246, 0.2);
}

.hb-step-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: rgba(139, 92, 246, 0.4);
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  line-height: 1;
}

.hb-step-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #C4B5FD;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.85rem;
}

.hb-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C4B5FD;
  margin-bottom: 0.85rem;
}

.hb-step-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #C4B5FD;
}

.hb-timeline-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}

.hb-timeline-step p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
  margin: 0;
}

.hb-timeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #EC4899;
  font-size: 1.25rem;
  font-weight: 800;
}

.hb-step-highlight {
  background: linear-gradient(145deg, rgba(236, 72, 153, 0.18), rgba(124, 58, 237, 0.25)) !important;
  border-color: rgba(236, 72, 153, 0.5) !important;
}

/* Light theme variation */
.section:not(.section-dark) .hb-timeline-step {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.section:not(.section-dark) .hb-timeline-step h3 {
  color: #0F172A;
}

.section:not(.section-dark) .hb-timeline-step p {
  color: #475569;
}

.section:not(.section-dark) .hb-step-num {
  color: rgba(124, 58, 237, 0.15);
}

/* Mobile Story Timeline View */
@media (max-width: 900px) {
  .hb-story-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    position: relative !important;
    padding-left: 0.75rem !important;
  }

  .hb-timeline-arrow {
    display: none !important;
  }

  .hb-timeline-step {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.35rem 1.25rem !important;
    border-radius: 18px !important;
  }

  .hb-timeline-step::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    bottom: 20px;
    width: 4px;
    background: linear-gradient(180deg, #EC4899, #8B5CF6, #06B6D4);
    border-radius: 999px;
  }
}

/* =====================================================================
   GLOBAL PRODUCT & INDUSTRY JOURNEY FLOW MOBILE ENHANCEMENTS
   ===================================================================== */
@media (max-width: 640px) {
  .inb-j-nav, .ctw-j-nav, .bc-j-nav, .wf-j-nav, .bot-j-nav,
  .bt-j-nav, .im-j-nav, .pay-j-nav, .cat-j-nav, .drip-j-nav,
  .bfsi-j-nav, .ind-j-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding: 0.25rem 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    scrollbar-width: none !important;
    margin-bottom: 1.75rem !important;
  }
  .inb-j-nav::-webkit-scrollbar, .ctw-j-nav::-webkit-scrollbar,
  .bc-j-nav::-webkit-scrollbar, .wf-j-nav::-webkit-scrollbar,
  .bot-j-nav::-webkit-scrollbar, .bt-j-nav::-webkit-scrollbar,
  .im-j-nav::-webkit-scrollbar, .pay-j-nav::-webkit-scrollbar,
  .cat-j-nav::-webkit-scrollbar, .drip-j-nav::-webkit-scrollbar,
  .bfsi-j-nav::-webkit-scrollbar, .ind-j-nav::-webkit-scrollbar {
    display: none !important;
  }
  .inb-j-tab, .ctw-j-tab, .bc-j-tab, .wf-j-tab, .bot-j-tab,
  .bt-j-tab, .im-j-tab, .pay-j-tab, .cat-j-tab, .drip-j-tab,
  .bfsi-j-tab, .ind-j-tab {
    flex-shrink: 0 !important;
    padding: 0.55rem 1.05rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
  .inb-j-card, .ctw-j-card, .bc-j-card, .wf-j-card, .bot-j-card,
  .bt-j-card, .im-j-card, .pay-j-card, .cat-j-card, .drip-j-card,
  .bfsi-j-card, .ind-j-card {
    padding: 1.25rem 1rem !important;
    border-radius: 14px !important;
  }
}