<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Primary Meta Tags -->
    <title>ConsultFlow - AI Reliability Engine</title>
    <meta name="title" content="ConsultFlow - AI Reliability Engine" />
    <meta
      name="description"
      content="ConsultFlow turns generic AI into reliable, expert-validated workflows for high-stakes domains. Starting with veterinary medicine."
    />
    <meta
      name="keywords"
      content="AI reliability, expert validation, specialized AI, veterinary AI, domain expertise"
    />
    <meta name="author" content="ConsultFlow" />
    <meta name="robots" content="index, follow" />
    <link rel="canonical" href="https://www.consult-flow.com/" />

    <!-- Open Graph Meta Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="ConsultFlow - AI Reliability Engine" />
    <meta
      property="og:description"
      content="Solving the Last 1% Problem in specialized AI applications."
    />
    <meta property="og:url" content="https://www.consult-flow.com/" />
    <meta property="og:site_name" content="ConsultFlow" />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="ConsultFlow - AI Reliability Engine" />
    <meta
      name="twitter:description"
      content="Solving the Last 1% Problem in specialized AI applications."
    />

    <!-- Favicon and Icons -->
    <link rel="icon" type="image/png" href="/consultflow_logo_transparent.png?v=3" />
    <link rel="apple-touch-icon" href="/consultflow_logo_transparent.png" />

    <!-- Google Fonts: Inter for UI, Roboto Mono for Data/Tech -->
    <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&family=Roboto+Mono:wght@400;500;600&display=swap"
      rel="stylesheet"
    />

    <style>
      :root {
        /* Palette */
        --primary: #0f172a; /* Slate 900 */
        --primary-light: #334155; /* Slate 700 */
        --accent: #2563eb; /* Royal Blue */
        --accent-dark: #1d4ed8;
        --accent-soft: #eff6ff;

        --text-main: #1e293b;
        --text-muted: #64748b;
        --text-light: #94a3b8;

        --bg-page: #ffffff;
        --bg-surface: #f8fafc;
        --bg-highlight: #f1f5f9;

        --border-subtle: #e2e8f0;
        --border-strong: #cbd5e1;

        /* Spacing & Radius */
        --radius-sm: 0.5rem;
        --radius-md: 0.75rem;
        --radius-lg: 1rem;
        --radius-xl: 1.5rem;

        --container-width: 1300px;
        --header-height: 72px;
      }

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

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        line-height: 1.6;
        color: var(--text-main);
        background: var(--bg-page);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        color: var(--primary);
        letter-spacing: -0.02em;
      }

      .font-mono {
        font-family: "Roboto Mono", monospace;
      }

      a {
        text-decoration: none;
        color: inherit;
        transition: color 0.2s ease;
      }

      .container {
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 0 1.5rem;
      }

      /* Header */
      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(12px);
                backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-subtle);
        z-index: 1000;
        height: var(--header-height);
      }

      .header-inner {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .logo {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
      }

      .logo img {
        width: 28px;
        height: 28px;
      }

      .logo-text {
        font-family: "Roboto Mono", monospace;
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--primary);
      }

      .logo-text span.flow {
        opacity: 0.6;
      }

      .nav-cta {
        border-radius: 999px;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--bg-page);
        background: var(--primary);
        transition: all 0.2s ease;
      }

      .nav-cta:hover {
        background: var(--primary-light);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
      }

      /* Main */
      main {
        padding-top: var(--header-height);
      }

      /* Common Section Styles */
      .section {
        padding: 5rem 0;
      }

      .section-alt {
        background: var(--bg-surface);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
      }

      .section-header {
        margin-bottom: 3.5rem;
        max-width: 42rem;
      }

      .section-eyebrow {
        font-family: "Roboto Mono", monospace;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--accent);
        margin-bottom: 0.75rem;
        font-weight: 500;
      }

      .section-title {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
      }

      .section-subtitle {
        font-size: 1.05rem;
        color: var(--text-muted);
        line-height: 1.7;
      }

      /* Hero */
      .hero {
        padding: 4rem 0 5rem;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 4rem;
        align-items: center;
      }

      .hero-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        line-height: 1.1;
        margin-bottom: 1.5rem;
        letter-spacing: -0.03em;
      }

      .hero-highlight {
        color: var(--primary);
        position: relative;
        display: inline-block;
      }

      .hero-highlight::after {
        content: "";
        position: absolute;
        bottom: 0.1em;
        left: -0.1em;
        right: -0.1em;
        height: 0.3em;
        background: var(--accent-soft);
        z-index: -1;
        border-radius: 4px;
      }

      .hero-subtitle {
        font-size: 1.125rem;
        color: var(--text-muted);
        max-width: 32rem;
        margin-bottom: 2.5rem;
      }

      .btn-group {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 2rem;
      }

      .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem 1.75rem;
        border-radius: 999px;
        background: var(--primary);
        color: white;
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.2s ease;
      }

      .btn-primary:hover {
        background: var(--primary-light);
        transform: translateY(-1px);
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
      }

      .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem 1.75rem;
        border-radius: 999px;
        background: white;
        border: 1px solid var(--border-strong);
        color: var(--text-main);
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.2s ease;
      }

      .btn-secondary:hover {
        background: var(--bg-surface);
        border-color: var(--text-muted);
        transform: translateY(-1px);
      }

      /* Hero Card */
      .hero-card {
        background: white;
        border-radius: var(--radius-lg);
        padding: 2rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--border-subtle);
      }

      .hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px dashed var(--border-subtle);
      }

      .metric-value {
        font-family: "Roboto Mono", monospace;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--primary);
      }

      .metric-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        margin-top: 0.25rem;
      }

      /* Feature Cards (Domains) */
      .grid-features {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.5rem;
      }

      .card-feature {
        background: white;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: 1.5rem;
        transition: all 0.2s ease;
      }

      .card-feature:hover {
        border-color: var(--accent);
        box-shadow: 0 10px 30px rgba(37, 99, 235, 0.05);
        transform: translateY(-2px);
      }

      .feature-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
      }

      .feature-name {
        font-weight: 600;
        font-size: 1.1rem;
      }

      .badge {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.2rem 0.5rem;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .badge.live {
        background: #dcfce7;
        color: #166534;
      }

      .badge.soon {
        background: #f1f5f9;
        color: #64748b;
      }

      /* Videos Section */
      .videos-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-top: 3rem;
      }

      .video-card {
        background: white;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--border-subtle);
        box-shadow: 0 10px 30px rgba(0,0,0,0.04);
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
      }

      .video-frame {
        aspect-ratio: 16/10;
        background: var(--primary);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .video-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(255,255,255,0.05) 0%, transparent 100%);
      }

      .play-btn {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.4);
        color: white;
        font-size: 1.5rem;
        transition: all 0.3s ease;
        cursor: pointer;
        z-index: 10;
      }

      .video-card:hover .play-btn {
        transform: scale(1.1);
        background: white;
        color: var(--primary);
      }

      .video-content {
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .video-tag {
        font-family: "Roboto Mono", monospace;
        font-size: 0.75rem;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.75rem;
        display: block;
        font-weight: 600;
      }

      .video-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        line-height: 1.2;
        color: var(--primary);
      }

      .video-desc {
        font-size: 1.1rem;
        color: var(--text-muted);
        margin-bottom: 1.5rem;
        line-height: 1.5;
      }

      .video-divider {
        display: none;
      }

      .video-features {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .video-feature-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.5;
      }

      .video-feature-icon {
        display: none;
      }

      .video-feature-text strong {
         font-weight: 600;
         font-size: 0.95rem;
         color: var(--primary);
         display: block;
         margin-bottom: 0.25rem;
      }

      /* REDESIGNED FLYWHEEL */
      .flywheel-bg-light {
        background: white;
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-subtle);
        overflow: hidden;
        box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.05);
      }

      .flywheel-layout {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
      }

      .flywheel-intro {
        padding: 4rem 3rem;
        background: var(--bg-surface);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .flywheel-diagram {
        padding: 4rem 3rem;
        position: relative;
        background: white;
      }

      .cycle-steps {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        position: relative;
      }

      .cycle-step {
        display: flex;
        gap: 1.5rem;
        position: relative;
      }

      /* Connecting Line */
      .cycle-steps::before {
        content: "";
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 24px; /* half of icon width */
        width: 2px;
        background: var(--border-subtle);
        z-index: 0;
      }

      .cycle-icon-wrapper {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 50%;
        background: white;
        border: 2px solid var(--accent);
        color: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        position: relative;
        z-index: 1;
        box-shadow: 0 0 0 4px white; /* mask connecting line */
      }

      .cycle-content h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
        color: var(--primary);
      }

      .cycle-content p {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.5;
      }

      .highlight-text {
        color: var(--accent-dark);
        font-weight: 600;
      }

      /* Footer */
      .footer {
        padding: 4rem 0;
        background: white;
        border-top: 1px solid var(--border-subtle);
        color: var(--text-muted);
        font-size: 0.9rem;
      }

      .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
      }

      /* Partner Grid & Cards */
      .partner-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem; /* Space between cards */
        flex-wrap: wrap;
      }

      /* The clickable card container */
      .partner-card {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: white;
        border: 1px solid var(--border-subtle); /* Light gray border */
        border-radius: var(--radius-lg);        /* ROUNDED CORNERS */
        padding: 1.5rem 2.5rem;                 /* Breathing room around logo */
        transition: all 0.2s ease;

        /* Ensures it looks clickable */
        cursor: pointer;
        text-decoration: none;
      }

      /* Hover Effects: Lift + Shadow + Border Color */
      .partner-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
        border-color: var(--accent); /* Turns blue on hover */
      }

      .partner-logo {
        height: 60px; /* Adjust this if the logo looks too big/small */
        width: auto;
        -o-object-fit: contain;
           object-fit: contain;
        display: block;
      }

      /* Banner Section (Transparent) */
      .banner-section {
        padding-top: 2rem;
        padding-bottom: 0.5rem; /* Reduced gap to the headline */
        text-align: center;      /* Ensures the image stays centered */
      }

      .banner-container {
        /* No background, no border, no shadow */
        background: transparent;
        width: 100%;
        max-width: 1200px; /* Limits width so it doesn't stretch too wide on huge screens */
        margin: 0 auto;   /* Centers the block */
        display: flex;
        justify-content: center;
      }

      .banner-img {
        width: 100%;
        height: auto;      /* Maintains aspect ratio */
        max-height: 350px; /* Prevents it from getting too tall */
        -o-object-fit: contain;
           object-fit: contain; /* Ensures the whole image is visible */
        display: block;
      }

      @media (max-width: 768px) {
        .banner-img {
          max-height: 200px;
        }
      }

      /* Responsive */
      @media (max-width: 900px) {
        .hero-grid {
          grid-template-columns: 1fr;
          text-align: center;
        }

        .video-card {
          grid-template-columns: 1fr;
        }

        .video-frame {
          order: -1;
        }

        .hero-subtitle, .btn-group {
          margin-left: auto;
          margin-right: auto;
          justify-content: center;
        }

        .flywheel-layout {
          grid-template-columns: 1fr;
        }

        .flywheel-intro {
          padding: 3rem 2rem;
          border-bottom: 1px solid var(--border-subtle);
        }

        .flywheel-diagram {
          padding: 3rem 2rem;
        }
      }

    </style>
  </head>
  <body>
    <!-- Header -->
    <header class="header">
      <div class="container header-inner">
        <a href="/" class="logo">
          <img src="/consultflow_logo_transparent.png" alt="ConsultFlow Logo" />
          <span class="logo-text">CONSULT<span class="flow">FLOW</span></span>
        </a>
        <nav>
          <a href="mailto:help@consult-flow.com" class="nav-cta">Partner With Us</a>
        </nav>
      </div>
    </header>

    <main>

      <section class="banner-section">
        <div class="container banner-container">
          <img
            src="/banner_transparent.png"
            alt="ConsultFlow Platform"
            class="banner-img"
          />
        </div>
      </section>

      <!-- Hero Section -->
      <section class="hero" style="text-align: center; padding: 4rem 1rem;">
        <div class="container" style="max-width: 1000px; margin: 0 auto;">

          <div class="section-eyebrow" style="justify-content: center; margin-bottom: 1.5rem;">
            The Last Mile of AI Reliability
          </div>

          <h1 class="hero-title" style="font-size: 3rem; line-height: 1.2; margin-bottom: 1.5rem;">
            Bridging the gap between
            <br>
            <span class="hero-highlight">Raw Intelligence</span> and <span class="hero-highlight">Professional Trust</span>
          </h1>

          <p class="hero-subtitle" style="font-size: 1.125rem; margin: 0 auto 2.5rem auto; max-width: 600px;">
            The challenge isn't generating answers—it's validating them. ConsultFlow solves the adoption gap by anchoring automated insights in expert-verified feedback loops.
          </p>

          <div class="btn-group" style="justify-content: center; margin-bottom: 3.5rem;">
            <a href="mailto:help@consult-flow.com" class="btn-primary">Book a Demo</a>
            <a href="#solutions" class="btn-secondary">See the Workflow</a>
          </div>

          <div class="hero-features" style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; border-top: 1px solid #e5e7eb; padding-top: 2rem;">

            <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted);">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1e40af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
              <span style="font-weight: 500; color: #1f2937;">Expert-Validated Data</span>
            </div>

            <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted);">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1e40af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
              <span style="font-weight: 500; color: #1f2937;">Human-in-the-Loop</span>
            </div>

            <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted);">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1e40af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
              <span style="font-weight: 500; color: #1f2937;">Enterprise-Grade Safety</span>
            </div>

          </div>

        </div>
      </section>



      <!-- Dual Experience Demo Section -->
      <section class="section">
        <div class="container">
          <div class="section-header" style="max-width: 100%;">
            <div class="section-eyebrow">The Workflow</div>
            <h2 class="section-title">Intelligent Assistant. Expert Control.</h2>
            <p class="section-subtitle" style="max-width: 50rem;">
              Watch how ConsultFlow bridges the gap between unstructured user needs and rigorous professional standards. This architecture powers verified outcomes across any high-stakes domain.
            </p>
          </div>

          <div class="videos-grid">
            <!-- Client Side Video -->
            <div class="video-card">
              <div class="video-content">
                <span class="video-tag">For Clients</span>
                <h3 class="video-title">AI Assistant Focus</h3>
                <p class="video-desc">
                  Answers low-acuity consultation requests with high quality, reducing wait time for basic guidance.
                </p>

                <ul class="video-features">
                  <li class="video-feature-item">
                    <span class="video-feature-text">
                      <strong>Backed by Verified Research</strong>
                      Uses similar expert-approved cases to ensure reliability beyond generic AI.
                    </span>
                  </li>
                  <li class="video-feature-item">
                    <span class="video-feature-text">
                      <strong>Internal Management</strong>
                      Helps clients handle everyday questions, escalating only when expert review is needed.
                    </span>
                  </li>
                </ul>
              </div>
              <div class="video-frame">
                <div class="play-btn">▶</div>
                <!-- Placeholder for Video Thumbnail -->
                <div style="position:absolute; bottom: 1rem; left: 1rem; color: white; font-size: 0.8rem; opacity: 0.8;">Client Interface Demo</div>
              </div>
            </div>

            <!-- Specialist Side Video -->
            <div class="video-card">
              <div class="video-content">
                <span class="video-tag">For Experts</span>
                <h3 class="video-title">AI Copilot for Deep Consults</h3>
                <p class="video-desc">
                  Understands complex files without requiring experts to read everything, extracting the true value.
                </p>

                <ul class="video-features">
                  <li class="video-feature-item">
                    <span class="video-feature-text">
                      <strong>Drafts with Reasoning</strong>
                      Generates reports with logical reasoning, supporting evidence, precedents, and research literature.
                    </span>
                  </li>
                  <li class="video-feature-item">
                    <span class="video-feature-text">
                      <strong>Expert Authority</strong>
                      Specialists question, revise, and approve the final output, combining AI scale with human expertise.
                    </span>
                  </li>
                </ul>
              </div>
              <div class="video-frame">
                <div class="play-btn">▶</div>
                <!-- Placeholder for Video Thumbnail -->
                <div style="position:absolute; bottom: 1rem; left: 1rem; color: white; font-size: 0.8rem; opacity: 0.8;">Specialist Interface Demo</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Vision Section -->
      <section class="section">
        <div class="container">
          <div class="section-header" style="text-align: center; margin-left: auto; margin-right: auto; max-width: 50rem;">
            <div class="section-eyebrow" style="justify-content: center;">The Vision</div>
            <h2 class="section-title">The Data Engine – Where Expert Decisions Become Intelligence</h2>
            <p class="section-subtitle">
              Every clinical decision becomes data. Every data point makes the AI smarter.
            </p>
          </div>

          <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 3rem;">

            <!-- Step 1 -->
            <div class="card-feature" style="text-align: center; flex: 1 1 300px; max-width: 400px;">
              <div style="margin-bottom: 1rem; color: var(--accent); display: flex; justify-content: center;">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>
              </div>
              <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem;">1. Experts Teach the AI</h3>
              <p style="font-size: 0.95rem; color: var(--text-muted); line-height: 1.6;">
                Specialists review AI drafts. Every correction becomes a learning signal.
              </p>
            </div>

            <!-- Step 2 -->
            <div class="card-feature" style="text-align: center; flex: 1 1 300px; max-width: 400px;">
              <div style="margin-bottom: 1rem; color: var(--accent); display: flex; justify-content: center;">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
              </div>
              <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem;">2. Knowledge Becomes Data</h3>
              <p style="font-size: 0.95rem; color: var(--text-muted); line-height: 1.6;">
                Clinical reasoning is structured into reusable training data.
              </p>
            </div>

            <!-- Step 3 -->
            <div class="card-feature" style="text-align: center; flex: 1 1 300px; max-width: 400px;">
              <div style="margin-bottom: 1rem; color: var(--accent); display: flex; justify-content: center;">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
              </div>
              <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem;">3. Models Improve Automatically</h3>
              <p style="font-size: 0.95rem; color: var(--text-muted); line-height: 1.6;">
                Accuracy compounds with each new case — not with each new model.
              </p>
            </div>

          </div>

          <!-- The Vision Quote -->
          <div style="text-align: center; max-width: 800px; margin: 2rem auto 0 auto;">
            <p style="font-family: Georgia, serif; font-style: italic; font-size: 1.6rem; font-weight: 500; color: var(--primary); margin-bottom: 1.5rem; letter-spacing: -0.01em; line-height: 1.4;">
              "We turn expertise into data, data into intelligence, <br>and intelligence that improves itself."
            </p>
            <div style="display: flex; justify-content: center; gap: 1.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600;">
              <span>Scalable</span>
              <span style="opacity: 0.3;">•</span>
              <span>Searchable</span>
              <span style="opacity: 0.3;">•</span>
              <span>Self-Improving</span>
            </div>
          </div>

        </div>
      </section>

      <!-- Domain Solutions -->
      <section id="solutions" class="section section-alt">
        <div class="container">
          <div class="section-header">
            <div class="section-eyebrow">The Verticals</div>
            <h2 class="section-title">One engine, many domains.</h2>
            <p class="section-subtitle">
              We start with veterinary medicine and extend the trusted pattern to other regulated fields.
            </p>
          </div>

          <div class="grid-features">
            <a href="/vet-flow" class="card-feature">
              <div class="feature-header">
                <div class="feature-name">VetFlow</div>
                <span class="badge live">Live</span>
              </div>
              <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem;">
                AI-assisted veterinary consults, validated by board-certified specialists.
              </p>
            </a>

            <div class="card-feature">
              <div class="feature-header">
                <div class="feature-name">DentFlow</div>
                <span class="badge soon">Soon</span>
              </div>
              <p style="font-size: 0.9rem; color: var(--text-muted);">
                Structured intake and AI drafts for dental cases.
              </p>
            </div>

            <div class="card-feature">
              <div class="feature-header">
                <div class="feature-name">LawFlow</div>
                <span class="badge soon">Soon</span>
              </div>
              <p style="font-size: 0.9rem; color: var(--text-muted);">
                Drafting and research assistance with attorney oversight.
              </p>
            </div>

            <div class="card-feature">
              <div class="feature-header">
                <div class="feature-name">MedFlow</div>
                <span class="badge soon">Soon</span>
              </div>
              <p style="font-size: 0.9rem; color: var(--text-muted);">
                Future expansion into human healthcare with physician review.
              </p>
            </div>
          </div>



        </div>
      </section>

      <!-- NEW Business Model Section -->
      <section class="section">
        <div class="container">
          <div class="flywheel-bg-light">
            <div class="flywheel-layout">

              <!-- Left: The Pitch -->
              <div class="flywheel-intro">
                <div class="section-eyebrow">The Partnership</div>
                <h2 class="section-title">A Shared-Success Flywheel</h2>
                <p class="section-subtitle" style="margin-bottom: 2rem;">
                  We don't just sell software. We partner with specialist organizations to build a sustainable, revenue-generating ecosystem.
                </p>

                <ul style="display: flex; flex-direction: column; gap: 1rem; list-style: none;">
                  <li style="display: flex; gap: 0.75rem; align-items: center;">
                    <span style="color: #10b981;">✓</span>
                    <span>Shared subscription revenue</span>
                  </li>
                  <li style="display: flex; gap: 0.75rem; align-items: center;">
                    <span style="color: #10b981;">✓</span>
                    <span>Defensible data IP for the org</span>
                  </li>
                  <li style="display: flex; gap: 0.75rem; align-items: center;">
                    <span style="color: #10b981;">✓</span>
                    <span>Reduced burnout for specialists</span>
                  </li>
                </ul>
              </div>

              <!-- Right: The Cycle Diagram -->
              <div class="flywheel-diagram">
                <div class="cycle-steps">
                  <!-- Step 1 -->
                  <div class="cycle-step">
                    <div class="cycle-icon-wrapper">1</div>
                    <div class="cycle-content">
                      <h4>Streamline Specialist Work</h4>
                      <p>Our platform makes reviewing cases 5x faster, freeing up experts to focus on high-value decisions.</p>
                    </div>
                  </div>

                  <!-- Step 2 -->
                  <div class="cycle-step">
                    <div class="cycle-icon-wrapper">2</div>
                    <div class="cycle-content">
                      <h4>Deploy AI Assistant to Clients</h4>
                      <p>We launch a branded <span class="highlight-text">AI Assistant</span> for your organization to handle routine intake and triage.</p>
                    </div>
                  </div>

                  <!-- Step 3 -->
                  <div class="cycle-step">
                    <div class="cycle-icon-wrapper">3</div>
                    <div class="cycle-content">
                      <h4>Revenue Share & Data Loop</h4>
                      <p>Client subscriptions generate <span class="highlight-text">revenue for you</span>, while expert edits continuously improve the AI's accuracy.</p>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>

      <!-- Partnerships -->
      <section class="section section-alt">
        <div class="container">
          <div class="section-header" style="margin-bottom: 2rem; text-align: center; max-width: 100%;">
            <p class="section-eyebrow">Trusted By</p>
            <h2 class="section-title" style="font-size: 1.75rem;">Leading institutions driving the future of care.</h2>
          </div>

          <div class="partner-grid">
            <a href="https://hospital.cvm.ncsu.edu" target="_blank" rel="noopener noreferrer" class="partner-card">
              <img
                src="/NC_State_Vet_Hospital_Vertical_Logo_WolfpackRed_RGB-2.png"
                alt="NCSU Veterinary Hospital"
                class="partner-logo"
              />
            </a>

          </div>
        </div>
      </section>

      <!-- Final CTA -->
      <section class="section" style="text-align: center;">
        <div class="container" style="max-width: 64rem;">
          <h2 class="section-title">Ready to monetize your expertise?</h2>
          <p class="section-subtitle" style="margin-bottom: 2rem;">
            If you represent a specialist organization, let's talk about how ConsultFlow can increase your efficiency and generate new revenue streams.
          </p>
          <a href="mailto:help@consult-flow.com" class="btn-primary" style="padding: 1rem 2.5rem; font-size: 1.1rem;">
            Partner with Us
          </a>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="container footer-content">
        <div>
          <div style="font-weight: 600; color: var(--primary); margin-bottom: 0.5rem;">ConsultFlow</div>
          <p>© 2025 ConsultFlow, LLC</p>
        </div>
        <div style="display: flex; gap: 2rem;">
          <a href="mailto:help@consult-flow.com">Contact</a>
          <a href="#privacy">Privacy Policy</a>
          <a href="#terms">Terms of Service</a>
        </div>
      </div>
    </footer>
  </body>
</html>