/* JoyTech V4 service pages */
.service-page { padding-top: var(--nav-h); }
.service-page .section-head { max-width: 820px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 44px; margin-bottom: clamp(28px, 4vw, 52px); color: #bfdbfe; font-size: 14px; font-weight: 700; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: #e0f2fe; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: #fff; }
.service-hero { position: relative; overflow: hidden; padding: clamp(42px, 6vw, 76px) 0 clamp(72px, 8vw, 108px); color: #fff; background: radial-gradient(circle at 84% 15%, rgba(14,165,233,.24), transparent 32%), linear-gradient(135deg, #061426 0%, #0a2540 58%, #0b5f91 145%); }
.service-hero::after { content: ''; position: absolute; left: -12%; bottom: -42%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: rgba(14,165,233,.10); filter: blur(44px); pointer-events: none; }
.service-hero .container { position: relative; z-index: 1; }
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: clamp(38px, 6vw, 78px); align-items: center; }
.service-hero-copy { min-width: 0; }
.service-kicker { margin: 0 0 12px; color: #7dd3fc; font-size: 13px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.service-hero h1 { max-width: 760px; margin: 0 0 20px; color: #fff; font-size: clamp(42px, 5.2vw, 68px); line-height: 1.12; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; }
.service-hero h1 [data-title-unit] { display: inline-block; white-space: nowrap; }
html[lang="en"] .service-hero h1 [data-title-unit] { display: inline; white-space: normal; }
.service-hero-lead { max-width: 720px; margin: 0; color: #dbeafe; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.72; }
.service-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.service-hero-media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 11; border: 1px solid rgba(191,219,254,.28); border-radius: 28px; background: #0a2540; box-shadow: 0 28px 72px rgba(2,6,23,.38); }
.service-hero-media::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: inherit; pointer-events: none; }
.service-hero-media picture, .service-hero-media img { width: 100%; height: 100%; }
.service-hero-media img { object-fit: cover; }
.service-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.service-tag-list li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border: 1px solid rgba(191,219,254,.28); border-radius: 999px; background: rgba(255,255,255,.08); color: #e0f2fe; font-size: 14px; font-weight: 750; }
.service-overview-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.service-overview-card { grid-column: span 2; min-height: 312px; display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.service-overview-card:nth-child(4) { grid-column: 2 / span 2; }
.service-overview-card:nth-child(5) { grid-column: 4 / span 2; }
.service-card-index { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; background: var(--blue-100); color: var(--blue-600); font-size: 13px; font-weight: 900; }
.service-overview-card h2 { margin: 2px 0 0; font-size: 24px; }
.service-overview-card p { margin: 0; color: var(--slate-600); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; color: var(--blue-600); font-weight: 850; }
.text-link::after { content: '→'; margin-left: 8px; transition: transform .18s ease; }
.text-link:hover::after, .text-link:focus-visible::after { transform: translateX(3px); }
.service-overview-card .text-link { margin-top: auto; }
.service-strength-grid, .technical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-strength-card, .technical-card, .needed-card { border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 24px rgba(10,37,64,.055); }
.service-strength-card { min-height: 242px; padding: 26px; }
.service-strength-card > span { display: block; margin-bottom: 28px; color: var(--blue-600); font-weight: 900; }
.service-strength-card h3, .technical-card h3, .needed-card h3 { font-size: 21px; }
.service-strength-card p, .technical-card p, .needed-card p { margin: 0; color: var(--slate-600); }
.service-process-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.service-process-step { min-height: 230px; padding: 22px; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: #fff; box-shadow: 0 6px 18px rgba(10,37,64,.045); }
.service-process-step > span { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 999px; background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 900; }
.service-process-step h3 { margin-bottom: 8px; font-size: 19px; }
.service-process-step p { margin: 0; color: var(--slate-600); font-size: 15px; }
.service-contact-cta { padding: clamp(68px, 8vw, 108px) 0; color: #fff; background: linear-gradient(135deg, #061426, #0a2540 70%, #0b5f91 140%); }
.service-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.service-contact-inner h2 { max-width: 760px; margin-bottom: 14px; color: #fff; }
.service-contact-inner p:not(.service-kicker) { max-width: 720px; margin: 0; color: #dbeafe; font-size: 18px; }
.service-contact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.needed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.needed-card { min-height: 210px; padding: 28px; }
.scope-layout, .faq-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 6vw, 82px); align-items: start; }
.scope-intro, .faq-intro { position: sticky; top: calc(var(--nav-h) + 30px); }
.scope-list { display: grid; gap: 14px; }
.scope-list > article { display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 24px; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: #fff; box-shadow: 0 6px 18px rgba(10,37,64,.04); }
.scope-list > article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; background: var(--blue-100); color: var(--blue-600); font-size: 13px; font-weight: 900; }
.scope-list h3 { margin-bottom: 8px; font-size: 20px; }
.scope-list p { margin: 0; color: var(--slate-600); }
.technical-card { min-height: 232px; padding: 28px; }
.service-portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service-portfolio-card { overflow: hidden; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.service-portfolio-card picture { display: block; aspect-ratio: 16 / 10; background: radial-gradient(circle at 80% 12%, rgba(14,165,233,.18), transparent 34%), #061426; }
.service-portfolio-card img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.service-portfolio-card > div { padding: 24px; }
.service-portfolio-card h3 { font-size: 21px; }
.service-portfolio-card p { margin: 0; color: var(--slate-600); }
.service-faq-list { display: grid; gap: 14px; }
.service-faq-item { overflow: hidden; border: 1px solid var(--slate-200); border-radius: var(--radius-md); background: #fff; box-shadow: 0 6px 18px rgba(10,37,64,.04); }
.service-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 18px 22px; color: var(--navy-900); font-size: 18px; font-weight: 850; cursor: pointer; list-style: none; }
.service-faq-item > summary::-webkit-details-marker { display: none; }
.service-faq-item > summary::after { content: '+'; flex: 0 0 auto; color: var(--blue-600); font-size: 26px; }
.service-faq-item[open] > summary::after { content: '−'; }
.service-faq-item > p { margin: 0; padding: 0 22px 22px; color: var(--slate-600); }
.service-related { padding: 44px 0; border-top: 1px solid var(--slate-200); background: #fff; }
.service-related .container { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.service-related h2 { margin: 0; font-size: 24px; }
.related-link-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.related-link-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--slate-200); border-radius: 999px; color: var(--navy-900); font-size: 14px; font-weight: 750; }
.related-link-list a:hover, .related-link-list a:focus-visible { border-color: #93c5fd; background: var(--blue-100); }
.desktop-nav [aria-current="page"], .mobile-drawer [aria-current="page"] { color: var(--blue-600); }
@media (max-width: 1100px) {
  .service-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); }
  .service-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-overview-card, .service-overview-card:nth-child(4), .service-overview-card:nth-child(5) { grid-column: auto; }
  .service-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .service-hero-grid, .scope-layout, .faq-layout { grid-template-columns: 1fr; }
  .service-hero-media { max-width: 760px; aspect-ratio: 16 / 9; }
  .scope-intro, .faq-intro { position: static; }
  .service-strength-grid, .technical-grid, .service-portfolio-grid { grid-template-columns: 1fr; }
  .service-contact-inner { grid-template-columns: 1fr; }
  .service-contact-actions { justify-content: flex-start; }
  .service-related .container { align-items: flex-start; flex-direction: column; }
  .related-link-list { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .service-hero { padding-top: 28px; padding-bottom: 68px; }
  .breadcrumb { margin-bottom: 22px; }
  .service-hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .service-hero-lead { font-size: 18px; }
  .service-hero-actions .btn, .service-contact-actions .btn { width: 100%; }
  .service-hero-media { border-radius: 20px; }
  .service-overview-grid, .needed-grid, .service-process-grid { grid-template-columns: 1fr; }
  .service-overview-card, .service-strength-card, .needed-card, .technical-card, .service-process-step { min-height: auto; }
  .scope-list > article { grid-template-columns: 42px 1fr; padding: 20px; }
  .service-portfolio-card > div { padding: 22px; }
  .service-faq-item > summary { font-size: 17px; }
  .service-contact-actions { width: 100%; }
}