:root {
    --bg: #ffffff;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --surface-soft: #eef6f0;
    --text: #0d0e12;
    --muted: #60636f;
    --accent: #111217;
    --accent-dark: #000000;
    --accent-soft: rgba(35, 178, 132, 0.14);
    --mint: #35c79a;
    --blue: #eaf3ff;
    --cream: #fff6e8;
    --line: rgba(20, 22, 28, 0.1);
    --shadow: 0 22px 60px rgba(25, 31, 43, 0.08);
    --radius-lg: 8px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --container: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Manrope", "Inter", "Segoe UI", "Arial", sans-serif;
    line-height: 1.6;
    background: #ffffff;
    overflow-x: clip;
}

body.is-contact-modal-open {
    overflow: hidden;
}

.contact-modal[hidden] {
    display: none;
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 20px;
}

.contact-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 16, 51, 0.34);
    backdrop-filter: blur(8px);
}

.contact-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    padding: 30px;
    border: 1px solid rgba(49, 86, 255, 0.18);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 26px 80px rgba(31, 45, 98, 0.28);
}

.contact-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    color: #3156ff;
    background: rgba(49, 86, 255, 0.1);
    cursor: pointer;
    font-weight: 800;
}

.contact-modal__eyebrow {
    margin: 0 0 8px;
    color: #3156ff;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-modal h2 {
    margin: 0 0 22px;
    color: #071033;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
}

.contact-modal form {
    display: grid;
    gap: 14px;
}

.contact-modal label {
    display: grid;
    gap: 7px;
    color: #53617f;
    font-size: 0.9rem;
    font-weight: 700;
}

.contact-modal input,
.contact-modal textarea {
    width: 100%;
    border: 1px solid rgba(49, 86, 255, 0.18);
    border-radius: 12px;
    color: #071033;
    background: #fff;
    font: inherit;
}

.contact-modal input {
    min-height: 46px;
    padding: 0 14px;
}

.contact-modal textarea {
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
}

.contact-modal input:focus,
.contact-modal textarea:focus {
    outline: 2px solid rgba(49, 86, 255, 0.18);
    border-color: #3156ff;
}

.contact-modal button[type="submit"] {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: #3156ff;
    cursor: pointer;
    font-weight: 800;
}

.contact-modal button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: wait;
}

.contact-modal__state {
    min-height: 20px;
    margin: 0;
    color: #53617f;
    font-size: 0.9rem;
    font-weight: 700;
}

.contact-modal__state.is-success {
    color: #168352;
}

.contact-modal__state.is-error {
    color: #d43c56;
}

.contact-modal__hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

code {
    padding: 0.12rem 0.42rem;
    border: 1px solid rgba(20, 22, 28, 0.08);
    border-radius: 999px;
    color: #0f6f54;
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.74);
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
    background: #ffffff;
}

.container {
    width: min(100% - 2rem, var(--container));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 18px 0 10px;
    background: transparent;
}

.header-inner {
    width: min(100% - 6rem, 1810px);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(190px, 0.34fr) minmax(360px, 1fr) minmax(360px, auto);
    align-items: center;
    gap: 2rem;
    min-height: 98px;
    padding: 0 56px 0 68px;
    border: 1px solid rgba(229, 233, 255, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 54px rgba(20, 26, 72, 0.09);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: max-content;
}

.brand__text {
    color: #070d2a;
    font-size: 2.05rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 5.3rem);
}

.site-nav__link {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    color: #101633;
    font-size: clamp(1rem, 1vw, 1.17rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wm-inline-nav-tools {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 6;
    display: inline-flex;
    gap: 4px;
    transform: translateX(-50%);
}

.wm-inline-nav-tools > span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #fff;
    background: #3156ff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
}

.is-inline-shell-editable [data-inline-nav-item].is-dragging {
    opacity: 0.45;
}

.wm-inline-modal[hidden] {
    display: none;
}

.wm-inline-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
}

.wm-inline-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 16, 51, 0.28);
    backdrop-filter: blur(6px);
}

.wm-inline-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 26px;
    border: 1px solid rgba(49, 86, 255, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(31, 45, 98, 0.24);
}

.wm-inline-modal__dialog h2 {
    margin: 0 0 20px;
    color: #071033;
    font-size: 1.25rem;
}

.wm-inline-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    color: #3156ff;
    background: rgba(49, 86, 255, 0.1);
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 800;
}

.wm-inline-modal__field {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.wm-inline-modal__field span {
    color: #53617f;
    font-size: 0.9rem;
    font-weight: 700;
}

.wm-inline-modal__field input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(49, 86, 255, 0.18);
    border-radius: 12px;
    color: #071033;
    background: #fff;
    font: inherit;
}

.wm-inline-modal__field input:focus {
    outline: 2px solid rgba(49, 86, 255, 0.2);
    border-color: #3156ff;
}

.wm-inline-modal__error {
    margin: 0 0 14px;
    color: #d43c56;
    font-size: 0.9rem;
    font-weight: 700;
}

.wm-inline-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.wm-inline-modal__actions button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
}

.wm-inline-modal__actions button:first-child {
    color: #3156ff;
    background: rgba(49, 86, 255, 0.1);
}

.wm-inline-modal__actions button:last-child {
    color: #fff;
    background: #3156ff;
}

.site-nav__link:hover,
.site-nav__link.is-active {
    color: #3156ff;
    background: transparent;
    transform: translateY(-1px);
}

.site-nav__link--account {
    color: #3156ff;
    font-weight: 800;
}

.site-nav__link--accent {
    min-height: 46px;
    padding-inline: 1.1rem;
    color: #ffffff;
    background: #050507;
    box-shadow: 0 14px 30px rgba(9, 10, 14, 0.14);
}

.site-nav__link--accent:hover,
.site-nav__link--accent.is-active {
    color: #ffffff;
    background: #050507;
}

.site-nav__phone {
    margin-left: 0.7rem;
    color: #30323a;
    font-weight: 800;
    white-space: nowrap;
}

.site-nav__role,
.site-nav__button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.58rem 0.82rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
}

.site-nav__role {
    color: #12906c;
    background: rgba(53, 199, 154, 0.12);
}

.nav-form {
    margin: 0;
}

.site-nav__button {
    border: 1px solid var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 12px;
}

.site-nav__login {
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 24px;
    border: 1px solid rgba(190, 199, 234, 0.82);
    border-radius: 16px;
    color: #071033;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 30px rgba(26, 42, 91, 0.07);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.site-nav__login:hover {
    color: #3156ff;
    border-color: rgba(49, 86, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(49, 86, 255, 0.1);
}

.site-nav__login.is-active {
    color: #3156ff;
    border-color: rgba(49, 86, 255, 0.32);
    background: rgba(49, 86, 255, 0.08);
}

.site-nav__login-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #3156ff;
    background: rgba(49, 86, 255, 0.1);
}

.site-nav__login-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.site-nav__login--mobile {
    display: none;
}

.site-nav__cta {
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    gap: 1.15rem;
    padding: 0 34px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(135deg, #1d6cff 0%, #283eff 58%, #492dff 100%);
    box-shadow: 0 18px 38px rgba(43, 73, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-nav__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(43, 73, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.site-nav__cta--mobile {
    display: none;
}

.site-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 0;
}

.site-nav__arrow svg {
    width: 21px;
    height: 21px;
    display: block;
    overflow: visible;
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    border: 1px solid rgba(58, 81, 255, 0.18);
    border-radius: 14px;
    background: rgba(246, 248, 255, 0.96);
    cursor: pointer;
}

.nav-toggle__line {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #071033;
}

.webcraft-hero {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 126px);
    padding: clamp(86px, 9vh, 138px) 0 78px;
    overflow: hidden;
    color: #081031;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
    border-bottom: 0;
}

.webcraft-hero::before,
.webcraft-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.webcraft-hero::before {
    display: none;
}

.webcraft-hero::after {
    right: -140px;
    top: 190px;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 82, 255, 0.13), transparent 58%);
}

.webcraft-hero__grid-bg,
.webcraft-hero__rings,
.webcraft-hero__dots,
.webcraft-hero__curve,
.webcraft-triangle,
.webcraft-visual {
    position: absolute;
    pointer-events: none;
}

