:root
{
--bg: #EEF0F3;
--surface: #F8F9FB;
--surface-2: #E3E6EB;
--ink: #15181E;
--ink-2: #4A515E;
--line: rgba(21, 24, 30, .12);
--accent: #3D57FF;
--accent-ink: #FFFFFF;
--accent-soft: rgba(61, 87, 255, .10);
--dark: #15181E;
--dark-ink: #EEF0F3;
--dark-ink-2: #A6ADBA;
--r-surface: 22px;
--r-input: 12px;
--r-pill: 999px;
--display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--ease: cubic-bezier(0.16,1,0.3,1);
box-sizing: border-box;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
color-scheme: light dark;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) {
--bg: #101217;
--surface: #171A21;
--surface-2: #20242D;
--ink: #E8EBF0;
--ink-2: #A1A8B5;
--line: rgba(232, 235, 240, .12);
--accent: #4A63FF;
--accent-soft: rgba(74, 99, 255, .16);
--dark: #1C2029;
--dark-ink: #E8EBF0;
--dark-ink-2: #A1A8B5;
}
}
:root[data-theme="dark"] {
--bg: #101217;
--surface: #171A21;
--surface-2: #20242D;
--ink: #E8EBF0;
--ink-2: #A1A8B5;
--line: rgba(232, 235, 240, .12);
--accent: #4A63FF;
--accent-soft: rgba(74, 99, 255, .16);
--dark: #1C2029;
--dark-ink: #E8EBF0;
--dark-ink-2: #A1A8B5;
}
*,
*::before,
*::after {
box-sizing: inherit
}
.ph {
display: inline-grid;
place-items: center;
line-height: 0;
font-style: normal
}
.ph svg {
display: block
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px)
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased
}
img {
max-width: 100%
}
a {
color: inherit
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 6px
}
.wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 28px
}
h1,
h2,
h3 {
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0
}
h2 {
font-size: clamp(2rem, 4.2vw, 3.25rem);
max-width: 18ch
}
p {
margin: 0
}
.lead {
color: var(--ink-2);
max-width: 56ch;
font-size: 1.1rem
}
section {
padding: 112px 0
}

/* buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 52px;
padding: 0 26px;
border-radius: var(--r-pill);
font: 600 16px / 1 var(--body);
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s
}
.btn:active {
transform: scale(0.98)
}
.btn-primary {
background: var(--accent);
color: var(--accent-ink)
}
.btn-primary:hover {
background: color-mix(in srgb,var(--accent) 88%,#000)
}
.btn-ghost {
border-color: var(--line);
color: var(--ink);
background: transparent
}
.btn-ghost:hover {
border-color: var(--ink)
}

/* nav */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
padding-top: env(safe-area-inset-top, 0px);
background: color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom: 1px solid var(--line);
transition: background 0.35s, border-color 0.35s, color 0.35s
}
.nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0
}
.logo-img {
display: block;
height: 32px;
width: auto
}
.logo-on-dark {
display: none
}
.nav.over .logo-on-light {
display: none
}
.nav.over .logo-on-dark {
display: block
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-on-light {
display: none
}
:root:not([data-theme="light"]) .logo-on-dark {
display: block
}
}
:root[data-theme="dark"] .logo-on-light {
display: none
}
:root[data-theme="dark"] .logo-on-dark {
display: block
}
@media(max-width:480px){.logo-img {
height: 28px
}
}
.nav-links {
display: flex;
gap: 34px;
list-style: none;
margin: 0;
padding: 0
}
.nav-links a {
text-decoration: none;
color: var(--ink-2);
font-weight: 500;
font-size: 15px;
transition: color 0.2s
}
.nav-links a:hover {
color: var(--ink)
}
.nav .btn {
height: 42px;
padding: 0 20px;
font-size: 15px
}
.nav.over {
background: transparent;
border-color: transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
color: #fff
}
.nav.over .nav-links a {
color: rgba(255, 255, 255, .78)
}
.nav.over .nav-links a:hover {
color: #fff
}

