:root {
  --brand:#0046A0; --brand-2:#1F5FD1; --gold:#D2A635;
  --ink:#0E1420; --ink-2:#3B4454; --muted:#6B7483; --line:#E3E6EC; --line-2:#EEF0F4;
  --bg:#F6F7F9; --soft:#EAF1FB; --dark:#0B1220; --dark-2:#131C2E;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:#fff; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1160px, calc(100% - 48px)); margin:0 auto; }

/* Header */
header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:24px; min-height:68px; }
.brand { display:flex; align-items:center; gap:11px; white-space:nowrap; color:var(--ink); }
.brand .logo { height:34px; width:34px; display:block; }
.brand .word { display:flex; flex-direction:column; line-height:1; }
.brand .word b { font-size:18px; font-weight:600; letter-spacing:.14em; }
.brand .word em { font-style:normal; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:8.5px; font-weight:500; letter-spacing:.34em; color:var(--muted); margin-top:5px; }
nav { display:flex; gap:2px; flex:1; flex-wrap:wrap; justify-content:center; }
.menu { position:relative; }
.menu > a { display:flex; align-items:center; gap:6px; padding:10px 12px; font-size:14px; color:var(--ink-2); border-radius:8px; transition:color .15s, background .15s; }
.menu > a .ico { display:none; }
.menu.on > a, .menu:hover > a { color:var(--ink); background:var(--bg); }
.drop { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:250px; max-height:70vh; overflow:auto; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px -20px rgba(14,20,32,.25); padding:8px; }
.menu::after { content:""; position:absolute; left:0; right:0; top:100%; height:8px; }
.menu:hover .drop, .menu:focus-within .drop { display:block; }
.menu:nth-child(4) .drop, .menu:nth-child(5) .drop { left:auto; right:0; }
.drop a { display:block; padding:8px 12px; border-radius:8px; font-size:14px; color:var(--ink-2); }
.drop a:hover { background:var(--soft); color:var(--brand); }

/* Buttons */
.cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff !important; border:0; border-radius:999px; height:44px; padding:0 22px; font-size:14.5px; font-weight:550; cursor:pointer; font-family:inherit; transition:background .18s, transform .18s; white-space:nowrap; }
.cta:hover { background:var(--brand); }
.cta::after { content:"→"; transition:transform .18s; }
.cta:hover::after { transform:translateX(3px); }
.cta .ico { display:none; }
header .cta { height:38px; padding:0 18px; font-size:14px; }
.ghost { display:inline-flex; align-items:center; height:44px; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:999px; padding:0 22px; font-size:14.5px; transition:border-color .18s, background .18s; }
.ghost:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.line-btn { display:inline-flex; align-items:center; height:44px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:0 22px; font-size:14.5px; transition:border-color .18s; }
.line-btn:hover { border-color:var(--ink); }
.more { display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-size:14px; font-weight:550; }
.more::after { content:"→"; transition:transform .18s; }
.more:hover::after { transform:translateX(3px); }

/* Icons */
.ico { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:var(--soft); color:var(--brand); flex:none; }
.ico svg { width:20px; height:20px; }
.card .ico { margin-bottom:18px; }

