/* ==========================================================================
   AI1GROUP BLOG
   Complete Blog / Insights stylesheet

   FILE
   - blog.css

   OWNERSHIP
   - Blog category page
   - Blog category-description hero
   - Knowledge Feed console
   - Joomla category Blog feed
   - Blog preview/article cards
   - Read More buttons
   - Blog pagination
   - Full Joomla article view
   - Single-article cinematic hero
   - AI1Design logo orb
   - Article section cards
   - Blog-specific motion

   PREFIX
   - .ai1b-

   BODY CLASS
   - body.blog-page


   CONTENTS

   CATEGORY / BLOG LISTING
   01. Blog tokens
   02. Full-width Joomla reset
   03. Blog page foundation
   04. Standalone Blog hero
   05. Hero typography
   06. Hero topic chips
   07. Knowledge Feed console
   08. Knowledge Stream
   09. AI1 Insight Core
   10. Blog feed
   11. Blog article cards
   12. Featured article
   13. Article card typography
   14. Heading scroll motion
   15. Metadata
   16. Read More buttons
   17. Blog images
   18. Pagination
   19. Pointer spotlight
   20. Card reveal motion
   21. Category animations

   SINGLE ARTICLE
   22. Single article foundation
   23. Reading progress
   24. Single article hero
   25. AI1Design logo orb
   26. Single article hero typography
   27. Back to Blog button
   28. Article content stream
   29. Article section cards
   30. Article section typography
   31. Article lists
   32. Article links and dividers
   33. Article section motion
   34. Single article animations

   RESPONSIVE / ACCESSIBILITY
   35. Desktop / tablet behaviour
   36. Mobile behaviour
   37. Small-mobile behaviour
   38. Reduced motion
========================================================================== */



/* ==========================================================================
   01. BLOG TOKENS
========================================================================== */

body.blog-page {
    --ai1b-black: #010403;
    --ai1b-black-soft: #030906;

    --ai1b-panel: #07130c;
    --ai1b-panel-deep: #030a06;

    --ai1b-green: #91ff19;
    --ai1b-green-bright: #a7ff35;
    --ai1b-green-deep: #5fbd00;

    --ai1b-gold: #f0d59a;
    --ai1b-amber: #ffc43d;
    --ai1b-red: #ff5964;
    --ai1b-blue: #55bfff;

    --ai1b-white: #f7fbf8;
    --ai1b-text: #d8e4db;
    --ai1b-muted: #91a297;
    --ai1b-muted-soft: #6f8075;

    --ai1b-line:
        rgba(145, 255, 25, .15);

    --ai1b-line-medium:
        rgba(145, 255, 25, .25);

    --ai1b-line-strong:
        rgba(145, 255, 25, .46);

    --ai1b-radius: 30px;
    --ai1b-radius-small: 18px;

    --ai1b-shadow:
        0 30px 80px
        rgba(0, 0, 0, .38);

    --ai1b-shadow-big:
        0 46px 120px
        rgba(0, 0, 0, .52);

    --ai1b-shell:
        min(
            1380px,
            calc(100% - 48px)
        );

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(145, 255, 25, .055),
            transparent 30rem
        ),
        var(--ai1b-black);
}



/* ==========================================================================
   02. FULL-WIDTH JOOMLA RESET
========================================================================== */

body.blog-page .ai1-main,
body.blog-page .ai1-main--blog,
body.blog-page .com-content-category-blog,
body.blog-page .blog,
body.blog-page .category-desc {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

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

    background:
        transparent !important;

    box-shadow:
        none !important;
}


body.blog-page .ai1-main--blog {
    min-height: 60vh;

    overflow: hidden;
}


body.blog-page .com-content-category-blog,
body.blog-page .blog {
    position: relative !important;

    overflow: visible !important;
}


body.blog-page .com-content-category-blog::before,
body.blog-page .blog::before,
body.blog-page .category-desc::before,
body.blog-page .category-desc::after {
    display: none !important;
}


body.blog-page .category-desc {
    overflow: visible !important;
}


body.blog-page .ai1-content-shell {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}



/* ==========================================================================
   03. BLOG PAGE FOUNDATION
========================================================================== */

body.blog-page .com-content-category-blog {
    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(145, 255, 25, .04),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #010503 0%,
            #020704 68%,
            #010403 100%
        ) !important;
}



/* ==========================================================================
   04. STANDALONE BLOG HERO
========================================================================== */

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

    display: grid;

    width: 100%;
    max-width: none;

    min-height:
        clamp(
            670px,
            76vh,
            900px
        );

    align-items: center;

    margin: 0;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(145, 255, 25, .16);

    background:
        radial-gradient(
            circle at 76% 48%,
            rgba(145, 255, 25, .105),
            transparent 30rem
        ),
        radial-gradient(
            circle at 14% 7%,
            rgba(240, 213, 154, .05),
            transparent 27rem
        ),
        linear-gradient(
            118deg,
            #020704 0%,
            #041009 49%,
            #010403 100%
        );
}


.ai1b-hero::before {
    position: absolute;
    z-index: 10;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--ai1b-red) 14%,
            var(--ai1b-amber) 38%,
            var(--ai1b-green) 65%,
            #73d600 87%,
            transparent 100%
        );

    box-shadow:
        0 0 13px
        rgba(145, 255, 25, .22);
}


.ai1b-hero::after {
    position: absolute;
    z-index: -1;

    right: -2vw;
    bottom: -3vw;

    content: "BLOG";

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

    font-size:
        clamp(
            10rem,
            24vw,
            25rem
        );

    font-weight: 700;

    line-height: .72;

    letter-spacing: -.1em;

    pointer-events: none;

    user-select: none;
}


.ai1b-hero__content {
    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(440px, .83fr);

    gap:
        clamp(
            60px,
            7vw,
            115px
        );

    align-items: center;

    width:
        var(--ai1b-shell);

    margin-inline: auto;

    padding:
        clamp(
            88px,
            9vw,
            135px
        )
        0;
}


.ai1b-hero__grid {
    position: absolute;
    z-index: -3;

    inset: 0;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(145, 255, 25, .075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .075) 1px,
            transparent 1px
        );

    background-size:
        38px 38px;

    mask-image:
        radial-gradient(
            circle at 72% 50%,
            #000 6%,
            rgba(0, 0, 0, .72) 38%,
            transparent 73%
        );

    pointer-events: none;
}


.ai1b-hero__scan {
    position: absolute;
    z-index: -1;

    top: 0;
    bottom: 0;
    left: 10%;

    width: 1px;

    opacity: .42;

    background:
        linear-gradient(
            transparent,
            var(--ai1b-green),
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(145, 255, 25, .52);

    animation:
        ai1bHeroScan
        7s
        ease-in-out
        infinite;

    pointer-events: none;
}



/* ==========================================================================
   05. HERO TYPOGRAPHY
========================================================================== */

.ai1b-hero__copy {
    position: relative;

    max-width: 820px;
}


.ai1b-kicker {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin:
        0
        0
        25px !important;

    color:
        rgba(226, 238, 229, .6) !important;

    font-size:
        .76rem !important;

    font-weight: 700;

    line-height: 1 !important;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.ai1b-kicker > span {
    display: block;

    width: 50px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ai1b-green),
            rgba(145, 255, 25, .08)
        );

    box-shadow:
        0 0 14px
        rgba(145, 255, 25, .42);
}


body.blog-page .ai1b-hero h1 {
    max-width:
        880px !important;

    margin:
        0 !important;

    color:
        var(--ai1b-white) !important;

    font-size:
        clamp(
            4.1rem,
            6.5vw,
            7.4rem
        ) !important;

    font-weight:
        500 !important;

    line-height:
        .93 !important;

    letter-spacing:
        -.064em !important;

    text-align:
        left !important;

    text-wrap: balance;
}


body.blog-page .ai1b-hero h1 span {
    color:
        var(--ai1b-green);

    text-shadow:
        0 0 38px
        rgba(145, 255, 25, .12);
}


body.blog-page .ai1b-hero__lead {
    max-width: 730px;

    margin:
        30px
        0
        0 !important;

    color:
        #b8c8bd !important;

    font-size:
        clamp(
            1.05rem,
            1.35vw,
            1.24rem
        ) !important;

    line-height:
        1.85 !important;
}



/* ==========================================================================
   06. HERO TOPIC CHIPS
========================================================================== */

.ai1b-hero__topics {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;
}


