/* ======= T4D SECTION STYLES (Dark Modern Theme) ======= */
.t4d {
    background: lab(1.36% 3.77 -10.26);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    display: flax;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.t4d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(0, 174, 239, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 194, 14, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.container {
    max-width: var(--pageMax, 1200px);
    margin: 0 auto;
    padding: 0 var(--gutterX, clamp(16px, 3vw, 32px));
    box-sizing: border-box;
}

/* ======= SECTION HEADER ======= */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text, #ffffff);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section-lead {
    font-size: 1.2rem;
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ======= T4D HIGHLIGHTS ======= */
.t4d-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg, 24px);
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

/* Update the card to use flexbox for horizontal layout */
.highlight-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    border-radius: var(--card-radius, 12px);
    padding: 20px;
    text-align: left;  /* Changed from center to left */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;  /* Add this */
    align-items: flex-start;  /* Add this */
    gap: 20px;  /* Add this - space between icon and content */
    align-items: center; 
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-bd-hover, rgba(0, 174, 239, 0.5)), transparent);
    animation: slideLight 3s linear infinite;
}

@keyframes slideLight {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.highlight-card:hover {
    transform: translateY(-3px);
    border-color: var(--card-bd-hover, rgba(0, 174, 239, 0.5));
    box-shadow: 0 8px 20px rgba(0, 174, 239, 0.15);
}

/* Update the icon positioning */
.highlight-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.1), rgba(255, 194, 14, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;  /* Changed from "0 auto 20px" to "0" */
    flex-shrink: 0;
}

.highlight-icon i {
    font-size: 1.3rem;
    color: var(--skills-primary, #00aeef);
}

.highlight-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--card-bd-hover, rgba(0, 174, 239, 0.8));
    margin-bottom: 10px;
    line-height: 1;
}

.highlight-label {
    font-size: 1.1rem;
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    font-weight: 500;
}

/* ======= SECTOR TAGS (refined) ======= */

/* Make label + chips share the same base font size */
.sector-tags {
  display: flex;
  align-items: center;            /* center vertically */
  justify-content: center;        /* center the whole row */
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 60px;
  font-size: 0.9rem;              /* <- single source of truth */
}

/* Label: same size as chips, slightly dimmer */
.sector-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 1rem;                 /* equals .sector-tags font-size */
  font-weight: 500;               /* match chip weight */
  color: var(--text-dim, rgba(255,255,255,0.75));
  white-space: nowrap;
  padding: 6px 0;                 /* aligns baseline with chips */
}

/* Glowing vertical divider */
.sector-sep {
  display: inline-block;
  width: 1.5px;
  height: 3rem;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(255, 194, 14, 0) 0%,
    rgba(255, 194, 14, 0.12) 15%,
    rgba(255, 194, 14, 0.65) 50%,
    rgba(255, 194, 14, 0.12) 85%,
    rgba(255, 194, 14, 0) 100%
  );
}  
/* Chips */
.sector-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--card-bd, rgba(255,255,255,0.12));
  color: var(--text, #fff);
  font-size: 1em;                 /* equals .sector-tags font-size */
  font-weight: 500;
  line-height: 1;                 /* tighter, cleaner pill */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  cursor: pointer;
}

.sector-tag i { font-size: 0.95em; }

