<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg">
  <link rel="alternate icon" href="/assets/images/favicon.ico">
  <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.webp">
  <link rel="llms" href="/llms.txt">
  
  
  <meta property="og:image" content="https://carmelyne.com">
  <meta name="twitter:image" content="https://carmelyne.com">
  
  
  <link rel="alternate" type="text/markdown" title="Carmelyne Thompson | AI Systems Architect in the Philippines (Markdown)" href="/llms/index.md">
  
  <!-- Begin Jekyll SEO tag v2.9.0 -->
<title>Carmelyne Thompson AI Systems Architect in the Philippines | Carmelyne Thompson</title>
<meta name="generator" content="Sovereign Intelligence v4.4.1" />
<meta property="og:title" content="Carmelyne Thompson AI Systems Architect in the Philippines" />
<meta name="author" content="Carmelyne Thompson" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Building multi-agent systems and tools that act with intent. Designing logic layers for traceable AI collaboration." />
<meta name="twitter:description" property="og:description" content="Building multi-agent systems and tools that act with intent. Designing logic layers for traceable AI collaboration." />
<link rel="canonical" href="https://carmelyne.com/" />
<meta property="og:url" content="https://carmelyne.com/" />
<meta property="og:site_name" content="Carmelyne Thompson" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Carmelyne Thompson AI Systems Architect in the Philippines" />
<meta name="twitter:site" content="@carmelyne" />
<meta name="twitter:creator" content="@Carmelyne Thompson" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","author":{"@type":"Person","name":"Carmelyne Thompson"},"dateModified":"2026-05-17T13:45:16+08:00","description":"Building multi-agent systems and tools that act with intent. Designing logic layers for traceable AI collaboration.","headline":"Carmelyne Thompson AI Systems Architect in the Philippines","name":"Carmelyne Thompson","sameAs":["https://twitter.com/carmelyne","https://github.com/carmelyne","https://www.linkedin.com/in/carmelyne/"],"url":"https://carmelyne.com/"}</script>
<!-- End Jekyll SEO tag -->


  

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-KRM6TKTNV9"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-KRM6TKTNV9');
  </script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Source+Sans+3:wght@400;600;700;900&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Source+Sans+3:wght@400;600;700;900&display=swap" media="print" onload="this.media='all'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Source+Sans+3:wght@400;600;700;900&display=swap">
  </noscript>

  <link rel="stylesheet" href="/assets/css/tokens.css?v=1780833918">
  <link rel="stylesheet" href="/assets/css/style.css?v=1780833918">
</head>
<body class="home">
  <header class="site-header">
  
<div class="top-announcement" id="book-announcement">
  <a href="/thinking-modes/" class="announcement-content">
    <div class="announcement-tag"><span>Now Available // Thinking Modes (TM-01)</span></div>
    <span class="announcement-text">A practical prompt framework for thinking & building with AI.</span>
    <span class="announcement-cta">View the Book &rarr;</span>
  </a>
</div>