.ai1b-hero__topics span {
    position: relative;

    display: inline-flex;

    min-height: 38px;

    align-items: center;

    padding:
        0
        15px;

    overflow: hidden;

    border:
        1px solid
        rgba(145, 255, 25, .17);

    border-radius: 999px;

    color:
        rgba(222, 234, 225, .74);

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

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .055em;

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


.ai1b-hero__topics span:hover {
    color: #fff;

    border-color:
        rgba(145, 255, 25, .45);

    background:
        rgba(145, 255, 25, .08);

    transform:
        translateY(-4px);
}



/* ==========================================================================
   07. KNOWLEDGE FEED CONSOLE
========================================================================== */

.ai1b-hero-console {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    border:
        1px solid
        rgba(145, 255, 25, .31);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(145, 255, 25, .12),
            transparent 19rem
        ),
        linear-gradient(
            150deg,
            rgba(8, 24, 14, .97),
            rgba(1, 8, 4, .99)
        );

    box-shadow:
        0 42px 110px
        rgba(0, 0, 0, .48),

        0 0 52px
        rgba(145, 255, 25, .07),

        inset 0 1px
        rgba(255, 255, 255, .04);

    transform:
        perspective(1100px)
        rotateY(-3deg);

    transition:
        transform
        .5s
        cubic-bezier(.2, .8, .2, 1),

        border-color .4s ease,
        box-shadow .4s ease;
}


.ai1b-hero-console:hover {
    border-color:
        rgba(145, 255, 25, .5);

    box-shadow:
        0 50px 126px
        rgba(0, 0, 0, .56),

        0 0 58px
        rgba(145, 255, 25, .12);

    transform:
        perspective(1100px)
        rotateY(0deg)
        translateY(-7px);
}


.ai1b-hero-console::before {
    position: absolute;
    z-index: -1;

    inset: 0;

    content: "";

    opacity: .12;

    background-image:
        radial-gradient(
            circle,
            rgba(145, 255, 25, .45) 1px,
            transparent 1.5px
        );

    background-size:
        28px 28px;

    mask-image:
        linear-gradient(
            #000,
            transparent 76%
        );
}


.ai1b-hero-console::after {
    position: absolute;

    top: -50%;
    bottom: -50%;
    left: -35%;

    width: 22%;

    content: "";

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

    transform:
        skewX(-16deg);

    animation:
        ai1bConsoleSweep
        6.5s
        ease-in-out
        infinite;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Console header
-------------------------------------------------------------------------- */

.ai1b-hero-console__head {
    display: flex;

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

    gap: 20px;

    min-height: 68px;

    padding:
        20px
        28px;

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

    color:
        rgba(220, 232, 223, .44);

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .14em;
}


.ai1b-hero-console__head b {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--ai1b-green);

    font-size: inherit;

    font-weight: 700;
}


.ai1b-hero-console__head b i {
    width: 7px;
    height: 7px;

    flex:
        0
        0
        auto;

    border-radius: 50%;

    background:
        currentColor;

    box-shadow:
        0 0 10px
        currentColor;

    animation:
        ai1bStatusPulse
        1.6s
        ease-in-out
        infinite;
}


/* --------------------------------------------------------------------------
   Console body
-------------------------------------------------------------------------- */

.ai1b-hero-console__body {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 540px;

    padding:
        42px
        52px
        40px;
}


/* --------------------------------------------------------------------------
   Think / Build / Share rows
-------------------------------------------------------------------------- */

.ai1b-feed-line {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        36px
        120px
        minmax(0, 1fr);

    gap: 18px;

    align-items: center;

    min-height: 82px;

    padding:
        8px
        0;

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


.ai1b-feed-line > span {
    color:
        rgba(145, 255, 25, .68);

    font-size: .64rem;

    font-weight: 700;

    letter-spacing: .12em;
}


.ai1b-feed-line strong {
    color:
        rgba(247, 251, 248, .94);

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

    font-weight: 500;

    line-height: 1.15;
}


.ai1b-feed-line i {
    position: relative;

    width: 100%;
    height: 1px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .3),
            rgba(145, 255, 25, .08)
        );
}


.ai1b-feed-line i::after {
    position: absolute;

    top: 0;
    left: -35%;

    width: 35%;
    height: 100%;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ai1b-green),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(145, 255, 25, .5);

    animation:
        ai1bFeedSignal
        2.8s
        linear
        infinite;
}


.ai1b-feed-line:nth-child(2) i::after {
    animation-delay:
        -.9s;
}


.ai1b-feed-line:nth-child(3) i::after {
    animation-delay:
        -1.8s;
}



/* ==========================================================================
   08. KNOWLEDGE STREAM
========================================================================== */

.ai1b-knowledge-zone {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        150px;

    gap:
        clamp(
            48px,
            5vw,
            78px
        );

    align-items: center;

    width: 100%;

    margin-top: 54px;

    padding:
        28px
        22px
        24px
        0;
}


.ai1b-knowledge-stream {
    position: relative;

    min-width: 0;

    padding:
        18px
        0;
}


.ai1b-knowledge-stream__head {
    display: flex;

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

    gap: 18px;

    margin-bottom: 20px;

    padding-bottom: 12px;

    border-bottom:
        1px solid
        rgba(145, 255, 25, .12);
}


.ai1b-knowledge-stream__head > span {
    color:
        rgba(219, 231, 222, .45);

    font-size: .52rem;

    font-weight: 700;

    letter-spacing: .16em;
}


.ai1b-knowledge-stream__head > b {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--ai1b-green);

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .13em;
}


.ai1b-knowledge-stream__head > b::before {
    width: 5px;
    height: 5px;

    content: "";

    border-radius: 50%;

    background:
        var(--ai1b-green);

    box-shadow:
        0 0 9px
        var(--ai1b-green);

    animation:
        ai1bStatusPulse
        1.6s
        ease-in-out
        infinite;
}


/* --------------------------------------------------------------------------
   Knowledge data rows
-------------------------------------------------------------------------- */

.ai1b-knowledge-stream__item {
    display: grid;

    grid-template-columns:
        78px
        minmax(60px, 1fr)
        27px;

    gap: 13px;

    align-items: center;

    min-height: 36px;
}


.ai1b-knowledge-stream__item > span {
    color:
        rgba(224, 235, 227, .6);

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .12em;
}


.ai1b-knowledge-stream__item > i {
    position: relative;

    display: block;

    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(145, 255, 25, .07);
}


.ai1b-knowledge-stream__item > i::before {
    position: absolute;

    inset: 0;

    content: "";

    opacity: .24;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 10px,
            rgba(145, 255, 25, .25) 10px,
            rgba(145, 255, 25, .25) 11px
        );
}


.ai1b-knowledge-stream__item > i > b {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width:
        var(--ai1b-level);

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .25),
            var(--ai1b-green)
        );

    box-shadow:
        0 0 9px
        rgba(145, 255, 25, .4);

    transform-origin:
        left center;

    animation:
        ai1bKnowledgeLevel
        3.2s
        ease-in-out
        infinite
        alternate;
}


.ai1b-knowledge-stream__item:nth-of-type(3) i > b {
    animation-delay:
        -.8s;
}


.ai1b-knowledge-stream__item:nth-of-type(4) i > b {
    animation-delay:
        -1.6s;
}


.ai1b-knowledge-stream__item > em {
    color:
        rgba(145, 255, 25, .58);

    font-size: .47rem;

    font-style: normal;

    font-weight: 700;

    text-align: right;
}


/* --------------------------------------------------------------------------
   Knowledge network status
-------------------------------------------------------------------------- */

.ai1b-knowledge-stream__status {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 17px;

    padding-top: 14px;

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


.ai1b-knowledge-stream__status > i {
    position: relative;

    width: 7px;
    height: 7px;

    flex:
        0
        0
        auto;

    border:
        1px solid
        rgba(145, 255, 25, .6);

    border-radius: 50%;
}


.ai1b-knowledge-stream__status > i::after {
    position: absolute;

    inset: 1px;

    content: "";

    border-radius: inherit;

    background:
        var(--ai1b-green);

    animation:
        ai1bStatusPulse
        1.7s
        ease-in-out
        infinite;
}


.ai1b-knowledge-stream__status > span {
    color:
        rgba(219, 231, 222, .32);

    font-size: .43rem;

    font-weight: 700;

    letter-spacing: .13em;
}



/* ==========================================================================
   09. AI1 INSIGHT CORE
========================================================================== */

.ai1b-feed-core {
    position: relative;

    display: grid;

    width: 132px;
    height: 132px;

    place-items: center;
    align-content: center;

    justify-self: center;

    margin: 0;

    border:
        1px solid
        rgba(145, 255, 25, .5);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 42% 34%,
            rgba(145, 255, 25, .09),
            transparent 32%
        ),
        radial-gradient(
            circle,
            rgba(145, 255, 25, .08),
            rgba(1, 8, 4, .98) 70%
        );

    box-shadow:
        0 0 32px
        rgba(145, 255, 25, .1),

        inset 0 0 30px
        rgba(145, 255, 25, .07);
}


.ai1b-feed-core::before,
.ai1b-feed-core::after {
    position: absolute;

    content: "";

    pointer-events: none;

    border-radius: 50%;
}


