/* ==========================================================================
   AI1GROUP SHARED TEMPLATE CSS
   Clean rebuild — header, navigation, footer, controls and shared motion

   CONTENTS
   01. Fonts and design tokens
   02. Global reset and shared shell
   03. Header artwork
   04. Primary navigation
   05. Desktop dropdown navigation
   06. Mobile navigation
   07. Main content wrappers
   08. Global buttons and project CTA
   09. Footer
   10. Social links and legal area
   11. Back-to-top control
   12. Cookie banner
   13. Shared link treatment
   14. Shared page typography
   15. Shared reveal motion
   16. Responsive refinements
========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");


/* ==========================================================================
   01. FONTS AND DESIGN TOKENS
========================================================================== */

:root {
    --ai1-green: #73d600;
    --ai1-green-bright: #9cff22;
    --ai1-green-deep: #56ad00;
    --ai1-gold: #f0d59a;

    --ai1-bg: #020504;
    --ai1-bg-deep: #010302;
    --ai1-panel: rgba(5, 14, 8, .96);

    --ai1-text: #f5f8f5;
    --ai1-muted: #9cad9f;

    --ai1-link: #86ef16;
    --ai1-link-bright: #a3ff2b;

    --ai1-border: rgba(156, 255, 34, .14);
    --ai1-border-strong: rgba(156, 255, 34, .30);

    --ai1-active-orb: #ff3b3b;
    --ai1-active-orb-glow: rgba(255, 59, 59, .72);

    --ai1-shell: 1380px;
    --ai1-page-gutter: clamp(1rem, 3vw, 2.5rem);

    --ai1-shadow: 0 28px 80px rgba(0, 0, 0, .42);
    --ai1-shadow-strong: 0 34px 90px rgba(0, 0, 0, .52);

    --ai1-radius: 18px;
    --ai1-ease-premium: cubic-bezier(.2, .78, .2, 1);
}


/* ==========================================================================
   02. GLOBAL RESET AND SHARED SHELL
========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
    font-family: "Comfortaa", system-ui, sans-serif;
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    color: var(--ai1-text);
    background: var(--ai1-bg);
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

.ai1-shell {
    width: min(
        var(--ai1-shell),
        calc(100% - (var(--ai1-page-gutter) * 2))
    );
    margin-inline: auto;
}

.ai1-skip-link {
    position: fixed;
    z-index: 99999;
    top: 10px;
    left: 10px;
    padding: .8rem 1rem;
    color: #000;
    background: #fff;
    transform: translateY(-160%);
}

.ai1-skip-link:focus {
    transform: none;
}


/* ==========================================================================
   03. HEADER ARTWORK
========================================================================== */

.ai1-header {
    position: relative;
    z-index: 1000;
    background: var(--ai1-bg-deep);
}

.ai1-header-art {
    display: block;
    width: 100%;
    overflow: hidden;
}

.ai1-header-art img {
    width: 100%;
    height: auto;
}


/* ==========================================================================
   04. PRIMARY NAVIGATION
========================================================================== */

.ai1-nav {
    position: sticky;
    z-index: 1200;
    top: 0;
    border-block: 1px solid rgba(156, 255, 34, .12);
    background: rgba(1, 5, 3, .92);
    backdrop-filter: blur(22px);
    transition:
        background .3s ease,
        box-shadow .3s ease;
}

.ai1-nav.is-scrolled {
    background: rgba(1, 5, 3, .98);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
}

.ai1-nav__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    min-height: 104px;
    padding-inline: 0;
}

.ai1-menu-toggle {
    display: none;
}

.ai1-menu-panel {
    grid-column: 1;
    min-width: 0;
    justify-self: stretch;
}

