/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *,:before,:after {
            --tw-rotate-x:initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial
        }

        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial
        }
    }
}

@layer theme {
    :root,:host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {
    *,:after,:before {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,: host {
        -webkit-text-size-adjust:100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr: where([title]) {
        -webkit-text-decoration:underline dotted;
        text-decoration: underline dotted
    }

    h1,h2,h3,h4,h5,h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,strong {
        font-weight: bolder
    }

    code,kbd,samp,pre {
        font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,ul,menu {
        list-style: none
    }

    img,svg,video,canvas,audio,iframe,embed,object {
        vertical-align: middle;
        display: block
    }

    img,video {
        max-width: 100%;
        height: auto
    }

    button,input,select,optgroup,textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select: is([multiple],[size])) optgroup {
        font-weight:bolder
    }

    :where(select: is([multiple],[size])) optgroup option {
        padding-inline-start:20px
    }

    ::file-selector-button {
        margin-inline-end:4px}

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color:currentColor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block:0}

    ::-webkit-datetime-edit-year-field {
        padding-block:0}

    ::-webkit-datetime-edit-month-field {
        padding-block:0}

    ::-webkit-datetime-edit-day-field {
        padding-block:0}

    ::-webkit-datetime-edit-hour-field {
        padding-block:0}

    ::-webkit-datetime-edit-minute-field {
        padding-block:0}

    ::-webkit-datetime-edit-second-field {
        padding-block:0}

    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0}

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0}

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,input: where([type=button],[type=reset],[type=submit]) {
        -webkit-appearance:button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]: where(:not([hidden=until-found])) {
        display:none!important
    }
}

