.solution-page {
    --solution-accent: #7c3aed;
    --solution-cyan: #0891b2;
    background: var(--body-bg, #070b14);
    color: var(--text-primary, #f8fafc);
}

.solution-main {
    padding-block-start: calc(var(--public-header-height, 72px) + env(safe-area-inset-top));
}

.solution-shell {
    inline-size: min(1120px, calc(100% - 2rem));
    margin-inline: auto;
}

.solution-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 1.25rem 0;
    color: var(--text-secondary, #a7b2c5);
    font-size: 0.875rem;
}

.solution-breadcrumb a { color: inherit; }

.solution-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 8vw, 7rem);
    overflow: clip;
}

.solution-hero::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    block-size: 34rem;
    content: '';
    background:
        radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--solution-accent) 24%, transparent), transparent 38%),
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--solution-cyan) 18%, transparent), transparent 34%);
    pointer-events: none;
}

.solution-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.75fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.solution-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;
    color: #a5b4fc;
    font-size: 0.8125rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.solution-hero h1 {
    max-inline-size: 18ch;
    margin: 0;
    font-size: clamp(2.35rem, 6vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.solution-lead {
    max-inline-size: 64ch;
    margin-block: 1.5rem 0;
    color: var(--text-secondary, #cbd5e1);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
}

.solution-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 1.75rem;
}

.solution-button {
    min-block-size: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid color-mix(in srgb, #a5b4fc 30%, transparent);
    border-radius: 999px;
    color: #fff;
    font-weight: 750;
    text-decoration: none;
}

.solution-button-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    box-shadow: 0 14px 34px rgba(99, 102, 241, 0.3);
}

.solution-button-secondary { background: color-mix(in srgb, var(--card-bg, #111827) 84%, transparent); }

.solution-summary-card {
    min-inline-size: 0;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid color-mix(in srgb, #a5b4fc 20%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--card-bg, #111827) 86%, transparent);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
}

.solution-summary-icon {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    display: grid;
    place-items: center;
    margin-block-end: 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--solution-accent) 20%, transparent);
    color: #c4b5fd;
    font-size: 1.5rem;
}

.solution-summary-card ul {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-summary-card li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.65rem;
    color: var(--text-secondary, #d1d5db);
}

.solution-summary-card li i { margin-block-start: 0.2rem; color: #34d399; }

.solution-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.solution-section-muted { background: color-mix(in srgb, var(--card-bg, #111827) 42%, transparent); }

.solution-heading { max-inline-size: 720px; margin-block-end: 2rem; }
.solution-heading h2 { margin: 0 0 0.8rem; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.035em; }
.solution-heading p { margin: 0; color: var(--text-secondary, #cbd5e1); line-height: 1.7; }

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

.solution-card,
.solution-step,
.solution-requirements,
.solution-faq-item,
.solution-related-card {
    min-inline-size: 0;
    border: 1px solid color-mix(in srgb, var(--border-color, #64748b) 32%, transparent);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--card-bg, #111827) 88%, transparent);
}

.solution-card,
.solution-step { padding: 1.4rem; }
.solution-card h3,
.solution-step h3 { margin: 0 0 0.65rem; font-size: 1.05rem; }
.solution-card p,
.solution-step p { margin: 0; color: var(--text-secondary, #cbd5e1); line-height: 1.65; }

.solution-step-number {
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    margin-block-end: 1rem;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    font-weight: 800;
}

.solution-requirements { padding: clamp(1.25rem, 4vw, 2rem); }
.solution-requirements ul { display: grid; gap: 0.8rem; margin: 0; padding-inline-start: 1.25rem; }
.solution-requirements li { color: var(--text-secondary, #cbd5e1); line-height: 1.6; }

.solution-faq { display: grid; gap: 0.75rem; }
.solution-faq-item { padding: 0; overflow: clip; }
.solution-faq-item summary { min-block-size: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; font-weight: 750; }
.solution-faq-item p { margin: 0; padding: 0 1.2rem 1.2rem; color: var(--text-secondary, #cbd5e1); line-height: 1.65; }

.solution-related-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
}
.solution-related-card h2 { margin: 0 0 0.45rem; }
.solution-related-card p { margin: 0; color: var(--text-secondary, #cbd5e1); }

html[data-theme='light'] .solution-page,
body.light-theme.solution-page {
    --body-bg: #f8fafc;
    --card-bg: #fff;
    --text-primary: #111827;
    --text-secondary: #475569;
    --border-color: #94a3b8;
}

html[data-theme='light'] .solution-kicker,
body.light-theme.solution-page .solution-kicker { color: #4f46e5; }

html[data-theme='light'] .solution-button-secondary,
body.light-theme.solution-page .solution-button-secondary { color: #312e81; }

@media (max-width: 52rem) {
    .solution-hero-grid { grid-template-columns: 1fr; }
    .solution-summary-card { max-inline-size: 38rem; }
}

@media (max-width: 42rem) {
    .solution-shell { inline-size: min(100% - 1.25rem, 1120px); }
    .solution-card-grid,
    .solution-step-grid { grid-template-columns: 1fr; }
    .solution-actions { display: grid; }
    .solution-button { inline-size: 100%; }
    .solution-related-card { grid-template-columns: 1fr; }
    .solution-related-card .solution-button { justify-self: stretch; }
}

@media (prefers-reduced-motion: no-preference) {
    .solution-button { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
    .solution-button:hover { transform: translateY(-2px); }
}