.portfolio-page { background:#202633; }
.portfolio-page::before,.portfolio-page::after { display:none; }
.portfolio-page .site-header { max-width:1240px; }
.portfolio-page .navigation { flex-wrap:wrap; }
.portfolio-hero { max-width:1380px; margin:auto; padding:4rem 3rem 6rem; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:3rem; overflow:hidden; }
.eyebrow { color:#a4cbd8; font:600 .8rem/1.5 var(--sans); letter-spacing:.15em; }
.portfolio-intro h2 { font:700 clamp(2.7rem,4.6vw,4.9rem)/1.06 var(--sans); letter-spacing:-.045em; margin:1.5rem 0; color:#fff; }
.portfolio-intro h2 em { color:#ffa900; font-style:normal; }
.portfolio-lead { max-width:32rem; font-size:1.15rem; line-height:1.75; color:#cbd1dd; }
.project-tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; margin:1.8rem 0 2.5rem; }
.project-tags li { font-size:.85rem; border:1px solid #576273; padding:.45rem .8rem; border-radius:2rem; color:#d3e8ee; }
.demo-note { font-size:.8rem; color:#a4acbd; margin:1.4rem 0 0; }
.phone-stage { position:relative; display:flex; align-items:center; gap:1.3rem; padding:2rem 1rem 5rem; isolation:isolate; }
.stage-orbit { position:absolute; z-index:-1; width:115%; aspect-ratio:1; border:1px solid #78b9c038; border-radius:50%; left:-8%; top:8%; background:radial-gradient(circle,#31979d30,transparent 67%); }
.phone { margin:0; width:47%; position:relative; }
.phone-first { transform:rotate(-7deg) translateY(-15px); }
.phone-second { transform:rotate(7deg) translateY(65px); }
.phone-rim { background:linear-gradient(115deg,#b7bac0,#222731 12%,#080a0e 50%,#727884); padding:7px; border:1px solid #adb0b6; border-radius:38px; box-shadow:0 30px 45px #0008, inset 0 0 0 2px #323641; position:relative; }
.phone-rim::before { content:''; position:absolute; width:3px; height:48px; background:#767d87; right:-4px; top:26%; border-radius:0 2px 2px 0; }
.phone-rim::after { content:''; position:absolute; width:3px; height:37px; background:#767d87; left:-4px; top:20%; border-radius:2px 0 0 2px; }
.phone img { display:block; width:100%; height:auto; border-radius:31px; border:3px solid #090b10; }
.phone figcaption { text-align:center; margin-top:1.25rem; font-size:.8rem; color:#b8c9cf; }
.phone figcaption span { color:#ffa900; margin-right:.35rem; }
.portfolio-story { max-width:1240px; margin:0 auto; padding:4rem 3rem; border-top:1px solid #46515e; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.portfolio-story h2,.portfolio-end h2 { font-size:clamp(2rem,3vw,3rem); line-height:1.2; letter-spacing:-.035em; color:#fff; margin:1rem 0; }
.portfolio-story>p { font-size:1.15rem; line-height:1.8; color:#cbd1dd; }
.portfolio-flow { max-width:1240px; margin:0 auto 4rem; padding:0 3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.portfolio-flow article { border-top:3px solid #7aa2b8; padding:1.8rem 0; }
.flow-number { font-size:.8rem; letter-spacing:.1em; color:#a4cbd8; }
.portfolio-flow h2 { font-size:1.4rem; color:#fff; margin:1.4rem 0 .8rem; }
.portfolio-flow p { color:#cbd1dd; line-height:1.7; min-height:5.2rem; }
.flow-visual { height:90px; background:#283443; border-radius:12px; display:flex; align-items:center; gap:.65rem; padding:1rem; }
.document-mark,.check-mark { border:1px solid #77b6bc; border-radius:8px; padding:.65rem; color:#aad8db; font-size:.8rem; }
.flow-line { width:25px; height:1px; background:#77b6bc; }
.visual-label,.mini-tag { color:#c5dee3; font-size:.85rem; }
.mini-tag { padding:.6rem; border-radius:2rem; background:#35515b; }
.portfolio-end { padding:4rem 1.5rem 6rem; text-align:center; background:linear-gradient(180deg,#253d4544,transparent); }
.portfolio-end .button { margin-top:1.8rem; }
@media(max-width:1050px) { .portfolio-hero { grid-template-columns:1fr; padding-top:2rem; } .portfolio-intro { max-width:720px; } .phone-stage { max-width:650px; width:100%; margin:0 auto; } .portfolio-flow { gap:1rem; } .flow-visual { flex-wrap:wrap; height:110px; } }
@media(max-width:600px) { .portfolio-hero { padding:1rem 1.5rem 3rem; gap:2rem; } .portfolio-intro h2 { font-size:3rem; } .phone-stage { gap:.7rem; padding:1rem .3rem 4rem; } .phone-rim { padding:4px; border-radius:24px; } .phone img { border-radius:19px; border-width:2px; } .phone-second { transform:rotate(6deg) translateY(35px); } .phone figcaption { font-size:.75rem; } .portfolio-story { grid-template-columns:1fr; padding:2rem 1.5rem; gap:.5rem; } .portfolio-flow { grid-template-columns:1fr; padding:0 1.5rem; } .portfolio-flow p { min-height:0; } .flow-visual { height:80px; } }

.overview-stage { justify-content:center; max-width:450px; width:100%; margin:auto; padding:2rem 2rem 3rem; }
.overview-stage .phone { width:100%; max-width:310px; transform:rotate(4deg); }
.document-showcase { max-width:1240px; padding:3rem 3rem 5rem; margin:auto; text-align:center; }
.document-showcase h2 { color:white; font-size:clamp(2rem,3vw,3rem); line-height:1.2; letter-spacing:-.035em; }
.showcase-lead { color:#cbd1dd; line-height:1.7; max-width:38rem; margin:1rem auto 3rem; }
.document-phones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4rem; padding:2rem 1rem 3rem; align-items:start; }
.document-phones .phone { width:100%; }
.document-phone { transform:rotate(-4deg); }
.summary-phone { transform:translateY(30px); }
.details-phone { transform:rotate(4deg); }
@media(max-width:800px) { .document-showcase { padding:2rem 1.5rem 3rem; } .document-phones { gap:1.3rem; padding-inline:0; } .document-phones .phone-rim { padding:4px; border-radius:24px; } .document-phones img { border-radius:19px; border-width:2px; } }
@media(max-width:600px) { .overview-stage { padding:1rem 1.2rem 2rem; } .document-phones { grid-template-columns:1fr; max-width:310px; margin:auto; gap:3rem; } .document-phones .phone { transform:none; } .document-phones .phone-rim { border-radius:32px; padding:6px; } .document-phones img { border-radius:25px; } }