/* Homepage cover: keep the palette in the project's orange family. */
#main>.wrap>.hero{min-height:calc(100vh - 86px + 24px);min-height:calc(100svh - 86px + 24px);display:flex;flex-direction:column;justify-content:center}
.preview-send{background:linear-gradient(145deg,#ff8550 0%,#f35b30 47%,#a9321f 100%)!important}
.preview-send::before{background:linear-gradient(0deg,#87301f 0%,#9e3724e8 22%,#a33b2600 69%)}
.preview-send .visual-label{background:none!important}
.preview-send .visual-label p{color:#ffe2d5}
.preview-send .ds-cover-phone{width:22%;max-width:250px}
.preview-send .ds-cover-phone--home{left:49%;top:115px}
.preview-send .ds-cover-phone--esim{right:9%;top:55px}
.portfolio-grid .project-caption,.experiment-grid .project-caption{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
.portfolio-grid .project-caption>p,.experiment-grid .project-caption>p{margin:0;color:#aaaab4;font-size:13px;line-height:1.45}
.portfolio-grid .project-caption .text-link,.experiment-grid .project-caption .text-link{display:inline-flex;flex:none}

/* Match the two-screen device composition across the homepage covers. */
.portfolio-grid .device-preview .phones,.experiment-grid .featured-visual .phones{display:block;padding:0;pointer-events:none}
.portfolio-grid .device-preview .phone-img,.experiment-grid .featured-visual .phone-img{position:absolute;box-sizing:border-box;height:auto;max-width:245px;border:5px solid #171719;border-radius:31px;background:#111114;box-shadow:0 25px 60px #0008;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.portfolio-grid .device-preview .phone-img{width:22%}
.portfolio-grid .device-preview .phone-img:first-child{z-index:1;left:48%;top:115px;transform:rotate(-9deg)}
.portfolio-grid .device-preview .phone-img:last-child{z-index:2;right:9%;top:55px;transform:rotate(8deg)}
.experiment-grid .featured-visual .phone-img{width:37%;max-width:210px}
.experiment-grid .featured-visual .phone-img:first-child{z-index:1;left:14%;top:77px;transform:rotate(-9deg)}
.experiment-grid .featured-visual .phone-img:last-child{z-index:2;right:13%;top:48px;transform:rotate(8deg)}
@media(hover:hover){
 .portfolio-grid .device-preview:hover .phone-img:first-child,.experiment-grid .featured-visual:hover .phone-img:first-child{transform:rotate(-6deg) translateY(-12px)}
 .portfolio-grid .device-preview:hover .phone-img:last-child,.experiment-grid .featured-visual:hover .phone-img:last-child{transform:rotate(6deg) translateY(-14px)}
}

/* Three stages of the DоверкаСенд home screen. */
.ds-evolution{margin-top:108px;border-top:1px solid var(--line);padding-top:36px}
.ds-evolution-heading{display:block}
.ds-evolution h2{font-size:clamp(31px,3.6vw,48px);line-height:1.12;letter-spacing:-.045em}
.ds-evolution-lead{max-width:770px;margin:22px 0 34px;color:#aaaab4;font-size:17px;line-height:1.7}
.ds-evolution-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ds-evolution-card{display:flex;flex-direction:column;min-width:0;margin:0;overflow:hidden;border:1px solid #ffffff1b;border-radius:22px;background:#171719;transition:border-color .25s,background .25s}
@media(hover:hover){.ds-evolution-card:hover{border-color:#ff8056b8;background:#1e1a1a}}
.ds-evolution-image{display:flex;justify-content:center;align-items:start;aspect-ratio:1/1.94;padding:24px 16px 18px;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#4a2a23 0%,#272022 46%,#1b1a1d 100%)}
.ds-evolution-phone{width:min(88%,300px);flex:0 0 auto;overflow:hidden;border:5px solid #111114;border-radius:36px;background:#fff;box-shadow:0 20px 42px #0009}
.ds-evolution-phone img{display:block;width:100%;height:auto;max-width:none}
.ds-evolution-card figcaption{flex:1;padding:21px 22px 24px}
.ds-evolution-card figcaption span{display:block;margin-bottom:9px;color:#929098;font-size:10px;letter-spacing:.12em}
.ds-evolution-card figcaption h3{font-size:clamp(19px,1.9vw,23px);line-height:1.18;letter-spacing:-.035em}
.ds-evolution-card figcaption p{margin-top:8px;color:#aaaab4;font-size:13px;line-height:1.5}

@media(max-width:760px){
 #main>.wrap>.hero{min-height:calc(100vh - 72px + 16px);min-height:calc(100svh - 72px + 16px)}
 .portfolio-grid .project-caption,.experiment-grid .project-caption{gap:12px;align-items:flex-start}
 .portfolio-grid .project-caption>p,.experiment-grid .project-caption>p{font-size:11px;max-width:60%}
 .portfolio-grid .project-caption .text-link,.experiment-grid .project-caption .text-link{font-size:11px;white-space:nowrap}
 .portfolio-grid .device-preview .phone-img,.experiment-grid .featured-visual .phone-img{width:44%;max-width:225px;border-width:4px;border-radius:28px}
 .portfolio-grid .device-preview .phone-img:first-child,.experiment-grid .featured-visual .phone-img:first-child{left:10%;top:85px;transform:rotate(-9deg)}
 .portfolio-grid .device-preview .phone-img:last-child,.experiment-grid .featured-visual .phone-img:last-child{right:9%;top:105px;transform:rotate(8deg)}
 .preview-send .ds-cover-phone{width:44%;max-width:225px}
 .preview-send .ds-cover-phone--home{left:11%;top:67px}
 .preview-send .ds-cover-phone--esim{right:10%;top:89px}
 .ds-evolution{margin-top:72px;padding-top:26px}
 .ds-evolution-lead{font-size:15px;line-height:1.65;margin:17px 0 25px}
 .ds-evolution-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:8px;padding:6px max(8px,calc((100% - min(78vw,330px))/2)) 10px;scrollbar-width:none}
 .ds-evolution-track::-webkit-scrollbar{display:none}
 .ds-evolution-card{flex:0 0 min(78vw,330px);scroll-snap-align:center}
 .ds-evolution-image{padding:20px 15px 18px}
 .ds-evolution-card figcaption{padding:18px 20px 22px}
}
@media(max-width:420px){
 .portfolio-grid .device-preview .phone-img:first-child,.experiment-grid .featured-visual .phone-img:first-child{top:95px}
 .portfolio-grid .device-preview .phone-img:last-child,.experiment-grid .featured-visual .phone-img:last-child{top:115px}
 .preview-send .ds-cover-phone--home{top:83px}
 .preview-send .ds-cover-phone--esim{top:97px}
 .ds-evolution-track{padding-inline:max(8px,calc((100% - 80vw)/2))}
 .ds-evolution-card{flex-basis:80vw}
 .ds-evolution-image{padding-top:18px}
}
@media(prefers-reduced-motion:reduce){.ds-evolution-card,.portfolio-grid .device-preview .phone-img,.experiment-grid .featured-visual .phone-img{transition:none}.ds-evolution-track{scroll-behavior:auto}}
