.portfolio-hero .hero-content { display:block; max-width:980px; margin-inline:auto; }
.portfolio-hero .hero-title { max-width:900px; margin-inline:auto; color:#f7faf9; background:none; -webkit-text-fill-color:#f7faf9; }
.portfolio-library > .container { margin-inline:auto; }
.portfolio-hero .hero-description { width:auto; margin-inline:auto; }
.portfolio-eyebrow { display:inline-block; margin-bottom:1rem; color:#ef6b71; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.portfolio-eyebrow.dark { color:#c4141b; }
.portfolio-library { padding:clamp(5rem,8vw,8rem) 0; background:#f5f2eb; }
.portfolio-intro { display:grid; grid-template-columns:1fr .75fr; gap:4rem; align-items:end; margin-bottom:3rem; }
.portfolio-intro h2 { margin:0; max-width:650px; color:#111820; font-size:clamp(2.5rem,5vw,4.7rem); line-height:.98; letter-spacing:-.055em; }
.portfolio-intro p { margin:0; color:#626c76; line-height:1.75; }
.demo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.demo-card { overflow:hidden; border:1px solid rgba(17,24,32,.13); border-radius:20px; background:#fff; box-shadow:0 14px 42px rgba(17,24,32,.055); }
.demo-preview { position:relative; display:block; height:330px; padding:1.4rem; overflow:hidden; background:#151d27; text-decoration:none; }
.demo-preview::before { content:""; position:absolute; width:300px; height:300px; right:-100px; bottom:-140px; border-radius:50%; background:var(--demo-accent,#d71920); opacity:.18; box-shadow:0 0 0 55px rgba(255,255,255,.025); }
.demo-preview-ecommerce{--demo-accent:#eab308}.demo-preview-erp{--demo-accent:#22c55e}.demo-preview-fintech{--demo-accent:#38bdf8}.demo-preview-healthcare{--demo-accent:#f43f5e}.demo-preview-education{--demo-accent:#a78bfa}.demo-preview-realestate{--demo-accent:#fb923c}.demo-preview-restaurant{--demo-accent:#f97316}.demo-preview-startup{--demo-accent:#2dd4bf}
.demo-badge { position:absolute; top:1.3rem; right:1.3rem; z-index:3; padding:.4rem .6rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.07); color:#d6dde4; font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.demo-browser { position:relative; z-index:2; height:34px; display:flex; align-items:center; gap:6px; padding:0 12px; border-radius:10px 10px 0 0; background:#293440; color:#9da8b3; font-size:.7rem; }
.demo-browser i { width:7px; height:7px; border-radius:50%; background:#66727e; }.demo-browser span{margin-left:8px}
.demo-ui { position:relative; z-index:2; height:235px; display:grid; grid-template-columns:92px 1fr; overflow:hidden; border-radius:0 0 10px 10px; background:#f1f2ef; }
.demo-ui-side { padding:20px 14px; background:#202a34; }.demo-ui-side b{display:block;height:7px;margin-bottom:15px;border-radius:5px;background:rgba(255,255,255,.16)}
.demo-ui-main { padding:25px; }.demo-ui-main strong{width:45px;height:45px;display:grid;place-items:center;border-radius:12px;background:var(--demo-accent);color:#fff}.demo-ui-main>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.demo-ui-main>div b{height:62px;border-radius:9px;background:#fff;border:1px solid #dfe2de}.demo-ui-main>span{display:block;height:62px;margin-top:12px;border-radius:9px;background:#fff;border:1px solid #dfe2de}
.demo-open { position:absolute; right:1.4rem; bottom:1.4rem; z-index:3; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#111820; transition:transform .2s; }.demo-preview:hover .demo-open{transform:translateY(-3px) rotate(4deg)}
.demo-content { padding:1.65rem; }.demo-number{color:#c4141b;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.demo-content h2{margin:.55rem 0;color:#111820;font-size:1.65rem}.demo-content p{min-height:52px;color:#626c76;line-height:1.65}.demo-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0}.demo-tags span{padding:.35rem .55rem;border-radius:999px;background:#f1eee7;color:#59636e;font-size:.7rem}.demo-link{display:inline-flex;align-items:center;gap:.45rem;color:#b41118;font-size:.84rem;font-weight:750;text-decoration:none}.demo-link:hover{gap:.7rem}
.portfolio-cta { padding:clamp(4rem,7vw,7rem) 0;background:#d71920;color:#fff}.portfolio-cta .container{display:flex;align-items:center;justify-content:space-between;gap:3rem}.portfolio-cta h2{margin:.2rem 0;font-size:clamp(2.5rem,5vw,4.5rem);color:#fff}.portfolio-cta p{max-width:650px;color:rgba(255,255,255,.78)}.portfolio-cta .portfolio-eyebrow{color:#fff}.portfolio-cta .btn-modern{flex-shrink:0;background:#fff;border-color:#fff;color:#111820;box-shadow:none}
@media(max-width:850px){.portfolio-intro{grid-template-columns:1fr;gap:1.2rem}.demo-grid{grid-template-columns:1fr}.portfolio-cta .container{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.portfolio-intro h2{font-size:2.25rem}.portfolio-hero .hero-title{font-size:2.55rem}.demo-preview{height:265px;padding:1rem}.demo-ui{height:190px;grid-template-columns:65px 1fr}.demo-ui-main{padding:17px}.demo-ui-main>div b{height:48px}.demo-badge{top:1rem;right:1rem}.demo-content{padding:1.3rem}}