/* Custom CSS Variables for Colors */
:root {
  --hp-primary: #6a0dad;    /* Deep purple */
  --hp-secondary: #8a2be2;  /* Vibrant purple */
  --hp-accent: #ffb703;     /* Golden yellow */
  --hp-light-bg: #f3f4f6;   /* Light gray background */
  --hp-dark-bg: #1a202c;    /* Dark blue-gray */
  --text-dark: #1f2937;     /* Equivalent to gray-900 */
  --text-light: #f9fafb;    /* Equivalent to gray-100 */
  --text-gray-600: #4b5563; /* Equivalent to gray-600 */
  --text-gray-700: #374151; /* Equivalent to gray-700 */
  --text-gray-300: #d1d5db; /* Equivalent to gray-300 */
  --text-gray-400: #9ca3af; /* Equivalent to gray-400 */
  --text-gray-500: #6b7280; /* Equivalent to gray-500 */
}

/* Basic Body Styles & Font */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--hp-light-bg);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Container for content width */
.container {
  max-width: 1280px; /* Equivalent to max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

/* Responsive padding for container */
@media (min-width: 640px) { /* sm breakpoint */
  .container {
      padding-left: 1.5rem; /* sm:px-6 */
      padding-right: 1.5rem; /* sm:px-6 */
  }
}
@media (min-width: 1024px) { /* lg breakpoint */
  .container {
      padding-left: 2rem; /* lg:px-8 */
      padding-right: 2rem; /* lg:px-8 */
  }
}

/* Header Styles */
.main-header {
  background-color: var(--hp-dark-bg);
  color: white;
  padding: 1rem; /* p-4 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
  border-bottom-right-radius: 0.5rem; /* rounded-b-lg */
  /* display: flex;
  justify-content: space-between;
  align-items: center;
 */
}

.main-header>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
}

.header-logo img {
  border-radius: 9999px; /* rounded-full */
  width: 50px;
  height: 50px;
}

.header-logo-text {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700; /* font-bold */
  letter-spacing: -0.025em; /* tracking-tight */
}

/* Main Navigation */
.main-nav {
  display: none; /* hidden */
  gap: 1.5rem; /* space-x-6 */
}
@media (min-width: 768px) { /* md breakpoint */
  .main-nav {
      display: flex; /* md:flex */
  }
}

.main-nav a {
  color: white;
  padding: 0.5rem; /* p-2 */
  border-radius: 0.375rem; /* rounded-md */
  transition: color 0.3s ease-in-out; /* transition duration-300 */
}

.main-nav a:hover {
  color: var(--hp-accent); /* hover:text-hp-accent */
}

/* Mobile Menu Toggle */
.mobile-menu-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  display: block; /* md:hidden */
}
@media (min-width: 768px) { /* md breakpoint */
  .mobile-menu-button {
      display: none; /* md:hidden */
  }
}
.mobile-menu-button svg {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
  display: none; /* Initially hidden */
  position: absolute;
  top: 64px; /* Height of header */
  left: 0;
  right: 0;
  background-color: var(--hp-dark-bg);
  flex-direction: column;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 50; /* Above other content */
}
.mobile-nav-overlay.active {
  display: flex; /* Show when active */
}
.mobile-nav-overlay a {
  color: white;
  padding: 0.75rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease-in-out;
}
.mobile-nav-overlay a:last-child {
  border-bottom: none;
}
.mobile-nav-overlay a:hover {
  background-color: var(--hp-primary);
}


/* Hero Section */
.hero-section {
  position: relative;
  background: linear-gradient(to bottom right, var(--hp-primary), var(--hp-secondary)); /* bg-gradient-to-br */
  color: white;
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  border-bottom-left-radius: 1.5rem; /* rounded-b-3xl */
  border-bottom-right-radius: 1.5rem; /* rounded-b-3xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
  overflow: hidden;
  text-align: center;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1280px; /* container width */
  margin-left: auto;
  margin-right: auto;
}

.hero-title {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800; /* font-extrabold */
  line-height: 1.25; /* leading-tight */
  margin-bottom: 1rem; /* mb-4 */
  animation: fadeInDown 1s ease-out forwards; /* animate-fade-in-down */
}
@media (min-width: 640px) { /* sm */
  .hero-title { font-size: 3rem; /* sm:text-5xl */ }
}
@media (min-width: 1024px) { /* lg */
  .hero-title { font-size: 3.75rem; /* lg:text-6xl */ }
}

