/* ==========================================
   HOME COVER SECTION
========================================== */
.sx-home-cover {
  position: relative;
  width: 100%;
  min-height: 500px; /* Gives it a grand, full-screen feel */
  display: flex;
  align-items: center;
  background-color: #111111; /* Fallback color */
  background-size: cover;
  background-position: center center; /* Keeps the instrument exactly in the middle */
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Creates a darker ring around the edges so text pops, clear in the middle */
.sx-cover-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 15%, rgba(0,0,0,0.6) 100%);
  z-index: 1;
}

.sx-cover-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--sx-max);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

/* --- Left Side Typography (Base) --- */
.sx-cover-text-main {
  flex: 1 1 40%;
  max-width: 500px;
}

.sx-cover-text-main h1 {
  font-size: 3rem;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -1px;
}

/* --- Right Side Typography (Base) --- */
.sx-cover-text-sub {
  flex: 1 1 40%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
}

.sx-cover-text-sub p {
  font-size: 1.5rem;
  color: #e0e5e9;
  line-height: 1.6;
  margin: 0 0 40px; 
  font-weight: 400;
  text-align: justify;
}

/* --- Premium CTA Button --- */
.sx-btn-cover {
  display: inline-block;
  padding: 16px 36px;
  align-self: flex-end; /* Default aligns to the right of its box */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.sx-btn-cover:hover {
  border-color: var(--sx-brand);
  background-color: var(--sx-brand);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(45, 132, 205, 0.4);
  transform: translateY(-3px);
}

/* ==========================================
   RESPONSIVE LAYOUT RULES
========================================== */

/* 1. LARGE DESKTOPS (>1550px) - Your custom nudges */
@media (min-width: 1551px) {
  .sx-cover-text-main {
    transform: translateY(-70px) !important; 
    margin-left: 100px; 
  }
  .sx-cover-text-sub {
    margin-right: 150px; 
  }
}

/* 2. LAPTOPS & TABLETS (769px to 1550px) - Progressive Shrinking */
@media (max-width: 1550px) {
  .sx-cover-text-main {
    margin-left: 2vw; /* Uses a small, flexible percentage of the screen width */
    transform: translateY(-70px) !important; /* Slightly less vertical lift */
  }
  
  .sx-cover-text-sub {
    margin-right: 2vw;
    transform: translateY(-20px) !important; /* Slightly less vertical lift */
  }

  /* FLUID TYPOGRAPHY: clamp(Minimum Size, Preferred Fluid Size, Maximum Size) */
  .sx-cover-text-main h1 {
    /* Smoothly scales between 2rem (on tablets) and 3rem (on small desktops) */
    font-size: clamp(2rem, 3.5vw, 3rem); 
  }

  .sx-cover-text-sub p {
    /* Smoothly scales between 1rem and 1.5rem */
    font-size: clamp(1rem, 1.8vw, 1.5rem); 
    margin-bottom: 30px; /* Bring the button a bit closer to the text */
  }

  /* Shrink the button slightly so it doesn't look gigantic next to the smaller text */
  .sx-btn-cover {
    padding: 12px 28px; 
    font-size: 0.85rem;
  }
}

/* 3. MOBILE PHONES (Max 770px) - Hide text, Center title & CTA */
@media (max-width: 870px) {
  .sx-home-cover { min-height: 40vh; }
  
  .sx-cover-container {
    align-items: center; /* Center everything perfectly */
    padding: 40px 20px;
    gap: 40px;
  }
  
  .sx-cover-text-main {
    text-align: center;
  }

  .sx-cover-text-main h1 { 
    font-size: 2.8rem; 
  }

  /* HIDE THE PARAGRAPH */
  .sx-cover-text-sub p { 
    display: none; 
  }
  
  .sx-cover-text-sub {
    width: auto;
  }

  /* CENTER THE BUTTON */
  .sx-btn-cover {
    align-self: center; 
    padding: 14px 28px; /* Slightly smaller button for mobile */
  }
  
  /* Darken overlay on mobile to guarantee text visibility */
  .sx-cover-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
  }
}

/* ==========================================
   COVER LOAD ANIMATIONS (Pure CSS)
========================================== */
.sx-cover-fade-in {
  animation: coverFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}

.sx-cover-fade-in-delay {
  animation: coverFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.3s; /* Right side loads slightly after the left side */
  opacity: 0;
  transform: translateY(30px);
}

