@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

/* Your existing CSS rules would follow here */

/* styles.css - Shared styles for all pages */
/* Base styles */
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  margin: 0;
  padding: 1;
  background-color: #ffffff;
  color: #333333;
  padding-top: 140px; /* Adjusted to account for both announcement bar and header */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* Header styles */
header {
  position: fixed;
  top: 500px; /* Start below the announcement bar */
  left: 0;
  width: 100%;
  background-color: rgba(32, 3, 174, 0.864);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(7, 0, 17, 0.88);
  z-index: 999; /* Lower than announcement bar */
  padding: 11px 0;
  transition: all 0.3s ease;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 24px;
}

.logo-text {
  font-family: 'Montserrat', sans-serif; /* Explicitly set for clarity if needed */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

.silver {
  color: #ffffff;
}

.ox {
  color: #ffffff;
}

.bars {
  display: inline-flex;
  margin-left: 5px;
  height: 24px;
  align-items: center;
}

.bar {
  display: inline-block;
  height: 24px;
  background-color: #00022e;
  margin-right: 4px;
}

.bar:nth-child(1) {
  width: 12px;
}

.bar:nth-child(2) {
  width: 8px;
}

.bar:nth-child(3) {
  width: 4px;
}

.nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav a {
  color: #fffffff6;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s ease;
}

.nav a.active {
  color: #ffffff;
  font-weight: 500;
}

.nav a:hover {
  color: #DC4D01;
}

.buttons {
  display: flex;
  gap: 15px;
  white-space: nowrap;
}

.btn {
  padding: 15px 40px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #4b34bd;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #DC4D01;
}

.btn-outline {
  border: 1px solid #000730;
  color: #ffffff;
}

.btn-outline:hover {
  background-color: rgb(231, 75, 8);
}

/* Scrolled state for header */
header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  top: 0; /* Move to top when scrolled */
}

header.scrolled .logo-text {
  font-size: 20px;
}

header.scrolled .btn-primary {
  background-color: #7d00b700;
  color: #000000;
}

header.scrolled .btn-outline {
  border: 1px solid #000730;
  color: #000000;
}

header.scrolled .nav a {
  color: #000000;
  text-decoration: none;
  font-size: 17px;
  transition: color 0.3s ease;
}

header.scrolled .silver {
  color: #000000;
}

header.scrolled .ox {
  color: #000000;
}

header.scrolled .bars {
  height: 20px;
}

header.scrolled .bar {
  height: 20px;
}

header.scrolled .nav a {
  font-size: 15px;
}

header.scrolled .btn {
  padding: 8px 16px;
  font-size: 14px;
}

/* Announcement bar */
.announcement-bar {
  font-family: 'Montserrat', sans-serif; /* Explicitly set for clarity if needed */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 12, 62, 0.939) 0%, rgba(0, 12, 62, 0.939) 50%, rgba(0, 12, 62, 0.939) 100%);
  text-align: center;
  padding: 22px 20px;
  box-sizing: border-box;
  z-index: 1000; /* Higher than header */
  color: #ffffff;
  font-weight: 550;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(79, 195, 247, 0.3);
  transition: transform 0.3s ease;
}

.announcement-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(108, 108, 108, 0.3), transparent);
  animation: shine 3s infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.announcement-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.announcement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 24px;
  background-color: #ffffff; /* The background color of the square */
  border-radius: 12px; /* CHANGE THIS from 50% to a pixel value for rounded corners */
  color: white;
  position: relative;
}

.announcement-new-text {
  color: black; /* CHANGE THIS to black */
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.announcement-icon::after {
  content: ''; /* Essential for pseudo-elements */
  position: absolute; /* Position relative to .announcement-icon */
  top: 0;
  left: 0;
  width: 100%; /* Make it cover the icon */
  height: 100%;
  border-radius: 60%; /* Make it circular */
  background-color: #4FC3F7; /* Match the icon's color, or make it slightly transparent for a glow */
  opacity: 0.7; /* Initial opacity for the glow */
  z-index: -1; /* Place it behind the "NEW" text and the icon's solid background */
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(79, 195, 247, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 195, 247, 0); }
}

