PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/climfinchain.com/public_html/77index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clim Fin-Chain - Open Infrastructure for Carbon Markets</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-green: #00b37e;
            --light-green-bg: #e8f8f2;
            --dark-bg: #0b0f0e;
            --text-main: #1a1f1c;
            --text-muted: #556158;
            --bg-light: #f8faf9;
            --border-color: #dce6e1;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
            background-color: #ffffff;
            line-height: 1.5;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- SPA Page Sections --- */
        .page-section {
            display: none;
            min-height: 100vh;
        }
        .page-section.active {
            display: block;
        }

        /* --- Header --- */
        header {
            padding: 20px 0;
            background-color: transparent;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            pointer-events: none;
        }

        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            padding: 12px 24px;
            border-radius: 100px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            pointer-events: auto;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }
        
        /* AI Generated Logo SVG */
        .logo-icon svg {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #000;
            padding: 4px;
            fill: var(--primary-green);
        }

        .nav-links {
            display: flex;
            gap: 30px;
            font-size: 14px;
            font-weight: 500;
            color: #4a554e;
        }

        .nav-links a {
            transition: color 0.2s ease;
        }
        .nav-links a:hover {
            color: #000;
        }

        .header-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .btn-login {
            background: transparent;
            border: none;
            font-weight: 600;
            font-size: 14px;
            color: #4a554e;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 100px;
            transition: 0.2s;
        }
        .btn-login:hover {
            background-color: #f4f7f6;
        }

        .btn-register {
            background-color: #000;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 100px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-register:hover {
            opacity: 0.8;
            transform: scale(0.98);
        }

        /* --- Standard Secondary Pages Layout --- */
        .page-content {
            padding: 120px 0 80px;
            background: var(--bg-light);
        }
        .page-content .container {
            max-width: 900px;
            text-align: center;
        }
        .page-content h1 {
            font-size: 40px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .page-content p {
            color: var(--text-muted);
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 40px;
        }
        .page-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            text-align: left;
            margin-top: 40px;
        }
        .page-card {
            background: #fff;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .page-card h3 {
            font-weight: 600;
            margin-bottom: 10px;
        }
        .page-card p {
            font-size: 15px;
            margin-bottom: 0;
        }
        
        /* --- Contact Page --- */
        .contact-grid {
            display: flex;
            gap: 40px;
            text-align: left;
            margin-top: 40px;
            background: #fff;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .contact-info { flex: 1; }
        .contact-info h3 { margin-bottom: 16px; }
        .contact-info p { margin-bottom: 8px; font-size: 16px; }
        .contact-form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
        .contact-form input, .contact-form textarea {
            width: 100%; padding: 12px 16px; border: 1px solid #dce6e1;
            border-radius: 8px; font-family: inherit; font-size: 14px;
        }
        .contact-form button {
            background: #000; color: #fff; padding: 14px; border-radius: 8px;
            border: none; font-weight: 600; cursor: pointer;
        }

        /* --- Blog Page --- */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .blog-card {
            background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .blog-card-img { height: 180px; background: #dce6e1; display: flex; align-items: center; justify-content: center; color: #8a9a92; font-weight: 500; }
        .blog-card-content { padding: 20px; }
        .blog-card-content h4 { margin-bottom: 8px; }

        /* ------------ HOME PAGE 12 SECTIONS ------------ */
        /* Section 1: Hero Banner */
        .hero {
            height: 100vh; min-height: 700px; position: relative;
            display: flex; align-items: center; justify-content: center; text-align: center;
            /* Full Screen Hero with Local Image & Linear Gradient Light Whiteness */
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.60) 80%), 
                        url('herobanner.png') no-repeat center center;
            background-size: cover;
        }
        .hero-content { max-width: 800px; padding: 20px; margin-top: 60px; z-index: 2; }
        .hero-badge {
            display: inline-block; background: #ffffffdd; backdrop-filter: blur(4px);
            padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600;
            color: var(--primary-green); margin-bottom: 24px; letter-spacing: 0.5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .hero h1 { font-size: 64px; font-weight: 600; color: #000; margin-bottom: 16px; line-height: 1.1; }
        .hero p { font-size: 20px; color: #3b4740; margin-bottom: 40px; font-weight: 400; }
        .hero-buttons { display: flex; justify-content: center; gap: 16px; }
        .btn-primary {
            background-color: #000; color: #fff; padding: 14px 32px; border-radius: 100px;
            font-weight: 600; border: none; cursor: pointer; font-size: 16px; transition: all 0.2s ease;
        }
        .btn-primary:hover { opacity: 0.8; transform: translateY(-2px); }
        .btn-secondary {
            background-color: #fff; color: #000; padding: 14px 32px; border-radius: 100px;
            font-weight: 500; border: 1px solid #dce6e1; cursor: pointer; font-size: 16px;
            display: flex; align-items: center; gap: 8px; transition: all 0.2s ease;
        }
        .btn-secondary:hover { background-color: #f4f7f6; }

        /* Section 2 & 3: Problem & Stats */
        .section-problem { padding: 80px 0; background: #fff; }
        .problem-grid { display: flex; gap: 60px; margin-bottom: 60px; }
        .problem-left { flex: 1; border-left: 4px solid var(--primary-green); padding-left: 24px; display: flex; align-items: center; }
        .problem-left h2 { font-size: 28px; font-weight: 500; line-height: 1.3; color: #000; max-width: 400px; }
        .problem-right { flex: 1.5; }
        .problem-right h3 { font-size: 24px; font-weight: 500; margin-bottom: 16px; }
        .problem-right p { font-size: 16px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
        .stats-row { display: flex; justify-content: flex-start; gap: 80px; border-top: 1px solid #eee; padding-top: 40px; }
        .stat-item { display: flex; flex-direction: column; }
        .stat-number { font-size: 48px; font-weight: 500; color: #000; display: flex; align-items: flex-start; gap: 8px; }
        .stat-label { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
        .stat-green-line { width: 20px; height: 4px; background-color: var(--primary-green); margin-bottom: 8px; }

        /* Section 4 & 5: Infrastructure */
        .section-infra-header { padding: 80px 0 40px; background: #fff; }
        .section-infra-header h2 { font-size: 36px; font-weight: 500; margin-bottom: 24px; text-align: center; }
        .infra-buttons { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
        .infra-btn { padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; border: 1px solid #dce6e1; background: transparent; cursor: pointer; transition: 0.2s; }
        .infra-btn:hover { background-color: #f4f7f6; }
        .infra-btn-dark { background: #000; color: #fff; border: none; }
        .infra-btn-dark:hover { background: #2a2f2c; }

        .section-feature { padding: 0 0 80px; background: #fff; }
        .feature-box { background: #f4f7f6; border-radius: 24px; padding: 40px; display: flex; flex-wrap: wrap; align-items: center; border: 1px solid #dce6e1; position: relative; overflow: hidden; }
        .feature-box-left { flex: 1; min-width: 300px; z-index: 2; }
        .feature-box h3 { font-size: 24px; font-weight: 500; margin-bottom: 16px; }
        .feature-box p { color: var(--text-muted); margin-bottom: 24px; max-width: 400px; }
        .feature-box ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
        .feature-box ul li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
        .feature-box ul li svg { width: 18px; height: 18px; color: var(--primary-green); flex-shrink: 0; }
        .feature-box-right { flex: 1; min-width: 200px; display: flex; justify-content: flex-end; align-items: center; position: relative; height: 120px; margin-left: 20px; }
        .feature-placeholder-dot { width: 16px; height: 16px; background: #fff; border: 2px solid var(--primary-green); border-radius: 50%; z-index: 2; position: relative; margin-right: 10px; }

        /* Section 6 & 7: Buyers & Suppliers */
        .section-buyers { padding: 80px 0; background: var(--bg-light); }
        .section-suppliers { padding: 80px 0; background: #fff; }
        .user-grid { display: flex; gap: 60px; flex-wrap: wrap; }
        .user-col { flex: 1; min-width: 300px; }
        .user-col .label { color: var(--primary-green); font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; display: block; }
        .user-col h3 { font-size: 28px; font-weight: 500; margin-bottom: 16px; }
        .user-col p { color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
        .user-col .btn-primary { display: inline-block; }
        .features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .features-list li { display: flex; gap: 12px; align-items: flex-start; }
        .features-list li svg { width: 20px; height: 20px; color: var(--primary-green); flex-shrink: 0; margin-top: 2px; }
        .features-list li div { display: flex; flex-direction: column; }
        .features-list li strong { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .features-list li span { font-size: 14px; color: var(--text-muted); line-height: 1.4; }

        /* Section 8: Participants */
        .section-participants { padding: 80px 0; background: #fff; }
        .participants-header { margin-bottom: 40px; }
        .participants-header .label { color: var(--primary-green); font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; display: block; }
        .participants-header h3 { font-size: 28px; font-weight: 500; }
        .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .card-item { border: 1px solid #eef3f1; padding: 32px; border-radius: 16px; background: #fff; transition: 0.3s ease; }
        .card-item:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.06); transform: translateY(-4px); }
        .card-icon { width: 40px; height: 40px; background: var(--light-green-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-green); font-size: 20px; margin-bottom: 16px; }
        .card-item h4 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
        .card-item p { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
        .card-item a { font-size: 14px; font-weight: 500; color: #000; text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s; }
        .card-item a:hover { color: var(--primary-green); }

        /* Section 9: Trust */
        .section-trust { background: var(--dark-bg); color: #fff; padding: 80px 0; text-align: center; }
        .section-trust .label { color: var(--primary-green); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; display: block; }
        .section-trust h3 { font-size: 32px; font-weight: 500; margin-bottom: 40px; }
        .badges-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
        .badge { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 12px 24px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #ccc; transition: all 0.3s; }
        .badge:hover { background: rgba(255,255,255,0.1); color: #fff; }
        .badge-circle { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--primary-green); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }

        /* Section 10: CTA */
        .section-cta { padding: 80px 0; background: #fff; }
        .cta-grid { display: flex; gap: 40px; align-items: center; }
        .cta-left { flex: 1; }
        .cta-left h3 { font-size: 32px; font-weight: 500; margin-bottom: 16px; line-height: 1.2; }
        .cta-left p { color: var(--text-muted); font-size: 16px; line-height: 1.6; }
        .cta-right { flex: 1; background: var(--bg-light); padding: 40px; border-radius: 24px; text-align: center; }
        .cta-right h4 { font-size: 20px; font-weight: 600; margin-bottom: 24px; }
        .cta-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; }
        .cta-btn-primary { background: #000; color: #fff; padding: 14px 32px; border-radius: 100px; font-weight: 600; border: none; cursor: pointer; font-size: 14px; width: 100%; max-width: 280px; transition: 0.3s; }
        .cta-btn-primary:hover { opacity: 0.8; transform: scale(0.98); }
        .cta-btn-secondary { background: #fff; color: #000; padding: 14px 32px; border-radius: 100px; font-weight: 500; border: 1px solid #dce6e1; cursor: pointer; font-size: 14px; width: 100%; max-width: 280px; transition: 0.3s; }
        .cta-btn-secondary:hover { background: #f4f7f6; }

        /* Section 11 & 12: Footer */
        footer { background: #fcfdfd; border-top: 2px solid var(--primary-green); padding: 60px 0 30px; }
        .footer-top { display: flex; justify-content: space-between; margin-bottom: 40px; border-bottom: 1px solid #eef3f1; padding-bottom: 40px; flex-wrap: wrap; gap: 20px; }
        .footer-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #000; }
        .footer-logo svg { width: 32px; height: 32px; border-radius: 50%; background-color: #000; padding: 4px; fill: var(--primary-green); }
        .footer-nav { display: flex; gap: 24px; align-items: center; font-size: 14px; color: #4a554e; font-weight: 500; flex-wrap: wrap; }
        .footer-nav a:hover { color: #000; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
        .footer-col h5 { font-weight: 600; font-size: 14px; margin-bottom: 16px; color: #000; }
        .footer-col ul { display: flex; flex-direction: column; gap: 10px; }
        .footer-col ul li a { font-size: 14px; color: #4a554e; transition: 0.2s; }
        .footer-col ul li a:hover { color: #000; }
        .footer-col p { font-size: 14px; color: #4a554e; line-height: 1.6; max-width: 280px; }
        .footer-bottom { border-top: 1px solid #eef3f1; padding-top: 20px; display: flex; justify-content: space-between; font-size: 12px; color: #888; flex-wrap: wrap; gap: 10px; }
        .footer-bottom-links { display: flex; gap: 16px; }

        /* Responsive */
        @media (max-width: 992px) {
            .problem-grid { flex-direction: column; gap: 30px; }
            .problem-left { border-left: none; border-top: 4px solid var(--primary-green); padding-left: 0; padding-top: 16px; }
            .stats-row { gap: 40px; flex-wrap: wrap; }
            .cards-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .feature-box { flex-direction: column; align-items: flex-start; }
            .feature-box-right { border-top: 2px dashed #b4cfc3; margin-left: 0; padding-top: 20px; margin-top: 20px; width: 100%; justify-content: flex-start; height: auto; }
            .feature-box ul { grid-template-columns: 1fr; }
            .contact-grid { flex-direction: column; }
            .cta-grid { flex-direction: column; }
        }
        @media (max-width: 768px) {
            .hero h1 { font-size: 36px; }
            .header-inner { padding: 10px 16px; border-radius: 50px; flex-wrap: wrap; gap: 10px; }
            .nav-links, .header-actions { display: none; } /* Simplified for mobile demo */
            .hero-buttons { flex-direction: column; align-items: center; }
            .cards-grid { grid-template-columns: 1fr; }
            .footer-top { flex-direction: column; align-items: flex-start; }
            .footer-grid { grid-template-columns: 1fr; }
            .user-grid { flex-direction: column; }
            .features-list { grid-template-columns: 1fr; }
            .badges-container { flex-direction: column; align-items: center; }
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <div class="container">
            <div class="header-inner">
                <a href="#" onclick="navigateTo('home')" class="logo">
                    <span class="logo-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                        </svg>
                    </span>
                    Clim Fin-Chain
                </a>
                <ul class="nav-links">
                    <li><a href="#" onclick="navigateTo('how-it-works')">How it Works</a></li>
                    <li><a href="#" onclick="navigateTo('for-buyers')">For Buyers</a></li>
                    <li><a href="#" onclick="navigateTo('for-suppliers')">For Suppliers</a></li>
                    <li><a href="#" onclick="navigateTo('blog')">Blog</a></li>
                    <li><a href="#" onclick="navigateTo('contact')">Contact</a></li>
                </ul>
                <div class="header-actions">
                    <button class="btn-login" onclick="navigateTo('login')">LOGIN</button>
                    <button class="btn-register" onclick="navigateTo('register')">Register</button>
                </div>
            </div>
        </div>
    </header>


    <!-- ======================== HOME PAGE ======================== -->
    <div id="home" class="page-section active">

        <!-- [ SECTION 1 ] Hero Banner -->
        <section class="hero">
            <div class="hero-content">
                <span class="hero-badge">CLIM FIN-CHAIN</span>
                <h1>Open infrastructure for carbon markets.</h1>
                <p>Clim Fin-Chain enables transparency, instant execution, and traceable impact.</p>
                <div class="hero-buttons">
                    <button class="btn-primary" onclick="alert('Launching Clim Fin-Chain App...')">Launch App &rarr;</button>
                    <button class="btn-secondary" onclick="alert('Opening Documentation...')">
                        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm2-4v2h12V2H6zm0 16h12v-2H6v2zm-2 4h16v-2H4v2z"/></svg>
                        Read the Doc
                    </button>
                </div>
            </div>
        </section>

        <!-- [ SECTION 2 ] Problem Statement -->
        <section class="section-problem">
            <div class="container">
                <div class="problem-grid">
                    <div class="problem-left">
                        <h2>Carbon markets suffer from fragmentation, opacity, and inconsistent quality standards.</h2>
                    </div>
                    <div class="problem-right">
                        <h3>Scaling the Carbon Market</h3>
                        <p>Today's carbon market spans multiple registries, methodologies, and rating systems. This diversity fuels innovation, but it can also fragment liquidity, reduce transparency, and increase friction for project developers and buyers alike.</p>
                        <p>The market's carbon is clear, but we still need to scale the climate change demands. Achieving that scale requires cleaner market signals, stronger coordination, and infrastructure that enables participants to transact more efficiently.</p>
                    </div>
                </div>
        </section>

        <!-- [ SECTION 3 ] Statistics Row -->
        <section class="section-problem" style="padding-top: 0;">
            <div class="container">
                <div class="stats-row">
                    <div class="stat-item">
                        <div class="stat-green-line"></div>
                        <div class="stat-number">4</div>
                        <div class="stat-label">Supported Regions</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-green-line"></div>
                        <div class="stat-number">349K+</div>
                        <div class="stat-label">Tonnes avoided</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-green-line"></div>
                        <div class="stat-number">5</div>
                        <div class="stat-label">Credit Categories</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 4 ] Infrastructure Title & Buttons -->
        <section class="section-infra-header">
            <div class="container">
                <h2>Infrastructure for transparent & programmatic carbon markets</h2>
                <div class="infra-buttons">
                    <button class="infra-btn infra-btn-dark">See how we maximize impact</button>
                    <button class="infra-btn">Carbon Credits</button>
                    <button class="infra-btn">Market Architecture</button>
                </div>
            </div>
        </section>

        <!-- [ SECTION 5 ] Traceable Transactions Feature Box -->
        <section class="section-feature">
            <div class="container">
                <div class="feature-box">
                    <div class="feature-box-left">
                        <h3>Traceable, Fee-Free Transactions</h3>
                        <p>Transactions are recorded in a public ledger, enabling traceability from purchase to retirement. The protocol charges no fees, maximizing the impact of every credit.</p>
                        <ul>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Full transaction traceability</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Zero retirement fees</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>On-chain proof of retirement</li>
                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Additional supply chain</li>
                        </ul>
                    </div>
                    <div class="feature-box-right">
                        <div class="feature-placeholder-dot"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 6 ] For Carbon Buyers -->
        <section class="section-buyers">
            <div class="container">
                <div class="user-grid">
                    <div class="user-col">
                        <span class="label">FOR CARBON BUYERS</span>
                        <h3>Procure and retire carbon with confidence</h3>
                        <p>Whether you're offsetting corporate emissions or building carbon portfolios, Clim Fin-Chain provides the infrastructure for transparent, traceable procurement.</p>
                        <button class="btn-primary" onclick="alert('Launch App - Retire Carbon')">Launch App - Retire Carbon</button>
                    </div>
                    <div class="user-col">
                        <ul class="features-list">
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Transparent Pricing</strong><span>Access real-time market prices across standardized carbon classes with full visibility into costs.</span></div>
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Verified Provenance</strong><span>Every credit is traceable to its source registry, with methodology and vintage clearly displayed.</span></div>
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Instant Retirement</strong><span>Retire credits directly to your organization's ledger with an on-chain proof of environmental impact.</span></div>
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Zero Retirement Fees</strong><span>The protocol charges no fees for retirement transactions—100% of your spent goes to climate action.</span></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 7 ] For Project Developers & Carbon Suppliers -->
        <section class="section-suppliers">
            <div class="container">
                <div class="user-grid">
                    <div class="user-col">
                        <ul class="features-list">
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Global Market Access</strong><span>Expose your carbon credits to a unified liquidity pool, reaching buyers across geographies and sectors.</span></div>
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Fair Price Discovery</strong><span>Programmatic pricing enables transparent pricing based on quality attributes, not broker margins.</span></div>
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Simplified Onboarding</strong><span>Issue credits on-chain with support from specialized registries to unlock their programmatic potential.</span></div>
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                <div><strong>Continuous Liquidity</strong><span>Access deep, always available liquidity pools without waiting for bilateral negotiations.</span></div>
                            </li>
                        </ul>
                    </div>
                    <div class="user-col">
                        <span class="label">FOR PROJECT DEVELOPERS & CARBON SUPPLIERS</span>
                        <h3>Access global demand for your carbon credits</h3>
                        <p>Clim Fin-Chain connects project developers to a unified market, simplifying distribution and enhancing liquidity for high-integrity carbon credits.</p>
                        <button class="btn-primary" onclick="alert('Launch App - Supply Carbon')">Launch App - Supply Carbon</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 8 ] Additional Participants -->
        <section class="section-participants">
            <div class="container">
                <div class="participants-header">
                    <span class="label">ADDITIONAL PARTICIPANTS</span>
                    <h3>Join the ecosystem building transparent carbon markets</h3>
                </div>
                <div class="cards-grid">
                    <div class="card-item">
                        <div class="card-icon">👤</div>
                        <h4>Be a Participant</h4>
                        <p>Create an account to start participating in carbon credit trading, bridging carbon credits, and more.</p>
                        <a href="#">Learn about governance &rarr;</a>
                    </div>
                    <div class="card-item">
                        <div class="card-icon">🔄</div>
                        <h4>Provide Liquidity</h4>
                        <p>Contribute credits to the ecosystem and earn trading fees from market activity while maintaining full control.</p>
                        <a href="#">Kuma Liquidity Pool &rarr;</a>
                    </div>
                    <div class="card-item">
                        <div class="card-icon">🔗</div>
                        <h4>Integrate our Tools</h4>
                        <p>Connect your organization or platform to Clim Fin-Chain with comprehensive API access and documentation.</p>
                        <a href="#">Read the docs &rarr;</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 9 ] Trust & Transparency -->
        <section class="section-trust">
            <div class="container">
                <span class="label">TRUST & TRANSPARENCY</span>
                <h3>Built on verifiable, open infrastructure</h3>
                <div class="badges-container">
                    <div class="badge"><span class="badge-circle">⚡</span> Rust L2</div>
                    <div class="badge"><span class="badge-circle">🔗</span> Auditable</div>
                    <div class="badge"><span class="badge-circle">🚫</span> No Fees</div>
                    <div class="badge"><span class="badge-circle">👁️</span> Transparent</div>
                    <div class="badge"><span class="badge-circle">🔐</span> Self-Custody</div>
                    <div class="badge"><span class="badge-circle">✓</span> Audited</div>
                    <div class="badge"><span class="badge-circle">⚙️</span> 5 Registries</div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 10 ] Final CTA -->
        <section class="section-cta">
            <div class="container">
                <div class="cta-grid">
                    <div class="cta-left">
                        <h3>The future of carbon markets is transparent, accessible, and rules-based.</h3>
                        <p>Join the growing network of organizations, developers, and participants building the next generation of verifiable carbon market infrastructure.</p>
                    </div>
                    <div class="cta-right">
                        <h4>Get started</h4>
                        <div class="cta-buttons">
                            <button class="cta-btn-primary" onclick="alert('Launch App')">Launch App</button>
                            <button class="cta-btn-secondary" onclick="alert('Read the Doc')">Read the Doc</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- [ SECTION 11 ] Footer Main -->
        <footer>
            <div class="container">
                <div class="footer-top">
                    <div class="footer-logo">
                        <svg viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                        </svg>
                        Clim Fin-Chain
                    </div>
                    <div class="footer-nav">
                        <a href="#" onclick="navigateTo('how-it-works')">How it Works</a>
                        <a href="#" onclick="navigateTo('for-buyers')">For Buyers</a>
                        <a href="#" onclick="navigateTo('for-suppliers')">For Suppliers</a>
                        <a href="#" onclick="navigateTo('blog')">Blog</a>
                        <a href="#" onclick="navigateTo('contact')">Contact</a>
                    </div>
                </div>
                <div class="footer-grid">
                    <div class="footer-col">
                        <h5>Clim Fin-Chain</h5>
                        <p>Clim Fin-Chain enables transparency, instant execution, and traceable impact in carbon markets.</p>
                    </div>
                    <div class="footer-col">
                        <h5>Product</h5>
                        <ul>
                            <li><a href="#">Launch App</a></li>
                            <li><a href="#" onclick="navigateTo('how-it-works')">How it Works</a></li>
                            <li><a href="#" onclick="navigateTo('for-buyers')">For Buyers</a></li>
                            <li><a href="#" onclick="navigateTo('for-suppliers')">For Suppliers</a></li>
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h5>Resources</h5>
                        <ul>
                            <li><a href="#">Documentation</a></li>
                            <li><a href="#">Audit</a></li>
                            <li><a href="#">Roadmap</a></li>
                            <li><a href="#">GitHub</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#" onclick="navigateTo('contact')">Contact</a></li>
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h5>Community</h5>
                        <ul>
                            <li><a href="#">Discord</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Telegram</a></li>
                        </ul>
                    </div>
                    <div class="footer-col">
                        <h5>Developers</h5>
                        <ul>
                            <li><a href="#">GitHub</a></li>
                            <li><a href="#">Docs API</a></li>
                        </ul>
                    </div>
                </div>
        </footer>

        <!-- [ SECTION 12 ] Footer Bottom & Copyright -->
        <div style="background: #fcfdfd; padding-bottom: 30px;">
            <div class="container">
                <div class="footer-bottom">
                    <span>Privacy Policy &bull; Terms</span>
                    <div class="footer-bottom-links">
                        <a href="#">&copy; 2026 Clim Fin-Chain. All rights reserved.</a>
                    </div>
                </div>
            </div>
        </div>

    </div> <!-- END HOME PAGE -->


    <!-- ======================== OTHER PAGES ======================== -->

    <div id="how-it-works" class="page-section">
        <section class="page-content">
            <div class="container">
                <h1>How Clim Fin-Chain Works</h1>
                <p>Discover, transact, and verify carbon credits on the world's most transparent infrastructure.</p>
                <div class="page-grid">
                    <div class="page-card"><h3>1. Discover Projects</h3><p>Explore a vast library of verified carbon projects from across the globe. Filter by type, region, or methodology to find high-quality credits that align with your goals.</p></div>
                    <div class="page-card"><h3>2. Transact & Retire</h3><p>Purchase credits seamlessly with zero protocol fees. Retire them instantly to your organization's ledger with an on-chain proof of environmental impact.</p></div>
                    <div class="page-card"><h3>3. Track & Verify</h3><p>Access real-time transaction history and full supply chain transparency. Every credit is traceable back to its source registry, ensuring integrity.</p></div>
                </div>
            </div>
        </section>
    </div>

    <div id="for-buyers" class="page-section">
        <section class="page-content">
            <div class="container">
                <h1>Procure with Confidence</h1>
                <p>Whether you're offsetting corporate emissions or building carbon portfolios, Clim Fin-Chain provides the infrastructure for transparent, traceable procurement.</p>
                <div class="page-grid">
                    <div class="page-card"><h3>Transparent Pricing</h3><p>Access real-time market prices across standardized carbon classes with full visibility into costs.</p></div>
                    <div class="page-card"><h3>Instant Retirement</h3><p>Retire credits directly to your organization's ledger with an on-chain proof of environmental impact.</p></div>
                    <div class="page-card"><h3>Verified Provenance</h3><p>Every credit is traceable to its source registry, with methodology and vintage clearly displayed.</p></div>
                </div>
            </div>
        </section>
    </div>

    <div id="for-suppliers" class="page-section">
        <section class="page-content">
            <div class="container">
                <h1>Access Global Demand</h1>
                <p>Clim Fin-Chain connects project developers to a unified market, simplifying distribution and enhancing liquidity for high-integrity carbon credits.</p>
                <div class="page-grid">
                    <div class="page-card"><h3>Global Market Access</h3><p>Expose your carbon credits to a unified liquidity pool, reaching buyers across geographies and sectors.</p></div>
                    <div class="page-card"><h3>Fair Price Discovery</h3><p>Programmatic pricing enables transparent pricing based on quality attributes, not broker margins.</p></div>
                    <div class="page-card"><h3>Simplified Onboarding</h3><p>Issue credits on-chain with support from specialized registries to unlock their programmatic potential.</p></div>
                </div>
            </div>
        </section>
    </div>

    <div id="blog" class="page-section">
        <section class="page-content">
            <div class="container">
                <h1>Latest Insights</h1>
                <p>Stay updated with the latest news, market trends, and technological advancements in the carbon credit space.</p>
                <div class="blog-grid">
                    <div class="blog-card"><div class="blog-card-img">Featured Article</div><div class="blog-card-content"><h4>The Future of Carbon Markets</h4><p style="font-size: 14px; color: #556158; margin-bottom: 0;">Exploring how blockchain infrastructure can solve the quality crisis in carbon markets.</p></div></div>
                    <div class="blog-card"><div class="blog-card-img">Industry Update</div><div class="blog-card-content"><h4>New Methodologies Launched</h4><p style="font-size: 14px; color: #556158; margin-bottom: 0;">Clim Fin-Chain integrates 3 new methodologies to expand credit categories.</p></div></div>
                    <div class="blog-card"><div class="blog-card-img">Partner Spotlight</div><div class="blog-card-content"><h4>Scaling Climate Finance</h4><p style="font-size: 14px; color: #556158; margin-bottom: 0;">How institutional investors are leveraging our platform for net-zero strategies.</p></div></div>
                </div>
            </div>
        </section>
    </div>

    <div id="contact" class="page-section">
        <section class="page-content">
            <div class="container" style="max-width: 1000px;">
                <h1>Get in Touch</h1>
                <p>Have a question about our platform? Reach out to the Clim Fin-Chain team.</p>
                <div class="contact-grid">
                    <div class="contact-info">
                        <h3>Contact Information</h3>
                        <p><strong>Owners:</strong> Clim Fin-Chain Team</p>
                        <p><strong>Address:</strong> 123 Green Tech Avenue, Suite 400, San Francisco, CA 94105</p>
                        <p><strong>Phone:</strong> +1 (555) 123-4567</p>
                        <p><strong>Email:</strong> support@climfinchain.io</p>
                    </div>
                    <div class="contact-form">
                        <h3>Send us a message</h3>
                        <input type="text" placeholder="Your Name">
                        <input type="email" placeholder="Your Email">
                        <textarea rows="4" placeholder="Your Message"></textarea>
                        <button>Send Message</button>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div id="login" class="page-section">
        <section class="page-content">
            <div class="container" style="max-width: 500px;">
                <h1>Login</h1>
                <p>Welcome back to Clim Fin-Chain.</p>
                <div style="background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: left; display: flex; flex-direction: column; gap: 16px;">
                    <input type="email" placeholder="Email Address" style="width: 100%; padding: 12px 16px; border: 1px solid #dce6e1; border-radius: 8px; font-family: inherit; font-size: 14px;">
                    <input type="password" placeholder="Password" style="width: 100%; padding: 12px 16px; border: 1px solid #dce6e1; border-radius: 8px; font-family: inherit; font-size: 14px;">
                    <button onclick="alert('Login Successful!')" style="background: #000; color: #fff; padding: 14px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer;">Login</button>
                    <p style="text-align: center; font-size: 14px; margin-bottom: 0;">Don't have an account? <a href="#" onclick="navigateTo('register')" style="text-decoration: underline;">Register</a></p>
                </div>
            </div>
        </section>
    </div>

    <div id="register" class="page-section">
        <section class="page-content">
            <div class="container" style="max-width: 500px;">
                <h1>Register</h1>
                <p>Create your Clim Fin-Chain account today.</p>
                <div style="background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: left; display: flex; flex-direction: column; gap: 16px;">
                    <input type="text" placeholder="Full Name" style="width: 100%; padding: 12px 16px; border: 1px solid #dce6e1; border-radius: 8px; font-family: inherit; font-size: 14px;">
                    <input type="email" placeholder="Email Address" style="width: 100%; padding: 12px 16px; border: 1px solid #dce6e1; border-radius: 8px; font-family: inherit; font-size: 14px;">
                    <input type="password" placeholder="Password" style="width: 100%; padding: 12px 16px; border: 1px solid #dce6e1; border-radius: 8px; font-family: inherit; font-size: 14px;">
                    <button onclick="alert('Registration Successful!')" style="background: #000; color: #fff; padding: 14px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer;">Register</button>
                    <p style="text-align: center; font-size: 14px; margin-bottom: 0;">Already have an account? <a href="#" onclick="navigateTo('login')" style="text-decoration: underline;">Login</a></p>
                </div>
            </div>
        </section>
    </div>

    <!-- JavaScript for Multi-Page SPA Routing -->
    <script>
        function navigateTo(pageId) {
            document.querySelectorAll('.page-section').forEach(el => {
                el.classList.remove('active');
            });
            const target = document.getElementById(pageId);
            if (target) {
                target.classList.add('active');
                window.scrollTo(0, 0);
                history.pushState(null, null, '#' + pageId);
            }
        }

        window.addEventListener('load', function() {
            const hash = window.location.hash.substring(1);
            if (hash && document.getElementById(hash)) {
                navigateTo(hash);
            } else {
                navigateTo('home');
            }
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`