/*
  Theme: 'Як підготувати бізнес до залучення інвестора' (How to Prepare Your Business to Attract Investors)
  Design System: Brutalism
  Color Scheme: Bright
  Animation Style: Parallax
  Fonts: Oswald (headings), Nunito (body)
*/

/* -------------------------------------------------------------------------- */
/*                               CSS Variables                                */
/* -------------------------------------------------------------------------- */
:root {
  --font-primary: 'Oswald', sans-serif;
  --font-secondary: 'Nunito', sans-serif;

  /* Bright Color Scheme with Brutalist Edge */
  --primary-color: #0DCAF0; /* Bright Cyan/Blue */
  --secondary-color: #FFC107; /* Bright Yellow/Amber */
  --accent-color: #FD7E14; /* Bright Orange */
  --cta-bg-color: #00FFFF; /* Cyan as per HTML example for cookie */
  --cta-text-color: #111111; /* Dark text for bright CTA */

  --text-color: #212529; /* Dark Gray, almost black */
  --text-light-color: #FFFFFF;
  --text-muted-color: #555555; /* For subtitles and less prominent text */
  --text-on-primary: #111111; /* Text on primary color buttons/elements */
  --text-on-accent: #FFFFFF; /* Text on accent color buttons/elements */

  --background-color: #FFFFFF;
  --background-alt-color: #F0F3F5; /* Lighter, subtle alternative background */
  --footer-background-color: #1C1C1C; /* Dark footer for contrast */

  --border-color: #000000; /* Black for Brutalist borders */
  --shadow-color: #000000; /* For Brutalist hard shadows */

  --hero-overlay-color: rgba(0, 0, 0, 0.6);

  --section-padding: clamp(3rem, 8vw, 6rem) 0; /* Vertical padding for sections */
  --container-padding: 0 1.5rem; /* Horizontal padding for containers */
  --card-padding: 1.5rem;
  --brutalist-border: 2px solid var(--border-color);
  --brutalist-shadow: 5px 5px 0px var(--shadow-color);

  --header-height: 80px; /* Adjust as needed */
}

/* -------------------------------------------------------------------------- */
/*                             Global Reset & Base                            */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* Base for rem units */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-secondary);
  font-size: clamp(1rem, 1.5vw, 1.125rem); /* Adaptive base font size */
  line-height: 1.7;
  color: var(--text-color);
  background-color: var(--background-color);
  overflow-x: hidden; /* Prevent horizontal scroll from AOS or other elements */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

/* -------------------------------------------------------------------------- */
/*                                 Typography                                 */
/* -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: var(--text-color); /* Default heading color */
  text-transform: uppercase; /* Brutalist style */
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); } /* Section titles */
h3 { font-size: clamp(1.4rem, 3vw, 2rem); } /* Card titles, etc. */
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); } /* Footer headings */

p {
  margin-bottom: 1.5rem;
  color: var(--text-color); /* Ensure paragraphs have good contrast */
}

.section-title {
  text-align: center;
  margin-bottom: 1.5rem; /* Space before subtitle or content */
  color: #222222; /* Darker for emphasis as per requirement */
}

.section-subtitle {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted-color);
  margin-bottom: 3rem; /* Space before content grid/elements */
  font-family: var(--font-secondary);
  font-weight: 400;
  text-transform: none;
}

/* -------------------------------------------------------------------------- */
/*                               Layout Helpers                               */
/* -------------------------------------------------------------------------- */
.main-container {
  width: 100%;
  overflow: hidden; /* For AOS and parallax */
}

.container {
  width: 100%;
  max-width: 1200px; /* Standard container width */
  margin-left: auto;
  margin-right: auto;
  padding: var(--container-padding);
}

.content-wrapper { /* For sections with text content that needs to be readable */
  max-width: 960px; /* Narrower for text blocks */
  margin-left: auto;
  margin-right: auto;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -1rem; /* For consistent spacing */
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 1rem;
}

.column.is-two-thirds {
  flex: none;
  width: 66.6666%;
}
.column.is-one-third {
  flex: none;
  width: 33.3333%;
}


/* -------------------------------------------------------------------------- */
/*                           Global Component Styles                          */
/* -------------------------------------------------------------------------- */

/* General Button Styles (applied to .cta-button, button, input[type="submit"]) */
.cta-button,
button,
input[type="submit"],
.submit-button {
  display: inline-block;
  padding: 0.8em 1.8em;
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: var(--brutalist-border);
  background-color: var(--cta-bg-color); /* Bright cyan */
  color: var(--cta-text-color); /* Dark text */
  transition: all 0.3s ease-in-out;
  box-shadow: 3px 3px 0px var(--border-color); /* Simpler shadow for buttons */
}