.ai1b-feed-core::before {
    inset: -14px;

    border:
        1px dashed
        rgba(145, 255, 25, .24);

    animation:
        ai1bCoreSpin
        11s
        linear
        infinite;
}


.ai1b-feed-core::after {
    inset: -27px;

    border:
        1px dotted
        rgba(145, 255, 25, .16);

    animation:
        ai1bCoreSpin
        17s
        linear
        infinite
        reverse;
}


.ai1b-feed-core span {
    position: relative;
    z-index: 2;

    color: #fff;

    font-size: 2.3rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: -.05em;
}


.ai1b-feed-core small {
    position: relative;
    z-index: 2;

    margin-top: 8px;

    color:
        var(--ai1b-green);

    font-size: .46rem;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .12em;

    text-align: center;
}


/* --------------------------------------------------------------------------
   Console footer
-------------------------------------------------------------------------- */

.ai1b-hero-console__foot {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 28px;

    min-height: 64px;

    padding:
        18px
        28px;

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

    color:
        rgba(219, 231, 222, .38);

    font-size: .5rem;

    font-weight: 700;

    letter-spacing: .12em;
}


.ai1b-hero-console__foot span {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.ai1b-hero-console__foot span:last-child {
    justify-self: end;

    text-align: right;
}


.ai1b-hero-console__foot i {
    width: 7px;
    height: 7px;

    flex:
        0
        0
        auto;

    border-radius: 50%;

    background:
        var(--ai1b-green);

    box-shadow:
        0 0 10px
        var(--ai1b-green);

    animation:
        ai1bStatusPulse
        1.8s
        ease-in-out
        infinite;
}



/* ==========================================================================
   10. BLOG FEED
========================================================================== */

body.blog-page .blog-items,
body.blog-page .com-content-category-blog__items {
    position: relative;

    display: grid;

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

    gap:
        clamp(
            24px,
            2.6vw,
            38px
        );

    width:
        var(--ai1b-shell);

    max-width: none;

    margin-inline: auto;

    padding:
        clamp(
            126px,
            10vw,
            170px
        )
        0
        clamp(
            105px,
            10vw,
            155px
        );
}


body.blog-page .blog-items::before {
    position: absolute;

    top:
        clamp(
            63px,
            5vw,
            82px
        );

    left: 0;

    content:
        "LATEST FROM AI1GROUP";

    color:
        rgba(221, 232, 224, .46);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .17em;
}


body.blog-page .blog-items::after {
    position: absolute;

    top:
        clamp(
            72px,
            5vw,
            91px
        );

    right: 0;
    left: 205px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .42),
            rgba(145, 255, 25, .06),
            transparent
        );
}



/* ==========================================================================
   11. BLOG ARTICLE CARDS
========================================================================== */

body.blog-page .blog-item {
    --ai1b-card-accent:
        var(--ai1b-green);

    position: relative !important;
    isolation: isolate;

    display: flex;

    flex-direction: column;

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

    min-width: 0;
    min-height: 500px;

    margin: 0 !important;

    padding:
        clamp(
            34px,
            3vw,
            48px
        ) !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(145, 255, 25, .18) !important;

    border-radius:
        var(--ai1b-radius) !important;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(145, 255, 25, .08),
            transparent 20rem
        ),
        linear-gradient(
            155deg,
            rgba(9, 24, 14, .96),
            rgba(2, 9, 5, .99)
        ) !important;

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

        inset 0 1px
        rgba(255, 255, 255, .028) !important;

    transition:
        transform
        .42s
        cubic-bezier(.2, .8, .2, 1),

        border-color .38s ease,
        box-shadow .38s ease;
}


body.blog-page .blog-item:nth-child(3n + 2) {
    --ai1b-card-accent:
        var(--ai1b-gold);
}


body.blog-page .blog-item:nth-child(3n + 3) {
    --ai1b-card-accent:
        #73d600;
}


body.blog-page .blog-item::before {
    position: absolute !important;
    z-index: 6;

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

    width: auto !important;
    height: 3px !important;

    content: "" !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ai1b-card-accent),
            transparent
        ) !important;

    box-shadow:
        0 0 16px
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 38%,
            transparent
        );
}


body.blog-page .blog-item::after {
    position: absolute;
    z-index: -1;

    right: -40px;
    bottom: -80px;

    width: 250px;
    height: 250px;

    content: "";

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 13%,
            transparent
        );

    border-radius: 50%;

    box-shadow:
        0 0 0 30px
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 2%,
            transparent
        ),

        0 0 0 68px
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 1.4%,
            transparent
        );

    pointer-events: none;

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


body.blog-page .blog-item:hover {
    transform:
        translateY(-13px)
        scale(1.012);

    border-color:
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 55%,
            transparent
        ) !important;

    box-shadow:
        0 44px 100px
        rgba(0, 0, 0, .46),

        0 0 46px
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 8%,
            transparent
        ) !important;
}


body.blog-page .blog-item:hover::after {
    border-color:
        color-mix(
            in srgb,
            var(--ai1b-card-accent) 27%,
            transparent
        );

    transform:
        scale(1.09)
        rotate(8deg);
}


body.blog-page .blog-item > * {
    position: relative;
    z-index: 3;
}


body.blog-page .blog-item .item-content {
    display: flex;

    flex:
        1
        1
        auto;

    flex-direction: column;

    min-width: 0;
}



/* ==========================================================================
   12. FEATURED ARTICLE
========================================================================== */

body.blog-page .blog-item.ai1b-featured,
body.blog-page .blog-items > .blog-item:first-child {
    grid-column:
        1 / -1;

    min-height:
        clamp(
            560px,
            42vw,
            700px
        );

    padding:
        clamp(
            50px,
            5vw,
            76px
        ) !important;

    border-color:
        rgba(145, 255, 25, .3) !important;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(145, 255, 25, .14),
            transparent 28rem
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(240, 213, 154, .045),
            transparent 26rem
        ),
        linear-gradient(
            135deg,
            rgba(10, 29, 17, .99),
            rgba(2, 9, 5, .995)
        ) !important;

    box-shadow:
        var(--ai1b-shadow-big) !important;
}


body.blog-page .blog-item.ai1b-featured::after,
body.blog-page .blog-items > .blog-item:first-child::after {
    right: -95px;
    bottom: -155px;

    width: 480px;
    height: 480px;
}


body.blog-page .blog-item.ai1b-featured .item-content,
body.blog-page .blog-items > .blog-item:first-child .item-content {
    max-width: 1080px;
}



/* ==========================================================================
   13. ARTICLE CARD TYPOGRAPHY
========================================================================== */

/* --------------------------------------------------------------------------
   Card title
-------------------------------------------------------------------------- */

body.blog-page .blog-item h1,
body.blog-page .blog-item > h2:first-of-type,
body.blog-page .blog-item .page-header h2 {
    max-width: 920px;

    margin:
        0
        0
        clamp(
            24px,
            2.5vw,
            34px
        ) !important;

    color:
        var(--ai1b-white) !important;

    font-size:
        clamp(
            2rem,
            3.1vw,
            3.35rem
        ) !important;

    font-weight:
        500 !important;

    line-height:
        1.07 !important;

    letter-spacing:
        -.038em !important;

    text-align:
        left !important;
}


/* --------------------------------------------------------------------------
   Featured title
-------------------------------------------------------------------------- */

body.blog-page .blog-item.ai1b-featured h1,
body.blog-page .blog-items > .blog-item:first-child h1,
body.blog-page .blog-item.ai1b-featured > h2:first-of-type,
body.blog-page .blog-item.ai1b-featured .page-header h2,
body.blog-page .blog-items > .blog-item:first-child > h2:first-of-type,
body.blog-page .blog-items > .blog-item:first-child .page-header h2 {
    max-width: 1080px;

    font-size:
        clamp(
            3rem,
            5vw,
            5.5rem
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -.05em !important;
}


body.blog-page .blog-item h1 a,
body.blog-page .blog-item .page-header h2 a,
body.blog-page .blog-item > h2:first-of-type a {
    color:
        inherit !important;

    text-decoration:
        none !important;
}


/* --------------------------------------------------------------------------
   Card H2 headings
-------------------------------------------------------------------------- */

body.blog-page .blog-item .item-content h2 {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    max-width: 760px;

    margin:
        clamp(
            42px,
            4vw,
            58px
        )
        0
        18px !important;

    padding:
        0 !important;

    color:
        var(--ai1b-green) !important;

    font-size:
        clamp(
            1.15rem,
            1.55vw,
            1.45rem
        ) !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        -.015em !important;

    text-align:
        left !important;
}


body.blog-page .blog-item .item-content h2::before {
    flex:
        0
        0
        auto;

    width: 26px;
    height: 2px;

    content: "";

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ai1b-green),
            rgba(145, 255, 25, .12)
        );

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