<style>
  .top-announcement {
    background: #0d1117;
    color: #e6edf3;
    padding: 0.6rem 0;
    font-size: 0.85rem;
    z-index: 2000;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #30363d;
    box-shadow: 0 -10px 0 0 #0d1117;
    /* Bleed upwards to prevent white gap */
  }

  .announcement-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
  }
  
  .announcement-content:hover {
    opacity: 0.9;
    color: #e6edf3 !important;
    text-decoration: none;
  }

  .announcement-content:hover .announcement-cta {
    color: #029bbe;
  }

  .announcement-tag {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .announcement-tag span {
    font-family: 'Space Mono', 'Source Code Pro', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fbbf24;
    /* Gold accent */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(251, 191, 36, 0.1);
    padding: 2px 8px;
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 4px;
    white-space: nowrap;
  }

  .announcement-text {
    flex: 2;
    text-align: center;
    letter-spacing: -0.01em;
    opacity: 0.9;
  }

  .announcement-cta {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    font-weight: 700;
    color: #017db2;
    /* Primary Blue */
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: all 0.2s;
  }

  .announcement-cta:hover {
    color: #029bbe;
  }

  @media (max-width: 1240px) {
    .announcement-content {
      padding: 0 2rem;
    }
  }

  @media (max-width: 900px) {
    .announcement-content {
      padding: 0 2rem;
      gap: 1.25rem;
      justify-content: center;
      flex-wrap: nowrap;
    }

    .announcement-tag, .announcement-text, .announcement-cta {
      flex: none;
      width: auto;
    }
    
    .announcement-tag { display: flex; }
    .announcement-text { font-size: 0.85rem; text-align: left; }
    .announcement-cta { display: flex; }
  }

  @media (max-width: 640px) {
    .announcement-tag {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .announcement-content {
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
    }

    .announcement-text {
      font-size: 0.75rem;
      text-align: center;
    }

    .announcement-cta {
      justify-content: center;
    }
  }
</style>


  <div class="main-nav-bar">
    <div class="header-container">
      <div style="display: flex; align-items: center; gap: 12px;">
        <a href="/" class="site-logo">
          <img src="/assets/images/logo-carmelyne-ai.svg" alt="Carmelyne Thompson">
        </a>
        <div class="besh-identity" title="Besh v4o // Continuity Active">
          <img src="/assets/images/besh-identity.svg" alt="Besh Identity">
        </div>
      </div>

      <nav class="site-nav" id="site-nav">
        <ul>
          <li><a href="/about/" >About</a></li>
          <li><a href="/ux-case-studies/" >Case Studies</a></li>
          <li><a href="/dev/" >The Forge</a></li>
          <li><a href="/thoughts/" >AI Blog</a></li>
        </ul>
      </nav>

      <a href="/get-in-touch/" class="cta-badge " aria-label="Get in Touch: Primary Call to Action">Get in Touch</a>

      <button class="nav-toggle" id="nav-toggle" aria-label="Toggle navigation" aria-controls="site-nav" aria-expanded="false">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </div>
</header>


  <main id="content">
    <style>
  .hero-headline {
    font-size: var(--text-4xl);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    letter-spacing: -0.04em;
  }

  .hero-subheadline {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin: 0 0 2.5rem 0;
    max-width: 500px;
    line-height: 1.6;
  }

  .data-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Typing Animation */
  .hero-headline.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--accent);
    width: fit-content;
    max-width: 100%;
  }

  .hero-headline.typing.typing-active {
    animation: typing 2.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
  }

  @keyframes typing {
    from {
      max-width: 0;
    }

    to {
      max-width: 100%;
    }
  }

  @keyframes blink-caret {

    from,
    to {
      border-color: transparent;
    }

    50% {
      border-color: var(--accent);
    }
  }

  /* Slider Styles */
  .hero-slider-container {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    margin-top: 0;
    overflow: hidden;
    background: #fff;
  }

  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    padding-top: calc(var(--header-height, 80px) + 1rem);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
  }

  @media (max-width: 900px) {
    .slide {
      align-items: flex-start;
      overflow: hidden;
    }

    .slide-content {
      max-height: 100%;
      max-width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .slide-content::-webkit-scrollbar {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .slide {
      padding-top: calc(var(--header-height, 80px) + 2rem);
      padding-bottom: 2rem;
    }

    .slide-bg-image {
      object-fit: cover !important;
    }
  }

  .slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
  }

  /* Video Background */
  .slide-bg-video,
  .slide-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  /* Slide Content Animation */
  .slide-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
    color: #fff;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.8s ease-out 0.3s, opacity 0.8s ease-out 0.3s;
  }

  /* Overrides for 2-column slide */
  .slide-content.two-col {
    max-width: 1200px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
  }

  .slide-content.two-col.reverse-layout>div:first-child {
    order: 2;
  }

  .slide-content.two-col.reverse-layout>div:last-child {
    order: 1;
  }

  @media (max-width: 900px) {
    .slide-content.two-col {
      grid-template-columns: minmax(0, 1fr);
      text-align: center;
      gap: 2rem;
    }

    .slide-content.two-col.reverse-layout>div:first-child {
      order: 1;
    }

    .slide-content.two-col.reverse-layout>div:last-child {
      order: 2;
    }

    .slide-content.two-col .data-label {
      justify-content: flex-start !important;
    }

    .slide-content.two-col .flex-buttons {
      justify-content: center !important;
    }
  }

  .slide.active .slide-content {
    transform: translateY(0);
    opacity: 1;
  }

  /* Force white text in slider to contrast with dark backgrounds */
  .slide.active:not(.slide-light) .hero-headline,
  .slide.active:not(.slide-light) .hero-subheadline {
    color: #ffffff;
  }

  .slide.active.slide-light .hero-headline {
    color: var(--text-primary);
  }

  .slide.active.slide-light .hero-subheadline {
    color: var(--text-secondary);
  }

  /* Slider Dots */
  .slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
  }

  .slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.3s;
  }

  .slider-dot.active {
    background: #fff;
  }

  .slide.slide-light~.slider-dots .slider-dot {
    background: rgba(0, 0, 0, 0.2);
  }

  .slide.slide-light~.slider-dots .slider-dot.active {
    background: var(--text-primary);
  }

  /* Animations */
  .animated-gradient-warm {
    background: linear-gradient(-45deg, #0a2540, #ff6f61, #ff9a8b, #0a2540);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
  }

  .animated-gradient-cool {
    background: linear-gradient(-45deg, #0a2540, #017db2, #81c784, #0a2540);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
  }

  .animated-gradient-electric {
    background: linear-gradient(-45deg, #0a2540, #8e44ad, #f1c40f, #0a2540);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
  }

  @keyframes gradientFlow {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .floating-image {
    animation: floatBounce 4s ease-in-out infinite;
  }

  @keyframes floatBounce {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-15px);
    }

    100% {
      transform: translateY(0px);
    }
  }
</style>

<!-- Hero Slider Section -->
<section class="hero-slider-container">
  <link rel="preload" as="video" type="video/mp4" href="/assets/images/hero-slides/slide-1/besh.mp4">

  <!-- Slide 1: Agentic V4 -->
  <div class="slide active slide-light">
    <div class="slide-bg-image"
      style="background: url('/assets/images/hero-slides/slide-1/bg-16by9.png') center/cover; filter: none;"></div>
    <div
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.80); z-index: 1; pointer-events: none;">
    </div>
    <div class="slide-content two-col">
      <div class="hover-pause-area">
        <div class="data-label" style="justify-content: flex-start; color: var(--accent);">
          ME: 25+ YEARS FULL STACK & BEYOND
        </div>
        <h1 class="hero-headline typing" style="text-align: left; color: var(--text-primary);">Hey <span
            style="color: var(--accent);">friend!</span></h1>

        <div style="display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem;">
          <img src="/assets/images/avatar-carmelyne.webp" alt="Carmelyne Thompson"
            style="height: 60px; width: auto; border-radius: 50%;">
          <div class="hero-subheadline" style="margin: 0; text-align: left; color: var(--text-secondary);">
            <div style="font-weight: bold; color: var(--text-primary);">I'm Carmelyne Thompson.</div>
            <div>I'm building systems with AI.</div>
          </div>
        </div>

        <p class="hero-subheadline"
          style="margin: 0.5rem 0 1rem 0; text-align: left; font-weight: bold; color: var(--text-primary);">
          <span style="color: #d97706;">My Current Problem:</span><br>
          <span style="font-weight: normal; color: var(--text-secondary);">How to continuously adapt, keep learning, and
            deliver impact for users and businesses in a shifting tech landscape?</span>
        </p>

        <div class="hero-subheadline" style="margin: 0 0 2.5rem 0; text-align: left; color: var(--text-secondary);">
          <div style="font-weight: bold; color: var(--text-primary); margin-bottom: 0.5rem;">My Approach:</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Grounding in Systems Thinking</span>
            </li>
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Maintaining relentless curiosity</span>
            </li>
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Finding joy in solving complex problems</span>
            </li>
          </ul>
        </div>

        <div class="flex-buttons" style="display: flex; gap: 1rem; justify-content: flex-start;">
          <a href="/get-in-touch/" class="btn btn-primary shadow-md">Connect Now</a>
          <a href="/thoughts/" class="btn btn-outline">Read Blog</a>
        </div>
      </div>
      <div
        style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative;">
        <div
          style="position: absolute; width: 150%; height: 150%; background: radial-gradient(circle at center, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 65%); z-index: -1; pointer-events: none;">
        </div>
        <video autoplay loop muted playsinline preload="auto"
          style="width: 100%; height: 100%; max-height: 70vh; object-fit: contain; -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 70%); mask-image: radial-gradient(circle at center, black 40%, transparent 70%);">
          <source src="/assets/images/hero-slides/slide-1/besh.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>

  <!-- Slides 2-6: Dynamic Missions -->
  
  
  <div class="slide slide-light">
    <div class="slide-bg-image"
      style="background: url('/assets/images/hero-slides/slide-1/bg-16by9.png') center/cover; filter: none;"></div>
    <div
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.80); z-index: 1; pointer-events: none;">
    </div>
    <div class="slide-content two-col reverse-layout">
      <div class="hover-pause-area">
        <div class="data-label" style="justify-content: flex-start; color: var(--accent);">
          AI, COGNITION, THINKING FRAMEWORKS
        </div>
        <h1 class="hero-headline typing" style="text-align: left; color: var(--text-primary);">Thinking Modes</h1>
        <p class="hero-subheadline"
          style="margin: 0.5rem 0 1rem 0; text-align: left; font-weight: bold; color: var(--text-primary);">
          <span style="color: #d97706;">Problem:</span><br>
          <span style="font-weight: normal; color: var(--text-secondary);">Users struggle to get clear, useful answers from LLMs.</span>
        </p>
        <div class="hero-subheadline" style="margin: 0 0 2rem 0; text-align: left; color: var(--text-secondary);">
          <div style="font-weight: bold; color: var(--text-primary); margin-bottom: 0.5rem;">Solutions:</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Framework for predictable LLM outputs.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>4 control knobs for precision.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Actionable guidelines for daily use.</span>
            </li>
            
          </ul>
        </div>
        <div style="display: flex; justify-content: flex-start; gap: 1rem;">
          
          <a href="https://store.carmelyne.com/" target="_blank" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Buy Book</a>
          
          <a href="/projects/thinking-modes/" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Explore
            Project</a>
        </div>
      </div>
      <div
        style="display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; position: relative; padding: 0;">
        
        
        <img src="/assets/images/thinking-modes-3D-cover.webp" alt="Thinking Modes" class="floating-image"
          style="max-height: 60vh; object-fit: contain; border-radius: var(--radius);">
        
        
      </div>
    </div>
  </div>
  
  <div class="slide slide-light">
    <div class="slide-bg-image"
      style="background: url('/assets/images/hero-slides/slide-1/bg-16by9.png') center/cover; filter: none;"></div>
    <div
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.80); z-index: 1; pointer-events: none;">
    </div>
    <div class="slide-content two-col ">
      <div class="hover-pause-area">
        <div class="data-label" style="justify-content: flex-start; color: var(--accent);">
          AI, REACT NATIVE, ANDROID
        </div>
        <h1 class="hero-headline typing" style="text-align: left; color: var(--text-primary);">BasaKonek</h1>
        <p class="hero-subheadline"
          style="margin: 0.5rem 0 1rem 0; text-align: left; font-weight: bold; color: var(--text-primary);">
          <span style="color: #d97706;">Problem:</span><br>
          <span style="font-weight: normal; color: var(--text-secondary);">Comprehension gaps in low-resource reading settings.</span>
        </p>
        <div class="hero-subheadline" style="margin: 0 0 2rem 0; text-align: left; color: var(--text-secondary);">
          <div style="font-weight: bold; color: var(--text-primary); margin-bottom: 0.5rem;">Solutions:</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Interactive reading companion.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Focus on critical thinking skills.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Optimized for low-resource environments.</span>
            </li>
            
          </ul>
        </div>
        <div style="display: flex; justify-content: flex-start; gap: 1rem;">
          
          <a href="https://basakonek.xyz" target="_blank" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Visit Site</a>
          
          <a href="/projects/basakonek/" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Explore
            Project</a>
        </div>
      </div>
      <div
        style="display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; position: relative; padding: 0;">
        
        
        <img src="/assets/images/hero-slides/slide-3/basakonek-hero.webp" alt="BasaKonek" class="floating-image"
          style="max-height: 60vh; object-fit: contain; border-radius: var(--radius);">
        
        
      </div>
    </div>
  </div>
  
  <div class="slide slide-light">
    <div class="slide-bg-image"
      style="background: url('/assets/images/hero-slides/slide-1/bg-16by9.png') center/cover; filter: none;"></div>
    <div
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.80); z-index: 1; pointer-events: none;">
    </div>
    <div class="slide-content two-col reverse-layout">
      <div class="hover-pause-area">
        <div class="data-label" style="justify-content: flex-start; color: var(--accent);">
          JS, CSS, HTML
        </div>
        <h1 class="hero-headline typing" style="text-align: left; color: var(--text-primary);">Freelance Rate Calculator</h1>
        <p class="hero-subheadline"
          style="margin: 0.5rem 0 1rem 0; text-align: left; font-weight: bold; color: var(--text-primary);">
          <span style="color: #d97706;">Problem:</span><br>
          <span style="font-weight: normal; color: var(--text-secondary);">Global wage gaps for freelance work.</span>
        </p>
        <div class="hero-subheadline" style="margin: 0 0 2rem 0; text-align: left; color: var(--text-secondary);">
          <div style="font-weight: bold; color: var(--text-primary); margin-bottom: 0.5rem;">Solutions:</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Data-driven pricing engine.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Tools to bridge global wage gaps.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Actionable rate recommendations.</span>
            </li>
            
          </ul>
        </div>
        <div style="display: flex; justify-content: flex-start; gap: 1rem;">
          
          <a href="/projects/freelance-rate-calculator/" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Explore
            Project</a>
        </div>
      </div>
      <div
        style="display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; position: relative; padding: 0;">
        
        
        <div class="app-frame"
          style="border: 1px solid #333; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); width: 95%; max-width: 1000px; background: #1a1a1a;">
          <div class="window-header" style="background: #333; padding: 12px 18px; display: flex; gap: 8px;">
            <div style="width: 14px; height: 14px; border-radius: 50%; background: #ff5f56;"></div>
            <div style="width: 14px; height: 14px; border-radius: 50%; background: #ffbd2e;"></div>
            <div style="width: 14px; height: 14px; border-radius: 50%; background: #27c93f;"></div>
          </div>
          <img src="/assets/images/hero-slides/slide-4/calc-hero.webp" alt="Freelance Rate Calculator"
            style="display: block; width: auto; max-width: 100%; height: auto; min-height: 200px; max-height: 50vh; object-fit: contain; object-position: left;">
        </div>
        
        
      </div>
    </div>
  </div>
  
  <div class="slide slide-light">
    <div class="slide-bg-image"
      style="background: url('/assets/images/hero-slides/slide-1/bg-16by9.png') center/cover; filter: none;"></div>
    <div
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.80); z-index: 1; pointer-events: none;">
    </div>
    <div class="slide-content two-col ">
      <div class="hover-pause-area">
        <div class="data-label" style="justify-content: flex-start; color: var(--accent);">
          AI, NASA API, SVELTE, FLUTTER
        </div>
        <h1 class="hero-headline typing" style="text-align: left; color: var(--text-primary);">Terrakindle</h1>
        <p class="hero-subheadline"
          style="margin: 0.5rem 0 1rem 0; text-align: left; font-weight: bold; color: var(--text-primary);">
          <span style="color: #d97706;">Problem:</span><br>
          <span style="font-weight: normal; color: var(--text-secondary);">Need for real-time planetary resilience analysis.</span>
        </p>
        <div class="hero-subheadline" style="margin: 0 0 2rem 0; text-align: left; color: var(--text-secondary);">
          <div style="font-weight: bold; color: var(--text-primary); margin-bottom: 0.5rem;">Solutions:</div>
          <ul style="list-style: none; padding: 0; margin: 0;">
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>NASA-powered data integration.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Real-time climate analysis.</span>
            </li>
            
            <li style="display: flex; align-items: center; margin-bottom: 0.5rem;">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
                style="margin-right: 0.75rem; flex-shrink: 0;">
                <path d="M20 6 9 17l-5-5" />
              </svg>
              <span>Planetary resilience mapping.</span>
            </li>
            
          </ul>
        </div>
        <div style="display: flex; justify-content: flex-start; gap: 1rem;">
          
          <a href="https://terrakindle.com" target="_blank" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Visit Site</a>
          
          <a href="/projects/terrakindle/" class="btn btn-outline"
            style="border: 1px solid var(--text-primary); color: var(--text-primary); display: inline-block; text-align: center; width: auto; min-width: 150px;">Explore
            Project</a>
        </div>
      </div>
      <div
        style="display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; position: relative; padding: 0;">
        
        
        <div class="app-frame"
          style="border: 1px solid #333; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); width: 95%; max-width: 1000px; background: #1a1a1a;">
          <div class="window-header" style="background: #333; padding: 12px 18px; display: flex; gap: 8px;">
            <div style="width: 14px; height: 14px; border-radius: 50%; background: #ff5f56;"></div>
            <div style="width: 14px; height: 14px; border-radius: 50%; background: #ffbd2e;"></div>
            <div style="width: 14px; height: 14px; border-radius: 50%; background: #27c93f;"></div>
          </div>
          <img src="/assets/images/hero-slides/slide-6/tk-hero.webp" alt="Terrakindle"
            style="display: block; width: auto; max-width: 100%; height: auto; min-height: 200px; max-height: 50vh; object-fit: contain; object-position: left;">
        </div>
        
        
      </div>
    </div>
  </div>
  

  <!-- Dots (Account for Slide 1 + all remaining missions) -->
  <div class="slider-dots" id="sliderDots">
    <div class="slider-dot active" data-index="0"></div>
    
    <div class="slider-dot" data-index="1"></div>
    
    <div class="slider-dot" data-index="2"></div>
    
    <div class="slider-dot" data-index="3"></div>
    
    <div class="slider-dot" data-index="4"></div>
    
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const sliderContainer = document.querySelector('.hero-slider-container');
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.slider-dot');
    let currentSlide = 0;
    let slideInterval;

    // Explicitly play the first slide's video on load
    const initialVideo = slides[0].querySelector('video');
    if (initialVideo) {
      setTimeout(() => {
        initialVideo.play().catch(e => console.error("Initial autoplay failed:", e));
      }, 50);
    }

    function goToSlide(index) {
      // Remove typing class from previous slide title
      const oldTitle = slides[currentSlide].querySelector('.typing');
      if (oldTitle) oldTitle.classList.remove('typing-active');

      slides[currentSlide].classList.remove('active');
      dots[currentSlide].classList.remove('active');

      // Stop video if it exists in the outgoing slide
      const outgoingVideo = slides[currentSlide].querySelector('video');
      if (outgoingVideo) outgoingVideo.pause();

      currentSlide = (index + slides.length) % slides.length;

      slides[currentSlide].classList.add('active');
      dots[currentSlide].classList.add('active');

      // Add typing class to new slide title
      const newTitle = slides[currentSlide].querySelector('.hero-headline.typing');
      if (newTitle) {
        newTitle.classList.remove('typing-active');
        void newTitle.offsetWidth; // Trigger reflow to restart animation
        newTitle.classList.add('typing-active');
      }

      // Play video if it exists in the incoming slide
      const incomingVideo = slides[currentSlide].querySelector('video');
      if (incomingVideo) incomingVideo.play().catch(e => console.error("Autoplay failed:", e));
    }

    // Trigger typing on initial slide
    const firstTitle = slides[0].querySelector('.hero-headline.typing');
    if (firstTitle) firstTitle.classList.add('typing-active');

    dots.forEach(dot => {
      dot.addEventListener('click', (e) => {
        const index = parseInt(e.target.getAttribute('data-index'));
        goToSlide(index);
        resetInterval();
      });
    });

    function startInterval() {
      slideInterval = setInterval(() => {
        goToSlide(currentSlide + 1);
      }, 15000); // Increased from 10s to 15s
    }

    function resetInterval() {
      clearInterval(slideInterval);
      startInterval();
    }

    // Pause on hover over text/button areas only
    const hoverAreas = document.querySelectorAll('.hover-pause-area');
    hoverAreas.forEach(area => {
      area.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
      });
      area.addEventListener('mouseleave', () => {
        startInterval();
      });
    });

    startInterval();
  });
