:root {
    --bg: #050708;
    --bg2: #070a0d;
    --panel: rgba(10, 14, 17, 0.86);
    --panel-2: rgba(9, 13, 16, 0.94);

    --white: #f3f4f5;
    --muted: #a7afb7;
    --muted-2: #818991;

    --lime: #a8ff0a;
    --lime-2: #bbff2f;

    --border: rgba(255,255,255,.12);
    --border-soft: rgba(255,255,255,.07);

    --max: 1400px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    color: var(--white);

    font-family: Inter, Arial, Helvetica, sans-serif;

    background:
        radial-gradient(circle at 77% 25%, rgba(112,127,138,.13), transparent 27%),
        radial-gradient(circle at 85% 70%, rgba(168,255,10,.055), transparent 18%),
        linear-gradient(180deg, #040607 0%, #050708 50%, #050708 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .11;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

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

img {
    display: block;
    max-width: 100%;
}

.hw-shell {
    width: min(var(--max), calc(100% - 74px));
    margin: 0 auto;
}

/* =====================================
   HEADER
   ===================================== */

.hw-header {
    padding-top: 16px;
    margin-bottom: 18px;
}

.hw-nav {
    height: 66px;
    padding: 0 28px;

    display: grid;
    grid-template-columns: 220px 1fr 220px;
    align-items: center;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;

    background: rgba(5, 9, 11, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 10px 34px rgba(0,0,0,.18);
}

.hw-logo {
    justify-self: start;

    font-size: 19px;
    font-weight: 1000;
    letter-spacing: -.04em;
    line-height: 1;
}

.hw-logo span {
    color: var(--lime);
}

.hw-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
}

.hw-menu a {
    color: #d5d9de;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: color .18s ease;
}

.hw-menu a:hover {
    color: var(--lime);
}

.hw-top-cta {
    justify-self: end;

    min-width: 178px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border: 1px solid rgba(168,255,10,.72);
    border-radius: 11px;

    color: #fff;
    background: rgba(8, 12, 14, .6);

    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;

    transition: .18s ease;
}

.hw-top-cta:hover {
    background: var(--lime);
    color: #050708;
}

/* =====================================
   HERO
   ===================================== */

.hw-hero {
    position: relative;
    isolation: isolate;

    min-height: 590px;

    display: grid;
    grid-template-columns: minmax(500px, 630px) 1fr;
    align-items: center;
    column-gap: 10px;

    padding: 34px 0 18px;
}

.hw-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #050708 0%,
            #050708 31%,
            rgba(5,7,8,.97) 38%,
            rgba(5,7,8,.78) 45%,
            rgba(5,7,8,.36) 55%,
            transparent 66%
        );
}

.hw-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    top: 7%;
    right: 0;
    width: 65%;
    height: 84%;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(130,145,155,.20) 0%,
            rgba(130,145,155,.10) 34%,
            transparent 68%
        );
    filter: blur(24px);
}

.hw-hero-copy {
    position: relative;
    z-index: 3;
    max-width: 630px;
}

.hw-eyebrow {
    margin-bottom: 22px;
    color: #b6bcc3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.hw-eyebrow strong {
    color: var(--lime);
    padding: 0 8px;
    font-weight: 900;
}

.hw-title {
    margin: 0;
    max-width: 640px;

    font-size: clamp(66px, 6vw, 89px);
    line-height: .90;
    letter-spacing: -.065em;
    font-weight: 1000;
}

.hw-title-line {
    display: block;
}

.hw-title-green {
    color: var(--lime);
}

.hw-description {
    max-width: 620px;
    margin: 24px 0 28px;
    color: #ced3d8;
    font-size: 17px;
    line-height: 1.52;
}

.hw-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hw-btn {
    min-height: 57px;
    padding: 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    background: rgba(8, 12, 14, .72);
    color: #fff;

    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.hw-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(168,255,10,.65);
}

.hw-btn-green {
    min-width: 226px;
    background: var(--lime);
    color: #050708;
    border-color: var(--lime);

    box-shadow:
        0 0 38px rgba(168,255,10,.22),
        0 12px 28px rgba(0,0,0,.24);
}

.hw-btn-green:hover {
    background: var(--lime-2);
    border-color: var(--lime-2);
}

.hw-arrow {
    font-size: 20px;
    line-height: 1;
}

/* =====================================
   RIGHT VISUAL
   ===================================== */

.hw-visual {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hw-visual::before,
.hw-visual::after {
    display: none;
}

.hw-device {
    position: absolute;
    right: -2.5%;
    top: 5px;

    width: 57.5%;
    height: calc(100% - 6px);
    max-width: none;

    object-fit: cover;
    object-position: center right;

    transform: none;
    border-radius: 0;

    filter:
        brightness(.92)
        contrast(1.03)
        saturate(1.02)
        drop-shadow(0 38px 64px rgba(0,0,0,.58));

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.16) 5%,
            rgba(0,0,0,.58) 14%,
            #000 28%,
            #000 100%
        );
    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.16) 5%,
            rgba(0,0,0,.58) 14%,
            #000 28%,
            #000 100%
        );
}

/* =====================================
   STATS
   ===================================== */

.hw-stats {
    position: relative;
    z-index: 4;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    margin-top: 6px;
    padding-bottom: 36px;
}

.hw-stat {
    min-height: 89px;
    padding: 16px 22px;

    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 10px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(11,16,20,.88),
            rgba(8,12,15,.95)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 12px 26px rgba(0,0,0,.16);

    transition: .18s ease;
}

a.hw-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(168,255,10,.38);
}

.hw-stat-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--lime);
}

.hw-stat-icon svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.hw-stat-value {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.hw-stat-text {
    color: #aab1b7;
    font-size: 12px;
    line-height: 1.2;
}

/* =====================================
   PROCESS
   ===================================== */

.hw-process {
    padding: 4px 0 52px;
}

.hw-process-title {
    margin: 0 auto 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    color: #fff;
    font-size: 22px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

.hw-process-title::before,
.hw-process-title::after {
    content: "";
    display: block;
    width: 132px;
    height: 1px;
    background: rgba(255,255,255,.22);
}

.hw-process-title span {
    color: var(--lime);
}

.hw-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.hw-step {
    position: relative;
    text-align: center;
}

.hw-step:not(:last-child)::after {
    content: "⟶";
    position: absolute;
    top: 28px;
    right: -16px;
    color: rgba(255,255,255,.38);
    font-size: 24px;
    font-weight: 300;
}

.hw-step-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 11px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;

    color: #f2f4f5;

    background:
        radial-gradient(circle at 50% 30%, #161d22, #090d10 74%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 12px 26px rgba(0,0,0,.22);
}

.hw-step-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
}

.hw-step-number {
    margin-bottom: 7px;
    color: var(--lime);
    font-size: 18px;
    font-weight: 950;
}

.hw-step h3 {
    margin: 0 0 8px;
    color: #e7eaec;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.22;
}

.hw-step p {
    max-width: 190px;
    margin: 0 auto;
    color: #899198;
    font-size: 11px;
    line-height: 1.42;
}

/* =====================================
   RESPONSIVE
   ===================================== */

@media (max-width: 1200px) {
    .hw-menu {
        gap: 28px;
    }

    .hw-hero {
        min-height: 540px;
        grid-template-columns: minmax(420px, 560px) 1fr;
    }

    .hw-device {
        width: 60%;
        right: -4%;
    }
}

@media (max-width: 1050px) {
    .hw-hero {
        display: block;
        min-height: 835px;
        padding-top: 28px;
    }

    .hw-hero-copy {
        max-width: 700px;
        position: relative;
        z-index: 5;
    }

    .hw-hero::before {
        background:
            linear-gradient(
                180deg,
                #050708 0%,
                #050708 44%,
                rgba(5,7,8,.95) 52%,
                rgba(5,7,8,.36) 71%,
                transparent 86%
            );
    }

    .hw-device {
        top: auto;
        bottom: -8px;
        right: -10%;
        width: 94%;
        height: 54%;
        object-position: center right;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0,0,0,.26) 8%,
                #000 20%,
                #000 100%
            );
        mask-image:
            linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0,0,0,.26) 8%,
                #000 20%,
                #000 100%
            );
    }

    .hw-stats {
        grid-template-columns: repeat(2,1fr);
    }

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

    .hw-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 800px) {
    .hw-shell {
        width: calc(100% - 28px);
    }

    .hw-header {
        padding-top: 10px;
    }

    .hw-nav {
        height: 64px;
        padding: 0 16px;
        grid-template-columns: 1fr auto;
        border-radius: 12px;
    }

    .hw-menu {
        display: none;
    }

    .hw-logo {
        font-size: 18px;
    }

    .hw-top-cta {
        min-width: 140px;
        height: 36px;
        font-size: 10px;
    }

    .hw-hero {
        min-height: 790px;
    }

    .hw-title {
        font-size: clamp(52px, 14vw, 76px);
    }

    .hw-description {
        font-size: 16px;
    }

    .hw-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hw-btn,
    .hw-btn-green {
        width: 100%;
        min-width: 0;
    }

    .hw-device {
        right: -28%;
        width: 136%;
        height: 44%;
        bottom: 0;
        object-position: 72% center;
    }

    .hw-stats {
        grid-template-columns: 1fr;
    }

    .hw-steps {
        grid-template-columns: 1fr;
    }

    .hw-process-title::before,
    .hw-process-title::after {
        width: 42px;
    }
}

@media (max-width: 520px) {
    .hw-eyebrow {
        font-size: 9px;
        letter-spacing: .22em;
    }

    .hw-title {
        font-size: 46px;
    }

    .hw-hero {
        min-height: 740px;
    }

    .hw-device {
        width: 150%;
        right: -42%;
        height: 42%;
    }
}


/* =========================================================
   HACKER WEB FULL STRUCTURE IMAGE V3
   FULL ORIGINAL IMAGE - ZERO CROPPING
   ========================================================= */

.hw-structure-full {
    position: relative;

    width: 100%;

    margin:
        30px auto
        70px;

    padding: 0;

    overflow: visible;

    background:
        #050708;
}


/*
   Full-width cinematic section.
   No object-fit cover.
   No fixed height.
   Therefore the original image cannot be cropped.
*/
.hw-structure-full-image-wrap {
    position: relative;

    width:
        min(
            1540px,
            calc(100vw - 32px)
        );

    margin:
        0 auto;

    overflow: visible;
}


/* soft integration with black site background */
.hw-structure-full-image-wrap::before {
    content: "";

    position: absolute;

    z-index: 0;

    inset:
        5% 3%;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(16,95,125,.10),
            transparent 68%
        );

    filter:
        blur(60px);

    pointer-events:
        none;
}


.hw-structure-full-image {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height: auto;

    max-width: none;

    object-fit: contain;

    object-position:
        center center;

    margin:
        0 auto;

    border: 0;

    border-radius: 0;

    transform: none;

    filter:
        brightness(.99)
        contrast(1.015)
        saturate(1.02)
        drop-shadow(
            0 45px 75px
            rgba(0,0,0,.58)
        );
}


/*
   Very subtle fade at top/bottom only,
   WITHOUT cutting any left/right content.
*/
.hw-structure-full-image {
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 1.5%,
            #000 98.5%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 1.5%,
            #000 98.5%,
            transparent 100%
        );
}


@media (max-width: 900px) {

    .hw-structure-full {
        margin-top:
            20px;
    }

    .hw-structure-full-image-wrap {
        width:
            calc(100vw - 12px);
    }
}


@media (max-width: 600px) {

    .hw-structure-full {
        margin:
            12px auto
            45px;
    }

    /*
       Preserve full original aspect ratio.
       It will become smaller on mobile,
       but NOTHING is cropped.
    */
    .hw-structure-full-image {
        width:
            100%;
    }
}



/* =========================================================
   SAME WIDTH FIX FOR 3D STRUCTURE BLOCK
   make section width equal to the main site container
   ========================================================= */

.hw-structure-full {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 70px !important;
    padding: 0 !important;
}

.hw-structure-full-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.hw-structure-full-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

@media (max-width: 900px) {
    .hw-structure-full-image-wrap {
        width: 100% !important;
    }
}

@media (max-width: 600px) {
    .hw-structure-full {
        margin: 12px 0 45px !important;
    }

    .hw-structure-full-image-wrap {
        width: 100% !important;
    }

    .hw-structure-full-image {
        width: 100% !important;
    }
}



/* =========================================================
   TRANSPARENT 3D STRUCTURE V4
   ========================================================= */

.hw-structure-full {
    background: transparent !important;

    width: 100% !important;

    margin:
        30px 0
        70px !important;

    padding: 0 !important;

    overflow: visible !important;
}


.hw-structure-full-image-wrap {
    position: relative;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    overflow: visible !important;

    background: transparent !important;
}


/* remove old artificial background */
.hw-structure-full-image-wrap::before {
    display: none !important;
}


/* PNG itself */
.hw-structure-full-image {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: transparent !important;

    border: 0 !important;

    transform: none !important;

    /*
       Important:
       remove old mask because PNG already has transparency
    */
    -webkit-mask-image: none !important;
    mask-image: none !important;

    filter:
        drop-shadow(
            0 34px 54px
            rgba(0,0,0,.48)
        ) !important;
}


/*
   subtle glow under the floating model only
*/
.hw-structure-full::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4%;

    width: 68%;
    height: 18%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,178,255,.075),
            transparent 70%
        );

    filter:
        blur(60px);

    pointer-events: none;

    z-index: -1;
}


/* image stays inside same width as previous blocks */
@media (min-width: 901px) {

    .hw-structure-full-image {
        width: 100% !important;
    }
}


@media (max-width: 900px) {

    .hw-structure-full {
        margin:
            20px 0
            55px !important;
    }

    .hw-structure-full-image {
        width: 100% !important;
    }
}


@media (max-width: 600px) {

    .hw-structure-full {
        margin:
            12px 0
            40px !important;
    }

    .hw-structure-full-image {
        width: 100% !important;
    }
}




/* HACKER_WEB_FIX_SECTION_V1 */

.hw-fix {
    position: relative;

    padding:
        105px 0
        110px;

    border-top:
        1px solid
        rgba(255,255,255,.06);
}


.hw-fix::before {
    content: "";

    position: absolute;

    width: 42%;
    height: 54%;

    left: 3%;
    top: 20%;

    border-radius: 50%;

    background:
        rgba(0, 155, 210, .055);

    filter:
        blur(95px);

    pointer-events: none;
}


.hw-fix-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    gap: 78px;

    align-items: center;
}



/* =========================================
   CODE WINDOW
   ========================================= */

.hw-code-window {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            rgba(11,16,20,.97),
            rgba(6,10,12,.99)
        );

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.34);

    transform:
        rotate(-1deg);
}


.hw-code-window::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    box-shadow:
        inset 0 0 55px
        rgba(0,190,255,.025);
}


