/* ============================================================
   Eduvisionary homepage — reference-matched visual rebuild.
   Scoped entirely under .h-scope with h-*-prefixed classes so it
   cannot affect the logged-in app or any other page. Assembled
   from four independently-built section fragments; see the two
   "MERGE FIX" notes below for the only cross-fragment adjustments
   made during assembly (a class-name collision and a stray icon).
   ============================================================ */

.h-scope {
  --h-blue: #2f5cff;
  --h-blue-dark: #1f3fd6;
  --h-ink: #0b0f19;
  --h-ink-soft: #5b6472;
  --h-bg: #ffffff;
  --h-bg-soft: #f5f7fb;
  --h-navy: #0b1220;
  --h-navy-2: #0e1730;
  --h-green: #16a34a;
  --h-amber: #b45309;
  --h-purple: #7c5cff;
  --h-teal: #0e8fa0;
  --h-rose: #e0407a;
  --h-border: #e6e9f0;
  --h-tint-blue: #eef2ff;
  --h-tint-green: #ecfdf5;
  --h-tint-amber: #fff7ed;
  --h-tint-purple: #f5f3ff;
  --h-tint-teal: #ecfeff;
  --h-tint-rose: #fff0f5;
  --h-radius-lg: 24px;
  --h-radius-md: 16px;
  --h-radius-sm: 10px;
  --h-shadow: 0 30px 60px -20px rgba(11, 15, 25, 0.18);
  --h-font: 'Manrope', system-ui, -apple-system, sans-serif;

  display: block;
  font-family: var(--h-font);
  color: var(--h-ink);
  background: var(--h-bg);
}

.h-scope * { box-sizing: border-box; }
.h-scope img { max-width: 100%; display: block; }
.h-scope :where(a) { text-decoration: none; color: inherit; }
.h-scope h1, .h-scope h2, .h-scope h3, .h-scope h4, .h-scope p { margin: 0; }
.h-scope ul { margin: 0; padding: 0; list-style: none; }

.h-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.h-wrap--narrow { max-width: 800px; }
.h-accent { color: var(--h-blue); }
.h-scope em { font-family: var(--h-font); }

/* ---------- Buttons (shared across every fragment) ---------- */
.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  font-family: var(--h-font);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.h-btn svg { width: 16px; height: 16px; flex: none; }
.h-btn:hover { transform: translateY(-1px); }
.h-btn--primary { background: var(--h-blue); color: #fff; }
.h-btn--primary:hover { background: var(--h-blue-dark); }
.h-btn--secondary { background: transparent; color: var(--h-ink); border-color: var(--h-border); }
.h-btn--secondary:hover { border-color: var(--h-ink); }
.h-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.h-btn--outline-light:hover { background: rgba(255,255,255,0.08); }
/* MERGE FIX: the CRM-fragment's .h-btn--dark included an auto-appended
   "→" via ::after, which is right for its inline "Explore X" links but
   was also winning (later in cascade order) for the navbar's dark
   "Get started" pill from the hero fragment, giving it an unwanted
   arrow. Standardised to no arrow, matching the navbar usage. */
.h-btn--dark { background: var(--h-ink); color: #fff; padding: 12px 22px; font-size: 0.9rem; }
.h-btn--dark:hover { opacity: 0.88; }

.h-link-muted { color: var(--h-ink-soft); font-weight: 700; font-size: 0.92rem; }
.h-link-muted:hover { color: var(--h-ink); }

/* ============================================================
   FRAGMENT 1 — announcement strip / navbar / hero / pillar bar
   ============================================================ */
.h-announce { background: var(--h-navy); color: #fff; }
.h-announce p { max-width: 1180px; margin: 0 auto; padding: 10px 24px; text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; }

.h-navbar { background: rgba(238,242,255,0.88); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--h-border); position: sticky; top: 0; z-index: 50; }
.h-navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }
.h-brand { display: flex; align-items: center; gap: 0; color: var(--h-ink); font-weight: 800; font-size: 1.2rem; flex: none; }
.h-brand__mark { width: 30px; height: 30px; margin-right: 10px; background: url('/assets/img/logo-mark.svg') center / contain no-repeat; flex: none; }
.h-brand__mark::after { display: none; }
.h-navbar__links { display: flex; gap: 22px; flex: 1; justify-content: center; }
.h-navbar__links a { color: var(--h-ink-soft); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.h-navbar__links a:hover { color: var(--h-ink); }
.h-navbar__actions { display: flex; align-items: center; gap: 18px; flex: none; }

.h-hero { overflow-x: clip; padding: 96px 0 0; text-align: center; background: linear-gradient(160deg, var(--h-tint-blue) 0%, var(--h-tint-purple) 55%, var(--h-tint-blue) 100%); }
.h-hero__title { font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: var(--h-ink); max-width: 880px; margin: 0 auto; }
.h-hero__title-accent { color: var(--h-blue); }
.h-hero__subtitle { margin: 24px auto 0; max-width: 620px; color: var(--h-ink-soft); font-size: 1.1rem; font-weight: 500; line-height: 1.6; }
.h-hero__actions { display: flex; justify-content: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.h-hero__trust { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.h-hero__trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--h-ink-soft); }
.h-hero__trust-item svg { color: var(--h-green); flex: none; }
.h-hero__trust-item--price { color: var(--h-blue); }
.h-hero__trust-divider { width: 1px; height: 14px; background: var(--h-border); }

.h-mockup--hero { position: relative; max-width: 980px; margin: 56px auto 0; }
.h-mockup__chip { position: absolute; top: -22px; right: 24px; z-index: 5; background: #fff; border-radius: var(--h-radius-md); padding: 14px 20px; display: flex; align-items: center; gap: 12px; box-shadow: var(--h-shadow); border: 1px solid var(--h-border); text-align: left; }
.h-mockup__chip strong { display: block; font-size: 0.88rem; color: var(--h-ink); }
.h-mockup__chip span { font-size: 0.78rem; color: var(--h-ink-soft); }
.h-mockup__chip-icon { width: 30px; height: 30px; border-radius: 50%; background: #dcfce7; color: var(--h-green); display: flex; align-items: center; justify-content: center; flex: none; }
.h-mockup__frame { position: relative; border-radius: var(--h-radius-lg); overflow: hidden; box-shadow: var(--h-shadow); border: 1px solid var(--h-border); background: var(--h-bg); }
.h-mockup__bar { background: var(--h-bg-soft); display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--h-border); }
.h-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6dbe4; }
.h-mockup__url { margin-left: 10px; background: var(--h-bg); border: 1px solid var(--h-border); border-radius: 999px; padding: 4px 14px; font-size: 0.75rem; color: var(--h-ink-soft); }
.h-mockup__body { display: flex; background: var(--h-bg); min-height: 340px; text-align: left; }
.h-mockup__side { width: 180px; border-right: 1px solid var(--h-border); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--h-bg-soft); flex: none; }
.h-mockup__side-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--h-radius-sm); font-size: 0.85rem; font-weight: 600; color: var(--h-ink-soft); }
.h-mockup__side-item i { font-style: normal; width: 14px; text-align: center; flex: none; opacity: 0.75; }
.h-mockup__side-item--active { background: #fff; color: var(--h-ink); font-weight: 800; box-shadow: 0 1px 2px rgba(11,15,25,0.06); }
.h-mockup__main { flex: 1; padding: 32px; }
.h-mockup__greeting { font-size: 1.25rem; font-weight: 800; margin-bottom: 20px; color: var(--h-ink); }
.h-mockup__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.h-mockup__stat { border: 1px solid var(--h-border); border-radius: var(--h-radius-sm); padding: 16px; }
.h-mockup__stat span { display: block; font-size: 0.76rem; color: var(--h-ink-soft); margin-bottom: 8px; font-weight: 600; }
.h-mockup__stat strong { display: block; color: var(--h-ink); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }

/* ---------- Recent invoices panel (desktop mockup) — mirrors the
   real /app/dashboard.php "Recent invoices" panel structure. ---------- */
.h-mockup__panel { margin-top: 18px; border: 1px solid var(--h-border); border-radius: var(--h-radius-sm); overflow: hidden; }
.h-mockup__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--h-border); background: var(--h-bg-soft); }
.h-mockup__panel-head span { font-size: 0.82rem; font-weight: 800; color: var(--h-ink); }
.h-mockup__panel-head em { font-family: var(--h-font); font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--h-blue); }
.h-mockup__table { width: 100%; border-collapse: collapse; }
.h-mockup__table th { text-align: left; padding: 8px 16px; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--h-ink-soft); border-bottom: 1px solid var(--h-border); }
.h-mockup__table td { padding: 9px 16px; font-size: 0.78rem; font-weight: 600; color: var(--h-ink); border-bottom: 1px solid var(--h-border); }
.h-mockup__table tbody tr:last-child td { border-bottom: none; }
.h-mockup__table th:last-child, .h-mockup__table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.h-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; }
.h-badge--green { background: #dcfce7; color: #15803d; }
.h-badge--teal { background: rgba(14,143,160,0.14); color: var(--h-teal); }
.h-badge--red { background: #fee2e2; color: #b42318; }
.h-badge--grey { background: var(--h-bg-soft); color: var(--h-ink-soft); }

/* ---------- Decorative cursor (desktop mockup) ---------- */
.h-mockup__cursor {
  position: absolute;
  left: 222px;
  top: 118px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(11,15,25,0.35));
  opacity: 0;
}

/* ---------- Floating phone (hero) ---------- */
@media (min-width: 721px) {
  .h-mockup--hero { margin-bottom: 100px; }
}
.h-phone {
  position: absolute;
  right: -28px;
  bottom: -84px;
  z-index: 6;
  width: 232px;
  border-radius: 38px;
  background: var(--h-bg-soft);
  border: 6px solid #05070d;
  box-shadow: 0 40px 70px -22px rgba(11, 15, 25, 0.55), 0 0 90px 6px rgba(47, 92, 255, 0.32);
  color: var(--h-ink);
  text-align: left;
}
.h-phone__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 16px;
  border-radius: 999px;
  background: #05070d;
  z-index: 2;
}
.h-phone__status { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; font-size: 0.68rem; font-weight: 800; color: var(--h-ink); background: #fff; border-radius: 32px 32px 0 0; }
.h-phone__status-icons { display: inline-flex; align-items: center; gap: 5px; color: var(--h-ink); }
/* Mirrors the real app's mobile top bar (.app-topbar): "Menu" toggle pill + page title. */
.h-phone__topbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; background: #fff; border-bottom: 1px solid var(--h-border); }
.h-phone__menu { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border: 1px solid var(--h-border); border-radius: 999px; font-size: 0.62rem; font-weight: 800; color: var(--h-ink); background: #fff; }
.h-phone__title { font-size: 0.86rem; font-weight: 800; color: var(--h-ink); }
.h-phone__content { padding: 14px 12px 18px; }
.h-phone__greeting { font-size: 0.68rem; font-weight: 600; color: var(--h-ink-soft); margin-bottom: 12px; }
.h-phone__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.h-phone__stat { background: #fff; border: 1px solid var(--h-border); border-radius: 12px; padding: 10px 11px; }
.h-phone__stat span { display: block; font-size: 0.6rem; font-weight: 600; color: var(--h-ink-soft); margin-bottom: 5px; }
.h-phone__stat strong { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.15; color: var(--h-ink); }
.h-phone__panel { background: #fff; border: 1px solid var(--h-border); border-radius: 12px; overflow: hidden; }
.h-phone__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--h-border); }
.h-phone__panel-head span { font-size: 0.7rem; font-weight: 800; color: var(--h-ink); }
.h-phone__panel-head em { font-family: var(--h-font); font-style: normal; font-size: 0.6rem; font-weight: 700; color: var(--h-blue); }
.h-phone__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--h-border); }
.h-phone__panel-head + .h-phone__row { border-top: none; }
.h-phone__row-main strong, .h-phone__row-side strong { display: block; font-size: 0.68rem; font-weight: 800; color: var(--h-ink); }
.h-phone__row-main span { display: block; margin-top: 2px; font-size: 0.58rem; font-weight: 600; color: var(--h-ink-soft); }
.h-phone__row-side { text-align: right; flex: none; }
.h-phone__row-side .h-badge { margin-top: 3px; padding: 1px 7px; font-size: 0.56rem; }

