﻿.technology-headline {
    font-size: clamp(2rem, 3.8vw, 5rem) !important;
}

.tech {
    --deep: #001c15;
    --deep2: #00160f;
    --off: #f6f9f4;
    --ink: #ffffff;
    --ink2: #0a2a1f;
    --muted: rgba(255,255,255,.72);
    --muted2: rgba(255,255,255,.56);
    --mutedDark: rgba(10,42,31,.70);
    --accent: #00F49C;
    --lineDark: rgba(255,255,255,.14);
    --lineLight: rgba(10,42,31,.14);
}
.wrap {
    width: 100%;
    padding-left:6% !important;
    padding-right:6% !important;
    min-height:800px;
    padding-top:3%;
    padding-bottom:3%;
}

.tech-hero {
    background: radial-gradient(900px 520px at 20% 18%, rgba(0,244,156,.18), transparent 62%), radial-gradient(820px 500px at 78% 36%, rgba(0,244,156,.10), transparent 64%), linear-gradient(180deg, var(--deep), var(--deep2));
    color: var(--ink);
}

.tech-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.tech-hero__title {
    margin: 0;
    max-width: 820px;
}

.tech-hero__lead {
    margin: 14px 0 0 0;
    max-width: 820px;
    line-height: 1.65;
}

.tech-hero__media {
    display: flex;
    justify-content: center;


}

.tech-hero__img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-composite: intersect;
}


.tech-sec {
    padding: 0;
}

    .tech-sec.is-dark {
        background: linear-gradient(180deg, var(--deep), var(--deep2));
        color: var(--ink);
    }

    .tech-sec.is-light {
        background: var(--off);
        color: var(--ink2);
    }

.tech-row {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 22px;
    padding: 34px 0;
    border-top: 1px solid var(--lineDark);
}

.tech-sec.is-light .tech-row {
    border-top: 1px solid var(--lineLight);
}

.tech-left {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.num {
    display:none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: .06em;
    flex: 0 0 auto;
}

.is-dark .num {
    color: var(--accent);
    background: rgba(0,244,156,.10);
    border: 1px solid rgba(0,244,156,.28);
}

.is-light .num {
    color: #0a2a1f;
    background: rgba(0,244,156,.18);
    border: 1px solid rgba(10,42,31,.18);
}

.label2 {
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    margin-top: 2px;
}

.is-dark .label2 {
    color: var(--muted2);
}

.is-light .label2 {
    color: rgba(10,42,31,.55);
}

.title {
    margin: 8px 0 0 0;
    font-size: 22px;
    line-height: 1.14;
    font-weight: 950;
}

.slogan {
    margin: 10px 0 0 0;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.35;
}

.text {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.7;
}

.is-dark .text {
    color: var(--muted);
}

.is-light .text {
    color: var(--mutedDark);
}

.bullets {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.7;
}

.is-dark .bullets {
    color: var(--muted);
}

.is-light .bullets {
    color: var(--mutedDark);
}

.bullets strong {
    font-weight: 950;
}

.mods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.mod {
    border-radius: 16px;
    padding: 12px;
}

.is-dark .mod {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

.mod__t {
    font-weight: 950;
    margin-bottom: 4px;
}

.is-dark .mod__t {
    color: rgba(0,244,156,.92);
}

.mod__d {
    font-size: 13.5px;
    line-height: 1.55;
}

.is-dark .mod__d {
    color: rgba(255,255,255,.72);
}

.note {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

.is-dark .note {
    color: rgba(255,255,255,.62);
}

.hi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.hi__box {
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

.hi__t {
    font-weight: 950;
    margin-bottom: 4px;
    color: rgba(255,255,255,.92);
}

.hi__d {
    font-size: 13px;
    color: rgba(255,255,255,.72);
}

.closing {
    margin: 18px 0 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.6;
}

.closing__a {
    color: var(--accent);
    font-weight: 950;
}

@media (max-width: 980px) {
    .tech-hero__grid {
        grid-template-columns: 1fr;
        padding: 44px 0;
    }

    .tech-hero__media {
        justify-content: flex-start;
    }

    .tech-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 26px 0;
    }

    .mods {
        grid-template-columns: 1fr;
    }

    .hi {
        grid-template-columns: 1fr;
    }
}