body.blog-page .blog-item .item-content h2::after {
    flex:
        1
        1
        auto;

    max-width: 90px;

    height: 1px;

    content: "";

    opacity: .5;

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


/* --------------------------------------------------------------------------
   Card H3 headings
-------------------------------------------------------------------------- */

body.blog-page .blog-item h3 {
    margin:
        clamp(
            30px,
            3vw,
            40px
        )
        0
        12px;

    color: #fff;

    font-size:
        clamp(
            1.25rem,
            1.7vw,
            1.6rem
        );

    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Card body copy
-------------------------------------------------------------------------- */

body.blog-page .blog-item p,
body.blog-page .blog-item li {
    color:
        #9cad9f !important;

    font-size:
        clamp(
            .93rem,
            1vw,
            1.02rem
        );

    line-height:
        1.86 !important;
}


body.blog-page .blog-item p {
    margin-top: 0;
}


body.blog-page .blog-item p + p {
    margin-top: 1.15rem;
}


body.blog-page .blog-item strong {
    color:
        #dce8df;
}


body.blog-page .blog-item ul,
body.blog-page .blog-item ol {
    display: grid;

    gap: 10px;

    margin:
        20px
        0
        28px;

    padding-left:
        1.4rem;
}


body.blog-page .blog-item hr {
    width: 100%;
    height: 1px;

    margin:
        32px
        0;

    border: 0;

    background:
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .4),
            rgba(145, 255, 25, .06),
            transparent
        );
}



/* ==========================================================================
   14. HEADING SCROLL MOTION
========================================================================== */