@keyframes coverFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   WHY SENSOLYTICS SECTION
========================================== */
.sx-why-section {
    background-color: #ffffff; /* Clean white background */
    padding: 80px 0 30px 0 !important;
}

.sx-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forces exactly 3 in one row on desktop */
    gap: 40px;
    margin-top: 20px;
}

.sx-feature-card {
    background: #ffffff;
    border: 1px solid #e0e5e9; /* Light scientific gray line */
    border-radius: 8px; /* Sharp, modern corners */
    padding: 40px 30px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sx-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); /* Deep, soft shadow */
    border-color: rgba(45, 132, 205, 0.3); /* Brand blue border on hover */
}

/* Image Container Styling */
.sx-feature-icon {
    width: 64px; 
    height: 64px;
    margin-bottom: 24px;
    overflow: hidden; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.sx-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}

/* Zooms the image slightly on card hover */
.sx-feature-card:hover .sx-feature-icon {
    transform: scale(1.1);
}

/* Typography */
.sx-feature-card h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #111111; /* True black for headers */
    margin: 0 0 16px;
    line-height: 1.3;
}

.sx-feature-card p {
    font-size: 1rem;
    color: #333333; /* Dark, crisp gray for readability */
    line-height: 1.7;
    margin: 0;
}

/* ------------------------------------------
   TABLET: Drop to 2 columns, center the 3rd card
------------------------------------------ */
@media (max-width: 1024px) {
    .sx-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Target the 3rd card specifically to center it */
    .sx-feature-card:nth-child(3) {
        grid-column: span 2;  /* Tells it to take up the whole bottom row... */
        max-width: 50%;       /* ...but restricts its width to look like a normal card... */
        margin: 0 auto;       /* ...and centers it perfectly! */
    }
}

/* ------------------------------------------
   MOBILE: Stack in 1 column
------------------------------------------ */
@media (max-width: 768px) {
    .sx-features-grid {
        grid-template-columns: 1fr;
    }
    
    .sx-feature-card:nth-child(3) {
        grid-column: span 1; /* Reset for mobile */
        max-width: 100%;     /* Let it take full width on phones */
    }
}

/* ==========================================
   PRODUCTS AND APPLICATIONS
========================================== */

