.sec {
position: relative;
padding: 112px 32px;
margin-block: 0 !important;
}
.sec--tight-top {
padding-top: 96px;
padding-bottom: 0;
}
.sec--mist {
background: var(--wp--preset--color--mist);
}
.sec--violet {
background: var(--wp--preset--color--violet);
color: var(--wp--preset--color--paper);
}
.sec--edge {
padding-top: 72px;
padding-bottom: 0;
}
.sec--cta {
padding-top: 0;
}
.has-deco {
isolation: isolate;
overflow: clip;
}
.sec__title {
margin: 0;
font-size: clamp(32px, 5.6vw, 50px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.025em;
}
.sec__title--narrow {
max-width: 14ch;
}
.sec__lead {
margin: 0;
font-size: 18px;
line-height: 1.55;
max-width: 46ch;
}
.sec__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
}
.sec__head > * {
margin: 0;
}
.sec__intro > * {
margin: 0;
}
.sec__intro .sec__lead {
margin-top: 18px;
}
.sec__more {
margin-top: 40px;
} .sec .wp-block-group:not(.alignfull) > * {
margin-left: 0 !important;
margin-right: 0 !important;
} .deco {
position: absolute;
z-index: -1;
pointer-events: none;
display: block;
}
.deco span {
position: absolute;
display: block;
}
.deco span:first-child {
left: 0;
bottom: 0;
width: 78%;
height: 62%;
border: 2px solid rgba(51, 51, 51, 0.14);
border-radius: 18px;
}
.deco span:last-child {
right: 0;
top: 0;
width: 52%;
height: 52%;
border-radius: 16px;
background: rgba(194, 247, 132, 0.45);
}
.deco--violet span:last-child {
background: rgba(94, 23, 235, 0.1);
} p.k,
p.plus {
margin: 0;
}
.keys {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.keys > * {
margin: 0;
} .stretch {
position: relative;
isolation: isolate;
}
.stretch a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
main .stretch a:not(.wp-element-button):not(.k) {
text-decoration: none;
}
.stretch a:focus,
.stretch a:focus-visible {
outline: none;
}
.stretch a:focus-visible::after {
outline: 2px solid var(--wp--preset--color--ink);
outline-offset: 3px;
border-radius: 14px;
} .hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 56px;
}
.sec--hero {
padding-top: 64px;
padding-bottom: 104px;
}
.hero__text {
position: relative;
flex: 1 1 500px;
min-width: 0;
}
.hero__text > * {
margin-block: 0;
}
.hero__title {
font-size: clamp(42px, 8vw, 70px) !important;
line-height: 1.02 !important;
font-weight: 800;
letter-spacing: -0.03em;
max-width: 10ch;
} mark.hl {
display: inline-block;
background: var(--wp--preset--color--lime);
color: var(--wp--preset--color--ink);
padding: 0 10px;
border-radius: 6px;
line-height: inherit;
}
.hero__lead {
margin-top: 30px !important;
font-size: 20px;
line-height: 1.55;
max-width: 48ch;
}
.hero__text .wp-block-buttons {
margin-top: 40px !important;
gap: 18px;
}
.hero__facts {
list-style: none;
margin: 44px 0 0 !important;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
font-size: 16px;
font-weight: 600;
}
.hero__kb {
position: relative;
flex: 1 1 470px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
}
.hero__kb > * {
margin: 0;
}
.kbcard {
position: relative;
display: flex;
flex-direction: column;
gap: 13px;
max-width: 100%;
padding: 30px;
box-sizing: border-box;
background: var(--wp--preset--color--paper);
border: 3px solid var(--wp--preset--color--ink);
border-radius: 16px;
}
.kbcard .row {
display: flex;
gap: 11px;
}
.kbcard .kd {
flex: 0 0 auto;
}
.kbcard .kd--wide {
width: 86px;
}
.kbcard .kd--space {
width: 288px;
}
.kbcard .k--big {
width: 58px;
min-width: 58px;
height: 58px;
padding: 0;
font-size: 24px;
font-weight: 800;
}
.kbcard .k--strg {
width: 98px;
height: 58px;
font-size: 19px;
}
.partner-badge--hero {
position: absolute;
top: -70px;
right: -54px;
z-index: 2;
width: 140px;
height: 140px;
transform: rotate(8deg);
}
.hero__msg {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 14px 20px;
background: var(--wp--preset--color--violet);
color: var(--wp--preset--color--paper);
border-radius: 7px;
font-size: 16px;
font-weight: 600;
}
.hero__msg::before {
content: "";
flex: 0 0 12px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--wp--preset--color--lime);
} .ticker {
overflow: hidden;
white-space: nowrap;
background: var(--wp--preset--color--violet);
color: var(--wp--preset--color--paper);
padding: 20px 0;
font-size: 20px;
font-weight: 700;
}
.ticker .track {
display: inline-flex;
gap: 56px;
padding-right: 56px;
}
.ticker .star {
color: var(--wp--preset--color--lime);
} .paths {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 40px;
}
.card {
flex: 1 1 300px;
min-width: 0;
padding: 32px;
box-sizing: border-box;
border: 3px solid var(--wp--preset--color--ink);
border-radius: 14px;
}
.card > * {
margin-block: 0;
}
.card .k {
height: 44px;
}
.card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--wp--preset--color--lime);
border-radius: 11px;
opacity: 0;
}
.card:hover::before,
.card:focus-within::before {
opacity: 1;
}
.card:hover .k.lime,
.card:focus-within .k.lime {
background: var(--wp--preset--color--violet);
border-color: var(--wp--preset--color--violet);
color: var(--wp--preset--color--paper);
}
.card__title {
margin-top: 22px !important;
font-size: 26px !important;
font-weight: 800;
line-height: 1.2 !important;
}
.card__text {
margin-top: 10px !important;
font-size: 17px;
line-height: 1.5;
} .svc-list {
display: flex;
flex-wrap: wrap;
column-gap: 72px;
margin-top: 56px;
}
.svc {
position: relative;
isolation: isolate;
flex: 1 1 500px;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 28px;
padding: 28px 24px;
border-top: 3px solid var(--wp--preset--color--ink);
}
.svc > * {
margin-block: 0;
}
.svc .keys {
flex: 0 0 210px;
flex-wrap: nowrap;
}
.svc__body {
flex: 1 1 240px;
min-width: 0;
}
.svc__body > * {
margin-block: 0;
}
.svc__title {
font-size: 23px !important;
font-weight: 800;
line-height: 1.3 !important;
}
.svc__text {
margin-top: 6px !important;
font-size: 16px;
line-height: 1.5;
}
.svc::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--wp--preset--color--lime);
opacity: 0;
}
.svc a:focus-visible::after {
border-radius: 0;
}
.svc:hover::before,
.svc:focus-within::before {
opacity: 1;
} .svc:hover .k.lime,
.svc:focus-within .k.lime {
background: var(--wp--preset--color--violet);
border-color: var(--wp--preset--color--violet);
color: var(--wp--preset--color--paper);
} .trail {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 242px;
display: block;
}
.steps {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 64px;
}
.steps__wrap {
position: relative;
}
.station {
flex: 1 1 190px;
min-width: 0;
}
.station > * {
margin-block: 0;
}
.station:nth-child(even) {
margin-top: 170px;
}
.station .k {
width: 72px;
height: 72px;
font-size: 28px;
font-weight: 800;
}
.station__title,
.station__text {
text-shadow: 0 0 3px var(--wp--preset--color--mist), 0 0 3px var(--wp--preset--color--mist), 0 0 6px var(--wp--preset--color--mist), 0 0 10px var(--wp--preset--color--mist);
}
.station__title {
margin-top: 22px !important;
font-size: 23px !important;
font-weight: 800;
}
.station__text {
margin-top: 8px !important;
font-size: 16px;
line-height: 1.5;
} .stance {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 56px;
padding-block: 8px;
}
.stance__claim {
flex: 2 1 600px;
min-width: 0;
margin: 0;
font-size: clamp(32px, 6.4vw, 58px) !important;
line-height: 1.06 !important;
font-weight: 800;
letter-spacing: -0.025em;
}
.stance__side {
flex: 1 1 340px;
min-width: 0;
}
.stance__side > * {
margin-block: 0;
}
.person {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px !important;
}
.person > * {
margin: 0;
}
.person .avatar {
flex: 0 0 72px;
}
.person .avatar img {
display: block;
width: 72px;
height: 72px;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--wp--preset--color--lime);
}
.person__name {
font-size: 16px;
line-height: 1.4;
}
.stance__text {
font-size: 18px;
line-height: 1.6;
color: #ece4fe;
}
.stance__side .wp-block-buttons {
margin-top: 28px !important;
}
.sec--violet .is-style-lime-edge .wp-block-button__link,
.btn-lime-edge .wp-block-button__link {
border-color: var(--wp--preset--color--lime);
} .feature {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 56px;
padding: 56px;
border: 3px solid var(--wp--preset--color--ink);
border-radius: 16px;
}
.feature__text {
flex: 1 1 420px;
min-width: 0;
}
.feature__text > * {
margin-block: 0;
}
.feature__title {
font-size: clamp(28px, 4.8vw, 42px) !important;
line-height: 1.08 !important;
font-weight: 800;
letter-spacing: -0.02em;
}
.feature__lead {
margin-top: 18px !important;
font-size: 18px;
line-height: 1.55;
max-width: 48ch;
}
.feature__proof {
margin-top: 14px !important;
font-size: 16px;
font-weight: 600;
}
.feature__text .wp-block-buttons {
margin-top: 30px !important;
}
.sync {
flex: 1 1 400px;
min-width: 0;
display: flex;
align-items: center;
}
.sync .k {
flex: 0 0 auto;
height: 104px;
min-width: 150px;
font-size: 20px;
border-radius: 10px;
}
.sync__line {
position: relative;
flex: 1 1 auto;
height: 40px;
min-width: 80px;
margin: 0 14px;
}
.sync__line::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 3px dashed var(--wp--preset--color--ink);
}
.pkt {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
border-radius: 4px;
border: 2px solid var(--wp--preset--color--ink);
background: var(--wp--preset--color--lime);
box-sizing: border-box;
}
.pkt:nth-child(1) {
left: 18%;
}
.pkt:nth-child(2) {
left: 48%;
}
.pkt:nth-child(3) {
left: 78%;
background: var(--wp--preset--color--paper);
} .voices {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-top: 56px;
}
.voice {
flex: 1 1 320px;
min-width: 0;
padding: 32px;
box-sizing: border-box;
background: var(--wp--preset--color--paper);
border: 3px solid var(--wp--preset--color--ink);
border-radius: 14px;
}
.voice > * {
margin-block: 0;
}
.achievement {
display: flex;
align-items: center;
gap: 14px;
}
.achievement > * {
margin: 0;
}
.badge {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--wp--preset--color--lime);
border: 3px solid var(--wp--preset--color--ink);
box-sizing: border-box;
}
.achievement__text {
display: flex;
flex-direction: column;
gap: 0;
}
.achievement__text > * {
margin: 0 !important;
}
.achievement__label {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.achievement__name {
font-size: 21px;
font-weight: 800;
line-height: 1.3;
}
.voice .wp-block-quote {
margin: 24px 0 0;
padding: 0;
border: 0;
font-size: 18px;
line-height: 1.55;
}
.voice .wp-block-quote p {
margin: 0;
}
.voice__who {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px !important;
}
.voice__who > * {
margin: 0;
}
.voice__avatar {
flex: 0 0 56px;
width: 56px;
height: 56px;
margin: 0;
}
.voice__avatar img {
display: block;
width: 56px;
height: 56px;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--wp--preset--color--ink);
box-sizing: border-box;
}
.initials {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--wp--preset--color--mist);
border: 2px solid var(--wp--preset--color--ink);
box-sizing: border-box;
font-size: 14px;
font-weight: 800;
}
.voice__name a {
text-decoration-color: var(--wp--preset--color--lime);
text-decoration-thickness: 3px;
text-underline-offset: 3px;
}
.voice__name a:hover {
text-decoration-color: var(--wp--preset--color--ink);
}
.voice__name {
font-size: 15px;
line-height: 1.4;
}
.logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 40px;
margin-top: 72px;
}
.logos > * {
margin: 0;
}
.logos__intro {
font-size: 16px;
font-weight: 600;
}
.logos__item {
padding: 12px 20px;
border: 2px dashed #9a9a9a;
border-radius: 10px;
font-size: 14px;
} .band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 36px 40px;
background: var(--wp--preset--color--lime);
border-radius: 16px;
}
.band__text {
flex: 1 1 420px;
min-width: 0;
}
.band__text > * {
margin-block: 0;
}
.band__kicker {
font-size: 15px;
font-weight: 700;
}
.band__title {
margin-top: 6px !important;
font-size: 28px !important;
font-weight: 800;
line-height: 1.2 !important;
}
.band .wp-block-buttons {
gap: 12px;
}
.cta {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 48px;
padding: 72px 64px;
background: var(--wp--preset--color--lime);
border-radius: 10px;
}
.cta__text {
flex: 1 1 480px;
min-width: 0;
}
.cta__text > * {
margin-block: 0;
}
.cta__lead {
margin-top: 18px !important;
font-size: 19px;
line-height: 1.55;
max-width: 46ch;
}
.cta .wp-block-buttons {
margin-top: 28px !important;
gap: 16px;
}
.cta__key {
position: relative;
flex: 0 0 auto;
padding: 0 40px 12px;
}
.k.bigS {
width: 120px;
height: 120px;
font-family: var(--wp--preset--font-family--work-sans);
font-size: 78px;
font-weight: 800;
border-radius: 16px;
cursor: pointer;
}
.k.bigS:focus-visible {
border-radius: 16px;
}
.k.bigS.is-pressed {
transform: translateY(3px) scale(0.94);
} .cta__hint {
position: absolute;
top: calc(100% + 10px);
left: 50%;
z-index: 2;
margin: 0;
padding: 6px 12px;
background: var(--wp--preset--color--ink);
border-radius: 7px;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--wp--preset--color--paper);
white-space: nowrap;
transform: translateX(-50%);
}
.cta__hint:empty {
display: none;
} .blog-teaser .wp-block-post-template {
margin-top: 48px;
}
.blog-teaser .wp-block-post-featured-image {
margin: 0;
border: 3px solid var(--wp--preset--color--ink);
border-radius: 12px;
overflow: hidden;
background: var(--wp--preset--color--mist);
}
.blog-teaser .wp-block-post-featured-image img {
display: block;
width: 100%;
}
.blog-teaser .wp-block-post-terms {
margin: 20px 0 0;
font-size: 14px;
font-weight: 700;
}
.blog-teaser .wp-block-post-title {
margin: 6px 0 0;
font-size: 22px;
line-height: 1.3;
font-weight: 800;
}
.blog-teaser .wp-block-post-title a {
text-decoration: none;
} @media (max-width: 900px) {
.sec {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 860px) {
.trail {
display: none;
}
.station:nth-child(even) {
margin-top: 0;
}
}
@media (max-width: 640px) {
.sec {
padding-top: 64px;
padding-bottom: 64px;
}
.sec--tight-top {
padding-top: 64px;
padding-bottom: 0;
}
.sec--cta {
padding-top: 0;
}
.sec--edge {
padding-top: 40px;
padding-bottom: 0;
}
.sec--hero {
padding-top: 36px;
padding-bottom: 64px;
}
.partner-badge--hero {
right: -14px;
width: 110px;
height: 110px;
top: -56px;
} .kbcard {
--k: min(58px, calc((100vw - 108px) / 6.5));
width: 100%;
padding: 16px;
gap: 6px;
}
.kbcard .row {
gap: 6px;
align-items: flex-start;
}
.kbcard .row[style] {
padding-left: calc(var(--k) * 0.35) !important;
}
.kbcard .kd,
.kbcard .k--big {
flex: 0 0 auto;
width: var(--k);
min-width: 0;
height: var(--k);
padding: 4px 5px;
font-size: 11px;
border-radius: 5px;
}
.kbcard .k--big {
padding: 0;
font-size: calc(var(--k) * 0.42);
}
.kbcard .kd--wide {
width: calc(var(--k) * 1.5);
}
.kbcard .kd--space {
flex: 1 1 0;
width: auto;
}
.kbcard .k--strg {
flex: 0 0 auto;
width: calc(var(--k) * 1.7);
min-width: 0;
height: var(--k);
padding: 0;
font-size: 13px;
border-radius: 5px;
}
.sync .k {
flex: 1 1 0;
min-width: 0;
height: 72px;
padding: 0 8px;
font-size: 16px;
}
.sync__line {
flex: 0 0 56px;
min-width: 0;
margin: 0 8px;
}
.feature,
.cta {
padding: 32px 24px;
}
.band {
padding: 28px 24px;
} .cta {
gap: 0;
}
.cta__key {
position: absolute;
top: -27px;
right: -22px;
padding: 0;
}
.cta__text {
flex-basis: 100%;
}
.cta .sec__title {
padding-right: 48px;
}
.k.bigS {
width: 80px;
height: 80px;
font-size: 52px;
border-radius: 12px;
rotate: 8deg;
}
.k.bigS:focus-visible {
border-radius: 12px;
}
.cta__hint {
left: auto;
right: 0;
transform: none;
}
.deco {
transform: scale(0.6);
}
} @media (prefers-reduced-motion: no-preference) {
.card::before {
opacity: 1;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.card:hover::before,
.card:focus-within::before {
transform: scaleX(1);
}
.svc::before {
opacity: 1;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.svc:hover::before,
.svc:focus-within::before {
transform: scaleX(1);
}
} .sec--flow .station__title,
.sec--flow .station__text {
text-shadow: 0 0 3px var(--wp--preset--color--paper), 0 0 3px var(--wp--preset--color--paper), 0 0 6px var(--wp--preset--color--paper), 0 0 10px var(--wp--preset--color--paper);
}
@media (max-width: 860px) {
.steps {
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
margin-top: 36px;
}
.station,
.station:nth-child(even) {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 18px;
align-content: start;
flex: none;
margin-top: 0;
padding-bottom: 36px;
}
.station:last-child {
padding-bottom: 0;
} .station:not(:last-child)::before {
content: "";
position: absolute;
left: 26px;
top: 62px;
bottom: 6px;
border-left: 3px dashed rgba(51, 51, 51, 0.25);
}
.station .k {
grid-row: 1 / span 2;
width: 56px;
height: 56px;
font-size: 22px;
}
.station__title,
.station__text {
text-shadow: none !important;
}
.station__title {
grid-column: 2;
align-self: end;
margin-top: 0 !important;
font-size: 21px !important;
}
.station__text {
grid-column: 2;
margin-top: 6px !important;
}
}