.hero-subtitle {
  font-size: 1.125rem; /* text-lg */
  margin-bottom: 2rem; /* mb-8 */
  opacity: 0.9; /* opacity-90 */
  animation: fadeInUp 1s ease-out forwards; /* animate-fade-in-up */
  animation-delay: 0.2s; /* delay-200 */
}
@media (min-width: 640px) { /* sm */
  .hero-subtitle { font-size: 1.25rem; /* sm:text-xl */ }
}
@media (min-width: 1024px) { /* lg */
  .hero-subtitle { font-size: 1.5rem; /* lg:text-2xl */ }
}

.hero-button {
  display: inline-block;
  background-color: var(--hp-accent);
  color: var(--hp-dark-bg);
  font-weight: 700; /* font-bold */
  padding: 0.75rem 2rem; /* py-3 px-8 */
  border-radius: 9999px; /* rounded-full */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
  animation: bounceIn 1s ease-out forwards; /* animate-bounce-in */
  animation-delay: 0.4s;
}
.hero-button:hover {
  background-color: #facc15; /* hover:bg-yellow-400 */
  transform: scale(1.05); /* hover:scale-105 */
}

/* Subtle Background Elements */
.hero-bg-element {
  position: absolute;
  background-color: white;
  opacity: 0.05; /* opacity-5 */
  border-radius: 9999px; /* rounded-full */
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; /* animate-pulse */
}
.hero-bg-element:nth-child(1) {
  width: 16rem; /* w-64 */
  height: 16rem; /* h-64 */
  bottom: -5rem; /* -bottom-20 */
  left: -5rem; /* -left-20 */
}
.hero-bg-element:nth-child(2) {
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  top: -7.5rem; /* -top-30 */
  right: -7.5rem; /* -right-30 */
  animation-delay: 0.2s; /* delay-200 */
}

/* Section Styling (General) */
.product-section, .content-section {
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem; /* py-16 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  background-color: white;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  margin-left: 1rem; /* mx-4 */
  margin-right: 1rem; /* mx-4 */
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  position: relative;
  z-index: 20;
}
/* Specific margin for sections */
#blisspill { margin-top: -2.5rem; /* -mt-10 */ }
#blissfeed, #join, #newsletter { margin-top: 3rem; /* mt-12 */ }
#join, #newsletter { margin-bottom: 3rem; /* mb-12 */ }


.product-content-grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 3rem; /* gap-12 */
  align-items: center;
}
@media (min-width: 768px) { /* md breakpoint */
  .product-content-grid {
      grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
}

.product-image-col img {
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  transition: transform 0.3s ease-in-out; /* transition duration-300 */
}
.product-image-col img:hover {
  transform: scale(1.02); /* hover:scale-102 */
}

.product-text-col {
  text-align: center;
}
@media (min-width: 768px) { /* md breakpoint */
  .product-text-col {
      text-align: left; /* md:text-left */
  }
  .product-image-col.md-order-2 {
      order: 2; /* md:order-2 */
  }
  .product-text-col.md-order-1 {
      order: 1; /* md:order-1 */
  }
}

.product-heading, .content-title, .blog-list-heading {
  font-size: 2rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  margin-bottom: 1rem; /* mb-4 */
  color: var(--hp-primary);
}
@media (min-width: 640px) { /* sm */
  .product-heading, .content-title, .blog-list-heading { font-size: 2.25rem; /* sm:text-4xl */ }
}
/* Ensure blog title on single page uses darker color for readability */
.content-title {
  color: var(--hp-dark-bg);
}


.product-description {
  color: var(--text-gray-700);
  font-size: 1.125rem; /* text-lg */
  margin-bottom: 1.5rem; /* mb-6 */
  line-height: 1.625; /* leading-relaxed */
}

.product-features-list {
  list-style-type: disc;
  list-style-position: inside;
  color: var(--text-gray-600);
  font-size: 1rem; /* text-base */
  margin-bottom: 1.5rem; /* mb-6 */
  line-height: 1.5; /* space-y-2 (applied to li items via JS or direct styling) */
}
.product-features-list li {
  margin-bottom: 0.5rem;
}

/* Specific styles for BlissFeed section */
#blissfeed {
  background-color: var(--hp-dark-bg);
  color: white;
  z-index: 10; /* lower z-index than bliss pill */
}
#blissfeed .product-heading {
  color: var(--hp-accent);
}
#blissfeed .product-description {
  color: var(--text-gray-300);
}
#blissfeed .product-features-list {
  color: var(--text-gray-400);
}

