.detail-nav { text-decoration:none; font-weight:750; }
.detail-hero { background:linear-gradient(135deg,#06172c,#0b315a); color:white; }
.detail-hero .section { padding-block:clamp(54px,8vw,104px); }
.detail-hero h1 { font-size:clamp(36px,6vw,76px); letter-spacing:-.06em; line-height:1.05; margin:0; }
.detail-hero p:not(.kicker) { font-size:clamp(17px,2vw,23px); max-width:650px; color:#d2e6ff; }
.detail-content { display:grid; grid-template-columns:1.65fr 1fr; gap:clamp(20px,6vw,76px); }
.section.detail-content h2 { font-size:clamp(21px,3vw,30px); margin:24px 0 10px; line-height:1.2; }
.detail-content p,.detail-content li { color:#41566f; }
.detail-content li + li { margin-top:10px; }
.detail-content aside { align-self:start; border:1px solid #dce5f0; background:#f4f7fb; border-radius:16px; padding:8px 23px 20px; }
.detail-content a,.detail-footer a { color:#1755b3; }
.detail-footer { display:flex; justify-content:space-between; gap:20px; }

html { scroll-padding-top: 96px; }
.hero {
  min-height: 590px;
  gap: clamp(20px, 5vw, 75px);
  padding-block: clamp(55px, 7vw, 100px);
  background: linear-gradient(115deg, #07182d 25%, #0b2342);
}
.hero-bg { background: radial-gradient(ellipse at 77% 50%, #2353a249, transparent 43%); }
.hero h1 { font-size: clamp(44px, 5.7vw, 83px); line-height: 1.03; }
.hero h1 span { background-image: linear-gradient(90deg, #84d6ff, #9eafff); }
.hero .lead { max-width: 490px; }
.hero-actions { margin-bottom: 0; }
.hero-visual { position: relative; width: min(100%, 420px); margin-inline: auto; }
.network-art { display: block; width: 100%; }
.brand-orbit-outer, .brand-orbit-inner { stroke: #849cdb; stroke-opacity: .25; }
.brand-orbit-sweep { stroke: #75ceff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 17 83; transform-origin: 210px 210px; }
.brand-orbit-violet { stroke: #b7a0ff; stroke-dasharray: 13 87; stroke-dashoffset: 43; }
.network-brand { position: absolute; width: 39%; inset: 30.5%; filter: drop-shadow(0 12px 26px #1b65d36b); }

#services .section-head { margin-bottom: 28px; gap: 22px; }
#services .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 36px; }
#services .service-grid article {
  display: grid;
  grid-template-columns: 35px minmax(0,1fr) 25px;
  align-items: start;
  gap: 12px;
  min-height: 0;
  padding: 21px 6px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: background-color .18s ease;
}
#services .service-grid article:hover { transform: none; background: #f5f8fd; }
#services .service-grid article::before { content: none; }
#services .service-grid h3 { margin: 0 0 4px; line-height: 1.3; }
#services .service-grid h3 a { position: static; color: inherit; font: inherit; }
#services .service-grid h3 a::after { content: ""; position: absolute; inset: 0; }
#services .service-grid article:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
#services .service-grid p { margin: 0; font-size: 15px; }
.service-index { color: var(--muted); font: 650 12px/2 ui-monospace,monospace; }
.service-arrow { color: #1755b3; line-height: 1.4; justify-self: end; }

@media (max-width: 950px) {
  .hero { grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .hero-visual { width: min(65vw, 290px); }
  #services .service-grid, .detail-content { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .detail-hero h1 { animation: clean-arrive .55s ease-out both; }
  .hero-visual { animation: clean-arrive .7s .1s ease-out both; }
  .brand-orbit-sweep { animation: brand-sweep 3.8s cubic-bezier(.15,.65,.3,1) both; }
  .brand-orbit-violet { animation-direction: reverse; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@keyframes clean-arrive {
  from { opacity: 0; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes brand-sweep {
  from { rotate: -200deg; }
  to { rotate: 0deg; }
}