.announcement-bar a {
  color: #4FC3F7;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding: 0 4px;
  transition: all 0.3s ease;
}

.announcement-bar a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4FC3F7;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.announcement-bar a:hover {
  color: #3EB1E5;
}

.announcement-bar a:hover::after {
  transform: scaleX(1);
}

.announcement-cta {
  background-color: #3f26ba;
  color: white !important;
  padding: 6px 14px;
  border-radius: 4px;
  margin-left: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.announcement-cta:hover {
  background-color: #DC4D01;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.announcement-cta::after {
  display: none;
}

.arrow-icon {
  font-size: 14px;
  margin-top: 1px;
  transition: transform 0.3s ease;
}

.announcement-cta:hover .arrow-icon {
  transform: translateX(3px);
}

/* Hero section */
.hero {
  position: relative;
  padding: 80px 0; /* Add back some top/bottom padding now that video is gone */
  height: auto; /* Allow height to adjust to content */
  margin-top: 0; /* Remove previous margin-top from video wrapper */
  background-color: #f8f8f8; /* A light background color for the hero section */
  z-index: 2;
}

/* New Grid Layout for hero-content */
.hero-content.three-column-hero-layout { /* Targeting the new class */
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr; /* Image (left), Text (middle, wider), Video (right) */
  gap: 40px; /* Space between columns */
  align-items: center; /* Vertically align items in the middle */
  height: 100%; /* Ensure it fills container height if needed */
  margin-top: 0; /* Remove negative margin as per new layout */
  padding: 20px 0; /* Add some internal padding */
}

/* Styles for Your Picture */
.hero-image {
  text-align: center; /* Center image within its column */
}

.responsive-hero-image {
  max-width: 100%; /* Ensure image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5%; /* Make it round (or adjust for square/rounded corners) */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Add a subtle shadow */
  width: 300px; /* Set a max width for the image */
  height: 175px; /* Set a max height to make it a circle/square if border-radius is 50% */
  object-fit: cover; /* Ensure image covers the area without distortion */
}

/* Center the Hero Text (make it more central in its column) */
.hero-text.centered-hero-text { /* Targeting the new class */
  text-align: center; /* Center the text content */
  max-width: 100%; /* Remove previous max-width as it's now a grid column */
  margin: 0 auto; /* Center block-level elements */
}


/* Adjust existing hero-text and hero-video flex properties (if any, as they are now grid items) */
.hero-text { /* Find this existing rule */
  /* flex: 1; - REMOVE this if present as it's now a grid item */
  /* max-width: 600px; - REMOVE this or adjust as it's now a grid column */
  margin: 0 auto; /* Center text within its grid column */
}


/* --- Responsive Adjustments for New Hero Layout --- */
@media (max-width: 768px) { /* Adjust this media query as per your existing one */
  .hero-content.three-column-hero-layout {
    grid-template-columns: 1fr; /* Stack all columns on small screens */
    gap: 20px; /* Reduce gap for mobile */
    padding: 30px 0; /* Add padding for stacked content */
  }

  .hero-image {
    order: 1; /* Make the image appear first on mobile */
  }

  .hero-text.centered-hero-text {
    order: 2; /* Keep text second on mobile */
    margin-bottom: 20px; /* Add space below text */
  }

  .hero-video {
    order: 3; /* Make video appear third on mobile */
    margin-top: 0; /* Remove any previous top margin */
  }

  .hero-text h1 {
    font-size: 38px; /* Adjust font size for mobile */
  }
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 300px rgba(0,0,0,0.2);
}

.video-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px;
  pointer-events: none;
  box-shadow: inset 0 0 40px 10px rgba(0,0,0,0.2);
  z-index: 1;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 15px;
}

.main-content {
  position: relative;
  background-color: #ffffff;
  z-index: 3;
}

