.hub-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 500px at 8% -10%, #d9f0ff 0%, rgba(217, 240, 255, 0) 68%),
        radial-gradient(980px 460px at 94% 0%, #dff5ec 0%, rgba(223, 245, 236, 0) 64%),
        #f3f6fb;
    color: #122033;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.hub-container {
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
}

.hub-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid #c9d7e8;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.hub-header__inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.hub-brand {
    color: #11263e;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.hub-nav {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.hub-nav a {
    color: #415570;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    text-decoration: none;
    font-size: 0.9rem;
}

.hub-nav a:hover {
    border-color: #cbd9eb;
    background: #edf4ff;
    color: #14314f;
}

.hub-hero {
    padding: 3.5rem 0 2.6rem;
}

.hub-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1rem;
    align-items: start;
}

.hub-kicker {
    margin: 0 0 0.65rem;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.78rem;
    font-weight: 700;
}

.hub-hero h1 {
    margin: 0 0 0.84rem;
    font-size: clamp(2rem, 4.8vw, 3.3rem);
    line-height: 1.1;
    max-width: 18ch;
    color: #0f2138;
}

.hub-hero p {
    margin: 0 0 0.8rem;
    color: #445973;
    max-width: 68ch;
}

.hub-hero__visual {
    margin: 0;
}

.hub-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid #c8d7ea;
    box-shadow: 0 18px 38px rgba(15, 30, 51, 0.12);
}

.hub-actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.hub-btn {
    border: 1px solid #c6d5e8;
    border-radius: 10px;
    padding: 0.52rem 0.75rem;
    text-decoration: none;
    color: #1c3552;
    background: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
}

.hub-btn:hover {
    background: #edf5ff;
}

.hub-btn--primary {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

.hub-btn--primary:hover {
    background: #0b5f59;
}

.hub-section {
    padding: 2.9rem 0;
}

.hub-section h2 {
    margin: 0 0 0.88rem;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.2;
    color: #10253e;
}

.hub-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.hub-service-card {
    background: #ffffff;
    border: 1px solid #ccd8ea;
    border-radius: 14px;
    padding: 0.9rem;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0.6rem;
}

.hub-service-card__badge {
    margin: 0;
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid #98d4bd;
    background: #e9f8f1;
    color: #0d5d4a;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
}

.hub-service-card__visual {
    margin: 0;
}

.hub-service-card__visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    border: 1px solid #cfdceb;
    background: #f7fbff;
}

.hub-service-card h3 {
    margin: 0;
    color: #122c48;
    font-size: 1.03rem;
}

.hub-service-card p {
    margin: 0;
    color: #4b6078;
}

.hub-service-card ul {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
    color: #2a415b;
}

.hub-service-card .hub-actions {
    margin-top: 0.22rem;
}

.hub-service-card .hub-btn {
    padding: 0.42rem 0.68rem;
    line-height: 1.12;
}

.hub-section--muted {
    border-top: 1px solid #d8e2ef;
    border-bottom: 1px solid #d8e2ef;
    background: #f7faff;
}

.hub-section--accent {
    border-top: 1px solid #cde0ef;
    border-bottom: 1px solid #cde0ef;
    background:
        radial-gradient(760px 260px at 0% 8%, rgba(15, 118, 110, 0.2), rgba(15, 118, 110, 0) 60%),
        radial-gradient(820px 280px at 100% 2%, rgba(13, 110, 185, 0.18), rgba(13, 110, 185, 0) 62%),
        #f7fbff;
}

.hub-ai-highlight {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 1rem;
    align-items: center;
}

.hub-ai-highlight h2 {
    margin: 0 0 0.65rem;
}

.hub-ai-highlight p {
    margin: 0 0 0.72rem;
    color: #3f5670;
}

.hub-ai-highlight ul {
    margin: 0 0 0.74rem;
    padding-left: 1.1rem;
    color: #24455f;
    display: grid;
    gap: 0.25rem;
}

.hub-ai-highlight__visual {
    margin: 0;
}

.hub-ai-highlight__visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    border: 1px solid #c8d7ea;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(14, 30, 52, 0.12);
}

.hub-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.hub-benefits article {
    border: 1px solid #ccd8ea;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.82rem;
}

.hub-benefits h3 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    color: #14314f;
}

.hub-benefits p {
    margin: 0;
    color: #4a6078;
}

.hub-request-id {
    margin: 0.9rem 0 0;
    color: #5c6f84;
    font-size: 0.82rem;
}

.hub-footer {
    border-top: 1px solid #cdd9ea;
    background: #ffffff;
}

.hub-footer__inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.hub-footer p {
    margin: 0;
    color: #4a5f78;
    font-weight: 700;
}

.hub-footer nav {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.hub-footer a {
    color: #2f4662;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
}

.hub-footer a:hover {
    background: #edf5ff;
}

@media (max-width: 1080px) {
    .hub-hero__grid,
    .hub-service-grid,
    .hub-benefits,
    .hub-ai-highlight {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hub-header {
        position: static;
    }

    .hub-header__inner,
    .hub-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem 0;
        min-height: 0;
    }

    .hub-hero {
        padding-top: 2.2rem;
    }
}