<style>
      :root {
        --radius: 8px;
        --bg: oklch(99% 0 0);
        --fg: oklch(15% 0 0);
        --card: oklch(100% 0 0);
        --muted: oklch(96% 0 0);
        --muted-fg: oklch(55% 0 0);
        --primary: oklch(25% 0 0);
        --primary-fg: oklch(98% 0 0);
        --border: oklch(90% 0 0);
        --ring: oklch(25% 0 0);
      }
      * { box-sizing: border-box }
      html { scroll-behavior: smooth }
      body {
        margin: 0;
        font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        background: var(--bg);
        color: var(--fg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      a { color: inherit; text-decoration: none }
      img { max-width: 100%; display: block }
      button { font: inherit }

      /* Utilities */
      .container { max-width: 1100px; margin: 0 auto; padding: 0 24px }
      .btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 8px; padding: 12px 18px; border-radius: var(--radius);
        border: 1px solid var(--fg); background: var(--fg); color: var(--primary-fg);
        transition: transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
        cursor: pointer; text-decoration: none; font-weight: 600;
      }
      .btn:hover { transform: translateY(-1px) }
      .btn.secondary {
        background: transparent; color: var(--fg); border-color: var(--border);
      }
      .btn.ghost {
        background: transparent; color: var(--fg); border-color: var(--fg);
      }

      .badge {
        display: inline-block; padding: 6px 10px; border-radius: 999px;
        background: var(--muted); color: var(--fg); font-size: 12px; font-weight: 600;
        border: 1px solid var(--border);
      }

      .card {
        border: 1px solid var(--border);
        border-radius: calc(var(--radius) + 2px);
        background: var(--card);
      }

      /* Animations */
      @keyframes fadeUp {
        from { opacity: 0; transform: translateY(16px) }
        to { opacity: 1; transform: translateY(0) }
      }
      .fade-up { animation: fadeUp .6s ease both }
      .fade-up-del-1 { animation-delay: .1s }
      .fade-up-del-2 { animation-delay: .2s }
      .fade-up-del-3 { animation-delay: .3s }
      .fade-up-del-4 { animation-delay: .4s }
      .fade-up-del-5 { animation-delay: .5s }
      .fade-up-del-6 { animation-delay: .6s }

      /* Navbar */
      .nav {
        position: sticky; top: 0; z-index: 50;
        backdrop-filter: blur(10px);
        background: color-mix(in oklch, var(--bg) 85%, transparent);
        border-bottom: 1px solid var(--border);
      }
      .nav-inner {
        height: 64px; display: flex; align-items: center; justify-content: space-between;
      }
      .brand { font-weight: 800; letter-spacing: -0.02em; font-size: 18px }
      .nav-links { display: none; gap: 24px; align-items: center }
      .nav-link {
        font-size: 14px; font-weight: 600; color: oklch(45% 0 0);
      }
      .nav-link:hover { color: var(--fg) }
      .nav-cta { display: none }
      .hamburger {
        border: none; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer;
      }

      /* Mobile menu */
      .mobile-menu {
        display: none; border-top: 1px solid var(--border); padding: 16px 0;
      }
      .mobile-menu a { display: block; padding: 10px 0; font-weight: 600; color: oklch(45% 0 0) }
      .mobile-menu a:hover { color: var(--fg) }

      /* Hero */
      .hero {
        min-height: calc(100svh - 64px);
        display: grid; place-items: center; padding: 0 24px;
      }
      .hero h1 {
        font-size: clamp(32px, 6vw, 56px); line-height: 1.05; margin: 0 0 16px; font-weight: 800; letter-spacing: -0.04em;
      }
      .hero .accent { color: var(--primary) }
      .lead {
        color: var(--muted-fg);
        font-size: clamp(16px, 2.4vw, 20px);
        line-height: 1.6;
        max-width: 720px; margin: 0 auto 28px;
      }
      .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }

      /* Stats */
      .stats {
        margin-top: 56px;
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center;
      }
      .stat-number { color: var(--primary); font-weight: 800; font-size: 24px }
      .stat-label { color: var(--muted-fg); font-size: 14px }

      /* Highlights */
      .section-muted { background: color-mix(in oklch, var(--muted) 60%, transparent); }
      .section { padding: 96px 0 }
      .section header { text-align: center; margin-bottom: 40px }
      .section h2 { font-size: clamp(24px, 4vw, 36px); margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em }
      .section p.section-lead { margin: 0 auto; max-width: 740px; color: var(--muted-fg); font-size: 18px }
      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .highlight {
        padding: 20px;
        transition: transform .2s ease, border-color .2s ease;
      }
      .highlight:hover { transform: translateY(-2px) }
      .icon {
        display: inline-grid; place-items: center; width: 40px; height: 40px;
        border-radius: 10px; background: color-mix(in oklch, var(--primary) 12%, white);
        color: var(--primary); margin-bottom: 12px; font-size: 18px; font-weight: 700;
      }
      .highlight h3 { margin: 0 0 8px; font-size: 16px }
      .highlight p { margin: 0; color: var(--muted-fg); line-height: 1.6; font-size: 14px }

      /* CTA */
      .cta {
        background: var(--fg); color: var(--primary-fg);
        border-radius: calc(var(--radius) + 2px);
        padding: 48px 24px; text-align: center;
      }
      .cta h2 { margin: 0 0 12px; font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; letter-spacing: -0.02em }
      .cta p { margin: 0 auto 20px; max-width: 720px; color: color-mix(in oklch, var(--primary-fg) 82%, transparent) }
      .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
      .btn.inv {
        background: transparent; border-color: var(--primary-fg); color: var(--primary-fg);
      }
      .btn.inv:hover { background: var(--primary-fg); color: var(--fg) }

      /* Footer */
      .footer {
        border-top: 1px solid var(--border);
        padding: 32px 0; text-align: center; color: var(--muted-fg); font-size: 14px;
      }

      /* Responsive */
      @media (min-width: 768px) {
        .nav-links { display: flex }
        .nav-cta { display: block }
        .hamburger { display: none }
        .grid { grid-template-columns: repeat(2, 1fr) }
      }
      @media (min-width: 1024px) {
        .grid { grid-template-columns: repeat(3, 1fr) }
      }

        /* Blog header */
        .blog-header {
            text-align: left;
            margin-bottom: 2rem; /* add space below header before posts */
        }
        .blog-header h1 {
            margin: 0 0 0.25rem 0; /* keep a little space under "Blog" */
        }
        .blog-header p {
            margin: 0;
            color: var(--muted-fg);
            font-size: 1rem;  /* slightly smaller than normal body */
        }
        .blog-post {
            margin-bottom: 2.5rem;      /* spacing between posts */
            padding-bottom: 1.5rem;     /* space before divider */
            border-bottom: 1px solid #ddd; /* faint gray divider */
        }
          
        .blog-post:last-child {
            border-bottom: none; /* don’t show divider after the last post */
        }

    </style>