@charset "UTF-8";
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.sbp-bar {
background: linear-gradient(135deg, #5D6BCB 0%, #7a87d4 60%, #9FB2DD 100%);
padding: 8px 24px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1600px;
margin: 0 auto;
}
.sbp-bar__desc {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: #EFF4F4;
letter-spacing: 0.02em;
line-height: 1.3;
font-style: italic;
}
.sbp-bar__contact a {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: #EFF4F4;
letter-spacing: 0.01em;
text-decoration: none;
border-bottom: 1px solid rgba(239, 244, 244, 0.4);
transition: border-color 0.18s ease-out, color 0.18s ease-out;
}
.sbp-bar__contact a:hover,
.sbp-bar__contact a:focus {
color: #ffffff;
border-bottom-color: #ffffff;
outline: none;
}
.sbp-bar__contact a:focus-visible::before {
content: 'contact';
position: absolute;
top: -18px;
left: 0;
font-size: 11px;
color: #EFF4F4;
font-family: 'Ubuntu', sans-serif;
letter-spacing: 0.01em;
pointer-events: none;
}
.sbp-bar__contact {
position: relative;
}
.site-hdr {
background: #ffffff;
border-bottom: 2px solid #EFF4F4;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
position: relative;
z-index: 100;
}
.site-hdr__body {
max-width: 1600px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: stretch;
gap: 24px;
min-height: 80px;
}
.brand {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 16px 0;
}
.brand__ring {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 4px 22px 4px 22px;
background: #EFF4F4;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07), 0 0 0 2px rgba(93, 107, 203, 0.18);
padding: 8px;
text-decoration: none;
}
.brand__ring img {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
}
.brand__label {
margin-left: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.brand__name {
font-family: 'Ubuntu', sans-serif;
font-size: 23px;
font-weight: 700;
color: #5D6BCB;
line-height: 1.1;
letter-spacing: 0.01em;
text-decoration: none;
}
.brand__tag {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: #5D6BCB;
line-height: 1.3;
letter-spacing: 0.02em;
font-style: italic;
opacity: 0.75;
}
.pri-nav {
display: flex;
align-items: stretch;
flex: 1;
justify-content: flex-end;
}
.pri-nav__list {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
flex-wrap: wrap;
}
.pri-nav__item {
display: flex;
align-items: stretch;
position: relative;
}
.pri-nav__item:hover .sub-nav,
.pri-nav__item:focus-within .sub-nav {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
.pri-nav__lnk {
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
font-weight: 700;
color: #2a2e5a;
letter-spacing: 0.01em;
line-height: 1.3;
text-decoration: none;
display: flex;
align-items: center;
padding: 8px 24px;
border-bottom: 3px solid transparent;
transition: color 0.15s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
white-space: nowrap;
}
.pri-nav__lnk:hover,
.pri-nav__lnk:focus-visible {
color: #5D6BCB;
border-bottom-color: #5D6BCB;
background: rgba(93, 107, 203, 0.05);
outline: none;
}
.pri-nav__lnk:focus-visible {
position: relative;
}
.pri-nav__lnk:focus-visible::before {
content: 'lien';
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: #5D6BCB;
font-family: 'Ubuntu', sans-serif;
letter-spacing: 0.01em;
pointer-events: none;
background: #EFF4F4;
padding: 0 4px;
border-radius: 4px;
}
.pri-nav__item--has-sub>.pri-nav__lnk::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 8px;
margin-top: -3px;
transition: transform 0.15s ease-out;
}
.pri-nav__item--has-sub:hover>.pri-nav__lnk::after {
transform: rotate(225deg);
margin-top: 3px;
}
.sub-nav {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #ffffff;
border: 1px solid #EFF4F4;
border-top: 3px solid #5D6BCB;
border-radius: 0 0 22px 4px;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
list-style: none;
margin: 0;
padding: 8px 0;
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 0.18s ease-out, transform 0.18s ease-out;
z-index: 200;
}
.sub-nav::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
background: transparent;
}
.sub-nav__item {
display: block;
}
.sub-nav__lnk {
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
color: #2a2e5a;
letter-spacing: 0.01em;
line-height: 1.55;
text-decoration: none;
display: block;
padding: 8px 24px;
transition: color 0.14s ease-out, background 0.14s ease-out;
}
.sub-nav__lnk:hover,
.sub-nav__lnk:focus-visible {
color: #5D6BCB;
background: rgba(93, 107, 203, 0.06);
outline: none;
}
.sub-nav__lnk:focus-visible {
position: relative;
}
.sub-nav__lnk:focus-visible::before {
content: 'lien';
position: absolute;
top: 2px;
left: 8px;
font-size: 11px;
color: #5D6BCB;
font-family: 'Ubuntu', sans-serif;
background: #EFF4F4;
padding: 0 4px;
border-radius: 4px;
pointer-events: none;
}
.site-ftr {
background: linear-gradient(160deg, #2a2e5a 0%, #3d4480 100%);
padding: 48px 0 24px;
position: relative;
overflow: hidden;
}
.site-ftr__deco {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #5D6BCB 0%, #9FB2DD 50%, #5D6BCB 100%);
}
.site-ftr__body {
max-width: 1600px;
margin: 0 auto;
padding: 0 24px;
}
.ftr-grid {
display: flex;
gap: 48px;
flex-wrap: wrap;
align-items: flex-start;
padding-bottom: 48px;
border-bottom: 1px solid rgba(159, 178, 221, 0.2);
}
.ftr-brand {
display: flex;
flex-direction: column;
gap: 16px;
flex: 0 0 auto;
min-width: 180px;
}
.ftr-brand__ring {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 4px 22px 4px 22px;
background: rgba(239, 244, 244, 0.1);
box-shadow: 1px 3px 2px 0 rgba(159, 178, 221, 0.07), 0 0 0 2px rgba(159, 178, 221, 0.3);
padding: 8px;
text-decoration: none;
}
.ftr-brand__ring img {
width: 48px;
height: 48px;
object-fit: contain;
display: block;
}
.ftr-brand__name {
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
font-weight: 700;
color: #EFF4F4;
letter-spacing: 0.02em;
line-height: 1.3;
text-decoration: none;
}
.ftr-brand__tag {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: #9FB2DD;
letter-spacing: 0.01em;
line-height: 1.55;
font-style: italic;
}
.ftr-cols {
display: flex;
gap: 48px;
flex: 1;
flex-wrap: wrap;
}
.ftr-col {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 140px;
}
.ftr-col__head {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 700;
color: #9FB2DD;
letter-spacing: 0.02em;
line-height: 1.3;
text-transform: uppercase;
border-bottom: 1px solid rgba(159, 178, 221, 0.25);
padding-bottom: 8px;
}
.ftr-col__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ftr-col__lnk {
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
color: #EFF4F4;
letter-spacing: 0.01em;
line-height: 1.55;
text-decoration: none;
display: inline-block;
transition: color 0.16s ease-out;
border-bottom: 1px solid transparent;
}
.ftr-col__lnk:hover,
.ftr-col__lnk:focus-visible {
color: #9FB2DD;
border-bottom-color: #9FB2DD;
outline: none;
}
.ftr-col__lnk:focus-visible {
position: relative;
}
.ftr-col__lnk:focus-visible::before {
content: 'lien';
position: absolute;
top: -16px;
left: 0;
font-size: 11px;
color: #9FB2DD;
font-family: 'Ubuntu', sans-serif;
background: rgba(93, 107, 203, 0.3);
padding: 0 4px;
border-radius: 4px;
pointer-events: none;
}
.ftr-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
flex-wrap: wrap;
gap: 16px;
}
.ftr-copy {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: rgba(239, 244, 244, 0.5);
letter-spacing: 0.01em;
line-height: 1.55;
}
.ftr-copy span {
color: rgba(239, 244, 244, 0.7);
}
.ftr-mail {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: #9FB2DD;
letter-spacing: 0.01em;
line-height: 1.55;
text-decoration: none;
border-bottom: 1px solid rgba(159, 178, 221, 0.4);
transition: color 0.16s ease-out, border-color 0.16s ease-out;
}
.ftr-mail:hover,
.ftr-mail:focus-visible {
color: #EFF4F4;
border-bottom-color: #EFF4F4;
outline: none;
}
.gdpr-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 4000;
background: #ffffff;
border-bottom: 2px solid #EFF4F4;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
padding: 16px 24px;
display: none;
}
.gdpr-bar__body {
max-width: 1600px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.gdpr-bar__text {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
color: #2a2e5a;
letter-spacing: 0.01em;
line-height: 1.55;
flex: 1;
min-width: 200px;
}
.gdpr-bar__text ul {
margin: 8px 0 0 16px;
padding: 0;
}
.gdpr-bar__text ul li {
margin-bottom: 4px;
}
.gdpr-bar__acts {
display: flex;
gap: 16px;
align-items: center;
flex-shrink: 0;
}
.gdpr-bar__btn {
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
color: #5D6BCB;
letter-spacing: 0.01em;
background: none;
border: none;
cursor: pointer;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease-out;
}
.gdpr-bar__btn:hover,
.gdpr-bar__btn:focus-visible {
color: #2a2e5a;
outline: none;
}
.gdpr-bar__btn:focus-visible {
position: relative;
}
.gdpr-bar__btn:focus-visible::before {
content: 'action';
position: absolute;
top: -18px;
left: 0;
font-size: 11px;
color: #5D6BCB;
font-family: 'Ubuntu', sans-serif;
background: #EFF4F4;
padding: 0 4px;
border-radius: 4px;
pointer-events: none;
}
@media (max-width: 992px) {
.sbp-bar {
padding: 8px 16px;
flex-wrap: wrap;
gap: 8px;
}
.site-hdr__body {
padding: 0 16px;
flex-wrap: wrap;
min-height: auto;
}
.brand {
padding: 16px 0;
}
.pri-nav {
flex: 0 0 100%;
justify-content: flex-start;
border-top: 1px solid #EFF4F4;
}
.pri-nav__list {
flex-wrap: wrap;
}
.pri-nav__lnk {
padding: 8px 16px;
font-size: 13px;
}
.ftr-grid {
gap: 24px;
}
.ftr-cols {
gap: 24px;
}
.ftr-bottom {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.brand__label {
display: none;
}
.sbp-bar__desc {
display: none;
}
.site-ftr {
padding: 24px 0 16px;
}
.ftr-grid {
padding-bottom: 24px;
}
.gdpr-bar__body {
flex-direction: column;
align-items: flex-start;
}
}
.rules-section {
max-width: 1600px;
margin: 0 auto;
padding: 48px 24px;
}
.rules-section p {
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.01em;
color: #2a2a3d;
margin-bottom: 16px;
}
.rules-section ul,
.rules-section ol {
margin: 16px 0 24px 24px;
padding: 0;
}
.rules-section li {
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.01em;
color: #2a2a3d;
margin-bottom: 8px;
}
.rules-section ul li {
list-style-type: disc;
}
.rules-section ol li {
list-style-type: decimal;
}
.rules-section em,
.rules-section i {
font-style: italic;
color: #3d4a8a;
}
.rules-section a {
color: #5D6BCB;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.18s ease-out, text-decoration-color 0.14s ease-out;
}
.rules-section a:hover {
color: #3d4a8a;
text-decoration-color: #9FB2DD;
}
.rules-section a:focus-visible {
outline: 2px solid #5D6BCB;
outline-offset: 2px;
border-radius: 4px;
}
.rules-section table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 15px;
line-height: 1.55;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
border-radius: 4px;
overflow: hidden;
}
.rules-section thead {
background-color: #5D6BCB;
}
.rules-section thead th {
color: #ffffff;
font-size: 13px;
letter-spacing: 0.02em;
line-height: 1.3;
padding: 16px;
text-align: left;
font-weight: 700;
}
.rules-section tbody tr {
border-bottom: 1px solid #EFF4F4;
transition: background-color 0.12s ease-out;
}
.rules-section tbody tr:last-child {
border-bottom: none;
}
.rules-section tbody tr:hover {
background-color: #EFF4F4;
}
.rules-section td {
padding: 16px;
font-size: 15px;
line-height: 1.55;
color: #2a2a3d;
vertical-align: top;
}
.rules-section th {
padding: 16px;
vertical-align: top;
}
.rules-section div {
margin-bottom: 16px;
}
@media (max-width: 576px) {
.rules-section {
padding: 24px 16px;
}
.rules-section p,
.rules-section li,
.rules-section td {
font-size: 13px;
}
.rules-section table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rules-section ul,
.rules-section ol {
margin-left: 16px;
}
}
@media (min-width: 992px) {
.rules-section {
padding: 48px 48px;
}
}
@media (min-width: 1200px) {
.rules-section {
padding: 48px 48px;
}
.rules-section p,
.rules-section li {
font-size: 15px;
}
}
.bd {
max-width: 1600px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.bd__bread {
padding: 16px 48px;
background: #EFF4F4;
border-bottom: 1px solid #9FB2DD;
}
.bd__bread-list {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
.bd__bread-list li {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.55;
color: #5D6BCB;
}
.bd__bread-list li+li::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-top: 1.5px solid #9FB2DD;
border-right: 1.5px solid #9FB2DD;
transform: rotate(45deg);
flex-shrink: 0;
}
.bd__bread-list a {
color: #5D6BCB;
text-decoration: none;
font-size: 13px;
transition: color 0.18s ease-out;
}
.bd__bread-list a:hover {
color: #3a47a8;
text-decoration: underline;
}
.bd__bread-list .current {
color: #3d3d5c;
font-size: 13px;
}
.bd__hero {
background: #fff;
padding: 48px 48px 0;
position: relative;
}
.bd__hero-inner {
display: flex;
flex-direction: column;
align-items: center;
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.bd__tags {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 16px;
}
.bd__tag {
font-size: 13px;
line-height: 1.55;
padding: 4px 16px;
border-radius: 22px;
background: #EFF4F4;
color: #5D6BCB;
letter-spacing: 0.02em;
border: 1px solid #9FB2DD;
}
.bd__tag--cat {
background: #5D6BCB;
color: #fff;
border-color: #5D6BCB;
}
.bd__h1 {
font-size: 45px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1e1e3a;
margin-bottom: 16px;
font-weight: 800;
}
.bd__h1 span {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bd__sub {
font-size: 23px;
line-height: 1.3;
color: #4a4a6a;
margin-bottom: 24px;
letter-spacing: 0.01em;
font-weight: 400;
}
.bd__meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
font-size: 13px;
color: #6a6a8a;
margin-bottom: 24px;
letter-spacing: 0.01em;
}
.bd__meta-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.bd__meta-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.bd__img-wrap {
width: 100%;
max-width: 860px;
border-radius: 4px;
overflow: hidden;
border: 1px solid #d0d8ee;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
margin-top: 8px;
}
.bd__img-wrap img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
filter: blur(0px);
}
.bd__deco-circles {
position: absolute;
top: 24px;
right: 48px;
pointer-events: none;
width: 120px;
height: 120px;
}
.bd__deco-circles svg {
width: 100%;
height: 100%;
}
.bd__body {
background: #EFF4F4;
padding: 48px;
position: relative;
overflow: hidden;
}
.bd__body::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg,
transparent,
transparent 28px,
rgba(93, 107, 203, 0.03) 28px,
rgba(93, 107, 203, 0.03) 29px),
repeating-linear-gradient(90deg,
transparent,
transparent 28px,
rgba(93, 107, 203, 0.03) 28px,
rgba(93, 107, 203, 0.03) 29px);
pointer-events: none;
animation: bdBright 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bdBright {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.bd__body-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 48px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.bd__article {
background: #fff;
border-radius: 4px;
padding: 48px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.bd__article p {
font-size: 15px;
line-height: 1.75;
color: #2a2a4a;
text-align: justify;
margin-bottom: 16px;
letter-spacing: 0.01em;
}
.bd__article h2 {
font-size: 32px;
line-height: 1.3;
color: #1e1e3a;
font-weight: 700;
margin-top: 24px;
margin-bottom: 16px;
letter-spacing: 0.01em;
padding-left: 16px;
border-left: none;
position: relative;
}
.bd__article h2::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.bd__article h3 {
font-size: 23px;
line-height: 1.3;
color: #1e1e3a;
font-weight: 700;
margin-top: 24px;
margin-bottom: 16px;
letter-spacing: 0.01em;
padding-left: 16px;
position: relative;
}
.bd__article h3::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 2px;
background: #9FB2DD;
border-radius: 4px;
}
.bd__article blockquote {
background: #EFF4F4;
border-radius: 4px;
padding: 24px;
margin: 24px 0;
font-size: 15px;
line-height: 1.75;
color: #3a3a5a;
font-style: italic;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.bd__article cite {
display: block;
margin-top: 8px;
font-size: 13px;
color: #5D6BCB;
font-style: normal;
letter-spacing: 0.02em;
}
.bd__article code {
background: #EFF4F4;
border-radius: 4px;
padding: 2px 8px;
font-size: 13px;
color: #5D6BCB;
border: 1px solid #c8d4ea;
}
.bd__article abbr {
text-decoration: underline dotted #9FB2DD;
cursor: help;
}
.bd__article figure {
margin: 24px 0;
}
.bd__article figure img {
width: 100%;
border-radius: 4px;
border: 1px solid #d0d8ee;
display: block;
}
.bd__article figcaption {
font-size: 13px;
color: #6a6a8a;
margin-top: 8px;
text-align: center;
font-style: italic;
}
.bd__aside {
display: flex;
flex-direction: column;
gap: 24px;
}
.bd__stat-box {
background: #fff;
border-radius: 4px;
padding: 24px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
display: flex;
flex-direction: column;
gap: 16px;
}
.bd__stat-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.bd__stat-label {
font-size: 13px;
color: #6a6a8a;
letter-spacing: 0.02em;
}
.bd__stat-val {
font-size: 23px;
font-weight: 800;
color: #1e1e3a;
line-height: 1.1;
}
.bd__stat-shape {
width: 64px;
height: 64px;
border: 3px solid #5D6BCB;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bd__stat-shape--circle {
border-radius: 50%;
border-color: #9FB2DD;
}
.bd__author-box {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
border-radius: 4px;
padding: 24px;
color: #fff;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.bd__author-name {
font-size: 15px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.bd__author-lbl {
font-size: 13px;
opacity: 0.85;
line-height: 1.55;
letter-spacing: 0.02em;
}
.bd__react-box {
background: #fff;
border-radius: 4px;
padding: 24px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.bd__react-title {
font-size: 15px;
font-weight: 700;
color: #1e1e3a;
margin-bottom: 16px;
letter-spacing: 0.01em;
padding-left: 16px;
position: relative;
}
.bd__react-title::before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.bd__react-list {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
}
.bd__react-list input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.bd__react-item {
position: relative;
}
.bd__react-lbl {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 16px;
border-radius: 22px;
border: 1.5px solid #d0d8ee;
cursor: pointer;
font-size: 23px;
line-height: 1.1;
background: #EFF4F4;
transition: border-color 0.18s ease-out, background 0.18s ease-out, box-shadow 0.15s ease-out;
user-select: none;
}
.bd__react-lbl span {
font-size: 13px;
color: #6a6a8a;
line-height: 1.3;
}
.bd__react-item input[type="radio"]:checked+.bd__react-lbl {
border-color: #5D6BCB;
background: #fff;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.bd__react-item input[type="radio"]:checked+.bd__react-lbl span {
color: #5D6BCB;
font-weight: 700;
}
.bd__react-lbl:hover {
border-color: #9FB2DD;
background: #fff;
}
.bd__cta-band {
background: #1e1e3a;
padding: 48px;
}
.bd__cta-inner {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.bd__cta-text h4 {
font-size: 32px;
line-height: 1.3;
color: #fff;
font-weight: 800;
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.bd__cta-text p {
font-size: 15px;
line-height: 1.55;
color: #9FB2DD;
letter-spacing: 0.01em;
}
.bd__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 48px;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
border: 2px solid #5D6BCB;
background: #5D6BCB;
color: #fff;
cursor: pointer;
transition: background 0.18s ease-out, border-color 0.15s ease-out, color 0.12s ease-out;
flex-shrink: 0;
}
.bd__btn:hover {
background: transparent;
color: #9FB2DD;
border-color: #9FB2DD;
}
.bd__btn:focus {
outline: 2px solid #9FB2DD;
outline-offset: 3px;
}
.bd__btn:active {
background: #3a47a8;
border-color: #3a47a8;
color: #fff;
}
.bd__btn--inv {
background: transparent;
color: #EFF4F4;
border-color: #EFF4F4;
}
.bd__btn--inv:hover {
background: #EFF4F4;
color: #1e1e3a;
border-color: #EFF4F4;
}
.bd__checkerboard {
position: relative;
}
.bd__checkerboard::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-conic-gradient(rgba(93, 107, 203, 0.04) 0% 25%, transparent 0% 50%);
background-size: 16px 16px;
opacity: 0;
transition: opacity 0.22s cubic-bezier(0.4, 0, 0.6, 1);
pointer-events: none;
border-radius: 4px;
}
.bd__checkerboard:hover::after {
opacity: 1;
}
@media (max-width: 992px) {
.bd__hero {
padding: 48px 24px 0;
}
.bd__body {
padding: 48px 24px;
}
.bd__body-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.bd__aside {
flex-direction: row;
flex-wrap: wrap;
}
.bd__stat-box,
.bd__author-box,
.bd__react-box {
flex: 1 1 220px;
}
.bd__cta-band {
padding: 48px 24px;
}
.bd__h1 {
font-size: 32px;
}
.bd__bread {
padding: 16px 24px;
}
}
@media (max-width: 576px) {
.bd__hero {
padding: 24px 16px 0;
}
.bd__body {
padding: 24px 16px;
}
.bd__article {
padding: 24px 16px;
}
.bd__cta-band {
padding: 24px 16px;
}
.bd__cta-inner {
flex-direction: column;
align-items: flex-start;
}
.bd__h1 {
font-size: 32px;
}
.bd__img-wrap img {
height: 220px;
}
.bd__bread {
padding: 16px;
}
.bd__deco-circles {
display: none;
}
}
.evts {
max-width: 1600px;
margin: 0 auto;
overflow-x: clip;
}
.evts .t-block {
padding: 48px 48px 0 48px;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 48px;
background: #ffffff;
position: relative;
}
.evts .t-block__left {
flex: 3;
padding-bottom: 48px;
}
.evts .t-block__tag {
display: inline-block;
font-size: 13px;
letter-spacing: 0.02em;
color: #5D6BCB;
border: 1px solid #9FB2DD;
border-radius: 4px;
padding: 4px 16px;
margin-bottom: 24px;
line-height: 1.55;
}
.evts .t-block__h1 {
font-size: 62px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1e2340;
margin-bottom: 24px;
}
.evts .t-block__h1 .acc {
color: #5D6BCB;
}
.evts .t-block__desc {
font-size: 15px;
line-height: 1.75;
color: #2c3155;
max-width: 560px;
text-align: justify;
}
.evts .t-block__right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
padding-bottom: 0;
}
.evts .t-block__img-wrap {
width: 100%;
max-width: 340px;
border-radius: 22px;
overflow: hidden;
position: relative;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
}
.evts .t-block__img-wrap img {
width: 100%;
height: 420px;
object-fit: cover;
object-position: center;
display: block;
}
.evts .t-block__img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 60%);
}
.evts .wave-div {
width: 100%;
line-height: 0;
background: #ffffff;
}
.evts .wave-div svg {
display: block;
width: 100%;
}
.evts .geo-div {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
gap: 8px;
padding: 16px 0;
background: #EFF4F4;
overflow: hidden;
}
.evts .geo-div__shape {
width: 10px;
height: 10px;
background: #9FB2DD;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
opacity: 0.5;
flex-shrink: 0;
}
.evts .geo-div__shape--alt {
background: #5D6BCB;
opacity: 0.25;
transform: rotate(180deg);
}
.evts .sched {
background: #EFF4F4;
padding: 48px;
position: relative;
}
.evts .sched::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.62) 0%, rgba(159, 178, 221, 0.18) 100%);
pointer-events: none;
}
.evts .sched__head {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 48px;
margin-bottom: 48px;
position: relative;
}
.evts .sched__h2-wrap {
flex: 3;
}
.evts .sched__h2 {
font-size: 45px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1e2340;
margin-bottom: 16px;
padding-left: 16px;
border-left: 3px solid #5D6BCB;
}
.evts .sched__h2 .acc {
color: #5D6BCB;
}
.evts .sched__sub {
font-size: 15px;
line-height: 1.75;
color: #2c3155;
text-align: justify;
}
.evts .sched__meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 8px;
}
.evts .sched__stat {
background: #ffffff;
border-radius: 4px;
padding: 16px;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.evts .sched__stat-num {
font-size: 32px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #5D6BCB;
display: block;
}
.evts .sched__stat-lbl {
font-size: 13px;
line-height: 1.55;
color: #2c3155;
letter-spacing: 0.02em;
}
.evts .sched__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
position: relative;
}
.evts .ev-card {
background: #ffffff;
border-radius: 22px;
padding: 24px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow 0.18s ease-out;
}
.evts .ev-card:hover {
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.18);
}
.evts .ev-card__top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.evts .ev-card__badge {
font-size: 13px;
letter-spacing: 0.02em;
color: #ffffff;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
border-radius: 4px;
padding: 4px 16px;
line-height: 1.55;
}
.evts .ev-card__date {
font-size: 13px;
color: #5D6BCB;
letter-spacing: 0.02em;
line-height: 1.55;
}
.evts .ev-card__h3 {
font-size: 23px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1e2340;
}
.evts .ev-card__body {
font-size: 15px;
line-height: 1.75;
color: #2c3155;
text-align: justify;
}
.evts .ev-card__footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
}
.evts .ev-card__loc {
font-size: 13px;
color: #5D6BCB;
letter-spacing: 0.02em;
line-height: 1.55;
}
.evts .ev-card__price {
font-size: 15px;
color: #1e2340;
letter-spacing: 0.01em;
line-height: 1.55;
}
.evts .line-div {
width: 100%;
padding: 16px 48px;
background: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.evts .line-div__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #9FB2DD;
flex-shrink: 0;
}
.evts .line-div__line {
flex: 1;
height: 1px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD, #EFF4F4);
}
.evts .speak {
background: #ffffff;
padding: 48px;
}
.evts .speak__h2 {
font-size: 45px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1e2340;
margin-bottom: 24px;
padding-left: 16px;
border-left: 3px solid #5D6BCB;
}
.evts .speak__h2 .acc {
color: #5D6BCB;
}
.evts .speak__intro {
font-size: 15px;
line-height: 1.75;
color: #2c3155;
max-width: 700px;
margin-bottom: 48px;
text-align: justify;
}
.evts .speak__row {
display: flex;
flex-direction: row;
gap: 48px;
align-items: flex-start;
}
.evts .speak__profiles {
flex: 1;
display: flex;
flex-direction: column;
gap: 24px;
}
.evts .prof-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
}
.evts .prof-item__img {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.evts .prof-item__img img {
width: 72px;
height: 72px;
object-fit: cover;
object-position: center;
display: block;
}
.evts .prof-item__info {
flex: 1;
}
.evts .prof-item__name {
font-size: 15px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1e2340;
}
.evts .prof-item__role {
font-size: 13px;
letter-spacing: 0.02em;
color: #5D6BCB;
line-height: 1.55;
}
.evts .prof-item__bio {
font-size: 13px;
line-height: 1.55;
color: #2c3155;
margin-top: 8px;
}
.evts .speak__detail {
flex: 1;
background: #EFF4F4;
border-radius: 22px;
padding: 24px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.evts .speak__detail-h4 {
font-size: 23px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1e2340;
margin-bottom: 16px;
padding-left: 16px;
border-left: 3px solid #9FB2DD;
}
.evts .speak__agenda {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.evts .speak__agenda li {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid #9FB2DD;
padding-bottom: 16px;
}
.evts .speak__agenda li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.evts .agenda__text {
font-size: 15px;
line-height: 1.55;
color: #2c3155;
flex: 1;
}
.evts .agenda__num {
font-size: 23px;
line-height: 1.1;
color: #9FB2DD;
letter-spacing: 0.01em;
flex-shrink: 0;
text-align: right;
}
.evts .tri-div {
width: 100%;
padding: 16px 0;
background: #EFF4F4;
display: flex;
flex-direction: row;
justify-content: center;
gap: 16px;
overflow: hidden;
}
.evts .tri-div__grp {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.evts .tri-div__t {
width: 8px;
height: 8px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: #5D6BCB;
opacity: 0.3;
flex-shrink: 0;
}
.evts .tri-div__t--inv {
transform: rotate(180deg);
background: #9FB2DD;
opacity: 0.4;
}
.evts .reg {
background: #EFF4F4;
padding: 48px;
position: relative;
}
.evts .reg__bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(93, 107, 203, 0.08) 100%);
pointer-events: none;
}
.evts .reg__inner {
position: relative;
display: flex;
flex-direction: row;
gap: 48px;
align-items: flex-start;
}
.evts .reg__left {
flex: 3;
}
.evts .reg__h2 {
font-size: 45px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1e2340;
margin-bottom: 24px;
padding-left: 16px;
border-left: 3px solid #5D6BCB;
}
.evts .reg__h2 .acc {
color: #5D6BCB;
}
.evts .reg__body {
font-size: 15px;
line-height: 1.75;
color: #2c3155;
text-align: justify;
margin-bottom: 24px;
max-width: 600px;
}
.evts .reg__offers {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 600px;
}
.evts .offer-row {
background: #ffffff;
border-radius: 4px;
padding: 16px 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
transition: box-shadow 0.14s ease-out;
}
.evts .offer-row:hover {
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.13);
}
.evts .offer-row__name {
font-size: 15px;
line-height: 1.3;
color: #1e2340;
letter-spacing: 0.01em;
}
.evts .offer-row__desc {
font-size: 13px;
color: #2c3155;
line-height: 1.55;
}
.evts .offer-row__price {
font-size: 23px;
line-height: 1.1;
color: #5D6BCB;
letter-spacing: 0.01em;
flex-shrink: 0;
}
.evts .reg__right {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 8px;
}
.evts .reg__contact-card {
background: #ffffff;
border-radius: 22px;
padding: 24px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.evts .reg__contact-h5 {
font-size: 15px;
line-height: 1.3;
color: #1e2340;
letter-spacing: 0.01em;
margin-bottom: 16px;
}
.evts .reg__contact-link {
font-size: 15px;
color: #5D6BCB;
line-height: 1.55;
letter-spacing: 0.01em;
text-decoration: none;
display: block;
transition: color 0.16s cubic-bezier(0.4, 0, 0.6, 1);
}
.evts .reg__contact-link:hover {
color: #1e2340;
}
.evts .reg__note {
font-size: 13px;
line-height: 1.55;
color: #2c3155;
letter-spacing: 0.02em;
}
@media (max-width: 992px) {
.evts .t-block {
flex-direction: column;
padding: 48px 24px 0 24px;
gap: 24px;
}
.evts .t-block__right {
align-items: flex-start;
width: 100%;
}
.evts .t-block__img-wrap {
max-width: 100%;
}
.evts .t-block__img-wrap img {
height: 280px;
}
.evts .t-block__h1 {
font-size: 45px;
}
.evts .sched {
padding: 48px 24px;
}
.evts .sched__head {
flex-direction: column;
gap: 24px;
}
.evts .sched__grid {
grid-template-columns: 1fr;
}
.evts .speak {
padding: 48px 24px;
}
.evts .speak__row {
flex-direction: column;
gap: 24px;
}
.evts .reg {
padding: 48px 24px;
}
.evts .reg__inner {
flex-direction: column;
gap: 24px;
}
.evts .line-div {
padding: 16px 24px;
}
}
@media (max-width: 576px) {
.evts .t-block {
padding: 24px 16px 0 16px;
}
.evts .t-block__h1 {
font-size: 32px;
}
.evts .sched {
padding: 24px 16px;
}
.evts .sched__h2 {
font-size: 32px;
}
.evts .speak {
padding: 24px 16px;
}
.evts .speak__h2 {
font-size: 32px;
}
.evts .reg {
padding: 24px 16px;
}
.evts .reg__h2 {
font-size: 32px;
}
.evts .ev-card__footer {
flex-direction: column;
align-items: flex-start;
}
.evts .geo-div {
padding: 8px 0;
}
}
.fst {
max-width: 1600px;
margin: 0 auto;
overflow: hidden;
}
.fst .geo-bg {
position: absolute;
border-radius: 50%;
opacity: 0.045;
pointer-events: none;
background: #5D6BCB;
z-index: 0;
}
.fst .strip-img {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
border-bottom: 1px solid #9FB2DD;
opacity: 0;
animation: fadeIn 0.7s cubic-bezier(0.4, 0, 0.6, 1) 0.1s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fst .strip-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.04);
transition: transform 0.22s ease-out;
}
.fst .strip-img:hover img {
transform: scale(1);
}
.fst .title-zone {
position: relative;
padding: 48px 48px 48px 48px;
background: #EFF4F4;
overflow: hidden;
}
.fst .title-zone .deco-circle {
position: absolute;
border-radius: 50%;
opacity: 0.06;
background: #5D6BCB;
pointer-events: none;
z-index: 0;
}
.fst .title-zone .deco-a {
width: 320px;
height: 320px;
right: -80px;
top: -100px;
}
.fst .title-zone .deco-b {
width: 160px;
height: 160px;
left: 60%;
bottom: -40px;
}
.fst .title-zone .tz-inner {
position: relative;
z-index: 1;
max-width: 760px;
}
.fst .title-zone h1 {
font-size: 62px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1b1e3d;
margin-bottom: 24px;
}
.fst .title-zone h1 .grad {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fst .title-zone .slogan {
font-size: 23px;
line-height: 1.55;
color: #3a3f6e;
letter-spacing: 0.01em;
border-left: none;
padding-left: 0;
font-style: italic;
max-width: 580px;
}
.fst .divider-dot {
display: flex;
align-items: center;
gap: 8px;
padding: 0 48px;
margin: 0;
}
.fst .divider-dot span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #5D6BCB;
display: inline-block;
opacity: 0.5;
}
.fst .divider-dot span:nth-child(3n) {
opacity: 0.2;
}
.fst .voice-band {
background: #ffffff;
padding: 48px 48px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
align-items: start;
}
.fst .voice-band .vb-label {
font-size: 13px;
letter-spacing: 0.02em;
color: #5D6BCB;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 16px;
}
.fst .voice-band h2 {
font-size: 32px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1b1e3d;
position: relative;
padding-left: 16px;
}
.fst .voice-band h2::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.fst .voice-band .vb-right p {
font-size: 15px;
line-height: 1.75;
color: #2c3060;
letter-spacing: 0.01em;
text-align: justify;
margin-bottom: 16px;
}
.fst .voice-band .vb-right p:last-child {
margin-bottom: 0;
}
.fst .divider-line {
height: 1px;
margin: 0 48px;
background: repeating-linear-gradient(to right, #9FB2DD 0px, #9FB2DD 4px, transparent 4px, transparent 10px);
}
.fst .posts-band {
padding: 48px 48px;
background: #EFF4F4;
position: relative;
}
.fst .posts-band .pb-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 48px;
}
.fst .posts-band .pb-head h2 {
font-size: 32px;
line-height: 1.3;
color: #1b1e3d;
letter-spacing: 0.01em;
position: relative;
padding-left: 16px;
}
.fst .posts-band .pb-head h2::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.fst .posts-band .pb-head a {
font-size: 13px;
color: #5D6BCB;
letter-spacing: 0.02em;
text-decoration: none;
font-weight: 700;
border-bottom: 1px solid #9FB2DD;
padding-bottom: 2px;
transition: color 0.14s ease-out, border-color 0.18s ease-out;
}
.fst .posts-band .pb-head a:hover {
color: #3a4599;
border-color: #5D6BCB;
}
.fst .posts-grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 24px;
align-items: start;
}
.fst .post-card {
background: #ffffff;
border-radius: 4px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.16s ease-out, transform 0.14s ease-out;
}
.fst .post-card:hover {
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
transform: translateY(-2px);
}
.fst .post-card .pc-img {
width: 100%;
height: 160px;
overflow: hidden;
border-bottom: 1px solid #EFF4F4;
}
.fst .post-card .pc-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.22s ease-out;
}
.fst .post-card:hover .pc-img img {
transform: scale(1.04);
}
.fst .post-card .pc-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.fst .post-card .pc-tag {
font-size: 13px;
color: #5D6BCB;
letter-spacing: 0.02em;
font-weight: 700;
margin-bottom: 8px;
text-transform: uppercase;
}
.fst .post-card h3 {
font-size: 23px;
line-height: 1.3;
color: #1b1e3d;
letter-spacing: 0.01em;
margin-bottom: 8px;
}
.fst .post-card .pc-sub {
font-size: 13px;
color: #5D6BCB;
letter-spacing: 0.01em;
margin-bottom: 8px;
}
.fst .post-card .pc-desc {
font-size: 15px;
line-height: 1.55;
color: #3a3f6e;
letter-spacing: 0.01em;
text-align: justify;
flex: 1;
margin-bottom: 16px;
}
.fst .post-card .pc-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 13px;
color: #7a82b8;
letter-spacing: 0.01em;
margin-bottom: 16px;
}
.fst .post-card .pc-link {
display: inline-block;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
color: #ffffff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
transition: opacity 0.14s ease-out, transform 0.12s ease-out;
align-self: flex-start;
}
.fst .post-card .pc-link:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.fst .post-card--feat {
grid-column: 3;
grid-row: 1 / 3;
}
.fst .post-card--feat .pc-img {
height: 260px;
}
.fst .post-card--feat h3 {
font-size: 32px;
line-height: 1.3;
}
.fst .depth-band {
padding: 48px 48px;
background: #1b1e3d;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
position: relative;
overflow: hidden;
}
.fst .depth-band .db-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 300px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(93, 107, 203, 0.18) 0%, transparent 70%);
pointer-events: none;
animation: glowPulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes glowPulse {
from {
opacity: 0.6;
transform: translate(-50%, -50%) scale(0.95);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
}
}
.fst .depth-band .db-item {
position: relative;
z-index: 1;
padding: 24px;
border: 1px solid rgba(159, 178, 221, 0.2);
border-radius: 4px;
}
.fst .depth-band .db-item h4 {
font-size: 15px;
line-height: 1.3;
color: #9FB2DD;
letter-spacing: 0.02em;
font-weight: 700;
margin-bottom: 8px;
text-transform: uppercase;
}
.fst .depth-band .db-item p {
font-size: 15px;
line-height: 1.55;
color: #c8d4ee;
letter-spacing: 0.01em;
}
.fst .depth-band .db-num {
font-size: 45px;
line-height: 1.1;
color: #5D6BCB;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 8px;
opacity: 0.7;
}
.fst .territory-band {
padding: 48px 48px;
background: #ffffff;
}
.fst .territory-band .tb-head {
margin-bottom: 48px;
}
.fst .territory-band h2 {
font-size: 32px;
line-height: 1.3;
color: #1b1e3d;
letter-spacing: 0.01em;
position: relative;
padding-left: 16px;
display: inline-block;
}
.fst .territory-band h2::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.fst .territory-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.fst .terr-item {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
padding: 24px;
border-radius: 4px;
background: #EFF4F4;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
transition: box-shadow 0.18s ease-out;
}
.fst .terr-item:hover {
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.fst .terr-item .ti-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 4px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
display: flex;
align-items: center;
justify-content: center;
}
.fst .terr-item .ti-icon svg {
width: 20px;
height: 20px;
stroke: #ffffff;
fill: none;
stroke-width: 1.5;
}
.fst .terr-item h4 {
font-size: 15px;
line-height: 1.3;
color: #1b1e3d;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 8px;
}
.fst .terr-item p {
font-size: 15px;
line-height: 1.55;
color: #3a3f6e;
letter-spacing: 0.01em;
text-align: justify;
}
.fst .underrated-band {
padding: 48px 48px;
background: #EFF4F4;
position: relative;
}
.fst .underrated-band h2 {
font-size: 32px;
line-height: 1.3;
color: #1b1e3d;
letter-spacing: 0.01em;
position: relative;
padding-left: 16px;
margin-bottom: 48px;
display: inline-block;
}
.fst .underrated-band h2::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 3px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.fst .underrated-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.fst .ur-item {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 24px;
align-items: center;
background: #ffffff;
border-radius: 4px;
padding: 24px;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
transition: box-shadow 0.16s ease-out;
}
.fst .ur-item:hover {
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.fst .ur-item .ur-num {
font-size: 32px;
line-height: 1.1;
color: #9FB2DD;
font-weight: 700;
letter-spacing: 0.01em;
text-align: right;
}
.fst .ur-item .ur-text h5 {
font-size: 15px;
line-height: 1.3;
color: #1b1e3d;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 8px;
}
.fst .ur-item .ur-text p {
font-size: 15px;
line-height: 1.55;
color: #3a3f6e;
letter-spacing: 0.01em;
}
.fst .ur-item .ur-tag {
font-size: 13px;
color: #5D6BCB;
font-weight: 700;
letter-spacing: 0.02em;
background: #EFF4F4;
padding: 8px 16px;
border-radius: 22px;
white-space: nowrap;
}
.fst .author-band {
padding: 48px 48px;
background: #ffffff;
display: grid;
grid-template-columns: auto 1fr;
gap: 48px;
align-items: start;
}
.fst .author-band .ab-portrait {
width: 180px;
aspect-ratio: 7/9;
overflow: hidden;
flex-shrink: 0;
border: 1px solid #9FB2DD;
}
.fst .author-band .ab-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.fst .author-band .ab-label {
font-size: 13px;
color: #5D6BCB;
letter-spacing: 0.02em;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
}
.fst .author-band h2 {
font-size: 32px;
line-height: 1.3;
color: #1b1e3d;
letter-spacing: 0.01em;
position: relative;
padding-left: 16px;
margin-bottom: 16px;
}
.fst .author-band h2::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.fst .author-band p {
font-size: 15px;
line-height: 1.75;
color: #2c3060;
letter-spacing: 0.01em;
text-align: justify;
margin-bottom: 16px;
}
.fst .author-band .ab-link {
display: inline-block;
border: 2px solid #5D6BCB;
color: #5D6BCB;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
transition: background 0.14s ease-out, color 0.14s ease-out;
}
.fst .author-band .ab-link:hover {
background: #5D6BCB;
color: #ffffff;
}
.fst .nextstep-band {
padding: 48px 48px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
position: relative;
overflow: hidden;
}
.fst .nextstep-band .ns-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
pointer-events: none;
animation: glowPulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
.fst .nextstep-band .ns-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.fst .nextstep-band h2 {
font-size: 45px;
line-height: 1.1;
color: #ffffff;
letter-spacing: 0.01em;
margin-bottom: 16px;
}
.fst .nextstep-band p {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
letter-spacing: 0.01em;
max-width: 520px;
}
.fst .nextstep-band .ns-actions {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
}
.fst .nextstep-band .btn-primary {
display: inline-block;
background: #ffffff;
color: #5D6BCB;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 16px 24px;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.14s ease-out, transform 0.12s ease-out;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.fst .nextstep-band .btn-primary:hover {
opacity: 0.92;
transform: translateY(-2px);
}
.fst .nextstep-band .btn-sec {
display: inline-block;
border: 2px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
transition: background 0.16s ease-out, border-color 0.14s ease-out;
}
.fst .nextstep-band .btn-sec:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
}
.fst .connections-band {
padding: 48px 48px;
background: #EFF4F4;
}
.fst .connections-band h2 {
font-size: 32px;
line-height: 1.3;
color: #1b1e3d;
letter-spacing: 0.01em;
position: relative;
padding-left: 16px;
margin-bottom: 48px;
display: inline-block;
}
.fst .connections-band h2::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 3px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.fst .conn-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.fst .conn-item {
padding: 24px;
background: #ffffff;
border-radius: 4px;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
transition: box-shadow 0.18s ease-out;
}
.fst .conn-item:hover {
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.fst .conn-item .ci-line {
height: 3px;
border-radius: 4px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
margin-bottom: 16px;
width: 40px;
}
.fst .conn-item h4 {
font-size: 15px;
line-height: 1.3;
color: #1b1e3d;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 8px;
}
.fst .conn-item p {
font-size: 15px;
line-height: 1.55;
color: #3a3f6e;
letter-spacing: 0.01em;
text-align: justify;
}
@media (max-width: 992px) {
.fst .title-zone {
padding: 48px 24px;
}
.fst .title-zone h1 {
font-size: 45px;
}
.fst .voice-band {
grid-template-columns: 1fr;
padding: 48px 24px;
gap: 24px;
}
.fst .posts-band {
padding: 48px 24px;
}
.fst .posts-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.fst .post-card--feat {
grid-column: 1 / -1;
grid-row: auto;
}
.fst .depth-band {
grid-template-columns: 1fr 1fr;
padding: 48px 24px;
gap: 16px;
}
.fst .territory-band {
padding: 48px 24px;
}
.fst .territory-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.fst .underrated-band {
padding: 48px 24px;
}
.fst .ur-item {
grid-template-columns: 40px 1fr;
gap: 16px;
}
.fst .ur-item .ur-tag {
grid-column: 2;
}
.fst .author-band {
grid-template-columns: 1fr;
padding: 48px 24px;
gap: 24px;
}
.fst .nextstep-band {
padding: 48px 24px;
}
.fst .nextstep-band .ns-inner {
grid-template-columns: 1fr;
gap: 24px;
}
.fst .nextstep-band .ns-actions {
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.fst .connections-band {
padding: 48px 24px;
}
.fst .conn-grid {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.fst .divider-dot {
padding: 0 24px;
}
.fst .divider-line {
margin: 0 24px;
}
}
@media (max-width: 576px) {
.fst .title-zone h1 {
font-size: 32px;
}
.fst .title-zone .slogan {
font-size: 15px;
}
.fst .posts-grid {
grid-template-columns: 1fr;
}
.fst .depth-band {
grid-template-columns: 1fr;
}
.fst .conn-grid {
grid-template-columns: 1fr;
}
.fst .nextstep-band h2 {
font-size: 32px;
}
.fst .ur-item {
grid-template-columns: 40px 1fr;
}
.fst .ur-item .ur-tag {
display: none;
}
.fst .posts-band .pb-head {
flex-direction: column;
gap: 8px;
}
}
.au {
max-width: 1600px;
margin: 0 auto;
overflow-x: clip;
}
.au .diag-block {
position: relative;
padding: 80px 48px 96px;
background: linear-gradient(135deg, #5D6BCB 52%, #9FB2DD 100%);
}
.au .diag-block__grid {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 48px;
max-width: 1200px;
margin: 0 auto;
}
.au .diag-block__text {
flex: 1 1 55%;
position: relative;
z-index: 2;
}
.au .diag-block__label {
display: inline-block;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #EFF4F4;
margin-bottom: 24px;
font-weight: 600;
}
.au .diag-block__h1 {
font-size: 62px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #fff;
margin-bottom: 24px;
}
.au .diag-block__h1 .word-grad {
background: linear-gradient(90deg, #EFF4F4, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.au .diag-block__sub {
font-size: 15px;
line-height: 1.75;
color: #EFF4F4;
max-width: 520px;
}
.au .diag-block__quote-mark {
position: absolute;
top: -16px;
left: -8px;
font-size: 180px;
line-height: 1;
color: rgba(255, 255, 255, 0.08);
font-weight: 900;
pointer-events: none;
user-select: none;
z-index: 1;
}
.au .diag-block__img-col {
flex: 0 0 320px;
position: relative;
}
.au .diag-block__portrait {
width: 320px;
height: 448px;
object-fit: cover;
object-position: center;
border-radius: 22px;
display: block;
border: 2px solid rgba(255, 255, 255, 0.18);
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
}
.au .diag-block__img-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 160px;
background: linear-gradient(to top, rgba(93, 107, 203, 0.55), transparent);
border-radius: 0 0 22px 22px;
pointer-events: none;
}
.au .diag-block__dots {
position: absolute;
right: 0;
bottom: 0;
width: 160px;
height: 160px;
pointer-events: none;
overflow: hidden;
}
.au .diag-block__dots svg {
width: 100%;
height: 100%;
}
.au .band-divider {
height: 8px;
background: linear-gradient(90deg, #5D6BCB, #9FB2DD);
width: 100%;
}
.au .profile-block {
padding: 96px 48px;
background: #EFF4F4;
position: relative;
left: 48px;
width: calc(100% - 48px);
}
.au .profile-block__inner {
max-width: 1100px;
margin: 0 auto;
}
.au .profile-block__top {
display: flex;
flex-direction: row;
gap: 48px;
align-items: flex-start;
margin-bottom: 48px;
}
.au .profile-block__intro {
flex: 0 0 340px;
}
.au .profile-block__label {
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #5D6BCB;
font-weight: 600;
margin-bottom: 16px;
display: block;
}
.au .profile-block__h2 {
font-size: 32px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #232640;
margin-bottom: 16px;
padding-left: 16px;
border-top: none;
position: relative;
}
.au .profile-block__h2::before {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
background: linear-gradient(180deg, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.au .profile-block__lead {
font-size: 15px;
line-height: 1.75;
color: #3a3d5c;
text-align: justify;
}
.au .profile-block__detail {
flex: 1 1 0;
}
.au .profile-block__p {
font-size: 15px;
line-height: 1.75;
color: #3a3d5c;
text-align: justify;
margin-bottom: 16px;
}
.au .profile-block__p:last-child {
margin-bottom: 0;
}
.au .profile-block__img-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
margin-bottom: 48px;
}
.au .profile-block__img-row img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 4px;
border: 1.5px solid #9FB2DD;
display: block;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
transition: box-shadow 0.18s ease-out;
}
.au .profile-block__img-row img:hover {
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
}
.au .profile-block__img-row img:first-child {
height: 260px;
}
.au .timeline-wrap {
margin-top: 48px;
}
.au .timeline-wrap__label {
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #5D6BCB;
font-weight: 600;
margin-bottom: 24px;
display: block;
}
.au .timeline-wrap__h3 {
font-size: 23px;
line-height: 1.3;
color: #232640;
margin-bottom: 24px;
padding-left: 16px;
position: relative;
}
.au .timeline-wrap__h3::before {
content: '';
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 3px;
background: linear-gradient(180deg, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.au .timeline-track {
position: relative;
display: flex;
flex-direction: row;
gap: 0;
overflow-x: auto;
padding-bottom: 8px;
}
.au .timeline-track::before {
content: '';
position: absolute;
top: 18px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #5D6BCB, #9FB2DD);
}
.au .tl-item {
flex: 1 1 0;
min-width: 160px;
padding-top: 40px;
padding-right: 16px;
position: relative;
}
.au .tl-item__dot {
position: absolute;
top: 10px;
left: 0;
width: 18px;
height: 18px;
border-radius: 36px;
background: #5D6BCB;
border: 3px solid #EFF4F4;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
transition: background 0.15s ease-out;
}
.au .tl-item:hover .tl-item__dot {
background: #9FB2DD;
}
.au .tl-item__year {
font-size: 13px;
font-weight: 700;
color: #5D6BCB;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.au .tl-item__title {
font-size: 15px;
font-weight: 600;
color: #232640;
margin-bottom: 8px;
line-height: 1.3;
}
.au .tl-item__desc {
font-size: 13px;
line-height: 1.55;
color: #3a3d5c;
}
.au .dense-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
margin-top: 48px;
}
.au .dense-grid__anchor {
grid-row: 1 / 3;
background: #5D6BCB;
border-radius: 22px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
}
.au .dense-grid__anchor-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 22px;
border: none;
opacity: 0.35;
}
.au .dense-grid__anchor-text {
position: relative;
z-index: 2;
}
.au .dense-grid__anchor-h4 {
font-size: 23px;
line-height: 1.3;
color: #fff;
margin-bottom: 8px;
}
.au .dense-grid__anchor-p {
font-size: 13px;
line-height: 1.55;
color: #EFF4F4;
}
.au .compact-card {
background: #fff;
border-radius: 4px;
padding: 24px;
border: 1.5px solid #9FB2DD;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
display: flex;
flex-direction: column;
gap: 8px;
transition: box-shadow 0.14s ease-out, border-color 0.14s ease-out;
}
.au .compact-card:hover {
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
border-color: #5D6BCB;
}
.au .compact-card__num {
font-size: 32px;
font-weight: 700;
color: #5D6BCB;
line-height: 1.1;
text-align: right;
letter-spacing: 0.01em;
}
.au .compact-card__label {
font-size: 13px;
color: #3a3d5c;
line-height: 1.55;
}
.au .portrait2-card {
background: #232640;
border-radius: 22px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.au .portrait2-card__img {
width: 100%;
height: 140px;
object-fit: cover;
object-position: center;
border-radius: 4px;
border: 1.5px solid rgba(159, 178, 221, 0.3);
display: block;
}
.au .portrait2-card__name {
font-size: 15px;
font-weight: 700;
color: #EFF4F4;
line-height: 1.3;
}
.au .portrait2-card__role {
font-size: 13px;
color: #9FB2DD;
line-height: 1.55;
}
.au .img-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.au .img-grid-2 img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 4px;
border: 1.5px solid #9FB2DD;
display: block;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
@keyframes au-diag-in {
from {
opacity: 0;
transform: translate(-18px, 18px);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
.au .diag-block__text {
animation: au-diag-in 0.22s cubic-bezier(0.4, 0, 0.6, 1) both;
}
.au .diag-block__img-col {
animation: au-diag-in 0.18s 0.07s cubic-bezier(0.4, 0, 0.6, 1) both;
}
@media (max-width: 992px) {
.au .diag-block {
padding: 48px 24px 64px;
}
.au .diag-block__grid {
flex-direction: column;
gap: 24px;
}
.au .diag-block__h1 {
font-size: 45px;
}
.au .diag-block__img-col {
flex: none;
width: 100%;
}
.au .diag-block__portrait {
width: 100%;
height: 340px;
}
.au .profile-block {
left: 0;
width: 100%;
padding: 48px 24px;
}
.au .profile-block__top {
flex-direction: column;
gap: 24px;
}
.au .profile-block__intro {
flex: none;
width: 100%;
}
.au .profile-block__img-row {
grid-template-columns: 1fr 1fr;
}
.au .profile-block__img-row img:first-child {
grid-column: 1 / 3;
height: 220px;
}
.au .dense-grid {
grid-template-columns: 1fr 1fr;
}
.au .dense-grid__anchor {
grid-column: 1 / 3;
grid-row: auto;
min-height: 200px;
}
.au .timeline-track {
overflow-x: auto;
}
}
@media (max-width: 576px) {
.au .diag-block__h1 {
font-size: 32px;
}
.au .profile-block__h2 {
font-size: 23px;
}
.au .profile-block__img-row {
grid-template-columns: 1fr;
}
.au .profile-block__img-row img:first-child {
grid-column: auto;
}
.au .dense-grid {
grid-template-columns: 1fr;
}
.au .dense-grid__anchor {
grid-column: auto;
grid-row: auto;
}
.au .img-grid-2 {
grid-template-columns: 1fr;
}
.au .tl-item {
min-width: 140px;
}
}
.blg {
max-width: 1600px;
margin: 0 auto;
overflow-x: clip;
}
.blg .pg-band {
background: #EFF4F4;
padding: 48px 48px 48px 48px;
position: relative;
}
.blg .pg-band__inner {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 48px;
max-width: 1600px;
margin: 0 auto;
}
.blg .pg-band__text {
flex: 1 1 0;
}
.blg .pg-band__label {
display: inline-block;
background: #5D6BCB;
color: #fff;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
padding: 4px 16px;
border-radius: 22px;
margin-bottom: 16px;
}
.blg .pg-band__h1 {
font-size: 45px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1b2045;
margin-bottom: 16px;
}
.blg .pg-band__h1 span {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.blg .pg-band__sub {
font-size: 15px;
line-height: 1.55;
color: #3a3f5c;
max-width: 520px;
text-align: justify;
}
.blg .pg-band__img {
width: 220px;
height: 160px;
border-radius: 4px;
overflow: hidden;
border: 1px solid #9FB2DD;
flex-shrink: 0;
position: relative;
}
.blg .pg-band__img img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.18;
filter: grayscale(30%);
}
.blg .pg-band__img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, #5D6BCB22, #9FB2DD33);
pointer-events: none;
}
.blg .divider-diamond {
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
padding: 0 48px;
margin: 0;
}
.blg .divider-diamond__line {
flex: 1;
height: 1px;
background: #9FB2DD;
}
.blg .divider-diamond__sq {
width: 8px;
height: 8px;
background: #5D6BCB;
transform: rotate(45deg);
margin: 0 8px;
flex-shrink: 0;
}
.blg .posts-grid {
padding: 48px 48px 48px 48px;
background: #fff;
}
.blg .posts-grid__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1600px;
margin: 0 auto;
}
.blg .card-post {
background: #fff;
border-radius: 4px;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
display: flex;
flex-direction: column;
transition: box-shadow 0.18s ease-out, transform 0.15s cubic-bezier(0.4, 0, 0.6, 1);
border: 1px solid #EFF4F4;
overflow: hidden;
}
.blg .card-post:hover {
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
transform: translateY(-2px);
}
.blg .card-post__top {
padding: 24px 24px 0 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.blg .card-post__tag {
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
padding: 3px 12px;
border-radius: 22px;
background: #EFF4F4;
color: #5D6BCB;
display: inline-block;
}
.blg .card-post__cat {
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.01em;
padding: 3px 12px;
border-radius: 22px;
background: #5D6BCB;
color: #fff;
display: inline-block;
}
.blg .card-post__body {
padding: 16px 24px 8px 24px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.blg .card-post__h {
font-size: 23px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1b2045;
border-left: none;
padding-left: 12px;
position: relative;
}
.blg .card-post__h::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
background: linear-gradient(to bottom, #5D6BCB, #9FB2DD);
border-radius: 4px;
}
.blg .card-post__sub {
font-size: 15px;
line-height: 1.55;
color: #4a4f6e;
letter-spacing: 0.01em;
}
.blg .card-post__desc {
font-size: 15px;
line-height: 1.55;
color: #3a3f5c;
text-align: justify;
letter-spacing: 0.01em;
}
.blg .card-post__meta {
padding: 8px 24px 16px 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.blg .card-post__author {
font-size: 13px;
line-height: 1.3;
color: #5D6BCB;
letter-spacing: 0.01em;
}
.blg .card-post__stats {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.blg .card-post__stat {
font-size: 13px;
line-height: 1.3;
color: #6e7490;
letter-spacing: 0.01em;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.blg .card-post__stat svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.blg .card-post__read {
font-size: 13px;
color: #9FB2DD;
letter-spacing: 0.01em;
padding: 0 24px 16px 24px;
}
.blg .card-post__link {
display: block;
padding: 8px 24px 16px 24px;
}
.blg .btn-post {
display: inline-block;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
color: #fff;
font-size: 15px;
line-height: 1.3;
letter-spacing: 0.01em;
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
transition: opacity 0.15s ease-out, box-shadow 0.18s cubic-bezier(0.4, 0, 0.6, 1);
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.blg .btn-post:hover {
opacity: 0.88;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
color: #fff;
}
.blg .card-post--featured {
grid-column: span 2;
}
.blg .card-post--tall {
grid-row: span 2;
}
.blg .divider-diamond--alt {
margin: 0;
}
.blg .about-strip {
background: #5D6BCB;
padding: 48px 48px;
}
.blg .about-strip__inner {
max-width: 1600px;
margin: 0 auto;
display: flex;
flex-direction: row;
gap: 48px;
align-items: center;
}
.blg .about-strip__num {
font-size: 62px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #EFF4F4;
opacity: 0.18;
flex-shrink: 0;
user-select: none;
}
.blg .about-strip__text {
flex: 1 1 0;
}
.blg .about-strip__label {
display: inline-block;
background: #EFF4F4;
color: #5D6BCB;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
padding: 4px 16px;
border-radius: 22px;
margin-bottom: 16px;
}
.blg .about-strip__h {
font-size: 32px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #fff;
margin-bottom: 16px;
}
.blg .about-strip__p {
font-size: 15px;
line-height: 1.55;
color: #EFF4F4;
text-align: justify;
letter-spacing: 0.01em;
max-width: 600px;
}
.blg .about-strip__cta {
display: inline-block;
background: #fff;
color: #5D6BCB;
font-size: 15px;
line-height: 1.3;
letter-spacing: 0.01em;
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
margin-top: 24px;
transition: background 0.15s ease-out, color 0.12s ease-out;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.blg .about-strip__cta:hover {
background: #EFF4F4;
color: #3a3f5c;
}
.blg .topics-row {
background: #EFF4F4;
padding: 48px 48px;
position: relative;
}
.blg .topics-row__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.blg .topics-row__bg svg {
width: 100%;
height: 100%;
opacity: 0.07;
}
.blg .topics-row__inner {
max-width: 1600px;
margin: 0 auto;
position: relative;
}
.blg .topics-row__h {
font-size: 32px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1b2045;
margin-bottom: 24px;
}
.blg .topics-row__h span {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.blg .topics-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.blg .topic-item {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 16px;
padding: 16px 24px;
background: #fff;
border-radius: 4px;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
transition: box-shadow 0.18s ease-out;
}
.blg .topic-item:hover {
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.blg .topic-item__num {
font-size: 23px;
line-height: 1.1;
color: #9FB2DD;
letter-spacing: 0.01em;
min-width: 32px;
text-align: right;
flex-shrink: 0;
}
.blg .topic-item__name {
font-size: 15px;
line-height: 1.55;
color: #1b2045;
letter-spacing: 0.01em;
flex: 1 1 0;
}
.blg .topic-item__pill {
font-size: 13px;
line-height: 1.3;
padding: 3px 12px;
border-radius: 22px;
background: #EFF4F4;
color: #5D6BCB;
flex-shrink: 0;
letter-spacing: 0.01em;
}
.blg .contact-band {
background: #fff;
padding: 48px 48px;
}
.blg .contact-band__inner {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.blg .contact-band__left {
display: flex;
flex-direction: column;
gap: 16px;
}
.blg .contact-band__label {
display: inline-block;
background: #EFF4F4;
color: #5D6BCB;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.02em;
padding: 4px 16px;
border-radius: 22px;
}
.blg .contact-band__h {
font-size: 32px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1b2045;
}
.blg .contact-band__p {
font-size: 15px;
line-height: 1.55;
color: #3a3f5c;
text-align: justify;
letter-spacing: 0.01em;
}
.blg .contact-band__email {
font-size: 15px;
line-height: 1.55;
color: #5D6BCB;
letter-spacing: 0.01em;
text-decoration: none;
transition: color 0.12s ease-out;
}
.blg .contact-band__email:hover {
color: #1b2045;
}
.blg .form-field {
position: relative;
margin-bottom: 24px;
}
.blg .form-field input,
.blg .form-field textarea {
width: 100%;
background: #EFF4F4;
border: 1px solid #9FB2DD;
border-radius: 4px;
font-size: 15px;
line-height: 1.55;
color: #1b2045;
padding: 24px 16px 8px 16px;
outline: none;
transition: border-color 0.15s ease-out, box-shadow 0.18s cubic-bezier(0.4, 0, 0.6, 1);
display: block;
}
.blg .form-field textarea {
min-height: 120px;
resize: vertical;
}
.blg .form-field input:focus,
.blg .form-field textarea:focus {
border-color: #5D6BCB;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.blg .form-field__label {
position: absolute;
left: 16px;
top: 16px;
font-size: 15px;
line-height: 1.3;
color: #6e7490;
pointer-events: none;
transition: top 0.15s ease-out, font-size 0.15s ease-out, color 0.12s ease-out;
letter-spacing: 0.01em;
}
.blg .form-field input:focus~.form-field__label,
.blg .form-field input:not(:placeholder-shown)~.form-field__label,
.blg .form-field textarea:focus~.form-field__label,
.blg .form-field textarea:not(:placeholder-shown)~.form-field__label {
top: 6px;
font-size: 13px;
color: #5D6BCB;
}
.blg .form-field input::placeholder,
.blg .form-field textarea::placeholder {
color: transparent;
}
.blg .btn-form {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
color: #fff;
font-size: 15px;
line-height: 1.3;
letter-spacing: 0.01em;
padding: 8px 48px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: opacity 0.15s ease-out, box-shadow 0.18s cubic-bezier(0.4, 0, 0.6, 1);
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.blg .btn-form:hover {
opacity: 0.88;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.blg .btn-form:focus {
outline: 2px solid #5D6BCB;
outline-offset: 2px;
}
.blg .seq-anim .card-post:nth-child(1) {
animation: fadeUp 0.22s ease-out both;
animation-delay: 0.04s;
}
.blg .seq-anim .card-post:nth-child(2) {
animation: fadeUp 0.22s ease-out both;
animation-delay: 0.10s;
}
.blg .seq-anim .card-post:nth-child(3) {
animation: fadeUp 0.22s ease-out both;
animation-delay: 0.16s;
}
.blg .seq-anim .card-post:nth-child(4) {
animation: fadeUp 0.22s ease-out both;
animation-delay: 0.20s;
}
.blg .seq-anim .card-post:nth-child(5) {
animation: fadeUp 0.22s ease-out both;
animation-delay: 0.24s;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.blg .topic-item:nth-child(1) {
animation: fadeUp 0.18s ease-out both;
animation-delay: 0.06s;
}
.blg .topic-item:nth-child(2) {
animation: fadeUp 0.18s ease-out both;
animation-delay: 0.12s;
}
.blg .topic-item:nth-child(3) {
animation: fadeUp 0.18s ease-out both;
animation-delay: 0.18s;
}
.blg .topic-item:nth-child(4) {
animation: fadeUp 0.18s ease-out both;
animation-delay: 0.22s;
}
@media (max-width: 992px) {
.blg .posts-grid__row {
grid-template-columns: 1fr 1fr;
}
.blg .card-post--featured {
grid-column: span 2;
}
.blg .card-post--tall {
grid-row: span 1;
}
.blg .about-strip__inner {
flex-direction: column;
gap: 24px;
}
.blg .about-strip__num {
font-size: 45px;
}
.blg .contact-band__inner {
grid-template-columns: 1fr;
}
.blg .pg-band__inner {
flex-direction: column;
gap: 24px;
}
.blg .pg-band__img {
width: 100%;
height: 120px;
}
}
@media (max-width: 576px) {
.blg .posts-grid__row {
grid-template-columns: 1fr;
}
.blg .card-post--featured {
grid-column: span 1;
}
.blg .pg-band {
padding: 24px 16px;
}
.blg .posts-grid {
padding: 24px 16px;
}
.blg .about-strip {
padding: 24px 16px;
}
.blg .topics-row {
padding: 24px 16px;
}
.blg .contact-band {
padding: 24px 16px;
}
.blg .divider-diamond {
padding: 0 16px;
}
.blg .pg-band__h1 {
font-size: 32px;
}
}
.suc {
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
background: #EFF4F4;
}
.suc__card {
background: #fff;
border-radius: 22px;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
padding: 48px;
max-width: 560px;
width: 100%;
text-align: left;
}
.suc__card .suc__icon {
width: 48px;
height: 48px;
margin-bottom: 24px;
}
.suc__card .suc__icon svg {
width: 48px;
height: 48px;
display: block;
}
.suc__card .suc__title {
font-size: 32px;
line-height: 1.1;
letter-spacing: 0.01em;
color: #1b1e3d;
margin-bottom: 16px;
padding-left: 16px;
border-left: none;
position: relative;
}
.suc__card .suc__title::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 3px;
border-radius: 4px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
}
.suc__card .suc__body {
font-size: 15px;
line-height: 1.55;
letter-spacing: 0.01em;
color: #2e3150;
text-align: justify;
margin-bottom: 24px;
}
.suc__card .suc__note {
font-size: 13px;
line-height: 1.55;
letter-spacing: 0.02em;
color: #5D6BCB;
background: #EFF4F4;
border-radius: 4px;
padding: 16px;
margin-bottom: 24px;
}
.suc__card .suc__link {
display: inline-block;
font-size: 15px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #fff;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
border-radius: 22px;
padding: 16px 24px;
text-decoration: none;
transition: opacity 0.18s ease-out, box-shadow 0.14s cubic-bezier(0.4, 0, 0.6, 1);
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.suc__card .suc__link:hover {
opacity: 0.88;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
}
.suc__card .suc__link:focus {
outline: 2px solid #5D6BCB;
outline-offset: 3px;
}
@media (max-width: 576px) {
.suc__card {
padding: 24px 16px;
}
.suc__card .suc__title {
font-size: 23px;
}
}
.pg404 {
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
background-color: #EFF4F4;
overflow: hidden;
}
.pg404 .err__wrap {
max-width: 1600px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
}
.pg404 .err__code {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.pg404 .err__num {
font-size: 62px;
line-height: 1.1;
letter-spacing: 0.02em;
font-weight: 900;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
user-select: none;
}
.pg404 .err__bar {
width: 48px;
height: 4px;
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
border-radius: 4px;
margin: 0 auto;
}
.pg404 .err__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
max-width: 520px;
}
.pg404 .err__title {
font-size: 32px;
line-height: 1.3;
letter-spacing: 0.01em;
color: #1a2060;
font-weight: 700;
}
.pg404 .err__title span {
background: linear-gradient(to right, #5D6BCB, #9FB2DD);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pg404 .err__desc {
font-size: 15px;
line-height: 1.75;
letter-spacing: 0.01em;
color: #2d3560;
text-align: justify;
}
.pg404 .err__actions {
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.pg404 .err__btn {
display: inline-block;
padding: 16px 24px;
font-size: 15px;
line-height: 1.3;
letter-spacing: 0.02em;
font-weight: 600;
border-radius: 4px;
text-decoration: none;
border: 2px solid #5D6BCB;
transition: background-color 0.18s cubic-bezier(0.4, 0, 0.6, 1), color 0.18s cubic-bezier(0.4, 0, 0.6, 1), box-shadow 0.14s ease-out;
cursor: pointer;
}
.pg404 .err__btn--main {
background-color: #5D6BCB;
color: #ffffff;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
}
.pg404 .err__btn--main:hover,
.pg404 .err__btn--main:focus-visible {
background-color: #4a58b8;
border-color: #4a58b8;
box-shadow: 1px 10px 60px 0 rgba(93, 107, 203, 0.12);
outline: none;
}
.pg404 .err__btn--main:active {
background-color: #3d4ba0;
border-color: #3d4ba0;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.pg404 .err__btn--ghost {
background-color: transparent;
color: #5D6BCB;
box-shadow: 1px 3px 2px 0 rgba(93, 107, 203, 0.07);
}
.pg404 .err__btn--ghost:hover,
.pg404 .err__btn--ghost:focus-visible {
background-color: #5D6BCB;
color: #ffffff;
box-shadow: 1px 5px 18px 0 rgba(93, 107, 203, 0.09);
outline: none;
}
.pg404 .err__btn--ghost:active {
background-color: #4a58b8;
color: #ffffff;
border-color: #4a58b8;
}
.pg404 .err__deco {
position: relative;
width: 100%;
max-width: 320px;
height: 2px;
background: linear-gradient(to right, transparent, #9FB2DD, transparent);
border-radius: 22px;
pointer-events: none;
}
.pg404 .err__links {
display: flex;
flex-direction: row;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
}
.pg404 .err__links a {
font-size: 13px;
line-height: 1.55;
letter-spacing: 0.02em;
color: #5D6BCB;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.12s ease-out;
}
.pg404 .err__links a:hover,
.pg404 .err__links a:focus-visible {
color: #3d4ba0;
outline: 2px solid #5D6BCB;
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 576px) {
.pg404 {
padding: 48px 16px;
}
.pg404 .err__num {
font-size: 45px;
}
.pg404 .err__title {
font-size: 23px;
}
.pg404 .err__actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.pg404 .err__btn {
text-align: center;
}
}