.sector-tag:hover,
.sector-tag.active {
  background: rgba(0, 174, 239, 0.10);
  border-color: var(--skills-primary, #00aeef);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 174, 239, 0.18);
}

/* Responsive: if wrapping, center the label on its own row and hide the divider */
@media (max-width: 560px) {
  .sector-label {
    flex-basis: 100%;
    justify-content: center;
    text-align: center;
    padding: 0;                   /* tighter on mobile */
  }
  .sector-sep { display: none; }
  .sector-tags { gap: 10px; }
}


/* ======= PRODUCTS CONTAINER ======= */
.products-container {
    margin-bottom: 60px;
    max-width: var(--pageMax, 1200px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    padding: 0 var(--gutterX, clamp(16px, 3vw, 32px));
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.products-header h3 {
    font-size: 2.2rem;
    color: var(--text, #ffffff);
    font-weight: 600;
    margin: 0;
}

.carousel-controls {
    display: flex;
    gap: 15px;
}

.products-prev,
.products-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--card-bd-hover, rgba(0, 174, 239, 0.5));
    color: var(--text, #ffffff);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 100;
}

.products-prev {
    left: var(--gutterX, clamp(16px, 3vw, 32px));
}

.products-next {
    right: var(--gutterX, clamp(16px, 3vw, 32px));
}

.products-prev:hover,
.products-next:hover {
    border-color: var(--skills-primary, #00aeef);
    background: var(--skills-primary, #00aeef);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 174, 239, 0.4);
}

.product-tech-section {
    margin-top: 15px;
}

.tech-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: block;
}

.product-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ======= T4D PRODUCTS CAROUSEL ======= */
#productsCarousel.t4d-carousel {
    --bg: linear-gradient(135deg, var(--skills-primary, #00aeef), var(--card-bd-hover, rgba(0, 174, 239, 0.8)));
    --cardW: 320px;
    --cardH: 420px;
    --gap: 30px;
    --tilt: 12deg;
    --perspective: 800px;
    --items: 12;
    --position: 5;

    width: 100%;
    max-width: var(--pageMax, 1200px);
    margin: 0 auto;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    position: relative;
    padding: 40px var(--gutterX, clamp(16px, 3vw, 32px));
    box-sizing: border-box;

    display: grid;
    grid-template-rows: 460px 60px;
    grid-template-columns: 1fr repeat(12, 20px) 1fr;
    align-items: center;
    justify-items: center;
    gap: 10px;
}

/* ===== Stage ===== */
#productsCarousel .products-track {
    grid-row: 1 / 2;
    grid-column: 1 / -1;

    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
    transform-style: preserve-3d;
    perspective: var(--perspective);
    pointer-events: none;
    position: relative;
}

/* ===== Product Cards ===== */
#productsCarousel .product-card {
    position: absolute;
    width: var(--cardW);
    height: var(--cardH);
    max-width: 90vw;  /* Add this line */

    display: flex;
    flex-direction: column;
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    border-radius: var(--card-radius, 12px);
    padding: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2);

    /* 3D positioning math */
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));

    transform:
        rotateY(calc(var(--tilt) * var(--r) * -1)) translateX(calc((var(--cardW) + var(--gap)) * var(--r) * -1)) translateZ(calc(var(--abs) * -20px));

    z-index: calc((var(--items) + 1) - var(--abs));
    opacity: calc(1 - (0.1 * var(--abs)));
    filter: blur(calc(var(--abs) * 1px));

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: auto;
    cursor: pointer;
}

#productsCarousel .product-card:hover {
    transform:
        rotateY(calc(var(--tilt) * var(--r) * -1)) translateX(calc((var(--cardW) + var(--gap)) * var(--r) * -1)) translateZ(calc(var(--abs) * -20px)) scale(1.05);
    border-color: var(--skills-primary, #00aeef);
    box-shadow: 0 25px 50px rgba(0, 174, 239, 0.2);
    filter: blur(0px);
    /* Remove blur on hover */
}

