/* --- Base Reset & Defaults --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #f4f4f4; /* Light text on dark background */
  background-color: #1a1a1a; /* Dark background */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Ensure no padding-top here by default */
}

main {
    flex-grow: 1; /* Ensures footer stays at the bottom */
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
  overflow: hidden; /* Clear floats */
}

/* --- Variables (Easy to change colors) --- */
:root {
  --primary-color: #8041ba; /* Purple from logo (adjust hex code if needed) */
  --secondary-color: #ffffff; /* White from logo */
  --dark-color: #1a1a1a;    /* Dark background */
  --medium-dark-color: #2c2c2c; /* Slightly lighter dark for sections */
  --light-color: #f4f4f4;   /* Light text / elements */
}

/* --- Utility Classes --- */
.text-center {
  text-align: center;
}

.lead {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.btn {
  display: inline-block;
  background: var(--primary-color);
  color: var(--secondary-color);
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background: #5a0cac; /* Slightly darker purple */
}

.section-padding {
    padding: 60px 0;
}

/* --- Header / Navigation --- */
header {
  /* background: var(--medium-dark-color); REMOVE THIS */
  color: var(--light-color);
  /* padding: 10px 0; MODIFIED BELOW */
  /* border-bottom: 2px solid var(--primary-color); REMOVE THIS */

  /* Styles from landing.html header */
  /* background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d); */
  background: linear-gradient(90deg, #4103fc 10%, #ad03fc, #0398fc);
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adjusted shadow */
  padding: 15px 0; /* Adjusted padding slightly for new look */
  position: relative; /* Ensures ::before is positioned relative to header */
  overflow: hidden; /* For background animation */
}

/* Top gradient line from landing.html */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #fdbb2d, #b21f1f, #1a2a6c);
  z-index: 1; /* Ensure it's above the main background but below content if needed */
}

/* Keyframes for header background animation */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

header .container {
  display: flex;
  justify-content: space-between; /* Keep logo left, actions right */
  align-items: center;
}

/* Logo styles remain the same */
header .logo {
    display: flex;
    align-items: center;
}
header .logo img {
  height: 80px; /* Adjust as needed */
  width: auto;
  display: block;
}
.header-brand-text {
    color: var(--light-color);
    font-size: 2.2rem; /* Adjust as needed */
    font-weight: bold;
    margin-left: 15px;
    text-decoration: none;
}

/* --- Global Gradient Button Style (mirrors .btn-discord structure) --- */
.btn-gradient-signup,
.btn-discord /* Consolidate if styles are identical, keeping .btn-discord for now if minor diffs exist or for clarity */ {
    /* Core styles from original btn-gradient-signup */
    background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); /* The gradient */
    border: 0; /* Remove default border */
    border-radius: 8px; /* Outer rounding */
    box-sizing: border-box;
    color: #FFFFFF; /* Text color will be set on span, but good fallback */
    display: inline-flex; /* Use flex to easily center the span */
    justify-content: center;
    align-items: center;
    line-height: 1em;
    padding: 3px !important; /* CRUCIAL: Small padding lets the gradient show as border, override .btn */
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: transparent !important; /* Override the default solid background from .btn */
    transition: box-shadow 0.3s ease;
    /* margin-top: 15px; /* Remove default margin, apply contextually if needed */
}

.btn-gradient-signup:hover,
.btn-discord:hover {
    background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); /* Keep gradient */
    background-color: transparent !important; /* Ensure no solid color appears */
    outline: 0;
    /* box-shadow: rgba(151, 65, 252, 0.4) 0 15px 30px -5px; */
}

/* Global style for the inner <span> tag of gradient buttons */
.btn-gradient-text {
    background-color: var(--dark-color); /* Using your site's dark color */
    color: #FFFFFF; /* White text */
    padding: 10px 20px; /* Default padding for buttons WITHOUT icons */
    border-radius: 6px; /* Slightly smaller radius for the inner part */
    width: 100%;
    height: 100%;
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 300ms ease, color 300ms ease;
    font-weight: bold;
    font-size: 1rem; 
    position: relative; 
}

/* Add icon to Discord buttons specifically */
.btn-discord .btn-gradient-text {
    /* Adjust padding to accommodate icon on the right */
    /* Icon width 20px + margin-left 8px = 28px total for icon part */
    /* Default right padding is 20px. To make space, reduce it. */
    /* Let's try to keep text centered, so adjust both sides if icon is considered part of overall content */
    padding: 10px 15px; /* This was the value from before, which made it a bit shorter */
}