@media (max-width: 720px) {
  .h-phone { display: none; }
}

.h-pillarbar { padding: 40px 0; background: var(--h-tint-blue); }
.h-pillarbar__row { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.h-pillarbar__item { display: inline-flex; align-items: center; gap: 10px; color: var(--h-ink); font-weight: 800; font-size: 1rem; }
.h-pillarbar__item svg { color: var(--h-blue); flex: none; }
.h-pillarbar__item--customers svg { color: var(--h-blue); }
.h-pillarbar__item--finance svg { color: var(--h-green); }
.h-pillarbar__item--projects svg { color: var(--h-amber); }
.h-pillarbar__item--reporting svg { color: var(--h-purple); }
.h-pillarbar__divider { width: 1px; height: 26px; background: var(--h-border); }

/* ============================================================
   FRAGMENT 2 — invoicing / payment collection / income & expenses
   / one-platform diagram
   ============================================================ */
.h-eyebrow { display: block; color: var(--h-blue); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.h-eyebrow--center { text-align: center; }

.h-checklist { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 22px; max-width: 480px; }
.h-checklist li { display: flex; gap: 14px; align-items: flex-start; }
.h-checklist__icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(47, 92, 255, 0.12); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.h-checklist__icon svg { width: 14px; height: 14px; stroke: var(--h-blue); }
.h-checklist strong { display: block; color: var(--h-ink); font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.h-checklist p { margin: 0; color: var(--h-ink-soft); font-size: 0.92rem; line-height: 1.6; font-weight: 500; }

.h-feature { padding: 96px 24px; background: var(--h-tint-blue); }
.h-feature--soft, .h-feature--bg { background: var(--h-tint-blue); }
.h-feature--tint-blue { background: var(--h-tint-blue); }
.h-feature--tint-green { background: var(--h-tint-green); }
.h-feature--tint-amber { background: var(--h-tint-amber); }
.h-feature--tint-purple { background: var(--h-tint-purple); }
.h-feature--tint-teal { background: var(--h-tint-teal); }
.h-feature--tint-rose { background: var(--h-tint-rose); }
.h-feature__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.h-feature--rev .h-feature__visual { order: -1; }
.h-feature__title, .h-heading { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.16; color: var(--h-ink); margin: 0 0 18px; }
.h-feature__desc, .h-sub { color: var(--h-ink-soft); font-size: 1.05rem; line-height: 1.7; font-weight: 500; max-width: 480px; margin: 0 0 28px; }

.h-mockup--invoicing, .h-mockup--payment, .h-mockup--finance { border-radius: var(--h-radius-lg); box-shadow: var(--h-shadow); position: relative; }
.h-mockup--invoicing { background: linear-gradient(160deg, var(--h-navy) 0%, var(--h-navy-2) 100%); padding: 40px 32px 32px; min-height: 460px; }
.h-invoice-chip { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--h-radius-sm); padding: 12px 16px; box-shadow: 0 16px 30px -10px rgba(0,0,0,0.35); z-index: 3; }
.h-invoice-chip--back { top: 30px; left: 24px; background: #e9edfb; z-index: 2; }
.h-invoice-chip--front { top: 92px; left: 16px; border: 1px solid rgba(47, 92, 255, 0.25); }
.h-invoice-chip__icon { width: 34px; height: 34px; border-radius: var(--h-radius-sm); background: var(--h-bg-soft); color: var(--h-ink-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.h-invoice-chip__icon svg { width: 17px; height: 17px; }
.h-invoice-chip__icon--active { background: var(--h-blue); color: #fff; }
.h-invoice-chip__body { display: flex; flex-direction: column; gap: 2px; }
.h-invoice-chip__body strong { font-size: 0.85rem; font-weight: 800; color: var(--h-ink); }
.h-invoice-chip__body em { font-style: normal; font-size: 0.76rem; color: var(--h-ink-soft); }
.h-invoice-chip__amount { margin-left: 10px; font-weight: 800; font-size: 0.9rem; color: var(--h-ink); white-space: nowrap; }
.h-invoice-doc { position: relative; z-index: 1; margin-left: auto; margin-top: 150px; width: 88%; background: #fff; border-radius: var(--h-radius-md); padding: 26px 26px 22px; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.4); }
.h-invoice-doc__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.h-invoice-doc__title { font-size: 1.3rem; font-weight: 800; color: var(--h-blue); }
.h-invoice-doc__meta { display: flex; flex-direction: column; gap: 3px; margin: 0; text-align: right; }
.h-invoice-doc__meta div { display: flex; gap: 8px; justify-content: flex-end; font-size: 0.72rem; }
.h-invoice-doc__meta dt { color: var(--h-ink-soft); }
.h-invoice-doc__meta dd { margin: 0; font-weight: 700; color: var(--h-ink); }
.h-invoice-doc__bill { font-size: 0.82rem; color: var(--h-ink-soft); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--h-border); }
.h-invoice-doc__bill strong { color: var(--h-ink); }
.h-invoice-doc__table { margin-bottom: 14px; }
.h-invoice-doc__row { display: grid; grid-template-columns: 2.4fr 0.6fr 1fr 1fr; gap: 8px; padding: 9px 0; font-size: 0.78rem; border-bottom: 1px solid var(--h-border); }
.h-invoice-doc__row span:nth-child(2), .h-invoice-doc__row span:nth-child(3), .h-invoice-doc__row span:nth-child(4) { text-align: right; }
.h-invoice-doc__row--head { color: var(--h-ink-soft); font-weight: 700; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.04em; }
.h-invoice-doc__row:not(.h-invoice-doc__row--head) span:first-child { color: var(--h-ink); font-weight: 700; }
.h-invoice-doc__row:not(.h-invoice-doc__row--head) span:not(:first-child) { color: var(--h-ink-soft); }
.h-invoice-doc__totals { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.h-invoice-doc__totals div { display: flex; gap: 18px; font-size: 0.82rem; color: var(--h-ink-soft); }
.h-invoice-doc__grand { padding-top: 8px; border-top: 1px solid var(--h-border); width: 100%; justify-content: flex-end; }
.h-invoice-doc__grand span, .h-invoice-doc__grand strong { font-size: 1.05rem; color: var(--h-ink); font-weight: 800; }

.h-mockup--payment { width: 100%; max-width: 480px; min-height: 560px; padding: 0; background: transparent; box-shadow: none; }
.h-payment-methods { background: #fff; border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); box-shadow: var(--h-shadow); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; width: 74%; }
.h-payment-methods__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-ink-soft); margin-bottom: 6px; }
.h-payment-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; white-space: nowrap; border: 1px solid var(--h-border); border-radius: var(--h-radius-sm); font-weight: 700; font-size: 0.9rem; color: var(--h-ink); }
.h-payment-tile svg { width: 20px; height: 20px; color: var(--h-blue); flex: none; }
.h-payment-card { position: absolute; right: 0; bottom: 0; width: 64%; min-width: 250px; background: linear-gradient(160deg, var(--h-navy) 0%, var(--h-navy-2) 100%); border-radius: var(--h-radius-lg); box-shadow: 0 28px 55px -18px rgba(0,0,0,0.5); padding: 26px 26px 22px; color: #fff; }
.h-payment-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; white-space: nowrap; }
.h-payment-card__top > span:first-child { font-size: 0.8rem; color: rgba(255,255,255,0.65); font-weight: 700; }
.h-payment-card__badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(22,163,74,0.2); color: #4ade80; font-size: 0.72rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.h-payment-card__badge svg { width: 11px; height: 11px; }
.h-payment-card__amount { display: block; font-size: 1.75rem; white-space: nowrap; font-weight: 800; line-height: 1.1; }
.h-payment-card__sub { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 4px 0 18px; }
.h-payment-card__rows { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.h-payment-card__rows div { display: flex; justify-content: space-between; gap: 14px; font-size: 0.82rem; white-space: nowrap; }
.h-payment-card__rows span:first-child { color: rgba(255,255,255,0.55); }
.h-payment-card__rows span:last-child { font-weight: 700; }

.h-mockup--finance { background: transparent; box-shadow: none; }
.h-finance-card { background: #fff; border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); box-shadow: var(--h-shadow); padding: 32px 30px; }
.h-finance-card__label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-ink-soft); margin-bottom: 18px; }
.h-finance-card__stats { display: flex; gap: 32px; margin-bottom: 22px; }
.h-finance-stat { display: flex; flex-direction: column; gap: 4px; }
.h-finance-stat span { font-size: 0.78rem; color: var(--h-ink-soft); font-weight: 600; }
.h-finance-stat strong { font-size: 1.5rem; font-weight: 800; }
.h-finance-stat--income strong { color: var(--h-green); }
.h-finance-stat--expense strong { color: var(--h-amber); }
.h-finance-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; border: 1px solid var(--h-border); border-radius: var(--h-radius-sm); padding: 12px; margin-bottom: 24px; }
.h-finance-chart span { flex: 1; height: var(--v); background: linear-gradient(180deg, #6fe3a0, var(--h-green)); border-radius: 5px 5px 0 0; }
.h-finance-card__categories { display: flex; flex-direction: column; gap: 12px; }
.h-finance-card__sublabel { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-ink-soft); margin-bottom: 2px; }
.h-finance-cat { display: grid; grid-template-columns: 1fr 2.2fr auto; align-items: center; gap: 12px; }
.h-finance-cat__name { font-size: 0.82rem; font-weight: 700; color: var(--h-ink); }
.h-finance-cat__bar { height: 6px; border-radius: 999px; background: var(--h-bg-soft); overflow: hidden; }
.h-finance-cat__bar i { display: block; height: 100%; background: var(--h-amber); border-radius: 999px; }
.h-finance-cat__value { font-size: 0.82rem; font-weight: 700; color: var(--h-ink-soft); text-align: right; }

.h-platform { padding: 96px 24px; background: var(--h-tint-purple); }
.h-platform__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.h-platform__title { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.16; color: var(--h-ink); margin: 0 0 18px; }
.h-platform__desc { color: var(--h-ink-soft); font-size: 1rem; line-height: 1.65; font-weight: 500; max-width: 440px; margin: 0 0 14px; }
.h-platform__text .h-btn { margin-top: 18px; }
.h-platform__diagram { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; }
.h-platform__ring { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(47,92,255,0.1), rgba(47,92,255,0) 72%); border: 1px dashed rgba(47,92,255,0.28); transform: translate(-50%, -50%); z-index: 0; }
.h-platform__center { position: absolute; left: 50%; top: 50%; width: 27%; height: 27%; border-radius: 50%; background: #fff; border: 1px solid var(--h-border); box-shadow: var(--h-shadow); display: flex; align-items: center; justify-content: center; text-align: center; transform: translate(-50%, -50%); z-index: 3; }
.h-platform__center span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: var(--h-ink); padding: 0 10px; }
.h-platform__pill { --radius: 196px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); background: #fff; border: 1px solid var(--h-border); border-left: 3px solid var(--h-blue); box-shadow: 0 10px 24px -10px rgba(11,15,25,0.18); border-radius: 999px; padding: 10px 18px 10px 16px; font-size: 0.85rem; font-weight: 700; color: var(--h-ink); white-space: nowrap; z-index: 2; }
.h-platform__pill--blue { border-left-color: var(--h-blue); }
.h-platform__pill--purple { border-left-color: var(--h-purple); }
.h-platform__pill--green { border-left-color: var(--h-green); }
.h-platform__pill--amber { border-left-color: var(--h-amber); }
.h-platform__pill--rose { border-left-color: var(--h-rose); }
.h-platform__pill--teal { border-left-color: var(--h-teal); }

/* ============================================================
   FRAGMENT 3 — customers / leads & pipeline / projects & tasks / team
   ============================================================ */
.h-check-icon { flex: none; width: 26px; height: 26px; border-radius: 999px; background: rgba(47, 92, 255, 0.12); color: var(--h-blue); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.h-check-icon svg { width: 14px; height: 14px; }
.h-check-desc { display: block; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--h-ink-soft); max-width: 44ch; }

.h-feature__visual { display: flex; justify-content: center; }
/* MERGE FIX: the closing fragment (all-in-one/fine-print/FAQ/CTA/footer)
   originally reused the plain class name ".h-card" for its fine-print
   panels, colliding with this fragment's ".h-card" profile/lead/project/
   team card shell (different base styles: width/shadow/border/overflow
   vs. just padding). Renamed the fine-print panels to
   .h-fineprint__main / .h-fineprint__side (see below) so the two
   independent card systems no longer share a selector. */
.h-card { width: 100%; max-width: 460px; background: #fff; border-radius: var(--h-radius-lg); box-shadow: var(--h-shadow); border: 1px solid var(--h-border); overflow: hidden; }
.h-panel__label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--h-ink-soft); }

.h-card--customer { padding-bottom: 0; }
.h-card__topbar { background: var(--h-navy); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.h-card__topbar-title { color: #fff; font-weight: 800; font-size: 15px; }
.h-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; padding: 5px 10px; border-radius: 999px; }
.h-tag--live { background: rgba(22,163,74,0.18); color: #4ade80; }
.h-cust__body { padding: 24px 24px 20px; }
.h-cust__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.h-avatar { flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--h-blue); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.h-avatar--team { background: #7c5cff; }
.h-cust__name { font-size: 17px; font-weight: 800; color: var(--h-ink); }
.h-cust__sub { font-size: 13px; font-weight: 600; color: var(--h-ink-soft); }
.h-tag-row { display: flex; gap: 8px; margin-bottom: 18px; }
.h-pill-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--h-ink-soft); background: var(--h-bg-soft); border: 1px solid var(--h-border); border-radius: 999px; padding: 4px 10px; }
.h-cust__contact { display: flex; flex-direction: column; gap: 12px; }
.h-cust__row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: var(--h-ink); }
.h-cust__row svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--h-ink-soft); }
.h-cust__row--note { font-weight: 500; color: var(--h-ink-soft); }
.h-cust__followups { border-top: 1px solid var(--h-border); background: var(--h-bg-soft); padding: 18px 24px 22px; }
.h-cust__followups-head { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--h-ink-soft); margin-bottom: 12px; }
.h-fu-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.h-fu-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--h-blue); }
.h-fu-dot--done { background: var(--h-green); }
.h-fu-text { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--h-ink); }
.h-fu-row--done .h-fu-text { color: var(--h-ink-soft); text-decoration: line-through; }
.h-fu-date { font-size: 12.5px; font-weight: 700; color: var(--h-ink-soft); flex: none; }
.h-fu-row--done .h-fu-date { color: var(--h-green); }

