/* style.css */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
  /* Monochrome Palette with a Single Strong Accent */
  --color-background-dark: #0d0d0d;    /* Deepest black for primary background */
  --color-background-medium: #1a1a1a;  /* Dark grey for secondary backgrounds */
  --color-background-light: #262626;   /* Lighter grey for subtle contrasts */
  --color-surface: #1f1f1f;          /* Surface color for cards, modals */
  --color-border: #333333;           /* Borders, dividers */

  --color-text-primary: #e0e0e0;     /* Off-white for main text, high readability */
  --color-text-secondary: #a0a0a0;   /* Softer grey for less important text */
  --color-text-headings: #ffffff;    /* Pure white for strong headings */
  --color-text-darker: #111111;     /* For light backgrounds (not primary in this theme) */

  --color-accent: #00ffff;           /* Bright Cyan - Futuristic & Biomorphic Accent */
  --color-accent-darker: #00cccc;    /* Darker shade of accent for hovers */
  --color-accent-transparent: rgba(0, 255, 255, 0.1); /* For subtle glows/shadows */

  /* Fonts */
  --font-primary: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-headings: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2.5rem;   /* 40px */
  --spacing-xxl: 4rem;    /* 64px */

  /* Borders & Shadows */
  --border-radius-small: 5px;
  --border-radius-medium: 10px; /* More rounded for biomorphic */
  --border-radius-large: 20px;  /* Significant rounding for distinct elements */
  --box-shadow-soft: 0 4px 15px var(--color-accent-transparent);
  --box-shadow-card: 0 8px 25px rgba(0, 0, 0, 0.4);
  --text-shadow-subtle: 1px 1px 3px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-speed-fast: 0.2s;
  --transition-speed-medium: 0.35s;
  --transition-easing: cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth, professional easing */

  /* Header Height */
  --header-height: 70px;
}

/*--------------------------------------------------------------
# Global Styles & Resets
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%; /* 16px default */
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-background-dark);
  color: var(--color-text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Barba.js page transitions */
.barba-leave-active,
.barba-enter-active {
  transition: opacity var(--transition-speed-medium) var(--transition-easing), 
              transform var(--transition-speed-medium) var(--transition-easing);
}
.barba-leave { opacity: 1; transform: translateY(0) scale(1); }
.barba-leave-to { opacity: 0; transform: translateY(15px) scale(0.98); }
.barba-enter { opacity: 0; transform: translateY(15px) scale(0.98); }
.barba-enter-to { opacity: 1; transform: translateY(0) scale(1); }

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  color: var(--color-text-headings);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-weight: 800; /* Manrope bold */
  line-height: 1.2;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Subtle depth for titles */
}

h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); } /* Responsive font size */
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }

p {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-secondary);
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-speed-fast) var(--transition-easing), 
              opacity var(--transition-speed-fast) var(--transition-easing);
}
a:hover, a:focus {
  color: var(--color-text-headings);
  opacity: 0.85;
  text-decoration: none; /* Often cleaner in modern designs */
}
strong, b {
    font-weight: 500; /* Rubik medium or bold */
    color: var(--color-text-primary);
}

/*--------------------------------------------------------------
# Layout & Container
--------------------------------------------------------------*/
.container {
  width: 100%;
  max-width: 1280px; /* Slightly wider for modern layouts */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.content-section {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
  position: relative; /* For pseudo-elements if needed */
}

.alt-bg {
  background-color: var(--color-background-medium);
  /* Consider subtle patterns or gradients for alt backgrounds */
  /* background-image: linear-gradient(135deg, var(--color-background-medium) 0%, var(--color-background-light) 100%); */
}

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  font-weight: 800;
  color: var(--color-text-headings);
  position: relative;
  padding-bottom: var(--spacing-md);
}
.section-title::after {
  content: '';
  display: block;
  width: 70px;
  height: 4px;
  background: var(--color-accent);
  margin: var(--spacing-sm) auto 0;
  border-radius: var(--border-radius-small);
  box-shadow: 0 0 10px var(--color-accent-transparent);
}

.section-title-sub {
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-headings);
  text-align: left;
}
.section-title-sub.text-center {
    text-align: center;
}

.section-intro {
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.text-center { text-align: center; }

/*--------------------------------------------------------------
# Buttons - GLOBAL STYLES
--------------------------------------------------------------*/
.cta-button, button, input[type="submit"], input[type="button"] {
  display: inline-block;
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--color-background-dark);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-darker));
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-medium);
  border: none; /* Use box-shadow for depth */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-speed-fast) var(--transition-easing), 
              box-shadow var(--transition-speed-fast) var(--transition-easing);
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.25), 0 1px 3px rgba(0,0,0,0.3);
  outline: none;
  letter-spacing: 0.5px;
}

.cta-button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.cta-button:focus, button:focus, input[type="submit"]:focus, input[type="button"]:focus {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 7px 20px rgba(0, 255, 255, 0.35), 0 2px 5px rgba(0,0,0,0.4);
  color: var(--color-background-dark); /* Ensure text color remains consistent */
}

.cta-button-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  box-shadow: none;
}
.cta-button-secondary:hover, .cta-button-secondary:focus {
  background: var(--color-accent-transparent);
  color: var(--color-text-headings); /* Brighter text on hover */
  border-color: var(--color-accent);
  box-shadow: 0 0 15px var(--color-accent-transparent);
}

/*--------------------------------------------------------------
# Forms - GLOBAL STYLES
--------------------------------------------------------------*/
.form-group {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-background-light); /* Darker input fields */
  color: var(--color-text-primary);
  border-radius: var(--border-radius-medium);
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: border-color var(--transition-speed-fast) var(--transition-easing), 
              box-shadow var(--transition-speed-fast) var(--transition-easing);
}

.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface); /* Slightly lighter on focus */
  box-shadow: 0 0 0 3px var(--color-accent-transparent), 0 0 10px var(--color-accent-transparent) inset;
}

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

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
  background-color: rgba(13, 13, 13, 0.8); /* Darker base for glassmorphism */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: var(--header-height);
  transition: background-color var(--transition-speed-medium) var(--transition-easing),
              box-shadow var(--transition-speed-medium) var(--transition-easing);
  border-bottom: 1px solid rgba(51, 51, 51, 0.5); /* Subtle bottom border */
}

.site-header.scrolled {
    background-color: rgba(10, 10, 10, 0.9);
    box-shadow: 0 3px 15px rgba(0,0,0,0.3);
}

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

.logo-link { text-decoration: none; }
.logo-text {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--color-text-headings);
  margin: 0;
  transition: color var(--transition-speed-fast) var(--transition-easing), 
              transform var(--transition-speed-fast) var(--transition-easing);
  letter-spacing: 0.5px;
}
.logo-link:hover .logo-text {
    color: var(--color-accent);
    transform: scale(1.03);
}

.main-nav .nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.main-nav .nav-list li { margin-left: var(--spacing-lg); }
.main-nav .nav-link {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-small);
  transition: color var(--transition-speed-fast) var(--transition-easing), 
              background-color var(--transition-speed-fast) var(--transition-easing);
  position: relative;
  letter-spacing: 0.3px;
}
.main-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px; /* Adjusted position */
    left: 50%;
    background-color: var(--color-accent);
    border-radius: 1px;
    transition: width var(--transition-speed-medium) var(--transition-easing), 
                left var(--transition-speed-medium) var(--transition-easing);
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .nav-link:focus {
  color: var(--color-accent);
}
.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after,
.main-nav .nav-link:focus::after {
  width: calc(100% - (2 * var(--spacing-md))); /* Adjust width based on padding */
  left: var(--spacing-md);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  z-index: 1001;
  position: relative; /* For custom burger icon */
  width: 30px;
  height: 24px;
}
.hamburger {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--color-text-headings);
  border-radius: var(--border-radius-small);
  top: 50%;
  transform: translateY(-50%);
  transition: transform var(--transition-speed-medium) var(--transition-easing), 
              background-color var(--transition-speed-medium) var(--transition-easing);
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-text-headings);
  border-radius: var(--border-radius-small);
  transition: transform var(--transition-speed-medium) var(--transition-easing), 
              top var(--transition-speed-medium) var(--transition-easing) 0.1s, 
              bottom var(--transition-speed-medium) var(--transition-easing) 0.1s;
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

