/* ====== HERO SECTION ====== */
.hero .hero-label {
 display: inline-block;
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.12em;
 color: #c9a227;
 margin-bottom: 1rem;
}
.hero h1 {
 font-size: clamp(1.75rem, 4vw, 2.75rem);
 font-weight: 700;
 color: #fff;
 margin-bottom: 1rem;
 line-height: 1.2;
 max-width: 700px;
}
.hero .hero-desc {
 font-size: 1.1rem;
 color: rgba(255,255,255,0.8);
 max-width: 650px;
 margin-bottom: 1rem;
 line-height: 1.6;
}
.hero .hero-buttons {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 margin-bottom: 1.25rem;
}

/* Hero features bar */
.hero-features {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
 margin-top: 2rem;
}
.hero-feature-item {
 background: rgba(255,255,255,0.08);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 10px;
 padding: 14px 16px;
 text-align: center;
 transition: all 0.3s ease;
}
.hero-feature-item:hover {
 background: rgba(255,255,255,0.14);
 transform: translateY(-3px);
}
.hero-feature-item i {
 font-size: 1.75rem;
 color: #c9a227;
 margin-bottom: 10px;
}
.hero-feature-item h4 {
 font-size: 0.95rem;
 font-weight: 600;
 color: #fff;
 margin-bottom: 4px;
}
.hero-feature-item p {
 font-size: 0.8rem;
 color: rgba(255,255,255,0.6);
 margin: 0;
}
@media (max-width: 768px) {
 .hero-features { grid-template-columns: repeat(2, 1fr); }
 .hero { padding: 80px 0 50px; }
}

