Files
2026-burnaware-site/html/index.html

1452 lines
43 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BurnAware — Organizational Health Intelligence</title>
<meta name="description"
content="BurnAware is an organizational health intelligence platform that provides an early-warning system for chronic overload, team pressure, and conditions that erode long-term performance.">
<meta name="keywords"
content="organizational health, burnout prevention, team performance, overload detection, HR tools, leadership development, employee wellness, psychological safety">
<link rel="canonical" href="https://burnaware.io">
<!-- Open Graph Meta Tags for Social Media -->
<meta property="og:title" content="BurnAware — Organizational Health Intelligence">
<meta property="og:description"
content="BurnAware gives HR leaders and organizational teams an early-warning system for chronic overload, team pressure, and the conditions that quietly erode long-term performance.">
<meta property="og:url" content="https://burnaware.io">
<meta property="og:type" content="website">
<!-- If you have an image, add: <meta property="og:image" content="URL_TO_YOUR_IMAGE"> -->
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="BurnAware — Organizational Health Intelligence">
<meta name="twitter:description"
content="BurnAware gives HR leaders and organizational teams an early-warning system for chronic overload, team pressure, and the conditions that quietly erode long-term performance.">
<!-- If you have an image, add: <meta name="twitter:image" content="URL_TO_YOUR_IMAGE"> -->
<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=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap"
rel="stylesheet">
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--ink: #0f0f0e;
--ink-secondary: #5a5955;
--ink-tertiary: #9a9793;
--surface: #faf9f7;
--surface-alt: #f2f0ec;
--surface-card: #ffffff;
--border: rgba(15, 15, 14, 0.1);
--border-strong: rgba(15, 15, 14, 0.18);
--accent: #1a4a3a;
--accent-light: #e8f2ee;
--accent-mid: #2d6b52;
--warm: #c4531a;
--warm-light: #fdf0e8;
--serif: 'Instrument Serif', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif;
--max: 1080px;
--radius: 8px;
--radius-lg: 16px;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--sans);
background: var(--surface);
color: var(--ink);
line-height: 1.6;
}
/* NAV */
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(250, 249, 247, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 2rem;
}
.nav-inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.logo {
font-family: var(--serif);
font-size: 1.25rem;
color: var(--ink);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.logo-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-mid);
display: inline-block;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
align-items: center;
}
nav ul a {
font-size: 0.875rem;
color: var(--ink-secondary);
text-decoration: none;
transition: color 0.2s;
}
nav ul a:hover {
color: var(--ink);
}
.nav-cta {
font-size: 0.875rem;
font-weight: 500;
padding: 8px 20px;
background: var(--ink);
color: var(--surface);
border: none;
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
transition: background 0.2s, transform 0.1s;
}
.nav-cta:hover {
background: #2a2a28;
transform: translateY(-1px);
}
/* HERO */
.hero {
max-width: var(--max);
margin: 0 auto;
padding: 100px 2rem 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-mid);
margin-bottom: 1.5rem;
}
.hero-label::before {
content: '';
display: block;
width: 16px;
height: 1px;
background: var(--accent-mid);
}
h1 {
font-family: var(--serif);
font-size: clamp(2.4rem, 4vw, 3.2rem);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1.5rem;
font-weight: 400;
}
h1 em {
font-style: italic;
color: var(--accent-mid);
}
.hero-sub {
font-size: 1.05rem;
color: var(--ink-secondary);
line-height: 1.7;
margin-bottom: 2.5rem;
max-width: 420px;
font-weight: 300;
}
.hero-actions {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.btn-primary {
font-family: var(--sans);
font-size: 0.9rem;
font-weight: 500;
padding: 13px 28px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
transition: background 0.2s, transform 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-primary:hover {
background: var(--accent-mid);
transform: translateY(-1px);
}
.btn-secondary {
font-family: var(--sans);
font-size: 0.9rem;
color: var(--ink-secondary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
}
.btn-secondary:hover {
color: var(--ink);
}
.btn-arrow {
transition: transform 0.2s;
}
.btn-secondary:hover .btn-arrow {
transform: translateX(3px);
}
/* HERO VISUAL */
.dashboard-card {
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 2px 24px rgba(15, 15, 14, 0.07), 0 0 0 1px var(--border);
}
.dash-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.dash-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--ink);
}
.dash-subtitle {
font-size: 0.72rem;
color: var(--ink-tertiary);
margin-top: 2px;
}
.dash-badge {
font-size: 0.7rem;
font-weight: 500;
padding: 4px 10px;
border-radius: 20px;
background: var(--warm-light);
color: var(--warm);
border: 1px solid rgba(196, 83, 26, 0.15);
}
.dash-body {
padding: 16px 20px;
}
.dash-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.metric-item {
background: var(--surface-alt);
border-radius: var(--radius);
padding: 12px 14px;
}
.metric-label {
font-size: 0.68rem;
color: var(--ink-tertiary);
margin-bottom: 4px;
}
.metric-value {
font-size: 1.4rem;
font-weight: 500;
color: var(--ink);
line-height: 1;
}
.metric-value.warn {
color: var(--warm);
}
.metric-value.ok {
color: var(--accent-mid);
}
.metric-sub {
font-size: 0.65rem;
color: var(--ink-tertiary);
margin-top: 3px;
}
.signal-list {
margin-top: 12px;
}
.signal-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-top: 1px solid var(--border);
font-size: 0.78rem;
}
.signal-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 4px;
}
.signal-dot.red {
background: #e24b4b;
}
.signal-dot.amber {
background: #d4881a;
}
.signal-dot.green {
background: #2d6b52;
}
.signal-text {
color: var(--ink-secondary);
line-height: 1.45;
}
.signal-action {
font-size: 0.72rem;
color: var(--accent-mid);
margin-top: 3px;
}
/* PROOF BAR */
.proof-bar {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface-alt);
padding: 16px 2rem;
}
.proof-inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
align-items: center;
gap: 3rem;
flex-wrap: wrap;
}
.proof-label {
font-size: 0.75rem;
color: var(--ink-tertiary);
white-space: nowrap;
}
.proof-orgs {
display: flex;
gap: 2rem;
align-items: center;
flex-wrap: wrap;
}
.proof-org {
font-size: 0.8rem;
font-weight: 500;
color: var(--ink-secondary);
opacity: 0.6;
}
/* SECTIONS */
section {
max-width: var(--max);
margin: 0 auto;
padding: 80px 2rem;
}
.section-label {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-mid);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 8px;
}
.section-label::before {
content: '';
display: block;
width: 20px;
height: 1px;
background: var(--accent-mid);
}
h2 {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--ink);
margin-bottom: 1.25rem;
}
h2 em {
font-style: italic;
color: var(--accent-mid);
}
.section-body {
font-size: 1.0rem;
color: var(--ink-secondary);
line-height: 1.75;
max-width: 560px;
font-weight: 300;
}
/* PROBLEM */
.problem-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
margin-top: 3rem;
}
.problem-quote {
font-family: var(--serif);
font-size: 1.35rem;
line-height: 1.5;
color: var(--ink);
font-style: italic;
padding-left: 1.5rem;
border-left: 2px solid var(--accent-mid);
}
.problem-list {
list-style: none;
}
.problem-list li {
padding: 14px 0;
border-bottom: 1px solid var(--border);
font-size: 0.9rem;
color: var(--ink-secondary);
line-height: 1.6;
display: flex;
gap: 12px;
align-items: flex-start;
}
.problem-list li::before {
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--warm);
flex-shrink: 0;
margin-top: 7px;
}
/* HOW */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: 3rem;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.step {
background: var(--surface-card);
padding: 32px 28px;
}
.step-num {
font-family: var(--serif);
font-size: 3rem;
color: rgba(15, 15, 14, 0.06);
line-height: 1;
margin-bottom: 1rem;
font-style: italic;
}
.step-title {
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 0.5rem;
}
.step-desc {
font-size: 0.85rem;
color: var(--ink-secondary);
line-height: 1.65;
font-weight: 300;
}
/* FEATURES */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.feature-card {
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 24px;
transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
}
.feature-icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: var(--accent-light);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.feature-icon svg {
width: 18px;
height: 18px;
stroke: var(--accent-mid);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.feature-title {
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 0.5rem;
}
.feature-desc {
font-size: 0.85rem;
color: var(--ink-secondary);
line-height: 1.65;
font-weight: 300;
}
/* DIFF DARK */
.diff-wrap {
background: var(--ink);
padding: 1px 0;
}
.diff-wrap section {
padding: 80px 2rem;
}
.diff-wrap .section-label {
color: rgba(255, 255, 255, 0.4);
}
.diff-wrap .section-label::before {
background: rgba(255, 255, 255, 0.3);
}
.diff-wrap h2 {
color: #f5f3ef;
}
.diff-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
align-items: start;
}
.diff-item {
padding: 28px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.diff-item:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.diff-tag {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 10px;
}
.diff-title {
font-size: 0.95rem;
font-weight: 500;
color: #f5f3ef;
margin-bottom: 8px;
}
.diff-desc {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.65;
font-weight: 300;
}
.diff-vs {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: 28px;
}
.diff-vs-title {
font-size: 0.8rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.diff-compare-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
font-size: 0.82rem;
}
.diff-compare-row:last-child {
border-bottom: none;
}
.diff-compare-name {
color: rgba(255, 255, 255, 0.6);
}
.diff-compare-them {
color: rgba(255, 255, 255, 0.25);
font-style: italic;
font-size: 0.75rem;
}
.diff-compare-us {
color: #6fb899;
font-size: 0.75rem;
font-weight: 500;
}
/* AUDIENCE */
.audience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.audience-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 24px;
background: var(--surface-card);
}
.audience-role {
font-size: 0.75rem;
font-weight: 500;
color: var(--accent-mid);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.audience-title {
font-size: 1rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 10px;
line-height: 1.35;
}
.audience-desc {
font-size: 0.82rem;
color: var(--ink-secondary);
line-height: 1.65;
font-weight: 300;
}
/* TEAM */
.team-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
.team-person {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.team-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--surface-alt);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 1.4rem;
color: var(--ink-secondary);
font-style: italic;
}
.team-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.team-name {
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
margin-bottom: 3px;
}
.team-role {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--accent-mid);
margin-bottom: 10px;
}
.team-bio {
font-size: 0.85rem;
color: var(--ink-secondary);
line-height: 1.7;
font-weight: 300;
}
/* QUOTE */
.quote-section {
background: var(--accent-light);
padding: 1px 0;
}
.quote-section section {
padding: 64px 2rem;
text-align: center;
}
.quote-text {
font-family: var(--serif);
font-size: clamp(1.3rem, 2.5vw, 1.75rem);
font-style: italic;
color: var(--ink);
line-height: 1.5;
max-width: 700px;
margin: 0 auto 1.5rem;
font-weight: 400;
}
.quote-source {
font-size: 0.82rem;
color: var(--ink-secondary);
}
/* CTA */
.cta-wrap {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 1px 0;
}
.cta-section {
text-align: center;
padding: 100px 2rem;
}
.cta-section h2 {
max-width: 600px;
margin: 0 auto 1rem;
}
.cta-section p {
font-size: 1rem;
color: var(--ink-secondary);
max-width: 440px;
margin: 0 auto 2.5rem;
font-weight: 300;
}
.cta-form {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.cta-input {
font-family: var(--sans);
font-size: 0.9rem;
padding: 12px 18px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
background: var(--surface-card);
color: var(--ink);
width: 280px;
outline: none;
transition: border-color 0.2s;
}
.cta-input:focus {
border-color: var(--accent-mid);
}
.cta-note {
font-size: 0.75rem;
color: var(--ink-tertiary);
margin-top: 1rem;
}
/* FOOTER */
footer {
border-top: 1px solid var(--border);
padding: 32px 2rem;
}
.footer-inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-logo {
font-family: var(--serif);
font-size: 1rem;
color: var(--ink-secondary);
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
font-size: 0.8rem;
color: var(--ink-tertiary);
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--ink);
}
.footer-copy {
font-size: 0.75rem;
color: var(--ink-tertiary);
}
/* ANIMATION */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content > * {
animation: fadeUp 0.6s ease both;
}
.hero-content > *:nth-child(1) {
animation-delay: 0.05s;
}
.hero-content > *:nth-child(2) {
animation-delay: 0.15s;
}
.hero-content > *:nth-child(3) {
animation-delay: 0.25s;
}
.hero-content > *:nth-child(4) {
animation-delay: 0.35s;
}
.hero-visual {
animation: fadeUp 0.7s 0.4s ease both;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
gap: 2.5rem;
padding: 60px 1.25rem 48px;
}
.hero-visual {
order: -1;
}
.problem-grid, .diff-grid, .team-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.steps, .features-grid, .audience-grid {
grid-template-columns: 1fr;
}
nav ul {
display: none;
}
section {
padding: 56px 1.25rem;
}
}
</style>
<!-- script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "BurnAware",
"url": "https://burnaware.io",
"logo": "https://burnaware.io/logo.png",
"description": "BurnAware is an organizational health intelligence platform that provides an early-warning system for chronic overload, team pressure, and conditions that erode long-term performance.",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "sales",
"url": "https://burnaware.io/#cta"
},
"sameAs": []
}
</script -->
</head>
<body>
<header>
<nav class="nav-inner">
<a href="#" class="logo" aria-label="BurnAware Home"><span class="logo-dot"></span>BurnAware</a>
<ul>
<li><a href="#how">How it works</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#for">Who it's for</a></li>
</ul>
<a href="#cta" class="nav-cta" aria-label="Request a conversation with the BurnAware team">Request a
conversation</a>
</nav>
</header>
<main>
<div style="overflow:hidden;">
<section class="hero">
<div class="hero-content">
<div class="hero-label">Organiz&shy;ational health intelligence</div>
<h1>See what&apos;s building<br/>beneath the&nbsp;<em>surface</em></h1>
<p class="hero-sub">BurnAware gives HR leaders and organiz&shy;ational teams an&nbsp;early-warning system for&nbsp;chronic
overload, team pressure, and the&nbsp;conditions that&nbsp;quietly erode long-term performance.</p>
<div class="hero-actions">
<a aria-label="Request a conversation with the BurnAware team" class="btn-primary" href="#cta">Request a&nbsp;conversation</a>
<a aria-label="See how BurnAware works" class="btn-secondary" href="#how">See how it&nbsp;works <span
aria-hidden="true" class="btn-arrow"></span></a>
</div>
</div>
<div aria-label="A dashboard showing a team's sustainability index and overload risk." class="hero-visual">
<div class="dashboard-card">
<div class="dash-header">
<div>
<div class="dash-title">Product Development—Team report</div>
<div class="dash-subtitle">Diagnostic: May 2025 · 11 people</div>
</div>
<span class="dash-badge">⚠ Needs attention</span>
</div>
<div class="dash-body">
<div class="dash-metrics">
<div class="metric-item">
<div class="metric-label">Sustain&shy;ability index</div>
<div class="metric-value warn">41<span style="font-size:.9rem;font-weight:400"> /100</span></div>
<div class="metric-sub">↓ 9 points since March</div>
</div>
<div class="metric-item">
<div class="metric-label">Overload risk</div>
<div class="metric-value warn">4 <span style="font-size:.9rem;font-weight:400">of&nbsp;11</span></div>
<div class="metric-sub">Early-stage signals detected</div>
</div>
<div class="metric-item">
<div class="metric-label">Clarity score</div>
<div class="metric-value">52<span style="font-size:.9rem;font-weight:400"> /100</span></div>
<div class="metric-sub">Role clarity is&nbsp;the&nbsp;main driver</div>
</div>
<div class="metric-item">
<div class="metric-label">Psycho&shy;logical safety</div>
<div class="metric-value ok">67<span style="font-size:.9rem;font-weight:400"> /100</span></div>
<div class="metric-sub">Strong—above benchmark</div>
</div>
</div>
<div class="signal-list">
<div class="signal-item">
<span aria-label="Red signal" class="signal-dot red"></span>
<div>
<div class="signal-text">3 people show sustained high demand with&nbsp;insufficient recovery time
</div>
<a aria-label="View recommended actions for high demand signal" class="signal-action" href="#">→ View
recommended actions</a>
</div>
</div>
<div class="signal-item">
<span aria-label="Amber signal" class="signal-dot amber"></span>
<div>
<div class="signal-text">Role ambiguity is&nbsp;rising—linked to&nbsp;recent structure change</div>
<a aria-label="View suggested leader conversation for role ambiguity signal" class="signal-action"
href="#">→ Suggested leader
conversation</a>
</div>
</div>
<div class="signal-item">
<span aria-label="Green signal" class="signal-dot green"></span>
<div>
<div class="signal-text">Team cohesion remains stable despite the&nbsp;increased workload</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="proof-bar">
<div class="proof-inner">
<span class="proof-label">Currently in use at</span>
<div class="proof-orgs">
<span class="proof-org">Technology scale-ups</span>
<span class="proof-org">Professional services firms</span>
<span class="proof-org">Organizations in transformation</span>
<span class="proof-org">High-growth teams</span>
</div>
</div>
</div>
<section aria-labelledby="problem-title">
<div class="section-label">The&nbsp;problem</div>
<h2 id="problem-title">By&nbsp;the&nbsp;time it&apos;s visible,<br/>the&nbsp;cost is&nbsp;already <em>real</em></h2>
<div class="problem-grid">
<div>
<p class="section-body">Most organi&shy;zations don&apos;t have a&nbsp;burnout problem—they&nbsp;have a&nbsp;visibility
problem. The&nbsp;early signals are there: people carrying more than they&nbsp;should, clarity eroding during
change, pressure accumulating in&nbsp;pockets that&nbsp;don&apos;t show up in&nbsp;engagement surveys or&nbsp;performance
reviews.</p>
<br/>
<p class="section-body">Standard tools measure sentiment. BurnAware measures the&nbsp;structural and contextual
conditions that&nbsp;create risk—before it&nbsp;surfaces in&nbsp;turnover, underper&shy;formance, or&nbsp;a&nbsp;conversation
that&nbsp;comes too late.</p>
</div>
<ul class="problem-list">
<li>Annual engagement surveys miss what&apos;s happening between cycles. By&nbsp;the&nbsp;time results are in,
the&nbsp;situation has already shifted.
</li>
<li>Pulse surveys tell you how people feel today. They&nbsp;rarely tell you why, or&nbsp;what&apos;s likely to&nbsp;happen
next.
</li>
<li>High performers are often the&nbsp;least visible risk. They&nbsp;absorb pressure quietly—until they&nbsp;don&apos;t.</li>
<li>Leaders managing transfor&shy;mation face a&nbsp;specific challenge: change itself creates risk conditions
that&nbsp;can look like engagement, not&nbsp;dysfunction.
</li>
</ul>
</div>
</section>
<div style="background:var(--surface-alt); padding:1px 0;" id="how">
<section aria-labelledby="how-it-works-title">
<div class="section-label">How it&nbsp;works</div>
<h2 id="how-it-works-title">Simple to&nbsp;run.<br/><em>Meaningful</em> by&nbsp;design.</h2>
<div class="steps">
<div class="step">
<div aria-hidden="true" class="step-num">01</div>
<div class="step-title">Assess</div>
<div class="step-desc">A&nbsp;structured diagnostic—1215 minutes per person. Built on&nbsp;occupational
psychology research, calibrated across cultural backgrounds and team contexts. Not&nbsp;a&nbsp;survey. Not&nbsp;a&nbsp;self-report
question&shy;naire.
</div>
</div>
<div class="step">
<div aria-hidden="true" class="step-num">02</div>
<div class="step-title">Detect</div>
<div class="step-desc">BurnAware maps results across six dimensions: internal state, work context, recovery
capacity, clarity, cultural dynamics, and coping patterns. It&nbsp;surfaces the&nbsp;combinations that&nbsp;create
real risk—not&nbsp;just averages.
</div>
</div>
<div class="step">
<div aria-hidden="true" class="step-num">03</div>
<div class="step-title">Act</div>
<div class="step-desc">Each leader gets a&nbsp;prioritized action plan for&nbsp;their specific team—not&nbsp;a&nbsp;PDF
of&nbsp;generic recommen&shy;dations. Written for&nbsp;this&nbsp;situation, updated as&nbsp;new diagnostics
come in, and designed to&nbsp;be usable, not&nbsp;just readable.
</div>
</div>
</div>
</section>
</div>
<section aria-labelledby="features-title">
<div class="section-label">What&nbsp;you get</div>
<h2 id="features-title">Built for&nbsp;leaders who need<br/>to&nbsp;act, not&nbsp;just <em>understand</em></h2>
<div class="features-grid">
<div class="feature-card">
<div aria-hidden="true" class="feature-icon">
<svg viewbox="0 0 24 24">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
<div class="feature-title">Early overload detection</div>
<div class="feature-desc">Identify sustained high-demand patterns before they&nbsp;compound. See which&nbsp;individuals
and sub-teams are carrying structural overload—weeks before it&nbsp;becomes a&nbsp;retention or&nbsp;performance
issue.
</div>
</div>
<div class="feature-card">
<div aria-hidden="true" class="feature-icon">
<svg viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
<div class="feature-title">Organiz&shy;ational pressure mapping</div>
<div class="feature-desc">During change and transfor&shy;mation, pressure concentrates in&nbsp;predictable
places—but&nbsp;most tools don&apos;t see it. BurnAware maps where pressure is&nbsp;building, why, and what&nbsp;the&nbsp;likely
trajectory looks
like.
</div>
</div>
<div class="feature-card">
<div aria-hidden="true" class="feature-icon">
<svg viewbox="0 0 24 24">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<div class="feature-title">Clarity and sustain&shy;ability scoring</div>
<div class="feature-desc">Lack of&nbsp;role clarity and unsus&shy;tainable workload are two of&nbsp;the&nbsp;strongest
predictors of&nbsp;disenga&shy;gement. BurnAware tracks both—and connects them to&nbsp;specific conditions in&nbsp;the&nbsp;team&apos;s
context.
</div>
</div>
<div class="feature-card">
<div aria-hidden="true" class="feature-icon">
<svg viewbox="0 0 24 24">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="feature-title">Individuallevel insight</div>
<div class="feature-desc">Team averages hide the&nbsp;people who matter most. BurnAware surfaces individual
patterns—calibrated to&nbsp;cultural context and coping style—so&nbsp;support reaches the&nbsp;right person,
not&nbsp;the&nbsp;median.
</div>
</div>
<div class="feature-card">
<div aria-hidden="true" class="feature-icon">
<svg viewbox="0 0 24 24">
<line x1="8" x2="21" y1="6" y2="6"></line>
<line x1="8" x2="21" y1="12" y2="12"></line>
<line x1="8" x2="21" y1="18" y2="18"></line>
<line x1="3" x2="3.01" y1="6" y2="6"></line>
<line x1="3" x2="3.01" y1="12" y2="12"></line>
<line x1="3" x2="3.01" y1="18" y2="18"></line>
</svg>
</div>
<div class="feature-title">Prioritized action plans</div>
<div class="feature-desc">Every diagnostic generates a&nbsp;ranked action map for&nbsp;that&nbsp;specific
team—written for&nbsp;this&nbsp;situation, not&nbsp;adapted from&nbsp;a&nbsp;template. Concrete,
leader-facing, and updated as&nbsp;new signals come in.
</div>
</div>
<div class="feature-card">
<div aria-hidden="true" class="feature-icon">
<svg viewbox="0 0 24 24">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
</div>
<div class="feature-title">Longitudinal tracking</div>
<div class="feature-desc">A&nbsp;single diagnostic is&nbsp;a&nbsp;snapshot. BurnAware tracks team health over
time—showing
whether inter&shy;ventions are working, whether risk is&nbsp;growing, and where to&nbsp;focus attention next
quarter.
</div>
</div>
</div>
</section>
<div class="diff-wrap">
<section aria-labelledby="why-burnaware-title">
<div class="section-label">Why BurnAware</div>
<h2 id="why-burnaware-title" style="color:#f5f3ef">Not&nbsp;another <em style="color:#6fb899">engagement tool</em>
</h2>
<div class="diff-grid">
<div>
<div class="diff-item">
<div class="diff-tag">Structural, not&nbsp;sentiment</div>
<div class="diff-title">We measure conditions, not&nbsp;feelings</div>
<div class="diff-desc">Sentiment tools ask how people feel. BurnAware maps the&nbsp;structural and
contextual
factors that&nbsp;create risk—workload distribution, clarity, recovery capacity, cultural context. These
predict outcomes that&nbsp;sentiment scores don&apos;t catch.
</div>
</div>
<div class="diff-item">
<div class="diff-tag">Predictive, not&nbsp;retros&shy;pective</div>
<div class="diff-title">See what&apos;s coming, not&nbsp;what&nbsp;already happened</div>
<div class="diff-desc">Most HR tools are designed for&nbsp;reporting. BurnAware is&nbsp;designed for&nbsp;foresight—identifying
risk trajectories weeks and months before they&nbsp;become visible in&nbsp;turnover, sick leave, or&nbsp;underper&shy;formance
data.
</div>
</div>
<div class="diff-item">
<div class="diff-tag">Culturally calibrated</div>
<div class="diff-title">Built for&nbsp;diverse, inter&shy;national teams</div>
<div class="diff-desc">Stress and overload don&apos;t look the&nbsp;same across cultural contexts. BurnAware&apos;s
model
accounts for&nbsp;how different backgrounds affect the&nbsp;way people perceive, express, and absorb
pressure—so&nbsp;assessments are accurate across your whole organization.
</div>
</div>
</div>
<div>
<div class="diff-vs">
<div class="diff-vs-title">How BurnAware compares</div>
<div class="diff-compare-row"><span class="diff-compare-name">Annual engagement survey</span> <span
class="diff-compare-them">Retros&shy;pective, annual</span> <span class="diff-compare-us">Continuous</span>
</div>
<div class="diff-compare-row"><span class="diff-compare-name">Pulse survey tools</span> <span
class="diff-compare-them">Sentiment only</span> <span
class="diff-compare-us">Structural + contextual</span></div>
<div class="diff-compare-row"><span class="diff-compare-name">EAP / wellbeing platforms</span> <span
class="diff-compare-them">Individual, reactive</span> <span
class="diff-compare-us">Teamlevel, preventive</span></div>
<div class="diff-compare-row"><span class="diff-compare-name">Manager check-ins</span> <span
class="diff-compare-them">Visibility gap</span> <span class="diff-compare-us">Data-backed clarity</span>
</div>
<div class="diff-compare-row"><span class="diff-compare-name">Burnout assessments</span> <span
class="diff-compare-them">Point-in-time score</span> <span class="diff-compare-us">Longitudinal + predictive</span>
</div>
<div class="diff-compare-row"><span class="diff-compare-name">External consultants</span><span
class="diff-compare-them">High cost, low frequency</span><span
class="diff-compare-us">Scalable, ongoing</span></div>
</div>
</div>
</div>
</section>
</div>
<section id="for" aria-labelledby="who-its-for-title">
<div class="section-label">Who it's for</div>
<h2 id="who-its-for-title">Designed for&nbsp;the&nbsp;people<br/>responsible for&nbsp;<em>healthy
organi&shy;zations</em></h2>
<div class="audience-grid">
<div class="audience-card">
<div class="audience-role">HR leadership</div>
<div class="audience-title">Move from&nbsp;reactive support to&nbsp;proactive organiz&shy;ational health</div>
<div class="audience-desc">BurnAware gives HR leaders a&nbsp;continuous view of&nbsp;risk across the&nbsp;organization—so&nbsp;inter&shy;ventions
can happen earlier, and at&nbsp;the&nbsp;right level, rather than after the&nbsp;damage is&nbsp;done.
</div>
</div>
<div class="audience-card">
<div class="audience-role">Organiz&shy;ational development</div>
<div class="audience-title">Data to&nbsp;back the&nbsp;work you&apos;re already doing</div>
<div class="audience-desc">For&nbsp;OD profes&shy;sionals working on&nbsp;culture, change, or&nbsp;performance—BurnAware
provides
the&nbsp;longitudinal data to&nbsp;show what&apos;s shifting, what&apos;s working, and where to&nbsp;focus
next.
</div>
</div>
<div class="audience-card">
<div class="audience-role">Leaders managing change</div>
<div class="audience-title">Understand what&nbsp;transfor&shy;mation is&nbsp;actually doing to&nbsp;your teams
</div>
<div class="audience-desc">Restruc&shy;turing, scaling, and strategic pivots all create specific risk patterns.
BurnAware helps leaders see those patterns early—and act before they&nbsp;compound into&nbsp;attrition or&nbsp;failure
to&nbsp;execute.
</div>
</div>
</div>
</section>
<div style="background:var(--surface-alt); padding:1px 0;" id="team">
<section aria-labelledby="team-title">
<div class="section-label">The team</div>
<h2 id="team-title">The people behind <em>BurnAware</em></h2>
<div class="team-grid">
<div class="team-person">
<img src="/img/katerina-bashtavenko.webp" alt="Katerina Bashtavenko" class="team-avatar">
<div>
<div class="team-name">Katerina Bashtavenko</div>
<div class="team-role">Co-founder &amp; CEO</div>
<p class="team-bio">Over 15 years in&nbsp;organiz&shy;ational psychology and leadership development across
inter&shy;national companies. Katerina has worked with&nbsp;teams in&nbsp;Europe, Asia, and the&nbsp;Americas—and built
BurnAware around the&nbsp;insight that&nbsp;cultural context fundam&shy;entally shapes how people experience and express
pressure at&nbsp;work.</p>
</div>
</div>
<div class="team-person">
<img src="/img/irina-koksharova.webp" alt="Irina Koksharova" class="team-avatar">
<div>
<div class="team-name">Irina Koksharova</div>
<div class="team-role">Co-founder &amp; Research Director</div>
<p class="team-bio">Researcher and practitioner in&nbsp;clinical and organiz&shy;ational psychology,
with&nbsp;a&nbsp;focus on&nbsp;resilience science, burnout prevention, and how cultural identity
shapes responses to&nbsp;stress. Irina leads the&nbsp;research methodology and model development
behind BurnAware.</p>
</div>
</div>
</div>
</section>
</div>
<div class="quote-section">
<section>
<blockquote class="quote-text">“We thought we had a&nbsp;good picture of&nbsp;our teams. BurnAware showed us the&nbsp;gaps—and
helped us act on&nbsp;them before they&nbsp;became something harder to&nbsp;fix.”
</blockquote>
<cite class="quote-source">Head of&nbsp;People Operations, technology company · Early access participant</cite>
</section>
</div>
<div class="cta-wrap">
<section class="cta-section" id="cta" aria-labelledby="cta-title">
<div class="section-label" style="justify-content:center">Early access</div>
<h2 id="cta-title">Let&apos;s talk about what<br/>you&apos;re trying to&nbsp;<em>solve</em></h2>
<p>We&apos;re working with&nbsp;a&nbsp;small number of&nbsp;HR leaders and OD teams. If&nbsp;you&apos;re
navigating transfor&shy;mation, growth, or&nbsp;high-pressure environments—we&apos;d like to&nbsp;learn
about your situation.</p>
<div class="cta-form">
<input type="email" class="cta-input" placeholder="Your work email" aria-label="Your work email">
<a href="#" class="btn-primary" aria-label="Request a conversation with the BurnAware team">Request
a&nbsp;conversation →</a>
</div>
<p class="cta-note">No sales process. A&nbsp;30-minute conversation about what&nbsp;you&apos;re working on—no commitment
required.</p>
</section>
</div>
</main>
<footer>
<div class="footer-inner">
<span class="footer-logo">BurnAware</span>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Research basis</a>
<a href="#">Contact</a>
</div>
<span class="footer-copy">© 2025 BurnAware</span>
</div>
</footer>
</body>
</html>