/*! Generated file — built from assets/css/main.css, every
    blocks/lazyblock-*\/block.css and assets/css/viewport.css.
    Edit those; anything written here is lost on the next rebuild. */



:root {
--ink: #1b1b20;
--ink-70: rgba(27,27,32,.8);
--ink-50: rgba(27,27,32,.68);

--ink-35: rgba(27,27,32,.68);
--paper: #e6e6e9;
--white: #f0f0f2;
--graphite: #4a4a53;
--light: #eeeef1;
--light-70: rgba(238,238,241,.76);
--light-45: rgba(238,238,241,.52);
--silver: #b6b6bf;
--steel: #7c7c88;
--hair: rgba(27,27,32,.2);
--hair-l: rgba(238,238,241,.26);
--accent: #1217f7;
--acid: #d6f84c;

--w: 1440px;

--c21-logo: url(../img/code21-logo.png);
--display: "Clash Display", "Segoe UI", Arial, sans-serif;
--body: "Satoshi", "Segoe UI", Arial, sans-serif;
--mono: "JetBrains Mono", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--body);
font-size: 17px; line-height: 1.5;
color: var(--ink); background: var(--paper);
overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }

#c21-fog { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main, .c21-header, .c21-dots { position: relative; z-index: 1; }
.c21-wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 40px; }


.c21-meta {
font-family: var(--mono); font-size: 11.5px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase; color: var(--ink-35);
}
.c21-meta b { font-weight: 500; color: var(--accent); }
.c21-screen--dark .c21-meta { color: var(--light-45); }
.c21-screen--dark .c21-meta b { color: var(--acid); }


.c21-btn {
display: inline-block; padding: 15px 30px;
border: 1px solid var(--accent); background: var(--accent); color: #fff;
font-family: var(--mono); font-size: 12px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
transition: background .22s, color .22s, border-color .22s;
}

.c21-btn:hover, .c21-btn:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
.c21-btn:focus { color: var(--white); }
.c21-btn:active { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.c21-btn--ghost { background: transparent; color: var(--ink); }
.c21-btn--ghost:hover, .c21-btn--ghost:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.c21-btn--ghost:focus { color: var(--ink); }
.c21-btn--ghost:active { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.c21-screen--dark .c21-btn { background: var(--acid); border-color: var(--acid); color: var(--ink); }

.c21-screen--dark .c21-btn:hover { background: var(--light); border-color: var(--light); color: var(--ink); }
.c21-screen--dark .c21-btn:focus { color: var(--ink); }
.c21-screen--dark .c21-btn:active { background: var(--ink); border-color: var(--ink); color: var(--acid); }
.c21-screen--dark .c21-btn--ghost { background: transparent; color: var(--light); border-color: var(--hair-l); }
.c21-screen--dark .c21-btn--ghost:hover { background: var(--light); color: var(--ink); border-color: var(--light); }


.c21-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 10;
background: rgba(230,230,233,.85); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--hair); transition: background .4s, border-color .4s;
}

body.admin-bar .c21-header { top: 32px; }
body.admin-bar .c21-screen { height: calc(100vh - 32px); }
@media (max-width: 782px) {
body.admin-bar .c21-header { top: 46px; }
body.admin-bar .c21-screen { height: auto; }
}
.c21-nav { display: flex; align-items: center; gap: 40px; max-width: var(--w); margin: 0 auto; padding: 0 40px; height: 64px; }

.c21-logo {
display: block; width: 146px; height: 30px;
background-color: var(--accent);
-webkit-mask: var(--c21-logo) no-repeat left center / contain;
mask: var(--c21-logo) no-repeat left center / contain;
text-indent: -9999px; overflow: hidden;
transition: background-color .4s;
}

.c21-nav > nav { margin-left: auto; }
.c21-nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.c21-nav-links a {
font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-50); text-decoration: none; transition: color .25s;
}
.c21-nav-links a:hover, .c21-nav-links a:focus-visible { color: var(--accent); }
.c21-header .c21-btn { padding: 11px 22px; }