.btn-discord .btn-gradient-text::after {
    content: '';
    display: inline-block;
    width: 20px;  /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
    background-image: url('../images/discord-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 8px; /* Space between text and icon */
}

.btn-gradient-signup:hover .btn-gradient-text,
.btn-discord:hover .btn-gradient-text {
    background-color: transparent; /* Reveal the outer gradient */
    color: #FFFFFF; /* Keep text white */
}

/* --- Styles for the Centered Navigation --- */
nav.main-nav {
    flex-grow: 1; /* Allow nav to take available space in the middle */
    /* Remove margin if previously applied directly to nav */
    margin: 0 20px; /* Add some horizontal margin/spacing */
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center; /* <<< CENTER THE LINK ITEMS WITHIN THE NAV */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

nav.main-nav ul li {
  margin-left: 25px; /* Adjust spacing between links */
  margin-right: 25px;/* Adjust spacing between links */
  /* Add padding and transition for new hover effect */
  padding: 10px 0;
  transition: background-position-x 0.9s linear;
  position: relative; /* Keep for potential future use */
}
/* Remove margin from the first item if needed */
/* nav.main-nav ul li:first-child { margin-left: 0; } */


nav.main-nav ul li a {
  color: var(--light-color);
  text-decoration: none;
  font-weight: bold;
  /* Add padding, border-radius, and transition for the new effect */
  padding: 8px 15px; /* Adjust padding as needed */
  border-radius: 20px; /* Rounded corners for the background */
  position: relative; /* Good practice */
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Remove properties related to old SVG underline */
  /* transition: color 0.45s; */
  /* Remove position relative and padding-bottom */
  /* position: relative; */
  /* padding-bottom: 5px; */
}

/* Remove old hover effect on LI */
/* nav.main-nav ul li:hover { ... } */

/* Apply new hover effect to A tag */
nav.main-nav ul li a:hover {
  color: var(--secondary-color); /* Keep text white or light */
  background-color: rgba(128, 65, 186, 0.4); /* Semi-transparent primary color */
}

/* --- Styles for the Header Actions (Button) --- */
.header-actions .btn {
    /* Inherits .btn styles */
    /* Add specific overrides if needed */
     padding: 10px 25px; /* Ensure button padding is sufficient */
}

/* Mobile Menu Placeholder (Add JS later for toggle) */
.menu-toggle {
    display: none; /* Hidden by default */
    /* Add styles for hamburger icon if needed */
}

@media (max-width: 768px) {
  header .container {
    flex-direction: column;
    text-align: center;
  }

  header nav ul {
    margin-top: 15px;
    flex-direction: column; /* Stack nav items */
    align-items: center;
  }

  header nav ul li {
    margin: 5px 0;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .features .grid,
  .pricing .grid {
    grid-template-columns: 1fr; /* Stack grids on mobile */
  }

  section h2 {
      font-size: 2rem;
  }

  .how-it-works li {
      padding-left: 60px; /* Adjust padding for number */
  }
   .how-it-works li::before {
       left: 15px; /* Adjust position */
   }

   /* Ensure main has no top padding on mobile */
   main {
       padding-top: 0 !important; /* Use important if needed to override */
   }

   /* Ensure header position is not fixed on mobile */
   /* header {
       position: static !important; 
   } 
   REMOVED this static positioning for mobile for now, 
   as the new animated header might look good sticky on mobile too, 
   or might conflict. Let's test. If sticky is an issue on mobile, 
   we can add a specific rule to make it static for mobile. 
   The fixed positioning for desktop is handled below. 
   The primary `header` rule now includes `position: relative` by default.
   */

  /* Hero section buttons on mobile */
  .hero .btn { /* Target both buttons in the hero section */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content; /* Let button size to its text, but be a block for centering */
    /* max-width: 90%; /* Optional: prevent very long buttons from touching edges */
  }
  .hero .btn-gradient-signup {
    margin-bottom: 15px; /* Add space below the first button when stacked */
  }

  /* Signup section buttons on mobile */
  #signup .btn {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content;
  }
  #signup .btn-discord {
    margin-bottom: 15px; /* Add space below the Discord button when stacked */
  }
}


/* --- ADD THIS MEDIA QUERY FOR DESKTOP STICKY HEADER --- */

/* Styles for Larger Screens (> 768px) - Make Header Sticky */
@media (min-width: 769px) {
    header {
        position: fixed; /* Makes the header sticky */
        top: 0;          /* Positions it at the top */
        left: 0;         /* Aligns it to the left edge */
        width: 100%;     /* Makes it span the full viewport width */
        z-index: 1000;   /* Ensures it stays on top of other content */
    }

    main {
        /* Add padding to offset the fixed header height */
        /* Double-check this value (122px) with dev tools */
        padding-top: 100px;
    }

    /* Optional: Ensure mobile overrides don't interfere if needed */
    /* (Usually not necessary with min-width/max-width separation) */
    /* header .container { flex-direction: row; } */
    /* header nav ul { flex-direction: row; } */
}


/* --- Hero Section --- */
.hero {
  background: var(--dark-color); /* Or maybe a subtle gradient/image later */
  color: var(--light-color);
  padding: 60px 0;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.hero h1 span {
    color: var(--primary-color); /* Accent */
}

/* --- Gradient Text for Hero H1 --- */
.hero h1 .gradient-text {
    /* Define the gradient - Adjust colors as needed! */
    /* Example: Pink/Magenta to Blue/Purple */
    background: linear-gradient(to right, #D946EF, #4D5BFF);

    /* Clip the background to the text */
    -webkit-background-clip: text; /* For Safari/Chrome */
    background-clip: text;

    /* Make the text color transparent so the background shows through */
    -webkit-text-fill-color: transparent; /* For Safari/Chrome */
    color: transparent; /* Standard fallback (may not work alone for background-clip) */

    /* Ensure it displays correctly */
    display: inline-block; /* Optional but can sometimes help rendering */
}

/* Optional: Ensure the rest of the H1 text remains white */
.hero h1 {
   color: var(--secondary-color); /* White - should already be set */
   /* Ensure no conflicting color is applied directly to h1 that overrides this */
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* --- Sections (General Styling) --- */
.features, .how-it-works, .pricing, .about-section, .cta-section {
  background: var(--medium-dark-color);
}

section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
  color: var(--primary-color);
}

/* --- Features Specific --- */
.features .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
    justify-content: center; /* Centers the grid tracks */
    justify-items: center; /* Added: Centers items within their grid cell */
}

.features .feature-item {
    background: var(--dark-color); /* Reverted to solid dark for better contrast */
    padding: 25px; /* Slightly increase padding */
    border-radius: 8px;
    border: 1px solid rgba(128, 65, 186, 0.3); /* New subtle border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

.features .feature-item:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 8px 25px rgba(128, 65, 186, 0.3); /* Purple glow shadow */
    border-color: var(--primary-color); /* Make border solid purple */
}

.features .feature-item i { /* Placeholder for icons */
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.features .feature-item h3 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

/* --- How It Works Specific --- */
.how-it-works ol {
    list-style: none;
    counter-reset: step-counter;
    max-width: 800px;
    margin: 0 auto;
}

.how-it-works li {
    counter-increment: step-counter;
    margin-bottom: 20px;
    position: relative;
    padding-left: 50px;
    background: var(--dark-color);
    padding: 15px 15px 15px 50px;
    border-radius: 5px;
}

.how-it-works li::before {
    content: counter(step-counter);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: var(--secondary-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}


/* --- Pricing Specific --- */
.pricing .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    align-items: stretch; /* Make columns equal height if needed */
}

.pricing .price-tier {
    background: var(--dark-color);
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--medium-dark-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing .price-tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(106, 13, 217, 0.3); /* Purple glow */
}

.pricing .price-tier h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.pricing .price-tier .price {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.pricing .price-tier .price span {
    font-size: 1rem;
    font-weight: normal;
    color: var(--light-color);
}

.pricing .price-tier ul {
    list-style: none;
    margin-bottom: 25px;
    text-align: left;
    padding-left: 20px; /* Indent list items */
}

.pricing .price-tier ul li {
    margin-bottom: 10px;
    position: relative; /* For custom bullet */
    padding-left: 25px; /* Space for custom bullet */
}

.pricing .price-tier ul li::before {
    content: '✓'; /* Checkmark */
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* --- Sign Up / Contact Form --- */
.signup-form {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    background: var(--dark-color);
    border-radius: 8px;
}

.signup-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: var(--medium-dark-color);
    color: var(--light-color);
}

.signup-form button {
    width: 100%;
    padding: 12px;
}


/* --- About Page Specific --- */
/* Find this existing rule */

 
.about-content {
    background: var(--dark-color);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px; /* Space between sections */
    overflow: hidden; /* <<< ADD THIS LINE */
}

/* Make sure the headshot style is still present */
.about-content .headshot {
    float: left;
    max-width: 180px; /* Adjust size as needed */
    height: auto;
    border-radius: 50%; /* Makes it circular */
    margin-right: 25px;
    margin-bottom: 15px; /* Ensure some bottom margin too */
    border: 3px solid var(--primary-color); /* Optional border */
}

.about-content h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* --- Footer --- */
footer {
  background: var(--medium-dark-color);
  color: #aaa;
  text-align: center;
  padding: 20px 0;
  margin-top: auto; /* Pushes footer down */
  border-top: 1px solid #444;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
  header .container {
    flex-direction: column;
    text-align: center;
  }

  header nav ul {
    margin-top: 15px;
    flex-direction: column; /* Stack nav items */
    align-items: center;
  }

  header nav ul li {
    margin: 5px 0;
  }

  /* Basic Mobile Menu Toggle Logic (Show hamburger, hide nav) */
  /* header nav { display: none; } */
  /* .menu-toggle { display: block; position: absolute; top: 25px; right: 20px; } */
  /* header.active nav { display: flex; flex-direction: column; width: 100%; background: var(--medium-dark-color); padding: 10px 0;} */


  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .features .grid,
  .pricing .grid {
    grid-template-columns: 1fr; /* Stack grids on mobile */
  }

  section h2 {
      font-size: 2rem;
  }

  .how-it-works li {
      padding-left: 60px; /* Adjust padding for number */
  }
   .how-it-works li::before {
       left: 15px; /* Adjust position */
   }
  
}

/* --- About Page Specific --- */
/* (Add this within the existing About Page section or at the end) */
.about-content .headshot {
    float: left; /* Or use flexbox/grid on the parent for layout */
    max-width: 180px; /* Adjust size as needed */
    height: auto;
    border-radius: 50%; /* Makes it circular */
    margin-right: 25px;
    margin-bottom: 15px;
    border: 3px solid var(--primary-color); /* Optional border */
}

/* Clearfix for floated headshot if needed */
.about-content::after {
    content: "";
    display: table;
    clear: both;
}

/* --- New Styles for Discord Button (to match btn-gradient-signup) --- */
/* Combined with .btn-gradient-signup above */
/*
.btn-discord {
    background-color: #5865F2; / Discord Blurple /
    color: white;
    margin-top: 15px;
}

.btn-discord:hover {
    background-color: #4752C4; / Darker Blurple /
}
*/

/* Add a specific class for disclaimers */
.disclaimer {
    font-size: 0.9rem;
    color: #aaa; /* Lighter grey */
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,0.2); /* Subtle background */
    border-left: 3px solid #ffcc00; /* Warning yellow */
    border-radius: 4px;
}

/* Pricing Table Adjustments */
.pricing .grid {
    /* Keep grid, but maybe center items if fewer than 3 */
     justify-content: center;
}
.pricing .price-tier {
    /* Ensure consistent height if desired */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
}
.pricing .price-tier ul {
    margin-bottom: 25px;
    flex-grow: 1; /* Allow list to take up space */
}

/* Responsive Adjustments for headshot */
@media (max-width: 480px) {
    .about-content .headshot {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        max-width: 150px;
    }
}

/* --- Pre-Header / Top Bar --- */
.pre-header {
    background-color: #111; /* A very dark grey, adjust as needed */
    padding: 5px 0;       /* Small vertical padding */
    /* --- CHANGE THIS LINE --- */
    text-align: right;     /* Align the text to the right */
    border-bottom: 1px solid #333; /* Optional subtle separator */
}

/* Keep the rest of the pre-header styles as they were */
.pre-header p {
    margin: 0; /* Remove default paragraph margin */
    font-size: 0.9rem; /* Slightly smaller font size */
    color: #ccc;       /* Light grey text color, adjust as needed */
    font-weight: bold; /* Make it bold like the example often is */
}

.pre-header .container {
    padding-top: 0;
    padding-bottom: 0;
    /* Important: Ensure the paragraph inside aligns right WITHIN the container */
    /* The text-align: right on .pre-header should achieve this, */
    /* but if not, you could add text-align: right here too. */
}

/* --- Hover Underline/Overline Effect --- */
.hover-underline {
  /* font-size: 2rem; /* Let parent element control font size */
  /* color: #ffffff; /* Let parent element control color, allows nested white span */
  /* position: relative; */ /* Removed, will be positioned by h2 */
  display: inline; /* Changed from inline-block */
  cursor: default; /* Force default arrow cursor */
}

.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px; /* Thickness of the lines */
  /* Use the gradient from the sign-up button */
  background: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); 
  bottom: -5px; /* Position underline below text */
  left: 0;
  transform: scaleX(0);
  transform-origin: right; /* Animation starts from the right for underline */
  transition: transform 0.4s ease-out;
  pointer-events: none; /* Prevent lines from interfering with hover */
  text-align: center;

  /* Add a lighter subtle shadow */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); /* Restored */

  /* Add animation */
  animation: animateTextGradient 10s ease infinite;
  position: relative; /* Added to be positioning context for underline pseudo-elements */
}

