.datasheet-header { background: linear-gradient(135deg, var(--primary-navy) 0%, #0d3a5c 100%); color: var(--white); padding: 100px 0 60px; }
 .product-code-badge { display: inline-block; background: rgba(255,255,255,0.15); color: var(--white); padding: 6px 16px; border-radius: 20px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; }
 .photo-placeholder { background: var(--light-gray); border: 2px dashed var(--border-gray); border-radius: 12px; padding: 60px 40px; text-align: center; color: var(--text-light); }
 .photo-placeholder i { font-size: 3rem; margin-bottom: 1rem; color: var(--primary-blue); }
 .specs-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
 .specs-table th { background: var(--primary-navy); color: var(--white); padding: 12px 16px; text-align: left; font-size: 0.875rem; }
 .specs-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-gray); font-size: 0.875rem; }
 .specs-table tr:nth-child(even) { background: var(--light-gray); }
 .equipment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
 .equipment-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--light-gray); border-radius: 8px; border-left: 3px solid var(--primary-blue); }
 .equipment-item i { color: var(--primary-blue); font-size: 1.1rem; }
 .compliance-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }
 .compliance-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--light-gray); border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
 .compliance-badge i { color: var(--success-green); }
 .download-section { background: var(--primary-light); border-radius: 12px; padding: 1rem; margin: 2rem 0; }


 .containerized-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 2rem; }
 .containerized-tag { padding: 10px 20px; background: var(--light-gray); border-radius: 24px; font-size: 0.875rem; font-weight: 500; color: var(--primary-blue); text-decoration: none; transition: all 0.3s ease; display: inline-block; }
 .containerized-tag:hover { background: var(--primary-blue); color: var(--white); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 82, 155, 0.2); }
 .containerized-tag.active { background: var(--primary-blue); color: var(--white); }
 .table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
 #overview { overflow-x: hidden; }
 .compliance-badges { display: flex; flex-wrap: wrap; gap: 8px; }
 @media (max-width: 768px) {
 .specs-table th, .specs-table td { font-size: 0.75rem; padding: 8px; }
 .photo-placeholder { padding: 40px 20px; min-height: 200px; }
 .photo-placeholder i { font-size: 2.5rem; }
 #overview .container > div[style*="grid"] { grid-template-columns: 1fr !important; }
 #overview .photo-placeholder { width: 100%; box-sizing: border-box; }
 #datasheet .container > div[style*="grid"] { grid-template-columns: 1fr !important; }
 #datasheet .photo-placeholder { order: -1; margin-bottom: 1rem; }
 #overview p, #overview li { word-wrap: break-word; overflow-wrap: break-word; }
 #overview .compliance-badges { flex-wrap: wrap; }
 .compliance-badge { margin-bottom: 4px; }
 #datasheet p, #datasheet li { word-wrap: break-word; overflow-wrap: break-word; }
 #datasheet .download-section { overflow-x: hidden; }
 /* Datasheet section mobile fixes */
 #datasheet .download-section { 
 overflow-x: hidden; 
 padding: 1rem !important;
 }
 #datasheet p, 
 #datasheet li,
 #datasheet h3 {
 word-wrap: break-word !important;
 overflow-wrap: break-word !important;
 max-width: 100% !important;
 }
 #datasheet ul {
 padding-left: 1.2rem !important;
 margin-left: 0 !important;
 }
 #datasheet img {
 max-width: 100% !important;
 height: auto !important;
 }
 }
 .hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-top: 2.5rem;
 }
 .hero-feature-item {
 background: rgba(255,255,255,0.1);
 border-radius: 12px;
 padding: 14px;
 text-align: center;
 transition: all 0.3s ease;
 }
 .hero-feature-item:hover {
 background: rgba(255,255,255,0.15);
 transform: translateY(-4px);
 }
 .hero-feature-item i {
 font-size: 2rem;
 color: var(--accent-gold);
 margin-bottom: 12px;
 }
 .hero-feature-item h4 {
 color: var(--white);
 font-size: 1rem;
 margin-bottom: 4px;
 }
 .hero-feature-item p {
 color: rgba(255,255,255,0.7);
 font-size: 0.875rem;
 margin: 0;
 }
 @media (max-width: 992px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 768px) {
 .hero-features { grid-template-columns: 1fr; gap: 16px; }
 .hero-feature-item { padding: 14px; }
 }

