-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1152 lines (1104 loc) · 55.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width" name="viewport">
<title>Metrix</title>
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="website" property="og:type">
<meta content="" property="og:site_name">
<meta content="" property="og:title">
<meta content="" property="og:description">
<meta content="" property="og:url">
<meta content="en_EN" property="og:locale">
<meta content="" property="og:image">
<meta content="" property="og:image:width">
<meta content="" property="og:image:height">
<meta content="" property="og:see_also">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href="/favicon/apple-touch-icon.png" rel="apple-touch-icon"
sizes="180x180">
<link href="/favicon/favicon-32x32.png" rel="icon" sizes="32x32"
type="image/png">
<link href="/favicon/favicon-16x16.png" rel="icon" sizes="16x16"
type="image/png">
<link href="/favicon/manifest.json" rel="manifest">
<link href="/favicon/safari-pinned-tab.svg" rel="mask-icon"
color="#5bbad5">
<link href="/favicon.ico" rel="shortcut icon">
<meta content="/favicon/browserconfig.xml" name=
"msapplication-config">
<meta content="#ffffff" name="theme-color">
<link href="/fonts/8659.ttf" rel="preload" as="font" crossorigin= "">
<link rel="stylesheet" href="/dist/css/main.css">
<style>
@font-face {
font-family: Bebas;
src: local("Bebas Regular"), local("Bebas-regular"), url('fonts/BebasNeue\ Regular.otf') format("opentype");
font-weight: 400;
font-style: normal
}
@font-face {
font-family: Bebas;
src: local("Bebas Book"), local("Bebas-book"), url('fonts/BebasNeue\ Book.otf') format("opentype");
font-weight: 500;
font-style: normal
}
@font-face {
font-family: Bebas;
src: local("Bebas Light"), local("Bebas-light"), url('fonts/BebasNeue\ Light.otf') format("opentype");
font-weight: 300;
font-weight: lighter;
font-style: normal
}
@font-face {
font-family: Bebas;
src: local("Bebas Bold"), local("Bebas-bold"), url('fonts/BebasNeue\ Bold.otf') format("opentype");
font-weight: 700;
font-style: normal
}
@font-face {
font-family: DinPro;
src: local("Din Pro Light"), local("DinProlight"), url(fonts/10422.otf) format("opentype");
font-weight: 300;
font-weight: lighter;
font-style: normal
}
@font-face {
font-family: DinPro;
src: local("Din Pro Bold"), local("DinProbold"), url(fonts/8659.ttf) format("truetype");
font-weight: 700;
font-style: normal
}
@font-face {
font-family: DinPro;
src: local("Din Pro Medium"), local("DinProMedium"), url(fonts/10421.otf) format("opentype");
font-weight: 500;
font-style: normal
}
svg:not(:root) {
overflow: hidden
}
button {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button {
text-transform: none
}
button {
-webkit-appearance: button
}
button::-moz-focus-inner {
border: 0;
padding: 0
}
*,
:after,
:before {
box-sizing: border-box;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0
}
html {
font-family: Bebas, sans-serif;
font-size: 6.25px;
font-size: .625rem;
font-weight: 400;
text-rendering: optimizeLegibility
}
body {
margin: 0;
width: 100%;
min-width: 320px
}
header,
main,
nav,
section {
display: block
}
a {
background-color: transparent;
color: inherit;
text-decoration: none
}
section {
position: relative;
width: 100%
}
.h {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden
}
.h__back {
background-size: cover;
background-position: top;
background-repeat: no-repeat;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute
}
.h__back canvas {
display: block
}
.h__back:after {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0) 0, #fff 100%)
}
.h__nav {
padding-top: 30px;
padding-left: 35px;
width: 100%;
height: auto;
z-index: 1
}
.h__nav,
.h__ul {
position: relative
}
.h__ul {
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 22px;
font-size: 2.2rem;
font-weight: 400;
color: #000;
letter-spacing: 2.29px;
letter-spacing: .229rem
}
.h__li:after {
content: "";
width: 6px;
height: 6px;
background-color: #000;
margin-right: 27px;
margin-left: 27px;
display: inline-block;
vertical-align: middle
}
.h__logo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
width: 160px;
height: 28px
}
.h__logo:after {
content: none
}
.h__f {
position: relative;
z-index: 1;
height: calc(100% - 50px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.h__f--c svg {
margin-bottom: 15px
}
.h__f--c__h1 {
font-size: 24px;
font-size: 2.4rem;
font-family: DinPro;
font-weight: 700;
color: #000;
letter-spacing: 5.42px;
letter-spacing: .542rem;
text-align: center
}
.h__sc {
position: absolute;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
bottom: 3%;
border: none;
width: 60px;
height: 60px;
display: block;
z-index: 10;
background-color: transparent
}
.h__sc polyline {
position: relative
}
.h__sc polyline:first-of-type {
-webkit-animation: a 2s infinite ease-in-out;
animation: a 2s infinite ease-in-out;
-webkit-transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px)
}
.h__sc polyline:nth-of-type(2) {
-webkit-animation: b 2s infinite ease-in-out;
animation: b 2s infinite ease-in-out;
-webkit-transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px)
}
@-webkit-keyframes a {
0% {
-webkit-transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px)
}
50% {
-webkit-transform: translate(30px, 35px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 35px) rotate(-315deg) translate(-30px, -30px)
}
to {
-webkit-transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px)
}
}
@keyframes a {
0% {
-webkit-transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px)
}
50% {
-webkit-transform: translate(30px, 35px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 35px) rotate(-315deg) translate(-30px, -30px)
}
to {
-webkit-transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px);
transform: translate(30px, 30px) rotate(-315deg) translate(-30px, -30px)
}
}
@-webkit-keyframes b {
0% {
-webkit-transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px)
}
50% {
-webkit-transform: translate(30px, 23px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 23px) rotate(-315deg) translate(-30px, -18px)
}
to {
-webkit-transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px)
}
}
@keyframes b {
0% {
-webkit-transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px)
}
50% {
-webkit-transform: translate(30px, 23px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 23px) rotate(-315deg) translate(-30px, -18px)
}
to {
-webkit-transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px);
transform: translate(30px, 18px) rotate(-315deg) translate(-30px, -18px)
}
}
.m {
width: 100%;
height: auto;
position: relative
}
.m__f {
padding-bottom: 40px;
min-height: 534px
}
.m__f--svg {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: -1
}
.m__f {
padding-top: 75px;
padding-bottom: 100px;
position: relative;
z-index: 2
}
</style>
</head>
<body>
<header class="h">
<nav class="h__nav">
<ul class="h__ul">
<li class="h__li h__logo">
<a class="h__a"><svg height="28px" width="160px" xmlns=
"http://www.w3.org/2000/svg" version="1.1" viewbox=
"0 0 584 102" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon points="0 102 584 102 584 0 0 0" id="pat-1">
</polygon>
</defs>
<g fill="none" fill-rule="evenodd" stroke="none"
stroke-width="1">
<g transform="translate(-346.000000, -346.000000)">
<g transform="translate(346.000000, 346.000000)">
<g>
<path d=
"M42.3762376,102 L18.2791423,21.9747368 L17.6587167,21.9747368 C18.5249713,38.2529825 18.9580986,49.1150877 18.9580986,54.5550877 L18.9580986,102 L0,102 L0,0 L28.8849078,0 L52.5722882,78.0031579 L52.9820032,78.0031579 L78.1092391,0 L107,0 L107,102 L87.2166183,102 L87.2166183,53.72 C87.2166183,51.4414035 87.2517368,48.8108772 87.3219736,45.834386 C87.3863574,42.8578947 87.6907171,34.954386 88.2409059,22.1119298 L87.6204803,22.1119298 L61.8142881,102 L42.3762376,102 Z"
fill="#1D1D1B"></path>
<path d=
"M362.161408,45.2796491 L373.836176,45.2796491 C380.63114,45.2796491 385.647317,44.1403509 388.884708,41.8617544 C392.122099,39.5831579 393.740795,35.9982456 393.740795,31.1189474 C393.740795,26.2814035 392.086524,22.8396491 388.777981,20.7936842 C385.481297,18.7477193 380.352463,17.7217544 373.421126,17.7217544 L362.161408,17.7217544 L362.161408,45.2796491 Z M362.161408,62.8642105 L362.161408,102 L344,102 L344,0 L373.539712,0 C387.313447,0 397.511822,2.52315789 404.122978,7.56947368 C410.734134,12.6157895 414.042676,20.2807018 414.042676,30.5582456 C414.042676,36.5589474 412.400264,41.8975439 409.115438,46.5680702 C405.830613,51.2445614 401.18798,54.9070175 395.175683,57.5614035 C410.437669,80.4905263 420.375156,95.3014035 425,102 L401.140546,102 L376.937193,62.8642105 L362.161408,62.8642105 Z"
fill="#1D1D1B"></path>
<polygon points=
"584 102 559.638127 102 536.246965 63.4189474 512.844036 102 490 102 523.374765 49.3954386 492.135561 0 515.667918 0 537.341219 36.6961404 558.608587 0 581.593816 0 550.00751 50.5824561"
fill="#1D1D1B"></polygon>
<mask fill="white" id="mas2">
<use xlink:href="#pat-1"></use>
</mask>
<g></g>
<polygon points="136 18 154 18 154 0 136 0" fill=
"#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="162 18 212 18 212 0 162 0" fill=
"#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="136 102 154 102 154 84 136 84"
fill="#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="162 102 212 102 212 84 162 84"
fill="#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="136 60 154 60 154 42 136 42"
fill="#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="162 60 212 60 212 42 162 42"
fill="#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="269 18 287 18 287 0 269 0" fill=
"#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="269 102 287 102 287 0 269 0"
fill="#1D1D1B" mask="url(#mas-2)"></polygon>
<polygon points="240 18 316 18 316 0 240 0" fill=
"#1D1D1B" mask="url(#mas-2)"></polygon>
</g>
<polygon points="448 18 466 18 466 0 448 0" fill=
"#1D1D1B"></polygon>
<polygon points="448 102 466 102 466 53 448 53"
fill="#1D1D1B"></polygon>
<polygon points="448 60 466 60 466 42 448 42" fill=
"#1D1D1B"></polygon>
</g>
</g>
</g></svg></a>
</li>
</ul>
</nav>
<div class="h__f">
<div class="h__f--c svg-container-parent">
<div class="h__f--svg-container"><img src=
"/svg/logo.svg"></div>
<h1 class="h__f--c__h1">TARGET REAL PEOPLE. NOT
NUMBERS</h1>
</div>
</div>
<div class="h__back">
<canvas id="matrix"></canvas>
</div><button class="h__sc" id="scroll__bottom"><svg height=
"60" width="60" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#000" stroke-width=
"4">
<path d="M15.858 30L30 44.142 44.142 30"></path>
<path d="M15.858 18L30 32.142 44.142 18"></path>
</g></svg></button>
</header>
<main class="m" id="m">
<section class="m__f">
<div class="m__f--polygon-full">
<svg xmlns="http://www.w3.org/2000/svg" class="m__f--svg"
preserveaspectratio="none" version="1.1" viewbox=
"0 0 1280 534">
<polygon points="0 851 1280 851 1280 1335 640 1385 0 1335"
fill="#000" fill-rule="evenodd" stroke="none" stroke-width=
"1" transform="translate(0 -851)"></polygon></svg>
</div>
<div class="m__f--polygon-min">
<svg xmlns="http://www.w3.org/2000/svg" class="m__f--svg"
preserveaspectratio="none" version="1.1" viewbox=
"0 0 1280 534">
<polygon points="0 851 1280 851 1280 1335 640 1350 0 1335"
fill="#000" fill-rule="evenodd" stroke="none" stroke-width=
"1" transform="translate(0 -851)"></polygon></svg>
</div>
<div class="container container-face">
<div class="m__f--face"><img alt="face" height="456" src=
"/images/face.png" width="456"></div>
<div class="m__f--txt-container">
<p class="m__f--txt">We put <b>math, psychology</b> and
<b>digital marketing</b> together to create an
<b>AI-powered algorithm</b> that understands users'
<b>personality, predicts preferences</b> and makes each
contact <b>more effective</b></p>
</div>
</div>
</section>
<section class="clearfix m__ott">
<h1 class="m__ott--h1">Our recipe for effective digital
communication:</h1>
<div class="m__ott--b1">
<div class="container numeric-container">
<div class="numeric__svg--mobile">
<img src="../images/1icon.png" />
</div>
<div class="m__ott--b1__txt">
<svg xmlns="http://www.w3.org/2000/svg">
<text fill="#4A90E2" fill-rule="evenodd" font-family=
"DINPro-Bold, DINPro" font-size="190" font-weight=
"bold" letter-spacing="14.487" opacity=".2"
transform="translate(-109 -1552)">
<tspan x="90.171" y="1688">
1
</tspan>
</text></svg>
<h2>Understand<br>
your audience</h2>
<p>Сompanies collect and store tonnes of Data about
users' behavior. But data alone doesn't make your
life easier - a piece of good interpretation
does!</p><q>Our neural networks derive personality
traits from the user's digital behaviour</q>
</div>
<div class="m__ott--b1__icon">
<svg height="227" width="360" xmlns=
"http://www.w3.org/2000/svg">
<defs>
<path d="M54 31.05V62.1H0V0h54z" id="a"></path>
<path d="M53 35.5V71H0V0h53z" id="b"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<g fill="#000">
<path d=
"M9 92c-.6 0-1 .43-1 1.077v4.846C8 98.57 8.4 99 9 99s1-.43 1-1.077v-4.846C10 92.43 9.6 92 9 92M16 92c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846C17 92.43 16.5 92 16 92M24 92c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846C25 92.43 24.5 92 24 92M59.15 97h7.7c.69 0 1.15-.4 1.15-1s-.46-1-1.15-1h-7.7c-.69 0-1.15.4-1.15 1s.575 1 1.15 1M9 115c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846c0-.646-.4-1.077-1-1.077M16 115c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846c0-.646-.5-1.077-1-1.077M24 115c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846c0-.646-.5-1.077-1-1.077M59.15 119h7.7c.69 0 1.15-.4 1.15-1s-.46-1-1.15-1h-7.7c-.69 0-1.15.4-1.15 1s.575 1 1.15 1M9 137c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846c0-.539-.4-1.077-1-1.077M16 137c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846c0-.539-.5-1.077-1-1.077M24 137c-.6 0-1 .43-1 1.077v4.846c0 .646.4 1.077 1 1.077s1-.43 1-1.077v-4.846c0-.539-.5-1.077-1-1.077M59.15 142h7.7c.69 0 1.15-.399 1.15-1 0-.6-.46-1-1.15-1h-7.7c-.69 0-1.15.4-1.15 1 0 .601.575 1 1.15 1">
</path>
<path d=
"M41.63 158.758h-7.26v-4.26h7.146v4.26h.114zM2.27 134.428h71.463v12.781H2.269v-12.782zm0-22.537h71.463v12.782H2.269V111.89zm0-22.648h71.463v12.781H2.269V89.243zm72.597 67.048H43.899v-2.915c0-.673-.454-1.121-1.135-1.121h-3.517v-2.691h35.619c.68 0 1.134-.45 1.134-1.121v-15.137c0-.673-.455-1.121-1.134-1.121h-35.62v-5.27h35.62c.68 0 1.134-.448 1.134-1.12V110.77c0-.673-.455-1.121-1.134-1.121h-35.62v-5.27h35.62c.68 0 1.134-.449 1.134-1.121V88.12c0-.672-.455-1.12-1.134-1.12H1.134C.455 87 0 87.448 0 88.12v15.025c0 .672.454 1.12 1.135 1.12h35.844v5.27H1.135c-.681 0-1.135.449-1.135 1.122v15.024c0 .673.454 1.121 1.135 1.121h35.844v5.27H1.135c-.681 0-1.135.448-1.135 1.121v15.024c0 .673.454 1.122 1.135 1.122h35.844v2.69h-3.63c-.68 0-1.134.448-1.134 1.122v2.915H1.135c-.681 0-1.135.448-1.135 1.121s.454 1.121 1.135 1.121h30.967v1.57c0 .673.453 1.121 1.134 1.121h9.528c.681 0 1.135-.448 1.135-1.121v-1.346h30.967c.68 0 1.134-.45 1.134-1.12 0-.673-.455-1.122-1.134-1.122z">
</path>
</g>
<path d=
"M93.667 119.5H145M134.2 122.5l10.8-3-10.8-3M224.667 118.5h65.666M279.533 121.5l10.8-3-10.8-3M223 135h30.136v56H289"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" stroke="#000"></path>
<path d=
"M278.2 194l10.8-3-10.8-3M223 100h30.136V44H289"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" stroke="#000"></path>
<path d="M278.2 47l10.8-3-10.8-3" stroke-width="2"
stroke-linejoin="round" stroke-linecap="round"
stroke="#000"></path>
<path d=
"M52 60.1h-8v-8h-2v8H12v-8h-2v8H2V47.5c0-4.6 2.9-8.8 7.3-10.4l7.9-2.8L27 57.6l9.8-23.3 7.9 2.8c4.4 1.6 7.3 5.7 7.3 10.4v12.6zM29.8 45.9L27 52.5l-2.8-6.6 2.8-8.1 2.8 8.1zm-7.2-15.2c1.4.9 2.8 1.4 4.4 1.4 1.6 0 3.1-.5 4.4-1.4.7 1.3 2.1 2.4 3.5 3l-4 9.5-2.4-7H30v-2h-6v2h1.5l-2.4 7-4-9.5c1.4-.6 2.8-1.7 3.5-3zM16 13.1c0-.5 0-1 .1-1.5L22 8.2l11.1 5.6 4.6-2.9c.1.7.2 1.4.2 2.2 0 6.4-5.1 17-11 17-5.8 0-10.9-10.6-10.9-17zm11-11c4.6 0 8.5 2.8 10.2 6.9l-4.1 2.6L22 6l-5.1 2.9c1.6-4 5.5-6.8 10.1-6.8zm18.4 33.2l-9.7-3.5c-1.2-.5-2.4-1.6-2.6-2.5 4.3-4 6.9-11.5 6.9-16.3 0-7.2-5.8-13-13-13S14 5.8 14 13c0 4.7 2.7 12.2 6.9 16.3-.2.9-1.4 1.9-2.6 2.5l-9.7 3.5C3.5 37.2 0 42.1 0 47.5v14.6h54V47.5c0-5.4-3.5-10.3-8.6-12.2z"
fill="#000" mask="url(#mask-2)" transform=
"translate(302 164)"></path>
<g fill="#000" stroke="#FFF">
<path d=
"M314.613 111.389a1.663 1.663 0 0 1 .982-1.518l.551 1.084a4.386 4.386 0 0 0 2.576 2.198 4.474 4.474 0 0 0 3.412-.265 15.236 15.236 0 0 1 6.619-1.806c2.315.092 4.58.71 6.618 1.806 2.193 1.118 4.884.269 6.024-1.903l.606-1.114c.187.085.357.2.504.344.323.317.5.753.49 1.204a6.512 6.512 0 0 1-2.703 5.255c-.34.25-.56.63-.606 1.048a16.193 16.193 0 0 1-2.921 7.742 2.718 2.718 0 0 0-.558 1.632v4.112l-7.406 5.996-7.394-6.02v-4.269c0-.577-.188-1.138-.533-1.601a16.268 16.268 0 0 1-2.818-7.538 1.502 1.502 0 0 0-.637-1.06 6.5 6.5 0 0 1-2.806-5.327zm24.891-3.318l-.782 1.5a1.459 1.459 0 0 1-1.95.601 18.29 18.29 0 0 0-8.001-2.1 18.282 18.282 0 0 0-8 2.125 1.455 1.455 0 0 1-1.11.09 1.38 1.38 0 0 1-.811-.693l-.758-1.523 1.309-.776a18.439 18.439 0 0 1 18.788 0l1.315.776zM321.292 94.99a66.27 66.27 0 0 1 7.467-3.01 52.133 52.133 0 0 1 7.442 3.01c2.424 1.312 4.097 2.547 4.097 6.4v3.672l-.545-.319a21.475 21.475 0 0 0-21.916 0l-.551.32v-3.722c0-3.786 1.479-5.201 4.006-6.351zm-20.806 51.01a1.51 1.51 0 0 0 1.497-1.522 5.984 5.984 0 0 1 3.703-5.605l6.89-2.878c.372.472.788.907 1.243 1.3l6.915 5.93c.635.55 1.598.486 2.152-.143.554-.63.489-1.588-.146-2.138l-6.92-5.924a6.37 6.37 0 0 1 .369-9.988l.697-.518c.421.877.92 1.715 1.49 2.505v4.87c0 .45.203.876.552 1.162l8.91 7.255a1.522 1.522 0 0 0 1.92 0l8.91-7.249c.35-.285.552-.712.552-1.161v-4.72a16.222 16.222 0 0 0 1.581-2.614l.606.452a6.372 6.372 0 0 1 .37 9.988l-6.915 5.924a1.499 1.499 0 0 0-.158 2.125c.547.63 1.506.7 2.14.157l6.915-5.93c.455-.393.87-.83 1.243-1.301l6.89 2.878a5.984 5.984 0 0 1 3.703 5.605 1.51 1.51 0 1 0 3.019.054 8.98 8.98 0 0 0-5.558-8.428l-6.576-2.728a9.32 9.32 0 0 0-3.26-10.734l-1.286-.946c.293-.986.514-1.992.661-3.01a9.516 9.516 0 0 0 3.424-7.272 4.644 4.644 0 0 0-1.382-3.324 4.774 4.774 0 0 0-1.29-.909v-5.822c0-5.472-2.8-7.465-5.661-9.03a51.294 51.294 0 0 0-7.352-3.01v-.795A1.51 1.51 0 0 0 328.82 87a1.51 1.51 0 0 0-1.515 1.505v.765c-1.212.403-3.418 1.24-7.273 3.01-2.848 1.27-5.775 3.365-5.775 9.06v5.822a4.749 4.749 0 0 0-1.213.85 4.639 4.639 0 0 0-1.442 3.383 9.493 9.493 0 0 0 3.552 7.38c.137.954.34 1.898.606 2.824l-1.376 1.018a9.314 9.314 0 0 0-3.26 10.74l-6.564 2.74a8.982 8.982 0 0 0-5.558 8.428 1.51 1.51 0 0 0 1.485 1.475z">
</path>
<path d=
"M331.501 121a1.512 1.512 0 0 0-1.064.432c-.79.777-2.07.777-2.86 0a1.528 1.528 0 0 0-2.14.012 1.475 1.475 0 0 0 .012 2.108 5.089 5.089 0 0 0 7.11 0 1.466 1.466 0 0 0 .002-2.094 1.515 1.515 0 0 0-1.066-.434l.006-.024z">
</path>
</g>
<path d=
"M41.222 65.172v3.885H11.778v-3.885H9.815v3.885H1.963V57.5c0-.097.393-7.284 8.735-10.198.883-.291 3.533-1.068 6.085-2.137l10.011 20.591 9.325-20.688c2.551 1.166 5.3 1.943 6.183 2.234 8.342 2.914 8.931 10.003 8.931 10.198v11.656h-7.852v-3.886h-2.159v-.097zm-19.63-23.019c.393.292.786.486 1.178.68.687.777 2.16 1.263 3.926 1.263 1.963 0 3.632-.68 4.123-1.554.196-.097.392-.195.49-.389.687.777 1.669 1.457 2.847 2.04l-7.558 16.9-8.146-16.803c1.374-.68 2.454-1.36 3.14-2.137zm-5.398-17.677c0-6.216 4.613-11.364 10.306-11.364 5.693 0 10.306 5.05 10.306 11.364 0 7.479-2.945 13.792-7.067 16.026-.785-.388-1.865-.68-3.14-.68-1.375 0-2.553.292-3.338.777-4.122-2.137-7.067-8.547-7.067-16.123zM53 69.057V57.402c0-.388-.589-8.547-10.306-11.946-3.435-.972-8.44-2.914-9.814-4.468 8.637-2.72 14.918-10.587 14.918-20.009C47.798 9.324 38.278 0 26.598 0s-21.2 9.421-21.2 20.98c0 9.42 6.183 17.288 14.82 20.008-1.374 1.554-6.477 3.496-10.01 4.468C.392 48.855 0 57.11 0 57.402V71h53v-1.943z"
fill="#000" mask="url(#mask-4)" transform=
"translate(302)"></path>
<g stroke="#000" stroke-width="6" stroke-linejoin=
"round">
<path d="M180.187 135h26.343">
<animate attributename="d" begin="0s" dur="3s"
repeatcount="indefinite" values=
"M180.18662,135 L206.529673,135;M180.18662,135 L211.529673,135;M180.18662,135 L206.529673,135;M180.18662,135 L201.529673,135;M180.18662,135 L206.529673,135;">
</animate>
</path>
<path d="M180.187 118h26.343">
<animate attributename="d" begin="0.5s" dur="3s"
repeatcount="indefinite" values=
"M180.18662,118 L206.529673,118;M180.18662,118 L211.529673,118;M180.18662,118 L206.529673,118;M180.18662,118 L201.529673,118;M180.18662,118 L206.529673,118;">
</animate>
</path>
<path d="M180.187 101h26.343">
<animate attributename="d" begin="1s" dur="3s"
repeatcount="indefinite" values=
"M180.18662,101 L206.529673,101;M180.18662,101 L211.529673,101;M180.18662,101 L206.529673,101;M180.18662,101 L201.529673,101;M180.18662,101 L206.529673,101;">
</animate>
</path>
</g>
<path d="M164 135.5h8M164 118.5h8M164 100.5h8"
stroke-width="6" stroke-linejoin="round" stroke=
"#000"></path>
</g></svg>
</div>
</div>
</div>
<div class="m__ott--b2">
<div class="container numeric-container">
<div class="numeric__svg--mobile">
<img src="../images/2icon.png" />
</div>
<svg height="659" width="1280" xmlns=
"http://www.w3.org/2000/svg" class="m__ott--b2__svg"
preserveaspectratio="none" viewbox="0 0 1280 659">
<path d="M0 160L1480 0v499L0 659z" fill="#4A90E2"
fill-rule="evenodd" opacity=".1"></path></svg>
<div class="m__ott--b2__icon">
<svg height="148" width="383" xmlns=
"http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#000">
<path d="M65 69h15v14H65z" stroke-width="2"></path>
<g transform="translate(0 1)">
<path d=
"M59.855 74.5H35.144M59.854 78.5H39M59.857 82.5H46"
stroke-width="2" stroke-linecap="square"></path>
<path d="M18 56h66v30H18z" stroke-width="2"></path>
<path d=
"M22 60h38v4H22zM22 64h19v4H22zM65 82l15.03-14.062M65.018 68.235L80 82"
stroke-width="2"></path>
<path d=
"M112.667 76.5H164M153.2 79.5l10.8-3-10.8-3"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round"></path>
<g stroke-linejoin="round" stroke-width="6">
<path d="M199.187 92h26.343">
<animate attributename="d" begin="0s" dur="3s"
repeatcount="indefinite" values=
"M199.18662,92 L225.529673,92;M199.18662,92 L230.529673,92;M199.18662,92 L225.529673,92;M199.18662,92 L220.529673,92;M199.18662,92 L225.529673,92;">
</animate>
</path>
<path d="M199.187 75h26.343">
<animate attributename="d" begin="0.5s" dur=
"3s" repeatcount="indefinite" values=
"M199.18662,75 L225.529673,75;M199.18662,75 L230.529673,75;M199.18662,75 L225.529673,75;M199.18662,75 L220.529673,75;M199.18662,75 L225.529673,75;">
</animate>
</path>
<path d="M199.187 58h26.343">
<animate attributename="d" begin="1s" dur="3s"
repeatcount="indefinite" values=
"M199.18662,58 L225.529673,58;M199.18662,58 L230.529673,58;M199.18662,58 L225.529673,58;M199.18662,58 L220.529673,58;M199.18662,58 L225.529673,58;">
</animate>
</path>
</g>
<path d="M183 92.5h8M183 75.5h8M183 57.5h8"
stroke-width="6" stroke-linejoin="round"></path>
<path d="M239 92h30.136v26H305" stroke-width="2"
stroke-linejoin="round" stroke-linecap="round">
</path>
<path d=
"M294.2 121l10.8-3-10.8-3M239 57h30.136V31H305"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round"></path>
<path d="M294.2 34l10.8-3-10.8-3" stroke-width="2"
stroke-linejoin="round" stroke-linecap="round">
</path>
<circle cx="351" cy="30" r="30" stroke-width="2">
</circle>
<g stroke-width="2">
<path d=
"M324 119h8v27h-8zM336 108h8v38h-8zM348 138h8v8h-8zM360 96h8v50h-8z">
</path>
<path d="M320.371 88.45v57.455h62.167"></path>
</g>
<path d="M322 31h29l-20.938-21" stroke-width="2"
stroke-linejoin="round" stroke-linecap="round">
</path>
<path d="M350 31l13 25" stroke-width="2"></path>
<rect height="57" rx="4" stroke-width="2" width=
"87" x="8" y="44"></rect>
<path d=
"M13 50h77v46H13zM3 101a2 2 0 0 0-1.99 2.198l.399 4A2 2 0 0 0 3.399 109h94.203a2 2 0 0 0 1.99-1.802l.398-4A2 2 0 0 0 98 101H3z"
stroke-width="2"></path>
</g>
</g></svg>
</div>
<div class="m__ott--b2__txt">
<svg height="137" width="83" xmlns=
"http://www.w3.org/2000/svg">
<text fill="#4A90E2" fill-rule="evenodd" font-family=
"DINPro-Bold, DINPro" font-size="190" font-weight=
"bold" letter-spacing="14.487" opacity=".2" transform=
"translate(-1071 -1994)">
<tspan x="1060.171" y="2131">
2
</tspan>
</text></svg>
<h2>Predict your audience</h2>
<p>Intentionally or not, each ad is more effective for
certain types of people. And it's more about identity
and personality than age, gender or social
status.</p><q>Our algorithms help you to predict the
number and type of people who will be affected by your
content</q>
</div>
</div>
</div>
<div class="m__ott--b3">
<div class="container numeric-container">
<div class="numeric__svg--mobile">
<img src="../images/3icon.png" />
</div>
<div class="m__ott--b3__txt">
<svg height="139" width="87" xmlns=
"http://www.w3.org/2000/svg">
<text fill="#4A90E2" fill-rule="evenodd" font-family=
"DINPro-Bold, DINPro" font-size="190" font-weight=
"bold" letter-spacing="14.487" opacity=".2" transform=
"translate(-98 -2444)">
<tspan x="90.171" y="2581">
3
</tspan>
</text></svg>
<h2>Get your audience</h2>
<p>Even if you understand who exactly you want to show
your content to, current digital marketing instruments
provide only crude targetings like gender, age or
general interests.</p><q>Our AI-powered system provides
you with next-gen psychometric targetings that match
content with users' personality</q>
</div>
<div class="m__ott--b3__icon">
<svg height="227" width="377" xmlns=
"http://www.w3.org/2000/svg" xmlns:xlink=
"http://www.w3.org/1999/xlink">
<defs>
<path d="M10 110h51v8H10z" id="a"></path>
<path d="M10 116h27v8H10z" id="b"></path>
<path d="M54 31.05V62.1H0V0h54z" id="c"></path>
<path d="M53 35.5V71H0V0h53z" id="e"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<use xlink:href="#a" fill="#FFF"></use>
<path d="M11 111h49v6H11z" stroke-width="2" stroke=
"#000"></path>
</g>
<g>
<use xlink:href="#b" fill="#FFF"></use>
<path d="M11 117h25v6H11z" stroke-width="2" stroke=
"#000"></path>
</g>
<path d=
"M241.667 118.5h65.666M296.533 121.5l10.8-3-10.8-3M102.667 118.5H169M158.2 121.5l10.8-3-10.8-3"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" stroke="#000"></path>
<g stroke="#000" stroke-width="6" stroke-linejoin=
"round">
<path d="M200.187 135h26.343">
<animate attributename="d" begin="0s" dur="3s"
repeatcount="indefinite" values=
"M200.18662,135 L226.529673,135;M200.18662,135 L231.529673,135;M200.18662,135 L226.529673,135;M200.18662,135 L221.529673,135;M200.18662,135 L226.529673,135;">
</animate>
</path>
<path d="M200.187 118h26.343">
<animate attributename="d" begin="0.5s" dur="3s"
repeatcount="indefinite" values=
"M200.18662,118 L226.529673,118;M200.18662,118 L231.529673,118;M200.18662,118 L226.529673,118;M200.18662,118 L221.529673,118;M200.18662,118 L226.529673,118;">
</animate>
</path>
<path d="M200.187 101h26.343">
<animate attributename="d" begin="1s" dur="3s"
repeatcount="indefinite" values=
"M200.18662,101 L226.529673,101;M200.18662,101 L231.529673,101;M200.18662,101 L226.529673,101;M200.18662,101 L221.529673,101;M200.18662,101 L226.529673,101;">
</animate>
</path>
</g>
<path d="M184 135.5h8M184 118.5h8M184 100.5h8"
stroke-width="6" stroke-linejoin="round" stroke=
"#000"></path>
<path d="M240 135h30.136v56H306" stroke-width="2"
stroke-linejoin="round" stroke-linecap="round"
stroke="#000"></path>
<path d=
"M295.2 194l10.8-3-10.8-3M240 100h30.136V44H306"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" stroke="#000"></path>
<path d=
"M295.2 47l10.8-3-10.8-3M168 135h-30.136v26H102"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" stroke="#000"></path>
<path d=
"M157.8 138l10.2-3-10.2-3M168 100h-30.136V74H102"
stroke-width="2" stroke-linejoin="round"
stroke-linecap="round" stroke="#000"></path>
<path d="M157.8 103l10.2-3-10.2-3" stroke-width="2"
stroke-linejoin="round" stroke-linecap="round"
stroke="#000"></path>
<g transform="translate(319 164)">
<mask fill="#fff" id="d">
<use xlink:href="#c"></use>
</mask>
<path d=
"M52 60.1h-8v-8h-2v8H12v-8h-2v8H2V47.5c0-4.6 2.9-8.8 7.3-10.4l7.9-2.8L27 57.6l9.8-23.3 7.9 2.8c4.4 1.6 7.3 5.7 7.3 10.4v12.6zM29.8 45.9L27 52.5l-2.8-6.6 2.8-8.1 2.8 8.1zm-7.2-15.2c1.4.9 2.8 1.4 4.4 1.4 1.6 0 3.1-.5 4.4-1.4.7 1.3 2.1 2.4 3.5 3l-4 9.5-2.4-7H30v-2h-6v2h1.5l-2.4 7-4-9.5c1.4-.6 2.8-1.7 3.5-3zM16 13.1c0-.5 0-1 .1-1.5L22 8.2l11.1 5.6 4.6-2.9c.1.7.2 1.4.2 2.2 0 6.4-5.1 17-11 17-5.8 0-10.9-10.6-10.9-17zm11-11c4.6 0 8.5 2.8 10.2 6.9l-4.1 2.6L22 6l-5.1 2.9c1.6-4 5.5-6.8 10.1-6.8zm18.4 33.2l-9.7-3.5c-1.2-.5-2.4-1.6-2.6-2.5 4.3-4 6.9-11.5 6.9-16.3 0-7.2-5.8-13-13-13S14 5.8 14 13c0 4.7 2.7 12.2 6.9 16.3-.2.9-1.4 1.9-2.6 2.5l-9.7 3.5C3.5 37.2 0 42.1 0 47.5v14.6h54V47.5c0-5.4-3.5-10.3-8.6-12.2z"
fill="#000" mask="url(#d)"></path>
</g>
<g stroke="#000" stroke-width="2">
<path d=
"M54.814 61.5h-31.63M54.813 66.5H28M54.816 71.5H37"
stroke-linecap="square"></path>
<path d="M1 38h85v39H1z"></path>
<path d=
"M6 43h49v6H6zM6 49h25v6H6zM61 53h20v19H61zM61.388 72.045L80.53 52.902M61.388 52.902L80.53 72.045">
</path>
</g>
<g stroke="#000" stroke-width="2">
<path d="M1 97h85v39H1z"></path>
<path d=
"M65 102h16v29H65zM64.93 130.578l15.853-28.524M64.93 102.054l15.853 28.524M26.532 97.086c-2.666 6.425-4 12.85-4 19.276 0 6.425 1.334 12.85 4 19.275">
</path>
</g>
<g stroke="#000" stroke-width="2">
<path d="M6 160h30v29H6zM7 188l28-28M7 160l28 28">
</path>
<path d="M80.813 183.5H54M80.816 188.5H63"
stroke-linecap="square"></path>
<path d="M1 155h85v39H1z"></path>
<path d=
"M42 160h39v6H42zM49 166h32v6H49zM56 172h25v6H56z">
</path>
</g>
<g fill="#000" stroke="#FFF">
<path d=
"M331.613 111.389a1.663 1.663 0 0 1 .982-1.518l.551 1.084a4.386 4.386 0 0 0 2.576 2.198 4.474 4.474 0 0 0 3.412-.265 15.236 15.236 0 0 1 6.619-1.806c2.315.092 4.58.71 6.618 1.806 2.193 1.118 4.884.269 6.024-1.903l.606-1.114c.187.085.357.2.504.344.323.317.5.753.49 1.204a6.512 6.512 0 0 1-2.703 5.255c-.34.25-.56.63-.606 1.048a16.193 16.193 0 0 1-2.921 7.742 2.718 2.718 0 0 0-.558 1.632v4.112l-7.406 5.996-7.394-6.02v-4.269c0-.577-.188-1.138-.533-1.601a16.268 16.268 0 0 1-2.818-7.538 1.502 1.502 0 0 0-.637-1.06 6.5 6.5 0 0 1-2.806-5.327zm24.891-3.318l-.782 1.5a1.459 1.459 0 0 1-1.95.601 18.29 18.29 0 0 0-8.001-2.1 18.282 18.282 0 0 0-8 2.125 1.455 1.455 0 0 1-1.11.09 1.38 1.38 0 0 1-.811-.693l-.758-1.523 1.309-.776a18.439 18.439 0 0 1 18.788 0l1.315.776zM338.292 94.99a66.27 66.27 0 0 1 7.467-3.01 52.133 52.133 0 0 1 7.442 3.01c2.424 1.312 4.097 2.547 4.097 6.4v3.672l-.545-.319a21.475 21.475 0 0 0-21.916 0l-.551.32v-3.722c0-3.786 1.479-5.201 4.006-6.351zm-20.806 51.01a1.51 1.51 0 0 0 1.497-1.522 5.984 5.984 0 0 1 3.703-5.605l6.89-2.878c.372.472.788.907 1.243 1.3l6.915 5.93c.635.55 1.598.486 2.152-.143.554-.63.489-1.588-.146-2.138l-6.92-5.924a6.37 6.37 0 0 1 .369-9.988l.697-.518c.421.877.92 1.715 1.49 2.505v4.87c0 .45.203.876.552 1.162l8.91 7.255a1.522 1.522 0 0 0 1.92 0l8.91-7.249c.35-.285.552-.712.552-1.161v-4.72a16.222 16.222 0 0 0 1.581-2.614l.606.452a6.372 6.372 0 0 1 .37 9.988l-6.915 5.924a1.499 1.499 0 0 0-.158 2.125c.547.63 1.506.7 2.14.157l6.915-5.93c.455-.393.87-.83 1.243-1.301l6.89 2.878a5.984 5.984 0 0 1 3.703 5.605 1.51 1.51 0 1 0 3.019.054 8.98 8.98 0 0 0-5.558-8.428l-6.576-2.728a9.32 9.32 0 0 0-3.26-10.734l-1.286-.946c.293-.986.514-1.992.661-3.01a9.516 9.516 0 0 0 3.424-7.272 4.644 4.644 0 0 0-1.382-3.324 4.774 4.774 0 0 0-1.29-.909v-5.822c0-5.472-2.8-7.465-5.661-9.03a51.294 51.294 0 0 0-7.352-3.01v-.795A1.51 1.51 0 0 0 345.82 87a1.51 1.51 0 0 0-1.515 1.505v.765c-1.212.403-3.418 1.24-7.273 3.01-2.848 1.27-5.775 3.365-5.775 9.06v5.822a4.749 4.749 0 0 0-1.213.85 4.639 4.639 0 0 0-1.442 3.383 9.493 9.493 0 0 0 3.552 7.38c.137.954.34 1.898.606 2.824l-1.376 1.018a9.314 9.314 0 0 0-3.26 10.74l-6.564 2.74a8.982 8.982 0 0 0-5.558 8.428 1.51 1.51 0 0 0 1.485 1.475z">
</path>
<path d=
"M348.501 121a1.512 1.512 0 0 0-1.064.432c-.79.777-2.07.777-2.86 0a1.528 1.528 0 0 0-2.14.012 1.475 1.475 0 0 0 .012 2.108 5.089 5.089 0 0 0 7.11 0 1.466 1.466 0 0 0 .002-2.094 1.515 1.515 0 0 0-1.066-.434l.006-.024z">
</path>
</g>
<path d=
"M41.222 65.172v3.885H11.778v-3.885H9.815v3.885H1.963V57.5c0-.097.393-7.284 8.735-10.198.883-.291 3.533-1.068 6.085-2.137l10.011 20.591 9.325-20.688c2.551 1.166 5.3 1.943 6.183 2.234 8.342 2.914 8.931 10.003 8.931 10.198v11.656h-7.852v-3.886h-2.159v-.097zm-19.63-23.019c.393.292.786.486 1.178.68.687.777 2.16 1.263 3.926 1.263 1.963 0 3.632-.68 4.123-1.554.196-.097.392-.195.49-.389.687.777 1.669 1.457 2.847 2.04l-7.558 16.9-8.146-16.803c1.374-.68 2.454-1.36 3.14-2.137zm-5.398-17.677c0-6.216 4.613-11.364 10.306-11.364 5.693 0 10.306 5.05 10.306 11.364 0 7.479-2.945 13.792-7.067 16.026-.785-.388-1.865-.68-3.14-.68-1.375 0-2.553.292-3.338.777-4.122-2.137-7.067-8.547-7.067-16.123zM53 69.057V57.402c0-.388-.589-8.547-10.306-11.946-3.435-.972-8.44-2.914-9.814-4.468 8.637-2.72 14.918-10.587 14.918-20.009C47.798 9.324 38.278 0 26.598 0s-21.2 9.421-21.2 20.98c0 9.42 6.183 17.288 14.82 20.008-1.374 1.554-6.477 3.496-10.01 4.468C.392 48.855 0 57.11 0 57.402V71h53v-1.943z"
fill="#000" mask="url(#mask-6)" transform=
"translate(319)"></path>
</g></svg>
</div>
</div>
</div>
<div class="m__ott--btn-container">
<a class="m__ott--btn" href="#form"><b>SHOW ME</b> HOW IT WORKS</a>
</div>
</section>
<section class="m__pr">
<div class="m__pr-header-container">
<h1 class="m__pr--h1">Do you know how to advertise your
product to those people?</h1>
<div class="m__f--polygon-min m__f--polygon-min--white">
<svg xmlns="http://www.w3.org/2000/svg" class="m__f--svg"
preserveaspectratio="none" version="1.1" viewbox=
"0 0 1280 500">
<polygon points="0 851 1280 851 1280 1300 640 1350 0 1300"
fill="#fff" fill-rule="evenodd" stroke="none" stroke-width=
"1" transform="translate(0 -851)"></polygon></svg>
</div>
</div>
<div class="m__pr--block">
<div class="m__pr--block__left">
<p><span>32 y.o. male</span><span>Lives
downtown</span><span>Visits websites with news, <br /> clothes
and electronics</span></p>
</div>
<div class="m__pr--description__left">
<div>
<p>32 y.o. male</p>
<p>Lives downtown</p>
<p>Visits websites with news, <br /> clothes and
electronics</p>
</div>
</div>
<div class="m__pr--block__right">
<p><span>Calm and self-conscious, rarely feels
depressed</span><span>Achievement-striving and
self-disciplined person</span><span>Doesn't seek
excitement but is open to new
experience</span><span>Friendly but not very assertive,
prefers to act alone rather than cooperate</span></p>
</div>
<div class="m__pr--description__right">
<div>
<p>Calm and self-conscious,</p><br>
<p>rarely feels depressed</p>
</div>
<div>
<p>Achievement-striving</p><br>
<p>and self-disciplined person</p>
</div>
<div>
<p>Doesn't seek excitement</p><br>
<p>but is open to new experience</p>
</div>
<div>
<p>Friendly but not very assertive,</p><br>
<p>prefers to act alone rather</p><br>
<p>than cooperate</p>
</div><a class="m__pr--btn" href="#form"><b>SHOW ME</b>
HOW IT WORKS</a>
</div>
</div>
</section>
<section class="m__se">
<div class="m__se--fix" id="fixec_block">
<h1 class="m__se--h1">Where you can apply the new way of
targeting</h1>
<div class="m__se--block">
<a class="m__se--element" href="#programmatic" id=
"scroll__bottom_2">
<h2 class="m__se--element__h2">Programmatic<br>
advertising</h2>
<div class="m__se--element__url">
SHOW ME
</div></a> <a class="m__se--element">
<h2 class="m__se--element__h2">Email<br>
marketing</h2>
<div class="m__se--element__url">
COMING SOON
</div></a> <a class="m__se--element">
<h2 class="m__se--element__h2">Social media<br>
advertising</h2>
<div class="m__se--element__url">
COMING SOON
</div></a> <a class="m__se--element">
<h2 class="m__se--element__h2">Recommendations</h2>
<div class="m__se--element__url">
COMING SOON
</div></a>
</div>
</div>
</section>
<section class="m__an">
<canvas id="canvas"></canvas>
<section class="m__tr" id="programmatic">
<h1 class="m__tr--h1">We start with a new way of targeting
digital advertising</h1>
<div class="m__tr--block">
<div class="m__tr--element">
<div class="m__tr--element__num">
<svg height="136" width="53" xmlns=
"http://www.w3.org/2000/svg">
<text fill="#FFF" fill-rule="evenodd" font-family=
"DINPro-Bold, DINPro" font-size="190" font-weight=
"bold" letter-spacing="14.487" opacity=".3"
transform="translate(-173 -4802)">
<tspan x="154.171" y="4938">
1
</tspan>
</text></svg>
</div>
<div class="m__tr--element__icon">
<svg height="60" width="62" xmlns=
"http://www.w3.org/2000/svg">
<g fill="#FFF" fill-rule="nonzero">
<path d=
"M56.176 10.875H46.97c-.564 0-.94.375-.94.938 0 .562.376.937.94.937h9.206a3.765 3.765 0 0 1 3.757 3.75v37.219c0 2.062-1.69 3.75-3.757 3.75H5.73a3.765 3.765 0 0 1-3.757-3.75V16.5c0-2.063 1.69-3.75 3.757-3.75h9.206c.564 0 .94-.375.94-.938 0-.562-.376-.937-.94-.937H5.73c-3.1 0-5.636 2.531-5.636 5.625v37.219c0 3.093 2.536 5.625 5.636 5.625h50.446c3.1 0 5.636-2.532 5.636-5.625V16.5c0-3.188-2.63-5.625-5.636-5.625z"></path>
<path d=
"M45.56 20.602L31.377 32.789V1.664c0-.562-.376-.937-.94-.937-.563 0-.939.375-.939.937V32.79L15.312 20.602c-.376-.375-1.033-.282-1.315.093-.376.375-.282 1.032.094 1.313l15.594 13.5a.99.99 0 0 0 1.221 0l15.876-13.5c.376-.375.47-.938.094-1.313s-.94-.468-1.315-.093z"></path>
</g></svg>
</div>
<h2 class="m__tr--element__h2">Upload your ads</h2>
<div class="m__tr--element__arrow">
<svg height="95" width="102" xmlns=
"http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#FFF"
stroke-width="2">
<path d="M98 91h-6C41.742 91 1 50.258 1 0"></path>
<path d="M87.2 94L98 91l-10.8-3"></path>
</g></svg>
</div>
</div>
<div class="m__tr--element">
<div class="m__tr--element__num">
<svg height="137" width="83" xmlns=
"http://www.w3.org/2000/svg">
<text fill="#FFF" fill-rule="evenodd" font-family=
"DINPro-Bold, DINPro" font-size="190" font-weight=
"bold" letter-spacing="14.487" opacity=".3"
transform="translate(-385 -5095)">
<tspan x="374.171" y="5232">
2
</tspan>
</text></svg>
</div>
<div class="m__tr--element__icon">
<svg height="71" width="58" xmlns=
"http://www.w3.org/2000/svg">
<g fill="#FFF" fill-rule="evenodd">
<path d=