/* Crovyx applications: real products, presented as a quiet exhibition. */
.portfolio-page{--portfolio-border:color-mix(in srgb,var(--gold) 28%,transparent)}
.portfolio-page .header{gap:26px}.portfolio-page .desktop-nav{gap:30px}
.nav-applications{color:var(--gold)}.nav-applications[aria-current=page]:after{transform:none}
.portfolio-main{padding:0 var(--gutter);max-width:1800px;margin:auto}
.portfolio-intro{padding:84px 0 0}
.portfolio-heading{display:grid;grid-template-columns:1fr 300px;align-items:end;gap:60px;padding-bottom:48px}
.portfolio-heading h1{font-size:clamp(76px,8.4vw,138px);letter-spacing:-.065em;line-height:.96;font-weight:500}
.portfolio-heading h1 em{display:inline-block;font-size:1.15em;letter-spacing:-.025em;line-height:1.02;padding:0 .13em .05em;margin:0 -.13em -.05em;color:var(--gold-light)}
.portfolio-intro-copy{font-size:15px;line-height:1.85;color:var(--muted);padding-bottom:12px;max-width:300px}
.application-index{display:flex;align-items:center;gap:34px;border-top:1px solid var(--portfolio-border);padding:22px 0 30px;flex-wrap:wrap}
.application-index a{font-size:12px;line-height:1.5;display:flex;gap:8px;align-items:center;transition:color .2s}
.application-index a>span{color:var(--gold);font-size:9px;font-variant-numeric:tabular-nums}
.application-index a:hover{color:var(--gold-light)}
.application-index-note{margin-left:auto;color:var(--muted);font-size:10px;letter-spacing:.05em}
.application-gallery{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:42px;row-gap:74px}
.application{min-width:0;scroll-margin-top:28px}
.application:not(.application-featured){display:flex;flex-direction:column}
.application:not(.application-featured) .application-copy{display:flex;flex:1;flex-direction:column}
.application:not(.application-featured) .application-description{margin-bottom:22px}
.application:not(.application-featured) .application-bottom{margin-top:auto}
.application-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:44px;align-items:center;border-bottom:1px solid var(--portfolio-border);padding-bottom:46px;margin-bottom:0}
.application-media{position:relative;background:color-mix(in srgb,var(--app-accent) 8%,var(--bg));padding:16px;border:1px solid color-mix(in srgb,var(--app-accent) 16%,var(--bg));perspective:1400px;isolation:isolate}
.application-screen{display:block;position:relative;overflow:hidden;border:1px solid #ffffff1c;box-shadow:0 18px 45px #00000024;background:#0a0d12;transform:translate3d(0,0,0);transform-origin:center;transition:transform .8s var(--ease),box-shadow .8s var(--ease);will-change:auto}
.screen-chrome{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 12px;color:#a0a4ae;background:#10131b;font-size:9px;letter-spacing:.035em;gap:10px}
.screen-chrome>svg{width:12px;height:12px;opacity:.65}
.screen-dots{display:flex;gap:4px}.screen-dots i{width:4px;height:4px;border-radius:50%;background:#737884;opacity:.7}
.screen-viewport{display:block;position:relative;aspect-ratio:1.44;overflow:hidden}
.screen-viewport>img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;transition:opacity .7s var(--ease),transform 1.2s var(--ease);transform:scale(1.001)}
.screen-viewport>.screen-app{position:absolute;inset:0;object-fit:contain;background:#0c1018;opacity:0;transform:translateY(16px) scale(.96)}
#saldo .screen-viewport>.screen-app{background:#edf0e9}
.screen-open{position:absolute;bottom:14px;right:14px;display:flex;gap:20px;align-items:center;padding:10px 13px;background:#0c1018e8;color:#f4f2ed;font-size:11px;border:1px solid #ffffff40;backdrop-filter:blur(10px);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s var(--ease)}
.screen-open svg{width:18px;height:18px}
.preview-toggle{position:absolute;z-index:2;right:30px;top:57px;padding:9px 11px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff40;border-radius:3px;background:#0c1018e8;color:#f3f2ed;font:500 10px/1.4 Manrope,Arial,sans-serif;backdrop-filter:blur(12px);box-shadow:0 2px 8px #0002;transition:background .2s,border-color .2s}
.preview-toggle:hover,.preview-toggle[aria-pressed=true]{border-color:var(--app-accent);background:#0c1018}
.preview-symbol{display:flex;gap:2px;align-items:center}.preview-symbol i{display:block;width:6px;height:9px;border:1px solid currentColor}.preview-symbol i:last-child{height:6px}
.application-meta{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;line-height:1.7;color:var(--gold);margin-top:22px}
.application-meta>span:last-child{color:var(--muted);letter-spacing:.025em;text-transform:none;font-size:10px}
.application-copy h2{font-size:clamp(29px,3vw,46px);line-height:1.2;letter-spacing:-.045em;font-weight:500;margin-top:12px}
.application-copy h2 a{display:inline-flex;align-items:center;gap:13px}
.application-copy h2 img{object-fit:contain;border-radius:6px;flex-shrink:0;width:30px;height:30px}
.application-tagline{font-family:Instrument,Georgia,serif;font-size:23px;line-height:1.25;margin-top:12px;color:var(--text)}
.application-description{font-size:13px;line-height:1.85;color:var(--muted);margin-top:14px;max-width:530px}
.application-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;margin-top:22px;border-top:1px solid var(--portfolio-border)}
.application-maker{font-family:Instrument,Georgia,serif;font-size:19px;font-style:italic;color:var(--muted)}
.application-link{display:inline-flex;align-items:center;gap:14px;color:var(--gold-light);font-size:12px;line-height:1.7;white-space:nowrap;padding:5px 0}
.application-link svg{width:20px;height:20px;transition:transform .4s var(--ease)}.application-link:hover svg,.application-link:focus-visible svg{transform:translateX(4px)}
.application-featured .application-meta{margin-top:0;display:block}.application-featured .application-meta>span{display:block}.application-featured .application-meta>span:last-child{margin-top:7px}
.application-featured h2{font-size:clamp(40px,5.2vw,78px);margin-top:18px;line-height:1.05}
.application-featured h2 img{width:38px;height:38px}.application-featured .application-tagline{font-size:27px;line-height:1.25;margin-top:20px}
.application-featured .application-description{font-size:14px;line-height:1.85;margin-top:18px}.application-featured .application-bottom{flex-wrap:wrap;align-items:start;gap:14px;margin-top:26px;padding-top:20px}
.portfolio-availability{display:flex;align-items:baseline;gap:12px;font-size:11px;line-height:1.8;color:var(--muted);padding-top:50px;max-width:760px}
.portfolio-availability>span{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;position:relative;top:-2px}
.portfolio-outro{display:grid;grid-template-columns:1.3fr 1fr;gap:90px;align-items:center;border-top:1px solid var(--portfolio-border);border-bottom:1px solid var(--portfolio-border);padding:60px 0;margin:42px 0 0}
.portfolio-outro h2{font-size:clamp(34px,4vw,60px);line-height:1.06;letter-spacing:-.035em;font-weight:400}
.portfolio-outro h2 em{font-size:1.1em;letter-spacing:-.015em;color:var(--gold-light);display:inline-block;padding-right:.12em}
.portfolio-outro>div{border-left:1px solid var(--portfolio-border);padding-left:45px}.portfolio-outro p{max-width:290px;font-size:14px;line-height:1.8;color:var(--muted)}.portfolio-outro .application-link{margin-top:20px}
.portfolio-page .footer{padding-top:64px}.portfolio-page .footer-top{padding-top:0}
.portfolio-answers{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;border-top:1px solid var(--portfolio-border);padding:45px 0 0;margin-top:38px}
.portfolio-answers h2{font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.035em;max-width:320px}
.portfolio-answers details{border-bottom:1px solid var(--portfolio-border);padding:0 0 18px;margin-bottom:18px}
.portfolio-answers summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:22px;font-size:13px;line-height:1.7}
.portfolio-answers summary::-webkit-details-marker{display:none}.portfolio-answers summary svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--gold);stroke-width:1.3;fill:none;transition:transform .3s}
.portfolio-answers details[open] summary svg{transform:rotate(45deg)}.portfolio-answers details p{font-size:12px;line-height:1.85;color:var(--muted);padding:15px 36px 0 0;max-width:620px}
@media(max-width:760px){.portfolio-answers{display:block;margin-top:28px;padding-top:30px}.portfolio-answers h2{font-size:30px;margin-bottom:26px}.portfolio-answers summary{font-size:12px}.portfolio-answers details p{font-size:12px;padding-right:0}}
@media(prefers-reduced-motion:reduce){.portfolio-answers summary svg{transition:none}}
.application-media.is-previewing .screen-website{opacity:0;transform:scale(1.035)}
.application-media.is-previewing .screen-app{opacity:1;transform:translateY(0) scale(1)}
.application-media.is-previewing .screen-open{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .application-media:not(.preview-locked):hover .screen-website,.application-media:not(.preview-locked):focus-within .screen-website{opacity:0;transform:scale(1.035)}
 .application-media:not(.preview-locked):hover .screen-app,.application-media:not(.preview-locked):focus-within .screen-app{opacity:1;transform:translateY(0) scale(1)}
 .application-media:hover .application-screen{transform:translateY(-3px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 25px 50px #0004}
 .application-media:hover .screen-open,.application-media:focus-within .screen-open{opacity:1;transform:none}
}
@media(min-width:1600px){.application-gallery{column-gap:60px}.application-description{font-size:14px}.application-featured{gap:65px}}
@media(max-width:1100px){.portfolio-heading{grid-template-columns:1fr 260px;gap:32px}.portfolio-intro{padding-top:65px}.application-index{gap:24px}.application-index-note{display:none}.application-featured{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px}.application-featured h2{font-size:50px}.application-featured h2 img{width:30px;height:30px}.application-featured .application-tagline{font-size:23px}.application-featured .application-description{font-size:12px}.application-featured .application-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.application-featured .application-link{margin-top:8px}.application-gallery{gap:54px 28px}.portfolio-page .desktop-nav{gap:24px}}
@media(max-width:900px) and (min-width:761px){.portfolio-page .header{gap:16px}.portfolio-page .brand{width:145px}.portfolio-page .desktop-nav{gap:18px;font-size:12px}.portfolio-page .language{padding:10px}.portfolio-page .theme-toggle{width:40px;flex-basis:40px;height:40px}}
@media(max-width:760px){
 .portfolio-intro{padding-top:48px}.portfolio-heading{display:block;padding-bottom:30px}.portfolio-heading h1{font-size:clamp(64px,13vw,96px)}
 .portfolio-intro-copy{margin-top:24px;max-width:360px;font-size:13px;line-height:1.8;padding:0}
 .application-index{gap:14px 22px;padding:20px 0 26px}.application-index a{font-size:11px}.application-index a>span{font-size:8px}
 .application-gallery{grid-template-columns:1fr;gap:44px}.application-featured{display:block;padding-bottom:34px;margin:0}.application-featured .application-meta{margin-top:22px;display:flex}.application-featured .application-meta>span:last-child{margin:0}
 .application-meta{font-size:8px;gap:8px}.application-meta>span:last-child{font-size:9px}.application-copy h2,.application-featured h2{font-size:34px;margin-top:10px}.application-featured h2 img{width:30px;height:30px}
 .application-tagline,.application-featured .application-tagline{font-size:23px;margin-top:10px}.application-description,.application-featured .application-description{font-size:12px;margin-top:12px}
 .application-bottom,.application-featured .application-bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px}.application-featured .application-link{margin-top:0}
 .application-maker{font-size:18px}.application-link{font-size:11px;gap:9px}.application-link svg{width:18px;height:18px}
 .application-media{padding:10px}.screen-chrome{height:24px;font-size:8px;padding:0 9px}.preview-toggle{top:43px;right:20px;font-size:9px;padding:7px 9px}.screen-open{font-size:10px;right:9px;bottom:9px;padding:7px 10px}
 .portfolio-availability{padding-top:30px;font-size:10px}.portfolio-outro{display:block;padding:35px 0;margin-top:30px}.portfolio-outro>div{padding:0;border:0;margin-top:25px}.portfolio-outro h2{font-size:38px}.portfolio-outro p{font-size:13px}.portfolio-outro .application-link{margin-top:13px}.portfolio-page .footer{padding-top:40px}
}
@media(max-width:360px){.portfolio-heading h1{font-size:60px}.application-index{gap:13px 18px}.application-maker{font-size:17px}.application-bottom{gap:8px}.application-link{font-size:10px}.application-copy h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.application-screen,.screen-viewport>img,.screen-open,.application-link svg{transition:none!important;animation:none!important}.application-media:hover .application-screen{transform:none!important}.application-media:hover .screen-website,.application-media:focus-within .screen-website{opacity:1;transform:none}.application-media:hover .screen-app,.application-media:focus-within .screen-app{opacity:0;transform:none}.application-media.is-previewing .screen-website{opacity:0}.application-media.is-previewing .screen-app{opacity:1;transform:none}}