body.blog-page.ai1b-heading-motion
.blog-item .item-content h2 {
    opacity: 0;

    filter:
        blur(5px);

    transition:
        opacity .7s ease,
        transform
        .85s
        cubic-bezier(.2, .8, .2, 1),
        filter .75s ease;
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2.ai1b-heading--left {
    transform:
        translateX(-70px);
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2.ai1b-heading--right {
    transform:
        translateX(70px);
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2.is-heading-inview {
    opacity: 1;

    filter: none;

    transform:
        translateX(0);
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2::before {
    transform:
        scaleX(.15);

    transform-origin:
        left center;

    transition:
        transform .65s ease .25s,
        box-shadow .4s ease;
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2.is-heading-inview::before {
    transform:
        scaleX(1);

    box-shadow:
        0 0 14px
        rgba(145, 255, 25, .55);
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2::after {
    opacity: 0;

    transform:
        scaleX(.2);

    transform-origin:
        left center;

    transition:
        opacity .5s ease .4s,
        transform .65s ease .4s;
}


body.blog-page.ai1b-heading-motion
.blog-item .item-content h2.is-heading-inview::after {
    opacity: .5;

    transform:
        scaleX(1);
}



/* ==========================================================================
   15. METADATA
========================================================================== */

body.blog-page .article-info {
    display:
        flex !important;

    flex-wrap: wrap;

    gap:
        9px
        20px;

    margin:
        0
        0
        26px !important;

    padding:
        0 !important;

    color:
        rgba(216, 229, 219, .44) !important;

    font-size:
        .65rem;

    font-weight: 700;

    letter-spacing:
        .085em;

    text-transform:
        uppercase;
}


body.blog-page .article-info dd,
body.blog-page .article-info dt {
    margin:
        0 !important;
}


body.blog-page .article-info a {
    color:
        rgba(145, 255, 25, .75) !important;

    text-decoration:
        none !important;
}



/* ==========================================================================
   16. READ MORE BUTTONS
========================================================================== */

body.blog-page .readmore,
body.blog-page p.readmore {
    margin:
        auto
        0
        0 !important;

    padding-top:
        30px;
}


body.blog-page .readmore a,
body.blog-page a.btn,
body.blog-page .btn {
    position: relative;

    display: inline-flex;

    min-height: 54px;

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

    gap: 11px;

    overflow: hidden;

    padding:
        .85rem
        1.5rem;

    border:
        1px solid
        rgba(145, 255, 25, .32) !important;

    border-radius:
        999px !important;

    color:
        #071005 !important;

    background:
        linear-gradient(
            135deg,
            #91ff19,
            #69c900
        ) !important;

    box-shadow:
        0 14px 34px
        rgba(115, 214, 0, .2);

    font: inherit;

    font-size:
        .8rem;

    font-weight: 700;

    text-decoration:
        none !important;

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


body.blog-page .readmore a::after,
body.blog-page a.btn::after {
    content: "→";

    font-size: 1.05rem;

    transition:
        transform .28s ease;
}


body.blog-page .readmore a:hover,
body.blog-page .readmore a:focus-visible,
body.blog-page a.btn:hover,
body.blog-page a.btn:focus-visible {
    color:
        #061004 !important;

    border-color:
        rgba(190, 255, 105, .75) !important;

    box-shadow:
        0 20px 45px
        rgba(115, 214, 0, .31);

    transform:
        translateY(-4px);

    outline: none;
}


body.blog-page .readmore a:hover::after,
body.blog-page a.btn:hover::after {
    transform:
        translateX(5px);
}



/* ==========================================================================
   17. BLOG IMAGES
========================================================================== */

body.blog-page .blog-item figure,
body.blog-page .blog-item .item-image,
body.blog-page .blog-item .pull-left,
body.blog-page .blog-item .pull-right {
    width: 100%;

    margin:
        0
        0
        32px;
}


body.blog-page .blog-item figure img,
body.blog-page .blog-item .item-image img,
body.blog-page .blog-item > img,
body.blog-page .blog-item .item-content > img {
    width: 100%;

    max-height: 520px;

    object-fit: cover;

    border:
        1px solid
        rgba(145, 255, 25, .14);

    border-radius: 22px;

    filter:
        saturate(.9)
        contrast(1.04);

    transition:
        transform
        .55s
        cubic-bezier(.2, .8, .2, 1),

        filter .45s ease;
}


body.blog-page .blog-item:hover figure img,
body.blog-page .blog-item:hover .item-image img {
    filter:
        saturate(1)
        contrast(1.06);

    transform:
        scale(1.015);
}



/* ==========================================================================
   18. PAGINATION
========================================================================== */

body.blog-page .pagination,
body.blog-page .com-content-category-blog__pagination {
    display: flex;

    justify-content: center;

    width:
        var(--ai1b-shell);

    margin:
        0
        auto
        clamp(
            90px,
            9vw,
            135px
        );
}


body.blog-page .pagination ul {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}


body.blog-page .pagination a,
body.blog-page .pagination span {
    display: grid;

    min-width: 46px;
    min-height: 46px;

    place-items: center;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(145, 255, 25, .16);

    border-radius: 13px;

    color:
        #9cad9f !important;

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

    text-decoration:
        none !important;
}


body.blog-page .pagination a:hover,
body.blog-page .pagination .active span {
    color:
        #fff !important;

    border-color:
        rgba(145, 255, 25, .44);

    background:
        rgba(145, 255, 25, .085);
}



/* ==========================================================================
   19. POINTER SPOTLIGHT
========================================================================== */

.ai1b-pointer-glow {
    position: absolute !important;
    z-index: 1 !important;

    top: 0 !important;
    left: 0 !important;

    width:
        290px !important;

    height:
        290px !important;

    margin:
        -145px
        0
        0
        -145px !important;

    border-radius:
        50% !important;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--ai1b-card-accent) 12%,
                transparent
            ),
            transparent 68%
        ) !important;

    pointer-events:
        none !important;

    transform:
        translate(
            var(--ai1b-x, 50%),
            var(--ai1b-y, 50%)
        );

    transition:
        opacity .25s ease;
}


body.blog-page
.blog-item.is-spotlit
.ai1b-pointer-glow {
    opacity: 1;
}



/* ==========================================================================
   20. CARD REVEAL MOTION
========================================================================== */

body.blog-page.ai1b-motion-ready
.blog-item {
    opacity: 0;

    filter:
        blur(7px);

    transform:
        translateY(55px)
        scale(.983);
}


body.blog-page.ai1b-motion-ready
.blog-item.is-inview {
    opacity: 1;

    filter: none;

    transform: none;

    transition:
        opacity .72s ease,
        filter .82s ease,
        transform
        .9s
        cubic-bezier(.2, .8, .2, 1),
        border-color .38s ease,
        box-shadow .38s ease;

    transition-delay:
        calc(
            var(--ai1b-order, 0)
            * 70ms
        );
}


body.blog-page.ai1b-motion-ready
.blog-item.is-inview:hover {
    transform:
        translateY(-13px)
        scale(1.012);
}



/* ==========================================================================
   21. CATEGORY ANIMATIONS
========================================================================== */

@keyframes ai1bHeroScan {

    0%,
    100% {
        left: 7%;
        opacity: .08;
    }

    25% {
        opacity: .58;
    }

    50% {
        left: 91%;
        opacity: .42;
    }

    75% {
        opacity: .16;
    }

}


@keyframes ai1bConsoleSweep {

    0%,
    60% {
        left: -35%;
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    100% {
        left: 125%;
        opacity: 0;
    }

}


@keyframes ai1bStatusPulse {

    0%,
    100% {
        opacity: .45;

        transform:
            scale(.82);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.13);
    }

}


@keyframes ai1bFeedSignal {

    from {
        left: -35%;
    }

    to {
        left: 115%;
    }

}


@keyframes ai1bCoreSpin {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes ai1bKnowledgeLevel {

    0% {
        transform:
            scaleX(.82);

        opacity: .58;
    }

    100% {
        transform:
            scaleX(1);

        opacity: 1;
    }

}



/* ==========================================================================
   22. SINGLE ARTICLE FOUNDATION
========================================================================== */

body.blog-page.ai1b-single {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(145, 255, 25, .055),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #010403 0%,
            #020805 55%,
            #010403 100%
        );
}


body.blog-page.ai1b-single .ai1-main,
body.blog-page.ai1b-single .ai1-main--blog {
    position: relative;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow: hidden;

    background:
        transparent !important;
}


/* --------------------------------------------------------------------------
   Ambient background grid
-------------------------------------------------------------------------- */

body.blog-page.ai1b-single
.ai1-main--blog::before {
    position: absolute;
    z-index: 0;

    inset: 0;

    content: "";

    opacity: .14;

    background-image:
        linear-gradient(
            rgba(145, 255, 25, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .055) 1px,
            transparent 1px
        );

    background-size:
        44px 44px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            rgba(0, 0, 0, .28) 45%,
            transparent 92%
        );

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Large INSIGHT watermark
-------------------------------------------------------------------------- */

body.blog-page.ai1b-single
.ai1-main--blog::after {
    position: absolute;
    z-index: 0;

    top: 260px;
    right: -3vw;

    content: "INSIGHT";

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

    font-size:
        clamp(
            9rem,
            22vw,
            23rem
        );

    font-weight: 700;

    line-height: .75;

    letter-spacing: -.09em;

    pointer-events: none;

    user-select: none;
}


/* --------------------------------------------------------------------------
   Joomla article reset
-------------------------------------------------------------------------- */

body.blog-page.ai1b-single
.com-content-article.item-page {
    position: relative;
    z-index: 2;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


body.blog-page.ai1b-single
.com-content-article__body {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;
}



/* ==========================================================================
   23. READING PROGRESS
========================================================================== */

.ai1b-reading-progress {
    position: fixed;
    z-index: 9998;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    pointer-events: none;
}


.ai1b-reading-progress__bar {
    display: block;

    width: 0;
    height: 100%;

    border-radius:
        0
        999px
        999px
        0;

    background:
        linear-gradient(
            90deg,
            #ff5964 0%,
            #ffc43d 30%,
            #91ff19 68%,
            #63c600 100%
        );

    box-shadow:
        0 0 14px
        rgba(145, 255, 25, .58);

    transition:
        width .08s linear;
}



/* ==========================================================================
   24. SINGLE ARTICLE HERO
========================================================================== */

.ai1b-article-hero {
    position: relative;
    isolation: isolate;

    display: grid;

    min-height:
        clamp(
            620px,
            72vh,
            810px
        );

    align-items: center;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(145, 255, 25, .18);

    background:
        radial-gradient(
            circle at 76% 32%,
            rgba(145, 255, 25, .13),
            transparent 27rem
        ),
        radial-gradient(
            circle at 16% 84%,
            rgba(240, 213, 154, .045),
            transparent 26rem
        ),
        linear-gradient(
            125deg,
            #020704 0%,
            #06150c 52%,
            #010403 100%
        );
}


.ai1b-article-hero::before {
    position: absolute;
    z-index: 4;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff5964 12%,
            #ffc43d 36%,
            #91ff19 66%,
            #72d400 88%,
            transparent
        );

    box-shadow:
        0 0 16px
        rgba(145, 255, 25, .34);
}


.ai1b-article-hero::after {
    position: absolute;
    z-index: -2;

    right: -4vw;
    bottom: -6vw;

    content: "AI1";

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

    font-size:
        clamp(
            15rem,
            34vw,
            38rem
        );

    font-weight: 700;

    line-height: .72;

    letter-spacing: -.11em;

    pointer-events: none;
}


.ai1b-article-hero__grid {
    position: absolute;
    z-index: -3;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(145, 255, 25, .065) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .065) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        radial-gradient(
            circle at 72% 44%,
            #000,
            transparent 70%
        );

    pointer-events: none;
}



/* ==========================================================================
   25. AI1DESIGN LOGO ORB
========================================================================== */

.ai1b-article-hero__orb {
    position: absolute;
    z-index: -1;

    top: 50%;

    right:
        clamp(
            5%,
            8vw,
            11%
        );

    display: grid;

    width:
        clamp(
            300px,
            31vw,
            500px
        );

    aspect-ratio: 1;

    place-items: center;

    border:
        1px solid
        rgba(145, 255, 25, .22);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(145, 255, 25, .09),
            rgba(145, 255, 25, .025) 45%,
            transparent 72%
        );

    box-shadow:
        0 0 85px
        rgba(145, 255, 25, .08),

        inset 0 0 70px
        rgba(145, 255, 25, .055);

    transform:
        translateY(-50%);

    animation:
        ai1bArticleOrbFloat
        7s
        ease-in-out
        infinite;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Outer rotating ring
-------------------------------------------------------------------------- */

.ai1b-article-hero__orb::before {
    position: absolute;

    inset: -22px;

    content: "";

    border:
        1px dashed
        rgba(145, 255, 25, .22);

    border-radius: 50%;

    animation:
        ai1bCoreSpin
        20s
        linear
        infinite;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Internal circular plate
-------------------------------------------------------------------------- */

.ai1b-article-hero__orb::after {
    position: absolute;
    z-index: 1;

    inset: 18%;

    content: "";

    border:
        1px solid
        rgba(145, 255, 25, .26);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(145, 255, 25, .055),
            rgba(1, 8, 4, .72) 68%,
            rgba(1, 5, 3, .92) 100%
        );

    box-shadow:
        0 0 36px
        rgba(145, 255, 25, .1),

        inset 0 0 40px
        rgba(145, 255, 25, .055);

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   AI1Design logo container
-------------------------------------------------------------------------- */

.ai1b-article-hero__orb-logo-wrap {
    position: absolute;
    z-index: 4;

    inset: 19%;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   AI1Design logo
-------------------------------------------------------------------------- */

.ai1b-article-hero__orb-logo {
    display: block;

    width: 100%;
    height: 100%;

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

    padding: 3%;

    filter:
        drop-shadow(
            0 0 10px
            rgba(145, 255, 25, .3)
        )
        drop-shadow(
            0 0 24px
            rgba(145, 255, 25, .12)
        );

    transform:
        scale(.98);

    animation:
        ai1bArticleLogoPulse
        4.8s
        ease-in-out
        infinite;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Logo light sweep
-------------------------------------------------------------------------- */

.ai1b-article-hero__orb-logo-wrap::after {
    position: absolute;
    z-index: 5;

    top: -30%;
    bottom: -30%;
    left: -65%;

    width: 32%;

    content: "";

    opacity: 0;

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

    transform:
        skewX(-18deg);

    animation:
        ai1bArticleLogoSweep
        6.5s
        ease-in-out
        infinite;

    pointer-events: none;
}



/* ==========================================================================
   26. SINGLE ARTICLE HERO TYPOGRAPHY
========================================================================== */

.ai1b-article-hero__inner {
    position: relative;
    z-index: 3;

    width:
        var(--ai1b-shell);

    margin-inline: auto;

    padding:
        clamp(
            90px,
            10vw,
            145px
        )
        0;

    text-align: left;
}


.ai1b-article-hero__content {
    max-width:
        min(
            970px,
            75%
        );
}


.ai1b-article-kicker {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin:
        0
        0
        27px;

    color:
        rgba(222, 235, 226, .58);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.ai1b-article-kicker::before {
    width: 42px;
    height: 2px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--ai1b-green),
            rgba(145, 255, 25, .08)
        );

    box-shadow:
        0 0 11px
        rgba(145, 255, 25, .45);
}


body.blog-page.ai1b-single
.ai1b-article-hero h1 {
    max-width: 1050px;

    margin:
        0 !important;

    color:
        var(--ai1b-white) !important;

    font-size:
        clamp(
            3.6rem,
            6.5vw,
            7.2rem
        ) !important;

    font-weight:
        500 !important;

    line-height:
        .95 !important;

    letter-spacing:
        -.06em !important;

    text-wrap: balance;
}


.ai1b-article-hero__intro {
    max-width: 770px;

    margin-top: 32px;
}


body.blog-page.ai1b-single
.ai1b-article-hero__intro p {
    color:
        #b4c6b8 !important;

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.18rem
        ) !important;

    line-height:
        1.82 !important;
}


body.blog-page.ai1b-single
.ai1b-article-hero__intro p:first-child {
    color:
        #e4eee6 !important;

    font-size:
        clamp(
            1.2rem,
            1.8vw,
            1.5rem
        ) !important;

    line-height:
        1.62 !important;
}


body.blog-page.ai1b-single
.ai1b-article-hero__intro strong {
    color:
        var(--ai1b-green) !important;
}



/* ==========================================================================
   27. BACK TO BLOG BUTTON
========================================================================== */

.ai1b-article-back {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 38px;

    padding:
        .75rem
        1.15rem;

    border:
        1px solid
        rgba(145, 255, 25, .23);

    border-radius: 999px;

    color:
        rgba(226, 239, 229, .78) !important;

    background:
        rgba(145, 255, 25, .045);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .045em;

    text-decoration:
        none !important;

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


.ai1b-article-back::before {
    content: "←";

    color:
        var(--ai1b-green);

    font-size: 1rem;

    transition:
        transform .3s ease;
}


.ai1b-article-back:hover,
.ai1b-article-back:focus-visible {
    color:
        #fff !important;

    border-color:
        rgba(145, 255, 25, .52);

    background:
        rgba(145, 255, 25, .09);

    transform:
        translateY(-3px);

    outline: none;
}


.ai1b-article-back:hover::before {
    transform:
        translateX(-4px);
}



/* ==========================================================================
   28. ARTICLE CONTENT STREAM
========================================================================== */

.ai1b-article-stream {
    position: relative;

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

    margin:
        clamp(
            90px,
            8vw,
            130px
        )
        auto
        clamp(
            110px,
            10vw,
            160px
        );
}


.ai1b-article-stream::before {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 31px;

    width: 1px;

    content: "";

    background:
        linear-gradient(
            180deg,
            rgba(145, 255, 25, .38),
            rgba(145, 255, 25, .08) 70%,
            transparent
        );
}



/* ==========================================================================
   29. ARTICLE SECTION CARDS
========================================================================== */

.ai1b-article-section {
    --ai1b-section-accent:
        var(--ai1b-green);

    position: relative;
    isolation: isolate;

    margin:
        0
        0
        clamp(
            34px,
            4vw,
            52px
        );

    padding:
        clamp(
            38px,
            4.6vw,
            62px
        )
        clamp(
            38px,
            5vw,
            68px
        )
        clamp(
            42px,
            5vw,
            66px
        )
        clamp(
            76px,
            7vw,
            100px
        );

    overflow: hidden;

    border:
        1px solid
        rgba(145, 255, 25, .14);

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 92% 5%,
            color-mix(
                in srgb,
                var(--ai1b-section-accent) 7%,
                transparent
            ),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            rgba(8, 22, 13, .94),
            rgba(2, 8, 5, .98)
        );

    box-shadow:
        0 24px 62px
        rgba(0, 0, 0, .27),

        inset 0 1px
        rgba(255, 255, 255, .025);

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


.ai1b-article-section:nth-child(3n + 2) {
    --ai1b-section-accent:
        var(--ai1b-gold);
}


.ai1b-article-section:nth-child(3n + 3) {
    --ai1b-section-accent:
        #73d600;
}


.ai1b-article-section:hover {
    border-color:
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 35%,
            transparent
        );

    box-shadow:
        0 34px 82px
        rgba(0, 0, 0, .36),

        0 0 42px
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 5%,
            transparent
        );

    transform:
        translateY(-5px);
}


/* --------------------------------------------------------------------------
   Section top beam
-------------------------------------------------------------------------- */

.ai1b-article-section::before {
    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ai1b-section-accent),
            transparent
        );

    opacity: .75;
}


/* --------------------------------------------------------------------------
   Section ambient circle
-------------------------------------------------------------------------- */

.ai1b-article-section::after {
    position: absolute;
    z-index: -1;

    right: -100px;
    bottom: -130px;

    width: 340px;
    height: 340px;

    content: "";

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 10%,
            transparent
        );

    border-radius: 50%;

    box-shadow:
        0 0 0 34px
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 2%,
            transparent
        ),

        0 0 0 76px
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 1%,
            transparent
        );

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Section number
-------------------------------------------------------------------------- */

