/* NAV */

header {
    position: sticky;
    top: 0;
    z-index: 100;

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

    background:
        rgba(8,10,12,.84);

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

.nav {
    min-height: 82px;

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

    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    display: block;

    height: 58px;
    width: auto;

    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 34px;

    font-size: 14px;
    font-weight: 650;

    color: #c4cbd0;
}

.nav-links a {
    transition: .2s ease;
}

.nav-links a:hover {
    color: var(--accent);
}

.nav-cta {
    border:
        1px solid
        var(--accent);

    color: var(--accent);

    padding:
        11px 18px;

    border-radius: 10px;
}

.nav-cta:hover {
    color:
        #081004 !important;

    background:
        var(--accent);

    box-shadow:
        0 0 30px
        var(--accent-glow);
}


/* HERO */

.hero {
    position: relative;

    min-height: 820px;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(148,239,63,.09),
            transparent 36%
        ),
        #080a0c;
}

.hero-media {
    position: absolute;

    z-index: -1;

    inset:
        0 0 0 auto;

    width: 72%;
    height: 100%;

    background-image:
        url("/assets/hero-terrarium.png");

    background-size: cover;

    background-position:
        54% center;

    background-repeat:
        no-repeat;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.30) 3%,
            rgba(0,0,0,.70) 8%,
            black 15%,
            black 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.30) 3%,
            rgba(0,0,0,.70) 8%,
            black 15%,
            black 100%
        );
}

.hero-media::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,10,12,.92) 0%,
            rgba(8,10,12,.68) 5%,
            rgba(8,10,12,.32) 11%,
            rgba(8,10,12,.10) 18%,
            transparent 27%
        );

    pointer-events: none;
}

.hero-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 62% 45%,
            rgba(148,239,63,.07),
            transparent 40%
        );

    pointer-events: none;
}

.hero-grid {
    width: 100%;

    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        47% 53%;

    align-items: center;

    padding-left: 34px;
    padding-right: 18px;
}

.hero-copy {
    max-width: 700px;

    padding:
        95px 0 85px;
}

.hero .eyebrow {
    margin-bottom: 26px;
}

.hero h1 {
    font-size:
        clamp(
            58px,
            6.1vw,
            88px
        );

    line-height: .97;

    letter-spacing: -.06em;

    max-width: 720px;

    margin-bottom: 30px;
}

.hero h1 span {
    color: var(--accent);

    text-shadow:
        0 0 35px
        rgba(148,239,63,.18);
}

.hero-description {
    font-size: 18px;
    line-height: 1.75;

    max-width: 580px;

    margin-bottom: 34px;

    color: #aab4bc;
}

.hero-trust {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}

.trust-pill {
    display: inline-flex;
    align-items: center;

    padding:
        10px 15px;

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

    border-radius: 999px;

    background:
        rgba(11,14,16,.70);

    backdrop-filter:
        blur(10px);

    color: #d1d7db;

    font-size: 13px;
    font-weight: 650;
}

.trust-pill::before {
    content: "✓";

    margin-right: 7px;

    color: var(--accent);

    font-weight: 900;
}

.hero-features {
    position: absolute;

    z-index: 10;

    top: 70px;
    right: 0;

    width: 290px;

    padding: 22px;

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

    border-radius: 18px;

    background:
        rgba(8,11,13,.79);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.35);
}

.hero-feature {
    display: flex;

    gap: 13px;

    align-items: center;

    padding: 10px 0;

    color: #e4e8eb;

    font-size: 14px;
}

.hero-feature-icon {
    width: 37px;
    height: 37px;

    flex:
        0 0 37px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(148,239,63,.35);

    border-radius: 10px;

    color: var(--accent);

    background:
        rgba(148,239,63,.08);

    font-size: 17px;
}

.hero-allegro {
    position: absolute;

    z-index: 10;

    right: 10px;
    bottom: 55px;

    padding:
        15px 19px;

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

    border-radius: 15px;

    background:
        rgba(8,11,13,.84);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.4);
}

.hero-allegro strong {
    display: block;

    color: #fff;

    font-size: 14px;
}

.hero-allegro span {
    display: block;

    margin-top: 3px;

    color: #aab3ba;

    font-size: 12px;
}

.hero-allegro .stars {
    margin-top: 7px;

    color: #ffd43b;

    letter-spacing: 2px;
}


/* PROOF */

