/* === Root Variables === */
:root {
  --whyai-bg: #0a1622;
  --whyai-blue: #08324d;
  --whyai-accent: #2dd6c1;
  --whyai-white: #fff;
  --whyai-footer-bg: #09121b;
  --whyai-glow: 0 0 16px #2dd6c199, 0 0 6px #00ffe044;
  --whyai-hover-bg: #142937;
}

/* === Base Resets === */
html, body {
  background: var(--whyai-bg);
  color: var(--whyai-white);
  font-family: 'Montserrat', 'Inter', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Ensure padding and border are included in element's total width/height */
}

*, *::before, *::after {
  box-sizing: inherit; /* Inherit box-sizing for all elements */
}

a {
  color: var(--whyai-accent);
  text-decoration: none;
  font-weight: 700;
  text-shadow: 0 0 2px #2dd6c1aa;
  transition: color 0.18s, text-shadow 0.18s;
}

a:hover, a:focus {
  color: var(--whyai-white);
  text-shadow: var(--whyai-glow);
}

/* === Navbar === */
.navbar {
  display: flex;
  justify-content: space-between; /* Pushes logo left, nav-links/toggle right */
  align-items: center; /* Vertically centers items */
  background: rgba(10, 22, 34, 0.92);
  backdrop-filter: blur(2px); /* Slick blur effect */
  color: var(--whyai-white);
  padding: 1.1em 2rem;
  box-shadow: 0 2px 18px #2dd6c140;
  position: sticky; /* Stays at the top when scrolling */
  top: 0;
  z-index: 999; /* Ensures navbar is above other content */
}

/* Logo Styling */
.logo {
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 1.6em;
  letter-spacing: 0.04em;
  color: var(--whyai-accent);
  text-shadow: var(--whyai-glow);
  gap: 0.65em;
}

/* Logo image */
.logo img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 9px #2dd6c1cc);
  border-radius: 10px;
  background: #111821;
  padding: 3px;
}

/* Navbar links (Desktop) */
.nav-links {
  display: flex; /* Display as flex for desktop layout */
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--whyai-accent);
  background: none;
  border-radius: 8px;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  transition: background 0.15s, color 0.13s, box-shadow 0.19s;
}

.nav-links a.active,
.nav-links a:hover,
.nav-links a:focus {
  background: var(--whyai-hover-bg);
  color: var(--whyai-white);
  box-shadow: var(--whyai-glow);
}

/* Hamburger Button (Base Styles for the icon itself) */
.nav-toggle {
  display: none; /* Hidden by default on desktop */
  background: none;
  border: none;
  width: 30px; /* Width of the hamburger icon */
  height: 24px; /* Height of the hamburger icon */
  position: relative; /* For positioning the lines */
  cursor: pointer;
  z-index: 9999; /* Ensure it's above everything else */
  padding: 0; /* Remove default button padding */
  flex-direction: column; /* Stack lines vertically */
  justify-content: space-between; /* Distribute lines vertically */
  align-items: center;
  margin-left: auto; /* Pushes it to the right on desktop if it were visible */
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 3px; /* Thickness of each line */
  background: var(--whyai-accent);
  border-radius: 2px;
  transition: all 0.3s ease-in-out; /* Smooth transition for transformation */
}

/* Hover/Focus effect for hamburger lines */
.nav-toggle:hover .hamburger-line,
.nav-toggle:focus .hamburger-line {
    background: var(--whyai-white);
    box-shadow: var(--whyai-glow);
}

