.wp-intro {
--wp-intro-accent: #122ca9;
--wp-intro-accent-dark: #0d2182;
--wp-intro-accent-light: #eef1ff;
--wp-intro-text: #000000;
--wp-intro-muted: #4a4a4a;
--wp-intro-border: #d9def5;
--wp-intro-background: #ffffff;
padding: 55px 0;
color: var(--wp-intro-text);
}
.wp-intro,
.wp-intro * {
box-sizing: border-box;
}
.wp-intro__hero {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
gap: 48px;
align-items: center;
margin-bottom: 38px;
padding: 38px 40px;
border: 1px solid var(--wp-intro-border);
border-radius: 12px;
background: linear-gradient(
135deg,
#ffffff 0%,
var(--wp-intro-accent-light) 100%
);
}
.wp-intro__eyebrow {
display: inline-block;
margin-bottom: 14px;
color: var(--wp-intro-accent);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.wp-intro__hero h1 {
max-width: 900px;
margin: 0 0 22px;
padding: 0;
color: var(--wp-intro-text);
font-size: 40px;
line-height: 1.18;
}
.wp-intro__hero h1::after {
display: block;
width: 64px;
height: 4px;
margin-top: 20px;
background: var(--wp-intro-accent);
content: "";
}
.wp-intro__hero-text p {
max-width: 920px;
margin: 0 0 16px;
padding: 0;
color: var(--wp-intro-muted);
font-size: 17px;
line-height: 1.7;
}
.wp-intro__hero-text p:last-child {
margin-bottom: 0;
}
.wp-intro__principles {
padding: 26px;
border: 1px solid var(--wp-intro-border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 8px 24px rgba(18, 44, 169, 0.06);
}
.wp-intro__principles h2 {
margin: 0 0 18px;
padding: 0;
color: var(--wp-intro-text);
font-size: 20px;
line-height: 1.35;
}
.wp-intro__principles ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.wp-intro__principles li {
position: relative;
margin: 12px 0 !important;
padding: 0 0 0 30px !important;
color: var(--wp-intro-text);
font-size: 15px;
line-height: 1.5;
list-style: none !important;
}
.wp-intro__principles li::marker {
content: "";
font-size: 0;
}
.wp-intro__principles li::before {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--wp-intro-accent);
color: #ffffff;
font-size: 12px;
font-weight: 700;
content: "✓";
}
.wp-intro__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.wp-intro__card {
min-width: 0;
height: auto;
min-height: 0;
padding: 25px;
border: 1px solid var(--wp-intro-border);
border-radius: 10px;
background: var(--wp-intro-background);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.wp-intro__card:hover {
border-color: #b7c2ed;
box-shadow: 0 8px 22px rgba(18, 44, 169, 0.07);
transform: translateY(-2px);
}
.wp-intro__card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 15px;
}
.wp-intro__icon {
display: flex;
flex: 0 0 48px;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 9px;
background: var(--wp-intro-accent-light);
color: var(--wp-intro-accent);
}
.wp-intro__icon svg {
display: block;
width: 27px;
height: 27px;
stroke: currentColor;
}
.wp-intro__card h3 {
margin: 0;
padding: 0;
color: var(--wp-intro-text);
font-size: 20px;
line-height: 1.3;
}
.wp-intro__card p {
margin: 0;
padding: 0;
color: var(--wp-intro-muted);
font-size: 15px;
line-height: 1.65;
}
.wp-intro__footer {
margin-top: 28px;
padding: 20px 24px;
border-left: 4px solid var(--wp-intro-accent);
border-radius: 0 8px 8px 0;
background: var(--wp-intro-accent-light);
}
.wp-intro__footer p {
margin: 0;
padding: 0;
color: var(--wp-intro-text);
font-size: 15px;
font-weight: 600;
line-height: 1.6;
} @media (max-width: 1100px) {
.wp-intro__hero {
grid-template-columns: 1fr;
gap: 28px;
}
.wp-intro__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} @media (max-width: 767px) {
.wp-intro {
padding: 38px 0;
}
.wp-intro__hero {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 28px;
padding: 26px 22px;
}
.wp-intro__hero h1 {
font-size: 30px;
}
.wp-intro__hero-text p {
font-size: 15px;
}
.wp-intro__principles {
padding: 21px;
}
.wp-intro__grid {
grid-template-columns: 1fr;
gap: 18px;
}
.wp-intro__card {
height: auto;
min-height: 0;
padding: 21px;
}
.wp-intro__card-header {
align-items: flex-start;
}
.wp-intro__card h3 {
font-size: 19px;
}
} .wp-included {
--wp-included-accent: #122ca9;
--wp-included-accent-dark: #0d2182;
--wp-included-accent-light: #eef1ff;
--wp-included-text: #000000;
--wp-included-muted: #4a4a4a;
--wp-included-border: #d9def5;
--wp-included-background: #ffffff;
padding: 55px 0;
color: var(--wp-included-text);
}
.wp-included,
.wp-included * {
box-sizing: border-box;
}
.wp-included__header {
max-width: 950px;
margin-bottom: 34px;
}
.wp-included__header h2 {
margin: 0 0 14px;
padding: 0;
color: var(--wp-included-text);
font-size: 34px;
line-height: 1.2;
}
.wp-included__header h2::after {
display: block;
width: 54px;
height: 3px;
margin-top: 14px;
background: var(--wp-included-accent);
content: "";
}
.wp-included__header p {
margin: 0 0 12px;
padding: 0;
color: var(--wp-included-muted);
font-size: 16px;
line-height: 1.7;
}
.wp-included__header p:last-child {
margin-bottom: 0;
}
.wp-included__summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 30px;
}
.wp-included__summary-item {
position: relative;
min-width: 0;
padding: 18px 18px 18px 49px;
border: 1px solid var(--wp-included-border);
border-radius: 8px;
background: var(--wp-included-accent-light);
color: var(--wp-included-text);
font-size: 14px;
font-weight: 600;
line-height: 1.45;
}
.wp-included__summary-item::before {
position: absolute;
top: 18px;
left: 18px;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--wp-included-accent);
color: #ffffff;
font-size: 13px;
font-weight: 700;
content: "✓";
}
.wp-included__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.wp-included__card {
min-width: 0;
padding: 26px;
border: 1px solid var(--wp-included-border);
border-radius: 10px;
background: var(--wp-included-background);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.wp-included__card:hover {
border-color: #b9c4ed;
box-shadow: 0 8px 22px rgba(18, 44, 169, 0.07);
transform: translateY(-2px);
}
.wp-included__card--wide {
grid-column: 1 / -1;
}
.wp-included__card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.wp-included__icon {
display: flex;
flex: 0 0 46px;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 8px;
background: var(--wp-included-accent-light);
color: var(--wp-included-accent);
}
.wp-included__icon svg {
width: 25px;
height: 25px;
stroke: currentColor;
}
.wp-included__card h3 {
margin: 0;
padding: 0;
color: var(--wp-included-text);
font-size: 21px;
line-height: 1.3;
}
.wp-included__card h4 {
margin: 22px 0 10px;
padding: 0;
color: var(--wp-included-text);
font-size: 17px;
line-height: 1.35;
}
.wp-included__card p {
margin: 0 0 14px;
padding: 0;
color: var(--wp-included-muted);
font-size: 15px;
line-height: 1.65;
}
.wp-included__card p:last-child {
margin-bottom: 0;
}
.wp-included__card ul {
margin: 0 0 16px !important;
padding: 0 !important;
list-style: none !important;
}
.wp-included__card ul:last-child {
margin-bottom: 0 !important;
}
.wp-included__card li {
position: relative;
margin: 7px 0 !important;
padding: 0 0 0 20px !important;
color: var(--wp-included-text);
font-size: 14px;
line-height: 1.5;
list-style: none !important;
}
.wp-included__card li::marker {
content: "";
font-size: 0;
}
.wp-included__card li::before {
position: absolute;
top: 8px;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wp-included-accent);
content: "";
}
.wp-included__columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 20px;
}
.wp-included__box {
padding: 21px;
border-radius: 8px;
background: #f8f9ff;
}
.wp-included__box h4 {
margin-top: 0;
}
.wp-included__note {
margin-top: 18px;
padding: 17px 20px;
border-left: 3px solid var(--wp-included-accent);
border-radius: 0 7px 7px 0;
background: var(--wp-included-accent-light);
}
.wp-included__note p {
margin: 0;
color: var(--wp-included-text);
}
.wp-included__launch {
grid-column: 1 / -1;
padding: 28px;
border: 1px solid var(--wp-included-border);
border-radius: 10px;
background: var(--wp-included-accent-light);
}
.wp-included__launch .wp-included__card-header {
margin-bottom: 16px;
}
.wp-included__launch-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 22px;
margin-top: 20px;
}
.wp-included__launch-item {
position: relative;
padding-left: 25px;
color: var(--wp-included-text);
font-size: 14px;
line-height: 1.5;
}
.wp-included__launch-item::before {
position: absolute;
top: 0;
left: 0;
color: var(--wp-included-accent);
font-size: 17px;
font-weight: 700;
content: "✓";
}
.wp-included__conclusion {
grid-column: 1 / -1;
margin: 0;
padding: 20px 24px;
border-top: 1px solid var(--wp-included-border);
border-bottom: 1px solid var(--wp-included-border);
color: var(--wp-included-text);
font-size: 15px;
font-weight: 600;
line-height: 1.65;
text-align: center;
} @media (max-width: 980px) {
.wp-included__summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wp-included__launch-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} @media (max-width: 767px) {
.wp-included {
padding: 38px 0;
}
.wp-included__header {
margin-bottom: 28px;
}
.wp-included__header h2 {
font-size: 28px;
}
.wp-included__header p {
font-size: 15px;
}
.wp-included__summary,
.wp-included__grid,
.wp-included__columns,
.wp-included__launch-grid {
grid-template-columns: 1fr;
}
.wp-included__card--wide,
.wp-included__launch,
.wp-included__conclusion {
grid-column: auto;
}
.wp-included__card,
.wp-included__launch {
padding: 21px;
}
.wp-included__card-header {
align-items: flex-start;
}
.wp-included__card h3 {
font-size: 19px;
}
}