:root {
  /* Colors - Consulting Grade */
  /* Primary Accent: Professional Blue - Trustworthy, corporate, tech */
  --color-primary: #0056b3;
  --color-primary-light: #3395ff;
  --color-primary-dark: #003580;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-text-main: #212529;
  --color-text-muted: #6c757d;
  --color-border: #dee2e6;
  --color-surface: #ffffff;

  /* Feedback/Special */
  --color-accent-pop: #e36414;
  /* Subtle highlight if needed */

  /* Typography */
  --font-family-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-header: 'Playfair Display', Georgia, "Times New Roman", serif;
  /* Professional serif for headings */

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Animation */
  --transition-speed: 0.3s;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Container */
  --container-width: 1100px;
}

[data-theme="dark"] {
  --color-primary: #4dade8;
  /* Softer blue for dark mode */
  --color-primary-light: #8cd3ff;
  --color-primary-dark: #2080c0;

  --color-bg: #121212;
  --color-bg-alt: #1e1e1e;
  --color-text-main: #f8f9fa;
  --color-text-muted: #adb5bd;
  --color-border: #495057;
  --color-surface: #1e1e1e;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-family-main);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  transition: background-color var(--transition-speed), color var(--transition-speed);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover,
a:focus {
  color: var(--color-primary-light);
  text-decoration: underline;
}

ul {
  list-style: none;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-header);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
  color: var(--color-text-main);
}

h1 {
  font-size: 3rem;
  font-weight: 700;
}

h2 {
  font-size: 2.25rem;
  margin-bottom: var(--space-md);
  position: relative;
  display: inline-block;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--space-sm);
}

/* Layout Utilities */
.container {
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.section {
  padding: var(--space-lg) 0;
}

.section-alt {
  background-color: var(--color-bg-alt);
}

/* Header & Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
  transition: background-color var(--transition-speed);
}

[data-theme="dark"] .site-header {
  background-color: rgba(18, 18, 18, 0.95);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-family-header);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text-main);
  text-decoration: none;
}

.nav-list {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.nav-link {
  font-weight: 500;
  color: var(--color-text-main);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Components: Theme Toggle */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-main);
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-speed);
}

.theme-toggle:hover {
  background-color: var(--color-bg-alt);
}

.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Components: Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  transition: all var(--transition-speed);
  border: 2px solid var(--color-primary);
}

.btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* Hero Section */
/* Hero Section */
.hero {
  padding: var(--space-xl) 0 var(--space-lg);
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-compact {
  min-height: 30vh;
  padding: var(--space-lg) 0 var(--space-md);
}

.hero-compact .hero-title {
  font-size: 3rem;
}


.hero-content {
  max-width: 800px;
}

.hero-title {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  font-weight: 400;
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Cards (Highlights, Experience) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  border-radius: 8px;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.card h3 {
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

/* Skills Chips */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

.skill-category {
  margin-bottom: var(--space-md);
}

.skill-category h4 {
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-xs);
  display: inline-block;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-speed);
}

.chip:hover {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Footer */
footer {
  text-align: center;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 4rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  .hero-title {
    font-size: 2.75rem;
  }

  .nav-list {
    display: none;
    /* In a real app we'd have a hamburger menu, for now simplistic hiding or vertical stack usually better for MVPs without JS deps. Let's stack them for simple mobile access */
    /* Alternative simple mobile nav: */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg);
    flex-direction: column;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-container {
    flex-wrap: wrap;
  }

  /* Show nav list if we wanted a simple toggle, but for no-JS robust requirements or minimal JS, keeping it simple:
     Let's just let it wrap or stay simple. For "Responsive" mandate, typical solution without heavy JS is sticky footer nav or simple stack. 
     We'll make it naturally stack on very small screens.
  */
  .nav-list {
    display: flex;
    overflow-x: auto;
    width: 100%;
    padding-bottom: var(--space-xs);
    justify-content: flex-start;
    /* scrollable horizontal menu */
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Print Styles */
@media print {

  .site-header,
  .theme-toggle,
  .btn,
  .hero-actions {
    display: none !important;
  }

  body {
    background-color: #fff;
    color: #000;
  }

  .section {
    padding: var(--space-sm) 0;
    page-break-inside: avoid;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  /* Show URLs for printable Resume context if desirable, or keep clean */
  /* a[href]:after {
    content: " (" attr(href) ")";
  } */

  .card {
    border: none;
    padding: 0;
    margin-bottom: var(--space-sm);
    box-shadow: none;
  }
}

/* Custom Additions */
.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.checklist li::before {
  content: "✓";
  color: var(--color-primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Step list for How We Work */
.step-list {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
}

.step-item {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
}

.step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  background-color: var(--color-primary);
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 2.25rem;
  font-weight: bold;
}

.email-cta {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-speed);
}

.email-cta:hover {
  border-bottom-color: var(--color-primary);
  text-decoration: none;
}

.email-cta svg {
  margin-right: 0.5rem;
  width: 1.25em;
  height: 1.25em;
}