/* --- General Styles & Variables --- */
:root {
  /* Updated Colors - Closer to LinkedIn Palette */
  --primary-color: #0073b1;
  /* LinkedIn Blue */
  --primary-hover-color: #005a8c;
  --secondary-color: #e6e9ec;
  /* Light grey for outlines/backgrounds */
  --secondary-hover-color: #d1d5db;
  --secondary-border-color: #b0b7c0;
  --success-color: #28a745;
  --success-hover-color: #1e7e34;
  --text-color: #202124;
  /* Darker grey text */
  --text-light-color: #5f6368;
  /* Lighter grey text */
  --text-on-primary: #ffffff;
  /* Text on dark backgrounds */
  --background-color: #ffffff;
  --section-background-color: #f8f9fa;
  /* Slightly off-white for sections */
  --modal-overlay-color: rgba(0, 0, 0, 0.6);
  --modal-background-color: #ffffff;
  --border-color: #dce0e3;
  --border-radius: 4px;
  /* Slightly less rounded */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  /* Softer shadow */
  --box-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.12);
  --transition-speed: 0.2s;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* --- Navbar Styles --- */
.navbar {
  background-color: var(--background-color);
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
  position: sticky;
  /* Make it stick */
  top: 0;
  z-index: 900;
  /* Below modal */
}

.navbar-container {
  max-width: 1100px;
  /* Wider container for navbar */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
}

/* --- Hero Section Styles --- */
.hero {
  /* Placeholder gradient - replace with background-image if you have one */
  background: linear-gradient(135deg, rgba(230, 240, 255, 0.8), rgba(240, 245, 255, 0.9));
  /* Removed example image */
  background-color: #eef4ff;
  /* Fallback background */
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  /* Adjust padding if needed */
  min-height: auto;
  /* Let content dictate height */
  overflow: hidden;
  /* Prevent image overflow if absolutely positioned */
  /* text-align: left; --- Removed: Now handled by inner container/content */
  /* display: flex; --- Removed */
  /* align-items: center; --- Removed */
  box-sizing: border-box;
  /* Ensure padding is included */
}

/* Container inside the hero to align content block */
.hero-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  /* Keep relative positioning if needed */
  padding-left: 20px;
  /* Keep padding */
  padding-right: 20px;
  box-sizing: border-box;
  /* Use Flexbox for layout */
  display: flex;
  align-items: center;
  /* Vertically align text and image */
  justify-content: space-between;
  /* Space out text and image */
  gap: 40px;
  /* Add gap between text and image */
}

.hero-content {
  /* Adjust width - make it take up roughly half */
  flex: 1 1 55%;
  /* Allow growing/shrinking, base width 55% */
  max-width: 550px;
  /* Max width for text block */
  text-align: left;
  padding-right: 20px;
  /* Add some space before image */
  box-sizing: border-box;
}

/* NEW: Container for the image */
.hero-image-container {
  flex: 1 1 40%;
  /* Allow growing/shrinking, base width 40% */
  max-width: 450px;
  /* Control max image size */
  text-align: center;
  /* Center image if container is wider */
  display: block;
  /* Default: show on desktop */
}

.hero-image {
  max-width: 100%;
  /* Make image responsive */
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  /* Remove extra space below image */
  margin: 0 auto;
  /* Center image within its container */
  border-radius: 8px;
  /* Optional: slight rounding */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  /* Optional: subtle shadow */
}

.hero h1 {
  font-size: 2.8em;
  font-weight: 400;
  color: var(--text-color);
  margin-bottom: 15px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.2em;
  color: var(--text-light-color);
  margin-bottom: 30px;
}

.hero .btn-primary {
  margin-bottom: 15px;
  /* Space below button */
}

.hero-terms {
  font-size: 0.8em;
  color: var(--text-light-color);
}

.hero-terms a {
  color: var(--primary-color);
  text-decoration: none;
}

.hero-terms a:hover {
  text-decoration: underline;
}


/* --- General Content Container --- */
.container {
  max-width: 960px;
  /* Standard width for content below hero */
  margin: 60px auto;
  padding: 0 20px;
  /* Only horizontal padding */
  text-align: center;
}

/* --- Header (Now used for sections below hero if needed) --- */
.header h1 {
  /* Style for section headers */
  font-size: 2.5em;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 40px;
}

/* Remove old general tagline/description styles as they are in hero */
.tagline,
.description {
  /* No general styling needed here anymore */
  /* Specific styling is within .hero p */
  margin: 0;
  /* Reset margins */
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  /* Slightly smaller padding */
  font-size: 1em;
  /* Standard size */
  font-weight: 600;
  /* Bolder text */
  border: 1px solid transparent;
  /* Base border */
  border-radius: var(--border-radius);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-speed) ease;
  text-align: center;
  line-height: 1.5;
}

.btn:hover {
  transform: translateY(-1px);
  /* Subtle lift */
  box-shadow: var(--box-shadow-hover);
}

