/* Banner */
 .mi-banner {
     position: relative;
     width: 100%;
     min-height: 320px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(217, 119, 6, 0.06) 50%, rgba(5, 150, 105, 0.04) 100%);
     border-bottom: 1px solid var(--glass-border);
     backdrop-filter: blur(3px);
 }

 .mi-banner-content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 60px 24px;
 }

 .mi-banner-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 20px;
     background: rgba(217, 119, 6, 0.1);
     border: 1px solid rgba(217, 119, 6, 0.25);
     border-radius: 20px;
     font-size: 14px;
     font-weight: 600;
     color: var(--accent-gold);
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 24px;
     animation: miFadeInUp 0.8s 0.15s ease-out both;
 }

 .mi-banner-tag .pulse-dot {
     width: 6px;
     height: 6px;
     background: var(--accent-gold);
     border-radius: 50%;
     animation: miPulse 2s ease-in-out infinite;
 }

 .mi-banner-title {
     font-size: clamp(36px, 6vw, 64px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -2px;
     margin-bottom: 16px;
     animation: miFadeInUp 0.8s 0.25s ease-out both;
 }

 .mi-banner-subtitle {
     font-size: clamp(16px, 1.5vw, 20px);
     color: var(--text-secondary);
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.6;
     animation: miFadeInUp 0.8s 0.35s ease-out both;
 }

 .mi-banner-line {
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
     border-radius: 2px;
     margin: 24px auto 0;
     animation: miExpandLine 0.8s 0.5s ease-out both;
 }

 /* ===== SECTION HEADER ===== */
 .section-header {
     text-align: center;
     margin-bottom: 64px;
     position: relative;
     z-index: 2;
 }

 .accent-line {
     width: 48px;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
     border-radius: 2px;
     margin: 0 auto 20px;
 }

 .section-tag {
     display: inline-block;
     padding: 8px 20px;
     background: rgba(217, 119, 6, 0.08);
     border: 1px solid rgba(217, 119, 6, 0.2);
     border-radius: 20px;
     font-size: 15px;
     font-weight: 600;
     color: var(--accent-gold);
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 20px;
 }

 .section-title {
     font-size: clamp(36px, 5vw, 56px);
     font-weight: 700;
     line-height: 1.1;
     letter-spacing: -2px;
     color: var(--text-primary);
     margin-bottom: 16px;
 }

 .section-subtitle {
     font-size: 17px;
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
 }


 /* ===== SECTIONS ===== */
 .section {
     padding: 100px 40px;
     position: relative;
     z-index: 2;
 }

 /* ===== MARKET OUTLOOK ===== */
 /* ========== GRID ========== */
 .outlook-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
     max-width: 1200px;
     margin: 0 auto;
 }

 @media (max-width: 768px) {
     .outlook-grid {
         grid-template-columns: 1fr;
     }

     .section {
         padding: 60px 20px;
     }
 }

 /* ========== CARD ========== */
 .outlook-card {
     background: #fff;
     border: 1px solid rgba(15, 23, 42, 0.08);
     border-radius: 20px;
     padding: 32px;
     display: flex;
     align-items: flex-start;
     gap: 24px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     opacity: 0;
     animation: fadeUp 0.6s ease-out forwards;
 }

 .outlook-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .outlook-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .outlook-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .outlook-card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .outlook-card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .outlook-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
 }

 /* Colored left border */
 .outlook-card::before {
     content: '';
     position: absolute;
     left: 0;
     top: 20px;
     bottom: 20px;
     width: 4px;
     border-radius: 0 4px 4px 0;
     transition: top 0.3s ease, bottom 0.3s ease;
 }

 .outlook-card:hover::before {
     top: 12px;
     bottom: 12px;
 }

 .card-blue::before {
     background: linear-gradient(180deg, #3b82f6, #1d4ed8);
 }

 .card-green::before {
     background: linear-gradient(180deg, #84cc16, #65a30d);
 }

 .card-orange::before {
     background: linear-gradient(180deg, #f97316, #ea580c);
 }

 .card-teal::before {
     background: linear-gradient(180deg, #14b8a6, #0d9488);
 }

 .card-wide::before {
     background: linear-gradient(180deg, var(--primary-green), var(--accent-gold));
 }

 /* Icon circle */
 .card-icon-wrap {
     flex-shrink: 0;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     background: #fff;
 }

 .card-icon-wrap::before {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 50%;
     border: 2px solid;
     transition: all 0.3s ease;
 }

 .outlook-card:hover .card-icon-wrap::before {
     inset: -4px;
 }

 .card-blue .card-icon-wrap::before {
     border-color: rgba(59, 130, 246, 0.3);
 }

 .card-green .card-icon-wrap::before {
     border-color: rgba(132, 204, 22, 0.4);
 }

 .card-orange .card-icon-wrap::before {
     border-color: rgba(249, 115, 22, 0.3);
 }

 .card-teal .card-icon-wrap::before {
     border-color: rgba(20, 184, 166, 0.3);
 }

 .card-wide .card-icon-wrap::before {
     border-color: rgba(5, 150, 105, 0.25);
 }

 .card-icon-wrap svg {
     width: 36px;
     height: 36px;
 }

 /* Decorative dot */
 .card-dot {
     position: absolute;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .outlook-card:hover .card-dot {
     transform: scale(1.4);
 }

 .card-blue .card-dot {
     background: #3b82f6;
     bottom: 4px;
     right: 2px;
 }

 .card-green .card-dot {
     background: #84cc16;
     bottom: 4px;
     right: 2px;
 }

 .card-orange .card-dot {
     background: #f97316;
     bottom: 4px;
     right: 2px;
 }

 .card-teal .card-dot {
     background: #14b8a6;
     bottom: 4px;
     right: 2px;
 }

 .card-wide .card-dot {
     background: var(--primary-green);
     bottom: 4px;
     right: 2px;
 }

 /* Content */
 .card-content h3 {
     font-size: 17px;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 12px;
     line-height: 1.3;
 }

 .outlook-list {
     list-style: none;
     padding: 0;
 }

 .outlook-list li {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.7;
     position: relative;
     padding-left: 16px;
 }

 .outlook-list li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 9px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
 }

 .card-blue .outlook-list li::before {
     background: #3b82f6;
 }

 .card-green .outlook-list li::before {
     background: #84cc16;
 }

 .card-orange .outlook-list li::before {
     background: #f97316;
 }

 .card-teal .outlook-list li::before {
     background: #14b8a6;
 }

 .card-wide .outlook-list li::before {
     background: var(--primary-green);
 }

 .outlook-list li strong {
     color: var(--text-primary);
     font-weight: 700;
 }

 .outlook-list li a {
     color: var(--primary-green);
     font-weight: 600;
     border-bottom: 1px dashed rgba(5, 150, 105, 0.3);
 }

 .outlook-list li a:hover {
     border-bottom-style: solid;
 }

 /* Wide card */
 .card-wide {
     grid-column: 1 / -1;
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.03), rgba(217, 119, 6, 0.02));
 }

 .card-wide .card-content p {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.75;
 }

 .card-wide .card-content p strong {
     color: var(--text-primary);
     font-weight: 700;
 }

 /* Animations */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

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

 @media (prefers-reduced-motion: reduce) {

     .section-header,
     .outlook-card {
         animation: none;
         opacity: 1;
     }
 }

 /* ===== BLOCKQUOTE / HIGHLIGHT BOX ===== */
 .highlight-box {
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(217, 119, 6, 0.04));
     border: 1px solid rgba(5, 150, 105, 0.15);
     border-radius: 20px;
     padding: 32px 40px;
     position: relative;
     overflow: hidden;
 }

 .highlight-box::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: linear-gradient(to bottom, var(--primary-green), var(--accent-gold));
 }

 .highlight-box p {
     font-size: 16px;
     color: var(--text-secondary);
     line-height: 1.8;
     font-style: italic;
 }

 .highlight-box strong {
     color: var(--text-primary);
     font-weight: 700;
     font-style: normal;
 }

 /* ===== ENERGY SECTOR OUTLOOK ===== */
 .energy-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
 }

 .energy-card {
     padding: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 320px;
 }

 .energy-card.reverse {
     direction: rtl;
 }

 .energy-card.reverse>* {
     direction: ltr;
 }

 .energy-text {
     padding: 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .energy-text h3 {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 20px;
     letter-spacing: -0.5px;
 }

 .energy-visual {
     position: relative;
     overflow: hidden;
     min-height: 320px;
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(217, 119, 6, 0.03));
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .energy-visual img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.6s ease;
 }

 .glass-card:hover .energy-visual img {
     transform: scale(1.05);
 }

 /* Chart bars for energy */
 .chart-wrap {
     display: flex;
     align-items: flex-end;
     gap: 16px;
     padding: 40px;
     height: 100%;
 }

 .chart-bar {
     width: 60px;
     border-radius: 8px 8px 0 0;
     background: linear-gradient(to top, var(--c, var(--primary-green)), rgba(255, 255, 255, 0.2));
     height: var(--h, 50%);
     transition: transform 0.4s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     padding-bottom: 12px;
     font-size: 12px;
     font-weight: 700;
     color: #ffffff;
     text-align: center;
     line-height: 1.3;
     box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
 }

 .chart-bar:hover {
     transform: scaleY(1.08);
 }

 .chart-bar span {
     font-size: 11px;
     font-weight: 500;
     opacity: 0.8;
 }

 /* ===== EV SECTOR ===== */
 .ev-showcase {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 0;
     min-height: 400px;
 }

 .ev-visual {
     position: relative;
     overflow: hidden;
     min-height: 400px;
 }

 .ev-visual img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.6s ease;
 }

 .glass-card:hover .ev-visual img {
     transform: scale(1.05);
 }

 .ev-visual::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 100px;
     height: 100%;
     background: linear-gradient(to left, var(--bg-deep), transparent);
 }

 .ev-content {
     padding: 48px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .ev-content h3 {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: 24px;
     letter-spacing: -0.5px;
 }

 .ev-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .ev-list li {
     font-size: 15px;
     color: var(--text-secondary);
     line-height: 1.7;
     position: relative;
     padding-left: 28px;
 }

 .ev-list li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 8px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange));
 }

 .ev-list li strong {
     color: var(--text-primary);
     font-weight: 700;
 }

 /* ===== HYDROGEN / NUCLEAR ===== */
 .hydro-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }

 .hydro-card {
     padding: 40px 32px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
 }

 .hydro-icon {
     width: 64px;
     height: 64px;
     border-radius: 20px;
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(217, 119, 6, 0.08));
     border: 1px solid rgba(5, 150, 105, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     transition: transform 0.4s ease, box-shadow 0.4s;
 }

 .glass-card:hover .hydro-icon {
     transform: translateY(-4px) scale(1.1);
     box-shadow: 0 12px 30px rgba(5, 150, 105, 0.12);
 }

 .hydro-card h4 {
     font-size: 17px;
     font-weight: 700;
     color: var(--text-primary);
     line-height: 1.3;
 }

 .hydro-card p {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.7;
 }

 .hydro-card p strong {
     color: var(--text-primary);
 }

 /* ===== SCROLL ANIMATIONS ===== */
 .reveal {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
         transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-delay-1 {
     transition-delay: 0.1s;
 }

 .reveal-delay-2 {
     transition-delay: 0.2s;
 }

 .reveal-delay-3 {
     transition-delay: 0.3s;
 }

 .reveal-delay-4 {
     transition-delay: 0.4s;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1199px) {

     .outlook-grid,
     .energy-grid {
         grid-template-columns: 1fr;
     }

     .outlook-card.wide {
         grid-column: 1;
     }

     .energy-card,
     .energy-card.reverse {
         grid-template-columns: 1fr;
         direction: ltr;
     }

     .energy-visual {
         min-height: 260px;
         order: -1;
     }

     .ev-showcase {
         grid-template-columns: 1fr;
     }

     .ev-visual {
         min-height: 300px;
         order: -1;
     }

     .ev-visual::after {
         display: none;
     }

     .hydro-grid {
         grid-template-columns: 1fr;
     }

     .stat-bar {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {

     .section,
     .page-hero {
         padding-left: 20px;
         padding-right: 20px;
     }

     .container {
         padding: 0 20px;
     }

     .stat-bar {
         grid-template-columns: 1fr 1fr;
         gap: 12px;
         padding: 0 20px;
     }

     .outlook-card,
     .energy-text,
     .ev-content,
     .hydro-card {
         padding: 32px 24px;
     }

     .highlight-box {
         padding: 24px;
     }

     .outlook-card {
         flex-direction: column;
     }

     .ev-list {
         padding: 0;
     }
 }

 @media (max-width: 480px) {
     .stat-bar {
         grid-template-columns: 1fr;
     }

     .stat-pill {
         padding: 20px 16px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .reveal {
         transition: none;
         opacity: 1;
         transform: none;
     }

     .blob {
         animation: none;
     }
 }

 @media (max-width: 480px) {


     .mi-banner {
         min-height: 260px;
     }
 }

 .stat-bar {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     max-width: 1100px;
     width: 100%;
     margin: 30px auto 0;
     position: relative;
     z-index: 3;
 }

 .stat-pill {
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.6);
     border-radius: 24px;
     padding: 36px 20px 32px;
     text-align: center;
     transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
     opacity: 0;
     transform: translateY(30px);
     animation: pillReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }

 .stat-pill:nth-child(1) {
     animation-delay: 0.1s;
 }

 .stat-pill:nth-child(2) {
     animation-delay: 0.22s;
 }

 .stat-pill:nth-child(3) {
     animation-delay: 0.34s;
 }

 .stat-pill:nth-child(4) {
     animation-delay: 0.46s;
 }

 @keyframes pillReveal {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 .stat-pill:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1), 0 8px 24px rgba(0, 0, 0, 0.04);
     border-color: rgba(255, 255, 255, 0.9);
 }

 /* Icon circle */
 .stat-icon-wrap {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     position: relative;
     background: rgba(255, 255, 255, 0.9);
 }

 .stat-icon-wrap::before {
     content: '';
     position: absolute;
     inset: -3px;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.4s ease;
 }

 .stat-pill:hover .stat-icon-wrap::before {
     inset: -6px;
 }

 /* Per-pill icon ring colors */
 .stat-pill.pill-blue .stat-icon-wrap::before {
     border-color: rgba(30, 58, 95, 0.2);
 }

 .stat-pill.pill-green .stat-icon-wrap::before {
     border-color: rgba(5, 150, 105, 0.2);
 }

 .stat-pill.pill-orange .stat-icon-wrap::before {
     border-color: rgba(245, 158, 11, 0.25);
 }

 .stat-pill.pill-purple .stat-icon-wrap::before {
     border-color: rgba(124, 58, 237, 0.2);
 }

 .stat-pill.pill-blue:hover .stat-icon-wrap::before {
     border-color: rgba(30, 58, 95, 0.35);
 }

 .stat-pill.pill-green:hover .stat-icon-wrap::before {
     border-color: rgba(5, 150, 105, 0.35);
 }

 .stat-pill.pill-orange:hover .stat-icon-wrap::before {
     border-color: rgba(245, 158, 11, 0.4);
 }

 .stat-pill.pill-purple:hover .stat-icon-wrap::before {
     border-color: rgba(124, 58, 237, 0.35);
 }

 .stat-icon-wrap svg {
     width: 38px;
     height: 38px;
 }

 /* Number */
 .stat-number {
     font-size: clamp(32px, 4vw, 48px);
     font-weight: 900;
     color: var(--text-primary);
     line-height: 1;
     letter-spacing: -2px;
     margin-bottom: 10px;
     font-variant-numeric: tabular-nums;
 }

 .stat-number .suffix {
     font-size: 0.55em;
     font-weight: 700;
     margin-left: 2px;
     vertical-align: super;
 }

 /* Label */
 .stat-label {
     font-size: 13px;
     color: var(--text-muted);
     letter-spacing: 2px;
     text-transform: uppercase;
     font-weight: 600;
     margin-bottom: 16px;
 }

 /* Underline */
 .stat-underline {
     width: 40px;
     height: 3px;
     border-radius: 2px;
     margin: 0 auto;
     transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .stat-pill:hover .stat-underline {
     width: 60px;
 }

 .pill-blue .stat-underline {
     background: var(--stat-blue);
 }

 .pill-green .stat-underline {
     background: var(--stat-green);
 }

 .pill-orange .stat-underline {
     background: var(--stat-orange);
 }

 .pill-purple .stat-underline {
     background: var(--stat-purple);
 }

 /* Decorative dot */
 .stat-dot {
     position: absolute;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     opacity: 0.3;
     transition: all 0.4s ease;
 }

 .stat-pill:hover .stat-dot {
     opacity: 0.6;
     transform: scale(1.3);
 }

 .pill-blue .stat-dot {
     background: var(--stat-blue);
     top: 16px;
     right: 16px;
 }

 .pill-green .stat-dot {
     background: var(--stat-green);
     bottom: 16px;
     right: 16px;
 }

 .pill-orange .stat-dot {
     background: var(--stat-orange);
     top: 16px;
     left: 16px;
 }

 .pill-purple .stat-dot {
     background: var(--stat-purple);
     bottom: 16px;
     left: 16px;
 }

 /* ========== RESPONSIVE ========== */
 @media (max-width: 900px) {
     .stat-bar {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }
 }

 @media (max-width: 480px) {
     .stat-bar {
         grid-template-columns: 1fr;
         max-width: 320px;
     }

     .stat-pill {
         padding: 28px 20px 24px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .stat-pill {
         animation: none;
         opacity: 1;
         transform: none;
         transition: none;
     }

     .stat-pill:hover {
         transform: none;
     }
 }