.h-card--panel { padding: 24px 24px 12px; }
.h-panel__stats { display: flex; gap: 32px; margin-bottom: 18px; }
.h-panel__value { font-size: 26px; font-weight: 800; color: var(--h-ink); margin-top: 4px; }
.h-panel__filters { display: flex; gap: 8px; margin-bottom: 18px; }
.h-filter-pill { font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--h-bg-soft); color: var(--h-ink-soft); border: 1px solid var(--h-border); }
.h-filter-pill--active { background: var(--h-ink); color: #fff; border-color: var(--h-ink); }
.h-lead-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--h-border); }
.h-lead-dot { flex: none; width: 34px; height: 34px; border-radius: 999px; }
.h-lead-info { flex: 1; min-width: 0; }
.h-lead-name { font-size: 14.5px; font-weight: 800; color: var(--h-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-lead-sub { font-size: 12.5px; font-weight: 600; color: var(--h-ink-soft); margin-top: 2px; }
.h-stage-badge { flex: none; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.h-stage-badge--new { background: rgba(47,92,255,0.12); color: var(--h-blue); }
.h-stage-badge--contacted { background: rgba(124,92,255,0.14); color: #7c5cff; }
.h-stage-badge--qualified { background: rgba(14,165,183,0.14); color: #0e8fa0; }
.h-stage-badge--proposal { background: rgba(180,83,9,0.14); color: var(--h-amber); }
.h-stage-badge--won { background: rgba(22,163,74,0.14); color: var(--h-green); }

.h-card--project { padding: 26px 26px 30px; }
.h-proj__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.h-proj__name { font-size: 18px; font-weight: 800; color: var(--h-ink); margin-top: 4px; max-width: 26ch; }
.h-status-badge { flex: none; font-size: 11.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.h-status-badge--active { background: rgba(47,92,255,0.12); color: var(--h-blue); }
.h-proj__meta { font-size: 13px; font-weight: 600; color: var(--h-ink-soft); margin-bottom: 20px; }
.h-proj__dot { margin: 0 6px; }
.h-board__label { margin-bottom: 10px; }
.h-board__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h-board__col { background: var(--h-bg-soft); border-radius: var(--h-radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.h-board__col-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--h-ink-soft); margin-bottom: 2px; }
.h-board__dot { width: 7px; height: 7px; border-radius: 999px; }
.h-board__count { margin-left: auto; background: #fff; border: 1px solid var(--h-border); border-radius: 999px; padding: 1px 7px; font-size: 10.5px; }
.h-task-card { background: #fff; border: 1px solid var(--h-border); border-radius: 10px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.h-task-title { font-size: 11.5px; font-weight: 700; color: var(--h-ink); line-height: 1.3; }
.h-task-card--done .h-task-title { color: var(--h-ink-soft); text-decoration: line-through; }
.h-task-avatar { flex: none; font-size: 9.5px; font-weight: 800; color: var(--h-blue); background: rgba(47,92,255,0.12); border-radius: 999px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }

.h-card--team { padding: 24px 24px 26px; }
.h-team__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.h-leave-card { background: var(--h-bg-soft); border: 1px solid var(--h-border); border-radius: var(--h-radius-md); padding: 18px; margin-bottom: 22px; }
.h-leave-card__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.h-leave-icon { flex: none; width: 30px; height: 30px; border-radius: 999px; background: rgba(180,83,9,0.14); color: var(--h-amber); display: flex; align-items: center; justify-content: center; }
.h-leave-icon svg { width: 15px; height: 15px; }
.h-leave-title { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--h-amber); margin-bottom: 3px; }
.h-leave-sub { font-size: 14px; font-weight: 700; color: var(--h-ink); }
.h-leave-actions { display: flex; gap: 10px; }
.h-btn-approve, .h-btn-decline { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 10px 14px; font-size: 13.5px; font-weight: 800; cursor: pointer; border: 1px solid transparent; }
.h-btn-approve { background: var(--h-blue); color: #fff; }
.h-btn-approve svg { width: 13px; height: 13px; }
.h-btn-decline { background: #fff; color: var(--h-ink); border-color: var(--h-border); }
.h-onboard { display: flex; flex-direction: column; gap: 4px; }
.h-onboard-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--h-border); }
.h-onboard-row:first-of-type { border-top: none; margin-top: 10px; }
.h-onboard-check { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--h-border); display: flex; align-items: center; justify-content: center; }
.h-onboard-check--done { background: var(--h-green); border-color: var(--h-green); color: #fff; }
.h-onboard-check--done svg { width: 12px; height: 12px; }
.h-onboard-text { font-size: 13.5px; font-weight: 700; color: var(--h-ink); }
.h-onboard-text--done { color: var(--h-ink-soft); text-decoration: line-through; }

/* ============================================================
   FRAGMENT 4 — all-in-one grid / differentiators / why choose /
   no fine print / FAQ / final CTA / footer
   ============================================================ */
.h-section { padding: 100px 0; background: var(--h-tint-blue); }
.h-section--soft { background: var(--h-tint-teal); }
.h-section.h-suite { background: var(--h-tint-blue); }
.h-section.h-diff { background: var(--h-tint-teal); }
.h-section.h-why { background: var(--h-tint-purple); }
.h-section.h-fineprint { background: var(--h-tint-green); }
.h-section.h-faq { background: var(--h-tint-amber); }
.h-h2 { font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--h-ink); }
.h-h2--center { text-align: center; }
.h-h3 { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.01em; color: var(--h-ink); }
.h-h3--light { color: #fff; }
.h-lede { margin-top: 14px; font-weight: 500; font-size: 1.05rem; color: var(--h-ink-soft); line-height: 1.6; max-width: 640px; }
.h-lede--center { text-align: center; margin-left: auto; margin-right: auto; }

.h-suite__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-suite-card { --suite-c: var(--h-blue); position: relative; overflow: hidden; background: var(--h-bg); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 22px 18px 28px; box-shadow: var(--h-shadow); }
.h-suite-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--suite-c); }
.h-suite-card:nth-child(2) { --suite-c: var(--h-green); }
.h-suite-card:nth-child(3) { --suite-c: var(--h-amber); }
.h-suite-card:nth-child(4) { --suite-c: var(--h-purple); }
.h-suite-card h3 { font-size: 1.1rem; font-weight: 800; margin-top: 20px; }
.h-suite-card p { margin-top: 8px; font-size: 0.92rem; color: var(--h-ink-soft); line-height: 1.55; }
.h-swatch { position: relative; height: 152px; background: #fff; border: 1px solid var(--h-border); border-radius: var(--h-radius-md); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: hidden; }
.h-swatch__row { display: flex; align-items: center; gap: 8px; }
.h-swatch .h-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: none; }
.h-dot--blue { background: var(--h-blue) !important; }
.h-dot--amber { background: var(--h-amber) !important; }
.h-dot--green { background: var(--h-green) !important; }
.h-bar { height: 8px; border-radius: 999px; background: var(--h-bg-soft); border: 1px solid var(--h-border); flex: none; }
.h-swatch--customers .h-swatch__pill, .h-swatch--finance .h-swatch__pill { position: absolute; top: 14px; right: 14px; font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(47,92,255,0.1); color: var(--h-blue); }
.h-swatch__pill--green { background: rgba(22,163,74,0.12); color: var(--h-green); }
.h-swatch--finance .h-bar { background: rgba(47,92,255,0.08); border-color: rgba(47,92,255,0.18); }
.h-swatch--projects { flex-direction: row; align-items: stretch; gap: 12px; }
.h-swatch__col { flex: 1; background: var(--h-bg-soft); border: 1px solid var(--h-border); border-radius: var(--h-radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.h-swatch__label { font-size: 0.65rem; font-weight: 800; color: var(--h-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.h-chip { display: block; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--h-border); }
.h-chip--done { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.25); }
.h-swatch--reporting .h-swatch__bars { display: flex; align-items: flex-end; gap: 8px; height: 100%; width: 100%; }
.h-swatch__bars i { flex: 1; border-radius: 5px 5px 0 0; background: var(--h-blue); opacity: 0.85; }
.h-swatch__bars i:nth-child(2n) { background: var(--h-ink); opacity: 0.75; }

.h-diff__panel { margin-top: 56px; background: var(--h-bg); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); padding: 8px; box-shadow: var(--h-shadow); }
.h-diff__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.h-diff__item { padding: 32px 26px; border-right: 1px solid var(--h-border); }
.h-diff__item:last-child { border-right: none; }
.h-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--h-blue); color: #fff; }
.h-icon-box svg { width: 22px; height: 22px; }
.h-diff__item:nth-child(4n+2) .h-icon-box { background: var(--h-purple); }
.h-diff__item:nth-child(4n+3) .h-icon-box { background: var(--h-teal); }
.h-diff__item:nth-child(4n+4) .h-icon-box { background: var(--h-green); }
.h-icon-box--sm { width: 38px; height: 38px; border-radius: 10px; background: var(--h-bg); border: 1px solid var(--h-border); color: var(--h-blue); }
.h-why-card:nth-child(6n+2) .h-icon-box--sm { color: var(--h-purple); }
.h-why-card:nth-child(6n+3) .h-icon-box--sm { color: var(--h-teal); }
.h-why-card:nth-child(6n+4) .h-icon-box--sm { color: var(--h-amber); }
.h-why-card:nth-child(6n+5) .h-icon-box--sm { color: var(--h-rose); }
.h-why-card:nth-child(6n+6) .h-icon-box--sm { color: var(--h-green); }
.h-icon-box--dark { background: rgba(255,255,255,0.08); color: #fff; }
.h-diff__item h3 { margin-top: 18px; font-size: 1.05rem; font-weight: 800; }
.h-diff__item p { margin-top: 8px; font-size: 0.9rem; color: var(--h-ink-soft); line-height: 1.55; }
.h-learn { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: 0.88rem; color: var(--h-blue); }
.h-learn svg { width: 14px; height: 14px; }
.h-pills { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.h-pills__label { font-weight: 800; font-size: 0.9rem; color: var(--h-ink); }
.h-pill { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--h-border); background: #fff; font-size: 0.85rem; font-weight: 600; color: var(--h-ink); transition: border-color 0.15s ease; }
.h-pill:hover { border-color: var(--h-blue); color: var(--h-blue); }

.h-why__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--h-border); border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); overflow: hidden; }
.h-why-card { background: #fff; padding: 36px 32px; }
.h-why-card--half { grid-column: span 3; }
.h-why-card--third { grid-column: span 2; }
.h-why-card--full { grid-column: span 6; }
.h-why-card__top { display: flex; align-items: center; justify-content: space-between; }
.h-why-card__num { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.78rem; color: var(--h-ink-soft); letter-spacing: 0.04em; }
.h-why-card__title { margin-top: 22px; font-size: 1.15rem; font-weight: 800; line-height: 1.35; }
.h-why-card__title--accent { color: var(--h-blue); }
.h-why-card p:not(.h-why-card__tags) { margin-top: 10px; font-size: 0.92rem; color: var(--h-ink-soft); line-height: 1.55; max-width: 480px; }
.h-why-card__tags { margin-top: 18px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.75rem; color: var(--h-ink-soft); }

/* MERGE FIX: renamed from the generic ".h-card" (see fragment-3 note
   above) to avoid colliding with the profile/lead/project/team card
   shell; these two selectors now carry their own padding/background. */
.h-fineprint__main, .h-fineprint__side { border-radius: var(--h-radius-lg); padding: 36px; }
.h-fineprint__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: stretch; }
.h-fineprint__main { background: #fff; border: 1px solid var(--h-border); }
.h-fineprint__side { background: radial-gradient(circle at 30% 20%, var(--h-navy-2), var(--h-navy) 70%); }
.h-fineprint .h-checklist { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; max-width: none; }
.h-checklist__item { display: flex; gap: 14px; align-items: flex-start; }
.h-checklist__item h4 { font-size: 0.98rem; font-weight: 800; }
.h-checklist__item p { margin-top: 4px; font-size: 0.88rem; color: var(--h-ink-soft); line-height: 1.5; }
.h-side-links { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.h-side-link { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--h-radius-md); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: background 0.15s ease; }
.h-side-link:hover { background: rgba(255,255,255,0.08); }
.h-side-link__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.h-side-link__text strong { color: #fff; font-size: 0.95rem; font-weight: 800; }
.h-side-link__text em { color: rgba(255,255,255,0.6); font-style: normal; font-size: 0.8rem; }
.h-side-link__arrow { width: 16px; height: 16px; color: rgba(255,255,255,0.5); flex: none; }

.h-faq__list { margin-top: 48px; }
.h-faq__item { border-bottom: 1px solid var(--h-border); padding: 22px 0; }
.h-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-weight: 800; font-size: 1.05rem; color: var(--h-ink); list-style: none; }
.h-faq__item summary::-webkit-details-marker { display: none; }
.h-faq__chev { width: 20px; height: 20px; flex: none; color: var(--h-ink-soft); transition: transform 0.2s ease; }
.h-faq__item[open] .h-faq__chev { transform: rotate(180deg); }
.h-faq__item p { margin-top: 14px; font-size: 0.95rem; color: var(--h-ink-soft); line-height: 1.65; max-width: 680px; }
.h-faq__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-weight: 800; font-size: 0.95rem; color: var(--h-blue); }
.h-faq__more svg { width: 16px; height: 16px; }

.h-cta { position: relative; overflow: hidden; padding: 110px 0; background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(47,92,255,0.35), transparent 60%), radial-gradient(ellipse 80% 60% at 85% 100%, rgba(47,92,255,0.18), transparent 60%), var(--h-navy); text-align: center; }
.h-cta__field { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1.5px); background-size: 26px 26px; opacity: 0.18; pointer-events: none; }
.h-cta__wrap { position: relative; max-width: 720px; }
.h-cta__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #cdd6ff; font-size: 0.82rem; font-weight: 700; }
.h-cta__badge svg { width: 14px; height: 14px; color: var(--h-blue); }
.h-cta__title { margin-top: 22px; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.h-cta__subtext { margin-top: 16px; font-size: 1.05rem; color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 560px; margin-left: auto; margin-right: auto; }
.h-cta__actions { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.h-cta__fineprint { margin-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.45); }

.h-footer { background: var(--h-tint-blue); border-top: 1px solid var(--h-border); padding-top: 72px; }
.h-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.h-footer__brand p { margin-top: 16px; font-size: 0.88rem; color: var(--h-ink-soft); line-height: 1.6; max-width: 260px; }
.h-footer__brand address { font-style: normal; margin-top: 10px; font-size: 0.88rem; color: var(--h-ink-soft); line-height: 1.6; }
.h-footer__brand a[href^="mailto"] { display: inline-block; margin-top: 10px; font-size: 0.88rem; font-weight: 700; color: var(--h-blue); }
.h-footer__heading { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--h-ink); margin-bottom: 16px; }
.h-footer__col { display: flex; flex-direction: column; gap: 12px; }
.h-footer__col a { font-size: 0.9rem; color: var(--h-ink-soft); font-weight: 600; }
.h-footer__col a:hover { color: var(--h-ink); }
.h-footer__bottom { border-top: 1px solid var(--h-border); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.h-footer__bottom p { font-size: 0.85rem; color: var(--h-ink-soft); }
.h-footer__bottom a { font-weight: 700; color: var(--h-ink-soft); }
.h-footer__bottom a:hover { color: var(--h-ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .h-feature__inner { grid-template-columns: 1fr; gap: 40px; }
  .h-feature--rev .h-feature__visual { order: 0; }
  .h-feature__text, .h-feature__desc, .h-sub, .h-checklist { max-width: none; }
  .h-platform__inner { grid-template-columns: 1fr; }
  .h-platform__desc { max-width: none; }
  .h-platform__diagram { max-width: 440px; }
  .h-platform__pill { --radius: 154px; }
  .h-suite__grid { grid-template-columns: repeat(2, 1fr); }
  .h-diff__grid { grid-template-columns: repeat(2, 1fr); }
  .h-diff__item:nth-child(2) { border-right: none; }
  .h-diff__item:nth-child(3), .h-diff__item:nth-child(4) { border-top: 1px solid var(--h-border); }
  .h-why-card--half, .h-why-card--third, .h-why-card--full { grid-column: span 6; }
  .h-fineprint__grid { grid-template-columns: 1fr; }
  .h-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .h-navbar__links { display: none; }
  .h-link-muted { display: none; }
  .h-navbar__inner { height: 64px; }

  .h-hero { padding: 56px 0 0; }
  .h-hero__title { font-size: 2.1rem; }
  .h-hero__subtitle { font-size: 1rem; }
  .h-hero__actions { flex-direction: column; align-items: stretch; }
  .h-hero__actions .h-btn { width: 100%; }
  .h-hero__trust { gap: 10px 16px; }
  .h-hero__trust-divider { display: none; }
  .h-mockup { margin-top: 40px; }
  .h-mockup__chip { position: static; margin: 0 0 16px; transform: none; display: inline-flex; }
  .h-mockup__side { display: none; }
  .h-mockup__cursor { display: none; }
  .h-mockup__stats { grid-template-columns: repeat(2, 1fr); }
  .h-mockup__main { padding: 20px; }
  .h-pillarbar { padding: 32px 0; }
  .h-pillarbar__row { gap: 20px 24px; }
  .h-pillarbar__divider { display: none; }
  .h-pillarbar__item { font-size: 0.9rem; }

  .h-feature { padding: 56px 20px; }
  .h-platform { padding: 56px 20px; }
  .h-invoice-doc { margin-top: 130px; width: 100%; }
  .h-invoice-doc__row { grid-template-columns: 2fr 0.5fr 0.8fr 0.9fr; font-size: 0.7rem; }
  .h-payment-methods { width: 100%; }
  .h-payment-card { position: static; width: 100%; min-width: 0; margin-top: 20px; }
  .h-mockup--payment { min-height: 0; }
  .h-finance-card__stats { gap: 20px; }
  .h-platform__diagram { max-width: 360px; }
  .h-platform__pill { --radius: 126px; padding: 7px 12px; font-size: 0.72rem; }
  .h-platform__center span { font-size: 0.6rem; }

  .h-card { max-width: 100%; }
  .h-board__cols { grid-template-columns: 1fr; }
  .h-proj__name { max-width: none; }

  .h-section { padding: 64px 0; }
  .h-cta { padding: 72px 0; }
  .h-suite__grid { grid-template-columns: 1fr; }
  .h-diff__grid { grid-template-columns: 1fr; }
  .h-diff__item { border-right: none !important; border-top: 1px solid var(--h-border); }
  .h-diff__item:first-child { border-top: none; }
  .h-why__grid { grid-template-columns: 1fr; }
  .h-why-card--half, .h-why-card--third, .h-why-card--full { grid-column: span 1; }
  .h-fineprint .h-checklist { grid-template-columns: 1fr; }
  .h-cta__actions { flex-direction: column; }
  .h-cta__actions .h-btn { width: 100%; }
  .h-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .h-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Hero mockup motion — entrance, chart growth, idle float/pulse,
   decorative cursor. All gated behind prefers-reduced-motion so
   anyone who asks the OS for less motion gets the static version
   with real final values (JS also skips the count-up in that case).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .h-phone__row { opacity: 0; transform: translateY(6px); }
  .h-mockup--hero.is-visible .h-phone__row { animation: h-row-in 0.45s cubic-bezier(.16,1,.3,1) forwards; }
  .h-mockup--hero.is-visible .h-phone__row:nth-of-type(2) { animation-delay: 1.15s; }
  .h-mockup--hero.is-visible .h-phone__row:nth-of-type(3) { animation-delay: 1.25s; }
  .h-mockup--hero.is-visible .h-phone__row:nth-of-type(4) { animation-delay: 1.35s; }
  .h-mockup__table tbody tr { opacity: 0; transform: translateY(6px); }
  .h-mockup--hero.is-visible .h-mockup__table tbody tr {
    animation: h-row-in 0.45s cubic-bezier(.16,1,.3,1) forwards;
  }
  .h-mockup--hero.is-visible .h-mockup__table tbody tr:nth-child(1) { animation-delay: .95s; }
  .h-mockup--hero.is-visible .h-mockup__table tbody tr:nth-child(2) { animation-delay: 1.03s; }
  .h-mockup--hero.is-visible .h-mockup__table tbody tr:nth-child(3) { animation-delay: 1.11s; }
  .h-mockup--hero.is-visible .h-mockup__table tbody tr:nth-child(4) { animation-delay: 1.19s; }

  .h-mockup__chip { opacity: 0; }
  .h-mockup--hero.is-visible .h-mockup__chip {
    animation: h-chip-in .6s cubic-bezier(.16,1,.3,1) forwards,
               h-float 5s ease-in-out .65s infinite;
  }
  .h-phone { opacity: 0; }
  .h-mockup--hero.is-visible .h-phone {
    animation: h-phone-in .7s .2s cubic-bezier(.16,1,.3,1) forwards,
               h-float 6s ease-in-out .9s infinite;
  }


  .h-mockup--hero.is-visible .h-mockup__cursor {
    animation: h-cursor-in .4s 1.5s ease-out forwards,
               h-cursor-move 7s 1.9s ease-in-out infinite;
  }
}

@keyframes h-bar-grow { to { transform: scaleY(1); } }
@keyframes h-row-in { to { opacity: 1; transform: translateY(0); } }
@keyframes h-chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes h-phone-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes h-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes h-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes h-cursor-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes h-cursor-move {
  0%, 10%   { transform: translate(0, 0); }
  28%, 36%  { transform: translate(178px, 4px); }
  54%, 62%  { transform: translate(178px, 150px); }
  80%, 90%  { transform: translate(-90px, 190px); }
  100%      { transform: translate(0, 0); }
}

/* ============================================================
   "One platform" diagram — pills revolve around the center node.
   Each pill starts at its own --angle and sweeps a full 360deg;
   the trailing counter-rotate keeps each label upright while it
   travels the circle. Gated behind prefers-reduced-motion — anyone
   who asks for less motion gets the same layout, frozen at each
   pill's starting angle. Pauses on hover so a label can be read.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .h-platform__pill {
    animation: h-orbit 32s linear infinite;
  }
  .h-platform__diagram:hover .h-platform__pill {
    animation-play-state: paused;
  }
}

@keyframes h-orbit {
  from {
    transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg)) translate(var(--radius)) rotate(calc(-1 * (var(--angle) + 360deg)));
  }
}

/* ---------- Navbar: anchors clear the sticky bar, hamburger below 1040px ---------- */
#services, #how-it-works { scroll-margin-top: 90px; }
.h-navbar__toggle { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--h-border); border-radius: 12px; cursor: pointer; }
.h-navbar__toggle span { width: 18px; height: 2px; background: var(--h-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.h-navbar.is-open .h-navbar__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h-navbar.is-open .h-navbar__toggle span:nth-child(2) { opacity: 0; }
.h-navbar.is-open .h-navbar__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.h-navbar__mobile-only { display: none; }
@media (max-width: 1040px) {
  .h-navbar__toggle { display: flex; }
  .h-link-muted { display: none; }
  .h-navbar__actions { margin-left: auto; }
  .h-navbar__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    background: #fff;
    border-bottom: 1px solid var(--h-border);
    box-shadow: 0 24px 40px -24px rgba(11,15,25,0.25);
  }
  .h-navbar.is-open .h-navbar__links { display: flex; }
  .h-navbar__links a { padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--h-border); }
  .h-navbar__links a:last-child { border-bottom: none; }
  .h-navbar__mobile-only { display: block; }
}


/* ============================================================
   Gradient polish — richer washes, gradient CTAs and accent text.
   Later rules deliberately override the flat colours defined above.
   ============================================================ */
.h-feature, .h-platform, .h-section { overflow-x: clip; }

.h-announce { background: linear-gradient(90deg, #0b1220, #172766 50%, #0b1220); }
.h-hero {
  background:
    radial-gradient(55% 45% at 12% 0%, rgba(124,92,255,0.20), transparent 62%),
    radial-gradient(45% 40% at 92% 8%, rgba(47,92,255,0.18), transparent 62%),
    linear-gradient(160deg, #eef2ff 0%, #f6f3ff 55%, #eef2ff 100%);
}
.h-hero__title-accent {
  background: linear-gradient(90deg, #2f5cff 0%, #7c5cff 60%, #c04bff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.h-eyebrow {
  background: linear-gradient(90deg, #2f5cff, #7c5cff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content;
}
.h-eyebrow--center { margin-left: auto; margin-right: auto; }

.h-btn--primary { background: linear-gradient(135deg, #4a78ff 0%, #2f5cff 45%, #6a4dff 100%); box-shadow: 0 12px 26px -12px rgba(47,92,255,0.7); }
.h-btn--primary:hover { background: linear-gradient(135deg, #3a68f0 0%, #1f3fd6 45%, #5b3df5 100%); }
.h-btn--dark { background: linear-gradient(135deg, #0b0f19, #1b2760); }

.h-pillarbar { background: linear-gradient(90deg, #e6edff, #f3efff 50%, #e6edff); }
.h-feature--tint-blue, .h-feature--soft, .h-feature--bg { background: linear-gradient(160deg, #e6edff 0%, #f7f4ff 100%); }
.h-feature--tint-green { background: linear-gradient(160deg, #e2faee 0%, #eef6ff 100%); }
.h-feature--tint-amber { background: linear-gradient(160deg, #fff2e0 0%, #fff0f6 100%); }
.h-feature--tint-purple { background: linear-gradient(160deg, #efeaff 0%, #e7f0ff 100%); }
.h-feature--tint-teal { background: linear-gradient(160deg, #e0fafd 0%, #eef1ff 100%); }
.h-feature--tint-rose { background: linear-gradient(160deg, #ffeaf3 0%, #f4eeff 100%); }
.h-platform { background: linear-gradient(160deg, #f1eeff 0%, #e6efff 100%); }
.h-section.h-suite { background: linear-gradient(160deg, #e6edff 0%, #f6f3ff 100%); }
.h-section.h-diff { background: linear-gradient(160deg, #e0fafd 0%, #eef1ff 100%); }
.h-section.h-why { background: linear-gradient(160deg, #f1eeff 0%, #e8f0ff 100%); }
.h-section.h-fineprint { background: linear-gradient(160deg, #e2faee 0%, #eef6ff 100%); }
.h-section.h-faq { background: linear-gradient(160deg, #fff3e2 0%, #fff0f6 100%); }
.h-footer { background: linear-gradient(180deg, #eef2ff 0%, #e2e9ff 100%); }

.h-cta {
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(47,92,255,0.42), transparent 60%),
    radial-gradient(ellipse 55% 70% at 8% 100%, rgba(124,92,255,0.30), transparent 60%),
    radial-gradient(ellipse 80% 60% at 92% 100%, rgba(34,184,207,0.16), transparent 60%),
    var(--h-navy);
}

.h-icon-box { background: linear-gradient(135deg, #5b86ff, #2f5cff); }
.h-diff__item:nth-child(4n+2) .h-icon-box { background: linear-gradient(135deg, #a58bff, #7c5cff); }
.h-diff__item:nth-child(4n+3) .h-icon-box { background: linear-gradient(135deg, #35c4d9, #0e8fa0); }
.h-diff__item:nth-child(4n+4) .h-icon-box { background: linear-gradient(135deg, #3fd18e, #16a34a); }
.h-icon-box--sm { background: var(--h-bg); }
.h-icon-box--dark { background: rgba(255,255,255,0.08); }

.h-suite-card { --suite-c2: #7c96ff; }
.h-suite-card::before { background: linear-gradient(90deg, var(--suite-c), var(--suite-c2)); }
.h-suite-card:nth-child(2) { --suite-c2: #34d399; }
.h-suite-card:nth-child(3) { --suite-c2: #f59e0b; }
.h-suite-card:nth-child(4) { --suite-c2: #c084fc; }

.h-avatar { background: linear-gradient(135deg, #5b86ff, #7c5cff); }
.h-invoice-chip__icon--active { background: linear-gradient(135deg, #5b86ff, #2f5cff); }
.h-mockup--invoicing { background: linear-gradient(160deg, #0b1220 0%, #16225a 100%); }
.h-payment-card { background: linear-gradient(160deg, #0b1220 0%, #16225a 100%); }
.h-fineprint__side { background: radial-gradient(circle at 25% 15%, #1d2c78, #0b1220 70%); }

/* ============================================================
   Mobile polish (phones)
   ============================================================ */
@media (max-width: 720px) {
  .h-navbar__inner { gap: 10px; }
  .h-navbar__actions { gap: 10px; }
  .h-navbar__actions .h-btn { padding: 9px 16px; font-size: 0.82rem; }
  .h-navbar__toggle { width: 40px; height: 40px; }
  .h-navbar__links { padding: 6px 20px 14px; }

  .h-hero { padding: 40px 0 0; }
  .h-hero__title { font-size: 2rem; line-height: 1.14; }
  .h-hero__subtitle { margin-top: 18px; font-size: 0.98rem; }
  .h-hero__actions { margin-top: 26px; }
  .h-hero__trust { margin-top: 22px; gap: 8px 14px; }
  .h-hero__trust-item { font-size: 0.82rem; }

  .h-mockup__body { min-height: 0; }
  .h-mockup__main { min-width: 0; padding: 16px; }
  .h-mockup__greeting { font-size: 1.05rem; margin-bottom: 14px; }
  .h-mockup__stats { gap: 10px; margin-bottom: 16px; }
  .h-mockup__stat { padding: 12px; min-width: 0; }
  .h-mockup__stat strong { font-size: 1.05rem; }
  .h-mockup__panel { overflow: hidden; }
  .h-mockup__table th, .h-mockup__table td { padding: 8px 8px; white-space: nowrap; }
  .h-mockup__table th:nth-child(2), .h-mockup__table td:nth-child(2) { display: none; }
  .h-mockup__bar { padding: 12px 14px; }
  .h-mockup__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .h-h2 { font-size: 1.7rem; line-height: 1.2; }
  .h-lede { font-size: 0.98rem; }
  .h-feature, .h-platform { padding-left: 16px; padding-right: 16px; }
  .h-suite-card, .h-why-card { padding: 22px; }
  .h-btn { min-height: 46px; }
  .h-cta__wrap { padding: 36px 22px; }
  .h-footer { text-align: left; }
}
@media (max-width: 720px) {
  .h-feature__desc { margin-bottom: 22px; }
  .h-checklist { margin-top: 22px; gap: 20px; }
  .h-fineprint__grid > * { min-width: 0; }
  .h-fineprint__main, .h-fineprint__side { padding: 26px 22px; }
  .h-fineprint { overflow-x: clip; }
}
.h-footer__bottom { padding-left: 24px; padding-right: 24px; }
@media (max-width: 720px) {
  .h-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .h-footer__inner > :first-child { grid-column: 1 / -1; }
  .h-footer__bottom { padding: 18px 20px; }
  .h-footer__bottom p { overflow-wrap: anywhere; }
}

/* Hero text: balanced lines, no orphaned last word, subtitle centred with room to breathe */
.h-hero__title { max-width: 900px; text-wrap: balance; }
.h-hero__subtitle { margin-top: 28px; max-width: 640px; text-align: center; text-wrap: balance; }
.h-hero__actions { margin-top: 36px; }
.h-hero__trust { margin-top: 32px; }
@media (max-width: 720px) {
  .h-hero__subtitle { margin-top: 20px; }
}
/* `.h-scope h1/p { margin: 0 }` outranks the single-class hero rules, so centring must be restated here */
.h-scope .h-hero__title, .h-scope .h-hero__subtitle { margin-left: auto; margin-right: auto; }
.h-scope .h-announce p { margin-left: auto; margin-right: auto; }
.h-scope .h-hero__subtitle { margin-top: 28px; }
@media (max-width: 720px) { .h-scope .h-hero__subtitle { margin-top: 20px; } }
@media (max-width: 720px) { .h-navbar__actions .h-btn { min-height: 0; } }