:root {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --text: #0c1729;
  --muted: #5d687a;
  --line: #dce3ee;
  --blue: #3769e8;
  --blue-bright: #6f95ff;
  --blue-soft: #eaf1ff;
  --ink-blue: #0d2347;
  --navy: #091a33;
  --warm: #d8b278;
  --radius: 16px;
  --container: 1200px;
  --section-space: 144px;
  --shadow: 0 22px 60px -28px rgba(16, 33, 67, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Microsoft YaHei", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
.section-shell { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.section-rule { position: relative; border-top: 1px solid var(--line); padding-top: var(--section-space); }
.section-rule::before { content: ""; position: absolute; top: -2px; left: 0; width: 96px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--warm)); }
.eyebrow { margin: 0 0 28px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lead { font-size: 24px; line-height: 1.55; letter-spacing: -.02em; }

.site-header { position: sticky; z-index: 30; top: 0; width: 100%; height: 76px; padding: 0 max(32px, calc((100vw - var(--container)) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; background: rgba(9,26,51,.94); backdrop-filter: blur(18px); box-shadow: 0 12px 30px rgba(9,26,51,.12); }
.brand-mark { font-weight: 780; letter-spacing: -.035em; font-size: 18px; }
.brand-mark span { color: #86a8ff; }
.desktop-nav { display: flex; align-items: center; gap: 36px; margin-left: auto; margin-right: 32px; }
.desktop-nav a, .back-link { color: #c7d2e4; font-size: 14px; transition: color .2s; }
.desktop-nav a:hover, .back-link:hover { color: #fff; }
.language-toggle { min-width: 66px; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.language-toggle:hover { border-color: #86a8ff; background: rgba(255,255,255,.14); transform: translateY(-1px); }
.language-dot { width: 6px; height: 6px; border-radius: 50%; background: #86a8ff; }

.hero { width: 100%; max-width: none; min-height: calc(100vh - 76px); padding: 112px max(32px, calc((100vw - var(--container)) / 2)) 104px; display: grid; grid-template-columns: 1fr .92fr; gap: 72px; align-items: center; background: radial-gradient(circle at 85% 18%, rgba(111,149,255,.2), transparent 30%), linear-gradient(135deg, #f7faff 0%, #edf3ff 55%, #f8f4ed 100%); border-bottom: 1px solid var(--line); }
.hero h1, .case-hero h1 { margin: 0; white-space: pre-line; font-size: clamp(50px, 4.7vw, 70px); line-height: 1.08; letter-spacing: -.055em; font-weight: 680; }
.hero-subtitle { margin: 30px 0 18px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.hero-subtitle span { padding: 0 8px; color: var(--blue); }
.hero-description { max-width: 620px; margin: 0; color: #4b5a70; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.button { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 650; transition: transform .22s, box-shadow .22s, background .22s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--blue), #2858d5); color: #fff; box-shadow: 0 14px 34px -16px rgba(55,105,232,.72); }
.button-primary:hover { background: #3e6ee7; }
.button-secondary { border-color: #cbd5e4; background: rgba(255,255,255,.78); }
.button-secondary:hover { box-shadow: var(--shadow); }

.hero-profile { position: relative; min-height: 590px; display: grid; grid-template-rows: minmax(390px, 1fr) auto; gap: 18px; background: transparent; }
.profile-photo-wrap { position: relative; min-height: 390px; overflow: hidden; border: 1px solid rgba(9,26,51,.15); border-radius: 28px; background: #fff; box-shadow: 0 28px 60px -38px rgba(9,26,51,.45); }
.profile-photo-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(transparent, rgba(9,26,51,.34)); }
.profile-photo { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 35%; filter: saturate(.94) contrast(1.01); }
.profile-status { position: absolute; z-index: 2; left: 24px; bottom: 20px; padding: 9px 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(9,26,51,.62); backdrop-filter: blur(12px); font-size: 12px; }
.profile-status i { width: 7px; height: 7px; border-radius: 50%; background: #66ddb1; box-shadow: 0 0 0 4px rgba(102,221,177,.14); }
.profile-panel { padding: 26px 28px 30px; color: #fff; border-radius: 22px; background: var(--navy); box-shadow: 0 24px 50px -36px rgba(9,26,51,.6); }
.profile-label { margin: 0 0 9px; color: #8fabed; font-size: 10px; letter-spacing: .14em; }
.profile-panel h2 { margin: 0; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 30px; }
.profile-role { margin: 7px 0 22px; color: #bfcaDC; font-size: 14px; }
.profile-panel dl { margin: 0; display: grid; grid-template-columns: .7fr 1.15fr 1.6fr; gap: 16px; }
.profile-panel dl div { padding-top: 13px; border-top: 1px solid rgba(255,255,255,.14); }
.profile-panel dt { margin-bottom: 6px; color: #8392a9; font-size: 10px; }
.profile-panel dd { margin: 0; font-size: 12px; line-height: 1.5; }

.about, .selected-work, .thinking, .ai-section { padding-bottom: var(--section-space); display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.section-heading h2, .contact h2, .case-two-column h2 { margin: 0; white-space: pre-line; font-size: clamp(38px, 4vw, 54px); line-height: 1.16; letter-spacing: -.045em; font-weight: 680; }
.heading-en { margin: 18px 0 0; color: #8290a4; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.experience-note { margin-top: 44px; padding: 20px; border-left: 3px solid var(--warm); color: #dbe5f4; background: var(--ink-blue); }
.experience-note strong { display: block; margin-bottom: 7px; color: #8fabed; font-size: 11px; letter-spacing: .12em; }
.experience-note span { font-size: 13px; line-height: 1.6; }
.career-visual { position: relative; min-height: 310px; margin-top: 18px; overflow: hidden; border: 1px solid #d6dfec; border-radius: 18px; background: linear-gradient(145deg, #fff, #edf3ff); }
.career-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(55,105,232,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(55,105,232,.07) 1px, transparent 1px); background-size: 28px 28px; }
.career-label { position: absolute; z-index: 2; top: 20px; left: 20px; color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.career-visual svg { position: absolute; left: 18px; right: 18px; bottom: 16px; width: calc(100% - 36px); height: 150px; fill: none; stroke: #8a99ae; stroke-width: 1.2; }
.career-visual svg .career-accent { stroke: var(--blue); stroke-dasharray: 4 5; }
.career-path { position: absolute; z-index: 2; top: 58px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; }
.career-path span { display: flex; flex-direction: column; gap: 4px; }
.career-path b { color: var(--blue); font-size: 10px; }
.career-path i { color: var(--text); font-family: "Microsoft YaHei", sans-serif; font-size: 12px; font-style: normal; font-weight: 650; }
.career-path em { color: #9aa7b9; font-style: normal; }
.about-content > p { max-width: 680px; color: var(--muted); font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; line-height: 1.85; }
.about-content .lead { color: var(--text); }
.capability-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.capability-card { min-height: 220px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 35px -30px rgba(9,26,51,.45); }
.capability-card > span, .card-index, .problem-grid article > span { color: var(--blue); font-size: 11px; letter-spacing: .12em; }
.capability-card h3 { margin: 38px 0 10px; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 18px; line-height: 1.45; }
.capability-card p { margin: 0; color: var(--muted); font-family: "Noto Sans SC", sans-serif; font-size: 14px; line-height: 1.7; }

.selected-work, .ai-section { display: block; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 58px; }
.section-number { color: #c9c9c9; font-size: 64px; font-weight: 300; letter-spacing: -.06em; }
.project-card { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 570px; overflow: hidden; border: 1px solid #cfd9e8; border-radius: 24px; background: var(--surface); transition: transform .3s, box-shadow .3s; }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.project-visual { position: relative; overflow: hidden; min-height: 500px; padding: 72px 34px 34px; display: flex; align-items: center; background: linear-gradient(145deg, #0d2347, #173769); }
.project-visual::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.project-visual img { position: relative; z-index: 1; width: 100%; max-height: 410px; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 55px rgba(0,0,0,.3); }
.project-kicker { position: absolute; z-index: 2; top: 30px; left: 34px; color: #cbd8f2; font-size: 10px; letter-spacing: .16em; }
.product-map { position: relative; z-index: 1; width: 100%; padding: 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; color: #fff; background: rgba(5,18,39,.5); backdrop-filter: blur(8px); }
.product-map-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.product-map-head small { color: #86a8ff; font-size: 9px; letter-spacing: .14em; }
.product-map-head strong { margin: 8px 0 5px; font-family: "Microsoft YaHei", sans-serif; font-size: 28px; }
.product-map-head span { color: #b9c7dc; font-size: 12px; }
.product-map-line { width: 1px; height: 34px; margin: 14px auto 0; background: linear-gradient(#86a8ff, rgba(134,168,255,.2)); }
.product-map-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-map-grid::before { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 1px; background: rgba(134,168,255,.4); }
.product-map-grid div { padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.055); }
.product-map-grid b { color: #86a8ff; font-size: 9px; }
.product-map-grid strong { display: block; margin: 10px 0 5px; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; }
.product-map-grid span { color: #9eb0ca; font-size: 10px; }
.product-map-foot { margin-top: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 10px; color: #ccd7e9; background: rgba(55,105,232,.16); }
.product-map-foot span { color: #86a8ff; font-size: 8px; letter-spacing: .13em; }
.product-map-foot strong { font-family: "Microsoft YaHei", sans-serif; font-size: 11px; text-align: right; }
.project-copy { padding: 54px; display: flex; flex-direction: column; justify-content: center; }
.project-cn { color: var(--blue); font-family: "Noto Sans SC", sans-serif; font-size: 18px; font-weight: 600; }
.project-copy h3 { margin: 8px 0 10px; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.2; letter-spacing: -.04em; }
.project-en { margin: 0 0 24px !important; color: #8290a4 !important; font-family: Inter, Arial, sans-serif !important; font-size: 10px !important; font-weight: 700; letter-spacing: .14em; line-height: 1.4 !important; }
.project-copy > p:not(.project-cn) { color: var(--muted); font-family: "Noto Sans SC", sans-serif; line-height: 1.8; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tag-list span { padding: 8px 12px; border-radius: 999px; color: #315bbd; background: var(--blue-soft); font-size: 11px; font-weight: 650; }
.project-button { width: fit-content; margin-top: 28px; }

.thinking-flow { display: grid; grid-template-columns: repeat(3,1fr); }
.thinking-flow article { position: relative; min-height: 330px; padding: 26px; border: 1px solid var(--line); border-right: 0; background: var(--surface); }
.thinking-flow article:last-child { border-right: 1px solid var(--line); }
.thinking-flow article > span { color: var(--muted); font-size: 11px; }
.flow-icon { margin: 62px 0 50px; font-size: 44px; font-weight: 300; }
.thinking-flow h3 { margin: 0 0 10px; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 22px; }
.thinking-flow p { margin: 0; color: var(--muted); font-family: "Noto Sans SC", sans-serif; font-size: 14px; line-height: 1.75; }
.section-intro { max-width: 420px; margin: 0; color: var(--muted); font-family: "Noto Sans SC", sans-serif; line-height: 1.8; }
.exploration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.exploration-card { min-height: 420px; padding: 34px; display: flex; flex-direction: column; justify-content: end; overflow: hidden; border: 1px solid #ccd8eb; border-radius: 20px; background: linear-gradient(145deg, #fff, #eaf1ff); }
.exploration-card.dark { color: #fff; background: var(--ink-blue); }
.exploration-card .card-index { margin-bottom: auto; }
.exploration-card h3 { margin: 30px 0 12px; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 26px; line-height: 1.35; letter-spacing: -.035em; }
.exploration-card p { max-width: 420px; margin: 0; color: var(--muted); font-family: "Noto Sans SC", sans-serif; line-height: 1.8; }
.exploration-card.dark p { color: #aab5ca; }
.card-orbit, .card-network { position: relative; width: 160px; height: 130px; margin: auto; }
.card-orbit i { position: absolute; inset: 10px 25px; border: 1px solid var(--blue); border-radius: 50%; transform: rotate(calc(var(--i, 0) * 60deg)); }
.card-orbit i:nth-child(2){transform:rotate(60deg)}.card-orbit i:nth-child(3){transform:rotate(120deg)}
.card-network i { position: absolute; width: 16px; height: 16px; border: 3px solid #7da0ff; border-radius: 50%; }
.card-network i:nth-child(1){left:10px;top:60px}.card-network i:nth-child(2){left:74px;top:15px}.card-network i:nth-child(3){right:10px;top:65px}.card-network i:nth-child(4){left:74px;bottom:5px}

.contact { width: min(var(--container), calc(100% - 64px)); margin: 0 auto 64px; padding: 96px 72px; color: #fff; border-radius: 28px; background: linear-gradient(115deg, var(--navy), #112e5a); box-shadow: 0 28px 70px -45px rgba(9,26,51,.7); }
.contact-inner { width: 100%; }
.contact-row { display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.contact h2 { font-size: clamp(48px, 6vw, 80px); }
.contact-links { width: min(380px,100%); }
.contact-links a { padding: 20px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 15px; }
.contact-links a:hover { color: #8fabed; }
footer { min-height: 90px; padding: 0 max(32px, calc((100vw - var(--container)) / 2)); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: #9eacc2; background: #061429; font-size: 10px; letter-spacing: .13em; }

/* Case study */
.back-link { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 28px; }
.case-hero { padding: 120px 0 110px; display: grid; grid-template-columns: 1fr 320px; gap: 80px; align-items: end; }
.case-cn { margin: 0 0 16px; color: var(--blue); font-family: "Noto Sans SC", sans-serif; font-size: 22px; font-weight: 600; }
.case-title-en { margin: 18px 0 0; color: #8290a4; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.case-deck { max-width: 720px; margin: 34px 0 0; color: var(--muted); font-family: "Noto Sans SC", sans-serif; font-size: 18px; line-height: 1.85; }
.case-meta dl { margin: 0; }
.case-meta dl div { padding: 18px 0; border-top: 1px solid var(--line); }
.case-meta dt { margin-bottom: 7px; color: var(--muted); font-size: 10px; letter-spacing: .13em; }
.case-meta dd { margin: 0; font-size: 14px; }
.case-overview, .case-section, .reflection { padding-bottom: 130px; }
.case-section-index { margin-bottom: 68px; color: var(--blue); font-size: 11px; letter-spacing: .14em; }
.case-two-column { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.case-two-column > div > p:not(.lead), .case-two-column > p { color: var(--muted); font-family: "Noto Sans SC", sans-serif; line-height: 1.9; }
.subsection-heading { max-width: 820px; margin-top: 76px; }
.subsection-heading > span { color: var(--blue); font-size: 10px; letter-spacing: .14em; }
.subsection-heading h3 { margin: 16px 0 12px; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.35; }
.subsection-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.problem-grid { margin-top: 80px; display: grid; grid-template-columns: repeat(4,1fr); }
.problem-grid article { min-height: 230px; padding: 24px; border: 1px solid var(--line); border-right: 0; }
.problem-grid article:last-child { border-right: 1px solid var(--line); }
.problem-grid h3 { margin: 54px 0 12px; font-family: "Noto Sans SC", sans-serif; font-size: 18px; }
.problem-grid p { margin: 0; color: var(--muted); font-family: "Noto Sans SC", sans-serif; font-size: 14px; line-height: 1.75; }
.case-figure { margin: 80px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: #fafafa; }
.case-figure img { width: 100%; border-radius: 12px; }
.case-figure figcaption { padding: 14px 4px 3px; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.case-visual-frame { margin: 80px 0 0; padding: 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #fff, #f0f4fb); }
.case-visual-frame figcaption { padding-top: 24px; color: #7a879a; font-size: 9px; letter-spacing: .15em; }
.dark-frame { color: #fff; border-color: #233e68; background: linear-gradient(145deg, #0d2347, #173769); }
.dark-frame figcaption { color: #8fabd3; }
.persona-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.persona-visual article { min-height: 390px; padding: 24px; display: flex; flex-direction: column; border: 1px solid #d5deeb; border-radius: 16px; background: #fff; }
.persona-visual article > span { color: var(--blue); font-size: 9px; letter-spacing: .12em; }
.persona-avatar { width: 54px; height: 54px; margin: 32px 0 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink-blue); font-family: "Microsoft YaHei", sans-serif; font-weight: 700; }
.persona-visual h3 { margin: 0 0 10px; font-family: "Microsoft YaHei", sans-serif; font-size: 20px; }
.persona-visual p { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.persona-pain { margin: 0 0 20px; padding: 16px; border-left: 3px solid var(--blue); background: #f1f5fc; }
.persona-pain small { display: block; margin-bottom: 8px; color: var(--blue); font-size: 8px; letter-spacing: .12em; }
.persona-pain strong { color: #26364d; font-size: 12px; line-height: 1.65; }
.persona-visual b { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: #315bbd; font-size: 11px; }
.architecture-core { width: min(420px, 80%); margin: 0 auto 54px; padding: 24px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.08); text-align: center; }
.architecture-core small { color: #86a8ff; font-size: 9px; letter-spacing: .13em; }
.architecture-core strong { margin: 9px 0 5px; font-family: "Microsoft YaHei", sans-serif; font-size: 28px; }
.architecture-core span { color: #b9c7dc; font-size: 12px; }
.architecture-branches { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.architecture-branches::before { content: ""; position: absolute; top: -28px; left: 12.5%; right: 12.5%; height: 1px; background: rgba(134,168,255,.45); }
.architecture-branches article { position: relative; min-height: 190px; padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.055); }
.architecture-branches article::before { content: ""; position: absolute; top: -28px; left: 50%; width: 1px; height: 28px; background: rgba(134,168,255,.45); }
.architecture-branches b { color: #86a8ff; font-size: 10px; }
.architecture-branches h3 { margin: 34px 0 10px; font-family: "Microsoft YaHei", sans-serif; font-size: 16px; }
.architecture-branches p { margin: 0; color: #aebbd0; font-size: 11px; line-height: 1.7; }
.flow-stage-labels { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 12px; margin-bottom: 14px; }
.flow-stage-labels span { padding: 9px 12px; border-radius: 8px; background: #e8effd; color: #2d59bd; font-size: 10px; letter-spacing: .08em; text-align: center; }
.flow-visual { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; }
.flow-visual.flow-seven { grid-template-columns: repeat(13, auto); }
.flow-visual article { min-height: 190px; padding: 20px 14px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #d4deec; border-radius: 14px; background: #fff; }
.flow-seven article { width: 122px; min-height: 235px; }
.flow-visual article.flow-human { border-color: #3769e8; box-shadow: inset 0 0 0 1px #3769e8; background: #f2f6ff; }
.flow-visual article b { color: var(--blue); font-size: 10px; }
.flow-visual article span { font-family: "Microsoft YaHei", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.45; }
.flow-visual article p { margin: 8px 0 auto; color: var(--muted); font-size: 10px; line-height: 1.6; }
.flow-visual article small { color: #8c98a9; font-size: 8px; letter-spacing: .1em; }
.flow-visual > i { padding: 0 9px; display: grid; place-items: center; color: #8aa5e7; font-style: normal; }
.flow-loop { margin-top: 16px; padding: 13px 18px; border: 1px dashed #8aa5e7; border-radius: 10px; color: #315bbd; font-size: 12px; text-align: center; }
.matrix-visual { position: relative; height: 430px; margin: 10px 10px 24px 44px; border-left: 1px solid #93a1b5; border-bottom: 1px solid #93a1b5; background-image: linear-gradient(rgba(55,105,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(55,105,232,.06) 1px, transparent 1px); background-size: 25% 25%; }
.axis-y { position: absolute; left: -42px; top: 10px; writing-mode: vertical-rl; color: #69778a; font-size: 10px; }
.axis-x { position: absolute; right: 0; bottom: -28px; color: #69778a; font-size: 10px; }
.matrix-dot { position: absolute; display: flex; align-items: center; gap: 8px; }
.matrix-dot i { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: #9aa9bc; box-shadow: 0 0 0 2px #9aa9bc; }
.matrix-dot strong { font-size: 11px; }
.dot-arch { left: 12%; top: 64%; }.dot-pin { left: 32%; top: 48%; }.dot-forma { left: 62%; top: 30%; }.dot-jzxz { left: 73%; top: 12%; }
.dot-jzxz i { background: var(--blue); box-shadow: 0 0 0 2px var(--blue), 0 0 0 9px rgba(55,105,232,.12); }
.dot-jzxz strong { color: var(--blue); font-size: 14px; }
.dot-jzxz small { padding: 4px 7px; border-radius: 999px; color: #315bbd; background: var(--blue-soft); font-size: 9px; }
.competition-table { margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.competition-row { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr 1.4fr; border-top: 1px solid var(--line); }
.competition-row:first-child { border-top: 0; }
.competition-row > * { margin: 0; padding: 18px; border-left: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.competition-row > *:first-child { border-left: 0; }
.competition-head { background: #0d274b; color: #fff; }
.competition-head span { color: #b9c9df; font-size: 10px; letter-spacing: .08em; }
.competition-row.is-highlight { background: #eef4ff; }
.competition-row.is-highlight strong { color: var(--blue); }
.review-grid { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review-grid article { min-height: 360px; padding: 42px; border-radius: 22px; }
.review-grid article > span { font-size: 10px; letter-spacing: .14em; }
.review-grid h3 { margin: 54px 0 26px; font-family: "Microsoft YaHei", sans-serif; font-size: 28px; }
.review-grid ul { margin: 0; padding: 0; list-style: none; }
.review-grid li { position: relative; padding: 16px 0 16px 26px; border-top: 1px solid currentColor; font-size: 14px; line-height: 1.75; }
.review-grid li::before { content: "＋"; position: absolute; left: 0; }
.review-advantage { background: #0d2a55; color: #fff; }
.review-advantage > span { color: #86a8ff; }
.review-advantage li { border-color: rgba(255,255,255,.18); color: #d7e1f0; }
.review-limit { border: 1px solid #e1d4c3; background: #fbf7f0; color: #2b241e; }
.review-limit > span { color: #a47439; }
.review-limit li { border-color: #e1d4c3; color: #685c50; }
.opportunity-visual { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.opportunity-visual article { min-height: 270px; padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.055); }
.opportunity-visual span { color: #86a8ff; font-size: 10px; }
.opportunity-visual h3 { margin: 54px 0 14px; font-family: "Microsoft YaHei", sans-serif; font-size: 19px; line-height: 1.45; }
.opportunity-visual article small { display: block; margin-bottom: 14px; color: #8eb0ff; font-size: 10px; line-height: 1.6; }
.opportunity-visual p { margin: 0; color: #aebbd0; font-size: 12px; line-height: 1.8; }
.opportunity-list p { margin: 0; padding: 18px 0; display: flex; gap: 24px; border-top: 1px solid var(--line); font-family: "Noto Sans SC", sans-serif; }
.opportunity-list b { color: var(--blue); font-family: Inter, sans-serif; font-size: 12px; }
.next-project { margin-top: 90px; padding: 30px 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next-project span { color: var(--muted); font-family: "Noto Sans SC", sans-serif; }
.next-project strong { font-size: 24px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --section-space: 96px; }
  .section-shell { width: min(100% - 40px, var(--container)); }
  .desktop-nav { display: none; }
  .site-header { height: 68px; padding-inline: 20px; }
  .hero { width: 100%; min-height: auto; padding: 84px 20px 80px; grid-template-columns: 1fr; gap: 56px; }
  .hero-profile { min-height: 560px; }
  .about, .thinking { grid-template-columns: 1fr; gap: 48px; }
  .project-card { grid-template-columns: 1fr; }
  .project-copy { padding: 40px; }
  .architecture-branches { grid-template-columns: 1fr 1fr; }
  .architecture-branches::before, .architecture-branches article::before { display: none; }
  .flow-visual, .flow-visual.flow-seven { grid-template-columns: 1fr; gap: 10px; }
  .flow-seven article { width: auto; }
  .flow-visual > i { transform: rotate(90deg); }
  .flow-stage-labels { display: none; }
  .competition-table { overflow-x: auto; }
  .competition-row { min-width: 760px; }
  .review-grid { grid-template-columns: 1fr; }
  .section-heading-row { align-items: start; }
  .section-number { font-size: 44px; }
  .case-hero { grid-template-columns: 1fr; padding: 84px 0 80px; }
  .case-meta { max-width: 420px; }
  .case-two-column { grid-template-columns: 1fr; gap: 36px; }
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .problem-grid article:nth-child(2) { border-right: 1px solid var(--line); }
}

@media (max-width: 560px) {
  :root { --section-space: 80px; }
  .section-shell { width: calc(100% - 32px); }
  .hero { width: 100%; padding: 68px 16px 72px; }
  .hero h1 { font-size: 38px; line-height: 1.12; letter-spacing: -.045em; }
  .case-hero h1 { font-size: 42px; line-height: 1.08; }
  .hero-subtitle { font-size: 16px; line-height: 1.5; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .hero-profile { min-height: 520px; border-radius: 20px; }
  .brand-mark { font-size: 13px; letter-spacing: -.02em; }
  .profile-photo-wrap { min-height: 350px; border-radius: 20px; }
  .profile-panel { padding: 22px; }
  .profile-panel dl { grid-template-columns: 1fr 1fr; }
  .profile-panel dl div:last-child { grid-column: 1 / -1; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 160px; }
  .project-visual { min-height: 380px; padding: 64px 18px 24px; }
  .product-map { padding: 18px; }
  .product-map-grid { grid-template-columns: 1fr; }
  .product-map-grid::before { display: none; }
  .product-map-foot { align-items: flex-start; flex-direction: column; }
  .product-map-foot strong { text-align: left; }
  .project-copy { padding: 30px 24px; }
  .thinking-flow { grid-template-columns: 1fr; }
  .thinking-flow article { min-height: 240px; border-right: 1px solid var(--line); border-bottom: 0; }
  .thinking-flow article:last-child { border-bottom: 1px solid var(--line); }
  .flow-icon { margin: 34px 0; }
  .section-heading-row, .contact-row { display: block; }
  .section-number { display: none; }
  .section-intro { margin-top: 24px; }
  .exploration-grid { grid-template-columns: 1fr; }
  .exploration-card { min-height: 370px; }
  .contact { width: calc(100% - 32px); margin-bottom: 32px; padding: 56px 24px; border-radius: 22px; }
  .contact-links { margin-top: 42px; }
  footer { padding: 24px 16px; gap: 20px; flex-direction: column; align-items: flex-start; }
  .back-link { margin-right: 14px; }
  .back-link span:last-child { display: none; }
  .case-deck { font-size: 16px; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-grid article, .problem-grid article:nth-child(2) { border-right: 1px solid var(--line); border-bottom: 0; }
  .problem-grid article:last-child { border-bottom: 1px solid var(--line); }
  .case-figure { margin-top: 52px; padding: 6px; border-radius: 12px; overflow-x: auto; }
  .case-figure img { min-width: 720px; max-width: none; }
  .case-figure figcaption { position: sticky; left: 0; }
  .case-visual-frame { margin-top: 52px; padding: 18px; border-radius: 16px; }
  .persona-visual, .architecture-branches, .opportunity-visual { grid-template-columns: 1fr; }
  .persona-visual article { min-height: 260px; }
  .subsection-heading { margin-top: 52px; }
  .architecture-core { width: 100%; margin-bottom: 18px; }
  .architecture-branches article { min-height: 150px; }
  .flow-visual article { min-height: 140px; }
  .matrix-visual { height: 350px; margin-left: 28px; }
  .matrix-dot strong { font-size: 9px; }
  .dot-jzxz { left: 58%; }
  .opportunity-visual article { min-height: 220px; }
  .review-grid { margin-top: 52px; }
  .review-grid article { min-height: auto; padding: 28px 22px; }
  .review-grid h3 { margin-top: 34px; font-size: 24px; }
  .next-project { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}