/* Buttons within sections */
.section-button {
  display: inline-block;
  background-color: var(--hp-primary);
  color: white;
  font-weight: 700; /* font-bold */
  padding: 0.75rem 2rem; /* py-3 px-8 */
  border-radius: 9999px; /* rounded-full */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
  transition: all 0.3s ease-in-out;
  text-decoration: none; /* Ensure no underline on buttons */
}
#blisspill .section-button:hover {
  background-color: var(--hp-secondary); /* hover:bg-hp-secondary */
  transform: scale(1.05);
}
#blissfeed .section-button {
  background-color: var(--hp-accent);
  color: var(--hp-dark-bg);
}
#blissfeed .section-button:hover {
  background-color: #facc15; /* hover:bg-yellow-400 */
  transform: scale(1.05);
}

/* Call to Action Section */
.cta-section {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  background-color:  white; /*var(--hp-light-bg);*/
  text-align: center;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  margin-left: 1rem; /* mx-4 */
  margin-right: 1rem; /* mx-4 */
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
}

.cta-heading {
  font-size: 2rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  color: var(--hp-primary);
  margin-bottom: 1.5rem; /* mb-6 */
}
@media (min-width: 640px) { /* sm */
  .cta-heading { font-size: 2.25rem; /* sm:text-4xl */ }
}

.cta-description {
  color: var(--text-gray-700);
  font-size: 1.125rem; /* text-lg */
  margin-bottom: 2rem; /* mb-8 */
  max-width: 42rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.625; /* leading-relaxed */
}

.cta-button {
  display: inline-block;
  background-image: linear-gradient(to right, var(--hp-primary), var(--hp-secondary)); /* bg-gradient-to-r */
  color: white;
  font-weight: 700; /* font-bold */
  padding: 1rem 2.5rem; /* py-4 px-10 */
  border-radius: 9999px; /* rounded-full */
  font-size: 1.25rem; /* text-xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
  transition: all 0.5s ease-in-out; /* transition duration-500 ease-in-out */
  text-decoration: none; /* Ensure no underline */
}
.cta-button:hover {
  background-image: linear-gradient(to right, var(--hp-secondary), var(--hp-primary)); /* hover:from-hp-secondary hover:to-hp-primary */
  transform: scale(1.05);
}

.cta-disclaimer {
  color: var(--text-gray-500);
  font-size: 0.875rem; /* text-sm */
  margin-top: 2rem; /* mt-8 */
}

/* Footer */
.main-footer {
  background-color: var(--hp-dark-bg);
  color: var(--text-gray-400);
  padding-top: 2rem; /* py-8 */
  padding-bottom: 2rem; /* py-8 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  border-top-left-radius: 0.5rem; /* rounded-t-lg */
  border-top-right-radius: 0.5rem; /* rounded-t-lg */
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem; /* space-x-6 */
  margin-top: 1rem; /* mt-4 */
  flex-direction:column;
}
@media (min-width: 640px) {
  .footer-links {
    flex-direction: row;
  }
}

.footer-links a {
  color: var(--text-gray-400);
  transition: color 0.3s ease-in-out;
}

.footer-links a:hover {
  color: var(--hp-accent); /* hover:text-hp-accent */
}


/* Animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes pulse {
  0% { opacity: 0.05; }
  50% { opacity: 0.1; }
  100% { opacity: 0.05; }
}

/* Blog & Generic Content Specific Styles (Single Page) */
.content-section { /* Applied to both blog and product single pages */
  margin-top: 3rem; /* General margin-top for content sections */
}
.single-page-content {
  padding: 2rem; /* Consistent padding */
}

.content-title { /* For h1 on single pages: blog posts, product pages etc. */
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--hp-dark-bg); /* Darker heading for readability on light background */
}