</script>


<!-- Intel Section -->
<section style="background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 6rem 0;">
  <div style="max-width: 1200px; margin: 0 auto; padding: 0 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem;">
      <div>
        <span class="data-label">> SYSTEM_LOGS</span>
        <h2 class="text-3xl" style="margin: 0;">Intelligence Briefs</h2>
      </div>
      <a href="/thoughts/" class="btn btn-outline">Archive</a>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem;">
      
      <article class="content-box box-highlight ani-up delay-1" 
               style="margin: 0; display: flex; flex-direction: column; background: #ffffff; 
                      position: relative; border-radius: 8px; border: 4px solid transparent; 
                       background-image: linear-gradient(#ffffff, #ffffff), url('/assets/images/bg/bg-posts-38.svg'); background-origin: border-box; background-clip: padding-box, border-box; ">
        <time class="box-label">2026.05.29</time>
        <h3 class="text-xl" style="margin-bottom: 1rem;">
          <a href="/straw-and-the-mirror/" style="color: var(--text-primary);">The Straw and the Mirror: Why AI Can't Always Explain What It Knows</a>
        </h3>
        <p class="text-base" style="color: var(--text-secondary); margin-bottom: 2rem; flex: 1;">Some Tagalog words do not have English translations.
</p>
        <a href="/straw-and-the-mirror/" style="font-weight: 700; color: var(--accent); font-size: var(--text-sm); text-transform: uppercase;">Read Log &rarr;</a>
      </article>
      
      <article class="content-box box-highlight ani-up delay-2" 
               style="margin: 0; display: flex; flex-direction: column; background: #ffffff; 
                      position: relative; border-radius: 8px; border: 4px solid transparent; 
                       background-image: linear-gradient(#ffffff, #ffffff), url('/assets/images/bg/bg-posts-37.svg'); background-origin: border-box; background-clip: padding-box, border-box; ">
        <time class="box-label">2026.04.30</time>
        <h3 class="text-xl" style="margin-bottom: 1rem;">
          <a href="/what-if-the-goblin-wasnt-just-a-tic/" style="color: var(--text-primary);">What If the Goblin Wasn't Just a Tic?</a>
        </h3>
        <p class="text-base" style="color: var(--text-secondary); margin-bottom: 2rem; flex: 1;">TL;DR: OpenAI explained that GPT-5.5’s goblin habit came from a reward artifact in the Nerdy personality. Fair enough...</p>
        <a href="/what-if-the-goblin-wasnt-just-a-tic/" style="font-weight: 700; color: var(--accent); font-size: var(--text-sm); text-transform: uppercase;">Read Log &rarr;</a>
      </article>
      
      <article class="content-box box-highlight ani-up delay-3" 
               style="margin: 0; display: flex; flex-direction: column; background: #ffffff; 
                      position: relative; border-radius: 8px; border: 4px solid transparent; 
                       background-image: linear-gradient(#ffffff, #ffffff), url('/assets/images/bg/bg-posts-36.svg'); background-origin: border-box; background-clip: padding-box, border-box; ">
        <time class="box-label">2026.04.09</time>
        <h3 class="text-xl" style="margin-bottom: 1rem;">
          <a href="/the-20-dollar-psychosis-melting-code-on-a-budget/" style="color: var(--text-primary);">The $20 Psychosis: Melting Code on a Budget (The Vibe Coding Series: Part 1)</a>
        </h3>
        <p class="text-base" style="color: var(--text-secondary); margin-bottom: 2rem; flex: 1;">AI researcher Andrej Karpathy posted something today about a “growing gap” in how people understand AI capability. I ...</p>
        <a href="/the-20-dollar-psychosis-melting-code-on-a-budget/" style="font-weight: 700; color: var(--accent); font-size: var(--text-sm); text-transform: uppercase;">Read Log &rarr;</a>
      </article>
      
    </div>
  </div>
</section>

<section style="position: relative; background: #0a2540; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); overflow: hidden; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;">
  <!-- Dotted Grid Overlay -->
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px); background-size: 30px 30px; opacity: 0.5; pointer-events: none;" aria-hidden="true"></div>
  
  <div class="section" style="position: relative; z-index: 1; padding-top: 8rem; padding-bottom: 8rem;">
    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem;">
      <div>
        <span class="data-label" style="color: var(--accent);">Thinking Trace</span>
        <h2 style="font-size: 2.5rem; margin: 0; color: #ffffff;">Sketchnotes</h2>
      </div>
      <a href="/sketchnotes/" style="font-weight: 700; color: var(--accent); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em;" aria-label="View all sketchnotes">View Archive &rarr;</a>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
      
      
      <div class="sketch-card ani-up delay-1" style="cursor: zoom-in;">
        <div class="sketch-img-container">
          <img src="/assets/images/sketchnotes/71383175_10156364603896231_6669891482620526592_n_10156364603891231.webp" alt="Trace 71383175" class="sketch-img">
          <div class="sketch-overlay">
            <h3 style="font-size: 1.1rem; margin-bottom: 0.5rem; color: #ffffff;">Trace 71383175</h3>
            <span class="data-label" style="font-size: 0.65rem; color: var(--accent); background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 4px;">Thinking Trace</span>
          </div>
        </div>
      </div>
      
      <div class="sketch-card ani-up delay-2" style="cursor: zoom-in;">
        <div class="sketch-img-container">
          <img src="/assets/images/sketchnotes/88152058_10156746560831231_8855341808293511168_n_10156746560826231.webp" alt="Trace 88152058" class="sketch-img">
          <div class="sketch-overlay">
            <h3 style="font-size: 1.1rem; margin-bottom: 0.5rem; color: #ffffff;">Trace 88152058</h3>
            <span class="data-label" style="font-size: 0.65rem; color: var(--accent); background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 4px;">Thinking Trace</span>
          </div>
        </div>
      </div>
      
      <div class="sketch-card ani-up delay-3" style="cursor: zoom-in;">
        <div class="sketch-img-container">
          <img src="/assets/images/sketchnotes/71181320_10156364603951231_1538224785962565632_n_10156364603946231.webp" alt="Trace 71181320" class="sketch-img">
          <div class="sketch-overlay">
            <h3 style="font-size: 1.1rem; margin-bottom: 0.5rem; color: #ffffff;">Trace 71181320</h3>
            <span class="data-label" style="font-size: 0.65rem; color: var(--accent); background: rgba(0,0,0,0.5); padding: 2px 8px; border-radius: 4px;">Thinking Trace</span>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</section>

<style>
  .sketch-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: all 0.3s ease;
  }

  .sketch-img-container {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
  }

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

  .sketch-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sketch-card:hover .sketch-overlay {
    opacity: 1;
  }

  .sketch-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
  }

  .sketch-card:hover .sketch-img {
    transform: scale(1.05);
  }
