.custom-software {
  --service-accent: #087df0;
  --service-accent-soft: rgba(8, 125, 240, 0.13);
}

.custom-hero { min-height: 780px; display: flex; align-items: center; }
.custom-hero .service-hero-layout { grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); }
.custom-hero h1 { max-width: 900px; }

.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.capability-grid article { display: flex; min-height: 300px; padding: 32px; flex-direction: column; border: 1px solid #dce6ee; border-radius: 20px; background: var(--white); }
.capability-grid span, .learning-grid span { display: block; margin-bottom: 54px; color: var(--service-accent); font-size: .69rem; font-weight: 850; letter-spacing: .12em; }
.capability-grid h3, .learning-grid h3 { margin-bottom: 12px; font-size: 1.2rem; }
.capability-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.capability-grid a { display: inline-flex; width: max-content; margin-top: auto; padding-top: 24px; color: var(--navy-900); font-size: .75rem; font-weight: 800; }
.capability-grid a:hover { color: var(--blue); }

.experience-section { overflow: hidden; background: #fff; }
.experience-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.experience-intro h2 { max-width: 600px; }
.experience-intro > p:not(.service-eyebrow) { max-width: 590px; color: var(--muted); }
.experience-intro a:not(.text-case-link) { color: var(--blue); font-weight: 750; }
.text-case-link { display: inline-flex; margin-top: 15px; align-items: center; gap: 8px; color: var(--navy-900); font-weight: 800; }
.text-case-link span { color: var(--mint); font-size: 1.1rem; }

.experience-system { position: relative; display: grid; min-height: 580px; padding: 28px; grid-template-columns: repeat(2, 1fr); gap: 14px; border: 1px solid #d9e5ee; border-radius: 30px; background: linear-gradient(145deg, #f8fbfe, #edf6fb); box-shadow: 0 28px 75px rgba(5, 33, 61, .12); }
.experience-system::before { position: absolute; inset: 50% auto auto 50%; z-index: 0; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(8,125,240,.18), rgba(11,187,168,.07) 48%, transparent 72%); content: ""; transform: translate(-50%, -50%); }
.experience-system article, .system-core { position: relative; z-index: 1; border-radius: 18px; }
.experience-system article { display: flex; min-height: 210px; padding: 25px; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(8, 60, 101, .1); background: rgba(255,255,255,.9); }
.experience-system article small { margin-bottom: auto; color: var(--blue); font-size: .64rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.experience-system article strong { margin-bottom: 7px; color: var(--navy-900); font-size: 1rem; }
.experience-system article p { margin: 0; color: var(--muted); font-size: .78rem; }
.system-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 190px; height: 190px; padding: 25px; place-content: center; border: 8px solid #f4f9fc; border-radius: 50%; background: linear-gradient(145deg, var(--navy-950), var(--navy-700)); box-shadow: 0 18px 48px rgba(3,31,57,.28); color: #fff; text-align: center; transform: translate(-50%, -50%); }
.system-core span { margin-bottom: 10px; color: var(--mint); font-size: .62rem; font-weight: 900; letter-spacing: .18em; }
.system-core strong { font-size: .9rem; line-height: 1.35; }

.learning-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.learning-grid article { min-height: 315px; padding: 30px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.learning-grid span { color: var(--mint); }
.learning-grid p { margin: 0; color: #a8b8c8; font-size: .86rem; }

.project-process { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.project-process article { min-height: 290px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-process span { display: block; margin-bottom: 72px; color: var(--blue); font-size: .7rem; font-weight: 850; }
.project-process h3 { margin-bottom: 9px; }
.project-process p { margin: 0; color: var(--muted); font-size: .84rem; }

.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items: start; }
.faq-layout > div:first-child { position: sticky; top: 120px; }
.faq-layout > div:first-child > p:last-child { color: var(--muted); }
.faq-list { border-top: 1px solid #ccdbe6; }
.faq-list details { border-bottom: 1px solid #ccdbe6; }
.faq-list summary { position: relative; padding: 27px 46px 27px 0; color: var(--navy-900); font-weight: 750; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 23px; right: 4px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e8f3fb; color: var(--blue); content: "+"; font-size: 1.1rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 710px; margin: -5px 46px 27px 0; color: var(--muted); }

@media (max-width: 1040px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-grid { grid-template-columns: repeat(2, 1fr); }
  .project-process { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 920px) {
  .custom-hero { min-height: 0; }
  .custom-hero .service-hero-layout, .experience-layout, .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .experience-intro { max-width: 700px; }
  .faq-layout > div:first-child { position: static; }
}

@media (max-width: 580px) {
  .capability-grid, .learning-grid, .project-process { grid-template-columns: 1fr; }
  .capability-grid article, .learning-grid article, .project-process article { min-height: 225px; }
  .experience-system { min-height: 690px; padding: 15px; grid-template-columns: 1fr; }
  .experience-system article { min-height: 155px; padding: 20px; }
  .experience-system article:nth-of-type(2) { padding-bottom: 80px; }
  .experience-system article:nth-of-type(3) { padding-top: 80px; }
  .system-core { width: 150px; height: 150px; border-width: 6px; }
  .system-core strong { font-size: .78rem; }
}