> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.2cloudnine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Documentation

{/* HERO */}

<section className="relative overflow-hidden bg-gradient-to-br from-[#0b2746] via-[#143a6c] to-[#1f5c8a]">
  <div className="absolute inset-0 opacity-[0.18] pointer-events-none" style={{backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.6) 1px, transparent 0)", backgroundSize: "28px 28px"}} />

  <div className="absolute -top-32 -right-32 h-[28rem] w-[28rem] rounded-full bg-[#3e90cf]/30 blur-3xl pointer-events-none" />

  <div className="absolute -bottom-40 -left-40 h-[32rem] w-[32rem] rounded-full bg-[#8fccee]/20 blur-3xl pointer-events-none" />

  <div className="relative mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 sm:py-28 lg:py-32">
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-7">
        <a href="/" className="mb-8 block w-fit" aria-label="2cloudnine documentation home">
          <img src="https://mintcdn.com/2cloudnine-2edf05eb/GqV_AOLAwwkIFiFt/images/logo-dark.svg?fit=max&auto=format&n=GqV_AOLAwwkIFiFt&q=85&s=f7a20baf7b176a32b23c313852cc2ea6" alt="2cloudnine" width={400} height={115} className="h-28 w-auto sm:h-32 lg:h-40 max-w-[min(100%,22rem)]" data-path="images/logo-dark.svg" />

          <span className="sr-only">2cloudnine documentation home</span>
        </a>

        <div className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 backdrop-blur px-4 py-1.5 text-xs font-medium text-[#cfe6f7] uppercase tracking-wider">
          <span className="h-1.5 w-1.5 rounded-full bg-[#8fccee]" />

          Documentation
        </div>

        <h1 className="mt-6 text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white leading-[1.05]">
          Unify.<br />
          Automate.<br />
          <span className="bg-gradient-to-r from-[#8fccee] to-white bg-clip-text text-transparent">Accelerate.</span>
        </h1>

        <p className="mt-7 text-lg sm:text-xl text-[#cfe6f7] max-w-2xl leading-relaxed">
          The end-to-end staffing platform that connects your front, middle, and back office — natively on Salesforce, supercharged with agentic AI.
        </p>

        <div className="mt-10 flex flex-wrap items-center gap-4">
          <a href="/introduction" className="inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3 text-sm font-semibold text-[#0b2746] hover:bg-[#cfe6f7] no-underline shadow-lg shadow-black/20">
            Browse the docs

            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>

          <a href="https://2cloudnine.com/us/request-demo/" className="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 backdrop-blur px-6 py-3 text-sm font-semibold text-white hover:bg-white/10 no-underline">
            Request a demo
          </a>

          <a href="/getting-started" className="inline-flex items-center gap-2 px-2 py-3 text-sm font-semibold text-[#cfe6f7] hover:text-white no-underline">
            Quick start

            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>

        <div className="mt-14 flex flex-wrap items-center gap-x-8 gap-y-3 text-xs font-medium uppercase tracking-wider text-[#8fccee]/80">
          <div className="flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Salesforce-native
          </div>

          <div className="flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Powered by Agentforce
          </div>

          <div className="flex items-center gap-2">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Purpose-built for staffing
          </div>
        </div>
      </div>

      <div className="lg:col-span-5 hidden lg:block">
        <div className="relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-md shadow-2xl shadow-black/30 p-6">
          <div className="flex items-center justify-between mb-5">
            <div className="flex items-center gap-2">
              <span className="h-2.5 w-2.5 rounded-full bg-[#ff6b6b]" />

              <span className="h-2.5 w-2.5 rounded-full bg-[#ffd166]" />

              <span className="h-2.5 w-2.5 rounded-full bg-[#3ecf8e]" />
            </div>

            <span className="text-[10px] uppercase tracking-wider text-white/50">Pay run · Live</span>
          </div>

          <div className="space-y-3">
            <div className="rounded-lg bg-white/5 border border-white/10 p-4">
              <div className="flex items-center justify-between">
                <span className="text-xs font-medium text-[#8fccee] uppercase tracking-wider">Timesheets imported</span>
                <span className="text-xs text-white/50">VMS Connect</span>
              </div>

              <div className="mt-2 flex items-baseline gap-2">
                <span className="text-3xl font-bold text-white">12,438</span>
                <span className="text-xs font-medium text-[#3ecf8e]">+18%</span>
              </div>

              <div className="mt-3 h-1.5 w-full rounded-full bg-white/10 overflow-hidden">
                <div className="h-full w-[82%] rounded-full bg-gradient-to-r from-[#3e90cf] to-[#8fccee]" />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="rounded-lg bg-white/5 border border-white/10 p-4">
                <span className="text-[10px] font-medium text-white/60 uppercase tracking-wider">Auto-billed</span>
                <div className="mt-1 text-2xl font-bold text-white">\$4.2M</div>
                <div className="text-[10px] text-[#3ecf8e]">100% reconciled</div>
              </div>

              <div className="rounded-lg bg-white/5 border border-white/10 p-4">
                <span className="text-[10px] font-medium text-white/60 uppercase tracking-wider">Compliance</span>
                <div className="mt-1 text-2xl font-bold text-white">0</div>
                <div className="text-[10px] text-white/50">Errors flagged</div>
              </div>
            </div>

            <div className="rounded-lg bg-white/5 border border-white/10 p-4">
              <div className="flex items-center justify-between">
                <span className="text-xs font-medium text-white">Agentforce Agent</span>
                <span className="text-[10px] uppercase tracking-wider text-[#3ecf8e]">Active</span>
              </div>

              <p className="mt-2 text-xs text-white/70 leading-relaxed">
                Resolved 47 timesheet variances. Flagged 3 contracts for CBA review.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{/* STATS STRIP */}

<section className="border-y border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-[#0a1830]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-12 lg:py-14">
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-4">
      <div className="text-center lg:text-left">
        <div className="text-4xl sm:text-5xl font-bold text-[#1f5c8a] dark:text-[#8fccee]">1 week</div>
        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60">From kickoff to payroll-ready at Protech</p>
      </div>

      <div className="text-center lg:text-left lg:border-l lg:border-[#e5eaf0] dark:lg:border-white/10 lg:pl-8">
        <div className="text-4xl sm:text-5xl font-bold text-[#1f5c8a] dark:text-[#8fccee]">60%</div>
        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60">Less timesheet admin at Allegis Group</p>
      </div>

      <div className="text-center lg:text-left lg:border-l lg:border-[#e5eaf0] dark:lg:border-white/10 lg:pl-8">
        <div className="text-4xl sm:text-5xl font-bold text-[#1f5c8a] dark:text-[#8fccee]">Zero</div>
        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60">System-related pay errors after go-live</p>
      </div>

      <div className="text-center lg:text-left lg:border-l lg:border-[#e5eaf0] dark:lg:border-white/10 lg:pl-8">
        <div className="text-4xl sm:text-5xl font-bold text-[#1f5c8a] dark:text-[#8fccee]">100%</div>
        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60">Automated workflows at Hender Consulting</p>
      </div>
    </div>
  </div>
</section>

{/* WHY 2CLOUDNINE — three pillars */}

<section className="bg-[#f7f9fc] dark:bg-[#06101f]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24">
    <div className="max-w-3xl">
      <div className="text-xs font-semibold uppercase tracking-[0.2em] text-[#3e90cf]">Why 2cloudnine</div>

      <h2 className="mt-3 text-3xl sm:text-4xl font-bold text-[#0b2746] dark:text-white tracking-tight">
        One platform. Built for staffing. Powered by AI.
      </h2>

      <p className="mt-4 text-base sm:text-lg text-[#5a6b7d] dark:text-white/70 leading-relaxed">
        Stop stitching together payroll, billing, time, and compliance. 2cloudnine unifies the entire workforce lifecycle on Salesforce so your data, workflows, and AI agents finally speak the same language.
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-5">
      <div className="rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:shadow-lg hover:shadow-[#3e90cf]/10 transition">
        <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-[#e2f1f5] dark:bg-[#3e90cf]/15 text-[#1f5c8a] dark:text-[#8fccee]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2M3 7l9 6 9-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Salesforce-native</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          A single source of truth for clients, candidates, contracts, and pay — built on the platform you already trust.
        </p>

        <a href="/platform/salesforce-native" className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-[#3e90cf] hover:text-[#1f5c8a] dark:hover:text-[#8fccee] no-underline">
          Explore the platform

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>

      <div className="rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:shadow-lg hover:shadow-[#3e90cf]/10 transition">
        <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-[#e2f1f5] dark:bg-[#3e90cf]/15 text-[#1f5c8a] dark:text-[#8fccee]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Agentic AI, embedded</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Agentforce-powered agents flag exceptions, resolve variances, and surface insights before issues escalate.
        </p>

        <a href="/platform/agentic-ai" className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-[#3e90cf] hover:text-[#1f5c8a] dark:hover:text-[#8fccee] no-underline">
          See agentic AI in action

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>

      <div className="rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:shadow-lg hover:shadow-[#3e90cf]/10 transition">
        <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-[#e2f1f5] dark:bg-[#3e90cf]/15 text-[#1f5c8a] dark:text-[#8fccee]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4zm-3 9 2 2 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Compliance you can trust</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          FLSA, ACA, state labor laws, CBAs, and client contracts — automated end-to-end so every paycheck is correct.
        </p>

        <a href="/features/time-compliance-engine" className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-[#3e90cf] hover:text-[#1f5c8a] dark:hover:text-[#8fccee] no-underline">
          Compliance engine

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

{/* CORE CAPABILITIES — 6 features */}

<section className="bg-white dark:bg-[#0a1830]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24">
    <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
      <div className="max-w-3xl">
        <div className="text-xs font-semibold uppercase tracking-[0.2em] text-[#3e90cf]">Core capabilities</div>

        <h2 className="mt-3 text-3xl sm:text-4xl font-bold text-[#0b2746] dark:text-white tracking-tight">
          Everything you need to run staffing operations at scale
        </h2>
      </div>

      <a href="/platform-overview" className="inline-flex items-center gap-1.5 text-sm font-semibold text-[#3e90cf] hover:text-[#1f5c8a] dark:hover:text-[#8fccee] no-underline">
        Platform overview

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
          <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>

    <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
      <a href="/features/rate-margin-management" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 hover:shadow-lg hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-start justify-between">
          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M3 3v18h18M7 14l3-3 4 4 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#3e90cf] opacity-0 group-hover:opacity-100 transition">Read</span>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Rate & margin management</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Real-time bill rate, pay rate, and gross margin calculations — before you ever close a deal.
        </p>
      </a>

      <a href="/features/time-pto-expense" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 hover:shadow-lg hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-start justify-between">
          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M12 8v4l3 2m6-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#3e90cf] opacity-0 group-hover:opacity-100 transition">Read</span>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Time, PTO & expenses</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Configurable timesheets with built-in leave and expense capture for every worker type.
        </p>
      </a>

      <a href="/features/time-compliance-engine" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 hover:shadow-lg hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-start justify-between">
          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M12 2 4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4zm-3 9 2 2 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#3e90cf] opacity-0 group-hover:opacity-100 transition">Read</span>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Time & compliance engine</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          CBAs, custom agreements, and complex labor contract conditions — codified once, enforced everywhere.
        </p>
      </a>

      <a href="/features/automated-billing-invoicing" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 hover:shadow-lg hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-start justify-between">
          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M9 14h6m-6-4h6m-9 11h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2zm0 0V5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#3e90cf] opacity-0 group-hover:opacity-100 transition">Read</span>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Automated billing & invoicing</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Bill independently from payroll, with flawless accuracy that shortens collection cycles.
        </p>
      </a>

      <a href="/features/vms-connect" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 hover:shadow-lg hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-start justify-between">
          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3m-7 0h8m-8 0v3a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V7m-4 6v8m-4 0h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#3e90cf] opacity-0 group-hover:opacity-100 transition">Read</span>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">VMS Connect</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Pull requisitions and timesheets directly from vendor management systems — no manual entry.
        </p>
      </a>

      <a href="/features/travel-per-diem" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-7 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 hover:shadow-lg hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-start justify-between">
          <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M3.4 20.6 21 12 3.4 3.4 3 10l13 2-13 2 .4 6.6z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <span className="text-[10px] font-semibold uppercase tracking-wider text-[#3e90cf] opacity-0 group-hover:opacity-100 transition">Read</span>
        </div>

        <h3 className="mt-5 text-lg font-semibold text-[#0b2746] dark:text-white">Travel & per diem</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Stipends, housing allowances, and travel expenses — automated for traveling contractors.
        </p>
      </a>
    </div>
  </div>
</section>

{/* FRONT / MIDDLE / BACK OFFICE */}

<section className="bg-gradient-to-b from-[#f7f9fc] to-white dark:from-[#06101f] dark:to-[#0a1830]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24">
    <div className="max-w-3xl">
      <div className="text-xs font-semibold uppercase tracking-[0.2em] text-[#3e90cf]">One unified platform</div>

      <h2 className="mt-3 text-3xl sm:text-4xl font-bold text-[#0b2746] dark:text-white tracking-tight">
        Front. Middle. Back. Connected.
      </h2>

      <p className="mt-4 text-base sm:text-lg text-[#5a6b7d] dark:text-white/70 leading-relaxed">
        From candidate to client, from timesheet to invoice — one platform handles every layer of your staffing operation, with a single source of truth across the lifecycle.
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-5">
      <div className="rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-7">
        <div className="flex items-center gap-3">
          <span className="inline-flex h-7 px-3 items-center rounded-full bg-[#e2f1f5] dark:bg-[#3e90cf]/20 text-[10px] font-bold uppercase tracking-wider text-[#1f5c8a] dark:text-[#8fccee]">Front office</span>
        </div>

        <h3 className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white">Win the deal</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Client- and candidate-facing tools — rate cards, contracts, and CRM-grade visibility into the placement lifecycle.
        </p>

        <ul className="mt-5 space-y-2 text-sm text-[#5a6b7d] dark:text-white/70">
          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Embedded rate & margin calculator
          </li>

          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Auto-generated contracts & rate cards
          </li>

          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Real-time forecasting & commissions
          </li>
        </ul>
      </div>

      <div className="rounded-2xl border-2 border-[#3e90cf] bg-white dark:bg-white/10 p-7 shadow-xl shadow-[#3e90cf]/15 relative">
        <div className="absolute -top-3 left-7 inline-flex h-6 px-3 items-center rounded-full bg-[#3e90cf] text-[10px] font-bold uppercase tracking-wider text-white">
          Where 2cloudnine shines
        </div>

        <div className="flex items-center gap-3">
          <span className="inline-flex h-7 px-3 items-center rounded-full bg-[#3e90cf] text-[10px] font-bold uppercase tracking-wider text-white">Middle office</span>
        </div>

        <h3 className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white">Run the operation</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Time, compliance, and risk management — the engine room that connects sales to payroll without manual handoffs.
        </p>

        <ul className="mt-5 space-y-2 text-sm text-[#5a6b7d] dark:text-white/70">
          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Automated time & compliance interpretation
          </li>

          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            VMS Connect for vendor data sync
          </li>

          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Exception-based approval workflows
          </li>
        </ul>
      </div>

      <div className="rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-7">
        <div className="flex items-center gap-3">
          <span className="inline-flex h-7 px-3 items-center rounded-full bg-[#e2f1f5] dark:bg-[#3e90cf]/20 text-[10px] font-bold uppercase tracking-wider text-[#1f5c8a] dark:text-[#8fccee]">Back office</span>
        </div>

        <h3 className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white">Pay & bill, perfectly</h3>

        <p className="mt-2 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Payroll, billing, finance, and reporting — the systems of record, automated and reconciled in real time.
        </p>

        <ul className="mt-5 space-y-2 text-sm text-[#5a6b7d] dark:text-white/70">
          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Automated payroll & invoicing
          </li>

          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Finance & ERP integrations
          </li>

          <li className="flex items-start gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 text-[#3e90cf]" style={{flexShrink: 0}}>
              <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            Live reporting & reconciliation
          </li>
        </ul>
      </div>
    </div>

    <div className="mt-10 flex justify-center">
      <a href="/platform/front-middle-back-office" className="inline-flex items-center gap-2 rounded-lg border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 px-5 py-2.5 text-sm font-semibold text-[#1f5c8a] dark:text-[#8fccee] hover:border-[#3e90cf] hover:text-[#3e90cf] no-underline">
        Read the full architecture

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>
  </div>
</section>

{/* QUICK START */}

<section className="bg-white dark:bg-[#0a1830]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24">
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
      <div className="lg:col-span-4">
        <div className="text-xs font-semibold uppercase tracking-[0.2em] text-[#3e90cf]">Quick start</div>

        <h2 className="mt-3 text-3xl sm:text-4xl font-bold text-[#0b2746] dark:text-white tracking-tight">
          Get up and running
        </h2>

        <p className="mt-4 text-base text-[#5a6b7d] dark:text-white/70 leading-relaxed">
          Four steps from "we just signed" to first pay run. Most customers go live in days, not months.
        </p>

        <a href="/getting-started" className="mt-6 inline-flex items-center gap-2 rounded-lg bg-[#3e90cf] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#1f5c8a] no-underline">
          Start the guide

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>

      <div className="lg:col-span-8">
        <ol className="space-y-4">
          <li className="flex gap-5 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] transition">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#3e90cf] text-white text-sm font-bold">1</span>

            <div>
              <h3 className="text-base font-semibold text-[#0b2746] dark:text-white">Understand the platform</h3>

              <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
                Read the <a href="/introduction" className="font-semibold text-[#3e90cf] no-underline hover:underline">Introduction</a> and <a href="/platform-overview" className="font-semibold text-[#3e90cf] no-underline hover:underline">Platform Overview</a> to map 2cloudnine to your business.
              </p>
            </div>
          </li>

          <li className="flex gap-5 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] transition">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#3e90cf] text-white text-sm font-bold">2</span>

            <div>
              <h3 className="text-base font-semibold text-[#0b2746] dark:text-white">Set up your environment</h3>

              <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
                Connect your Salesforce org and configure foundational settings via the <a href="/getting-started" className="font-semibold text-[#3e90cf] no-underline hover:underline">getting started guide</a>.
              </p>
            </div>
          </li>

          <li className="flex gap-5 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] transition">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#3e90cf] text-white text-sm font-bold">3</span>

            <div>
              <h3 className="text-base font-semibold text-[#0b2746] dark:text-white">Configure core features</h3>

              <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
                Enable what your team needs first — usually <a href="/features/rate-margin-management" className="font-semibold text-[#3e90cf] no-underline hover:underline">Rate & Margin</a> and <a href="/features/time-compliance-engine" className="font-semibold text-[#3e90cf] no-underline hover:underline">Time & Compliance</a>.
              </p>
            </div>
          </li>

          <li className="flex gap-5 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] transition">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#3e90cf] text-white text-sm font-bold">4</span>

            <div>
              <h3 className="text-base font-semibold text-[#0b2746] dark:text-white">Connect your ecosystem</h3>

              <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
                Wire up your <a href="/integrations/overview" className="font-semibold text-[#3e90cf] no-underline hover:underline">VMS providers, finance systems, and ERPs</a> so data flows end-to-end.
              </p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </div>
</section>

{/* CUSTOMER STORIES */}

<section className="bg-[#f7f9fc] dark:bg-[#06101f]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24">
    <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
      <div className="max-w-3xl">
        <div className="text-xs font-semibold uppercase tracking-[0.2em] text-[#3e90cf]">Customer stories</div>

        <h2 className="mt-3 text-3xl sm:text-4xl font-bold text-[#0b2746] dark:text-white tracking-tight">
          Run the numbers. It just works.
        </h2>
      </div>

      <a href="/resources/customer-stories" className="inline-flex items-center gap-1.5 text-sm font-semibold text-[#3e90cf] hover:text-[#1f5c8a] dark:hover:text-[#8fccee] no-underline">
        View all stories

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
          <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>

    <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-5">
      <a href="/resources/customer-stories" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-8 hover:border-[#3e90cf] hover:shadow-xl hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-center justify-between">
          <span className="text-xs font-bold uppercase tracking-wider text-[#3e90cf]">Allegis Group</span>
          <span className="text-[10px] uppercase tracking-wider text-[#5a6b7d] dark:text-white/50">Staffing</span>
        </div>

        <p className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white leading-snug">
          "Transformed the way we do business — faster pay & bill, 60% less timesheet admin."
        </p>

        <div className="mt-6 flex items-center gap-4">
          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">60%</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Less admin</div>
          </div>

          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">1</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Source of truth</div>
          </div>
        </div>
      </a>

      <a href="/resources/customer-stories" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-8 hover:border-[#3e90cf] hover:shadow-xl hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-center justify-between">
          <span className="text-xs font-bold uppercase tracking-wider text-[#3e90cf]">Protech</span>
          <span className="text-[10px] uppercase tracking-wider text-[#5a6b7d] dark:text-white/50">Staffing</span>
        </div>

        <p className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white leading-snug">
          "One week to payroll-ready. Zero pay errors. Less than 5% financial variance."
        </p>

        <div className="mt-6 flex items-center gap-4">
          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">1 wk</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">To go-live</div>
          </div>

          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">0</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Pay errors</div>
          </div>
        </div>
      </a>

      <a href="/resources/customer-stories" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-8 hover:border-[#3e90cf] hover:shadow-xl hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-center justify-between">
          <span className="text-xs font-bold uppercase tracking-wider text-[#3e90cf]">McArthur</span>
          <span className="text-[10px] uppercase tracking-wider text-[#5a6b7d] dark:text-white/50">Staffing</span>
        </div>

        <p className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white leading-snug">
          "Zero guesswork with automated compliance. Full visibility into accurate, on-time payments."
        </p>

        <div className="mt-6 flex items-center gap-4">
          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">100%</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Visibility</div>
          </div>

          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">Live</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Insights</div>
          </div>
        </div>
      </a>

      <a href="/resources/customer-stories" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 p-8 hover:border-[#3e90cf] hover:shadow-xl hover:shadow-[#3e90cf]/10 transition no-underline">
        <div className="flex items-center justify-between">
          <span className="text-xs font-bold uppercase tracking-wider text-[#3e90cf]">Hender Consulting</span>
          <span className="text-[10px] uppercase tracking-wider text-[#5a6b7d] dark:text-white/50">Staffing</span>
        </div>

        <p className="mt-5 text-xl font-semibold text-[#0b2746] dark:text-white leading-snug">
          "One platform for payroll and billing. 100% automated workflows for faster placements."
        </p>

        <div className="mt-6 flex items-center gap-4">
          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">100%</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Automation</div>
          </div>

          <div className="rounded-lg bg-[#f7f9fc] dark:bg-white/5 px-3 py-2">
            <div className="text-lg font-bold text-[#1f5c8a] dark:text-[#8fccee]">1</div>
            <div className="text-[10px] text-[#5a6b7d] dark:text-white/50 uppercase tracking-wider">Platform</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

{/* RESOURCES */}

<section className="bg-white dark:bg-[#0a1830]">
  <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24">
    <div className="max-w-3xl">
      <div className="text-xs font-semibold uppercase tracking-[0.2em] text-[#3e90cf]">Resources</div>

      <h2 className="mt-3 text-3xl sm:text-4xl font-bold text-[#0b2746] dark:text-white tracking-tight">
        Keep building
      </h2>
    </div>

    <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
      <a href="/integrations/overview" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 transition no-underline">
        <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3m-7 0h8m-8 0v3a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V7m-4 6v8m-4 0h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-semibold text-[#0b2746] dark:text-white">Integrations</h3>

        <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Industry partners, finance systems, and ERPs.
        </p>
      </a>

      <a href="/platform/agentic-ai" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 transition no-underline">
        <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-semibold text-[#0b2746] dark:text-white">Agentic AI</h3>

        <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          How Agentforce agents work end-to-end.
        </p>
      </a>

      <a href="/resources/faq" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 transition no-underline">
        <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-semibold text-[#0b2746] dark:text-white">FAQ</h3>

        <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Quick answers to common questions.
        </p>
      </a>

      <a href="https://2cloudnine.com" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-[#f7f9fc] dark:bg-white/5 p-6 hover:border-[#3e90cf] hover:bg-white dark:hover:bg-white/10 transition no-underline">
        <div className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white dark:bg-[#3e90cf]/20 text-[#1f5c8a] dark:text-[#8fccee] border border-[#e5eaf0] dark:border-white/10">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9-9a13.5 13.5 0 0 1 0 18m0-18a13.5 13.5 0 0 0 0 18M3 12h18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-semibold text-[#0b2746] dark:text-white">2cloudnine.com</h3>

        <p className="mt-1 text-sm text-[#5a6b7d] dark:text-white/60 leading-relaxed">
          Visit the marketing site.
        </p>
      </a>
    </div>
  </div>
</section>

{/* CLOSING CTA */}

<section className="relative overflow-hidden bg-gradient-to-br from-[#0b2746] via-[#143a6c] to-[#1f5c8a]">
  <div className="absolute inset-0 opacity-[0.18] pointer-events-none" style={{backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.6) 1px, transparent 0)", backgroundSize: "28px 28px"}} />

  <div className="absolute -top-32 right-1/2 h-96 w-96 rounded-full bg-[#3e90cf]/30 blur-3xl pointer-events-none" />

  <div className="relative mx-auto max-w-7xl px-6 sm:px-8 lg:px-12 py-20 lg:py-24 text-center">
    <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white tracking-tight">
      Change the game with{" "}
      <span className="bg-gradient-to-r from-[#8fccee] to-white bg-clip-text text-transparent">2cloudnine.</span>
    </h2>

    <p className="mt-6 text-base sm:text-lg text-[#cfe6f7] max-w-2xl mx-auto leading-relaxed">
      Ready to unify your front, middle, and back office? Talk to our team or jump straight into the docs.
    </p>

    <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
      <a href="https://2cloudnine.com/us/request-demo/" className="inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3 text-sm font-semibold text-[#0b2746] hover:bg-[#cfe6f7] no-underline shadow-lg shadow-black/20">
        Request a demo

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <a href="/introduction" className="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-white/5 backdrop-blur px-6 py-3 text-sm font-semibold text-white hover:bg-white/10 no-underline">
        Read the docs
      </a>
    </div>
  </div>
</section>