/* ====== CHART / VISUAL ====== */
.cost-chart {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px;
}
.cost-chart-title {
 font-size: 0.875rem;
 font-weight: 600;
 color: #1e293b;
 margin-bottom: 1rem;
 text-align: center;
}
.cost-chart-bar {
 display: flex;
 height: 40px;
 border-radius: 6px;
 overflow: hidden;
 margin-bottom: 1rem;
}
.chart-segment {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 0.75rem;
 font-weight: 600;
 transition: all 0.3s ease;
}
.chart-segment:hover { opacity: 0.85; }
.chart-segment.dispo { background: #0d3a5c; width: 45%; }
.chart-segment.trans { background: #0066CC; width: 30%; }
.chart-segment.polym { background: #c9a227; width: 15%; }
.chart-segment.power { background: #059669; width: 10%; }
.chart-legend {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 8px;
}
.legend-item {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 0.8rem;
 color: #4b5563;
}
.legend-dot {
 width: 12px;
 height: 12px;
 border-radius: 3px;
 flex-shrink: 0;
}

/* ====== EQUIPMENT CARDS ====== */
.equipment-card-sludge {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
 transition: all 0.3s ease; display: flex;
 flex-direction: column;
}
.equipment-card-sludge:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.10);
 transform: translateY(-4px);
}
.equipment-card-sludge .icon-circle {
 width: 56px;
 height: 56px;
 border-radius: 50%;
 background: rgba(201,162,39,0.12);
 color: #c9a227;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 margin-bottom: 1.25rem;
}
.equipment-card-sludge h3 {
 font-size: 1.2rem;
 font-weight: 600;
 color: #0d3a5c;
 margin-bottom: 0.75rem;
}
.equipment-card-sludge p {
 font-size: 0.9375rem;
 color: #4b5563;
 line-height: 1.6;
 margin-bottom: 1rem;
 flex: 1;
}
.equipment-card-sludge .specs {
 font-size: 0.8rem;
 color: #6b7280;
 border-top: 1px solid #e5e7eb;
 padding-top: 1rem;
 margin-bottom: 1rem;
}
.equipment-card-sludge .cta-link {
 font-size: 0.875rem;
 font-weight: 600;
 color: #0066CC;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: gap 0.2s ease;
}
.equipment-card-sludge .cta-link:hover { gap: 10px; }

/* ====== TABLE ====== */
.table-section .data-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.9375rem;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.table-section .data-table thead th {
 background: #0d3a5c;
 color: #fff;
 padding: 14px 18px;
 text-align: left;
 font-weight: 600;
 font-size: 0.85rem;
 white-space: nowrap;
}
.table-section .data-table tbody tr:nth-child(even) { background: #f7f9fc; }
.table-section .data-table tbody tr { transition: background 0.15s ease; }
.table-section .data-table tbody tr:hover { background: #eef2f7; }
.table-section .data-table td {
 padding: 14px 18px;
 border-bottom: 1px solid #e5e7eb;
 color: #4b5563;
 font-size: 0.875rem;
}
.table-section .data-table td:first-child {
 font-weight: 600;
 color: #1e293b;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ====== PROCESS STEPS ====== */
.process-flow {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 20px;
 position: relative;
}
.process-flow::before {
 content: '';
 position: absolute;
 top: 28px;
 left: 10%;
 right: 10%;
 height: 2px;
 border-top: 2px dashed #d1d5db;
 z-index: 0;
}
@media (max-width: 1024px) {
 .process-flow { grid-template-columns: repeat(3, 1fr); }
 .process-flow::before { display: none; }
}
@media (max-width: 768px) {
 .process-flow { grid-template-columns: 1fr; }
}
.process-step-card {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px 20px;
 text-align: center;
 position: relative;
 z-index: 1;
 transition: all 0.3s ease;
}
.process-step-card:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 transform: translateY(-4px);
}
.step-number {
 width: 52px;
 height: 52px;
 background: #0066CC;
 color: #fff;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
 font-weight: 700;
 margin: 0 auto 1rem;
}
.process-step-card h4 {
 font-size: 1rem;
 font-weight: 600;
 color: #0d3a5c;
 margin-bottom: 0.5rem;
}
.process-step-card p {
 font-size: 0.875rem;
 color: #4b5563;
 line-height: 1.55;
 margin: 0;
}

/* ====== APPLICATION CARDS ====== */
.app-card {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px;
 transition: all 0.3s ease;
 text-decoration: none;
 color: inherit;
 display: block;
}
.app-card:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 transform: translateY(-4px);
 border-color: #0066CC;
}
.app-card .icon-wrap {
 width: 48px;
 height: 48px;
 border-radius: 10px;
 background: rgba(0,102,204,0.08);
 color: #0066CC;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.3rem;
 margin-bottom: 1rem;
}
.app-card h4 {
 font-size: 1.05rem;
 font-weight: 600;
 color: #0d3a5c;
 margin-bottom: 0.5rem;
}
.app-card p {
 font-size: 0.875rem;
 color: #4b5563;
 line-height: 1.55;
 margin: 0;
}

/* ====== SERVICE CARDS ====== */
.service-card-sludge {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px;
 transition: all 0.3s ease; }
.service-card-sludge:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 transform: translateY(-4px);
}
.service-card-sludge .icon-wrap {
 width: 52px;
 height: 52px;
 border-radius: 12px;
 background: linear-gradient(135deg, rgba(0,102,204,0.08) 0%, rgba(0,102,204,0.03) 100%);
 color: #0066CC;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 margin-bottom: 1.25rem;
}
.service-card-sludge h3 {
 font-size: 1.15rem;
 font-weight: 600;
 color: #0d3a5c;
 margin-bottom: 0.75rem;
}
.service-card-sludge p {
 font-size: 0.9375rem;
 color: #4b5563;
 line-height: 1.6;
 margin-bottom: 1.25rem;
}

/* ====== STATS ROW ====== */
.stats-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
}
.stat-box {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px 24px;
 text-align: center;
 transition: all 0.3s ease;
}
.stat-box:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 transform: translateY(-4px);
}
.stat-number {
 font-size: 2.25rem;
 font-weight: 700;
 color: #0d3a5c;
 margin-bottom: 0.5rem;
 line-height: 1;
}
.stat-number .accent { color: #0066CC; }
.stat-label {
 font-size: 0.9rem;
 color: #4b5563;
 line-height: 1.4;
}
@media (max-width: 768px) {
 .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ====== RESOURCE CARDS ====== */
.resource-card-sludge {
 background: #fff;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 14px;
 transition: all 0.3s ease;
 text-decoration: none;
 color: inherit;
 display: block;
}
.resource-card-sludge:hover {
 box-shadow: 0 8px 24px rgba(0,0,0,0.08);
 transform: translateY(-4px);
 border-color: #0066CC;
}
.resource-card-sludge i {
 font-size: 1.5rem;
 color: #0066CC;
 margin-bottom: 0.75rem;
 display: block;
}
.resource-card-sludge .res-type {
 font-size: 0.7rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: #6b7280;
 margin-bottom: 0.5rem;
 display: block;
}
.resource-card-sludge h4 {
 font-size: 1.05rem;
 font-weight: 600;
 color: #0d3a5c;
 margin-bottom: 0.5rem;
}
.resource-card-sludge p {
 font-size: 0.875rem;
 color: #4b5563;
 line-height: 1.55;
 margin: 0 0 1rem;
}
.resource-card-sludge .res-link {
 font-size: 0.85rem;
 font-weight: 600;
 color: #0066CC;
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

/* ====== CTA SECTION ====== */
.cta-section-sludge {
 background: linear-gradient(135deg, #0d3a5c 0%, #0a2840 100%);
 padding: 80px 0;
 text-align: center;
}
.cta-section-sludge h2 {
 font-size: 2rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 1rem;
}
.cta-section-sludge p {
 font-size: 1.05rem;
 color: rgba(255,255,255,0.7);
 max-width: 600px;
 margin: 0 auto 1rem;
}
.cta-section-sludge .btn-primary {
 background: #0066CC;
 color: #fff;
 border: none;
 padding: 14px 36px;
 font-weight: 600;
 border-radius: 4px;
 font-size: 1rem;
 cursor: pointer;
 text-decoration: none;
 display: inline-block;
 box-shadow: 0 4px 12px rgba(0,102,204,0.3);
 transition: all 0.3s ease;
}
.cta-section-sludge .btn-primary:hover {
 background: #005bb5;
 transform: scale(1.02);
}
.cta-section-sludge .btn-secondary {
 background: transparent;
 color: #fff;
 border: 1px solid rgba(255,255,255,0.5);
 padding: 14px 36px;
 font-weight: 600;
 border-radius: 4px;
 font-size: 1rem;
 cursor: pointer;
 text-decoration: none;
 display: inline-block;
 transition: all 0.3s ease;
 margin-left: 1rem;
}
.cta-section-sludge .btn-secondary:hover {
 background: rgba(255,255,255,0.1);
 border-color: #fff;
}
@media (max-width: 768px) {
 .cta-section-sludge .btn-secondary { margin-left: 0; margin-top: 1rem; }
 .cta-section-sludge { padding: 60px 0; }
}

/* ====== GENERAL SECTIONS ====== */
.section-light { background: #f7f9fc; }
.section-header { margin-bottom: 0.75rem; }
.section-label {
 display: inline-block;
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 color: #0066CC;
 margin-bottom: 0.75rem;
}
.section-title {
 font-size: clamp(1.5rem, 3vw, 2rem);
 font-weight: 700;
 color: #0d3a5c;
 margin-bottom: 0.5rem;
}
.section-subtitle {
 font-size: 1rem;
 color: #4b5563;
 max-width: 650px;
}
.two-col-split {
 display: grid;
 grid-template-columns: 1.2fr 1fr;
 gap: 48px;
 align-items: center;
}
@media (max-width: 768px) {
 .two-col-split { grid-template-columns: 1fr; }
}
.stat-callout {
 border-left: 4px solid #c9a227;
 padding: 16px 20px;
 background: rgba(201,162,39,0.06);
 border-radius: 0 6px 6px 0;
 margin-top: 1.5rem;
}
.stat-callout .value {
 font-size: 1.5rem;
 font-weight: 700;
 color: #0d3a5c;
}
.stat-callout .desc {
 font-size: 0.875rem;
 color: #4b5563;
}
[data-animate] {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate].visible {
 opacity: 1;
 transform: translateY(0);
}

@media (max-width: 768px) { .table-section .data-table thead th { white-space: normal; } }



.rg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:1.5rem}
.rg-card{background:var(--white);border:1px solid var(--border-gray);border-radius:10px;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.rg-card .rg-icon{font-size:1.4rem;color:var(--primary-blue)}
.rg-card h4{font-size:1rem;font-weight:600;color:var(--text-dark);margin:0}
.rg-card p{font-size:.875rem;color:var(--text-medium);margin:0;flex:1}
.rg-card a{font-size:.85rem;font-weight:600;color:var(--primary-blue);text-decoration:none;margin-top:.25rem}
.rg-card a:hover{text-decoration:underline}