.pm-shell{
    display:grid;
    gap:20px;
    max-width:1280px;
    margin:0 auto;
}

.pm-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:4px 2px 0;
}

.pm-hero small{
    display:block;
    margin-bottom:5px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    color:#6f42d9;
}

.pm-hero h1{
    margin:0 0 8px;
    font-size:clamp(28px,3vw,38px);
    line-height:1.08;
    letter-spacing:-.025em;
}

.pm-hero p{
    margin:0;
    max-width:720px;
    opacity:.76;
    font-size:15px;
}

.pm-hero>span{
    flex:0 0 auto;
    padding:9px 14px;
    border:1px solid color-mix(in srgb,#6f42d9 28%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,#6f42d9 10%,var(--sm-card,#fff));
    box-shadow:0 8px 22px rgba(66,35,130,.10);
    font-weight:800;
    font-size:13px;
}

.pm-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.pm-card{
    --pm-accent:#6f42d9;
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    align-items:start;
    gap:10px 18px;
    min-height:190px;
    width:100%;
    padding:22px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--pm-accent) 20%,var(--sm-border,#dfe5ee));
    border-radius:22px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb,var(--sm-card,#fff) 96%,white) 0%,
            var(--sm-card,#fff) 62%,
            color-mix(in srgb,var(--pm-accent) 7%,var(--sm-card,#fff)) 100%);
    color:inherit;
    text-align:left;
    cursor:pointer;
    box-shadow:
        0 18px 38px rgba(32,25,64,.11),
        0 4px 10px rgba(32,25,64,.06),
        inset 0 1px 0 rgba(255,255,255,.72);
    transform:translateY(0) perspective(800px) rotateX(0deg);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.pm-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:170px;
    height:170px;
    right:-66px;
    bottom:-92px;
    border-radius:50%;
    background:color-mix(in srgb,var(--pm-accent) 9%,transparent);
    box-shadow:0 0 0 30px color-mix(in srgb,var(--pm-accent) 3%,transparent);
}

.pm-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(120deg,rgba(255,255,255,.34),transparent 32%);
    pointer-events:none;
}

.pm-card:hover,
.pm-card:focus-visible{
    transform:translateY(-5px) perspective(800px) rotateX(1deg);
    border-color:color-mix(in srgb,var(--pm-accent) 45%,var(--sm-border,#dfe5ee));
    box-shadow:
        0 24px 48px rgba(32,25,64,.16),
        0 8px 18px color-mix(in srgb,var(--pm-accent) 12%,transparent),
        inset 0 1px 0 rgba(255,255,255,.82);
    outline:none;
}

.pm-card>span{
    grid-row:1 / span 2;
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    border-radius:20px;
    font-size:34px;
    line-height:1;
    background:linear-gradient(145deg,
        color-mix(in srgb,var(--pm-accent) 16%,white),
        color-mix(in srgb,var(--pm-accent) 5%,var(--sm-card,#fff)));
    border:1px solid color-mix(in srgb,var(--pm-accent) 28%,transparent);
    box-shadow:
        0 10px 18px color-mix(in srgb,var(--pm-accent) 22%,transparent),
        inset 0 2px 1px rgba(255,255,255,.9),
        inset 0 -3px 7px color-mix(in srgb,var(--pm-accent) 14%,transparent);
    transform:translateZ(16px);
}

.pm-card>div{
    min-width:0;
}

.pm-card strong{
    display:block;
    margin:4px 0 8px;
    font-size:18px;
    line-height:1.2;
    color:var(--pm-accent);
}

.pm-card p{
    margin:0;
    font-size:14px;
    line-height:1.55;
    opacity:.78;
}

.pm-card em{
    grid-column:2;
    justify-self:start;
    align-self:end;
    display:inline-flex;
    align-items:center;
    min-height:38px;
    margin-top:4px;
    padding:8px 16px;
    border:1px solid color-mix(in srgb,var(--pm-accent) 34%,transparent);
    border-radius:12px;
    background:color-mix(in srgb,var(--pm-accent) 6%,var(--sm-card,#fff));
    color:var(--pm-accent);
    box-shadow:0 7px 15px color-mix(in srgb,var(--pm-accent) 10%,transparent);
    font-style:normal;
    font-size:13px;
    font-weight:900;
}

.pm-card:nth-child(1){--pm-accent:#6f42d9}
.pm-card:nth-child(2){--pm-accent:#ed7a16}
.pm-card:nth-child(3){--pm-accent:#2f9e44}
.pm-card:nth-child(4){--pm-accent:#df3f76}
.pm-card:nth-child(5){--pm-accent:#1677e8}
.pm-card:nth-child(6){--pm-accent:#1496a5}

.pm-note{
    padding:15px 18px;
    border:1px solid color-mix(in srgb,#2f9e44 22%,var(--sm-border,#dfe5ee));
    border-radius:15px;
    background:color-mix(in srgb,#2f9e44 6%,var(--sm-card,#fff));
    box-shadow:0 8px 20px rgba(26,93,48,.06);
    font-size:13px;
    line-height:1.55;
}

@media(max-width:1100px){
    .pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
    .pm-shell{gap:16px}
    .pm-hero{align-items:flex-start;flex-direction:column}
    .pm-grid{grid-template-columns:1fr;gap:14px}
    .pm-card{min-height:170px;padding:18px;grid-template-columns:64px minmax(0,1fr);gap:8px 14px;border-radius:18px}
    .pm-card>span{width:60px;height:60px;border-radius:17px;font-size:29px}
    .pm-card strong{font-size:17px}
    .pm-card em{grid-column:2}
}

@media(max-width:420px){
    .pm-card{grid-template-columns:54px minmax(0,1fr);padding:16px}
    .pm-card>span{width:52px;height:52px;border-radius:15px;font-size:25px}
    .pm-card p{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
    .pm-card{transition:none}
    .pm-card:hover,.pm-card:focus-visible{transform:none}
}