/* Home page */
.home { background: #f5f7fb; margin-top: -1rem; min-height: calc(100vh - 120px); }

.home-banner {
    background: linear-gradient(135deg, #0a2342 0%, #0d4f8b 60%, #009ef7 100%);
    color: #fff;
    padding: 2.5rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}
.home-banner::after {
    content: "";
    position: absolute;
    right: -120px; top: -120px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.home-banner-tall { padding: 4rem 0 5rem; }
.home-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; opacity: .8; margin-bottom: .35rem; }
.home-heading { font-weight: 700; margin-bottom: .35rem; }
.home-sub { opacity: .85; font-size: 1.05rem; max-width: 40rem; }
.home-cta { color: #0a2342; font-weight: 600; }
.home-shot { max-width: 100%; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }

.home-body { margin-top: -2rem; position: relative; padding-bottom: 2rem; }

.stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: 0 4px 16px rgba(10,35,66,.06);
    height: 100%;
}
.stat-card.stat-warn { box-shadow: 0 0 0 2px #ffc107 inset, 0 4px 16px rgba(10,35,66,.06); }
.stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0;
}
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #0a2342; }
.stat-pct { font-size: .85rem; font-weight: 500; color: #6c757d; margin-left: .25rem; }
.stat-label { font-size: .8rem; color: #6c757d; }

.home-panel {
    background: #fff;
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 4px 16px rgba(10,35,66,.06);
}
.home-panel.feature h5 { color: #0a2342; font-weight: 600; }
.home-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.home-panel-head h5 { color: #0a2342; font-weight: 600; }

.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid #f0f2f5; }
.recent-list li:first-child { border-top: 0; }
.recent-name { font-weight: 500; color: #0a2342; flex: 1; }
.recent-time { font-size: .85rem; color: #6c757d; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-on { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,.2); }
.dot-off { background: #ced4da; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.quick-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    padding: .9rem .5rem;
    border-radius: 12px;
    background: #f5f7fb;
    color: #0a2342;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: background .15s, transform .15s;
}
.quick-tile i { font-size: 1.4rem; color: #009ef7; }
.quick-tile:hover { background: #e6f4fe; transform: translateY(-2px); color: #0a2342; }

.home-steps {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    margin-top: 2rem;
}

.home-showcase { margin-top: 3rem; }
.home-showcase h3 { color: #0a2342; font-weight: 700; }
.showcase-shot {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #e3e8ef;
    box-shadow: 0 12px 36px rgba(10,35,66,.12);
}
.showcase-phone { width: auto; max-width: 100%; max-height: 560px; border-radius: 28px; }
.showcase-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.showcase-list li { display: flex; gap: .6rem; align-items: flex-start; color: #0a2342; margin-bottom: .5rem; }
.showcase-list i { color: #28a745; margin-top: .15rem; }

.service-mock {
    background: #fff; border-radius: 14px; border: 1px solid #e3e8ef;
    box-shadow: 0 12px 36px rgba(10,35,66,.12); overflow: hidden;
}
.service-mock-head { padding: .85rem 1.15rem; font-weight: 600; color: #0a2342; border-bottom: 1px solid #f0f2f5; }
.service-row { display: grid; grid-template-columns: 90px 1fr auto; gap: .75rem; align-items: center; padding: .8rem 1.15rem; border-bottom: 1px solid #f0f2f5; font-size: .95rem; }
.service-row:last-child { border-bottom: 0; }
.service-row .badge { justify-self: start; }
.step { display: flex; gap: .75rem; align-items: center; background: #fff; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 4px 16px rgba(10,35,66,.06); }
.step span { width: 34px; height: 34px; border-radius: 50%; background: #009ef7; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step strong { display: block; color: #0a2342; }
.step small { color: #6c757d; }

@media (max-width: 767px) {
    .home-steps { grid-template-columns: 1fr 1fr; }
    .home-banner { padding: 2rem 0 3rem; }
}