/* Single-page home: the modules detail panel, Reports & Analytics, Community Benefits and the CTA.
   Builds on the shared section styles (Services.css, Security.css, AiSection.css, Donations.css). */

/* ---------- Modules: section spacing ---------- */
.section.modules { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.modules .sec-head { margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem); }
/* the intro runs the full width so it reads as one line on desktop; the heading keeps its usual width */
.modules .sec-head .copy { max-width: none; }
.modules .sec-title { max-width: 920px; }

/* ---------- Modules: hint bar and pause control ---------- */
.svc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: -0.4rem 0 1.1rem; }
.svc-bar .svc-hint { margin: 0; }.svc-toggle {
  display: inline-flex; align-items: center; height: 38px; padding: 0 0.95rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.svc-toggle span { display: inline-flex; align-items: center; gap: 0.45rem; }
.svc-toggle .i { width: 1.05rem; height: 1.05rem; }
.svc-toggle .tg-play, .svc-toggle[aria-pressed='true'] .tg-pause { display: none; }
.svc-toggle[aria-pressed='true'] .tg-play { display: inline-flex; }
.svc-toggle:hover { border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .svc-toggle { display: none; } }

/* photos in the module cards sit a little lower so faces and screens stay in frame */
.svc-tab .st-media img { object-position: 50% 35%; }

/* ---------- Modules: detail panel ---------- */
.md-panel .sp-head { margin-bottom: clamp(1rem, 1.8vw, 1.4rem); }
.md-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); align-items: stretch; }
.md-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0.85rem; }
.md-feats .sp-feat { padding: 0.85rem 0.95rem; }
.md-feats .sp-feat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.md-feats .sp-feat h4 { font-size: 1rem; }
.md-feats .sp-feat p { font-size: 0.92rem; }

/* combined module (Communication Hub): a tab per part above its features and sample screen */
.hub-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: fit-content; max-width: 100%;
  margin: calc(-1 * clamp(0.4rem, 0.8vw, 0.6rem)) auto clamp(0.9rem, 1.6vw, 1.2rem); padding: 0.3rem;
  border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line-2);
}
.hub-tab {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 38px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hub-tab .i { width: 1.1rem; height: 1.1rem; }
.hub-tab:hover { color: var(--tc); }
.hub-tab.on { color: var(--tc); background: #fff; border-color: color-mix(in srgb, var(--tc) 25%, var(--line)); box-shadow: var(--shadow-sm); }
.hub-sum { max-width: 640px; margin: 0 auto clamp(0.9rem, 1.6vw, 1.2rem); text-align: center; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .hub-tabs { animation: sp-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both; }
  .hub-sum { animation: sp-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}

/* sample screen laid over the module photo */
.md-preview {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(1rem, 2vw, 1.5rem);
  background: radial-gradient(120% 100% at 85% 0%, #fff 0%, var(--tb) 70%);
  border: 1px solid var(--line-2);
}
.pv-stage { position: absolute; inset: 0; z-index: -1; }
.pv-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.has-shot .pv-stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(31, 20, 62, 0) 30%, rgba(31, 20, 62, 0.55) 100%);
}
/* without a photo, the module's icon becomes a large watermark */
.pv-art { position: absolute; right: -4%; top: -8%; width: 62%; aspect-ratio: 1; color: var(--tc); opacity: 0.12; }
.pv-art .i { width: 100%; height: 100%; stroke-width: 1; }
.md-preview:not(.has-shot)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--tc) 20%, transparent) 1px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%);
}

