/* Root variables */
:root {
  --bg-color: #071619;
  --accent-color: #3ec5c5;
  --text-color: #ffffff;
  --font-family: 'Helvetica Neue', sans-serif;
  --section-bg-darker: #0a1a22;
  --section-bg-lighter: #112530;
}

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--bg-color);
}
body.modal-open { overflow: hidden; } /* Prevent background scroll when modal is open */

/* ======================================== */
/* Hero Section                           */
/* ======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  background-image: url('assets/background.png');
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
  display: flex;
  flex-direction: column;
  padding: 2rem;
  overflow: hidden;
}
.hero-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}
.hero-logo {
  height: 4rem; /* Adjusted height */
  object-fit: contain;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding-left: 0;
}
.nav-links a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--accent-color); }

.hero-content {
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  z-index: 2;
  max-width: 50%;
}
.hero-content h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; }
.hero-subtitle {
  font-size: 1.1rem; color: #a0b0b5; max-width: 600px;
  line-height: 1.6; margin-top: 0.5rem; margin-bottom: 2rem;
}
.cta-button {
  padding: 0.75rem 1.5rem; border: 2px solid var(--accent-color);
  background: transparent; color: var(--accent-color); font-size: 1rem;
  cursor: pointer; transition: background 0.3s, color 0.3s;
  text-decoration: none; display: inline-block; margin-top: 1rem;
}
.cta-button:hover { background: var(--accent-color); color: var(--bg-color); }

.hero-robot {
  position: absolute; bottom: 0; right: 1rem; max-height: 85vh;
  width: auto; max-width: 50%; pointer-events: none; z-index: 1;
}

