.project-hero{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--color-bg);padding-top:100px}.project-hero-overlay{display:none}.project-hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:60px 24px 48px;width:100%;text-align:center}.project-hero-content .section-tag{margin-bottom:16px}.project-hero-content h1{font-family:var(--font-display);font-size:clamp(36px,5vw,60px);font-weight:700;margin-bottom:16px}.project-hero-content .project-tagline{font-size:clamp(16px,1.5vw,19px);color:var(--color-text-muted);max-width:600px;margin:0 auto;line-height:1.7}.project-body{position:relative;z-index:10;background:var(--color-bg)}.project-section{max-width:900px;margin:0 auto;padding:64px 24px}.project-section h2{font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:20px;color:var(--color-text)}.project-section p{font-size:16px;line-height:1.8;color:var(--color-text-muted);margin-bottom:16px}.project-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto;padding:0 24px 64px}.meta-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:28px}.meta-card h4{font-family:var(--font-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);margin-bottom:10px}.meta-card p{font-size:15px;line-height:1.6;color:var(--color-text-muted)}.project-screenshot{max-width:900px;margin:0 auto;padding:0 24px 64px}.project-screenshot img{width:100%;border-radius:12px;border:1px solid var(--color-border)}.project-showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;max-width:1200px;margin:0 auto;padding:80px 24px;background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.showcase-devices{position:relative;height:420px}.device-mockup{position:absolute;cursor:pointer;transition:width 1s cubic-bezier(.16,1,.3,1),left 1s cubic-bezier(.16,1,.3,1),right 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1),bottom 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),opacity .6s ease}.device-mockup img{width:100%;border-radius:0;box-shadow:none;mix-blend-mode:lighten;transition:filter .8s ease}.device-mockup.device-active{z-index:2;left:0;top:50%;transform:translateY(-50%);opacity:1}.device-mockup[data-device=desktop].device-active{width:85%}.device-mockup[data-device=phone].device-active{width:40%;left:50%;transform:translate(-50%,-50%)}.device-mockup.device-active img{box-shadow:none;filter:brightness(1)}.device-mockup.device-inactive{z-index:3;inset:auto -4% 0 auto;transform:none;opacity:.7}.device-mockup[data-device=desktop].device-inactive{width:30%}.device-mockup[data-device=phone].device-inactive{width:20%}.device-mockup.device-inactive img{border-radius:0;box-shadow:none;filter:brightness(.7)}.device-mockup.device-inactive:hover{opacity:1}.device-mockup.device-inactive:hover img{filter:brightness(.85)}.device-label{display:block;text-align:center;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-dim);margin-top:12px;opacity:0;transition:opacity .5s .3s ease}.device-mockup.device-inactive .device-label{opacity:1}.showcase-info h2{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);font-weight:700;margin-bottom:32px;color:var(--color-text)}.showcase-detail{margin-bottom:24px}.showcase-detail h3{font-family:var(--font-display);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);margin-bottom:8px}.showcase-detail p{font-size:16px;line-height:1.6;color:var(--color-text-muted)}.showcase-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}.showcase-list li{font-size:15px;color:var(--color-text-muted);display:flex;align-items:center;gap:10px}.showcase-list li:before{content:"✓";font-weight:700;color:var(--color-primary-light);font-size:16px}@media(max-width:768px){.project-showcase{grid-template-columns:1fr;gap:40px;padding:48px 24px}.showcase-devices{height:300px}.device-mockup.device-active{width:90%}.device-mockup.device-inactive{width:30%;right:-2%;bottom:0}}.case-study-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto;padding:clamp(60px,6vw,100px) clamp(24px,4vw,64px)}.case-study-screenshot{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 140px);overflow-y:auto;border-radius:12px;border:1px solid var(--color-border);scrollbar-width:thin;scrollbar-color:var(--color-border-light) transparent}.case-study-screenshot::-webkit-scrollbar{width:6px}.case-study-screenshot::-webkit-scrollbar-track{background:transparent}.case-study-screenshot::-webkit-scrollbar-thumb{background:var(--color-border-light);border-radius:3px}.case-study-screenshot img{width:100%;display:block;border-radius:12px}.case-study-content{display:flex;flex-direction:column;gap:48px;padding-top:8px}.case-study-section h2{font-family:var(--font-display);font-size:clamp(24px,2.5vw,32px);font-weight:700;margin-bottom:20px;color:var(--color-text)}.case-study-section p{font-size:clamp(15px,1.2vw,17px);line-height:1.8;color:var(--color-text-muted);margin-bottom:16px}@media(max-width:768px){.case-study-layout{grid-template-columns:1fr;gap:32px}.case-study-screenshot{position:relative;top:auto;max-height:400px}}.project-cta{text-align:center;padding:80px 24px;background:var(--color-surface);border-top:1px solid var(--color-border)}.project-cta h2{font-family:var(--font-display);font-size:clamp(24px,4vw,36px);font-weight:700;margin-bottom:16px}.project-cta p{font-size:16px;color:var(--color-text-muted);margin-bottom:28px}.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--color-primary);margin-bottom:20px;transition:color .3s}.back-link:hover{color:var(--color-primary-light)}@media(max-width:768px){.project-meta{grid-template-columns:1fr}.project-hero{padding-top:80px}.project-hero-content{padding:40px 24px 32px}}