.c21-burger,
.c21-burger:hover,
.c21-burger:focus,
.c21-burger:active,
.c21-burger:focus-visible {
align-items: center; justify-content: center;
width: 40px; height: 40px; margin-left: 4px; padding: 0;
border: 1px solid var(--hair);
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--ink);
cursor: pointer;
-webkit-appearance: none; appearance: none;
}
.c21-burger { display: none; }
.c21-burger:focus-visible { border-color: var(--accent); }
.c21-burger span,
.c21-burger:hover span,
.c21-burger:focus span,
.c21-burger:active span {
display: block; position: relative; width: 17px; height: 1px; background: var(--ink);
transition: background .2s;
}
.c21-burger span::before, .c21-burger span::after {
content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: var(--ink);
transition: transform .25s;
}
.c21-burger span::before { top: -5px; }
.c21-burger span::after { top: 5px; }

body.c21-menu-open .c21-burger span,
body.c21-menu-open .c21-burger:hover span,
body.c21-menu-open .c21-burger:focus span,
body.c21-menu-open .c21-burger:active span { background: transparent; }
body.c21-menu-open .c21-burger span::before { transform: translateY(5px) rotate(45deg); }
body.c21-menu-open .c21-burger span::after { transform: translateY(-5px) rotate(-45deg); }
html.c21-on-dark .c21-burger { border-color: var(--hair-l); }
html.c21-on-dark .c21-burger span,
html.c21-on-dark .c21-burger span::before,
html.c21-on-dark .c21-burger span::after { background: var(--light); }

html.c21-on-dark .c21-header { background: rgba(52,52,60,.82); border-color: var(--hair-l); }
html.c21-on-dark .c21-logo { background-color: var(--acid); }
html.c21-on-dark .c21-nav-links a { color: var(--light-70); }
html.c21-on-dark .c21-nav-links a:hover { color: var(--acid); }
html.c21-on-dark .c21-header .c21-btn { background: var(--acid); border-color: var(--acid); color: var(--ink); }
html.c21-on-dark .c21-header .c21-btn:hover,
html.c21-on-dark .c21-header .c21-btn:focus-visible { background: var(--light); border-color: var(--light); color: var(--ink); }
html.c21-on-dark .c21-header .c21-btn:focus { color: var(--ink); }
html.c21-on-dark .c21-header .c21-btn:active { background: var(--ink); border-color: var(--ink); color: var(--acid); }


.c21-dots { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 11; }
.c21-dots button {
width: 8px; height: 8px; padding: 0; border: 1px solid var(--ink-35);
border-radius: 999px; background: transparent; cursor: pointer;
transition: background .3s, border-color .3s, height .3s;
}
.c21-dots button:hover { border-color: var(--ink); }
.c21-dots button.is-active { height: 26px; background: var(--accent); border-color: var(--accent); }
html.c21-on-dark .c21-dots button { border-color: var(--light-45); }
html.c21-on-dark .c21-dots button.is-active { background: var(--acid); border-color: var(--acid); }


.c21-screen {
position: relative; display: flex; flex-direction: column; justify-content: center;
height: 100vh; padding: 84px 0 40px; overflow: hidden;
}
.c21-screen--dark { color: var(--light); }


.c21-head { margin-bottom: 36px; text-align: center; }
.c21-head .c21-meta { display: block; margin-bottom: 14px; }
.c21-head h2 {
margin: 0; font-family: var(--display);
font-size: clamp(32px, 4.1vw, 62px);
font-weight: 600; line-height: 1.02; letter-spacing: -.015em;
text-transform: uppercase; text-wrap: balance;
}
.c21-head .c21-lead { max-width: 58ch; margin: 16px auto 0; font-size: 16.5px; color: var(--ink-50); }
.c21-screen--dark .c21-head .c21-lead { color: var(--light-70); }


.c21-outline {
color: transparent;
-webkit-text-stroke: 1.4px var(--accent);
paint-order: stroke fill;
}
.c21-screen--dark .c21-outline { -webkit-text-stroke-color: var(--acid); }