.webcraft-hero__grid-bg {
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(95, 103, 255, 0.09) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        repeating-linear-gradient(90deg, transparent 0 35px, rgba(95, 103, 255, 0.05) 36px, transparent 37px);
    mask-image: linear-gradient(180deg, #000 0%, transparent 76%);
}

.webcraft-hero__rings {
    border: 2px solid rgba(137, 139, 255, 0.2);
    border-radius: 50%;
}

.webcraft-hero__rings::before,
.webcraft-hero__rings::after {
    content: "";
    position: absolute;
    border: inherit;
    border-radius: inherit;
}

.webcraft-hero__rings--left {
    left: 26px;
    bottom: -104px;
    width: 336px;
    height: 336px;
}

.webcraft-hero__rings--left::before {
    inset: 18px;
}

.webcraft-hero__rings--left::after {
    inset: 40px;
}

.webcraft-hero__rings--right {
    right: 112px;
    top: 122px;
    width: 398px;
    height: 398px;
    border-color: rgba(139, 143, 255, 0.14);
}

.webcraft-hero__rings--right::before {
    inset: 46px;
}

.webcraft-hero__rings--right::after {
    inset: 96px;
}

.webcraft-hero__dots {
    width: 212px;
    height: 102px;
    background-image: radial-gradient(circle, rgba(84, 88, 255, 0.26) 2.5px, transparent 3px);
    background-size: 22px 22px;
}

.webcraft-hero__dots--left {
    left: 76px;
    bottom: 176px;
}

.webcraft-hero__dots--right {
    right: 22px;
    top: 42px;
    width: 230px;
    height: 96px;
}

.webcraft-hero__curve {
    border: 2px solid rgba(110, 114, 255, 0.22);
    border-color: rgba(110, 114, 255, 0.22) transparent transparent transparent;
    border-radius: 50%;
}

.webcraft-hero__curve--top {
    left: -78px;
    top: 66px;
    width: 210px;
    height: 132px;
    transform: rotate(15deg);
}

.webcraft-hero__curve--top::after {
    content: "";
    position: absolute;
    right: 20px;
    top: -9px;
    width: 15px;
    height: 15px;
    border: 3px solid rgba(115, 119, 255, 0.5);
    border-radius: 50%;
    background: #ffffff;
}

.webcraft-hero__curve--bottom {
    left: 248px;
    right: 0;
    bottom: -54px;
    width: 1320px;
    height: 220px;
    transform: rotate(-1deg);
}

.webcraft-hero__inner {
    position: relative;
    z-index: 4;
    width: min(100% - 2rem, 1050px);
}

.webcraft-hero__content {
    display: grid;
    justify-items: center;
    text-align: center;
}

.webcraft-hero__title {
    margin: 0;
    color: #071033;
    font-size: clamp(3.4rem, 4.9vw, 5.75rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: 0;
    text-shadow: 0 9px 24px rgba(16, 25, 68, 0.1);
}

.webcraft-hero__title span {
    color: #3156ff;
    background: linear-gradient(180deg, #315dff 0%, #4c37f3 78%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.webcraft-hero__lead {
    margin: 24px 0 0;
    color: #2e3857;
    font-size: clamp(1.05rem, 1.25vw, 1.42rem);
    font-weight: 500;
    line-height: 1.55;
}

.webcraft-hero__actions {
    display: flex;
    justify-content: center;
    gap: 38px;
    margin-top: 40px;
}

.webcraft-button {
    min-width: 320px;
    min-height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 1.26rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.webcraft-button--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #1f70ff 0%, #263cff 62%, #4a2cff 100%);
    box-shadow: 0 18px 40px rgba(47, 76, 255, 0.28);
}

.webcraft-button--secondary {
    color: #0b1230;
    border-color: rgba(190, 199, 234, 0.72);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 34px rgba(26, 42, 91, 0.06);
}

.webcraft-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 34px;
    width: min(100%, 820px);
}

.webcraft-feature {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 22px;
    border: 1px solid rgba(210, 217, 244, 0.96);
    border-radius: 12px;
    color: #101633;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 13px 32px rgba(47, 61, 120, 0.09);
}

.webcraft-feature svg {
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    color: #3156ff;
}

.webcraft-feature:nth-child(3) svg {
    color: #55c3be;
}

.webcraft-hero__down {
    position: absolute;
    left: 50%;
    bottom: 43px;
    z-index: 5;
    width: 36px;
    height: 28px;
    transform: translateX(-50%);
}

.webcraft-hero__down span {
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    border-right: 4px solid #3156ff;
    border-bottom: 4px solid #3156ff;
    transform: rotate(45deg);
}

.webcraft-code {
    pointer-events: auto;
    user-select: text;
    left: 94px;
    top: 122px;
    z-index: 2;
    width: 244px;
    min-height: 272px;
    overflow: hidden;
    border-radius: 19px;
    color: #f1edff;
    background: linear-gradient(145deg, rgba(25, 28, 78, 0.96), rgba(19, 23, 62, 0.98));
    box-shadow: 0 28px 50px rgba(46, 48, 140, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.webcraft-code__bar {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 17px;
    background: linear-gradient(180deg, rgba(104, 112, 190, 0.34), rgba(104, 112, 190, 0.08));
}

.webcraft-code__bar span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

.webcraft-code__bar span:nth-child(1) {
    background: #ff686f;
}

.webcraft-code__bar span:nth-child(2) {
    background: #ffd35a;
}

.webcraft-code__bar span:nth-child(3) {
    background: #b9df59;
}

.webcraft-code__bar b {
    margin-left: auto;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
}

.webcraft-code pre {
    margin: 0;
    padding: 18px 22px 22px 30px;
    user-select: text;
}

.webcraft-code code {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #d9dcff;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 14px;
    line-height: 1.72;
    background: transparent;
    white-space: pre;
    user-select: text;
}

.webcraft-floating-icon {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #54a7ff 0%, #4731f6 100%);
    box-shadow: 0 22px 42px rgba(54, 70, 232, 0.28);
}

.webcraft-floating-icon svg {
    width: 58%;
    height: 58%;
}

.webcraft-floating-icon--code {
    left: 36px;
    top: 458px;
    z-index: 3;
    width: 92px;
    height: 92px;
    border-radius: 15px;
    transform: rotate(-8deg);
}

.webcraft-floating-icon--globe {
    right: 296px;
    top: 75px;
    z-index: 3;
    width: 94px;
    height: 94px;
    border-radius: 17px;
    transform: rotate(7deg);
}

.webcraft-chart {
    left: 171px;
    top: 443px;
    z-index: 3;
    width: 232px;
    min-height: 192px;
    padding: 22px 20px 18px;
    border: 1px solid rgba(218, 224, 248, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 28px 48px rgba(42, 57, 126, 0.16);
}

.webcraft-chart__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    color: #111936;
    font-size: 16px;
    font-weight: 700;
}

.webcraft-chart__top b {
    color: #53beb6;
    font-size: 15px;
}

.webcraft-chart svg {
    width: 100%;
    height: 116px;
}

.webcraft-browser {
    right: -12px;
    top: 210px;
    z-index: 2;
    width: 430px;
    min-height: 420px;
    overflow: hidden;
    border: 16px solid rgba(175, 166, 252, 0.56);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 30px 58px rgba(77, 78, 185, 0.18);
    transform: rotate(-4deg);
}

.webcraft-browser__bar {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(217, 222, 250, 0.82);
    background: rgba(255, 255, 255, 0.9);
}

.webcraft-browser__bar span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.webcraft-browser__bar span:nth-child(1) {
    background: #ff686f;
}

.webcraft-browser__bar span:nth-child(2) {
    background: #ffca50;
}

.webcraft-browser__bar span:nth-child(3) {
    background: #55c5b9;
}

.webcraft-browser__bar i {
    width: 26px;
    height: 9px;
    margin-left: auto;
    border-radius: 999px;
    background: #e3defb;
}

.webcraft-browser__bar i + i {
    width: 34px;
    margin-left: 4px;
}

.webcraft-browser__body {
    display: grid;
    grid-template-columns: 198px minmax(0, 1fr);
    gap: 24px;
    padding: 28px 20px 24px;
}

.webcraft-browser__image {
    position: relative;
    height: 164px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(135deg, #b9c8ff 0%, #6078ff 55%, #392ffa 100%);
}

.webcraft-browser__image::before,
.webcraft-browser__image::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 120px;
    height: 112px;
    background: linear-gradient(135deg, #7791ff, #3944ff);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.webcraft-browser__image::before {
    left: 25px;
}

.webcraft-browser__image::after {
    right: -14px;
    height: 86px;
}

.webcraft-browser__image span {
    position: absolute;
    right: 32px;
    top: 30px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #ffffff;
}

.webcraft-browser__lines {
    padding-top: 9px;
}

.webcraft-browser__lines b,
.webcraft-browser__lines span,
.webcraft-browser__lines em {
    display: block;
    height: 12px;
    border-radius: 999px;
    background: #d8d1fb;
}

.webcraft-browser__lines b {
    width: 132px;
    height: 15px;
    margin-bottom: 17px;
}

.webcraft-browser__lines span {
    width: 126px;
    margin-bottom: 13px;
    opacity: 0.78;
}

.webcraft-browser__lines span:nth-child(4) {
    width: 72px;
}

.webcraft-browser__lines em {
    width: 76px;
    height: 34px;
    margin-top: 25px;
    background: linear-gradient(135deg, #2a70ff, #4530ff);
}

.webcraft-browser__tiles {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 2px;
}

.webcraft-browser__tiles > span {
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #8b8fed;
    background: #f2f1fb;
}

.webcraft-browser__tiles svg {
    width: 42px;
    height: 42px;
}

.webcraft-browser__tiles i {
    display: block;
    width: 42px;
    height: 8px;
    margin: 6px 0;
    border-radius: 999px;
    background: #c9c5f6;
}

.webcraft-browser__tiles i:nth-child(2) {
    width: 58px;
}

.webcraft-speed {
    right: 160px;
    top: 662px;
    z-index: 3;
    width: 248px;
    min-height: 126px;
    padding: 20px 22px;
    border: 1px solid rgba(218, 224, 248, 0.92);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 26px 48px rgba(42, 57, 126, 0.14);
}

.webcraft-speed > span {
    display: block;
    margin-bottom: 11px;
    color: #111936;
    font-size: 14px;
    font-weight: 700;
}

.webcraft-speed__content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.webcraft-speed__gauge {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, #ffffff 0 57%, transparent 58%),
        conic-gradient(from -34deg, #55c8af 0 87%, #e4e8fb 87% 100%);
    box-shadow: 0 10px 24px rgba(63, 193, 173, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.webcraft-speed__gauge b {
    margin-top: 7px;
    color: #0b1230;
    font-size: 26px;
    line-height: 0.85;
}

.webcraft-speed__gauge small {
    margin-top: -14px;
    color: #5b6583;
    font-size: 10px;
}

.webcraft-speed__lines i {
    display: block;
    width: 66px;
    height: 9px;
    margin: 8px 0;
    border-radius: 999px;
    background: #dedcf9;
}

.webcraft-speed__lines i:nth-child(2) {
    width: 78px;
}

.webcraft-triangle {
    right: 376px;
    top: 642px;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 42px solid rgba(104, 109, 255, 0.42);
    transform: rotate(14deg);
}

@media (max-width: 1500px) {
    .webcraft-hero__title {
        font-size: clamp(3.2rem, 5.2vw, 4.9rem);
    }

    .webcraft-code {
        left: 46px;
        transform: scale(0.88);
        transform-origin: top left;
    }

    .webcraft-chart {
        left: 92px;
        top: 420px;
        transform: scale(0.88);
        transform-origin: top left;
    }

    .webcraft-floating-icon--code {
        left: 18px;
        top: 470px;
        transform: scale(0.88) rotate(-8deg);
    }

    .webcraft-floating-icon--globe {
        right: 182px;
        transform: scale(0.86) rotate(7deg);
    }

    .webcraft-browser {
        right: -116px;
        transform: scale(0.86) rotate(-4deg);
        transform-origin: top right;
    }

    .webcraft-speed {
        right: 82px;
        top: 620px;
        transform: scale(0.9);
        transform-origin: top right;
    }

    .webcraft-triangle {
        right: 292px;
        top: 620px;
    }
}

@media (max-width: 1350px) {
    .webcraft-code,
    .webcraft-chart,
    .webcraft-browser,
    .webcraft-speed,
    .webcraft-floating-icon,
    .webcraft-triangle {
        display: none;
    }

    .webcraft-hero {
        min-height: calc(100vh - 104px);
        padding-top: clamp(88px, 11vh, 130px);
    }

    .webcraft-hero__rings--right {
        right: -150px;
        opacity: 0.6;
    }

    .webcraft-hero__dots--right {
        right: 24px;
        top: 38px;
    }
}

@media (max-width: 960px) {
    .webcraft-hero {
        min-height: calc(100vh - 92px);
        padding: 82px 0 62px;
    }

    .webcraft-hero__inner {
        width: min(100% - 2rem, 760px);
    }

    .webcraft-hero__title {
        font-size: clamp(2.75rem, 8vw, 4.15rem);
    }

    .webcraft-hero__lead {
        max-width: 640px;
        font-size: 1.08rem;
    }

    .webcraft-hero__lead br {
        display: none;
    }

    .webcraft-hero__actions {
        gap: 18px;
        margin-top: 32px;
    }

    .webcraft-button {
        min-width: 260px;
        min-height: 68px;
        font-size: 1.05rem;
    }

    .webcraft-features {
        max-width: 690px;
        gap: 14px;
    }

    .webcraft-feature {
        min-height: 72px;
        gap: 12px;
        padding: 0 14px;
        font-size: 0.92rem;
    }

    .webcraft-feature svg {
        width: 36px;
        height: 36px;
    }

    .webcraft-hero__rings--left {
        left: -140px;
        bottom: -160px;
    }

    .webcraft-hero__dots--left {
        left: 28px;
        bottom: 108px;
    }
}

@media (max-width: 720px) {
    .webcraft-hero {
        padding-top: 62px;
    }

    .webcraft-hero__actions,
    .webcraft-features {
        grid-template-columns: 1fr;
        width: min(100%, 420px);
    }

    .webcraft-hero__actions {
        display: grid;
    }

    .webcraft-button {
        width: 100%;
        min-width: 0;
    }

    .webcraft-features {
        margin-top: 22px;
    }

    .webcraft-feature {
        justify-content: flex-start;
    }

    .webcraft-hero__down {
        bottom: 25px;
    }
}

@media (max-width: 560px) {
    .webcraft-hero {
        min-height: calc(100vh - 86px);
        padding: 48px 0 54px;
    }

    .webcraft-hero__title {
        font-size: clamp(2.25rem, 11vw, 3rem);
    }

    .webcraft-hero__lead {
        margin-top: 18px;
        font-size: 1rem;
        line-height: 1.55;
    }

    .webcraft-hero__actions {
        margin-top: 26px;
    }

    .webcraft-button {
        min-height: 62px;
        border-radius: 12px;
    }

    .webcraft-hero__dots--right,
    .webcraft-hero__dots--left,
    .webcraft-hero__curve--top {
        display: none;
    }
}

.webmason-solutions {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 24px 0 38px;
    color: #081031;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.webmason-solutions::before,
.webmason-solutions::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.webmason-solutions::before {
    display: none;
}

.webmason-solutions::after {
    right: -190px;
    top: -120px;
    width: 640px;
    height: 640px;
    border: 2px solid rgba(126, 130, 255, 0.18);
    border-radius: 50%;
}

.webmason-solutions__rings,
.webmason-solutions__dots,
.webmason-solutions__triangle {
    position: absolute;
    pointer-events: none;
}

.webmason-solutions__rings {
    border: 2px solid rgba(128, 132, 255, 0.18);
    border-radius: 50%;
}

.webmason-solutions__rings::before,
.webmason-solutions__rings::after {
    content: "";
    position: absolute;
    border: inherit;
    border-radius: inherit;
}

.webmason-solutions__rings--left {
    left: 64px;
    bottom: -132px;
    width: 292px;
    height: 292px;
}

.webmason-solutions__rings--left::before {
    inset: 24px;
}

.webmason-solutions__rings--left::after {
    inset: 48px;
}

.webmason-solutions__rings--right {
    right: -132px;
    top: -108px;
    width: 678px;
    height: 678px;
    border-color: rgba(126, 130, 255, 0.14);
}

.webmason-solutions__rings--right::before {
    inset: 74px;
}

.webmason-solutions__rings--right::after {
    inset: 146px;
}

.webmason-solutions__dots {
    width: 214px;
    height: 94px;
    background-image: radial-gradient(circle, rgba(84, 88, 255, 0.26) 2.4px, transparent 3px);
    background-size: 22px 22px;
}

.webmason-solutions__dots--left {
    left: 40px;
    top: 124px;
}

.webmason-solutions__dots--right-top {
    right: 20px;
    top: 164px;
    width: 132px;
    height: 94px;
}

.webmason-solutions__dots--right-bottom {
    right: 20px;
    bottom: 42px;
    width: 98px;
    height: 74px;
}

.webmason-solutions__triangle {
    right: 148px;
    top: 230px;
    width: 0;
    height: 0;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 42px solid rgba(104, 109, 255, 0.28);
    transform: rotate(3deg);
}

.webmason-solutions__inner {
    position: relative;
    z-index: 2;
    width: min(100% - 2rem, 1530px);
}

.webmason-solutions__head {
    text-align: center;
}

.webmason-solutions__head h2 {
    margin: 0;
    color: #071033;
    font-size: clamp(3rem, 4.3vw, 5.25rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: 0;
    text-shadow: 0 9px 24px rgba(16, 25, 68, 0.08);
}

.webmason-solutions__head h2 span {
    color: #3156ff;
    background: linear-gradient(180deg, #315dff 0%, #4b36f4 78%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.webmason-solutions__head p {
    margin: 16px auto 0;
    color: #314063;
    font-size: clamp(1.06rem, 1.18vw, 1.3rem);
    font-weight: 500;
    line-height: 1.55;
}

.webmason-solutions__layout {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 48px;
    align-items: stretch;
    margin-top: 34px;
}

.content-body {
    width: min(100%, 860px);
    color: #1d2433;
    font-size: 1.05rem;
    line-height: 1.75;
}

.content-body h2,
.content-body h3,
.content-body h4 {
    margin: 2rem 0 0.8rem;
    line-height: 1.2;
}

.content-body a {
    color: #1f5eff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.content-body img {
    margin: 1.4rem 0;
    border-radius: 8px;
}

.content-blocks {
    display: grid;
    gap: 1rem;
    width: min(100%, 860px);
    margin-top: 2rem;
}

.content-block {
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.webmason-benefits,
.webmason-solution-card,
.webmason-deliverable {
    border: 1px solid rgba(214, 220, 246, 0.86);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 52px rgba(56, 67, 132, 0.1);
    backdrop-filter: blur(12px);
}

.webmason-benefits {
    min-height: 470px;
    padding: 30px 32px;
    border-radius: 25px;
}

.webmason-benefits h3 {
    margin: 0 0 25px;
    color: #111936;
    font-size: 1.28rem;
    font-weight: 800;
}

.webmason-benefits__list {
    display: grid;
    gap: 18px;
}

.webmason-benefit {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    color: #101633;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

.webmason-benefit__icon,
.webmason-solution-card__icon,
.webmason-deliverable span {
    display: grid;
    place-items: center;
    color: #3156ff;
    background: linear-gradient(145deg, rgba(236, 239, 255, 0.95), rgba(225, 228, 255, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 15px 28px rgba(55, 68, 180, 0.08);
}

.webmason-benefit__icon {
    width: 78px;
    height: 78px;
    border-radius: 12px;
}

.webmason-benefit__icon svg {
    width: 47px;
    height: 47px;
}

.webmason-solution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.webmason-solution-card {
    min-height: 276px;
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding: 30px 36px 28px 30px;
    border-radius: 23px;
}

.webmason-solution-card__icon {
    width: 138px;
    height: 138px;
    border-radius: 28px;
}

.webmason-solution-card__icon svg {
    width: 78px;
    height: 78px;
    filter: drop-shadow(0 9px 12px rgba(48, 78, 255, 0.2));
}

.webmason-solution-card h3 {
    margin: 3px 0 11px;
    color: #091232;
    font-size: clamp(1.38rem, 1.45vw, 1.72rem);
    font-weight: 800;
    line-height: 1.16;
}

.webmason-solution-card p {
    margin: 0 0 13px;
    color: #26365d;
    font-size: clamp(1rem, 1.02vw, 1.14rem);
    font-weight: 500;
    line-height: 1.48;
}

.webmason-solution-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #1f2d54;
    font-size: clamp(0.98rem, 1vw, 1.1rem);
    font-weight: 500;
}

.webmason-solution-card li {
    position: relative;
    padding-left: 32px;
}

.webmason-solution-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    color: #3156ff;
    font-weight: 800;
}

.webmason-deliverables {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    width: min(100%, 1110px);
    margin: 24px auto 0;
}

.webmason-deliverable {
    min-height: 86px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 14px 22px;
    border-radius: 13px;
}

.webmason-deliverable span {
    width: 54px;
    height: 54px;
    border-radius: 10px;
}

.webmason-deliverable svg {
    width: 36px;
    height: 36px;
}

.webmason-deliverable b {
    color: #16203d;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 1350px) {
    .webmason-solutions {
        padding-top: 64px;
    }

    .webmason-solutions__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .webmason-benefits {
        min-height: 0;
        padding: 28px;
    }

    .webmason-benefits__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .webmason-benefit {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 14px;
        font-size: 0.96rem;
    }

    .webmason-benefit__icon {
        width: 60px;
        height: 60px;
    }

    .webmason-benefit__icon svg {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 1080px) {
    .webmason-solutions__head p br {
        display: none;
    }

    .webmason-solution-card {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 24px;
        padding: 24px;
    }

    .webmason-solution-card__icon {
        width: 112px;
        height: 112px;
        border-radius: 22px;
    }

    .webmason-solution-card__icon svg {
        width: 68px;
        height: 68px;
    }

    .webmason-deliverables {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}

@media (max-width: 860px) {
    .webmason-solutions {
        padding: 54px 0 38px;
    }

    .webmason-solutions__head h2 {
        font-size: clamp(2.45rem, 8vw, 3.8rem);
    }

    .webmason-solutions__layout {
        margin-top: 26px;
    }

    .webmason-benefits__list,
    .webmason-solution-grid {
        grid-template-columns: 1fr;
    }

    .webmason-benefits {
        border-radius: 20px;
    }

    .webmason-benefit {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .webmason-benefit__icon {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 620px) {
    .webmason-solutions__inner {
        width: min(100% - 1.2rem, 1530px);
    }

    .webmason-solutions__head h2 {
        font-size: clamp(2.15rem, 10vw, 2.85rem);
    }

    .webmason-solutions__head p {
        font-size: 1rem;
    }

    .webmason-solution-card {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .webmason-solution-card__icon {
        width: 94px;
        height: 94px;
        border-radius: 18px;
    }

    .webmason-solution-card__icon svg {
        width: 58px;
        height: 58px;
    }

    .webmason-solution-card p br {
        display: none;
    }

    .webmason-deliverables {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .webmason-solutions__dots--left,
    .webmason-solutions__dots--right-top,
    .webmason-solutions__dots--right-bottom,
    .webmason-solutions__triangle {
        display: none;
    }
}

.hero {
    padding: 4rem 0 3.2rem;
    background: var(--bg);
    border-bottom: 1px solid rgba(20, 22, 28, 0.06);
}

.hero--home {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 3.4rem 0 4.4rem;
}

.lobby-hero {
    min-height: calc(100vh - 72px);
    justify-content: center;
}

.lobby-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1rem;
    align-items: stretch;
}

.lobby-hero__content,
.lobby-disclaimer {
    border: 1px solid rgba(20, 22, 28, 0.07);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow);
}

.lobby-hero__content {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

.lobby-disclaimer {
    align-self: end;
    padding: 1.4rem;
}

.lobby-disclaimer__label {
    display: inline-flex;
    margin-bottom: 0.9rem;
    color: #12906c;
    font-size: 0.86rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lobby-disclaimer p {
    margin: 0;
    color: var(--muted);
}

.lobby-disclaimer a {
    display: inline-flex;
    margin-top: 1rem;
    color: #111217;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.hero--compact {
    padding-bottom: 2.4rem;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(330px, 0.55fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.hero__content {
    min-width: 0;
    padding: 2.5rem;
    border: 1px solid rgba(20, 22, 28, 0.07);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow);
}

.hero__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero__eyebrow,
.section__eyebrow {
    margin: 0 0 1rem;
    color: #525763;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero__eyebrow {
    margin: 0;
    font-size: 0.72rem;
}

.hero__availability {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 32px;
    padding: 0.35rem 0.72rem;
    border: 1px solid rgba(35, 178, 132, 0.18);
    border-radius: 999px;
    color: #59606a;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}

.hero__availability::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mint);
    box-shadow: 0 0 0 4px rgba(53, 199, 154, 0.13);
}

.hero__title,
.section__title {
    margin: 0;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: 0;
}

.hero__title {
    max-width: 760px;
    font-size: 4rem;
}

.section__title {
    max-width: 780px;
    font-size: 2.75rem;
}

.hero__text,
.section__lead,
.footer-text,
.card p,
.solution p,
.contact-card span,
.timeline__item p,
.stat span {
    color: var(--muted);
}

.hero__text,
.section__lead {
    max-width: 66ch;
    margin: 1.25rem 0 0;
    font-size: 1.06rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.82rem 1.24rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 800;
    background: #050507;
    box-shadow: 0 18px 42px rgba(9, 10, 14, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(9, 10, 14, 0.22);
}

.button--secondary {
    color: var(--text);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: none;
}

.button--secondary:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 2rem 0 0;
}

.hero__stats {
    display: grid;
    grid-template-columns: 1.1fr 0.95fr 0.95fr;
    gap: 1rem;
    margin-top: 1rem;
}

.hero__stat {
    min-height: 170px;
    padding: 1.65rem 1.75rem;
    border: 1px solid rgba(20, 22, 28, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.hero__stat strong {
    display: block;
    margin-bottom: 0.65rem;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0;
}

.hero__stat span,
.hero__stat small {
    display: block;
}

.hero__stat span {
    color: var(--text);
    font-weight: 800;
}

.hero__stat small {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.98rem;
}

.hero__stat--warm {
    background: var(--cream);
}

.hero__stat--blue {
    background: var(--blue);
}

.hero__stat--green {
    background: #edf9f2;
}

.hero__facts div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.hero__facts dt {
    margin: 0 0 0.2rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.hero__facts dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.hero__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(20, 22, 28, 0.06);
    border-radius: var(--radius-lg);
    background: #fbf6f4;
    box-shadow: var(--shadow);
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__visual-strip {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.hero__visual-strip span {
    min-width: 0;
    padding: 0.65rem 0.5rem;
    border: 1px solid rgba(20, 22, 28, 0.08);
    border-radius: 999px;
    color: #17191f;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
}

.hero__card,
.card,
.solution,
.contact-card,
.error-page__box {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hero__card {
    padding: 1.6rem;
    align-self: stretch;
}

.hero__badge {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    color: #080808;
    font-size: 0.82rem;
    font-weight: 800;
    background: #bdf3d9;
}

.hero__card h2,
.card h3,
.solution h3,
.contact-card h3,
.timeline__item h3,
.footer-title {
    margin: 0 0 0.75rem;
    font-weight: 800;
}

.feature-list {
    margin: 0;
    padding-left: 1.15rem;
}

.feature-list li + li {
    margin-top: 0.7rem;
}

.section {
    padding: 4.4rem 0;
    background: var(--bg);
}

.section--accent,
.section--soft {
    background: #eef5f2;
}

.section--cta {
    padding-top: 0;
}

.section__head {
    max-width: 78ch;
    margin-bottom: 1.6rem;
}

.cards,
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.card,
.contact-card {
    padding: 1.45rem;
}

.card__index {
    display: inline-flex;
    margin-bottom: 1.1rem;
    color: #12906c;
    font-size: 0.9rem;
    font-weight: 800;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.solution {
    min-height: 190px;
    padding: 1.35rem;
}

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

.stat {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stat strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: 800;
}

.timeline {
    display: grid;
    gap: 0.85rem;
}

.timeline__item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.timeline__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border-radius: var(--radius-sm);
    color: #080808;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff, #c4f4dd 55%, #ffe1c8);
}

.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(220, 244, 236, 0.95));
    box-shadow: var(--shadow);
}

.contact-card p {
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.webmason-contact-hero {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 126px);
    padding: clamp(86px, 9vh, 138px) 0 92px;
    overflow: hidden;
    color: #081031;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.webmason-contact-hero::after {
    content: "";
    position: absolute;
    right: -140px;
    top: 190px;
    z-index: -1;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 82, 255, 0.13), transparent 58%);
    pointer-events: none;
}

.webmason-contact-hero__inner {
    position: relative;
    z-index: 4;
    width: min(100% - 2rem, 1050px);
}

.webmason-contact-hero__eyebrow {
    margin: 0 0 18px;
    color: #3156ff;
    font-size: clamp(0.9rem, 1vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.webmason-contact-code {
    left: 94px;
    top: 132px;
}

.webmason-contact-browser {
    right: -12px;
    top: 224px;
}

.webmason-contact-speed {
    right: 160px;
    top: 662px;
}

.webmason-contact-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    min-width: 292px;
    min-height: 112px;
    padding: 22px 24px;
    border: 1px solid rgba(218, 224, 248, 0.9);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 26px 48px rgba(42, 57, 126, 0.14);
}

.webmason-contact-card span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 13px;
    color: #3156ff;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

.webmason-contact-card svg {
    width: 40px;
    height: 40px;
}

.webmason-contact-card b,
.webmason-contact-card em {
    display: block;
    color: #16284f;
    line-height: 1.2;
}

.webmason-contact-card b {
    font-size: 1.02rem;
    font-weight: 800;
}

.webmason-contact-card em {
    margin-top: 8px;
    font-size: 0.98rem;
    font-style: normal;
    font-weight: 600;
}

.webmason-contact-card--mail {
    left: 154px;
    top: 454px;
    z-index: 3;
}

.webmason-contact-card--phone {
    right: 86px;
    top: 116px;
    z-index: 3;
}

.webmason-contact-features .webcraft-feature {
    color: #101633;
}

.webmason-contact-features .webcraft-feature:nth-child(2) svg {
    color: #55c3be;
}

.webmason-contact-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(78px, 8vw, 132px) 0;
    color: #081031;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8faff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.04) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.webmason-contact-section__inner {
    position: relative;
    z-index: 2;
}

.webmason-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
    gap: 34px;
    align-items: stretch;
    margin-top: 58px;
}

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

.webmason-contact-tile {
    min-height: 276px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px 30px;
    border: 1px solid rgba(214, 220, 246, 0.9);
    border-radius: 24px;
    color: #101633;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 52px rgba(56, 67, 132, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.webmason-contact-tile:hover {
    border-color: rgba(49, 86, 255, 0.34);
    transform: translateY(-4px);
    box-shadow: 0 30px 62px rgba(56, 67, 132, 0.15);
}

.webmason-contact-tile__icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin-bottom: auto;
    border-radius: 17px;
    color: #3156ff;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 32px rgba(51, 68, 170, 0.1);
}

.webmason-contact-tile__icon svg {
    width: 48px;
    height: 48px;
}

.webmason-contact-tile b {
    display: block;
    margin-top: 38px;
    color: #071033;
    font-size: clamp(1.1rem, 1.2vw, 1.28rem);
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.webmason-contact-tile em {
    display: block;
    margin-top: 12px;
    color: #3a496b;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
}

.webmason-contact-steps {
    position: relative;
    overflow: hidden;
    padding: 38px 34px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 26px 58px rgba(56, 67, 132, 0.12);
}

.webmason-contact-steps::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 34px;
    width: 106px;
    height: 70px;
    background-image: radial-gradient(circle, rgba(84, 88, 255, 0.22) 2.4px, transparent 3px);
    background-size: 22px 22px;
    pointer-events: none;
}

.webmason-contact-steps h3 {
    max-width: 260px;
    margin: 0 0 32px;
    color: #071033;
    font-size: clamp(1.55rem, 1.8vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}

.webmason-contact-steps div {
    display: grid;
    gap: 18px;
}

.webmason-contact-steps article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
}

.webmason-contact-steps span {
    display: grid;
    place-items: center;
    min-height: 58px;
    border-radius: 13px;
    color: #3156ff;
    font-weight: 800;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

.webmason-contact-steps p {
    margin: 0;
    color: #3a496b;
    font-size: 1rem;
    line-height: 1.55;
}

@media (max-width: 1500px) {
    .webmason-contact-code {
        left: 46px;
        transform: scale(0.88);
        transform-origin: top left;
    }

    .webmason-contact-card--mail {
        left: 112px;
        top: 430px;
        transform: scale(0.9);
        transform-origin: top left;
    }

    .webmason-contact-card--phone {
        right: 42px;
        transform: scale(0.9);
        transform-origin: top right;
    }

    .webmason-contact-browser {
        right: -74px;
        transform: rotate(-4deg) scale(0.88);
        transform-origin: top right;
    }

    .webmason-contact-speed {
        right: 86px;
        top: 620px;
        transform: scale(0.9);
        transform-origin: top right;
    }
}

@media (max-width: 1180px) {
    .webmason-contact-hero {
        min-height: auto;
        padding: 76px 0 72px;
    }

    .webmason-contact-code,
    .webmason-contact-browser,
    .webmason-contact-speed,
    .webmason-contact-card,
    .webmason-contact-hero .webcraft-floating-icon,
    .webmason-contact-hero .webcraft-triangle {
        display: none;
    }

    .webmason-contact-hero__inner {
        width: min(100% - 2rem, 920px);
    }

    .webmason-contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .webmason-contact-grid {
        grid-template-columns: 1fr;
    }

    .webmason-contact-tile {
        min-height: 220px;
    }
}

@media (max-width: 780px) {
    .webmason-contact-hero {
        padding: 56px 0 58px;
    }

    .webmason-contact-hero__eyebrow {
        margin-bottom: 14px;
        font-size: 0.82rem;
    }

    .webmason-contact-layout {
        gap: 24px;
        margin-top: 34px;
    }

    .webmason-contact-section {
        padding: 58px 0;
    }

    .webmason-contact-tile {
        min-height: 0;
        padding: 28px 24px;
        border-radius: 20px;
    }

    .webmason-contact-tile b {
        margin-top: 28px;
    }

    .webmason-contact-steps {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .webmason-contact-steps::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .webmason-contact-hero .webcraft-hero__title {
        font-size: clamp(2.45rem, 13vw, 3.1rem);
    }

    .webmason-contact-hero .webcraft-hero__lead br {
        display: none;
    }

    .webmason-contact-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .webmason-contact-steps article {
        grid-template-columns: 1fr;
    }
}

.webmason-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(82px, 9vh, 132px) 0 clamp(74px, 8vh, 112px);
    color: #081031;
    text-align: center;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.webmason-page-hero::after,
.webmason-works::after,
.webmason-prices::after,
.webmason-process::after,
.webmason-price-details::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(91, 82, 255, 0.12), transparent 58%);
    pointer-events: none;
}

.webmason-page-hero::after {
    right: -180px;
    top: 112px;
}

.webmason-page-hero__inner {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    width: min(100% - 2rem, 1050px);
}

.webmason-works,
.webmason-process,
.webmason-prices,
.webmason-price-details,
.webmason-faq,
.webmason-seo-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #081031;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8faff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.webmason-works,
.webmason-process,
.webmason-prices,
.webmason-price-details,
.webmason-faq {
    padding: clamp(78px, 8vw, 132px) 0;
}

.webmason-works::after {
    left: -220px;
    bottom: -240px;
}

.webmason-prices::after,
.webmason-price-details::after {
    right: -210px;
    top: 140px;
}

.webmason-process::after {
    left: -220px;
    top: 160px;
}

.webmason-works__inner,
.webmason-process__inner,
.webmason-prices__inner,
.webmason-price-details__inner,
.webmason-faq__inner {
    position: relative;
    z-index: 2;
    width: min(100% - 2rem, 1530px);
}

.webmason-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 58px;
}

.webmason-work-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.webmason-work-card,
.webmason-process-step,
.webmason-price-card,
.webmason-price-factor-grid article,
.webmason-faq-list article,
.webmason-seo-section__inner {
    border: 1px solid rgba(214, 220, 246, 0.86);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 52px rgba(56, 67, 132, 0.1);
    backdrop-filter: blur(12px);
}

.webmason-work-card {
    overflow: hidden;
    border-radius: 28px;
}

.webmason-work-card__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: clamp(14px, 1.6vw, 22px);
    background:
        radial-gradient(circle at 18% 12%, rgba(49, 86, 255, 0.13), transparent 34%),
        linear-gradient(135deg, #f7f9ff 0%, #eef3ff 100%);
}

.webmason-work-card__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(31, 45, 98, 0.16);
    transition: transform 0.28s ease;
}

.webmason-work-card:hover .webmason-work-card__visual img {
    transform: scale(1.018);
}

.webmason-work-card__body {
    padding: 32px;
}

.webmason-work-card__tag,
.webmason-price-card__label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    color: #3156ff;
    font-size: 0.92rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

.webmason-work-card h3,
.webmason-process-step h3,
.webmason-price-card h3,
.webmason-price-factor-grid h3,
.webmason-faq-list h3,
.webmason-seo-section h2 {
    margin: 18px 0 12px;
    color: #071033;
    font-weight: 800;
    line-height: 1.2;
}

.webmason-work-card h3 {
    font-size: clamp(1.45rem, 1.7vw, 2rem);
}

.webmason-work-card p,
.webmason-process-step p,
.webmason-price-card p,
.webmason-price-factor-grid p,
.webmason-faq-list p,
.webmason-seo-section p {
    margin: 0;
    color: #3a496b;
    font-size: 1.02rem;
    line-height: 1.6;
}

.webmason-work-card__metrics,
.webmason-work-card__services {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.webmason-work-card__metrics span,
.webmason-work-card__services span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    color: #10204b;
    font-size: 0.9rem;
    font-weight: 800;
    background: rgba(85, 195, 190, 0.14);
}

.webmason-work-card__services span {
    color: #3156ff;
    background: rgba(49, 86, 255, 0.09);
}

.webmason-work-card strong {
    display: block;
    margin-top: 24px;
    color: #10204b;
    font-weight: 700;
    line-height: 1.5;
}

.webmason-work-card__link {
    display: inline-flex;
    align-items: center;
    margin-top: 26px;
    color: #3156ff;
    font-weight: 800;
}

.webmason-work-card__link::after {
    content: "→";
    margin-left: 10px;
}

.webmason-section-action {
    display: flex;
    justify-content: center;
    margin-top: 46px;
}

.webmason-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 58px;
}

.webmason-process-step {
    min-height: 280px;
    padding: 32px 28px;
    border-radius: 24px;
}

.webmason-process-step span,
.webmason-price-factor-grid span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    color: #3156ff;
    font-weight: 800;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

.webmason-process-step h3,
.webmason-price-factor-grid h3 {
    font-size: 1.36rem;
}

.webmason-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 58px;
}

.webmason-price-card {
    position: relative;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    border-radius: 28px;
}

.webmason-price-card--featured {
    border-color: rgba(49, 86, 255, 0.38);
    box-shadow: 0 30px 66px rgba(49, 86, 255, 0.15);
}

.webmason-price-card h3 {
    font-size: clamp(1.7rem, 2vw, 2.35rem);
}

.webmason-price-card strong {
    display: block;
    margin: 6px 0 16px;
    color: #3156ff;
    font-size: clamp(2rem, 2.5vw, 2.85rem);
    font-weight: 800;
    line-height: 1;
}

.webmason-price-card em {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    width: fit-content;
    margin-top: 22px;
    padding: 0 14px;
    border-radius: 10px;
    color: #10204b;
    font-style: normal;
    font-weight: 800;
    background: rgba(85, 195, 190, 0.14);
}

.webmason-price-card ul {
    display: grid;
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: #1f2d54;
    font-weight: 600;
}

.webmason-price-card li {
    position: relative;
    padding-left: 30px;
}

.webmason-price-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    color: #3156ff;
    font-weight: 800;
}

.webmason-price-card > a {
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    border-radius: 13px;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1f70ff 0%, #263cff 62%, #4a2cff 100%);
    box-shadow: 0 18px 38px rgba(47, 76, 255, 0.24);
}

.webmason-price-factor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 58px;
}

.webmason-price-factor-grid article {
    min-height: 250px;
    padding: 30px 28px;
    border-radius: 24px;
}

.webmason-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 58px;
}

.webmason-faq-list article {
    padding: 30px 32px;
    border-radius: 24px;
}

.webmason-faq-list h3 {
    margin-top: 0;
    font-size: 1.28rem;
}

.webmason-seo-section {
    padding: 0 0 clamp(78px, 8vw, 132px);
}

.webmason-seo-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px;
    align-items: center;
    width: min(100% - 2rem, 1530px);
    padding: 42px 48px;
    border-radius: 28px;
}

.webmason-seo-section h2 {
    margin-top: 0;
    font-size: clamp(1.8rem, 2.4vw, 2.85rem);
}

.webmason-case-page {
    background: #ffffff;
}

.webmason-case-hero .webcraft-hero__title {
    max-width: 1120px;
    font-size: clamp(2.9rem, 4.4vw, 5.3rem);
}

.webmason-case-detail {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(78px, 8vw, 132px) 0;
    color: #081031;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8faff 100%),
        linear-gradient(90deg, rgba(75, 91, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75, 91, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.webmason-case-detail__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
    gap: 34px;
    align-items: start;
    width: min(100% - 2rem, 1530px);
}

.webmason-case-media,
.webmason-case-summary,
.webmason-case-content section,
.webmason-case-panel,
.webmason-case-stages article {
    border: 1px solid rgba(214, 220, 246, 0.86);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 52px rgba(56, 67, 132, 0.1);
    backdrop-filter: blur(12px);
}

.webmason-case-media {
    grid-column: 1 / -1;
    margin: 0;
    overflow: hidden;
    border-radius: 34px;
}

.webmason-case-media img {
    width: 100%;
    max-height: 760px;
    object-fit: cover;
}

.webmason-case-summary {
    position: sticky;
    top: 126px;
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: 24px;
}

.webmason-case-summary div {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(207, 214, 244, 0.78);
}

.webmason-case-summary div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.webmason-case-summary span {
    display: block;
    color: #3156ff;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
}

.webmason-case-summary b {
    display: block;
    margin-top: 8px;
    color: #071033;
    font-size: 1.08rem;
    line-height: 1.4;
}

.webmason-case-content {
    display: grid;
    gap: 24px;
}

.webmason-case-content section,
.webmason-case-panel {
    padding: 34px;
    border-radius: 24px;
}

.webmason-case-content h2,
.webmason-case-panel h2 {
    margin: 0 0 16px;
    color: #071033;
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
}

.webmason-case-content p,
.webmason-case-panel li,
.webmason-case-stages p {
    margin: 0;
    color: #3a496b;
    font-size: 1.04rem;
    line-height: 1.68;
}

.webmason-case-metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.webmason-case-metrics span {
    min-height: 104px;
    display: grid;
    place-items: center;
    padding: 20px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 20px;
    color: #3156ff;
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 800;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 42px rgba(56, 67, 132, 0.09);
}

.webmason-case-columns {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.webmason-case-panel ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.webmason-case-panel li {
    position: relative;
    padding-left: 30px;
}

.webmason-case-panel li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #3156ff;
    font-weight: 800;
}

.webmason-case-stages {
    grid-column: 1 / -1;
    margin-top: 24px;
}

.webmason-case-stages > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.webmason-case-stages article {
    min-height: 250px;
    padding: 30px;
    border-radius: 24px;
}

.webmason-case-stages article span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    color: #3156ff;
    font-weight: 800;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

.webmason-case-stages h3 {
    margin: 24px 0 12px;
    color: #071033;
    font-size: 1.35rem;
    font-weight: 800;
}

.webmason-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.webmason-case-tags span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 10px;
    color: #3156ff;
    font-size: 0.92rem;
    font-weight: 800;
    background: rgba(49, 86, 255, 0.09);
}

.webmason-works--related {
    padding-top: 0;
}

@media (max-width: 1180px) {
    .webmason-work-grid,
    .webmason-work-grid--wide,
    .webmason-price-grid,
    .webmason-process-grid,
    .webmason-price-factor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .webmason-price-card {
        min-height: 560px;
    }

    .webmason-seo-section__inner {
        grid-template-columns: 1fr;
    }

    .webmason-case-detail__inner,
    .webmason-case-columns,
    .webmason-case-stages > div {
        grid-template-columns: 1fr;
    }

    .webmason-case-summary {
        position: static;
    }
}

@media (max-width: 760px) {
    .webmason-page-hero {
        padding: 58px 0 64px;
    }

    .webmason-page-hero .webcraft-hero__lead br,
    .webmason-works .webmason-solutions__head p br,
    .webmason-process .webmason-solutions__head p br,
    .webmason-prices .webmason-solutions__head p br {
        display: none;
    }

    .webmason-work-grid,
    .webmason-work-grid--wide,
    .webmason-price-grid,
    .webmason-process-grid,
    .webmason-price-factor-grid,
    .webmason-faq-list {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 34px;
    }

    .webmason-work-card__body,
    .webmason-price-card,
    .webmason-process-step,
    .webmason-price-factor-grid article,
    .webmason-faq-list article {
        padding: 26px 22px;
        border-radius: 20px;
    }

    .webmason-price-card {
        min-height: 0;
    }

    .webmason-price-card > a {
        margin-top: 32px;
    }

    .webmason-seo-section__inner {
        padding: 30px 22px;
        border-radius: 22px;
    }

    .webmason-case-detail__inner {
        width: min(100% - 1.2rem, 1530px);
    }

    .webmason-case-media {
        border-radius: 22px;
    }

    .webmason-case-content section,
    .webmason-case-panel,
    .webmason-case-summary,
    .webmason-case-stages article {
        padding: 26px 22px;
        border-radius: 20px;
    }

    .webmason-case-metrics {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.site-footer {
    margin-top: auto;
    padding: 42px 0 48px;
    color: #0b1230;
    background: #ffffff;
}

.footer-panel {
    position: relative;
    isolation: isolate;
    width: min(100% - 5rem, 1720px);
    max-width: none;
    overflow: hidden;
    padding: 132px 108px 34px;
    border: 1px solid rgba(199, 207, 246, 0.72);
    border-radius: 58px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 250, 255, 0.94));
    box-shadow: 0 32px 78px rgba(48, 62, 132, 0.11);
}

.footer-decor {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.footer-decor--dots {
    left: 42px;
    top: 24px;
    width: 205px;
    height: 120px;
    opacity: 0.62;
    background-image: radial-gradient(circle, rgba(84, 88, 255, 0.26) 2.5px, transparent 3px);
    background-size: 26px 26px;
}

.footer-decor--rings {
    border: 2px solid rgba(129, 135, 255, 0.16);
    border-radius: 50%;
}

.footer-decor--rings::before,
.footer-decor--rings::after {
    content: "";
    position: absolute;
    border: inherit;
    border-radius: inherit;
}

.footer-decor--rings-left {
    left: -104px;
    bottom: -122px;
    width: 330px;
    height: 330px;
}

.footer-decor--rings-left::before {
    inset: 30px;
}

.footer-decor--rings-left::after {
    inset: 72px;
}

.footer-decor--rings-right {
    right: -100px;
    top: -116px;
    width: 360px;
    height: 360px;
}

.footer-decor--rings-right::before {
    inset: 38px;
}

.footer-decor--rings-right::after {
    inset: 82px;
}

.footer-decor--triangle {
    right: 66px;
    top: 106px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 32px solid rgba(99, 105, 255, 0.28);
    transform: rotate(-14deg);
}

.footer-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.25fr) minmax(360px, 0.95fr);
    gap: 76px;
    align-items: start;
}

.footer-brand p {
    max-width: 430px;
    margin: 28px 0 42px;
    color: #26365d;
    font-size: 1.18rem;
    line-height: 1.68;
}

.footer-logo {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    color: #071033;
    font-size: clamp(2.35rem, 3vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
}

.footer-logo__icon,
.footer-badge span,
.footer-cta__icon,
.footer-contact span,
.footer-socials a {
    display: grid;
    place-items: center;
    color: #3156ff;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 32px rgba(51, 68, 170, 0.1);
}

.footer-logo__icon {
    width: 78px;
    height: 78px;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(135deg, #50a3ff 0%, #4931f6 100%);
}

.footer-logo__icon svg {
    width: 48px;
    height: 48px;
}

.footer-badge {
    width: min(100%, 324px);
    min-height: 66px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 20px 44px rgba(56, 67, 132, 0.09);
}

.footer-badge span {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}

.footer-badge svg {
    width: 42px;
    height: 42px;
}

.footer-badge b {
    font-size: 1rem;
    font-weight: 600;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 54px;
}

.footer-links > div {
    min-height: 374px;
    padding-left: 64px;
    border-left: 1px solid rgba(207, 214, 244, 0.78);
}

.footer-links h3 {
    margin: 0 0 27px;
    color: #091232;
    font-size: 1.5rem;
    font-weight: 800;
}

.footer-links a {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    color: #16284f;
    font-size: 1.06rem;
    font-weight: 500;
}

.footer-links a::before {
    content: "›";
    color: #3156ff;
    font-size: 2rem;
    line-height: 0;
}

.footer-links div:nth-child(2) a::before {
    display: none;
}

.footer-links a > span[aria-hidden="true"] {
    width: 24px;
    color: #3156ff;
    font-size: 1.35rem;
    line-height: 1;
}

.footer-cta {
    position: relative;
    padding: 42px 38px 40px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 26px 58px rgba(56, 67, 132, 0.12);
}

.footer-cta::after {
    content: "";
    position: absolute;
    right: 36px;
    top: 58px;
    width: 100px;
    height: 68px;
    background-image: radial-gradient(circle, rgba(84, 88, 255, 0.22) 2.4px, transparent 3px);
    background-size: 22px 22px;
}

.footer-cta__icon {
    width: 74px;
    height: 74px;
    margin-bottom: 32px;
    border: 1px solid rgba(211, 217, 246, 0.86);
    border-radius: 50%;
}

.footer-cta__icon svg {
    width: 42px;
    height: 42px;
}

.footer-cta h3 {
    margin: 0 0 20px;
    color: #071033;
    font-size: clamp(1.55rem, 1.8vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}

.footer-cta p {
    margin: 0 0 36px;
    color: #3a496b;
    font-size: 1.08rem;
    line-height: 1.55;
}

.footer-cta__button {
    min-height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    width: 100%;
    border-radius: 13px;
    color: #ffffff;
    font-size: 1.24rem;
    font-weight: 700;
    background: linear-gradient(135deg, #1f70ff 0%, #263cff 62%, #4a2cff 100%);
    box-shadow: 0 20px 42px rgba(47, 76, 255, 0.28);
}

.footer-cta__button svg {
    width: 26px;
    height: 26px;
}

.footer-contact-strip {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(310px, 0.9fr);
    gap: 30px;
    align-items: center;
    margin: 62px auto 44px;
    padding: 34px 48px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 52px rgba(56, 67, 132, 0.1);
}

.footer-contact {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
}

.footer-contact span {
    grid-row: span 2;
    width: 64px;
    height: 64px;
    border-radius: 13px;
}

.footer-contact svg {
    width: 40px;
    height: 40px;
}

.footer-contact b,
.footer-contact em {
    display: block;
    color: #16284f;
    font-size: 1.05rem;
    font-style: normal;
    font-weight: 500;
}

.footer-contact em {
    margin-top: 6px;
}

.footer-socials {
    min-height: 70px;
    padding-left: 42px;
    border-left: 1px solid rgba(207, 214, 244, 0.9);
}

.footer-socials p {
    margin: 0 0 15px;
    color: #16284f;
    font-size: 1.02rem;
    font-weight: 500;
}

.footer-socials div {
    display: flex;
    gap: 24px;
}

.footer-socials a {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    color: #3156ff;
    font-size: 1.35rem;
    font-weight: 800;
}

.footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 34px;
    border-top: 1px solid rgba(207, 214, 244, 0.88);
    color: #314063;
    font-size: 1.02rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom div {
    display: flex;
    align-items: center;
    gap: 42px;
}

.footer-bottom span[aria-hidden="true"] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(84, 88, 255, 0.36);
}

@media (max-width: 1450px) {
    .footer-panel {
        width: min(100% - 2rem, 1720px);
        padding: 92px 54px 32px;
        border-radius: 42px;
    }

    .footer-main {
        grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr) minmax(320px, 0.95fr);
        gap: 38px;
    }

    .footer-links {
        gap: 28px;
    }

    .footer-links > div {
        padding-left: 34px;
    }

    .footer-contact-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-socials {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 1120px) {
    .site-footer {
        padding-top: 28px;
    }

    .footer-panel {
        padding: 64px 34px 30px;
        border-radius: 32px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-brand p {
        max-width: 720px;
        margin-bottom: 26px;
    }

    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-links > div {
        min-height: 0;
        padding-left: 28px;
    }

    .footer-cta {
        max-width: 620px;
    }

    .footer-contact-strip {
        margin: 38px auto 32px;
        padding: 28px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .site-footer {
        padding: 20px 0 28px;
    }

    .footer-panel {
        width: min(100% - 1rem, 1720px);
        padding: 42px 22px 24px;
        border-radius: 24px;
    }

    .footer-logo {
        gap: 16px;
        font-size: 2rem;
    }

    .footer-logo__icon {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    .footer-logo__icon svg {
        width: 38px;
        height: 38px;
    }

    .footer-brand p {
        margin: 22px 0 24px;
        font-size: 1rem;
    }

    .footer-links,
    .footer-contact-strip {
        grid-template-columns: 1fr;
    }

    .footer-links > div {
        padding-left: 0;
        border-left: 0;
    }

    .footer-cta {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .footer-cta__button {
        min-height: 64px;
        font-size: 1.05rem;
    }

    .footer-contact-strip {
        gap: 22px;
        padding: 22px;
    }

    .footer-socials div {
        flex-wrap: wrap;
        gap: 14px;
    }

    .footer-bottom div {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .footer-bottom span {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer-contact {
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
    }

    .footer-contact span,
    .footer-socials a {
        width: 52px;
        height: 52px;
    }

    .footer-contact em {
        overflow-wrap: anywhere;
    }
}

.policy-page__grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.policy-page__note {
    position: sticky;
    top: 96px;
}

.policy-card {
    display: grid;
    gap: 1.2rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.policy-card section + section {
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.policy-card h2 {
    margin: 0 0 0.7rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

.policy-card p {
    margin: 0;
    color: var(--muted);
}

.policy-card p + p {
    margin-top: 0.8rem;
}

.policy-card a {
    color: #0f6f54;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
    width: min(100% - 2rem, 520px);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(20, 22, 28, 0.1);
    border-radius: var(--radius-lg);
    color: var(--text);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 58px rgba(13, 14, 18, 0.2);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.cookie-banner a {
    color: var(--text);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cookie-banner__button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0.65rem 0.95rem;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    background: #050507;
    cursor: pointer;
}

.error-page {
    padding-top: 5rem;
}

.error-page__box {
    max-width: 760px;
    padding: 2rem;
    text-align: center;
}

.error-page__box .hero__title {
    max-width: none;
}

.error-page__details {
    margin: 1rem auto 1.5rem;
    max-width: 56ch;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 122, 26, 0.2);
    border-radius: var(--radius-sm);
    color: #ffd6bd;
    background: rgba(255, 122, 26, 0.12);
}

@media (max-width: 1080px) {
    .header-inner {
        width: min(100% - 2.4rem, 1810px);
        grid-template-columns: minmax(150px, 0.28fr) minmax(330px, 1fr) minmax(320px, auto);
        gap: 1.1rem;
        min-height: 86px;
        padding: 0 28px 0 34px;
    }

    .brand__text {
        font-size: 1.72rem;
    }

    .site-nav {
        gap: clamp(1rem, 2.8vw, 2.3rem);
    }

    .site-nav__cta {
        min-height: 60px;
        padding: 0 24px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .site-nav__login {
        min-height: 60px;
        padding: 0 18px;
        border-radius: 14px;
        font-size: 0.94rem;
    }

    .site-nav__login-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    .hero__grid,
    .lobby-hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__stats {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        min-height: 420px;
    }

    .solution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .site-header {
        padding: 10px 0 8px;
    }

    .header-inner {
        width: min(100% - 1.5rem, 1810px);
        grid-template-columns: 1fr auto;
        gap: 0.8rem;
        min-height: 74px;
        padding: 0 18px;
        border-radius: 16px;
    }

    .brand {
        min-width: 0;
    }

    .brand__text {
        font-size: 1.68rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.15rem;
        padding: 0.45rem 0 1rem;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav__link {
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
        padding: 0 0.2rem;
        font-size: 1.02rem;
    }

    .site-nav__cta--desktop {
        display: none;
    }

    .site-nav__actions {
        display: none;
    }

    .site-nav__login--mobile {
        width: 100%;
        min-height: 56px;
        display: inline-flex;
        justify-content: center;
        margin-top: 0.35rem;
        padding: 0 18px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .site-nav__cta--mobile {
        width: 100%;
        min-height: 58px;
        display: inline-flex;
        justify-content: center;
        margin-top: 0.45rem;
        font-size: 1rem;
    }

    .nav-form,
    .site-nav__button,
    .site-nav__role {
        width: 100%;
    }

    .site-nav__button,
    .site-nav__role {
        justify-content: flex-start;
    }

    .cards,
    .contact-grid,
    .stats,
    .policy-page__grid {
        grid-template-columns: 1fr;
    }

    .policy-page__note {
        position: static;
    }

    .hero__title {
        font-size: 3.65rem;
    }

    .section__title {
        font-size: 2.35rem;
    }
}

@media (max-width: 780px) {
    .hero,
    .hero--home {
        min-height: 0;
        padding: 3rem 0;
    }

    .hero__content {
        padding: 1.75rem;
    }

    .lobby-hero__content {
        min-height: 0;
        padding: 1.75rem;
    }

    .hero__facts,
    .solution-grid {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        min-height: 320px;
    }

    .hero__visual-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline__item {
        grid-template-columns: 1fr;
    }

    .cta {
        align-items: stretch;
        flex-direction: column;
    }

    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 560px) {
    .container {
        width: min(100% - 1.2rem, var(--container));
    }

    .header-inner {
        width: min(100% - 1rem, 1810px);
        min-height: 68px;
        padding: 0 14px 0 16px;
        border-radius: 14px;
    }

    .brand__text {
        font-size: 1.48rem;
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .site-nav__cta--mobile {
        min-height: 54px;
        padding: 0 18px;
    }

    .hero__meta {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 1.5rem;
    }

    .hero__content,
    .lobby-hero__content,
    .policy-card {
        padding: 1.4rem;
    }

    .hero__title {
        font-size: 2.55rem;
    }

    .section__title {
        font-size: 2rem;
    }

    .button {
        width: 100%;
    }

    .hero__visual {
        min-height: 260px;
    }

    .hero__visual-strip {
        display: none;
    }
}

.site-header {
    padding: 10px 0;
}

.header-inner {
    width: min(100% - 2rem, 1320px);
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
    min-height: 64px;
    gap: 1.2rem;
    padding: 0 18px 0 22px;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(20, 26, 72, 0.08);
}

.brand__text {
    font-size: 1.5rem;
}

.site-nav {
    gap: clamp(1rem, 2vw, 2rem);
}

.site-nav__link {
    min-height: 38px;
    font-size: 0.94rem;
}

.site-nav__cta {
    min-height: 46px;
    padding: 0 18px;
    gap: 10px;
    border-radius: 12px;
    font-size: 0.94rem;
}

.site-nav__login {
    min-height: 46px;
    padding: 0 14px;
    gap: 9px;
    border-radius: 12px;
    font-size: 0.92rem;
}

.site-nav__login-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
}

.site-nav__arrow {
    width: 28px;
    height: 28px;
    border-radius: 9px;
}

.site-nav__account-mobile {
    display: none;
}

.site-nav__account-desktop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-nav__account-link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(190, 199, 234, 0.82);
    border-radius: 12px;
    color: #3156ff;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    background: rgba(49, 86, 255, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.site-nav__account-link:hover,
.site-nav__account-link.is-active {
    border-color: rgba(49, 86, 255, 0.28);
    background: rgba(49, 86, 255, 0.11);
    transform: translateY(-1px);
}

.site-nav__role {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(24, 182, 170, 0.22);
    border-radius: 12px;
    color: #0b746c;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    background: rgba(24, 182, 170, 0.1);
}

.site-nav__role::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #18b6aa;
    box-shadow: 0 0 0 4px rgba(24, 182, 170, 0.12);
}

.site-nav__button {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(190, 199, 234, 0.82);
    border-radius: 12px;
    color: #071033;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.site-nav__button:hover {
    color: #3156ff;
    border-color: rgba(49, 86, 255, 0.28);
    background: #ffffff;
    transform: translateY(-1px);
}

@media (min-width: 961px) {
    .header-inner {
        grid-template-columns: minmax(150px, auto) minmax(0, 1fr) minmax(320px, auto);
    }
}

@media (max-width: 1180px) and (min-width: 961px) {
    .site-nav__account-desktop {
        gap: 6px;
    }

    .site-nav__account-link,
    .site-nav__role,
    .site-nav__button {
        min-height: 42px;
        padding-inline: 10px;
        font-size: 0.84rem;
    }
}

@media (max-width: 960px) {
    .site-nav__account-desktop {
        display: none;
    }

    .site-nav__account-mobile {
        display: grid;
        gap: 8px;
        margin-top: 0.55rem;
    }

    .site-nav__account-mobile .site-nav__account-link,
    .site-nav__account-mobile .site-nav__role,
    .site-nav__account-mobile .site-nav__button,
    .site-nav__account-mobile .nav-form {
        width: 100%;
    }

    .site-nav__account-mobile .site-nav__account-link,
    .site-nav__account-mobile .site-nav__role,
    .site-nav__account-mobile .site-nav__button {
        min-height: 48px;
        justify-content: center;
    }
}

.wm-home {
    --wm-text: #071033;
    --wm-muted: #4a5878;
    --wm-line: rgba(204, 213, 246, 0.9);
    --wm-blue: #3156ff;
    --wm-teal: #18b6aa;
    color: var(--wm-text);
    background:
        linear-gradient(180deg, #ffffff 0%, #f8faff 42%, #ffffff 100%),
        linear-gradient(90deg, rgba(49, 86, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(49, 86, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
}

.wm-home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #ffffff 24%,
            #fbfcff 43%,
            #ffffff 62%,
            #f9fcff 100%);
}

.wm-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(49, 86, 255, 0.08) 0%, transparent 28%),
        linear-gradient(245deg, rgba(24, 182, 170, 0.08) 0%, transparent 24%),
        linear-gradient(180deg, transparent 0%, rgba(49, 86, 255, 0.045) 36%, transparent 48%, rgba(24, 182, 170, 0.04) 68%, transparent 84%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 93%, transparent 100%);
}

.wm-home .container {
    width: min(100% - 2rem, 1240px);
}

.wm-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 92px) 0 clamp(42px, 6vw, 78px);
}

.wm-hero::before,
.wm-final-cta::before {
    content: "";
    position: absolute;
    inset: auto -10% -160px;
    height: 280px;
    background: radial-gradient(circle, rgba(49, 86, 255, 0.12), transparent 62%);
    pointer-events: none;
}

.wm-hero::before {
    inset: 0;
    height: auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(246, 249, 255, 0.38) 76%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.58;
}

.wm-final-cta::before {
    inset: -90px 0 auto;
    height: 180px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(246, 249, 255, 0.82), rgba(255, 255, 255, 0));
}

.wm-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: clamp(28px, 5vw, 62px);
    align-items: center;
}

.wm-eyebrow {
    margin: 0 0 12px;
    color: var(--wm-blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wm-hero h1,
.wm-section h2,
.wm-final-cta h2 {
    margin: 0;
    color: var(--wm-text);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
}

.wm-hero h1 {
    max-width: 900px;
    font-size: clamp(2.45rem, 5vw, 4.35rem);
}

.wm-hero__lead {
    max-width: 780px;
    margin: 22px 0 0;
    color: var(--wm-muted);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.62;
}

.wm-hero__actions,
.wm-final-cta__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.wm-hero__actions {
    margin-top: 28px;
}

.wm-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.wm-button svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
}

.wm-button--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #1f70ff 0%, #263cff 62%, #4a2cff 100%);
    box-shadow: 0 14px 32px rgba(47, 76, 255, 0.24);
}

.wm-button--ghost {
    color: var(--wm-text);
    border-color: rgba(190, 199, 234, 0.82);
    background: rgba(255, 255, 255, 0.82);
}

.wm-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
    max-width: 760px;
}

.wm-hero__proof div,
.wm-hero-card,
.wm-service-card,
.wm-sell,
.wm-stack-grid article,
.wm-process article,
.wm-seo-ai,
.wm-faq article,
.wm-final-cta__inner {
    border: 1px solid var(--wm-line);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 42px rgba(56, 67, 132, 0.08);
    backdrop-filter: blur(12px);
}

.wm-hero__proof div {
    min-height: 88px;
    padding: 16px;
    border-radius: 16px;
}

.wm-hero__proof b {
    display: block;
    color: var(--wm-blue);
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
}

.wm-hero__proof span {
    display: block;
    margin-top: 8px;
    color: var(--wm-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.wm-hero__panel {
    display: grid;
    gap: 14px;
}

.wm-hero-card {
    min-height: 122px;
    padding: 22px;
    border-radius: 20px;
}

.wm-hero-card--main {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    border: 0;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #10236f 0%, #3156ff 52%, #18b6aa 100%);
}

.wm-hero-card span {
    color: rgba(49, 86, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.wm-hero-card--main span {
    color: rgba(255, 255, 255, 0.78);
}

.wm-hero-card b {
    display: block;
    margin-top: 8px;
    color: inherit;
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.2;
}

.wm-hero-card p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
}

.wm-section {
    position: relative;
    padding: clamp(54px, 7vw, 92px) 0;
    background: transparent;
}

.wm-section::before {
    content: "";
    position: absolute;
    inset: -54px 0 auto;
    height: 108px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(248, 250, 255, 0.56), rgba(255, 255, 255, 0));
}

.wm-section > .container {
    position: relative;
    z-index: 1;
}

.wm-section--tight {
    padding-top: clamp(42px, 6vw, 68px);
}

.wm-section--soft {
    background: transparent;
}

.wm-section__head {
    max-width: 780px;
    margin-bottom: 30px;
}

.wm-section__head--row {
    max-width: none;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
}

.wm-section h2,
.wm-final-cta h2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
}

.wm-section__head p:not(.wm-eyebrow),
.wm-sell__copy p,
.wm-seo-ai p,
.wm-final-cta p {
    margin: 16px 0 0;
    color: var(--wm-muted);
    font-size: 1.02rem;
    line-height: 1.66;
}

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


.wm-service-card {
    position: relative;
    min-height: 284px;
    padding: 24px;
    border-radius: 20px;
}

.wm-service-card__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: var(--wm-blue);
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

.wm-service-card__icon::before,
.wm-service-card__icon::after {
    content: "";
    position: absolute;
    display: block;
}

.wm-service-card__icon--browser::before {
    width: 28px;
    height: 20px;
    border: 3px solid currentColor;
    border-radius: 4px;
}

.wm-service-card__icon--browser::after {
    width: 16px;
    height: 3px;
    bottom: 12px;
    border-radius: 999px;
    background: currentColor;
}

.wm-service-card__icon--mobile::before {
    width: 18px;
    height: 30px;
    border: 3px solid currentColor;
    border-radius: 5px;
}

.wm-service-card__icon--desktop::before {
    width: 30px;
    height: 21px;
    border: 3px solid currentColor;
    border-radius: 4px;
}

.wm-service-card__icon--desktop::after {
    width: 22px;
    height: 3px;
    bottom: 10px;
    border-radius: 999px;
    background: currentColor;
}

.wm-service-card__icon--bot::before {
    width: 28px;
    height: 22px;
    border: 3px solid currentColor;
    border-radius: 8px;
}

.wm-service-card__icon--bot::after {
    width: 20px;
    height: 3px;
    top: 14px;
    border-radius: 999px;
    background: currentColor;
}

.wm-service-card__icon--server::before {
    width: 30px;
    height: 24px;
    border: 3px solid currentColor;
    border-radius: 5px;
    box-shadow: 0 10px 0 -3px currentColor;
}

.wm-service-card__icon--ai::before {
    width: 24px;
    height: 24px;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.wm-service-card__icon--ai::after {
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-35deg);
}

.wm-service-card h3,
.wm-sell h3,
.wm-stack-grid h3,
.wm-process h3,
.wm-faq h3 {
    margin: 18px 0 10px;
    color: var(--wm-text);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.22;
}

.wm-service-card p,
.wm-sell__list p,
.wm-process p,
.wm-faq p {
    margin: 0;
    color: var(--wm-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.wm-service-card div,
.wm-stack-grid div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.wm-service-card div span,
.wm-stack-grid span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 9px;
    color: #10204b;
    font-size: 0.82rem;
    font-weight: 800;
    background: rgba(85, 195, 190, 0.14);
}

.wm-sell,
.wm-seo-ai {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
    padding: clamp(28px, 4vw, 42px);
    border-radius: 24px;
}

.wm-link {
    display: inline-flex;
    align-items: center;
    margin-top: 22px;
    color: var(--wm-blue);
    font-weight: 800;
}

.wm-link::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

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

.wm-sell__list article {
    min-height: 186px;
    padding: 20px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.82);
}

.wm-sell__list b,
.wm-process span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--wm-blue);
    font-size: 0.86rem;
    background: linear-gradient(135deg, #ecf0ff, #e7e9ff);
}

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

.wm-stack-grid article {
    padding: 22px;
    border-radius: 18px;
}

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

.wm-case-card {
    border-radius: 20px;
}

.wm-case-card .webmason-work-card__body {
    padding: 22px;
}

.wm-case-card .webmason-work-card__tag {
    min-height: 30px;
    font-size: 0.82rem;
}

.wm-case-card h3 {
    margin: 14px 0 8px;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.wm-case-card p {
    font-size: 0.94rem;
    line-height: 1.5;
}

.wm-case-card .webmason-work-card__metrics {
    margin-top: 16px;
    gap: 8px;
}

.wm-case-card .webmason-work-card__metrics span {
    min-height: 30px;
    font-size: 0.8rem;
}

.wm-case-card .webmason-work-card__link {
    margin-top: 18px;
}

.wm-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.wm-process article {
    min-height: 210px;
    padding: 22px;
    border-radius: 18px;
}

.wm-seo-ai__panel {
    display: grid;
    gap: 12px;
}

.wm-seo-ai__panel div {
    padding: 18px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.82);
}

.wm-seo-ai__panel b,
.wm-seo-ai__panel span {
    display: block;
}

.wm-seo-ai__panel b {
    color: var(--wm-blue);
    font-size: 1rem;
}

.wm-seo-ai__panel span {
    margin-top: 6px;
    color: var(--wm-muted);
    font-size: 0.94rem;
    line-height: 1.45;
}

.wm-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.wm-faq article {
    padding: 22px;
    border-radius: 18px;
}

.wm-faq h3 {
    margin-top: 0;
}

.wm-final-cta {
    position: relative;
    overflow: hidden;
    padding: 0 0 clamp(58px, 8vw, 96px);
}

.wm-final-cta__inner {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 24px;
}

.wm-final-cta__inner > div {
    max-width: 760px;
}

.webmason-case-hero .webcraft-hero__actions {
    gap: 14px;
}

.webmason-case-hero .webcraft-button {
    min-width: 0;
    min-height: 58px;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px 0 22px;
    font-size: 1rem;
    white-space: normal;
}

.webmason-case-hero .webcraft-button span:first-child {
    line-height: 1.2;
}

.webmason-case-hero .webcraft-button span[aria-hidden="true"] {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.18);
}

.webmason-case-hero .webcraft-button span[aria-hidden="true"]::before {
    content: "";
    width: 11px;
    height: 11px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: rotate(45deg);
}

.webmason-case-detail__inner {
    grid-template-columns: 1fr;
}

.webmason-case-media {
    display: grid;
    place-items: center;
    padding: clamp(16px, 2vw, 26px);
    background:
        radial-gradient(circle at 18% 12%, rgba(49, 86, 255, 0.14), transparent 36%),
        linear-gradient(135deg, #f7f9ff 0%, #eef3ff 100%);
}

.webmason-case-media img {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 22px 48px rgba(31, 45, 98, 0.15);
}

.webmason-case-summary {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.webmason-case-summary div {
    padding: 0 18px;
    border-bottom: 0;
    border-right: 1px solid rgba(207, 214, 244, 0.78);
}

.webmason-case-summary div:first-child {
    padding-left: 0;
}

.webmason-case-summary div:last-child {
    padding-right: 0;
    border-right: 0;
}

.webmason-case-content {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.webmason-case-content section,
.webmason-case-panel {
    padding: 24px;
}

.webmason-case-content h2,
.webmason-case-panel h2 {
    margin-bottom: 10px;
    font-size: clamp(1.18rem, 1.6vw, 1.45rem);
}

.webmason-case-content p,
.webmason-case-panel li,
.webmason-case-stages p {
    font-size: 0.96rem;
    line-height: 1.58;
}

.webmason-case-insights {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    gap: 24px;
}

.webmason-case-insights--solo {
    grid-template-columns: 1fr;
}

.webmason-case-gallery {
    grid-column: 1 / -1;
    display: grid;
    gap: 20px;
}

.webmason-case-gallery header h2 {
    margin: 0;
    color: #071033;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.webmason-case-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.webmason-case-gallery figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 20px 42px rgba(56, 67, 132, 0.1);
}

.webmason-case-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.webmason-case-graph,
.webmason-case-review {
    margin: 0;
    padding: 28px;
    border: 1px solid rgba(214, 220, 246, 0.86);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 52px rgba(56, 67, 132, 0.1);
}

.webmason-case-graph header h2 {
    margin: 0 0 20px;
    color: #071033;
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    line-height: 1.2;
}

.webmason-case-graph__line {
    height: 180px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8faff, #ffffff);
}

.webmason-case-graph__line svg {
    width: 100%;
    height: 100%;
}

.webmason-case-graph__line path:first-child {
    fill: none;
    stroke: rgba(207, 214, 244, 0.85);
    stroke-width: 2;
}

.webmason-case-graph__line polyline {
    fill: none;
    stroke: #3156ff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.webmason-case-graph__line circle {
    fill: #ffffff;
    stroke: #3156ff;
    stroke-width: 4;
}

.webmason-case-graph__area {
    fill: rgba(49, 86, 255, 0.12);
    stroke: none;
}

.webmason-case-graph__bars {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.webmason-case-graph__bars div {
    display: grid;
    grid-template-columns: minmax(160px, 0.4fr) minmax(0, 1fr) 48px;
    gap: 12px;
    align-items: center;
    color: #3a496b;
    font-size: 0.92rem;
}

.webmason-case-graph__bars i {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(49, 86, 255, 0.1);
}

.webmason-case-graph__bars i::before {
    content: "";
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3156ff, #18b6aa);
}

.webmason-case-graph__bars div:nth-child(1) i::before {
    width: 98%;
}

.webmason-case-graph__bars div:nth-child(2) i::before {
    width: 92%;
}

.webmason-case-graph__bars div:nth-child(3) i::before {
    width: 88%;
}

.webmason-case-graph__bars div i::before {
    width: var(--bar-value, 0%);
}

.webmason-case-graph__bars b {
    color: #071033;
    text-align: right;
}

.webmason-case-review {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    color: #071033;
}

.webmason-case-review > span {
    color: rgba(49, 86, 255, 0.18);
    font-size: 5rem;
    font-weight: 800;
    line-height: 0.75;
}

.webmason-case-review p {
    margin: 0;
    color: #26365d;
    font-size: 1.05rem;
    line-height: 1.65;
}

.webmason-case-review b,
.webmason-case-review small {
    display: block;
}

.webmason-case-review small {
    margin-top: 5px;
    color: #7180a5;
}

.wm-inline-editor {
    position: sticky;
    top: 82px;
    z-index: 30;
    width: min(100% - 32px, 1180px);
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(49, 86, 255, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 38px rgba(31, 45, 98, 0.12);
    backdrop-filter: blur(14px);
}

.wm-inline-editor span {
    flex: 1;
    color: #53617f;
    font-size: 0.92rem;
}

.wm-inline-editor button,
.wm-inline-drag {
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #3156ff;
    cursor: pointer;
    font-weight: 800;
}

.wm-inline-editor button {
    min-height: 40px;
    padding: 0 16px;
}

.wm-inline-editor [data-inline-edit] {
    display: none;
}

.wm-inline-editor[data-inline-mode="preview"] [data-save-page],
.wm-inline-editor[data-inline-mode="preview"] [data-save-case],
.wm-inline-editor[data-inline-mode="preview"] [data-inline-preview],
.wm-inline-editor[data-inline-mode="idle"] [data-save-page],
.wm-inline-editor[data-inline-mode="idle"] [data-save-case],
.wm-inline-editor[data-inline-mode="idle"] [data-inline-preview],
.wm-inline-editor[data-inline-mode="idle"] [data-inline-finish] {
    display: none;
}

.wm-inline-editor[data-inline-mode="preview"] [data-inline-edit],
.wm-inline-editor[data-inline-mode="idle"] [data-inline-edit] {
    display: inline-flex;
    align-items: center;
}

.is-inline-editable [contenteditable="true"] {
    outline: 2px dashed rgba(49, 86, 255, 0.22);
    outline-offset: 4px;
    border-radius: 8px;
}

.is-inline-shell-editable [contenteditable="true"] {
    outline: 2px dashed rgba(49, 86, 255, 0.22);
    outline-offset: 4px;
    border-radius: 8px;
}

.is-inline-editable [contenteditable="true"]:focus,
.is-inline-shell-editable [contenteditable="true"]:focus {
    outline-color: #3156ff;
    background: rgba(255, 255, 255, 0.66);
}

.wm-inline-drag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 34px;
    height: 34px;
    touch-action: none;
}

.is-inline-editable [data-case-section].is-dragging,
.is-inline-editable [draggable="true"].is-dragging {
    opacity: 0.5;
}

.is-inline-editable [draggable="true"] {
    cursor: grab;
}

.is-inline-editable [draggable="true"]:active {
    cursor: grabbing;
}

.is-inline-editable [data-inline-block] {
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    outline: 1px solid rgba(49, 86, 255, 0.16);
    outline-offset: 3px;
}

[data-inline-offset-y] {
    transform: translateY(var(--wm-inline-offset-y, 0));
}

.wm-inline-nudge {
    position: absolute;
    top: 10px;
    right: 52px;
    z-index: 4;
    display: inline-flex;
    gap: 4px;
}

.wm-inline-nudge button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #3156ff;
    cursor: pointer;
    font-weight: 800;
}

.wm-inline-resize {
    display: none;
}

.wm-inline-size {
    display: none;
}

.is-inline-editable [data-inline-block] > .wm-inline-resize {
    position: absolute;
    right: -7px;
    bottom: -7px;
    z-index: 4;
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 5px;
    background: #3156ff;
    box-shadow: 0 6px 14px rgba(31, 45, 98, 0.22);
    cursor: nwse-resize;
    touch-action: none;
}

.is-inline-editable [data-inline-block] > .wm-inline-size {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    display: none;
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(31, 45, 98, 0.86);
    box-shadow: 0 8px 18px rgba(31, 45, 98, 0.2);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.is-inline-editable [data-inline-block]:hover > .wm-inline-size,
.is-inline-editable [data-inline-block].is-resizing > .wm-inline-size {
    display: block;
}

.is-inline-editable [data-inline-block].is-resizing {
    outline: 2px solid rgba(49, 86, 255, 0.55);
    outline-offset: 6px;
}

.wm-inline-drop-marker {
    min-height: 18px;
    margin: 10px 0;
    border: 2px dashed rgba(49, 86, 255, 0.55);
    border-radius: 10px;
    background: rgba(49, 86, 255, 0.08);
}

.wm-inline-grid {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--wm-grid-left, 0);
    z-index: 28;
    width: var(--wm-grid-width, 0);
    pointer-events: none;
    border-right: 1px solid rgba(49, 86, 255, 0.28);
    border-left: 1px solid rgba(49, 86, 255, 0.28);
    background-image: repeating-linear-gradient(
        90deg,
        rgba(49, 86, 255, 0.16) 0,
        rgba(49, 86, 255, 0.16) 1px,
        transparent 1px,
        transparent calc(var(--wm-grid-width, 0) / 12)
    );
}

.wm-inline-guide {
    position: fixed;
    z-index: 31;
    pointer-events: none;
    background: rgba(255, 77, 109, 0.88);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 16px rgba(255, 77, 109, 0.32);
}

.wm-inline-guide--x {
    top: 0;
    bottom: 0;
    width: 2px;
}

/* Базовая защита сетки: содержимое не распирает колонки и не вылезает за контейнер. */
.container,
.container > *,
[class*="grid"] > *,
[class*="__inner"] > * {
    min-width: 0;
}

.container img,
.container video,
.container iframe,
[data-inline-page-root] img,
[data-inline-page-root] video,
[data-inline-page-root] iframe {
    max-width: 100%;
}

[data-inline-page-root] section,
[data-inline-page-root] article,
[data-inline-page-root] aside,
[data-inline-page-root] figure {
    max-width: 100%;
    box-sizing: border-box;
}

.wm-inline-guide--y {
    right: 0;
    left: 0;
    height: 2px;
}

.is-inline-preview .wm-inline-drag,
.is-inline-preview .wm-inline-nudge,
.is-inline-preview .wm-inline-resize,
.is-inline-preview .wm-inline-size,
.wm-inline-editor[data-inline-mode="preview"] [data-inline-nav-add],
.wm-inline-editor[data-inline-mode="idle"] [data-inline-nav-add],
.site-header:not(.is-inline-shell-editable) .wm-inline-nav-tools {
    display: none !important;
}

.site-footer {
    padding: 28px 0 32px;
}

.footer-panel {
    width: min(100% - 2rem, 1320px);
    padding: 40px;
    border-radius: 28px;
}

.footer-main {
    grid-template-columns: minmax(260px, 0.85fr) minmax(380px, 1.25fr) minmax(280px, 0.85fr);
    gap: 34px;
}

.footer-logo {
    gap: 14px;
    font-size: clamp(1.8rem, 2vw, 2.25rem);
}

.footer-logo__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
}

.footer-logo__icon svg {
    width: 34px;
    height: 34px;
}

.footer-brand p {
    margin: 20px 0 24px;
    font-size: 0.98rem;
    line-height: 1.58;
}

.footer-badge {
    min-height: 56px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 12px;
}

.footer-links {
    gap: 24px;
}

.footer-links > div {
    min-height: 0;
    padding-left: 24px;
}

.footer-links h3 {
    margin-bottom: 16px;
    font-size: 1.12rem;
}

.footer-links a {
    min-height: 30px;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.94rem;
}

.footer-links a::before {
    font-size: 1.35rem;
}

.footer-cta {
    padding: 24px;
    border-radius: 22px;
}

.footer-cta::after {
    display: none;
}

.footer-cta__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
}

.footer-cta__icon svg {
    width: 32px;
    height: 32px;
}

.footer-cta h3 {
    margin-bottom: 12px;
    font-size: 1.35rem;
}

.footer-cta p {
    margin-bottom: 22px;
    font-size: 0.96rem;
}

.footer-cta__button {
    min-height: 54px;
    gap: 12px;
    font-size: 0.98rem;
}

.footer-contact-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px auto 24px;
    padding: 18px;
    border-radius: 16px;
}

.footer-contact {
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 12px;
}

.footer-contact span {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

.footer-contact svg {
    width: 28px;
    height: 28px;
}

.footer-contact b,
.footer-contact em {
    font-size: 0.9rem;
}

.footer-socials {
    display: none;
}

.footer-bottom {
    padding-top: 20px;
    font-size: 0.9rem;
}

.footer-bottom div {
    gap: 18px;
    flex-wrap: wrap;
}

.cookie-banner {
    width: min(100% - 2rem, 620px);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(13, 14, 18, 0.18);
}

@media (max-width: 1120px) {
    .wm-hero__inner,
    .wm-sell,
    .wm-seo-ai,
    .webmason-case-insights,
    .footer-main {
        grid-template-columns: 1fr;
    }

    .wm-service-grid,
    .wm-stack-grid,
    .wm-case-grid,
    .wm-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wm-hero__panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wm-hero-card--main {
        min-height: 160px;
    }

    .footer-cta {
        max-width: none;
    }
}

@media (max-width: 960px) {
    .header-inner {
        width: min(100% - 1rem, 1320px);
        grid-template-columns: 1fr auto;
        min-height: 62px;
        padding: 0 14px 0 16px;
    }

    .site-nav {
        gap: 0.15rem;
    }

    .wm-hero {
        padding-top: 42px;
    }

    .wm-section__head--row {
        align-items: flex-start;
        flex-direction: column;
    }

    .webmason-case-summary,
    .webmason-case-content,
    .webmason-case-gallery__grid {
        grid-template-columns: 1fr;
    }

    .webmason-case-summary div,
    .webmason-case-summary div:first-child,
    .webmason-case-summary div:last-child {
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(207, 214, 244, 0.78);
    }

    .webmason-case-summary div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .footer-contact-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .wm-home .container {
        width: min(100% - 1.2rem, 1240px);
    }

    .wm-hero h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .wm-hero__proof,
    .wm-hero__panel,
    .wm-service-grid,
    .wm-stack-grid,
    .wm-case-grid,
    .wm-process,
    .wm-sell__list,
    .wm-faq {
        grid-template-columns: 1fr;
    }


    .wm-button {
        width: 100%;
        min-height: 50px;
        white-space: normal;
    }

    .wm-section {
        padding: 46px 0;
    }

    .wm-service-card,
    .wm-process article {
        min-height: 0;
    }

    .wm-sell,
    .wm-seo-ai,
    .wm-final-cta__inner {
        padding: 22px;
        border-radius: 20px;
    }

    .webmason-case-graph__bars div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .webmason-case-graph__bars b {
        text-align: left;
    }

    .footer-panel {
        width: min(100% - 1rem, 1320px);
        padding: 26px 20px;
        border-radius: 22px;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }

    .footer-links > div {
        padding-left: 0;
        border-left: 0;
    }
}

.webmason-page-hero {
    padding: clamp(48px, 6vw, 72px) 0 clamp(42px, 5vw, 64px);
}

.webmason-page-hero__inner {
    width: min(100% - 2rem, 900px);
}

.webmason-page-hero .webcraft-hero__title {
    font-size: clamp(2.15rem, 4.4vw, 3.75rem);
}

.webmason-page-hero .webcraft-hero__lead {
    margin-top: 18px;
    font-size: clamp(1rem, 1.2vw, 1.14rem);
}

.webmason-page-hero .webcraft-hero__actions {
    gap: 14px;
    margin-top: 28px;
}

.webmason-page-hero .webcraft-button {
    min-width: 0;
    min-height: 56px;
    padding: 0 20px;
    gap: 12px;
    font-size: 0.98rem;
}

.webcraft-button span[aria-hidden="true"] {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 10px;
    font-size: 0;
    line-height: 0;
    background: rgba(255, 255, 255, 0.18);
}

.service-overview {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
    gap: clamp(20px, 3vw, 42px);
    align-items: start;
}

.service-overview__copy p:last-child {
    margin-bottom: 0;
}

.service-overview__groups {
    display: grid;
    gap: 14px;
}

.service-overview__groups article {
    padding: 18px;
    border: 1px solid rgba(210, 218, 246, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.service-overview__groups h3 {
    margin: 0 0 12px;
}

.service-overview__groups div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.service-overview__groups span {
    padding: 8px 10px;
    border-radius: 999px;
    color: #3156ff;
    background: rgba(49, 86, 255, 0.08);
    font-size: 0.92rem;
    font-weight: 800;
}

.service-work-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-work-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 14px 16px;
    border: 1px solid rgba(210, 218, 246, 0.92);
    border-radius: 16px;
    background: #fff;
}

.service-work-list span {
    color: #3156ff;
    font-weight: 900;
}

@media (max-width: 860px) {
    .service-overview {
        grid-template-columns: 1fr;
    }
}

.webcraft-button--secondary span[aria-hidden="true"] {
    background: rgba(49, 86, 255, 0.1);
}

.webcraft-button span[aria-hidden="true"]::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: translateX(-1px) rotate(45deg);
    transform-origin: center;
}

.webmason-work-card__link::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.webmason-case-hero .webcraft-button span[aria-hidden="true"],
.site-nav__arrow,
.webmason-benefit__icon,
.webmason-solution-card__icon,
.webmason-contact-tile__icon,
.footer-logo__icon,
.footer-cta__icon {
    display: grid;
    place-items: center;
}

.webmason-case-hero .webcraft-button span[aria-hidden="true"]::before {
    transform: translateX(-1px) rotate(45deg);
    transform-origin: center;
}

.site-nav__arrow svg,
.webmason-benefit__icon svg,
.webmason-solution-card__icon svg,
.webmason-contact-tile__icon svg,
.footer-logo__icon svg,
.footer-cta__icon svg,
.footer-cta__button svg,
.footer-contact svg,
.wm-button svg {
    display: block;
}

.webmason-case-graph {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(49, 86, 255, 0.12), transparent 34%),
        radial-gradient(circle at 88% 10%, rgba(24, 182, 170, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.94));
}

.webmason-case-graph::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #3156ff, #18b6aa, #ffb03a);
}

.webmason-case-graph__line {
    height: auto;
    min-height: 168px;
    aspect-ratio: 2.65 / 1;
    padding: 16px 14px;
    border: 1px solid rgba(207, 214, 244, 0.74);
    border-radius: 18px;
    background:
        linear-gradient(rgba(49, 86, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 86, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    background-size: 100% 33.333%, 16.666% 100%, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 30px rgba(49, 86, 255, 0.08);
}

.webmason-case-graph__line svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.webmason-case-graph__line path:first-child {
    stroke: rgba(82, 103, 180, 0.22);
    stroke-width: 1.5;
}

.webmason-case-graph__line polyline {
    stroke: #3156ff;
    stroke-width: 6;
    filter: drop-shadow(0 8px 9px rgba(49, 86, 255, 0.22));
}

.webmason-case-graph__line circle {
    fill: #ffffff;
    stroke-width: 5;
    filter: drop-shadow(0 5px 6px rgba(49, 86, 255, 0.16));
}

.webmason-case-graph__area {
    fill: rgba(49, 86, 255, 0.14);
}

.webmason-case-graph__bars {
    gap: 12px;
    margin-top: 20px;
}

.webmason-case-graph__bars div {
    grid-template-columns: minmax(170px, 0.45fr) minmax(160px, 1fr) 50px;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(207, 214, 244, 0.58);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
}

.webmason-case-graph__bars i {
    height: 12px;
    background: rgba(49, 86, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(49, 86, 255, 0.05);
}

.webmason-case-graph__bars i::before {
    background: linear-gradient(90deg, #3156ff 0%, #1aa7e8 52%, #18b6aa 100%);
    box-shadow: 0 4px 12px rgba(24, 182, 170, 0.22);
}

.webmason-case-graph__bars b {
    color: #071033;
    font-variant-numeric: tabular-nums;
}

.webmason-case-columns--deliverables {
    align-items: stretch;
}

.webmason-case-columns--deliverables .webmason-case-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(203, 213, 255, 0.9);
    background:
        radial-gradient(circle at 8% 12%, rgba(49, 86, 255, 0.14), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(24, 182, 170, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 255, 0.92));
}

.webmason-case-columns--deliverables .webmason-case-panel--services {
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 176, 58, 0.15), transparent 34%),
        radial-gradient(circle at 92% 14%, rgba(49, 86, 255, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 255, 0.92));
}

.webmason-case-columns--deliverables .webmason-case-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #3156ff, #18b6aa);
}

.webmason-case-columns--deliverables .webmason-case-panel--services::before {
    background: linear-gradient(90deg, #ffb03a, #3156ff);
}

.webmason-case-columns--deliverables .webmason-case-panel h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.webmason-case-columns--deliverables .webmason-case-panel h2::before {
    content: "";
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4L19 6.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent),
        linear-gradient(135deg, #3156ff, #18b6aa);
    box-shadow: 0 12px 22px rgba(49, 86, 255, 0.18);
}

.webmason-case-columns--deliverables .webmason-case-panel--services h2::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h9'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent),
        linear-gradient(135deg, #ffb03a, #3156ff);
}

.webmason-case-columns--deliverables .webmason-case-panel ul {
    gap: 10px;
}

.webmason-case-columns--deliverables .webmason-case-panel li {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 12px 14px 12px 54px;
    border: 1px solid rgba(207, 214, 244, 0.66);
    border-radius: 16px;
    color: #223154;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 24px rgba(56, 67, 132, 0.07);
}

.webmason-case-columns--deliverables .webmason-case-panel li::before {
    content: "";
    left: 16px;
    top: 50%;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    background: linear-gradient(135deg, #3156ff, #18b6aa);
    transform: translateY(-50%);
    box-shadow: 0 8px 16px rgba(49, 86, 255, 0.18);
}

.webmason-case-columns--deliverables .webmason-case-panel--services li::before {
    background: linear-gradient(135deg, #ffb03a, #3156ff);
}

.webmason-case-columns--deliverables .webmason-case-panel li::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    width: 6px;
    height: 11px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-58%) rotate(45deg);
}

@media (max-width: 720px) {
    .webmason-case-graph__line {
        min-height: 150px;
        aspect-ratio: 1.75 / 1;
        padding: 12px 10px;
    }

    .webmason-case-graph__bars div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .webmason-case-graph__bars b {
        text-align: left;
    }

    .webmason-case-columns--deliverables .webmason-case-panel li {
        padding-right: 12px;
    }
}

@media (max-width: 720px) {
    .webmason-page-hero {
        padding: 38px 0 44px;
    }

    .webmason-page-hero .webcraft-hero__actions {
        width: min(100%, 420px);
    }
}

.webmason-works--page {
    padding: clamp(46px, 6vw, 74px) 0 clamp(58px, 7vw, 92px);
}

.webmason-works--page .webmason-works__inner {
    width: min(100% - 2rem, 1320px);
}

.webmason-works--page .webmason-solutions__head {
    margin-bottom: 0;
}

.webmason-works--page .webmason-work-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.webmason-works--page .webmason-work-card {
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(56, 67, 132, 0.08);
}

.webmason-works--page .webmason-work-card__visual {
    aspect-ratio: 16 / 9;
    padding: 11px;
}

.webmason-works--page .webmason-work-card__visual img {
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(31, 45, 98, 0.12);
}

.webmason-works--page .webmason-work-card__body {
    padding: 20px;
}

.webmason-works--page .webmason-work-card__tag {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.webmason-works--page .webmason-work-card h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 12px 0 8px;
    font-size: clamp(1.08rem, 1.35vw, 1.32rem);
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.webmason-works--page .webmason-work-card p {
    display: -webkit-box;
    overflow: hidden;
    color: #405073;
    font-size: 0.9rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.webmason-works--page .webmason-work-card__metrics {
    gap: 6px;
    margin-top: 14px;
}

.webmason-works--page .webmason-work-card__metrics span {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 0.76rem;
}

.webmason-works--page .webmason-work-card__link {
    margin-top: 16px;
    font-size: 0.9rem;
}

@media (max-width: 1120px) {
    .webmason-works--page .webmason-work-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .webmason-works--page {
        padding: 38px 0 54px;
    }

    .webmason-works--page .webmason-works__inner {
        width: min(100% - 1rem, 1320px);
    }

    .webmason-works--page .webmason-work-grid--wide {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }

    .webmason-works--page .webmason-work-card {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        min-height: 152px;
        border-radius: 16px;
    }

    .webmason-works--page .webmason-work-card__visual {
        height: 100%;
        min-height: 152px;
        aspect-ratio: auto;
        padding: 8px;
    }

    .webmason-works--page .webmason-work-card__visual img {
        border-radius: 10px;
    }

    .webmason-works--page .webmason-work-card__body {
        min-width: 0;
        padding: 13px 13px 12px;
    }

    .webmason-works--page .webmason-work-card__tag {
        min-height: 22px;
        padding: 0 7px;
        border-radius: 7px;
        font-size: 0.68rem;
    }

    .webmason-works--page .webmason-work-card h3 {
        margin: 7px 0 5px;
        font-size: 0.98rem;
        line-height: 1.15;
    }

    .webmason-works--page .webmason-work-card p {
        font-size: 0.78rem;
        line-height: 1.32;
        -webkit-line-clamp: 2;
    }

    .webmason-works--page .webmason-work-card__metrics {
        gap: 4px;
        margin-top: 8px;
    }

    .webmason-works--page .webmason-work-card__metrics span {
        min-height: 22px;
        padding: 0 6px;
        border-radius: 7px;
        font-size: 0.66rem;
    }

    .webmason-works--page .webmason-work-card__metrics span:nth-child(n+3) {
        display: none;
    }

    .webmason-works--page .webmason-work-card__link {
        margin-top: 8px;
        font-size: 0.78rem;
    }
}

@media (max-width: 420px) {
    .webmason-works--page .webmason-work-card {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 138px;
    }

    .webmason-works--page .webmason-work-card__visual {
        min-height: 138px;
        padding: 6px;
    }
}