:root {
  --solutions-bg: #090a0c;
  --solutions-panel: #111318;
  --solutions-line: rgba(255, 255, 255, .09);
  --solutions-ink: #f7f7f8;
  --solutions-muted: #a8adb7;
  --solutions-accent: #ff5528;
  --solutions-accent-soft: rgba(255, 85, 40, .13);
  --solutions-good: #68d391;
  --solutions-built: #7dd3fc;
  --solutions-arch: #d8b4fe;
}

body.solutions-page {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 85, 40, .15), transparent 31rem),
    radial-gradient(circle at 92% 12%, rgba(124, 58, 237, .12), transparent 28rem),
    var(--solutions-bg);
  color: var(--solutions-ink);
}

.solutions-page .site-header {
  background: rgba(9, 10, 12, .84);
  border-bottom: 1px solid var(--solutions-line);
  backdrop-filter: blur(18px);
}

.solutions-page .brand-copy strong,
.solutions-page .site-nav a,
.solutions-page .brand-copy small { color: var(--solutions-ink); }
.solutions-page .brand-copy small { opacity: .6; }
.solutions-page .menu-toggle span { background: var(--solutions-ink); }
.solutions-page .nav-cta { background: var(--solutions-ink); color: #090a0c !important; }

.solution-shell { width: min(calc(100% - 40px), 1260px); margin-inline: auto; }
.solution-hero { padding: 112px 0 78px; position: relative; overflow: hidden; }
.solution-hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -190px;
  top: -230px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255,255,255,.018), 0 0 0 144px rgba(255,255,255,.01);
  pointer-events: none;
}
.solution-hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .58fr); gap: 64px; align-items: end; }
.solution-kicker { display: inline-flex; align-items: center; gap: 10px; color: #ff9a7f; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.solution-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--solutions-accent); box-shadow: 0 0 0 7px rgba(255,85,40,.11); }
.solution-hero h1 { margin: 22px 0 26px; max-width: 940px; font-size: clamp(3.2rem, 7vw, 7rem); line-height: .94; letter-spacing: -.073em; color: white; }
.solution-hero h1 span { display: inline; color: var(--solutions-accent); }
.solution-lead { max-width: 780px; color: #c8ccd3; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.72; }
.solution-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.solution-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 49px; padding: 0 18px; border: 1px solid var(--solutions-line); border-radius: 14px; font-weight: 760; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.solution-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.solution-button.primary { background: var(--solutions-accent); color: white; border-color: transparent; }
.solution-button.secondary { background: rgba(255,255,255,.045); color: white; }

.solution-contract { border: 1px solid var(--solutions-line); border-radius: 24px; padding: 23px; background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); box-shadow: 0 28px 72px rgba(0,0,0,.24); }
.solution-contract > span { color: #828895; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.solution-contract dl { margin: 18px 0 0; display: grid; gap: 14px; }
.solution-contract dl > div { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--solutions-line); }
.solution-contract dt { color: #7f8691; font-size: 12px; }
.solution-contract dd { margin: 0; color: #f3f4f6; font-size: 13px; font-weight: 650; }

.solution-section { padding: 76px 0; }
.solution-section.soft { border-block: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.021); }
.solution-section-head { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 50px; align-items: end; margin-bottom: 34px; }
.solution-section h2 { margin: 10px 0 0; max-width: 760px; color: white; font-size: clamp(2.1rem, 4.7vw, 4.5rem); letter-spacing: -.06em; }
.solution-section-head p { margin: 0; color: var(--solutions-muted); line-height: 1.75; }

.flagship-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flagship-card { min-height: 310px; display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--solutions-line); border-radius: 23px; background: linear-gradient(155deg, rgba(255,255,255,.058), rgba(255,255,255,.018)); }
.flagship-card .flag-index { color: #707784; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.flagship-card h3 { margin: 32px 0 12px; color: white; font-size: 1.75rem; letter-spacing: -.045em; }
.flagship-card p { margin: 0; color: #aeb4be; line-height: 1.65; font-size: 14px; }
.flagship-card footer { margin-top: auto; padding-top: 24px; display: flex; gap: 9px; align-items: center; justify-content: space-between; }
.flagship-card a { color: #ffad98; font-size: 13px; font-weight: 760; text-decoration: none; }
.flagship-card small { color: #727986; }

.maturity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.maturity-card { border: 1px solid var(--solutions-line); border-radius: 20px; padding: 22px; background: rgba(255,255,255,.027); }
.maturity-card strong { display: block; margin: 10px 0 8px; color: #fff; font-size: 18px; }
.maturity-card p { margin: 0; color: var(--solutions-muted); font-size: 13px; line-height: 1.6; }
.maturity { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--solutions-line); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.maturity::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.maturity.delivery-evidence { color: var(--solutions-good); background: rgba(104,211,145,.07); }
.maturity.working-demo { color: var(--solutions-built); background: rgba(125,211,252,.07); }
.maturity.architecture-ready { color: var(--solutions-arch); background: rgba(216,180,254,.07); }

.solution-toolbar { position: sticky; top: 78px; z-index: 10; display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 20px; padding: 11px; border: 1px solid var(--solutions-line); border-radius: 18px; background: rgba(11,13,16,.91); backdrop-filter: blur(18px); }
.solution-search { min-height: 44px; width: 100%; padding: 0 14px; border: 1px solid var(--solutions-line); border-radius: 12px; outline: 0; background: #0d0f12; color: white; }
.solution-search:focus { border-color: rgba(255,85,40,.6); box-shadow: 0 0 0 3px rgba(255,85,40,.1); }
.solution-filters { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.solution-filter { min-height: 38px; padding: 0 12px; border: 1px solid var(--solutions-line); border-radius: 999px; background: rgba(255,255,255,.035); color: #bec3cc; cursor: pointer; font-size: 12px; font-weight: 750; }
.solution-filter:hover, .solution-filter.active { background: var(--solutions-accent-soft); border-color: rgba(255,85,40,.35); color: #ffd9cf; }
.solution-count { color: #818895; font-size: 12px; margin: 0 0 14px; }
.solution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.solution-card { position: relative; min-height: 410px; overflow: hidden; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--solutions-line); border-radius: 24px; background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); transition: transform .2s ease, border-color .2s ease; }
.solution-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--solutions-accent), transparent 74%); opacity: .72; }
.solution-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.17); }
.solution-card[hidden] { display: none; }
.solution-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.solution-card-category { color: #858c97; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.solution-card h3 { margin: 0; color: white; font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.solution-card .strapline { margin: 8px 0 14px; color: #ff9a7f; font-size: 13px; font-weight: 760; }
.solution-card .summary { margin: 0; color: #b3b8c1; line-height: 1.66; }
.solution-card .problem { margin: 20px 0 0; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.035); color: #d7dae0; font-size: 13px; line-height: 1.55; }
.solution-card .problem strong { display: block; color: white; margin-bottom: 4px; }
.solution-card details { margin-top: auto; padding-top: 22px; }
.solution-card summary { list-style: none; display: flex; justify-content: space-between; align-items: center; color: white; cursor: pointer; font-size: 13px; font-weight: 760; }
.solution-card summary::-webkit-details-marker { display: none; }
.solution-card summary::after { content: "+"; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--solutions-line); border-radius: 9px; color: #a8aeb8; }
.solution-card details[open] summary::after { content: "–"; }
.solution-detail { display: grid; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--solutions-line); }
.solution-detail h4 { margin: 0 0 6px; color: white; font-size: 12px; }
.solution-detail ul, .solution-detail p { margin: 0; color: #abb1bb; font-size: 12.5px; line-height: 1.6; }
.solution-detail ul { padding-left: 18px; }
.solution-demo-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: #ffad98; font-size: 12px; font-weight: 800; text-decoration: none; }
.solution-empty { grid-column: 1 / -1; padding: 40px; text-align: center; border: 1px dashed var(--solutions-line); border-radius: 20px; color: var(--solutions-muted); }

.solution-cta { display: grid; grid-template-columns: minmax(0, 1.15fr) auto; gap: 36px; align-items: center; padding: 30px; border: 1px solid rgba(255,85,40,.28); border-radius: 26px; background: linear-gradient(135deg, rgba(255,85,40,.13), rgba(255,255,255,.025)); }
.solution-cta h2 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 3.6rem); }
.solution-cta p { margin: 0; max-width: 720px; color: #bdc2cb; }

.solutions-page .site-footer { background: #070809; border-top: 1px solid var(--solutions-line); color: white; }
.solutions-page .site-footer p, .solutions-page .site-footer a, .solutions-page .site-footer h4 { color: #aeb4be; }
.solutions-page .site-footer h3 { color: white; }

@media (max-width: 1000px) {
  .flagship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .solution-hero-grid, .solution-section-head, .solution-cta { grid-template-columns: 1fr; }
  .solution-contract { max-width: 520px; }
  .solution-toolbar { position: static; grid-template-columns: 1fr; }
  .solution-filters { justify-content: flex-start; }
  .solution-grid, .maturity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .solution-shell { width: min(calc(100% - 28px), 1260px); }
  .solution-hero { padding: 66px 0 50px; }
  .solution-hero h1 { font-size: clamp(2.8rem, 15vw, 5rem); }
  .solution-section { padding: 56px 0; }
  .flagship-grid { grid-template-columns: 1fr; }
  .solution-card { min-height: 0; padding: 20px; }
  .solution-card-head { flex-direction: column; }
  .solution-actions { display: grid; }
  .solution-button { width: 100%; }
  .solution-cta { padding: 22px; }
}