/* Shared page styles for inner pages (about, services, contact, etc.) */
.page-hero { padding: 120px 0 64px; position: relative; overflow:hidden; }
.page-hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 80% 20%, rgba(217,70,239,0.16), transparent 50%);
  z-index: -1;
}
.page-hero h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; }
.page-hero .lead { max-width: 44ch; margin-top: 28px; font-size: 19px; }

/* Breadcrumb */
.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-3); margin-bottom: 24px;
}
.crumbs a { color: var(--purple-300); }
.crumbs a:hover { color: var(--purple-200); }
.crumbs .sep { color: var(--line-strong); }

/* Service detail layout */
.svc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; padding-bottom: 48px; }
.svc-layout h2 { font-size: 36px; margin-top: 48px; margin-bottom: 20px; }
.svc-layout h3 { font-size: 22px; margin-top: 32px; margin-bottom: 12px; }
.svc-layout p, .svc-layout li { font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.svc-layout ul { padding-left: 20px; }
.svc-layout li { margin-bottom: 8px; }
.svc-layout li::marker { color: var(--purple-300); }

.svc-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.svc-aside .panel {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 24px;
  background: linear-gradient(180deg, rgba(168,85,247,0.04), transparent);
}
.svc-aside .panel h4 {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--fg-3); margin-bottom: 16px;
}
.svc-aside .panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.svc-aside .panel li { font-size: 13px; color: var(--fg-2); display:flex; gap:8px; }
.svc-aside .panel li::before { content: "✓"; color: var(--purple-300); font-family: var(--font-mono); }

.svc-aside .stack {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.svc-aside .stack span {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 4px; color: var(--purple-200);
}

/* Other services */
.next-svcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.next-svc {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 20px;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.next-svc:hover { border-color: var(--purple-400); background: rgba(168,85,247,0.04); }
.next-svc .n { font-family: var(--font-mono); font-size: 11px; color: var(--purple-300); letter-spacing: 0.14em; }
.next-svc h4 { font-size: 15px; margin-top: 8px; margin-bottom: 6px; font-weight: 600; }
.next-svc p { font-size: 12px; margin: 0; color: var(--fg-3); }

@media (max-width: 1040px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-aside { position: static; }
  .next-svcs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .next-svcs { grid-template-columns: 1fr; } }