.pv-window {
  width: min(100%, 400px); border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(31, 20, 62, 0.55), 0 0 0 1px rgba(46, 31, 89, 0.06);
}
.pv-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line-2); background: var(--bg-soft); }
.pv-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcdce8; }
.pv-bar i:first-child { background: #f5a3a3; }
.pv-bar i:nth-child(2) { background: #f7cf86; }
.pv-bar i:nth-child(3) { background: #9bd3b2; }
.pv-bar b { margin-left: 0.5rem; font-family: var(--f-head); font-size: 0.82rem; font-weight: 600; color: var(--navy); }
.pv-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 1rem 0.5rem; }
.pv-stat span { font-size: 0.8rem; color: var(--muted); }
.pv-stat strong { font-family: var(--f-head); font-size: 1.05rem; font-weight: 700; color: var(--tc); text-align: right; }
.pv-rows { padding: 0 0.6rem 0.6rem; }
.pv-rows li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.45rem; }
.pv-rows li + li { border-top: 1px solid var(--line-2); }
.pv-txt { display: flex; flex-direction: column; min-width: 0; }
.pv-txt b { font-size: 0.86rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-txt small { font-size: 0.76rem; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-badge { flex: none; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.pv-badge.ok { background: #e5f5ec; color: #23704a; }
.pv-badge.warn { background: #fef1e0; color: #9a5a00; }
.pv-badge.info { background: var(--navy-50); color: var(--navy); }
.pv-badge.muted { background: #f1f0f5; color: #645a7e; }
.md-preview figcaption {
  position: absolute; right: 0.9rem; top: 0.8rem; font-size: 0.72rem; font-weight: 600; color: var(--navy);
  padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.88);
}

@media (prefers-reduced-motion: no-preference) {
  .md-preview { animation: sp-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
  .pv-window { animation: pv-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s both; }
  .pv-rows li { animation: sp-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.4s + var(--k) * 0.07s) both; }
}
@keyframes pv-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 1100px) {
  .md-body { grid-template-columns: 1fr; }
  .md-preview { padding-top: 8rem; }
}
@media (max-width: 760px) {
  /* the four part tabs share the width evenly in two rows */
  .hub-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
  .hub-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hub-tab { justify-content: center; height: auto; min-height: 38px; padding: 0.35rem 0.6rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.2; text-align: center; }
  .md-feats { grid-template-columns: 1fr; }
  .md-preview { padding-top: 7rem; }
}

/* ---------- Reports & Analytics ---------- */
.analytics { --teal: #0f8fb0; --teal-50: #e2f6fa; }
.an-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: start; }
.an-left .sec-head { margin-bottom: 1.6rem; }
.an-checks { grid-template-columns: 1fr; }
.an-checks li { padding-block: 0.85rem; }

.an-dash {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-md); overflow: hidden;
}
.an-head { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.4rem; background: #fff; border-bottom: 1px solid var(--line-2); }
.an-head-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary); }
.an-head-ic .i { width: 1.15rem; height: 1.15rem; }
.an-head h3 { color: var(--navy); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
.an-head div span { font-size: 0.82rem; color: var(--muted); }
.an-head > div { min-width: 0; }
.an-sample {
  margin-left: auto; flex: none; white-space: nowrap; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px;
  color: var(--primary-text); background: #fff8e6; border: 1px solid rgba(237, 181, 29, 0.5);
}

/* admin-style body: a sidebar of modules beside the selected module's KPIs and chart */
.an-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.an-side {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 0.7rem;
  background: var(--bg-soft); border-right: 1px solid var(--line-2);
}
.an-side button {
  position: relative; display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 40px; padding: 0.5rem 0.7rem;
  border: 0; border-radius: 10px; cursor: pointer; background: transparent; text-align: left;
  font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1.25; color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.an-side .i { width: 1.05rem; height: 1.05rem; flex: none; }
.an-side button:hover { color: var(--navy); background: rgba(46, 31, 89, 0.05); }
.an-side button[aria-selected='true'] { color: var(--navy); background: #fff; box-shadow: var(--shadow-sm); }
.an-side button[aria-selected='true'] .i { color: var(--primary-text); }
.an-side button[aria-selected='true']::before {
  content: ''; position: absolute; left: -0.7rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
.an-side button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.an-main { min-width: 0; }
.an-main .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); }
.an-main .an-kpis li:nth-child(3) { border-left: 0; }
.an-main .an-kpis li:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
.an-main .an-title { margin-top: 0; }

.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); border-bottom: 1px solid var(--line-2); }
.an-kpis li { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 1rem 1.1rem 0.9rem; min-width: 0; }
.an-kpis li + li { border-left: 1px solid var(--line-2); }
.kp-label { font-size: 0.8rem; color: var(--muted); }
.an-kpis strong { font-family: var(--f-head); font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 700; color: var(--navy); line-height: 1.25; margin-top: 0.15rem; }
.kp-delta { font-size: 0.76rem; color: #23704a; font-weight: 600; line-height: 1.35; }
.kp-spark { width: 100%; height: 28px; margin-top: 0.55rem; align-self: end; overflow: visible; }
.kp-spark path { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

.an-chart { padding: 1.1rem 1.4rem 1.2rem; }
.an-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line-2); }
.an-tabs button {
  min-height: 36px; padding: 0 0.95rem; border-radius: 9px; border: 0; cursor: pointer; background: transparent;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.an-tabs button:hover { color: var(--navy); }
.an-tabs button[aria-selected='true'] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.an-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin: 1rem 0 0.4rem; font-family: var(--f-head); font-weight: 600; color: var(--navy); }
.an-title span { font-family: var(--f-body); font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.an-title b { color: var(--primary-text); }
.an-plot { position: relative; }
.an-svg { display: block; width: 100%; height: auto; overflow: visible; }
.an-grid-lines line { stroke: var(--line-2); stroke-width: 1; }
.an-grid-lines text, .an-month { font-size: 11px; fill: var(--muted-2); font-family: var(--f-body); }
.an-line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.an-dot { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.an-dot.last { fill: var(--primary); stroke: #fff; stroke-width: 2.5; }
.an-bar { fill: #d0c8e7; transition: fill 0.2s ease; }
.an-bar.last { fill: var(--primary); }
.an-hit { fill: transparent; cursor: crosshair; outline: none; }
.an-hit:hover, .an-hit:focus-visible { fill: rgba(46, 31, 89, 0.05); }
.an-hit:focus-visible { stroke: var(--primary); stroke-width: 1.5; }
.an-tip {
  position: absolute; z-index: 2; pointer-events: none; translate: -50% calc(-100% - 12px); white-space: nowrap;
  padding: 0.35rem 0.65rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--navy);
  box-shadow: var(--shadow-md);
}
.an-tip::after { content: ''; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--navy); }

@media (prefers-reduced-motion: no-preference) {
  .an-dash.rv .an-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .an-dash.rv.in .an-line { animation: an-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards; }
  .an-panel:not([hidden]) .an-bar { animation: an-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--k) * 0.04s) both; transform-box: fill-box; transform-origin: 50% 100%; }
}
@keyframes an-draw { to { stroke-dashoffset: 0; } }
@keyframes an-grow { from { scale: 1 0; } to { scale: 1 1; } }

/* three smaller reports under the dashboard */
.an-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.an-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem 1.4rem; }
.an-card h3 { font-size: 1.08rem; font-weight: 600; }
.an-sub { font-size: 0.86rem; color: var(--muted); margin-top: 0.15rem; }

.an-donut { display: flex; align-items: center; gap: 1.2rem; margin-top: 1rem; }
.an-donut svg { width: 132px; flex: none; rotate: -90deg; }
.an-donut text { rotate: 90deg; transform-origin: 70px 70px; }
.dn-track { fill: none; stroke: var(--line-2); stroke-width: 16; }
.dn-seg { fill: none; stroke-width: 16; }
.dn-big { font-family: var(--f-head); font-size: 17px; font-weight: 700; fill: var(--navy); }
.dn-small { font-size: 10px; fill: var(--muted); }
.s1 { stroke: var(--purple); background: var(--purple); }
.s2 { stroke: var(--primary); background: var(--primary); }
.s3 { stroke: var(--logo-orange); background: var(--logo-orange); }
.s4 { stroke: var(--teal); background: var(--teal); }
.an-legend { display: grid; gap: 0.45rem; flex: 1; min-width: 0; }
.an-legend li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--text); }
.an-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-legend b { margin-left: auto; font-weight: 600; color: var(--navy); }

