.srp-project--platform {
    content-visibility: auto;
    contain-intrinsic-size: 72rem;
    padding: var(--srp-section-space) 0;
    color: #17151e;
    background: linear-gradient(160deg,#c9ceff 0%,#b6bcff 46%,#9fa7ff 100%);
    scroll-margin-top: 5rem;
}

.srp-platform-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(20rem,.68fr);
    grid-template-areas:
        "label label"
        "title intro"
        "example example"
        "setup setup"
        "points points";
    gap: 1.2rem clamp(2rem,6vw,6rem);
    align-items: end;
}

.srp-platform-label {
    grid-area: label;
    margin: 0;
    color: #4b3470;
}

.srp-platform-title {
    grid-area: title;
    margin: 0;
    font-size: clamp(3.5rem,7vw,7.4rem);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .8;
    text-transform: uppercase;
}

.srp-platform-title i {
    color: #5b3df5;
    font: inherit;
    font-style: normal;
    margin-left: .06em;
}

.srp-platform-intro {
    grid-area: intro;
    align-self: end;
}

.srp-platform-intro > p {
    max-width: 36rem;
    margin: 0;
    color: rgba(23,21,30,.72);
    line-height: 1.6;
}

.srp-platform-brands {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.2rem;
}

.srp-platform-brands span {
    padding: .48rem .68rem;
    border: 1px solid rgba(23,21,30,.12);
    border-radius: 999px;
    color: rgba(23,21,30,.72);
    background: rgba(255,255,255,.2);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .07em;
}

.srp-platform-example {
    grid-area: example;
    margin: clamp(2.4rem,4vw,3.6rem) 0 0;
    color: #4b3470;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.srp-platform-setup {
    grid-area: setup;
    position: relative;
    min-height: clamp(27rem,42vw,39rem);
    margin-top: .5rem;
}

.srp-platform-device-label {
    position: absolute;
    top: -1.45rem;
    left: 0;
    color: rgba(23,21,30,.5);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.srp-platform-display {
    position: absolute;
    top: 0;
    left: 3%;
    width: 64%;
}

.srp-platform-display__screen {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border: .55rem solid #17151e;
    border-radius: .9rem;
    background: #07070b;
    box-shadow: 0 1.8rem 4rem rgba(54,38,77,.2);
}

.srp-platform-display__screen img { width:100%; height:100%; object-fit:cover; }

.srp-platform-display__stand {
    position:absolute;
    left:50%;
    top:100%;
    width:10%;
    height:4rem;
    background:linear-gradient(#292431,#777180);
    transform:translateX(-50%);
    clip-path:polygon(30% 0,70% 0,88% 100%,12% 100%);
}

.srp-platform-display__stand::after {
    position:absolute;
    left:50%;
    bottom:-.4rem;
    width:230%;
    height:.6rem;
    border-radius:999px;
    content:"";
    background:#2a2630;
    transform:translateX(-50%);
}

.srp-platform-laptop {
    position:absolute;
    z-index:3;
    right:4%;
    bottom:4%;
    width:42%;
    transform:rotate(3deg);
}

.srp-platform-laptop__screen {
    aspect-ratio:16/10;
    overflow:hidden;
    border:.48rem solid #17151e;
    border-bottom-width:.85rem;
    border-radius:.8rem .8rem .4rem .4rem;
    box-shadow:0 1.6rem 3rem rgba(54,38,77,.22);
    background:#08070b;
}

.srp-platform-laptop__screen img { width:100%; height:100%; object-fit:cover; }

.srp-platform-laptop__base {
    display:block;
    width:112%;
    height:.5rem;
    margin-left:-6%;
    border-radius:0 0 60% 60%;
    background:linear-gradient(90deg,#716b76,#f2f0f4 48%,#716b76);
}

.srp-platform-mobile {
    position:absolute;
    z-index:4;
    right:42%;
    bottom:0;
    width:6rem;
    aspect-ratio:.52;
    overflow:hidden;
    border:.32rem solid #17151e;
    border-radius:1.2rem;
    background:#050509;
    box-shadow:0 1rem 2.4rem rgba(54,38,77,.2);
    transform:rotate(-4deg);
}

.srp-platform-mobile img { width:100%; height:100%; object-fit:cover; object-position:top; }

.srp-platform-points {
    grid-area: points;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.srp-platform-points article {
    min-height: 12rem;
    padding: 1.15rem;
    border: 1px solid rgba(23,21,30,.1);
    border-radius: 1.1rem;
    background: rgba(255,255,255,.3);
}

.srp-platform-points span {
    display: block;
    color: #5b3df5;
    font-size: clamp(1.25rem,2vw,1.8rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.srp-platform-points h3 {
    margin: 2.2rem 0 0;
    font-size: 1rem;
    text-transform: uppercase;
}

.srp-platform-points p {
    margin: .5rem 0 0;
    color: rgba(23,21,30,.62);
    font-size: .78rem;
    line-height: 1.5;
}

@media (max-width:60rem) {
    .srp-platform-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "title"
            "setup"
            "intro"
            "points";
        gap: 1rem;
    }

    .srp-platform-example { display: none; }
    .srp-platform-setup { min-height: 30rem; margin-top: 1rem; }
    .srp-platform-display { width: 78%; left: 0; }
    .srp-platform-laptop { width: 50%; }
    .srp-platform-points { grid-template-columns: repeat(2,1fr); }
}

@media (max-width:39.9375rem) {
    .srp-project--platform { padding-block: 4.5rem; }

    .srp-platform-title {
        font-size: clamp(2.9rem,13.1vw,4.15rem);
        line-height: .84;
    }

    .srp-platform-setup {
        min-height: 20rem;
        margin: .6rem 0 1rem;
    }

    .srp-platform-display {
        top: 0;
        left: 0;
        width: 88%;
    }

    .srp-platform-display__screen {
        border-width: .34rem;
        border-radius: .65rem;
    }

    .srp-platform-display__stand { height: 2.6rem; }

    .srp-platform-laptop {
        right: 0;
        bottom: 1rem;
        width: 58%;
    }

    .srp-platform-mobile {
        left: 2%;
        right: auto;
        bottom: 0;
        width: 4rem;
    }

    .srp-platform-intro > p { font-size: .92rem; }

    .srp-platform-points {
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
    }

    .srp-platform-points article {
        min-height: 9.5rem;
        padding: .9rem;
    }

    .srp-platform-points span { font-size: 1.4rem; }
    .srp-platform-points h3 { margin-top: 1.3rem; font-size: .86rem; }
    .srp-platform-points p { font-size: .7rem; }
}