@layer components;@layer utilities {
    .visible {
        visibility: visible
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .static {
        position: static
    }

    .sticky {
        position: sticky
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .end {
        inset-inline-end: var(--spacing)
    }

    .flex {
        display: flex
    }

    .hidden {
        display: none
    }

    .inline-flex {
        display: inline-flex
    }

    .table {
        display: table
    }

    .transform {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .resize {
        resize: both
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    .transition {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }
}

@font-face {
    font-family: Montserrat;
    src: url(/fonts/montserrat-400.ttf)format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(/fonts/montserrat-500.ttf)format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(/fonts/montserrat-600.ttf)format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(/fonts/montserrat-700.ttf)format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(/fonts/montserrat-800.ttf)format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(/fonts/montserrat-900.ttf)format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap
}

html,body {
    overflow-x: hidden
}

:root {
    --ink: #090909;
    --paper: #f7f7f3;
    --purple: #b4aaff;
    --orange: #ff5600;
    --lime: #b4f000;
    --pink: #ff0082;
    --line: #d9d9d3
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    font-family: Montserrat,Arial,sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.shell {
    width: min(1180px,100% - 48px);
    margin-inline:auto}



.logo {
    letter-spacing: -1.4px;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 950;
    line-height: .78;
    display: flex
}

.logo-spark {
    background: var(--lime);
    clip-path: polygon(50% 0,60% 32%,84% 9%,73% 39%,100% 43%,72% 54%,91% 78%,62% 67%,57% 100%,46% 69%,18% 91%,30% 60%,0 57%,31% 47%,10% 20%,40% 33%);
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 28px;
    display: grid
}

nav {
    gap: 30px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

nav a:hover {
    color: var(--orange)
}

.button {
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 17px 24px;
    font: 800 14px Montserrat,Arial;
    transition: transform .2s,background .2s;
    display: inline-flex
}

.button:hover {
    transform: translateY(-2px)
}

.button-small {
    padding: 13px 20px
}

.button-dark {
    background: var(--ink);
    color: #fff
}

.button-primary {
    background: var(--pink);
    color: #fff
}

.button-ghost {
    border: 2px solid var(--ink);
    padding: 15px 23px
}

.hero {
    grid-template-columns: 1.04fr .96fr;
    align-items: center;
    gap: 50px;
    min-height: 690px;
    padding-block:45px 80px;display: grid
}

.eyebrow {
    background: var(--lime);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 900;
    display: inline-block;
    transform: rotate(-2deg)
}

.hero h1,.section h2,.contact h2 {
    letter-spacing: -.065em;
    margin: 24px 0;
    font-family: Arial Rounded MT Bold,Montserrat,sans-serif;
    font-size: clamp(52px,6vw,82px);
    font-weight: 950;
    line-height: .91
}

.hero h1 span,.process h2 span {
    color: var(--orange)
}

.hero-copy>p {
    max-width: 600px;
    font-size: 18px;
    line-height: 1.6
}

.hero-actions {
    gap: 14px;
    margin-top: 34px;
    display: flex
}

.header.scrolled {
     z-index: 100001!important;
}
.hero-facts {
    text-transform: uppercase;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 38px;
    font-size: 12px;
    display: flex
}

.hero-facts span {
    color: var(--pink)
}

.hero-visual {
    position: relative
}

.night-card {
    height: 515px;
    box-shadow: 0 22px 0 var(--purple);
    background: #0d0d18;
    border-radius: 46% 46% 22px 22px;
    position: relative;
    overflow: hidden
}

.night-card:before {
    content: "";
    background: radial-gradient(circle,var(--purple) 0 2px,transparent 3px);
    opacity: .45;
    background-size: 34px 34px;
    position: absolute;
    inset: 14%
}

.light-drawing {
    color: var(--lime);
    text-shadow: 0 0 12px var(--lime),0 0 30px var(--lime);
    font-size: 150px;
    position: absolute;
    top: 8%;
    right: 12%;
    transform: rotate(14deg)
}

.package {
    aspect-ratio: 1.2;
    background: var(--purple);
    width: 55%;
    box-shadow: 14px 14px 0 var(--orange);
    letter-spacing: -4px;
    border: 8px solid #fff;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    font-size: 39px;
    font-weight: 950;
    line-height: .8;
    display: flex;
    position: absolute;
    bottom: 8%;
    left: 13%;
    transform: rotate(-5deg)
}

.package small {
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 18px;
    font-size: 9px
}

.twinkle {
    color: #fff;
    font-size: 30px;
    position: absolute
}

.t1 {
    top: 16%;
    left: 18%
}

.t2 {
    color: var(--pink);
    bottom: 19%;
    right: 13%
}

.t3 {
    font-size: 16px;
    top: 45%;
    left: 56%
}

.sticker {
    place-items: center;
    font-size: 42px;
    font-weight: 900;
    display: grid;
    position: absolute
}

.sticker-heart {
    background: var(--pink);
    color: #fff;
    border-radius: 50% 50% 45% 45%;
    width: 80px;
    height: 70px;
    top: 28%;
    right: -25px;
    transform: rotate(12deg)
}

.sticker-zap {
    color: var(--lime);
    font-size: 90px;
    bottom: -20px;
    right: 1%;
    transform: rotate(10deg)
}

.sticker-smile {
    background: var(--orange);
    border-radius: 55px 55px 5px 5px;
    width: 90px;
    height: 58px;
    font-size: 47px;
    top: 24%;
    left: -36px
}

.ticker {
    background: var(--ink);
    color: #fff;
    white-space: nowrap;
    width: 101%;
    margin-left: -.5%;
    padding: 18px 0;
    font-weight: 900;
    overflow: hidden;
    transform: rotate(-1deg)
}

.ticker div {
    letter-spacing: .04em;
    font-size: 17px
}

.ticker span {
    color: var(--lime);
    margin: 0 24px
}

.section {
    padding-block:120px}

.section-number {
    text-transform: uppercase;
    letter-spacing: .16em;
    border-top: 1px solid var(--ink);
    padding-top: 12px;
    font-size: 11px;
    font-weight: 900
}

.about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    display: grid
}

.section h2 {
    font-size: clamp(44px,5vw,70px)
}

.about h2 span,.solutions h2 span,.advantages h2 span,.contact h2 span {
    color: var(--pink)
}

.text-link {
    border-bottom: 2px solid;
    gap: 40px;
    padding: 12px 0;
    font-weight: 900;
    display: inline-flex
}

.demo-panel {
    background: var(--purple);
    border-radius: 26px;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 310px;
    margin-top: 75px;
    padding: 40px;
    display: flex;
    position: relative;
    overflow: hidden
}

.demo-panel:after {
    content: "";
    border: 36px solid var(--lime);
    border-radius: 50%;
    width: 280px;
    height: 280px;
    position: absolute;
    top: -105px;
    right: 20%
}

.demo-copy {
    z-index: 1;
    align-items: center;
    gap: 18px;
    display: flex
}

.demo-copy b {
    font-size: 24px
}

.demo-copy small {
    margin-top: 7px;
    display: block
}

.play {
    background: #fff;
    border-radius: 50%;
    place-items: center;
    width: 62px;
    height: 62px;
    padding-left: 4px;
    display: grid
}

.draw-line {
    color: #fff;
    background: var(--ink);
    z-index: 1;
    border-radius: 99px;
    padding: 28px 40px;
    font-size: 30px;
    font-weight: 900;
    transform: rotate(-4deg)
}

.draw-line span {
    color: var(--lime)
}

.benefits {
    background: #fff
}

.section-heading {
    grid-template-columns: 1.3fr .7fr;
    align-items: end;
    gap: 70px;
    display: grid
}

.section-heading p {
    margin: 0 0 30px;
    font-size: 17px;
    line-height: 1.6
}

.benefit-grid {
    grid-template-columns: repeat(3,1fr);
    margin-top: 44px;
    display: grid
}

.benefit-card {
    border: 1px solid var(--line);
    min-height: 310px;
    padding: 34px;
    transition: all .2s;
    position: relative
}

.benefit-card:hover {
    z-index: 2;
    transform: translateY(-6px);
    box-shadow: 0 15px 35px #00000010
}

.benefit-card h3 {
    margin: 45px 0 12px;
    font-size: 23px
}

.benefit-card p {
    font-size: 14px;
    line-height: 1.6
}

.benefit-icon {
    color: var(--pink);
    font-size: 42px
}

.card-arrow {
    position: absolute;
    top: 28px;
    right: 28px
}

.c1 {
    background: var(--purple)
}

.c3 {
    background: var(--lime)
}

.c4 {
    background: var(--orange);
    color: #fff
}

.task-list {
    border-top: 2px solid;
    margin-top: 45px
}

.task-list article {
    border-bottom: 1px solid;
    grid-template-columns: 70px .65fr 1fr 30px;
    align-items: center;
    gap: 25px;
    padding: 25px 8px;
    transition: all .2s;
    display: grid
}

.task-list article:hover {
    background: var(--lime);
    padding-inline:24px}

.task-list span {
    font-size: 12px;
    font-weight: 900
}

.task-list h3 {
    margin: 0;
    font-size: 26px
}

.task-list p {
    margin: 0
}

.cases {
    background: var(--ink);
    color: #fff
}

.light {
    border-color: #fff
}

.case-grid {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1.35fr .65fr;
    gap: 18px;
    margin-top: 45px;
    display: grid
}

.case-main {
    background: var(--purple);
    color: var(--ink);
    border-radius: 24px;
    flex-direction: column;
    grid-row: 1/3;
    justify-content: space-between;
    min-height: 520px;
    padding: 35px;
    display: flex
}

.mock-product {
    aspect-ratio: 1.35;
    border: 8px solid var(--ink);
    width: 58%;
    box-shadow: 14px 14px 0 var(--pink);
    background: #fff;
    place-items: center;
    margin: auto;
    display: grid;
    position: relative;
    transform: rotate(-4deg)
}

.mock-product span {
    font-size: 45px;
    font-weight: 950;
    line-height: .8
}

.mock-product i {
    color: var(--orange);
    font-size: 55px;
    position: absolute;
    top: -25px;
    right: -28px
}

.case-main h3,.case-tile h3 {
    margin: 8px 0;
    font-size: 28px
}

.case-main p {
    max-width: 620px
}

.case-tile {
    color: var(--ink);
    border-radius: 24px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    display: flex
}

.case-tile span {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900
}

.case-tile p {
    margin-bottom: 0
}

.case-orange {
    background: var(--orange);
    color: #fff
}

.case-lime {
    background: var(--lime)
}

.steps {
    grid-template-columns: repeat(6,1fr);
    margin-top: 55px;
    display: grid
}

.steps article {
    border-top: 2px solid;
    padding: 16px 18px 0 0;
    position: relative
}

.steps article:before {
    content: "";
    background: var(--pink);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    top: -7px;
    left: 0
}

.steps>article>span {
    font-size: 11px;
    font-weight: 900
}

.step-icon {
    color: var(--orange);
    margin: 35px 0;
    font-size: 32px
}

.steps p {
    padding-right: 10px;
    font-size: 12px;
    line-height: 1.6
}

.advantages {
    background: var(--purple)
}

.advantages-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    display: grid
}

.advantages h2 {
    font-size: 54px
}

.adv-list {
    border-top: 2px solid
}

.adv-list div {
    border-bottom: 1px solid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    padding: 22px 0;
    display: grid
}

.adv-list b {
    font-size: 34px
}

.adv-list span {
    font-size: 16px;
    font-weight: 700
}

.contact {
    background: var(--lime);
    border-radius: 32px;
    grid-template-columns: 1fr .85fr;
    gap: 80px;
    margin-block:85px;padding: 70px;
    display: grid;
    position: relative;
    overflow: hidden
}

.contact-copy>p {
    max-width: 530px;
    font-size: 17px;
    line-height: 1.6
}

.contact-form {
    z-index: 1;
    flex-direction: column;
    gap: 20px;
    display: flex
}

.contact-form label {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900
}

.contact-form input,.contact-form select {
    background: 0 0;
    border: 0;
    border-bottom: 2px solid;
    outline: none;
    width: 100%;
    margin-top: 7px;
    padding: 13px 0;
    font: 700 16px Montserrat;
    display: block
}

.contact-form button {
    width: 100%;
    margin-top: 8px
}

.contact-form small {
    text-align: center;
    font-size: 9px;
    line-height: 1.5
}

.contact-star {
    color: #fff;
    font-size: 160px;
    position: absolute;
    bottom: -75px;
    left: 43%
}

.to-top {
    border: 2px solid;
    border-radius: 50%;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 24px;
    display: grid
}

@media (max-width: 900px) {
    nav {
        display:none
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 50px
    }

    .hero-visual {
        max-width: 600px
    }

    .about-grid,.section-heading,.advantages-grid,.contact {
        grid-template-columns: 1fr
    }

    .benefit-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .steps {
        grid-template-columns: repeat(3,1fr);
        row-gap: 45px
    }

    .contact {
        gap: 30px
    }

    .case-grid {
        grid-template-columns: 1fr
    }

    .case-main {
        grid-row: auto
    }

    .contact-star {
        display: none
    }
}

@media (max-width: 600px) {
    .shell {
        width:min(100% - 28px,1180px)
    }




    .hero {
        gap: 60px;
        min-height: auto;
        padding-block:45px 65px}

    .hero h1 {
        font-size: 49px
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .night-card {
        height: 400px
    }

    .package {
        font-size: 30px
    }

    .section {
        padding-block:80px}

    .about-grid {
        gap: 15px
    }

    .demo-panel {
        align-items: flex-start;
        min-height: 380px
    }

    .draw-line {
        font-size: 22px;
        position: absolute;
        bottom: 38px;
        left: 24px
    }

    .benefit-grid {
        grid-template-columns: 1fr
    }

    .benefit-card {
        min-height: 260px
    }

    .section-heading {
        gap: 10px
    }

    .task-list article {
        grid-template-columns: 38px 1fr 25px
    }

    .task-list article p {
        grid-column: 2/4;
        font-size: 13px
    }

    .case-main {
        min-height: 480px
    }

    .mock-product {
        width: 75%
    }

    .steps {
        grid-template-columns: repeat(2,1fr)
    }

    .advantages-grid {
        gap: 25px
    }

    .adv-list div {
        grid-template-columns: 100px 1fr
    }

    .contact {
        width: calc(100% - 28px);
        margin-block:45px;padding: 38px 24px
    }

    .contact h2 {
        font-size: 45px
    }

}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .button,.benefit-card,.task-list article {
        transition: none
    }
}

.home-banner {
    background: var(--lime);
    position: relative;
    overflow: hidden
}

.site-logo {
    flex: none;
    width: 72px;
    display: block
}

.site-logo img {
    width: 100%;
    height: auto;
    display: block
}

.home-banner .header {
    z-index: 5;
    height: 86px;
    position: relative
}

.home-banner .header nav {
    gap: 25px;
    font-size: 14px;
    font-weight: 500
}

.home-banner .header nav a {
    opacity: .7
}

.home-banner .header nav a:first-child,.home-banner .header nav a:hover {
    opacity: 1;
    color: var(--ink)
}

.header-tools {
    align-items: center;
    gap: 18px;
    font-size: 24px;
    font-weight: 900;
    display: flex
}

.header-tools .bag {
    border: 3px solid;
    border-radius: 4px;
    place-items: center;
    min-width: 19px;
    height: 22px;
    font-size: 12px;
    display: grid;
    position: relative
}

.header-tools .bag:before {
    content: "";
    border: 2px solid;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    width: 8px;
    height: 7px;
    position: absolute;
    top: -8px
}

.home-banner .hero {
    min-height: 620px;
    padding: 30px 0 38px;
    position: relative
}

.home-banner .hero-copy {
    z-index: 3;
    align-self: center
}

.home-banner .hero h1 {
    letter-spacing: -.055em;
    margin: 0 0 24px;
    font-family: Montserrat,Arial,sans-serif;
    font-size: clamp(48px,5.35vw,76px);
    font-weight: 500;
    line-height: .98
}

.home-banner .hero-copy>p {
    max-width: 500px;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.35
}

.home-banner .hero-actions {
    align-items: center;
    margin-top: 22px
}

.home-banner .hero-actions .button {
    border-radius: 0;
    justify-content: space-between;
    min-width: 220px;
    padding: 16px 22px
}

.hero-more {
    border-bottom: 1px solid;
    align-items: center;
    gap: 38px;
    padding: 11px 2px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex
}

.slider-dots {
    gap: 9px;
    margin-top: 38px;
    display: flex
}

.slider-dots b,.slider-dots i {
    background: var(--ink);
    border-radius: 50%;
    width: 11px;
    height: 11px
}

.slider-dots i {
    opacity: .25
}

.home-banner .hero-visual {
    align-self: end;
    height: 100%;
    min-height: 530px
}

.hero-kids {
    z-index: 2;
    width: 730px;
    max-width: none;
    position: absolute;
    bottom: -40px;
    right: -170px
}

.home-heart {
    z-index: 1;
    width: 190px;
    position: absolute;
    top: 0;
    right: -70px
}

.home-zip {
    z-index: 1;
    width: 115px;
    position: absolute;
    top: 17%;
    left: 2%
}

.home-star {
    z-index: 1;
    width: 80px;
    position: absolute;
    bottom: 4%;
    left: -20px
}

.hero-badge {
    z-index: 3;
    border: 5px solid var(--ink);
    box-shadow: 8px 8px 0 var(--pink);
    background: #fff;
    flex-direction: column;
    padding: 18px 24px;
    display: flex;
    position: absolute;
    top: 22%;
    left: 23%;
    transform: rotate(-8deg)
}

.hero-badge b {
    font-size: 25px
}

.hero-badge span {
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 900
}

.site-footer {
    color: #fff;
    background: #1d1d1d;
    position: relative;
    overflow: hidden
}

.footer-shell {
    padding-block:45px 28px}

.footer-top {
    grid-template-columns: 120px 330px 1fr 180px;
    gap: 30px;
    min-height: 280px;
    display: grid
}

.footer-column {
    flex-direction: column;
    gap: 14px;
    display: flex
}

.site-footer h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500
}

.footer-column a {
    color: #a1a1a1;
    font-size: 14px;
    line-height: 1.25
}

.footer-column a:hover,.footer-legal a:hover {
    color: #fff
}

.footer-top>.site-logo {
    justify-self: end;
    width: 165px
}

.marketplaces {
    min-height: 250px;
    position: relative
}

.market {
    color: #fff;
    letter-spacing: .02em;
    padding: 13px 28px;
    font-size: 17px;
    font-weight: 850;
    display: block;
    position: absolute;
    transform: rotate(-8deg)
}

.market-blue {
    background: #096bff;
    top: 15px;
    left: 4%
}

.market-pink {
    background: #d52aab;
    top: 84px;
    left: 39%;
    transform: rotate(11deg)
}

.market-purple {
    background: #6c2cbc;
    top: 135px;
    left: 10%;
    transform: rotate(7deg)
}

.small-market {
    padding: 8px 48px;
    top: 203px;
    left: 13%;
    transform: rotate(-5deg)
}

.footer-bottom {
    border-top: 1px solid #353535;
    grid-template-columns: 290px 390px 1fr;
    gap: 36px;
    min-height: 245px;
    padding-top: 28px;
    display: grid;
    position: relative
}

.footer-contact,.footer-app {
    z-index: 2;
    flex-direction: column;
    gap: 14px;
    display: flex
}

.footer-contact a {
    font-size: 16px
}

.footer-contact small {
    font-size: 14px
}

.footer-contact p {
    color: #747474;
    margin-top: 25px;
    line-height: 1.45
}

.footer-app>div {
    gap: 8px;
    display: flex
}

.footer-app img {
    width: 138px;
    height: 41px
}

.socials a {
    border: 1px solid #555;
    border-radius: 50%;
    place-items: center;
    width: 37px;
    height: 37px;
    font-size: 12px;
    font-weight: 800;
    display: grid
}

.footer-face {
    width: 560px;
    position: absolute;
    bottom: -260px;
    right: -60px
}

.footer-legal {
    border-top: 1px solid #353535;
    gap: 26px;
    padding-top: 20px;
    display: flex
}

.footer-legal a {
    color: #6e6e6e;
    font-size: 12px
}

@media (max-width: 1200px) {
    .home-banner .header nav {
        display:none
    }
}

@media (max-width: 1000px) {


    .home-banner .hero {
        grid-template-columns: 1fr 1fr
    }

    .footer-top {
        grid-template-columns: 120px 1fr 160px
    }

    .marketplaces {
        display: none
    }

    .footer-bottom {
        grid-template-columns: 1fr 1.2fr
    }

    .footer-face {
        display: none
    }
}

@media (max-width: 650px) {
    .home-banner .header {
        height:72px
    }

    .site-logo {
        width: 70px
    }

    .header-tools {
        font-size: 20px
    }

    .home-banner .hero {
        min-height: 720px;
        padding-top: 45px;
        display: block
    }

    .home-banner .hero h1 {
        font-size: 44px
    }

    .home-banner .hero-copy>p {
        max-width: 340px;
        font-size: 16px
    }

    .home-banner .hero-actions {
        align-items: flex-start
    }

    .home-banner .hero-actions .button {
        min-width: 245px
    }

    .hero-more {
        display: none
    }

    .home-banner .hero-visual {
        min-height: 330px
    }

    .hero-kids {
        width: 500px;
        bottom: -35px;
        right: -150px
    }

    .hero-badge {
        padding: 12px 17px;
        top: 26%;
        left: 0
    }

    .hero-badge b {
        font-size: 19px
    }

    .home-heart {
        width: 125px;
        top: 8%;
        right: -45px
    }

    .home-zip {
        width: 78px;
        top: 2%;
        left: auto;
        right: 18%
    }

    .home-star {
        width: 55px
    }

    .footer-shell {
        padding-block:38px}

    .footer-top {
        grid-template-columns: 1fr 1fr;
        min-height: auto
    }

    .footer-top>.site-logo,.footer-catalog {
        display: none
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        padding-top: 28px
    }

    .footer-app {
        margin-top: 20px
    }

    .footer-legal {
        flex-direction: column;
        gap: 10px
    }

    .site-footer h3 {
        font-size: 17px
    }
}

body,button,input,select,textarea,.hero h1,.section h2,.contact h2 {
    font-family: Montserrat,sans-serif
}

.hero-girls {
    mix-blend-mode: multiply;
    width: 780px;
    bottom: -10px;
    right: -155px
}

.hero-orbit {
    border: 38px solid var(--orange);
    z-index: 1;
    border-radius: 50%;
    width: 285px;
    height: 285px;
    position: absolute;
    bottom: 25px;
    right: -78px
}

.hero-spark {
    color: var(--pink);
    z-index: 3;
    font-size: 92px;
    line-height: 1;
    position: absolute;
    top: 5%;
    right: 4%
}

.hero-cloud {
    background: var(--purple);
    z-index: 3;
    border-radius: 70px 70px 15px 15px;
    width: 190px;
    height: 82px;
    position: absolute;
    bottom: 6%;
    left: 3%
}

.hero-cloud i {
    color: #fff;
    font-size: 25px;
    font-style: normal;
    position: absolute;
    top: 25px
}

.hero-cloud i:first-child {
    left: 51px
}

.hero-cloud i:last-child {
    right: 51px
}

.hero-asterisk {
    color: var(--orange);
    z-index: 1;
    font-size: 90px;
    position: absolute;
    top: 9%;
    left: 4%
}

@media (max-width: 650px) {
    .hero-girls {
        width:550px;
        bottom: -15px;
        right: -215px
    }

    .hero-orbit {
        border-width: 27px;
        width: 190px;
        height: 190px;
        bottom: 10px;
        right: -65px
    }

    .hero-spark {
        font-size: 58px;
        top: 7%;
        right: 5%
    }

    .hero-cloud {
        width: 125px;
        height: 58px;
        bottom: 3%;
        left: -4%
    }

    .hero-cloud i {
        font-size: 18px;
        top: 18px
    }

    .hero-cloud i:first-child {
        left: 32px
    }

    .hero-cloud i:last-child {
        right: 32px
    }

    .hero-asterisk {
        font-size: 58px;
        top: 4%;
        left: 3%
    }
}

.hero-girls {
    mix-blend-mode: normal;
    width: 1050px;
    right: -230px
}

@media (max-width: 650px) {
    .hero-girls {
        width:780px;
        right: -305px
    }
}

.button,.demo-panel,.case-main,.case-tile,.contact {
    border-radius: 0
}

.video-feature {
    border: 2px solid var(--ink);
    background: #fff;
    grid-template-columns: .72fr 1.28fr;
    min-height: 430px;
    margin-top: 70px;
    display: grid
}

.video-intro {
    flex-direction: column;
    align-items: flex-start;
    padding: 42px;
    display: flex
}

.video-intro>span {
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--pink);
    color: #fff;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 900
}

.video-intro h3 {
    letter-spacing: -.04em;
    margin: 34px 0 18px;
    font-size: 31px;
    line-height: 1.05
}

.video-intro p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65
}

.video-intro small {
    color: #777;
    margin-top: auto;
    padding-top: 30px;
    font-size: 10px;
    line-height: 1.45
}

.video-frame {
    background: #101020;
    min-height: 430px;
    position: relative;
    overflow: hidden
}

.video-frame:before {
    content: "";
    background: radial-gradient(circle at 57% 48%,#b4f00033,transparent 28%),radial-gradient(circle,var(--purple) 0 2px,transparent 3px);
    opacity: .75;
    background-size: auto,34px 34px;
    position: absolute;
    inset: 12%
}

.video-frame:after {
    content: "";
    border: 6px solid var(--purple);
    width: 255px;
    height: 145px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)rotate(-6deg);
    box-shadow: 0 0 22px #b4aaff8c
}

.video-glow {
    color: var(--lime);
    text-shadow: 0 0 18px var(--lime),0 0 40px var(--lime);
    font-size: 115px;
    position: absolute;
    top: 12%;
    right: 15%;
    transform: rotate(13deg)
}

.video-play {
    z-index: 3;
    background: var(--pink);
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    width: 82px;
    height: 82px;
    padding-left: 7px;
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.video-caption {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
    z-index: 3;
    justify-content: space-between;
    font-size: 12px;
    display: flex;
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px
}

.video-caption span {
    color: var(--purple)
}

@media (max-width: 750px) {
    .video-feature {
        grid-template-columns:1fr;
        margin-top: 45px
    }

    .video-intro {
        min-height: 330px;
        padding: 28px
    }

    .video-frame {
        min-height: 330px
    }

    .video-glow {
        font-size: 82px
    }

    .video-play {
        width: 68px;
        height: 68px
    }
}

.section h2,.contact h2 {
    letter-spacing: -.05em;
    font-weight: 500
}

.section h2 span,.contact h2 span {
    font-weight: 800
}

.about,.benefits>.shell,.solutions,.cases>.shell,.process,.advantages-grid {
    z-index: 2;
    position: relative
}

.about {
    padding-top: 150px
}

.about:after {
    content: "✳";
    color: var(--orange);
    z-index: 4;
    font-size: 150px;
    line-height: 1;
    position: absolute;
    bottom: -85px;
    right: 4%
}

.benefits {
    background: var(--purple);
    padding-top: 155px;
    position: relative
}

.benefits:before {
    content: "";
    background: var(--purple);
    border-radius: 220px 220px 0 0;
    width: 420px;
    height: 145px;
    position: absolute;
    top: -92px;
    left: 8%
}

.benefits:after {
    content: "●  ●";
    color: #fff;
    letter-spacing: 36px;
    z-index: 1;
    font-size: 29px;
    position: absolute;
    top: -26px;
    left: calc(8% + 126px)
}

.benefit-grid {
    border: 2px solid var(--ink)
}

.benefit-card {
    border-color: var(--ink);
    background: #fff
}

.benefit-card.c1 {
    background: var(--lime)
}

.benefit-card.c3 {
    background: var(--orange);
    color: #fff
}

.benefit-card.c4 {
    background: var(--pink)
}

.solutions {
    padding-top: 155px
}

.solutions:before {
    content: "✦";
    color: var(--lime);
    font-size: 130px;
    position: absolute;
    top: 45px;
    right: 4%;
    transform: rotate(12deg)
}

.cases {
    position: relative
}

.cases:before {
    content: "";
    border: 34px solid var(--orange);
    border-bottom: 0;
    border-radius: 140px 140px 0 0;
    width: 250px;
    height: 125px;
    position: absolute;
    top: -70px;
    left: -70px
}

.process {
    padding-top: 150px
}

.process:after {
    content: "♥";
    color: var(--pink);
    z-index: 4;
    font-size: 110px;
    position: absolute;
    bottom: -68px;
    right: 2%;
    transform: rotate(8deg)
}

.advantages {
    padding-top: 155px;
    position: relative
}

.advantages:before {
    content: "";
    background: var(--purple);
    border-radius: 180px 180px 0 0;
    width: 320px;
    height: 110px;
    position: absolute;
    top: -72px;
    right: 10%
}

.video-intro h3 {
    margin-top: 0
}

.video-feature {
    border-left: 0;
    border-right: 0
}

.contact {
    margin-top: 120px
}

.section-heading {
    position: relative
}

.section-heading h2 {
    margin-top: 0
}

@media (max-width: 750px) {
    .about {
        padding-top:100px
    }

    .about:after {
        font-size: 90px;
        bottom: -50px
    }

    .benefits {
        padding-top: 105px
    }

    .benefits:before {
        width: 250px;
        height: 90px;
        top: -56px
    }

    .benefits:after {
        letter-spacing: 23px;
        font-size: 20px;
        top: -19px;
        left: 96px
    }

    .solutions,.process,.advantages {
        padding-top: 105px
    }

    .solutions:before {
        font-size: 76px;
        top: 30px
    }

    .cases:before {
        border-width: 22px;
        width: 150px;
        height: 75px;
        top: -42px
    }

    .process:after {
        font-size: 75px;
        bottom: -45px
    }
}

.advantages {
    background: var(--purple);
    padding-block:130px 110px;overflow: hidden
}

.advantages:before {
    display: none
}

.trust-stage {
    grid-template-columns: 1fr 380px;
    align-items: center;
    gap: 70px;
    display: grid;
    position: relative
}

.trust-heading {
    z-index: 4;
    position: relative
}

.trust-heading h2 {
    margin: 0 0 28px;
    font-size: clamp(52px,6vw,82px);
    line-height: .92
}

.trust-heading h2 span {
    color: var(--pink);
    font-weight: 850
}

.trust-heading p {
    max-width: 510px;
    margin: 0;
    font-size: 17px;
    line-height: 1.55
}

.trust-seal {
    background: var(--lime);
    z-index: 1;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    justify-self: end;
    align-items: center;
    width: 330px;
    height: 330px;
    display: flex;
    position: relative;
    transform: rotate(4deg)
}

.trust-seal:after {
    content: "";
    border: 2px solid var(--ink);
    border-radius: 50%;
    position: absolute;
    inset: 19px
}

.trust-seal b {
    letter-spacing: -.08em;
    font-size: 80px;
    line-height: .9
}

.trust-seal span {
    text-align: center;
    text-transform: uppercase;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35
}

.trust-stats {
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    z-index: 2;
    grid-column: 1/-1;
    grid-template-columns: repeat(4,1fr);
    margin-top: 35px;
    display: grid;
    position: relative
}

.trust-stats>div {
    border-right: 1px solid var(--ink);
    flex-direction: column;
    justify-content: space-between;
    min-height: 205px;
    padding: 30px 24px;
    transition: background .2s,transform .2s;
    display: flex;
    position: relative
}

.trust-stats>div:last-child {
    border-right: 0
}

.trust-stats>div:hover {
    background: #fff;
    transform: translateY(-7px)
}

.trust-stats b {
    letter-spacing: -.06em;
    font-size: clamp(42px,4.3vw,64px);
    font-weight: 700;
    line-height: .9
}

.trust-stats span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4
}

.trust-stats>div:nth-child(3) b {
    color: var(--orange);
    transform-origin: 0;
    font-size: 82px;
    transform: rotate(-5deg)
} 

.trust-spark {
    color: var(--orange);
    font-size: 100px;
    position: absolute;
    top: -85px;
    right: 33%;
    transform: rotate(9deg)
}

.trust-heart {
    color: var(--pink);
    font-size: 105px;
    position: absolute;
    bottom: -120px;
    left: -80px;
    transform: rotate(-10deg)
}

@media (max-width: 850px) {
    .advantages {
        padding-block:95px 80px
    }
    .trust-heading {
        margin-bottom: 150px;
    }

    .trust-stage {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .trust-seal {
        justify-self: start;
        width: 270px;
        height: 270px
    }

    .trust-seal b {
        font-size: 65px
    }

    .trust-products {
        justify-self: center;
        width: min(690px,108vw);
        margin: -245px -10vw -35px 150px;
        position: relative;
        top: auto;
        right: auto
    }

    .trust-stats {
        grid-template-columns: repeat(2,1fr);
        margin-top: 15px
    }

    .trust-stats>div {
        border-bottom: 1px solid var(--ink)
    }

    .trust-stats>div:nth-child(2) {
        border-right: 0
    }

    .trust-stats>div:nth-child(3),.trust-stats>div:nth-child(4) {
        border-bottom: 0
    }

    .trust-spark {
        font-size: 74px;
        top: 28%;
        right: 3%
    }

    .trust-heart {
        display: none
    }
}

@media (max-width: 650px) {
    .trust-heading {
        margin-bottom: 60px;
    }
}

@media (max-width: 500px) {
    .trust-heading h2 {
        font-size:46px
    }

    .trust-heading p {
        font-size: 15px
    }

    .trust-seal {
        width: 230px;
        height: 230px
    }

    .trust-products {
        width: 112vw;
        margin: -205px -19vw -20px 115px
    }

    .trust-stats>div {
        min-height: 170px;
        padding: 22px 14px
    }

    .trust-stats b {
        font-size: 38px
    }

    .trust-stats>div:nth-child(3) b {
        font-size: 62px
    }

    .trust-stats span {
        font-size: 12px
    }
}

@media (min-width: 851px) {
    .trust-stage {
        grid-template-columns:1fr 320px
    }

    .trust-heading h2 {
        font-size: clamp(50px,5.4vw,74px);
        line-height: .9
    }

    .trust-heading p {
        max-width: 465px
    }

    .trust-seal {
        z-index: 5;
        width: 190px;
        height: 190px;
        position: absolute;
        top: 335px;
        right: -35px;
        transform: rotate(5deg)
    }

    .trust-seal:after {
        inset: 11px
    }

    .trust-seal b {
        font-size: 47px
    }

    .trust-seal span {
        margin-top: 10px;
        font-size: 8px
    }

    .trust-products {
        width: min(680px,56vw);
        top: 55px;
        right: -5px
    }

    .trust-stats {
        margin-top: 110px
    }
}

@media (max-width: 850px) {
    .trust-seal {
        width:245px;
        height: 245px;
        transform: rotate(4deg)
    }

    .trust-seal:after {
        inset: 15px
    }

    .trust-seal b {
        font-size: 58px
    }

    .trust-seal span {
        margin-top: 13px;
        font-size: 10px
    }

    .trust-products {
        margin-top: -220px
    }
}

@media (max-width: 500px) {
    .trust-heading h2 {
        font-size:43px;
        line-height: .92
    }

    .trust-seal {
        width: 210px;
        height: 210px
    }

    .trust-seal b {
        font-size: 50px
    }

    .trust-products {
        margin-top: -185px
    }
}


.contact {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px
}

.contact-copy h2 {
    margin: 0 0 30px;
    font-size: clamp(48px,5vw,68px);
    line-height: .92
}

.contact-copy>p {
    margin: 0
}

@media (max-width: 900px) {
    .contact {
        grid-template-columns:1fr;
        align-items: stretch
    }

    .contact-copy h2 {
        font-size: clamp(46px,9vw,64px)
    }
}

.cases.cases {
    overflow: visible
}

.marketplaces {
    justify-content: center;
    align-items: flex-start;
    min-height: 250px;
    display: flex
}

.marketplaces>img {
    width: min(100%,348px);
    height: auto;
    display: block
}

.socials a {
    padding: 9px
}

.socials a svg {
    fill: #fff;
    width: 100%;
    height: 100%;
    display: block
}

.footer-face {
    z-index: 10;
    width: 560px;
    bottom: 0;
    right: -60px
}

.footer-legal {
    z-index: 2;
    position: relative
}

.cases {
    z-index: 3;
    position: relative;
    overflow: visible
}

.cases:before {
    z-index: 4
}

.cases>.shell {
    z-index: 5;
    position: relative
}

.hero-spark,.hero-asterisk {
    object-fit: contain;
    height: auto;
    display: block
}

.hero-spark {
    width: 68px
}

.hero-asterisk {
    width: 72px
}

.about:after {
    display: none
}

.benefits-decoration {
    z-index: 4;
    pointer-events: none;
    width: 125px;
    height: 125px;
    position: absolute;
    top: -42px;
    left: calc(50% - 529px)
}

.solutions:before {
    display: none
}

.solutions-decoration {
    z-index: 1;
    pointer-events: none;
    width: 138px;
    height: 138px;
    position: absolute;
    top: 76px;
    right: 0
}

.benefit-icon i .figma-card-icon,.benefit-card:hover .benefit-icon i .figma-card-icon {
    object-fit: contain;
    opacity: 1;
    width: 29px;
    height: 29px;
    display: block;
    position: static;
    transform: none
}

.trust-spark {
    object-fit: contain;
    width: 123px;
    height: 123px;
    font-size: 0;
    display: block
}

.contact-form select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/wp-content/themes/drawlights/assets/corporate/original/figma-icons/select-chevron.svg);
    background-position: right 5px center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
    padding-right: 28px
}