.proof {
    border-top:
        1px solid
        var(--border);

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

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

.proof-grid {
    display: grid;

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

.proof-item {
    padding:
        35px 30px;

    text-align: center;

    border-right:
        1px solid
        var(--border);
}

.proof-item:last-child {
    border-right: 0;
}

.proof-item strong {
    display: block;

    font-size: 19px;

    margin-bottom: 5px;
}

.proof-item span {
    color: var(--muted);

    font-size: 14px;
}

.proof-item strong::before {
    content: "●";

    font-size: 9px;

    color: var(--accent);

    vertical-align: middle;

    margin-right: 10px;

    text-shadow:
        0 0 12px
        var(--accent);
}


/* OFERTA */

.offer-section {
    padding: 120px 0;

    position: relative;
}

.offer-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -220px;
    top: 120px;

    border-radius: 50%;

    background:
        var(--accent);

    filter:
        blur(190px);

    opacity: .025;

    pointer-events: none;
}

.offer-heading {
    max-width: 880px;

    margin-bottom: 58px;
}

.offer-heading h2 {
    max-width: 850px;
}

.offer-heading p {
    max-width: 760px;

    margin-top: 22px;

    font-size: 18px;
    line-height: 1.75;
}

.offer-grid {
    display: grid;

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

    gap: 18px;
}

.offer-card {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    padding: 34px;

    display: flex;
    flex-direction: column;

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

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(148,239,63,.06),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            transparent 45%
        ),
        #101418;

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

.offer-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(148,239,63,.30);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.40),
        0 0 60px
        rgba(148,239,63,.04);
}

.offer-card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.018),
            transparent 35%
        );
}

.offer-number {
    position: absolute;

    top: 12px;
    right: 22px;

    font-size: 104px;
    font-weight: 950;

    line-height: 1;

    letter-spacing: -.08em;

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

    user-select: none;
}

.offer-tag {
    position: relative;
    z-index: 2;

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

    gap: 9px;

    width: fit-content;

    margin-bottom: 54px;

    color: var(--accent);

    font-size: 12px;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .13em;
}

.offer-tag::before {
    content: "";

    width: 22px;
    height: 2px;

    background:
        var(--accent);

    box-shadow:
        0 0 12px
        var(--accent);
}

.offer-card h3 {
    position: relative;
    z-index: 2;

    max-width: 360px;

    font-size:
        clamp(
            27px,
            2.4vw,
            38px
        );

    line-height: 1.02;

    letter-spacing: -.035em;

    margin-bottom: 20px;
}

.offer-card > p {
    position: relative;
    z-index: 2;

    max-width: 390px;

    font-size: 15px;
    line-height: 1.7;

    color: #9da7ae;
}

.offer-features {
    position: relative;
    z-index: 2;

    display: grid;

    gap: 9px;

    margin-top: 26px;
    margin-bottom: 32px;
}

.offer-features span {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #cbd2d7;

    font-size: 14px;
}

.offer-features span::before {
    content: "✓";

    color: var(--accent);

    font-weight: 900;
}

.offer-link {
    position: relative;
    z-index: 2;

    margin-top: auto;

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

    width: 100%;

    min-height: 54px;

    padding:
        0 17px;

    border-radius: 13px;

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

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

    color: #f2f5f6;

    font-size: 14px;
    font-weight: 800;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.offer-link span {
    color: var(--accent);

    font-size: 18px;
}

.offer-link:hover {
    background:
        rgba(148,239,63,.09);

    border-color:
        rgba(148,239,63,.32);

    color:
        var(--accent);
}

.offer-card-featured {
    border-color:
        rgba(148,239,63,.18);

    background:
        radial-gradient(
            circle at 72% 8%,
            rgba(148,239,63,.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            transparent 45%
        ),
        #101418;
}


/* REALIZACJE */

.realizations {
    padding: 120px 0;

    position: relative;
}

.realizations::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: 160px;

    border-radius: 50%;

    background:
        var(--accent);

    filter:
        blur(180px);

    opacity: .035;

    pointer-events: none;
}

.realizations-head {
    display: grid;

    grid-template-columns:
        1fr .9fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}

.realizations-head h2 {
    max-width: 760px;
}

.realizations-intro {
    font-size: 17px;
    line-height: 1.75;

    max-width: 620px;

    justify-self: end;
}

.realizations-grid {
    display: grid;

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

    grid-auto-rows:
        205px;

    gap: 16px;
}

.realization-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

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

    background:
        #111519;

    isolation: isolate;

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

.realization-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(148,239,63,.28);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.40),
        0 0 50px
        rgba(148,239,63,.05);
}