.hw-code-topbar {
    height: 53px;

    padding:
        0 18px;

    display: grid;

    grid-template-columns:
        100px 1fr 100px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    background:
        rgba(255,255,255,.012);
}


.hw-code-dots {
    display: flex;

    gap: 7px;
}


.hw-code-dots i {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.20);
}


.hw-code-dots i:first-child {
    background:
        rgba(168,255,10,.75);
}


.hw-code-file {
    justify-self: center;

    color:
        #aeb6bd;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        11px;
}


.hw-code-status {
    justify-self: end;

    color:
        var(--lime);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


.hw-code-body {
    display: grid;

    grid-template-columns:
        48px 1fr;

    min-height:
        430px;

    padding:
        25px 0;
}


.hw-code-lines {
    display: flex;
    flex-direction: column;

    gap: 9.5px;

    padding-top:
        2px;

    text-align: right;

    color:
        #45515a;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        12px;

    user-select:
        none;
}


.hw-code {
    margin: 0;

    padding:
        0 24px;

    overflow:
        hidden;

    color:
        #d9dee2;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size:
        14px;

    line-height:
        1.63;

    white-space:
        pre-wrap;
}


.hw-code .c {
    color:
        #68808e;
}


.hw-code .k {
    color:
        #50cbff;
}


.hw-code .f {
    color:
        var(--lime);
}


.hw-code .ok {
    color:
        #89e471;
}


.hw-code-footer {
    min-height:
        48px;

    padding:
        0 19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    color:
        #65717a;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size:
        10px;
}


.hw-code-led {
    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-right:
        7px;

    border-radius:
        50%;

    background:
        var(--lime);

    box-shadow:
        0 0 10px
        rgba(168,255,10,.40);
}



/* =========================================
   SEO TEXT
   ========================================= */

.hw-fix-content {
    position:
        relative;

    z-index:
        2;
}


.hw-fix-kicker {
    margin-bottom:
        14px;

    color:
        #8f999f;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .23em;

    text-transform:
        uppercase;
}


.hw-fix-content h2 {
    margin:
        0;

    max-width:
        650px;

    color:
        #f3f4f5;

    font-size:
        clamp(
            45px,
            4.3vw,
            68px
        );

    line-height:
        .98;

    letter-spacing:
        -.052em;

    font-weight:
        1000;
}


.hw-fix-content h2 span {
    display:
        block;

    color:
        var(--lime);
}


.hw-fix-lead {
    max-width:
        640px;

    margin:
        24px 0
        31px;

    color:
        #aeb5bb;

    font-size:
        16px;

    line-height:
        1.65;
}


.hw-fix-list {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px 28px;
}


.hw-fix-list > div {
    display:
        grid;

    grid-template-columns:
        26px 1fr;

    align-items:
        start;

    gap:
        10px;
}


.hw-fix-list > div > span {
    width:
        22px;

    height:
        22px;

    margin-top:
        1px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(168,255,10,.42);

    border-radius:
        50%;

    color:
        var(--lime);

    font-size:
        11px;

    font-weight:
        900;
}


.hw-fix-list p {
    margin:
        0;

    color:
        #7f898f;

    font-size:
        12px;

    line-height:
        1.5;
}


.hw-fix-list strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #e8ebed;

    font-size:
        13px;

    line-height:
        1.3;
}


.hw-fix-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin-top:
        34px;
}


.hw-fix-button {
    min-height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        24px;

    padding:
        0 26px;

    border:
        1px solid
        var(--lime);

    border-radius:
        999px;

    color:
        #050708;

    background:
        var(--lime);

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

    box-shadow:
        0 0 28px
        rgba(168,255,10,.12);

    transition:
        .18s ease;
}


.hw-fix-button span {
    font-size:
        18px;
}


.hw-fix-button:hover {
    transform:
        translateY(-2px);

    background:
        var(--lime-2);

    border-color:
        var(--lime-2);

    box-shadow:
        0 0 34px
        rgba(168,255,10,.20);
}


.hw-fix-secondary {
    color:
        #9aa3aa;

    font-size:
        11px;

    font-weight:
        750;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    transition:
        color .18s ease;
}


.hw-fix-secondary:hover {
    color:
        #fff;
}



/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1050px) {

    .hw-fix-grid {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }

    .hw-code-window {
        transform:
            none;

        max-width:
            850px;
    }

}


@media (max-width: 700px) {

    .hw-fix {
        padding:
            70px 0;
    }

    .hw-code-body {
        min-height:
            360px;

        grid-template-columns:
            38px 1fr;
    }

    .hw-code {
        padding:
            0 13px;

        font-size:
            11px;
    }

    .hw-code-lines {
        font-size:
            10px;

        gap:
            8.8px;
    }

    .hw-fix-list {
        grid-template-columns:
            1fr;
    }

    .hw-fix-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .hw-fix-button {
        width:
            100%;
    }

}


@media (max-width: 480px) {

    .hw-fix-content h2 {
        font-size:
            43px;
    }

    .hw-code-topbar {
        grid-template-columns:
            60px 1fr 70px;
    }

}

/* /HACKER_WEB_FIX_SECTION_V1 */




/* HACKER_WEB_DESIGN_SECTION_V1 */

.hw-design {
    position: relative;

    padding:
        105px 0
        110px;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}


.hw-design::before {
    content: "";

    position: absolute;

    right: 4%;
    top: 20%;

    width: 40%;
    height: 56%;

    border-radius: 50%;

    background:
        rgba(85, 120, 140, .07);

    filter:
        blur(95px);

    pointer-events: none;
}


.hw-design-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(430px, .88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap: 70px;
}


/* =============================
   CONTENT
   ============================= */

.hw-design-content {
    position: relative;

    z-index: 3;
}


.hw-design-kicker {
    margin-bottom:
        15px;

    color:
        #8f989f;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;
}


.hw-design h2 {
    margin: 0;

    max-width:
        650px;

    color:
        #f3f4f5;

    font-size:
        clamp(
            46px,
            4.35vw,
            69px
        );

    line-height:
        .97;

    letter-spacing:
        -.052em;

    font-weight:
        1000;
}


.hw-design h2 span {
    display:
        block;

    color:
        var(--lime);
}


.hw-design-lead {
    max-width:
        640px;

    margin:
        24px 0
        14px;

    color:
        #b1b8be;

    font-size:
        16px;

    line-height:
        1.65;
}


.hw-design-text {
    max-width:
        630px;

    margin:
        0 0
        29px;

    color:
        #7f898f;

    font-size:
        13px;

    line-height:
        1.65;
}


/* =============================
   FEATURES
   ============================= */

.hw-design-features {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        13px 24px;
}


.hw-design-feature {
    display:
        grid;

    grid-template-columns:
        34px 1fr;

    align-items:
        start;

    gap:
        10px;

    padding:
        12px 0;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


.hw-design-feature > span {
    color:
        var(--lime);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size:
        11px;

    font-weight:
        900;
}


.hw-design-feature strong {
    display:
        block;

    color:
        #e9ecee;

    font-size:
        13px;

    line-height:
        1.2;
}


.hw-design-feature small {
    display:
        block;

    margin-top:
        4px;

    color:
        #747e85;

    font-size:
        11px;

    line-height:
        1.4;
}


/* =============================
   BUTTON
   ============================= */

.hw-design-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin-top:
        31px;
}


.hw-design-button {
    min-height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        24px;

    padding:
        0 27px;

    border:
        1px solid
        var(--lime);

    border-radius:
        999px;

    color:
        #050708;

    background:
        var(--lime);

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    box-shadow:
        0 0 30px
        rgba(168,255,10,.12);

    transition:
        .18s ease;
}


.hw-design-button span {
    font-size:
        19px;
}


.hw-design-button:hover {
    transform:
        translateY(-2px);

    background:
        var(--lime-2);

    border-color:
        var(--lime-2);

    box-shadow:
        0 0 38px
        rgba(168,255,10,.20);
}


.hw-design-link {
    color:
        #949da4;

    font-size:
        11px;

    font-weight:
        750;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    transition:
        color .18s ease;
}


.hw-design-link:hover {
    color:
        #fff;
}


/* =============================
   FIGMA VISUAL
   ============================= */

.hw-design-visual {
    position: relative;

    min-height:
        570px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        2;
}


.hw-design-glow {
    position:
        absolute;

    width:
        76%;

    height:
        50%;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 165, 210, .08),
            rgba(168,255,10,.025),
            transparent 70%
        );

    filter:
        blur(70px);
}


.hw-design-image {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        min(
            790px,
            100%
        );

    height:
        auto;

    object-fit:
        contain;

    transform:
        perspective(1500px)
        rotateY(-4deg)
        rotateX(1deg);

    transform-origin:
        center;

    filter:
        brightness(.97)
        contrast(1.03)
        drop-shadow(
            0 36px 62px
            rgba(0,0,0,.55)
        );

    transition:
        .35s ease;
}


.hw-design-visual:hover
.hw-design-image {
    transform:
        perspective(1500px)
        rotateY(-2deg)
        rotateX(.5deg)
        scale(1.012);
}


/* =============================
   RESPONSIVE
   ============================= */

@media (max-width: 1050px) {

    .hw-design-grid {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

    .hw-design-content {
        max-width:
            750px;
    }

    .hw-design-visual {
        min-height:
            500px;
    }

    .hw-design-image {
        width:
            min(880px, 100%);

        transform:
            none;
    }

}


@media (max-width: 700px) {

    .hw-design {
        padding:
            70px 0;
    }

    .hw-design-features {
        grid-template-columns:
            1fr;
    }

    .hw-design-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .hw-design-button {
        width:
            100%;
    }

    .hw-design-visual {
        min-height:
            380px;
    }

}


@media (max-width: 480px) {

    .hw-design h2 {
        font-size:
            43px;
    }

    .hw-design-visual {
        min-height:
            320px;
    }

}

/* /HACKER_WEB_DESIGN_SECTION_V1 */




/* HACKER_WEB_GUARANTEE_SECTION_V1 */

.hw-guarantee {
    position: relative;

    isolation: isolate;

    margin-top: 15px;

    padding:
        110px 0
        105px;

    overflow: hidden;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}


/* subtle dark technical background */

.hw-guarantee-bg {
    position: absolute;

    z-index: -3;

    inset: 0;

    pointer-events: none;

    opacity: .72;

    background:

        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),

        radial-gradient(
            circle at 16% 42%,
            rgba(168,255,10,.055),
            transparent 28%
        ),

        radial-gradient(
            circle at 82% 55%,
            rgba(0,145,195,.055),
            transparent 31%
        );

    background-size:
        72px 72px,
        72px 72px,
        auto,
        auto;
}


/* thin decorative architecture lines */

.hw-guarantee::before {
    content: "";

    position: absolute;

    z-index: -2;

    width: 660px;
    height: 660px;

    left: -245px;
    bottom: -420px;

    border:
        1px solid
        rgba(168,255,10,.11);

    border-radius: 50%;

    pointer-events: none;
}


.hw-guarantee::after {
    content: "";

    position: absolute;

    z-index: -2;

    width: 460px;
    height: 460px;

    right: -220px;
    top: -280px;

    border:
        1px solid
        rgba(75,170,205,.10);

    border-radius: 50%;

    pointer-events: none;
}


.hw-guarantee-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(390px, .74fr);

    align-items: center;

    gap: 92px;
}


/* =====================================
   CONTENT
   ===================================== */

.hw-guarantee-content {
    position: relative;
}


.hw-guarantee-kicker {
    margin-bottom:
        16px;

    color:
        #8c969d;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .25em;

    text-transform:
        uppercase;
}


/* Big 12 months decoration */

.hw-guarantee-number {
    position: absolute;

    top: -38px;
    right: 4%;

    display: flex;

    align-items: baseline;

    gap: 8px;

    color:
        rgba(255,255,255,.025);

    pointer-events:
        none;

    user-select:
        none;
}


.hw-guarantee-number span {
    font-size:
        160px;

    line-height:
        1;

    letter-spacing:
        -.09em;

    font-weight:
        1000;
}


.hw-guarantee-number small {
    font-size:
        25px;

    font-weight:
        800;
}


.hw-guarantee h2 {
    position: relative;

    z-index: 2;

    margin: 0;

    max-width:
        720px;

    color:
        #f1f3f4;

    font-size:
        clamp(
            48px,
            4.65vw,
            74px
        );

    line-height:
        .96;

    letter-spacing:
        -.055em;

    font-weight:
        1000;
}


.hw-guarantee h2 span {
    display: block;

    color:
        var(--lime);
}


.hw-guarantee-lead {
    max-width:
        710px;

    margin:
        25px 0
        13px;

    color:
        #b2b9bf;

    font-size:
        16px;

    line-height:
        1.68;
}


.hw-guarantee-text {
    max-width:
        700px;

    margin:
        0 0
        32px;

    color:
        #778188;

    font-size:
        13px;

    line-height:
        1.65;
}


/* features */

.hw-guarantee-items {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        4px 28px;
}


.hw-guarantee-item {
    display: grid;

    grid-template-columns:
        34px 1fr;

    gap: 11px;

    padding:
        15px 0;

    border-top:
        1px solid
        rgba(255,255,255,.075);
}


.hw-guarantee-item > span {
    color:
        var(--lime);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size:
        10px;

    font-weight:
        900;
}


.hw-guarantee-item strong {
    display: block;

    color:
        #e8ebed;

    font-size:
        13px;

    line-height:
        1.25;
}


.hw-guarantee-item small {
    display: block;

    margin-top:
        4px;

    max-width:
        265px;

    color:
        #717a81;

    font-size:
        11px;

    line-height:
        1.45;
}


/* =====================================
   FORM
   ===================================== */

.hw-guarantee-form-wrap {
    position: relative;

    padding:
        29px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            rgba(10,15,18,.80),
            rgba(6,10,12,.92)
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 65px
        rgba(0,0,0,.25);
}


/* tiny lime corner detail */

.hw-guarantee-form-wrap::before {
    content: "";

    position: absolute;

    width: 42px;
    height: 1px;

    left: -1px;
    top: -1px;

    background:
        var(--lime);

    box-shadow:
        0 0 15px
        rgba(168,255,10,.28);
}


.hw-guarantee-form-head {
    margin-bottom:
        23px;
}