.c21-cases .c21-meta,
.c21-contact .c21-meta { color: var(--ink); }


.c21-cases .c21-card { background: rgba(252,252,253,.94); }


.c21-rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.2,1); }
.c21-rv.is-in { opacity: 1; transform: none; }


.c21-w {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding: .1em .04em .12em;
margin: -.1em -.04em -.12em;
}
.c21-w > span {
display: inline-block;
transform: translateY(115%);
}
.is-in .c21-w > span {
animation: c21-word-up .8s cubic-bezier(.2, .85, .2, 1) forwards;
}
@keyframes c21-word-up { to { transform: translateY(0); } }


.c21-divided > * { padding-left: 30px; padding-right: 30px; }
.c21-divided > *:first-child { padding-left: 0; }
.c21-divided > *:last-child { padding-right: 0; }

.c21-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.c21-panel {
position: relative; overflow: hidden; padding: 28px 26px 30px;
border: 1px solid var(--hair); background: rgba(240,240,242,.55);
transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.85,.2,1);
}
.c21-panel::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform .5s cubic-bezier(.2,.85,.2,1);
}
.c21-panel:hover { background: var(--white); border-color: var(--ink-35); transform: translateY(-4px); }
.c21-panel:hover::after { transform: scaleX(1); }
.c21-panel h3 { margin: 12px 0 10px; font-family: var(--display); font-size: 23px; font-weight: 600; text-transform: uppercase; }
.c21-panel p { margin: 0; font-size: 15.5px; color: var(--ink-50); }

.c21-cases .c21-head { margin-bottom: 22px; }
.c21-track-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.c21-track-count b { color: var(--ink); }
.c21-track-rail { flex: 1; height: 3px; background: rgba(27,27,32,.14); position: relative; }
.c21-track-rail i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width .7s cubic-bezier(.2,.85,.2,1), transform .7s cubic-bezier(.2,.85,.2,1); }
.c21-track-hint { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-35); white-space: nowrap; }

.c21-viewport { overflow: hidden; }
.c21-track { display: flex; gap: 24px; transform: translateX(calc(var(--i, 0) * (-100% - 24px))); transition: transform .85s cubic-bezier(.22,.9,.24,1); }
.c21-card {
flex: 0 0 100%;
position: relative; overflow: hidden;
display: grid; grid-template-columns: 1.12fr 1fr; gap: 46px;
padding: 30px 32px 32px;
border: 1px solid var(--hair); background: rgba(248,248,250,.74);
}

.c21-card::before {
content: ""; position: absolute; top: -40%; bottom: -40%; left: -50%; width: 40%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5) 50%, transparent);
transform: translateX(0) skewX(-16deg); opacity: 0; pointer-events: none;
}
.c21-card.is-current::before { animation: c21-card-sweep 1.1s cubic-bezier(.25,.7,.3,1) .15s; }
@keyframes c21-card-sweep { 0% { opacity: .9; transform: translateX(0) skewX(-16deg); } 100% { opacity: 0; transform: translateX(420%) skewX(-16deg); } }


.c21-card__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c21-card > div { position: relative; z-index: 1; }

.c21-card__no {
display: inline-block; padding: 5px 10px;
background: var(--acid); color: var(--ink);
font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .18em;
}
.c21-card h3 {
margin: 8px 0 18px; font-family: var(--display);
font-size: clamp(24px, 2.8vw, 38px); font-weight: 600;
line-height: 1.02; letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance;
}
.c21-block + .c21-block { margin-top: 16px; }
.c21-block > .c21-meta { display: block; margin-bottom: 7px; }
.c21-block p { margin: 0; font-size: 15px; line-height: 1.52; color: var(--ink-50); }
.c21-list { margin: 9px 0 0; padding: 0; list-style: none; }
.c21-list li { position: relative; padding-left: 21px; margin-top: 7px; font-size: 14.5px; color: var(--ink-50); }
.c21-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--accent); }

