/*
  Main stylesheet for the trAIdeSolutions website.
  Follows mobile-first design principles and uses CSS variables for theming.
  Units: Primarily rem for predictable sizing, % and vw for responsive scaling.
  Author: Bucky Harmos & Gemini Assistant
  Date: 2025-04-12
*/

/* Import Google Fonts for consistent typography across browsers */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Merriweather:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap');

/* Custom class for Merriweather font - ensures font settings are applied */
.merriweather-custom {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 400; /* Default weight, can be overridden */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* Force scrollbar visibility always to prevent layout jumps when content changes height */
html {
  overflow-y: scroll;
  /* Set the base font size to 100% so that 1rem = the user's default browser font size, usually 16px. This makes rem units scale with user preferences and improves accessibility across devices. */
  font-size: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Define CSS Custom Properties (variables) for easy theming and maintenance */
:root {
  /* Core color palette reflecting the trAIdeSolutions brand */
  --color-bg: #0F1115; /* Dark background for the main page */
  --color-text: #F0F2F5; /* Light text color for high contrast */
  --color-accent: #0078D4; /* Primary brand blue for interactive elements */
  --color-accent-hover: #005fa3; /* Darker blue for hover states */
  --color-subtext: #9FA6B2; /* Gray for secondary text, less emphasis */
  --color-surface: #1C1F26; /* Slightly lighter dark color for content surfaces/cards */
  --color-highlight: #38BDF8; /* Bright blue for highlighting important elements/titles */
  --color-nav: #353535; /* Distinct dark gray for the navigation bar background */
}

/* Basic Reset: Remove default browser margins and paddings, set box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Body Styles: Set base font, background, text color, and line height */
body {
  font-family: 'Merriweather', serif; /* Default body text font */
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6; /* Improve readability */
  padding: 0 1rem; /* Add some horizontal padding on smaller screens */
  padding-top: 7rem; /* Adjusted for taller mobile navbar */
  /* Fix for whitespace issue - only take up the space needed */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Media query for desktop body padding */
@media (min-width: 768px) {
  body {
    padding-top: 6rem; /* Less padding needed on desktop */
  }
}

/* Heading Styles: Use Poppins font, set base size and margin */
h1, h2, h3 {
  font-family: 'Poppins', sans-serif; /* Use a modern sans-serif for headings for clarity */
  font-weight: 600; /* Semi-bold for emphasis and hierarchy */
  /* Use 1.25rem as a base for h3, will override for h1/h2 below for hierarchy */
  font-size: 1.25rem;
  margin-bottom: 1rem; /* Spacing below headings for separation */
}

/* Specific Heading Sizes (using rem for accessibility and scaling) */
h1 {
  font-size: 2rem; /* Main page title, visually distinct but not overwhelming */
}

h2 {
  font-size: 1.5rem; /* Section heading, clear but not too large */
}

h4 {
  font-family: 'Merriweather', serif; /* Serif for subheadlines for subtlety */
  font-size: 1.125rem; /* Slightly larger than body for sub-section headings */
}

/* Default Paragraph Styles: Set font, size, and color for standard text */
p {
  font-family: 'Merriweather', serif; /* Serif font for body text for readability */
  /* Make all paragraph text a little smaller for a more refined look */
  font-size: 0.95rem; /* Previously: 1rem, now slightly smaller */
  color: var(--color-subtext);
}

ul {
  font-size: 1rem; /* Set default unordered list font size to match paragraphs for visual consistency */
}

/* Monospace font styles for code or technical text */
code, pre, .mono {
  font-family: 'Roboto Mono', monospace; /* Use a monospace font for code clarity */
  font-size: 0.95rem; /* Slightly smaller for code, as is common practice */
}

/* Small text, such as footer or disclaimers */
.small, footer {
  font-size: 0.875rem; /* Smaller font for less important text */
}

/* Link Styles: Set default color and remove underline */
a {
  color: var(--color-accent);
  text-decoration: none;
}

/* Link Hover State: Darken color on hover for visual feedback */
a:hover {
  color: var(--color-accent-hover);
}

/* Enhanced Paragraph Styling: Limit width for readability, add indent */
p {
  max-width: 50rem; /* Optimal line length for reading */
  margin: 1rem auto; /* Center paragraphs with auto margins */
  text-indent: 2em; /* Standard paragraph indentation */
  color: var(--color-subtext);
  font-size: 0.95rem; /* Maintain standard body text size */
}

/* -------------------- */
/* Navigation Bar Styles */
/* -------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--color-nav);
  border-radius: 0.5rem;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-height: 6rem; /* Set minimum height for mobile */
}

/* Mobile-specific styles */
.hamburger-menu {
  display: block; /* Visible on mobile */
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative;
  z-index: 20;
}

.hamburger-menu span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--color-text);
  margin-bottom: 5px;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Mobile logo positioning */
nav .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /* Position logo in center for mobile */
  left: 50%;
  top: 50%; /* Center vertically */
  transform: translate(-50%, -50%); /* Center both horizontally and vertically */
  height: 3rem; /* Increased height */
  width: 10rem;
  margin: 0;
  padding: 0; /* Removed vertical padding in favor of increased element height */
}

