:root { color-scheme: dark; --bg:#06150f; --deep:#020a07; --surface:#0d2419; --line:rgba(218,248,209,.14); --text:#eff8ec; --muted:#9caf9f; --accent:#c9f5b8; --mint:#77d8b3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--text); background:linear-gradient(160deg,#06150f,#030b08 58%,#06140e); font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.case-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.case-header { position:absolute; z-index:5; top:0; right:0; left:0; display:flex; align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 48px)); height:82px; margin:auto; border-bottom:1px solid rgba(255,255,255,.16); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:1.12rem; font-weight:800; letter-spacing:.16em; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#071b13; background:linear-gradient(145deg,var(--accent),#8be5bd); font-size:.96rem; letter-spacing:0; }
.back-link { color:#d4e2d3; font-size:.86rem; }
.case-hero { position:relative; display:flex; min-height:92vh; align-items:flex-end; overflow:hidden; }
.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:center; }
.hero-shade { background:linear-gradient(90deg,rgba(2,9,6,.91) 0%,rgba(2,9,6,.58) 43%,rgba(2,9,6,.08) 78%),linear-gradient(0deg,rgba(2,9,6,.78),transparent 46%); }
.hero-content { position:relative; z-index:1; padding-bottom:8vh; }
.eyebrow,.section-label { margin:0 0 18px; color:var(--mint); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.hero-content h1 { max-width:800px; margin:0; font-size:clamp(4rem,8.5vw,8rem); line-height:.92; letter-spacing:-.065em; }
.hero-summary { max-width:620px; margin:28px 0 0; color:#d0dccf; font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.8; }
.hero-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.hero-tags span { padding:8px 12px; border:1px solid rgba(255,255,255,.19); border-radius:999px; background:rgba(5,20,13,.52); backdrop-filter:blur(10px); color:#dce7db; font-size:.76rem; }
.overview { display:grid; grid-template-columns:1fr .92fr; gap:70px; padding:130px 0 100px; }
.overview h2,.item-copy h2,.process-grid h2,.prompt-head h2,.case-cta h2 { margin:0; font-size:clamp(2.35rem,4.6vw,4.2rem); line-height:1.12; letter-spacing:-.047em; }
.overview-copy p { margin:0 0 20px; color:var(--muted); font-size:1rem; line-height:1.9; }
.overview-data { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.overview-data div { display:flex; align-items:baseline; justify-content:center; gap:12px; padding:30px; border-right:1px solid var(--line); }
.overview-data div:last-child { border-right:0; }
.overview-data strong { color:var(--accent); font-size:2.3rem; }
.overview-data span { color:#8ea191; font-size:.82rem; }
.compare-list { display:grid; gap:150px; padding:50px 0 150px; }
.case-item { display:grid; grid-template-columns:.68fr 1.32fr; align-items:center; gap:64px; }
.case-item.reverse { grid-template-columns:1.32fr .68fr; }
.case-item.reverse .item-copy { order:2; }
.item-copy { position:relative; }
.item-number { position:absolute; top:-62px; right:0; color:rgba(201,245,184,.12); font-size:5rem; font-weight:800; line-height:1; }
.item-copy h2 { font-size:clamp(2rem,3.6vw,3.4rem); }
.item-copy > p:not(.section-label) { margin:24px 0 0; color:var(--muted); font-size:.97rem; line-height:1.85; }
.item-copy ul { display:grid; gap:9px; margin:25px 0 0; padding:0; color:#c5d1c4; font-size:.82rem; list-style:none; }
.item-copy li { position:relative; padding-left:17px; }
.item-copy li::before { position:absolute; top:.46em; left:0; width:5px; height:5px; border-radius:50%; background:var(--mint); content:""; }
.compare { --split:52%; position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(222,248,214,.16); border-radius:24px; background:#0d2117; box-shadow:0 28px 70px rgba(0,8,5,.4); }
.compare.portrait { width:min(100%,620px); justify-self:center; aspect-ratio:4/5; }
.compare-before,.compare-after,.compare-after img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-after { overflow:hidden; clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.compare-after img { max-width:none; }
.compare-line { position:absolute; z-index:2; top:0; bottom:0; left:var(--split); width:2px; background:rgba(255,255,255,.9); transform:translateX(-1px); pointer-events:none; }
.compare-line span { position:absolute; top:50%; left:50%; display:grid; width:44px; height:44px; place-items:center; border:2px solid #fff; border-radius:50%; background:rgba(4,20,13,.72); box-shadow:0 5px 20px rgba(0,0,0,.3); transform:translate(-50%,-50%); }
.compare-line span::before { color:#fff; content:"↔"; font-size:1rem; }
.compare input { position:absolute; z-index:3; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.compare-label { position:absolute; z-index:2; top:17px; padding:7px 10px; border:1px solid rgba(255,255,255,.26); border-radius:999px; background:rgba(3,15,10,.62); backdrop-filter:blur(10px); color:#fff; font-size:.7rem; font-weight:700; }
.label-before { right:17px; }.label-after { left:17px; }
.process-section { padding:130px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(135deg,rgba(23,59,42,.65),rgba(4,17,12,.28)); }
.process-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.process-grid ol { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.process-grid li { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid var(--line); }
.process-grid li:first-child { padding-top:0; }
.process-grid li > span { color:var(--mint); font-size:.74rem; font-weight:800; }
.process-grid strong { font-size:1.05rem; }
.process-grid p { margin:8px 0 0; color:var(--muted); font-size:.9rem; line-height:1.75; }
.prompt-section { padding:130px 0; }
.prompt-head { display:grid; grid-template-columns:1fr .72fr; align-items:end; gap:70px; margin-bottom:55px; }
.prompt-head > p { margin:0 0 7px; color:var(--muted); font-size:.95rem; line-height:1.8; }
.prompt-section details { border-top:1px solid var(--line); }
.prompt-section details:last-child { border-bottom:1px solid var(--line); }
.prompt-section summary { position:relative; padding:24px 48px 24px 0; cursor:pointer; color:#dce9da; font-weight:700; list-style:none; }
.prompt-section summary::-webkit-details-marker { display:none; }
.prompt-section summary::after { position:absolute; right:8px; color:var(--mint); content:"+"; font-size:1.4rem; font-weight:300; }
.prompt-section details[open] summary::after { content:"−"; }
.prompt-section details p { max-width:920px; margin:-3px 0 26px; padding:22px; border-left:2px solid rgba(119,216,179,.55); color:#a9baac; background:rgba(17,45,32,.38); font-size:.9rem; line-height:1.9; }
.case-cta { padding:120px 0; text-align:center; background:radial-gradient(circle at 50% 50%,rgba(87,205,158,.13),transparent 30rem),#020906; }
.case-cta h2 { max-width:850px; margin:0 auto; }
.case-cta a { display:inline-flex; margin-top:38px; padding:14px 20px; border-radius:12px; color:#092117; background:linear-gradient(135deg,#d1f8c0,#8be4b7); font-size:.9rem; font-weight:800; }
footer { border-top:1px solid var(--line); background:#020906; }
footer .case-shell { display:flex; justify-content:space-between; gap:25px; padding-top:40px; padding-bottom:40px; color:#708274; font-size:.74rem; }
@media (max-width:980px) { .overview,.case-item,.case-item.reverse,.process-grid,.prompt-head { grid-template-columns:1fr; gap:38px; } .case-item.reverse .item-copy { order:0; } .compare-list { gap:105px; } .item-copy { max-width:680px; } }
@media (max-width:680px) { .case-shell,.case-header { width:min(100% - 32px,1180px); } .case-header { height:70px; } .case-hero { min-height:82vh; } .hero-shade { background:linear-gradient(0deg,rgba(2,9,6,.91),rgba(2,9,6,.18) 80%); } .hero-content { padding-bottom:52px; } .hero-content h1 { font-size:clamp(3.2rem,16vw,5.2rem); } .overview { padding:88px 0 65px; } .overview-data div { align-items:center; flex-direction:column; gap:3px; padding:21px 8px; } .overview-data strong { font-size:1.8rem; } .compare-list { gap:86px; padding:40px 0 90px; } .case-item { gap:26px; } .compare { border-radius:16px; } .item-number { top:-38px; font-size:3.4rem; } .process-section,.prompt-section,.case-cta { padding:88px 0; } footer .case-shell { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }