/* --- Base Styles & Variables --- */
:root {
  --background: #2e3440;
  --text-main: #eceff4;
  --accent-green: #8fbcbb;
  --accent-coral: #d08770;
  --accent-purple: #b48ead;
  --card-background: #3b4252;
  --border-color: #4c566a;
  
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background); 
  color: var(--text-main); 
  font-family: var(--font-body);
  font-weight: 400; 
  line-height: 1.7; 
  -webkit-font-smoothing: antialiased; 
  overflow-x: hidden;
}

/* --- Typography & Links --- */
h1, h2, h3, h4, h5 { 
  font-family: var(--font-heading); 
  font-weight: 700; 
  line-height: 1.2; 
  color: var(--text-main);
}
p { margin-bottom: 1rem; color: #d8dee9; }
a { color: var(--accent-green); text-decoration: none; }
a:hover { color: var(--accent-coral); text-decoration: none; }
strong { font-weight: 700; color: var(--accent-green); }

/* --- Header --- */
.site-header {
  position: sticky; top: 0; z-index: 1000; 
  background-color: rgba(46, 52, 64, 0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color); 
  padding: 1rem 1.5rem; 
  display: flex;
  justify-content: flex-start; 
  align-items: center;
}
.brand-block-link { text-decoration: none; color: inherit; }
.brand-block { text-align: left; }
.logo { font-size: 2rem; margin: 0; line-height: 1; color: var(--text-main); }
.tagline {
  font-family: var(--font-body); 
  font-weight: 400; 
  font-size: 0.75rem;
  letter-spacing: 1.5px; 
  color: var(--accent-green); 
  text-transform: uppercase; 
  margin: 0.25rem 0 0;
}

/* --- Main Content Sections --- */
.content-section { padding: 4rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.content-section:last-of-type { border-bottom: none; }
.bg-dark { background-color: rgba(0,0,0,0.1); }
.section-header { 
  text-align: center; 
  margin-bottom: 3rem; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto; 
}
.section-header h3 { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--text-main);}

/* --- Intro Panel --- */
.intro-panel { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 2rem; 
  max-width: 1200px; 
  margin: 0 auto; 
}
.intro-card { 
  background-color: var(--card-background); 
  border: 1px solid var(--border-color); 
  padding: 2rem; 
  border-radius: 8px; 
}
.intro-card h4 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--accent-green); }
.intro-card p { color: #d8dee9; }

/* --- Detailed Info Section --- */
.detailed-info-section { max-width: 900px; margin-left: auto; margin-right: auto; }
.profile-details h4 {
    font-size: 1.8rem;
    color: var(--accent-green);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.profile-details h4:first-child { margin-top: 0; }
.profile-details ul { list-style: none; padding-left: 0; }
.profile-details li {
    font-size: 1rem;
    color: #d8dee9;
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 1rem;
}
.profile-details li::before {
    content: '»';
    position: absolute;
    left: 0;
    color: var(--accent-coral);
    font-weight: 700;
}
.profile-details p { font-size: 1.1rem; }

/* --- Links Grid --- */
.links-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 1.5rem; 
  max-width: 1200px; 
  margin: 0 auto; 
}
.link-card {
  background-color: var(--card-background); 
  border: 1px solid var(--border-color); 
  padding: 2rem 1.5rem;
  min-height: 120px;
  border-radius: 8px;
  text-align: center; 
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.link-card:hover { 
  background-color: var(--accent-green); 
  border-color: var(--accent-green); 
}
.link-card .link-card-title, .link-card .link-card-subtitle {
  transition: color 0.3s ease;
}
.link-card:hover .link-card-title, .link-card:hover .link-card-subtitle {
  color: var(--background);
}
.link-card-title {
  font-family: var(--font-heading);
  font-weight: 700; 
  font-size: 1.2rem; 
  color: var(--text-main);
}
.link-card-subtitle {
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.5rem;
  color: var(--accent-coral);
  max-width: 90%;
}


/* --- Contact Section / Mission Quote --- */
.contact-section { padding-top: 5rem; padding-bottom: 5rem; }
.mission-quote { max-width: 800px; margin: 0 auto; text-align: center; }
.mission-quote blockquote { border: none; padding: 0; margin: 0; }
.mission-quote p { font-size: 1.2rem; font-style: italic; color: var(--text-main); line-height: 1.6; margin: 0; }
.cta-button {
  display: inline-block; 
  background-color: var(--accent-coral); 
  color: var(--background);
  padding: 1.2rem 3rem; 
  border-radius: 5px; 
  font-weight: 700; 
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px; 
  transition: background-color 0.3s ease; 
  text-decoration: none; 
  font-size: 1rem;
  margin-top: 2.5rem;
}
.cta-button:hover { background-color: var(--accent-purple); color: var(--text-main); }

/* --- Footer --- */
.site-footer { 
  background-color: #242933; 
  color: #a3b0cc; 
  font-size: 0.9rem; 
  padding: 2rem 1.5rem; 
  text-align: center; 
  border-top: 1px solid var(--border-color); 
}
.footer-bottom { padding-top: 2rem; }
.footer-nav { margin-bottom: 1rem; }
.footer-nav a { margin: 0 1rem; color: #a3b0cc; }
.footer-nav a:hover { color: var(--accent-green); }