/* hero */
.hero {
position: relative;
isolation: isolate;
min-height: 100 dvh;
display: grid;
place-items: center;
padding: 140px 0 96px;
background: #161A22;
color: #fff;
overflow: hidden;
text-align: center
}
.hero-media {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,rgba(12,14,20,.62) 0%,rgba(12,14,20,.34) 42%,rgba(12,14,20,.80) 100%)
}
.hero h1 {
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(2.6rem, 6.4vw, 5.6rem);
font-weight: 400;
letter-spacing: -0.045em;
line-height: .98;
max-width: none;
margin: 0 auto;
text-wrap: balance
}
.hero h1 span {
display: block
}
.hero .lead {
color: rgba(255, 255, 255, .86);
margin: 28px auto 38px;
max-width: 46ch;
font-size: clamp(1.05rem, 1.6vw, 1.25rem)
}
.hero-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center
}
.hero .btn-ghost {
color: #fff;
border-color: rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .08);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px)
}
.hero .btn-ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, .16)
}

/* demo */
.tasks .wrap {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 64px;
align-items: center
}
.tasks .lead {
margin-top: 20px
}
.demo {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-surface);
padding: 28px
}
.demo-q {
font: 700 1.25rem / 1.2 var(--display);
letter-spacing: -0.02em;
margin-bottom: 18px
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 26px
}
.tab {
font: 500 14px / 1 var(--body);
padding: 11px 16px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s
}
.tab:hover {
color: var(--ink);
border-color: var(--ink-2)
}
.tab[aria-selected="true"] {
background: var(--ink);
color: var(--bg);
border-color: var(--ink)
}
.flow {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px
}
.flow li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: start;
padding: 16px;
border-radius: 16px;
background: var(--bg)
}
.flow li:last-child {
background: var(--accent-soft)
}
.flow i {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 22px;
background: var(--surface);
color: var(--ink)
}
.flow li:last-child i {
background: var(--accent);
color: #fff
}
.flow b {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
margin-bottom: 2px
}
.flow span {
font-size: 15.5px;
line-height: 1.45
}
.flow.swap li {
animation: step 0.5s var(--ease) both
}
.flow.swap li:nth-child(2) {
animation-delay: 0.07s
}
.flow.swap li:nth-child(3) {
animation-delay: 0.14s
}
@keyframes step {
from {
opacity: 0;
transform: translateY(10px)
}
to {
opacity: 1;
transform: none
}
}

@media(prefers-reduced-motion:no-preference) {
.hero h1 span,
.hero .lead,
.hero-ctas {
animation: rise 1s var(--ease) both
}
.hero h1 span:nth-child(2) {
animation-delay: 0.1s
}
.hero .lead {
animation-delay: 0.22s
}
.hero-ctas {
animation-delay: 0.32s
}
.hero-media {
animation: zoom 14s ease-out both
}
}
@keyframes zoom {
from {
transform: scale(1.08)
}
to {
transform: scale(1)
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(22px)
}
to {
opacity: 1;
transform: none
}
}
@media(prefers-reduced-motion:reduce) {
* {
animation: none !important;
transition: none !important
}
html {
scroll-behavior: auto
}
}

/* services bento */
.services h2 {
margin-bottom: 48px
}
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px
}
.cell {
position: relative;
border-radius: var(--r-surface);
background: var(--surface);
border: 1px solid var(--line);
overflow: hidden;
display: flex;
flex-direction: column
}
.cell-media {
margin: 0;
background: var(--surface-2);
overflow: hidden
}
.cell-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease)
}
.cell:hover .cell-media img {
transform: scale(1.04)
}
.cell-body {
padding: 28px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1
}
.cell .ph {
align-self: flex-start;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
font-size: 22px
}
.cell h3 {
font-size: 1.4rem
}
.cell p {
color: var(--ink-2);
font-size: 15.5px;
max-width: 46ch
}
.cell ul {
margin: auto 0 0;
padding: 8px 0 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px
}
.cell li {
font-size: 13px;
padding: 6px 11px;
border-radius: var(--r-pill);
border: 1px solid currentColor;
opacity: .85
}
.cell.no-img .cell-media {
display: none
}

