.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: .88rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--line-strong); }
.crumbs a { color: var(--muted); transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.svc-hero {
position: relative; overflow: hidden; isolation: isolate;
padding: clamp(24px, 4vw, 40px) 0 clamp(52px, 7vw, 88px);
background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.svc-hero::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
inset-block-start: -220px; inset-inline-end: -200px; width: 640px; height: 640px;
background: radial-gradient(circle at center, color-mix(in srgb, var(--mint) 26%, transparent), transparent 62%);
filter: blur(20px); opacity: .75;
}
html[data-theme="dark"] .svc-hero::before { opacity: .4; }
.svc-hero-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
.svc-hero-title { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.svc-hero-title .accent { display: block; color: var(--accent-ink); }
.svc-hero-title--detail { font-size: clamp(1.85rem, 4vw, 2.85rem); }
.svc-hero-lead { margin-top: 18px; font-size: clamp(1.02rem, 1.6vw, 1.15rem); max-width: 36em; color: var(--ink-soft); }
.svc-hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn .ico { flex: none; }
.svc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.svc-stat {
display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px;
box-shadow: var(--shadow-sm);
}
.svc-stat dd { margin: 0; font-family: var(--font-en); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; color: var(--ink); }
.svc-stat dt { font-size: .88rem; line-height: 1.5; color: var(--muted); font-weight: 600; }
.svc-stat--accent { background: var(--graphite); border-color: var(--graphite); }
.svc-stat--accent dd { color: var(--mint); }
.svc-stat--accent dt { color: #C4D1C6; }
html[data-theme="dark"] .svc-stat--accent { background: var(--surface-2); border-color: #3A5042; }
.svc-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.3px; }
.svc-catalog-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 30px; }
.svc-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-ink); padding: 6px 0; }
.svc-all:hover { color: var(--accent-ink-hover); }
.svc-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 14px;
border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
border-radius: 999px; font-size: .9rem; font-weight: 600;
transition: background-color .2s, color .2s, border-color .2s;
}
.svc-page[dir="rtl"] .svc-chip { padding: 6px 14px 6px 8px; }
.svc-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.svc-chip-n {
display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
font-family: var(--font-en); font-size: .75rem; font-weight: 700; background: var(--surface-2); color: var(--muted);
}
.svc-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.svc-chip[aria-pressed="true"] .svc-chip-n { background: color-mix(in srgb, var(--on-primary) 20%, transparent); color: var(--on-primary); }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-card {
position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 12px;
padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
box-shadow: var(--shadow-sm);
transition: border-color var(--motion-base, .3s) var(--motion-ease, ease), transform var(--motion-base, .3s) var(--motion-ease, ease);
}
.svc-card::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
box-shadow: var(--shadow-md); opacity: 0; transition: opacity var(--motion-base, .3s) var(--motion-ease, ease);
}
.svc-card:hover { border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--line)); }
@media (hover: hover) and (pointer: fine) {
.svc-card:hover { transform: translateY(-3px); }
.svc-card:hover::after { opacity: 1; }
}
.svc-card[hidden] { display: none; }
.svc-card-top { display: flex; align-items: center; gap: 12px; }
.svc-ico {
flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
background: var(--accent-tint); color: var(--accent-ink);
}
.svc-cat { font-size: .84rem; font-weight: 700; color: var(--accent-ink); }
.svc-card-title { font-size: 1.2rem; line-height: 1.5; }
.svc-card-title a { color: var(--ink); }
.svc-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card-title a:focus-visible { outline: none; }
.svc-card:has(.svc-card-title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.svc-card-text { font-size: .97rem; color: var(--ink-soft); }
.svc-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-tags li { font-size: .8rem; line-height: 1.6; padding: 3px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-soft); }
.svc-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svc-aud { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); min-width: 0; }
.svc-aud .ico { flex: none; color: var(--accent-ink); }
.svc-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--accent-ink); white-space: nowrap; }
.svc-arrow { display: inline-block; transition: transform var(--motion-fast, .16s) var(--motion-ease, ease); }
.svc-card:hover .svc-arrow, .svc-all:hover .svc-arrow { transform: translateX(-4px); }
.svc-card--compact { gap: 14px; }
.svc-card--compact .svc-card-foot { border-top: 0; padding-top: 0; justify-content: flex-end; }
.ksa-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.ksa-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.ksa-table thead th { background: var(--graphite); color: #EEF5EC; text-align: start; font-size: .88rem; font-weight: 700; padding: 15px 22px; }
html[data-theme="dark"] .ksa-table thead th { background: var(--surface-2); }
.ksa-table tbody th, .ksa-table td { padding: 16px 22px; text-align: start; vertical-align: top; border-top: 1px solid var(--line); }
.ksa-table tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ksa-table td { color: var(--ink-soft); }
.ksa-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.ksa-domain { font-family: var(--font-en); font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.svc-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.svc-step-n {
display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin-bottom: 18px;
background: var(--primary); color: var(--on-primary); font-family: var(--font-en); font-weight: 800;
}
.svc-steps h3 { font-size: 1.06rem; margin-bottom: 6px; }
.svc-steps p { font-size: .93rem; color: var(--muted); }
.svc-detail-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.svc-pill {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
background: var(--accent-tint); color: var(--on-accent-tint); font-weight: 700; font-size: .88rem; transition: background-color .2s;
}
.svc-pill .ico { color: var(--accent-ink); }
.svc-pill:hover { background: color-mix(in srgb, var(--accent) 45%, var(--accent-tint)); }
.svc-domains { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-domains li { border: 1px solid var(--line-strong); padding: 5px 14px; border-radius: 999px; font-family: var(--font-en); font-weight: 600; font-size: .85rem; color: var(--ink); background: var(--surface); }
.svc-summary {
display: flex; flex-direction: column; gap: 12px; padding: 26px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-md);
}
.svc-summary h2 { font-size: 1.1rem; }
.svc-summary dl { margin: 0 0 8px; }
.svc-summary dl > div { display: flex; flex-direction: column; gap: 2px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.svc-summary dt { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); font-weight: 600; }
.svc-summary dt .ico { flex: none; color: var(--accent-ink); }
.svc-summary dd { margin: 0; padding-inline-start: 26px; font-weight: 600; color: var(--ink); }
.svc-summary dd a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.svc-summary-note { font-size: .82rem; color: var(--muted); text-align: center; }
.svc-scope { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-scope li {
display: flex; flex-direction: column; gap: 14px; min-height: 128px; padding: 22px 24px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.svc-scope-n {
display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
background: var(--accent-tint); color: var(--on-accent-tint); font-family: var(--font-en); font-weight: 800; font-size: .92rem;
}
.svc-scope-t { font-weight: 700; font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
.svc-prose { margin-top: 36px; max-width: 760px; }
.ksa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.ksa-card { display: flex; flex-direction: column; gap: 8px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.ksa-card .ksa-domain { font-size: .95rem; }
.ksa-card h3 { font-size: 1.15rem; }
.ksa-card p { color: var(--ink-soft); font-size: .96rem; }
.ksa-out { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.ksa-out span { display: block; font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.ksa-out ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ksa-out li { font-size: .82rem; padding: 3px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-soft); }
.svc-cta-wrap { padding: 0 0 clamp(56px, 8vw, 96px); }
.svc-related + .svc-cta-wrap { padding-top: 0; }
.svc-cta {
position: relative; overflow: hidden; isolation: isolate;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
padding: clamp(28px, 4.5vw, 52px); border-radius: var(--radius-l); background: var(--graphite);
}
.svc-cta::before {
content: ""; position: absolute; z-index: -1; inset-block-start: -200px; inset-inline-start: -160px; width: 480px; height: 480px;
background: radial-gradient(circle, rgba(183, 255, 114, .2), transparent 62%); pointer-events: none;
}
html[data-theme="dark"] .svc-cta { background: var(--surface); border: 1px solid #3A5042; }
.svc-cta-copy { flex: 1 1 380px; min-width: 0; }
.svc-cta h2 { color: #EEF5EC; font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.svc-cta p { color: #C4D1C6; margin-top: 8px; font-size: 1.02rem; }
.svc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-cta-btn { background: var(--mint); color: var(--graphite); --btn-hover: #C8FF8F; }
.svc-cta-ghost { border-color: #64796A; color: #EEF5EC; --btn-hover: rgba(255, 255, 255, .07); }
.svc-cta-ghost:hover { border-color: #EEF5EC; }
@media (max-width: 960px) {
.svc-hero-grid, .svc-detail-grid { grid-template-columns: 1fr; align-items: start; }
.svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.svc-grid { grid-template-columns: 1fr; }
.svc-card { padding: 22px; }
.svc-card-foot { flex-direction: column; align-items: flex-start; }
.svc-card--compact .svc-card-foot { align-items: flex-end; }
.svc-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 8px; scrollbar-width: none; }
.svc-filters::-webkit-scrollbar { display: none; }
.svc-chip { flex: none; }
.svc-catalog-head { margin-bottom: 20px; }
.ksa-table-wrap { border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.ksa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ksa-table, .ksa-table tbody, .ksa-table tr, .ksa-table tbody th, .ksa-table td { display: block; }
.ksa-table tbody { display: flex; flex-direction: column; gap: 12px; }
.ksa-table tbody tr, .ksa-table tbody tr:nth-child(even) { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.ksa-table tbody th { border: 0; padding: 0 0 10px; font-size: 1.05rem; white-space: normal; }
.ksa-table td { border: 0; padding: 8px 0 0; }
.ksa-table td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
}
@media (max-width: 520px) {
.svc-steps, .svc-scope { grid-template-columns: 1fr; }
.svc-scope li { min-height: 0; flex-direction: row; align-items: center; padding: 16px 18px; }
.svc-stats { gap: 8px; }
.svc-stat { padding: 16px 12px; }
.svc-stat dt { font-size: .8rem; }
.svc-hero-actions .btn, .svc-cta-actions .btn { flex: 1 1 100%; }
}
html[dir="ltr"] .svc-arrow { transform: scaleX(-1); }
html[dir="ltr"] .svc-card:hover .svc-arrow, html[dir="ltr"] .svc-all:hover .svc-arrow { transform: scaleX(-1) translateX(-4px); }