.nav-toggle.active .hamburger { background-color: transparent; }
.nav-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; }
.nav-toggle.active .hamburger::after { transform: rotate(-45deg); bottom: 0; }

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
  position: relative;
  color: var(--color-text-headings);
  padding: 150px 0 var(--spacing-xxl) 0; /* Increased top padding */
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden; /* For potential parallax or morphing background elements */
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0.65) 0%, rgba(13, 13, 13, 0.85) 70%, var(--color-background-dark) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
}
.hero-title {
  color: var(--color-text-headings);
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  margin-bottom: var(--spacing-lg);
}
.hero-subtitle {
  color: var(--color-text-primary); /* Slightly softer than title for hierarchy */
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
  margin-bottom: var(--spacing-xl);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}
.hero-content .cta-button {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

/*--------------------------------------------------------------
# Page Title Section
--------------------------------------------------------------*/
.page-title-section {
    position: relative;
    padding: 100px 0;
    margin-top: var(--header-height);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}
.page-title-section .hero-overlay {
    background: linear-gradient(rgba(13, 13, 13, 0.75), rgba(13, 13, 13, 0.95));
}
.page-main-title {
    position: relative;
    z-index: 2;
    color: var(--color-text-headings);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
main[data-barba-namespace="privacy"] .content-section,
main[data-barba-namespace="terms"] .content-section,
main[data-barba-namespace="about"] .content-section:not(:first-child) {
    padding-top: var(--spacing-xl); /* Standard padding if not first section after banner */
}
/* Ensure first content section on subpages has enough space from header if no banner */
main[data-barba-namespace="privacy"] .content-section:first-of-type,
main[data-barba-namespace="terms"] .content-section:first-of-type {
    padding-top: calc(var(--header-height) + var(--spacing-xxl));
}
.legal-text h3 { margin-top: var(--spacing-xl); }
.legal-text ul { padding-left: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.legal-text ul li { margin-bottom: var(--spacing-sm); }

/*--------------------------------------------------------------
# Cards (Global Styling)
--------------------------------------------------------------*/
.card {
  background-color: var(--color-surface);
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-card);
  padding: var(--spacing-lg);
  transition: transform var(--transition-speed-medium) var(--transition-easing), 
              box-shadow var(--transition-speed-medium) var(--transition-easing);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border); /* Subtle border for cards */
}
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 20px var(--color-accent-transparent);
}
.card-image {
  width: 100%;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* STROGO requirement */
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto; /* STROGO requirement */
  transition: transform var(--transition-speed-medium) var(--transition-easing);
}
.card:hover .card-image img { transform: scale(1.08); }
.card-content {
  text-align: center; /* STROGO requirement */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.card-content .card-title {
  color: var(--color-text-headings);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
}
.card-content p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}
.card-content .cta-button,
.card-content .resource-link {
    margin-top: auto;
    align-self: center;
}

/*--------------------------------------------------------------
# Mission Section
--------------------------------------------------------------*/
.mission-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}
.mission-image-container img {
  width: 100%;
  max-width: 550px;
  height: auto;
  border-radius: var(--border-radius-large);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: block;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .mission-content { grid-template-columns: 1.2fr 0.8fr; } /* Text slightly more space */
  .mission-image-container img { margin: 0 0 0 auto; }
}

/*--------------------------------------------------------------
# News Section (Timeline)
--------------------------------------------------------------*/
.news-timeline { position: relative; max-width: 850px; margin: 0 auto; }
.news-timeline::after {
  content: ''; position: absolute; width: 3px;
  background-color: var(--color-border); top: 0; bottom: 0;
  left: 50%; margin-left: -1.5px; border-radius: var(--border-radius-small);
}
.timeline-item {
  padding: var(--spacing-md) var(--spacing-xl); position: relative;
  background-color: transparent; width: 50%;
}
.timeline-item:nth-child(odd) { left: 0; padding-right: calc(var(--spacing-xl) + 25px); text-align: right; }
.timeline-item:nth-child(even) { left: 50%; padding-left: calc(var(--spacing-xl) + 25px); text-align: left; }
.timeline-icon {
  position: absolute; width: 30px; height: 30px;
  background-color: var(--color-accent); border: 4px solid var(--color-background-dark);
  top: 25px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px var(--color-accent-transparent);
}
.timeline-item:nth-child(odd) .timeline-icon { right: -15px; }
.timeline-item:nth-child(even) .timeline-icon { left: -15px; }
.animated-icon { font-size: 0.9rem; color: var(--color-background-dark); }
.timeline-content.card {
  padding: var(--spacing-lg);
  /* No individual hover effect needed if card itself has it */
}
.timeline-content .card-title { font-size: 1.6rem; }
.timeline-content .card-date { font-size: 0.9rem; color: var(--color-accent); margin-bottom: var(--spacing-sm); font-weight: 500; }