.an-bars { display: grid; gap: 0.8rem; margin-top: 1rem; }
.ab-label { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.86rem; color: var(--text); }
.ab-label b { font-weight: 600; color: var(--navy); }
.ab-label em { font-style: normal; font-size: 0.72rem; font-weight: 600; color: #9a5a00; background: #fef1e0; padding: 0.05rem 0.45rem; border-radius: 999px; margin-left: 0.25rem; }
.ab-track { position: relative; display: block; height: 8px; margin-top: 0.35rem; border-radius: 8px; background: var(--line-2); }
.ab-track i { display: block; height: 100%; border-radius: inherit; background: var(--navy); }
.an-bars .low .ab-track i { background: #f59e0b; } /* below reorder level: warning amber */
.an-bars.activity .ab-track i { background: linear-gradient(90deg, #937fcb, var(--navy)); }
.ab-track u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--text); translate: -1px 0; }
.an-key { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted); }
.an-key u { width: 2px; height: 12px; border-radius: 2px; background: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .an-card.rv .ab-track i { scale: 0 1; transform-origin: left; }
  .an-card.rv.in .ab-track i { scale: 1 1; transition: scale 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
}


@media (max-width: 1100px) {
  .an-grid { grid-template-columns: 1fr; }
  .an-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the dashboard is full width here, so the four KPIs fit in one row again */
@media (min-width: 761px) and (max-width: 1100px) {
  .an-main .an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  .an-main .an-kpis li:nth-child(3) { border-left: 1px solid var(--line-2); }
  .an-main .an-kpis li:nth-child(n + 3) { border-top: 0; }
}
@media (max-width: 760px) {
  /* the sidebar becomes a strip of modules you can swipe along */
  .an-body { grid-template-columns: minmax(0, 1fr); }
  .an-side { min-width: 0; border-right: 0; border-bottom: 1px solid var(--line-2); flex-direction: row; gap: 0.35rem; padding: 0.6rem 0.8rem; overflow-x: auto; scrollbar-width: none; }
  .an-side::-webkit-scrollbar { display: none; }
  .an-side button { width: auto; flex: none; white-space: nowrap; min-height: 36px; }
  .an-side button[aria-selected='true']::before { left: 0.7rem; right: 0.7rem; top: auto; bottom: 3px; width: auto; height: 3px; border-radius: 3px; }
  .an-checks { grid-template-columns: 1fr; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); }
  .an-kpis li:nth-child(3) { border-left: 0; }
  .an-kpis li:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .an-cards { grid-template-columns: 1fr; }
  .an-chart, .an-head { padding-inline: 1rem; }
  .an-head { gap: 0.7rem; padding-block: 0.9rem; }
  .an-head-ic { width: 36px; height: 36px; border-radius: 10px; }
  .an-head h3 { font-size: 0.98rem; line-height: 1.25; }
  .an-head div span { font-size: 0.78rem; }
  .an-sample { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
}
@media (max-width: 420px) {
  /* no room beside the title: the "Sample data" pill moves under it */
  .an-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.4rem; }
  .an-head-ic { grid-row: span 2; }
  .an-sample { grid-column: 2; justify-self: start; margin-left: 0; }
  .an-tabs { display: flex; }
  .an-tabs button { flex: 1; padding-inline: 0.4rem; }
}

/* ---------- Community Benefits ---------- */
.bn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.bn-item {
  position: relative; padding: 1.5rem 1.4rem 1.5rem; border-radius: var(--radius-card); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.bn-item::before {
  content: ''; position: absolute; left: 1.4rem; right: 1.4rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--brand-grad);
}
.bn-item:hover { translate: 0 -4px; box-shadow: var(--shadow-md); border-color: #faeabe; }
.bn-ic {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: var(--primary-600); background: var(--primary-50);
}
.bn-item:nth-child(even) .bn-ic { color: var(--navy); background: var(--navy-50); }
.bn-ic .i { width: 1.35rem; height: 1.35rem; }
.bn-item h3 { margin-top: 1rem; font-size: 1.12rem; font-weight: 600; }
.bn-item p { margin-top: 0.4rem; font-size: 0.95rem; color: var(--muted); line-height: 1.6; }

.bn-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.bn-side { border-radius: 24px; padding: clamp(1.5rem, 2.6vw, 2.1rem); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.bn-side.admin { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: var(--shadow-lg); }
.bn-side header { display: flex; align-items: center; gap: 0.9rem; }
.bs-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--navy); }
.bn-side.member .bs-ic { background: var(--navy-50); color: var(--navy); }
.bs-ic .i { width: 1.3rem; height: 1.3rem; }
.bs-label { font-size: 0.82rem; font-weight: 600; color: var(--primary-text); }
.bn-side.admin .bs-label { color: var(--primary); }
.bn-side h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 700; }
.bn-side.admin h3 { color: #fff; }
.bn-side > p { margin-top: 0.9rem; color: var(--muted); }
.bn-side.admin > p { color: #d5cee7; }
.bn-side ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1.2rem; margin-top: 1.2rem; }
.bn-side li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; }
.bn-side li .i { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--primary-600); stroke-width: 2.4; }
.bn-side.admin li .i { color: var(--primary); }

@media (max-width: 1280px) { .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .bn-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .bn-grid { grid-template-columns: 1fr; }
  .bn-side ul { grid-template-columns: 1fr; }
}

/* ---------- Additional features ---------- */
.features { background: #fff; }

/* ---------- Call to action ---------- */
.cta { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.cta-steps .di { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; border-radius: 50%; }
.cta-contact { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.cta-contact a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: #e8e4f3; }
.cta-contact a:hover { color: var(--primary); }
.cta-contact .i { width: 1.05rem; height: 1.05rem; color: var(--primary); }
.donate .btn-ghost .i { width: 1.1rem; height: 1.1rem; }