/* ============================================================
   Smart Hub Tech — Illustrations
   Brand-aligned SVG illustrations for all pages.
   Primary palette: #0a1628 · #1e3a5f · #2563eb · #06b6d4
   ============================================================ */

/* ── Shared base ─────────────────────────────────────────── */
.ill svg { display: block; }

/* ── Problem card icon (homepage) ────────────────────────── */
.problem-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 0.75rem;
    color: var(--primary-accent);
    opacity: 0.85;
}
.problem-card__icon svg {
    width: 100%;
    height: 100%;
}

/* ── Framework card icon (homepage) ──────────────────────── */
.framework-card__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    color: var(--accent-cyan);
}
.framework-card__icon svg {
    width: 100%;
    height: 100%;
}

/* ── Challenge card icon (service pages) ─────────────────── */
.challenge-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
    color: var(--primary-accent);
    opacity: 0.8;
}
.challenge-card__icon svg {
    width: 100%;
    height: 100%;
}

/* ── Service detail icon (service pages) ─────────────────── */
.service-detail__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--accent-cyan);
}
.service-detail__icon svg {
    width: 100%;
    height: 100%;
}

/* ── About intro illustration ────────────────────────────── */
.about-intro__illustration {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0a1628 100%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
    position: relative;
}
.about-intro__illustration svg {
    width: 100%;
    height: 100%;
}

/* ── Section illustration block (service pages) ──────────── */
.section-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2.5rem auto 0;
    max-width: 680px;
}
.section-visual svg {
    width: 100%;
    height: auto;
}

/* ── Contact page illustration ───────────────────────────── */
.contact-visual {
    margin-top: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(6,182,212,0.06) 100%);
    border-radius: 16px;
    border: 1px solid rgba(37,99,235,0.12);
    display: flex;
    justify-content: center;
}
.contact-visual svg {
    width: 100%;
    max-width: 260px;
    height: auto;
}