.software-hero {
    min-height: 72vh;
    display: flex;
    align-items: center;
    padding: 10rem 5% 6rem;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 40%, rgba(0,217,255,0.08) 0%, transparent 50%),
                radial-gradient(circle at 85% 70%, rgba(37,99,235,0.10) 0%, transparent 50%),
                var(--dark);
}
.software-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0,217,255,0.025) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,217,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
}
.software-hero .container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.software-hero h1 { font-size: clamp(2.8rem,5vw,4.8rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
.software-hero p { font-size: 1.25rem; font-weight: 300; color: var(--light-grey); max-width: 65ch; margin-bottom: 2.5rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem; }
.badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.45rem 1rem; border-radius: 999px;
    border: 1px solid rgba(0,217,255,0.25); color: var(--accent);
    background: rgba(0,217,255,0.05);
}
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
    background: var(--primary); color: #fff; padding: 1rem 2.2rem;
    border-radius: 50px; font-weight: 700; font-size: 1rem;
    text-decoration: none; transition: all 0.3s; border: 2px solid var(--primary);
}
.btn-primary:hover { background: transparent; color: var(--primary); transform: translateY(-2px); }
.btn-ghost {
    background: transparent; color: var(--accent); padding: 1rem 2.2rem;
    border-radius: 50px; font-weight: 700; font-size: 1rem;
    text-decoration: none; transition: all 0.3s; border: 2px solid rgba(0,217,255,0.35);
}
.btn-ghost:hover { background: rgba(0,217,255,0.08); border-color: var(--accent); }

/* Pipeline section */
.pipeline {
    padding: 5rem 5%;
    background: var(--mid-dark);
    border-top: 1px solid rgba(0,217,255,0.08);
    border-bottom: 1px solid rgba(0,217,255,0.08);
}
.pipeline-inner { max-width: 1400px; margin: 0 auto; }
.pipeline-title { text-align: center; margin-bottom: 3rem; }
.pipeline-title span { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 0.5rem; }
.pipeline-title h2 { font-size: 2.2rem; }
.pipeline-flow {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0; 
}
.pipeline-step {
    text-align: center; padding: 1.5rem 1.8rem;
    background: rgba(26,31,46,0.8); border: 1px solid rgba(0,217,255,0.12);
    border-radius: 12px; min-width: 140px; flex: 1; max-width: 180px;
}
.pipeline-step .step-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.pipeline-step .step-num {
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
    color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem;
}
.pipeline-step h4 { font-size: 0.95rem; font-weight: 700; color: var(--off-white); margin-bottom: 0.3rem; }
.pipeline-step p { font-size: 0.8rem; color: var(--steel-gray); }
.pipeline-arrow {
    color: rgba(0,217,255,0.4); font-size: 1.5rem; padding: 0 0.5rem;
    flex-shrink: 0;
}
@media (max-width: 900px) { .pipeline-arrow { display: none; } .pipeline-step { max-width: 100%; } }

/* Software grid */
.software-grid-section { padding: 7rem 5%; background: var(--dark); }
.software-grid-section .inner { max-width: 1400px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header .section-tag {
    display: inline-block; color: var(--accent);
    font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.12em; margin-bottom: 0.75rem;
}
.section-header h2 { font-size: 2.6rem; margin-bottom: 1rem; letter-spacing: -0.02em; }
.section-header p { color: var(--light-grey); max-width: 60ch; margin: 0 auto; font-size: 1.1rem; }

.sw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}
.sw-card {
    background: linear-gradient(135deg, rgba(26,31,46,0.9) 0%, rgba(10,14,26,0.7) 100%);
    border: 1px solid rgba(0,217,255,0.10);
    border-radius: 16px; overflow: visible;
    transition: all 0.35s; text-decoration: none; display: block;
}
.sw-card:hover { transform: translateY(-6px); border-color: rgba(0,217,255,0.35); box-shadow: 0 20px 60px rgba(0,217,255,0.10); }
.sw-card-screen {
    width: 100%; aspect-ratio: 16/9;
    background: var(--mid-dark);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-bottom: 1px solid rgba(0,217,255,0.08);
    position: relative;
}
.sw-card-screen svg { width: 100%; height: 100%; }

/* Add this to your CSS */
.sw-card-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps the whole image visible without cropping */
    background: var(--mid-dark); /* Fills any "letterbox" space if the gif isn't 16:9 */
}

/* Specific override for the MIMS Server card container */
/* REPLACE lines 118-128 with this */
.sw-card-screen.is-gif {
    aspect-ratio: unset;
    height: auto;
    overflow: visible;
}

.sw-card-screen.is-gif img {
    width: 100%;
    height: auto;
    object-fit: unset;
    display: block;
}

.sw-card-body { padding: 1.75rem; }
.sw-card-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
    color: var(--steel-gray); letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 0.6rem; display: block;
}
.sw-card h3 { font-size: 1.4rem; color: var(--off-white); margin-bottom: 0.6rem; }
.sw-card p { font-size: 0.95rem; color: var(--light-grey); line-height: 1.65; margin-bottom: 1.25rem; }
.sw-card .card-link { color: var(--accent); font-weight: 800; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Included strip */
.included-strip {
    background: linear-gradient(135deg, rgba(37,99,235,0.15) 0%, rgba(0,217,255,0.08) 100%);
    border-top: 1px solid rgba(37,99,235,0.25); border-bottom: 1px solid rgba(37,99,235,0.25);
    padding: 4rem 5%; text-align: center;
}
.included-strip h2 { font-size: 2rem; margin-bottom: 0.75rem; }
.included-strip p { color: var(--light-grey); max-width: 55ch; margin: 0 auto 2rem; font-size: 1.05rem; }

/* Thumbnail image */
.thumbper {
  width: 400px;
  height: 270px;
  cursor: pointer;
}
.thumb {
  width: 100%;
  max-width: 400px;
  height: auto; /* Allows the height to grow based on the GIF's ratio */
  cursor: pointer;
}

/* Fullscreen overlay */
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

/* Fullscreen image */
#overlay img {
  max-width: 95%;
  max-height: 95%;
}

/* Container to ensure no padding restricts the image if desired */
.image-full-width-container {
    width: 100%;
    overflow: hidden;
    margin-top: 1.5rem;
}

/* The magic for aspect ratio */
.full-width-capture {
    width: 100%;       /* Spans the full width of the card */
    height: auto;      /* Maintains original aspect ratio */
    display: block;    /* Removes bottom whitespace/gap */
    object-fit: contain; 
}

/* Container to maintain layout structure */
.image-full-width-container {
    width: 100%;
    overflow: hidden; /* Prevents physical overflow if image scaling fails */
    margin-top: 1.5rem;
}

/* Force the image to respect the container width */
.full-width-capture {
    max-width: 100%;   /* Never wider than its parent card */
    width: 100%;       /* Stretch to fill card width */
    height: auto;      /* Maintain original aspect ratio */
    display: block;    /* Remove bottom gap common with inline images */
}