:root { --v12-ink:#11151b; --v12-red:#e5372f; --v12-white:#fff; --v12-type:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; background:#fff; overflow-x:hidden; }
body { font-family:var(--v12-type); -webkit-font-smoothing:antialiased; }
.v12-section { color:var(--v12-white); }
.v12-section { min-height:100vh; padding:48px 1.5vw 70px; background:var(--v12-ink); }
.v12-heading { width:min(1390px,97vw); margin:0 auto 32px; text-align:center; }
.v12-kicker { margin:0 0 14px; color:var(--v12-red); font-size:11px; font-weight:700; letter-spacing:.13em; }
.v12-heading h2 { margin:0 auto; max-width:1390px; font-size:clamp(44px,3vw,46px); line-height:1.02; letter-spacing:-.045em; font-weight:750; }
.v12-heading h2 span { display:block; white-space:nowrap; }
.v12-description { max-width:920px; margin:18px auto 0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.45; }
.v12-row { width:min(1390px,97vw); margin:0 auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.v12-card { position:relative; isolation:isolate; height:clamp(590px,68vh,650px); min-width:0; overflow:hidden; border-radius:14px; background:#2a2f35; outline:none; cursor:pointer; }
.v12-card::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.02) 25%,rgba(0,0,0,.74) 100%); }
.v12-pain-image,.v12-solution-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v12-pain-image { z-index:0; filter:grayscale(1) brightness(.54) contrast(1.05); }
.v12-solution-image { z-index:1; clip-path:inset(0 0 0 76%); transition:clip-path 460ms cubic-bezier(.22,1,.36,1),filter 460ms ease-out; filter:saturate(1.12) brightness(.88); }
.v12-card:hover:not(.is-manually-restored) .v12-solution-image,.v12-card:focus-visible:not(.is-manually-restored) .v12-solution-image { clip-path:inset(0); filter:saturate(1.05) brightness(.98); }
.v12-card.is-manually-restored .v12-solution-image { clip-path:inset(0 0 0 76%); }
.v12-divider { position:absolute; z-index:4; top:0; bottom:0; left:76%; width:2px; background:var(--v12-red); opacity:.95; transition:left 460ms cubic-bezier(.22,1,.36,1),opacity 240ms ease-out; }
.v12-card:hover:not(.is-manually-restored) .v12-divider,.v12-card:focus-visible:not(.is-manually-restored) .v12-divider { left:0; opacity:0; }
.v12-card.is-manually-restored .v12-divider { left:76%; opacity:.95; }
.v12-problem-copy,.v12-solution-copy { position:absolute; z-index:5; padding:14px; border:1px solid rgba(17,21,27,.18); border-radius:8px; background:rgba(255,255,255,.96); color:var(--v12-ink); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.v12-problem-copy { top:18px; right:18px; left:18px; max-width:76%; transition:opacity 260ms ease-out,transform 420ms cubic-bezier(.22,1,.36,1); }
.v12-problem-copy h2,.v12-solution-copy h3 { white-space:nowrap; }
.v12-problem-copy h2 { margin:0 0 10px; font-size:18px; line-height:1; font-weight:750; letter-spacing:-.025em; }
.v12-problem-copy>p { max-width:238px; margin:0; color:#4a555f; font-size:12.5px; line-height:1.48; }
.v12-card:hover:not(.is-manually-restored) .v12-problem-copy,.v12-card:focus-visible:not(.is-manually-restored) .v12-problem-copy { opacity:0; transform:translateY(-8px) scale(.94); transform-origin:left top; }
.v12-solution-copy { right:18px; bottom:18px; left:18px; border-top:3px solid var(--v12-red); opacity:0; transform:translateY(14px); transition:opacity 280ms ease-out 80ms,transform 420ms cubic-bezier(.22,1,.36,1) 80ms; }
.v12-card:hover:not(.is-manually-restored) .v12-solution-copy,.v12-card:focus-visible:not(.is-manually-restored) .v12-solution-copy { opacity:1; transform:translateY(0); }
.v12-solution-copy h3 { margin:0 0 9px; font-size:19px; line-height:1; font-weight:800; letter-spacing:-.03em; }
.v12-solution-copy>p { max-width:248px; margin:0; color:#414b55; font-size:12.5px; line-height:1.48; }
.v12-card:focus-visible { box-shadow:0 0 0 3px var(--v12-red),0 0 0 6px rgba(255,255,255,.55); }
.v12-card:hover { border:1px solid rgba(255,255,255,.42); }
.v12-after-space { height:110vh; background:#fff; }
@media (prefers-reduced-motion:reduce) { .v12-solution-image,.v12-divider,.v12-problem-copy,.v12-solution-copy { transition:none; } }