@media screen and (max-width: 768px) {
  .news-timeline::after { left: 15px; }
  .timeline-item { width: 100%; padding-left: calc(var(--spacing-xl) + 25px); padding-right: var(--spacing-md); left: 0 !important; text-align: left !important; }
  .timeline-item .timeline-icon { left: 0 !important; }
}

/*--------------------------------------------------------------
# Behind the Scenes Section
--------------------------------------------------------------*/
.bts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--spacing-xl);
}
.bts-item.card .card-image { height: 280px; } /* Specific height for BTS */

/*--------------------------------------------------------------
# Clientele/Testimonials Section
--------------------------------------------------------------*/
.testimonial-slider { position: relative; overflow: hidden; max-width: 750px; margin: 0 auto; }
.testimonial-slider .slide.card {
  background-color: var(--color-background-light);
  padding: var(--spacing-xl);
  text-align: center;
  border-color: var(--color-accent-transparent); /* Subtle accent border */
}
.testimonial-slider .card-image { /* Avatar container */
  width: 100px; height: 100px; border-radius: 50%;
  margin: 0 auto var(--spacing-lg) auto;
  border: 3px solid var(--color-accent); overflow: hidden;
  box-shadow: 0 0 15px var(--color-accent-transparent);
}
.testimonial-slider .testimonial-avatar { width: 100%; height: 100%; object-fit: cover; }
.testimonial-slider .card-content p { font-style: italic; font-size: 1.1rem; margin-bottom: var(--spacing-md); color: var(--color-text-primary); }
.testimonial-slider .card-content cite { font-weight: 700; color: var(--color-accent); display: block; font-size: 1rem; }

/*--------------------------------------------------------------
# Community Section
--------------------------------------------------------------*/
.community-content { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: center; }
.community-image-container img {
  width: 100%; max-width: 550px; height: auto; border-radius: var(--border-radius-large);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); display: block; margin: 0 auto;
}
.community-links { margin-top: var(--spacing-lg); }
.social-link-community {
  display: inline-flex; align-items: center; margin-right: var(--spacing-lg); margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-surface);
  border-radius: var(--border-radius-medium); color: var(--color-accent);
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-speed-fast) var(--transition-easing), color var(--transition-speed-fast) var(--transition-easing), transform var(--transition-speed-fast) var(--transition-easing);
}
.social-link-community .animated-icon { margin-right: var(--spacing-sm); color: var(--color-accent); transition: color var(--transition-speed-fast) var(--transition-easing); }
.social-link-community:hover {
  background-color: var(--color-accent); color: var(--color-background-dark); text-decoration: none; transform: translateY(-2px);
}
.social-link-community:hover .animated-icon { color: var(--color-background-dark); }
@media (min-width: 992px) {
  .community-content { grid-template-columns: 0.8fr 1.2fr; } /* Image smaller, text larger */
  .community-image-container img { margin: 0 auto 0 0; }
}

/*--------------------------------------------------------------
# External Resources Section
--------------------------------------------------------------*/
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--spacing-lg);
}
.resource-card.card { text-align: left; }
.resource-card .card-content { text-align: left; }
.resource-card .card-title { font-size: 1.3rem; margin-bottom: var(--spacing-sm); }
.resource-card p {
  font-size: 0.9rem; margin-bottom: var(--spacing-md);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; min-height: calc(0.9rem * 1.65 * 3);
}
.resource-card .resource-link { margin-top: auto; align-self: flex-start; }

/*--------------------------------------------------------------
# Contact CTA Section
--------------------------------------------------------------*/
.contact-cta-section p { max-width: 650px; }