/* Only the ROOT menu is horizontal. Child <ul>s are styled separately. */
.ai1-menu-panel > ul,
.ai1-menu-panel > .mod-menu {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: clamp(.25rem, .7vw, .8rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai1-menu-panel li {
    position: relative;
    min-width: 0;
    list-style: none;
}

.ai1-menu-panel a {
    display: inline-flex;
    min-height: 70px;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 1.1rem clamp(.9rem, 1.3vw, 1.65rem);
    border: 1px solid transparent;
    border-radius: 18px;
    color: var(--ai1-link);
    font-size: clamp(1rem, 1.25vw, 1.3rem);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.ai1-menu-panel a:hover,
.ai1-menu-panel a:focus-visible {
    color: #fff;
    border-color: rgba(156, 255, 34, .22);
    background: rgba(156, 255, 34, .07);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    outline: none;
}

/* True current page only. */
.ai1-menu-panel .current > a {
    color: #fff;
    border-color: rgba(156, 255, 34, .24);
    background:
        linear-gradient(
            135deg,
            rgba(145, 255, 25, .11),
            rgba(240, 213, 154, .035)
        );
    box-shadow: inset 0 0 20px rgba(145, 255, 25, .035);
}

/* Joomla can mark parent/default items active too. Do not give those current styling. */
.ai1-menu-panel li.active:not(.current) > a {
    color: var(--ai1-link);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.ai1-menu-panel li.active:not(.current) > a:hover,
.ai1-menu-panel li.active:not(.current) > a:focus-visible {
    color: #fff;
    border-color: rgba(156, 255, 34, .22);
    background: rgba(156, 255, 34, .07);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

/* Red live-status orb on the true current item. */
.ai1-menu-panel .current > a::before {
    width: .62rem;
    height: .62rem;
    content: "";
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ai1-active-orb);
    box-shadow:
        0 0 0 0 var(--ai1-active-orb-glow),
        0 0 14px var(--ai1-active-orb-glow);
    animation: ai1ActiveMenuOrb 1.65s ease-out infinite;
}

@keyframes ai1ActiveMenuOrb {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 59, 59, .72),
            0 0 12px rgba(255, 59, 59, .68);
        transform: scale(.92);
    }

    55% {
        box-shadow:
            0 0 0 9px rgba(255, 59, 59, 0),
            0 0 20px rgba(255, 59, 59, .82);
        transform: scale(1.08);
    }

    100% {
        box-shadow:
            0 0 0 13px rgba(255, 59, 59, 0),
            0 0 12px rgba(255, 59, 59, .62);
        transform: scale(.92);
    }
}


/* ==========================================================================
   05. DESKTOP DROPDOWN NAVIGATION
========================================================================== */

@media (min-width: 981px) {

    /*
     * Structural fix for Joomla:
     * Any direct button Joomla injects into a menu item which also owns a
     * child <ul> is its separate submenu control ("More about: Solutions").
     * Our navigation does not need it because the parent item itself owns
     * the dropdown interaction.
     */
    .ai1-menu-panel li:has(> ul) > button,
    .ai1-menu-panel li:has(> ul) > .mm-toggler,
    .ai1-menu-panel li:has(> ul) > [class*="toggler"] {
        display: none !important;
    }

    /*
     * Make parent items visually obvious.
     * This chevron is ours, not Joomla's, so it remains consistent.
     */
    .ai1-menu-panel li:has(> ul) > a::after {
        width: .55rem;
        height: .55rem;
        content: "";
        flex: 0 0 auto;
        margin-left: .08rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        opacity: .78;
        transform: translateY(-2px) rotate(45deg);
        transition:
            transform .25s ease,
            opacity .25s ease;
    }

    .ai1-menu-panel li:has(> ul):hover > a::after,
    .ai1-menu-panel li:has(> ul):focus-within > a::after,
    .ai1-menu-panel li:has(> ul).is-sub-open > a::after {
        opacity: 1;
        transform: translateY(2px) rotate(225deg);
    }

    /* Child menu. */
    .ai1-menu-panel li > ul {
        position: absolute;
        z-index: 4000;
        top: calc(100% - 8px);
        left: 50%;

        display: grid;
        width: max-content;
        min-width: 240px;
        max-width: 320px;
        align-items: stretch;
        gap: 4px;

        margin: 0;
        padding: 16px 12px 12px;
        list-style: none;

        border: 1px solid rgba(156, 255, 34, .18);
        border-radius: 18px;
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(145, 255, 25, .09),
                transparent 42%
            ),
            rgba(2, 9, 5, .985);
        box-shadow:
            0 24px 55px rgba(0, 0, 0, .55),
            0 0 28px rgba(115, 214, 0, .055);
        backdrop-filter: blur(22px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 12px);

        transition:
            opacity .18s ease .34s,
            transform .2s ease .34s,
            visibility 0s linear .52s;
    }

    /*
     * Hover bridge: closes the dead zone between the parent link and submenu.
     * This plus the delayed visibility prevents the menu disappearing while
     * the pointer travels down to AI1Host or AI1Design.
     */
    .ai1-menu-panel li > ul::before {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 18px;
        content: "";
    }

    .ai1-menu-panel li:hover > ul,
    .ai1-menu-panel li:focus-within > ul,
    .ai1-menu-panel li.is-sub-open > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }

    .ai1-menu-panel li > ul > li {
        display: block;
        width: 100%;
        margin: 0;
    }

    .ai1-menu-panel li > ul > li > a {
        display: flex;
        width: 100%;
        min-height: 50px;
        justify-content: flex-start;
        padding: .85rem 1rem;
        border-radius: 12px;
        color: var(--ai1-link);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }

    .ai1-menu-panel li > ul > li > a:hover,
    .ai1-menu-panel li > ul > li > a:focus-visible {
        color: #fff;
        border-color: rgba(156, 255, 34, .24);
        background: rgba(156, 255, 34, .085);
        box-shadow: inset 0 0 18px rgba(145, 255, 25, .035);
    }

    .ai1-menu-panel li > ul > li.current > a {
        color: #fff;
        border-color: rgba(156, 255, 34, .24);
        background:
            linear-gradient(
                135deg,
                rgba(145, 255, 25, .11),
                rgba(240, 213, 154, .035)
            );
    }
}


