/* Sabban&Co app collection — clear glass inspired by the supplied Apple reference. */
.app-glass-icon{position:relative;display:inline-grid;place-items:center;width:76px;height:76px;flex:0 0 76px;border-radius:22px;isolation:isolate;overflow:hidden;border:0;background:linear-gradient(145deg,#d5dce82e,#c2cbd810 45%,#9da9ba1c);backdrop-filter:blur(18px) saturate(.8);-webkit-backdrop-filter:blur(18px) saturate(.8);box-shadow:0 1px 0 #ffffff6b,inset 0 0 0 1px #ffffff45,0 10px 20px #0003;transition:transform .4s,box-shadow .4s}
.app-glass-icon:before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 1px #ffffff26;z-index:3;pointer-events:none}
.app-glass-icon>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:inherit}
.app-glass-symbol{position:relative;width:91%;height:91%;display:block;filter:drop-shadow(0 2px 2px #0005)}
.app-glass-symbol>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.app-glass-ruffin .app-glass-symbol:before{content:'';position:absolute;inset:0;background:#ffffff16;mask:url('/assets/ruffin-mark.svg') center/contain no-repeat;-webkit-mask:url('/assets/ruffin-mark.svg') center/contain no-repeat}


.app-glass-reflection{position:absolute;inset:0;z-index:2;border-radius:inherit;background:linear-gradient(150deg,#ffffff14,transparent 40%,transparent 70%,#ffffff09);pointer-events:none}
html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]){border-radius:30px;padding:25px 23px;gap:24px;border:1px solid #ffffff74;background:linear-gradient(130deg,#ebeff733,#ffffff0b 43%,#bcc7d424);backdrop-filter:blur(28px) saturate(.75);-webkit-backdrop-filter:blur(28px) saturate(.75);box-shadow:inset 0 1px 0 #ffffff82,inset 0 -1px 0 #ffffff20,0 15px 35px #0b162519;isolation:isolate;overflow:hidden;position:relative;transition:transform .4s,box-shadow .4s,border-color .4s}
html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]) .project-card-art{width:76px;flex-basis:76px;position:relative;z-index:1}html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]) .project-card-copy{flex:1;position:relative;z-index:1}html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]):after{content:'';position:absolute;inset:-100% -30%;background:linear-gradient(115deg,transparent 37%,#ffffff13 49%,transparent 60%);transform:translateX(-45%);transition:transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]):is(:hover,:focus-visible){transform:translateY(-4px);border-color:#ffffffc0;box-shadow:inset 0 1px 0 #fff9,0 22px 40px #0a152429}html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]):is(:hover,:focus-visible):after{transform:translateX(40%)}.project-card:is(:hover,:focus-visible) .app-glass-icon{transform:translateY(-2px);box-shadow:0 1px 0 #ffffff80,inset 0 0 0 1px #ffffff60,0 13px 24px #0004}
.app-collection-links .app-glass-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px}.app-collection-links a{backdrop-filter:blur(20px)}
@media(max-width:700px){html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]){padding:21px 18px;gap:18px;border-radius:26px}.app-glass-icon{width:64px;height:64px;flex-basis:64px;border-radius:20px}html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]) .project-card-art{width:64px;flex-basis:64px}}
@media(prefers-reduced-motion:reduce){.app-glass-icon,.app-glass-reflection,html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]),html:root .project-card:is([data-project=ruffin],[data-project=lerosa],[data-project=coffee],[data-project=quiztov],[data-project=arrota]):after{transition:none;transform:none}}

/* Concise device compatibility: three silhouettes, one clear range. */
html:root .compact-iphone-grid,html:root .rf-night-world .rf-device-models-compact .rf-model-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:700px;margin:24px auto}
html:root .compact-iphone-grid li{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:142px;gap:16px;font-size:14px;padding:18px 8px;background:#ffffff03;border-radius:18px;text-align:center}
html:root .compact-iphone-grid svg{width:48px;height:72px}html:root .compact-iphone-grid svg.compat-duo{width:72px;height:72px}
html:root .rf-night-world .rf-device-models-compact .rf-model-group{padding:22px 10px;min-height:148px}html:root .rf-night-world .rf-device-models-compact figcaption{font-size:14px}
html:root .compact-device-summary{max-width:650px;margin:22px auto 0!important;text-align:center;font-size:15px;line-height:1.65;color:#d0d3df}
html:root .compact-device-summary>span{display:block;font-size:13px;color:#9ba2b4;margin-top:6px}
@media(max-width:500px){html:root .compact-iphone-grid,html:root .rf-night-world .rf-device-models-compact .rf-model-groups{gap:7px}html:root .compact-iphone-grid li,html:root .rf-night-world .rf-device-models-compact .rf-model-group{padding:15px 4px}html:root .compact-iphone-grid li,html:root .rf-night-world .rf-device-models-compact figcaption{font-size:12px}}

.share-semantic-title{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.app-collection-links{flex-wrap:wrap}.app-collection-links a{min-width:0;flex:1 1 180px}

/* Shared vector material: the same scale and native face/rim gradients as RUFFIN. */
.app-glass-icon .app-glass-symbol{width:91%;height:91%}
.app-glass-icon .app-glass-symbol>img{object-fit:contain;opacity:1;filter:none}

/* Keep the official icon pixels unchanged; glass belongs to the surrounding card. */
.gallery-projects .app-official-icon{padding:6px}
.gallery-projects .app-official-icon>img{position:static;display:block;width:100%;height:100%;object-fit:contain!important;border-radius:22%;margin:0;padding:0!important;filter:none!important;opacity:1;mix-blend-mode:normal;transform:none}