.hover-underline::before {
  top: -5px; /* Position overline above text */
  bottom: auto; /* Override the default bottom */
  transform-origin: left; /* Animation starts from the left for overline */
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1); /* Animate to full width on hover */
}

/* Keyframes for animating text gradients */
@keyframes animateTextGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Style for Gradient Headings --- */
.gradient-heading {
    /* Apply a richer, wider gradient for animation */
    background: linear-gradient(
        to right, 
        #AF40FF, /* Bright Purple */
        #8041ba, /* Primary Purple */
        #5B42F3, /* Blue-Purple */
        #4D5BFF, /* Medium Blue */
        #00DDEB, /* Bright Blue */
        #5B42F3, /* Blue-Purple again for smoother loop */
        #AF40FF  /* Bright Purple to loop */
    );
    background-size: 300% auto; /* Make the gradient wider than the text */

    /* Clip the background to the text */
    -webkit-background-clip: text;
    background-clip: text;

    /* Make the text color transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */

    /* Ensure it centers correctly */
    text-align: center;

    /* Add a lighter subtle shadow */
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); */ /* Temporarily removing to test Chrome rendering */

    /* Add animation */
    animation: animateTextGradient 10s ease infinite;
}

/* Override for the white 'Only' span inside gradient headings */
.gradient-heading .only-white {
    /* Override transparency and background clip */
    color: white !important; 
    -webkit-text-fill-color: white !important;
    background: none !important; /* Remove background clipping effect */
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* --- Scroll-Triggered Animation --- */
.scroll-fade-in-up {
  opacity: 0;
  transform: translateY(30px); /* Start slightly lower */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* No animation properties here, transition handles it */
}

.scroll-fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Scroll-Triggered Animation (New) --- */
.scroll-fade-in-left {
  opacity: 0;
  transform: translateX(-30px); /* Start slightly to the left */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0); /* Slide to original position */
}

