/* ============================================================
   Homepage — light, airy, blue-primary layout.

   Everything here is illustration/CSS only: the hero "app preview" is
   real markup rather than a screenshot, so it stays sharp at any DPI,
   theme-aware, and never goes stale when the product changes.
   ============================================================ */

.hm {
    --hm-blue: #2563EB;
    --hm-blue-dark: #1D4ED8;
    --hm-blue-50: #EFF6FF;
    --hm-blue-100: #DBEAFE;
    --hm-ink: #0F172A;
    --hm-ink-2: #475569;
    --hm-ink-3: #94A3B8;
    --hm-line: #E5E7EB;
    --hm-surface: #F8FAFC;
    --hm-radius: 14px;
}

.hm-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---- Section scaffolding ---- */
.hm-section { padding: 88px 0; }
.hm-section.is-tint { background: var(--hm-surface); }
.hm-head { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.hm-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hm-blue);
    margin-bottom: 12px;
}
.hm-h2 {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--hm-ink);
    margin: 0 0 12px;
}
.hm-sub { font-size: 16px; line-height: 1.6; color: var(--hm-ink-2); margin: 0; }

/* ---- Hero ---- */
.hm-hero { padding: 72px 0 88px; position: relative; overflow: hidden; }
.hm-hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 56px;
    align-items: center;
}
.hm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--hm-blue-50);
    color: var(--hm-blue);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 26px;
}
.hm-h1 {
    font-size: 56px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--hm-ink);
    margin: 0 0 20px;
}
.hm-h1 .accent { color: var(--hm-blue); display: block; }
.hm-lead { font-size: 17px; line-height: 1.65; color: var(--hm-ink-2); margin: 0 0 30px; max-width: 440px; }

.hm-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.hm-btn-primary { background: var(--hm-blue); color: #fff; }
.hm-btn-primary:hover { background: var(--hm-blue-dark); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgb(37 99 235 / .45); }
.hm-btn-ghost { background: #fff; color: var(--hm-ink); border-color: var(--hm-line); }
.hm-btn-ghost:hover { border-color: var(--hm-blue); color: var(--hm-blue); }

.hm-assure { display: flex; gap: 24px; flex-wrap: wrap; }
.hm-assure span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--hm-ink-2); }
.hm-assure svg { color: var(--hm-blue); flex-shrink: 0; }

/* ---- Hero app preview (pure markup, not a screenshot) ---- */
.hm-preview { position: relative; }
.hm-preview::before {
    content: "";
    position: absolute;
    right: -8%;
    top: -12%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--hm-blue-50);
    z-index: 0;
}
/* Dotted field behind the card, the way product marketing pages ground a mock */
.hm-preview::after {
    content: "";
    position: absolute;
    left: -6%;
    bottom: -6%;
    width: 190px;
    height: 150px;
    background-image: radial-gradient(var(--hm-line) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    z-index: 0;
}
.hm-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px -22px rgb(15 23 42 / .22);
    padding: 16px;
}
.hm-card-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.hm-card-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--hm-line);
    border-radius: 10px;
    color: var(--hm-ink-3);
    font-size: 13.5px;
    background: #fff;
}
.hm-card-bell {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--hm-line);
    border-radius: 10px;
    color: var(--hm-ink-2);
}
.hm-card-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 700; color: var(--hm-ink); margin-bottom: 10px;
}
.hm-card-label a { font-size: 12.5px; font-weight: 600; color: var(--hm-blue); text-decoration: none; }

.hm-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 10px; border-radius: 12px;
    transition: background .16s ease;
}
.hm-row + .hm-row { margin-top: 2px; }
.hm-row:hover { background: var(--hm-surface); }
.hm-row-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--hm-blue-50);
    color: var(--hm-blue);
}
.hm-row-main { flex: 1; min-width: 0; }
.hm-row-name { font-size: 13.5px; font-weight: 700; color: var(--hm-ink); }
.hm-row-meta { font-size: 11.5px; color: var(--hm-ink-3); margin-top: 1px; }
.hm-row-chev { color: var(--hm-ink-3); flex-shrink: 0; }

/* Stacked initial-avatars — no photography needed */
.hm-avatars { display: flex; }
.hm-avatars span {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700; color: #fff;
    border: 2px solid #fff;
}
.hm-avatars span + span { margin-left: -9px; }

/* ---- Service tiles ---- */
.hm-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hm-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    padding: 28px 14px;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    text-decoration: none;
    text-align: center;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hm-tile:hover {
    border-color: var(--hm-blue);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgb(15 23 42 / .18);
}
.hm-tile-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--hm-blue-50);
    color: var(--hm-blue);
    transition: background .18s ease;
}
.hm-tile:hover .hm-tile-icon { background: var(--hm-blue-100); }
.hm-tile-name { font-size: 14px; font-weight: 700; color: var(--hm-ink); }
.hm-tile-meta { font-size: 12px; color: var(--hm-ink-3); margin-top: -6px; }