.c21-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 4px solid var(--acid); }
.c21-metric { padding: 14px 0 16px; border-bottom: 1px solid var(--hair); }
.c21-metric:nth-child(odd) { padding-right: 22px; border-right: 1px solid var(--hair); }
.c21-metric:nth-child(even) { padding-left: 22px; }
.c21-metric b { display: block; font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--accent); }
.c21-metric span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-35); }

.c21-facts { margin-top: 14px; display: grid; gap: 6px; }
.c21-fact { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px dashed var(--hair); }
.c21-fact span:last-child { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--ink); }

.c21-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.c21-tag {
padding: 6px 10px; border: 1px solid var(--hair);
font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50);
transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.c21-tag:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.c21-note { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; color: var(--ink-35); }

.c21-contact { padding-bottom: 92px; }
.c21-contact__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.c21-contact h2 {
margin: 16px 0 0; font-family: var(--display);
font-size: clamp(34px, 4.6vw, 68px); font-weight: 600;
line-height: .99; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance;
}
.c21-contact__lead { max-width: 46ch; margin: 20px 0 0; font-size: 16.5px; color: var(--ink-50); }
.c21-contact__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.c21-info { display: grid; gap: 18px; }
.c21-info .c21-meta { display: block; margin-bottom: 6px; }
.c21-info p { margin: 0; font-size: 16px; color: var(--ink); }
.c21-info p small { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-35); }
.c21-form { margin-top: 20px; display: grid; gap: 9px; }
.c21-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.c21-field {
padding: 12px 13px; border: 1px solid var(--hair); background: rgba(255,255,255,.45);
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-35);
}
.c21-field--area { min-height: 66px; }

.c21-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 0; border-top: 1px solid var(--ink); }
.c21-foot .c21-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.c21-foot nav { display: flex; gap: 24px; }
.c21-foot nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-35); text-decoration: none; transition: color .25s; }
.c21-foot nav a:hover { color: var(--accent); }



.c21-contact .wpcf7 { margin-top: 20px; }
.c21-contact .wpcf7-form > p:empty { display: none; }


.c21-contact .wpcf7-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.c21-contact .wpcf7-form > label:nth-of-type(n+3),
.c21-contact .wpcf7-form > p,
.c21-contact .wpcf7-form > div,
.c21-contact .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; }

.c21-contact .wpcf7-form label {
display: block;
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-35);
}

.c21-contact .wpcf7-form input[type="text"],
.c21-contact .wpcf7-form input[type="email"],
.c21-contact .wpcf7-form textarea {
width: 100%;
margin-top: 6px;
padding: 12px 13px;
border: 1px solid var(--hair);
border-radius: 0;
background: rgba(255,255,255,.45);
font-family: var(--body); font-size: 15px; color: var(--ink);
transition: border-color .22s, background .22s;
}

.c21-contact .wpcf7-form textarea { height: 92px; min-height: 0; resize: vertical; }
.c21-contact .wpcf7-form input::placeholder,
.c21-contact .wpcf7-form textarea::placeholder { color: var(--ink-35); }
.c21-contact .wpcf7-form input:focus,
.c21-contact .wpcf7-form textarea:focus {
outline: none;
border-color: var(--accent);
background: rgba(255,255,255,.75);
}

.c21-contact .wpcf7-form input[type="submit"] {
justify-self: start;
margin-top: 4px;
padding: 15px 30px;
border: 1px solid var(--accent);
border-radius: 0;
background: var(--accent); color: #fff;
font-family: var(--mono); font-size: 12px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
cursor: pointer;
transition: background .22s, color .22s;
}
.c21-contact .wpcf7-form input[type="submit"]:hover {
background: transparent; color: var(--accent);
}


.c21-contact .wpcf7-not-valid-tip {
margin-top: 5px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: #b4231f;
}
.c21-contact .wpcf7-form .wpcf7-response-output {
margin: 4px 0 0;
padding: 12px 14px;
border: 1px solid var(--hair);
font-size: 14.5px;
}
.c21-contact .wpcf7-spinner { margin: 0 0 0 12px; }
.c21-contact .wpcf7-form.sent .wpcf7-response-output { border-color: var(--accent); }