.section {
  padding: 80px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.section-title {
  font-size: 42px;
  margin-bottom: 40px;
  text-align: center;
  color: #333333;
}

.section-subtitle {
  text-align: center;
  font-size: 18px;
  margin-top: -30px;
  margin-bottom: 40px;
  color: #555555;
}

/* Features sections */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.features-with-video {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.feature-card {
  background-color: rgba(66, 0, 132, 0.745);
  padding: 30px;
  border-radius: 10px;
  transition: transform 0.3s ease;
  margin-bottom: 20px;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  font-size: 24px;
  margin-top: 0;
  color: #333333;
}

.feature-text {
  flex: 1;
}

.feature-video {
  flex: 1;
  margin-top: 20px;
}

/* Testimonials section */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 30px;
}

.testimonial-card {
  background-color: rgb(24, 24, 24);
  padding: 15px;
  border-radius: 5px;
}

.testimonial-card h3 {
  margin-top: 20px;
  font-size: 18px;
  color: #ffffff;
}

/* Logo scroll section */
.logo-scroll-container {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  background-color: #ffffff;
}

.logo-scroll-container::before,
.logo-scroll-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}

.logo-scroll-container::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}

.logo-scroll-container::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}

.logo-scroll {
  display: flex;
  align-items: center;
  animation: scroll 30s linear infinite;
  width: fit-content;
}

.logo-item {
  flex: 0 0 auto;
  height: 80px;
  margin: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  max-height: 70px;
  max-width: 150px;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.logo-item img:hover {
  filter: grayscale(0%);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* FAQ section */
/* --- FAQ Section Styles (Modified for Screenshot Look) --- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr; /* Change to 1 column for all screen sizes */
  gap: 0; /* Remove gap between items as borders will define separation */
  margin-top: 40px; /* Add some space below the FAQ title */
  border-top: 1px solid #e0e0e0; /* Top border for the entire FAQ section */
  max-width: 900px; /* Constrain width of the FAQ section itself */
  margin-left: auto; /* Center the FAQ grid */
  margin-right: auto; /* Center the FAQ grid */
}

.faq-item {
  background-color: transparent; /* Remove background color for individual items */
  border-radius: 0; /* Remove border radius for individual items */
  padding: 15px 10px; /* Adjust padding inside each item for a cleaner look */
  transition: all 0.3s ease; /* Keep transition for smooth hovers/visual changes */
  border-bottom: 1px solid #dbdbdb; /* Add bottom border for separation */
  box-shadow: none; /* Remove any box shadow on individual items */
  overflow: hidden; /* Ensure content is hidden when collapsed */
}

.faq-item:hover {
  transform: none; /* Remove transform on hover */
  background-color: #c2440029; /* Subtle hover background, similar to screenshot */
}

.faq-item h3 {
  font-size: 18px; /* Slightly smaller font for the question text */
  margin: 0; /* Remove default margin */
  color: #333333; /* Default text color for questions */
  position: relative;
  padding-right: 30px; /* Space for the +/- icon */
  cursor: pointer;
  user-select: none; /* Prevent text selection on click */
  font-weight: 500; /* Make question text semi-bold */
  display: flex; /* Use flexbox to align text and icon */
  justify-content: space-between; /* Push icon to the right */
  align-items: center; /* Vertically center icon */
}

.faq-item h3::after {
  content: "+";
  position: static; /* Change to static to be part of flex flow */
  font-size: 24px;
  color: #555555; /* Muted color for icon */
  transform: none; /* Remove any transform from icon itself */
  margin-left: auto; /* Push icon to the very right */
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.faq-item.active h3 {
  color: #000000; /* Darker text for active question */
  font-weight: 600; /* Bolder for active question */
}

.faq-item.active h3::after {
  content: "−"; /* Change content to minus for active question */
}

.faq-answer {
  display: none; /* Controlled by JS - remains hidden initially */
  opacity: 0; /* Controlled by JS - starts invisible */
  transition: opacity 0.9s ease; /* Smooth transition for opacity */
  padding: 0 0; /* No vertical padding when collapsed */
  color: #333333;
  margin: 10px 0 0; /* Margin above the answer text when displayed */
}

.faq-item.active .faq-answer {
  display: block; /* Controlled by JS - displays block when active */
  opacity: 1; /* Controlled by JS - becomes visible when active */
  padding-top: 15px; /* Add padding when expanded */
  padding-bottom: 5px; /* Small padding at the bottom for readability */
}

/* Page header styles */
.page-header {
  text-align: center;
  padding: 60px 0 30px;
}

.page-header h1 {
  font-size: 48px;
  margin-bottom: 20px;
  color: #333333;
}

.page-header p {
  font-size: 20px;
  max-width: 700px;
  margin: 0 auto;
  color: #555555;
}

/* Results gallery styles */
.results-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.result-card {
  background-color: rgba(79, 195, 247, 0.05);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.result-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
}

.result-card h3 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #333333;
}

.result-card p {
  color: #555555;
  line-height: 1.6;
  margin-bottom: 10px;
}

.result-card p strong {
  color: #4FC3F7;
}

/* Results stats styles */
.results-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 50px;
}

