:root {
    --solution-gold: #F5A623;
    --solution-navy: #1C2235;
    --solution-text: #223047;
    --solution-light: #617188;
    --solution-surface: rgba(255, 255, 255, 0.94);
    --solution-border: rgba(28, 34, 53, 0.12);
    --solution-background: #f7f8fb;
    --solution-flow: #0f766e;
    --solution-guard: #b45309;
    --solution-memory: #2563eb;
}

* {
    box-sizing: border-box;
}

body.solution-page-body,
body.services-page-body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: var(--solution-text);
    line-height: 1.6;
    background:
        radial-gradient(circle at top left, rgba(245, 166, 35, 0.12), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(37, 99, 235, 0.08), transparent 26%),
        var(--solution-background);
}

.solution-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.solution-hero {
    padding: 6rem 0 3rem;
}

.solution-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--solution-gold);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.solution-hero-grid,
.solution-dual-grid,
.solution-card-grid,
.solution-step-grid,
.solution-services-groups,
.solution-bundle-grid,
.solution-services-card-grid,
.solution-cta-panel {
    display: grid;
    gap: 1.35rem;
}

.solution-hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
    align-items: start;
}

.solution-hero h1 {
    margin: 0;
    color: var(--solution-navy);
    font-size: clamp(2.8rem, 5.8vw, 5rem);
    line-height: 0.97;
}

.solution-hero h1 span {
    display: block;
    color: var(--solution-gold);
}

.solution-hero p,
.solution-section-intro,
.solution-card p,
.solution-panel p,
.solution-step span,
.solution-services-card p,
.solution-bundle-card p {
    color: var(--solution-light);
}

.solution-hero p {
    max-width: 760px;
    margin: 1.2rem 0 0;
    font-size: 1.08rem;
}

.solution-chip-row,
.solution-cta-actions,
.solution-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.solution-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--solution-border);
    color: var(--solution-navy);
    font-size: 0.92rem;
    font-weight: 700;
}

.solution-panel,
.solution-card,
.solution-step,
.solution-services-card,
.solution-bundle-card,
.solution-visual-panel,
.solution-cta-panel {
    background: var(--solution-surface);
    border: 1px solid var(--solution-border);
    border-radius: 1.25rem;
    box-shadow: 0 18px 34px rgba(28, 34, 53, 0.06);
}

.solution-panel {
    padding: 1.6rem;
}

.solution-panel h2,
.solution-card h3,
.solution-bundle-card h3,
.solution-services-card h3,
.solution-visual-panel h2,
.solution-cta-copy h2 {
    margin: 0 0 0.75rem;
    color: var(--solution-navy);
}

.solution-panel ul,
.solution-card ul,
.solution-services-card ul,
.solution-related-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solution-panel li,
.solution-card li,
.solution-services-card li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.6rem;
    color: var(--solution-text);
}

.solution-panel li::before,
.solution-card li::before,
.solution-services-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--solution-gold);
}

.solution-section {
    padding: 1rem 0 4rem;
}

.solution-section-head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.solution-section-head h2 {
    margin: 0;
    max-width: 560px;
    color: var(--solution-navy);
    font-size: 2.2rem;
    line-height: 1.06;
}

.solution-section-intro {
    max-width: 680px;
}

.solution-card-grid,
.solution-services-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-card,
.solution-services-card,
.solution-bundle-card {
    padding: 1.5rem;
}

.solution-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.solution-badge.flow {
    background: rgba(15, 118, 110, 0.12);
    color: var(--solution-flow);
}

.solution-badge.guard {
    background: rgba(180, 83, 9, 0.12);
    color: var(--solution-guard);
}

.solution-badge.memory {
    background: rgba(37, 99, 235, 0.12);
    color: var(--solution-memory);
}

.solution-visual-panel {
    padding: 1.8rem;
}

.solution-step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.4rem;
}

.solution-step {
    position: relative;
    padding: 3.9rem 1.2rem 1.2rem;
}

.solution-step-number {
    position: absolute;
    top: 1rem;
    left: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.14);
    color: var(--solution-gold);
    font-weight: 800;
}

.solution-step strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--solution-navy);
}

.solution-dual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-link,
.solution-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.solution-link {
    color: var(--solution-flow);
}

.solution-button {
    padding: 0.95rem 1.35rem;
}

.solution-button.primary {
    background: var(--solution-gold);
    color: var(--solution-navy);
}

.solution-button.secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.solution-link:hover,
.solution-button:hover {
    transform: translateY(-1px);
}

.solution-cta-panel {
    grid-template-columns: minmax(0, 1.1fr) auto;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(28, 34, 53, 0.99), rgba(41, 52, 83, 0.98));
    color: #ffffff;
}

.solution-cta-copy p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.solution-services-groups {
    margin-top: 1.8rem;
}

.solution-group-head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 1rem;
}

.solution-group-head h2 {
    margin: 0;
    color: var(--solution-navy);
    font-size: 1.8rem;
}

.solution-group-head p {
    max-width: 640px;
    color: var(--solution-light);
}

.solution-bundle-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.solution-bundle-card h3,
.solution-services-card h3 {
    font-size: 1.2rem;
}

.solution-services-band {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.08), rgba(28, 34, 53, 0.08));
    border-top: 1px solid rgba(28, 34, 53, 0.08);
    border-bottom: 1px solid rgba(28, 34, 53, 0.08);
}

.solution-inline-note {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(28, 34, 53, 0.08);
    color: var(--solution-light);
}

@media (max-width: 1024px) {
    .solution-hero-grid,
    .solution-card-grid,
    .solution-services-card-grid,
    .solution-dual-grid,
    .solution-step-grid,
    .solution-bundle-grid,
    .solution-cta-panel {
        grid-template-columns: 1fr;
    }

    .solution-section-head,
    .solution-group-head {
        display: block;
    }
}