.cta-button:hover,
button:hover,
input[type="submit"]:hover,
.submit-button:hover {
  background-color: var(--accent-color);
  color: var(--text-on-accent);
  box-shadow: 5px 5px 0px var(--border-color);
  transform: translate(-2px, -2px); /* Slight lift effect */
}

/* Cards */
.card {
  background-color: var(--background-color);
  border: var(--brutalist-border);
  box-shadow: var(--brutalist-shadow);
  overflow: hidden; /* Ensures content respects borders */
  display: flex;
  flex-direction: column;
  text-align: center; /* Center content within card */
  height: 100%; /* For consistent height in grids/flex containers */
}

.card-image { /* Container for image */
  width: 100%;
  overflow: hidden;
  position: relative; /* For potential overlays */
}

.card-image img {
  width: 100%;
  height: 100%; /* Fill the container */
  object-fit: cover;
  display: block;
}

/* Specific height for card images in features, projects, etc. */
.feature-card .card-image,
.project-card .card-image {
  height: 250px; /* As per HTML image dimensions */
}

.team-card .card-image {
  width: 100%; /* Image container should span width */
  height: 300px; /* As per HTML, or make it responsive */
  max-width: 300px; /* Limit image container size if needed */
  margin: 0 auto; /* Center the image container if it's narrower than card */
}

.team-card .card-image img {
    border-radius: 50%; /* Circular team member photos */
    width: 150px; /* Fixed size for team member photo */
    height: 150px;
    margin: 1rem auto; /* Spacing and centering */
    object-fit: cover;
    border: var(--brutalist-border);
}


.card-content {
  padding: var(--card-padding);
  flex-grow: 1; /* Allows content to fill remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title, .project-title, .team-name {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin-bottom: 0.5rem;
  color: #222222; /* Darker title as per HTML */
}

.team-title {
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: var(--primary-color); /* Accent color for title */
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-transform: none;
}

.card p {
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  margin-bottom: 0; /* Remove default p margin if card has own padding */
  color: #333333;
}

/* Image container (general utility if needed) */
.image-container {
  margin: 1rem 0; /* Default margin */
  border: var(--brutalist-border);
  overflow: hidden; /* Clip image if it overflows */
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Read More Links */
.read-more-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5em 1em;
  background-color: var(--accent-color);
  color: var(--text-on-accent);
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  border: var(--brutalist-border);
  transition: all 0.3s ease;
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
}

.read-more-link:hover {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--border-color);
}


/* -------------------------------------------------------------------------- */
/*                              Header & Navigation                           */
/* -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--background-color);
  padding: 0 1.5rem;
  border-bottom: var(--brutalist-border);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--header-height);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-color);
  text-decoration: none;
  text-transform: uppercase;
}
.logo:hover {
  color: var(--primary-color);
}

.main-navigation .nav-list {
  display: flex;
  align-items: center;
}

.main-navigation .nav-list li {
  margin-left: clamp(1rem, 3vw, 2rem);
}

.main-navigation .nav-list a {
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: var(--text-color);
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.5em 0;
  position: relative;
}

.main-navigation .nav-list a:hover,
.main-navigation .nav-list a.active {
  color: var(--primary-color);
}

.main-navigation .nav-list a::after { /* Underline effect for hover/active */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.main-navigation .nav-list a:hover::after,
.main-navigation .nav-list a.active::after {
  width: 100%;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown-toggle::after { /* Add arrow to dropdown toggle */
  content: ' ▼';
  font-size: 0.7em;
  margin-left: 0.3em;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--background-color);
  border: var(--brutalist-border);
  box-shadow: var(--brutalist-shadow);
  z-index: 1001;
  min-width: 180px; /* Adjust as needed */
  padding: 0.5rem 0;
}

.dropdown:hover .dropdown-menu,
.dropdown-toggle:focus + .dropdown-menu, /* Accessibility */
.dropdown-menu:hover {
  display: block;
}

.dropdown-menu li {
  margin-left: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1.5rem;
  white-space: nowrap;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
}
.dropdown-menu a:hover {
  background-color: var(--background-alt-color);
  color: var(--primary-color);
}
.dropdown-menu a::after { /* Remove main nav underline effect from dropdown items */
    display: none;
}


/* Mobile Menu Toggle (Burger) */
.menu-toggle {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1002;
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--text-color);
  position: relative;
  transition: transform 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--text-color);
  transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Active state for burger */
.menu-toggle.active .hamburger {
  background-color: transparent; /* Middle bar disappears */
}
.menu-toggle.active .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.menu-toggle.active .hamburger::after {
  bottom: 0;
  transform: rotate(-45deg);
}