/* Navigation logo styling */
#nav-logo {
  height: 2.5rem;
  width: auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 100%;
  transform-origin: left center;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Logo transition effect - fade only, no vertical movement */
#nav-logo.transitioning {
  opacity: 0.3; /* Not fully transparent to avoid complete disappearance */
  transform: scale(0.98); /* Subtle scale effect */
}

/* Mobile Nav Links - hidden by default and shown when active */
.nav-links {
  position: fixed;
  top: 0;
  left: 1rem; /* Align with page padding */
  width: fit-content; /* Size to content */
  height: 0;
  background-color: var(--color-nav);
  background-image: linear-gradient(to bottom, #404040, var(--color-nav)); /* Add subtle gradient */
  overflow: hidden;
  transition: height 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 0.5rem; /* Match the nav bar's radius */
  padding-left: 1.5rem; /* Added: Padding inside the container */
  padding-right: 1.5rem; /* Added: Padding inside the container */
}

.nav-links.active {
  height: auto;
  padding-top: 6rem; /* Increased padding-top to account for taller navbar */
  padding-bottom: 0.5rem; /* Add just a tiny bit of bottom padding */
}

/* Navigation List Items */
nav li {
  display: block; /* Stack vertically on mobile */
  list-style: none;
  padding: 1rem 0; /* Reduced padding for vertical spacing */
  text-align: center;
  font-size: 1.5rem;
}

/* Add divider below each mobile nav item except the last one */
nav li:not(:last-child) {
  border-bottom: 1px solid rgba(159, 166, 178, 0.2); /* Subtle divider using subtext color */
}

/* Ensure last item doesn't have bottom spacing */
nav li:last-child {
  padding-bottom: 0.5rem; /* Tiny bit of padding on the last item */
  margin-bottom: 0; /* No margin on the last item */
}

/* Add hover effect to nav links */
nav a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.2s ease;
  display: block;
  position: relative;
}

/* Create a hover effect for mobile nav links */
nav a:hover {
  color: var(--color-highlight); /* Change color on hover */
  transform: translateY(-2px); /* Slight upward movement on hover */
}

/* Add underline effect on hover */
nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  background-color: var(--color-highlight);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

nav a:hover::after {
  width: 70%; /* Grow underline on hover */
}

/* Active link styling */
nav a.active {
  color: var(--color-highlight);
}

nav a.active::after {
  width: 70%; /* Show underline for active link */
}