.ai1b-article-section__number {
    position: absolute;

    top:
        clamp(
            41px,
            4.8vw,
            65px
        );

    left: 24px;

    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 30%,
            transparent
        );

    border-radius: 50%;

    color:
        var(--ai1b-section-accent);

    background:
        rgba(2, 8, 5, .92);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 11%,
            transparent
        );

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .08em;
}



/* ==========================================================================
   30. ARTICLE SECTION TYPOGRAPHY
========================================================================== */

body.blog-page.ai1b-single
.ai1b-article-section h2 {
    position: relative;

    max-width: 840px;

    margin:
        0
        0
        26px !important;

    padding:
        0
        0
        18px !important;

    color:
        var(--ai1b-section-accent) !important;

    font-size:
        clamp(
            1.65rem,
            2.6vw,
            2.45rem
        ) !important;

    font-weight:
        550 !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -.035em !important;

    text-align:
        left !important;
}


body.blog-page.ai1b-single
.ai1b-article-section h2::before {
    display: none !important;
}


body.blog-page.ai1b-single
.ai1b-article-section h2::after {
    position: absolute;

    bottom: 0;
    left: 0;

    width:
        min(
            150px,
            35%
        );

    height: 2px;

    content: "";

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ai1b-section-accent),
            transparent
        );

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 30%,
            transparent
        );
}


body.blog-page.ai1b-single
.ai1b-article-section h3 {
    margin:
        38px
        0
        15px;

    color:
        #f2f8f3;

    font-size:
        clamp(
            1.2rem,
            1.8vw,
            1.55rem
        );

    font-weight: 600;

    line-height: 1.25;
}


body.blog-page.ai1b-single
.ai1b-article-section p,
body.blog-page.ai1b-single
.ai1b-article-section li {
    max-width: 890px;

    color:
        #a5b7a9 !important;

    font-size:
        clamp(
            .98rem,
            1.1vw,
            1.07rem
        );

    line-height:
        1.9 !important;
}


body.blog-page.ai1b-single
.ai1b-article-section p {
    margin:
        0
        0
        1.15rem;
}


body.blog-page.ai1b-single
.ai1b-article-section p:last-child {
    margin-bottom: 0;
}


body.blog-page.ai1b-single
.ai1b-article-section strong {
    color:
        #e6f1e8 !important;

    font-weight: 650;
}



/* ==========================================================================
   31. ARTICLE LISTS
========================================================================== */

body.blog-page.ai1b-single
.ai1b-article-section ul,
body.blog-page.ai1b-single
.ai1b-article-section ol {
    display: grid;

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

    gap: 10px;

    max-width: 910px;

    margin:
        28px
        0
        32px !important;

    padding:
        0 !important;

    list-style: none;
}


body.blog-page.ai1b-single
.ai1b-article-section li {
    position: relative;

    min-height: 52px;

    padding:
        13px
        15px
        13px
        43px;

    border:
        1px solid
        rgba(145, 255, 25, .105);

    border-radius: 13px;

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

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


body.blog-page.ai1b-single
.ai1b-article-section li::before {
    position: absolute;

    top: 19px;
    left: 17px;

    width: 8px;
    height: 8px;

    content: "";

    border:
        1px solid
        var(--ai1b-section-accent);

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 18%,
            transparent
        );

    box-shadow:
        0 0 8px
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 30%,
            transparent
        );
}


body.blog-page.ai1b-single
.ai1b-article-section li:hover {
    border-color:
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 29%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--ai1b-section-accent) 4%,
            transparent
        );

    transform:
        translateX(4px);
}



/* ==========================================================================
   32. ARTICLE LINKS AND DIVIDERS
========================================================================== */

body.blog-page.ai1b-single
.ai1b-article-section a {
    color:
        var(--ai1b-green);

    text-decoration-color:
        rgba(145, 255, 25, .35);

    text-underline-offset:
        .22em;
}


body.blog-page.ai1b-single
.ai1b-article-section a:hover {
    color:
        var(--ai1b-green-bright);
}


body.blog-page.ai1b-single
.ai1b-article-section hr {
    width: 100%;
    height: 1px;

    margin:
        40px
        0;

    border: 0;

    background:
        linear-gradient(
            90deg,
            rgba(145, 255, 25, .4),
            rgba(145, 255, 25, .06),
            transparent
        );
}



/* ==========================================================================
   33. ARTICLE SECTION MOTION
========================================================================== */

