/* Hanseprozess start page (teaser hub) – builds on style.css + ki.css, no ticker */
.lp--hub .nav, .lp--hub .progress { top: 0; }
.lp--hub .lp-hero { padding-top: clamp(118px, 13vw, 168px); }
.lp--hub section[id] { scroll-margin-top: 84px; }
.lp--hub .lp-hero__title em { color: var(--accent); }

/* hero: centred, short */
.hb-hero { text-align: center; }
.hb-hero .lp-hero__lead { margin-left: auto; margin-right: auto; max-width: 680px; }
.hb-hero .lp-hero__cta { justify-content: center; }
.hb-hero .eyebrow { justify-content: center; }

/* the three segment tiles */
.hb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hb-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); }
.hb-tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 30px 60px -30px rgba(255, 34, 97, .35); }
.hb-tile__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 34, 97, .1); color: var(--accent); }
.hb-tile__ic svg { width: 28px; height: 28px; }
.hb-tile__badge { position: absolute; top: 22px; right: 22px; padding: 4px 10px; border-radius: 99px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.hb-tile h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.hb-tile__sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.hb-pains { display: grid; gap: 8px; margin-top: 2px; }
.hb-pains li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.hb-pains li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.hb-tile__go { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--accent); }
.hb-tile__go .arr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; transition: transform .25s var(--ease); }
.hb-tile:hover .hb-tile__go .arr { transform: translateX(4px); }
.hb-tile__soon { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* focus tile (property management) */
.hb-tile--focus { background: var(--ink); border-color: transparent; }
.hb-tile--focus h3 { color: #fff; }
.hb-tile--focus .hb-tile__sub, .hb-tile--focus .hb-pains li { color: #D9D5CC; }
.hb-tile--focus .hb-tile__ic { background: rgba(255, 34, 97, .2); color: var(--accent-2); }
.hb-tile--focus .hb-tile__go { border-color: rgba(255, 255, 255, .12); color: var(--accent-2); }

/* short about */
.hb-about { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hb-about img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 24px; box-shadow: var(--shadow); }
.hb-about .h2 em { color: var(--accent); }
.hb-about .lead { margin-top: 16px; }
.hb-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hb-facts span { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.hb-facts b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--accent); }

@media (max-width: 960px) {
  .hb-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hb-about { grid-template-columns: 1fr; }
  .hb-about img { max-width: 320px; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .lp--hub .lp-hero { padding-top: 96px; }
  .hb-tile { padding: 20px; border-radius: 22px; }
  .hb-tile__badge { top: 18px; right: 18px; }
  .hb-about img { max-width: none; border-radius: 20px; }
}