/* ======================================== */
/* White Paper Section                      */
/* ======================================== */
.whitepaper-section {
    background-color: #0f222a;
    padding: 2rem 2rem;
    color: #fff;
    border-top: 1px solid rgba(62, 197, 197, 0.1);
    border-bottom: 1px solid rgba(62, 197, 197, 0.1);
}
.whitepaper-content {
    display: flex; /* Enables side-by-side layout by default */
    align-items: left;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allows stacking when space is limited */
}
.whitepaper-graphic-area {
    flex: 0 0 200px; /* Fixed width, doesn't grow/shrink */
    text-align: center;
}
.whitepaper-thumbnail-placeholder {
    width: 160px; height: 160px; border: 1px solid rgba(62, 197, 197, 0.3);
    border-radius: 0.5rem; margin: 0 auto 1rem auto; display: flex;
    align-items: center; justify-content: center; background-color: rgba(17, 37, 48, 0.5);
    padding: 1rem;
}
.glowing-circle {
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(62,197,197,0.5) 0%, rgba(62,197,197,0.1) 60%, rgba(62,197,197,0) 75%);
    box-shadow: 0 0 15px rgba(62, 197, 197, 0.3), inset 0 0 10px rgba(62, 197, 197, 0.2);
}
.whitepaper-graphic-area h4 {
    font-size: 0.9rem; color: var(--accent-color); letter-spacing: 0.5px;
    line-height: 1.4; text-transform: uppercase; margin-top: 0.5rem;
}
.whitepaper-text-area {
    flex: 1; /* Takes remaining space */
    min-width: 300px; /* Prevents getting too narrow before wrapping */
}
.whitepaper-text-area h2 { font-size: 2.2rem; margin-bottom: 1rem; color: #fff; }
.whitepaper-text-area p { font-size: 1rem; color: #b0c0c5; line-height: 1.7; margin-bottom: 1.5rem; max-width: 600px; }
.whitepaper-button { /* Styles specific to the whitepaper button */
    padding: 0.8rem 2rem; background-color: var(--accent-color);
    color: var(--bg-color); border: none; font-weight: 600;
    border-radius: 4px; margin-right: 1rem;
    /* Inherits general .cta-button styles like cursor, transition */
}
.whitepaper-button:hover {
    background-color: #5ce0e0; color: #071619;
    transform: translateY(-2px);
    /* Inherits transform transition */
}
.pdf-direct-link { margin-top: 1.5rem; font-size: 0.9rem; }
.pdf-direct-link a { color: #a0b0b5; text-decoration: underline; transition: color 0.2s; }
.pdf-direct-link a:hover { color: var(--accent-color); }

/* ======================================== */
/* Generic Section Title                    */
/* ======================================== */
.section-title { font-size: 2.5rem; color: #fff; margin-bottom: 3rem; text-align: center; }
.section-title i { margin-right: 0.5rem; color: var(--accent-color); }

/* ======================================== */
/* Solutions Section                      */
/* ======================================== */
.solutions-section { display: none; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.5s ease-out, max-height 0.5s ease-out, padding 0.5s ease-out; padding: 0 2rem; background: var(--section-bg-darker); border-top: 1px solid rgba(62, 197, 197, 0.1); }
.solutions-section.visible { display: block; opacity: 1; max-height: 5000px; padding: 4rem 2rem; }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.solution-item { background: var(--section-bg-lighter); padding: 2rem; border-radius: 0.75rem; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
.solution-item:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(62, 197, 197, 0.15); }
.solution-item h3 { color: #fff; margin: 1rem 0 0.5rem 0; font-size: 1.2rem; }
.solution-item p { color: #a0b0b5; font-size: 0.95rem; line-height: 1.6; }
.solution-item .solution-image { width: 100%; max-width: 200px; height: 150px; object-fit: cover; border-radius: 0.5rem; margin-bottom: 1rem; display: block; }

/* ======================================== */
/* Features Section                       */
/* ======================================== */
.features-section { padding: 4rem 2rem; background: var(--section-bg-darker); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.feature-item { background: var(--section-bg-lighter); padding: 1.5rem; border-radius: 0.75rem; /* REMOVED overflow: hidden; */ transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
.feature-item img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 1rem; }
.feature-item h3 { color: #fff; margin-bottom: 0.5rem; font-size: 1.1rem; }
.feature-desc { color: #a0b0b5; font-size: 0.9rem; line-height: 1.5; opacity: 1; visibility: visible; display: block; /* Ensure visible */ }
.clickable-card { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border: 1px solid transparent; }
.clickable-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(62, 197, 197, 0.15); border-color: rgba(62, 197, 197, 0.5); }

/* Subscribe Section */
.subscribe-section {
    background: var(--section-bg-darker); /* Keep background */
    padding: 4rem 2rem;
    text-align: center;
    color: #fff;
    border-top: 1px solid rgba(62, 197, 197, 0.1);
}
.subscribe-section h2 {
    font-size: 2rem;
    margin-bottom: 2.5rem; /* Increased space below title */
    font-weight: 600; /* Slightly bolder title */
}

/* Form Layout - MODIFIED */
.subscribe-form {
    display: flex; /* Use Flexbox */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Align items vertically */
    gap: 1rem; /* Space between elements */
    max-width: 600px; /* ** Constrain the max width of the form ** */
    margin: 1.5rem auto 0 auto; /* Center the form block itself */
}

/* Visually hide labels but keep for screen readers */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Inputs - MODIFIED */
.subscribe-form input[type="text"],
.subscribe-form input[type="email"] {
    padding: 0.85rem 1.2rem; /* Slightly adjusted padding */
    border: none; /* ** Remove border ** */
    border-radius: 0.5rem; /* ** More rounded corners ** */
    font-size: 1rem;
    background: #112530; /* Dark background */
    color: #fff;
    flex-grow: 1; /* Allow inputs to grow */
    min-width: 200px; /* Prevent inputs from becoming too small */
    /* Remove width: 100% if present */
}
.subscribe-form input::placeholder {
  color: #7a8a90;
}
.subscribe-form input:focus {
  outline: none;
  /* Optional: Add subtle focus ring */
  box-shadow: 0 0 0 2px rgba(62, 197, 197, 0.4);
}

/* Button - MODIFIED */
.subscribe-form button {
    padding: 0.85rem 2rem; /* Match input padding height, adjust width */
    background: var(--accent-color);
    border: none;
    border-radius: 0.5rem; /* Match input rounding */
    color: #071619; /* Dark text */
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    /* ** Force button onto new line and center ** */
    flex-basis: 100%; /* Take full width of flex line to force wrap */
    margin-top: 1rem; /* Add space above the button */
    max-width: 200px; /* ** Set a max-width for the button itself ** */
    /* Remove grid-column, justify-self if present */
    /* Center button since flex-basis is 100% */
    margin-left: auto;
    margin-right: auto;
}
.subscribe-form button:hover {
    transform: translateY(-2px);
    background-color: #5ce0e0;
}

/* Form Status Messages */
.form-status-message { margin-top: 1.5rem; min-height: 1.2em; font-weight: 500; font-size: 0.95rem; }
.form-status-message.submitting { color: #a0b0b5; }
.form-status-message.success { color: #39FF14; }
.form-status-message.error { color: #ff6b6b; }
.form-status-message { margin-top: 1.5rem; min-height: 1.2em; font-weight: 500; font-size: 0.95rem; }
.form-status-message.submitting { color: #a0b0b5; }
.form-status-message.success { color: #39FF14; }
.form-status-message.error { color: #ff6b6b; }

/* ======================================== */
/* Modal Styles (Base and Specific)         */
/* ======================================== */

/* --- Base Modal Styles --- */
.modal-overlay { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.85); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.3s ease-in-out; }
.modal-overlay.modal-visible { display: flex; opacity: 1; }
.modal-content { background-color: var(--section-bg-lighter); border-radius: 0.75rem; position: relative; max-width: 95%; max-height: 95vh; display: flex; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); transform: scale(0.95); opacity: 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.modal-overlay.modal-visible .modal-content { transform: scale(1); opacity: 1; }
.modal-close-btn { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; font-size: 2rem; font-weight: bold; color: #aaa; cursor: pointer; line-height: 1; padding: 0; transition: color 0.2s ease, transform 0.2s ease; z-index: 10; }
.modal-close-btn:hover { color: #fff; transform: scale(1.1); }

/* --- Item Detail Modal Specific Styles --- */
#item-modal .modal-content { padding: 2rem; flex-direction: row; gap: 1.5rem; max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; }
#item-modal .modal-visual { flex: 0 0 40%; max-width: 300px; display: flex; align-items: center; justify-content: center; }
#item-modal .modal-visual img { max-width: 100%; max-height: 60vh; height: auto; display: block; border-radius: 0.5rem; }
#item-modal .modal-text-content { flex: 1 1 auto; color: #d0d0d0; }
#item-modal .modal-text-content h3 { color: var(--accent-color); margin-top: 0; margin-bottom: 1rem; font-size: 1.6rem; }
#item-modal .modal-text-content p { font-size: 1rem; line-height: 1.6; color: #b0c0c5; }

/* --- PDF Modal Specific Styles --- */
.pdf-modal .modal-content { width: 90%; height: 90vh; background-color: #333; padding: 0.5rem; overflow: hidden; flex-direction: column; }
.pdf-viewer-container { width: 100%; height: 100%; position: relative; background-color: #555; }
#pdf-viewer-iframe { display: block; width: 100%; height: 100%; border: none; }
.pdf-fallback { display: none; padding: 2rem; text-align: center; color: #ccc; position: absolute; inset: 0; background-color: #444; align-items: center; justify-content: center; }
.pdf-fallback a { color: var(--accent-color); }
.pdf-modal .modal-close-btn { top: 0.9rem; right: 1.1rem; color: #ccc; }
.pdf-modal .modal-close-btn:hover { color: #fff; }
/* --- END PDF Modal Styles --- */

/* ======================================== */
/* About Section Styles                     */
/* ======================================== */
.about-section {
  padding: 5rem 2rem; /* More vertical padding */
  background-color: var(--section-bg-lighter); /* Use lighter section background */
  border-top: 1px solid rgba(62, 197, 197, 0.1);
  overflow: hidden; /* Prevent content overflow issues */
}

.about-section .section-title {
  /* Uses generic style, adjust margin if needed */
  margin-bottom: 4rem; /* More space below title */
}

.about-container {
  display: flex;
  align-items: center; /* Vertically align items */
  gap: 3rem; /* Space between image and text */
  max-width: 1100px; /* Max width of the content */
  margin: 0 auto; /* Center the container */
  flex-wrap: wrap; /* Allow stacking on smaller screens */
  justify-content: center; /* Center items if they wrap */
}

.about-image-placeholder {
  flex: 0 0 300px; /* Fixed width for image area */
  height: 300px; /* Fixed height */
  border-radius: 50%; /* Make it circular */
  background: linear-gradient(145deg, var(--section-bg-darker), #1a3a4a);
  border: 4px solid var(--accent-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--accent-color);
  box-shadow: 0 0 25px rgba(62, 197, 197, 0.2);
  transition: transform 0.4s ease;
}
.about-image-placeholder:hover {
  transform: scale(1.05);
}

.about-image-placeholder i {
  margin-bottom: 1rem;
  opacity: 0.8;
}
.about-image-placeholder p {
  font-weight: 600;
  font-size: 1.1rem;
}
/* Replace above with this if using an actual image: */
/*
.about-image {
  flex: 0 0 300px;
  max-width: 300px;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
*/

.about-text {
  flex: 1; /* Allow text to take remaining space */
  min-width: 300px; /* Prevent getting too squished */
  color: #c0d0d5; /* Slightly brighter text */
}

.about-text h3 {
  font-size: 1.8rem;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.about-text p {
  font-size: 1rem;
  line-height: 1.8; /* More line spacing */
  margin-bottom: 1.5rem;
}
.about-text p:last-child {
  margin-bottom: 0; /* Remove margin from last paragraph */
}

/* --- END About Section Styles --- */

/* ======================================== */
/* Responsive Adjustments                 */
/* ======================================== */

@media (max-width: 992px) {
  /* Larger Tablets */
  .hero-content { max-width: 80%; }
  .hero-robot { max-width: 40%; max-height: 75vh; right: 0.5rem; }
  .hero-content h1 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
  /* Tablets and Mobile */
  html { scroll-padding-top: 60px; /* Adjust if using fixed header */ }
  body.modal-open { overflow: hidden; }

  .hero { padding: 1.5rem; min-height: auto; background-attachment: scroll; }
  .hero-nav { flex-direction: column; align-items: center; }
  .hero-logo { margin-bottom: 1rem; height: 4rem; /* Smaller logo on mobile */ }
  .nav-links { gap: 1rem; justify-content: center; flex-wrap: wrap; }
  .hero-content { margin-top: 3rem; margin-bottom: 3rem; max-width: 95%; text-align: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; } /* Center subtitle */
  .hero-robot { display: none; }

  /* --- White Paper Responsive --- */
  .whitepaper-section { padding: 3rem 1rem; }
  .whitepaper-content {
      /* Only include properties that CHANGE for mobile */
      flex-direction: column; /* Stack vertically */
      gap: 2rem; /* Adjust gap for vertical layout */
      /* REMOVE display, align-items, max-width, margin, flex-wrap from here */
      /* if they are the same as the global rule */
  }
  .whitepaper-graphic-area {
       flex-basis: auto;
       width: 100%;
   }
   .whitepaper-thumbnail-placeholder { width: 140px; height: 140px; }
   .glowing-circle { width: 90px; height: 90px; }
   .whitepaper-text-area { text-align: center; }
   .whitepaper-text-area p { margin-left: auto; margin-right: auto; }
   /* --- END White Paper Responsive --- */

  .section-title { font-size: 2rem; margin-bottom: 2rem; }
  .solutions-section.visible { padding: 3rem 1rem; }
  .solutions-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .solution-item { padding: 1.5rem; }
  .solution-item h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.2rem; }

  .features-section { padding: 3rem 1rem; }
  .features-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
  .feature-item { padding: 1rem; }
  .feature-item img { width: 60px; height: 60px; }

  .subscribe-section { padding: 3rem 1rem; }
  .subscribe-form { grid-template-columns: 1fr; }
  .subscribe-form button { width: 100%; max-width: 300px; justify-self: center; }

  /* --- Modal Responsive --- */
  /* Item Modal Responsive */
  #item-modal .modal-content { flex-direction: column; padding: 1.5rem; width: 95%; max-height: 85vh; gap: 1rem; }
  #item-modal .modal-visual { flex-basis: auto; max-width: 100%; margin-bottom: 1rem; }
  #item-modal .modal-visual img { max-height: 40vh; }
  #item-modal .modal-text-content h3 { font-size: 1.4rem; }
  #item-modal .modal-text-content p { font-size: 0.95rem; }

  /* PDF Modal Responsive */
  .pdf-modal .modal-content { width: 95%; height: 85vh; }
  .pdf-modal .modal-close-btn { font-size: 1.5rem; top: 0.6rem; right: 0.8rem; }
  /* --- END Modal Responsive --- */
}
/* --- END Responsive Adjustments --- */