<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ability DN – Support That Empowers. Community That Connects.</title>
<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=Poppins:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&family=Caveat:wght@400;700&display=swap" rel="stylesheet" />
<style>
/* ─────────────────────────────────────────────
BRAND CSS VARIABLES
───────────────────────────────────────────── */
:root {
--adn-orange: #f27329;
--adn-purple: #614ea6;
--adn-blue: #94d7f2;
--adn-green: #c2d9bf;
--adn-purple-30: #d8d2eb;
--adn-purple-50: #b3a8d3;
--adn-purple-80: #756bb7;
--adn-purple-deep: #4d3d96;
--adn-orange-30: #fbd5bf;
--adn-orange-50: #f8b393;
--adn-blue-30: #ddf1fb;
--adn-blue-50: #c4e7f8;
--adn-green-30: #e6efe2;
--adn-green-50: #d6e6cf;
--adn-ink: #1f1b2e;
--adn-text: #3a3550;
--adn-muted: #6d6883;
--adn-bg: #ffffff;
--adn-bg-soft: #f9f8fc;
}
/* ─────────────────────────────────────────────
RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
font-size: 17px;
line-height: 1.65;
color: var(--adn-text);
background: var(--adn-bg);
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
/* ─────────────────────────────────────────────
TYPOGRAPHY
───────────────────────────────────────────── */
h1 {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: clamp(2.1rem, 4.6vw, 3.4rem);
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--adn-purple);
}
h2 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: clamp(1.7rem, 3vw, 2.4rem);
line-height: 1.2;
color: var(--adn-purple);
}
h3 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.18rem;
color: var(--adn-purple);
}
h4 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1rem;
color: var(--adn-purple);
}
.eyebrow {
font-family: 'Caveat', cursive;
font-weight: 700;
color: var(--adn-orange);
font-size: 1.3rem;
display: block;
line-height: 1.3;
}
.muted { color: var(--adn-muted); }
/* ─────────────────────────────────────────────
LAYOUT
───────────────────────────────────────────── */
.container {
max-width: 1180px;
padding: 0 24px;
margin: 0 auto;
}
section { padding: clamp(64px, 8vw, 110px) 0; }
/* ─────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 14px 26px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
border: none;
transition: background .2s, transform .2s, box-shadow .2s;
white-space: nowrap;
}
.btn-primary { background: var(--adn-purple); color: #fff; }
.btn-primary:hover {
background: var(--adn-purple-deep);
transform: translateY(-2px);
box-shadow: 0 8px 20px -6px rgba(97,78,166,.4);
}
.btn-orange { background: var(--adn-orange); color: #fff; }
.btn-orange:hover {
background: #d95f1c;
transform: translateY(-2px);
box-shadow: 0 8px 20px -6px rgba(242,115,41,.4);
}
.btn-ghost { background: transparent; color: var(--adn-purple); border: 2px solid var(--adn-purple); }
.btn-ghost:hover { background: var(--adn-purple); color: #fff; transform: translateY(-2px); }
.btn-ghost-orange { background: transparent; color: var(--adn-orange); border: 2px solid var(--adn-orange); }
.btn-ghost-orange:hover { background: var(--adn-orange); color: #fff; transform: translateY(-2px); }
.btn-ghost-white { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-ghost-white:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
/* ─────────────────────────────────────────────
CARDS
───────────────────────────────────────────── */
.card {
background: #fff;
border-radius: 22px;
padding: 32px 28px;
box-shadow: 0 6px 28px -12px rgba(97,78,166,.14);
border: 1px solid rgba(97,78,166,.05);
transition: transform .25s, box-shadow .25s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 42px -12px rgba(97,78,166,.22);
}
/* ─────────────────────────────────────────────
SECTION TAG PILL
───────────────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--adn-purple-30);
color: var(--adn-purple);
font-family: 'Poppins', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 14px;
}
.tag-orange { background: var(--adn-orange-30); color: var(--adn-orange); }
.tag-blue { background: var(--adn-blue-30); color: #2a8fb5; }
.tag-green { background: var(--adn-green-30); color: #3d7a38; }
/* ─────────────────────────────────────────────
ICON BOX
───────────────────────────────────────────── */
.icon-box {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.icon-box svg { width: 26px; height: 26px; }
.ib-purple { background: var(--adn-purple-30); color: var(--adn-purple); }
.ib-orange { background: var(--adn-orange-30); color: var(--adn-orange); }
.ib-blue { background: var(--adn-blue-30); color: #2a8fb5; }
.ib-green { background: var(--adn-green-30); color: #3d7a38; }
/* ─────────────────────────────────────────────
STICKER BADGES (Brand element #11)
───────────────────────────────────────────── */
.sticker {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Poppins', sans-serif;
font-size: 0.78rem;
font-weight: 600;
padding: 5px 14px 5px 10px;
border-radius: 999px;
border: 1.5px solid currentColor;
}
.sticker-purple { color: var(--adn-purple); background: var(--adn-purple-30); }
.sticker-orange { color: var(--adn-orange); background: var(--adn-orange-30); }
.sticker-green { color: #3d7a38; background: var(--adn-green-30); }
.sticker-blue { color: #2a8fb5; background: var(--adn-blue-30); }
/* ─────────────────────────────────────────────
FRAMED QUOTE / CALLOUT BOX (Brand element #10)
───────────────────────────────────────────── */
.callout-box {
border: 2px solid var(--adn-purple-50);
border-radius: 18px;
padding: 24px 28px;
position: relative;
background: #fff;
}
.callout-box .q-open {
font-family: Georgia, serif;
font-size: 56px;
line-height: 0.6;
color: var(--adn-orange);
display: block;
margin-bottom: 10px;
}
.callout-box .q-close {
font-family: Georgia, serif;
font-size: 56px;
line-height: 0.6;
color: var(--adn-orange);
display: block;
text-align: right;
margin-top: 10px;
}
.callout-box p {
font-family: 'Caveat', cursive;
font-size: 1.35rem;
font-weight: 700;
color: var(--adn-purple);
line-height: 1.5;
}
.callout-box::after {
content: '';
display: block;
height: 3px;
border-radius: 99px;
background: var(--adn-orange);
margin-top: 16px;
}
/* ─────────────────────────────────────────────
FEATURE HIGHLIGHT CHIPS (Brand element #13)
───────────────────────────────────────────── */
.feat-chip {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