/* ==========================================================================
   06. MOBILE NAVIGATION
========================================================================== */

@media (max-width: 980px) {

    .ai1-nav__shell {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 8px 0;
    }

    .ai1-menu-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: .9rem 1rem;
        border: 1px solid rgba(156, 255, 34, .2);
        border-radius: 16px;
        color: #fff;
        background: rgba(156, 255, 34, .08);
        font-weight: 700;
        cursor: pointer;
    }

    .ai1-menu-toggle__bars {
        display: grid;
        gap: 4px;
    }

    .ai1-menu-toggle__bars span {
        width: 24px;
        height: 2px;
        background: currentColor;
    }

    .ai1-menu-panel {
        position: absolute;
        top: 100%;
        right: 12px;
        left: 12px;
        display: none;
        padding: 12px;
        border: 1px solid rgba(156, 255, 34, .16);
        border-radius: 20px;
        background: rgba(1, 6, 3, .99);
        box-shadow: var(--ai1-shadow);
    }

    .ai1-menu-panel.is-open {
        display: block;
    }

    .ai1-menu-panel > ul,
    .ai1-menu-panel > .mod-menu {
        display: grid;
        width: 100%;
        gap: .15rem;
    }

    .ai1-menu-panel a {
        width: 100%;
        min-height: 58px;
        justify-content: flex-start;
        padding: .95rem 1rem;
        border-radius: 12px;
        font-size: 1.08rem;
    }

    /* Joomla's extra "More about" control is not needed on mobile either. */
    .ai1-menu-panel li:has(> ul) > button,
    .ai1-menu-panel li:has(> ul) > .mm-toggler,
    .ai1-menu-panel li:has(> ul) > [class*="toggler"] {
        display: none !important;
    }

    /* Parent dropdown indicator. */
    .ai1-menu-panel li:has(> ul) > a::after {
        width: .5rem;
        height: .5rem;
        content: "";
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        opacity: .8;
        transform: rotate(45deg);
    }

    /* Children remain visible in the stacked mobile menu. */
    .ai1-menu-panel li > ul {
        position: static;
        display: grid;
        width: 100%;
        gap: .12rem;
        margin: .15rem 0 .45rem;
        padding: 0 0 0 1rem;
        list-style: none;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .ai1-menu-panel li > ul > li > a {
        min-height: 48px;
        justify-content: flex-start;
        padding: .72rem 1rem;
        border-left: 1px solid rgba(156, 255, 34, .18);
        border-radius: 10px;
        font-size: 1rem;
    }

    .ai1-nav__cta {
        display: none !important;
    }
}