.hw-guarantee-form-head > span {
    color:
        var(--lime);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.hw-guarantee-form-head h3 {
    margin:
        8px 0
        6px;

    color:
        #f1f3f4;

    font-size:
        28px;

    line-height:
        1.08;

    letter-spacing:
        -.035em;
}


.hw-guarantee-form-head p {
    margin: 0;

    max-width:
        360px;

    color:
        #7d878e;

    font-size:
        12px;

    line-height:
        1.5;
}


.hw-g-field {
    display: grid;

    gap:
        7px;

    margin-bottom:
        13px;
}


.hw-g-field label {
    color:
        #89939a;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.hw-g-field input,
.hw-g-field textarea {
    width: 100%;

    color:
        #e9ecee;

    outline: none;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        10px;

    background:
        rgba(2,6,8,.56);

    padding:
        13px 14px;

    font-size:
        13px;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.hw-g-field textarea {
    min-height:
        105px;

    resize:
        vertical;
}


.hw-g-field input::placeholder,
.hw-g-field textarea::placeholder {
    color:
        #4e585f;
}


.hw-g-field input:focus,
.hw-g-field textarea:focus {
    border-color:
        rgba(168,255,10,.42);

    background:
        rgba(4,9,11,.74);

    box-shadow:
        0 0 0 3px
        rgba(168,255,10,.025);
}


.hw-guarantee-submit {
    width: 100%;

    min-height:
        52px;

    margin-top:
        4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 19px;

    cursor:
        pointer;

    border:
        1px solid
        var(--lime);

    border-radius:
        999px;

    color:
        #050708;

    background:
        var(--lime);

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.hw-guarantee-submit span {
    font-size:
        19px;
}


.hw-guarantee-submit:hover {
    transform:
        translateY(-2px);

    background:
        var(--lime-2);

    box-shadow:
        0 0 28px
        rgba(168,255,10,.16);
}


.hw-guarantee-form-status {
    min-height:
        20px;

    margin-top:
        12px;

    color:
        #8b969c;

    font-size:
        11px;
}


.hw-guarantee-form-status.is-success {
    color:
        var(--lime);
}


.hw-guarantee-form-status.is-error {
    color:
        #ff7676;
}


.hw-guarantee-form-foot {
    display: flex;

    align-items: center;

    gap:
        8px;

    margin-top:
        10px;

    color:
        #566168;

    font-size:
        9px;

    line-height:
        1.4;
}


.hw-guarantee-form-foot > span {
    width:
        5px;

    height:
        5px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--lime);
}


/* =====================================
   RESPONSIVE
   ===================================== */

@media (max-width: 1050px) {

    .hw-guarantee-grid {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .hw-guarantee-form-wrap {
        max-width:
            680px;
    }

}


@media (max-width: 700px) {

    .hw-guarantee {
        padding:
            75px 0;
    }


    .hw-guarantee-items {
        grid-template-columns:
            1fr;
    }


    .hw-guarantee-number {
        display:
            none;
    }

}


@media (max-width: 480px) {

    .hw-guarantee h2 {
        font-size:
            43px;
    }


    .hw-guarantee-form-wrap {
        padding:
            22px;
    }

}

/* /HACKER_WEB_GUARANTEE_SECTION_V1 */




/* HACKER_WEB_FOOTER_V1 */

.hw-footer {
    position: relative;

    width: min(
        var(--max),
        calc(100% - 74px)
    );

    margin: 0 auto;

    padding:
        34px 0
        28px;
}


.hw-footer-line {
    position: relative;

    width: 100%;
    height: 1px;

    margin-bottom:
        38px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.11) 8%,
            rgba(255,255,255,.11) 92%,
            transparent 100%
        );
}


.hw-footer-line::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 58px;
    height: 1px;

    background:
        var(--lime);

    box-shadow:
        0 0 14px
        rgba(168,255,10,.28);
}


.hw-footer-top {
    display: grid;

    grid-template-columns:
        1.15fr
        .9fr
        .75fr;

    gap:
        60px;

    align-items:
        start;

    padding-bottom:
        38px;
}


.hw-footer-brand {
    max-width:
        380px;
}


.hw-footer-logo {
    display:
        inline-block;

    color:
        #f3f4f5;

    font-size:
        21px;

    font-weight:
        1000;

    letter-spacing:
        -.045em;
}


.hw-footer-logo span {
    color:
        var(--lime);
}


.hw-footer-brand p {
    max-width:
        330px;

    margin:
        14px 0
        0;

    color:
        #727c83;

    font-size:
        12px;

    line-height:
        1.6;
}


.hw-footer-nav {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px 28px;
}


.hw-footer-nav a {
    position: relative;

    width:
        fit-content;

    color:
        #a4acb2;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    transition:
        color .18s ease;
}


.hw-footer-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

    background:
        var(--lime);

    transition:
        width .18s ease;
}


.hw-footer-nav a:hover {
    color:
        #fff;
}


.hw-footer-nav a:hover::after {
    width:
        100%;
}


.hw-footer-contact {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.hw-footer-label {
    margin-bottom:
        10px;

    color:
        #69737a;

    font-size:
        9px;

    font-weight:
        750;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.hw-footer-project {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    color:
        #f1f3f4;

    font-size:
        14px;

    font-weight:
        750;

    transition:
        color .18s ease;
}


.hw-footer-project > span {
    color:
        var(--lime);

    font-size:
        18px;

    transition:
        transform .18s ease;
}


.hw-footer-project:hover {
    color:
        var(--lime);
}


.hw-footer-project:hover > span {
    transform:
        translateX(4px);
}


.hw-footer-telegram {
    margin-top:
        14px;

    color:
        #758088;

    font-size:
        11px;

    transition:
        color .18s ease;
}


.hw-footer-telegram:hover {
    color:
        #fff;
}


/* bottom */

.hw-footer-bottom {
    min-height:
        54px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.055);

    color:
        #515b62;

    font-size:
        9px;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.hw-footer-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #687279;
}


.hw-footer-status i {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--lime);

    box-shadow:
        0 0 10px
        rgba(168,255,10,.34);
}


.hw-footer-up {
    justify-self:
        end;

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        50%;

    color:
        #8d969d;

    font-size:
        15px;

    transition:
        .18s ease;
}


.hw-footer-up:hover {
    color:
        #050708;

    border-color:
        var(--lime);

    background:
        var(--lime);
}


