:root{
--ink:#e8f1f8;
--ink-dim:#9db4c6;
--bg:#0d2438;
--bg2:#12304a;
--line:#2c5170;
--accent:#e8a33d;
--accent2:#6fc2d0;
--fs-xl:clamp(2.2rem,5vw,3.6rem);
--fs-h:1.5rem;
--fs-s:1.05rem;
--fs-xs:.875rem;
--fs-breadcrumb:.75rem;
--sp:16px;
--gap:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:var(--fs-s);line-height:1.85;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--sp)}
h1{font-size:var(--fs-xl);line-height:1.25;letter-spacing:.02em;font-weight:700}
h2{font-size:var(--fs-h);letter-spacing:.06em;font-weight:700}
h3{font-size:var(--fs-s);font-weight:600}
a{color:var(--accent2);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;outline:1px solid var(--accent2);outline-offset:3px}
.kicker{font-size:var(--fs-xs);letter-spacing:.35em;color:var(--accent);text-transform:uppercase;margin-bottom:24px}
.lead{max-width:60ch;color:var(--ink-dim);margin:24px 0 32px}
.sec-note{color:var(--ink-dim);font-size:var(--fs-xs);margin-bottom:var(--sp)}
.btn{display:inline-block;border:1px solid var(--accent);color:var(--accent);padding:12px 32px;letter-spacing:.15em;transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--accent);color:var(--bg);text-decoration:none;outline:none}
/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--bg2)}
.head-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.head-in nav{display:flex;flex-wrap:wrap;gap:24px}
.head-in nav a{color:var(--ink-dim);letter-spacing:.1em;font-size:var(--fs-xs)}
.head-in nav a:hover{color:var(--accent)}
/* breadcrumb */
.breadcrumb{font-size:var(--fs-breadcrumb);letter-spacing:.12em;color:var(--ink-dim);margin:32px 0 24px;display:flex;gap:8px}
.breadcrumb a{color:var(--ink-dim)}
/* hero variants */
.hero-index{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding:64px 0}
.hero-fig figcaption{font-size:var(--fs-xs);color:var(--ink-dim);letter-spacing:.1em;margin-top:12px}
.hero-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:48px 0}
.hero-services{background:var(--bg2);border:1px solid var(--line);padding:0;margin:24px 0 48px}
.hero-services-copy{padding:24px}
.hero-services-copy p{max-width:65ch;color:var(--ink-dim);margin-top:16px}
.hero-contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 0}
.contact-mail{font-size:1.6rem;color:var(--accent);letter-spacing:.05em;margin:24px 0;font-family:ui-monospace,monospace}
/* abilities */
.abilities,.items-block,.process,.faq-home,.cta,.about-block,.c-process,.c-faq{padding:48px 0;border-top:1px solid var(--line)}
.abilities h2,.items-block h2,.process h2,.faq-home h2,.cta h2,.about-block h2,.c-process h2,.c-faq h2,.faq-page h1,.faq-page h2{margin-bottom:24px}
.ab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ab{border-left:2px solid var(--accent);padding-left:var(--sp)}
.ab p{color:var(--ink-dim);margin-top:12px}
/* nine grid */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item{border:1px solid var(--line);padding:0}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.item h2,.item h3{padding:16px 16px 0;letter-spacing:.05em}
.item p{padding:8px 16px 0;color:var(--ink-dim)}
.item ul{padding:8px 16px 16px 40px;color:var(--ink-dim);font-size:var(--fs-xs)}
/* process */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps h3{color:var(--accent);letter-spacing:.15em;margin-bottom:8px}
.steps p{color:var(--ink-dim)}
/* faq */
.qa{border-top:1px dashed var(--line);padding:24px 0}
.qa p{color:var(--ink-dim);margin-top:8px;max-width:65ch}
.more-link{margin-top:16px;font-size:var(--fs-xs);color:var(--ink-dim)}
/* about */
.about-block p{max-width:65ch;color:var(--ink-dim)}
.about-block.alt{background:var(--bg2);border:1px solid var(--line);border-left:none;border-right:none;padding:48px var(--sp)}
.about-block.alt p{color:var(--ink)}
.about-block.alt{color:var(--ink-dim)}
.hero-about p{max-width:60ch;color:var(--ink-dim);margin-top:16px}
/* cta */
.cta p{color:var(--ink-dim);max-width:60ch;margin-bottom:24px}
/* guide */
.narrow{max-width:820px}
.guide{padding:24px 0 48px}
.guide-lead{color:var(--ink-dim);margin:16px 0 32px;max-width:62ch}
.guide h2{margin:48px 0 16px}
.guide p{color:var(--ink-dim);max-width:65ch;margin-bottom:16px}
.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--fs-xs)}
.cmp caption{text-align:left;color:var(--ink-dim);letter-spacing:.1em;padding-bottom:8px}
.cmp th,.cmp td{border:1px solid var(--line);padding:12px;text-align:left}
.cmp th{background:var(--bg2);color:var(--accent);letter-spacing:.1em}
/* images */
img{max-width:100%;height:auto}
figure img{border:1px solid var(--line);display:block}
/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:48px;background:var(--bg2)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:24px var(--sp);color:var(--ink-dim);font-size:var(--fs-xs)}
.foot-in nav{display:flex;gap:16px;flex-wrap:wrap}
.foot-in a{color:var(--ink-dim)}
.foot-in a:hover{color:var(--accent)}
@media(max-width:900px){
.hero-index,.hero-about,.hero-contact{grid-template-columns:1fr;gap:24px;padding:32px 0}
.ab-grid{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.hero-services-copy{padding:16px}
}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){
:root{--fs-xl:1.9rem}
.head-in{justify-content:center}
}