.socials a img {
    object-fit: contain;
    display: block;
    width: 17px!important;
    height: 17px!important
}

.trust-heart {
    object-fit: contain;
    width: 119px;
    height: 100px;
    font-size: 0;
    display: block
}

.process:after {
    content: "";
    color: #0000;
    background: url(/wp-content/themes/drawlights/assets/corporate/original/figma-icons/trust-heart.svg) 50%/contain no-repeat;
    width: 119px;
    height: 100px;
    font-size: 0;
    bottom: -48px
}

.advantages {
    overflow: visible
}

.trust-heart {
    bottom: 235px;
    left: -30px
}

.benefit-icon i .benefit-symbol-vector,.benefit-card:hover .benefit-icon i .benefit-symbol-vector {
    width: 42px;
    height: 42px
}

@media (max-width: 750px) {
    .hero-spark {
        width:52px
    }

    .hero-asterisk {
        width: 54px
    }

    .benefits-decoration {
        width: 88px;
        height: 88px;
        top: -30px;
        left: 8%
    }

    .solutions-decoration {
        width: 82px;
        height: 82px;
        top: 30px
    }

    .trust-spark {
        width: 82px;
        height: 82px
    }
}

.task-list {
    position: relative
}

.task-list article {
    z-index: 1;
    outline: none;
    position: relative
}