.realization-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .55s ease;
}

.realization-card:hover img {
    transform:
        scale(1.045);
}

.realization-card::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(5,7,8,.88) 0%,
            rgba(5,7,8,.35) 34%,
            transparent 65%
        );

    pointer-events: none;
}

.realization-label {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 20px;
}

.realization-label span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color: var(--accent);

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.realization-label span::before {
    content: "";

    width: 15px;
    height: 2px;

    background:
        var(--accent);
}

.realization-label strong {
    display: block;

    color: #fff;

    font-size: 20px;

    line-height: 1.15;
}

.realization-terrarium {
    grid-column: span 7;
    grid-row: span 2;
}

.realization-geckos {
    grid-column: span 5;
    grid-row: span 2;
}

.realization-name {
    grid-column: span 4;
    grid-row: span 2;
}

.realization-dogs1,
.realization-dogs2,
.realization-dogs3 {
    grid-column: span 4;
    grid-row: span 1;
}

.realization-dogs4 {
    grid-column: span 8;
    grid-row: span 2;
}

.realization-dogs4 img {
    object-position:
        center 42%;
}

.realizations-bottom {
    margin-top: 50px;

    padding:
        36px 40px;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 40px;

    align-items: center;

    border-radius: 22px;

    border:
        1px solid
        rgba(148,239,63,.14);

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(148,239,63,.08),
            transparent 30%
        ),
        rgba(255,255,255,.025);
}

.realizations-bottom h3 {
    font-size:
        clamp(
            25px,
            3vw,
            36px
        );

    margin-bottom: 10px;
}

.realizations-bottom p {
    max-width: 820px;

    font-size: 16px;
}


/* ALLEGRO */

.allegro-box {
    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    overflow: hidden;

    border:
        1px solid
        rgba(148,239,63,.2);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(148,239,63,.11),
            transparent 34%
        ),
        #101418;
}

.allegro-copy {
    padding: 70px;
}

.allegro-copy h2 {
    max-width: 700px;
    margin-bottom: 22px;
}

.allegro-copy p {
    max-width: 650px;

    font-size: 17px;

    margin-bottom: 30px;
}

.allegro-side {
    padding: 50px;

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

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 17px;
}

.quality {
    display: flex;

    gap: 16px;

    align-items: flex-start;
}

.quality-check {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--accent);

    color:
        #071004;

    font-weight: 900;
}

.quality strong {
    display: block;

    margin-bottom: 3px;
}

.quality span {
    color: var(--muted);

    font-size: 14px;
}


/* B2B */

.b2b-grid {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;
}

.b2b-panel {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.mini-card {
    padding: 25px;

    min-height: 160px;

    border-radius: 18px;

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

    background:
        var(--card);
}

.mini-card strong {
    display: block;

    margin-bottom: 10px;

    font-size: 17px;
}

.mini-card span {
    color: var(--muted);

    font-size: 14px;
}


/* PROCESS */

.steps {
    display: grid;

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

    gap: 15px;

    counter-reset: step;
}

.step {
    padding: 28px;

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

    counter-increment: step;
}

.step::before {
    content:
        "0" counter(step);

    display: block;

    color: var(--accent);

    font-weight: 900;

    margin-bottom: 45px;

    font-size: 14px;
}

.step strong {
    display: block;

    font-size: 19px;

    margin-bottom: 8px;
}

.step span {
    color: var(--muted);

    font-size: 14px;
}


/* CTA */

.cta {
    padding-top: 40px;
}

.cta-box {
    padding:
        80px 60px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(148,239,63,.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #141a1e,
            #0e1114
        );

    border:
        1px solid
        rgba(148,239,63,.18);

    text-align: center;
}

.cta-box h2 {
    max-width: 850px;

    margin:
        0 auto 20px;
}

.cta-box p {
    max-width: 650px;

    margin:
        0 auto 32px;

    font-size: 18px;
}


/* FOOTER */

footer {
    margin-top: 110px;

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

    padding:
        38px 0;

    color:
        var(--muted);

    font-size: 13px;
}

.footer-grid {
    display: flex;

    justify-content:
        space-between;

    gap: 30px;

    align-items: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;

    justify-content:
        flex-end;

    gap:
        12px 22px;
}

.footer-links a:hover {
    color:
        var(--accent);
}