.c-agents {
grid-column: span 4;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--accent);
color: #fff;
border-color: transparent;
min-height: 440px
}
.c-agents .cell-media {
order: 2;
height: 100%;
background: color-mix(in srgb,#fff 12%,var(--accent))
}
.c-agents .cell-body {
padding: 36px;
justify-content: flex-end
}
.c-agents .ph {
background: rgba(255, 255, 255, .16);
color: #fff;
margin-bottom: auto
}
.c-agents h3 {
font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1.02
}
.c-agents p {
color: rgba(255, 255, 255, .88)
}
.c-agents.no-img {
grid-template-columns: 1fr
}

.c-auto {
grid-column: span 2;
background: var(--dark);
color: var(--dark-ink);
border-color: transparent
}
.c-auto .cell-media {
height: 200px;
background: #232833
}
.c-auto .cell-body {
background-image: radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px);
background-size: 18px 18px
}
.c-auto .ph {
background: rgba(255, 255, 255, .1);
color: #fff
}
.c-auto p {
color: var(--dark-ink-2)
}

.c-web,
.c-apps,
.c-seo,
.c-brand {
grid-column: span 3
}
.c-web .cell-media,
.c-apps .cell-media,
.c-seo .cell-media,
.c-brand .cell-media {
aspect-ratio: 16 / 7
}
.c-web .cell-body,
.c-apps .cell-body,
.c-seo .cell-body,
.c-brand .cell-body {
flex-direction: row;
align-items: flex-start;
gap: 18px
}
.c-web .cell-body > div,
.c-apps .cell-body>div,
.c-seo .cell-body>div,
.c-brand .cell-body > div {
display: grid;
gap: 6px
}

/* products */
.products {
background: var(--surface);
border-block: 1px solid var(--line)
}
.products h2 {
margin-bottom: 16px
}
.products > .wrap > .lead {
margin-bottom: 56px
}
.prod {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding: 48px 0;
border-top: 1px solid var(--line);
align-items: start
}
.prod-name {
font: 800 clamp(2.6rem,5.5vw,4.6rem) / 1 var(--display);
letter-spacing: -0.045em
}
.prod-kind {
margin-top: 14px;
color: var(--ink-2);
font-weight: 500
}
.prod-body p {
font-size: 1.08rem;
margin-bottom: 26px;
max-width: 48ch
}
.facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 30px
}
.facts div {
padding-left: 14px;
border-left: 2px solid var(--accent)
}
.facts strong {
display: block;
font: 700 1.35rem / 1.15 var(--display);
letter-spacing: -0.02em
}
.facts span {
font-size: 14px;
color: var(--ink-2)
}

/* process */
.process h2 {
margin-bottom: 56px
}
.steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
counter-reset: s;
position: relative
}
.steps::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 22px;
height: 1px;
background: var(--line)
}
.steps li {
position: relative;
counter-increment: s
}
.steps li::before {
content: counter(s);
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--ink);
font: 700 16px / 1 var(--display);
margin-bottom: 22px;
position: relative
}
.steps li:first-child::before {
background: var(--accent);
border-color: var(--accent);
color: #fff
}
.steps h3 {
font-size: 1.3rem;
margin-bottom: 8px
}
.steps p {
color: var(--ink-2);
font-size: 15.5px
}

/* manifesto */
.manifesto {
background: var(--dark);
color: var(--dark-ink)
}
.manifesto blockquote {
margin: 0 0 72px;
font: 700 clamp(1.9rem,4.2vw,3.4rem) / 1.1 var(--display);
letter-spacing: -0.035em;
max-width: 22ch
}
.reasons {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 48px
}
.reasons h3 {
font-size: 1.25rem;
margin-bottom: 10px
}
.reasons p {
color: var(--dark-ink-2);
font-size: 15.5px
}
.audience {
margin-top: 88px;
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .14);
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px
}
.audience > p {
color: var(--dark-ink-2);
font-weight: 500
}
.aud-list {
display: grid;
gap: 26px
}
.aud-list div {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 32px;
align-items: baseline
}
.aud-list strong {
font: 700 clamp(1.5rem,2.6vw,2.1rem) / 1.1 var(--display);
letter-spacing: -0.03em
}
.aud-list span {
color: var(--dark-ink-2)
}