:is(.task-list article:hover,.task-list article:focus-visible) {
    z-index: 12
}

.task-photos {
    pointer-events: none;
    opacity: 0;
    z-index: 20;
    width: 330px;
    height: 220px;
    transition: opacity .18s,transform .24s;
    position: absolute;
    top: 50%;
    right: 72px;
    transform: translateY(-43%)scale(.92)
}

.task-photo {
    object-fit: cover;
    background: #fff;
    border: 8px solid #fff;
    width: 165px;
    height: 205px;
    position: absolute;
    box-shadow: 0 12px 28px #0003
}

.task-photo.photo-1 {
    top: 7px;
    left: 15px;
    transform: rotate(-5deg)
}

.task-photo.photo-2 {
    top: 20px;
    right: 8px;
    transform: rotate(6deg)
}

.task-list article:hover .task-photos,.task-list article:focus .task-photos,.task-list article:focus-within .task-photos {
    opacity: 1;
    transform: translateY(-50%)scale(1)
}

.task-list article>p {
    transition: opacity .18s
}

.task-list article:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ink)
}

@media (max-width: 800px) {
    .task-list article {
        overflow:visible
    }

    .task-photos {
        width: 245px;
        height: 170px;
        top: 100%;
        right: 18px;
        transform: translateY(-20%)scale(.92)
    }

    .task-photo {
        border-width: 6px;
        width: 125px;
        height: 150px
    }

    .task-list article:hover .task-photos,.task-list article:focus .task-photos,.task-list article:focus-within .task-photos {
        transform: translateY(-36%)scale(1)
    }
}

@media (max-width: 520px) {
    .task-list article {
        padding-block:22px
    }

    .task-photos {
        width: 205px;
        height: 145px;
        right: 4px
    }

    .task-photo {
        border-width: 5px;
        width: 104px;
        height: 125px
    }

    .task-list article:hover>p,.task-list article:focus>p {
        opacity: 0
    }
}

.task-list article {
    grid-template-columns: 70px 300px minmax(210px,1fr) 350px 38px;
    gap: 16px
}

.task-list article>span {
    grid-column: 1;
    font-size: 26px;
    font-weight: 750;
    line-height: 1
}

.task-list article>h3 {
    grid-column: 2;
    font-size: 26px;
    font-weight: 500
}

.task-list article>p {
    grid-column: 3;
    margin: 0
}

.task-list article>.task-photos {
    grid-column: 4;
    right: 58px
}

.task-list article>b {
    text-align: right;
    grid-column: 5;
    font-size: 29px;
    font-weight: 700;
    line-height: 1
}

.task-arrow {
    width: 29px;
    height: 29px;
    margin-left: auto;
    background: currentColor;
    -webkit-mask: url("/wp-content/themes/drawlights/assets/img/svg/Arrow%205.svg") center/29px auto no-repeat;
    mask: url("/wp-content/themes/drawlights/assets/img/svg/Arrow%205.svg") center/29px auto no-repeat;
    transform: rotate(-45deg)
}

.task-arrow img {
    display: none
}

.contact-submit-arrow {
    width: 18px;
    height: 18px;
    margin-left: auto;
    background: currentColor;
    -webkit-mask: url("/wp-content/themes/drawlights/assets/img/svg/Arrow%205.svg") center/18px auto no-repeat;
    mask: url("/wp-content/themes/drawlights/assets/img/svg/Arrow%205.svg") center/18px auto no-repeat;
    transform: rotate(-45deg)
}

.task-list article:hover>p,.task-list article:focus>p {
    opacity: 1
}

@media (max-width: 1050px) {
    .task-list article {
        grid-template-columns:60px 235px minmax(180px,1fr) 285px 34px;
        gap: 12px
    }

    .task-list article>.task-photos {
        width: 280px;
        right: 44px
    }

    .task-photo {
        width: 145px;
        height: 185px
    }

    .task-list article>span,.task-list article>h3 {
        font-size: 22px
    }
}

@media (max-width: 750px) {
    .task-list article {
        grid-template-columns:44px 1fr 34px;
        gap: 12px
    }

    .task-list article>span {
        grid-column: 1;
        font-size: 21px
    }

    .task-list article>h3 {
        grid-column: 2;
        font-size: 22px
    }

    .task-list article>p {
        grid-column: 2/4
    }

    .task-list article>.task-photos {
        grid-column: auto;
        right: 8px
    }

    .task-list article>b {
        grid-area: 1/3;
        font-size: 26px
    }
}

.benefit-grid {
    border: 2px solid var(--ink);
    gap: 0
}

.benefit-card {
    border: 0;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    isolation: isolate;
    transition: transform .28s,box-shadow .28s;
    overflow: hidden
}

.benefit-card:nth-child(3n) {
    border-right: 0
}

.benefit-card:nth-last-child(-n+3) {
    border-bottom: 0
}

.benefit-card:after {
    content: "";
    border: 2px solid var(--ink);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity .18s;
    position: absolute;
    inset: -1px
}

.benefit-card:hover {
    z-index: 3;
    box-shadow: inset 0 0 0 1px var(--ink);
    transform: none
}

.benefit-card:hover:after {
    opacity: 1
}

.benefit-icon {
    width: 76px;
    height: 76px;
    color: var(--pink);
    clip-path: polygon(50% 0,61% 34%,88% 12%,72% 42%,100% 50%,70% 59%,87% 88%,59% 70%,50% 100%,40% 69%,12% 88%,29% 58%,0 50%,30% 41%,12% 12%,40% 33%);
    background: var(--lime);
    place-items: center;
    font-size: 42px;
    transition: width .32s,height .32s,transform .32s,clip-path .32s;
    display: grid;
    position: relative;
    overflow: hidden
}

.benefit-icon img {
    object-fit: cover;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .24s,transform .4s;
    position: absolute;
    inset: 0;
    transform: scale(1.25)
}

.benefit-icon i {
    z-index: 1;
    font-style: normal;
    line-height: 1;
    transition: opacity .18s,transform .28s;
    position: relative
}

.benefit-card:nth-child(2n) .benefit-icon {
    clip-path: circle(48%);
    background: var(--purple)
}

.benefit-card:nth-child(3n) .benefit-icon {
    clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
    background: var(--orange)
}

.benefit-card:hover .benefit-icon {
    clip-path: circle(48%);
    width: 112px;
    height: 112px;
    transform: rotate(-7deg)
}

.benefit-card:nth-child(2n):hover .benefit-icon {
    transform: rotate(7deg)
}

.benefit-card:hover .benefit-icon img {
    opacity: 1;
    transform: scale(1)
}

.benefit-card:hover .benefit-icon i {
    opacity: 0;
    transform: scale(.65)
}

.benefit-card h3,.benefit-card .card-arrow {
    transition: transform .28s
}

.benefit-card:hover h3 {
    transform: translateY(5px)
}

.benefit-card:hover .card-arrow {
    transform: translate(4px,-4px)rotate(8deg)
}

.benefit-card .benefit-icon {
    clip-path: circle(48%);
    color: var(--pink);
    background: #b4aaffb8
}

.benefit-card.c0 .benefit-icon,.benefit-card.c4 .benefit-icon {
    clip-path: polygon(50% 0,50% 0,61% 34%,61% 34%,88% 12%,88% 12%,72% 42%,72% 42%,100% 50%,100% 50%,70% 59%,70% 59%,87% 88%,87% 88%,59% 70%,59% 70%,50% 100%,50% 100%,40% 69%,40% 69%,12% 88%,12% 88%,29% 58%,29% 58%,0 50%,0 50%,30% 41%,30% 41%,12% 12%,12% 12%,40% 33%,40% 33%);
    background: var(--lime)
}

.benefit-card.c1 .benefit-icon {
    color: var(--ink);
    background: #ffffff7a
}

.benefit-card.c2 .benefit-icon {
    clip-path: circle(48%);
    background: var(--orange);
    color: #fff
}

.benefit-card.c3 .benefit-icon {
    color: #fff;
    background: #ffffff61
}

.benefit-card.c4 .benefit-icon i {
    display: none
}

.benefit-card.c5 .benefit-icon {
    clip-path: circle(48%);
    color: var(--pink);
    background: #b4aaffb8
}

.benefit-card.c2 .benefit-icon i,.benefit-card.c5 .benefit-icon i {
    place-items: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    display: grid;
    transform: none
}

.benefit-card.c2 .benefit-icon svg,.benefit-card.c5 .benefit-icon svg {
    width: 29px;
    height: 29px;
    display: block
}

.benefit-card.c2 .benefit-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4px;
    stroke-linecap: round;
    stroke-linejoin: round
}

.benefit-card.c5 .benefit-icon svg {
    fill: currentColor
}

.benefit-card.c2:hover .benefit-icon i,.benefit-card.c5:hover .benefit-icon i {
    transform: scale(.65)
}

.benefit-card.c0:hover .benefit-icon,.benefit-card.c4:hover .benefit-icon {
    clip-path: polygon(50% 0,59.8% 1%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99% 40.2%,100% 50%,99% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99%,50% 100%,40.2% 99%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1% 59.8%,0 50%,1% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1%)
}

.about-grid {
    align-items: start
}

.about h2 {
    margin-top: 0;
    font-size: clamp(44px,4.6vw,64px)
}

.about h2 span {
    white-space: nowrap
}

.about-text {
    padding-top: 0
}

.about-text p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.52
}

.about-text p:first-child {
    font-weight: 700
}

.about-link {
    width: max-content;
    margin: 44px auto 0 0;
    display: flex
}

.video-feature {
    border: 0
}

.about:after {
    left: 4%;
    right: auto
}

.benefits:before {
    left: auto;
    right: 8%
}

.benefits:after {
    left: auto;
    right: calc(8% + 104px)
}

.video-frame video {
    object-fit: cover;
    z-index: 1;
    background: #101020;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.video-frame:before,.video-frame:after,.video-glow,.video-play,.video-caption {
    transition: opacity .25s
}

.video-frame.is-playing:before,.video-frame.is-playing:after,.video-frame.is-playing .video-glow,.video-frame.is-playing .video-play,.video-frame.is-playing .video-caption {
    opacity: 0;
    pointer-events: none
}

.home-banner .hero {
    grid-template-columns: 1.12fr .88fr;
    gap: 26px
}

.home-banner .hero h1 {
    white-space: nowrap;
    font-size: clamp(47px,4.75vw,68px)
}

.home-banner .hero-copy>p {
    max-width: none;
    font-size: 16px
}

.home-banner .hero-copy>p span {
    white-space: nowrap
}

.home-banner .hero-visual {
    min-height: 550px
}

.hero-girls {
    width: 1140px;
    bottom: -38px;
    right: -255px
}

@media (max-width: 1000px) {
    .home-banner .hero {
        grid-template-columns:1.08fr .92fr;
        gap: 12px
    }

    .home-banner .hero h1 {
        font-size: clamp(45px,5.6vw,56px)
    }

    .home-banner .hero-copy>p {
        font-size: 14px
    }

    .hero-girls {
        width: 1020px;
        right: -310px
    }
}

@media (max-width: 650px) {
    .home-banner .hero h1 {
        white-space:normal;
        font-size: 43px
    }

    .home-banner .hero-copy>p {
        font-size: 15px
    }

    .home-banner .hero-copy>p span {
        white-space: normal
    }

    .home-banner .hero-visual {
        min-height: 350px
    }

    .hero-girls {
        width: 820px;
        bottom: -38px;
        right: -325px
    }
}

.header-tools {
    gap: 19px
}

.header-icon {
    cursor: pointer;
    background: 0 0;
    border: 0;
    place-items: center;
    padding: 0;
    display: grid;
    position: relative
}

.header-icon img {
    display: block
}

.search-tool,.fav-tool,.search-tool img,.fav-tool img {
    width: 30px;
    height: 30px
}

.cart-tool {
    width: 22px;
    height: 30px
}

.cart-tool img {
    width: 17px;
    height: 22px
}