.hm-more { text-align: center; margin-top: 36px; }

/* ---- Steps with connector ---- */
.hm-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Dashed rule sits behind the circles and stops short of the outer two */
.hm-steps::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12.5%;
    right: 12.5%;
    border-top: 2px dashed var(--hm-line);
    z-index: 0;
}
.hm-step { position: relative; z-index: 1; text-align: center; }
.hm-step-dot {
    width: 68px; height: 68px; margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--hm-line);
    color: var(--hm-blue);
    box-shadow: 0 4px 14px -6px rgb(15 23 42 / .14);
}
.hm-step-title { font-size: 14.5px; font-weight: 700; color: var(--hm-ink); margin-bottom: 5px; }
.hm-step-desc { font-size: 13px; line-height: 1.55; color: var(--hm-ink-2); max-width: 190px; margin: 0 auto; }

/* ---- Trust cards ---- */
.hm-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-trust-card {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    padding: 22px 20px;
}
.hm-trust-icon {
    width: 40px; height: 40px; margin-bottom: 14px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--hm-blue-50);
    color: var(--hm-blue);
}
.hm-trust-title { font-size: 14.5px; font-weight: 700; color: var(--hm-ink); margin-bottom: 6px; }
.hm-trust-desc { font-size: 13px; line-height: 1.6; color: var(--hm-ink-2); margin: 0; }

/* ---- Pricing ---- */
.hm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.hm-plan {
    position: relative;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    padding: 28px 24px;
}
.hm-plan.is-featured {
    border-color: var(--hm-blue);
    box-shadow: 0 18px 44px -20px rgb(37 99 235 / .38);
}
.hm-plan-tag {
    position: absolute; top: 0; right: 0;
    padding: 5px 12px;
    background: var(--hm-blue);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 0 16px 0 12px;
}
.hm-plan-name { font-size: 17px; font-weight: 700; color: var(--hm-ink); }
.hm-plan-for { font-size: 13px; color: var(--hm-ink-3); margin-top: 3px; }
.hm-plan-price { display: flex; align-items: baseline; gap: 3px; margin: 20px 0 22px; }
.hm-plan-cur { font-size: 20px; font-weight: 600; color: var(--hm-ink-2); }
.hm-plan-amt { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--hm-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.hm-plan-per { font-size: 13.5px; color: var(--hm-ink-3); }
.hm-plan-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.hm-plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--hm-ink-2); }
.hm-plan-list svg { color: var(--hm-blue); flex-shrink: 0; margin-top: 2px; }

/* ---- Stats band ---- */
.hm-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    padding: 28px 20px;
}
.hm-stat { text-align: center; position: relative; }
.hm-stat + .hm-stat::before {
    content: "";
    position: absolute; left: 0; top: 12%; bottom: 12%;
    border-left: 1px solid var(--hm-line);
}
.hm-stat-v {
    font-size: 26px; font-weight: 800; color: var(--hm-ink);
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.hm-stat-l { font-size: 12.5px; color: var(--hm-ink-3); margin-top: 4px; }

/* ---- Closing CTA ---- */
.hm-final {
    display: flex; align-items: center; gap: 20px;
    background: var(--hm-blue-50);
    border: 1px solid var(--hm-blue-100);
    border-radius: 16px;
    padding: 26px 28px;
}
.hm-final-icon {
    width: 54px; height: 54px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--hm-blue);
}
.hm-final-copy { flex: 1; min-width: 0; }
.hm-final-title { font-size: 19px; font-weight: 800; color: var(--hm-ink); }
.hm-final-desc { font-size: 14px; color: var(--hm-ink-2); margin-top: 3px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .hm-tiles { grid-template-columns: repeat(3, 1fr); }
    .hm-trust { grid-template-columns: repeat(2, 1fr); }
    .hm-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .hm-h1 { font-size: 44px; }
    .hm-lead { max-width: none; }
    .hm-preview::before, .hm-preview::after { display: none; }
}
@media (max-width: 860px) {
    .hm-plans { grid-template-columns: 1fr; }
    /* Connector implies a horizontal flow that no longer exists once stacked */
    .hm-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
    .hm-steps::before { display: none; }
    .hm-stats { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
    .hm-stat + .hm-stat::before { display: none; }
}
@media (max-width: 620px) {
    .hm-section { padding: 60px 0; }
    .hm-hero { padding: 44px 0 60px; }
    .hm-h1 { font-size: 34px; }
    .hm-h2 { font-size: 27px; }
    .hm-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hm-trust { grid-template-columns: 1fr; }
    .hm-cta .hm-btn { flex: 1 1 100%; }
    .hm-final { flex-direction: column; align-items: flex-start; }
}