:root { --service-ink: #1d1d1f; --service-muted: #6e6e73; --service-line: #d2d2d7; --service-blue: #0071e3; --service-paper: #f5f5f7; --service-max: 1240px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--service-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
p { line-height: 1.6; }
.shell { width: min(var(--service-max), calc(100% - 80px)); margin: 0 auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: 10px 12px; background: var(--service-blue); color: #fff; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(29, 29, 31, .1); backdrop-filter: saturate(180%) blur(18px); }
.nav { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--service-ink); font-size: 17px; font-weight: 700; }
.brand img { width: 28px; height: 28px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 22px; color: #424245; font-size: 12px; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-cta { color: var(--service-blue); }
.nav-toggle { display: none; width: 36px; height: 36px; border: 1px solid var(--service-line); border-radius: 50%; background: transparent; color: var(--service-ink); font-size: 18px; cursor: pointer; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid #86868b; border-radius: 999px; color: var(--service-ink); font-size: 14px; font-weight: 500; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.button:hover { border-color: var(--service-ink); background: rgba(29, 29, 31, .06); }
.button.primary { border-color: var(--service-blue); background: var(--service-blue); color: #fff; }
.button.primary:hover { border-color: #0077ed; background: #0077ed; }
.button:focus-visible, .nav-toggle:focus-visible, .nav-links a:focus-visible, .carousel-arrow:focus-visible, .carousel-dots button:focus-visible, .diagram-play:focus-visible { outline: 2px solid var(--service-blue); outline-offset: 3px; }
.eyebrow { margin-bottom: 16px; color: var(--service-blue); font-size: 16px; font-weight: 600; }
.section { padding: 86px 0; }
.section-paper { background: #fff; }
.section-surface, .service-showcase { background: var(--service-paper); }
.section-head { display: grid; grid-template-columns: minmax(0, .93fr) minmax(290px, .6fr); gap: 72px; align-items: end; margin-bottom: 42px; }
.section-head h2, .scope-main h2, .contact-copy h2 { margin-bottom: 0; color: var(--service-ink); font-size: 52px; line-height: 1.08; font-weight: 650; letter-spacing: 0; }
.section-head > p { margin-bottom: 0; color: var(--service-muted); font-size: 17px; }
.service-hero-v2 { position: relative; isolation: isolate; display: grid; min-height: 680px; align-items: end; overflow: hidden; background: #05050a; color: #fff; }
.service-hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: saturate(1.04) contrast(1.02); }
.service-hero-shade { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .43); }
.service-hero-content { padding: 104px 0 56px; }
.service-hero-v2 h1 { margin: 0 0 10px; font-size: 76px; line-height: 1.02; font-weight: 700; letter-spacing: 0; }
.hero-statement { max-width: 790px; margin: 0 0 16px; font-size: 34px; line-height: 1.16; font-weight: 600; }
.hero-lead { max-width: 590px; margin-bottom: 28px; color: rgba(255, 255, 255, .86); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.service-hero-v2 .hero-actions .button:not(.primary) { border-color: rgba(255, 255, 255, .82); color: #fff; }
.service-hero-v2 .hero-actions .button:not(.primary):hover { border-color: #fff; background: rgba(255, 255, 255, .16); }
.service-hero-proof { display: grid; grid-template-columns: repeat(3, max-content); gap: 0; max-width: 680px; margin-top: 46px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, .38); color: rgba(255, 255, 255, .76); font-size: 12px; }
.service-hero-proof span { min-width: 138px; padding-right: 22px; }
.service-hero-proof b { color: #fff; font-size: 17px; font-weight: 600; }
.runbook-rail { position: sticky; top: 52px; z-index: 24; background: rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(29, 29, 31, .1); backdrop-filter: saturate(180%) blur(18px); }
.runbook-rail > .shell { display: flex; justify-content: center; overflow-x: auto; }
.runbook-rail a { display: inline-flex; min-height: 46px; flex: 0 0 auto; align-items: center; gap: 9px; padding: 0 15px; color: var(--service-muted); font-size: 12px; }
.runbook-rail a:hover, .runbook-rail a:focus-visible { color: var(--service-blue); }
.runbook-rail b { color: #86868b; font-size: 11px; }
.service-page [id] { scroll-margin-top: 106px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--service-line); border-bottom: 1px solid var(--service-line); }
.why-grid article { min-height: 184px; padding: 20px 30px 24px 0; border-right: 1px solid var(--service-line); }
.why-grid article + article { padding-left: 30px; }
.why-grid article:last-child { border-right: 0; }
.why-grid article > span, .journey-flow li > span, .execution-map article > span, .run-roadmap li > span { color: var(--service-blue); font-size: 14px; font-weight: 600; }
.why-grid h3 { margin: 17px 0 9px; font-size: 21px; line-height: 1.24; font-weight: 620; }
.why-grid p { margin: 0; color: var(--service-muted); font-size: 14px; }
.showcase-carousel { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 16px 42px rgba(0, 0, 0, .08); }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform 520ms cubic-bezier(.2, .8, .2, 1); }
.carousel-slide { display: grid; min-height: 465px; flex: 0 0 100%; grid-template-columns: minmax(0, 1.34fr) minmax(310px, .66fr); background: #fff; }
.carousel-slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.carousel-copy { display: grid; align-content: center; padding: 42px; }
.carousel-copy span { color: var(--service-blue); font-size: 14px; font-weight: 600; }
.carousel-copy h3 { max-width: 360px; margin: 16px 0 14px; font-size: 36px; line-height: 1.12; font-weight: 650; }
.carousel-copy p { max-width: 350px; margin: 0; color: var(--service-muted); font-size: 16px; }
.carousel-controls { display: flex; min-height: 64px; align-items: center; justify-content: center; gap: 18px; border-top: 1px solid #e8e8ed; }
.carousel-arrow { width: 34px; height: 34px; border: 1px solid var(--service-line); border-radius: 50%; background: #fff; color: var(--service-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.carousel-arrow:hover { border-color: var(--service-blue); color: var(--service-blue); }
.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #b8b8be; cursor: pointer; }
.carousel-dots button.is-active { width: 22px; border-radius: 999px; background: var(--service-blue); }
.journey-flow, .execution-map, .run-roadmap { border-top: 1px solid var(--service-line); border-bottom: 1px solid var(--service-line); }
.journey-flow ol, .execution-map, .run-roadmap ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.journey-flow ol, .run-roadmap ol { position: relative; }
.journey-flow ol::before, .run-roadmap ol::before { content: ""; position: absolute; top: 39px; right: 8%; left: 8%; height: 1px; background: #c5c5cb; }
.journey-flow li, .execution-map article, .run-roadmap li { position: relative; min-height: 250px; padding: 76px 24px 26px 0; border-right: 1px solid var(--service-line); }
.journey-flow li + li, .execution-map article + article, .run-roadmap li + li { padding-left: 24px; }
.journey-flow li:last-child, .execution-map article:last-child, .run-roadmap li:last-child { border-right: 0; }
.journey-flow li > b, .execution-map article > b, .run-roadmap li > b { position: absolute; top: 20px; left: 0; z-index: 1; display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #aeb0b8; border-radius: 50%; background: #fff; color: var(--service-blue); font-size: 13px; font-weight: 650; }
.journey-flow li + li > b, .execution-map article + article > b, .run-roadmap li + li > b { left: 24px; }
.journey-flow h3, .execution-map strong, .run-roadmap h3 { display: block; margin: 12px 0 9px; color: var(--service-ink); font-size: 20px; line-height: 1.22; font-weight: 650; }
.journey-flow p, .execution-map p, .run-roadmap p { margin: 0; color: var(--service-muted); font-size: 14px; }
.flow-actions { display: flex; align-items: center; gap: 18px; padding: 22px 0 0; }
.flow-actions p { margin: 0; color: var(--service-muted); font-size: 13px; }
.diagram-play { min-height: 36px; padding: 0 15px; border: 1px solid #b8b8be; border-radius: 999px; background: #fff; color: var(--service-ink); font-size: 13px; cursor: pointer; }
.diagram-play:hover { border-color: var(--service-blue); color: var(--service-blue); }
.journey-flow.is-playing li, .execution-map.is-playing article, .run-roadmap.is-playing li { animation: flow-highlight 680ms ease both; }
.journey-flow.is-playing li:nth-child(2), .execution-map.is-playing article:nth-child(2), .run-roadmap.is-playing li:nth-child(2) { animation-delay: 560ms; }
.journey-flow.is-playing li:nth-child(3), .execution-map.is-playing article:nth-child(3), .run-roadmap.is-playing li:nth-child(3) { animation-delay: 1120ms; }
.journey-flow.is-playing li:nth-child(4), .execution-map.is-playing article:nth-child(4), .run-roadmap.is-playing li:nth-child(4) { animation-delay: 1680ms; }
.journey-flow.is-playing li > b, .execution-map.is-playing article > b, .run-roadmap.is-playing li > b { animation: node-highlight 680ms ease both; }
.journey-flow.is-playing li:nth-child(2) > b, .execution-map.is-playing article:nth-child(2) > b, .run-roadmap.is-playing li:nth-child(2) > b { animation-delay: 560ms; }
.journey-flow.is-playing li:nth-child(3) > b, .execution-map.is-playing article:nth-child(3) > b, .run-roadmap.is-playing li:nth-child(3) > b { animation-delay: 1120ms; }
.journey-flow.is-playing li:nth-child(4) > b, .execution-map.is-playing article:nth-child(4) > b, .run-roadmap.is-playing li:nth-child(4) > b { animation-delay: 1680ms; }
@keyframes flow-highlight { 0%, 100% { background: transparent; } 45% { background: #e8f2ff; } }
@keyframes node-highlight { 0%, 100% { border-color: #aeb0b8; background: #fff; color: var(--service-blue); transform: scale(1); } 45% { border-color: var(--service-blue); background: var(--service-blue); color: #fff; transform: scale(1.08); } }
.scope-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 70px; align-items: start; }
.scope-main > p { color: var(--service-muted); }
.execution-map { margin-top: 34px; }
.execution-map article { min-height: 192px; padding-top: 66px; }
.execution-map article > b { top: 17px; }
.execution-map article::after { content: "→"; position: absolute; top: 25px; right: -10px; z-index: 2; color: #86868b; font-size: 18px; }
.execution-map article:last-child::after { display: none; }
.price-panel { align-self: start; padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 10px 32px rgba(0, 0, 0, .08); }
.price-panel small { color: var(--service-blue); font-size: 12px; font-weight: 600; }
.price-panel .price { margin: 18px 0 8px; color: var(--service-ink); font-size: 58px; font-weight: 650; line-height: 1; }
.price-panel > p, .price-detail span, .price-footnote { color: var(--service-muted); font-size: 13px; }
.price-detail { margin: 24px 0; border-top: 1px solid var(--service-line); }
.price-detail div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--service-line); font-size: 12px; }
.price-detail strong { color: var(--service-ink); }
.price-panel .button { margin-bottom: 16px; }
.run-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr); gap: 54px; align-items: start; }
.run-roadmap li { min-height: 222px; }
.resource-note { padding: 28px; border-radius: 20px; background: #e8f2ff; }
.resource-note > span { color: var(--service-blue); font-size: 12px; font-weight: 600; }
.resource-note h3 { font-size: 26px; font-weight: 620; }
.resource-note ul { margin: 0; padding-left: 18px; }
.resource-note li { padding: 10px 0; border-bottom: 1px solid rgba(0, 113, 227, .18); color: #424245; font-size: 14px; }
.resource-note li:last-child { border-bottom: 0; }
#contact { background: #1d1d1f; color: #fff; }
#contact .eyebrow { color: #7fb7ff; }
#contact .contact-copy h2 { color: #fff; }
#contact .contact-copy > p, #contact .contact-meta span { color: #d2d2d7; }
.contact-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
.contact-meta div { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .26); }
.contact-meta strong { display: block; margin-bottom: 5px; font-size: 12px; }
.contact-meta span { font-size: 11px; }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.form label { display: grid; gap: 7px; color: #424245; font-size: 12px; }
.form .span-2 { grid-column: 1 / -1; }
.form input, .form textarea, .form select { width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; outline: none; background: var(--service-paper); color: var(--service-ink); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--service-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .16); }
.form textarea { min-height: 100px; resize: vertical; }
.form button { cursor: pointer; }
.form-required { display: inline; margin-left: 4px; color: #d70015; font-weight: 700; }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--service-muted); font-size: 10px; }
.lead-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
.lead-form-status { grid-column: 1 / -1; margin: 0; color: var(--service-muted); font-size: 12px; }
.lead-form-status[data-state="success"] { color: #0f6b6f; }
.lead-form-status[data-state="error"] { color: #b42318; }
.footer { padding: 28px 0; border-top: 1px solid #e8e8ed; background: #fff; color: var(--service-muted); font-size: 11px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.footer a { color: #424245; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 940px) { .shell { width: min(100% - 40px, 720px); } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .nav-links { position: absolute; top: 52px; right: 0; left: 0; display: none; min-height: calc(100vh - 52px); padding: 18px 20px; overflow-y: auto; background: #fff; } .nav-links.is-open { display: grid; align-content: start; } .nav-links a { padding: 17px 0; border-bottom: 1px solid var(--service-line); color: var(--service-ink); font-size: 17px; font-weight: 500; } .service-hero-v2 { min-height: 650px; } .service-hero-content { padding: 110px 0 52px; } .service-hero-v2 h1 { font-size: 64px; } .hero-statement { font-size: 31px; } .section-head, .scope-grid, .contact-grid, .run-grid { grid-template-columns: 1fr; gap: 32px; } .section-head { gap: 16px; } .section-head h2, .scope-main h2, .contact-copy h2 { font-size: 46px; } .runbook-rail > .shell { justify-content: flex-start; } .carousel-slide { grid-template-columns: 1fr; min-height: 0; } .carousel-slide img { aspect-ratio: 16 / 9; } .carousel-copy { padding: 30px; } .journey-flow li, .execution-map article, .run-roadmap li { min-height: 236px; } }
@media (max-width: 560px) { .shell { width: min(100% - 32px, 520px); } .section { padding: 66px 0; } .service-hero-v2 { min-height: 620px; } .service-hero-media { object-position: 61% center; } .service-hero-shade { background: rgba(0, 0, 0, .5); } .service-hero-content { padding: 98px 0 38px; } .service-hero-v2 h1 { margin-bottom: 12px; font-size: 48px; line-height: 1.04; } .hero-statement { font-size: 26px; line-height: 1.2; } .hero-lead { font-size: 15px; } .service-hero-proof { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 32px; padding-top: 14px; } .service-hero-proof span { min-width: 0; padding-right: 10px; font-size: 10px; } .service-hero-proof b { font-size: 15px; } .runbook-rail a { min-height: 42px; padding: 0 12px; font-size: 11px; } .section-head { margin-bottom: 30px; } .section-head h2, .scope-main h2, .contact-copy h2 { font-size: 36px; line-height: 1.12; } .section-head > p { font-size: 15px; } .why-grid { grid-template-columns: 1fr; } .why-grid article, .why-grid article + article { min-height: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--service-line); } .why-grid article:last-child { border-bottom: 0; } .showcase-carousel, .price-panel, .resource-note, .form { border-radius: 16px; } .carousel-slide img { aspect-ratio: 4 / 3; } .carousel-copy { padding: 24px 20px 26px; } .carousel-copy h3 { margin: 11px 0 10px; font-size: 26px; } .carousel-copy p { font-size: 14px; } .carousel-controls { min-height: 56px; } .journey-flow ol, .execution-map, .run-roadmap ol { grid-template-columns: 1fr; } .journey-flow ol::before, .run-roadmap ol::before { top: 32px; bottom: 32px; left: 19px; width: 1px; height: auto; } .journey-flow li, .journey-flow li + li, .execution-map article, .execution-map article + article, .run-roadmap li, .run-roadmap li + li { min-height: 0; padding: 59px 0 22px 58px; border-right: 0; border-bottom: 1px solid var(--service-line); } .journey-flow li:last-child, .execution-map article:last-child, .run-roadmap li:last-child { border-bottom: 0; } .journey-flow li > b, .journey-flow li + li > b, .execution-map article > b, .execution-map article + article > b, .run-roadmap li > b, .run-roadmap li + li > b { top: 17px; left: 0; width: 38px; height: 38px; } .journey-flow h3, .execution-map strong, .run-roadmap h3 { margin: 9px 0 7px; font-size: 19px; } .flow-actions { display: grid; gap: 10px; padding-top: 18px; } .flow-actions .diagram-play { justify-self: start; } .execution-map { margin-top: 26px; } .execution-map article::after { top: auto; right: auto; bottom: -14px; left: 13px; transform: rotate(90deg); } .price-panel, .resource-note, .form { padding: 22px; } .price-panel .price { font-size: 48px; } .form, .contact-meta { grid-template-columns: 1fr; } .form .span-2 { grid-column: 1; } .footer-inner { display: grid; } }