body.blog-page.ai1b-single.ai1b-article-motion
.ai1b-article-section {
    opacity: 0;

    filter:
        blur(7px);

    transition:
        opacity .72s ease,
        filter .8s ease,
        transform
        .88s
        cubic-bezier(.2, .8, .2, 1),
        border-color .38s ease,
        box-shadow .38s ease;
}


body.blog-page.ai1b-single.ai1b-article-motion
.ai1b-article-section.ai1b-section--left {
    transform:
        translateX(-70px)
        translateY(24px);
}


body.blog-page.ai1b-single.ai1b-article-motion
.ai1b-article-section.ai1b-section--right {
    transform:
        translateX(70px)
        translateY(24px);
}


body.blog-page.ai1b-single.ai1b-article-motion
.ai1b-article-section.is-inview {
    opacity: 1;

    filter: none;

    transform: none;
}


body.blog-page.ai1b-single.ai1b-article-motion
.ai1b-article-section.is-inview:hover {
    transform:
        translateY(-5px);
}



/* ==========================================================================
   34. SINGLE ARTICLE ANIMATIONS
========================================================================== */

body.blog-page.ai1b-single
.ai1b-article-hero__content {
    animation:
        ai1bArticleHeroIn
        .9s
        cubic-bezier(.2, .8, .2, 1)
        both;
}


body.blog-page.ai1b-single
.ai1b-article-hero__orb {
    animation:
        ai1bArticleOrbIn
        1.1s
        cubic-bezier(.2, .8, .2, 1)
        both,

        ai1bArticleOrbFloat
        7s
        ease-in-out
        1.1s
        infinite;
}


@keyframes ai1bArticleHeroIn {

    from {
        opacity: 0;

        filter:
            blur(8px);

        transform:
            translateY(38px);
    }

    to {
        opacity: 1;

        filter:
            none;

        transform:
            none;
    }

}


@keyframes ai1bArticleOrbIn {

    from {
        opacity: 0;

        transform:
            translateY(-50%)
            scale(.72)
            rotate(-14deg);
    }

    to {
        opacity: 1;

        transform:
            translateY(-50%)
            scale(1)
            rotate(0deg);
    }

}


@keyframes ai1bArticleOrbFloat {

    0%,
    100% {
        transform:
            translateY(-50%)
            translateX(0);
    }

    50% {
        transform:
            translateY(
                calc(-50% - 12px)
            )
            translateX(-8px);
    }

}


@keyframes ai1bArticleLogoPulse {

    0%,
    100% {
        filter:
            drop-shadow(
                0 0 8px
                rgba(145, 255, 25, .25)
            )
            drop-shadow(
                0 0 18px
                rgba(145, 255, 25, .09)
            );

        transform:
            scale(.96);
    }

    50% {
        filter:
            drop-shadow(
                0 0 13px
                rgba(145, 255, 25, .42)
            )
            drop-shadow(
                0 0 30px
                rgba(145, 255, 25, .15)
            );

        transform:
            scale(1);
    }

}


@keyframes ai1bArticleLogoSweep {

    0%,
    63% {
        left: -65%;
        opacity: 0;
    }

    68% {
        opacity: .65;
    }

    82% {
        opacity: .22;
    }

    100% {
        left: 135%;
        opacity: 0;
    }

}



/* ==========================================================================
   35. DESKTOP / TABLET BEHAVIOUR
========================================================================== */

@media (max-width: 1100px) {

    /* ----------------------------------------------------------------------
       Category Blog
    ---------------------------------------------------------------------- */

    .ai1b-hero {
        min-height: auto;
    }


    .ai1b-hero__content {
        grid-template-columns:
            1fr;

        gap: 58px;
    }


    .ai1b-hero__copy {
        max-width: 880px;
    }


    .ai1b-hero-console {
        width:
            min(
                760px,
                100%
            );

        transform: none;
    }


    .ai1b-hero-console:hover {
        transform:
            translateY(-7px);
    }

}


@media (max-width: 900px) {

    /* ----------------------------------------------------------------------
       Single Article
    ---------------------------------------------------------------------- */

    .ai1b-article-hero {
        min-height: 580px;
    }


    .ai1b-article-hero__content {
        max-width: 88%;
    }


    .ai1b-article-hero__orb {
        right: -80px;

        width:
            clamp(
                280px,
                42vw,
                400px
            );

        opacity: .65;
    }


    .ai1b-article-hero__orb-logo-wrap {
        inset: 19%;
    }


    .ai1b-article-stream {
        width:
            min(
                calc(100% - 32px),
                1120px
            );
    }


    .ai1b-article-stream::before {
        left: 25px;
    }


    .ai1b-article-section {
        padding:
            38px
            34px
            44px
            70px;

        border-radius: 24px;
    }


    .ai1b-article-section__number {
        left: 18px;
    }

}


@media (max-width: 820px) {

    body.blog-page {
        --ai1b-shell:
            min(
                calc(100% - 30px),
                1380px
            );
    }


    /* ----------------------------------------------------------------------
       Category Blog
    ---------------------------------------------------------------------- */

    .ai1b-hero-console__body {
        min-height: 500px;

        padding:
            38px
            36px
            36px;
    }


    .ai1b-feed-line {
        grid-template-columns:
            32px
            100px
            minmax(0, 1fr);

        gap: 14px;

        min-height: 76px;
    }


    .ai1b-knowledge-zone {
        grid-template-columns:
            minmax(0, 1fr)
            130px;

        gap: 42px;

        margin-top: 48px;

        padding-right: 12px;
    }


    .ai1b-feed-core {
        width: 116px;
        height: 116px;
    }


    .ai1b-feed-core::before {
        inset: -12px;
    }


    .ai1b-feed-core::after {
        inset: -23px;
    }


    .ai1b-feed-core span {
        font-size: 2rem;
    }


    body.blog-page .blog-items,
    body.blog-page
    .com-content-category-blog__items {
        grid-template-columns: 1fr;
    }


    body.blog-page .blog-item,
    body.blog-page .blog-item.ai1b-featured,
    body.blog-page
    .blog-items > .blog-item:first-child {
        grid-column: auto;

        min-height: 0;
    }


    body.blog-page
    .blog-items::after {
        left: 195px;
    }

}



/* ==========================================================================
   36. MOBILE BEHAVIOUR
========================================================================== */