.post-meta { /* For date/author on blog posts */
  color: var(--text-gray-600);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.main-content-body { /* Styles for the actual Markdown content output by .Content */
  color: var(--text-dark);
  line-height: 1.7;
  max-width: 800px; /* Constrain content width for readability */
  margin: 0 auto; /* Center content */
  font-size: 1.2em;
}
.main-content-body h1, .main-content-body h2, .main-content-body h3, .main-content-body h4, .main-content-body h5, .main-content-body h6 {
  color: var(--hp-dark-bg); /* Darker headings for content readability */
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.main-content-body h1 { font-size: 2.25rem; }
.main-content-body h2 { font-size: 1.875rem; }
.main-content-body h3 { font-size: 1.5rem; }
.main-content-body p {
  margin-bottom: 1rem;
}
.main-content-body ul, .main-content-body ol {
  list-style-position: inside;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}
.main-content-body ul li {
  list-style-type: disc;
}
.main-content-body ol li {
  list-style-type: decimal;
}
.main-content-body a {
  color: var(--hp-primary);
  text-decoration: underline;
}
.main-content-body a:hover {
  color: var(--hp-secondary);
}
.main-content-body blockquote {
  border-left: 4px solid var(--hp-primary);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--text-gray-700);
  font-style: italic;
}
.main-content-body pre {
  background-color: var(--hp-dark-bg);
  color: var(--text-light);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}
.main-content-body code {
  font-family: monospace;
  background-color: rgba(106, 13, 173, 0.1); /* hp-primary with opacity */
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  color: var(--hp-dark-bg);
}
.main-content-body pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}
.main-content-body img { /* Ensure images inside content are responsive */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto; /* Center images and give space */
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.main-content-body table { /* Basic table styling */
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.main-content-body th, .main-content-body td {
  border: 1px solid var(--hp-light-bg);
  padding: 0.75rem;
  text-align: left;
}
.main-content-body th {
  background-color: var(--hp-primary);
  color: white;
  font-weight: 700;
}
.main-content-body tr:nth-child(even) {
  background-color: rgba(106, 13, 173, 0.05); /* Light stripe for tables */
}


/* Blog List Specific Styles */
.blog-list-heading {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--hp-dark-bg); /* Darker heading for list page */
}

.blog-list-item {
  background-color: white; /* Card background */
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  border: 1px solid var(--hp-light-bg);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.blog-list-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.blog-list-item h2 a {
  color: var(--hp-primary); /* Link color for post titles */
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
}
.blog-list-item h2 a:hover {
  color: var(--hp-secondary);
  text-decoration: underline;
}

.post-summary {
  color: var(--text-dark);
  margin-bottom: 1rem;
}

/* Pagination Styles */
.pagination-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
  gap: 1rem;
}
.pagination-links a, .pagination-links span {
  display: inline-flex; /* Use inline-flex for consistent button sizing */
  min-width: 2.5rem; /* Set a min-width for circular appearance */
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px; /* Rounded-full for circular effect */
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
  border: 1px solid var(--hp-primary); /* Border for inactive/current pages */
}
.pagination-links a {
  color: var(--hp-primary);
  background-color: white;
}
.pagination-links a:hover {
  background-color: var(--hp-primary);
  color: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.pagination-links span.active {
  background-color: var(--hp-primary);
  color: white;
  cursor: default;
  border-color: var(--hp-primary);
}
.pagination-links span.dots {
  background: none;
  border: none;
  color: var(--text-gray-600);
  cursor: default;
  box-shadow: none;
  padding: 0;
}




/* Newsletter Form Styles */
.newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* space-y-4 */
  max-width: 840px; /* Constrain form width */
  margin: 0 auto;
}
@media (min-width: 640px) { /* sm breakpoint */
  .newsletter-form {
      flex-direction: row; /* sm:flex-row */
      justify-content: center;
      gap: 0.75rem; /* sm:space-x-4 */
  }
  .newsletter-form > div { /* For the wrapping divs around inputs */
      flex-grow: 1; /* Allow inputs to take available space */
  }
}

.newsletter-input {
  width: 100%; /* w-full */
  padding: 0.75rem 1rem; /* p-3 */
  background-color: white; /* bg-gray-700 (changed to white for light background) */
  color: var(--text-dark); /* text-gray-200 (changed to text-dark) */
  border: 1px solid var(--hp-primary); /* border border-gray-600 */
  border-radius: 0.5rem; /* rounded-md */
  outline: none; /* focus:outline-none */
  transition: all 0.3s ease-in-out;
}

.newsletter-input::placeholder {
  color: var(--text-gray-500); /* Placeholder color */
}

.newsletter-input:focus {
  border-color: var(--hp-secondary); /* focus:border-transparent */
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.3); /* focus:ring-2 focus:ring-orange-500 */
}