/* Hamburger menu active state */
.hamburger-menu.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Enhanced responsive styles for tablet and desktop */
@media (min-width: 768px) {
  /* Hide hamburger on larger screens */
  .hamburger-menu {
    display: none;
  }
  
  nav {
    min-height: 5rem; /* Slightly less height needed on desktop */
    padding: 0.5rem 2.5rem;
    justify-content: space-between; /* Reverted to space-between */
    background-color: var(--color-nav);
    border-radius: 0; /* Remove rounding from nav bar */
  }
  
  /* Reset logo position for desktop */
  nav .logo {
    position: relative;
    left: 0;
    top: auto;
    transform: none;
    width: 14rem;
    height: 3rem;
    padding: 0;
  }
  
  /* Show nav links horizontally on desktop */
  .nav-links {
    position: static;
    height: auto;
    width: auto;
    background-color: transparent;
    background-image: none; /* Remove gradient */
    overflow: visible;
    box-shadow: none;
    padding: 0;
    transition: none;
    border-radius: 0;
    display: flex;
    align-items: center;
  }
  
  /* Horizontal nav items on desktop */
  nav li {
    display: inline-flex;
    align-items: center; /* Vertically center link text within li */
    margin: 0;
    font-size: 1.35rem;
    padding: 0 1.5rem;
    border-bottom: none;
    height: 100%;
    background: transparent;
    box-shadow: none;
  }

  /* Remove vertical dividers between items */
  nav li:not(:last-child) {
    border-bottom: none;
    border-right: none; /* Remove vertical divider */
  }

  /* Customize desktop nav links - keep only text and underline effects */
  nav a {
    position: relative;
    padding: 0.5rem 0;
    color: var(--color-text);
    transition: color 0.3s ease;
    text-decoration: none;
    background: none; /* No background */
    border: none; /* No border */
    box-shadow: none; /* No shadow */
  }
  
  /* Simple highlight effect on hover */
  nav a:hover {
    color: var(--color-highlight);
    transform: none;
  }
  
  /* Clean underline effect - same as mobile */
  nav a::after {
    content: '';
    position: absolute;
    bottom: -4px; /* Position underline below text */
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-highlight);
    transition: width 0.3s ease;
    transform: none;
  }
  
  nav a:hover::after {
    width: 100%; /* Full underline on hover */
  }
  
  /* Active link styling - text highlight and underline only */
  nav a.active {
    color: var(--color-highlight);
    background: none; /* No background */
    border: none; /* No border */
    box-shadow: none; /* No shadow */
  }
  
  nav a.active::after {
    width: 100%; /* Full underline for active link */
  }

  #nav-logo {
    height: 2.75rem;
  }
}

/* -------------------- */
/* Section Base Styles */
/* -------------------- */
section {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 98%;
  padding: 0; /* Remove all padding from sections */
  margin: 0 auto;
}

/* -------------------- */
/* Hero Section Styles */
/* -------------------- */
.hero {
  padding: 2rem 0; /* Increased vertical padding slightly */
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* Minimal gap between elements */
  width: 100%; /* Take full width */
}

.hero-content img {
  max-width: 90%; /* Make logo much larger horizontally */
  height: auto;
  display: block;
  margin-bottom: 2.5rem;
}

/* Container for the hero logo with dark background */
.hero-logo-container {
  /* Solid black background for the logo container */
  background: rgba(0, 0, 0, 0.98); /* 98% black for maximum contrast */
  border-radius: 1rem; /* Rounded corners for a modern look */
  padding: 1.5rem 2.5rem; /* Generous padding around the logo */
  box-shadow: 0 4px 24px rgba(0,0,0,0.5); /* Depth shadow for visual separation */
  display: block; /* Ensures proper block behavior */
  margin-left: auto; /* Center horizontally */
  margin-right: auto;
  margin-bottom: 2.5rem; /* Space below the logo */
  max-width: 90%; /* Responsive width constraint */
}

/* Remove the previous rules that were applied to the image itself */
.hero-content img.hero-logo {
  /* Reset any previously set properties on the image */
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important; /* Remove bottom margin from image */
  max-width: 100% !important; /* Make image fill the container */
}

@media only screen and (max-width: 600px) {
  .hero-content img {
    max-width: 95%; /* Even larger on mobile */
  }
}

/* Primary Call-to-Action Button Styling */
.cta-button {
  /* Display as inline-block so padding and margin work as expected */
  display: inline-block;
  /* Reduce padding for a more reasonable button height and width */
  padding: 0.75rem 1.5rem; /* Previously: 1.125rem 2.25rem */
  /* Reduce font size for a less oversized look, but still readable */
  font-size: 1.1rem; /* Previously: 1.5rem */
  background-color: var(--color-accent); /* Use accent color */
  color: white; /* High contrast text */
  text-decoration: none;
  border-radius: 0.75rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  cursor: pointer;
  border: none; /* Remove default border */
  animation: subtle-pulse 2s infinite; /* Subtle pulse animation */
  transform: translateY(0); /* Base state for hover transform */
}