/* Center last item in 3-column layout on wider screens */
@media (min-width: 992px) { /* Adjust breakpoint if needed */
    .features .grid {
        grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
    }
    .features .grid .feature-item:last-child {
        grid-column-start: 2; /* Place in the middle column */
        justify-self: center; /* Center the item within the middle column cell */
    }
}

/* Style for the "Learn More" sliver section */
.learn-more-sliver {
    /* Use the same animated gradient as the header */
    background: linear-gradient(90deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 200% 200%;
    animation: gradient 5s ease infinite;
    overflow: hidden; /* Good practice with background animations */
}

/* Add gradient separator after hero section */
section.hero {
    position: relative; /* Needed for ::after positioning */
    padding-bottom: 120px; /* Reduced bottom padding */
}

section.hero::after {
    content: '';
    display: block;
    position: absolute; /* Position relative to the hero section */
    bottom: 30px; /* Adjust vertical position */
    left: 50%;
    transform: translateX(-50%); /* Center the line */
    width: 60%; /* Make line shorter than full width */
    max-width: 400px; /* Max width for the line */
    height: 3px; /* Thickness of the line */
    background: linear-gradient(to right, #AF40FF, #5B42F3, #00DDEB); /* Gradient colors */
    border-radius: 2px; /* Optional: slightly rounded ends */
}