/* Theme vars */
:root {--pp-accent:#00c8c8;--pp-text:#222;--pp-muted:#555;--pp-bg:#fff;--pp-shadow:rgba(0,0,0,0.1);}
@media (prefers-color-scheme:dark){:root{--pp-bg:#1a1a1a;--pp-text:#ddd;--pp-muted:#aaa;--pp-shadow:rgba(0,0,0,0.5);}}

.project-tabs{max-width:1200px;margin:3rem auto;}
.tabs-nav{display:flex;justify-content:center;gap:1rem;border-bottom:2px solid #eee;margin-bottom:1.5rem;}
.tab-btn{background:none;border:none;padding:.75em 1.5em;font-size:1rem;cursor:pointer;color:var(--pp-text);position:relative;}
.tab-btn.active,.tab-btn:hover{color:var(--pp-accent);}
.tab-btn.active::after{content:"";position:absolute;height:3px;background:var(--pp-accent);width:100%;bottom:-2px;left:0;}

.tabs-content{margin-top:2rem;}
.tab-panel{display:block;} .tab-panel[hidden]{display:none;}

.featured-project{display:flex;align-items:center;max-width:1200px;margin:0 auto 4rem;perspective:800px;}
.project-image{flex:1 1 55%;z-index:1;} .project-image img{width:100%;border-radius:8px;box-shadow:0 6px 18px var(--pp-shadow);transition:transform .5s,box-shadow .5s;transform-style:preserve-3d;}
.project-content{flex:1 1 45%;background:var(--pp-bg);padding:2rem;border-radius:8px;box-shadow:0 6px 18px var(--pp-shadow);position:relative;margin-left:-120px;z-index:2;clip-path:polygon(0 0,100% 10%,100% 100%,0% 100%);transition:transform .5s,box-shadow .5s;transform-style:preserve-3d;}
.featured-project.reverse{flex-direction:row-reverse;} .featured-project.reverse .project-content{margin-left:0;margin-right:-120px;}
.featured-project:hover .project-image img{transform:rotateY(-8deg) translateZ(10px);box-shadow:0 20px 40px rgba(0,200,200,0.1);}
.featured-project:hover .project-content{transform:rotateY(8deg) translateZ(20px);box-shadow:0 20px 40px rgba(0,200,200,0.2);}

.project-label{font-size:.85rem;text-transform:uppercase;color:var(--pp-muted);margin-bottom:.5em;}
.project-title{font-size:clamp(1.4rem,5vw,1.8rem);margin:.25em 0 1em;color:var(--pp-accent);}
.project-description{line-height:1.5;color:var(--pp-text);margin-bottom:1.2em;}
.project-details p{margin:.5em 0;} .project-details strong{color:var(--pp-text);}

@media (max-width:768px){
  .featured-project,.featured-project.reverse{flex-direction:column;}
  .project-content,.project-image{margin:0;flex:1 1 100%;}
  .project-content{clip-path:none;margin:2rem 0 0;}
}