/*
Theme Name: Blackwall v2
Theme URI: https://blackwall.com/
Author: BotGuard OÜ
Author URI: https://blackwall.com/
Description: Blackwall corporate WordPress block theme.
Version: 1.0.0
Text Domain: blackwall-v2
*/

body.blackwall-homepage {
    background: #03051a;
    padding: 0;
}

.blackwall-homepage .wp-site-blocks {
    padding: 0;
}

.bw-home {
    --bw-hover: #ff3558;
    --bw-gutter: clamp(24px, 6.25vw, 120px);
    background: #03051a;
    color: #fff;
    font-family: "Satoshi", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0;
    padding: 0 0 16px;
    position: relative;
}

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

.bw-home :where(div, section, header, footer, main, article, figure, p, h1, h2, h3) {
    margin: 0;
}

.bw-home :where(h1, h2, h3) {
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    text-wrap: initial;
}

.bw-home h1 {
    font-size: clamp(36px, 3.125vw, 60px);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.bw-home h2 {
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.bw-home h3 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.bw-home p {
    text-wrap: pretty;
}

.bw-home .bw-skip-link {
    position: absolute;
    top: 16px;
    left: 16px;
    transform: translateY(-200%);
    z-index: 5;
    padding: 12px 24px;
    background: #0a0c21;
}

.bw-home .bw-skip-link:focus {
    transform: none;
}

.bw-home .bw-header {
    position: absolute;
    inset: 16px 16px auto;
    margin: 0;
}

.bw-home .bw-hero,
.bw-home .bw-closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 120px var(--bw-gutter);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
}

.bw-home .bw-hero {
    min-height: 964px;
}

.bw-hero::before,
.bw-closing::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3062.719px;
    height: 1980px;
    left: calc(50% - 1531.3595px);
    bottom: -175px;
    background: url("assets/backgrounds/security-growth.webp") center / cover;
    opacity: .6;
    pointer-events: none;
}

.bw-home .bw-hero > p {
    max-width: 736px;
    color: #d0d1d4;
}

.bw-home .bw-section {
    padding: 120px max(var(--bw-gutter), calc((100% - 1680px) / 2));
}

.bw-home .bw-eyebrow {
    color: #c6b4ff;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.bw-home .bw-section-heading {
    display: grid;
    gap: 12px;
}

.bw-home .bw-investors {
    background: #141122;
    padding-block: 80px;
    display: grid;
    gap: 60px;
}

.bw-home .bw-investor-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px;
}

.bw-home .bw-investor {
    min-height: 184px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 24px;
    border: 1px solid #323447;
    border-radius: 8px;
    background: rgb(10 12 33 / 30%);
}

.bw-investor .wp-block-image {
    width: 150px;
    max-width: 100%;
}

.bw-home .bw-product {
    display: flex;
    align-items: center;
    min-height: 800px;
    padding-block: 80px;
    background-repeat: no-repeat;
}

.bw-home .bw-revenue {
    background-image: url("assets/backgrounds/recurring-revenue.webp");
    background-size: 1967px 1272px;
    background-position: right -36px bottom;
}

.bw-home .bw-growth {
    justify-content: flex-end;
    background-color: #141122;
    background-image: url("assets/backgrounds/customer-growth.webp");
    background-size: 2088px 1350px;
    background-position: left -301px top -182px;
}

.bw-home .bw-integration {
    background-image: url("assets/backgrounds/zero-friction.webp");
    background-size: 1967px 1272px;
    background-position: right -30px top -122px;
}

.bw-home .bw-product-copy {
    width: 800px;
    max-width: 100%;
    display: grid;
    gap: 40px;
}

.bw-home .bw-product-body {
    display: grid;
    gap: 34px;
    line-height: 1.7;
    color: #d0d1d4;
}

.bw-product-body strong {
    color: #f7f8f7;
}

.bw-growth .bw-product-body,
.bw-home .bw-intro,
.bw-home .bw-closing > p {
    font-weight: 500;
}

.bw-growth .bw-product-body {
    letter-spacing: -.02em;
}

.bw-home .bw-capabilities .bw-section-heading,
.bw-home .bw-benefits .bw-section-heading {
    gap: 8px;
}

.bw-capabilities h2,
.bw-benefits h2 {
    /* Keep the 591px text measure proportional to the 48px desktop type. */
    max-width: 12.3125em;
}

.bw-home .bw-capabilities,
.bw-home .bw-benefits {
    display: grid;
    gap: 40px;
}

.bw-home .bw-intro {
    color: #bcbdc2;
    letter-spacing: -.01em;
}

.bw-home .bw-capability-grid,
.bw-home .bw-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 20px;
}

.bw-home .bw-capability {
    min-height: 445px;
    padding: 32px;
    background: #0a0c21;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bw-home .bw-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: #ff3558;
}

.bw-home .bw-card-copy {
    margin-top: auto;
    display: grid;
    gap: 20px;
    color: #f7f8f7;
    font-size: 18px;
    font-weight: 500;
}

.bw-card-copy p {
    margin: 0;
    min-height: 6em;
}

.bw-card-copy h3 {
    margin: 0;
    color: inherit;
}

.bw-home .bw-benefits {
    background: rgb(255 255 255 / 3%);
}

.bw-home .bw-benefit-grid {
    gap: 40px;
}

.bw-home .bw-benefit {
    min-height: 277px;
    padding: 40px;
    background: #03051a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.bw-benefit h3 {
    font-size: 24px;
}

.bw-benefit > p:last-child {
    min-height: 48px;
    color: #a8a9b0;
    font-size: 16px;
    font-weight: 700;
}

.bw-home .bw-number {
    width: 24px;
    height: 24px;
    background: #ff3558;
    color: #03051a;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
}

.bw-home .bw-closing {
    min-height: 600px;
    gap: 32px;
}

.bw-closing::before {
    bottom: -994px;
    transform: rotate(180deg);
}

.bw-closing h2 {
    font-size: clamp(28px, 2vw, 36px);
    line-height: 1.2;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.bw-home .bw-closing > p {
    max-width: 581px;
    color: #bcbdc2;
    letter-spacing: -.01em;
}

@media (max-width: 1199px) {
    .bw-home .bw-hero {
        min-height: 720px;
    }

    .bw-home .bw-investor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .bw-home .bw-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bw-home .bw-benefit-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .bw-home .bw-product {
        background-size: auto 1100px;
    }

    .bw-home .bw-product-copy {
        padding: 24px;
        background: rgb(3 5 26 / 85%);
    }
}

@media (max-width: 767px) {
    .bw-home {
        font-size: 18px;
    }

    .bw-home .bw-hero,
    .bw-home .bw-closing {
        padding-block: 80px;
        min-height: 640px;
        gap: 32px;
    }

    .bw-home .bw-section {
        padding-block: 64px;
    }

    .bw-home .bw-investor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .bw-home .bw-investor {
        min-height: 120px;
        padding: 16px;
    }

    .bw-home .bw-product {
        min-height: 640px;
    }

    .bw-home .bw-product-copy {
        padding: 16px;
    }

    .bw-home .bw-capability-grid {
        grid-template-columns: 1fr;
    }

    .bw-home .bw-capability {
        min-height: 320px;
        padding: 24px;
    }

    .bw-card-copy h3,
    .bw-card-copy p {
        min-height: 0;
    }

    .bw-home .bw-benefit {
        padding: 24px;
    }
}