/* Product Card Header */
.product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.product-badge {
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.1), rgba(255, 194, 14, 0.1));
    color: var(--skills-primary, #00aeef);
    border: 1px solid rgba(0, 174, 239, 0.2);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.product-status {
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status--live {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: heartbeat 2.5s ease-in-out infinite;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
    }
}

.status--internal {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status--completed {
    background: rgba(107, 114, 128, 0.2);
    color: #9CA3AF;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Product Title */
.product-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text, #ffffff);
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Product Description (smaller + dimmer) */
.product-description {
  color: var(--text-dim, rgba(255, 255, 255, 0.4)); /* was 0.7 */
  font-size: 0.7rem;  /* was 0.8rem */
  line-height: 1.45;   /* slightly tighter */
  margin-bottom: 16px; /* a bit more compact */
  flex-grow: 1;
}


/* Technology Tags */
.product-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tech-tag {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim, rgba(255, 255, 255, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tech-tag:hover {
    border-color: var(--skills-primary, #00aeef);
    background: rgba(0, 174, 239, 0.1);
    color: var(--skills-primary, #00aeef);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.2);
}

/* Product Footer */
.product-footer {
    margin-top: auto;
}

.product-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--skills-primary, #00aeef), var(--card-bd-hover, rgba(0, 174, 239, 0.8)));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 174, 239, 0.3);
}

/* Card offsets for positioning */
#productsCarousel .product-card:nth-of-type(1) {
    --offset: 1;
}

#productsCarousel .product-card:nth-of-type(2) {
    --offset: 2;
}

#productsCarousel .product-card:nth-of-type(3) {
    --offset: 3;
}

#productsCarousel .product-card:nth-of-type(4) {
    --offset: 4;
}

#productsCarousel .product-card:nth-of-type(5) {
    --offset: 5;
}

#productsCarousel .product-card:nth-of-type(6) {
    --offset: 6;
}

#productsCarousel .product-card:nth-of-type(7) {
    --offset: 7;
}

#productsCarousel .product-card:nth-of-type(8) {
    --offset: 8;
}

#productsCarousel .product-card:nth-of-type(9) {
    --offset: 9;
}
#productsCarousel .product-card:nth-of-type(10) {
    --offset: 10;
}
#productsCarousel .product-card:nth-of-type(11) {
    --offset: 11;
}
#productsCarousel .product-card:nth-of-type(12) {
    --offset: 12;
}
/* ===== Radio Control Dots ===== */
#productsCarousel>input[type="radio"] {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    grid-row: 2 / 3;
}

#productsCarousel>input[type="radio"]:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--skills-primary, #00aeef);
}

#productsCarousel>input[type="radio"]:checked {
    background: var(--skills-primary, #00aeef);
    border-color: var(--skills-primary, #00aeef);
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.3);
}

/* Position dots in grid */
#productsCarousel>input:nth-of-type(1) {
    grid-column: 2 / 3;
}

#productsCarousel>input:nth-of-type(2) {
    grid-column: 3 / 4;
}

#productsCarousel>input:nth-of-type(3) {
    grid-column: 4 / 5;
}

#productsCarousel>input:nth-of-type(4) {
    grid-column: 5 / 6;
}

#productsCarousel>input:nth-of-type(5) {
    grid-column: 6 / 7;
}

#productsCarousel>input:nth-of-type(6) {
    grid-column: 7 / 8;
}

#productsCarousel>input:nth-of-type(7) {
    grid-column: 8 / 9;
}

#productsCarousel>input:nth-of-type(8) {
    grid-column: 9 / 10;
}

#productsCarousel>input:nth-of-type(9) {
    grid-column: 10 / 11;
}

#productsCarousel>input:nth-of-type(10) {
    grid-column: 11 / 12;
}
#productsCarousel>input:nth-of-type(11) {
    grid-column: 12 / 13;
}
#productsCarousel>input:nth-of-type(12) {
    grid-column: 13 / 14;
}
/* Radio controls set the position */
#productsCarousel>input:nth-of-type(1):checked~.products-track {
    --position: 1;
}

#productsCarousel>input:nth-of-type(2):checked~.products-track {
    --position: 2;
}

#productsCarousel>input:nth-of-type(3):checked~.products-track {
    --position: 3;
}

#productsCarousel>input:nth-of-type(4):checked~.products-track {
    --position: 4;
}

#productsCarousel>input:nth-of-type(5):checked~.products-track {
    --position: 5;
}

#productsCarousel>input:nth-of-type(6):checked~.products-track {
    --position: 6;
}

#productsCarousel>input:nth-of-type(7):checked~.products-track {
    --position: 7;
}

