:root{
	--si-cel:#6AA9E0; --si-cel-deep:#3F84C6; --si-blue:#0D5EAF;
	--si-ink:#15181E; --si-muted:#5B6472; --si-line:rgba(16,24,40,.10);
}

/* placeholder (copy the owner will replace) */
.si-ph{ color:#9AA3B2; font-style:italic; }
.si-ph::before{ content:"⬚ "; font-style:normal; opacity:.5; }

/* ---------------- single head / badge ---------------- */
.si-proj-head{ margin:4px 0 18px; }
.si-badge{
	display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	color:#fff; border-radius:999px; padding:5px 11px;
}
.si-badge--web{ background:var(--si-cel); }
.si-badge--mobile{ background:var(--si-blue); }
.si-badge--desktop{ background:#2A6ABB; }

/* ---------------- showcase slider ---------------- */
.si-proj{ margin:26px 0 30px; }
.si-proj__viewport{ position:relative; }
.si-proj__track{
	display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
	padding:6px 2px 14px; scrollbar-width:thin;
}
.si-proj__slide{
	flex:0 0 100%; scroll-snap-align:center;
	display:flex; flex-direction:column; align-items:center; gap:12px;
}
.si-proj__slide figcaption{ font-size:.92rem; color:var(--si-muted); text-align:center; max-width:60ch; }

/* device frame — common */
.si-frame{
	background:#fff; border:1px solid var(--si-line); border-radius:14px; overflow:hidden;
	box-shadow:0 18px 50px rgba(13,94,175,.14); width:100%;
}
.si-frame__bar{
	display:flex; align-items:center; gap:7px; padding:0 14px; height:38px;
	background:#f1f4f8; border-bottom:1px solid var(--si-line);
}
.si-dot{ width:11px; height:11px; border-radius:50%; background:#cfd6e0; }
.si-dot:nth-child(1){ background:#ff5f57; } .si-dot:nth-child(2){ background:#febc2e; } .si-dot:nth-child(3){ background:#28c840; }
.si-url{ flex:1; height:16px; margin-left:12px; border-radius:8px; background:#e2e8f1; max-width:60%; }
.si-frame__screen{ aspect-ratio:var(--si-ar,16/10); background:#0E1116; }
.si-frame__screen img{ width:100%; height:100%; object-fit:cover; display:block; }

/* web + desktop windows */
.si-frame--web, .si-frame--desktop{ max-width:880px; margin:0 auto; }
.si-frame--desktop .si-url{ display:none; }

/* mobile bezel */
.si-proj--mobile .si-frame{ max-width:300px; margin:0 auto; }
.si-frame--mobile{
	border-radius:38px; padding:10px; background:#0E1116; border:none;
	box-shadow:0 22px 55px rgba(13,94,175,.22);
}
.si-frame--mobile .si-frame__bar{
	position:relative; height:22px; background:transparent; border:none; justify-content:center;
}
.si-frame--mobile .si-dot{ display:none; }
.si-frame--mobile .si-frame__bar::before{
	content:""; width:92px; height:16px; border-radius:0 0 12px 12px; background:#0E1116;
	position:absolute; top:-10px;
}
.si-frame--mobile .si-frame__screen{ border-radius:28px; overflow:hidden; }

/* nav */
.si-proj__nav{
	position:absolute; top:42%; transform:translateY(-50%);
	width:42px; height:42px; border-radius:50%; border:1px solid var(--si-line);
	background:rgba(255,255,255,.92); color:var(--si-blue); font-size:24px; line-height:1;
	cursor:pointer; box-shadow:0 6px 16px rgba(13,94,175,.16); z-index:2;
}
.si-proj__prev{ left:-8px; } .si-proj__next{ right:-8px; }
.si-proj__nav:hover{ background:#fff; }
.si-proj__dots{ display:flex; justify-content:center; gap:7px; margin-top:4px; }
.si-proj__dots button{
	width:8px; height:8px; border-radius:50%; border:none; background:#cfd6e0; cursor:pointer; padding:0;
}
.si-proj__dots button.is-active{ background:var(--si-blue); width:22px; border-radius:5px; }

/* CTA */
.si-proj-cta{ margin-top:22px; }
.si-btn{
	display:inline-block; text-decoration:none; font-weight:700; color:#fff;
	background:linear-gradient(135deg,var(--si-cel),var(--si-blue)); padding:12px 22px; border-radius:12px;
	box-shadow:0 10px 24px rgba(13,94,175,.22);
}
.si-btn:hover{ filter:brightness(1.05); }
.si-proj-desc{ margin-top:22px; max-width:70ch; }

/* ---------------- grid ---------------- */
.si-projgrid-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 18px; }
.si-filter{
	border:1px solid var(--si-line); background:#fff; color:var(--si-muted);
	padding:7px 14px; border-radius:999px; cursor:pointer; font-weight:600; font-size:.9rem;
}
.si-filter.is-active{ background:var(--si-blue); color:#fff; border-color:var(--si-blue); }

.si-projgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.si-projcard{
	display:block; text-decoration:none; color:inherit; border:1px solid var(--si-line);
	border-radius:16px; overflow:hidden; background:#fff; transition:transform .2s, box-shadow .2s;
}
.si-projcard:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(13,94,175,.14); }
.si-projcard__thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,#86BBE8,#0D5EAF); overflow:hidden; }
.si-projcard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.si-projcard__body{ padding:16px 18px; }
.si-projcard__title{ margin:8px 0 6px; font-size:1.12rem; color:var(--si-ink); }
.si-projcard__excerpt{ margin:0; font-size:.92rem; color:var(--si-muted); }
.si-projcard.is-hidden{ display:none; }

@media (max-width:560px){
	.si-proj__prev{ left:2px; } .si-proj__next{ right:2px; }
}