.stat-card {
  background-color: rgba(79, 195, 247, 0.1);
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  background-color: rgba(79, 195, 247, 0.15);
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #4FC3F7;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  color: #555555;
}

/* Case studies styles */
.case-studies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.case-study {
  background-color: rgba(79, 195, 247, 0.05);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.case-study:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.case-study h3 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #333333;
}

.case-study p {
  color: #555555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.case-study-stats {
  background-color: rgba(79, 195, 247, 0.1);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.case-study-stat {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.case-study-stat:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.case-study-stat span:first-child {
  color: #555555;
}

.case-study-stat span:last-child {
  font-weight: 700;
  color: #4FC3F7;
}

/* CTA section styles */
.cta-section {
  background-color: rgba(79, 195, 247, 0.1);
  text-align: center;
  padding: 80px 0;
  border-radius: 10px;
  margin: 80px 0;
}

.cta-section h2 {
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #333333;
}

.cta-section p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 30px;
  color: #555555;
}

/* Footer styles */
.footer {
  padding: 60px 0 40px;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.social {
  margin-bottom: 20px;
}

.social a {
  color: #4503d3e3;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social a:hover {
  color: #DC4D01;
}

.footer p {
  color: #777777;
  font-size: 14px;
}

/* B.E.A.S.T System specific styles */
.beast-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.component-card {
  background-color: rgba(79, 195, 247, 0.05);
  border-radius: 10px;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.component-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.component-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.component-letter {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4FC3F7;
  color: white;
  font-size: 28px;
  font-weight: bold;
  border-radius: 50%;
}

.component-title {
  margin: 0;
  font-size: 22px;
  color: #333;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

/* Add this new rule for your full-width section background */
.new-full-width-section {
  background-color: #f8f8f8; /* The light grayish background color */
  /* Ensure this section also has top/bottom padding as per other sections */
  padding: 80px 0; /* Standard section padding */
  border-top: 1px solid rgba(0,0,0,0.1); /* Keep the border if desired */
}

/* Also, update the margin-top for the second 'two-column' block if needed */
.two-column[style="margin-top: 60px;"] { /* Target this specific element */
  margin-top: 60px; /* Keep this for spacing between the two columns of content */
}

.benefit-card {
  background-color: rgba(79, 195, 247, 0.05);
  border-radius: 10px;
  padding: 25px;
  transition: all 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.benefit-card h3 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.section-content {
  padding-right: 20px;
}

.section-content h2 {
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}

.section-image {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- RESPONSIVE STYLING FOR SCREENS UP TO 768PX WIDE (Consolidated and Corrected) --- */
@media (max-width: 768px) {
  /* --- General Mobile Adjustments --- */
  body {
    font-size: 16px; /* A good base for mobile readability */
    padding-top: 120px; /* Reduced for mobile header/announcement bar */
  }

  .container {
    padding: 0 15px; /* Slightly less padding on the sides */
  }

  .section {
    padding: 40px 0; /* Reduce vertical padding for sections */
  }

  .section-title {
    font-size: 32px; /* Reduce heading size for mobile */
    margin-bottom: 30px; /* Keep consistent spacing */
  }

  .section-content {
    padding-right: 0; /* Remove right padding that affects stacked content */
  }

  /* --- Header Adjustments --- */
  header {
    padding: 10px 0; /* More compact header padding */
  }

  .header-inner {
    flex-direction: column; /* Stack logo, buttons, nav vertically */
    align-items: center; /* Center items horizontally when stacked */
    gap: 15px; /* Spacing between stacked items */
    flex-wrap: wrap; /* Allow wrapping if needed */
  }

  .logo {
    margin-bottom: 5px; /* Add slight space below logo */
  }

  .logo-text {
    font-size: 20px; /* Adjust logo font size */
  }

  .bars {
    height: 20px; /* Adjust logo bar height */
  }

  .bar {
    height: 20px; /* Adjust logo bar height */
  }

  .buttons {
    order: 2; /* Place buttons right after the logo */
    width: 100%; /* Buttons container takes full width */
    display: flex; /* Make buttons themselves a flex container */
    justify-content: center; /* Center the two buttons */
    gap: 10px; /* Space between the two buttons */
    flex-wrap: wrap; /* Allow buttons to wrap if screen is very small */
    margin-left: 0; /* Remove potential desktop push to right */
    margin-bottom: 10px; /* Space below buttons before nav */
  }

  .btn {
    flex: 0 0 auto; /* Buttons won't stretch to full width */
    width: auto; /* Let content determine width */
    max-width: 150px; /* Limit individual button width */
    padding: 10px 15px; /* Adjusted button padding for mobile */
    font-size: 14px; /* Adjusted button font size for mobile */
  }

  .nav {
    order: 3; /* Push navigation links below buttons */
    width: 100%; /* Nav takes full width to center links */
    justify-content: space-around; /* Distribute links evenly */
    gap: 6px; /* Space between nav items if they wrap */
    flex-wrap: wrap; /* Allow nav links to wrap */
  }

  .nav a {
    font-size: 10px; /* Adjust font size for mobile nav links */
    padding: 5px 8px; /* Make links easier to tap */
  }

  /* --- Hero Section Adjustments --- */
  .hero {
    height: auto;
    margin-top: 30px;
    padding-bottom: 40px;
  }

  /* This applies to hero-content *unless* it also has three-column-hero-layout */
  .hero-content {
    flex-direction: column; /* Ensure main hero content stacks if not handled by grid */
    margin-top: 0;
  }

  .hero-content.three-column-hero-layout { /* For the specific 3-column hero layout */
    grid-template-columns: 1fr; /* Stack columns */
    gap: 20px; /* Reduce gap */
    padding: 30px 0; /* Add padding */
  }

  .hero-image { order: 1; }
  .hero-text.centered-hero-text { order: 2; margin-bottom: 20px; }
  .hero-video { order: 3; margin-top: 0; }

  .hero-text {
    max-width: 100%; /* Ensure text takes full width */
    text-align: center;
    margin-bottom: 30px;
  }

  .hero-image {
    display: none; /* This will hide the entire hero-image container on screens 768px and smaller */
  }

  .hero-text h1 {
    font-size: 32px; /* Adjusted headline for mobile */
    line-height: 1.2;
  }

  .hero-text p {
    font-size: 16px; /* Adjusted paragraph for mobile */
  }

  .video-container { /* Video containers */
    margin: 0 auto;
    max-width: 100%;
  }

  /* --- Other Section Layout Adjustments --- */
  .features-with-video,
  .testimonials,
  .faq-grid,
  .beast-components,
  .case-studies,
  .two-column { /* Excluded .results-gallery here as it has its own rule below */
    grid-template-columns: 1fr; /* Stack columns for most content */
    gap: 20px; /* General reduction in gap for mobile */
  }

  .results-gallery { /* Specific rule for results gallery */
    grid-template-columns: 1fr;
  }

  .results-stats { /* Specific rule for results stats (keep 2 columns if desired) */
    grid-template-columns: 1fr 1fr;
  }

  .result-card, .case-study, .feature-card, .component-card, .benefit-card, .faq-item {
    padding: 20px; /* Slightly less padding for cards/items */
  }


  /* --- Announcement Bar Adjustments --- */
  .announcement-bar {
    padding: 8px 10px; /* Reduced padding for compact bar */
  }

  .announcement-content {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .announcement-text {
    font-size: 13px; /* Smaller font size for announcement text on mobile */
    text-align: center;
  }

  body.has-announcement {
    padding-top: 180px; /* Adjusted for mobile to account for announcement bar and header */
  }

  /* --- Footer Adjustments --- */
  .footer {
    padding: 40px 0 20px;
  }

  .social a {
    margin: 0 5px;
    font-size: 14px;
  }
}

/* --- RESPONSIVE STYLING FOR VERY SMALL PHONES (UP TO 480PX WIDE) --- */
@media (max-width: 480px) {
  /* --- General Mobile Adjustments --- */
  body {
    padding-top: 100px; /* Adjust padding for very small screens, might be even smaller header */
    font-size: 15px; /* Slightly smaller base font size for tiny screens */
  }

  .container {
    padding: 0 10px; /* Even tighter side padding */
  }

  .section {
    padding: 30px 0; /* Reduced vertical padding */
  }

  .section-title {
    font-size: 26px; /* Even smaller main section titles */
  }

  /* --- Header Adjustments --- */
  header {
    padding: 8px 0; /* Very compact header padding */
  }

  .logo-text {
    font-size: 18px; /* Smaller logo text */
  }

  .bars {
    height: 18px; /* Smaller logo bars */
  }

  .bar {
    height: 18px; /* Smaller logo bars */
  }

  .buttons {
    gap: 8px; /* Reduced gap between buttons */
  }

  .btn {
    max-width: 140px; /* Further limit individual button width */
    padding: 8px 12px; /* Smaller button padding */
    font-size: 13px; /* Smaller button font size */
  }

  .nav a {
    font-size: 13px; /* Smaller navigation links */
    padding: 4px 6px; /* Smaller padding for nav links */
  }

  /* --- Hero Section Adjustments --- */
  .hero {
    margin-top: 20px; /* Reduced top margin */
    padding-bottom: 30px; /* Reduced bottom padding */
  }

  .hero-text h1 {
    font-size: 28px; /* Significantly smaller headline for tiny screens */
    margin-bottom: 15px; /* Reduced margin below headline */
  }

  .hero-text p {
    font-size: 14px; /* Smaller paragraph text */
    margin-bottom: 20px; /* Reduced margin below paragraph */
  }

  .responsive-hero-image {
    width: 200px; /* Make image smaller on very small screens */
    height: 200px;
  }

  /* --- Specific Section Layout Adjustments --- */
  .results-stats {
    grid-template-columns: 1fr; /* Stack stats cards into a single column */
  }

  .stat-card {
    padding: 20px 10px; /* Reduced padding for stat cards */
  }

  .stat-number {
    font-size: 30px; /* Smaller numbers */
  }

  /* --- Announcement Bar Adjustments --- */
  .announcement-bar {
    padding: 6px 8px; /* Even smaller padding */
  }

  .announcement-content {
    gap: 6px;
  }

  .announcement-text {
    font-size: 12px; /* Very small text for announcement bar */
  }

  .announcement-cta {
    padding: 3px 10px; /* Smaller CTA button */
    font-size: 12px;
  }

  .announcement-icon {
    width: 20px; /* Smaller icon size */
    height: 20px;
  }

  .announcement-new-text {
    font-size: 7px; /* Adjust "NEW" text to fit smaller icon */
  }

  /* --- Footer Adjustments --- */
  .footer {
    padding: 30px 0 15px;
  }

  .social a {
    margin: 0 4px;
    font-size: 13px;
  }

  body.has-announcement {
    padding-top: 160px; /* Adjust body padding for very small screens */
  }
}