/* === Hero Section === */
.hero {
  position: relative;
  text-align: center;
  padding: 5em 1em 3.5em 1em;
  background: linear-gradient(120deg, #1a2337 40%, #122230 100%);
  box-shadow: 0 0 160px #2dd6c180;
  border-radius: 0 0 28px 28px;
  z-index: 2;
  overflow: hidden; /* Prevent animation overflow on initial state */
}

.hero h1 {
  font-size: 3em;
  color: #2dd6c1;
  text-shadow: 0 0 30px #2dd6c1bb, 0 1px 8px #0f0f0f60;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 900;
  animation: neon-glow 2.8s ease-in-out infinite alternate;
  letter-spacing: 0.03em;

  /* Initial state for entrance animation */
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
  animation-name: fadeSlideUp, neon-glow;
  animation-duration: 0.8s, 2.8s;
  animation-delay: 0.3s, 0s;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-timing-function: ease-out, ease-in-out;
}

.hero .subtitle {
  font-size: 1.2em;
  color: #beeaff;
  margin-bottom: 1.5em;
  text-shadow: 0 2px 16px #13354d77;
  font-weight: 600;

  /* Initial state for entrance animation */
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
  animation-name: fadeSlideUp;
  animation-duration: 0.8s;
  animation-delay: 0.6s; /* Staggered delay after H1 */
  animation-timing-function: ease-out;
}

/* Neon particle overlay */
.neon-particles {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-radial-gradient(circle at 80% 40%, #2dd6c133 2px, transparent 6px),
              repeating-radial-gradient(circle at 30% 60%, #2dd6c11c 1.7px, transparent 5px);
  opacity: 0.17;
  animation: moveParticles 8s linear infinite alternate;
}

/* === CTA Button Styles === */
.cta-btn {
  background: linear-gradient(90deg, var(--whyai-accent) 80%, #51f4e3 100%);
  color: #102e2a;
  padding: 0.8em 1.8em;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 20px var(--whyai-accent), 0 0 8px #00ffe044;
  transition: all 0.3s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  /* REMOVED: white-space: nowrap; from here */
  white-space: normal; /* Default to normal (wrapping) */
  overflow-wrap: break-word; /* Ensure long words break */
}

/* Initial state for hero CTA button entrance animation */
.hero .cta-btn.big {
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
  animation-name: fadeSlideUp;
  animation-duration: 0.8s;
  animation-delay: 0.9s; /* Staggered delay after subtitle */
  animation-timing-function: ease-out;
}

/* Hover and Active states */
.cta-btn:hover,
.cta-btn:focus {
  background: var(--whyai-white);
  color: var(--whyai-accent);
  box-shadow: 0 0 30px #51f4e399, 0 0 12px #00ffe044;
  transform: translateY(-2px);
}

.cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 10px var(--whyai-accent);
}

/* Modifier for bigger buttons */
.cta-btn.big {
  padding: 1.1em 2.5em;
  font-size: 1.25em;
  gap: 0.6em;
  /* The inline style max-width:320px; will still apply here for larger screens */
  /* For desktop, force no wrap */
  white-space: nowrap; /* Re-apply nowrap for desktop */
  flex-wrap: nowrap; /* Ensure flex items stay on one line for desktop */
}

/* Ensure the icon scales with the button text */
.cta-btn .ti {
  font-size: 1.1em;
  line-height: 1;
}


/* === Stats Row === */
.stats-row {
  display: flex;
  gap: 2em; /* Default gap for desktop (4 in a row) */
  justify-content: center;
  align-items: stretch; /* Ensures all items in a row have the same height */
  margin: 2.5em auto 3em auto; /* Centering it slightly better */
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  opacity: 0.92; /* Keep original opacity for final state */
}

.stat-badge {
  background: linear-gradient(95deg, #2dd6c133 70%, #20394d 100%);
  border-radius: 15px;
  padding: 1em 1.6em; /* Internal padding for content */
  color: #beeaff;
  font-weight: 700;
  box-shadow: 0 0 14px #2dd6c155;
  font-size: 1.03em;
  border: 2px solid #2dd6c122;
  margin: 0.2em 0; /* Keeps some vertical margin when wrapped */
  text-align: center; /* Center the text within the badge */
  flex-grow: 1; /* Allows badges to grow if space is available */
  flex-shrink: 1; /* Allows badges to shrink */
  flex-basis: calc(25% - (2em * 3 / 4)); /* Calculates width for 4 items per row */
  min-width: 180px; /* Prevents badges from becoming too small on wider screens before wrapping */
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width */

  /* Entrance Animation Initial State */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Hover Effect */
.stat-badge:hover {
  transform: translateY(-5px); /* Lift slightly on hover */
  box-shadow: 0 0 20px #2dd6c1aa, 0 0 8px #00ffe044; /* Enhanced glow on hover */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Smooth hover transition */
}


/* === WHAT WE DO / FEATURES GRID === */
.features-section {
  padding: 4em 1em; /* Overall section padding */
  text-align: center;
  background: var(--whyai-bg); /* Ensure background is consistent */
  overflow: hidden; /* Prevent initial animation overflow */
}

.features-section h2 {
  font-size: 2.5em;
  color: var(--whyai-white);
  margin-bottom: 1.5em;
  text-shadow: 0 0 10px #2dd6c166;

  /* Initial state for entrance animation (hidden) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Flex container for the grid */
.features-grid {
  display: flex;
  flex-wrap: wrap; /* Allow cards to wrap to the next line */
  gap: 2em; /* Gap between cards */
  justify-content: center; /* Center cards horizontally */
  align-items: stretch; /* Ensures all cards in a row have the same height */
  max-width: 1200px; /* Max width for the grid to prevent it from stretching too wide */
  margin: 0 auto; /* Center the grid container itself */
}

.feature-card {
  background: var(--whyai-blue); /* Darker blue for cards */
  border-radius: 18px;
  padding: 2em;
  text-align: center;
  box-shadow: 0 0 20px #08324dcc, 0 0 8px #2dd6c133; /* Subtle glow and shadow */
  border: 1px solid #08324d;
  display: flex; /* Use flex for internal content alignment */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to the top */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(25% - (2em * 3 / 4)); /* Calculate width for 4 items */
  min-width: 220px; /* Minimum width before wrapping */
  box-sizing: border-box; /* Include padding and border in width */

  /* Entrance Animation Initial State (hidden) */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Hover Effect for Cards */
.feature-card:hover {
  transform: translateY(-8px); /* Lift more noticeably than stats badges */
  box-shadow: 0 0 30px #2dd6c1aa, 0 0 12px #00ffe066; /* Stronger glow on hover */
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; /* Smooth hover transition */
}

.feature-card .icon {
  font-size: 3.5em; /* Larger icon size */
  color: var(--whyai-accent);
  margin-bottom: 0.5em;
  filter: drop-shadow(0 0 8px #2dd6c1aa); /* Glow for the icon */
}

.feature-card h3 {
  font-size: 1.6em;
  color: var(--whyai-white);
  margin-bottom: 0.5em;
  font-weight: 800;
}

.feature-card p {
  font-size: 1em;
  color: #cceeff; /* Slightly lighter text for readability */
  line-height: 1.6;
  flex-grow: 1; /* Allows paragraph to take available space for consistent card height */
}

/* CTA Button at the bottom of the section */
.features-section .cta-btn.big {
  margin-top: 2.7em;
  margin-bottom: 0; /* Ensure no extra margin below the button */
}


/* === DEMO SECTION === */
.demo-section {
  padding: 4em 1em; /* Overall section padding */
  text-align: center;
  background: var(--whyai-bg); /* Ensure consistent background */
  opacity: 0; /* Initial state for entrance animation */
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  overflow: hidden; /* Prevent content overflow during initial animation */
}

.demo-section h2 {
  font-size: 2.5em;
  color: var(--whyai-white);
  margin-bottom: 1.5em;
  text-shadow: 0 0 10px #2dd6c166;
}

.demo-video-box {
  max-width: 720px; /* Max width for the video container */
  margin: 0 auto 1.5em auto; /* Center the box and add bottom margin */
  position: relative;
  border-radius: 22px;
  box-shadow: 0 0 34px #2dd6c180;
  overflow: hidden; /* Ensures border-radius applies to content */
  background: linear-gradient(135deg, #1a2337 0%, #0a1622 100%); /* Dark gradient background */
  aspect-ratio: 4 / 3; /* Taller aspect ratio to give more vertical space */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ensure the iframe fills its parent .demo-video-box and removes default browser styling */
.demo-video-box iframe {
    width: 100%;
    height: 100%;
    display: block; /* Removes any extra space below iframe */
    margin: 0; /* Remove any default iframe margin */
    padding: 0; /* Remove any default iframe padding */
    border: none; /* Remove any default iframe border */
}

.demo-caption {
  font-size: 1.1em;
  color: #cceeff;
  margin-bottom: 2.5em; /* Space before the CTA button */
}


/* === Keyframes for Animations === */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes neon-glow {
  0% { text-shadow: 0 0 15px #2dd6c1bb, 0 1px 8px #111; }
  100% { text-shadow: 0 0 40px #2dd6c1ee, 0 1px 18px #111; }
}

@keyframes moveParticles {
  0% { background-position: 0 0, 0 0;}
  100% { background-position: 40px 60px, 30px 10px;}
}


/* === Responsive Adjustments (Media Queries) === */

/* --- Navbar Responsive --- */
@media (max-width: 750px) {
  .navbar {
    flex-direction: row; /* Keep logo and toggle on one row */
    justify-content: space-between;
    padding: 1.1em 1rem; /* Adjust padding for smaller screens */
  }

  .nav-toggle {
    display: flex; /* Show hamburger button on mobile */
  }

  /* Mobile menu links (Overlay) */
  .nav-links {
    flex-direction: column; /* Stack links vertically */
    gap: 1.2em;
    width: 100%;
    background: #122435ee; /* Translucent background for the overlay */
    border-radius: 0 0 13px 13px;
    box-shadow: 0 10px 24px #2dd6c155;
    padding: 2em 1rem; /* Padding inside the mobile menu */
    position: absolute; /* Position relative to the .navbar */
    top: 100%; /* Starts right below the navbar */
    left: 0;
    z-index: 9997; /* Below logo/toggle, above other content */
    height: auto; /* Height adapts to content */
    max-height: calc(100vh - 68px); /* Max height to prevent overflow, adjust 68px if navbar height changes */
    overflow-y: auto; /* Enable scrolling if content exceeds max-height */

    /* Initial state for slide-down/fade-in animation */
    opacity: 0;
    pointer-events: none; /* Prevents clicks on hidden menu */
    transform: translateY(-100%); /* Start off-screen (above the navbar) */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Smooth animation */
  }

  /* Show the menu when 'open' is added (Active state) */
  .nav-links.open {
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Make it interactive */
    transform: translateY(0); /* Slide into view */
  }

  /* Individual mobile navigation links */
  .nav-links a {
    font-size: 1.4rem;
    text-align: center; /* Center align links for a cleaner look */
    padding: 1.2rem;
    width: auto; /* Allow links to size based on content */
    max-width: 100%;
    margin: 0 auto; /* Center individual links */
    border-bottom: 1px solid #2dd6c155; /* Separator between links */
    display: block; /* Make links block-level for full clickable area */
  }

  .nav-links a:last-child {
    border-bottom: none; /* No border on the last link */
  }

  /* Hamburger Icon Transformation (when menu is open) */
  .nav-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg); /* Move down and rotate for 'X' */
  }

  .nav-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0; /* Fade out middle line */
  }

  .nav-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg); /* Move up and rotate for 'X' */
  }
}

/* --- Hero Section Responsive --- */
@media (max-width: 500px) {
  .hero h1 {
    font-size: 2.2em; /* Smaller heading on tiny screens */
  }
  .hero .subtitle {
    font-size: 1em; /* Smaller subtitle on tiny screens */
  }
  .hero {
    padding: 3em 1em 2.5em 1em; /* Adjust padding for smaller screens */
  }
}

/* --- Large Screen Button Styles --- */
.cta-btn.big {
  font-size: 1.2em;  /* Make sure the font size is appropriate */
  padding: 1em 2.6em; /* Adjust padding for comfortable space */
  white-space: normal; /* Allow text to wrap if it overflows */
  overflow-wrap: break-word; /* Ensure the text breaks when too long */
  width: 100%;  /* Make the button stretch to 100% width */
  height: auto; /* Allow height to adjust based on content */
  text-align: center; /* Center text inside the button */
  display: flex; /* Use flexbox to center the content inside */
  justify-content: center; /* Center the text and icon inside the button */
  align-items: center; /* Align the content vertically */
  gap: 0.5em; /* Add some space between the icon and text */
  border-radius: 2em; /* Rounded corners */
}

/* Icon and text inside the button */
.cta-btn.big .ti {
  font-size: 1.5em;  /* Adjust icon size to match the button size */
}

.cta-btn.big span:not(.ti) { /* Select the text span, excluding the icon */
  white-space: normal; /* Force text to wrap */
  text-align: center; /* Center the text inside the button */
  width: 100%; /* Ensure the text takes full available width */
  min-width: 0; /* Allow text to shrink if needed */
}

/* --- Button on Large Screens --- */
@media (min-width: 768px) {
  .cta-btn.big {
    font-size: 1.2em;
    padding: 1em 2.6em;
    max-width: 100%; /* Ensure button stretches fully */
    width: 100%; /* Full width button for large screens */
    height: auto; /* Ensure height adjusts based on content */
    gap: 0.5em; /* Add spacing between icon and text */
  }

  .cta-btn.big .ti {
    font-size: 1.6em; /* Icon size adjustment */
  }

  .cta-btn.big span:not(.ti) {
    text-align: center; /* Ensure the text is centered */
  }
}


/* --- CTA Button Responsive --- */
@media (max-width: 768px) {
  .cta-btn.big {
    font-size: 1.1em; /* Slightly reduce font size for better fit */
    padding: 1em 1.5em; /* Adjusted padding to give more horizontal room */
    max-width: 90%; /* Allow it to take more width on smaller screens */
    white-space: normal; /* Allow text to wrap on smaller screens */
    overflow-wrap: break-word; /* Ensures the text breaks when too long */
    height: auto; /* Allow height to adjust based on content */
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center; /* Center items when stacked */
    justify-content: center; /* Center items horizontally when stacked */
    gap: 0.2em; /* Reduced gap when stacked */
    flex-wrap: wrap; /* Explicitly allow wrapping for this breakpoint */
  }

  .cta-btn.big .ti {
    margin-bottom: 0.2em; /* Add a small margin below the icon when stacked */
    font-size: 1em; /* Ensure icon doesn't dominate when text wraps */
  }

  /* Target the text content directly within the button */
  .cta-btn.big span:not(.ti) { /* Select the text span, excluding the icon */
    white-space: normal; /* Force text inside span to wrap */
    text-align: center; /* Center the wrapped text */
    width: 100%; /* Ensure text span takes full available width */
    min-width: 0; /* Allow text to shrink if needed */
  }
}

@media (max-width: 500px) {
  .cta-btn.big {
    font-size: 0.95em; /* Further reduce font size for very small screens */
    padding: 0.8em 1.2em; /* Further adjust padding for very small screens */
    max-width: 100%; /* Allow it to take full width if needed */
    white-space: normal; /* Ensure text wraps */
    height: auto; /* Allow height to adjust */
    flex-direction: column; /* Ensure vertical stacking */
    align-items: center; /* Center items when stacked */
    justify-content: center; /* Center items horizontally when stacked */
    gap: 0.2em; /* Reduced gap */
    flex-wrap: wrap; /* Explicitly allow wrapping */
  }
  .cta-btn.big .ti {
    margin-bottom: 0.2em;
    font-size: 0.9em; /* Smaller icon for very small screens */
  }
  /* Target the text content directly within the button */
  .cta-btn.big span:not(.ti) { /* Select the text span, excluding the icon */
    white-space: normal; /* Force text inside span to wrap */
    text-align: center; /* Center the wrapped text */
    width: 100%; /* Ensure text span takes full available width */
    min-width: 0; /* Allow text to shrink if needed */
  }
}


/* --- Stats Row Responsive --- */
/* Tablet and Larger Mobile Screens (2x2 Layout) */
@media (max-width: 900px) {
  .stats-row {
    gap: 1.5em; /* Slightly smaller gap for tablet/mobile */
  }
  .stat-badge {
    flex-basis: calc(50% - (1.5em / 2)); /* Calculates width for 2 items per row */
    min-width: unset; /* Remove min-width to allow proper shrinking */
  }
}

/* Small Mobile Screens (1x1 Stacked Layout) */
@media (max-width: 500px) {
  .stats-row {
    gap: 1em; /* Even smaller gap for very small screens */
  }
  .stat-badge {
    flex-basis: 100%; /* Full width for single item per row */
    padding: 1em 1em; /* Slightly less padding on very small screens */
  }
}

/* --- Features Grid Responsive --- */
/* Tablet (2x2 Layout) */
@media (max-width: 992px) { /* Changed breakpoint for 2x2 */
  .features-section h2 {
    font-size: 2.2em;
  }
  .features-grid {
    gap: 1.5em; /* Smaller gap for tablet */
  }
  .feature-card {
    flex-basis: calc(50% - (1.5em / 2)); /* Calculates width for 2 items */
    min-width: unset; /* Remove min-width to allow proper shrinking */
    padding: 1.8em; /* Slightly less padding */
  }
}

/* Small Mobile (1x1 Stacked Layout) */
@media (max-width: 600px) { /* Changed breakpoint for 1x1 */
  .features-section {
    padding: 3em 1em; /* Adjust section padding for mobile */
  }
  .features-section h2 {
    font-size: 2em;
    margin-bottom: 1em;
  }
  .features-grid {
    gap: 1em; /* Even smaller gap */
  }
  .feature-card {
    flex-basis: 100%; /* Full width for single column */
    padding: 1.5em; /* Adjusted padding */
  }
  .feature-card .icon {
    font-size: 3em; /* Slightly smaller icon */
  }
  .feature-card h3 {
    font-size: 1.4em; /* Slightly smaller heading */
  }
}

/* --- Demo Section Responsive --- */
@media (max-width: 768px) {
  .demo-section h2 {
    font-size: 2.2em;
  }
}

@media (max-width: 500px) {
  .demo-section {
    padding: 3em 1em;
  }
  .demo-section h2 {
    font-size: 2em;
  }
  .demo-caption {
    font-size: 0.95em;
  }
}


/* === Animation Class (Added by JavaScript) === */
/* When a section gets the 'animate-in' class, its children become visible */

/* Stats Row Animation */
.stats-row.animate-in .stat-badge {
  opacity: 0.92; /* Fade to original opacity */
  transform: translateY(0); /* Slide up to original position */
}
/* Staggered Delay for Stats Badges */
.stats-row.animate-in .stat-badge:nth-child(1) { transition-delay: 0.1s; }
.stats-row.animate-in .stat-badge:nth-child(2) { transition-delay: 0.2s; }
.stats-row.animate-in .stat-badge:nth-child(3) { transition-delay: 0.3s; }
.stats-row.animate-in .stat-badge:nth-child(4) { transition-delay: 0.4s; }

/* Features Section Animation */
.features-section.animate-in h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s; /* Stagger the heading slightly */
}
.features-section.animate-in .feature-card {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered Delay for Feature Cards */
.features-section.animate-in .feature-card:nth-child(1) { transition-delay: 0.2s; }
.features-section.animate-in .feature-card:nth-child(2) { transition-delay: 0.4s; }
.features-section.animate-in .feature-card:nth-child(3) { transition-delay: 0.6s; }
.features-section.animate-in .feature-card:nth-child(4) { transition-delay: 0.8s; }

/* Demo Section Animation */
.demo-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* === TESTIMONIALS SECTION === */
.testimonials {
  padding: 4em 1em;
  text-align: center;
  background: var(--whyai-bg);
  overflow: hidden; /* For animation purposes */
  opacity: 0; /* Initial state for animation */
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.testimonials h2 {
  font-size: 2.5em;
  color: var(--whyai-white);
  margin-bottom: 1.5em;
  text-shadow: 0 0 10px #2dd6c166;
}

.testimonial-list {
  display: flex;
  flex-wrap: wrap; /* Allow cards to wrap */
  gap: 2em; /* Space between cards */
  justify-content: center; /* Center cards horizontally */
  align-items: stretch; /* Ensure cards have equal height */
  max-width: 900px; /* Max width for the list */
  margin: 0 auto; /* Center the list itself */
}

.testimonial-card {
  background: var(--whyai-blue);
  border-radius: 18px;
  padding: 1.8em;
  box-shadow: 0 0 20px #08324dcc, 0 0 8px #2dd6c133;
  border: 1px solid #08324d;
  display: flex;
  flex-direction: column; /* Stack avatar, text, author */
  align-items: center; /* Center content horizontally */
  justify-content: flex-start; /* Align content to the top */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(50% - 1em); /* Two cards per row with gap */
  min-width: 280px; /* Minimum width before stacking on very small screens */
  box-sizing: border-box;

  /* Animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 30px #2dd6c1aa, 0 0 12px #00ffe066;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.testimonial-avatar {
  width: 64px; /* Larger avatar */
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--whyai-accent);
  box-shadow: 0 0 12px var(--whyai-accent);
  margin-bottom: 1em;
  margin-top: 0.5em; /* Small top margin */
}

.testimonial-card p {
  font-size: 1.05em;
  color: #cceeff;
  line-height: 1.7;
  font-style: italic; /* Italicize quotes */
  margin-bottom: 1em;
  flex-grow: 1; /* Allows text to push author to bottom */
}

.testimonial-card .author {
  font-size: 0.95em;
  color: var(--whyai-accent);
  font-weight: 600;
  text-shadow: 0 0 2px #2dd6c1aa;
}

/* --- Testimonials Section Responsive --- */
@media (max-width: 768px) {
  .testimonials h2 {
    font-size: 2.2em;
  }
  .testimonial-list {
    gap: 1.5em; /* Reduce gap on tablets */
  }
  .testimonial-card {
    flex-basis: calc(50% - 0.75em); /* Keep two cards on wider tablets */
    padding: 1.5em;
  }
}

@media (max-width: 600px) {
  .testimonials {
    padding: 3em 1em; /* Adjust section padding */
  }
  .testimonials h2 {
    font-size: 2em;
    margin-bottom: 1em;
  }
  .testimonial-list {
    gap: 1em; /* Further reduce gap on smaller mobiles */
  }
  .testimonial-card {
    flex-basis: 100%; /* Stack cards on top of each other */
    min-width: unset; /* Allow it to shrink fully */
    padding: 1.2em;
  }
  .testimonial-avatar {
    width: 56px;
    height: 56px;
    margin-bottom: 0.8em;
  }
  .testimonial-card p {
    font-size: 1em;
  }
  .testimonial-card .author {
    font-size: 0.9em;
  }
}

/* === Resources Section === */
.resources-section {
  padding: 4em 1em; /* Section padding */
  text-align: center;
  background: var(--whyai-bg); /* Consistent background */
  overflow: hidden; /* Prevent initial animation overflow */
}

.resources-section h2 {
  font-size: 2.5em;
  color: var(--whyai-white);
  margin-bottom: 1.5em;
  text-shadow: 0 0 10px #2dd6c166;
  opacity: 0;
  transform: translateY(30px); /* Start from below */
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.resources-main-grid {
  display: flex;
  flex-wrap: wrap; /* Allow articles to wrap */
  gap: 2em; /* Space between the cards */
  justify-content: center; /* Center items horizontally */
  align-items: stretch; /* Equal height for items */
  max-width: 1200px; /* Max width for the grid */
  margin: 0 auto; /* Center the grid container itself */
}

.featured-resource {
  display: flex;
  gap: 1.5em;
  background: var(--whyai-blue);
  border-radius: 18px;
  padding: 2em;
  box-shadow: 0 0 22px #2dd6c1aa, 0 3px 13px #0006;
  color: var(--whyai-white);
  flex: 1 1 100%; /* Default to full width for small screens */
  max-width: 100%; /* Prevent the article from overflowing */
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.featured-resource:hover {
  transform: translateY(-8px); /* Lift on hover */
  box-shadow: 0 0 30px #2dd6c1cc, 0 0 12px #00ffe066;
}

.resource-thumb {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
}

.featured-resource div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5em;
}

.featured-resource h3 {
  color: var(--whyai-white);
  font-size: 1.5em;
  font-weight: 800;
  margin-bottom: 0.3em;
}

.featured-resource p {
  font-size: 1.1em;
  color: #beeaff;
}

.featured-resource .resource-meta {
  font-size: 0.95em;
  color: #cceeff;
  margin-top: 0.6em;
}

/* Sidebar styling */
.resources-sidebar {
  flex: 1;
  min-width: 220px;
  background: #162736;
  padding: 2em;
  border-radius: 18px;
  box-shadow: 0 0 18px #2dd6c144;
  margin-top: 2em;
}

.resources-sidebar h4 {
  font-size: 1.3em;
  color: var(--whyai-white);
  margin-bottom: 1em;
}

.resources-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.resources-sidebar li {
  margin-bottom: 0.8em;
}

.resources-sidebar a {
  color: #beeaff;
  font-size: 1.1em;
  transition: color 0.2s ease-in-out;
}

.resources-sidebar a:hover {
  color: var(--whyai-accent);
}

/* CTA Button inside the sidebar */
.resources-sidebar .cta-btn {
  display: inline-block;
  font-size: 1em;
  margin-top: 1.5em;
  padding: 1em 2.4em;
  background: var(--whyai-accent);
  color: #08324d;
  border-radius: 2em;
  text-decoration: none;
  box-shadow: 0 0 15px #2dd6c155;
  transition: all 0.3s ease;
}

.resources-sidebar .cta-btn:hover {
  background: var(--whyai-white);
  color: var(--whyai-accent);
  box-shadow: 0 0 25px #51f4e3;
  transform: translateY(-2px);
}

/* Resource Cards (List Below) */
.resource-list {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3em;
}

.resource-card {
  background: var(--whyai-blue);
  border-radius: 18px;
  padding: 2em;
  box-shadow: 0 0 22px #2dd6c122, 0 3px 13px #0006;
  color: var(--whyai-white);
  flex: 1 1 100%;
  max-width: 300px;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.resource-card:hover {
  transform: translateY(-8px); /* Lift the card on hover */
  box-shadow: 0 0 30px #2dd6c1cc, 0 0 12px #00ffe066;
}

.resource-card h3 {
  color: var(--whyai-white);
  font-size: 1.2em;
  font-weight: 800;
  margin-bottom: 0.3em;
}

.resource-card p {
  font-size: 1em;
  color: #beeaff;
}

.resource-card .resource-meta {
  font-size: 0.9em;
  color: #cceeff;
  margin-top: 0.6em;
}

/* === Responsive Adjustments === */
@media (max-width: 992px) {
  .resources-main-grid {
    flex-direction: column;
    gap: 3em;
  }
}

@media (max-width: 600px) {
  .resources-section h2 {
    font-size: 2em;
  }

  .featured-resource {
    flex-direction: column;
    gap: 1.5em;
  }

  .resource-thumb {
    width: 150px;
    height: 150px;
  }

  .resources-sidebar {
    padding: 1.5em;
  }

  .resources-sidebar h4 {
    font-size: 1.2em;
  }
}

/* === Floating CTA Button === */
.sticky-cta {
  position: fixed;
  bottom: 32px;
  right: 28px;
  background: linear-gradient(90deg, #2dd6c1 80%, #54f7e9 100%);
  color: #08324d;
  font-weight: 900;
  border-radius: 22px;
  box-shadow: 0 0 32px #2dd6c1bb;
  padding: 1.15em 2.1em;
  font-size: 1.22em;
  opacity: 0.93;
  z-index: 9999;
  animation: pulse 2.5s infinite;
  transition: background 0.14s, color 0.14s;
  text-shadow: none;
}

.sticky-cta:hover {
  background: #08324d;
  color: #2dd6c1;
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 14px #2dd6c1bb; }
  50% { box-shadow: 0 0 44px #2dd6c1; }
}

/* === FAQ Section === */
.faq-section {
  padding: 4em 1em;
  text-align: center;
  background: var(--whyai-bg);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Animation applied when FAQ section comes into view */
.faq-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.faq-section h2 {
  font-size: 2.5em;
  color: var(--whyai-white);
  margin-bottom: 1.5em;
  text-shadow: 0 0 10px #2dd6c166;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 900px;
  margin: 0 auto;
}

.faq-list details {
  background: #14293c;
  color: #beeaff;
  border-radius: 12px;
  margin-bottom: 1em;
  padding: 1.2em 1em;
  box-shadow: 0 0 12px #2dd6c144;
  transition: box-shadow .2s ease-in-out;
}

.faq-list details[open] {
  box-shadow: 0 0 22px #2dd6c1cc;
}

.faq-list summary {
  color: #2dd6c1;
  font-weight: 800;
  font-size: 1.11em;
  cursor: pointer;
  outline: none;
}

.faq-list details > div {
  margin-top: 1em;
  font-size: 1.01em;
  line-height: 1.6;
}

/* CTA Button in FAQ Section */
.faq-ask {
  margin-top: 2em;
}

.faq-ask h4 {
  color: #2dd6c1;
  margin-bottom: 0.6em;
}

.faq-ask .cta-btn {
  font-size: 1em;
  padding: 1em 2.4em;
  background: var(--whyai-accent);
  color: #08324d;
  border-radius: 2em;
  text-decoration: none;
  box-shadow: 0 0 15px #2dd6c155;
  transition: all 0.3s ease;
}

.faq-ask .cta-btn:hover {
  background: var(--whyai-white);
  color: var(--whyai-accent);
  box-shadow: 0 0 25px #51f4e3;
  transform: translateY(-2px);
}


/* === Footer === */
.footer {
  background: var(--whyai-footer-bg);
  color: var(--whyai-accent);
  text-align: center;
  padding: 2em 0 1.1em 0;
  font-size: 1em;
  box-shadow: 0 -2px 24px #2dd6c120;
  margin-top: auto;
}

.footer-inner {
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
}

.footer-logo {
  font-weight: 900;
  font-size: 1.2em;
  color: var(--whyai-accent);
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.5em;
  text-shadow: var(--whyai-glow);
}

.footer-logo img {
  height: 26px;
  width: auto;
  filter: drop-shadow(0 0 7px #2dd6c188);
}

.footer-links {
  display: flex;
  gap: 1.15em;
  font-weight: 700;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--whyai-accent);
  text-decoration: none;
  text-shadow: 0 0 2px #2dd6c1cc;
  transition: color 0.13s, text-shadow 0.14s;
}

.footer-links a:hover {
  color: var(--whyai-white);
  text-shadow: var(--whyai-glow);
}

.footer-copy {
  color: #75aac8;
  font-size: 0.97em;
  margin-top: 0.7em;
  letter-spacing: 0.01em;
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
  .faq-section h2 {
    font-size: 2.2em;
  }

  .faq-ask .cta-btn {
    padding: 0.8em 2.2em;
  }

  .footer-logo {
    font-size: 1.1em;
  }

  .footer-copy {
    font-size: 0.9em;
  }
}

@media (max-width: 600px) {
  .faq-section {
    padding: 3em 1em;
  }

  .faq-section h2 {
    font-size: 2em;
  }

  .faq-list details {
    padding: 1em;
  }

  .footer-inner {
    padding: 0 0.4em;
  }

  .footer-logo {
    font-size: 1em;
  }

  .footer-links {
    flex-direction: column;
    gap: 1em;
  }

  .footer-copy {
    font-size: 0.85em;
  }
}