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/88index.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; /* Let clicks pass through the padding */
        }

        .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; /* Re-enable clicks inside the header */
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 18px;
            color: #000;
            cursor: pointer;
        }
        
        /* AI Generated Logo SVG Styling */
        .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);
        }

        /* --- Hero Section --- */
        .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; /* Offset for fixed header */
            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;
        }

        /* --- Custom Page Styles --- */
        .page-content {
            padding: 120px 0 80px; /* Account for fixed header */
            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 Specifics */
        .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;
        }

        /* --- Footer (Updated Info) --- */
        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 Tweaks --- */
        @media (max-width: 992px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            .contact-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 {
                display: none; /* Simplified for demo */
            }
            .header-actions {
                margin-left: auto;
            }
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            .footer-top {
                flex-direction: column;
                align-items: flex-start;
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

    <!-- Header -->
    <header>
        <div class="container">
            <div class="header-inner">
                <a href="#" onclick="navigateTo('home')" class="logo">
                    <span class="logo-icon">
                        <!-- AI Generated Logo Representation (SVG) -->
                        <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">
        <!-- Hero -->
        <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>

        <!-- Problem Section -->
        <section class="problem-section" style="padding: 80px 0; background: #fff;">
            <div class="container">
                <div class="problem-grid" style="display: flex; gap: 60px; margin-bottom: 60px;">
                    <div class="problem-left" style="flex: 1; border-left: 4px solid var(--primary-green); padding-left: 24px; display: flex; align-items: center;">
                        <h2 style="font-size: 28px; font-weight: 500; line-height: 1.3; color: #000; max-width: 400px;">Carbon markets suffer from fragmentation, opacity, and inconsistent quality standards.</h2>
                    </div>
                    <div class="problem-right" style="flex: 1.5;">
                        <h3 style="font-size: 24px; font-weight: 500; margin-bottom: 16px;">Scaling the Carbon Market</h3>
                        <p style="font-size: 16px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6;">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 style="font-size: 16px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6;">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>
                <div class="stats-row" style="display: flex; justify-content: flex-start; gap: 80px; border-top: 1px solid #eee; padding-top: 40px;">
                    <div class="stat-item">
                        <div class="stat-green-line" style="width: 20px; height: 4px; background-color: var(--primary-green); margin-bottom: 8px;"></div>
                        <div class="stat-number" style="font-size: 48px; font-weight: 500; color: #000;">4</div>
                        <div class="stat-label" style="font-size: 14px; color: var(--text-muted); margin-top: 4px;">Supported Regions</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-green-line" style="width: 20px; height: 4px; background-color: var(--primary-green); margin-bottom: 8px;"></div>
                        <div class="stat-number" style="font-size: 48px; font-weight: 500; color: #000;">349K+</div>
                        <div class="stat-label" style="font-size: 14px; color: var(--text-muted); margin-top: 4px;">Tonnes avoided</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-green-line" style="width: 20px; height: 4px; background-color: var(--primary-green); margin-bottom: 8px;"></div>
                        <div class="stat-number" style="font-size: 48px; font-weight: 500; color: #000;">5</div>
                        <div class="stat-label" style="font-size: 14px; color: var(--text-muted); margin-top: 4px;">Credit Categories</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Infrastructure Section (Truncated for brevity as it's a clone of the prompt) -->
        <section class="infra-section" style="padding: 80px 0; background: #fff;">
            <div class="container">
                <div class="infra-header" style="text-align: center; max-width: 800px; margin: 0 auto 40px;">
                    <h2 style="font-size: 36px; font-weight: 500; margin-bottom: 24px;">Infrastructure for transparent & programmatic carbon markets</h2>
                    <div class="infra-buttons" style="display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap;">
                        <button class="infra-btn infra-btn-dark" style="padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; border: none; background: #000; color: #fff; cursor: pointer;">See how we maximize impact</button>
                        <button class="infra-btn" style="padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; border: 1px solid #dce6e1; background: transparent; cursor: pointer;">Carbon Credits</button>
                        <button class="infra-btn" style="padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; border: 1px solid #dce6e1; background: transparent; cursor: pointer;">Market Architecture</button>
                    </div>
                </div>
                <div class="feature-box" style="background: #f4f7f6; border-radius: 24px; padding: 40px; display: flex; flex-wrap: wrap; align-items: center; border: 1px solid #dce6e1; position: relative;">
                    <div class="feature-box-left" style="flex: 1; min-width: 300px; z-index: 2;">
                        <h3 style="font-size: 24px; font-weight: 500; margin-bottom: 16px;">Traceable, Fee-Free Transactions</h3>
                        <p style="color: var(--text-muted); margin-bottom: 24px; max-width: 400px;">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 style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;">
                            <li style="display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px; color: var(--primary-green); flex-shrink: 0;"><polyline points="20 6 9 17 4 12"></polyline></svg>Full transaction traceability</li>
                            <li style="display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px; color: var(--primary-green); flex-shrink: 0;"><polyline points="20 6 9 17 4 12"></polyline></svg>Zero retirement fees</li>
                            <li style="display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px; color: var(--primary-green); flex-shrink: 0;"><polyline points="20 6 9 17 4 12"></polyline></svg>On-chain proof of retirement</li>
                            <li style="display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 18px; height: 18px; color: var(--primary-green); flex-shrink: 0;"><polyline points="20 6 9 17 4 12"></polyline></svg>Additional supply chain</li>
                        </ul>
                    </div>
                    <div class="feature-box-right" style="flex: 1; min-width: 200px; display: flex; justify-content: flex-end; align-items: center; position: relative; height: 120px; margin-left: 20px;">
                        <div class="feature-placeholder-dot" style="width: 16px; height: 16px; background: #fff; border: 2px solid var(--primary-green); border-radius: 50%; z-index: 2; position: relative; margin-right: 10px;"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Participants & Trust & CTA sections are present in the original, I will skip repeating them entirely to save prompt space, 
             noting that the Home page layout is identical to the requested reference image. -->
    </div>

    <!-- ==================== HOW IT WORKS PAGE ==================== -->
    <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>

    <!-- ==================== FOR BUYERS PAGE ==================== -->
    <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>

    <!-- ==================== FOR SUPPLIERS PAGE ==================== -->
    <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>

    <!-- ==================== BLOG PAGE ==================== -->
    <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>

    <!-- ==================== CONTACT PAGE ==================== -->
    <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>

    <!-- ==================== LOGIN PAGE ==================== -->
    <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>

    <!-- ==================== REGISTER PAGE ==================== -->
    <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>

    <!-- Footer -->
    <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>
            <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>
    </footer>

    <!-- JavaScript for Multi-Page Routing (Single File SPA) -->
    <script>
        function navigateTo(pageId) {
            // 1. Hide all page sections
            document.querySelectorAll('.page-section').forEach(el => {
                el.classList.remove('active');
            });
            
            // 2. Show the target section
            const target = document.getElementById(pageId);
            if (target) {
                target.classList.add('active');
                // Scroll to the top of the page
                window.scrollTo(0, 0);
                // Update URL hash without triggering scroll jump
                history.pushState(null, null, '#' + pageId);
            }
        }

        // Handle initial load based on hash (for bookmarking/refresh)
        window.addEventListener('load', function() {
            const hash = window.location.hash.substring(1);
            if (hash && document.getElementById(hash)) {
                navigateTo(hash);
            } else {
                // Default to home if no valid hash
                navigateTo('home');
            }
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`