/* CTA Button Hover State: Darken background, lift slightly */
.cta-button:hover {
  background-color: var(--color-accent-hover); /* Use hover color */
  color: white;
  transform: translateY(-3px); /* Lift button slightly */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Increase shadow */
}

/* CTA Button Active State: Simulate button press */
.cta-button:active {
  transform: translateY(-1px); /* Smaller lift */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow */
}

/* -------------------- */
/* Content Section Padding */
/* -------------------- */
.problem,
.mission,
.founder-note,
.solution-summary { /* Added solution-summary */
  padding: 2rem; /* Standard padding for these content sections */
}

/* -------------------- */
/* Main Content Area Styling */
/* -------------------- */
main {
  /* Only take up the space needed by its content */
  flex: 1 0 auto;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Dark Overlay for Main Content Area */
main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Reduced opacity */
  z-index: -2; /* Position behind the background icon */
}

/* -------------------- */
/* Contact Section Styles (Placeholder & Future) */
/* -------------------- */
.contact-section { /* General container for the contact area */
  background-color: var(--color-surface); /* Use surface color for distinction */
  padding: 4rem 2rem;
  border-radius: 0.5rem;
  margin: 2rem auto;
  max-width: 80rem; /* Limit width for larger screens */
  text-align: center; /* Center the entire contact section */
}

/* General Purpose Container (if needed elsewhere) */
.container {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  /* Ensure containers are always above background gear */
  position: relative;
  z-index: 1;
}

/* Contact Section Heading */
.contact-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-highlight);
}

/* Introductory paragraph for the contact section */
.contact-intro {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.5rem;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  text-indent: 0; /* Override default paragraph indent */
}

/* Flex container for contact info */
.contact-content {
  display: flex;
  justify-content: center; /* Center the single info box */
  align-items: center;
  gap: 2rem;
}

/* Simplified styling for the standalone contact info box */
.contact-content.simplified {
  flex-direction: column; /* Ensure it stacks nicely if needed */
}

.contact-info.standalone {
  flex: none; /* Don't allow it to flex */
  width: auto; /* Let content determine width */
  max-width: 30rem; /* Set a reasonable max width */
  padding: 2rem; /* Adjust padding */
  background-color: rgba(28, 31, 38, 0.8); /* Use a slightly different background */
  text-align: center; /* Center align text inside */
}

/* Contact Information Box */
.contact-info {
  padding: 1.5rem;
  background-color: rgba(15, 17, 21, 0.5); /* Semi-transparent background */
  border-radius: 0.5rem;
  text-align: center; /* Center the contact info */
}

/* Heading within the contact info box */
.contact-info h3 {
  font-size: 1.75rem; /* Slightly larger */
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

/* Styling for individual contact methods (e.g., email, phone) */
.contact-method {
  display: flex;
  align-items: center;
  justify-content: center; /* Center items horizontally */
  margin: 1rem 0;
  flex-direction: column; /* Center the contact methods and make them display as flex columns for alignment */
}

/* Icon styling for contact methods */
.contact-method .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem; /* Center the icon */
  width: 2.5rem; /* Fixed width container */
  height: 2.5rem; /* Fixed height container */
}

/* New style for the icon images */
.contact-method .contact-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Removed filter: invert(1) since icons are already white */
  transition: transform 0.3s ease;
}

/* Add a subtle hover effect to the icons */
.contact-method:hover .contact-icon {
  transform: scale(1.1);
}

/* Text styling for contact methods - now using links */
.contact-method a {
  margin: 0;
  font-size: 1.25rem;
  font-family: 'Poppins', sans-serif;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-method a:hover {
  color: var(--color-accent);
}

/* Ensure the contact section with service-block styling doesn't have a background */
#contact.service-block {
  /* Remove the background that would otherwise come from contact-section */
  background-color: transparent;
  /* Match the spacing of other service blocks */
  padding: 2rem 2rem;
  margin: 2rem auto;
  /* Maintain the proper width constraints */
  max-width: 80rem;
}

/* Style any contact-info boxes inside a service-content div to fit the services styling */
.service-content .contact-info {
  /* Remove additional background to prevent double layering */
  background-color: transparent;
  /* Let it flow naturally within the service-content container */
  width: 100%;
  padding: 0;
  margin-top: 2rem;
  /* Center the entire contact info section */
  text-align: center;
}