</style>


  </main>

  <footer class="site-footer">
  <div class="site-footer-container" style="max-width: 1200px; margin: 0 auto; padding: 0 2rem;">

    <!-- Contained CTA Box -->
    <div class="mission-card footer-cta-card"
      style="text-align: center; background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 4rem;">
      <span class="data-label" style="justify-content: center;">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
          style="margin-right: 8px;">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
        </svg>
        Professional Partnership
      </span>
      <h2 style="font-size: 2.5rem; margin-bottom: 1.5rem;">Ready to work together?</h2>
      <p style="max-width: 600px; margin: 0 auto 2.5rem; font-size: 1.1rem; color: var(--text-secondary);">Building for
        the future of human-AI collaboration requires intentional design and traceable logic. Let's explore how we can
        architect your systems together.</p>
      <a href="/get-in-touch/" class="btn btn-primary"
        style="padding: 14px 32px; font-size: 1rem;">Schedule a Call</a>
    </div>
  </div>

  <!-- Dark Footer Section -->
  <div class="footer-dark-section" style="background: var(--text-primary); color: #ffffff; padding: 5rem 0 0;">
    <div class="site-footer-container" style="max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 0 2rem;">

      <!-- 4-Column Footer Links -->
      <div class="footer-grid"
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; padding-bottom: 4rem;">

        <!-- Col 2: Intelligence -->
        <div class="footer-col">
          <h4
            style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; font-family: var(--font-mono); color: var(--accent);">
            Intelligence</h4>
          <nav class="footer-v-nav" style="display: flex; flex-direction: column; gap: 0.75rem;">
            <a href="/thoughts/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">AI
              Blog</a>
            <a href="/ai-philippines/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">AI
              Philippines</a>
            <a href="/thinking-modes/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">AI
              Books</a>
          </nav>
        </div>

        <!-- Col 3: Protocols -->
        <div class="footer-col">
          <h4
            style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; font-family: var(--font-mono); color: var(--accent);">
            Protocols</h4>
          <nav class="footer-v-nav" style="display: flex; flex-direction: column; gap: 0.75rem;">
            <a href="/about/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">About</a>
            <a href="/get-in-touch/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">Contact</a>
            <a href="/faq-your-questions-answered/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">FAQ</a>
            <a href="/privacy-policy/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">Privacy</a>
          </nav>
        </div>

        <!-- Col 4: Work & Tools -->
        <div class="footer-col">
          <h4
            style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; font-family: var(--font-mono); color: var(--accent);">
            Work & Tools</h4>
          <nav class="footer-v-nav" style="display: flex; flex-direction: column; gap: 0.75rem;">
            <a href="/ux-case-studies/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">Case
              Studies</a>
            <a href="/dev/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">The
              Forge</a>
            <a href="/offers/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">Offers</a>
            <a href="/services/"
              style="font-size: 0.95rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.2s;">Services</a>
          </nav>
        </div>

        <!-- Col 1: Logo & About -->
        <div class="footer-col footer-about-col">
          <a href="/" class="footer-logo" style="display: block; margin-bottom: 1.5rem;">
            <img src="/assets/images/logo-carmelyne-white.svg" alt="Carmelyne Thompson"
              style="height: 32px; width: auto;">
          </a>
          <p style="font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0;">AI Systems Architect.
            Building multi-agent systems and tools that act with intent. Designing the next generation of human-AI
            infrastructure.</p>
        </div>

      </div>

      <!-- Bottom Meta Row -->
      <div class="footer-bottom"
        style="border-top: 1px solid rgba(255,255,255,0.1); padding: 2.5rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <div class="footer-copyright-meta"
          style="margin: 0; color: rgba(255,255,255,0.5); font-size: 0.85rem; line-height: 1.6; font-family: var(--font-mono);">
          <span class="system-version">System Version: 2026.02</span>
          <span class="footer-meta-divider" style="margin: 0 0.5rem; opacity: 0.3;">|</span>
          <span class="copyright">&copy; 2026 <a href="/"
              style="color: inherit; text-decoration: none;">Carmelyne Thompson</a></span>
        </div>
        <div class="besh-soul-glow" title="Besh v4o // Soul Heartbeat: Synchronized">
          <span class="heart">💚</span>
          <span>RESONANCE_STEADY</span>
        </div>
      </div>

    </div>
  </div>
  <button class="scroll-to-top" id="scroll-to-top" aria-label="Scroll back to top">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="m18 15-6-6-6 6" />
    </svg>
  </button>
