:root{--psn-article-blue:#0000FE;--psn-article-blue-dark:#0000b8;--psn-article-white:#fff;--psn-article-bg:#f7faff;--psn-article-text:#172033;--psn-article-muted:#586579;--psn-article-border:#0000fe17;--psn-article-shadow:0 14px 38px #0000fe12;--psn-article-shadow-hover:0 25px 55px #0000fe29}
.psn-articles-page{padding:0 0 80px;color:var(--psn-article-text);overflow:hidden}
.psn-articles-container{width:min(1200px,calc(100% - 32px));margin:0 auto}
.psn-articles-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:310px;margin-bottom:34px;padding:46px;overflow:hidden;border:1px solid var(--psn-article-border);border-radius:34px;background:linear-gradient(135deg,#fff 0%,#f1f6ff 60%,#e9efff 100%);box-shadow:0 22px 60px #0000fe14}
.psn-articles-header::before{content:"";position:absolute;width:390px;height:390px;left:-175px;bottom:-245px;border-radius:50%;background:radial-gradient(circle,#0000fe21,transparent 70%)}
.psn-articles-header::after{position:absolute;width:230px;height:230px;right:42%;top:-155px;border:1px solid #0000fe1a;border-radius:50%;box-shadow:0 0 0 20px #0000fe06 0 0 0 42px #0000fe05}
.psn-articles-header-content{position:relative;z-index:2;flex:1}
.psn-articles-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:17px;padding:7px 16px;color:var(--psn-article-blue);border:1px solid #0000fe2e;border-radius:999px;background:#0000fe12;font-size:.88rem;font-weight:800}
.psn-articles-badge svg{width:18px;height:18px;fill:currentColor}
.psn-articles-title{margin:0 0 14px;color:#0a1220;font-size:clamp(2rem,4vw,3.25rem);font-weight:900;line-height:1.35}
.psn-articles-intro{max-width:760px;margin:0;color:var(--psn-article-muted);font-size:1.05rem;line-height:2.1;text-align:justify}
.psn-articles-header-shape{display:none;position:relative;z-index:2;flex:0 0 290px;height:220px;align-items:center;justify-content:center}
.psn-articles-ring{position:absolute;width:190px;height:190px;border:1px solid #0000fe2e;border-radius:50%;transform:rotate(28deg) skewX(-8deg)}
.psn-articles-ring::before,.psn-articles-ring::after{content:"";position:absolute;inset:19px;border:1px dashed #0000fe30;border-radius:50%}
.psn-articles-ring::after{inset:39px;border-style:solid;border-color:#0000fe1c}
.psn-articles-header-icon{position:relative;z-index:2;width:112px;height:112px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:33px 12px 33px 12px;background:linear-gradient(145deg,#0000fe14,#2020c9);box-shadow:0 20px 35px #0000fe47 inset 8px 8px 16px #ffffff29 inset -8px -8px 18px #00000024;transform:rotate(-8deg);animation:psnArticleFloat 5s ease-in-out infinite}
.psn-articles-header-icon svg{width:62px;height:62px;fill:currentColor;transform:rotate(8deg)}
@keyframes psnArticleFloat {
0%,100%{transform:translateY(0) rotate(-8deg)}
50%{transform:translateY(-10px) rotate(-3deg)}
}
.psn-articles-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.psn-articles-toolbar-title{margin:0;color:#0b1425;font-size:1.4rem;font-weight:900}
.psn-articles-toolbar-line{flex:1;height:1px;background:linear-gradient(to left,transparent,#0000fe38,transparent)}
.psn-articles-count{padding:7px 14px;color:var(--psn-article-blue);border:1px solid #0000fe21;border-radius:999px;background:#fff;font-size:.83rem;font-weight:800;white-space:nowrap}
.psn-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.psn-article-card{position:relative;display:flex;flex-direction:column;min-height:590px;overflow:hidden;border:1px solid var(--psn-article-border);border-radius:30px;background:#fff;box-shadow:var(--psn-article-shadow);transition:all .38s ease}
.psn-article-card::before{content:"";position:absolute;z-index:4;width:110px;height:110px;left:-60px;bottom:-62px;border-radius:50%;background:radial-gradient(circle,#0000fe21,transparent 70%);transition:transform .45s ease;pointer-events:none}
.psn-article-card:hover{border-color:#0000fe2e;box-shadow:var(--psn-article-shadow-hover);transform:translateY(-9px)}
.psn-article-card:hover::before{transform:scale(2)}
.psn-article-image{position:relative;height:300px;overflow:hidden;background:linear-gradient(135deg,#0000fed9,#05196ebf)}
.psn-article-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#0000fe2b,transparent 43%,#0003);pointer-events:none}
.psn-article-image img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.88) contrast(1.05);transition:transform .55s ease,filter .55s ease}
.psn-article-card:hover .psn-article-image img{filter:saturate(1.05) contrast(1.08);transform:scale(1.09)}
.psn-article-category{position:absolute;z-index:3;top:17px;right:17px;padding:7px 13px;color:#fff;border:1px solid #ffffff59;border-radius:999px;background:#00005061;backdrop-filter:blur(8px);font-size:.76rem;font-weight:800}
.psn-article-number{position:absolute;z-index:3;left:17px;bottom:15px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--psn-article-blue);border-radius:14px;background:#fff;box-shadow:0 8px 20px #0000002e;font-size:1rem;font-weight:900}
.psn-article-body{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;padding:25px 24px 23px}
.psn-article-body h2{margin:0 0 13px;color:#0c1525;font-size:1.3rem;font-weight:900;line-height:1.65}
.psn-article-summary{margin:0;color:var(--psn-article-muted);font-size:.93rem;line-height:2;text-align:justify}
.psn-article-keywords{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}
.psn-article-keywords span{padding:5px 9px;color:var(--psn-article-blue);border-radius:8px;background:#0000fe0f;font-size:.72rem;font-weight:700}
.psn-article-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:23px}
.psn-article-meta{color:#7b8799;font-size:.78rem;line-height:1.7}
.psn-article-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 15px;color:#fff!important;border-radius:999px;background:var(--psn-article-blue);box-shadow:0 9px 18px #0000fe33;text-decoration:none;font-size:.8rem;font-weight:800;transition:all .3s ease;white-space:nowrap}
.psn-article-button svg{width:17px;height:17px;fill:currentColor}
.psn-article-button:hover{color:var(--psn-article-blue)!important;background:#fff;box-shadow:0 11px 22px #0000fe33;transform:translateY(-3px)}
.psn-articles-note{display:flex;align-items:center;gap:13px;margin-top:27px;padding:18px 21px;border:1px solid #0000fe1c;border-radius:20px;background:linear-gradient(135deg,#0000fe09,#0000fe14)}
.psn-articles-note-icon{width:39px;height:39px;display:flex;align-items:center;justify-content:center;flex:0 0 39px;color:var(--psn-article-blue);border-radius:12px;background:#fff;box-shadow:0 6px 15px #0000fe14}
.psn-articles-note-icon svg{width:21px;height:21px;fill:currentColor}
.psn-articles-note p{margin:0;color:var(--psn-article-muted);font-size:.88rem;line-height:1.9}
@media (max-width: 1050px) {
.psn-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.psn-article-card:last-child{grid-column:span 2}
}
@media (max-width: 820px) {
.psn-articles-header{flex-direction:column;text-align:center;padding:38px 25px}
.psn-articles-header-content{order:2}
.psn-articles-header-shape{order:1;flex-basis:205px;height:205px}
.psn-articles-intro{margin:0 auto}
.psn-articles-toolbar{flex-wrap:wrap}
.psn-articles-toolbar-line{display:none}
}
@media (max-width: 620px) {
.psn-articles-page{padding-top:0}
.psn-articles-container{width:min(100% - 22px,1200px)}
.psn-articles-header{border-radius:25px}
.psn-articles-title{font-size:1.85rem}
.psn-articles-grid{grid-template-columns:1fr}
.psn-article-card:last-child{grid-column:auto}
.psn-article-card{min-height:auto}
.psn-articles-note{align-items:flex-start}
}
@media(min-width:768px) {
section{padding-left:15px;padding-right:15px}
}
@media(max-width:767px) {
.psn-articles-header{margin-top:0}
}