/* ==========================================================================
   07. MAIN CONTENT WRAPPERS
========================================================================== */

.ai1-main,
.ai1-main--home,
.ai1-main--home .item-page,
.ai1-main--home .com-content-article,
.ai1-main--home .component-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}


/* ==========================================================================
   08. GLOBAL BUTTONS AND PROJECT CTA
========================================================================== */

.ai1-nav__cta,
.ai1-header-cta,
.ai1-btn-primary {
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    min-width: 210px;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 2.35rem;

    border: 1px solid rgba(156, 255, 34, .42);
    border-radius: 999px;

    color: #071005 !important;
    background:
        linear-gradient(
            135deg,
            #91ff19 0%,
            #73d600 58%,
            #56ad00 100%
        );

    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;

    box-shadow:
        0 12px 34px rgba(115, 214, 0, .28),
        0 0 30px rgba(145, 255, 25, .12),
        inset 0 1px 0 rgba(255, 255, 255, .32);

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

.ai1-nav__cta {
    grid-column: 2;
    justify-self: end;
    min-width: 220px;
}

.ai1-nav__cta::before,
.ai1-header-cta::before,
.ai1-btn-primary::before {
    position: absolute;
    z-index: -1;
    content: "";
    inset: 0;
    background:
        linear-gradient(
            115deg,
            transparent 22%,
            rgba(255, 255, 255, .34) 48%,
            transparent 72%
        );
    transform: translateX(-120%);
    transition: transform .7s ease;
}

.ai1-nav__cta:hover,
.ai1-nav__cta:focus-visible,
.ai1-header-cta:hover,
.ai1-header-cta:focus-visible,
.ai1-btn-primary:hover,
.ai1-btn-primary:focus-visible {
    color: #061004 !important;
    border-color: rgba(185, 255, 91, .75);
    background:
        linear-gradient(
            135deg,
            #a2ff38 0%,
            #82e900 56%,
            #62bd00 100%
        );
    box-shadow:
        0 18px 44px rgba(115, 214, 0, .4),
        0 0 38px rgba(145, 255, 25, .22),
        inset 0 1px 0 rgba(255, 255, 255, .4);
    transform: translateY(-3px) scale(1.02);
    outline: none;
}

.ai1-nav__cta:hover::before,
.ai1-nav__cta:focus-visible::before,
.ai1-header-cta:hover::before,
.ai1-header-cta:focus-visible::before,
.ai1-btn-primary:hover::before,
.ai1-btn-primary:focus-visible::before {
    transform: translateX(120%);
}

.ai1-nav__cta:active,
.ai1-header-cta:active,
.ai1-btn-primary:active {
    transform: translateY(0) scale(.99);
}


/* ==========================================================================
   09. FOOTER
========================================================================== */

.ai1-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(4.6rem, 7vw, 7rem) 0 1.8rem;
    border-top: 1px solid rgba(156, 255, 34, .14);
    background:
        radial-gradient(
            circle at 20% 0,
            rgba(115, 214, 0, .14),
            transparent 28%
        ),
        linear-gradient(180deg, #07110b, #010302);
}

.ai1-footer::before {
    position: absolute;
    top: 4vw;
    right: -2vw;
    content: "AI1GROUP";
    color: rgba(255, 255, 255, .025);
    font-size: clamp(7rem, 18vw, 18rem);
    font-weight: 700;
    letter-spacing: -.08em;
    pointer-events: none;
}

.ai1-footer__beam {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ai1-green-bright),
            var(--ai1-gold),
            transparent
        );
}

