.design-showcase {
    position: relative;
    padding: 16px 16px 13px;
    color: #fff;
    background: linear-gradient(145deg, rgba(34, 114, 162, 0.4), rgba(12, 50, 91, 0.7));
    border: 1px solid rgba(124, 221, 235, 0.35);
    border-radius: 23px;
    box-shadow: 0 24px 48px rgba(0, 9, 26, 0.18);
}

.showcase-head,
.showcase-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.showcase-head {
    margin: 0 3px 13px;
    color: #d5ecf5;
    font-size: 12px;
    font-weight: 800;
}

.showcase-head i {
    margin-left: 5px;
}

.showcase-status {
    color: #91f0dc;
}

.showcase-status i {
    font-size: 7px;
}

.showcase-window {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2edf7;
    border-radius: 15px;
    box-shadow: 0 16px 30px rgba(4, 28, 57, 0.2);
}

.showcase-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #8193a9;
    background: #f1f6fb;
    border-bottom: 1px solid #e2edf7;
    direction: ltr;
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1;
}

.showcase-dots {
    display: flex;
    gap: 4px;
}

.showcase-dots i {
    width: 6px;
    height: 6px;
    background: #b5c9db;
    border-radius: 50%;
}

.showcase-dots i:first-child {
    background: #62cad3;
}

.showcase-site {
    min-height: 254px;
    padding: 17px 21px 20px;
    color: #0d2d4f;
    background: radial-gradient(circle at 14% 80%, rgba(15, 184, 207, 0.11), transparent 38%), #fff;
}

.showcase-site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
    font-size: 10px;
    line-height: 1.4;
}

.showcase-site-nav strong {
    color: #0d2d4f;
    font-size: 14px;
    white-space: nowrap;
}

.showcase-site-nav strong i {
    margin-left: 5px;
    color: #0ca6bb;
}

.showcase-site-nav > span {
    color: #6d7e91;
}

.showcase-site-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 0.65fr);
    align-items: center;
    gap: 9px;
    min-height: 190px;
}

.showcase-site-copy small,
.showcase-site-copy strong,
.showcase-site-copy > span {
    display: block;
}

.showcase-site-copy small {
    color: #0a90a8;
    font-size: 10px;
    font-weight: 900;
}

.showcase-site-copy strong {
    max-width: 235px;
    margin: 4px 0 7px;
    color: #0d2d4f;
    font-size: clamp(17px, 2vw, 25px);
    line-height: 1.35;
    font-weight: 900;
}

.showcase-site-copy > span {
    max-width: 235px;
    color: #62758a;
    font-size: 10px;
    line-height: 1.6;
}

.showcase-site-copy em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 11px;
    padding: 7px 10px;
    color: #fff;
    background: #087d9e;
    border-radius: 6px;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.showcase-site-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-width: 150px;
    justify-self: center;
    color: #fff;
    background: linear-gradient(145deg, #18bfca, #1167d8);
    border-radius: 42% 58% 58% 42% / 45% 38% 62% 55%;
    transform: rotate(-10deg);
}

.showcase-site-art::before,
.showcase-site-art::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(11, 131, 172, 0.38);
    border-radius: 50%;
}

.showcase-site-art::before {
    inset: -12px;
}

.showcase-site-art::after {
    inset: 15px;
    border-color: rgba(255, 255, 255, 0.32);
}

.showcase-site-art i {
    font-size: 50px;
    transform: rotate(10deg);
}

.showcase-phone {
    position: absolute;
    bottom: 48px;
    left: -20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 108px;
    height: 184px;
    padding: 7px 8px 10px;
    color: #0d2d4f;
    background: #fff;
    border: 5px solid #0b2745;
    border-radius: 20px;
    box-shadow: 0 15px 28px rgba(0, 9, 26, 0.25);
}

.showcase-phone-notch {
    width: 30px;
    height: 4px;
    margin-bottom: 8px;
    background: #0b2745;
    border-radius: 99px;
}

.showcase-phone-brand {
    align-self: flex-end;
    font-size: 7px;
    font-weight: 900;
}

.showcase-phone-art {
    display: block;
    width: 100%;
    height: 55px;
    margin: 8px 0;
    background: radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.6) 0 10px, transparent 11px), linear-gradient(135deg, #43d4d9, #1167d8);
    border-radius: 7px;
}

.showcase-phone strong {
    align-self: flex-end;
    font-size: 10px;
    line-height: 1.4;
}

.showcase-phone-line {
    align-self: flex-end;
    width: 72%;
    height: 4px;
    margin-top: 6px;
    background: #dbe7f3;
    border-radius: 99px;
}

.showcase-phone-button {
    align-self: flex-end;
    width: 55%;
    height: 13px;
    margin-top: 8px;
    background: #087d9e;
    border-radius: 4px;
}

.showcase-bottom {
    margin: 15px 2px 1px;
    font-size: 12px;
    font-weight: 800;
}

.showcase-bottom > span {
    color: #d5ecf5;
}

.showcase-bottom i {
    margin-left: 4px;
    color: #8be8ee;
    font-size: 16px;
}

.showcase-bottom strong {
    white-space: nowrap;
}

.showcase-bottom b {
    color: #8be8ee;
    font-size: 18px;
}

@media (max-width: 1100px) {
    .showcase-phone {
        left: 0;
    }
}

@media (max-width: 640px) {
    .design-showcase {
        padding: 12px;
    }

    .showcase-head {
        margin-bottom: 10px;
    }

    .showcase-site {
        min-height: 214px;
        padding: 12px 13px 14px;
    }

    .showcase-site-nav > span {
        display: none;
    }

    .showcase-site-body {
        grid-template-columns: minmax(0, 1fr) 95px;
        min-height: 160px;
    }

    .showcase-site-copy strong {
        font-size: 17px;
    }

    .showcase-site-copy > span {
        font-size: 9px;
    }

    .showcase-site-art {
        max-width: 90px;
    }

    .showcase-site-art i {
        font-size: 34px;
    }

    .showcase-phone {
        display: none;
    }

    .showcase-bottom {
        font-size: 10px;
    }

    .showcase-bottom b {
        font-size: 15px;
    }
}