/*--------------------------------------------------------------
# Contact Page Specifics
--------------------------------------------------------------*/
.contact-container { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xxl); }
.contact-info .section-title-sub, .contact-form-container .section-title-sub { text-align: left; }
.contact-details p { margin-bottom: var(--spacing-sm); display: flex; align-items: center; }
.contact-details .animated-icon { margin-right: var(--spacing-sm); color: var(--color-accent); font-size: 1.3rem; }
.social-contact { margin-top: var(--spacing-lg); }
.social-contact h4 { margin-bottom: var(--spacing-md); font-size: 1.3rem; }
.social-icon-link img { transition: transform 0.2s ease, filter 0.2s ease; margin-right: var(--spacing-md); filter: grayscale(30%) contrast(120%); }
.social-icon-link:hover img { transform: scale(1.15); filter: grayscale(0%) contrast(100%) drop-shadow(0 0 8px var(--color-accent)); }
.contact-form .form-submit-button { width: auto; padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
@media (min-width: 992px) { .contact-container { grid-template-columns: minmax(auto, 0.8fr) minmax(auto, 1.2fr); } }
.faq-section .section-title { text-align: center; }
.faq-item {
  background-color: var(--color-surface); padding: var(--spacing-lg); margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-medium); border-left: 5px solid var(--color-accent);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.faq-item h4 { font-size: 1.35rem; color: var(--color-text-headings); margin-bottom: var(--spacing-sm); }
.faq-item p { color: var(--color-text-secondary); margin-bottom: 0; }

/*--------------------------------------------------------------
# About Page Specifics (Team Section)
--------------------------------------------------------------*/
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-xl);
}
.team-member.card { text-align: center; }
.team-member .card-image {
  width: 160px; height: 160px; border-radius: 50%;
  margin: 0 auto var(--spacing-lg) auto; border: 4px solid var(--color-accent);
  box-shadow: 0 0 20px var(--color-accent-transparent);
}
.team-member .card-image img { border-radius: 50%; }
.team-member .card-content .card-title { font-size: 1.5rem; margin-bottom: var(--spacing-xs); }
.team-member .team-role { font-size: 0.95rem; color: var(--color-accent); font-weight: 500; margin-bottom: var(--spacing-sm); display: block; }
.team-member .card-content p:not(.team-role) { font-size: 0.9rem; }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
  background-color: var(--color-background-medium); color: var(--color-text-secondary);
  padding: var(--spacing-xl) 0; border-top: 2px solid var(--color-border);
}
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--spacing-xl); }
.site-footer h4 {
  color: var(--color-text-headings); font-size: 1.3rem; margin-bottom: var(--spacing-md);
  position: relative; padding-bottom: var(--spacing-sm);
}
.site-footer h4::after {
  content: ''; display: block; width: 35px; height: 3px;
  background: var(--color-accent); margin-top: var(--spacing-xs);
  border-radius: 1px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: var(--spacing-sm); }
.footer-link {
  color: var(--color-text-secondary); text-decoration: none;
  transition: color var(--transition-speed-fast) var(--transition-easing), padding-left var(--transition-speed-fast) var(--transition-easing);
}
.footer-link:hover, .footer-link:focus { color: var(--color-accent); padding-left: var(--spacing-xs); }
.footer-social p { margin-bottom: var(--spacing-sm); }
.social-text-link { font-weight: 500; }
.social-text-link:hover { text-decoration: underline; color: var(--color-text-headings); }
.footer-legal {
  grid-column: 1 / -1; text-align: center; margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border);
}
.footer-legal p { font-size: 0.9rem; margin-bottom: var(--spacing-xs); }