.ai1-footer__grid-bg {
    position: absolute;
    inset: 0;
    opacity: .11;
    background-image:
        radial-gradient(
            circle,
            rgba(156, 255, 34, .16) 1px,
            transparent 1.5px
        );
    background-size: 38px 38px;
    mask-image: linear-gradient(#000, transparent 86%);
}

.ai1-footer > .ai1-shell {
    position: relative;
    z-index: 2;
}

.ai1-footer__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    overflow: hidden;

    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    padding: clamp(1.8rem, 3.5vw, 2.8rem);

    border: 1px solid rgba(145, 255, 25, .28);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(145, 255, 25, .16),
            transparent 34%
        ),
        linear-gradient(
            125deg,
            rgba(255, 255, 255, .055),
            rgba(145, 255, 25, .035)
        );

    box-shadow:
        0 36px 100px rgba(0, 0, 0, .46),
        0 0 60px rgba(145, 255, 25, .09);
}

.ai1-footer__hero::before {
    position: absolute;
    content: "";
    inset: 0;
    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255, 255, 255, .07) 48%,
            transparent 70%
        );
    transform: translateX(-110%);
    animation: ai1FooterSweep 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ai1FooterSweep {
    0%,
    64% {
        opacity: 0;
        transform: translateX(-110%);
    }

    74% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(110%);
    }
}

.ai1-footer__headline {
    position: relative;
    z-index: 2;
}

.ai1-footer__kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    color: rgba(231, 238, 232, .58);
    font-size: clamp(.9rem, 1vw, 1.02rem);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ai1-footer__kicker::before {
    width: 48px;
    height: 3px;
    content: "";
    border-radius: 99px;
    background:
        linear-gradient(
            90deg,
            #91ff19,
            rgba(145, 255, 25, .12)
        );
    box-shadow: 0 0 16px rgba(145, 255, 25, .45);
    animation: ai1FooterKicker 2.2s ease-in-out infinite;
}

@keyframes ai1FooterKicker {
    0%,
    100% {
        opacity: .55;
        transform: scaleX(.72);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.ai1-footer__headline h2 {
    max-width: 760px;
    margin: 0 0 .6rem;
    font-size: clamp(1.8rem, 3vw, 3.15rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.ai1-footer__headline p:last-child {
    margin: 0;
    color: var(--ai1-muted);
}

.ai1-footer__cta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    gap: 10px;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(156, 255, 34, .28);
    border-radius: 999px;
    color: #000000 !important;
    background: linear-gradient(135deg, #91ff19, #5fb900);
    box-shadow: 0 14px 35px rgba(110, 225, 0, .22);
    font-weight: 700;
    text-decoration: none;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.ai1-footer__cta:hover,
.ai1-footer__cta:focus-visible {
    color: #061007;
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(110, 225, 0, .32);
    outline: none;
}

.ai1-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: 1.25rem;
}

.ai1-footer-card {
    position: relative;
    min-height: 205px;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.ai1-footer-card::before {
    position: absolute;
    content: "";
    inset: 0;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(145, 255, 25, .08),
            transparent 32%
        );
    pointer-events: none;
}

.ai1-footer-card:hover {
    border-color: rgba(145, 255, 25, .3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
    transform: translateY(-8px);
}

.ai1-footer-card__number {
    display: none;
}

.ai1-footer h3 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: .95rem;
}

.ai1-footer ul {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai1-footer p,
.ai1-footer li {
    color: var(--ai1-muted);
    line-height: 1.65;
}

.ai1-footer a,
.ai1-footer-link-button {
    color: var(--ai1-link);
    text-decoration: none;
}

.ai1-footer a:hover,
.ai1-footer a:focus-visible,
.ai1-footer-link-button:hover,
.ai1-footer-link-button:focus-visible {
    color: var(--ai1-link-bright);
    text-shadow: 0 0 14px rgba(156, 255, 34, .24);
}

.ai1-footer-link-button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}


/* ==========================================================================
   10. SOCIAL LINKS AND LEGAL AREA
========================================================================== */

.ai1-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: clamp(1.5rem, 3vw, 2rem) 0;
    padding: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: transparent;
}

.ai1-footer__social > div {
    display: flex;
    justify-content: center;
    gap: 1.15rem;
}

.ai1-footer__social a {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(145, 255, 25, .18);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(145, 255, 25, .08),
            rgba(255, 255, 255, .025)
        );
    box-shadow: 0 14px 35px rgba(0, 0, 0, .22);
    transition:
        transform .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

.ai1-footer__social a:hover,
.ai1-footer__social a:focus-visible {
    border-color: rgba(145, 255, 25, .5);
    box-shadow:
        0 22px 45px rgba(0, 0, 0, .32),
        0 0 28px rgba(145, 255, 25, .14);
    transform: translateY(-7px) scale(1.06);
}

.ai1-footer__social img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28));
}