/* Core Variables (Keep your existing ones, add these if missing) */
.sx-home {
  --sx-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --sx-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --sx-shadow-dark: 0 12px 30px rgba(0,0,0,0.2);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Base Layout */
.sx-home-section { padding: 80px 0; }
.sx-bg-gray { background-color: #f4f6f8; border-top: 1px solid #e0e5e9; }
.sx-home-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.sx-home-section-head { text-align: center; margin-bottom: 0px; }

/* Typography */
.sx-overline { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgb(45, 132, 205); margin-bottom: 12px; }
.sx-home-section-head h2 { color: #111111; font-size: 2.5rem; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.5px; }
.sx-home-section-head p { color: #333333; font-size: 1.15rem; max-width: 600px; margin: 25px auto; line-height: 1.6; }

/* ==========================================
   PRODUCTS HIERARCHY GRID (2 Rows)
========================================== */
.sx-products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 column base */
  gap: 24px;
}

.sx-card-large { grid-column: span 3; } /* Takes up 50% */
.sx-card-small { grid-column: span 2; } /* Takes up 33% */

.sx-product-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e0e5e9;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--sx-shadow-sm);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sx-product-card:hover { transform: translateY(-6px); box-shadow: var(--sx-shadow-lg); }
.sx-product-card:hover img { transform: scale(1.05); }

.sx-img-wrapper { overflow: hidden; border-bottom: 1px solid #e0e5e9; }

/* Aspect ratios to keep the grid clean */
.sx-card-large .sx-img-wrapper { aspect-ratio: 16 / 10; }
.sx-card-small .sx-img-wrapper { aspect-ratio: 4 / 3; }

.sx-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }

.sx-home-card-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.sx-home-card-body h3 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 600; color: #000; }
.sx-card-small .sx-home-card-body h3 { font-size: 1.15rem; } /* Slightly smaller headers for the bottom row */

.sx-home-card-body p { margin: 0 0 20px; line-height: 1.5; color: #333333; font-size: 0.95rem; flex-grow: 1; }
.sx-card-small .sx-home-card-body p { font-size: 0.9rem; }

.sx-explore-link { color: rgb(45, 132, 205); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; margin-top: auto; }
.sx-arrow { display: inline-block; margin-left: 8px; transition: transform 0.3s ease; }
.sx-product-card:hover .sx-arrow { transform: translateX(6px); }


/* ==========================================
   APPLICATIONS GRID (2x2 Dark Cards)
========================================== */
/* --- Section Background & Spacing --- */
.sx-homepage-app {
  --sx-dark: #2c3135;
  --sx-text-muted: #667078;
  --sx-bg-card: #ffffff;
  --sx-border: #e0e5e9;

  background-color: #f4f6f8;
  border-top: 1px solid #e0e5e9;
  padding: 90px 24px;
  /* Generous space up and down */
  margin: 140px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Centered Content Wrapper */
.sx-homepage-app .sx-app-container {
  max-width: 1200px;
  margin: 0 auto;
}


/* Grid Layout */
.sx-homepage-app .sx-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* Card Container */
.sx-homepage-app .sx-app-card {
  background: var(--sx-bg-card);
  border: 1px solid var(--sx-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

/* Refined, Light Gray Hover State */
.sx-homepage-app .sx-app-card:hover {
  transform: translateY(-6px);
  border-color:  rgba(45, 132, 205, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* 16:9 Image Placeholder at Top */
.sx-homepage-app .sx-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #e8ecef;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sx-homepage-app .sx-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Subtle image zoom on card hover */
.sx-homepage-app .sx-app-card:hover .sx-card-image img {
  transform: scale(1.03);
}

/* Card Body (Padding applied below image) */
.sx-homepage-app .sx-card-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

/* Typography */
.sx-homepage-app .sx-card-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sx-dark);
  margin: 0 0 12px 0;
}

.sx-homepage-app .sx-card-body p {
  font-size: 0.95rem;
  color: var(--sx-text-muted);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

/* Interactive Tags Area */
.sx-homepage-app .sx-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--sx-border);
}

/* Tag Links with Lower Radius */
.sx-homepage-app .sx-spec-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: #55606a;
  background: #f0f3f6;
  padding: 5px 10px;
  border-radius: 4px;
  /* Lower radius as requested */
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Tag Hover States */
.sx-homepage-app .sx-spec-tag:hover {
  background: var(--sx-dark);
  color: #ffffff;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .sx-homepage-app {
    padding: 60px 16px;
  }

  .sx-homepage-app .sx-app-title {
    font-size: 1.8rem;
  }
}

/* ==========================================
   RESPONSIVE DESIGN (Tablets & Mobile)
========================================== */
@media (max-width: 992px) {
  .sx-card-large, .sx-card-small { grid-column: span 3; } /* 2 columns for products */
}

@media (max-width: 768px) {
  .sx-card-large, .sx-card-small { grid-column: span 6; } /* 1 column for products */
  .sx-apps-grid { grid-template-columns: 1fr; } /* 1 column for apps */
}

/* Animations from previous steps */
.sx-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sx-animate.sx-visible { opacity: 1; transform: translateY(0); }


/* ==========================================
   NEWS MODULE (Joomla Articles)
   Module class suffix: sx-home-news
========================================== */

.sx-home-news {
  max-width: 1240px;
  margin: 0 auto;
  padding: 50px 20px 0px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: #fff;
}

/* Module title */
.sx-home-news .moduletitle,
.sx-home-news h3.moduletitle,
.sx-home-news .module-title {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 2vw, 2.5rem);
  line-height: 1.15;
  color: #111111;
  font-weight: 600;
}

/* Optional subtitle/intro */
.sx-home-news .module-subtitle,
.sx-home-news .mod-custom p:first-of-type {
  color: var(--sx-muted);
  line-height: 1.7;
}

/* Header with link */
.sx-home-news-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 34px;
}

.sx-home-news-header-left p {
  margin: 0;
  color: var(--sx-muted);
  line-height: 1.7;
}

.sx-home-news-header-link {
  color: rgb(45, 132, 205);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.sx-home-news-header-link:hover {
  text-decoration: underline;
}

/* Articles list containers - reset */
.sx-home-news ul.latestnews,
.sx-home-news ul.newsflash-horiz,
.sx-home-news .newsflash,
.sx-home-news .latestnews,
.sx-home-news .mod-articles,
.sx-home-news .mod-list,
.sx-home-news .newsflash-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Grid layout - modified for 3 items */
.sx-home-news ul.latestnews,
.sx-home-news ul.newsflash-horiz,
.sx-home-news .newsflash-items,
.sx-home-news .mod-list {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
}

/* ==========================================
   CARD BASE & DOUBLE-BOX FIX
========================================== */

/* 1. Style ONLY the outer list item as the card */
.sx-home-news li {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sx-shadow, 0 4px 15px rgba(0,0,0,0.05));
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%; /* Ensures card fills the grid cell seamlessly */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* 2. Strip accidental double-boxes from inner articles/wrappers */
.sx-home-news li article,
.sx-home-news li .mod-articles-item,
.sx-home-news li .item-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 3. Force inner article tags to act as a full-height flex column */
.sx-home-news li article {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Featured first card - spans both rows */
.sx-home-news li:first-child {
  grid-row: 1 / 3;
  border-color: rgba(45, 132, 205, 0.16);
}

/* Compact cards (2nd and 3rd) */
.sx-home-news li:nth-child(2),
.sx-home-news li:nth-child(3) {
  grid-column: 2;
}

/* Hide items beyond 3 */
.sx-home-news li:nth-child(n+4) {
  display: none;
}

/* Card hover */
.sx-home-news li:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(10, 30, 30, 0.10);
}

/* ==========================================
   IMAGE HANDLING (CLEANED UP)
========================================== */

.sx-home-news .item-image,
.sx-home-news .intro-image,
.sx-home-news .mod-articles-image,
.sx-home-news figure {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  overflow: hidden;
  flex-shrink: 0 !important;
  width: 100%;
}

/* Clean image styling without artificial 50px margins! */
.sx-home-news img,
.sx-home-news .item-image img,
.sx-home-news .intro-image img,
.sx-home-news .mod-articles-image img {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 5px !important; /* Let the outer li border-radius clip the image cleanly */
}

/* ==========================================
   COMPACT CARDS (2nd & 3rd Items Only)
========================================== */

/* 3. Make the wrapper 80% wide and center it horizontally inside the card! */
.sx-home-news li:nth-child(2) .item-image,
.sx-home-news li:nth-child(3) .item-image,
.sx-home-news li:nth-child(2) .intro-image,
.sx-home-news li:nth-child(3) .intro-image,
.sx-home-news li:nth-child(2) .mod-articles-image,
.sx-home-news li:nth-child(3) .mod-articles-image,
.sx-home-news li:nth-child(2) figure,
.sx-home-news li:nth-child(3) figure {
  width: 80% !important;
  aspect-ratio: 16 / 9 !important;
  max-height: none !important; /* Stops locking pixels! */
  overflow: hidden !important;
  margin: 0 auto 0 auto !important; /* 'auto' on left/right centers it horizontally! */
  align-self: center !important; /* Bulletproof centering for flexbox card columns */
}

/* 4. Let the image fill 100% of that centered 80% wrapper */
.sx-home-news li:nth-child(2) img,
.sx-home-news li:nth-child(3) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* ==========================================
   CONTENT WRAPPERS & VERTICAL CENTERING
========================================== */

/* Standard padding for compact cards */
.sx-home-news .mod-articles-item-content > *:not(.item-image):not(.intro-image):not(.mod-articles-image):not(figure),
.sx-home-news li > article > *:not(.item-image):not(.intro-image):not(.mod-articles-image):not(figure),
.sx-home-news .item-content,
.sx-home-news .article-content {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* VERTICAL CENTERING FOR THE BIG HERO CARD (ROW 1/3)
   Forces the text container to expand into leftover white space and vertically center all elements inside! */
.sx-home-news li:first-child article > *:not(.item-image):not(.intro-image):not(.mod-articles-image):not(figure),
.sx-home-news li:first-child .mod-articles-item-content,
.sx-home-news li:first-child section.sx-intro-block {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: center !important; /* Suspends your text neatly in the vertical middle! */
  padding: 32px 28px !important;
}

/* Compact cards - tighter padding */
.sx-home-news li:nth-child(2) article > *:not(.item-image):not(.intro-image):not(.mod-articles-image):not(figure),
.sx-home-news li:nth-child(3) article > *:not(.item-image):not(.intro-image):not(.mod-articles-image):not(figure),
.sx-home-news li:nth-child(2) .mod-articles-item-content,
.sx-home-news li:nth-child(3) .mod-articles-item-content {
  padding: 18px 20px !important;
  justify-content: flex-start !important;
}

/* ==========================================
   TYPOGRAPHY & META
========================================== */

/* Title - ALL variations */
.sx-home-news .newsflash-title,
.sx-home-news .mod-articles-category-title,
.sx-home-news .item-title,
.sx-home-news .sx-news-item-title,
.sx-home-news h3,
.sx-home-news h4,
.sx-home-news h5,
.sx-home-news .latestnews-title {
  margin: 0 0 12px;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 600;
  color: #111111;
}

/* Compact cards - smaller title with line clamping */
.sx-home-news li:nth-child(2) .newsflash-title,
.sx-home-news li:nth-child(3) .newsflash-title,
.sx-home-news li:nth-child(2) .mod-articles-category-title,
.sx-home-news li:nth-child(3) .mod-articles-category-title,
.sx-home-news li:nth-child(2) .item-title,
.sx-home-news li:nth-child(3) .item-title,
.sx-home-news li:nth-child(2) .sx-news-item-title,
.sx-home-news li:nth-child(3) .sx-news-item-title,
.sx-home-news li:nth-child(2) h3,
.sx-home-news li:nth-child(3) h3,
.sx-home-news li:nth-child(2) h4,
.sx-home-news li:nth-child(3) h4,
.sx-home-news li:nth-child(2) h5,
.sx-home-news li:nth-child(3) h5,
.sx-home-news li:nth-child(2) .latestnews-title,
.sx-home-news li:nth-child(3) .latestnews-title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sx-home-news .newsflash-title a,
.sx-home-news .mod-articles-category-title a,
.sx-home-news .item-title a,
.sx-home-news .sx-news-item-title a,
.sx-home-news h3 a,
.sx-home-news h4 a,
.sx-home-news h5 a,
.sx-home-news .latestnews-title a,
.sx-home-news li > a {
  color: inherit;
  text-decoration: none;
}

.sx-home-news .newsflash-title a:hover,
.sx-home-news .mod-articles-category-title a:hover,
.sx-home-news .item-title a:hover,
.sx-home-news .sx-news-item-title a:hover,
.sx-home-news h3 a:hover,
.sx-home-news h4 a:hover,
.sx-home-news h5 a:hover,
.sx-home-news .latestnews-title a:hover,
.sx-home-news li > a:hover {
  color: rgb(45, 132, 205);
}

/* Intro text */
.sx-home-news .newsflash-item p,
.sx-home-news .mod-articles-item p,
.sx-home-news .article-item p,
.sx-home-news .introtext,
.sx-home-news .item-introtext,
.sx-home-news .sx-news-item-text,
.sx-home-news .mod-articles-item-content p {
  margin: 0 0 16px;
  line-height: 1.7;
  color: var(--sx-muted, #5f6e6e);
  font-size: 0.98rem;
}

/* Hide intro text on compact cards */
.sx-home-news li:nth-child(2) .sx-news-item-text,
.sx-home-news li:nth-child(3) .sx-news-item-text,
.sx-home-news li:nth-child(2) .newsflash-item p,
.sx-home-news li:nth-child(3) .newsflash-item p,
.sx-home-news li:nth-child(2) .mod-articles-item-content p,
.sx-home-news li:nth-child(3) .mod-articles-item-content p,
.sx-home-news li:nth-child(2) .article-item p,
.sx-home-news li:nth-child(3) .article-item p,
.sx-home-news li:nth-child(2) .introtext,
.sx-home-news li:nth-child(3) .introtext,
.sx-home-news li:nth-child(2) .item-introtext,
.sx-home-news li:nth-child(3) .item-introtext {
  display: none;
}

/* Read more */
.sx-home-news .readmore,
.sx-home-news .mod-articles-readmore,
.sx-home-news .read-more,
.sx-home-news a.readmore,
.sx-home-news .newsflash-readmore a {
  color: rgb(45, 132, 205);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 4px;
  display: inline-block;
}

.sx-home-news .readmore:hover,
.sx-home-news .mod-articles-readmore:hover,
.sx-home-news .read-more:hover,
.sx-home-news a.readmore:hover,
.sx-home-news .newsflash-readmore a:hover {
  text-decoration: underline;
}

/* Hide read more on compact cards */
.sx-home-news li:nth-child(2) .readmore,
.sx-home-news li:nth-child(3) .readmore,
.sx-home-news li:nth-child(2) .mod-articles-readmore,
.sx-home-news li:nth-child(3) .mod-articles-readmore,
.sx-home-news li:nth-child(2) .read-more,
.sx-home-news li:nth-child(3) .read-more,
.sx-home-news li:nth-child(2) a.readmore,
.sx-home-news li:nth-child(3) a.readmore,
.sx-home-news li:nth-child(2) .newsflash-readmore,
.sx-home-news li:nth-child(3) .newsflash-readmore {
  display: none;
}

/* Meta tags */
.sx-home-news .sx-news-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
  margin-bottom: 10px;
}

.sx-home-news li:nth-child(2) .sx-news-meta,
.sx-home-news li:nth-child(3) .sx-news-meta {
  font-size: 0.78rem;
  gap: 10px;
  margin-bottom: 8px;
}

.sx-home-news .sx-news-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
}

.sx-home-news li:nth-child(2) .sx-news-tag,
.sx-home-news li:nth-child(3) .sx-news-tag {
  padding: 2px 6px;
  font-size: 0.75rem;
}

.sx-home-news .tag-event {
  background: rgba(45, 132, 205, 0.08);
  color: rgb(45, 132, 205);
}

.sx-home-news .tag-release {
  background: rgba(46, 204, 113, 0.1);
  color: #27ae60;
}

.sx-home-news .tag-company {
  background: rgba(100, 100, 100, 0.1);
  color: #555;
}

.sx-home-news .sx-news-date {
  color: #888;
}

/* ==========================================
   RESPONSIVE OVERRIDES
========================================== */

@media (max-width: 900px) {
  .sx-home-news ul.latestnews,
  .sx-home-news ul.newsflash-horiz,
  .sx-home-news .newsflash-items,
  .sx-home-news .mod-list {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .sx-home-news li:first-child,
  .sx-home-news .newsflash-item:first-child,
  .sx-home-news .mod-articles-item:first-child,
  .sx-home-news .article-item:first-child {
    grid-row: auto;
  }

  .sx-home-news li:nth-child(2),
  .sx-home-news li:nth-child(3) {
    grid-column: auto;
  }

  .sx-home-news-header {
    display: block;
  }

  .sx-home-news-header-link {
    display: inline-block;
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .sx-home-news {
    padding: 68px 20px;
  }

  .sx-home-news .newsflash-title,
  .sx-home-news .mod-articles-category-title,
  .sx-home-news .item-title,
  .sx-home-news h4,
  .sx-home-news h5,
  .sx-home-news .latestnews-title {
    font-size: 1.15rem;
  }

  /* Show full text and buttons on mobile for all cards */
  .sx-home-news li:nth-child(2) .sx-news-item-text,
  .sx-home-news li:nth-child(3) .sx-news-item-text,
  .sx-home-news li:nth-child(2) .newsflash-item p,
  .sx-home-news li:nth-child(3) .newsflash-item p,
  .sx-home-news li:nth-child(2) .mod-articles-item-content p,
  .sx-home-news li:nth-child(3) .mod-articles-item-content p,
  .sx-home-news li:nth-child(2) .introtext,
  .sx-home-news li:nth-child(3) .introtext {
    display: block;
  }

  .sx-home-news li:nth-child(2) .readmore,
  .sx-home-news li:nth-child(3) .readmore {
    display: inline-block;
  }
}

/* ========================================
  HOMEPAGE HERO — LIGHT THEME
   ======================================== */

/* ==========================================================================
   SENSOLYTICS LIGHT HERO — REFINED SEAMS & SPACING
   ========================================================================== */

.sl-hero-light {
  --hero-bg: var(--color-bg-light-gray, #f7f7f7);
  --hero-text: var(--color-text, #333333);
  --hero-blue: var(--color-brand-blue, rgb(45, 132, 205));
  --hero-blue-hover: var(--color-brand-blue-dark, rgb(35, 102, 165));
  --hero-gray: var(--color-brand-gray, #626262);
  --hero-font: var(--font-primary, -apple-system, BlinkMacSystemFont, sans-serif);
  
  display: grid;
  /* 1. PULLED IMAGE CLOSER TO TEXT: Gave image column slightly more width */
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 560px;
  
  /* 2. SMOOTH LEFT-TO-RIGHT BLEND: Starts pure white on the left, blends to soft gray */
  background: linear-gradient(90deg, #ffffff 0%, var(--hero-bg) 45%);
  
  /* Subtle laboratory-grade top/bottom borders instead of a box shadow */
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--hero-font);
  overflow: hidden;
  position: relative;
}

/* -------- Left Content Panel -------- */
.sl-hero-light__content {
  /* Reduced right padding slightly to close the gap with the image */
  padding: clamp(36px, 5vw, 64px) clamp(24px, 3.5vw, 40px) clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.sl-hero-light__eyebrow {
  font-size: var(--font-size-small, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hero-blue);
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sl-hero-light__eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background-color: var(--hero-blue);
}

.sl-hero-light__title {
  font-size: var(--font-size-h1, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #111820;
  margin: 0 0 18px 0;
  max-width: 22ch;
}

.sl-hero-light__lead {
  font-size: var(--font-size-lead, 1.3rem);
  line-height: 1.6;
  color: var(--hero-gray);
  margin: 0 0 32px 0;
  max-width: 42ch;
}

.sl-hero-light__action {
  margin-bottom: 36px;
}


/* -------- Technique Rail (High-Tech Polish) -------- */
.sl-hero-light__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sl-hero-light__badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-blue-dark, rgb(35, 102, 165));
  
  /* Soft, borderless blue tint instead of a hard gray outline */
  background: rgba(45, 132, 205, 0.08);
  border: 0.5px solid rgba(45, 132, 205, 0.12);
  
  padding: 6px 14px;
  border-radius: 10px; /* Smooth, modern pill shape */
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

/* Crisp, glowing telemetry dot inside the pill */
.sl-hero-light__badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-brand-blue, rgb(45, 132, 205));
  box-shadow: 0 0 4px rgba(45, 132, 205, 0.6);
}

/* Subtle interactive lift when hovering over the capabilities */
.sl-hero-light__badge:hover {
  background: rgba(45, 132, 205, 0.14);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45, 132, 205, 0.15);
}

/* -------- Right Media Stage (Carousel) -------- */
.sl-hero-light__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background-color: var(--hero-bg);
}

/* 3. SMOOTHER, TIGHTER SEAM: Uses a multi-stop gradient to eliminate the hard edge 
      without eating into the photo. Blends into the exact gray of the middle section. */
.sl-hero-light__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, 
      var(--hero-bg) 0%, 
      rgba(247, 247, 247, 0.95) 6%, 
      rgba(247, 247, 247, 0.82) 12%, 
      rgba(247, 247, 247, 0.60) 18%, 
      rgba(247, 247, 247, 0.35) 25%, 
      rgba(247, 247, 247, 0.12) 32%, 
      rgba(247, 247, 247, 0) 38%),
    linear-gradient(0deg, 
      rgba(17, 24, 32, 0.45) 0%, 
      rgba(17, 24, 32, 0) 25%);
  pointer-events: none;
  z-index: 2;
}

/* Remaining Carousel Styles (Unchanged) */
.sl-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.sl-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.sl-slide__bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center left;
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Webkit & Standard CSS Mask for deep element blending */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 8%, rgba(0,0,0,1) 20%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 8%, rgba(0,0,0,1) 20%);
}

.sl-slide.is-active .sl-slide__bg {
  transform: scale(1.05);
}

.sl-slide__caption {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 3;
  color: #ffffff;
  font-size: var(--font-size-small, 0.875rem);
  background: rgba(17, 24, 32, 0.75);
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 3px;
  border-left: 3px solid var(--hero-blue);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}

.sl-slide.is-active .sl-slide__caption {
  opacity: 1;
  transform: translateY(0);
}

.sl-hero-light__indicators {
  position: absolute;
  bottom: 24px;
  left: 32px;
  z-index: 4;
  display: flex;
  gap: 8px;
}

.sl-indicator {
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, width 0.3s ease;
}

.sl-indicator.is-active {
  background: var(--hero-blue);
  width: 40px;
}

/* -------- Responsive Layout -------- */
@media (max-width: 960px) {
  .sl-hero-light {
    grid-template-columns: 1fr;
    background: #ffffff; /* Simplifies background on mobile */
  }
  .sl-hero-light__content {
    padding: 40px 24px;
  }
  .sl-hero-light__media {
    order: -1;
    min-height: 320px;
  }
  .sl-hero-light__media::after {
    background: linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 25%);
  }
  .sl-hero-light__title {
    font-size: clamp(2rem, 5vw, 2.4rem);
  }
}