/*--------------------------------------------------------------
# Modals
--------------------------------------------------------------*/
.modal {
  display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%;
  overflow: auto; background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  align-items: center; justify-content: center;
}
.modal.active { display: flex; }
.modal-content {
  background-color: var(--color-surface); margin: auto; padding: var(--spacing-xl);
  border: 1px solid var(--color-border); width: 90%; max-width: 550px;
  border-radius: var(--border-radius-large); box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  position: relative; animation: modal-appear 0.3s var(--transition-easing);
  text-align: center;
}
.modal-content h3 { color: var(--color-text-headings); margin-bottom: var(--spacing-lg); }
.modal-content p { color: var(--color-text-secondary); }
@keyframes modal-appear { from { transform: translateY(20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.close-button {
  color: var(--color-text-secondary); position: absolute; top: var(--spacing-md); right: var(--spacing-lg);
  font-size: 2rem; font-weight: bold; transition: color var(--transition-speed-fast) var(--transition-easing), transform var(--transition-speed-fast) var(--transition-easing);
}
.close-button:hover, .close-button:focus { color: var(--color-accent); transform: rotate(90deg) scale(1.1); text-decoration: none; cursor: pointer; }
.app-store-links { display: flex; justify-content: center; gap: var(--spacing-lg); margin: var(--spacing-lg) 0; }
.app-store-button img { height: 50px; width: auto; transition: transform 0.2s ease, filter 0.2s ease; filter: brightness(0.9); }
.app-store-button:hover img { transform: scale(1.05); filter: brightness(1.1) drop-shadow(0 0 5px var(--color-accent-transparent)); }

/*--------------------------------------------------------------
# Success Page
--------------------------------------------------------------*/
body[data-barba-namespace="success"] { display: flex; flex-direction: column; min-height: 100vh; }
main[data-barba-namespace="success"] { flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.success-page.content-section {
  padding-top: 0; padding-bottom: 0; /* Remove default padding */
  /* min-height is handled by body/main flex */
  margin-top: 0; /* Remove header offset as it's centered now */
}
.success-icon-container img { margin-bottom: var(--spacing-xl); filter: drop-shadow(0 0 15px var(--color-accent)); width: clamp(100px, 20vw, 150px); }
.success-page .section-title { margin-bottom: var(--spacing-md); }
.success-page p { max-width: 550px; margin-bottom: var(--spacing-xl); }

/*--------------------------------------------------------------
# Read More Link Style (Utility)
--------------------------------------------------------------*/
.read-more-link {
  display: inline-flex; align-items: center; font-family: var(--font-headings); font-weight: 700;
  color: var(--color-accent); text-decoration: none; padding: var(--spacing-xs) 0; position: relative;
  transition: color var(--transition-speed-fast) var(--transition-easing), letter-spacing var(--transition-speed-fast) var(--transition-easing);
}
.read-more-link::after {
  content: '→'; margin-left: var(--spacing-xs);
  transition: transform var(--transition-speed-fast) var(--transition-easing); display: inline-block;
}
.read-more-link:hover, .read-more-link:focus { color: var(--color-text-headings); letter-spacing: 0.5px; }
.read-more-link:hover::after, .read-more-link:focus::after { transform: translateX(5px); }

/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .main-nav .nav-list {
    display: none; flex-direction: column; position: absolute;
    top: var(--header-height); left: 0; width: 100%;
    background-color: var(--color-background-medium);
    padding: var(--spacing-md) 0; box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    border-top: 1px solid var(--color-border);
  }
  .main-nav .nav-list.active { display: flex; }
  .main-nav .nav-list li { margin: 0; width: 100%; text-align: center; }
  .main-nav .nav-link { display: block; padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
  .main-nav .nav-list li:last-child .nav-link { border-bottom: none; }
  .main-nav .nav-link::after { display: none; } /* Remove underline for mobile nav items */
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 767px) {
  :root {
    --spacing-md: 0.9rem; --spacing-lg: 1.3rem;
    --spacing-xl: 2rem; --spacing-xxl: 3rem;
    --header-height: 60px; /* Smaller header on mobile */
  }
  .container { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
  .mission-content, .community-content, .contact-container,
  .bts-grid, .resources-grid, .team-grid, .footer-container {
    grid-template-columns: 1fr;
  }
  .mission-image-container img, .community-image-container img { margin: 0 auto var(--spacing-lg) auto; }
  .contact-info, .contact-form-container { text-align: center; }
  .contact-info .section-title-sub, .contact-form-container .section-title-sub,
  .site-footer h4 { text-align: center; }
  .site-footer h4::after { margin-left: auto; margin-right: auto; }
  .contact-details p { justify-content: center; }
  .social-contact { text-align: center; }
  .main-nav .nav-list { top: 60px; /* Match smaller header height */ }
  .page-title-section { margin-top: 60px; padding: 60px 0; }
  main[data-barba-namespace="privacy"] .content-section:first-of-type,
  main[data-barba-namespace="terms"] .content-section:first-of-type {
      padding-top: calc(60px + var(--spacing-xxl));
  }
}

/* ScrollReveal animations - basic fade-in, JS will apply */
.sr-hidden { visibility: hidden; }

html,body{
  overflow-x: hidden;
}