#productsCarousel>input:nth-of-type(8):checked~.products-track {
    --position: 8;
}
#productsCarousel>input:nth-of-type(9):checked~.products-track {
    --position: 9;
}

#productsCarousel>input:nth-of-type(10):checked~.products-track {
    --position: 10;
}

#productsCarousel>input:nth-of-type(11):checked~.products-track {
    --position: 11;
}

#productsCarousel>input:nth-of-type(12):checked~.products-track {
    --position: 12;
}

/* Hide carousel indicators - keep only radio controls */
.carousel-indicators {
    display: none !important;
}

/* ======= KNOWLEDGE SECTION ======= */
.knowledge-section {
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    border-radius: var(--card-radius, 12px);
    padding: 40px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.knowledge-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-bd-hover, rgba(0, 174, 239, 0.5)), transparent);
    animation: slideLight 3s linear infinite;
}

.subsection-title {
    font-size: 1.8rem;
    color: var(--text, #ffffff);
    font-weight: 600;
    margin-bottom: 30px;
}

.knowledge-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.stat-item {
    text-align: center;
}

.stat-item i {
    font-size: 2rem;
    color: var(--skills-primary, #00aeef);
    margin-bottom: 10px;
}

.stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--card-bd-hover, rgba(0, 174, 239, 0.8));
    margin-bottom: 5px;
}

.stat-label {
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    font-size: 0.9rem;
}

.view-reports-btn {
    background: linear-gradient(135deg, var(--skills-primary, #00aeef), var(--card-bd-hover, rgba(0, 174, 239, 0.8)));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.view-reports-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 174, 239, 0.3);
}

/* ======= MODAL STYLES (Dark Theme) ======= */
.product-modal {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 2147483647;
    opacity: 0;
    transition: all 0.3s ease;
}

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

.modal-content {
    background: var(--bg-dark, #0f0f23);
    border: 1px solid var(--card-bd, rgba(255, 255, 255, 0.2));
    border-radius: var(--card-radius, 12px);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.7);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

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

.modal-header {
    padding: 30px 30px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    background: linear-gradient(135deg, rgba(0, 174, 239, 0.05), rgba(255, 194, 14, 0.02));
}

.modal-header h3 {
    font-size: 1.8rem;
    color: var(--text, #ffffff);
    margin: 0;
    font-weight: 700;
}

.modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.modal-body {
    padding: 30px;
    color: var(--text, #ffffff);
}

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    text-align: right;
    background: rgba(0, 0, 0, 0.2);
}

.modal-btn {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

/* ======= REPORTS DRAWER ======= */
.reports-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: var(--bg-dark, #0f0f23);
    border-left: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}

.reports-drawer.active {
    right: 0;
}

.drawer-header {
    padding: 30px;
    background: linear-gradient(135deg, var(--skills-primary, #00aeef), var(--card-bd-hover, rgba(0, 174, 239, 0.8)));
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.drawer-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 5px;
}

.drawer-content {
    padding: 30px;
}

.report-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
}

.report-item:last-child {
    border-bottom: none;
}

.report-item h4 {
    color: var(--text, #ffffff);
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.report-item p {
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.report-link {
    color: var(--skills-primary, #00aeef);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.report-link:hover {
    color: var(--card-bd-hover, rgba(0, 174, 239, 0.8));
}

/* ======= RESPONSIVE DESIGN ======= */
@media (max-width: 1024px) {
    #productsCarousel.t4d-carousel {
        --cardW: 300px;
        --cardH: 400px;
        --gap: 25px;
        --tilt: 10deg;
        --perspective: 750px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }

    .section-lead {
        font-size: 1.1rem;
    }

    .t4d-highlights {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    #productsCarousel.t4d-carousel {
        --cardW: min(280px, 75vw);
        --cardH: 400px;  /* Increased slightly */
        --gap: 15px;
        --tilt: 5deg;
        --perspective: 600px;
        grid-template-rows: 420px 50px;
        grid-template-columns: 1fr repeat(12, 16px) 1fr;
        padding: 40px 10px;
    }
    
    #productsCarousel .products-track {
        overflow: hidden;
    }
    
    /* Compact card content on mobile */
    #productsCarousel .product-card {
        padding: 20px;
    }
    
    #productsCarousel .product-header {
        margin-bottom: 10px;  /* Reduced from 15px */
    }
    
    #productsCarousel .product-title {
        font-size: 1.1rem;  /* Smaller title */
        margin-bottom: 10px;  /* Reduced margin */
    }
    
    #productsCarousel .product-description {
        font-size: 0.75rem;  /* Smaller text */
        line-height: 1.3;  /* Tighter line height */
        margin-bottom: 12px;  /* Reduced margin */
    }
    
    #productsCarousel .product-tech-section {
        margin-top: 10px;  /* Reduced from 15px */
    }
    
    #productsCarousel .tech-label {
        font-size: 0.7rem;  /* Smaller label */
        margin-bottom: 8px;  /* Reduced margin */
    }
    
    #productsCarousel .tech-tag {
        padding: 3px 8px;  /* Smaller padding */
        font-size: 0.7rem;  /* Smaller font */
    }

    #productsCarousel>input[type="radio"] {
        width: 10px;
        height: 10px;
    }

    .products-header {
        flex-direction: column;
        text-align: center;
    }

    .knowledge-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reports-drawer {
        width: 100%;
        right: -100%;
    }
}