/* -------------------------------------------------------------------------- */
/*                               Hero Section                                 */
/* -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  color: var(--text-light-color);
  padding: clamp(8rem, 20vh, 15rem) 0; /* More vertical padding */
  padding-top: calc(var(--header-height) + clamp(4rem, 10vh, 7rem)); /* Adjust top padding for fixed header */
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Parallax effect - simple version */
  /* background-attachment: fixed; /* Can cause issues on mobile, test thoroughly */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-overlay-color); /* Dark overlay for text contrast */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(2.5rem, 7vw, 5rem); /* Larger for hero */
  color: var(--text-light-color); /* Explicitly white as per requirement */
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Ensure readability */
}

.hero-subtitle {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--text-light-color); /* Explicitly white */
  margin-bottom: 2.5rem;
  font-family: var(--font-secondary);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  text-transform: none; /* Subtitles usually not uppercase */
}

.hero-section .cta-button {
  padding: 1em 2.5em;
  font-size: clamp(1rem, 2vw, 1.2rem);
  background-color: var(--accent-color); /* Distinct CTA color */
  color: var(--text-on-accent);
  border: 2px solid var(--border-color);
}

.hero-section .cta-button:hover {
  background-color: var(--secondary-color);
  color: var(--text-color); /* Dark text on yellow */
}

.parallax-shape { /* Placeholder for JS parallax elements */
  position: absolute;
  /* Styling will be controlled by JS or specific design for these elements */
  /* Example: */
  /* width: 150px; height: 150px; background: rgba(255,255,255,0.1); z-index: 0; */
}


/* -------------------------------------------------------------------------- */
/*                            General Section Styles                          */
/* -------------------------------------------------------------------------- */
.section {
  padding: var(--section-padding);
}
.section:first-of-type { /* First section after hero */
    padding-top: var(--section-padding);
}

/* Remove top padding for sections immediately after hero if hero has enough bottom padding */
#hero + .section {
    /* padding-top: 0; /* Or a smaller value if needed */
}

.alt-background {
  background-color: var(--background-alt-color);
  border-top: var(--brutalist-border);
  border-bottom: var(--brutalist-border);
}

/* -------------------------------------------------------------------------- */
/*                           Specific Section Styles                          */
/* -------------------------------------------------------------------------- */

/* About Us, Mission, Vision, History */
#about-us .column:first-child, /* Assuming text is in first column */
#mission .column:last-child, /* Assuming text is in last column */
#vision .column:first-child,
#history .content-wrapper > div > p { /* Direct paragraphs in history */
    text-align: left; /* Align text to left for readability in columns */
}

#about-us .image-container img,
#mission .image-container img,
#vision .image-container img,
#history .image-container img {
    object-fit: cover;
    height: 400px; /* Match HTML specified height */
}

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

/* Team Section */
.team-carousel {
  display: flex;
  overflow-x: auto;
  gap: 2rem;
  padding-bottom: 1rem; /* For scrollbar or aesthetics */
  /* Hide scrollbar if JS handles navigation */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.team-carousel::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }

.team-card {
  flex: 0 0 auto; /* Don't grow or shrink, use specified width */
  width: 300px; /* Or responsive width like calc( (100% / 3) - 1.33rem) for 3 items with 2rem gap */
  /* background-color: var(--background-color); already in .card */
}

/* Projects Section */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Partners Section */
.partners-carousel {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens if not a true carousel */
  justify-content: center;
  align-items: center;
  gap: 3rem; /* Increased gap for logos */
}

.partner-logo img {
  max-height: 75px; /* As per HTML attributes */
  width: auto;
  filter: grayscale(100%); /* Brutalist/minimalist look */
  opacity: 0.7;
  transition: all 0.3s ease;
}

.partner-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* External Resources Section */
.resource-list {
  display: grid;
  gap: 1.5rem;
}

.resource-item {
  border: var(--brutalist-border);
  padding: 1.5rem;
  background-color: var(--background-color);
  box-shadow: 3px 3px 0px var(--shadow-color);
}

.resource-item h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.resource-item h3 a {
  color: var(--primary-color);
}
.resource-item h3 a:hover {
  color: var(--accent-color);
}
.resource-item p {
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: var(--text-muted-color);
  margin-bottom: 0;
}