.btn-primary {
  color: var(--text-on-primary);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
}

/* Secondary button style (like LinkedIn header button) */
.btn-secondary {
  color: var(--primary-color);
  background-color: transparent;
  border-color: var(--primary-color);
}

.btn-secondary:hover {
  background-color: rgba(0, 115, 177, 0.05);
  /* Very subtle blue background */
  border-color: var(--primary-hover-color);
  color: var(--primary-hover-color);
}


.btn-success {
  /* Keep success for modal submit */
  color: var(--text-on-primary);
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.btn-success:hover {
  background-color: var(--success-hover-color);
  border-color: var(--success-hover-color);
}

/* --- Footer --- */
.footer {
  margin-top: 80px;
  font-size: 0.9em;
  color: var(--text-muted-color);
  border-top: 1px solid var(--border-color);
  padding: 30px 20px;
  text-align: center;
  background-color: var(--section-background-color);
  /* Light background for footer */
}

/* --- Modal Styles (Mostly unchanged, inherit new vars) --- */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--modal-overlay-color);
  opacity: 0;
  transition: opacity var(--transition-speed) ease-in-out;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.modal-content {
  background-color: var(--modal-background-color);
  padding: 40px;
  /* Increase padding */
  border: none;
  border-radius: var(--border-radius);
  /* Use global border-radius */
  width: 90%;
  max-width: 420px;
  /* Slightly adjust max-width */
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  /* Refined shadow */
  position: relative;
  transform: scale(0.95);
  transition: transform var(--transition-speed) ease-in-out;
}

.modal.active .modal-content {
  transform: scale(1);
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 10px;
  /* Reduce space below heading */
  color: var(--text-color);
  font-size: 1.6em;
  /* Slightly smaller heading */
  font-weight: 600;
}

.modal-content p {
  margin-bottom: 20px;
  /* Adjust spacing */
  color: var(--text-light-color);
  font-size: 1em;
  /* Standard text size */
  line-height: 1.5;
}

.modal-input {
  width: 100%;
  /* Make input full width */
  box-sizing: border-box;
  /* Include padding/border in width */
  padding: 12px 15px;
  /* Adjust padding */
  margin-bottom: 15px;
  /* Space below input */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1em;
  font-family: var(--font-family);
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  appearance: none;
  /* Remove default OS styling */
}

.modal-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 115, 177, 0.15);
  /* Softer focus ring */
  outline: none;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  /* Adjust position */
  right: 15px;
  color: var(--text-light-color);
  /* Lighter close button */
  font-size: 28px;
  /* Adjust size */
  font-weight: normal;
  /* Lighter weight */
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-speed) ease;
  background: none;
  border: none;
  padding: 0;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
  color: var(--text-color);
  text-decoration: none;
}

/* Style the submit button within the modal */
.modal-content .btn-success {
  width: 100%;
  /* Make button full width */
  padding: 12px 20px;
  /* Adjust padding */
  margin-top: 5px;
  /* Add slight space above button */
  font-size: 1.05em;
}

.modal-error {
  color: #dc3545;
  font-size: 0.9em;
  margin-top: 10px;
  /* Add space above error */
  margin-bottom: 0;
  /* Remove space below error */
  min-height: 1.2em;
  /* Reserve space even when hidden */
  display: none;
  text-align: left;
  /* Align error text left */
}

/* --- Success Message Specific Styles --- */
/* Reuse container for padding/width, add specific class */
.success-message {
  padding: 60px 20px;
  /* Add padding to the message area */
  text-align: center;
}

.success-message h2 {
  color: var(--success-color);
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 15px;
}

.success-message p {
  font-size: 1.1em;
  color: var(--text-light-color);
}

/* --- Responsive --- */
@media (max-width: 992px) {

  /* Adjust breakpoint if needed */
  .hero-container {
    gap: 20px;
    /* Reduce gap */
  }

  .hero-content {
    flex-basis: 60%;
  }

  .hero-image-container {
    flex-basis: 35%;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 40px 20px;
    /* Adjust padding */
  }

  .hero-container {
    flex-direction: column;
    /* Stack text and image vertically */
    text-align: center;
    /* Center align container content */
    padding-left: 15px;
    /* Adjust padding */
    padding-right: 15px;
  }

  .hero-content {
    text-align: center;
    /* Center text */
    max-width: 100%;
    /* Allow text full width */
    flex-basis: auto;
    /* Reset flex basis */
    padding-right: 0;
    /* Remove padding */
    margin-bottom: 30px;
    /* Add space below text */
  }

  /* Hide image container on smaller screens */
  /* OR style it differently if you want to show it */
  .hero-image-container {
    display: none;
    /* Hide the image on smaller screens */
    /* Alternatively, style it to appear below text: */
    /* flex-basis: auto; */
    /* max-width: 80%; */
    /* margin: 0 auto; */
  }

  /* ... other responsive styles ... */
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 2em;
  }

  .modal-content {
    padding: 25px 20px;
  }
}