.cart-tool span {
    color: var(--ink);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.hero-cloud {
    object-fit: contain;
    background: 0 0;
    border-radius: 0;
    width: 210px;
    height: auto;
    bottom: 4%;
    left: 2%
}

@media (max-width: 650px) {
    .hero-cloud {
        width:145px;
        height: auto;
        bottom: 2%;
        left: -5%
    }
}

.video-play {
    place-items: center;
    padding: 0;
    display: grid
}

.video-play svg {
    fill: currentColor;
    width: 25px;
    height: 25px;
    display: block
}

.benefits:before,.benefits:after {
    display: none
}

.benefits-face {
    z-index: 1;
    pointer-events: none;
    width: 420px;
    height: auto;
    position: absolute;
    top: -96px;
    right: 8%
}

@media (max-width: 750px) {
    .benefits-face {
        width:250px;
        top: -57px;
        right: 5%
    }
}

.cases {
    padding-block:130px;overflow: hidden
}

.works-heading {
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 80px;
    margin-bottom: 62px;
    display: grid
}

.works-heading>div>span {
    color: var(--lime);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 22px;
    font-size: 12px;
    font-weight: 800;
    display: inline-block
}

.works-heading h2 {
    color: #fff;
    margin: 0
}

.works-heading p {
    color: #bbb;
    max-width: 470px;
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.55
}

.works-grid {
    background: #2b2b2b;
    border: 2px solid #2b2b2b;
    grid-template-columns: repeat(12,1fr);
    gap: 2px;
    display: grid
}

.work-card {
    min-width: 0;
    min-height: 500px;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: #f5f4ef;
    border: 0;
    grid-column: span 6;
    padding: 24px 26px 26px;
    position: relative;
    overflow: hidden
}

.work-wide {
    grid-column: span 7
}

.work-narrow {
    grid-column: span 5
}

.work-third {
    grid-column: span 4
}

.work-full {
    grid-column: 1/-1;
    min-height: 560px
}

.work-number {
    letter-spacing: .12em;
    z-index: 5;
    font-size: 11px;
    font-weight: 800;
    position: absolute;
    top: 22px;
    right: 24px
}

.work-visual {
    height: 345px;
    margin: 4px 0 18px;
    position: relative
}

.work-full .work-visual {
    height: 400px
}

.work-image {
    object-fit: contain;
    filter: drop-shadow(0 12px 12px #0000001a);
    max-height: 94%;
    transition: transform .35s;
    display: block;
    position: absolute
}

.work-image.image-1 {
    object-position: left center;
    width: 70%;
    height: 88%;
    top: 2%;
    left: 2%
} 

.work-image.image-2 {
    object-position: right bottom;
    width: 43%;
    height: 65%;
    bottom: 0;
    right: 1%;
    transform: rotate(2deg)
}

.work-image.image-3 {
    object-position: center bottom;
    width: 35%;
    height: 48%;
    bottom: -2%;
    left: 35%;
    transform: rotate(-2deg)
}

.work-image.image-4 {
    width: 29%;
    height: 40%;
    bottom: 1%;
    right: 23%;
    transform: rotate(3deg)
} 

.images-3 .image-1 {
    width: 58%;
    height: 84%
}

.images-4 .image-1 {
    width: 48%;
    height: 85%
}

.images-4 .image-2 {
    width: 31%;
    height: 48%;
    top: 7%;
    bottom: auto;
    right: 18%
}

.work-full .image-1 {
    width: 42%;
    left: 4%
}

.work-full .image-2 {
    width: 34%;
    height: 61%;
    bottom: 2%;
    right: 27%
}

.work-full .image-3 {
    width: 33%;
    height: 56%;
    bottom: 3%;
    left: auto;
    right: 1%
}

.work-meta {
    border-top: 1px solid var(--ink);
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-top: 18px;
    display: flex
}

.work-meta h3 {
    margin: 0 0 7px;
    font-size: 25px
}

.work-meta p {
    max-width: 340px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45
}

.work-meta b {
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    transition: transform .25s
}

.work-card:hover .work-image.image-1 {
    transform: scale(1.035)rotate(-1deg)
}

.work-card:hover .work-image.image-2 {
    transform: scale(1.055)rotate(4deg)
}

.work-card:hover .work-image.image-3 {
    transform: scale(1.06)rotate(-4deg)
}

.work-card:hover .work-image.image-4 {
    transform: scale(1.06)rotate(5deg)
}

.work-card:hover .work-meta b {
    transform: translate(4px,-4px)
}

.works-cta {
    color: #fff;
    border-bottom: 2px solid #fff;
    gap: 55px;
    width: max-content;
    margin: 54px 0 0 auto;
    padding: 13px 0;
    font-size: 15px;
    font-weight: 800;
    display: flex
}

.work-lightbox {
    z-index: 100;
    background: #000000e0;
    place-items: center;
    padding: 34px;
    display: grid;
    position: fixed;
    inset: 0
}

.lightbox-panel {
    width: min(1180px,100%);
    max-height: 92vh;
    color: var(--ink);
    background: #f5f4ef;
    padding: 36px;
    position: relative;
    overflow: auto
}

.lightbox-close {
    cursor: pointer;
    background: 0 0;
    border: 0;
    font: 400 44px/1 Montserrat;
    position: absolute;
    top: 15px;
    right: 24px
}

.lightbox-title {
    padding-right: 60px
}

.lightbox-title>span {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    font-weight: 800
}

.lightbox-title h3 {
    margin: 10px 0 7px;
    font-size: 38px
}

.lightbox-title p {
    margin: 0;
    font-size: 14px
}

.lightbox-images {
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
    gap: 16px;
    margin-top: 30px;
    display: grid
}

.lightbox-images img {
    object-position: unset!important;
    position: static!important;
    inset: auto!important;
    object-fit: contain!important;
    max-height: none!important;
    transform: none!important;
    filter: none!important;
    background: #fff!important;
    width: 100%!important;
    height: 52vh!important;
    min-height: 280px!important;
}

@media (max-width: 900px) {
    .works-heading {
        grid-template-columns:1fr;
        gap: 20px
    }

    .work-wide,.work-narrow,.work-half,.work-third {
        grid-column: span 6
    }

    .work-card {
        min-height: 450px;
        padding: 20px
    }

    .work-visual {
        height: 295px
    }

    .work-full {
        min-height: 500px
    }

    .work-full .work-visual {
        height: 345px
    }
}

@media (max-width: 650px) {
    .cases {
        padding-block:90px
    }

    .works-heading {
        margin-bottom: 40px
    }

    .works-heading p {
        font-size: 14px
    }

    .works-grid {
        background: 0 0;
        border: 0;
        display: block
    }

    .work-card,.work-wide,.work-narrow,.work-half,.work-third,.work-full {
        width: 100%;
        min-height: 430px;
        margin-bottom: 2px;
        display: block
    }

    .work-visual,.work-full .work-visual {
        height: 285px
    }

    .work-meta h3 {
        font-size: 22px
    }

    .works-cta {
        margin-top: 36px
    }

    .work-lightbox {
        padding: 12px
    }

    .lightbox-panel {
        padding: 25px 16px
    }

    .lightbox-title h3 {
        font-size: 30px
    }

    .lightbox-images {
        grid-template-columns: 1fr
    }

    .lightbox-images img {
        height: auto;
        min-height: 0
    }
}

.cases {
    padding-block:100px}

.works-heading {
    margin-bottom: 44px
}

.work-card,.work-wide,.work-narrow,.work-half,.work-third,.work-full {
    grid-column: span 4;
    min-height: 360px;
    padding: 19px 20px 21px
}

.work-card:nth-child(n+7) {
    grid-column: span 6
}

.work-visual,.work-full .work-visual {
    height: 225px;
    margin-bottom: 12px
}

.work-number {
    top: 17px;
    right: 19px
}

.work-meta {
    padding-top: 13px
}

.work-meta h3 {
    margin-bottom: 5px;
    font-size: 20px
}

.work-meta p {
    max-width: 285px;
    font-size: 12.5px;
    line-height: 1.4
}

.work-meta b {
    font-size: 21px
}

.works-cta {
    margin-top: 42px
}

@media (max-width: 900px) {
    .work-card,.work-wide,.work-narrow,.work-half,.work-third,.work-full,.work-card:nth-child(n+7) {
        grid-column:span 6;
        min-height: 400px
    }

    .work-visual,.work-full .work-visual {
        height: 260px
    }
}

@media (max-width: 650px) {
    .cases {
        padding-block:82px
    }

    .works-grid {
        display: block
    }

    .work-card,.work-wide,.work-narrow,.work-half,.work-third,.work-full,.work-card:nth-child(n+7) {
        width: 100%;
        min-height: 420px;
        display: block
    }

    .work-visual,.work-full .work-visual {
        height: 280px
    }
}

.work-meta {
    justify-content: flex-start
}

.works-cta {
    margin: 42px auto 0
}

.process {
    overflow: visible
}

.steps {
    grid-template-rows: repeat(2,235px);
    grid-template-columns: repeat(3,1fr);
    gap: 44px 58px;
    margin-top: 68px;
    position: relative
}

.process-route {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: visible
}

.process-route path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

.route-color {
    stroke: var(--orange);
    stroke-width: 7px;
    stroke-dasharray: 110 1600;
    stroke-dashoffset: 120px;
    transition: stroke-dasharray .7s
}

.steps:hover .route-color {
    stroke-dasharray: 1040 600
}

.steps article {
    z-index: 2;
    background: var(--paper);
    border: 0;
    min-width: 0;
    min-height: 0;
    padding: 16px 22px 20px;
    position: relative
}

.steps article:before {
    display: none
}

.steps article:nth-of-type(4) {
    grid-area: 2/3
}

.steps article:nth-of-type(5) {
    grid-area: 2/2
}

.steps article:nth-of-type(6) {
    grid-area: 2/1
}

.steps>article>span {
    letter-spacing: .12em;
    font-size: 13px;
    font-weight: 800;
    display: block
}

.step-icon {
    background: var(--pink);
    color: #fff;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 16px 0 12px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    transition: transform .3s,background .3s;
    display: grid
}

.steps article:first-of-type .step-icon {
    clip-path: polygon(50% 0,61% 34%,88% 12%,72% 42%,100% 50%,70% 59%,87% 88%,59% 70%,50% 100%,40% 69%,12% 88%,29% 58%,0 50%,30% 41%,12% 12%,40% 33%);
    background: var(--pink)
}

.steps article:nth-of-type(2) .step-icon {
    background: var(--purple);
    color: var(--ink);
    border-radius: 50%;
    font-size: 18px
}

.steps article:nth-of-type(3) .step-icon {
    clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);
    background: var(--orange)
}

.steps article:nth-of-type(4) .step-icon {
    background: var(--pink);
    border-radius: 50%
}

.steps article:nth-of-type(5) .step-icon {
    background: var(--orange);
    color: #fff
}

.steps article:nth-of-type(6) .step-icon {
    background: var(--lime);
    width: 104px;
    height: 104px;
    color: var(--ink);
    border-radius: 50%;
    margin-top: 5px;
    font-size: 43px
}

.steps p {
    color: #666;
    max-width: 240px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5
}

.steps article:hover .step-icon {
    transform: scale(1.1)rotate(-7deg)
}

.steps article:nth-of-type(2n):hover .step-icon {
    transform: scale(1.1)rotate(7deg)
}

.steps article:hover h3 {
    color: var(--pink)
}

@media (max-width: 700px) {
    .steps {
        border-left:3px solid var(--ink);
        grid-template-rows: none;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 42px;
        padding-left: 25px;
        display: grid
    }

    .process-route {
        display: none
    }

    .steps article,.steps article:nth-of-type(4),.steps article:nth-of-type(5),.steps article:nth-of-type(6) {
        grid-area: auto;
        min-height: 190px;
        padding: 12px 10px 24px
    }

    .step-icon,.steps article:nth-of-type(6) .step-icon {
        width: 72px;
        height: 72px;
        margin: 12px 0
    }

    .steps article:nth-of-type(6) .step-icon {
        font-size: 34px
    }

    .steps p {
        max-width: 310px
    }
}

.steps {
    grid-template-rows: repeat(2,190px);
    grid-template-columns: repeat(3,1fr);
    gap: 76px 72px;
    margin-top: 62px
}

.route-base {
    stroke-width: 18px;
    stroke: var(--ink)
}

.route-color {
    stroke-width: 18px;
    stroke: var(--pink);
    stroke-dasharray: 0 2000;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: stroke-dasharray .8s,opacity .25s
}

.steps:hover .route-color {
    stroke-dasharray: 1040 600;
    opacity: 1
}

.steps article {
    background: 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 190px;
    padding: 30px 24px 18px;
    display: flex
}

.steps article:nth-of-type(n+4) {
    padding-top: 22px
}

.steps>article>.step-number {
    background: var(--paper);
    letter-spacing: -.08em;
    z-index: 3;
    width: max-content;
    padding: 0 15px 2px 0;
    font-size: 72px;
    font-weight: 700;
    line-height: .9;
    transition: color .22s,transform .22s;
    display: block;
    position: relative
}

.step-copy {
    background: var(--paper);
    margin-top: 20px;
    padding-right: 12px
}

.steps h3 {
    margin: 0 0 6px;
    font-size: 20px
}

.steps p {
    color: #666;
    max-width: 255px;
    font-size: 11.5px;
    line-height: 1.45
}

.steps article:hover .step-number {
    color: var(--pink);
    transform-origin: 0 100%;
    transform: scale(1.06)
}

.steps article:nth-of-type(6):hover .step-number {
    color: var(--lime)
}

@media (max-width: 700px) {
    .steps {
        border-left:14px solid var(--ink);
        grid-template-rows: none;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 42px;
        padding-left: 24px;
        display: grid
    }

    .process-route {
        display: none
    }

    .steps article,.steps article:nth-of-type(4),.steps article:nth-of-type(5),.steps article:nth-of-type(6) {
        grid-area: auto;
        min-height: 155px;
        padding: 10px 8px 24px
    }

    .steps>article>.step-number {
        padding-right: 10px;
        font-size: 58px
    }

    .step-copy {
        margin-top: 12px
    }

    .steps p {
        max-width: 310px
    }
}

.steps {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(6,1fr);
    gap: 0;
    height: 340px;
    margin-top: 58px;
    display: grid
}

.process-route {
    height: 340px
}

.route-base {
    stroke: var(--ink);
    stroke-width: 11px
}

.route-color {
    display: none
}

.steps article,.steps article:nth-of-type(4),.steps article:nth-of-type(5),.steps article:nth-of-type(6) {
    background: 0 0;
    grid-area: auto;
    height: 165px;
    min-height: 0;
    padding: 18px 13px
}

.steps article:nth-of-type(2n) {
    transform: translateY(160px)
}

.steps>article>.step-number {
    background: var(--paper);
    padding: 0 12px 0 0;
    font-size: 64px
}

.steps article:nth-of-type(6) .step-number {
    color: var(--pink);
    text-shadow: none
}

.step-copy {
    background: var(--paper);
    margin-top: 18px;
    padding: 0 7px 0 0
}

.steps h3 {
    font-size: 18px
}

.steps p {
    max-width: 165px;
    font-size: 10.5px;
    line-height: 1.4
}

.steps article:hover .step-number,.steps article:nth-of-type(6):hover .step-number {
    color: var(--pink);
    transform: scale(1.05)
}

@media (max-width: 900px) and (min-width:701px) {
    .steps,.process-route {
        height:310px
    }

    .steps>article>.step-number {
        font-size: 52px
    }

    .steps h3 {
        font-size: 16px
    }

    .steps p {
        font-size: 9.5px
    }

    .steps article:nth-of-type(2n) {
        transform: translateY(145px)
    }
}

@media (max-width: 700px) {
    .steps {
        border:0;
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
        margin-top: 40px;
        padding: 0;
        display: grid
    }

    .process-route {
        display: none
    }

    .steps article,.steps article:nth-of-type(4),.steps article:nth-of-type(5),.steps article:nth-of-type(6) {
        height: auto;
        min-height: 135px;
        padding: 8px 12px;
        transform: none
    }

    .steps article:nth-of-type(2n) {
        margin-left: 58px;
        transform: none
    }

    .steps>article>.step-number {
        font-size: 54px
    }

    .step-copy {
        margin-top: 10px
    }

    .steps p {
        max-width: 270px;
        font-size: 11px
    }
}

.steps.process-strip {
    border: 2px solid var(--ink);
    gap: 0;
    height: 380px;
    margin-top: 56px;
    display: flex;
    overflow: hidden
}

.steps.process-strip>article {
    min-width: 0;
    height: 376px;
    min-height: 0;
    color: var(--ink);
    border: 0;
    border-right: 1px solid var(--ink);
    background: #fff;
    flex-direction: column;
    flex: 1 1 0;
    margin: 0;
    padding: 26px 20px 24px;
    transition: flex .38s,background .28s,color .28s;
    display: flex;
    overflow: hidden;
    transform: none
}

.steps.process-strip>article:last-child {
    background: var(--lime);
    border-right: 0
}

.steps.process-strip>article:hover {
    background: var(--pink);
    color: #fff;
    flex: 2.15 1 0
}

.steps.process-strip>article:last-child:hover {
    background: var(--lime);
    color: var(--ink)
}

.steps.process-strip>article>.step-number {
    letter-spacing: -.08em;
    color: inherit;
    text-shadow: none;
    background: 0 0;
    padding: 0;
    font-size: 72px;
    font-weight: 600;
    line-height: .9;
    transition: transform .3s;
    display: block;
    transform: none
}

.steps.process-strip .step-copy {
    background: 0 0;
    margin-top: auto;
    padding: 0
}

.steps.process-strip h3 {
    margin: 0;
    font-size: 23px;
    line-height: 1.05
}

.step-reveal {
    opacity: 0;
    max-width: 250px;
    max-height: 0;
    transition: max-height .35s,opacity .25s,transform .35s;
    overflow: hidden;
    transform: translateY(15px)
}

.steps.process-strip article:hover .step-reveal {
    opacity: 1;
    max-height: 190px;
    transform: translateY(0)
}

.steps.process-strip p {
    color: inherit;
    max-width: 230px;
    margin: 18px 0 24px;
    font-size: 12px;
    line-height: 1.5
}

.steps.process-strip small {
    text-transform: uppercase;
    letter-spacing: .08em;
    border-top: 1px solid;
    padding-top: 12px;
    font-size: 9px;
    line-height: 1.45;
    display: block
}

.steps.process-strip small b {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px
}

.steps.process-strip article:hover .step-number {
    color: inherit;
    transform: translateY(-3px)
}

@media (max-width: 800px) {
    .steps.process-strip {
        border-width:2px;
        flex-direction: column;
        height: auto;
        display: flex
    }

    .steps.process-strip>article {
        border-right: 0;
        border-bottom: 1px solid var(--ink);
        flex: none;
        width: 100%;
        height: auto;
        min-height: 145px;
        padding: 20px
    }

    .steps.process-strip>article:last-child {
        border-bottom: 0
    }

    .steps.process-strip>article:hover {
        flex: none
    }

    .steps.process-strip>article>.step-number {
        font-size: 54px
    }

    .steps.process-strip .step-copy {
        margin-top: 18px
    }

    .step-reveal,.steps.process-strip article:hover .step-reveal {
        opacity: 1;
        max-width: none;
        max-height: none;
        transform: none
    }

    .steps.process-strip p {
        max-width: none;
        margin: 10px 0 14px
    }
}

.steps.process-strip>article {
    padding-left: 12px;
    padding-right: 12px
}

.steps.process-strip h3 {
    white-space: nowrap;
    font-size: 21px
}

@media (max-width: 800px) {
    .steps.process-strip>article {
        padding-left:20px;
        padding-right: 20px
    }
}

@media (max-width: 750px) {
    .about h2 {
        font-size:clamp(39px,11vw,52px)
    }

    .about h2 span {
        white-space: normal
    }

    .about-link {
        margin-top: 24px
    }

    .about:after {
        left: 2%;
        right: auto
    }

    .benefits:before {
        left: auto;
        right: 5%
    }

    .benefits:after {
        left: auto;
        right: 76px
    }
}

@media (max-width: 900px) {
    .benefit-card:nth-child(3n) {
        border-right:1px solid var(--ink)
    }

    .benefit-card:nth-child(2n) {
        border-right: 0
    }

    .benefit-card:nth-last-child(-n+3) {
        border-bottom: 1px solid var(--ink)
    }

    .benefit-card:nth-last-child(-n+2) {
        border-bottom: 0
    }
}

@media (max-width: 600px) {
    .benefit-card {
        border-right:0!important;
        border-bottom: 1px solid var(--ink)!important
    }

    .benefit-card:last-child {
        border-bottom: 0!important
    }

    .benefit-card:hover {
        box-shadow: none;
        transform: none
    }

    .benefit-card:hover:after {
        opacity: 0
    }

    .benefit-card:hover .benefit-icon {
        width: 76px;
        height: 76px;
        transform: none
    }

    .benefit-card:hover .benefit-icon img {
        opacity: 0
    }

    .benefit-card:hover .benefit-icon i {
        opacity: 1;
        transform: none
    }

    .benefit-card:hover h3,.benefit-card:hover .card-arrow {
        transform: none
    }
}

:root {
    --corporate-bg: #10110f;
    --corporate-panel: #191b18;
    --corporate-panel-2: #20231f;
    --corporate-muted: #a9ada6;
    --corporate-line: #3b4038
}

body {
    background: var(--corporate-bg);
    color: #f4f5f1
}

.home-banner {
    background: var(--corporate-bg);
    color: #fff;
    border-bottom: 1px solid var(--corporate-line)
}

.home-banner:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 74% 64%,#b4f00042,#0000 25%),radial-gradient(circle at 62% 105%,#b4f00021,#0000 28%);
    position: absolute;
    inset: 86px 0 0
}