/* Inner hero */
.hero { position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:80px 0 72px; }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 70% 90% at 80% 0%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 90% at 80% 0%, #000 30%, transparent 75%); }
.hero::after { content:""; position:absolute; width:520px; height:520px; right:-120px; top:-260px; border-radius:50%; background:radial-gradient(circle, rgba(31,95,209,.45), transparent 65%); }
.hero .wrap { position:relative; z-index:1; }
.hero h1, .hero h2 { margin:0 0 16px; font-size:clamp(30px, 4vw, 44px); line-height:1.2; letter-spacing:-.02em; font-weight:700; color:#fff; }
.hero p { margin:0 0 28px; max-width:680px; color:#A9B3C4; font-size:17px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero .cta { background:#fff; color:var(--ink) !important; }
.hero .cta:hover { background:var(--gold); }

/* Sections */
section { padding:88px 0; }
h2 { margin:40px 0 14px; font-size:clamp(24px, 2.6vw, 32px); line-height:1.25; letter-spacing:-.02em; font-weight:650; }
h3 { margin:0 0 8px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
section p { color:var(--ink-2); }
.wrap > h2:first-child { margin-top:0; }
.alt { background:var(--bg); }
.sub, .crumb { color:var(--muted); }
.crumb { font-size:13.5px; margin:0 0 28px; }
.crumb a { color:var(--brand); }
.eyebrow { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:44px; }
.sec-head h2 { margin:0; }
.sec-head p { margin:0; max-width:460px; color:var(--ink-2); font-size:15.5px; }

/* Cards */
.grid { display:grid; gap:16px; margin:20px 0; }
.g4 { grid-template-columns:repeat(4,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.card { position:relative; border:1px solid var(--line); border-radius:16px; padding:26px 24px 24px; background:#fff; display:flex; flex-direction:column; transition:border-color .18s, transform .18s, box-shadow .18s; }
.card:hover { border-color:#C9D3E3; transform:translateY(-2px); box-shadow:0 18px 36px -24px rgba(14,20,32,.28); }
.card p { margin:0 0 14px; color:var(--ink-2); font-size:14.5px; }
.card .more { margin-top:auto; }
.alt .card { background:#fff; }

/* Filters / search */
.facet { margin-bottom:16px; }
.facet h3 { font-size:13px; color:var(--muted); font-weight:500; margin-bottom:10px; font-family:var(--mono); letter-spacing:.04em; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag, button.tag { display:inline-flex; align-items:center; border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px; color:var(--ink-2); font-size:13.5px; cursor:pointer; font-family:inherit; transition:all .15s; }
.tag:hover, button.tag:hover { border-color:var(--ink); color:var(--ink); }
.tag.on, button.tag.on { color:#fff; border-color:var(--ink); background:var(--ink); }
.search { display:flex; gap:8px; border:1px solid var(--line); border-radius:999px; padding:6px 6px 6px 18px; margin:0 0 16px; background:#fff; max-width:560px; transition:border-color .15s, box-shadow .15s; }
.search:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--soft); }
.search input { flex:1; width:auto; border:0; outline:0; padding:8px 0; font:inherit; font-size:15px; background:transparent; }
.search .cta { flex:none; height:40px; }
.search .cta::after { content:none; }
.empty { display:none; color:var(--muted); }

/* Forms */
form { display:grid; gap:12px; }
form.card:hover { transform:none; }
form input, form textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font:inherit; font-size:15px; background:#fff; transition:border-color .15s, box-shadow .15s; }
form input:focus, form textarea:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 4px var(--soft); }
textarea { min-height:120px; resize:vertical; }
#form-status { color:var(--muted); font-size:13.5px; }
.band { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }

/* CTA band */
.band-cta { background:var(--brand); color:#fff; padding:64px 0; position:relative; overflow:hidden; }
.band-cta::after { content:""; position:absolute; right:-100px; top:-120px; width:360px; height:360px; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 60px rgba(255,255,255,.04), 0 0 0 120px rgba(255,255,255,.03); }
.band-cta .wrap { position:relative; z-index:1; }
.band-cta h3 { color:#fff; font-size:26px; margin:0 0 10px; }
.band-cta p { color:rgba(255,255,255,.8); margin:0 0 24px; }
.band-cta .cta { background:#fff; color:var(--ink) !important; }
.band-cta .cta:hover { background:var(--gold); }

.list { padding-left:20px; color:var(--ink-2); }
.list li { margin:6px 0; }
.list a { color:var(--brand); }
.further { margin-top:36px; }

/* Footer */
footer { background:var(--dark); color:#9AA4B5; padding:64px 0 28px; font-size:14px; }
.foot { display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:28px; }
footer h4 { color:#fff; margin:0 0 14px; font-size:14px; font-weight:600; }
footer .foot > div > a { display:block; color:#9AA4B5; padding:3px 0; transition:color .15s; }
footer .foot > div > a:hover { color:#fff; }
.contact-line { display:flex; align-items:center; gap:10px; margin:8px 0; }
.contact-line .ico { width:18px; height:18px; background:transparent; color:#6E7A8F; border-radius:0; }
.contact-line .ico svg { width:16px; height:16px; }
.contact-line a { color:#C5CDD9; }
.copy { margin-top:48px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; color:#6E7A8F; font-size:13px; }

/* ===== Home ===== */
.h-hero { padding:88px 0 80px; background:
  radial-gradient(600px 300px at 90% 10%, rgba(31,95,209,.10), transparent 70%),
  radial-gradient(500px 260px at 0% 100%, rgba(210,166,53,.08), transparent 70%), #fff; border-bottom:1px solid var(--line); }
.h-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.h-hero h1 { margin:0 0 22px; font-size:clamp(32px, 4vw, 48px); line-height:1.15; letter-spacing:-.03em; font-weight:750; }
.h-hero h1 em { font-style:normal; color:var(--brand); }
.h-hero .lead { margin:0 0 34px; max-width:560px; font-size:17.5px; color:var(--ink-2); line-height:1.8; }
.h-notes { display:flex; gap:22px; flex-wrap:wrap; margin-top:28px; font-size:13.5px; color:var(--muted); }
.h-notes span::before { content:"✓"; color:var(--brand); font-weight:700; margin-right:6px; }

.spec { background:var(--dark); color:#CDD3DE; border-radius:18px; overflow:hidden; font-family:var(--mono); font-size:12.5px; box-shadow:0 40px 80px -40px rgba(11,18,32,.55); }
.spec-top { display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid #1E2839; color:#6E7A8F; }
.spec-top i { width:10px; height:10px; border-radius:50%; background:#243048; }
.spec-top b { margin-left:10px; font-weight:400; }
.spec-top em { margin-left:auto; font-style:normal; font-size:11px; color:#8591A6; border:1px solid #2A3650; border-radius:5px; padding:1px 7px; }
.spec pre { margin:0; padding:20px 22px; line-height:1.85; overflow-x:auto; font-family:inherit; }
.spec .k { color:#8FB4FF; } .spec .s { color:#B7E3A8; } .spec .n { color:#F2C97D; } .spec .c { color:#56627A; }
.spec-foot { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 18px 18px; border-top:1px solid #1E2839; }
.spec-foot div { background:var(--dark-2); border-radius:10px; padding:11px 13px; }
.spec-foot small { display:block; color:#6E7A8F; font-size:11px; margin-bottom:3px; }
.spec-foot strong { color:#fff; font-weight:500; font-size:13.5px; }
.spec-foot .ok { color:#7EE0A1; }

.h-steps { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.h-step { padding:36px 28px 38px; border-right:1px solid var(--line); }
.h-step:first-child { padding-left:0; }
.h-step:last-child { border-right:0; }
.h-step span { font-family:var(--mono); font-size:12px; color:var(--muted); }
.h-step h3 { margin:12px 0 6px; }
.h-step p { margin:0; font-size:14.5px; color:var(--ink-2); }

.ds-card .ds-tag { font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em; margin-bottom:10px; }
.ds-card .ds-use { margin:auto 0 0; padding-top:14px; border-top:1px dashed var(--line); font-size:13px; color:var(--muted); }
.ds-card .ds-use b { color:var(--ink); font-weight:500; }
.ds-card .ico { margin-bottom:16px; }
.ds-card .more { margin-top:14px; }

.why { background:var(--dark); color:#fff; }
.why .eyebrow { color:#8FB0F2; }
.why h2 { color:#fff; }
.why .sec-head p { color:#98A3B6; }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#1E2839; border:1px solid #1E2839; border-radius:18px; overflow:hidden; }
.why-item { background:var(--dark); padding:40px 38px; transition:background .2s; }
.why-item:hover { background:#0F1829; }
.why-item .idx { font-family:var(--mono); font-size:12px; color:var(--gold); }
.why-item h3 { font-size:21px; margin:14px 0 10px; color:#fff; }
.why-item p { margin:0; color:#98A3B6; font-size:15px; }
.why-item ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; }
.why-item li { font-family:var(--mono); font-size:12px; color:#C0C8D6; border:1px solid #2A3650; border-radius:6px; padding:3px 9px; }

.ind-list { border-top:1px solid var(--line); }
.ind { display:grid; grid-template-columns:64px 240px 1fr 32px; gap:20px; align-items:center; padding:22px 8px; border-bottom:1px solid var(--line); transition:background .15s, padding .15s; }
.ind:hover { background:var(--bg); padding-left:18px; }
.ind .num { font-family:var(--mono); font-size:12px; color:var(--muted); }
.ind h3 { margin:0; }
.ind p { margin:0; color:var(--ink-2); font-size:15px; }
.ind .go { color:var(--muted); text-align:right; transition:color .15s, transform .15s; }
.ind:hover .go { color:var(--brand); transform:translateX(3px); }

.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trust { background:#fff; border:1px solid var(--line); border-radius:18px; padding:36px; }
.trust h3 { font-size:22px; margin:0 0 20px; }
.trust-row { display:grid; grid-template-columns:32px 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--line-2); }
.trust-row i { width:32px; height:32px; border-radius:9px; background:var(--soft); color:var(--brand); display:grid; place-items:center; font-style:normal; font-size:13px; font-weight:700; font-family:var(--mono); }
.trust-row b { display:block; font-weight:600; margin-bottom:2px; }
.trust-row span { color:var(--ink-2); font-size:14.5px; }
.trust .more { margin-top:12px; }

.h-cta { padding:0 0 96px; }
.h-cta-box { position:relative; overflow:hidden; background:var(--brand); color:#fff; border-radius:24px; padding:60px; display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.h-cta-box::after { content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border-radius:50%; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 60px rgba(255,255,255,.04), 0 0 0 120px rgba(255,255,255,.03); }
.h-cta-box h2 { color:#fff; margin:0 0 14px; }
.h-cta-box p { color:rgba(255,255,255,.82); margin:0; font-size:16px; }
.h-contact { position:relative; z-index:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:24px; display:grid; gap:14px; }
.h-contact small { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.62); }
.h-contact strong { font-weight:500; font-size:16px; }
.h-contact .cta { background:#fff; color:var(--ink) !important; margin-top:4px; }
.h-contact .cta:hover { background:var(--gold); }

@media (max-width:980px) {
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(2,1fr); }
  .h-grid, .trust-grid, .h-cta-box, .band { grid-template-columns:1fr; }
  .h-steps { grid-template-columns:repeat(2,1fr); }
  .h-step, .h-step:first-child { padding:28px 20px; border-bottom:1px solid var(--line); }
  .h-step:nth-child(2n) { border-right:0; }
  .ind { grid-template-columns:44px 1fr 24px; }
  .ind p { grid-column:2 / 3; }
  .foot { grid-template-columns:1fr 1fr; }
  nav { display:none; }
  .bar { justify-content:space-between; }
  .h-cta-box { padding:40px 28px; }
}
@media (max-width:620px) {
  section { padding:64px 0; }
  .g4, .g3, .why-grid, .h-steps { grid-template-columns:1fr; }
  .h-step { border-right:0; }
  .spec-foot { grid-template-columns:1fr; }
  .hero { padding:56px 0 48px; }
  .h-hero { padding:56px 0; }
  .why-item, .trust { padding:28px 24px; }
}