:root{ --primary-green: #22c55e;--primary-green-dark: #16a34a;--navy: #1e3a5f;--navy-light: #2d5a87;--light-bg: #f8fafc;--card-bg: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border-light: #e2e8f0;--glass-bg: rgba(255, 255, 255, 0.8);} *{ margin: 0;padding: 0;box-sizing: border-box;} html{ scroll-behavior: smooth;} body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;background: var(--light-bg);color: var(--text-primary);line-height: 1.7;overflow-x: hidden;} /* Navigation */ .nav{ position: fixed;top: 0;left: 0;right: 0;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(20px);border-bottom: 1px solid var(--border-light);z-index: 1000;padding: 16px 0;} .nav-container{ max-width: 1400px;margin: 0 auto;padding: 0 40px;display: flex;justify-content: space-between;align-items: center;} .nav-logo{ font-size: 20px;font-weight: 700;color: var(--navy);text-decoration: none;} .nav-logo span{ color: var(--primary-green);} /* Mobile menu toggle */ .nav-menu-toggle{ display: none;flex-direction: column;justify-content: space-between;width: 30px;height: 21px;cursor: pointer;z-index: 1001;background: none;border: none;} .nav-menu-toggle span{ display: block;height: 3px;width: 100%;background-color: var(--navy);border-radius: 3px;transition: all 0.3s ease-in-out;} .nav-menu-toggle.active span:nth-child(1){ transform: translateY(9px) rotate(45deg);} .nav-menu-toggle.active span:nth-child(2){ opacity: 0;} .nav-menu-toggle.active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg);} .nav-links{ display: flex;gap: 32px;list-style: none;} .nav-links a{ color: var(--text-secondary);text-decoration: none;font-size: 14px;font-weight: 500;transition: color 0.3s;} .nav-links a:hover{ color: var(--primary-green);} .theme-toggle{ background: rgba(255,255,255,0.1);border: 1px solid var(--border-light);width: 40px;height: 40px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;color: #000000;font-size: 16px;transition: all 0.3s;margin-left: 20px;} body.dark .theme-toggle{ color: #ffffff;} .theme-toggle:hover{ background: var(--primary-green);color: white;border-color: var(--primary-green);} /* Dark theme */ body.dark{ --light-bg: #0f172a;--card-bg: #1e293b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border-light: #334155;} body.dark .nav{ background: rgba(15, 23, 42, 0.95);} body.dark .nav-menu-toggle span{ background-color: #f1f5f9;} body.dark .nav-links{ background: rgba(15, 23, 42, 0.95);} body.dark .nav-links a{ color: #f1f5f9;} body.dark .challenge, body.dark .pillars, body.dark .ecosystem, body.dark .compliance-col, body.dark .card, body.dark .comparison-col{ background: #1e293b;} body.dark .impact{ background: rgba(34, 197, 94, 0.1);} body.dark .flow-item, body.dark .flow-result, body.dark .eco-node, body.dark .approach, body.dark .metrics{ background: #1e293b;} body.dark .pillar-list li{ border-color: #334155;} body.dark .section-title, body.dark .pillar-title, body.dark .card-title, body.dark .comparison-title, body.dark .compliance-title{ color: #f1f5f9;} body.dark .challenge p, body.dark .compliance-list li, body.dark .pillar-list li{ color: #94a3b8;} /* Auto-scroll cards on mobile */ @media (max-width: 768px){ .nav-menu-toggle{ display: flex;background: none;border: none;position: relative;z-index: 1002;} .nav-links{ display: none;position: fixed;top: 0;right: -100%;width: 80%;max-width: 400px;height: 100vh;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(20px);flex-direction: column;justify-content: flex-start;padding-top: 100px;padding-left: 40px;gap: 30px;z-index: 1001;transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: -5px 0 20px rgba(0,0,0,0.1);} .nav-links.active{ right: 0;display: flex;animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);} @keyframes slideIn{ from{ right: -100%;} to{ right: 0;}} .nav-links a{ font-size: 20px;color: var(--navy);text-align: left;} .nav-container{ padding: 0 20px;} .cards-grid{ display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 16px;padding-bottom: 16px;-webkit-overflow-scrolling: touch;} .cards-grid .card{ flex: 0 0 280px;scroll-snap-align: start;} .cards-grid::-webkit-scrollbar{ height: 4px;} .cards-grid::-webkit-scrollbar-track{ background: rgba(0,0,0,0.1);border-radius: 2px;} .cards-grid::-webkit-scrollbar-thumb{ background: var(--primary-green);border-radius: 2px;} .metrics-grid{ display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 16px;padding-bottom: 16px;-webkit-overflow-scrolling: touch;} .metrics-grid .metric-card{ flex: 0 0 200px;scroll-snap-align: start;} .compliance-grid{ display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 16px;padding-bottom: 16px;-webkit-overflow-scrolling: touch;} .compliance-grid .compliance-col{ flex: 0 0 320px;scroll-snap-align: start;} .comparison{ display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 16px;padding-bottom: 16px;-webkit-overflow-scrolling: touch;} .comparison-col{ flex: 0 0 320px;scroll-snap-align: start;} .pillars-grid{ display: flex;overflow-x: auto;scroll-snap-type: x mandatory;gap: 24px;padding-bottom: 16px;-webkit-overflow-scrolling: touch;} .pillars-grid .pillar{ flex: 0 0 300px;scroll-snap-align: start;} .pillars-grid::-webkit-scrollbar, .comparison::-webkit-scrollbar, .compliance-grid::-webkit-scrollbar{ height: 4px;} .pillars-grid::-webkit-scrollbar-track, .comparison::-webkit-scrollbar-track, .compliance-grid::-webkit-scrollbar-track{ background: rgba(0,0,0,0.1);border-radius: 2px;} .pillars-grid::-webkit-scrollbar-thumb, .comparison::-webkit-scrollbar-thumb, .compliance-grid::-webkit-scrollbar-thumb{ background: var(--primary-green);border-radius: 2px;}} /* Hero Section */ .hero{ min-height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);padding: 120px 40px 80px;} .hero-bg{ position: absolute;inset: 0;overflow: hidden;} .globe{ position: absolute;width: 800px;height: 800px;right: -200px;top: 50%;transform: translateY(-50%);border-radius: 50%;background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.3) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(30, 58, 95, 0.5) 0%, transparent 50%);animation: globePulse 8s ease-in-out infinite;} @keyframes globePulse{ 0%, 100%{ transform: translateY(-50%) scale(1);opacity: 0.8;} 50%{ transform: translateY(-50%) scale(1.05);opacity: 1;}} .particle{ position: absolute;width: 4px;height: 4px;background: var(--primary-green);border-radius: 50%;animation: particleFloat 20s linear infinite;opacity: 0.6;} @keyframes particleFloat{ 0%{ transform: translateY(100vh) rotate(0deg);opacity: 0;} 10%{ opacity: 0.6;} 90%{ opacity: 0.6;} 100%{ transform: translateY(-100vh) rotate(720deg);opacity: 0;}} .hero-content{ position: relative;z-index: 10;max-width: 900px;text-align: center;} .hero-badge{ display: inline-flex;align-items: center;gap: 8px;background: rgba(34, 197, 94, 0.15);border: 1px solid rgba(34, 197, 94, 0.3);color: var(--primary-green);padding: 8px 20px;border-radius: 50px;font-size: 13px;font-weight: 600;margin-bottom: 32px;animation: fadeInUp 0.8s ease-out;} .hero-title{ font-size: clamp(40px, 6vw, 72px);font-weight: 800;color: white;line-height: 1.1;margin-bottom: 24px;animation: fadeInUp 0.8s ease-out 0.1s both;} .hero-title span{ background: linear-gradient(135deg, var(--primary-green), #34d399);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;} .hero-subtitle{ font-size: 20px;color: rgba(255, 255, 255, 0.8);margin-bottom: 16px;animation: fadeInUp 0.8s ease-out 0.2s both;} .hero-desc{ font-size: 16px;color: rgba(255, 255, 255, 0.6);max-width: 700px;margin: 0 auto 40px;animation: fadeInUp 0.8s ease-out 0.3s both;} .hero-cta{ display: flex;gap: 16px;justify-content: center;flex-wrap: wrap;animation: fadeInUp 0.8s ease-out 0.4s both;} .btn-primary{ background: var(--primary-green);color: white;padding: 16px 32px;border-radius: 50px;font-weight: 600;text-decoration: none;transition: all 0.3s;border: none;cursor: pointer;font-size: 15px;} .btn-primary:hover{ background: var(--primary-green-dark);transform: translateY(-2px);box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);} @keyframes fadeInUp{ from{ opacity: 0;transform: translateY(30px);} to{ opacity: 1;transform: translateY(0);}} /* Section Styles */ .section{ padding: 100px 40px;max-width: 1400px;margin: 0 auto;} .section-header{ text-align: center;margin-bottom: 60px;} .section-tag{ display: inline-block;background: rgba(34, 197, 94, 0.1);color: var(--primary-green);padding: 6px 16px;border-radius: 50px;font-size: 12px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;margin-bottom: 16px;} .section-title{ font-size: clamp(32px, 4vw, 48px);font-weight: 800;color: var(--navy);margin-bottom: 16px;} .section-subtitle{ font-size: 18px;color: var(--text-secondary);max-width: 700px;margin: 0 auto;} /* Challenge Section */ .challenge{ background: white;border-radius: 24px;padding: 60px;margin: 40px auto;max-width: 1200px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);} .challenge-grid{ display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;margin-top: 40px;} .challenge-item{ background: var(--light-bg);padding: 20px;border-radius: 16px;border-left: 4px solid #ef4444;display: flex;align-items: center;gap: 12px;} .challenge-item i{ color: #ef4444;font-size: 20px;} .challenge-item p{ font-size: 14px;font-weight: 500;} /* Approach Section */ .approach{ background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);border-radius: 24px;padding: 60px;margin: 40px auto;max-width: 1200px;color: white;} .approach-content h3{ font-size: 20px;margin-bottom: 20px;color: rgba(255, 255, 255, 0.9);} .approach-list{ list-style: none;} .approach-list li{ padding: 14px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.1);display: flex;align-items: center;gap: 12px;font-size: 15px;} .approach-list li i{ color: var(--primary-green);} /* Cards Grid - Responsive, no scroll */ .cards-grid{ display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 24px;width: 100%;} .card{ background: white;border-radius: 20px;padding: 32px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);transition: all 0.4s ease;border: 1px solid var(--border-light);} .card:hover{ transform: translateY(-8px);box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);border-color: var(--primary-green);} .card-icon{ width: 56px;height: 56px;border-radius: 14px;background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));display: flex;align-items: center;justify-content: center;margin-bottom: 20px;} .card-icon i{ font-size: 24px;color: white;} .card-title{ font-size: 18px;font-weight: 700;color: var(--navy);margin-bottom: 12px;} .card-desc{ color: var(--text-secondary);font-size: 14px;line-height: 1.6;} /* Comparison - Responsive */ .comparison{ display: grid;grid-template-columns: repeat(2, 1fr);gap: 32px;margin: 40px auto;max-width: 1200px;} .comparison-col{ background: white;border-radius: 20px;padding: 32px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);} .comparison-col.traditional{ border-top: 4px solid #ef4444;} .comparison-col.ainna{ border-top: 4px solid var(--primary-green);} .comparison-title{ font-size: 20px;font-weight: 700;margin-bottom: 20px;text-align: center;} .comparison-flow{ display: flex;flex-direction: column;gap: 10px;} .flow-item{ display: flex;align-items: center;gap: 12px;padding: 14px;background: var(--light-bg);border-radius: 10px;} .flow-item i{ width: 28px;height: 28px;display: flex;align-items: center;justify-content: center;border-radius: 8px;font-size: 12px;} .traditional .flow-item i{ background: rgba(239, 68, 68, 0.1);color: #ef4444;} .ainna .flow-item i{ background: rgba(34, 197, 94, 0.1);color: var(--primary-green);} .flow-item span{ font-size: 14px;font-weight: 500;} .flow-arrow{ text-align: center;color: var(--text-secondary);font-size: 14px;padding: 4px 0;} .flow-result{ margin-top: 20px;padding: 20px;background: var(--light-bg);border-radius: 12px;} .flow-result h4{ font-size: 13px;color: var(--text-secondary);margin-bottom: 12px;} .result-tags{ display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;} .result-tag{ padding: 6px 12px;background: rgba(34, 197, 94, 0.1);color: var(--primary-green);border-radius: 50px;font-size: 12px;font-weight: 600;flex: 1;min-width: 45%;text-align: center;} @media (max-width: 480px){ .result-tag{ min-width: 48%;font-size: 11px;padding: 5px 10px;}} @media (min-width: 769px){ .result-tag{ flex: 0 1 auto;min-width: auto;}} /* ESG Pillars */ .pillars{ background: white;border-radius: 24px;padding: 60px;margin: 40px auto;max-width: 1200px;} .pillars-grid{ display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;margin-top: 40px;} .pillar{ text-align: center;} .pillar-icon{ width: 72px;height: 72px;border-radius: 50%;background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;} .pillar-icon i{ font-size: 32px;color: white;} .pillar-title{ font-size: 20px;font-weight: 700;color: var(--navy);margin-bottom: 20px;} .pillar-list{ list-style: none;text-align: left;} .pillar-list li{ padding: 10px 0;border-bottom: 1px solid var(--border-light);display: flex;align-items: center;gap: 10px;font-size: 13px;color: var(--text-secondary);} .pillar-list li:last-child{ border-bottom: none;} .pillar-list i{ color: var(--primary-green);font-size: 11px;} /* Metrics Dashboard - Mobile 2 columns */ .metrics{ background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);border-radius: 24px;padding: 60px;margin: 40px auto;max-width: 1200px;} .metrics-grid{ display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;margin-top: 40px;} @media (max-width: 768px){ .metrics-grid{ grid-template-columns: repeat(2, 1fr) !important;gap: 15px !important;} .metric-card{ padding: 20px 15px !important;} .metric-value{ font-size: 28px !important;} .metric-label{ font-size: 11px !important;}} @media (max-width: 480px){ .metrics-grid{ grid-template-columns: repeat(2, 1fr) !important;gap: 12px !important;} .metric-card{ padding: 16px 12px !important;} .metric-icon{ font-size: 24px !important;} .metric-value{ font-size: 24px !important;} .metric-label{ font-size: 10px !important;}} .metric-card{ background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 16px;padding: 24px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.1);} .metric-card.decrease{ border-top: 3px solid #ef4444;} .metric-card.increase{ border-top: 3px solid var(--primary-green);} .metric-icon{ font-size: 28px;margin-bottom: 12px;} .metric-card.decrease .metric-icon{ color: #f87171;} .metric-card.increase .metric-icon{ color: #4ade80;} .metric-value{ font-size: 32px;font-weight: 800;color: white;margin-bottom: 4px;} .metric-label{ font-size: 12px;color: rgba(255, 255, 255, 0.7);} /* Ecosystem Diagram */ .ecosystem{ background: white;border-radius: 24px;padding: 60px;margin: 40px auto;max-width: 1200px;} .ecosystem-flow{ display: flex;flex-direction: column;align-items: center;gap: 12px;} .eco-node{ background: var(--light-bg);padding: 14px 28px;border-radius: 12px;font-weight: 600;color: var(--navy);display: flex;align-items: center;gap: 12px;min-width: 280px;justify-content: center;font-size: 14px;} .eco-node.primary{ background: var(--primary-green);color: white;} .eco-node i{ font-size: 16px;} .eco-arrow{ color: var(--text-secondary);font-size: 18px;} /* === Ecosystem Flow Animations === */ .ecosystem-flow .eco-node, .ecosystem-flow .eco-arrow{ opacity: 0;transform: translateY(20px);transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s);} .ecosystem-flow.animate .eco-node, .ecosystem-flow.animate .eco-arrow{ opacity: 1;transform: translateY(0);} .ecosystem-flow .eco-arrow.pulse{ animation: arrowBounce 1.5s ease-in-out infinite;} .ecosystem-flow .eco-node.primary.pulse{ animation: glowPulse 2s ease-in-out infinite;} @keyframes arrowBounce{ 0%, 100%{ opacity: 1;transform: translateY(0);} 50%{ opacity: 0.6;transform: translateY(6px);}} @keyframes glowPulse{ 0%, 100%{ box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);} 50%{ box-shadow: 0 0 25px rgba(34, 197, 94, 0.7);}} /* Footer */ .footer{ background: var(--navy);color: white;padding: 80px 40px 40px;} .footer-content{ max-width: 1200px;margin: 0 auto;text-align: center;} .footer-title{ font-size: 28px;font-weight: 700;margin-bottom: 24px;} .footer-text{ font-size: 16px;color: rgba(255, 255, 255, 0.7);max-width: 800px;margin: 0 auto 40px;line-height: 1.8;} .footer-disclaimer{ background: rgba(255, 255, 255, 0.05);padding: 24px;border-radius: 12px;font-size: 13px;color: rgba(255, 255, 255, 0.6);max-width: 800px;margin: 0 auto;border: 1px solid rgba(255, 255, 255, 0.1);} .footer-bottom{ margin-top: 60px;padding-top: 24px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 14px;color: rgba(255, 255, 255, 0.5);} /* Compliance Cards */ .compliance-grid{ display: grid;grid-template-columns: repeat(2, 1fr);gap: 32px;margin: 40px auto;max-width: 1200px;} .compliance-col{ background: white;border-radius: 20px;padding: 32px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);} .compliance-title{ font-size: 20px;font-weight: 700;color: var(--navy);margin-bottom: 20px;display: flex;align-items: center;gap: 12px;} .compliance-title i{ color: var(--primary-green);} .compliance-list{ list-style: none;} .compliance-list li{ padding: 10px 0;border-bottom: 1px solid var(--border-light);font-size: 13px;color: var(--text-secondary);display: flex;align-items: center;gap: 10px;} .compliance-list li:last-child{ border-bottom: none;} .compliance-list i{ color: var(--primary-green);font-size: 10px;} /* Impact Section */ .impact{ background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);border-radius: 24px;padding: 60px;margin: 40px auto;max-width: 1200px;text-align: center;} .impact-title{ font-size: clamp(28px, 4vw, 40px);font-weight: 800;color: var(--navy);margin-bottom: 24px;} .impact-text{ font-size: 17px;color: var(--text-secondary);max-width: 800px;margin: 0 auto 40px;} /* SOON Button in Hero */ .btn-soon{ background: #ef4444;color: white;padding: 16px 32px;border-radius: 50px;font-weight: 600;border: none;cursor: pointer;font-size: 15px;transition: all 0.3s;} .btn-soon:hover{ background: #dc2626;transform: translateY(-2px);} /* Save The World Button */ .btn-save-world{ background: linear-gradient(135deg, #22c55e, #16a34a);color: white;padding: 16px 32px;border-radius: 50px;font-weight: 600;border: none;cursor: pointer;font-size: 15px;transition: all 0.3s;display: inline-flex;align-items: center;gap: 8px;box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);} .btn-save-world:hover{ background: linear-gradient(135deg, #16a34a, #15803d);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);} /* Responsive - No horizontal scroll */ @media (max-width: 1024px){ .comparison{ grid-template-columns: 1fr;} .pillars-grid{ grid-template-columns: 1fr;} .compliance-grid{ grid-template-columns: 1fr;}} @media (max-width: 768px){ .section{ padding: 60px 20px;} /* .nav-links{ display: none;} - Telah dialihkan ke bahagian mobile menu toggle */ .hero{ padding: 100px 20px 60px;} .challenge{ padding: 32px 20px;} .approach{ padding: 32px 20px;} .globe{ width: 400px;height: 400px;right: -100px;} .hero-cta{ gap: 12px;} .hero-cta .btn-primary, .hero-cta .btn-soon{ padding: 14px 24px;font-size: 14px;} .metrics-grid{ grid-template-columns: repeat(2, 1fr);}} /* Mobile menu toggle - Added at the end to override previous rules */ @media (max-width: 768px){ .nav-menu-toggle{ display: flex;background: none;border: none;position: relative;z-index: 1002;} .nav-links{ display: none;position: fixed;top: 0;right: -100%;width: 80%;max-width: 400px;height: 100vh;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(20px);flex-direction: column;justify-content: flex-start;padding-top: 100px;padding-left: 40px;gap: 30px;z-index: 1001;transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: -5px 0 20px rgba(0,0,0,0.1);} .nav-links.active{ right: 0;display: flex;animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);} @keyframes slideIn{ from{ right: -100%;} to{ right: 0;}} .nav-links a{ font-size: 20px;color: var(--navy);text-align: left;} .nav-container{ padding: 0 20px;}}