.project-detail-page { min-height: 100vh; background: radial-gradient(circle at 18% 18%, rgba(2, 201, 245, .1), transparent 24%), #07101f; }.project-detail-page[data-project="hellowork"] { background: radial-gradient(circle at 18% 18%, rgba(255, 121, 0, .1), transparent 24%), #07101f; }.project-detail-page[data-project="franciprivate"] { background: radial-gradient(circle at 18% 18%, rgba(0, 230, 148, .08), transparent 24%), #07101f; }
.project-detail { padding: 76px 0 106px; }.back-link { display: inline-flex; color: #8fa9c9; font: 12px var(--mono); text-decoration: none; transition: color .2s; }.back-link:hover { color: var(--cyan); }.project-detail-content { display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: center; gap: 90px; margin-top: 63px; }.project-detail-intro h1 { max-width: 710px; margin: 22px 0 15px; font-size: clamp(47px, 5.4vw, 72px); line-height: 1.03; letter-spacing: -.065em; }.project-detail-intro > p { max-width: 700px; color: var(--muted); font-size: 17px; line-height: 1.75; }.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 29px; }.project-tags span { padding: 5px 10px; border: 1px solid #1a4768; border-radius: 7px; color: #9db9d8; background: rgba(0, 176, 220, .06); font: 10px var(--mono); }.project-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }.project-actions .button { min-width: 218px; justify-content: center; text-decoration: none; }.project-actions .button-disabled { border: 1px solid #293b53; color: #8ba0ba; background: #101d31; cursor: not-allowed; }.project-download-note { margin-top: 14px; color: #7895b6 !important; font-size: 11px !important; }
.project-overview { padding: 31px; border: 1px solid #1b4063; border-radius: 18px; background: #0a152a; box-shadow: 0 26px 65px rgba(0, 0, 0, .2); }.project-symbol { display: grid; place-items: center; width: 61px; height: 61px; border: 1px solid #07516f; border-radius: 16px; color: var(--cyan); background: rgba(0, 176, 220, .11); font: 20px var(--mono); font-weight: 700; }.project-detail-page[data-project="hellowork"] .project-symbol { border-color: #783709; color: var(--orange); background: rgba(255, 121, 0, .1); }.project-detail-page[data-project="franciprivate"] .project-symbol { border-color: #087452; color: var(--green); background: rgba(0, 230, 148, .09); }.project-overview .project-status { display: block; width: fit-content; margin-top: 24px; padding: 5px 8px; border: 1px solid #1f3858; border-radius: 7px; color: #89a7cb; font: 10px var(--mono); }.project-overview h2 { margin: 18px 0; font-size: 20px; }.project-features { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }.project-features li { display: flex; gap: 10px; color: #9ab4d3; font-size: 13px; line-height: 1.5; }.project-features li::before { content: "✓"; color: var(--green); font-weight: 800; }
.project-story { padding: 97px 0 105px; background: #0a162a; }.project-story-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 125px; }.project-story h2 { max-width: 460px; margin: 20px 0 0; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.13; letter-spacing: -.055em; }.project-story-copy > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }.project-audience { margin-top: 30px; padding-top: 21px; border-top: 1px solid #1b3552; }.project-audience span { display: block; color: #7d99ba; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.project-audience strong { display: block; margin-top: 8px; color: #dce8f5; font-size: 15px; }
@media (max-width: 850px) { .project-detail-content,.project-story-grid { grid-template-columns: 1fr; gap: 45px; }.project-overview { max-width: 520px; }.project-story-grid { gap: 34px; }.project-detail { padding-top: 52px; } }
@media (max-width: 500px) { .project-detail { padding: 38px 0 72px; }.project-detail-content { margin-top: 42px; }.project-detail-intro h1 { font-size: 46px; }.project-overview { padding: 25px 21px; }.project-actions .button { width: 100%; }.project-story { padding: 72px 0; } }