.hero-features a.hero-feature-item { transition: all 0.3s ease; }
.hero-features a.hero-feature-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.15); }
.hero-features a.hero-feature-item:hover h4 { color: #8a6d1c; }



/* ====== ENHANCED INTERACTIVE CONTAINER CSS v2 ====== */
.eic-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.eic-frame { position: relative; width: 100%; max-width: 1100px; margin: 2rem auto; border-radius: 12px; overflow: visible; }
.eic-frame::before { content: ''; display: block; padding-top: 30%; }
.eic-shell { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(245,247,250,0.92) 0%, rgba(232,236,242,0.9) 40%, rgba(220,226,235,0.88) 100%); border: 3px solid rgba(201,162,39,0.55); border-radius: 12px; box-shadow: 0 25px 80px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5); overflow: hidden; }
.eic-shell::before { content: attr(data-label); position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(201,162,39,0.8); z-index: 10; pointer-events: none; text-transform: uppercase; }
.eic-shell::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(10,37,64,0.03) 50px), repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(10,37,64,0.03) 50px); pointer-events: none; z-index: 1; }
.eic-corner { position: absolute; width: 24px; height: 24px; border: 3px solid rgba(201,162,39,0.4); z-index: 8; pointer-events: none; }
.eic-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.eic-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.eic-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.eic-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
.eic-floor { position: absolute; bottom: 6%; left: 1.5%; right: 1.5%; height: 2px; background: linear-gradient(90deg, rgba(201,162,39,0.15), rgba(201,162,39,0.35), rgba(201,162,39,0.15)); z-index: 2; }
.eic-comp { position: absolute; border-radius: 8px; cursor: pointer; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 0.68rem; font-weight: 600; border: 2px solid transparent; overflow: hidden; text-decoration: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 3px 12px rgba(0,0,0,0.08); line-height: 1.3; color: #fff; }
.eic-comp .eic-icon { font-size: 1.15rem; margin-bottom: 3px; transition: all 0.35s ease; pointer-events: none; }
.eic-comp .eic-label { font-size: 0.6rem; padding: 0 3px; pointer-events: none; line-height: 1.2; }
.eic-comp .eic-sublabel { font-size: 0.55rem; opacity: 0.8; font-weight: 400; pointer-events: none; }
.eic-comp:hover { transform: scale(1.15); z-index: 30; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.eic-comp:hover .eic-icon { transform: scale(1.2) rotate(-5deg); }
.eic-scada { background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%); border-color: rgba(74,144,217,0.6); }
.eic-scada:hover { background: linear-gradient(135deg, #5BA0E9 0%, #468ACD 100%); box-shadow: 0 0 30px rgba(74,144,217,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-chem { background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%); border-color: rgba(155,89,182,0.6); }
.eic-chem:hover { background: linear-gradient(135deg, #AF69C6 0%, #A254BD 100%); box-shadow: 0 0 30px rgba(155,89,182,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-daf { background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%); border-color: rgba(26,188,156,0.6); }
.eic-daf:hover { background: linear-gradient(135deg, #2BCCAC 0%, #26B095 100%); box-shadow: 0 0 30px rgba(26,188,156,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-lam { background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%); border-color: rgba(46,204,113,0.6); }
.eic-lam:hover { background: linear-gradient(135deg, #3EDC81 0%, #37BE70 100%); box-shadow: 0 0 30px rgba(46,204,113,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-pump { background: linear-gradient(135deg, #E67E22 0%, #D35400 100%); border-color: rgba(230,126,34,0.6); }
.eic-pump:hover { background: linear-gradient(135deg, #F68E32 0%, #E36410 100%); box-shadow: 0 0 30px rgba(230,126,34,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-filter { background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%); border-color: rgba(39,174,96,0.6); }
.eic-filter:hover { background: linear-gradient(135deg, #37BE70 0%, #2E9459 100%); box-shadow: 0 0 30px rgba(39,174,96,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-tank { background: linear-gradient(135deg, #7F8C8D 0%, #616A6B 100%); border-color: rgba(127,140,141,0.6); }
.eic-tank:hover { background: linear-gradient(135deg, #8FA09D 0%, #717A7B 100%); box-shadow: 0 0 30px rgba(127,140,141,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-uv { background: linear-gradient(135deg, #00BCD4 0%, #00ACC1 100%); border-color: rgba(0,188,212,0.6); }
.eic-uv:hover { background: linear-gradient(135deg, #10DDE4 0%, #10BCD1 100%); box-shadow: 0 0 30px rgba(0,188,212,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-sludge { background: linear-gradient(135deg, #795548 0%, #5D4037 100%); border-color: rgba(121,85,72,0.6); }
.eic-sludge:hover { background: linear-gradient(135deg, #896558 0%, #6D5047 100%); box-shadow: 0 0 30px rgba(121,85,72,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-bio { background: linear-gradient(135deg, #8BC34A 0%, #689F38 100%); border-color: rgba(139,195,74,0.6); }
.eic-bio:hover { background: linear-gradient(135deg, #9BD35A 0%, #78AF48 100%); box-shadow: 0 0 30px rgba(139,195,74,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-aero { background: linear-gradient(135deg, #FF7043 0%, #F4511E 100%); border-color: rgba(255,112,67,0.6); }
.eic-aero:hover { background: linear-gradient(135deg, #FF8053 0%, #FF612E 100%); box-shadow: 0 0 30px rgba(255,112,67,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-mem { background: linear-gradient(135deg, #5C6BC0 0%, #3F51B5 100%); border-color: rgba(92,107,192,0.6); }
.eic-mem:hover { background: linear-gradient(135deg, #6C7BD0 0%, #4F61C5 100%); box-shadow: 0 0 30px rgba(92,107,192,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-oil { background: linear-gradient(135deg, #607D8B 0%, #455A64 100%); border-color: rgba(96,125,139,0.6); }
.eic-oil:hover { background: linear-gradient(135deg, #708D9B 0%, #556A74 100%); box-shadow: 0 0 30px rgba(96,125,139,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-cpi { background: linear-gradient(135deg, #00897B 0%, #00695C 100%); border-color: rgba(0,137,123,0.6); }
.eic-cpi:hover { background: linear-gradient(135deg, #10998B 0%, #10796C 100%); box-shadow: 0 0 30px rgba(0,137,123,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-screen { background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%); border-color: rgba(255,167,38,0.6); }
.eic-screen:hover { background: linear-gradient(135deg, #FFB736 0%, #FF9C10 100%); box-shadow: 0 0 30px rgba(255,167,38,0.5), 0 8px 32px rgba(0,0,0,0.2); }
.eic-pipe { background: linear-gradient(180deg, #90A4AE 0%, #78909C 50%, #90A4AE 100%); border: 1px solid rgba(120,144,156,0.4); border-radius: 4px !important; min-width: 4px; min-height: 4px; }
.eic-pipe:hover { background: linear-gradient(180deg, #B0C4CE 0%, #98B0BC 50%, #B0C4CE 100%); }
.eic-tip { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%) scale(0.9); background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 0; min-width: 300px; max-width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 200; text-align: left; overflow: hidden; }
.eic-comp:hover .eic-tip { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.eic-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top-color: #fff; }
.eic-tip .tip-header { padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid #F1F5F9; background: #FAFBFC; }
.eic-tip .tip-header h5 { color: #0a2540; font-size: 0.92rem; margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.eic-tip .tip-header h5 i { font-size: 1rem; }
.eic-tip .tip-body { padding: 0.75rem 1.25rem; }
.eic-tip .tip-body p { color: #546e7a; font-size: 0.8rem; line-height: 1.55; margin: 0 0 0.6rem 0; }
.eic-tip .tip-body ul { margin: 0.5rem 0; padding-left: 1.2rem; font-size: 0.78rem; color: #64748b; line-height: 1.7; }
.eic-tip .tip-body ul li { margin-bottom: 0.15rem; }
.eic-tip .eic-specs { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 1.25rem 0.5rem; }
.eic-tip .eic-specs span { background: #F1F5F9; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; color: #334155; font-weight: 500; border: 1px solid #E2E8F0; }
.eic-tip .tip-footer { padding: 0.75rem 1.25rem; background: #F8FAFC; border-top: 1px solid #F1F5F9; display: flex; align-items: center; justify-content: space-between; }
.eic-tip .tip-footer .eic-link { display: inline-flex; align-items: center; gap: 5px; color: #0066cc; font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.eic-tip .tip-footer .eic-link:hover { text-decoration: underline; }
.eic-tip .tip-footer .click-hint { font-size: 0.7rem; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.eic-shell:hover .eic-comp { opacity: 0.5; filter: grayscale(0.3); }
.eic-shell:hover .eic-comp:hover { opacity: 1; filter: grayscale(0); }
.eic-shell:hover .eic-pipe { opacity: 0.3; }
.eic-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.eic-leg { display: flex; align-items: center; gap: 7px; padding: 6px 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 0.78rem; color: #475569; font-weight: 500; cursor: pointer; transition: all 0.25s ease; }
.eic-leg:hover { border-color: #94A3B8; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); }
.eic-leg-dot { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.eic-comp.active { transform: scale(1.12) !important; z-index: 35 !important; opacity: 1 !important; filter: grayscale(0) !important; border-color: #c9a227 !important; box-shadow: 0 0 0 4px rgba(201,162,39,0.25), 0 12px 40px rgba(0,0,0,0.25) !important; }
@keyframes eicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(26,188,156,0.5);} 50%{box-shadow:0 0 0 10px rgba(26,188,156,0);} }
.eic-pulse { animation: eicPulse 2.5s ease-in-out infinite; }
@keyframes eicPulse2 { 0%,100%{box-shadow:0 0 0 0 rgba(74,144,217,0.5);} 50%{box-shadow:0 0 0 10px rgba(74,144,217,0);} }
.eic-pulse2 { animation: eicPulse2 2.5s ease-in-out infinite; }
@keyframes eicFadeIn { from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);} }
.eic-shell { animation: eicFadeIn 0.7s ease-out; }
@keyframes eicSlide { from{opacity:0;transform:translateY(12px) scale(0.88);} to{opacity:1;transform:translateY(0) scale(1);} }
.eic-comp { animation: eicSlide 0.45s ease-out backwards; }
.eic-comp:nth-child(1){animation-delay:0.1s}.eic-comp:nth-child(2){animation-delay:0.15s}.eic-comp:nth-child(3){animation-delay:0.2s}.eic-comp:nth-child(4){animation-delay:0.25s}.eic-comp:nth-child(5){animation-delay:0.3s}.eic-comp:nth-child(6){animation-delay:0.35s}.eic-comp:nth-child(7){animation-delay:0.4s}.eic-comp:nth-child(8){animation-delay:0.45s}.eic-comp:nth-child(9){animation-delay:0.5s}.eic-comp:nth-child(10){animation-delay:0.55s}.eic-comp:nth-child(11){animation-delay:0.6s}.eic-comp:nth-child(12){animation-delay:0.65s}.eic-comp:nth-child(13){animation-delay:0.7s}
@media(max-width:768px){.eic-frame::before{padding-top:55%;}.eic-comp{font-size:0.55rem;border-radius:5px;}.eic-comp .eic-icon{font-size:0.85rem;}.eic-comp .eic-label{font-size:0.5rem;}.eic-tip{min-width:200px;max-width:260px;}.eic-tip .tip-header,.eic-tip .tip-body,.eic-tip .tip-footer{padding:0.7rem 0.9rem;}.eic-tip .tip-body ul{font-size:0.72rem;}.eic-legend{gap:0.4rem;}.eic-leg{font-size:0.7rem;padding:4px 9px;}}
@media(max-width:480px){.eic-frame::before{padding-top:75%;}.eic-comp .eic-label{display:none;}.eic-comp .eic-icon{font-size:0.75rem;margin-bottom:0;}.eic-tip{min-width:160px;max-width:220px;}}


@media(max-width:768px){#overview .container>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}}

@media(max-width:768px){#datasheet .container>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}}