:root { --navy:#142b4a; --blue:#2463a5; --ink:#182536; --muted:#6d7885; --line:#dce3e9; --paper:#f5f7f8; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font-family:-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
.container { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.nav-wrap { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--white); background:var(--blue); font-size:14px; }
nav { display:flex; gap:30px; color:#536171; font-size:14px; }
nav a:hover, nav a:focus { color:var(--blue); }
.hero { background:var(--paper); border-bottom:1px solid var(--line); }
.hero-grid { min-height:570px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:80px; padding:88px 0; }
.eyebrow { margin:0 0 18px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:25px; color:var(--navy); font-size:clamp(40px, 5vw, 68px); line-height:1.18; letter-spacing:.02em; } h1 em { color:var(--blue); font-style:normal; }
.hero-lead { margin-bottom:6px; font-size:20px; font-weight:600; } .hero-note { margin-bottom:30px; color:var(--muted); }
.button { display:inline-flex; align-items:center; gap:18px; padding:13px 20px; font-size:14px; font-weight:700; transition:background .2s, transform .2s; } .button-primary { color:var(--white); background:var(--blue); } .button:hover { transform:translateY(-2px); background:#174c86; }
.hero-panel { padding:38px 36px 30px; color:var(--white); background:var(--navy); box-shadow:18px 18px 0 #d7e1ea; }
.panel-line { display:grid; grid-template-columns:42px 1fr; gap:2px 14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.18); } .panel-line span,.card-index,.process-step span { color:#6fa6d7; font-size:12px; font-weight:700; letter-spacing:.08em; } .panel-line strong { font-size:17px; } .panel-line small { grid-column:2; color:#b6c6d7; font-size:12px; } .panel-stamp { margin-top:28px; color:#7192b1; font-size:12px; letter-spacing:.3em; }
.section { padding:100px 0; } .section-paper { background:var(--paper); } .about-grid,.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; } h2 { margin-bottom:22px; color:var(--navy); font-size:clamp(30px,4vw,44px); line-height:1.3; letter-spacing:.01em; } .about-copy { max-width:520px; color:#4c5967; } .about-copy p { margin-bottom:22px; }
.wide-heading { margin-bottom:48px; } .wide-heading > p:last-child,.light-heading > p:last-child { color:var(--muted); font-size:14px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .service-card { min-height:220px; padding:28px; border:1px solid var(--line); background:var(--white); } .service-card h3 { margin:26px 0 10px; font-size:18px; } .service-card p { margin:0; color:var(--muted); font-size:14px; }
.section-navy { color:var(--white); background:var(--navy); } .light-heading h2 { color:var(--white); } .light-heading .eyebrow { color:#83b6e2; } .light-heading > p:last-child { color:#adbdcd; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:52px; } .process-step { position:relative; min-height:130px; padding:0 28px; border-left:1px solid rgba(255,255,255,.25); } .process-step:first-child { padding-left:0; border-left:0; } .process-step h3 { margin:24px 0 4px; font-size:20px; } .process-step p { margin:0; color:#aabccc; font-size:14px; }
.contact-section { background:#eef3f6; } .contact-box { padding:38px; border-left:4px solid var(--blue); background:var(--white); } .contact-label { margin-bottom:10px; color:var(--muted); font-size:13px; } .email { display:inline-block; margin-bottom:2px; color:var(--blue); font-size:22px; font-weight:700; overflow-wrap:anywhere; } .muted { margin-bottom:30px; color:var(--muted); font-size:13px; } .contact-details { padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; } .contact-details strong { color:var(--ink); font-weight:600; }
.site-footer { color:#c5d0db; background:#0d2038; font-size:12px; } .footer-wrap { display:flex; justify-content:space-between; gap:20px; padding:24px 0; } .footer-wrap p { margin:0; }
@media (max-width:760px) { .container { width:min(100% - 36px, 560px); } .nav-wrap { min-height:64px; } nav { gap:12px; font-size:12px; } nav a:nth-child(3) { display:none; } .hero-grid,.about-grid,.contact-grid { grid-template-columns:1fr; gap:44px; } .hero-grid { min-height:0; padding:68px 0 72px; } h1 { font-size:42px; } .hero-panel { padding:24px; box-shadow:10px 10px 0 #d7e1ea; } .section { padding:70px 0; } .service-grid { grid-template-columns:1fr; gap:12px; } .service-card { min-height:0; padding:24px; } .process-grid { grid-template-columns:1fr 1fr; gap:30px 0; margin-top:36px; } .process-step { min-height:118px; padding:0 18px; } .process-step:nth-child(3) { padding-left:0; border-left:0; } .footer-wrap { flex-direction:column; gap:5px; } }
@media (max-width:390px) { nav { gap:8px; } nav a { font-size:11px; } .brand { font-size:16px; } h1 { font-size:38px; } .email { font-size:19px; } }