/* style/index.css */
:root {
  --primary-color: #11A84E;
  --secondary-color: #22C768;
  --button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --card-bg: #11271B;
  --bg-color: #08160F;
  --text-main: #F2FFF6;
  --text-secondary: #A7D9B8;
  --border-color: #2E7A4E;
  --glow-color: #57E38D;
  --gold-color: #F2C14E;
  --divider-color: #1E3A2A;
  --deep-green: #0A4B2C;
}

.page-index {
  background-color: var(--bg-color);
  color: var(--text-main);
}

/* Video Section */
.page-index__video-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  padding-top: 10px; /* Specific top padding, not --header-offset */
  box-sizing: border-box;
  overflow: hidden;
}

.page-index__video-container {
  position: relative;
  width: 100%; /* Important for desktop flex alignment */
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.page-index__video-link {
  display: block;
  text-decoration: none;
  position: relative;
  width: 100%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.page-index__video-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.page-index__video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.page-index__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  object-fit: cover;
  pointer-events: none;
}

.page-index__video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.page-index__video-link:hover .page-index__video-overlay {
  opacity: 1;
}

.page-index__video-click-hint {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  background: var(--primary-color);
  border-radius: 5px;
  white-space: nowrap;
}

.page-index__video-cta {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.page-index__play-now-button {
  display: inline-block;
  padding: 15px 40px;
  background: var(--button-gradient);
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  min-width: 200px;
}

.page-index__play-now-button:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%); /* Invert gradient or slightly darker */
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.page-index__play-now-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Title Section */
.page-index__title-section {
  padding: 40px 20px;
  text-align: center;
  background-color: var(--bg-color);
  color: var(--text-main);
  box-sizing: border-box;
}

.page-index__title-container {
  max-width: 900px;
  margin: 0 auto;
}

.page-index__main-title {
  font-size: clamp(28px, 4vw, 48px); /* Use clamp for H1 font size */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--gold-color);
}

.page-index__title-description {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
  color: var(--text-secondary);
}

.page-index__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.page-index__cta-button {
  display: inline-block;
  padding: 14px 30px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

.page-index__btn-primary {
  background: var(--button-gradient);
  color: #ffffff;
}

.page-index__btn-primary:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.page-index__btn-secondary {
  background: var(--card-bg);
  color: var(--text-main);
  border: 2px solid var(--border-color);
}

.page-index__btn-secondary:hover {
  background: var(--deep-green);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Brand Section */
.page-index__brand-section {
  padding: 60px 20px;
  background-color: var(--card-bg);
  color: var(--text-main);
  box-sizing: border-box;
}

.page-index__brand-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-index__brand-title {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--gold-color);
}

.page-index__brand-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-index__brand-item {
  background-color: var(--deep-green);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
}

.page-index__brand-item-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text-main);
}

.page-index__brand-item p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.page-index__brand-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-index__brand-features li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
  color: var(--text-secondary);
}

.page-index__brand-features li img {
  flex-shrink: 0;
  margin-right: 15px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid var(--border-color);
  min-width: 200px; /* Enforce min size 200x200 */
  min-height: 200px; /* Enforce min size 200x200 */
  max-width: 200px; /* Fixed size for feature icons */
  max-height: 200px; /* Fixed size for feature icons */
}

/* FAQ Section */
.page-index__faq-section {
  padding: 60px 20px;
  background-color: var(--bg-color);
  color: var(--text-main);
  box-sizing: border-box;
}

.page-index__faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.page-index__faq-main-title {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--gold-color);
}

.page-index__faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

details.page-index__faq-item {
  background-color: var(--card-bg);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

details.page-index__faq-item summary.page-index__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 0.3s ease;
  color: var(--text-main);
}

details.page-index__faq-item summary.page-index__faq-question::-webkit-details-marker {
  display: none;
}

details.page-index__faq-item summary.page-index__faq-question:hover {
  background-color: var(--deep-green);
}

.page-index__faq-qtext {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--text-main);
}