.ai1-footer__legal {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}

.ai1-footer__legal p {
    max-width: 1000px;
    margin: .35rem auto;
    font-size: .68rem;
}


/* ==========================================================================
   11. BACK-TO-TOP CONTROL
========================================================================== */

.ai1-scrolltop {
    position: fixed;
    z-index: 99990;
    right: 22px;
    bottom: 22px;

    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #fff;
    background: rgba(2, 7, 4, .95);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .45),
        0 0 22px rgba(115, 214, 0, .12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    cursor: pointer;
}

.ai1-scrolltop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ai1-scrolltop:hover {
    box-shadow:
        0 20px 42px rgba(0, 0, 0, .48),
        0 0 28px rgba(115, 214, 0, .22);
    transform: translateY(-3px) scale(1.04);
}

.ai1-scrolltop::before {
    position: absolute;
    content: "";
    inset: 8px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(156, 255, 34, .12),
            transparent 58%
        );
    pointer-events: none;
}

.ai1-scrolltop svg {
    position: absolute;
    width: 58px;
    height: 58px;
    inset: 0;
    transform: rotate(-90deg);
}

.ai1-scrolltop circle {
    fill: none;
    stroke-width: 4;
}

.ai1-scrolltop__track {
    stroke: transparent;
}

.ai1-scrolltop__progress {
    stroke: var(--ai1-green-bright);
    stroke-width: 3;
    stroke-linecap: round;
}

.ai1-scrolltop > span {
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
}


/* ==========================================================================
   12. COOKIE BANNER
========================================================================== */

.ai1-cookie-banner {
    position: fixed;
    z-index: 999999;
    inset: auto 16px 16px;
}

.ai1-cookie-banner[hidden] {
    display: none;
}

.ai1-cookie-banner__inner {
    display: flex;
    width: min(1180px, 100%);
    justify-content: space-between;
    gap: 2rem;
    margin: auto;
    padding: 1.4rem;
    border: 1px solid rgba(156, 255, 34, .16);
    border-radius: 22px;
    background: rgba(4, 12, 7, .98);
    box-shadow: var(--ai1-shadow);
}

.ai1-cookie-banner__eyebrow {
    color: var(--ai1-green-bright);
}


/* ==========================================================================
   13. SHARED LINK TREATMENT
========================================================================== */

.ai1-main a:not(.ai1-v4-button):not(.ai1-nav__cta):not(.ai1-footer__cta),
.ai1-main--inner a:not(.button):not(.btn),
body.inner .item-page a,
body.inner .com-content-article a,
body.inner .blog a {
    color: var(--ai1-link);
    text-decoration-color: rgba(134, 239, 22, .42);
    text-underline-offset: .18em;
}

.ai1-main a:not(.ai1-v4-button):not(.ai1-nav__cta):not(.ai1-footer__cta):hover,
.ai1-main--inner a:not(.button):not(.btn):hover,
body.inner .item-page a:hover,
body.inner .com-content-article a:hover,
body.inner .blog a:hover {
    color: var(--ai1-link-bright);
    text-decoration-color: currentColor;
}