/* Adjust contact method styling when inside service-content */
.service-content .contact-method {
  /* Increased spacing between contact methods */
  margin: 2.5rem 0;
  /* Create centered row layout with icon and text side by side */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

/* Icon styling for contact methods within service-content */
.service-content .contact-method .icon {
  /* Restore horizontal layout with proper spacing */
  margin-right: 1rem;
  /* Keep the icon size consistent */
  width: 2.5rem;
  height: 2.5rem;
}

/* Contact method link styling when in service-content */
.service-content .contact-method a {
  /* Make links more visible and prominent */
  font-size: 1.35rem;
  color: var(--color-text);
}

/* Hover effect for contact links */
.service-content .contact-method a:hover {
  color: var(--color-highlight);
  transition: color 0.2s ease;
}

/* Contact content styling to match the screenshot */
.service-content h3 {
  text-align: center;
  font-size: 2rem;
  color: white;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* Container for all contact methods */
.contact-methods {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

/* Individual contact method styling */
.contact-method {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

/* Icon container */
.contact-method .icon {
  display: inline-flex;
  margin-right: 1rem;
  width: 28px;
  height: 28px;
}

/* Icon image */
.contact-method .icon img {
  width: 100%;
  height: 100%;
}

/* Contact links */
.contact-method a {
  color: white;
  font-size: 1.25rem;
  text-decoration: none;
}

.contact-method a:hover {
  color: var(--color-highlight);
}

/* Remove any conflicting styles */
.service-content .contact-method {
  margin: 1rem 0;
}

.service-content .contact-method .icon {
  margin-right: 1rem;
}

.service-content .contact-method a {
  font-size: 1.25rem;
  color: white;
}

/* -------------------- */
/* About Section Styles (Placeholder & Future) */
/* -------------------- */
.about-section { /* Container for the about content */
  padding: 5rem 2rem;
  background-color: var(--color-surface);
  border-radius: 0.75rem;
  margin: 3rem auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Slightly larger shadow */
}

/* Introductory paragraph for the about section */
.about-intro {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 3rem;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  text-indent: 0; /* Override default paragraph indent */
  color: var(--color-subtext);
  line-height: 1.8; /* Increased line height for readability */
}

/* Main content area within the about section */
.about-content {
  display: flex;
  flex-direction: column; /* Stack vertically by default */
  gap: 2rem;
  background-color: rgba(15, 17, 21, 0.5);
  padding: 3rem;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inner shadow */
}

/* Heading within the about text area */
.about-text h3 {
  font-size: 2rem;
  color: var(--color-highlight);
  margin-bottom: 2rem;
  text-align: center;
}

/* Paragraphs within the about text area */
.about-text p {
  text-indent: 0;
  margin-bottom: 2rem;
  line-height: 1.8;
  letter-spacing: 0.01rem; /* Slight letter spacing */
}

/* Styling for feature lists within the about section */
.about-features {
  margin: 2rem 0;
  padding-left: 1.5rem;
}

/* List items within feature lists */
.about-features li {
  color: var(--color-subtext);
  margin-bottom: 1rem;
  font-family: 'Merriweather', serif;
  font-size: 1.3rem;
  padding-left: 0.5rem;
  list-style-type: disc; /* Use standard disc bullets */
}

/* Highlighted text within feature list items */
.about-features strong {
  color: var(--color-highlight);
}

/* -------------------- */
/* Founder Note Section Styles */
/* -------------------- */
.founder-section { /* Similar container style to About section */
  background-color: var(--color-surface);
  padding: 5rem 2rem;
  border-radius: 0.75rem;
  margin: 3rem auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Heading for the founder section */
.founder-section h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-highlight);
  font-size: 2.5rem;
}

/* Content area within the founder section */
.founder-content {
  background-color: rgba(15, 17, 21, 0.5);
  padding: 3rem;
  border-radius: 0.75rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Paragraphs within the founder note */
.founder-content p {
  text-indent: 0;
  margin-bottom: 2rem;
  max-width: 55rem; /* Limit width for readability */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
  letter-spacing: 0.01rem;
}

/* Signature style for the founder note */
.founder-signature {
  text-align: right; /* Align to the right */
  font-style: italic;
  color: var(--color-highlight);
  margin-top: 2rem;
}

/* Responsive Adjustments for About Section (Larger Screens) */
@media (min-width: 768px) {
  .about-content {
    flex-direction: row; /* Arrange items side-by-side */
    align-items: center;
    gap: 4rem; /* Increase gap */
  }

  .about-text {
    flex: 2; /* Text takes more space */
  }
  /* Add specific styling for an image if one exists in .about-content later */
}

/* -------------------- */
/* Services Section Styles (Placeholder & Future) */
/* -------------------- */
.services-section { /* General container for the services area */
  /* Match the opacity of the CTA section for a unified look */
  background-color: rgba(28, 31, 38, 0.9); /* Previously used var(--color-surface) or less opacity */
  padding: 4rem 2rem;
  border-radius: 0.5rem;
  margin: 2rem auto;
  max-width: 80rem;
}

/* Introductory paragraph for the services section */
.services-intro {
  text-align: center;
  margin-bottom: 3rem;
  /* Make the intro paragraph text smaller to match the new site-wide standard */
  font-size: 0.95rem; /* Matches the new body <p> size */
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  text-indent: 0;
  /* Make the intro paragraph text pure white for maximum readability */
  color: #fff;
}

/* Individual Service Block Layout (Advanced Feature) */
.service-block {
  padding: 2rem 2rem;
  margin: 2rem auto;
  position: relative; /* Needed for potential absolute positioning inside */
  max-width: 80rem;
}

/* Container for the service icon (used for alignment and spacing) */
.service-icon-container {
  display: flex;
  justify-content: center;
  align-items: center; /* Center icon vertically within this */
  margin-bottom: 1rem;
  /* Set height to match service-icon height to prevent layout shifts */
  height: min(33vw, 22rem); 
  position: relative; 
  margin-left: auto; 
  margin-right: auto;
}

/* Service Icon Styling (Circular Background) - Returns to original position */
.service-icon {
  /* No longer hidden */
  visibility: visible; 
  background-color: rgba(15, 17, 21, 0.7);
  border-radius: 50%;
  /* Set to 37% of the gear's size to match the inner circle of the gear */
  width: min(33vw, 22rem); 
  height: min(33vw, 22rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 10; /* Initially above content */
  position: relative; /* Relative to its container */
  opacity: 1; /* Initially fully visible */
  /* Add transition for smooth opacity change */
  transition: opacity 0.4s ease-in-out;
}

/* Sticky State for Service Icon (Applied via JavaScript on scroll) */
.service-icon.sticky {
  position: fixed; /* Fix position relative to viewport */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for element dimensions */
  /* Keep the exact same dimensions as non-sticky to avoid jumps */
  width: min(33vw, 22rem); 
  height: min(33vw, 22rem);
  z-index: 1; /* Behind the service content */
  opacity: 0.3; /* Faded out (final state) */
}

/* Image within the Service Icon */
.service-icon img {
  width: 100%; 
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); 
  /* Re-add hover effect if desired */
  transition: transform 0.3s ease; 
}

/* Re-add hover effect if desired */
.service-icon:hover img {
  transform: scale(1.1);
}

/* Content Associated with a Service Icon */
.service-content {
  position: relative; /* Ensure this creates a stacking context */
  z-index: 5; /* Keep content above the sticky icon */
  margin-top: 2rem; 
  background-color: rgba(15, 17, 21, 0.5);
  padding: 3rem;
  border-radius: 0.75rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Heading within the service content */
.service-content h2 {
  color: var(--color-highlight);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Paragraphs within the service content */
.service-content p {
  /* Make the service content paragraphs smaller to match the new site-wide standard */
  font-size: 0.95rem; /* Matches the new body <p> size */
  color: var(--color-text); /* Ensure high contrast (keeps previous intent) */
  text-indent: 0;
  margin-bottom: 2rem;
  max-width: 55rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* Service Features List Styling */
.service-features {
  list-style-position: inside; /* Centers bullets with text */
  padding: 0;
  margin: 2rem auto;
  max-width: 55rem;
  text-align: center;
  /* Set feature list font size to match the standard <p> size for consistency */
  font-size: 0.95rem; /* Matches <p> size */
}

.service-features li {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--color-subtext);
  /* Inherit the 0.95rem font size from .service-features for perfect match with <p> */
}

/* -------------------- */
/* Footer Styles */
/* -------------------- */
footer {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  padding: 2rem 0;
  color: var(--color-subtext);
  font-size: 0.875rem;
}

/* -------------------- */
/* Multi-page Structure (If we revert or add pages later) */
/* -------------------- */
.page-content {
  padding: 2rem 0;
  min-height: auto; /* Changed from 70vh to auto to prevent excess whitespace */
}

/* Page Title */
.page-title {
  color: var(--color-highlight); /* Keeps the title highlighted for brand consistency */
  font-size: 1.875rem; /* Reduced from 2.5rem to 1.875rem (25% smaller) for a less overwhelming appearance */
  margin-bottom: 1.5rem; /* Maintains space below the title for readability */
  text-align: center; /* Ensures the title remains centered */
  /* Keeps the title highlighted for brand consistency */
  /* Reduced from 2.5rem to 1.875rem (25% smaller) for a less overwhelming appearance */
  /* Maintains space below the title for readability */
  /* Ensures the title remains centered */
}

/* -------------------- */
/* Secondary CTA Button Styles */
/* -------------------- */
.secondary-cta {
  display: inline-block;
  /* Reduce padding for a more reasonable button size */
  padding: 0.75rem 1.5rem; /* Previously: 1.125rem 2.25rem */
  /* Reduce font size for a less oversized look, but still readable */
  font-size: 1.1rem; /* Previously: 1.5rem */
  background-color: var(--color-accent); /* Same base color as primary */
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* Secondary CTA Hover State */
.secondary-cta:hover {
  background-color: var(--color-accent-hover);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Secondary CTA Active State */
.secondary-cta:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Container for solution summary CTAs */
.solution-ctas {
  margin-top: 2rem;
  text-align: center;
  /* Add display flex and direction to control button layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* Add space between buttons */
}

/* -------------------- */
/* General CTA Section (Reusable) */
/* -------------------- */
.cta-section {
  /* Increase opacity for a less transparent, more solid CTA background */
  background-color: rgba(28, 31, 38, 0.9); /* Previously: 0.7 */
  padding: 4rem 2rem;
  text-align: center;
  margin-top: 3rem;
  /* Ensure CTA is always above background gear */
  position: relative;
  z-index: 1;
}

/* Heading within a general CTA section */
.cta-section h2 {
  margin-bottom: 2rem;
  max-width: 30rem; /* Limit width */
  margin-left: auto;
  margin-right: auto;
}

/* General list item style (applied globally, adjust if needed) */
li {
  font-family: 'Merriweather', serif;
  /* Force all <li> elements site-wide to match the <p> font size exactly */
  font-size: 0.95rem !important; /* Use !important to override any more specific selectors */
  color: var(--color-subtext);
}

/* -------------------- */
/* Animations */
/* -------------------- */

/* Subtle pulse animation for primary/secondary CTAs */
@keyframes subtle-pulse {
  0% {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Base shadow */
  }
  50% {
    /* Pulse with a hint of accent color */
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
  }
  100% {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Return to base shadow */
  }
}

/* Style for the currently active navigation link */
nav a.active {
  color: var(--color-highlight); /* Use highlight color for active state */
  font-weight: bold;
}

/* Prevent body scrolling when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Background Gear Icon Styling */
#background-icon-container {
  position: fixed;
  top: 7rem; /* Match the body's padding-top for mobile */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Media query to adjust background-icon-container top position for desktop */
@media (min-width: 768px) {
  #background-icon-container {
    top: 6rem; /* Match the body's padding-top for desktop */
  }
}

#centered-icon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Set to a consistent proportion of viewport with a max size */
  width: min(90vw, 60rem);
  height: min(90vw, 60rem); /* Use vw for both dimensions to keep it circular */
  background-image: url('../images/logos/trAIdeSolutionsGraphicOnly.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}

/* Prevent horizontal overflow and force content to stay within the viewport on all devices */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  /* Ensure body takes only the height it needs */
  height: auto;
  min-height: 100%;
  margin: 0;
  padding-bottom: 0;
}