@media (max-width: 600px) {
.c21-contact .wpcf7-form { grid-template-columns: 1fr; }
}


.c21-contact .wpcf7-form .hidden-fields-container,
.c21-contact .wpcf7-form > .wpcf7-spinner { display: none; }
.c21-contact .wpcf7-form.submitting > .wpcf7-spinner { display: inline-block; }


.c21-contact .wpcf7-form .wpcf7-response-output:empty { display: none; }

.c21-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; opacity: 0; animation: c21-fade .9s ease .15s forwards; }
.c21-hero__eyebrow::before { content: ""; width: 54px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.c21-hero__title {
position: relative; margin: 0; max-width: 15ch;
font-family: var(--display); font-size: clamp(40px, 6.6vw, 96px);
font-weight: 600; line-height: .97; letter-spacing: -.02em; text-transform: uppercase;
}
.c21-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.c21-mask > span { display: block; transform: translateY(112%); animation: c21-line-up 1s cubic-bezier(.2,.85,.2,1) forwards; }
.c21-mask:nth-child(2) > span { animation-delay: .1s; }
.c21-mask:nth-child(3) > span { animation-delay: .2s; }
@keyframes c21-line-up { to { transform: translateY(0); } }
@keyframes c21-fade { to { opacity: 1; } }

.c21-hero__foot { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 34px; opacity: 0; animation: c21-fade .8s ease .6s forwards; }
.c21-hero__lead { max-width: 46ch; margin: 0; font-size: 17.5px; color: var(--ink-50); }
.c21-mark { background: var(--acid); color: var(--ink); padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.c21-hero__cta { display: flex; gap: 12px; }

.c21-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--accent); opacity: 0; animation: c21-fade .8s ease .8s forwards; }
.c21-stat { padding-top: 18px; border-right: 1px solid var(--hair); }
.c21-stat:last-child { border-right: 0; }
.c21-stat b {
display: block; font-family: var(--display); font-size: clamp(26px, 3vw, 42px);
font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.c21-stat span { display: block; margin-top: 5px; max-width: 30ch; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-35); }

.c21-pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.c21-pillar {
position: relative; overflow: hidden;
padding: 28px 30px 32px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--hair);
transition: color .35s ease;
}
.c21-pillar:last-child { border-right: 0; }

.c21-pillar::before {
content: ""; position: absolute; inset: 0; background: var(--accent);
transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.85,.2,1); z-index: -1;
}
.c21-pillar:hover { color: #fff; }
.c21-pillar:hover::before { transform: translateY(0); }
.c21-pillar:hover p, .c21-pillar:hover .c21-idx { color: rgba(255,255,255,.78); }
.c21-pillar .c21-idx { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--ink-35); transition: color .35s ease; }
.c21-pillar h3 { margin: 15px 0 11px; font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; text-transform: uppercase; }
.c21-pillar p { margin: 0; font-size: 15px; color: var(--ink-50); transition: color .35s ease; }

.c21-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.c21-step {
position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
min-height: 168px; padding: 22px 20px 18px;
border: 1px solid var(--hair); border-top: 2px solid var(--accent);
background: rgba(240,240,242,.62); color: var(--ink);
transition: transform .35s cubic-bezier(.2,.85,.2,1), box-shadow .35s ease, background .35s ease;
}
.c21-step:hover { transform: translateY(-6px); background: var(--white); box-shadow: 0 20px 46px rgba(27,27,32,.16); }
.c21-step__n { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink-35); }
.c21-step h3 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; text-transform: uppercase; }
.c21-step p { margin: 0; font-size: 14.5px; color: var(--ink-50); }
.c21-step__go { margin-top: auto; align-self: flex-end; font-family: var(--mono); font-size: 15px; color: var(--accent); transition: transform .3s ease; }
.c21-step:hover .c21-step__go { transform: translateX(6px); }

.c21-steps-rail { position: relative; height: 1px; margin: 0 0 14px; background: var(--hair); }
.c21-steps-rail::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width 1.2s cubic-bezier(.2,.85,.2,1); }
.is-in .c21-steps-rail::after, .c21-steps-rail.is-in::after { width: 100%; }

