.project-detail{width:min(1200px,calc(100% - 112px));margin:auto;padding:50px 0 100px}.back-link{display:inline-flex;font-size:.85rem;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--line);margin-bottom:60px}.project-hero{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:100px}.project-icon img{width:64px;height:64px;object-fit:contain;border-radius:15px;margin-bottom:24px}.project-hero h1{font-size:clamp(3rem,6vw,6rem)}.project-hero h2{font-size:1.7rem;letter-spacing:-.03em;line-height:1.25;margin:24px 0;color:var(--accent)}.project-hero p{font-size:1rem;line-height:1.75}.project-tags,.stack-grid{display:flex;flex-wrap:wrap;gap:12px 20px;margin:28px 0;color:var(--muted);font-size:.85rem}.project-tags span,.stack-grid span{border-bottom:1px solid var(--line);padding-bottom:5px}.project-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.store-badge img{height:48px;width:auto}.project-status{font-size:.85rem;color:var(--accent)}.project-hero-visual{background:#142840;padding:35px;min-height:480px;display:flex;align-items:center;justify-content:center}.project-hero-visual img{width:100%;height:440px;object-fit:contain;animation:arrive .7s both}.detail-card{border-top:1px solid var(--line);padding:40px 0;margin-top:25px}.detail-card h2{font-size:2.1rem;margin-bottom:32px}.detail-grid,.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-card article h3{font-size:1.2rem;letter-spacing:-.03em;margin-bottom:15px}.detail-card article p{font-size:.95rem}.screens-wrapper{position:relative}.screens-row{display:flex;gap:28px;overflow:auto;scroll-snap-type:x mandatory;padding:12px 0 30px;scrollbar-color:var(--accent) var(--bg)}.screens-row img{height:440px;width:auto;max-width:none;object-fit:contain;scroll-snap-align:start;border-radius:20px}.screens-arrow{position:absolute;top:calc(50% - 24px);width:44px;height:44px;z-index:2;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:50%;font-size:1.8rem;display:grid;place-items:center}.screens-arrow.left{left:-22px}.screens-arrow.right{right:-22px}.screens-arrow:hover{border-color:var(--accent);color:var(--accent)}.project-cta{border-top:1px solid var(--line);padding-top:40px;margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:30px}.project-cta h2{font-size:2.1rem;margin:12px 0}.project-cta p{max-width:650px}.project-detail-page .footer{border-top:1px solid var(--line)}
@media(max-width:1000px){.project-detail{width:calc(100% - 64px)}.project-hero{gap:35px}.project-hero-visual{min-height:380px;padding:20px}.project-hero-visual img{height:350px}}
@media(max-width:760px){.project-detail{width:calc(100% - 40px);padding-top:24px}.back-link{margin-bottom:36px}.project-hero{grid-template-columns:1fr;gap:36px;margin-bottom:55px}.project-hero h1{font-size:3.5rem}.project-hero h2{font-size:1.5rem}.project-hero-visual{min-height:400px}.project-hero-visual img{height:360px}.detail-grid,.feature-grid{grid-template-columns:1fr;gap:30px}.screens-row img{height:360px}.screens-arrow.left{left:-12px}.screens-arrow.right{right:-12px}.project-cta{flex-direction:column;align-items:start}}

.project-hero-visual{position:relative;border:1px solid #52627a;background-image:linear-gradient(#a8b7c90a 1px,transparent 1px),linear-gradient(90deg,#a8b7c90a 1px,transparent 1px);background-size:48px 48px}
.project-hero-visual:before,.project-hero-visual:after{content:"";position:absolute;width:16px;height:16px;border-style:solid;border-color:var(--gold);pointer-events:none}
.project-hero-visual:before{top:10px;left:10px;border-width:1px 0 0 1px}.project-hero-visual:after{bottom:10px;right:10px;border-width:0 1px 1px 0}
.back-link,.project-tags,.stack-grid{font-family:var(--technical)}.detail-card h2:before{content:"+";color:var(--gold);font-family:var(--technical);font-size:1.1rem;display:inline-block;vertical-align:middle;margin-right:18px}.project-cta{border-top-color:#d9a35466}

/* App-specific atmosphere behind the page; mockup surfaces stay opaque. */
.project-detail-page[data-project="tasks"]{--project-wallpaper:url("assets/wallpaper-tasks.webp")}
.project-detail-page[data-project="spacelist"]{--project-wallpaper:url("assets/wallpaper-spacelist.webp")}
.project-detail-page[data-project="musicplayer"]{--project-wallpaper:url("assets/wallpaper-musicplayer.webp")}
.project-detail-page{background-color:var(--bg);background-image:linear-gradient(180deg,rgba(8,15,27,.60) 0%,rgba(8,15,27,.73) 52%,#080f1b 100%),var(--project-wallpaper);background-position:center top,center top;background-size:100% 1100px,auto 1100px;background-repeat:no-repeat}
.project-detail-page .btn{border-radius:7px;min-height:48px;padding:10px 24px}
.project-actions .btn{min-height:48px}
@media(max-width:760px){.project-detail-page{background-size:100% 1500px,auto 1500px;background-position:center top,60% top}}