/* Ensure the CTA button within the form still looks good */
.newsletter-form .cta-button {
  width: 100%; /* Make button full width in column layout */
  margin-top: 0.5rem; /* Small margin above button in column layout */
}
@media (min-width: 640px) {
  .newsletter-form .cta-button {
      width: auto; /* Auto width in row layout */
      flex-shrink: 0; /* Don't shrink */
      margin-top: 0; /* Remove top margin in row layout */
  }
}


/* User Count Styles */
.user-count-section {
  /* margin-top: 3rem; */
  /* padding-top: 1.5rem; */
  border-top: 1px solid var(--hp-primary); /* A subtle divider */
  border-bottom: 1px solid var(--hp-primary); /* A subtle divider */
  text-align: center;
}

.user-count-label {
  font-size: 1.7rem; /* text-lg */
  color: var(--text-gray-700);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.user-count-display {
  font-size: 2.5rem; /* text-5xl */
  font-weight: 800; /* font-extrabold */
  color: var(--hp-secondary); /* Use a vibrant color */
  line-height: 1; /* Ensure tight line height */
  animation: pulseGlow 2s infinite alternate; /* Subtle animation */
}
@media (min-width: 640px) {
  .user-count-display {
      font-size: 3rem; /* sm:text-6xl */
  }
}

/* Animation for user count glow */
@keyframes pulseGlow {
  0% { text-shadow: 0 0 5px rgba(138, 43, 226, 0.4); }
  50% { text-shadow: 0 0 15px rgba(138, 43, 226, 0.8), 0 0 25px rgba(138, 43, 226, 0.5); }
  100% { text-shadow: 0 0 5px rgba(138, 43, 226, 0.4); }
}

/* Featured In Section */
.featured-section {
  position: relative;
  background-color: var(--hp-dark-bg); /* Dark background */
  color: var(--text-light); /* Light text */
  padding: 2.5rem 3rem; /* py-10 px-4 */
  /* padding-bottom: 3.5rem; */
  text-align: center;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  margin-top: 0.5rem; /* mt-12 */
  margin-left: 1rem; /* mx-4 */
  margin-right: 1rem; /* mx-4 */
  margin-bottom: 1.5rem;

  max-width: 72rem; /* max-w-6xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  z-index: 10;
}

.featured-heading {
  font-size: 1.9rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  color: var(--hp-accent); /* Accent color for heading */
  margin-bottom: 1.5rem; /* mb-6 */
}

.featured-logos {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  justify-content: center;
  gap: 2rem; /* space-x-8 */
  align-items: center;
}

.featured-logo-item {
  color: var(--text-gray-300); /* Slightly muted text for logos */
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.featured-logo-item:hover {
  color: var(--hp-accent); /* Highlight on hover */
  transform: translateY(-3px); /* Subtle lift effect */
}

.featured-logo-item svg {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-6 */
  color: var(--hp-secondary); /* Icon color */
}

.responsive {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* Hello there  How are you?*/

.hidden-arg, .hidden-arg a {
  /* unicode-bidi:bidi-override;
direction:rtl; */
transform: scaleX(-1);
color: hsl(208.2, 51.5%, 85.5%);
font-size: 10px;
}
.hidden-arg a {
  transform: scaleX(-1);
color: hsl(150.2, 51.5%, 70.5%);
}
.hidden-arg a:hover {
  /* unicode-bidi:bidi-override;
direction:ltr; */
transform: scaleX(1);
color: hsl(150.2, 51.5%, 50.5%);
font-size: 15px;
}
.hidden-arg:hover {
/*
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
*/
unicode-bidi:bidi-override;
direction:ltr;
transform: scaleX(1);
color: hsl(208, 75%, 39%);
font-size: 12px;
}


.inverse-me {
  cursor: pointer;
  text-align:right;
  font-size: 7px;
}
.inverse-me:hover {
text-align: left;
}
.inverse-me:focus , .inverse-me:active {
  text-align: center;
  }

  .glitch-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #3a3a5a;
    border-radius: 10px;
    border: 1px solid #4a4a6a;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.glitch-text {
    font-family: 'Space Mono', monospace; /* Monospaced font for glitch effect */
    font-size: 1.3rem;
    font-weight: 700;
    color: #50fa7b; /* Green for glitch text */
    cursor: pointer;
    display: inline-block; /* Allows padding and margin */
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
    text-shadow: 0 0 5px rgba(80, 250, 123, 0.5);
    user-select: none; /* Prevent text selection */
}

.glitch-text:hover {
    background-color: rgba(80, 250, 123, 0.1);
}