.home-banner .header {
    border-bottom: 1px solid var(--corporate-line)
}

.home-banner .header nav a {
    color: #fff;
    opacity: .56
}

.home-banner .header nav a:first-child,.home-banner .header nav a:hover {
    color: var(--lime);
    opacity: 1
}

.home-banner .header-tools img {
    filter: invert()
}

.home-banner .cart-tool span {
    color: #fff
}

.home-banner .hero h1 {
    color: var(--lime)
}

.home-banner .hero-copy>p {
    color: #fff
}

.home-banner .hero-copy>p span:last-child {
    color: #c9ccc6
}

.home-banner .hero-actions .button {
    background: var(--lime);
    color: var(--ink)
}

.home-banner .hero-actions .button:hover {
    background: #c8ff32
}

.slider-dots b,.slider-dots i {
    background: var(--lime)
}

.hero-orbit {
    border-color: var(--lime);
    opacity: .55
}

.hero-cloud {
    opacity: .2;
    filter: grayscale()
}

.hero-spark,.hero-asterisk {
    filter: brightness(0)saturate()invert(83%)sepia(83%)saturate(1471%)hue-rotate(27deg)brightness(108%)contrast(103%)
}

.home-banner {
    isolation: isolate
}

.home-banner:before {
    background: radial-gradient(circle at 72% 68%,#b4f00047,#0000 22%),radial-gradient(circle at 65% 106%,#b4f0002e,#0000 30%)
}

.home-banner .hero {
    grid-template-columns: .88fr 1.12fr;
    gap: 0;
    min-height: 714px;
    padding: 42px 0 0
}

.home-banner .hero-copy {
    align-self: center;
    padding-bottom: 70px
}

.home-banner .hero h1 {
    letter-spacing: -.045em;
    white-space: nowrap;
    margin: 0 0 24px;
    font-size: clamp(46px,4.15vw,64px);
    font-weight: 650;
    line-height: 1.08
}

.home-banner .hero h1 span {
    color: #fff;
    font-weight: 900
}

.home-banner .hero-copy>p {
    color: #fff;
    max-width: 610px;
    margin: 0;
    font-size: 17px;
    line-height: 1.45
}

.home-banner .hero-actions {
    align-items: stretch;
    gap: 16px;
    margin-top: 34px
}

.home-banner .hero-actions .button {
    gap: 38px;
    min-width: 0;
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 500
}

.home-banner .hero-actions .button-dark {
    background: var(--lime);
    color: #080a00;
    border: 1px solid var(--lime)
}

.home-banner .hero-actions .button-dark:hover {
    color: #080a00;
    background: #c8ff32;
    border-color: #c8ff32
}

.hero-visual {
    overflow: visible
}

.hero-art-group {
    z-index: 0;
    pointer-events: none;
    max-width: none;
    height: auto;
    display: block;
    position: absolute
}

.hero-art-top-left {
    width: 251px;
    top: 18px;
    left: -82px
}

.hero-art-bottom-left {
    width: 760px;
    bottom: 16px;
    left: -150px
}

.hero-art-right {
    width: 650px;
    bottom: -178px;
    right: -105px
}

.hero-glow {
    z-index: 0;
    filter: blur(30px);
    background: radial-gradient(#b4f0009e,#b4f0002e 43%,#0000 70%);
    width: 660px;
    height: 510px;
    position: absolute;
    bottom: -120px;
    right: -75px
}

.hero-figma-girl {
    z-index: 2;
    object-fit: contain;
    object-position: bottom;
    max-width: none;
    height: auto;
    position: absolute;
    bottom: 0
}

.hero-figma-grass {
    width: 510px;
    right: 225px
}

.hero-figma-smile {
    width: 472px;
    right: -120px
}

@media (max-width: 1000px) {
    .home-banner .hero {
        grid-template-columns:.92fr 1.08fr;
        min-height: 650px
    }

    .home-banner .hero h1 {
        font-size: clamp(40px,5vw,50px)
    }

    .home-banner .hero-copy>p {
        font-size: 15px
    }

    .hero-art-top-left {
        width: 205px;
        left: -65px
    }

    .hero-art-bottom-left {
        width: 620px;
        left: -125px
    }

    .hero-art-right {
        width: 565px;
        bottom: -145px;
        right: -130px
    }

    .hero-figma-grass {
        width: 435px;
        right: 145px
    }

    .hero-figma-smile {
        width: 405px;
        right: -160px
    }
}

@media (max-width: 650px) {
    .home-banner .hero {
        min-height:790px;
        padding-top: 54px;
        display: block
    }

    .home-banner .hero-copy {
        padding-bottom: 0
    }

    .home-banner .hero h1 {
        white-space: normal;
        font-size: 40px;
        line-height: 1.05
    }

    .home-banner .hero-copy>p {
        max-width: 355px;
        font-size: 14px
    }

    .home-banner .hero-copy>p br {
        display: none
    }

    .home-banner .hero-actions {
        flex-flow: wrap;
        gap: 10px;
        margin-top: 26px
    }

    .home-banner .hero-actions .button {
        gap: 15px;
        min-width: 0;
        padding: 13px 15px;
        font-size: 11px
    }

    .home-banner .hero-visual {
        min-height: 430px;
        margin-top: 6px
    }

    .hero-art-top-left {
        display: none
    }

    .hero-art-bottom-left {
        opacity: .65;
        width: 450px;
        bottom: 340px;
        left: -210px
    }

    .hero-art-right {
        width: 430px;
        bottom: -88px;
        right: -175px
    }

    .hero-glow {
        width: 520px;
        height: 340px;
        bottom: -70px;
        right: -170px
    }

    .hero-figma-grass {
        width: 340px;
        right: 45px
    }

    .hero-figma-smile {
        width: 315px;
        right: -195px
    }
}

.section,.section h2,.contact h2 {
    color: #f4f5f1
}

.section h2 span,.contact h2 span,.solutions h2 span,.process h2 span,.advantages h2 span {
    color: var(--lime)
}

.section-heading p,.about-text p,.trust-heading p {
    color: var(--corporate-muted)
}

.trust-mobile-break {
    display: none
}

.about {
    padding-bottom: 140px
}

.about-link {
    color: var(--lime);
    border-color: var(--lime)
}

.video-feature {
    background: var(--corporate-panel);
    border: 1px solid var(--corporate-line)
}

.video-intro {
    border-right: 1px solid var(--corporate-line)
}

.video-intro h3 {
    color: var(--lime)
}

.video-intro p {
    color: #c6cac2
}

.video-frame {
    background: #050605;
    min-height: 430px
}

.vk-video iframe {
    background: #050605;
    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.benefits {
    color: #f4f5f1;
    border-block:1px solid var(--corporate-line);background: #141613
}

.benefits-face {
    display: none
}

.benefits-decoration,.solutions-decoration {
    filter: brightness(0)saturate()invert(83%)sepia(83%)saturate(1471%)hue-rotate(27deg)brightness(108%)contrast(103%);
    opacity: .8
}

.benefit-grid {
    border-color: var(--corporate-line);
    background: var(--corporate-line);
    gap: 1px
}

.benefit-card,.benefit-card.c1,.benefit-card.c3,.benefit-card.c4 {
    background: var(--corporate-panel);
    color: #f4f5f1;
    border: 0
}

.benefit-card:nth-child(2n) {
    background: var(--corporate-panel-2)
}

.benefit-card:after {
    border-color: var(--lime)
}

.benefit-card:hover {
    box-shadow: inset 0 0 0 1px var(--lime);
    background: #252a22
}

.benefit-card p {
    color: var(--corporate-muted)
}

.benefit-card .benefit-icon,.benefit-card.c0 .benefit-icon,.benefit-card.c1 .benefit-icon,.benefit-card.c2 .benefit-icon,.benefit-card.c3 .benefit-icon,.benefit-card.c4 .benefit-icon,.benefit-card.c5 .benefit-icon {
    color: var(--lime);
    background: #b4f00021
}

.benefit-card.c0 .benefit-icon,.benefit-card.c4 .benefit-icon {
    background: var(--lime)
}

.benefit-card p {
    opacity: 1;
    max-height: 72px;
    transition: opacity .18s 60ms,max-height .32s,margin .32s,transform .28s;
    overflow: hidden;
    transform: translateY(0)
}

.benefit-card:hover .benefit-icon {
    width: 165px;
    height: 165px
}

.benefit-card:hover h3 {
    margin-top: 32px;
    transform: none
}

.benefit-card:hover p {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition-delay: 0s;
    transform: translateY(8px)
}

.solutions {
    padding-bottom: 150px
}

.task-list {
    border-color: var(--lime)
}

.task-list article {
    border-color: var(--corporate-line)
}

.task-list article:hover {
    background: var(--lime);
    color: var(--ink)
}

.task-list article>p {
    color: var(--corporate-muted)
}

.task-list article:hover>p {
    color: var(--ink);
    opacity: .72
}

.task-list article>b {
    color: var(--lime);
    font-size: 28px
}

.task-list article:hover>b {
    color: var(--ink)
}

.task-photos {
    width: 370px;
    height: 250px
}

.task-photo {
    border-color: #f4f5f1;
    width: 185px;
    height: 225px
}

.cases {
    border-block:1px solid var(--corporate-line);background: #0b0c0b
}

.work-card,.work-wide,.work-narrow,.work-half,.work-third,.work-full {
    background: var(--corporate-panel);
    color: #f4f5f1
}

.work-card:nth-child(2n) {
    background: var(--corporate-panel-2)
}

.work-meta {
    border-color: var(--corporate-line)
}

.work-meta p {
    color: var(--corporate-muted)
}

.work-card:hover {
    background: #282d24
}

.works-grid {
    background: var(--corporate-line);
    border-color: var(--corporate-line)
}

.works-cta {
    color: var(--lime);
    border-color: var(--lime)
}

.process {
    padding-block:145px}

.steps.process-strip {
    border-color: var(--corporate-line)
}

.steps.process-strip>article {
    background: var(--corporate-panel);
    color: #f4f5f1;
    border-color: var(--corporate-line)
}

.steps.process-strip>article:nth-child(2n) {
    background: var(--corporate-panel-2)
}

.steps.process-strip>article:last-child,.steps.process-strip>article:hover {
    background: var(--lime);
    color: var(--ink)
}

.advantages {
    color: #f4f5f1;
    border-block:1px solid var(--corporate-line);background: #151714;
    padding-block:145px 105px}

.trust-heading h2 span {
    color: var(--lime)
}

.trust-seal {
    background: var(--lime);
    color: var(--ink)
}

.trust-products {
    z-index: 3;
    filter: none;
    pointer-events: none;
    width: min(720px,59vw);
    height: 440px;
    position: absolute;
    top: 40px;
    right: -15px;
    transform: none
}

.trust-product {
    object-fit: contain;
    filter: drop-shadow(0 24px 25px #00000073);
    display: block;
    position: absolute
}

.trust-product-smile {
    width: 69%;
    bottom: 5px;
    left: 0;
    transform: rotate(-4deg)
}

.trust-product-grass {
    width: 40%;
    top: 0;
    right: 0;
    transform: rotate(5deg)
}

.trust-stats {
    border-color: var(--lime);
    background: #ffffff04
}

.trust-stats>div {
    border-color: var(--corporate-line)
}

.trust-stats>div:hover {
    background: var(--lime);
    color: var(--ink)
}

.trust-stats b {
    color: var(--lime)
}

.trust-stats>div:hover b {
    color: var(--ink)
}

.trust-stats>div:nth-child(3) b {
    color: var(--lime)
}

.trust-stats > div:hover b {
  color: var(--ink);
}

.trust-spark {
    filter: brightness(0)saturate()invert(83%)sepia(83%)saturate(1471%)hue-rotate(27deg)brightness(108%)contrast(103%)
}

.trust-heart {
    display: none
}

.contact {
    background: var(--corporate-panel);
    color: #f4f5f1;
    border: 1px solid var(--lime)
}

.contact-form label {
    color: var(--lime)
}

.contact-form input,.contact-form select {
    color: #fff;
    border-color: #777
}

.contact-form input::placeholder {
    color: #888
}

.contact-form select {
    background-color: #0000
}

.contact-form option {
    color: #fff;
    background: #171917
}

.contact-form .button {
    background: var(--lime);
    color: var(--ink)
}

.contact-form small,.contact-copy p {
    color: var(--corporate-muted)
}

.contact-star {
    color: var(--lime);
    opacity: .13
}

.site-footer {
    border-top: 1px solid var(--corporate-line)
}

@media (max-width: 850px) {
    .trust-products {
        width:min(760px,105vw);
        height: 390px;
        margin: -210px -8vw -25px 125px;
        position: relative;
        top: auto;
        right: auto
    }

    .trust-product-smile {
        width: 72%
    }

    .trust-product-grass {
        width: 42%
    }
}

@media (max-width: 750px) {
    .video-intro {
        border-right:0;
        border-bottom: 1px solid var(--corporate-line)
    }

    .task-photos {
        width: 285px;
        height: 195px
    }

    .task-photo {
        width: 140px;
        height: 175px
    }
}

@media (max-width: 600px) {
    .benefit-card:hover .benefit-icon {
        width:76px;
        height: 76px
    }

    .benefit-card:hover h3 {
        margin: 45px 0 12px
    }

    .benefit-card:hover p {
        opacity: 1;
        max-height: 72px;
        margin: 0;
        transform: none
    }
}

@media (max-width: 500px) {
    .trust-products {
        width:112vw;
        height: 310px;
        margin: -160px -17vw -15px 95px
    }

    .trust-product-smile {
        width: 74%
    }

    .trust-product-grass {
        width: 43%
    }

    .advantages {
        padding-top: 105px
    }
}

.benefit-card {
    font: inherit;
    text-align: left;
    cursor: pointer
}

.hero-title-line,.hero-subtitle-line {
    display: block
}

.home-banner .hero h1 .hero-title-primary {
    color: var(--lime);
    font-weight: 650
}

.no-break {
    white-space: nowrap
}

.task-hit {
    z-index: 40;
    cursor: pointer;
    background: 0 0;
    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.task-list article:focus-within {
    outline: 2px solid var(--lime);
    outline-offset: -2px
}

@media (max-width: 650px) {
    html,body {
        overflow-x:hidden
    }

    .shell {
        width: calc(100% - 32px)
    }

    .section {
        padding-block:72px}

    .section h2,.works-heading h2,.contact h2 {
        letter-spacing: -.055em;
        font-size: clamp(36px,10.5vw,44px);
        line-height: .96
    }

    .section-heading {
        display: block
    }

    .section-heading h2 {
        margin-bottom: 22px
    }

    .section-heading p {
        max-width: 335px;
        margin: 0;
        font-size: 14px;
        line-height: 1.55
    }

    .home-banner .header {
        height: 70px
    }

    .site-logo {
        width: 68px
    }

    .header-tools {
        gap: 16px
    }

    .header-icon {
        width: 22px;
        height: 22px
    }

    .cart-tool span {
        font-size: 8px
    }

    .home-banner:before {
        background: radial-gradient(circle at 50% 72%,#b4f0004d,#0000 31%);
        inset: 70px 0 0
    }

    .home-banner .hero {
        flex-direction: column;
        min-height: 760px;
        padding: 48px 0 0;
        display: flex;
        overflow: visible
    }

    .home-banner .hero-copy {
        z-index: 4;
        width: 100%
    }

    .home-banner .hero h1 {
        letter-spacing: -.055em;
        margin-bottom: 22px;
        font-size: clamp(34px,9.2vw,38px);
        line-height: 1.03
    }

    .home-banner .hero h1 .hero-title-line {
        white-space: nowrap
    }

    .home-banner .hero-copy>p {
        max-width: 361px;
        font-size: 12.5px;
        line-height: 1.5
    }

    .home-banner .hero-copy>p .hero-subtitle-line {
        color: #fff
    }

    .home-banner .hero-copy>p .hero-subtitle-line:last-child {
        color: #c9ccc6
    }

    .home-banner .hero-actions {
        margin-top: 26px
    }

    .home-banner .hero-actions .button {
        gap: 26px;
        min-height: 46px;
        padding: 13px 16px;
        font-size: 12px
    }

    .home-banner .hero-visual {
        width: 100%;
        height: 390px;
        min-height: 390px;
        margin-top: auto;
        position: relative
    }

    .hero-figma-grass {
        width: 263px;
        bottom: 0;
        left: auto;
        right: 102px
    }

    .hero-figma-smile {
        width: 240px;
        bottom: 0;
        left: auto;
        right: -11px
    }

    .hero-glow {
        filter: blur(24px);
        width: 470px;
        height: 315px;
        inset: 125px auto auto 0
    }

    .hero-art-top-left {
        opacity: 1;
        z-index: 1;
        width: 96px;
        display: block;
        top: 380px;
        left: 13px;
        transform: rotate(-25.94deg)
    }

    .hero-art-bottom-left {
        opacity: 1;
        z-index: 1;
        width: 310px;
        top: 647px;
        bottom: auto;
        left: -175px
    }

    .hero-art-right {
        opacity: 1;
        z-index: 1;
        width: 325px;
        inset: 335px auto auto 233px
    }

    .about {
        padding-top: 76px;
        padding-bottom: 90px
    }

    .about-grid {
        gap: 20px
    }

    .about h2 {
        font-size: clamp(33px,8.9vw,37px)
    }

    .about h2 span {
        white-space: nowrap
    }

    .about-text {
        padding-top: 0
    }

    .about-text p {
        margin-bottom: 15px;
        font-size: 15px;
        line-height: 1.58
    }

    .video-feature {
        flex-direction: column;
        min-height: 0;
        margin-top: 38px;
        display: flex
    }

    .video-intro {
        min-height: 0;
        padding: 24px 22px 26px
    }

    .video-intro h3 {
        margin: 0 0 14px;
        font-size: 25px
    }

    .video-intro p {
        font-size: 13px;
        line-height: 1.55
    }

    .video-frame,.vk-video {
        aspect-ratio: 16/9;
        min-height: 0
    }

    .about-link {
        justify-content: space-between;
        width: 100%;
        margin-top: 28px;
        font-size: 14px
    }

    .benefits {
        padding-block:78px 82px}

    .benefits-decoration {
        width: 66px;
        height: 66px;
        top: -22px;
        right: 18px
    }

    .benefit-grid {
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        background: 0 0;
        border: 0;
        grid-template-columns: none;
        gap: 12px;
        margin: 34px -16px 0;
        padding: 0 16px 14px;
        scroll-padding-inline: 16px;
        display: flex;
        overflow-x: auto
    }

    .benefit-grid::-webkit-scrollbar {
        display: none
    }

    .works-grid::-webkit-scrollbar {
        display: none
    }

    .steps.process-strip::-webkit-scrollbar {
        display: none
    }

    .benefit-card,.benefit-card.c1,.benefit-card.c3,.benefit-card.c4 {
        scroll-snap-align: start;
        text-align: left;
        min-height: 350px;
        font: inherit;
        outline: none;
        flex: 0 0 min(82vw,318px);
        padding: 28px 26px;
        border: 1px solid var(--corporate-line)!important
    }

    .benefit-card h3 {
        margin: 40px 0 12px;
        font-size: 21px
    }

    .benefit-card p {
        font-size: 13px;
        line-height: 1.55
    }

    .benefit-card.is-active {
        box-shadow: inset 0 0 0 1px var(--lime);
        background: #252a22
    }

    .benefit-card.is-active .benefit-icon {
        clip-path: circle(48%);
        width: 148px;
        height: 148px;
        transform: rotate(-5deg)
    }

    .benefit-card:nth-child(2n).is-active .benefit-icon {
        transform: rotate(5deg)
    }

    .benefit-card.is-active .benefit-icon>img {
        opacity: 1;
        transform: scale(1)
    }

    .benefit-card.is-active .benefit-icon i {
        opacity: 0;
        transform: scale(.65)
    }

    .benefit-card.is-active h3 {
        margin-top: 28px
    }

    .benefit-card.is-active p {
        opacity: 0;
        max-height: 0;
        margin: 0;
        transform: translateY(8px)
    }

    .solutions {
        padding-block:82px 86px}

    .solutions-decoration {
        width: 62px;
        height: 62px;
        top: 22px;
        right: 18px
    }

    .task-list {
        margin-top: 34px
    }

    .task-list article {
        grid-template-columns: 38px 1fr 28px;
        gap: 10px;
        padding: 20px 2px;
        transition: background .2s,padding .2s;
        display: grid;
        overflow: hidden
    }

    .task-list article>span {
        font-size: 20px
    }

    .task-list article>h3 {
        font-size: 21px
    }

    .task-list article>p {
        color: var(--corporate-muted);
        grid-column: 2/4;
        font-size: 12px;
        line-height: 1.45
    }

    .task-list article>b {
        font-size: 24px
    }

    .task-list article>.task-photos {
        opacity: 0;
        grid-column: 1/-1;
        width: 100%;
        height: 0;
        margin: 0;
        transition: height .3s,opacity .2s,margin .3s;
        position: relative;
        top: auto;
        right: auto;
        overflow: hidden;
        transform: none
    }

    .task-list article.is-active {
        background: var(--lime);
        color: var(--ink);
        z-index: 3;
        padding: 22px 14px 30px;
        overflow: visible
    }

    .task-list article.is-active>p {
        color: var(--ink);
        opacity: .68
    }

    .task-list article.is-active>b {
        color: var(--ink)
    }

    .task-list article.is-active>.task-photos {
        opacity: 1;
        height: 220px;
        margin-top: 12px;
        overflow: visible;
        transform: none
    }

    .task-photo {
        border-width: 6px;
        width: 48%;
        height: 184px
    }

    .task-photo.photo-1 {
        top: 8px;
        left: 2%
    }

    .task-photo.photo-2 {
        top: 17px;
        right: 2%
    }

    .cases {
        padding-block:80px 84px}

    .cases:before {
        border-width: 17px;
        width: 112px;
        height: 56px
    }

    .works-heading {
        margin-bottom: 34px
    }

    .works-heading>div>span {
        margin-bottom: 14px
    }

    .works-heading p {
        font-size: 13px;
        line-height: 1.5
    }

    .works-grid {
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        background: 0 0;
        border: 0;
        gap: 12px;
        margin: 0 -16px 0 0;
        padding: 0 16px 14px 0;
        display: flex;
        overflow-x: auto
    }

    .work-card,.work-wide,.work-narrow,.work-half,.work-third,.work-full,.work-card:nth-child(n+7) {
        scroll-snap-align: start;
        border: 1px solid var(--corporate-line);
        flex: 0 0 min(86vw,335px);
        width: auto;
        min-height: 405px;
        margin: 0;
        padding: 18px
    }

    .work-visual,.work-full .work-visual {
        height: 270px
    }

    .work-meta {
        padding-top: 14px
    }

    .work-meta h3 {
        font-size: 20px
    }

    .work-meta p {
        font-size: 12.5px
    }

    .works-cta {
        justify-content: space-between;
        width: 100%;
        margin-top: 30px;
        font-size: 14px
    }

    .work-lightbox {
        align-items: end;
        padding: 0
    }

    .lightbox-panel {
        width: 100%;
        max-height: 92dvh;
        padding: 28px 16px 20px
    }

    .lightbox-close {
        top: 12px;
        right: 14px
    }

    .lightbox-images {
        gap: 10px;
        margin-top: 22px
    }

    .process {
        padding-block:82px 88px}

    .process .section-heading h2 {
        white-space: nowrap;
        font-size: clamp(33px,8.9vw,37px)
    }

    .steps.process-strip {
        scroll-snap-type: x mandatory;
        background: 0 0;
        border: 0;
        flex-direction: row;
        gap: 12px;
        height: auto;
        margin: 34px -16px 0 0;
        padding: 0 16px 14px 0;
        display: flex;
        overflow-x: auto
    }

    .steps.process-strip>article {
        border: 1px solid var(--corporate-line);
        scroll-snap-align: start;
        flex: 0 0 min(80vw,310px);
        min-height: 310px;
        padding: 24px
    }

    .steps.process-strip>article>.step-number {
        font-size: 58px
    }

    .steps.process-strip .step-copy {
        margin-top: 30px
    }

    .steps.process-strip h3 {
        font-size: 21px
    }

    .steps.process-strip p {
        font-size: 12px
    }

    .steps.process-strip small {
        margin-top: auto
    }

    .advantages {
        padding-block:80px 72px;overflow: hidden
    }

    .trust-stage {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        display: flex
    }

    .trust-heading h2 {
        font-size: clamp(40px,11vw,46px);
        line-height: .92
    }

    .trust-heading p {
        max-width: 245px;
        font-size: 14px;
        line-height: 1.55
    }

    .trust-mobile-break {
        display: block
    }

    .trust-seal {
        z-index: 5;
        width: 112px;
        height: 112px;
        position: absolute;
        top: 304px;
        right: 2px
    }

    .trust-seal:after {
        inset: 7px
    }

    .trust-seal b {
        font-size: 31px
    }

    .trust-seal span {
        margin-top: 6px;
        font-size: 5.5px
    }

    .trust-products {
        width: 100%;
        height: 290px;
        margin: -44px 0 0;
        position: relative;
        top: auto;
        right: auto;
        overflow: visible
    }

    .trust-product-smile {
        width: 68%;
        bottom: 24px;
        left: 0
    }

    .trust-product-grass {
        width: 39%;
        top: 28px;
        right: 3%
    }

    .trust-stats {
        border-color: var(--lime);
        grid-template-columns: repeat(2,1fr);
        width: 100%;
        margin-top: 0
    }

    .trust-stats>div {
        min-height: 138px;
        padding: 18px 14px
    }

    .trust-stats b {
        font-size: 34px
    }

    .trust-stats>div:nth-child(3) b {
        font-size: 48px
    }

    .trust-stats span {
        font-size: 10px
    }

    .trust-spark {
        display: none
    }

    .contact {
        gap: 34px;
        width: calc(100% - 32px);
        margin-block:50px;padding: 32px 22px 28px
    }

    .contact-copy h2 {
        margin-bottom: 22px;
        font-size: clamp(39px,10.5vw,45px)
    }

    .contact-copy>p {
        font-size: 13px;
        line-height: 1.55
    }

    .contact-form {
        gap: 18px
    }

    .contact-form input,.contact-form select {
        min-height: 48px;
        font-size: 16px
    }

    .contact-form .button {
        justify-content: space-between;
        min-height: 52px
    }

    .footer-shell {
        padding-block:40px 26px}

    .footer-top {
        display: block
    }

    .footer-top>.footer-column:first-child {
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
        display: grid
    }

    .footer-top>.footer-column:first-child h3 {
        grid-column: 1/-1
    }

    .footer-column {
        gap: 12px
    }

    .footer-column a {
        font-size: 13px
    }

    .footer-bottom {
        flex-direction: column;
        gap: 30px;
        min-height: 0;
        padding-top: 34px;
        display: flex
    }

    .footer-contact p {
        margin-top: 10px
    }

    .footer-app {
        margin-top: 0
    }

    .footer-app>div:first-of-type {
        grid-template-columns: 1fr 1fr;
        display: grid
    }

    .footer-app img {
        width: 100%;
        height: auto
    }

    .socials {
        margin-top: 6px
    }

    .footer-legal {
        margin-top: 34px;
        padding-top: 20px
    }

    .footer-face {
        opacity: .42;
        z-index: 0;
        width: 285px;
        display: block;
        bottom: -142px;
        right: -110px
    }

    .footer-contact,.footer-app,.footer-legal {
        z-index: 2;
        position: relative
    }
}

@media (max-width: 370px) {
    .home-banner .hero h1 {
        font-size:33px
    }

    .home-banner .hero {
        min-height: 735px
    }

    .hero-figma-grass {
        width: 244px;
        left: auto;
        right: 90px
    }

    .hero-figma-smile {
        width: 224px;
        left: auto;
        right: -8px
    }

    .trust-seal {
        right: 0
    }

    .trust-products {
        height: 275px
    }

    .trust-stats>div {
        padding-inline:11px}
}

@media (min-width: 651px) and (max-width:850px) {
    html,body {
        overflow-x:hidden
    }

    .home-banner .hero {
        flex-direction: column;
        min-height: 870px;
        padding: 50px 0 0;
        display: flex
    }

    .home-banner .hero-copy {
        z-index: 4;
        width: 100%;
        padding: 0
    }

    .home-banner .hero h1 {
        white-space: normal;
        max-width: 620px;
        font-size: 50px
    }

    .home-banner .hero-copy>p {
        font-size: 16px
    }

    .home-banner .hero-visual {
        width: 100%;
        height: 500px;
        min-height: 500px;
        margin-top: auto;
        position: relative
    }

    .hero-figma-grass {
        width: 385px;
        right: 235px
    }

    .hero-figma-smile {
        width: 355px;
        right: 0
    }

    .hero-glow {
        width: 650px;
        height: 420px;
        bottom: -70px;
        right: -20px
    }

    .hero-art-top-left {
        width: 180px;
        top: 4px;
        left: -60px
    }

    .hero-art-bottom-left {
        width: 560px;
        bottom: 30px;
        left: -170px
    }

    .hero-art-right {
        width: 525px;
        bottom: -120px;
        right: -80px
    }

    .task-list article {
        grid-template-columns: 56px 220px 1fr 40px;
        gap: 14px
    }

    .task-list article>.task-photos {
        display: none
    }

    .task-list article>span,.task-list article>h3 {
        font-size: 23px
    }

    .task-list article>b {
        grid-column: 4
    }

    .steps.process-strip {
        scroll-snap-type: x mandatory;
        border: 0;
        flex-direction: row;
        gap: 12px;
        height: auto;
        margin: 44px -24px 0;
        padding: 0 24px 14px;
        display: flex;
        overflow-x: auto
    }

    .steps.process-strip>article {
        border: 1px solid var(--corporate-line);
        scroll-snap-align: start;
        flex: 0 0 315px;
        min-height: 320px;
        padding: 25px
    }

    .steps.process-strip>article>.step-number {
        font-size: 62px
    }

    .trust-stage {
        grid-template-columns: 1fr;
        gap: 28px;
        display: grid
    }

    .trust-seal {
        z-index: 5;
        width: 190px;
        height: 190px;
        position: absolute;
        top: 250px;
        left: auto;
        right: 20px
    }

    .trust-seal:after {
        inset: 11px
    }

    .trust-seal b {
        font-size: 46px
    }

    .trust-seal span {
        margin-top: 9px;
        font-size: 8px
    }

    .trust-products {
        justify-self: start;
        width: 560px;
        height: 365px;
        margin: -175px 0 -20px 105px;
        position: relative;
        top: auto;
        right: auto
    }

    .trust-product-smile {
        width: 72%
    }

    .trust-product-grass {
        width: 42%
    }

    .trust-stats {
        width: 100%;
        margin-top: 0
    }

    .trust-spark {
        top: 20px;
        right: 5%
    }
}

@media (max-width: 650px) {
    .section h2,.works-heading h2,.contact h2,.about h2,.process .section-heading h2,.trust-heading h2,.contact-copy h2 {
        font-size:34px;
        line-height: .96
    }
}


.video-frame.vk-video {
  position: relative;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.video-play-btn svg {
  margin-left: 3px;
}

.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.video-frame.vk-video.is-playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 750px) {
  .video-play-btn {
    display: none;
  }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

/* Corporate hero header uses the WordPress header markup, not .home-banner .header. */
.drawlights-corporate-gifts .header:not(.scrolled) {
    background: transparent;
    border-bottom: 1px solid var(--corporate-line, #b4f000);
}

.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-menu .main-menu > li > a {
    color: #fff;
    opacity: .56;
    font-weight: 500;
}

.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-menu .main-menu > li:first-child > a,
.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-menu .main-menu > li > a:hover {
    color: var(--lime);
    opacity: 1;
}

.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-logo img,
.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-shop img {
    filter: brightness(0) invert(1);
}

.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-burger span,
.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-burger::before,
.drawlights-corporate-gifts .header:not(.scrolled) .header_wrapper-burger::after {
    background-color: #fff;
}

@media (max-width: 900px) {
    .drawlights-corporate-gifts .header .menu-menu-1-container {
        display: block;
    }
}

html:has(body.drawlights-corporate-gifts) {
    overflow-y: hidden;
}

body.drawlights-corporate-gifts {
    height: 100vh;
    overflow-y: auto;
}

.drawlights-corporate-gifts #contact {
    scroll-margin-top: 108px;
}

.drawlights-corporate-gifts .container.container-header {
    width: min(1180px, 100% - 48px);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0 !important;
}