.page-index__faq-toggle {
  font-size: 24px;
  font-weight: bold;
  color: var(--gold-color);
  flex-shrink: 0;
  margin-left: 15px;
  width: 28px;
  text-align: center;
}

details.page-index__faq-item .page-index__faq-answer {
  padding: 0 25px 20px;
  background-color: var(--deep-green);
  border-radius: 0 0 10px 10px;
  color: var(--text-secondary);
}

details.page-index__faq-item .page-index__faq-answer p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.page-index__faq-answer a {
  color: var(--gold-color);
  text-decoration: none;
}

.page-index__faq-answer a:hover {
  text-decoration: underline;
}

/* Blog Section */
.page-index__blog-section {
  padding: 60px 20px;
  background-color: var(--deep-green);
  color: var(--text-main);
  box-sizing: border-box;
}

.page-index__blog-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-index__blog-title {
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--gold-color);
}

.page-index__blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-index__blog-item {
  background-color: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-index__blog-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.page-index__blog-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 20px; /* Add padding for content below image */
}

.page-index__blog-item img {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover;
  margin-bottom: 15px;
  display: block;
}

.page-index__blog-item-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 20px 10px;
  line-height: 1.4;
  color: var(--text-main);
}

.page-index__blog-item-excerpt {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 20px 15px;
  color: var(--text-secondary);
}

.page-index__blog-item-date {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 20px;
  display: block;
}

.page-index__blog-cta {
  text-align: center;
  margin-top: 40px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-index__brand-content {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .page-index__blog-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .page-index__video-section {
    padding: 30px 15px;
    padding-top: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .page-index__video-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden !important;
  }
  
  .page-index__video-link {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .page-index__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 4px;
    overflow: hidden !important;
  }
  
  .page-index__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    object-fit: contain; 
  }
  
  .page-index__video-click-hint {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }

  .page-index__video-cta {
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .page-index__play-now-button {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-index__title-section,
  .page-index__brand-section,
  .page-index__faq-section,
  .page-index__blog-section {
    padding: 30px 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-index__main-title,
  .page-index__brand-title,
  .page-index__faq-main-title,
  .page-index__blog-title {
    font-size: 28px;
    margin-bottom: 25px;
  }

  .page-index__title-description {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .page-index__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-index__cta-button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 15px;
    font-size: 16px;
  }

  .page-index__brand-item-title {
    font-size: 20px;
  }

  .page-index__brand-features li img {
    min- /* Adjust for mobile, still > 200px if possible, but 150 is a compromise if 200 is too big */
    min-
    
    
  }

  details.page-index__faq-item summary.page-index__faq-question {
    padding: 15px 20px;
  }

  .page-index__faq-qtext {
    font-size: 16px;
  }

  details.page-index__faq-item .page-index__faq-answer {
    padding: 0 20px 15px;
  }
  
  .page-index__blog-item img {
    
  }

  .page-index__blog-item-title {
    font-size: 18px;
    margin: 0 15px 10px;
  }

  .page-index__blog-item-excerpt,
  .page-index__blog-item-date {
    font-size: 14px;
    margin: 0 15px;
  }
}

@media (max-width: 480px) {
  .page-index__main-title,
  .page-index__brand-title,
  .page-index__faq-main-title,
  .page-index__blog-title {
    font-size: 24px;
  }

  .page-index__brand-features li img {
    min- /* Smallest acceptable for mobile, still need to check if this passes 200px rule */
    min-
    
    
  }
  /* Re-evaluating the 200px rule for feature icons on mobile. The rule is "any width or height less than 200 pixels". So even 150px is a failure. I will revert to 200px and let the system handle scaling if it's too big, or make sure the layout can accommodate it. For now, I'll keep them at 200x200 in HTML and rely on max-width:100% and object-fit:cover/contain for responsive scaling, ensuring their *intrinsic* size is >=200px. */
  /* The CSS for .page-index__brand-features li img already has min-width/height and max-width/height, so it will enforce 200x200. This is a strict rule, so it must be adhered to. */
}