/* faq */
.faq .wrap {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 64px;
align-items: start
}
.faq h2 {
position: sticky;
top: 110px
}
details {
border-bottom: 1px solid var(--line)
}
summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
padding: 26px 0;
font: 600 1.12rem / 1.35 var(--body)
}
summary::-webkit-details-marker {
display: none
}
summary i {
font-size: 20px;
transition: transform 0.3s var(--ease);
flex: none
}
details[open] summary i {
transform: rotate(45deg)
}
details p {
color: var(--ink-2);
padding: 0 0 26px;
max-width: 62ch
}

/* contact */
.contact .wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start
}
.contact .lead {
margin: 22px 0 30px
}
.contact-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 14px;
color: var(--ink-2)
}
.contact-list li {
display: flex;
gap: 12px;
align-items: center
}
.contact-list i {
font-size: 20px;
color: var(--accent)
}
form {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-surface);
padding: 32px;
display: grid;
gap: 20px
}
.field {
display: grid;
gap: 8px
}
.row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}
label {
font-size: 14px;
font-weight: 600
}
input,
select,
textarea {
width: 100%;
font: 16px / 1.4 var(--body);
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-input);
padding: 13px 14px
}
input::placeholder,
textarea::placeholder {
color: var(--ink-2)
}
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--accent);
outline-offset: 0;
border-color: transparent
}
textarea {
min-height: 110px;
resize: vertical
}
.err {
font-size: 13.5px;
color: #C2261D;
min-height: 0
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .err {
color: #FF8A80
}
}
[aria-invalid="true"] {
border-color: #C2261D
}
.form-note {
font-size: 14px;
color: var(--ink-2)
}
.form-ok {
display: none;
padding: 14px 16px;
border-radius: var(--r-input);
background: var(--accent-soft);
font-size: 15px
}
.form-ok.show {
display: block
}
form .btn {
justify-content: center;
width: 100%
}

/* footer */
footer {
border-top: 1px solid var(--line);
padding: 48px 0 40px;
font-size: 15px;
color: var(--ink-2)
}
footer .wrap {
display: flex;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
align-items: center
}
footer nav {
display: flex;
gap: 26px;
flex-wrap: wrap
}
footer a {
text-decoration: none
}
footer a:hover {
color: var(--ink)
}

/* responsive */
@media(max-width:1024px) {
.tasks .wrap,
.contact .wrap,
.faq .wrap {
grid-template-columns: 1fr;
gap: 48px
}
.faq h2 {
position: static
}
.c-agents {
grid-column: span 6
}
.c-auto {
grid-column: span 6;
display: grid;
grid-template-columns: 1fr 1fr
}
.c-auto .cell-media {
height: 100%
}
.steps {
grid-template-columns: 1fr 1fr;
row-gap: 44px
}
.steps::before {
display: none
}
.reasons {
grid-template-columns: 1fr
}
}
@media(max-width:767px) {
body {
font-size: 16px
}
.wrap {
padding: 0 20px
}
section {
padding: 80px 0
}
.hero {
padding: 120px 0 72px
}
.nav-links {
display: none
}
.demo,
form {
padding: 22px
}
.bento {
grid-template-columns: 1fr
}
.cell,
.c-agents,
.c-auto,
.c-web,
.c-apps,
.c-seo,
.c-brand {
grid-column: auto
}
.c-agents,
.c-auto {
grid-template-columns: 1fr;
min-height: 0
}
.c-agents .cell-media {
order: 0;
aspect-ratio: 4 / 3;
height: auto
}
.c-auto .cell-media {
height: 200px
}
.c-agents .cell-body {
padding: 28px
}
.prod {
grid-template-columns: 1fr;
gap: 24px
}
.facts {
grid-template-columns: 1fr 1fr
}
.steps {
grid-template-columns: 1fr
}
.audience {
grid-template-columns: 1fr;
gap: 24px
}
.aud-list div {
grid-template-columns: 1fr;
gap: 6px
}
.row2 {
grid-template-columns: 1fr
}
footer .wrap {
flex-direction: column;
align-items: flex-start
}
}

.opt {
font-weight: 400;
color: var(--ink-2);
}