@media (max-width: 640px) {
    #productsCarousel.t4d-carousel {
        --cardW: min(240px, 70vw);
        --cardH: 380px;  /* Adjusted */
        --gap: 10px;
        --tilt: 3deg;
        --perspective: 500px;
        grid-template-rows: 400px 45px;
        grid-template-columns: 1fr repeat(12, 14px) 1fr;
    }

    #productsCarousel .product-card {
        padding: 18px;
    }
    
    #productsCarousel .product-title {
        font-size: 1.05rem;
        margin-bottom: 8px;
    }
    
    #productsCarousel .product-description {
    font-size: 0.73rem;  /* Slightly smaller to fit better */
    line-height: 1.35;
    margin-bottom: 10px;
    }
    
    #productsCarousel .product-badge,
    #productsCarousel .product-status {
        padding: 4px 10px;  /* Smaller badges */
        font-size: 0.75rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .highlight-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    #productsCarousel.t4d-carousel {
        --cardW: min(220px, 65vw);
        --cardH: 380px;  /* Adjusted height */
        --gap: 8px;
        --tilt: 2deg;
        --perspective: 400px;
        grid-template-rows: 400px 40px;
        grid-template-columns: 1fr repeat(12, 12px) 1fr;
        padding: 30px 5px;
    }

    #productsCarousel .product-card {
        padding: 15px;
        display: flex;
        flex-direction: column;
    }
    
    #productsCarousel .product-header {
        margin-bottom: 8px;
    }
    
    #productsCarousel .product-title {
        font-size: 0.95rem;
        margin-bottom: 8px;
        line-height: 1.2;
    }
    
    #productsCarousel .product-description {
        font-size: 0.7rem;
        line-height: 1.3;
        margin-bottom: 10px;
        
    }
    
    #productsCarousel .product-tech-section {
        margin-top: 8px;
        flex-shrink: 0;  /* Don't shrink */
    }
    
    #productsCarousel .tech-label {
       font-size: 0.7rem;  /* Keep it small but visible */
    margin-bottom: 6px;  /* Reduced margin */
    }
    
    #productsCarousel .product-tech {
        gap: 5px;  /* Smaller gap */
        margin-bottom: 12px;
    }
    
    #productsCarousel .tech-tag {
        padding: 2px 6px;
        font-size: 0.65rem;
    }
    
    #productsCarousel .product-footer {
        margin-top: auto;  /* Push to bottom */
        flex-shrink: 0;  /* Don't shrink */
    }
    
    #productsCarousel .product-btn {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    #productsCarousel .product-badge,
    #productsCarousel .product-status {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
}

