/* OpenClaw Pro — Service Page Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  background: #000; color: #f5f5f7;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.container { max-width: 780px; margin: 0 auto; padding: 120px 24px 80px; }
a.back { display: inline-block; color: #2997ff; text-decoration: none; font-size: 14px; margin-bottom: 40px; }
a.back:hover { text-decoration: underline; }
.hero { margin-bottom: 64px; }
.hero h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 16px; line-height: 1.1; }
.hero .subtitle { font-size: 20px; color: #86868b; line-height: 1.5; max-width: 640px; }
.hero .subtitle strong { color: #f5f5f7; font-weight: 600; }
h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 56px 0 16px; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 12px; color: #f5f5f7; }
p, li { font-size: 15px; color: #86868b; margin-bottom: 12px; }
ul, ol { padding-left: 20px; margin-bottom: 16px; }
li { margin-bottom: 8px; }
a { color: #2997ff; text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: #f5f5f7; font-weight: 600; }

/* Shared components */
.highlight-box {
  background: #111; border: 1px solid #222; border-radius: 12px;
  padding: 32px; margin: 32px 0;
}
.highlight-box h3 { margin-top: 0; }
.cta-section {
  margin-top: 72px; text-align: center;
  background: #111; border: 1px solid #222; border-radius: 16px; padding: 56px 32px;
}
.cta-section h2 { margin-top: 0; font-size: 32px; }
.cta-section p { font-size: 17px; max-width: 520px; margin: 0 auto 24px; }
.cta-button {
  display: inline-block; background: #2997ff; color: #fff; padding: 14px 32px;
  border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background 0.2s;
}
.cta-button:hover { background: #0077d4; text-decoration: none; }
.cross-links { margin-top: 48px; padding-top: 32px; border-top: 1px solid #222; }
.cross-links h3 { font-size: 15px; color: #86868b; font-weight: 500; margin-bottom: 12px; margin-top: 0; }
.cross-links ul { list-style: none; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.cross-links li { margin: 0; }
.cross-links a { font-size: 15px; font-weight: 500; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; float: right; font-size: 13px; margin-top: 2px; }
.lang-switch a { color: #6e6e73; text-decoration: none; padding: 3px 6px; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.lang-switch a:hover { color: #f5f5f7; }
.lang-switch a.active { color: #f5f5f7; background: rgba(255,255,255,0.08); font-weight: 500; }
.lang-switch span { color: #6e6e73; font-size: 10px; }

/* Implementation page */
.phases { display: grid; gap: 24px; margin: 32px 0; }
.phase { background: #111; border: 1px solid #222; border-radius: 12px; padding: 28px; }
.phase-number { font-size: 13px; font-weight: 600; color: #2997ff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.phase h3 { margin-top: 0; }
.faq { margin-top: 56px; }
.faq-item { border-bottom: 1px solid #222; padding: 24px 0; }
.faq-item h3 { margin: 0 0 8px; font-size: 17px; }
.faq-item p { margin-bottom: 0; }

/* Setup page */
.step-grid { display: grid; gap: 24px; margin: 32px 0; }
.step { background: #111; border: 1px solid #222; border-radius: 12px; padding: 28px; }
.step-number { font-size: 13px; font-weight: 600; color: #2997ff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.step h3 { margin-top: 0; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.req-card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 24px; }
.req-card h3 { margin-top: 0; font-size: 17px; }
.req-card p { margin-bottom: 0; }

/* Security page */
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.security-card { background: #111; border: 1px solid #222; border-radius: 12px; padding: 24px; }
.security-card h3 { margin-top: 0; font-size: 17px; }
.security-card p { margin-bottom: 0; }
.compliance-section { background: #111; border: 1px solid #222; border-radius: 12px; padding: 32px; margin: 32px 0; }
.compliance-section h3 { margin-top: 0; }

/* Maintenance page */
.sla-table { width: 100%; border-collapse: collapse; margin: 32px 0; }
.sla-table th, .sla-table td { text-align: left; padding: 16px; font-size: 15px; border-bottom: 1px solid #222; }
.sla-table th { color: #f5f5f7; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.sla-table td { color: #86868b; }
.sla-table tr:last-child td { border-bottom: none; }
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
.pillar { background: #111; border: 1px solid #222; border-radius: 12px; padding: 24px; }
.pillar h3 { margin-top: 0; font-size: 17px; }
.pillar p { margin-bottom: 0; }

/* Responsive */
@media (max-width: 600px) {
  .req-grid, .security-grid, .pillar-grid { grid-template-columns: 1fr; }
  .sla-table { font-size: 13px; }
  .sla-table th, .sla-table td { padding: 12px 8px; }
}