@media (max-width: 850px) {

    .hw-footer {
        width:
            calc(100% - 28px);
    }


    .hw-footer-top {
        grid-template-columns:
            1fr 1fr;

        gap:
            36px;
    }


    .hw-footer-contact {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 560px) {

    .hw-footer-top {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .hw-footer-contact {
        grid-column:
            auto;
    }


    .hw-footer-nav {
        grid-template-columns:
            1fr 1fr;
    }


    .hw-footer-bottom {
        grid-template-columns:
            1fr auto;

        padding:
            15px 0;

        row-gap:
            12px;
    }


    .hw-footer-status {
        grid-row:
            2;

        grid-column:
            1 / -1;
    }

}

/* /HACKER_WEB_FOOTER_V1 */




/* HACKER_WEB_MOBILE_GLOBAL_FIX_V1 */

/*
 * HACKER WEB
 * Real mobile containment fix.
 *
 * Do not only hide overflow:
 * remove fixed/min widths from the actual
 * mobile layout.
 */

html,
body {
    max-width: 100%;
}


/* =========================================
   TABLET / MOBILE
   ========================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
        overflow-x: clip !important;
    }


    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    img,
    video,
    canvas,
    svg {
        max-width: 100%;
    }


    /*
     * MAIN CONTAINER
     */

    .hw-header,
    .hw-header .hw-shell,
    main.hw-shell,
    .hw-shell {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    .hw-header .hw-shell,
    main.hw-shell,
    .hw-shell {
        width: calc(100% - 28px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * HEADER
     */

    .hw-nav {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 14px !important;
    }


    .hw-logo {
        flex: 0 0 auto;

        white-space: nowrap;
    }


    .hw-menu {
        min-width: 0 !important;
    }


    .hw-top-cta {
        flex: 0 0 auto;

        min-width: 0 !important;
        max-width: 100% !important;

        white-space: nowrap;
    }


    /*
     * HERO — MAIN FIX
     */

    .hw-hero {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: auto !important;

        gap: 26px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        overflow: visible !important;
    }


    .hw-hero > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    .hw-hero-copy,
    .hw-hero-content,
    .hw-hero-text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .hw-hero h1,
    .hw-hero-title {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-right: 0 !important;

        font-size:
            clamp(
                46px,
                12.6vw,
                72px
            ) !important;

        line-height: .94 !important;

        letter-spacing:
            -.055em !important;

        overflow-wrap: normal;
        word-break: normal;
    }


    .hw-hero p,
    .hw-hero-subtitle,
    .hw-hero-description {
        width: 100% !important;
        max-width: 620px !important;
        min-width: 0 !important;
    }


    /*
     * HERO IMAGE / DEVICE
     */

    .hw-hero-visual,
    .hw-hero-media,
    .hw-hero-art,
    .hw-hero-image,
    .hw-hero-device-wrap {
        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform: none !important;
    }


    .hw-hero-device,
    .hw-hero-visual img,
    .hw-hero img[src*="hero-device"],
    img[src*="hacker-web-hero-device"] {
        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;

        object-fit: contain !important;

        transform: none !important;
    }


    /*
     * HERO BUTTONS
     */

    .hw-hero-actions,
    .hw-actions {
        display: flex !important;

        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 10px !important;
    }


    .hw-hero-actions > *,
    .hw-actions > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /*
     * STATS
     *
     * Old cards had minimum widths.
     * 2 equal columns remove mobile overflow.
     */

    .hw-stats {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 10px !important;
    }


    .hw-stats > *,
    .hw-stat,
    .hw-stat-card {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /*
     * PROCESS / STRUCTURE
     */

    .hw-process,
    .hw-structure-full,
    .hw-structure-full-image-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .hw-structure-full-image {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * WEBSITE FIX SECTION
     */

    .hw-fix,
    .hw-fix-grid,
    .hw-fix-content,
    .hw-fix-art {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .hw-fix-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .hw-code-window {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        transform: none !important;
    }


    .hw-code-body {
        min-width: 0 !important;
        max-width: 100% !important;

        overflow: hidden;
    }


    .hw-code {
        min-width: 0 !important;
        max-width: 100% !important;

        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
    }


    /*
     * DESIGN / FIGMA
     */

    .hw-design,
    .hw-design-grid,
    .hw-design-content,
    .hw-design-visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .hw-design-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .hw-design-visual {
        min-height: 0 !important;
    }


    .hw-design-image {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        transform: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * GUARANTEE / FORM
     */

    .hw-guarantee,
    .hw-guarantee-grid,
    .hw-guarantee-content,
    .hw-guarantee-form-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    .hw-guarantee-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .hw-guarantee-form-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .hw-g-field,
    .hw-g-field input,
    .hw-g-field textarea,
    .hw-guarantee-submit {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /*
     * FOOTER
     */

    .hw-footer {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .hw-footer-top,
    .hw-footer-bottom,
    .hw-footer-brand,
    .hw-footer-nav,
    .hw-footer-contact {
        min-width: 0 !important;
        max-width: 100% !important;
    }

}



/* =========================================
   PHONES
   ========================================= */

@media (max-width: 700px) {

    /*
     * Full desktop navigation is too wide
     * for phones. Keep logo + project CTA.
     */

    .hw-menu {
        display: none !important;
    }


    .hw-nav {
        display: flex !important;

        justify-content:
            space-between !important;

        align-items:
            center !important;
    }


    .hw-logo {
        font-size: 18px !important;
    }


    .hw-top-cta {
        padding:
            11px 14px !important;

        font-size:
            9px !important;

        letter-spacing:
            .04em !important;
    }


    .hw-hero {
        gap: 20px !important;

        padding-top:
            38px !important;
    }


    .hw-hero h1,
    .hw-hero-title {
        font-size:
            clamp(
                43px,
                12.5vw,
                60px
            ) !important;
    }


    .hw-fix-content h2,
    .hw-design h2,
    .hw-guarantee h2 {
        max-width: 100% !important;
    }


    .hw-design-features,
    .hw-guarantee-items {
        grid-template-columns:
            minmax(0,1fr) !important;
    }

}



/* =========================================
   SMALL PHONES 360–560
   ========================================= */

@media (max-width: 560px) {

    .hw-header .hw-shell,
    main.hw-shell,
    .hw-shell {
        width:
            calc(100% - 20px) !important;
    }


    .hw-footer {
        width:
            calc(100% - 20px) !important;
    }


    .hw-hero h1,
    .hw-hero-title {
        font-size:
            clamp(
                40px,
                12.4vw,
                52px
            ) !important;

        line-height:
            .95 !important;
    }


    .hw-hero-actions,
    .hw-actions {
        display: grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .hw-hero-actions > a,
    .hw-actions > a {
        width: 100% !important;
        max-width: 100% !important;
    }


    .hw-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap: 8px !important;
    }


    .hw-stat,
    .hw-stat-card,
    .hw-stats > * {
        padding-left:
            12px !important;

        padding-right:
            12px !important;
    }


    .hw-fix,
    .hw-design,
    .hw-guarantee {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    .hw-fix-content h2,
    .hw-design h2,
    .hw-guarantee h2 {
        font-size:
            clamp(
                38px,
                11.6vw,
                47px
            ) !important;

        line-height:
            .98 !important;
    }


    .hw-guarantee-form-wrap {
        padding:
            19px !important;

        border-radius:
            14px !important;
    }


    /*
     * iOS: 16px prevents automatic
     * zoom when focusing a field.
     */

    .hw-g-field input,
    .hw-g-field textarea {
        font-size:
            16px !important;
    }


    .hw-footer-nav {
        grid-template-columns:
            1fr 1fr !important;
    }

}


/* /HACKER_WEB_MOBILE_GLOBAL_FIX_V1 */




/* HACKER_WEB_MOBILE_HERO_IMAGE_V2 */

@media (max-width: 900px) {

    /*
     * HERO:
     * text first, image second.
     * Image stays visible.
     */

    .hw-hero {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-template-areas:
            "copy"
            "visual" !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: visible !important;
    }


    .hw-hero-copy,
    .hw-hero-content {
        grid-area: copy;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        z-index: 3;
    }


    /*
     * Restore image container
     */

    .hw-hero-visual,
    .hw-hero-media,
    .hw-hero-art,
    .hw-hero-image,
    .hw-hero-device-wrap {

        grid-area: visual;

        display: flex !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        margin:
            8px auto
            0 !important;

        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;

        pointer-events: none;
    }


    /*
     * Actual laptop / phone image
     */

    .hw-hero-device,
    .hw-hero-visual img,
    .hw-hero-media img,
    .hw-hero-art img,
    .hw-hero-image img,
    img[src*="hacker-web-hero-device"] {

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        inset: auto !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: min(
            100%,
            620px
        ) !important;

        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        max-height: none !important;

        object-fit: contain !important;

        margin:
            0 auto !important;

        transform: none !important;

        clip-path: none !important;
    }

}



/* PHONE */

@media (max-width: 700px) {

    .hw-hero {
        gap: 10px !important;
    }


    .hw-hero-visual,
    .hw-hero-media,
    .hw-hero-art,
    .hw-hero-image,
    .hw-hero-device-wrap {

        margin-top:
            4px !important;
    }


    .hw-hero-device,
    .hw-hero-visual img,
    img[src*="hacker-web-hero-device"] {

        /*
         * Big enough to remain an important
         * part of the hero, but never wider
         * than the phone viewport.
         */

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

}



/* SMALL PHONE */

@media (max-width: 480px) {

    .hw-hero-visual,
    .hw-hero-media,
    .hw-hero-art,
    .hw-hero-image,
    .hw-hero-device-wrap {

        width: 100% !important;

        margin-top:
            0 !important;
    }


    .hw-hero-device,
    .hw-hero-visual img,
    img[src*="hacker-web-hero-device"] {

        width: 100% !important;
        max-width: 100% !important;

        transform: none !important;
    }

}

/* /HACKER_WEB_MOBILE_HERO_IMAGE_V2 */




/* HACKER_WEB_MOBILE_HERO_IMAGE_V3 */


/*
 * Desktop:
 * keep the original hero composition.
 */

.hw-hero-mobile-device {
    display: none;
}



/* =========================================
   MOBILE HERO IMAGE
   ========================================= */

@media (max-width: 900px) {

    /*
     * Hide ONLY the original desktop hero
     * image on mobile.
     *
     * The dedicated mobile copy below
     * remains visible.
     */

    .hw-hero
    img[src="/assets/hacker-web-hero-device.webp"] {
        display: none !important;
    }


    /*
     * Dedicated mobile visual.
     */

    .hw-hero-mobile-device {
        display: flex !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        inset: auto !important;

        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            14px auto
            2px !important;

        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        transform: none !important;

        z-index: 2;
    }


    /*
     * Higher specificity than the rule
     * hiding the original image.
     */

    .hw-hero
    .hw-hero-mobile-device
    img[src="/assets/hacker-web-hero-device.webp"] {

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;

        inset: auto !important;

        width: min(
            100%,
            650px
        ) !important;

        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        max-height: none !important;

        margin:
            0 auto !important;

        padding: 0 !important;

        object-fit: contain !important;

        transform: none !important;

        clip-path: none !important;

        mask: none !important;
        -webkit-mask: none !important;

        filter:
            drop-shadow(
                0 24px 38px
                rgba(0,0,0,.32)
            ) !important;
    }

}



/* =========================================
   NORMAL PHONES
   ========================================= */

@media (max-width: 700px) {

    .hw-hero-mobile-device {
        margin-top:
            8px !important;

        margin-bottom:
            5px !important;
    }


    .hw-hero
    .hw-hero-mobile-device
    img[src="/assets/hacker-web-hero-device.webp"] {

        width:
            100% !important;

        max-width:
            100% !important;
    }

}



/* =========================================
   360–480px
   ========================================= */

@media (max-width: 480px) {

    .hw-hero-mobile-device {
        /*
         * Slightly wider visually without
         * creating horizontal overflow.
         */

        width:
            calc(100% + 8px) !important;

        max-width:
            calc(100% + 8px) !important;

        margin-left:
            -4px !important;

        margin-right:
            -4px !important;

        margin-top:
            6px !important;
    }


    .hw-hero
    .hw-hero-mobile-device
    img[src="/assets/hacker-web-hero-device.webp"] {

        width:
            100% !important;

        max-width:
            100% !important;

        height:
            auto !important;
    }

}


/* /HACKER_WEB_MOBILE_HERO_IMAGE_V3 */




/* HACKER_WEB_MOBILE_FOOTER_V2 */

@media (max-width: 700px) {

    /* =========================
       FOOTER CONTAINER
       ========================= */

    .hw-footer {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;

        margin:
            0 auto !important;

        padding:
            30px 0
            20px !important;
    }


    .hw-footer-line {
        margin-bottom:
            30px !important;
    }


    .hw-footer-line::before {
        width:
            54px !important;

        left:
            50% !important;

        transform:
            translateX(-50%) !important;
    }



    /* =========================
       TOP
       ========================= */

    .hw-footer-top {
        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        width:
            100% !important;

        gap:
            0 !important;

        padding-bottom:
            30px !important;
    }



    /* =========================
       BRAND
       ========================= */

    .hw-footer-brand {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 auto
            28px !important;

        text-align:
            center !important;
    }


    .hw-footer-logo {
        display:
            inline-block !important;

        font-size:
            24px !important;

        line-height:
            1 !important;
    }


    .hw-footer-brand p {
        max-width:
            320px !important;

        margin:
            13px auto
            0 !important;

        padding:
            0 8px !important;

        font-size:
            12px !important;

        line-height:
            1.6 !important;

        text-align:
            center !important;
    }



    /* =========================
       NAVIGATION
       ========================= */

    .hw-footer-nav {
        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        width:
            100% !important;

        max-width:
            100% !important;

        gap:
            0 !important;

        margin:
            0 0
            30px !important;

        border-top:
            1px solid
            rgba(255,255,255,.07);

        border-bottom:
            1px solid
            rgba(255,255,255,.07);
    }


    .hw-footer-nav a {
        width:
            100% !important;

        min-height:
            48px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        margin:
            0 !important;

        padding:
            0 10px !important;

        color:
            #9ca5ab !important;

        font-size:
            10px !important;

        letter-spacing:
            .09em !important;

        text-align:
            center !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.055);
    }


    .hw-footer-nav a:nth-child(odd) {
        border-right:
            1px solid
            rgba(255,255,255,.055);
    }


    .hw-footer-nav a:nth-last-child(-n+2) {
        border-bottom:
            0;
    }


    .hw-footer-nav a::after {
        display:
            none !important;
    }



    /* =========================
       CONTACT
       ========================= */

    .hw-footer-contact {
        width:
            100% !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        text-align:
            center !important;
    }


    .hw-footer-label {
        margin:
            0 0
            10px !important;

        text-align:
            center !important;

        font-size:
            9px !important;
    }


    .hw-footer-project {
        width:
            min(
                100%,
                330px
            ) !important;

        min-height:
            50px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        margin:
            0 auto !important;

        padding:
            0 19px !important;

        border:
            1px solid
            rgba(168,255,10,.45) !important;

        border-radius:
            999px !important;

        color:
            #f4f6f4 !important;

        background:
            rgba(168,255,10,.025) !important;

        font-size:
            12px !important;

        text-align:
            left !important;
    }


    .hw-footer-project > span {
        flex:
            0 0 auto !important;

        color:
            var(--lime) !important;
    }


    .hw-footer-telegram {
        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        min-height:
            36px !important;

        margin:
            13px auto
            0 !important;

        padding:
            0 14px !important;

        color:
            #858f95 !important;

        font-size:
            11px !important;

        text-align:
            center !important;
    }



    /* =========================
       BOTTOM
       ========================= */

    .hw-footer-bottom {
        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            0 !important;

        gap:
            11px !important;

        padding:
            20px 0
            4px !important;

        text-align:
            center !important;
    }


    .hw-footer-bottom > div:first-child {
        width:
            100% !important;

        text-align:
            center !important;

        color:
            #626c72 !important;

        font-size:
            9px !important;
    }


    .hw-footer-status {
        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            auto !important;

        gap:
            7px !important;

        color:
            #6f7a80 !important;

        font-size:
            9px !important;

        text-align:
            center !important;
    }


    .hw-footer-status i {
        width:
            6px !important;

        height:
            6px !important;

        flex:
            0 0 auto !important;
    }


    .hw-footer-up {
        justify-self:
            auto !important;

        width:
            36px !important;

        height:
            36px !important;

        margin:
            3px auto
            0 !important;
    }

}



/* =============================
   VERY SMALL MOBILE
   ============================= */

@media (max-width: 390px) {

    .hw-footer {
        width:
            calc(100% - 16px) !important;
    }


    .hw-footer-logo {
        font-size:
            22px !important;
    }


    .hw-footer-brand p {
        max-width:
            290px !important;
    }


    .hw-footer-nav a {
        min-height:
            46px !important;

        font-size:
            9px !important;
    }


    .hw-footer-project {
        width:
            100% !important;

        min-height:
            48px !important;

        padding:
            0 17px !important;
    }

}

/* /HACKER_WEB_MOBILE_FOOTER_V2 */




/* HACKER_WEB_FOOTER_UP_RIGHT_V1 */

@media (max-width: 700px) {

    .hw-footer-bottom {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        padding:
            20px 48px
            8px !important;
    }


    .hw-footer-bottom > div:first-child {
        width: 100% !important;

        text-align: center !important;
    }


    .hw-footer-status {
        justify-content: center !important;

        text-align: center !important;
    }


    .hw-footer-up {
        position: absolute !important;

        right: 4px !important;
        bottom: 4px !important;

        margin: 0 !important;

        width: 36px !important;
        height: 36px !important;

        display: grid !important;
        place-items: center !important;

        z-index: 3;
    }

}


@media (max-width: 390px) {

    .hw-footer-bottom {
        padding-left: 42px !important;
        padding-right: 42px !important;
    }


    .hw-footer-up {
        right: 0 !important;
        bottom: 2px !important;
    }

}

/* /HACKER_WEB_FOOTER_UP_RIGHT_V1 */




/* HACKER_WEB_MOBILE_MENU_V1 */


/* desktop */

.hw-burger,
.hw-mobile-menu,
.hw-mobile-menu-backdrop {
    display: none;
}



@media (max-width: 700px) {

    body.hw-menu-open {
        overflow: hidden !important;
    }


    /* ===============================
       HEADER
       =============================== */

    .hw-header {
        position: relative;
        z-index: 1000;
    }


    .hw-header .hw-nav {
        position: relative;

        display: grid !important;

        grid-template-columns:
            auto 1fr auto !important;

        align-items: center !important;

        width: 100% !important;
    }


    /*
     * Desktop CTA hidden on phone.
     * Burger takes its place.
     */

    .hw-header .hw-top-cta {
        display: none !important;
    }



    /* ===============================
       BURGER
       =============================== */

    .hw-burger {
        position: relative;

        grid-column: 3;

        display: flex !important;

        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        padding: 0;

        cursor: pointer;

        border:
            1px solid
            rgba(255,255,255,.11);

        border-radius: 14px;

        background:
            rgba(9,13,15,.72);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

        transition:
            border-color .22s ease,
            background .22s ease,
            transform .22s ease;

        z-index: 1010;
    }


    .hw-burger:hover,
    .hw-burger.is-open {
        border-color:
            rgba(168,255,10,.48);

        background:
            rgba(12,18,20,.94);
    }


    /*
     * little neon status pixel
     */

    .hw-burger-dot {
        position: absolute;

        top: 9px;
        right: 9px;

        width: 4px;
        height: 4px;

        border-radius: 50%;

        background:
            var(--lime);

        box-shadow:
            0 0 9px
            rgba(168,255,10,.65);

        transition:
            transform .25s ease,
            opacity .25s ease;
    }


    .hw-burger-lines {
        position: relative;

        width: 22px;
        height: 18px;

        display: block;
    }


    .hw-burger-lines i {
        position: absolute;

        right: 0;

        display: block;

        height: 1px;

        border-radius: 2px;

        background:
            #edf1ef;

        transform-origin:
            center;

        transition:
            width .25s ease,
            top .25s ease,
            transform .25s ease,
            opacity .18s ease,
            background .25s ease;
    }


    .hw-burger-lines i:nth-child(1) {
        top: 2px;

        width: 22px;
    }


    .hw-burger-lines i:nth-child(2) {
        top: 8px;

        width: 15px;
    }


    .hw-burger-lines i:nth-child(3) {
        top: 14px;

        width: 19px;
    }



    /* animated X */

    .hw-burger.is-open
    .hw-burger-lines i:nth-child(1) {
        top: 8px;

        width: 22px;

        transform:
            rotate(45deg);

        background:
            var(--lime);
    }


    .hw-burger.is-open
    .hw-burger-lines i:nth-child(2) {
        width: 0;

        opacity: 0;
    }


    .hw-burger.is-open
    .hw-burger-lines i:nth-child(3) {
        top: 8px;

        width: 22px;

        transform:
            rotate(-45deg);
    }


    .hw-burger.is-open
    .hw-burger-dot {
        opacity: 0;

        transform:
            scale(0);
    }



    /* ===============================
       BACKDROP
       =============================== */

    .hw-mobile-menu-backdrop {
        display: block;

        position: fixed;

        inset: 0;

        background:
            rgba(0,0,0,.63);

        backdrop-filter:
            blur(5px);

        -webkit-backdrop-filter:
            blur(5px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .25s ease,
            visibility .25s ease;

        z-index: 980;
    }


    .hw-mobile-menu-backdrop.is-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }



    /* ===============================
       MOBILE PANEL
       =============================== */

    .hw-mobile-menu {
        display: block;

        position: fixed;

        top: 72px;
        left: 10px;
        right: 10px;

        max-height:
            calc(100dvh - 86px);

        overflow-y: auto;

        padding:
            8px;

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:
            18px;

        background:
            linear-gradient(
                180deg,
                rgba(11,16,19,.97),
                rgba(5,8,10,.985)
            );

        box-shadow:
            0 30px 80px
            rgba(0,0,0,.52);

        backdrop-filter:
            blur(24px);

        -webkit-backdrop-filter:
            blur(24px);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px)
            scale(.985);

        transform-origin:
            top center;

        pointer-events: none;

        transition:
            opacity .24s ease,
            transform .24s ease,
            visibility .24s ease;

        z-index: 1000;
    }


    .hw-mobile-menu.is-open {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0)
            scale(1);

        pointer-events: auto;
    }


    .hw-mobile-menu-inner {
        width: 100%;

        padding:
            16px;
    }



    /* panel header */

    .hw-mobile-menu-head {
        display: flex;

        align-items: center;
        justify-content: space-between;

        padding:
            0 2px
            14px;

        border-bottom:
            1px solid
            rgba(255,255,255,.065);

        color:
            #68737a;

        font-size:
            8px;

        font-weight:
            800;

        letter-spacing:
            .17em;

        text-transform:
            uppercase;
    }


    .hw-mobile-menu-head i {
        display: block;

        width: 27px;
        height: 1px;

        background:
            var(--lime);

        box-shadow:
            0 0 12px
            rgba(168,255,10,.24);
    }



    /* ===============================
       LINKS
       =============================== */

    .hw-mobile-menu-nav {
        display: grid;

        width: 100%;

        margin:
            7px 0
            15px;
    }


    .hw-mobile-menu-nav a {
        position: relative;

        display: grid;

        grid-template-columns:
            35px 1fr auto;

        align-items: center;

        min-height:
            59px;

        padding:
            0 5px;

        border-bottom:
            1px solid
            rgba(255,255,255,.065);

        color:
            #f0f2f1;

        font-size:
            18px;

        font-weight:
            760;

        letter-spacing:
            -.025em;

        transition:
            padding-left .2s ease,
            color .2s ease;
    }


    .hw-mobile-menu-nav a > span {
        color:
            #59646b;

        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            monospace;

        font-size:
            9px;

        font-weight:
            700;
    }


    .hw-mobile-menu-nav a > b {
        color:
            #59646b;

        font-size:
            16px;

        font-weight:
            400;

        transition:
            color .2s ease,
            transform .2s ease;
    }


    .hw-mobile-menu-nav a:hover {
        padding-left:
            10px;

        color:
            var(--lime);
    }


    .hw-mobile-menu-nav a:hover > b {
        color:
            var(--lime);

        transform:
            translateX(3px);
    }



    /* ===============================
       CTA
       =============================== */

    .hw-mobile-menu-cta {
        display: flex;

        align-items: center;
        justify-content: space-between;

        width: 100%;

        min-height:
            51px;

        padding:
            0 18px;

        border:
            1px solid
            var(--lime);

        border-radius:
            999px;

        background:
            var(--lime);

        color:
            #050708;

        font-size:
            10px;

        font-weight:
            950;

        letter-spacing:
            .06em;

        text-transform:
            uppercase;
    }


    .hw-mobile-menu-cta > span {
        font-size:
            19px;
    }



    /* ===============================
       FOOT
       =============================== */

    .hw-mobile-menu-foot {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap:
            10px;

        margin-top:
            17px;

        color:
            #59636a;

        font-size:
            8px;

        letter-spacing:
            .07em;

        text-transform:
            uppercase;
    }


    .hw-mobile-menu-foot > span:first-child {
        display: flex;

        align-items: center;

        gap: 6px;
    }


    .hw-mobile-menu-foot i {
        display: block;

        width: 5px;
        height: 5px;

        flex:
            0 0 auto;

        border-radius:
            50%;

        background:
            var(--lime);

        box-shadow:
            0 0 8px
            rgba(168,255,10,.48);
    }

}



@media (max-width: 390px) {

    .hw-burger {
        width: 45px;
        height: 45px;

        border-radius:
            13px;
    }


    .hw-mobile-menu {
        top:
            68px;

        left:
            8px;

        right:
            8px;
    }


    .hw-mobile-menu-inner {
        padding:
            14px;
    }


    .hw-mobile-menu-nav a {
        min-height:
            56px;

        font-size:
            17px;
    }

}


/* /HACKER_WEB_MOBILE_MENU_V1 */




/* HACKER_WEB_MOBILE_HEADER_V2 */

@media (max-width: 700px) {

    /* ===============================
       HEADER SHELL
       =============================== */

    .hw-header {
        position: relative !important;

        width: 100% !important;

        padding:
            10px 0 !important;

        z-index: 1000;
    }


    .hw-header .hw-shell {
        width:
            calc(100% - 20px) !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;
    }


    /* ===============================
       NAV - EVERYTHING ONE LINE
       =============================== */

    .hw-header .hw-nav {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            auto
            1fr
            auto
            auto !important;

        align-items:
            center !important;

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            66px !important;

        gap:
            8px !important;

        padding:
            9px 10px
            9px 16px !important;

        border:
            1px solid
            rgba(255,255,255,.10) !important;

        border-radius:
            18px !important;

        background:
            rgba(5,9,11,.84) !important;

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);
    }


    /* ===============================
       LOGO
       =============================== */

    .hw-header .hw-logo {
        grid-column:
            1 !important;

        display:
            block !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        font-size:
            18px !important;

        line-height:
            1 !important;

        white-space:
            nowrap !important;
    }


    /* desktop links stay hidden */

    .hw-header .hw-menu {
        display:
            none !important;
    }


    /* ===============================
       RESTORE START PROJECT BUTTON
       =============================== */

    .hw-header .hw-top-cta {
        grid-column:
            3 !important;

        display:
            inline-flex !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        min-width:
            0 !important;

        min-height:
            40px !important;

        width:
            auto !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 14px !important;

        border:
            1px solid
            rgba(168,255,10,.42) !important;

        border-radius:
            999px !important;

        background:
            rgba(168,255,10,.035) !important;

        color:
            #f2f5f1 !important;

        font-size:
            8px !important;

        font-weight:
            900 !important;

        letter-spacing:
            .07em !important;

        text-transform:
            uppercase !important;

        white-space:
            nowrap !important;
    }


    .hw-header .hw-top-cta:hover {
        color:
            #050708 !important;

        background:
            var(--lime) !important;
    }


    /* ===============================
       BURGER - FAR RIGHT
       =============================== */

    .hw-header .hw-burger {
        grid-column:
            4 !important;

        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            44px !important;

        height:
            44px !important;

        min-width:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border-radius:
            13px !important;

        transform:
            none !important;

        justify-self:
            end !important;
    }


    /* absolutely prevent old burger location */

    .hw-header > .hw-burger {
        display:
            none !important;
    }


    /* ===============================
       MENU POSITION
       =============================== */

    .hw-mobile-menu {
        top:
            84px !important;

        left:
            10px !important;

        right:
            10px !important;

        width:
            auto !important;
    }

}



/* ==================================
   SMALL MOBILE
   ================================== */

@media (max-width: 390px) {

    .hw-header .hw-nav {
        min-height:
            62px !important;

        gap:
            6px !important;

        padding-left:
            12px !important;

        padding-right:
            8px !important;
    }


    .hw-header .hw-logo {
        font-size:
            16px !important;
    }


    .hw-header .hw-top-cta {
        min-height:
            38px !important;

        padding:
            0 10px !important;

        font-size:
            7px !important;
    }


    .hw-header .hw-burger {
        width:
            42px !important;

        height:
            42px !important;

        min-width:
            42px !important;
    }


    .hw-mobile-menu {
        top:
            80px !important;
    }

}



/* ==================================
   VERY SMALL 340–360
   ================================== */

@media (max-width: 360px) {

    .hw-header .hw-logo {
        font-size:
            15px !important;
    }


    .hw-header .hw-top-cta {
        padding:
            0 8px !important;

        font-size:
            6.5px !important;

        letter-spacing:
            .04em !important;
    }


    .hw-header .hw-burger {
        width:
            40px !important;

        height:
            40px !important;

        min-width:
            40px !important;
    }

}

/* /HACKER_WEB_MOBILE_HEADER_V2 */




/* HACKER_WEB_MOBILE_MENU_CLOSE_X_V2 */

@media (max-width: 700px) {

    /*
     * Menu/backdrop hierarchy
     */

    .hw-mobile-menu-backdrop {
        z-index: 9000 !important;
    }

    .hw-mobile-menu {
        z-index: 9010 !important;
    }

    .hw-header {
        z-index: 9020 !important;
    }


    /*
     * Burger always above menu backdrop.
     */

    .hw-header .hw-burger {
        z-index: 9050 !important;
    }


    /*
     * OPEN STATE:
     * force visible close button.
     */

    .hw-header .hw-burger.is-open {
        position: fixed !important;

        top: 14px !important;
        right: 10px !important;

        left: auto !important;
        bottom: auto !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        margin: 0 !important;

        border:
            1px solid
            rgba(168,255,10,.58) !important;

        border-radius:
            14px !important;

        background:
            rgba(6,10,12,.96) !important;

        box-shadow:
            0 0 0 1px
            rgba(255,255,255,.025),
            0 0 24px
            rgba(168,255,10,.10) !important;

        backdrop-filter:
            blur(16px);

        -webkit-backdrop-filter:
            blur(16px);

        transform: none !important;

        z-index: 99999 !important;
    }


    /*
     * Hide old three bars/dot while open.
     */

    .hw-burger.is-open
    .hw-burger-lines {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .hw-burger.is-open
    .hw-burger-dot {
        opacity: 0 !important;
        visibility: hidden !important;
    }


    /*
     * Real close X.
     */

    .hw-burger.is-open::before,
    .hw-burger.is-open::after {
        content: "" !important;

        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 22px !important;
        height: 1.5px !important;

        margin: 0 !important;

        border: 0 !important;
        border-radius: 10px !important;

        background: #f4f6f5 !important;

        transform-origin: center !important;

        opacity: 1 !important;

        pointer-events: none !important;

        box-shadow:
            0 0 8px
            rgba(255,255,255,.06);
    }


    .hw-burger.is-open::before {
        transform:
            translate(-50%, -50%)
            rotate(45deg) !important;
    }


    .hw-burger.is-open::after {
        transform:
            translate(-50%, -50%)
            rotate(-45deg) !important;

        background:
            var(--lime) !important;

        box-shadow:
            0 0 10px
            rgba(168,255,10,.25);
    }


    /*
     * Give menu enough room beneath header.
     */

    .hw-mobile-menu.is-open {
        top: 78px !important;
    }

}


@media (max-width: 390px) {

    .hw-header .hw-burger.is-open {
        top: 12px !important;
        right: 8px !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
    }

    .hw-mobile-menu.is-open {
        top: 72px !important;
    }

}

/* /HACKER_WEB_MOBILE_MENU_CLOSE_X_V2 */




/* HACKER_WEB_REAL_MENU_CLOSE_V3 */

@media (max-width: 700px) {

    /*
     * Header inside opened menu
     */

    .hw-mobile-menu-head {
        position: relative !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        min-height: 45px !important;

        padding:
            0 0
            14px !important;
    }


    /*
     * Remove old decorative lime line.
     */

    .hw-mobile-menu-head > i {
        display: none !important;
    }


    /*
     * REAL CLOSE BUTTON
     */

    .hw-mobile-menu-close {
        position: relative !important;

        display: flex !important;

        visibility: visible !important;

        opacity: 1 !important;

        flex: 0 0 auto !important;

        align-items: center !important;

        justify-content: center !important;

        width: 40px !important;
        height: 40px !important;

        margin:
            -7px -3px
            -4px 10px !important;

        padding: 0 !important;

        cursor: pointer !important;

        border:
            1px solid
            rgba(168,255,10,.36) !important;

        border-radius:
            12px !important;

        outline: none !important;

        background:
            rgba(168,255,10,.025) !important;

        box-shadow:
            inset 0 0 0 1px
            rgba(255,255,255,.015) !important;

        z-index: 999999 !important;

        transition:
            border-color .18s ease,
            background .18s ease,
            transform .18s ease !important;
    }


    .hw-mobile-menu-close:hover,
    .hw-mobile-menu-close:active {
        border-color:
            rgba(168,255,10,.75) !important;

        background:
            rgba(168,255,10,.07) !important;

        transform:
            scale(.96) !important;
    }


    /*
     * Two actual spans form X.
     */

    .hw-mobile-menu-close > span {
        position: absolute !important;

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        left: 50% !important;
        top: 50% !important;

        width: 20px !important;
        height: 1.5px !important;

        margin: 0 !important;

        border: 0 !important;

        border-radius:
            999px !important;

        pointer-events:
            none !important;

        transform-origin:
            center !important;
    }


    .hw-mobile-menu-close > span:first-child {
        background:
            #f4f6f5 !important;

        transform:
            translate(-50%, -50%)
            rotate(45deg) !important;
    }


    .hw-mobile-menu-close > span:last-child {
        background:
            var(--lime) !important;

        transform:
            translate(-50%, -50%)
            rotate(-45deg) !important;

        box-shadow:
            0 0 9px
            rgba(168,255,10,.34) !important;
    }


    /*
     * Disable unreliable pseudo X from
     * previous patch.
     */

    .hw-burger.is-open::before,
    .hw-burger.is-open::after {
        display: none !important;
        content: none !important;
    }


    /*
     * Burger itself can remain in header,
     * but panel now has independent X.
     */

    .hw-mobile-menu.is-open
    .hw-mobile-menu-close {
        display: flex !important;
    }

}


@media (max-width: 390px) {

    .hw-mobile-menu-close {
        width: 38px !important;
        height: 38px !important;

        border-radius:
            11px !important;
    }


    .hw-mobile-menu-close > span {
        width:
            19px !important;
    }

}

/* /HACKER_WEB_REAL_MENU_CLOSE_V3 */




/* HACKER_WEB_MOBILE_HEADER_CTA_FONT_V1 */

@media (max-width: 700px) {

    .hw-header .hw-top-cta {
        font-size: 10px !important;
        font-weight: 950 !important;

        letter-spacing: .055em !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        min-height: 40px !important;
    }

}


@media (max-width: 390px) {

    .hw-header .hw-top-cta {
        font-size: 9px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}


@media (max-width: 360px) {

    .hw-header .hw-top-cta {
        font-size: 8.5px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        letter-spacing: .04em !important;
    }

}

/* /HACKER_WEB_MOBILE_HEADER_CTA_FONT_V1 */


/* HACKER_WEB_REMOVE_BURGER_PROJECT_CTA_V2 */

@media (max-width: 700px) {

    /*
     * START A PROJECT must NOT appear
     * inside the opened burger panel.
     *
     * Header CTA .hw-top-cta remains visible.
     */

    .hw-mobile-menu .hw-mobile-menu-cta,
    #hw-mobile-menu .hw-mobile-menu-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        pointer-events: none !important;
    }

}

/* /HACKER_WEB_REMOVE_BURGER_PROJECT_CTA_V2 */




/* HACKER_WEB_PERFORMANCE_RENDER_V1 */

/*
 * Skip layout/paint work for content that
 * is far below the initial viewport.
 */

.hw-process,
.hw-structure-full,
.hw-fix,
.hw-design,
.hw-guarantee,
.hw-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}


/*
 * Images should never force layout wider
 * than their container.
 */

.hw-structure-full-image,
.hw-design-image {
    max-width: 100%;
    height: auto;
}


/*
 * Mobile GPU cost reduction.
 * Keep the visual style, remove expensive
 * invisible blur work below the fold.
 */

@media (max-width: 700px) {

    .hw-structure-full-image,
    .hw-design-image {
        will-change: auto !important;
    }


    .hw-design-glow {
        filter: blur(45px) !important;
    }


    .hw-guarantee-bg {
        opacity: .50 !important;
    }

}

/* /HACKER_WEB_PERFORMANCE_RENDER_V1 */







/* HACKER_WEB_PROCESS_MOBILE_V3 */

@media (max-width: 700px) {


    /*
     * 01 02
     * 03 04
     *   05
     */

    .hw-process-v3-grid {

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        align-items:
            stretch !important;

        justify-items:
            stretch !important;

        column-gap:
            14px !important;

        row-gap:
            22px !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            30px auto
            28px !important;

    }



    /*
     * EVERY STAGE
     */

    .hw-process-v3-card {

        position:
            relative !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        min-height:
            270px !important;

        margin:
            0 !important;

        padding:
            14px 8px
            16px !important;

        text-align:
            center !important;

        transform:
            none !important;

    }



    /*
     * LAST STAGE
     */

    .hw-process-v3-card:nth-child(5),
    .hw-process-v3-card[data-hw-stage="5"] {

        grid-column:
            1 / -1 !important;

        width:
            calc(50% - 7px) !important;

        max-width:
            calc(50% - 7px) !important;

        justify-self:
            center !important;

    }



    /*
     * ICON CIRCLES
     */

    .hw-process-v3-icon {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            104px !important;

        height:
            104px !important;

        min-width:
            104px !important;

        min-height:
            104px !important;

        max-width:
            104px !important;

        max-height:
            104px !important;

        margin:
            0 auto
            15px !important;

        border:
            1px solid
            rgba(
                255,255,255,.12
            ) !important;

        border-radius:
            50% !important;

        background:
            radial-gradient(
                circle at 45% 35%,
                rgba(24,34,40,.64),
                rgba(5,9,12,.96)
            ) !important;

        box-shadow:
            inset 0 0 28px
            rgba(255,255,255,.018),
            0 12px 35px
            rgba(0,0,0,.18) !important;

    }


    .hw-process-v3-icon svg {

        width:
            35px !important;

        height:
            35px !important;

        max-width:
            35px !important;

        max-height:
            35px !important;

    }



    /*
     * NUMBER
     */

    .hw-process-v3-card
    [class*="num"],

    .hw-process-v3-card
    [class*="number"],

    .hw-process-v3-card
    [class*="index"] {

        display:
            block !important;

        margin:
            0 auto
            10px !important;

        color:
            #a8ff00 !important;

        font-size:
            14px !important;

        line-height:
            1 !important;

        font-weight:
            850 !important;

    }



    /*
     * TITLES
     */

    .hw-process-v3-card h3,
    .hw-process-v3-card h4,
    .hw-process-v3-card h5,
    .hw-process-v3-card strong {

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 auto
            10px !important;

        color:
            #f1f3f2 !important;

        font-size:
            17px !important;

        line-height:
            1.18 !important;

        font-weight:
            800 !important;

        letter-spacing:
            -.025em !important;

        text-align:
            center !important;

        text-wrap:
            balance;

    }



    /*
     * DESCRIPTION
     */

    .hw-process-v3-card p {

        width:
            100% !important;

        max-width:
            165px !important;

        margin:
            0 auto !important;

        color:
            rgba(
                210,217,220,.68
            ) !important;

        font-size:
            12px !important;

        line-height:
            1.48 !important;

        text-align:
            center !important;

        text-wrap:
            balance;

    }



    /*
     * KILL OLD MOBILE OFFSET
     */

    .hw-process-v3-card:nth-child(even),
    .hw-process-v3-card:nth-child(odd) {

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        transform:
            none !important;

    }

}



@media (max-width: 390px) {

    .hw-process-v3-grid {

        column-gap:
            10px !important;

        row-gap:
            18px !important;

    }


    .hw-process-v3-card {

        min-height:
            252px !important;

        padding-left:
            5px !important;

        padding-right:
            5px !important;

    }


    .hw-process-v3-icon {

        width:
            92px !important;

        height:
            92px !important;

        min-width:
            92px !important;

        min-height:
            92px !important;

        max-width:
            92px !important;

        max-height:
            92px !important;

    }


    .hw-process-v3-icon svg {

        width:
            31px !important;

        height:
            31px !important;

    }


    .hw-process-v3-card h3,
    .hw-process-v3-card h4,
    .hw-process-v3-card h5,
    .hw-process-v3-card strong {

        font-size:
            15px !important;

    }


    .hw-process-v3-card p {

        max-width:
            145px !important;

        font-size:
            11px !important;

    }

}

/* /HACKER_WEB_PROCESS_MOBILE_V3 */


/* HACKER_WEB_PROCESS_COMET_V1 */
@media (max-width: 700px) {

    .hw-process-v3-grid {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
        row-gap: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px auto 10px !important;
        align-items: start !important;
        justify-items: stretch !important;
        overflow: visible !important;
        padding-bottom: 4px !important;
    }

    .hw-process-v3-card {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        min-height: auto !important;
        padding: 2px 4px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .hw-process-v3-card[data-hw-stage="5"] {
        grid-column: 1 / -1 !important;
        width: 52% !important;
        max-width: 52% !important;
        justify-self: center !important;
        margin-top: -2px !important;
    }

    .hw-process-v3-icon {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        max-width: 84px !important;
        max-height: 84px !important;
        margin: 0 auto 10px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        background: radial-gradient(circle at 50% 40%, rgba(18,34,56,.48), rgba(5,10,18,.94)) !important;
        box-shadow:
            inset 0 0 18px rgba(100,180,255,.06),
            0 0 0 1px rgba(255,255,255,.02) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hw-process-v3-icon svg,
    .hw-process-v3-icon img {
        width: 28px !important;
        height: 28px !important;
    }

    .hw-process-v3-card [class*="num"],
    .hw-process-v3-card [class*="number"],
    .hw-process-v3-card [class*="index"] {
        margin: 0 0 8px !important;
        color: #b7ff2a !important;
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    .hw-process-v3-card h3,
    .hw-process-v3-card h4,
    .hw-process-v3-card h5,
    .hw-process-v3-card strong {
        margin: 0 0 8px !important;
        color: #f6f7fb !important;
        font-size: 15px !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        letter-spacing: -.02em !important;
        text-wrap: balance !important;
        max-width: 100% !important;
    }

    .hw-process-v3-card p {
        margin: 0 auto !important;
        max-width: 150px !important;
        color: rgba(223,228,236,.68) !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        text-wrap: balance !important;
    }

    .hw-process-v3-flow {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 1 !important;
        overflow: visible !important;
    }

    .hw-process-v3-flow path.hw-process-v3-line {
        fill: none;
        stroke: rgba(183,255,42,.18);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 4 7;
        filter: drop-shadow(0 0 6px rgba(183,255,42,.08));
    }
}

@media (max-width: 420px) {
    .hw-process-v3-grid {
        column-gap: 12px !important;
        row-gap: 16px !important;
    }

    .hw-process-v3-card[data-hw-stage="5"] {
        width: 58% !important;
        max-width: 58% !important;
    }

    .hw-process-v3-icon {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        min-height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
    }

    .hw-process-v3-icon svg,
    .hw-process-v3-icon img {
        width: 26px !important;
        height: 26px !important;
    }

    .hw-process-v3-card h3,
    .hw-process-v3-card h4,
    .hw-process-v3-card h5,
    .hw-process-v3-card strong {
        font-size: 14px !important;
    }

    .hw-process-v3-card p {
        max-width: 138px !important;
        font-size: 11.5px !important;
    }
}
/* /HACKER_WEB_PROCESS_COMET_V1 */




/* HACKER_WEB_PROCESS_PREMIUM_COMET_V2 */

@media (max-width: 700px) {


    /*
     * Track stays extremely subtle.
     */

    .hw-process-v3-line-premium {

        fill:
            none !important;

        stroke:
            rgba(
                183,
                255,
                42,
                .15
            ) !important;

        stroke-width:
            1.15 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;

        stroke-dasharray:
            2 7 !important;

        vector-effect:
            non-scaling-stroke;

    }


    /*
     * Soft invisible-near glow underneath.
     */

    .hw-process-v3-line-glow {

        fill:
            none !important;

        stroke:
            rgba(
                183,
                255,
                42,
                .05
            ) !important;

        stroke-width:
            5 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;

        vector-effect:
            non-scaling-stroke;

        filter:
            blur(3px);

    }


    /*
     * Make sure path remains behind cards.
     */

    .hw-process-v3-flow {

        z-index:
            1 !important;

    }


    .hw-process-v3-card {

        z-index:
            2 !important;

    }

}


/*
 * Accessibility:
 * user explicitly requesting reduced motion
 * should still see the route but no comet.
 */

@media
(prefers-reduced-motion: reduce)
and
(max-width: 700px) {

    .hw-process-v3-flow circle {
        display:
            none !important;
    }

}

/* /HACKER_WEB_PROCESS_PREMIUM_COMET_V2 */




/* HACKER_WEB_PROCESS_CIRCLE_FLOW_V3 */

@media (max-width: 700px) {


    .hw-process-v3-flow-final {

        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        overflow:
            visible !important;

        pointer-events:
            none !important;

        /*
         * Above circles so comet itself can
         * be visible in center of stage 05.
         */

        z-index:
            4 !important;

    }


    /*
     * Visible route.
     */

    .hw-process-circle-line {

        fill:
            none !important;

        stroke:
            rgba(
                183,
                255,
                42,
                .25
            ) !important;

        stroke-width:
            1.25 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;

        stroke-dasharray:
            2 6 !important;

        vector-effect:
            non-scaling-stroke;

        filter:
            drop-shadow(
                0 0 4px
                rgba(183,255,42,.10)
            );

    }


    /*
     * Motion path is completely invisible.
     */

    .hw-process-motion-route {

        fill:
            none !important;

        stroke:
            transparent !important;

        stroke-width:
            0 !important;

    }


    /*
     * Cards remain visually above the track.
     * SVG is above only because visible
     * line already terminates at circle edge.
     */

    .hw-process-v3-card {

        z-index:
            2 !important;

    }

}


@media
(prefers-reduced-motion: reduce)
and
(max-width: 700px) {

    .hw-process-v3-flow-final circle {

        display:
            none !important;

    }

}

/* /HACKER_WEB_PROCESS_CIRCLE_FLOW_V3 */


/* HACKER_WEB_HOME_SEO_V1 */


/* ==========================================================
   SEO SECTION
   ========================================================== */

.hw-home-seo {
    position: relative;

    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        70px 0;

    border-top:
        1px solid
        rgba(255,255,255,.075);

    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.hw-home-seo-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        35px;
}


.hw-home-seo-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #8a959b;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .20em;

    text-transform: uppercase;
}


.hw-home-seo-dot {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a8ff00;

    box-shadow:
        0 0 11px
        rgba(168,255,0,.45);
}


.hw-home-seo-index {
    color:
        rgba(255,255,255,.26);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;
}


/* ----------------------------------------------------------
   LAYOUT
   ---------------------------------------------------------- */

.hw-home-seo-layout {
    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(520px,1fr);

    gap:
        74px;

    align-items:
        start;
}


/* ----------------------------------------------------------
   LEFT
   ---------------------------------------------------------- */

.hw-home-seo-main h2 {
    max-width:
        670px;

    margin:
        0 0
        25px;

    color:
        #f1f3f2;

    font-size:
        clamp(
            47px,
            5vw,
            76px
        );

    line-height:
        .95;

    letter-spacing:
        -.058em;
}


.hw-home-seo-main h2 span {
    color:
        #a8ff00;
}


.hw-home-seo-lead {
    max-width:
        610px;

    margin:
        0 0
        18px;

    color:
        #b2babd;

    font-size:
        15px;

    line-height:
        1.68;
}


.hw-home-seo-text {
    max-width:
        610px;

    margin:
        0 0
        30px;

    color:
        #778289;

    font-size:
        12px;

    line-height:
        1.7;
}


/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.hw-home-seo-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        55px;

    min-width:
        250px;

    min-height:
        54px;

    padding:
        0 20px;

    border:
        1px solid
        rgba(168,255,0,.58);

    border-radius:
        999px;

    background:
        transparent;

    color:
        #e8ecea;

    text-decoration:
        none;

    transition:
        background .20s ease,
        color .20s ease,
        border-color .20s ease,
        transform .20s ease;
}


.hw-home-seo-btn span {
    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .09em;
}


.hw-home-seo-btn b {
    color:
        #a8ff00;

    font-size:
        20px;

    font-weight:
        400;
}


.hw-home-seo-btn:hover {
    transform:
        translateY(-2px);

    background:
        #a8ff00;

    border-color:
        #a8ff00;

    color:
        #050706;
}


.hw-home-seo-btn:hover b {
    color:
        #050706;
}


/* ----------------------------------------------------------
   RIGHT DATA SYSTEM
   ---------------------------------------------------------- */

.hw-home-seo-data {
    border-top:
        1px solid
        rgba(255,255,255,.085);
}


.hw-home-seo-data-head {
    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height:
        43px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    color:
        #69757b;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .13em;
}


.hw-home-seo-data-head span:last-child {
    color:
        rgba(168,255,0,.75);
}


/* rows */

.hw-home-seo-row {
    display: grid;

    grid-template-columns:
        37px
        minmax(0,1fr)
        auto;

    gap:
        16px;

    align-items:
        start;

    padding:
        17px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


.hw-home-seo-num {
    padding-top:
        3px;

    color:
        #a8ff00;

    font-size:
        8px;

    font-weight:
        900;
}


.hw-home-seo-row strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #e5e9e7;

    font-size:
        13px;

    font-weight:
        750;

    letter-spacing:
        -.015em;
}


.hw-home-seo-row p {
    max-width:
        500px;

    margin:
        0;

    color:
        #6f7b81;

    font-size:
        10.5px;

    line-height:
        1.55;
}


.hw-home-seo-status {
    margin-top:
        2px;

    color:
        #4f5b61;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .10em;
}


/* ----------------------------------------------------------
   FOOT
   ---------------------------------------------------------- */

.hw-home-seo-foot {
    display: flex;

    justify-content:
        space-between;

    gap:
        25px;

    padding-top:
        14px;

    color:
        #5f6b71;

    font-size:
        8px;

    line-height:
        1.5;

    letter-spacing:
        .03em;
}


.hw-home-seo-foot strong {
    color:
        rgba(168,255,0,.72);

    font-weight:
        700;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .hw-home-seo {
        width:
            min(
                760px,
                calc(100% - 30px)
            );

        padding:
            55px 0;
    }


    .hw-home-seo-layout {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .hw-home-seo-main h2 {
        max-width:
            700px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

    .hw-home-seo {
        width:
            calc(100% - 20px);

        padding:
            42px 0;
    }


    .hw-home-seo-head {
        margin-bottom:
            25px;
    }


    .hw-home-seo-layout {
        gap:
            35px;
    }


    .hw-home-seo-main h2 {
        margin-bottom:
            20px;

        font-size:
            clamp(
                40px,
                12.5vw,
                53px
            );
    }


    .hw-home-seo-lead {
        font-size:
            14px;
    }


    .hw-home-seo-text {
        font-size:
            11px;

        margin-bottom:
            25px;
    }


    .hw-home-seo-btn {
        width:
            100%;

        min-width:
            0;
    }


    .hw-home-seo-row {
        grid-template-columns:
            29px
            minmax(0,1fr);

        gap:
            10px;

        padding:
            14px 0;
    }


    .hw-home-seo-status {
        display:
            none;
    }


    .hw-home-seo-row strong {
        font-size:
            12px;
    }


    .hw-home-seo-row p {
        font-size:
            10px;
    }


    .hw-home-seo-foot {
        display:
            block;
    }


    .hw-home-seo-foot span,
    .hw-home-seo-foot strong {
        display:
            block;
    }


    .hw-home-seo-foot strong {
        margin-top:
            5px;
    }

}


/* /HACKER_WEB_HOME_SEO_V1 */



/* HACKER_WEB_HOME_SEO_TYPOGRAPHY_V2 */


/* ==================================================
   DESKTOP
   ================================================== */

.hw-home-seo-kicker {
    font-size:
        11px !important;

    letter-spacing:
        .16em !important;
}


.hw-home-seo-index {
    font-size:
        11px !important;

    letter-spacing:
        .10em !important;
}


/* LEFT SIDE */

.hw-home-seo-main h2 {
    font-size:
        clamp(
            52px,
            5.2vw,
            80px
        ) !important;
}


.hw-home-seo-lead {
    font-size:
        17px !important;

    line-height:
        1.62 !important;
}


.hw-home-seo-text {
    font-size:
        14px !important;

    line-height:
        1.68 !important;
}


.hw-home-seo-btn span {
    font-size:
        11px !important;
}


/* RIGHT TOP */

.hw-home-seo-data-head {
    min-height:
        48px !important;

    font-size:
        10px !important;

    letter-spacing:
        .11em !important;
}


/* ROWS */

.hw-home-seo-row {
    grid-template-columns:
        42px
        minmax(0,1fr)
        auto !important;

    gap:
        17px !important;

    padding:
        20px 0 !important;
}


.hw-home-seo-num {
    padding-top:
        3px !important;

    font-size:
        10px !important;
}


.hw-home-seo-row strong {
    margin-bottom:
        7px !important;

    font-size:
        16px !important;

    line-height:
        1.25 !important;

    font-weight:
        780 !important;
}


.hw-home-seo-row p {
    max-width:
        560px !important;

    font-size:
        13px !important;

    line-height:
        1.55 !important;

    color:
        #879197 !important;
}


.hw-home-seo-status {
    margin-top:
        4px !important;

    font-size:
        9px !important;

    letter-spacing:
        .09em !important;
}


/* BOTTOM */

.hw-home-seo-foot {
    padding-top:
        17px !important;

    font-size:
        10px !important;

    line-height:
        1.5 !important;
}


.hw-home-seo-foot strong {
    font-size:
        10px !important;
}


/* ==================================================
   TABLET
   ================================================== */

@media
(min-width: 651px)
and
(max-width: 1000px) {

    .hw-home-seo-row strong {
        font-size:
            16px !important;
    }


    .hw-home-seo-row p {
        font-size:
            13px !important;
    }


    .hw-home-seo-num {
        font-size:
            10px !important;
    }

}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 650px) {

    .hw-home-seo-kicker {
        font-size:
            10px !important;
    }


    .hw-home-seo-index {
        font-size:
            10px !important;
    }


    .hw-home-seo-main h2 {
        font-size:
            clamp(
                42px,
                12.7vw,
                55px
            ) !important;
    }


    .hw-home-seo-lead {
        font-size:
            16px !important;

        line-height:
            1.58 !important;
    }


    .hw-home-seo-text {
        font-size:
            13px !important;

        line-height:
            1.62 !important;
    }


    .hw-home-seo-btn span {
        font-size:
            11px !important;
    }


    .hw-home-seo-data-head {
        font-size:
            9px !important;
    }


    .hw-home-seo-row {
        grid-template-columns:
            34px
            minmax(0,1fr) !important;

        gap:
            11px !important;

        padding:
            17px 0 !important;
    }


    .hw-home-seo-num {
        font-size:
            10px !important;
    }


    .hw-home-seo-row strong {
        font-size:
            15px !important;

        line-height:
            1.25 !important;

        margin-bottom:
            6px !important;
    }


    .hw-home-seo-row p {
        font-size:
            12px !important;

        line-height:
            1.52 !important;
    }


    .hw-home-seo-foot {
        font-size:
            10px !important;
    }


    .hw-home-seo-foot strong {
        font-size:
            10px !important;
    }

}


/* /HACKER_WEB_HOME_SEO_TYPOGRAPHY_V2 */




/* HACKER_WEB_SEO_GROWTH_BG_CSS_V1 */


/* ==================================================
   FULL WIDTH DECORATIVE BACKGROUND
   ================================================== */

.hw-home-seo {
    overflow:
        hidden !important;

    isolation:
        isolate;
}


/*
 * Real content remains above background.
 */

.hw-home-seo-head,
.hw-home-seo-layout {
    position:
        relative;

    z-index:
        3;
}


/*
 * Background extends beyond the normal
 * content width so visually it fills
 * the whole SEO section.
 */

.hw-seo-growth-bg {
    position:
        absolute;

    z-index:
        0;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        100vw;

    max-width:
        none;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    overflow:
        hidden;

    opacity:
        .78;
}


.hw-seo-growth-bg::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,8,9,.82) 0%,
            rgba(4,8,9,.51) 25%,
            rgba(4,8,9,.27) 52%,
            rgba(4,8,9,.41) 78%,
            rgba(4,8,9,.64) 100%
        );

    pointer-events:
        none;
}


.hw-seo-growth-bg svg {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


/* ==================================================
   WEB LETTERS
   ================================================== */

.hw-seo-web-letter {
    fill:
        rgba(0,0,0,0);

    stroke:
        url(#hwSeoBlueGradient);

    stroke-width:
        2;

    paint-order:
        stroke;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight:
        900;

    letter-spacing:
        -.08em;
}


/*
 * Deliberately increasing:
 *
 * W = smaller / lower
 * E = larger / higher
 * B = largest / highest
 */

.hw-seo-web-w {
    font-size:
        275px;

    opacity:
        .52;
}


.hw-seo-web-e {
    font-size:
        345px;

    opacity:
        .57;
}


.hw-seo-web-b {
    font-size:
        430px;

    opacity:
        .62;
}


/* ==================================================
   GROWTH CURVE
   ================================================== */

.hw-seo-growth-glow {
    fill:
        none;

    stroke:
        rgba(50,150,255,.07);

    stroke-width:
        15;

    stroke-linecap:
        round;

    filter:
        blur(8px);
}


.hw-seo-growth-line {
    fill:
        none;

    stroke:
        url(#hwSeoArrowGradient);

    stroke-width:
        2.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    filter:
        url(#hwSeoArrowGlow);
}


/* arrow */

.hw-seo-growth-arrow-head {
    fill:
        none;

    stroke:
        #63caff;

    stroke-width:
        4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    filter:
        url(#hwSeoArrowGlow);

    opacity:
        .92;
}


/* ==================================================
   MOVING COMET
   ================================================== */

.hw-seo-comet-core {
    fill:
        #76d5ff;

    opacity:
        .96;

    filter:
        url(#hwSeoCometGlow);
}


.hw-seo-comet-tail {
    fill:
        #39a8ff;
}


.hw-seo-comet-tail-1 {
    opacity:
        .42;
}


.hw-seo-comet-tail-2 {
    opacity:
        .22;
}


.hw-seo-comet-tail-3 {
    opacity:
        .10;
}


/* ==================================================
   ADD SLIGHT BLUE AMBIENCE TO SECTION
   ================================================== */

.hw-home-seo::before {
    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        820px;

    height:
        520px;

    right:
        -260px;

    top:
        70px;

    border-radius:
        50%;

    background:
        rgba(34,126,255,.032);

    filter:
        blur(110px);

    pointer-events:
        none;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 650px) {

    .hw-seo-growth-bg {
        opacity:
            .48;
    }


    .hw-seo-growth-bg svg {
        width:
            170%;

        max-width:
            none;

        transform:
            translateX(-27%);
    }


    .hw-seo-web-w {
        font-size:
            240px;
    }


    .hw-seo-web-e {
        font-size:
            300px;
    }


    .hw-seo-web-b {
        font-size:
            365px;
    }


    /*
     * Stronger dark mask on mobile
     * for text readability.
     */

    .hw-seo-growth-bg::after {
        background:
            rgba(4,8,9,.58);
    }

}


/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {

    .hw-seo-growth-bg circle {
        display:
            none;
    }

}


/* /HACKER_WEB_SEO_GROWTH_BG_CSS_V1 */




/* HACKER_WEB_SEO_MOVING_ARROW_V2 */


/*
 * Moving arrow instead of dots.
 */

.hw-seo-moving-arrow {
    stroke-linejoin:
        round;

    vector-effect:
        non-scaling-stroke;

    pointer-events:
        none;
}


/* main arrow */

.hw-seo-moving-arrow-main {
    fill:
        #60caff;

    stroke:
        rgba(180,230,255,.95);

    stroke-width:
        .7;

    opacity:
        .98;

    filter:
        drop-shadow(
            0 0 3px
            rgba(60,170,255,.95)
        )
        drop-shadow(
            0 0 9px
            rgba(35,135,255,.48)
        );
}


/* first small trail */

.hw-seo-moving-arrow-tail1 {
    fill:
        rgba(55,165,255,.34);

    stroke:
        rgba(60,170,255,.22);

    stroke-width:
        .5;

    opacity:
        .52;
}


/* second trail */

.hw-seo-moving-arrow-tail2 {
    fill:
        rgba(35,125,255,.16);

    stroke:
        rgba(50,145,255,.10);

    stroke-width:
        .4;

    opacity:
        .28;
}


/*
 * Remove any old comet circles
 * if browser still has an older DOM variant.
 */

.hw-seo-comet-core,
.hw-seo-comet-tail {
    display:
        none !important;
}


/*
 * Mobile: slightly smaller visual presence.
 */

@media (max-width: 650px) {

    .hw-seo-moving-arrow-layer {
        opacity:
            .82;
    }

}


/*
 * Respect reduced-motion setting.
 */

@media (prefers-reduced-motion: reduce) {

    .hw-seo-moving-arrow-layer {
        display:
            none;
    }

}


/* /HACKER_WEB_SEO_MOVING_ARROW_V2 */







/* HACKER_WEB_SEO_MOBILE_BG_CSS_V2 */


/* ==================================================
   MOBILE ARTWORK OFF ON DESKTOP
   ================================================== */

.hw-seo-mobile2 {
    display:
        none;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 650px) {


    /*
     * Completely kill desktop decorative artwork.
     * This removes the duplicate line / arrow
     * seen at the top on mobile.
     */

    .hw-home-seo
    > .hw-seo-growth-bg {

        display:
            none !important;

        visibility:
            hidden !important;
    }


    .hw-home-seo {
        position:
            relative !important;

        overflow:
            hidden !important;

        isolation:
            isolate;
    }


    /*
     * Normal SEO content above artwork.
     */

    .hw-home-seo-head,
    .hw-home-seo-layout {

        position:
            relative !important;

        z-index:
            5 !important;
    }


    /*
     * Artwork fills FULL viewport width.
     */

    .hw-seo-mobile2 {

        display:
            block !important;

        position:
            absolute;

        z-index:
            1;

        top:
            132px;

        left:
            50%;

        width:
            100vw;

        height:
            370px;

        transform:
            translateX(-50%);

        overflow:
            hidden;

        pointer-events:
            none;

        opacity:
            .78;
    }


    .hw-seo-mobile2 svg {

        display:
            block;

        width:
            100%;

        height:
            100%;
    }


    /* ==============================================
       WEB LETTERS
       ============================================== */

    .hw-seo-mobile2-letter {

        fill:
            transparent;

        stroke:
            url(#hwSeoMobile2Stroke);

        stroke-width:
            1.5px;

        vector-effect:
            non-scaling-stroke;

        paint-order:
            stroke;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-weight:
            900;

        letter-spacing:
            -.07em;
    }


    /*
     * Smaller and separated.
     * They CANNOT overlap now because coordinates
     * are defined in a fixed SVG viewBox.
     */

    .hw-seo-mobile2-w {

        font-size:
            205px;

        opacity:
            .70;
    }


    .hw-seo-mobile2-e {

        font-size:
            235px;

        opacity:
            .76;
    }


    .hw-seo-mobile2-b {

        font-size:
            270px;

        opacity:
            .82;
    }


    /* ==============================================
       ONE ROUTE
       ============================================== */

    .hw-seo-mobile2-route {

        fill:
            none;

        stroke:
            url(#hwSeoMobile2Route);

        stroke-width:
            1.4px;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;

        vector-effect:
            non-scaling-stroke;
    }


    /* ==============================================
       MOVING ARROW
       ============================================== */

    .hw-seo-mobile2-arrow {
        pointer-events:
            none;
    }


    .hw-seo-mobile2-arrow-main {

        fill:
            #6acfff;

        stroke:
            rgba(208,242,255,.76);

        stroke-width:
            .45px;

        opacity:
            .88;

        filter:
            drop-shadow(
                0 0 4px
                rgba(63,174,255,.48)
            );
    }


    .hw-seo-mobile2-trail1 {

        fill:
            rgba(52,157,255,.30);

        opacity:
            .42;
    }


    .hw-seo-mobile2-trail2 {

        fill:
            rgba(35,117,255,.15);

        opacity:
            .22;
    }


    /* ==============================================
       SOFT DARK MASK
       keeps letters in background
       ============================================== */

    .hw-seo-mobile2::after {

        content:
            "";

        position:
            absolute;

        inset:
            0;

        background:
            linear-gradient(
                180deg,
                rgba(3,7,9,.13) 0%,
                rgba(3,7,9,.05) 40%,
                rgba(3,7,9,.20) 70%,
                rgba(3,7,9,.68) 100%
            );

        pointer-events:
            none;
    }

}


/* ==================================================
   SMALL MOBILE
   ================================================== */

@media (max-width: 390px) {

    .hw-seo-mobile2 {

        top:
            140px;

        height:
            350px;
    }


    .hw-seo-mobile2-w {
        font-size:
            190px;
    }


    .hw-seo-mobile2-e {
        font-size:
            220px;
    }


    .hw-seo-mobile2-b {
        font-size:
            250px;
    }

}


/* ==================================================
   REDUCED MOTION
   ================================================== */

@media
(prefers-reduced-motion: reduce)
and
(max-width: 650px) {

    .hw-seo-mobile2-arrow {
        display:
            none;
    }

}


/* /HACKER_WEB_SEO_MOBILE_BG_CSS_V2 */

/* HACKER_WEB_LANGUAGE_SWITCHER_V1 */

/*
 * HACKER WEB
 * UA | ru language switcher
 */

.hw-header .hw-lang-switch {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    gap:
        10px;

    min-width:
        92px;

    min-height:
        38px;

    margin:
        0 18px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        12px;

    background:
        rgba(5,9,11,.42);

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.012);

    font-size:
        10px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        .12em;

    white-space:
        nowrap;

    transition:
        border-color .18s ease,
        background .18s ease;
}


.hw-header .hw-lang-switch:hover {
    border-color:
        rgba(168,255,0,.30);

    background:
        rgba(168,255,0,.025);
}


.hw-lang-switch .hw-lang-current,
.hw-mobile-lang-switch .hw-lang-current {
    color:
        var(--lime);

    text-transform:
        uppercase;

    text-shadow:
        0 0 12px
        rgba(168,255,0,.12);
}


.hw-lang-switch > i,
.hw-mobile-lang-switch > i {
    display:
        inline-block;

    color:
        rgba(255,255,255,.22);

    font-style:
        normal;

    font-weight:
        400;

    transform:
        translateY(-.5px);
}


.hw-lang-switch .hw-lang-link,
.hw-mobile-lang-switch .hw-lang-link {
    color:
        rgba(244,246,245,.72);

    text-decoration:
        none;

    text-transform:
        lowercase;

    transition:
        color .18s ease,
        text-shadow .18s ease;
}


.hw-lang-switch .hw-lang-link:hover,
.hw-mobile-lang-switch .hw-lang-link:hover {
    color:
        var(--lime);

    text-shadow:
        0 0 12px
        rgba(168,255,0,.18);
}


/*
 * RU is visually ready but intentionally
 * disabled until /ru/ pages are deployed.
 */

.hw-lang-link.is-pending {
    pointer-events:
        none;

    cursor:
        default;
}


/*
 * Mobile header:
 * desktop switch does not consume
 * the limited header row.
 */

@media (max-width: 700px) {

    .hw-header .hw-lang-switch {
        display:
            none !important;
    }


    .hw-mobile-lang-switch {
        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-start;

        gap:
            13px;

        width:
            100%;

        min-height:
            48px;

        margin:
            18px 0 0;

        padding:
            18px 2px 0;

        border-top:
            1px solid
            rgba(255,255,255,.08);

        font-size:
            11px;

        font-weight:
            900;

        line-height:
            1;

        letter-spacing:
            .13em;
    }

}


@media (max-width: 390px) {

    .hw-mobile-lang-switch {
        margin-top:
            14px;

        padding-top:
            15px;

        font-size:
            10.5px;
    }

}

/* /HACKER_WEB_LANGUAGE_SWITCHER_V1 */

/* HACKER_WEB_LANG_SWITCH_DESKTOP_LAYOUT_V2 */

@media (min-width: 701px) {

    /*
     * Header:
     * logo | centered menu | language | CTA
     */

    .hw-header .hw-nav {
        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            auto !important;

        align-items: center !important;

        column-gap: 20px !important;

        width: 100% !important;
    }


    .hw-header .hw-logo {
        grid-column: 1 !important;

        margin: 0 !important;

        justify-self: start !important;
    }


    .hw-header .hw-menu {
        grid-column: 2 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        justify-self: center !important;

        margin: 0 !important;

        min-width: 0 !important;
    }


    /*
     * Compact HACKER WEB language control
     */

    .hw-header .hw-lang-switch {
        grid-column: 3 !important;

        justify-self: end !important;

        width: auto !important;

        min-width: 86px !important;

        min-height: 38px !important;

        margin: 0 !important;

        padding:
            0 13px !important;

        gap:
            8px !important;

        border-radius:
            11px !important;

        font-size:
            10px !important;

        letter-spacing:
            .10em !important;
    }


    /*
     * CTA stays in the same row.
     */

    .hw-header .hw-top-cta {
        grid-column: 4 !important;

        justify-self: end !important;

        align-self: center !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: inline-flex !important;

        width: auto !important;

        margin: 0 !important;

        white-space: nowrap !important;

        transform: none !important;
    }


    /*
     * Desktop burger must not consume grid space.
     */

    .hw-header .hw-burger {
        display: none !important;
    }

}

/* /HACKER_WEB_LANG_SWITCH_DESKTOP_LAYOUT_V2 */

/* HACKER_WEB_LANG_SWITCH_BUTTONS_V3 */

@media (min-width: 701px) {

    .hw-header .hw-nav {
        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            auto !important;

        align-items: center !important;

        column-gap: 22px !important;

        width: 100% !important;
    }


    .hw-header .hw-logo {
        grid-column: 1 !important;

        justify-self: start !important;

        margin: 0 !important;
    }


    .hw-header .hw-menu {
        grid-column: 2 !important;

        display: flex !important;

        justify-content: center !important;
        align-items: center !important;

        justify-self: center !important;

        margin: 0 !important;
    }


    /*
     * UA | ru
     * Plain HACKER WEB text buttons.
     */

    .hw-header .hw-lang-switch {
        grid-column: 3 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        justify-self: end !important;

        gap: 9px !important;

        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        letter-spacing: .10em !important;

        white-space: nowrap !important;
    }


    .hw-header .hw-top-cta {
        grid-column: 4 !important;

        justify-self: end !important;

        margin: 0 !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        white-space: nowrap !important;
    }


    .hw-header .hw-burger {
        display: none !important;
    }

}


/* active UA */

.hw-lang-switch .hw-lang-current,
.hw-mobile-lang-switch .hw-lang-current {
    color: var(--lime) !important;

    font-weight: 950 !important;

    text-shadow:
        0 0 10px
        rgba(168,255,0,.14) !important;
}


/* separator */

.hw-lang-switch > i,
.hw-mobile-lang-switch > i {
    color:
        rgba(255,255,255,.25) !important;

    font-style: normal !important;
    font-weight: 400 !important;
}


/* inactive ru */

.hw-lang-switch .hw-lang-link,
.hw-mobile-lang-switch .hw-lang-link {
    color:
        rgba(244,246,245,.70) !important;

    text-decoration: none !important;

    font-weight: 850 !important;

    transition:
        color .16s ease,
        text-shadow .16s ease !important;
}


.hw-lang-switch .hw-lang-link:hover,
.hw-mobile-lang-switch .hw-lang-link:hover {
    color:
        var(--lime) !important;

    text-shadow:
        0 0 10px
        rgba(168,255,0,.18) !important;
}


/*
 * Mobile: also plain buttons,
 * no box around the language selector.
 */

@media (max-width: 700px) {

    .hw-mobile-lang-switch {
        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        width: auto !important;
        min-height: 0 !important;

        margin: 18px 0 0 !important;
        padding: 16px 0 0 !important;

        border: 0 !important;
        border-top:
            1px solid
            rgba(255,255,255,.07) !important;

        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        font-size: 11px !important;
        letter-spacing: .11em !important;
    }

}

/* /HACKER_WEB_LANG_SWITCH_BUTTONS_V3 */

/* HACKER_WEB_LANG_SWITCH_SIZE_V4 */

@media (min-width: 701px) {

    .hw-header .hw-lang-switch {
        gap: 11px !important;

        font-size: 14px !important;
        font-weight: 950 !important;

        letter-spacing: .08em !important;
    }

    .hw-lang-switch .hw-lang-current,
    .hw-lang-switch .hw-lang-link {
        font-size: 14px !important;
    }

    .hw-lang-switch > i {
        font-size: 13px !important;
    }

}


@media (max-width: 700px) {

    .hw-mobile-lang-switch {
        gap: 13px !important;

        font-size: 13px !important;
        font-weight: 950 !important;

        letter-spacing: .08em !important;
    }

    .hw-mobile-lang-switch .hw-lang-current,
    .hw-mobile-lang-switch .hw-lang-link {
        font-size: 13px !important;
    }

}

/* /HACKER_WEB_LANG_SWITCH_SIZE_V4 */

/* =========================================================
   PUBLIC HEADER NAV ACTIONS FIX V1 START
   Structural support for:
   logo | menu | nav-actions
   ========================================================= */

/*
 * Desktop / tablet header.
 *
 * Current HTML has:
 * .hw-logo
 * .hw-menu
 * .hw-nav-actions
 *
 * .hw-nav-actions contains:
 * Client Area + language + CTA + burger.
 */
@media (min-width: 801px) {

    .hw-header .hw-nav {
        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        column-gap: 28px !important;

        width: 100% !important;

        min-width: 0 !important;
    }


    .hw-header .hw-logo {
        display: inline-flex !important;

        align-items: center !important;

        justify-self: start !important;

        visibility: visible !important;

        opacity: 1 !important;

        position: relative;

        z-index: 2;

        white-space: nowrap;
    }


    .hw-header .hw-menu {
        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        min-width: 0 !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    .hw-header .hw-nav-actions {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        justify-self: end !important;

        gap: 13px;

        min-width: 0;

        white-space: nowrap;

        visibility: visible !important;

        opacity: 1 !important;
    }


    .hw-header .hw-client-area-link {
        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        gap: 7px;

        flex: 0 0 auto;

        min-height: 34px;

        padding: 0 9px;

        color: #d5d9de;

        text-decoration: none;

        font-size: 9px;

        font-weight: 750;

        letter-spacing: .11em;

        text-transform: uppercase;

        opacity: .82;

        transition:
            color .18s ease,
            opacity .18s ease;
    }


    .hw-header .hw-client-area-link:hover {
        color: var(--lime);

        opacity: 1;
    }


    .hw-header .hw-client-area-link svg {
        display: block;

        width: 17px;

        height: 17px;

        flex: 0 0 17px;
    }


    .hw-header .hw-lang-switch {
        display: inline-flex !important;

        flex: 0 0 auto;

        visibility: visible !important;

        opacity: 1 !important;
    }


    .hw-header .hw-top-cta {
        flex: 0 0 auto;

        justify-self: auto !important;

        visibility: visible !important;

        opacity: 1 !important;
    }


    /*
     * Burger must not participate in desktop flow.
     */
    .hw-header .hw-burger {
        display: none !important;
    }
}


/*
 * Intermediate widths.
 * Preserve all navigation without forcing overflow.
 */
@media (min-width: 801px) and (max-width: 1250px) {

    .hw-header .hw-nav {
        column-gap: 16px !important;

        padding-left: 18px !important;

        padding-right: 18px !important;
    }


    .hw-header .hw-menu {
        gap: 20px !important;
    }


    .hw-header .hw-nav-actions {
        gap: 8px;
    }


    .hw-header .hw-client-area-link span {
        display: none;
    }


    .hw-header .hw-client-area-link {
        padding-left: 5px;

        padding-right: 5px;
    }


    .hw-header .hw-top-cta {
        min-width: 136px !important;

        padding-left: 12px !important;

        padding-right: 12px !important;

        font-size: 9px !important;
    }
}


/*
 * Mobile.
 *
 * Client Area and language already exist inside
 * the mobile menu, therefore only burger remains
 * in the top navigation actions container.
 */
@media (max-width: 800px) {

    .hw-header .hw-nav {
        display: grid !important;

        grid-template-columns:
            auto
            1fr
            auto !important;

        align-items: center !important;
    }


    .hw-header .hw-nav-actions {
        grid-column: 3;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        justify-self: end !important;

        min-width: 0;
    }


    .hw-header .hw-nav-actions
    > .hw-client-area-link,

    .hw-header .hw-nav-actions
    > .hw-lang-switch,

    .hw-header .hw-nav-actions
    > .hw-top-cta {
        display: none !important;
    }


    .hw-header .hw-nav-actions
    > .hw-burger {
        display: flex !important;
    }
}

/* PUBLIC HEADER NAV ACTIONS FIX V1 END */

/* =========================================================
   CLIENT AREA CORNER FRAME V2 START
   Broken corner frame / radius 2px
   ========================================================= */

@media (min-width: 801px) {

    .hw-header
    .hw-nav-actions
    > .hw-client-area-link {

        position: relative !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        min-height: 38px !important;

        padding:
            0 13px !important;

        /*
         * No ordinary rectangle.
         */
        border:
            0 !important;

        border-radius:
            2px !important;

        background:
            rgba(7,11,12,.20) !important;

        box-shadow:
            none !important;

        color:
            #dfe4e7 !important;

        text-decoration:
            none !important;

        opacity:
            1 !important;

        transition:
            color .18s ease,
            background .18s ease,
            transform .18s ease !important;
    }


    /*
     * Four interrupted corners.
     *
     * Horizontal piece = 14px
     * Vertical piece   = 10px
     */
    .hw-header
    .hw-nav-actions
    > .hw-client-area-link::before {

        content: "";

        position: absolute;

        inset: 0;

        pointer-events: none;

        border-radius:
            2px;

        background:

            /* TOP LEFT */
            linear-gradient(
                90deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.32)
            )
            left top /
            14px 1px
            no-repeat,

            linear-gradient(
                180deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.26)
            )
            left top /
            1px 10px
            no-repeat,


            /* TOP RIGHT */
            linear-gradient(
                270deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.32)
            )
            right top /
            14px 1px
            no-repeat,

            linear-gradient(
                180deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.26)
            )
            right top /
            1px 10px
            no-repeat,


            /* BOTTOM LEFT */
            linear-gradient(
                90deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.32)
            )
            left bottom /
            14px 1px
            no-repeat,

            linear-gradient(
                0deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.26)
            )
            left bottom /
            1px 10px
            no-repeat,


            /* BOTTOM RIGHT */
            linear-gradient(
                270deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.32)
            )
            right bottom /
            14px 1px
            no-repeat,

            linear-gradient(
                0deg,
                rgba(156,255,0,.72),
                rgba(156,255,0,.26)
            )
            right bottom /
            1px 10px
            no-repeat;

        filter:
            drop-shadow(
                0 0 3px
                rgba(156,255,0,.16)
            );

        transition:
            filter .18s ease,
            opacity .18s ease;

        opacity:
            .90;
    }


    .hw-header
    .hw-nav-actions
    > .hw-client-area-link svg {

        width:
            17px !important;

        height:
            17px !important;

        color:
            #dfe4e7 !important;

        filter:
            none !important;

        transition:
            color .18s ease,
            filter .18s ease;
    }


    .hw-header
    .hw-nav-actions
    > .hw-client-area-link span {

        color:
            #dfe4e7 !important;

        transition:
            color .18s ease;
    }


    /* ==============================
       HOVER
       ============================== */

    .hw-header
    .hw-nav-actions
    > .hw-client-area-link:hover {

        color:
            var(--lime) !important;

        background:
            rgba(156,255,0,.025) !important;

        transform:
            translateY(-1px);
    }


    .hw-header
    .hw-nav-actions
    > .hw-client-area-link:hover::before {

        opacity:
            1;

        filter:
            drop-shadow(
                0 0 5px
                rgba(156,255,0,.36)
            );
    }


    .hw-header
    .hw-nav-actions
    > .hw-client-area-link:hover svg {

        color:
            var(--lime) !important;

        filter:
            drop-shadow(
                0 0 4px
                rgba(156,255,0,.32)
            ) !important;
    }


    .hw-header
    .hw-nav-actions
    > .hw-client-area-link:hover span {

        color:
            var(--lime) !important;
    }
}

/* CLIENT AREA CORNER FRAME V2 END */

/* =========================================================
   CLIENT AREA SPACING V1 START
   Move client area 10px left from language switch
   ========================================================= */

@media (min-width: 801px) {
    .hw-header
    .hw-nav-actions
    > .hw-client-area-link {
        margin-right: 10px !important;
    }
}

/* CLIENT AREA SPACING V1 END */