.hero {
    position: relative;
    min-height: calc(100svh - 72px);
    overflow: hidden;
    background:
        radial-gradient(ellipse 24% 48% at 88% 55%, rgba(248, 163, 224, .46), transparent 78%),
        radial-gradient(ellipse 40% 68% at 75% 59%, rgba(171, 129, 250, .65), rgba(217, 181, 253, .3) 50%, transparent 82%),
        radial-gradient(ellipse 45% 72% at 53% 63%, rgba(61, 167, 255, .68), rgba(133, 204, 255, .36) 46%, transparent 82%),
        radial-gradient(ellipse 74% 85% at 67% 53%, rgba(194, 224, 255, .12), transparent 88%),
        #fff;
}
.hero-inner {
    position: relative;
    width: min(100%, 1240px);
    min-height: max(648px, calc(100svh - 72px));
    margin: 0 auto;
    padding: 38px 32px 142px;
    display: grid;
    grid-template-columns: 52% 48%;
    align-items: center;
}
.hero-copy { position: relative; z-index: 2; margin-top: -10px; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 25px;
    padding: 8px 13px;
    border: 1px solid #dbeafb;
    border-radius: 100px;
    background: rgba(242, 248, 255, .88);
    color: #3c93df;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
}
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: #4aa9ee; box-shadow: 0 0 0 4px #d9efff; }
.hero h1 {
    margin: 0;
    font-size: clamp(42px, 4.1vw, 57px);
    line-height: 1.27;
    font-weight: 760;
    letter-spacing: -.045em;
    white-space: nowrap;
}
.hero h1 span { letter-spacing: .015em; }
.hero-kicker:hover { border-color: #9fcdf1; }
.hero-description { max-width: 535px; margin: 22px 0 0; color: #65717e; font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 35px; }
.hero-art { position: relative; z-index: 1; width: 550px; height: 470px; justify-self: end; }
.desktop-window {
    position: absolute;
    top: 125px;
    left: 4px;
    width: 442px;
    height: 330px;
    display: flex;
    overflow: hidden;
    border: 7px solid #263546;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 26px 50px rgba(48, 79, 120, .20), 0 4px 12px rgba(48, 79, 120, .1);
    transform: rotate(-2deg);
}
.desktop-sidebar { width: 48px; flex: none; padding: 15px 8px; background: #24364b; }
.desktop-mark { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 27px; border-radius: 9px; color: #fff; background: #56acee; font-size: 18px; font-weight: 700; }
.sidebar-icon { display: flex; align-items: center; justify-content: center; gap: 2px; width: 32px; height: 32px; margin: 12px 0; border-radius: 9px; }
.sidebar-icon.selected { background: #397399; }
.sidebar-icon i { width: 5px; height: 5px; border-radius: 50%; background: #96b5cd; }
.sidebar-icon.selected i { background: #fff; }
.sidebar-icon.sidebar-circle::after { content: ""; width: 13px; height: 13px; border: 2px solid #96b5cd; border-radius: 50%; }
.desktop-list { width: 188px; flex: none; padding: 19px 9px; border-right: 1px solid #edf1f5; background: #f8fafc; }
.desktop-list-title { display: flex; justify-content: space-between; padding: 0 7px; font-size: 15px; font-weight: 700; }
.desktop-list-title span { color: #7b8a99; font-size: 20px; line-height: 15px; font-weight: 400; }
.search-line { width: 100%; height: 24px; margin: 17px 0 12px; border-radius: 6px; background: #ecf0f3; }
.contact-row { display: flex; align-items: center; gap: 7px; min-height: 57px; padding: 6px 4px; border-radius: 7px; }
.contact-row:first-of-type { background: #eaf3fc; }
.contact-avatar, .mini-avatar, .phone-avatar { display: grid; place-items: center; flex: none; color: #fff; font-weight: 600; }
.contact-avatar { width: 33px; height: 33px; border-radius: 10px; font-size: 14px; }
.avatar-purple { background: linear-gradient(140deg, #a9a1ef, #7e8ce1); }
.avatar-blue { background: linear-gradient(140deg, #74c9ee, #5b9ce8); }
.avatar-peach { background: linear-gradient(140deg, #ffb79e, #e68da7); }
.contact-row b, .contact-row small { display: block; overflow: hidden; max-width: 93px; white-space: nowrap; text-overflow: ellipsis; }
.contact-row b { font-size: 11px; }
.contact-row small { margin-top: 4px; color: #9aa4b1; font-size: 9px; }
.contact-row em { align-self: flex-start; margin-left: auto; color: #acb5bf; font-size: 8px; font-style: normal; }
.desktop-chat { position: relative; flex: 1; padding: 0 11px; background: #fff; }
.desktop-chat-top { height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eef1f4; font-size: 12px; font-weight: 700; }
.desktop-chat-top span { font-size: 18px; letter-spacing: 2px; }
.desktop-message { display: flex; align-items: flex-start; gap: 5px; margin-top: 29px; }
.mini-avatar { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }
.desktop-message p { max-width: 145px; margin: 0; padding: 8px; border-radius: 3px 9px 9px; background: #f1f4f7; font-size: 9px; line-height: 1.5; }
.desktop-message.me { justify-content: flex-end; margin-top: 16px; }
.desktop-message.me p { border-radius: 9px 3px 9px 9px; background: #d9edfc; }
.desktop-input { position: absolute; right: 10px; bottom: 13px; left: 10px; padding: 10px; border: 1px solid #edf1f4; border-radius: 7px; color: #a3aeb9; font-size: 9px; }
.desktop-input span { float: right; font-size: 13px; line-height: 9px; }
.phone {
    position: absolute;
    top: 18px;
    right: 29px;
    width: 251px;
    height: 487px;
    padding: 7px;
    border: 5px solid #1d252d;
    border-radius: 35px;
    background: #1d252d;
    box-shadow: 0 30px 62px rgba(35, 57, 91, .24), 0 5px 14px rgba(35, 57, 91, .1);
}
.phone::before { content: ""; position: absolute; z-index: 3; top: 6px; left: 78px; width: 85px; height: 17px; border-radius: 0 0 12px 12px; background: #1d252d; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: #f7f9fc; }
.phone-status { display: flex; justify-content: space-between; height: 29px; padding: 6px 15px 0; background: #fff; font-size: 10px; font-weight: 700; }
.phone-heading { display: flex; align-items: center; justify-content: space-between; height: 53px; padding: 0 11px; background: #fff; font-size: 14px; font-weight: 700; }
.phone-heading small { color: #8894a1; font-size: 11px; font-weight: 400; }
.phone-heading > span:last-child { font-size: 20px; letter-spacing: 2px; }
.back-arrow { color: #488fda; font-size: 28px; font-weight: 400; line-height: 1; }
.phone-date { margin: 17px 0 18px; color: #aab3bc; text-align: center; font-size: 10px; }
.phone-message { display: flex; align-items: flex-start; gap: 6px; margin: 14px 9px; }
.phone-avatar { width: 25px; height: 25px; border-radius: 8px; font-size: 11px; }
.bubble { max-width: 167px; padding: 9px 10px; border-radius: 3px 11px 11px; background: #fff; box-shadow: 0 2px 5px rgba(44, 61, 77, .05); font-size: 11px; line-height: 1.6; }
.phone-message.outgoing { justify-content: flex-end; margin-top: 23px; }
.outgoing .bubble { border-radius: 11px 3px 11px 11px; background: linear-gradient(105deg, #7fc5f3, #66aaf0); color: #fff; }
.phone-compose { position: absolute; right: 0; bottom: 0; left: 0; height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 9px; background: #fff; color: #8a9aad; font-size: 19px; }
.compose-plus { font-size: 24px; }
.compose-field { flex: 1; padding: 7px 8px; border-radius: 5px; background: #f4f6f8; color: #b1bbc5; font-size: 10px; }
.floating-card { position: absolute; box-shadow: 0 16px 35px rgba(42, 75, 119, .17); }
.code-card { right: 0; bottom: 57px; width: 246px; height: 105px; padding: 13px 16px; border: 1px solid #394456; border-radius: 10px; background: #263044; color: #e1eaf8; transform: rotate(2deg); }
.code-dots { display: block; margin-bottom: 8px; color: #fd8b85; font-size: 9px; letter-spacing: 2px; }
.code-card code { font-size: 11px; line-height: 1.7; }
.code-card code span { color: #9c9af7; }
.code-card code b { color: #80d4f5; font-weight: 500; }
.code-card code em { color: #79cba8; font-style: normal; }
.sync-card { top: 79px; left: 87px; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid #e5ecf6; border-radius: 11px; background: rgba(255, 255, 255, .96); }
.sync-symbol { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: #e1f6ed; color: #36b782; font-size: 15px; font-weight: 700; }
.sync-card b, .sync-card small { display: block; }
.sync-card b { font-size: 11px; }
.sync-card small { margin-top: 3px; color: #8fa0af; font-size: 9px; }

.feature-strip {
    position: absolute;
    z-index: 4;
    right: 32px;
    bottom: 39px;
    left: 32px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.feature-card {
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 15px 12px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 17px;
    background: rgba(255, 255, 255, .44);
    box-shadow: 0 8px 28px rgba(70, 113, 166, .08);
    text-align: center;
    backdrop-filter: blur(20px) saturate(145%);
}
.feature-card strong { font-size: 17px; font-weight: 700; white-space: nowrap; }
.feature-card span { color: #6f7884; font-size: 12px; white-space: nowrap; }

@media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 50% 50%; }
    .hero h1 { font-size: clamp(38px, 4.1vw, 49px); }
    .hero-art { transform: scale(.84); transform-origin: right center; }
    .feature-card strong { font-size: 15px; }
    .feature-card span { font-size: 11px; }
}
@media (max-width: 850px) {
    .hero-inner { display: block; min-height: 0; padding: 62px 28px 38px; }
    .hero-copy { margin: 0; }
    .hero h1 { font-size: clamp(37px, 5.5vw, 53px); }
    .hero-art { height: 440px; margin: 14px auto -22px; transform: scale(.85); transform-origin: top center; }
    .feature-strip { position: relative; right: auto; bottom: auto; left: auto; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hero-inner { padding: 47px 20px 28px; }
    .hero-kicker { margin-bottom: 20px; font-size: 12px; }
    .hero h1 { font-size: clamp(31px, 8vw, 43px); line-height: 1.34; letter-spacing: -.055em; }
    .hero-description { margin-top: 20px; font-size: 15px; }
    .hero-actions { gap: 10px; margin-top: 27px; }
    .hero-art { width: 550px; height: 321px; justify-self: start; margin: 29px 0 8px; transform: scale(.62); transform-origin: top left; }
    .feature-strip { gap: 9px; }
    .feature-card { min-height: 91px; padding: 12px 6px; border-radius: 13px; }
    .feature-card strong { font-size: 13px; }
    .feature-card span { font-size: 10px; white-space: normal; line-height: 1.5; }
}
@media (max-width: 370px) {
    .hero h1 { font-size: 29px; }
    .hero-art { transform: scale(.55); height: 285px; }
}