/* ==========================================================================
   14. SHARED PAGE TYPOGRAPHY
========================================================================== */

.ai1-v4,
.ai1x-page,
.ai1-team-page,
.ai1-policy-page {
    font-family: "Comfortaa", system-ui, sans-serif;
}

.ai1-v4-hero h1,
.ai1x-hero h1,
.ai1-team-hero h1,
.ai1-policy-hero h1 {
    margin: 0;
    font-family: "Comfortaa", system-ui, sans-serif;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.06em;
    text-wrap: balance;
}


/* ==========================================================================
   15. SHARED REVEAL MOTION
========================================================================== */

.ai1-reveal {
    opacity: 0;
    filter: blur(7px);
    transition:
        opacity .72s ease,
        transform .88s var(--ai1-ease-premium),
        filter .82s ease;
    transition-delay: var(--ai1-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.ai1-reveal[data-ai1-reveal="left"] {
    transform: translate3d(-72px, 0, 0);
}

.ai1-reveal[data-ai1-reveal="right"] {
    transform: translate3d(72px, 0, 0);
}

.ai1-reveal[data-ai1-reveal="up"] {
    transform: translate3d(0, 52px, 0) scale(.985);
}

.ai1-reveal[data-ai1-reveal="down"] {
    transform: translate3d(0, -48px, 0) scale(.985);
}

.ai1-reveal[data-ai1-reveal="zoom"] {
    transform: scale(.9);
}

.ai1-reveal[data-ai1-reveal="flip"] {
    transform:
        perspective(900px)
        rotateX(10deg)
        translateY(30px);
}

.ai1-reveal.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
}


/* ==========================================================================
   16. RESPONSIVE REFINEMENTS
========================================================================== */

@media (min-width: 1500px) {
    .ai1-shell.ai1-nav__shell {
        width:
            min(
                1500px,
                calc(100% - (var(--ai1-page-gutter) * 2))
            );
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    .ai1-nav__shell {
        gap: .8rem;
    }

    .ai1-menu-panel > ul,
    .ai1-menu-panel > .mod-menu {
        gap: .15rem;
    }

    .ai1-menu-panel a {
        min-height: 62px;
        padding: .95rem .8rem;
        font-size: .96rem;
    }

    .ai1-nav__cta {
        min-width: 184px;
        min-height: 60px;
        padding-inline: 1.4rem;
        font-size: 1rem;
    }
}

@media (max-width: 980px) {
    .ai1-footer__hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ai1-footer__cta {
        justify-self: center;
    }

    .ai1-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai1-cookie-banner__inner {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .ai1-v4-hero h1,
    .ai1x-hero h1,
    .ai1-team-hero h1,
    .ai1-policy-hero h1 {
        font-size: clamp(3rem, 14vw, 5rem);
    }
}

@media (max-width: 680px) {
    .ai1-footer__grid {
        grid-template-columns: 1fr;
    }

    .ai1-footer__social > div {
        gap: .75rem;
    }

    .ai1-footer__social a {
        width: 52px;
        height: 52px;
    }

    .ai1-footer__social img {
        width: 40px;
        height: 40px;
    }

    .ai1-scrolltop {
        right: 14px;
        bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ai1-menu-panel a,
    .ai1-menu-panel li > ul,
    .ai1-nav__cta,
    .ai1-header-cta,
    .ai1-btn-primary,
    .ai1-nav__cta::before,
    .ai1-header-cta::before,
    .ai1-btn-primary::before,
    .ai1-footer-card,
    .ai1-footer__cta,
    .ai1-footer__social a,
    .ai1-scrolltop,
    .ai1-reveal {
        transition: none !important;
    }

    .ai1-menu-panel .current > a::before,
    .ai1-footer__hero::before,
    .ai1-footer__kicker::before {
        animation: none !important;
    }

    .ai1-reveal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}