/* ============================================================
   Software landing pages (hospital, school, dealer, attendance, POS)
   Markup: resources/views/frontend/software_landing.blade.php
   Mobile-first.
   ============================================================ */

.sl {
    --sl-navy: #061636;
    --sl-navy-2: #0a2a73;
    --sl-blue: #1d6bf3;
    --sl-orange: #ff6a00;
    --sl-orange-d: #e65f00;
    --sl-ink: #0f1f3d;
    --sl-muted: #5d6c86;
    --sl-line: #e4ebf6;
    --sl-soft: #f5f8fe;
    color: var(--sl-ink);
}
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.sl h1, .sl h2, .sl h3, .sl p, .sl ul { margin: 0; padding: 0; }
.sl ul { list-style: none; }

/* ── Hero ─────────────────────────────────────────────────── */
.sl-hero {
    padding: 56px 0 64px;
    color: #fff;
    background: linear-gradient(135deg, var(--sl-navy) 0%, var(--sl-navy-2) 100%);
}
.sl-kicker {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 13px;
    font-weight: 700;
    color: #e1ecff;
}
.sl-title { margin-top: 18px; font-size: clamp(30px, 6vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sl-intro { margin-top: 18px; max-width: 680px; font-size: 16px; line-height: 1.7; color: #c7d8f6; }

.sl-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.sl-actions--center { justify-content: center; }
.sl-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 24px; border-radius: 10px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    border: 1px solid transparent; transition: background .2s, transform .2s;
}
.sl-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sl-btn--orange { background: var(--sl-orange); color: #fff; }
.sl-btn--orange:hover { background: var(--sl-orange-d); color: #fff; }
.sl-btn--glass { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.sl-btn--glass:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.sl-facts { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: #dbe7ff; }
.sl-facts i { margin-right: 6px; color: #ffb020; }

/* ── Sections ─────────────────────────────────────────────── */
.sl-section { padding: 52px 0; }
.sl-section--soft { background: var(--sl-soft); }
.sl-heading { margin-bottom: 26px; font-size: clamp(22px, 4vw, 30px); font-weight: 800; color: var(--sl-ink); }

.sl-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.sl-card { padding: 24px; border: 1px solid var(--sl-line); border-radius: 14px; background: #fff; box-shadow: 0 6px 22px rgba(15, 31, 61, .05); }
.sl-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; font-size: 19px;
    color: var(--sl-blue); background: #eaf2ff;
}
.sl-card h3 { margin-top: 14px; font-size: 18px; font-weight: 700; }
.sl-card p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--sl-muted); }

.sl-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sl-list li { padding: 14px 18px; border: 1px solid var(--sl-line); border-radius: 12px; background: #fff; font-weight: 600; }
.sl-list i { margin-right: 8px; color: #16a34a; }

/* ── FAQ ──────────────────────────────────────────────────── */
.sl-faq { max-width: 820px; }
.sl-faq__item { margin-bottom: 12px; border: 1px solid var(--sl-line); border-radius: 12px; background: #fff; }
.sl-faq__item summary { padding: 16px 20px; cursor: pointer; font-weight: 700; }
.sl-faq__item p { padding: 0 20px 18px; line-height: 1.7; color: var(--sl-muted); }

/* ── Call to action ───────────────────────────────────────── */
.sl-cta { padding: 54px 0; text-align: center; color: #fff; background: linear-gradient(135deg, var(--sl-navy-2) 0%, var(--sl-blue) 100%); }
.sl-cta h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 800; color: #fff; }
.sl-cta p { margin-top: 10px; color: #dbe7ff; }

/* ── More software ────────────────────────────────────────── */
.sl-more { display: flex; flex-wrap: wrap; gap: 12px; }
.sl-more a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border: 1px solid var(--sl-line); border-radius: 999px;
    font-weight: 600; color: var(--sl-ink); text-decoration: none; background: #fff;
}
.sl-more a:hover { border-color: var(--sl-blue); color: var(--sl-blue); }
.sl-more i { color: var(--sl-blue); }

/* ── Larger screens ───────────────────────────────────────── */
@media (min-width: 640px) {
    .sl-grid { grid-template-columns: repeat(2, 1fr); }
    .sl-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .sl-hero { padding: 84px 0 92px; }
    .sl-grid { grid-template-columns: repeat(3, 1fr); }
    .sl-list { grid-template-columns: repeat(4, 1fr); }
}