.c21-perks { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; border-top: 1px solid var(--ink); }
.c21-perk { padding-top: 16px; border-right: 1px solid var(--hair); }
.c21-perk:last-child { border-right: 0; }
.c21-perk b { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; text-transform: uppercase; }
.c21-perk span { display: block; margin-top: 5px; max-width: 34ch; font-size: 14px; color: var(--ink-50); }

.c21-svc-rows { border-top: 1px solid var(--ink); }
.c21-svc {
position: relative; overflow: hidden;
display: grid; grid-template-columns: 124px 1fr 1.05fr; gap: 40px; align-items: baseline;
padding: 21px 22px; border-bottom: 1px solid var(--hair);
transition: background .3s ease, color .3s ease, padding-left .35s cubic-bezier(.2,.85,.2,1);
}

.c21-svc::after {
content: attr(data-ghost);
position: absolute; right: 18px; top: 50%; transform: translate(30px, -50%);
font-family: var(--display); font-size: 78px; font-weight: 700; letter-spacing: -.03em;
color: transparent; -webkit-text-stroke: 1px var(--accent);
opacity: 0; pointer-events: none;
transition: opacity .4s ease, transform .55s cubic-bezier(.2,.85,.2,1);
}
.c21-svc:hover::after { opacity: .3; transform: translate(0, -50%); }
.c21-svc__code { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; color: var(--ink-35); transition: color .3s ease; }
.c21-svc h3 { margin: 0; font-family: var(--display); font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.01em; text-transform: uppercase; }
.c21-svc p { max-width: 48ch; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-50); }
.c21-svc:hover { background: rgba(18,23,247,.07); padding-left: 30px; }
.c21-svc:hover .c21-svc__code { color: var(--accent); }



@media (min-width: 901px) and (max-height: 1000px) {
.c21-screen { padding: 76px 0 32px; }
.c21-head { margin-bottom: 26px; }
.c21-head h2 { font-size: clamp(29px, 3.6vw, 54px); }
.c21-head .c21-lead { margin-top: 13px; font-size: 16px; }
.c21-hero__title { font-size: clamp(36px, 5.2vw, 78px); }
.c21-hero__foot { margin-top: 26px; }
.c21-stats { margin-top: 26px; }
.c21-svc { padding: 19px 22px; }
.c21-svc h3 { font-size: clamp(19px, 2vw, 28px); }
.c21-svc p { font-size: 14.5px; }
.c21-svc::after { font-size: 66px; }
.c21-panel { padding: 24px 24px 26px; }
.c21-pillar { padding: 24px 28px 28px; }
.c21-step { min-height: 152px; padding: 20px 18px 16px; }
.c21-perks { margin-top: 20px; }
.c21-card { padding: 24px 26px 26px; gap: 38px; }
.c21-card h3 { margin-bottom: 15px; font-size: clamp(22px, 2.5vw, 32px); }
.c21-block p, .c21-list li { font-size: 14px; }
.c21-contact { padding-bottom: 78px; }
.c21-contact h2 { font-size: clamp(28px, 3.6vw, 54px); }
.c21-contact__lead { margin-top: 15px; font-size: 15.5px; }
.c21-contact__cta { margin-top: 20px; }
.c21-form { margin-top: 15px; }
.c21-field--area { min-height: 54px; }
.c21-info { gap: 13px; }

.c21-contact .wpcf7 { margin-top: 14px; }
.c21-contact .wpcf7-form { gap: 7px; }
.c21-contact .wpcf7-form label { font-size: 10px; }
.c21-contact .wpcf7-form input[type="text"],
.c21-contact .wpcf7-form input[type="email"],
.c21-contact .wpcf7-form textarea { margin-top: 4px; padding: 10px 12px; font-size: 14.5px; }
.c21-contact .wpcf7-form textarea { height: 58px; }
.c21-contact .wpcf7-form input[type="submit"] { margin-top: 0; padding: 12px 26px; }
}

