:root {
--bg:#030917;
--bg-soft:#091835;
--card:rgba(9, 24, 53, .72);
--card-border:rgba(106, 177, 255, .3);
--text:#f4f8ff;
--muted:#a8bbd8;
--blue:#2f7dff;
--cyan:#45d7ff;
--green:#29db8f;
--orange:#ff9f43;
--red:#ff4f5e;
--shadow:0 26px 70px rgba(0, 0, 0, .5);
--radius:24px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--bg);
}
body {
margin: 0;
color: var(--text);
font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
background:
radial-gradient(circle at 12% 10%, rgba(47, 125, 255, .25), transparent 34%),
radial-gradient(circle at 86% 14%, rgba(69, 215, 255, .15), transparent 32%),
linear-gradient(170deg, #030917 0%, #040b1a 36%, #061227 76%, #02060e 100%);
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
.site-header {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px clamp(18px, 4vw, 84px);
background: rgba(3, 9, 23, .78);
border-bottom: 1px solid rgba(106, 177, 255, .23);
backdrop-filter: blur(16px);
}
.site-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--cyan) 45%, transparent 100%);
opacity: .45;
}
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
font-weight: 700;
}
.brand-mark {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
background: transparent;
}
.brand-mark img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.brand-text {
font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
font-size: clamp(1.6rem, 2.2vw, 2.3rem);
letter-spacing: .02em;
font-weight: 700;
}
.brand-text span {
color: var(--blue);
}
.nav {
display: flex;
align-items: center;
gap: 16px;
color: var(--muted);
font-weight: 700;
}
.nav a:not(.btn) {
position: relative;
}
.nav a:not(.btn)::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -5px;
height: 2px;
background: var(--cyan);
transition: right .25s ease;
}
.nav a:not(.btn):hover {
color: var(--text);
}
.nav a:not(.btn):hover::after {
right: 0;
}
.lang-switch {
border: 1px solid var(--card-border);
background: rgba(9, 24, 53, .76);
color: var(--text);
border-radius: 999px;
padding: 10px 13px;
font-weight: 700;
cursor: pointer;
}
.hero {
display: grid;
grid-template-columns: .84fr 1.16fr;
align-items: center;
gap: clamp(26px, 4vw, 68px);
padding: clamp(50px, 7vw, 104px) clamp(18px, 4vw, 84px) 46px;
}
.hero-copy {
max-width: 720px;
}
.eyebrow {
display: inline-block;
margin: 0 0 16px;
padding: 7px 11px;
color: #7ef7cb;
text-transform: uppercase;
letter-spacing: .12em;
font-size: .78rem;
font-weight: 700;
border: 1px solid rgba(126, 247, 203, .35);
border-radius: 999px;
background: rgba(126, 247, 203, .08);
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
text-transform: uppercase;
}
h1 {
font-size: clamp(2.5rem, 5.5vw, 5rem);
line-height: .94;
letter-spacing: .01em;
margin-bottom: 22px;
}
h2 {
font-size: clamp(2.05rem, 3.8vw, 3.6rem);
line-height: .96;
letter-spacing: .01em;
margin-bottom: 18px;
}
h3 {
font-size: 1.6rem;
margin-bottom: 10px;
}
.lead,
.section p,
.split-copy p,
.partners p,
.cta p,
.demo-card p {
color: var(--muted);
font-size: clamp(1rem, 1.25vw, 1.22rem);
line-height: 1.62;
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(69, 215, 255, .44);
background: linear-gradient(136deg, #2f7dff 0%, #2753dd 45%, #1a3fca 100%);
color: #fff;
font-weight: 700;
border-radius: 14px;
padding: 14px 20px;
box-shadow: 0 14px 38px rgba(47, 125, 255, .29);
transition: transform .22s ease, box-shadow .22s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 44px rgba(47, 125, 255, .36);
}
.btn-small {
padding: 10px 14px;
border-radius: 12px;
}
.btn-secondary {
background: rgba(9, 24, 53, .8);
box-shadow: none;
}
.hero-visual {
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
background: #0b1731;
transform: perspective(1600px) rotateY(-8deg);
transform-origin: left center;
}
.hero-visual img {
width: 100%;
height: auto;
object-fit: contain;
}
.hero-visual::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(69, 215, 255, .12), transparent 37%, rgba(0, 0, 0, .36));
pointer-events: none;
}
.section,
.partners,
.cta {
margin: 24px clamp(18px, 4vw, 84px);
padding: clamp(28px, 4vw, 54px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(9, 24, 53, .9), rgba(5, 15, 33, .82));
box-shadow: var(--shadow);
}
.intro,
.dark,
.partners {
display: grid;
grid-template-columns: .75fr 1fr;
gap: clamp(24px, 4vw, 70px);
align-items: start;
}
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding: 24px clamp(18px, 4vw, 84px);
}
.card {
background: linear-gradient(185deg, rgba(8, 20, 44, .92), rgba(5, 12, 28, .9));
border: 1px solid var(--card-border);
border-radius: 20px;
padding: 26px;
min-height: 240px;
transition: transform .28s ease, border-color .28s ease;
}
[data-animate] {
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .21, 1);
}
[data-animate].is-visible {
opacity: 1;
transform: translateY(0);
}
[data-stagger-item] {
opacity: 0;
transform: translateY(26px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2, .65, .21, 1);
transition-delay: var(--stagger-delay, 0ms);
}
[data-animate].is-visible [data-stagger-item] {
opacity: 1;
transform: translateY(0);
}
.card:hover {
transform: translateY(-5px);
border-color: rgba(69, 215, 255, .68);
}
.card p {
color: var(--muted);
line-height: 1.55;
}
.icon {
width: 54px;
height: 54px;
border-radius: 14px;
display: grid;
place-items: center;
margin-bottom: 20px;
color: var(--cyan);
border: 1px solid rgba(69, 215, 255, .4);
background: linear-gradient(160deg, rgba(69, 215, 255, .2), rgba(47, 125, 255, .09));
font-weight: 700;
font-size: 1.4rem;
}
.icon.record {
color: var(--red);
border-color: rgba(255, 79, 94, .4);
background: linear-gradient(160deg, rgba(255, 79, 94, .2), rgba(255, 79, 94, .08));
}
.split {
display: grid;
grid-template-columns: 1fr .9fr;
gap: clamp(24px, 4vw, 56px);
align-items: center;
padding: 26px clamp(18px, 4vw, 84px);
}
.split-image {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
}
.split-image .unit-photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1280 / 721;
object-fit: cover;
}
.split-copy {
background: linear-gradient(165deg, rgba(9, 24, 53, .82), rgba(5, 16, 35, .9));
border: 1px solid var(--card-border);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 52px);
}
.checks {
list-style: none;
padding: 0;
margin: 26px 0 0;
display: grid;
gap: 13px;
}
.checks li {
color: var(--text);
padding-left: 30px;
position: relative;
line-height: 1.5;
}
.checks li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--green);
font-weight: 700;
}
.dark {
background:
linear-gradient(115deg, rgba(8, 24, 54, .95), rgba(2, 8, 20, .95)),
radial-gradient(circle at 20% 30%, rgba(255, 159, 67, .16), transparent 40%);
}
.partner-logos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: center;
}
.partner-logos.single {
grid-template-columns: minmax(220px, 420px);
}
.partner-logos .partner-logo-media {
width: 100%;
height: auto;
aspect-ratio: 490 / 272;
background: rgba(255, 255, 255, .95);
border-radius: 16px;
border: 1px solid rgba(4, 10, 25, .2);
}
.cta {
text-align: center;
background:
radial-gradient(circle at 20% 12%, rgba(69, 215, 255, .14), transparent 35%),
linear-gradient(135deg, rgba(47, 125, 255, .36), rgba(9, 24, 53, .94));
}
.footer {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 32px clamp(18px, 4vw, 84px);
color: var(--muted);
border-top: 1px solid rgba(106, 177, 255, .2);
}
.contact {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: clamp(22px, 3vw, 42px);
align-items: start;
}
.contact-reference {
color: var(--muted);
font-size: clamp(.98rem, 1.15vw, 1.08rem);
line-height: 1.6;
margin-top: 16px;
}
.contact-reference a {
color: var(--text);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(244, 248, 255, .3);
text-underline-offset: 3px;
}
.contact-reference a:hover {
text-decoration-color: var(--text);
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.field {
display: grid;
gap: 8px;
}
.field-full {
grid-column: 1 / -1;
}
.field label {
font-size: .92rem;
color: var(--text);
font-weight: 700;
}
.field input,
.field textarea {
width: 100%;
border: 1px solid rgba(106, 177, 255, .34);
border-radius: 12px;
background: rgba(6, 18, 40, .92);
color: var(--text);
padding: 12px 14px;
font: inherit;
}
.field input:focus,
.field textarea:focus {
outline: 2px solid rgba(69, 215, 255, .4);
outline-offset: 1px;
border-color: rgba(69, 215, 255, .7);
}
.captcha-wrap {
border: 1px dashed rgba(106, 177, 255, .38);
border-radius: 14px;
padding: 12px;
background: rgba(6, 18, 40, .45);
}
.captcha-question {
margin: 0 0 10px;
color: var(--muted);
}
.captcha-row {
display: flex;
gap: 10px;
}
.captcha-row input {
flex: 1;
}
.contact-status {
min-height: 1.4em;
margin: 10px 0 0;
color: var(--muted);
}
.contact-status.ok {
color: #6df0c1;
}
.contact-status.error {
color: #ff8a94;
}
.demo-main {
min-height: calc(100vh - 90px);
display: grid;
place-items: center;
padding: 40px 18px;
}
.demo-card {
width: min(760px, 100%);
text-align: center;
padding: clamp(36px, 6vw, 72px);
background: linear-gradient(185deg, rgba(9, 24, 53, .9), rgba(5, 13, 29, .88));
border: 1px solid var(--card-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.demo-card h1 {
font-size: clamp(2.5rem, 5vw, 4.7rem);
}
.news-main {
padding: 24px clamp(18px, 4vw, 84px) 46px;
}
.news-hero {
margin: 12px 0 26px;
}
.news-hero h1 {
margin-bottom: 16px;
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 0 0 24px;
}
.news-card {
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--card-border);
border-radius: 20px;
padding: 22px;
min-height: 240px;
background: linear-gradient(185deg, rgba(8, 20, 44, .92), rgba(5, 12, 28, .9));
box-shadow: var(--shadow);
transition: transform .24s ease, border-color .24s ease;
}
.news-thumb {
width: calc(100% + 44px);
margin: -22px -22px 4px;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid rgba(106, 177, 255, .28);
border-radius: 20px 20px 0 0;
}
.news-card:hover {
transform: translateY(-4px);
border-color: rgba(69, 215, 255, .68);
}
.news-source {
margin: 0;
color: #8ea9d6;
letter-spacing: .09em;
font-size: .8rem;
text-transform: uppercase;
font-weight: 700;
}
.news-card h3 {
margin: 0;
text-transform: none;
line-height: 1.18;
font-size: clamp(1.2rem, 1.65vw, 1.5rem);
}
.news-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
color: #7ddcff;
font-weight: 700;
}
.news-link::after {
content: "↗";
font-size: 1rem;
opacity: .9;
}
@media (max-width: 1100px) {
.hero,
.intro,
.dark,
.partners,
.split,
.contact {
grid-template-columns: 1fr;
}
.hero-visual {
transform: none;
}
.cards {
grid-template-columns: repeat(2, 1fr);
}
.news-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav {
flex-wrap: wrap;
justify-content: flex-end;
}
}
@media (max-width: 700px) {
.site-header {
align-items: flex-start;
flex-direction: column;
}
.nav {
justify-content: flex-start;
gap: 10px;
}
.nav a:not(.btn) {
display: none;
}
.hero {
padding-top: 34px;
}
.cards {
grid-template-columns: 1fr;
}
.news-main {
padding-top: 8px;
}
.news-grid {
grid-template-columns: 1fr;
}
.contact-form {
grid-template-columns: 1fr;
}
.captcha-row {
flex-direction: column;
}
.partner-logos {
grid-template-columns: 1fr;
}
.footer {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
[data-animate],
[data-stagger-item] {
opacity: 1 !important;
transform: none !important;
}
}
.footer-info {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 600px;
}
.footer-seo {
font-size: 0.95em;
line-height: 1.5;
}
.footer-seo a {
color: var(--text);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(244, 248, 255, 0.3);
text-underline-offset: 3px;
transition: text-decoration-color 0.3s ease;
}
.footer-seo a:hover {
text-decoration-color: var(--text);
}