/* Additional fix for card overflow */
#productsCarousel .product-card {
    max-width: 90vw;
    overflow: hidden;  /* Prevent any content overflow */
    box-sizing: border-box;
}

/* ======= MODAL CONTENT STYLES (Enhanced Dark Theme) ======= */
.product-detail {
    font-family: 'Inter', sans-serif;
    color: var(--text, #ffffff);
}

.detail-section {
    margin-bottom: 35px;
}

.detail-section h4 {
    color: var(--skills-primary, #00aeef);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    position: relative;
}

.detail-section h4::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--skills-primary, #00aeef);
}

.detail-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-section li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    color: var(--text-dim, rgba(255, 255, 255, 0.8));
    line-height: 1.6;
}

.detail-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--skills-primary, #00aeef);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
}

.detail-section li strong {
    color: var(--text, #ffffff);
    font-weight: 600;
}

.data-sources,
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.source-tag,
.tech-item {
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    color: var(--skills-primary, #00aeef);
    border: 1px solid rgba(0, 174, 239, 0.3);
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.source-tag:hover,
.tech-item:hover {
    background: rgba(0, 174, 239, 0.1);
    border-color: var(--skills-primary, #00aeef);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 174, 239, 0.2);
}

.coverage-stats,
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.stat-box,
.achievement-item {
    text-align: center;
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    padding: 25px 15px;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-box::before,
.achievement-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--skills-primary, #00aeef), transparent);
    animation: slideLight 3s linear infinite;
}

.stat-box:hover,
.achievement-item:hover {
    transform: translateY(-5px);
    border-color: var(--skills-primary, #00aeef);
    box-shadow: 0 10px 25px rgba(0, 174, 239, 0.15);
}

.stat-num,
.achievement-num {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--skills-primary, #00aeef);
    margin-bottom: 8px;
    line-height: 1;
}

.stat-label,
.achievement-label {
    font-size: 0.95rem;
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    font-weight: 500;
}

.tech-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin: 25px 0;
}

.flow-step {
    text-align: center;
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--card-bd, rgba(255, 255, 255, 0.1));
    padding: 25px 20px;
    border-radius: 16px;
    min-width: 140px;
    transition: all 0.3s ease;
}

.flow-step:hover {
    transform: translateY(-3px);
    border-color: var(--skills-primary, #00aeef);
    box-shadow: 0 8px 20px rgba(0, 174, 239, 0.15);
}

.flow-step i {
    display: block;
    font-size: 1.8rem;
    color: var(--skills-primary, #00aeef);
    margin-bottom: 12px;
}

.flow-step span {
    display: block;
    font-weight: 700;
    color: var(--text, #ffffff);
    margin-bottom: 6px;
    font-size: 1rem;
}

.flow-step small {
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
    font-size: 0.85rem;
    font-weight: 500;
}

.flow-arrow {
    font-size: 1.8rem;
    color: var(--skills-primary, #00aeef);
    font-weight: bold;
}

.screenshot-gallery {
    margin-top: 35px;
}

.screenshot-gallery h4 {
    color: var(--skills-primary, #00aeef);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.screenshot-placeholder {
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 2px dashed var(--card-bd, rgba(255, 255, 255, 0.2));
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.screenshot-placeholder:hover {
    background: rgba(0, 174, 239, 0.05);
    border-color: var(--skills-primary, #00aeef);
    border-style: solid;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 174, 239, 0.15);
}

.screenshot-placeholder i {
    font-size: 2.5rem;
    color: var(--skills-primary, #00aeef);
    margin-bottom: 15px;
}

.screenshot-placeholder p {
    margin: 0;
    color: var(--text, #ffffff);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .highlight-card::before,
    .knowledge-section::before,
    .slideLight {
        animation: none;
    }

    #productsCarousel .product-card,
    .highlight-card,
    .sector-tag,
    .product-btn,
    .view-reports-btn {
        transition: none;
    }

    #productsCarousel .product-card {
        transition: transform 0.3s ease;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    .highlight-card,
    .product-card,
    .knowledge-section {
        border-width: 2px;
    }

    .sector-tag:hover,
    .sector-tag.active {
        background: var(--skills-primary, #00aeef);
        color: #000;
    }

    #productsCarousel>input[type="radio"]:checked {
        box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.5);
    }
}

/* Focus Styles for Accessibility */
#productsCarousel>input[type="radio"]:focus-visible {
    outline: 2px solid var(--skills-primary, #00aeef);
    outline-offset: 2px;
}

.products-prev:focus-visible,
.products-next:focus-visible,
.product-btn:focus-visible,
.view-reports-btn:focus-visible {
    outline: 2px solid var(--skills-primary, #00aeef);
    outline-offset: 2px;
}

.sector-tag:focus-visible {
    outline: 2px solid var(--skills-primary, #00aeef);
    outline-offset: 2px;
}

.t4d-carousel .product-card {
    transition: all 0.6s ease; /*Slower transition for smoother movement*/
}


/* ===== FINAL OVERRIDES FOR PRODUCT DESCRIPTION ===== */
.t4d-carousel .product-card .product-description {
  color: var(--text-dim, rgba(255, 255, 255, 0.6));
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 16px;
}


/* ===========================================
   WHAT'S NEW POPUP (scoped styles only)
   Applies ONLY when wrapper class = .whatsnew-popup
   =========================================== */

/* Layout for the list of highlights */
.whatsnew-popup .whatsnew-list{
  display: grid;
  gap: 24px;                 /* space between highlight cards */
  margin-top: 8px;
}

/* Highlight item container (glass + gold accent) */
.whatsnew-popup .whatsnew-item{
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 194, 14, 0.18);
  border-left: 4px solid rgba(255, 194, 14, 0.75);
  border-radius: 16px;
  padding: 16px 16px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.whatsnew-popup .whatsnew-item:hover{
  border-color: rgba(255, 194, 14, 0.35);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35),
              0 0 16px rgba(255, 194, 14, 0.08);
  transform: translateY(-1px);
}

/* Item title */
.whatsnew-popup .whatsnew-title{
  margin: 0 0 6px;
  color: rgba(18, 26, 38, 0.95); /* readable on light modal bg */
  font-weight: 800;
}

/* IMPORTANT: disable any global "h4::after underline" in popups
   This fixes the "two divider lines" problem */
.whatsnew-popup .whatsnew-title::after{
  display: none !important;
  content: none !important;
}

/* Subtitle below title */
.whatsnew-popup .whatsnew-subtitle{
  margin: 0 0 10px;
  font-style: italic;
  color: rgba(72, 84, 102, 0.95);
}

/* Blue divider AFTER subtitle (only divider we want inside each item) */
.whatsnew-popup .whatsnew-divider{
  width: 56px;
  height: 3px;
  background: rgba(0, 174, 239, 0.95);
  border-radius: 999px;
  margin: 10px 0 12px;
}

/* Description text */
.whatsnew-popup .whatsnew-desc{
  margin: 0;
  line-height: 1.55;
  color: #0b0d10f2;
}

/* ===========================================
   CTA BUTTON (Visit T4D)
   =========================================== */

/* Make CTA button smaller than default pop-up buttons */
.whatsnew-popup .product-btn--mini{
  margin-top: 16px;        /* more gap from text above */
  width: auto !important;
  display: inline-flex;

  padding: 11px 18px;      /* wider and more clickable */
  font-size: 13px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Optional: if your global .product-btn forces full width */
.whatsnew-popup .product-btn{
  width: auto;
}

/* ===========================================
   Mobile adjustments (optional but recommended)
   =========================================== */
@media (max-width: 520px){
  .whatsnew-popup .product-btn--mini{
    width: 100% !important;  /* full width only on small screens */
    justify-content: center;
  }
}