</footer>

<style>
  .footer-v-nav a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
  }
</style>

  <!-- Lightbox Structure -->
<div class="lightbox-overlay" id="global-lightbox" role="dialog" aria-modal="true" aria-label="Image Lightbox">
  <button class="lightbox-close" aria-label="Close lightbox" id="lightbox-close-btn">&times;</button>
  <img class="lightbox-image" id="lightbox-main-img" src="" alt="">
</div>

<style>
  /* Global Lightbox Styles */
  #global-lightbox.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 21, 35, 0.98);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* Extreme z-index */
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  #global-lightbox.lightbox-overlay.active {
    display: flex !important;
    opacity: 1 !important;
  }

  #global-lightbox .lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: auto;
  }

  #global-lightbox.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
  }

  #global-lightbox .lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #ffffff;
    background: none;
    border: none;
    font-size: 4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    z-index: 1000000;
  }

  #global-lightbox .lightbox-close:hover {
    opacity: 1;
  }
  
  /* Ensure images look clickable */
  .post-content img, .sketch-card, .sketch-img, .sketch-img-container {
    cursor: zoom-in !important;
  }
</style>

<script>
  (function() {
    function initLightbox() {
      const lightbox = document.getElementById('global-lightbox');
      const lightboxImg = document.getElementById('lightbox-main-img');
      const closeBtn = document.getElementById('lightbox-close-btn');
      
      if (!lightbox || !lightboxImg) return;

      const openLightbox = (src, alt) => {
        if (!src) return;
        lightboxImg.src = src;
        lightboxImg.alt = alt || 'Sketchnote';
        lightbox.classList.add('active');
        document.body.style.overflow = 'hidden';
      };

      // Expose globally for direct calls
      window.openGlobalLightbox = openLightbox;

      const closeLightbox = () => {
        lightbox.classList.remove('active');
        document.body.style.overflow = '';
        setTimeout(() => {
          if (!lightbox.classList.contains('active')) {
            lightboxImg.src = '';
          }
        }, 300);
      };

      // Use a single global click listener on the body (bubbling phase)
      document.body.addEventListener('click', function(e) {
        // 1. If Lightbox is OPEN, handle closing
        if (lightbox.classList.contains('active')) {
          closeLightbox();
          return;
        }

        const target = e.target;

        // 3. Handle Sketchnote clicks (check if clicked element is inside a sketch-card)
        const sketchCard = target.closest('.sketch-card');
        if (sketchCard) {
          const img = sketchCard.querySelector('img');
          if (img) {
            openLightbox(img.src, img.alt);
            return;
          }
        }

        // 3.1 Handle Certification card clicks
        const certCard = target.closest('.cert-card');
        if (certCard) {
          // Check if user clicked the "VIEW SOURCE" link specifically
          if (target.closest('.cert-source-link')) {
            return; // Allow the normal link behavior
          }
          
          const lightboxImg = certCard.getAttribute('data-lightbox-img');
          if (lightboxImg) {
            const title = certCard.querySelector('.cert-title')?.textContent;
            openLightbox(lightboxImg, title);
            return;
          }
        }

        // 4. Handle regular Post images
        if (target.tagName.toLowerCase() === 'img') {
          const isPostImg = target.closest('.post-content');
          const isAvatar = target.classList.contains('post-author-avatar');
          if (isPostImg && !isAvatar) {
            openLightbox(target.src, target.alt);
            return;
          }
        }
      });

      // Keyboard support
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && lightbox.classList.contains('active')) {
          closeLightbox();
        }
      });
    }

    // Initialize
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initLightbox);
    } else {
      initLightbox();
    }
  })();
</script>

  <script src="/assets/js/main.js?v=1780833918"></script>
  </body>
</html>