@media (max-width: 680px) {

    body.blog-page {
        --ai1b-shell:
            min(
                calc(100% - 24px),
                1380px
            );
    }


    /* ----------------------------------------------------------------------
       Category Hero
    ---------------------------------------------------------------------- */

    .ai1b-hero__content {
        gap: 42px;

        padding:
            72px
            0;
    }


    body.blog-page
    .ai1b-hero h1 {
        font-size:
            clamp(
                3.2rem,
                13vw,
                4.8rem
            ) !important;
    }


    body.blog-page
    .ai1b-hero__lead {
        font-size:
            1rem !important;
    }


    .ai1b-hero__topics {
        gap: 7px;
    }


    /* ----------------------------------------------------------------------
       Knowledge Feed console
    ---------------------------------------------------------------------- */

    .ai1b-hero-console {
        border-radius: 24px;
    }


    .ai1b-hero-console__head {
        min-height: 0;

        padding:
            18px
            22px;
    }


    .ai1b-hero-console__body {
        min-height: 0;

        padding:
            30px
            26px
            34px;
    }


    .ai1b-feed-line {
        grid-template-columns:
            26px
            78px
            minmax(0, 1fr);

        gap: 10px;

        min-height: 68px;

        padding:
            6px
            0;
    }


    .ai1b-feed-line > span {
        font-size: .58rem;
    }


    .ai1b-feed-line strong {
        font-size: 1.1rem;
    }


    .ai1b-knowledge-zone {
        grid-template-columns:
            1fr;

        gap: 48px;

        margin-top: 42px;

        padding:
            24px
            0
            26px;
    }


    .ai1b-knowledge-stream {
        width: 100%;
    }


    .ai1b-knowledge-stream__item {
        grid-template-columns:
            70px
            minmax(60px, 1fr)
            24px;

        gap: 10px;
    }


    .ai1b-feed-core {
        width: 96px;
        height: 96px;

        justify-self: end;

        margin-right: 24px;
        margin-bottom: 18px;
    }


    .ai1b-feed-core::before {
        inset: -10px;
    }


    .ai1b-feed-core::after {
        inset: -19px;
    }


    .ai1b-feed-core span {
        font-size: 1.7rem;
    }


    .ai1b-feed-core small {
        margin-top: 6px;

        font-size: .37rem;
    }


    .ai1b-hero-console__foot {
        grid-template-columns: 1fr;

        gap: 10px;

        min-height: 0;

        padding:
            17px
            22px;
    }


    .ai1b-hero-console__foot span:last-child {
        justify-self: start;

        text-align: left;
    }


    /* ----------------------------------------------------------------------
       Category Blog cards
    ---------------------------------------------------------------------- */

    body.blog-page .blog-items,
    body.blog-page
    .com-content-category-blog__items {
        gap: 20px;

        padding:
            105px
            0
            96px;
    }


    body.blog-page
    .blog-items::before {
        top: 52px;
    }


    body.blog-page
    .blog-items::after {
        top: 61px;

        left: 183px;
    }


    body.blog-page .blog-item,
    body.blog-page
    .blog-item.ai1b-featured,
    body.blog-page
    .blog-items > .blog-item:first-child {
        padding:
            31px
            24px !important;

        border-radius:
            23px !important;
    }


    body.blog-page
    .blog-item.ai1b-featured h1,
    body.blog-page
    .blog-items > .blog-item:first-child h1,
    body.blog-page
    .blog-item.ai1b-featured > h2:first-of-type,
    body.blog-page
    .blog-item.ai1b-featured .page-header h2,
    body.blog-page
    .blog-items > .blog-item:first-child > h2:first-of-type,
    body.blog-page
    .blog-items > .blog-item:first-child .page-header h2 {
        font-size:
            clamp(
                2.35rem,
                9vw,
                3.7rem
            ) !important;
    }


    body.blog-page
    .blog-item
    .item-content h2 {
        gap: 10px;

        margin-top:
            38px !important;

        font-size:
            clamp(
                1.08rem,
                5vw,
                1.3rem
            ) !important;
    }


    body.blog-page
    .blog-item
    .item-content h2::before {
        width: 19px;
    }


    body.blog-page
    .blog-item
    .item-content h2::after {
        max-width: 45px;
    }


    body.blog-page.ai1b-heading-motion
    .blog-item
    .item-content h2.ai1b-heading--left {
        transform:
            translateX(-35px);
    }


    body.blog-page.ai1b-heading-motion
    .blog-item
    .item-content h2.ai1b-heading--right {
        transform:
            translateX(35px);
    }


    /* ----------------------------------------------------------------------
       Single Article Hero
    ---------------------------------------------------------------------- */

    .ai1b-article-hero {
        min-height: auto;
    }


    .ai1b-article-hero__inner {
        padding:
            76px
            0
            82px;
    }


    .ai1b-article-hero__content {
        max-width: 100%;
    }


    body.blog-page.ai1b-single
    .ai1b-article-hero h1 {
        font-size:
            clamp(
                2.75rem,
                12vw,
                4.3rem
            ) !important;
    }


    .ai1b-article-kicker {
        font-size: .6rem;

        letter-spacing: .14em;
    }


    /* ----------------------------------------------------------------------
       Single Article Logo Orb
    ---------------------------------------------------------------------- */

    .ai1b-article-hero__orb {
        top: 30%;
        right: -125px;

        width: 300px;

        opacity: .38;
    }


    .ai1b-article-hero__orb-logo-wrap {
        inset: 19%;
    }


    .ai1b-article-hero__orb-logo {
        padding: 4%;
    }


    /* ----------------------------------------------------------------------
       Article content stream
    ---------------------------------------------------------------------- */

    .ai1b-article-stream {
        width:
            min(
                calc(100% - 24px),
                1120px
            );

        margin:
            70px
            auto
            95px;
    }


    .ai1b-article-stream::before {
        display: none;
    }


    .ai1b-article-section {
        margin-bottom: 22px;

        padding:
            64px
            24px
            32px;

        border-radius: 22px;
    }


    .ai1b-article-section__number {
        top: 20px;
        left: 24px;

        width: 32px;
        height: 32px;
    }


    body.blog-page.ai1b-single
    .ai1b-article-section h2 {
        font-size:
            clamp(
                1.45rem,
                7vw,
                2rem
            ) !important;
    }


    body.blog-page.ai1b-single
    .ai1b-article-section ul,
    body.blog-page.ai1b-single
    .ai1b-article-section ol {
        grid-template-columns:
            1fr;
    }


    body.blog-page.ai1b-single.ai1b-article-motion
    .ai1b-article-section.ai1b-section--left {
        transform:
            translateX(-30px)
            translateY(20px);
    }


    body.blog-page.ai1b-single.ai1b-article-motion
    .ai1b-article-section.ai1b-section--right {
        transform:
            translateX(30px)
            translateY(20px);
    }

}



/* ==========================================================================
   37. SMALL-MOBILE BEHAVIOUR
========================================================================== */

@media (max-width: 440px) {

    /* ----------------------------------------------------------------------
       Category Blog
    ---------------------------------------------------------------------- */

    .ai1b-kicker {
        font-size:
            .63rem !important;

        letter-spacing:
            .12em;
    }


    .ai1b-kicker > span {
        width: 34px;
    }


    .ai1b-hero__topics span {
        min-height: 34px;

        padding:
            0
            12px;

        font-size: .6rem;
    }


    .ai1b-hero-console__body {
        padding:
            26px
            20px
            30px;
    }


    .ai1b-feed-line {
        grid-template-columns:
            23px
            65px
            minmax(0, 1fr);

        gap: 8px;

        min-height: 62px;
    }


    .ai1b-feed-line strong {
        font-size: 1rem;
    }


    .ai1b-knowledge-zone {
        gap: 42px;

        margin-top: 36px;
    }


    .ai1b-knowledge-stream__head {
        gap: 10px;
    }


    .ai1b-knowledge-stream__head > span {
        font-size: .46rem;
    }


    .ai1b-knowledge-stream__head > b {
        font-size: .42rem;
    }


    .ai1b-knowledge-stream__item {
        grid-template-columns:
            62px
            minmax(45px, 1fr)
            22px;

        gap: 8px;
    }


    .ai1b-knowledge-stream__item > span {
        font-size: .43rem;
    }


    .ai1b-knowledge-stream__status > span {
        font-size: .38rem;
    }


    .ai1b-feed-core {
        width: 84px;
        height: 84px;

        margin-right: 20px;
    }


    .ai1b-feed-core::before {
        inset: -9px;
    }


    .ai1b-feed-core::after {
        inset: -16px;
    }


    .ai1b-feed-core span {
        font-size: 1.5rem;
    }


    .ai1b-feed-core small {
        font-size: .33rem;
    }


    /* ----------------------------------------------------------------------
       Single Article
    ---------------------------------------------------------------------- */

    .ai1b-article-hero__inner {
        padding:
            64px
            0
            72px;
    }


    body.blog-page.ai1b-single
    .ai1b-article-hero h1 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.6rem
            ) !important;
    }


    .ai1b-article-hero__intro {
        margin-top: 25px;
    }


    body.blog-page.ai1b-single
    .ai1b-article-hero__intro p:first-child {
        font-size:
            1.1rem !important;
    }


    .ai1b-article-back {
        margin-top: 30px;
    }


    .ai1b-article-hero__orb {
        top: 24%;
        right: -145px;

        width: 280px;

        opacity: .29;
    }


    .ai1b-article-section {
        padding:
            62px
            20px
            29px;
    }


    .ai1b-article-section__number {
        left: 20px;
    }


    body.blog-page.ai1b-single
    .ai1b-article-section p,
    body.blog-page.ai1b-single
    .ai1b-article-section li {
        font-size: .96rem;
    }

}



/* ==========================================================================
   38. REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {

    /* ----------------------------------------------------------------------
       Category animations
    ---------------------------------------------------------------------- */

    .ai1b-hero__scan,
    .ai1b-hero-console::after,
    .ai1b-hero-console__head b i,
    .ai1b-feed-line i::after,
    .ai1b-feed-core::before,
    .ai1b-feed-core::after,
    .ai1b-knowledge-stream__head > b::before,
    .ai1b-knowledge-stream__status > i::after,
    .ai1b-knowledge-stream__item > i > b {
        animation:
            none !important;
    }


    body.blog-page.ai1b-motion-ready
    .blog-item {
        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;
    }


    body.blog-page.ai1b-heading-motion
    .blog-item
    .item-content h2 {
        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    body.blog-page.ai1b-heading-motion
    .blog-item
    .item-content h2::before,
    body.blog-page.ai1b-heading-motion
    .blog-item
    .item-content h2::after {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    body.blog-page .blog-item,
    .ai1b-hero-console,
    .ai1b-hero__topics span {
        transition:
            none !important;
    }


    /* ----------------------------------------------------------------------
       Single Article animations
    ---------------------------------------------------------------------- */

    .ai1b-article-hero__content,
    .ai1b-article-hero__orb,
    .ai1b-article-hero__orb::before,
    .ai1b-article-hero__orb-logo,
    .ai1b-article-hero__orb-logo-wrap::after {
        animation:
            none !important;
    }


    body.blog-page.ai1b-single.ai1b-article-motion
    .ai1b-article-section {
        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    .ai1b-reading-progress__bar {
        transition:
            none;
    }

}