@media (min-width: 901px) and (max-height: 720px) {
.c21-head { margin-bottom: 22px; }
.c21-head h2 { font-size: clamp(26px, 3.1vw, 44px); }
.c21-head .c21-lead { font-size: 15px; }
.c21-hero__title { font-size: clamp(32px, 4.4vw, 66px); }
.c21-svc { padding: 13px 22px; }
.c21-svc h3 { font-size: clamp(18px, 1.8vw, 24px); }
.c21-svc p { font-size: 13.5px; }
.c21-step { min-height: 130px; }
.c21-card { padding: 20px 22px 22px; }
.c21-block p, .c21-list li { font-size: 13.5px; }
.c21-contact .wpcf7-form textarea { height: 44px; }
.c21-contact .wpcf7-form input[type="text"],
.c21-contact .wpcf7-form input[type="email"],
.c21-contact .wpcf7-form textarea { padding: 8px 11px; }
}


@media (max-width: 900px) {

.c21-header .c21-nav-links, .c21-dots { display: none; }

.c21-nav-wrap { display: contents; }
.c21-screen { height: auto; min-height: 100vh; padding: 100px 0 60px; overflow: visible; }
.c21-wrap { padding: 0 24px; }
.c21-hero__foot, .c21-contact__grid, .c21-card { grid-template-columns: 1fr; gap: 30px; }
.c21-stats, .c21-pillars, .c21-perks { grid-template-columns: 1fr; }
.c21-divided > * { padding-left: 0; padding-right: 0; }
.c21-stat, .c21-perk { border-right: 0; border-bottom: 1px solid var(--hair); padding-bottom: 14px; }
.c21-pillar { border-right: 0; }
.c21-panels, .c21-steps { grid-template-columns: 1fr 1fr; }
.c21-svc { grid-template-columns: 60px 1fr; gap: 6px 16px; }
.c21-svc p { grid-column: 2; }
.c21-svc::after { display: none; }
.c21-track { transform: none; display: grid; gap: 18px; }
.c21-foot { position: static; margin-top: 44px; }
.c21-foot .c21-nav-links { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }


.c21-btn { padding: 14px 20px; font-size: 11.5px; letter-spacing: .1em; }
.c21-header .c21-btn { padding: 10px 14px; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; }
.c21-hero__cta, .c21-contact__cta { display: grid; gap: 10px; }
.c21-hero__cta .c21-btn, .c21-contact__cta .c21-btn { text-align: center; }


.c21-meta { font-size: 11.5px; letter-spacing: .14em; }
.c21-metric span, .c21-fact span, .c21-info p small, .c21-track-hint { font-size: 11.5px; }


.c21-burger { display: flex; }
.c21-nav { gap: 16px; }

.c21-logo { margin-right: auto; }

body.c21-menu-open .c21-header .c21-nav-links {
display: flex; flex-direction: column; gap: 0;
position: absolute; left: 0; right: 0; top: 100%;
max-height: calc(100vh - 64px);
margin: 0; padding: 4px 24px 12px;
background: var(--paper); border-bottom: 1px solid var(--hair);
overflow-y: auto;
}
html.c21-on-dark body.c21-menu-open .c21-header .c21-nav-links { background: #34343c; }
body.c21-menu-open .c21-header .c21-nav-links li { border-bottom: 1px solid var(--hair); }
body.c21-menu-open .c21-header .c21-nav-links a {
display: block; padding: 22px 0; font-size: 15px; letter-spacing: .1em; color: var(--ink);
}
}
@media (max-width: 600px) { .c21-panels, .c21-steps { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
.c21-mask > span, .c21-hero__eyebrow, .c21-hero__foot, .c21-stats { animation: none; opacity: 1; transform: none; }
.c21-rv { opacity: 1; transform: none; transition: none; }
.c21-w > span, .is-in .c21-w > span { animation: none; transform: none; }
.c21-track { transition: none; }
.c21-card.is-current::before { animation: none; }
.c21-step, .c21-panel, .c21-pillar::before { transition: none; }
}