/* Contact Section */
.contact-form {
  max-width: 700px;
  margin: 2rem auto 0 auto;
  background-color: var(--background-color);
  padding: 2rem;
  border: var(--brutalist-border);
  box-shadow: var(--brutalist-shadow);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: var(--text-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 0.8em 1em;
  font-family: var(--font-secondary);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  border: var(--brutalist-border);
  background-color: var(--background-alt-color); /* Slight contrast for fields */
  color: var(--text-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color-translucent, rgba(13, 202, 240, 0.3)); /* Focus ring */
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form .submit-button {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                                Footer Styles                               */
/* -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--footer-background-color);
  color: #CCCCCC; /* Light text on dark background */
  padding: 4rem 0 2rem 0;
  border-top: var(--brutalist-border);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column p,
.footer-column li {
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  margin-bottom: 0.5rem;
  color: #CCCCCC;
}

.footer-heading {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: var(--text-light-color);
  margin-bottom: 1rem;
}

.footer-links li a,
.footer-social-links li a {
  color: #CCCCCC;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links li a:hover,
.footer-social-links li a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.footer-social-links li {
    margin-bottom: 0.5em;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #444; /* Subtle separator */
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  color: #AAAAAA;
}

/* -------------------------------------------------------------------------- */
/*                             Page Specific Styles                           */
/* -------------------------------------------------------------------------- */

/* Success Page */
body.page-success { /* Add class="page-success" to body of success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--background-alt-color);
}
.success-message-container {
    background-color: var(--background-color);
    padding: clamp(2rem, 5vw, 4rem);
    border: var(--brutalist-border);
    box-shadow: var(--brutalist-shadow);
    max-width: 600px;
}
.success-message-container h1 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.success-message-container p {
    margin-bottom: 2rem;
    color: var(--text-color);
}
.success-message-container .cta-button {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}
.success-message-container .cta-button:hover {
    background-color: var(--accent-color);
    color: var(--text-on-accent);
}


/* Privacy & Terms Pages */
/* Add class="page-privacy" or "page-terms" to body of respective pages */
body.page-privacy .main-content-area,
body.page-terms .main-content-area {
    padding-top: calc(var(--header-height) + 3rem); /* Ensure content below fixed header */
    padding-bottom: 3rem; /* Add some bottom padding */
    min-height: calc(100vh - var(--header-height) - 150px); /* Approx footer height */
}

body.page-privacy .main-content-area .container,
body.page-terms .main-content-area .container {
    max-width: 800px; /* Narrower for text-heavy pages */
}

body.page-privacy .main-content-area h1,
body.page-terms .main-content-area h1 {
    margin-bottom: 2rem;
    text-align: center;
}
body.page-privacy .main-content-area h2,
body.page-terms .main-content-area h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                               Media Queries                                */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .column.is-two-thirds, .column.is-one-third {
    width: 100%;
    flex: none;
  }
  .columns {
    display: block; /* Stack columns */
  }
  .column {
    width: 100% !important;
    margin-bottom: 1rem; /* Space between stacked columns */
  }
   /* Forcing images in columns to be above text on mobile when order is image-text */
  .columns.reverse-on-mobile {
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 768px) {
  .site-header {
    padding: 0 1rem;
  }
  .menu-toggle {
    display: block; /* Show burger */
  }
  .main-navigation .nav-list {
    display: none; /* Hide nav list by default */
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--background-color);
    border-top: var(--brutalist-border);
    border-bottom: var(--brutalist-border);
    padding: 1rem 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }
  .main-navigation .nav-list.active {
    display: flex; /* Show when active */
  }
  .main-navigation .nav-list li {
    margin: 0;
    width: 100%;
    text-align: center;
  }
  .main-navigation .nav-list a {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--background-alt-color);
  }
  .main-navigation .nav-list li:last-child a {
    border-bottom: none;
  }
  .main-navigation .nav-list a::after { /* Remove underline effect on mobile nav items */
    display: none;
  }

  /* Dropdown on mobile */
  .dropdown-menu {
    position: static; /* Unset absolute positioning */
    box-shadow: none;
    border: none;
    border-top: 1px dashed var(--background-alt-color);
    width: 100%;
    padding-left: 1rem; /* Indent dropdown items */
  }
  .dropdown-menu a {
    padding: 0.75rem 1.5rem;
  }


  .hero-section {
    padding: 6rem 0;
    padding-top: calc(var(--header-height) + 3rem);
  }
  .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
  .hero-subtitle { font-size: clamp(1rem, 4vw, 1.3rem); }

  .footer-content {
    grid-template-columns: 1fr; /* Stack footer columns */
    text-align: center;
  }
  .footer-column {
    margin-bottom: 2rem;
  }
}

/* AOS Animations - ensure elements are initially hidden if needed by AOS */
[data-aos] {
  /* Example: could add opacity: 0; transform: translateY(20px);
     AOS handles this, but good for fallback or if JS fails */
}