/* =============================================================================
   RESYD ENTERPRISE CONTENT SYSTEM
   IMMUTABLE MARKET CONTENT EXPERIENCE
   ALIGNED WITH CORE + COMPONENTS + HOW + LINKS + FOOTER
   ============================================================================= */

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

.content-sections {

    position:
        relative;

    padding:
        120px 0 140px;

    background:
        linear-gradient(
            180deg,
            #050607 0%,
            #0a0d10 48%,
            #060708 100%
        );

    overflow:
        hidden;

    isolation:
        isolate;

    z-index:
        2;
}

.content-sections::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199,170,116,.08),
            transparent 34%
        );

    pointer-events:
        none;
}

.content-sections::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto 0 0 0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(199,170,116,.28),
            transparent
        );
}

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

.content-sections .container {

    width:
        min(100% - 2rem, 1360px);

    margin-inline:
        auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        44px;

    position:
        relative;

    z-index:
        2;
}

/* =============================================================================
   BLOCK
   ============================================================================= */

.content-block {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        38px;

    padding:
        42px;

    background:
        linear-gradient(
            180deg,
            rgba(18,20,22,.98),
            rgba(8,10,12,.98)
        );

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.36);

    transition:
        transform .38s ease,
        border-color .34s ease,
        box-shadow .34s ease;

    isolation:
        isolate;
}

.content-block:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(199,170,116,.18);

    box-shadow:
        0 42px 110px rgba(0,0,0,.46);
}

.content-block::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199,170,116,.10),
            transparent 34%
        );

    opacity:
        0;

    transition:
        opacity .34s ease;

    pointer-events:
        none;
}

.content-block:hover::before {

    opacity:
        1;
}

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

.content-header {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    margin-bottom:
        28px;
}

/* =============================================================================
   TAG
   ============================================================================= */

.section-tag {

    min-height:
        40px;

    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 18px;

    border-radius:
        999px;

    background:
        rgba(199,170,116,.08);

    border:
        1px solid rgba(199,170,116,.16);

    color:
        #e3c693;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        0 12px 28px rgba(0,0,0,.18);
}

/* =============================================================================
   TITLE
   ============================================================================= */

.content-title {

    max-width:
        960px;

    color:
        #ffffff;

    font-size:
        clamp(2rem,4vw,4rem);

    line-height:
        1;

    letter-spacing:
        -.05em;
}

/* =============================================================================
   META
   ============================================================================= */

.content-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        34px;
}

/* =============================================================================
   META PILLS
   ============================================================================= */

.meta-pill {

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 18px;

    border-radius:
        999px;

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

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

    color:
        #ece2d2;

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .03em;

    backdrop-filter:
        blur(12px);

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

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

.meta-pill:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(199,170,116,.18);

    background:
        rgba(199,170,116,.06);
}

.meta-pill::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #9fe18d;

    box-shadow:
        0 0 14px rgba(159,225,141,.72);

    animation:
        contentPulse 2s infinite;
}

/* =============================================================================
   BODY
   ============================================================================= */

.content-body {

    position:
        relative;

    display:
        grid;

    gap:
        26px;

    margin-bottom:
        34px;
}

/* =============================================================================
   PARAGRAPHS
   ============================================================================= */

.content-body p {

    position:
        relative;

    margin:
        0;

    max-width:
        1120px;

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

    font-size:
        1.04rem;

    line-height:
        2;

    font-weight:
        500;

    letter-spacing:
        .01em;

    text-wrap:
        pretty;
}

.content-body p strong {

    color:
        #ffffff;

    font-weight:
        800;
}

/* =============================================================================
   FIRST PARAGRAPH
   ============================================================================= */

.content-body p:first-child {

    font-size:
        1.14rem;

    color:
        rgba(255,255,255,.92);
}

/* =============================================================================
   SIGNALS
   ============================================================================= */

.content-signals {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        36px;
}

/* =============================================================================
   SIGNAL PILLS
   ============================================================================= */

.signal-pill {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 18px;

    border-radius:
        999px;

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

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

    color:
        #ffffff;

    font-size:
        .74rem;

    font-weight:
        800;

    letter-spacing:
        .03em;

    backdrop-filter:
        blur(12px);

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

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

.signal-pill:hover {

    transform:
        translateY(-2px);

    background:
        rgba(199,170,116,.08);

    border-color:
        rgba(199,170,116,.18);
}

.signal-pill::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #d7bc8a;

    box-shadow:
        0 0 14px rgba(215,188,138,.72);

    animation:
        contentPulse 2s infinite;
}

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

.content-cta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        16px;
}

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

.content-cta .btn {

    min-width:
        240px;

    min-height:
        56px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 26px;

    border-radius:
        18px;

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

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

    color:
        #ffffff;

    font-size:
        .82rem;

    font-weight:
        800;

    text-decoration:
        none;

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

.content-cta .btn:hover {

    transform:
        translateY(-2px);

    background:
        rgba(199,170,116,.08);

    border-color:
        rgba(199,170,116,.18);

    box-shadow:
        0 18px 38px rgba(0,0,0,.22);
}

/* =============================================================================
   SECONDARY
   ============================================================================= */

.content-cta .btn.secondary {

    background:
        linear-gradient(
            135deg,
            rgba(199,170,116,.12),
            rgba(199,170,116,.04)
        );

    border:
        1px solid rgba(199,170,116,.18);

    color:
        #f0ddbb;
}

/* =============================================================================
   DIVIDER
   ============================================================================= */

.content-block:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    left:
        42px;

    right:
        42px;

    bottom:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            transparent
        );
}

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

@media (max-width: 980px) {

    .content-block {

        padding:
            32px;
    }

    .content-title {

        font-size:
            clamp(2rem,8vw,3.6rem);
    }
}

@media (max-width: 720px) {

    .content-sections {

        padding:
            78px 0 92px;
    }

    .content-sections .container {

        gap:
            28px;
    }

    .content-block {

        padding:
            24px;

        border-radius:
            28px;
    }

    .content-body {

        gap:
            20px;
    }

    .content-body p {

        font-size:
            .94rem;

        line-height:
            1.9;
    }

    .content-body p:first-child {

        font-size:
            1rem;
    }

    .content-cta {

        flex-direction:
            column;
    }

    .content-cta .btn {

        width:
            100%;
    }

    .content-block:not(:last-child)::after {

        left:
            24px;

        right:
            24px;
    }
}

/* =============================================================================
   ANIMATION
   ============================================================================= */

@keyframes contentPulse {

    0%,100% {

        opacity:
            1;
    }

    50% {

        opacity:
            .42;
    }
}