:root {
  --ink: #0a2540;
  --ink-deep: #071a2c;
  --gold: #c9a961;
  --cyan: #00b8d9;
  --paper: #f7f8f6;
  --line: #dfe5e8;
  --muted: #66727c;
  --white: #fff;
  --max: 1240px;
  --radius: 4px;
  --shadow: 0 18px 50px rgba(10, 37, 64, .1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }
button, input, textarea { font: inherit; }
.container { width: min(var(--max), calc(100% - 64px)); margin: auto; }
.site-header { position: fixed; z-index: 10; inset: 0 0 auto; padding: 18px 0; transition: .25s; }
.site-header.is-scrolled { background: rgba(7, 26, 44, .95); padding: 10px 0; box-shadow: 0 5px 24px rgba(0,0,0,.12); }
.navbar { display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap: 12px; color: var(--white); font-weight: 700; letter-spacing: .08em; }
.brand-mark { width: 34px; height: 34px; border: 1px solid var(--gold); display:grid; place-items:center; color: var(--gold); font-size: 13px; }
.nav-links { display:flex; align-items:center; gap: 30px; color: rgba(255,255,255,.82); font-size: 14px; }
.nav-links a { transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-cta, .button { display:inline-flex; align-items:center; justify-content:center; min-height: 48px; padding: 0 22px; border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold); background: transparent; font-weight: 700; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.button:hover, .nav-cta:hover { transform: translateY(-2px); background: var(--gold); color: var(--ink); }
.button--solid { background: var(--gold); color: var(--ink); }
.menu-toggle { display:none; min-width:44px; min-height:44px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; }
.hero { min-height: 760px; display:grid; align-items:center; color:var(--white); background: linear-gradient(90deg, rgba(7,26,44,.98) 0%, rgba(7,26,44,.84) 48%, rgba(7,26,44,.38)), url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2200&q=85") center/cover; }
.hero__content { max-width: 760px; padding-top: 80px; }
.eyebrow { color:var(--gold); font-size: 13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 24px; font-size: clamp(42px, 6vw, 78px); line-height:1.12; letter-spacing:-.03em; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height:1.2; letter-spacing:-.02em; }
h3 { font-size: 21px; line-height:1.3; }
.hero p { max-width: 650px; color: rgba(255,255,255,.77); font-size:19px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.section { padding: 112px 0; }
.section--dark { color:var(--white); background:var(--ink); }
.section__head { display:flex; justify-content:space-between; align-items:end; gap: 30px; margin-bottom: 48px; }
.section__head p { max-width: 450px; color:var(--muted); }
.section--dark .section__head p { color: rgba(255,255,255,.64); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature, .content-card, .case-card { background:var(--white); border:1px solid var(--line); padding:30px; transition:transform .25s, box-shadow .25s; }
.feature:hover, .content-card:hover, .case-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.feature__number { color:var(--gold); font-size:13px; letter-spacing:.14em; }
.feature p, .content-card p, .case-card p { color:var(--muted); }
.feature__line { height:1px; margin:22px 0; background:var(--line); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.stat { padding:30px 22px; border-right:1px solid rgba(255,255,255,.18); }
.stat:last-child { border-right:0; }
.stat strong { display:block; color:var(--gold); font-size:42px; line-height:1.1; }
.stat span { color:rgba(255,255,255,.7); font-size:14px; }
.image-card { min-height: 420px; position:relative; overflow:hidden; color:#fff; background:var(--ink); }
.image-card img { height:100%; position:absolute; inset:0; opacity:.72; }
.image-card__body { position:absolute; inset:auto 28px 24px; }
.image-card__body p { color:rgba(255,255,255,.76); margin-bottom:0; }
.tag { display:inline-block; padding:4px 9px; color:var(--ink); background:var(--gold); font-size:12px; font-weight:700; }
.quote { margin:0; padding:30px; border-left:3px solid var(--gold); background:#eef2f0; font-size:20px; }
.faq { border-top:1px solid var(--line); }
.faq details { padding:20px 0; border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; font-weight:700; }
.faq summary::-webkit-details-marker { display:none; }
.faq p { margin:14px 0 0; color:var(--muted); max-width:760px; }
.page-hero { padding: 190px 0 90px; color:#fff; background:linear-gradient(90deg, rgba(7,26,44,.98), rgba(7,26,44,.6)), url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=2000&q=85") center/cover; }
.page-hero h1 { max-width:800px; font-size:clamp(42px,6vw,70px); }
.page-hero p { max-width:640px; color:rgba(255,255,255,.75); font-size:18px; }
.breadcrumb { margin-bottom: 24px; color:var(--gold); font-size:13px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.list { padding:0; margin:24px 0 0; list-style:none; }
.list li { padding:13px 0 13px 28px; border-bottom:1px solid var(--line); position:relative; }
.list li::before { content:""; position:absolute; left:0; top:25px; width:9px; height:9px; background:var(--gold); }
.timeline { border-left:1px solid var(--gold); padding-left:30px; }
.timeline article { position:relative; padding-bottom:30px; }
.timeline article::before { content:""; position:absolute; left:-36px; top:9px; width:10px; height:10px; background:var(--gold); border-radius:50%; }
.timeline time { color:var(--gold); font-weight:700; }
.solution-card { padding:32px; background:var(--ink); color:#fff; min-height:240px; }
.solution-card p { color:rgba(255,255,255,.68); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:18px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:13px; }
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.filter-bar button { min-height:44px; padding:0 16px; border:1px solid var(--line); color:var(--muted); background:#fff; cursor:pointer; }
.filter-bar button.is-active, .filter-bar button:hover { border-color:var(--ink); color:#fff; background:var(--ink); }
.article-meta { color:var(--muted); font-size:14px; }
.case-card img, .content-card img { height:190px; margin:-30px -30px 24px; width:calc(100% + 60px); }
.form { padding:36px; background:#fff; border:1px solid var(--line); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field--full { grid-column:1/-1; }
label { font-weight:700; font-size:14px; }
input, textarea { width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; background:#fbfcfb; color:var(--ink); }
input:focus, textarea:focus { outline:2px solid rgba(0,184,217,.35); border-color:var(--cyan); }
textarea { min-height:130px; resize:vertical; }
.hp { position:absolute; left:-9999px; }
.form-message { display:none; margin-top:18px; padding:14px; color:#14633b; background:#e4f4eb; }
.form-message.is-visible { display:block; }
.site-footer { padding:70px 0 22px; color:rgba(255,255,255,.68); background:var(--ink-deep); }
.site-footer .brand { margin-bottom:20px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:48px; }
.site-footer h3 { color:#fff; font-size:15px; }
.footer-links { display:grid; gap:8px; font-size:14px; }
.footer-links a:hover { color:var(--gold); }
.subscribe { display:flex; gap:8px; }
.subscribe input { min-width:0; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; }
.subscribe .button { min-width:80px; padding:0 12px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s; }
.reveal.is-visible { opacity:1; transform:none; }
@media (max-width: 900px) { .nav-links { display:none; position:absolute; top:64px; left:0; right:0; padding:20px 32px; background:var(--ink-deep); flex-direction:column; align-items:flex-start; gap:14px; } .nav-links.is-open { display:flex; } .menu-toggle { display:block; } .nav-cta { display:none; } .grid-4 { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .container { width:min(var(--max), calc(100% - 36px)); } .hero { min-height:680px; } .section { padding:78px 0; } .section__head, .split { display:block; } .section__head p { margin-top:16px; } .grid-3, .grid-4, .stats, .form-grid { grid-template-columns:1fr; } .stat { border-right:0; border-bottom:1px solid rgba(255,255,255,.18); } .stat:last-child { border-bottom:0; } .footer-grid { grid-template-columns:1fr; gap:28px; } .footer-bottom { display:block; } .footer-bottom span { display:block; margin-top:8px; } .form { padding:22px; } }