:root{--bg:#121212;--card:#1e1e1e;--acc:#b1f034;
--p:80px;--s:110px;--gg:0px;--hm:50px;--cg:50px;
--h1:60px;--h2:40px;--hw:400;--lead:25px;--t:30px;--d:18px;--nav:20px;--btn:22px;--lf:23px;--lw:68px;--fs:18px;--fl:34px;
--i:.5em}
@media(max-width:900px){:root{--p:16px;--s:60px;--gg:22px;--hm:23px;--cg:24px;
--h1:30px;--h2:22px;--hw:500;--lead:18px;--t:25px;--d:16px;--nav:16px;--btn:18px;--lf:16px;--lw:34px;--fs:13px;--fl:24px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#fff;font:300 var(--d)/normal "Albert Sans",sans-serif}
a{color:inherit;text-decoration:none}
.lk a{text-decoration:underline}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,figure,blockquote{margin:0;padding:0;font-weight:400}
ul{list-style:none}
b{font-weight:500}
.w{max-width:1440px;margin-inline:auto;padding-inline:var(--p)}
section,footer{margin-top:var(--s)}
h2{font-size:var(--h2);font-weight:var(--hw)}
:is(section,.cs)>h2{margin-bottom:var(--hm)}
.g{display:grid;grid-template-columns:51% 1fr;gap:var(--gg)}
.g>h2{margin:0}
.lead{font-size:var(--lead)}

/* header / footer */
header{display:flex;align-items:center;padding-block:16px}
nav{display:flex;gap:118px;margin-left:auto;font:400 var(--nav)/1 "Albert Sans",sans-serif}
.logo{display:flex;align-items:center;gap:13px;font:400 var(--lf)/1.07 "Fira Mono",monospace}
.logo img{width:var(--lw);flex:none;transform:rotate(-90deg) scaleY(-1);margin:calc(var(--lw)*.09) calc(var(--lw)*-.09)}
footer{display:grid;grid-template-columns:51% 218px 1fr;align-items:start;padding-block:14px 79px}
footer h4{margin:29px 0 4px;font:500 calc(var(--fs)*1.22)/35px "Albert Sans",sans-serif}
footer li{font-size:var(--fs);line-height:var(--fl)}
.u a{font-weight:400}

/* hero */
.hero{margin-top:0;position:relative;isolation:isolate;padding-block:88px 145px;align-items:start}
.hero>picture{position:absolute;z-index:-1;inset:37px auto auto 0;width:97.5%}
.hero h1{font-size:var(--h1);line-height:1.06;max-width:540px}
.hero>div{padding-top:19px}
.btn{display:inline-block;margin-top:64px;padding:14px 34px;background:var(--acc);color:var(--bg);font:500 var(--btn)/1.2 "Albert Sans",sans-serif}

/* chaos */
.ul{display:grid;gap:46px;max-width:546px;font-size:var(--lead)}
.ul p:nth-child(2){font-weight:400}
.ul img{margin-top:.5em}
.ul p:nth-child(1) img{width:76%}.ul p:nth-child(2) img{width:32%}.ul p:nth-child(3) img{width:92%}

/* cases */
.cs{display:grid;gap:var(--cg)}
.c{display:grid;grid-template-columns:51% 1fr;align-items:start}
.c.r{grid-template-columns:49% 1fr}
.c .s{width:100%;aspect-ratio:5/3;object-fit:cover;background:#373737}
.c.r .s{order:-1}
.c.r .t{padding-left:63px}
.t{padding:27px 20px 0 0}
.t h3{display:flex;align-items:center;gap:24px;margin-left:-4px;font:400 var(--t)/1.2 "Albert Sans",sans-serif}
.t p{margin-top:8px}

/* what you get */
.wg{display:grid;gap:40px;max-width:581px;font-size:22px}
.wg div{display:flex;align-items:center;gap:29px}
.wg img{width:100px;flex:none;margin-left:-129px}
.wg b{display:block;margin-bottom:.5em;font-size:25px}

/* logos */
.lg{display:flex;justify-content:space-between;align-items:center;min-height:226px;padding-inline:70px}
.lg img{width:170px}

/* reviews */
.rv{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
blockquote{position:relative;min-height:268px;padding:31px 32px;border-radius:22px;background:var(--card);font-weight:400;font-size:20px}
blockquote>img{position:absolute;left:30px;top:26px;height:60px;width:auto;mix-blend-mode:color-dodge}
blockquote div{display:flex;align-items:center;gap:12px;font-weight:500}
blockquote b{font:600 25px/1.15 "Albert Sans",sans-serif;margin-right:auto}
blockquote div img{width:89px}
blockquote p{margin-top:16px}
.lk{margin-top:36px;font-size:15px;font-weight:400}

/* task */
.card{display:grid;grid-template-columns:1fr minmax(0,431px);grid-auto-flow:dense;gap:24px;padding:33px clamp(24px,10vw,146px) 33px 45px;border-radius:31px;background:var(--card);font-weight:400}
.card img{grid-column:2;grid-row:1;align-self:center;margin-top:27px;width:100%}
.card div{grid-column:1;grid-row:1;display:grid;gap:16px}
.card h2{font-weight:400}
.card p{font-size:var(--d)}
.card .sm{font-size:16px}

@media(max-width:900px){
header{padding-block:22px}
nav{gap:30px;margin-left:11px;font-size:var(--nav)}
.logo{gap:4px}
.g,.c,.c.r,footer{grid-template-columns:1fr}
footer{grid-template-columns:1fr 1fr;padding-block:10px 28px}
footer .logo{grid-column:1/-1}
footer h4{margin-top:10px;font-size:18px}
footer li{font-weight:400}
.hero{padding-block:32px 0}
.hero>picture{inset:23px 10px auto auto;width:185px}
.hero>div{padding-top:0}
.btn{margin-top:24px}
.ul{gap:24px}
.ul img{margin-top:.4em;max-width:280px}
.c{gap:20px}
.c .s,.c.r .s{order:-1}
.t,.c.r .t{padding:0}
.t h3{margin:0;gap:16px}
.wg{gap:18px}
.wg div{gap:20px}
.wg img{width:56px;margin:0}
.wg,.wg b{font-size:16px}
.lg{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0;padding:0}
.lg img{width:150px}
.rv{grid-template-columns:1fr;gap:20px}
blockquote{min-height:208px;padding-top:40px;font-size:16px}
blockquote>img{top:31px}
blockquote b{font-size:20px}
blockquote p{margin-top:13px}
.lk{margin-top:17px;font-size:16px}
.card{grid-template-columns:1fr;gap:35px;padding:32px 35px}
.card img,.card div{grid-column:1;grid-row:auto}
.card img{margin:0}
.card h2{font-weight:500}
.card .sm{font-size:var(--d)}
}